@charset "UTF-8";
/* CSS document */
/* Descripcion: estilo para Estopa
Autor: Omar De Luna
actualización: agosto 2011 */



img{
	border:0;
	outline:0;
	margin:0;
	padding:0;
	}



* { margin: 0; padding: 0; }

#wrapper {
	width: 100%;
	margin: auto;
	background:#fff;
	position:relative;
	}
	
#lateral{
	width:227px;
	background:#e6e7e8;
	height:100%;
	position:fixed;
	left:0;
	}
	
ul#menu{
	width:227px;
	}
	
ul#menu{
	list-style:none;
	margin-top:5px;
	}
	
#menu li{
	height:37px;
	background:#d1d2d4;
	margin-bottom:5px;
	cursor:pointer;
	}
	
#menu li a:hover{
	background:#6d6e70;
	color:#fff;
	}
	
#menu li a.active{
	background:#6d6e70;
	color:#fff;
	}
	
#menu li a{
	padding:0 20px;
	line-height:37px;
	color:#404041;
	font-family: American Typewriter, ITC American Typewriter, 'Stint Ultra Expanded', Helvetica, Arial, Verdana, sans-serif;
	display:block;
	}

#direccion{
	width:197px;
	height:100px;
	background:#a7a9ab;
	padding:20px 15px;
	}
	
#contac{
	width:197px;
	height:100px;
	background:#9d9fa1;
	padding:20px 15px;
	}
	
#lateral2{
	width:177px;
	background:#fff;
	height:100%;
	position:fixed;
	left:227px;
	border-right:solid 5px #e23226;
	padding:40px 25px;
	overflow-x:hidden;
	overflow-y:auto;
	}


#container {
	width:77%;
	position:fixed;
	background:#f1f2f2;
	left:459px;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	}
	
#slide{
	width:100%;
	background:#000;
	border-bottom:2px solid #000;
	position:relative;
	}
	
#info{
	padding:40px;
	position:absolute;
	width:90%;
	padding-top:33%;
	}
	
#info2{
	position:absolute;
	width:99%;
	padding-top:29%;
	}

#info3{
	padding:40px;
	position:absolute;
	width:90%;
	padding-top:47%;
	}
	

p {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	color: #333;
	line-height: 17px;
}


p.blanco {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	color: #fff;
	line-height: 17px;
}

p.rojo {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	color: #c7161d;
	line-height: 20px;
}




h1 {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 28px;
	color: #000;
	line-height:30px;
	font-weight: 300;
	font-style:normal;
	padding-bottom: 30px;
}

h1.blanco {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 30px;
	color: #fff;
	line-height:33px;
	font-weight: lighter;
	padding: 0 20px 0 0;
	letter-spacing:2px;
	font-style:normal;
}


h2 {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 17px;
	color: #e23226;
	line-height:21px;
	font-weight: lighter;
}


h3 {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 18px;
	color: #000;
	line-height:23px;
	font-weight: lighter;
	letter-spacing:1px;
}

h4 {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 22px;
	color: #fff;
	line-height:28px;
	font-weight: lighter;
	padding-bottom:15px;
	border-bottom: 1px solid #fff;
	margin-bottom:15px;
	letter-spacing:2px;
}

h5 {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 22px;
	color: #000;
	line-height:28px;
	font-weight: lighter;
	padding-bottom:15px;
	border-bottom: 1px solid #000;
	margin-bottom:15px;
	letter-spacing:2px;
}


a {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	color: #000;
	line-height: 18px;
	text-decoration: none;
}

a:hover {
	color: red;
}


a.grande{
	font-size:30px;}
	
a.blanco{
	color:#fff;}

.cleare {
	display: block;
	clear: both;
}



.campo2 {
	width: 240px;
	height: 35px;
	background: #58585b;
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	color: #fff;
	border: 0;
	padding:5px;
	margin-bottom:10px;
	outline:none;
}

.campo2:focus{
	background:#000;
	color:#fff;
	}



#footer {
	width:970px;
	height:42px;
	background:url(images/cuadros.jpg) top right no-repeat #e21a23;
	border-top:solid 6px #c2151c;
}


#footer p {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 13px;
	color: #fff;
	padding:10px 0 0 40px;
}


#footer a {
	font-family: 'Abel', Helvetica, Arial, Verdana, sans-serif;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
}


#footer a:hover {
	color: #000;
}




@media only screen and (min-width:1024px) and (max-width:1280px){
	
	#container {
	width:65%;
	position:fixed;
	background:#f1f2f2;
	left:459px;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	}
		
#info{
	padding:40px;
	position:absolute;
	width:80%;
	padding-top:33%;
	}
	
	#info3{
	padding:40px;
	position:absolute;
	width:80%;
	padding-top:47%;
	}
	
	
	
	}
	
@media only screen and (min-width:1281px) and (max-width:1650px){
	
	#container {
	width:75%;
	position:fixed;
	background:#f1f2f2;
	left:459px;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	}
		
#info{
	padding:40px;
	position:absolute;
	width:90%;
	padding-top:33%;
	}
	
	#info2{
	position:absolute;
	width:97%;
	padding-top:29%;
	}
	
	}
	
	
@media only screen and (min-width:1921px) and (max-width:3000px){
	
	#container {
	width:81%;
	position:fixed;
	background:#f1f2f2;
	left:459px;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	}
		
#info{
	padding:40px;
	position:absolute;
	width:90%;
	padding-top:33%;
	}
	
	}
	
	
	


@media only screen and (min-width:300px) and (max-width:768px){
	
	.quitar{
		display:none;}
	
	#wrapper {
	width: 100%;
	margin: auto;
	background:#fff;
	position:relative;
	}
	
#lateral{
	width:100%;
	background:#e23226;
	height:183px;
	position:relative;
	top:0;
	}
	
#lateral img{
	float:left;}
	
ul#menu{
	width:100%;
	}
	
ul#menu{
	list-style:none;
	margin-top:5px;
	float:left;
	}
	
#menu li{
	height:37px;
	background:#d1d2d4;
	margin-bottom:5px;
	cursor:pointer;
	}
	
#menu li a:hover{
	background:#6d6e70;
	color:#fff;
	}
	
#menu li a.active{
	background:#6d6e70;
	color:#fff;
	}
	
#menu li a{
	padding:0 10px;
	line-height:37px;
	color:#404041;
	font-family: American Typewriter, ITC American Typewriter, 'Stint Ultra Expanded', Helvetica, Arial, Verdana, sans-serif;
	display:block;
	font-size:11px;
	}

#direccion{
	width:96%;
	height:50px;
	background:#a7a9ab;
	padding:2%;
	float:left;
	}
	
#contac{
	width:96%;
	height:50px;
	background:#9d9fa1;
	padding:2%;
	float:left;
	}
	
#lateral2{
	width:92%;
	background:#fff;
	position:relative;
	padding:6% 4%;
	left:0;
	border:0;
	}


#container {
	width:100%;
	position:relative;
	background:#f1f2f2;
	left:0;
	height:100%;
	}
	
#slide{
	width:100%;
	background:#000;
	border-bottom:0;
	position:relative;
	}
	
#info{
	padding:2%;
	position:relative;
	width:96%;
	}
	
#info2{
	position:absolute;
	width:99%;
	padding-top:29%;
	}

#info3{
	padding:2%;
	position:relative;
	width:96%;
	padding-top:50%;
	}
	
	
	
	
	}
	
	
#frame{
	width:80%;
	margin:auto;
	}
	
.frametext{
	column-count:3;
	-webkit-column-count:3;
	-moz-column-count:3;
	-o-column-count:3;
	-ms-column-count:3;	
	}