* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}


a{
    text-decoration: none;
    color: #000;
    display: flex;
}
/* header & footer */
.menu {
    background-color: black;
    max-width: 480px;
    margin: auto;
}
.menuWrapper {
    list-style: none;
    width: 320px;
    background-color: white;
}
.menuIcon {
    width: 70px;
    text-align: center;
    cursor: pointer;
}
.menuFlex {
    padding-top: 15px;
    display: flex;
}
.menuFlex:hover .menuList{
    display: block;
}
.menuList {
    padding-inline-start: 20px;
    list-style: none;
    display: none;
}
.menuList>li>a {
    text-decoration: none;
    color: #372c48;
}
.menuList>li>a:hover {
    color: rgba(119, 193, 187, 255);
    cursor: pointer;
    text-decoration: none;
}
.menuTitle {
    padding-top: 3px;
    font-size: 17.5px;
    color: #372c48;
}
.menuTitle:hover {
    color: rgba(119, 193, 187, 255);
    cursor: pointer;
}
.menuRightBlock {
    padding-left: 20px;
}
#idishka1:checked~.menuList {
    display: block;
}
#idishka2:checked~.menuList {
    display: block;
    
}
#idishka3:checked~.menuList {
    display: block;
}
.click {
    display: none;
}
.menuCow {
    display: none;
}
.menuSvg:hover {
    fill: #77c1bb;
}
.iconStar {
    width: 20px;
    height: 20px;
}
@media (min-width:768px) {
    .menu {
        max-width: 960px;
    }
}
@media (min-width:1024px) {
    .menu {
        max-width: 1440px;
    }
    .menuCow {
        padding-top: 20px;
        padding-left: 25px;
        display: block;
        width: 100%;
        height: 150px;
        background-color: #77c1bb;
    }
    .menuLogo {
        width: 80px;
        margin-left: 12px;
    }
    .cowTitle {
        font-size: 26px;
        color: #372c48;
    }
}
.headerFlex {
    display: flex;
    padding: 10px;
    align-items: center;
}
.headerWrapper {
    margin: auto;
    display: flex;
    align-items: center;
    max-width: 480px;
    justify-content: space-between;
}
.footer{
height: 90px;
    background-color: #77c1bb;
}
.footerWrapper {
    margin: auto;
    max-width: 480px;
    justify-content: space-between;
}
.hiddenSearch {
    width: 100%;
    height: 100vh;
    background-color: #77c1bb;
    text-align: center;
    padding-top: 100px;
}
.headerMenu {
    padding-top: 2px;
    width: 70px;
  text-align: center;
}
.headerSection { 
    
    background-color: #77c1bb;
}
.headerLogo {
    margin-right: 15px;
}
.headerTitle {
    padding-top: 3px;
    margin-right: 100px;
}
.headerTitleText {
    color: #372c48;
    font-size: 21px;
}
.headerInput {
    display: none;
}
.headerSearch{
    color: #372c48;
    display: block;
    margin-right: 10px;
}
.hiddenSearchText {
    padding-top: 10px;
    color: #372c48;
    margin-bottom: 50px;
}
.hiddenSearchInput {
    margin: auto;
    padding-left: 35px;
    background-color: transparent;
        color: white;
        width: 240px;
        border: 0px ;
        border-bottom: 2px solid white;
        display: block;
        background: url(./images/searchWhite.svg) no-repeat center left; 
}
.footerList {
list-style: none;
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 0;
}
.footerIcon {
    border: 1px solid #372c48;
    border-radius: 100%;
    margin:10px 10px 0;
    text-align: center;
    
}
.footerIcons {margin-bottom: 7px;
   
    list-style: none;
    display: flex;
    width: 100%;
    justify-content: center
}
.footerimgIcon{
    vertical-align: middle;
}
.vkIcon {
    padding: 5px;
   }
.telIcon {
    padding: 5px;
}
.twIcon {
    padding: 5px;
}
.fbIcon{
    padding: 5px;
}
.footerLink {
    margin: 0 10px;
    text-decoration: none;
color: #372c48;
}
@media (min-width: 768px) {
    .headerWrapper {
        max-width: 960px;
    }
    .headerInput {
        padding-left: 30px;
    }
   
    .headerSearch{
        display: none;
    }
    
    .inputCard {
        background-color: transparent;
        color: #372c48;
        width: 200px;
        height: 30px;
        border: 0px ;
        border-bottom: 1px solid #372c48;
        margin-right: 15px;
        display: block;
        background: url(../images/search.svg) no-repeat center left;

    }
}
@media (min-width: 1024px) {
    .headerWrapper {
        max-width: 1440px;
    }
    
}
/* Vasia */
.menu-icon {
    display: block;
      font-size: 0;
      background: none;
      border: none;
      width: 30px;
      height: 25px;
      position: relative;
    cursor: pointer;
  }
  
  .menu-icon,
  .menu-icon:before,
  .menu-icon:after {
    border-top: 3px solid #000;
    transition: all .3s;
  }
  
  .menu-icon:before,
  .menu-icon:after {
      position: absolute;
      content: "";
      display: block;
      left: 0;
      right: 0;
  }
  
  .menu-icon:before {
      top: 7px;
  }
    .menu-icon:after {
      top: 17px;
  }
  
  .menu-icon.opened {
      border-top-color: transparent;
  }
  
  .menu-icon.opened:after {
      transform: rotate(45deg);
      top: 12px;
  }
  
  .menu-icon.opened:before {
      transform: rotate(-45deg);
      top: 12px;
  }
  /*styles for menu container*/
  
  
  
  .menu-container.closed {
    display: none;
}
.menu-container.opened {
    display: block;
    position: absolute;
    background-color: white;
    z-index: 9999;
    /* top: 7%; */
    left: 1px;
  }

/* ========= serials Nata Chasovskikh ============ */

.wrapper {
   margin: 20px auto;
   position: relative;
}

.categoriasSerialsPopular,
.categoriasSerialsTopRated,
.categoriasSerialsOnTheAir {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-content: space-around;
}

.pictureSerials1,
.pictureSerials2,
.pictureSerials3,
.pictureSerials4,
.pictureSerials5,
.pictureSerials6,
.pictureSerials7,
.pictureSerials8,
.pictureSerials9,
.pictureSerials10,
.pictureSerials11,
.pictureSerials12 {
   width: 48%;
   height: 50vh;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.726), rgba(128, 128, 128, 0)), url(../images/men.png);
   background-size: cover;
   position: relative;
   margin-bottom: 10px;
}

.pictureSerials3,
.pictureSerials4,
.pictureSerials7,
.pictureSerials8,
.pictureSerials11,
.pictureSerials12 {
   display: none;
}

.image {
   width: 100%;
}

.textSerialsPopular,
.textSerialsTopRated,
.textSerialsOnTheAir {
   color: white;
   font-family: Roboto, sans-serif;
   font-weight: 500;
   position: absolute;
   bottom: 26px;
   left: 22px;
   font-size: 20px;
}

.iconBell {
   width: 20px;
   height: 20px;
   position: absolute;
   top: 24px;
   right: 50px;
   fill: white;
}

.iconStar {
   width: 20px;
   height: 20px;
   position: absolute;
   top: 24px;
   right: 20px;
   fill: white;
}

/* #bell {
   width: 20px;
   height: 20px;
}

#star {
   top: 20px;
   right: 60px;
} */

.iconBell:hover {
   fill: orange;
}

.iconStar:hover {
   fill: orange;
}

.headline {
   width: 100%;
   font-family: Roboto-Medium, sans-serif;
   font-size: 20px;
   opacity: 0.7;
   margin: 20px 0;
   font-weight: 700;
}

@media (min-width: 768px) {

   .categoriasSerialsPopular,
   .categoriasSerialsTopRated,
   .categoriasSerialsOnTheAir {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: space-around;
   }

   .pictureSerials3,
   .pictureSerials4,
   .pictureSerials7,
   .pictureSerials8,
   .pictureSerials11,
   .pictureSerials12 {
      display: block;
   }
}

.headline {
   width: 100%;
   font-size: 24px;
}


@media (min-width: 1024px) {
    .wrapper{ 
        max-width: 1200px;
    }

   .headline {
      font-size: 30px;
   }

   .textSerialsPopular,
   .textSerialsTopRated,
   .textSerialsOnTheAir {
      font-size: 27px;
   }

   .pictureSerials1,
   .pictureSerials2,
   .pictureSerials3,
   .pictureSerials4,
   .pictureSerials5,
   .pictureSerials6,
   .pictureSerials7,
   .pictureSerials8,
   .pictureSerials9,
   .pictureSerials10,
   .pictureSerials11,
   .pictureSerials12 {
      width: 24%;
   }
}

/* Modal Juli */
 /* Juli section */
 .modal_container_wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 5555;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.32);
   }
   
   .modal_container_bg {
       max-width: 300px;
       width: 275px;
       height: 335px;
       position: relative;
       padding: 22px;
       box-sizing: border-box;
       background-color: #fff;
       border-radius: 2px;
       margin-top: 70px;
       z-index: 2;
       box-sizing: border-box;
   }
   
   .form__title {
       font-family: 'Avenir-Medium', sans-serif;
       font-size: 18px;
       font-weight: 500;
       font-style: normal;
       font-stretch: normal;
       line-height: normal;
       letter-spacing: normal;
       text-align: left;
       color: rgba(0, 0, 0, 0.87);
       margin-bottom: 53px;
   }
   .form__field,
   .form__button_submit {
       border: none;
       background-color: transparent;
       outline: none;
   }
   .form__span {
       width: 100%;
       display: block;
       position: relative;
       text-align: left;
       margin-bottom: 29px;
   }
   .form__span--bottom {
       margin-bottom: 49px;
   }
   .form__field {
       width: 100%;
       height: 29px;
       color: black;
       font-size: 1em;
       padding-left: 11px;
       /* -webkit-text-fill-color: #fff!important; */
   
   }
   
   input:-webkit-autofill,
   input:-webkit-autofill:hover, 
   input:-webkit-autofill:focus, 
   input:-webkit-autofill:active  {
       -webkit-box-shadow: 0 0 0 30px white inset !important;
   }
   
   .form__inner {
       position: absolute;
       width: 100%;
       height: 29px;
       top: 0;
       left: 0;
       font-size: 1rem;
       color: rgb(0, 0, 0);
       border-bottom: 1px solid rgba(0, 0, 0, 0.36);
       cursor: text;
   } 
   .form__inner:after {
       width: 0%;
       height: 1px;
       content: '';
       display: block;
       position: absolute;
       background-color: #77c1bb;
       left: 0;
       bottom: -1px;
       transform: translate3d(0, 0, 0);
       transition: width ease-out .4s;
   }
   .form__field:invalid {
       color: rgb(250, 109, 109)
   }
   .form__field:focus + .form__inner:after,
   .form__field.active + .form__inner:after {
       width: 100%;
   }
   .form__content_label {
       font-family: 'Avenir-Roman', sans-serif;
       position: absolute;
       top: 4px;
       left: 11px;
       font-size: 14px;
       transform-origin: 0 50%;
       transition: all ease-out .2s;
       color: rgba(0, 0, 0, 0.37);
   } 
   .form__field:focus+.form__inner .form__content_label,
   .form__field.active+.form__inner .form__content_label {
       color: rgba(0, 0, 0, 0.37);
       transform: scale(0.8, 0.8) translateY(-120%);
       transition: 0.5s all ease;
   }
   .form__button_submit {
       width: 100%;
       font-size: 16px;
       text-align: right;
       text-transform: uppercase;
       color: #77c1bb;
       
   }
   
   .form__button_submit--bottom {
       flex: 1;
   }
   .form__button_submit:hover {
       color: lighten(#77c1bb, 10%);
   }
   
   .close_modal_icon {
       position: absolute;
       right: 0px;
       top: 0px;
       width: 36px;
       height: 36px;
       opacity: 0.3;
       }
   .close_modal_icon:hover {
   opacity: 1;
   }
   .close_modal_icon:before, .close_modal_icon:after {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;             
   margin: auto;
   content: ' ';
   height: 12px;
   width: 2px;
   background-color: #333;
   }
   .close_modal_icon:before {
   transform: rotate(45deg);
   }
   .close_modal_icon:after {
   transform: rotate(-45deg);
   }
   
   .modal_container_wrapper.close_modal {
       display: none;
   }
   
   .thanks_message_modal {
       display: none;
   }
   
   .thanks_message_modal.active {
       display: flex;
       flex-direction: column;
       height: 100%;
   }
   
   .form__content.hide {
       display: none;
   }
   
   .thanks_message_modal_content {
       font-family: 'Avenir-Roman', sans-serif;
       font-size: 14px;
       color: rgba(0, 0, 0, 0.65);
       line-height: 1.4;
       flex: 6;
   }
   
   .thanks_message_modal_title {
       font-family: 'Avenir-Medium', sans-serif;
       font-size: 18px;
       font-weight: 500;
       font-style: normal;
       font-stretch: normal;
       line-height: normal;
       letter-spacing: normal;
       text-align: left;
       color: rgba(0, 0, 0, 0.87);
   }