*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* @import url('https://fonts.cdnfonts.com/css/pragmatica-extralight'); */

/**** fonts ****/
/* @import url('https://fonts.cdnfonts.com/css/pragmatica-extralight'); */

@font-face {
    font-family: 'MiFuente';
    src: url('ruta/a/la/fuente.ttf') format('truetype');
  }


@font-face {
    font-family:'PragmaticaBook';
    src: url("../fonts/PragmaticaBook.otf") format('opentype');;
}
@font-face {
    font-family:'Svn-Miller';
    src: url("../fonts/SVN-Miller_Banner.ttf") format('truetype');
}
@font-face {
    font-family:'Pragmatica-Light';
    src: url("../fonts/Pragmatica-Light_36332.ttf") format('truetype');
}
@font-face {
    font-family: 'Pragmatica-Bold';
    src: url("../fonts/Pragmatica-Bold_36314.ttf") format('truetype');
}
@font-face {
    font-family:'Pragmatica-ExtraBold';
    src: url("../fonts/Pragmatica-ExtraBold_36320.ttf");
}
@font-face {
    font-family: 'Pragmatica ExtraLight';
    src: url("../fonts/Pragmatica-ExtraLight_36322.ttf");
}
@font-face {
    font-family:'Pragmatica-ExtraLight-Oblique';
    src: url("../fonts/Pragmatica-ExtraLight-Oblique_36321.ttf");
}
@font-face {
    font-family:'Pragmatica-Medium';
    src: url("../fonts/Pragmatica-Medium_36334.ttf");

}

body {
    font-family: Pragmatica-Light;
    color:white;
    display: flex;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    /* opacity: 1;
    transition: opacity 0.5s ease-in-out; */
}

.hidden {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

/**** layout ****/

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    padding: 1em;

}

main {
    position: absolute;
    top: 70px;
    bottom: 70px;
    left: 0;
    right: 0;
    padding: 1em;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    padding: 1em;
}


/**** backgrounds ****/

#home {
    background-image: url("../img/FondoMobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;

}

#info {
    background-color: #AFCBCD;
}

#menu {
    background-color: #AFCBCD;
}

#contacto {
    background-color: #94AB9B;
}

#fullScrImg {
    background-color: black;

}

/**** links de navegación ****/

.desktop {
    display:none;
}


/**** generales ****/

h1 {
    font-family: 'Svn-Miller';
    font-size: 25px;
}

h2 {
    font-family: 'PragmaticaBook';
    font-size: 20px;
}

p {
    font-family: Svn-Miller, serif;
    font-size: 14px;
    color: white;
    margin-top: 4px;
}

a {
    color: white;
}

a:link {
    text-decoration:none;
    color:white;
}


/****** header *****/

.headerMobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

img.logoHImg {
    width: 80px;
}

img.hambImg {
    width: 20px;
}

.closeImg {
    width: 20px;
    margin-right: 10px;
    margin-top: 10px;
}

.close{
    position: fixed;
    top:10px;
    right: 20px;
}

/**** home ****/

.subContainer{
    position:absolute;
    left: 0;
    right: 0;
    height: 50vh;
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.menu{
    font-size: 18px;
    list-style: none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align: center;
    min-height: 90%;
    padding-top: 20px;
    padding-bottom: 20px;
}

/**** info ****/

.InfoPhotosMobile img {
    width: 100%;
}

.infoContainer {
    overflow-y: scroll;
}

.infoContainer p {
    text-align: left;
    /* font-size: 11px; */
}

.infoContainer::-webkit-scrollbar {
    width: 2px;
}

.infoContainer::-webkit-scrollbar-track {
    background: #eaeaea;
    border-radius: 0.8px;
}

.infoContainer::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: rgb(187, 187, 187);
}

.infoTextMobile {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 15px;
}

/* .infoTextMobile p {
    font-size: 11px;
} */

.InfoPhotosMobile {
    width: 100%;
}

/**** contacto ****/

.contactoContainer {
    font-family: Svn-Miller;
    overflow-x: hidden;
    overflow-y: scroll;
}

.contactoContainer p {
    text-align: left;
    margin-left: 15px;
    margin-right: 15px;
}

.contactoContainer span {
    font-style: italic;
    font-size: 12px;
    text-align: left;
}

.contactoContainer label {
    font-size: 12px;
    text-align: left;
}

.contactoContainer form {
    margin-right: 15px;
    font-size: 12px;
    text-align: left;
    margin-top: 25px;
    margin-left:15px;
}

.contactoContainer input {
    background-color:rgba(0, 0, 0, 0);
    width: 100%;
    border:none;
    border-bottom: 1px solid white;
    padding: 5px 10px;
    outline: none;
    color: white;
}

.contactoContainer textarea {
    margin-top: 5px;
    font-family: Svn-Miller;
    background-color:rgba(0, 0, 0, 0);
    width: 100%;
    height: 50px;
    max-height: 100px;
    border: 1px solid white;
    padding: 5px 10px;
    outline: none;
    color: white;
    overflow-y: auto
}

    /* aspecto barra scroll */
.contactoContainer::-webkit-scrollbar {
    width: 2px;
}

.contactoContainer::-webkit-scrollbar-track {
    background: #eaeaea;
    border-radius: 0.8px;
}

.contactoContainer::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: rgb(187, 187, 187);
}

#sendEmail {
    text-align: left;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: white;
    margin-bottom: 10px;
    cursor: pointer;
}

/**** footer ****/

footer p {
    font-size: 13px;
    color: white;
    margin-top: 0px;
}

.infolink {
    position: absolute;
    bottom: 20px;
    left: 15px;
}

.reservalink {
    position: absolute;
    bottom: 20px;
    right: 15px;
}

/**** *** desktop layout  *** ****/

@media only screen and (min-width:480px) {

    .mobile {
        display: none;
    }

    .desktop {
        display:flex;
    }

    #home {
        background-image: url("../img/FondoDesktop.png");
    }

    header {
        width: 100%;
        display: flex;
        height: 15vh;
        font-family: PragmaticaBook;
        padding: 2em;
    }

    header .desktop {
        width: 100%;
        justify-content: space-between;
        align-items:flex-start ;
    }

    main {
        top: 15vh;
        bottom: 15vh;
    }

    footer {
        width: 100vw;
        display: flex;
        height: 15vh;
        font-family: PragmaticaBook;
        padding: 2em;
    }

    footer .desktop {
        width: 100%;
        justify-content: space-between;
        align-items: flex-end;

    }

    h1 {
        font-family:'Svn-Miller';
        font-size: 5vw;
    }

    h2 {
        font-family:'PragmaticaBook';
        font-size: 4vw;
    }

    .navlinkLeft{
        font-family: 'PragmaticaBook';
        width: 15vw;
        font-size: 1.5vw;
        margin-left: 15px;
        text-align: left;

    }
    
    .navlinkRight{
        font-family: 'PragmaticaBook';
        width: 15vw;
        font-size: 1.5vw;
        margin-right: 15px;
        text-align: right;

    }

    .logoHaizeaHotel {
        width: 30vw;
    }

    .centered {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .infoContainer {
        display: flex;
        justify-content: space-evenly;;
        margin-left: 15px;
        margin-right: 15px;
        overflow: hidden;
        overflow-y: scroll;
        align-items: flex-start;
        margin-top: 5px;
    }

    .infoTextDesktop {
        min-width: 250px;
        display:block;
        width: 40%;
        padding-right: 35px;
    }

    .infoTextDesktop p {
        font-size: 1.1vw;
    }

    .InfoPhotosDesktop {
        width: 60%;
    }


    .address{
        text-align: center;
        line-height: .9;
    }

    .address p {
        font-size: 1.3vw;
        margin: 0;
    }

    .contactoContainer {
        display: flex;
        align-items: flex-start;
    }

    .contactLeft {
        width: 100%;
        padding-right: 30px;
    }

    .contactRightDesk {
        display: block;
        width: 100%;
        padding-left: 30px;
    }

    /**** aspecto barra scroll ****/
    .infoContainer::-webkit-scrollbar {
        width: 2px;
      }

    .infoContainer::-webkit-scrollbar-track {
        background: #eaeaea;
        border-radius: 0.8px;
    }

    .infoContainer::-webkit-scrollbar-thumb {
        border-radius: 1px;
        background: rgb(187, 187, 187);
    }

    /**** slider ****/

    .miniCarousel {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .sliderFullscreen {
        position: fixed;
        top: 70px;
        left: 2%;
        width: 96%;
        height: 70%;
        z-index: 30;
        /* overflow: hidden; */
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-end;
        justify-content: center;
    }

    .contactoContainer p {
        font-size: 1.1vw;
    }

    .contactoContainer span {
        font-size: 1.1vw;   
    }

    .contactoContainer label {
        font-size: 1.1vw;
    }

    .contactoContainer form {
        font-size: 1.1vw;
    }

    .mainCarousel {
        max-width: 50vw; /* relacionado el tamaño de la imagen*/
    }
}