@media (min-width: 481px) {

    .esg {
        left: 100%;
        background: red;
    }

    .esg .esg-titulo {
        top: 4vh;
        width: 100vh;
        position: absolute;
    }

    .esg .esg-titulo p {
        font-size: 6.75em;
        font-weight: 500;
        line-height: 1.125em;
        letter-spacing: -.05em;
    }

    .esg .esg-texto {
        width: 85vh;
        top: 55vh;
        position: absolute;

        z-index: 1;
    }

    .esg .esg-texto .esg-subtitulo {
        font-size: 3.5em;
        font-weight: 500;
        font-style: italic;
        letter-spacing: -0.025em;

        margin-bottom: 3vh;
    }

    .esg .esg-texto .separador,
    .underline {
        width: 12vw;
        height: .125em;
        margin: 3vh 0 5vh 7px;
    }

    .esg .esg-texto .esg-descricao {
        width: 70vh;
        font-size: 1.85em;
        font-weight: 300;
    }


    .meioambiente, .governanca {
        top: 4vh;
        left: 100%;
    }

    .social {
        top: 47.5vh;
        left: 100%;
        width: 125vh;
    }

    .social .social-descricao {
        float: left;
    }

    .social .social-descricao.social-descricao-texto {
        margin-right: 8vh;
        width: 70vh !important;
    }

    .social .social-descricao.social-descricao-logo {
        width: 45vh !important;
    }

        .social .social-descricao.social-descricao-logo img {
            height: 8vh;
            width: auto;
            margin: 0 0 1.5vh 0;

            transition: all 0.25s ease;
            -webkit-transition: all .25s ease;
        }

        .social .social-descricao.social-descricao-logo img:hover {
            height: 9vh;
            
        }
                


    .meioambiente .meioambiente-titulo,
    .governanca .governanca-titulo,
    .social .social-titulo{
        font-size: 4.5em;
        font-weight: 300;
        letter-spacing: -.05em;
    }

    .meioambiente .separador,
    .governanca .separador,
    .social .separador {
        width: 8vw;
        height: 3px;
        margin: 1vh 0 3vh 7px;
    }

    .meioambiente .meioambiente-descricao,
    .governanca .governanca-descricao,
    .social .social-descricao {
        width: 60vh;
        font-size: 1.25em;
        line-height: 1.5em;
        font-weight: 100;
        margin-left: 5px;
    }

}

@media (max-width: 480px) {

    .esg .esg-titulo {
        font-size: 3em;
        font-weight: 100;
        color: #E8BA1F;
        line-height: 1.2em;
    }

    .esg .esg-texto {
        margin-top: 10vh;
    }

    .esg .esg-texto .esg-subtitulo {
        color: #C2C2C2;
        font-size: 1.5em;
        font-weight: 300;
    }

    .esg .esg-texto .separador {
        width: 8vw;
        height: 3px;
        background-color: #fec500;
        margin: 1vh 0 3vh;
    }

    .esg .esg-texto .esg-descricao {
        color: #C2C2C2;
        font-size: 1.3em;
        font-weight: 100;
    }

    .meioambiente, .social {
        text-align: left;
        margin-bottom: 10vh;
    }

    .governanca {
        text-align: right;
        margin-bottom: 10vh;
    }

    .social-descricao-logo {
        margin-top: 2em;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }

    .social-descricao-logo img {
        width: 40vw;
    }

}