@charset "utf-8";
/* CSS Document */

/* Mobile View */

html,
html * {
	padding: 0;
	margin:  0;
	box-sizing: border-box;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
header{
		align-content: center;
		padding: 80px;
		margin: auto;
		background-color: #008000;
		border-bottom-width: 10px;
		border-bottom-style: solid;
		border-bottom-color: #339D2C;
}
body{
	margin-left: auto;
	margin-right: auto;
}
h2{
	align-content: center;
	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
.Hatch{
	width: 360px;
}
.Leg{
	width: 360px;
}
.congressionalmap{
	width: 360px;
}
.Logo{
		
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 192px;
	align-content: center;
	}


	.style-nav ul{
		list-style-type: none
	}
.style-nav ul li a{
	text-decoration: none;
	align-content: center;
	color: ghostwhite;
	text-align: center;
	display: block;
	text-transform: uppercase;
	padding: 10px;
	float: center;
	background-color: #008000;
}

.info-box-blue{
	background-color: #B3D28E;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 5px;
	
	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}
.info-box-classi{
	background-color: #B3D28E;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	
	margin-right: 10px;
	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}
.info-box-classiii{
	background-color:#83A880;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 5px;

	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
	
}
.info-box-1stdst{
	background-color:#83A880;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-right: 10px;
	
	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}
.info-box-2nddst{
	background-color: #B3D28E;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 10px;

	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}
.info-box-3rddst{
	background-color: #B3D28E;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;

	margin-right: 10px;
	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}
.info-box-4thdst{
	background-color:#83A880;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 10px;

	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}
.info-box-5thdst{
	background-color:#83A880;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;

	margin-right: 10px;
	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
	
}
.info-box-6thdst{
	background-color: #B3D28E;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 10px;

	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}
.info-box-7thdst{
	background-color: #B3D28E;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	
	margin-right: 10px;
	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}
.info-box-8thdst{
	background-color:#83A880;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 10px;

	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
	
}
.info-box-9thdst{
	background-color:#83A880;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;

	margin-right: 10px;
	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
	
}
.info-box-10thdst{
	background-color: #B3D28E;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 10px;

	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
}

.county_button{
	border: darkcyan solid;
	padding: 2px 10px;
	border-radius: 40px;
	color: darkcyan ;
	text-decoration: none
}
.button {
	border: #81AD7D solid;
	background: #81AD7D;
	padding: 8px 30px;
	border-radius: 30px;
	color: ghostwhite;
	text-decoration: none;
	align-content: center;
}
.button:hover{
	background: #fafafa;
	color:#81AD7D;
}
.button1 {
	border: #B3D28E solid;
	background: #B3D28E;
	padding: 8px 30px;
	border-radius: 30px;
	color: ghostwhite;
	text-decoration: none;
	align-content: center;
}
.button1:hover{
	background: #fafafa;
	color:#81AD7D;
}
.card{
	width: auto;
	height: auto;
}

/*Desktop View*/
@media (min-width: 1024px){
	body{
		max-width: 1024px;
	}
header{
		max-width: 1024px;
		padding: 50px;
		background-color: #008000;

		border-bottom-width: thick;
		border-bottom-style: solid;
		border-bottom-color: #339D2C;
	}
	.Hatch{
		width: 900px;
	}
	.Leg{
	width: 900px;
}
	.Logo{
		float: center;
		width: 205px;
		height: 230px;}
.senator{
	width: 50%;
	float: left;
	
	
}

.card{
	width: 1024px;
	height: 862px;
}
	.congressionalmap{
		width: 900px;
	}
	.senator:after{clear:both;}
.Pic{
	width: 792px;
	height: 1224px;
}
	
	.style-logo{
		float: center;
		width: 200px;
		height: 200px;
	}
		
	.style-nav ul li a{
	text-decoration: none;
	color: ghostwhite;
	float: left;
	display: block;
	text-transform: uppercase;
	padding: 10px;
	text-indent: 20px;
	margin-left: 50px;
		
}
	.col-md{
		width: 100%;
		float: left;
	
	}
	}