@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

.footer-items {
    background: url("/img/fundo-rodape_14.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 50px 20px;
    margin-top: -1rem;
}

#imgRodape {
    padding-top: 2rem;
}

#freeFireRodape img {
    width: 12rem;
    margin-left: 5rem;
}

#lolRodape img {
    width: 12rem;
}

#logoFooter img {
    width: 15rem;
    margin-left: 1rem;
}

.textoFooter {
    text-align: right;
    margin-left: -3rem;
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-family: 'Roboto', sans-serif;
    color: #8e8e8e;
}

@media screen and (max-width: 1737px) {
    .textoFooter {
        margin-left: -1rem;
    }
}

@media screen and (max-width: 1610px) {
    .textoFooter {
        margin-left: -3rem;
    }
}

@media screen and (max-width: 1545px) {
    .textoFooter {
        margin-left: -6rem;
    }
}

@media screen and (max-width: 1450px) {
    .textoFooter {
        margin-left: -6rem;
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    #freeFireRodape img {
        width: 10rem;
        margin-left: 5rem;
    }

    #lolRodape img {
        width: 10rem;
    }

    #logoFooter img {
        width: 13rem;
        margin-left: -1rem;
    }
}

@media screen and (max-width: 1236px) {
    .textoFooter {
        margin-left: -6rem;
        font-size: .9rem;
        margin-top: 1.5rem;
    }

    #freeFireRodape img {
        width: 9rem;
        margin-left: 5rem;
    }

    #lolRodape img {
        width: 9rem;
    }

    #logoFooter img {
        width: 12rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 1169px) {
    .textoFooter {
        margin-left: -4rem;
        font-size: .9rem;
        margin-top: 1rem;
    }

    #freeFireRodape img {
        width: 8rem;
        margin-left: 5rem;
    }

    #lolRodape img {
        width: 8rem;
    }

    #logoFooter img {
        width: 10rem;
        margin-left: -1rem;
    }
}

@media screen and (max-width: 1033px) {
    .textoFooter {
        margin-left: -4rem;
        font-size: .8rem;
        margin-top: 1rem;
    }

    #freeFireRodape img {
        width: 7rem;
        margin-left: 5rem;
    }

    #lolRodape img {
        width: 7rem;
    }

    #logoFooter img {
        width: 9rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 970px) {
    .textoFooter {
        margin-left: -4rem;
        font-size: .7rem;
        margin-top: 1rem;
    }

    #freeFireRodape img {
        width: 6rem;
        margin-left: 3rem;
    }

    #lolRodape img {
        width: 6rem;
    }

    #logoFooter img {
        width: 9rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 970px) {
    .textoFooter {
        margin-left: -4rem;
        font-size: .6rem;
        margin-top: 1rem;
    }

    #freeFireRodape img {
        width: 5rem;
        margin-left: 3rem;
    }

    #lolRodape img {
        width: 5rem;
    }

    #logoFooter img {
        width: 9rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 970px) {
    .textoFooter {
        margin-left: -4rem;
        font-size: .6rem;
        margin-top: 1rem;
    }

    #freeFireRodape img {
        width: 5rem;
        margin-left: 3rem;
    }

    #lolRodape img {
        width: 5rem;
    }

    #logoFooter img {
        width: 9rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 777px) {
    .textoFooter {
        margin-left: -4rem;
        font-size: .5rem;
        margin-top: 1rem;
    }

    #freeFireRodape img {
        width: 4rem;
        margin-left: 2rem;
    }

    #lolRodape img {
        width: 4rem;
    }

    #logoFooter img {
        width: 9rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 767px) {
    .textoFooter {
        margin-left: 0rem;
        font-size: 1rem;
        margin-top: 1rem;
        padding-left: 2rem;
    }

    #logoFooter img {
        width: 15rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 595px) {
    .textoFooter {
        margin-left: 0rem;
        font-size: .8rem;
        margin-top: 1rem;
        padding-left: 2rem;
    }

    #logoFooter img {
        width: 14rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 576px) {
    .textoFooter {
        margin-left: 0rem;
        font-size: .7rem;
        margin-top: 0rem;
        padding-left: 2rem;
    }

    #logoFooter img {
        width: 10rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 556px) {
    .textoFooter {
        margin-left: 0rem;
        font-size: .5rem;
        margin-top: 0rem;
        padding-left: 2rem;
    }

    #logoFooter img {
        width: 8rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 500px) {
    .textoFooter {
        margin-left: 0rem;
        font-size: .8rem;
        margin-top: 0rem;
        padding-left: 2rem;
    }

    #logoFooter img {
        width: 7rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 460px) {
    .footer-items {
        background: url("/img/fundo-rodape_14.png");
        background-size: 100rem;
    }

    .textoFooter {
        margin-left: 0rem;
        font-size: .7rem;
        margin-top: .6rem;
        padding-left: 1rem;
    }

    #logoFooter img {
        width: 10rem;
        margin-left: 0rem;
    }
}

@media screen and (max-width: 400px) {
    .footer-items {
        background: url("/img/fundo-rodape_14.png");
        background-size: 100rem;
    }

    .textoFooter {
        margin-left: 0rem;
        font-size: .55rem;
        margin-top: .6rem;
        padding-left: 1rem;
    }

    #logoFooter img {
        width: 8rem;
        margin-left: 0rem;
    }
}