/* 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 ESTILOS BASE 3 COL RESPONSIVE LAYOUT */

                  #pagewrap-6col {
                  padding: 0px;
                  width: 1200px;
                  margin: 0px auto;
                  background: #2d404c;
                      overflow: hidden;
                    }
#pagewrap-6col img {
    max-width: 100%; margin-bottom: 0px;
}
#pagewrap-6col h1{
    font-family: Oswald; color:#6c3600;
    font-size: 28px; font-weight: 200; padding-left: 25px; padding-right: 25px; margin-top:-5px;
}
#pagewrap-6col h2{
    font-family: Oswald; color:#6c3600;
    font-size: 18px; font-weight: 400; padding-left: 25px; padding-right: 25px;
}
#pagewrap-6col p{
    font-family: Open sans; 
    font-size: 15px; font-weight: 300; line-height: 21px; color:#1d1f25;padding-left: 25px; padding-right: 25px;
    
}
#pagewrap-6col 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-6col 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;
}
        

                    #middle-6col-1, #middle-6col-2, #middle-6col-3, #middle-6col-4, #middle-6col-5, #middle-6col-6 {
                        width: 380px; /* Account for margins + border values */
                        float: left;
                       padding: 10px 20px 20px 20px;
                        
                        background: #cbd3e2;
                        padding-bottom: 800px !IMportant;
                        margin-bottom: -800px !IMportant;
                    }





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

                 #pagewrap-6col {
                  padding: 0px;
                  max-width: 1024px;
                  margin: 0px auto;
                  background: #2d404c;
                    }
                        
                        
    #pagewrap-6col h1{

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

    font-size: 18px;
}
#pagewrap-6col p{
    font-family: roboto; 
    font-size: 14px; line-height: 18px; 
    
}
#pagewrap-6col h3 {
    font-family: Karla; 
    font-size: 13px;  line-height: 18px; 
}
#pagewrap-6col h5{
    font-family: Oswald; color:#545968;
    font-size: 12px; font-weight: 600; line-height: 15px; 
}                    
                

                        

                    #middle-6col-1, #middle-6col-2, #middle-6col-3, #middle-6col-4, #middle-6col-5, #middle-6col-6 {
                        width: 33%; /* Account for margins + border values */
                        float: left;
                       padding: 20px 20px 20px 20px;
                        
                        background: #d8dce4;
                    }

  
                        
                    }

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

                        #pagewrap-6col {
                            width: 100%;
                        }

                  #middle-6col-1, #middle-6col-2, #middle-6col-3, #middle-6col-4, #middle-6col-5, #middle-6col-6 {
                        width: 33%; /* Account for margins + border values */
                        float: left;
                       padding: 20px 20px 20px 20px;
                        
                        background: #d8dce4;
                    }

        
                    }



/* ORIGINAL  for 980px or less 
@media screen and (max-width: 980px) {
	
	#pagewrap-6col {
		width: 100%;
	}
	#content-6col-1 {
		width: 41%;
		padding: 1% 4%;
	}
	#middle-6col- {
		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) {
                        

                                       #middle-6col-1, #middle-6col-2, #middle-6col-3, #middle-6col-4, #middle-6col-5, #middle-6col-6 {
                        width: 25%; /* Account for margins + border values */
                        float: left;
                       padding: 20px 20px 20px 20px;
                        
                        background: #d8dce4;
                    }
         
                    }


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


	
                                       #middle-6col-1, #middle-6col-2, #middle-6col-3, #middle-6col-4, #middle-6col-5, #middle-6col-6 {
                        width: 33%; /* Account for margins + border values */
                        float: left;
                       padding: 20px 20px 20px 20px;
                        
                        background: #d8dce4;
                    }

}

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


	
                                       #middle-6col-1, #middle-6col-2, #middle-6col-3, #middle-6col-4, #middle-6col-5, #middle-6col-6 {
                        width: 50%; /* Account for margins + border values */
                        float: left;
                       padding: 20px 20px 20px 20px;
                        
                        background: #d8dce4;
                    }

}

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

		
                                       #middle-6col-1, #middle-6col-2, #middle-6col-3, #middle-6col-4, #middle-6col-5, #middle-6col-6 {
                        width: 50%; /* Account for margins + border values */
                        
                       padding: 20px 20px 20px 20px;
                        
                        background: #d8dce4;
                    }


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

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

#pagewrap-6col, header, #content-6col-1, #middle-6col-, #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
}