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

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

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

/* SMARTPHONES */
@media screen and (max-width:500px){
    .area{ margin-top: 0px; }
    .barTop{ margin-top: 120px; height: 100%; }
    .logo{ top: 0px; float: none; margin: 0px auto; }
    .columnMedium{ margin: 0px; width: 100%; }
    .cssmenu{ margin: 0px; width: 100%; }
    .columnRight{ width: 100%; }
    main .content{ padding-left: 20px; padding-right: 20px; }
    .barInfo span{ font-size: 1.1em; }
    .quem-somos .lst li{ font-size: 1.4em; }
    h2{ font-size: 2.2em; }
    .equipamentos .gBts li{ font-size: 1.4em; }
    .Download{ margin: 0px 0px 30px 0px; }
    .combo-treinamentos{ margin: 10px auto; max-width: 300px; }
    .group-newsletter{ width: 95%; }

    .medicina .barInfo{ display: none; }
    .medicina .barInfo2{ display: block; }
    .medicina .lst li{ height: 70px; }
    .medicina{ padding-bottom: 170px; }

    .status-info{ margin: auto auto; float: none; width: 90%; }

    .lstSociais{ display: block; }
    .FaleConosco, .Download{ display: inline-block; float: none; margin-top: 40px; text-align: center; }
    .lst{ text-align: center; }
    
    .boxBig{ margin: 20px 0px; }
    .groupLeft{ width: 100%; padding: 0px; padding-bottom: 60px; }
    .area .gForm{ margin-bottom: 150px; }
    .gOutras{ width: 92%; }
    .lstFooter{ padding-top: 20px; }

    .footer{ background-size: cover; }
    
}

/* TABLETTES */
@media (min-width:501px) and (max-width:959px){
    
    .logo{ top: 0px; float: none; margin: 0px auto; }
    .columnMedium{ margin: 0px; width: 100%; }
    .cssmenu{ margin: 0px; width: 100%; }

    .Download{ margin: 0px 0px 30px 0px; }
    .section-search-top .column-2{ width: 10%; }
    .section-search-top .column-5{ width: 40%; }

    .FaleConosco, .Download{ display: inline-block; float: none; margin-top: 40px; text-align: center; }
    #cssmenu{ text-align: center; background-color: var(--color-light-gray); }
    .quem-somos .column{ width: 100%; padding-left: 20px; padding-right: 20px; }
    .manSegTrab{ margin-top: 60px; bottom: -20px; background-position: center bottom; }
    .cursos .gBts .lst li{ height: 100%; margin-bottom: 30px; }
    .cursos .gBts .lst li span{ font-size: 0.5em; }
    .cursos .gBts .lst, .equipamentos .gBts{ margin-left: 10px; }
    .equipamentos .gBts li{ font-size: 0.8em; line-height: 30px; }

    .status-info{ margin: auto auto; float: none; width: 90%; }

    .medicina .gBts li{ font-size: 0.8em; line-height: 15px; height: 50px; }
    .manOcupacional{ height: 450px; }
}

/* TABLETTES */
@media (min-width:960px) and (max-width:1200px){

    .columnRight{ width: 80%; }
    main .content{ padding-left: 20px; padding-right: 20px; }
    header .content{ padding-left: 20px; padding-right: 20px; }
}