/**********/
/* FOOTER */
/**********/

footer{
    background-color: #0f3369;
    padding: 70px 30px;
    display: flex;
}
footer a{
    color: #FFF!important;
    font-weight: 300;
    font-size: 15px;
}
footer ul{
    padding: 0px 30px;
}
footer .footer-titulo{
    color: #CCC;
    padding-top: 35px;
    padding-bottom: 15px;
    border-bottom: 1px solid #696969;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 15px;
}
footer #footer-logo-img{
    max-width: 180px;
    padding-left: 30px;
}
footer .footer-segundo-li{
    padding-top: 20px;
}
footer #footer-sobre-loja li:last-of-type{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    color: #FFF;
}
footer #footer-sobre-loja li:last-of-type a{
    font-size: 12px!important;
}
footer #footer-btn-texto-sobre{
    color: #FFF;
    font-weight: 300;
    font-size: 12px;
    line-height: 20px;
    display: block;
}
footer #footer-redes-sociais #footer-redes-sociais-ul{
    padding: 0px;
}
footer #footer-redes-sociais #footer-redes-sociais-ul li{
    display: inline-flex;
}
footer #footer-logo-conectashop{
    margin-top: 30px;
    display: block!important;
}
footer #footer-logo-conectashop img{
    max-width: 150px;
}
footer #footer-btn-whats{
    font-size: 18px;
    font-weight: 500;
}
footer #footer-endereco{
    display: block!important;
    margin-top: 20px;
}
footer #footer-endereco a{
    font-size: 13px;
    font-weight: 500;
}

/**********/
/* RODAPÉ */
/**********/

#rodape{
    display: flex;
    align-items: center;
    min-height: 80px;
    font-size: 12px;
    color: #FFF;
    background-color: #0f3369;
    padding: 0px 30px 0 60px;
    margin-bottom: 50px;
    opacity: 0.8;
}
#rodape a{
    font-weight: 400;
    font-size: 12px;
    color: #FFF;
}
#rodape .avaliacao-loja ul{
    display: inline-flex;
    margin: 0px;
}
#rodape .avaliacao-loja img {
    max-width: 20px;
    margin-right: 8px;
    filter: grayscale(1);
    cursor: pointer;
    transition: 0.3s;
}
#rodape .avaliacao-loja-geral img{
    max-width: 19px!important;
}
#rodape .avaliacao-loja .img-dourada {
    filter: grayscale(0)!important;
}

/***************************/
/* INFORMAÇÕES IMPORTANTES */
/***************************/

#informacoes-importantes{
    padding: 0px 60px;
    margin: 50px 0;
}
#informacoes-importantes h2{
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 400;
}
#informacoes-importantes #meios-pagamento li, #informacoes-importantes #meios-entrega li, #informacoes-importantes #meios-seguranca li{
    display: inline-flex;
}
#informacoes-importantes #meios-pagamento li:first-of-type, #informacoes-importantes #meios-entrega li:first-of-type, #informacoes-importantes #meios-seguranca li:first-of-type{
    display: block;
}
#informacoes-importantes #meios-pagamento img{
    max-width: 60px;
    align-self: center;
}
#informacoes-importantes #meios-entrega img{
    max-width: 75px;
    align-self: center;
}
#informacoes-importantes #meios-seguranca img{
    max-width: 100px;
    margin-top: 3px;
    align-self: center;
}

@media screen and (max-width: 575px){
    footer{
        margin-left: -15px;
        margin-right: -15px;
        padding: 70px 15px;
    }
    #rodape{
        margin-left: -15px;
        margin-right: -15px;    
        font-size: 9px;  
        padding: 0px 15px!important;
    }
    #rodape a{ 
        font-size: 9px;  
    }
    #informacoes-importantes{
        margin-left: -15px;
        margin-right: -15px;  
        padding: 0px 15px!important;  
    }
    #informacoes-importantes h2{
        font-size: 14px;
        font-weight: 500;
    }
    #formas-pagamento{
        margin-bottom: 0px;
        justify-content: center;
        text-align: center;
    }
    #formas-pagamento img{
        margin-left: 0px;
    }      
    #informacoes-importantes #meios-pagamento, #informacoes-importantes #meios-entrega{
        margin-bottom: 10px!important;
    }  
    #informacoes-importantes #meios-pagamento img{
        max-width: 50px;
        align-self: flex-start;
    }
    #informacoes-importantes #meios-entrega img{
        max-width: 65px;
        align-self: flex-start;
    }
    #informacoes-importantes #meios-seguranca img{
        margin-top: 0px;
        align-self: flex-start;
    }
}

@media screen and (max-width:  1199px){
    footer ul{
        padding: 0px;
    }
    footer #footer-logo-img{
        padding-left: 0px;
    }
    #rodape, #informacoes-importantes{
        padding: 0px 30px;
    }
    #informacoes-importantes #meios-pagamento, #informacoes-importantes #meios-entrega{
        margin-bottom: 20px;
    }
}