@charset "utf-8";
/* CSS Document */

* {
	padding: 0;
	margin: 0;
	text-decoration: none;
	text-align: center;
	font-family: 'Englebert', sans-serif;
	color: #000000;
}
.marca02 {
	display: none;
}
header {
	padding: 10px 7% 0 7%;
	background-color: #DC0512;
	height: 40px;
}
.slogantop {
	width: 49%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
.redes {
	vertical-align: top;
	width: 49%;
	display: inline-block;
	text-align: right;
}
.redes a img {
	opacity: 1;
	transition: all ease-in-out 0.3s;
	margin:0 3px;
}
.redes a img:hover {
	opacity: 0.8;
}
/* NAV ------------------------------------------------------------- */
.encabezado {
	background-color: #DC0512;
}
nav {
	position:relative;
	width: 990px;
	margin:0 auto; 
	z-index:10;	
}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile {
	border:0;
	list-style:none;
	line-height:1;
	display:block;
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box}

#cssmenu:after,#cssmenu > ul:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#cssmenu #head-mobile {display:none}
#cssmenu{
	background-color: #DC0512;
	text-align:center;	
}
#cssmenu > ul > li {
	float:left;
	padding: 20px 20px;
	text-align:center;
}
#cssmenu > ul > li.marca {
	width:350px;
}
#cssmenu > ul > li.marca img {
	position: absolute;
	top: -70px;
	padding-left: 0px;
	left: 50%;
	margin-left: -180px;
	z-index: 100;
}
#cssmenu > ul > li > a {	
	color: #FFC700;
	font-size: 26px;
	display: inline-block;
	transition: all 0.2s ease-in-out;
	letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{
	color: #FFFFFF;
}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{
	-webkit-transition: background .3s ease;
	-ms-transition: background .3s ease;
	transition: background .3s ease;
}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px;width:100%;}
#cssmenu ul ul li{
	height: 0;
	-webkit-transition: all .25s ease;
	-ms-transition: all .25s ease;
	background-color: #000000;
	transition: all .25s ease;
	 text-align:center;
}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:40px;}
#cssmenu ul ul li a{
	border-bottom: 1px solid rgba(213,195,154,0.20);
	padding: 11px 15px;
	width: 100%;
	font-size: 15px;
	text-decoration: none;
	color: #D5C39A;
	font-weight: 400;
}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background-color: #E13E2D;}
/*#cssmenu ul ul ul li.active a{border-left:1px solid #333}*/
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}


#wrapper {
	position:relative;
}
#wrapper .aniversario {
	position: absolute;
	right: 30px;
	top: 30px;
	z-index: 20;
}
.home {
	padding: 70px 0px;
	background-image: url(imagenes/section-fondo.png);
	background-repeat: no-repeat;
	background-position: center -15px;
}
.interiores {
	padding: 300px 0px 150px 0px;
	background-image: url(imagenes/fondo.png);
	background-repeat: no-repeat;
	background-position: center -20px;
}
.slogan {
	color: #FFC700;
	font-size: 37px;
	line-height: 44px;
	margin: 0px auto 270px auto;
	width: 600px;
}
.slogan span {
	font-size: 45px;
	color: #FFC700;	
}
.contenedora {
	margin: auto;
	width: 924px
}
.detalle {
	background-color: #FFC700;
	padding: 30px;
}
h1 {
	font-family: 'Amatic SC', cursive;
	font-size: 47px;
	line-height: 47px;
}
h2 {
	color: #DC0512;
	font-size: 43px;
	text-transform: uppercase;
	line-height: 53px;
	margin-bottom: 10px;
	font-weight: normal;
}
h3 {
	font-size: 24px;
	text-transform: uppercase;
}
h4 {
	color: #DC0512;
	font-size: 92px;
	line-height: 92px;
	text-transform: uppercase;
	font-weight: normal;
	margin-bottom: 35px;
}
h5 {
	color: #DC0512;
	font-size: 28px;
	line-height: 28px;
	text-transform: uppercase;
	font-weight: normal;
	margin-bottom: 15px;
}
p {
	font-size: 30px;
	line-height: 40px;
	margin: 0 auto 0 auto;
}
.p600 {
	margin: auto;
	width: 600px;
}
.producto {
	width: 22.5%;
	display: inline-block;
	margin: 30px 1% 90px 1%;
	vertical-align: top;
}
.producto img {
	width: 100%;
	border-radius: 100%;
	height: auto;
	margin-bottom: 15px;
	border: 5px solid #CBC9C5;	
	transition: all 1s ease;
}
.producto img:hover {
	transform: rotate(30deg);
}
.catalogo {
	margin-top: 40px;
	opacity: 1;
	transition: all ease 0.4s;
}
.catalogo:hover {
	opacity: 0.7;
}
.snacks {
	background-image: url(imagenes/snacks-fondo.gif);
	background-repeat: no-repeat;
	padding: 80px 0px 50px 0px;
	margin: 100px 0px;
	background-position: center center;
}
.snacks p {
	width: 720px;
	color: #DC0512;
	margin-bottom: 20px;
	background-repeat: no-repeat;
}
.campos {
	width: 540px;
	border: 1px solid #000000;
	padding: 10px;
	margin-bottom: 15px;
	text-align: left;
	font-size: 20px;
	color: #000000;
}
.captcha-marco {
	margin: auto;
	width: 300px;
	display: block;
	margin-bottom:30px;
}
.captcha-centrado {
	width: 300px;
	margin-left: -150px;
	position: relative;
	left: 50%;	
}
.boton {
	background-color: #FFC700;
	color: #DC0512;
	padding: 10px 0px;
	width: 560px;
	border-style: none;
	font-size: 20px;
	margin-top: -20px;
}
fieldset {
	border:none;
}
label {
	text-align: left}
.descarga {
	background-color: #DC0512;
	color: #FFFFFF;
	padding: 7px 0px;
	width: 560px;
	border-style: none;
	font-size: 20px;
	margin-top: 30px;
	display: inline-block;
	transition: all 0.2s ease-in-out;
}
.descarga:hover {
	background-color: #000;
}
.descripcion {
	width: 41%;
	display: inline-block;
	vertical-align: top;
	margin: 0 4%;
	position: relative;
}
.descripcion .banda {
	width: 85%;
	height: auto;
	position: absolute;
	left: 5%;
	top: 10%;
	z-index: -1;
}
.descripcion .foto {
	width: 60%;
	border-radius: 100%;
	height: auto;
	margin-bottom: 15px;
	border: 5px solid #CBC9C5;
	transition: all 1s ease;
}
.descripcion .foto:hover {
	transform: rotate(30deg);
}
.descripcion p {
	font-size: 20px;
	line-height: 26px;
	width: 100%;
}
.separador {
	display: block;
	margin: 25px 0;
}
.izquierda {
	text-align: left;
}
.marginBottom {
	margin-bottom: 50px;
}
footer {
	padding: 30px 0px;
	background-color: #DC0512;
}
footer p {
	color: #FFC700;
	font-size: 21px;
	line-height: 29px;
	text-align: left;
}
footer p a {
	color: #FFC700;
	text-decoration: none;
	transition:	ease-in-out all 0.5s;
}
footer p a:hover, footer p a:active {
	color:#FFF;
}
.pielogo {
	vertical-align: top;
	display: inline-block;
	width: 30%;
	margin-right: 5%;
}
.piedatos {
	text-align: left;
	vertical-align: top;
	display: inline-block;
	width: 64%;
	padding-top: 25px;
}
.top {
	position: fixed;
	right: 30px;
	bottom: 20px;
	z-index: 1000;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #000000;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #000000;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #000000;
}

/* MEDIA QUERIES */
/*1300*/ @media screen and (max-width:1300px) {	
	#cssmenu > ul > li {width:17%;}
	#cssmenu > ul > li.marca {width:32%;}
	.home {padding: 60px 0px 70px 0; background-position: center -45px;}
	.slogan {margin: 0px auto 240px auto;}
	.interiores {padding: 270px 0px 150px 0px; background-position: center -60px;}
	header {padding: 10px 2% 0 2%;}	
}
/*1180*/ @media screen and (max-width:1180px) {
	.slogantop img {width:240px; height:auto}
}
/*1024*/ @media screen and (max-width:1024px) {	
	header {padding: 10px 1% 0 1%;}	
	.slogantop img {width:200px; }
	.redes a img {width:30px; height:auto; margin:0 3px;}
	nav {width: 100%;}		
	#cssmenu > ul > li {width:16%;}
	#cssmenu > ul > li.marca {width:36%;}
	#cssmenu ul ul li a{padding: 11px 10px;	width: 100%; font-size: 13px;}	
	#wrapper .aniversario {right: 20px; top: 20px; width: 110px; height:auto}
	.contenedora {width: 90%; margin: 0 5%;}	
}
/*980*/ @media screen and (max-width:980px) {		
	#wrapper .aniversario {right: 20px; top: 20px; width: 110px; height:auto}
	.contenedora {width: 90%; margin: 0 5%;}
	#cssmenu > ul > li {padding: 20px 15px;}
	#cssmenu > ul > li.marca {width:300px;}
	#cssmenu > ul > li.marca img {margin-left: -135px; width:280px; height:auto}
	#cssmenu > ul > li > a {font-size: 24px;}
	.interiores {padding: 220px 0px 150px 0px; background-position: center -100px;}	
}
/*880*/ @media screen and (max-width:880px) {
	#cssmenu > ul > li {width:18%;}
	#cssmenu > ul > li.marca {width:28%;}
	#cssmenu > ul > li.marca img {width: 250px; height:auto; top: -60px;	margin-left: -125px;}
	#wrapper .aniversario {right: 15px; top: 15px; width: 90px; height:auto}
	.home {background-position: center -65px;}
	.slogan {font-size: 32px; line-height: 39px; margin: 0px auto 210px auto; width: 70%;}
	.slogan span {font-size: 40px;}
	h4 {font-size: 82px; line-height: 82px;}
	.snacks p {width: 80%; margin:auto auto 20px auto; font-size:26px; line-height:35px;}
	.pielogo img {width:100%; height:auto}
	.piedatos {padding-top: 0px;}
}
/*780*/ @media screen and (max-width:780px) {
	#cssmenu > ul > li.marca { display:none}
	.marca02 {display: block; width: 220px; height: auto; position: absolute; top: 20px; left: 50%; margin-left: -110px; z-index: 100;}
	.slogan {width: 80%;}
	nav{width:100%;}
	#cssmenu > ul > li.marca { display:none}
	#cssmenu{width:100%}
	#cssmenu ul{width:100%;display:none}
	#cssmenu ul li{width: 100%;	border-top: 1px solid #FFC700}
	#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
	#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0; font-size:20px; text-align:left}
	#cssmenu > ul > li{float:none}
	#cssmenu ul ul li a{padding-left:25px}
	#cssmenu ul ul li{background:#000!important;}
	#cssmenu ul ul li:hover{background:#000!important}
	#cssmenu ul ul li a{/*color:#ddd*/;background:none}
	#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
	#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
	#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
	#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
	.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
	.button:after{position: absolute; top: 22px; right: 20px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 1px solid rgba(255,255,255,0.3); content: ''}
	.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
	.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
	.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
	#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
	#cssmenu .submenu-button.submenu-opened{background:#262626}
	#cssmenu ul ul .submenu-button{height:34px;width:34px}
	#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
	#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
	#cssmenu .submenu-button.submenu-opened:after{background:#fff}
	#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
	#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
	#cssmenu .submenu-button.submenu-opened:before{display:none}
	#cssmenu ul ul ul li.active a{border-left:none}
	#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
	.interiores {padding: 190px 0px 150px 0px; background-position: center -130px;}	
}
/*680*/ @media screen and (max-width:680px) {
	.home {background-position: center -85px;}
	.slogan {width: 90%;  margin: 0px auto 190px auto;}	
	.producto {width: 39%; margin: 30px 5% 30px 5%;}
	p {font-size: 26px; line-height: 35px;}
	.p600 {width: 80%;}
	h2.sabiasTop {margin-top:50px;}
	.campos {width: 80%; padding: 7px 5%; margin: 0 5% 15px 5%;}
	.boton {padding: 10px 5%; width: 90%; margin: -20px 5% 30px 5%;}
	.descarga {width: 80%; padding: 7px 5%; margin: 30px 5% 0 5%;}
	.top {right: 20px; bottom: 10px;}
	.top img {width:70px; height:auto}	
}
/*580*/ @media screen and (max-width:580px) {
	.marca02 {width: 180px; top: 30px; margin-left: -90px;}
	#wrapper .aniversario { width: 70px; height:auto}	
	h1 {font-size: 40px; line-height: 40px;}
	.slogan {font-size: 29px; line-height: 36px;}
	.slogan span {font-size: 35px;}
	h4 {font-size: 72px; line-height: 72px;}
	p {font-size: 22px; line-height: 31px;}
	.snacks p {width: 80%; margin:auto auto 20px auto; font-size:22px; line-height:31px;}
	.pielogo {display: none;}
	.piedatos {text-align: center; width: 100%;}	
	.top img {width:60px; height:auto}
	.descripcion {width: 80%; margin: 0 10% 50px 10%;}
	.separador {display:none}
}
/*480*/ @media screen and (max-width:480px) {
	.slogantop {width: 39%;	}
	.redes {width: 59%;}
	.redes a img {width:29px; height:auto; margin:0 2px;}	
	.slogantop img {width:160px; }
	.producto {width: 45%; margin: 30px 2% 0px 2%;}
	.catalogo img {width:90%; height:auto}
}