*
{
	margin: 0;
	border: 0;
	padding: 0;
}

html
{
	font-size: 16px;
}

body
{
	font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
	font-family: 'Raleway',Arial,Helvetica,sans-serif;
}

a:hover
{
	color: #E47911;
}

#description p
{
	font-size: 0.75rem;
}

#descriptionUl li
{
	list-style: none;
}

#descriptionUl li ul
{
	display: none;
}

#descriptionUl li:hover ul
{
	display: block;
	color: black;
}


#descriptionHeader
{
	color: #E47911;
}

.smallContents ul li
{
	display: block;
	width: 100%;
}



/*survey ul li*/
#survey ol li
{
	display: list-item;
	list-style-type: none;
	/*list-style-type: decimal;*/
	clear: both;
}

hr
{
	width: 100%;
	border: 1px solid gray;
	text-align: center;
	margin-top: 3%;
	margin-bottom: 3%;
}

.page
{
	margin-right: auto;
	margin-left: auto;
	margin-top: 4%;
	width: 95%;
	height: 100%;
	max-width: 1280px;
	max-height: 600px;
}

#header
{
	width: 100%;
	font-size: 4rem;
/*	font-family: ITC Avant Garde Gothic;*/
	text-align: center;
	text-shadow: 2px 2px 2px #888888;
/*	background-color: yellow;
*/
}

#topContent
{
	margin-top: 5%;
	margin-bottom: 3%;
	display: block;
	background-size: auto 100%;
	background-repeat: no-repeat;
	box-shadow: 10px 10px 5px #888888;
}

#topContentText
{
	width: 50%;
	float: right;
}

#topContentText>div
{
	font-size: 2rem;
	text-shadow: 2px 2px 2px #888888;
	margin-bottom: 3%
}

@media (max-height: 450px)
{
	#topContentText>div
{
	font-size: 1.2rem;
	margin-bottom: 1.5%
}
}

#topContentText>a
{
	display: block;
	font-size: 1rem;
	text-decoration: none;
	width: 7rem;
	height: 1rem;
	color: black;
	background-color: silver;
	text-align: center;
}

#topContentText>a:hover
{
	color: #E47911;
}


#description
{
	margin-top: 1%;
}

.hrTop
{
	width: 100%;
	border-bottom:#333 solid 1px;
	margin-top: 1%;
}

.hrBottom
{
	width: 100%;
	border-top:#777 solid 1px;
	margin-bottom: 1%;
}

#clear
{
	clear: both;
	width: 100%;
}

#facebookLogo
{
	display: inline-block;
	width: 36px;
	height: 36px;
	background-image: url('../Resources/facebook.png');
}

#twitterLogo
{
	display: inline-block;
	width: 36px;
	height: 36px;
	background-image: url('../Resources/twitter.png');
}

#facebookLogo:hover
{
	background-image: url('../Resources/facebook_hover.png');
}

#twitterLogo:hover
{
	background-image: url('../Resources/twitter_hover.png');
}

@media (max-width: 400px)
{
	#header
	{
		font-size: 2rem;
	}

	#topContent
	{
		/*width: 88%;*/
		/*height: 33.6395%;*/
		min-height: 150px;
		max-height: 180px;
		padding-top: 5%;
		margin-top: 3%;
		margin-bottom: 3%;
		margin-left: 5%;
		margin-right: 5%;
		background-image: url('../Resources/topContentBackgroundSmall.jpg');
		box-shadow: 5px 5px 2px #888888;
	}

	#topContentText
	{
		width: 100%;
		padding-top: 10%;
	}

	#topContentText>div
	{
		font-size: 1.2rem;
		text-align: center;
	}

	#topContentText>a
	{
		font-size: 0.75rem;
		width: 6rem;
		height: 0.75rem;
		margin-right: auto;
		margin-left: auto;
	}

	#description
	{
		width: 88%;
		margin: auto;
		margin-top: 4%;
	}

	.smallContents
	{
		width:100%;
	}

	.smallBox
	{
		padding-top: 5%;
		width: 100%;
		margin-bottom: 6%;
	}

	.smallBox div
	{

		font-size: 0.7rem;
		text-align: center;
	}

	.smallBox div:first-child
	{
		margin-top: 3%;
		font-size: 1.2rem;
		text-decoration: underline;
	}

	.divider
	{
		width: 90%;
		height: 2px;
		background-color: gray;
		margin-right: auto;
		margin-left: auto;
		margin-top: 10px;
		/*margin-bottom: 10px;*/
	}

	.mediumContents
	{
		margin-top: 5%;
	}



	#surveyContainer
	{
		margin-top: 3%;
	}

	#survey
	{
		width: 95%;
		position: relative;
		padding-bottom: 70%;
		top: -70%;
		margin-bottom: -70%;
	}

	#surveyInner
	{
		padding-left: 0.5rem;
		background-color: white;
		padding-bottom: 2%;
	}

	#surveyInner *
	{
		color : black;
		font-size: 0.7rem;
		text-align: center;
	}

	#surveyInner div:first-child
	{
		font-size: 1.2rem;
		text-decoration: underline;
		margin-bottom: 2%;
	}


	#surveyInner div:last-child
	{
		margin-bottom: 2%;
	}

	#surveyInner input[type="submit"]
	{
		border: 2px solid gray;
		border-radius: 0.8rem;
		color: white;
		background-color: gray;
		margin-top: 1rem;
	}

	.info
	{
		font-size: 0.8rem;
		text-align: center;
	}
}

@media (min-width: 401px) and (max-width: 750px)
{
	#header
	{
		font-size: 3rem;
		text-align: center;
	}

	#topContent
	{
		/*width: 88vw;*/

		height: 33.6395vw;
		height: 33.6395%;
		/*width: 95vw;*/
		/*height: 36.3154vw;*/
		/*min-height: 180px;*/
		max-height: 230px;
		padding-top: 5%;
		margin-top: 3%;
		margin-bottom: 3%;
		background-image: url('../Resources/topContentBackgroundLarge.jpg');
	}

	#topContentText>div
	{
		font-size: 1.5rem;
		
	}
	
		#topContentText>a
	{
		font-size: 1rem;
		
	}
	
	.smallContents
	{
		width:100%;
	}

	.divider
	{
		width: 80%;
		height: 2px;
		background-color: gray;
		margin-right: auto;
		margin-left: auto;
		margin-top: 10px;
		/*margin-bottom: 10px;*/
	}

	.smallContents ul li
	{
		display: inline-block;
		float: left;
		width: 49.5%;
		margin-bottom: 2%;
	}

	.smallBox
	{
		padding-top: 5%;
		width: 100%;
	}

	.smallBox div
	{
		margin-top: 4px;
		font-size: 0.75rem;
		text-align: center;
	}

	.smallBox div:first-child
	{
		font-size: 1.2rem;
	}


	#survey ol li
	{
		display: list-item;
		list-style-type: none;
		/*list-style-type: decimal;*/
		clear: both;
	}
	#surveyContainer
	{
		margin-top: 3%;
	}

	#survey
	{
		margin-top:5%;
		width: 49.8%;
		text-align: center;
	}

	#surveyInner
	{
		margin-top:5%;
		background-color: white;
		margin-left: 3%;
	}

	#surveyInner *
	{
		padding-left: 0.5rem;
		color : black;
		font-size: 0.75rem;
	}

	#surveyInner div:first-child
	{
		font-size: 1.2rem;
		text-decoration: underline;
		margin-bottom: 2%;
	}

	#surveyInner div:nth-child(2)
	{
		font-size: 0.75rem;
		margin-bottom: 3%;
	}

	#surveyInner div:last-child
	{
		margin-bottom: 2%;
	}

	#surveyInner input[type="submit"]
	{
		border: 2px solid gray;
		border-radius: 0.8rem;
		color: white;
		background-color: gray;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.info
	{
		font-size: 0.8rem;
		text-align: center;
	}
}

@media (min-width: 751px)
{
	#header
	{
		width: 100%;
		font-size: 3rem;
		text-align: center;
	}

	#topContent
	{
		/*width: 95vw;*/
		height: 36.3154vw;
		height: 36.3154%;
		/*min-height: 230px;*/
		max-height: 300px;
		padding-top: 5%;
		margin-top: 3%;
		margin-bottom: 3%;
		margin-left: auto;
		margin-right: auto;
		background-image: url('../Resources/topContentBackgroundLarge.jpg');
	}

	#description p
	{
		font-size: 0.75rem;
	}

	#descriptionHeader
	{
		color: #E47911;
	}

	#descriptionUl li ul
	{
		display: block;
		color: black;
	}

	.smallContents
	{
		margin: auto;
		margin-bottom: 3%;
		width:100%;
	}

	.divider
	{
		/*display: none;*/
		width: 60%;
		height: 2px;
		background-color: gray;
		margin-right: auto;
		margin-left: auto;
		margin-top: 10px;
		/*margin-bottom: 10px;*/
	}

	.smallContents ul li
	{
		display: inline;
		float: left;
		width: 33%;
		vertical-align: top;
		margin-top: 3%;
		margin-bottom: 2%;
	}

	/*survey ul li*/
	#survey ol li
	{
		display: list-item;
		list-style-type: none;
		/*list-style-type: decimal;*/
		clear: both;
	}

	.smallBox
	{
		width: 100%;
	}

	.smallBox div
	{
		font-size: 0.8rem;
		text-align: center;
	}

	.smallBox div:first-child
	{
		font-size: 1.2rem;
		text-decoration: underline;
	}

	.mediumContents
	{
		width: 98%;
		margin-top:3%;
	}

	.video
	{
		width: 58%;
		float: left;
		position: relative;
		padding-bottom: 12rem;
		margin-left: 5%;
		margin-right: 3%;
		margin-top: 3%;
		/*height: 50;*/
	}

	.video iframe
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: teal;
	}

	#surveyContainer
	{
		margin-top:3%;
		margin-left: 30%;
	}
	
	#survey
	{
		width: 50%;
		padding-bottom: 20%;
		float: left;
		margin-left: 2%;
		margin-top: 3%;
		position: relative;
	}

	#surveyInner
	{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0%;
		left:0%;
		padding-left: 1rem;

		background-color: white;
	}

	#surveyInner *
	{
		color : black;
		font-size: 0.9rem;
		text-align: center;
	}

	#surveyInner div:first-child
	{
		font-size: 1.2rem;
		text-decoration: underline;
		
		margin-bottom: 2%;
	}

	#surveyInner div:nth-child(2)
	{
		font-size: 0.9rem;
		margin-bottom: 3%;
	}

	#surveyInner div:last-child
	{
		margin-bottom: 2%;
	}

	#surveyInner input[type="submit"]
	{
		border: 2px solid gray;
		border-radius: .8rem;
		color: white;
		background-color: gray;
		margin-top: 1rem;
	}

	.info
	{
		font-size: 0.8rem;
		text-align: center;
	}

	.notInLarge
	{
		display: none;
	}
}