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

*{
	margin: 0px;
	padding: 0px;
	border: 0px;
}

body{
	background: #000;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	color: #FFF;
}

.izq{ float: left;}
.der{ float: right;}

a{text-decoration: none; outline: none;}
a:hover{text-decoration: underline;}




#content{
	width: 965px;
	margin: 8px auto;
}


img#logo{padding-top: 8px;}

#cabecera{float: left; }

#cabecera hr{
	float: right;
	width: 780px;
	height: 1px;
	border: 0px;
	margin: 10px 0px; 
	padding: 0px;
	color: #7d7d7d;
	background: #7d7d7d;
}

#menu{
	background: url(/img/fondo_menu.gif) no-repeat center 25px;
	float: left;
	width: 965px;
}

#menu ul{margin-left: 100px; list-style: none;}
#menu ul li{float: left; padding-left: 75px; }
#menu ul li.b{padding-top: 40px; }

#pie{
	float: left;
	font: 10px Arial, Helvetica, sans-serif;
	color: #7d7d7d;
	padding-left: 10px;
}

#pie a{
	font: 10px Arial, Helvetica, sans-serif;
	color: #7d7d7d;
}

#submenus{float: left; /*border: 1px solid #FFF;*/}

#submenu1, #submenu2, #submenu3{display: none;}

#submenu1 img{padding-left: 190px; }

#submenu2 ul{margin-left: 55px; list-style: none;}
#submenu2 ul li{float: left; padding-left: 75px; border: 0px; margin: 0px; }

#submenu3 img{padding-left: 125px; padding-top: 35px;}

#submenu2 hr{
	float: right;
	width: 780px;
	height: 1px;
	border: 0px;
	margin: -3px 0px 0px 0px; 
	padding: 0px;
	color: #7d7d7d;
	background: #7d7d7d;
}


/************ HOME ************/

.home1{
	width: 550px;
	margin: 0px auto;
	text-align: center;
}

.home1 img{float: left;}
.home1 ul{float: left; list-style: none; margin-left: 80px; margin-bottom: 40px;}
.home1 ul li{clear: both;}

.home2{
	height: 228px;
	background: url(/img/foto_home.jpg) no-repeat top center;
	margin-top: 40px;
	margin-bottom: -25px;
	clear: both;
}

#video{
	position: absolute;
	z-index: 2;
	top: 60px;
	left: 50%;
	margin-left: -275px;
	display: none;
	background: #000;
	filter: alpha(opacity=80);
	opacity: .8;
	-moz-opacity: 0.8;
	width: 550px;
}

#video div.flash{margin: 0px auto; text-align: center; clear: both;}

#video a{color: #FFF; margin-right: 50px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px;}
#video a:hover{color: #FFF; text-decoration: none; font-weight: bold;}


/************ SABIAS QUE ************/

#que{
	float: left;
	width: 660px;
	margin-left: 140px;
	margin-top: 20px;
	margin-bottom: 50px;
}

#que span{font-size: 10px;}

#que ol{
	list-style: none;
}

#que ol li{
	float: left;
	margin-bottom: 15px;
}

#que ul{
	list-style: none;
	display: none;
	margin-left: 60px;
}

.off1{
	float: left;
	background: url(../img/mito1_off.gif) no-repeat top left;
	width: 652px;
	height: 43px; 
	cursor: pointer;
}

.on1{
	float: left;
	background: url(../img/mito1_on.gif) no-repeat top;
	width: 652px;
	height: 43px; 
	cursor: pointer;
}

.off1:hover, .on1:hover{background-position:0 -50px; }

.off2{
	float: left;
	background: url(../img/mito2_off.gif) no-repeat top;
	width: 652px;
	height: 78px; 
	cursor: pointer;
}

.on2{
	float: left;
	background: url(../img/mito2_on.gif) no-repeat top;
	width: 652px;
	height: 78px; 
	cursor: pointer;
}


.off2:hover, .on2:hover{background-position:0 -80px;}

.off3{
	float: left;
	background: url(../img/mito3_off.gif) no-repeat top;
	width: 652px;
	height: 42px; 
	cursor: pointer;
}

.on3{
	float: left;
	background: url(../img/mito3_on.gif) no-repeat top;
	width: 652px;
	height: 42px; 
	cursor: pointer;
}

.off3:hover, .on3:hover{background-position:0 -50px;}

.off4{
	float: left;
	background: url(../img/mito4_off.gif) no-repeat top;
	width: 652px;
	height: 42px; 
	cursor: pointer;
}

.on4{
	float: left;
	background: url(../img/mito4_on.gif) no-repeat top;
	width: 652px;
	height: 42px; 
	cursor: pointer;
}

.off4:hover, .on4:hover{background-position:0 -50px;}


/************ NUESTRAS VARIEDADES ************/

.variedades{
	background: url(../img/fondo_variedades.jpg) no-repeat right;
	width: 890px;
	height: 320px;
	float: right;
	margin-top: 25px;
}

.variedades p{
	clear: both;
	width: 400px;
	font-size: 16px;
}

.metropolitan{
	background: url(../img/fondo_metropolitan.jpg) no-repeat left bottom;
	width: 890px;
	height: 400px;
	float: right;
	margin-top: 40px;
	margin-bottom: -25px;
}

.content_metro{padding-left: 480px; width: 410px;}

.content_metro p{clear: both; padding: 5px 0px 15px 0px;}

.integral{
	background: url(../img/fondo_integral.jpg) no-repeat left bottom;
	width: 890px;
	height: 350px;
	float: left;
	margin-top: 40px;
	margin-bottom: -25px;
}

.barra{
	background: url(../img/fondo_barra.jpg) no-repeat left bottom;
	width: 890px;
	height: 350px;
	float: left;
	margin-top: 40px;
	margin-bottom: -25px;
}

.content_barra, .content_integral{padding-left: 500px; width: 410px;}

.content_barra p, .content_integral p{clear: both; padding: 5px 0px 15px 0px;}

img.bot20{padding-bottom: 20px;}

.hogaza{
	background: url(../img/fondo_hogaza.jpg) no-repeat left bottom;
	width: 890px;
	height: 400px;
	float: right;
	margin-top: 40px;
	margin-bottom: -25px;
}

.content_hogaza{padding-left: 480px; width: 410px;}

.content_hogaza p{clear: both; padding: 5px 0px 15px 0px;}


#info_barra, #info_metropolitan, #info_hogaza, #info_integral{
	display: none;
	z-index: 1;
	position: absolute;
	left: 50%;
	margin-left: 18px;
	top: 170px;
}

/************ CUESTIONARIO ************/


#cuestionario{
	background: url(/img/foto_home.jpg) no-repeat bottom center;
	/*margin-bottom: -25px;*/
}

#cuestionario p{
	width: 560px;
	margin: 10px auto;
}

form{
	width: 475px;
	margin: 0px auto;
	font-size: 12px;
}

form span{
	font-size: 16px;
}

form fieldset{
	clear: both;
	margin: 15px 0px 5px 0px;
}


.formulario{
	background: #000;
	border: 1px solid #FFF;
	width: 520px;
	margin: 10px auto;
	
}

.formulario p, .mensaje p{
	clear: both;
	width: 580px;
	text-align: center;
	font-size: 16px;
	margin: 0px auto;
	padding: 25px 0px;
}

.mensaje{
	background: url(../img/fondo_mensaje.jpg) no-repeat center bottom;
	height: 450px;
	margin-bottom: -25px;
}

/***** POP-UP'S *****/
div.fondo_legal{
	margin: 20px 14px;
	background: #FFFFFF;
	height: 541px;
}

div.recuadro{
	width: 505px;
	height: 402px;
	border: 1px solid #FFFFFF;
	background: #000;
	padding: 20px;
	margin-top: 25px;
}

div.escrol{
	width: 505px; 
	height: 360px;
	padding-right: 5px;
	overflow: auto;
}

div.pad20{padding: 20px;}

.txt_legal{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	line-height: 14px;
}