@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Caveat:wght@700&family=Lobster&family=Montserrat:wght@400;500;700&display=swap');


/*font-family: 'Roboto', sans-serif;
font-family: 'Sansita Swashed', cursive;*/


/*First block*/
body{
	min-width: 320px;
}
.back_fon {
    width: 100%;
    background: url(../img/fon.jpg);
    position: relative;
    z-index: 0;
}
.name {
    color: #fff;
    font-family: 'Lobster', sans-serif;
    font-size: 70px;
    line-height: 77px;
    font-weight: 700;
    
}
.contact {
    color: #fff;
    font-family: 'Lobster', sans-serif;
    font-size: 30px;
    line-height: 40px;
    font-weight: 500;
    
}
.contact  a {
    color: #fff;
    text-decoration: none;
}
.nav_fon {
    background-color: rgba(255, 245, 238, .9);
    position: relative;
    z-index: 1;
}
li a {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
}

li a:hover {
    color:#514594;
}
/*Secon block*/
.block_fon {
    background-color: rgba(255, 246, 240, 0.9);
}
.carousel-indicators li {
    margin-bottom: 30px;
}
.stock {
    font-family: 'Lobster', cursive, sans-serif;
    font-size: 40px;
    color:#EE82EE;
    border: dotted;
    background: #FFE4B5;
    position: absolute;
    top: 30px;
    left: 50px;
}
.stock_text {
    font-size: 20px;
}
.stock_text{
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
}
 
  
.carousel_all  {
    position: relative;
}
.cofe,
.grade {
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 40px;
    font-weight: 700;
}
.img img {
    width: 200px;
    height: 150px;
    display: block;
    margin: 5px auto;
}
.about_cofe {
    border: 2px solid #C0C0C0;
}
.btn_cofe {
    margin-left: 22%;
    margin-bottom: 10px;
}
.btn_cofe:hover {
    background-color:#00BFFF;
}
.grade_img {
    display: block;
    margin: 0 auto;
}
.footer_fon {
    background-color: rgba(255, 245, 238, .9);
}
.footer_text a {
    font-family: 'Lobster', cursive, sans-serif;  
    text-decoration: none;
    font-size: 30px;
    color: #201f1f;
    position: relative;
}
.footer_text a::before {
    content: "";
    width: 156px;
    height: 52px;
    position: absolute;
    top: 35px;
    left: 20px;
    background: url(../img/css_sprites.png) no-repeat;
}
.grade,
.stock_text {
    width: 100%;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
    animation-iteration-count: infinite;
}
 
@keyframes type{
    from { width: 0; }
}
 
@-webkit-keyframes type{
    from { width: 0; }
}
@keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%; 
    }
  
    to {
      margin-left: 0%;
      width: 100%;
    }
  }
/*MENU*/
.menu_block{
	position: relative;
}
.image_wrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(232,69,69,.7);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	opacity: 0;
}
.menu_block:hover .image_wrap{
	opacity: 1;
}
.descr{
    color: #fff;
    font-family:'Lobster', cursive;
	text-align: center;
	margin: auto;
}
.img_menu {
    width: 300px;
    height: 200px;
}
/*Reviews*/
.form_main {
    position: relative;

}
.form_img {
    position: absolute;
    top: 38px;
    left:50%;
    z-index: 5;
}
.img_form {
    width: 500px;
    height: 450px;

}
.form_main:before {
    content: "";
    width: 500px;
    height: 450px;
    position: absolute;
    top: 38px;
    left:50%;
    z-index: 6;
    background-color: rgba(192, 192, 192, .3);
}
.btn_form {
    cursor: pointer;
}
/*Contact*/
.contact_address {
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 40px;
    font-weight: 700;
}
/*MEDIA*/
@media only screen and (max-width : 480px) {
.contact {
    font-size: 15px;
}
li a {
    font-size: 10px;  
}
.navigat {
    justify-content: space-around;
}

.stock {
    display: none;
    
}
.grade {
    font-size: 30px;
}
.form_img {
    display: none;
}
.form_main:before {
    display: none;
}
.number {
    font-size: 30px;
}
.container-fluid {
    padding: 0;
}
.cart {
    margin-top: 20px;
    
}
.grade_img {
    width: 300px;
    height: 200px;
}
.cart1 {
    margin: 0;
    padding-left: 8px;
}
}