* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    overflow-x: hidden;
}

.navbar {
    box-shadow:
    1px 2px 2px hsla(108 60% 59% / 0.333),
    2px 4px 4px hsla(108 60% 59% / 0.333),
    3px 6px 6px hsla(108 60% 59% / 0.333);
}

video {
    text-decoration-style: none;
    position: absolute;
    left: -15px;
    top: 0;
    width: 110%;
    z-index: -1;
  }

.vtext{
    height: 100%;
    padding-top: 3.5vh;
    margin: 11.9vh;
}

.first-vid{
    min-height: 86.8vh;
    background: rgba(255, 255, 255, 0.5)
}

.first-vid h1{
    font-size: 7vh;
}

.first-vid p{
    font-size: 2.4vh;
}

.first-tit h1{
    color: white;
    padding-top: 3.5vh;
    margin: 16.8vh;
    font-size: 12.6vh;
}

.second{
    box-shadow: 0px 0px 40px 30px hsl(0deg 0% 0% / 0.30);
    background-position: top;
    background-size: cover;
    background-image: url("img/img/4.jpg");
    background-attachment: fixed;
    min-height: 400px;
}

.second-pub{
    padding: 5vh;
    background-color: yellowgreen;
    text-align: center;
}

.pub p{
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: 10vh;
}

.pub img {
    margin-top: 7vh;
}

.third{
    box-shadow: 0px 0px 40px 30px hsl(0deg 0% 0% / 0.30);
    margin-top: -7vh;
    background-position: right;
    background-size: cover;
    background-image: url("img/img/2.jpg");
    background-attachment: fixed;
    min-height: 400px;
}

.fourth{
    box-shadow: 0px 0px 40px 30px hsl(0deg 0% 0% / 0.30);
    margin-top: -7vh;
    background-position: top;
    background-size: cover;
    background-image: url("img/img/1.jpg");
    background-attachment: fixed;
    min-height: 400px;
    padding: 20px;
    padding-left: 15px;
    text-align: center;
}

.highlight {
    text-transform: uppercase;
    margin: 75px;
    font-size: 16.8vh;
    color: aliceblue;
}

.highlight-sp {
    font-size: 16.8vh;
    text-align: center;
    color: aliceblue;
}

.bodytext {
    box-shadow:
    1px 2px 2px hsla(108 60% 59% / 0.333),
    2px 4px 4px hsla(108 60% 59% / 0.333),
    3px 6px 6px hsla(108 60% 59% / 0.333);
    background-color: white;
    border-radius: 20px;
    translate: 0 -140px;
    font-size: large;
    margin: 50px;
    padding: 50px;;
}

.bodytext-samesize {
    box-shadow:
    1px 2px 2px hsla(108 60% 59% / 0.333),
    2px 4px 4px hsla(108 60% 59% / 0.333),
    3px 6px 6px hsla(108 60% 59% / 0.333);
    background-color: white;
    border-radius: 20px;
    translate: 0 -140px;
    font-size: large;
    margin: 50px;
    padding: 50px;
    min-height: 550px;
}

.bodytext-card {
    box-shadow:
    1px 2px 2px hsla(108 60% 59% / 0.333),
    2px 4px 4px hsla(108 60% 59% / 0.333),
    3px 6px 6px hsla(108 60% 59% / 0.333);
    background-color: white;
    border-radius: 20px;
    font-size: large;
    
    margin: 10px 10px;
    text-justify: distribute;
    min-height: 31.5vh;
    min-width: 33.6vh;
}

.bodytext-card img {
    margin-top: 20px;
    width: 18.2vh;
}

.bodytext-card-rh {
    box-shadow:
    1px 2px 2px hsla(108 60% 59% / 0.333),
    2px 4px 4px hsla(108 60% 59% / 0.333),
    3px 6px 6px hsla(108 60% 59% / 0.333);
    background-color: white;
    border-radius: 20px;
    font-size: large;
    
    margin: 10px 10px;
    text-justify: distribute;
    min-height: 63vh;
    min-width: 67.2vh;
}

.bodytext-card-rh img {
    margin-top: 20px;
    width: 54.6vh;
}

.contacto_form {
    text-align: center;
    width: 100%;
}

.form {
    width: 90%;
    margin: 3.5vh;
}

.form_container{
    width: 100%;
}

.form_input{
    width: 90%;
    margin-bottom: 15px;
}

.form_input--message{
    width: 90%;
    height: 250px;
    resize: none;
}

.form_cta{
    background-color: rgb(157, 255, 0);
    border-radius: 5px;
    height: 50px;
    width: 40%;
    cursor: pointer;
}

.mapa{
    text-align: center;
    padding: 2.8v;
}

.mapa iframe{
    width: 100%;
}
.footer{
    box-shadow: 10px 8px 20px 16px hsl(0deg 0% 0% / 0.25);
    min-height: 300px;
    padding: 100px;
}

@keyframes show {
    from{
        opacity: 0;
        scale: 25%;
    }
    
    to {
        opacity: 1;
        scale: 100%;
    }
}

div {
    view-timeline-name: --image;
    view-timeline-axis: block;

    animation-timeline: --image;
    animation-name: show;

    animation-range: entry 25% cover 30%;
    animation-fill-mode: both;
}

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

}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    .first-tit h1 {
        overflow: hidden;
        padding-top: 1.75vh;
        margin: 4.2vh;
        font-size: 6vh;
    }
    
    .vtext{;
        padding-top: 1.7vh;
        margin: 6vh;
    }
    
    .highlight {
        font-size: 8.2vh;
        text-align: center;
    }
    
    .highlight-sp {
        font-size: 8.2vh;
        text-align: center;
        color: aliceblue;
    }
    
    .bodytext-card-rh {
        min-height: 43vh;
        min-width: 47.2vh;
    }
    
    .bodytext-card {
        font-size: 4vh;
    }
    
    .bodytext-card-rh img {
        width: 80%;
    }
    
    .fourth{
        padding: 0px;
        padding-left: 0px;
        text-align: center;
    }
}

@media only screen and (max-device-width: 480px) {
    .first-tit h1 {
        overflow: hidden;
        padding-top: 1.75vh;
        margin: 4.2vh;
        font-size: 6vh;
    }
    
    .vtext{;
        padding-top: 1.7vh;
        margin: 6vh;
    }
    
    .highlight {
        font-size: 8.2vh;
        text-align: center;
    }
    
    .highlight-sp {
        font-size: 8.2vh;
        text-align: center;
        color: aliceblue;
    }
    
    .bodytext-card-rh {
        min-height: 43vh;
        min-width: 47.2vh;
    }
    
    .bodytext-card {
        font-size: 4vh;
    }
    
    .bodytext-card-rh img {
        width: 80%;
    }
    
    .fourth{
        padding: 0px;
        padding-left: 0px;
        text-align: center;
    }
}