/*Miguel Septiembre 2017*/

body {
        overflow-x: hidden;
        overflow-y: scroll;
}
@media (max-width: 768px) {
        .visible-xs .visible-sm, .visible-md, .visible-lg {
                display: block !important;
        }
        .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg {
                display: block !important;
        }
}
/* Menu */
nav li {
    padding: 0vh 20vw;
}
#disparador {
    position: fixed;
    font-size: 20px;
    top: 0;
    left: 3vw;
    border-radius:0px 0px 10px 10px;
    border: 1px solid white;
    cursor: pointer;
    padding: 40px 20px 5px;
    z-index: 20;
}
#disparador span {
    margin:0 5px;
}
#navegacion {
    position: fixed;
    z-index: 21;
    display: none;
    width: 100vw;
}
#navegacion a {
        display: inline-block;
        width: 100%;
}

ul.list-unstyled {
    padding: 5vh 0;
}
.itemMenu {
    float: none;
    display: block;
    width: 100%;
}
@media (max-width:767px) {
        #disparador {
                padding-top: 10px !important;
        }
}
/*Cabecera*/
#fotoCabecera {
        height: 95vh;
        background: bottom center no-repeat url("../images/foto-banner-3000.jpg");
        background-size: cover;
}
#fotoCabecera img {
        display: block;
        margin: auto;
        position: relative;
        height: 25vh;
        top: 72vh;
}
img.animada {
        opacity: 0; 

}
img.aparecida {
        opacity: 1;
        transition: opacity 1.8s ease;
        -moz-transition: opacity 1.8s ease; 
        -webkit-transition: opacity 1.8s ease;
        -o-transition: opacity 1.8s ease; 
}

#logobarambio img {
               height: 15%;
                width: 300px;
        }
        
        @media (max-width:990px) {
       #logobarambio img  {
                
                 width: 300px;
        }
}


@media (max-width:990px) {
        #fotoCabecera {
                background: bottom center no-repeat url("../images/foto-banner-700.jpg");        
        }
}
@media (max-width:1500px) {
        #fotoCabecera {
                background: bottom center no-repeat url("../images/foto-banner-1000.jpg");        
        }
}
@media (max-width:2500px) {
        #fotoCabecera {
                background: bottom center no-repeat url("../images/foto-banner-1500.jpg");
                background-size: cover;
        }
}
/*Mosaico imagenes*/
#mosaico > div.row {
        padding: 25px 5vw;
}
#mosaico  div.tesela {
        height: 16.3vw;
        margin: 1vw;
        width: 16.3vw;
        float: left;
}
#mosaico img:hover {
        transition: 1.1s ease;
        -moz-transition: 1.1s ease; /* Firefox */
        -webkit-transition: 1.1s ease; /* Chrome - Safari */
        -o-transition: 1.1s ease; /* Opera */
        transform : scale(1.1);
        -moz-transform : scale(1.1); /* Firefox */
        -webkit-transform : scale(1.1); /* Chrome - Safari */
        -o-transform : scale(1.1); /* Opera */
        -ms-transform : scale(1.1); /* IE9 */
}
@media (max-width:1199px){
        #mosaico  div.tesela {
                height: 21vw;
                width: 21vw;
        }
}
/*@media (max-width:991px){
        #mosaico  div.tesela {
                height: 29vw;
                width: 29vw;
        }

}
@media (max-width:767px){
        #mosaico  div.tesela{
                height: 44vw;
                width: 44vw;
                margin: 1.5vw;
        }
        #teselas div.tesela:nth-child(even) {
                float: right !important;
        }

}*/
/*Fotografiando*/
.tramado {
        background: left top repeat url("../images/tramaDark.png");
        padding: 20px 2vw;
}
#afotar {
        background: right center no-repeat url("../images/turista-1200.jpg");
        background-size: cover;
}
#afotar > div {
        padding: 30vh 25px 18vh;
        width: 40vw;
}
#afotar + div.row {
        padding: 0px 2vw 10px;
}
#afotar + div.row > h1 {
        transform : scale(1.3);
        -moz-transform : scale(1.3); /* Firefox */
        -webkit-transform : scale(1.3); /* Chrome - Safari */
        -o-transform : scale(1.3); /* Opera */
        -ms-transform : scale(1.3); /* IE9 */
}
i {
        font-size: inherit !important;
}
#historia {
        background: top left repeat url("../images/tramaLight.png");
        padding: 5vh 6vw 10vh;
}
@media (max-width:1100px) {
        #afotar {
                background-image: url("../images/turista-700.jpg");
        }
        #afotar > div {
                width: 50vw;
        }
}
@media (max-width:700px) {
        #afotar > div {
                width: 85vw;
        }
}
/*Apartamentos*/
.arriba {
        border-top: 2px #414141 solid;
        width: 70%;
        margin: auto;
}
.arribaAbajo {
        padding: 20px 0;
        min-height: 110px;
}
#alojamientos {
        padding: 5vh;
}
#alojamientos img {
        margin: 20px auto;
}
#alojamientos a:hover {
        font-weight: 400;
}
#alojamientos + div > img {
        width: 100%;
}
@media (max-width:767px) {
        .arribaAbajo {
                min-height: 60px;
        }
}
/*Turismo*/
#turisteo {
        background: top left repeat url("../images/tramaLight.png");
        padding: 2vh 6vw 5vh;
}

#turisteo img {
        margin: 20px auto;
}
#masInfo a {
        border: 2px solid white;
        display: block;
        height: auto;
        margin: auto;
        width: 200px;
}
#masInfo {
        margin-top: 10px;
}
/*localizacion y contacto*/
#mapaGoogle {
        height: 55vh;
        min-height: 240px;
}
#mapaGoogle iframe {
        width: 100%;
        height: 100%;
}

/*Contacto*/
.bloqueContacto .bordeado {
        border: solid 2px #919192;
}
.bloqueContacto .bordeado > div.col-sm-4 {
        margin-left: -30px !important;
        margin-right: 30px;
}
.bloqueContacto div.col-sm-4 img {
        width: 100%;
        margin-bottom: 5px;
}
.bloqueContacto p {
        margin-left: 5px;
}
#formularioContacto img {
        display: none;
        height: auto;
        width: auto;
        margin: auto;
}

input {
        width: 30.6% !important;
        margin: 20px 1% !important;
}
textarea {
        width: 100%;
        margin: 15px 5px 5px;
}
input[type=submit] {
        border: none;
        border-radius: 5px;
        padding: 4px 30px;
        float: right;
        width: auto !important;
        margin-top: 15px;
}
#redesSociales a {
        margin: 15px;
}
#redesSociales {
        margin-bottom: 20px;
}
#llamarDirecto {
        display: none;
        position: fixed;
        top: 0;
        right: 3vw;
        border-radius:0px 0px 10px 10px;
        border: 1px solid white;
        cursor: pointer;
        padding: 17px 40px 18px;
        z-index: 20;
}
@media (max-width:767px) {
        .bloqueContacto .bordeado > div.col-sm-4 {
                margin: 0 auto 20px !important;
        }
        .bloqueContacto div.col-sm-4 img {
                width: 50%;
                margin: 0px auto 10px;
        }
        .bloqueContacto div.col-sm-4 p, .bloqueContacto div.col-sm-4 a {
                text-align: center !important;
        }
        #redesSociales a {
                width: 20vw !important;
                display: inline-block;
                text-align: center;
        }
        #llamarDirecto {
                display: block;
        }
        input {
                width: 97% !important;
                margin: 10px 1% !important;
        }
        input[type=submit] {
                width: auto !important;
        }
        textarea {
                margin: 20px 5px 5px !important;
                width: 97% !important;
        }
}


/* separadores */
.separador {
    height: 5vh;
}
.separadorPeq {
    height: 2vh;
}

/* Eliminamos comportamiento de los enlaces */
a {
    color: inherit !important;
}
a:hover {
    text-decoration: none !important;
    color: inherit !important;
    font-weight: 700;
}
/*Banner de cookies */
div#aviso_cookies {
    position: fixed;
    bottom: -10px;
    left: 0px;
    width: 100%;
    z-index: 999999;
    display: block;
    padding: 0px !important;
}
#contenido_aviso {
    margin: auto;
    position: relative;
    top: 0px;
    height: auto;
    width: 100%;
    text-align:center;
    background-color: #212121;
    display: block;
    padding:10px !important;
}
#contenido_aviso p {
    line-height:18px;
    font-size:12px;
    text-align:center;
    color: #fff;
    padding: 15px;
}
#contenido_aviso p a {
    margin-right:5px;
    text-decoration: none;
    color: #efa403 !important;
}
#contenido_aviso p a:hover {
    font-weight: 700;
    color: #c0272d;
    text-decoration: none;
}


        
/*Otros*/
.derecha {
        float: right;
}
.izquierda {
    float: left;
}
.bloque {
        display: inline-block;
}
/* Colores de fondo y texto*/
.fondoNegro {
    background-color: #000;
}
.fondoNaranja{
    background-color: #efa403;
}
.fondoGris {
    background-color: #414142;
}
.fondoBlanco {
    background-color: #fff;
}
.textoBlanco {
    color: #fff;
}
.textoRojo {
    color: #c0272d;
}
.textoNegro {
        color: #000;
}
.textoGris {
        color: #4c4c4c;
}

/*Fuentes*/
@font-face {
    font-family: 'FuturaM';
    src: url('fonts/futura_medium_btwebfont.eot');
    src: url('fonts/futura_medium_btwebfont.eot') format('embedded-opentype'),
         url('fonts/futura_medium_btwebfont.woff2') format('woff2'),
         url('fonts/futura_medium_btwebfont.woff') format('woff'),
         url('fonts/futura_medium_btwebfont.ttf') format('truetype'),
         url('fonts/futura_medium_btwebfont.svg#futura_medium_btwebfont') format('svg');
}
@font-face {
    font-family: 'Futura';
    src: url('fonts/FUTURAB.eot');
    src: url('fonts/FUTURAB.eot') format('embedded-opentype'),
         url('fonts/FUTURAB.woff2') format('woff2'),
         url('fonts/FUTURAB.woff') format('woff'),
         url('fonts/FUTURAB.ttf') format('truetype'),
         url('fonts/FUTURAB.svg#FUTURAB') format('svg');
}
@font-face {
    font-family: 'Myriad';
    src: url('fonts/MyriadProRegular.eot');
    src: url('fonts/MyriadProRegular.eot') format('embedded-opentype'),
         url('fonts/MyriadProRegular.woff2') format('woff2'),
         url('fonts/MyriadProRegular.woff') format('woff'),
         url('fonts/MyriadProRegular.ttf') format('truetype'),
         url('fonts/MyriadProRegular.svg#MyriadProRegular') format('svg');
}
@font-face {
    font-family: 'Verdana';
    src: url('fonts/Verdana.eot');
    src: url('fonts/Verdana.eot') format('embedded-opentype'),
         url('fonts/Verdana.woff2') format('woff2'),
         url('fonts/Verdana.woff') format('woff'),
         url('fonts/Verdana.ttf') format('truetype'),
         url('fonts/Verdana.svg#Verdana') format('svg');
}
@font-face {
    font-family: 'Arial';
    src: url('fonts/Arial.ttf') format('truetype');

}
.arial {
    font-family: 'Arial';
}
.futura {
    font-family: 'Futura';
}
.futuraM {
    font-family: 'FuturaM';
}
.verdana {
    font-family: 'Verdana';
}
.myriad {
    font-family: 'Myriad';
}
.textoGrande {
    font-size: 16px;
    line-height: 1.9;
}
.textoPeque {
    font-size: 12px;
    line-height: 1.2;
}
.textoMuyGrande {
    font-size: 18px;
    line-height: 2.2;
}
.negrita {
        font-weight: 600;
}

@media (min-width: 1500px) {
        * {
                font-size: 16px;
        }
}
@media (max-width:767px) {
        h1 {
                font-size: 30px !important;
        }
        h2 {
                font-size: 25px !important;
        }
}


/*Aviso Legal*/
.contenedor {
    padding-left: 15% !important;
    padding-right: 15% !important;
}
.zonaCabecera {
    padding-left: 15% !important;
    padding-right: 15% !important;
}
@media (max-width:768px) {
    .contenedor {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
    .zonaCabecera {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
}
@media (max-width:480px) {
    .contenedor {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    .zonaCabecera {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

/*Torner*/
#fotoTorner {
        height: 75vh;
        background: center no-repeat url("../images/torner/foto-banner-2000.jpg");
        background-size: cover;
}
#fotoTorner img {
        display: block;
        margin: auto;
        position: relative;
        height: 20vh;
        top: 27vh;
}
#fotoZobel {
        height: 75vh;
        background: center no-repeat url("../images/zobel/foto-banner-2000.jpg");
        background-size: cover;
}
#fotoZobel img {
        display: block;
        margin: auto;
        position: relative;
        height: 20vh;
        top: 27vh;
}
#fotoZapata {
        height: 75vh;
        background: center no-repeat url("../images/zapata/foto-banner-2000.jpg");
        background-size: cover;
}
#fotoZapata img {
        display: block;
        margin: auto;
        position: relative;
        height: 20vh;
        top: 27vh;
}
#fotoBonifacio {
        height: 75vh;
        background: center no-repeat url("../images/bonifacio/foto-banner-2000.jpg");
        background-size: cover;
}
#fotoBonifacio img {
        display: block;
        margin: auto;
        position: relative;
        height: 20vh;
        top: 27vh;
}

@media (max-width:800px) {
        #fotoTorner {
                background: bottom center no-repeat url("../images/torner/foto-banner-800.jpg");        
        }
        #fotoZobel {
                background: bottom center no-repeat url("../images/zobel/foto-banner-800.jpg");        
        }
        #fotoZapata {
                background: bottom center no-repeat url("../images/zapata/foto-banner-800.jpg");        
        }
        #fotoBonifacio {
                background: bottom center no-repeat url("../images/bonifacio/foto-banner-800.jpg");        
        }
}
@media (max-width:1200px) {
        #fotoTorner {
                background: bottom center no-repeat url("../images/torner/foto-banner-1200.jpg");        
        }
        #fotoZobel {
                background: bottom center no-repeat url("../images/zobel/foto-banner-1200.jpg");        
        }
        #fotoZapata {
                background: bottom center no-repeat url("../images/zapata/foto-banner-1200.jpg");        
        }
        #fotoBonifacio {
                background: bottom center no-repeat url("../images/bonifacio/foto-banner-1200.jpg");        
        }
}
#datosApartamento {
        height: 25vh;
}
#datosApartamento div.col-sm-7 > div {
        width: 13%;
        display: inline-block;
        vertical-align: bottom;
        height: 12vh;
}
#datosApartamento div.col-sm-7 > div img {
        display: block;
        width: auto;
        margin: 10px auto 8px;
        height: 6vh;
}
#datosApartamento div.row {
        padding: 5px 2vw;
        border-bottom: 1px solid #919191;
}
#datosApartamento div.row:last-child p {
        margin: 8px !important;
}
#datosApartamento div.row:last-child div {
        margin: 8px !important;
        height: 7vh;
}
#datosApartamento div.izquierda {
        padding-top: 10px !important;
        padding-left: 10px !important;
}
#datosApartamento div.derecha h2 {
        margin-top: 10px !important;
        padding-right: 10px !important;
}
#descripcion {
        padding: 5vh 5vw;
}
#detalles {
        padding: 20px 5vw;
}
#detalles #formularioContacto {
        border: solid 2px #919192;
        padding: 0 !important;
}
#detalles #formularioContacto img:first-child {
        display: block;
        height: auto;
        min-height: 0;
        width: 100%;
        max-width: 200px;
}
#detalles input {
        width: 90% !important;
        margin: 20px 5% !important;
}
input, textarea, select {
        border: 0.5px solid #efa403 !important;
        padding: 5px 10px;
        text-align: center;
}
#detalles select {
        width: 90% !important;
        margin: 5px 5% 20px;
}
#detalles input[type=submit] {
        width: auto !important;
}
#detalles div.row div.col-md-4 {
        border-right: 2px #818181 solid;
}
#detalles ul {
        margin-left: 5vw;
}
#galeriaFotos img {
        width: auto;
        margin: auto;
        height: auto;
        max-height: 100vh;
}
#galeriaFotos a.carousel-control span {
        color: white;
        
}
#carruselGaleria ol li.active {
        background-color: #efa403 !important;
}
#carruselGaleria {
        max-height: 100vh;
}

@media (max-width:1050px) {
        #datosApartamento div.col-sm-7 > div img {
                height: 5vh;
        }
        #datosApartamento div.col-sm-7, #datosApartamento h2 {
                width: 100%;
                text-align: center;
        }
}
@media (max-width:991px) {
        #datepicker input {
                width: 40% !important;
        }
        #detalles div.row div.col-md-4 {
                border-right: none;
        }
        #detalles select {
                width: 50% !important;
                margin: 0px 25% 20px;
        }
}
@media (max-width:767px) {
        #datosApartamento div.row {
                border-bottom: none;
                margin-top: 25px;
        }
        #datosApartamento div.row:last-child {
                border-top: 1px solid #919191;
        }
        #datosApartamento h2.col-xs-12 {
                text-align: center !important;
        }
        #datosApartamento div.col-sm-7 > div {
                width: 13%;
                display: inline-block;
                vertical-align: bottom;
                height: 8vh;
        }
        #datosApartamento div.col-sm-7 > div img {
                display: block;
                width: auto;
                margin: 3px auto 3px;
                height: 4vh;
        }
        #datosApartamento {
                height: auto !important;
        }
        #datosApartamento div.row:last-child div {
                margin: 4px !important;
                height: auto;
                width: 100%;
                text-align: center;
                float: none;
        }
        #datosApartamento div.row:last-child p, #datosApartamento div.row:last-child img, #datosApartamento div.row:last-child h3 {
                float: none !important;
                text-align: center !important;
                display: inline-block !important;
        }
        #detalles select {
                width: 90% !important;
                margin: 0px 5% 20px;
        }
        #datepicker input {
                width: 90% !important;
        }
}
@media (max-width:550px) {
        #datosApartamento div.col-sm-7 > div {
                width: 32%;
                display: inline-block;
                vertical-align: bottom;
                height: 8vh;
        }
}



/* Banner de Reserva */
.banner-reserva {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://www.casagarrote.com/wp-content/uploads/tu-imagen-de-banner.jpg') center/cover no-repeat;
  padding: 60px 20px;
  text-align: center;
  margin-bottom: 40px;
  border-radius: 8px;
}

.banner-reserva .banner-contenido h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.4rem;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.btn-reservar {
  display: inline-block;
  background-color: #c59d5f; /* color cálido oro/arena */
  color: #fff;
  font-weight: bold;
  padding: 14px 28px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1.2rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-reservar:hover {
  background-color: #b28b51;
  transform: translateY(-2px);
}