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

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	
	background-color: #19487F;

background: url('../imagenes/fondoinicio.jpg') no-repeat fixed center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

/* Solución para algunos navegadores móviles */
min-width:100%;
margin:0px;
}



img {
	border:0px;
	}
	


.container-titular {
  background-image: url(../imagenes/fondotitular.png);
	background-repeat: repeat-x;
  margin: 0 auto;
  width: 100%;
  height:210px;
  margin-top:0px;
  vertical-align:middle;
}


.container-botones {
	
	position:relative;
	
  background-color:#;
  margin: 0 auto;
  max-width: 1170px;
  margin-top:-10px;
  vertical-align:middle;
  text-align:center;
  z-index:1000;
}

.index {
  z-index:-50;
}




.container-animacion {
  background-color:;
  margin: 0 auto;
  margin-top:-30px;
  vertical-align:middle;
  z-index:-10;
}


.container-contenido {
  background-color:#FFFFFF;
  margin: 20px auto;
  max-width:1024px;
  margin-top:-30px;
  height:555px;
  vertical-align:middle;
  z-index:-10;
}





/* TENEMOS OCULTO EL TITULAR ALTERNO CON LOS BOTONES CHICOS  */	
.container-titularpeque {
	display:none!important; 
	
  background-color: #ffffff;
  margin: 0 auto;
  width: 100%;
  margin-top:0px;
  vertical-align:middle;
}


.contenedoriconos {
	
	border-radius: 0.5em;
	display: block;
	margin: 1px auto;
	max-width: 100%;
	padding: 0.90em;
	vertical-align: top;
	width: 100%;
	z-index:666;	
}
.icono {
	display: inline-block;
	padding: 0.40em
}

	

/*  CON ESTE RECURSO ESCALAMOS EL FRAME DONDE PONEMOS LA GALERIA PARA QUE SE VEA BIEN EN TELEFONOS  */	
.galeria {
   position: relative;
   padding-bottom: 33.0%;
   overflow: hidden;
}
.galeria iframe
 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */	


/*  CON ESTE RECURSO ESCALAMOS EL FRAME DONDE PONEMOS LA GALERIA PARA QUE SE VEA BIEN EN TELEFONOS  */	
.galeriaautomotriz {
   position: relative;
   padding-bottom: 51.0%;
   overflow: hidden;
}
.galeriaautomotriz iframe
 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */	



/*  CON ESTE RECURSO ESCALAMOS EL FRAME DONDE PONEMOS LA GALERIA PARA QUE SE VEA BIEN EN TELEFONOS  */	
.galeriaeventos {
   position: relative;
   padding-bottom: 41.0%;
   overflow: hidden;
}
.galeriaeventos iframe
 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::  */	



/* MAPA DE GOOGLE RESPONSIVE*/
.google-maps {
position: relative;
padding-bottom: 35%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}






.eventoscontenedor {
background-color:#6C3;
  max-width: 1024px;
  height: 550px;
}






.container-pie {
	background-image: url('../imagenes/fondopie.png');
  margin: 0 auto;
  width: 100%;
  margin-top:20px;
	min-height:300px;
}

.rojo{
	background-color: red;
	min-height:400px;
	}
.naranja{
	background-color: orange;
	z-index:0;
	}
.blanco{
	background-color: white;
	z-index:0;
	}
.grisclaro{
	background-color: #F4F4F4;
	}


/*EMPIEZA TODO EL EFECTO TRANSPARENCIA*/

.fade{
	-ms-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	opacity: 1;	
	filter:alpha(opacity=10);
}

.fade:hover{
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;	
	opacity: 0.7;		
	filter:alpha(opacity=5);
}

/*EMPIEZA TODO EL CSS PARA EL GIRO Y DESPLAZAMIENTO*/
.mover{
	-ms-transition: desplazar 0.5s ease-in;
	-moz-transition: desplazar 0.5s ease-in;
	-o-transition: desplazar 0.5s ease-in;
	-webkit-transition: desplazar 0.5s ease-in;
	transition: desplazar 0.5s ease-in;
}
.mover:hover{
transform: rotate(-1deg) ;
-ms-transform: rotate(-1deg) ; /* IE 9 */
-moz-transform: rotate(-1deg)  ;/* Safari and Chrome */	
-o-transform: rotate(-1deg) ;
-webkit-transform: rotate(-1deg) ;
	
}


/*EMPIEZA TODO EL CSS PARA EL GIRO Y DESPLAZAMIENTO*/
.bajar{
	-ms-transition: 0.5s ease-in;
	-moz-transition: 0.5s ease-in;
	-o-transition: 0.5s ease-in;
	-webkit-transition: 0.5s ease-in;
	transition: 0.5s ease-in;
}
.bajar:hover{
transform: translate(0px,5px);
-ms-transform: translate(0px,5px); /* IE 9 */
-moz-transform: translate(0px,5px);/* Safari and Chrome */	
-o-transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
	
}
	



/*DIFERENTES TIPOS DE ENLACES*/
 	A:link {color:#ccc; text-decoration: none;} 
   	A:visited {color:#ccc; text-decoration: none;} 
   	A:active {color:#3371A5; text-decoration: none;} 
   	A:hover {color:#3371A5; text-decoration: none;} 

   	A.clase1:visited {color:#1D3768; text-decoration: none;} 
   	A.clase1:active {color:#ff0000; text-decoration: none;} 
   	A.clase1:link {color:#1D3768; text-decoration: none;} 
   	A.clase1:hover {color:#ff0000; text-decoration: none;} 

   	A.clase2:visited {font-size:12;color:#ffffff; text-decoration: none;} 
   	A.clase2:active {font-size:12;color:#ffffff; text-decoration: none;} 
   	A.clase2:link {font-size:12;color:#ffffff; text-decoration: none;} 
   	A.clase2:hover {font-size:12;color:#ffff33; text-decoration: none;} 
	
	A.clase3:visited {
	font-size:12;
	color:#09F;
	text-decoration: none;
} 
   	A.clase3:active {
	font-size:12;
	color:#36F;
	text-decoration: none;
} 
   	A.clase3:link {font-size:12;color:#F8B233; text-decoration: none;} 
   	A.clase3:hover {font-size:12;color:color:#36F; text-decoration: none;}







/* BOTONES LATERALES DE LA SECCION AUTOMOTRIZ E INDUSTRIAL */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
nav ul {
	list-style: none;	
	margin-left:-40px;
	z-index:900;
	
}

nav li {
	display: inline-block;
	padding: 0.15em;
	vertical-align: top;
	z-index:900;	
}

nav a {
	background: #2C7430;
	border: 0.1em solid #90B22A;
	border-radius: 0.25em;
	color: #fff;
	display: block;
	font-family: "Greyscale", Helvetica, Verdana;
	font-size: 1.4em;
	padding: 0.4em 0.8em;
	-ms-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	z-index:900;
}

nav a:hover {
	background: #D0174F;
	border: 0.1em solid #90B22A;
	border-radius: 0 0.5em 0.5em 0.5em;
	color: #fff;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;	
	z-index:900;
}


/*EMPIEZA TODO EL CSS PARA LOS BOTONES DE NAV*/
nav ul li{
	display: inline-block;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition:0.5s;
	z-index:950;
}
nav ul li:hover{
	-webkit-transform: translate(0px,-5px) scale(1.3,1.3);
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition:0.5s;
	z-index:950;
}
/*TERMINA TODO EL CSS PARA LOS BOTONES DE INCLUIDA LA TRANSFORMACIÓN Y SU TIEMPO DE DURACION NAV*/
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */




/*LO QUE SIGUE ES EL CSS PARA EL SUBMENU QUE SE DESPLIEGA*/
nav ul li ul{
	    /*display:none; /*Oculta submenu*/
  	
    position:absolute;
	display: inline-block;
    margin:0px -100px; /* Donde aparece Posicion Vertical y Horizontal de submenú*/
	/* Si le pongo el ancho del submenu ya NO ABRE EN HOVER desde la ESQUINA barre de arriba abajo, sin el ancho en diagonal desde al esquina
	 SI EL ANCHO ES MAYOR, Y CABEN MÁS SUBMENUS, PODEMOS PONERLOS EN GRUPOS DE DOS O TODOS EN HORIZONTAL*/
	width:150px;
	
	visibility: hidden;
	overflow: hiden;
	z-index: 950;
}
nav ul li:hover ul
{   
    /*display:block;*/
   /*Si le pongo un ancho igual al ancho del submenu
   que aparece, entonces me sale en vertical. Si 
   no defino un ancho, no limita el espacio y entonces
   el submenú SE EXPANDE en horizontal.*/
    visibility: visible;
	background-color:#;
    overflow: hiden;
	width:150px;
	z-index: 950;

}
/*ACABA EL SUBMENU DESPLEGABLE*/