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

body {background-image:url(../img/fondo.png);
	background-repeat:repeat;
	margin:0 auto;}

/*Aquí empieza la cabecera*/	
.header {margin: 0 auto; height: 200px;}

.headerinterno {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

h1 {color: #664024;
	font-family: 'Droid Serif', serif;
	font-style: italic;
	font-weight: bold;
	font-size: 26px;}

/*Aquí está la parte de la cabecera compuesta por logotipo, imagotipo y teléfonos*/
.divparalogos {
width: 300px;
float: left;}
	
.LaCabanaLOGO {width: 300px;
margin-top: 20px;}
	
.Cabana {height: 115px;
margin-top: -5px;}
	
.telefonos {margin-top: -100px;
margin-left: 162px;
width: 200px;}

.tlf, .whatsapp{float:left; margin-top: -10px;}

/*Esto son los botones o la navbar de la web*/

.navbar {
top: 0;
width: 500px;
height: 10px;
float: right;}

.navbar ul{
	margin-left:auto;
	margin-right:0;}

.navbar ul li{
	list-style:none;
	}
	
.navbar ul li a{
color: #664024;
text-decoration: none;
font-family: 'Droid Serif', serif;
float: left;
font-style: italic;
font-weight: bold;
padding: 70px 20px 20px 20px;
margin-top: -16px;
}

.navbar ul li a:hover{
	color:#ffffff;
	background-color:#664024;}
	

h3{font-family: 'Droid Sans', sans-serif; font-size:18px; font-weight:bold; color:#664024;}
	
.banderitas {margin-top: 160px;
width: 85px;
margin-right: 0px;
margin-left: 400px;
float: right;}
	
	
/*ESTO es el slide*/

.slide {width: 1000px;
	height: 400px;
	background: white;
	align-content: center;
	margin-left: auto;
	margin-right: auto;
	position:relative;
	margin-bottom: 70px;
	}
	
.lineaslide {
position: absolute;
bottom: 0;
width: 1000px;
top: 400px;
}

/*Esto es el párrafo de descripción de la HOME*/

.Lacabanadescripcion {width: 1000px;
margin-left: auto;
margin-right: auto;}

p { color: #663f24; font-family:  'Droid Serif', serif; font-size: 18px;}
	
span{font-style:italic; font-weight:bold;}

.caracteristicas {
position: relative;
margin-left: auto;
width: 1000px;
margin-right: auto;
height: 248px;}

h2{
	font-family: 'Droid Serif', serif;
font-style: italic;
color: #664024;
font-size: 18px;
}
	
/*Esto son las imágenes de debajo de la descripción, la mejor sidra, la mejor comida asturiana tradicional y pescados y mariscos*/
	
.caracteristica1, .caracteristica2, .caracteristica3 {
width: 333px;
float: left;
height: 248px;
position: relative;
}

.Sidra, .pescadoymarisco, .Comidaasturiana, .novisible, .novisible2, .novisible3 {width: 300px;}

/*Esto son las lineas de debajo de las imágenes de "la mejor sidra" "cocin tradicional asturiana" y "el mejor pescado y marisco"*/
.linedeg1, .linedeg3 {
z-index: 10;
position: absolute;
bottom: 0;
left: 0;
width: 300px;}

.linedeg2 {
z-index: 15;
position: absolute;
bottom: 0;
left: 0;
width: 300px;
}


/*Esto es el trukichi del transform de la imagen en hover*/
img.novisible {
opacity: 0;
filter: alpha(opacity=0);
position: relative;
top: -187px;}
	
.caracteristica1:hover img.novisible {opacity:1;filter:alpha(opacity=100);}

.caracteristica1:hover img.visible {opacity:0;filter:alpha(opacity=0);}
.caracteristica1 img.visible:hover {opacity:0;filter:alpha(opacity=0);}  


img.novisible2 {
opacity: 0;
filter: alpha(opacity=0);
position: relative;
top: -187px;
}
	
.caracteristica2:hover img.invisible {opacity:1;filter:alpha(opacity=100);}

.caracteristica2:hover img.Comidaasturiana {opacity:0;filter:alpha(opacity=0);}
.caracteristica2 img.Comidaasturiana:hover {opacity:0;filter:alpha(opacity=0);}  


img.novisible3 {
opacity: 0;
filter: alpha(opacity=0);
position: relative;
top: -187px;}
	
.caracteristica3:hover img.novisible3 {opacity:1;filter:alpha(opacity=100);}

.caracteristica3:hover img.visible3 {opacity:0;filter:alpha(opacity=0);}
.caracteristica3 img.visible3:hover {opacity:0;filter:alpha(opacity=0);}  

/*aquí termina el trukichi :)*/


/*ESTO SON LOS LOGOTIPOS DE SODEXO INDEXA Y BAOBAB*/

.logotiposvarios {
top: 48px;
width: 709px;
position: relative;
margin-left: auto;
margin-right: auto;
left: 150px;
}

.logoSODEXO, .logoINDEXA, .logoBAOBAB {width:125px;}

.logoSODEXO {width: 140px;}

.logoBAOBAB {width: 100px;}

/*AQUÍ EMPIEZA EL FOOTER*/

.footer {
background-color: #664024;
margin-top: 80px;
}

.footerinterno {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

.mapaweb {
width: 107px;
padding: 5px 0px 5px 10px;
float: left;
}

h4 {
color: #ffffff;
font-family: 'Droid Serif', serif;
font-size: 14px;
font-style: italic;
}

.lineaPIE1, .lineaPIE2, .lineaPIE4 {
margin-top: -18px;
width: 120px;
height: 4px;
}

.parrafo {
color: #ffffff;
font-family: 'Droid Serif', serif;
font-size: 14px;
font-style: italic;
line-height: 1.5;
}

/*ESTO ES LA PARTE EN NEGRITA DEL CONTACTO POR WHATSAPP*/

.parrafoNEGRO {
color: #ffffff;
font-family: 'Droid Serif', serif;
font-size: 14px;
font-weight:bold;
line-height: 1.5;
}

.horario {
float: left;
padding: 5px 10px 5px 0px;
width: 201px;
margin-left: 30px;
}

.contacto {
padding: 5px 10px 5px 10px;
float: left;
}

body > div.footer > div > div.contacto > span {
color: #ffffff;
font-family: 'Droid Serif', serif;
font-size: 15px;
font-weight: bold;
font-style: italic;
margin-left: -205px;
}

.lineaPIE3 {
position: relative;
top: -30px;
width: 200px;
}

.mapa {
width: 300px;
height: 223px;
float: left;
}

.mapacabanaaa {
margin-left: 40px;
margin-top: 15px;
}

/*ESTO es para posicionar el IFRAME del mapa*/
body > div.footer > div > div.mapa > iframe {
margin-left: 40px;
margin-top: 15px;
}

.MapaLaCabana {
padding: 25px 10px 5px 35px;
}

.trabajar {
width: 300px;
position: relative;
left: 670px;
top: -40px;
}

/*Aquí empieza la página de Menú*/

.contenidoMENUinterno {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

.lineaMENU {
margin-top: -16px;
width: 300px;
height: 5px;
}

.DescriCABANA{margin-top: 0px; line-height: 1.8;}

.cartaINTERNA {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

/*Esto son las imágenes de los platos del Menú*/
body > div.carta > div > img {
width: 320px;
margin-right: 10px;
margin-top: 10px;
}

/*Esto es el DIV de las transparencias y el botón pa subir la carta*/
.contenidobajointerior {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 365px;
margin-top: 20px;
}

.transparencia {
width: 500px;
float: left;
}

.boton {
width: 225px;
float: right;
margin-right: 15px;
}

.transparencia2 {
width: 324px;
float: right;
margin-top: 65px;
}

/*AQUÍ EMPIEZA LA PESTAÑA DE RESERVA*/

.lineaMENU2 {
margin-top: -16px;
width: 720px;
height: 5px;
}

.reservainterior {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

.reservatumesa {line-height: 1.8;}

.phone {width: 490px; float:left;}

.reserva2 {
width: 490px;
margin-left: 20px;
}

.contactanos{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	}

.lineaMENU3 {
margin-top: -16px;
width: 475px;
height: 5px;
}

.boulevard {
width: 1000px;
}

.imagenes {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}

.Lacabana1 {
width: 460px;
float: left;
}

.Lacabana2 {
width: 505px;
margin-left: 20px;
}