/* Carga -  no nos funciona - de las fuentes */


@font-face {    
    font-family: 'f-Abad-Light';
    src: url('../fonts/original_abadi-mt-condensed-light.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/original_abadi-mt-condensed-light.woff') format('woff'),
         url('../fonts/original_abadi-mt-condensed-light.ttf') format('truetype'),
         url('../fonts/original_abadi-mt-condensed-light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'f-Abadi-Bold';
    src: url('../fonts/original_abadi-mt-condensed-bold.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/original_abadi-mt-condensed-bold.woff') format('woff'),
         url('../fonts/original_abadi-mt-condensed-bold.ttf') format('truetype'),
         url('../fonts/original_abadi-mt-condensed-bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'f-Gothic';
    src: url('../fonts/gothic.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/gothic.woff') format('woff'),
         url('../fonts/gothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: f-Apple;
    src:url(../fonts/Apple%20Chancery.ttf) format('truetype');
}

@font-face {
    font-family: "f-Century";
    src:url(../fonts/2century-gothic.ttf) format('truetype');
}

@font-face {
    font-family: f-Century-bold;
    src:url(../fonts/century-gothic-bold.ttf) format('truetype');
}

/* Definimos cada tipografía para utilizarla dentro de los span en los textos de la web */

.f-gothic {
    font-family: 'f-Gothic';
}


.f-abadi {
    font-family: 'f-Abadi-Bold';
}

.f-abadi-l {
    font-family: 'f-Abadi-Light';
}

.f-apple {
    font-family: f-Apple;
}


/* Tipo estándar de la web */
body {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    letter-spacing: 2px;
    
}

img{
    border:0;
}

/* Centra los h1 vertical y horizontalmente de cada página - es la imagen central */
.section h1 {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}

/* Estilos especiales para tratar la maquetación en los slides */
.slide h1 {
    position:relative;
    width:80%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}

.slide .textopie {
    position:relative;
    left:50%;
    top:67%;
    transform:translate(-50%,-67%);
    -webkit-transform:translate(-50%,-67%);
    margin-left:0;
    padding-bottom:0;
}


/* Ajusta las imágenes en dispositivos pequeños para que reduzcan su tamaño */
.img-responsive {
    max-width:100%;
    vertical-align:middle;
}

/* Para encuadrar los iconos de mail y del maletín */
.cuadroimg {
    position:absolute;
    left:35%;
    top:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    width:60%;
    float:left;
}

.cuadroimgd {
    position:absolute;
    left:65%;
    top:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    width:60%;
}

/* Estilo genérico para los textos de pie de cada una de las páginas */
.textopie {
    position:absolute;
    bottom:0;
    width:80%;
    margin-left:10%;
    padding-bottom:5%;
}

.textopie p {
    text-align:center;
    text-shadow: 1px 0px 15px rgba(0, 0, 0, 1);
    font-size: 15px;

}

/* Redefinimos el texto de la dirección, que es más pequeño */
.direccion p {
    padding-top:20px;
    font-size:16px;
    text-transform: inherit;
}

/* Para que los textos de Asombrar se queden delante tras mover los slides */
.delante {
    z-index:9;
    position:absolute;
}

/* Ajustamos la distancia desde las esquinas de los botones para los slides laterales para que el dcho no se monte sobre los botones verticales y usamos la imagen adecuada */
.fp-controlArrow.fp-prev {
    left:45px;
    width:54px;
    height:54px;
    border:0;
    background-image:url(../img/arrow-left.png);
    background-repeat:no-repeat;
}

.fp-controlArrow.fp-next {
    right:45px;
    width:54px;
    height:54px;
    border:0;
    background-image:url(../img/arrow-right.png);
    background-repeat:no-repeat;
}

/* Menú superior */
.menu-container {
    position:fixed;
    height:40px;
    z-index:70;
    width:56px;
    left:95%;
    overflow:hidden;
    top:35px;
    padding-bottom:10px;
    padding-top:0;
    background-color:white;
    font-size:11px;
    transition:all 0.5s ease;
}

.menu-open {
    width:93% !important;
    left:5% !important;
    transition:all 0.5s ease;
}

#my-menu li {
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    text-transform:uppercase;;
    display:inline-block;
    margin-top:10px;
}

#my-menu li a {
    padding:9px 12px;
    color:#9EA2A1;
}

#my-menu li.active a {
    color:#A87F54;
}

ul {
    padding-top:10px;
}


.icono {
    position:absolute;
    right:0;
    top:0;
    width:44px;
    height:100%;
    background-color:white;
    font-size:36px;
    
}

/* Botones más y menos */

.btn-mas {
    background-image:url(../img/mas.png);
    background-repeat:no-repeat;
    width:65px;
    height:54px;
    float:right;
    margin-top:77px;
    cursor:pointer;
}

.btn-menos {
    background-image:url(../img/menos.png);
    background-repeat:no-repeat;
    width:54px;
    height:54px;
    margin-left:auto;
    margin-right:auto;
    cursor:pointer;
}

.circulo{
    background-image:url(../img/menos-circulo.png);
}

/* Capa para meter un item con ancho fijo (botón +) y otro dinámico (imagen responsive) */
.contenedor-con-img {
    width:100%;
    margin:0 auto;
    height:200px;
}

/* Capa con contenido dinámico */
.contenido-dyn {
    overflow:hidden;
    height:200px;
    margin:0 auto;
    line-height:200px;
}


/* Capas modales */

.modal {
    width:90%;
    height:90%;
    position:fixed;
    top:5%;
    left:5%;
    z-index:99;
}

.modal .content {
    top:50%;
    width:100%;
    transform:translate(0%,-50%);
    -webkit-transform:translate(0%,-50%);
    text-align:center;
    position:absolute;
}

.modal p {
    text-transform: inherit;
    margin-left:35%;
    margin-right:35%;
    font-size:14px;
    padding-bottom:20px;
}

.modal-sm {
    width:50%;
    height:75%;
    position:fixed;
    top:20%;
    left:25%;
    z-index:99;
}

.modal-sm-reservar {
    width: 90%;
    height:85%;
    position:fixed;
    top:5%;
    left:5%;
    z-index:99;
}



.modal-asombrar {
    background-color:rgba(0,0,0,0.8);
}

.modal-alma {
    background-color:rgba(8,35,45,0.8);
}

.modal-reservar {
    background-color:rgba(255,255,255,0.8);
    width:100%;
    height:100%;
    min-height: 700px;
    padding-top: 2%;
}
    iframe{
        background-color:rgba(255,255,255,0);
        max-height: 800px;
    }
/* Otros estilos */

.center {
    text-align:center;
}

.hidden {
    display: none;
}

.fright {
    float:right;
}


#titulo-seccion3{
    width: 50%;

}

/* Ajustes para móvil */

@media (max-width:450px) {


    
    #modal-asombrar{
        top: 0;
        padding-top: 1%;
    }
    #modal-alma{
        top: 0;
        padding-top: 1%;   
    }
    .modal p{
        font-size: 11px;
    }

    #slide21 .textopie img{
        max-width: 100%;   
    }
    iframe{
        max-height: 700px;
    }

    #titulo-seccion3{
        width: 90%;

    }   
        #titulo-seccion3 .contenedor-con-img .contenido-dyn img{
            max-width: 220px;
        }

    #titulo-seccion6{
        width: 90%;
    }   
        #titulo-seccion6 .contenedor-con-img .contenido-dyn img{
            width: 220px;
        }

    #modal-reservar{
        max-width: 100%;
        overflow: auto;
        height: 100%;
    }

    #slide31 .textopie {
        top: 45%;
    }
    #section5 h1 {
        top: 30%;
    }
}

@media only screen  and (min-device-width : 551px) {
    #fp-nav{
        display: block;
    }

}

@media (max-width:768px) {



    .modal p {
        margin-left:15%;
        margin-right:15%;
    }
    .menu-container{
        display: none;
    }
    p{
        font-size: 12px;
    }
    #section1 h1  img{
        min-width: 280px;
    }

    .fp-controlArrow.fp-prev{
        left:5px;
    }
    .fp-controlArrow.fp-next{
        right:5px;
    }

    .contenido-dyn img{
        min-width: 220px;
    }
    #modal-asombrar{
        height: 100%;
    }
    #modal-alma{
        height: 100%;
    }
    #section5 h1 img{
        min-width: 200px;
    }
    #modal-reservar{
        width: 100%;
        left: 0%;
        top: 0%;

    }
}

@media (max-height:670px) {

    #section5 h1{
        top: 40%;
    }

    #slide31 .textopie    {
        top: 45%;
        transform:translate(-50%,-45%);
        -webkit-transform: -50%,-45%;
           -moz-transform: -50%,-45%;
            -ms-transform: -50%,-45%;
             -o-transform: -50%,-45%;
                transform: -50%,-45%;
    }

    #slide21 .textopie    {
        top: 55%;
        transform:translate(-50%,-55%);
        -webkit-transform: -50%,-55%;
           -moz-transform: -50%,-55%;
            -ms-transform: -50%,-55%;
             -o-transform: -50%,-55%;
                transform: -50%,-55%;
    }
    
    .menu-container{
        display: none;
    }
}

@media only screen  and (min-device-height : 0px)  and (max-device-height : 431px)  {

    #slide31 .textopie    {
        top: 20%;
        transform:translate(-50%,-20%);
        -webkit-transform: -50%,-20%;
           -moz-transform: -50%,-20%;
            -ms-transform: -50%,-20%;
             -o-transform: -50%,-20%;
                transform: -50%,-20%;

    }
    #slide21 .textopie    {
        top: 20%;
        transform:translate(-50%,-20%);
        -webkit-transform: -50%,-20%;
           -moz-transform: -50%,-20%;
            -ms-transform: -50%,-20%;
             -o-transform: -50%,-20%;
                transform: -50%,-20%;
    }
    #section4 .textopie    {
        top: 65%;
        

    }
    .textopie p{
        font-size: 10px;
    }

    #section5 h1 img{
        width: 200px;
        height: 200px;

    }
    
    /* Para encuadrar los iconos de mail y del maletín */
    .cuadroimg {
    top:45%;
    transform:translate(-50%,-55%);
    -webkit-transform:translate(-50%,-55%);
    }
    .cuadroimgd {
    top:45%;
    transform:translate(-50%,-55%);
    -webkit-transform:translate(-50%,-55%);
    }

    .menu-container{
        display: none;
    }
}