/**
 * Parallax Scrolling Tutorial
 * For Smashing Magazine
 * July 2011
 *  
 * Author: Richard Shepherd
 *		   www.richardshepherd.com
 * 		   @richardshepherd   
 */


article h2 {
	font-family: "Lobster Two";
	font-size: 60px;
	margin: 25px 0;
	line-height: 1em;
	color: #FF0066;
}

.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);}

#first {
	background-attachment: fixed;
	background-image: url(../gigantes/rosa-azul2.png);
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#second {
	background-attachment: fixed;
	background-image: url(../gigantes/alza.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#fourth {
	background-attachment: fixed;
	background-image: url(../gigantes/mar2.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#third {
	background-attachment: fixed;
	background-image: url(../gigantes/mirada.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#theend {
	background-attachment: fixed;
	background-image: url(../gigantes/rosa-azul2.png);
	background-repeat: no-repeat;
	background-position: 50% bottom;
}

/* Introduction */
#first .smashinglogo {
	min-height: 1000px;
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: 1920px;
	position: relative;
	margin: 0 auto;
}
#first article {
	width: 100%;
	top: 300px;
	position: absolute;
	text-align: center;
	left: -1px;
}
#first article p,
#first article a {
	color: #000;
}
#first article a { text-decoration: underline; }
#first article a:hover { color: #fff; }

/* Background Only */
#second { padding: 50px 0;}
#second article {
	color: #fff;
	width: 450px;
	margin-left: 70px;
	padding: 10px 20px;
	text-shadow: 0px -1px 0px rgba(255,255,153,0.5);
	line-height: 1.5em;
	box-shadow: 0 0 25px rgba(0,0,0,0.3);
	border: 1px solid rgba(150,150,150,0.1);
	background-color: #333;
	background-image: url(../gigantes/rosa-suave.jpg);
	background-repeat: repeat;
	font-family: "Times New Roman", Times, serif;
}
#second article p {
	margin-bottom: 25px;
	font-family: inherit;
	color: #609;
}
#second article a { color: #ff0;}

/* Photograph */
#third article {
	color: #fff;
	padding: 10px 20px;
	margin: 100px 0 0 60%;
	text-shadow: 0px -1px 0px rgba(255,204,255,0.5);
	line-height: 1.5em;
	color: #606;
	position: absolute;
	top: -2px;
	box-shadow: 0 0 25px rgba(0,0,0,0.3);
	border: 1px solid rgba(150,150,150,0.1);
	width: 604px;
	background-color: #333;
	background-image: url(../gigantes/rosa-suave2.jpg);
	background-repeat: repeat;
	left: -136px;
}
#third .photograph { background: url(../images/photo.png) transparent 40% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#third article p {
	margin-bottom: 25px;
	font-family: "Times New Roman", Times, serif;
	color: #606;
}

/* HTML5 Video */
#fourth article {  margin-left: 10%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; }
#fourth article p {
	margin: 50px 0;
	font-family: "Times New Roman", Times, serif;
	color: #37548E;
}
#fourth video { position: fixed; left: 50%; box-shadow: 0 0 25px rgba(0,0,0,0.7); z-index: 1;}

/* The End */
#theend .byebye {
	height: 1000px;
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: 1920px;
	position: relative;
	margin: 0 auto;
	color: #FFF;
}