﻿/* -- Page -- */
body {
	display: flex; flex-direction: column;
	min-height: 100vh;
	background-color: white;
}
body.has-modal { overflow-y: hidden;}
#header.is-scrolled { box-shadow: 0px 10px 20px white;}


/* -- Header -- */
#header.scroll-to-fixed-fixed { box-shadow: 0px 10px 20px white;}
#header.hero { 
	height: 265px; 
	background-color: #fff; border-bottom: 0px #005164 solid; 
	padding: 0 5% 0 5%;
}
#header > div { margin-bottom: 0;}
#header.hero .hero-body { padding: 0;}

#header .logo { padding: 30px 0 0 0; text-align: right;}
#header .logo div { margin: 0 !important; padding: 0;}	
#header .logo h2 {
	margin: 0 0 30px; padding: 0;
	font-weight: 400;
	font-size: 8vw; color: black;
	line-height: 1em;
}


/* -- Main Panel Navigation -- */
#header nav.panel { transition: all 75ms ease-in-out;}
#header .panel-block {
	justify-content: flex-end;
	padding: 0 2px 0 0;
	font-size: 1.25em; color: #666; font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.75em;
	transition: all 75ms ease-in-out;
}
#header a.panel-block.is-active { letter-spacing: 1px; background-color: transparent; color: black;}
#header a.panel-block:hover { letter-spacing: 2px; background-color: transparent; color: black;}
.pageLayout-1 #header a.panel-block:hover { color: white; font-weight: 600;}


/* -- Content -- */
main { flex: 1;}
main.section { padding: 0 5% 0 5%;} 
.pageLayout-1 main.section { width: 100%; padding: 0;}
main.section .container { padding-top: 20px; margin: 0 !important;}

.div.frame-space-before-extra-large { margin-top: 6.25em !important;}
.div.frame-space-after-extra-large { margin-bottom: 6.25em !important;}



/* -- Footer -- */
footer.footer { 
	height: 70px; padding: 0 5% 0 5%;
	text-align: right;
}
footer a#up { 
	display: block;
	padding-right: 0;
	text-align: center;
	border-width: 0; border-radius: 5px;
}
footer a#up svg { fill: #999;}
footer a#up:hover svg { fill: black;}
footer a#up:hover { background-color: white !important;}



/* ## Tablet ## */
@media screen and ( min-width: 769px ) {

	/* -- Header -- */ 
	#header.hero { height: 100px; padding-left: 7.5%;}
	#header .logo h2 { 
		margin-bottom: 20px; 
		font-size: 48px;
	}
	
	/* -- Navigation -- */
	#header nav.panel {
		position: absolute; right: 0; top: 125px;
		z-index: 10;
		width: 165px;
	}	
	.pageLayout-1 #header .panel-block { color: white; text-shadow: 0px 0px 3px #000;}

	/* -- Content -- */
	main.section { padding-left: 7.5%; padding-right: 25%;}
	.pageLayout-1 main.section {}
	
		
	/* -- Footer -- */
	footer.footer { padding: 0 5% 0 7.5%;}
	footer a#up { padding-right: 32.5%;}


}



/* ## Desktop ## */
@media screen and ( min-width: 1056px ) {

	/* -- Top -- */
	
	/* -- Header -- */

	/* -- Mainnav -- */

	/* -- Footer -- */

}


/* ## Widescreen ## */
@media screen and ( min-width: 1248px ) {


}


/* ## Fullhh ## */
@media screen and ( min-width: 1344px ) {


}