/* 1.COMUN
------------------------------------------------------------------------------------------------ */
body{
font-family:arial; 
line-height:20px;
text-align:left;
color: #666;
p {text-align:left;}
p.indicacion {font-size:0.9em;text-align:center;}
h2 {text-align:center;}
#pagina {width:100%;margin:0 auto;padding:3em 0 0 0;}
#cuerpo {width:100%;margin:0 auto;background: white;}
#left {width:100%; margin: 0 auto;display: inline-block;}
#center {width:100%;max-width:920px;margin:0 auto;}

.marco {width:100%; max-width:670px; height:100%;margin:10px auto;padding:0 15px;border:solid;border-radius: 10px;border-width:thin;background: white;}
.marco p{padding:0 0 0 0px;}
.marco a, .marco2 a{text-decoration: none;color:#3b5998 ;background:rgba(250, 250, 250, 0.8); padding: 2px; border-radius: 5px;}

.cuadro {width:250px; height:150px;margin:10px;padding:0 14px;border:solid;border-color:#f1f2f2; border-radius: 0.6em; background: white;border-width:medium;display: inline-block;float: left;}
.cuadro p{padding:0px;font-size: 0.9em;font-weight: normal;}
.franja1, .franja2, .franja3, .franja4, .franja5, .franja6 {margin:-0.975em -0.937em 0 -0.85em;border-radius: 0.4em 0.4em 0 0;}
.franja1 h3, .franja2 h3, .franja3 h3, .franja4 h3, .franja5 h3, .franja6 h3{padding:10px;color: white;font-size: 1em;font-weight: normal;}
.franja1 {background:#f2b40b url(https://www.albergueolocau.com/fotos/telefono.png) no-repeat center right;}
.franja1 a{color:white;text-decoration: none; display:block;width:100%;height:100%;}
.franja2 {background:#3b5998 url(https://www.albergueolocau.com/fotos/face.png) no-repeat center right;}
.franja2 a{color:white;text-decoration: none; display:block;width:100%;height:100%;}
.franja3 {background:#d95232 url(https://www.albergueolocau.com/fotos/cuore.png) no-repeat center right;}
.franja3 a{color:white;text-decoration: none; display:block;width:100%;height:100%;}
.franja4 {background:#5bc60d url(https://www.albergueolocau.com/fotos/enfermera.png) no-repeat center right;}
.franja4 a{color:white;text-decoration: none; display:block;width:100%;height:100%;}
.franja5 {background:#663399 url(https://www.albergueolocau.com/fotos/ropa.png) no-repeat center right;}
.franja5 a{color:white;text-decoration: none; display:block;width:100%;height:100%;}
.franja6 {background:#339999 url(https://www.albergueolocau.com/fotos/info.png) no-repeat center right;}
.franja6 a{color:white;text-decoration: none; display:block;width:100%;height:100%;}

#footer {width:100%;margin:0 auto;display: inline-block;background: white;}
#footer p{text-align:center;color:#666;}
#footer a{width:100%;margin:0 auto;}

#faja {height:10em; width:100%;background: white; padding: 1.5em 0 0.5em 0;}
#faja p.gigante{text-align:center;color:#666666;font-size: 3em;margin-top: 2em;}

/* 2.HEADER
------------------------------------------------------------------------------------------------ */
#header {margin-top: 0px;
        width:100%;background: rgba(102, 153, 153, 0.7); padding: 50px 0 0 0;}
#header p {text-align: center;font-size: 1em;color: #FFF;}
#header h1 {text-align: center;color: #FFF;}
#header ul {list-style: none;padding: 0;}
#header ul {width: 11em;margin: 0 auto;}
#header ul li a.reservas{text-decoration: none;color: #FFF;display: block;padding: 0.5em;border: solid thin; margin: 0.5em auto;background: rgba(102, 153, 153, 0.8);}
#header ul li a.reservas:hover{color: #cc6666;background: rgba(0, 0, 0, 0.4);}

/* 3.BOTONES
------------------------------------------------------------------------------------------------ */
#slide{width:100%;height:70px;background: #669999;position: fixed;top: 0%;left: 0%;z-index: 1000;}
.botones1 { 
	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;      
}

.botones1 ul, .botones2 ul {
		list-style: none;
	}
.botones1 ul li, .botones2 ul li {
		display: inline;}
.botones1 ul li a{
		display: inline-block;
		color:#fff;
		background: #000;
                border-radius:2em;
		text-decoration: none;
	}
.botones2 ul li a{
		display: inline-block;
		color:#fff;
		background: #000;
		text-decoration: none;
	}
.botones1 ul li a.inicio {background:#336666 url(https://www.albergueolocau.com/fotos/inicio.png) no-repeat center bottom;padding: 1em 1em;}
.botones1 ul li a.icon-facebook2 {background:#336666 url(https://www.albergueolocau.com/fotos/ifacebook2.png) no-repeat center bottom;padding: 1em 1em;}
.botones1 ul li a.icon-twitter2 {background:#336666 url(https://www.albergueolocau.com/fotos/itwitter2.png) no-repeat center bottom;padding: 1em 1em;}
.botones1 ul li a.icon-feed3 {background: #336666 url(https://www.albergueolocau.com/fotos/iblog2.png) no-repeat center bottom;padding: 1em 1em;}
.botones1 ul li a.icon-mail {background: #336666 url(https://www.albergueolocau.com/fotos/imail.png) no-repeat center bottom; padding: 1em 1em; }
.botones2 ul li a.instalaciones {background: #336666; padding: 1em 0.4em;}
.botones2 ul li a.situacion {background: #336666; padding: 1em 0.4em;}
.botones2 ul li a.monitores {background: #336666;padding: 1em 0.9em;}

.botones1 ul li a.inicio:hover {background:#E5E4F9 url(https://www.albergueolocau.com/fotos/inicio.png) no-repeat center bottom;transition:all 2000ms ease;}
.botones1 ul li a.icon-facebook2:hover {background:#3b5998 url(https://www.albergueolocau.com/fotos/ifacebook2.png) no-repeat center bottom;transition:all 2000ms ease;}
.botones1 ul li a.icon-twitter2:hover {background: #00abf0 url(https://www.albergueolocau.com/fotos/itwitter2.png) no-repeat center bottom;transition:all 2000ms ease;}
.botones1 ul li a.icon-feed3:hover {background: #d95232  url(https://www.albergueolocau.com/fotos/iblog2.png) no-repeat center bottom;transition:all 2000ms ease;}
.botones1 ul li a.icon-mail:hover {background: #E5E4F9 url(https://www.albergueolocau.com/fotos/imail.png) no-repeat center bottom;transition:all 2000ms ease;}
.botones2 ul li a.instalaciones:hover {background: #E5E4F9;color:#666666;transition:all 2000ms ease;}
.botones2 ul li a.situacion:hover {background: #E5E4F9;color:#666666;transition:all 2000ms ease;}
.botones2 ul li a.monitores:hover {background: #E5E4F9;color:#666666;transition:all 2000ms ease;}
        

/* 4.MEDIA QUERIES
------------------------------------------------------------------------------------------------ */
@media (max-width: 1035px){
#left {width:100%;max-width:1035px;margin: 0 auto;}
#cuerpo {max-width:1035px;}
.botones2 { 
	left: 70%;}
}
@media (max-width: 950px){
.marco {max-width:500px;}
.marco p {padding:0 0 0 40px;}
.marco2 {display: none;}
.cuadro {width:42%;}
.botones2 { 
	left: 65%;}
}
@media (max-width: 750px){
.marco {max-width:400px;}
.marco p{padding:0 0 0 20px;}
.cuadro {width:92%;height: 100%;}
.botones2 { 
	left: 60%;}
}
@media (max-width: 650px){
.cuadro {width:90%;height: 100%;}
.botones2 { 
	left: 55%;}
}
@media (max-width: 560px){
#header {width:100%;height:660px;}
#header h1 {font-size:1.5em;padding:0;}
#faja {height:4em;}
#faja p.gigante{font-size: 2em;}
.marco {display:none;}
.cuadro {width:100%;margin:5px 0 0 0;padding:0px;}
.cuadro p{padding:0 5px 0 2px;}
.franja1, .franja2, .franja3, .franja4, .franja5, .franja6 {margin:-0.975em 0 0 0;border-radius: 0.4em 0.4em 0 0;height: 2.5em;}
.botones2 {
top:60px; 
left: 50%;
margin-left: -170px;}
.botones1 ul li a.inicio {background:#336666 url(https://www.albergueolocau.com/fotos/inicio.png) no-repeat center;padding: 1.5em 1.5em;}
.botones1 ul li a.icon-facebook2 {background:#336666 url(https://www.albergueolocau.com/fotos/ifacebook2.png) no-repeat center;padding: 1.5em 1.5em;}
.botones1 ul li a.icon-twitter2 {background:#336666 url(https://www.albergueolocau.com/fotos/itwitter2.png) no-repeat center;padding: 1.5em 1.5em;}
.botones1 ul li a.icon-feed3 {background: #336666 url(https://www.albergueolocau.com/fotos/iblog2.png) no-repeat center;padding: 1.5em 1.5em;}
.botones1 ul li a.icon-mail {background: #336666 url(https://www.albergueolocau.com/fotos/imail.png) no-repeat center; padding: 1.5em 1.5em; }
.botones2 ul li a.instalaciones {padding: 0.5em 1em;}
.botones2 ul li a.situacion {padding: 0.5em 1em;}
.botones2 ul li a.monitores {padding: 0.5em 1.4em;}
.botones1 { 
left: 50%;
margin-left: -165px;
background: transparent;}
body{
background:#f1f2f2;}
}