/*======================================================================================================================*/

/*    RESETS                                        */

/*======================================================================================================================*/

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}


/*======================================================================================================================*/

/*    VARIABLES & ANIMATION                                       */

/*======================================================================================================================*/


:root{
    --color-brand-green: #00B965;
    --color-brand-green-light: #01D473;
    --color-brand-green-dark: #00ab5d;
    --color-brand-red: #FA4539;
    --color-brand-purple: #462E6B;
    --color-brand-green: #00AC50;
    --color-brand-pink: #FA7F77;
    --color-brand-yellow: #FBD400;
    --color-product-sac001: #000000; /* Licurici */
    --color-product-sac002: #f96c49; /* Flamingo */
    --color-product-sac003: #f1a889; /* Artdeco */
    --color-product-sac004: #ffb32a; /* Lenes */
    --color-product-sac005: #7dbfbd; /* Musetel */
    --color-product-sac006: #a3b1a0; /* PastelDash */
    --color-product-sac007: #26293b; /* Penne */
    --color-product-sac008: #807e2f; /* Jungla */
    --size-homepage-header: 90vh;
    --size-homepage-header-mobile: 75vh;
}

@keyframes horiz-slide-subtle {
  from {
    background-position: left center;
  }
  to {
    background-position: right center;
  }
}



/*======================================================================================================================*/

/*    ICONS                                        */

/*======================================================================================================================*/

span.icon{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: middle;
    pointer-events: none;
}

span.icon.cart{
    background-image: url("/assets/cart.svg");
}

span.icon.cart-black{
    background-image: url("/assets/cart-black.svg");
}

span.icon.cart-green{
    background-image: url("/assets/cart-green.svg");
}

span.icon.close{
    background-image: url("/assets/close.svg");
}

span.icon.plus{
    background-image: url("/assets/plus.svg");
}

span.icon.minus{
    background-image: url("/assets/minus.svg");
}

span.icon.arrowDown{
    background-image: url("/assets/arrow-down.svg");
}

span.icon.arrowDown.white{
    background-image: url("/assets/arrow-down-white.svg");
}

span.icon.arrowUp{
    background-image: url("/assets/arrow-up.svg");
}

span.icon.arrowUp.white{
    background-image: url("/assets/arrow-up-white.svg");
}

span.icon.landingpage{
    background-image: url("/assets/landingpage.svg");
}

span.icon.hamace{
    background-image: url("/assets/hamace.svg");
}

span.icon.info{
    background-image: url("/assets/info.svg");
}

span.icon.durabilitate{
    background-image: url("/assets/durabilitate.svg");
}

span.icon.contact{
    background-image: url("/assets/contact.svg");
}

span.icon.check-circle{
    background-image: url("/assets/check-circle-green.svg");
}

span.icon.success{
    background-image: url("/assets/check-circle-green.svg");
}

span.icon.error{
    background-image: url("/assets/close-red.svg");
}

span.icon.maps{
    background-image: url("/assets/map.svg");
}

span.icon.facebook{
    background-image: url("/assets/facebook-short.svg");
}

span.icon.website{
    background-image: url("/assets/website.svg");
}

span.icon.delete{
    background-image: url("/assets/delete.svg");
}

span.icon.heart{
    background-image: url("/assets/heart.svg");
}

span.icon.status-pending-orange{
    background-image: url("/assets/status-pending-orange.svg");
}

span.icon.status-pending-gray{
    background-image: url("/assets/status-pending-orange.svg");
    filter: grayscale();
}

span.icon.status-sent-orange{
    background-image: url("/assets/status-sent-orange.svg");
}

span.icon.info-gray{
    background-image: url("/assets/info-gray.svg");
}

span.icon.person-three{
    background-image: url("/assets/person-three.svg");
}

span.icon.person-one{
    background-image: url("/assets/person-one.svg");
}

span.icon.feather{
    background-image: url("/assets/feather.svg");
}

span.icon.durability{
    background-image: url("/assets/durability.svg");
}

span.icon.hammock{
    background-image: url("/assets/hammock.svg");
}

span.icon.click{
    background-image: url("/assets/click.svg");
}

span.icon.click-orange{
    background-image: url("/assets/click-orange.svg");
}

span.icon.transport{
    background-image: url("/assets/transport.svg");
}

span.icon.transport-orange{
    background-image: url("/assets/transport-orange.svg");
}

span.icon.transport-white{
    background-image: url("/assets/transport-white.svg");
}

span.icon.warning{
    background-image: url("/assets/warning.svg");
}

span.icon.warranty{
    background-image: url("/assets/warranty.svg");
}

span.icon.warranty-orange{
    background-image: url("/assets/warranty-orange.svg");
}

span.icon.map-pin-full{
    background-image: url("/assets/map-pin-full.svg");
}

span.icon.map-pin-orange{
    background-image: url("/assets/map-pin-orange.svg");
}

span.icon.tax{
    background-image: url("/assets/tax.svg");
}

span.icon.tax-orange{
    background-image: url("/assets/tax-orange.svg");
}

span.icon.plus-circle{
    background-image: url("/assets/plus-circle.svg");
}

span.icon.plus-circle-full{
    background-image: url("/assets/plus-circle-full.svg");
}

span.icon.message-gray{
    background-image: url("/assets/message-gray.svg");
}

span.icon.shop-orange{
    background-image: url("/assets/shop-orange.svg");
}

span.icon.barcode{
    background-image: url("/assets/barcode.svg");
}

span.icon.video-play{
    background-image: url("/assets/video-play.svg");
}

span.icon.loading {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #AAA;
    border-radius: 50%;
    animation: loadingSpin 800ms cubic-bezier(.14,.42,.82,.52) infinite;
    float: right;
    margin-top: -16px;
}

@keyframes loadingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*======================================================================================================================*/

/*    GENERAL                                       */

/*======================================================================================================================*/

html,
body{
    margin: 0;
    padding: 0;
    font-family: 'Overpass', sans-serif;
    font-weight: 300;
    font-size: 15px;
    font-display: swap;
    line-height: 22px;
    color: #38333B;
}

html.pattern{
    background-color: #00b964;
    background: url("/assets/pattern.svg") repeat;
}

html.pattern header,
html.pattern body{
    background: none;
}

html.background{
    background-color: #F2F2F2;
}

body{
    background-color: #F2F2F2;
}

h1, h2, h3, h4, h5{
    font-family: 'Overpass', sans-serif;
    font-weight: 900;
    margin: 0;
    color: #332544;
}

h1{
    font-size: 60px;
    line-height: 60px;
}

h2{
    font-size: 60px;
    line-height: 60px;
}

h3{
    font-size: 28px;
    line-height: 28px;
}

h4{
    font-size: 24px;
    line-height: 32px;
}

h5{
    font-size: 16px;
    line-height: 24px;
}

p{
    margin: 0;
}

a.primary{
    color: #00b964;
    text-decoration: none;
}

a.primary:hover{
    color: #059ecf;
}

a{
    color: #2A7CEC;
    text-decoration: none;
}

a:hover:not(.blockLink){
    color: #059ecf;
    text-decoration: underline;
}

a.tel{
    color: inherit;
}

button{
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-family: 'Overpass', sans-serif;
    font-weight: 900;
    font-size: 18px;
    cursor: pointer;
    background: none;
    outline: none;
}

button.primary{
    background-color: #00b964;
}

button.primary:hover{
    background-color: #ffc000;
    color: #32004b;
}

button.primary.confirmation{
    background-color: #CAF5E0 !important;
    color: #00B964;
    pointer-events: none;
}

button.secondary{
    background-color: #f2f2f2;
    color: #221629;
}

button.secondary:hover{
    background-color: #e8e8e8;
}

button.tertiary{
    background-color: #ffc000;
    border-color: #ffc000;
    color: #221629;
}

button.tertiary:hover{
    background-color: #ff9c00;
    border-color: #ff9c00;
    color: #32004b;
}

button.tertiary.confirmation{
    pointer-events: none;
}

button.tertiary.confirmation > *{
    display: none;
}

button.tertiary.confirmation::after{
    content: "Multumim!";
    display: block;
}


ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

header{
    position: fixed;
    top: 0;
    width: 100%;
    padding: 30px 20px 0 20px;
    box-sizing: border-box;
    z-index: -1;
    height: 400px;
    background-color: #CCE6E8;
    background-image: url("/assets/leaves-01.jpg");
    background-size: cover;
}

header.info,
header.transport{
  background-image: url("/assets/leaves-02.jpg");
}

#askForCookieConsent{
    display: none;
    position: fixed;
    z-index: 99;
    bottom: 0;
    background-color: #100219;
    color: #BDB9BF;
    width: 100%;
}

body.cartvisible #askForCookieConsent{
  bottom: 64px;
}

#askForCookieConsent .container{
    padding: 16px;
    box-sizing: border-box;
}

#askForCookieConsent h5{
    color: #ffffff;
    margin-bottom: 8px;
}

#askForCookieConsent button{
    width: 100%;
    font-size: 14px;
    height: 44px;
    margin-top: 16px;
}

/*-------------------------------------*/

.modal{
    visibility: hidden;
}

.modal .background{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(34,22,41, 0.6);
    backdrop-filter: blur(2px);
    z-index: 9;
}

.modal .background.on{
    opacity: 1;
}

.modal.drawer{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
}

.modal.drawer .container{
    width: 100%;
    top: 100%;
    z-index: 99;
    background-color: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    position: absolute;
    padding: 32px 16px 16px 16px;
    box-sizing: border-box;
}

.modal.drawer .icon{
    float: right;
}

.modal.drawer .body{
    margin-top: 16px;
    font-size: 18px;
    line-height: 24px;
}

.modal.drawer button{
    margin-top: 32px;
    width: 100%;
}

.modal.drawer .title{
    font-size: 24px;
    line-height: 28px;
}

.modal.drawer .container.on{
  top: auto;
  bottom: 0;
}


/*-------------------------------------*/

.circlePageTransition{
    width: 50px;
    height: 50px;
    background-color: #00b964;
    position: fixed;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

.circlePageTransition.end{
    width: 200vw;
    height: 200vw;
}


/*-------------------------------------*/

.pageSection{
  position: relative;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 64px;
  overflow: hidden;
}

.flex-container{
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
    justify-content: space-between;
}

.flex-container > *{
    flex: 1;
}

.flex-container.productCards{
  -webkit-flex-flow: row;
  flex-flow: row wrap;
}

.flex-container.productCards > *{
    flex: 0 1;
    flex-basis: 100%;
    min-width: 0;
}

.one-col{
    flex: 0 30px;
}

.two-col{
    flex: 0 60px;
}

.three-col{
    flex: 3;
}

.six-col{
    flex: 6;
}

.eight-col{
    flex: 8;
}

.ten-col{
    flex: 10;
}

.desktop,
.desktopContent,
.desktopFlex{
    display: none !important;
}

.link{
    color: #059ecf;
    cursor: pointer;
}

.link:hover{
    color: #00b964;
}

.logo{
    width: 60px;
    height: 96px;
    background-repeat: no-repeat;
    background-size: contain;
}

.logo.inline{
    width: 92px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
}

.logo.white{
    background-image: url(/assets/logo-white.svg);
}

.logo.green{
    background-image: url(/assets/logo-green.svg);
}

.logo.black{
    background-image: url(/assets/logo-black.svg);
}

.logo.black.inline{
    background-image: url(/assets/logo-black-inline.svg);
}

.logo.homepage{
    width: 128px;
    height: 128px;
    position: relative; /* For not having the hero.noise overlayed on it */
}


.anti-fixed-container{
    position: relative;
    width: 100%;
    margin-top: var(--size-homepage-header-mobile);
    padding: 0px 16px;
    border-top: 1px solid #F2F2F2;
    background-color: #F2F2F2;
    box-sizing: border-box;
}

.anti-fixed-container.short{
    margin-top: 400px;
    padding-bottom: 128px;
}

.anti-fixed-container.short > .container{
    position: relative;
    margin-top: -201px; /*1px accounts for anti-fixed-container border-top */
}

.anti-fixed-container.short > .container:after{
    content: "";
    display: block;
    clear: both;
}

.page-title{
    height: 80px;
    margin-bottom: 50px;
}

.page-title h4{
    margin-top: 24px;
}

.video{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.explainer{
    margin-top: 60px;
    clear: both;
}

.explainer .title{
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    color: #32004b;
    margin-bottom: 10px;
}

.explainer .title u{
    text-decoration: none;
    border-bottom: 3px solid #00b964;
}

.explainer .text li{
    border-bottom: 1px solid #fff;
    padding: 10px 0;
}

.explainer .text li:last-child{
    border-bottom: none;
}

figure{
  margin: 0;
  margin-bottom: 16px;
}

figure img,
figure video{
  width: 100%;
  border-radius: 16px;
}

figcaption{
  font-size: 14px;
  color: #221629;
  margin-top: -4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

figcaption a{
  color: #919191;
}

figcaption sup{
  font-size: 12px;
  vertical-align: top;
}

figcaption .icon{
  width: 10px;
  height: 10px;
}

.fadeIn,
.fadeIn2,
.fadeIn3,
.fadeIn4{
    opacity: 0;
}

.fadeInComplete{
    animation: fadeIn 1s cubic-bezier(0,0,.18,1) both;
}

.fadeIn2Complete{
    animation: fadeIn 1s cubic-bezier(0,0,.18,1) 0.1s both;
}

.fadeIn3Complete{
    animation: fadeIn 1s cubic-bezier(0,0,.18,1) 0.2s both;
}

.fadeIn4Complete{
    animation: fadeIn 1s cubic-bezier(0,0,.18,1) 0.3s both;
}

@keyframes fadeIn{
    from{
        opacity: 0;
        transform: translate(0px, 100px);
    }
    to{
        opacity: 1;
        transform: auto;
    }
}

/*-------------------------------------*/

.cart-bottombar{
  width: 100%;
  position: fixed;
  bottom: -80px;
  z-index: 9999;
}

body.cartvisible .cart-bottombar{
    bottom: 0;
}

body:not(.instant) .cart-bottombar,
body:not(.instant) .product-page .controls.mobile{
    transition: bottom 0.2s;
    -webkit-transition: bottom 0.2s;
    -moz-transition: bottom 0.2s;
    -o-transition: bottom 0.2s;
}

.cart-bottombar .corners{
  width: 100%;
}

.cart-bottombar .corners::after{
  display: block;
  content: "";
  clear: both;

}

.cart-bottombar .corners .left,
.cart-bottombar .corners .right{
  width: 16px;
  height: 16px;
  background-image: url("/assets/cart-mobile-corner.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.cart-bottombar .corners .left{
  float: left;
}

.cart-bottombar .corners .right{
  float: right;
  transform: rotate(-90deg);
}

.cart-bottombar .container{
  width: 100%;
  height: 64px;
  background-color: #140C19;
  padding: 0 20px;
  box-sizing: border-box;
  color: #fff;
  font-weight: 700;
}

.cart-bottombar .container::after{
  display: block;
  content: "";
  clear: both;
}

.cart-bottombar button{
  width: 96px;
  height: 48px;
  margin: 8px 0;
  float: right;
  color: #000;
  text-align: right;
  padding: 4px 8px 0 8px;
  border-radius: 8px;
}

.cart-bottombar button .icon{
  width: 20px;
  height: 20px;
  float: left;
}

.cart-bottombar button sup{
  font-size: 10px;
}

.cart-bottombar .title{
  float: left;
  margin-top: 24px;
}

.cart-bottombar .overflow{
  width: 16px;
  color: #B9B7BA;
  font-weight: 300;
  float: right;
  margin: 24px 8px 0 0;
}

.cart-bottombar .products{
  float: left;
  margin-top: 12px;
  overflow: hidden;
  height: 40px;
  position: relative;
}

.cart-bottombar .products > *{
  float: left;
  margin-left: 4px;
}

.cart-bottombar .products > *:first-child{
  margin-left: 8px;
}

.cart-bottombar .products .cart-item-color{
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.cart-item-color{
  background-position: center;
  background-size: 150%;
}

.cart-item-color.HAAGRE{
    background-color: #00b964;
    background-image: url("/images/HAAGRE/HAAGRE-stub.jpg");
}

.cart-item-color.HAAMAS{
    background-color: #a8ab83;
    background-image: url("/images/HAAMAS/HAAMAS-stub.jpg");
}

.cart-item-color.HAALAV{
    background-color: #e5abde;
    background-image: url("/images/HAALAV/HAALAV-stub.jpg");
}

.cart-item-color.HAABLA{
    background-color: #000;
    background-image: url("/images/HAABLA/HAABLA-stub.jpg");
}

.cart-item-color.HAABLL{
    background-color: #56a4c7;
    background-image: url("/images/HAABLL/HAABLL-stub.jpg");
}

.cart-item-color.HAABLU{
    background-color: #314ab1;
    background-image: url("/images/HAABLU/HAABLU-stub.jpg");
}

.cart-item-color.HAAPUR{
    background-color: #4f3460;
    background-image: url("/images/HAAPUR/HAAPUR-stub.jpg");
}

.cart-item-color.HAARED{
    background-color: #c51a27;
    background-image: url("/images/HAARED/HAARED-stub.jpg");
}

.cart-item-color.HAAORA{
    background-color: #ffae00;
    background-image: url("/images/HAAORA/HAAORA-stub.jpg");
}

.cart-item-color.MAABLU{
    background-color: #29495f;
    background-image: url("/images/MAABLU/MAABLU-stub.jpg");
}

.cart-item-color.MAAGRE{
    background-color: #48762a;
    background-image: url("/images/MAAGRE/MAAGRE-stub.jpg");
}

.cart-item-color.MAAYEL{
    background-color: #f29d00;
    background-image: url("/images/MAAYEL/MAAYEL-stub.jpg");
}

.cart-item-color.PROGRE{
      background-color: #0e8236;
      background-image: url("/images/PROGRE/PROGRE-stub.jpg");
  }

.cart-item-color.PERGRE{
    background-color: #00b964;
    background-image: url("/images/PERGRE/PERGRE-2-stub.jpg");
  }

.cart-item-color.PERRED{
    background-color: #c51a27;
    background-image: url("/images/PERRED/PERRED-2-stub.jpg");
}

.cart-item-color.PERORA{
    background-color: #ffae00;
    background-image: url("/images/PERORA/PERORA-2-stub.jpg");
}

.cart-item-color.PERBLL{
    background-color: #56a4c7;
    background-image: url("/images/PERBLL/PERBLL-2-stub.jpg");
}

.cart-item-color.PERBLU{
    background-color: #314ab1;
    background-image: url("/images/PERBLU/PERBLU-2-stub.jpg");
}

.cart-item-color.PERPUR{
    background-color: #4f3460;
    background-image: url("/images/PERPUR/PERPUR-2-stub.jpg");
}

.cart-item-color.PERBLA{
    background-color: #000;
    background-image: url("/images/PERBLA/PERBLA-2-stub.jpg");
}

.cart-item-color.SAC001{
    background-color: #000;
    background-image: url("/images/SAC001/SAC001-cartbar.jpg");
}

.cart-item-color.SAC002{
    background-color: #000;
    background-image: url("/images/SAC002/SAC002-cartbar.jpg");
}

.cart-item-color.SAC003{
    background-color: #000;
    background-image: url("/images/SAC003/SAC003-cartbar.jpg");
}

.cart-item-color.SAC004{
    background-color: #000;
    background-image: url("/images/SAC004/SAC004-cartbar.jpg");
}

.cart-item-color.SAC005{
    background-color: #000;
    background-image: url("/images/SAC005/SAC005-cartbar.jpg");
}

.cart-item-color.SAC006{
    background-color: #000;
    background-image: url("/images/SAC006/SAC006-cartbar.jpg");
}

.cart-item-color.SAC007{
    background-color: #000;
    background-image: url("/images/SAC007/SAC007-cartbar.jpg");
}

.cart-item-color.SAC008{
    background-color: #000;
    background-image: url("/images/SAC008/SAC008-cartbar.jpg");
}



/*======================================================================================================================*/

/*    NAVIGATION                                       */

/*======================================================================================================================*/


.menu{
    width: 45px;
    height: 45px;
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
}

.menu:after{
    content: "";
    display: block;
    clear: both;
}

.menu.open.white{
    background-image: url(/assets/menu.svg);
}

.menu.close.white{
    background-image: url(/assets/ex.svg);
    margin-right: -12px;
}

.mobile-navigation{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    font-family: 'Overpass', sans-serif;
    font-weight: 300;
    font-size: 18px;
    outline: none;
    z-index: 999;
    opacity: 1;
    backdrop-filter: blur(0px);
    transition: all 200ms ease-out;
    pointer-events: none;
}

.mobile-navigation.visible{
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(5px);
}

.mobile-navigation .container{
    position: relative;
    width: 75%;
    height: 100%;
    padding: 32px;
    box-sizing: border-box;
    background-color: #1A1120;
    left: 100%;
    transition: left 200ms ease-out;
}

.mobile-navigation.visible .container{
    left: 25%;
}

.mobile-navigation ul{
    list-style: none;
    margin: 0;
    padding: 0;
    clear: both;
    margin-top: 64px;
}

.mobile-navigation li{
    border-bottom: 1px solid #322739;
}

.mobile-navigation li:first-child{
    border-top: 1px solid #230034;
}

.mobile-navigation li a{
    display: block;
    padding: 16px 0 0 0;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    height: 50px;
    width: 100%;
}

.mobile-navigation .social{
    justify-content: left;
    margin-top: 64px;
}

.mobile-navigation .social a > div:first-child{
    margin: 0 24px 0 0;
}

.mobile-navigation span.icon{
    margin: -2px 20px 0 0;
}

.mobile-navigation .transparent{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main-navigation{
    width: 400px;
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Overpass', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: right;
    display: none;
    flex-flow: nowrap;
    align-items: flex-end;
    z-index: 9;
}

.main-navigation li{
    flex: 1 1 auto;
}

.main-navigation a{
    text-decoration: none !important;
    padding-bottom: 5px;
    color: #221629;
}

.main-navigation a:hover{
    border-bottom: 2px solid #f5871f;
}

.main-navigation.white a{
    color: #ffffff;
}


.scroll-menu{
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    pointer-events: none;
}

.scroll-menu .container{
    position: relative;
    height: 64px;
    width: 100%;
    top: 0px;
    left: 0;
    margin-top: -88px; /* Updated by JS on scroll event */
    background-color: var(--color-brand-green-dark);
    overflow: hidden;
    pointer-events: auto;
}

.scroll-menu .container .fixed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 88px; /* Updated by JS on scroll event */
    padding: 8px 32px;
    box-sizing: border-box;
}

.scroll-menu .logo{
    height: 88px;
    float: left;
}

.scroll-menu .menu{
    float: right;
}

.scroll-menu .corners{
    width: 100%;
}

.scroll-menu .corners .left,
.scroll-menu .corners .right{
    width: 24px;
    height: 24px;
    background-image: url(/assets/corner-green.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.scroll-menu .corners .left{
    float: left;
}

.scroll-menu .corners .right{
    float: right;
    transform: rotate(90deg);
}

/*======================================================================================================================*/

/*    FOOTER                                      */

/*======================================================================================================================*/

body.cartvisible footer{
  margin-bottom: 64px;
}

footer{
    background-color: #221629;
    padding: 0 20px;
    box-sizing: border-box;
    color: #BDB9BF;
}

footer .info{
    border-bottom: 1px solid #322739;
    padding: 40px 0px;
}

footer .info .icon{
    width: 36px;
    height: 36px;
    margin-bottom: 24px;
}

footer h4{
    font-size: 24px;
    color: #fff;
    margin-bottom: 16px;
}

footer .navigation{
    flex-flow: row wrap;
    padding: 40px 0 64px 0;
}

footer ul{
    flex-basis: 50% !important;
    margin-bottom: 36px;
}

footer ul li{
    height: 48px;
}

footer ul a{
    color: #BDB9BF;
    text-decoration: none;
}

footer ul a:hover{
    color: #fff;
}

.social{
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.social::after{
    content: "";
    display: block;
    clear: both;
}

 .social > a div:first-child{
    margin-left: 24px;
}

 .social > a{
    align-self: flex-end;
 }

.facebook,
.instagram{
    width: 48px;
    height: 48px;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.facebook{
    background-image: url("/assets/facebook.png");
}
.instagram{
    background-image: url("/assets/instagram.png");
}

.anpc{    
    text-align: center;
    border-top: 1px solid #322739;
    padding: 32px 0 16px 0;
}

.anpc img{
    height: 30px;
    display: inline-block;
}




/*======================================================================================================================*/

/*    HOMEPAGE                                      */

/*======================================================================================================================*/

header.homepage{
    height: var(--size-homepage-header-mobile);
    background-color: #00b964;
    background-size: 110% auto;
    background-repeat: no-repeat;
    text-align: center;
}

header.homepage.sceneA{
    background-image: url("/assets/hero/hero-scene-a-mobile.jpg");
    animation: horiz-slide-subtle 10s infinite alternate ease-in-out;
}

header.homepage.sceneB{
    background-image: url("/assets/hero/hero-scene-b-mobile.jpg");
}

header.homepage.sceneC{
    background-image: url("/assets/hero/hero-scene-c-mobile.jpg");
}

header.homepage .hero{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

header.homepage .hero #heroGlow,
header.homepage .hero #heroGlowMobile{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(15px);
    mix-blend-mode: overlay;
    opacity: 0.5;
}

header.homepage .hero .noise{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/assets/hero/noise.png");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: 0.1;
}

header.homepage .hero #heroText{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vw;
    transform: translate(-50%, -50%);
}

.anti-fixed-container > .container.homepage{
  position: relative;
  top: -56px;
}

.product-card{
  width: 100%;
  margin-bottom: 16px;
}

.product-card .image{
  position: relative;
  width: 100%;
  padding-top: 80%;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.product-card .image img{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s;
}

.product-card:hover .image img{
  width: 110%;
}

.product-card .content{
  box-sizing: border-box;
  padding: 16px;
  background-color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.product-card .content h4 sup{
  text-transform: uppercase;
  font-size: 9px;
  line-height: 9px;
}

.product-card .content p{
  font-size: 16px;
  color: #6A666C;
  width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.product-card .content div{
  font-weight: 600;
  color: #00B964;
  float: right;
}

.product-card .content .icon{
  width: 19px;
  margin: -2px 4px 0 0;
  display: block;
  float: left;
}

.product-card .content::after{
  content: "";
  display: block;
  clear: both;
}

@media all and (max-width: 900px){


      .oneColumn .product-card .content .desktopContent{
          display: inline !important;
      }

      .twoColumn .product-card .image{
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }

      .twoColumn .product-card .content{
        padding: 8px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
      }

      .twoColumn .product-card .content h4{
        font-size: 16px;
        line-height: 24px;
      }

      .twoColumn .product-card .content h4 sup{
        font-size: 9px;
        line-height: 9px;
      }

      .twoColumn .product-card .content p{
          font-size: 14px;
          width: calc(100% - 24px);
      }

      .twoColumn .product-card .content .icon{
        width: 19px;
        margin-top: -4px;
      }

      .productCards.twoColumn > *{
        flex-basis: 48%;
      }

      .productCards.twoColumn a:nth-child(1){
        order: 1;
      }

      .productCards.twoColumn a:nth-child(2){
        order: 2;
      }

      .productCards.twoColumn a:nth-child(3){
        order: 3;
      }

      .productCards.twoColumn a:nth-child(4){
        order: 4;
      }

      .productCards.twoColumn a:nth-child(5){
        order: 5;
      }

      .productCards.twoColumn a:nth-child(6){
        order: 6;
      }

      .productCards.twoColumn a:nth-child(7){
        order: 7;
      }

      .productCards.twoColumn a:nth-child(8){
        order: 8;
      }

      .productCards.twoColumn a:nth-child(9){
        order: 9;
      }

      .productCards.twoColumn a:nth-child(10){
          order: 10;
        }

    .productCards.twoColumn a:nth-child(11){
          order: 11;
    }

    .productCards.twoColumn a:nth-child(12){
          order: 12;
    }

    .productCards.twoColumn a:nth-child(13){
          order: 13;
    }

    .productCards.twoColumn a:nth-child(14){
          order: 14;
    }

    .productCards.twoColumn a:nth-child(15){
          order: 15;
    }

    .productCards.twoColumn a:nth-child(16){
          order: 16;
    }

    .productCards.twoColumn a:nth-child(17){
          order: 17;
    }

    .productCards.twoColumn a:nth-child(18){
          order: 18;
    }

    .productCards.twoColumn a:nth-child(19){
          order: 19;
    }

    .productCards.twoColumn a:nth-child(20){
          order: 20;
    }


}

.featureSection{
  background-color: #00B965;
  background-image: url("/images/illustration/lines-homepage-mobile.jpg");
  background-size: cover;
  background-position: center;
  padding-top: 48px;
  color: #fff;
  margin-top: 0;
}

.featureSection h1{
  color: #fff;
  margin: 40px 0 16px 0;
}

.featureSection .icon.heart{
  width: 36px;
  height: 36px;
}

.featureSection p{
  color: #DBF5E9;
  font-size: 21px;
  line-height: 32px;
}

.featureSection video{
  width: 100%;
  margin-top: 48px;
  margin-bottom: -8px;
  border-radius: 16px 16px 0 0;
}

.featureIllustration{
  margin: 16px 0 64px 0;
  position: relative;
  grid-area: auto / 1 / auto / span 3;
}

.featureIllustration .background{
  width: 100%;
  border-radius: 16px;
}

.featureIllustration .foreground{
  width: 115%;
  position: absolute;
  top: 10%;
  left: -20px;
}

.featureIllustration h1{
  position: relative;
  margin: 20% 0 16px 0;
}

.featureIllustration button{
  color: #00B964;
  margin-top: 8px;
}

.featureIllustration button .icon{
  margin-top: -3px;
}


/*======================================================================================================================*/

/*    PRODUCT                                       */

/*======================================================================================================================*/

header.product{
    height: 200px;
    background-color: #d8d8c7;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

header.product.PROGRE{
    background-image: url('/images/PROGRE/PROGRE-splash.jpg');
}

header.product.HAAGRE{
    background-image: url('/images/HAAGRE/HAAGRE-splash.jpg');
}

header.product.HAAORA{
    background-image: url('/images/HAAORA/HAAORA-splash.jpg');
}

header.product.HAABLA{
    background-image: url('/images/HAABLA/HAABLA-splash.jpg');
}

header.product.HAABLL{
    background-image: url('/images/HAABLL/HAABLL-splash.jpg');
}

header.product.HAABLU{
    background-image: url('/images/HAABLU/HAABLU-splash.jpg');
}

header.product.HAAPUR{
    background-image: url('/images/HAAPUR/HAAPUR-splash.jpg');
}

header.product.HAARED{
    background-image: url('/images/HAARED/HAARED-splash.jpg');
}

header.product.HAALAV{
    background-image: url('/images/HAALAV/HAALAV-splash.jpg');
}

header.product.HAAMAS{
    background-image: url('/images/HAAMAS/HAAMAS-splash.jpg');
}

header.product.MAABLU{
    background-image: url('/images/MAABLU/MAABLU-splash.jpg');
}

header.product.MAAGRE{
    background-image: url('/images/MAAGRE/MAAGRE-splash.jpg');
}

header.product.MAAYEL{
    background-image: url('/images/MAAYEL/MAAYEL-splash.jpg');
}

header.product.PERGRE{
    background-image: url('/images/PERGRE/PERGRE-splash.jpg');
}

header.product.PERRED{
    background-image: url('/images/PERRED/PERRED-splash.jpg');
}

header.product.PERORA{
    background-image: url('/images/PERORA/PERORA-splash.jpg');
}

header.product.PERBLL{
    background-image: url('/images/PERBLL/PERBLL-splash.jpg');
}

header.product.PERBLU{
    background-image: url('/images/PERBLU/PERBLU-splash.jpg');
}

header.product.PERPUR{
    background-image: url('/images/PERPUR/PERPUR-splash.jpg');
}

header.product.PERBLA{
    background-image: url('/images/PERBLA/PERBLA-splash.jpg');
}

header.product.SAC001{
    background-image: url('/images/SAC001/SAC001-splash.jpg');
}

header.product.SAC002{
    background-image: url('/images/SAC002/SAC002-splash.jpg');
}

header.product.SAC003{
    background-image: url('/images/SAC003/SAC003-splash.jpg');
}

header.product.SAC004{
    background-image: url('/images/SAC004/SAC004-splash.jpg');
}

header.product.SAC005{
    background-image: url('/images/SAC005/SAC005-splash.jpg');
}

header.product.SAC006{
    background-image: url('/images/SAC006/SAC006-splash.jpg');
}

header.product.SAC007{
    background-image: url('/images/SAC007/SAC007-splash.jpg');
}

header.product.SAC008{
    background-image: url('/images/SAC008/SAC008-splash.jpg');
}

.product-page{
    margin-top: 200px;
    background-color: #FFF;
    border-top: 1px solid #fff;
    box-sizing: border-box;
    padding: 40px 20px 100px 20px;
    min-height: 100vh;
}

.product-page .three-col,
.product-page .six-col{
    flex-basis: 100%;
}

.product-page .title{
    order: 1;
}

.product-page h1.protectii{
    font-size: 36px;
    line-height: 36px;
}

.product-page .avatar{
    order: 2;
}

.product-page .description{
    order: 3;
}

.product-page .gallery{
    order: 4;
    margin-top: 20px;
}

.product-page .avatar img,
.product-page .gallery img,
.product-page .gallery video{
    width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 8px;
}

.product-page .description .link{
    margin-top: 20px;
}

.product-page .description ul.details{
    width: 100%;
    margin-top: 20px;
    display: none;
}

.product-page .description ul.details li{
    padding: 14px 20px 10px 20px;
    width: 100%;
    margin-left: -20px;
    line-height: 15px;
    border-bottom: 1px solid #d8d8c7;
}

.product-page .description ul.details li:first-child{
    padding-top: 0;
}

.product-page .description ul.details li:last-child{
    border-bottom: 0px;
}

.product-page .description ul.details li .value{
    float: right;
}

.product-page .description ul.details li .value b{
    margin-right: 5px;
}

.product-page .description ul.details li .value.strength{
    border-bottom: 1px solid #32004b;
}

.product-page .description ul.details li .value.strength:hover{
    border-color: #059ecf;
}

.product-page .controls.mobile{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 16px;
    margin-left: -20px;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 1px solid #d8d8c7;
    outline: none;
    z-index: 9;
}

body.cartvisible .product-page .controls.mobile{
  bottom: 64px;
}

.product-page .controls.mobile .color-select{
    margin-left: -10px;
    top: -61px;
    height: 60px;
}

.product-page .controls.mobile .add-to-cart,
.product-page .controls .add-to-cart{
    width: 100%;
    height: 48px;
    background-color: #00b964;
    border-radius: 5px;
    overflow: hidden;
    font-family: 'Overpass', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: #fff;
}

.product-page .controls.mobile .add-to-cart > *,
.product-page .controls .add-to-cart > *{
    float: left;
    height: 100%;
    padding-top: 18px;
    box-sizing: border-box;
}

.product-page .controls.mobile .color{
    padding-left: 5px;
    padding-right: 10px;
    width: 25%;
    text-align: left;
    outline: none;
    text-transform: capitalize;
}

.product-page .controls.mobile .color .icon{
    width: 12px;
    height: 12px;
    float: right;
}

.product-page .controls.mobile .color.HAARED,
.product-page .controls.mobile .color.PERRED,{
    background-color: #ed1c24;
}

.product-page .controls.mobile .color.HAAORA,
.product-page .controls.mobile .color.PERORA,{
    background-color: #ffae00;
}

.product-page .controls.mobile .color.HAAGRE,
.product-page .controls.mobile .color.PERGRE{
    background-color: #00b964;
}

.product-page .controls.mobile .color.HAABLL,
.product-page .controls.mobile .color.PERBLL,{
    background-color: #059ecf;
}

.product-page .controls.mobile .color.HAABLU,
.product-page .controls.mobile .color.PERBLU,{
    background-color: #0518cf;
}

.product-page .controls.mobile .color.HAAPUR,
.product-page .controls.mobile .color.PERPUR,{
    background-color: #32004b;
}

.product-page .controls.mobile .color.HAABLA,
.product-page .controls.mobile .color.PERBLA,{
    background-color: #191919;
}

.product-page .controls.mobile .color.MAAYEL{
    background-color: #f6871e;
}

.product-page .controls.mobile .color.MAABLU{
    background-color: #045370;
}

.product-page .controls.mobile .button,
.product-page .controls .button{
    width: 70%;
    box-sizing: border-box;
    border-left: 1px solid #4ace46;
    border-right: 1px solid #4ace46;
}

.product-page .controls.mobile .price,
.product-page .controls .price{
    width: 30%;
    background-color: #009f70;
}

.product-page .controls.mobile .price .currency,
.product-page .controls .price .currency{
    display: inline-block;
    vertical-align: top;
    font-size: 9px;
    line-height: 9px;
    padding-bottom: 1px;
    border-bottom: 1px solid #FFF;
    text-transform: uppercase;
}

.product-page .controls.mobile.nocolor .button{
    width: 75%;
}

.controls .add-to-cart.confirmation{
    background-color: #CAF5E0 !important;
    box-sizing: border-box;
    pointer-events: none;
}

.controls .add-to-cart.confirmation > *{
    display: none;
}

.controls .add-to-cart.confirmation::after{
    content: "Adaugat!";
    display: block;
    color: #00B964;
    margin-top: 18px;
}

.controls .add-to-cart.outofstock{
    background-color: #FFE9E9 !important;
    box-sizing: border-box;
}

.controls .add-to-cart.outofstock > *:not(.color){
    display: none;
    pointer-events: none;
}

.controls .add-to-cart.outofstock::after{
    content: "Stoc Epuizat";
    display: block;
    color: #ed1c24;
    margin-top: 18px;
}

/*----------------------------------*/

.product-related{
    margin: 80px 0;
}



/*======================================================================================================================*/

/*  INFO                                            */

/*======================================================================================================================*/


.info-page{
    padding: 0 20px;
    box-sizing: border-box;
}

.info-page .two-col{
    display: none;
}

.hammock-details{
    background-color: #fff;
    border-radius: 8px;
}

.hammock-details .content{
    padding: 48px 24px;
}

.hammock-details h4{
    color: #221629;
    margin-bottom: 8px;
}

.hammock-details .image{
    background-color: #DCECED;
    border-radius: 8px 8px 0 0;
    height: 200px;
    text-align: center;
    overflow: hidden;
}

.hammock-details .image img{
    max-width: 100%;
    max-height: 100%;
}

.hammock-details ul{
    margin-top: 20px;
}

.hammock-details ul li{
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E6E6E6;
}

.hammock-details ul .label{
    flex: 5;
}

.hammock-details ul .value{
    flex: 3;
    font-weight: 700;
    text-align: right;
}

.hammock-details ul .unit{
    width: 20px;
    margin-left: 10px;
}

.hammock-details ul a{
    color: #32004b;
}

.hammock-details .advantage{
    margin-top: 48px;
    text-align: center;
}

.hammock-details .advantage .icon{
    width: 48px;
    height: 48px;
    margin-top: -4px;
}

.hammock-details .advantage .title{
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
}

.hammock-details .advantage:after{
    content: "";
    display: block;
    clear: both;
}

.hammock-details.maac{
    margin-top: 32px;
}

.info-page .videos > .video{
    margin-top: 32px;
    border-radius: 8px;
    overflow: hidden;
}


.info-page .compare.flex-container{
  flex-flow: column;
}



/*======================================================================================================================*/

/*  CONTACT                                         */

/*======================================================================================================================*/


.contact-page .contact-info{
    background-color: #00b964;
    height: 200px;
    color: #fff;
    padding: 36px 24px 0 24px;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.contact-page .contact-info h4{
    color: #fff;
    text-decoration: none;
}

.contact-page .form button{
    margin-top: 24px;
}

.contact-page .social > div{
    position: relative;
}

.contact-page .info{
    border-radius: 8px;
}

.return-page button.primary{
    margin-top: 24px;
    background-color: #ED1C24;
}

.return-page button.primary:hover{
    background-color: #ffc000;
}

.return-page input#file{
    margin-top: 8px;
    height: 40px;
}




/*======================================================================================================================*/

/*  FORM                                            */

/*======================================================================================================================*/

.form .container{
    padding: 24px;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form input{
    font-family: 'Overpass', sans-serif;
    font-size: 15px;
    height: 48px;
    width: 100%;
    border: none;
    outline: none;
    padding: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #CCC;
    color: #000;
}

.form textarea{
    width: 100%;
    height: 160px;
    border: none;
    border-bottom: 1px solid #CCC;
    outline: none;
    color: #000;
    font-family: 'Overpass', sans-serif;
    font-size: 15px;
    line-height: 21px;
    padding: 0;
    resize: vertical;
}

.form label[for=message]{
    z-index: 9;
    position: relative;
    display: block;
    width: 100%;
    float: none;
    border: none;
}

.form button{
    width: 100%;
    font-size: 16px;
}

.form::after{
    content: "";
    display: block;
    clear: both;
}

.form label{
    clear: both;
    float: left;
    width: 80px;
    height: 48px;
    border-bottom: 1px solid #CCC;
    line-height: 48px;
    box-sizing: border-box;
    cursor: text;
}

.form label.highlight{
    font-weight: 600;
}

.form input{
    float: left;
    width: calc(100% - 80px);
}

.form input[type=checkbox]{
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form .title{
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 5px;
}

.form label.error,
.form label.error + input,
.form label.error + .errorMessage + textarea{
    color: #ed1c24;
    border-color: #ed1c24;
}

.form label.error + input{
    width: calc(100% - 160px);
}

.form label[for=message].error{
    width: calc(100% - 80px);
    float: left;
}

.errorMessage{
    display: none;
    font-weight: 900;
    font-size: 10px;
    text-transform: uppercase;
    text-align: right;
    color: #ed1c24;
    border-bottom: 1px solid #ed1c24;
    width: 80px;
    height: 48px;
    float: right;
    box-sizing: border-box;
    padding-top: 16px;
}

.form label.error + input + .errorMessage{
    display: block;
}

.form label[for=message].error + .errorMessage{
    display: block;
    border: 0;
}

.errorMessage::after{
    content: "Obligatoriu";
}

.form label.error.incomplete + input + .errorMessage::after{
  content: "Incomplet";
}

.form label[for=city].error + input + .errorMessage::after,
.form label[for=county].error + input + .errorMessage::after{
  content: "Incorect";
}





/*======================================================================================================================*/

/*  CHECKOUT                                        */

/*======================================================================================================================*/

.mobile.cart{
    position: fixed;
    z-index: -1;
    top: 30px;
    right: 80px;
    width: 45px;
    height: 45px;
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/assets/cart.svg);
    display: none;
}

.mobile.cart span{
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 10px;
    color: #fff;
    font-family: 'Overpass', sans-serif;
    font-weight: 900;
    font-size: 13px;
    float: right;
    margin-right: -5px;
    text-align: center;
    pointer-events: none;
}

.mobile-navigation.visible + a .mobile.cart{
    z-index: 9999;
}

.HAAGRE-stub{
    background-image: url(/images/HAAGRE/HAAGRE-stub.jpg);
}

.HAAMAS-stub{
    background-image: url(/images/HAAMAS/HAAMAS-stub.jpg);
}

.HAALAV-stub{
    background-image: url(/images/HAALAV/HAALAV-stub.jpg);
}

.HAABLA-stub{
    background-image: url(/images/HAABLA/HAABLA-stub.jpg);
}

.HAABLU-stub{
    background-image: url(/images/HAABLU/HAABLU-stub.jpg);
}

.HAABLL-stub{
    background-image: url(/images/HAABLL/HAABLL-stub.jpg);
}

.HAAPUR-stub{
    background-image: url(/images/HAAPUR/HAAPUR-stub.jpg);
}

.HAARED-stub{
    background-image: url(/images/HAARED/HAARED-stub.jpg);
}

.HAAORA-stub{
    background-image: url(/images/HAAORA/HAAORA-stub.jpg);
}

.MAAGRE-stub{
    background-image: url(/images/MAAGRE/MAAGRE-stub.jpg);
}

.MAABLU-stub{
    background-image: url(/images/MAABLU/MAABLU-stub.jpg);
}

.MAAYEL-stub{
    background-image: url(/images/MAAYEL/MAAYEL-stub.jpg);
}

.PROGRE-stub{
    background-image: url(/images/PROGRE/PROGRE-stub.jpg);
}

.PERGRE-stub{
    background-image: url(/images/PERGRE/PERGRE-stub.jpg);
}

.PERRED-stub{
    background-image: url(/images/PERRED/PERRED-stub.jpg);
}

.PERORA-stub{
    background-image: url(/images/PERORA/PERORA-stub.jpg);
}

.PERBLL-stub{
    background-image: url(/images/PERBLL/PERBLL-stub.jpg);
}

.PERBLU-stub{
    background-image: url(/images/PERBLU/PERBLU-stub.jpg);
}

.PERPUR-stub{
    background-image: url(/images/PERPUR/PERPUR-stub.jpg);
}

.PERBLA-stub{
    background-image: url(/images/PERBLA/PERBLA-stub.jpg);
}

.SAC001-stub{
    background-image: url(/images/SAC001/SAC001-stub.jpg);
}

.SAC002-stub{
    background-image: url(/images/SAC002/SAC002-stub.jpg);
}

.SAC003-stub{
    background-image: url(/images/SAC003/SAC003-stub.jpg);
}

.SAC004-stub{
    background-image: url(/images/SAC004/SAC004-stub.jpg);
}

.SAC005-stub{
    background-image: url(/images/SAC005/SAC005-stub.jpg);
}

.SAC006-stub{
    background-image: url(/images/SAC006/SAC006-stub.jpg);
}

.SAC007-stub{
    background-image: url(/images/SAC007/SAC007-stub.jpg);
}

.SAC008-stub{
    background-image: url(/images/SAC008/SAC008-stub.jpg);
}



.checkout-page .product{
    display: flex;
    align-items: center;
    height: 96px;
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 8px;
    overflow: hidden;
}

.checkout-page .product .image{
    width: 64px;
    height: 100%;
    margin-right: 12px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.checkout-page .product .info{
    flex: 2;
    color: #989898;
}

.checkout-page .product .info h4{
    font-size: 21px;
    line-height: 24px;
}

.checkout-page .product .info sup{
    font-size: 10px;
    display: inline-block;
    vertical-align: text-bottom;
}

.checkout-page .product .info div{
    display: inline-block;
}

.checkout-page .product .controls div.delete{
    display: none;
}

.checkout-page .product .controls .color-and-quantity{
    border: none;
    width: auto;
    height: auto;
}

.checkout-page .product .controls .quantity{
    height: 40px;
    border-radius: 20px;
    border: 1px solid #EBEBEB;
    display: flex;
    position: relative;
}

.checkout-page .product .controls .quantity > *{
    flex: 1;
}

.checkout-page .product .controls .quantity .icon{
    width: 12px;
}

.checkout-page .product .controls .quantity div.plus,
.checkout-page .product .controls .quantity div.minus{
    width: 40px;
    box-sizing: border-box;
    padding-top: 6px;
    text-align: center;
}

.checkout-page .product .controls .quantity div.plus{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.checkout-page .product .controls .quantity div.minus{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.checkout-page .product .controls .quantity div.plus:hover,
.checkout-page .product .controls .quantity div.minus:hover{
    background-color: #f4f4ec;
}

.checkout-page .product .controls .quantity div.plus:active,
.checkout-page .product .controls .quantity div.minus:active{
    background-color: #ffc000;

}

.checkout-page .product .controls .quantity div.plus .icon{
    margin-right: -8px;
}

.checkout-page .product .controls .quantity div.minus .icon{
    margin-left: -8px;
}

.checkout-page .product .controls .quantity input{
    width: 100%;
    height: 100%;
    background-color: rgba(250,250,250, 0);
    z-index: 9;
    border: none;
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    outline: none;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}

.checkout-page .product .delete-confirm-container{
    flex: 0;
    overflow: hidden;
    display: flex;
    margin-top: 16px;
    transition: margin 0.2s;
    width: 100%;
    height: 100%;
    align-items: center;
}

.checkout-page .product.delete-confirm{
    background-color: #221629;
}

.checkout-page .product.delete-confirm > *:not(.delete-confirm-container){
    display: none;
}

.checkout-page .product.delete-confirm .delete-confirm-container{
    margin-top: 0px;
    flex: 1;
}

.checkout-page .product .delete-confirm-container .image{
    background-color:#46374F;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10px;
    margin: 0 16px 0 8px;
}

.checkout-page .product .delete-confirm-container .cta-delete,
.checkout-page .product .delete-confirm-container .cta-cancel{
    color: #fff;
    height: 40px;
    width: 80px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10px;
    margin-right: 8px;
    cursor: pointer;
}

.checkout-page .product .delete-confirm-container .cta-delete{
    background-color: #ed1c24;
}

.checkout-page .product .delete-confirm-container .cta-cancel{
    background-color: #56485F;
}

.checkout-page .product .delete-confirm-container .cta-delete:hover{
    background-color: #D21111;
}

.checkout-page .product .delete-confirm-container .cta-cancel:hover{
    background-color: #483951;
}

.checkout-page .product .delete-confirm-container h4{
    color: #fff;
}


.subtotal{
    float: right;
    font-family: 'Overpass', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #221629;
    margin: 18px 10px 0 0;
}

.subtotal u{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    vertical-align: super;
    margin-left: 3px;
}

.checkout-page .form{
    background-color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    border-radius: 5px;
}

.checkout-page .form .billing{
    margin-top: 40px;
    display: none;
}

.checkout-page .form.extended .billing{
    display: block;
}

.checkout-page .form .destination:after,
.checkout-page .form .billing:after{
    content: "";
    display: block;
    clear: both;
}

.checkout-page .form .extender{
    width: 300px;
}

.checkout-page .form .extender label{
    border: 0;
}

.checkout-page .form .extender input[type=checkbox]{
    margin-top: 10px;
}

.checkout-page .total{
    background-color: #fff;
    border-radius: 5px;
    border-bottom-right-radius: 0px;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-top: 10px;
}

.checkout-page .total .title{
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 5px;
}

.checkout-page .total .title .icon.loading{
    width: 18px;
    height: 18px;
    display: none;
}

.checkout-page .total ul li{
    border-bottom: 1px solid #ccc;
    padding: 12px 0px;
    box-sizing: border-box;
}

.checkout-page .total ul li:after{
    content: "";
    display: block;
    clear: both;
}

.checkout-page .total ul li .label{
    float: left;
}

.checkout-page .total .subtotal{
    margin: -5px 0 0 0;
}

.checkout-page .total #extraKM{
    color: #989898;
    margin-top: 2px;
    display: none;
    clear: both;
}

.checkout-page .total #extraKM.visible{
    display: block;
}

.checkout-page .total #extraKM:hover{
    color: inherit;
}

.checkout-page .total .subtotal#total-transport span.loading{
    color: red;
}

.checkout-page .total .subtotal#total-all{
    color: #00b964;
}

.checkout-page .total .subtotal#total-all u{
    border-color: #00b964;
}

.checkout-page .total .link{
    font-size: 12px;
    margin-top: 10px;
}

.checkout-page button.primary{
    width: 100%;
    margin-top: 24px;
}

.ui-autocomplete{
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 4px;
}

.ui-autocomplete li {
    box-sizing: border-box;
    padding: 12px;
    text-transform: capitalize;
}

.ui-autocomplete li:not(.noResults){
    cursor: pointer;
}

.ui-autocomplete li:not(.noResults):hover{
    background-color: #f4f4ec;
}

.ui-autocomplete li span{
    text-transform: capitalize;
}

.ui-autocomplete li div{
    min-width: 24px;
    float: right;
    margin-left: 12px;
    text-align: right;
}

.ui-autocomplete li div.km{
    color: #D8D8C7;
}

.ui-autocomplete li::after{
    content: "";
    display: block;
    clear: both;
}

.ui-helper-hidden-accessible{
    display: none !important;
}

.checkout-page input#county:disabled{
    background-color: #fff;
}

.checkout-page .deliveryPostponed{
    margin-bottom: -16px;
}

.deliveryPostponed{
    position: relative;
    background-color: #EBF9F3;
    border-radius: 8px;
    padding: 24px 16px 16px 16px;
    margin-top: 24px;
    text-align: center;
    box-sizing: border-box;
}

.deliveryPostponed img{
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    height: 200px;
}

.deliveryPostponed .calendar{
    position: relative;
    display: inline-block;
    background-color: #fff;
    border-radius: 16px;
    padding-top: 6px;
    padding-bottom: 16px;
    margin-bottom: 32px;
}

.deliveryPostponed .calendar .label{
    border-bottom: 1px solid #CCC;
}

.deliveryPostponed .calendar .day{
    font-size: 64px;
    line-height: 56px;
    color: #221629;
    margin-top: 16px;
    padding: 0 24px;
}

.deliveryPostponed .calendar .month{
    font-size: 21px;
    line-height: 21px;
    color: #221629;
    font-weight: bold;
    padding: 0 16px;
}


/*======================================================================================================================*/

/*    RECEIPT                                       */

/*======================================================================================================================*/


.receipt .deliveryPostponed{
    margin: 24px 16px 16px 16px;
}

.receipt .deliveryPostponed .highlight{
    display: none;
}


.receipt{
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.receipt ul{
    padding: 0 16px;
}

.receipt ul li{
    border-bottom: 1px solid #E6E6E6;
    padding: 24px 0px ;
}

.receipt ul li:last-child{
    border-bottom: none;
}

.receipt ul li .image{
    width: 40px;
    height: 40px;
    float: left;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-left: -4px;
}

.receipt ul li h5{
    float: left;
    margin: 13px 0 0 8px;
}

.receipt ul li .subtotal{
    float: right;
    margin: 6px 0 0 0;
}

.receipt ul li::after{
    content: '';
    display: block;
    clear: both;
}

.receipt-cut{
    width: 100%;
    height: 24px;
    margin-top: -24px;
    border-bottom: 2px dashed #E6E6E6;
}

.receipt-cut .circle-left,
.receipt-cut .circle-right{
    background-color: #F2F2F2;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin-top: 12px;
}

.receipt-cut.green .circle-left,
.receipt-cut.green .circle-right{
    background-color: #00B964;
}

.receipt-cut .circle-left{
    float: left;
    margin-left: -12px;
}

.receipt-cut .circle-right{
    float: right;
    margin-right: -12px;
}

.receipt ul.total{
    background-color: #221629;
}

.receipt ul.total li > *{
    color: #fff !important;
}

.receipt ul.total .total-icon-container{
    float: left;
}

.receipt ul.total .icon.cart-black{
    width: 20px;
    height: 20px;
    margin-top: 9px;
}

.disclaimer{
    margin-top: 24px;
    font-size: 10px;
    line-height: 14px;
}

.disclaimer .icon{
    width: 20px;
    height: 20px;
    float: left;
    margin: -4px 2px -2px 0;
}

.receipt .client-info{
    margin: 40px 24px 0 24px;
    padding-bottom: 40px;
    border-bottom: 1px solid #E6E6E6;
    font-size: 16px;
    line-height: 24px;
}
.receipt .client-info:last-child{
    border-bottom: none;
}

.receipt .client-info label{
    display: inline-block;
}

.receipt .client-info .title{
    padding: 4px 8px 2px 8px;
    background-color: #000;
    color: #fff;
    font-weight: 900;
    margin-bottom: 24px;
}

.receipt .client-info .name{
    font-weight: 900;
    text-transform: uppercase;
}

.receipt .client-info .email{
    color: #1972EB;
}

.receipt .client-info .phone,
.receipt .client-info .billing .address{
    color: #635B68;
}

.receipt .client-info.destination .address{
    margin-top: 24px;
    font-family: 'Source Code Pro', monospace;
    font-weight: 500;
    max-width: 400px;
}

.receipt .client-info .business{
    padding: 0;
    margin-top: 24px;
}

.receipt .client-info .business li{
    border: none;
    padding: 0;
    font-family: 'Source Code Pro', monospace;
    font-weight: 500;
}

.receipt .client-info .business li span{
    display: inline-block;
    width: 56px;
    font-family: 'Overpass', sans-serif;
    font-size: 12px;
    font-weight: 900;
}

.receipt .status{
    margin: 40px 24px;
    text-align: center;
}

.receipt .status .icon{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-bottom: 16px;
}

.receipt .status h4{
    margin-bottom: 16px;
}

.receipt .status br{
    display: none;
}

.receipt .disclaimer{
    padding: 8px;
}

.receipt .barcode .icon{
    display: none;
}

.receipt .survey{
    padding: 56px 24px 48px 24px;
    background-color: #EBF9F3;
    background-image: url("../assets/survey-lines.gif");
    background-position: center;
    background-size: cover;
    text-align: center;
}

.receipt .survey button{
    margin: 24px 0 8px 0;
    padding: 0 32px;
}

.receipt .survey p{
    margin-top: 8px;
}

.receipt .survey .time .icon{
    width: 20px;
    height: 20px;
}



/*======================================================================================================================*/

/*    DETAILS CONTAINER                             */

/*======================================================================================================================*/

.transport-page .header{
  background-image: url("assets/leaves-02.jpg");
}

.transport-page .info,
.contact-page .info,
.return-page .info{
    background-color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 24px;
    margin-top: 32px;
    text-align: center;
    box-sizing: border-box;
}

.return-page .info{
    margin-top: 0;
    text-align: left;
}

.transport-page .info{
    padding: 48px;
}

.transport-page .info .icon,
.contact-page .info .icon{
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-bottom: 16px;
}

.transport-page .info h4,
.contact-page .info h4{
    margin-bottom: 24px;
}

.transport-page .info > div,
.contact-page .info > div{
    border-bottom: 1px solid #E6E6E6;
    padding: 32px 0;
}

.transport-page .info > div:last-child,
.contact-page .info > div:last-child{
    border: none;
}




/*======================================================================================================================*/

/*    SUFLET                                        */

/*======================================================================================================================*/

#sufletBubbleContainer{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    display: none;
    z-index: 9999;
}

#sufletBubble{
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--color-brand-red);
}



/*======================================================================================================================*/

/*    LEGAL PAGE                                    */

/*======================================================================================================================*/


.anti-fixed-container.privacyPolicy{
    margin-top: 480px;
}

.legal-page article{
    padding: 48px 0 24px 0;
    text-align: left;
    border-bottom: 1px solid #E6E6E6;
    background-color: #fff;
    box-sizing: border-box;
}

.legal-page article:first-child{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.legal-page article:last-child{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom: 0;
    padding-bottom: 48px;
}

.legal-page article div{
    padding: 0 24px;
}

.legal-page article h5{
    margin-bottom: 24px;
}

.legal-page article ul{
    list-style: initial;
    margin: 0 0 24px 48px;
}

.legal-page article p{
    margin-bottom: 24px;
}




/*======================================================================================================================*/

/*    TRANSPORT PAGE                               */

/*======================================================================================================================*/

.transport-page .map{
    background-color: #E1E1E1;
    background-image: url(/assets/map.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: center;
    padding: 40px 0 56px 0;
}

.transport-page .map .icon{
    display: inline-block;
    width: 48px;
    height: 68px;
    margin-bottom: 16px;
}

.transport-page .map h4{
    margin-bottom: 8px;
}

.transport-page .map p{
    margin-bottom: 24px;
}

.transport-page .map button{
    padding: 0 24px;
}

.transport-page .icon-container{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    float: left;
    background-color: #f2f2f2;
}

.transport-page .icon-container .icon{
    margin: 5px;
    width: 30px;
    height: 30px;
}

.transport-page ul.total .icon-container{
    background-color: #442B52;
}

.transport-page .icon-container.covarage{
    background-color: #ffffff;
}

.transport-page .receipt .icon.plus{
    width: 15px;
    height: 15px;
    margin: 12px;
}

.transport-page .receipt .subtotal,
.multumim .receipt .subtotal{
    font-size: 20px;
}




/*======================================================================================================================*/

/*  MULTUMIM                                        */

/*======================================================================================================================*/

body.multumim{
    background-color: #00B964;
}

body.multumim .anti-fixed-container{
    background-color: inherit;
    border: 0;
    margin-top: 0;
}

body.multumim .back-link{
    margin-top: 48px;
}

body.multumim .back-link a{
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

body.multumim .header .container{
    background-color: #00D573;
    position: relative;
    text-align: center;
    margin-top: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-top: 56px;
    height: 160px;
    box-sizing: border-box;
}

body.multumim .header .logo{
    position: absolute;
    top: 24px;
    left: 24px;
    height: 100px;
}

body.multumim .header h3,
body.multumim .header p{
    color: #fff;
    position: relative;
    z-index: 9;
}

body.multumim .header p{
    font-weight: 600;
}

body.multumim .header .butterfly{
    position: absolute;
    top: -55px;
    left: 50%;
    height: 150px;
    margin-left: -30px;
}

body.multumim .receipt{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

body.multumim .receipt h5 span{
    color: #B2AEB4;
    font-weight: 600;
}

body.multumim .receipt .transport h5{
    float: none;
    margin: 0;
}

body.multumim .receipt div.transport{
    float: left;
    margin-left: 8px;
}

body.multumim .receipt .icon-container{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    float: left;
    background-color: #f2f2f2;
}

body.multumim .receipt .icon.transport{
    margin: 5px;
    width: 30px;
    height: 30px;
}

body.multumim .receipt a{
    text-decoration: none;
}

body.multumim .receipt .transport a{
    font-size: 12px;
    font-weight: 600;
}

body.multumim .receipt .transport a:visited{
    color: #2A7CEC !important;
}

body.multumim .receipt .total{
    background-color: #F2F2F2;
    margin-bottom: 32px;
}

body.multumim .receipt .total li > *{
    color: #221629 !important;
}

body.multumim .social{
    text-align: center;
    margin-top: 24px;
    padding-bottom: 48px;
}

body.multumim .social > a:first-child div{
    margin-right: 24px;
}

body.multumim .social .facebook,
body.multumim .social .instagram{
    width: 48px;
    height: 48px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    float: none;
}

body.multumim .social .facebook{
    background-image: url("/assets/facebook.png");
}

body.multumim .social .instagram{
    background-image: url("/assets/instagram.png");
}

body.multumim .social p{
    margin-top: 16px;
    font-size: 24px;
    color: #fff;
}



/*======================================================================================================================*/

/*   COLOR AND QUANTITY                                */

/*======================================================================================================================*/

.color-and-quantity{
    width: 100%;
    height: 50px;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid #E6E6E6;
    display: block;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.checkout-page .color-and-quantity .dropdown{
  pointer-events: none;
}

.checkout-page .color-and-quantity .dropdown .icon.arrowUp,
.checkout-page .color-and-quantity .dropdown .icon.arrowDown{
  display: none;
}

.color-and-quantity .dropdown{
    float: left;
    height: 100%;
    width:  100%;
    position: relative;
    z-index: 9;
    display: flex;
    flex-flow: column;
    flex: 7;
    outline: none;
}

.color-and-quantity .dropdown .icon{
        position: absolute;
        top: 17px;
        right: 17px;
        width: 15px;
        height: 15px;
    }

.color-and-quantity .dropdown.disabled .icon{
    display: none;
}

.color-and-quantity .dropdown div{
    display: none;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 14px 10px;
    box-sizing: border-box;
    border-left: 10px solid;
    background-color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px;
}

.color-and-quantity .dropdown:not(.disabled) div:hover{
    background-color: #f4f4ec;
    cursor: pointer;
}

.color-and-quantity .dropdown div.current{
    display: block;
    order: 0;
    border-top-left-radius: 5px;
    padding-right: 40px;
    height: 48px;
}

.color-and-quantity .dropdown a{
  text-decoration: none;
  color: #332544;
}

.color-and-quantity .dropdown a:last-child div,
.color-and-quantity .dropdown:not(.expanded) div.current{
    border-bottom-left-radius: 5px;
}

.color-and-quantity .dropdown.expanded{
    z-index: 99;
}

.color-and-quantity .dropdown.expanded div{
    display: block;
}

.color-and-quantity .dropdown.expanded div:not(.current){
    min-height: 36px;
    padding: 9px 10px;    
}

.color-and-quantity .dropdown.expanded a:last-child div:not(.current){
        border-bottom-right-radius: 5px;
        border-bottom: 1px solid #E6E6E6;
    }

.color-and-quantity .dropdown .HAARED,
.color-and-quantity .dropdown .PERRED{
        border-left-color: #ed1c24;
        order: 1;
    }

.color-and-quantity .dropdown .HAALAV{
    border-left-color: #e5abde;
    order: 2;
}
.color-and-quantity .dropdown .HAAORA,
.color-and-quantity .dropdown .PERORA{
        border-left-color: #ffae00;
        order: 3;
    }

.color-and-quantity .dropdown .HAAMAS{
    border-left-color: #a8ab83;
    order: 4;
}
.color-and-quantity .dropdown .HAAGRE,
.color-and-quantity .dropdown .MAAGRE,
.color-and-quantity .dropdown .PERGRE,
.color-and-quantity .dropdown .PROGRE{
    border-left-color: #00b964;
    order: 5;
}

.color-and-quantity .dropdown .HAABLU,
.color-and-quantity .dropdown .PERBLU{
    border-left-color: #0518cf;
    order: 6;
}

.color-and-quantity .dropdown .HAABLL,
.color-and-quantity .dropdown .PERBLL{
    border-left-color: #059ecf;
    order: 7;
}

.color-and-quantity .dropdown .HAAPUR,
.color-and-quantity .dropdown .PERPUR{
    border-left-color: #5d1780;
    order: 8;
}

.color-and-quantity .dropdown .HAABLA,
.color-and-quantity .dropdown .PERBLA{
    border-left-color: #191919;
    order: 9;
}



.color-and-quantity .dropdown .MAAYEL{
    border-left-color: #f6871e;
    order: 2;
}

.color-and-quantity .dropdown .MAABLU{
    border-left-color: #045370;
    order: 1
}

.color-and-quantity .dropdown .SAC001{
    border-left-color: var(--color-product-sac001);
    order: 1
}

.color-and-quantity .dropdown .SAC002{
    border-left-color: var(--color-product-sac002);
    order: 2
}

.color-and-quantity .dropdown .SAC003{
    border-left-color: var(--color-product-sac003);
    order: 3
}

.color-and-quantity .dropdown .SAC004{
    border-left-color: var(--color-product-sac004);
    order: 4
}

.color-and-quantity .dropdown .SAC005{
    border-left-color: var(--color-product-sac005);
    order: 5
}

.color-and-quantity .dropdown .SAC006{
    border-left-color: var(--color-product-sac006);
    order: 6
}

.color-and-quantity .dropdown .SAC007{
    border-left-color: var(--color-product-sac007);
    order: 7
}

.color-and-quantity .dropdown .SAC008{
    border-left-color: var(--color-product-sac008);
    order: 8
}

/*----------------------------------*/

.color-and-quantity .number{
    float: left;
    width: 50%;
    height: 100%;
        flex: 3;
        display: flex;
}

.color-and-quantity .number input{
        flex: 1;
        width: inherit;
        border: none;
        border-right: 1px solid #E6E6E6;
        text-align: center;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        outline: none;
    }

.color-and-quantity .number input:disabled{
  background-color: #fff;
}

.color-and-quantity .number input::-webkit-inner-spin-button,
.color-and-quantity .number input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}

.color-and-quantity .number .change{
    flex: 2;
    height: 100%;
}

.color-and-quantity .number .change > * {
    float: right;
    height: 100%;
    width: 50%;
    padding-top: 11px;
    box-sizing: border-box;
    text-align: center;
}

.color-and-quantity .number .change > *:last-child{
    border-right: 1px solid #E6E6E6;
}

.color-and-quantity .number .change > *:hover{
    background-color: #f4f4ec;
}

.color-and-quantity .number .change > *:active{
    background-color: #ffc000;
}

.color-and-quantity .number .change > * .icon{
    width: 12px;
    height: 12px;
}

.color-and-quantity .number .change .minus .icon{
    margin-top: -2px;
}

/*----------------------------------*/

.controls .color-select{
    position: absolute;
    top: -51px;
    height: 50px;
    width: 100%;
    background-color: #FFF;
    border-top: 1px solid #d8d8c7;
    display: none;
    outline: none;
}

.controls .color-select .dropdown{
    height: 100%;
    justify-content: space-around;
    align-items: center;
    display: flex;
    outline: none;
}

.controls .color-select .dropdown div{
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.controls .color-select .HAARED{
    background-color: #ed1c24;
}

.controls .color-select .HAAORA{
    background-color: #ffae00;
}

.controls .color-select .HAAGRE{
    background-color: #00b964;
}

.controls .color-select .HAABLL{
    background-color: #059ecf;
}

.controls .color-select .HAABLU{
    background-color: #0518cf;
}

.controls .color-select .HAAPUR{
    background-color: #32004b;
}

.controls .color-select .HAABLA{
    background-color: #191919;
}

.controls .color-select .MAABLU{
    background-color: #045370;
}

.controls .color-select .MAAYEL{
    background-color: #f6871e;
}

/*----------------------------------*/

.overlay{
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: none;
}

.overlay .background-blur{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34,22,41, 0.6);
  backdrop-filter: blur(2px);
  z-index: 9;
  opacity: 0;
}

.overlay .background-blur.on{
  opacity: 1;
}

.overlay .drawer{
  position: fixed;
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  position: absolute;
  top: 100%;
  z-index: 99;
  font-weight: 600;
  font-size: 18px;
  padding: 16px;
  box-sizing: border-box;
}

.overlay .drawer.on{
  top: auto;
  bottom: 0;
}

.overlay .drawer .header{
  margin: 8px 0 24px 0;
}

.overlay .drawer .header .title{
  color: #C1C1C1;
}

.overlay .drawer .header .close{
  width: 12px;
  height: 12px;
  float: right;
}

.overlay .drawer li{
  margin-bottom: 16px;
}

.overlay .drawer li .cart-item-color{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  float: left;
  margin-right: 16px;
}

.overlay .drawer li label{
  display: block;
  float: left;
  margin-top: 10px;
  color: #38333B !important;
}

.overlay .drawer li::after{
  clear: both;
  display: block;
  content: "";
}


/*======================================================================================================================*/

/*  THANK YOU                                       */

/*======================================================================================================================*/

.thank-you{
    background: none;
    text-align: center;
    color: #fff;
}

.thank-you .message .icon{
    width: 60px;
    height: 60px;
}

.thank-you .message .icon,
.thank-you .message h1,
.thank-you .message p{
    margin-bottom: 20px;
}

.thank-you .message h1{
    color: #fff;
    font-size: 36px;
    line-height: 36px;
}

.thank-you .message button{
    font-size: 15px;
    padding: 0 20px;
}