/*###############################################################################################
###############################################################################################

				ESTO ES PARA TODAS LAS PAGINAS

###############################################################################################
###############################################################################################*/

@font-face{ 
	font-family: ds; 
	src: url('Fuentes/ds-webfont.eot'); 
	src: 	url('Fuentes/ds-webfont.woff') format('woff'), 
		url('Fuentes/ds-webfont.ttf') format('truetype'), 
		url('Fuentes/ds-webfont.svg#webfont') format('svg');
}

@font-face{ 
	font-family: os; 
	src: url('Fuentes/osl-webfont.eot'); 
	src: 	url('Fuentes/osl-webfont.woff') format('woff'), 
		url('Fuentes/osl-webfont.ttf') format('truetype'), 
		url('Fuentes/osl-webfont.svg#webfont') format('svg');
}

body {
	font-family:  os;
	font-size:15pt;
	padding: 0;
	margin: 0;
	color:#333333;
	text-align:left;
	font-weight:light;
	line-height: 120%;
}

div{
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
	display: block;
	width: 100%;
	color: #fff;
}
a:hover{
	color:#999;
	opacity: 0.7;
}

.izquierda{text-align:left;}
.negrita{font-weight:bold;}

.contenedor {
	position: absolute;
	top: 0;	
	left:0;
	width: 100%;
	padding:0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	overflow: hidden;
}

#contenedor_expo{width:50%;left:25%;background-color:#fff;}
#contenedor_encuesta{width:100%;background-color:#333;}

/*###############################################################################################
###############################################################################################

						FILTRO

###############################################################################################
###############################################################################################*/

.filtro{
	display: table;
	position: fixed;
	top: 25%;
	left: 15%;
	width: 70%;
	height: 50%;
	padding: 0px;
	margin: 0px;
	background-color: rgba(0,0,0,0.8);
	z-index: 6;
	box-sizing: border-box;
}

#titulo_filtro,#descripcion_filtro{margin-top:0;margin-bottom:20px;color:#e6e6e6;}

.genero{
	display:block;
	float:left;
	width:34.5%;
	height:70px;
	margin:0;
	margin-bottom: 30px;
	padding:0;
	background-position: center;
	background-size: auto 100%;
	background-repeat:no-repeat; 
}

#filtro_ella{width:15%;background-image: url(Imagenes/ella.png);border-right: 1px solid #555;}
#filtro_el{width:15%;background-image: url(Imagenes/el.png);background-size: auto 82%;}

.cerrar{
	display:block;
	float:right;
	width:20px;
	height:auto;
	margin:0;
	margin-top:15px;
	margin-right:15px;
	padding:0;
}

.cerrar img{
	width:100%;
	height:auto;
}

.genero:hover,.cerrar img:hover{
	cursor:pointer;
	opacity:0.5;
}

.contenido_ella{display:block;}
.contenido_el{display:none;}

#filtro_llamar1,#filtro_llamar2{
	display: none;
	height:70%;
	background-color: rgba(0,0,0,0.9);
}

/*###############################################################################################
###############################################################################################

						MENU

###############################################################################################
###############################################################################################*/

.menu{
	display: table;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	max-height: 100%;
	padding: 0px;
	margin: 0px;
	background-color: rgba(0,0,0,0.8);
	z-index: 5;
	box-sizing: border-box;
}

.submenu{
	cursor:pointer;
	display: table-cell;
    vertical-align: middle;
	width: 11.4286%;
	min-width: 100px;
	height: 50px;
	max-height: 10%;
	padding: 0px;
	margin: 0px;
	margin-top: 2.5px;
	margin-bottom: 2.5px;
	font-size:10.5pt;
	color:#fff;
	text-align:center;
	font-weight:light;
	line-height: 110%;
	box-sizing: border-box;
	letter-spacing: 0.5pt;
}

.submenu:hover{color:#999;}

#submenu1{display: table-cell;}

.submenu1{
	display: table-cell;
    vertical-align: middle;
	width: 10%;
	min-width: 50px;
	height: 40px;
	padding: 0px;
	margin: 0px;
	margin-top: 2.5px;
	margin-bottom: 2.5px;
	font-size:10pt;
	color:#fff;
	text-align:center;
	font-weight:light;
	line-height: 110%;
	box-sizing: border-box;
}

.submenu img:hover {opacity: 0.5;}

.menu img{	
	padding: 0px;
	margin: 0px;
	width: 40%;
	max-width: 30px;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
}

#logo{
	width: 50%;
	height: auto;
	min-width:45px;
	max-width:60px;
}

#menufinal{
	display: none;
	position: fixed;
	top: 90%;
	height:10%;
	z-index: 4;
}
#submenufinal{
	display: block;
	width:100%;
	height:auto;
	margin-top:10px;
}

#submenu_llamar img{width:70%;border:1px solid #fff;}

/*###############################################################################################
###############################################################################################

						MENU VERTICAL

###############################################################################################
###############################################################################################*/

.menuv{
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 0px;
	margin: 0px;
	background-color: rgba(0,0,0,1);
	z-index: 5;
	box-sizing: border-box;
}

.menuv img{	
	padding: 0px;
	margin: 0px;
	margin-top: 5px;
	margin-right: auto;
	margin-right: auto;
	vertical-align: middle;
}

.submenuv{
	cursor:pointer;
	display: block;
	float: left;
	width: 70%;
	height: 28px;
	padding: 0px;
	margin: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 15%;
	margin-right: 15%;
	font-size:10pt;
	color:#fff;
	text-align:left;
	font-weight:light;
	line-height: 110%;
	box-sizing: border-box;
	border-bottom: 1px solid #333;
}

.submenuv:hover{color:#999;}
.submenuv img:hover {opacity: 0.5;}

#submenuv1{
	height: 50px;
	width: 76%;
	margin:0;
	padding:0;
	margin-top: 20;
	margin-bottom: 5;
	text-align:center;
	border-style: none;
}

#submenuv14,#submenuv15{width:12%;margin:0;padding:0;border:none;}

#submenuv13{
	text-align:center;
	border-style: none;
}

#menuv2{position:relative;}

/*###############################################################################################
###############################################################################################

						IMAGENES

###############################################################################################
###############################################################################################*/

.img_pc, .img_tablet, .img_phone{
	width: 100%;
	height: auto;
}

.img_pc{display: block;}
.img_tablet{display: none;}
.img_phone{display: none;}

/*###############################################################################################
###############################################################################################

						SLIDER

###############################################################################################
###############################################################################################*/


.slider{
	position: relative;
	top: 0;
	left: 0;
	width: 400%;
	margin: 0px;
	padding: 0px;
	padding-top:50px;
	background-color:#ccc;
}

.slide{
	cursor:pointer;
	display: block;
	float: left;
	width: 25%;
	margin: 0px;
	padding: 0px;
}

.portada{
	font-family: os;
	position: absolute;
	width: 12.5%;
	text-align: center;
	font-weight: light;
	line-height: 120%;
	margin: 0;
	padding: 0;
	margin-top: 200px;
	box-sizing: border-box;
	z-index:1;
	color:#111;
}

#portada1{
	left: 11.5%;
	right: 1%;
	color:#333;
}

#portada2{
	left: 26%;
	right: 11.5%;
	color:#111;
}

.portada p{margin: 0;padding: 0;line-height: 120%;}
.titulo{font-size:30pt;margin-top: 20px;padding-bottom: 20px;letter-spacing: 2pt;line-height: 150%;}
.subtitulo{font-size:18pt;margin-top: 20px;padding-bottom: 20px;letter-spacing: 4pt;line-height: 150%;}
.descripcion{font-size:13pt;margin-top: 20px;padding-bottom: 20px;line-height: 150%;}

#slider_expo{width: 1100%;}
#slider_expo .slide{width: 9.0909090909%;}

/*###############################################################################################
###############################################################################################

						SLIDER TIMER

###############################################################################################
###############################################################################################*/

.slider_timer{
	display: none;
	position: absolute;
	top: 25%;
	left: 0%;
	width: 100%;
	padding: 0;
	margin: 0;
	z-index: 2;
}

.slide_timer,.slide_timer1,.relleno{
	cursor:pointer;
	display: block;
    float: left;
	width: 39.5%;
	height: 4px;
	padding: 0;
	margin: 0;
	margin-right: 8px;
}

.slide_timer{
	width: 5%;
	background-color: rgba(120,120,120,0.6);
}

.relleno{
	width: 0%;
	background-color: rgba(50,50,50,1);
	z-index: 6;
}

#slider_timer_expo .slide_timer1{width: 22%;}

/*###############################################################################################
###############################################################################################

						SECCION

###############################################################################################
###############################################################################################*/

.seccion{
	display: block;
	float: left;
	width: 100%;
	margin: 0px;
	margin-top: 5px;
	padding:0;
	padding-bottom: 1.9%;
}

.texto, .texto_negro{
	font-family: os;
	display:block;
	float: left;
	width: 96%;
	margin: 0;
	padding: 0;
	margin-left: 2%;
	margin-right: 2%;
	text-align: center;
	font-weight: light;
	line-height: 130%;
}

.texto_negro{
	width:100%;
	margin:0;
	padding:0;
	background-color:#111;
}

.texto_negro .titulo1,.texto_negro .descripcion1,.texto_negro .titulo2,.texto_negro .descripcion2{
	color:rgb(210,210,210);
	padding-left:20px;
	padding-right:20px;
}

.titulo1{
	font-size:40pt;
	color: #111;
	width: 80%;
	margin: 0;
	margin-left:10%;
	margin-top: 50px;
	margin-bottom: 30px;
	padding:0;
}
.descripcion1{
	font-size:16pt;
	color: #555;
	width: 80%;
	margin-left:10%;
	margin-top: 30px;
	margin-bottom: 30px;
	line-height: 150%;
}

#promos,#varices1{
	margin-top: 50px;
}


/*###############################################################################################
###############################################################################################

						SECCIONES

###############################################################################################
###############################################################################################*/

.secciones{
	display: block;
	float: left;
	width: 21%;
	margin: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-right: 1.9%;
	padding-left: 1.9%;
	padding-bottom: 1.9%;
	border-right: 1px solid #e6e6e6;
	overflow:hidden;
}

#s_me{border: none;}

.titulo2{
	font-size:25pt;
	color: #111;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	padding:0;
}
.descripcion2{
	font-size:12pt;
	color: #555;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 20px;
	padding:0;
}

.secciones:hover {cursor:pointer;/*opacity: 0.7;*/}

ul{margin:0;padding:0;}
li{
	text-align:left;
	padding-left:10px;
	margin-left:20px;
	margin-right:20px;
	min-height:26px;
	padding-top:5px;
	padding-bottom:5px;
	border-bottom:1px solid rgba(100,100,100,0.5);
}

#promocion0,#promocion1,#promocion2,#promocion3,#promocion4,#promocion5,#promocion6,#promocion7,#promocion8,#promocion9,#promocion10,#promocion11{display:none;cursor:auto;width:100%;margin:0;padding:0;border:none;}
#promocion0{display:block;}

.condiciones:hover{cursor:pointer;color:#fff;}
#promocion0 .lista{display:block;}

/*###############################################################################################
###############################################################################################

						RESUMEN Y LISTA

###############################################################################################
###############################################################################################*/

.lista{
	display: none;
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.sublista{
	cursor:pointer;
	display: block;
	float: left;
	width: 90%;
	height: 30px;
	padding: 0px;
	margin: 0px;
	margin-left:5%;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size:10pt;
	color:#333;
	text-align:left;
	border-bottom: 1px solid rgb(200,200,200);
}

.sublista:hover{color:#999;}

.servicio,.precio{
	display: block;
	float: left;
	width: 80%;
	margin:0;
	padding:0;
}

.precio{
	width: 20%;
	text-align: right;
}

.resumen{
	display: block;
	width: 92%;
	padding: 0px;
	margin: 0px;
	margin-left: 5%;
	z-index: 2;
	box-sizing: border-box;
}

.resumen p{
	font-size:20pt;
	color: #111;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 20px;
	padding:0;
}

.subresumen,.subresumen1{
	cursor:pointer;
	display: block;
	float: left;
	width: 17%;
	height: 50px;
	padding: 0px;
	margin: 0px;
	font-size:10pt;
	color:#333;
	text-align:center;
	border-bottom: 1px solid rgb(150,150,150);
}

.subresumen{width:64%;}

.subresumen1 img{width:100%;height:auto;}

.ocultar{display:none;}

/*###############################################################################################
###############################################################################################

						FOOTER

###############################################################################################
###############################################################################################*/

.footer{
	display: block;
	float: left;
	width: 100%;
	margin: 0;
	margin-top: 20px;
	padding:0;
	padding-bottom:50px;
	background-color:#e6e6e6;
}

.img_footer{
	width:auto;
	height:50px;
	margin-top:20px;
}

.texto_footer, .footer a{font-size:10pt;color: #666;margin: 0;padding:0;margin-top: 10px;padding-bottom: 10px;line-height:120%;}
.footer a:hover{color: #222;}


/*###############################################################################################
###############################################################################################

						FORMULARIO

###############################################################################################
###############################################################################################*/

form{
	display:block;
	float:left;
	width: 100%;
	margin: 0;
	padding: 0;
}

input, textarea, #llamar_final a{
	display:block;
	float:left;
	height:38px;
	width: 70%;
	margin:0;
	padding:0;
	padding-left: 5px;
	margin-bottom: 15px;
	margin-left: 15%;
	margin-right: 15%;
	font-family:  os;
	font-size:13pt;
	border: none;
	border-radius:3px;
	box-sizing: border-box;
}

.submitbutton, #llamar_final a{
	width: 20%;
	margin:0;
	padding:0;
	margin-bottom: 15px;
	margin-left: 40%;
	margin-right: 40%;
	color: #fff;
	border: 1px solid rgb(200,200,200);
	border-radius:3px;
	background-color:#555;
	box-sizing: border-box;
}
.submitbutton:hover, #llamar_final a{
	cursor:pointer;
	background-color:#444;
}

textarea{height:150px;padding: 10px;box-sizing: border-box;}
#form_encuesta{width:60%;margin-left:20%;}

.cuadro2{background-color:rgb(200,200,200);color:#333;padding:0;padding-left:6px;padding-right:6px;margin-right:6px;}

/*###############################################################################################
###############################################################################################

						RESPONSIVO

###############################################################################################
###############################################################################################*/

@media screen and (max-width: 900px){
		.portada{margin-top: 150px;}
		.titulo{font-size:23pt;}
		.subtitulo{font-size:13pt;letter-spacing: 2pt;}
		.descripcion{font-size:12pt;}
		.titulo1{font-size: 35pt;margin-bottom: 10px;}
		.descripcion1{font-size:14pt;margin-bottom: 10px;}
		.secciones{width:46%;margin-bottom:10px;padding-bottom:10px;border-bottom: 1px solid #e6e6e6;}
		.titulo2{font-size: 23pt;margin: 0;margin-bottom: 10px;padding:0;line-height: 150%;}
		.descripcion2{font-size:12pt;margin: 0;margin-bottom: 20px;padding:0;line-height: 150%;}
		#s_corporal{border-right:none;}
		#s_facial{border-bottom:none;}
		.genero{width:29.5%;}
		#filtro_ella{width:20%;}
		#filtro_el{width:20%;}
		#contenedor_expo{width:70%;left:15%;}
}

@media screen and (max-width: 800px){
		.img_pc{display: none;}
		.img_tablet{display: block;}
		.img_phone{display: none;}
		#submenu8 {display: table-cell;}
		#submenu7 {display: none;}
		#submenu6 {display: none;}
		.submenu {width: 15%;min-width: 100px;}
		.submenu1 {width: 5%;min-width: 50px;}
		.titulo1{font-size: 32pt;margin-bottom: 10px;}
		.descripcion1{font-size:13pt;margin-bottom: 10px;}
		.genero{width:29.5%;}
		#filtro_ella{width:20%;}
		#filtro_el{width:20%;}
		.slide_timer1{width: 29.5%;}
		.slide_timer{width: 10%;}
		#slider_timer_expo .slide_timer1{width: 0.5%;margin:0;padding:0;}
		#slider_timer_expo .slide_timer{width: 9%;margin: 0;padding:0;}
		#contenedor_expo{width:80%;left:10%;}
}

@media screen and (max-width: 700px){
		#img_quienes_somos{display: none;}
		#img_quienes_somos_vertical{display: block;}
		#submenu5 {display: none;}
		.submenu {width: 18%;min-width: 100px;}
		.submenu1 {width: 5%;min-width: 50px;}
		.titulo1{font-size: 30pt;width:94%;margin-left:3%;margin-bottom: 10px;}
		.descripcion1{font-size:13pt;width:94%;margin-left:3%;margin-bottom: 10px;}
		#contenedor_expo{width:90%;left:5%;}
		input, textarea{font-size:12pt;}
}

@media screen and (max-width: 600px){
		#submenu4 {display: none;}
		.submenu {width: 22.5%;min-width: 100px;}
		.submenu1 {width: 5%;min-width: 50px;}
		.titulo1{font-size: 25pt;width:95%;margin-left:2.5%;margin-bottom: 10px;}
		.descripcion1{font-size:12pt;width:95%;margin-left:2.5%;margin-bottom: 10px;}
		.genero{width:29.5%;}
		#filtro_ella{width:20%;}
		#filtro_el{width:20%;}
		#contenedor_expo{width:100%;left:0;}
}

@media screen and (max-width: 500px){
		.texto{width:90%;margin-left:5%;margin-right:5%;}
		.img_pc{display: none;}
		.img_tablet{display: none;}
		.img_phone{display: block;}
		.submenu {width: 22.5%;min-width: 80px;}
		.secciones{width:100%;margin: 0;margin-bottom:10px;padding:0;border:none;}
		.submenu1 {width: 5%;min-width: 5px;}
		.titulo2{font-size: 23pt;margin: 0;margin-top: 5px;margin-bottom: 5px;padding:0;line-height: 120%;}
		.descripcion2{font-size:12pt;margin: 0;margin-top: 10px;margin-bottom: 10px;padding:0;line-height: 150%;}
		#s_corporal{border-right:none;}
		#s_facial{border-bottom: 1px solid #e6e6e6;}
		.titulo1{font-size: 28pt;width:98%;margin:0;margin-left:1%;margin-top: 5px;margin-bottom: 5px;line-height: 110%;}
		.descripcion1{font-size:12pt;width:98%;margin:0;margin-left:1%;margin-top: 15px;margin-bottom: 15px;}
		.seccion{margin-bottom:10px;}
		.filtro{width:85%;left:7.5%;}
		.genero{width:24.5%;}
		#filtro_ella{width:25%;}
		#filtro_el{width:25%;}
		input, textarea{width:80%;margin-left:10%;margin-right:10%}
}

@media screen and (max-width: 400px){
		.titulo{font-size:23pt;}
		.subtitulo{font-size:13pt;letter-spacing: 2pt;}
		.descripcion{font-size:12pt;}
		#submenu2 {display: none;}
		#submenu3 {display: none;}
		#submenu1 {width: 70%;}
		#submenu8,#submenu_llamar {width: 8%;min-width: 0px;}
		#submenu11 {width: 10%;min-width: 0px;border:none;}
		#submenu12 {width: 2%;}
		#ver_mas {display:none;}
		#img_mas {width: 90%;}
		.genero{width:19.5%;}
		#filtro_ella{width:30%;}
		#filtro_el{width:30%;}
		input, textarea{width:90%;margin-left:5%;margin-right:5%}
}

@media screen and (max-width: 350px){
		.titulo{font-size:18pt;margin-top: 10px;}
		.subtitulo{font-size:11pt;letter-spacing: 1pt;margin-top: 10px;}
		.descripcion{font-size:10pt;margin-top: 10px;}
		.filtro{width:90%;left:5%;}
		.genero{width:9.5%;}
		#filtro_ella{width:40%;}
		#filtro_el{width:40%;}
}

@media screen and (max-height: 350px){
		.portada{margin-top: 100px;}
		.titulo{font-size:18pt;margin-top: 10px;}
		.subtitulo{font-size:11pt;letter-spacing: 1pt;margin-top: 10px;}
		.descripcion{font-size:10pt;margin-top: 10px;}
}

@media screen and (orientation: landscape){
		.img_pc{display: block;}
		.img_tablet{display: none;}
		.img_phone{display: none;}
}