@media screen and (max-width: 767px){
    .telaLogin, .telaHist{
        max-width: 280px;
    }
    .telaHist .row ul.titulos{
        display: inline-block;
    }
    .telaHist{
        margin: 20px auto;
    }

    ul.lst{ display: inline-block; width: 180px; }

    .telaHist .row{ 
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        display: grid;
        grid-auto-flow: column;
        height: 450px;
    }
    .popup{
        width: 65%; 
    }
    .telaHist.dep .row{ 
        display: block;
        height: 450px;
    }
    .td.dependentes{
        width: 100%;
        float: none;
        margin: 8px 0px;
        height: 200px;
    }
    .imgCart{ width: 100%; height: 200px; background-size: 50%; }
    .gInfos{ position: absolute; width: 42%; top: 40px; right: 10px; text-align: center; }
    .gInfos .lst li{ font-size: 0.7em; }
    h4.name{ font-size: 1em; }
    .menu ul{ text-align: center; }
    .menu ul li a{ font-size: 0.9em; text-align: center; }

    .logoC{ display: block; text-align: center; margin: 0px auto; width: 50%; margin-bottom: 18px; }
    .gInfos{ position: absolute; width: 90%; left: 20px; top: 30px; right: 65px; }
}

@media (min-width:768px) and (max-width:1023px){
    .menu ul{ text-align: center; }
    .telaLogin, .telaHist{
        max-width: 630px;
    }
    .imgCart{ width: 100%; }
    .gInfos{ position: absolute; width: 48%; top: 40px; right: 10px; }
    .gInfos .lst li{ font-size: 0.7em; }
    h4.name{ font-size: 1em; }
    .telaHist.dep .row .td.dependentes.lstDep{ width: 340px; float: left; }
    .td.dependentes{
        width: 43%;
        height: 300px;
        float: right;
    }
    .popup{
        width: 80%; 
    }
    .logoC{ display: block; text-align: center; margin: 0px auto; width: 40%; margin-bottom: 18px; }
    .gInfos{ position: absolute; width: 90%; left: 20px; top: 30px; right: 65px; }
}

@media screen and (max-width: 1024px){}