/* ==========================================================================
   
   medias querys para responsive design

   DO MENOR PARA O MAIOR (DO CELULAR PARA O PC)

   ========================================================================== */

/* DE 0 A 640 */

/* COMPORTAMENTO HEADER */

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

    header{ position: relative;}

    .logo{ position: relative; width: 100%; height: 140px; margin: 0px auto; left: none; }
    .areaAbran{ position: relative; float: none; margin: 20px auto; }

    .logo a{ display: block; text-align: center; margin-bottom: 30px; }

    .clear{ height: 0px; }

    .meni{ width: 100%; }
    main .row{ padding: 0px 20px; }
    .iframe{ padding: 0px 20px; margin-top: 10px; width: 92%; }

    .lst-vantagens{ margin-top: 20px; margin-bottom: 20px; }
    .lst-vantagens li{ font-size: 1em; }

    .revender p{ font-size: 1.4em; margin-bottom: 80px; width: 100%; }

    .icons-prods li{ width: 47%; margin-bottom: 20px; }
    .icons-prods span{ font-size: 1em; }
    
    .title-big-icon{ margin-top: 50vw; height: 50px; }
    .bigBox p{ height: 40vw; overflow: none; }
    .expandir{ margin-bottom: 30px; height: 70px; }

    .has-detail{ font-size: 1.4em; }
    .importancia h3{ margin-top: 0px; }
    .importancia p{ text-align: center; }

    .importancia .column{ margin: 10px 0px; }

    .depoimentos .column{ overflow: hidden; margin: 20px 0px; }
    .depoimentos article{ padding: 0px; }

    .box-left, .box-right{ width: 100%; float: none; }
    .news{ margin: 0px auto; margin-top: 20px; }
    .horario li{ font-size: 0.9em; }
    .column-3 h5{ margin-top: 40px; }
    .column-3 h5:first-child(2){ margin-top: 0px; }
    .lst-footer li a{ font-size: 0.9em; }

    .formee div{ float: none; width: 90%; }

    .group-news{ width: 100%; }

    h5{ margin-bottom: 0px; }
    .icon-ideas{ margin: 0px auto; display: block; float: none; }
    
    .status-info{ width: 100%; padding: 0px; margin-top: 40px; }

    .group-contato{ 
        width: 100%; 
    }

    .revender .hoverzoom.b1, .revender .hoverzoom.b3{ float: none; } 
    .revender .column{ margin: 6px 0px; }

    .group-infoCont{ width: 83%; float: left; padding: 0px; margin:0px; }
    .iconBig{ width: 100%; }

    .group-contato .fa-phone-square, .group-contato .fa-envelope, .group-contato .fa-map-marker{
        position: relative;
        margin: 0px;
        font-size: 2.2em;
        width: 40px;
        text-align: left;
    }

    .footer h3{ text-align: center; }

    .groupRedes{ right: 1px; }
    .colMiddle{ overflow: hidden; height: 100%; padding-top: 60px; padding-bottom: 60px; }
    .lst-footer.redes{ margin-bottom: 30px; }
    .lst-footer.redes li{ text-align: center; }

    .end{ margin-top: 30px; font-size: 0.9em; }

    .groupRedes{ width: 40px; height: 100px; padding: 8px; }
    .groupRedes div{ height: 40px; margin: 10px 0px; }
    .whatsapp, .telegram{ width: 30px; height: 30px; }
}

/* DE 641 A 1006 */

/* COMPORTAMENTO MENU E LOGO */

@media (min-width:501px) and (max-width:963px){

    header{ position: relative; }

    .logo{ position: relative; width: 100%; height: 140px; margin: 0px auto; left: none; }
    .areaAbran{ position: relative; float: none; margin: 20px auto; }

    .logo a{ display: block; text-align: center; margin-bottom: 30px; }

    .clear{ height: 0px; }

    main .row{ padding: 0px 20px; }
    .iframe{ padding: 0px 20px; margin-top: 10px; width: 92%; }
    .movie .column{ width: 100%; }

    .revender .hoverzoom.b1, .revender .hoverzoom.b3{ float: none; } 
    .revender .column, .depoimentos .column{ width: 50%; padding: 6px; }

    .icons-prods li{ width: 47%; margin-bottom: 20px; }

    .Ccenter{ font-size: 0.9em; }

    .slider article{ padding: 0px; padding-right: 8px; }
    .slider article p{ font-size: 0.9em; }

    .importancia article{ min-height: 360px; }

    .footer .column{ margin: 20px 0px; width: 100%; text-align: center; }
    .footer .redes{ float: none; text-align: center; }
    .footer .redes li{ text-align: center; }
    .footer .redes li a{ display: block; text-align: center; }

}

@media (min-width:964px) and (max-width:1600px){
    main .row, .movie .row{ padding: 0px 20px; position: relative; }
    .header .main .row{ padding: 0px 20px;  width: 1100px; margin: 0px auto; position: relative; }

    
}