/*
azul 4fc8e0
gris 1f1f1f
azul obscuro 146576



*/


/*font Face* *********************/

@font-face {
font-family: 'iconos';
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
url('font/fontawesome-webfont.ttf')  format('truetype');
}


@font-face {
font-family: 'bold';
src: url('font/DINPro-Bold.eot?#iefix') format('embedded-opentype'), 
url('font/DINPro-Bold.ttf')  format('truetype');
}


@font-face {
font-family: 'normal';
src: url('font/dinpro-regular-webfont.eot?#iefix') format('embedded-opentype'), 
url('font/dinpro-regular-webfont.ttf')  format('truetype');
}


@font-face {
font-family: 'thin';
src: url('font/Aileron-Thin-webfont.eot?#iefix') format('embedded-opentype'), 
url('font/Aileron-Thin-webfont.ttf')  format('truetype');
}




@font-face {
font-family: 'medium';
src: url('font/DINPro-Medium.eot?#iefix') format('embedded-opentype'), 
url('font/DINPro-Medium.ttf')  format('truetype');
}




@font-face {
font-family: 'serifi';
src: url('font/Aleo-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), 
url('font/Aleo-LightItalic-webfont.ttf')  format('truetype');
}


@font-face {
font-family: 'iconos2';
src: url('font/icomoon.eot?#iefix') format('embedded-opentype'), 
url('font/icomoon.ttf')  format('truetype');
}


/*font Face* *********************/



#ascrail2000-hr{display:none!important;}

#separador.separaindex{ /*height:90px;*/}



/*GENERALES ***********************************************************************/


*{margin:0;padding:0;list-style-type:none;font-style:normal;text-decoration:none; font-weight:normal; line-height:1em;}

a { color:#4fc8e0;}  
a:hover{ color:#4cafdb;}
a:active{ color:#930;}

#separador {clear: both;visibility:hidden; height:0;}
*:focus{outline:none;}



h1,h2,h3,h4{ font-family:bold;}


/******tapa y cosas fuera de diagramacion ***********************/

#tapa {
	background-color:#fff;
	background-image:url(SVimagenes/loading.gif);
	background-repeat:no-repeat;
	background-position:center center;
	position:fixed;
	width:100%!important;
	height:100%;
	top:0;
	left:0;
	z-index:10000;
   
}


#subir{
	position:fixed;
	display:block;
	bottom:0;
	right:20px;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	color:#fff;
	background-color:#191919;
	font-size:30px;
	border-radius:3px 3px 0 0;
	cursor:pointer;
	font-family:iconos;
	z-index:10;
	transition:all 0.3s linear;
	
}


#subir:before{
	content: "\f106";
}

#subir:hover{
	background-color:#4fc8e0;
	color:#FFF;}


/*BLOQUES PRCINCIPALES DEL WEB SITE *********************************************/

html{ height:100%;
}

body{ height:100%;
font-family:normal;}


body.interno{
padding-top:85px;
box-sizing: border-box;}


body.bodylistados{ background-color:#f2f2f2;}


#contenido{ padding:0 20px 60px 20px;}
#centro { 
position:relative;
margin:0 auto;
max-width:1300px;
}


/*HEADER ***************************************************/


#header {
box-sizing: border-box;
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
padding:10px;
background-color:#fff;
}


@media only screen and (max-width:1043px) {

#header {
	text-align:center;
}


}

#header.abierto{ height:100%;
background-color:#fff;}

body.interno #header{ position:absolute;}

#header:after{ display:block;
position:absolute;
width:40px;
height:40px;
transform:rotate(45deg) translateX(-50%);
background-color:#fff;
content:"";
bottom:-20px;
left:50%;
z-index:1;

}

#header.abierto:after{
	display:none;
}





/*Logo***************************/

#header a#logo{ 
box-sizing: border-box;
display:inline-block;
transition:opacity 1s linear;
}

#header a#logo img{
	max-width:250px; 
}



@media only screen and (max-width:1043px) {

#header a#logo{
	margin-bottom:20px;
}
}




/* barra1 
SVG-menu-horizontal.php  que es llamada desde SVG-header.php

 *************************************/
#header #menu{
	box-sizing: border-box;
	width:85%;
	position:absolute;
right: 30px;
top: 57%;
transform: translate(0, -50%);
	z-index:2;
	text-align:right;

}



#menu a.item{
	display:inline-block;
	position:relative;
	margin:0 0 0 20px;
	overflow:hidden;
	box-sizing: border-box;
	font-size:15px;
	color:#4fc8e0;
	text-transform:uppercase;
	border-bottom:3px solid transparent;
	transition: all 0.3s linear;
	padding-bottom:10px;
	
}



#menu a.item:hover{
	color:#146576;
	border-bottom-color:#146576;

	
}

@media only screen and (max-width:1043px) {

#header #menu{
	width:98%;
	position:relative;
right: auto;
top: auto;
transform: translate(0, 0);
	z-index:2;
	text-align:center;
	margin:0 auto;

}


#menu a.item{

	margin:0 15px ;
	
}

}










/*cerro barra1 **********************************/



















/*//// header *************************************************************************************************/







/* vcabeza  *************************************/

#vcabeza{ height:100%;
overflow:hidden;
position:relative;}


#vcabeza:after{top:0;
left:0;
width:100%;
height:100%;
position:absolute;
display:block;
content:"";
background-color:rgba(0,0,0,0.2);
transition:all 0.3s ease-out 0s;
z-index:2;}

#vcabeza video{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	height:120%;
z-index:1;}

#vcabeza #pantalla{ background-image:url(video/video.jpg);
background-size:100% 100%;
height:100%;
position:relative;
z-index:1;}

#vcabeza #leon{ text-align:center;
position:absolute;
top:30%;
left:0;
width:100%;
z-index:3;}
#vcabeza #leon img{ max-width:200px; }


#vcabeza #slogan{
position:absolute;
width:90%;
left: 50%;
bottom: 10%;
transform: translate(-50%, 0);
color:#fff;
text-align:center;
font-family:normal;
z-index:3;
max-width:1000px;
font-size:30px;
letter-spacing:0.03em;
}


#vcabeza #slogan .frase h1{ font-family:thin;
text-transform:none;
margin:0 0 15px 0;
line-height:1em;
font-size:60px;}


#vcabeza #slogan .frase h1 em{ color:#4fc8e0;}

#vcabeza #slogan .frase p{
	line-height:1.2em;}
	
	
	
	@media only screen and (max-width:600px) {
		


#vcabeza #slogan .frase h1{
font-size:40px;}


#vcabeza #slogan .frase p{
	font-size:20px;
}


}

#slogan .frase{display:none;}



#vcabeza a.ir{ color:#fff;
font-size:50px;
width:50px!important;
display:inline-block;
position:absolute;
bottom:30px;
left:30px;
z-index:3;
transition:bottom 0.5s linear, color 0.3s linear;
display:none;}

#vcabeza a.ir:hover{ color:#1F466D;}

#vcabeza:hover a.ir{ bottom:20px;}

#vcabeza a.ir:before{
	font-family:iconos2;
	content:"\ea36"}

/*cerro vcabeza **********************************/











/* bloque  *************************************/

.bloque{
position:relative;
overflow:hidden;
padding:160px 0;
box-sizing: border-box;}


@media only screen and (max-width:1025px) {
.bloque{
padding:40px 20px;
}


}



.bloquesito{
	position:relative;
width:98%;
max-width:1000px;
margin:0 auto;
z-index:2;
overflow:hidden;
}

.bloque .boton{ position:absolute;
bottom:30px;
left:50%;
transform:translate(-50%,0);
z-index:2;}








/*cerro bloque **********************************/





/* infoindexcontainer 
SVI-infoindex.php

 *************************************/

#infoindexcontainer{ background:#fff;
background-image:url(SVimagenes/fondo-infoindex.jpg);
background-position:left top;
background-size:100% auto;
overflow:hidden;
height:100%;

}












#infoindexcontainer #infoindex{ max-width:800px;
color:#101010;
margin:0 50px 0 auto; }



@media only screen and (max-width:1458px) {

#infoindexcontainer #infoindex{ max-width:700px;
}

}


@media only screen and (max-width:1300px) {

#infoindexcontainer{ background-image:none; 

}

#infoindexcontainer #infoindex{ max-width:800px;
color:#101010;
margin:0 auto; }

}



#infoindex h1{
font-size:2.3em; 
margin:0 0 20px 0;
color:#146576;
font-family:medium;
text-transform:uppercase;
letter-spacing:-1px;
}


#infoindex h3{
	font-family:serifi;
	font-size:2em;
	margin:0 0 20px 0;
}

#infoindex p { line-height:1.3em;
margin:0 0 20px 0;
font-size:1.3em;}

#infoindex p:nth-of-type(1){ 
font-family:serifi; 
font-size:1.6em;
line-height:1.4em;}






/*cerro infoindexcontainer **********************************/




























/* listados ***************************************************************************************************************

 Esto aplica para  todos los  SVL-*  y  para todos los  SV-listado-*
	todos los listados son iguales en este modelo.
	
*/

#titulonanaina{ text-align:center;
padding:40px 0;}


.listadoscontainer{	padding:60px 25px;
	text-align:center;
		
		position:relative;
}


.listadoscontainer:after{display:block;
position:absolute;
left: 50%;
bottom: 20px;
transform: translate(-50%, 0);
top:0;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid #fff;
content:"";}

body.index .listadoscontainer{padding-top:50px ;
	
}

.listadoscontainer h1{
font-size:60px;
margin-bottom:60px;
color:#4fc8e0;
text-transform:uppercase;
letter-spacing:-1px;
position:relative;
}


.listadoscontainer h1:after{
position:absolute;
bottom:-30px;
left:50%;
transform:translateX(-50%);
height:10px;
width:250px;
background-color:#4fc8e0;
content:"";
}

.listadoscontainer p{ margin:0 auto 30px auto;
max-width:800px;
line-height:1.3em;
}








.listados {
	overflow:hidden;

}


.listados a.item{ display:block;
float:left;
width:23.5%;
margin:0 2% 2% 0;
position:relative;
cursor:pointer;
overflow:hidden;
background-color:#FFF;
box-sizing: border-box;
text-align:left;
transition:background-color 0.3s linear;
padding-top:15%;
box-sizing: border-box;


}







.listados a.item img{ 
width:120%;
display:block;
position:absolute;
transform:translate(-50%,-50%);
left:50%;
top:50%;
transition:all 0.3s linear;
}


.listados a.item:hover img{ 
width:150%;
}







.listados a.item:before{top:0;
left:0;
width:100%;
height:100%;
position:absolute;
display:block;
content:"";
background-color:rgba(0,0,0,1);
transition:all 0.3s ease-out 0s;
z-index:1;
opacity:0.2;}



.listados a.item:hover:before{ opacity:0.5;}





.listados a.item:after{ 
color:rgba(255,255,255,1);
opacity:0;
font-family:iconos;
display:block;
width:100%;
padding-right:20px;
box-sizing: border-box;
content: "\f067";
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index:3;
transition:opacity 0.3s linear;
text-align:center;
font-size:50px;

}

.listados a.item:hover:after{
	opacity:1; 

}



.listados a.item:nth-of-type(4n){ margin-right:0;}







.listados a.item #info{
	position:absolute;
	bottom:20px;
	left:20px;
	width:90%; 
box-sizing: border-box;
color:#fff;
transition:opacity 0.3s linear;
z-index:3;
}

.listados a.item:hover #info{ opacity:0.2;} 


.listados a.item #info #titulo{ font-family:bold;
font-size:1.7em;
margin:0 0 10px 0;
text-transform:uppercase;
position:relative;
}

.listados a.item #info #titulo:after{position:absolute;
bottom:-15px;
left:0;
height:7px;
width:80px;
background-color:#FFF;
content:"";}

.listados a.item #info #resumen{
	display:none;
	 font-size:0.9em;
line-height:1.3em;}




.listados a.item #categoria{display:none;}









@media only screen and (max-width:1000px) {

.listados a.item{ 
width:48%;
margin:0 4% 4% 0;

}
.listados a.item:nth-of-type(2n){ margin-right:0!important;}

#listadosservicios .listados a.item{ display:block; float:left;
}

}

@media only screen and (max-width:560px) {

.listados a.item{ 
width:100%;
margin:0 0 4% 0;

}


}


/*cerro listados **********************************/













/* caja  ************************************************************************************************************************/

#caja{ height:400px;
position:relative;
overflow:hidden;
 
}


#caja:after{top:0;
left:0;
width:100%;
height:100%;
position:absolute;
display:block;
content:"";
background-color:rgba(0,0,0,0.3);
transition:all 0.3s ease-out 0s;
z-index:2;}


body.listados #caja{height:400px;
}








#caja img{ width:100%;
display:block;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:1;

}



#caja #titulote{
	position:absolute;
	z-index:3;
	left:40px;
	bottom:40px;
	color:#FFF;
		width:90%;
	max-width:900px;}
	
	#titulote h1{ font-family:bold;
	text-transform:uppercase;
	font-size:75px;
	margin:0 0 10px 0;
	}

	#titulote #resumenarticulo{ font-size:1.3em;
	line-height:1.4em;
	display:none;}



@media only screen and (max-width:900px) {
#caja img{ height:100%;
width:auto;

}

	
	#titulote h1{ 
	font-size:50px;

	}

	#titulote #resumenarticulo{
		font-size:1.2em;

	}


}

/*cerro caja **********************************/






#galeria{ margin:0 0 25px 0; 
overflow:hidden;
text-align:center;}

#galeria a{ display:inline-block;
width:25%;
margin-right:-4px;
}

#galeria a img{ width:100%;}




















/*BOTONES GENERALES  **************************************************************/
.boton{ 
padding:0 20px;
background-color:#8dc53e;
color:#fff;
border:none;
text-transform:uppercase;
font-size:13px;
letter-spacing:1px;
text-align:center;
line-height:45px;
cursor:pointer;
transition:all 0.3s ease-out 0s;
display:inline-block;
border-radius:3px;
white-space:nowrap;

}

.boton:hover{
	background-color:#4fc8e0;
	color:#fff;}
	
.boton:before{ font-family:iconos;
	letter-spacing:10px;}
	
	
	.trabajo{ background-color:#FFF;
	color:#4fc8e0;}
	
.vermas:after{ content:"ver más";}	
.conozca:after{ content:"áreas de negocio";}	



.recalcular:after{ content:"Recalcular Precios";}
.enviarpedido:after{ content:"Ahora si: Enviar Pedido!";}
.acceda:after{ content:"Acceda o Regístrese AQUI para  Enviar Su Pedido";}
.verproductos:after{ content:"Ver Otros Productos";}
.eliminarsolicitud:after{ content:"Eliminar Solicitud";}

/*.masinfo:after{ content:"solicitar + informacion";}
.volver:after{ content:"Volver";}*/

.addtocart:after{ content:"Agregar al Pedido";}
.reportarpago:after{ content:"Realizar Nuevo Pago";}
.modificardatos:after{ content:"Modificar sus Datos";}
.buscar:after{ content:"Buscar";}
.verpedido:after{ content:"Ver Pedido";}
.enviarpedido:after{ content:"Enviar Pedido";}
.entrar:after{ content:"Entrar";}
.registrarse:after{ content:"Registrarse";}
.linkinicio:after{ content:"Inicio";}
#breadcrums:before{ content:"Volver a ";}
.enviar:after{ content:"Enviar";}
.titulocarrito:after{ content:"Su Carrito de Compra";}
.ordenar:after{ content:"agregar al pedido";}

	
	
	
	
	
	/* iconos  generales de todo el site.
	
	Usar http://fortawesome.github.io/Font-Awesome/icons/ para decidir que icono usar
	
	*************************************/
	
	.masinfo:before {content: "\f128";}
	.volver:before{content: "\f104";}
		.vermas:before, .conozca:before, .trabajo:before{content: "\f067";}
	.restore:before{content: "\f021";}
	.ordenar:before{content: "\f07a";}
	.doc:before{content: "\f15c";}
	.link:before{content: "\f0c1";}
.linkbuscar:before{ font-family:iconos;content: "\f002";}
.enviar:before{content: "\f00c";}
.linkusuarios:before{font-family:iconos;content: "\f007";}	
	
	/*cerro iconos **********************************/
	
	
	
	
	
	
	
	
	
	/* 		SVG-nav.php   
		este es el panel de navegacion que  está en las paginas de listados para subir  e ir para atras

		***********************************/

#caja #nav{ position:absolute;
bottom:20px;
right:20px;
width:200px;
text-align:right;
z-index:3;
}

#nav a#nav-button:before{
font-family:iconos;
}

#nav a#nav-button.nav-volver:before{ content:"\f104";} 
#nav a#nav-button.nav-subir:before{ content:"\f106";}




#nav a#nav-button, #botones .boton{ display:inline-block;
margin:0 0 0 15px;
height:38px;
width:38px;
text-align:center;
line-height:38px;
font-size:26px;
color:#fff;
border-radius:3px;
 }


#nav a#nav-button:hover, #botones .boton:hover{ 
color:#fff;
background-color:rgba(0,0,0,0.7);}



/*cerro nav nuevo *********************************/







/*datos de producto

en SV-detalle-producto.php
*/
#datos{ }
#datos #datoadicional{ }

#cosas{ text-align:center;}


#cosas .boton, .userhome .boton{ margin:0 10px;
}





	



#caja #botones{
z-index:4;
position:absolute;
width:300px;
top:20px;
right:20px;
text-align:right;

}

#botones .boton{ 
background:transparent;
margin:0 15px 0 0;
padding:0;
font-size:25px;
text-align:center;
}

#botones .boton:before{letter-spacing:0;}

#botones .volver{display:none;}
	




/*cerro botones **********************************/





























/* Estilos del  div  #centro
 aplica para todos los SV-*

  *************************************/







#breadcrums{ text-align:center;
margin:15px 0 15px 0;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;}

body.bodylistados #breadcrums{ text-align:center;}


#centro #texto{
	column-count:2;
column-width:auto;
column-gap:50px;
color:#272727;
border-top:dotted 1px rgba(0,0,0,0.2);
border-bottom:dotted 1px rgba(0,0,0,0.2);
padding:25px 0;
margin:0 0 15px 0;}

#centro #texto p{ margin:0 0 20px 0; line-height:1.4em;
-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;}

#centro #texto p:first-child{ font-size:27px;
font-family:serifi;
line-height:1.3em;}


	
#centro #texto ul{ padding:20px 0;

-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;}	


@media only screen and (max-width:600px) {

#centro #texto{
	column-count:1;
}


}



@media only screen and (max-width:600px) {

#centro #texto p:first-child{ font-size:20px;
}


}




#centro #texto ul li{ margin:0 0 10px 0;
list-style-type:circle;
list-style-position:inside;
line-height:1.4em;}	
	

.unbreakable, .ub{-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;
margin-bottom:30px;
}

#centro #texto p:last-child, #centro #texto ul li:last-child{ margin-bottom:0;}


#centro #texto h1,
#centro #texto h2,
#centro #texto h3,
#centro #texto h4,
#centro #texto h5
{
margin:30px 0 5px 0;
color:#333;
	
	}
	
	
	
	#centro #texto h2{ font-size:40px}
		#centro #texto h3{font-size:30px}
			#centro #texto h4{font-size:25px}
	
	
	#centro #texto h2:first-child,
		#centro #texto h3:first-child,
			#centro #texto h1:first-child{ margin-top:0;}
	

#texto p.conimagen{ text-align:center;}
#texto p.conimagen img{
	max-width:100%;
	padding:15px;
	background-color:rgba(0,0,0,0.05);}





#fechaactualizacion{
	text-align:center;
font-size:11px;
text-transform:uppercase;
margin:25px 0 ;
color:rgba(0,0,0,0.8)}

#fechaactualizacion:before{ content:"Actualizado el "}




#centro #texto iframe{ max-width:100%;
margin:0 auto;
display:block;}


/*cerro centro **********************************/


.papa{ text-transform:uppercase;
padding:10px;
cursor:pointer;
margin:0!important;
position:relative;
}





.papa:after, .bloqueproducto h1.titulo:after{ display:inline-block;
position:absolute;
top: 50%;
transform: translate(0, -50%);
height:25px;
width:25px;
line-height:25px;
text-align:center;
right:20px;
content: "\f054";
font-family:iconos;

}

.expandido{ color:#fff!important;
background-color:#4fc8e0;}

.expandido:after, .abierto h1.titulo:after{ 
content: "\f078";

}

.hijo{display:none;
padding:20px;}




.hijo ul{ margin:0 0 20px 0!important;
background:none!important;
padding:0!important;}









/*tablas*/

#centro table{
	border:solid 1px rgba(0,0,0,0.04);
	width: 100%; 
	border-collapse: collapse; 
	font-family: arial,sans-serif; 
	font-size:12px;}
	
	#centro table caption{ 
	font-family:normal; 
	background-color:#f9f9f9;
	padding:10px;
	font-size:19px;
	color:#999;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:1px;}
	
	#centro table th{ background-color:#4cafdb; 
	color:#fff;}
	
#centro table td, 	#centro table th{
	padding:10px; 
	text-align:left;
border:solid 1px #f2f2f2;}

#centro table tr:nth-child(odd){ 
background-color:#e9e9e9;}





/*FOOTER 
SVG-footer.php
*************************************/


#footercontainer{
	background-color:#1f1f1f;
	background-size:100% auto ;
	position:relative;
	padding:260px 40px 60px 40px!important;
	box-sizing: border-box;



}

#footercontainer #footer{ max-width:1300px;
margin: 0 auto;
position:relative;
overflow:hidden;
color:#FFF;}

/*bloques del footer *****************/




#footercontainer #footerlogo { text-align:center;
position:absolute;
top:-35px;
left:0;
width:100%;

}


#footercontainer #footerlogo img{ display:inline-block;
width:100%;
max-width:200px;
}


#footer .fbloque{ float:left; box-sizing: border-box;}
#footer #f01{ width:25%;}
#footer #f02{ width:65%; padding-left:10%;
text-align:right;}




#footer .fbloque h1{ display:inline-block;
text-transform:uppercase;
font-size:24px;
border-bottom:2px #4cafdb solid;
margin:0 0 20px 0;
padding:0 0 10px 0;
 }




#footer a.item{ color:#FFF;
font-size:12px;
text-transform:uppercase;
letter-spacing:1px;
display:block;
margin:0 0 15px 0;
}


#footer a.item:hover{ color:#4cafdb!important;}

#footer a.item:before{ font-family:iconos;
letter-spacing:10px;
content: "\f105";
}






#footer #f01 h3{
	font-family:normal;
	text-transform:uppercase;
	font-size:16px;
margin-bottom:20px;

}

#footer #f01 h3:hover{
	color:#3FF;

}



#footer #f01 p:before{ font-family:iconos;
font-size:25px;
letter-spacing:10px;
}
#footer #f01 p.tlf:before{ content:"\f095";}
#footer #f01 p.direccion:before{ content:"\f041";}
#footer #f01 p.email:before{ content:"\f0e0";}


#footer .footerinfo{margin-bottom:40px;}



@media only screen and (max-width:800px) {

#footer .fbloque{  width:100%!important;
float:none;
margin:0 0 50px 0;
padding:0;}

#footer .fbloque h1{ display:block;

 }


}





#footer #f01 p{ margin:0 0 30px 0;
font-size:1em;
line-height:1.2em;}


#footer .papa{ padding:0;
margin:0 0 20px 0!important;}

#footer .papa:before{content: "\f054";
font-family:iconos;
letter-spacing:15px;
font-size:14px; }



#footer .papa:after{display:none;}
#footer .hijo{ padding:10px 0 0 0;}

#footer #f01 h3.expandido{ 
background-color:transparent!important;
font-family:bold;
font-size:20px;}

#footer #f01 h3.expandido:before{ 
content: "\f078";

}

















/*formulario en el footer*/
.footerform{ }










.footerform #formulario{ 


}





.footerform #formulario label{ display:block;
box-sizing: border-box; 
	break-inside:avoid-column;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	page-break-inside: avoid;
}





.footerform #formulario label span{display:none;
}

.footerform #formulario input, 
.footerform #formulario textarea,
.footerform #formulario select{
	display:block;
	border: none;
width:100%;
padding:0 15px;
font-size:13px;
letter-spacing:1px;
height:75px;
line-height:40px;
text-transform:uppercase;
color:#f2f2f2;
box-sizing: border-box;
background:transparent;
border-bottom:solid 1px rgba(255,255,255,0.2);
transition:background-color 0.3s linear;
overflow:hidden; 
}


.footerform #formulario textarea{ height:120px;
line-height:1.4em;
padding-top:15px;}

.footerform #formulario input:focus,
.footerform #formulario textarea:focus,
.footerform #formulario select:focus{
	background-color:rgba(255,255,255,0.1);}








.footerform #formulario .boton{ border: solid 1px #ccc;
border-radius:0;
background-color:none;
background:none;}



























/*Redes sociales 
SVG-redessociales.php 

* *****************************************************************************************************/

#redessociales{ 
margin-top:10px;}


#redessociales a {
	background-color:rgba(153,153,153,0.2); 
display:inline-block;
height:50px;
width:50px;
line-height:50px;
text-align:center; 
font-size:18px;
margin:0 5px 0 0;
color:#fff!important;
}

#redessociales a:hover{
	color:#4fc8e0!important;
}


a.red{}
		


#redessociales a:before{ font-family:iconos;}

.facebook:before{ content:"\f09a";}
.twitter:before{ content:"\f099";}
.email:before{ content: "\f0e0";}
.instagram:before{content: "\f16d";}





























/* formulario  *************************************/
.bodyform #contenido{ padding-top:80px;} 

.bodyform #centro  h1{  font-size:60px;
margin:0 0 15px 0;}

.bodyform #centro p{ text-align:left;
max-width:800px;
margin:0 0 20px 0;
line-height:1.4em;}

.bodyform form{ margin-bottom:40px;}

.bodyform #formulario{ margin:40px 0 0 0;
-moz-column-count:2;
-moz-column-width:auto;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-width:auto;
-webkit-column-gap:20px;

}


.bodyform #formulario h3{ font-size:20px;}


.bodyform #formulario label, #cajacaptcha{ display:block;
box-sizing: border-box;
	break-inside:avoid-column;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	page-break-inside: avoid;
	margin:0 0 20px 0;
	padding:15px;
	background:rgba(0,0,0,0.01);
	border:solid 1px rgba(0,0,0,0.2);
border-radius:3px;
transition:all 0.3s ease-out 0s;
}
	
.bodyform 	#formulario label:hover{	background:rgba(0,0,0,0.05);} 
.bodyform 		#formulario label:focus{	background:rgba(255,255,255,1);} 

.bodyform #formulario label span{ display:block;
font-size:12px;
color: #8c8c8c;
margin:0 0 5px 0;
text-transform:uppercase;}

.bodyform #formulario input,
.bodyform  #formulario textarea,
.bodyform  #formulario select{
	display:block;
	border:solid 1px rgba(0,0,0,0.1);
width:100%;
padding:15px;
font-size:14px;
color:#999;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;    
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-border-radius:3px;
-webkit-border-radius:3px; 
-khtml-border-radius:3px; 
border-radius:3px;}



#cajacaptcha{ text-align:center;}


#cajacaptcha #instrucciones{ font-size:12px;
padding:10px;
background:#f3f3f3;
margin:0 0 10px 0;}

#cajacaptcha #bichos{ margin:0 0 10px 0;}

#cajacaptcha img#captcha{
	display:inline-block;
	vertical-align:top;}

a#recargar{font-size:25px;
line-height:50px;
display:inline-block;
margin:0 0 0 20px;
vertical-align:top;
color:#333;
cursor:pointer;
-webkit-transition:all 0.3s ease-out 0s;
  -moz-transition:all 0.3s ease-out 0s;
  -o-transition:all 0.3s ease-out 0s;}

a#recargar:hover{ color:#009ccc;
-webkit-transform: rotate(30deg); 
-moz-transform: rotate(30deg) ; 
-o-transform: rotate(30deg) ;
-ms-transform: rotate(30deg);}


a#recargar:before{ font-family:iconos;
content:"\f021";
}


.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid {
    color:#00CC00!important;
font-size:12px!important;
font-weight:bold!important;
text-transform:lowercase!important;
}
	
.LV_invalid {
    color:#CC0000!important;
font-size:11px!important;
font-weight:bold;
text-transform:lowercase!important;

}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 1px solid #00CC00!important;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000!important;
}






/*cerro formulario **********************************/