/* 

==========================================================================

GLOBAL & WP SPECIFIC STYLES

==========================================================================

*/



@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600);



* {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}



a, a:hover, a:active, a:focus, input::-moz-focus-inner { 

	outline: 0;

}



input, textarea, select {

    -webkit-appearance: none;

    -webkit-border-radius:0; 

    border-radius:0;

}



img,

audio,

video,

canvas,

iframe {

	max-width: 100%;

}



html {

	min-height: 100%;

	margin-bottom: 1px;

	overflow: -moz-scrollbars-vertical!important; 

	-webkit-text-size-adjust: none; 

}



::selection {

	background:#011b58;

	color:#fff;

}



::-moz-selection {

	background:#011b58;

	color:#fff;

}



::-webkit-selection {

	background:#011b58;

	color:#fff;

}



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

.cf:after {clear: both;}

.cf {clear: both;}



h1 {

	font: 35px 'Source Sans Pro', Helvetica, Arial, sans-serif;	

	margin:0 0 10px 0;

	padding:0;

	color: #011b58;

}



h2 {

	font: 30px 'Source Sans Pro', Helvetica, Arial, sans-serif;	

	margin:0 0 10px 0;

	padding:0;

	color: #011b58;

}



h3 {

	font: 25px 'Source Sans Pro', Helvetica, Arial, sans-serif;	

	margin:0 0 10px 0;

	padding:0;

	color: #011b58;

}



h4 {

	font: 20px 'Source Sans Pro', Helvetica, Arial, sans-serif;	

	margin:0 0 10px 0;

	padding:0;

	color: #011b58;

}



h5 {

	font: 18px 'Source Sans Pro', Helvetica, Arial, sans-serif;	

	margin:0 0 10px 0;

	padding:0;

	color: #011b58;

}



a {

	color: #011b58;

	text-decoration: none;

    transition: all 0.3s ease 0s;	

}



a:hover {

	color: #011b58;

	text-decoration: none;

    transition: all 0.3s ease 0s;	

}



p {

	margin: 0 0 20px 0;

}



blockquote {

	background: #f3f3f3;

	border-left: 5px solid #011b58;

	margin: 15px 0;

	padding: 15px;

	vertical-align: middle;

}



strong {

	font-weight:bold;

}



em {

	font-style:italic;

}



body {

	background: #f4f4f4;

	color: #7d7d7d; 

	font: 18px/1.5 'Source Sans Pro', Helvetica, Arial, sans-serif;	

	margin:0;

	-webkit-font-smoothing: antialiased;

}



.inner {

	width: 100%;

	max-width: 980px;

	padding: 0 10px;

	margin: 0 auto;

	position: relative;

	display: block;

}



/* 

==========================================================================

HEADER

==========================================================================

*/



header {

	z-index: 999;

	width:100%;

	max-width: 1050px;

	margin: 0px auto;

	background: #011b58;

	padding: 0;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;		

}



.padder {

	height:69px;

	margin: 0;

	padding: 0;

}



.container {

	max-width: 1050px;

	width:100%;

	margin:0 auto;

	background: #fff;

}



/* 

==========================================================================

LOGO

==========================================================================

*/



.logo {

    float: left;

    height: 45px;

    width: 200px;    

    margin: 12px 5px 12px 0;

	padding: 0;    

}



.logo a {

    background: url("../images/logo.png");

    float: left;

    height: 45px;

    width: 200px;

    margin: 0;

    text-decoration: none;

    transition: all 0.3s ease 0s;

}



.logo:hover {

	transform: scale(0.9);

	transition: all 0.3s ease 0s;

}





/* 

==========================================================================

BUTTONS

==========================================================================

*/



.social {

	float: right;

}



.icon  {

    float: left;

    margin: 0;

    text-decoration: none;

    transition: all 0.3s ease 0s;

    border-left: 1px solid #fff;

    padding: 23px 15px;

    color:#fff;

	font-size: 15px;

	vertical-align: middle;

	text-transform: uppercase;

}



.icon:hover {

	background-color: #005cc6;

    color:#fff;	

}



.report {

	background: #007bc1;

	color: #fff;

}





/* 

==========================================================================

NAVIGATION

==========================================================================

*/



.menu {

	float:right;

	padding: 19px 10px 19px 30px;

	color: #fff;

	text-transform: uppercase;

    border-left: 1px solid #fff;

}



.menu-text {

	font-size: 18px;

	vertical-align: middle;

	margin: 0 10px 0 0;

}



.menu-toggle, .menu-toggle:hover {

	color: #fff;

}



.menu-icon {

	background: url('../images/menu.png') no-repeat;

	display: inline-block;

	vertical-align: middle;

	height:30px;

	width:30px;

}



.menu .active .menu-icon {

	background: url('../images/close.png') no-repeat;

	display: inline-block !important;

	max-height: auto!important

	vertical-align: middle;

	height:30px!important;

	width:30px !important;

}



nav {

	max-height: 0;

	margin: 0;   

	text-align: center;

	display: none;

	background:#011b58;	

	transition: all 0.4s ease 0s;	

	display: block;

	overflow: hidden;			

}



nav ul {

	display: block;

	float:none;

    margin: 0;

    padding: 0;

}

  

nav li {

	border-top: 1px solid #002b90;

    display: inline-block;

    text-align: center;

    width: 100%;

}

  

nav a {

	width: 100%;

    border:0;

    text-align: center;

    color: #fff;

    display: inline-block;

    width:100%;

    padding: 10px;

	transition: all 0.1s ease 0s;  

}



nav a:hover {

	text-decoration:none;

	color: #fff;

    background: #0467d9;

}



nav li a:focus {

	text-decoration:none;

	background: #0467d9;

	color:#fff;	

}



.active {

	display: block;

	width: 100%;

	max-height: 35em;

}



.mobile-report {

	display: none;

}





/* 

==========================================================================

INNER PAGE

==========================================================================

*/



.hero {

	background: url('../images/hero2.jpg') no-repeat;

	width: 100%;

	height: 400px;

	background-size: cover;

	margin: 0 0 50px 0;

}



.hero h1 {

    color: #fff;

    padding: 11% 9%;

    width: 50%;

    font-size: 40px;

}



.content {

	margin: 0 0 50px 0;

	display: block;

}



.left {

	float:left;

	width: 20%;

	margin: 0 5% 0 0;

}



.left img {

	border:0;

	width:100%;

	height:auto;

	margin: 0 0 2% 0;

}



.right {

	float:left;

	width: 75%;

}



.right a {

	color: #011b58;

	text-decoration: underline;

}



.right a:hover {

	color: #011b58;

	text-decoration: underline;

}



.full {

	margin: 50px 0;

}



.links {

	width: 60%;

	text-align: center;

	margin: 30px auto;

}



.links img {

	width: 100%;

	margin: 0 auto 30px auto;

}





/* 

==========================================================================

FOOTER

==========================================================================

*/





footer {

	clear:both;

	font-size: 15px;

	background: #011b58;

	padding: 20px 0;

	color: #fff;

}



footer p {

	margin: 0;

	text-align: center;

}



.video-js {

	width:100%!important;

	height:auto!important;	

	margin: 0 0 30px 0;

}



.vjs-default-skin .vjs-big-play-button {

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: 28% auto;

}



/* 

==========================================================================

RETINA FULL SIZE

==========================================================================

*/



@media

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (   min--moz-device-pixel-ratio: 2),

only screen and (     -o-min-device-pixel-ratio: 2/1),

only screen and (        min-device-pixel-ratio: 2),

only screen and (                min-resolution: 192dpi),

only screen and (                min-resolution: 2dppx) { 



 .logo a {

	background: url('../images/logo_2x.png') no-repeat;

	background-size: 200px 45px;

 }



 .menu-icon {

	background: url('../images/menu_2x.png') no-repeat;

	background-size: 30px 30px;

 }



 .menu .active .menu-icon {

	background: url('../images/close_2x.png') no-repeat;

	background-size: 30px 30px;

  }





}







/* 

==========================================================================

MEDIA QUERIES

==========================================================================

*/







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



}





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



}





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



 .hide {

 	display: none;

 }



 .hero {

	background: url('../images/hero3.jpg') no-repeat;

	background-position: center center;

 }



.hero h1 {

    color: #fff;

    padding: 22% 3%;

    width: 50%;

    text-align: center;

    display: block;

    margin: 0 auto;

    font-size: 30px;

} 



}





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



 .hero {

 	background: url('../images/hero4.jpg') no-repeat;

	background-position: center center;	

	height: 200px;

 }



 .hero h1 {

    padding: 10% 3%;

    font-size: 20px;

}



 .left {

 	text-align: center;

 	display: block;

 	float: none;

 	width: 100%;

 	margin: 0 0 30px 0;

 }



  .right {

 	display: block;

 	float: none;

 	width: 100%;

 	margin: 0 0 30px 0;

 }



 .left img {

	border:0;

	width:45%;

	height:auto;

	margin: 2%;

	display: inline-block;	

 }



 .left img:first-of-type {

	width: 50%;

	display: block;

	margin: 2% auto;

 }



 .report {

 	display: none;

 }



 a.mobile-report {

	display: block;

	position: fixed;

	bottom:0;

	width:100%;

	background: #011b58;

	padding: 10px;

	color: #fff;

 	text-align: center;

 	z-index: 99999;

 	text-transform: uppercase;

 }



  a.mobile-report:hover {

	background: #005cc6;

	color: #fff;

 }



 .container {

	margin:0 auto 40px auto;

 }



 footer {

	padding: 20px 0;

 }





}





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



.logo {

    width: 30px;     

}



 .logo a {

	background: url('../images/logo_mob.png') no-repeat;

	width:29px;

	height: 45px;

 }



@media

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (   min--moz-device-pixel-ratio: 2),

only screen and (     -o-min-device-pixel-ratio: 2/1),

only screen and (        min-device-pixel-ratio: 2),

only screen and (                min-resolution: 192dpi),

only screen and (                min-resolution: 2dppx) { 



 .logo a {

	background: url('../images/logo_mob_2x.png') no-repeat;

	background-size: 29px 45px;

 }



}





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



 .container, .inner, header, footer, nav, .left, .right {

	min-width:240px;

	width:100%;

 }



 .box {

	display: block;

	float: none;

	width: 100%;

	margin: 0 0 20px 0;

 }

 

}