body {
    height: 100dvh !important; overflow: hidden;
    
	background-color: #FFF;
	
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
}
@-moz-document url-prefix() { body { height: 100dvh !important; } }

body:before,
body:after {
	content: '';
	position: fixed; top: 0; left: 0;
	display: block; height: 100%; width: 100%;
	
	clip-path: inset(0 0 0 0);
	
	pointer-events: auto;
}
body:before { z-index: 9998; }
body:after  {
	z-index: 9999;
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto min(50%, 250px);
}
body.loader-1:before { background-color: #FF640B; }
body.loader-1:after  {
	background-color: #FFDA17;
	background-image: url("../../images/loader-1.gif");
}
body.loader-2:before { background-color: #13B682; }
body.loader-2:after  {
	background-color: #FF640B;
	background-image: url("../../images/loader-2.gif");
}
body.loader-3:before { background-color: #13B682; }
body.loader-3:after  {
	background-color: #FFDA17;
	background-image: url("../../images/loader-3.gif");
}
body.loader-4:before { background-color: #FFDA17; }
body.loader-4:after  {
	background-color: #FF640B;
	background-image: url("../../images/loader-4.gif");
}

body.after-load:after { background-image: linear-gradient(to top, transparent, transparent); }

body.loaded:before,
body.loaded:after {
	clip-path: inset(0 0 100% 0);
	pointer-events: none;
}
body.after-load:before,
body.after-load:after {
	clip-path: inset(100% 0 0 0);
}
body.after-load:not(.loaded):before,
body.after-load:not(.loaded):after {
	clip-path: inset(0 0 0 0);
}
body:before		   { transition: clip-path .6s cubic-bezier(0.38, 0.005, 0.215, 1); }
body.loaded:before { transition: clip-path .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s; }
body:after 		   { transition: clip-path .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s; }
body.loaded:after  { transition: clip-path .6s cubic-bezier(0.38, 0.005, 0.215, 1); }
body.loaded.after-load:before,
body.loaded.after-load:after  { transition: none; }

@media (min-width: 782px) {
    .customize-support { height: calc(100vh - 32px) !important; }
    .customize-support:before,
    .customize-support:after {
		top: 32px;
		height: calc(100vh - 32px);
	}
}
@media (max-width: 781.99px) {
    .customize-support { height: calc(100vh - 46px) !important; }
    .customize-support:before,
    .customize-support:after {
		top: 46px;
		height: calc(100vh - 46px);
	}
}

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

#wrapper {
	position: relative; z-index: 1;
    height: 100%; overflow: hidden;
}
@media (min-width: 782px)	 { .customize-support #wrapper { max-height: calc(100vh - 32px); } }
@media (max-width: 781.99px) { .customize-support #wrapper { max-height: calc(100vh - 46px); } }

#wrapper > .viewport {
    max-height: 100%; overflow: auto;
    isolation: isolate;
}

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

#container {
	position: relative;
    height: 100vh; overflow: hidden;
	
	background-color: #FFF;
}
.loaded #container {
	height: auto;
	min-height: 100vh;
}
body[class*="open"] #container { overflow: hidden !important; }
@media (min-width: 782px)	 { .customize-support #container { min-height: calc(100vh - 32px); } }
@media (max-width: 781.99px) { .customize-support #container { min-height: calc(100vh - 46px); } }

#container:before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0;
	display: block; height: 1500px;
	
    background-color: #FFF;
	background-image:
		linear-gradient(to bottom, rgba(255,255,255,0) 1300px, rgba(255,255,255,1) 1400px),
		url("../../images/bg-pattern.png");
	background-position: top center;
	background-size:
		auto,
		cover;
	background-repeat: no-repeat;
}

#container > * { position: relative; }
@media (min-width: 900px) {
	#container > * { margin: 100px 0; }
	#container > :first-child { margin-top: 150px; }
}
@media (max-width: 899.99px) {
	#container > * { margin:  50px 0; }
	#container > :first-child { margin-top: 125px; }
	#container > :last-child  { margin-bottom: 25px; }
}

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

.content-wrapper { max-width: 1200px; }
@media (min-width: 900px) {
	@media (min-width: 1300px)	  { .content-wrapper { margin: 0 auto; } }
	@media (max-width: 1299.99px) { .content-wrapper { margin: 0 50px; } }
}
@media (max-width: 899.99px)  { .content-wrapper { margin: 0 25px; } }

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

.media-placeholder {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%; overflow: hidden;
	
	background-color: #FF640B;
}
.media-placeholder:after {
	content: '';
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: block; height: min(150px, 40%); width: min(150px, 40%);
	
	background-color: #FFF;
	
	-webkit-mask-image: url("../../images/logo.png");
	mask-image: url("../../images/logo.png");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	
	opacity: .2;
}

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

.cta-link {
    display: inline-block;
	text-decoration: none;
}
.cta-link > .label,
.cta-link > span {
	background-image: linear-gradient(to bottom, transparent calc(100% - 1px), currentColor calc(100% - 1px), currentColor 100%);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: bottom right;
    background-origin: content-box;
}
.loaded .cta-link > .label,
.loaded .cta-link > span { transition: background-size .4s ease-out; }
.cta-link.current:hover > .label,
.cta-link.current:hover > span,
.cta-link:hover > .label,
.cta-link:hover > span {
	background-size: 100% 100%;
	background-position: bottom left;
}

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

.cta-btn {
    position: relative;
    display: inline-flex;
    padding: 15px 40px;
    
	background-color: transparent;
    border-radius: 100px;
    border: solid 1px;
    
    text-align: center;
    
    cursor: pointer;
    
    transition:
        padding-right	 .4s ease-out .4s,
        background-color .4s ease-out,
        border-color	 .4s ease-out,
        color			 .4s ease-out;
    
    isolation: isolate;
}
.cta-btn:after {
    content: '';
    position: absolute; top: 50%; right: 20px; transform: translateY(-50%); z-index: 1;
    display: block; width: 24px; height: 24px;
    
    background-color: currentColor;
    
    -webkit-mask-image: url("../../images/icons/spinner.svg");
    mask-image: url("../../images/icons/spinner.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    opacity: 0; transition: opacity .4s ease-out;
}
.cta-btn.loading {
    padding-right: 75px;
    transition:
        padding-right .4s ease-out,
        border-color  .4s ease-out,
        color         .4s ease-out;
}
.cta-btn.loading:after {
    opacity: 1;
    transition: opacity .4s ease-out .4s;
}
.cta-btn:hover,
.cta-btn.current {
    background-color: #000;
    border-color: transparent;
    color: #FFF;
}