@charset "utf-8";
/* ESTILOS TRABAJA DESDE CASA */

header, nav, section, article, aside, figure, footer{
	display:block;
	margin:0;	
}
a img{
	border:none;
}
.limpiar{
	clear:both;
}

p, h1, h2,h3,ul,li{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	margin:0;
	padding:0;
	color:#192719;
}


body{
	background:url(../imagenes/fondo-hemorrhoid.png) no-repeat left top #73a52c;
}

@font-face{
    font-family: letraLogo;
    src: url("../fuentes/Impact.eot");
}

@font-face{
	font-family:letraLogo;
	src:url(../fuentes/impact.ttf);
}



/*---Maquetacion---*/

#cuerpo{
	width:1000px;
	margin:0 auto;
	padding-top:50px;
}

/*---Cabecera---*/

#superior{
	height:90px;
}

.titulo-web{
	width:562px;
	line-height:90px;
	display:block;
	font-family:"letraLogo",Arial, Helvetica, sans-serif;
	font-size:48px;
	text-align:center;
	font-weight:normal;
	float:left;
	margin-right:17px;
	background:#192719;
	color:#FFF;

}

#sociales{
	width:391px;
	height:60px;
	display:block;
	float:left;
	padding:15px;
	background:#e0e0e0;
}

#sociales ul{
	margin:0;
	padding:0;
	list-style:none;
	}

#sociales li{
	float:right;
}

#sociales li a{
	width:10px;
	line-height:22px;
	display:block;
	margin-left:15px;
	text-indent:-8000px;
	background:url(../imagenes/icoface.png);
	transition:all 0.3s;
	-moz-transition:-moz-all 0.3s;
	-o-transition:-o-all 0.3s;
	-ms-transition:-ms-all 0.3s;
	-webkit-transition:-webkit-all 0.3s;
}

#sociales li a.twitter{
	width:14px;
	height:19px;
	background:url(../imagenes/icotwit.png);
}

#sociales li a.youtube{
	width:23px;
	height:22px;
	background:url(../imagenes/icoyoutube.png);
}

#sociales li a.googleplus{
	width:23px;
	height:20px;
	background:url(../imagenes/icogoogleplus.png);
}

#sociales li a.blog{
	width:23px;
	height:20px;
	background:url(../imagenes/icoblog.png);
}

#sociales li a:hover{
	opacity:0.4;
}

/*---Desplegable---*/

#top-desplegable{
	width:205px;
	float:left;
}

#top-desplegable ul{
	margin:0;
	padding:0;
	list-style:none;
}

#top-desplegable li{
	float:left;
	position:relative;
	display:inline-block;
	line-height: 1;

}

#top-desplegable li a{
	width:205px;
	line-height:32px;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
 	font-size:16px;
 	text-align:center;
	color:#192719;
	border:1px solid #192719;
	background:none;
	text-indent:0;
	margin:0;
	font-weight:bold;
}

#top-desplegable li ul{
	 position:absolute;
	 list-style:none;
	 text-align:center;
	 max-height:0px;
	 overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	 -moz-transition:max-height 0.4s linear;
	 transition:max-height 0.4s linear;
	 z-index:10;
	 
}

#top-desplegable li:hover ul{
	 max-height:500px;
}

#top-desplegable li ul li a{
	 line-height:20px;
	 height:40px;
	 padding:5px 0 ;
	 color:#e0e0e0;
	 background:#41581d;
	 border:1px solid #e0e0e0;
}

/*---botonera---*/

nav{
	max-width:98%;
	padding:1%;
	margin:20px 0;
	background-color:#192719;
}

nav a{
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	color:#FFF;
	text-decoration:none;
	display:inline-block;
	margin: 8px 5px;
}

nav a:first-child{
	padding:5px 8px;
	color:#192719;
	background-color:#E0E0E0;
	margin:0 5px;
	font-size:12px;
	
}

nav a:hover, nav a:active{
	text-decoration:underline; 
}

nav a:first-child:hover, nav a:first-child:active{
	color:#E0E0E0;
	background-color:#192719;
	text-decoration:none;
}

nav span:after{
	content:"|";
}

nav span:last-child:after{
	content:"";
}

/*---Slide---*/

#slide{
	height:350px;
	margin:25px 0;
}

/*---Contenido---*/

.texto-768{
	display:none;
}

#col-iz{
	width:680px;
	float:left;
	margin-right:20px;
}

.texto-presentacion{
	display:block;
	background:#b2f74c;
	color:#192719;
	text-align:justify;
	padding:14px 20px;
	font-family:"letraLogo",Arial, Helvetica, sans-serif;
	font-size:30px;
	font-weight:normal;
	margin-bottom:10px;
}

.producto{
	width:220px;
	height:422px;
	margin:0 10px 25px 0;
	float:left;
	background:#b2f74c;
	position:relative;
}

.star{
	width:61px;
	height:57px;
	background-image:url(../imagenes/star.png);
	position:absolute;
	right:0;
}

.tit-producto{
	height:47px;
	display:block;
	text-align:center;
	font-family:"letraLogo",Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:normal;
	color:#fff;
	background:#192719;
	padding:10px 15px;
	letter-spacing:1px;
}

.det-producto{
	height:95px;
	display:block;
	padding:10px;
	
}

.boton-producto{
	width:84px;
	line-height:35px;
	display:block;
	text-align:center;
	font-family:"letraLogo",Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
	color:#192719;
	text-decoration:none;
	background:#e0e0e0;
	margin-left:10px;
	letter-spacing:1px;
	transition:all 0.4s;
	-moz-transition:-moz-all 0.4s;
	-o-transition:-o-all 0.4s;
	-ms-transition:-ms-all 0.4s;
	-webkit-transition:-webkit-all 0.4s;
}

.boton-producto:hover{
	color:#e0e0e0;
	background:#192719;
}

#col-der{
	width:300px;
	float:left;

}

/*---buscar---*/

.buscar{
	width:100%;
	padding:10px 0;
	margin-bottom:15px;
	background:#CCC;
	text-align:center;
}

.caja-texto-search{
	width: 70%;
	height: 20px;
	font-size: 14px;
	color: #666666;
}

.boton-search{
	font-size: 14px;
	background: #192719;
	padding: 5px 7px;
	color: #fff;
	cursor:pointer;
}

.boton-search:hover{
	color: #b2f74c;
}

/*---FIN buscar---*/

.boton-favoritos{
	width:100%;
	line-height:44px;
	display:block;
	font-family:"letraLogo",Arial, Helvetica, sans-serif;
	font-size:21px;
	font-weight:normal;
	text-decoration:none;
	color:#FFF;
	text-align:center;
	margin-bottom:15px;
	background:#41581d;
	transition:all 0.4s;
	-moz-transition:-moz-all 0.4s;
	-o-transition:-o-all 0.4s;
	-ms-transition:-ms-all 0.4s;
	-webkit-transition:-webkit-all 0.4s;
}

.boton-favoritos:hover{
	color:#41581d;
	background:#FFF;
}

/*---sellos---*/
	
#sellos{
	width:100%;
	text-align:center;
}
	
#sellos img{
	margin-right:20px;
}


/*---Pie---*/
	
#pie{
	border-top:1px solid #41581d;
	padding:10px 30px;
	margin-top:60px;
}
	
.texto-verde{
	color:#41581d;
}

.texto-blanco{
	color:#FFF;
}


/******************************************/
/***    DISEÑO PARA TABLETAS           ****/
/******************************************/
@media only screen and (max-width:768px){
	
	/*---Maquetacion---*/

	#cuerpo{
		width:750px;
	}
	
	/*---Cabecera---*/

	#superior{
		height:70px;
	}
	
	.titulo-web{
		width:456px;
		line-height:70px;
		font-size:40px;
		margin-right:20px;
	}
	
	#sociales{
		width:244px;
		height:40px;
		float:left;
		padding:15px;
	}
	
	
	/*---Desplegable---*/

	#top-desplegable{
		width:205px;
		float:right;
		margin-top:5px;
	}
	
	#top-desplegable li a{
		width:205px;
		line-height:20px;
		font-size:14px;
		font-weight:normal;
	}
	
	#top-desplegable li ul li a{
		 line-height:20px;
		 height:35px;
		 padding:5px 0 ;
	}

	
	/*---Slide---*/

	#slide{
		width:100%;
		height:auto;
		margin:20px 0;
	}
	
	#slide img{
		width:100%;
		height:auto;
	}
	
	/*---Contenido---*/

	.texto-768{
		width:90%;
		display:block;
		background:#b2f74c;
		color:#192719;
		text-align:justify;
		padding:14px 5%;
		font-family:"letraLogo",Arial, Helvetica, sans-serif;
		font-size:30px;
		font-weight:normal;
		margin-bottom:10px;
	}
	
	#col-iz{
		width:430px;
	}
	
	.texto-presentacion{
		display:none;
	}
	
	.producto{
		width:210px;
		height:400px;
		margin:0 0 10px 10px;
	}
	
	.producto img{
		width:100%;
		height:auto;
	}
	
	.tit-producto{
		height:43px;
		font-size:16px;
	}
	
	.det-producto{
		font-size:13px;
		height:90px;
		display:block;
		padding:10px;
		
	}
	
	
	
}
/******************************************/
/***    DISEÑO PARA MOVILES 480        ****/
/******************************************/
@media only screen and (max-width:480px){
	
	body{
		background:url(../imagenes/fondo-hemorrhoid.png) no-repeat left top #73a52c;
	}
	
	/*---Maquetacion---*/

	#cuerpo{
		width:460px;
	}
	
	/*---Cabecera---*/
	
	#superior{
		height:auto;

	}
	
	.titulo-web{
		width:100%;
		font-size:36px;
		float:none;
		margin-right:0;
		margin-bottom:10px;
	}
	
	#sociales{
		margin:0;
		padding:7px 35% 0 0; 
		width:65%;
		height:auto;
		
	}
	
	/*---Desplegable---*/

	#top-desplegable{
		display:none;
	}
	
	/*---Slide---*/

	#slide{
		margin:15px 0;
	}
	
	/*---Contenido---*/

	.texto-768{
		width:94%;
		padding:10px 3%;
		font-size:21px;
		margin-bottom:10px;
	}
	
	#col-iz{
		width:100%;
		float:none;
		margin-right:0;
	}
	
	.producto{
		width:100%;
		height:auto;
		margin:10px 0;
		float:none;
		padding-bottom:20px;
	}
	
	.tit-producto{
		height:auto;

	}
	
	.det-producto{
		height:auto;
		display:block;
		padding:10px;
		
	}
	
	
	#col-der{
		width:100%;
		float:none;
	
	}
	
	.boton-favoritos{
		line-height:30px;
		font-size:17px;
	}
	
	.boton-favoritos img{
		width:16px;
		height:auto;
	}
	
	/*---sellos---*/
	
	#sellos img{
		height:60px;
		width:auto;
	}
	
	/*---Pie---*/
	
	#pie{
		text-align:center;
		font-size:12px;
	}
	
}
/******************************************/
/***    DISEÑO PARA MOVILES 320        ****/
/******************************************/
@media only screen and (max-width:320px){
	body{
		margin:0;
		padding:0;
		background:#73a52c;
	}
	
	/*---Maquetacion---*/

	#cuerpo{
		padding:0;
		width:310px;
	}
	
	
	/*---Cabecera---*/
	
	.titulo-web{
		font-size:25px;
	}
	
	#sociales{
		padding:5px 25% 0 0; 
		width:75%;
		height:auto;
	}
	
	/*---Contenido---*/

	.texto-768{
		width:96%;
		height:auto;
		padding:8px 2%;
		font-size:18px;
	}
	
	

}
/******************************************/
/***    DISEÑO PARA MOVILES 240        ****/
/******************************************/
@media only screen and (max-width:240px){
	/*---Maquetacion---*/

	#cuerpo{
		width:230px;
	}

	/*---Cabecera---*/
	
	.titulo-web{
		font-size:20px;
	}
	
	#sociales{
		padding:5px 18% 0 0; 
		width:82%;
		height:auto;
	}
	
	/*---Pie---*/
	
	#pie{
		padding:0;
	}
	
	#pie p{
		font-size:12px;
	}
}