/* Font downloaded from FontsForWeb.com */
@font-face {
	font-family: 'gothic';
	src: url('fonts/gothic.eot');
	src: local('gothic'), url('fonts/gothic.woff') format('woff'), url('fonts/gothic.ttf') format('truetype');
}

body{
	margin: 0;
}


/* Sections */
#section-1{
	background-color: #993939; 
}

#section-2{
	background-color: #1C787A;
}

#section-3{
	background-color: #EFA614;	
}

#section-4{
	background-color: #4C7215;
}

#section-5{
	background-color: #CC6D1F;
}

#credits{
	overflow: auto;
	background-color: #E8B374;
}

.titles img{
	padding-top: 2%;
	display: block;
	margin: auto;
}

.intro{
	font-family: gothic;
	width: 750px;
	margin: 1% auto;
	font-size: 12pt;
	color: white;
	text-align: justify;
}

.intro span{
	font-size: 11pt;
	font-weight: bold;
}


/* Intro Video */
#landing-page{
	background-color: black;
}

#landing-page video{
	max-height: auto;
	max-width: 100%;
}


/* Main Menu */
.main-menu{
	background-color: #E8B374;
	margin: auto;
	overflow: auto;
}

.main-menu .container{
	width: 960px;
	margin: auto;
}

#main-title{
	display: block;
	margin: 0 auto 6% auto;
}

.bottle-btn{
	width: 115px;
	height: 378px;
	margin: 1% 3.5% 7% 4%;	
}

.bottle-btn:hover{
	background-image: url('../img/menu/Botella_Sombra_1.png');
	background-size: 115px 378px;
}

#additional-btn{
	width: 80px;
	height: 80px;
	float: right;
	margin: -6% 4% 3.5% 0;
}


/* Fixed Menu */
.bot-menu{
	z-index: 1000;
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
}

.bot-menu img{
	margin: 5%;
	width: 25%;
}

.bot-menu img:hover{
	background-image: url('../img/menu/Botellita_sombra.png');	
	background-size: 100%;
}


/* First Section */
.info{
	padding-bottom: 2%;
	height: 100%;
}

.left-info-container{
	position: absolute;
	display: inline-block;
	margin-left: 5%;
	margin-right: 5%;
	width: 30%;
}

.right-info-container{
	position: absolute;
	display: inline-block;
	width: 30%;
}

.seed-click{
	margin-bottom: 2%;
	margin-left: 45%;
	display: inline-block;
	transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
}

#seed-1, #seed-2, #seed-3, #seed-4{
	width: 60%;
}

.seed-click img{
	display: block;
}

.info-box{
	float: left;
	width: 100%;
	padding: 2%;
	text-align: justify;
	color: white;
	font-family: gothic;
	font-size: 9pt;
	border-radius: .2em;
	margin: auto;
	display: block;
}

.info-box h3{
	margin: 1% 0;
	font-size: 12pt;
}

#info-agua{
	margin-bottom: 50%;
	background-color: #1C787A;
	display: none;
}

#info-cebada{
	margin-bottom: 30%;
	background-color: #CC6D1F;
	display: none;
}

#info-lupulo{
	margin-bottom: 50%;
	background-color: #4C7215;
	display: none;
}

#info-lupulo a{
	text-decoration: none;
	font-weight: bold;
	color: white;
}

#info-levadura{
	margin-bottom: 50%;
	background-color: #EFA614;
	display: none;
}


/* Second Section */ 
#section-2 .container{
	margin: auto;
	width: 1020px;
	padding: 2em 0 3em 0;
}


/* Third Section */
.fotorama-container{
	margin: 3% 0 0 0;
	padding: 0 0 4.5% 0;
}	


/* Fourth Section */
.color{
	padding-top: 2%;
	overflow: auto;
	width: 764px;
	margin: auto;
}

.color div{
	float: left;
	height: 450px;
}

.color img{
	width: 90%;
	height: auto;
}

#color-1{
	background-image: url('../img/copas/copa1.png');
	width: 132px;
}

#color-1 img{
	float: left;
	margin-top: 270px;
	margin-left: 40px;
}

#color-2{
	background-image: url('../img/copas/copa2.png');
	width: 108px;
}

#color-2 img{
	float: left;
	margin-top: 275px;
	margin-left: 10px;
}

#color-3{
	background-image: url('../img/copas/copa3.png');
	width: 109px;
}

#color-3 img{
	float: left;
	margin-top: 275px;
	margin-left: 28px;
}

#color-4{
	background-image: url('../img/copas/copa4.png');
	width: 113px;
}

#color-4 img{
	float: left;
	margin-top: 280px;
	margin-left: 10px;
}

#color-5{
	background-image: url('../img/copas/copa5.png');
	width: 115px;
}

#color-5 img{
	float: left;
	margin-top: 275px;
	margin-left: 42px;
}

#color-6{
	background-image: url('../img/copas/copa6.png');
	width: 187px;
}

#color-6 img{
	width: 80%;
	float: left;
	margin-top: 265px;
	margin-left: 30px;
}

.variety-links{
	height: 120px;
	margin: auto;
	padding: 2em;
	width: 620px;
}

.variety-links div{
	margin: 1em 0;
}

.additional-info{
	font-family: gothic;
	color: white;
	text-align: justify;
	height: 100px;
}

.additional-info span{
	font-weight: bold;
}


/*Fifth Section */
.hidden{
	display: none;
}

.img-container{
	text-align: center;
	height: 40em;
	padding: 2em 0 4em 0;
	display: block;
}

.img-container img{
	height: 95%;
}


/* Credits */
.group-photo{
	margin-top: 2%;
}

.profile{
	float: left;
	width: 47%;
	font-size: 11pt;
	text-align: justify;
	padding: .5em 1em;
}

.profile a{
	font-weight: bold;
	color: white;
	text-decoration: none;
}

.profile a:hover{
	text-decoration: underline;
}

.profile-pic{
	width: 20%;
	height: auto;
	float: left;
}

.info-cont{
	margin-right: 5%;
	width: 70%;
	font-family: gothic;
	float: right;
}

.info-cont img{
	width: 40%;
	display: block;
}

.left-group{
	float: left;
}

.right-group{
	float: right;
}

.facebook{
	float: right;
	margin: 8% 5% 0 0;
}