/* desktop tela pequena */
@media (max-width: 1680px){

}






/* notebook L*/

@media (max-width: 1440px){
    

}

/* notebook */
@media (max-width: 1024px){

    /* carrocel */
    .quatro-sec .quatro-1{

        width: 17%;
        height: 550px;
    }

    /* imagem principal */
    .quatro-2{
        background-size: cover;
        width: 73%;
        height: 550px;
    
    }

    /* icone tela-cheia */
    .quatro-2 .icone-tela-cheia{
        top: 530px;
        right: 5%;

    }



}


@media (max-width: 768px){

    .quatro-sec{

        margin-top: 40px;

    }

    /* icone de voltar */
    .quatro-icone-voltar{
        top: 5px;
        right: 95%;
    }

    /* carrocel */
    .quatro-sec .quatro-1{

        width: 17%;
        height: 445px;
    }

    /* imagem principal */
    .quatro-2{
        background-size:cover;
        width: 77%;
        height: 445px;

    }

        /* icone tela-cheia */
        .quatro-2 .icone-tela-cheia{
            top: 445px;
            right: 3%;
    
        }

    

}



/*
@media (max-width: 430px){

    #quatro-sec{

        display: none;

    }

}

@media (min-width: 430px){

    #quatro-sec-mobile{

        display: none;

    }

}
*/
    
@media (max-width: 425px){

    .tres{

        flex-direction: column;
        align-items: center;
        justify-content: center;


    }

    .tres p{

        text-align: center;

    }


    .quatro-sec{

        margin-top: 45px;

    }

    /* icone de voltar */
    .quatro-icone-voltar{
        top: 5px;
        right: 92%;
    }

    /* icone tela-cheia */
    .quatro-2 .icone-tela-cheia{
        top: 407px;
        right: 3%;

    }

    .quatro-2{
        background-repeat: no-repeat;
        background-size: cover;
        animation: slide 5s forwards;
        animation-fill-mode: forwards;
        background-position: 0% 50%;
    
    }
    
    @keyframes slide {
        0% {
            background-position: 0% 50%;
        }
        99% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 50% 50%;
            animation-play-state: paused;
        }
    }
    

}




@media (max-width: 375px){

}


@media (max-width: 320px){

}