@media (max-width: 1100px){ /*---------------1100px------------*/
    
    /*--------------------------QUEM-SOMOS--------------------*/

    .quem-container > *{
        width: 350px;
    }

    .quem-text{
        font-size: 18px;
    }

    .quem-title{
        font-size: 40px;
    }

    .quem-img{
        height: 280px;
        width: 280px;
    }

    /*--------------------------QUEM-SOMOS--------------------*/

    /*--------------------------MAIN-PAGE----------------------*/

    .produto{
        width: 120px;
    }

    .produto-img{
        height: 80px;
    }

    .main-banner{
        width: 550px;
        height: 250px;
        margin: 20px 0;
    }

    .row-top{
        width: 550px;
        margin-top: 20px;
    }

    .main-row{
        width: 550px;
    }

    #main{
        padding-bottom: 25px;
    }

    .produto-oferta{
        font-size: 12px;
        padding: 20px 4px 2px 4px;
    }

    .produto-nome{
        font-size: 12px;
    }

    .produto-preco{
        font-size: 10px;
    }

    .row-title{
        font-size: 18px;
    }

    .row-link{
        font-size: 14px;
    }

    /*--------------------------MAIN-PAGE----------------------*/
}

@media (max-width: 800px) { /*---------------800px------------*/

    .center{
        align-items: flex-start;
    }

    /*--------------------------HEADER------------------------*/
    #header-top{
        padding: 0 20px;
    }
    #logo-header{
        height: 40px;
    }
    #header-top{
        .left{
            column-gap: 20px;
        }
        
        .right{
            column-gap: 20px;
        }
    }
    #header-list{
        width: 90%;
        margin: 0 5%;
    }
    /*--------------------------HEADER------------------------*/

    /*--------------------------FOOTER------------------------*/

    footer{
        padding: 15px;
        height: 250px;
    }

    #footer-container{
        width: 100%;
    }

    #logo-footer{
        height: 50px;
    }

    /*--------------------------FOOTER------------------------*/

    /*--------------------------CONTACT-----------------------*/

    #contact{
        display: block;

        .right,.left{
            width: 450px;
            margin: 0;
            margin-top: 30px;
        }
    }

    .contact-container{
        p{
            font-size: 20px;
        }
    }

    #contact-title{
        font-size: 35px;
    }

    /*--------------------------CONTACT-----------------------*/

    /*--------------------------LOGIN-------------------------*/

    #login{
        margin-top: 10vh;
        margin-bottom: 5vh;
    }

    /*--------------------------LOGIN-------------------------*/

    /*--------------------------QUEM-SOMOS--------------------*/
    
    #quem{
        grid-auto-flow: row;
        grid-template-columns: 1fr;

        .right > .quem-container{
            display: flex;
            flex-flow: column-reverse;

            .quem-title{
                order: 1;
            }
        }

        .left, .right{
            padding: 0;
        }
    }

    .quem-container > *{
        width: 400px;
    }

    .quem-text{
        font-size: 20px;
    }

    .quem-img{
        height: 300px;
        width: 300px;
    }

    /*--------------------------QUEM-SOMOS--------------------*/

    
} 

@media (max-width: 550px) {/*---------------550px-------------*/

    .center{
        height: calc(100vh - 110px);
    }

    /*--------------------------HEADER------------------------*/
    #pesquisar{
        width: 100%;

        p{
            font-size: 14px;
        }
    }
    #header-top{
        .right{
            width: 100%;
            grid-template-columns: 1fr repeat(2, 25px);
            column-gap: 8px;
        }
        .left{
            column-gap: 8px;
        }
    }
    #logo-header{
        height: 50px;
    }
    #header-top{
        display: grid;
        grid-auto-flow: column;
        column-gap: 8px;
        grid-template-columns: 100px 1fr;
        height: 60px;
    }
    #header-bottom{
        height: 20px;
        background-color: var(--light-orange);
    }
    #header-list li a{
        font-size: 14px;
    }
    /*--------------------------HEADER------------------------*/

    /*--------------------------FOOTER------------------------*/

    footer{
        padding: 5px;
    }

    #footer-container{
        width: auto;
        flex-direction: column;
        align-items: center;
    }

    #logo-footer{
        margin-bottom: 15px;
    }

    .footer-links li a{
        width: 120px;
        font-size: 12px;
    }

    .footer-topic{
        font-size: 18px;
    }

    /*--------------------------FOOTER------------------------*/

    /*--------------------------MENU--------------------------*/
    #menu{
        width: 180px;
    }
    #menu-top{
        height: 70px;

        img{
            height: 50px;
        }
    }
    .menu-topics{
        margin: 10px 0px 5px 0px;

        h2{
            font-size: 14px;
        }
    }
    #logo-menu-white{
        width: 20px;
    }
    .menu-links > a{
        font-size: 12px;
        margin-bottom: 4px;
    }
    #menu-search-button > a{
        font-size: 12px;
        height: 24px;
    }
    /*--------------------------MENU------------------------*/

    /*--------------------------CONTACT-----------------------*/

    .contact-container{
        p{
            font-size: 14px;
        }
    }

    #contact-title{
        font-size: 25px;
    }

    #contact{
        .right,.left{
            width: 280px;
            margin: 0;
            margin-top: 30px;
        }
    }

    /*--------------------------CONTACT-----------------------*/

    /*--------------------------LOGIN-------------------------*/

    #login{
        gap: 20px;
    }

    .login-input{
        width: 250px;
        height: 30px;
        font-size: 14px;
    }

    #login-title{
        font-size: 28px;
        margin-bottom: 5px;
    }

    .login-button{
        height: 30px;
        font-size: 18px;
    }

    /*--------------------------LOGIN-------------------------*/

    /*--------------------------QUEM-SOMOS--------------------*/

    .quem-container > *{
        width: 300px;
    }

    .quem-text{
        font-size: 16px;
    }

    .quem-img{
        height: 250px;
        width: 250px;
    }

    /*--------------------------QUEM-SOMOS--------------------*/
}


@media (max-width: 300px){/*---------------300px--------------*/
    /*--------------------------HEADER------------------------*/
    #header-top{
        height: 50px;
        grid-template-columns: 70px 1fr;
        padding: 0 10px;

        .left{
            column-gap: 0px;
        }
        .right{
            display: flex;
            justify-content: space-between;
        }
    }
    #logo-header{
        height: 35px;
    }
    #pesquisar{
        width: 100%;
        height: 20px;

        p{
            font-size: 10px;
        }
    } 
    #header-list li a{
        font-size: 10px;
    }

    /*--------------------------HEADER------------------------*/

    
}