body {
    height: 100dvh;
	overflow: hidden;
	
	font-family: 'Helvetica Neue', 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; } }

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

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

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

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

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

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

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

.orasuna-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;
}
.orasuna-media > .overlay.buffering { --mask-image: url("../../images/icons/buffer.svg"); }
.orasuna-media > .overlay.playing	  { --mask-image: url("../../images/icons/play.svg"); }
.orasuna-media:hover > .overlay.playing { filter: brightness(80%); }

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

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

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

.orasuna-btn {
	--btn-height: 46px;
	
	--btn-border-width: 0px;
	
	--btn-color-background: #D5ED99;
	--btn-color-border: transparent;
	--btn-color-text: #000;
	
	--btn-hover-color-background: var(--btn-color-background);
	--btn-hover-color-border: var(--btn-color-border);
	--btn-hover-color-text: var(--btn-color-text);

	--loader-transform: none;
	--loader-image: url("../../images/icons/spinner.svg");
	--loader-origin: content-box;
	--loader-position: center;
	--loader-repeat: no-repeat;
	--loader-size: contain;

	--icon-transform: none;
	--icon-image: url("../../images/icons/cta-arrow.svg");
	--icon-origin: content-box;
	--icon-position: center;
	--icon-repeat: no-repeat;
	--icon-size: 15px auto;
	
	display: inline-block;
	
	line-height: 0;
	
	pointer-events: none;
	
	&:focus { outline: none; }
	
	& > .btn-outer-wrapper {
		display: inline-block; height: var(--btn-height); overflow: hidden;
		
		background-color: var(--btn-color-background);
		border: solid var(--btn-border-width) var(--btn-color-border);
		border-radius: calc((var(--btn-height) / 2) + var(--btn-border-width));

		line-height: normal;
		color: var(--btn-color-text);

		cursor: pointer;
		pointer-events: auto;
		isolation: isolate;
		
		transition:
			background-color .2s ease-in-out,
			border-color	 .2s ease-in-out,
			color			 .2s ease-in-out;
		
		
		& > .btn-inner-wrapper {
			height: 100%;
			padding: 5px 25px; transition: padding .2s ease-in-out;

			& > .btn {
				display: inline-grid; height: 100%; overflow: hidden;
				grid-template-areas: "button loading";
				grid-template-columns: auto 0fr;
				grid-template-rows: 1fr;
				grid-column-gap: 0;
				align-items: center;

				transition:
					grid-column-gap		  .2s ease-in-out .2s,
					grid-template-columns .2s ease-in-out .2s;

				& > .loading-wrapper {
					grid-area: loading;
					justify-self: flex-end;
					display: block; overflow: hidden;

					&:before {
						content: '';
						transform: var(--loader-transform);
						display: block; height: 30px; width: 30px;

						background-color: currentColor;
						opacity: 0; transition: opacity .2s ease-in-out;

						-webkit-mask-image: var(--loader-image);
						mask-image: var(--loader-image);
						-webkit-mask-origin: var(--loader-origin);
						mask-origin: var(--loader-origin);
						-webkit-mask-position: var(--loader-position);
						mask-position: var(--loader-position);
						-webkit-mask-repeat: var(--loader-repeat);
						mask-repeat: var(--loader-repeat);
						-webkit-mask-size: var(--loader-size);
						mask-size: var(--loader-size);
					}
				}
				& > .btn-content-wrapper {
					grid-area: button;
					justify-self: flex-start;

					& > .btn-content {
						display: grid; overflow: hidden;
						grid-auto-columns: auto;
						grid-template-rows: 1fr;
						align-items: center;

						& > span {
							display: block; overflow: hidden;

							&.icon-wrapper > .icon:empty:before {
								content: '';
								transform: var(--icon-transform);
								display: block; height: 15px; width: 15px;

								background-color: currentColor;

								-webkit-mask-image: var(--icon-image);
								mask-image: var(--icon-image);
								-webkit-mask-origin: var(--icon-origin);
								mask-origin: var(--icon-origin);
								-webkit-mask-position: var(--icon-position);
								mask-position: var(--icon-position);
								-webkit-mask-repeat: var(--icon-repeat);
								mask-repeat: var(--icon-repeat);
								-webkit-mask-size: var(--icon-size);
								mask-size: var(--icon-size);
							}

							&.label-wrapper > .label {
								white-space: nowrap;
								font-size: 16px;
								font-weight: 500;
							}
						}
						& > span > span { display: block; }
					}
				}
			}
		}
	}
	&:hover > .btn-outer-wrapper {
		background-color: var(--btn-hover-color-background);
		border-color: var(--btn-hover-color-border);
		color: var(--btn-hover-color-text);
	}
	
	&.loading > .btn-outer-wrapper > .btn-inner-wrapper > .btn {
		grid-template-columns: auto 1fr;
		grid-column-gap: 15px;

		transition:
			grid-column-gap		  .2s ease-in-out,
			grid-template-columns .2s ease-in-out;
		
		& > .loading-wrapper:before {
			opacity: 1; transition: opacity .2s ease-in-out .2s;
		}
	}
}

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

.orasuna-btn {
	&.has-icon:not(.has-label) > .btn-outer-wrapper > .btn-inner-wrapper { padding: 5px 15.5px; }
	
	& > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content { grid-column-gap: 15px; }
	
	&.icon-label > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content {
		grid-template-areas: "icon label";

		& > .icon-wrapper { justify-self: flex-start; }
		& > .label-wrapper { text-align: right; }
	}
	&.label-icon > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content {
		grid-template-areas: "label icon";

		& > .icon-wrapper { justify-self: flex-end; }
		& > .label-wrapper { text-align: left; }
	}
	
	&:is(.icon-label, .label-icon) {
		& > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content > .icon-wrapper { grid-area: icon; }
		& > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content > .label-wrapper { grid-area: label; }
	}
}

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

.orasuna-btn {
	&.has-icon.hide-label > .btn-outer-wrapper > .btn-inner-wrapper {
		padding: 5px 15.5px;
		transition: padding .2s ease-in-out .3s;
	}
	
	&:is(.hide-icon, .hide-label) > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content { grid-column-gap: 0; }
	
	&.hide-icon > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content {
		transition:
			grid-column-gap		  .2s ease-in-out .2s,
			grid-template-columns .2s ease-in-out .2s;

		& > .icon-wrapper > .icon {
			opacity: 0;
			transition: opacity .2s ease-in-out;
		}
	}
	&.hide-label > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content {
		transition:
			grid-column-gap		  .2s ease-in-out .3s,
			grid-template-columns .2s ease-in-out .3s;

		& > .label-wrapper > .label {
			opacity: 0;
			transition: opacity .2s ease-in-out;
		}
	}

	&:is(.icon-label.hide-icon, .label-icon.hide-label) > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content { grid-template-columns: 0fr auto; }
	&:is(.icon-label.hide-label, .label-icon.hide-icon) > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content { grid-template-columns: auto 0fr; }
}
.orasuna-btn:not(.loading):hover {
	&.has-icon.hide-label > .btn-outer-wrapper > .btn-inner-wrapper {
		padding: 5px 25px;
		transition: padding .2s ease-in-out;
	}

	&:is(.hide-icon, .hide-label) > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content { grid-column-gap: 15px; }

	&.hide-icon > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content {
		transition:
			grid-column-gap		  .2s ease-in-out,
			grid-template-columns .2s ease-in-out;

		& > .icon-wrapper > .icon {
			opacity: 1;
			transition: opacity .2s ease-in-out .2s;
		}
	}
	&.hide-label > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content {
		transition:
			grid-column-gap		  .3s ease-in-out,
			grid-template-columns .3s ease-in-out;

		& > .label-wrapper > .label {
			opacity: 1;
			transition: opacity .2s ease-in-out .3s;
		}
	}

	&:is(.icon-label.hide-icon, .label-icon.hide-label) > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content { grid-template-columns: 1fr auto; }
	&:is(.icon-label.hide-label, .label-icon.hide-icon) > .btn-outer-wrapper > .btn-inner-wrapper > .btn > .btn-content-wrapper > .btn-content { grid-template-columns: auto 1fr; }
}

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

.cta-link {
    display: inline-block;
	text-decoration: none;
	
	cursor: pointer;
	pointer-events: none;
}
.cta-link .label {
	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;
}
.cta-link.current .label,
.cta-link:hover .label {
	background-size: 100% 100%;
	background-position: bottom left;
}

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