@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  width: 100%;
  font-family: sans-serif;
  font-size: 18px;
    background: url(../img/pochemu-sushi.jpg) no-repeat #f3edf4;
    background-size: cover;

}
header{
  width: 100%;
  height: 60vh;
  /* background-color:#1E796A; */
  position: relative;
 background-image: linear-gradient(#006957,#00A287);
}
header .header{
  width: 100%;
  color:#fff;
  background-image: linear-gradient(#00A287,#006957);

  position: fixed;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

header .header .logo img{
  width: 50px;
  vertical-align: middle;
  margin-top: 10px;
}
.logo{
  cursor: pointer;
}

header .header .logo span{
  font-size: 1.5em;
  font-family: 'Pacifico', cursive;
}

header .header .contact{
  font-size: 1.5em;
  margin-top: 10px;
}

main{
  width: 100%;
  height: auto;
  padding: 30px 0;
}

/* меню */
.conteiner{
  width: 100%;
  padding: 10px;
  position: relative;
}
#open, #close{
  display: none;
}

.main-menu{
  list-style: none;
  text-align: center;
}

.main-menu li{
  display: inline-block;
  margin-left: 15px;

}

.main-menu li a{
  text-decoration: none;
  color:#fff;
  display: block;
  font-size: 24px;

}
.main-menu li a:hover{
  border-bottom: 2px solid #fff;
  transition: 0.6s;

}
.main-menu li a.active:hover{
 border-bottom: none;
 cursor: text;
}

.toogle-button, #menu-checkbox{
  display: none;
font-size: 40px;
}
/* общие стили */
section{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: rgba(53, 215, 131, 0.57);
}
.borderShadov{
  border: 2px solid #006957;
  border-radius: 10px;
  box-shadow: 4px 4px 8px 0px rgba(1, 1, 1, 0.32);
}

button{
 width: 30%;
 min-width: 70px;
 padding: 10px;
 background-color: #a4655f;
 border-radius: 15px;
 font-size: 1.2em;
 font-weight: bold;
 margin: auto;
}

button:hover{
  background-color: #00A287;
  color:#000;
}

button:focus {
  outline:none;
}

button a{
 color:#000;
 text-decoration: none;
}
button a:hover{
   color:#000;
    text-decoration: none;
}
h1{
  width: 80%;
  margin: 30px auto;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'Pacifico', cursive;
  font-size: 3em;
}
a{
  text-decoration: underline;
  color:#006957;

}
a:hover{
  color: #00A287;
    transition: 0.5s;
}

/* главная */
section.home{

  position: relative;
  z-index: 1;
  margin: -350px auto;

  background-color: #fff;
}

.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.home .home_img, .home_text, .video-video, .video-text{
  width: 50%;
  min-width: 300px;
}



.home .home_img img{
  width: 90%;
  margin-top: 10px;
}
.home .home_img img:hover{
  transform: rotate(5deg);
  transition: 0.8s;
}

.imag1{
  position: relative;
  animation: anim1 2s ease  alternate;
}

@keyframes anim1 {
0% {

  opacity: 0;
  transform: scale(0.8);
  transform: translateY(200px);
}


100% {
  opacity: 1;
  transform: scale(1.1);
  transform: translateY(-20px);
}
}





 ul li{
  list-style: none;
}


.video-text ul>li::before{

  content: " ";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: 30px;
  background-image: url(../img/check.png);
  background-repeat: no-repeat;
  margin-right: 10px;
    /* margin-left: 20px; */
  vertical-align: middle;
  margin-left: -40px;

}



.clearfix::before, .clearfix::after{
  content: " ";
  display: table;

}
.clearfix::after{
  clear: both;
}

/* секция видео */
section.video{

  margin-top: 370px;
  padding: 20px;

}

.video-text, .video-video{
  /* padding-left: 60px; */
  width: 90%;
  margin: 0 auto;
}
.video-text{
  margin-bottom: 20px;

}

.videos {
  width: 100%;
}
.videos .videos_wrapper {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
.videos .videos_wrapper .video_itam {
  padding-top: 56.25%;
}
.videos .videos_wrapper .video_itam iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* секция видео */
.ord{
  text-align: center;
  /* margin-top: 20px; */
}
  /* кнопка */

footer{
  width: 100%;
  background-image: linear-gradient(#00A287,#006957);

}
footer .footer{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  color: #fff;
  padding: 10px;
}
footer .footer .logo img{
  width: 50px;
  vertical-align: middle;

}

footer .footer .social .icon{
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 5px;
  background-image: url(../img/icon-social.jpg);
  border: 1px solid #fff;
  border-radius: 50%;
}

footer .footer .social .icon1{
  background-position: -4px -1px ;
}
footer .footer .social .icon2{
  background-position: 47px -1px;
}

footer .footer .social .icon3{
    background-position: -56px -1px;
}
footer .copy p{
  color:#fff;
  text-align: center;
  margin-bottom: 0;
}


@media screen and (max-width:940px){
  header .header{
    display: block;
  }
  header .header .logo, header .header .contact, header .header .menu{
    width: 100%;
    text-align: center;
  }
  section.home{
    margin-top: -300px;
  }
  .left, .right{
    width: 100%;
  }
  .home_img{
    text-align: center;
    margin-top: -100px;
  }
  .video-video, .video-text, .ord{
    text-align: center;
  }
  .video-text ul{
    text-align: left;
  }
  section{
    width: 90%;
  }

}

@media screen and (max-width:600px) {

   header .header{
     background-color:  #006957;
     color: #fff;
   }
    .main-menu{
  /* display: none; */
  position: fixed;
  top:10px;
  right: 0;
  padding: 20px;
  background-color:   #006957;
  /* background-color: inherit; */
  border-radius: 15px;
  display: block;
  margin-right:-500px;
  transition: 1s;

    }
    .main-menu li{
      display: block;


    }
      .main-menu li a{
        color:#fff;
      }

      .imag1{
        animation: identifier 2s ease infinite alternate;
      }

      @keyframes identifier {
        0%{
          transform: translateX(-100px);
        }
        100%{
          transform: translateX(100px);
        }
      }


    .main-menu li a:hover{
      border-bottom: 3px solid #fff;
    }

    .toogle-button{
      display: block;
      position: absolute;
      right: 0px;
      top: -130px;

    }
 .center{
   position: relative;
 }

    #open{
      display: block;
      position: fixed;
      top:10px;
      left: 10px;
      font-size: 35px;
    }
    #close{
      display: none;
      position: fixed;
      top:10px;
      left: 10px;
      font-size: 35px;
    }
   /* nav .main-menu{
     display: block;
     margin-right:-500px;
     transition: 1s; */
       /* animation: menuAnim 2s linear 1; */
    /* } */
    /* @keyframes menuAnim {
  0%{
    right:-160px;
  }
  50%{
    right:-80px;
  }
  100%{
    right:0px;
  } */
/* } */
/* #menu-checkbox + nav .main-menu{
 display: block;
   /* animation: meAnim 2s linear 1  forwards ; */
/* } */
/* @keyframes meAnim {
0%{
right:0px;
}
50%{
right:-80px;
}
100%{
right:-160px;
} */
/* }  */

    /* #menu-checkbox + nav .toogle-button::after{
      content: attr(data-open);

    }
    #menu-checkbox:checked + nav .toogle-button::after{
      content: attr(data-close);
  } */
  section{
    width: 100%;
  }
   button{
    width: 45%;
  }
  .home .home_img img{
    margin-top: 70px;
}
h1{
  margin-top: -10px;
  margin-bottom: 40px;
}
@media screen and (max-width:445px){
  .imag1{
    animation: none;
  }

  button{
    width: 100%;
  }
  h1{
    font-size: 40px;
    margin-top: 50px;
  }
  /* section.video{
    display: none;
  } */
  /* .home .home_img img{
    margin-top: 20px;
  } */

}