$breakpoint-tablet: 1024px;
$breakpoint-tabletportrait: 768px;



.animatedfs_menu_list{
  margin: 0 auto;
  height: 100%;
  padding: 100px 0;
  @media (max-width: $breakpoint-tabletportrait) {
    padding: 30px 0;
  }
  .afsmenu{
    list-style: none;
    >li{
      position: relative;
      a{
        font-size: 42px;
        font-weight: 400;
        &:focus{
          outline: none !important;
        }
       
      }
      &.current-lang{
        a{
          color:white !important;

        }
        &:after{
          position: absolute;
          display: block;
          content: '';
          border: 1px solid #fff;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          top: 50%;
          left: 0;
          right: 0;
          margin: 0 auto;
          transform: translateY(-49%);
        }
      }

    }
  }
  .afsmenu >li>.sub-menu{
    list-style: none;
    opacity: 0;
    transition: all 1s;
    position: relative;
    display:none;
    li{
      line-height: 30px;
      a{
        font-size:24px;
        &:hover, &:focus{
          text-decoration: underline;
        }
      }
    }
  }

  .privacy_policy{
    width: 100%;
    padding-left: 1rem;
    bottom: 10px;
    position: absolute;
    letter-spacing: 0.8px;
    font-size: 11px;
    @media (max-width: $breakpoint-tabletportrait) {
      padding: 0 43px;
      position: relative;
    }
    a{
      color: #8e8e8e !important;
      &:hover{
          text-decoration: underline !important;
      }
    }
  }
}


.afsmenu__close{
  position: absolute;
  left: -40px;
  font-size: 32px;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  line-height: normal;
}

.animatedfsmenu{
    display: flex;
    position: fixed;
    z-index: 9999999;
    width: 0;
    top:0;
    left:0;
    height: 100vh;
    transition: all ease-out .7s;
    background-size: 100% auto;
    background-attachment: fixed;
    ul{
      list-style:  none !important;
    }
    @media (max-width: $breakpoint-tablet){
      background-size: auto 100%;
    }
    &__mobile{
      @media (min-width: $breakpoint-tablet){
        display: none;
      }
    }
    &__right{
      left:unset;
      right:0;
    }
    button:focus{
      outline: none;
    }

    .navbar{
      position:absolute !important;
    }
    .navbar-collapse{
      flex-direction: column !important;
    }
 +
    &.navbar{
      transition: all ease-out .7s;
      @media (max-width: $breakpoint-tablet) {
        position: fixed !important;
      }
    }
 
    &.navbar-expand-md{
      width: 100%;
      max-width: 100%;
      button{
        background: transparent !important;
      }
    }
    &__top {
      width:100vw;
      height:0;
      &.navbar-expand-md{
        height:100vh;
        width:100vw;
      }
    }
    &__left {
      width:0;
      height:100vh;
      &.navbar-expand-md{
        height:100vh;
        width:100vw;
      }
    }
    &__right {
      .navbar-toggler{
        right:0;
      }
      width:0;
      height:100vh;
      left: unset;
      right: 0;
      &.navbar-expand-md{
        height:100vh;
        width:100vw;
      }
    }
    .social-media{
      width: 100%;
      display: block;
      margin: 10px 0 30px;
      @media ( max-width: $breakpoint-tablet ){
        margin-left: 20px;
        margin:0;
      }
      ul{
        margin:0;
      }
      li{
    
        margin: 0 16px 0 0;
        position: relative;
        text-align: center;
        display: inline-block;
        border: 2px solid #fff;
        border-radius: 50%;
        @media ( max-width: $breakpoint-tablet ){
          border-width: 1px;
        }
        a{
          padding: 4px;
          width: 45px;
          height: 45px;
          display: block;
          @media( max-width: $breakpoint-tablet ){
            width: 32px;
            height: 32px;
            font-size: 14px;
          }
        }
      }
    }
    &_woocommerce{
      color:white;
      list-style: none;
      font-size: 13px;
      letter-spacing: 0.7px;
      position: absolute;
      bottom: 40px;
      @media (max-width: $breakpoint-tabletportrait) {
        font-size:12px;
        position: relative;
        bottom:unset;
      }
        li{
        float:left;
        margin:0 8px;
        @media (max-width: $breakpoint-tabletportrait) {
          margin: 0 3px;
        }
        i{
          margin-right:6px;
        }
      }
    }
  

  .navbar-collapse{
      opacity: 0;
      display:none;
  }
  &.navbar-expand-md{
    
    .navbar-collapse{
      display: flex !important;
      opacity: 1 !important;
      transition: opacity ease-in-out 1s;
      transition-delay: 0.5s;
      pointer-events: all;
      position: relative;
      @media (max-width: $breakpoint-tabletportrait) {
        margin-top: 50px;
      }
    }

  }

  .navbar
  {
      z-index: 99;

      &__languages{
        list-style: none;
        position: relative;
        float: left;
        display: block;
        margin: 0;
        li{
          float: left;
          font-size: 15px;
          border-right: 2px solid #ffffff8c;
          margin-right: 10px;
          padding-right: 10px;
          line-height: 16px;
        }
        
        a{
          text-transform: uppercase;
        }
        @media (max-width: $breakpoint-tablet) {
          position: relative;
          left: 24px;
        }
      }
  }


  .navbar-toggler{
      display:block;
      position: fixed;
      z-index: 99999999999999;
      border-radius: 0;
      width: 100px;
      height: 100px;
      transition: all 600ms;
      width: 70px;
      padding: 0;
      height: 70px;
      @media (max-width: $breakpoint-tablet) {
        width: 55px;
        height: 55px;

      }

  }

  .navbar-toggler-icon{
    background:url(../img/svg/menu.svg);
    background-size:100% 100%;
  }
  .animatedfs_menu_list{
        max-width: 100%;
        display: inline-block;
        pointer-events: none;
        width:600px;

      .afsmenu>li {
          color:white;
          width: 100%;
          font-size: 55px;
          line-height: 62px;
          position: relative;
          cursor: pointer;
          @media (max-width: $breakpoint-tabletportrait) {
            font-size: 35px;
            line-height: 45px;
            padding: 0 20px;
            a{
              font-size:23px !important;

            }
          }
          a{
            transition: 600ms all;
            position: relative;

          }
       
          &.has-children__on a{
         
            &:focus{
              text-decoration: none ;
            }
            &:hover{
              text-decoration: underline;
            }
          }
          &.has-children__on{
            >.sub-menu{
              opacity: 1;
              display:block;  
              animation: afsmenu_fade 2s;  
            }
          }
      }
  
  }
  &.animation_line .afsmenu>li{
    & >a:before{
      width: 0;
      transition: 600ms all;
      content: '';
      position: absolute;
      height: 3px;
      background:white;
      top:50%;
      transform:translateY(-50%);
      left:0;
    }
    &:hover, &.has-children__on{
        >a{
        padding-left:70px;
        

          &:before{
            width: 50px;
          } 
      }
    }
  }
  &.animation_background .afsmenu>li{
    & >a:before{
      width: 0;
      transition: 600ms all;
      content: '';
      position: absolute;
      height: 100%;
      top:50%;
      transform:translateY(-50%);
      z-index: -1;
    }
    &:hover, &.has-children__on{
        >a{        

          &:before{
            left:-8px;
            width: calc( 100% + 18px );
          } 
      }
    }
  }
  @keyframes afsmenu_fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

  .navbar-toggler{
    .bar {
      position: relative;
      content: '';
      width: 45px;
      height: 3px;
      background: white;
      transition: .5s;
      display: block;
      top:0;
      margin: 8px auto;
      transition: all ease-in-out .5s;
      &.top-animate{
        transform: rotate(45deg);
        transition: all ease-in-out .5s;
        top: 8px;
      }
      &.bottom-animate{
        transform: rotate(135deg);
        transition: all ease-in-out .5s;
        top: -4px;
        @media (max-width: $breakpoint-tabletportrait) {
          top: -1px;
        }
      }
      &.mid-animate{
        transition: all ease-in-out .5s;
        opacity: 0;
      }
      @media (max-width: $breakpoint-tabletportrait) {
        margin: 5px auto;
        width: 35px;

      }
    }
  }

  &__lateralmenu{
    transition: none;
    .animatedfs_menu_list{
      pointer-events: all;
    }
    @media (min-width: $breakpoint-tablet) {
      width:220px;
      .navbar-toggler{
        display:none !important;
      }
      .animatedfs_menu_list{
        width: 100%;
        display: inline-block;
        position: relative;
        opacity: 1;
        .afsmenu{
          li{
            line-height: 32px;
            a{
              font-size: 20px;
              display: block;
            }
          }
          .sub-menu li a{
            font-size:14px !important;
          }
        }
      }

    }
    .afsmenu__close{
      left: -20px;
      font-size: 25px;
      height: 40px;
    }
  }

}

.afsmenu__lockscroll{
  overflow-y: hidden;
}

.afsmenu_scroll{
     max-height: 80vh; 
     overflow-y: auto; 
     @media (max-width: $breakpoint-tablet) {
       max-height: 65vh;
     }
     &::-webkit-scrollbar-track
     {
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
       background-color: transparent;
     }
     
     &::-webkit-scrollbar
     {
       width: 6px;
       background-color: transparent;
     }
     
     &::-webkit-scrollbar-thumb
     {
       background-color: rgba(0,0,0,0.6);
     }
     
}

.afsmenu_search{
  display: inline-block;
  position: absolute;
  height: 60px;
  float: left;
  padding: 0;
  position: relative;
  margin-bottom: 30px;
  @media (max-width: $breakpoint-tablet){
    margin: 0 30px 20px;
    width: auto;
  }
  @media(min-width: $breakpoint-tablet){
    margin-left: 12px;
  }
  input[type="text"] {
    height: 60px;
    font-size: 35px;
    display: inline-block;
    font-weight: 100;
    border: none;
    outline: none;
    color: #555;
    padding: 3px;
    padding-right: 60px;
    width: 0px;
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    z-index: 3;
    transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
    cursor: pointer;
    @media (max-width: $breakpoint-tablet){
      font-size: 22px;
    }
  }

  input[type="text"]:focus:hover {
    border-bottom: 1px solid #BBB;
  }

  input[type="text"]:focus {
    width: 100%;
    z-index: 1;
    border-bottom: 1px solid #BBB;
    cursor: text;
    margin-left: 50px;
    height: 46px;
  }
  .search_submit {
    height: 47px;
    width: 38px;
    display: inline-block;
    float: right;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    opacity: .4;
    cursor: pointer;
    transition: opacity .4s ease;
    font-size: 29px;
    color: white;
    @media (max-width: $breakpoint-tablet){
      left: 10px;
    }
  }

  input[type="submit"]:hover {
    opacity: 0.8;
  }

}