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

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

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

/* SMARTPHONES */
@media screen and (max-width:500px){
    .logo{ margin: 10px auto; width: 232px; height: 83px; float: none; }
    .header{ position: relative; height: 100%; text-align: center; } 
    #slider1_container{ margin-top: 20px; }
    /* #cssmenu{ clear: both; } */
    .imgAtividade{ height: 250px; width: 100%; }
    .img-mae{ display: none; }
    #quem-somos{ background-size: 50%; }
    #quem-somos p{ text-align: justify; }
    .imgChildren{ margin: 0px auto; width: 80%; float: none; }
    .matricular input.txt{ margin: 4px 0px; }
    .matricular .matricula{ float: none; margin: 20px auto 0px auto; }
    .matricula{ position: relative; float: none; margin: 90px auto 0px auto; }
    .depoimentos h2{ text-align: center; }
    .footer{ text-align: center; }
    .footer h5{ text-align: center; margin-top: 30px; }
    .lst-footer{ margin-top: 20px; text-align: center; }
    .lst-footer a{ display: block; text-align: center; }
    .icon-ideas{ display: block; text-align: center; float: none; margin: 12px auto; }
    .groupDestaque p{ font-size: 1.4em; }
    .copy{ text-align: center; }
}

/* TABLETTES */
@media (min-width:501px) and (max-width:959px){
    .logo{ margin: 10px auto; width: 232px; height: 83px; float: none; }
    .header{ position: relative; height: 100%; text-align: center; } 
    #cssmenu{ margin-top: 30px;}
    #cssmenu > ul > li > a{ line-height: 30px; }
    .columnMenu{ margin: 0px; width: 100%; float: none; }
    .matricula{ position: relative; float: none; margin: 40px auto 0px auto; }
    #slider1_container{ margin-top: 20px; }
    #quem-somos{ background-size: 50%; }
    #quem-somos .column, #proposta .column{ width: 100%; }
    #quem-somos p{ text-align: justify; }
    .imgChildren{ margin: 0px auto; width: 80%; float: none; }
    .imgAtividade{ width: 150%; height: 200px; }
    .img-mae{ display: none; }   
    .saiba-mais{ float: left; left: 1%; }
}

/* TABLETTES */
@media (min-width:960px) and (max-width:1200px){
    .columnMenu{ margin: 0px auto; width: 50%; float: none; }
    .img-mae{ bottom: -504px; }
    #cssmenu > ul > li > a{ padding: 10px 8px; }
    #quem-somos{ overflow: hidden; }
    .matricula{ top: -150px; }
}