.intro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--desktopHeightHeader));
    /* height: auto; */
    width: 100vw;
    align-items: center;
    /* min-height: 550px; */
}

.intro .filter {
    position: absolute;
    /* height: calc(/100vh - var(--desktopHeightHeader)); */
    height: 100%;
    width: 100vw;
    background-image: url('../media/images/background2.png');
    background-size: cover;
    background-position: right top;
}

.intro .psc-filter {
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: flex-start;
}

.intro .psc-filter img {
    height: 60%;
    position: absolute;
}

.intro .intro-div-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 8vh;
    width: 100%;
    height: 60%;
    z-index: 1;
}

.intro .intro-title-div {
    display: flex;
    flex-direction: column;
    width: 90%;
    text-align: center;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

.intro .intro-title-div img {
    width: 600px;
}

/* .intro .intro-title-div h1 {
    font-size: 2.5rem;
    font-family: 'Aller Std 1';
    color: #FAF6F4;
    text-transform: uppercase;
} OLD TITLE*/

.intro .intro-subtitle-div {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 600px;
    text-align: center;
    z-index: 1;
}

.intro .intro-subtitle-div h2 {
    font-size: 20px;
    color: #FAF6F4;
    font-family: 'Aller Std 6';
    font-weight: 600;
}

.intro .intro-div-more-information-container{
    z-index: 1;
    height: 40%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
}

.intro .intro-div-more-information-container h3 {
    font-size: 0.8rem;
    color: white;
    font-family: 'Aller Std 1';
    text-transform: uppercase;
    background-color: #07ba94;
    border-radius: 5px;
    padding: 3px;
}

.intro .intro-div-more-information-container img {

    animation: continue 1.5s infinite alternate;
    width: 5rem;
}

#expand-more-mobile {
    display: none;
}

@media only screen and (orientation: portrait) and (max-width: 767px) {
    .intro .filter {
        height: calc(100vh - var(--mobileHeightHeader));
        background-image: url('../media/images/mobile4.png');
        background-position: top left;
    }


    .intro .intro-title-div img {
        width: 100%;
    }


    .intro .psc-filter img {
        height: 40%;
    }

    /* .intro .intro-title-div h1 {
        font-size: 7vw;
    }     */
        

    .intro .intro-subtitle-div h2 {
        font-size: 4vw;
    }

    #expand-more-desktop {
        display: none;
    }

    #expand-more-mobile {
        display: flex;
    }
}

/* Celulares na horizontal */
@media only screen and (orientation: landscape) and (max-width: 767px) {
    .intro {
        min-height: 550px;
    } 
    .intro .intro-subtitle-div {
        max-width: 400px;
        width: 50%;
    }

    .intro .intro-title-div h1 {
        font-size: 7vh;
    }

    .intro .intro-subtitle-div h2 {
        font-size: 1.2rem;
    }

    .intro .intro-subtitle-div h3 {
        font-size: 3vh;
    }
    
    .intro .intro-title-div img {
        width: 100vh;
    }
}

/* Celulares modernos na horizontal */
@media only screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) {
    
    .intro {
        min-height: 550px;
    }
    .intro .intro-subtitle-div h2 {
        /* font-size: 1.2rem; */
    }

    .intro .intro-subtitle-div h3 {
        font-size: 3vh;
    }

    .intro .intro-title-div img {
        width: 60%;
    }

    .intro .psc-filter img {
        height: 60%;
    }
}


/* Tablets */
@media only screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
    .intro .intro-title-div h1 {
        font-size: 3rem;
    }

    .intro .intro-div-more-information-container h3 {
        font-size: 1.5rem;
    }

    .intro .filter {
        background-image: url('../media/images/mobile4.png');
        background-position: bottom right;
    }

    .intro .psc-filter img {
        height: 40%;
    }
}

@media only screen and (orientation: landscape) and (min-width: 1024px) {
    .intro {
        min-height: 550px;
    }   
}


@keyframes continue {
    from {
        transform: translateY(15px);
    }

    to {
        transform: translateY(0);
    }
}