/* 1.COMUN
------------------------------------------------------------------------------------------------ */
body{
font-family:arial; 
line-height:20px;
text-align:left;
color: #666;
background:white;
}
p {text-align:left;}
p.indicacion {font-size:0.9em;text-align:center;}
p.indication {font-size:0.9em;}
p span.blue {color:#00abf0;}
p span.orange {color:#e0611e;}
a span.red {color:red;}
a span.green {color:green;}
a span.white {color:white;}

/* Estructura------------------------------------------------ */
#pagina {width:100%;max-width:1300px;margin:0 auto; }
#header {margin: 0 auto; background:#FFF url(https://www.albergueolocau.com/fotos/headercampas.jpg) no-repeat center top;width:100%; display: inline-block;}
#english {width:50%; float:left;background:white;}
#campas {width:50%;float:left;background:white;}
#large {width:80%;margin:0 auto;display: inline-block;padding-left: 10%;}
#footer {width:100%;margin:0 auto;display: inline-block;background:white;}

/* Encuadrando estructura--------------------------------- */
#campas p{padding:0 5% 0 20%;}
#campas h3{padding:0 5% 0 20%;}
#english p{padding:0 20% 0 5%;}
#english h3{padding:0 20% 0 5%;}
#campas ul{padding:0 5% 0 20%;list-style: none;}
#english ul{padding:0 20% 0 5%;list-style: none;}

/* estilo puro y duro ------------------------------------ */
#campas a{text-decoration:none;color:#3b5998;}
#english a{text-decoration:none;color:#3b5998;}


#footer p{text-align:center;color:#3b5998;}
#footer a{width:100%;margin:0 auto;}

/* 2.HEADER Y RESERVAS
------------------------------------------------------------------------------------------------ */
#header h1 {text-align:left;color:rgba(250, 250, 250, 0.9);padding:12em 0 0 1em;font-size: 2em;}

/* estilo de reservas---------------------------- */
#campas ul li a{color:#e0611e;font-size: 1.2em;}
#campas p a.link {background:#FFF;color:#e0611e;display: block; border-bottom: solid;border-top: solid;}
#campas p a.link:hover {background:#f9b998;color:#FFF;}
#english p a.link {background:#FFF;color:#e0611e;display: block; border-bottom: solid;border-top: solid;}
#english p a.link:hover {background:#f9b998;;color:#FFF;}
#english ul li a{color:#00abf0;font-size: 1.2em}

#resercampas ul{list-style: none;}
#resercampas ul li{font-size: 0.8em;margin:0 auto;width:300px;background: #e0611e;}
#resercampas ul li a.reservas{ color:#666;text-decoration: none;padding: 0.5em 0 0.5em 0;display: inline-block;width: 100%;background:white;margin-top: 0.15em;}
#resercampas ul li a.reservas:hover{color: black;background:#ff9966;}
#resercampas ul li a.titulo{font-size:1.5em;color:#e0611e;display: inline-block; background: rgba(250, 250, 250, 0.9);width: 100%;height: 100%; padding: 1em 0 0.5em 0;text-align:center;}

#reserenglish ul{list-style: none;}
#reserenglish ul li{font-size: 0.8em;margin:0 auto;width:300px;background:#00abf0;}
#reserenglish ul li a.reservas{ color:#666;text-decoration: none;padding: 0.5em 0 0.5em 0;display: inline-block;width: 100%;background:white;margin-top: 0.15em;}
#reserenglish ul li a.reservas:hover{color: black;background:#00abf0;}
#reserenglish ul li a.titulo{font-size:1.5em;color:#00abf0;padding: 1em 0 0.5em 0;display:inline-block;background: rgba(250, 250, 250, 0.9);width: 100%;height: 100%; text-align:center;}



/* estilo de los títulos en círculos de colores-------------------------- */
#campas h2{color:white; background:#ff9966;line-height:1em;text-align:center;width:4em;padding: 1.2em 0.2em 1.2em 0.2em;border-radius: 4em; margin: 1em 0 0 50%;}
#english h2{color:white; background:#00abf0;line-height:1em;text-align:center;width:4em;padding: 1.2em 0.2em 1.2em 0.2em;border-radius: 4em; margin: 1em 0 0 33%;}
a.pascua {background: #669966;width:10em;border-radius: 1em;padding: 0.5em 0.2em 0.5em 0.2em; margin: 1em 0 0 5%;display:inline-block;line-height:1em;font-size:0.9em;text-align: center;}
a.verano{background: #00abf0;width:10em;border-radius: 1em;padding: 0.5em 0.2em 0.5em 0.2em; margin: 1em 0 0 0;display:inline-block;line-height:1em;font-size:0.9em;text-align: center;}
a.septiembre{background: #996666;width:10em;border-radius: 1em;padding: 0.5em 0.2em 0.5em 0.2em; margin: 1em 0 0 0;display:inline-block;line-height:1em;font-size:0.9em;text-align: center;}


/* 3.BOTONES
------------------------------------------------------------------------------------------------ */
#slide{width:100%;height:70px;background: #ffcc99;position: fixed;top: 0%;left: 0%;z-index: 1000;}
.botones { position: fixed;top: 0%;left: 30%;margin-left: -175px;width: 100%;z-index: 2000;}
.botones2 { position: fixed;top: 0%;left: 70%;width: 100%;z-index: 2000;}
.botones ul, .botones2 ul {list-style: none;}
.botones ul li, .botones2 ul li {display: inline;}
.botones ul li a, .botones2 ul li a{display: inline-block;color:#fff;background: #000;text-decoration: none;font-size: 1em;}
.botones ul li a { border-radius:2em;}
		
.botones ul li a.inicio {background: #ff9966 url(https://www.albergueolocau.com/fotos/inicio.png) no-repeat center;padding: 1.1em 1.1em;}
.botones ul li a.icon-facebook2 {background:#ff9966 url(https://www.albergueolocau.com/fotos/ifacebook2.png) no-repeat center;padding: 1.1em 1.1em;}
.botones ul li a.icon-twitter2 {background: #ff9966  url(https://www.albergueolocau.com/fotos/itwitter2.png) no-repeat center;padding: 1.1em 1.1em;}
.botones ul li a.icon-feed3 {background: #ff9966 url(https://www.albergueolocau.com/fotos/iblog2.png) no-repeat center;padding: 1.1em 1.1em;}
.botones ul li a.icon-mail {background: #ff9966 url(https://www.albergueolocau.com/fotos/imail.png) no-repeat center; padding: 1.1em 1.1em;}
.botones2 ul li a.instalaciones {background: #ff9966; padding: 0.9em 0.4em;}
.botones2 ul li a.situacion {background: #ff9966;padding: 0.9em 0.6em;}
.botones2 ul li a.monitores {background: #ff9966;padding: 0.9em 0.5em;}
.botones ul li a.inicio:hover {background:#E5E4F9 url(https://www.albergueolocau.com/fotos/inicio.png) no-repeat center;}
.botones ul li a.icon-facebook2:hover {background:#3b5998 url(https://www.albergueolocau.com/fotos/ifacebook2.png) no-repeat center;}
.botones ul li a.icon-twitter2:hover {background: #00abf0  url(https://www.albergueolocau.com/fotos/itwitter2.png) no-repeat center;}
.botones ul li a.icon-feed3:hover {background: #336666 url(https://www.albergueolocau.com/fotos/iblog2.png) no-repeat center;}
.botones ul li a.icon-mail:hover {background: #E5E4F9 url(https://www.albergueolocau.com/fotos/imail.png) no-repeat center; }
.botones2 ul li a.instalaciones:hover {background: #E5E4F9;}
.botones2 ul li a.situacion:hover {background: #E5E4F9;}
.botones2 ul li a.monitores:hover {background: #E5E4F9;}
/* 4.MEDIA QUERIES
------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1050px){
#header {background:#FFF url(https://www.albergueolocau.com/fotos/headercampas1050.jpg) no-repeat center top; height: 24.25em;}
#header h1{padding:10em 0 0 1em;}
.botones2 {left: 65%;}
a.pascua {width:7em;font-size:0.8em;text-align: center;}
a.verano{width:8em;font-size:0.8em;text-align: center;}
a.septiembre{width:8em;font-size:0.8em;text-align: center;}
}
@media only screen and (max-width: 900px){
.botones2 {left: 60%;}
a.pascua {width:7em;font-size:0.8em;text-align: center;}
a.verano{width:8em;font-size:0.8em;text-align: center;}
a.septiembre{width:8em;font-size:0.8em;text-align: center;}
}
@media only screen and (max-width: 800px){
#header {background:#FFF url(https://www.albergueolocau.com/fotos/headercampas800.jpg) no-repeat center top;height: 18.5em;}
#header h1{padding:7em 0 0 1em;}
.botones2 {left: 50%;}
a.pascua {width:7em;font-size:0.7em;text-align: center;}
a.verano{width:7em;font-size:0.7em;text-align: center;}
a.septiembre{width:7em;font-size:0.7em;text-align: center;}
}
@media only screen and (max-width: 620px){
p.indication {display:none;}
#header {display:none;}
#pagina {padding:80px 0 0 0;}
#english {width:100%;width:80%;margin:0 auto;display: inline-block;padding-left: 10%;}
#campas {width:100%;margin-top: 40px;}

#campas p{padding:0;}
#campas h3{padding:0;}
#english p{padding:0;}
#english h3{padding:0;}
#campas ul{padding:0;}
#english ul{padding:0;}
#campas h2{margin: 0 auto;}
#english h2{margin: 0 auto;}
#slide{height:110px;}
.botones { position: fixed;top: 0%;left: 50%;margin-left: -170px;}
.botones2 { position: fixed;top: 3.2em;left: 50%;margin-left: -175px;}
.botones ul li a { border-radius:2em;}
.botones ul li a.inicio {padding: 1.5em 1.5em;}
.botones ul li a.icon-facebook2 {padding: 1.5em 1.5em;}
.botones ul li a.icon-twitter2 {padding: 1.5em 1.5em;}
.botones ul li a.icon-feed3 {padding: 1.5em 1.5em;}
.botones ul li a.icon-mail {padding: 1.5em 1.5em;}
.botones2 ul li a.instalaciones {padding: 0.5em 0.4em;}
.botones2 ul li a.situacion {padding: 0.5em 0.6em;}
.botones2 ul li a.monitores {padding: 0.5em 0.5em;}
a.pascua {width:7em;font-size:0.7em;text-align: center;}
a.verano{width:7em;font-size:0.7em;text-align: center;}
a.septiembre{width:7em;font-size:0.7em;text-align: center;}
}