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


.animatedfs_background{
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  opacity: 0;
  pointer-events: none;
  transition: 500ms all;
  background-size: cover;
}

.animatedfs_menu_list{
  margin: 0 auto;
  height: 100%;
  padding: 100px 0;
  @media (max-width: $breakpoint-tabletportrait) {
    padding: 30px 0;
  }
  .afsmenu{
    a{
      text-decoration: none;
    }
    list-style: none;
    margin:0;
    >li{
      position: relative;
      a{
        font-size: 42px;
        line-height: initial;
        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 .6s;
    background-size: cover;
    background-attachment: fixed;
    &_openlevels .sub-menu{
      opacity: 1 !important;
      display: block  !important;
    }
    &-html-area{
      margin: 32px 0;
    }
    &.align_left{
      text-align: left;
    }
    &.align_center{
      text-align: center;
    }
    &.align_right{
      text-align: right;
    }
    ul{
      list-style:  none !important;
    }
    @media (max-width: $breakpoint-tablet){
      background-size: cover;
    }
    &__mobile{
      @media (min-width: $breakpoint-tablet){
        display: none !important;
      }
    }
    &__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%;
      .animatedfs_background{
        opacity: 1;
      }

    }
    &__top {
      width:100%;
      height:0;
      &.navbar-expand-md{
        height:100vh;
        width:100%;
      }
    }
    &__left {
      width:0;
      height:100vh;
      &.navbar-expand-md{
        height:100vh;
        width:100%;
      }
    }
    &__right {
      
      width:0;
      height:100vh;
      left: unset;
      right: 0;
      &.navbar-expand-md{
        height:100vh;
        width:100vw;
      }
    }
    &__opacity {
     
      left: 0;
      right: 0;
      background-color: transparent !important;
	  transition: background-color ease-out .6s, opacity ease-out .6s;
	  &:not(.navbar-expand-md){
		>div{
			pointer-events: none;
		}
	  }
      &.animatedfsmenu__sidemenu{
        width:440px !important;
      }
      .animatedfs_menu_list{
        opacity: 0;
      }
      &.navbar-expand-md{
        height:100vh;
        width:100vw;
        opacity: 1;
      }
    }
    .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%;
        transition: all 200ms;
        top: 0;
        @media ( max-width: $breakpoint-tablet ){
          border-width: 1px;
        }
        &:hover{
          top:-2px;
        }
        a{
          padding: 4px;
          display: block;
          width: 40px;
          height: 40px;
          font-size: 22px;
          line-height: initial;
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          @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;
        }
      }
  }


  .animatedfsmenu-navbar-toggler{
	position: fixed;
	
  }

  .animatedfs_menu_list{
        max-width: 100%;
        display: inline-block;
        pointer-events: none;
        min-width:600px;

      .afsmenu li {
          margin: 0;
          color:white;
          width: 100%;
          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: 300ms all;
            position: relative;

          }
       
          &.has-children__on a{
         
            &:focus{
              text-decoration: none ;
            }
            &:hover{
              text-decoration: underline;
            }
          }
          &.afs-menu-item-has-children{
            >ul{
              margin: 14px 30px;
              a{
                font-size: 20px;
              }
            }
            .afs-menu-item-has-children{
              a{
                
              }
            }
          }
          &.has-children__on{
        
            >.sub-menu{
              opacity: 1;
              display:block;  
              animation: afsmenu_fade 2s;  
            }
         
          }
      }
  
  }
  &.animation_line .afsmenu >li{
    & >a:before{
      width: 0;
      transition: 300ms 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: 300ms 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 );
          } 
      }
    }
  }
  &.animation_background__border_radius .afsmenu >li{
    & >a:before{
      width: 0;
      transition: 300ms all;
      content: '';
      position: absolute;
      height: 100%;
      top:50%;
      transform:translateY(-50%);
      z-index: -1;
      border-radius: 80px;
    }

    &:hover, &.has-children__on{
      >a{        

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

    100% {
        opacity: 1;
    }
}


  &__lateralmenu{
    transition: none;
    .animatedfs_menu_list{
      pointer-events: all;
    }
    @media (min-width: $breakpoint-tablet) {
      width:220px;
      .animatedfsmenu-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;
    }
  }
  &__sidemenu.navbar-expand-md{
    width:440px;
    @media (max-width: $breakpoint-tablet){
      width: 300px;
      
    }
    .animatedfs_menu_list{
      padding-left:20px;
    }
  }
}

.afsmenu__lockscroll{
 
  width: 100%;
}

.afsmenu_scroll{
     max-height: 80vh; 
     min-height: 75vh;
     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;
    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;
  }

}
.afs-owl-cart{
  opacity:0;
  transition: 500ms all;
  &.owl-loaded{
    opacity:1;
  }
}

.afs-cart-title{
  font-size: 22px;
  margin-top: 70px;
}

.afs_item-container{
  background: #00000085;
  padding: 10px;
  .afs_item__img{
    width: 100%;
    min-height: 70px;
    background-size: cover;
    background-position: center;
  }
  .afs_item__title{
    font-size: 17px;
    margin-bottom: 2px;
  }
  .afs_item__qtt, .afs_item__total{
    font-size:14px;
    margin:0;
  }
}


.animatedfsmenu-navbar-toggler{
	display:block;
	position: relative;
	border-radius: 0;
	transition: all 300ms;
	width: 70px;
	padding: 0;
	border: 0 !important;
	&:not(.custom-burger){
	  height: 70px;

	  @media (max-width: $breakpoint-tablet) {
		width: 55px;
		height: 55px;
	  }
	}
	&.right_top{
	  right:0;
	  top:0;
	}
	&.left_top{
	  left:0;
	  top:0;
	}
	&.center_top{
	  left: 0;
	  right: 0;
	  top: 0;
	  margin: 0 auto;
	}
	&.right_bottom{
	  right:0;
	  bottom:0;
	}
	&.left_bottom{
	  left:0;
	  bottom:0;
	}
	&.center_bottom{
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: 0 auto;
	}


}

.navbar-toggler-icon{
  background:url(../img/svg/menu.svg);
  background-size:100% 100%;
}

.animatedfsmenu-navbar-toggler{
	cursor: pointer;
	//override all the website elements
	z-index: 9999999999;
    .bar {
      position: relative;
      content: '';
      width: 45px;
      height: 3px;
      background: white;
      transition: .6s;
      display: block;
      top:0;
      margin: 8px auto;
      transition: all ease-in-out .6s;
	  border-radius: 8px;
      &.top-animate{
        transform: rotate(45deg);
        transition: all ease-in-out .6s;
        top: 8px;
      }
      &.bottom-animate{
        transform: rotate(135deg);
        transition: all ease-in-out .6s;
        top: -4px;
        @media (max-width: $breakpoint-tabletportrait) {
          top: -1px;
        }
      }
      &.mid-animate{
        transition: all ease-in-out .6s;
        opacity: 0;
      }
      @media (max-width: $breakpoint-tabletportrait) {
        margin: 5px auto;
        width: 35px;

      }
    }
  }