body {
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); overflow: hidden;
    background-color: #FFF;
	
	font-family: 'Futura PT', sans-serif;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .4px;
}
body:after {
	content: '';
	position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; z-index: 9999;
	display: block; height: calc(100% - var(--wp-admin--admin-bar--height, 0px)); width: 100%;
	
	background-color: #FFF;
	background-image: url("../../images/picto.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100px auto;
	
	opacity: 1; transition: opacity .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s;
	pointer-events: auto;
}
body.loaded:not([class*="-open"], .reflection-form-response) { overflow: auto; }
body.loaded:after {
	opacity: 0; transition: opacity .6s cubic-bezier(0.38, 0.005, 0.215, 1);
	pointer-events: none;
}

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

#wrapper { min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); }

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

#container {
	position: relative;
	background-color: #FFF;
	
	isolation: isolate;
}

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

.content-wrapper { max-width: 1400px; }
@media (min-width: 900px) {
	@media (min-width: 1500px)	  { .content-wrapper { margin: 0 auto; } }
	@media (max-width: 1499.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-image: linear-gradient(to bottom, #0A1F38, #318091 33%, #83ADA8 57%, #CEE0C7);
}
.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-image: url("../../images/tag-0.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
	filter: blur(2px);
	
	opacity: .2;
}

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

.skulpt-media { isolation: isolate; }
.skulpt-media.has-overlay:after {
	content: '';
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%;
	
	background-color: #000;
	
	opacity: .3;
}

.skulpt-media > picture {
	display: block; height: 100%; width: 100%;
}
.skulpt-media > picture > img {
	display: block; height: 100%; width: 100%;
    object-fit: cover;
    object-position: center;
    
    pointer-events: none;
}

.skulpt-media > video {
    display: block; height: 100%; width: 100%;
    object-fit: cover;
    object-position: center;
    
    pointer-events: none;
}

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

.return-btn,
.submenu-btn,
.cta-link[href] {
    display: inline-block;
	text-decoration: none;
	
	cursor: pointer;
	pointer-events: none;
}

.return-btn {
	position: relative;
	padding-left: 40px;
}
.return-btn:before {
	content: '';
	position: absolute; top: 50%; left: 0; transform: translateY(-50%);
	display: block; height: 12px; width: 25px;
	
	background-image: url("../../images/icons/return.arrow.svg");
	background-position: center right;
	background-size: contain;
	background-repeat: no-repeat;
	
	pointer-events: auto;
}

.submenu-btn {
	position: relative;
	padding-right: 30px;
}
.submenu-btn:after {
	content: '';
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	display: block; height: 12px; width: 12px;
	
	background-image: url("../../images/icons/arrow.right.svg");
	background-position: center right;
	background-size: contain;
	background-repeat: no-repeat;
	
	pointer-events: auto;
}

.return-btn > .label,
.submenu-btn > .label,
.cta-link[href] > span {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) 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;
	
	pointer-events: auto;
}
.loaded .return-btn > .label,
.loaded .submenu-btn > .label,
.loaded .cta-link[href] > span { transition: background-size .4s ease-out; }

.return-btn:hover > .label,
.submenu-btn.current > .label,
.submenu-btn:hover > .label,
.cta-link[href].current > span,
.cta-link[href]: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;
	line-height: 20px;
    font-size: 14px;
	font-weight: 300;
	letter-spacing: .4px;
    cursor: pointer;
    
    transition:
        padding-right	 .2s ease-out .4s,
        background-color .2s ease-out,
        border-color	 .2s ease-out,
        color			 .2s ease-out;
    
    isolation: isolate;
}
.cta-btn:after {
    content: '';
    position: absolute; top: 50%; right: 30px; 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;
	pointer-events: none;
    transition:
        padding-right	 .2s ease-out,
        background-color .2s ease-out,
        border-color	 .2s ease-out,
        color			 .2s 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;
}

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

.cta-btn.submit-btn {
	background-color: #000;
	background-clip: padding-box;
    border-color: #000;
	color: #FFF;
}
.cta-btn.submit-btn:hover,
.cta-btn.submit-btn.current {
    background-color: transparent;
    color: #000;
}

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

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

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

.generic-btn {
    position: relative;
    display: inline-block;
	
	background-color: #000;
	background-clip: padding-box;
    border-radius: 100px;
    border: solid 1px #000;
    
    text-align: center;
	line-height: 20px;
	letter-spacing: .4px;
	color: #FFF;
	
    cursor: pointer;
    
    transition:
        background-color .2s ease-out,
        color			 .2s ease-out;
}
.generic-btn:hover{
    background-color: transparent;
    color: #000;
}
@media (min-width: 900px)	 {
	.generic-btn {
		padding: 15px 60px;
    	font-size: 16px;
	}
}
@media (max-width: 899.99px) {
	.generic-btn {
		padding: 15px 30px;
    	font-size: 14px;
	}
}