body {
	overflow: hidden;
	
	font-family: 'Clash Grotesk', sans-serif;
	font-size: 14px;
	font-weight: 400;
}
body.loaded:not([class*="-open"], .reflection-form-response) { overflow: auto; }

body:before {
	content: '';
	position: fixed; top: 0; left: 0; z-index: 9999;
	display: block; height: 100dvh; width: 100%;
	
	background-color: #FFF;
	
	opacity: 1;
	transition: opacity .6s cubic-bezier(0.38, 0.005, 0.215, 1) .1s;
	
	pointer-events: auto;
}
body.loaded:before {
	opacity: 0;
	transition: opacity .6s cubic-bezier(0.38, 0.005, 0.215, 1);
	
	pointer-events: none;
}

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

@media (max-width: 600px) {
	#wpadminbar {
		position: fixed !important;
	}
}

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

#wrapper { min-height: 100%; }

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

#container {
	position: relative;
	
	background-image: linear-gradient(to right, #BCD5E4 10%, #4E677C 65%, #364A67 115%);
	
	color: #FFF;
	
	isolation: isolate;
}
#container .group {
	position: relative;
	display: flex; width: 100%;
	flex-direction: column;
	align-items: stretch;
	
	isolation: isolate;
}
#container .group:empty { display: none; }

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

.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; } }

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

.ipnetwork-media {
	position: relative;
	overflow: hidden;
	
	isolation: isolate;
}

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

.ipnetwork-media > .media-element {
	position: relative;
	display: block; height: 100%; width: 100%;
}
.ipnetwork-media img,
.ipnetwork-media video {
    object-fit: cover;
    object-position: center;
    
    pointer-events: none;
}
.ipnetwork-media img {
	display: block; height: 100%; width: 100%;
}

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

.ipnetwork-media > .media-placeholder {
	position: absolute; top: 0; left: 0; z-index: 2;
	height: 100%; width: 100%; overflow: hidden;
	
	background-image: linear-gradient(to bottom, #BCD5E4 10%, #4E677C 65%, #364A67 115%);
	border-radius: inherit;
}
.ipnetwork-media > .media-placeholder:after {
	content: '';
	position: absolute; top: 50%; left: 50%;
	display: block; height: min(90px, 40%); width: min(90px, 40%);
	
	background-color: #FFF;
	
	--mask-image: url(../../images/logo.svg);
	--mask-position: center;
	--mask-size: contain;
	--mask-repeat: no-repeat;

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
	
	filter: blur(2px);
	
	opacity: .2;
	
	animation: media-placeholder-logo-spin 1.5s cubic-bezier(.25,.10,.25,1) infinite;
}
@keyframes media-placeholder-logo-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to	 { transform: translate(-50%, -50%) rotate(360deg); }
}

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

.ipnetwork-media > .overlay {
	position: absolute; top: 0; left: 0; z-index: 1;
	display: block; height: 100%; width: 100%;
	
	background-image:
		var(--mask-image),
		radial-gradient(circle 35px, rgba(0,0,0,.3), rgba(0,0,0,0));
	background-position: center;
	background-size:
		50px,
		auto;
	background-repeat: no-repeat;
	
	transition: filter .2s ease-out;
	
	pointer-events: none;
}
.ipnetwork-media > .overlay.buffering { --mask-image: url("../../images/icons/buffer.svg"); }
.ipnetwork-media > .overlay.playing	  { --mask-image: url("../../images/icons/play.svg"); }
.ipnetwork-media:hover > .overlay.playing { filter: brightness(80%); }

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

span.special-char {
	font-family: 'Pixelify Sans';
}

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

.cta-link {
    display: inline-block;
	text-decoration: none;
	
	cursor: pointer;
	pointer-events: none;
}
.cta-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%;
	background-repeat: no-repeat;
	background-position: bottom right;
    background-origin: content-box;
	
	pointer-events: auto;
}
.loaded .cta-link > span { transition: background-size .4s ease-out; }

.cta-link.current > span,
.cta-link:hover > span {
	background-size: 100% 100%;
	background-position: bottom left;
}

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

.cta-btn {
	--height: 50px;
	--bg-color-basic: #D5ED99;
	--bg-color-hover: #BCD5E4;
	--text-color-basic: #364A67;
	--text-color-hover: #364A67;
	
    position: relative;
    display: inline-flex; height: var(--height);
    padding: 0 calc(var(--height) / 2);
    
	background-color: var(--bg-color-basic);
    border-radius: calc(var(--height) / 2);
    
    text-align: center;
	line-height: var(--height);
	font-weight: 500;
	color: var(--text-color-basic);
    cursor: pointer;
    
    transition:
        padding			 .2s ease-out .2s,
        border-color	 .2s ease-out,
        background-color .2s ease-out,
        color			 .2s ease-out;
    
    isolation: isolate;
}
@media (min-width: 900px)	 { .cta-btn { font-size: 18px; } }
@media (max-width: 899.99px) { .cta-btn { font-size: 14px; } }
.cta-btn:hover,
.cta-btn.current {
	background-color: var(--bg-color-hover);
	color: var(--text-color-hover);
}

.cta-btn:before,
.cta-btn:after {
	content: '';
	box-sizing: border-box;
	position: absolute; top: 0; left: 0;
	display: block; height: var(--height); width: var(--height); overflow: hidden;
	
	border-radius: 50%;
	opacity: 0;
	
    transition:
        left			 .2s ease-out,
        transform		 .2s ease-out,
        background-color .2s ease-out,
        opacity			 .2s ease-out;
}
.cta-btn:not(.loading):hover:before,
.cta-btn:not(.loading):hover:after {
	transform: translateX(calc(var(--height) * -.75));
	opacity: 1;
}
.cta-btn:before {
	background-color: inherit;
	border-radius: 50%;
}
.cta-btn:after {
	padding: 14px;

	background-color: var(--text-color-basic);
	
	--mask-image: url("../../images/icons/cta-arrow.svg");
	--mask-origin: content-box;
	--mask-position: center;
	--mask-repeat: no-repeat;
	--mask-size: contain;
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-origin: var(--mask-origin);
	mask-origin: var(--mask-origin);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
}
.cta-btn:not(.loading):hover:after {
	background-color: var(--text-color-hover);
}

.cta-btn > .label {
	position: relative;
	display: inline-block;
	
	transition: padding-right .2s ease-out;
}
.cta-btn.loading > .label {
	padding-right: 75px;
}
.cta-btn > .label:before {
	content: '';
	position: absolute; top: 50%; right: 0; transform: translate(-04px)
	display: block; height: calc(var(--height) * .75); width: calc(var(--height) * .75); overflow: hidden;
	
	background-color: var(--text-color-basic);
	
	--mask-image: url("../../images/icons/spinner.svg");
	--mask-origin: content-box;
	--mask-position: center;
	--mask-repeat: no-repeat;
	--mask-size: contain;
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-origin: var(--mask-origin);
	mask-origin: var(--mask-origin);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
	
	opacity: 0;
	
	transition:
		background-color .2s ease-out,
		transform		 .2s ease-out,
		opacity			 .2s ease-out .2s;
}
.cta-btn.loading > .label:before {
	background-color: var(--text-color-hover);
	opacity: 1;
	
	transition:
		background-color .2s ease-out,
		transform		 .2s ease-out,
		opacity			 .2s ease-out;
}