.heading-content{
  text-align: left;
}
.img-ultra{
  width:100%;
}
.ultra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 0;
}
@font-face {
  font-family: SofiaPro;
  src: url(//feerielingerie.com/cdn/shop/t/13/assets/SofiaProExtraLight.ttf?v=18248315251251676461791982618);
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: SofiaPro;
  src: url(//feerielingerie.com/cdn/shop/t/13/assets/SofiaProSemiBold.ttf?v=3607329526962797121791982618);
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: SofiaPro;
  src: url(//feerielingerie.com/cdn/shop/t/13/assets/SofiaProUltraLight.ttf?v=53422560462937336371791982618);
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: SofiaPro;
  src: url(//feerielingerie.com/cdn/shop/t/13/assets/SofiaProBold.woff?v=52735684045191623501791982618);
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: SofiaPro;
  src: url(//feerielingerie.com/cdn/shop/t/13/assets/SofiaProLight.woff?v=84487212723410058341791982618);
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: SofiaPro;
  src: url(//feerielingerie.com/cdn/shop/t/13/assets/SofiaProMedium.woff?v=173964873027194094731791982618);
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: SofiaPro;
  src: url(//feerielingerie.com/cdn/shop/t/13/assets/SofiaProRegular.woff?v=176855652778136888651791982618);
  font-weight: 400;
  font-style: normal;
}
/* ========================================
CUSTOM GOOGLE FONTS
======================================== */





$font-primary: Nunito;
$font-primary2: Nunito;
$font-primary3: Lato;



/* ========================================
CUSTOM COLORS
======================================== */
$color-main: #000000;
$color-main2:#e7af00;
$color-main3:#e7af00;
/*======================================== */
.engoc-flex-wrap{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.video-wrapper { 
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: auto;
  @media(max-width : 576px){
    height : 520px;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom : 0;
    right : 0;
    width: 100%;
    height: 100%;
  }
}
.col-centered {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.engoc-row-equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}
/* Review title */
.engoc-review-app {
  h1, h2, h3, h4, h5, h6, label {
    font-weight: normal !important;
  } 
}
/* Quantity product detail */
.qtyminus, .qtyplus { 
  i {
    font-size: 13px;
  }
}
.js-qty input, .ajaxcart__qty input {
  text-align: left;
  padding: 9px 30px 9px 15px;
}
.js-qty, .ajaxcart__qty {
  display: inline-block;
}
/* Rating star */
.spr-icon.spr-icon-star-empty {
  opacity: 1 !important
}
.spr-badge .spr-icon, .spr-badge .spr-icon-star {
  margin-right: 1.6px;
}
/*Button Add to Wishlist*/
.maxus-product__item--list .maxus-product__content form.contact-form {
  display: inline-block;
  button {
    color: #bbb;
    background: transparent;
    border: none;
    font-size: 14px;
    padding: 0;

    &:hover {
      color: #000000;
    }
  }
}
.maxus-product__item .maxus-product__wrap form.contact-form {
  display: inline-block;
  button {
    color: white;
    background: transparent;
    border: none;
    font-size: 20px;
    padding: 0;
    &:hover {
      color: #000000;
    }
  }
}
/*Button Remove Page Wishlist*/
.engoc-remove-item-wishlist {
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 0;
  &:hover, &:focus,
  &:active:hover,
  &:active:focus {
    color: #000000;
    background-color: transparent;
    border-color: transparent;
  }
}
/*Button Add to Cart Page Wishlist*/
.engoc-addcart-item-wishlist {
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 0;
  &:hover {
    color: #000000;
    background-color: transparent;
    border-color: transparent;
  }
}
/**/
.pagination > span {
  min-width: 50px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  float: none;
  display: inline-block;
  position: relative;
  padding: 12px 12px;
  line-height: 1.5;
  text-decoration: none;
  margin-left: -1px;
  &.current {
    color: #000000;
    margin: 0 10px;
    border-radius: 50%;
    box-shadow: 10px 17px 40px 0px rgba(168, 172, 185, 0.62);
  }

  &.next {
    border-left: 1px solid #e1e1e1 !important;
    right: -350px;
    height: 90px;
    line-height: 90px;
    display: none !important;
    @media (min-width: 1200px) {
      display: block !important;
    }
    z-index: 9;
    padding: 0 1px;
    min-width: 200px;
    top: 0;
    bottom: 0;
    position: absolute;
    font-size: 10px;
  }
  &.prev {
    border-right: 1px solid #e1e1e1 !important;
    left: -350px;
    height: 90px;
    line-height: 90px;
    display: none !important;
    @media (min-width: 1200px) {
      display: block !important;
    }
    z-index: 9;
    padding: 0 1px;
    min-width: 200px;
    top: 0;
    bottom: 0;
    position: absolute;
    font-size: 10px;
  }
  a {
    color: #959595;
    &:hover, &:focus {
      color: #000000;
    }
  }
}
/* ========================================
10. Swatch
======================================== */
/* 
Swatches Styles
*/


.swatch { 
  margin-bottom: 5px;
  width: 100%;
  align-items: center;
}
.maxus-productdetail__options{
  &:first-child{
    margin-bottom: 40px;
  }
}
/* Hide radio buttons.*/
.swatch input { 
  display:none;
}
.swatch label {
  /* Rounded corners */
  /*   -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%; */
  /* To give width and height */
  float:left;
  /* Color swatches contain no text so they need to have a width. */
  min-width:30px !important; 
  height:30px !important;
  /* No extra spacing between them */
  margin:0;
  /* The border when the button is not selected */
  /* Background color */
  /* Styling text */
  font-size:13px;
  text-align:center;
  line-height:30px;
  white-space:nowrap;
  text-transform:uppercase;
}
.swatch-element label { padding:0 10px; }
.color.swatch-element label { padding:0; }
.swatch input:checked + label {
  background: $color-main;
  border-color:transparent;
} 
.swatch .swatch-element {
  float:left;
  -webkit-transform:translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing:antialiased; /* webkit text rendering fix */
  /* Spacing between buttons */
  margin: 0px 5px 5px 0;
  /* To position the sold out graphic and tooltip */
  position:relative;
}
/* Image with the cross in it */
.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
.swatch .swatch-element .crossed-out { display:none; }
.swatch .swatch-element.soldout .crossed-out { display:block; }
.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60); /* internet explorer */
  -khtml-opacity: 0.6;      /* khtml, old safari */
  -moz-opacity: 0.6;       /* mozilla, netscape */
  opacity: 0.6;           /* fx, safari, opera */
}
/* Tooltips */
.swatch .tooltip {
  text-align:center;
  background:black;
  color:#fff;
  bottom:100%;
  padding: 10px;
  display:block;
  position:absolute;
  width:100px;
  left:-33px;
  margin-bottom:15px;
  /* Make it invisible by default */
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;
  /* Animations */
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
}
.swatch .tooltip:before {
  bottom:-20px;
  content:" ";
  display:block;
  height:20px;
  left:0;
  position:absolute;
  width:100%;
}
/* CSS triangle */
.swatch .tooltip:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid black 10px;
  bottom:-10px;
  content:" ";
  height:0;
  left:50%;
  margin-left:-13px;
  position:absolute;
  width:0;
}
.swatch .swatch-element:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  -webkit-transform:translateY(0px);
  -moz-transform:translateY(0px);
  -ms-transform:translateY(0px);
  -o-transform:translateY(0px);
  transform:translateY(0px);
}
.swatch.error {
  background-color:#E8D2D2!important;
  color:#333!important;
  padding:1em;
  border-radius:5px;
}
.swatch.error p {
  margin:0.7em 0;
}
.swatch.error p:first-child {
  margin-top:0;
}
.swatch.error p:last-child {
  margin-bottom:0;
}
.swatch.error code {
  font-family:monospace;
}
/* ========================================
11. Widgets Filter by Price, Size, Color
======================================== */
.engoc_sw_filter_tag {
  .filter-tag {
    ul { 
      li {
        input[type="checkbox"] {
          opacity:0;
          position: absolute;
          z-index: -1;
        }
        a.active {
          color: #e0545f;
          display: block;
          position: relative;
        }
      }
    }
  }
}
/* ========================================
12. Popup Quickview
======================================== */
.tshopify-popup{
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  position: fixed;
  z-index: 999999;
  top: 0;
  height: 0;
  width: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  &.wishlist-popup{
    .btn-cart{
      display: none;}
  }
  &.loading{
    z-index:999;
  }
  .overlay-quickview{
    background: rgba(29, 29, 31, 0.6);
    color: rgba(0, 0, 0, .4);
    position: fixed;
    top: 0!important;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 0;
    height: 0;
  }

  .content{
    max-width: 800px;
    padding: 20px;
    margin: 0 auto;
    text-align: left;
    position: relative;
    background: #fff;
    min-width: 490px;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  @media (max-width: 1500px){
    .content{
      max-width: 700px;
    }
  }
  @media (max-width: 1300px){
    .content{
      max-width: 650px;

    }
  }
  &.active{
    visibility: visible;
    opacity: 1;
    top: 0;
    height: auto;
    width: auto;
    background : rgba($color-main,.5);
    transition : .3s;
    .content{
      max-height: 100%;
    }
    .overlay-quickview{
      width: 100%;
      height: 100%;
    }
  }
  .close-window{
    position: absolute;
    right: -30px;
    top: 0;
    color: #ffffff;
    width: 24px;
    height: 24px;
    text-align: center;
    i{
      line-height: 24px;}
    &:hover{
      color: $color-main2;
    }
  }
  .success-message{
    &:hover{
      &:before{
        background: #ffb533;
        color: #fff;
      }
    }
    &:before{
      font-family: FontAwesome;
      content: "\f00c";
      display: inline-block;
      margin-right: 10px;
      font-size: 12px;
    }
  }

  &.loading{
    .loader{
      left: 50%;
      position: fixed;
      top: 50%;
      -moz-transform: translateY(-50%) translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
      -o-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
    }
  }
  .product-name{
    font-size: 25px;
    line-height: 20px;
    text-transform: capitalize;
    font-weight: 400;
  }
  .prices span.price {
    color: #e95252;
    font-size: 16px;
    font-weight: 400;
  }
  .total-price {
    margin-top: 15px;
    margin-bottom: 15px;

    span.sub_total_price {
      color: #e95252;
      font-size: 16px;
      font-weight: 400;
    }
  }
  .uno_product__description {
    padding-top: 14px;
    padding-bottom: 14px;
    p {
      color: #979797;
      font-size: 12px;
      line-height: 25px;
    }
  }
  .engoc_hide_owl_control .owl-controls {display: none !important;}
}
/* ========================================
13. Popup Ajax AddtoCart
======================================== */
.engo-popup{
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  top: 0;
  height: 0;
  width: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  overflow: hidden;

  visibility: hidden;
  opacity: 0;  

  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  &.wishlist-popup{
    .btn-cart{
      display: none;}
  }
  &.loading{
    z-index:999;
  }
  .overlay-addcart{
    background: rgba(29, 29, 31, 0.6);
    color: rgba(0, 0, 0, .4);
    position: fixed;
    top: 0!important;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 0;
    height: 0;
  }

  .content{
    max-width: 800px;
    padding: 20px;
    margin: 0 auto;
    text-align: left;
    position: relative;
    background: #fff;
    min-width: 490px;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;

  }
  @media (max-width: 1500px){
    .content{
      max-width: 700px;
    }
  }
  @media (max-width: 1300px){
    .content{
      max-width: 650px;
    }
  }
  &.active{
    visibility: visible;
    opacity: 1; 
    top: 0;
    height: auto;
    width: auto; 
    .content{
      max-height: 100%;
    }
    .overlay-addcart{
      width: 100%;
      height: 100%;
    }
  }
  .close-window{
    position: absolute;
    right: -30px;
    top: 0;
    color: #ffffff;
    width: 24px;
    height: 24px;
    text-align: center;
    i{
      line-height: 24px;}
    &:hover{
      color: $color-main2;
    }
  }
  .success-message{
    color: #ff4949;
    font-size: 13px;
    line-height: 25px;

    &:before{
      font-family: FontAwesome;
      content: "\f00c";
      display: inline-block;
      margin-right: 10px;
      font-size: 12px;
    }
  }
  &.loading{
    .loader{
      left: 50%;
      position: fixed;
      top: 50%;
      -moz-transform: translateY(-50%) translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
      -o-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
    }
  }
  .product-name{
    padding-bottom: 10px;
    font-size: 20px;
    line-height: 20px;
    text-transform: capitalize;
    font-weight: 400;
  }

  .actions {display: inline-block;}

}
.cart-popup{
  .btn-wishlist{
    display: none;}
}
.f-left {
  float: left;
}
.mt-24 {
  margin-top: 24px;
}
.mr-10 {
  margin-right: 10px;
}
/*Hidden Ajax Popup AddtoCart Mobile*/
@media screen and (max-width: 767px) {
  .engoc_hide_mobile {
    display: none !important;
  }
}
/* ========================================
14. Product search - Auto complate
======================================== */
/* ========================================
15. SVG Sold out
======================================== */
.crossed-out {
  position: absolute;
  width: 25px;
  height: 25px;
  left: 0;
  top: 0;
  svg {
    max-width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    margin: 50%;
  }
  &:hover {
    cursor: default;
  }
}
/* ========================================
16. SVG Image product placeholder
======================================== */
.placeholder-svg {
  display: block;
  fill: rgba(120, 129, 136, 0.35);
  background-color: rgba(120, 129, 136, 0.1);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(120, 129, 136, 0.2);
}
.maxus-product__item .maxus-product__image .placeholder-svg {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.engoc-z-index-10003 {
  z-index: 10003;
}
.btn.focus, .btn:focus {
  outline: 0;
  box-shadow: none;
}
a{
  color: $color-main;
  &:hover{
    color: $color-main2;
  }
}
.product-grid-view {
  margin-bottom: 15px;
}
.engoc-collection-image {
  margin-bottom: 10px;
}
.engoc-collection-des {
  margin-bottom: 20px;
}
/* ========================================
DUONG
======================================== */
body {
  font-family: $font-primary;
  font-weight: 400;
  
}
a:hover, a:focus {
  color: $color-main2;
}
.logosvg{
  svg{
    width:100%;
    height: auto;
  }
}
.container-v1{
  max-width: 1670px;
}
.container-full{
  max-width: 100%;
}
.container-testimonial{
  max-width: 900px;
}
.container-v2{
  max-width: 1440px;
}
.aboutus-pages{
  padding-top: 66px;
  padding-bottom: 90px;

  .about-servicebox{
    padding-top:130px;
    padding-bottom:130px;
    background-size: cover;
    background-position: center;
    .title-servicebox{
      font-size: 40px;
      color: #ffffff;
      text-align: center;
      font-family: $font-primary;
      font-weight: 600;
      font-style: normal;
      position: relative;
      padding-bottom: 40px;
      margin-bottom: 55px;
      text-transform: unset;
      &:before{
        content:"";
        height: 2px;
        width: 55px;
        background: $color-main2;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .itemtservice{
      .box-service{
        width: 80%;
        margin: 0 auto;      
        text-align: center;
        .icon{
          font-size: 60px;
          margin-bottom: 10px;
          color: #fff;
          transition: 0.8s;
          display: block;
          &:hover{
            transform: translateY(-10px);
          }
        }
        .title{
          font-size: 22px;
          font-weight: 600;
          color: #fff;
        }
        .content{
          font-size: 16px;
          color: #fff;
          line-height: 30px;
        }
      }
    }
  }
  .about-instagram{
    padding-top: 78px;
    .instagram_v2 {
      .text_top{
        .title_insta {
          font-family: $font-primary;
          font-size: 40px;
          color: #333333;
          text-align: center;
          font-weight: 600;
          font-style: normal;       
        }
        .des_insta {
          font-size: 18px;
          color: #666666;
          text-align: center;
          font-weight: 400;
          font-style: normal;
          position: relative;
          padding-bottom: 25px;
          display: inline-block;
          &:before{
            content:"";
            height: 2px;
            width: 55px;
            background: $color-main2;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
      .content {
        width:20%;
        float:left;
        overflow:hidden;
        margin: 15px 7.5px;
        .content_text{
          align-items:center;
          left:0;
          right:0;
          top:0;
          bottom:0;
          background:rgba(0,0,0,.7);
          transition:all .5s ease;
          opacity:0;
          flex-direction:column;
          justify-content : center;
          a {
            font-size:40px;
            color:#fff;
          }
        }
        &:hover .content_text{
          opacity:1;
          transition:all .5s ease;
        }
        img {
          transition:all 4s ease;
          width:100%;
        }
        &:hover img {
          transform:scale(1.2);
        }
      }   
      .button-prev,
      .button-next {
        position: absolute;
        font-size: 26px;
        top: 50%;
        width: 40px;
        height: 40px;
        line-height : 40px;
        border-radius: 50%;
        text-align: center;
        background-color: #ffffff;
        box-shadow: 0 8px 8px rgba(0,0,0,0.09);
        opacity: 0;
        visibility: hidden;
        transition: 0.7s;
        color : $color-main;
        z-index : 1;
        &:hover{
          background-color: $color-main2;
          color : #fff;
        }
      }
      .button-prev {
        left: 20px;
      }
      .button-next {
        right: 20px;
      }
      .galary_inta{
        margin-top:65px;
        &:hover{
          .button-prev, .button-next {
            visibility: visible;
            opacity:1;
            &.slick-disabled{
              pointer-events: none;
              opacity : 0.6;
            }
          }
          .button-prev {
            left: 0px;
          }
          .button-next {
            right: 0px;
          }
        }
      }
    }
  }
  .about-introduce{
    .intro_image{
      padding-bottom: 70px; 
      img{
        transition: .5s;
      }
      &:hover{
        img{
          transform: scale(.95);
          transition: .5s;
          filter: grayscale(100%);
        }
      }
    }
    .intro_detail{
      padding-bottom: 70px; 
      .info-intro{
        .title_intro{
          font-size: 36px;
          color: #333333;
          text-align: left;
          font-family: $font-primary;
          font-weight: 600;
          line-height: 43px;
          font-style: normal;
          position: relative;
          padding-bottom: 25px;
          &:before{
            content:"";
            height: 2px;
            width: 55px;
            background: $color-main2;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
        .des_intro{
          font-size: 15px;
          color: #666666;
          text-align: left;
          font-family: $font-primary;
          font-weight: 400;
          font-style: normal;

        }
        .content_intro{
          margin-top: 35px;
          line-height: 28px;
          font-size: 14px;
          color: #666666;
          text-align: left;
          font-family: $font-primary;
          font-weight: 400;
        }
      }
    }
  }
}
.page_aboutus_v1 {
  .slide {
    background-image: url(https://placehold.it/1920x500);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 135px 0 130px 0;

    span {
      font-size: 16px;
      font-family: $font-primary;
      font-weight: 600;
      display: inline-block;
      position: relative;
      color: #fff;

      &:before {
        border: 1px solid #fff;
        content: "";
        width: 100%;
        position: absolute;
        bottom: -1px;
      }
    }
    h1 {
      font-size: 40px;
      margin-top: 25px;
      font-weight: 400;
      color: #fff;
      text-transform: none;
    }
  }
  .baner {
    padding-top: 100px;

    .box_img {
      overflow: hidden;

      &:hover {
        img {
          transform: scale(1.1);
          filter: grayscale(100%);
        }
      }
      img {
        transition: all 0.5s ease;
      }
    }

    .right_banner {
      padding-left: 0;
      transform: translateX(-20px);

      h3 {
        font-size: 42px;
        color: $color-main;
        font-weight: 400;
        margin-top: -8px;
        position: relative;
        z-index: 2;

        &:before {
          content: "";
          width: 200px;
          border: 3px solid #d63636;
          position: absolute;
          left: -17px;
          top: 31px;
          transform: translate(-52%);
          z-index: -1;
        }
      }
      .content_1 {
        padding: 16px 0 24px 0;
      }

      p {
        font-size: 15px;
        color: $color-main;
        line-height: 28px;
      }

      img {
        padding-top: 40px;
      }
    }
  }
  .tab_page {
    padding-top:90px;
    .title_tab {
      border-bottom: 1px solid #ebebeb;

      ul {
        margin-bottom: 7px !important;

        li {
          margin-right: 20px !important;
          margin-left: 20px;

          &.active {
            a {

              &:before {
                width: 100%;
                opacity: 1;
                visibility: visible;
              }
            }
          }
          a {
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            color: $color-main;
            margin: 0 3px;
            position: relative;
            text-transform: uppercase;

            &:before {
              content: '';
              width: 0%;
              border: 1px solid #d63636;
              position: absolute;
              bottom: -11px;
              transition: all 0.5s ease;
              opacity: 0;
              visibility: hidden;
            }
            &:hover,
            &.active,
            &:focus {
              &:before {
                width: 100%;
                opacity: 1;
                visibility: visible;
              }
            }
          }
        }
      }
    }
    .content_tab {
      transition: all 0.5s ease;
      transform: scale(0.8);
      margin-top: 50px !important;
      position: absolute;
      opacity: 0;
      visibility: visible;

      &.active {
        transform: scale(1);
        transition: all 0.5s ease;
        position: static;
        opacity: 1;
        visibility: visible;
      }
      .top_tab {
        p {
          font-size: 16px;
          color: $color-main;
          margin-bottom: 51px !important;
        }
      }
    }
  }

  .feature {
    margin-top:12px;
    .box-content {
      padding: 82px;
      p {
        font-family: $font-primary;
        font-size: 15px;
        letter-spacing: 3px;
        font-weight: 600;
      }
      h3 {
        font-size: 20px;
        margin-top: 32px;
        font-weight: 400;
      }
      .ruler {
        width: 45%;
        border-bottom: 1px solid $color-main;
        position: relative;
        margin-top: 55px;
      }
    }
  }
  .newsletter {
    margin-bottom: 100px;
    margin-top: 77px;
    .box-content {
      h3 {
        font-size: 30px;
        line-height: 40px;
        font-weight: 500;
        text-transform: inherit;
      }
      p {
        font-size: 16px;
        color: $color-main;
        margin-top: 22px;
      }
    }
    .box-email {
      margin-top: 40px;
      input {
        &::placeholder {
          color: $color-main;
          font-size: 12px;
          align-content: flex-end;
        }
      }
      .form-control {
        padding-left: 0;
        border: none;
        border-bottom: 1px solid $color-main;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding-bottom: 16px;

        &:focus {
          box-shadow: none;
        }
      }
      .input-group-text {
        background: transparent;
        border: none;
        padding: 0;
        border-bottom: 1px solid $color-main;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding-bottom: 16px;
        color: $color-main;

        &:focus {
          box-shadow: none;
        }
      }
      .btn-primary {
        background-color: $color-main2;
        border-radius: 0;
        border: none;
        padding: 14px 0;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 1px;
        margin-top: 15px;
        transition : .3s;
        &:hover,
        &:focus,
        &:active {
          color: #fff;
          background-color: $color-main3;
          box-shadow: none;
          border: none;
        }
      }
      .btn-primary:not(:disabled):not(.disabled).active:focus,
      .btn-primary:not(:disabled):not(.disabled):active:focus,
      .show>.btn-primary.dropdown-toggle:focus {
        box-shadow: none;
      }
    }
  }
}
.page_aboutus_v1.page_aboutus_v2 {
  .title_general {
    h3 {
      font-size: 38px;
      font-weight: 500;
      padding-bottom: 24px;
    }
    p {
      line-height: 30px;
      font-size: 15px;
      color: $color-main;
    }
  }
  .about_top {
    margin-top: 100px;
    .paddingright {
      padding-right:45px;
      h2 {
        font-size: 50px;
        font-weight: 400;
      }
      p {
        color: $color-main;
        font-size: 16px;
        line-height: 30px;
        padding: 20px 0 42px 0 !important;
      }
      .exploremore {
        color: $color-main;
        text-decoration: none;
        font-weight: 500;
        position: relative;

        &:before {
          content: '';
          width: 100%;
          border-bottom: 1px solid $color-main;
          position: absolute;
          bottom: -3px;
        }
      }
    }
  }

  .video {
    margin-top: 100px;
    .box-video{
      position: relative;
      img{
        transition: all 0.5s ease;
      }
      i{
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        width: 60px;
        height: 60px;
        background: #fff;
        border-radius: 50px;
        line-height: 60px;
        transition: all 0.5s ease;        
        &:hover{
          cursor: pointer;
        }
      }
      &:hover{
        img{
          filter: brightness(50%);
          transition: all 0.5s ease;
        }
      }
    }
  }

  .teams {
    margin-top: 100px;
    .slick_teams {
      margin-top: 50px;
      .box_teams {
        margin: 0 15px;
        .img_teams {
          overflow: hidden;

          &:hover {
            img {
              transform: scale(1.1);
              filter: grayscale(100%);
            }
          }

          img {
            transition: all 0.5s ease;
          }
        }
        .info_teams {
          padding-top: 18px;
          h4 {
            margin-bottom: 10px;
            a {
              font-size: 14px;
              letter-spacing: 2px;
              font-weight: 600;
              text-decoration: none;
              color: $color-main;
            }
          }
          p {
            font-size: 14px;
            color: $color-main;            
          }
          ul {
            padding-top: 31px;
            li {
              padding: 0 14px;
              a {
                font-size: 16px;
                color: $color-main;
                text-decoration: none;
                display: block;
                transition: all 0.5s ease;

                &:hover {
                  color: $color-main;
                  transform: rotate(360deg);
                }
              }
            }
          }
        }
      }
    }
  }

  .store {
    margin-top: 100px;
    .thumnail_store{
      margin-top: 72px;
    }
    .box_img_store {
      overflow: hidden;
      &:hover {
        img {
          transform: scale(1.1);
          filter: grayscale(100%);
        }
      }
      img {
        transition: all 0.5s ease;
      }
    }
    .box_img_store.two {
      margin-top: 30px;
    }
  }
  .address {
    margin-top: 100px;
    .address_pagev2 {
      flex-wrap: wrap;
      .newyork {
        max-width: 32%;
        .title_address_page {
          font-size: 16px;
          color: $color-main;
          margin-bottom: 34px;
        }
        p {
          color: $color-main;
          font-size: 15px;
          margin-bottom: 15px !important;
        }
      }
    }
  }
  .brand_page {
    margin-top: 80px;
    background-color: $color-main2;
    padding: 80px 0;
    .slick-slide {
      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}
.page_aboutus_v1.page_FQA {
  .engoc-faq-icon-plus,
  .engoc-faq-icon-minus{
    font-size: 12px;
    font-weight: bold;
    margin-top: 4px;
  }
  .engoc-faq-heading {
    .engoc-faq-icon-plus {
      display: inline-block;
    }
    .engoc-faq-icon-minus {
      display: none;
    }
    &.engoc-toggle-icon {
      .engoc-faq-icon-plus {
        display: none;
      }
      .engoc-faq-icon-minus {
        display: inline-block;
      }
    }
  }
  p {
    font-size: 15px;
    color: $color-main;
    line-height: 28px;
  }
  .asked {
    margin-top: 100px;
    .top_asked {
      padding-bottom: 40px;
      h3 {
        font-size: 36px;
        font-weight: 500;
      }
      p {
        padding-top: 14px;
      }
    }
    .content_askeds {
      padding-top: 41px;
      border-top: 1px solid #e1e1e1;
      margin-top: 4px;
      .box_content_question {
        padding-bottom: 30px;
        .title_question {
          font-size: 18px;
          font-weight: 500;
          text-decoration: none;
          color: $color-main;
          font-family:  $font-primary;
          display: inline-block;
        }
        .card-body {
          padding: 17px 0 0 0px;
          font-size: 15px;
          color: $color-main;
          line-height: 28px;
        }
      }
    }
  }
  .newsletter {
    margin-top: 100px;
    padding-top: 100px;
    border-top: 1px solid #ebebeb;
    margin-bottom: 100px;
  }
  @media(min-width : 768px) and (max-width : 992px){
    p {
      font-size: 16px;
      line-height: 30px;
    }
    .asked {
      margin-top: 60px;
      .top_asked {
        padding-bottom: 40px;

        h3 {
          font-size: 35px;
          font-weight: 400;
        }
        p {
          margin-bottom: 0 !important;
        }
      }
      .content_askeds {
        padding-top: 40px;
        .box_content_question {
          padding-bottom: 18px;
          .title_question {
            font-size: 13px;
            font-weight: 500;
          }
          .card-body {
            padding: 20px 0 0 40px;
            font-size: 15px;
          }
        }
      }
    }
    .newsletter {
      padding-top: 40px;
      margin-top: 60px;
      margin-bottom: 60px;
    }
  }
}
#map {
  height: 748px;
}
.page_aboutus_v1.page_contact {
  .get_find {
    margin-top: 100px;
    margin-bottom: 100px;

    .box_getin {
      h5 {
        font-size: 30px;
        font-weight: 400;
        padding-bottom: 15px;
      }
      p {
        font-size: 15px;
        color: $color-main;
        line-height: 30px;
      }
      .box-email {
        margin-top:36px;
        input {
          &::placeholder {
            color: $color-main;
            font-size: 12px;
          }
        }
        textarea {
          &::placeholder {
            color: $color-main;
            font-size: 12px;
          }
        }
        .form-control {
          padding-left: 0;
          border: none;
          border-bottom: 1px solid $color-main;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
          padding-bottom: 16px;
          padding-top: 36px;

          &:focus {
            box-shadow: none;
          }
        }
        .form-control.border_bottomform{
          border-bottom:none;
        }
        .input-group{
          padding-bottom: 0px;
          border-bottom: 1px solid $color-main;
          padding-top: 100px;
          margin-bottom: 0 !important;
          .input-group-text{
            padding-bottom: 0px;
            margin-bottom: -18px;
          }
        }
        .input-group-text {
          background: transparent;
          border: none;
          padding: 0;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
          padding-bottom: 0px;
          color: $color-main;

          &:focus {
            box-shadow: none;
          }
        }
        .btn-primary {
          background-color: $color-main2;
          border-radius: 0;
          border: none;
          padding: 16px 0;
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 1px;
          margin-top: 21px;
          transition : .3s;
          &:hover,
          &:focus,
          &:active {
            color: #fff;
            background-color: $color-main3;
            box-shadow: none;
            border: none;

          }
        }
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .show>.btn-primary.dropdown-toggle:focus {
          box-shadow: none;
        }
      }
    }

    .box_getin.box_find {
      margin-left: 40px;
      .info_find {
        margin-left: 50px;
        padding-top: 40px;

        p {
          span {
            margin-right: 25px;
          }
        }
      }
    }
  }
  @media(min-width : 576px) and(max-width : 767px){  
    #map {
      height: 300px;
      margin-top: 50px;
    }
    .get_find {
      margin-top: 50px;
      margin-bottom: 50px;
      .box_getin {
        margin-top: 0px;
        h5 {
          font-size: 30px;
        }
        p{
          margin-bottom:0;
        }
        .box-email {
          margin-top: 0;
          .btn-primary {
            font-size: 15px;
          }
        }
      }
      .box_getin.box_find {
        margin-left: 0px;
        margin-top: 30px;

        .info_find {
          margin-left: 50px;
          padding-top: 30px;

          p {
            span {
              margin-right: 25px;
            }
          }
        }
      }
    }
  }
  @media(min-width : 768px) and (max-width : 992px){
    #map {
      height: 400px;
      margin-top: 60px;
    }
    .get_find {
      margin-top: 60px;
      margin-bottom: 60px;
      .box_getin {
        h5 {
          font-size: 30px;
          padding-bottom: 0;
        }
        p{
          line-height: 28px;
        }
      }
      .box_getin .box-email .input-group{
        padding-top: 29px;
      }
      .box_getin.box_find {
        margin-left: 40px;

        .info_find {
          margin-left: 26px;
          padding-top: 30px;

          p {
            span {
              margin-right: 25px;
            }
          }
        }
      }
    }
  }
}
@media(min-width : 992px) and (max-width : 1200px){
  .page_aboutus_v1.page_FQA {
    p {
      font-size: 16px;
      line-height: 30px;
    }
    .asked {
      margin-top: 45px;
      .top_asked {
        padding-bottom: 45px;
        h3 {
          font-size: 35px;
          font-weight: 400;
        }
        p {
          margin-bottom: 0 !important;
        }
      }
      .content_askeds {
        padding-top: 45px;

        .box_content_question {
          padding-bottom: 30px;

          .title_question {
            font-size: 13px;
            font-weight: 500;
          }

          .card-body {
            padding: 20px 0 0 40px;
            font-size: 15px;
          }
        }
      }
    }
    .newsletter {
      padding-top: 100px;
      margin-top: 100px;
    }
  }
  .page_aboutus_v1 {
    .slide {
      padding: 135px 0;
    }
    .baner {
      padding: 135px 0 130px 0;
    }
    .feature {
      .box-content {
        padding: 60px;
      }
    }
    .newsletter {
      margin-bottom: 80px;
      margin-top: 20px;
    }
  }
  .page_aboutus_v1.page_aboutus_v2 {  
    .about_top {
      .paddingright {
        h2 {
          font-size: 50px;
        }
      }
    }
    .teams {
      .slick_teams {
        .box_teams .info_teams ul{
          padding-top: 0;
        }
        .box_teams {
          margin: 0 15px;

          .info_teams {
            padding-top: 20px;

            p {
              font-size: 14px;
              padding-bottom: 0px;
              margin-bottom: 12px !important;
            }

          }
        }
      }
    }
    .store {
      .box_img_store.two {
        margin-top: 24px;
      }
    }
  }
}
.contact-page{
  padding: 50px 0 60px 0;
  .title_desc{
    font-size: 40px;
    color: $color-main;
    line-height: 1.6;
    text-align: center;
    font-family: $font-primary;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 40px;
  }
  .contact-form{
    .contact-form-page{
      .contact-form{
        .contact-name, .contact-email,.contact-subject{
          margin-bottom: 18px;
          input{
            border-radius: 0;
            border: 1px solid #ebebeb;
            width: 100%;
            background-color: transparent;
            padding: 15px;
            padding-left: 25px;
            &::placeholder{
              font-size: 14px;
              color: #999999;
              font-weight: 400;
              font-family: $font-primary;
            }
          }
        }
        .contact-message{
          margin-bottom: 18px;
          textarea{
            border-radius: 0;
            border: 1px solid #ebebeb;
            width: 100%;
            background-color: transparent;
            padding: 15px;
            padding-left: 25px;
            &::placeholder{
              font-size: 14px;
              color: #999999;
              font-weight: 400;
              font-family: $font-primary;
            }
          }
        }
        .contact-submit{
          margin-bottom: 18px;
          input{
            display: inline-block;
            color: #fff;
            text-transform: uppercase;
            padding: 18px 35px;
            border-radius: 0;
            border: none;
            background-color: $color-main;
            font-size: 14px;
            text-align: center;
            line-height: 24px;
            letter-spacing: .2em;
            font-weight: 600;
            &:hover, &:focus{
              background-color: $color-main2;
            }
          }
        }
      }
    }
  }
  .address-shop{
    margin-bottom: 25px;
    .shop-name{
      font-size: 24px;
      color: $color-main;
      text-align: left;
      font-family: $font-primary;
      font-weight: 500;
      letter-spacing: .2em;
      font-style: normal;
    }
    .shop-address{
      font-family: $font-primary;
      font-size: 14px;
      color: #a8a8a8;
      line-height: 1.6;
      font-weight: 400;
    }
  }
  .info-shop{
    margin-bottom: 25px;
    .title{
      font-size: 18px;
      color: $color-main;
      text-align: left;
      font-family: $font-primary;
      font-weight: 500;
      font-style: normal;
    }
    .content{
      font-family: $font-primary;
      font-size: 14px;
      color: #a8a8a8;
      line-height: 1.6;
      font-weight: 400;
    }
  }
}
.product-item-v1{
  overflow: hidden;
  .info-product{
    .title-product{
      padding: 20px 0 4px 0;
      a{
        font-family: $font-primary;
        font-size: 16px;
        font-weight: 500;
        color: $color-main;
        line-height : 28px;
      }
      &:hover{
        a{
          color: $color-main2;
        }
      }
    }
    .price-product{
      .price-old{
        font-family: $font-primary;
        font-size: 15px;
        font-weight: 700;
        color: #979797;
      }
      .price{
        font-family: $font-primary;
        font-size: 15px;
        font-weight: 700;
        color: $color-main2;
      }
    }
  }
  .img-product{
    overflow:hidden;
    img {
      transition: 0.8s;
    }
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 13px;
      top: 9px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;

    }
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px 7px;
      font-family: $font-primary;
      font-weight: 600;
      display: inline-block;
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%)  scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: $color-main2;
      padding : 10px 15px;
      &:hover{
        transition: all .3s ease;
      }
    }
    .countdown-timer{
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      ul{padding-left: 0;
        margin-bottom: 0;
      }
      li {
        display: inline-block;
        font-size: 14px;
        font-family: $font-primary;
        font-weight: 400;
        width: 60px;
        height: 65px;
        padding-top: 9px;
        list-style-type: none;
        color: $color-main;
        margin: 0 3px 10px 3px;
        background-color: rgba(#fff, .9);
        border-radius: 2px;
        span {
          color: $color-main;
          display: block;
          font-weight: 400;
          font-size: 16px;
          font-family : $font-primary;
          text-algin: center;
          b{
            font-weight: 500;
            padding-top: 7px;
          }
        }
      }
      @media(max-width: 576px){
        li{
          font-size: 9px;
          width: 28px;
          padding-top : 0;
          height: auto;
          span{
            font-size: 9px;
          }
        }
      }
    }
  }
  .product-icon-action{
    @media(max-width: 767px){
      display: none;
    }
    position: absolute;
    top: 50px;
    right: 0;

    background-color: transparent;
    -webkit-transition: .4s linear;
    -moz-transition: .4s linear;
    -ms-transition: .4s linear;
    -o-transition: .4s linear;
    transition: .4s linear;
    display: block;
    flex-wrap: wrap;
    .add-wishlist, .add-to-cart, .quick-view{
      transition: .5s;
      visibility: hidden;
      opacity: 0;
      transform: translateX(30px);
      margin-bottom: 15px;
      a, button{
        color: #232529;
        display: inline-block;
        width: 46px;
        height: 46px;
        line-height: 46px;
        border-radius: 50%;
        padding: 0;
        font-weight: 400;
        margin: 0 10px;
        background-color: #fff;
        font-size: 0;
        box-shadow: 0 3px 10px rgba(0,0,0,.08);
        transition: .3s;
        text-align : center;
        i{
          font-size: 18px;
          color: $color-main;
          line-height: 45px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }

        &:hover{
          background-color: $color-main2;
          transition: .3s;
          i{
            color: #fff;
            z-index: 1;
            transition: .3s;
          }
          svg{
            fill : #fff;
          }
        }
      }
    }
  }

  &:hover{
    .img-product{
      img{
        transition: 0.8s;
      }
    }
    .sold-out{
      transform:  translate(-50%, -50%) scale(1);
      transition: all .3s ease;
    }
    .product-icon-action{

      .add-wishlist, .add-to-cart, .quick-view{
        transform: none;
        transition: .5s;
        opacity: 1 ;
        visibility: visible;
      }
      .add-wishlist{
        transition-delay: 0.1s;
      }
      .add-to-cart{
        transition-delay: 0.25s;
      }
      .quick-view{
        transition-delay: 0.4s;
      }
    }
  }
  .image-thumbnail{
    .more_variant{
      margin-left:15px;
      font-size: 14px;
      font-weight: 600;
      color: $color-main;
      &:hover{
        color: $color-main2;
      }
    }
    .variant-image-group{
      height: 40px;
      .border_thumbnail{
        display: inline-block;
        border: none;
        .circle-thumb{
          background-position : center;
          height: 50px;
          width: 40px;
          display: inline-block;
          border-radius : 3px;
          &.active{
            border: 2px solid $color-main2;
          }
        }

      }
    }
    @media(max-width: 576px){
      .more_variant{
        margin-left: 5px;
        font-size: 10px;
      }
      .variant-image-group{
        height: 18px;
        .border_thumbnail{
          .circle-thumb{
            height: 18px;
            width: 18px;
          }
        }
      }
    }
  }
}
.product-item-v2{
  overflow: hidden;
  .info-product{
    .title-product{
      padding: 20px 0 10px 0;
      a{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 500;
        color: #494949;
      }
      &:hover{
        a{
          color: $color-main2;
        }
      }
    }

  }
  .price-product{
    padding-top : 5px;
    .price-old{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: #979797;
    }
    .price{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: $color-main2;
    }
  }
  .img-product{
    overflow:hidden;
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 13px;
      top: 9px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;

    }    
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px;
      font-family: $font-primary;
      font-weight: 500;
      display: inline-block;
      font-size: 18px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%) rotate(45deg) scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: rgba(20, 192, 255, 0.47);
      padding : 10px;
      border-radius : 20px;
      &:hover{
        transition: all .3s ease;
        a{
          color: $color-main2;

        }
      }
    }
  } 
  .product-icon-action{
    position: absolute;
    bottom: 84px;
    left: 0;
    display: block;
    transition: 0.5s;  
    opacity: 0 ;
    visibility: hidden;
    li{
      a{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 0;
        margin-right: 0;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size: 0;
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #ffffff;
          }
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        i{
          font-size: 18px;
          line-height : 46px;
        }
      }
      .icon-quickview{
        transform: rotate(90deg);
      }
      button{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 0;
        margin-right: 0;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }

        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #ffffff;
          }
        }
      }
    }
    .add-wishlist{
      a{
        i{
          line-height: 46px;
        }
      }
    }
  }
  .variant-product{
    display: inline-grid;
    position: absolute;
    bottom: 84px;
    right:0px;
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
  }
  .des-font{
    font-size: 16px;
    position: absolute;
    bottom: 30px;
    left: 28px;
    font-weight: 500;
  }
  &:hover{
    .sold-out{
      transform:  translate(-50%, -50%) rotate(45deg) scale(1);
      transition: all .5s ease;
    }
    .variant-product{
      right: 25px;
      opacity: 1 ;
      visibility: visible; 
    }
    .product-icon-action{
      left: 25px;
      opacity: 1 ;
      visibility: visible;      
    }
  }
  @media(min-width : 576px) and (max-width : 768px){
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }
  @media(max-width : 575px){
    .img-product{
      .label-new,
      .label-sale
      {
        display: inline-table;
      }
    }
    .price-product{
      position: unset;
    }
    .des-font {
      position: unset;
      font-size: 14px;
      padding-top: 16px;
    }
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }

}
.product-item-v3{
  overflow: hidden;
  .price-product{
    padding-top : 5px;
    .price-old{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: #979797;
    }
    .price{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: $color-main2;
    }
  }
  .info-product{
    .title-product{
      padding: 20px 0 10px 0;
      a{
        font-family: $font-primary;
        font-size: 16px;
        font-weight: 500;
        color: $color-main;
      }
      &:hover{
        a{
          color: $color-main2;
        }
      }
    }

  }
  .img-product{
    overflow:hidden;
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 13px;
      top: 9px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;

    }
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px;
      font-family: $font-primary;
      font-weight: 500;
      display: inline-block;
      font-size: 18px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%) rotate(45deg) scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: rgba(20, 192, 255, 0.47);
      padding : 10px;
      border-radius : 20px;
      &:hover{
        transition: all .3s ease;
        a{
          color: $color-main2;

        }
      }
    }
  }

  .product-icon-action{
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    right: 21px;
    background: #fff;
    transition: 0.5s;
    padding: 0 12px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
    opacity: 0 ;
    visibility: hidden;
    li{
      padding-bottom: 10px;
      padding-top: 10px;
      border-bottom: 1px solid #e9e9e9;
      &:last-child{
        border-bottom: none;
      }
      font-size : 0;
      i{
        font-size: 18px;
        line-height : 46px;
      }
      a{
        color: $color-main;
        font-size:20px;
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
      }
      button{
        color: $color-main;
        font-size:20px;
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
      }
    }
  }
  .variant-product{
    display: inline-grid;
    position: absolute;
    bottom: 37px;
    left: 20px;
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
  }
  .des-font{
    font-size: 16px;
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    font-weight : 500;
    text-align: center;
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
  }
  .price-product{
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
  }
  &:hover{
    .sold-out{
      transform:  translate(-50%, -50%) rotate(45deg) scale(1);
      transition: all .3s ease;
    }
    .variant-product{
      bottom: 67px;
      opacity: 1 ;
      visibility: visible; 
    }
    .des-font{
      bottom: 28px;
      opacity: 1 ;
      visibility: visible; 
    }
    .price-product{
      top: 20px;
      opacity: 1 ;
      visibility: visible; 
    }
    .product-icon-action{
      top: 50%;
      opacity: 1 ;
      visibility: visible;      
    }
  }
}
.product-item-v4{
  overflow: hidden;

  .img-product{
    overflow:hidden;
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 13px;
      top: 9px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;

    }
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px;
      font-family: $font-primary;
      font-weight: 500;
      display: inline-block;
      font-size: 18px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%) rotate(45deg) scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: rgba(20, 192, 255, 0.47);
      padding : 10px;
      border-radius : 20px;
      &:hover{
        transition: all .3s ease;
        a{
          color: $color-main2;

        }
      }
    }
  } 
  .product-icon-action{
    position: absolute;
    bottom: 84px;
    left: 0;
    display: block;
    transition: 0.5s;  
    opacity: 0 ;
    visibility: hidden;
    li{
      a{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 0;
        margin-right: 0;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #ffffff;
          }
        }
      }
      .icon-quickview{
        transform: rotate(90deg);
      }
      button{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 0;
        margin-right: 0;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #ffffff;
          }
        }
      }
    }
    .add-wishlist{
      a{
        i{
          line-height: 46px;
        }
      }
    }
  }
  .variant-product{
    display: inline-grid;
    position: absolute;
    bottom: 84px;
    right:0px;
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
  }
  .des-font{
    font-size: 16px;
    position: absolute;
    bottom: 0;
    left: 28px;
    font-weight: 500;
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
  }

  .price-product{
    padding-top : 5px;
    .price-old{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: #979797;
    }
    .price{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: $color-main2;
    }
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
  }
  &:hover{
    .sold-out{
      transform:  translate(-50%, -50%) rotate(45deg) scale(1);
      transition: all .5s ease;
    }
    .variant-product{
      right: 25px;
      opacity: 1 ;
      visibility: visible; 
    }
    .product-icon-action{
      left: 25px;
      opacity: 1 ;
      visibility: visible;      
    }
    .des-font{
      bottom: 30px;
      opacity: 1 ;
      visibility: visible;
    }
    .price-product{
      top: 22px;
      opacity: 1 ;
      visibility: visible;
    }
  }
  @media(min-width : 576px) and (max-width : 768px){
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }
  @media(max-width : 575px){
    .img-product{
      .label-new,
      .label-sale
      {
        display: inline-table;
      }
    }
    .price-product{
      position: unset;
    }
    .des-font {
      position: unset;
      font-size: 14px;
      padding-top: 16px;
    }
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }

}
.product-item-v5{
  overflow: hidden;
  .price-product{
    padding-top : 5px;
    .price-old{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: #979797;
    }
    .price{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: $color-main2;
    }
  }
  .info-product{
    .title-product{
      padding: 20px 0 10px 0;
      a{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 500;
        color: #494949;
      }
      &:hover{
        a{
          color: $color-main2;
        }
      }
    }    
  }
  .img-product{
    overflow:hidden;
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 10px;
      top: 10px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      right: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;

    }
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px;
      font-family: $font-primary;
      font-weight: 500;
      display: inline-block;
      font-size: 18px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%) rotate(45deg) scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: rgba(20, 192, 255, 0.47);
      padding : 10px;
      border-radius : 20px;
      &:hover{
        transition: all .3s ease;
        a{
          color: $color-main2;

        }
      }
    }
    .variant-product{
      display: grid;
      position: absolute;
      right: 21px;
      bottom:0px;
      transition: all .5s ease;
      opacity: 0 ;
      visibility: hidden;
      transition-delay: 0.1s;
    }
  }
  .product-icon-action {
    justify-content: space-around;
    background: #fff;
    color: $color-main;
    align-items: center;
    flex-wrap: wrap;
    transition: all .5s ease;
    height: 44px;
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(100%);
    svg {
      width: 20px;
      height: 20px;
      fill: $color-main;
    }
    .quick-view{
      border-left: 1px solid #e0e0e0;
    }

  }
  .des-font {
    font-size: 16px;
    left: 28px;
    line-height : 1.5em;
    font-weight: 600;
    padding-top: 22px;
  }
  .price-product {
    padding-top: 6px;
    color: $color-main2;
  }
  .add-to-cart {
    position: absolute;
    background: #fff;
    bottom: 0;
    opacity: 0 ;
    visibility: hidden;
    width: 100%;
    transform: translateY(100%);
    transition: all .3s ease;
    padding: 3px 0;
    button,a {
      color: $color-main2;
      font-family: $font-primary;
      font-size: 12px;
      font-weight: 500;
      text-transform : uppercase;
      position: relative;
      display: inline-block;
      &:after {
        content:"";
        width: 100%;
        height:1px;
        background: $color-main2;
        position: absolute;
        left: 0;
        bottom: -2px;
      }
    }
  }
  &:hover{
    .sold-out{
      transform:  translate(-50%, -50%) rotate(45deg) scale(1);
      transition: all .5s ease;
    }
    .add-to-cart{
      transform: unset;
      opacity: 1 ;
      visibility: visible;  
    }
    .product-icon-action{
      transform: unset;
      opacity: 1 ;
      visibility: visible; 
    }
    .img-product{
      .variant-product{
        opacity: 1 ;
        visibility: visible; 
        bottom:62px;
      }
    }

  }
  @media(min-width : 576px) and (max-width : 768px){

    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }
  @media(max-width : 575px){
    .img-product{
      .label-new,
      .label-sale
      {
        display: inline-table;
      }
    }
    .price-product{
      position: unset;
    }
    .des-font {
      position: unset;
      font-size: 14px;
      padding-top: 16px;
    }
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }

}
.product-item-v6{
  overflow: hidden;
  .info-product{
    .title-product{
      padding: 20px 0 10px 0;
      a{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 500;
        color: #494949;
      }
      &:hover{
        a{
          color: $color-main2;
        }
      }
    }

  }
  .price-product{
    padding-top : 5px;
    text-align : center;
    .price-old{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: #979797;
    }
    .price{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: $color-main2;
    }
  }
  .img-product{
    overflow:hidden;
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 13px;
      top: 9px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;
    }    
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px;
      font-family: $font-primary;
      font-weight: 500;
      display: inline-block;
      font-size: 18px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%) rotate(45deg) scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: rgba(20, 192, 255, 0.47);
      padding : 10px;
      border-radius : 20px;
      &:hover{
        transition: all .3s ease;
        a{
          color: $color-main2;

        }
      }
    }
    &:after{
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      transition: all .3s linear;
      background-color: rgba(35,37,41,.6);
    }
  }
  .product-icon-action{
    position: absolute;
    left: 50%;
    top: 50%;
    transform : translateX(-50%) translateY(15px);
    display: flex;
    transition: 0.5s;  
    opacity: 0 ;
    visibility: hidden;
    z-index: 1;
    li{
      a{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 10px;
        margin-right: 10px;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #ffffff;
          }
        }
      }
      .icon-quickview{
        transform: rotate(90deg);
      }
      button{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 0;
        margin-right: 10px;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #fff;
          }
        }
      }
    }
    .add-wishlist{
      a{
        i{
          line-height: 46px;
        }
      }
    }
  }
  .variant-product{
    display: flex;
    position: absolute;
    top: 58%;
    left: 50%;
    transform : translateX(-50%) translateY(15px);
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
    a{
      margin: 0 7px;
    }
  }
  .des-font{
    font-size: 16px;
    font-weight: 500;
    padding-top : 20px;
    padding-bottom : 10px;
    text-align : center;
  } 
  &:hover{
    .sold-out{
      transform:  translate(-50%, -50%) rotate(45deg) scale(1);
      transition: all .5s ease;
    }
    .variant-product{
      transform : translateX(-50%) translateY(0);
      transition-delay : .5s;
      opacity: 1 ;
      visibility: visible; 
    }
    .product-icon-action{
      transform : translateX(-50%) translateY(0);
      opacity: 1 ;
      visibility: visible;      
    }
    .img-product{
      &:after{
        opacity : 1;
      }
    }
  }
  @media(min-width : 576px) and (max-width : 768px){
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }
  @media(max-width : 575px){
    .img-product{
      .label-new,
      .label-sale
      {
        display: inline-table;
      }
    }
    .price-product{
      position: unset;
    }
    .des-font {
      position: unset;
      font-size: 14px;
      padding-top: 16px;
    }
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }
}
.product-item-v7{
  overflow: hidden;
  transition : .5s;
  margin-bottom : 30px;
  .price-product{
    padding-top : 5px;
    text-align : center;
    .price-old{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: #979797;
    }
    .price{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: $color-main2;
    }
  }
  .img-product{
    overflow:hidden;
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 13px;
      top: 9px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;
    }    
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px;
      font-family: $font-primary;
      font-weight: 500;
      display: inline-block;
      font-size: 18px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%) rotate(45deg) scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: rgba(20, 192, 255, 0.47);
      padding : 10px;
      border-radius : 20px;
      &:hover{
        transition: all .3s ease;
        a{
          color: $color-main2;

        }
      }
    }

  }
  .product-icon-action{
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    transition: 0.5s;  
    opacity: 0 ;
    visibility: hidden;
    z-index: 1;
    transform: translateY(-50%);
    .add-to-cart,.quick-view,.add-wishlist{
      transition : .3s;
    }
    li{
      a{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #ffffff;
          }
        }
      }
      .icon-quickview{
        transform: rotate(90deg);
      }
      button{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 0;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #fff;
          }
        }
      }
    }
    .add-wishlist{
      a{
        i{
          line-height: 46px;
        }
      }
    }
  }
  .variant-product{
    display: flex;
    position: absolute;
    bottom:  84px;
    left: 50%;
    transform : translateX(-50%);
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
    a{
      margin: 0 7px;
    }
  }
  .des-font{
    font-size: 16px;
    font-weight: 500;
    padding-top : 20px;
    padding-bottom : 10px;
    text-align : center;
  } 
  &:hover{
    -webkit-box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    -moz-box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    .sold-out{
      transform:  translate(-50%, -50%) rotate(45deg) scale(1);
      transition: all .5s ease;
    }
    .variant-product{
      opacity: 1 ;
      visibility: visible; 
    }
    .product-icon-action{
      opacity: 1 ;
      visibility: visible;   
      .add-to-cart{
        transform : translateX(20px);
        transition-delay: .1s;
      }
      .quick-view {
        transform : translateX(20px);
        transition-delay: .05s;
      }
      .add-wishlist{
        transform : translateX(20px);
      }
    }
  }
  @media(min-width : 576px) and (max-width : 768px){
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }
  @media(max-width : 575px){
    .img-product{
      .label-new,
      .label-sale
      {
        display: inline-table;
      }
    }
    .price-product{
      position: unset;
    }
    .des-font {
      position: unset;
      font-size: 14px;
      padding-top: 16px;
    }
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }

}
.product-item-v8{
  transition : .5s;
  .price-product{
    padding-bottom : 5px;
    text-align : center;
    .price-old{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: #979797;
    }
    .price{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: $color-main2;
    }
  }
  .img-product{
    overflow:hidden;
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 13px;
      top: 9px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;

    }    
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px;
      font-family: $font-primary;
      font-weight: 500;
      display: inline-block;
      font-size: 18px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%) rotate(45deg) scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: rgba(20, 192, 255, 0.47);
      padding : 10px;
      border-radius : 20px;
      &:hover{
        transition: all .3s ease;
        a{
          color: $color-main2;

        }
      }
    }

  } 
  .info_bottom {
    position: absolute;
    top: 100%;
    background-color: #fff;
    width: 100%;
    -webkit-box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    -moz-box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    margin-top: -60px;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: margin .4s ease;
    -moz-transition: margin .4s ease;
    -o-transition: margin .4s ease;
    transition: margin .4s ease;
    pointer-events: none;   
    .product-icon-action{
      border-top: 1px solid #ebebeb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: 0.5s;  
      opacity: 1 ;
      visibility: visible;
      z-index: 1;
      padding: 12px 25px;
      svg{
        width : 20px;
        height : 20px;
        fill : $color-main;
      }
      .add-to-cart{
        button,a{
          border-radius: 3px;
          font-size: 12px;
          font-weight: 500;
          text-transform: uppercase;
          color: #fff;
          padding: 9px 27px;
          display: inline-block;
          background: $color-main2;
          transition : .3s;
          svg{
            width : 20px;
            height : 20px;
            fill : $color-main;
          }
          &:hover{
            background : $color-main3;

          }
        }
      }
    }
    .prod_des{
      padding: 12px 25px;
      border-top: 1px solid #ebebeb;
      font-size: 14px;
      text-align: center;
    }
  } 
  .variant-product{
    display: flex;
    position: absolute;
    bottom:  84px;
    left: 50%;
    transform : translateX(-50%);
    transition: all .3s linear;
    opacity: 1 ;
    visibility: visible;
    a{
      margin: 0 7px;
    }
  }
  .des-font{
    font-size: 16px;
    font-weight: 500;
    padding-top : 20px;
    padding-bottom : 10px;
    text-align : center;
  } 
  &:hover{
    .info_bottom{
      opacity: 1;
      visibility: visible;
      margin-top: 0px;
      z-index : 1;
      pointer-events: unset;
    }
    -webkit-box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    -moz-box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    box-shadow: 0px 15px 25px 0px rgba(0,0,0,.08);
    .sold-out{
      transform:  translate(-50%, -50%) rotate(45deg) scale(1);
      transition: all .5s ease;
    }

  }
  @media(min-width : 576px) and (max-width : 768px){
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .info_bottom{
      display: none !important; 
    }
  }
  @media(max-width : 575px){
    .img-product{
      .label-new,
      .label-sale
      {
        display: inline-table;
      }
    }
    .price-product{
      position: unset;
    }
    .des-font {
      position: unset;
      font-size: 14px;
      padding-top: 16px;
    }
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .info_bottom{
      display: none !important; 
    }
  }

}
.product-item-v9{
  overflow: hidden;
  .info-product{
    .title-product{
      padding: 20px 0 10px 0;
      a{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 500;
        color: #494949;
      }
      &:hover{
        a{
          color: $color-main2;
        }
      }
    }

  }
  .price-product{

    text-align : center;
    .price-old{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: #979797;
    }
    .price{
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 700;
      color: $color-main2;
    }
  }
  .img-product{
    overflow:hidden;
    .label-new{
      font-family: $font-primary;
      height: 25px;
      display: inline-block;
      text-align: center;
      background-color: #f44338;
      line-height: 25px;
      color: #fff;
      font-weight: 600;
      letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase;
      padding: 0 10px;
      background-color: #41cce5;
      left: 13px;
      top: 9px;
    }
    .label-sale{
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      font-size: 10px;
      font-family: $font-primary;
      letter-spacing: 0.3em;
      padding:5px 12px;

    }    
    .sold-out{
      a{
        color: #fff;
      }
      position: absolute;
      padding: 5px;
      font-family: $font-primary;
      font-weight: 500;
      display: inline-block;
      font-size: 18px;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transform:  translate(-50%, -50%) rotate(45deg) scale(0);
      left: 50%;
      top : 50%;
      transition: all .3s ease;
      background-color: rgba(20, 192, 255, 0.47);
      padding : 10px;
      border-radius : 20px;
      &:hover{
        transition: all .3s ease;
        a{
          color: $color-main2;

        }
      }
    }

  }
  .product-icon-action{
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform : translateX(-50%) translateY(15px);
    display: flex;
    transition: 0.5s;  
    opacity: 0 ;
    visibility: hidden;
    z-index: 1;
    li{
      a{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 10px;
        margin-right: 10px;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #fff;
          }
        }
      }
      .icon-quickview{
        transform: rotate(90deg);
      }
      button{
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: #ffffff;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
        border-radius: 50%;
        margin-left: 0;
        margin-right: 10px;
        display: block;
        margin-bottom: 13px;
        transition: 0.5s;
        color: $color-main;
        font-size : 0;
        i{
          font-size: 18px;
          line-height : 46px;
        }
        svg{
          width : 20px;
          height : 20px;
          fill : $color-main;
        }
        &:hover {
          background-color: $color-main2;
          color: #ffffff;
          svg{
            fill : #fff;
          }
        }
      }
    }
    .add-wishlist{
      a{
        i{
          line-height: 46px;
        }
      }
    }
  }
  .variant-product{
    display: flex;
    position: absolute;
    bottom: 17%;
    left: 50%;
    transform : translateX(-50%) translateY(15px);
    transition: all .3s linear;
    opacity: 0 ;
    visibility: hidden;
    a{
      margin: 0 7px;
    }
  }
  .des-font{
    font-size: 16px;
    font-weight: 500;
    padding-top : 20px;
    padding-bottom : 10px;
    text-align : center;
  } 
  &:hover{
    .sold-out{
      transform:  translate(-50%, -50%) rotate(45deg) scale(1);
      transition: all .5s ease;
    }
    .variant-product{
      transform : translateX(-50%) translateY(0);
      transition-delay : .5s;
      opacity: 1 ;
      visibility: visible; 
    }
    .product-icon-action{
      transform : translateX(-50%) translateY(0);
      opacity: 1 ;
      visibility: visible;      
    }
  }
  @media(min-width : 576px) and (max-width : 768px){
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }
  @media(max-width : 575px){
    .img-product{
      .label-new,
      .label-sale
      {
        display: inline-table;
      }
    }
    .price-product{
      position: unset;
    }
    .des-font {
      position: unset;
      font-size: 14px;
      padding-top: 16px;
    }
    .add-to-cart{
      display: none !important; 
    }
    .variant-product,
    .product-icon-action{
      display: none !important; 
    }
  }

}
.product-grid-view{
  .btn-loadmore{
    margin: 20px 0;
    min-width: 172px;
    min-height: 50px;
    border: 2px solid $color-main;
    font-family:  $font-primary;
    color: $color-main;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .2em;
    line-height: 50px;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    text-transform: uppercase;
    transition: .3s;
    &:hover{
      background: $color-main2;
      transition: .3s;
      color : #fff;
      border: 2px solid $color-main2;
    }
  }
}
.product-list-view{

  .list_prod{
    border-bottom: 1px solid #e0e0e0;
    padding-top: 40px;
    padding-bottom: 40px;
    &:first-child{
      padding-top: 0;
    }
  }
  .product-item-list{
    .product{  

      .img-product{
        overflow:hidden;
        .label-new {
          display: block;
          min-width: 60px;
          height: 20px;
          font-weight: 600;
          font-size: 11px;
          line-height : 20px;
          text-transform: uppercase;
          top: 10px;
          left: -5px; 
          transform: skew(-22deg);
          span{
            transform: skew(22deg);
            display : inline-block;
          }
        }
        .label-sale {
          display: block;
          min-width: 60px;
          height: 20px;
          line-height : 20px;
          font-weight: 600;
          font-size: 11px;
          text-transform: uppercase;
          text-align: center;
          top: 10px;
          right: -5px;
          transform: skew(-22deg);
          span{
            transform: skew(22deg);
            display : inline-block;
          }
        }
        .sold-out{
          a{
            color: #fff;
          }
          position: absolute;
          padding: 5px;
          font-family: $font-primary;
          font-weight: 500;
          display: inline-block;
          font-size: 18px;
          text-transform: uppercase;
          text-align: center;
          line-height: 1.2;
          transform:  translate(-50%, -50%) rotate(45deg) scale(0);
          left: 50%;
          top : 50%;
          transition: all .3s ease;
          background-color: rgba(20, 192, 255, 0.47);
          padding : 10px;
          border-radius : 20px;
          &:hover{
            transition: all .3s ease;
            a{
              color: $color-main2;

            }
          }
        }
      }


      .info-product{
        padding-left: 25px;
        .product-icon-action{ 
          display : flex;
          align-items: center;
          flex-wrap : wrap;
          margin-top : 20px;
          .add-wishlist, .add-to-cart, .quick-view{
            margin-right : 15px;
            display  : inline-block;
            transition: all .3s ease;
            a,button {
              display: inline-block;
              font-size: 12px;
              letter-spacing: 2px;
              font-weight: 400;
              text-transform: uppercase;
              outline: 0;
              box-sizing: border-box;
              transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,transform .3s cubic-bezier(.78,.2,.21,.88);
              padding: 15px 15px;
              white-space: nowrap;
              background: #fff;
              box-shadow: 0 3px 20px 0 rgba(0,0,0,.1);
            }
            svg{
              fill: $color-main;
              width: 20px;
              height: 20px;
              transition: .3s;
            }
            i{
              color: $color-main;
              font-size: 20px;
              transition: .3s;
            }

            &:hover{
              a,button{
                background: $color-main2;
              }
              svg{
                fill: #fff;
              }
              i{
                color: #fff;
              }
            }
          }

        }
        .title-product{
          a{
            font-family: $font-primary;
            font-size: 22px;
            font-weight: 500;
            color: #333333;
          }
          &:hover{
            a{
              color: $color-main2;
            }
          }
        }
        .price-product{
          padding-top : 6px;
          .price-old{
            font-family: $font-primary;
            font-size:  18px;
            font-weight: 400;
            color: #adadad;
            padding-right: 10px;
          }
          .price{
            font-family: $font-primary;
            font-size: 18px !important;
            font-weight: 500;
            color: #adadad;
          }
        }
        .des-product{
          display: block;
          font-family: $font-primary;
          font-size: 15px;
          font-weight: 400;
          color: $color-main;
          line-height: 25px;

        }
      }
    }
  }

}
.wrap-rating .spr-badge .spr-starrating .spr-icon {
  color: #f2b03d;
  font-size: 12px !important;
  padding-right: 2px;
}
.prod_largeimg{
  .detail-share-social{
    position: fixed;
    top: 30%;
    left: -32px;
    z-index:99;
    .share-product-title{
      background: $color-main;
      padding: 10px 17px;
      transform: rotate(90deg);
      svg{
        width: 18px;
        height: 18px;
        fill: #fff;
        padding-right: 8px;
      }
      label{
        font-family: $font-primary;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;            
        letter-spacing: .2em;
        margin-bottom: 0 !important;
      }
    }

    .casano-social-product{
      background: #fff none repeat scroll 0 0;
      box-shadow: 0 15px 20px rgba(0,0,0,.1);
      right: -20px;
      z-index: 2;
      top: -30px;
      opacity: 0;
      visibility: hidden; 
      -webkit-transform: translateX(-20px);
      -moz-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      -o-transform: translateX(-20px);
      transform: translateX(-20px);
      transition: all 0.5s linear 0s;
      -o-transition: all 0.5s linear 0s;
      -webkit-transition: all 0.5s linear 0s;
      a{
        color: #bcbcbc;
        font-size: 16px;
        line-height: 16px;
        padding: 8px 8px;
        display: block;
        i{
          font-size: 16px;
          color: #b1b1b1
        }
        &:hover{
          i{
            color: $color-main2;
          }
        }
      }
    }  

    &:hover{
      cursor: pointer;
      .casano-social-product{
        transform: unset;
        opacity: 1;
        visibility: visible;
      }
    }
  }
  .content-page-detail{
    padding-bottom: 30px;
    margin-right: 15px;
    .gallery-control {
      position: relative;
      .btn-360{
        z-index: 1;
        svg{
          width: 30px;
          height: auto;
          fill: $color-main2;

        }
        .text_360{
          padding-left: 10px;
          font-family: $font-primary;
          color: $color-main2;
          font-size: 13px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: .1em;
        }
        position: absolute;
        bottom: 19px;
        left: 17px;
        min-width: 130px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 12px;
        letter-spacing: .2em;
        cursor: pointer;
        border: 0;
        transition: all .3s ease;
        padding: 0 15px;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
        background: #fff;
        transition: .3s;
        &:hover, &:focus{
          background: $color-main2;
          transition: .3s;
          .text_360{
            color: #fff;
          }
          svg{
            fill: #fff;
          }
        }
      }
      .btn-video{
        z-index: 1;
        svg{
          width: 30px;
          height: auto;
          fill: $color-main2;

        }
        .text_video{
          padding-left: 10px;
          font-family: $font-primary;
          color: $color-main2;
          font-size: 13px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: .1em;
        }
        position: absolute;
        bottom: 19px;
        right: 4%;
        min-width: 100px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 12px;
        letter-spacing: .2em;
        cursor: pointer;
        border: 0;
        transition: all .3s ease;
        padding: 0 15px;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
        background: #fff;
        transition: .3s;
        &:hover, &:focus{
          background: $color-main2;
          transition: .3s;
          .text_video{
            color: #fff;
          }
          svg{
            fill: #fff;
          }
        }
      }

      .next-slide,.prev-slide{
        position: absolute;
        height : 40px;
        width : 40px;
        border-radius : 50%;
        line-height : 40px;
        background : #fff;
        -webkit-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
        -moz-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
        box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
        font-size: 0;
        text-align: center;
        svg{
          width : 20px;
          height: auto;
        }
        &:hover{
          background : $color-main2;
          svg{
            fill : #fff;
          }
        }
        &.slick-disabled {
          pointer-events: none;
          color: gray;
          opacity: .4;
        }
      }
      .next-slide{
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }
      .prev-slide{
        position: absolute;
        left: 5%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }
      .slick-dots{
        transform: translate(-50%);
        left: 50%;
        bottom: 5%;
        li{
          button{
            background: #c4c4c4;
            &:before{
              opacity: 0;
            }
            font-size: unset;
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
          }
        }
        .slick-active{
          button{
            background-color: $color-main;
          }
        }
      }
    } 

    .detail-info{ 
      width: 75%;
      padding-left: 60px;
      .product-title{
        font-family: $font-primary;
        font-size: 24px;
        font-weight: 400;
        color: $color-main;
        text-transform: capitalize;
        padding-right: 40px;
      }
      .product-price{
        display : flex;
        align-items: flex-end;
        padding-bottom: 16px;
        del{
          font-size: 16px;
          font-weight: 400;
          color: #83868c;
          margin: 0 7px;
        }
        ins{
          font-size: 20px;
          font-weight: 400;
          color: $color-main2;
          text-decoration :none;
        }
      }
      .wrap-rating{
        border-bottom: 1px solid #e7e7e7;
        padding-bottom: 24px;
      }
      .btn-action{
        margin-top : 22px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -moz-align-items: center;
        -ms-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .shop-button{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0 39px;
          height: 55px;
          font-size: 14px;
          background: $color-main2;
          letter-spacing: .2em;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: #fff;
          transition: .3s;
          text-align: center;
          &:hover{
            background: $color-main;
            transition: .3s;
          }
        }
        .shop-button-amazon{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0  40px;
          height: 55px;
          line-height : 55px;
          font-size: 12px;
          background: $color-main2;
          letter-spacing: 2.2px;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: #fff;
          transition: .3s;
          text-align: center;
          &:hover{
            background: $color-main2;
            transition: .3s;
          }
        }
        .shop-button-soldout{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0  40px;
          height: 55px;
          line-height : 55px;
          font-size: 12px;
          background: #e2e2e2;
          letter-spacing: 2.2px;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: $color-main;
          text-align: center;
        }

        .js-qty{
          display: inline-block;
          width: 90px;
          border: 2px solid $color-main;
          margin-right: 15px;
          input[type="text"]{
            width : 45px;
            border: none;
            padding: 10px 0;
            text-align: center;
            font-size: 20px;
            color: #232529;
            font-weight: 600;
            border-right: 1px solid #232529;
            border-radius : 0;
          }
          .qty_minus, .qty_plus{
            position: absolute;
            transition: .3s;
            color: $color-main;
            padding: 0;
            width: unset;
            border: 0;
            font-weight: 600;
            font-size: 14px;
            &:hover{
              color: $color-main2;
            }

          }
          .qty_plus{
            right: 0px;
            height: 50%;
            top: 0;
            width: 42px;
          }
          .qty_minus{
            right: 0px;
            bottom: 0;
            height: 50%;
            width: 42px;
            left: unset;
            top: unset;
            border-top: 1px solid $color-main;
          }
        }


      }
      .maxus-productdetail__options{
        .title_variant{
          font-size: 11px;
          font-weight: 600;
          border-bottom: 1px solid $color-main;
          padding-bottom: 4px;
          letter-spacing: .1em;
          display: inline-block;
          margin-bottom: 17px;

        }
      }
      .pd_summary{
        font-family: $font-primary;
        font-size: 14px;
        color: #a8a8a8;
        line-height: 28px;
        font-weight: 400;
        padding: 22px 0 0px 0;
      }
      .btn-addwhlist{
        a{
          display: block;
        }
        transition: .3s;
        height: 40px;
        width : 40px;
        border: 1px solid #e9e9e9;
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        font-size : 0;
        i{
          font-size: 14px;
          color: $color-main;
        }
        svg{
          height : 14px;
          width : 14px;
          fill : $color-main;
        }
        &:hover{
          border: 1px solid transparent;
          background:$color-main2;
          i{
            color: #fff;
          }
          svg{
            fill : #fff;
          }
        }
      }
      .product-meta-info{
        padding-left: 0;
        li{
          list-style: none;
        }
        .product-category-info{
          margin-top: 5px;
          label{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color: $color-main;          
            padding-right: 5px;
            margin-bottom: 0 !important;
          }
          a{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color:#bfbfbf;
            text-decoration: none;
            transition: .3s;
            &:hover,  &:focus{
              color: $color-main2;
              transition: .3s;
            }
          }

        }
        .product-sku{
          margin-top: 20px;
          label{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color: $color-main;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding-right: 5px;
            margin-bottom: 0 !important;
          }
          span{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color:#bfbfbf;
          }
        }

      }

    }

  }

  .arrows-product{
    position: relative;
    display: flex;
    padding: 20px 0 30px;
    &:before{
      content : '';
      height: 20px;
      width: 1px;
      background: #d6d6d6;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .prev_prod{
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding-right: 15px;
      position: relative;
      i{
        font-size: 12px;
        font-weight: 600;
        padding-right: 12px;
      }
      .img-prev{
        .info-prod{
          margin-left: 10px;
          a{
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
          }
          p{
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0;
            color: #83868c;
          }
        }
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #fff;
        -webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        -moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        border: 1px solid #f4f4f4;
        position: absolute;
        top: 100%;
        right: 0;
        visibility: hidden;
        opacity: 0;
        min-width: 240px;
        -webkit-transition: -webkit-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -o-transition: -o-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -moz-transition: -moz-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        transition: transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
      }

      &:hover{
        .img-prev{
          visibility: visible;
          opacity: 1;
          -webkit-transform: translateX(0px);
          -moz-transform: translateX(0px);
          -ms-transform: translateX(0px);
          -o-transform: translateX(0px);
          transform: translateX(0px);
        }
      }
    }

    .next_prod{
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding-left: 15px;
      position: relative;
      i{
        font-size: 12px;
        font-weight: 600;
        padding-left: 12px;
      }
      .img-next{
        .info-prod{
          margin-left: 10px;
          a{
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
          }
          p{
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0;
            color: #83868c;
          }
        }
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #fff;
        -webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        -moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        border: 1px solid #f4f4f4;
        position: absolute;
        top: 100%;
        right: 0;
        visibility: hidden;
        opacity: 0;
        min-width: 240px;
        -webkit-transition: -webkit-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -o-transition: -o-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -moz-transition: -moz-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        transition: transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
      }

      &:hover{
        .img-next{
          visibility: visible;
          opacity: 1;
          -webkit-transform: translateX(0px);
          -moz-transform: translateX(0px);
          -ms-transform: translateX(0px);
          -o-transform: translateX(0px);
          transform: translateX(0px);
        }
      }
    }
  }
}
.tab-pd-details{
  .bd-tab{
    border-bottom: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
  }
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 30px;
  margin-bottom: 30px;
  text-align : center;
  .tab_prod{ 
    border-bottom: none;
    padding: 25px 0;
    display: flex;
    li{
      a{
        font-family: $font-primary;
        font-size: 18px;
        font-weight : 500;
        color: $color-main;
        transition: .3s;
        margin-right: 35px;
        @media(max-width: 767px){
          margin-right: 0px;
        }

      } 
    }
  }

  .product-desc{
    padding-top: 40px;
    p{
      font-family: $font-primary;
      font-size: 14px;
      font-weight: 400;
      line-height: 28px;
      color: #a8a8a8;
    }
    .info2 {
      text-align: left;
      h3{
        font-family: $font-primary;
        font-size: 32px;
        font-weight: 300;
        line-height: 45px;
      }  
      p{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #a8a8a8;
        width: 90%;
        padding-top: 10px;
        padding-bottom: 150px;
        @media(max-width: 768px){
          width: 100%;
          padding-bottom: 0px;
        }
      }
    }

    .info2{
      padding-top: 80px;
      padding-left: 105px;
      @media(max-width: 768px){
        padding-bottom: 20px;
        padding-top: 20px;
        padding-left: 20px;
      }
    }

    .des-info{
      padding-top: 80px !important;
      @media(max-width: 768px){
        padding-top: 10px !important;
      }
      h3{
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 74px;
        text-transform: uppercase;
        &:before{
          content: '';
          height: 46px;
          width: 1px;
          background: $color-main;
          position : absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      p{
        font-size: 14px;
        color: #979797;
        line-height: 24px;
        font-weight: 400;
      }
    }
  }

  .tab-addition{
    padding-top : 30px;
    text-align : left;
    .title_content{
      .more_info{
        font-family : $font-primary;
        font-size : 11px;
        font-weight : 600;
        letter-spacing : 2px;
        text-transform : uppercase;
        color : #979797;
        margin-bottom : 5px;
      }
      h3{
        font-family : $font-primary;
        font-size : 25px;
        font-weight : 500;
        color : $color-main;
        position : relative;
        padding-bottom : 15px;
        margin-bottom : 20px;
        display: inline-block;
        &:after{
          content : "";
          height : 2px;
          width : 40px;
          background : $color-main2;
          position: absolute;
          bottom : 0;
          left : 0;
        }
      }
    }
    .content1{
      .info_1{
        font-family : $font-primary;
        font-size : 16px;
        font-weight : 400;
        color : #979797;
        padding : 10px 0;
      }
      ul{
        li{
          font-family : $font-primary;
          font-size : 16px;
          font-weight : 500;
          color : #979797;
          padding : 4px 0;
        }
      }
    }
    .content2{
      .info2{
        h3{
          font-size : 18px;
          font-family : $font-primary;
          font-weight : 500;
          color : $color-main;
        }
        ul{
          li{
            a{
              font-family : $font-primary;
              font-size : 16px;
              font-weight : 500;
              color : #979797;
              padding : 4px 0;
              &:hover{
                color : $color-main2;
              }
            }
          }
        }
        ul{
          li{
            font-family : $font-primary;
            font-size : 16px;
            font-weight : 500;
            color : #979797;
            padding : 4px 0;
          }
        }
      }
    }
  }
}
.related-product{
  padding-bottom: 40px;
  .next-slide,.prev-slide{
    position: absolute;
    svg{
      width : 29px;
      height: auto;
    }
    &.slick-disabled{
      pointer-events : none;
      opacity : .5;
    }
  }
  .next-slide{
    position: absolute;
    right: 5%;
    top: 40%;
    transform: translateY(-50%);
    z-index: 1;
  }
  .prev-slide{
    position: absolute;
    left: 5%;
    top: 40%;
    transform: translateY(-50%);
    z-index: 1;
  }
  .slick-dots li{
    width : 13px;
    height : 13px;
  }
  .slick-dots{
    transform: translate(-50%);
    left: 50%;
    bottom: -11%;
    li{
      button{
        background: #c4c4c4;
        &:before{
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background-color: rgba($color-main,0);
        border: 2px solid rgba($color-main,0.3);
      }
    }
    .slick-active{
      button{
        background-color: rgba($color-main,0.7);
        border: 2px solid rgba($color-main,0);
      }
    }
  }
  .relatedProd-title{
    font-family: $font-primary;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2em;
    color:$color-main;
    text-transform: uppercase;
    display: inline-block;
    &:after{
      content: "";
      width: 100%;
      height: 4px;
      background-color: $color-main2;
      opacity: .7;
      display: block;
      margin-top: -11px;
    }
  }
}
.prod_extended, .product_sidebar{
  .detail-share-social{
    position: fixed;
    top: 30%;
    left: -32px;
    z-index:99;
    .share-product-title{
      background: $color-main;
      padding: 10px 17px;
      transform: rotate(90deg);
      svg{
        width: 18px;
        height: 18px;
        fill: #fff;
        padding-right: 8px;
      }
      label{
        font-family: $font-primary;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;            
        letter-spacing: .2em;
        margin-bottom: 0 !important;
      }
    }

    .casano-social-product{
      background: #fff none repeat scroll 0 0;
      box-shadow: 0 15px 20px rgba(0,0,0,.1);
      right: -20px;
      z-index: 2;
      top: -30px;
      opacity: 0;
      visibility: hidden; 
      -webkit-transform: translateX(-20px);
      -moz-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      -o-transform: translateX(-20px);
      transform: translateX(-20px);
      transition: all 0.5s linear 0s;
      -o-transition: all 0.5s linear 0s;
      -webkit-transition: all 0.5s linear 0s;
      a{
        color: #bcbcbc;
        font-size: 16px;
        line-height: 16px;
        padding: 8px 8px;
        display: block;
        i{
          font-size: 16px;
          color: #b1b1b1
        }
        &:hover{
          i{
            color: $color-main2;
          }
        }
      }
    }  

    &:hover{
      cursor: pointer;
      .casano-social-product{
        transform: unset;
        opacity: 1;
        visibility: visible;
      }
    }
  }
  .content-page-detail{
    padding-bottom: 68px;
    .gallery-control {
      .js_prod_sub2 .slick-slide.slick-current.slick-active img{
        border: 2px solid $color-main2;
        margin: -1px;
      }
      .js_prod_sub2 .slick-list{
        margin: 0 -5px;
      }
      .slick-track{
        margin: unset;
      }
      .slick-track .prod_sub{
        padding-right: 5px;
        padding-left: 5px;
        padding-top: 10px;
        border-radius: 3px;
      }
      .prod_sub{
        img{
          margin-bottom: 13px;
        }
      }
      .prod_sub_bottom{
        padding-top: 14px;
      }
      .btn-360{
        z-index: 1;
        svg{
          width: 30px;
          height: auto;
          fill: $color-main2;

        }
        .text_360{
          padding-left: 10px;
          font-family: $font-primary;
          color: $color-main2;
          font-size: 13px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: .1em;
        }
        position: absolute;
        bottom: 19px;
        left: 17px;
        min-width: 130px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 12px;
        letter-spacing: .2em;
        cursor: pointer;
        border: 0;
        transition: all .3s ease;
        padding: 0 15px;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
        background: #fff;
        transition: .3s;
        &:hover, &:focus{
          background: $color-main2;
          transition: .3s;
          .text_360{
            color: #fff;
          }
          svg{
            fill: #fff;
          }
        }
      }
      .btn-video{
        z-index: 1;
        svg{
          width: 30px;
          height: auto;
          fill: $color-main2;

        }
        .text_video{
          padding-left: 10px;
          font-family: $font-primary;
          color: $color-main2;
          font-size: 13px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: .1em;
        }
        position: absolute;
        bottom: 19px;
        right: 4%;
        min-width: 100px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 12px;
        letter-spacing: .2em;
        cursor: pointer;
        border: 0;
        transition: all .3s ease;
        padding: 0 15px;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
        background: #fff;
        transition: .3s;
        &:hover, &:focus{
          background: $color-main2;
          transition: .3s;
          .text_video{
            color: #fff;
          }
          svg{
            fill: #fff;
          }
        }
      }
    } 

    .detail-info{ 
      padding-left: 60px;
      @media (max-width: 767px){
        padding-top: 20px;
      }
      .product-title{
        font-family: $font-primary;
        font-size: 24px;
        font-weight: 400;
        color: $color-main;
        text-transform: capitalize;
        padding-right: 40px;
      }
      .product-price{
        display : flex;
        align-items: flex-end;
        padding-bottom: 16px;
        del{
          font-size: 16px;
          font-weight: 400;
          color: #83868c;
          margin: 0 7px;
        }
        ins{
          font-size: 20px;
          font-weight: 400;
          color: $color-main2;
          text-decoration :none;
        }
      }
      .wrap-rating{
        border-bottom: 1px solid #e7e7e7;
        padding-bottom: 24px;
      }
      .btn-action{
        margin-top : 22px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -moz-align-items: center;
        -ms-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .shop-button{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0 39px;
          height: 55px;
          font-size: 14px;
          background: $color-main2;
          letter-spacing: .2em;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: #fff;
          transition: .3s;
          text-align: center;
          &:hover{
            background: $color-main;
            transition: .3s;
          }
        }
        .shop-button-amazon{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0  40px;
          height: 55px;
          line-height : 55px;
          font-size: 12px;
          background: $color-main2;
          letter-spacing: 2.2px;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: #fff;
          transition: .3s;
          text-align: center;
          &:hover{
            background: $color-main2;
            transition: .3s;
          }
        }
        .shop-button-soldout{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0  40px;
          height: 55px;
          line-height : 55px;
          font-size: 12px;
          background: #e2e2e2;
          letter-spacing: 2.2px;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: $color-main;
          text-align: center;
        }
        .js-qty{
          display: inline-block;
          width: 90px;
          border: 2px solid $color-main;
          margin-right: 15px;
          input[type="text"]{
            width : 45px;
            border: none;
            padding: 10px 0;
            text-align: center;
            font-size: 20px;
            color: #232529;
            font-weight: 600;
            border-right: 1px solid #232529;
            border-radius : 0;
          }
          .qty_minus, .qty_plus{
            position: absolute;
            transition: .3s;
            color: $color-main;
            padding: 0;
            width: unset;
            border: 0;
            font-weight: 600;
            font-size: 14px;
            &:hover{
              color: $color-main2;
            }

          }
          .qty_plus{
            right: 0px;
            height: 50%;
            top: 0;
            width: 42px;
          }
          .qty_minus{
            right: 0px;
            bottom: 0;
            height: 50%;
            width: 42px;
            left: unset;
            top: unset;
            border-top: 1px solid $color-main;
          }
        }


      }
      .maxus-productdetail__options{
        .title_variant{
          font-size: 11px;
          font-weight: 600;
          border-bottom: 1px solid $color-main;
          padding-bottom: 4px;
          letter-spacing: .1em;
          display: inline-block;
          margin-bottom: 17px;

        }
      }
      .pd_summary{
        font-family: $font-primary;
        font-size: 14px;
        color: #a8a8a8;
        line-height: 28px;
        font-weight: 400;
        padding: 22px 0 0px 0;
      }
      .btn-addwhlist{
        a{
          display: block;
          font-size : 0;
        }
        transition: .3s;
        height: 40px;
        width : 40px;
        border: 1px solid #e9e9e9;
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        i{
          font-size: 14px;
          color: $color-main;
        }
        svg{
          width : 14px;
          height : auto;
          fill : $color-main;
        }
        &:hover{
          border: 1px solid transparent;
          background:$color-main2;
          i{
            color: #fff;
          }
          svg{
            fill : #fff;
          }
        }
      }
      .product-meta-info{
        padding-left: 0;
        li{
          list-style: none;
        }
        .product-category-info{
          margin-top: 5px;
          label{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color: $color-main;          
            padding-right: 5px;
            margin-bottom: 0 !important;
          }
          a{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color:#bfbfbf;
            text-decoration: none;
            transition: .3s;
            &:hover,  &:focus{
              color: $color-main2;
              transition: .3s;
            }
          }

        }
        .product-sku{
          margin-top: 20px;
          label{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color: $color-main;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding-right: 5px;
            margin-bottom: 0 !important;
          }
          span{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color:#bfbfbf;
          }
        }

      }
      .detail-share-social{
        position: fixed;
        top: 30%;
        left: -32px;
        z-index:99;
        .share-product-title{
          background: $color-main;
          padding: 10px 17px;
          transform: rotate(90deg);
          svg{
            width: 18px;
            height: 18px;
            fill: #fff;
            padding-right: 8px;
          }
          label{
            font-family: $font-primary;
            font-size: 11px;
            font-weight: 600;
            color: #fff;
            text-transform: uppercase;            
            letter-spacing: .2em;
            margin-bottom: 0 !important;
          }
        }

        .casano-social-product{
          background: #fff none repeat scroll 0 0;
          box-shadow: 0 15px 20px rgba(0,0,0,.1);
          right: -20px;
          z-index: 2;
          top: -45px;
          opacity: 0;
          visibility: hidden; 
          -webkit-transform: translateX(-20px);
          -moz-transform: translateX(-20px);
          -ms-transform: translateX(-20px);
          -o-transform: translateX(-20px);
          transform: translateX(-20px);
          transition: all 0.5s linear 0s;
          -o-transition: all 0.5s linear 0s;
          -webkit-transition: all 0.5s linear 0s;
          a{
            color: #bcbcbc;
            font-size: 16px;
            line-height: 16px;
            margin-top: 15px;
            padding: 0 8px;
            display: block;
            margin: 15px 0;
            i{
              font-size: 16px;
              color: #b1b1b1
            }
            &:hover{
              i{
                color: $color-main2;
              }
            }
          }
        }  

        &:hover{
          cursor: pointer;
          .casano-social-product{
            transform: unset;
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }

    .content_box {
      margin-bottom: 30px;
      border: 1px solid #eaeaea;
      padding: 25px 15px;

      align-items: center;
      -webkit-transition: border .25s linear .25s;
      -moz-transition: border .25s linear .25s;
      -ms-transition: border .25s linear .25s;
      -o-transition: border .25s linear .25s;
      transition: border .25s linear .25s;

      .content_text{
        text-align: center;
        .title{
          font-weight: 400;
          color: $color-main;
          font-size: 18px;
          font-family: $font-primary;
          position: relative;
          padding-bottom: 18px;
          margin-bottom: 22px;

          &:after{
            content: '';
            height: 1px;
            width: 42px;
            border-bottom: 1px solid;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
          }
        }
        .text{
          color: #979797;
          font-size: 14px;
          line-height: 28px;
          font-family: $font-primary;
        }
      }
      &:hover, &:focus {
        border-color: $color-main;
      }
    }

  }

  .arrows-product{
    position: relative;
    display: flex;
    padding: 20px 0 30px;
    &:before{
      content : '';
      height: 20px;
      width: 1px;
      background: #d6d6d6;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .prev_prod{
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding-right: 15px;
      position: relative;
      i{
        font-size: 12px;
        font-weight: 600;
        padding-right: 12px;
      }
      .img-prev{
        .info-prod{
          margin-left: 10px;
          a{
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
          }
          p{
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0;
            color: #83868c;
          }
        }
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #fff;
        -webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        -moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        border: 1px solid #f4f4f4;
        position: absolute;
        top: 100%;
        right: 0;
        visibility: hidden;
        opacity: 0;
        min-width: 240px;
        -webkit-transition: -webkit-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -o-transition: -o-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -moz-transition: -moz-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        transition: transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
      }

      &:hover{
        .img-prev{
          visibility: visible;
          opacity: 1;
          -webkit-transform: translateX(0px);
          -moz-transform: translateX(0px);
          -ms-transform: translateX(0px);
          -o-transform: translateX(0px);
          transform: translateX(0px);
        }
      }
    }

    .next_prod{
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding-left: 15px;
      position: relative;
      i{
        font-size: 12px;
        font-weight: 600;
        padding-left: 12px;
      }
      .img-next{
        .info-prod{
          margin-left: 10px;
          a{
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
          }
          p{
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0;
            color: #83868c;
          }
        }
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #fff;
        -webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        -moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        border: 1px solid #f4f4f4;
        position: absolute;
        top: 100%;
        right: 0;
        visibility: hidden;
        opacity: 0;
        min-width: 240px;
        -webkit-transition: -webkit-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -o-transition: -o-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -moz-transition: -moz-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        transition: transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
      }

      &:hover{
        .img-next{
          visibility: visible;
          opacity: 1;
          -webkit-transform: translateX(0px);
          -moz-transform: translateX(0px);
          -ms-transform: translateX(0px);
          -o-transform: translateX(0px);
          transform: translateX(0px);
        }
      }
    }
  }

}
.product_sidebar{
  .content-page-detail{
    .sidebar_info{
      .banner_sidebar{
        padding-bottom: 30px;
        a{
          img{
            transition: 2s;
          }
          display: block;
          position: relative;
          overflow: hidden;
          &:before,  &:after{
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            -webkit-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
            z-index: 1;
          }
          &:hover{
            img{
              transform: scale(1.05);
              transition: 2s;
            }
            &:before{
              right: 50%;
              left: 50%;
              background-color: rgba(255, 255, 255, .5);
            }
            &:after{
              top: 50%;
              bottom: 50%;
              background-color: rgba(255, 255, 255, .5);
            }
          }
        }
      }
      .widget_title{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        color: $color-main;
        text-transform: uppercase;
        border-bottom: 1px solid #e7e7e7;
        letter-spacing: .2em;
        padding-bottom: 20px;
      }
      .prod_sidebar{
        padding-left: 0;
        .product_info{
          overflow: hidden;
          list-style: none;
          border-bottom: 1px solid #f1f1f1;
          padding: 20px 0;
          position: relative;

          img{
            width: 100%;
            float: left;
            max-width: 80px;
            margin-right: 15px;
            border: 1px solid #e4e6ec;
          }
          .title-product{
            a{
              font-family: $font-primary;
              font-size: 16px;
              font-weight: 500;
              color: $color-main;   
              &:hover{
                color: $color-main2;
              }
            }

          }
          .price-product{
            .price-old {
              font-family: $font-primary;
              font-size: 12px;
              font-weight: 500;
              color: $color-main;   
            }
            .price{
              font-family: $font-primary;
              font-size: 14px;
              font-weight: 600;
              color: $color-main2; 
            }
          }
        }
      }

    }
    .detail-info{
      padding-bottom: 30px;
    }
  }
}
.prod_sticky{
  .detail-share-social{
    position: fixed;
    top: 30%;
    left: -32px;
    z-index:99;
    .share-product-title{
      background: $color-main;
      padding: 10px 17px;
      transform: rotate(90deg);
      svg{
        width: 18px;
        height: 18px;
        fill: #fff;
        padding-right: 8px;
      }
      label{
        font-family: $font-primary;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;            
        letter-spacing: .2em;
        margin-bottom: 0 !important;
      }
    }

    .casano-social-product{
      background: #fff none repeat scroll 0 0;
      box-shadow: 0 15px 20px rgba(0,0,0,.1);
      right: -20px;
      z-index: 2;
      top: -45px;
      opacity: 0;
      visibility: hidden; 
      -webkit-transform: translateX(-20px);
      -moz-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      -o-transform: translateX(-20px);
      transform: translateX(-20px);
      transition: all 0.5s linear 0s;
      -o-transition: all 0.5s linear 0s;
      -webkit-transition: all 0.5s linear 0s;
      a{
        color: #bcbcbc;
        font-size: 16px;
        line-height: 16px;
        margin-top: 15px;
        padding: 0 8px;
        display: block;
        margin: 15px 0;
        i{
          font-size: 16px;
          color: #b1b1b1
        }
        &:hover{
          i{
            color: $color-main2;
          }
        }
      }
    }  

    &:hover{
      cursor: pointer;
      .casano-social-product{
        transform: unset;
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .arrows-product{
    position: relative;
    display: flex;
    padding: 20px 0 30px;
    &:before{
      content : '';
      height: 20px;
      width: 1px;
      background: #d6d6d6;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .prev_prod{
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding-right: 15px;
      position: relative;
      i{
        font-size: 12px;
        font-weight: 600;
        padding-right: 12px;
      }
      .img-prev{
        .info-prod{
          margin-left: 10px;
          a{
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
          }
          p{
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0;
            color: #83868c;
          }
        }
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #fff;
        -webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        -moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        border: 1px solid #f4f4f4;
        position: absolute;
        top: 100%;
        right: 0;
        visibility: hidden;
        opacity: 0;
        min-width: 240px;
        -webkit-transition: -webkit-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -o-transition: -o-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -moz-transition: -moz-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        transition: transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
      }

      &:hover{
        .img-prev{
          visibility: visible;
          opacity: 1;
          -webkit-transform: translateX(0px);
          -moz-transform: translateX(0px);
          -ms-transform: translateX(0px);
          -o-transform: translateX(0px);
          transform: translateX(0px);
        }
      }
    }

    .next_prod{
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      padding-left: 15px;
      position: relative;
      i{
        font-size: 12px;
        font-weight: 600;
        padding-left: 12px;
      }
      .img-next{
        .info-prod{
          margin-left: 10px;
          a{
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
          }
          p{
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0;
            color: #83868c;
          }
        }
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #fff;
        -webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        -moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        box-shadow: 0px 3px 16px 0px rgba(0,0,0,.07);
        border: 1px solid #f4f4f4;
        position: absolute;
        top: 100%;
        right: 0;
        visibility: hidden;
        opacity: 0;
        min-width: 240px;
        -webkit-transition: -webkit-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -o-transition: -o-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -moz-transition: -moz-transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        transition: transform .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px);
      }

      &:hover{
        .img-next{
          visibility: visible;
          opacity: 1;
          -webkit-transform: translateX(0px);
          -moz-transform: translateX(0px);
          -ms-transform: translateX(0px);
          -o-transform: translateX(0px);
          transform: translateX(0px);
        }
      }
    }
  }
  .content-page-detail{

    .sticky_content{
      .detail-info{
        position: -webkit-sticky;
        position: sticky;
        top: 50px;
      }
    }
    padding-bottom: 68px;
    .gallery-control {
      .img_thumb {
        .img_item{
          margin-bottom : 50px;
          @media(max-width : 576px){
            margin-bottom : 0;
          }
        }
      }
      .prod_sub{
        img{
          margin-bottom: 13px;
        }
      }
      .prod_sub_bottom{
        padding-top: 14px;
      }
      .btn-360{
        z-index: 1;
        svg{
          width: 30px;
          height: auto;
          fill: $color-main2;

        }
        .text_360{
          padding-left: 10px;
          font-family: $font-primary;
          color: $color-main2;
          font-size: 13px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: .1em;
        }
        position: absolute;
        top : 15px;
        left: 4%;
        min-width: 130px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 12px;
        letter-spacing: .2em;
        cursor: pointer;
        border: 0;
        transition: all .3s ease;
        padding: 0 15px;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
        background: #fff;
        transition: .3s;
        &:hover, &:focus{
          background: $color-main2;
          transition: .3s;
          .text_360{
            color: #fff;
          }
          svg{
            fill: #fff;
          }
        }
      }
      .btn-video{
        z-index: 1;
        svg{
          width: 30px;
          height: auto;
          fill: $color-main2;

        }
        .text_video{
          padding-left: 10px;
          font-family: $font-primary;
          color: $color-main2;
          font-size: 13px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: .1em;
        }
        position: absolute;
        top: 15px;
        right: 4%;
        min-width: 100px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 12px;
        letter-spacing: .2em;
        cursor: pointer;
        border: 0;
        transition: all .3s ease;
        padding: 0 15px;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: center;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
        background: #fff;
        transition: .3s;
        &:hover, &:focus{
          background: $color-main2;
          transition: .3s;
          .text_video{
            color: #fff;
          }
          svg{
            fill: #fff;
          }
        }
      }
    } 

    .detail-info{ 
      padding-left: 60px;
      .product-title{
        font-family: $font-primary;
        font-size: 24px;
        font-weight: 400;
        color: $color-main;
        text-transform: capitalize;
        padding-right: 40px;
      }
      .product-price{
        display : flex;
        align-items: flex-end;
        padding-bottom: 16px;
        del{
          font-size: 16px;
          font-weight: 400;
          color: #83868c;
          margin: 0 7px;
        }
        ins{
          font-size: 20px;
          font-weight: 400;
          color: $color-main2;
          text-decoration :none;
        }
      }
      .wrap-rating{
        border-bottom: 1px solid #e7e7e7;
        padding-bottom: 24px;
      }
      .btn-action{
        margin-top : 22px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -moz-align-items: center;
        -ms-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .shop-button{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0 39px;
          height: 55px;
          font-size: 14px;
          background: $color-main2;
          letter-spacing: .2em;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: #fff;
          transition: .3s;
          text-align: center;
          &:hover{
            background: $color-main;
            transition: .3s;
          }
        }
        .shop-button-amazon{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0  40px;
          height: 55px;
          line-height : 55px;
          font-size: 12px;
          background: $color-main2;
          letter-spacing: 2.2px;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: #fff;
          transition: .3s;
          text-align: center;
          &:hover{
            background: $color-main2;
            transition: .3s;
          }
        }
        .shop-button-soldout{
          font-family: $font-primary;
          transition: all .3s ease;
          padding : 0  40px;
          height: 55px;
          line-height : 55px;
          font-size: 12px;
          background: #e2e2e2;
          letter-spacing: 2.2px;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: $color-main;
          text-align: center;
        }


        .js-qty{
          display: inline-block;
          width: 90px;
          border: 2px solid $color-main;
          margin-right: 15px;
          input[type="text"]{
            width : 45px;
            border: none;
            padding: 10px 0;
            text-align: center;
            font-size: 20px;
            color: #232529;
            font-weight: 600;
            border-right: 1px solid #232529;
            border-radius : 0;
          }
          .qty_minus, .qty_plus{
            position: absolute;
            transition: .3s;
            color: $color-main;
            padding: 0;
            width: unset;
            border: 0;
            font-weight: 600;
            font-size: 14px;
            &:hover{
              color: $color-main2;
            }

          }
          .qty_plus{
            right: 0px;
            height: 50%;
            top: 0;
            width: 42px;
          }
          .qty_minus{
            right: 0px;
            bottom: 0;
            height: 50%;
            width: 42px;
            left: unset;
            top: unset;
            border-top: 1px solid $color-main;
          }
        }

      }
      .maxus-productdetail__options{
        .title_variant{
          font-size: 11px;
          font-weight: 600;
          border-bottom: 1px solid $color-main;
          padding-bottom: 4px;
          letter-spacing: .1em;
          display: inline-block;
          margin-bottom: 17px;

        }
      }
      .pd_summary{
        font-family: $font-primary;
        font-size: 14px;
        color: #a8a8a8;
        line-height: 28px;
        font-weight: 400;
        padding: 22px 0 0px 0;
      }
      .btn-addwhlist{
        a{
          display: block;
          font-size : 0;
        }
        transition: .3s;
        height: 40px;
        width : 40px;
        border: 1px solid #e9e9e9;
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        svg{
          width : 14px;
          height : auto;
          fill : $color-main;
        }
        i{
          font-size: 14px;
          color: $color-main;
        }
        &:hover{
          border: 1px solid transparent;
          background:$color-main2;
          i{
            color: #fff;
          }
          svg{
            fill : #fff;
          }
        }
      }
      .product-meta-info{
        padding-left: 0;
        li{
          list-style: none;
        }
        .product-category-info{
          margin-top: 5px;
          label{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color: $color-main;          
            padding-right: 5px;
            margin-bottom: 0 !important;
          }
          a{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color:#bfbfbf;
            text-decoration: none;
            transition: .3s;
            &:hover,  &:focus{
              color: $color-main2;
              transition: .3s;
            }
          }

        }
        .product-sku{
          margin-top: 20px;
          label{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color: $color-main;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding-right: 5px;
            margin-bottom: 0 !important;
          }
          span{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color:#bfbfbf;
          }
        }

      }
      .detail-share-social{
        position: fixed;
        top: 30%;
        left: -32px;
        z-index:99;
        .share-product-title{
          background: $color-main;
          padding: 10px 17px;
          transform: rotate(90deg);
          svg{
            width: 18px;
            height: 18px;
            fill: #fff;
            padding-right: 8px;
          }
          label{
            font-family: $font-primary;
            font-size: 11px;
            font-weight: 600;
            color: #fff;
            text-transform: uppercase;            
            letter-spacing: .2em;
            margin-bottom: 0 !important;
          }
        }

        .casano-social-product{
          background: #fff none repeat scroll 0 0;
          box-shadow: 0 15px 20px rgba(0,0,0,.1);
          right: -20px;
          z-index: 2;
          top: -45px;
          opacity: 0;
          visibility: hidden; 
          -webkit-transform: translateX(-20px);
          -moz-transform: translateX(-20px);
          -ms-transform: translateX(-20px);
          -o-transform: translateX(-20px);
          transform: translateX(-20px);
          transition: all 0.5s linear 0s;
          -o-transition: all 0.5s linear 0s;
          -webkit-transition: all 0.5s linear 0s;
          a{
            color: #bcbcbc;
            font-size: 16px;
            line-height: 16px;
            margin-top: 15px;
            padding: 0 8px;
            display: block;
            margin: 15px 0;
            i{
              font-size: 16px;
              color: #b1b1b1
            }
            &:hover{
              i{
                color: $color-main2;
              }
            }
          }
        }  

        &:hover{
          cursor: pointer;
          .casano-social-product{
            transform: unset;
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }

    .content_box {
      margin-bottom: 30px;
      border: 2px solid #dbdbdb;
      padding: 25px 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-transition: border .25s linear .25s;
      -moz-transition: border .25s linear .25s;
      -ms-transition: border .25s linear .25s;
      -o-transition: border .25s linear .25s;
      transition: border .25s linear .25s;
      .icon{
        margin-right: 20px;
      }
      .content_text{
        .title{
          font-weight: 600;
          color: $color-main;
          letter-spacing: .2em;
          font-size: 14px;
          text-transform: uppercase;
          font-family: $font-primary;
        }
        .text{
          color: #a8a8a8;
          font-size: 14px;
          ffont-family: $font-primary;
        }
      }
      &:hover, &:focus {
        border-color: $color-main;
      }
    }

  }
}
.prod_sticky.sticky_center{
  .content-page-detail{
    .next-slide,.prev-slide{
      position: absolute;
      height : 40px;
      width : 40px;
      border-radius : 50%;
      line-height : 40px;
      background : #fff;
      -webkit-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
      -moz-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
      box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
      font-size: 0;
      text-align: center;
      svg{
        width : 20px;
        height: auto;
      }
      &:hover{
        background : $color-main2;
        svg{
          fill : #fff;
        }
      }
      &.slick-disabled {
        pointer-events: none;
        color: gray;
        opacity: .4;
      }
    }
    .next-slide{
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
    .prev-slide{
      position: absolute;
      left: 5%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
    .slick-dots{
      transform: translate(-50%);
      left: 50%;
      bottom: 50px;
      li{
        button{
          background: #c4c4c4;
          &:before{
            opacity: 0;
          }
          font-size: unset;
          line-height: 20px;
          position: absolute;
          top: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }
      }
      .slick-active{
        button{
          background-color: $color-main;
        }
      }
    }
    .sticky_content{
      .detail-info{
        padding-left : 0;
      }
    }
  }

}
.prod_sticky.slide_gallery{
  .content-page-detail{
    .next-slide,.prev-slide{
      position: absolute;
      height : 40px;
      width : 40px;
      border-radius : 50%;
      line-height : 40px;
      background : #fff;
      -webkit-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
      -moz-box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
      box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.08);
      font-size: 0;
      text-align: center;
      svg{
        width : 20px;
        height: auto;
      }
      &:hover{
        background : $color-main2;
        svg{
          fill : #fff;
        }
      }
      &.slick-disabled {
        pointer-events: none;
        color: gray;
        opacity: .4;
      }
    }
    .next-slide{
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
    .prev-slide{
      position: absolute;
      left: 5%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
    .slick-dots{
      transform: translate(-50%);
      left: 50%;
      bottom: 50px;
      li{
        button{
          background: #c4c4c4;
          &:before{
            opacity: 0;
          }
          font-size: unset;
          line-height: 20px;
          position: absolute;
          top: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }
      }
      .slick-active{
        button{
          background-color: $color-main;  
        }
      }
    }
    .sticky_content{
      .detail-info{
        padding-left : 0;
      }
    }
    .detail-info{
      .product-title{
        font-size: 30px;
        font-weight: 500;
      }
      .product-price{
        ins{
          font-size : 24px;
        }
      }
      .pd_summary{
        font-size : 15px;
      }
    }
  }

}
.breadcrumb_collection{
  .bg-breadcrumb{
    background-size: cover;
    background-position: center;
    padding: 140px 0 140px;
    .title-page{
      h2{
        font-family: $font-primary;
        font-size: 40px;
        font-weight: 400;
        color: #010101;
        position: relative;

      }
    }
    .bread-crumb{
      padding: 0px 0 40px 0;
      a{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 400;
        i{
          padding: 0 10px;
        }
        color:#878787;
        &:hover{
          color: $color-main2;
        }
      }
      strong{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 500;
        color:$color-main;
      }
    }
    .list_col{
      .banner_cate{
        .col_item{
          .img_banner{
            img{
              max-width: 110px;
              max-height: 110px;
              border-radius: 50%;
              margin: 0 auto;
            }
          }
          .banner_title{
            margin-top: 15px;
            a{
              font-size: 13px;
              font-weight : 600;
              letter-spacing: .2em;
              text-transform: uppercase;
            }
          }
          &:hover, &.active{
            .img_banner{
              img{
                border: 3px solid $color-main2;
              }
            }
            .banner_title{
              a{
                color: $color-main2;
              }
            }
          }
        }
        &:hover{
          .prev-slide{
            left: 0px;
            visibility: visible;
            opacity: 1;
          }
          .next-slide{
            right: 0px;
            visibility: visible;
            opacity: 1;
          }
        }
      }
    }
    .prev-slide ,
    .next-slide{
      height: 29px;
      width: 29px;
      border-radius:  50%;
      background: #fff;
      line-height: 29px;
      text-align:  center;
      position: absolute; 
      z-index:1;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      transition: all .5s ease;
      color: $color-main;
      &:hover{
        background: $color-main2;
        color:#fff;
      }
    } 
    .prev-slide{
      left: -15px;
      top: 25%;
      visibility: hidden;
      opacity: 0;
    }
    .next-slide{
      right: -15px;
      top: 25%;
      visibility: hidden;    
      opacity: 0;
    }
  }
}
.breadcrumb_collection.style1{
  .bg_bread{
    padding-top : 30px;
    .title-page{
      h2{
        font-size : 40px;
        font-weight : 500;
        letter-spacing : 2px;
      }
    }
  }
  .bread-crumb{
    text-align : center;
  }
}
.breadcrumb_collection.style2,.breadcrumb_collection.style3,.breadcrumb_collection.style4,.breadcrumb_collection.style5{
  .bg-breadcrumb{
    .title-page{
      h2{
        font-size : 40px;
        font-weight : 500;
        letter-spacing : 2px;
      }
    }
  }
}
.wrap-bread-crumb{
  .bread-crumb{
    padding: 6px 0 30px 0;
    a{
      font-family: $font-primary;
      font-size: 14px;
      font-weight: 400;
      i{
        padding: 0 10px;
        color:#878787;
      }
      color:$color-main;
      &:hover{
        color: $color-main2;
      }
    }
    strong{
      font-family: $font-primary;
      font-size: 14px;
      font-weight: 500;

      color:#878787;
    }
  }
}
.list-collection{
  padding : 20px 0;
  .prev-slide ,.next-slide{
    position : absolute;
    font-size: 20px;
    color : $color-main;
    top : 50%;
    transform  : translateY(-50%);
    z-index : 1;
  }
  .prev-slide {
    left : 0;
  }
  .next-slide {
    right : 0;
  } 
  ul{
    padding-left: 0;
    .title-collection{ 
      text-align: center;
      a{
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .2em;
        color: $color-main;
        text-transform: uppercase;
        display: inline-block;
        &:after{
          content: "";
          width: 0;
          height: 4px;
          background-color: $color-main2;
          opacity: .7;
          display: block;
          transition: width .4s linear 0s;
          -webkit-transition: width .4s linear 0s;
          -o-transition: width .4s linear 0s;
        }
        &:hover{
          &:after {
            width: 100%;
          }
        }
      }
      &.active{
        a{
          &:after{
            width : 100%;
          }

        }
      }
    }
  }
}
.breadcrumb_collection2{
  .bg-breadcrumb{
    background-size: cover;
    background-position: center;
    padding: 150px 0 130px;
    .title-page{
      h2{
        font-family: $font-primary;
        font-size: 46px;
        font-weight: 400;
        color: #010101;
        position: relative;

      }
    }
    .bread-crumb{
      a{
        color: $color-main;
        &:hover{
          color: $color-main2;
        }
      }
      strong{
        color: $color-main;
      }
    }
  }
}
.collection-page-fullwidth,.collection-page-sidebar{
  .collection_prod{
    margin-top: 30px;
  }
  .pagi-nav {
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    span{
      width: 42px;
      height: 42px;
      border: 1px solid #e3e3e3;
      line-height: 42px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      font-weight: 400;
      margin-right: 9px;
      -webkit-transition: background-color .3s ease-in-out;
      -moz-transition: background-color .3s ease-in-out;
      -ms-transition: background-color .3s ease-in-out;
      -o-transition: background-color .3s ease-in-out;
      transition: background-color .3s ease-in-out;
      a{
        display: block;
        color: #868686;
        i{
          font-size: 22px;
        }
      }
      &:hover{
        background: $color-main;
        a{
          color: #fff;
        }
      }
    }
    .current{
      background: $color-main;
      color: #fff;
    }
  }
  .filter-to-left{
    z-index: 99;
    width: 415px;
    left: -415px;
    position:fixed;
    top: 0;
    height: 100%;
    transition: .5s;
    background:#fff;
    &.active{
      left: 0;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .filter_sidebar{
      padding: 48px;
      height: 100%;
      overflow-y: auto;
      position: relative;
      .close_filter{
        display: flex;
        align-items: center;
        cursor:pointer;
        position: absolute;
        right: 40px;
        top: 16px;
        font-family: $font-primary;
        font-size: 10px;
        font-weight: 600;
        color: $color-main;
        text-transform: uppercase;
        letter-spacing: .2em;
        i{
          font-size: 16px;
          display: inline-block;
          height: 36px;
          width: 36px;
          border: 1px solid #d6d6d6;
          border-radius: 50%;
          line-height: 36px;
          text-align: center;
          margin-left: 15px;
        }
      }
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-track  {
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb  {
        background-color: #c1c1c1;
        border-radius: 6px;
        opacity: .8;
      }

      .widget-title{
        h2{
          font-family: $font-primary;
          font-size: 13px;
          font-weight: 600;
          letter-spacing: .2em;
          text-transform: uppercase;
          background: #fff;
          position: relative;
          overflow: hidden;
          display: inline-block;
          padding-right: 15px;
        }
        padding: 6px 0 6px 14px;
        border-left: 3px solid $color-main;
        position: relative;
        &:after{
          content: "";
          border-bottom: 1px solid #e6e6e6;
          width: 100%;
          position: absolute;
          top: 50%;
        }
      }
      .filter-category{
        padding-top: 25px;
        .widget-content{
          padding-top: 20px;
          .list-category-toggle{
            padding-left: 0;
            li{
              list-style: none;
              a{
                line-height: 34px;
                display: inline-block;
                font-family: $font-primary;
                font-size: 16px;
                font-weight: 400;
                color: $color-main;
                &:hover{
                  color: $color-main2;
                  i{
                    color: $color-main2;
                  }
                }
              }
            }
          }
        }
      }
      .filter-color{
        padding-top: 15px;
        .list_color{
          padding-left: 0;
          padding-top: 30px;
          li{
            list-style: none;
            display: inline-block;
            padding-right: 10px;
            a{
              display: block;
              width: 26px;
              height: 26px;
              border-radius: 50%;
              position: relative;
              border: 1px solid #ccc;
              &:before{
                content: "";
                border: 1px solid #ccc;
                width: 34px;
                height: 34px;
                position: absolute;
                border-radius: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                top: 50%;
                transition: all 0.3s ease;
                opacity: 0;
              }
              &.active{
                &:before{             
                  border: 1px solid $color-main;
                  opacity: 1;
                }
              }
              &:hover{
                &:before{             
                  border: 1px solid $color-main;
                  opacity: 1;
                }
              }
            }
          }
        }
      }
      .filter-size{
        padding-top: 10px;
        .list-size{
          padding-left: 0;
          padding-top: 30px;
          li{
            list-style: none;
            display: inline-block;
            a{
              display: inline-block;
              min-width: 38px !important;
              height: 38px !important;
              line-height: 37px;
              border: 1px solid $color-main !important;
              color: #232529;
              margin: 0 10px 10px 0 !important;
              text-align: center;
              transition: all .3s ease;
              font-size: 14px;
              font-weight: 600;
              font-family: $font-primary;
              padding: 0 6px;
              &:hover{
                border: 1px solid #232529 !important;
                color: #fff;
                background: #232529;
              }
              &.active{
                border: 1px solid #232529 !important;
                color: #fff;
                background: #232529;
              }
            }
          }
        }
      }
      .filter-price {
        padding-top: 5px;
        .list-price{
          padding-top: 30px;
          padding-left: 0;
          li{
            list-style: none;
            a{
              font-family: $font-primary;
              font-size: 14px;
              font-weight: 400;
              letter-spacing: .1em;
              color: $color-main;
              &:hover, &.active{
                color: $color-main2;
              }
            }
          }
        }
      }
      .widget-tags{
        padding-top: 21px;
        .list-tag{
          padding-left: 0;
          padding-top: 30px;
          li{
            list-style: none;
            display: inline-block;
            a{
              display: inline-block;
              min-width: 44px !important;
              height: 44px !important;
              line-height: 41px;
              border: 1px solid #b0b0b0 !important;
              color: #868686;
              margin: 0 10px 10px 0 !important;
              text-align: center;
              transition: all .3s ease;
              font-size: 14px;
              font-weight: 400;
              padding: 0 22px;
              font-family: $font-primary;
              &:hover{
                border: 1px solid $color-main !important;
                color: #fff;
                background: $color-main;
              }
              &.active{
                border: 1px solid $color-main !important;
                color: #fff;
                background: $color-main;
              }
            }
          }
        }
      }
      .filter-brand{
        padding-top: 25px;
        .list-brand{
          padding-top: 15px;
          padding-left: 0;
          li{
            list-style: none;
            a{
              font-family: $font-primary;
              font-size: 16px;
              font-weight: 400;
              color: $color-main;
              line-height: 28px;
              i{
                color: #d4d4d4;
                font-size: 16px;
                padding-right :14px;  
              }
              &:hover{
                color: $color-main2;
                &:before{
                  color: $color-main2;
                }
              }
              &:before{
                content: "\f105";
                font-family:'FontAwesome' ;
                color: #d4d4d4;
                font-size: 16px;
                padding-right :14px;  

              }
            }
          }
        }
      }
    }
  }
  .content-page{
    .banner_full{
      margin-top: 40px;
      .banner_info{
        position: relative;
        overflow: hidden;
        img{
          transition: .5s ease;
        }
        &:before, &:after{
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          -webkit-transition: all 0.4s ease;
          -moz-transition: all 0.4s ease;
          -o-transition: all 0.4s ease;
          transition: all 0.4s ease;
          z-index: 1;
        }
        &:hover{
          img{
            transform : scale(1.1);
            transition: .5s ease;
          }
          &:before{
            right: 50%;
            left: 50%;
            background-color: rgba(255,255,255,0.5);
          }
          &:after{
            top: 50%;
            bottom: 50%;
            background-color: rgba(255,255,255,0.5);
          }
        }
        .info{
          position: absolute;
          top: 50%;
          transform: translate(-50%,-50%);
          left: 50%;
          text-align: center;
          .big_title{
            font-size: 40px;
            color: $color-main;
            font-weight: 500;
            font-family: $font-primary;
            letter-spacing: 2px;
          }
          .mini_title{
            margin-top: 5px;
            font-size: 16px;
            color: $color-main;
            font-weight: 500;
            font-family: $font-primary;
            letter-spacing: .1em;
          }
          .btn_shop{
            margin-top: 25px;
            display: inline-flex;
            text-align: center;
            justify-content: center;
            padding : 10px 12px;
            font-size: 14px;
            color: $color-main;
            font-weight: 600;
            font-family: $font-primary;
            border: 2px solid $color-main;
            text-transform: uppercase;
            transition: 0.3s;
            &:hover{
              transition: 0.3s;
              color: #fff; 
              background : $color-main2;
              border: 2px solid $color-main2;
            }
          }
        }
      }
    }
    .banner_cate{
      margin: 40px 0 50px 0;
      .next-slide,.prev-slide{
        position: absolute;
        svg{
          width : 29px;
          height: auto;
        }
      }
      .next-slide{
        position: absolute;
        right: 5%;
        top: 40%;
        transform: translateY(-50%);
        z-index: 1;
      }
      .prev-slide{
        position: absolute;
        left: 5%;
        top: 40%;
        transform: translateY(-50%);
        z-index: 1;
      }
      .slick-dots{
        transform: translate(-50%);
        left: 50%;
        bottom: -11%;
        li{
          button{
            background: #c4c4c4;
            &:before{
              opacity: 0;
            }
            font-size: unset;
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
          }
        }
        .slick-active{
          button{
            background-color: $color-main;
          }
        }
      }
      .img_banner{
        position: relative;
        overflow: hidden;
        img{
          transform: scale(1.05);
          transition: 1s;
        }
        &:hover{

          &:before, &:after{
            opacity: 1;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
          }
          img{
            transform: none;
            filter: blur(1px);
            transition: 1s;
          }
        }
        &:before, &:after{
          position: absolute;
          top: 20px;
          right: 20px;
          bottom: 20px;
          left: 20px;
          content: '';
          opacity: 0;
          z-index: 1;
          -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
          transition: opacity 0.35s, -webkit-transform 0.35s;
          -o-transition: opacity 0.35s, transform 0.35s;
          transition: opacity 0.35s, transform 0.35s;
          transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
        }
        &:before{
          border-top: 1px solid #fff;
          border-bottom: 1px solid #fff;
          -webkit-transform: scale(0, 1);
          -ms-transform: scale(0, 1);
          transform: scale(0, 1);
        }
        &:after{
          border-right: 1px solid #fff;
          border-left: 1px solid #fff;
          -webkit-transform: scale(1, 0);
          -ms-transform: scale(1, 0);
          transform: scale(1, 0);
        }
      }
      .banner_title{
        padding: 30px 0;
        a{
          color: $color-main;
          font-weight: 500;
          font-size: 14px;
          text-transform: uppercase;
          letter-spacing: .1em;
          font-family: $font-primary;
          &:hover{
            color: $color-main2;
          }
        }
      }
    }
    .cate-info{
      .next-slide,.prev-slide{
        position: absolute;
        svg{
          width : 29px;
          height: auto;
        }
      }
      .next-slide{
        position: absolute;
        right: 5%;
        top: 40%;
        transform: translateY(-50%);
        z-index: 1;
      }
      .prev-slide{
        position: absolute;
        left: 5%;
        top: 40%;
        transform: translateY(-50%);
        z-index: 1;
      }
      .slick-dots{
        transform: translate(-50%);
        left: 50%;
        bottom: -11%;
        li{
          button{
            background: #c4c4c4;
            &:before{
              opacity: 0;
            }
            font-size: unset;
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
          }
        }
        .slick-active{
          button{
            background-color: $color-main;
          }
        }
      }
      .title_collection{
        margin: 45px 0;
        h3{
          font-size: 24px;
          font-weight: 500;
          color: $color-main;
          font-family: $font-primary;
        }
      }
      .btn_show_all{
        align-items: center;
        margin: 45px 0;
        a{
          font-size: 14px;
          font-weight: 600;
          color: $color-main;
          font-family: $font-primary;
          i{
            font-weight: 600;
            padding-left: 10px;
          }
          &:hover{
            color: $color-main2;
            i{
              color: $color-main2;  
            }
          }
        }
      }
    }

    .title-cate{
      padding-top: 70px;
      h2{
        font-size: 24px;
        font-weight: 500;
        color: $color-main;
        font-family: $font-primary;
      }
    }
    .shop_control{
      padding: 50px 0 20px;
      .filter_sortby{
        .filter{
          border : 1px solid $color-main;
          padding : 8px 20px;
          align-items : center;
          svg{
            width : 18px;
            height : 18px;
            fill : $color-main;
          }
          p{
            font-size: 16px;
            font-family: $font-primary;
            text-transform: uppercase;
            font-weight: 600;
            color: $color-main;
            letter-spacing: 2px;
            margin-left : 8px;
          }
          &:hover, &:focus{
            background : $color-main2;
            border : 1px solid $color-main2;
            p{
              color : #fff
            }
            svg{
              fill : #fff;
            }
          }
        }
        .sort-pagi-bar{ 
          padding-left: 0px;
          margin-bottom: 0;
          li{list-style:none;}
          .sort-by{
            .select-box {
              .orderby{
                border: 1px solid $color-main;
                color: $color-main;
                font-family: $font-primary;
                font-size: 15px;
                font-weight: 500;
              }
            }
          }
        }
      }

      .list-collection{
        padding-left: 0;
        text-align: center;
        align-items: center;
        justify-content: center;
        li{
          display: inline-block;
          text-align: center;
          list-style: none;
          a{
            border-bottom: 1px solid transparent;
            font-size: 18px;
            font-family: $font-primary;
            font-weight: 600;
            position: relative;
            color: #a4a4a4;
            padding: 0;
            line-height: 40px;
            display: inline-block;
            &:hover{
              border-bottom: 1px solid $color-main;
              color: $color-main;
            }
          }

        }
      }

      .style_layout_prod{
        display: flex;
        .sort-pagi-bar{ 
          padding-left: 0px;
          margin-bottom: 0;
          li{list-style:none;}
          .sort-by{
            .select-box {
              position: relative;
              select {
                -moz-appearance: none;
                -webkit-appearance:none;
                appearance: none;
              }
              select::-ms-expand {
                display: none;
              }
              .orderby{
                color: $color-main;
                border: 1px solid $color-main;
                font-size: 15px;
                font-family:$font-primary;
                font-weight: 500;
                height: 42px;
                min-width: 165px !important;
                background: transparent;
                padding-left: 15px;
                border-radius : 0;
              }
              &:after {
                content: "\f107";
                font-family: 'FontAwesome';
                position: absolute;
                right: 15px;
                font-size: 16px;
                top: 8px;
                z-index: 1;
                color: $color-main;
              }    
            }
          }


        }
      }
      .change_prod{
        display : flex;
        justify-content : flex-end;
        @media(max-width : 576px ){
          justify-content : center;
        }
        .change_collum{
          @media(max-width : 992px){
            display : none;
          }
          position : relative;
          .icon_change{
            width: 42px;
            height: 42px;
            line-height: 42px;
            border: 1px solid #232529;
            display: inline-block;
            text-align: center;
            font-weight: 700;
            color: #232529;
            margin-right : 10px;
            svg{
              width : 22px;
              height : 22px;
              fill : $color-main;
            }
          }
          .prod_per{
            display: flex;
            justify-content: flex-end;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            right: 100%;
            top : 0;
            width: 0;
            overflow: hidden;
            transition: width .3s ease-in-out,opacity .3s ease-in-out,visibility .3s ease-in-out;
            a{
              width: 42px;
              height: 42px;
              line-height: 40px;
              border: 1px solid #232529;
              display: inline-block;
              text-align: center;
              font-weight: 600;
              color: #232529;
              margin-right : 5px;
              &:hover, &.active{
                color : #fff;
                background : $color-main;
                border-color : $color-main;
              }
            }
          }

          &:hover{
            .prod_per{
              visibility: visible;
              opacity: 1;
              width: 190px;
            }
          }
        }
      }
    }

    .col-lg-2{
      .product-icon-action{
        padding: 4px 0;
        .add-to-cart{
          svg{
            width: 19px;
            height: auto;
          }
        }
        .add-wishlist,.quick-view{
          i{
            font-size: 15px;
          }
        }
      }
    }
  }
}
.collection-page-fullwidth.collection-bg-modern{
  padding-bottom: 65px;
  background-size: cover;
  background-position : center;
  &.absolute-top{
    @media(min-width : 992px){
      padding-top : 1px;
      .content-page{
        margin-top: -190px;
      }
    }
  }

  .content-page{
    background : #fff;
    padding: 45px 55px;
    @media(max-width : 991px){
      padding: 45px 15px;
    }
    @media(min-width : 992px) and (max-width : 1300px){
      padding : 45px 15px;
    }
    @media(min-width : 1301px) and (max-width : 1500px){
      padding : 45px 25px;
    }
    .prev-slide ,
    .next-slide{
      height: 29px;
      width: 29px;
      border-radius:  50%;
      background: #fff;
      line-height: 29px;
      text-align:  center;
      position: absolute; 
      z-index:1;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      transition: all .5s ease;
      color: $color-main;
      &:hover{
        background: $color-main2;
        color:#fff;
      }
    } 
    .prev-slide{
      left: -15px;
      top: 25%;
      visibility: hidden;
      opacity: 0;
    }
    .next-slide{
      right: -15px;
      top: 25%;
      visibility: hidden;    
      opacity: 0;
    }
    .list_col{
      .cate_collection{
        .col_item{
          .img_coll{
            img{
              max-width: 110px;
              max-height: 110px;
              border-radius: 50%;
              margin: 0 auto;
            }
          }
          .title_coll{
            margin-top: 15px;
            a{
              font-size: 13px;
              font-weight : 600;
              letter-spacing: 1px;
              text-transform: uppercase;
              &:hover{
                color : $color-main2;
              }
            }
          }
          &:hover, &.active{
            .img_coll{
              img{
                border: 3px solid $color-main2;
                transition : .3s;
              }
            }
            .banner_title{
              a{
                color: $color-main2;
              }
            }
          }
        }
        &:hover{
          .prev-slide{
            left: 0px;
            visibility: visible;
            opacity: 1;
          }
          .next-slide{
            right: 0px;
            visibility: visible;
            opacity: 1;
          }
        }
      }
    }
  }
}
.collection-page-sidebar{
  .banner_sidebar{
    padding: 30px 0;
    a{
      img{
        transition: 2s;
      }
      display: block;
      position: relative;
      overflow: hidden;
      &:before,  &:after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        z-index: 1;
      }
      &:hover{
        img{
          transform: scale(1.05);
          transition: 2s;
        }
        &:before{
          right: 50%;
          left: 50%;
          background-color: rgba(255, 255, 255, .5);
        }
        &:after{
          top: 50%;
          bottom: 50%;
          background-color: rgba(255, 255, 255, .5);
        }
      }
    }
  }
}
.draw_filter{
  flex: 0;
  max-width: 0;
  padding: 0;
  transition: .3s;
  height: 0;
  .filter_sidebar_general {
    height : 0;
    width : 0;
  }
}
.trans_product{
  transition: all .3s ease; 
}
.filter_sidebar_general{ 
  &.sticky{
    position : sticky;
    top : 80px;
  }
  margin-top: 25px;
  padding: 0px 0px;
  padding-left: 6px;
  overflow: hidden;
  position: relative;
  .widget-title{
    h2{
      font-family: $font-primary;
      font-size: 18px;
      font-weight: 500;
      text-transform: capitalize;
      background: #fff;
      position: relative;
      display: inline-block;
      padding-right: 15px;
    }
    padding: 6px 0 6px 14px;
    border-left: 3px solid $color-main;
    position: relative;
    &:after{
      content: "";
      border-bottom: 1px solid #e6e6e6;
      width: 100%;
      position: absolute;
      top: 50%;
    }
  }
  .filter-category{
    padding-top: 25px;

    .widget-content{
      padding-top: 20px;
      .list-category-toggle{
        padding-left: 0;
        li{
          list-style: none;
          a{
            line-height: 36px;
            display: inline-block;
            font-family: $font-primary;
            font-size: 15px;
            font-weight: 400;
            color: $color-main;
            text-transform: capitalize;
            i{
              font-size: 10px;
              color: #83868c;
            }
            &:hover{
              color: $color-main2;
              i{
                color: $color-main2;
              }
            }
          }
        }
        .menu_lv2{
          padding-left: 20px;
          .item_menu_lv2{
            a{
              line-height: 36px;
              display: inline-block;
              font-family: $font-primary;
              font-size: 14px;
              font-weight: 400;
              color: $color-main;
              text-transform: capitalize;
              &:hover{
                color: $color-main2;
              }
            }
          }
        }
      }
    }
  }
  .filter-color{
    padding-top: 15px;
    .list_color{
      padding-left: 0;
      padding-top: 30px;
      li{
        list-style: none;
        display: inline-block;
        padding: 5px;
        a{
          display: block;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          position: relative;
          border: 1px solid #ccc;
          &:before{
            content: "";
            border: 1px solid #ccc;
            width: 34px;
            height: 34px;
            position: absolute;
            border-radius: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            top: 50%;
            transition: all 0.3s ease;
            opacity: 0;
          }
          &.active{
            &:before{             
              border: 1px solid $color-main;
              opacity: 1;
            }
          }
          &:hover{
            &:before{             
              border: 1px solid $color-main;
              opacity: 1;
            }
          }
        }
      }
    }
  }

  .filter-size{
    padding-top: 10px;

    .list-size{
      padding-left: 0;
      padding-top: 30px;
      li{
        list-style: none;
        display: inline-block;
        a{
          display: inline-block;
          border: 1px solid $color-main !important;
          color: $color-main;
          padding : 8px 12px;
          margin: 0 10px 10px 0 !important;
          text-align: center;
          transition: all .3s ease;
          font-size: 14px;
          font-weight: 600;
          font-family: $font-primary;
          &:hover{
            border: 1px solid $color-main2 !important;
            color: #fff;
            background: $color-main2;
          }
          &.active{
            border: 1px solid $color-main2 !important;
            color: #fff;
            background: $color-main2;;
          }
        }
      }
    }
  }

  .filter-price {
    padding-top: 5px;


    .list-price{
      padding-top: 25px;
      padding-left: 0;
      li{
        list-style: none;
        a{
          font-family: $font-primary;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: .1em;
          color: $color-main;
          line-height: 34px;
          &:hover, &.active{
            color: $color-main2;
          }
        }
      }
    }
  }

  .widget-tags{
    padding-top: 21px;

    .list-tag{
      padding-left: 0;
      padding-top: 30px;
      li{
        list-style: none;
        display: inline-block;
        a{
          display: inline-block;
          border: 1px solid $color-main !important;
          color: $color-main;
          margin: 0 10px 10px 0 !important;
          text-align: center;
          padding : 10px;
          transition: all .3s ease;
          font-size: 14px;
          font-weight: 400;
          font-family: $font-primary;
          &:hover{
            border: 1px solid $color-main2 !important;
            color: #fff;
            background: $color-main2;
          }
          &.active{
            border: 1px solid $color-main2 !important;
            color: #fff;
            background: $color-main2;
          }
        }
      }
    }
  }

  .filter-brand{
    padding-top: 25px;


    .list-brand{
      padding-top: 15px;
      padding-left: 0;
      li{
        list-style: none;
        a{
          font-family: $font-primary;
          font-size: 16px;
          font-weight: 400;
          color: $color-main;
          line-height: 28px;
          i{
            color: #d4d4d4;
            font-size: 16px;
            padding-right :14px;  
          }
          &:hover{
            color: $color-main2;
            &:before{
              color: $color-main2;
            }
          }
          &:before{
            content: "\f105";
            font-family:'FontAwesome' ;
            color: #d4d4d4;
            font-size: 16px;
            padding-right :14px;  

          }
        }
      }
    }
  }

}
.filter_ver2{
  border: 1px solid #e6e6e6;
  &.show{
    display: block !important;
  }
  .filter_sidebar2{
    margin-top: 0;
    padding: 30px;
    @media(max-width : 576px){
      padding : 15px;
    }
    .widget-title{
      h2{
        font-family: $font-primary;
        font-size: 18px;
        font-weight: 500;
        padding-bottom: 10px;
        position: relative;
        margin-bottom: 20px !important;
        &:before{
          content : "";
          position: absolute;
          height: 1px;
          width: 55px;
          background: $color-main2;
          bottom: 0;         
        }
      }
    }
    .filter-category{
      padding-top: 0px;

      .widget-content{
        .list-category-toggle{
          padding-left: 0px;
          li{
            list-style: none;
            padding-bottom: 5px;
            a{
              font-family: $font-primary;
              font-size: 15px;
              font-weight: 400;
              line-height : 1.4;
              padding: 0;
              color: $color-main;
              position: relative;
              i{
                font-size: 10px;
                color: #83868c;
              }
              &:hover{
                color: $color-main2;
                i{
                  color: $color-main2;
                }
              }
            }
          }

          .menu_lv2{
            padding-left: 20px;
            .item_menu_lv2{
              a{
                line-height: 36px;
                display: inline-block;
                font-family: $font-primary;
                font-size: 14px;
                font-weight: 400;
                color: $color-main;
                text-transform: capitalize;
                &:hover{
                  color: $color-main2;

                }
              }
            }
          }
        }
      }
    }
    .filter-color{
      padding-top: 0px;
      .list_color{
        padding-left: 0;
        li{
          padding-bottom: 10px;
          input{
            opacity: 0;
            position: absolute;
            z-index: -1;
          }
          list-style: none;
          display: inline-block;
          padding-right: 10px;
          a{
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: relative;
            border: 1px solid #ccc;
            &:before{
              content: "";
              border: 1px solid #ccc;
              width: 28px;
              height: 28px;
              position: absolute;
              border-radius: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              top: 50%;
              transition: all 0.3s ease;
              opacity: 0;

            }
            &.active{
              &:before{             
                border: 1px solid $color-main;
                opacity: 1;
              }
            }
            &:hover{
              &:before{             
                border: 1px solid $color-main;
                opacity: 1;
              }
            }
          }
        }
      }
    }

    .filter-size{
      padding-top: 0px;
      .list-size{
        padding-left: 0;
        li{
          padding-bottom: 7px;
          padding-right : 5px;
          input{
            opacity: 0;
            position: absolute;
            z-index: -1;
          }
          list-style: none;
          display: inline-block;
          a{
            display: inline-block;
            padding : 8px 12px;
            border: 1px solid $color-main !important;
            color: $color-main;
            text-align: center;
            transition: all .3s ease;
            font-size: 14px;
            font-weight: 600;
            font-family: $font-primary;
            &:hover{
              border: 1px solid $color-main !important;
              color: #fff;
              background: $color-main;
            }
            &.active{
              border: 1px solid $color-main !important;
              color: #fff;
              background: $color-main;
            }
          }
        }
      }

    }

    .filter-price {
      padding-top: 0px;

      .list-price{
        padding-left: 0px;
        li{
          padding-bottom: 5px;
          input{
            opacity: 0;
            position: absolute;
            z-index: -1;
          }
          list-style: none;
          a{
            font-family: $font-primary;
            font-size: 15px;
            font-weight: 500;
            color: $color-main;
            position: relative;
            i{display:none;}
            &:hover, &.active{
              color: $color-main2;

            }

          }
        }
      }
    }

    .widget-tags{
      padding-top: 0px;
      .list-tag{
        padding-left: 0;
        li{
          list-style: none;
          display: inline-block;
          a{
            display: inline-block;
            color: #868686;
            margin: 0 0 10px 0 !important;
            transition: all .3s ease;
            font-size: 16px;
            font-weight: 500;
            font-family: $font-primary;
            &:hover{
              color : $color-main2;
            }
          }
        }
      }
    }

    .filter-brand{
      padding-top: 0px;
      .list-brand{
        padding-left: 0px;

        li{
          list-style: none;
          padding-bottom: 5px;
          a{
            font-family: $font-primary;
            font-size: 14px;
            font-weight: 400;
            color: $color-main;
            position: relative;
            line-height: 0;
            i{
              color: #d4d4d4;
              font-size: 16px;
              padding-right :14px;  
            }
            &:hover{
              color: $color-main2;
            }
          }
        }
      }
    }


  }   
}
.filter-accodition{
  .heading_collapse{
    .title_filter{
      display  : inline-block;
      padding : 0 12px;
      .widget-title{
        a{
          font-size : 20px;
          font-weight : 500;
          color : $color-main;

          &.active{
            i{
              transform : rotate(180deg);
              transtion : .3s;
            }
          }
          svg{
            width : 20px;
            height : auto;
            fill: $color-main;
            margin-bottom: 9px;
            margin-right: 5px;
          }
          &:hover, &:focus{
            color : $color-main2;
            svg{
              fill: $color-main2;
            }
          }

        }
      }
      @media(min-width : 992px) and(max-width : 1200px){
        padding : 0 15px;
        .widget-title{
          a{
            font-size : 16px;
            svg{
              width : 16px;
            }
          }
        }
      }
    }
  }
  .content_collapse{
    .widget-cate{
      .list-category-toggle{
        display : flex;
        padding : 0;
        justify-content: space-between;
        .item-toggle-tab{
          list-style : none;
          padding : 15px 25px;
          position : relative;
          .toggle-menumobile{
            position : absolute;
            top : 17px;
            right : 0;
            i{
              font-size : 20px;
              color :$color-main;
            }
            &.active{
              i{
                color : $color-main2;
                transform : rotate(180deg);
                transtion : .3s;
              }
            }
            &:hover{
              i{
                color : $color-main2;
                transtion : .3s;
              }
            }
          }
          a{
            font-size : 16px;
            font-weight : 500;
          }
          .menu_lv2{
            .item_menu_lv2{
              a{
                font-size: 15px;
                font-weight : 400;
                color : $color-main;
                padding-top : 12px;
                display : inline-block;
                &:hover{
                  color : $color-main2;
                }
              }
            }
          }
        }
      }
    }
    .list_color{
      padding-left: 20px;
      li{
        padding-top : 30px;
        padding-bottom: 15px;
        input{
          opacity: 0;
          position: absolute;
          z-index: -1;
        }
        list-style: none;
        display: inline-block;
        padding-right: 15px;
        a{
          display: block;
          width: 45px;
          height: 45px;
          border-radius: 50%;
          position: relative;
          border: 1px solid #ccc;
          &:before{
            content: "";
            border: 1px solid #ccc;
            width: 55px;
            height: 55px;
            position: absolute;
            border-radius: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            top: 50%;
            transition: all 0.3s ease;
            opacity: 0;

          }
          &.active{
            &:before{             
              border: 1px solid $color-main;
              opacity: 1;
            }
          }
          &:hover{
            &:before{             
              border: 1px solid $color-main;
              opacity: 1;
            }
          }
        }
      }
    }
    .list-size{
      padding-left: 20px;
      li{
        padding-top : 20px;
        padding-bottom: 15px;
        padding-right : 15px;
        input{
          opacity: 0;
          position: absolute;
          z-index: -1;
        }
        list-style: none;
        display: inline-block;
        a{
          display: inline-block;
          padding : 12px 16px;
          border: 1px solid $color-main !important;
          color: $color-main;
          text-align: center;
          transition: all .3s ease;
          font-size: 14px;
          font-weight: 600;
          font-family: $font-primary;
          &:hover{
            border: 1px solid $color-main !important;
            color: #fff;
            background: $color-main;
          }
          &.active{
            border: 1px solid $color-main !important;
            color: #fff;
            background: $color-main;
          }
        }
      }
    }
    .list-price{
      padding-left: 20px;
      li{
        padding-top : 20px;
        padding-bottom: 15px;
        padding-right : 20px;
        display : inline-block;
        input{
          opacity: 0;
          position: absolute;
          z-index: -1;
        }
        list-style: none;
        a{
          font-family: $font-primary;
          font-size: 18px;
          font-weight: 500;
          color: $color-main;
          position: relative;
          i{display:none;}
          &:hover, &.active{
            color: $color-main2;

          }

        }
      }
    } 

  }
}
.blog-page{
  .content-blog-page{
    .blog-list-view{
      padding-bottom: 67px;
      .blog_grid{
        padding-top: 67px;
        .post-thumb{
          overflow:hidden;
          img{
            transition: 0.5s;
            min-height: 446px;
            object-fit: cover;
          }
          &:hover{
            img{
              transform: scale(1.1);
              transition: .5s;
              opacity: .6;
            }
          }
          position:relative;
          .single-post-date{
            width: 76px;
            height: 76px;
            text-align: center;
            border-radius: 100%;
            display: inline-block;
            position: absolute;
            padding: 10px 15px;
            background-color: #fff;
            top: 30px;
            left: 30px;
            .date{
              font-size: 20px;
              font-weight: 500;
              font-family: $font-primary;
              position: relative;
              &:before{
                content: '';
                height: 1px;
                width: 44px;
                display: block;
                background-color: #c8c8c8;
                position: absolute;
                bottom: -1px;
              }
            }
            .month{
              font-size: 14px;
              font-weight: 500;
              font-family: $font-primary;
              text-transform: uppercase;
            }
          }
        }
        .post-info{
          .blog-title{
            font-size: 12px;
            text-transform: uppercase;
            font-family: $font-primary;
            letter-spacing: .2em;
            font-weight: 500;
            margin-top: 30px;
            color: #aaaaaa;
            padding-bottom: 5px;
          }
          .post-title{
            padding-bottom: 25px;
            position: relative;
            &:before{
              content: '';
              width: 55px;
              height: 1px;
              background-color: #e0e0e0;
              display: block;
              bottom: 0;
              position: absolute;              
            }
            a{
              font-size: 22px;
              font-family: $font-primary;
              font-weight: 500;
              color: #333333;
              margin-top: 10px;
              display: inline-block;
              position: relative;
              transition: .8s;
              &:after{
                content: attr(title);
                color: #333;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                height: 100%;
                -webkit-transition: height .8s ease 0s;
                -moz-transition: height .8s ease 0s;
                -o-transition: height .8s ease 0s;
                transition: height .8s ease 0s;
                overflow: hidden;
              }
              &:hover{
                color: $color-main2;
                &:after{
                  height: 0;

                }
              }
            }

          }
          .desc{
            font-size: 14px;
            font-family: $font-primary;
            font-weight: 400;
            color: #a8a8a8;
            margin-top: 22px; 
          }
          .btn_readmore{
            font-size: 14px;
            font-family: $font-primary;
            font-weight: 600;
            color: $color-main;
            margin-top: 23px;
            display: inline-block;
            i{
              padding-left: 10px;
            }
            span{
              position: relative;
              padding-bottom: 5px;
              display: inline-block;
              &:after{  
                content: '';
                width: 100%;
                height: 2px;
                background-color: $color-main;
                position: absolute;
                bottom: 0;
                left: 0;
              }             
            }
            &:hover{
              color: $color-main2;
              span{
                &:after{
                  background:  $color-main2;
                }
              }
            }
          }
        }
      }
      .blog_standar{
        padding-top: 67px;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 38px;
        .article_img{
          position: relative;
          overflow: hidden;
          img{
            transition: 0.5s;
            transform: scale(1.05);
          }
          &:hover{
            img{
              transition: 0.5s;
              transform: scale(1);
              filter: blur(2px);
            }
          }
        }
        .post-info{
          .single-post-date{
            width: 76px;
            height: 76px;
            text-align: center;
            border-radius: 100%;
            display: inline-block;
            padding: 10px 15px;
            background-color: $color-main2;
            .date{
              font-size: 20px;
              font-weight: 500;
              font-family: $font-primary;
              position: relative;
              color: #fff;
              &:before{
                content: '';
                height: 1px;
                width: 44px;
                display: block;
                background-color: #fff;
                position: absolute;
                bottom: -1px;
              }
            }
            .month{
              font-size: 14px;
              font-weight: 500;
              color: #fff;
              font-family: $font-primary;
              text-transform: uppercase;
            }
          }
          .title_info{
            display: inline-block;
            padding-top: 35px;
            padding-left: 24px;
            .blog-title{
              font-size: 12px;
              text-transform: uppercase;
              font-family: $font-primary;
              letter-spacing: .2em;
              font-weight: 400;
              color: #aaaaaa;
              padding-bottom: 7px;
            }
            .post-title{
              position: relative;
              a{
                font-size: 30px;
                font-family: $font-primary;
                font-weight: 400;
                color: #333333;
                display: inline-block;
                position: relative;
                transition: .8s;
                &:after{
                  content: attr(title);
                  color: #333;
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  height: 100%;
                  -webkit-transition: height .8s ease 0s;
                  -moz-transition: height .8s ease 0s;
                  -o-transition: height .8s ease 0s;
                  transition: height .8s ease 0s;
                  overflow: hidden;
                }
                &:hover{
                  color: $color-main2;
                  &:after{
                    height: 0;
                  }
                }
              }
            }
          }
          .des_article{
            font-size: 14px;
            font-family: $font-primary;
            font-weight: 400;
            color: #a8a8a8;
            margin-top: 25px; 
            line-height: 28px;
            margin-bottom: 36px;
          }
          .author{
            font-family: $font-primary;
            font-size: 12px;
            text-transform: uppercase;
            color: #aaaaaa;
            letter-spacing: .2em;
            font-weight : 400;
            position: relative;
            a{
              font-family: $font-primary;
              font-size: 12px;
              text-transform: uppercase;
              color: $color-main;
              letter-spacing: .2em;
              font-weight : 500;
              padding-left: 5px;
            }
            &:after{
              content: '';
              display: inline-block;
              width: 32px;
              height: 1px;
              background-color: #cbcbcb;
              -moz-transform: rotate(315deg) translate(0px,-5px);
              -webkit-transform: rotate(315deg) translate(0px,-5px);
              -o-transform: rotate(315deg) translate(0px,-5px);
              -ms-transform: rotate(315deg) translate(0px,-5px);
              transform: rotate(315deg) translate(0px,-5px);
              margin-left: 10px;
            }
          }
          .comment_count{
            font-family: $font-primary;
            font-size: 12px;
            text-transform: uppercase;
            color: #aaaaaa;
            letter-spacing: .1em;
            font-weight : 400;
          }
          .btn_readmore{
            font-size: 14px;
            font-family: $font-primary;
            font-weight: 600;
            color: $color-main;
            margin-top: 12px;
            display: inline-block;
            i{
              padding-left: 10px;
            }
            span{
              position: relative;
              padding-bottom: 5px;
              display: inline-block;
              &:after{  
                content: '';
                width: 100%;
                height: 2px;
                background-color: $color-main;
                position: absolute;
                bottom: 0;
                left: 0;
              }             
            }
            &:hover{
              color: $color-main2;
              span{
                &:after{
                  background:  $color-main2;
                }
              }
            }
          }
        }
      }
      .blog_classic{
        padding-top: 67px;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 38px;
        .article_img{
          position: relative;
          overflow: hidden;
          img{
            transition: 0.5s;
            transform: scale(1.05);
          }
          &:hover{
            img{
              transition: 0.5s;
              transform: scale(1);
              filter: blur(2px);
            }
          }
        }
        .post-info{
          .title_info{
            display: inline-block;
            padding-top: 35px;
            .blog-title{
              font-size: 12px;
              text-transform: uppercase;
              font-family: $font-primary;
              letter-spacing: .2em;
              font-weight: 500;
              color: #aaaaaa;
              padding-bottom: 7px;
            }
            .post-title{
              position: relative;
              a{
                font-size: 30px;
                font-family: $font-primary;
                font-weight: 400;
                color: #333333;
                display: inline-block;
                position: relative;
                transition: .8s;
                &:after{
                  content: attr(title);
                  color: #333;
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  height: 100%;
                  -webkit-transition: height .8s ease 0s;
                  -moz-transition: height .8s ease 0s;
                  -o-transition: height .8s ease 0s;
                  transition: height .8s ease 0s;
                  overflow: hidden;
                }
                &:hover{
                  color: $color-main2;
                  &:after{
                    height: 0;
                  }
                }
              }
            }
          }
          .des_article{
            font-size: 14px;
            font-family: $font-primary;
            font-weight: 400;
            color: #a8a8a8;
            margin-top: 25px; 
            line-height: 28px;
            margin-bottom: 36px;
          }
          .author{
            font-family: $font-primary;
            font-size: 12px;
            text-transform: uppercase;
            color: #aaaaaa;
            letter-spacing: .2em;
            font-weight : 400;
            position: relative;
            a{
              font-family: $font-primary;
              font-size: 12px;
              text-transform: uppercase;
              color: $color-main;
              letter-spacing: .2em;
              font-weight : 500;
              padding-left: 5px;
            }
            &:after{
              content: '';
              display: inline-block;
              width: 32px;
              height: 1px;
              background-color: #cbcbcb;
              -moz-transform: rotate(315deg) translate(0px,-5px);
              -webkit-transform: rotate(315deg) translate(0px,-5px);
              -o-transform: rotate(315deg) translate(0px,-5px);
              -ms-transform: rotate(315deg) translate(0px,-5px);
              transform: rotate(315deg) translate(0px,-5px);
              margin-left: 10px;
            }
          }
          .date{
            font-family: $font-primary;
            font-size: 12px;
            text-transform: uppercase;
            color: #aaaaaa;
            letter-spacing: .1em;
            font-weight : 400;
            position: relative;
            a{
              font-family: $font-primary;
              font-size: 12px;
              text-transform: uppercase;
              color: $color-main;
              letter-spacing: .1em;
              font-weight : 500;
              padding-left: 5px;
            }
            &:after{
              content: '';
              display: inline-block;
              width: 32px;
              height: 1px;
              background-color: #cbcbcb;
              -moz-transform: rotate(315deg) translate(0px,-5px);
              -webkit-transform: rotate(315deg) translate(0px,-5px);
              -o-transform: rotate(315deg) translate(0px,-5px);
              -ms-transform: rotate(315deg) translate(0px,-5px);
              transform: rotate(315deg) translate(0px,-5px);
              margin-left: 10px;
            }
          }
          .comment_count{
            font-family: $font-primary;
            font-size: 12px;
            text-transform: uppercase;
            color: #aaaaaa;
            letter-spacing: .1em;
            font-weight : 400;
          }
          .btn_readmore{
            font-size: 14px;
            font-family: $font-primary;
            font-weight: 600;
            color: $color-main;
            margin-top: 12px;
            display: inline-block;
            i{
              padding-left: 10px;
            }
            span{
              position: relative;
              padding-bottom: 5px;
              display: inline-block;
              &:after{  
                content: '';
                width: 100%;
                height: 1px;
                background-color: $color-main;
                position: absolute;
                bottom: 0;
                left: 0;
              }             
            }
            &:hover{
              color: $color-main2;
              span{
                &:after{
                  background:  $color-main2;
                }
              }
            }
          }
        }
      }
    }
    .pagi-nav {
      span{
        width: 45px;
        height: 45px;
        border: 1px solid #e3e3e3;
        border-radius: 50%;
        line-height: 45px;
        text-align: center;
        display: inline-block;
        font-size: 18px;
        font-weight: 500;
        color: #232529;
        margin-right: 4px;
        -webkit-transition: background-color .3s ease-in-out;
        -moz-transition: background-color .3s ease-in-out;
        -ms-transition: background-color .3s ease-in-out;
        -o-transition: background-color .3s ease-in-out;
        transition: background-color .3s ease-in-out;
        a{
          display: block;
          i{
            font-size: 22px;
          }
        }
        &:hover{
          background: $color-main;
          color: #fff;
        }
      }
      .current{
        background: $color-main;
        color: #fff;
      }
    }
  }
  .blog_sidebar {
    padding-top: 67px;
    .blog_sidebar_cate {
      padding-bottom: 17px;
      .widget-title {
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding-bottom:15px;
        position: relative;
        border-bottom: 1px solid #e7e7e7;
      }
      .widget-content {
        .list-category-toggle {
          padding-left: 0;
          li {
            list-style: none;
            a {
              padding: 12px 0;
              display: block;
              font-family: $font-primary;
              font-size: 16px;
              font-weight: 400;
              color: $color-main;
              i{
                color: $color-main;
                font-size: 14px;
                padding-right :14px;  
              }
              &:hover {
                color: $color-main2;
                i {
                  color: $color-main2;
                }
              }
            }
          }
        }
      }

    }
    .blog_sidebar_recent {
      padding-bottom: 44px;
      .widget-title{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding-bottom:15px;
        position: relative;
        border-bottom: 1px solid #e7e7e7;
      }
      .list-posts {
        .item-post {
          padding: 14px 0 24px 0;
          border-bottom: 1px solid #f1f1f1;
          .post-thumb {
            width: 80px;
            float: left;
            padding-top: 8px;
            img{
              min-height: 80px;
              object-fit: cover;
            }
          }
          .post-info {
            overflow: hidden;
            padding-left: 15px;
            .date-post {
              font-family: $font-primary;
              font-size: 11px;
              color: #aaaaaa;
              font-weight: 500;
              text-transform: uppercase;
              letter-spacing: .1em;
              padding-bottom: 5px;
            }
            .post-title {
              font-family: $font-primary;
              font-size: 14px;
              color: #aaaaaa;
              font-weight: 400;
              color: #333333;
              padding-bottom: 3px;
            }
            .comment-count {
              font-family: $font-primary;
              font-size: 12px;
              color: #aaaaaa;
              font-weight: 500;
            }
          }
        }
      }
    }

    .widget-tags {
      padding-bottom: 38px;
      .widget-title {
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding-bottom:15px;
        position: relative;
        border-bottom: 1px solid #e7e7e7;
      }
      .list-tag {
        padding-left: 0;
        margin-top: 26px;
        li {
          list-style: none;
          display: inline-block;
          a {
            display: inline-block;
            min-width: 44px !important;
            height: 35px !important;
            line-height: 35px;
            border: 1px solid $color-main !important;
            color: $color-main;
            margin: 0 10px 10px 0 !important;
            text-align: center;
            transition: all .3s ease;
            font-size: 14px;
            font-weight: 400;
            padding: 0 22px;
            font-family: $font-primary;
            &:hover{
              border: 1px solid $color-main2 !important;
              color: #fff;
              background: $color-main2;
            }
          }
        }
      }
    }
    .widget-search {
      .widget-title {
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding-bottom:15px;
        position: relative;
        border-bottom: 1px solid #e7e7e7;
      }
      padding-bottom: 40px;
      .wg-search-form {
        margin-top: 30px;
        position: relative;
        input[type='text']{
          width: 100%;
          border: none;
          background-color: #f3f3f3;
          padding: 16px 30px;
          color: #a8a8a8;
          &::placeholder {
            font-size: 14px;
            font-family: $font-primary;
            font-weight:400;
            color: #a8a8a8;
          }
        }
        button[type='submit']{
          position: absolute;
          top: 0;
          right: 0;
          padding: 0;
          height: 56px;
          width: 85px;          
          text-align: center;
          background: $color-main;
          i{
            color: #fff;
            line-height: 56px;
            font-size: 22px;
          }
          &:hover{
            background: $color-main2;
            i{
              color: #fff;
            }
          }
        }
      }
    }
  }
}
.article-page {
  .content-single-blog {
    .post-details {
      border-bottom:  1px solid #eaeaea;
      padding-bottom: 38px;
      padding-top: 64px;
      .article_title {
        font-size: 50px;
        font-weight: 300;
        font-family: $font-primary;
        text-align: center;
        text-transform: unset;
        padding-bottom: 20px;
        width: 80%;
        margin: 0 auto;
      }
      .single-post-thumb {
        padding-bottom: 30px;
      }
      .cmt-author {
        text-align: center;
        margin-bottom: 40px;
        .author {
          font-family: $font-primary;
          font-size: 12px;
          text-transform: uppercase;
          color: #aaaaaa;
          letter-spacing: .2em;
          font-weight : 400;
          position: relative;
          a {
            font-family: $font-primary;
            font-size: 12px;
            text-transform: uppercase;
            color: $color-main;
            letter-spacing: .2em;
            font-weight : 500;
            padding-left: 5px;
          }
          &:after {
            content: '';
            display: inline-block;
            width: 32px;
            height: 1px;
            background-color: #cbcbcb;
            -moz-transform: rotate(315deg) translate(0px,-5px);
            -webkit-transform: rotate(315deg) translate(0px,-5px);
            -o-transform: rotate(315deg) translate(0px,-5px);
            -ms-transform: rotate(315deg) translate(0px,-5px);
            transform: rotate(315deg) translate(0px,-5px);
            margin-left: 10px;
          }
        }
        .comment_count {
          font-family: $font-primary;
          font-size: 12px;
          text-transform: uppercase;
          color: #aaaaaa;
          letter-spacing: .2em;
          font-weight : 400;
        }
      }
      .content-post-default {
        p{
          font-size: 14px;
          color: #a8a8a8;
          font-weight: 400;
          font-family: $font-primary;
          line-height: 28px;
        }
        blockquote{
          position: relative;
          font-size: 16px;
          color: $color-main;
          font-weight: 500;
          font-family: $font-primary;
          font-style: inherit;
          line-height: 29px;
          margin: 30px 30px 24px;
          &:before{
            content: "";
            height: 100%;
            width: 4px;
            background: $color-main2;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }

      .cate-tags {
        .tags{
          .title_tag {
            font-size: 12px;
            font-weight: 600;
            color: $color-main;
            text-transform: uppercase;
            letter-spacing: .2em;
          }
          a {
            font-size: 12px;
            font-weight: 400;
            color: #aaaaaa;
            text-transform: uppercase;
            letter-spacing: .2em;
            &:hover {
              color: $color-main2;
            }
          }
        }
        .cate {
          .title_cate {
            font-size: 12px;
            font-weight: 600;
            color: $color-main;
            text-transform: uppercase;
            letter-spacing: .2em;
          }
          a {
            font-size: 12px;
            font-weight: 400;
            color: #aaaaaa;
            text-transform: uppercase;
            letter-spacing: .2em;
            &:hover{
              color: $color-main2;
            }
          }
        }
      }
    }
    .next_prev_post {
      padding-top: 38px;
      a{
        i{
          font-size: 12px;
        }
      }
    }
    .single-related-post {
      position: relative;
      .next-slide,.prev-slide {
        font-size: 30px;
        height: 40px;
        line-height: 40px;
        width: 40px;
        background: #fff;       
        color: $color-main;
        position: absolute;
        top: 30%;
        z-index: 1;
      } 
      .next-slide{
        right: 0px;
      }
      .prev-slide{
        left: 0px;
      }
      .slick-dots {
        transform: translate(-50%);
        left: 50%;
        bottom: unset;
        li{
          margin: 0 2px;
          button {
            &:before {
              opacity: 0;
            }
            font-size: 0;
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            background-color: #d8d8d8;
            border-radius: 50%;
          }
        }
        .slick-active{
          button{
            background-color: $color-main;
          }
        }
      }
      margin: 25px 0 30px 0;
      .title-single-related-post{
        text-align: center;
        font-size: 25px;
        font-weight: 400;
        color: #333;
        margin-bottom: 0;
      }
      .blog_grid{
        padding-top: 30px;
        .post-thumb{
          overflow:hidden;
          img{
            transition: 0.5s;
            min-height: 300px;
            object-fit: cover;
          }
          &:hover{
            img{
              transform: scale(1.1);
              transition: .5s;
              opacity: .6;
            }
          }
          position:relative;
          .single-post-date {
            width: 66px;
            height: 66px;
            text-align: center;
            border-radius: 100%;
            display: inline-block;
            position: absolute;
            padding: 10px 15px;
            background-color: #fff;
            top: 30px;
            left: 30px;
            .date{
              font-size: 15px;
              font-weight: 500;
              font-family: $font-primary;
              position: relative;
              &:before{
                content: '';
                height: 1px;
                width: 44px;
                display: block;
                background-color: #c8c8c8;
                position: absolute;
                bottom: 0px;
                left: 50%;
                transform: translatex(-50%);
              }
            }
            .month{
              font-size: 12px;
              font-weight: 500;
              font-family: $font-primary;
              text-transform: uppercase;
            }
          }
        }
        .post-info{
          .blog-title{
            font-size: 12px;
            text-transform: uppercase;
            font-family: $font-primary;
            letter-spacing: .2em;
            font-weight: 500;
            margin-top: 30px;
            color: #aaaaaa;
            padding-bottom: 5px;
          }
          .post-title{
            padding-bottom: 25px;
            position: relative;
            &:before{
              content: '';
              width: 55px;
              height: 1px;
              background-color: #e0e0e0;
              display: block;
              bottom: 0;
              position: absolute;              
            }
            a{
              font-size: 22px;
              font-family: $font-primary;
              font-weight: 500;
              color: #333333;
              margin-top: 10px;
              display: inline-block;
              position: relative;
              transition: .8s;
              &:after{
                content: attr(title);
                color: #333;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                height: 100%;
                -webkit-transition: height .8s ease 0s;
                -moz-transition: height .8s ease 0s;
                -o-transition: height .8s ease 0s;
                transition: height .8s ease 0s;
                overflow: hidden;
              }
              &:hover{
                color: $color-main2;
                &:after{
                  height: 0;

                }
              }
            }

          }
          .btn_readmore{
            font-size: 14px;
            font-family: $font-primary;
            font-weight: 600;
            color: $color-main;
            margin-top: 23px;
            display: inline-block;
            i{
              padding-left: 10px;
            }
            span{
              position: relative;
              padding-bottom: 5px;
              display: inline-block;
              &:after{  
                content: '';
                width: 100%;
                height: 2px;
                background-color: $color-main;
                position: absolute;
                bottom: 0;
                left: 0;
              }             
            }
            &:hover{
              color: $color-main2;
              span{
                &:after{
                  background:  $color-main2;
                }
              }
            }
          }
        }
      }
    }
  }
  .article_sidebar{
    padding-top: 77px;
    .blog_sidebar_cate{
      padding-bottom: 17px;
      .widget-title{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding-bottom:15px;
        position: relative;
        border-bottom: 1px solid #e7e7e7;
      }
      .widget-content{
        .list-category-toggle{
          padding-left: 0;
          li{
            list-style: none;
            a{
              padding: 12px 0;
              display: block;
              font-family: $font-primary;
              font-size: 16px;
              font-weight: 400;
              color: $color-main;
              i{
                color: $color-main;
                font-size: 14px;
                padding-right :14px;  
              }
              &:hover{
                color: $color-main2;
                i{
                  color: $color-main2;
                }
              }
            }
          }
        }
      }

    }
    .blog_sidebar_recent{
      padding-bottom: 44px;
      .widget-title{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding-bottom:15px;
        position: relative;
        border-bottom: 1px solid #e7e7e7;
      }
      .list-posts{
        .item-post{
          padding: 14px 0 24px 0;
          border-bottom: 1px solid #f1f1f1;
          .post-thumb {
            width: 80px;
            float: left;
            padding-top: 8px;
            img{
              min-height: 80px;
              object-fit: cover;
            }
          }
          .post-info{
            overflow: hidden;
            padding-left: 15px;
            .date-post{
              font-family: $font-primary;
              font-size: 11px;
              color: #aaaaaa;
              font-weight: 500;
              text-transform: uppercase;
              letter-spacing: .1em;
              padding-bottom: 5px;
            }
            .post-title{
              font-family: $font-primary;
              font-size: 14px;
              color: #aaaaaa;
              font-weight: 400;
              color: #333333;
              padding-bottom: 3px;
            }
            .comment-count{
              font-family: $font-primary;
              font-size: 12px;
              color: #aaaaaa;
              font-weight: 500;
            }
          }
        }
      }
    }

    .widget-tags{
      padding-bottom: 38px;
      .widget-title{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding-bottom:15px;
        position: relative;
        border-bottom: 1px solid #e7e7e7;
      }
      .list-tag{
        padding-left: 0;
        margin-top: 26px;
        li{
          list-style: none;
          display: inline-block;
          a{
            display: inline-block;
            min-width: 44px !important;
            height: 35px !important;
            line-height: 35px;
            border: 1px solid $color-main !important;
            color: $color-main;
            margin: 0 10px 10px 0 !important;
            text-align: center;
            transition: all .3s ease;
            font-size: 14px;
            font-weight: 400;
            padding: 0 22px;
            font-family: $font-primary;
            &:hover{
              border: 1px solid $color-main2 !important;
              color: #fff;
              background: $color-main2;
            }
          }
        }
      }
    }
    .widget-search{
      .widget-title{
        font-family: $font-primary;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        padding-bottom:15px;
        position: relative;
        border-bottom: 1px solid #e7e7e7;
      }
      padding-bottom: 40px;
      .wg-search-form{
        margin-top: 30px;
        position: relative;
        input[type='text']{
          width: 100%;
          border: none;
          background-color: #f3f3f3;
          padding: 16px 30px;
          color: #a8a8a8;
          &::placeholder{
            font-size: 14px;
            font-family: $font-primary;
            font-weight:400;
            color: #a8a8a8;
          }
        }
        button[type='submit']{
          position: absolute;
          top: 0;
          right: 0;
          padding: 0;
          height: 56px;
          width: 85px;          
          text-align: center;
          background: $color-main;
          i{
            color: #fff;
            line-height: 56px;
            font-size: 22px;
          }
          &:hover{
            background: $color-main2;
            i{
              color: #fff;
            }
          }
        }
      }
    }

  }
  .reply-comment{
    .title_form{
      font-size: 22px;
      text-transform: capitalize;
      font-weight: 500;
      font-family: $font-primary;
      padding: 40px 0;
    }
    .contact-form{
      .contact-name{
        width: 50%;
        float: left;
        padding-right: 10px;
        input{
          width: 100%;
          border: 1px solid #d6d6d6;
          color: $color-main;
          border-radius:0;
          padding: 11px 0 11px 23px;
          font-size: 14px;
          font-family: $font-primary;
          &::placeholder{
            font-size: 14px;
            font-family: $font-primary;
            color: #999999;
          }

        }
      }
      .contact-email{
        width: 50%;
        float: left;
        padding-left: 10px;
        input{
          width: 100%;
          border: 1px solid #d6d6d6;
          color: $color-main;
          border-radius:0;
          padding: 11px 0 11px 23px;
          font-size: 14px;
          font-family: $font-primary;
          &::placeholder{
            font-size: 14px;
            font-family: $font-primary;
            color: #999999;
          }
        }  
      }
      .contact-message{
        clear: both;
        margin-top:10px;
        textarea{
          width: 100%;
          border: 1px solid #d6d6d6;
          color: $color-main;
          border-radius:0;
          padding-left: 23px;
          font-size: 14px;
          font-family: $font-primary;
          padding-top: 18px;

          &::placeholder{
            font-size: 14px;
            font-family: $font-primary;
            color: #999999;
          }
        }
      }
      .contact-submit{
        input{
          width: 100%;
          background: $color-main;
          padding: 15px 0;
          text-transform: uppercase;
          letter-spacing: .2em;
          font-size: 14px;
          font-family: $font-primary;
          color: #fff;
          font-weight: 600;
          border-radius: 0;
          transition: .3s;
        }
        &:hover {
          input{
            background: $color-main2;
            transition: .3s;
          }
        }
      }
    }
  }
  .blog-comment-detail{
    .title_cmt_details{
      font-size: 22px;
      font-family: $font-primary;
      color: $color-main;
      font-weight: 500;
      padding: 40px 0 0 0;
    }
    .comment-details{
      border-bottom: 1px solid #ebebeb;
      padding: 48px 0;
      overflow: hidden;
      .comment-thumb{
        width: 120px;
        margin-right: 20px;
        float: left;
      }
      .comment-info{
        overflow: hidden;
        .author-name{
          font-size: 12px;
          font-family: $font-primary;
          font-weight: 600;
          color: $color-main;
          text-transform: uppercase;
          letter-spacing: .2em;
        }
        .reply-button{
          display: inline-block;
          float: right;
          color: #c2c2c2;
          &:hover{
            color: $color-main2;
          }
        }
        .date-post{
          font-size: 14px;
          font-family: $font-primary;
          color: #b0b0b0;
          padding-top: 5px;
        }
        .desc{
          padding-top: 10px;
          font-size: 14px;
          font-family: $font-primary;
          color: #999999;
          line-height: 28px;
          p{
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
.content-404{
  padding: 100px 0;
  text-align: center;
  .title-404{
    font-size: 100px;
    margin-bottom: 20px;
    font-weight: 600;
  }
  .page-title{
    font-size: 30px;
    font-weight: 600;
  }
  .sub-title{
    color: #a8a8a8;
    font-size: 16px;
  }
  .sub-link{
    color: #a8a8a8;
    font-size: 14px;
    a{
      color: $color-main2;
    }
  }
  .search{
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    margin-top: 25px;
    input[type='text']{
      padding: 17px 25px;
      max-width: 100%;
      background-color: transparent;
      border: 1px solid #d6d6d6;
      font-size: 14px;
      color: #999;
      line-height: 24px;
      width: 100%;
    }
    button[type='submit']{
      color: #fff;
      font-size: 25px;
      background: $color-main;
      padding: 11px 20px;
      position: absolute;
      right: 0;
      top: 0;
      transition : .3s;
      &:hover{
        background: $color-main2;
      }
    }
  }
}
.list-category{
  padding: 50px 0;
  .img_collection{
    position: relative;
    overflow: hidden;
    img{
      transition : .3s;
    }
    &:before, &:after{
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      transition: all 0.6s ease;
      z-index: 1;
    }
    &:hover{
      img{
        transform: scale(1.05);
        transition : .3s;
      }
      &:before{
        right: 50%;
        left: 50%;
        background-color: rgba(255,255,255,0.5);
      }
      &:after{
        top: 50%;
        bottom: 50%;
        background-color: rgba(255,255,255,0.5);
      }
    }
  }
  .info_col{
    .title_collection{
      font-size: 30px;
      font-weight: 300;
      font-family: $font-primary;
      color: $color-main;
      margin-top: 30px;
    }
    .total_item{
      font-size: 16px;
      font-weight: 400;
      font-family: $font-primary;
      color: $color-main;
    }
    .shop-button{
      height: 60px;
      min-width: 120px;
      line-height: 60px;
      background-color: $color-main;
      display: inline-flex;
      color: #fff;
      padding: 0 26px;
      margin-top: 20px;
      position: relative;
      transition: background-color .3s;
      &:before{
        position: absolute;
        top: 0;
        left: -100%;
        z-index: 2;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
        background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
        -webkit-transform: skewX(-45deg);
        -moz-transform: skewX(-45deg);
        -o-transform: skewX(-45deg);
        -ms-transform: skewX(-45deg);
        transform: skewX(-45deg);
      }
      &:hover{
        background-color: $color-main2;
        transition: background-color .3s;
        &:before{
          animation: shine .75s;
        }
      }
    }
  }
}
.page-cart{
  padding: 50px 0;
  .content-cart-page{
    .shop_table{
      border: 1px solid #dee2e6;
      .cart-title{
        th{
          border-bottom: 0;
          font-weight: 500;
          font-size: 12px;
          letter-spacing: .2em;
          text-transform: uppercase;
          color: $color-main;
          font-family: $font-primary;
          padding: 15px 20px;
          border-left: 1px solid #dee2e6;
        }
        .product-price,.product-quantity,.product-subtotal{
          text-align: center;
        }
      }
      .cart_item{
        .product-thumbnail{
          width: 140px;
        }
        .product-name-thumb, .product-price, .product-subtotal{
          font-family: $font-primary;
          font-size: 14px;
          color: #a8a8a8;
          line-height: 1.6;
          font-weight: 400;
          small{
            font-size : 13px;
          }
        }
        .product-quantity{

          .js-qty{
            display: inline-block;
            width: 90px;
            border: 2px solid $color-main;
            margin-right: 15px;
            input[type="text"]{
              width : 45px;
              border: none;
              padding: 10px 0;
              text-align: center;
              font-size: 20px;
              color: #232529;
              font-weight: 600;
              border-right: 1px solid #232529;
              border-radius : 0;
            }
            .qty_minus, .qty_plus{
              position: absolute;
              transition: .3s;
              color: $color-main;
              padding: 0;
              width: unset;
              border: 0;
              font-weight: 600;
              font-size: 14px;
              &:hover{
                color: $color-main2;
              }

            }
            .qty_plus{
              right: 0px;
              height: 50%;
              top: 0;
              width: 42px;
            }
            .qty_minus{
              right: 0px;
              bottom: 0;
              height: 50%;
              width: 42px;
              left: unset;
              top: unset;
              border-top: 1px solid $color-main;
            }
          }


        }
        .product-remove{
          a{
            font-size: 10px;
          }
        }
        .product-price,.product-quantity,.product-subtotal,.product-remove{
          text-align: center;
        }
      }
    }
    .cart_totals{
      .cart-update{
        margin: 20px 10px 20px 0;
        display: inline-block;
        input[type='submit']{
          display: inline-block;
          color: #fff;
          text-transform: uppercase;
          padding: 18px 65px;
          border: none;
          background-color: $color-main;
          font-size: 14px;
          text-align: center;
          line-height: 24px;
          letter-spacing: .2em;
          font-weight: 500;
          position: relative;
          border-radius: 0;
          transition : .3s;
          &:hover{
            background: $color-main2;
          }
        }
      }
      .continue-shopping-1{
        margin: 20px 0 20px 10px;
        display: inline-block;
        a{
          display: inline-block;
          color: #fff;
          text-transform: uppercase;
          padding: 18px 65px;
          border: none;
          background: $color-main2;
          font-size: 14px;
          text-align: center;
          line-height: 24px;
          letter-spacing: .2em;
          font-weight: 500;
          position: relative;
          border-radius: 0;
          transition : .3s;
          &:hover{
            background: $color-main3;
          }
        }
      }
      .cart-check{
        border: 1px solid #e3e3e3;
        padding: 41px 40px 63px;
        overflow: hidden;
        margin: 30px 0;
        .cart-title{
          font-weight: 600;
          font-size: 12px;
          line-height: 30px;
          color: $color-main;
          letter-spacing: .2em;
          text-transform: uppercase;
          margin-bottom: 0;
          font-family: $font-primary;
          padding: 17px 20px 17px 0;
        }
        .total-checkout{
          border-top : 1px solid #e3e3e3;
          .cart-label{
            font-family: $font-primary;
            padding: 17px 0;
            font-size: 16px;
            line-height: 30px;
            color: $color-main;
            font-weight: 400;
          }
          .cart-amount{
            font-family: $font-primary;
            padding: 17px 0;
            font-size: 16px;
            line-height: 30px;
            color: $color-main;
          }
        }
        .checkout-button{
          margin-top : 15px;
          display: inline-block;
          color: #fff;
          text-transform: uppercase;
          padding: 18px 65px;
          border: none;
          background-color: $color-main2;
          font-size: 14px;
          text-align: center;
          line-height: 24px;
          letter-spacing: .2em;
          font-weight: 500;
          position: relative;
          border-radius: 0;
          transition : .3s;
          &:hover{
            background: $color-main3;
          }
        }
      }
      .notice-currency{
        font-size: 16px;
        font-weight: 400;
        color: $color-main;
        text-transform: capitalize;
        font-family: $font-primary;
        margin-top: 30px;
      }
    }
  }
}
.product-quickview {
  .owl-carousel {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 10px;
    display: flex;
    .item{
      padding: 0 5px;
    }
  }
  .popup-quickview{
    .product-info-main{
      .product-item{
        .product-name{
          a{
            font-family: $font-primary;
            font-size: 22px;
            font-weight: 600;
            color: #010101;
            margin-bottom: 12px;
            line-height: 32px;
          }
        }
        .details{
          .product-price{
            span{
              font-size: 22px;
              font-weight: 600;
              color: $color-main;
            }
          }
          .product-desc{
            border-top: 1px solid #e7e7e7;
            padding-top: 23px;
            margin-bottom: 25px;
            p{
              font-size: 14px;
              line-height: 28px;
              color: #999999;
              font-weight: 500;
            }
          }
          .swatch{
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            .header{
              font-family: $font-primary;
              color: $color-main;
              margin: 0;
              position: relative;
              font-size: 12px;
              text-transform: uppercase;
              letter-spacing: .1em;
              line-height: 30px;
              font-weight: 600;
              border-bottom: 2px solid $color-main;
              margin-right: 27px;
            }
          }
          .product-actions{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -moz-align-items: center;
            -ms-align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-top: 20px;
            .product-quantity{
              .js-qty{
                display: inline-block;
                width: 90px;
                border: 2px solid $color-main;
                margin-right: 15px;
                input[type="text"]{
                  width : 45px;
                  border: none;
                  padding: 10px 0;
                  text-align: center;
                  font-size: 20px;
                  color: #232529;
                  font-weight: 600;
                  border-right: 1px solid #232529;
                  border-radius : 0;
                }
                .qty_minus, .qty_plus{
                  position: absolute;
                  transition: .3s;
                  color: $color-main;
                  padding: 0;
                  width: unset;
                  border: 0;
                  font-weight: 600;
                  font-size: 14px;
                  &:hover{
                    color: $color-main2;
                  }
                }
                .qty_plus{
                  right: 0px;
                  height: 50%;
                  top: 0;
                  width: 42px;
                }
                .qty_minus{
                  right: 0px;
                  bottom: 0;
                  height: 50%;
                  width: 42px;
                  left: unset;
                  top: unset;
                  border-top: 1px solid $color-main;
                }
              }
            }
            .btn-addtocart{
              .shop-button{
                margin-left: 10px;
                font-family: $font-primary;
                transition: all .3s ease;
                padding : 0 39px;
                height: 55px;
                font-size: 14px;
                background: $color-main2;
                letter-spacing: .2em;
                justify-content: center;
                text-transform: uppercase;
                font-weight: 600;
                color: #fff;
                transition: .3s;
                text-align: center;
                &:hover{
                  background: $color-main;
                  transition: .3s;
                }
              }
            }
          }
        }
      }
    }
  }
}
.engo-popup{
  .success-message{
    font-size: 18px;
    margin-bottom: 10px;
  }
  .content{
    .product-image{
      img{
        max-width: 150px;
      }
    }
    .product-info{
      .product-name{
        font-family: $font-primary;
        padding-bottom: 0px;
        font-size: 16px;
        line-height: 20px;
        text-transform: capitalize;
        font-weight: 400;
        margin-top: 10px;
      }
      p{
        font-weight: 600;
        font-size: 11px;
        margin-bottom: 5px;
        span{  
          font-size: 14px;
          font-weight: 400;
          color: $color-main2;
        }
      }
    }
    .more_info{
      border-left: 1px solid #eee;
      .product-cart__condition{
        font-size: 13px;
        color: #979797;
      }
      .actions {
        .shop-button  {
          margin: 0 auto;
          margin-bottom: 20px;
          font-family: $font-primary;
          transition: all .3s ease;
          width: 270px;
          max-width : 100%;
          height: 50px;
          font-size: 12px;
          text-transform: uppercase;
          background: #fff;
          border: 2px solid $color-main2;
          letter-spacing: 1.5px;
          justify-content: center;
          font-weight: 600;
          color: $color-main;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -moz-align-items: center;
          -ms-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          justify-content: center;
          transition: .3s;
          text-align: center;
          &:hover{
            background: $color-main2;
            color: #fff;
          }
        }
        .shop-button.go_cart{
          background: $color-main2;
          color : #fff;
          &:hover{
            background : $color-main3;
            border: 2px solid $color-main3;
          }
        }
        .checkout-button{
          margin: 0 auto;
          margin-bottom: 20px;
          font-family: $font-primary;
          transition: all .3s ease;
          width: 270px;
          max-width : 100%;
          height: 50px;
          text-transform: uppercase;
          font-size: 12px;
          background: $color-main2;
          border: 2px solid $color-main2;
          letter-spacing: 1.5px;
          justify-content: center;
          font-weight: 600;
          color: #fff;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -moz-align-items: center;
          -ms-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          justify-content: center;
          transition: .3s;
          text-align: center;
          &:hover{
            background: $color-main3;
            border: 2px solid $color-main3;
          }
        }
      }
      p{
        font-size: 13px;
        span{  
          color: $color-main2;
        }
      }
      .total_price{
        font-weight: 600;
        font-size: 11px;
        span{
          font-size: 22px;
          font-weight: 400;
        }
      }
    }
    .also_like_prod{
      border-top: 1px solid #eee;
      padding-top: 20px;
      position: relative;
      .title{
        font-size: 20px;
        margin-bottom: 20px;
      }
      .product-item-v1{
        .product-icon-action,.image-thumbnail{
          display: none !important;
        }
      }
      .prev-slide,.next-slide{
        position: absolute;
        top: -52px;
        font-size: 27px;
        color: $color-main;
        &:hover{
          color: $color-main2;
        }
        &.slick-disabled{
          color : gray;
          opacity : .4;
        }
      } 
      .prev-slide{
        right: 50px;
      }
      .next-slide{
        right: 20px;
      }
    }
  }
}
.btn-disabled {
  pointer-events: none;
  opacity: .5;
  cursor: default;
}
.page-wishlist{
  padding: 40px 0;
  .table-product{
    .table{
      border: 1px solid #dee2e6;
      th{
        border-bottom: 0;
        font-weight: 500;
        font-size: 12px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: $color-main;
        font-family: $font-primary;
        padding: 15px 20px;
        border-left: 1px solid #dee2e6;
      }
      .prod_thumb{
        width: 140px;
      }
      .prod_title{
        a{
          font-family: $font-primary;
          font-size: 14px;
          color: #a8a8a8;
          line-height: 1.6;
          font-weight: 400;
          &:hover{
            color: $color-main2;
          }
        }
      }
      .prod_price{
        ins, del{
          font-family: $font-primary;
          font-size: 14px;
          color: #a8a8a8;
          line-height: 1.6;
          font-weight: 400;
          text-decoration: none;
        }
      }
      .prod_btn{
        .shop-button{
          font-family: $font-primary;
          transition: all .3s ease;
          width: 200px;
          height: 55px;
          font-size: 12px;
          background: $color-main;
          letter-spacing: 2.2px;
          justify-content: center;
          text-transform: uppercase;
          font-weight: 600;
          color: #fff;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -moz-align-items: center;
          -ms-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          transition: .3s;
          text-align: center;
          cursor:pointer;
          border-radius: 0;
          margin: auto;
          &:hover{
            background: $color-main2;
          }
        }
      }
      .remove{
        .remove_prod{
          color: $color-main;
          font-size: 13px;
          &:hover{
            color: $color-main2;
          }
        }
      }
    }
  }
  .continue-shop{
    margin-top: 20px;
    .shop-button{
      font-family: $font-primary;
      transition: all .3s ease;
      width: 200px;
      height: 55px;
      font-size: 12px;
      background: $color-main;
      letter-spacing: 2.2px;
      justify-content: center;
      text-transform: uppercase;
      font-weight: 600;
      color: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -moz-align-items: center;
      -ms-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      transition: .3s;
      text-align: center;
      cursor:pointer;
      border-radius: 0;
      margin: auto;
      &:hover{
        background: $color-main2;
      }
    }
  }
}
@-webkit-keyframes underline-link {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  50% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }
  50.01% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}
@keyframes underline-link {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
  50% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
  }
  50.01% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}
@keyframes box-shadow{
  0%,100%{-webkit-box-shadow:0 0 0 0;-moz-box-shadow:0 0 0 0;box-shadow:0 0 0 0}50%{-webkit-box-shadow:0 0 0 4px;-moz-box-shadow:0 0 0 4px;box-shadow:0 0 0 4px}
}
#shopify-product-reviews{
  .spr-container{
    text-align: left;
    .spr-header{
      .spr-summary-actions{
        a{
          text-decoration:  none;
          color: #7a7a7a;
        }
        &:hover{
          a{
            color: $color-main2;
          }
        }
      }
    }

    .spr-form-review-rating{
      .spr-starrating{
        a{
          color: #f7941d;
        }
      }
    }
  }
  .spr-form-actions{
    .spr-button{
      color: #fff;
      background: $color-main;
      border: none;
      border-radius: 0;
      padding: 10px 20px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .2em;
      font-weight: 600;
      transition: all 0.5s ease;
      &:hover{
        background: $color-main2;
      }
    }
  }
} 
input,select, textarea{
  border: 1px solid #e4e4e4;
  color: $color-main;
}
.overlay-filter{
  &.active{
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(29,29,31,0.6);
  }
}
//Passwordpage
.coming_soon {
  .justify-content-center{
    display: flex;
    justify-content: center;
  }
  background-image: url(https://placehold.it/1902x1080);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0;

  .top_coming_soon {
    span {
      font-size: 16px;
      font-family: $font-primary;
      font-weight: 600;
      display: inline-block;
      position: relative;
      color: #fff;

      &:before {
        border: 1px solid #fff;
        content: "";
        width: 100%;
        position: absolute;
        bottom: -1px;
      }
    }
    h1 {
      font-size: 40px;
      margin-top: 22px;
      font-weight: 400;
      color: #fff;
    }
  }

  .time {
    margin-top: 100px;
    margin-bottom: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    ul {
      li {
        padding: 35px 45px;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        &:first-child {
          border-left: none;
        }
        p {
          font-family: $font-primary;
          font-size: 50px;
          font-weight: 700;
          color: #fff;
          margin-bottom: -5px !important;
        }

        span {
          font-family: $font-primary;
          font-size: 14px;
          font-weight: 500;
          letter-spacing: .2em;
          text-transform: uppercase;
          color: #fff;
        }
      }
    }
  }
  .signup {
    h5{
      font-size: 15px;
      margin-bottom: 25px;
      color: #fff;
    }
    .form-group.form_end.mb-0{
      margin-bottom: 15px;
    }
    p{
      color: #fff;
      margin-bottom:70px;
      margin-top: 15px;
      a{
        text-decoration:none;
        color: #fff;
      }
    }
    .form-control {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 0;
      height: 50px;
      border:none;
      color: #fff;
      &::placeholder {
        color: #fff;
        font-size: 16px;
        text-align: center;
      }
    }
    .btn-primary {
      color: $color-main;
      background-color: #fff;
      border: none;
      text-transform: uppercase;
      font-family: $font-primary;
      font-size: 16px;
      font-weight: 500;
      border-radius: 0;
      height: 50px;
      padding: 0 93px;
      margin: 40px 0 70px 0;
    }
    .btn-primary:not(:disabled):not(.disabled).active,
    .btn-primary:not(:disabled):not(.disabled):active,
    .show>.btn-primary.dropdown-toggle {
      color: $color-main;
      background-color: #fff;
      border-color: #fff;
      box-shadow: none;
    }
    ul {
      li {
        padding: 0 15px;
        a {
          text-decoration: none;
          color: #fff;
          display: block;
          transition: all 0.5s ease;
          &:hover {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
  @media(max-width : 575px){
    padding: 80px 10px;
    .top_coming_soon {
      span {
        font-size: 14px;
      }
      h1 {
        font-size: 27px;
        margin-top: 20px;
      }
    }
    .time {
      margin-top: 30px;
      margin-bottom: 30px;
      ul {
        li {
          padding: 23px 18px;
          p {
            font-size: 25px;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
    .signup {
      .btn-primary {
        padding: 0 50px;
        margin: 30px 0 30px 0;
      }
      ul {
        li {
          padding: 0 10px;
        }
      }
    }
  }
  @media(max-width : 767px) and (max-width : 992px){
    padding: 80px 10px;
    .top_coming_soon {
      span {
        font-size: 14px;
      }
      h1 {
        font-size: 27px;
        margin-top: 20px;
      }
    }
    .time {
      margin-top: 30px;
      margin-bottom: 30px;
      ul {
        li {
          padding: 23px 18px;
          p {
            font-size: 25px;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
    .signup {
      .btn-primary {
        padding: 0 50px;
        margin: 30px 0 30px 0;
      }
      ul {
        li {
          padding: 0 10px;
        }
      }
    }
  }
  @media(min-width : 1750) {
    padding: 195px 0 170px;
    .top_coming_soon {
      span {
        font-size: 16px;
        font-weight: 600;
      }
      h1 {
        font-size: 60px;
        margin-top: 22px;
        font-weight: 400;
      }
    }
    .time {
      margin-top: 150px;
      margin-bottom: 40px;
      ul {
        li {
          padding: 43px 55px;
          p {
            font-size: 60px;
            font-weight: 700;
            margin-bottom: -5px !important;
          }
          span {
            font-size: 14px;
            font-weight: 500;
            letter-spacing: .2em;
          }
        }
      }
    }
    .signup {
      h5{
        font-size: 15px;
        margin-bottom: 25px;
      }
      .form-group.form_end.mb-0{
        margin-bottom: 15px;
      }
      p{
        margin-bottom:70px;
        margin-top: 15px;
      }
      .form-control {
        border-radius: 0;
        height: 60px;
      }
      .btn-primary {
        font-size: 16px;
        font-weight: 500;
        height: 60px;
        padding: 0 93px;
        margin: 40px 0 70px 0;
      }
    }
  }
}
/* ========================================
RESPONSIVE
======================================== */
@media (min-width: 1200px) and (max-width: 1500px){
  .prod_largeimg{
    .content-page-detail{
      margin-right: 15px;
      .detail-info{
        width: 100%;
        padding-left: 30px; 
      }
    }  
  }
}
@media (min-width: 992px) and (max-width: 1199.98px){

  .product-list-view{
    .product-item-list{
      .product{
        .info-product{
          padding-left: 0;
        }
      }
    }
  }
  .collection-page-fullwidth{
    .content-page{
      .banner_full{
        margin-top: 20px;
        .banner_info{
          img{
            min-height : 340px;
            object-fit: cover;
          }
          .info{
            .big_title{
              font-size: 30px;
              line-height : 40px;
            }
            .mini_title{
              font-size: 14px;
            }
            .btn_shop{
              font-size: 12px;
            }
          }
        }
      }
      .banner_cate {
        margin: 20px 0 20px 0;
      }
    }
    .shop_control{
      padding : 25px 0 !important;
      .style_layout_prod{
        justify-content: flex-end;
      }
      .list-collection{
        margin-bottom: 0;
        margin-top: 20px;
      }
    }
    .filter-to-left{
      .filter_sidebar{
        padding: 30px;
      }
    }
  }
  .prod_largeimg{
    .content-page-detail{
      margin-right: 15px;
      .detail-info{
        width: 100%;
        padding-left: 25px; 
      }
    }  
    .btn-360{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_360{
        font-size : 10px !important;
      }
      top: 2% !important;
      left: 2% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .btn-video{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_video{
        font-size : 10px !important;
      }
      top: 2% !important;
      right: 2% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
  }
  .prod_extended,.product_sidebar,.prod_sticky{
    .btn-360{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_360{
        font-size : 10px !important;
      }
      bottom: 2% !important;
      left: 5% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .btn-video{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_video{
        font-size : 10px !important;
      }
      bottom: 2% !important;
      right: 7% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
  }
}
@media (min-width: 768px) and (max-width: 991.98px){
  .filter_ver2 .filter_sidebar {
    padding: 20px;
  }
  .breadcrumb_collection, .breadcrumb_collection2{
    .bg-breadcrumb{
      padding: 150px 0 80px 0 ;

    }
  }
  .product-list-view{
    .product-item-list{
      .product{
        .info-product{
          padding-left: 0;

        }
      }
    }
  }
  .collection-page-fullwidth,.collection-page-sidebar{
    .content-page{
      .banner_full{
        margin-top: 20px;
        .banner_info{
          img{
            min-height : 340px;
            object-fit: cover;
          }
          .info{
            .big_title{
              font-size: 30px;
              line-height : 40px;
            }
            .mini_title{
              font-size: 14px;
            }
            .btn_shop{
              font-size: 12px;
            }
          }
        }
      }
      .banner_cate {
        margin: 20px 0 20px 0;
      }
    }
    .shop_control{
      padding : 25px 0 !important;
      .style_layout_prod{
        justify-content: flex-end;
      }
      .list-collection{
        margin-bottom: 0;
        margin-top: 20px;
      }
    }
    .filter-to-left{
      .filter_sidebar{
        padding: 30px;
      }
    }
  }
  .prod_largeimg{
    .content-page-detail{
      margin-right: 15px;
      .detail-info{
        width: 100%;
        padding-left: 0px; 
      }
    } 
    .btn-360{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_360{
        font-size : 10px !important;
      }
      top: 2% !important;
      left: 2% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .btn-video{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_video{
        font-size : 10px !important;
      }
      top: 2% !important;
      right: 2% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
  }
  .prod_extended,.product_sidebar,.prod_sticky{
    .btn-360{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_360{
        font-size : 10px !important;
      }
      bottom: 2% !important;
      left: 5% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }

    .btn-video{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_video{
        font-size : 10px !important;
      }
      bottom: 2% !important;
      right: 7% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }

    .content-page-detail{
      padding-bottom: 20px;
      .detail-info{
        width: 100%;
        padding-left: 0px; 
      }
    }
    .sidebar_info {
      padding-top: 30px;
    }
  }
}
@media (min-width: 576px) and (max-width: 767.98px){
  .page-wishlist{
    th{
      display: none;
      border-top: none;
    }
    td {
      &:before {
        content: attr(data-label);
        float: left;
        text-align: center;
        font-size: 12px;
        padding-right: 10px;
      }
    }
    .table--responsive {
      tr, td ,{
        float: left;
        clear: both;
        width: 100%;
      }
    }

    padding: 40px 0;
    .table-product{
      .table{
        border: 1px solid #dee2e6;
        td{
          border-top: 0;
        }
        th{
          border-bottom: 0;
          font-weight: 500;
          font-size: 12px;
          letter-spacing: .2em;
          text-transform: uppercase;
          color: $color-main;
          font-family: $font-primary;
          padding: 15px 20px;
          border-left: 1px solid #dee2e6;
        }
        .prod_thumb{
          width: 100%;
          .maxus-bxwishlist__img{
            float: right;
          }
        }
        .prod_title{
          text-align: right;
        }
        .prod_price{
          text-align: right;
        }
        .prod_btn{
          .shop-button{
            float: right;
            margin: 0;
            width: 141px;
            height: 50px;
            &:hover{
              background: $color-main2;
            }
          }
        }
        .remove{
          text-align: right;
        }
      }
    }
  }
  .page-cart .content-cart-page .cart_totals{
    .continue-shopping-1{
      margin: 0;
    }
    .cart-check{
      padding: 41px 15px 63px;
      .checkout-button{
        padding: 18px 25px;
      }
    }
    .notice-currency{
      font-size: 14px;
    }
  }
  .page-cart{
    .content-pages {
      table{
        td{
          border-top :  none;
        }
      }
      padding-top: 20px;
      h1 {
        font-size: 20px;
        margin-top: 20px;
      }
      .product-name {
        a {
          font-size:12px;
          float: right;
        }
      }
      .product-price, .product-subtotal {
        span {
          font-size:12px;
          float: right;
        }
      }
      .table-responsive {
        th{
          display: none;
          border-top: none;
        }
        td {
          &:before {
            content: attr(data-label);
            float: left;
            text-align: center;
            font-size: 12px;
            padding-right: 10px;
          }
        }
        .table--responsive {
          border: 1px solid #dcdcdc;
          tr, td ,{
            float: left;
            clear: both;
            width: 100%;
          }
        }
        .cart_item {
          border-bottom: 1px solid #dcdcdc;
          .product-name-thumb, .product-price, .product-quantity, .product-subtotal, .product-remove,.product-thumbnail{
            padding: 10px !important;
          }
        }
        .product-thumbnail {
          width: 100% !important;
          a { 
            img {
              float:right;
            }
          }
        }
        .js-qty {
          float:right;
        }
        .product-remove {
          a {
            float: right;
          }
        }
      }
      .shop-table { 
        thead, tbody, tfoot { 
          tr { 
            th {
              outline: none;
              border:none;
            }
            td {
              outline: none;
              border:none;
            }
          }
        }
      }
      .shipping {
        label {
          margin-top: 10px;
          font-size: 14px;
        }
      }
      .order-total {
        text-align: center;
        h5 {
          font-size: 14px;
          margin-top: 20px;
        }
        h2 {
          color: #222;
          font-size: 40px;
          font-weight: 700;
          margin-bottom: 20px;
        }
      }
      .actions, .wc-proceed-to-checkout {
        input {
          font-size: 12px;
          line-height: 23px;
        }
      }
    }
  }
  .contact-page{
    padding: 30px 0 30px 0;
    .title_desc{
      font-size: 20px;
      br{
        display: none;
      }
    }
  }
  .contact-page .address-shop .shop-name{
    font-size: 18px
  }
  .contact-page .info-shop .title{
    font-size: 16px;
  }
  .aboutus-pages{ 
    padding-top: 30px;
    padding-bottom: 40px;
    .about-instagram{
      padding-top: 30px;
      .instagram_v2 {
        .text_top{
          .title_insta {
            font-size: 30px !important;
            margin-bottom: 21px;        
          }
          .des_insta {
            font-size: 16px !important;
          }
        }
        .content {
          .content_text{
            a {
              font-size:40px;
            }
          }
        } 
        button.slick-prev,
        button.slick-next {
          font-size: 20px !important;
          border: none;
          top: 50% !important;
          width: 40px !important;
          color: #c8c8c8;
          box-shadow: 0 5px 5px rgba(0,0,0,0.09);
          height: 40px !important;
          border-radius: 0% !important;
          text-align: center;
          background-color:rgba(225,225,225,0.9);
          opacity: 1 !important;
          z-index:1;
          visibility: visible !important;
          position: absolute;
        }
        button.slick-prev {
          left: 0px !important;
        }
        button.slick-next {
          right: 0px !important;
        }

        .galary_inta{
          margin-top:45px;
          &:hover{
            button.slick-prev {
              left: 0px;
            }
            button.slick-next {
              right: 0px;
            }
          }
        }
      }
    }
    .about-introduce{
      .intro_detail{
        padding-bottom: 20px;
        .info-intro{
          .des_intro{
            font-size: 16px;
          }
          .title_intro{
            font-size: 30px;
          }
        }
      }
      .intro_image{
        padding-bottom: 20px;
      }
    }
  }
  .article-page .article_sidebar{
    padding-top: 30px;
  }
  .article-page .blog-comment-detail .comment-details{ 
    padding: 25px 0;
    .comment-thumb{
      width: 80px;
      margin-right: 12px;
    }
  }
  .article-page .reply-comment .contact-form{
    .contact-name{
      width: 100%;
      padding-right: 0;
      float: none;
    }
    .contact-email{
      width: 100%;
      padding-left: 0;
      float: none;  
    }
  }
  .article-page .reply-comment .title_form{
    padding: 20px 0;
  }
  .article-page {
    .content-single-blog { 
      .post-details{ 
        .article_title{
          font-size: 30px;
          width: 100%;
        }
        .cmt-author{
          margin-bottom: 25px;
        }
        .cate-tags{
          .tags {
            padding-bottom: 20px;
          }
          .cate{
            justify-content: start;
          }
        }
      }
    }
  }
  .blog-page {
    .blog_sidebar{
      padding-top: 20px;
    }
    .content-blog-page{
      .blog-list-view{
        padding-bottom: 0;
        .blog_standar{
          padding-top: 20px;
          .post-info{
            text-align: center;
            .single-post-date{
              margin-top: 15px;
            }
            .title_info{
              padding-left: 0;
            }
            .des_article{
              text-align: left;
            }
          }
        }
      }
    }
  }
  .blog-page .content-blog-page .blog-list-view .blog_grid{
    padding-top: 30px;
  }
  .filter_ver2 .filter_sidebar {
    padding: 15px;
  }
  .breadcrumb_collection{
    .bg-breadcrumb{
      padding: 70px 0 50px 0 ;
      .title-page{
        h2{
          font-size: 35px;
        }
      }
    }
  }
  .product-list-view{
    .product-item-list{
      .product{
        .info-product{
          padding-left: 0;
          padding-top: 25px;
          .title-product{ 
            a{
              font-size: 16px;
              font-weight: 500;
            }
          }
          .price-product{
            .price-old{
              font-size: 14px;
            }
            .price{
              font-size: 16px !important;
            }     
          }         
          .product-icon-action{
            .quick-view{
              display: none;
            }  
          }
        }
      }
    }
  }
  .collection-page-fullwidth,.collection-page-sidebar{
    .content-page{
      .title-cate{
        padding-top : 20px;
      }
      .banner_full{
        margin-top: 20px;
        .banner_info{
          img{
            min-height : 340px;
            object-fit: cover;
          }
          .info{
            .big_title{
              font-size: 22px;
            }
            .mini_title{
              font-size: 14px;
            }
            .btn_shop{
              font-size: 12px;
            }
          }
        }
      }
      .banner_cate {
        margin: 20px 0 0px 0;
        .banner_title {
          padding-bottom: 0;
        }
      }
    }
    .shop_control{
      padding : 25px 0 !important;
      .filter_sortby{
        justify-content: center;
      }
      .style_layout_prod{
        justify-content: center;
        padding: 20px 0;
      }
      .list-collection{
        margin-bottom: 0;
        .title-collection{
          a{
            font-size:  14px !important;
            line-height: 20px !important;
          }
        }
      }
    }
    .filter-to-left{

      width: 100%;
      left: -100%;
      .filter_sidebar{
        padding: 30px;
      }
    }
  }
  .prod_extended,.product_sidebar,.prod_sticky{
    .btn-360{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_360{
        font-size : 10px !important;
      }
      bottom: 2% !important;
      left: 7% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }

    .btn-video{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_video{
        font-size : 10px !important;
      }
      bottom: 2% !important;
      right: 7% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .content-page-detail{
      padding-bottom: 20px;
      .detail-info{
        width: 100%;
        padding-left: 0px; 
        .product-title {
          font-size: 18px;
        }
        .product-price {
          del{
            font-size: 16px;
          }
          ins{
            font-size: 18px;
          }
        }
      }
    } 
  }
  .prod_largeimg{
    .btn-360{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_360{
        font-size : 10px !important;
      }
      top: 2% !important;
      left: 2% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }

    .btn-video{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_video{
        font-size : 10px !important;
      }
      top: 2% !important;
      right: 2% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .content-page-detail{
      margin-left: 15px;
      margin-right: 15px;
      .detail-info{
        width: 100%;
        padding-left: 0px; 
        .product-title {
          font-size: 18px;
        }
        .product-price {
          del{
            font-size: 16px;
          }
          ins{
            font-size: 18px;
          }
        }
      }
    }  
  }
  .tab-pd-details{
    .tab_prod{
      li{
        a{
          padding: 13px 25px;
        }
      }
    }
  }

}
@media (max-width: 575.98px){
  .overlay{
    position: unset;
  }
  .page-wishlist{
    th{
      display: none;
      border-top: none;
    }
    td {
      &:before {
        content: attr(data-label);
        float: left;
        text-align: center;
        font-size: 12px;
        padding-right: 10px;
      }
    }
    .table--responsive {
      tr, td ,{
        float: left;
        clear: both;
        width: 100%;
      }
    }

    padding: 40px 0;
    .table-product{
      .table{
        border: 1px solid #dee2e6;
        td{
          border-top: 0;
        }
        th{
          border-bottom: 0;
          font-weight: 500;
          font-size: 12px;
          letter-spacing: .2em;
          text-transform: uppercase;
          color: $color-main;
          font-family: $font-primary;
          padding: 15px 20px;
          border-left: 1px solid #dee2e6;
        }
        .prod_thumb{
          width: 100%;
          .maxus-bxwishlist__img{
            float: right;
          }
        }
        .prod_title{
          text-align: right;
        }
        .prod_price{
          text-align: right;
        }
        .prod_btn{
          .shop-button{
            float: right;
            margin: 0;
            width: 141px;
            height: 50px;
            &:hover{
              background: $color-main2;
            }
          }
        }
        .remove{
          text-align: right;
        }
      }
    }


  }
  .page-cart .content-cart-page .cart_totals{
    .continue-shopping-1{
      margin: 0;
    }
    .cart-check{
      padding: 41px 15px 63px;
      .checkout-button{
        padding: 18px 25px;
      }
    }
    .notice-currency{
      font-size: 14px;
    }
  }
  .page-cart{
    .content-pages {
      table{
        td{
          border-top :  none;
        }
      }
      padding-top: 20px;
      h1 {
        font-size: 20px;
        margin-top: 20px;
      }
      .product-name {
        a {
          font-size:12px;
          float: right;
        }
      }
      .product-price, .product-subtotal {
        span {
          font-size:12px;
          float: right;
        }
      }
      .table-responsive {
        th{
          display: none;
          border-top: none;
        }
        td {
          &:before {
            content: attr(data-label);
            float: left;
            text-align: center;
            font-size: 12px;
            padding-right: 10px;
          }
        }
        .table--responsive {
          border: 1px solid #dcdcdc;
          tr, td ,{
            float: left;
            clear: both;
            width: 100%;
          }
        }
        .cart_item {
          border-bottom: 1px solid #dcdcdc;
          .product-name-thumb, .product-price, .product-quantity, .product-subtotal, .product-remove,.product-thumbnail{
            padding: 10px !important;
          }
        }

        .product-thumbnail {
          width: 100% !important;
          a { 
            img {
              float:right;

            }
          }
        }
        .js-qty {
          float:right;
        }
        .product-remove {
          a {
            float: right;
          }
        }
      }
      .shop-table { 
        thead, tbody, tfoot { 
          tr { 
            th {
              outline: none;
              border:none;
            }
            td {
              outline: none;
              border:none;
            }
          }
        }
      }
      .shipping {
        label {
          margin-top: 10px;
          font-size: 14px;
        }
      }
      .order-total {
        text-align: center;
        h5 {
          font-size: 14px;
          margin-top: 20px;
        }
        h2 {
          color: #222;
          font-size: 40px;
          font-weight: 700;
          margin-bottom: 20px;
        }
      }
      .actions, .wc-proceed-to-checkout {
        input {
          font-size: 12px;
          line-height: 23px;
        }
      }
    }
  }
  .content-404{

    .page-title{
      font-size: 24px;
    }
    .sub-title{
      font-size: 14px;
    }
  }
  .contact-page{
    padding: 30px 0 30px 0;
    .title_desc{
      font-size: 20px;
      br{
        display: none;
      }
    }
  }
  .contact-page .address-shop .shop-name{
    font-size: 18px
  }
  .contact-page .info-shop .title{
    font-size: 16px;
  }
  .aboutus-pages{ 
    padding-top: 30px;
    padding-bottom: 40px;
    .about-instagram{
      padding-top: 30px;
      .instagram_v2 {
        .text_top{
          .title_insta {
            font-size: 30px !important;
            margin-bottom: 21px;        
          }
          .des_insta {
            font-size: 16px !important;
          }
        }
        .content {
          .content_text{
            a {
              font-size:40px;
            }
          }
        } 
        button.slick-prev,
        button.slick-next {
          font-size: 20px !important;
          border: none;
          top: 50%;
          width: 40px !important;
          height: 40px !important;
          border-radius: 0% !important;
          color: #c8c8c8;
          box-shadow: 0 5px 5px rgba(0,0,0,0.09);
          text-align: center;
          background-color:rgba(225,225,225,0.9);
          opacity: 1 !important;
          z-index:1;
          visibility: visible!important;
          position: absolute;
        }
        button.slick-prev {
          left: 0px !important;
        }
        button.slick-next {
          right: 0px !important;
        }

        .galary_inta{
          margin-top:45px;
          &:hover{
            button.slick-prev {
              left: 0px;
            }
            button.slick-next {
              right: 0px;
            }
          }
        }
      }
    }
    .about-introduce{
      .intro_detail{
        padding-bottom: 20px;
        .info-intro{
          .des_intro{
            font-size: 16px;
          }
          .title_intro{
            font-size: 30px;
          }
        }
      }
      .intro_image{
        padding-bottom: 20px;
      }
    }
  }
  .aboutus-pages{ 
    .about-servicebox{
      padding-top: 70px;
      padding-bottom: 70px;
      .title-servicebox{
        padding-bottom: 20px;
        margin-bottom: 30px;
        font-size: 25px;
      }
      .itemtservice{
        border-left: 1px solid transparent;
        .box-service{
          width: 100%;
          .title{
            font-size: 18px;
          }
          .content{
            font-size: 15px;
          }
        }
      }
    }
  }
  .article-page .article_sidebar{
    padding-top: 30px;
  }
  .article-page .blog-comment-detail .comment-details{ 
    padding: 25px 0;
    .comment-thumb{
      width: 80px;
      margin-right: 12px;
    }
  }
  .article-page .reply-comment .contact-form{
    .contact-name{
      width: 100%;
      padding-right: 0;
      float: none;
    }
    .contact-email{
      width: 100%;
      padding-left: 0;
      float: none;  
    }
  }
  .article-page .reply-comment .title_form{
    padding: 20px 0;
  }
  .article-page {
    .content-single-blog { 
      .post-details{ 
        padding-top: 20px;
        .article_title{
          font-size: 30px;
          width: 100%;
        }
        .cmt-author{
          margin-bottom: 25px;
        }
        .cate-tags{
          .tags {
            padding-bottom: 20px;
          }
          .cate{
            justify-content: start;
          }
        }
      }
    }
  }
  .blog-page {
    .blog_sidebar{
      padding-top: 20px;
    }
    .content-blog-page{
      .blog-list-view{
        padding-bottom: 0;
        .blog_standar{
          padding-top: 20px;
          .post-info{
            text-align: center;
            .single-post-date{
              margin-top: 15px;
            }
            .title_info{
              padding-left: 0;
            }
            .des_article{
              text-align: left;
            }
          }
        }
      }
    }
  }
  .blog-page .content-blog-page .blog-list-view .blog_grid{
    padding-top: 30px;
  }
  .collection-page-fullwidth .collection_prod, .collection-page-sidebar .collection_prod{
    margin-top: 0;
  }
  .filter_ver2 .filter_sidebar {
    padding: 15px;
    .widget-title{
      font-size: 13px !important;
    }
  }
  .breadcrumb_collection, .breadcrumb_collection2{
    .bg-breadcrumb{
      padding: 70px 0 50px 0 ;
      .title-page{
        h2{
          font-size: 35px;
        }
      }
    }
  }
  .product-list-view{
    .product-item-list{
      .product{
        .info-product{
          padding-left: 0;
          padding-top: 25px;
          .title-product{ 
            a{
              font-size: 16px;
              font-weight: 500;
            }
          }
          .price-product{
            .price-old{
              font-size: 14px;
            }
            .price{
              font-size: 16px !important;
            }     
          }         
          .product-icon-action{
            max-width: 200px;
            .quick-view{
              display: none;
            }  
          }
        }
      }
    }
  }
  .collection-page-fullwidth,.collection-page-sidebar{
    .content-page{
      .title-cate{
        padding-top : 0;
      }
      .banner_full{
        margin-top: 15px;
        .banner_info{
          img{
            min-height : 340px;
            object-fit: cover;
          }
          .info{
            .big_title{
              font-size: 22px;
            }
            .mini_title{
              font-size: 14px;
            }
            .btn_shop{
              font-size: 12px;
            }
          }
        }
      }
      .banner_cate {
        margin: 15px 0 0px 0;
        .banner_title {
          padding-bottom: 0;
        }
      }
    }
    .shop_control{
      padding : 25px 0 !important;
      .filter_sortby{
        justify-content: center;
      }
      .style_layout_prod{
        justify-content: center;
        padding: 20px 0;
      }
      .list-collection{
        margin-bottom: 0;
        .title-collection{
          a{
            font-size:  14px !important;
            line-height: 20px !important;
          }
        }
      }
    }
    .filter-to-left{

      width: 100%;
      left: -100%;
      .filter_sidebar{
        padding: 30px;
      }
    }
  }
  .tab-pd-details{
    .tab_prod{
      display: block;
      li{
        a{
          padding: 13px 28px;
        }
      }
    }
  }
  .prod_extended,.product_sidebar,.prod_sticky{
    .btn-360,{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_360{
        font-size : 10px !important;
      }
      bottom: 2% !important;
      left: 7% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .btn-video{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_video{
        font-size : 10px !important;
      }
      bottom: 2% !important;
      right: 7% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .gutter {
      &:nth-child(even) {
        padding-left: 15px; 
      }
      &:nth-child(odd) {
        padding-right: 15px; 
      }
    }
    .content-page-detail{
      padding-bottom: 20px;
      .detail-info{
        width: 100%;
        padding-left: 0px; 
        .product-title {
          font-size: 18px;
        }
        .product-price {
          del{
            font-size: 16px;
          }
          ins{
            font-size: 18px;
          }
        }
      }
    } 
  }
  .prod_largeimg{
    .btn-360{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_360{
        font-size : 10px !important;
      }
      top: 2% !important;
      left: 2% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .btn-video{
      svg{
        width: 27px;
        height: 27px;
      }
      .text_video{
        font-size : 10px !important;
      }
      top: 2% !important;
      right: 2% !important;
      max-width: 150px !important;
      height: 40px !important;
      line-height: 40px  !important;
      border-radius: 50px !important;
      padding: 0 5px !important;
    }
    .content-page-detail{
      margin-left: 15px;
      margin-right: 15px;
      .detail-info{
        width: 100%;
        padding-left: 0px; 
        .product-title {
          font-size: 18px;
        }
        .product-price {
          del{
            font-size: 16px;
          }
          ins{
            font-size: 18px;
          }
        }
      }
    }  
  }
  .prod_sticky{
    .content-page-detail{
      .img_sticky{
        margin-bottom: 15px;
      }
      .sticky_content{
        .detail-info{
          padding-top: 25px;
        }
      }
    }
  }
  .col-6 {
    &:nth-child(even) {
      padding-left: 7.5px; 
    }
    &:nth-child(odd) {
      padding-right: 7.5px; 
    }
  }
  .product-item-v1{
    .product {
      .sold-out{
        transform:  translate(-50%, -50%) rotate(0deg) scale(1); 
      }
      .product-icon-action{
        display: none;
      }
      .label-sale{
        top: 5px;
        right: 5px;
        left: unset;
      }
      .label-new{
        top: 5px;
        left: 5px;
      }
      .info-product .price-product{
        margin-bottom: 7px;
        .price{
          font-size: 13px;
        }
      }
    }
  }
}
.gutter {
  &:nth-child(even) {
    padding-left: 7px; 
  }
  &:nth-child(odd) {
    padding-right: 7px; 
  }
}
.wrap-rating{
  .spr-badge{
    .spr-starrating {
      .spr-icon{
        color: #f2b03d;
      }
    }
  }
}
// 5 col 
.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-2dot4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}
@media (min-width: 540px) {
  .col-sm-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 720px) {
  .col-md-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 960px) {
  .col-lg-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 1140px) {
  .col-xl-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
}
.trans-product {
  transition: all .5s ease;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}
/* ========================================
BEGIN CSS Eveland - NGA
======================================== */
@keyframes aniName {
  0% {
    left: 0px;
  }
  50% {
    left: 2%;
  }
  100% {
    left: 0px;
  }
}
@-moz-keyframes aniName {
  0% {
    left: 0px;
  }
  50% {
    left: 2%;
  }
  100% {
    left: 0px;
  }
}
@-webkit-keyframes aniName {
  0% {
    left: 0px;
  }
  50% {
    left: 2%;
  }
  100% {
    left: 0px;
  }
}
@-o-keyframes aniName {
  0% {
    left: 0px;
  }
  50% {
    left: 2%;
  }
  100% {
    left: 0px;
  }
}
@keyframes shine{100%{left:125%}}
@-moz-keyframes shine{100%{left:125%}}
@-webkit-keyframes shine{100%{left:125%}}
@-o-keyframes shine{100%{left:125%}}
@keyframes animations {
  0% {transform: rotate(-5deg);}
  50% {transform: rotate(5deg);}
  100% {transform: rotate(-5deg);}
}
@-moz-keyframes animations {
  0% {transform: rotate(-5deg);}
  50% {transform: rotate(5deg);}
  100% {transform: rotate(-5deg);}
}
@-webkit-keyframes animations {
  0% {transform: rotate(-5deg);}
  50% {transform: rotate(5deg);}
  100% {transform: rotate(-5deg);}
}
@-o-keyframes animations {
  0% {transform: rotate(-5deg);}
  50% {transform: rotate(5deg);}
  100% {transform: rotate(-5deg);}
}
@keyframes animationsRight{
  0%{opacity:0;right:10px}
  100%{opacity:1;right:-10px}
}
@-moz-keyframes animationsRight{
  0%{opacity:0;right:10px}
  100%{opacity:1;right:-10px}
}
@-webkit-keyframes animationsRight{
  0%{opacity:0;right:10px}
  100%{opacity:1;right:-10px}
}
@-o-keyframes animationsRight{
  0%{opacity:0;right:10px}
  100%{opacity:1;right:-10px}
}
@keyframes animationsLeft{
  0%{opacity:0;left:10px}
  100%{opacity:1;left:-10px}
}
@-moz-keyframes animationsLeft{
  0%{opacity:0;left:10px}
  100%{opacity:1;left:-10px}
}
@-webkit-keyframes animationsLeft{
  0%{opacity:0;left:10px}
  100%{opacity:1;left:-10px}
}
@-o-keyframes animationsLeft{
  0%{opacity:0;left:10px}
  100%{opacity:1;left:-10px}
}
@keyframes mations {
  from {transform:translateY(-100%);}
  to {transform:translateY(0);}
}
@-moz-keyframes mations {
  from {transform:translateY(-100%);}
  to {transform:translateY(0);}
}
@-webkit-keyframes mations {
  from {transform:translateY(-100%);}
  to {transform:translateY(0);}
}
@-o-keyframes mations {
  from {transform:translateY(-100%);}
  to {transform:translateY(0);}
}
body {
  font-family: $font-primary;
  position : relative;
  transition: all 0.3s ease;
  right : 0;
  &.activedestop{
    margin-top:522px;
    transition: all .5s ease;
  }
  &.cartover{
    overflow: hidden;
  } 
}
.promo_topbar{
  transition: all .5s ease;
  background-size: cover;
  background-position: center;
  span{
    color:#fff;
    font-size: 18px;
    display: inline-block;
    padding: 14px 0;
    em{
      color: #58d27d;
      font-style: normal;
    }
  }
  .btn_promo{
    color: $color-main;
    background: #fff;
    padding: 5px 13px;
    font-size: 11px;
    margin-left: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 15px;
    transition: .3s;
    &:hover{
      background: $color-main;
      color: #fff;
    }
  }
  .close_promo_topbar{   
    top:50%;
    right: 20px;
    transform:translateY(-50%);
    svg{
      fill:#fff;
    }
  }
  &.active{   
    max-height: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
  }
}
.poup-login-destop{
  width: 500px;
  margin: auto;
  background-color: #fff;
  box-shadow: 7px 6px 40px 0px rgba(204,204,223,0.16);
  position: fixed;
  max-width: 90%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 600px;
  padding: 50px;
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  &.active {
    opacity: 1;
    visibility: visible;
    z-index: 11;
  }
  .form-control{
    height: 55px;
    border-radius: 0;
  }
  input{
    &::placeholder{
      font-size: 13px;
    }
    &:focus,
    &:active{
      &::placeholder{
        color: $color-main;
      }
    }
  }
  .overlay_login-content{
    .eveland-close-login{
      color: #fff;
      font-size: 20px;
      position: absolute;
      top: -36px;
      right: 0;
      transition: all .5s ease;
      display: inline-block;
      &:hover{
        transform: rotate(180deg);
      }
    }
    .box-register{
      display: block;
      text-align: center;
      margin-top: 30px;
      padding: 10px;
      background: #f2f2f2;
      border: 1px solid #e8eced;
      font-size: 14px;
      a{
        &:hover{
          color: $color-main2;
        }
      }
    }
    .btn{
      height: 55px;
      border-radius: 0;
      background-color: $color-main;
      font-size: 14px;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: .2em;
      font-weight: 600;
      margin-top: 20px;
      width: 100%;
      transition: all .3s ease;
      border: none;
      &:hover{
        background-color: $color-main2;
      }
    }
    .formlogin-destop{
      width: 85%;
      .login-icon-popup-login{
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px
      }
      .title-tab-login{
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        color: $color-main;
        text-transform: unset;
        padding-top: 20px;
      }
      .form-check{
        padding-left: 0;
        text-align: left;
        font-size: 14px;
        a{
          color: #c5c4c4;
          &:hover{
            color: $color-main2;
          }
        }
      }
      .or_creat{
        .box-register{
          display: block;
          text-align: center;
          margin-top: 30px;
          padding: 10px;
          background: #f2f2f2;
          border: 1px solid #e8eced;
          font-size: 14px;
          a{
            color: #c5c4c4;
            &:hover{
              color: $color-main2;
            }
          }
        }
      }
    }
    .block-login{
      .login-icon{
        font-size: 35px;
      }
      .title_resgister{
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: .2em;
        font-weight: 500;
        padding-bottom: 20px;
      }
    }
    .form_register-destop{
      width: 85%;
      .login-icon{
        font-size: 35px;
      }

      .title_resgister{
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: .2em;
        font-weight: 500;
      }
    }
  }
}
.bg-login-popup{
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  transition: 0.5s;
  &.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
  }
}
.label_menu{
  top: -13px;
  left: 100%;
  transform: translateX(-50%);
  font-size: 8px;
  display: inline-block;
  text-transform: uppercase;
  line-height: 16px;
  padding: 0 5px;
  font-weight: 600;
  color: #fff;
  &:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    display: inline-block;
    top: 100%;
    left: 10px;
    border-right: 4px solid transparent;
    border-top: 4px solid ;
  }
}
.search-full-destop{
  .search-eveland{  
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    transition: height 1s ease;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transition: transform .35s cubic-bezier(.46,.01,.32,1),opacity .4s ease-out;
    z-index: 2;
    background-color: #fff;
    .drawer-search-top{
      display: block;
      padding: 30px 15px;
      transition-delay: .2s;
      transition: all .5s ease;
      transform: translateY(-30px);
      .drawer-search-title{
        font-size: 40px;
        text-align:center;
        color: $color-main;
        font-weight: 600;
        margin-top: 0;
        line-height: 1.2;
        text-transform: unset;
        margin-bottom: 1em;
      }   
    }
    .wg-search-form{
      width: 900px;
      margin: 0 auto;
      position: relative;
      transition: all .6s linear;
      transform: translateY(-100%);
      opacity: 0;
      visibility: hidden;
      .search-input{
        height: 44px;
        background-color: #fff;
        color: $color-main;
        border: none;
        border-bottom: 2px solid #e8e8e8;
        line-height: 42px;
        width: 100%;
        &:active,
        &:focus{
          border-bottom: 2px solid #bbbaba;        
        }
      }
      button{
        position: absolute;
        top: 0;
        right: 0;
        color: #666;
        font-size: 22px;
        height: 43px;
        width: 43px;
        text-align: center;
        padding: 0;
        font-weight: 900;
      }
    }
    .drawer_back{
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 2;
      a{
        font-size: 12px;
        line-height: 35px;
        width: 35px;
        height: 35px;
        text-align: center;
        display: inline-block;
        text-transform: uppercase;
        letter-spacing: 1.5px;
      }
    }
    &.active{
      height: auto;
      opacity: 1;
      visibility: visible;
      transition: all 0.5s;
      z-index: 101;
      padding-bottom: 50px;
      .drawer-search-top{
        transform: translateY(0px);
      }
      .wg-search-form{
        transform: translateY(0);
        transition-delay: .3s;
        opacity: 1;
        visibility: visible;
      }
    }
    .result_prod {
      width: 900px;
      margin: auto;
      max-width: 100%;
      height: 260px;
      overflow-y: auto;
      overflow-x: hidden;
      margin-top: 20px;
      &::-webkit-scrollbar {
        width: 3px;
      }
      &::-webkit-scrollbar-track  {
        background-color: #eee;
      }
      &::-webkit-scrollbar-thumb  {
        background-color: #c1c1c1;
        border-radius: 20px;
        opacity: .8;
      }
      .prod_sidebar{
        padding-left: 0;
        padding-right: 0;
        .product_info{
          overflow: hidden;
          list-style: none;
          border-bottom: 1px solid #f1f1f1;
          padding: 15px 0;
          position: relative;
          img{
            width: 100%;
            float: left;
            max-width: 80px;
            margin-right: 15px;
            border: 1px solid #e4e6ec;
          }
          .title-product{
            line-height: 20px;
            margin-bottom: 2px;
            a{
              font-family: $font-primary;
              font-size: 14px;
              font-weight: 400;
              color: $color-main;   
              &:hover{
                color: $color-main2;
              }
              .hightlight{
                background: $color-main2;
                color: #fff;
                padding: 0 1px;
              }
            }
          }
          .price-product{
            .price-old {
              font-family: $font-primary;
              font-size: 11px;
              font-weight: 300;
              color: #c1c1c1;
              margin-left: 5px;
            }
            .price{
              font-family: $font-primary;
              font-size: 14px;
              font-weight: 600;
              color: $color-main2; 
            }
          }
        }
      }
      .btn_viewall{
        text-align: center;
        a{
          font-size: 14px;
          color: $color-main;
          &:hover{
            color: $color-main2;
          }
        }
      }
      @media(max-width: 767px){
        width: 90%;
        max-height: calc(100vh - 260px);
        overflow-y: auto;
        overflow-x: hidden;
      }
      @media(min-width: 768px) and (max-width: 992px){
        width: 90%;
      }
    }
  }
  .bg_search_box{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    position: fixed;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    &.active {
      opacity: 1;
      visibility: visible;
      transition: all 0.5s ease;
    }
  }
}
.menu_moblie {
  justify-content: space-between;
  padding: 15px;
  background-color: #fff;
  position: relative;
  z-index: 2;
  transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
  &.menu_mobilescroll {
    -webkit-animation: mations 1s ease;
    animation: mations 1s ease;
    transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
  }
  &.engoc-disable-sticky{
    position: unset;
  }
  .menuleft {
    width: 70px;
    .iconmenu{
      display: inline-block;
      vertical-align: middle;
      text-transform: uppercase;
      color: $color-main;
      span{
        text-align: left;
        display: block;
        width: 23px;
        height: 2px;
        background: $color-main;
        margin-bottom: 6px;
        &:nth-child(2) {
          width: 12px;
        }
        &:nth-child(3) {
          width: 17px;
        }
      }
    }
  }
  .menuright {
    width: 70px;
    text-align: right;
    i{font-size: 20px;
      font-weight: bold;
      color: $color-main; 
    }
    svg{
      width : 22px;
      height : 22px;
      fill : $color-main;
    }
    a {
      position: relative;
      color: $color-main;
      font-size: 23px;
      text-decoration:none;
      span {
        color: $color-main2;
        display: block;
        font-size: 14px;
        position: absolute;
        text-align: center;
        top: -5px;
        right: -4px;
      }
    }
  }
}
.box_contentmenu_background {
  background-color: #000000c4;
  z-index: 4;
  top: 0px;
  left: 0;
  position: fixed;
  overflow: auto;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  &.active {
    opacity: 1;
    visibility: visible;
  }
}
.box_contentmenu {  
  height: 100%;
  width: 320px;
  top: 0px;
  left: -320px;
  max-width : 100%;
  z-index: 5;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background-color: #fff;
  &.active {
    opacity: 1;
    visibility: visible;
    left: 0;
    transition: all 0.3s ease;
    z-index: 99999999;
  }
  .form-control{
    border-radius: 0;
    height: 45px;
  }
  input{
    &::placeholder{
      color: #ddd;
      font-size: 13px;
    }
    &:focus,
    &:active{
      &::placeholder{
        color: $color-main;
      }
    }
  }
  button{
    border-radius: 0;
  }
  .tab_content_menu_mobile {
    width: 100%;
    height: 100%;
    .nav-tabs {
      border-bottom: none;
      margin-bottom: 0px !important;
    }
    ul {
      width: 100%;
      .toptab_li {
        width: 50%;
        display: inline-block;

        a {
          background-color: #fff;
          color: $color-main;
          float: left;
          display: block;
          width: 100%;
          text-align: center;
          height: 55px;
          line-height: 55px;
          padding: 0;
          margin: 0;
          text-transform: uppercase;
          font-size: 14px;
          text-decoration: none;
          border-bottom: 1px solid #ccc;
          svg{
            fill : $color-main;
          }
          &.active {
            background-color: $color-main;
            color: #fff;
            .tab-menu-icon{
              color:#fff;
              span{
                background: #fff;
              }
            }
            svg{
              fill : #fff;
            }
          }
          .tab-menu-icon{
            display: inline-block;
            vertical-align: middle;
            text-transform: uppercase;
            color: $color-main;
            span{
              text-align: left;
              display: block;
              width: 20px;
              height: 2px;
              background: $color-main;
              margin-bottom: 4px;
              &:nth-child(2) {
                width: 12px;
              }
            }
          }
          i{
            font-size: 22px;
            vertical-align: middle;
          }
          svg{
            width: 19px;
            height: 18px;
            margin-bottom: 7px;
          }
        }
      }
    }
    .tab-content {
      width: 100%;
      position: relative;
      height: calc(100% - 100px);
      overflow: auto;
      overflow-x : hidden;
      .tab_children_menu {
        .mobilemenu_list {
          border-bottom: 1px solid #e7e7e7;
          .nammenu {
            padding: 0 20px;
            font-weight: 500;
            font-size: 15px;
            line-height: 55px;
            height: 55px;
            color: $color-main;
            display: inline-block;
            transition: 0.5s;
            text-decoration: none;
            text-transform: uppercase;
            width: calc(100% - 50px);
          }
          .toggle-menumobile {
            width: 50px;
            height: 48px;
            padding: 20px;
            text-align: center;
            float: right;
            text-decoration: none;
            i {
              font-size: 10px;
              color: $color-main;
            }
            .icon-menu-mobile-plus{
              display:block;
            }
            .icon-menu-mobile-minus{
              display:none;
            }
            &.iconactive{
              .icon-menu-mobile-plus{
                display:none;
              }
              .icon-menu-mobile-minus{
                display:block;
              }
            }
          }
          ul {
            li {
              a {
                display: block;
                font-size: 14px;
                color: #868686;
                padding: 4px;
                padding-left: 20px;
                text-transform: capitalize;
                text-decoration:none;
              }
            }
          }
          .title_menu_mb {
            font-size: 13px;
            font-weight: 500;
            position: relative;
            padding-top: 8px;
            margin-left: 20px;
            padding-bottom: 2px;
            text-transform: uppercase;
            &:before {
              position: absolute;
              content: '';
              width: 50px;
              border-bottom: 1px solid #007bff;
              bottom: 0;
            }
          }
          .title_menu_mb.title_only_one{            
            &:before {
              display:none
            }
            a{
              color: #868686;
              font-size: 14px;            
              text-transform: capitalize;
              text-decoration: none;
              font-weight: 400;
            }
          }
        }
      }
      #tab_menu_mobile{
        width: 100%;
        .menu-horizon-list{
          border-bottom: 1px solid #ededed;
          .nammenu{
            font-size: 16px;
            width: calc(100% - 50px);
            height : 54px;
            font-weight: 500;
            padding : 15px;
            color: $color-main;
            display: inline-block;
            transition: 0.5s;
            text-decoration: none;
            .label_menu {
              top: -10px;
              left: 90%;
            }
          }
          .toggle-menumobile {
            width: 50px;
            padding : 15px;
            height : 54px;
            line-height : 54px;
            border-left : 1px solid #ededed;
            text-align: center;
            float: right;
            text-decoration: none;
            i{
              display: block;
              font-size: 20px;
              transition: 0.5s;
              color: $color-main;
            }
            &.active{
              i{
                transform: rotate(180deg);
                color:$color-main2;
              }
            }
          }
          &.active{
            .menu_lv2{
              right : 0;
              z-index : 9;
              display : block;
            }
          }
          .menu_lv2{
            position: absolute;
            top: 0;
            right:  -100%;
            bottom: 0;
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            transition: all 0.3s linear 0s;
            -o-transition: all 0.3s linear 0s;
            -webkit-transition: all 0.3s linear 0s;
            z-index: 0;
            background-color: #FFF;
            .back-to{
              font-size: 16px;
              width: 100%;
              height: 54px;
              font-weight: 500;
              padding: 15px;
              color: #fff;
              background : $color-main2;
              display: inline-block;
              transition: 0.5s;
              text-decoration: none;
            }
          }
          .menu_lv3{
            padding : 15px;
          }
          .title_menu_mb{
            font-size: 14px;
            letter-spacing: 0.2em;
            font-weight: 500;
            text-transform: uppercase;
            position: relative;
            padding: 15px;
            margin-bottom: 0px;
            display : inline-block;
            &:before {
              position: absolute;
              content: '';
              width: 50px;
              border-bottom: 1px solid $color-main2;
              bottom: 0;
            }
            &:first-child {
              margin-top: 0px;
            }
          }
          ul{
            list-style-type: none;
            &:last-child {
              margin-bottom: 20px !important;
            }
            li{
              line-height: 24px;
              position: relative;
              padding: 6px 0;
              a{
                font-size: 14px;
                line-height: 24px;
                font-weight: 400;
                color: $color-main;
                text-transform: unset;
                .label_menu {
                  top: -16px;
                }
              }
            }
          }
          .title_menu_mb.title_only_one{          
            font-size: 14px;
            line-height: 24px;
            font-weight: 400;
            color: $color-main;
            letter-spacing: unset;
            text-transform: unset;
            margin-top: unset;
            display: block;
            &:before {
              content: none;
            }
            &:last-child {
              margin-bottom: 20px;
            }
          }
        }
      }
      #tab_account_mobile {
        width:100%;
        padding : 30px;
        .overlay_login-content {
          .box_content_accountdestop {
            .formlogin {
              width: 100%;
              .login_primary {
                .login-icon {
                  span {
                    font-size: 35px;
                  }
                }
                .mailrrr {
                  .form-check {
                    font-size: 13px;
                    padding-left: 0;
                    text-align: left;
                    padding: 8px 0;
                    a {
                      color: #555;
                      text-decoration: none;
                    }
                  }
                  .btn-dark {
                    background-color: $color-main;
                    border: none;
                    padding: 11px;
                    margin-top: 10px;
                    text-transform: uppercase;
                    font-size: 13px;
                    letter-spacing: .2em;
                  }
                }
                .or_creat {
                  overflow: hidden;
                  span {
                    font-size: 15px;
                    position: relative;
                    padding: 0 10px;
                    text-transform: uppercase;
                    letter-spacing: .2em;
                    &:before {
                      content: "";
                      border-top: 1px solid #e4e4e4;
                      position: absolute;
                      top: 7px;
                      right: 100%;
                      width: 9999em;
                    }
                    &:after {
                      content: "";
                      border-top: 1px solid #e4e4e4;
                      position: absolute;
                      top: 7px;
                      left: 100%;
                      width: 9999em;
                    }
                  }
                  a {
                    font-size: 15px;
                    color: #333;
                    display: table;
                    height: auto;
                    line-height: 12px;
                    padding: 20px 0;
                    margin: 5px auto;
                    background: transparent;
                    text-decoration: none;
                    font-weight: 500;
                  }
                }
              }
            }
            .RecoverPasswordForm{
              span{
                i{
                  font-size: 30px;
                }
              }
              h2{
                margin-top:20px;
                font-size: 14px;
                text-transform: uppercase;
                font-weight: 500;
                line-height: 8px;
                letter-spacing: .3em;
                i{
                  display:block;
                  margin-bottom:20px;
                  font-size: 30px;
                }
              }
              .form-group{
                margin-top:20px;
                &:focus{
                  outline:0;
                  border-color: #ccc;
                }
              }
              .register-button {
                background-color: $color-main;
                width: 100%;
                color:#fff;
                text-transform: uppercase;
              }
            }
            .form_register {
              width: 100%;
              margin: 30px;

              .register-icon {
                span {
                  font-size: 30px;
                }
              }
              .title_resgister {
                font-size: 14px;
                text-transform: uppercase;
                font-weight: 500;
                line-height: 8px;
                letter-spacing: .3em;
              }
              .mailrrr {
                .btn-dark {
                  background-color: $color-main;
                  border: none;
                  padding: 11px;
                  margin-top: 10px;
                  text-transform: uppercase;
                  font-size: 13px;
                  letter-spacing: .2em;
                }
              }
              .or_creat {
                overflow: hidden;
                span {
                  font-size: 15px;
                  position: relative;
                  padding: 0 10px;
                  text-transform: uppercase;
                  letter-spacing: .2em;
                  &:before {
                    content: "";
                    border-top: 1px solid #e4e4e4;
                    position: absolute;
                    top: 7px;
                    right: 100%;
                    width: 9999em;
                  }
                  &:after {
                    content: "";
                    border-top: 1px solid #e4e4e4;
                    position: absolute;
                    top: 7px;
                    left: 100%;
                    width: 9999em;
                  }
                }
                a {
                  font-size: 15px;
                  color: #333;
                  display: table;
                  height: auto;
                  line-height: 12px;
                  padding: 20px 0;
                  margin: 5px auto;
                  background: transparent;
                  text-decoration: none;
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
    }
    .close-menu-mobile{
      background-color: $color-main2;
      color: #fff;
      z-index: 20;
      height: 50px;
      line-height: 50px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-size: 12px;
    } 
  }
}

/* ========================================
POPup newletter
======================================== */
.popup{
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999999;
  .modal-overlay {
    background: rgba(45,45,50,0.8);
    height: 100%;
    position: absolute;
    width: 100%;
  }
  .modal-window {
    min-height: 320px;
    margin: 0 auto;
    position: relative;
    top: 25%;
    width: 847px;
    .window-window{
      position: relative;
      .window-content {
        position: relative;
        background: #fff;
        float: left;
        .close_edit{
          padding: 0;
          height: 25px;
          width: 25px;
          position: absolute;
          right: -15px;
          top: -15px;
          z-index: 9;
          color: #fff;
          text-align: center;
          font-size: 13px;
          line-height: 27px;
          border: 0;
          background: $color-main;
          cursor: pointer;
        }
        .left{
          width: 528px;
          float: left;
          padding: 68px 30px 30px 70px;
          .title{
            font-size: 20px;
            position: relative;
            letter-spacing: 0.05em;
            margin-bottom: 8px;
          }
          .sub-title {
            margin-bottom: 15px;
            letter-spacing: 0.05em;
            color: #555555;
            font-size: 14px;
          }
          #mc_embed_signup{
            margin: 40px 0;
            .form-control{
              border-radius: 0;
              border: 1px solid $color-main;
              font-size: 13px;
            }
            input{
              &::placeholder{
                color: $color-main;
              }
            }
            .form-group{
              button{
                background-color: $color-main;
                border: none;
                border-radius: 0;
                padding-left: 50px;
                padding-right: 50px;
                font-size: 13px;
                height: calc(2.25rem + 2px);
                text-transform: uppercase;
                letter-spacing: .1em;
                &:hover,
                &:focus,
                &.active{
                  outline:none;
                  box-shadow: none;
                }
              }
            }
          }
          .message{
            margin-top: 0 !important;
            clear: both;
            padding: 4px 0 23px;
            margin-bottom: 0px;
            letter-spacing: 0.02em;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            line-height: 20px;
          }
          .product-socials{
            padding: 0;
            border-top: 0 none;
            border-bottom: 0 none;
            text-align: left;
            margin: 0;
            ul{
              li{
                a{
                  text-decoration: none;
                  padding-right: 10px;
                }
              }
            }
          }
        }
        .right {
          width: 317px;
          float: right;
        }
      }
    }
  }
}
/* ========================================
20. login_regester
======================================== */
.btn-dark:not(:disabled):not(.disabled).active:focus,
.btn-dark:not(:disabled):not(.disabled):active:focus,
.show>.btn-dark.dropdown-toggle:focus{
  box-shadow: none;
}
.login_regester{
  padding-bottom: 100px;
  .login, .register {
    padding-top: 100px;
  }
  h1, h2.title24.title-form-account{
    font-size: 18px;
    font-family: $font-primary;
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 50px;
    i{
      font-size: 15px;
    }
  }
  .form-control{
    font-family: $font-primary;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    &:focus,
    &.active{
      border-bottom: 1px solid $color-main;
    }

  }
  label{
    font-family: $font-primary;
    font-size: 16px;
    font-weight : 500;
  }
  input{

    &::placeholder{
      font-size: 13px;
      color: #ccc;
      font-family: $font-primary;
    }
  }
  button, .register-button{
    border-radius: 0px;
    padding: 12px 40px;
    background-color: $color-main;
    text-transform: uppercase;
    color:#fff;
    position: relative;
    overflow: hidden;
    border:none;
    letter-spacing: .2em;
    font-size: 14px;
    &:before{
      content: '';
      position: absolute;
      opacity: 0;    
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-top: 1px solid $color-main2;
      border-bottom: 1px solid $color-main2;
      transform: translateX(-100%);
      transition: all 0.3s ease-out;
    }
    &:after{
      content: '';
      position: absolute;
      opacity: 0;    
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-right: 1px solid $color-main2;
      border-left: 1px solid $color-main2;
      transform: translateY(-100%);
      transition: all 0.3s ease-out;
    }
    &:hover{
      background-color: #fff;
      color: $color-main2;
      box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
      &:before{
        transform: translateX(0);
        opacity: 1;
      }
      &:after{
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
  .forgot_pass{
    a{
      text-decoration: none;
      font-size: 14px;
    }
  }
  .forgot_pass_form{
    a{
      text-decoration: none;
      font-size: 14px;
    }
  }
}
// minicart
.bg-minicart {
  transition: all .3s ease;
  &.active {
    background-color: rgba(0, 0, 0, 0.66);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
}
.minicart{
  background-color: #f7f7f7;
  z-index: 12;
  height: 100%;
  position: fixed;
  right: -380px;
  width: 380px;
  top: 0;
  transition: all 0.3s ease;
  max-width: calc(100% - 20px);
  ::-webkit-scrollbar {
    width: 3px;
  }
  ::-webkit-scrollbar-track {
    background: #fff; 
  }
  ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #ccc; 
  }
  @media(max-width : 576px){
    width : 300px;
    right : -300px;
  }
  &.active {
    right: 0;
    transition: all 0.3s ease;
  }
  .mini-content {
    .mini-cart-head{
      .close-mini-cart{
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        width: 45px;
        height: 45px;
        color: $color-main;
        border-right: 1px solid #dedede;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 700;
        text-align: center;
        line-height: 47px;
        svg{
          width : 14px;
          height : auto;
          fill : $color-main;
        }
        &:hover{
          color:$color-main2;
          svg{
            fill : $color-main2;
          }
        }

      }
      .title {
        font-weight: 500;
        line-height: 43px;
        height: 45px;
        color: $color-main;
        border-bottom: 1px solid #ecebeb;
        padding-bottom: 0;
        margin-bottom: 0px;
        text-align: center;
        font-size: 20px;
      }
      .mini-cart-counter {
        font-weight: 600;
        display: block;
        min-width: 45px;
        height: 45px;
        text-align: center;
        line-height: 46px;
        color: $color-main;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #ecebeb;
        border-top: transparent;
        border-right: transparent;
      }
    }
    .prod{
      position: relative;
      height: calc(100vh - 162px);
      max-height: 100%;
      overflow: auto;
      padding: 0px 20px;
      .product-cart {
        overflow: hidden;
        position: relative;
        text-align: left;

        .minicart_item {
          li {          
            border-bottom: 1px solid #e1e1e1;
            align-items: flex-start;
            position: relative;
            padding: 20px 0;
            .thumb_img_cartmini{
              width: 25%;
            }
            .product-detail {
              width: 70%;
              padding-left: 20px;
              .product_name_mini {
                line-height: 16px;
                a {
                  font-size: 16px;
                  text-align: justify;
                  color: $color-main;
                  text-decoration: none;
                  font-weight: 400;
                  &:hover{
                    color: $color-main2;
                  }
                }
              }
              span{
                font-size: 16px;
                padding-top: 10px;
              }
              .product_info {
                .price_nosale {
                  text-decoration: line-through;
                  font-size: 15px;
                  color: #c5c5c5;
                  padding-right: 10px;
                }
                .price_sale {
                  font-size: 15px;
                }
              }
            }
            .produc_remove {
              width: 15%;
              a {
                position: absolute;
                top: 19px;
                right: 0px;              
                color: $color-main;
                text-decoration: none;
                i{
                  font-size: 14px;
                }
                &:hover{
                  color:$color-main2;
                }
              }
            }
          }
        }
      }
    }
    .sub-total{
      height: 59px;
      line-height: 59px;
      background-color: #ffffff;
      color: $color-main;
      padding: 0 40px;
      overflow: hidden;
      bottom: 59px;
      position: absolute;
      width: 400px;
      max-width: 100%;
      .total-title {
        font-size: 18px;
        font-weight : 500;
      }
      .total-price {
        width: auto;
        font-weight: 600;
        display: block;
        color: $color-main2;
      }
    }
    .action-checkout {
      bottom: 0;
      position: absolute;
      width: 400px;
      max-width: 100%;
      .button-viewcart {
        width: 50%;
        display: block;
        float: left;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: .2em;
        height: 59px;
        line-height: 61px;
        color: #ffffff;
        background-color: #2a2a2a;
        transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
        &:hover{
          background-color: $color-main2;
        }
      }
      .button-checkout {
        width: 50%;
        display: block;
        float: left;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: .2em;
        height: 59px;
        line-height: 61px;
        color: #ffffff;
        background-color: $color-main;
        transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
        &:hover{
          background-color: $color-main2;
        }
      }
    }
    .list_product_minicart.empty{
      height: 100vh;
      .empty-product_minicart{
        display: block;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        width: 100%;
        p{
          font-size: 22px;
          line-height: 1.2;
          color: $color-main;
          text-align: center;
        }
        a{
          font-weight: 600;
          display: inline-block;
          background-color: $color-main;
          color: #ffffff;
          font-size: 12px;
          letter-spacing: .2em;
          text-transform: uppercase;
          padding: 20px 30px;
          text-align: center;
          margin-top: 30px;
          text-decoration:none;
          transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
          &:hover{
            background-color: $color-main2;
          }
        }
      }
    }
  }
}
.mini-cart-bottom{
  text-align: center;
  p{
    font-size : 18px;
    font-weight : 500;
    padding-top : 20px;
  }
}
.engoc_currencies{
  margin-right: 10px;
  position: relative;
  .currency-picker{
    color:#000000;
    border: 1px solid #dbdbdb;
    border-radius: 0;
    font-size: 10px;
    padding: 7px 8px;
    letter-spacing: .1em;
    font-family: $font-primary;
    font-weight: 600;
    height: 35px;
    width: 60px !important;
    background: transparent;
  }
  &:after {
    content: "\f107";
    font-family: 'FontAwesome';
    position: absolute;
    right: 10px;
    font-size: 12px;
    top: 8px;
    z-index: 1;
    color: #000000;
  }

  select {
    -moz-appearance: none;
    -webkit-appearance:none;
    appearance: none;
  }
  select::-ms-expand {
    display: none;
  }
}
.box-change-langue{
  margin-right: 30px;
  position: relative;
  .top-lanngue{
    a{
      color:#000000;
      border: 1px solid #dbdbdb;
      border-radius: 0;
      font-size: 10px;
      display:block;
      padding: 0px 8px;
      letter-spacing: .1em;
      font-family: $font-primary;
      font-weight: 600;
      height: 35px;
      width: 90px;
      line-height: 35px;
      position: relative;
      &:after {
        content: "\f107";
        font-family: 'FontAwesome';
        position: absolute;
        right: 10px;
        font-size: 12px;
        top: 0px;
        z-index: 1;
        color: #000000;
      }
    }
  }
  #collapseExample {
    position: absolute;
    top: 35px;
    left:0;
    z-index:2;
    background: #fff;
    padding: 8px;
    width: 100%;
    ul{
      li{
        line-height: 24px;
        a{
          font-size: 10px;
          color:#000000;
          letter-spacing: .1em;
          font-weight: 600;
          &:hover{
            color:#e7af00;
          }
        }
      }
    }
  }
}
.horizon-menu-home {
  background: #fff;
  width: 400px;
  max-width: 100%;
  position: fixed;
  top: 0;
  padding: 80px 50px 80px 50px;
  z-index: 5;
  bottom: 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
  left: 0;
  transition: transform .8s cubic-bezier(.46,.01,.32,1);
  transform: translateX(-100%);

  ::-webkit-scrollbar {
    width: 3px;
  }
  ::-webkit-scrollbar-track {
    background: #fff; 
  }
  ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #ccc; 
  }
  .close-menu-horizon {
    font-size: 20px;
    font-weight: 700;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 45px;
    transition: all 0.5s ease;
    &:hover {
      color: $color-main2;
      transform: rotate(180deg);
    }
  }
  .main-navigation {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 200px) !important;
    .menu-horizon-list{
      padding : 15px 0 ;
      border-bottom : 1px solid #eee;
      &:last-child{
        border-bottom : none; 
      }
      .nammenu{
        font-size: 14px;
        width: calc(100% - 50px);
        font-weight: 500;
        color: $color-main;
        display: inline-block;
        transition: 0.5s;
        text-decoration: none;
        text-transform: uppercase;
        position: relative;
        &:before{
          content: attr(title);
          color: $color-main;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          height: 100%;
          transition: height 1s ease 0s;
          overflow: hidden;
        }
        &:hover{
          color:$color-main2;
          &:before{
            height: 0;
          }
        }
        .label_menu {
          top: -10px;
          left: 90%;
        }
      }
      .toggle-menumobile {
        width: 50px;
        text-align: center;
        float: right;
        text-decoration: none;
        i{
          display: block;
          font-size: 20px;
          transition: 0.5s;
          color: $color-main;
        }
        &.active{
          i{
            transform: rotate(180deg);
            color:$color-main2;
          }
        }
      }
      .title_menu_mb{
        font-size: 14px;
        letter-spacing: 0.2em;
        font-weight: 500;
        text-transform: uppercase;
        position: relative;
        padding-bottom: 13px;
        margin-top: 20px;
        &:before {
          position: absolute;
          content: '';
          width: 50px;
          border-bottom: 1px solid $color-main2;
          bottom: 0;
        }
        &:first-child {
          margin-top: 10px;
        }
      }
      ul{
        list-style-type: none;
        &:last-child {
          margin-bottom: 20px !important;
        }
        li{
          line-height: 24px;
          position: relative;
          padding: 6px 0;
          a{
            font-size: 14px;
            line-height: 24px;
            font-weight: 400;
            color: $color-main;
            text-transform: unset;
            .label_menu {
              top: -16px;
            }
          }
        }
      }
      .title_menu_mb.title_only_one{          
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
        color: $color-main;
        letter-spacing: unset;
        text-transform: unset;
        margin-top: unset;
        &:before {
          content: none;
        }
        &:last-child {
          margin-bottom: 20px;
        }
      }
    }
  }
  &.active{
    transform: unset;
  }
}
.bg-horizon-menu{
  transition: transform .35s cubic-bezier(.46,.01,.32,1),opacity .4s ease-out;
  &.active {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
  }
}  
.tab-menu-mobile {
  position: fixed;
  width: 320px;
  left: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  color: #333;
  z-index: 12;
  transition : .3s;
  border: 1px solid #f4f4f4;
  overflow: hidden;
  transform: translateX(-100%);
  .header-mobile-menu {
    border-bottom: 1px solid #dadada;
    text-align: center;
    line-height: 60px;
    height: 60px;
    padding: 0 20px;
    margin: 0;
    display: block;
    font-size: 18px;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: $color-main2;
    i {
      position: absolute;
      left: 20px;
      line-height: 56px;
      font-size: 20px;
    }
  }
  [class*='tab-menu'] {
    list-style: none;
    position: absolute;
    right: 0;
    transform: translateX(100%);
    margin: 0;
    padding: 0;
    transition: .3s;
    padding: 0 20px;
    li {
      a {
        display: block;
        position: relative;
        font-size: 17px;
        font-family: $font-primary;
        color: $color-main;
        font-weight: 500;
        line-height: 50px;
        border-bottom : 1px solid #eee;
        i {
          position: absolute;
          right: 0;
          line-height: 50px;
          font-size: 20px;
          color: $color-main;
          padding : 0 10px;
          &:hover{
            color : $color-main2;
          }
        }
      }
    }
    &.active {
      left: 0;
      right: 0;
      transform: none;
    }
    &.active2 {
      transform: translateX(-100%);
    }
  }
  &.active {
    transform: none;
  }

  @media (max-width: 400px) {
    width: 80%;
  }
}
.customer-button {
  margin-top: 36px;
  display: block;
  font-size: 26px;
}
.bg-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;
  background: transparent;
  z-index: 9998;
  &.active {
    display: block;
  }
}
#header{
  padding: 25px 0;
  .logo {
    svg{
      max-width: 100%;
      height: auto;
    }
  }
  .menu {
    ul.navbar-nav {
      flex-wrap: wrap;
    }
    ul {
      .nav-item {
        margin-left: 18px;
        margin-right: 18px;
        &:last-child {
          padding-right: 0px;
        }
        .nav-link {
          text-decoration: none;
          font-size: 17px;
          font-family: $font-primary;
          font-weight: 600;
          text-transform: unset;
          &:after {
            border-bottom: 1px solid;
            bottom: 0;
            content: "";
            position: absolute;
            right: 0;
            transition: width .4s linear 0s;
            width: 0;
          }
          &:hover,
          &:focus,
          &.active
          {
            color: $color-main2;
            &:after {
              left: 0;
              width: 100%;
            }
          }
        }
        .list-home {
          height: auto;
          padding: 0 30px 30px 30px;
          box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.3);
          border-radius: 0;
          border: none;
          margin-top: 30px;
          opacity: 0;
          visibility: hidden;
          transition: all 0.5s ease;
          background-color:#fff;
          width: 950px;
          background-size: cover;
          background-position: center center;
          left: -425px;
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
        }
        .list-woman {
          width: 950px;
          background-color:#fff;
          height: auto;
          padding: 30px;
          -webkit-box-shadow: 7px 6px 40px 0px rgba(204,204,223,.16);
          -moz-box-shadow: 7px 6px 40px 0px rgba(204,204,223,.16);
          box-shadow: 7px 6px 40px 0px rgba(204,204,223,.16);
          border-radius: 0;
          border: none;
          margin-top: 30px;
          opacity: 0;
          visibility: hidden;
          transition: all 0.5s ease;
          left: -425px;
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
          .list-clothing {
            .title {
              h5 {
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 1PX;
                font-weight: 600;
                margin-bottom: 20px;
                a{
                  text-decoration:none;
                  text-transform: uppercase;
                  transition: all 0.5s ease;
                  color:#000000; 
                  &:after {
                    content: '';
                    display: block;
                    height: 1px;
                    width: 55px;
                    background-color: #e7af00;
                    margin-top: 17px;
                  }
                  &:hover{
                    color:#e7af00; 
                  }
                }
              }
            }
            ul {
              li {
                line-height: 24px;
                list-style: none;
                padding-left: 0px;
                padding-right: 0px;
                padding: 5px 0;
                a {
                  text-decoration: none;
                  font-size: 15px !important;
                  font-family: $font-primary;
                  color: #000000;
                  font-weight: 500;
                  text-transform: unset;
                  letter-spacing: unset;
                  &:after {
                    border-bottom: 1px solid #e7af00;
                    bottom: 0;
                    content: "";
                    position: absolute;
                    right: 0;
                    transition: width .4s linear 0s;
                    width: 0;
                  }
                  &:hover,
                  &:focus,
                  &:active
                  {
                    color: #e7af00;
                    &:after {
                      left: 0;
                      width: 100%;
                    }
                  }
                }
              }
            }
          }
        }
        .list-woman.shop{
          left: -450px;
          .col-lg-6{
            &:nth-child(3) {
              padding-top:20px;
            }
            &:nth-child(4) {
              padding-top:20px;
            }
          }
          .menu_lv2{
            text-decoration: none;
            font-size: 16px;
            font-family: $font-primary;
            color: #000000;
            font-weight: 600;
            text-transform: unset;
            padding-bottom : 10px;
            margin-bottom : 14px !important;
            margin-top : 15px;
            &:after {
              border-bottom: 1px solid #e7af00;
              bottom: 0;
              content: "";
              position: absolute;
              left: 0;
              transition: width .4s linear 0s;
              width: 50%;
            }
            &:hover,
            &:focus,
            &:active
            {
              color: #e7af00;
            }
          }
          .menu_lv3{
            text-decoration: none;
            font-size: 15px !important;
            font-family: $font-primary;
            color: #7d7b7b;
            font-weight: 500;
            line-height : 28px;
            text-transform: unset;
            letter-spacing: unset;
            &:hover,
            &:focus,
            &:active
            {
              color: #e7af00;
            }
          }
        }
        .list-woman.featured{
          .col-lg-4{
            &:nth-child(4) {
              padding-top:20px;
            }
            &:nth-child(5) {
              padding-top:20px;
            }
            &:nth-child(6) {
              padding-top:20px;
            }
            &:nth-child(7) {
              padding-top:20px;
            }
          }
        }
        .list-woman.style_3{
          width:600px;
          left: -300px;
          .col-lg-4{
            &:nth-child(4) {
              padding-top:20px;
            }
            &:nth-child(5) {
              padding-top:20px;
            }
            &:nth-child(6) {
              padding-top:20px;
            }
            &:nth-child(7) {
              padding-top:20px;
            }
          }
        }
        .list-woman.page {
          width: auto;
          left: 0;
          min-width: 200px;
          padding : 30px 0px;
          overflow: unset;
          .dropdownmenu_lv2{
            overflow: unset;
            .menu_lv2 {
              left : 100%;
              top : 0;
              opacity : 0;
              visibility : hidden;
              transform: translateY(-10px);
              transition : .3s;
              box-shadow: 0px 2px 10px -2px rgba(0,0,0,0.3);
              border-radius: 0;
              border: none;
              min-width: 180px;
            }
            &:hover{
              .menu_lv2{
                opacity : 1;
                visibility : visible;
                transform: none;
              }
            }
          }
        }
      }

      li.dropdown {
        &:hover {
          .list-home {
            margin-top: 1px;
            opacity: 1;
            visibility: visible;

          }

          .list-woman {        
            margin-top: 1px;
            opacity: 1;
            visibility: visible;

          }
        }
      }
    }
    .eveland-demolink{
      img{
        transition: box-shadow .2s ease-out;
        &:hover{
          box-shadow: 0px 0px 10px 0px rgba(0,0,0,.18);
        }
      }
      .title {
        font-size: 12px;
        margin: 0;
        color: #000000;
        text-transform: uppercase;
        font-weight: 400;
        padding-top: 20px;
      }
    }
  }
  .currencies-login{
    display: flex!important;
    justify-content: flex-end!important;
    flex-wrap: wrap;
    .cart-login-search{
      ul{
        .login_hd{

          font-size: 14px;
          font-weight: 600;
          &:after{
            content: '';
            border-bottom: 2px solid #000000;
            display: block;

          }
        }
        li{
          vertical-align: top;
          margin-right: 13px !important;
          &:last-child {
            margin-right:0px !important;
          }
          a{
            text-decoration:none;
            color: #000000;
            i{
              font-size: 20px;
            }
            svg{
              width : 24px;
              height : 24px;
              fill: #000000;
            }
          }
          .cart{
            position:relative;
            .number-cart{
              &.active{
                position: absolute;
                bottom: -7px;
                left: 15px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                color: #fff !important;
                text-align: center;
                font-size: 11px;
                font-weight: 500;
                line-height: 22px;
                background: $color-main2;
              }
            }
          }
        }
      }
    }
  }
}
.header-absolute{
  position: absolute;
  width: 100%;
  background: transparent;
  z-index: 3;
}
.header-v1-h1{
  transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
  z-index: 3;
  &.menu_scroll_v1 {
    box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    animation: mations 1s ease;
    transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    border-bottom: none;
  }

}
#header.header-v2-h2{
  padding: 25px 0;
  .menu {
    ul {
      li {
        .list-home {        
          left:0px;
        }
        .list-woman {
          left: -150px;
        }

        .list-woman.shop{
          left: 0px;
        }

        .list-woman.style_3{
          left: -200px;
        }

        .list-woman.page {
          left: 0;
        }
      }
    }
  }
}
.header-v2-h2{
  transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
  &.menu_scroll_v2 {
    box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    animation: mations 1s ease;
    transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    border-bottom: none;
  }

}
.header-v3-h3{
  background: rgba(0,0,0,0);
  transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
  &.menu_scroll_v3 {
    box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    animation: mations 1s ease;
    transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    border-bottom: none;
  }
}
#header.header-v4-h4{
  padding: 28px 0;
  .menu {
    ul {
      li {
        .list-home {        
          left:0px;
        }
        .list-woman {
          left: -150px;
        }

        .list-woman.shop{
          left: 0px;
        }

        .list-woman.style_3{
          left: -200px;
        }

        .list-woman.page {
          left: 0;
        }
      }
    }
  }
}
.header-v4-h4{
  transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
  z-index: 3;
  &.menu_scroll_v4 {
    box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    animation: mations 1s ease;
    transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    border-bottom: none;
  }
}
.header-v5-h5{
  transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
  &.menu_scroll_v5 {
    box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    animation: mations 1s ease;
    transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    border-bottom: none;
  }
  .model_menu{
    font-size: 14px;
    color: #000000;
    letter-spacing: .2em;
    text-transform: uppercase;
    .model-menu-icon{
      display: inline-block;
      vertical-align: middle;
      text-transform: uppercase;
      color: #000000;
      span{
        text-align: left;
        display: block;
        width: 23px;
        height: 2px;
        background: #000000;
        margin-bottom: 4px;
        &:nth-child(2) {
          width: 12px;
        }
        &:nth-child(3) {
          width: 17px;
        }
      }
    }
    .model-menu-title {
      margin-left: 7px;
      font-size: 11px;
      letter-spacing: .2em;
      font-weight: 600;
    }
    &:hover{
      cursor: pointer;
    }
  }
}
.header-v6-h6{
  transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
  &.menu_scroll_v6 {
    box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    animation: mations 1s ease;
    transition: background-color 0.5s ease 0s, padding 0.5s ease 0s;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    border-bottom: none;
  }  
  .model_menu{
    margin-left:40px;
    margin-top: 8px;
    .model-menu-icon{
      display: inline-block;
      vertical-align: middle;
      text-transform: uppercase;
      color: #000000;
      span{
        text-align: left;
        display: block;
        width: 35px;
        height: 2px;
        background: #000000;
        margin-bottom: 6px;
        &:nth-child(2) {
          width: 16px;
        }
      }
    }
    &:hover{
      cursor: pointer;
    }
  }  
}
//section all
.margin-bottom-30{
  margin-bottom : 30px;
}
.margin-top-15{
  margin-top : 15px;
}
.pagi-nav {
  margin-top : 50px;
  text-align : center;
  span{
    width: 45px;
    height: 45px;
    border: 1px solid #e3e3e3;
    line-height: 45px;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    color: #232529;
    margin-right: 4px;
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -ms-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
    a{
      display: block;
      i{
        font-size: 22px;
      }
    }
    &:hover {
      background: $color-main;
      a{
        color: #fff;
      }
    }
  }
  .current {
    background: $color-main;
    color: #fff;
  }
}
.button-main2 {
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: 1px solid #fff;
  color: #fff;
  padding: 15px 30px;
  transition: all .3s;
  display: inline-block;
  &:hover {
    background: #fff;
    color: $color-main;
  }
}
.underline_hover {
  position : relative;
  display: inline-block;
  &:after {
    content: '';
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -1px;
    display: block;
    width: 0;
    height: 1px;
    background-color: $color-main2;
    -webkit-transition: all .3s cubic-bezier(.175,.885,.32,1.075);
    transition: all .3s cubic-bezier(.175,.885,.32,1.075);
  }
  &:hover {
    &:after {
      width : 100%;
    }
  }
  &.bold{
    font-weight: 500;
    color : $color-main;
    font-size : 15px;
  }
  &.link {
    color: #6c6c6c!important;
  }
}
.underline_scale{
  position : relative;
  display : inline-block;
  &:after {
    border-bottom: 2px solid $color-main2;
    bottom: 2px;
    left: 0;
    content: "";
    position: absolute;
    transform: scale(0);
    transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    width: 100%;
  }
  &:hover, &.active {
    &:after{
      transform: scale(1);
    }
  }
}
.overflow-x-hide{
  overflow-x: hidden;
}
.fsz-unset{
  font-size : unset !important;
}
.underline_link {
  font-size : 18px;
  font-weight : 500;
  color: $color-main;
  font-family : $font-primary;
  display : inline-block;
  position : relative;
  overflow: hidden;
  padding-bottom : 5px;
  &:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 2px solid $color-main2;
  }
  &:hover{
    color : $color-main2;
    &:before{
      -webkit-animation: underline-link .8s cubic-bezier(.58,.3,.005,1) 0s 1;
      animation: underline-link .8s cubic-bezier(.58,.3,.005,1) 0s 1;
    }
  }
}
.mt-30{
  margin-top: 30px;
}
.mt-all{
  margin-top:70px;
}
.title_heading{
  font-family : $font-primary;
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2;
  color: $color-main;
  letter-spacing: 2px;
  text-transform: none;
  position: relative;
  @media(max-width : 576px){
    font-size : 30px;
    &:after{
      height : 4px;
    }
    br{
      display : none;
    }
  }
}
.sub_heading {
  font-family : $font-primary2;
  font-size : 17px;
  font-weight : 500;
  color : #666;
  padding-top : 20px;
  display : block;
}
.over_slidevid{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.6;
  z-index : 1;
}
.section-slideshow-v1 {
  .slick-dots {
    transform: translate(-50%);
    left: 50%;
    bottom: 50px;
    @media only screen and (max-width: 576px) {
      bottom: 30px;
    }
    li {
      margin: 0 2px;
      button {
        &:before {
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        background-color: rgba(#adadad, 0);
        border: 2px solid rgba(#adadad, 0.3);
        border-radius : 50%;
        padding: 0;
        position : relative;
        overflow: hidden;
        transition : .5s;
      }
    }
    .slick-active {
      button {
        background-color: rgba(#adadad, 1);
        border: 2px solid rgba(#adadad, 0);
      }
    }
  } 
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
  } 
  .prev-slide,.next-slide {
    background: #fff;
    z-index: 1;
    color: $color-main;
    top: 50%;
    transform: translateY(-50%);
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    position: absolute;
    transition: .3s;
    box-shadow: 1px 2px 6px 4px rgba(53,57,68,0.2);
    svg {
      width: 13px;
      height: auto;
      height: auto;
      fill: $color-main;
    }
    &:hover {
      svg {
        fill: #fff;
      }
      background: $color-main2;
      color: #fff;
    }
  }
  .next-slide {
    right: 3%;
  }
  .prev-slide {
    left: 3%;
  } 
  .info-sideh1 {
    position: relative;
    .box-content {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 12%;
      z-index: 2;
      .box-title {
        overflow: hidden;
        .titlebig {
          font-family: $font-primary;
          font-size: 80px;
          font-weight: 400;
          padding-bottom : 15px;
        }
      }
      .box-title1 {
        overflow: hidden;
        .title-small {
          font-family: $font-primary;
          font-size: 16px;
          font-weight: 500;
          padding-bottom: 15px;
          letter-spacing: 4px;
        }
      }    
      .box-title2 {
        overflow: hidden;
        .title-small {
          font-family: $font-primary;
          font-size: 20px;
          font-weight: 500;
          padding-bottom: 15px;
          text-transform : unset;
          line-height: 1.5;
          @media(max-width : 576px){
            br {
              display: none;
            }
          }
        }
      }
      .button-main2 {
        margin-top: 30px;
        font-weight: 500;
        font-family: $font-primary;
      }
    }
    .box-content-center {
      position: absolute;
      top: 50%;
      transform: translate(-50%,-50%);
      left: 50%;
      text-align: center;
      z-index: 2;
      .box-title {
        overflow: hidden;
        .titlebig {
          font-family: $font-primary;
          font-size: 80px;
          font-weight: 400;
          padding-bottom : 15px;
        }
      }
      .box-title1 {
        overflow: hidden;
        .title-small {
          font-family: $font-primary;
          font-size: 16px;
          font-weight: 500;
          padding-bottom: 15px;
          letter-spacing: 4px;
        }
      }    
      .box-title2 {
        overflow: hidden;
        .title-small {
          font-family: $font-primary;
          font-size: 20px;
          font-weight: 500;
          padding-bottom: 15px;
          text-transform: unset;
          line-height: 1.5;
          @media(max-width: 576px) {
            br {
              display: none;
            }
          }
        }
      }
      .button-main2 {
        margin-top: 30px;
        font-weight: 500;
      }
    }
    .box-content-right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 12%;
      text-align: right;
      z-index : 2;
      .box-title {
        overflow: hidden;
        .titlebig {
          font-family: $font-primary;
          font-size: 80px;
          font-weight: 400;
          padding-bottom: 15px;
        }
      }
      .box-title1 {
        overflow: hidden;
        .title-small {
          font-family: $font-primary;
          font-size: 16px;
          font-weight: 500;
          padding-bottom: 15px;
          letter-spacing: 4px;
        }
      }    
      .box-title2 {
        overflow: hidden;
        .title-small {
          font-family: $font-primary;
          font-size: 20px;
          font-weight: 500;
          padding-bottom: 15px;
          text-transform: unset;
          line-height: 1.5;
          @media(max-width: 576px){
            br {
              display: none;
            }
          }
        }
      }
      .button-main2 {
        margin-top: 30px;
        font-weight: 500;
      }
    }
  }
  .slick-active {
    .info-sideh1 {
      .picture-slideshow {
        img {        
          transform: scale(1);
        }
      }
    }
  }
  @media(max-width: 575.98px) {
    .info-sideh1 {
      .picture-slideshow {
        height: 450px;
        img {
          height: 450px;
          object-fit: cover;
        }
      }
      .box-content,.box-content-right,.box-content-center {
        top: 50%;
        left: 50%;
        width: 95%;
        right : unset;
        transform: translate(-50%,-50%);
        .box-title2 {
          .title-small {
            font-size : 19px;
          }
        }
        .box-title {
          .titlebig {
            font-size: 30px;
          }
        }
        .box-button {
          margin-top: 30px;
          .button-shop {
            font-size: 14px;
          }
        }
      }
    }
    .slick-active {
      .info-sideh1 {
        .box-content {
          p {
            &:before {
              width: 60px;
            }
          }
        }
      }
    }
  }
  @media(min-width : 576px) and (max-width : 767.98px) {
    .info-sideh1 {
      .picture-slideshow {
        height: 450px;
        img {
          height: 450px;
          object-fit: cover;
        }
        video {
          height: 450px;
        }
      }
      .box-content,.box-content-right,.box-content-center{
        .box-title {
          .titlebig {
            font-size: 35px;
          }
        }
        .box-button {
          margin-top: 30px;
          .button-shop {
            font-size: 14px;
          }
        }
      }
    }
    .slick-active {
      .info-sideh1 {
        .box-content {
          p {
            &:before {
              width: 60px;
            }
          }
        }
      }
    }
  }
  @media(min-width : 768px) and (max-width : 991.98px){
    .info-sideh1 {
      .picture-slideshow {
        height: 500px;
        img {
          height: 500px;
          object-fit : cover;
        }
        video {
          height: 500px;
        }
      }
      .box-content,.box-content-right,.box-content-center {
        .box-title {
          .titlebig {
            font-size: 45px;
          }
        }
        .box-button {
          margin-top: 30px;
          .button-shop {
            font-size: 14px;
          }
        }
      }
    }
    .slick-active {
      .info-sideh1 {
        .box-content {
          p {
            &:before {
              width: 70px;
            }
          }
        }
      }
    }
  }
  @media(min-width : 992px) and (max-width : 1199.98px){
    .info-sideh1 {
      .picture-slideshow {
        height: 580px;
        img {
          height: 580px;
          object-fit : cover;
        }
      }
      .box-content,.box-content-right,.box-content-center{
        .box-title{
          .titlebig{
            font-size: 55px;
          }
        }
      }
    }
  }
  @media(min-width : 1200px) and (max-width : 1500px){
    .info-sideh1{
      .picture-slideshow{
        height : 700px;
        img{
          height: 700px;
          object-fit : cover;
        }
      }
      .box-content,.box-content-right,.box-content-center{
        .box-title{
          .titlebig{
            font-size: 60px;
          }
        }
      }
    }
  }
}
.box-img{
  overflow: hidden;
  img{
    transition: all .8s linear;
  }
  &:hover{
    img{
      transform: scale(1.04);
      transition: all .8s linear;
    }
  }
}
.section-product-v1 {
  padding-bottom: 20px;
  .prev-slide,.next-slide{
    background : #fff;
    z-index : 1;
    color: $color-main;
    top : 50%;
    transform : translateY(-50%);
    font-weight : 700;
    position : absolute;
    transition :  .3s;
    box-shadow: 1px 2px 6px 4px rgba(53,57,68,0.08);
    width: 35px;
    height: 35px;
    text-align: center;
    font-size: 16px;
    i{
      color: $color-main;
    }
    &:hover{
      i{
        color : #fff;
      }
      background : $color-main2;
      color : #fff;
    }
  }
  .next-slide {
    right : 0;
  }
  .prev-slide{
    left : 0;
  }

  .slick-dots{
    transform: translate(-50%);
    left: 50%;
    li{
      margin: 0 2px;
      button{
        &:before{
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        background-color: rgba(#adadad, 0);
        border: 2px solid rgba(#adadad, 0.3);
        border-radius : 50%;
        padding: 0;
        position : relative;
        overflow: hidden;
        transition : .5s;
      }
    }
    .slick-active{
      button{
        background-color: rgba(#adadad, 1);
        border: 2px solid rgba(#adadad, 0);
      }
    }
  } 
  @media(max-width: 575.98px){
    .col-6{
      &:nth-child(odd) {
        padding-right: 7.5px;
      }
      &:nth-child(even) {
        padding-left: 7.5px;
      }
    }
    .order-1.col-lg-5{
      margin-top: -30px;
    }
  }
  .mt-50{
    margin-top : 50px;
  }
}
.footer_v1{  
  .top-footer{
    padding: 50px 0 40px 0;
    .info_footer{
      margin-bottom: 20px;
      h4{
        font-size: 18px;
        font-weight: 600;  
      }
      .title_border{
        &:after {
          content: '';
          display: block;
          height: 1px;
          width: 30px;
          margin-top: 20px;
          background-color: $color-main;
        }
      }
      ul{
        margin-top: 20px;
        li{
          a{
            font-weight: 400;
            line-height: 34px;
            color: $color-main;
            text-decoration:none;
            transition: all .25s ease-in-out;
            font-size: 15px;
            &:hover{
              color: $color-main2;
            }
          }
        }
      }
      .content_footer{
        color: $color-main;
        font-weight: 400;
        margin-top:23px;
        font-size:14px;
      }

    }
    .info_footer.end{
      h4{
        font-size: 20px;
        text-transform: none;
        letter-spacing: .1em;
      }
      .list-icon{
        ul{
          li{
            a{
              display: inline-block;
              color: $color-main;
              font-size: 16px;
              border-radius: 50%;
              margin: 0 5px 0 5px;
              position: relative;
              i {
                position: relative;
                z-index: 1;
              }

              &:hover{
                color: $color-main2;
              }
            }
          }
        }
      }
    }
  }
  .copyright{
    border-top: 1px solid #eeeeee;
    padding: 26px 0;
    p {
      margin-bottom: 0;
    }
    .text-copyright{
      color: $color-main;
      font-size: 14px;      
      a{
        font-weight: 400;
        color: $color-main;
        text-decoration:none;
        &:hover{
          opacity: .8;
        }
      }
    }
  }
}
.footer_v2{  
  .top-footer{
    border-top: 1px solid #dddddd;
    background-color: #ffffff;
    .border-ft{
      border-left: 1px solid #dddddd;
      padding: 50px 0 40px 30px;
      @media(max-width: 576px){
        border-left: none;
        padding: 20px 0 20px 00px;
      }
      .info_footer{
        margin-bottom: 20px;
        h4{
          font-size: 18px;
          font-weight: 600;        
          color: #000000;
        }
        .title_border{
          &:after {
            content: '';
            display: block;
            height: 1px;
            width: 30px;
            margin-top: 20px;
            background-color: #000000;;
          }
        }
        ul{
          margin-top: 30px;
          li{
            a{
              font-weight: 400;
              line-height: 32px;
              color: #9a9a9a;
              text-decoration:none;
              transition: all .25s ease-in-out;
              font-size:14px;
              &:hover{
                color: $color-main2;
              }
            }
          }
        }
      }
    }
    .info_footer.end{
      padding: 50px 0 40px 0px;
      @media(max-width: 576px){
        padding: 20px 0 20px 00px;
      }
      h4{
        font-size: 20px;
        text-transform: none;
        letter-spacing: .1em;
      }
      .content_footer{
        color: #9a9a9a;
        font-weight: 400;
        margin-top:23px;
        font-size:14px;
      }
      .list-icon{
        ul{
          margin-top: 30px;
          li{
            a{
              display: inline-block;
              color: #000000;
              font-size: 16px;
              border-radius: 50%;
              margin: 0 5px 0 5px;
              position: relative;
              i {
                position: relative;
                z-index: 1;
              }
              &:hover{
                color: $color-main2;
              }
            }
          }
        }
      }
    }
  }
  .copyright{
    border-top: 1px solid #dddddd;
    padding: 26px 0;
    background-color: #ffffff;
    p {
      margin-bottom: 0;
    }
    .text-copyright{
      @media(max-width: 576px){
        padding-bottom: 15px;
      }
      color: #9a9a9a;
      font-size: 14px;      
      a{
        font-weight: 400;
        color: #000000;
        text-decoration:none;
        &:hover{
          opacity: .8;
        }
      }
    }
  }
}
.footer_v3{  
  .content_menu{
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid #eeeeee;
    .copyright{
      font-size: 14px;
      font-weight: 500;
      color: #979797;
    }
    .menu{
      ul{
        li{
          padding-right:18px;
          padding-left:18px;
          a{
            font-weight: 500;
            font-size: 15px;
            color: $color-main;
            transition: color 0.25s,border-color 0.25s,background-color 0.25s,opacity 0.25s,width 0.25s ease 0s;
            font-family: $font-primary;
            &:hover{
              color: $color-main2;
            }
          }

        }
      }
    }
    .casano-socials{
      ul{
        li{
          a{        
            width: 42px;
            height: 42px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-right: 7px;
            color: #fff;
            font-size: 18px;
            border-radius: 50%;
            position: relative;
            z-index: 0;
            &:hover{
              color : $color-main2;
            }
          }
        }
      }
    }
  }
  .newsletter-fv3{
    padding-top: 35px;
    padding-bottom : 35px;
    .title_newletter{
      h3{
        font-size: 28px;
        color: $color-main;
        text-align: center;
        font-family: $font-primary;
        font-weight: 600;
      }
    }
    .content{  
      font-size: 15px;
      line-height: 30px;
      font-weight: 500;
      text-align: center;
      color: $color-main;
      padding-top: 13px;
    }
    .newletter_email{
      @media(max-width: 576px){
        padding: 0 10px;
      }
      max-width: 100%;
      width: 690px;
      margin: 0 auto;
      margin-top: 24px;
      form{
        width: 100%;
        border-bottom: 2px solid $color-main;
        position: relative;
        .form-group{
          width: 100%;
          .form-control{
            padding: .375rem 6.75rem 0.375rem 0;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: transparent;
            background-clip: padding-box;
            border: none;
            border-radius: 0;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
          }
          input{
            width: 100%;
            &::placeholder{
              font-size: 14px;
              color: #979797;
            }
          }          
        }
        .btn{
          position: absolute;
          right: 0;
          top: 50%;
          height: 40px;
          background-color: transparent;
          padding: 0;
          font-size: 12px;
          cursor: pointer;
          transform: translateY(-50%);
          color: $color-main;
          font-size: 12px;
          font-weight: 600;
          &:hover{
            color : $color-main2;
          }
        }
        .btn.focus, .btn:focus {
          outline: 0;
          box-shadow: none;
        }
      }
    }
  }
  @media(max-width: 991px){
    text-align: center;
    .copyright{
      margin-bottom: 15px;
    }
    .menu{
      margin-bottom: 20px;  
    }
  }
}
.footer_v4{
  .top-footer{
    padding-top:52px;
    padding-bottom:52px;
    .title_footer{
      h4{
        font-size: 21px;
        color: $color-main;
        font-weight: 600;
        font-family: $font-primary;
        margin-bottom: 14px !important;
        position: relative;
        padding-bottom: 12px;
        &:before{
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 54px;
          border-bottom: 1px solid;
        }
      }
    }
    .info_footer{
      ul{
        li{
          line-height: 32px;
          margin-right : 0;
          a{
            color: $color-main;
            transition: color 0.25s,border-color 0.25s,background-color 0.25s,opacity 0.25s,width 0.25s ease 0s;
            font-size: 15px;
            line-height : 34px;
            font-weight: 400;
            &:hover{
              color: $color-main2;
            }
          }
          .social-item{
            margin-right: 10px;
            margin-bottom: 10px;
            border: 2px solid $color-main;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            line-height : 39px;
            display: inline-block;
            text-align: center;
            @media(min-width: 768px) and(max-width: 1500px){
              height: 35px;
              width: 35px;
              line-height: 30px;
            }
            i{
              font-size: 18px;
              @media(min-width: 768px) and(max-width: 1500px){
                font-size: 15px;
              }
            }
            &:hover{
              border: 2px solid $color-main2;
            }
          }
        }
      }
    }
    .content_footer{
      color: $color-main;
      font-size: 16px;
      font-weight: 500;
      line-height: 32px;
      margin-bottom: 25px !important;
    }
    .info_footer.end{
      max-width: 450px;
      margin: 0 auto;
      width: 100%;
      .fv4-form{
        background-color: #fff;
        height: 56px;
        line-height: 56px;
        border: none;     
        width: 690px;
        max-width: 100%;
        position: relative;
        .text-input{
          border: none;
          width: 100%;
          padding: 0 8.6rem 0 .8rem;
          &::placeholder{
            font-size: 14px;
            color: $color-main;
          }
        }
        .btn{
          border-radius: 0;
          display: inline-block;
          text-transform: uppercase;
          -webkit-transition: all .3s ease 0s;
          -o-transition: all .3s ease 0s;
          -moz-transition: all .3s ease 0s;
          transition: all .3s ease 0s;
          border: none;
          text-align: center;
          letter-spacing: .3em;
          font-weight: 600;
          position: absolute;
          background-color: $color-main;
          color: #fff;
          font-size: 12px;
          letter-spacing: .2em;
          line-height: 18px;
          top: 0;
          right: 0;
          height:100%;
          box-shadow: none;
          white-space: nowrap;
          transition: .3s;
          padding: 0 20px;
          &:hover{
            background-color: $color-main2;
          }
        }
      }
    }
  }
  .copyright{
    border-top:1px solid #E8E8F2;
    padding-top: 25px;
    padding-bottom: 25px;
    p{
      font-size: 14px;
      color: #6c6c6c;
      margin-bottom: 0;
      a{
        color: #6c6c6c;
        &:hover{
          color: $color-main2;
        }
      }
    }
    .text-copyright{
      p{
        margin-bottom : 0;
      }
      a{
        color: $color-main2;
      }
    }
  }
  @media(max-width: 767px){
    .info_footer{
      text-align: center;
      margin-bottom: 20px;
      .title_footer{
        h4{
          &:before{
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 54px;
            border-bottom: 1px solid;
          }
        }
      }
    }
    .logo-footer{
      margin-bottom: 20px;
    }
    .text-copyright{
      margin-top: 20px;
    }
  }
  @media(min-width: 768px) and(max-width: 991px){
    .info_footer.end{
      padding-top: 25px;
    }
  }
}
.footer_v5{
  position: relative;
  padding-top: 64px;
  padding-bottom:36px;
  .title_menu{
    font-size: 19px; 
    font-weight: 500;
    color: $color-main;
    &:after {
      content: '';
      display: block;
      height: 1px;
      width: 30px;
      margin-top: 20px;
      background-color: $color-main2;
    }
  }
  .menu_footer{
    ul{
      margin-top: 15px;
      li{
        a{
          font-weight: 400;
          line-height: 32px;
          color: $color-main;
          text-decoration:none;
          transition: all .25s ease-in-out;
          font-size:15px;
          position: relative;
          &:hover{
            color: $color-main2;
            &:after{
              width: 100%;
              left:0;
            }
          }
          &:after{
            content: '';
            height: 1px;
            background-color: $color-main2;
            display: block;
            transition: width .4s linear 0s;
            -webkit-transition: width .4s linear 0s;
            -o-transition: width .4s linear 0s;
            width: 0;
            position: absolute;
            right: 0;
            margin-top: -5px;
          }
        }
      }
    }
  }
  .logo-footer{
    display : flex;
    justify-content :center;
    align-items : center;
    .logosvg{
      margin: 0 auto;
      svg{
        width:100%;
        height: auto;
      }
    }
  }
  .list-icon{
    margin-top: 48px;
    @media(max-width: 767px){
      margin-top: 20px;
    }
    ul{
      li{
        a{
          color: #fff !important;
          display: inline-block;
          text-align: center;
          width: 46px;
          height: 46px;
          font-size: 18px;
          border-radius: 50%;
          margin-right: 12px;
          line-height: 46px;
          transition: all .3s ease;
          overflow: hidden;
          position: relative;
          background: $color-main;
          i {
            position: relative;
            z-index: 1;
          }
          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
            transform: scale(0);
            background: $color-main2;
            transition: all ease .3s;
            width: 100%;
            height: 100%;
          }
          &:hover{
            color: #fff;
            &:before{
              transform: scale(.9);
            }
          }
        }
      }
    }
  }
  .form-footer{
    .title_menu{
      font-size: 19px; 
      font-weight: 500;
      color: $color-main;
      &:after {
        content: '';
        display: block;
        height: 1px;
        width: 30px;
        margin-top: 20px;
        background-color: $color-main2;
      }
    }
    .sub_title{
      font-size: 19px;
      color: $color-main;
      margin-top: 30px;
    }
    .content-footer{
      font-size: 14px;
      font-weight: 400;
      color: $color-main;
      margin-bottom: 30px !important;
    }
    .fv5-form{
      background-color: #f3f3f3;
      height: 56px;
      line-height: 56px;
      border: none;
      padding: 0 0 0 25px;      
      width: 690px;
      max-width: 100%;
      position: relative;
      .form-group{
        width : 100%;
      }
      .text-input{
        width: 100%;
        padding: 0 10rem 0 0px;
        background: none;
        border : none;
        &::placeholder{
          font-size: 14px;
          color: $color-main;
        }
      }
      .btn{
        border-radius: 0;
        display: inline-block;
        text-transform: uppercase;
        -webkit-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        -moz-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
        border: none;
        text-align: center;
        letter-spacing: .3em;
        font-weight: 600;
        position: absolute;
        background-color: $color-main;
        color: #fff;
        padding: 19px 30px;
        font-size: 12px;
        letter-spacing: .2em;
        line-height: 18px;
        top: 0;
        right: 0;
        box-shadow: none;
        white-space: nowrap;
        transition: .3s;
        &:hover{
          background-color: $color-main2;
        }
      }
    }
    .payment{
      margin-top: 40px;
    }
    .text-copyright{
      font-size: 14px;
      margin-top: 50px;
    }
    @media(min-width: 768px) and (max-width: 991.99px){
      margin-top: 25px;
      .payment{
        margin-top: 30px;
      }
      .text-copyright{
        margin-top: 30px;
      }
    }

    @media(max-width: 767px){
      margin-top: 25px;
      .payment{
        margin-top: 30px;
      }
      .text-copyright{
        margin-top: 30px;
      }
    }
  }
  @media(max-width: 576px){
    padding-top: 36px;
  }
  @media(max-width: 991.99px){
    &:after{
      display: none;
    }
  }
}
.footer_v6{  
  .content_menu{
    padding-top: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
    .copyright{
      font-size: 14px;
      font-weight: 400;
      color: #979797;
      text-align: center;
    }
    .menu{
      ul{
        li{
          padding-right: 40px;
          a{
            letter-spacing: .2em;
            font-weight: 600;
            font-size: 11px;
            text-transform: uppercase;
            color: $color-main;
            transition: color 0.25s,border-color 0.25s,background-color 0.25s,opacity 0.25s,width 0.25s ease 0s;
            font-family: $font-primary;
            &:hover{
              color: $color-main2;
            }
          }
        }
      }
    }
    .casano-socials{
      ul{
        li{
          a{        
            width: 42px;
            height: 42px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-right: 7px;
            border: 1px solid $color-main;
            background: transparent;
            color: $color-main;
            font-size: 15px;
            border-radius: 50%;
            position: relative;
            z-index: 0;
            &:after{
              content: '';
              position: absolute;
              left: -1px;
              top: -1px;
              right: -1px;
              bottom: -1px;
              background-color: $color-main2;
              transform: scale(0);
              transition: 0.5s;
              z-index: -1;
              border-radius: 50%;
            }
            &:hover{
              border: 1px solid $color-main2;
              color: #fff;
              &:after{
                transform: scale(1);
              }
            }
          }
        }
      }
    }
  }
  .copyright{
    font-size: 12px;
    color:#979797;
    font-weight: 400;
    padding: 24px 0;
    margin-bottom: 0;
  }
  @media(max-width: 767px){
    .content_menu{
      .menu{
        margin-bottom: 20px;
        ul{
          li{
            padding-right: 10px;
          }
        }
      }
      .casano-socials{
        margin-top: 20px;
      }
    }
  }
  @media(min-width: 768px) and(max-width: 991px){
    .menu{
      margin-bottom: 20px;
    }
    .casano-socials{
      margin-top: 20px;
    }
  }
}
/* ========================================
RESPONSIVE
======================================== */
@media (min-width: 1200px) and (max-width: 1500px){

  .box-change-langue{
    margin-right: 5px;
  }
  #header  .currencies-login .cart-login-search ul li a i{
    font-size: 22px;
  }
  #header  .currencies-login .cart-login-search ul li {
    margin-right: 10px !important;
  }
  .footer_v2{
    .info_footer .btn{
      width: 40%;
    }
    .form-group{
      width: 60%;
      input{
        width: 100%;
      }
    }
  }
}
@media (min-width: 992px) and (max-width: 1199.98px){
  .mt-all{
    margin-top:60px;
  }
  .search-full-destop{
    .search-eveland{  
      .wg-search-form{
        width: 90%;
      }
    }
  }
  .footer_v1{
    .top-footer{
      .info_footer.end{
        .list-icon{
          ul{
            li{
              a{
                width: 40px;
                height: 40px;
                font-size: 15px;
                margin: 0;
                line-height: 38px;
              }
            }
          }
        }
      }
    }
  }
  .footer_v2{
    .info_us .list-icon ul li a {
      width: 40px;
      height: 40px;
      font-size: 13px;
      margin: 0 5px 5px 0;
      line-height: 38px;
    }
    .form-group {
      margin-bottom: 10px;
      width: 100%;
      input{
        height: 55px;
        width: 100%;
        &::placeholder{
          font-size:14px;
        }
      }
    }
    .info_footer .btn {
      height: 50px;
      width: 100%;
    }
  }
}
@media (min-width: 768px) and (max-width: 991.98px){
  .mt-all{
    margin-top:60px;
  }
  .search-full-destop{
    .search-eveland{  
      .wg-search-form{
        width: 90%;
      }
    }
  }
  .popup{
    .modal-window {
      min-height: 320px;
      margin: 0 auto;
      position: relative;
      top: 10%;
      width: 80%;
      .window-window{
        position: relative;
        .window-content {
          position: relative;
          background: #fff;
          float: left;
          .left{
            width: 60%;
            float: left;
            padding: 30px;
            #mc_embed_signup{
              margin: 15px 0;
            }
            .product-socials{
              ul{
                margin-bottom:0;
              }
            }
          }
          .right {
            width: 40%;
            float: right;
          }
        }
      }
    }
  }    
  .footer_v1 {
    .top-footer {
      padding: 50px 0 35px 0;
      .info_footer.end{
        margin-bottom: 20px;
        margin-top: 20px;
        text-align: center;
      }
      .info_footer form {
        width: 80%;
        margin: 0 auto;
      }
    }
  }
  .footer_v2{
    .info_footer.end{
      text-align: center;
    }
    .info_footer{
      .form-group{
        width: 80%;
        .form-control{
          width: 100%;
        }
      }
      .btn{
        width: 20%;
      }
    }
    .title_border.end{
      &:after{
        margin-top: 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
      }
    }
    .list-inline-item:not(:last-child) {
      margin-right: 0;
    }
    .info_us .list-icon ul li a {
      width: 35px;
      height: 35px;
      font-size: 12px;
      border-radius: 50%;
      margin: 0 5px 5px 0;
      line-height: 33px;
    }
  }
  .footer_v6{
    .top-footer{
      .info_footer{
        .menu-footer{
          ul{
            li{
              a{
                padding-left: 10px;
                padding-right: 10px;
              }
            }
          }
        }
        .content-email {
          margin-top: 27px;
        }
      }
    }
  }
}
@media (min-width: 576px) and (max-width: 767.98px){
  .mt-all{
    margin-top:50px;
  }
  .search-full-destop{
    .search-eveland{  
      .wg-search-form{
        width: 90%;
      }
    }
  }
  .popup{
    .modal-window{
      top: 7%;
      width:80%;
      .window-window{
        .window-content{
          float: none;
          .left{
            width:100%;
            padding: 20px 40px;
            #mc_embed_signup{
              .form-group{
                button{
                  width: 100%;
                  margin-top: 0px;
                }
              }
            }
          }
          .right{
            display: none;
          }
        }
      }
    }
  } 

  .footer_v1{    
    text-align: center;
    .top-footer{
      padding: 50px 0 37px 0;
      .info_footer{
        margin-bottom: 30px;
        .title_border:after {
          margin-top: 8px;
          left: 50%;
          transform: translateX(-50%);
          position: absolute;          
        }
        h4{
          font-weight: 500;
        }
        form {
          width: 80%;
          margin: 0 auto;
        }
      }
      .info_footer.end{
        margin-bottom: 20px;
        h4 {
          font-size: 16px;
        }
      }
    }
    .copyright .text-copyright {
      padding-bottom: 15px;
    }
  }
  .footer_v2{    
    text-align: center;
    .info_us .content-logo{
      width: 100%;
    }
    .title_footer h4:after{
      margin-top: 8px;
    }
    .title_border:after {
      margin-top: 8px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;          
    }
    .info_footer{
      margin-bottom: 30px;

      h4{
        font-weight: 500;
      }
    }
    .info_footer.end{
      margin-bottom: 0px;
      h4 {
        font-size: 16px;
      }
    }

    .title_footer {
      margin-bottom: 30px;
    }
    .form-group {
      margin-bottom: 20px;  
      width: 100%;
      input{
        width: 100%;
        height: 50px !important;
        &::placeholder{
          font-size:14px;
        }
      }
    }
    .info_footer .btn {
      width: 100%;
      height: 50px;
    }
  }
  .info_footer.end{
    text-align:center;
  }
  .footer_v6{
    padding-bottom: 40px;
    .top-footer{
      .info_footer.brleft{
        border-right: none;
        padding-top: 0;
      }
      .info_footer{
        .list-icon{
          margin-top: 30px;
        }
        .content-contact{
          padding-top: 30px;
          width: unset;
          margin: unset;
        }
        .content-email {
          margin-top: 15px;
        }
      }
    }
    .copyright-footer{
      margin-top: 30px;
    }
  }
}
@media (max-width: 575.98px){
  .mt-all{
    margin-top:50px;
  }
  .search-full-destop{
    .search-eveland{  
      .wg-search-form{
        width: 90%;
      }
    }
    .search-eveland .drawer-search-top .drawer-search-title {
      font-size: 35px;
      margin-top: 30px;
    }
  }
  .popup{
    .modal-window{
      top: 25%;
      width:80%;
      .window-window{
        .window-content{
          float: none;
          .left{
            width:100%;
            padding: 20px 40px;
            #mc_embed_signup{
              .form-group{
                button{
                  width: 100%;
                  margin-top: 20px;
                }
              }
            }
          }
          .right{
            display: none;
          }
        }
      }
    }
  } 
  .footer_v1{    
    text-align: center;
    .top-footer{
      padding: 50px 0 37px 0;
      .info_footer{
        margin-bottom: 30px;
        .title_border:after {
          margin-top: 8px;
          left: 50%;
          transform: translateX(-50%);
          position: absolute;          
        }
        h4{
          font-weight: 500;
        }
      }
      .info_footer.end{
        margin-bottom: 20px;
        h4 {
          font-size: 16px;
        }
      }
    }
    .copyright .text-copyright {
      padding-bottom: 15px;
    }
  }
  .footer_v2{    
    text-align: center;
    .info_us .content-logo{
      width: 100%;
    }
    .title_footer h4:after{
      margin-top: 8px;
    }
    .title_border:after {
      margin-top: 8px;
      left: 50%;
      transform: translateX(-50%);
      position: absolute;          
    }
    .info_footer{
      margin-bottom: 30px;

      h4{
        font-weight: 500;
      }
    }
    .info_footer.end{
      margin-bottom: 0px;
      h4 {
        font-size: 16px;
      }
    }

    .title_footer {
      margin-bottom: 30px;
    }
    .form-group {
      margin-bottom: 20px;
      width: 100%;
      input{
        width: 100%;
        height: 50px !important;
        &::placeholder{
          font-size:14px;
        }
      }
    }
    .info_footer .btn {
      width: 100%;
      height: 50px;
    }
  }
  .footer_v6{
    padding-bottom: 40px;
    .top-footer{
      .info_footer.brleft{
        border-right: none;
        padding-top: 0;
      }
      .info_footer{
        .list-icon{
          margin-top: 30px;
        }
        .content-contact{
          padding-top: 30px;
          width: unset;
          margin: unset;
        }
        .content-email {
          margin-top: 15px;
        }
      }
    }
    .copyright-footer{
      border-top: 1px solid #dadada;
      margin-top: 30px;
    }
  }
}
//New Function 100+Homepage
.count-down{
  .text{
    text-align: center;
    margin-top: 20px;
    font-size: 15px;
    color: $color-main;
    font-weight: 600;
    letter-spacing: .1em;
    span{
      font-size: 16px;
      font-weight: 600;
      color: $color-main2;
    }
  }
  .progress{
    border-radius: 0;
    height: 10px;
    .progress-bar{
      background-color: $color-main2;
      transition: .5s;
    }
  }
  .countdown-timer{
    padding: 10px 0 10px 0;
    ul{padding-left: 0;margin : 0}
    li {
      display: inline-block;
      font-size: 16px;
      font-family: $font-primary;
      font-weight: 400;
      width: 45px;
      height: 70px;
      list-style-type: none;
      color: $color-main;
      margin: 0 15px 15px 15px;
      span {
        color: $color-main;
        display: block;
        font-weight: 400;
        font-size: 30px;
        font-family : $font-primary;
        text-algin: center;
        b{
          font-weight: 600;
          padding-top: 7px;
        }
      }
    }
  }
}
.sticky_addcart{
  top: auto;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 0;
  transition: transform 0.5s ease 0s;
  -o-transition: transform 0.5s ease 0s;
  -webkit-transition: transform 0.5s ease 0s;
  background: #fff;
  z-index: 2;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  transform: translateY(100%);
  &.active{
    transform:none;
    opacity: 1;
  }
  .img_left{
    margin-right: 20px;
    border: 2px solid #e5e5e5;
  }
  .info_right{
    .product-title{
      font-size: 18px;
      color: $color-main;
      font-weight: 500;
    }
  }
  .btn-action{
    .shop-button,.shop-button-amazon{
      width: 165px;
      height: 40px;
      font-size: 12px;
      background: $color-main;
      justify-content: center;
      text-transform: uppercase;
      font-weight: 600;
      color: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -moz-align-items: center;
      -ms-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      transition: .3s;
      text-align: center;
      &:hover{
        background: $color-main2;
      }
    }
    .shop-button-soldout{
      width: 165px;
      height: 40px;
      font-size: 12px;
      background: $color-main;
      justify-content: center;
      text-transform: uppercase;
      font-weight: 600;
      color: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -moz-align-items: center;
      -ms-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      transition: .3s;
      text-align: center;
    }
  }


  @media(max-width: 576px){
    .img_left{
      margin-right: 10px;
      img{
        height: 40px;
        width: 40px;
      }
    }
    .info_right{
      .product-title{
        font-size: 13px;
        margin-bottom: 0;
      }
    }

    .wrap-rating .spr-badge .spr-starrating .spr-icon{
      font-size: 9px !important;
    }
    .btn-action .shop-button, .sticky_addcart .btn-action .shop-button-amazon{
      width: 90px;
      border-radius: 0px;
      height: 37px;
      line-height: 22px;
      font-size: 9px;
      margin-left: 9px;
    }
  }
}
.random_product,.visitor{
  margin-top: 20px;
  font-size: 16px;
  padding-bottom : 20px;
  color: $color-main;
  font-weight: 600;
  span{
    font-size: 18px;
    font-weight: 600;
    color: $color-main2;
  }
}
.shopify-payment-button__button--unbranded{
  margin-top: 25px;
  margin-bottom: 25px;
  transition: all .3s ease;
  width: 310px !important;
  max-width: 100%;
  border-radius: 0px !important;
  height: 55px;
  font-size: 14px !important;
  background-color: $color-main !important;
  letter-spacing: .2em;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  transition: .3s;
  text-align: center;
  &:hover{
    background-color: $color-main2 !important;
  }
}
.shopify-payment-button__more-options{
  display: none !important;
}
.popup-cookie{
  @media(max-width: 576px){
    bottom: 0px;
    right: 0 !important;
    left: 0 !important;
    width: 100%;
    padding: 20px 20px;
  }
  &.active{
    bottom: 101px;
  }
  transition: .5s;
  position: fixed;
  z-index: 10;
  width: 300px;
  right: 40px;
  padding: 30px 20px;
  bottom: 40px;
  font-size: 14px;
  line-height: 28px;
  min-width: inherit;
  left: auto;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  text-align: center;

  .policy{
    display: inline-block;
    text-align: center;
    color: #fff;
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;
  }
  .got_it{
    display: block;
    text-align: center;
    background: #fff;
    letter-spacing: 2px;
    color: $color-main;
    box-shadow: 0 0 0;
    border-radius: 0;
    line-height: 42px;
    width: 188px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    margin: 0 auto;
    margin-top: 20px;
    transition: .5s;
    &:hover{
      background: $color-main2;
      color: #fff;
    }
  }
}
.popup_random_prod{

  &.active{
    bottom: 101px;
  }
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: .8s;
  position: fixed;
  z-index: 9;
  width: 500px;
  max-width: 100%;
  left: 40px;
  padding: 20px 20px;
  bottom: 40px;
  font-size: 14px;
  line-height: 28px;
  min-width: inherit;
  right: auto;
  color: rgb(255, 255, 255);
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
  .close_popup{
    color: #fff;
    border-radius: 50%;
    background: $color-main;
    font-size: 7px;
    font-weight: 600;
    height: 20px;
    width: 20px;
    line-height: 20px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    transition: .3s;
    &:hover{
      background: $color-main2;
    }
  }
  .prod_sidebar{
    padding-left: 0;
    margin-bottom: 0;
    .product_info{
      overflow: hidden;
      list-style: none;
      position: relative;
      .img_left{
        margin-right: 20px;
        border: 2px solid #e5e5e5;
      }
      .info_right{
        text-align: left;
        .info_puchare{
          font-size: 14px;
          color: #868686;
          font-weight: 500;
          margin-bottom: 0;
          line-height: 19px;
        }
        .product-title{
          font-family: $font-primary;
          font-size: 15px;
          font-weight: 500;
          color: $color-main;   
          &:hover{
            color: $color-main2;
          }

        }
        .minute_random{
          font-size: 14px;
          color: $color-main;
          span{
            color: $color-main2;
            font-weight: 600;
          }
        }
      }
    }
  }

  @media(max-width: 576px){
    left: 0 !important;
    right: 0 !important;
    padding: 15px 15px;
    bottom: 208px;
    border-radius: 0px;
    .prod_sidebar{
      .img_left{
        margin-right: 10px;
        img{
          width: 60px;
          height: 60px;
        }
      }
      .info_right{
        text-align: left;
        .info_puchare{
          font-size: 11px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 200px;

        }
        .product-title{
          font-size: 11px;
        }
        .minute_random{
          font-size: 11px;
          span{
            font-size: 13px;
          }
        }
      }
    }
  }
}
.hide_popup_random_prod{
  visibility: hidden;
  opacity: 0;
  transform: translateY(-30px);
  transition: .4s !important;
}
.lst-seen-widget {
  &.active{
    right: -130px;
    visibility: hidden;
  }
  &:before{
    width: 20px;
    height: 50px;
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    z-index: 1;
    background: rgb(255, 255, 255);
  }
  position: fixed;
  top: 45%;
  right: 0;
  width: 100px;
  height: auto;
  z-index: 11;
  user-select: none;
  background: rgb(255, 255, 255);
  border-radius: 0px 3px 3px;
  transition: right 0.5s ease 0s;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-box-shadow: 0 0px 3px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 0px 3px 2px rgba(0,0,0,0.1);
  box-shadow: 0 0px 3px 2px rgba(0,0,0,0.1);
  .collapse-icon {
    position: absolute;
    top: 0px;
    width: 26px;
    height: 40px;
    left: -25px;
    cursor: pointer;
    border-radius: 3px 0px 0px 3px;
    background: rgb(255, 255, 255);
    box-shadow: 0 0px 3px 2px rgba(0,0,0,0.1);
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    svg{
      width: 14px;
      height: 14px;
    }
    &:hover{
      svg{
        fill : $color-main2;
      }
    }
  }
  .top{
    &.active{
      opacity: 1 !important;
      visibility: visible !important;
      height: 73px !important;
    }

    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    height: 0px;
    border-bottom: 1px solid rgb(231, 231, 231);
    transition: all 0.25s ease 0s;
    .cart-icon{
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      padding: 2px 5px;
      width: auto;
      padding: 0px;
      .cart-badge{
        font-size: 12px;
        display: block;
        position: absolute;
        top: -8px;
        right: -11px;
        width: 23px;
        height: 23px;
        line-height: 23px;
        padding: 0;
        text-align: center;
        color: #fff;
        background-color: $color-main2;
        border-radius: 50%;
      }
      svg{
        width: 26px;
        height: 26px;
      }
    }
  }
  .in-content{
    padding: 8px 0px;
    margin: 0 -200px;
    .title{
      width: 100px;
      margin: auto;
      font-size: 12px;
      font-weight: 600;
      color: #3c3c3c;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .products-grid{
      .no-products{
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        svg{
          height: 62px;
          width: 62px;
          margin-bottom: 15px;
          opacity: 0.1;
        }
        .title_noprod{
          color: rgb(125, 139, 142);
          text-align: center;
          line-height: normal;
          font-size: 12px;
          padding: 0px 8px;
          width: 100px;
          margin: 0 auto;
        }
      }

      .have-products{
        position: relative;
        .slick-brand-prev,.slick-brand-next{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          color: $color-main;
          z-index: 1;
          font-size: 13px;
        }
        .slick-brand-prev{
          top: -10px;
        }
        .slick-brand-next{
          bottom: -10px;
        }
        .items {
          position: relative;
          width: 100%;
          padding: 0 200px;
          pointer-events: unset;
          .info_right{
            @media(max-width: 576px){
              display: none;
            }
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 200px;
            max-width: 100%;
            left: 0;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            padding: 5px 13px 5px 13px;
            background: rgb(255, 255, 255);
            border-width: 1px 1px 1px;
            border-style: solid none solid solid;
            border-color: #e6e6e6;
            border-image: initial;
            border-right: none;
            transform: translateX(20px);
            transition: .5s;
            &:hover{
              transform: none;
              opacity: 1;
              visibility: visible;
            }
            .product-title{
              font-size: 14px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              max-width: 174px;
              display: block;
            }
            .price-product{
              margin-bottom: 5px;
              .price{
                font-size: 14px;
                color: $color-main2;
              }
              .price-old{
                font-size : 11px;
                color: #eee;
              }
            }
            .product-icon-action{
              .add-to-cart{
                button,a{
                  display: block;
                  background: rgba(35,35,35,0.9);
                  border-color: rgba(35,35,35,0.9);
                  padding: 8px 0;
                  color: #fff;
                  font-size: 11px;
                  font-weight: 600;
                  text-transform: uppercase;
                  transition: .3s;
                  border: 1px solid transparent;
                  width: 100%;
                  text-align: center;
                  &:hover{
                    background: #fff;
                    color: $color-main;
                    border: 1px solid $color-main;
                  }
                }
              }
            }
          }
          .img_left {
            pointer-events: auto
          };
          .img_left:hover ~ .info_right {
            transform: none;
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }
  .bottom{
    &.active{
      opacity: 1 !important;
      visibility: visible !important;
      height: 53px !important;
    }
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    height: 0px;
    border-top: 1px solid rgb(231, 231, 231);
    transition: all 0.25s ease 0s;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    svg{
      width: 19px;
      height: 18px;
      fill : $color-main2;
    }
    .title_backtop{
      margin-left: 12px;
      font-size: 12px;
      line-height: normal;
      letter-spacing: 0.4px;
    }
    &:hover{
      .title_backtop{
        color : $color-main3;
      }
      svg{
        fill : $color-main3;
      }
    }
  }

  @media(max-width: 576px){
    right: 10px;
    .top.active{
      height: 52px !important;
    }
    .in-content{
      padding: 5px 0;
    }
    .bottom.active{
      height: 40px !important;
    }

  }
}
.wrap-icons {
  &.active{
    right: 0;
  }
  box-shadow: 0 0px 3px 2px rgba(0,0,0,0.1);
  max-width: 42px;
  height: auto;
  position: fixed;
  top: 45%;
  transform: translateY(-50%);
  right: -42px;
  z-index: 10;
  background: rgb(255, 255, 255);
  transition: right 0.5s ease 0s;

  div{
    cursor: pointer;
    padding: 15px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(245, 245, 246);
    border-image: initial;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    transition: .3s;
    svg {
      width: 19px;
      height: 18px;
      fill : $color-main2;
    }
    &:hover{
      svg {
        fill : $color-main3;
      }
    }
  }
}
.list_ul_engo_full{
  border: 1px solid #ebebeb;
  padding: 28px 17px;
  margin-bottom: 20px;
  position: relative;
  margin-top: 30px;
  .title-list{
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    display: inline-block;
    position: absolute;
    left: 49px;
    top: -11px;
    color: #008000;
    padding: 0 14px;
    background-color: #fff;
  }
  ul{
    margin-bottom: 0;
    padding-left: 0;
    li{
      color: #008000;
      list-style: none;
      padding-left: 15px;
      position: relative;
      text-align: left;
      line-height: 28px;
      text-transform: capitalize;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border-width: 5px 7px;
        border-color: transparent transparent transparent #008000;
        border-style: solid;
      }
    }
  }
} 
.lookbook-pages1{

  margin: 30px auto;
  .slide_lookbook{
    position: relative;
    .pin_lookbook{
      position: absolute;
      top: 30%;
      left: 30%;
      .pin_button{
        position: relative;
        &:before{
          color: rgba(7,7,7,0.1);
          -webkit-animation: box-shadowl 1.5s linear infinite;
          animation: box-shadow 1.5s linear infinite;
          content: "";
          width: 24px;
          height: 24px;
          position: absolute;
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          border-radius: 50%;
          left: 0;
          top: 0;
        }
        .icon{
          width: 24px;
          height: 24px;
          display: block;
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          border-radius: 50%;
          position: relative;
          cursor: pointer;
          background-color: #323232;
          &:before, &:after{
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            content: "";
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
          }
          &:before{
            width: 10px;
            height: 1px;
          }
          &:after{
            width: 1px;
            height: 10px;
          }
        }

      }
    }

    .product_lookbook{
      @media(max-width: 1199px){
        display: none;
      }
      &.active{
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0.3s;
      }
      transition: .6s;     
      opacity: 0;
      visibility: hidden;
      position: absolute;
      z-index: 1;
      .product_item{
        .close_popup{
          border: 1px solid rgba(255,255,255,0);
          font-size: 9px;
          background: #232323;
          color: #fff;
          border-color: #232323;
          width: 20px;
          height: 20px;
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -moz-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          align-items: center;
          position: absolute;
          right: -10px;
          top: -10px;
          z-index: 2;
          cursor: pointer;
          transition: .5s;
          &:hover{
            background: #fff;
            color: $color-main;
            border: 1px solid $color-main;
          }
        }
        width: 245px;
        max-width: 100%;
        padding: 22px 20px 22px;
        background-color: #fff;
        -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
        -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
        box-shadow: 0 1px 4px rgba(0,0,0,0.15);
        border: 1px solid #fbfbfb;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        -ms-border-radius: 1px;
        -o-border-radius: 1px;
        border-radius: 1px;
        .img-product{
          position: relative;
          margin-bottom: 15px;
          .product-icon-action{
            position: absolute;
            max-width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
            .add-to-cart{
              a, button{
                display: block;
                background: rgba(35,35,35,0.9);
                color: #fff;
                border-color: rgba(35,35,35,0.9);
                padding: 8px 0;
                color: #fff;
                font-size: 11px;
                font-weight: 600;
                text-transform: uppercase;
                transition: .3s;
                border: 1px solid transparent;
                width: 100%;
                &:hover{
                  background: #fff;
                  color: $color-main;
                  border: 1px solid $color-main;
                }
              }

            }
          }
        }

        .info-product{
          .title-product{
            text-align: left;
            font-size: 14px;
            color: $color-main;
            padding-bottom: 10px;
          }
          .price-product{
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 5px;
          }
          .details{
            text-align: left;
            font-size: 11px;
            color: $color-main;
            text-transform: uppercase;
            font-weight: 600;
            border-bottom: 1px solid #eee;
            letter-spacing: 0.1em;
            &:hover{
              color: $color-main2;
            }
          }
        }

        @media(max-width: 1300px){
          padding: 5px 5px 5px;
          .engoj_grid_parent{
            display: flex;
            align-items: center;
            .img-product{
              margin-bottom: 0;
              margin-right: 15px;
              .product-icon-action{
                display: none;
              }
              img{

                width: 80px !important;
                height: 80px;

              }
            }

            .info-product{
              .title-product{
                font-size: 13px;
              }
              .price-product{
                font-size: 11px;
                margin-bottom: 0;
              }
              .details{
                font-size: 10px;
              }
            }
          } 
        }
      }
    }

  }

  .popup_lookbook{
    @media(min-width: 1200px){
      display: none;
    }
    &.active{
      opacity: 1;
      visibility: visible;
      transform: none;
    }
    transform: scale(0.9);
    transition: .8s;
    opacity: 0;
    visibility: hidden;
    width: 285px;
    height: 380px;
    z-index: 102;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    .content-popup-lookbook{     
      transition: .3s;     
      margin: auto;
      text-align: left;
      position: relative;
      transition: .3s;

      .product_lookbook{
        padding: 20px;
        display: none;
        &.active{
          display: block;
        }
        .product_item{
          position: relative;
          .close_popup2{
            border: 1px solid rgba(255,255,255,0);
            font-size: 9px;
            background: #fff;
            color: $color-main;
            border-color: #232323;
            width: 20px;
            height: 20px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            align-items: center;
            position: absolute;
            right: -10px;
            top: -10px;
            z-index: 2;
            cursor: pointer;
            transition: .5s;
          }
          margin: 0 auto;
          width: 245px;
          max-width: 100%;
          padding: 22px 20px 22px;
          background-color: #fff;
          -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
          -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
          box-shadow: 0 1px 4px rgba(0,0,0,0.15);
          border: 1px solid #fbfbfb;
          -moz-border-radius: 1px;
          -webkit-border-radius: 1px;
          -ms-border-radius: 1px;
          -o-border-radius: 1px;
          border-radius: 1px;
          .img-product{
            position: relative;
            margin-bottom: 15px;
            .product-icon-action{
              position: absolute;
              max-width: 100%;
              bottom: 0;
              left: 0;
              right: 0;
              .add-to-cart{
                a, button{
                  display: block;
                  background: rgba(35,35,35,0.9);
                  color: #fff;
                  border-color: rgba(35,35,35,0.9);
                  padding: 8px 0;
                  color: #fff;
                  font-size: 11px;
                  font-weight: 600;
                  text-transform: uppercase;
                  transition: .3s;
                  border: 1px solid transparent;
                  width: 100%;
                  text-align: center;
                  &:hover{
                    background: #fff;
                    color: $color-main;
                    border: 1px solid $color-main;
                  }
                }

              }
            }
          }

          .info-product{
            .title-product{
              text-align: left;
              font-size: 14px;
              color: $color-main;
              padding-bottom: 10px;
            }
            .price-product{
              text-align: left;
              font-size: 13px;
              font-weight: 600;
              margin-bottom: 5px;
            }
            .details{
              text-align: left;
              font-size: 11px;
              color: $color-main;
              text-transform: uppercase;
              font-weight: 600;
              border-bottom: 1px solid #eee;
              letter-spacing: 0.1em;
              &:hover{
                color: $color-main2;
              }
            }
          }

        }
      }

    }
  }
}
.bg_overlay_lookbook{
  @media(min-width: 1200px){
    display: none;
  }
  &.active{
    opacity: 1;
    visibility: visible;
  }
  opacity: 0;
  visibility: hidden;
  left: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  position: fixed;
  width: 100%;
  background: rgba(0,0,0,0.75);

  transition: .3s;
  z-index: 101;
}
.swatch_radio1{
  .radio_style1{
    display: flex;
    align-items: center;
    margin-right: 10px;
    .color_style1{
      min-width: 16px !important;
      width: 16px !important;
      height: 16px !important;
      border: 1px solid;
      border-color: rgba(119,119,119,.5);
      border-radius: 50%;
      position: relative;

      &:after{
        content: "";
        display: block;
        height: 10px;
        width: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        border-radius: 50%;
        background: $color-main2; 
        transition: .2s;
      }
    }
    .text_color{
      font-size : 11px;
      text-transform: uppercase;
      cursor: pointer;
      font-weight: 600;
      padding-left: 7px;
      color: $color-main;
    }
    &:hover{
      .color_style1{
        border-color: $color-main2;
        &:after{
          transform: translate(-50%, -50%) scale(1);
        }
      }
    }
  }

  input:checked+.radio_style1{
    background: none;
    .color_style1{
      border-color: $color-main2;
      &:after{
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }

  .radio_style2{
    .color_style2{
      margin-right: 10px;
      border-radius: 50%;
      border: 1px solid transparent;
      transition: .3s;
    }
    &:hover{
      .color_style2{
        border: 1px solid #aaa;
      }
    }
  }

  input:checked+.radio_style2{
    .color_style2{
      border: 1px solid #aaa;
    }
  }

}
.swatch_radio3{
  .radio_style1{
    display: flex;
    width: 100%;
    align-items: center;
    margin-right: 10px;
    border: 1px solid rgba(119,119,119,.5);
    padding: 7px;
    margin-bottom: 10px;
    cursor: pointer;
    .color_style1{
      min-width: 16px !important;
      width: 16px !important;
      height: 16px !important;
      border: 1px solid;
      border-color: rgba(119,119,119,.5);
      border-radius: 50%;
      position: relative;

      &:after{
        content: "";
        display: block;
        height: 10px;
        width: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        border-radius: 50%;
        background: $color-main2; 
        transition: .2s;
      }
    }
    .text_color{
      font-size : 11px;
      text-transform: uppercase;
      cursor: pointer;
      font-weight: 600;
      padding-left: 7px;
      color: $color-main;
    }
    &:hover{
      border : 1px solid $color-main2;
      .color_style1{
        border-color: $color-main2;
        &:after{
          transform: translate(-50%, -50%) scale(1);
        }
      }
    }
  }

  input:checked+.radio_style1{
    border : 1px solid $color-main2 !important;
    background: none;
    .color_style1{
      border-color: $color-main2;
      &:after{
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }
}
.swatch_rectangle1{
  .rectangle_style1{
    border: 1px solid #777;
    padding: 5px 10px;
    margin-right: 10px;
    width: auto;
    height: auto !important;
    line-height: inherit;

    .text_rec{
      font-size: 12px;
      color: $color-main;
      font-weight: 600;
    }
  } 
  input:checked+.rectangle_style1{
    background: none;
    border: 1px solid $color-main2 !important;
    .text_rec{
      color: $color-main2;
      font-weight: 600;
    }
  }
}
.swatch{
  .swatch_gallery{
    border: 1px solid transparent;
    padding: 3px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    border-radius: 50%;
    transition: .4s;
    .bg_image{
      height: 35px !important;
      width: 35px;
      border-radius: 50%;
    }
  }
  input:checked+.swatch_gallery{
    border: 1px solid #aaa;
  }
}
.menu_toolbar{
  &.active{
    transform: none;

  }

  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $color-main;
  z-index: 9;
  transition: transform 0.5s ease 0s;
  -o-transition: transform 0.5s ease 0s;
  -webkit-transition: transform 0.5s ease 0s;
  transform: translateY(100%);
  .btn_bar,.btn_cart,.btn_account,.btn_backtop{
    width: 25%;
    color: #fff;
    text-align: center;
  }
  .btn_bar{
    .iconmenu{
      display: inline-block;
      vertical-align: middle;
      text-transform: uppercase;
      span{
        text-align: left;
        display: block;
        width: 23px;
        height: 2px;
        background: #fff;
        margin-bottom: 6px;
        &:nth-child(2) {
          width: 12px;
        }
        &:nth-child(3) {
          width: 17px;
          margin-bottom : 0;
        }
      }
    }
  }

  .btn_cart{
    a {
      position: relative;
      color: #fff;
      font-size: 20px;
      text-decoration:none;
      svg{
        width : 20px; 
        height : 20px;
        fill : #fff;
      }
      span {
        color: #fff;
        display: block;
        font-size: 12px;
        position: absolute;
        text-align: center;
        top: -7px;
        right: -4px;
      }
    }
  }

  .btn_account{
    a{
      color: #fff;
      svg{
        width : 22px; 
        height : 22px;
        fill : #fff;
      }
    }
  }
}
.section-collection-sub1{
  .banner_cate{
    margin-top: 30px;
    .img_banner{
      position: relative;
      overflow: hidden;
      img{
        transform: scale(1.05);
        transition: 1s;
      }
      &:hover{

        &:before, &:after{
          opacity: 1;
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          pointer-events: none;
        }
        img{
          transform: none;
          filter: blur(1px);
          transition: 1s;
        }
      }
      &:before, &:after{
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        content: '';
        opacity: 0;
        z-index: 1;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, -webkit-transform 0.35s;
        -o-transition: opacity 0.35s, transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
      }
      &:before{
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        transform: scale(0, 1);
      }
      &:after{
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        transform: scale(1, 0);
      }

    }
    .banner_title{
      padding-top: 30px;
      a{
        color: $color-main;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: $font-primary;
        &:hover{
          color: $color-main2;
        }
      }
    }
  }

}
.product-quickview .popup-quickview {
  .product-info-main .product-item .details  .swatch{
    display: flex !important;
    .swatch_radio1{
      .radio_style1{
        display: flex;
        align-items: center;
        margin-right: 10px;
        margin-top: 5px;
        .color_style1{
          min-width: 16px !important;
          width: 16px !important;
          height: 16px !important;
          border: 1px solid;
          border-color: rgba(119,119,119,.5);
          border-radius: 50%;
          position: relative;
          padding: 0;
          &:after{
            content: "";
            display: block;
            height: 10px;
            width: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            border-radius: 50%;
            background: $color-main2; 
            transition: .2s;
          }
        }
        .text_color{
          font-size : 11px;
          text-transform: uppercase;
          cursor: pointer;
          font-weight: 600;
          padding-left: 7px;
          color: $color-main;
        }
        &:hover{
          .color_style1{
            border-color: $color-main2;
            &:after{
              transform: translate(-50%, -50%) scale(1);
            }
          }
        }
      }

      input:checked+.radio_style1{
        background: none;
        .color_style1{
          border-color: $color-main2;
          &:after{
            transform: translate(-50%, -50%) scale(1);
          }
        }
      }

      .radio_style2{
        .color_style2{
          margin-right: 10px;
          border-radius: 50%;
          border: 1px solid transparent;
          transition: .3s;
        }
        &:hover{
          .color_style2{
            border: 1px solid #aaa;
          }
        }
      }

      input:checked+.radio_style2{
        .color_style2{
          border: 1px solid #aaa;
        }
      }

      .swatch_gallery{
        border: 1px solid transparent;
        padding: 3px;
        display: flex;
        align-items: center;
        margin-right: 10px;
        border-radius: 50%;
        transition: .4s;
        .bg-image{
          height: 35px !important;
          width: 35px;
          border-radius: 50%;
        }
      }
      input:checked+.swatch_gallery{
        border: 1px solid #aaa;
      }

    }
  }
  .detail-info{
    max-height: 500px;
    overflow-y: auto;
    padding-right: 15px;
    &::-webkit-scrollbar {
      width: 3px;
    }
    &::-webkit-scrollbar-track  {
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb  {
      background-color: #c1c1c1;
      border-radius: 6px;
      opacity: .8;
    }
    .product-info-main .product-item .details  .swatch{
      input:checked+.link_color:after{
        opacity: 1;
      }
      .header{
        margin-bottom: 20px;
      }
      display: block;
      .swatch_radio3{
        .radio_style1{
          display: flex;
          width: 100%;
          align-items: center;
          margin-right: 10px;
          border: 1px solid rgba(119,119,119,.5);
          padding: 7px;
          margin-bottom: 10px;
          cursor: pointer;
          .color_style1{
            min-width: 16px !important;
            width: 16px !important;
            height: 16px !important;
            border: 1px solid;
            border-color: rgba(119,119,119,.5);
            border-radius: 50%;
            position: relative;

            &:after{
              content: "";
              display: block;
              height: 10px;
              width: 10px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) scale(0);
              border-radius: 50%;
              background: $color-main2; 
              transition: .2s;
            }
          }
          .text_color{
            font-size : 11px;
            text-transform: uppercase;
            cursor: pointer;
            font-weight: 600;
            padding-left: 7px;
            color: $color-main;
          }
          &:hover{
            border : 1px solid $color-main2;
            .color_style1{
              border-color: $color-main2;
              &:after{
                transform: translate(-50%, -50%) scale(1);
              }
            }
          }
        }

        input:checked+.radio_style1{
          border : 1px solid $color-main2 !important;
          background: none;
          .color_style1{
            border-color: $color-main2;
            &:after{
              transform: translate(-50%, -50%) scale(1);
            }
          }
        }
      }
    }
  }
  .swatch_rectangle1{
    .rectangle_style1{
      border: 1px solid #777;
      padding: 5px 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      width: auto;
      height: auto !important;
      line-height: inherit;

      .text_rec{
        font-size: 12px;
        color: $color-main;
        font-weight: 600;
      }
    } 
    input:checked+.rectangle_style1{
      background: none;
      border: 1px solid $color-main2 !important;
      .text_rec{
        color: $color-main2;
        font-weight: 600;
      }
    }

    .swatch_gallery{
      border: 1px solid transparent;
      padding: 3px;
      display: flex;
      align-items: center;
      margin-right: 10px;
      border-radius: 50%;
      transition: .4s;
      .bg-image{
        height: 35px !important;
        width: 35px;
        border-radius: 50%;
      }
    }
    input:checked+.swatch_gallery{
      border: 1px solid #aaa;
    }
  }

  .swatch{
    .swatch_gallery{
      border: 1px solid transparent;
      padding: 3px;
      display: flex;
      align-items: center;
      margin-right: 10px;
      border-radius: 50%;
      transition: .4s;
      .bg_image{
        height: 35px !important;
        width: 35px;
        border-radius: 50%;
      }
    }
    input:checked+.swatch_gallery{
      border: 1px solid #aaa;
    }
  }

}
@-webkit-keyframes snow {
  0% {
    background-position: 0 0,0 0,0 0;

  }
  100% {
    background-position: 500px 1000px,400px 400px,300px 300px;
  }
}
@keyframes snow {
  0% {
    background-position: 0 0,0 0,0 0;
  }
  100% {
    background-position: 500px 1000px,400px 400px,300px 300px;
  }
}
.effect-snow{
  animation: snow 20s linear infinite;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: rgba(0,0,0,0);
}
.snow-image{
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.snow-image1{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.snow-image2{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.snow-image3{
  position: fixed;
  left: 0; 
  right: 0;
  bottom: 0;
  z-index: 1;
}
.snow-image4{
  position: fixed;
  left: 0; 
  top: 0;
  bottom: 0;
  z-index: 1;
}
.lookbook-pages2{
  .title{
    font-size: 40px;
    color: $color-main;
    line-height: 60px;
    text-align: center;
  }
  .des{
    color: #898989;
    font-size: 14px;
  }

  .style_lookbook{
    margin-top: 104px;
    .slide_lookbook:nth-child(3n + 2){
      margin-top: 150px;
      @media(min-width: 1400px){
        padding: 0 55px;
      }

      @media(min-width: 576px) and (max-width: 767px){
        margin-top: 0;
        padding: 0 5px;
      }
      @media(max-width: 576px){
        margin-top: 0;
        padding: 0 5px;
      }

    }
    .slide_lookbook:nth-child(3n +  1){

      @media(min-width: 1400px){
        padding-right: 110px;
      }
      @media(min-width: 576px) and (max-width: 767px){
        padding: 0 5px;
      }
      @media(max-width: 576px){
        padding: 0 5px;
      }
    }
    .slide_lookbook:nth-child(3n +  3){

      @media(min-width: 1400px){
        padding-left: 110px;
      }
      @media(min-width: 576px) and (max-width: 767px){
        padding: 0 5px;
      }
      @media(max-width: 576px){
        padding: 0 5px;
      }
    }

    .slide_lookbook{
      .pin_lookbook{
        .pin_button{
          .icon2{
            width: 24px;
            height: 24px;
            display: block;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            position: relative;
            cursor: pointer;
            background-color: #323232;
            text-align: center;
            font-size: 12px;
            line-height: 24px;
            color: #fff;
          }
        }
      }

    }
  }
}
.page_instagram{
  .slide_lookbook{
    .pin_lookbook{
      .pin_button{
        .icon2{
          width: 24px;
          height: 24px;
          display: block;
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          border-radius: 50%;
          position: relative;
          cursor: pointer;
          background-color: #323232;
          text-align: center;
          font-size: 12px;
          line-height: 24px;
          color: #fff;
        }
      }
    }

  }

  .img_head{
    padding: 50px 0px 120px 0px;
  }
}
.topbar{
  position: relative;
  .image_topbar{
    position: absolute;
    top: 0;
    img{
      height: 65px;
      object-fit: cover;
    }
  }  
  .curent-language{
    display: flex;
    padding: 10px 0 20px 0;
    .engoc_currencies{
      margin-right: 10px;
      position: relative;
      .currency-picker{
        color: #fff;
      }
      &:after {
        color: #fff;
      }

    }

    .box-change-langue{
      margin-right: 30px;
      position: relative;
      .top-lanngue{
        a{
          color: #fff;
          border: 1px solid #dbdbdb;
          border-radius: 0;
          font-size: 10px;
          display:block;
          padding: 0px 8px;
          letter-spacing: 1px;
          font-family: $font-primary;
          font-weight: 600;
          height: 35px;
          width: 90px;
          line-height: 35px;
          position: relative;
          &:after {
            content: "\f107";
            font-family: 'FontAwesome';
            position: absolute;
            right: 10px;
            font-size: 12px;
            top: 0px;
            z-index: 1;
            color: #fff;
          }
        }
      }
      #collapseExample {
        position: absolute;
        top: 35px;
        left:0;
        z-index:2;
        background: #fff;
        padding: 8px;
        width: 100%;
        ul{
          li{
            line-height: 24px;
            a{
              font-size: 10px;
              color: #fff;
              letter-spacing: 1px;
              font-weight: 600;
              &:hover{
                color: $color-main2;
              }
            }
          }
        }
      }
    }
  }


  .menu_topbar{
    padding: 10px 0 20px 0;
    ul{
      li{
        display: inline-block;
        padding-left: 10px;
        &:first-child{
          padding-left: 0;
        }
        a{
          font-size: 14px;
          color: #fff;
          &:hover{
            color: $color-main2;
          }
          @media(min-width: 576px) and (max-width: 767px){
            font-size: 12px;
          }
        }
      }
    }
  }
}
.icon1 {
  font-family: 'aweicon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.products_menu{
  .menu-title{
    font-size : 16px;
    font-weight : 600;
    color: $color-main;
    font-family : $font-primary;
    display : inline-block;
    position : relative;
    overflow: hidden;
    padding-bottom : 10px;
    margin-top: 15px;
    margin-bottom: 14px;
    text-transform: none;
    &:before{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50%;
      border-bottom: 1px solid $color-main2;
    }
  }  
  .prod_sidebar_menu{
    padding-left: 0;
    .product_info{
      overflow: hidden;
      list-style: none;
      border-bottom: 1px solid #f1f1f1;
      padding : 15px 0;
      position: relative;

      img{
        width: 100%;
        float: left;
        max-width: 80px;
        margin-right: 15px;
        border: 1px solid #e4e6ec;
      }
      .title-product{
        a{
          font-family: $font-primary;
          font-size: 14px;
          font-weight: 400;
          color: $color-main;   
          &:hover{
            color: $color-main2;
          }
        }

      }
      .price-product{
        .price-old {
          font-family: $font-primary;
          font-size: 12px;
          font-weight: 600;
          color: $color-main;   
        }
        .price{
          font-family: $font-primary;
          font-size: 14px;
          font-weight: 600;
          color: $color-main; 
        }
      }
    }
  }
  .slick-brand-prev, .slick-brand-next {
    z-index: 1;
    color: $color-main;
    top: -35px;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    transition: .3s;
    right: 0;
  }
  .slick-brand-prev {
    margin-right: 30px;
  }
}
.zoom-image{
  overflow : hidden;
  cursor : zoom-in;
}
.cursor-default{
  cursor : default;
}
.br-bottom{
  border-bottom : 1px solid #ccc;
}
.set-16-svg{
  svg{
    width : 16px;
    height : 16px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-12-svg{
  svg{
    width : 12px;
    height : 12px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-14-svg{
  svg{
    width : 14px;
    height : 14px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-18-svg{
  svg{
    width : 18px;
    height : 18px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-20-svg{
  svg{
    width : 20px;
    height : 20px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-22-svg{
  svg{
    width : 22px;
    height : 22px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-24-svg{
  svg{
    width : 24px;
    height : 24px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-26-svg{
  svg{
    width : 26px;
    height : 26px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-28-svg{
  svg{
    width : 28px;
    height : 28px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.set-30-svg{
  svg{
    width : 30px;
    height : 30px;
    fill : $color-main;
  }
  &.fill-white{
    svg{
      fill : #fff;
    }
  }
  &:hover{
    svg{
      fill : $color-main2;
    }
  }
}
.effect-img1{
  position: relative;
  display : inline-block;
  overflow: hidden;
  &:before{
    border-bottom: 70px solid rgba(255, 255, 255, 0.7);
    border-top: 70px solid rgba(255, 255, 255, 0.7);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    transform: rotate(45deg) scaleY(0);
    -o-transform: rotate(45deg) scaleY(0);
    -webkit-transform: rotate(45deg) scaleY(0);
    -moz-transform: rotate(45deg) scaleY(0);
    -ms-transform: rotate(45deg) scaleY(0);
    -webkit-transition: opacity .5s ease 0s, transform .5s ease 0s;
    -webkit-transition: opacity .5s ease 0s, -webkit-transform .5s ease 0s;
    transition: opacity .5s ease 0s, -webkit-transform .5s ease 0s;
    transition: opacity .5s ease 0s, transform .5s ease 0s;
    transition: opacity .5s ease 0s, transform .5s ease 0s, -webkit-transform .5s ease 0s;
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
    width: 100%;
  }
  &:hover{
    &:before{
      opacity: 1;
      filter: alpha(opacity=100);
      transform: rotate(45deg) scaleY(4);
      -o-transform: rotate(45deg) scaleY(4);
      -webkit-transform: rotate(45deg) scaleY(4);
      -moz-transform: rotate(45deg) scaleY(4);
      -ms-transform: rotate(45deg) scaleY(4);
    }
  }
}
.effect-v10 {
  position: relative;
  overflow: hidden;
  display : block;
  &:before{
    background-color: hsla(0,0%,100%,.2);
    display: block;
    width: 100%;
    height: 100%;
    left: -100%;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    content: "";
    z-index: 1;
  }

  &:hover{
    &:before {
      left: 0;
      opacity: 1;
      filter: alpha(opacity=100);
    }
  }
}
.collection-sorting{ 
  padding-left: 0px;
  margin-bottom: 0;
  li{list-style:none;}
  .dropdown{
    .dropdown-toggle{
      border: 1px solid $color-main;
      color: $color-main;
      font-family: $font-primary;
      font-size: 15px;
      font-weight: 500;
      min-width : 160px;
      padding : 9px 5px;
    }
    .dropdown-content{
      border: 1px solid $color-main;
      border-radius :0;
      padding : 0;
      li{
        a{
          display: block;
          color : $color-main;
          padding : 5px 7px;
        }
        &:hover{
          a{
            color : #fff;
          }
          background : $color-main2;
        }
      }
    }
  }
}
.ti-close{
  &:before{
    content: "\f00d";
    font-family:'FontAwesome';
    font-style : normal;
  }
}
.section-flash-sale{
  padding-top : 70px;
  padding-bottom : 30px;
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
  }
  .slick-dots{
    transform: translate(-50%);
    left: 50%;
    bottom: 0px;
    li{
      margin: 0 2px;
      button{
        &:before{
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        background-color: rgba(#adadad, 0);
        border: 2px solid rgba(#adadad, 0.3);
        border-radius : 50%;
        padding: 0;
        position : relative;
        overflow: hidden;
        transition : .5s;
      }
    }
    .slick-active{
      button{
        background-color: rgba(#adadad, 1);
        border: 2px solid rgba(#adadad, 0);
      }
    }
  } 
  .prev-slide,.next-slide{
    background : #fff;
    z-index : 1;
    color: $color-main;
    top : 50%;
    transform : translateY(-50%);
    height : 40px;
    width : 40px;
    line-height : 40px;
    text-align : center;
    font-size : 0;
    position : absolute;
    transition :  .3s;
    border-radius : 50%;
    -webkit-box-shadow: 0px 15px 25px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 15px 25px 0px rgba(0,0,0,0.08);
    box-shadow: 0px 15px 25px 0px rgba(0,0,0,0.08);
    i{
      font-size : 20px;
      line-height : 40px;
    }
    svg{
      width : 13px;
      height : auto;
      height : auto;
      fill: $color-main;
    }
    &:hover{
      svg{
        fill : #fff;
      }
      background : $color-main2;
      color : #fff;
    }
  }
  .next-slide {
    right : 0;
  }
  .prev-slide{
    left : 0;
  }
  .product_new{
    margin-top: 60px;
  }

  @media(max-width: 575.98px){
    .next-slide {
      height : 30px;
      width : 30px;
      line-height : 30px;
      i{
        line-height : 30px;
      }
    }
    .prev-slide{
      height : 30px;
      width : 30px;
      line-height : 30px;
      i{
        line-height : 30px;
      }
    }
    padding-top: 60px;
    padding-bottom: 40px;
    .title_prductnew{
      h3{
        letter-spacing: 2px;
        font-size: 20px;
      }
    }
    .product_new{
      margin-top:40px;
    }
    .product_new{
      .col-6{
        padding-left: 7.5px;
        padding-right: 7.5px;
      }
    }
  }
  @media(min-width : 576px) and (max-width : 767.98px){
    padding-top: 60px;
    padding-bottom: 50px;
    .title_prductnew{
      h3{
        letter-spacing: 2px;
        font-size: 20px;
      }
    }
    .product_new{
      margin-top:40px;
    }
    .product_new{
      .col-6 {
        padding-left: 7.5px;
        padding-right: 7.5px;
      }
    }
    .next-slide {
      height: 40px;
      width: 40px;
      line-height: unset;
    }
    .prev-slide{
      height: 40px;
      width: 40px;
      line-height: unset;
    }
  } 
}
.section-product-v2 {
  .title-section{
    font-size: 30px;
    color: $color-main;
    letter-spacing: 2px;
    font-weight: 500;
    padding-bottom: 20px;
    margin-bottom: 38px !important;
    position: relative;
    &:before{
      content : '';
      height: 1px;
      width: 48px;
      background: $color-main;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
    }
  }
  .nav-tabs.title-tab{
    margin-bottom: 50px;
    border-bottom: none;
    li{
      padding-left: 5px;
      padding-right:5px;
      padding-bottom: 10px;
      .ds-prod-1{
        display: inline-block;
        font-size: 13px;
        text-transform : uppercase;
        min-width: 110px;
        height: 42px;
        line-height: 40px;
        border: 1px solid $color-main2;
        color: $color-main2;
        font-weight: 500;
        text-align: center;
        padding: 0 15px;
        transition: all .25s linear 0s;
        -webkit-transition: all .25s linear 0s;
        -o-transition: all .25s linear 0s;
        @media(max-width: 576px) {
          min-width: 80px;
          font-size: 15px;
          height: 40px;
          line-height: 40px;
        }
        &:hover, &.active{
          background-color: $color-main2;
          color: #fff;
        }
      }
    }
  }
  .tab-content{
    .product-item-v1{
      margin-bottom: 30px;
    }
  }
}
.section-product-v3 {
  .title_heading {
    margin-bottom: 0;
  }
  .product-item-v1{
    margin-bottom: 40px;
  }
  .product_best_sell {
    margin-top: 38px;
  }
  @media(max-width: 575.98px){
    padding-top: 00px;
    padding-bottom: 0px;
    .col-6{
      &:nth-child(odd) {
        padding-right: 7.5px;
      }
      &:nth-child(even) {
        padding-left: 7.5px;
      }
    }
    .product-item-v1{
      margin-bottom: 30px;
    }
  }
  @media(min-width : 576px) and (max-width : 767.98px){
    .col-6{
      &:nth-child(odd) {
        padding-right: 7.5px;
      }
      &:nth-child(even) {
        padding-left: 7.5px;
      }
    }
    .product-item-v1{
      margin-bottom: 30px;
    }
  }
  @media(min-width : 768px) and (max-width : 991.98px){
    .product-item-v1{
      margin-bottom: 35px;
    }
  }
  @media(min-width : 992px) and (max-width : 1199.98px){
    .product-item-v1{
      margin-bottom: 35px;
    }
  }
}
.section-product-v4 {
  .title_heading {
    margin-bottom: 38px;
  }
  .product_tranding{
    .product-item-v1 {
      @media only screen and (max-width: 576px) {
        margin-bottom: 30px;
      }
      @media only screen and (min-width: 576px) {
        margin-bottom: 30px;
      }
      @media only screen and (min-width: 768px) {
        margin-bottom: 40px;
      }
      @media only screen and (min-width: 1200px) {
        margin-bottom: 45px;
      }
      @media only screen and (min-width: 1600px) {
        margin-bottom:58px;
      }
    }
  }
  .view-products{
    a {
      font-weight: 500;
      color: #fff;
      background:  $color-main;
      display: inline-block;
      text-decoration:none;
      transition: background-color .3s ease 0s;
      margin-bottom: 25px; 
      position: relative;
      @media only screen and (max-width: 576px) {
        font-size: 12px;
        padding: 12px 30px;
      }
      @media only screen and (min-width: 576px) {
        font-size: 13px;
        padding: 13px 40px;
      }
      @media only screen and  (min-width: 1200px) {
        font-size: 15px;
        padding: 15px 45px;
      }
      &:hover {
        background: $color-main2;
      }
    }
  }
  @media(max-width: 575.98px){
    .col-6{
      &:nth-child(odd) {
        padding-right: 7.5px;
      }
      &:nth-child(even) {
        padding-left: 7.5px;
      }
    }
  }
  @media(min-width : 576px) and (max-width : 767.98px){
    .col-6{
      &:nth-child(odd) {
        padding-right: 7.5px;
      }
      &:nth-child(even) {
        padding-left: 7.5px;
      }
    }
  }
}
.section-product-v5 {
  .box-info-center {
    position: relative;
    .info-bottom {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      .button-banner {
        display:inline-block;
        padding: 15px 30px;
        font-family: $font-primary;
        transition: all .3s;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 1px;
        &:hover {

        }
      }
    }
  }
}
.section-product-v6 {
  @media only screen and (min-width: 1200px) {
    padding: 50px;
  }
  .slick-dotted.slick-slider{
    margin-bottom:0;
  }
  .slick-dots{
    transform: translate(-50%);
    left: 50%;
    bottom: -25px;
    @media only screen and (min-width: 1600px) {
      bottom: -50px;
    }
    li{
      margin: 0 2px;
      button{
        &:before{
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        background-color: rgba(#adadad, 0);
        border: 2px solid rgba(#adadad, 0.3);
        border-radius: 50%;
        padding: 0;
        position: relative;
        overflow: hidden;
        transition: all.3s;
      }
    }
    .slick-active{
      button{
        background-color: rgba(#adadad, 1);
        border: 2px solid rgba(#adadad, 0);
      }
    }
  }
  .box-info{
    position: relative;
    .info-bottom {
      position: absolute;
      bottom: 3%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .button-all-site {
    font-family: $font-primary;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    position: relative;
    transition: 0.5s;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    padding: 15px 30px;
    letter-spacing: 1px;
  }
}
.section-countdown-v1 {
  padding: 100px 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  .info-deal{   
    .title-deal {
      font-size: 16px;
      font-family: $font-primary2;
      text-shadow: 1px 1px 1px $color-main;
      @media (min-width: 768px) {
        font-size: 18px;
      }
      @media (min-width: 1200px) {
        font-size: 20px;
      }
    }
    .deal-to {
      font-size: 36px;
      font-family: $font-primary2;
      text-shadow: 1px 1px 1px $color-main;
      @media (min-width: 992px) {
        font-size: 40px;
      }
      @media(min-width: 1200px){
        font-size: 50px;
      }
      @media (min-width: 1600px) {
        font-size: 60px;
      }
    }
  }
  .countdown-timer{
    padding-top: 60px;
    @media(max-width: 575.98px) {
      padding-top: 30px;
    }
    ul{padding-left: 0;}
    li {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-family: $font-primary;      
      font-weight: 400;
      list-style-type: none;
      color: $color-main;      
      margin: 20px;
      background: #ffffff;
      border-radius: 50%;
      &:first-child{
        margin-left:0;
      }
      width: 150px;
      height: 150px;
      @media (min-width: 992px) and (max-width: 1200px){
        width: 120px;
        height: 120px;
        font-size: 18px;
      }
      @media (min-width: 768px) and (max-width: 991.99px){
        width: 100px;
        height: 100px;
        font-size: 16px;
      }
      @media (min-width: 576px) and (max-width: 768px){
        width: 100px;
        height: 100px;
        font-size: 14px;
      }
      @media (max-width: 576px){
        width: 80px;
        height: 80px;
      }
      span {
        color: $color-main;
        display: inline-block;
        font-weight: 500;
        font-size: 50px;
        font-family : $font-primary;
        text-algin: center;
        @media (min-width: 768px) and (max-width: 992px) {
          font-size: 40px;
        }
        @media (min-width: 576px) and (max-width: 768px){
          font-size: 35px;
        }
        b {
          font-weight: 500;
          padding-top: 7px;
        }
      }
    }
  }
  .button {
    margin-top: 60px;
    font-family: $font-primary;
    position: relative;
    display: inline-block;
    font-weight: 500;
    text-align: center;
    color: $color-main;
    padding: 15px 40px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
    @media (max-width: 992px){
      margin-top: 30px;
    }
    transition: all .3s ease 0s;
    text-transform: uppercase;
  }
  @media (min-width: 992px) and (max-width: 1024px){
    .info-deal{
      .title-deal {
        width: 95%;
      }
    }
  }
  @media (min-width: 576px) and (max-width: 992px){
    .slick-dots {
      bottom: -16%;
    }
    .info-deal{
      .title-deal{
        width: 100%;
      }
    }
  }
  @media (max-width: 576px){
    .bannerimages{
      min-height: 450px;
      object-fit: cover;
    }
    .countdown-timer li {
      font-size: 15px;
      margin: 4px;
      span {
        font-size: 25px;
      }
    }
    .slick-dots {
      bottom: 5%;
    }
    .info-deal{
      width:100%;
      .title-deal{
        width: 100%;
      }
      .deal-to {
        padding-bottom: 15px;
      }
      .deal-des {
        float: unset;
        width: 100%;
        text-align: center;
        display: block;
        padding-top: 20px;
      }
    } 
  }
}
.section-banner-v1 {
  .box-banner {
    position: relative;
    margin: 0 0 15px;
    .info-banner {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
      padding: 20px;
      width: 75%;
      @media (max-width: 576px) {
        width: 75%;
      }
      h3 {
        font-family: $font-primary;
        font-weight: 600;
        font-size: 20px;
        text-shadow: 1px 1px 1px $color-main;
        @media (max-width: 576px) {
          font-size: 20px;
        }
        @media (min-width: 576px) {
          font-size: 40px;
        }
        @media (min-width: 768px) {
          font-size: 25px;
        }
        @media (min-width: 992px) {
          font-size: 30px;
        }
        @media (min-width: 1200px) {
          margin-bottom: 20px;
          font-size: 40px;
        }
        @media (min-width: 1600px) {
          font-size: 50px;
        }
      }
      a {
        display: inline-block;
        font-family: $font-primary;
        font-weight: 500;
        font-size: 14px;
        padding: 15px 40px;
        line-height: 1;
        letter-spacing: 1px;
        margin: 0;
      }
    }
  }
}
.section-banner-v2 {
  margin-top:80px;
  .banner-box{
    position: relative;
    .banner-info{
      position: absolute;
      &.content-left {
        left: 25px;
        top: 47%;
        transform: translateY(-50%);
        width: fit-content;
        padding: 30px;
        max-width: 50%;
        @media only screen and (min-width: 1200px) {
          left: 6%;
          padding: 30px 50px;
        }
        @media only screen and (min-width: 1600px) {
          left: 12%;
          padding: 50px 70px;
        }
        @media only screen and (max-width: 576px) {
          max-width: 70%;
        }
      }
      &.content-right {
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        width: fit-content;
        padding: 30px;
        max-width: 85%;
        @media only screen and (min-width: 1600px) {
          padding: 50px;
        }
      }
      &.content-center {
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        width: fit-content;
        padding: 30px;
        max-width: 90%;
        @media only screen and (min-width: 1600px) {
          padding: 50px;
        }
      }
      .title{
        margin-top: 0;
        color: $color-main;
        span {
          color: $color-main2;
        }
        font-weight: 600;
        font-family: $font-primary;
        text-transform: unset;
        @media only screen and (max-width: 576px) {
          font-size: 40px;
        }
        @media only screen and (min-width: 576px) {
          font-size: 50px;
        }
        @media only screen and (min-width: 768px) {
          font-size: 55px;
        }
        @media only screen and (min-width: 992px) {
          font-size:60px;
        }
        @media only screen and (min-width: 1200px) {
          font-size: 70px;
        }
        @media only screen and (min-width: 1600px) {
          font-size: 84px;
        }
      }
      .sub-title {
        font-weight: normal;
        color: $color-main;
        font-family: $font-primary;
        @media only screen and (max-width: 576px) {
          margin-bottom: 25px;
        }
        @media only screen and (min-width: 576px) {
          margin-bottom: 25px;
        }
        @media only screen and (min-width: 1200px) {
          font-size: 18px;
        }
        @media only screen and (min-width: 1600px) {
          margin-bottom: 30px;
          font-size: 20px;
        }
      } 
      .button-shop {
        background-color: $color-main;
        color: #fff;
        overflow: hidden;
        display: inline-block;
        position: relative;
        transition: color 0.25s,border-color 0.25s,background-color 0.25s,opacity 0.25s,width 0.25s ease 0s;
        font-weight: 500; 
        line-height: 1;
        padding: 15px 40px;
        font-size: 14px;
        letter-spacing: 1px;
        &:hover{
          background-color:white;
          color: #000;
        }
      }
    }
  }
  .box-img-banner img {
    min-height: 400px;
    object-fit: cover;
  }
}
.section-banner-v3 {
  .banner-item {
    position: relative;
    .content {
      position: absolute;
      top: 50%;
      left: 30px;
      transform: translateY(-50%);
      z-index: 2;
      @media (min-width: 1200px) {
        left: 50px;
      }
      .sub-title {
        @media (max-width: 576px) {
          font-size: 26px;
        }
        @media (min-width: 576px) {
          font-size: 45px;
        }
        @media (min-width: 768px) {
          font-size: 28px;
        }
        @media (min-width: 1200px) {
          font-size: 35px;
        }
        @media (min-width: 1600px) {
          font-size: 40px;
          font-weight: 700;
          font-family: $font-primary;
        }
      }
      .title-banner {
        font-family: $font-primary;
        font-weight: 600;
        margin-bottom: 18px;
        margin-bottom: 10px;
        @media only screen and (max-width: 576px) {
          font-size: 32px;
        }
        @media (min-width: 576px) {
          font-size: 50px;
        }
        @media only screen and (min-width: 768px) {
          font-size:  28px;
        }
        @media only screen and (min-width: 1200px) {
          font-size: 40px;
        }
        @media only screen and (min-width: 1600px) {
          font-size: 40px;
        }
      }
      a {
        display: inline-block;
        font-family: $font-primary;
        font-weight: 600;
        transition: all .3s; 
        font-size: 16px;
        i {
          font-size: 16px;
          display: inline-block;
          padding-left: 3px;
          transition: all .2s;
        }
        &:hover {
          i {
            padding-left: 6px;
          }
        }
      }
    }
    .box-img{
      overflow: hidden;
      border-radius: 20px;
    }
    transition: all 0.4s ease-out 0s;
    &:hover {
      img {
        transform: scale(1.04);
        transition: all .8s linear;
      }
      &:after, &:before {
        opacity: 1;
        visibility: visible;
        transform: unset;
      }
    }
  }
  .banner-ver {
    @media (max-width: 768px) {
      margin-bottom: 10px;
    }
  }
}
.section-banner-v4 {
  .box-banner {
    position: relative;
    @media (max-width: 768px) {
      margin-bottom: 15px;
    }
    .info-banner {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      a{
        font-size:18px;
        text-transform: capitalize;
        @media (max-width: 1200px) {
          font-size:16px;
        }
      }
      .title-banner{
        @media (max-width: 1200px) {
          font-size: 22px;
        }
      }
      .title-banner1{


        @media (min-width: 320px) {
          font-size: 34px;
        }
        @media (min-width: 576px) {
          font-size: 40px;
        }
        @media (min-width: 768px) {
          font-size: 30px;
        }

        @media (min-width: 992px) {
          font-size: 35px;
        }

        @media (min-width: 1200px) {
          font-size: 40px;
        }
      }
    }
    .info-banner1{
      text-align: center;
      right: 32%;
      @media (min-width: 320px) {
        right: 15%;
      }
      @media (min-width: 500px) {
        right: 21%;
      }
      @media (min-width: 576px) {
        right: 21%;
      }
      @media (min-width: 660px) {
        right: 25%;
      }
        
      @media (min-width: 768px) {
        right: 15%;
      }
      @media (min-width: 850px) {
        right: 20%;
      }
      @media (min-width: 992px) {
        right: 20%;
      }
      @media (min-width: 1200px) {
        right: 23%;
      }
    }
    .info-banner2{
      text-align: left;
      padding-left: 10px;
    }
    .info-banner3{
      right: 30px;
      text-align: right;
    }
  }  
}
.section-banner-v5 {
  &.padding_top_banner5 {
    padding-top: 70px;
    @media (max-width: 1200px) {
      padding-top: 60px;
    }
    @media (max-width: 576px) {
      padding-top: 50px;
    }
  }
  .col-banner-4 {
    position: relative;
    @media only screen and (max-width: 992px) {
      max-width: 100%;
      flex: 0 0 100%;
      margin-top: 15px;
    }
    @media only screen and (min-width: 993px) {
      max-width: 50%;
      flex: 0 0 50%;
    }
  }
  .col-banner-6 {
    position: relative;
    @media only screen and (max-width: 992px) {
      max-width: 100%;
      flex: 0 0 100%;
      margin-top: 15px;
    }
    @media only screen and (min-width: 993px) {
      max-width: 50%;
      flex: 0 0 50%;
    }
  }
  .box-img1 {
    position: relative;
    &.img-left {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      @media only screen and (min-width: 768px) {
        background: none;
        height: 100%;
      }
    } 
    img {
      @media (min-width: 768px) and (max-width: 1200px) {
        object-fit: cover;
      }
    }
    .banner-content {
      width: 80%;
      margin: 0 auto;
      padding-top:30%;
      @media only screen and (max-width: 1100px) {
        padding-top:15%;
      }
      @media only screen and (max-width: 992px) {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        width: unset;
        padding: 20px 30px;
      }
      @media (max-width: 576px) {
        padding: 30px 15px;
      }
      .title-banner {
        margin-bottom: 15px;
        font-family: $font-primary2;
        @media only screen and (max-width: 576px) {
          font-size: 40px;
        }
        @media only screen and (min-width: 576px) {
          font-size: 50px;
        }
        @media only screen and (min-width: 768px) {
          font-size: 50px;
        }
        @media only screen and (min-width: 992px) {
          font-size: 40px;
        }
        @media only screen and (min-width: 1200px) {
          font-size: 50px;
        }
        @media only screen and (min-width: 1600px) {
          font-size: 60px;
        }
      }
      .sub-title {
        margin-bottom: 20px;
        @media only screen and (min-width: 1600px) {
          margin-bottom: 30px;
        }
        @media only screen and (max-width: 1100px) {
          font-size: 15px;
        }
        @media only screen and (max-width: 500px) {
          font-size: 14px;
        }
      }
      .button-shop {
        overflow: hidden;
        display: inline-block;
        position: relative;
        transition: color 0.25s,border-color 0.25s,background-color 0.25s,opacity 0.25s,width 0.25s ease 0s;
        font-weight: 500; 
        line-height: 1;
        padding: 15px 40px;
        font-size: 14px;
        letter-spacing: 1px;
        border: 1px solid #fff;
        background:black;
        color:white;
        &:hover{
          background:white;
          color:black; 
          transition: all .4s;
        }
        @media only screen and (min-width: 1200px) {
          margin-top: 20px;
        }
      }
      img{
        padding: 8% 0 0 0;
        width: inherit;
      }
    }
    .info-banner1{
      @media only screen and (max-width: 576px) {
        width: 100%;
        margin: 0 auto;
      }
    }
  }
  .box-img{
    .info-banner{
      position: absolute;
      width:55%;
      background:white;
      bottom: 5%;
      padding: 20px 40px;
      margin-left: 46px;
      .sub-title1{
        margin-bottom:0;
      }
      @media only screen and (max-width: 768px) {
        width:65%;
        h2{
          font-size:25px;
        }
      }
      @media only screen and (max-width: 500px) {
        display:none;
      }
    }
  }
  .img-right {
      position: relative;
      img {
        transition: all .4s;
        transform: unset;
      }
      &:hover {
        img {
          transition: all .4s;
          transform: unset;
        }
      }
  }
}

.section-banner-v6 {
  .banner-box {
    position: relative;
    .box-img-one img {
      @media (max-width: 992px) {
        min-height: 400px;
        object-fit: cover;  
      }
      @media (max-width: 768px) {
        min-height: 350px;
      }
      @media (max-width: 576x) {
        min-height: 450px;
      }
    }
    .banner-info {
      position: absolute;
      left: 30%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 50%;
      @media (max-width: 1100px) { 
        left: 38%;
        width: 70%;
      }
      @media (max-width: 400px) { 
        left: 48%;
        width: 90%;
      }
      .title {
        margin-top: 0;
        margin-bottom: 10px;
        font-family: $font-primary2;
        font-weight: 400;
        text-transform: unset;
        @media (max-width: 576px) {
          font-size: 50px;
        }
        @media (min-width: 576px) {
          font-size: 60px;
          margin-bottom: 10px;
        }
        @media (min-width: 768px) {
          font-size: 65px;
        }
        @media (min-width: 992px) {
          font-size: 78px;
        }
        @media (min-width: 1200px) {
          font-size: 82px;
          margin-bottom: 10px;
        }
        @media (min-width: 1600px) {
          font-size: 85px;
          margin-bottom: 10px;
        }
      }
      .subtitle {
        line-height: 1.4;
        font-weight: 400;
        margin-bottom: 0;
        @media (max-width: 576px) {
          font-size: 19px;
          br{
            display:none;
          }
        }
        @media (min-width: 576px) {
          font-size: 19px;
        }
        @media (min-width: 1200px) {
          font-size: 25px;
        }
        @media (min-width: 1600px) {
          font-size: 25px;
        }
      }.button-shop {
        overflow: hidden;
        display: inline-block;
        position: relative;
        transition: color 0.25s,border-color 0.25s,background-color 0.25s,opacity 0.25s,width 0.25s ease 0s;
        font-weight: 500; 
        line-height: 1;
        padding: 15px 40px;
        font-size: 14px;
        letter-spacing: 1px;
        background:black;
        color:white;
        margin-top: 30px;
        &:hover{
          background:white;
          color:black; 
          transition: all .4s;
        }
      }
    }
  }
}
.section-banner-v7 {
  .content-banner {
    padding: 40px;
    @media (min-width: 1200px) {
      padding: 60px 100px;
    }
    .title-banner {
      font-family: $font-primary2;
      font-weight: 500;
      @media only screen and (max-width: 576px) {
        font-size: 30px;
        margin-bottom: 25px;
      }
      @media only screen and (min-width: 576px) {
        font-size: 35px;
        margin-bottom: 25px;
      }
      @media only screen and (min-width: 992px) {
        font-size: 40px;
      }
      @media only screen and (min-width: 1200px) {
        font-size: 55px;
      }
      @media only screen and (min-width: 1600px) {
        font-size: 60px;
        margin-bottom: 22px;
      }
    }
    .content {
      @media only screen and (min-width: 576px) {
        font-size: 20px;
        margin-bottom: 25px;
      }
      @media only screen and (min-width: 992px) {
      }
      @media only screen and (min-width: 1200px) {
        font-size: 22px;
        margin-bottom: 30px;
      }
      @media only screen and (min-width: 1600px) {
        margin-bottom: 50px;
      }
    }
    .button-banner {
      display: inline-block;
      font-family: $font-primary;
      font-weight: 500;
      color: $color-main2;
      background: #fff;
      font-size: 14px;
      line-height: 1;
      padding: 15px 40px;
      letter-spacing: 1px;
      transition: all .3s;
      &:hover {
        background: $color-main2;
        color: #fff;
      }
      @media only screen and (max-width: 576px) {
        padding: 12px 25px;
      }
    }
  }
  .banner-v7 {
    position: relative;
    background-attachment: fixed;
    background-size: cover!important;
    background-position: center!important;
    @media (max-width: 576px) {
      padding: 50px 0;
    }
    @media (min-width: 576px) {
      padding: 60px 0;
    }
    @media (min-width: 768px) {
      padding: 80px 0;
    }
    @media (min-width: 992px) {
      padding: 100px 0;
    }
    @media (min-width: 1600px) {
      padding: 120px 0;
    }
  }
}
.section-banner-v8 {
  padding: 0 10px;
  .box-banner {
    position: relative;
    margin: 20px 10px 0;
    @media (max-width: 768px) {
      margin: 20px 5px 0;
    }
    .box-img {
      .img-banner {
        position: relative;
        display: block;
      }
    }
    .info-banner {
      position: absolute;
      bottom: 30px;
      right: 30px;
      z-index: 1;
      text-align: right;
      h3 {
        font-family: $font-primary;
        font-weight: 500;
        font-size: 18px;
        margin-bottom: 15px;
        @media (min-width: 576px) {
          font-size: 20px;
        }
        @media (min-width: 1200px) {
          font-size: 22px;
        }
        @media (min-width: 1600px) {
          font-size: 26px;
        }
      }
      a {
        font-family: $font-primary2;
        font-weight: 500;
        font-size: 16px;
        line-height: 1;
        letter-spacing: 2px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        padding: 3px 0 6px;
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          height: 1px;
          width: 100%;
          transform: scaleX(1);
        }
        &:hover {
          &:after {
            -webkit-animation: underline-link .8s cubic-bezier(.58,.3,.005,1) 0s 1;
            animation: underline-link .8s cubic-bezier(.58,.3,.005,1) 0s 1;
          }
        }
      }
    }
  }
}
.section-banner-v9 {
  .content-banner {
    padding: 30px;
    text-align: center;
    background: #fff;
    margin: 0 auto;
    width: fit-content;
    @media (max-width: 576px) {
      margin: 0 15px;
    }
    .title-banner {
      font-family: $font-primary;
      font-weight: 600;
      @media only screen and (max-width: 576px) {
        font-size: 30px;
      }
      @media only screen and (min-width: 576px) {
        font-size: 35px;
      }
      @media only screen and (min-width: 992px) {
        font-size: 35px;
      }
      @media only screen and (min-width: 1200px) {
        font-size: 40px;
      }
    }
    .content {
      @media only screen and (min-width: 576px) {
        font-size: 20px;
        margin-bottom: 20px;
      }
    }
    .button-banner {
      display: inline-block;
      font-family: $font-primary;
      font-weight: 500;
      font-size: 14px;
      line-height: 1;
      padding: 15px 40px;
      letter-spacing: 1px;
    }
  }
  .banner-v9 {
    position: relative;
    background-size: cover!important;
    background-position: center!important;
    @media (max-width: 576px) {
      padding: 250px 0 30px;
    }
    @media (min-width: 576px) {
      padding: 250px 0 30px;
    }
    @media (min-width: 768px) {
      padding: 350px 0 30px;
    }
    @media (min-width: 992px) {
      padding: 350px 0 30px;
    }
    @media (min-width: 1200px) {
      padding: 400px 0 30px;
    }
    @media (min-width: 1600px) {
      padding: 500px 0 30px;
    }
  }
}
.section-banner-v10 {
  img {
    transition: all .4s;
  }
  .title-info {
    margin-bottom: 38px;
    .title_heading {
      margin: auto;
    }
  }
  .item-banner {
    position: relative;
    border: 1px solid #fff;
    .content-banner {
      position: absolute;
      bottom: 20px;
      left: 20px;
      .title-banner {
        font-family: $font-primary;
        font-weight: 600;
        font-size: 26px;
        text-shadow: 1px 1px 1px $color-main;
        color: #fff;
        transition: all .5s;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        @media (min-width: 1200px) {
          opacity: 0;
          visibily: hidden;
        }
      }
    }
    &:hover {
      .content-banner {
        .title-banner {
          opacity: 1;
          visivility: visible;
        }
      }
    }
  }
  .box-banner {
    position: relative;
    width: 100%;
    height: 100%;
    .content-banner {
      width: 100%;
      padding: 25px;
      @media (min-width: 768px) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      h3 {
        font-family: $font-primary;
        font-size: 30px;
      }
      p {
        font-family: $font-primary;
      }
      a {
        font-family: $font-primary;
        display: inline-block;
        line-height: 1;
        padding: 15px 40px;
        transition: all .3s;
        font-size: 14px;
        letter-spacing: 1px;
      }
    }
  }
}
.section-banner-v11 {
  padding-top: 50px;
  padding-bottom: 30px;
  @media (min-width: 1200px) {
    padding-bottom: 50px;
  }
  @media (min-width: 1600px) {
    padding-bottom: 70px;
  } 
  .item-banner  {
    margin: 15px 0;
    position: relative;
    .img-banner {
      border: 15px solid #fff;
      box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
    }
    .content-banner  {
      position: absolute;
      left: 40px;
      bottom: 20px;
      h3 {
        .title-banner {
          font-family: $font-primary;
          font-weight: 500;
          font-size: 22px; 
          @media (max-width: 576px) {
            font-size: 16px;
          }
          @media (min-width: 576px) {
            font-size: 16px;
          }
          @media (min-width: 768px) {
            font-size: 18px;
          }
          @media (min-width: 1200px) {
            font-size: 22px;
          }
        }
      }
    }
  }
  .sub_heading {
    display: inline-block;
    margin-bottom: 28px;
  }
  .banner-wrap {
    .content-banner  {
      h3 {
        .title-banner {
          font-weight: 500;
          @media (max-width: 576px) {
            font-size: 14px;
          }
        }
      }
    }
    .col-6:first-child {
      .content-banner {
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        top: unset;
        @media (max-width: 576px) {
          bottom: 20px;
        }
      }
    }
    .col-6:last-child {
      .content-banner {
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        bottom: unset;
        @media (max-width: 576px) {
          top: 20px;
        }
      }
    }
  }
  .banner-wrap2 {
    .content-banner  {
      h3 {
        .title-banner {
          font-weight: 500;
          @media (max-width: 576px) {
            font-size: 14px;
          }
        }
      }
    }
    .col-6:first-child {
      .content-banner {
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        bottom: unset;
        @media (max-width: 576px) {
          top: 20px;
        }
      }
    }
    .col-6:last-child {
      .content-banner {
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        top: unset;
        @media (max-width: 576px) {
          bottom: 20px;
        }
      }
    }
  }
}
.section-banner-v12{
  margin-top:30px;
  .banner-ver {
    .banner-item {
      pointer-events: none;
      position: relative;
      transition: all .8s linear;
      &:before{
        content: '';
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        z-index: 1;
      }
      &:after{
        content: '';
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        z-index: 1;
      }
      a {
        pointer-events: auto;
      }
      .content {
        left: 50%;
        .title-banner {
          font-size: 60px;
          font-family: $font-primary;
          font-weight: 500;
          @media only screen and (min-width: 300px){
            font-size:42px;
          }
          @media only screen and (min-width: 576px){
            font-size:65px;
          }
          @media only screen and (min-width: 768px){
            font-size: 80px;
          }
          @media only screen and (min-width: 992px){
            font-size: 50px;
          }
          @media only screen and (min-width: 1100px){
            font-size: 55px;
          }
          @media only screen and (min-width: 1600px){
            font-size: 60px;
          }
        }
        .sub-title-bottom {
          font-size: 18px;
          @media only screen and (max-width: 992px){
            font-size:20px;
          }
          @media only screen and (min-width: 768px){
            font-size:20px;
          }
          @media only screen and (max-width: 768px){
            font-size:18px;
          }
          @media only screen and (max-width: 450px){
            font-size:18px;
            br{
              display:none;
            }
          }
        }
      }
    }
  }
  .wrap-banner {
    .banner-item {
      pointer-events: none;
      margin-bottom: 30px;
      position: relative;
      transition: all .8s linear;
      &:before{
        content: '';
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        z-index: 1;
      }
      &:after{
        content: '';
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        z-index: 1;
      }
      @media only screen and (max-width: 768px){
        margin-top: 30px;
      }
      .title-banner {
        font-size: 45px;
        font-family: $font-primary;
        font-weight: 500;
        @media only screen and (min-width: 300px) {
          font-size: 34px;
        }
        @media only screen and (min-width: 450px) {
          font-size: 38px;
        }
        @media only screen and (min-width: 576px) {
          font-size: 50px;
        }
        @media only screen and (min-width: 768px) {
          font-size: 60px;
        }
        @media only screen and (min-width: 992px) {
          font-size: 40px;
        }
        @media only screen and (min-width: 1150px) {
          font-size: 45px;
        }
        @media only screen and (min-width: 1600px) {
          font-size: 50px;
        }
      }
      .sub-title-bottom{
        font-size: 18px;
        @media only screen and (max-width: 992px){
          font-size:18px;
        }
        @media only screen and (max-width: 768px){
          font-size:18px;
        }
        @media only screen and (min-width: 768px){
          font-size:18px;
        }
        @media only screen and (max-width: 450px){
          font-size:18px;
          br{
            display:none;
          }
        }
      }
      a {
        pointer-events: auto;
      }
    }
    .banner-item:first-child .content{
      left: 8%;
      transform: translateY(-50%);
      text-align: left;
    }
    .banner-item:last-child .content{
      right: 8%;
      transform: translateY(-50%);
      text-align: right;
    }
    .btns{
      display: inline-block;
      font-weight: 500;
      color: #fff;
      transition: all .4s;
      line-height: 1;
      padding: 15px 40px;
      font-size: 15px;
      margin-top:20px!important; 
      @media only screen and (max-width: 992px){
        padding: 10px 20px;
        font-size: 13px;
        margin-top: 10px!important;
      }
      @media only screen and (max-width:767px) {
        padding: 14px 30px;
        font-size: 15px;
        margin-top: 15px!important;
      }
      @media only screen and (max-width: 576px) {
        padding: 11px 24px;
        font-size: 14px;
        margin-top: 10px!important;
      }
    }
  }
  .content {
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 95%;
    padding: 0 15px;
    position: absolute;
    z-index: 2;
  }
}

.section-newsletter-v1 {
  padding-top: 100px;
  padding-bottom: 100px;
  background-size : cover;
  background-position: center center;
  .title_newletter {
    h3 {
      font-size: 42px;
      text-align: center;
      font-family: $font-primary;
      font-weight: 600;
      letter-spacing: 2px;
    }
  }
  .content {  
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    padding-top: 5px;
    @media (min-width: 1600px) {
      font-size: 18px;
    }
  }
  .newletter_email {
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 18px;
    padding: 0 15px;
    form{
      width: 100%;
      position: relative;
      .form-group {
        width: 100%;
        .form-control {
          padding: 25px;
          padding-right: 4rem;
          font-size: 1rem;
          line-height: 1.5;
          border-radius : 0;
          border : none;
          font-size: 12px;
          font-weight: 600;
          color: #495057;
          background-color: #fff;
        }
        input {
          width: 100%;
          &::placeholder {
            font-size:14px;
            color: #868686;
          }
        }          
      }
      .btn {
        position: absolute;
        right: 0;
        top: 50%;
        height: 50px;
        line-height: 32px;
        background-color: $color-main2;
        font-size: 12px;
        cursor: pointer;
        transform: translateY(-50%);
        color: #fff;
        border-radius : 0;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 2px;
        transition : .3s;
        border: 1px solid #fff;
        svg{
          width : 25px;
          height : auto;
          fill : #fff;
        }
        &:hover {
          background-color: #fff;
          color : $color-main2;
          border: 1px solid $color-main2;
          svg{
            fill : $color-main2;
          }
        }
      }
      .btn.focus, .btn:focus {
        outline: 0;
        box-shadow: none;
      }
    }
  }
  .box-padding-style3 {
    padding:10px;
    transform: translateX(-20%);
    .box-style3{
      padding: 80px 20px;
    }
  }
  @media(max-width: 575.98px) {
    padding-top: 50px;
    padding-bottom: 50px;
    .title_newletter {
      h3 {
        font-size: 30px !important;
      }
    }
    .content {  
      font-size: 16px;
    }
    .newletter_email {
      width: 100%;
      form{
        .form-group {
          margin-bottom: 0;          
        }
      }
    }
    .box-padding-style3 {
      padding: 10px;
      margin-top:30px;
      transform: unset;
      .box-style3{
        padding: 80px 20px;
      }
    }
  }
  @media(min-width : 576px) and (max-width : 767.98px){
    padding-top: 50px;
    padding-bottom: 50px;
    .box-padding-style3{
      padding:10px;
      margin-top:30px;
      transform: unset;
      .box-style3{
        padding: 80px 20px;
      }
    }
    .title_newletter{
      h3{
        font-size: 30px !important;
      }
    }
    .content{  
      font-size: 16px;
    }
    .newletter_email {
      form{
        .form-group{
          margin-bottom: 0;          
        }
      }
    }
  } 
  @media(min-width : 768px) and (max-width : 991.98px){
    padding-top: 80px;
    padding-bottom: 80px;
    .title_newletter{
      h3{
        font-size: 35px !important;
      }
    }
    .content{  
      font-size: 16px;
    }
    .newletter_email{
      form{
        .form-group{
          margin-bottom: 0;          
        }
      }
    }
  }
  @media(min-width : 992px) and (max-width : 1199.98px){
    padding-top: 100px;
    padding-bottom: 100px;
    .title_newletter{
      h3{
        font-size: 35px !important;
      }
    }
    .content{  
      font-size: 16px;
    }
  }
  @media(min-width : 1200px) and (max-width : 1500px){
    padding-top: 120px;
    padding-bottom: 120px;
    .title_newletter{
      h3{
        font-size: 35px !important;
      }
    }
    .content{  
      font-size: 16px;
    }
  }
}
.section-brand-v1 {
  padding: 50px 0;
  @media (max-width: 576px) {
    padding: 30px 0;
  }
  .slick-slide img {
    margin: 0 auto;
    opacity: 1;
    transition: all .3s ease;
    &:hover {
      opacity: .5;
      transition: all .3s ease;
    }
  }
  @media(max-width: 575.98px) {
    button.prev-slide,
    button.next-slide {
      font-size: 20px;
      border: none;
      top: 35%;
      width: 40px;
      color: #333;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      height: 40px;
      border-radius: 0%;
      text-align: center;
      background-color:#fff;
      opacity: 1;
      z-index:1;
      visibility: visible;
      position: absolute;
    }
    button.prev-slide {
      left: -15px;
    }
    button.next-slide {
      right: -15px;
    }
  }
  @media(min-width : 576px) and (max-width : 767.98px) {
    button.prev-slide,
    button.next-slide {
      font-size: 20px;
      border: none;
      top: 35%;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: #333;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      text-align: center;
      background-color: #fff;
      opacity: 1;
      z-index:1;
      visibility: visible;
      position: absolute;
    }
    button.prev-slide {
      left: 0px;
    }
    button.next-slide {
      right: 0px;
    }
  }
  @media(min-width : 768px) and (max-width : 991.98px) {
    button.prev-slide,
    button.next-slide {
      font-size: 20px;
      border: none;
      top: 35%;
      width: 40px;
      color: #333;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      height: 40px;
      border-radius: 50%;
      text-align: center;
      background-color:#fff;
      opacity: 1;
      z-index:1;
      visibility: visible;
      position: absolute;
    }
    button.prev-slide {
      left: 0px;
    }
    button.next-slide {
      right: 0px;
    }
  }
  @media(min-width : 992px) and (max-width : 1199.98px) {
    button.prev-slide,
    button.next-slide {
      font-size: 20px;
      border: none;
      top: 35%;
      width: 40px;
      color: #333;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      height: 40px;
      border-radius: 50%;
      text-align: center;
      background-color:#fff;
      opacity: 1;
      z-index:1;
      visibility: visible;
      position: absolute;
    }
    button.prev-slide {
      left: 0px;
    }
    button.next-slide {
      right: 0px;
    }
  }
}
.section-service-v1 {
  position : relative;
  z-index : 1;
  overflow: hidden;
  .itemtservice{
    position : relative;
    .box-service{
      padding : 30px 20px;
      .number{
        max-width : 65px;
        padding-bottom : 15px;
        margin: 0 auto;
      }
      .info{
        text-align: center;
        .title{
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 1px;
          text-transform: uppercase;
          color: $color-main;
          font-family: $font-primary;
          margin-bottom: 5px;
        }
        .content{
          font-family: $font-primary;
          color: #a9a9a9;
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 0px;
        }
      }
    }
  }
}
.section-service-v2 {
  position: relative;
  z-index: 1;
  margin-top: -80px;
  background: #fff;
  box-shadow: 1px 2px 6px 4px rgba(53,57,68,0.2);
  overflow: hidden;
  @media only screen and (max-width: 576px) {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .slick-current {
    &:before {
      background: transparent !important;
    }
  }
  .itemtservice {
    padding: 0px 25px;
    position: relative;
    .box-service {
      margin: 0 auto;      
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px 0;
      .number {
        max-width: 60px;
        font-size: 65px;
        color: $color-main2;
        font-family: $font-primary;
        font-weight: 600;
        line-height: 1;
      }
      .info {
        text-align: center;
        padding: 10px 0;
        .title {
          font-size: 15px;
          font-weight: 800;
          color: $color-main;
          font-family: $font-primary;
          text-transform: uppercase;
          margin-bottom: 5px;
        }
        .content {
          font-family: $font-primary;
          font-size: 14px;
          color: #868686;
          line-height: 24px;
          margin-bottom: 0px;
        }
      }
    }
  }
}
.section-info-v1 {
  margin-top: 70px;
  margin-bottom: 70px;
  .content_info {
    text-align: center;
    font-size: 16px;
    color: #a8a8a8;
    font-weight : 500;
    width: 70%;
    margin: 0 auto;
    margin-top: 30px;
  }
  .button-about {
    margin-top: 30px;
    a {
      color: $color-main;
      display: inline-block;
      transition: all .3s;
      font-weight: 500;
      position: relative;
      line-height: 1;
      padding-bottom: 2px;
      border-bottom: 2px solid ;
      &:hover {
        color: $color-main2;
      }
      @media only screen and (max-width: 576px) {
        font-size: 12px;
      }
      @media only screen and (min-width: 576px) {
        font-size: 14px;
      }
      @media only screen and (min-width: 1200px) {
        font-size: 15px;
      }
    }
  }
  @media(max-width: 575.98px) {
    margin-top: 50px;
    margin-bottom: 50px;
    .content_info {
      width : 100%;
    }
  }
  @media(min-width: 576px) and (max-width: 767.98px){
    .content_info{
      width : 100%;
    }
  }
}
.section-slideshow-v2 {
  &:hover {
    .next-slide {
      right: 15px;
      opacity: 1;
    }
    .prev-slide{
      left: 15px;
      opacity: 1;
    }
  }
  .itemv-slide-h2 {   
    overflow: hidden;
    .info-sideh2_1 {
      transform: translateY(100%);
    }
    .info-sideh2_2 {
      transform: translateY(-100%);
    }
    .info_slide {
      transition: 1s;
      .box-info{
        .img-product {
          max-width:50%;
          margin:auto;
        }
        .info-product {
          margin-top: 10px;
          .title-product {
            font-size: 20px;
          }
          .product-price{  
            font-size: 20px;
            font-weight: 400;
            color: $color-main2;
            text-decoration: none;
            span {
              font-size: 16px;
              font-weight: 400;
              color: #83868c;
              margin-left: 7px;
              text-decoration: line-through;
            }
          }
          .button-product {
            margin-top: 20px;
            transition: all .3s;
            padding: 15px 40px;
            display: inline-block;
            line-height: 1;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 1px;
          }
        }
        .box-content {
          text-align: center;
          opacity: 0;
          transition: .6s;
          transition-delay: .9s;
          transform: translateY(-10%);
          .title1 {
            font-size: 60px;
            font-weight: 600;
            line-height: 1;
            font-family: $font-primary2;
          }
          p {
            margin-top: 30px;
            font-family: $font-primary;
          }
          .button-shop {
            display: inline-block;
            padding: 15px 40px;
            font-family: $font-primary;
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 1px;
            line-height: 1;
            transition: all .3s;
          }
        }
      }
    }
  }  
  button.next-slide,
  button.prev-slide {
    width: 50px;
    height: 50px;
    line-height: 1;
    border-radius: 50%;
    background: rgba($color-main2,.3);
    text-align: center;
    font-size: 25px;  
    position: absolute;  
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    border: none;    
    text-align: center;
    opacity: 0;
    z-index: 1;
    visibility: visible;
    transition: all .3s;
    &:hover {
      color: #fff;
      opacity: 1;
      background: $color-main2;
    }
  }
  button.next-slide {
    right: 40px;
  } 
  button.prev-slide {
    left: 40px;
  }
  .slick-dots {
    transform: translate(-50%);
    left: 50%;
    bottom: 54px;
    li{
      margin: 0 3px;
      button {
        &:before {
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        border-radius: 50%;
      }
    }
    .slick-active {
      .info_slide {
        transform : none;
      }
      button {
        background-color: $color-main2;
        border-radius: 50%;
      }
    }
  }  
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
  }
  .slick-active {
    .info_slide {
      transform : none;
      .box-info {
        .box-content {
          opacity : 1;
          transform : unset ;
        }
      }
    }
  }
  @media(max-width: 575.98px) {
    .itemv-slide-h2 {
      .item-change {
        display: none;
      }
      .info_slide{
        .picture-slideshow {
          img {
            min-height: 500px;
            object-fit: cover;
          }
        } 
      }
    }
    .slick-dots {
      bottom: 20px;
    }
  }
  @media(min-width : 576px) and (max-width : 767.98px){
    .slick-dots {
      bottom: 20px;
    }
    .itemv-slide-h2 {   
      .info_slide {
        .picture-slideshow {
          img {
            min-height: 450px;
            object-fit: cover;
          }
        }
        .box-info {
          .box-content {
            .title1 {
              font-size : 35px;
            }
          } 
        }
      }
    }
  }
  @media(min-width : 768px) and (max-width : 991.98px){
    .slick-dots {
      bottom: 20px;
    }
    .itemv-slide-h2 {   
      .info_slide {
        .box-info {
          .box-content {
            .title1 {
              font-size: 35px;
            }
            p {
              margin-top: 15px;
            }
          } 
        }
      }
    }  
    .next-slide {
      right: 1%;
      top: 10%;
    }
    .prev-slide{
      left: unset;
      right: 60px;
      top: 10%;
    }
  } 
  @media(min-width : 992px) and (max-width : 1199.98px){
    .itemv-slide-h2 {   
      .info_slide {
        .box-info {
          .box-content {
            .title1 {
              font-size: 35px;
            }
          } 
        }
      }
    }  
    .next-slide {
      right: 1%;
      top: 10%;
    }
    .prev-slide{
      left: unset;
      right: 60px;
      top: 10%;
    }
  }
  @media(min-width : 1200px) and (max-width : 1500px){
    .itemv-slide-h2 {   
      .info_slide {
        .box-info {
          .box-content {
            .title1 {
              font-size: 45px;
            }
          } 
        }
      }
    } 
  }
}
.section-slideshow-v3 {
  .itemv-slide-h3 {
    position: relative;
    .item-image {
      img {
        object-fit: cover;
        @media (max-width: 992px) {
          height: 700px;
        }
        @media (max-width: 768px) {
          height: 600px;
        }
        @media (max-width: 576px) {
          height: 440px;
        }
      }
    }
    .content {
      width: 100%;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 60%;
      transform: translate(-50%,-50%);
      .title-slideshow {
        font-family: $font-primary;
        font-weight: 400;
        text-transform: uppercase;
        opacity: 0;
        transition: all 1s;
        transform: translateY(100px);
        letter-spacing: 3px;
        transition-delay: .8s;
        @media (max-width: 576px) {
          font-size: 30px;
        }
        @media (min-width: 576px) {
          font-size: 45px;
        }
        @media (min-width: 768px) {
          font-size: 50px;
        }
        @media (min-width: 992px) {
          font-size: 65px;
        }
        @media (min-width: 1200px) {
          font-size: 70px;
        }
        @media (min-width: 1600px) {
          font-size: 80px;
        }
      }
      .sub-title-content{
        font-size: 18px;
        font-family: $font-primary2;
        font-weight: 400;
        opacity: 0;
        transition: all .8s;
        transform: translateY(100px);
        margin-bottom: 25px;
        transition-delay: .5s;
        @media (max-width: 576px) {
          font-size: 18px;
        } 
        @media (min-width: 576px) {
          font-size: 18px;
        }
        @media (min-width: 768px) {
          font-size: 22px;
        }
        @media (min-width: 992px) {
          font-size: 26px;
        }
        @media (min-width: 1200px) {
          font-size: 30px;
          margin-bottom: 30px;
        }
        @media (min-width: 1600px) {
          font-size: 35px;
          margin-bottom: 30px;
        } 
      }
      .slide-btn {
        margin: 0 5px;
      }
      .slide-btn1 {
        transform: translateY(100px);
        transition: all 1.2s;
        opacity: 0;
        transition-delay: 1s;
      }
      .slide-btn2 {
        transform: translateY(100px);
        transition: all 1.2s;
        transition-delay: 1.2s;
        opacity: 0;
      }
      a {
        font-family: $font-primary2;
        padding: 15px 40px;
        letter-spacing: 1px;
        font-size: 14px;
        line-height: 1;
        font-weight: 500;
        display: inline-block;
        transition: all .3s ease;
        margin-top: 25px;
        opacity: 0;
        transition: all 0.3s;
        @media (min-width: 1200px) {
          margin-top: 45px;
        } 
        @media (min-width: 1600px) {
          margin-top: 50px;
        }
      }
    }
  }
  .slick-active {
    .content {
      .title-slideshow {
        transform: unset;
        opacity:1;
      }
      .sub-title-content {
        transform: unset;
        opacity:1;
      }
      .slide-btn1,.slide-btn2 {
        transform: unset;
        opacity:1;
      }
      a {
        transform: unset;
        opacity:1;
        transition-delay: 0s;
      }
    }
  }
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
  }
  .slick-dots {
    display: inline-block !important;
    width: unset;
    bottom: unset;
    left: 50%;
    top: 95%;
    li {
      margin: 0 6px;
      button {
        &:before {
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        border-radius: 50%;
      }
    }
    .slick-active {
      button {
        background-color: #fff;
      }
    }
  } 
  @media (min-width: 1200px) and (max-width: 1700px) {
    .slick-dots {
      display: inline-block !important;
      width: unset;
      bottom: 20px;
      left: 50%;
      transform: translatex(-50%) rotate(0deg);
      top: unset;
    }
  }
  @media (min-width: 992px) and (max-width: 1199.98px) {
    .slick-dots {
      display: inline-block !important;
      width: unset;
      bottom: 15px;
      left: 50%;
      transform: translatex(-50%) rotate(0deg);
      top: unset;
    }
  }

  @media (min-width: 768px) and (max-width: 991.98px){
    .slick-dots {
      display: inline-block !important;
      width: unset;
      bottom: 10px;
      left: 50%;
      transform: translatex(-50%) rotate(0deg);
      top: unset;
    }
  }
  @media (min-width: 576px) and (max-width: 767.98px) {
    .slick-dots {
      display: inline-block !important;
      width: unset;
      bottom: 10px;
      left: 50%;
      transform: translatex(-50%) rotate(0deg);
      top: unset;
    }
  }
  @media (max-width: 575.98px) {
    .slick-dots{
      display: inline-block !important;
      width: unset;
      bottom: 10px;
      left: 50%;
      transform: translatex(-50%) rotate(0deg);
      top: unset;
    }
  }
}
.section-slideshow-v4{
  .col-9_slider {
    flex: 0 0 75%;
    max-width: 75%;
    padding-right: 10px;
    button.next-slide,
    button.prev-slide{
      width: 50px;
      height: 50px;
      line-height: 1;
      border-radius: 50%;
      background: rgba(0,0,0,.3);
      text-align: center;
      font-size: 25px;  
      position: absolute;  
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      border: none;    
      text-align: center;
      opacity: 0;
      z-index: 1;
      visibility: visible;
      transition: all .3s;
      &:hover{
        color: #fff;
        opacity: 1;
        background: $color-main2;
      }
    }
    button.next-slide{
      right: 40px;
    } 
    button.prev-slide {
      left: 40px;
    }
    @media only screen and (max-width: 576px) {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 0;
    }
    @media (min-width: 576px) and (max-width: 768px) {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 0;
    }
    &:hover {
      button.next-slide{
        right: 15px;
        opacity: 1;
      } 
      button.prev-slide {
        left: 15px;
        opacity: 1;
      }
    }
  }
  .col-3_slider {
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 10px;
    @media only screen and (max-width: 576px) {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 0 15px;
    }
    @media (min-width: 576px) and (max-width: 768px) {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 0 15px;
      .col-12_slider {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0;
      }
    }
  } 
  .slide-item {
    position: relative;
    .slider-image {
      img {
        width: 100%;
        @media only screen and (max-width: 576px) {
          height: 400px;
          object-fit: cover;
          object-position: left;
        }
      }
    }
    .slider-content {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 80px;
      max-width: 80%;
      overflow: hidden;
      @media only screen and (max-width: 576px) {
        left: 50%;
        transform: translate(-50%,-50%);
        max-width: 100%;
        width: 100%;
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
      }
      .slider-title {
        font-family: $font-primary2;
        font-weight: 600;
        line-height: 1;
        transform: translateX(-100%);
        transition: all 1s cubic-bezier(0,.45,.58,.2);
        opacity:0;
        @media only screen and (max-width: 576px) {
          font-size: 35px;
        }
        @media only screen and (min-width: 576px) {
          font-size: 35px;
        }
        @media only screen and (min-width: 768px) {
          font-size: 40px;
        }
        @media only screen and (min-width: 992px) {
          font-size: 45px;
        }
        @media only screen and (min-width: 1200px) {
          font-size: 55px;
        }
        @media only screen and (min-width: 1500px) {
          font-size: 65px;
        }

      }
      .sub-title {
        font-family: $font-primary2;
        font-weight: 400;
        transform: translateY(100%);
        transition: all .9s cubic-bezier(0,.45,.58,.2);
        transition-delay: 0.5s;
        opacity:0;
        @media only screen and (max-width: 576px) {
          font-size: 18px;
        }
        @media only screen and (min-width: 576px) {
          font-size: 16px;
        }
        @media only screen and (min-width: 768px) {
          font-size: 18px;
        }
        @media only screen and (min-width: 992px) {
          font-size: 22px;
        }
        @media only screen and (min-width: 1200px) {
          font-size: 24px;
        }
        @media  only screen and (min-width: 1500px) {
          font-size: 28px;
        }
      }
      .box-button {
        transform: translateY(100%);
        transition: all 1.2s cubic-bezier(0,.45,.58,.2);
        transition-delay: 1s;
        opacity: 0;
        overflow: hidden;
        padding-top: 34px;
        display: inline-block;
        @media only screen and (max-width: 576px) {
          padding-top: 20px;
        }
        a {
          display: inline-block;
          font-family: $font-primary;
          font-weight: 500;
          line-height: 1;
          font-size: 15px;
          padding: 15px 40px;
          transition: all .3s;
          letter-spacing: 1px;
          @media only screen and (max-width: 576px) {
            padding: 15px 30px;
          }
        }
      }
    }
    &.slick-active {
      .slider-content {
        .slider-title {     
          transform: none;
          opacity:1;
        }
        .sub-title {     
          transform: none;
          opacity:1;
        }
        .box-button {     
          transform: none;
          opacity:1;
          transition: all 1.5s ;
        }
      }
      button.next-slide {
        right: 15px;
        opacity: 1;
      }  
      button.prev-slide {
        left: 15px;
        opacity: 1;
      }
    }
  }
  .col_12_slider {
    height: 50%;
  }
  .slider-banner1 {
    margin-bottom: 20px;
    @media only screen and (max-width: 576px) {
      margin-top: 20px;
    }
    @media (min-width: 576px) and (max-width: 768px) {
      margin-bottom: 0;
      margin-top: 20px;
      padding: 0 15px;
    }
  }
  .slider-banner2 {
    @media (min-width: 576px) and (max-width: 768px) {
      margin-top: 20px;
      padding: 0 15px;
    }
  }
  .slider-banner {
    position: relative;
    display: block;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    img {
      transition: all 0.5s ease-out 0s;
      object-fit: cover;
    }
    &::before,
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: "";
      background: rgba(255, 255, 255, 0.1);
      opacity: 0;
      z-index: 1;
      transition: all 0.5s ease-out 0s;
    }
    &:hover {
      img {
        transform: scale(1.15);
      }
      &:before {
        opacity: 1;
        top: 50%;
        bottom: 50%;
      }
      &:after {
        opacity: 1;
        left: 50%;
        right: 50%;
      }
    }
  }
  .slick-dots{
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: unset;
    li{
      margin: 0 3px;
      button{
        &:before{
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        border-radius: 50%;
      }
    }
    .slick-active{
      button{
        background-color: #fff;
      }
    }
    @media only screen and (max-width: 576px) {
      bottom: 20px;
    }
    @media only screen and (min-width: 576px) {
      bottom: 30px;
    }
  }  
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
  }
  overflow: hidden;
}
.section-slideshow-v5 {
  button.next-slide,
  button.prev-slide {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;  
    position: absolute;  
    top: 50%;
    transform: translateY(-50%);
    color: $color-main;
    border: none;    
    background-color: #fff;
    z-index: 1;
    visibility: visible;
    transition: all .3s;
    &:hover{
      color:#fff;
      background-color: $color-main2;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      opacity: 1;
    }
    @media (max-width: 576px) {
      width: 35px;
      height: 35px;
      line-height: 35px;
      font-size: 15px;
      box-shadow: 1px 2px 6px 4px rgba(53,57,68,0.2);
    }
  }
  button.next-slide{
    right: -50px;
    @media (max-width: 576px) {
      right: 15px;
    }
  } 
  button.prev-slide {
    left: -50px;
    @media (max-width: 576px) {
      left: 15px;
    }
  }
  overflow: hidden;
  &:hover {
    button.next-slide {
      right: 15px;
    }
    button.prev-slide {
      left: 15px;
    }
  }
  .item-slide {
    position: relative;
    transition: all .4s;
    .box-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      opacity: 0;
      visibility: hidden;
      transition: all .4s;
      padding: 15%;
      max-width: 100%;
      width: inherit;
      @media (max-width: 576px) {
        opacity: 1;
        visibility: visible;
      }
      .content {
        background: #fff;
        text-align: center;
        padding: 20px;
        width: 100%;
        @media (min-width: 1200px) {
          padding: 40px 20px;
        }
        h3 {
          font-size: 25px;
          font-weight: 500;
          font-family: $font-primary2;
          letter-spacing: 6px;
          text-transform: uppercase;
          @media (max-width: 992px) {
            font-size: 20px;
          } 
          @media (max-width: 576px) {
            font-size: 18px;
            letter-spacing: 4px;
          }
        }
        a {
          font-style: italic;
          font-size: 16px;
          font-weight: 500;
          font-family: $font-primary2;
          i {
            padding-left: 5px;
          }
        }
      }
    }
    &:hover {
      .box-content {
        opacity: 1;
        visibility: visible;
      }
    }
  }
}
.section-testimonial-v1  {
  position: relative;
  background-size : cover;
  background-position : center;
  .title_heading {
    color: $color-main;
  }
  .slick-slider .slick-dots li {
    button {
      width: 10px;
      height: 10px;
      background-color: #e0e0e0;
      border: none;
      border-radius: 50%; 
      font-size: 0;
      padding : 0;
      line-height: 0;
      cursor: pointer;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      transition-timing-function: ease;
      &:before{
        display : none;
      }
    }
  }
  .slick-slider .slick-dots .slick-active button {
    background: $color-main2;
  }
  .testimonial-arrow {
    font-size: 20px;
    position: absolute;
    top: -78px;
    color: #bcc2ca;
    @media screen and (max-width: 767px) {
      top: -45px;
    }
    @media (min-width: 768px) and (max-width: 1199px) {
      top: -55px;
    }
  }
  .arrow-prev {
    right: 40px;
  }
  .arrow-next {
    right: 15px;
  }
  .testimonial-inner {
    margin : 0 20px;
    .testimonial-info {
      padding: 30px 33px 30px;
      position: relative;
      background: #fff;
      box-shadow: 0 9px 18px rgba(0,0,0,0.08), 0 5px 7px rgba(0,0,0,0.05);
      border-radius: 8px;
      margin-bottom: 30px;
      margin-top: 30px;
      transition : .45s;
      border: 2px dashed #fff;
      &:hover{
        transform : translateY(-20px);
        border: 2px dashed $color-main2;
      }
      .avatar {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        overflow: hidden;
        margin : auto;
      }
      .author-info {
        h3 {
          font-family: $font-primary;
          font-size: 14px;
          font-weight: 700;
          line-height : 24px;
          letter-spacing : 2px;
          color: $color-main;
          padding-top: 20px;
        }
        p {
          font-family: $font-primary;
          font-size: 14px;
          font-weight: 400;
          color: #c6cad0;
          margin-bottom : 0;
        }
        .engoc-star{
          &:after{
            content: "\f005""\f005""\f005""\f005""\f005";
            font-family: FontAwesome;
            color: #fda002;
            display: block;
            margin-top: 5px;
            letter-spacing: 5px;
          }
        }
      }
      .content{
        font-family : $font-primary;
        font-size: 16px;
        color: $color-main;
        line-height: 28px;
        margin-top: 15px;
        margin-bottom: 25px;
        font-weight : 400;
      }
    }
  }
}
.section-testimonial-v2  {
  position: relative;
  margin-top: 50px;
  padding: 75px 0 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  @media screen and (max-width: 1024px) {
    padding: 50px 0 75px;
  }
  .testimonial-arrow {
    font-size: 20px;
    position: absolute;
    top: -78px;
    color: #fff;
    @media screen and (max-width: 767px) {
      top: -45px;
    }
    @media (min-width: 768px) and (max-width: 1199px) {
      top: -55px;
    }
  }
  .arrow-prev {
    right: 40px;
  }
  .arrow-next {
    right: 15px;
  }
  .slick-dots{
    transform: translate(-50%);
    left: 50%;
    bottom: -45px;
    @media only screen and (max-width: 576px) {
      bottom: -45px;
    }
    li{
      margin: 0 2px;
      button{
        &:before{
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        background-color: rgba(#fff, 0);
        border: 2px solid rgba(#fff, 0.3);
        border-radius : 50%;
        padding: 0;
        position : relative;
        overflow: hidden;
        transition : .5s;
      }
    }
    .slick-active{
      button{
        background-color: rgba(#fff, 1);
        border: 2px solid rgba(#fff, 0);
      }
    }
  } 
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
  } 
  .testimonial-inner {
    max-width: 850px;
    margin: auto;
    text-align: center;
    .testimonial-info {
      font-family: $font-primary;
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      position: relative;
      letter-spacing: 1px;
      @media (min-width: 1200px) {
        font-size: 18px;
      }
      @media (min-width: 1600px) {
        font-size: 20px;
      }
      .engoc-star{
        &:after{
          content: "\f005""\f005""\f005""\f005""\f005";
          font-family: FontAwesome;
          color: #fda002;
          display: block;
          margin-top: 5px;
          letter-spacing: 5px;
        }
      }
    }

    .testimonial-author {
      margin-top: 25px;
      text-align: center;
      .avatar {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        overflow: hidden;
        margin: auto;
        margin-bottom: 20px;
      }
      .author-info {
        h3 {
          font-family: $font-primary;
          letter-spacing: 1px;
          font-size: 14px;
          font-weight: 500;
          color: $color-main2;
        }
        p {
          font-family: $font-primary;
          font-size: 14px;
          font-weight: 400;
          color: #a9b1bb;
        }
      }
    }
  }
}
.section-collection-v1 {
  .title_heading {
    margin-bottom: 27px;
  }
  .col-item {
    padding: 20px;
    @media only screen and (max-width: 576px) {
      padding-right: 20px;
      padding-left: 20px;
    }
  }
  .item {
    position: relative;
    transition: all 500ms ease 0s;
    overflow: hidden;
    transition: all 500ms ease 0s;
    .box-img {
      transition: all 500ms ease 0s;
      border-radius: 50%;
      border: 8px solid rgba($color-main2,.2);
    }
    .category-info {
      text-align: center;
      margin-top: 20px;
      .box-info {
        a {
          display: inline-block;
          font-family: $font-primary;
          font-weight: 600;
          @media (max-width: 768px) {
            font-size: 18px;
          }
          @media (min-width: 768px) {
            font-size: 18px;
          }
          @media (min-width: 1200px) {
            font-size: 19px;
          }
          @media (min-width: 1600px) {
            font-size: 20px;  
          }
        }
      }
    }
    &:hover {
      img {
        transform: scale(1.05);
        transition: all 500ms ease 0s;
      }
      .box-img {
        border: 8px solid rgba($color-main2,.75);
      }
    }
  }
  button.prev-slide,
  button.next-slide {
    font-size: 20px;
    border: none;
    top: 35%;
    width: 40px;
    color: #333;
    box-shadow: 0 5px 5px rgba(0,0,0,0.09);
    height: 40px;
    border-radius: 0%;
    text-align: center;
    background-color: #fff;
    opacity: 1;
    z-index: 1;
    visibility: visible;
    position: absolute;
    transition: all .3s ease;
    &:hover, &:active {
      color: #fff;
      background: $color-main2;
    }
    @media (min-width: 1600px) {
      opacity: 0;
      visibility: hidden;
    }
  }
  button.prev-slide {
    @media (max-width: 1200px) {
      left: 0;
    }
    @media (min-width: 1200px) {
      left: 0px;
    }
    @media (min-width: 1600px) {
      left: -30px;
    }
  }
  button.next-slide {
    @media (max-width: 1200px) {
      right: 0;
    }
    @media (min-width: 1200px) {
      right: 0px;
    }
    @media (min-width: 1600px) {
      right: -30px;
    }
  }
  transition: all .3s ease;
  &:hover {
    button.prev-slide {
      @media (min-width: 1600px) {
        left: -50px;
        opacity: 1;
        visibility: visible;
      }
    }
    button.next-slide {
      @media (min-width: 1600px) {
        right: -50px;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}
.section-collection-v2 {
  .item {
    text-align: center;
    position: relative;
    text-align: center;
    @media only screen and (max-width: 576px) {
      padding: 30px 10px 120px;
    }
    @media only screen and (min-width: 576px) {
      padding: 30px 10px 60px;
    }
    @media only screen and (min-width: 768px) {
      padding: 40px 10px 80px;  
    }
    @media only screen and (min-width: 992px) {
      padding: 40px 10px 60px;
    }
    @media only screen and (min-width: 1200px) {
      padding: 40px 30px 80px;
    }
    @media only screen and (min-width: 1600px) {
      padding: 50px 40px 100px;
    }
    .box-img {
      border-radius: 50%;
      margin-bottom: 20px;
      position: relative;
      overflow: visible;
      @media (min-width: 1200px) {
        margin-bottom: 25px;
      }
      @media (min-width: 1600px) {
        margin-bottom: 30px;
      }
      a {
        overflow: hidden;
        display: block;
        border-radius: 50%;
      }
      &:after {
        content: '';
        position: absolute;
        top: 30%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba($color-main2,.3);  
        border-radius: 50%;
        z-index: -1;
        transition: all .4s;
      }
    }
    .category-info {
      .box-info {
        display: inline-block;
        font-family: $font-primary;
        font-weight: 600;
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 0;
        color: $color-main;
        transition: all .3s;
      }
    }
    transition: all .4s;
    &:hover {
      .box-img {
        &:after {
          background: rgba($color-main2, 1);
        }
      }
      .category-info {
        .box-info {
          color: #fff;
          a {
            color: #fff;
          }
        }
      }
    }
  }
  .slick-dots {
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    @media only screen and (max-width: 576px) {
      bottom: 3%;
    }
    @media only screen and (min-width: 576px) {
      bottom: 0px;
    }
    @media only screen and (min-width: 1600px) {
      bottom: 0px;
    }
    li {
      margin: 0 3px;
      button {
        &:before {
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        background-color: rgba(#adadad, 0);
        border: 2px solid rgba(#adadad, 0.3);
        border-radius: 50%;
        padding: 0;
        position: relative;
        overflow: hidden;
        transition: .5s;
      }
    }
    .slick-active {
      button {
        background-color: rgba(#adadad, 1);
        border: 2px solid rgba(#adadad, 0);
      }
    }
  } 

  .slick-dotted.slick-slider {
    margin-bottom: 0px;
    padding: 0;
  } 
}
.section-collection-v3 {
  @media only screen and (min-width: 1200px) {
    margin-top: -15%;
  }
  @media only screen and (min-width: 1600px) {
    margin-top: -230px;
  }
  .slick-dots {
    transform: translate(-50%);
    left: 50%;
    li{
      margin: 0 2px;
      button {
        &:before {
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 13px;
        height: 13px;
        background-color: rgba(#adadad, 0);
        border: 2px solid rgba(#adadad, 0.3);
        border-radius: 50%;
        padding: 0;
        position : relative;
        overflow: hidden;
        transition : .5s;
      }
    }
    .slick-active{
      button{
        background-color: rgba(#adadad, 1);
        border: 2px solid rgba(#adadad, 0);
      }
    }
  } 
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
  } 
  .item {
    text-align: center;
    @media only screen and (max-width: 576px) {
      padding: 30px;
    }
    @media only screen and (min-width: 576px) {
      padding: 30px;
    }
    @media only screen and (min-width: 768px) {
      padding: 35px;
    }
    @media only screen and (min-width: 992px) {
      padding: 40px;
    }
    @media only screen and (min-width: 1200px) {
      padding: 45px;
    }
    @media only screen and (min-width: 1600px) {
      padding: 50px;
    }
    .box-img {
      border-radius: 50%;
      margin-bottom: 15px;
      border: 15px solid rgba(255,255,255,.75);
    }
    .title-collection {
      font-family: $font-primary2;
      font-weight: 500;
      font-size: 28px;
      display: inline-block;
      margin-bottom: 10px;
      color: $color-main;
      transition: all .3s;
      &:hover {
        color: $color-main2;
      }
    }
    .content-box {
      font-family: $font-primary;
      color: #888;
    }
  }
}
.section-blog-v1 {
  padding-top: 70px;
  padding-bottom: 35px;
  @media(max-width: 768px) {
    padding-top: 30px;
  }
  .blog_cate {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #83868c;
    text-transform: uppercase;
    &:hover {
      color: $color-main2;
    }
  }
  .content-section-blog-v1 {
    margin-top: 50px;
    .picrure {
      position: relative;
      padding-bottom: 20px;
      .image_url {
        display: block;
        overflow: hidden;
      }
      .date{
        position: absolute;
        box-shadow: 0 3px 10px rgba(0,0,0,.08);
        width: 68px;
        height: 68px;
        background-color: #fff;
        color: $color-main;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
        top: 36px;
        left: 36px;
        padding: 10px 0;
        @media only screen and (max-width: 992px) {
          left: 15px;
          top: 15px;
        }
        .day{
          font-size: 14px;
          display: block;
          &:after {
            content: '';
            background-color: $color-main;
            width: 27px;
            height: 1px;
            display: block;
            margin: 0 auto;
            margin-top: 4px;
          }
        }
        .month {
          font-size: 10px;        
          display: block;
          padding-top: 4px;
          letter-spacing: .3em;
        }
      }
    }
    .info_blog {
      text-align : center;
      .title-blog {
        padding-top: 5px;
        a {
          position: relative;
          font-size: 22px;
          display: inline-block;
          color: $color-main;
          font-weight: 500;
          transition: all .3s ease;
          font-family: $font-primary;
          padding-bottom: 15px;
          margin-bottom: 15px;
          &:hover {
            color: $color-main2;
          }
          &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 1px;
            width: 50px;
            background: $color-main2;
          }
        }
      }
      .content {
        font-family: $font-primary;
        font-size: 16px;
        font-weight: 400;
        color: #83868c;
      }
    }
  }
  &:hover {
    button.prev-slide {
      opacity: 1;
      visibility: visible;
      left: -50px;
      @media only screen and (max-width: 1200px) {
        left: 0;
      }
    }
    button.next-slide {
      opacity: 1;
      visibility: visible;
      right: -50px;
      @media only screen and (max-width: 1200px) {
        right: 0;
      }
    }
  }
  button.prev-slide, 
  button.next-slide {
    position: absolute;
    font-size: 36px;
    top: 35%;
    color: $color-main;
    z-index: 1;
    opacity:0;
    transition: 0.7s;
    visibility: hidden;
    transition: all .3s ease;
    @media only screen and (max-width: 1200px) {
      font-size: 20px;
      border: none;
      top: 24%;
      width: 40px;
      height: 40px;
      border-radius: 0%;
      color: #c8c8c8;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      text-align: center;
      background-color: #fff;
      opacity: 1;
      visibility: visible;
    }
    @media (max-width: 576px) {
      top: 35%;
    }
  }
  button.prev-slide {
    left: 5px;
    @media only screen and (max-width: 1200px) {
      left: 0;
    }
  }
  button.next-slide {
    right: 5px;
    @media only screen and (max-width: 1200px) {
      right: 0;
    }
  }
  .slick-dots {
    transform: translate(-50%);
    left: 50%;
    padding-top: 40px;
    bottom: unset;
    li {
      margin: 0 2px;
      button {
        &:before {
          opacity: 0;
        }
        font-size: 0;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        background-color: #d8d8d8;
        border-radius: 50%;
      }
    }
    .slick-active{
      button{
        background-color: $color-main;
      }
    }
  }
  .slick-slide img {
    object-fit: cover;
    transition: all .3s ease; 
    @media only screen and (max-width: 576px) {
      min-height: 300px;
    }
    @media only screen and (min-width: 576px) {
      min-height: 260px;
    }
    @media only screen and (min-width: 768px) {
      min-height: 300px;
    }
    @media only screen and (min-width: 1200px) {
      min-height: 374px;
    }
    &:hover {
      opacity: .7;
    }
  }
}
.section-blog-v2 {
  @media (max-width: 992px) {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  @media (min-width: 992px) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  @media (min-width: 1200px) {
    padding-top: 86px;
    padding-bottom: 100px;
  }
  .title-section-blog {
    margin-bottom: 23px;
  }
  .description {
    color: #868686;
    line-height: 28px;
    text-align: center;
    @media (max-width: 576px) {
      margin-bottom: 30px;
      font-size: 16px;
    }
    @media (min-width: 576px) {
      margin-bottom: 30px;  
      font-size: 16px;   
    }
    @media (min-width: 768px) {
      font-size: 18px;
      margin-bottom: 35px;
    }
    @media (min-width: 1200px) {
      margin-bottom: 57px;
    }
  }
  .content-section-blog {
    .picrure {
      width: 360px;
      height: 360px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
      @media (max-width: 576px) {
        width: 300px;
        height: 300px;
      }
      @media (min-width: 576px) {
        width: 265px;
        height: 265px;
      }
      @media (min-width: 768px) {
        width: 325px;
        height: 325px;
      }
      @media (min-width: 1200px) {
        width: 360px;
        height: 360px;
      }
      img{
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .info_blog {
    @media (max-width: 576px) {
      margin-top: 30px;
    }
    @media (min-width: 576px) {
      margin-top: 30px;
    }
    @media (min-width: 768px) {
      margin-top: 35px;
    }
    @media (min-width: 1200px) {
      margin-top: 42px;
    }
    .title-blog {      
      a {
        font-size: 25px;
        font-weight: 500;
        color:$color-main;
        padding-bottom: 15px;
        transition: all .3s ease;
        &:hover {
          color: $color-main2;
        }
      }
    }
    .date {
      margin-top: 11px;
      .day {
        color: #b6b6b6;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 2px;
        &:after {
          content: '';
          background-color: $color-main;
          width: 70px;
          height: 1px;
          display: block;
          margin: 0 auto;
          margin-top: 17px;
        }
      }
    }
    .content {
      font-size: 16px;
      font-weight: 400;
      color: #868686;
      line-height: 28px;
      padding-top: 18px;
    }
  }
  button.prev-slide,
  button.next-slide {
    @media (max-width: 1600px) {
      font-size: 20px;
      border: none;
      width: 40px;
      color: #333;
      box-shadow: 0 5px 5px rgba(0,0,0,0.09);
      height: 40px;
      border-radius: 0%;
      text-align: center;
      background-color: #fff;
      opacity: 0;
      z-index:1;
      visibility: hidden;
      position: absolute;
      top: 40%;
      transform: translateY(-50%);
    }
    @media (max-width: 1200px) {
      visibility: visible;
    }
    @media (min-width: 1600px) {
      position: absolute;
      font-size: 36px;
      top: 35%;
      color: $color-main;
      z-index: 1;
      opacity: 0;
      transition: 0.7s;
      visibility: hidden;
      transition: all .3s ease;
    }
  }
  button.prev-slide {
    left: 0px;
  }
  button.next-slide {
    right: 0px;
  }
  &:hover {
    button.prev-slide {
      opacity: 1;
      visibility: visible;
      left: 0px;
      @media (min-width: 1200px) {
        left: -50px;
      }
    }
    button.next-slide {
      opacity: 1;
      visibility: visible;
      right: 0px;
      @media (min-width: 1200px) {
        right: -50px;
      }
    }
  }
  .slick-dots {
    transform: translate(-50%);
    left: 50%;
    padding-top: 60px;
    bottom: unset;
    li {
      margin: 0 8px;
      button {
        &:before {
          opacity: 0;
        }
        font-size: unset;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 12px;
        height: 12px;
        background-color: #c2cac6;
        border-radius: 50%;
      }
    }
    .slick-active {
      button {
        background-color: $color-main;
      }
    }
  }
}
.section-blog-v3 {
  padding-top: 50px;
  @media (max-width: 768px) {
    padding-top: 30px;
  }
  .blog-content {
    .blog-item {
      margin-top: 50px;
      @media (max-width: 991.98px) {
        margin-top: 30px;
      }
      .post {
        .article-title {
          a {
            font-size: 25px;
            color: $color-main;
            font-family: $font-primary;
            font-weight: 500;
            margin-bottom: 20px;
            @media (max-width:1199.98px) {
              font-size: 25px;
              margin-bottom: 20px;
              margin-top: 30px;
            }
            &:hover,
            &:focus {
              color: $color-main2;
            }
          }
        }
        .article-des {
          display: block;
          line-height: 28px;
          color: #909090;
          font-family: $font-primary;
          padding-right: 55px;
          @media (max-width: 991.98px) {
            padding-right: 0;
            font-size: 16px;
          }
          @media (min-width: 992px) and (max-width: 1500px) {
            padding-right: 0;
          }
        }
        .btn-readmore {
          font-family: $font-primary;
          display: inline-block;
          font-weight: 400;
          text-align: center;
          color: $color-main;
          border: 1px solid $color-main;
          padding: 15px 40px;
          font-size: 14px;
          line-height: 1;
          letter-spacing: 1px;
          transition: all .3s ease 0s;
          text-transform: uppercase;
          &:hover {
            color: #fff;
            border:1px solid $color-main2;
            background-color: $color-main2;
          }
        }
      }
      .image {
        img {
          transition: 0.5s;
          max-width: 95%;
          float: right;
          &:hover {
            filter: grayscale(100%);
          }
          @media (max-width: 1199.98px) {
            padding: 0px;
            max-width: 100%;
          }
        }
      }
    }
    .blog-item.right {      
      .post {
        .article-title {
          &:before {
            left: unset;
            right: 0;
          }
        }
        .article-des {
          padding-right: 0;
          @media (max-width: 991.98px) {
            padding-left: 0px;
          }
          @media (min-width: 768px) and (max-width: 1500px) {
            padding-left: 0px;
          }
        }
      }
      .image {
        img {
          float: left;
        }
      }
    }
  }
}
.section-instagram-v1 { 
  .box-img {
    overflow: hidden;
    &:first-child {
      width: 40%;
      float: left;
      @media only screen and (max-width:576px) {
        width: 100%;
      }
    }
    width: 20%;
    float: left;
    position: relative;
    overflow: hidden;
    @media only screen and (max-width: 576px) {
      width: 50%;
    }
    .content-intagram{
      position: absolute;
      transform: translate(-50%, -50%) scale(0.8);
      top: 50%;
      left: 50%;
      opacity: 0;
      visibility: hidden;
      transition: .3s;
      a {
        font-size: 40px;
        color: #fff;
      }
      h4 {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        font-family: $font-primary;
        margin-top: 10px;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
    }
    &:hover {
      .content-intagram {
        opacity: 1;
        visibility: visible;
        transition: .3s;
        transform: translate(-50%, -50%) scale(1);
      }
      img {
        filter: brightness(0.3);
        transition: .3s;
      }
    }
  }
}
.section-instagram-v2 { 
  .title_heading  {
    padding-bottom: 37px;
    @media only screen and (max-width: 576px) {
      padding-bottom: 25px;
    }
  }
  .fauximg-bin {
    margin: 20px;
  }
  .instagram-content {
    padding: 5px;
    @media only screen and (max-width: 576px) {
      padding: 10px;
    }
    .instagram-item {
      padding: 5px;
      @media only screen and (max-width: 576px) {
        width: 50%;
      }
      @media only screen and (min-width: 576px) {
        width: 50%;
      }
      @media only screen and (min-width: 768px) {
        width: 33.33%;
      }
      @media only screen and (min-width: 992px) {
        width: 25%;
      }
      @media only screen and (min-width: 1200px) {
        width: 20%;
      }
      .content {
        overflow: hidden;
        position: relative;
        .content_text{
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: rgba(0,0,0,.7);
          transition: all .5s ease;
          opacity: 0;
          flex-direction: column; 
          display: flex;
          justify-content: center;
          align-items: center;
          a {
            font-size: 60px;
            @media only screen and (max-width: 576px) {
              font-size: 30px;
            }
            color:#fff;
            &:hover {
              color: $color-main2;
              transition: all .3s ease;
            }
          }
        }
        &:hover .content_text{
          opacity: 1;
          transition: all .5s ease;
        }
        img {
          transition: all 4s ease;
          width: 100%;
        }
        &:hover img {
          transform: scale(1.2);
        }
      }
    }
  }
  @media (min-width: 768px) and (max-width: 991.98px) {
    padding-top:15px;
    padding-bottom:20px;
  }
  @media (min-width: 576px) and (max-width: 767.98px) {
    padding-top:15px;
    padding-bottom:20px;
  }
  @media (max-width: 575.98px) {
    padding-top:20px;
    padding-bottom:20px;
  }
}
.section-instagram-v3 {
  .instagram_v2 {
    .text_top {
      p {
        color: $color-main2;
        font-family: $font-primary;
        font-size: 500;
        margin-bottom: 0;
        @media (max-width: 576px) {
          font-size: 20px;
        }
        @media (min-width: 576px) {
          font-size: 22px;
        }
        @media (min-width: 1200px) {
          font-size: 24px;
        }
      }
    }
    padding: 0 7.5px;
    .content {
      width: 20%;
      float: left;
      overflow: hidden;
      margin: 15px 7.5px;
      &:frist-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 0;
      }
      .content_text {
        align-items: center;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0,0,0,.7);
        transition: all .5s ease;
        opacity: 0;
        flex-direction: column;
        a {
          font-size: 48px;
          color: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          &:hover {
            color: $color-main2;
          }
          @media (max-width: 768px) {
            font-size: 30px;
          }
          @media (max-width: 576px) {
            font-size: 24px;
          }
        }
      }
      &:hover .content_text {
        opacity: 1;
        transition: all .5s ease;
      }
      img {
        transition: all 4s ease;
        width: 100%;
      }
      &:hover img {
        transform: scale(1.2);
      }
    }
    .galary_inta {
      margin-top: 37px;
      button.prev-slide,
      button.next-slide {
        position: absolute;
        top: 50%;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #ffffff;
        box-shadow: 0 8px 8px rgba(0,0,0,0.09);
        opacity: 0;
        z-index: 1;
        visibility: hidden;
        transition: 0.5s;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        transition: all .4s;
        i {
          font-size: 30px;
          color: $color-main2;
          transition: all .4s;
          @media only screen and (max-width: 1200px) {
            font-size: 20px;
          }
        }
        &:hover {
          background: $color-main2;
          i {
            color: #fff;
          }
        }
        @media only screen and (max-width: 1200px) {
          font-size: 20px;
          width: 35px;
          height: 35px;
          line-height: 35px;
          opacity: 1;
          z-index: 1;
          visibility: visible;
        }
      }
      button.prev-slide {
        left: 40px;
        @media only screen and (max-width: 768px) {
          left: 0px;
        }
      }
      button.next-slide {
        right: 40px;
        @media only screen and (max-width: 768px) {
          right: 0px;
        }
      }
      &:hover {
        button.prev-slide,
        button.next-slide {
          visibility: visible;
          opacity: 1;
        }
        button.prev-slide {
          left: 15px;
        }
        button.next-slide {
          right: 15px;
        }
      }
    }
  }
}
.section-instagram-v4 {
  padding-top: 15px;
  padding-bottom: 20px;
  .instagram-content {
    .instagram-item {
      border: 1px solid #fff;
      .content {
        overflow: hidden;
        position: relative;
        .content_text {
          align-items: center;
          justify-content: center;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: rgba(0,0,0,.7);
          transition: all .5s ease;
          opacity: 0;
          flex-direction: column;
          a {
            font-size: 60px;
            color: #fff;
            &:hover {
              color: $color-main2;
              transition: all .3s ease;
            }
          }
        }
        &:hover .content_text{
          opacity: 1;
          transition: all .5s ease;
        }
        img {
          transition: all 4s ease;
          width: 100%;
        }
        &:hover img {
          transform: scale(1.2);
        }
      }
    }
  }
  @media (min-width: 768px) and (max-width: 991.98px) {
    padding-top: 15px;
    padding-bottom: 20px;
  }
  @media (min-width: 576px) and (max-width: 767.98px) {
    padding-top: 15px;
    padding-bottom: 20px;
  }
  @media (max-width: 575.98px) {
    padding-top: 20px;
    padding-bottom: 20px;
    .box-img1 {
      margin-bottom: 30px;
    }
  }
}