@charset "utf-8";
/* CSS Document */
@import url('reset.css');
/*fijar el ancho del proyecto desde el principio
con una unidad absoluta y no porcentaje ya sea en px o em excepto el fullscreen:

width: 60em; para 960px
width: 60,3125em; para 965px
width: 75em; para 1200px
width: 100%; para full screen
*/
.row {
	width: 60em;
	padding: 0;
	margin: 0 auto;
}
.grid1 {
	width: 8.33333%;
	float: left;
}
.grid2 {
	width: 16.66666%;
	float: left;
}
.grid3 {
	width: 25%;
	float: left;
}
.grid4 {
	width: 33.33333%;
	float: left;
}
.grid5 {
	width: 41.66666%;
	float: left;
}
.grid6 {
	width: 50%;
	float: left;
}
.grid7 {
	width: 58.33333%;
	float: left;
}
.grid8 {
	width: 66.66666%;
	float: left;
}
.grid9 {
	width: 75%;
	float: left;
}
.grid10 {
	width: 83.33333%;
	float: left;
}
.grid11 {
	width: 91.66666%;
	float: left;
}
.grid12 {
	width: 100%;
	float: left;
}
/* Footer fijo */
.contenedor {
	margin: auto;
	height: auto;
	bottom: 0;
	min-height:85%;
/*footer al final OPCIONAL */
}
.contenedor:after {
	width: 100%;
	display: block;
	clear: both;
}
/*=========     $$Media queries estructura     ========*/	
  @media only screen and (min-width: 1200px) {
}
 @media only screen and (max-width: 1200px) and (min-width: 980px) {
}
 @media only screen and (min-width: 768px) and (max-width: 979px) {
.row {
	width: 45em;
	margin: 0 auto;
}
}
 @media only screen and (min-width: 480px) and (max-width: 767px) {
.row {
	width: 30em;
	margin: 0 auto;
}
div[class*='grid'] {
	width: 100% !important;
}
div, section, article, header, footer, aside[class*='grid'] {
	width: 100% !important;
}
}
 @media only screen and (max-width: 500px) {
.row {
	width: 100%;
	margin: 0 auto;
	padding: 0 0.3em;
}
}
 @media only screen and (min-width: 80px) and (max-width: 479px) {
div[class*='grid'] {
	width: 100%;
}
div, section, article, header, footer, aside[class*='grid'] {
	width: 100%;
}
}