/* Header/Footer */
.container.header_stories { background-color: #111; }
#header,
#footer { background-color: transparent; }


/* Universal */
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;animation-duration:1s;}
@-webkit-keyframes fadeOut {
	0% {opacity: 1; background: rgba(0,0,0,0.9);}
	2% {opacity: 0.7;}
	4% {opacity: 1;}
	8% {opacity: 0.8;}
	10% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut {
	0% {opacity: 1; background: rgba(0,0,0,0.9);}
	2% {opacity: 0.7;}
	4% {opacity: 1;}
	8% {opacity: 0.8;}
	10% {opacity: 1;}
	100% {opacity: 0;}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}
@-webkit-keyframes alternate {
	0% {opacity: 0;}
	25% {opacity: 1;}
	50% {opacity: 0.3;}
	75% {opacity: 1;}
}
@keyframes alternate {
	0% {opacity: 0;}
	25% {opacity: 1;}
	50% {opacity: 0.3;}
	75% {opacity: 1;}
}

body { background-color: #30333b; }
#body_content { width: 0; height: 0; margin: 0; display: none; }

#cover {
	background-position: center top;
	background-repeat: no-repeat;
	height: auto;
	position: relative;
	top: -50px;
	width: 100%;
}
#cover > .container > .row > .span12 { position: relative; }
#cover a {
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
}
#cover h1 {
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 52px;
	line-height: 52px;
	font-weight: normal;
	color: #ffcc00;
	text-shadow: 3px 3px 3px rgba(0,0,0,0.6);
	width: 100%;
	text-align: center;
	position: relative;
	top: 124px;
	z-index: 4;
}
#cover .subtitle {
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	color: #fff;
	width: 100%;
	display: block;
	text-align: center;
	position: relative;
	top: 124px;
	padding-bottom: 74%;
	z-index: 3;
}
#cover h1,
#cover .subtitle {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-delay: 2.5s;
	animation-delay: 2.5s;
}
#fadein {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	z-index: 5;
}
#windmill-alt {
	display: block;
	opacity: 0;
	width: 126px;
	height: 110px;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	top: 52px;
	left: 254px;
	-webkit-animation-name: alternate;
	animation-name: alternate;
	-webkit-animation-timing-function: steps(3);
	animation-timing-function: steps(3);
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	z-index: 2;
}


/* Responsive */
@media (max-width: 979px) {
	#cover .subtitle { padding-bottom: 90%; }
	#windmill-alt { left: 146px; }
}
@media (max-width: 767px) {
	#cover, 
	#fadein {
		margin-left: -20px;
	    padding-left: 20px;
	    padding-right: 20px;
	}
	#cover {
		background-size: 166% auto;
		overflow: hidden;
	}
	#cover .subtitle { padding-bottom: 128%; }
	#windmill-alt { display: none; }
}
@media (max-width: 600px) {
	#cover h1 { font-size: 40px; line-height: 40px; }
	#cover .subtitle { padding-bottom: 124%; }
}
@media (max-width: 480px) {
	#cover h1,
	#cover .subtitle { top: 80px; }
	#cover h1 { font-size: 30px; line-height: 30px; }
	#cover .subtitle { padding-bottom: 118%; }
}
@media (max-width: 320px) {
	#cover .subtitle { padding-bottom: 109%; }
}