/* 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=Open+Sans+Condensed:300|Oswald|Roboto');
/* 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: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;*/





.inicio-pagina {
    max-width: 1200px;
    margin-left: auto; margin-right: auto;
}

/* inicio estilos texto datos de cabecerea */


.titulo-principal-datos {
    
}





/* INICIO ESTILOS TEXTO ENCIMA DE LA IMAGEN */

.imagen-cabecera  { position: relative; margin-bottom: 20px; max-width: 100%; }
.imagen-cabecera h6  { position: absolute; left: 0; width:250px; color: #c5cad7; font-family: oswald, Sans-Serif; letter-spacing: 1px; font-weight: 400; 
                       background: rgba(52,31,24, 0.5); padding-left: 10px; padding: 5px; margin-left: 0px; }


.image              { position: relative; margin-bottom: 20px; max-width: 100%;  }
 h6                  { position: absolute; top: 10px; left: 0; width:130px; color: #c5cad7; font-family: oswald, Sans-Serif; letter-spacing: 1px; font-weight: 400; 
                       background: rgba(52,31,24, 0.7); padding-left: 10px; padding: 5px; margin-left: 0px; }


/* FINAL ESTILOS TEXTO ENCIMA DE LA IMAGEN */


/* INICIO ESTILOS BASE 3 COL RESPONSIVE LAYOUT */

                  #pagewrap {
                  padding: 0px;
                  width: 1200px;
                  margin: 0px auto;
                  background: #2d404c;
                      overflow: hidden;
                    }
#pagewrap h1{
    font-family: Oswald; color:#6c3600;
    font-size: 28px; font-weight: 200; padding-left: 25px; padding-right: 25px; 
}
#pagewrap h2{
    font-family: Oswald; color:#6c3600;
    font-size: 22px; font-weight: 400; padding-left: 25px; padding-right: 25px;
}
#pagewrap p{
    font-family: Open Sans; 
    font-size: 16px; font-weight: 400; line-height: 21px; color:#1d1f25;padding-left: 25px; padding-right: 25px;
    
}
#pagewrap h3 {
    font-family: Karla; 
    font-size: 14px; font-weight: 300; line-height: 20px; color:#1d1f25;padding-left: 25px; padding-right: 25px; margin-top:-10px;
}
#pagewrap h5{
    font-family: Oswald; color:#545968;
    font-size: 13px; font-weight: 600; line-height: 16px; padding-left: 25px; padding-right: 25px; margin-top: -10px; margin-bottom:20px;
}
#pagewrap a{
   color:#6c3600;
    
}
                    header {
                        height: 100px;
                        padding: 0 15px;
                                background: #000;
                    }
                    #content {
                        width: 380px;
                        float: left;
                       
                        background: #d8dce4;
                        padding-bottom: 800px !IMportant;
                        margin-bottom: -800px !IMportant;
                        
                    }

                    #middle {
                        width: 380px; /* Account for margins + border values */
                        float: left;
                       padding: 20px 20px 20px 20px;
                        
                        background: #cbd3e2;
                        padding-bottom: 800px !IMportant;
                        margin-bottom: -800px !IMportant;
                    }

                    #sidebar {
                        width: 440px;
                       
                        float: left;
                        background: #232e39 !Important;

                    }
                 #sidebar2 {
                        width: 440px;
                       
                        float: left;
                        background: #232e39 !Important;

                    }
#sidebar h2 {
    color: #beb6b3; font-size: 19px; font-weight: 100

}
#sidebar h3 {
    color: #beb6b3;

}#sidebar h5 {
    color: #7e8087;

}
#sidebar h6 {
    color: #b4c7d9;

}
#sidebar p{
    color: #b4c7d9; font-size:15px; font-weight: 100;

}
#sidebar a{
    color: #b4c7d9; font-size:13px; font-weight: 100;

}
                    footer {
                        clear: both;
                        padding: 0 15px;
                    }


.titulillos {
    font-size: 20px !Important; color:#6c3600; margin-left: 25px;
}
.texto-noticia-corta  {
    font-size: 14px !Important; color:#1d1f25; margin-left: 0px; margin-top:-7px; margin-bottom:10px;
}

 /************************************************
                    PUBLI ESTILOS
*****************************************************/

.publi-2 {
    background: #b3c3e0; max-width: 300px; height:600px; align-content: center; margin-left: auto; margin-right: auto; margin-bottom: 20px;
}

.publi-2-2 {
    background: #b3c3e0; max-width: 160px; height:600px; align-content: center; margin-left: auto; margin-right: auto;margin-bottom: 20px;
               
}
.publi-2-3 {
    background: #b3c3e0; max-width: 300px; height:600px; align-content: center; margin-left: auto; margin-right: auto; margin-bottom: 20px;
}

.megabanner-medio {
   
    margin-top: 0px;
    max-width:980px;
    width: 100%;
    color:#ccc;
    font-size:10px;
    margin-left:auto;
    margin-right:auto;
        
}
.megabanner-footer {
   
    margin-top: 0px;
    max-width:980px;
    width: 100%;
    color:#ccc;
    font-size:10px;
    margin-left:auto;
    margin-right:auto;

    
        
}

.publi-200 {
    margin-left: 1000px;
    float: right;
    max-width: 200px;
    background: #232e39;
    position: relative;

}

/************************************************************************************
MEDIA QUERIES ORIGINALES 3 COL RESPONSIVE LAYOUT
*************************************************************************************/
 /* for 1024px or less */
                    @media screen and (max-width: 1024px) {

                      
                      
                 #pagewrap {
                  padding: 0px;
                  max-width: 100%;
                  margin: 0px auto;
                  background: #2d404c;
                 
                  
                    }
                        
                        
    #pagewrap h1{

    font-size: 20px; 
}
#pagewrap h2{

    font-size: 18px;
}
#pagewrap p{
    font-family: roboto; 
    font-size: 14px; line-height: 18px; 
    
}
#pagewrap h3 {
    font-family: Karla; 
    font-size: 13px;  line-height: 18px; 
}
#pagewrap h5{
    font-family: Oswald; color:#545968;
    font-size: 12px; font-weight: 600; line-height: 15px; 
}                    
                    header {
                        height: 100px;
                        padding: 0 15px;
                                background: #000;
                    }
                    #content {
                        width: 33%;
                        float: left;
                        
                        background: #d8dce4;
                        font-size: 14px; 
                    }
                        

                    #middle {
                        width: 33%; /* Account for margins + border values */
                        float: left;
                       padding: 20px 20px 20px 20px;
                        
                        background: #d8dce4;
                    }

                    #sidebar {
                        width: 33%;
 
                        float: left;
                        background: #232e39 !Important;
                    }

                        
    #sidebar h2 {
    color: #beb6b3; font-size: 17px; font-weight: 100

}
#sidebar h3 {
    color: #beb6b3;

}#sidebar h5 {
    color: #7e8087;

}
#sidebar h6 {
    color: #b4c7d9;

}
#sidebar p{
    color: #b4c7d9; font-size:13px; font-weight: 100;

}
#sidebar a{
    color: #b4c7d9; font-size:13px; font-weight: 100;

}                    
                        
                    footer {
                        clear: both;
                        padding: 0 15px;
                    }
                        
                        
                    }

/* PARA 980px or MENOS */
                    @media screen and (max-width: 980px) {

                       #pagewrap {
                            width: 100%;
                         margin-top:200px;
                        }
                        #content {
                            width: 33%; 
	}
                            
                        }
                        #middle {
                            width: 33%;
                            
                 
                            float: left;
                        }

                        #sidebar {
                             width: 33%;
                         
                            
                            float: left;
                        }


                        header, footer {
                            padding: 1% 4%;
                        }
                    }













/* ORIGINAL  for 980px or less 
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 100%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	header, footer {
		padding: 1% 4%;
	}
}
*/


               /* for 768px or less */
                    @media screen and (max-width: 768px) {
                        
    #pagewrap {
                  margin-top:150px;
                 
                  
                    }
                        #content {
                            width: 50%;
                            float: left;
                          
                        }

                        #middle {
                            width: 50%;
                            float: left;
                            margin-left: 0px; margin-top:220px;
                        }


                        #sidebar  {
                            width:100%; margin-top:200px;
                        }
                        #sidebar.image img {
                            max-width: 500px;
                        }
         
                    }


/* for 500px or less */
@media screen and (max-width: 500px) {
      
 

	#content {
		width: auto;
		float: none; margin-top:260px;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

  #content {
	 margin-top:280px;
	}
  
  
	header {
		height: auto;
	}
	h1 {
		font-size: 2em;
	}


}
/****** FINAL MEDIA QUERY **********/

#content {
	background: #d8dce4;
}
#sidebar {
	background: #d8dce4;
}
header, #content, #middle, #sidebar {
	margin-bottom: 0px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
	  border: solid 0p#d8dce4;
}
    
    
    
  /*******************************************************
OTROS ESTILOS ****************************************/

/* PARA 900px o MAS*/

    
@media screen and (min-width: 900px) {
    
    .publi-2-2 {
        display: none;
    }
           .publi-1-1 {
        display: none;
    }
}

@media screen and (min-width: 480px) {
    
    .publi-2-3 {
        display: none;
    }
       
}

@media screen and (max-width: 480px) {
    
    .publi-2-2 {
        display: none;
    }
    
    
    
}

/* PARA mas de 480 y menos de 900px */
@media screen and (min-width: 480px) and (max-width:900px) {
    
    .publi-2 {
        display: none;
    }
    
    }

               /* for 768px or less */
                    @media screen and (max-width: 768px) {
                        
                        .publi-1 {
                            display:none;
                        }
                        
}
                        

/* ========================================================================================
ESTILOS PARA BLOQUE DE 6 COL 
==============================================*/

/*Convertir un bloque o div en 3 columnas*/
#bloque-6-col {
    column-count: 6;
    -webkit-column-count: 6;
    -moz-column-count: 6;
    -o-column-count: 6;
}
#bloque-6-col h5 {
    font-family: oswald;
    font-size: 14px;
    padding-left: 10px
}