/* 
Agencia Bread  
Sitio: http://bread.cl      
Autor: Isaac Espinoza  
*/

@font-face {
    font-family: MinionPro;
    src: url('fonts/MinionPro-Regular.woff'),url('fonts/MinionPro-Regular.woff2'),url('fonts/MinionPro-Regular.ttf'),url('fonts/MinionPro-Regular.eot');
}
@font-face {
    font-family: MinionProBold;
    src: url('fonts/MinionPro-Bold.woff'), url('fonts/MinionPro-Bold.woff2'), url('fonts/MinionPro-Bold.ttf'), url('fonts/MinionPro-Bold.eot');
}
@font-face {
    font-family: Bebas;
    src: url('fonts/BebasNeueRegular.woff'), url('fonts/BebasNeueRegular.woff2'), url('fonts/BebasNeueRegular.ttf'), url('fonts/BebasNeueRegular.eot');
}
@font-face {
    font-family: BebasBold;
    src: url('fonts/Bebas Neue Bold.woff'), url('fonts/Bebas Neue Bold.woff2'), url('fonts/Bebas Neue Bold.ttf'), url('fonts/Bebas Neue Bold.eot');
}

.sticky{
display: block;
position: fixed;
right: 0;
top: 80%;
z-index: 9998;
width: 112px;
height: 115px;
cursor: pointer;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}

.sticky2{
	background-color: #828280;
	color: white;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	border-radius: 50px;
	border-width: 0px;
	display: block;
	position: fixed;
	right: 20px;
	top: 90%;
	z-index: 9998;
	width: 100px;
	height: 60px;
	cursor: pointer;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	}

.sticky2:hover {
		background-color: #828280;
		text-shadow: 2px 2px 2px #000000;
		border-width: 2px;
		border-color: #ffffff;
	}


html, body{
	width:100%;
	height:100%; 
	font-family:Bebas;
	color:#fff;
	background:#1d1d1b;
}		
html, body, div, .seccion, p, h1, h2, h3, h4, h5{ 
	padding:0;
	margin:0;
}

/*
body{
	overflow-x: hidden;
}
*/

p{
	padding:0;
	margin:0; 
	font-family:MinionPro;
}
	
.clearboth{ 
	float:none; 
	clear:both; 
	width:100%; 
}

/* Header */
.header{
	width:100%;
	max-width:1200px;
	height:70px;
	position:fixed;
	top:0;
	left:50%;
	margin-left:-600px;
	z-index:9999999;
	background:#828280; 
}
.header .contenido{
	height:100%; 
	z-index:9999999;
}

.logo, .boton{
	width:auto;  
	cursor:pointer; 
}
.logo{ 
	float:left; 
	height:auto; 
	padding-top:18px;
	margin-left:40px;
}
.boton{ 
	margin-left:20px;
	height:30px; 
	padding-top:20px;
	float:right; 
	text-transform:uppercase; 
}
.boton.activo{
	text-decoration:ultra-expanded;
}
.boton.last{ 
	margin-right:40px;
}
.boton, .boton a{ 
	font-size:20px;
	line-height:22px;
	letter-spacing: 3px;
	text-decoration:none; 
	color:#FFF; 
}.boton.idioma{	height:44px;	padding-top:15px;}.boton.idioma img{	margin-left:15px;}
.hamburguesa{
	width:70px;
	height:70px;
	background:#828280;
	float:right; 
	background-image:url('img/hamburguesa.jpg'); 
}
.botones_mobile, .hamburguesa{
	display:none;
}

.contenido{
	width:100%;
	max-width:1200px;
	height:100%;
	margin:0 auto; 
}



/* Secciones */ 
.seccion{
	width:100%;
	height:100%;
	background:#222222;
	transition: all 1s ease-in-out;	
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	position:relative; 
} 

#seccion_1{ z-index:1; } 
#seccion_2{	z-index:2; } 
#seccion_3{	z-index:3; } 
#seccion_4{	z-index:4; } 




/* Seccion 1 */
.tapa_texto{
	width:50px;
	height:100%;
	position:absolute;
	top:0;
	left:0px;
	background:#222222;
	z-index:100;
}
#contenido_1{
	background:#828280; 
} 

#sec1_caja_texto{
	width:50%;
	height:100%;
	position:relative; 
	top:25%;
	left:-10%;
	margin-left:-620px;
	z-index:20;
	text-align:right; 
	opacity:0.7;
    filter: alpha(opacity=70);
	transition: all 1.2s ease-in-out;	
	-moz-transition: all 1.2s ease-in-out;
	-o-transition: all 1.2s ease-in-out;
	-webkit-transition: all 1.2s ease-in-out;
}

#sec1_caja_texto.activo{
	left:55%;
}

.sec1_titulo{ 
	font-size:96px; 
	line-height:96px;
	font-family:BebasBold; 
}

.sec1_titulo_small{ 
	font-size:60px; 
	line-height:60px;
	font-family:BebasBold; 
}
.sec1_titulo_small2{ 
	font-size:50px; 
	line-height:50px;
	font-family:BebasBold; 
}

.sec1_texto{
	font-size:24px; 
	font-family:MinionPro;  
}



.img{
	width:32%;
	height:100%;
	position:relative; 
	top:-80%;
	left:50%; 
	z-index:15;
	background-image:url('img/botella_header.png');
	background-position:50% 0%;
	background-size:auto 100%;
	-webkit-background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
    background-repeat: no-repeat;
	
	transition: all 1s ease;	
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}



/* Seccion 2 */
.cuadro{
	float:left;
	width:50%;
	height:100%;
	background-position:50% 50%;  
}

#sec2_cuadro1{ 
	background-image:url('img/sec2_01.jpg');
}

#sec2_cuadro2{ 
	background-image:url('img/sec2_02.jpg');
} 

#sec_logo_familia{
	width:250px;
	height:250px;
	position:absolute; 
	top:0;
	margin-top:-100px;
	left:50%; 
	z-index:8;
	margin-left:-450px;
	background-image:url('img/logo_familia.png');
	background-position:50% 0%; 
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
    background-repeat: no-repeat;
	
	transition: all 0.8s ease;	
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
}

.botella{ 
	width:45%;
	height:70%;
	position:relative;
	z-index:20; 
	top:15%; 
	margin:0 auto; 
	background-size:auto 100%;
	-webkit-background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	background-position:50% 50%; 
    background-repeat: no-repeat;
	
	transition: all 0.6s ease-in-out;	
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;
} 

#botella_1{ 
	left:-30%; 
	background-image:url('img/sec2_03.png');
}

#botella_2{ 
	left:30%; 
	background-image:url('img/sec2_04.png');
}

#botella_1.activo, #botella_2.activo{
	left:1%; 
}




/* Seccion 3 */
#sec3_cuadro1{ 
	background-image:url('img/sec3_01.jpg');
}

#sec3_cuadro2{ 
	background-image:url('img/sec3_02.jpg');
}

#botella_3{ 
	top:55%;  
	background-image:url('img/sec3_03.png');
}

#botella_4{ 
	top:55%;  
	background-image:url('img/sec3_04.png');
}

#botella_3.activo, #botella_4.activo{
	top:15%;  
}

.hover{
	width:100%;
	height:100%;
	opacity:0;
    filter: alpha(opacity=0);
	background:green; 
	position:relative;
	z-index:10; 
	top:-70%; 
	transition: all 0.8s linear;	
	-moz-transition: all 0.8s linear;
	-o-transition: all 0.8s linear;
	-webkit-transition: all 0.8s linear;
}
.sub_hover{
	width:100%;
	height:100%;
	opacity:0;
    filter: alpha(opacity=0);
	background:#111; 
	position:relative;
	z-index:30; 
	top:-170%; 
	transition: all 0.4s linear;	
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-webkit-transition: all 0.4s linear;
}

.capa_hover_texto{
	width:100%;
	height:100%;
	opacity:0;
    filter: alpha(opacity=0);
	position:relative;
	z-index:30; 
	top:-270%; 
	transition: all 0.8s ease;	
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
}

.capa_hover_boton{
	width:96%;
	padding-right:4%;
	height:96%;
	padding-top:4%;
	opacity:1;
    filter: alpha(opacity=100);
	position:relative;
	z-index:99999999999; 
	top:-292%; 
	transition: all 0.3s ease;	
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	text-align:right; 
	display:none;
}



.capa_hover_texto h3, .capa_hover_texto h4{ 
	padding:0;
	margin:0;
	padding-bottom:2px;
}
.capa_hover_texto h3{ 
	font-size:52px;
	line-height:52px;
	font-family:BebasBold;  
	letter-spacing: 4px;
}
.capa_hover_texto h4{
	font-size:28px; 
	line-height:28px;
	font-family:MinionProBold;  
	font-weight:normal;   
	letter-spacing: 1px;
}
.texto_hover{
	width:60%; 
	padding-top:25%;
	margin:0 auto; 
	opacity:1;
    filter: alpha(opacity=100);
}
.texto_hover.right{
	text-align:right; 
}
.barra_texto{
	background:url('img/barra_texto.png') 0% 0% repeat-x; 
	width:80%; 
	height:15px;
}
.capa_hover_texto.right .barra_texto{
	margin-left:20%;
}



#hover_botella_1{
	background:#91cdf7; 
}
#hover_botella_2{
	background:#e6cacd; 
}
#hover_botella_3{
	background:#4b4c4d; 
}
#hover_botella_4{
	background:#fff; 
}
#hover_botella_2 .texto_hover{
	text-align:right;
}





/* Seccion 4 */
#contenido_4{ 
	background-position:50% 50%; 
	background-image:url('img/contenido_4.jpg');
}

#sec4_caja_texto{
	width:42%; 
	height:auto; 
	position:relative;  
	top:26%; 
	left:30%; 
	z-index:20; 
	text-align:right; 
	transition: all 1.2s ease-in-out;	
	-moz-transition: all 1.2s ease-in-out;
	-o-transition: all 1.2s ease-in-out;
	-webkit-transition: all 1.2s ease-in-out; 
}

#sec4_caja_texto.activo{
	left:9%; 
}

#sec4_titulo{
	text-transform:uppercase; 
	font-family:BebasBold;  
	font-size:90px;
	letter-spacing:8px;
}

#sec4_texto{ 
	font-family:MinionPro;
}

#sec4_logo_aniversario{
	width:450px;
	height:545px;
	position:absolute; 
	margin-left:150px; 
	left:50%;  
	z-index:9999;
	background-image:url('img/logo_aniversario.png');
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
    background-repeat: no-repeat;
	
	transition: all 1.3s ease-in-out;	
	-moz-transition: all 1.3s ease-in-out;
	-o-transition: all 1.3s ease-in-out;
	-webkit-transition: all 1.3s ease-in-out;
}


#sec4_barra{
	width:2px;
	height:800px;
	position:absolute; 
	left:52%;  
	z-index:99;
	background-image:url('img/barra.jpg');
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
    background-repeat: no-repeat;
	
	transition: all 1.3s ease-in-out;	
	-moz-transition: all 1.3s ease-in-out;
	-o-transition: all 1.3s ease-in-out;
	-webkit-transition: all 1.3s ease-in-out;
}





/* Seccion 5 */
#contenido_5{ 
	background-position:50% 50%; 
	background-image:url('img/contenido_5.jpg');
}

#sec5_caja_texto{
	width:40%; 
	height:auto; 
	position:relative;  
	top:25%; 
	left:5%; 
	z-index:20; 
	text-align:left;  
	transition: all 1.2s ease-in-out;	
	-moz-transition: all 1.2s ease-in-out;
	-o-transition: all 1.2s ease-in-out;
	-webkit-transition: all 1.2s ease-in-out; 
}

#sec5_caja_texto.activo{
	left:54%; 
}

#sec5_titulo{
	text-transform:uppercase; 
	font-family:BebasBold;  
	font-size:90px;
	letter-spacing:8px;
}

#sec5_subtitulo{
	text-transform:uppercase; 
	font-family:BebasBold;  
	font-size:34px;
	letter-spacing:4px;
}

#sec5_texto{ 
	font-family:MinionPro;
}

	
	
/* Footer */ 
.footer{
	width:100%;
	height:100px;
	background:#1d1d1b;
	transition: all 1s ease-in-out;	
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	position:relative; 
}
.footer .boton, .footer .boton a{
	margin-left:12px;
	padding-top:45px;
	text-transform:uppercase; 
	font-size:15px;
	letter-spacing: 2px;
	text-decoration:none; 
	color:#FFF;
}

.footer .logo{
	padding-top:35px;
}


/* -----------------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------*/
.img, .cuadro, #contenido_4, #contenido_5{
    background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
/* -----------------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------*/


/* Mayor a 800 */
@media only screen and (min-width: 800px) {

	.cuadro:hover .hover, .cuadro:hover .capa_hover_texto{
		opacity:1;
		filter: alpha(opacity=100);
	}
	.cuadro:hover .sub_hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

}

/* Menor a 1200 */
@media only screen and (max-width: 1200px) { 

	/* Header */
	.header{
		width:100%;
		max-width:100%;
		top:0%;
		left:0%;
		margin-left:0%;
	}
	
	.logo{ 
		margin-left:20px;
	}
	/* Header */
	.boton{ 
		padding-top:25px;
		margin-left:10px;
		margin-right:10px;
		float:right; 
	}
	.boton, .boton a{
		font-size:16px;
		line-height:18px;
		letter-spacing: 2px;
		color:#FFF;
	}
	

	.tapa_texto, #sec4_barra{ 
		display:none; 
	}
}


/* De 800 a 1200 */
@media only screen and (max-width: 1200px) and (min-width: 800px)  {
	
	.seccion{
		max-height:100%;
	}
	
	/* Seccion 1 */
	#botella_1{ 
		left:-15%; 
	}

	#botella_2{ 
		left:15%; 
	}

	#sec1_caja_texto{
		width:50%;
		height:100%;
		position:relative; 
		top:35%;
		left:-120%;
		margin-left:0; 
	}
	#sec1_caja_texto.activo{
		left:1%;
	}

	.sec1_titulo{ 
		font-size:62px; 
		line-height:62px;
	}

	.sec1_titulo_small{ 
		font-size:56px; 
		line-height:56px;
	}

	.sec1_texto{
		font-size:22px;   
	}

	
	/* Seccion 2 */
	#sec_logo_familia{
		width:150px;
		height:150px;
		position:absolute; 
		top:0;
		margin-top:-100px;
		left:50%; 
		margin-left:-250px;
	}

	
	/* Seccion 3 */
	.botella{ 
		width:45%;
		height:54%;
		top:23%; 
	} 
	.hover{
		top:-54%; 
	}
	.sub_hover{
		top:-154%; 
	}

	.capa_hover_texto{ 
		top:-254%; 
	}
	
	.capa_hover_texto h3{
		font-size:40px;
	}
	.capa_hover_texto h4{
		font-size:24px; 
	}
	.texto_hover{
		width:75%; 
	}
	
	
	/* Seccion 4 */
	#sec4_caja_texto{
		width:50%; 
		height:auto; 
		top:25%; 
		left:20%; 
		text-align:right; 
	}

	#sec4_logo_aniversario{
		width:264px;
		height:320px;
		margin-left:-264px; 
		left:100%;  
	}

	
	/* Seccion 5 */
	#sec5_caja_texto{
		width:60%; 
		height:auto;  
		top:20%; 
		left:1%; 
	}

	#sec5_caja_texto.activo{
		left:20%; 
	}

	#sec5_titulo{
		font-size:70px;
	}

	#sec5_subtitulo{  
		font-size:24px;
	}

}




/* Menor a 800 */
@media only screen and (max-width: 800px) {
	
	.boton_desktop{
		display:none;
	}
	.botones_mobile, .btn_menu_mobile, .hamburguesa{
		display:block;
	}
	.botones_mobile, .btn_menu_mobile{
		padding:0;
		margin:0;
		transition: all 0.6s ease-in-out;	
		-moz-transition: all 0.6s ease-in-out;
		-o-transition: all 0.6s ease-in-out;
		-webkit-transition: all 0.6s ease-in-out;
	}
	.botones_mobile{ 
		position:fixed;
		z-index:99;
		top:70px;
		left:0;
		width:100%;
	}
	.botones_mobile.sube{
		top:-220px;
	}
	.btn_menu_mobile{ 
		padding:15px 10px;
		border-bottom:1px solid #333; 
		background:#999;
		font-size:18px;
		line-height:18px;
	}
	.btn_menu_mobile a{
		text-decoration:none;
		color:#fff; 
	}
	
	
	
	
	.botonera_footer{ 
		float:right; 
		width:33%;
	}
	
	.footer .boton{ 
		padding:0; 
		width:100%;
		margin-left:0px;
		height:14px; 
		margin-top:14px;
		text-align:right;
	}

	.footer .boton, .footer .boton a{
		font-size:14px;
		line-height:14px;
		letter-spacing: 2px;
	}
	
	
	.footer .boton a{ 
		padding:0;  
	}
	.footer .boton.last{ 
		margin-right:10px;
	}
	
	/* Seccion 1 */
	.img{
		width:40%;
		height:60%;
		top:-80%;
		left:60%; 
	}

	#sec1_caja_texto{
		width:60%;
		height:100%;
		position:relative; 
		top:30%;
		left:-120%;
		margin-left:0; 
	}
	
	#sec1_caja_texto.activo{
		left:1%;
	}

	.sec1_titulo{ 
		font-size:50px; 
		line-height:50px;
	}

	.sec1_titulo_small{ 
		font-size:30px; 
		line-height:30px;
	}
	.sec1_titulo_small2{ 
		font-size:22px; 
		line-height:22px;
	}

	.sec1_texto{
		font-size:20px;   
	}
	.sec1_txt_2{
		font-size:42px !important; 
		line-height:42px !important;
	}
	
	
	/* Seccion 2 */
	.seccion_2,	.seccion_3{
		height:180% !important;
		max-height:180% !important; 
	}
	
	#sec_logo_familia{
		width:200px;
		height:200px;
		margin-top:-100px;
		left:50%; 
		margin-left:-110px;
	}

	.cuadro{
		float:none !important;
		clear:both !important; 
		position:relative; 
		width:100%;
		height:50%;
		background-position:50% 50%;  
	}
	
	.texto_hover.right{
		text-align:left; 
	}
	.capa_hover_texto.right .barra_texto{
		margin-left:0%;
	}
	.botella{ 
		width:45%;
		height:75%;
		top:10%; 
	}
	#botella_1, #botella_2{
		left:1%; 
	}
	#botella_3, #botella_4{
		top:10%;  
	} 
	
	.hover{ 
		top:-75%; 
	}
	
	.sub_hover{
		top:-175%; 
	}
	.sub_hover_activo{
		opacity:0.5;
		filter: alpha(opacity=50);
	}
	
	.capa_hover_texto{
		top:-275%;	
	}
	
	
	.hover_y_capa_texto_activo{
		opacity:1;
		filter: alpha(opacity=100);
	}
	
	
	.capa_hover_boton{
		display:block;
	}
	.capa_hover_boton_activo{
		top:-375%; 
		height:100%;
	}
	.capa_hover_boton_activo img{
		-ms-transform: rotate(45deg); /* IE 9 */
		-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
		transform: rotate(45deg);
	}
	
	.capa_hover_texto h3{
		font-size:40px;
	}
	
	.capa_hover_texto h4{
		font-size:24px; 
	}
	
	.texto_hover{
		width:85%; 
	}
	
	/*
	.texto_hover p{
		display:none;
	}
	.texto_hover_p_activo p{
		display:block; 
	}
	*/

	
	
	/* Seccion 4 */
	#contenido_4{ 
		background-position:0 0;
		background-image:url('img/bg_proceso_mobile.jpg');
	}
	
	#sec4_caja_texto{
		width:80%; 
		height:auto; 
		top:10%; 
		left:5%; 
		left:10%; 
		text-align:right; 
	}
	
	#sec4_caja_texto.activo{
		left:10%; 
	}
	
	#sec4_titulo{ 
		font-size:36px;
	}

	#sec4_logo_aniversario{
		width:2px;
		height:3px;
		margin-left:-2px; 
		left:100%;  
		display:none; 
	}
	

	
	/* Seccion 5 */
	#contenido_5{ 
		background-image:url('img/bg_historia_mobile.jpg');
	}
	
	#sec5_caja_texto{
		width:80%; 
		height:auto;  
		top:10%; 
		left:10%; 
	}
	
	#sec5_caja_texto.activo{
		left:10%; 
	}

	#sec5_titulo{
		font-size:60px;
	}

	#sec5_subtitulo{  
		font-size:20px;
	}
	
}




@media only screen and (max-width: 500px) {
	/* Seccion 4 */
	#sec4_caja_texto{
		width:85%;  
		top:5%;  
		left:8%;
		text-align:right; 
	}
	
	/* Seccion 5 */
	#sec5_caja_texto{
		width:85%; 
		height:auto; 
		top:5%;  
		left:8%; 
		text-align:right; 
	}
}