/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);

html{
	height: 100%;
}

body{
	background-color: #ffffff;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #292929;
}

div{
	background-color: transparent;
	width: 100%;
	height: 100%;
}

button{
	width: 100%;
	height: 30px;
	line-height: 25px;
	font-weight: 700;
	margin: 10px 0px;
	background-color: #00539b;
	color: #ffffff;
	border: none;
	font-size: 14px;
}

button:hover{
	background-color: #292929;
}

address a, p a{
	color: #292929;
	text-decoration: none;
}


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

header{
	background-color:#ffffff;
	width: 100%;
	height: auto;
	min-height: 60px;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

header div{
	background-color: #ffffff;
	background-image: url(../assets/logo_100px.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 64px;
	height: 64px;
	margin: 2px 12px 2px 15px;
	border: 3px solid #ffffff;
	border-radius: 37px;
	position: absolute;
	z-index: 5;
	
}

header h1{
	margin: 0px;
	padding: 0px 0px 6px 95px;
	font-size: 24px;
	line-height: 26px;
	font-weight: 700;
	display: inline-block;
	width: auto;
	float: left;
	clear: both;
}

header h2{
	margin: 0px;
	padding: 8px 0px 0px 95px;
	font-size: 17px;
	line-height: 20px;
	font-weight: 700;
	display: inline-block;
	width: auto;
	float: left;
	clear: both;
}

/*=============*/
/*  NAVIGATION */
/*=============*/

header nav{
	background-color: #292929;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 15px 0px;
	box-shadow: inset 0px 0px 8px #000000;
	float: left;
	clear: both;
	overflow: hidden;	
}

ul{
	margin: 0px;
	padding: 0px;
}

ol{
	margin: 0px 10px;
	padding: 0px;
}

header nav ul li{
	list-style: none;
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0px;
	box-sizing: border-box;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: #ebebeb;
}

header nav ul li:nth-of-type(2), header nav ul li:nth-of-type(3), header nav ul li:nth-of-type(7), header nav ul li:nth-of-type(8){
	display: none;
}

header nav ul li img{
	width: auto;
	height: 16px;
}

header nav ul li a{
	height: 100%;
	display: block;
	color: #ffffff;
	text-decoration: none;
	padding-right: 0px;		
}

/*===========*/
/*  SECTION  */
/*===========*/

section h2{
	display: none;
}

section h3{
	font-weight: 400;
	font-size: 20px;
	margin: 10px 15px 0px 10px;
}

section figure{
	background-color: #292929;
	width: 100%;
	height: auto;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}

section figure img{
	width: 100%;
	height: auto;
}

section figure figcaption{
	background-color: #292929;
	margin: 0px;
	padding: 10px 15px 15px 15px;
	line-height: 16px;
	font-size: 12px;
	color: #ffffff;
	font-style: italic;
	text-align: right;
}

figcaption p{
	margin: 0px;
	padding: 0px 0px 5px 0px;
	text-align: justify;
}

figcaption a{
	display: inline-block;
	background-color: #ffcf01;
	padding: 5px 20px;
	color: #292929;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
}

section article{
	width: 100%;
	height: auto;
	padding: 10px;
	padding-bottom: 20px;
	float: left;
	clear: both;
	box-sizing: border-box;
}

section article figure{
	margin: 0px;
}

section article h3{	
	font-weight: 400;
	font-size: 35px;
	margin: 20px 0px 10px 0px;
}

section article h4{
	font-weight: 700;
	font-size: 18px;
	margin: 0px 0px 10px 0px; 
}

section article h5{
	color: #5b5a5a;
	margin: 20px 0px 10px 0px;
	padding: 0px;
	font-size: 14px;
	font-weight: 400;
}

section article h5 strong{
	color: #292929;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size: 22px;
	font-weight: 700;
}

section article div h6{
	color: #5b5a5a;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	font-size: 12px;
	font-weight: 400;
}

section article div h6 strong{
	color: #292929;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size: 18px;
	font-weight: 700;
}

section article address{
	display: inline-block;
	font-style: italic;
	color: #5B5A5A;
	margin: 0px 0px 0px 5px;
	padding: 0px;
}

section article div address{
	display: inline-block;
	font-style: normal;
	font-weight: 700;
	color: #292929;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-size: 14px;
}

section article time{
	display: inline-block;
	font-style: italic;
	color: #5B5A5A
}

section article p{
	font-size: 16px;
	text-align:  justify;
}

section article ul li{
	list-style: none;
	display: block;
	height: 35px;
	line-height: 35px;
	padding: 0px 10px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	cursor:  pointer;
}

section article ul li span{
	display: none;
	background-color: #cccccc;
	margin-left: 20px;
	padding: 0px 20px;
	line-height: 30px;
	font-weight: bold;
	border-radius: 3px;
}

section article ul li address{
	display: inline-block;
	font-style: italic;
	color: #5B5A5A;
	margin: 0px 0px 0px 10px;
	padding: 0px;
}

section article ul.more li{
	list-style: none;
	display: inline-block;
	height: 25px;
	line-height: 25px;
	padding: 0px 10px;
	box-sizing: border-box;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	color: #00539b;
}

section article ul.more li a{
	color: #00539b;
	text-decoration: none;
}

section article div{
	background-color: transparent;
	width: 100%;
	height: 100%;
	margin: 0px auto;
}

section article div form{
	text-align: center;
}
	
section article div form select{
	background-color: #fafafa;
	background-image: url(../assets/imagemap/select.png);
	background-position: 97% center;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	width: 100%;
	height: 30px;
	padding: 0px 5px;
	margin: 0px auto;
	border-radius: 0px;
	line-height: 30px;
	font-size: 12px;
	font-weight: 700px;
}

div.office_selector, div.office_card, div.link_card{
	width: 100%;
	height: auto;
	margin: 7px 0px;
	padding: 0px;
}

div.link_card img{
	width: auto;
	height: 100%;
}

div.office_card{
	border-bottom: 1px solid #292929;
}

div.office_card p{
	margin: 5px 0px 10px 0px;
	font-weight: 700;
}

div.contact_card{
	width: 100%;
	height: 125px;
	margin: 7px 0px;
	padding: 0px;
}

section header{
	display: none;
}

section article ol li{
	margin-top: 5px;
	clear: both;
	list-style: none;
}

section article div{
	background-color: transparent;
	width: 100%;
	height: 100%;
	margin: 0px auto;
}

section article div form{
	text-align: center;
}
	
section article div form select{
	background-color: #fafafa;
	background-image: url(../assets/imagemap/select.png);
	background-position: 97% center;
	background-repeat: no-repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
	width: 100%;
	height: 30px;
	padding: 0px 5px;
	margin: 0px auto;
	border-radius: 0px;
	line-height: 30px;
	font-size: 12px;
	font-weight: 700px;
}

section article fieldset{
	width: 98%;
	float: left;
	clear: none;
	margin: 0px 1% 20px 1%;
	padding: 0px 0px 10px 0px;
	box-sizing: border-box;
	border: 1px solid #cccccc;
}

section article fieldset.full{
	width: 98%;
}

section article fieldset legend{
	margin: 0px 3px;
	padding: 0px 7px;
}

section article ol input{
	width: 100%;
	height: 25px;
	font-size: 14px;
	line-height: 25px;
	border: none;
	border-bottom: 2px solid #cccccc;
	outline: none;
	background-color: transparent;
	margin: 5px 0px;
	text-align: center;
	font-weight: 700;
	padding: 0px;
}

section article ol input[type=checkbox]{
	width: auto;
	height: auto;
	margin: 0px;
	line-height: 20px;
}

section article ol label{
	display: block;
	width: 95%;
	padding: 0px;
	text-align: center;
	font-size: 12px;
	margin-top: -5px;
	margin-bottom: 2px;
	float: left;
}

section article ol label.check{
	display: inline-block;
	width: auto;
	text-align: left;
	margin: 0px 10px 0px 0px;
	float: none;
	font-size: 14px;
	line-height: 20px;
}

section article.print button{
	width: 20%;
	text-align: center;
}

div.add_input{
	width: 100%;
	height: 30px;
	text-align: center;
	font-size: 20px;
	line-height: 30px;
	font-weight: bold;
	color: #bbbbbb;
	border: 2px dashed #bbbbbb;
	margin: 10px 0px 20px 0px;
	cursor: pointer;
}

/*==========*/
/*  FOOTER  */
/*==========*/

footer{
	background-color: #292929;
	width: 100%;
	height: auto;
	padding: 15px 0px;
	text-align: center;
	clear: both;
}

footer p{
	font-size: 10px;
	color: #ffffff;
	margin: 15px 15px 0px 15px;
}

footer ul li{
	list-style: none;
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0px 15px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: #ebebeb;
}

footer ul li a{
	height: 100%;
	display: block;
	color: #ffcf01;
	text-decoration: none;
	padding-right: 0px;		
}

/*===========*/
/*  CLASSES  */
/*===========*/

header div.bgr{
	background-color: transparent;
	background-image: none;
	width: 24px;
	height: 40px;
	margin: 0px;
	padding: 10px 15px;
	border: none;
	float: none;
	border-radius: none;
	position: absolute;
	top: 0px;
	right: 0px;
}

div.set div.bar, div.open div.bar, div.close div.bar{
	background-color: #292929;
	background-image: none;
	width: 24px;
	height: 2px;
	margin: -1px 0px 0px 0px;
	padding: 0px;
	border: none;
	border-radius: none;
	position: absolute;
}


div.bgr.close{background-color: #222222; border-radius: 0px;}
div.close div.bar{background-color: #ffffff;}

div.set div.bar#b1{top: 34%;}
div.set div.bar#b2{top: 50%;}
div.set div.bar#b3{top: 65%;}
div.open div.bar#b1{animation: g2ob1 .25s linear none; top: 34%;}
div.open div.bar#b2{animation: g2ob2 .25s linear none; top: 50%;}
div.open div.bar#b3{animation: g2ob3 .25s linear none; top: 65%;}	
div.close div.bar#b1{animation: g2cb1 .25s linear none; top: 50%; z-index: 15; transform: rotate(45deg);}
div.close div.bar#b2{animation: g2cb2 .25s linear none;	opacity: 0;	z-index: 20;}
div.close div.bar#b3{animation: g2cb3 .25s linear none; top: 50%; z-index: 25; transform: rotate(-45deg);}

header nav.set{display: none;}
header nav.open{height: auto; display: block; animation: onav_200 .25s linear none;}
header nav.close{height: 0px; padding: 0px; animation: cnav_200 .25s linear none; animation-fill-mode: forwards;}

section article.mission, section article.service, section article.record{background-image: none;}

.gray{background-color: #ebebeb;}

/*======================*/
/*  MEDIA QUERY (30em)  */
/*======================*/

@media only screen and (min-width: 30em){

	/*==========*/
	/*  HEADER  */
	/*==========*/
	
	header{
		min-height: 70px;
	}

	header div{
		width: 74px;
		height: 74px;
		border-radius: 40px;
	}

	header h1{
		padding: 0px 0px 6px 105px;
		font-size: 28px;
		line-height: 32px;
	}

	header h2{
		padding: 8px 0px 0px 105px;
		font-size: 20px;
		line-height: 24px;
	}
	
	/*=============*/
	/*  NAVIGATION */
	/*=============*/
	
	header nav{
		padding: 20px 0px 15px 0px;
		text-align: center;
	}
	
	header nav ul li{
		display: inline-block;
		width: auto;
		height: 16px;
		line-height: 14px;
		font-size: 16px;
		padding: 0px 10px;
		text-align: center;
	}
	
	header nav ul li:nth-of-type(2), header nav ul li:nth-of-type(8){
		display: inline-block;
		padding: 0px 5px;
	}
	
	header nav ul li:nth-of-type(1), header nav ul li:nth-of-type(3), header nav ul li:nth-of-type(7), header nav ul li:nth-of-type(9){
		display: none;
	}
	
	/*===========*/
	/*  SECTION  */
	/*===========*/
	
	section h3{
		font-weight: 400;
		font-size: 26px;
		margin: 10px 15px 0px 15px;
	}
	
	section article{
		padding: 15px;
	}
	
	section article h4{
		font-size: 22px;
	}

	section article h5{
		font-size: 16px;
	}
	
	div.office_selector, div.office_card, div.link_card{
		width: 45%;
		height: auto;
		margin: 10px 2.5%;
		padding: 0px;
		float: left;
		clear: none;
	}
	
	div.link_card{
		height: 100px;
		text-align: center;
	}
	
	div.office_selector:nth-of-type(3), div.office_selector:nth-of-type(5), div.office_selector:nth-of-type(7), div.office_selector:nth-of-type(9), div.office_selector:nth-of-type(11){
		clear: both;
	}
	
	div.office_card:nth-of-type(3), div.office_card:nth-of-type(5), div.office_card:nth-of-type(7), div.office_card:nth-of-type(9), div.office_card:nth-of-type(11){
		clear: both;
	}
	
	div.link_card:nth-of-type(3), div.link_card:nth-of-type(5), div.link_card:nth-of-type(7), div.link_card:nth-of-type(9), div.link_card:nth-of-type(11){
		clear: both;
	}
	
	div.office_card{
		border-top: 1px solid #292929;
		border-bottom: none;
		padding-top: 10px;
	}
	
	div.office_card:nth-of-type(1), div.office_card:nth-of-type(2){
		border: none;
		padding-top: 0px;
	}
	
	div.contact_card{
		width: 25%;
		height: 125px;
		margin: 0px 1.5%;
		padding: 0px;
	}
	
	/*==========*/
	/*  FOOTER  */
	/*==========*/
	
	footer ul li{
		display: inline-block;
		padding: 0px 10px;
	}
	
	/*===========*/
	/*  CLASSES  */
	/*===========*/
	
	header div.bgr{
		padding: 15px 15px;
	}
	
	header nav.open{height: auto; display: block; animation: onav_20 .25s linear none;}
	header nav.close{height: 0px; padding: 0px; animation: cnav_20 .25s linear none; animation-fill-mode: forwards;}
}

/*======================*/
/*  MEDIA QUERY (40em)  */
/*======================*/

@media only screen and (min-width: 40em){
	
	/*==========*/
	/*  HEADER  */
	/*==========*/
	
	/*=============*/
	/*  NAVIGATION */
	/*=============*/
	
	/*===========*/
	/*  SECTION  */
	/*===========*/
	
	section h3{
		font-weight: 400;
		font-size: 28px;
		margin: 10px 15px 0px 15px;
	}
	
	section figure figcaption{
		line-height: 20px;
		font-size: 14px;
	}
	
	section article{
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	div.office_selector, div.office_card{
		width: 30%;
		height: auto;
		margin: 0px 1.5%;
		padding: 10px 0px 10px 0px;
		float: left;
		clear: none;
	}
	
	div.link_card{
		width: 17%;
		height: 100px;
		margin: 0px 1.5%;
		padding: 10px 0px 10px 0px;
		float: left;
		clear: none;
	}
	
	div.office_selector:nth-of-type(3), div.office_selector:nth-of-type(5), div.office_selector:nth-of-type(9){
		clear: none;
	}
	
	div.office_selector:nth-of-type(4), div.office_selector:nth-of-type(10){
		clear: both;
	}
	
	div.office_card:nth-of-type(3), div.office_card:nth-of-type(5), div.office_card:nth-of-type(9), div.office_card:nth-of-type(11){
		clear: none;
	}
	
	div.office_card:nth-of-type(4), div.office_card:nth-of-type(10){
		clear: both;
	}
	
	div.office_card:nth-of-type(1), div.office_card:nth-of-type(2), div.office_card:nth-of-type(3){
		border: none;
		padding-top: 0px;
	}
	
	div.link_card:nth-of-type(3), div.link_card:nth-of-type(5), div.link_card:nth-of-type(7), div.link_card:nth-of-type(9), div.link_card:nth-of-type(11){
		clear: none;
	}
	
	div.link_card:nth-of-type(6), div.link_card:nth-of-type(11){
		clear: both;
	}
	
	section article div#county{
		background-color: transparent;
		width: 30%;
		height: 100%;
		margin: 0px 2.5%;
		float: left;
		clear: none;
		box-shadow: none;
	}
	
	section article div#representative{
		background-color: transparent;
		width: 65%;
		height: 100%;
		margin: 0px;
		float: left;
		clear: none;
		box-shadow: none;
	}
	
	section article div.download{
		background-color: transparent;
		width: 35%;
		height: 100%;
		margin: 0px 2.5%;
		float: left;
		clear: none;
		box-shadow: none;
	}
	
	/*==========*/
	/*  FOOTER  */
	/*==========*/
	
	/*===========*/
	/*  CLASSES  */
	/*===========*/
	
	section article.mission{background-image: url(../assets/images/image_aside-001.png); background-position: right; padding-right: 220px;}
	section article.service{background-image: url(../assets/images/image_aside-002.png); background-position: left; padding-left: 400px; background-size: auto;}
	section article.record{background-image: url(../assets/images/image_aside-003.png); background-position: right; padding-right: 200px; background-size: auto;}
	section article.contribute{background-image: url("../assets/images/image_aside-004.png"); background-position: left; padding-left: 300px; background-size: 280px auto;}
	section article.fellowship{background-image: url("../assets/images/image_aside-006.png"); background-position: right; padding-right: 300px; background-size: 280px auto;}
	section article.fellowshipgray{background-image: url("../assets/images/image_aside-005.png"); background-position: left; padding-left: 300px; background-size: 280px auto;}
	section article.donation{background-image: url("../assets/images/image_aside-006.png"); background-position: right; padding-right: 300px; background-size: 280px auto;}
	div.instructions{width: 80%; margin: 20px 8% 0px 8%; padding: 2%; }
}

/*======================*/
/*  MEDIA QUERY (48em)  */
/*======================*/

@media only screen and (min-width: 48em){
	
	/*==========*/
	/*  HEADER  */
	/*==========*/
	
	/*=============*/
	/*  NAVIGATION */
	/*=============*/
	
	/*===========*/
	/*  SECTION  */
	/*===========*/
	
	section article div#county{
		background-color: transparent;
		width: 32.5%;
		height: 100%;
		margin: 0px 1.25%;
		float: left;
		clear: none;
		box-shadow: none;
	}
	
	section article div#representative{
		background-color: transparent;
		width: 62.5%;
		height: 100%;
		margin: 0px 1.25%;
		float: left;
		clear: none;
		box-shadow: none;
	}
	
	section article div.download{
		background-color: transparent;
		width: 100%;
		height: 100%;
		margin: 0px 1.25%;
		float: left;
		clear: both;
		box-shadow: none;
	}
	
	section article fieldset{
		width: 48%;
	}
	
	/*==========*/
	/*  FOOTER  */
	/*==========*/
	
	/*===========*/
	/*  CLASSES  */
	/*===========*/
}

/*======================*/
/*  MEDIA QUERY (64em)  */
/*======================*/

@media only screen and (min-width: 64em){	
	
	div{
		width: 1000px;
		height: auto;
		margin: 0px auto;
	}
	
	header div{
		box-shadow: none;
	}
	
	/*==========*/
	/*  HEADER  */
	/*==========*/
	
	/*=============*/
	/*  NAVIGATION */
	/*=============*/
	
	header nav, header nav.open, header nav.close, header nav.set{
		background-color: transparent;
		width: 590px;
		height: 40px;
		margin: 0px;
		margin-top: -32px;
		padding: 15px 0px;
		box-shadow: none;
		float: right;
		clear: none;
		display: block;
	}
	
	header nav ul li{
		
		display: block;
		width: auto;
		height: 40px;
		line-height: 40px;
		font-size: 17px;
		padding: 0px 20px;
		text-align: center;
		float: left;
	}
	
	header nav ul li:nth-of-type(3), header nav ul li:nth-of-type(7){
		display: inline-block;
		padding: 4px 20px;
	}
	
	header nav ul li:nth-of-type(1), header nav ul li:nth-of-type(2), header nav ul li:nth-of-type(8), header nav ul li:nth-of-type(9){
		display: none;
	}
	
	header nav ul li img{
		width: auto;
		height: 20px;
	}
	
	header nav ul li a{
		color: #292929;
		font-weight: 700;
	}
	
	/*===========*/
	/*  SECTION  */
	/*===========*/
	
	
	
	/*==========*/
	/*  FOOTER  */
	/*==========*/
	
	footer{
		clear: both;
		box-shadow: 0px 0px 5px 0px #292929;
	}
	
	/*===========*/
	/*  CLASSES  */
	/*===========*/
	
	
	header div.bgr{display: none;}
}

/*==============*/
/*  ANIMATIONS  */
/*==============*/

@keyframes g2cb1{
	0%{top: 35%; transform: rotate(0deg);}
	50%{top: 50%; transform: rotate(0deg);}
	100%{top: 50%; transform: rotate(45deg);}	
}

@keyframes g2cb2{
	0%{top: 50%; opacity: 1}
	50%{top: 50%; opacity: 0}
	100%{opacity: 0}	
}

@keyframes g2cb3{
	0%{top: 65%; transform: rotate(0deg);}
	50%{top: 50%; transform: rotate(0deg);}
	100%{top: 50%; transform: rotate(-45deg);}		
}

@keyframes g2ob1{
	0%{top: 50%; transform: rotate(-45deg);}
	50%{top: 50%; transform: rotate(0deg);}
	100%{top: 35%; transform: rotate(0deg);}	
}

@keyframes g2ob2{
	0%{opacity: 0;}
	50%{top: 50%; opacity: 1}
	100%{top: 50%; opacity: 1}	
}

@keyframes g2ob3{
	0%{top: 50%; transform: rotate(45deg);}
	50%{top: 50%; transform: rotate(0deg);}
	100%{top: 65%; transform: rotate(0deg);}		
}

@keyframes onav_200{
	0%{height: 0px; padding: 0px;}
	100%{height: 200px; padding: 15px 0px;}	
}

@keyframes cnav_200{
	0%{height: 200px; padding: 15px 0px}
	99%{height: 0px; padding: 0px;}
	100%{display: none;}
}

@keyframes onav_20{
	0%{height: 0px; padding: 0px;}
	100%{height: 20px; padding: 20px 0px 15px 0px;}	
}

@keyframes cnav_20{
	0%{height: 20px; padding: 20px 0px 15px 0px;}
	99%{height: 0px; padding: 0px;}
	100%{display: none;}
}

@keyframes onav_20-2{
	0%{height: 0px; padding: 0px;}
	100%{height: 20px; padding: 15px 0px;}	
}

@keyframes cnav_20-2{
	0%{height: 20px; padding: 15px 0px;}
	99%{height: 0px; padding: 0px;}
	100%{display: none;}
}
.region {
	display: inline-block;
	width: 45px;
	font-weight: 600;
}