/* ==========================================================================
   
   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){
    
    .bgAp{ background: none; }
    .group-info-livro{ width: 95%; margin: 0px auto; text-align:center; }
    .big-title{ text-align: center; }
    .hhidden{ display: none; }
    p{ text-align: justify; }
    .download{ float: none; margin: 0px auto; }

    .redes-sociais{ text-align: center; margin-top: 60px; }

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

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


/* responsive header */

@media (min-width: 641px) and (max-width: 900px){

    .bgAp{ background: none; }
    .group-info-livro{ width: 95%; margin: 0px auto; text-align:center; }
    .hhidden{ display: none; }

    .redes-sociais{ text-align: center; margin-top: 60px; }

    .copy{ width: 100%; text-align: center; float: none; }
    .icon-ideas{ float: none;  }
    
    p{ text-align: justify; }
    .download{ float: none; margin: 0px auto; }
    .space-topMax{ width: 95%; }
        
}