@font-face {
    font-family: 'source_sans_proregular';
    src: url('fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-regular-webfont.woff') format('woff'),
         url('fonts/sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_proitalic';
    src: url('fonts/sourcesanspro-it-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-it-webfont.woff') format('woff'),
         url('fonts/sourcesanspro-it-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_probold';
    src: url('fonts/sourcesanspro-bold-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-bold-webfont.woff') format('woff'),
         url('fonts/sourcesanspro-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_probold_italic';
    src: url('fonts/sourcesanspro-boldit-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-boldit-webfont.woff') format('woff'),
         url('fonts/sourcesanspro-boldit-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_prosemibold';
    src: url('fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-semibold-webfont.woff') format('woff'),
         url('fonts/sourcesanspro-semibold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_proSBdIt';
    src: url('fonts/sourcesanspro-semiboldit-webfont.woff2') format('woff2'),
         url('fonts/sourcesanspro-semiboldit-webfont.woff') format('woff'),
         url('fonts/sourcesanspro-semiboldit-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotobold';
    src: url('fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-bold-webfont.woff') format('woff'),
         url('fonts/roboto-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cabinbold';
    src: url('fonts/cabin-bold-webfont.woff2') format('woff2'),
         url('fonts/cabin-bold-webfont.woff') format('woff'),
         url('fonts/cabin-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cabinsemibold';
    src: url('fonts/cabin-semibold-webfont.woff2') format('woff2'),
         url('fonts/cabin-semibold-webfont.woff') format('woff'),
         url('fonts/cabin-semibold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}



body,html,nav ul,
ul.grid, ul.grid  li,
ul.big, ul.big li{
	padding:0;
	margin:0;
	list-style:none;
}

img,video{
	width:100%;
   max-width:100%;
   display:block;
}

body{font-family:'source_sans_proregular', 'Arial';}
h1{font-family:'robotobold', 'Arial';}
h3,h4,strong{font-family:'source_sans_prosemibold', 'Arial';}
em{font-family:'source_sans_proitalic';}
h2,ul.grid a{font-family:'cabinsemibold', 'Arial';}
nav a {font-family:'cabinbold', 'Arial';}

body{color:black; background-color:white;}
a{color:rgba(17,117,181,1);}
h1{opacity:.8}
ul.grid p{opacity:.8;}
footer{color:white;background-color:rgba(17,117,181,1);}

h1{font-size:2em;}
nav a{font-size:1.1em;}
p.big{font-size:1.4em;}
p{line-height:1.7em;} 
li{line-height:1.5em;}
h2{line-height:1.3em;}
h1{line-height:1.1em;}
p{margin:1.2em 0;} 
h1,h2,h3,h4,h5{margin:1em 0;}
h1{margin-bottom:0;}







.c{
	padding:3% 7% 0 7%;
	overflow:auto;
}

header .c{
	padding-top:1.5%;
}

	.c > *:first-child{
		margin-top:0;
	}

content .c {max-width:1345px;}


	





header{
	padding-top:1.8em;
	overflow:auto;
	border-top:1em #1175b5 solid;
}

.logo{
	display:block;
	width:7.3em;
	float:left;
	margin:0 5% 0 0;
}

nav ul{
	float:right;
}
	
nav li{
	float:left;
	margin:.6em .55em;	
}
	nav li:last-child{
		margin-right:0;
	}


nav li a{
	display:block;
	text-decoration:none;
	border-bottom:.22em rgba(17,117,181,.85) solid;
	padding: .6em .9em;
}
	nav li a:hover,
	nav li a:focus{
		color:black;
		border-color:#222;
	}
	
	nav li.urhere a{
		color:rgba(31,53,66,.85);
		border-color:rgba(31,53,66,.65);
	}
	
	

	
	
	
	
ul.grid  li{
	font-size:.85em;
	border-top:.1em #666 solid;
	padding-top:2.85%;
}

ul.grid li p{
	line-height:1.4em;
	margin-top:.6em;
	margin-bottom:.8em;
}

ul.grid  a{
	position:relative;
	display:block;
	text-decoration:none;
	font-size:1.1em;
}


ul.grid  a span{
	position:absolute;
	min-width:55%;
	left:-2.8%;
	bottom:9%;
	padding:.7em 12% .7em 9%;
	background-color:#1175b5;
	color:white;
}	

ul.grid a:hover span,
ul.grid a:focus span{
	background-color:black;
}




p a img{
	float:left;
	width:10em;
	margin:0 4% 1em 0;
}


p.caption{
	margin:0 0 2em 0;
	padding:.7em 0 1.2em 1.2em;
	border:.15em #666 solid;
	border-right:0;
	border-top:0;
	border-bottom-left-radius:1em;
}

header .extra p.caption{
	font-size:.9em;
	line-height:1.3em;
	border-left:none;
	border-right-color:gray;
	border-bottom-color:gray;
	border-right:.15em solid gray;
	border-bottom-right-radius:1em;
	border-bottom-left-radius:0;
}

.parallel p.caption{
	font-size:.85em;
	padding:5% 0 6% 7%;
}

.parallel .photos{
	float:right;
	width:45%;
	margin:0 0 0 5%;
}

.parallel .photos img{
	border-top-left-radius:2em;
	
}





footer{
	margin-top:3em;
	padding-top:1em;
	padding-bottom:2em;
}



header .extra{
	display:none;
}


@media screen and (min-width:300px) and (max-width:559px){

	ul.grid li{
		float:left;
		width:47.5%;
		margin-right:5%;
	}
		
	ul.grid  li:nth-child(2n){
		margin-right:0;
	}
	
	ul.grid  li:nth-child(2n+1){
		clear:left;
	}	
	
	ul.grid  li:nth-child(-n+2){
		border-top:0;
		padding-top:0;
	}
	
}


@media screen and (min-width:560px){
	ul.grid img{
		border-top-right-radius:1.7em;
	}
}

@media screen and (min-width:560px) and (max-width:1649px){
		
	ul.grid  li{
		float:left;
		width:31%;
		margin-right:3.5%;
	}

		ul.grid  li:nth-child(3n+1){
			clear:left;
		}
		
		ul.grid  li:nth-child(3n){
			margin-right:0;
		}
		
		ul.grid  li:nth-child(-n+3){
			border-top:0;
			padding-top:0;
		}
		
}

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

	header .c{
		padding-right:0;
		padding-left:0;
	}
	
	content .c,footer .c{
		padding-left:5.5%;
		padding-right:5.5%;
		padding-top:2.6em;
	}
	
	header{
		float:left;
		width:18.5%;
	}
	
	header .extra{
		display:block;
	}
	
	footer{
		padding-left:18.5%;
	}

	nav li{
		width:100%;
		margin:0;
	}
	
	nav li a{
		float:none;
		padding:1.4em 0 .7em 20%;
		font-size:1.2em;
	}
	
	.logo{
		margin-left:13%;
		max-width:85%;
	}
	
}

@media screen and (min-width:1650px){
	
	header{width:16%;}
	footer{
		padding-left:16%;
	}
	
	ul.grid  li{
		font-size:.85em;
		float:left;
		width:23.5%;
		margin-right:2%;
	}

		ul.grid  li:nth-child(4n+1){
			clear:left;
		}
		
		ul.grid  li:nth-child(4n){
			margin-right:0;
		}
		
		ul.grid  li:nth-child(-n+4){
			border-top:0;
			padding-top:0;
		}
		
}






@media screen and (max-width:680px){h1{font-size:1.8em;}header{font-size:.9em;}h2{font-size:1.5em;}p.big{font-size:1.1em;}}
@media screen and (max-width:620px){body{font-size:.9em;}.c{padding-left:6%;padding-right:6%;}}
@media screen and (max-width:540px){header{font-size:.8em;}}
@media screen and (max-width:470px){h1{font-size:1.6em;}h2{font-size:1.3em;}nav li a{padding: .95em .45em .3em .45em;}nav ul{float:left;}}
@media screen and (max-width:440px){h1{font-size:1.5em;}h2{font-size:1.2em;} 
	.logo{width:6.3em; margin-right:2%;}
	nav li a{padding: .55em .25em .15em .25em;}
	nav li{margin:.6em .4em;}
}

@media screen and (max-width:400px){body{font-size:.83em;}}
@media screen and (max-width:370px){h1{font-size:1.4em;}h2{font-size:1.1em;}}
@media screen and (max-width:350px){body{font-size:.75em;}}


@media screen and (min-width:700px){body{font-size:1.05em;}}
@media screen and (min-width:760px){body{font-size:1.1em;}}
@media screen and (min-width:820px){body{font-size:1.2em;}}
@media screen and (min-width:940px){body{font-size:1.3em;}	h1{font-size:2.2em;}}
@media screen and (min-width:1060px){body{font-size:1.5em;}}
@media screen and (min-width:1260px){body{font-size:1.5em;} h1{font-size:2.4em;}}
@media screen and (min-width:1500px){body{font-size:1.6em;}}