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

@font-face {
    font-family: 'AsapRegular';
    src: url('../fonts/asap-regular-webfont.eot');
    src: url('../fonts/asap-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/asap-regular-webfont.woff') format('woff'),
         url('../fonts/asap-regular-webfont.ttf') format('truetype'),
         url('../fonts/asap-regular-webfont.svg#AsapRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ESTILOS GENERALES */
body{
	width:960px;
	height:auto;
	overflow:auto;
	margin-left:auto;
	margin-right:auto;
	padding:0px;
	background-color:#FFF;
	font-family:'AsapRegular', arial, helvetica;
	font-size:12px;
	color:#626262;
}

#wrap{
	width:960px;
	height:auto;
	overflow:hidden;
	background-color:#fff;
}

header{
	width:960px;
	height:160px;
}

#logo{
	width:960px;
	height:160px;
}

nav{
	width:960px;
	height:30px;
	margin-top:-30px;
	margin-bottom:20px;
	background-color:#FA4922;
	float:left;
	box-shadow:0px 4px 6px rgba(0,0,0,0.5);
	
}

p{
	font-size:13px;
	color:#464646;
	line-height:21px;
}

p.home{
	font-size:12px;
	line-height:20px;
	padding:0px 5px;
	color:#000;
	margin-bottom:20px;
}

p.importante{
	font-size:16px;
	text-shadow:1px 1px 1px #000;
	margin:10px;
	color:#FFF;
	line-height:22px;
}

.siguenos{
	float:right;
	line-height:30px;
	color:#FFF;
	padding:0px;
	margin-right:10px;
}

.siguenos img{
	float:right;
	margin-top:3px;
	margin-right:0px;
}

.siguenos a{
	background:#FA4922;
	float:right;
}

.siguenos:hover{
	background-color:#FA4922;
	text-shadow:1px 1px 1px #333;
	text-decoration:none;
}

p.consejos{
	font-size:12px;
	line-height:18px;
}

/* ESTILOS DE TITULOS */

h1{
	font-size:15px;
	padding:0px 15px;
	line-height:22px;
	color:#FFF;
	background-image:url(../../../Todo/Fernando/Colors4u/Respaldo%20web%20C4u/Version%20online%2027Jul13/img/titulocolumnas.gif);
	font-weight:lighter;
	font-family:'AsapRegular', arial;
}

h2{
	font-size:18px;
	color:#6EA924;
	font-weight:lighter;
	font-family:'AsapRegular', arial;
	line-height:22px;
	vertical-align:top;
}

h3{
	font-size:18px;
	color:#261b17;
	text-shadow:2px 2px 3px #000; /* X,Y,BLUR,COLOR */
}

h4{
	font-size:18px;
	color:#0988b2;
	padding:0px 15px;
	background-color:rgba(238,210,0,1);
	line-height:60px;
	width:560px;
	border-radius:5px; /* para darles los bordes redondeados */
	-ms-border-radius:5px; /* EXPLORER */
	-moz-border-radius:5px; /* FIREFOX */
	-webkit-border-radius:5px; /* CHROME + SARAFI */
	-o-border-radius:5px; /* OPERA */
	box-shadow:0px 1px 3px #000;
	font-weight:100;
}

h5{
	font-size:14px;
	color:#000;
	font-weight:lighter;
	font-family:'AsapRegular', arial;
}

/* ESTRUCTURA DE BANNER */
#slider-wraper{
	width:960px;
	height:290px;
	margin-top:0px;
}

#slider{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

.theme-default #slider {
    margin:0px auto 0 auto;
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
    margin-top:0px;
}

/*ESTRUCTURA DE CONTENEDOR*/
#content{
	width:100%;
	height:auto;
	overflow:hidden;
	margin-top:30px;
	background:url(../../../Todo/Fernando/Colors4u/Respaldo%20web%20C4u/Version%20online%2027Jul13/img/llamitas.png) no-repeat right bottom;
}

/* ESTRCUTURAS CENTRALES */
section{
	width:100%;
	background:rgba(255,255,255,0);
	height:auto;
	overflow:hidden;
	float:left;
}

section.interiores{
	width:560px;
	height:auto;
	overflow:hidden;
	float:left;
	padding:10px 40px 0px 40px;
	border-right:dotted 1px #CCCCCC;
}

article{
	width:540px;
	padding:15px 10px 0px 10px;
	float:left;
}

/*ESTRUCTURAS LATERALES*/

aside{
	width:300px;
	float:right;
	height:auto;
	overflow:hidden;
}

aside p{
	margin:10px 35px 20px 20px;
	font-size:13px;
	color:#464646;
	line-height:23px;
	text-align:center;
}

mark{
	font-size:18px;
	background-color:#FFF;
	font-weight:200;
}

/* CLASES PARA LOS ARTICULOS */
article.homeDerecha,article.homeCentro,article.homeIzquierda{
	width:290px;
	padding:10px;
	background:rgba(255,255,255,0.2);
	height:auto;
	overflow:hidden;
}

article.homeIzquierda{
	float:left;
	margin-right:15px;
	margin-bottom:15px;
}

article.homeCentro{
	position:absolute;
	margin-left:325px;
}

article.homeDerecha{
	float:right;
	margin-bottom:15px;
}

article.dosColumnas,article.tresColumnas{		
	column-gap:50px; /* separacion entre columnas */
	-o-column-gap:50px;
	-ms-column-gap:50px;
	-moz-column-gap:50px;
	-webkit-column-gap:50px;
}

article.dosColumnas{
	height:auto;
	column-count:2; /* separacion en 2 columnas */
	-webkit-column-count:2; /* safari,chrome */
	-moz-column-count:2;	 /* firefox */
	-o-column-count:2;  /* opera */
	-ms-column-count:2;  /* Explorer */
}

article.tresColumnas{
	column-count:3; /* separacion en 3 columnas */
	-webkit-column-count:3; /* safari,chrome */
	-moz-column-count:3;	 /* firefox */
	-o-column-count:3;  /* opera */
	-ms-column-count:3;  /* Explorer */	
}

article.lateralizq{ 
   width: 200px;
   height:auto;
   padding:10px;
   float:left;
   overflow:hidden;
} 
article.lateralderecho{ 
   width: 310px;
   height:auto;
   padding:10px 0px 10px 10px;
   float:right;
}

article img.home{
	float:center;
	margin:20px 0px;
	box-shadow:0px 1px 3px #000;
}

article.testimonios{
	width:540px;
	padding:15px 10px 0px 10px;
	float:left;
	border-top:dotted 1px #666666;
}

/*  ELEMENTOS DEL FORMULARIO*/
#form{
	width:540px;
	height:auto;
	margin-bottom:15px;
	column-count:2; /* separacion en 2 columnas */
	-webkit-column-count:2; /* safari,chrome */
	-moz-column-count:2;	 /* firefox */
	-o-column-count:2;  /* opera */
	-ms-column-count:2;  /* Explorer */
}

#form label{
	display:block; /* con esto ayudo a que cada texto mande los imputs hacia abajo */
	margin:5px 0px; /* le doy separacion a los textos */
}

#form input{
	width:220px;
	height:15px;
	padding:5px 15px;
	margin:10px;
	border:solid 1px #000000;
	border-radius:7px;
	-ms-border-radius:7px;
	-o-border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
}

#form textarea[name="comentarios"]{
	font-family:'AsapRegular', Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:15px;
	width:220px;
	height:137px;
	padding:5px 15px;
	margin:24px 10px 10px 10px;
	color:#000;
	border:solid 1px #000000;
	border-radius:7px;
	-ms-border-radius:7px;
	-o-border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
}

#form input[type="submit"]{
	width:80px;
	height:25px;
	color:#FFF;
	border:none;
	background-color:#FA4922;
	text-align:center;
	margin-top:10px;
	margin-left:90px;
	line-height:30px
	cursor:pointer; /*propiedad para simular la mano que viene con el boton */	
}

#form input[type="submit"]:hover{
	text-shadow:1px 1px 1px #333;
	color:#fff;
	background:#E30000;	
}

#form.campo{
	border: solid 1px #000000;
	padding: 0.3em;
}

#form.error {
	border: solid 1px #000000;
	padding: 0.3em;
}

#form.com {
	border: solid 1px #000000;
	padding: 0.3em;
	width:20em;
	height: 10em;
}

#form .com-error {
	border: solid 1px #000000;
	padding: 0.3em;
	width:20em;
	height: 10em;}

/*  ELEMENTOS DEL FORMULARIO DE TESTIMONIOS*/
form.blog{
	width:270px;
	height:auto;
	margin-bottom:15px;
	column-count:1;
	-webkit-column-count:1; /* safari,chrome */
	-moz-column-count:1;	 /* firefox */
	-o-column-count:1;  /* opera */
	-ms-column-count:1;  /* Explorer */
}

form.blog label{
	display:block; /* con esto ayudo a que cada texto mande los imputs hacia abajo */
	margin:5px 0px; /* le doy separacion a los textos */
}

form.blog input{
	width:270px;
	height:15px;
	padding:5px 15px;
	margin:10px;
	border:solid 1px #000000;
	border-radius:7px;
	-ms-border-radius:7px;
	-o-border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
}

form.blog textarea[name="comentario"]{
	font-family:'AsapRegular', Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:15px;
	width:270px;
	height:110px;
	padding:5px 15px;
	margin:10px;
	color:#000;
	border:solid 1px #000000;
	border-radius:7px;
	-ms-border-radius:7px;
	-o-border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	r
}

form.blog input[type="submit"]{
	width:80px;
	height:25px;
	color:#FFF;
	border:none;
	background-color:#FA4922;
	text-align:center;
	margin-top:10px;
	margin-left:115px;
	line-height:30px
	cursor:pointer; /*propiedad para simular la mano que viene con el boton */	
}

form.blog input[type="submit"]:hover{
	text-shadow:1px 1px 1px #333;
	color:#fff;
	background:#E30000;
	text-shadow:1px 1px 1px #333;	
}

/* estilos de menu desplegable */
nav ul{
	height:30px;
	list-style:none;
	margin:0px;
	padding:0px;
}

nav ul li{
	float:left;
	padding:0px;
}

nav ul li a{
	font-size:13px;
	color:#FFF;
	display:block;
	line-height:30px;
	margin:0px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
}

nav ul li a:hover{
	color:#fff;
	background:#E30000;
	text-shadow:1px 1px 1px #333;
}

nav ul li a.current{
	font-size:13px;
	color:#FFF;
	display:block;
	line-height:30px;
	margin:0px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
	background:#E30000;
	text-shadow:1px 1px 1px #333;
}

/* LISTAS y LINEAS de SUB-MENU */

.hacemos{
	width:129px;
}

.inspirate{
	width:99px;
}

nav li ul{
	background:rgba(227,0,0,0.8);
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	z-index:100;
}

nav li:hover ul{
	display:block;
}

nav li li{
	display:block;
	margin:0px;
}

nav li:hover li a{
	background:none;
}

nav li ul a{
	display:block;
	height:30px;
	font-size:12px;
	margin:0px;
	text-align:center;
	border-bottom:#6e0000 dotted 1px;
}

nav li ul a:hover{
	background:rgba(150,0,0,0.7);
	text-shadow:1px 1px 1px #000;
}

iframe{
	margin-bottom:30px;
}

/*ESTILOS DEL FOOTER*/

#footer{
	width:960px;
	height:50px;
	background-image:url(../../../Todo/Fernando/Colors4u/Respaldo%20web%20C4u/Version%20online%2027Jul13/img/fondofooter.gif);
	padding:0px;
	margin-bottom:10px;
	margin-top:-4px;
}

#footer img{
	margin:10px 5px;
}

p.footer{
	font-size:12px;
	font-family:'AsapRegular', arial, helvetica;
	line-height:70px;
	position:absolute;
	margin-left:250px;
	color:#000;
}

p.footerizq{
	font-size:12px;
	float:right;
	font-family:'AsapRegular', arial, helvetica;
	line-height:70px;
	position:absolute;
	margin-left:800px;
	margin-right:20px;
	color:#000;
}

#linkheader{
	margin-top:0px;
	margin-left:0px;
	width:350px;
	height:120px;
	position:absolute;
	cursor:auto;
	z-index:1000;
}