/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */


html {
  width: 100%;
  height: 100%;
 }

body {
	font-family: 'Roboto', sans-serif; 
	font-weight: 400; 
	font-style: normal;
  font-size: 1em;
	color: #626a6d;
	line-height: 1.5;
}

h1 {
	font-family: 'Roboto', sans-serif; 
	font-weight: 700; 
	font-style: normal;
	font-size: 3em;
	line-height: 1.25;
	margin: 0;
	padding: 0;
	font-weight: 200;
}

h2 {
	font-family: 'Roboto', sans-serif; 
	font-weight: 300; 
	font-style: normal;
	line-height: 1.125;
	margin: 0;
	padding: 0;
	font-size: 1.25em;
}

h3 {
	font-family: 'Roboto', sans-serif; 
	font-style: normal;
	line-height: 1.125;
	margin: 0 0 .25em 0;
	padding: 0;
	font-size: 1.75em;
	font-weight: 600;
	color: #211d70;
}


p {
	margin: 0 0 1em 0;
  font-size: .9375;
  font-weight: 300;
}

img {
	max-width: 100%;
}

a {
	outline: none;
	text-decoration: none;
	color: #d49b00;
	border-bottom: 1px solid rgba(212,155,0,.3);
	-o-1ea4b0z: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
	-ms-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
	-moz-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
	-webkit-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
	transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out, opacity .2s ease-in-out;
}

a:hover {
	color: #b48300;
	border-bottom: 1px solid rgba(212,155,0,.5);
}

a:focus{
    outline:0;
}


.contentwidth {
	max-width: 1280px;
	margin: 0 auto;
}


::-moz-selection {
    background: #7ac2ff;
    text-shadow: none;
}

::selection {
    background: #7ac2ff;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}


/* ==========================================================================
   HEADER
   ========================================================================== */
 





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

.headerContainer {
	position: relative;
  width: 100%;
  height: 4.75em;

  margin: 0 auto;
  padding: 1.5em 0 0 0;
	font-family: 'Roboto', sans-serif;	
	font-weight: 400;
}

.logo {
	float: left;
		margin: 0 8%;
}

.logo {
	max-width: 340px;
}

.escape {
	float: right;
	margin: 0 8%;
}

.escape a {
	font-weight: 400; 
	padding: 0;
	margin: .25em 0 0;
	display: block;
	color: #ffc000;
	text-decoration: none;
	border: none;
	border-radius: 2em;
	background: #211d70;
	width: 180px;
	text-align: center;
	padding: .5em 0 .5625em 0;
}




@media screen and (min-width: 1440px) {
	.logo {
		float: left;
			margin: 0 13%;
	}
}

@media screen and (max-width: 960px) {
	
	.headerContainer {
		position: relative;
	  width: 100%;
	  height: 9em;
	  margin: 0 auto;
	  padding: 1.5em 0 0 0;
	}

	.logo {
		float: left;
		margin: 0 5%;
		width: 90%;
	}
		
	.escape {
		float: left;
		width: 90%;
		margin: .75em 5% 0 5%;
	}
	
		
}



/* ==========================================================================
   PHOTO
   ========================================================================== */


.hero {
	position: relative;
	width: 100%;
  background: url("../img/hero2.jpg") center right no-repeat;
	background-size: cover; 
	height: 430px;
	border-top: 1px solid rgba(0,0,0,.08);
	border-bottom: 1px solid rgba(0,0,0,.08);
}

.heroText {
	font-weight: 500; 
	width: 60%;
	padding: 5.5em 32% 0 8%;
	margin: 0;
}



.hero h4 {
	font-weight: 400; 
	font-size: 1.25em;
	font-family: 'Roboto Slab', serif;
	padding: 0;
	margin: 0 0 .375em;
	text-transform: uppercase;
	color: #fff;
}

.hero h1 {
	font-weight: 700; 
	font-size: 3em;
	padding: 0;
	margin: 0;
	color: #fff;
}

.hero a {
	font-weight: 400; 
	padding: 0;
	margin: 1em 0 .375em;
	display: block;
	color: #211d70;
	text-decoration: none;
	border: none;
	border-radius: 2em;
	background: #ffc000;
	width: 180px;
	text-align: center;
	padding: .5em 0 .5625em 0;
}


@media screen and (min-width: 1440px) {
	.heroText {
	  width: 74%;
		padding: 4.5em 13% 0 13%;
	}
}

@media screen and (max-width: 960px) {
	.heroText {
		height: 400px;
		background: url("../img/hero2.jpg") center left no-repeat;
		width: 84%;
		padding: 4.5em 8% 0 8%;
	}
	.hide960 {
		display: none;
	}
	

}


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

.heroText {
		padding: 3.5em 8% 0 8%;
	}
.hero h4 {
	font-size: 1.25em;
	margin: 0 0 .375em;
}

.hero h1 {
	font-size: 2.5em;

}
}

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


.hero h1 {
	font-size: 2em;

}
}





/* ==========================================================================
   MAX WIDTH 1280
   ========================================================================== */


.contentWidth {
	position: relative;
  width: 84%;
  padding: 0 8% 0 8%;
  margin: 0 auto;
}

@media screen and (min-width: 1440px) {
	.contentWidth {
	  width: 74%;
	  padding: 0 13% 0 13%;
	}
}

@media screen and (max-width: 960px) {
	.contentWidth {
		  width: 90%;
		  padding: 0 5%;
	}
}


/* ==========================================================================
   KEYMESSAGE
   ========================================================================== */

.help {
	position: relative;
	width: 81%;
	margin: -3.25em 8% 0 8%;
  text-align: center;
  background: rgba(35,35,112,.95);
  padding: 2% 2% 2.25% 2%;
  color: #fff;
  border: 1px solid #211d70
}

.help h2 {
  color: #fff;
  line-height: 1.4;
}

@media screen and (min-width: 1440px) {
	.help {
	  width: 71%;
		margin: -2.125em 13% 0 13%;
	}
}

@media screen and (max-width: 960px) {
	.help {
		width: 83%;
		margin: -2.125em 5% 0 5%;
	  padding: 4% 4% 4.25% 4%;
	}	
}

.bold {
  font-weight: 700;
}

.gold {
  color: #ffc000;
}

#keymessage {
	position: relative;
	width: 84%;
  padding: 0 8% 0 8%;
  margin: 4em auto 3em auto;
	
}

.keymessage {
	column-count: 2;
	column-gap: 4em;
}
.keymessage img {
 	margin: 2em 0;
}

#keymessage h3 {
 	margin: 0 0 1em 0;
 	width: 100%;
 	font-weight: 400; 
	font-size: 1.25em;
	font-family: 'Roboto Slab', serif;
	padding: 0;
	text-transform: uppercase;
	color: #211d70;
}

.keymessage p {
	line-height: 2;
}


@media screen and (min-width: 1440px) {
	#keymessage {
	  width: 74%;
	  padding: 0 13% 0 13%;
	}
}


@media screen and (max-width: 960px) {
	#keymessage {
		width: 90%;
	  padding: 0 5%;
	}
}

@media screen and (max-width: 768px) {
	.keymessage {
		column-count: 1;

	}
}



/* ==========================================================================
   CALLOUTS
   ========================================================================== */


.callouts {
}

.callout {
	float: left;
	width: 48%;
	padding: 3em 2% 4em 0;
	border-top: 1px solid #ddd;
}

.last {
	padding: 3em 0 0 2%;
}

.callout h2 {
	font-weight: 400; 
	font-size: 1.25em;
	font-family: 'Roboto Slab', serif;
	padding: 0;
	margin: 0 0 1em;
	text-transform: uppercase;
	color: #211d70;
}

.callout p {
	margin: 1em 0 1em 0;
	line-height: 1.75;
}

.callout a {
	margin: 1em 0 .75em 0;
}

.callout ul li {
	font-weight: 300;
	margin: 0 0 .375em 0;
}


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

	.callout {
		width: 100%;
		padding: 3em 0 4em 0;
		border-top: 1px solid #ddd;
	}
	
	.last {
		padding: 4em 0 4em 0;
	}
	
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}