@font-face {
font-family: 'normal';
src: url('font/HelveticaNeueLTStd-Ltd41d.eot?#iefix') format('embedded-opentype'), 
url('font/HelveticaNeueLTStd-Lt.ttf')  format('truetype');
text-rendering: optimizeLegibility;
}


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


@font-face {
font-family: 'serifi';
src: url('font/TektonPro-Regulard41d.eot?#iefix') format('embedded-opentype'), 
url('font/TektonPro-Regular.ttf')  format('truetype');
text-rendering: optimizeLegibility;
}




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



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


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







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


::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
}




html{ height:100%;
}


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




body.detalle{background-size:100% auto;
background-attachment:fixed;
background-position:center center;}





/*GENERALES ***********************************************************************/
a {text-decoration:none;
color:#E32119;}  

a:hover{color:#000;}
a:active{color:#000;}
p {margin:0px;padding:0px;}
#separador {clear: both;visibility:hidden; height:0;}
*:focus{outline:none;}



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





/*#tapa{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url(SVimagenes/logo.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-color:rgba(0,0,0,0.90);
	z-index:1000;
transition:all 5s ease-out 0s;
background-size: 200px 200px;  
	cursor:pointer;
	display:none;
 }
		
		
#tapa:hover{
background-size: 315px 315px;  
}*/




/* CIERRA GENERALES ***********************************************************************/









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










#subir{
	position:fixed;
	display:none;
	bottom:-40px;
	left:1%;

	width:80px;
	height:80px;
	text-align:center;
	border-radius:40px;
	line-height:40px;
	color:#fff;
	background-color:#000;
	font-size:55px;
	cursor:pointer;
	font-family:iconos;
	z-index:100;
	transition:all 0.3s linear;
	
}




/*#subir:hover{
	color:#000;
	background-color:#FFF;
	bottom:10px;
	line-height:75px;
	font-size:60px;
}*/



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

#subir{display:none!important;}

}


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
















/* Paginas Internas  *************************************/



#wrapper{

}



body.bodylistados #wrapper{

}



body.interno #wrapper{ 


}





body.detalle #wrapper,
body.bodyuserhome #wrapper{ 
height:auto;
box-sizing: border-box;
background-color:#FFF;

}




body.detalle #centro,
body.bodyuserhome #centro{
	width:90%;
	max-width:1000px;
	margin:0 auto 40px auto; 


}




/*ESTILOS DE TEXTO DEL CENTRO******************************************************************************/


body.bodylistados .listados{ margin:40px auto 0  auto;
}


#centro #resumen,
.listados #resumen{ font-size:30px;
line-height:1.3em;
margin:30px 0;
color:#35478C;
text-align:center;
font-weight: bold;
}

.listados #resumen{ margin-top:0;}


/*esconder resumen de producto*/
body.producto #centro #resumen{ display:none;}

#centro #articulo {
	color:#202020;
	overflow:hidden;
	font-family:normal;
	column-count:2;
	column-gap:50px;
	text-align: left;
	padding-top: 20px;
	}

#centro #articulo1 {
	text-align: center;
	}	
	
	
	body.producto #centro #articulo {
	column-count:1;




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

#centro #resumen,
.listados #resumen{ font-size:20px;
}


#centro #articulo {
	column-count:1;

	}
}



#articulo h2, #articulo h3, #articulo h4, #articulo h5{ 
	line-height:1em;
		margin: 40px 0 5px 0;
		color:#1c3946;
		font-family:bold;


		}


	



#articulo h2 {
	font-size: 40px;
	margin-top:60px;

	}

#centro h3{
	font-size: 22px;
	}

#articulo h4{
	font-size: 18px;
	font-weight: normal;
	text-shadow:none;
	}
	
	
	
#articulo p, #articulo ul, #articulo ol{
		font-size:18px;
-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;
break-after:avoid;


}
			
		
		
		
		
		
		
		
		
		
#articulo b, #articulo strong{ font-weight:bold;}


#articulo p {
	
	margin:0 0 10px 0;


	}
	
	
	
	
	
	
	
	@media only screen and (max-width:801px) {
		
#articulo p, #articulo ul, #articulo ol{
		font-size:15px;

}

#centro #resumen,
.listados #resumen{ font-size:20px;
}


#centro #articulo {
	column-count:1;

	}
}




	
#articulo p:last-child {
	margin-bottom:0;


	}
	
	
#articulo p.conimagen {
		text-align:center;

	}
	

	
	
	
		
	
	
#articulo p img{
		display:inline-block;
		margin:0 auto;
		padding:10px;
		background:rgba(0,0,0,0.05);
		width:65%;
		-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;    
box-sizing: border-box;
-ms-box-sizing: border-box;    

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

#articulo p img{
	
		width:100%;
		
	}


#articulo p, #articulo ul, #articulo ol{
		font-size:15px;
}

}
	
		

#articulo  ul, #articulo  ol  {
	display: block;
		padding:15px;
	margin:0 0 25px 0;


	}

#articulo li {
	list-style: circle inside;
	margin: 0 0 20px 0;
	line-height:1.3em;

	}
	
#articulo ol li {
	list-style: decimal  inside;
	}



#codigohtml{
	margin:10px 0;}


body#articulo188 #codigohtml{display:none;}

#breadcrums {
	font-size:18px;
	color:#999;
	margin:0 0 15px 0 ;
	font-family:normal;
	text-transform:uppercase;
	display:inline-block;
	border-bottom:solid 2px #900;
	padding-bottom:10px;
	line-height:1.1em;
	}
	
	
	@media only screen and (max-width:600px) {

#breadcrums {
	font-size:14px;
	}


}
	
#breadcrums a{color:#900;}

#breadcrums a:hover {
	color:#000;
	text-decoration:underline;
	}




#centro .categoria:before{display:none;}



.cosas{ margin:40px 0;

text-align:center;
}

.cosas .boton{ margin:0 15px 15px 0;}



.doscols{ column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
column-gap:40px;}

.ub{-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;}


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

.doscols{ column-count:1;}


}






#imagenproducto{ width:100%;
max-width:320px;
margin:30px auto 30px auto;
padding:15px;
background-color:rgba(102,102,102,0.1);
box-sizing: border-box;
display: inline-block;
}







#galeria{ overflow:hidden;
}

#galeria a{ display:block;
float:left;
width:25%;
box-sizing: border-box;
transition:all 0.3s linear;}



#galeria a img{ width:100%;}







/*Papa - hijo **************************/

.papa{ cursor:pointer;
transition:all 0.3s linear;}

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

.papaactivo{ 
padding:10px 0 0 0;
margin-bottom:0!important;
font-size:40px!important;}

.papaactivo:before{ content:"\f078";
padding:10px 0 0 0;}


.papa:hover{ color:#900!important;}

.hijo{display:none;
margin:10px 0 30px 0;
background-color:#f8f8f8;
padding:15px;

}



h3.papa,
#articulo h2.papa{ font-family:normal;
color:#1c3946;
text-transform:uppercase;
padding:5px 0 ;
margin:0 0 15px 0;
font-size:28px;
}




















/*caja de fotos***********/


#caja {
padding-top:35%;
position:relative;
background-size:100% auto;
background-position:center top;
background-attachment:fixed;
	}
	
	body.articulo #caja,
	body.bodyform #caja,
		body.bodylistados #caja{ padding-top:25%;}
	


body#articulo171 #caja,
body#articulo172 #caja,
body#articulo173 #caja,
body#articulo174 #caja,
body#articulo175 #caja,
body#articulo176 #caja,
body#articulo177 #caja,
body#articulo178 #caja,
body#articulo180 #caja,
body#articulo181 #caja,
body#articulo207 #caja,
body#articulo208 #caja,
body#articulo209 #caja,
body#articulo210 #caja,
body#articulo211 #caja,
body#articulo212 #caja,
body#articulo213 #caja,
body#articulo214 #caja
{ padding-top:35%;}

		
	#caja:after{
		content:"";
		display:block;
		position:absolute;
		height:100%;
		width:100%;
		z-index:2;
		background:rgba(0,0,0,0.4);
		top:0;
		left:0;
}
		
#caja1 {
position:relative;
background-size: auto;
background-position:bottom;
background-attachment:fixed;
}
#caja1:after{
	content:"";
		display:block;
		height:100%;
		width:100%;
		z-index:2;
		top:0;
		left:0;
}
#cajainfo1{ 
text-align: center;
padding: 80px 20px;
color: #fff;
}	

#cajainfo1 h2{ 
color: #fff;
font-size: 40px;
}
#caja2 a{
	padding: 10px 50px;
	background:#16193B;
	color: #fff; 
	font-size: 35px;
	font-weight: bold;
}
#caja2 a:hover{
	background:#fff;
	color: #16193B; 
}

@media screen and (max-width: 580px) {
#cajainfo1 h2{ 
color: #fff;
font-size: 28px;
}
#caja2 a{
	padding: 10px 50px;
	background:#16193B;
	color: #fff; 
	font-size: 25px;
	font-weight: bold;
}

}

#cajainfo h1{ font-family:bold;
font-size:75px;
margin-bottom:20px;
text-transform:uppercase;
}	
		
#caja #cajainfo{ position:absolute;
color:#fff;
padding: 30px; 
top:50%;
transform:translate(0,-50%);
z-index:3;
width:90%;
max-width:1000px;
}


#caja #cajainfo:after{position:absolute;
bottom:-20px;
left:30px;
height:15px;
width:150px;
background-color:#FFF;
content:"";}

#caja #cajainfo h1{ font-family:bold;
font-size:75px;
margin-bottom:20px;
text-transform:uppercase;}



#caja #cajainfo p{ font-family:normal;
font-size:25px;
margin-bottom:20px;}


	@media only screen and (min-width:1200px) {

body.producto #caja {
padding-top:20%;

	}


}

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

#caja #cajainfo{ 
width:60%;

}

#caja #cajainfo h1{ 
font-size:40px;
}

#caja #cajainfo p{ 
font-size:20px;
}

}






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




#caja #cajainfo:after{
height:10px;
width:100px;
}

}





@media only screen and (max-width:980px) {
#caja {
background-size: auto 100%;

	}

#caja #cajainfo h1{ 
font-size:40px;
margin-bottom:10px;
}

#caja #cajainfo p{ 
font-size:15px;
}

#caja #cajainfo:after{
display:none;
}


}




@media only screen and (max-width:714px) {
	
		body.articulo #caja,
		body.producto #caja,
	body.bodyform #caja,
		body.bodylistados #caja{ padding-top:55%;}

#caja #cajainfo{ 
width:90%;

}


}


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

#caja #cajainfo h1{ 
font-size:25px;
}



}



/*cerró caja*/





#fechaactualizacion{
	text-align:right; 
	font-size:18px; 
	color: #999;
	text-transform:uppercase;
	padding-top:20px;
	margin:20px 0 40px 0;
	border-top:dotted 1px #999;
	font-family:normal;
	}



body.producto #fechaactualizacion{
display:none;
	}



@media only screen and (max-width:500px) {
	
		body.articulo #caja,
	body.bodyform #caja,
		body.bodylistados #caja{ padding-top:65%;}

#caja #cajainfo{ 
width:95%;

}


#fechaactualizacion{

	font-size:12px; 
	margin:20px 0 20px 0;
	}

}









#compartidor { width:80%; float:left;}
#compartidor a{ margin:0 10px 0 0;
float:left;}




/*cerro Pagians Internas **********************************/

















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


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






body.interno #header{ background-color:#fff;
}



	
	
	

	

	
	
	




body.interno #separaheader{ height:110px; }
body.interno #separaheader.reducido{ height:90px; }




#logoheader img{ max-width:280px;
}
body.interno #header.reducido #logoheader img{ max-width:40px;}

body.index #logoheader{ transition:opacity 0.3s linear;}


	
	@media only screen and (max-width:600px) {
		
		#header {
padding:10px;

}


body.interno #separaheader{ height:104px; }
body.interno #separaheader.reducido{ height:80px; }

#header #trigger{
display:block;
 	cursor:pointer;
	position:absolute;
	width:50px;
	height:100%;
	line-height:30px;
	font-size:50px;
	right:10px;
	top:50%;
	transform:translateY(-50%);
	color:#fff;
	transition:all 0.3s linear;	
	font-weight:bold;
}

#header.reducido #logoheader img{ max-width:50px;}

}





/*cerro header **********************************/







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

#vcabeza{ height:100%;
overflow:hidden;
position:relative;
z-index:1;
background:#1c3946;}

#vcabeza:after{top:0;
left:0;
width:100%;
height:100%;
position:absolute;
display:block;
content:"";
background-color: rgba(0,0,0,0.5);
z-index:2;}



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

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














#vcabeza #slogan{
	position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

width:90%;
color:#fff;
text-align:center;
z-index:3;
max-width:800px;
font-size:35px;
letter-spacing:0.03em;
z-index:3;
}


#vcabeza #slogan .frase h1{ 
text-transform:uppercase;
margin:0 0 40px 0;
line-height:1em;
font-size:50px;
position:relative;
}

#vcabeza #slogan .frase h1 em{
	display:block;
	font-size:110px;
	color:#E32119;

}

#vcabeza #slogan #f3.frase h1 em{
	font-size:90px;
}

#vcabeza #slogan .frase h1:after{position:absolute;
bottom:-25px;
height:10px;
width:100px;
/*background-color:#FFF;*/
content:"";
position:absolute;
left: 50%;

transform: translate(-50%, 0);
} 




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

#vcabeza:after{
background-color: rgba(0,0,0,0.7);
}



#vcabeza #slogan .frase h1{ 
line-height:1em;
font-size:25px;

}

#vcabeza #slogan .frase h1 em
{
	font-size:70px;


}


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



#vcabeza #slogan .frase p{

	font-size:0.6em;}


}







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


#vcabeza #slogan .frase h1{ 
line-height:1em;
font-size:25px;

}

#vcabeza #slogan .frase h1 em{
	font-size:60px;


}





}




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


#vcabeza #slogan .frase h1{ 
line-height:1em;
font-size:20px;

}

#vcabeza #slogan .frase h1 em{
	font-size:30px;


}





}


#slogan .frase{display:none;}

















/* yt  *************************************/

#yt{	position:fixed;
	width:100%!important;
	height:100%;
	top:0;
	left:0;
	background-color:rgba(0,0,0,0.8);
	z-index:1000;
	display:none;}
	
	#yt .videowrapper{ width:100%;
	max-width:800px;
	position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding-bottom:28%;
}

#yt #cerrarmenu:hover{ color:#E32119;}
/*cerro yt **********************************/



























/* sep bola  

.sep{ position:relative;}
.sep:before{ width:60px;
height:60px;
background-image:url(SVimagenes/bola.png);
background-size:100%;
content:"";
display:block;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index:10;
}


/*cerro sep bola **********************************/


















/* Generales d los bloques  *************************************/

.bloque{ 
position:relative;
padding:50px 0px 0px 0px;
background-position:center center;
background-size:100% auto;
}



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

.bloque{ 
background-size: auto 100%;
}

}

.bloquesito{ 

position:relative;
margin-right:auto;
margin-left:auto;
width:95%;
max-width:1200px;
overflow:hidden;




}

.bloquesito h1{
font-family:bold;
font-size:45px;
margin-bottom:25px;
}








.bloquesito .resumen{ 
margin:0 auto;
font-size:24px;
}

.bloquesito .resumen,
.bloquesito .resumen p{line-height:1.2em;}

.bloquesito .resumen p{ margin-bottom:25px;
}
.bloquesito .resumen p:last-child{ margin-bottom:0;}




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

.bloquesito h1{
font-size:40px!important;
}

.bloquesito .resumen{ 
font-size:18px;
}

.bloquesito .resumen p{ margin-bottom:15px;
}

}










/*cerro  Generales d los bloques  *************************************/












/* infoindex  *************************************/
#infoindexcontainer{ background-image:url(SVimagenes/fondo-infoindex.jpg);
background-position:center center;
background-attachment:fixed;
color:#fff!important;
overflow:hidden;
}


#infoindexcontainer img{ display:block;
position:absolute;
bottom:-50px;
right:-300px;
max-height:800px;}


#infoindex { width:65%;
margin-left:5%;}


#infoindexcontainer .vermas{ color:#fff!important;
border-color:#fff;}


@media only screen and (max-width:1250px) {
	
	#infoindex { width:80%;
}

#infoindexcontainer img{ 

display:none;
}


}


/*cerro infoindex **********************************/





#noticias{ padding:40px 20px;}

#noticias h1{  text-transform:uppercase;
margin-bottom:10px;
font-size:65px;
text-transform:uppercase;
color:#E32119;}


#noticias .resumen{ margin-bottom:30px;}


#noticias a{ height:400px;}


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

.listados{ overflow:hidden;
text-align:center;
padding:0 25px;
max-width:1400px;
margin-right:auto;
margin-left:auto;}

.listados a{ display:inline-block;
box-sizing: border-box;
text-align:center;
width:23.5%;
margin: 0 2% 2% 0;
color:#292929;
vertical-align:top;
position:relative;
background-color:#f6f6f6;
}


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




.listados a:hover{ background-color:#16193B;
color:#fff;}



.listados a img{ width:100%; 
display:block;
margin-bottom:15px;}

.listados a .info{ padding:0 20px;
position:relative;
z-index:2;}


.listados a .info:before{
	position:absolute;
	top:-43px;
	left:35px;
	transform:translate(-50%,0);
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 30px solid #16193B;
	content:"";
	opacity:0;
}
	
	.listados a:hover .info:before{ opacity:1;


}

.listados a .titulo{ font-family:bold; 
margin-bottom:10px;
font-size:1.2em;
line-height:1.3em;
color:#000;}

.listados a:hover .titulo{ 
color:#fff;}



.listados a .resumen{
	font-family:Arial, Helvetica, sans-serif;
font-size:13px;;
line-height:1.2em;}

.listados a:after{
	display:block;
position:absolute;
left: 50%;
bottom: 15px;
transform: translate(-50%, 0);
width:25px;
height:25px;
line-height:25px;
font-size:25px;
text-align:center;
font-family:mas;
content: "\e600";
z-index:2;
opacity:0;
transition:opacity 0.3s linear;

}


/*.listados a:hover:after{
	opacity:1;
}*/


.listados a .info .listadocategoria{ margin:10px 0 0 0;
font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:rgba(0,0,0,0.4)}







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


.listados a .titulo{ 
font-size:1em;
}

.listados a .resumen{ 
font-size:0.9em;
}

.listados a:after{
	display:none;

}

}



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

.listados a{ 
width:48%;
}
.listados a:nth-of-type(2n){ margin-right:0;}


}

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

.listados a{ 
width:100%;
margin-right:0;
}

.listados a .titulo{ 
font-size:1.5em;
}

}











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


#productoscontainer{ background-color:#FFF;
color:#000;
text-align:center;
}

#productoscontainer h1{ margin-bottom:20px;
font-size:60px;
color:#35478C;
text-transform:uppercase;}

#productoscontainer p.resumen{ margin-bottom:40px;
font-weight: bold;
font-size:20px;}

#productoscontainer #productos{ width:100%;
max-width:100%;
padding:0;
}

#productos a{width:50%;
margin:0;
border:none;
display:block;
float:left;
position:relative;
height:auto;}



#productos a:before{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:1;}


#productos a:hover:before{
background-color:rgba(0,0,0,0.7);
}



#productos a:after{
	top:50%;
	left:50%;
	bottom:auto;
	transform:translate(-50%,-50%);
	height:80px;
	width:80px;
	line-height:80px;
	font-size:80px;
	color:#fff;
	z-index:3;
	opacity:0;
	transition:all 0.3s linear;}



#productos a:hover:after{
	opacity:1;
}


#productos a img{ margin:0;}

#productos a:hover{ background-color:transparent;}

#productos a .info{ position:absolute;
left:25px;
bottom:25px;
color:#fff;
padding:0;
text-align:left;
width:80%;
z-index:3;
transition:opacity 0.3s linear;}


#productos a:hover .info{
	opacity:0;}

#productos a .info:before{display:none;}




#productos a .titulo{ font-size:2em;
color:#fff;
text-transform:uppercase;
position:relative;
margin-bottom:35px}

#productos a .resumen{ font-size:1.2em;}


#productos a .titulo:after{position:absolute;
bottom:-20px;
left:0;
height:10px;
width:100px;
background-color:#35478C;
content:""; }






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

#productos a .titulo{ font-size:1.3em;
}

#productos a .resumen{ font-size:1em;}


}








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

#productos a{width:100%;

}


#productos a .titulo{ font-size:2em;
}

}






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

#productoscontainer h1{ 
font-size:40px;
}


}









@media only screen and (max-width:380px) {
	
	#productos a .titulo:after{display:none; }


#productos a .titulo{ font-size:1em;
margin-bottom:15px;
}

}







/* mariafernanda este es el css del mapa  *************************************/



#articulo108 #mapa,
.bodyform #mapa
{ display:block;}


#mapa iframe{ width:100%;
display:block;
position:relative;
z-index:1;}

#mapa #tapamapa{top:0;
left:0;
width:100%!important;
height:100%;
display:block;
background-color:rgba(0,0,0,0);
transition:all 0.3s ease-out 0s;
z-index:2;
cursor:pointer;
transition:all 0.3s linear;}



#tapamapa:after{display:block;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width:50px;
height:50px;
line-height:50px;
font-size:50px;
text-align:center;
font-family:iconos;
content: "\f002";
z-index:3;
color:#fff;
transition:all 0.3s linear;
opacity:0;}


#tapamapa:before{
	color:#fff;
	font-size:26px;
	text-align:center;
	position:absolute;
	bottom:30px;
	left:50%;
	transform:translate(-50%,0);
	line-height:1.3em;
	width:90%;
	max-width:600px;
	content:"Click en la lupa para explorar mapa";
	z-index:3;
	opacity:0;
	transition:all 0.3s linear;}



#mapa #tapamapa:hover{background-color:rgba(0,0,0,0.6);}
#tapamapa:hover:after,
#tapamapa:hover:before{
opacity:1;}

/*cerro mapa **********************************/

/* videowrapper  *************************************/

.videowrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	
	height: 0;
}
.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*cerro videowrapper **********************************/

/* footer  *************************************/

#footer{ background-color:#7D7D7D;

padding:100px 25px 25px 25px;
overflow:hidden;
color:#fff;
}
#footer a{
	color:#fff;
}
#footer a:hover{
	color:#000;
	font-weight: bold;
}
#footer .fbloque{ width:50%;

padding-left: 40px;
float:left;
box-sizing: border-box;}

#footer #fder{ padding-left:2%;}
#footer #fizq{ padding-right:2%;}

#footer #footerlogo img{ width:100%;
max-width:350px;
margin-bottom:40px;}

#footer #footerinfo{margin-bottom:40px;}
#footer #footerinfo p{ margin-bottom:15px;} a{color: #999999;}

@media only screen and (max-width:800px) {
#footer .fbloque{ width:100%;
float:none;
box-sizing: border-box;}
}

/*formulario del footer **************/
#footer #formulario{ background-color:rgba(0,0,0,0.2);
padding:25px;}

#footer #form{ margin-top:20px;}

#footer #formulario h4{ text-transform:uppercase;
font-family:bold;
font-size:20px;
margin-bottom:10px;}

#footer #formulario label{ display:block;
margin-bottom:30px;}


#footer #formulario label span{ display:block;
font-size:12px;
text-transform:uppercase;
margin-bottom:5px;
color:#ccc;
letter-spacing:1px;
font-family:bold;
}

#footer #formulario label input,
#footer #formulario label select,
#footer #formulario label textarea{
	background-color:transparent;
	border:solid 1px rgba(255,255,255,0.5);
	padding:10px;
	width:100%;
	color:#bebebe;}

#footer #formulario label input:focus,
#footer #formulario label select:focus,
#footer #formulario label textarea:focus{
	border:solid 1px rgba(255,255,255,1);
}

#footer #formulario label textarea{ height:90px;}


/*cerro footer **********************************/

/* redes sociales  *************************************/

#redessociales{
	max-width:350px;
	overflow:hidden;
}

#redessociales a { 
    display:block; 
				float:left;
    font-size:25px;
    color:#fff;
    height: 70px;
    width: 70px;
    text-align: center;
    box-sizing: border-box;
    line-height: 70px;
				transition:all 0.5s ease-out 0s;
cursor:pointer;
background-color:rgba(0,0,0,0.8);
margin:0 5px 5px 0;
}

#redessociales a:hover { 
    color:rgba(255,255,255,1);
background-color:#16193B;

}

#menucontainer #redessociales a{ background-color:rgba(0,0,0,0.1);
color:rgba(255,255,255,0.8);}

#menucontainer #redessociales a:hover{ background-color:rgba(0,0,0,0.5);
color:rgba(255,255,255,1);}

#redessociales a:last-child{ margin-right:0;}

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


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


#redessociales { max-width:250px;}

#redessociales a { 
    font-size:20px;
    height: 40px;
    width: 40px;
    line-height: 40px;
}

}

@media only screen and (max-width:800px) {
#mapa{
	padding-top: 0px;
/* Este tiene display none porque el cliente solo quiere el mapa en un solo articulo, pero en realidad esta metido como include en el SVG-footer.php  */
}
#redessociales { max-width:80%;}

}


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

#menucontainer #redessociales a { 
    font-size:15px;
    height: 40px;
    width: 40px;
				line-height: 40px;

}

}


@media only screen and (max-height:468px) {
#mapa{
	padding-top: 0px;
/* Este tiene display none porque el cliente solo quiere el mapa en un solo articulo, pero en realidad esta metido como include en el SVG-footer.php  */
}

#menucontainer #redessociales { display:none;}



}

/*cerro  redes sociales **********************************/

/*formulario del body **************/

#form{	margin-top:40px;}

#forms{
	column-count:2;
	column-gap:40px;
	margin-top:40px;
	margin-bottom:30px;
	
	}

#form h4{ 
font-family:normal;
font-size:30px;
margin-bottom:40px;
color:#303030;
line-height:1.3em;
position:relative;}

#form h4:after{ position:absolute;
bottom:-20px;
left:0;
height:10px;
width:100px;
background-color:#303030;
content:"";}

#forms label{ display:block;
margin-bottom:40px;
-webkit-column-break-inside: avoid;
break-inside:avoid-column;
page-break-inside: avoid;}


#forms label span{ display:block;
font-size:13px;
text-transform:uppercase;
margin-bottom:5px;
color:rgba(0,0,0,0.6);
letter-spacing:1px;
font-family:Arial, Helvetica, sans-serif;}


#forms label input,
#forms label select,
#forms label textarea{
	background-color:transparent;
	border:solid 1px rgba(0,0,0,0.3);
	padding:15px;
	width:100%;
	color:#999;
	border-radius:3px;}

#forms label input:focus,
#forms label select:focus,
#forms label textarea:focus{
	border:solid 1px #09C;
}

#forms label textarea{ height:90px;}


::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #999999;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #474747;
}

::-webkit-scrollbar-thumb
{
	background-color: #474747;
}