@charset "utf-8";

/* Quick and dirty reset */
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	text-decoration: inherit;
	color: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, img {
	display: block;
}

h1,h2,h3,h4,h5{
	display: block;
}

ul{
	list-style-type: none;
}

/************ Browser-Specific ************/
img{
    -ms-interpolation-mode: bicubic; /* Makes raster images look better in IE */
}

body{
	-webkit-font-smoothing: antialiased; /* Makes fonts look better in webkit and Firefox */
	-moz-osx-font-smoothing: grayscale;
}

input[type="text"], input[type="password"], input[type="number"]{
    -webkit-appearance: none; 		/* Allows input elements to be styled in Safari */
}

textarea{
	overflow: auto;					/* Removes compulsory scrollbar in IE */
}


/*Box Sizing*/
*, *:before, *:after{
	box-sizing: border-box;
}

/*Clearfix*/
.clearfix:after{
	content: "";
	display: table;
	clear: both;
}

/* General Styles */
nav{
	position: relative;
	background: #FF7400;
	color: #fafafa;
}

body{
	font-family: 'Raleway', "Trebuchet MS", "Lucida Grande", "Lucida Sands", sans-serif; 
	font-weight: 300;
	font-size: 18px;
	color: #231f20;
	background-color: #fafafa;
	overflow-x: hidden;
}

button{
	border: 0;
	border-radius: 0;
	background-color: #00CF00;
	font-size: inherit;
}

button:hover{
	background-color: #00F600;
	cursor: pointer;
}

button:active{
	background-color: #00A800;
}

section, header{
	position: relative;
	width: 100%;
	min-height: 20em;
	background-color: #F2F2F2;
	background-size: cover;
	background-position: center;
	margin-top: 1em;
	padding: 1em;
}

header{
	min-height: 12em;
}

header:not(#splash){
	background-image: url('images/spread.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
}

main{
	position: relative;
	padding: 0 1em 1em 1em;
}

aside{
	position: relative;
	margin-top: 1em;
	padding: 1em;
	background-color: #423b3d;
	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sands", sans-serif;
	color: #fafafa;
}

aside a{
	color: #fafafa;
}

aside a::after{
	border-color: #fafafa;
}

.wrap, nav .container{
	max-width: 1300px;
	margin: auto;
}

.container{
	position: relative;
}

.left{
	display: block;
	float: left;
}

.right{
	display: block;
	float: right;
}

.vh{
	height: 100vh;			/* occupies the entire height of window */
	min-height: 400px;
}

.white{
	color: #fafafa;
}

.sidenote{
	width: 45%;
	padding: 6em .8em;
}

.mainpoint{
	width: 80%;
	max-width: 800px;
	padding: 3em;
}

.content a{
	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sands", sans-serif;
	display: inline-block;
	color: #FF0000;
	text-decoration: none;
	padding: 1em 0;
}

.content a::after{
	display: inline-block;
	content: ">";
	width: 1.3em;
	height: 1.2em;
	border: 1px solid #FF0000;
	border-radius: 2em;
	text-align: center;
	vertical-align: text-bottom;
	padding-bottom: 1.2em;
	margin-left: .33em;
}

.content sup a::after{
	content: none;
	border: none;
	padding: 0;
	
}

.content a:hover{
	cursor: pointer;
	text-decoration: underline;
}

.content a:active{
	color: #D20000;
}

.content aside a{
	color: #fafafa;
}

.content aside a::after{
	border-color: #fafafa;
}

.padded{
	padding: 1.5em 0;
}

.border-top{
	border-top: 1px solid #ccc;
}

.block{
	display: block;
}

.inline-block{
	display: inline-block;
}

.center{
	display: block;
	margin: auto;
}

.centered{
	text-align: center;
}

.sidenote.center{
	width: 50%;
}

.margin-left{
	margin-left: 1em;
}

.margin-right{
	margin-right: 1em;
}

.margin-bottom{
	margin-bottom: 1em;
}

.twenty{
	width: 20%;
}

.twentyfive-margin{
	width: calc(25% - 1em);
}

.thirty{
	width: 30%;
}

.fourty{
	width: 40%;
}

.fifty, .fiftystay{
	width: 50%;
}

.seventyfive{
	width: 75%;
}

.clearright{
	clear: right;
}

.bluebg{
	background-color: #BBFFFF;
}

.lightgreybg{
	background-color: #F2F2F2;
}

.moved{					/* Moves an element off the page, hiding it */
	position: absolute;
	left: -3000px;
}

.button{
	min-width: 7.5em;
	line-height: 3em;
	text-align: center;
	border: 0;
	border-radius: 0;
	background-color: #00ECEC;
	font-size: inherit;
}

.button:hover{
	background-color: #00FBFB;
	cursor: pointer;
}

.button:active{
	background-color: #009F9F;
}

.hidden{
	display: none!important;
}

/*** Layout ***/
#menu, #closemenu{	/* Hamburger */
	display: none;
}

nav ul{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* OLD - Chrome */
	display: flex;

	-ms-flex-direction: row;
	-ms-flex-wrap: wrap;
	-ms-justify-content: flex-start; /*Justifies content to the left*/
	-ms-align-content: flex-start; /* Does not distribute space between lines */
	-ms-align-items: stretch;

	-webkit-flex-direction: row;
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: flex-start; /*Justifies content to the left*/
	-webkit-align-content: flex-start; /* Does not distribute space between lines */
	-webkit-align-items: stretch;

	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start; /*Justifies content to the left*/
	align-content: flex-start; /* Does not distribute space between lines */
	align-items: stretch;

	width: 80%;
}

nav li{
	position: relative;
	display: inline-block;
	min-width: 7.5em;
	height: 3em;
	text-align: center;
	padding: 0 1em;
}

nav li a{
	display: inline-block;
	min-width: 7.5em;
	line-height: 3em;
	text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

nav button{
	display: inline-block;
	min-width: 7.5em;
	line-height: 3em;
	text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom:0;
}

nav li:hover{
	cursor: pointer;
	background-color: #D25F00;
}

nav li:active{
	background-color: #A24900;
}

#home #logo img{
	margin-top: 3.5em;
}

#benefits #logo{
	margin-top: -1em;
	margin-bottom: 1em;
}

#logo img{
	width: 100%;
	max-width: 600px;
	margin: auto;
	margin-top: 1em;
}

#logo h2{
	top: 5em;
	width: 90%;
	text-align: center;
	margin: auto;
}

#logo h3{
	text-align: center;
	padding-top: 0;
}

footer{
	width: 100%;
	background-color: #A20000;
	color: #fafafa;
	text-align: center;
	line-height: 3em;
	margin-top: 1em;
}

footer a:hover{
	color: #ccc;
}

footer a:active{
	color: #ededed;
}


/****** Text Styles *******/

h1{
	font-size: 3em;
	text-align: center;
	font-weight: 600;
}

h2{
	font-size: 1.8em;
	padding-bottom: .5em;
	text-align: inherit;
}

main h4{
	font-family: 'Playfair Display', serif;
	font-size: 1.5em;
}

h3{
	font-size: 1.2em;
	line-height: 1.05em;
	padding-top: 1em;
	text-align: inherit;
}

h4{
	font-size: 1.33em;
	line-height: 1.05em;
	padding: 1em 0;
	text-align: inherit;
}

.banner{
	text-align: center;
	background: #fafafa;
	color: #FF7400;
	width: calc(100% + 2em);
	padding: .67em 1em;
	margin-bottom: .67em;
	margin-left: -1em;
	border-top: 1px solid #3e3739;
	border-bottom: .25em solid #3e3739;
	box-shadow: 0 .1em .2em #000;
}

p{
	font-size: 1em;
	line-height: 1.1em;
	margin-bottom: 1em;
	color: inherit;
	text-align: inherit;
}

ul.bullet{
	list-style-type: circle;
	padding-left: 1em;
}

ul.bullet li{
	line-height: 1.5em;
	margin-bottom: 1em;
}

ul.bullet2{
	list-style: disc;
	padding-left: 2em;
}

ul.bullet2 li{
	margin-bottom: 0;
}

dt{
	font-family: 'Playfair Display', serif;
	font-size: 1.5em;
	padding: 1em 0 .5em 0;
}

dd{
	font-family: 'Raleway', "Trebuchet MS", "Lucida Grande", "Lucida Sands", sans-serif;
	padding-bottom: 1em;
}

sup{
	font-size: .667em;
	vertical-align: super;
}

sup a:not(.foo){		/* increases specificity without the need for !important */
	padding: 0;
}

.bold{
	font-weight: bold;
}

.sans{					/* Make certain strange characters in chosen font look normal */
	font-family: sans-serif;
	font-weight: 400;
}

.righttext{
	text-align: right;
}

:target{
	color: #00CF00;
}

#email2{
	display: none;
}

input[type="text"], textarea{
	width: 100%;
	max-width: 37.5em;
	border: 1px solid #ccc;
	padding: 1em;
	margin-bottom: 1em;
	resize: none;
	outline: none;
}

input[type="submit"]{
	width: 100%;
	max-width: 37.5em;
	height: 3em;
	border-radius: 0;
}

input[type="text"]:hover, textarea:hover, input[type="text"]:focus, textarea:focus{
	box-shadow: 0 0 .1em #00FBFB;
}

aside ul a{
	padding: .5em 0;
}


/* Tablet Styles */
@media only screen and (max-width: 64em){
	nav li, nav li a{
		min-width: 6em;
	}

	body{
		font-size: 16px;
	}

	.sidenote, .sidenote.center{
		width: 66.67%;
	}

	.mainpoint{
		width: 100%;	/* Still has padding */
	}
	
	main.fifty{
		width: calc(75% - 2em);
		float: left;
		padding-top: .67em;
	}


	aside.twentyfive-margin{
		float: right;
		clear: right;
	}

	#contact .seventyfive, #contact .twentyfive-margin{
		width: calc(50% - 1em);
	}

}


/* Mobile Styles */
@media only screen and (max-width: 40em){
		body{
			font-size: 14px;
		}

		nav .container{
			min-height: 1.33em;
		}

		nav ul{
			width: 66.67%;
		}

		nav li{
			min-width: 7.5em;
			height: 1.67em;
		}

		nav button, nav li a{
			line-height: 1.67em;
		}

		nav button::after, nav li a::after{
			content: " >";
		}

		header{
			padding: .5em;
			min-height: 0;
			background-image: none !important;
		}

		#logo img{
			margin-top: 0;
			width: 100%;
		}

		.seventyfive, .fifty, .twenty, .thirty, .twentyfive-margin{
			width: 100% !important;
		}

		section{
			padding: 0;
		}

		.sidenote, .sidenote.center{
			width: 100%;
			padding-left: 2em;
			padding-right: 2em;
		}

		.sidenote.white{
			background-color: rgba(0,0,0,0.3);
		}

		.sidenote h2{
			font-size: 1.4em;
			text-shadow: 0 .5px 0 #999;
		}

		h3{
			font-size: 1.1em;
		}

		p{
			font-size: .9em;
		}

		.banner{
			width: calc(100% + 1em);
			margin-left: -.5em;
		}
}

@media only screen and (max-width: 480px){		/* This is for the hamburger menu */
	#menu, #closemenu{
		display: inline;
		text-align: left;
		fill: currentcolor;
	}

	#menu:hover, #closemenu:hover{
		cursor: pointer;
	}

	#closemenu{
		font-size: 2em;
		font-weight: bold;
	}

	#menu-container{
		display: block;
		height: 3em;
		padding: .5em 1em;
	}
}