* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	/* remember: box-sizing is not supported by IE7 :( */	
	outline: none;
	vertical-align: top;
}

.center {
	max-width: 80em;
	margin: 0 auto;
	position: relative;
}

.row {
	margin: 0 .5em;
	padding: 2% 1em 0;
	overflow: hidden;
	height: 1%;
	*zoom: 1;
	min-height: 1%;
}

.clearfix {
	height:0;
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0;
}

/* ======================================= 
   columns w/ margin
   ======================================= */
.fg1,.fg2,.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 {
	margin:0 2% 0;
	padding:0;
	/* in case of IE7 it's better not to use a padding because of the box-model issue */
	float:left;
	position:relative;
}

.fg12 {
	width:96%;
}

.fg11 {
	width:87.66%;
}

.fg10 {
	width:79.33%;
}

.fg9 {
	width:71%;
}

.fg8 {
	width:62.66%;
}

.fg7 {
	width:54.33%;
}

.fg6 {
	width:46%;
}

.fg5 {
	width:37.66%;
}

.fg4 {
	width:29.33%;
}

.fg3 {
	width:21%;
}

.fg2 {
	width:12.66%;
}

.fg1 {
	width:4.33%;
}

/* ======================================= 
   media queries
   ======================================= */

/* tablet size */   
@media screen and (max-width: 48em ) {
	
}   
    
/* smartphone size */
@media screen and (max-width: 600px ) {
	
	.row{
		padding: 0 1em;
		margin: 0;
	}
	
	.fg1,.fg2{
		width: 46%;
		margin-bottom: 1em;
	}	

	.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 {
		margin:0 2% 1em;
		padding:0;
		width:96%;
	}
}