/************************************************************************************************************ ***** RESET ************************************************************************************************ **************************************************************************************************************/ *, *:before, *:after{ margin: 0; padding: 0; border:0; box-sizing: border-box; } /*:focus { outline: -webkit-focus-ring-color auto 0px; outline-width: 0px; }*/ *:focus{ outline: none; } .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl { width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -20px; margin-left: -20px; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; padding-right: 20px; padding-left: 20px; } @media (min-width: 992px){ .d-lg-flex{display: flex!important;} .d-lg-grid {display: grid!important;} } @media (min-width: 1199px){ .d-xl-flex{display: flex!important;} .d-xl-grid{display: grid!important;} } a, a:hover, a:focus, a:visited{ text-decoration: none; color: var(--color-primary, black); } a.underline{text-decoration: underline;} p, h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6 { margin-top: 0; margin-bottom: 0; } ul{list-style: none;} img{max-width: 100%;} button{background: transparent;} address{font-style: normal;} /* FORM */ ::-webkit-input-placeholder {color: rgba(176,176,176,1);font-style: normal !important;} :-ms-input-placeholder {color: rgba(176,176,176,1);font-style: normal !important;} ::placeholder {color: rgba(176,176,176,1);font-style: normal !important;} /* Slick */ .slick-list{width: 100%;} .slick-list{margin:0 !important;} .slider--hero{height: var(--height-slider);overflow: hidden;} /* -- Arrows */ .slider--hero .slick-arrow{opacity: 0;transition: var(--trans);} .slider--hero:hover .slick-arrow{opacity: 1;} .slick-prev, .slick-next{background-image: none !important;} .slick-arrow.slick-disabled{opacity: 0 !important;} .slick-arrows--middle .slick-arrow{position: absolute;top:calc(50% - 25px);width: 50px;height: 50px;margin: 0;background-color: rgba(255,255,255,0);border-radius: 50%;z-index: 100;transition: var(--trans);} .slick-arrows--middle .slick-arrow:before{content: "";position: absolute;width: 50px;height: 50px;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;background-color: rgba(255,255,255,0.4);transition: var(--trans);} .slick-arrows--middle .slick-arrow:after{content: "";position: absolute;width: 7px;height: 14px;top: 50%;left: 50%;transform: translate(-50%, -50%);background: url(../images/icon-arrow--next.svg);background-size: 100%;background-repeat: no-repeat;background-position: center;z-index: 100;} .slick-arrows--middle .slick-arrow:hover:before{width: 80px;height: 80px;background-color: rgba(255,255,255,1);box-shadow: 0 0px 30px 0px rgba(100, 100, 100, 0.1);} .slick-arrows--middle .slick-arrow:active:before{width: 78px;height: 78px;/*transition-duration: 150ms;*/} .slick-arrows--middle .slick-arrow.slick-prev{left: 7px;transform: translateX(50px) translateY(-50%) scaleX(-1);} .slick-arrows--middle .slick-arrow.slick-next{right: 7px;transform: translateX(-50px) translateY(-50%);} .slick-arrows--middle.slick-arrows--outside{} .slick-arrows--middle.slick-arrows--outside .slick-arrow.slick-prev{left: 5px;transform: translateX(-50%) translateY(-50%) scaleX(-1);} .slick-arrows--middle.slick-arrows--outside .slick-arrow.slick-next{right: 18px;transform: translateX(50%) translateY(-50%);} /* -- Dots "Container" */ .slick-dots{width: 100%;margin-right: auto;margin-left: auto;} @media (min-width: 576px){.slick-dots{max-width: 540px;}} @media (min-width: 768px){.slick-dots{max-width: 720px;}} @media (min-width: 992px){.slick-dots{max-width: 960px;}} @media (min-width: 1200px){.slick-dots{max-width: 1140px;}} .slick-dots{width: 100%;height: auto;position: absolute;bottom: 0;left: calc(50% + 0px);transform: translateX(-50%);display: flex;justify-content: center;margin: 45px 0px;} .slick-dots li{margin: 0px 8px;display: flex;} .slick-dots li:only-child{display: none;} .slick-dots li button {font-size: 0;} .slick-dots li button{width: 6px;height: 6px;background-color: var(--color-primary);border-radius: 100%;opacity: .2;} .slick-dots li.slick-active button{background-color: var(--color-primary);opacity: 0.6;} .slick-dots--white .slick-dots li.slick-active button{background-color: var(--color-secondary);opacity: 1;} .slick-dots--white .slick-dots li button{background-color: var(--color-secondary); opacity: 0.2;} .slick-dots--overflow{padding-bottom: 75px;} @media(max-width: 991px){ .slick-dots{left: 50%;justify-content: center;margin: 35px 0px;} } /************************************************************************************************************* ***** GENERAL ************************************************************************************************ **************************************************************************************************************/ body { width: 100%; /*float: left;*/ font-family: var(--font-family-400); font-size: var(--font-size-text); line-height: var(--font-lh-body); letter-spacing: var(--font-ls-medium); color: var(--color-primary, black); padding-top: 160px; } a, input[type="submit"] { font-family: var(--font-family-400); font-size: var(--font-size-btn); line-height: var(--font-lh-normal); letter-spacing: var(--font-ls-big); color: var(--color-primary, black); } input[type="submit"]{font-family: var(--font-family-500);} h1,.h1{ font-family: var(--font-family-700); font-size: var(--font-size-h1); line-height: var(--font-lh-h1); letter-spacing: var(--font-ls-normal); font-weight: 700; } h2,.h2{ font-family: var(--font-family-300); font-size: var(--font-size-h2); line-height: var(--font-lh-h2); letter-spacing: var(--font-ls-normal); font-weight: 300; } h3,.h3{ font-family: var(--font-family-300); font-size: var(--font-size-h3); line-height: var(--font-lh-normal); letter-spacing: var(--font-ls-normal); font-weight: 300; } h4,.h4{ font-family: var(--font-family-500); font-size: var(--font-size-h4); line-height: var(--font-lh-normal); letter-spacing: var(--font-ls-big); font-weight: 500; } label,.label{ font-family: var(--font-family-500); font-size: var(--font-size-tiny); line-height: var(--font-lh-normal); letter-spacing: var(--font-ls-large); text-transform: uppercase; } input, textarea{ font-family: var(--font-family-400); font-size: var(--font-size-small); line-height: var(--font-lh-select); letter-spacing: var(--font-ls-tiny); } textarea{padding: var(--padding-input);border: 1px solid var(--color-border-input);} select, .select{ font-family: var(--font-family-400); font-size: var(--font-size-small); line-height: var(--font-lh-select); letter-spacing: var(--font-ls-tiny); background-color: white; color:var(--color-primary, black); } select { -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; background: transparent; background-image: url("../images/icon-arrow--select-down.svg"); background-repeat: no-repeat; background-position: calc(100% - 15px) center; padding-right: 15px; } select option[selected][disabled]{display: none;} input[type="radio"]:checked, input[type="radio"]:not(:checked) {position: absolute;left: -9999px;display: none;} input[type="radio"]:checked + label, input[type="radio"]:not(:checked) + label{padding-left: 24px;min-height: 14px;position: relative;display: inline-block;color: var(--color-primary);line-height: var(--font-lh-normal);cursor: pointer;} input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before {content: '';position: absolute;left: 0;top: 0;width: 14px;height: 14px;border: 1px solid var(--color-primary);border-radius: 100%;background: transparent;} input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after {content: '';position: absolute;top: 0;left: 0;width: 14px;height: 14px;background-color: var(--color-secondary);border: 4px solid var(--color-primary);border-radius: 100%;-webkit-transition: var(--trans);transition: var(--trans);} input[type="radio"]:not(:checked) + label:after {opacity: 0;-webkit-transform: scale(0);transform: scale(0);} input[type="radio"]:checked + label:after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);} .input-checkbox input[type="checkbox"]{width: initial;height: initial;padding: 0;margin: 0;display: none;cursor: pointer;} .input-checkbox input[type="checkbox"] + label{cursor: pointer;display: inline-flex;} .input-checkbox input[type="checkbox"] + label:before {content:'';-webkit-appearance: none;background-color: transparent;border: 1px solid #000;width: 14px;height: 14px;display: inline-block;position: relative;vertical-align: middle;cursor: pointer;margin-right: 10px;} .input-checkbox input[type="checkbox"]:checked + label:after {transform: scale(1) rotate(0deg);} .input-checkbox input[type="checkbox"] + label:after {content: '';position: absolute;top: 1px;left: 1px;width: 12px;height: 12px;background-color: black;border: 2px solid white;transform: scale(0) rotate(0); transition: var(--trans-fast);} .mailchimp-newsletter input[type="checkbox"]{width: initial;height: initial;padding: 0;margin: 0;display: none;cursor: pointer;} .mailchimp-newsletter input[type="checkbox"] + label{cursor: pointer;display: inline-flex;} .mailchimp-newsletter input[type="checkbox"] + label:before {content:'';-webkit-appearance: none;background-color: transparent;border: 1px solid #000;width: 14px;height: 14px;display: inline-block;position: relative;vertical-align: middle;cursor: pointer;margin-right: 10px;} .mailchimp-newsletter input[type="checkbox"]:checked + label:after {transform: scale(1) rotate(0deg);} .mailchimp-newsletter input[type="checkbox"] + label:after {content: '';position: absolute;top: 1px;left: 1px;width: 12px;height: 12px;background-color: black;border: 2px solid white;transform: scale(0) rotate(0); transition: var(--trans-fast);} button[disabled]{opacity: 0.5;cursor: not-allowed;} button, select,.select{cursor: pointer;} blockquote{margin: 40px 0px;border-left: 2px solid var(--color-primary);padding: 18px;font-size:18px;line-height: var(--font-lh-normal);} p + p, ul + ul, ol + ol, p + ul, p + ol, ul + p, ol + p, ul + ol, ol + ul{margin-top: 15px;} ul.dotted{position: relative;} ul.dotted li{position: relative;padding-left: 20px;} ul.dotted li + li{margin-top: 5px;} ul.dotted li:before{content: "";width: 3px;height: 3px;border-radius: 50%;position: absolute;top: 6px;left: 6px;background-color: rgba(0,0,0,0.7);} section{width: 100%;float: left;position: relative;padding: var(--padding-section);} section:first-child{padding-top: 120px;} section:last-child{padding-bottom: 120px;} /************************************************************************************************************* ***** COMPONENTS ********************************************************************************************* **************************************************************************************************************/ /* * * Button & Button with Arrow * */ .btn, input[type="submit"]{position: relative;float: left;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;padding: var(--padding-button);border: 1px solid;transition: var(--trans);cursor: pointer;} .btn.btn--black, .btn:hover, input[type="submit"]{background-color: var(--color-primary);color: var(--color-secondary);border-color: var(--color-primary);} .btn.btn--black:hover, input[type="submit"]:hover{color: var(--color-secondary);background-color: var(--color-accent-hover);} .btn, .btn--arrow__label, .btn--arrow__icon{float: left;} .btn--arrow__label + .btn--arrow__icon{margin-left: 12px;} .btn--arrow__icon{width: var(--btn-arrow-width);height: 8px;background-repeat: no-repeat;background-position: center;background-size: contain;transition: var(--trans);} .btn--arrow:hover .btn--arrow__icon{transform: translateX(10px);} .btn, .btn--arrow-black, .btn--arrow-white:hover{background-color: var(--color-secondary);color: var(--color-primary);} .btn--arrow-white, .btn--arrow-black:hover{background-color: var(--color-primary);color: var(--color-secondary);} .btn--arrow, .btn--arrow-black{color: var(--color-primary, black);} .btn--arrow-white{color: var(--color-secondary, white);border-color: var(--color-primary);} .btn--arrow .btn--arrow__icon, .btn--arrow-black .btn--arrow__icon{background-image: url(../images/icon-btn-arrow--black.svg);} .btn--arrow-white .btn--arrow__icon, .btn--arrow-white:hover .btn--arrow__icon, .btn--arrow-black:hover .btn--arrow__icon{background-image: url(../images/icon-btn-arrow--white.svg);} .btn--transparent{background-color: transparent;} .btn--transparent.btn--arrow-white .btn--arrow__label{color: var(--color-secondary);} .btn--transparent.btn--arrow-white{border-color: var(--color-secondary);} .btn--transparent.btn--arrow-white:hover .btn--arrow__label{color: var(--color-primary);} .btn--transparent.btn--arrow-white:hover .btn--arrow__icon{background-image: url(../images/icon-btn-arrow--black.svg);} /* * * Link & Link with Arrow * */ .link{position: relative;float: left;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;padding: var(--padding-link);transition: var(--trans);} .link,.link--arrow__label,.link--arrow__icon{float: left;} .link:hover .link--arrow__icon{transform: translateX(10px);} .link--arrow__icon{width: var(--btn-arrow-width);height: 8px;background-repeat: no-repeat;background-position: center;background-size: contain;transition: var(--trans);} .link--arrow__label + .link--arrow__icon{margin-left: 12px;} .link--arrow .link--arrow__icon, .link--arrow-black .link--arrow__icon{background-image: url(../images/icon-btn-arrow--black.svg);} .link--arrow-white, .link--arrow-white:hover{color: var(--color-secondary, white);} .link--arrow-white .link--arrow__icon{background-image: url(../images/icon-btn-arrow--white.svg);} .link--icon{display: flex;justify-content: flex-start;align-items: center;} .link--icon__icon{width: 16px;height: 16px;display: flex;justify-content: center;align-items: center;} .link--icon__label{font-family: var(--font-family-400);font-size: var(--font-size-small);line-height: var(--font-lh-select);letter-spacing: var(--font-ls-tiny);} .link--icon__icon + .link--icon__label{margin-left: 10px;} /* * * Links & Buttons * */ .btn, .link, .btn:hover, .link:hover, input[type="submit"]{text-decoration:none;} /* * * Header * */ header{width: 100%;height: var(--height-header);float: left;position: relative;background-color:white;position: sticky;top: 0;z-index: 1010;margin-bottom: 20px;} header{float: none;position: fixed;} header #header-main{width: 100%;height: var(--height-menu);float: left;position: relative;background-color: black;} header.sticky{top: calc(var(--height-header-diff) * -1);transition: var(--trans);} header.sticky #header-main, header.sticky .header-left, header.sticky .header-center, header.sticky .header-right{height: var(--height-menu-sticky);} header.sticky .header-center .logo{margin-top: 30px;} header.sticky .header-center .logo img{height: 32px;} header.sticky .navigation-preferences{padding-top: 15px;} header.sticky .navigation-icons{padding-top: 10px;} header.sticky .nav-stores, header.sticky form.navigation-search{padding-bottom: 15px;} header.sticky #main-nav > ul{margin-top: 20px;} header, header.sticky #header-main, header.sticky .header-center .logo, header.sticky .header-center .logo img, header.sticky .header-left, header.sticky .header-center, header.sticky .header-right, header.sticky .navigation-preferences, header.sticky .navigation-icons, header.sticky .nav-stores, header.sticky form.navigation-search, header.sticky #main-nav > ul{transition: all 500ms ease-in-out;} /* -- Topbar */ #topbar{width: 100%;float: left;transition: var(--trans);} #topbar__notifications{width: 100%;height: 40px;/*padding: 12px 0px;*/text-align: center;background-color: var(--color-topbar);display: flex;justify-content: center;align-items: center;} /* -- Main*/ #header-main{width: 100%;height: var(--height-menu);padding: 0px 30px 0px;border-bottom: 1px solid black;} .header-left, .header-right{height: var(--height-menu);display: flex;align-items: stretch;flex-wrap: wrap;} /* -- -- Main Left */ .navigation-preferences{width: 100%;float: left;padding-top: var(--padding-menu-t);position: relative;display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;} .pref-item select {min-width: 60px;color: white;} .pref-item select option{background-color: white; color: black;} .pref-item + .pref-item{margin-left: 25px;} .nav-stores{width: 100%;float: left;position: relative;display: flex;align-items: flex-end;padding-bottom: var(--padding-menu-b);} .nav-stores a{text-decoration: none;color: white;} @media(max-width:1024px){body:not(.header-no-navigation) header .pref-item select{color:black;}} /* -- -- Main Center */ .header-center{height: var(--height-menu);display: flex;justify-content: center;/*align-items: center;*/flex-wrap: wrap;} .header-center .logo{margin-top: 25px;display: flex;} .header-center .logo img{height:42px;transition: all 500ms ease-in-out;} .header-center nav, .header-center nav ul{width: 100%;display: flex;justify-content: center;align-items: flex-end;} #main-nav ul{float: left;list-style: none;margin:0;margin-top: 8px;display: flex;} #main-nav li{float: left;} #main-nav li + li{margin-left: 10px;} #main-nav li a{float: left;text-decoration: none;font-family: var(--font-family-500);text-transform: uppercase;padding: 0px 10px 18px 10px;transition:var(--trans);color: white;} #main-nav li a.menu-item:hover + .sub-nav, #main-nav li .sub-nav:hover, #main-nav li .sub-nav.sub-nav--active{top:100%;opacity: 1;pointer-events: all;z-index: -1;/*transform: translateY(0px);*/} #main-nav li .sub-nav{background-color: white;position: absolute;left: 0;left:calc(0vw - 25% - 15px);right: 0;top: 100%;width: 100vw;margin-top: 0px;padding: 2vh 2vw;padding: 45px 0px 80px;transition: var(--trans);opacity: 0;pointer-events: none;z-index: -1;} /* -- -- Main Right */ .navigation-icons{width: 100%;padding-top: var(--padding-menu-t);position: relative;display: flex;justify-content: flex-end;align-items: flex-start;} .nav-item-icon{width: 36px;height: 36px;position: relative;text-decoration: none;display: flex;justify-content: center;align-items: center;padding: 10px;} .nav-item-icon + .nav-item-icon{margin-left: 10px;} .nav-item-icon#nav-bag .bag-count{background-color: var(--color-secondary);color: var(--color-primary);font-size: 8px;position: absolute;top: 5px;right: 2px;width: 14px;height: 14px;display: flex;justify-content: center;align-items: center;border-radius: 100%;} /* -- -- Main Right - Search Form */ form.navigation-search{width: 100%;float: left;display: flex;justify-content: flex-end;align-items: flex-end;padding-bottom: var(--padding-menu-b);} form.navigation-search input.search__input{width: 100%;max-width: 200px;height: 30px;padding: 0px 10px;border-left:1px solid transparent;} form.navigation-search input.search__input[type='text']:focus{border-left:1px solid var(--color-border);} form.navigation-search button.search__button{width: 30px;height: 30px;display: flex;justify-content:center;align-items: center;background-color: transparent;transition: var(--trans);border-radius: 3px;} form.navigation-search button.search__button:hover{background-color: var(--color-topbar);} header .dgwt-wcas-search-wrapp{color: white !important;} header .dgwt-wcas-no-submit .dgwt-wcas-ico-magnifier path{fill: white !important;} header .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input, header .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus{background: black !important;color: white;} header select {background-image: url("../images/icon-arrow--select-down--white.svg");} @media(max-width:1024px){body:not(.header-no-navigation) header select {background-image: url(../images/icon-arrow--select-down.svg);}} /* [B2B] Logo Tagline */ header.sticky #header-main, header.sticky .header-left, header.sticky .header-center, header.sticky .header-right{height: var(--height-menu, 120px);} /* * * Mega Menu * */ #main-nav .sub-nav{box-shadow: 0 14px 14px 0 rgba(0, 0, 0, 0.2);} #main-nav .sub-nav label{width:100%;float:left;margin-bottom: 20px;} #main-nav .sub-nav ul{flex-direction: column;} #main-nav .sub-nav ul + label{margin-top: 30px;} #main-nav .sub-nav li{width: 100%;float: left;} #main-nav .sub-nav li + li{margin-left: 0;margin-top: 5px;} #main-nav .sub-nav li a, #main-nav .sub-nav .archive-category__title{padding: 0;font-family: var(--font-family-400);font-size: var(--font-size-text);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);color: var(--color-primary, black);text-transform: none;} #main-nav .sub-nav .archive-category{padding: 0;} #main-nav .sub-nav .archive-category__bottom{padding: 0;padding-top: 12px;} #main-nav .sub-nav .grid--col-3 .archive-category__image{padding-top: 66%;} #main-nav .sub-nav a.nav-explore-gifts{padding: 0;margin-top: 20px;font-family: var(--font-family-400);font-size: var(--font-size-btn);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);color: var(--color-primary, black);text-transform: none;text-decoration: underline;} /* * * Header Mobile * */ #header-main--xs{width: 100%;float: left;position:relative;background-color: black;border-bottom:1px solid var(--color-primary);font-size: var(--font-size-tiny);} #header-main--xs .header__mobile{position: relative;padding: 20px;display: grid;align-items: center;grid-template-columns: 80px 1fr 80px;} /* -- -- Header XS - Navigation Menu */ #header-main--xs .mobile__nav{} /* -- -- -- Header XS - Menu Icon */ #header-main--xs #nav-icon-xs{width: 17px;height: 1px;width: 20px;height: 18px;position: relative;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;} #header-main--xs #nav-icon-xs span{display: block;position: absolute;height: 1px;width: 100%;background: var(--color-secondary);border-radius: 0px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: var(--trans);-moz-transition: var(--trans);-o-transition: var(--trans);transition: var(--trans);} #header-main--xs #nav-icon-xs span:nth-child(1) {top: 0px;} #header-main--xs #nav-icon-xs span:nth-child(2) {top: 8px;} #header-main--xs #nav-icon-xs span:nth-child(3) {top: 16px;} #header-main--xs #nav-icon-xs.open span:nth-child(1) {top: 8px;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);} #header-main--xs #nav-icon-xs.open span:nth-child(2) {opacity: 0;left: -60px;} #header-main--xs #nav-icon-xs.open span:nth-child(3) {top: 8px;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);} /* -- -- -- Header XS - Menu Navigation */ #header-dropdown-menu{width: 100vw;float: left;background: white;position: absolute;top: 100%;left: 0px;visibility: hidden;opacity: 0;border-top:1px solid var(--color-border);pointer-events: none;transition: var(--trans);} #header-dropdown-menu.open{visibility: visible;opacity: 1;pointer-events: all;} /* -- -- -- Header XS - Topbar -- Preferencies */ #dropdown-menu--topbar{position:relative;display: grid;grid-template-columns: repeat(2, 1fr);padding: 20px;border-bottom:1px solid var(--color-border);} #dropdown-menu--topbar .pref-item{display: inline-block;width: 100%;max-width: 60px;} #dropdown-menu--topbar select{font-size: var(--font-size-tiny);font-family: var(--font-family-500);} /* -- -- -- Header XS - Topbar -- Search */ #dropdown-menu__search{display: flex;align-items: center;justify-content: flex-end;} #dropdown-menu__search-form{position: fixed;top: 0;right: -100%;width: 100%;height: 100%;padding-top: 100px;background-color: rgba(255,255,255,1);z-index: 1000;display: flex;align-items: flex-start;justify-content: center;transition: var(--trans);} #dropdown-menu__search-form.open{right: 0;} #dropdown-menu__search-form .input-group{display: flex;} #dropdown-menu__search-form input{padding: 15px;background-color: rgba(255,255,255,1);border: 1px solid black;border-right: 0;} #dropdown-menu__search-form button{background: var(--color-accent);color: var(--color-secondary);padding: 15px;border: 1px solid black;border-left: 0px;text-transform: uppercase;font-family: var(--font-family-500);display: flex;justify-content: center;align-items: center;} #dropdown-menu__search-form .close{width: 20px;height: 20px;position: absolute;top: 20px;right: 20px;} /* -- -- -- Header XS - Main */ #dropdown-menu--main{width: 100%;float: left;position: relative;padding: 25px 20px;} #dropdown-menu--main{height: 100vh;min-height: calc(100vh - 60px - 60px - 35px);max-height: calc(100vh - 60px - 60px - 0px);overflow-x: hidden;overflow-y: auto;} #dropdown-menu--main ul{width: 100%;float: left;position: relative;} #dropdown-menu--main ul + ul{/*margin-top: 35px;*/margin-top: 25px;padding-bottom: 25px;} #dropdown-menu--main ul li{width: 100%;float: left;position: relative;} #dropdown-menu--main ul li + li{margin-top: 10px;transition: var(--trans);} #dropdown-menu--main ul li a{float: left;position:relative;z-index:1;font-family: var(--font-family-500);font-size: var(--font-size-tiny);text-transform: uppercase;padding: 10px;padding-left: 0;} #dropdown-menu--main ul li a.dropdown-submenu__icon-item{padding: 0;} /* -- -- -- Header XS - Main - Sub Menu */ #dropdown-menu--main > ul{padding-bottom: 20px;border-bottom: 1px solid var(--color-border);} #dropdown-menu--main > ul:last-of-type{border: 0;} .dropdown-menu-item--parent .dropdown-submenu{pointer-events: none;} .dropdown-menu-item--parent.open .dropdown-submenu{pointer-events: all;} #dropdown-menu--main-menu .dropdown-menu-item--parent.open .dropdown-submenu{padding: 20px 0px 25px;} #dropdown-menu--secondary-menu .dropdown-menu-item--parent.open .dropdown-submenu, #dropdown-menu--account-menu .dropdown-menu-item--parent.open .dropdown-submenu{padding: 0px 0px 25px;} /* -- -- -- Header XS - Main - Sub Menu Icons */ .dropdown-submenu-icon-items{width: 100%;float: left;position: relative;display: grid;grid-template-columns: repeat(2, 1fr);grid-row-gap: 15px;padding-bottom: 20px;border-bottom: 1px solid var(--color-border);} .dropdown-submenu__icon-item{width: 100%;float: left;position: relative;display: grid;grid-template-columns: 60px 1fr;} .dropdown-submenu__icon-item .dropdown-submenu__icon-item--thumb{width: 60px;height: 60px;float: left;border-radius: 100%;overflow:hidden;} .dropdown-submenu__icon-item .dropdown-submenu__icon-item--name{width: 100%;float: left;position: relative;margin-left: 10px;display: flex;align-items: center;} /* -- -- -- Header XS - Main - Collections */ .dropdown-submenu-nav-menu, .dropdown-submenu-nav-collection{width: 100%;float: left;position: relative;padding-top: 20px;} #dropdown-menu--main ul.dropdown-submenu-nav-menu li + li, #dropdown-menu--main ul.dropdown-submenu-nav-collection-list li + li{margin-top: 10px;} #dropdown-menu--main ul.dropdown-submenu-nav-menu-list li a, #dropdown-menu--main ul.dropdown-submenu-nav-collection-list li a{padding: 0;font-family: var(--font-family-400);font-size: var(--font-size-btn);text-transform: none;} /* -- -- -- Header XS - Main - Description */ .dropdown-submenu-short-description{width: 100%;float: left;padding-top: 20px;} .dropdown-submenu-short-description p{font-size: var(--font-size-text);} /* Dropdown Menu - Handle Parent Items */ #dropdown-menu--main ul li.dropdown-menu-item--parent.open + li.dropdown-menu-item--parent, #dropdown-menu--main ul li.dropdown-menu-item--parent.open + li.dropdown-menu-item--parent.open{margin-top: 25px;} #dropdown-menu--main ul li + li.dropdown-menu-item--parent.open, #dropdown-menu--main ul li.dropdown-menu-item--parent + li.dropdown-menu-item--parent.open{margin-top: 40px;} .dropdown-menu-item--parent{transition: var(--trans);} .dropdown-menu-item--parent:before{background-color: rgba(242, 242, 242, 0);transition: var(--trans);} .dropdown-menu-item--parent.open:before{content: "";position: absolute;top: -25px;left: -20px;width: calc(100% + 40px);height: calc(100% + 25px);background-color: rgba(242, 242, 242,1);z-index: 0;} .dropdown-menu-item--parent:after{content: "";position: absolute;top: 14px;right: 0px;width: 9px;height: 5px;background-size: contain;background-position: center;background-repeat: no-repeat;background-image: url(../images/icon-arrow--select-down.svg);display: flex;justify-content: center;align-items: center;transition: var(--trans);} .dropdown-menu-item--parent.open:after{transform: rotateX(-180deg);transform: rotate(-180deg);} .dropdown-menu-item--parent ul{max-height: 0;opacity: 0;transition: var(--trans-slow);} .dropdown-menu-item--parent.open ul{max-height: 600px;opacity: 1;overflow-y: auto;overflow-x: hidden;transition: var(--trans-slow);} /* -- -- Header XS - Menu Navigation -- Logo */ #header-main--xs .mobile__logo{display: flex;justify-content: center;align-items: center;} /* -- -- Header XS - Bag Icon */ #header-main--xs .navigation-icons{padding-top: 0;} #header-main--xs .navigation-icons .nav-item-icon{width: auto;height: auto;padding: 2px;} #header-main--xs .navigation-icons .nav-item-icon#nav-bag-xs .bag-count{background-color: var(--color-secondary);color: var(--color-primary);font-size: 8px;position: absolute;top: 5px;right: 2px;width: 14px;height: 14px;display: flex;justify-content: center;align-items: center;border-radius: 100%;top: -2px;right: -6px;} /* * * Footer * */ footer{width: 100%;float: left;background-color:black} footer a, footer a:hover, footer a:focus, footer a:visited{color: var(--color-secondary, white);} footer .container-fluid--limit{padding: 100px 30px 60px;} footer .logo{margin-bottom: 50px;} footer label.h4{width: 100%;float: left;margin: 20px 0px;color:white;} footer .footer-info div + div, footer li + li{margin-top: 3px;} footer a, footer p{font-family: var(--font-family-400);font-size: var(--font-size-small);line-height: var(--font-lh-select);letter-spacing: var(--font-ls-tiny);color:white;} footer a:hover{text-decoration: underline;color:white;} footer .footer-social{width: 100%;float: left;margin-top: 30px;filter:invert(1);} footer .footer-social-icon + .footer-social-icon{margin-left: 20px;} footer .copyright{width: 100%;float: left;margin-top: 50px;} #footer-info{order: 1;} #footer-menu, #dropdown-menu--footer{order: 2;} /* -- Footer XS */ #dropdown-menu--footer > ul {padding-bottom: 20px;} #dropdown-menu--footer ul {width: 100%;float: left;position: relative;} #dropdown-menu--footer ul li{width: 100%;float: left;position: relative;} #dropdown-menu--footer ul li a {float: left;position: relative;z-index: 1;font-family: var(--font-family-500);font-size: var(--font-size-tiny);text-transform: uppercase;padding: 10px;padding-left: 0;text-decoration: none;} #dropdown-menu--footer ul li.dropdown-menu-item--parent.open + li.dropdown-menu-item--parent, #dropdown-menu--footer ul li.dropdown-menu-item--parent.open + li.dropdown-menu-item--parent.open{margin-top: 25px;} #dropdown-menu--footer ul li.dropdown-menu-item--parent + li.dropdown-menu-item--parent.open{margin-top: 40px;} #dropdown-menu--footer ul.dropdown-submenu-nav-menu-list li a{padding: 0;font-family: var(--font-family-400);font-size: var(--font-size-btn);text-transform: none;} #dropdown-menu--footer-menu .dropdown-menu-item--parent .dropdown-submenu{pointer-events: none;} #dropdown-menu--footer-menu .dropdown-menu-item--parent.open .dropdown-submenu{padding: 0px 0px 25px;pointer-events: all;} footer .dropdown-menu-item--parent:before{background-color: rgba(242, 242, 242,1);transition: var(--trans);} footer .dropdown-menu-item--parent.open:before{background-color: #303030;} footer .dropdown-menu-item--parent:after{background-image: url(../images/icon-arrow--select-down--white.svg);} /* * * Effects * */ /* -- Screen Effect */ .pattern:before, .pattern-before:before, .pattern-after:after{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-image: url('../images/pattern.png');background-repeat: repeat;} /* * * Secondary Pages Header - Terms of use, My Account, etc. * */ /* -- CASE: No Image */ section#secondary_header{padding: var(--padding-sec-header);background-color: var(--color-background);} section#secondary_header .secondary_header__image{display: none;} section#secondary_header .secondary_header__title, section#secondary_header .secondary_header__subtitle, section#secondary_header .secondary_header__effect{width: 100%;float: left;position: relative;display: flex; justify-content: center; align-items: center;} section#secondary_header .secondary_header__subtitle{margin-top: 2px;} section#secondary_header .secondary_header__underline{width: 60px;height: 1px;float: left;margin-top: 12px;background-color: var(--color-primary);} /* -- CASE: Variation Image */ section#secondary_header.case-image{display: flex;justify-content: center;align-content: center;flex-wrap: wrap;} section#secondary_header.case-image:after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.2);z-index: 1;} section#secondary_header.case-image .secondary_header__image{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: var(--color-background);background-size: cover;background-position: center right;background-repeat: no-repeat;} section#secondary_header.case-image .secondary_header__title, section#secondary_header.case-image .secondary_header__subtitle, section#secondary_header.case-image .secondary_header__effect{color: var(--color-secondary);z-index: 2;} section#secondary_header.case-image .secondary_header__underline{background-color: var(--color-secondary);} /* -- CASE: Variation Image Large */ section#secondary_header.case-image.case-image--large{min-height: 700px;} /* * * Floating Content * */ /* * Global - My Bag */ .floating-container{} .my-bag-backdrop{display: none;} .my-bag-backdrop{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 8000;background-color: rgba(0,0,0,.3);} .my-bag-content{width: 100%;float: left;position: relative;transition: var(--trans);} .my-bag-content--right{min-width: 300px;width: 100%;max-width: 430px;height: 100vh;float: left;position: fixed;bottom:0;right: -100%;z-index: 8001;background-color: white;} .my-bag-content--right.open{right: 0;box-shadow: 0 -14px 14px 0 rgba(0, 0, 0, 0.2);} /* -- My Bag - Header */ .bag-header{width: 100%;float: left;padding: var(--padding-bag);padding-bottom: 5px;} .bag-heading{width: 100%;float: left;display: flex;align-items: center;} .bag-heading__icon{width: 14px;height: 16px;float: left;display: flex;justify-content: flex-start;align-items: flex-start;} .bag-heading__title{margin-left: 15px;} .bag-controls, .bag-heading{width: 100%;float: left;position: relative;} .my-bag-close{width: 20px;height: 20px;float: right;} .bag-empty{width: 100%;float: left;position: relative;padding: 20px 0px;} .bag-empty a{font-family: var(--font-family-500);} /* -- My Bag - Main */ .bag-main{width: 100%;float: left;position: relative;padding: 0px var(--padding-bag) 20px var(--padding-bag);} .bag-items{height: calc(100vh - 76px - 170px); /* header:76 , footer:170*/width: 100%;height: calc(100vh - 76px - 170px); /* header:76 , footer:170*/float: left;position: relative;overflow-x: hidden;overflow-y: auto;padding-right:5px;} .bag-item .bag-item__image img{transition: var(--trans-image);} .bag-item:hover .bag-item__image img{transform: var(--image-scaleUp);} .bag-item__product__price--regular.price--linethrough{color: var(--color-sale);text-decoration: line-through;} .bag-item__product__price--regular.price--linethrough + .bag-item__product__price--sale{margin-left: 15px;} .bag-remove-item{font-family: var(--font-family-400);font-size: var(--font-size-text);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);color: var(--color-primary, black);position: relative;z-index: 100;} .bag-free-shipping-notice{width: 100%;float: left;position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 30px;background-color: var(--color-background);margin-top:20px;} .bag-free-shipping-notice a.my-bag-close{width:auto;height:auto;margin-top:5px;text-decoration:underline;} /* -- My Bag - Footer */ .bag-footer{width: 100%;float: left;padding: var(--padding-bag);position: absolute;bottom: 0;left: 0;background-color: white;border-top:1px solid var(--color-border);} .bag-footer a{width: 100%;float: left;position: relative;text-align: center;} .bag-footer a + a{margin-top: 25px;text-decoration: underline;} .bag-footer .woocommerce-Price-amount.amount{margin-left: 3px;} /* * Loader Spinner */ .spinner_wrapper{width: 100%;height: 100px;padding: 20px;margin: 20px;float: left;position: relative;display: flex;justify-content: center;align-items: center;background-color: var(--color-background);} .spinner{width: 40px;height: 40px;border: 4px solid var(--color-border);border-bottom-color: black;border-radius: 100%;animation: spin 1s linear infinite;} @keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}} /* * Single Product - Size Guide */ .floating-container{} .size-guide-backdrop{display: none;} .size-guide-backdrop{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 8000;background-color: rgba(0,0,0,.3);} .size-guide-content{width: 100%;float: left;position: relative;transition: var(--trans);} .size-guide-content--right{min-width: 300px;width: 100%;max-width: 430px;height: 100vh;float: left;position: fixed;bottom:0;right: -100%;z-index: 8001;background-color: white;} .size-guide-content--right.open{right: 0;box-shadow: 0 -14px 14px 0 rgba(0, 0, 0, 0.2);} /* -- Size Guide - Header */ .size-guide-header{width: 100%;float: left;padding: var(--padding-bag);padding-bottom: 5px;} .size-guide-heading{width: 100%;float: left;display: flex;align-items: center;} .size-guide-heading__icon{width: 20px;height: 17px;float: left;display: flex;justify-content: flex-start;align-items: flex-start;} .size-guide-heading__title{margin-left: 15px;display: flex; align-items: center;} .size-guide-controls, .size-guide-heading{width: 100%;float: left;position: relative;} .size-guide-close{width: 20px;height: 20px;float: right;} .size-guide-intro{width: 100%;float: left;position: relative;margin-top: 25px;} /* -- Size Guide - Main */ .size-guide-main{width: 100%;float: left;position: relative;margin-top: 35px;padding: 0px var(--padding-bag);} .size-guide-grid{width: 100%;float: left;position: relative;} .size-guide-grid__item{width: 100%;float: left;position: relative;margin-bottom: 10px;display: grid;grid-template-columns: 1fr 2fr 1fr;grid-gap: 10px;} .size-guide-grid__item--head{width: 100%;float: left;position: relative;margin-bottom: 15px;} /* * Shop page - Collection */ .collection-backdrop{display: none;} .collection-backdrop{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 8000;background-color: rgba(0,0,0,.3);} .collection-content{width: 100%;float: left;position: relative;padding: var(--padding-section);padding-top: 45px;padding-bottom: 45px;transition: var(--trans);} .collection-content--bottom{width: 100%;min-height: 430px;max-height: 90vh;float: left;position: fixed;bottom: -100%;right: 0;z-index: 8001;background-color: white;box-shadow: 0 -14px 14px 0 rgba(0, 0, 0, 0.2);} .collection-controls{position: absolute;top: 0;right: 0;padding: 40px;z-index: 1;} .collection-controls .collection-close{width: 20px;height: 20px;float: right;} .collection-header{width: 100%;position: relative;z-index: 0;} .collection-header .collection-heading__title{width: 100%;float:left;position: relative;margin-bottom: 20px;} #collection-items{height: auto;max-height: 70vh;overflow: hidden;overflow-y: auto;} /* * Shop Page - My Filters */ .filters-backdrop{display: none;} .filters-backdrop{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 8000;background-color: rgba(0,0,0,.3);} .filters-content{width: 100%;float: left;position: relative;transition: var(--trans);} .filters-content--left{min-width: 300px;width: 100%;max-width: 430px;height: 100vh;float: left;position: fixed;bottom:0;left: -100%;z-index: 8001;background-color: white;} .filters-content--left.open{left: 0;box-shadow: 0 -14px 14px 0 rgba(0, 0, 0, 0.2);} /* -- My Filters -- Header */ .filters-header{width: 100%;float: left;padding: var(--padding-bag);padding-bottom: 5px;} .filters-heading{width: 100%;float: left;display: flex;align-items: center;justify-content: center;} .filters-heading__title{margin-left: 15px;text-align: center;} .filters-controls, .filters-heading{width: 100%;float: left;position: relative;} .filters-controls{width: auto;padding: 20px;position: absolute;top: 0;left: 0;z-index: 100;} .filters-close{width: 20px;height: 20px;float: left;} .filters-main{width: 100%;float: left;position: relative;padding: var(--padding-bag);} .filters-items{width: 100%;height: calc(100vh - 40px - 170px); /* header:40 , footer:170*/float: left;position: relative;overflow-x: hidden;overflow-y: auto;} .filters-items .woocommerce-widget-layered-nav-dropdown{width: 100%;margin: 0;} .filters-items select{width: 100%;float: left;padding: 10px 0px;font-size: var(--font-size-text);} .filters-items select + select{margin-top: 5px;} /* -- My Filters -- Footer */ .filters-footer{width: 100%;float: left;padding: var(--padding-bag);position: absolute;bottom: 0;left: 0;border-top:1px solid var(--color-border);} .filters-footer a{width: 100%;float: left;position: relative;text-align: center;} .filters-footer a + a{margin-top: 5px;padding: 10px;text-decoration: underline;} #apply-filters .btn__icon {display: flex;filter: invert(1);} #apply-filters .btn__icon + .btn__title{margin-left: 15px;} /************************************************************************************************************* ***** ARCHIVES *********************************************************************************************** **************************************************************************************************************/ /* * ARCHIVE PRODUCT */ .archive-product{position: relative;display: block;} .archive-product__extras, .archive-product__bottom{padding: var(--padding-arc-prod);} /* -- -- Archive Product -- Topbar Extras */ .archive-product__extras{display: grid;grid-template-columns: 5fr 1fr;position: absolute;top: 0;left: 0;width: 100%;z-index: 100;} .archive-product__badges{display: grid;justify-content: start;align-items: center;grid-template-columns: auto auto;grid-gap: 10px;} .archive-product__favorite{display: grid;justify-content: end;align-items: flex-start;} .archive-product__badge{font-family: var(--font-family-500);font-size: var(--font-size-tiny);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-large);text-transform: uppercase;background-color: var(--color-primary);color: var(--color-secondary);padding: 5px 10px;} .archive-product__badge.badge--out-of-stock{background-color: var(--color-topbar);color: var(--color-primary);} .archive-product__favorite--icon label.add-to-favorites, .archive-product__favorite--icon label.remove-from-favorites{display:flex;float: left;position: relative;z-index: 1;opacity: 0.2;transition: var(--trans);cursor: pointer;} .archive-product__favorite--icon label.add-to-favorites:hover, .archive-product__favorite--icon label.remove-from-favorites:hover{opacity: 0.6;} .archive-product__favorite--icon, .archive-product__favorite--icon label.add-to-favorites img {width: 18px;height: 15px;float: left;} .archive-product__favorite--icon input[type=checkbox] {display: none;visibility: hidden;} .archive-product__favorite--icon input[type=checkbox]:checked ~ label.add-to-favorites, .archive-product.favorite .archive-product__favorite--icon input[type=checkbox] ~ label.add-to-favorites{opacity: 1;background-image: url(../images/icon-favorites--added.svg);} /*.archive-product__favorite--icon label.remove-from-favorites{display: none;}*/ /* -- -- Archive Product -- Front */ .archive-product .archive-product__image{width: 100%;height: auto;padding-top: 100%;position: relative;overflow: hidden;} .archive-product .archive-product__image img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;transition: var(--trans-image);} /* -- -- Archive Product -- Top */ .archive-product__top{position: relative;} /* -- -- Archive Product -- Back */ .archive-product__back{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;opacity: 0;z-index: 1;transition: var(--trans-image);} .archive-product__cta{position: absolute;bottom: 0;left: 0;width: 100%;height: auto;} .archive-product__cta .archive-product__button{width: calc(100% - (2 * var(--padding-arc-prod)));float: left;position: relative;padding: var(--padding-arc-prod);margin: var(--padding-arc-prod);display: flex;justify-content: center;align-items: center;background-color: var(--color-primary);color:var(--color-secondary);font-family: var(--font-family-500);font-size: var(--font-size-small);;line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-big);text-transform: uppercase;transition: var(--trans);cursor: pointer;z-index: 100;} .archive-product[data-stock="out-of-stock"] .archive-product__button{opacity: 0.1;pointer-events: none;} .archive-product__cta .archive-product__button:hover{background-color: var(--color-accent-hover);} /* -- -- Archive Product -- Bottom */ .archive-product__price--regular, .archive-product__price--sale, .archive-product__title{font-family: var(--font-family-500);font-size: var(--font-size-text);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-big);} .archive-product__title{font-family: var(--font-family-400);margin-bottom: 5px;} .archive-product__short_description{width: 100%;height: 32px;float: left;position: relative;overflow: hidden;} .archive-product__short_description{margin-bottom: 10px;} .archive-product__price--regular.price--linethrough{color: var(--color-sale);text-decoration: line-through;} .archive-product__price--regular.price--linethrough + .archive-product__price--sale{margin-left: 15px;} /* -- -- Archive Product[Hover] */ /*.archive-product:hover .archive-product__front{;opacity: 0;}*/ /*.archive-product:hover .archive-product__front img{transform:var(--image-scaleDown);}*/ /*.archive-product:hover .archive-product__back{opacity: 1;transition-delay: 0ms;}*/ .archive-product .archive-product__back img{transform: scale(1);} .archive-product:hover .archive-product__back img{transform: var(--image-scaleUp);} .archive-product:hover .archive-product__back{opacity: 1;transition: var(--trans-image);} .archive-product .archive-product__cta{opacity: 0;transition: var(--trans);transform: translateY(0px);} .archive-product:hover .archive-product__cta{opacity: 1;transition-delay: 0ms;transform: translateY(0px);} /* New 17.10.2022 - Add to cart with quantity */ .archive-product form.cart.single-product__attribute{display:flex;flex-direction:column;gap:10px;} .archive-product .archive-product__cta_qty{display:flex;gap:10px;} .archive-product .archive-product__cta_qty .quantity input{padding: var(--padding-arc-prod);font-size: var(--font-size-small);line-height: var(--font-lh-normal);width:75px;} .archive-product .archive-product__cta{width: calc(100% - var(--padding-arc-prod) * 2);bottom:20px;left:20px;right:20px;} .archive-product .archive-product__cta .archive-product__button{margin:0;} /* [B2B] Single Product */ .archive-product .wcpa_form_item.wcpa_type_select{width: 100%;float: left;position: relative;padding: var(--padding-arc-prod);padding-right:0;margin: 0;display: flex;justify-content: space-between;align-items: center;background-color: #fff;color: var(--color-secondary);font-family: var(--font-family-500);font-size: var(--font-size-small);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-big);text-transform: uppercase;transition: var(--trans);cursor: pointer;z-index: 100;} .archive-product .wcpa_form_item.wcpa_type_select.error {border: 2px solid #FF0000;} .archive-product .single-product__attribute select{padding-right:30px;} .archive-product .single-product__attribute label{margin-right:10px;} @media(max-width:1024px){ .archive-product .wcpa_form_item.wcpa_type_select{display:none;} } .archive-product .quantity{} /* * ARCHIVE POSTS */ .archive-post{position: relative;} .archive-post__top{width: 100%;float: left;position: relative;} .archive-post .archive-post__image{width: 100%;height: auto;padding-top: 56%;position: relative;overflow: hidden;} .archive-post .archive-post__image img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;transition: var(--trans-image);} .archive-post__bottom{width: 100%;float: left;position: relative;padding: 25px 30px;} .archive-post__title{width: 100%; float: left; position: relative;margin-bottom: 15px;} .archive-post__title h5{font-family: var(--font-family-500);font-size: var(--font-size-text);text-transform: uppercase;} .archive-post__excerpt{width: 100%;float: left;margin-bottom: 25px;height: calc(18px * 2);overflow: hidden;font-family: var(--font-family-400);font-size: var(--font-size-text);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);color: var(--color-primary, black);} .archive-post__excerpt p + p{margin-top: 0;} .archive-post__excerpt p{line-height: 18px;} .archive-post__excerpt{height: auto;min-height: calc(18px * 2);max-height: calc(18px * 3);} .archive-post .link{font-family: var(--font-family-500);} .archive-post:hover img{ -webkit-transform: var(--image-scaleUp); -moz-transform: var(--image-scaleUp); -o-transform: var(--image-scaleUp); transform: var(--image-scaleUp); } .archive-post:hover .link--arrow__icon{transform: translateX(10px);} /* * ARCHIVE COLLECTIONS */ .archive-collection{position: relative;} .archive-collection__top{width: 100%;float: left;position: relative;} .archive-collection .archive-collection__image{width: 100%;height: auto;padding-top: 56%;position: relative;overflow: hidden;} .archive-collection .archive-collection__image img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;transition: var(--trans-image);} .archive-collection__bottom{width: 100%;float: left;position: relative;padding: 25px 30px;} .archive-collection__title{width: 100%; float: left; position: relative;margin-bottom: 15px;} .archive-collection__title h5{font-family: var(--font-family-500);font-size: var(--font-size-text);text-transform: uppercase;} .archive-collection__excerpt{width: 100%;float: left;margin-bottom: 25px;height: calc(18px * 2);overflow: hidden;font-family: var(--font-family-400);font-size: var(--font-size-text);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);color: var(--color-primary, black);} .archive-collection__excerpt p + p{margin-top: 0;} .archive-collection__excerpt p{line-height: 18px;} .archive-collection__excerpt{height: auto;min-height: calc(18px * 2);max-height: calc(18px * 3);} .archive-collection:hover img{ -webkit-transform: var(--image-scaleUp); -moz-transform: var(--image-scaleUp); -o-transform: var(--image-scaleUp); transform: var(--image-scaleUp); } /* * ARCHIVE PRODUCT CATEGORIES */ .archive-category{position: relative;} .archive-category__top{width: 100%;float: left;position: relative;} .archive-category .archive-category__image{width: 100%;height: auto;padding-top: 100%;position: relative;overflow: hidden;} .archive-category .archive-category__image img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;transition: var(--trans-image);} .archive-category__bottom{width: 100%;float: left;position: relative;padding: 25px 20px 20px;} .archive-category__title{margin-bottom: 25px;height: auto;overflow: hidden;font-family: var(--font-family-500);font-size: var(--font-size-text);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);color: var(--color-primary, black);text-transform: uppercase;} .archive-category:hover img{ -webkit-transform: var(--image-scaleUp); -moz-transform: var(--image-scaleUp); -o-transform: var(--image-scaleUp); transform: var(--image-scaleUp); } /* * ARCHIVE PRODUCT BAG */ .bag-item{width: 100%;display: flex;align-items: flex-start;padding: 20px 0px;border-bottom: 1px solid var(--color-border);} .bag-item:last-child{border-bottom: 0;margin-bottom: 20px} .bag-item__image{width: 150px;height: 150px;float: left;position: relative;overflow: hidden;} .bag-item__image img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;} .bag-item__details, .bag-item__product-title, .bag-item__product-price, .bag-item__product-qty{width: 100%;float: left;position: relative;} .bag-item__details{width: calc(100% - 150px);padding: 20px 10px 0px 10px;display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: flex-end;} .bag-item__product-title{margin-bottom: 15px;} .bag-item__product-price{margin-bottom: 30px;} .bag-item__product-qty{margin-bottom: 12px;} .bag-item__product-qty{font-family: var(--font-family-400);font-size: var(--font-size-text);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);color: var(--color-primary, black);} .bag-remove-item:hover{text-decoration: underline;} /* [Β2Β] ARCHIVE PRODUCT BAG */ .bag-item{padding-block:10px;} .bag-item__image{width: 80px;height: 80px;} .bag-item__details{width: calc(100% - 80px);padding: 5px 10px 0px 10px;} .bag-item__product-title{margin-bottom: 5px;} .bag-item__product-price{margin-bottom: 5px;} .bag-item__product-qty{margin-bottom: 5px;} .bag-footer .btn{padding:20px;} /* * ARCHIVE PRODUCT PROMO COLLECTION */ /* -- Collection LG*/ .archive-promo{min-height:400px;position: relative;padding:30px;overflow:hidden;} .archive-promo picture, .archive-promo picture img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: var(--trans-image);cursor: pointer;z-index: 1;pointer-events: none;} .archive-promo:hover picture img{transform: var(--image-scaleUp);} .archive-promo .btn-promo-cta{float: left;padding: 10px 20px;background-color: white;position: absolute;bottom: 30px;left: 30px;z-index: 2;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;pointer-events: none; transition: var(--trans);} .archive-promo .btn-promo-cta__icon{float: left;margin-right: 10px;} .archive-promo .btn-promo-cta__title{font-family: var(--font-family-500);font-size: var(--font-size-btn);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-medium);} /* -- Collection XS*/ #collection-items-xs{height: auto;grid-template-columns: repeat(1, 1fr);grid-gap: 0;max-height: calc(100vh - 85px - 35px);overflow: hidden;overflow-y: auto;} #collection-items-xs .collection-item {width: 100%;display: flex;align-items: flex-start;padding: 20px 0px;border-bottom: 1px solid var(--color-border);} #collection-items-xs .collection-item:last-child{margin-bottom: 20px} #collection-items-xs .collection-item__image {width: 120px;height: 120px;float: left;position: relative;display: flex;align-items: center;overflow: hidden;} #collection-items-xs .collection-item__details, #collection-items-xs .collection-item__product-title, #collection-items-xs .collection-item__product-price, #collection-items-xs .collection-item__product-info{width: 100%;float: left;position: relative;} #collection-items-xs .collection-item__details{width: calc(100% - 120px);min-height: 100%;padding-left: 15px;display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: flex-end;flex-direction: column;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;} #collection-items-xs .collection-item__product-title{margin-bottom: 15px;} #collection-items-xs .collection-item__product-price{margin-bottom: 30px;} #collection-items-xs .collection-item__product__price--regular.price--linethrough{color: var(--color-sale);text-decoration: line-through;} #collection-items-xs .collection-item__product__price--regular.price--linethrough + .collection-item__product__price--sale{margin-left: 15px;} #collection-items-xs button.collection-add-to-bag{font-family: var(--font-family-400);font-size: var(--font-size-text);line-height: var(--font-lh-body);letter-spacing: var(--font-ls-medium);background: var(--color-primary);color: var(--color-secondary);padding: var(--padding-button);} /************************************************************************************************************* ***** HELPER CLASSES ***************************************************************************************** **************************************************************************************************************/ /* -- Global */ .container-fluid--limit{max-width: var(--mxw-limit);margin: 0 auto;} .container--article{max-width: var(--mxw-normal);} /* 935px */ .container--article-sm{max-width: var(--mxw-small);} /* 555px */ .container--article-md{max-width: var(--mxw-medium);} /* 745px */ .container--article-lg{max-width: var(--mxw-limit);} /* 1600px */ .hide{display: none;} .show{display: block;} .mt-form{margin-top: 15px;} .underline{text-decoration: underline;} .uppercase{text-transform: uppercase;} .text--center{text-align: center;} .text--small{font-family: var(--font-family-400);font-size: var(--font-size-small);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-big);} /* -- Custom Scroll */ .scrolly{overflow-x: hidden;overflow-y:auto;word-wrap:break-word;} .scrolly::-webkit-scrollbar {width: 12px;height: 10px;} .scrolly::-webkit-scrollbar:vertical {background-color:var(--color-background);} .scrolly::-webkit-scrollbar-track:vertical {background-color:var(--color-background);} .scrolly::-webkit-scrollbar-thumb {height:10px;max-height:10px;} .scrolly::-webkit-scrollbar-thumb:vertical {background-color:var(--color-primary);} .scrolly::-webkit-scrollbar-thumb:active {background-color:var(--color-primary);} /* -- Custom Scroll -- My Bag*/ .scrolly--bag{overflow-x: hidden;overflow-y:auto;word-wrap:break-word;} .scrolly--bag::-webkit-scrollbar {width: 1px;} .scrolly--bag::-webkit-scrollbar:vertical {background-color:transparent;} .scrolly--bag::-webkit-scrollbar-track:vertical {background-color:transparent;} .scrolly--bag::-webkit-scrollbar-thumb {height:10px;max-height:10px;} .scrolly--bag::-webkit-scrollbar-thumb:vertical {background-color:var(--color-border);} .scrolly--bag::-webkit-scrollbar-thumb:active {background-color:var(--color-primary);} /* -- Layout Grid */ .grid{display:-ms-grid;display:grid;grid-gap: 15px;width:100%;} .grid--col{grid-template-columns: repeat(auto-fit,minmax(350px,1fr));} .grid--col-5{grid-template-columns: repeat(5,1fr);} .grid--col-4{grid-template-columns: repeat(4,1fr);} .grid--col-3{grid-template-columns: repeat(3,1fr);} .grid--col-2{grid-template-columns: repeat(2,1fr);} .layout_1x1 {grid-column: auto/span 1;grid-row: auto/span 1;-ms-grid-column-span: 1;-ms-grid-row-span: 1;} .layout_2x2 {grid-column: auto/span 2;grid-row: auto/span 2;-ms-grid-column-span: 2;-ms-grid-row-span: 2;} /* -- Hover Effect -- Menu & Tabs*/ a.a-hover{position: relative;} a.a-hover:before, a.a-hover:after{content: "";position: absolute;bottom: 0;z-index: 0;width: 0%;height: 2px;background-color: white;transition: var(--trans);} a.a-hover:before{left: 50%;} a.a-hover:after{right: 50%;} a.a-hover.active:before, a.a-hover.active:after, a.a-hover.menu-item--current:before, a.a-hover.menu-item--current:after, a.a-hover:hover:before, a.a-hover:hover:after{width: 50%;} /* -- Breadcrumb */ .breadcrumb{padding: 20px 0px;width: 100%;float: left;position: relative;background-color: white;color: var(--color-grey-light);} .breadcrumb a, .breadcrumb-link{margin: 0px 4px;font-family: var(--font-family-400);font-size: var(--font-size-small);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-normal);color: var(--color-primary);} .breadcrumb a:first-child, .breadcrumb-link:first-child{margin-left: 0;} .breadcrumb a:after, .breadcrumb-link:after{content: "/";margin-left: 8px;} .breadcrumb-link.breadcrumb-link--current{color: var(--color-grey-light);pointer-events: none;} .breadcrumb-link.breadcrumb-link--current:after{content: "";margin-right: 0;} /* -- H2 & H3 - Mini Underline Under H2 */ .subtitle-effect{padding-bottom: 12px;position: relative;} .subtitle-effect:before{content: "";width: 60px;height: 1px;position: absolute;bottom: 0;left: 0;} .subtitle-effect:before, .subtitle-effect.subtitle-effect--black:before{background-color: var(--color-primary);} .subtitle-effect.subtitle-effect--white:before{background-color: var(--color-secondary);} /* -- H4 - Section Header H4 */ section h4.section-header{width: 100%;float: left;position: relative;margin-bottom: 20px;font-family: var(--font-family-500);font-size: var(--font-size-small);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-big);text-align: center;text-transform: uppercase;} /************************************************************************************************************* ***** FORM ********************************************************************************************* **************************************************************************************************************/ .form-row{width: 100%;float: left;position: relative;margin-bottom: 10px;} .form-row:last-of-type{margin-bottom: 0;} .form-row .input-group{width: 100%;float: left;position: relative;} .form-row .mailchimp-newsletter{width: 100%;float: left;position: relative;} .form-row input, .form-row select{font-size: var(--font-size-text);} .form-row input, .form-row select{width: 100%;height: var(--height-input);float: left;padding: var(--padding-input);border: 1px solid var(--color-border-input);transition: var(--trans);} .form-row input:focus, .form-row select:focus{border-color: var(--color-primary);} .form-row--buttons{width: 100%;float: left;position: relative;margin-top: 20px;display: flex;justify-content: center;} .form-row--buttons button{width: 100%;max-width: 385px;font-family: var(--font-family-500);border: 2px solid var(--color-primary);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-big);} /* -- Input Half */ .form-row.form-row--half{display: flex;} .form-row.form-row--half input{width: 50%;} .form-row.form-row--half input + input{margin-left: 10px;} /* -- Input Password */ .input-password{width: 100%;float: left;position: relative;z-index: 1;} .input-password input {padding-right: 50px;} .input-password .input-password__icons{width: 50px;height: 50px;position: absolute;top: 0;right: 0;z-index: 1;} .input-password__icon{width: inherit;height: inherit;position: absolute;top: 0;right: 0;z-index: 2;transform: var(--trans);} .input-password__icon.active{opacity: 1;pointer-events: all;transform: var(--trans);} .input-password__icon.inactive{opacity: 0;pointer-events: none;transform: var(--trans);} .input-password__icon button{width: inherit;height: inherit;float: left;position: relative;z-index: 3;display: flex;justify-content: center;align-items: center;} /* -- Input Phone */ .input-phone .input-group {display: grid;grid-template-columns: 1fr 5fr;} .input-phone input + input{margin-left: 10px;width: calc(100% - 10px);} /* -- Input Checkbox */ .input-checkbox{width: 100%;float: left;position: relative;} .form-row.mailchimp-newsletter{width: auto;margin: 30px 0px 0px 20px;} /************************************************************************************************************* ***** MY ACCOUNT ********************************************************************************************* **************************************************************************************************************/ #my-account__intro{display: flex;justify-content: center;align-items: center;} #my-account__intro p{width: 100%;max-width: 555px;float: left;margin-bottom: 40px; text-align: center;} /* * My Account [Guest] */ #my_account__login, #my_account__register{width: 100%;float: left;position: relative;display: flex;justify-content: center;} form#my_account_login{background-color: white;} #my-account--alternative{width: 100%;float: left;position: relative;margin-top: 70px;display: flex;justify-content: center;} #my-account--forgot-pass, #my-account--return-home{width: 100%;float: left;position: relative;margin-top: 25px;text-align: center;} #my-account--forgot-pass a, #my-account--return-home a{color: var(--color-grey-light);transition: var(--trans);} #my-account--forgot-pass a:hover, #my-account--return-home a:hover;{color: var(--color-primary);} #my_account__register .woocommerce-password-strength, #my_account__register .woocommerce-password-hint{width: 100%;float: left;padding: 5px;font-family: var(--font-family-400);font-size: var(--font-size-small);} #my_account__register .woocommerce-password-strength{margin-top: 10px;} #my_account__register .woocommerce-password-hint{font-style: italic;} /* * My Account [User] */ /* Navigation Menu */ #my-account--account-menu{width: 100%;float: left;position: relative;margin-bottom: 55px;} #my-account-menu-nav{width: 100%;float: left;position: relative} #my-account-menu-nav, #my-account-menu-nav ul{display: flex;justify-content: center;align-items: center;} #my-account-menu-nav ul{float: left;list-style: none;margin:0;} #my-account-menu-nav li{float: left; display: inline-flex;white-space: nowrap;} #my-account-menu-nav li + li{margin-left: 0px;} #my-account-menu-nav li a{float: left;text-decoration: none;font-family: var(--font-family-500);text-transform: uppercase;padding: 10px 25px;transition:var(--trans);} #my-account-menu-nav li:last-of-type a{color: var(--color-grey-light);} /* Logout */ #my-account-menu-nav li:last-of-type a.a-hover:before, #my-account-menu-nav li:last-of-type a.a-hover:after{background-color: var(--color-grey-light);} /* -- MY ACCOUNT - DETAILS */ #my-account--account-details #my-account__intro{padding: 0;} #btn-change-password{font-family: var(--font-family-400);font-size: var(--font-size-btn);line-height: 1.54;letter-spacing: var(--font-ls-medium);float: left;margin-top: 15px;color: var(--color-grey-light);text-decoration: underline;transition: var(--trans);} #btn-change-password:hover{color: var(--color-primary);} #my-account--change-password{display: none;} #my-account--change-password .input-password + .input-password{margin-top: 10px;} #my-account--account-details .form-row--buttons{justify-content: flex-end;} #my-account--account-details .form-row--buttons button{width: 200px;} /* -- MY ACCOUNT - WISHLIST */ #my-account--wishlist .my-account--wishlist__empty{display: none;padding: 30px 0px;} #my-account--wishlist .my-account--wishlist__empty a{font-family: var(--font-family-500);} #my-account--wishlist-grid{width: 100%;float: left;position: relative;} #my-account--wishlist .archive-product__favorite--icon label.add-to-favorites{display: none;} #my-account--wishlist .archive-product__favorite--icon label.remove-from-favorites{display: block;} #my-account--wishlist .archive-product__favorite--icon label.remove-from-favorites{opacity: 0.5;cursor: pointer;transition: var(--trans);} #my-account--wishlist .archive-product__favorite--icon label.remove-from-favorites:hover{opacity: 1;} /* -- MY ACCOUNT - MY ORDERS */ /*.grid-td:nth-child(even){background-color: #F5F5F5;}*/ /*.grid-td:nth-child(odd){background-color: #E5E5E5;}*/ .grid-td{padding: 15px;} .grid-td:first-of-type{padding-left: 0;} .grid-td:last-of-type{padding-right: 0;} .grid-td--val a{text-decoration: underline;color: var(--color-grey-light);} .grid--col-orders{grid-gap: 0;grid-template-columns: 1fr 2fr repeat(3, 1.2fr) 2fr;} /* 8.6fr */ .grid--col-orders-prod{grid-gap: 0;grid-template-columns: 3.2fr repeat(2, 1.2fr) 2fr;} #my-account--orders{width: 100%;float: left;position: relative;} #orders__head {position: sticky;top: 100px;z-index: 100;background: white;} #orders__head label{font-size: var(--font-size-text);line-height: var(--font-lg-body);letter-spacing: var(--font-ls-medium);text-transform: none;} .orders-item{width: 100%;float: left;position: relative;padding-top: 10px;padding-bottom: 25px;border-top: 1px solid var(--color-border);} .orders-item:last-child{border-bottom: 1px solid var(--color-border);} .orders-item:only-child{border-bottom: 0} .orders-item--details{width: 100%;height: auto;float: left;position: relative;background-color: white;display: grid;grid-template-columns: 1fr 7.6fr; /* 8.6fr */} .orders-item--details{width: 100%;float: left;position: relative;padding: 30px 0px;margin-top: 5px;} .orders-item--details .orders-item--products{grid-area: 1 / 2 / 2 / 3;padding: 0px;position: relative;z-index: 1;} .orders-item--details .orders-item--products:before{content: "";position: absolute;top: -30px;left: -25px;width: calc(100% + 25px);height: calc(100% + 30px + 30px);background-color: var(--color-background-dark);z-index: -1;} .orders-item--details .orders-item--products-header{width: 100%;float: left;} .orders-item--details .orders-item--products-header .grid-td{padding-top: 5px;padding-bottom: 5px;} .orders-item--details .orders-item--products-header label, .orders-item--details .orders-item--product span label{font-family: var(--font-family-400);font-size: var(--font-size-text);color: var(--color-grey-light);text-transform: none;} .orders-item--details .orders-item--products .grid-td:first-of-type{padding-left: 15px;} .orders-item--details .orders-item--products .grid-td:last-of-type{padding-right: 15px;} .orders-item--details .orders-item--product .grid-td{padding-top: 10px;padding-bottom: 10px;} /* -- MY ACCOUNT - MY ADDRESSES */ #address_book_grid{} .address_book__item, .address_book__header, .address_book__body, .address_book__body > div{width: 100%;float: left;position: relative;} .address_book__header{margin: 15px 0px;padding-bottom:15px;border-bottom: 1px solid var(--color-border);} .address_book__header label{font-size: var(--font-size-small);} .address_book__header .btn-edit-address{padding: 0px 15px;float: right;color: var(--color-grey-light);text-decoration: underline;transition: var(--trans);} .address_book__header .btn-edit-address:hover{color: var(--color-primary);} .address_book__body{padding: 40px 30px;background-color: rgba(222,222,222,0.3);} .address_book__body > div{margin-bottom: 10px;} .address_book__body > div:last-of-type{margin-bottom: 0;} /************************************************************************************************************* ***** WOOCOMMERCE ********************************************************************************************* **************************************************************************************************************/ /* * WooCommerce Global */ /* -- WC Sub Headers */ .wc_sub_header{width: 100%;float: left;padding: 15px 0px;margin-bottom: 15px;position: relative;font-size: var(--font-size-small);line-height: var(--font-lh-select);letter-spacing: var(--font-ls-big);border-bottom: 1px solid var(--color-border);} .woocommerce-info{padding: 30px;} #wc_checkout__header .woocommerce-info{padding: 0px;} /* -- WC Info */ .woocommerce-info{width: 100%;float: left;position: relative;} .woocommerce-info a{text-decoration: underline;} .woocommerce-info a:hover{} /* -- WC Buttons */ .woocommerce-error a, .woocommerce-message a, .wc_cart_grid__footer button, .shipping-calculator-form button, .wc-proceed-to-checkout a{position: relative;float: left;padding: var(--padding-button);font-family: var(--font-family-500);font-size: var(--font-size-btn);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-big);display: flex;justify-content: center;align-items: center;flex-wrap: wrap;border: 1px solid;transition: var(--trans);} .woocommerce-error a:hover, .woocommerce-message a:hover, .wc_cart_grid__footer button:hover, .shipping-calculator-form button:hover, .wc-proceed-to-checkout a:hover{background-color: var(--color-primary);border-color: var(--color-primary);color: var(--color-secondary);} /* -- WC Buttons -- Dark */ .wc_cart_grid__footer button[name="update_cart"], .shipping-calculator-form button, .wc-proceed-to-checkout a{background-color: var(--color-primary);border-color: var(--color-primary);color: var(--color-secondary);} .wc_cart_grid__footer button[name="update_cart"]:hover, .shipping-calculator-form button:hover, .wc-proceed-to-checkout a:hover{background-color: var(--color-accent-hover);border-color: var(--color-accent-hover);opacity: 1;} /* -- WC Buttons -- Dark [disabled] */ .wc_cart_grid__footer button[name="update_cart"][disabled]{opacity: 0.3;} .wc_cart_grid__footer button[name="update_cart"][disabled]:hover{opacity: 0.5;} /* -- WC Input */ .wc_cart_grid__footer input, .cart_td.product-quantity input{font-family: var(--font-family-400);font-size: var(--font-size-text);line-height: var(--font-lh-normal);letter-spacing: var(--font-ls-medium);padding: var(--padding-input);border: 1px solid var(--color-border);transition: var(--trans);} .wc_cart_grid__footer input:focus, .cart_td.product-quantity input:focus{border-color: var(--color-primary);} /* * WooCommerce Notification */ .woocommerce-error, .woocommerce-message{width: 100%;float: left;position: relative;padding: 30px;background-color: var(--color-background-dark);display: flex;align-items: center;justify-content: space-between;} .woocommerce-error::before, .woocommerce-message::before{color: var(--color-primary);} .woocommerce-error a, .woocommerce-message a{float: right;order: 2;} .woocommerce-notices__text{float: left;order: 1;max-width: 75%;} .product-remove::before, .product-thumbnail::before, .product-name::before, .product-price::before, .product-quantity::before{content: "";} .woocommerce-info .bbloomer_free_shipping_cart_notice{max-width:1100px;margin:0 auto;background:black;color:white;padding:20px 40px;text-align:center;} .woocommerce-info .bbloomer_free_shipping_cart_notice a{color:white;} /************************************************************************************************************* ***** PLUGINS ************************************************************************************************ **************************************************************************************************************/ /* -- Contact Form 7 */ .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{border: 0;padding: 0;margin: 0;} .wpcf7 .wpcf7-not-valid-tip{float: left;margin-top: 5px;margin-bottom: 15px;padding: 0px 5px;} .wpcf7 .ajax-loader, .wpcf7 .wpcf7-spinner{width: 100% !important;height: 50px !important;position: absolute !important;border-radius: 0 !important;margin: 0 !important;} .wpcf7 .ajax-loader::before, .wpcf7 .wpcf7-spinner::before{top: calc(50% - 3px) !important;left: calc(50% - 3px) !important;} /* -- Wishlist */ .iziToast{background-color: white !important;border: 1px solid var(--color-border) !important;min-height: 0 !important;padding: 0 !important;border-radius: 0 !important;font-family: var(--font-family-400) !important;font-size: var(--font-size-text) !important;} .iziToast.fadeInUp{animation: none !important;} .iziToast b{font-family: var(--font-family-500) !important;font-weight: 500 !important;} .iziToast:after, .iziToast .iziToast-icon:before{content: unset !important;} .iziToast > .iziToast-body {min-height: 0 !important;display: flex;justify-content: center;align-items: center;padding: 40px 80px !important;margin: 0;} .iziToast, .iziToast > .iziToast-body .iziToast-texts, .iziToast > .iziToast-body .iziToast-message{margin: 0 !important;} .iziToast .iziToast-icon{width: 16px !important;height: 14px !important;position: relative !important;top: 0 !important;margin-top: 0 !important;margin-right: 15px !important;} .iziToast .iziToast-icon:after{content: "";width: 16px;height: 14px;float: left;position: relative;background-image: url('../images/icon-favorites.svg');background-size: contain;background-position: center;background-repeat: no-repeat;} .iziToast .iziToast-message{color: var(--color-primary) !important;} .iziToast > .iziToast-close{background-image: url('../images/icon-close.svg') !important;} .iziToast > .iziToast-progressbar{display: none;} /* -- Search */ .dgwt-wcas-suggestions-wrapp.js-dgwt-wcas-initialized{margin-top: 18px !important;} .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input{border-radius: 0 !important;border: 0 !important;font-family: var(--font-family-400) !important;font-size: var(--font-size-text, 13px) !important;padding: 10px 40px 10px 40px !important;} .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus{box-shadow: none !important;} .dgwt-wcas-preloader{right: unset !important;left: 0 !important;} .dgwt-wcas-no-submit .dgwt-wcas-ico-magnifier{right: 0 !important;left: unset !important;margin-right: 10px !important;opacity: 1 !important;max-width: 16px !important;} .dgwt-wcas-st{color: var(--color-primary) !important; font-size: var(--font-size-text, 13px) !important;line-height: var(--font-lh-body) !important;} .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::-webkit-input-placeholder {color: var(--color-grey-light);} .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:-ms-input-placeholder {color: var(--color-grey-light);} .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {color: var(--color-grey-light);} /* -- Dropdown */ .dgwt-wcas-search-wrapp{border: none !important;} a.dgwt-wcas-suggestion.dgwt-wcas-suggestion-product{padding-left: 20px !important;padding-right: 20px !important;} a.dgwt-wcas-suggestion.dgwt-wcas-suggestion-product:first-child{margin-top: 10px !important;} a.dgwt-wcas-suggestion.js-dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-more{padding: 20px !important;background-color: var(--color-primary) !important;color: var(--color-secondary) !important;} a.dgwt-wcas-suggestion.js-dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-more:hover{background-color: var(--color-accent-hover) !important;} .no_results_search {grid-column: auto/span 2;grid-row: auto/span 1;padding: 20px;text-align: center;} /* -- Cookies */ #cookie-law-info-bar{box-shadow: none !important;} .cli-tab-container h4, .cli-tab-container h1, #cookie-law-info-bar .cli_messagebar_head{font-size: 14px !important;} .cli-tab-container p, .cli-privacy-content-text, .cli-tab-header a.cli-nav-link, .wt-cli-cookie-description, #cookie-law-info-bar .cli-bar-message{font-size: var(--font-size-text) !important;} .cli-modal .cli-switch input:checked + .cli-slider, .cli-modal .cli-tab-footer .wt-cli-privacy-accept-btn{background-color: var(--color-primary);} /************************************************************************************************************* ************************************************************************************************************** ***** MEDIA QUERIES ****************************************************************************************** ************************************************************************************************************** **************************************************************************************************************/ @media(max-width: 991px){ /************************************************************************************************************* ***** COMPONENTS ********************************************************************************************* **************************************************************************************************************/ body{padding-top: 100px;} blockquote{margin: 30px 0px;} /* * Header */ header{margin-bottom: 0;} #header-main{padding: 0px 15px 0px;} /* * * Header Mobile * */ /* -- -- -- Header XS - Topbar -- Preferencies */ #dropdown-menu--topbar{grid-template-columns: 2fr 1fr;} /* * Footer */ footer{padding-left: 20px;padding-right: 20px;} footer .container-fluid--limit{padding: 75px 0px 55px;} footer .logo{margin-bottom: 25px;} footer .logo img{height: 32px;} footer li + li, footer div + div{margin-top: 5px;} footer #footer-info label{display: none;} footer #footer-info{order: 2;} footer #footer-menu, footer #dropdown-menu--footer{order: 1;} /* * Secondary Pages Header - Terms of use, My Account, etc. */ section#secondary_header .secondary_header__title, section#secondary_header .secondary_header__subtitle, section#secondary_header .secondary_header__effect{justify-content: flex-start;} /* -- CASE: Variation Image Large */ section#secondary_header.case-image.case-image--large{min-height: 400px;align-content: flex-end;} /* * * Floating Content * */ /* -- My Bag */ .bag-header{width: 100%;float: left;padding: var(--padding-bag);} .bag-heading{justify-content: center;margin-top: 10px;} .bag-heading__icon{width: 14px;height: 16px;float: left;display: flex;justify-content: flex-start;align-items: flex-start;} .bag-heading__title{text-align: center;font-size: var(--font-size-tiny);} .bag-controls{width: auto;padding: 20px;position: absolute;top: 0;left: 0;z-index: 100;} .my-bag-close{float: left;} .bag-items{height: calc(100vh - 56px - 129px); /* header:56 , footer:129*/} /* -- Size Guide */ .size-guide-header{width: 100%;float: left;padding: var(--padding-bag);} .size-guide-heading{justify-content: center;margin-top: 10px;} .size-guide-heading__icon{width: 20px;height: 17px;float: left;display: flex;justify-content: flex-start;align-items: flex-start;} .size-guide-heading__title{text-align: center;font-size: var(--font-size-tiny);} .size-guide-controls{width: auto;padding: 20px;position: absolute;top: 0;left: 0;z-index: 100;} .size-guide-close{float: left;} .size-guide-main{margin-top: 5px;} .size-guide-grid{height: calc(100vh - 134px - 50px); /* header:134 , footer:0*/} .size-guide-grid__item--head {position: sticky;top: 0;background-color: white;padding-bottom: 5px;z-index: 1;} /* -- Filters */ .filters-heading{margin-top: 10px;} /* -- Collection */ .collection-content{padding-top: 35px;padding-bottom: 35px;bottom: 0;right: -100%;} .collection-content--bottom{height: 100vh;max-height: 100vh;} .collection-controls{padding: 20px;right: unset;left: 0;} .collection-header .collection-heading__title{margin-bottom: 15px;text-align: center;} /************************************************************************************************************* ***** ARCHIVES *********************************************************************************************** **************************************************************************************************************/ /* * ARCHIVE PRODUCTS */ .archive-product__badge{font-size: 10px;} .archive-product__price--regular, .archive-product__price--sale, .archive-product__title{font-size: var(--font-size-small);} .archive-product__title{margin-bottom: 10px;} .archive-product__cta .archive-product__button{display: none;} .archive-product__cta .archive-product__cta_qty{display:none;} .archive-promo{height: 100vw;min-height: 50vw;max-height: 500px;padding: 20px;} .archive-promo .btn-promo-cta{left: 20px;bottom: 20px;} /* * ARCHIVE POSTS */ .archive-post__bottom{padding: 35px 0px;} .archive-post__bottom .archive-post__excerpt{height: auto;} /************************************************************************************************************* ***** FORM ********************************************************************************************* **************************************************************************************************************/ /* -- Input Half */ .form-row.form-row--half{display: flex;flex-wrap: wrap;} .form-row.form-row--half input{width: 100%;} .form-row.form-row--half input + input{margin-left: 0px;margin-top: 10px;} /* -- Input Phone */ .input-phone .input-group {display: grid;grid-template-columns: 1fr 2fr;} /************************************************************************************************************* ***** HELPER CLASSES ***************************************************************************************** **************************************************************************************************************/ /* -- Layout Grids */ .grid--col-5{grid-template-columns: repeat(2,1fr);} .grid--col-4{grid-template-columns: repeat(2,1fr);} .grid--col-3{grid-template-columns: repeat(2,1fr);} .grid--col-2{grid-template-columns: repeat(2,1fr);} .layout_2x2 {grid-column: auto/span 2;grid-row: auto/span 2;-ms-grid-column-span: 2;-ms-grid-row-span: 2;} /* -- H4 - Section Header H4 */ section h4.section-header{font-size: var(--font-size-tiny);} /************************************************************************************************************* ***** MY ACCOUNT ********************************************************************************************* **************************************************************************************************************/ section#my_account{padding-top: 25px;padding-bottom: 20px;} #my-account__intro p{margin-top: 30px;} #my-account--account-details #my-account__intro{padding-left: 20px;padding-right: 20px;} /* * My Account [User] */ /* Navigation Menu */ #my-account--account-menu{width: calc(100% + 40px);left: -20px;margin-bottom: 10px;} #my-account-menu-nav, #my-account-menu-nav ul{justify-content: flex-start;overflow-x: auto;} #my-account-menu-nav ul{padding-left: 20px;padding-right: 20px;} #my-account-menu-nav li a{padding: 10px;} #my-account-menu-nav li + li{margin-left: 10px;} #my-account--account-details .form-row--buttons{justify-content: center;} #my-account--account-details .form-row--buttons button{width: 100%;} /* -- MY ACCOUNT - WISHLIST */ #my-account--wishlist-grid{width: calc(100% + 40px);left: -20px;} /* -- MY ACCOUNT - MY ORDERS */ .orders-item{padding: 30px 0px 40px;} .orders-item:first-child{border-top: 0;} .orders-item:last-child{border-bottom: 0;} .grid-td{grid-gap: 0;padding: 10px;} .grid-td:first-of-type, .grid-td:nth-child(4){padding-left: 0;} .grid-td:last-of-type, .grid-td:nth-child(3){padding-right: 0;} .grid-td--val{font-family: var(--font-family-500);margin-top: 10px;} .grid--col-orders{grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr);} .grid--col-orders-prod{width: 100%;float: left;position: relative;display: block;} .orders-item--details{grid-template-columns: 1fr;padding-top: 0;margin-top: 10px;padding-bottom: 0;} .orders-item--details .grid-td{width: 33.33334%;float: left;} .orders-item--details .grid-td:first-of-type{width: 100%;} .orders-item--details .grid-td--val{font-family: var(--font-family-400);width: 100%;float: left;margin-top: 3px;} .orders-item--details .orders-item--products:before{top: 0;left: 0;width: 100%;height: 100%;} .orders-item--details .orders-item--products{padding: 10px 0px;} .orders-item--details .orders-item--products .grid-td:first-of-type{padding-left: 20px;padding-right: 20px;padding-bottom: 0;} .orders-item--details .orders-item--product .grid-td{padding-left: 20px; padding-right: 20px;} .orders-item--details .orders-item--product + .orders-item--product{margin-top: 0px;} .orders-item--details .orders-item--product .grid-td span label{display: block;width: 100%;float: left;margin-bottom: 0px;} .orders-item--details .orders-item--product .grid-td:first-child span label{margin-bottom: 15px;} .orders-item--details .orders-item--product ~ .orders-item--product .grid-td:first-child span label{display: none;} /* -- MY ACCOUNT - MY ADDRESSES */ #my-account--address-book{padding-bottom: 55px;} #address_book_grid{grid-template-columns: 1fr;grid-gap: 30px;} .address_book__header label{padding-left: 15px;} /************************************************************************************************************* ***** WOOCOMMERCE ********************************************************************************************* **************************************************************************************************************/ /* * WooCommerce Global */ /* -- WC Sub Headers */ .wc_sub_header{font-size: var(--font-size-tiny);} /* * WooCommerce Notification */ .woocommerce-info{} .woocommerce-error, .woocommerce-message{flex-wrap: wrap;justify-content: flex-end;padding: 20px;} .woocommerce-notices__text{width: 100%;max-width: 100%;margin-bottom: 10px;} } /************************************************************************************************************* ***** HEADER WITHOUT TOPBAR ********************************************************************************** **************************************************************************************************************/ /*07.11.2022*/ :root{--height-header:120px;} body{padding-top: 120px;} header.sticky{top: 0;transition: var(--trans);} @media(max-width:1200px){ :root{--height-header:88px;} body{padding-top: var(--height-header,100px);} } @media(max-width:767px){ :root{--height-header:68px;} body{padding-top: var(--height-header);} }