html{
    font-family: "Schibsted Grotesk", "Migra Extrabold", "Space Grotesk", sans-serif;
}

.banner h1{
    font-family:Migra extralight;
    font-size:5rem;
    color:#fff;
    line-height: 5.5rem;
    position: relative;
    margin-top:10%;
}
/*.banner h1:before{
    content:url('../images/element.svg');
    position:absolute;
    left:-22%;
    top:1rem;
}*/
.banner p{
    color:#fff;
    font-family: "Schibsted Grotesk";
    font-weight:400;
    font-size:1.3rem;
    margin-top:4rem;
}

.page-button{
    font-weight:600;
    padding:0.5rem;
    border-radius:4rem;
    position:relative;
}

.page-button img{
    transition:.2s ease-in-out;
}

.page-button:hover img{
    transform:rotate(45deg);
}

.banners-inline img{
    width:100%;
    height:auto;
    object-fit: fill;
}

.evento-slide{
    border-radius:30px;
    /*width:75%*/
}

.panel{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

@media (min-width: 1500px) {
    .contact{
        margin-top:2rem;
    }
    .contact textarea{
        height: 16rem;
    }
    .contact input{
        height:4rem;
    }
    .destinos h2{
        font-size: 4rem;
    }
    .box p{
        font-size:2.2rem;
    }
    .box li{
        font-size:1.7rem;
    }
    .village-img{
        top:-3rem;
        right:20rem;
        width:30%;
    }
}

@media (min-width: 1400px) and (max-width:1500px){
    .village-img{
        top:-3rem;
        right:14rem;
        width:35%;
    }
    .waves{
        bottom:-0.6rem;
    }
}

@media (max-width: 500px){
    .banner h1{
        font-size:2rem;
        line-height: 2.4rem;
    }
    .banner h1:before{
        content:url('../images/day.svg');
        left:0;
        top:-2rem;
    }
    .banner p{
        color:#fff;
        font-family: "Schibsted Grotesk";
        font-weight:400;
        font-size:1.3rem
    }
}

@media (min-width:700px) and (max-width: 900px){
    .banner h1{
        font-family:Migra extralight;
        font-size:3.5rem;
        line-height: 4.5rem;
    }
/*    .banner h1:before{
        left:-40%;
        top:1rem;
    }*/
    .banner p{
        color:#fff;
        font-family: "Schibsted Grotesk";
        font-weight:400;
        font-size:1.1rem;
        margin-top:2rem;
    }
}

@media (min-width:1160px) and (max-width: 1390px){
    .banner h1{
        font-family:Migra extralight;
        font-size:3.5rem;
        line-height: 4rem;
    }
    .banner h1:before{
        left:-40%;
        top:1rem;
    }
    .banner p{
        color:#fff;
        font-family: "Schibsted Grotesk";
        font-weight:400;
        font-size:1.1rem;
        margin-top:2rem;
    }
}

@media (min-width:1490px) and (max-width: 1690px){
    .banner h1{
        font-family:Migra extralight;
        font-size:5rem;
        line-height: 5.5rem;
    }
/*    .banner h1:before{
        left:-30%;
        top:1rem;
    }*/
    .banner p{
        color:#fff;
        font-family: "Schibsted Grotesk";
        font-weight:400;
        font-size:1.1rem;
        margin-top:2rem;
    }
}