/* ==========================================================================
   
   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:640px){
    
    .columnRightAp{ width: 100%; float: none; }
    .columnRightAp a{ position: relative;  margin-top: 20px; margin-bottom: 20px; }
    
    .columnLeft, .columnRight{ width: 100%; margin-bottom: 20px; text-align: center; }
    .columnLeft a, .columnRight a{ display: block; text-align: center;  font-size: 1em; margin-top: 10px; }
    .box-left, .box-right{ width: 100%; margin-bottom: 10px; }

    .logo{
        margin: 12px auto;
        width: 100%;
        float: none;
        text-align: center;  
    }
}

/* DE 641 A 1006 */

/* COMPORTAMENTO MENU E LOGO */

@media (min-width:641px) and (max-width:1006px){
    .columnRightAp a{ position: relative;  margin-top: 20px; margin-bottom: 20px; }
    .logo{
        margin: 0px auto;
        margin-bottom: 20px;
        width: 100%;
        float: none;
        text-align: center;  
        display: block;
    }

    #cssmenu{
      border-top: 1px solid #ddd;
      width: 100%;
      float: none;
    }

    .main{ padding-top: 20px; height: 100%; }
}

/* ajustar conteúdo do centro */
@media screen and (max-width: 1148px){
    .content{
        width: 98%;
    }
}


/* responsive header */

@media screen and (max-width:979px){
    
     .column-1, .column-11{ width: 100%; text-align: center; }   
        .group-tels{ display: block; margin-top: 12px; margin-bottom: 12px; clear: both; }

    .has-detail{ width: 100%; height: 100%; margin-bottom: 30px; font-size: 2em; }
    .has-detail:after, .has-detail:before{ display: none; }
    
    .enviar{ width: 100%; }

    .big-box{ margin-bottom: 23px; }
    
    .status-bar-info p{ width: 85%; margin: 0px auto; font-size: 1em; } 
    .status-bar-info p b{ display: block; margin: 9px 0px; }

    .icon-ideas{ display: block; float: none; margin: 0px auto; }
    .copy{ margin-left: 0px; text-align: center; }

    .line-center{ margin: 8px auto; }

    p{ text-align: justify; }
    .btn{ margin: auto auto; }
    .img-welcome{ margin-top: 40px; }
    .space-responsive{ margin-bottom: 50px; }
    h2{ font-size: 2.2em; }
    .diferenciais{ clear: both; margin-bottom: 30px; }
    .diferenciais li{ text-align: left; }
    h4{ font-size: 1.2em;  overflow: hidden;  height: 100%; }

    .img-missao, .img-visao, .img-valores{ float: left; display: block; width: 200px; height: 200px; }

    .status-info{ padding: 0px; width: 100%; }
    .enviar{ float: none; margin: 10px auto; }
    .profissional{ display: none; }
    
    .footer ul li, .footer p, .footer a { font-size: 0.9em; }  
    .big-title{ font-size: 1.8em; text-align: center;}
    .img-caneca{ margin-top: 34px; }
    .group-icons .itens p{ font-size: 0.9em; }

    .group-icons .itens .big-tel{ font-size: 1.7em; }
    .tLeft, .tRight{  width: 100%; }
    #carousel{ width: 81%;}
    #carousel li{ width: 205px; }

    .status-info{ margin-top: 40px; }
    .status-info h5{ text-align: left; font-size: 1.2em; }
    .group-infoCont{ margin: 0px; width: 100%; margin-top: 10px; }
        
}

@media (min-width:551px) and (max-width:937px){

    .status-bar-info .column-3{ width: 30% }
}