@charset "utf-8";
/* CSS Document */
@font-face
{
 font-family:"Gravity Book";
 src:url(../pictures/font/Gravity-Book.ttf);
}
@font-face
{
 font-family:"Gravity Light";
 src:url(../pictures/font/Gravity-Light.ttf);
}


dl{ width: 60px; float:left;}
		dt, dd{ padding:5px 0px;  color:#fff;}
		dt{ background: #1B1B20; color:#fff; cursor: pointer; }
		dd{ background: #1B1B20; display: none; line-height: 1.6em;  }
		dt.activo, dt:hover{ background: #1B1B20;  }

		dt:before{ content: ""; margin-right: 10px;}
		dt.activo:before{ content: ""; font-family:"Neutra Text Alt"; }
		.li{ width:100%; height:50px; background:#1B1B20;}
		.la{ font-size:16px; color:#FFF; margin-top:17px; text-align:center;} 
.le{ font-size:16px; color:#FFF; text-align:center; margin-top:17px; text-decoration:none;} 
.mundo{ float:left; margin-top:5px; margin-left:20px;}
.cinta{ margin-left:210px; margin-top:-50px; color:#fff;}
.mundo1{ width:230px; margin-left:205px; margin-top:-37px; background:#1B1B20;}
.cinta1{ width:70px; background:#1B1B20; margin-left:152px; padding:5px 5px; text-decoration:none;}
body
{
 font-family:"Gravity Book";
}
*{
	margin: 0;
	padding: 0;
}

#aside{
	width:100%; height:auto;  }
.contorno123{ width:100%; height:auto;}
.producto1{width:33.3%; height:900px; float:left;position:static; }
#imagesp1{ width:416px; height:491px; background:url(../pictures/images%202-01.jpg); max-width:100%;}
.producto2{width:33.4%; height:900px;margin:auto; }
#imagesp2{ width:416px; height:491px; background:url(../pictures/images%202-02.png);max-width:100%;}
.producto3{width:33.3%; height:900px;  float:right;position:static; }
#imagesp3{ width:416px; height:491px; background:url(../pictures/images%202-04.jpg);max-width:100%;}
.clase{padding:20px 40px; text-align:justify;}
.letrak{font-size:35px; padding:30px 10px;}

#info{
	overflow:hidden;
	position:absolute;
	width:30.9%;
	height:491px;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	background:#1B1B1B;
	opacity:0;}
#imagesp1:hover #info{
	opacity:0.8;}
	
p#headline2{
	font-size:40px;
	width:auto;
	margin:auto;
	color:#FFF;
	-webkit-transition: margin 0.5s;
	text-align:center;
	margin-top:0px;}
#imagesp1:hover p#headline2{
	margin-top:400px;font-size:40px;width:100%;}
.h2{font-family:"Gravity Light"; font-size:35px; text-align:center; color:#FFF; width:100%;}


#imagesp2:hover #info{
	opacity:0.8;
	}
	
p#headline2{
	font-size:40px;
	width:auto;
	margin:auto;
	color:#FFF;
	-webkit-transition: margin 0.5s;
	text-align:center;
	margin-top:0px;}
#imagesp2:hover p#headline2{
	margin-top:400px;font-size:40px;width:100%; }
	

#imagesp3:hover #info{
	opacity:0.8;}
	
p#headline2{
	font-size:40px;
	width:auto;
	margin:auto;
	color:#FFF;
	-webkit-transition: margin 0.5s;
	text-align:center;
	margin-top:0px;}
#imagesp3:hover p#headline2{
	margin-top:400px;font-size:40px;width:100%;}
	
#letraw123{ width:100%; height:100px;}
.l1234{
	width:20%; height:100px; float:right; padding:40px 30px; }
.l123{
	width:auto; height:100px; padding:30px 0px; font-size:50px; font-family:"Gravity Light"; }
.in{font-size:22px; font-family:"Gravity Book"; color:#000; height:30px; }
.ladoone{
	width:25%;
	height:auto;
	float:left;
	position:static;

	}
.ladotwo{
	width:40%;
	height:auto;
	margin:auto;
	
	}
.ladotree{
	width:35%;
	height:auto;
	float:right;
	position:static;

	}
#cuerpoprincipal123{
	width:100%;
	height:auto;
	background:#1D1D1D;
}
.largo1{
	width:100%;
	background-color:#343F45;
	height:1px;
	border-style:solid;
	border-width:0.5px;
	border-color:#343F45;
}
#ver1{
	width:35px;
	height:35px;
	 margin-left:180px;
	 background:url(../pictures/iconos/flecha%20blano%20y%20negro-01.png);
	  -webkit-filter: grayscale(100%);  /* Efecto Blanco y negro*/
border-radius: 2px;  /* Pequeño borde en las imagenes*/
-webkit-transition: all 0.5s ease;  /* Efecto suavizado para diferentes navegadores*/
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;  /* Fin del Efecto suavizado para diferentes navegadores*/
}
#ver1:hover{
width:35px;
	height:35px;
	 margin-left:180px; 
	 background:url(../pictures/iconos/flechaas-01-01.png);
	border-radius: 100%;   /* Nos hace la imagen en circulo*/
 -webkit-filter: grayscale(0%);   /* Quita el efecto Blanco y Negro*/ 
-webkit-transform: rotate(360deg);   /* Giro que da antes de transformase en circulo para varios navegadores*/
-moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);   /* Fin del Giro para diferentes navegadores*/
}
#ver2{
	width:35px;
	height:35px;
	 margin-left:180px; margin-top:-25px;
	 background:url(../pictures/iconos/flecha%20blano%20y%20negro-01.png);
	  -webkit-filter: grayscale(100%);  /* Efecto Blanco y negro*/
border-radius: 2px;  /* Pequeño borde en las imagenes*/
-webkit-transition: all 0.5s ease;  /* Efecto suavizado para diferentes navegadores*/
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;  /* Fin del Efecto suavizado para diferentes navegadores*/
}
#ver2:hover{
width:35px;
	height:35px;
	 margin-left:180px; 
	 background:url(../pictures/iconos/flechaas-01-01.png);
	border-radius: 100%;   /* Nos hace la imagen en circulo*/
 -webkit-filter: grayscale(0%);   /* Quita el efecto Blanco y Negro*/ 
-webkit-transform: rotate(360deg);   /* Giro que da antes de transformase en circulo para varios navegadores*/
-moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);   /* Fin del Giro para diferentes navegadores*/
}
.lec{color:#FFF;}
.wrapperh{
	width:100%;
	max-width:1250px;
	margin:auto;
	overflow:hidden;
	height:auto;
}
.atras{ width:auto; height:30px; float:right; background:#F00; margin-top:10px;} 
.in{font-size:22px; font-family:"Gravity Book"; color:#000; height:auto; }
.wrapperbanner {
	width:100%;
	max-width:1000px;
	margin:auto;
	overflow:hidden;
	margin-right:50px;
}
.footer1{
	width:auto; height:40px;}
.footer2{
	width:200px; height:auto; float:right; padding:5px 5px; margin-right:42px;}
.footer3{width:250px; height:40px; float:right;
}

.foo{ width:100px; height:30px; background:url(../pictures/ovalos-02.png); margin-top:5px; margin-left:40px;}
.foo1{ width:100px; height:30px; background:url(../pictures/ovalos-01.png); float:right;margin-top:5px;}

.foo:hover{  background:url(../pictures/iconos/fa.png);}
.foo1:hover{ background:url(../pictures/iconos/you.png);}
.lec{color:#FFF; text-decoration:none; font-size:13px;}
.lec1{color:#FFF; font-size:12px; margin-right:10px;}
.lec3{color:#FFF; font-size:12px; margin-right:10px; }
.lec2{color:#FFF; font-size:12px; margin-right:10px; float:left; padding:5px 5px;margin-top:18px;}
.desing{
	width:auto;
	height:auto;
	float:left;
	margin-left:40px;
	color:#FFF;
	padding:10px 5px;
	font-size:12px;
	
}
.letrafooter{
	color:#FFF;
	font-size:12px;
	padding:15px 10px;}