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

@font-face {
    font-family: 'open_sansbold';
    src: url('opensans-bold.eot');
    src: url('opensans-bold.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold.woff2') format('woff2'),
         url('opensans-bold.woff') format('woff'),
         url('opensans-bold.ttf') format('truetype'),
         url('opensans-bold.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansitalic';
    src: url('opensans-italic.eot');
    src: url('opensans-italic.eot?#iefix') format('embedded-opentype'),
         url('opensans-italic.woff2') format('woff2'),
         url('opensans-italic.woff') format('woff'),
         url('opensans-italic.ttf') format('truetype'),
         url('opensans-italic.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light.eot');
    src: url('opensans-light.eot?#iefix') format('embedded-opentype'),
         url('opensans-light.woff2') format('woff2'),
         url('opensans-light.woff') format('woff'),
         url('opensans-light.ttf') format('truetype'),
         url('opensans-light.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url('opensans-regular.eot');
    src: url('opensans-regular.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular.woff2') format('woff2'),
         url('opensans-regular.woff') format('woff'),
         url('opensans-regular.ttf') format('truetype'),
         url('opensans-regular.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html, body{ width:100%; height:100%; font-family: 'open_sansregular';}

.textoBoxMap{
	font-family: 'open_sansregular';
	color:white;
	font-size: 15px;
	padding:20px;
}

.paddingFix{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
  	box-sizing: border-box;         /* Opera/IE 8+ */
	}

#containerHeader{
	width:100%;
	height:75px;
	background:#FFF;
	float:left;
	position: fixed;
	left:0;
	top:0;
	z-index:15;
	}
	
#logoContainer{
	width:265px;
	height:116px;
	background:url(../images/logo_bg.png) left top no-repeat;
	position:absolute;
	left:0;
	top:0;
	z-index:15;
	}
	
#logo{
	width:167px;
	height:101px;
	background:url(../images/logo_erreka.png) center center no-repeat;
	background-size:167px;
	margin:7px 0 0 25px; 
	}
	
#headerMenu{
	font-family: 'open_sansregular';
	font-size:18px;
	color:#666666;
	margin-right:15px;
	/*margin-left:266px;*/
	background:#FFF;
	position:absolute;
	top:0;
	right:0px;
	z-index:13;
	}
	

	
#headerMenu li{ float:left; margin:25px 20px 25px 20px; cursor:pointer;}

#headerMenu li a{ text-decoration:none; color:#666666;}


#headerMenu li a:hover{ color:#b3b3b3;}

.btnGoSelected{ color:#b80014!important;}
	

#menuMobile{
	width:50px;
	height:42px;
	float:right;
	background:url(../images/menuMobileIcon.png) center center no-repeat; background-size:40px;
	position:absolute;
	right:15px;
	top:20px;
	z-index:35;
	display:none;
	}
	
	
#quienesContainer{
	width:100%;
	min-height:auto;
	padding:150px 0 150px 0;
	float:left;
	background:url(../images/DSC011011.JPG) center -100px no-repeat;
	background-size:cover;
	color:#FFF;
	position:relative;
	text-align:center;
	margin-top:75px;
	}
	
#quienesSomos{
	width:80%;
	display:inline-block;
	}
	
#quienesSomos h1{
	float:left;
	font-family: 'open_sansregular';
	font-size:36px;
	margin-bottom:20px;
	}
	
#quienesSomos h1 b{
	font-family: 'open_sansbold';
	}
	
#quienesSomos p{
	width:100%;
	float:left;
	display:block;
	text-align:justify;
	font-family: 'open_sansregular';
	font-size:14px;
	line-height:17px;
	}
	
	
.redBtn{
	padding:10px 15px 10px 15px;
	background:#b80014;
	color:#FFF!important;
	cursor:pointer;
	display:inline-block;
	margin-top:30px;
	margin-bottom:50px;
	text-decoration:none;
	}
	
	
.redBtn:hover{
	background:#930217;
	}
	
	
	
/*estilos de productos*/

#productosContainer{
	width:100%;
	min-height:610px;
	float:left;
	position:relative;
	text-align:center;
	}
	
#productoMainNav{
	width:80%;
	
	min-height:610px;
	text-align:center;
	display:inline-block;
	}
	
#productosContainer h1{
	width:100%;
	float:left;
	text-align:center;
	margin-top:50px;
	}
	
.spacer{ width:100%; height:70px; float:left;}
	
.catego{
	width:170px;
	height:180px;
	padding-top:145px;
	display:inline-block;
	margin:0 30px 30px 30px;
	cursor:pointer;
	}
	
.catego p{
	font-size:18px;
	color:#999999;
	text-align:center;
	}
	
.catego:hover p{ color:#666666;}
	
#batientes{ background:url(../images/batientes.png) center top no-repeat; background-size:130px;}
#corredizas{ background:url(../images/corredizas.png) center top no-repeat; background-size:130px;}
#seccionales{ background:url(../images/seccionales.png) center top no-repeat; background-size:130px;}
#enrrollables{ background:url(../images/enrrollables.png) center top no-repeat; background-size:130px;}
#barreras{ background:url(../images/barreras.png) center top no-repeat; background-size:130px;}
#complementos{ background:url(../images/complementos.png) center top no-repeat; background-size:130px;}


/*estos son los estilos de donde se muestran los productos*/

#seccionProducto {
	width:80%;
	min-height:610px;
	position:relative;
	text-align:center;
	display:inline-block;
	}
	
#cerrarBtn{
	width:30px;
	height:30px;
	position:absolute;
	right:0;
	top:-20px;
	background:url(../images/cerrar.png) center center no-repeat;
	cursor:pointer;
	}
	
#seccionProducto h2{
	font-size:18px;
	color:#b80014;
	margin-top:10px;
	display:inline-block;
	}

#modelosContainer{
	width:100%;
	min-height:30px;
	float:left;
	margin-top:30px;
	text-align:center;
	border-bottom: solid 1px #999999;
	}
	
.unModelo{
	font-size:18px;
	color:#666666;
	cursor:pointer;
	margin:0 25px 10px 25px;
	display:inline-block;
	cursor:pointer;
	}
	
#modeloLeft{
	width:50%;
	min-height:350px;
	margin-top:30px;
	margin-bottom:30px;
	float:left;
	background-position:center center;
	background-repeat:no-repeat;
	}

#modeloRight{
	width:50%;
	min-height:350px;
	margin-top:30px;
	margin-bottom:30px;
	float:left;
	text-align:left;
	color:#4d4d4d;
	}
	
#modeloRight h1{
	font-family: 'open_sansbold';
	font-size:16px;
	text-align:left;
	margin-bottom:10px;
	}
	
#modeloRight p{
	margin-bottom:20px;
	line-height:19px;
	}
	
#listadoProducto{
	float:left;
	width:100%;
	
	}

#listadoProducto li{
	float:left;
	width:100%;
	margin-bottom:5px;
	line-height:21px;
	list-style:disc;
	margin-left:25px;
	margin-right:20px;}

#listadoProducto li b{
	font-family: 'open_sansbold';
	}

.productSelected{
	font-family: 'open_sansbold';
	}
	
	
/*complementos*/

#complementosCont {
	width:80%;
	min-height:610px;
	position:relative;
	text-align:center;
	display:inline-block;
	}

#complementosCont h2{
	font-size:18px;
	color:#b80014;
	margin-top:10px;
	display:inline-block;
	}	
	
#comlementoCoverWrapper{
	width:100%;
	float:left;
	}
	
#coverComplementos{
	max-width:800px;
	height:auto;
	display:inline-block;
	margin:35px 0 35px 0;}
	
#complementosTexto{
	width:100%;
	min-height:30px;
	line-height:21px;
	float:left;}
	
#complementosTexto span{ color:#b80014;}

.btnComplementosWrapper{
	width:100%;
	float:left;
	text-align:center;
	}

/*ESTILOS DE MAPA*/

#containerMapa{
	width:100%;
	height:335px;
	float:left;
	background:#e5e5e5;
	}
	
#map_canvas{
	width:100%;
	height:335px;
	float:left;
	}
	
	
	
/*ESTILOS DE CONTACTO*/
#containerMail{
	width:100%;
	height:auto;
	background:#333333;
	float:left;
	text-align:center;
	}
	
#mail{
	display:inline-block;
	}
	
#mail h1{
	width:110px;
	height:25px;
	float:left;
	padding-left:35px;
	background:url(../images/mailIcon.png) left center no-repeat;
	background-size:30px;
	padding-top:5px;
	margin-top:20px;
	margin-bottom:15px;
	color:#ffffff;
	}
	
.mailBtn{ 
	padding:10px 15px 10px 15px;
	border: solid 1px #f2f2f2;
	float:left;
	color:#666666;
	margin-left:20px;
	margin-bottom:15px;
	margin-top:15px;
	cursor:pointer;
	text-decoration:none;
	}
	
.mailBtn:hover{ color:#ffffff;}
	
	
	
/*footer*/

#footer{
	width:100%;
	float:left;
	padding:10px 0 10px 0;
	background:#b80014;
	color:#FFF;
	font-size:11px;
	text-align:center;
	}
	
	
/*LOWER SCREENS*/

@media screen and (max-width: 800px) {
#modeloLeft{
	width:100%;
	background-size:250px;
	}

#modeloRight{
	width:100%;
	}
}

@media screen and (max-width: 777px) {
	
	#logoContainer{
		top:-1px;
	left:-20px;
	}
	
	
	#quienesSomos h1{
	float: none;
	font-size:26px;
	}
	
	#menuMobile{ display:block; cursor:pointer;}
	
	#headerMenu{
		width:120px;
		height:235px;
		background: #FFF;
		margin-right:0px;
		margin-top:70px;
		position:absolute;
	right:0px;
	top:5px;
	z-index:30;
		display:none;
		
	}

.mailBtn{ 
	margin-left:5px;
	}
	



}