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

   medias querys para responsive design

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

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

/* De 0 à 500px */
@media screen and (max-width: 500px){

  header{ 
    overflow: hidden;
    height: 100%;
    background-color: orange;
  }

  .logo{ display: block; margin: 0px; }
  #cssmenu{ margin: 0px; width: 100%; z-index: 9999; }
  .player{ margin: 10px auto; float: none; clear: both; text-align: center; }

  .areaTop ul{ clear: both; }

  .logo{ width: 130px; }
	.mold{ width: 150px; height: 140px; }

  .btWhatsapp{ margin: 0px auto; }

  .mold{ position: relative; text-align: center; background-color: #000; 
    margin: 0px auto; width: 150px; height: 170px; }
    
  .areaTop{ margin: 0px; text-align: center; width: 100%; height: 100%; position: relative; }
  .areaTop ul{ width: 100%; margin-top: 40px; text-align: center; }
  .areaTop ul li{ display: inline; text-align: center; }

  h2.has-detail{ float: none; border: none; margin: 30px auto; text-align: center; }
  .tempo{ margin-top: 60px; }

  .slP{ margin-top: 0px; }

  .areaHeader{
    padding-bottom: 0px;
    padding: 10px auto; 
    height: 100%;
    margin: 0px;
  }

  .quemSomos2 .has-detail{ font-size: 1em; }
  .fonte{ margin-bottom: 40px; }

  .formMusica{ max-width: 100%; overflow: hidden; height: 100%; margin-bottom: 40px; clear: both; }
  .formEnviar{ width: 100%; float: none; }

  .anunciantes .row{ margin-top: 40px; }

  .marginSpace{ margin-top: 40px; }
  .lancamentos .column, .videos .column{ margin: 10px 0px; }

  .noticias{ width: 90%; }

  .clientes{ height: 220px; }

    .nomProd p{ font-size: 0.9em; }

    .aradio{ display: none; }
    .anunciantes article{ border: none; }

    .cLeft, .cRight{ width: 100%; }
    .iplayer{ display: block; }
    .player{ margin-top: 0px; width: 100%; }
    .gRadio{ margin: 0px auto; background: transparent; width: 100%; height: 100%; }
    .gRadio img{ display: none; }

    .email{ display: none; padding: 2px 0px; height: 100%; }

    .gVideos{ width: 100%; }
    .face, .tube, .insta{ margin-top: 0px; margin: 0px auto; float: none; display: inline-block; }
    .contato{ padding-bottom: 30px; }

    .footer{ text-align: center; position: relative; }
    .footer .logo{ margin: 0px auto; float: none; width: 170px; padding-bottom: 20px; }
        .footer .column{ overflow: hidden; height: 70px; text-align: center; }

        .menuFooter li{ text-align: center; }
    
    .title{ font-size: 1.1em; text-align: center; }
        .infos li{ text-align: center; font-size: 0.8em; }
}

/* De 501 à 959px */
@media (min-width: 501px) and (max-width: 959px){
    
    .mold{ position: relative; text-align: center; background-color: #000; margin: 0px auto; width: 150px; 
    height: 170px; }
    
  .areaTop{ margin: 0px; text-align: center; width: 100%; height: 100%; position: relative; }
  .areaTop ul{ width: 100%; margin-top: 40px; text-align: center; }
  .areaTop ul li{ display: inline; text-align: center; }
  #cssmenu{ margin: 0px; width: 100%; }

  .slP{ margin-top: 0px; }

    .areaHeader{
    padding: 10px auto; 
    height: 100%;
    margin: 0px;
  }

  .formMusica{ max-width: 100%; overflow: hidden; height: 100%; margin-bottom: 40px; clear: both; }

    .logo{ display: block; margin: 0px; }
    
    .noticias{ width: 90%; }

    .iplayer{ display: block; }
    .player{ margin-top: 0px; width: 100%; }

    .quemSomos .column{ width: 100%; }
    .clientes{ width: 420px; height: 220px; }

    .gVideos{ width: 100%; }
    #cssmenu > ul > li > a{
      padding: 16px 7px;
      font-size: 1em;
    }
     .cLeft, .cRight{ width: 100%; }
     #wrap_carousel { width: 464px; }

    .face, .tube, .insta{ width: 40px; height: 40px; text-align: center; display: inline-block; }

    .copy{ margin-top: 35px; }
    .title{ font-size: 1.1em; }

    .footer .column{ width: 100%; text-align: center; }
    .menuFooter li{ text-align: center; }
}

/* De 960 à plus de 1280px */
@media (min-width:960px) and (max-width:1024px){

    .navInfo article a, .navInfo article span{ font-size: 0.9em; }
     #cssmenu > ul > li > a{
      padding: 16px 5px;
      font-size: 0.9em;
    }

      h2.has-detail{ font-size: 1.2em; }
}