/*
Theme Name:   Closet Valet
Theme URI:    https://theclosetvalet.com
Description:  Theme for Closet Valet
Author:  Liquid Thought
Author URI:  https://www.liquidthought.co.za
Version:  1.0.0
Text Domain:  closet-valet
*/

/* General Declarations ====================== */
body, html {background: #FEF1EA;margin: 0px;padding: 0px;color: #5B5E5E;font-size: 24px;-webkit-font-smoothing: antialiased;line-height: 1em;min-height: -webkit-fill-available;}

html {
overflow: hidden;
width: 100%;
height: 100000px;
}

body {
height: 100%;
width:100%;    
position: fixed;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

* {box-sizing: border-box;position: relative;z-index: 5;}
h1, h2, h3, h4, h5, p {margin-top: 0px;margin-bottom: 0px;line-height: 1em;}
p {line-height: 1.4em;}
a {color: #fff;text-decoration: none;}
ul.clear, .section-steps ul, .section-benefits ul, .footer ul.legal {margin: 0px;padding: 0px;list-style: none;}
img {max-width: 100%;height: auto;}
h2 {font-size: 56px;letter-spacing: -0.5px;line-height: 1.1em;}
@media screen and (max-width:768px) {
h2 { font-size: 48px;}
}

/* Fonts ====================== */
.Deca, body, .section-register button, .contact-form-holder button {font-family: 'Lexend Deca', sans-serif;font-weight: 400;font-style: normal;}
.Playfair, h1, h2, h3, .tag, .section-steps ul li:before, .footer .flex > div:nth-of-type(1), .section-register form .textbox, .navholder ul, .package-options ul h4, .section-contact-intro a.mail, .contact-form-holder form .textbox, .textbox  {font-family: 'Playfair Display', serif;font-weight: normal;font-style: normal;}
.Deca-light, .navholder ul li.social a, .intros p, .package-options ul h3  {font-family: 'Lexend Deca', sans-serif;font-weight: 300;}
.Deca-bold, .section-register h3 {font-family: 'Lexend Deca', sans-serif;font-weight: 700;}

/* Icon Fonts ====================== */
@font-face {font-family: 'cv-icons';
src: url('/wp-content/themes/closet-valet/fonts/icons/cv-icons.eot?766696724');
src: url('/wp-content/themes/closet-valet/fonts/icons/cv-icons.eot?766696724#iefix') format('embedded-opentype'), url('/wp-content/themes/closet-valet/fonts/icons/cv-icons.woff2?766696724') format('woff2'), url('/wp-content/themes/closet-valet/fonts/icons/cv-icons.woff?766696724') format('woff'), url('/wp-content/themes/closet-valet/fonts/icons/cv-icons.ttf?766696724') format('truetype'), url('/wp-content/themes/closet-valet/fonts/icons/cv-icons.svg?766696724#cv-icons') format('svg');font-weight: normal;font-style: normal;}
.icon:before, .social-share a:before {font-family: "cv-icons";font-style: normal;font-weight: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}


/* general buttons */
.button {display:inline-flex;height:40px;font-size:12px;text-transform: uppercase;justify-content: center;align-items: center;padding:0px 25px;line-height:1em;}
.button.button-outline {color:#fff;border:1px solid rgba(255,255,255,0.6);}
.button.button-purple {color:#fff;background:#414099;}

/* General ========================== */
.cv-loader {
    border: 24px solid;
    border-color: rgba(215, 189, 179, 0.15) rgba(215, 189, 179, 0.25) rgba(215, 189, 179, 0.35) rgba(215, 189, 179, 0.5);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: animloader 1s linear infinite;
    margin:30px calc((100% - 50px)/2);
  }

@keyframes animloader {
    0% {
      border-color: rgba(215, 189, 179, 0.15) rgba(215, 189, 179, 0.25) rgba(215, 189, 179, 0.35) rgba(215, 189, 179, 0.75);
}
    33% {
      border-color: rgba(215, 189, 179, 0.75) rgba(215, 189, 179, 0.15) rgba(215, 189, 179, 0.25) rgba(215, 189, 179, 0.35);
}
    66% {
      border-color: rgba(215, 189, 179, 0.35) rgba(215, 189, 179, 0.75) rgba(215, 189, 179, 0.15) rgba(215, 189, 179, 0.25);
}
    100% {
      border-color: rgba(215, 189, 179, 0.25) rgba(215, 189, 179, 0.35) rgba(215, 189, 179, 0.75) rgba(215, 189, 179, 0.15);
}
}
.transition, a.logo, a.button.pre-register {transition: all .3s linear;}
a.logo {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);display: inline-block;z-index: 100;}
a.logo:before {content: "\e801";font-family: 'cv-icons';font-size: 75px;line-height: 1em;}
.screen2 .logo, .screen3 .logo, .screen4 .logo,
.screen2 .nav-puller .button, .screen3 .nav-puller .button, .screen4 .nav-puller .button {color: #414099;}
a.button.pre-register {position: relative;font-size: 12px;text-transform: uppercase;height: 40px;padding: 0px 20px;border: 1px solid rgba(255, 255, 255, 0.2);display: flex;justify-content: center;align-items: center;color: #fff;z-index: 13;}
ul.dots {width: 10px;display: flex;flex-direction: column;position: fixed;z-index: 30;align-items: center;justify-content: center;right: 20px;top: 50%;transform: translateY(-50%);margin: 0px;padding: 0px;list-style: none;}
ul.dots li {margin: 5px 0px;width: 6px;height: 6px;background: #414099;border-radius: 20px;cursor: pointer;transition: all .3s linear;border: 1px solid rgba(0, 0, 0, 0);}
ul.dots li.over {width: 10px;height: 10px;transition: all .3s linear;background: none;border: 1px solid #414099;}

.nav-strip {display:none;}

@media screen and (max-width:768px) {
ul.dots {right: 10px;}
.nav-strip {display:block;position: fixed;background: #ffffff00;height: 64px;top: 0;left: 0;width: 100%;z-index: 20;backdrop-filter: blur(3px);}    
.woocommerce-checkout .nav-strip {display:none;}    
}

.nav-puller {position:fixed;top:48px;right:63px;z-index:1000;display:flex;}
.menu {height:40px;width:35px;display:flex;justify-content: space-between;align-items: flex-start;margin-left: 30px;flex-direction: column;padding:9px 0px;cursor:pointer;position:relative;z-index:1001;}
.menu>div {background:#fff;height:1px;width:100%;transition: all .2s linear;}
.navholder {position:fixed;top:0;left:0;width:100%;height:100vh;background:#FEE7DC;z-index:40;display:flex;justify-content: flex-end;align-items: center;padding:100px 60px 40px 60px;opacity:0;pointer-events: none;transition: opacity .3s linear;} 
.navholder ul {list-style: none;color:#D7BDB3;border-right:1px solid #D7BDB3;padding:0px;margin:0px;position:relative;}
.navholder ul a {color:#D7BDB3;font-size:45px;line-height:2em;padding-right:60px;;display:block;position:relative;transition:all .3s linear;}  
.navholder ul li{position:relative;} 
.navholder ul li a:hover, .navholder ul li.selected a:hover {color:#414099;} 
.navholder ul div {content:"";background:#414099;position:absolute;right:0px;top:0px;height:50px;width:2px;transform: translateX(50%);opacity:0;pointer-events: none;transition:all .2s linear;} 
.navholder ul.hover div {opacity:1;}
.navholder ul.hover li.selected a:after, .navholder ul.hover li.current-menu-item a:after {display:none;}
.navholder ul li.selected a, .navholder ul li.current-menu-item a {color:#414099;} 
.navholder ul li.selected a:after, .navholder ul li.current-menu-item a:after {content:"";background:#414099;position:absolute;right:0px;top:0px;height:100%;width:2px;transform: translateX(50%);transition:all .3s linear;}  
.navholder ul li.social {display:flex;}
.navholder ul li.social a {font-size:16px;letter-spacing:3.4px;text-transform:uppercase;padding:20px 0px;}
.navholder ul li.social a:nth-of-type(1) {padding-right:40px;}
body.navopen .navholder {opacity:1;pointer-events: all;} 
body.navopen .menu>div {background:#414099;} 
body.navopen .menu div:nth-of-type(1) {transform-origin: center;transform: rotate(45deg);position:absolute;left:0px;top:50%;} 
body.navopen .menu div:nth-of-type(2) {transform-origin: center;transform: rotate(-45deg);position:absolute;left:0px;top:50%;} 
body.navopen .menu div:nth-of-type(3) {display:none;}    
body.navopen a.button.pre-register {border-color:rgba(65,64,154,0.1);color:#414099;} 
body.navopen a.logo {color:#414099;}  

@media screen and (max-width:768px) {
    .nav-puller .button {padding-left:0px;padding-right:10px;} 
}

.screen2 a.button.pre-register, .screen3 a.button.pre-register, .screen4 a.button.pre-register {color: #414099;border-color: rgba(91, 94, 94, 0.1);}
.screen2 .menu>div, .screen3 .menu>div, .screen4 .menu>div {background:#414099;}
.screen2 a.button.pre-register, .screen3 a.button.pre-register, .screen4 a.button.pre-register {color: #414099;border-color: rgba(91, 94, 94, 0.1);}
.screen4 a.button.pre-register {color: #414099;border-color: #414099;}
.flex {display: flex;}
.marker {position: fixed;transform-origin: center;pointer-events: none;z-index: 20;height: 140px;width: 140px;}
.marker:before {content: "\e803";font-family: "cv-icons";font-size: 140px;opacity: 0.4;line-height: 1em;}
.contentmarker {position: absolute;transform-origin: center;pointer-events: none;z-index: 20;height: 140px;width: 140px;opacity:0;}
.contentmarker:before {content: "\e803";font-family: "cv-icons";font-size: 140px;line-height: 1em;}

.positionBar {position: fixed;right: 0px;top: 0px;width: 5px;height: 100%;z-index: 25;}
.positionBar span {position: absolute;width: 100%;height: 0%;top: 0;left: 0;background: #414099;}
.section {width: 100%;height: 100vh;position: relative;top: 0;left: 0;display: block;min-height: -webkit-fill-available;overflow:hidden;}
.section.over {display: block;}
.background {position: fixed;left: 0;top: 0;width: 100%;height: 100vh;z-index: 1;background: #FEF1EA;transition: background .3s ease-out;min-height: -webkit-fill-available;}
h2 {font-size: 56px;line-height: 1.1em;max-width: 640px;}
h2 span {font-size: 100px;line-height: 1em;display: block;}

.step0 .background, .step0 .section-steps {background: #FEF1EA;}
.step1 .background, .step1 .section-steps {background: #EFE4E1;}
.step2 .background, .step2 .section-steps {background: #F3F2F4;}
.step3 .background, .step3 .section-steps {background: #EBEBF4;}
.screen3 .background {background: #EFE4E1;}
.screen4 .background {background: #FEF1EA;}
.screen1 .marker {top: 20%;right: 13%;color: #fff;animation-name: scrollerwhite;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.screen2.step0 .marker {left: 424px;right: auto;top: auto;bottom: 10%;color: #5B5E5E;opacity: 0.4;animation-name: scroller;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.screen2.step1 .marker {left: 213px;right: auto;top: auto;bottom: 5%;color: #5B5E5E;opacity: 0.4;animation-name: scroller1;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.screen2.step2 .marker {left: 35%;right: auto;top: auto;bottom: 5%;color: #5B5E5E;opacity: 0.4;animation-name: scroller2;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.screen2.step3 .marker {left: 45%;right: auto;top: auto;bottom: 5%;color: #5B5E5E;opacity: 0.4;animation-name: scroller3;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.screen3 .marker {left: calc(50% - 450px);right: auto;top: auto;bottom: 7%;color: #5B5E5E;opacity: 1;animation-name: scroller4;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.screen4 .marker {left: calc(50% - 150px);right: auto;top: auto;bottom: 7%;color: #5B5E5E;opacity: 1;animation-name: scroller5;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.screen3 .section-steps, .screen4 .section-steps {opacity: 0;pointer-events: none;}

/* Intro ========================== */
.section-intro.over, .section-steps.over {display: block;}
.section-intro:before {content: "";width: 100%;height: 100%;top: 0;left: 0;position: absolute;background: url("/wp-content/themes/closet-valet/images/img-bg-logo.svg") left top no-repeat;background-size: auto 100%;}
.section-intro {color: #fff;position: relative;z-index: 12;overflow: hidden;}
.section-intro .flex {position: relative;height: 100%;align-items: center;justify-content: space-between;}
.section-intro .flex > div:nth-of-type(1) {flex: 1;max-width: 666px;margin-left: 170px;margin-right: 80px;font-size: 10px;line-height: 1em;}
.section-intro h1 {font-size: 10em;}
.section-intro .flex > div:nth-of-type(1) p {font-size: 24px;line-height: 1.3em;font-weight: 300;max-width: 427px;margin-top: 40px;}
.section-intro .flex > div:nth-of-type(2) {flex: 1;max-width: 510px;align-self: flex-end;}
.section-intro .tag {background: #fff;padding: 60px;font-size: 30px;line-height: 1.1em;color: #5B5E5E;margin-bottom: 18%;}
.section-intro .tag:before {content: "";background: #5B5E5E;width: 1px;height: 180px;left: 60px;bottom: -150px;position: absolute;}
.section-intro .tag p {max-width: 276px;margin:0px;}
a.button.pre-register span {margin-left: 4px;}
@media screen and (max-width:1340px) {
.section-intro .flex > div:nth-of-type(1) { font-size: calc(100vw / 160);}
}
@media screen and (max-width:1200px) {
.section-intro .flex > div:nth-of-type(1) p { max-width: 380px;}
}
@media screen and (max-width:992px) {
.section-intro:before { background-position: left -60px top;}
.section-intro .flex > div:nth-of-type(1) { margin-left: 80px;}
.section-intro .tag { padding: 40px; font-size: 24px; margin-bottom: 100px;min-width: 300px;}
.section-intro .tag:before { left: 40px; bottom: -100px; height: 120px;}
.section-intro .tag { margin-left: 60px; margin-bottom: 40px;}
.section-intro .flex > div:nth-of-type(2) { max-width: none; width: 100%; flex: 0;} 
a.logo { top: 16px; left: 24px; transform: none;}
a.logo:before { font-size: 38px;}
a.button.pre-register {font-size: 11px; height: 32px; padding: 0px 6px;}
a.button.pre-register span { display: none;}
.menu {height:32px;padding:6px 0px;margin-left:24px;}
.nav-puller {top: 25px;right: 20px;}
.navholder {padding: 80px 20px 0px 20px;}  
.navholder ul a {font-size: 32px;padding-right:20px;} 
.navholder ul li.social a {font-size:13px;}
}
@media screen and (max-width:768px) {
.section-intro:before { display: none;}
.section-intro .flex { flex-direction: column; align-items: flex-end; justify-content: flex-end; padding-top: 50px;}
.section-intro .tag { font-size: 20px; margin-left: 60px; margin-bottom: 40px;}
.section-intro .flex > div { flex: 0 !important;}
.section-intro .flex > div:nth-of-type(1) { margin: auto 20px; align-self: flex-start;}
.section-intro h1 { font-size: 50px; max-width: 340px;}
.section-intro .flex > div:nth-of-type(1) p { font-size: 18px; margin-top: 24px; max-width: 350px;}
.section-intro .tag { padding: 24px 24px 24px 40px;min-width:300px;} 
.marker {width: 80px; height: 80px;}
.marker:before { content: "\e802"; font-size: 75px; opacity: 0.6;}
.contentmarker {width: 80px; height: 80px;}
.contentmarker:before { content: "\e802"; font-size: 75px;}    
.screen1 .marker { top: 31%; right: 24px;}     
}
@media screen and (max-height:620px) {
.navholder ul a {font-size: 30px;line-height:1.8em;}
}
@media screen and (max-width:576px) {
.section-intro h1 { max-width: 290px;}
.section-intro .flex > div:nth-of-type(1) p {max-width: 290px;}
}
@media screen and (max-width:576px) and (max-height:580px) {
.section-intro .tag { margin-bottom: 0px;min-width:none;}   
}
.screen1 .section-intro {display: block;}
.foreground {opacity:0;pointer-events: none;}
.screen1 .foreground, .screen2 .foreground {z-index: 1;background: url("/wp-content/themes/closet-valet/images/img-bg-section-2.jpg") center top no-repeat;background-size: cover;position: fixed;width: 100%;height: 100vh;top: 0px;left: 0px;pointer-events: none;opacity: 0;transition: opacity .3s linear;}

@media screen and (max-width:768px) {
.screen1 .foreground, .screen2 .foreground { z-index: 1; background: url("/wp-content/themes/closet-valet/images/img-bg-section-2-mobile.jpg") center center no-repeat; background-size: cover;}
}

.screen1 .foreground {opacity: 1;}
.screen2 .section-steps {display: block;}
.screen3 .section-benefits {display: block;opacity:1;}
.screen4 .section-edit {    display: flex;opacity: 1;flex-direction: column;}
.screen4 .section-register {display: block;}

/* Steps ========================== */
.section-steps {background: #FEF1EA;transition: background .5s linear;transition: position .3s linear;min-height: -webkit-fill-available;}
.screen2 .section-steps ul {position:fixed;top:0;width: 100%;}
.steps-title {font-weight: 300;font-size: 14px;line-height: 1.1em;letter-spacing: 3px;text-transform: uppercase;position: absolute;top: 24%;/*190px*/left: 60px;}
.section-steps ul {height: 100vh;}
.section-steps ul li {border-left: 1px solid rgba(91, 94, 94, 0.1);flex: 1;padding: calc(24vh + 40px) 60px 60px 60px;overflow: hidden;transition: all .5s linear;min-width: 13.33333%;}
.section-steps ul li:nth-of-type(1) {border: none;}
.section-steps ul li:before {content: attr(data-step);position: absolute;left: 60px;top: 44vh;font-size: 40px;font-style: italic;line-height: 1em;}
.section-steps ul li h2 {opacity: 0;transition: all .4s ease-out;transform: translateX(100px);}
.section-steps ul li .imgholder {position: absolute;right: 0px;top: 0px;width: 0px;height: 100%;overflow: hidden;pointer-events: none;opacity: 0;transform: translateX(-30px);}
.section-steps ul li:nth-of-type(1) {min-width: 0;}
.step0 .section-steps ul li:nth-of-type(1) {min-width: 60%;}
.step1 .section-steps ul li:nth-of-type(1), .step2 .section-steps ul li:nth-of-type(1), .step3 .section-steps ul li:nth-of-type(1) {flex: 0;max-width: 0px;padding: 0px;}
.step0 .section-steps ul li:nth-of-type(1) h2, .step1 .section-steps ul li:nth-of-type(2) h2, .step2 .section-steps ul li:nth-of-type(3) h2, .step3 .section-steps ul li:nth-of-type(4) h2 {max-width: 520px;animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;}
.step0 .section-steps ul li:nth-of-type(1) h2 {max-width: 640px;}
.step1 .section-steps ul li:nth-of-type(2), .step2 .section-steps ul li:nth-of-type(3), .step3 .section-steps ul li:nth-of-type(4) {padding-top: calc(24vh + 50px);padding-left: 170px;min-width: 74%;width: 74%;}
.step2 .section-steps ul li:nth-of-type(3), .step3 .section-steps ul li:nth-of-type(4) {padding-left: 184px;}
.step1 .section-steps ul li:nth-of-type(2):before, .step2 .section-steps ul li:nth-of-type(3):before, .step3 .section-steps ul li:nth-of-type(4):before {top: calc(24vh - 14px);font-size: 200px;}
.section-steps ul li:nth-of-type(2) .imgholder {background: url("/wp-content/themes/closet-valet/images/img-section-3.jpg") right top no-repeat;background-size: auto 100%;}
.section-steps ul li:nth-of-type(3) .imgholder {background: url("/wp-content/themes/closet-valet/images/img-section-4.jpg") right top no-repeat;background-size: auto 100%;}
.section-steps ul li:nth-of-type(4) .imgholder {background: url("/wp-content/themes/closet-valet/images/img-section-5.jpg") right top no-repeat;background-size: auto 100%;}
.step1 .section-steps ul li:nth-of-type(2) .imgholder, .step2 .section-steps ul li:nth-of-type(3) .imgholder, .step3 .section-steps ul li:nth-of-type(4) .imgholder {z-index: 1;animation-name: images;animation-delay: .3s;animation-duration: .5s;animation-fill-mode: both;}
@media screen and (max-width:1250px) {
.section-steps ul li { font-size: calc(100vw / 135); padding-right: 20px;}
.section-steps ul li h2 { font-size: 4.8em;}
.section-steps ul li h2 span { font-size: 2em;}
.section-steps ul li .imgholder { top: auto; bottom: 0px; height: 50%;}
}
@media screen and (max-width:768px) {
.section-steps ul li:before { display: none;}
.steps-title { font-size: 13px; letter-spacing: 2.8px; top: 120px; left: 24px;}
.step1 .section-steps ul li:nth-of-type(2) h2, .step2 .section-steps ul li:nth-of-type(3) h2, .step3 .section-steps ul li:nth-of-type(4) h2 { max-width: 60%;}
.section-steps ul li { padding: 170px 5px 5px 5px; min-width: 16px;}
.step0 .section-steps ul li:nth-of-type(1) { min-width: calc(100% - 48px); padding: 170px 24px 5px 24px;}
.step1 .section-steps ul li:nth-of-type(2), .step2 .section-steps ul li:nth-of-type(3), .step3 .section-steps ul li:nth-of-type(4) { padding-left: 24px; min-width: calc(100% - 60px); width: 74%;}
.section-steps ul li h2 { font-size: 32px;}
.section-steps ul li h2 span { font-size: 56px;}
.screen2.step0 .marker { left: auto; right: 100px;}
.step1 .section-steps ul li:nth-of-type(2):before, .step2 .section-steps ul li:nth-of-type(3):before, .step3 .section-steps ul li:nth-of-type(4):before { top: 137px; font-size: 120px; line-height: 1em; left: 24px; display: block;}
.step1 .section-steps ul li:nth-of-type(2), .step2 .section-steps ul li:nth-of-type(3), .step3 .section-steps ul li:nth-of-type(4) { padding-top: 270px;}
.step1 .section-steps ul li:nth-of-type(2) h2, .step2 .section-steps ul li:nth-of-type(3) h2, .step3 .section-steps ul li:nth-of-type(4) h2 { max-width: 100%; padding-right: 40px;}
.screen2.step1 .marker { left: auto; right: 80px; top: 174px; bottom: auto;}
.screen2.step2 .marker { left: auto; right: 80px; top: 174px; bottom: auto;}
.screen2.step3 .marker { left: auto; right: 24px; top: 174px; bottom: auto;}
}
@media screen and (max-width:576px) {
.section-steps ul li .imgholder { height: 40%;}
.step0 .section-steps ul li:nth-of-type(1) h2 {max-width: 100%;}    
}
@media screen and (max-height: 680px) and (max-width: 576px) {
.section-steps ul li .imgholder { height: 34%;}
}

/* Animations ========================== */
@keyframes headers {0% { opacity: 0;}
100% { transform: none; opacity: 1;}
}
@keyframes images {0% { width: 0px; opacity: 0; transform: translateX(-30px);}
50% { opacity: 1;}
100% { width: 700px; opacity: 1; transform: none;}
}
@keyframes boxes {0% { opacity: 0;}
100% { transform: none; opacity: 1;}
}
@keyframes scroller {0% { opacity: 0; transform: scale(0.5);}
50% { opacity: 1; transform: scale(1.2);}
100% { opacity: 0.4; transform: scale(1);}
}
@keyframes scroller1 {0% { opacity: 0; transform: scale(0.5);}
50% { opacity: 1; transform: scale(1.2);}
100% { opacity: 0.4; transform: scale(1);}
}
@keyframes scroller2 {0% { opacity: 0; transform: scale(0.5);}
50% { opacity: 1; transform: scale(1.2);}
100% { opacity: 0.4; transform: scale(1);}
}
@keyframes scroller3 {0% { opacity: 0; transform: scale(0.5);}
50% { opacity: 1; transform: scale(1.2);}
100% { opacity: 0.4; transform: scale(1);}
}
@keyframes scroller4 {0% { opacity: 0; transform: scale(0.5);}
50% { opacity: 1; transform: scale(1.2);}
100% { opacity: 0.4; transform: scale(1);}
}
@keyframes scroller5 {0% { opacity: 0; transform: scale(0.5);}
50% { opacity: 1; transform: scale(1.2);}
100% { opacity: 0.4; transform: scale(1);}
}
@keyframes scrollerwhite {0% { opacity: 0; transform: scale(0.5);}
50% { opacity: 1; transform: scale(1.2);}
100% { opacity: 1; transform: scale(1);}
}
@keyframes processIntroHeader {
0% { }
25% { opacity:1;color:#fff;}
75% { opacity:1;color:#fff;}
100% { opacity:1;color:#fff;}
}
@keyframes processheader {0% { opacity: 0;}
100% { transform:translateX(-40%); opacity: 1;}
}

/* Benefits ========================== */
.section-benefits {padding-top: 100px;padding-top: calc(30vh);}
.section-benefits .flex {align-items: flex-start;justify-content: center;height: 100%;}
.section-benefits .flex > div:nth-of-type(1) {max-width: 550px;}
.section-benefits .flex > div:nth-of-type(2) {margin-left: 130px;margin-top: 10vh;}
.section-benefits p {max-width: 430px;margin-top: 40px;font-weight: 300;}
.section-benefits ul {font-size: 14px;font-weight: 300;letter-spacing: 3px;line-height: 1.1em;text-transform: uppercase;padding-left: 80px;}
.section-benefits ul:before {content: "";width: 60px;height: 1px;background: #5B5E5E;position: absolute;top: 6px;left: 0px;}
.section-benefits ul li {margin-bottom: 40px;transform: translateX(50px);opacity: 0;}
.section-benefits h2, .section-benefits p {transform: translateX(-50px);}
.screen3 .section-benefits h2 {animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;}
.screen3 .section-benefits p {animation-name: headers;animation-delay: .7s;animation-duration: .5s;animation-fill-mode: both;}
.screen3 .section-benefits ul {animation-name: headers;animation-delay: .8s;animation-duration: .5s;animation-fill-mode: both;}
.screen3 .section-benefits ul li {animation-name: headers;animation-delay: 1.0s;animation-duration: .5s;animation-fill-mode: both;}
.screen3 .section-benefits ul li:nth-of-type(2) {animation-delay: 1.1s;}
.screen3 .section-benefits ul li:nth-of-type(3) {animation-delay: 1.2s;}
.screen3 .section-benefits ul li:nth-of-type(4) {animation-delay: 1.3s;}
.screen3 .section-benefits ul li:nth-of-type(5) {animation-delay: 1.4s;}
.screen3 .section-benefits ul li:nth-of-type(6) {animation-delay: 1.5s;}
.screen3 .section-benefits ul li:nth-of-type(7) {animation-delay: 1.6s;}
@media screen and (max-width:1080px) {
.section-benefits .flex { padding-left: 24px; padding-right: 24px;}
.section-benefits .flex > div:nth-of-type(1) { max-width: 350px;}
}
@media screen and (max-width:768px) {
.section-benefits .flex { flex-direction: column; padding: 120px 24px 0px 24px; justify-content: flex-start;}
.section-benefits h2 { font-size: 32px; max-width: 220px;}
.section-benefits { padding-top: 0;}
.section-benefits p { margin-top: 18px; font-size: 20px;}
.section-benefits .flex > div:nth-of-type(2) { margin-left: 0; margin-top: 40px;}
.section-benefits ul:before { width: 40px;}
.section-benefits ul { padding-left: 60px;}
.section-benefits ul li { margin-bottom: 24px; font-size: 13px;}
}

/* Edit homepage ========================== */
.section-edit {/*padding-top: 100px;padding-top: calc(30vh);*/}
.section-edit .button {height:40px;}
.section-edit .flex {justify-content: center;height: 100%;max-width: 1050px;margin: 0px auto;transform: translateX(10px);align-items: center;}
.section-edit .flex > div:nth-of-type(1) {max-width: 530px;width:100%;}
.section-edit .flex > div:nth-of-type(2) {margin-left: 130px;margin-top: 66px;max-width:400px;}
.section-edit .steps-title {position:relative;top:0;left:0;margin-top:20px;margin-bottom:35px;}
.section-edit p {max-width: 430px;margin-top: 40px;font-weight: 300;}
.section-edit ul {font-size: 14px;font-weight: 300;letter-spacing: 3px;line-height: 1.1em;text-transform: uppercase;padding-left: 80px;list-style:none;}
.section-edit ul:before {content: "";width: 60px;height: 1px;background: #5B5E5E;position: absolute;top: 6px;left: 0px;}
.section-edit ul li {margin-bottom: 40px;transform: translateX(50px);opacity: 0;}
.section-edit h2 {font-size:100px;}
.section-edit h3 {font-size:56px;}
.article-link .imgHolder {margin-bottom:20px;max-width:260px;}
.article-link {color:#5B5E5E;}
.article-link h3 {font-family: "PlayfairDisplay-Regular";font-size: 20px;font-weight: 400;line-height:1.3em;letter-spacing: normal;text-transform:none;}
.article-link span {margin-top:10px;text-transform: uppercase;font-size:12px;opacity: 0.5;color: rgba(91, 94, 94, .5);display:block;font-weight:400;}
.section-edit .button {margin-top:45px;}
.section-edit h2, .section-edit p, .section-edit h3, .section-edit .steps-title, .section-edit .button {transform: translateX(-50px);opacity:0;}
.screen4 .section-edit h2 {animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;opacity:1;}
.screen4 .section-edit h3 {animation-name: headers;animation-delay: .9s;animation-duration: .5s;animation-fill-mode: both;opacity:1;}
.screen4 .section-edit p {animation-name: headers;animation-delay: 1.2s;animation-duration: .5s;animation-fill-mode: both;opacity:1;}
.screen4 .section-edit .steps-title {animation-name: headers;animation-delay: .7s;animation-duration: .5s;animation-fill-mode: both;opacity:1;}
.screen4 .section-edit .button {animation-name: headers;animation-delay: 1.5s;animation-duration: .5s;animation-fill-mode: both;opacity:1;}
.screen4 .section-edit ul {animation-name: headers;animation-delay: .8s;animation-duration: .5s;animation-fill-mode: both;}
.screen4 .section-edit ul li {animation-name: headers;animation-delay: 1.0s;animation-duration: .5s;animation-fill-mode: both;}
.screen4 .section-edit ul li:nth-of-type(2) {animation-delay: 1.1s;}

.page-template-template-the-edit .section-edit  {padding:70px;padding-top:180px;height:auto;min-height:0;}
.page-template-template-the-edit .section-edit .flex {width:100%;max-width:1310px;justify-content: space-between;align-items: flex-end;transform:none;}

@media screen and (max-width:1100px) {
.section-edit .flex { padding-left: 24px; padding-right: 24px;max-width:none;justify-content: space-between;}
.section-edit .flex > div:nth-of-type(1) {max-width: none;}   
.section-edit .flex > div:nth-of-type(2) {margin:0px;margin-top: 66px;}      
}

@media screen and (max-width:980px) {
.section-edit h2 {font-size:56px;}
.section-edit h3 {font-size:32px;}
.article-link h3 {font-size: 18px;} 
.section-edit .flex > div:nth-of-type(2) {margin:0px;margin-top: 140px;}  
.section-edit ul {padding-left: 50px;}
.section-edit ul:before { width: 32px;}
.section-edit .flex {transform: translateX(0px);max-width:850px;width: 100%;}    
}

@media screen and (max-width:600px) {
.section-edit {height:auto !important;}    
.section-edit .flex { flex-direction: column; padding: 120px 24px 0px 24px; justify-content: flex-start;}
.section-edit { padding-top: 0;}
.section-edit p { margin-top: 18px; font-size: 20px;}
.section-edit .flex > div:nth-of-type(2) { margin-left: 0; margin-top: 40px;}
.section-edit ul li {margin-bottom: 50px;}
}

@media screen and (max-width:992px) {
.page-template-template-the-edit .section-edit  {padding:130px 0 70px 0;}
}
@media screen and (max-width:600px) {
.page-template-template-the-edit .section-edit  {padding:0px 0 70px 0;}
}


/* Pre-register ========================== */
.section-register {}
.section-register .flex {height: 100%;}
.section-register .flex > div {flex: 1;}
.section-register .flex > div:nth-of-type(1) {flex: 0 0 calc(50% + 53px);display: flex;flex-direction: column;justify-content: center;align-items: flex-end;}
.section-register .flex > div:nth-of-type(1) div {max-width: 520px;margin-right: 80px;}
.section-register .flex > div:nth-of-type(2) {background: #FFFFFF;transition: all .3s linear;opacity: 0;transform: translateX(200px);display: flex;flex-direction: column;justify-content: center;align-items: flex-start;}
.screen4 .section-register .flex > div:nth-of-type(2) {animation-name: boxes;animation-delay: .6s;animation-duration: .5s;animation-fill-mode: both;}
.section-register p {transform: translateX(-100px);font-weight: 300;font-size: 16px;line-height: 1.8em;max-width: 320px;margin-top: 24px;}
.section-register h3 {transform: translateX(-100px);text-transform: uppercase;font-weight: 700;font-size: 20px;letter-spacing: 2px;margin-top: 60px;}
.section-register h2 {transform: translateX(-100px);}
.screen4 .section-register h2 {animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;}
.screen4 .section-register h3 {animation-name: headers;animation-delay: .7s;animation-duration: .5s;animation-fill-mode: both;}
.screen4 .section-register p {animation-name: headers;animation-delay: .9s;animation-duration: .5s;animation-fill-mode: both;}
.section-register form {margin-left: 60px;width: 100%;max-width: 600px;}
.section-register form p {font-size: 12px;line-height: 1.1em;}
.section-register button {background: #414099;border: none;display: flex;height: 100px;width: 100%;justify-content: space-between;align-items: center;font-size: 20px;color: #fff;padding: 0px 60px;margin-top: 28px;cursor: pointer;transition: background .3s linear;letter-spacing: 2px;}
.section-register button:hover {background: #5B5E5E;}
@media screen and (max-height:615px){
.section-register button {height: 60px;}    
}
.section-register form label {font-size: 12px;font-weight: 300;letter-spacing: 1px;text-transform: uppercase;display: block;line-height: 1em;margin-bottom: 5px;margin-top: 15px;}
.section-register button:after {content: "\e800";font-size: 15px;font-family: 'cv-icons';}
.section-register form .validation {display: none;color: #414099;}
.textbox::-webkit-input-placeholder {color:rgba(91,94,94,0.4);}
.textbox:-ms-input-placeholder {color:rgba(91,94,94,0.4);}
.textbox::placeholder {color:rgba(91,94,94,0.4);}
.thankyou {margin-left: 60px;width: 100%;max-width: 600px;}
.share a {font-family: 'cv-icons';margin-right: 15px;font-size: 26px;color: #414099;}
.share a.icon-email:before {content: "\e804";}
.share a.icon-whatsapp:before {content: "\f232";}
.share a.icon-twitter:before {content: "\f099";}
.share a.icon-linkedin:before {content: "\f318";}
.share a.icon-facebook:before {content: "\f30c";}
.share p, .thankyou p {line-height: 1.2em;max-width: none;}
@media screen and (max-width:1440px) {
.section-register button { max-width: calc(100% - 60px);}
}
@media screen and (max-width:1100px) {
.section-register .flex > div:nth-of-type(1) { flex: 0 0 calc(40%);}
.section-register .flex > div:nth-of-type(1) div { padding: 0px 24px 80px 24px; margin-right: 20px;}
}
@media screen and (max-width:992px) {
.section-register .flex { flex-direction: column; padding: 120px 0px 0px 0px; align-items: flex-start;}
.section-register .flex > div:nth-of-type(2) { width: 100%; padding: 40px 0px 80px 24px;}
.section-register form, .thankyou { margin-left: 0; width: 100%; max-width: 100%; margin-bottom: 200px;}
.section-register form label { font-size: 10px; letter-spacing: 0.8px;}
.screen4 .section-register { overflow-y: auto;}
.section-register button { height: 80px; max-width: 100%;}
.section-register form > div { padding-right: 24px;}
.screen4 .marker { left: auto; right: 23px; top: 211px; bottom: auto;}
}
@media screen and (max-width:768px) {
.section-register h2 { font-size: 32px; max-width: 220px;}
.section-register h3 { font-size: 16px;}
.section-register p { font-size: 14px;}
.section-register form, .thankyou { margin-bottom: 30px;}    
}

/* Footer ========================== 4 */
.heightProxy {height: calc(100vh * 7);position: absolute;width: 5px;right: 0px;top: 0px;z-index: 20;}
.footer {background: #fff;padding: 50px 60px 60px 60px;position: relative;left: 0;top: 0;width: 100%;height: auto;box-shadow: 0 0 20px 0 rgb(0, 0, 0, 0.2);z-index: 21;}
.footer a {color: #5B5E5E;}
.footer .flex {justify-content: space-between;}
.footer .flex > div:nth-of-type(1) {flex: 1;max-width: 760px;padding-right:20px;}
.footer .flex > div:nth-of-type(2) {text-align: right;display: flex;flex-direction: column;justify-content: space-between;font-weight: 300;}
.footer .social a {font-size: 14px;letter-spacing: 3px;text-tranform: uppercase;line-height: 1em;}
.footer .social img {width:35px;}
.footer ul.legal {display: flex;height: fit-content;}
.footer ul.legal li {padding: 0px 10px;border-right: 1px solid rgba(91, 94, 94, 0.5);}
.footer ul.legal li:nth-last-of-type(1) {padding-right: 0px;border-right: none;}
.footer .legal a, .footer .legal {font-size: 12px;line-height: 1em;}
.footer-nav {list-style:none;margin:30px 0 0 0;padding:0px;display:flex;justify-content: space-between;width:100%;}
.footer-nav a {color: #414099;font-size: 20px;font-weight: 400;letter-spacing: 0px;line-height: 1.1em;}
.footer-logo {height:50px;width:auto;}

@media screen and (max-width:1100px) {
.footer .flex {flex-direction:column;}
.footer  {padding-left:0px;padding-right:0px;}
.footer .flex > div {padding-left:60px;padding-right:60px;}    
.footer .flex > div:nth-of-type(2) {border-top:1px solid rgba(91,94,94,0.2);margin-top:30px;padding-top:30px;display:flex;flex-direction:row-reverse;}
}

@media screen and (max-width:768px) {
.footer .flex { flex-direction: column; align-items: flex-start;}
.footer .flex > div {width:100%;}
.footer .flex > div:nth-of-type(2) { text-align: left;align-items: flex-start;}
.footer ul.legal { display: block;}
.footer ul.legal li { padding: 0px; border-right: none; margin-bottom: 21px;}
.footer a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}
.footer-nav a {font-size: 20px;color: rgba(91, 94, 94, .7);text-decoration:none;line-height:1.8em;}  
.footer-nav {flex-direction:column;margin-top:17px;}
.footer-logo {height:30px;}  
.footer .legal a, .footer .legal {font-size:11px;text-decoration: none;} 
.footer .social {margin:0;}
.footer .flex > div {padding-left: 25px;padding-right: 25px;}    
}

/* rotate style for mobile landscape*/
.landscapeMessage {display: none;}
body.rotated .landscapeMessage {display: flex;justify-content: center;align-items: center;position: fixed;z-index: 30;background: rgba(255, 255, 255, 0.9);border-radius: 10px;padding: 30px;text-align: center;width: calc(100% - 40px);left: 20px;top: 20px;height: calc(100vh - 40px);box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);}
.landscapeMessage h2 {font-size: 25px;}



/* general intro h1 scaling */
.intros .flex {position: relative;height: 100%;align-items: center;justify-content: space-between;color:#fff;}
.intros .flex > div:nth-of-type(1) {flex: 1;max-width: 666px;margin-left: 170px;margin-right: 80px;font-size: 10px;line-height: 1em;}
.intros h1 {font-size:10em;}
.intros p {font-size:24px;line-height:1em;margin:30px 0px;}
.intros .buttons {display:flex;}

/* markers */
.about1 .marker {bottom: 10%;right: 10%;color: #fff;animation-name: scrollerwhite;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.about2 .marker {display:none;}
.about3 .marker {bottom: 10%;left: auto;right: 3%;animation-name: scroller;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.about4 .marker {bottom: 10%;left: calc(50% - 110px);animation-name: scroller;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.screen4 .marker {display:none;}

@media screen and (max-width: 768px){
.about1 .marker {bottom: auto;top:17%;right: 12%;} 
.about2 .contentmarker {right: 20px;top: -126px;opacity:0.4;}
.about3 .marker {right:20%;}   
.about4 .marker {right:10%;left:auto;}    
}

@media screen and (max-width: 576px){
.about2 .marker {top: 78px;right: 60px;}  
}

.about2 .logo, .about3 .logo, .aboutstep1 .logo, .aboutstep2 .logo, .aboutstep3 .logo, .aboutstep4 .logo, .about4 .logo {color: #414099;}
.about2 .menu>div, .about3 .menu>div, .aboutstep1 .menu>div, .aboutstep2 .menu>div, .aboutstep3 .menu>div, .aboutstep4 .menu>div, .about4 .menu>div {background: #414099;}
.about2 a.button.pre-register, .about3 a.button.pre-register, .aboutstep1 a.button.pre-register, .aboutstep2 a.button.pre-register, .aboutstep3 a.button.pre-register, .aboutstep4 a.button.pre-register, .about4 a.button.pre-register {color: #414099;border-color: rgba(91, 94, 94, 0.1);}


@media screen and (max-width: 1340px){
.intros .flex > div:nth-of-type(1) {font-size: calc(100vw / 160);}
.intros .flex > div:nth-of-type(1) {margin:0px 80px;}
}
@media screen and (max-width: 768px){
.intros h1 {font-size: 56px;max-width: 340px;}
.intros p {font-size:18px;margin:30px 0px;}
.intros .flex > div:nth-of-type(1) {margin:0px 20px;}
}
@media screen and (max-width: 576px){
.intros .flex {width:calc(100% - 10px);}    
.intros h1 {font-size: 50px;}
.intros .buttons {flex-direction:column;}
.intros .buttons .button {margin:0px 0px 16px 0px;}
}

.section-about-intro {display:flex;background:url(/wp-content/themes/closet-valet/images/img-about-header.webp) center top no-repeat;background-size:cover;position:relative;}
.section-about-intro .button-outline {margin-right:20px;}
.section-about-intro p {max-width:540px;}
@media screen and (max-width: 576px){
.section-about-intro {background-image:url(/wp-content/themes/closet-valet/images/img-about-header-mobile.webp);}
}

.about1 .background {background: #FFF0E9;}
.about2 .background {background: #fdd7cb;}
.about3 .background {background: #FEE7DC;}
.aboutstep1 .background {background: #EAD1C7;}
.aboutstep2 .background {background: #D7BDB3;}
.aboutstep3 .background {background: #DED3D5;}
.aboutstep4 .background {background: #E1DEE4;}
.about4 .background {background: #FCD8CA;}



/* section about */

.process-box.box1.mobile {display:block;position:absolute;top:0px;left:0px;z-index:20;opacity:1;transition: all .5s linear;transition-delay: .3s;}
.aboutstep1 .process-box.box1.mobile, .aboutstep2 .process-box.box1.mobile, .aboutstep3 .process-box.box1.mobile, .aboutstep4 .process-box.box1.mobile {position:fixed;}
.about3 .process-box.box1.mobile {opacity:1;transition: all .5s linear;transition-delay: .3s;}

.section.section-about {position:relative;display:block;background:url(/wp-content/themes/closet-valet/images/img-about-logo-right.svg) right top no-repeat;background:#fdd7cb;z-index:10;}
.section-about .flex {flex-direction:column;}
.section-about .flex>div:nth-of-type(1) {padding:190px 0px 120px 155px;}
.section-about .flex>div:nth-of-type(2) {padding-bottom:120px;}
.section-about .puller {font-size:20px;line-height:1em;text-transform: uppercase;font-weight:700;letter-spacing:2px;}
.section-about h2 {margin:40px 0px 60px 0px;max-width:790px;}
.section-about p {font-weight:300;max-width:555px;}

.section-about .flex img:nth-of-type(1) {z-index:10;}
.section-about .flex img:nth-of-type(2) {z-index:8;position: absolute;left: 490px;top: -70px;}
.section-about .flex img:nth-of-type(3) {z-index:9;position: absolute;left: 909px;top: 20px;}


@media screen and (max-width:1350px){
.section-about .flex>div:nth-of-type(2) {width:90%;}
.section-about .flex img:nth-of-type(1) {width:42%;}
.section-about .flex img:nth-of-type(2) {width:35.5%;left:38%;top:-9%;}
.section-about .flex img:nth-of-type(3) {width:26.5%;left:70%;top:2.5%;}
}
@media screen and (max-width:992px){
.section-about .flex>div:nth-of-type(1) {padding:190px 40px 120px 25px;}
}
@media screen and (max-width:768px){
.section.section-about {background-size:calc(100vw - 55px) auto;}    
.section-about .puller {font-size:16px;}
.section-about h2 {font-size:28px;line-height:1.3em;margin:16px 0px 24px 0px;max-width:320px;}
.section-about p {font-size:14px;line-height: 1.6em;}
.section-about .flex>div:nth-of-type(1) {padding: 110px 40px 120px 25px;}    
}
@media screen and (max-width:576px){    
.section-about .flex img:nth-of-type(1) {width:69%;}
.section-about .flex img:nth-of-type(2) {width:49.5%;left:6%;top:-15%;}
.section-about .flex img:nth-of-type(3) {width:37.5%;left:53%;top:-5%;}
.section-about .flex>div:nth-of-type(2) {padding-bottom:0px;margin-bottom: -15px;margin-top:20px;}
}


.section-process {position:relative;display:block;overflow:hidden;pointer-events: all;background:#FEE7DC;}
.about3 .section-process {background:none;}
.process-box {position:relative;height:100%;width:80vw;opacity:0;transition:opacity .3s linear;}
.process-box-holder {position:fixed;top:0;left:0;height:100%;display:flex;width:500vw;transition:all .7s ease-out;pointer-events: none;}
.process-box .flex {height:100%;}    
.process-box:after {content:"";position:absolute;top:0;bottom:0;width:1px;height:100%;left:130px;background:#5B5E5E;opacity:.2;}
.process-box:nth-of-type(1):after {display:none;}
.about3 .process-box  {opacity:1;transition: all .3s linear;transition-delay: .3s;}

.aboutstep1 .process-box-holder {transform:translateX(-80vw);transition-delay:1s;}
.aboutstep2 .process-box-holder {transform:translateX(-160vw);}
.aboutstep3 .process-box-holder {transform:translateX(-240vw);}
.aboutstep4 .process-box-holder {transform:translateX(-320vw);}
.about4 .process-box-holder {transform:translateX(-360vw);}

@media screen and (min-width:576px){
.aboutstep1 .process-box.box1 {animation-name: processIntroHeader;animation-delay: 1s;animation-duration: 3s;animation-fill-mode: forwards;}
.about3.aboutstep2 .process-box.box1.mobile, .about3.aboutstep3 .process-box.box1.mobile, .about3.aboutstep4 .process-box.box1.mobile {opacity:0;} 
}

.process-box h3 {font-size:100px;}
.process-box-holder .box2 h3 {transform:translateX(100px);}
.about3 .process-box-holder .box2 h3 {animation-name: processheader;animation-delay: 1s;animation-duration: .85s;animation-fill-mode: both;}


.aboutstep1 .process-box-holder .box2 h3 {transform:translateX(0);}
@media screen and (max-width:768px){
.process-box-holder .box2 h3 {transform:translateY(70%);} 
.aboutstep2 .process-box-holder .box2 h3 {transform:none;opacity: 0 !important;} 
.about3 .process-box-holder .box2 h3 {transform:translateY(70%) !important;}
.about3.aboutstep1 .process-box-holder .box2 h3 {transform:none !important;color: #fff;text-align: left;opacity: 1;}
.about3 .box1 p, .aboutstep1 .box2 p, .aboutstep2 .box3 p, .aboutstep3 .box4 p, .aboutstep4 .box5 p {padding-right: 26px;}    
}
.about3 .process-box .box1 h3 {transform:translateX(-15vw);transition:all .5s ease-out;transition-delay: 1s;}
.process-box p {font-size:24px;font-weight:300;margin-top:40px;max-width:555px;opacity:0;transition:opacity .5s ease-out, transform .5s ease-out;transform:translateX(80px);}
.process-box .flex>div {padding:40vh 0px 0px 150px;}

.process-box.box1 .flex {height:auto;}
.process-box.box1 .flex>div {padding:20vh 0px 0px 150px;}
.process-box.box1 .flex>div p {margin-top:30px;font-size:16px;opacity:1;}

.aboutstep1 .box2 h3, .aboutstep2 .box3 h3, .aboutstep3 .box4  h3, .aboutstep4 .box5 h3 {transform:translateX(0) !important;}
.about3 .box1 p, .aboutstep1 .box2 p, .aboutstep2 .box3 p, .aboutstep3 .box4 p, .aboutstep4 .box5 p {opacity:1;transition-delay:.7s;transform:translateX(0px);}

.aboutstep1 .box2 {color:#ffffff;}
.aboutstep2 .box3 {}
.aboutstep3 .box4 {}
.aboutstep4 .box5 {color:#ffffff;}

.process-box:before {content:"";width:100%;height:100%;position:absolute;z-index:0;opacity:0;transition: all .3s ease-out;transition-delay: 0s; left:0;transform:translateX(-50px)}
.box2:before {background:url(/wp-content/themes/closet-valet/images/img-process-1.webp) center center/cover no-repeat;}
.box3:before {background:url(/wp-content/themes/closet-valet/images/img-process-2.webp) center center/cover no-repeat;}
.box4:before {background:url(/wp-content/themes/closet-valet/images/img-process-3.webp) center center/cover no-repeat;}
.box5:before {background:url(/wp-content/themes/closet-valet/images/img-process-4.webp) center center/cover no-repeat;}
.aboutstep1 .box2:before, .aboutstep2 .box3:before, .aboutstep3 .box4:before, .aboutstep4 .box5:before {opacity:1;transition: all .5s ease-out;transition-delay: .9s;transform:none;}

@media screen and (max-width:1300px){
.section-process {font-size:calc(100vw / 110)}
.section-process h3 {font-size:8em;}
}

@media screen and (max-width:992px){
.process-box .flex>div {padding:30vh 0px 0px 25px;}
.process-box p {font-size: 18px;max-width: 370px;}
.process-box.box1 .flex>div {padding: 100px 0px 0px 25px;}
.process-box.box1 h2 {font-size:32px;}
}


@media screen and (max-width:576px){  
    
    
.box4:before {background:url(/wp-content/themes/closet-valet/images/img-process-3-mobile@2x.webp) center center/cover no-repeat;}
.box5:before {background:url(/wp-content/themes/closet-valet/images/img-process-4-mobile@2x.webp) center center/cover no-repeat;}
.process-box:before {transform:none;}
.process-box-holder {flex-direction:column;width:100%;padding-top:190px;height:auto;}
.process-box-holder .box1 {display:none;}
.process-box.box1 .flex>div p {margin-top: 20px;font-size: 14px;}
.process-box.box1 h2 {max-width: 100%;}
.process-box.box1 .flex>div {padding: 80px 0px 0px 25px;}
.process-box {width: calc(100vw - 31px);height:calc(100vh - 260px);}
.process-box .flex>div {padding: 40px 0px 0px 40px;}
.section-process h3 {font-size: 56px;}
.process-box p {margin-top: 15px;transform:translateY(40px);}          
.section-process h3 {opacity:0.3;}
.aboutstep1 .box2 h3, .aboutstep2 .box3 h3, .aboutstep3 .box4  h3, .aboutstep4 .box5 h3 {opacity:1;}
.process-box:after {opacity:0;}
.section-process:after {content: "";position: absolute;top: 0;bottom: 0;width: 1px;height: 100%;right: 30px;background: #5B5E5E;opacity:0;transition:opacity .3s linear;transition-delay:.5s;} 
.about3.aboutstep1 .section-process:after, .about3.aboutstep2 .section-process:after, .about3.aboutstep3 .section-process:after, .about3.aboutstep4 .section-process:after, .about5.aboutstep1 .section-process:after {opacity:.2;} 
.process-box-holder {transform:translate(0px,100vh);}
.about3 .process-box-holder {transform:translate(0px,20vh);}
.about3.aboutstep1 .process-box-holder {transform:translate(0px,0px);}
.about3.aboutstep2 .process-box-holder {transform:translate(0px,calc(-100vh + 260px));}
.about3.aboutstep3 .process-box-holder {transform:translate(0px,calc(-200vh + 520px));}
.about3.aboutstep4 .process-box-holder {transform:translate(0px,calc(-300vh + 780px));;}
.about4 .process-box-holder {transform: translate(0px,calc(-300vh + 600px));} 
.aboutstep2 .box2 h3, .aboutstep3 .box3 h3, .aboutstep4 .box4 h3 {opacity:0;}
.about3 .process-box-holder .box2 h3 {animation:none;}
.about3.aboutstep4 .process-box-holder .box5 h3 {max-width: 230px;}

.about3 .process-box.box2:after {background: rgba(234,209,199,1);content: "";width: 100vw;height: 100%;position: absolute;top: 180px;left: 0px;opacity: 1;}
.about3 .process-box.box2 h3 {opacity:.6;color:rgba(234,209,199,1);text-align: center;max-width: 300px;}
.about3.aboutstep1 .process-box.box2:after, .about3.aboutstep2 .process-box.box2:after, .about3.aboutstep3 .process-box.box2:after {opacity:0;} 
.about3 .marker {top: 40vh;left: auto;  right: 50px;bottom:auto;}
.about3.aboutstep1 .marker, .about3.aboutstep2 .marker, .about3.aboutstep3 .marker, .about3.aboutstep4 .marker, .about3.aboutstep1 .marker, .about3.aboutstep5 .marker {top: auto;left: 40px;right: auto;bottom: 100px;opacity: 1;}
.about3.aboutstep2 .marker {left:100px;} 
.about3.aboutstep3 .marker {left:150px;} 
.about3.aboutstep4 .marker {right:50px;top:250px;left:auto;}    
.about3.aboutstep1 .marker:before, .about3.aboutstep4 .marker:before {color:#fff;opacity:1;}    
}

@media screen and (max-width: 576px) and (max-height:600px){
 .section-process h3 {font-size: 40px;}  
}

/* our facility*/
.about .section-benefits.section-about-facility {display:block;position:relative;overflow:hidden;padding-top:23vh;}
.about .section-benefits h2, .section-benefits p {transform:none;}
.about .section-benefits.section-about-facility p:nth-of-type(2) {font-size:16px;}
.about .section-benefits.section-about-facility p:nth-of-type(1) span {display:none;}
.about .section-benefits.section-about-facility p {max-width: 560px;margin-top: 20px;}
.about .section-benefits ul li {opacity:1;}
.about .section-benefits.section-about-facility .section-benefits .flex {align-items: center;}
.about .section-benefits.section-about-facility .flex > div:nth-of-type(2) {margin-left: 60px;margin-top: 0;}
.about .section-benefits.section-about-facility .flex > div:nth-of-type(2) h3{font-size: 100px;margin-left: 80px;margin-bottom: 42px;}

.section-benefits {opacity:0;}

.about .section-benefits.section-about-facility .flex>div:nth-of-type(1) {display: flex;flex-direction: column;justify-content: space-between;height: 100%;}
.about .section-benefits.section-about-facility .imgHolder {margin-top:auto;padding-top:40px;flex: 1;}
.about .section-benefits.section-about-facility .imgHolder img {width:auto;max-height: calc(100% - 40px);position: absolute;bottom: 0px;}
.about4 .section-benefits {opacity:1;}
.about4 .section-benefits h2 {animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;}
.about4 .section-benefits p {animation-name: headers;animation-delay: .7s;animation-duration: .5s;animation-fill-mode: both;}
.about4 .section-benefits ul {animation-name: headers;animation-delay: .8s;animation-duration: .5s;animation-fill-mode: both;}
.about4 .section-benefits ul li {animation-name: headers;animation-delay: 1.0s;animation-duration: .5s;animation-fill-mode: both;}
.about4 .section-benefits ul li:nth-of-type(2) {animation-delay: 1.1s;}
.about4 .section-benefits ul li:nth-of-type(3) {animation-delay: 1.2s;}
.about4 .section-benefits ul li:nth-of-type(4) {animation-delay: 1.3s;}
.about4 .section-benefits ul li:nth-of-type(5) {animation-delay: 1.4s;}
.about4 .section-benefits ul li:nth-of-type(6) {animation-delay: 1.5s;}
.about4 .section-benefits ul li:nth-of-type(7) {animation-delay: 1.6s;}
.about4 .section-benefits ul li {margin-bottom: 30px;}
.about4 .section-benefits.section-about-facility .flex > div:nth-of-type(2) .imgHolder {display:none;}

@media screen and (max-width:768px){
.about .section-benefits.section-about-facility .flex > div:nth-of-type(2) h3 {display:none;}
.about .section-benefits.section-about-facility p:nth-of-type(1) span {display:inline-block;}
.about .section-benefits.section-about-facility {padding-top:0px;}
.about .section-benefits.section-about-facility .flex {padding-top:110px;}
.about .section-benefits.section-about-facility p:nth-of-type(2) {font-size: 14px;margin-top: 10px;margin-bottom: 40px; max-width: 270px;}
.about .section-benefits.section-about-facility .flex > div:nth-of-type(1) .imgHolder {display:none;}
.about .section-benefits.section-about-facility .flex > div:nth-of-type(2) .imgHolder {display:flex;}
.about4 .section-benefits ul li {margin-bottom: 20px;}
.about .section-benefits.section-about-facility .flex>div:nth-of-type(1) {justify-content: flex-start;height: auto;}
.about .section-benefits.section-about-facility .flex > div:nth-of-type(2) {margin-left: 0;display: flex;flex-direction: column;flex: 1;}
.about .section-benefits.section-about-facility .imgHolder img {max-height: 100%;}
}

@media screen and (max-height:625px){
    .about .section-benefits.section-about-facility .flex > div:nth-of-type(2) .imgHolder {display:none;}
}

.scrollable.section-register {position:relative;overflow:hidden !important;opacity:1;display:block;min-height:100vh;}
.scrollable.section-register h2 {animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register h3 {animation-name: headers;animation-delay: .7s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register p {animation-name: headers;animation-delay: .9s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register .flex > div:nth-of-type(2) {animation-name: boxes;animation-delay: .6s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register .flex > div:nth-of-type(1) p:nth-last-of-type(1) {display:none;}

/* Footer updates */

.scrollable.section-register {position:relative;overflow:hidden !important;opacity:1;display:block;min-height:100vh;}
.scrollable.section-register h2 {animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register h3 {animation-name: headers;animation-delay: .7s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register p {animation-name: headers;animation-delay: .9s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register .flex > div:nth-of-type(2) {animation-name: boxes;animation-delay: .6s;animation-duration: .5s;animation-fill-mode: both;}

.section-register h2.mobile {display:none;}
.contact .section-register .flex > div:nth-of-type(1) {background:#F3F2F4;}

.footer {top:0px;position:relative;box-shadow:none;border-top:1px solid rgba(91,94,94,0.2);}

.scrollable.section-register {position:relative;overflow:hidden !important;opacity:1;display:block;min-height:100vh;}
.scrollable.section-register h2 {animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;max-width: 510px;}
.scrollable.section-register h3 {animation-name: headers;animation-delay: .7s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register p {animation-name: headers;animation-delay: .9s;animation-duration: .5s;animation-fill-mode: both;}
.scrollable.section-register .flex > div:nth-of-type(2) {animation-name: boxes;animation-delay: .6s;animation-duration: .5s;animation-fill-mode: both;}

      

@media screen and (max-width: 992px){
.contact .section-register .flex > div:nth-of-type(1) {background:none;}
.section-register {background:#fff;height:auto !important;}
.section-register .flex > div:nth-of-type(1) {background: none;}
.section-register .flex > div:nth-of-type(1) div {padding: 0px 24px 0px 24px;}
.section-register .flex > div:nth-of-type(1) p:nth-last-of-type(1) {display:none;}
.section-register .flex > div:nth-of-type(1) {flex: 1;}
.section-register .thankyou h2 {display:block;}
.scrollable.section-register .flex > div:nth-of-type(1) p:nth-last-of-type(1) {display:block;}
    
}

@media screen and (max-width: 768px){
.scrollable.section-register h2 {max-width:280px;}     
} 


/* markers */
.package1 .marker {bottom: 10%;right: 10%;color: #fff;animation-name: scrollerwhite;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.package2 .marker {bottom: 5%;left: calc(50% - 300px);animation-name: scroller;animation-delay: 1.5s;animation-duration: 1s;animation-fill-mode: both;}
.package2 .marker:before {opacity:0.6;}
.package3 .marker {display:none;}
.screen4 .marker {display:none;}

@media screen and (max-width: 768px){
.package1 .marker {bottom: 60px;left: 20%;right:auto;} 
.package2 .marker {bottom: auto;right: 7%;left: auto;top: 157px;}    
}


@media screen and (max-width: 1340px){
.intros .flex > div:nth-of-type(1) {font-size: calc(100vw / 160);}
.intros .flex > div:nth-of-type(1) {margin:0px 80px;}
}
@media screen and (max-width: 768px){
.intros h1 {font-size: 56px;max-width: 340px;}
.intros p {font-size:18px;margin:30px 0px;}
.intros .flex > div:nth-of-type(1) {margin:0px 20px;}
}
@media screen and (max-width: 576px){
.intros .flex {width:calc(100% - 10px);}    
.intros h1 {font-size: 50px;}
.intros .buttons {flex-direction:column;}
.intros .buttons .button {margin:0px 0px 16px 0px;}
}

.section-pack-intro {display:flex;background:url(/wp-content/themes/closet-valet/images/img-packages-header.webp) center top no-repeat;background-size:cover;position:relative;}
.section-pack-intro .button-outline {margin-right:20px;}
@media screen and (max-width: 576px){
.section-pack-intro {background-image:url(/wp-content/themes/closet-valet/images/img-packages-header-mobile.webp);}
}

.package2 .background {background: #FFF0E9;}
.package3 .background {background: #F2E4E0;}
.package4 .background {background: #FFFFFF;}

.package1 p {max-width: 520px;}

.packages .section-benefits {display:block;position:relative;overflow:hidden;}
.packages .section-benefits h2, .section-benefits p {transform:none;}
.packages .section-benefits ul li {opacity:1;}

.section-benefits {opacity:0;}
.package2 .section-benefits {opacity:1;}
.package2 .section-benefits h2 {animation-name: headers;animation-delay: .5s;animation-duration: .5s;animation-fill-mode: both;}
.package2 .section-benefits p {animation-name: headers;animation-delay: .7s;animation-duration: .5s;animation-fill-mode: both;}
.package2 .section-benefits ul {animation-name: headers;animation-delay: .8s;animation-duration: .5s;animation-fill-mode: both;}
.package2 .section-benefits ul li {animation-name: headers;animation-delay: 1.0s;animation-duration: .5s;animation-fill-mode: both;}
.package2 .section-benefits ul li:nth-of-type(2) {animation-delay: 1.1s;}
.package2 .section-benefits ul li:nth-of-type(3) {animation-delay: 1.2s;}
.package2 .section-benefits ul li:nth-of-type(4) {animation-delay: 1.3s;}
.package2 .section-benefits ul li:nth-of-type(5) {animation-delay: 1.4s;}
.package2 .section-benefits ul li:nth-of-type(6) {animation-delay: 1.5s;}
.package2 .section-benefits ul li:nth-of-type(7) {animation-delay: 1.6s;}

.section-packages {display:block;position:relative;height:auto;min-height:100vh;padding-top:190px;padding-bottom:0;background: #FFF0E9 url(/wp-content/themes/closet-valet/images/package-background.svg) right top no-repeat;}
.section-packages .flex {padding: 0px 100px 0px 170px;align-items:flex-end;gap:80px;}
.section-packages .flex img {display:block;}
.section-packages h2 {max-width:780px;}
.section-packages p {max-width:546px;}
.section-packages .flex>div:nth-of-type(1) {padding-bottom:110px;}
.section-packages .flex>div:nth-of-type(1) p {max-width:860px;margin-top:30px;font-weight:300;font-size:16px;line-height:1.8em;}
.section-packages .flex>div:nth-of-type(1) p:nth-of-type(1), .section-packages .flex>div:nth-of-type(1) p:nth-last-of-type(1)  {font-size:24px;line-height:1.2em;}
.section-packages .flex>div:nth-of-type(1)>div {position:relative;}
.section-packages .flex>div:nth-of-type(2) {flex:0 0 30vw;max-width:540px;margin-left:auto;}


@media screen and (max-width:1260px){
	.section-packages .flex {flex-direction:column;gap:50px;align-items: flex-start;}
	.section-packages .flex>div:nth-of-type(1) {padding-bottom:0;}
	.section-packages .flex>div:nth-of-type(2) {max-width:25vw;flex:1;}
}






.package-options ul {margin:0px;padding:0px;list-style:none;width:100%;}
.package-options ul li {background:#fff;display:flex;margin-left:30px;min-height:240px;transition:all .3s linear;}
.package-options ul li:nth-of-type(1) {opacity:.6;z-index:10;}
.package-options ul li:nth-of-type(2) {opacity:.6;z-index:9;}
.package-options ul li:nth-of-type(3) {opacity:.3;z-index:8;}

.package-options ul.p1 li:nth-of-type(1) {opacity:1;margin-left:0;}
.package-options ul.p1 li:nth-of-type(2) {opacity:.6;}
.package-options ul.p1 li:nth-of-type(3) {opacity:.3;}

.package-options ul.p2 li:nth-of-type(1) {opacity:.6;}
.package-options ul.p2 li:nth-of-type(2) {opacity:1;margin-left:0;}
.package-options ul.p2 li:nth-of-type(3) {opacity:.6;}

.package-options ul.p3 li:nth-of-type(1) {opacity:.3;}
.package-options ul.p3 li:nth-of-type(2) {opacity:.6;}
.package-options ul.p3 li:nth-of-type(3) {opacity:1;margin-left:0;}

.package-options ul li>div:nth-of-type(1) {width:220px;}
.package-options ul li>div:nth-of-type(2) {flex:1;padding:30px 25px;}
.package-options ul.p1 li:nth-of-type(1)>div:nth-of-type(1):before, .package-options ul.p2 li:nth-of-type(2)>div:nth-of-type(1):before, .package-options ul.p3 li:nth-of-type(3)>div:nth-of-type(1):before {content: "";background: #FEE7DC;width: 102px;height: 87px;position: absolute;top: -12px;left: -12px;}

.p1 .package-options ul.p1 li:nth-of-type(1)>div:nth-of-type(1):before, .p1 .package-options ul.p2 li:nth-of-type(2)>div:nth-of-type(1):before, .p1 .package-options ul.p3 li:nth-of-type(3)>div:nth-of-type(1):before {display:none;}
.p2 .package-options ul li:nth-of-type(1)>div:before {height:72px !important;display:block !important;}



.package-options ul h3 {color: #D7BDB3;letter-spacing: 3px; font-size: 14px;text-transform: uppercase;}
.package-options ul h4 {line-height:1.65em;font-size: 20px;margin:10px 0px 8px;}
.package-options ul p {font-size:16px;line-height:1.8em;font-weight:300;}
.package-options ul img {position:absolute;left:0px;top:0px;width:100%;height:100%;object-fit: cover;}

.section-packages.p1 .package-options ul li>div:nth-of-type(1) {width: 120px;height: 120px;position: absolute;top: 30px;left: -40px;padding: 30px 25px 20px 25px;}
.section-packages.p1 .package-options ul li {min-height: 0;padding-left: 80px;}
.section-packages.p1 .package-options ul p {font-size:14px;}

.section-packages.p2 .package-options ul li>div:nth-of-type(1) {width: 120px;height: 88px;position: absolute;top: -60px;left: 25px;padding: 30px 25px 20px 25px;}
.section-packages.p2 .package-options ul li {min-height: 0;}
.section-packages.p2 .package-options ul p {font-size:14px;}



.package2 .logo, .package3 .logo, .screen4 .logo {color: #414099;}
.package2 .button.pre-register, .package3 .button.pre-register, .screen4 .button.pre-register {color: #414099;border-color:rgba(91, 94, 94, 0.1);}
.package2 .menu>div, .package3 .menu>div, .screen4 .menu>div, .single .menu>div {background: #414099;}

@media screen and (max-width:992px){
/* remove p1 */
.section-packages .flex {flex-direction:column;} 
}
@media screen and (max-width:768px){
/* add p2 */
.section-packages {padding-top:120px;padding-bottom: 0px;}
.section-packages .flex>div:nth-of-type(1)>div {padding:0px 25px;}
.section-packages .flex>div:nth-of-type(1)>div:before {display:none;background:none;}
.package-options ul li>div:nth-of-type(2) {padding: 50px 25px 25px 25px;}
.package-options ul li {margin-left: 0;margin-bottom: 90px;}
.package-options ul li {opacity:1 !important;}
.package-options ul li:nth-last-of-type(1) {margin-bottom: 0px;}    
.section-packages h2 {font-size:32px;}
.section-packages .flex>div:nth-of-type(1) p, .section-packages .flex>div:nth-of-type(1) p:nth-of-type(1) {font-size:14px;margin-bottom:20px;line-height:1.8em;}
.section-packages .flex>div:nth-of-type(1) p:nth-last-of-type(1)  {font-size:20px;}
.package-options ul h4 {font-size: 16px;margin:10px 0px 8px;}
.section-packages.p1 .package-options ul li {padding-left:0px;}
.p2 .package-options ul li>div:nth-of-type(1):before {height:72px !important;display:block !important;content: "";background: #FEE7DC;width: 102px;position: absolute;top: -12px;left: -12px;}    
}

 
/* markers */
.contact1 .marker {display:none;}
.contact1 .contentmarker {opacity:0.4;color:#fff;top:calc(100% + 20px);left:100px;}
.contact2 .marker {display:none;}
.contact3 .marker {display:none;}
.contact2 .contentmarker, .screen4 .contentmarker {opacity:0.4;top:-20px;left:18%;}
.screen4 .marker {display:none;}

@media screen and (max-width: 768px){
.contact1 .marker {bottom: 6vh;right: 80px;}   
}

.contact1 .logo, .contact2 .logo, .page-template-template-the-edit .nav-puller .button, .single .nav-puller .button, .single .logo {color: #414099;}
.contact1 .menu>div, .contact2 .menu>div {background: #414099;}
.contact1 a.button.pre-register, .contact2 a.button.pre-register {color: #414099;border-color: rgba(91, 94, 94, 0.1);}


@media screen and (max-width: 1340px){
.intros .flex > div:nth-of-type(1) {font-size: calc(100vw / 160);}
.intros .flex > div:nth-of-type(1) {margin:0px 80px;}
}
@media screen and (max-width: 768px){
.intros h1 {font-size: 56px;max-width: 340px;}
.intros p {font-size:18px;margin:30px 0px;line-height: 1.2em;max-width: calc(100% - 24px);}
.intros .flex > div:nth-of-type(1) {margin:0px 20px;}
}
@media screen and (max-width: 576px){
.intros .flex {width:calc(100% - 10px);}    
.intros h1 {font-size: 50px;}
.intros .buttons {flex-direction:column;}
.intros .buttons .button {margin:0px 0px 16px 0px;}
}

.section-contact-intro {display:flex;background:url("/wp-content/themes/closet-valet/images/img-contact-header.webp") center top no-repeat;background-size:cover;position:relative;align-items: center;}
.section-contact-intro .button-outline {margin-right:20px;}
.section-contact-intro .flex  {width:100%;padding-top:100px;align-items: flex-start;height:auto;}
.section-contact-intro .flex>div:nth-of-type(1)  {}
.section-contact-intro .flex>div:nth-of-type(2)  {flex:1;max-width:610px;}
.section-contact-intro .flex>div:nth-of-type(1) p {font-size:16px;}
.section-contact-intro a.mail {font-size:30px;margin:3px 0px 40px 0px;display:inline-block;line-height:1em;}
.section-contact-intro .button.mobile {display:none;}


@media screen and (max-width: 992px){
.section-contact-intro {height: auto !important;background:none;}
.section-contact-intro .flex {flex-direction:column;padding:0px;}
.section-contact-intro .flex>div:nth-of-type(2) {max-width: none;background: #fff;padding: 25px;width: 100%;}
.section-contact-intro .flex>div:nth-of-type(1) {flex: 0 0 100vh;background:url("/wp-content/themes/closet-valet/images/img-contact-header.webp") center top no-repeat;background-size:cover;max-width: none;width: 100%;margin: 0;padding: 100px 0px 0px 100px;}
.section-contact-intro .button.mobile {display:flex;}
}

@media screen and (max-width: 768px){
.section-contact-intro .flex>div:nth-of-type(1) {padding: 0px 40px 0px 25px;background-image:url(/wp-content/themes/closet-valet/images/img-contact-header-mobile.webp);display: flex;flex-direction: column;justify-content: center;padding-top: 0px;}
.contact1 .marker {left:15%;}
.contact2 .contentmarker, .screen4 .contentmarker {opacity:0.4;top:-50px;left:20px;}
}

@media screen and (max-width: 576px){
.intros .buttons {flex-direction:column;}
.intros .buttons .button {margin:0px 0px 16px 0px;}
.section-contact-intro a.mail {font-size: 24px;}
}

.contact2 .background {background:#fff3ef;}

/* contact form ========================== */
.contact-form-holder h2 {display:none;}
.contact-form-holder form {width: 100%;color:#5B5E5E;display:flex;flex-wrap:wrap;}
.contact-form-holder form>div {width:208px;margin-right:15px;margin-bottom: 15px;}
.contact-form-holder form>div:nth-last-of-type(1) {width:431px;}
.contact-form-holder form p {font-size: 12px;line-height: 1.1em;}
.contact-form-holder button {background: #414099;border: none;display: flex;height: 100px;width: 100%;justify-content: space-between;align-items: center;font-size: 20px;color: #fff;padding: 0px 60px;margin-top: 28px;cursor: pointer;transition: background .3s linear;}
.contact-form-holder button:hover {background: #5B5E5E;}
.contact-form-holder form label {font-size: 12px;font-weight: 300;letter-spacing: 1px;text-transform: uppercase;display: block;line-height: 1em;margin-bottom: 5px;margin-top: 15px;}
.contact-form-holder button:after {content: "\e800";font-size: 15px;font-family: 'cv-icons';}
.contact-form-holder form .validation {display: none;color: #414099;line-height:1em;margin:10px 0 0 0;}
form .textbox {appearance: none;-webkit-appearance: none;border: none;height: 40px;border-bottom: 1px solid rgba(91,94,94,0.2);display: flex;align-items: center;outline: none;width: 100%;max-width: 430px;margin-bottom: 0px;font-size: 20px;color: #5B5E5E;border-radius: 0;background:none;}
form .textbox:focus {border-bottom: 1px solid rgba(91,94,94,1);transition:border .5s linear;}
select.textbox {background:url(/wp-content/themes/closet-valet/images/icon-dropdown.svg) right bottom 13px no-repeat;}
form select.textbox {color:rgba(91,94,94,0.4);}
form select.textbox.touched {color:rgba(91,94,94,1);}
.contact-form-holder form textarea {min-height:100px;}
.contact-form-holder .thankyou {width: 100%;max-width: 600px;color:#5B5E5E;margin:0px;}
.contact-form-holder .thankyou h2 {display:block;}
.contact-form-holder .thankyou h2 em {display:block;}
.contact-form-holder .thankyou p {font-size:16px;}

@media screen and (max-width:1100px) {
.contact-form-holder .flex > div:nth-of-type(1) { flex: 0 0 calc(40%);}
.contact-form-holder .flex > div:nth-of-type(1) div { padding: 0px 24px 80px 24px; margin-right: 20px;}
}
@media screen and (max-width:992px) {
.contact-form-holder form, .thankyou { margin-left: 0; width: 100%; max-width: 100%; margin-bottom: 200px;}
.contact-form-holder form label { font-size: 10px; etter-spacing: 0.8px;}
.screen4 .section-register { overflow-y: auto;}
.contact-form-holder button { height: 80px; max-width: 100%;}
.contact-form-holder form > div { padding-right: 24px;}
.contact-form-holder h2 {display:block;color:#5B5E5E;font-size:32px;margin:90px 0px 40px 0px;}  
.contact-form-holder form>div {width:40vw;} 
.contact-form-holder form>div:nth-last-of-type(1) {width:calc(80vw + 15px);}    
}
@media screen and (max-width:768px) {
.contact-form-holder form>div, .contact-form-holder form>div:nth-last-of-type(1) {width: 100%;margin-right: 0;padding:0px;}
.contact-form-holder form, .contact-form-holder .thankyou {margin-bottom: 10px;}
}
@media screen and (max-width:576px) {
.contact-form-holder button {font-size: 16px;padding: 0px 40px;white-space: nowrap;}
.contact-form-holder button:after {max-width: 32px;overflow: hidden;display: inline-flex;justify-content: flex-end;}    
}

.section-contact-faqs {position:relative;opacity:1;display:block;background: #fff3ef;margin-bottom:-5px;overflow:hidden;}
.contact2 .section-contact-faqs {position:relative;opacity:1;}
.section-contact-faqs {padding:195px 0px 0px 60px}
.section-contact-faqs .puller {font-size:14px;letter-spacing: 3px;text-transform: uppercase;margin-bottom:24px;line-height:1em;font-weight:300;}
.section-contact-faqs h2 {max-width:none;}

.section-contact-faqs>ul {margin:86px 0px 80px 110px;padding:0px;list-style:none;}
.section-contact-faqs>ul>li {padding:40px 40px 40px 0px;border-bottom:1px solid rgba(91,94,94,0.2);}
.section-contact-faqs>ul>li h3 {margin:0px 30px 0px 0px;padding-right:70px;font-size:30px;line-height:1.4em;display:inline-block;cursor:pointer;}
.section-contact-faqs>ul>li h3:before {content:"";width:24px;height:1px;background:#414099;position:absolute;right:10px;top:22px;transform-origin: center;transition:all .3s ease-out;transition-delay:.2s;}
.section-contact-faqs>ul>li h3:after {content:"";height:24px;width:1px;background:#414099;position:absolute;right:22px;top:10px;transform-origin: center;transition:all .3s ease-out;transition-delay:.2s;}
.section-contact-faqs>ul>li.open h3:before {transform:rotate(90deg);opacity:0;}
.section-contact-faqs>ul>li.open h3:after {transform:rotate(90deg);}
.section-contact-faqs>ul>li>div {max-height:0px;overflow:hidden;pointer-events: none;transition:max-height .3s linear;}
.section-contact-faqs>ul>li.open>div {max-height:500px;pointer-events: all;transition:max-height .5s linear;}
.section-contact-faqs>ul>li p {font-size:16px;line-height:1.7em;max-width:870px;font-weight:300;padding-top:16px;}
.section-contact-faqs .images {text-align:right;padding-right:175px;}
.section-contact-faqs .images img {display:inline-block;}
.section-contact-faqs .images img:nth-of-type(1) {left:34px;z-index:6;}
.section-contact-faqs>ul>li.open {padding: 40px 40px 70px 0px;}

.section-contact-faqs>ul>li ol, .section-contact-faqs>ul>li ul {margin:20px 0 0 0;}
.section-contact-faqs>ul>li ol li, .section-contact-faqs>ul>li ul li {font-size:16px;padding-bottom:5px;font-weight:300;}
.section-contact-faqs>ul>li a {color:#414099;text-decoration:underline;text-underline-offset:3px; }

@media screen and (max-width:992px){
.section-contact-faqs .images {padding-right:80px;}
.section-contact-faqs .images img {width:200px;}
.section-contact-faqs .images img:nth-of-type(1) {width:180px;left:15px;}
}
@media screen and (max-width:768px){
.section-contact-faqs>ul {margin: 56px 0px 80px 0px;}
.section-contact-faqs>ul>li {padding:25px 40px 25px 0px;}
.section-contact-faqs>ul>li h3 {font-size:20px;padding-right:80px;display:block;margin:0px;}
.section-contact-faqs .images {padding-right:40px;}
.section-contact-faqs .images img {width:144px;}
.section-contact-faqs .images img:nth-of-type(1) {width:115px;left:15px;}
.section-contact-faqs>ul>li h3:before {content:"";width:18px;right:0px;top:11px;}
.section-contact-faqs>ul>li h3:after {content:"";height:18px;width:1px;right:9px;top:2px;}
.section-contact-faqs>ul>li p {font-size:14px;}
.section-contact-faqs .puller {font-size:12px;margin-bottom:16px;}
.section-contact-faqs h2 {font-size:32px;}
.section-contact-faqs {padding:120px 0px 0px 25px;}
}

@media screen and (max-width:576px){
.section-contact-faqs h2 em {display:block;}
}

/* Home benefits buttons ammends*/
.section-benefits .buttons {margin-top:40px;}
.section-benefits .button.button-outline {color:#414099;border-color:rgba(91,94,94,0.1);margin-right:20px;}
.screen3 .marker {left:50%;}    
@media screen and (max-width:992px){
.screen3 .section-benefits {padding-top:13vh;}
}
@media screen and (max-width:768px){
.screen3 .section-benefits {padding-top:0;}
.screen3 .section-benefits .buttons {margin-top:20px;}
.screen3 .section-benefits p {font-size: 14px;}
.screen3 .section-benefits .flex {padding-top:80px;}    
}
@media screen and (max-width:576px){
.section-benefits .button.button-outline:nth-of-type(1) {margin-bottom:10px;}
.screen3 .marker {left: 67%;top: 50%;}    
}



.woocommerce-message, .woocommerce-error, .woocommerce-info {border:none;padding:10px;font-size:13px;line-height:1.4em;}
.woocommerce-message:before, .woocommerce-error:before, .woocommerce-info:before, .woocommerce-message:after, .woocommerce-error:after, .woocommerce-info:after  {display:none;}
.woocommerce-message a, .woocommerce-error a, .woocommerce-info a {color: #414099;}


/* The edit landing page ====================== */
    .the-edit-holder {padding:30px 70px 70px 70px;}
    .the-edit-articles {margin:0px auto;width:100%;max-width:1310px;display: grid;grid-template-columns: repeat(3, 1fr);column-gap: 40px;row-gap: 40px;min-height: 300px;position: relative;}
    .the-edit-articles .cv-loader {grid-column: 1 / -1;height: 48px;}
    .the-edit-articles .article-link .imgHolder {max-width:none;}
    .the-edit-articles .article-link h3 {max-width: calc(100% - 20px);}
    .page-template-template-the-edit .section-edit  {padding:180px 70px 70px 70px;}
    .page-template-template-the-edit .section-edit .textbox {color:#5B5E5E;}
    .page-template-template-the-edit .section-edit .flex > div:nth-of-type(2) {width:calc(1210px / 3);max-width:none;}
    .the-edit-more-button {text-align:center;margin:50px auto;}
    
    @media screen and (max-width:1440px){
    .page-template-template-the-edit .section-edit .flex > div:nth-of-type(2) {width:calc((100vw - 240px) / 3);max-width:none;}
    }       
    
    @media screen and (max-width:1100px){
    .page-template-template-the-edit .section-edit .flex > div:nth-of-type(2) {flex:0 0 calc((100vw - 148px) / 3);max-width:none;}
    .page-template-template-the-edit .section-edit  {padding:180px 44px 70px 44px;}
    }    
    
    @media screen and (max-width:992px){
    .the-edit-holder {padding:0 24px 70px 24px;}
    .page-template-template-the-edit .section-edit  {padding:120px 0px 70px 0px;}
    .page-template-template-the-edit .section-edit .flex > div:nth-of-type(2) {flex:0 0 calc((100vw - 98px) / 2);max-width:none;}
    }
    
    @media screen and (max-width:768px){
    .the-edit-articles {grid-template-columns: repeat(2, 1fr);}
    .page-template-template-the-edit .section-edit .flex > div:nth-of-type(2) {width:calc((100vw + 140px) / 2);max-width:none;}
    }
    
    @media screen and (max-width:600px){
    .page-template-template-the-edit .section-edit  {padding:0px 0px 50px 0px;}
    .page-template-template-the-edit .section-edit .flex > div:nth-of-type(2) {flex:0 0 100%;width:100%;max-width:none;}
    .page-template-template-the-edit .section-edit .textbox {max-width:100%;}
    }
    
    @media screen and (max-width:576px){
    .the-edit-articles {grid-template-columns: repeat(1, 1fr);}
    .the-edit-articles .article-link .imgHolder {max-width:180px;}
    .the-edit-articles .article-link h3 {max-width: 280px;}
    }

body.single, body.page-template-template-the-edit {background-color: #FEF1EA!important;}



    .more-head {max-width: 1310px;margin: 0px auto 40px auto;justify-content: space-between;}
    .more-head h2 {font-size:40px;}
    .more-articles .button-holder {display:none;margin-top:50px;}
    .more-articles .button {height:40px;}
    .more-articles .the-edit-articles {min-height:0;}
    
    .share {position:relative;}
    .social-share {list-style:none;margin:0px;padding:0px;width: fit-content;position:sticky;top:120px;}
    .social-share a {color:rgba(91, 94, 94, 0.5);text-align:center;margin-top:25px;margin: 25px auto 0 auto;display: block;transition:all .3s linear;}
    .social-share a:hover {color:#414099;}
    .social-share a.icon-copy:before {content:"\e81e";font-size:25px;}
    .social-share a.icon-facebook:before {content:"\e819";}
    .social-share a.icon-x:before {content:"\e81d";font-size:24px;}
    .social-share a.icon-mail:before {content:"\e81f";}
    .social-share a.icon-linkedin:before {content:"\e81a";}
    .social-share a.icon-whatsapp:before {content:"\f232";font-size:30px;}
    .social-share a.icon-mail:before {content:"\e81f";font-size:21px;}
    .social-share span {color:rgba(91, 94, 94, 0.5);font-size:12px;}
    
    .the-edit-single {padding:180px 0;}
    .the-edit-single-holder {max-width:1440px;margin:0px auto;padding-left:70px;}
    .the-edit-single-holder h1 {font-size: 56px;line-height: 1.3em;}
    .the-edit-single-intro .imgHolder {align-self: flex-end;}
    .the-edit-single-intro .imgHolder, .the-edit-single-article .share {flex:0 0 430px;margin-left:50px;}
    .the-edit-single-article {padding-top:140px;}
    .the-edit-single-article .article {padding-left:100px;}
    .the-edit-single-article .article strong {font-weight:500;}
    .the-edit-single-article .article, 
    .the-edit-single-article .article p, 
    .the-edit-single-article .article ul, 
    .the-edit-single-article .article ol {font-size:16px;line-height:1.8em;font-weight:300;margin-bottom:30px;}
    .the-edit-single-article .article a {color:#414099;}
    
.the-edit-single-article .article h2 {font-size:25px;margin:0px 0px 30px 0px;} 
.the-edit-single-article .article h3 {font-size:20px;margin:0px 0px 20px 0px;} 


    @media screen and (max-width:1200px){
    .the-edit-single-intro .imgHolder, .the-edit-single-article .share {flex:0 0 360px;}
    .the-edit-single-holder h1 {font-size: 48px;}
    }
    
    @media screen and (max-width:992px){
    .the-edit-single {padding:120px 0 50px 0;}
    .the-edit-single-holder {padding-left:24px;}
    .the-edit-single-intro .imgHolder, .the-edit-single-article .share {flex:0 0 250px;}
    .the-edit-single-holder h1 {font-size: 40px;}
    .the-edit-single-article {padding-top:70px;}
    .the-edit-single-article .article {padding-left:50px;}
    .more-head h2 {font-size:24px;}  
    .more-head .button {display:none;} 
    .more-articles .button-holder {display:block;text-align:center;}   
    }
    
    @media screen and (max-width:768px){
    .the-edit-single-intro  {flex-direction:column;}
    .the-edit-single-holder {padding-right:24px;}
    .the-edit-single-intro .imgHolder {margin:50px -24px 0 -24px;}
    .the-edit-single-article  {flex-direction:column;padding-top: 30px;}
    .the-edit-single-article .share {flex:0 0 100%;margin-left:0px;margin-top:50px;}
    .the-edit-single-article .article {padding-left: 0px;}    
    .the-edit-single-holder h1 {font-size: 26px;padding-right:30px;}
    .the-edit-single-article .article, 
    .the-edit-single-article .article p, 
    .the-edit-single-article .article ul, 
    .the-edit-single-article .article ol {font-size:14px;}
    .share {padding-bottom:50px;}    
    .social-share {display: flex;flex-wrap: wrap;width:100%;}    
    .social-share li:nth-of-type(1) {width:100%;} 
    .social-share a {margin:23px 20px 0 0;}
    .share:after {content: "";display: block;border-bottom: 1px solid rgba(91, 94, 94, 0.2);top: 100%;left: -24px;width: calc(100% + 48px);position:absolute;}  
        
    .more-articles .the-edit-articles a:nth-of-type(2n) {display:none;}     
    }