:root{ --black: #060606;
	--red: #FF5619;
	--yellow: #F7F714;
	--blue: #6600FF;
	--teal: #0DFFCF;
	--white: #FFFFFF;
}

*{
	box-sizing: border-box;
}

a,
a:link,
a:visited,
a:hover,
a:active{
	text-decoration: none;
}

body{
	margin: 0;
	padding: 0;

	font-family: 'Urbanist', sans-serif;
	font-size: 16px;
	background-color: #FFFFEE;
}

body > main.container{
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	margin: 0 auto;
}

@media screen and (min-width: 768px) and (min-height: 768px){
	body > main.container{
		scroll-snap-type: y proximity;
	}

}

header.primary{
	width: 100%;
	position: relative;
}

header.primary nav.bar{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	padding: 0 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(0,0,0,0.95);
}

header.primary nav.bar ul{
	margin: 0;
	padding: 0;
	text-indent: 0;
}

header.primary nav.bar ul > li{
	display: inline-block;
	padding-right: 1em;
	margin-right: 1em;
	border-right: 1px solid #222;
}

header.primary nav.bar ul > li:last-child{
	padding-right: 0;
	margin-right: 0;
	border-right: none;
}

header.primary nav.bar a,
header.primary nav.bar a:link,
header.primary nav.bar a:visited,
header.primary nav.bar a:hover,
header.primary nav.bar a:active{
	color: rgba(150,150,150);
	font-weight: 400;
	text-transform: uppercase;
}

header.primary nav.bar .logo{
	color: var(--white);
	font-weight: 400;
	font-size: 2em;
	text-align: left;
	text-transform: uppercase;
	position: relative;
	font-family: 'Gideon Roman', cursive;
}

section.primary{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

section.primary.lead,
section.primary.contact{
}

section.primary figure.banner{
	position: relative;
	grid-area: 1 / 1 / 1 / 1;
}

section.primary figure.banner .gradient-primary{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	grid-area: 1 / 1 / 1 / 1;
}

section.primary figure.banner{
	display: block;
	margin: 0;
	padding: 0;
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
}

section.primary figure.banner{
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}

section.primary.lead figure.banner{
	border-bottom: 3px solid var(--yellow);
	background-image: url( ./yellow.png );
}

section.primary.summary figure.banner{
	border-top: 2px solid var(--white);
	background-image: url( ./blue.png );
	border-bottom: 3px solid var(--blue);
}

section.primary.contact figure.banner{
	border-top: 2px solid var(--white);
	background-image: url( ./red.png );
}

section.primary aside.caption{
	grid-area: 1 / 1 / 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

section.primary aside.caption > .card{
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	background-color: rgba( 0, 0, 64, 0.5 );
	color: #fff;
	font-size: 2em;
	padding: 1em;
	grid-area: 1 / 1 / 1 / 1;
	position: relative;
}

section.primary aside.caption > .card{
	background-color: rgba( 0, 0, 32, 0.75);
}

section.primary.lead aside.caption > .card{
	background-color: rgba( 0, 0, 16, 0.75);
}

section.primary.contact aside.caption > .card{
	background-color: rgba( 0, 0, 0, 0.65);
}

section.primary aside.caption > .card h1,
section.primary aside.caption > .card h2{
	font-size: 1em;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

section.primary aside.caption > .card p,
section.primary aside.caption > .card ul{
	margin: 0;
	padding: 0;
	font-size: 0.5em;
	margin-top: 15px;
	line-height: 1.5em;
}

section.primary aside.caption > .card ul{
	padding-left: 17px;
}

section.primary aside.caption > .card li{
}

section.primary aside.caption > .card a{
	margin: 0 auto;
	display: block;
	font-size: 0.5em;
	text-align: right;
}

section.primary aside.caption > .card a,
section.primary aside.caption > .card a:link,
section.primary aside.caption > .card a:visited,
section.primary aside.caption > .card a:hover,
section.primary aside.caption > .card a:active{
	color: var(--yellow);
}

section.primary.lead aside.caption > .card{
	max-width: 500px;
}

section.primary.summary aside.caption > .card{
	width: 975px;
}

@media screen and (max-width: 1300px){
	section.primary.summary aside.caption > .card{
		width: 80%;
	}
}

@media screen and (max-width: 767px){
	section.primary.contact aside.caption > .card,
	section.primary.summary aside.caption > .card{
		width: 99%;
	}
}


section.primary.summary .card .card-body{
	width: 50%;
	padding-left: 1em;
	float: left;
}

@media screen and (max-width: 767px){
	section.primary.summary .card .card-body{
		float: none;
		width: 99%;
		padding-left: 0;
	}
}

section.primary.summary .card .card-body:nth-child(2){
	padding-left: 0;
}

section.primary.lead figure.banner .gradient-primary{
	background: linear-gradient(rgb(255, 0, 0), rgba(255, 0, 0, 0.75) 25%, rgba( 64, 64, 0, 0.25 ));
	background: linear-gradient(rgb(255, 0, 0), rgba(255, 0, 0, 0.75) 25%, rgba( 0, 0, 0, 0.7 ));
	opacity: 0.5;
}

section.primary.summary figure.banner .gradient-primary{
	background: linear-gradient( to bottom, rgba( 0, 0, 0 ), rgba( 0, 0, 16, 1 ) 2%, rgba( 0, 0, 64, 1 ) 10%, rgba(0,0,255,0.80) 30%, rgba( 32,128, 255,0.70 ) );
	opacity: 0.9;
}

section.primary.contact figure.banner .gradient-primary{
	background: linear-gradient( to bottom, rgba(255,255,0,0.6), rgba(255,255,0,0.25) 25%, rgba(255,0,0,0)75%);
	opacity: 0.5;
}

section.primary.contact #contact-form-1 .row{
	width: 910px;
	max-width: 910px;
}

@media screen and (max-width: 1200px){
	section.primary.contact #contact-form-1 .row{
		width: auto;
		min-width: 80vw;
		max-width: 
	}
}

section.primary.contact #contact-form-1 .column-100{
	width: 100%;
}

section.primary.contact #contact-form-1 .column-50{
	padding-right: 1.75em;
	float: left;
	width: 50%;
	font-size: 0.5em;
}

section.primary.contact #contact-form-1 .column-50:last-child{
	padding-right: 0;
}

@media screen and (max-width: 767px){
	section.primary.contact #contact-form-1 .column-50{
		width: 100%;
		padding-right: 0;
	}
}

section.primary.contact #contact-form-1 label{
	margin-bottom: 8px;
	display: block;
}

section.primary.contact #contact-form-1 input{
	width: 100%;
	display: block;
	margin-bottom: 1.5em;
	font-size: 16px;
	line-height: 2.5em;
	text-indent: 8px;
}

section.primary.contact #contact-form-1 #submit-1{
	margin: 0;
	border: none;
	background: transparent;
	color: #fff;
	line-height: 1.5em;
	font-size: 16px;
	font-family: 'Urbanist', sans-serif;
	display: inline-block;
	padding: 1em;
	border: 1px solid var(--yellow);
	float: right;
	font-weight: 600;
	background-color: rgba(0,0,0,0.8);
}

@media screen and (max-width: 767px){
	section.primary.contact #contact-form-1 #submit-1{
		width: 100%;
	}
}

section.primary.contact #contact-form-1 #submit-1 .color-block{
	display: none;
	width: 16px;
	height: 16px;
	position: relative;
	top: 3px;
	margin-right: 0.5em;
}

section.primary.contact #contact-form-1 #submit-1 .color-block.red{
	background-color: var(--red);
}

section.primary.contact #contact-form-1 #submit-1 .color-block.yellow{
	background-color: var(--yellow);
}

section.primary.contact #contact-form-1 #submit-1 .color-block.blue{
	background-color: var(--blue);
}

section.primary.contact #contact-form-1 #submit-1 span{
}

.no-wrap{
	white-space: nowrap;
}

.offset-icon{
	position: relative;
	top: 8px;
	color: var(--red);
}

#loader{
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba( 255, 255, 255, 0.98 );
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.15s ease-in-out;
}

#loader > .block {
	margin-right: 1em;
	width: 2vw;
	height: 2vw;

	min-width: 32px;
	min-height: 32px;
}

#loader > .block.red{
	background-color: var(--red);
}

#loader > .block.yellow{
	background-color: var(--yellow);
	--animate-delay: 0.05s;
}

#loader > .block.blue{
	background-color: var(--blue);
	--animate-delay: 0.05s;
}

#loader > .block:last-child {
	margin-right: 0;
}

#loader.hide{
	display: none;
}

#loader.fading{
	opacity: 0;
}

.hidden-desktop,
.hidden-mobile{
	display: none;
}

@media screen and (max-width: 767px){
	.hidden-desktop{
		display: block;
	}

	.hidden-mobile{
		display: none;
	}
}

@media screen and (min-width: 768px){
	.hidden-mobile{
		display: block;
	}

	.hidden-desktop{
		display: none;
	}
}

#thank-you{
	text-align: center;
}

.hidden{
	display: none !important;
}