/* Formatações de responsividade na página index.ejs */
@media (max-width: 500px) {
    .row-mobile {
        display: block;
    }

    /* Cabeçalho */
    header {
        padding: 0;
    }

    div.flex-space-bt {
        padding: 20px;
    }

    section.area-localization {
        padding: 20px;
    }

    /* Box */
    div.box-dad {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }

    div.box {
        width: 100% !important;
    }

    /* Footer */
    footer {
        padding: 40px 20px;
    }

    div#area-footer-informations {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 30px;
    }

    div#area-footer-informations div.mobile {
        display: none;
    }

    div.box-footer {
        text-align: center;
        width: 100%;
        margin-bottom: 0;
    }

    div.box-footer p {
        width: 100% !important;
    }

    div.box-footer figure#area-logo {
        margin: 0 auto;
    }
}

@media (min-width: 501px) and (max-width: 768px) {
    section.area-localization {
        padding: 20px;
    }

    .w3-hide {
        top: 87px;
    }

    footer {
        padding: 40px 20px;
    }

    div#area-footer-informations {
        gap: 20px;
        flex-wrap: wrap;
        padding-bottom: 30px;
    }

    div#area-footer-informations div.mobile {
        display: none;
    }

    div.box-footer {
        width: 47%;
        text-align: center;
    }

    div.box-footer p {
        width: 100% !important;
    }

    div.box-footer h4 {
        font-size: 20px;
    }

    div.box-footer p,
    div.box-footer a.email {
        font-size: 14px;
    }

    div.box-footer p a {
        font-size: 14px;
    }

    div.box-footer figure#area-logo {
        margin: 0 auto;
    }
}

@media (min-width: 501px) and (max-width: 565px) {
    div#area-footer-informations {
        justify-content: center;
    }

    div.box-footer {
        width: 50%;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    ul#demo {
        margin-top: -20px;
    }

    section.area-localization {
        padding: 20px;
    }

    footer {
        padding: 40px 20px;
    }

    div#area-footer-informations {
        gap: 30px;
        flex-wrap: wrap;
        padding-bottom: 30px;
    }

    div#area-footer-informations div.mobile {
        display: none;
    }

    div.box-footer {
        width: 47%;
        text-align: center;
    }

    div.box-footer p {
        width: 100% !important;
    }
    
    div.box-footer figure#area-logo {
        margin: 0 auto;
    }
}

@media (min-width: 993px) and (max-width: 1400px) {
    section.area-localization {
        padding: 20px;
    }

    ul#demo {
        top: 86px;
    }

    footer {
        padding: 30px 20px;
    }

    div.computador {
        display: none;
    }
}

@media (min-width: 1400px) {
    ul#demo {
        top: 86px;
    }
    
    div.computador {
        display: none;
    }
}