/* Base */

html,body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14pt;
	color: #333333;
}

.contain {
	min-width: 300px;
	max-width: 1000px;
	margin: 0 auto;
}

/* Header */

header {
	background-color: rgba(255,255,255,.95); ;
	color: #333333;
	width: 100%;
	position: fixed;
	top:0;
	z-index: 2;
}
header .contain {
	height: 100%;
	padding: 10px 0;
	/*border-bottom: 2px solid #dae3e5;*/
	overflow: hidden;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

header a,
header a:link,
header a:visited,
header a:hover {
	display: block;
	height: 100%;
	width: 100%;
	padding: 15px 0;
	color: #333333;
	font-size: .8em;
	text-decoration: none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

header .logo {
	float:left;
	overflow: hidden;
	height: 100%;
	margin-left: 16px;
}

header .logo h1 {
	font-size: 1.3em;
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	height: 100%;
	margin: 0;
}

header .logo h1 a:link {
	padding-left: 60px;
	background: url('logo2.png') no-repeat left;
	background-size: contain;
}

header .logo h1 a:hover { color: #5daebf;}

header nav {
	overflow: hidden;
	height: 100%;
	display: inline-block;
	float:right;
}

header nav ul {
	height: 100%;
	overflow: hidden;
}

header nav li {
	display: inline-block;
	height: 100%;
	margin-right: 16px;

	text-transform: uppercase;
	font-size: 1em;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: .05em;
}

header nav li a span {
	border-bottom: 2px solid transparent;
}

header nav li a:hover span {
	border-bottom:2px solid #333333;
}

header nav li a.active span {
	border-bottom:2px solid # ;
}

header .ham {
	display: none;
	float: right;
	width: 25px;
	height: 25px;
	background:url('ham.png') no-repeat center;
	background-size: 75%;
	font-family: sans-serif;
	padding: 5px;
	margin-top: 10px;
	margin-right: 8px;
	color:white;
}

header input[type="checkbox"] { display:none; }

/* Content Grid */

.content {
	min-height: 100%;
	margin-top: 80px;
	overflow: hidden;
	clear: both;
}

.row {
	clear: both;
	overflow: hidden;
	width: 100%;
	height: auto;
	margin-top: 24px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

.row.title + .row, .row .row, .row .row .box {
	margin-top: 0;
	padding: 0;
}

.box {
	overflow: hidden;
	float: left;
	height: 100%;
	width: 100%;
	padding: 0 16px;
	transition:width .1s linear;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	margin-bottom: 30px;
}

.half > .box { width:50%; }
.third > .box { width:33.333%; }
.forth > .box { width: 25%; }
.fifth > .box { width: 20%; }

.third > .double { width: 66.666%; }
.forth > .double { width: 50%; }
.fifth > .double { width: 40%; }

.forth > .triple { width: 75%; }
.fifth > .triple { width: 60%; }

.fifth > .quad { width: 80%; }

.vhalf div {
	height: 50%;
	margin-top: 32px;
}

.vhalf div:first-child { margin: 0; }
.vhalf p,.box p:first-child { margin-top:0; }

/* Type Stylings */

.smltype, .smltype p, .smltype a { font-size: .8em; }

h1,h2,h3,h4 {
	font-size: 3em;
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .05em;
	color:#5daebf;
	text-align: center;
	margin: 20px 0 40px 0;
}

h2 {
	text-align: left;
	font-size: 2em;
	margin-bottom: 30px;
}

h3 {
	text-align: left;
	font-size: 1.3em;
	margin-bottom: 20px;
}

h4 {
	text-align: left;
	font-size: .95em;
	margin-bottom: 10px;
	color: #333333;
	word-spacing: .2em;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

h5 {
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .05em;
	color:#333333;
	font-weight: 700;
}

a:link {
	color:#5daebf;
	font-size: 1em;
	text-decoration: none;
}
a:visited {
	color:#4A8B99;
	text-decoration: underline;
}
a:hover {
	text-decoration: underline;
}

p {
	margin: 20px 0;
	font-size: .9em;
	line-height: 1.45em;
}

strong, b {
	font-weight: 700;
}

em, i {
	font-style: italic;
} 

.content ul {
	margin-top: 20px;
	font-size: .9em;
}

.content ul li p:first-child {
	margin: 5px 0;
}

.content ul a:link {
	font-size: .9em;
}

/* Other Elements */

img {
	max-width: 100%;
	display: block;
	border-radius: 3px;
	margin-top: 32px;
}

.box img:first-of-type { margin-top: 0; }

.hero { position: relative; }

.hero h1:first-line { line-height: .7em; }

.hero h1 {
	color: #333333;
	text-align: left;
	background-color: rgba(255,255,255,.9);
	font-size: 2.5em;
	line-height: 1.2em;

	/*height: 100%;
	width: 96.8%;*/
	margin: 0 16px;
	padding:16px;

	box-sizing:border-box;
	-moz-box-sizing:border-box;
	position: absolute;
	top:10px;
	left:0;
}

.colorbox {
	width:50px;
	height: 50px;
	display: inline-block;
	font-size: .5em;
	padding: 5px;
	margin:5px 16px;
	border:1px solid #aaaaaa;
	vertical-align: bottom;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

.colorbox p {
	margin: 0;
}

.video {
	height: 410px;
	width: 100%;
	display: inline-block;
	border-radius: 3px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

.video.small {
	max-height: 20%;
	max-width: 50%;
	float:left;
}

.row .video:first-of-type.small {
	padding-right: 16px;
}
.row .video:last-of-type.small {
	padding-left: 16px;
}

.video > * {
	height: 100%;
	width: 100%;
	border-radius: 3px;
}

/* Footer */

footer, footer p {
	margin-top: 30px;
	width: 100%;
	clear: both;
	font-size: .7rem;
	color: #333333;
	text-align: center;
}

/* Responsive Stylings */

@media screen and (max-width:768px) {

	html,body,p { font-size: 14pt; }

	header nav {
		position: relative;
		left:-1000px;
		height: 0;
		opacity: 0;
		width: 100%;
		transition:height .2s linear, opacity .3s linear .15s, left .2s linear;
	}

	header input#showMenu[type="checkbox"]:checked ~ nav {
		position: relative;
		left:0;

		height: auto;
		opacity: 1;

		transition: left .2s linear, height .2s linear, opacity .3s linear .15s;
	}

	header nav ul {
		margin: 8px 16px 0 16px;
	}
	
	header nav li {
		display: block;
		height: 50px;
		width: 100%;
		margin-right: 16px;

		border-top: 2px solid #dae3e5;
	}

	header nav li a span {
		border-bottom: 2px solid transparent;
	}

	header nav li a:hover span {
		border-bottom:2px solid #333333;
	}

	header nav li a.active span {
		border-bottom:2px solid #5daebf;
	}

	header .ham {
		display: block;
	}

	.box {
		margin-bottom: 16px;
	}

	.half .box, .third .box, .forth .box,
	.fifth .box, .third .double { 
		width: 100%; 
		margin-top: 5px;
	}

	.row:first-child {
		margin-top: 24px;
	}

	.row, .vhalf div {
		margin-top: 0;
		font-size: 1rem;
	}

	h1 {
		font-size: 3em;
		margin: 40px 0;
	}

	h2 {
		font-size: 2em;
		margin-top: 40px;
		margin-bottom: 30px;
	}

	h3 {
		font-size: 1.3em;
		margin-top: 40px;
		margin-bottom: 20px;
	}

	h4 {
		font-size: .95em;
		margin-top: 30px;
		margin-bottom: 20px;
	}

	.smltype, .smltype p,.smltype a {
		font-size: 1em;
	}

	.hero {
		position: static;
		margin-bottom: 10px;
	}

	.hero h1 {
		text-align: center;
		background-color: transparent;

		height: 100%;
		width: 100%;
		margin: 0;
		padding:0 0 10px 0;

		position: static;
		top:0;
		left:0;
		box-sizing:border-box;
		-moz-box-sizing:border-box; /* Firefox */
	}

	.hero h1:first-line { line-height: normal; }

	.video {
		max-width: 100%;
		max-width: 100%;
	}

	.video.small {
		max-height: 100%;
		max-width: 100%;
		float:none;
	}

	.row .video:first-of-type.small, .row .video:last-of-type.small {
		padding-left: 0;
		padding-right: 0;
	}

	img { 
		margin-left: auto; 
		margin-right: auto; 
	}

	footer { height: auto;}

}