*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Gabriela", serif;
    font-weight: 400;
    font-style: normal;
}

::-webkit-scrollbar{
    display: none;
}

/* Header */
section.home{
    padding: 0 !important;
    position: relative;
}

section.home picture img{
    max-width: 100%;
    width: 100%;
    max-height: 100%;
}

section.home .text{
    position: absolute;
    top: 70%;
    left: 5%;
    letter-spacing: 4px;
}

section.home .text h1{
    font-size: 80px;
    letter-spacing: 4px;
    font-weight: 600;
    font-family: "Great Vibes";
}

section.home .text h2{
    font-size: 40px;
    font-weight: 600;
    font-family: "Great Vibes";
}

section.home .arrowDown{
    position: absolute;
    top: 80%;
    left: 49%;
}

section.home .arrowDown img{
    max-width: 100%;
    width: 40px;
}

/* Confirm */

section.confirm{
    background-color: rgb(228, 228, 228);
    position: relative;
    height: 480px;
}

section.confirm .arrowDown{
    position: absolute;
    top: 85%;
    left: 49%;
}

section.confirm .arrowDown img{
    max-width: 100%;
    width: 40px;
}

section.confirm .info h2{
    padding: 10px;
    font-size: 48px;
    letter-spacing: 2px;
    font-weight: 600;
}

section.confirm .info p{
    padding: 10px;
    font-size: 26px;
}

section.confirm .info a{
    color: black;
}

#confirmation{
    text-decoration: none;
    color: black;
    font-size: 32px;
    letter-spacing: 4px;
}

section.confirm button{
    padding: 5px 16px;
    border-radius: 20px;
    border: 0;
    box-shadow: 1px 2px 14px 1px rgb(48, 48, 48);
    color: black;
}

/* Story */

section.story {
    position: relative;
    text-align: center;
}

section.story p{
    letter-spacing: 6px;
    font-size: 60px;
    font-weight: 600;
}

section.story .arrowDown{
    position: absolute;
    top: 94%;
    left: 48.2%;
}

section.story .arrowDown img{
    max-width: 100%;
    width: 70px;
    max-height: 100%;
    height: 70px;
}

section.story img{
    max-width: 100%;
    width: 500px;
    max-height: 100%;
    height: 600px;
    border-radius: 5%;
    padding: 18px;
}

/* Place */

section.place{
    position: relative;
}

section.place picture img{
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 800px;
    filter: brightness(60%);
}

section.place .text{
    position: absolute;
    top: 18%;
    left: 16%;
    letter-spacing: 6px;
    color: white;
    text-align: center;
}

section.place .arrowDown{
    position: absolute;
    top: 60%;
    left: 48.3%;
}

section.place .arrowDown img{
    max-width: 100%;
    width: 70px;
    max-height: 100%;
    height: 70px;
}

/* See */

section.see{
    position: relative;
}

section.see picture img{
    max-width: 100%;
    width: 100%;
    max-height: 100%;
}

section.see .arrowDown{
    position: absolute;
    top: 90%;
    left: 48.3%;
}

section.see .arrowDown img{
    max-width: 100%;
    width: 70px;
}

section.see .text{
    position: absolute;
    top: 19%;
    left: 40%;
    font-size: 60px;
    letter-spacing: 4px;
    text-align: center;
}

section.see p .text{
    font-weight: 600;
}
/* Map */

section.map .frame iframe{
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 500px;
    border-radius: 2%;
}

section.map p.title{
    font-size: 40px;
    font-weight: 600;
}

/* Hotel */

section.hotel .frame iframe{
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 500px;
    border-radius: 2%;
}

section.hotel p.title{
    font-size: 40px;
    font-weight: 600;
}

/* Hover states */

.arrowDown:hover{
    transform: translate(0,10px);
    transition: 1.2s all;
}

section.confirm button:hover{
    transform: translate(0,5px);
    transition: 0.5s all;
}

/* Media query */

/* Wide screen */
@media screen and (min-width: 1200px) and (max-width: 1520px) {
   
/* Header */

section.home .text{
    top: 75%;
    left: 3%;
}

section.home .arrowDown{
    top: 90%;
    left: 48.4%;
}
/* Confirm */

section.confirm .arrowDown{
    top: 85%;
    left: 48.4%;
}

/* Story */

section.story .arrowDown{
    left: 47.4%;
}

section.story img{
    width: 400px;
    height: 500px;
    border-radius: 7%;
}

/* Place */

section.place .text{
    top: 30%;
    left: 7%;
}

section.place .arrowDown{
    top: 72%;
    left: 47.4%;
}

/* See */

section.see .text{
    top: 20%;
    left: 34%;
}

section.see .arrowDown{
    left: 47.5%;
}
}

/* Tablet */
@media screen and (max-width: 1200px) {
section.home .text h1{
    font-size: 60px;
}
    
section.home .text h2{
    font-size: 40px;
}

section.home .arrowDown{
    top: 90%;
    left: 49%;
}
section.home .arrowDown img{
    width: 35px;
}
/* Confirm */

section.confirm .arrowDown{
    top: 85%;
    left: 49%;
}

section.confirm .arrowDown img{
    width: 35px;
}

/* Story */

section.story p{
    font-size: 48px;
}


section.story img{
    width: 350px;
    height: 450px;
    border-radius: 30px;
}


#first-pic{
    display: none;
}

/* Place */

section.place .text{
    top: 18%;
    left: 7%;
}

section.place .arrowDown{
    top: 60%;
    left: 48.2%;
}

/* See */

section.see .text{
    top: 20%;
    left: 34%;
}

section.see .arrowDown{
    top: 85%;
    left: 47.6%;
}
}

/* Mobile */
@media screen and (max-width: 768px) {


    .arrowDown{
        display: none;
    }

    section.home .text{
        top: 25%;
        text-align: center;
    }

    /* Confirmation */
    
    section.confirm .info h2{
        font-size: 30px;
    }

    #confirmation{
        font-size: 24px;
    }
   
    /* Story */
    
    section.story p{
        font-size: 38px;
    }

    /* Place */
    section.place{
        height: 500px;
    }
    
    section.place .text{
        top: 15%;
        left: 0;
    }
   
    /* See */
    
    section.see .text{
        top: 10%;
        left: 18%;
        font-size: 30px;
    }
   /* Map */

   section.map{
        max-width: 100%;
        margin: auto;
   }

   /* Hotel */

   section.hotel{
    max-width: 100%;
    margin: auto;
}
}

/* Small Mobile */
@media screen and (max-width: 576px) {

section.home .text{
    top: 8%;
    left: 8%;
}
section.home .text h1{
    font-size: 40px;
}

 section.story p{
    font-size: 30px;
}

section.see .text{
    left: 14%;
}
}