@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;
}

footer{
	align-content: center;
	text-align: center;
	
}

h2{
	text-align: center;
	
}
h3{
	text-align: center;
	align-content: center;
	font-size:  25px;
}
h4{
	text-align: center;
	font-size: 20px;
}
h5{
	align-content: center;
	font-size: 20px;
	text-align: 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);
}
h7{
	align-content: center;
	font-size: 12px;
}
p{
	font:italic;
	font-size: 15px;
	text-align: center;
}
.Logo{	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 192px;
	align-content: center;
	
}
.calendar{
	width: 380;
}
.flyer{
	height: 380px;
}
.flyer2
{width: 350px; 
}
.notice{
	width:300px;
}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

/* Month header */
.month {
  padding: 70px 25px;
  width: 100%;
	text-align: center;
	background-color: #81AD7D;
}

/* Month list */
.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
  float: left;
  padding-top: 10px;
}

/* Next button */
.month .next {
  float: right;
  padding-top: 10px;
}




.row:after{
	clear: both;
}
	.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-green{
	background-color: #B3D28E;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
	border-bottom: thick;
	border-bottom-color: #39942D solid;
	border-bottom-style: solid;
	
}
.info-box-darkgreen{
	background-color:#83A880;
	color: ghostwhite;
	padding: 50px 10px 40px ;
	text-align: center;	
	margin-top: 30px;
	margin-left: 10px;
	margin-right: 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;
}
/*Desktop View*/
@media (min-width: 1024px){
	body{
		max-width: 1024px;
	}
header{
		max-width: 1024px;
		width: 98%;
		padding: 50px;
		background-color: #008000;
		margin-left: 1%;
		
		border-bottom-width: thick;
		border-bottom-style: solid;
		border-bottom-color: #339D2C;
	}
	.calendar{
		width: 900px;
	}
	.flyer{
		width: 900px;
		height: 1000px;
	}
	.flyer2
{width: 900px; 
}
		.flyer3
{width: 500px; 
}
.notice{
	width:900px;
}

	.Logo{
		float: center;
		width: 205px;
		height: 230px;}
		
	.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-one-fourth{
		width: 50%;
		float: left;
	
	}
	.col-md{
		width: 100%;
		float: left;
	}}