html, body {
	height: 100%;
	margin: 0;
	overflow: auto;
}
body {
	font-family: helvetica, san-serif;
}
#header img {
	padding-left: 3%;
	float: left;
	background-color: #212b31;
}
/* ***Navigation*** */
#header {
	position: relative;
	z-index: -10;
	width: 100%;
	overflow: auto;
	background-color: #212b31;
}
#vine {
	position: relative;
	margin-top: -150px;
	margin-left: 345px;
	width: 45%;
	height: 200px;
	float: left;
}
#indexnav, #subnav {
	overflow: hidden;
	margin: 0 5% 0 0;

}
#subnav {
	margin-top: -200px;
	
}

nav ul {
	padding: 0;
	list-style: none;
	margin: 0 0 0 0;
	padding: 0;
	overflow: hidden;
	float: right;
}
#indexnav ul li, #subnav ul li {
	float: left;
}
nav li ul {
	display: none;
}
nav ul li a {
	font-size: 1.2em;
	display: block;
	text-decoration: none;
	color: #ffffff;
	padding: 10px 20px;
	margin-left: 1px;
	white-space: nowrap;
	text-shadow: 1px 1px 1px #000;
}
/* *** Behavior Styles *** */

nav ul li a:hover {
	background-color: #ccc;
	border-radius: 7px 7px 7px 7px;
	color: #000;
}

nav li:hover ul {
	display: block;
	position: absolute;
	width: 340px;
	z-index: 10;
}

nav li:hover li {
	float: none;
}
nav li:hover ul {
	background-color: #fafafa;
}
nav li:hover a {
	
	color: #000;
	text-shadow: 1px 1px 1px #ffffff;

}
nav li:hover li a:hover {
	background: #95A9B1;
}
#main {
	background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	min-height: 100%;
	
}
#first{
	height: 100vh;
	min-height: 100%;
	width: 100%;
	background-image: url("../img/big_red.png");
	background-size: cover;
	
}
#intro {
	display: block;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	width: 60%;
	padding-top: 8%;
	margin: 0 auto;
	color: white;
	font-size: 1em;
}
#second {
	height: 75vh;
	/*min-height: 75%;*/
}

#map {
	float: left;
	height: 100%;
	width: 50%;
	/*height: 100%;*/
	/*padding: 4%;*/
	display: block;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	/*background-color: #d5f5d5;*/
}
#map iframe {
	/*width: 800px;
	height: 600px;*/
	height: 100%;
	width: 100%;
}
#schedule {
	display: block;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	padding: 3em;
	min-height: 100%;
	width: 50%;
	float: left;
	font-size: 1em;
	color: white;
	background-color: rgba(116,159,100,0.7);
}

#news {
	width: 65%;
	float: left;
	margin-left: 10%;
}
#past {
	float: left;
	padding-left: 2em;
	/*background-color: #8eea9e;*/
	height: 900px;
	width: 20%;
	padding: 1em;
}
#links {
	/*background-color: white;*/
	border: 1px solid black;
	height: 865px;
	width: 90%;
	padding: 1em;
	font-size: 1.2em;
}
#album {
	text-align: left;
	margin: 1em 0 1em 0;
	clear: both;
}
#album h2 {
	text-align: left;
	margin-left: 2em;
}
.album {
	padding: 0 1em;
}
.contact {
	height: 100%;
}
#contact_wrap {
	background-image: url("../img/contact_bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 67%;
	margin: 205px 0 -16px 0;
	padding-top: 1%;
}
#contact {
	width: 25%;
	margin: 5% 5% 0 55%;
	padding: 5%;
	font-size: 1.2em;
	border: 1px solid black;
	box-shadow: 10px 10px 5px #888888;
}
footer {
	text-align: center;
	background-color: #212b31;
	color: white;
	margin: 0;
	padding: .05em 0;
	clear: both;
}
/* for 1200px or less */
@media screen and (max-width: 1200px) {
#main {
	background-image: url("../img/bg2.jpg");
	background-size: cover;
}
#first{
	background-image: url("../img/big_red2.png");
	background-size: cover;
	background-repeat: no-repeat;
	min-height: auto;
	
}
#intro {
	width: 100%;
	padding: 10% 4% 20% 4%; 
	margin: 0 auto;
	color: white;
	font-size: 1em;
}
#second {
	height: 75%;
}
#schedule {
	padding: 2em;
	height: auto;
	width: 50%;
	float: left;
	font-size: 1em;
}
/* for 900px or less */
@media screen and (max-width: 900px) {
#main {
	background-image: url("../img/logo.png");
	background-color: black;
	background-size: contain;
	background-position: center;
	height: 100vh;
}
#indexnav ul li {
	float: none;
}
#subnav {
	margin-top: 25px;
}
nav ul li a {
	padding: .25em .5em;
        font-size: 1em;
}
nav li:hover ul {
	width: 275px;
}
#header {
	overflow: hidden;
}
#header img {
	width: 60%;
}
#indexnav, #subnav {
	float: left;
	margin: 0;
	
}
#first {
	background-image: none;
	height: auto;
}
#intro {
	color: black;
	height: auto;
	margin: 0;
	padding: 1em 2em 0 3em;
}
#second {
	min-height: auto;
}
#schedule {
	height: auto;
	width: 100%;
	/*float: none;*/
	margin: 0;
	padding: 2em;
}
#map {
	display: none;
}
#vine {
	display: none;
}
#album h2 {
	font-size: 1em;
}
#news {
	display: none;
}
#links {
	width: 300px;
	height: auto;
	border: none;
	padding-left: 3em;
}
#contact_wrap {
	background-image: none;
	
}
#contact {
	width: 80%;
	margin: -15% auto 20% auto; 
}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
#main
#second {
	height: auto;
}
}