/* Typefaces */
@import url(http://fonts.googleapis.com/css?family=Didact+Gothic);

html {
	color: #fff;
	font: 100% 'Helvetica Neue',Arial,'Liberation Sans',sans-serif;
	font-weight:100;
	margin: 0; padding:0;
	width:100%;
}

a img {
	border: none;
}

body {
	background-color: #006eba;
	background-image: url('../img/blueTop.png');
	margin: 0; padding: 0;
	width: 100%; height: 100%;
}

section {
	background-image: url('../img/noiseTexture.png');
	box-shadow:0px -20px 40px rgba(0, 0, 0, 0.5);
	display: block;	
	margin: 0; padding: 0;
	overflow: hidden;
}

ul {
	list-style: none;
}

ul li {
	font-size: 2em;
	line-height: 1.5em;
	text-indent: -1em;
	text-shadow: 0px -1px 0px #374683;
}

h1 span {
	font-size: 0.3em;
	display: block;
	padding: 0;
	margin: 0;
	position: relative; left: 0.5em; bottom: 0.5em;
}


@media screen and (max-width: 400px) {

	section {
		position: absolute; top: 10%; left: 0;
		width: 100%; height: 90%;
	}

	
	h1 {
		color: #333;
		font-family: 'Didact Gothic', sans-serif;
		font-size: 3em;
		font-weight: 800;
		text-align: center;
		margin-top: 0.5em; padding-top: 0;
		text-shadow: 0px 1px 0px #e5e5ee;
		width: 100%;
		
	}

	ul li {
		text-align: center;
		position: relative; bottom: 0.5em;
		z-index: 998;
	}

	#line1 {
		background: rgba(0, 0, 0, 0.2);
		position: absolute; bottom: -140%; right: -100%;
		transform:rotate(-2deg);
		width: 200%; height: 170%;

	}

	#line2 {
		background: rgba(0, 0, 0, 0.2);
		position: absolute; bottom: -140%; right: -100%;
		transform:rotate(-4deg);
		width: 200%; height: 170%;
		z-index: 0;
	}

	#social {
		margin: 0 auto; padding: 0;
		width: 90%;
		position: fixed; bottom: 2%; left: 7.5%;
		z-index: 999;
	}

	

	#social img {
		opacity: 0.75;
		width: 30%;
		transition: all 0.10s linear;
	}

	#social img:active {
		width: 29%;
	}

}

@media screen and (min-width: 401px) and (max-width: 768px){

	section {
		position: absolute; top: 5%; left: 0;
		width: 100%; height: 95%;
	}
	
	h1 {
		color: #333;
		font-family: 'Didact Gothic', sans-serif;
		font-size: 3em;
		font-weight: 800;
		position: absolute; left: 5%; top: 10%;
		margin-top: 0.5em; padding-top: 0;
		text-shadow: 0px 1px 0px #e5e5ee;
		width: 100%;	
	}

	ul {
		text-align: right;
		position: absolute; right:5%; top: 7.5%;
		z-index: 998;
	}

	#line1 {
		background: rgba(0, 0, 0, 0.2);
		position: absolute; top: 5%; right: -60%;
		transform:rotate(-0deg);
		width: 100%; height: 170%;

	}

	#line2 {
		background: rgba(0, 0, 0, 0.2);
		position: absolute; top: 5%; right: -60%;
		transform:rotate(-2deg);
		width: 100%; height: 170%;
		z-index: 0;
	}

	#social {
		margin: 0 auto; padding: 0;
		position: absolute; bottom: 2%; left: 5%;
		z-index: 999;
	}

	#social img {
		opacity: 0.75;
		width: 48px;
		transition: all 0.10s linear;
	}

	

	

	#social img:active {
		width: 48px;
	}


}



@media screen and (min-width: 769px) {


	#title {
		position: relative; left:0; top: 8%;
		max-width: 900px;
	}
	
	section {
		position: absolute; top: 15%; left: 0;
		width: 100%; height: 85%;
	}
	
	h1 {
		color: #333;
		font-family: 'Didact Gothic', sans-serif;
		font-size: 4em;
		font-weight: 800;
		text-shadow: 0px 1px 0px #e5e5ee;
		position: absolute;	top: 25%; left: 20%;
	}

	ul {
		text-align: right;
		position: absolute; bottom: 10%; right: 5%;
	}

	#line1 {
		background: rgba(0, 0, 0, 0.2);
		position: absolute; bottom: -140%; right: -100%;
		transform:rotate(-20deg);
		width: 200%; height: 200%;
		z-index: 0;

	}

	#line2 {
		background: rgba(0, 0, 0, 0.2);
		position: absolute; bottom: -140%; right: -100%;
		transform:rotate(-22deg);
		width: 200%; height: 200%;
		z-index: 0;
	}

	#social {
		position: absolute; bottom: 2%; right: 5%;
		z-index: 999;
	}

	#social img {
		width: 32px;
		opacity: 0.65;
		transition: all 0.20s linear;
	}

	#social img:hover {
		opacity: 1.0;
		width: 40px;
	}

}