@charset "UTF-8";
/* CSS Document */
body{
	background: none repeat scroll 0 0 #000;
    font-family: 'Titillium Web', sans-serif;
    overflow-x: hidden;
	margin:0;
	padding:60px 0 0 0;
}
#wrapper_top{
	position:fixed;
	top:0;
	left:0;
	margin:0 auto;
	width:100%;
	height:60px;
	background-color:#000;
	z-index:1000;
}
#content_top{
	margin:0 auto;
	width:950px;
	height:60px;
}
#wrapper_presentacion{
	margin:0 auto;
	width:100%;
	background:url(../img/back_home.jpg) top center;
}
#wrapper_gama{
	margin:0 auto;
	width:100%;
	background:url(../img/Gama-Groc.jpg) center no-repeat;
	height: 300px;
	    background-color: #f8b32a;
}
#content_presentacion{
	margin:0 auto;
	width:950px;
	height:750px;
}
#wrapper_nosotros{
	margin:0 auto;
	width:100%;
	background:url(../img/back_nosotros.jpg) top center;
}
#content_nosotros{
	margin:0 auto;
	width:950px;
	height:369px;
}
#wrapper_velas{
	margin:0 auto;
	width:100%;
	background:url(../img/back_velas.jpg) top center;
}
#content_velas{
	margin:0 auto;
	width:950px;
	height:860px;
}
#wrapper_interrogante{
	margin:0 auto;
	width:100%;
	background:url(../img/back_interrogante.jpg) top center;
}
#content_interrogante{
	margin:0 auto;
	width:950px;
	height:675px;
}
#wrapper_felicidades{
	margin:0 auto;
	width:100%;
	background:url(../img/back_felicidades.jpg) top center;
}
#content_felicidades{
	margin:0 auto;
	width:950px;
	height:475px;
}
#wrapper_distribucion{
	margin:0 auto;
	width:100%;
	background:url(../img/back_distribucion.jpg) repeat;
}
#content_distribucion{
	margin:0 auto;
	width:950px;
	height:580px;
}
#wrapper_contacto{
	margin:0 auto;
	width:100%;
	background:url(../img/back_contacto.jpg) repeat;
}
#content_contacto{
	margin:0 auto;
	width:950px;
	height:860px;
}
#wrapper_pie{
	margin:0 auto;
	width:100%;
	background-color:#000;
}
#content_pie{
	margin:0 auto;
	width:950px;
	height:50px;
}
.texto_pie{
	float:left;
	width:950px;
	margin-top:15px;
	text-align:center;
	font:13px 'Titillium Web', sans-serif;
	color:#8e8e8e;
}
.texto_pie a {
	color:#fff;
	text-decoration:none;
}
.nav{
	float:left;
	height:60px;
	width:950px;
	color:#fff;	
}
.item_menu, item_menu a{
	float:left;
	margin:15px 20px 0 0;
	padding:3px 10px 3px 5px;
	text-decoration:none;
	text-transform:uppercase;
	font-size:13px;
	font-weight:400;
	color:#fff;	
}
.item_menu:hover {
	background-color:#1f1f1f;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	color:#eb9e33;
	cursor:pointer;
}
.item_menu_on{
	float:left;
	margin:15px 20px 0 0;
	/*padding:3px 15px 3px 15px;*/
	padding:3px 10px 3px 10px;
	text-decoration:none;
	text-transform:uppercase;
	font-size:13px;
	font-weight:400;
	background-color:#1f1f1f;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	color:#eb9e33;
	cursor:pointer;
}
#presenta .logo{
	float:left;
	margin:20px 0 0 0;
	width:950px;
	height:173px;
	background:url(../img/logo-xocandchic.png) center center no-repeat;
}
#slideshow{
	position:relative;
	float:left; 
	width:400px; 
	height:329px; 
	padding-left:10px; 
	position: relative; 
	margin-left:281px;
	border:#000 0px solid;
}
#slideshow img{
	position:absolute;
	top:-45px;
	left:-10px;
}
#llum{
	position:absolute ;
	top:0;
	width:950px;
	height:655px;
	background:url(../img/llum.png)-25px -50px;
	z-index:1;
	background-size: calc(100% + 50px);
}
#presenta .pastis{
	position:absolute;
	margin:0 auto;
	width:950px;
	height:850px;
	background:url(../img/pastis.png) center bottom no-repeat;
}
#nosotros .title{
	float:left;
	width:340px;
	height:125px;
	margin:0px 0 0 470px;
	background:url(../img/logo-nosotros.png);
}
#nosotros .claim{
	float:left;
	font:38px 'Titillium Web', sans-serif;
	font-weight:200;
	color:#3a3a3a;
	width:340px;
	margin:0 0 0 480px;
	letter-spacing:1px;
	text-transform:uppercase;
}
#nosotros  .text{
	float:left;
	margin: 30px 0 0 480px;
	width:400px;
	font:13px 'Titillium Web', sans-serif;
	font-weight:400;
	color:#323232;
}
#velas .title{
	float:left;
	width:950px;
	margin-top:30px;
}
#velas .logo_es, #velas .logo_en {
	float:left;
	margin-left:80px;
	width:343px;
	height:141px;
	background:url(../img/logo-vela_es.png) no-repeat left top;
}
#velas .logo_ca{
	float:left;
	margin-left:80px;
	width:343px;
	height:141px;
	background:url(../img/logo-vela_ca.png) no-repeat left top;
}
#velas .logo_de{
	float:left;
	margin-left:80px;
	width:343px;
	height:141px;
	background:url(../img/logo-vela_de.png) no-repeat left top;
}



#velas .cacao{
	float:left;
	margin-top:145px;
	width:343px;
	font:16px Georgia, "Times New Roman", Times, serif;
	color:#d1c096;
	text-align:center;
}
#velas .claim{
	float:left;
	width:320px;
	margin-top:65px;
	margin-left:40px;
}
#velas .claim h1{
	font:34px/10px Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color:#fff;
	width:400px;
	text-indent:10px;	
}

.fr {
    float: right;
}

#velas .claim h2{
	font:28px/10px Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color:#fff;
	width:320px;
	text-indent:180px;	
}
#velas .claim h3{
	font:20px/10px Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	color:#fff;
	width:320px;
}
#velas .pack{
	float:left;
	width:885px;
	height:413px;
	margin-left:65px;
	background:url(../img/vela-packs.png) no-repeat;
}
#velas .soldier{
	position:absolute;
	top:1710px;
	margin-left:478px;
	background:url(../img/vela.png) no-repeat;
	width:472px;
	height:494px;
	z-index:100;
	-webkit-transition: top 1.5s ease-out;
    -moz-transition: top 1.5s ease-out;
    -o-transition: top 1.5s ease-out;
}
#velas .soldier_on{
	position:absolute;
	top:1595px;
	margin-left:478px;
	background:url(../img/vela.png) no-repeat;
	width:472px;
	height:494px;
	z-index:100;
	-webkit-transition: top 1.5s ease-out;
    -moz-transition: top 1.5s ease-out;
    -o-transition: top 1.5s ease-out;
}
#velas .video{
	float:left;
	margin-left:65px;
}
#velas .text{
	float:left;
	margin: 0 0 0 40px;
	width:520px;
	font:13px 'Titillium Web', sans-serif;
	font-weight:400;
	color:#fff;
}
#velas .text a{
	color:#EB9E33;
	text-decoration:underline;
}
#interrogante  .title{
	float:left;
	width:500px;
	margin:50px 0 0 0;
}
#interrogante .logo_es, #interrogante .logo_en{
	float:left;
	width:435px;
	height:140px;
	background:url(../img/logo-interrogante_es.png) no-repeat;
	margin-left:65px;
}
#interrogante .logo_ca{
	float:left;
	width:435px;
	height:140px;
	background:url(../img/logo-interrogante_ca.png) no-repeat;
	margin-left:65px;
}
#interrogante .logo_de{
	float:left;
	width:435px;
	height:140px;
	background:url(../img/logo-interrogante_de.png) no-repeat;
	margin-left:65px;
}
#interrogante .cacao{
	float:left;
	width:356px;
	margin-top:145px;
	font:16px Georgia, "Times New Roman", Times, serif;
	color:#5a4000;
	text-align:center;
}
#interrogante .claim{
	float:left;
	width:420px;
	margin:50px 0 0 50px;
	font: bold 26px Georgia, "Times New Roman", Times, serif;
	color:#26100c;
	text-align:center;
	font-style:italic;	
}
#interrogante .text{
	float:left;
	margin: 40px 0 0 65px;
	width:400px;
	font:13px 'Titillium Web', sans-serif;
	font-weight:400;
	color:#200600;
}
#interrogante .text a{
	color:#EB9E33;
	text-decoration:underline;	
}
#interrogante .pack{
	float:left;
	width:450px;
	height:541px;
	margin:80px 0 0 0;
	background:url(../img/interrogante-pack.png) top right no-repeat;
}
#interrogante .soldier{
	position:absolute;
	top:2585px;
	margin-left:495px;
	background:url(../img/interrogante.png) no-repeat;
	width:192px;
	height:424px;
	z-index:100;
	-webkit-transition: top 1.5s ease-out;
    -moz-transition: top 1.5s ease-out;
    -o-transition: top 1.5s ease-out;
}
#interrogante .soldier_on{
	position:absolute;
	top:2460px;
	margin-left:495px;
	background:url(../img/interrogante.png) no-repeat;
	width:192px;
	height:424px;
	z-index:100;
	-webkit-transition: top 1.5s ease-out;
    -moz-transition: top 1.5s ease-out;
    -o-transition: top 1.5s ease-out;
}
#felicidades .box_es, #felicidades .box_en{
	float:left;
	width:950px;
	height:450px;
	margin:30px 0 0 0;
	/*background:url(../img/felicidades-pack.png) top no-repeat;*/
}
#felicidades .box_ca{
	float:left;
	width:950px;
	height:450px;
	margin:30px 0 0 0;
	/*background:url(../img/felicidades-pack_ca.png) top no-repeat;*/
}
#felicidades .box_de{
	float:left;
	width:950px;
	height:450px;
	margin:30px 0 0 0;
	/*background:url(../img/felicidades-pack_de.png) top no-repeat;*/
}

#felicidades .title_es, #felicidades .title_en {
	float:left;
	width:400px;
	height:145px;
	margin:20px 0 0 410px;
	background-image:url(../img/logo-felicidades_es.png);	
}
#felicidades .title_ca{
	float:left;
	width:390px;
	height:145px;
	margin:20px 0 0 410px;
	background-image:url(../img/logo-felicidades_ca.png);	
}
#felicidades .title_de{
	float:left;
	width:420px;
	height:145px;
	margin:20px 0 0 410px;
	background-image:url(../img/logo-felicidades_de.png);	
}

#felicidades .cacao{
	float:left;
	width:390px;
	margin:0 0 0 410px;
	font:16px Georgia, "Times New Roman", Times, serif;
	color:#d1c096;
	text-align:center;
	font-style:italic;	
}
#felicidades .text{
	float:left;
	margin:40px 0 0 430px;
	width:400px;
	font:13px 'Titillium Web', sans-serif;
	font-weight:400;
	color:#fff;
}
#felicidades .text a{
	color:#EB9E33;
	text-decoration:underline;
	
}
/*
#felicidades .soldier{
	position:absolute;
	top:3485px;
	margin-left:300px;
	background:url(../img/felicidades.png) no-repeat;
	width:455px;
	height:233px;
	z-index:100;
	-webkit-transition: top 1.5s ease-out;
    -moz-transition: top 1.5s ease-out;
    -o-transition: top 1.5s ease-out;
}

#felicidades .soldier_on{
	position:absolute;
	top:3415px;
	margin-left:300px;
	background:url(../img/felicidades.png) no-repeat;
	width:455px;
	height:233px;
	z-index:100;
	-webkit-transition: top 1.5s ease-out;
    -moz-transition: top 1.5s ease-out;
    -o-transition: top 1.5s ease-out;
}
*/
#distribucion{
	float:left;
	width:950px;
	height:540px;
	background:url(../img/distribuidor.png) center left no-repeat;
	margin-top: 5px;
}
#distribucion .claim{
	float:left;
	font:38px 'Titillium Web', sans-serif;
	font-weight:200;
	color:#3a3a3a;
	width:400px;
	margin:80px 0 0 410px;
	letter-spacing:1px;
	text-transform:uppercase;
}
#distribucion  .text{
	float:left;
	margin: 30px 0 0 410px;
	width:540px;
	font:13px 'Titillium Web', sans-serif;
	font-weight:400;
	color:#323232;
}
#distribucion .btnbox{
	float:left;
	margin:40px 0 0 400px;
	width:550px;
	height:82px;
	background:url(../img/btn-distribucion.png);
}
#distribucion .btn{
	float:left;
	margin:20px 0 0 20px;
	width:160px;
	height:40px;
	font:16px/38px 'Titillium Web', sans-serif;
	text-align:center;
	text-transform:uppercase; 
	text-decoration:none;
	color:#fff;
	background-color:#353535;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor:pointer;
}
#distribucion .btn:hover {
	background-color:#EB9E33;
	color:#353535;
	-moz-box-shadow: 0 0 5px #919191;
	-webkit-box-shadow: 0 0 5px#919191;
	box-shadow: 0 0 5px #919191;
}
#distribucion .btnliteral{
	float:left;
	margin:20px 0 0 20px;
	font:14px/40px 'Titillium Web', sans-serif;
	color:#323232;
	font-weight:400;
	
}
#contacto .map{
	margin-top:-5px;
	float:left; 
	width:100%; 
	height:315px;
	-moz-box-shadow: inset 0 0 5px 5px #888;
	-webkit-box-shadow: inset 0 0 5px 5px#888;
	box-shadow: inset 0 0 5px 5px #888;
}
/*POPUPS*/

.content_ingredientes{
    background: url('/img/back-pop.jpg');
    width: 442px;
    height: 505px;
    padding-left: 27px;
    padding-top: 27px;   
}
.content_ingredientes .cajaTit{
    text-transform: uppercase;
    font-size: 22px;
    color:#faf6ee;
    font-weight: 500;
    width: 414px;
    height: 39px;
    border: 1px solid #000;
    background-color: #412a21;
    text-indent:8px;
    line-height: 38px;
}
.content_ingredientes .cajaDesc{
     width: 406px;
     text-align: justify;
     font-size: 13px;
     padding-left: 8px;
     margin-top: 10px;
     line-height: 15px;
     
}
.content_ingredientes .cajaApto{
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    width: 414px;
    height: 39px;
    border: 1px solid #000;
    text-align: center;
    background-color: #fcf3e0;
    margin-top: 36px;
    margin-bottom: 46px;
    line-height: 36px;
}