/* estilos pagina contenidos */

/* fuentes de google fonts */
@import url('https://fonts.googleapis.com/css?family=News+Cycle');
@import url('https://fonts.googleapis.com/css?family=Abel|Catamaran|Karla');
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald:600');
@import url('https://fonts.googleapis.com/css?family=Anaheim|Athiti');
/* codigos para las font-family 
font-family: 'Karla', sans-serif;
font-family: 'Abel', sans-serif;
font-family: 'Catamaran', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Athiti', sans-serif;
font-family: 'Anaheim', sans-serif;*/

BODY { 

    text-align: center; 
    background-color: #1D2029; 

}

#caja-general{ 
    text-align: left; 
max-width: 1200px; 
    width: 100%;
    margin: auto; 
    display: table;

    

} 
#cabecera{
    max-width: 100%;

    background-color: #4E5565; 
    color:darkgray; 
    font-size:12pt; 
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1.5PX;
    padding-top:3px;
    padding-left: 20%;
    padding-bottom: 3px;
} 


.texto-galeria {
   max-width: 340px;
    width: 100%;
position: relative;
    top:-100px;
    margin-left: auto;

    background: rgba(50,50,118,0.8);
    color:aliceblue;

}
.texto-galeria h2 {
        font-size:13pt; 
font-family: 'Anaheim', sans-serif;

    font-weight: 100;
    padding-top:3px;
    padding-left: 4%;
    padding-right: 10%;
    padding-bottom: 3px;
}
.texto-galeria h3 {
    background: rgba(48,48,78,0.9);    
    font-size:11pt; 
font-family: 'Abel', sans-serif;
color:bisque;
    font-weight: 200;
    padding-top:3px;
    padding-left: 4%;
    padding-right: 10%;
    padding-bottom: 3px;
}


.mega-vocento {
    top: -90px;
    max-width: 1200px;
    width: 100%;
    height: 98px;
    position: relative;
    background: #333;
    padding-top:3px;
    margin-bottom: -85px
 


    
}

.google-200 {
 
    max-width: 200px;
    width: 100%;
    position: relative;
    background: #333;
    left: 990px;
    top:-90px;
 
    
}










 

#col-izquierda{ 
    width: 160px; 
    color:darkgray; 
    font-size:10pt; 
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1.5PX;
    padding-bottom: 25px;
    
    float:left; 
    display: table;
    background: #333 url(img/fondo-recuadro.jpg) repeat-y 50% 0;

} 
#col-izquierda h2{ 
    padding-top: 10px;
    padding-left:5px;
    text-decoration: none;
    font-size: 13px;
} 
#col-izquierda li{ 
    background-color: #ffffcc; 
    margin: 2 2 2 2px; 
    padding: 2 2 2 2px; 
    font-weight: bold; 
} 
#col-izquierda a{ 
    color: #470C01; 
    text-decoration: none; 
   
} 
.fondo-col-izquierda {
    height: 100%;
    max-width: 160px;
    background-image: url("img/fondo-col-izquierda.jpg");
    background-repeat: repeat-x;
}



.otros-temas {
    background: #A0AFC0;
    color:#000;
    margin-top:15px;
    margin-bottom: 25PX;
    padding:0px;
    text-decoration: none;
}

.otros-temas h3 {
    font-family: 'Abel', sans-serif;
    font-size: 14px;
    text-align: center;
    color:brown;
    padding-bottom:5px;
    padding-top: 5px;
    line-height: 0.9em;
    
}
 .otros-temas h4 {
    width: 160px;
     color:black;
    font-family: 'Open Sans', sans-serif;
    font-size: 11.5px;
    text-align: left;
    color:#202233;
    background: #D5DCE3;
    padding-top: 0px;
    padding: 7px;
    padding-bottom: 10px;
    line-height: 1.3em;
}

.otros-temas hr {
    margin: 5px
}
.otros-temas h4 a {
    
    text-decoration: none;
    
}



.otros-temas2 {
    background: #A0AFC0;
    color:#000;
    margin-top:15px;
    margin-bottom: 25PX;
    padding:0px;
    text-decoration: none;
    margin-left: 25px;
    margin-right: 25px;
}

.otros-temas2 h3 {
    font-family: 'Abel', sans-serif;
    font-size: 14px;
    text-align: center;
    color:brown;
    padding-bottom:5px;
    padding-top: 5px;
    line-height: 0.9em;
    
}
 .otros-temas2 h4 {
    width: 300px;
     color:black;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-align: left;
    color:#202233;
    background: #D5DCE3;
    padding-top: 0px;
    padding: 25px;
    padding-bottom: 10px;
    line-height: 1.7em;
}

.otros-temas hr {
    margin: 5px
}
.otros-temas2 h4 a {
    
    text-decoration: none;
    
}


#col-derecha{ 
   
   	left:800px;
    max-width: 400px; 
    height: 100%;
    float: right;
    background: #DFDFDF;
    display: table;
   		
} 
#bloque-central{ 
    position: relative;
    margin-left: 160px; 
    background-color: #F4F4F4; 
    margin-right: 400px;
    padding-top: 20px;

    
}

#bloque-central img {
    max-width: 640px;
    width: 100%;
    margin-left: 0px;
   
}
#bloque-central h2 { /* titulo bloque central */
    max-width: 640px;
    width: 100%;
    padding-left: 18%;
    padding-right: 1%;
        font-family: 'Abel', sans-serif;
    font-size: 24px;
    letter-spacing: 0.5px;
    color:darkslateblue;
    }
#bloque-central h3 { /* subtitulo bloque central */
    max-width: 640px;
       width: 100%;
        margin-left: 8%;
    margin-right: 8%;
        font-family: 'Abel', sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
    color:#666;
}
#bloque-central h5 { /* firma */
    max-width: 640px;
       width: 100%;
        padding-left: 18%;
    margin-right: auto;
    padding-top:10px;
        font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    color:#666;
}

#bloque-central h4 { /*texto bloque central*/
    max-width: 640px;
       width: 100%;
    padding-left: 8%;
    padding-right: 10%;
    text-align: justify;
    padding-top: 5px;
        font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1px;
    color:#000;
    font-weight: 200;
}
#bloque-central h6 { /*ladillo - titulillo */
    max-width: 640px;
       width: 100%;
        padding-left: 8%;
    padding-right: 10%;
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 1px;
        font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 0.1px;
    color:darkslateblue;
    font-weight: 220;
}
#bloque-central hr {
    max-width: 600px;
    width: 100%;
        margin-top:10px;
    margin-bottom: 10px;
margin-left: auto;
 
}
#bloque-central h7 {
        max-width: 640px;
        width: 100%;
    padding-right: 10%;
    text-align:left;
    padding-top: 10px;
    padding-bottom: 1px;
        font-family: 'Karla', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1px;
    color:darkslateblue;
    font-weight: 200;
}
#bloque-central .publi-centro-1 {
    max-width: 338px;
    width: 100%;
    background: #ccc;
    margin-left: 10%;
}
#bloque-central .publi-centro-1 h5 {
     font-family: 'Karla', sans-serif;
    font-size: 10px;
    width: 100%;
}
#bloque-central .publi-centro-2 {
    max-width: 300px;
    width: 100%;
     background: #ccc;
}
#bloque-central .publi-centro-2 h5 {
     font-family: 'Karla', sans-serif;
    font-size: 10px;
}

#articulo_videoportada {
    width: 100%;
    max-width: 420px;
    margin:0px;
    background: #E9E9E9;

    
}
#articulo_videoportada .icon-play-circled {
    background:#445773;
    color: azure;
}
#articulo_videoportada h5 {
   
    margin-top:-26px;
    background: #000;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    color:burlywood;
    letter-spacing: 1.3px;
    padding:7px;
    
}
.video-texto {
    padding-left:30px;
    background:#D7DDE8;
    
}
.video-texto a {
    text-decoration: none;

}
.video-texto img {
    text-decoration: none;
    max-width: 340px;
    width: 100%;
    padding-left: 1px;

}
.video-texto h4 {
    width: 100%;
padding-right: 25px;
    padding-left: 5%;
        font-family: 'Karla', sans-serif;
    font-size: 14px;
font-weight: 100;
    color:#000;
    
    padding:7px;
}
.publi-derecha-1 {
    margin-top:25px;
    margin-bottom:15px;
    max-width:338px;
    width: 100%;
      margin-left:auto;
    margin-right: auto;
    height: 280px;
    background: #ccc;
    color:#000;
    font-size: 12px;
      letter-spacing: 1px;
}

.publi-derecha-2 {
    position:relative;
    top:380px;
    margin-bottom:15px;
    margin-left:auto;
    margin-right: auto;
    max-width:300px;
    width: 100%;
    height: 600px;
    background: #ccc;
    color:#000;
    font-size: 12px;
      letter-spacing: 1px;
}

.promo-indyrock {
    max-width:380px;
     width: 100%;
    color:#000;
    position:absolute;
    background: #DBDBDB;
    padding-bottom: 20px;
    padding-left:10px;
}
.promo-indyrock img {
    max-width: 380px;
    width: 100%;
}
.promo-indyrock h5 {
        max-width: 380px;
    width: 100%;
padding-right: 25px;
    padding-left: 5%;
        font-family: 'Oswald', sans-serif;
    font-size: 14px;
font-weight: 100;
    color:#ccc;
    background: #354255;
}
.promo-indyrock h6 {
            max-width: 380px;
    width: 100%;
padding-right: 25px;
    padding-left: 5%;
        font-family: 'Oswald', sans-serif;
    font-size: 12px;
font-weight: 100;
    color:#333;
}
.promo-indyrock h4 {
            max-width: 380px;
       width: 100%;
padding-right: 25px;
    padding-left: 8%;
        font-family: 'Open Sans', sans-serif;
    font-size: 13px;
font-weight: 100;
    color:#333;
}
#pie{ 
    background: #333; 
margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    padding-left: 5%;
    text-align:left; 
    clear: both; 
    color:darkgrey
}
/*
#pie .caja-pie {
  display: inline-block;
  width: 22%;
  height: 100px;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    margin-top: auto;
    float:top;
        background-color: #333;

    

}
#pie .caja-pie img {
    max-width: 220px;
}
*/

.tres-columnas-pie {
  padding-top:5px;
    padding-left:5px;
    padding-right: 15px;
    padding-bottom: 50px;
  -moz-column-count: 4;
  -moz-column-gap: 1em;
  -webkit-column-count: 4;
  -webkit-column-gap: 1em;
  column-count: 4;
  column-gap: 2em;
}
.tres-columnas-pie h4 {
    font-size: 12px;
    text-decoration: none;
}
.tres-columnas-pie a {
    text-decoration: none;
    color:#999;
    letter-spacing: 1.1px;
}



/* RESPONSIVE
   ========================================================================= /
 
/ Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- /
@media (min-width: 768px) and (max-width: 1199px) { ... }
 
/ Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- /
@media (max-width: 767px) { ... }
 
/ Móviles en vertical
   ------------------------------------------------------------------------- /
@media (max-width: 480px) { ... } */















/* RESPONSIVE */


/* INICIO RESPONSIVE TABLETS 1024 */

@media (max-width:1024px) {


    #caja-general {
        display:table;


    }
    .texto-galeria {
        
   
    z-index: 999;
         }    

           
    #col-derecha {
 width: 100%;
        max-width: 350px;
        margin-top:0px;
        margin-right: 10px
        
              
 }   
    .publi-derecha-1 {
        display:none;
    }
    .promo-indyrock {
        display:none;
    }
    
    #col-izquierda {
        display: none;
    }

    .google-200 {
        display:none;
    }
     #bloque-central {
        position:relative;
        margin-left:0px;
        margin-top:0px;
         top:0px;
        width: 100%;
        max-width:630px;
   
}
    #bloque-central img {
        width: 100%;
        max-width: 600px;
    }

    #bloque-central h2 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
        margin-left: 0px;
    }
     #bloque-central h3 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h4 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h5 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
       #bloque-central h6 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
#bloque-central hr {
    display:none;
}
   
    #bloque-central .pie-movil {
                margin-top:100px;
        margin-bottom: 50px;
    }
   #bloque-central  .pie-movil img {
        position: relative;
        max-width: 240px;
        width: 100%;
        top:0px;
        margin-left:40px;
        margin-right: 0;
       
    }

    #bloque-central  .pie-movil h4 {
        font-size: 11px;
        width: 100%;
        padding:25px:
        
    }         #pie {
        display:none;
    }

}



/* FINAL RESPONSIVE TABLETS 1024 */






/* INICIO RESPONSIVE TABLETS 900 */

@media (max-width:900px) {

        #cabecera {
        display:none;
    }
    #caja-general {
        display:table;


    }

    .texto-galeria {
        margin-top:-90px;
  z-index: 999;
    }     
    #col-derecha {
 width: 100%;
        max-width: 330x;
        margin-top:-80px;
        
              
 }   
    .publi-derecha-1 {
        display:none;
    }
    .publi-derecha-2 {
        top:0px
    }
    .promo-indyrock {
  
    }
    
    #col-izquierda {
        display: none;
    }
    .mega-vocento {
        display: none;
    }
    .google-200 {
        display:none;
    }
     #bloque-central {
        position:relative;
        margin-left:0px;
        margin-top:0px;
         top:-0x;
        width: 100%;
        max-width:520px;
   
}
    #bloque-central img {
        width: 100%;
        max-width: 600px;
    }

    #bloque-central h2 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
        margin-left: 0px;
    }
     #bloque-central h3 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h4 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h5 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
       #bloque-central h6 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
#bloque-central hr {
    display:none;
}
   
    #bloque-central .pie-movil {
                margin-top:100px;
        margin-bottom: 50px;
    }
   #bloque-central  .pie-movil img {
        position: relative;
        max-width: 240px;
        width: 100%;
        top:0px;
        margin-left:40px;
        margin-right: 0;
       
    }

    #bloque-central  .pie-movil h4 {
        font-size: 11px;
        width: 100%;
        padding:25px:
        
    }         #pie {
        display:none;
    }

}



/* FINAL RESPONSIVE TABLETS 900 */


/* INICIO RESPONSIVE TABLETS 850 */

@media (max-width:850px) {

        #cabecera {
        display:none;
    }
    #caja-general {
        display:table;


    }

    .texto-galeria {
        margin-top:-90px;
    }     
    #col-derecha {
 width: 100%;
        max-width: 330x;
        margin-top:-0px;
              
 }   
    .publi-derecha-1 {
        display:none;
    }
    .publi-derecha-2 {
        top:0px
    }
    .promo-indyrock {
  
    }
    
    #col-izquierda {
        display: none;
    }
    .mega-vocento {
        display: none;
    }
    .google-200 {
        display:none;
    }
     #bloque-central {
        position:relative;
        margin-left:0px;
        margin-top:0px;
         top:-0x;
        width: 100%;
        max-width:470px;
   
}
    #bloque-central img {
        width: 100%;
        max-width: 500px;
    }

    #bloque-central h2 {
         width: 100%;
       max-width:470px;
        padding-left: 55px;
        padding-right: 55px;
        margin-left: 0px;
    }
     #bloque-central h3 {
         width: 100%;
       max-width:470px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h4 {
         width: 100%;
       max-width:470px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h5 {
         width: 100%;
       max-width:470px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
       #bloque-central h6 {
         width: 100%;
       max-width:470px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
#bloque-central hr {
    display:none;
}
   
    #bloque-central .pie-movil {
                margin-top:100px;
        margin-bottom: 50px;
    }
   #bloque-central  .pie-movil img {
        position: relative;
        max-width: 240px;
        width: 100%;
        top:0px;
        margin-left:40px;
        margin-right: 0;
       
    }

    #bloque-central  .pie-movil h4 {
        font-size: 11px;
        width: 100%;
        padding:25px:
        
    }         #pie {
        display:none;
    }

}



/* FINAL RESPONSIVE TABLETS 850 */






/* INICIO RESPONSIVE TABLETS 800 */

@media (max-width:800px) {

        #cabecera {
        display:none;
    }
    #caja-general {
        display:table;



    }
        .texto-galeria {
        margin-top:-90px;
    }
    .otros-temas2 {
        display: none;
    }
           
    #col-derecha {
display:none;  
              
 }   
    .promo-indyrock {
        display:none;
    }
    
    #col-izquierda {
        display: none;
    }
    .mega-vocento {
        display: none;
    }
    .google-200 {
        display:none;
    }
     #bloque-central {
        position:relative;
        margin-left:0px;
        margin-top:0px;
         top:0px;
        width: 100%;
        max-width:800px;
   
}
    #bloque-central img {
        width: 100%;
        max-width: 600px;
    }

    #bloque-central h2 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
        margin-left: 0px;
    }
     #bloque-central h3 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h4 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h5 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
       #bloque-central h6 {
         width: 100%;
        max-width: 800px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
#bloque-central hr {
    display:none;
}
   
    #bloque-central .pie-movil {
                margin-top:100px;
        margin-bottom: 50px;
    }
   #bloque-central  .pie-movil img {
        position: relative;
        max-width: 240px;
        width: 100%;
        top:0px;
        margin-left:40px;
        margin-right: 0;
       
    }

    #bloque-central  .pie-movil h4 {
        font-size: 11px;
        width: 100%;
        padding:25px:
        
    }         #pie {
        display:none;
    }

}



/* FINAL RESPONSIVE TABLETS 800 */






/* INICIO RESPONSIVE TABLETS 768 */

@media (max-width:768px) {

        #cabecera {
        display:none;
    }
    #caja-general {
        display:table;


    }

           
    #col-derecha {
display:none;  
              
 }   
        .otros-temas2 {
        display: none;
    }
    .promo-indyrock {
        display:none;
    }
    
    #col-izquierda {
        display: none;
    }
    .mega-vocento {
        display: none;
    }
    .google-200 {
        display:none;
    }
     #bloque-central {
        position:relative;
        margin-left:0px;
        margin-top:100px;
         top:-150px;
        width: 100%;
        max-width:768px;
   
}
            .texto-galeria {
        margin-top:-30px;
 
max-width: 300px;
            width: 100%;
    }

    #bloque-central img {
        width: 100%;
        max-width: 600px;
    }

    #bloque-central h2 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
        margin-left: 0px;
    }
     #bloque-central h3 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h4 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
    }
      #bloque-central h5 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
       #bloque-central h6 {
         width: 100%;
        max-width: 768px;
        padding-left: 55px;
        padding-right: 55px;
         margin-left: 0px;
     
    }
#bloque-central hr {
    display:none;
}
   
    #bloque-central .pie-movil {
                margin-top:100px;
        margin-bottom: 50px;
    }
   #bloque-central  .pie-movil img {
        position: relative;
        max-width: 240px;
        width: 100%;
        top:0px;
        margin-left:40px;
        margin-right: 0;
       
    }

    #bloque-central  .pie-movil h4 {
        font-size: 11px;
        width: 100%;
        padding:25px:
        
    }         #pie {
        display:none;
    }

}



/* FINAL RESPONSIVE TABLETS 768 */

/* INICIO RESPONSIVE MOVILES 480 */
@media (max-width:480px) {



    #bloque-central {
        max-width: 480px;
        width: 100%;
        margin-top:50px;
    }
    img {
        width: 100%;
        max-width: 450px;
    }
    
    .texto-galeria {
        margin-top:100px;
        margin-left: 0PX;
 
max-width: 480px;
            width: 100%;
        display: table;
    }
    }
    
/* MEDIDAS STANDAR 
Ordenadores, de 1024 a 1280
Ipad 1024  y Ipad mini 768
tablet a 800 y a 768   el horizontal va bien el 1024 y el 1280
mobiles. 320, 360 y 480 


MAX-WIDTH 600px signidica que se aplicará hasta un maximo de 600, es decir, que sea menor que 600px
MIN-WIDTH 600PX Significa que se aplicará cuando supere los 600px, que sea mayor de 600px
MIN-WIDTH 900 PX para que se aplique por encima de 900...
Para los móviles sería max-withd 480px... será así hasta que llegue a 480px

@media (min-witdht:480px;) and (max-with:600px;) Se aplicará por encima de 480 y por debajo de 600px


*/




/* FINAL RESPONSIVE MOVILES 480 */

/*

@media (max-width:400px) {
    {
       #col-derecha {
display:none;
     }
        #bloque-central {
        margin-left:0px;
        width:100%;
            max-width: 100%;
        
    } 
}
    #bloque-central {
        margin-left:0px;
        
    } 
#bloque-central h4 {
    padding-left:15%;
    margin-right:10%;
}
#cuerpo { 
    overflow: hidden;
    height: 5800px;
    
       
}
    #pie {
        display:none;
    }
}