/* ---------------------------------------------------------------------- */
/*  Settings -> Variables
/* ---------------------------------------------------------------------- */

:root {

    /* Colors */

    --main-bg-color: #FFF;
    --contrast-bg-color: #000;
    --secondary-bg-color: #F8F7F6;
    --tertiary-bg-color: #EAEAEA;
    --quaternary-bg-color: #BBB;

    --main-font-color: #000;
    --contrast-font-color: #E5E5E5;
    --secondary-font-color: #191919;
    --tertiary-font-color: #FFF;
    --quaternary-font-color: #707070;

    --error-color: rgba(242, 102, 102, .3);


    /* Typography */

    --main-font-family: 'Roboto', sans-serif;
    --secondary-font-family: 'Playfair Display', serif;

    --base-font-size: 16px;
    --nav-font-size: 0.9375rem; /* 15px */
    --smaller-font-size: 0.750rem; /* 12px */
    --small-font-size: 0.813rem; /* 13px */
    --big-font-size: 1.125rem; /* 18px */
    --bigger-font-size: 1.875rem; /* 30px */
    --biggest-font-size: 3.5vw;


    /* Box Model */

    --spacer: 36px;
    --spacer-2x: 72px;
    --logo-width: 250px;
    --header-height: 130px;
    --footer-height: 193px;
    --drawer-width: 33vw;

}

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

    :root {
        --drawer-width: 40vw;
    }

}

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

    :root {
        --bigger-font-size: 1.175rem;
        --biggest-font-size: 10vw;

        --spacer: 20px;
        --spacer-2x: 50px;
        --logo-width: 160px;
        --footer-height: 149px;
        --header-height: 124px;
    }

}

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

    :root {
        --spacer-2x: 40px;
        --drawer-width: 85vw;
    }

}

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

    :root {
        --logo-width: 140px;
    }

}


/* ---------------------------------------------------------------------- */
/*  Vendor –> Hamburgers
           -> https://jonsuh.com/hamburgers
/* ---------------------------------------------------------------------- */

.hamburger{padding:15px;display:inline-block;cursor:pointer;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}.hamburger:hover{opacity:.7}.hamburger-box{width:40px;height:24px;display:inline-block;position:relative}.hamburger-inner{display:block;top:50%;margin-top:-2px}.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{width:40px;height:4px;background-color:#000;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}.hamburger-inner::after,.hamburger-inner::before{content:'';display:block}.hamburger-inner::before{top:-10px}.hamburger-inner::after{bottom:-10px}.hamburger--squeeze .hamburger-inner{transition-duration:75ms;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze .hamburger-inner::before{transition:top 75ms .12s ease,opacity 75ms ease}.hamburger--squeeze .hamburger-inner::after{transition:bottom 75ms .12s ease,transform 75ms cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze.is-active .hamburger-inner{transform:rotate(45deg);transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.hamburger--squeeze.is-active .hamburger-inner::before{top:0;opacity:0;transition:top 75ms ease,opacity 75ms .12s ease}.hamburger--squeeze.is-active .hamburger-inner::after{bottom:0;transform:rotate(-90deg);transition:bottom 75ms ease,transform 75ms .12s cubic-bezier(.215,.61,.355,1)}
button.hamburger:hover, button.hamburger:focus {background: none!important; outline: none;}
button.hamburger {width: auto!important;}
/* ---------------------------------------------------------------------- */
/*  Vendor –> Flickity v2.1.2
           -> https://flickity.metafizzy.co
/* ---------------------------------------------------------------------- */

.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:#333}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}


/* ---------------------------------------------------------------------- */
/*  Vendor –> jQuery Confirm v1.7.5
           -> Author: boniface pereira
           -> http://craftpip.github.io/jquery-confirm/
/* ---------------------------------------------------------------------- */

 body.jconfirm-noscroll{overflow:hidden!important}@-webkit-keyframes jconfirm-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes jconfirm-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.jconfirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999999;font-family:inherit;overflow:hidden}.jconfirm .jconfirm-bg{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;-webkit-transition:all .4s;transition:all .4s}.jconfirm .jconfirm-bg.seen{opacity:1}.jconfirm .jconfirm-scrollpane{position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto}.jconfirm .jconfirm-box{background:#F9F9F9;position:relative}.jconfirm .jconfirm-box div.closeIcon{height:20px;width:20px;position:absolute;top:6px;right:12px;cursor:pointer;opacity:.6;text-align:center;display:none;font-size:29px;z-index: 9999;}.jconfirm .jconfirm-box div.closeIcon:hover{opacity:1}.jconfirm .jconfirm-box div.title{font-size:24px;font-weight:bold;padding:30px 30px 0px 30pxs}.jconfirm .jconfirm-box div.content{padding:30px}.jconfirm .jconfirm-box div.content:empty{height:40px;position:relative;opacity:.6}.jconfirm .jconfirm-box div.content:empty:before{content: '\f29c';height:20px;width:20px;font-family:'Ionicons';position:absolute;left:50%;margin-left:-45px;-webkit-animation:jconfirm-rotate 1s infinite;animation:jconfirm-rotate 1s infinite}.jconfirm .jconfirm-box div.content:empty:after{content:'...';position:absolute;left:50%;margin-left:-15px}.jconfirm .jconfirm-box .buttons{padding:10px 15px}.jconfirm .jconfirm-box .buttons button+button{margin-left:5px}.jconfirm .jquery-clear{clear:both}.jconfirm.white .jconfirm-bg{background-color:rgba(0,0,0,0.2)}.jconfirm.white .jconfirm-box .buttons{float:right}.jconfirm.white .jconfirm-box .buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.white .jconfirm-box .buttons button.btn-default{box-shadow:none;color:#333}.jconfirm.white .jconfirm-box .buttons button.btn-default:hover{background:#ddd}.jconfirm.black .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.black .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.2);background:#444;border-radius:5px;color:white}.jconfirm.black .jconfirm-box .buttons{float:right}.jconfirm.black .jconfirm-box .buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white}.jconfirm.black .jconfirm-box .buttons button.btn-default{box-shadow:none;color:#fff;background:0}.jconfirm.black .jconfirm-box .buttons button.btn-default:hover{background:#828282}.jconfirm.hololight .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.hololight .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.4);border-radius:2px;overflow:hidden}.jconfirm.hololight .jconfirm-box div.title{font-weight:inherit;border-bottom:solid 2px #76cfdf;color:#76cfdf}.jconfirm.hololight .jconfirm-box .buttons{border-top:solid 2px #e7e7e7;width:100%;float:none;padding:0}.jconfirm.hololight .jconfirm-box .buttons button{margin:0;border:0;background:#fff;border-radius:0;width:50%;padding:13px;font-size:16px;font-weight:bold;color:#666}.jconfirm.hololight .jconfirm-box .buttons button+button{border-left:solid 2px #e7e7e7}.jconfirm.holodark .jconfirm-bg{background-color:rgba(0,0,0,0.5)}.jconfirm.holodark .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.4);border-radius:2px;background:#333;overflow:hidden}.jconfirm.holodark .jconfirm-box div.closeIcon{color:white}.jconfirm.holodark .jconfirm-box div.title{font-weight:inherit;border-bottom:solid 2px #76cfdf;color:#76cfdf}.jconfirm.holodark .jconfirm-box div.content{color:white}.jconfirm.holodark .jconfirm-box .buttons{border-top:solid 2px rgba(255,255,255,0.2);width:100%;float:none;padding:0}.jconfirm.holodark .jconfirm-box .buttons button{margin:0;border:0;background:#333;border-radius:0;width:50%;padding:13px;font-size:16px;font-weight:bold;color:#fff;text-shadow:none}.jconfirm.holodark .jconfirm-box .buttons button+button{border-left:solid 2px rgba(255,255,255,0.2)}.jconfirm .jconfirm-box.hilight{box-shadow:0 0 20px red}.jconfirm{-webkit-perspective:400px;perspective:400px}.jconfirm .jconfirm-box{opacity:1;-webkit-transition-property:-webkit-transform,opacity,box-shadow;transition-property:transform,opacity,box-shadow}.jconfirm .jconfirm-box.anim-top,.jconfirm .jconfirm-box.anim-left,.jconfirm .jconfirm-box.anim-right,.jconfirm .jconfirm-box.anim-bottom,.jconfirm .jconfirm-box.anim-opacity,.jconfirm .jconfirm-box.anim-zoom,.jconfirm .jconfirm-box.anim-scale,.jconfirm .jconfirm-box.anim-none,.jconfirm .jconfirm-box.anim-rotate,.jconfirm .jconfirm-box.anim-rotatex,.jconfirm .jconfirm-box.anim-rotatey,.jconfirm .jconfirm-box.anim-scaley,.jconfirm .jconfirm-box.anim-scalex{opacity:0}.jconfirm .jconfirm-box.anim-rotate{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.jconfirm .jconfirm-box.anim-rotatex{-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-rotatey{-webkit-transform:rotatey(90deg);-ms-transform:rotatey(90deg);transform:rotatey(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-scaley{-webkit-transform:scaley(1.5);-ms-transform:scaley(1.5);transform:scaley(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-scalex{-webkit-transform:scalex(1.5);-ms-transform:scalex(1.5);transform:scalex(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.jconfirm .jconfirm-box.anim-top{-webkit-transform:translate(0px,-100px);-ms-transform:translate(0px,-100px);transform:translate(0px,-100px)}.jconfirm .jconfirm-box.anim-left{-webkit-transform:translate(-100px,0px);-ms-transform:translate(-100px,0px);transform:translate(-100px,0px)}.jconfirm .jconfirm-box.anim-right{-webkit-transform:translate(100px,0px);-ms-transform:translate(100px,0px);transform:translate(100px,0px)}.jconfirm .jconfirm-box.anim-bottom{-webkit-transform:translate(0px,100px);-ms-transform:translate(0px,100px);transform:translate(0px,100px)}.jconfirm .jconfirm-box.anim-zoom{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.jconfirm .jconfirm-box.anim-scale{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.jconfirm .jconfirm-box.anim-none{display:none}.jconfirm.supervan .jconfirm-bg{background-color:rgba(54,70,93,0.95)}.jconfirm.supervan .jconfirm-box{background-color:transparent}.jconfirm.supervan .jconfirm-box div.closeIcon{color:white}.jconfirm.supervan .jconfirm-box div.title{text-align:center;color:white;font-size:28px;font-weight:normal}.jconfirm.supervan .jconfirm-box div.content{text-align:center;color:white}.jconfirm.supervan .jconfirm-box .buttons{text-align:center}.jconfirm.supervan .jconfirm-box .buttons button{font-size:16px;border-radius:2px;background:#303f53;text-shadow:none;border:0;color:white;width:25%;padding:10px}


/* ---------------------------------------------------------------------- */
/*  Vendor –> Custom Select
/* ---------------------------------------------------------------------- */

.custom-select{width:100%;padding:0;position:relative}.custom-select select{width:100%;margin:0;padding:6px 10px;background:0 0;border:1px solid transparent;border-radius:0;font-size:var(--small-font-size);line-height:1.3;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;appearance:none;-webkit-appearance:none;cursor:pointer}.custom-select::after{content:'\f3d0';width:9px;height:8px;margin-top:-12px;font-family:Ionicons;font-size:19px;font-weight:700;color:var(--main-font-color);position:absolute;top:50%;right:14px;z-index:2;pointer-events:none}.custom-select select:focus{background-color:transparent;border:none;color:#222;outline:0}.custom-select option{font-weight:400}.custom-select::after,x:-o-prefocus{display:none}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.custom-select select::-ms-expand{display:none}.custom-select select:focus::-ms-value{background:0 0;color:#222}}@-moz-document url-prefix(){.custom-select{overflow:hidden}.custom-select select{width:120%;width:-moz-calc(100% + 3em);width:calc(100% + em)}}.custom-select select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}
select{ outline: 0;}


/* ---------------------------------------------------------------------- */
/*  Generic –> Reset -> normalize.css v8.0.0
/*                   -> http://github.com/necolas/normalize.css
/* ---------------------------------------------------------------------- */

button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.5;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}


/* ---------------------------------------------------------------------- */
/*  Generic –> Box Sizing
/* ---------------------------------------------------------------------- */

*, *:before, *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}


/* ---------------------------------------------------------------------- */
/*  Generic –> Shared
/* ---------------------------------------------------------------------- */

html, body {font-family: var(--main-font-family); font-size: var(--base-font-size); line-height: 1.4; font-weight: 300; color: var(--main-font-color);}
body {background: var(--main-bg-color);} 


hr {display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc;}

a {color: var(--main-font-color); text-decoration: none; transition: all 0.6s ease 0s;}
p a {text-decoration: underline;}

.text, .text p {line-height: 1.875rem;}

p:first-child {margin-top: 0;}
p:last-child {margin-bottom: 0;}

h1 {margin: 0; font-family: var(--secondary-font-family); font-size: var(--biggest-font-size); font-weight: 400; line-height: 1;}
h2 {margin: 0; font-family: var(--secondary-font-family); font-size: var(--bigger-font-size); font-weight: 400; line-height: 1.2;}
h3 {margin: 0; font-family: var(--secondary-font-family); font-size: var(--big-font-size); font-weight: 400; line-height: 1.2;}
h4 {margin: 0; font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; text-transform: uppercase; line-height: 1.2;}
h5 {margin: 0; font-family: var(--main-font-family); font-size: var(--small-font-size); font-weight: 300; text-transform: uppercase; line-height: 1.2;}

.content h1, .content h2, .content h3, .content h4, .content h5 {margin: 0 0 10px;}

.wrap-pad {padding-right: var(--spacer); padding-left: var(--spacer);}
h4.wrap-pad, h5.wrap-pad {margin: 0; text-align: center;}
.wrap-small {width: 80%; margin: 0 auto;}
.separating-pad {padding-top: var(--spacer-2x); padding-bottom: var(--spacer-2x);}
.pad-top {padding-top: var(--spacer);}
.pad-bottom {padding-bottom: var(--spacer);}
.pad-double-top {padding-top: var(--spacer-2x);}
.pad-double-bottom {padding-bottom: var(--spacer-2x);}

main {min-height: calc(100vh - var(--header-height) - var(--footer-height)); padding-top: var(--spacer); padding-bottom: var(--spacer);}
.has-banner main {padding-top: 0;}

.grayscale {filter: grayscale(80%); transition: all 0.6s ease 0s; }
.grayscale:hover {filter: grayscale(50%);}

.mobile {display: none !important;}
.check-mobile {display: none;}
img {max-width: 100%;}
@media all and (max-width: 1160px) {

    .no-mobile {display: none !important;}
    .mobile {display: block !important;}

    .check-mobile {display: block;}

}

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

    .wrap-small {width: 100%; margin: 0 auto; padding-right: var(--spacer); padding-left: var(--spacer);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Header
/* ---------------------------------------------------------------------- */

.header-main {height: var(--header-height); background: var(--main-bg-color); border-bottom: 1px solid var(--tertiary-bg-color); position: -webkit-sticky; position: sticky; top: 0; right: 0; left: 0; z-index: 3;}
.has-banner .header-main {border: none;}

.top-bar {height: 40px; padding: 0 var(--spacer); background: var(--contrast-bg-color); color: var(--contrast-font-color); line-height: 40px; font-family: var(--secondary-font-family); letter-spacing: 1px; font-weight: 600; text-transform: uppercase; font-size: 11px}
.top-bar a {color: var(--contrast-font-color);}
.top-bar a:hover {opacity: .8;}

.top-bar-left a {margin-right: var(--spacer);}

.top-bar-right {display: flex;}
.top-bar-right ion-icon {margin: 7px 5px;}
.lang-nav {margin-left: var(--spacer);}

.social-nav {font-size: var(--base-font-size); margin-top: -3px;}
.icon {height: 16px; margin-right: 6px; position: relative; top: 4px;}

.aside-bar {height: 28px; position: absolute; top: 74px; right: calc(var(--spacer));}
.aside-bar a {display: inline-block; height: 28px; cursor: pointer;}
.logout-button {margin-left: 20px; font-size: var(--small-font-size); position: relative; top: 2px;}
.aside-bar ion-icon {margin: 4px 2px; font-size: 20px;}

.aside-bar .nicon{
    margin-right: 8px;
    position: relative;
    top: 6px;
    height: 19px;
}
.search-form {width: 100%; overflow: hidden; height: calc(var(--header-height) - 40px); background: var(--secondary-bg-color); line-height: calc(var(--header-height) - 40px); opacity: 0; z-index: -1; transition: all 0.6s ease 0s; position: fixed; top: 40px; right: 0; left: 0;}
.search-form.is-open {opacity: 1; z-index: 0;}
.search-form input[type="text"].searchinput {display: block!important; width: 100%; height: 100%!important; padding: 0 var(--spacer)!important; background: var(--secondary-bg-color)!important; border: none!important; font-family: var(--secondary-font-family); font-size: var(--bigger-font-size); line-height: calc(var(--header-height) - 40px);}

.search-form input:focus {border: 1px solid var(--tertiary-bg-color); outline: 0;}
.search-form .search-close {display: flex; align-items: center; height: 100%; padding: 0 var(--spacer); font-size: var(--bigger-font-size);position: absolute; top: 0; right: 0;}

header a.basket {position: relative; top: 5px;}
header a.basket span {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background: #000; border-radius: 50%; font-size: 11px; color: #fff; text-align: center; position: absolute; top: -8px; right: -12px;}
header a.basket img {width: 16px;}

button span{display: none;}
button.loading span{display: block;}
span.icon.ion-ios-refresh {
    top: 0;
    margin-bottom: 6px;
}

.shipping_world {position: absolute;
right: 36px;
text-align: right;
text-transform: none;
font-family: var(--main-font-family);
font-weight: normal; 
}
.shipping_world img {height: 14px; position: relative; top: 3px; margin-right: 5px;}

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

    .aside-bar {top: 70px; right: calc(var(--spacer) + 40px);}

}

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

    .view-collection {display: none;}

    .aside-bar {top: 70px; right: calc(var(--spacer) + 50px);}

}

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

    .top-bar {letter-spacing: 0;}

    .top-bar-left a {margin-right: 0;}
    .social-nav {display: none;}
    .nav-main .social-nav {display: block;}

    .aside-bar {top: 64px; right: 55px;}
    .aside-bar a {max-width: 17px;}
    .logout-button {margin-left: 12px;}

}




/* ---------------------------------------------------------------------- */
/*  Elements –> Navigation Button (Mobile)
/* ---------------------------------------------------------------------- */

.hamburger {display: none; height: 56px; padding: 20px; position: absolute; top: 0; right: 0;}
.hamburger:focus {outline: 0;}
.hamburger-box {width: 20px; height: 16px;}
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {width: 20px; height: 2px;}
.hamburger-inner::before {top: -6px;}
.hamburger-inner::after {bottom: -6px;}

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

    .hamburger {display: block; top: 56px; right: 16px;}

}

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

    .hamburger {top: 51px; right: 0;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Main Navigation
/* ---------------------------------------------------------------------- */

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

.nav-main > div {display: grid; grid-template-columns: 1fr calc(var(--logo-width) + 40px) 1fr; grid-template-rows: 1fr; grid-template-areas: 'list1 logo list2'; align-items: center; margin: 20px 0 0; padding-bottom: 12px; font-size: var(--nav-font-size); font-weight: 500; text-transform: uppercase;}
.nav-main > div > ul:first-child {grid-area: list1; text-align: right;}
.nav-main .site-logo {grid-area: logo; margin: 0 20px;}
.nav-main > div > ul:last-child {grid-area: list2;}
.nav-main li {display: inline; margin: 0 10px; padding: 31px 0;}

.nav-main > div > ul > li:hover {border-bottom: 1px solid #000;}
.nav-main .submenu {padding: 15px; background: var(--secondary-bg-color); text-align: left; position: absolute; top: var(--header-height); right: 0; left: 0; opacity: 0; visibility: hidden; font-size: 14px; display: flex; justify-content: center;}

.nav-main ul li:not(:nth-child(3)):hover .submenu  {opacity: 1; visibility: visible;}
.nav-main .submenu ul {display: flex; flex-direction: column; flex-wrap: wrap; align-self: flex-start;  width: 860px; height: 160px; padding: 0!important;}
.nav-main .submenu ul li {display: block; margin: 0 30px 10px 0; padding: 0; font-weight: 300; line-height: 1.2; max-width: 250px;}
.nav-main .submenu ul ul {display: none;}

.site-logo img {width: var(--logo-width);}

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

    .site-logo {margin: 16px 0 0 var(--spacer); padding-bottom: 16px;}

    .nav-main {width: 0; margin-top: 0; background: var(--main-bg-color); position: absolute; top: 0; bottom: 0; right: 0; transition: width 0.6s ease 0s; opacity: 0; visibility: hidden; overflow-x: hidden; z-index: 999999;}
    .nav-main > div {grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: 'logo' 'list1' 'list2'; grid-gap: 0; align-content: start; align-items: start; border-left: 1px solid var(--tertiary-bg-color); margin: 0; z-index: 999999;}
    .nav-main li {display: block; margin: 0; padding: 0; border-bottom: 1px solid var(--tertiary-bg-color);}
    .nav-main li a {display: block; padding: 21px;}
    .nav-main > div > ul > li:hover {border-bottom: 1px solid var(--tertiary-bg-color);}

    .nav-main > div > ul:first-child { text-align: left;}

    .nav-main .submenu {display: none; padding: 0!important; background: none; border-top: 1px solid var(--tertiary-bg-color); text-align: left; position: static; opacity: 1; visibility: visible;}
    .nav-main .submenu.is-open {display: block;}
    .nav-main .submenu ul {display: block; height: auto; width: unset;}
    .nav-main .submenu ul li {height: auto; margin: 0; line-height: 42px; max-width: unset;}
    .nav-main .submenu ul li:last-child {border-bottom: none;}
    .nav-main .submenu ul li a {padding:  20px; line-height: 1.2;}
    .nav-main .submenu ul ul {display: none; padding: 0 0 20px;}
    .nav-main .submenu ul ul li {border: none; font-size: var(--smaller-font-size); line-height: 30px;}
    .nav-main .submenu ul ul a {padding-left: 40px;}

    .nav-main .submenu ul ul.is-open {display: block;}

    .nav-main .site-logo {margin: 0; padding: 20px; border-bottom: 1px solid var(--tertiary-bg-color);}

    .nav-main .menu-info {padding: 20px; background: var(--secondary-bg-color);}
    .nav-main .menu-info p {font-size: var(--small-font-size); line-height: 1.6; text-transform: none;}
    .nav-main .menu-info p.copy {font-size: var(--smaller-font-size); font-weight: 300; line-height: 1.2;}
    .nav-main .menu-info p a {text-decoration: none;}
    .nav-main .menu-info ion-icon {margin-right: 6px; font-size: 18px;}

    .main-container {transition: all 0.6s ease 0s;}
    body {position: relative;}
    .nav-is-open .main-container {width: 100vw; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: scroll;}
    .nav-is-open .nav-main {width: var(--drawer-width); transform: translateX(0); opacity: 1; visibility: visible; overflow-x: visible;}
    .nav-is-open .main-container {transform: translateX(calc(-1 * var(--drawer-width)));}

}

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

    .site-logo {position: relative; top:2px}
}

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

    .site-logo {margin: 22px 0 0 var(--spacer); padding-bottom: 27px;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Footer
/* ---------------------------------------------------------------------- */

footer {display: grid; grid-template-columns: repeat(6, auto); grid-gap: var(--spacer); background: var(--secondary-bg-color); font-size: var(--small-font-size);}

footer h5 {margin-bottom: 15px; font-weight: 500; text-transform: none;}
footer ul {margin: 0; padding: 0; list-style: none;}
footer ul li {display: block;  margin: 0 20px 0 0; padding: 0; font-weight: 300; line-height: 20px;}

footer ion-icon {margin-right: 5px; font-size: 18px;}
footer .copyright {margin: 10px 0;}

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

    footer {display: none;}

}



/* ---------------------------------------------------------------------- */
/*  Elements –> Fitting online
/* ---------------------------------------------------------------------- */
.fitting-online-head {position: relative; display: block;}
.fitting-online-head figure {position: relative; top:90px;}
.fitting-online-head .overlay {position: absolute; width: 100%; height: 100%; display: flex; align-items: center; flex-flow: column;} 
.fitting-online-head .overlay p {max-width: 400px; text-align: center; margin-top: var(--spacer);}

.fitting-online-head  ol { counter-reset: item; margin-top: 0;}
.fitting-online-head ol li { display: block; }
.fitting-online-head ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    color: #dbc6b6;
    font-size: 30px; font-family: var(--secondary-font-family);
}

.fitting-online .accordion {max-width: 80%;margin: 140px auto var(--spacer) auto;}

.fitting-page-footer {display: flex; justify-content: flex-end; padding: 0 var(--spacer-2x);}

a.start_fitting span {text-transform: none; font-family: var(--secondary-font-family); margin-right: 10px;}
.start_fitting .icon{
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.6s;
}
.start_fitting:hover .icon {background-color: #000; color: #fff;}
.start_fitting:hover .icon path {fill:#fff}

/* ---------------------------------------------------------------------- */
/*  Elements –> Banner
/* ---------------------------------------------------------------------- */

.slide {background: #000; position: relative;}
.slide-image {display: block; width: 100%; opacity: .8;}
.slide-content {color: var(--tertiary-font-color); text-align: center; position: absolute; right: 0; bottom: 0; left: 0;}
.slide-content h4 { font-weight: 400;}
.slide-content h1 {margin-bottom: var(--spacer); line-height: 1;}

.slide-video {height: calc(100vh - var(--header-height)); overflow: hidden; position: relative;}
.slide-video video {width: 100%; height: 100%; object-fit: cover;}
.video-link {font-size: var(--smaller-font-size); text-align: center; position: absolute; right: 20px; bottom: 20px; z-index: 99;}
.video-link i {display: block; font-size: 24px;}

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

    .slide-image {height: 200px; object-fit: cover;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Content block (title / text)
/* ---------------------------------------------------------------------- */

.block {display: grid; grid-template-columns: calc(40% - var(--spacer)) 60%; grid-column-gap: var(--spacer);}

.block-header > :first-child {margin-top: 0;}
.block-header > :last-child {margin-bottom: 0;}

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

    .block {grid-template-columns: auto; grid-row-gap: var(--spacer);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Grid Gallery
/* ---------------------------------------------------------------------- */

.grid-gallery {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px;}

.grid-link {display: block; padding-top: 52.6%; position: relative;}
.grid-image {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.grid-content {padding: var(--spacer); position: absolute; bottom: 0; left: 0;}
.grid-content h5 {color: var(--tertiary-font-color); font-weight: 400;}
.grid-content h2 {color: var(--tertiary-font-color); text-transform: lowercase;}

.grid-gallery.homeblocks2 {grid-template-columns: 1fr 1fr; margin-top: var(--spacer-2x);}

.blog-latest{display: grid; grid-template-columns: repeat(4,1fr); grid-gap: var(--spacer);}
.blog-latest figure {position: relative; padding-bottom: 100%; margin: 0; }
.blog-latest figure img {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0;}

@media all and (max-width: 1024px) {
    .blog-latest{grid-template-columns: repeat(2,1fr);}

}

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

    .grid-link {padding-top: 70%;}

    .grid-content {text-shadow: 0px 0px 11px #949494;}

}

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

    .grid-gallery {display: block; grid-template-columns: auto; grid-row-gap: 10px;}

    .grid-link {margin-bottom: 10px; padding-top: 80%;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Products Carousel
/* ---------------------------------------------------------------------- */

.main-carousel .carousel-cell {width: 20%; margin: 0 10px; transition: transform 0.6s ease 0s;}
.main-carousel .carousel-cell a {display: block; padding: 12vw 20px 20px; text-align: center; opacity: 1; position: relative;}
.main-carousel .carousel-cell a::before {content: ''; width: 100%; height: 100%; background: rgba(132, 114, 79, .06); position: absolute; top: 0; left: 0;}
.main-carousel .carousel-cell .content {margin-bottom: var(--spacer); position: absolute; top: var(--spacer); right: 20px; left: 20px;}
.main-carousel .carousel-cell .content h3 {margin: 5px 0 0;}
.main-carousel .carousel-cell img {height: 12vw; margin: 0 auto;}

.main-carousel .carousel-cell.is-previous {transform: translateX(-100px);}
.main-carousel .carousel-cell.is-next {transform: translateX(100px);}

.flickity-button, .flickity-button:hover {background: none;}

.main-carousel .flickity-prev-next-button.previous {left: calc(20vw - 100px);}
.main-carousel .flickity-prev-next-button.next {right: calc(20vw - 100px);}

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

    .main-carousel .carousel-cell {width: 25%;}
    .main-carousel .carousel-cell a {padding-top: 16vw;}
    .main-carousel .carousel-cell img {height: 16vw;}

    .main-carousel .carousel-cell.is-previous {transform: translateX(-35px);}
    .main-carousel .carousel-cell.is-next {transform: translateX(35px);}

    .main-carousel .flickity-prev-next-button.previous {left: calc(20vw - 125px);}
    .main-carousel .flickity-prev-next-button.next {right: calc(20vw - 125px);}

}

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

    .main-carousel .carousel-cell {width: 100%;}
    .main-carousel .carousel-cell a {padding-top: 40vw;}
    .main-carousel .carousel-cell img {height: 60vw;}

    .main-carousel .carousel-cell.is-previous {transform: none;}
    .main-carousel .carousel-cell.is-next {transform: none;}

    .main-carousel .flickity-prev-next-button.previous {left: 20px;}
    .main-carousel .flickity-prev-next-button.next {right: 20px;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Instagram
/* ---------------------------------------------------------------------- */

.instagram_gallery {display: grid; grid-template-columns: repeat(6, 1fr);}
.instagram-image {width: 100%;}

.instagram a {display: block; width: 100%; background-size: cover; background-position: center;}

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

    .instagram {grid-template-columns: repeat(3, 1fr);}

}

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

    .instagram {grid-template-columns: repeat(2, 1fr);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Page Detail Default
/* ---------------------------------------------------------------------- */

.page-detail-grid {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: var(--spacer-2x);}

.page-detail-grid.contacts-grid {grid-template-columns: 1fr 2fr;}

.page-detail-banner .slide-image {max-height: 600px; object-fit: cover;}
.page-detail-header h1 {margin-bottom: var(--spacer);}
.page-detail-content h2 {margin: var(--spacer) 0;}

.page-detail-content ul {list-style-type: none; margin:0; padding:0;}
.page-detail-content ul li {margin-bottom: var(--spacer);}
.page-detail-content ul li p {margin-top: 0;}

.page-carousel  {margin-top: 10px;}

.page-carousel img {height: 400px; margin-right: 10px;}
.page-carousel .flickity-button-icon {fill: var(--main-bg-color);}

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

    .page-detail-grid, .page-detail-grid.contacts-grid {grid-template-columns: auto;}
    .page-detail-content {margin-top: var(--spacer-2x);}

}

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

    .page-carousel img {height: 200px;}

    
}

/* ---------------------------------------------------------------------- */
/*  Elements –> Accordion
/* ---------------------------------------------------------------------- */

.accordion_container {max-width: 60%; margin: var(--spacer-2x) auto;}
.accordion {border-top: 1px solid #000;}
.accordion-wrapper {border-bottom: 1px solid #000;}
.accordion-toggle {padding: 14px 40px 14px 0px; font-size: 18px; font-weight: normal; cursor: pointer; position: relative; font-family: var(--secondary-font-family);}
.accordion-toggle i {font-size: 14px; font-weight: normal; position: absolute; top: 15px; right: 2px;}
.accordion-toggle i:before {font-weight: normal;}
.accordion-content {display: none; padding: 5px 0 18px 0; line-height: 1.8;}
.accordion-content.default {display: block;}
.accordion-content a, .accordion-content a span {font-weight:400}
.accordion_container h2 {padding: 18px 0;}
.accordion-content li {margin-bottom: 10px;}

.faq_page .accordion.faq {display: none; border-top: 0;}
.faq_page .accordion_container h2 {border-bottom: 1px solid #000; display: flex; align-items: center; font-size: 24px;}
.faq_page .accordion_container h2 i {margin-left: auto; font-size: 14px; font-weight: normal; }

/* ---------------------------------------------------------------------- */
/*  Elements –> Stores Listing
/* ---------------------------------------------------------------------- */

.stores .store {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--spacer) 0; margin: 0 0 var(--spacer);}
.stores .store:last-child {margin: 0;}
.stores .store .store-photo {min-height: 400px; background-repeat: no-repeat; background-size: cover;}
.stores .store .store-text {display: flex; flex-direction: column; justify-content: center; padding: var(--spacer); background: var(--secondary-bg-color);}
.stores .store .store-text h1 {display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--spacer); line-height: 1;}
.stores .store .store-text h1 a {margin-left: 20px; padding: 10px 20px; border: 1px solid var(--contrast-bg-color); font-family: var(--main-font-family); font-size: var(--small-font-size);}

.stores .store img {width: 100%; height: 100%; object-fit: cover;}
.stores .store .cycle-slideshow {z-index: 1;}

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

    .stores .store {grid-template-columns: auto; grid-gap: 0;}

}

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

    .stores .store .store-photo {min-height: 200px;}
    .stores .store .store-text h1 {align-items: flex-start;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Store Page
/* ---------------------------------------------------------------------- */

.discountprice .price, span.discountprice {color:#b00a0a}

.store-grid {position:relative; display: grid; grid-template-columns: 25fr 75fr; grid-template-rows: auto 1fr; grid-gap: 0 var(--spacer);}
.store-grid > h1 {grid-column: 1/3; text-transform: lowercase;}

.nav-store ul {margin: 0; padding: 0; list-style: none;}
.nav-store li {font-size: var(--small-font-size); line-height: 2.125rem; text-transform: uppercase;}
.nav-store li li a {color: var(--quaternary-font-color);}
.nav-store li li a.active {color: #000;}
.nav-store ul ul {margin-left: 10px;}

.products-grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: var(--spacer) 30px;}

.product {position: relative;}
.icon-inner {background: red;}
.product ion-icon {padding: 10px; cursor: pointer; position: absolute; top: 0; right: 0; z-index: 1;}

.product-thumb {display: flex; align-items: center; justify-content: center; height: 22vw; margin-bottom: 10px; position: relative;}
.product-thumb::before {content: ''; width: 100%; height: 100%; background: rgba(132, 114, 79, .06); position: absolute; top: 0; left: 0; z-index: 3;}
.product-thumb img {width: 80%; max-height: 80%; object-fit: contain;}

.product-thumb .front {position: absolute; z-index: 1;}
.product-thumb .back {opacity: 0; transition: opacity 0.3s linear; position: absolute; z-index: 2; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #fff;}
.product-thumb:hover .back {opacity: 1;}

.product ion-icon[name="heart-empty"] {opacity: 1; transition: all 0.6s ease 0s;}
.product:hover ion-icon[name="heart-empty"] {opacity: 1; }

.product-content {display: grid; grid-template-columns: 1fr auto; grid-gap: 20px; }
.product-content .theprice, .product-content .price {font-size: 14px; line-height: 1.7}
.product-content .theprice {display: flex; flex-flow: column;}
.product-content .theprice .oldprice {text-decoration: line-through;}



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

    .products-grid {grid-template-columns: repeat(3, 1fr);}

}

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

    .products-grid {grid-template-columns: repeat(2, 1fr);}

}

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

    .store-grid {display: block;}

    .nav-store {display: none;}

    .products-grid {grid-template-columns: auto;}
    .product-thumb {height: 70vw;}

}



/* ---------------------------------------------------------------------- */
/*  Elements –> Store Detail
/* ---------------------------------------------------------------------- */

.product-detail-grid {display: grid; grid-template-columns: 1fr 1fr;}

.product-detail-media {display: grid; grid-template-columns: 150px auto;}
.product-detail-media .carousel-cell {width: 100%; height: 700px; position: relative;}
.product-detail-media .carousel-cell::before {content: ''; width: 100%; height: 100%; background: rgba(132, 114, 79, .06); position: absolute; top: 0; left: 0;}
.product-detail-media .carousel-cell img {width: 100%; height: 100%; object-fit: contain;}

.product-detail-media .carousel-nav {width: 150px; max-height: 700px; overflow-y: scroll;}
.product-detail-media .carousel-nav .carousel-cell {display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; object-fit: contain; cursor: pointer;}
.product-detail-media .carousel-nav .carousel-cell img {width: 80%; height: 80%; object-fit: contain;}

.product-detail-media .carousel .flickity-button {opacity: 0; transition: all 0.6s ease 0s;}
.product-detail-media .carousel:hover .flickity-button {opacity: 1; }

.product-detail-info {padding: var(--spacer-2x) calc(10vw - var(--spacer)) var(--spacer) var(--spacer-2x);}
.product-detail-info h2 {margin-bottom: var(--spacer);}

.product-detail-info .details {opacity: 0.8; font-size: 14px; margin-top: 36px;}
.product-detail-links {display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; grid-gap: 20px;}
.product-detail-links a {display: block; padding: 0 8px; border: 1px solid var(--quaternary-font-color); font-size: var(--smaller-font-size); text-transform: uppercase; line-height: 42px; text-align: center;}
.product-detail-links ion-icon {position: relative; top: 2px;}

.product-detail h5 {grid-area: title;}

.product-related {display: flex; justify-content: center; grid-template-columns: repeat(5, 1fr); grid-gap: var(--spacer) 30px;}
.product-related .product {flex-basis: 20%; padding: 10px;}

h5.brand {margin-top: -20px;}
.price_contain {font-size: 18px; margin: 30px 0 10px 0;}
.price_contain .oldprice {text-decoration: line-through; margin-right: 10px;}

.productoptions {margin-top: var(--spacer)}
.productoptions .block {display: flex; margin-bottom: var(--spacer)}
.productoptions .block label {margin:0 10px 0 0; font-size: var(--smaller-font-size); text-transform: uppercase;}
.productoptions .block .full-custom-select {min-width: 150px;}
.productoptions .block select {font-weight:300; font-size:13px; text-transform: uppercase; position:relative; top: -7px; padding: 2px 0px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ny4xICg0NTQyMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+QXJyb3c8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkhlYWRlci0xNDQwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDY3LjAwMDAwMCwgLTkzLjAwMDAwMCkiIHN0cm9rZT0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iQXJyb3ciIHBvaW50cz0iNDY3IDk0IDQ3Mi4wMDMwNjEgOTcgNDc3IDk0Ij48L3BvbHlsaW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) 100% 50% no-repeat transparent}
.variant-info.details {margin-top: -20px;}

.variant-info.details ion-icon {position: relative; top: 4px; font-size: 18px;}
.fitting-online-info {margin-top: 40px; background: #f2f2f2;
    padding: 20px;
    font-size: 14px;}


.product-detail-info .colors {display: flex; margin-bottom: var(--spacer); margin-top: 10px;}
.product-detail-info .colors a{border: 1px solid #ccc; border-radius: 50%; padding: 2px; margin-right: 4px;}
.product-detail-info .colors a.active {border: 1px solid #000;}
.product-detail-info .colors a span {width: 16px; height: 16px; border-radius: 50%; display: block;}
/*multicolor*/
.product-detail-info .colors a span.color_11 {background-image: url(../images/color-circle.png?v=2)!important; background-size: 100%; background-color: transparent!important; }

.product-title {padding-right: 40px; position: relative;}
.product-title a {position: absolute; top:10px; right:0px}

.add-to-bag {margin-top: var(--spacer); padding: 10px 30px; width: auto; min-width: 170px;} 
button.add-to-bag.disabled {opacity: 0.3; cursor: default}
button.add-to-bag.disabled:hover {background-color: #FFF; color: #000;}

.new_product{position: absolute;
    left: 10px;
    top: 10px;
    background: #000;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    text-align: center;}

ul.product-list-links {list-style: none; margin:var(--spacer) 0; padding: 0; display: flex; border-bottom: 1px dotted #000; border-top: 1px dotted #000; justify-content: space-around;}
ul.product-list-links span {display:block; margin: 4px 0 0 0; text-transform: none;}
ul.product-list-links li {padding:20px 20px 20px 0px; font-size: 13px; min-width: 120px;}
ul.product-list-links li:last-of-type{padding-right: 0;}
ul.product-list-links a {display: flex; align-items: flex-start;}
ul.product-list-links img {width: 25px; flex-grow: 0; flex-shrink: 0; margin-right: 20px;}
ul.product-list-links a:hover {opacity: 0.6;}


.accordion.product-accordion{border-top: 0 none; margin-top: 18px; font-size: 13px; line-height: 1.5;}
.accordion.product-accordion p {line-height: 1.5;}
.accordion.product-accordion li {margin-bottom: 5px;}

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

    .product-detail-media {display: block;}
    .product-detail-media .carousel-nav {display: none;}

    .product-detail-media .carousel .flickity-button {opacity: 1;}

    .product-related {grid-template-columns: repeat(4, 1fr);}
    .product-related :nth-child(n+5) {display: none;}

}

@media all and (max-width: 800px) {
    ul.product-list-links {display: block;}
    ul.product-list-links li {width: 100%; border-top: 0 none; padding:16px 16px 16px 0px}
    
    .product-detail {grid-template-areas: 'media media' 'info info' 'title title' 'related related';}
    .product-detail-grid {grid-template-columns: 1fr;}
    .product-detail-media .carousel-cell {height: 500px;}

    .product-detail-info {padding: var(--spacer-2x) 0 var(--spacer);}
    .product-detail-info  .text {margin-top: var(--spacer-2x);}
    .product-related {display: block;}
    .add-to-bag {width: 100%;}

}

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

    .product-detail-media .carousel-cell {height: 350px;}

    .product-detail-links {grid-template-columns: auto; grid-gap: var(--spacer);}
    .product-detail-links a {margin-right: 0;}


}


/* ---------------------------------------------------------------------- */
/*  Elements –> Filters
/* ---------------------------------------------------------------------- */

a.filters_btn {position: absolute; right: 50px; top: 70px; padding-left: 30px; cursor: pointer;}
a.filters_btn::before {content:''; width: 24px;  height: 24px;  position: absolute; left: 0; top: 0; background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EFoundation%20%2F%20Icon%20%2F%2024%20%2F%20Control%20%2F%20Filter%20%2F%20Default%3C%2Ftitle%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%2F%3E%3Cpath%20d%3D%22M3.55%205.5H1.5v-1h2.05a2.5%202.5%200%200%201%204.9%200H21.5v1H8.45a2.5%202.5%200%200%201-4.9%200zM6%206.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203zm7.55%206H1.5v-1h12.05a2.5%202.5%200%200%201%204.9%200h3.05v1h-3.05a2.5%202.5%200%200%201-4.9%200zm2.45%201a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203zm-8.45%206H1.5v-1h6.05a2.5%202.5%200%200%201%204.9%200h9.05v1h-9.05a2.5%202.5%200%200%201-4.9%200zm2.45%201a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203z%22%20fill%3D%22%23222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)}

.filter-cols {columns: 3}
.filter-cols label {display: block;}
.drawer {z-index: -1; pointer-events: none;}
.drawer.open {z-index: 1; pointer-events: unset;}
.drawer:after {content:''; position: fixed; top: 0; left: 0; width:100%; height:100vh; background:rgba(0,0,0,.2); opacity: 0; transition: opacity .5s}
.drawer.open:after {opacity: 1}
.drawer .filters_content {width: 40vw; padding: var(--spacer-2x); background: #FFF; top: 0px; right: 0px; z-index: 99; height: 100vh; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; position: fixed; overflow-y: scroll; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); opacity: 0}
.drawer.open .filters_content {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1}
.drawer h2 {margin-bottom: var(--spacer)}
.drawer h5 {margin: var(--spacer) 0 10px 0} 
.drawer button {margin-top: var(--spacer)}


.default-checks [type="checkbox"]:checked,
.default-checks [type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.default-checks [type="checkbox"]:checked + label,
.default-checks [type="checkbox"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
}
.default-checks [type="checkbox"]:checked + label:before,
.default-checks [type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    background: #fff;
}
.default-checks [type="checkbox"]:checked + label:after,
.default-checks [type="checkbox"]:not(:checked) + label:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #222;
    position: absolute;
    top: 4px;
    left: 4px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.default-checks [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.default-checks [type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


.filter-colors {display: flex; flex-wrap: wrap;}
.filter-colors label {cursor: pointer; margin: 5px 0px}
.filter-colors  [type="checkbox"] {display: none}
.filter-colors span.hex {
    border: none !important;
    width: 100%;
    height: 100%;
    border-radius: 50%; display: inline-flex;
}

.filter-colors span.hex.color_11 { /*multicolor*/
    background-image: url(../images/color-circle.png)!important;
    background-size: 100%;
    background-color: transparent!important;
}



.filter-colors span.check {border-radius: 50%;
width: 22px;
height: 22px;
border: 1px solid #ccc;  margin-right: 6px; display: flex;
justify-content: center;
align-items: center; padding: 2px; }

.filter-colors  [type="checkbox"]:checked + span.check {
    border:1px solid #000;
}

@media all and (max-width: 1024px) {
    a.filters_btn{display: block; position: relative; margin-bottom: 20px; top:unset; right: unset;}
    .drawer .filters_content {width: 85vw;}
    .filter-cols {columns: 1;}
}

/* ---------------------------------------------------------------------- */
/*  Elements –> Blog Grid
/* ---------------------------------------------------------------------- */

/* .blog-grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: var(--spacer);} */
.blog-grid {display: flex; flex-wrap: wrap;}
.blog-grid .item {    width: calc(25% - 20px);
    margin-bottom: var(--spacer-2x);}

.blog-grid-thumb {width: 100%; height: 0; padding-top: 62%; background-position: top center; background-size: cover;  transition: filter 0.6s ease 0s; overflow: hidden;}
.blog-grid a:hover .blog-grid-thumb {filter: grayscale(10%);}
.blog-grid-thumb img {width: 100%; height: 100%;}
.blog-grid-content h5 {margin: 15px 0 10px;}

.archive-button {padding: 20px 5px; background: var(--contrast-bg-color); color: var(--contrast-font-color); writing-mode: vertical-rl; position: fixed; top: 50%; right: 10px; z-index: 1;}

.archive {width: 25%; height: calc(100vh - var(--header-height)); margin: 0; padding: var(--spacer-2x); background: var(--secondary-bg-color); transform: translateX(100%); position: fixed; top: var(--header-height); right: 0px; transition: all 0.6s ease 0s; overflow-y: auto; overflow-x: hidden; z-index: 1; -webkit-overflow-scrolling: touch;}

body.open-archive .archive {transform: translateX(0);}

.archive li {margin-bottom: 8px; font-family: var(--main-font-family); font-size: var(--nav-font-size); list-style: none; cursor: pointer;}
.archive > li {font-family: var(--secondary-font-family); font-size: 24px;}
.archive span {transition: .6s;}
.archive span:hover {opacity: .6;}
.archive .active {font-weight: 400;}
.archive ul {padding: 10px 0 20px 20px;}

.archive.auto-open > li:not(:first-child) ul, .archive:not(.auto-open) > li:not(.open) ul {display: none;}
.center-button {text-align: center; margin-top: var(--spacer);}
.view-more-button {display: inline-block;
    border: 1px solid #000;
    padding: 10px 40px; cursor: pointer;}
.view-more-button:hover {background:#000; color: #fff;}

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

    .blog-grid {grid-template-columns: repeat(3, 1fr);}

    .archive {width: 33.333%;}

}

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

    .blog-grid {grid-template-columns: auto;}

    .archive {width: 65%;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Blog Detail
/* ---------------------------------------------------------------------- */

body.bloges_page.is_show_page main, body.blog_page.is_show_page main {padding: 0px;}

.blog-wrap {position: relative;}
.blog-detail {display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto 1fr; grid-gap: 20px 0; grid-template-areas: 'image header' 'image content'; align-items: start; transition: all 0.6s ease 0s;}

.blog-detail-header {grid-area: header; padding-left: var(--spacer-2x);}
.blog-detail-header h2 {margin-top: var(--spacer-2x); margin-bottom: 10px;}
.blog-detail-content {grid-area: content; padding: 0 0 var(--spacer-2x) var(--spacer-2x);}
.blog-detail-content .text a {text-decoration: underline;}
.blog-detail-image {grid-area: image; position: -webkit-sticky; position: sticky; top: var(--header-height);}
.blog-detail-image img {display: block; width: 50vw; position: relative; right: 10vw;}

/* Theme 2 */
.blog-detail-theme-2 {grid-template-columns: 100%; grid-template-areas: 'header' 'content';}
.blog-detail-theme-2 .blog-detail-header {padding-left: 0;}
.blog-detail-theme-2 .blog-detail-content {padding-left: 0;}
.blog-detail-theme-2 .blog-detail-image {display: none;}

body.open-comments .blog-detail  {transform: translateX(calc(-1 * var(--drawer-width)));}
body.open-comments .blog-comments  {transform: translateX(0);}

.comments-close {padding: var(--spacer); position: fixed; top: calc(var(--header-height) + 14px); right: 0; cursor: pointer; transition: all 0.6s ease 0s; opacity: 0; z-index: -1;}
.open-comments .comments-close {opacity: 1; z-index: 2;}

.blog-comments {width: var(--drawer-width); transform: translateX(100%); transition: all 0.6s ease 0s; top: var(--header-height); right: 0px; padding: var(--spacer-2x); background:var(--secondary-bg-color); height: calc(100vh - var(--header-height)); position: fixed; overflow-y: auto; overflow-x: hidden; z-index: 1; -webkit-overflow-scrolling: touch;}
.blog-comments .blog-comment {margin-top: var(--spacer); font-size: 14px; line-height: 1.7;}
.blog-comments .blog-comment.level-1 {margin-left: calc(var(--spacer)/2);}
.blog-comments .comment-author {font-weight: 500;}
.blog-comments .comment-author span {font-weight: 300;}
.blog-comments h2 {margin-bottom: 20px;}
span.js-comments {display: inline-block; margin-left: 10px; cursor: pointer;}

form.form-comments > * {transition: all 0.6s ease 0s }
form.form-comments input, form.form-comments textarea {display: block; width: 100%; padding: 10px; margin-bottom: 10px; border:  1px solid var(--quaternary-bg-color); background: transparent; font-size: 14px; font-weight: 300}
form.form-comments textarea {border: 1px solid #000!important;}

form.form-comments button:hover {cursor: pointer; opacity: .6;}

.form-comments input:disabled {padding: 0; border: 0; font-weight: 500; color: var(--main-font-color);}

form.form-comments button, .reply-button {margin-top: 20px; padding: 5px 15px; background: var(--contrast-bg-color); border: none; color: var(--contrast-font-color); cursor: pointer; width: auto; font-size: 14px;}
.reply-button:focus {outline: 0;}

.blog-comment .form-comments {margin-top: 20px;}

/* Old blog entries */
.blog-detail-content .text img {display: block;}
.blog-detail-content .text [title~="seprarador"],
.blog-detail-content .text [title~="separador"],
.blog-detail-content .text [href~="seprarador"],
.blog-detail-content .text [href~="separador"],
.blog-detail-content .text [src~="seprarador"],
.blog-detail-content .text [src~="separador"] {display: none!important;}

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

    .blog-comments {padding: var(--spacer);}

}

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

    body.bloges_page.is_show_page main, body.blog_page.is_show_page main {padding: var(--spacer);}

    body.open-comments {height: 100vh; overflow: hidden; position: fixed;}
    body.open-comments .blog-detail  {height: calc(100vh - var(--header-height) - var(--footer-height));overflow: hidden; transform: translateX(-100%);}
    .blog-comments {width: 100%;}

    .blog-detail {display: block;}

    .blog-detail-header {padding-left: 0;}
    .blog-detail-header h2 {margin-top: 0;}
    .blog-detail-image {margin: var(--spacer) 0; position: static;}
    .blog-detail-image img {width: 100%; position: static;}
    .blog-detail-content {padding-left: 0;}

    .blog-detail-theme-2 .blog-detail-content {margin-top: var(--spacer);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Favorites
/* ---------------------------------------------------------------------- */

.favorites-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-gap: var(--spacer) 20px;}

.form-buy-favorites {width: var(--drawer-width); transform: translateX(100%); transition: all 0.6s ease 0s; top: var(--header-height); right: 0px; padding: var(--spacer-2x); background:var(--secondary-bg-color); height: calc(100vh - var(--header-height)); position: fixed; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;}

.buy-favorites-close {padding: var(--spacer); position: fixed; top: 0; right: 0; cursor: pointer; transition: all 0.6s ease 0s;}

body.open-buy-favorites .favorites-grid  {width: calc(100% - var(--drawer-width));}
body.open-buy-favorites .form-buy-favorites {transform: translateX(0);}

a.buy-favorites {border: 1px solid #000; padding: 6px 14px; display:inline-block; margin-bottom: var(--spacer);}

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

    .favorites-grid {grid-template-columns: auto;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Quick Cart
/* ---------------------------------------------------------------------- */
.quickcart{z-index: -1; pointer-events: none;}
.quickcart.open{z-index: 1; pointer-events: unset;}

.quickcart:after {content:''; position: fixed; top: 0; left: 0; width:100%; height:100vh; background:rgba(0,0,0,.2); opacity: 0; transition: opacity .5s}
.quickcart.open:after {opacity: 1}
.quickcart .quickcart-content {width: 40vw; padding: var(--spacer-2x); background: #FFF; top: 0px; right: 0px; z-index: 99; height: 100vh; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; position: fixed; overflow-y: scroll; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); opacity: 0}
.quickcart.open .quickcart-content {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1}

.basket_aside h1 {margin-bottom: var(--spacer-2x); font-size: var(--bigger-font-size)}
.basket_aside .basket-item {border-bottom: 1px solid #f5f5f5; padding: var(--spacer) 0; display: flex; position: relative;}
.basket_aside .basket-item:first-of-type {border-top: 1px solid #f5f5f5;}
.basket_aside .basket-item .basket-product {display: flex;}
.basket_aside .basket-item .basket-item-img {width: 80px; height: 80px; background-size: cover; margin-right: var(--spacer); flex: 0 0 80px;}
.basket_aside .basket-item .basket-item-img img {width: 80px}

.basket_aside .basket-item .price {position: absolute; top: 36px; right: 0px;}
.basket_aside .basket-item-content {font-size: 14px; padding-right: var(--spacer-2x);}
.basket_aside .basket-quantity {margin-top: 8px;}
.quantity-label {margin-right: 10px;}

.basket_aside .basket-item-delete {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background: #f2f2f2; border-radius: 50%; font-size: 21px; text-decoration: none; transition: all .6s; position: absolute; right: 0; top: 80px;}
.basket_aside .basket-item-delete:hover {background:#000; color: #fff;}

.basket_aside .basket-bt-checkout { width: 100%; text-align: center; font-size: 16px; text-transform: uppercase;}

.basket_aside .total {display: flex; padding: var(--spacer) 0}
.basket_aside .total .basket-total-text {flex:1;}

.grid {display: flex;}
.grid .col {flex: 0 0 50%;}
.grid.grid-totals {margin: var(--spacer) 0}
.grid .basket-shipping-costs:first-of-type {flex-basis: 67%}

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

    .quickcart .quickcart-content {width: 85vw; padding: var(--spacer-2x) var(--spacer);}

    .basket_aside h1 {margin: var(--spacer-2x) 0 var(--spacer);}

    .basket_aside .basket-item-content,
    .basket_aside .basket-item-content h3 {font-size: 12px;}

    .basket_aside .basket-item .price {top: var(--spacer);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Checkout
/* ---------------------------------------------------------------------- */
.checkout-bar {display: flex; width: 100%; list-style-type: none; margin: var(--spacer) 0; padding: 0}
.checkout-bar li {color: rgba(0, 0, 0, 0.35); padding: 0 2px; text-transform: uppercase; font-size: 11px; letter-spacing: 1px;}
.checkout-bar li:after{  content: " > "; color: rgba(0, 0, 0, 0.35);}
.checkout-bar li:last-of-type:after {content: '';}
.checkout-bar li.active {color: #000}

/*  Checkout –> Cart */
.order .basket-content .basket-header {display: flex;}
.order .basket-content .basket-header .basket-product-header {flex: 0 0 50%;}
.order .basket-content .basket-item {display: flex;  border-bottom: 1px solid #2c2c2c; padding: var(--spacer) 0}
.order .basket-content .basket-product {flex: 0 0 50%;}
.order .basket-content .b-col {flex: 0 0 calc(50% / 3);}
.order .basket-content .basket-product {display: flex;}
.order .basket-content .basket-item-img {width: 120px; height: 120px; background-size: cover; flex: 0 0 120px; margin-right: var(--spacer)}
.order .basket-content .basket-item-img img {width: 120px; height: 120px; object-fit: contain;}

/*  Checkout –> Login */
.cart-login .flex {display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--spacer-2x);}
.cart-login .login, .cart-login .register, .cart-login .basket_aside {flex: 0 0 33.3%; padding-right: var(--spacer-2x)}
.cart-login .flex h2{ margin-bottom: var(--spacer);}

/*  Checkout –> Info */
.checkout {display: flex; flex-wrap: wrap; justify-content: space-between; padding: var(--spacer-2x);}
.checkout .col-2-3 {width: calc(66.666% - 120px);}
.checkout .col-1-3 {width: calc(33.333% - 40px); margin-left: 40px;}


#billingAddressForm, #shippingAddressForm {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: var(--spacer);}
#billingAddressForm .col-1-2, #shippingAddressForm .col-1-2 {width: calc(50% - 20px);}
#billingAddressForm button {margin-bottom: var(--spacer); color: #fff; background-color: #000}
#shippingAddressForm button {margin-top: 46px; margin-bottom: var(--spacer); color: #fff; background-color: #000}

.checkout form input,
.checkout form .custom-select {width: 100%; margin-bottom: 20px;}

.gift-info.collapsible {display: none;}

.collapsible {border-top: 1px solid #2c2c2c; padding: 16px 0px;}
.collapsible.no-border{border-top: 0px none}

#user-address, .shipping-address {min-height: 60px; position: relative;}
#user-address .showAddressForm, .shipping-address .showShippingAddressForm {position: absolute; top: 0px; right: 0px; width: auto;}

.billing-address, .shipping-address {padding: 0px 0px 20px 0px; position: relative}
.shipping-address .billing-check {display: inline-block; width:30px; margin-bottom: 0px;}
.showShippingAddressForm{position: absolute; top: -20px; right:0px; width: auto!important;}

.shipping-method ul{margin: 0px; padding: 0px;}
.shipping-method {padding: 0px 0px 20px 0px; position: relative}
.shipping-method li{margin-right: 10px; list-style-type: none; float: left;}
.shipping-method li span{display: block; margin-left: 0px;}

.payment-method ul{margin: 0px; padding: 0px;}
.payment-method {padding: 0px 0px 20px 0px; position: relative}
.payment-method li{margin-right: 30px; list-style-type: none; float: left;}

.basket-content h1 {font-size: 22px;}
.order h2 {margin-bottom: 20px;}
.order .voucher .grid {width: 70%}
.order .voucher .col-1-2 {width: 50%}

.voucher input[type="text"] {border: 1px solid #000!important; padding: 10px; height: 48px;}
.voucher button {height: 48px; position: relative; left: -1px}

.basket-bt-process-preorder {margin-top: 20px; text-transform: uppercase;}

.basket-products {margin-bottom: 20px;}
.basket-estimated-shipping span, .basket-payment-costs span, .voucher-discount span, .basket-total-costs span {float: right; text-align: right; text-transform: none;}

#payment-method{margin-top: 20px; width: 450px;}
#payment-method label{margin-bottom:6px; display: block;}

#payment-method ul.cards li{ float: left;margin: 0 4px 0 0; list-style-type: none; box-sizing: border-box;}
#payment-method ul.cards li span{background-image: url("../../img/credit-cards-@2x.png"); background-size: 300px 31px; background-position:0 0;   float: left; width: 47px; height: 31px; text-indent: -9999px;opacity: 0.6; box-sizing: border-box; }

#payment-method ul.cards {margin-bottom: 20px;}
#payment-method ul.cards li span.card.visa {background-position: 0 0}
#payment-method ul.cards li span.card.master-card {background-position: -100px 0}
#payment-method ul.cards li span.card.american-express {background-position: -50px 0}
#payment-method ul.cards li span.card.discover {background-position: -150px 0}
#payment-method ul.cards li span.card.jcb {background-position: -200px 0}
#payment-method ul.cards li span.card.diners-club {background-position: -250px 0}
#payment-method ul.cards li span.card-selected {opacity: 1}
#payment-method ul.cards li.text {font-size: 11px; line-height: 31px; color: #767676;}
#payment-method .col-1-4 {display: inline-block; margin-right: 10px; overflow: hidden;}

.my-hosted-fields-container {height: 25px; width:300px; margin-bottom: 1em; padding: 0 0.5em;}
#my-credit-card-field, #my-security-code-field, #my-expiration-field {border:1px solid #000;}
#my-security-code-field, #my-expiration-field {border:1px solid #000; width:100px;}
.my-hosted-fields-left {height: 25px; width:100px; margin-bottom: 1em; padding: 0 0.5em; border: 1px solid #000;}
.my-hosted-fields-container.braintree-hosted-fields-invalid {background-color: rgba(242, 102, 102, 0.31)!important}
.my-hosted-fields-container.braintree-hosted-fields-valid {border-color: limegreen;}


.radio-col {width: 100px; display: inline-block; margin-bottom: 20px;}
.gift-message-box{margin-bottom: 20px;}
.gift-message-box img {max-width: 90%;}
.gift-info textarea {width: 100%; height: 120px; border: 1px solid #ddd; margin-bottom: 4px; margin-top: 10px; box-sizing: border-box; padding: 10px;}
.gift-chars-info {font-size: 13px;}

.gift-message-box.normal .photo-normal-gift{display: block;}
.gift-message-box.normal .photo-gift-gift{display: none;}

.gift-message-box.gift .photo-normal-gift{display: none;}
.gift-message-box.gift .photo-gift-gift{display: block;}


ul.order_mbref{width: 240px; margin: 20px auto; list-style-type: none; text-align: left}
ul.order_mbref li {padding: 5px 0px; border-bottom:1px solid #ddd;}
ul.order_mbref li span {width:100px; display: inline-block}

.thank-you {margin-bottom: 72px;}

@media all and (max-width: 800px) {
    .cart-login .flex {display: grid; grid-template-columns: 1fr; grid-gap: var(--spacer-2x);}

    .checkout {display: block; padding: var(--spacer);}

    .checkout-bar {display: block;}
    .checkout-bar li {display: inline-block;}

    .checkout .col-2-3,
    .checkout .col-1-3 {width: 100%; margin-left: 0}


    #user-address .showAddressForm, .shipping-address .showShippingAddressForm {margin-top: 20px; position: static;}

    #billingAddressForm .col-1-2, #shippingAddressForm .col-1-2 {width: 100%;}

    #payment-method {width: 100%;}
    #payment-method ul.cards li.text {display: block; clear: both;}

    .checkout .basket-content {margin-top: var(--spacer-2x);}

    .grid.grid-totals {display: block;}
    .grid.grid-totals .basket-aside {margin-top: var(--spacer);}

    .basket-item-img,
    .basket-unit-header,
    .basket-unit {display: none;}

    .order .basket-content .b-col {flex: 0 0 calc(50% / 2);}

}



/* ---------------------------------------------------------------------- */
/*  Elements –> Clients Area
/* ---------------------------------------------------------------------- */

.clientsarea {max-width: 75%; margin: 0 auto}

.clientsarea > h1 {padding: var(--spacer) var(--spacer) 20px; text-align: center;}
.clientsarea > nav {padding: 0 var(--spacer); text-align: center;}
.clientsarea > .order-history {padding: var(--spacer);}

.clientsarenav ul {margin: 0; padding: 0; list-style: none;}
.clientsarenav li {display: inline; margin-left: 5px;}
.clientsarenav li:first-of-type {margin-left: 0}
.clientsarenav li:not(:last-child)::after {content: ' | '; margin-left: 5px;}
.clientsarenav a.active {font-weight: bold;}


.order-history {padding: 36px var(--spacer-2x);}

.order-history-item {display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 18px 0px;}
.order-history-item:first-child {margin-top: var(--spacer);}
.order-history-item > div {flex-basis: calc(20% - 36px);}
.order-history-item .info {flex-basis: calc(40% - 36px); text-transform: uppercase;}
.order-history-item h3.date{ margin: 6px 0px 0px 0px; text-transform: none;}

.order-history-item .status, .order-history-item .total {text-transform: uppercase; color: rgba(0, 0, 0, 0.35)}
.order-history-item .status span, .order-history-item .total span{display: block; text-transform: none; color: rgba(0, 0, 0, 0.85)}

.order-history-item .view-order-details {width: 80%; margin: 0px;}

.order-details-address {margin-top: 30px;}

.order-items {width:100%; margin-top: 60px; padding-right: 20px; border-bottom: 1px solid #000; border-collapse: separate;}
.order-items th {padding-bottom: 20px; font-size: 13px; font-weight: normal; text-transform: uppercase;}
.order-items td {padding-bottom: 20px;}
.order-items td td {padding-bottom: 0;}
.order-items td img {border:4px solid #FFF}
.order-items td.img {width:90px;}
.order-items h3 {margin: 0; font-size: 13px; text-transform: uppercase;}

.order-info {margin-top: 30px; border-collapse: separate;}
.order-info table {padding: 20px; background: #FFF; border-collapse: separate;}
.order-info h3 {text-transform: uppercase;}

.order-status {width: auto!important; padding: 11px 14px; border: 1px solid rgba(0, 0, 0, 0.85); float: right;}

table.order-items-list.small-table {width: 300px;float: right;}
table.order-items-list.small-table td{text-align: right; border-bottom: 1px solid #000; padding: 20px 0px;}

.change-password {margin-top: 20px; clear: both;}
.change-password p {font-size: 13px;}
.change-password button {margin-top: 40px;}



.downloaduserdata.button, .deleteaccount.button {display: inline-block; width: auto; margin-bottom: 40px;  transition: all 0.5s ease; cursor: pointer;}

.downloaduserdata.button:hover, .deleteaccount.button:hover {background: #000; color: #fff;}


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

    #editprofile {grid-template-columns: 1fr; grid-gap: 20px}
    #editprofile .col-1-2 {width: 100%;}

    nav.clientsarenav ul li {display: block; margin: 6px 15px;}

    .order-history {padding: 36px var(--spacer);}

    .order-history-item {display: block; margin: 0; padding: 0 0 18px;}
    .order-history-item > div {margin-top: 18px;}

    .order-status {display: table; margin-bottom: 16px; padding: 4px 8px; float: none;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Press List
/* ---------------------------------------------------------------------- */

.press-grid {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: var(--spacer);}
.press-grid img {max-width: 100%;}
.press-grid h1 {grid-column: 1/-1;}
.press-grid h5 {margin-top: 10px;}
.press-grid h5 span {text-transform: none}

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

    .press-grid {grid-template-columns: repeat(4, 1fr);}

}

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

    .press-grid {grid-template-columns: repeat(3, 1fr);}

}

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

    .press-grid {grid-template-columns: repeat(2, 1fr);}

}

/* ---------------------------------------------------------------------- */
/*  Elements –> Pages
/* ---------------------------------------------------------------------- */

form.como-comprar input, form.como-comprar textarea{ display: block; width: 100%; margin-bottom: 10px; padding: 10px; background: transparent; border: 1px solid var(--quaternary-bg-color); font-size: 14px; font-weight: 300; }

form.como-comprar button {width: 50%; margin-bottom: 40px; padding: 0px 10px; background: none; border: 0px none; border: 1px solid var(--quaternary-bg-color); font-size: var(--smaller-font-size); font-weight: 300; color: var(--main-font-color); text-transform: uppercase; line-height: 42px; text-align: center; transition: all 0.6s ease 0s;}

form.como-comprar p {font-size: var(--small-font-size); line-height: 1.7}

.payment-methods-bar {display: grid; grid-template-columns: repeat(5, 1fr); grid-column-gap: 10px; align-items: center;}
.payment-methods-bar img {width: 100%; height: auto;}

form.como-comprar .custom-select.country {width: 100%; border:1px solid #bbbbbb; margin: 0 0 10px 0; font-size: 14px; padding: 6px 0px}
form.como-comprar .custom-select.country select {font-size: 14px;}


/* ---------------------------------------------------------------------- */
/*  Elements > Forms
/* ---------------------------------------------------------------------- */

input[type="text"], input[type="password"], input[type="date"], input[type="email"] {display: block; width: 100%; height: 36px; margin-bottom: 8px; padding: 0; border: none!important; border-bottom: 1px solid #2c2c2c !important; border-radius: 0; line-height: 36px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; outline-width: 0;}
textarea {display: block; width: 100%; margin-bottom: 8px; padding: 0; border: none!important; border-bottom: 1px solid #2c2c2c !important; border-radius: 0; line-height: 36px;}
input[type="checkbox"] {margin-right: 4px;}

button, .button {padding: 11px 14px; border: 1px solid #000; background:#fff; color: #000; display: block; width: 100%;  cursor: pointer;   transition: all .6s}
button.black, .button.black {background:#000; color: #fff;}
input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;

  }
button:hover, .button:hover {background:#000; color: #fff;}
input:-internal-autofill-selected {background-color: #fff!important}

button .ion-load-c {display: none;}

span.error {display: none!important;}
input.error {background:rgba(242, 102, 102, 0.31);}

select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0;  border: 1px solid #fff !important; border-bottom-color: #2c2c2c !important; padding: 14px 0px 4px 0px; width: 100%; background-color: #fff}
.errorFeedback {background:rgba(242, 102, 102, 0.31); padding: 4px; font-size: var(--small-font-size)}


/* ---------------------------------------------------------------------- */
/*  Elements –> Modal
/* ---------------------------------------------------------------------- */

.jconfirm {text-align: center}
.jconfirm h2{margin-top: 0; margin-bottom: 20px; font-size: 22px; line-height: 27px;}
.jconfirm label{display: inline-block; width:100px}
.jconfirm input {width: 90%; margin-bottom: 20px; font-size: 13px; padding: 7px; background: none; border: 1px solid #000;}
.jconfirm input.consent_check {width: auto;}
.jconfirm button{font-size:13px; display: block; width: 90%; padding: 8px; background: #000; font-weight: normal; color: #fff; text-transform: uppercase; text-align: center; text-shadow:none !important; border:none !important; box-shadow:none !important;  -webkit-transition: all 2s ease-out; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
.jconfirm button:hover {background: #666;}
.jconfirm .smallinfo {opacity: 0.7; font-size: 13px; margin-top: 20px!important;}
.jconfirm .privacy_agree {width: 90%; padding: 10px; font-size: 13px;}
.jconfirm .privacy_agree input[type="checkbox"] {margin-bottom: 0;}

.jconfirm form .error, .jconfirm form.error .privacy_agree {background-color: var(--error-color);}
.jconfirm form span.error {display: none!important;}
.jconfirm div.errorFeedback {width:90%; margin: 0 auto 20px; padding: 10px 0; background-color: var(--error-color); font-size: var(--small-font-size);}


.jconfirm .col-1-2 {width: 50%; float: left;}
.resetpasswordbox {text-align: center; min-height: calc(100vh - 348px);}
#resetpassword{width: 50%; margin: 0 auto; text-align: center;}
#resetpassword input{width:80%; margin: 0 auto; float: none; margin-bottom: 20px; }
#resetpassword button {margin: 0 auto;}

.jconfirm .container {width: auto; float: none;}
.jconfirm-box-container {width: 400px; margin: 0 auto;}
.jconfirm-box-container.large-modal {width: 700px;}
.jconfirm-box-container.personalization-modal {width: 900px;}
.personalization-modal .jconfirm-box {background: #fff!important;}

.custom-select.country, .custom-select.ptzone {width: 90%; margin: 0 0 20px 0;}
.custom-select select {color: var(--secondary-font-color);}

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

    .jconfirm-box-container.large-modal {width: 100%;}
    .jconfirm .jconfirm-box {margin: 0!important;}
    .jconfirm .col-1-2 {width: 100%; float: none; margin-bottom: var(--spacer-2x);}
    .jconfirm .loginbox {margin-top: 0;}
    .jconfirm input , .jconfirm button {width: 100%;}

}

/* ---------------------------------------------------------------------- */
/*  Elements –> Messages
/* ---------------------------------------------------------------------- */
main.message-center {max-width: 840px; margin: 0 auto}
main.message-center h1, main.message-center .clientsarenav {text-align: center;}
main.message-center .clientsarenav {margin: 30px 0}
.messages>.subject {text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 72px;
    font-size: 14px;
    font-weight: bold; text-align: center;}

.messages-container {margin: var(--spacer) 0;}

.messages-container.messages-list .message {border-bottom: 1px dotted; position: relative;}
.messages-container.messages-list .message::after {width: 24px; height: 24px; top: 40px; position: absolute; right: 0; content:''; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 511.995 511.995' style='enable-background:new 0 0 511.995 511.995;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M381.039,248.62L146.373,3.287c-4.083-4.229-10.833-4.417-15.083-0.333c-4.25,4.073-4.396,10.823-0.333,15.083 L358.56,255.995L130.956,493.954c-4.063,4.26-3.917,11.01,0.333,15.083c2.063,1.979,4.729,2.958,7.375,2.958 c2.813,0,5.604-1.104,7.708-3.292L381.039,263.37C384.977,259.245,384.977,252.745,381.039,248.62z'/%3E%3C/g%3E%3C/svg%3E%0A");}

.messages-container .message {display: flex; padding: 20px; margin: 20px 0}
.messages-container:not(.messages-list)  .message:nth-of-type(even){background: #f2f2f2; border-radius: 10px;}
.messages-container.messages-list .message {padding-bottom: 40px;}

.message-text a {text-decoration: underline;}

.messages-container .message > div {margin-right: 20px;}
.messages-container .message .message-avatar {flex-basis: 40px; flex-shrink: 0}
.messages-container .message .message-avatar img {width: 100%}
.messages-container .message .message-user {flex-basis: 120px; flex-shrink: 0}
.messages-container .message .message-user span {font-weight: 400; display: block; margin-bottom: 4px;}
.messages-container .message .message-user time {font-size: 14px;}
.message-send label {margin-bottom: 10px; display: block; text-align: center;}
.message-send textarea {border: 1px solid #000!important; height: 180px; padding: 10px; outline: 0; line-height: 1.2}
.message-send button {background:#000; color: #fff;}
.message-feedback {display: none; text-align: center; background: #f2f2f2; padding: 10px; margin-top: 36px;}
.message-send select {margin-bottom: 10px; font-weight: 300; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ny4xICg0NTQyMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+QXJyb3c8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkhlYWRlci0xNDQwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDY3LjAwMDAwMCwgLTkzLjAwMDAwMCkiIHN0cm9rZT0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iQXJyb3ciIHBvaW50cz0iNDY3IDk0IDQ3Mi4wMDMwNjEgOTcgNDc3IDk0Ij48L3BvbHlsaW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) 100% 50% no-repeat transparent}

.send-message-container {text-align: center; margin-top: var(--spacer); }

a.send-message{
    background: #000;
    color: #fff;
    padding:4px 20px 8px 20px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 4px;
    display: inline-block; line-height: 1; cursor: pointer;
}

a.send-message i { font-size: 20px; position: relative; top: 2px; margin-right: 4px;}
form.message-send {margin-top: var(--spacer)}
form.message-send input {border: 1px solid #000!important; padding: 10px;}

/* ---------------------------------------------------------------------- */
/*  Elements –> Error 404
/* ---------------------------------------------------------------------- */

.error404 {height: 100%; text-align: center;}
.error404:before {content: ''; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle;}
.error404 .centered {display: inline-block; width: 420px; vertical-align: middle; max-width: 90%;}

.error404 .centered > a {display: block; border-bottom: 2px solid #000;}
.error404 .logo {width: 340px; max-width: 80%;}
.error404 .center {width: 430px; margin: 30px auto 0; max-width: 90%;}
.error404 h1, .error404 h1 a {margin: 0; padding: 20px 0 10px; font-size: 16px; text-transform: uppercase; font-weight: 300; }


/*! Lity - v2.3.1 - 2018-04-20
* http://sorgalla.com/lity/
* Copyright (c) 2015-2018 Jan Sorgalla; Licensed MIT */.lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.7);outline:none !important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important}.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease}.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}.lity-content:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-close{z-index:9994;width:35px;height:35px;position:fixed;right:0px;top:0px;-webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close::-moz-focus-inner{border:0;padding:0}.lity-close:hover,.lity-close:focus,.lity-close:active,.lity-close:visited{text-decoration:none;text-align:center;padding:0;color:#fff;font-style:normal;font-size:35px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close:active{top:1px}.lity-image img{max-height:90vh!important; max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container,.lity-youtube .lity-container,.lity-vimeo .lity-container,.lity-facebookvideo .lity-container,.lity-googlemaps .lity-container{width:100%;max-width:964px}.lity-iframe-container{width:100%;height:0;padding-top:56.25%;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none}


/* ==========================================================================
   POPUP
   ========================================================================== */
#popup {width: 700px;  padding:10px; box-sizing: border-box; background: #fff; overflow: hidden; text-align: center}
#popup img {width: 100%; display: block;}
#popup h1 {font-size:50px; margin: 0px 0px 10px 0px; padding: 0px; color: #fff;}
#popup h2 {font-size:23px; margin: 0px 0px 10px 0px; padding: 0px; color: #fff;}
#popup h5, #popup h6 {font-weight: normal; margin: 0px;}
#popup p {font-size: 20px; margin-bottom: 0px; }

#popup .popup_imagecontainer {width: 100%; height: 450px; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; background: #000;}
#popup .popup_imagecontainer:before {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    opacity : 0.5;
    background-repeat: no-repeat; background-size: cover;
    margin: 20px;
}

#popup .popup_imagecontainer .pop_content {opacity: 1; position: absolute; transform: translateX(-50%) translateY(-50%); left: 50%; top: 50%; width: 100%;  padding: 40px; box-sizing: border-box}
#popup .popup_imagecontainer .pop_content p {padding: 20px;}
#popup .pop_content_single {padding: 20px}
#popup .col-1-2.pop_content_single {display: flex; justify-content: center; align-items: center; height: 400px;}

@media only screen and (max-width: 736px) {


    .lity-container {max-width: 90%!important;}
    #popup {width: 100%; min-width: 90vw}
    #popup .col-1-2 {width: 100%; float: none;}
    #popup .col-1-2.pop_content_single {height: auto; display: inline;}
    #popup h1 {font-size: 30px;}
    #popup h2 {font-size: 20px;}
    #popup p {font-size: 16px;}


}

/* ==========================================================================
   POLL
========================================================================== */
    
.fitting-form-container {padding: var(--spacer-2x); position: relative;}
.fitting-form-container section {display: none;}
.fitting-form-container section.active{}
h1.fitting-step {
color: #DEC8B7;
position: absolute;
top: 0;
left: 36px;
font-size: 40px;
}   

h1.fitting-step span {font-size: 80px}

.fitting-form-container h2 {margin: var(--spacer) 0 var(--spacer); text-align: center; font-size: 35px;}


.options-container {display: flex; flex-wrap: wrap; text-align: left; justify-content: center;}
.options-container .form-group {flex-basis: 50%; width: 50%; padding: 36px 36px 0;}
.options-container .form-group label {text-align: left; text-transform: uppercase; font-size: 12px;}
.options-container .form-group input {    border-bottom: 1px solid #ddc8b7!important;
    padding: 5px 0px;
    outline-width: 0;
    width: 100%;
    font-size: 12px;}

.options-container .form-group input[type="checkbox"] {width: auto;}
.options-container .form-group img {margin-bottom: 20px;}

.options-container .quest_info {font-size: 12px;}

.poll .check-contain{ margin: 10px;
    width: calc(33.33% - 35px);
    display: inline-block;
    cursor: pointer;}
 

.poll .check-contain input {display: none;}
.poll .check-contain label {display: block; padding: 14px 10px; border: 1px solid #DEC8B7; cursor: pointer; font-size: 12px; text-transform: uppercase; text-align: center;}
.poll .check-contain label:hover {background-color: #dec8b7a8;}
.poll .check-contain input:checked + label {background-color: #DEC8B7; color: #000;}


.check-image {  width: calc(33.33% - 35px)!important; margin: 10px; cursor: pointer;}
.check-image img {max-width: 100%;}
.check-image .check-contain {width: 100%; margin: 0;}
.check-image img.checked{border:1px solid rgb(222, 200, 183)}

input.other-text {
    border-bottom: 1px solid #dec8b7!important;
    margin-top: 20px;
}

.fitting-form-container .prev,
.fitting-form-container .next {
    text-transform: uppercase; font-size: 12px; cursor: pointer;
}

.fitting-form-container .next.disabled {cursor: default; opacity: 0.5; pointer-events: none;}

.fitting-form-container .prev .icon, 
.fitting-form-container .next .icon {

   width: 40px;
   height: 40px;
   display: inline-flex;
   justify-content: center; align-items: center;
	border: 1px solid #000; 
	border-radius: 50%;
    transition: all 0.6s ;
    margin: 0 10px

}
.fitting-form-container .prev svg {
    transform: rotate(180deg);
}

.fitting-form-container .prev:hover  .icon,
.fitting-form-container .next:hover  .icon{
	background-color: #000;
}

.fitting-form-container .prev:hover svg path,
.fitting-form-container .next:hover svg path{
	fill:#fff!important;
}

.fitting-pager span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #DEC8B7;
    margin: 0px 2px;
}

.fitting-pager span.done {background-color: #DEC8B7;}

.fitting-form-container .box {text-align: center;}
.fitting-form-container h5 {margin: var(--spacer) 0;}
section[data-step="3"] .form-group { max-width: 330px;}

section[data-step="6"] .check-image, section[data-step="8"] .check-image,
section[data-step="6"] .options-container .check-contain  { max-width: 330px;}

section#step_8 .options-container {
    max-width: 100%;
    margin: 0 auto; align-items: flex-end;
}

section#step_8 .options-container .check-image, section#step_8 .options-container .check-contain {
    width: calc(25.33% - 35px)!important;
}
section#step_8 .options-container .check-image .check-contain {width:100%!important;}

section[data-step="5"] .options-container, 
section[data-step="6"] .options-container {align-items: center;}

section[data-step="15"] .options-container .check-image, 
section[data-step="15"] .options-container .check-contain  {width: 200px!important;}

section[data-step="15"] .options-container .check-image  {display: flex; flex-flow: column;}

section[data-step="15"] .options-container .check-image .check-contain {order: 1;}
section[data-step="15"] .options-container .check-image img {order: 2;}

.fitting-form-container #myDropzone {width: 450px; max-width: 100%; border: 1px dotted #DEC8B7; margin: 0 auto; margin-top:var(--spacer-2x)}

.fitting-form-container #myDropzone .dz-button p {font-size: 12px; opacity:0.6}
.fitting-form-container #myDropzone  i{display: block;
    margin-bottom: 20px;
    color: #ddc8b7;
    font-size: 50px;
    line-height: 50px;
    height: auto;}

.fitting-form-container #myDropzone  .dz-preview .dz-image {border-radius: 8px}
.fitting-form-container #myDropzone  .dz-preview .dz-remove {margin-top:10px}
.fitting-form-container #myDropzone .dz-preview .dz-details .dz-filename {display: none}

.dropzone_feedback {
    max-width: 450px;
    text-align: center;
    margin: 10px auto;
   
}

.dropzone_feedback.error { background: #ebe0d6;
    padding: 10px;}

.final_loading {display: flex; flex-flow: column; width: 100%; min-height: 600px; justify-content: center; align-items: center;}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.final_loading  .final_msg {text-align: center;}
.final_loading p {margin:30px 0}
.final_loading a.button {width: auto;}


@media only screen and (max-width: 768px) {
    .fitting-pager {display: none}
    .fitting-form-container {padding: 0;}
    h1.fitting-step {position: static; margin-left: 20px;}
    .fitting-form-container h2 {font-size: 25px; text-align: left; padding: 0 20px;}
    section[data-step="3"] .form-group {max-width: 100%;}
    .options-container .form-group {
        flex-basis: 100%;
        width: 100%;
        padding: 20px 20px 0;
    }
    .poll .check-contain {margin: 0 10px; width: 100%;}
    .check-image, section#step_8 .options-container .check-image, section#step_8 .options-container .check-contain {width: 100%!important;}
    .fitting-form-container #myDropzone {width: 90%;}
    .fitting-footer {margin: 40px 0}
    .fitting-form-container textarea {width: 90%; margin:0 auto;}

    .fitting-online-head .overlay p {max-width: 100%;}
    .fitting-online-head .overlay {position: static;}
    .fitting-online-head ol li:before {font-size: 24px;}
    .fitting-online-head figure {display: none;}
    .fitting-online .accordion {width: 100%; margin:0 auto var(--spacer) auto}
    .poll .check-contain label {margin-bottom: 10px;}
    .check-image .check-contain {
        margin: unset!important;
    }

}



.loader {
  color: #1a1919;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  zoom: 0.5;
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #fff;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.1em 5.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #fff;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  -webkit-transform-origin: 0.1em 5.1em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    opacity: 0;
    justify-content: center;
    align-items: center;
    background: #0006;
    z-index: 9999;
    transition: opacity 1s ease-in;
}

.lightbox.active {
   
    display: flex;
    opacity: 1;
   
}
.newsletter-subscribe-btn {cursor: pointer;}

.news-btn {margin-left: 30px; text-transform: none; cursor: pointer;}
.newsletter-subscribe{
    padding: var(--spacer);
    background: #FFF;
    position: relative;
    width: 450px;
    transition: height 0.5s;
}

.newsletter-subscribe h3 {
    margin-bottom: 30px;
}
.newsletter-subscribe .button {background-color: #000; color: #fff; text-align: left; padding: 7px 12px; margin-top: 20px; font-size: 14px;}