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



* {padding: 0; margin: 0;}
a {outline: 0; text-decoration:none; color:#a00;}
a:hover{color:#F00;}
a img {border-width:0;}


body{
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size:12px;
	font-weight:normal;
	color:#5F646B;
	background: #2C0000 url("img/fondo.jpg") no-repeat top right fixed;
}


header{
	position:relative;
	margin: 0 auto;
	height:auto;
	min-height: 130px;
	width: 95%;
	max-width:1200px;
	background: url("img/superior.png") no-repeat top left;
}

#social{
	position: absolute;
	right: 40px;
	top: 20px;
	text-align: right;
	color:#CCC;
}
#social a{
	padding: 4px;
	font-size: 14px;
	font-weight: bold;
}

#logo{
	padding: 20px;
}
#buscador input{
	position: absolute;
	left: 320px;
	top:20px;
	width: 30%;
	padding: 8px 8px 8px 44px;
	font-size: 16px;
	background: #FFF url("img/buscar.png") no-repeat 10px center;
	border: none;
	border-radius: 2px;
	box-shadow: #AAA 2px 2px 5px inset;
}
#buscar{
	padding: 5px 5px 5px 40px;
	font-size: 16px;
	background: #FFF url("img/buscar.png") no-repeat 10px center;
	border: none;
	border-radius: 4px;
	box-shadow: #AAA 2px 2px 5px inset;
}


#menuhorizontal{
	text-align: center;
}
#menuhorizontal a{
	display: inline-block;
	padding: 16px 10px;
	font-size: 14px;
	font-weight: bold;
	color: #DCC;
}
#menuhorizontal a:hover{
	background:#F32;
	color:#FFF !important;
	border-radius: 3px 3px 0 0;
}
#menuhorizontal a img{
	display: none;
}

#adorno-navidad{
	display: block;
	position: relative;
	margin: -40px  auto 5px auto;
	z-index: 20000;
}

#central{
	position:relative;
	margin: 0 auto;
	clear: both;
	width: 95%;
	max-width:1400px;
	background: #FFF;
	box-shadow: #000 0 0 15px;
}

h1{
    font-family: 'Roboto Condensed', verdana, sans-serif;
	font-size: 26px;
	letter-spacing: 2px;
	font-weight:normal;
	color:#D00;
	padding: 20px 2%;
	text-transform:uppercase;
}

h2{
	font-size: 16px;
	color:#A00;
	padding: 25px 0 10px 4%;
}



.textodestacado, #mas{
	background: linear-gradient(to right, #480000, #9E0000);
	padding: 15px 3%;
	color:#FFF;
}
#mas{
	text-align: center;
}
#mas div, #mas form{
	padding: 8px 0;
}
.textodestacado img{
	display: block;
	position: relative;
	margin: 10px auto 0 auto;
	box-shadow: #000 0 5px 20px;
	max-width: 100%;
}
.textodestacado strong, #mas strong{
	display: block;
	font-size: 16px;
	color: #FCB100;
}
.textodestacado a, #mas a{
	color: #FFC !important;
}

.textodestacado a:hover, #mas a:hover{
	color: #FFF;
	text-decoration: underline;
}

#indice{
	padding: 40px 3%;
}
#indice a{
	display: inline-block;
	width: 80%;
	max-width: 200px;
	margin: 5px;
	padding: 10px 2%;
	text-align: center;
	border-radius: 4px;
	color:#666;
	min-height: 160px;
	vertical-align: top;
}
#indice img{
	display: block;
	position: relative;
	margin: 10px auto;
	box-shadow: #AAA 0 0 20px;
	border-radius: 4px;
}
#indice strong{
	display: block;
	color:#000;
	font-size: 16px;
}
#indice a:hover{
	color: #C00;
	background:#EEE;
}


#central p{
	padding: 10px 5%;
	font-size: 13px;
	line-height:125%;
}


li{
	margin: 2px 65px;
	list-style-type:square;
}

#menuvertical{
	padding: 10px 0;
	background: linear-gradient(to bottom, #FFF, #DDD,#FFF);
}
#menuvertical a{
	display: block;
	padding: 2px 12px;
	font-size: 13px;
	color: #666;
}
#menuvertical a:hover{
	background: #F32 linear-gradient(to right, #1B0000,#cc0000);
	color: #FFF;
	font-size: 18px;
	text-align: right;
	padding-bottom: 10px;
}
#menuvertical a img{
	position: relative;
	top: 2px;
	width: 32px;
	border-radius: 50%;
	transition:width 0.1s;
	margin-right: 5px;
}

.clientes1{
	text-align: center;
	margin-bottom: -15px;
}

.clientes1 p{
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: 8px !important;
	color:#E00;
	padding: 0;
}

.clientes2{
	clear: both;
	width: 96%;
	border-top: #DDD 1px solid;
	padding: 5px 2% 20px 2%;
	text-align: center;
}

.clientes2 p{
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: 8px !important;
	color:#AAA;
	padding: 0 0 10px 0;
}
.clientes1 a img, .clientes2 a img{
	margin: 6px 15px;
	width: 80%;
	max-width: 320px;
}

footer{
	clear:both;
	color:#FFF;
	background: #100;
	border-top: #F00 1px solid;
	line-height: 160%;
	margin-top: 80px;
	padding: 10px 10px 60px 10px;
	text-align: center;
	box-shadow: #C00 0 0 40px;
}

footer div{
	width: auto;
	display: inline-block;
	padding: 10px 3%;
	border-right: #590000 1px solid;
	text-align: left;
	font-size: 13px;
	vertical-align: top;
	margin: 30px 0;
}
footer div:last-child{
	border: none;
}

.fn{
	font-weight: bold;
}
footer .tel{
	color:#FFF;
	font-size: 16px;
}

#cookieinfo{
	display:block;
	position: fixed;
	left: 0;
	bottom:0;
	width: 100%;
	background:#000;
	opacity: 0.7;
	text-align: center;
	padding: 12px 0 6px 0;
	font-size: 14px;
	color: #DDD;
}
#cookieinfo strong{
	margin: 0 30px;
	font-size: 18px;
}
#cookieinfo img{
	float: right;
	margin-right: 20px;
}

.error{
	display:block;
	background: #333 url("img/error.png") no-repeat center 10px;
	min-height:140px;
	width: 80%;
	text-align: center;
	max-width: 700px;
	margin: 60px auto;
	padding: 150px 20px 10px 20px !important;
	box-shadow: #666 0 2px 4px;
	border-radius: 8px;
	font-size: 15px;
	color:#FFF;
}
.error strong{
	display:block;
	padding-bottom: 10px;
	font-size: 21px;
	color:#FFF;
}

.error:hover{
	background-color: #FB8A00;
	transition: background 0.4s;
	color: #FFF;
}




@media screen and (max-width: 780px) {
	#social{
		display: block;
		width: 90%;
		padding: 5px 5%;
		clear: both;
		right: 0;
		top: 0;
		left: 0;
		text-align: center;
		background: #000;
	}
	#social a img{
		width: 18px;
		margin: 0 8px;
	}

	#logo{
		display: block;
		clear: both;
		position: relative;
		margin: 0 auto;
		padding-top: 40px;
		width: 60px;
	}
	#buscador{
		height: 50px;
	}
	#buscador input{
		display: block;
		position: relative;
		margin: 2px auto;
		left: 0 !important;
		top: 0 !important;
		width: 70%;
		clear: both;
	}

	#menuhorizontal a{
		padding: 0;
	}
	#menuhorizontal a img{
		display: block;
		width: 40px;
	}
	#menuhorizontal a span{
		display: none;
	}

	#iframe_aemet_id29084{
		transform: scale(0.7);
	}

	#menuvertical{
		display: none;
		margin: 0;
		padding: 10px 0;
		border-bottom: #A00 2px solid;
	}
	#menuvertical a{
		font-size: 16px;
		padding: 2px 3%;
		display: inline-block;
		width: 40%;
		border-radius: 3px;
	}
	#menuvertical a img{
		display: block;
		margin-bottom: 3px;
	}

	#central{
		margin:0;
		width: 100%;
	}
	footer{
		margin: 0;
	}
	footer div{
		padding: 2px 5%;
		text-align: center;
	}
	footer img{
		max-width: 70%;
		height: auto;
	}
	#cookieinfo{
		display: none;
	}
}


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

	#btnmenu{
		display: none !important;
	}

	#contenido{
		display: flex;
	}
	aside{
		flex: 0 0 240px;
		border-right: #ddd 1px solid;
	}
	main{
		flex-grow: 1;
	}
	#menuvertical{
		min-height: 1180px;
	}
	#menuvertical a:hover img{
		display: block;
		width: 90px;
		margin-bottom: 10px;
		border-radius: 50%;
		transition:width 0.2s;
	}
}





@media screen and (max-width: 990px) {
	#buscador input{
		top: 110px;
		left: auto;
		right: 15%;
	}

	footer{
		text-align: center;
	}
	footer div{
		border: none;
	}
}

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


	#menuhorizontal{
		position: absolute;
		bottom: 0;
		right: 0;
		width: auto;
		height: 88px;
		padding: 0 20px;
	}

	#menuhorizontal a{
		display:inline-block;
		vertical-align: top;
		position: relative;
		padding: 8px 15px 16px 15px;
		height:18px;
		font-size:15px;
		top: 48px;
		transition: top 0.5s;
	}
	#menuhorizontal a img{
		display: none;
	}
	#menuhorizontal a:hover{
		top:0;
		height: 66px;
		transition: top 0.2s;
	}
	#menuhorizontal a:hover img{
		display: block;
		position: relative;
		margin: 0 auto;
		width: 48px;
	}

}