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

/* General */
p {
	font-family: "Helvetica Neue", sans-serif;
	color: black;
}

h2 {
	font-family: "Helvetica Neue", sans-serif;
	font-size: 1.5em;
}

.box {
	background: white;
/*	box-shadow: 0 0 25px rgba(0,0,0,0.3);
	border: 1px solid rgba(150,150,150,0.1);*/
	padding: 25px;
	margin-bottom: 20px;
}

.firstColumn {
	float: left;
}

.secondColumn {
	float: right;
}
/* General text-styling */
.introduction {
	font-weight: bold;
	margin-bottom: 10px;
}
/* First page, logo etc */

#navigation {
	height: 80px;
	line-height: 6em;
	position: fixed;
	width: 100%;
	z-index: 9000;
	top: 0;
}
	#navigation ul li {
		display: inline-block;
		color: white;
		font-size: 1.25em;
		font-weight: 300;
		margin-right: 25px;
	}

		#navigation ul li a {
			color: white;
			text-decoration: none;
		}

		#navigation ul li a:hover {
			cursor: pointer;
			color: #a8a8a8;
			text-decoration: underline;
		}

#logo {
	color: black;
	background-color: white;
	opacity: 0.95;
	border-radius: 360px;
	margin: 0 auto;
	height: 358px;
	width: 358px;
}

	#logo h1 {
		font-size: 7em;
	}

	#logo h2 {
		font-size: 2.5em;
		font-weight: lighter;
		line-height: 0em;
	}

.firstParenthesis {
	float: right;
	font-size: 3.5em;
	font-weight: bold;
}

.secondParenthesis {
	float: left;
	font-size: 3.5em;
	font-weight: bold;
	line-height: 2.5em;
}

#logoText {
	margin: 0 auto;
	width: 200px;
	padding-top: 50px;
}

#slogan {
	width: 500px;
	margin: 0 auto;
}

	#slogan h2 {
		text-align: left;
		background-color: rgba(0,0,0,0.95);
		color: white;
		font-size: 2em;
		padding: 10px;
		font-weight: 100;
		letter-spacing: 2px;
		margin: 25px 0 15px 0;
	}

	#slogan p {
		text-align: right;
		background-color: rgba(255,255,255,0.95);
		color: black;
		font-size: 1.5em;
		font-weight: 300;
		float: right;
		padding: 10px;
	}

.span4 {
	float: left;
	width: 286px;
	margin: 0 51px 0 0;
}

.span8 {
	float: left;
	width: 600px;
	margin: 0 0 0 20px;
}

.span12 {
	width: 90%;
	margin: 0 5% 0 5%;
}

.row {
	margin-bottom: 3%;
}

.pageTitle {
	height: 100px;
	background-color: black;
	line-height: 7.5em;
	text-align: center;
	box-shadow: 0 0 50px 0 rgba(0,0,0,0.8);
	border-bottom: 1px solid black;
}

	.pageTitle h1 {
		font-family: "Helvetica Neue", sans-serif;
		font-size: 2em;
		font-weight: bold;
		color: white;
	}

.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);
}

/* Positioning classes */

.center {
	text-align: center;
}
.last {
	margin-right: 0;
}

.onlyone {
	margin: 0 auto;
	clear: both;
	float: none;
}

#first { background: url(../images/frontDoorbw.jpg) 50% 0 no-repeat fixed; background-size: cover;}
#second { background: white 50% 0 no-repeat fixed; background-size: cover;}
#third { background: url(../images/grupposbw.jpg) 50% 0 no-repeat fixed;}
#fourth { background: white 50% 0 no-repeat fixed; background-size: cover;}
#fifth { background: url(../images/end.jpg) 50% bottom no-repeat fixed; background-size: cover;}

/* Introduction */
#first article { width: 100%; top: 200px; position: absolute; text-align: center; }

/* Background Only */
#second {
	border-top: 1px solid black;
	height: 850px;
}
#second article {
	text-align: center;
	color: #000;
	margin: 80px auto 0px auto;
	padding: 10px 20px;
	line-height: 1.5em;
	width: 960px;
}
#second article h2 {
	font-size: 1.5em;
	padding: 10px 0 10px 0;
}

#aboutText {
	width: 600px;
}

.subslogan {
	font-family: 'Helvetica Neue', sans-serif;
	padding-top: 60px;
	font-size: 2em;
	line-height: 2em;
	font-weight: 100;
	letter-spacing: 2px;
	color: #a8a8a8;
}

.iconholder {
	padding: 30px;
	border: 5px solid black;
	border-radius: 60px;
	width: 50px;
	margin: 10px auto;
}

/* Photograph */
#third {
	height: 1500px;
}
#third article {
	color: black;
	padding: 10px 20px;
	margin: 20px auto 20px auto;
	color: #fff;
	top: 0;
	width: 960px;
}


#third article h2 {
	font-size: 2em;
	color: black;
	padding: 10px 0 10px 0;
}

#third h1 {
	font-size: 2em;
	font-weight: bold;
	color: white;
	background: black;
	font-family: 'Helvetica Neue', sans-serif;
	padding: 20px;
	width: 150px;
	text-align: center;
	margin: 50px auto;
}

.barista {
	padding: 10px;
	margin-bottom: 20px;
}

	.barista h3 {
		background: rgba(0,0,0,0.95);
		color: white;
		margin: 10px 0 10px 0;
		padding: 10px;
		font-size: 1.2em;
		font-weight: 100;
		line-height: 1.5em;
		letter-spacing: 1px;
		box-shadow: 0 0 25px rgba(0,0,0,0.3);
		border: 1px solid rgba(150,150,150,0.1);
	}

		.barista h3 span {
			font-weight: bold;
			letter-spacing: 2px;
		}

	.barista p {
		background: rgba(255,255,255,0.95);
		color: black;
		padding: 10px;
		box-shadow: 0 0 25px rgba(0,0,0,0.3);
		border: 1px solid rgba(150,150,150,0.1);
	}

.baristaphoto {
	width: 100px;
	height: 100px;
	border-radius: 100px;
	border: 5px solid white;
	margin-top: 10px;
	box-shadow: 0 0 25px rgba(0,0,0,0.3);
}

/* HTML5 Video */

#fourth {
	border-top: none;
	height: 1050px;
}

#fourth article {
	width: 960px;
	margin: 80px auto 0 auto;
}

.news {
	margin-bottom: 20px;
	height: 570px;
}

	.news h2 {
		margin-bottom: 20px;
		color: black;
	}

	.news img {
		width: 220px;
		border: 1px solid black;
		margin-bottom: 15px;
	}


/* Last page */

#fifth {
	height: 850px;
}

	#fifth article {
		width: 960px;
		margin: 80px auto 0 auto;
	}

		#fifth article h1 {
			margin-top: 50px;
		}

	#fifth h1 {
		font-size: 2em;
		font-weight: bold;
		color: white;
		background: rgba(0,0,0,0.9);
		font-family: 'Helvetica Neue', sans-serif;
		padding: 20px;
		text-align: center;
		z-index: 421;
	}

	#fifth h2 {
		font-size: 2em;
		background-color: rgba(255,255,255,0.9);
		box-shadow: 0 0 25px rgba(0,0,0,0.3);
		color: black;
		font-family: 'Helvetica Neue', sans-serif;
		padding: 20px;
		text-align: center;
		z-index: 421;
	}

	#fifth .photograph {
		background: url(../images/beansheart.png) transparent 50% 100px no-repeat fixed;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 300px;
		z-index: 420;
	}



.infoBox {
	box-shadow: 0 0 25px rgba(0,0,0,0.3);
	background: rgba(0,0,0,0.95);
	padding: 20px;
}

	.infoBox h3 {
		color: white;
		font-size: 2em;
		margin: 15px 0 10px 0;
		border-bottom: 1px solid white;

	}

	.infoBox h3:first-child {
		margin-top: 0px;
	}

	.infoBox p {
		color: white;
	}

	.infoBox i {
		color: white;
		text-decoration: none;
		-o-transition: color .2s linear;
		-webkit-transition: color .2s linear;
      	-moz-transition: color .2s linear;
	}

		.infoBox i:hover {
			color: #a1a1a1;
			cursor: pointer;
		}