/*  responsive minimum   ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/* IMAGES ============================================================================= */

img {
border : 0;
max-width: 100%;}

img.floatleft { float: left; margin: 0 10px 0 0; }
img.floatright { float: right; margin: 0 0 0 10px; }


/*  GRID COLUMN SETUP   ============================================================================= */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 720px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

/*  GRID OF TWO   ============================================================================= */

.top {margin-top: 0px;}
.first {clear:both; margin-left: 0px;}
.span_2_of_2 {	width: 100%;}
.span_1_of_2 {	width: 49.2%;}
.head_title {height:59px;}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 720px) {
	.span_2_of_2 {		width: 100%; 	}
	.span_1_of_2 {		width: 100%; 	}
}


/*  GRID OF THREE   ============================================================================= */

/*.end {clear:both; padding: 0px; margin: 0px;}*/
.first {clear:both; margin-left: 0px;}
.top {margin-top: 0px;}
.span_3_of_3 {	width: 100%; }
.span_2_of_3 {	width: 66.1%; }
.span_1_of_3 {	width: 32.2%; }
.a_middle div{width:100%; align:center}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 720px) {
	.span_3_of_3 {		width: 100%; 	}
	.span_2_of_3 {		width: 100%; 	}
	.span_1_of_3 {		width: 100%;	}
	.empty{		display:none;	}
}


/*  GRID OF FOUR   ============================================================================= */

	
.span_4_of_4 {	width: 100%; }
.span_3_of_4 {	width: 74.6%; }
.span_2_of_4 {	width: 49.2%; }
.span_1_of_4 {	width: 23.8%; }

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 720px) {
	.span_4_of_4 {		width: 100%; 	}
	.span_3_of_4 {		width: 100%; 	}
	.span_2_of_4 {		width: 100%; 	}
	.span_1_of_4 {		width: 100%; 	}
}

/*  GRID OF SIX   ============================================================================= */


.span_6_of_6 {	width: 100%;}
.span_5_of_6 {  	width: 83.06%;}
.span_4_of_6 {  	width: 66.13%;}
.span_3_of_6 {  	width: 49.2%;}
.span_2_of_6 {  	width: 32.26%;}
.span_1_of_6 {  	width: 15.33%;}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_6_of_6 {		width: 100%; 	}
	.span_5_of_6 {		width: 100%; 	}
	.span_4_of_6 {		width: 100%; 	}
	.span_3_of_6 {		width: 100%; 	}
	.span_2_of_6 {		width: 100%; 	}
	.span_1_of_6 {		width: 100%; 	}
}


/*           ================================== */
/* extension ================================== */
/*           ================================== */

.detail {font-size:80%; color:grey}
.hiddenBox {display:none;}

.add-top { margin-top: 30px !important; }
.add-top-a { margin-top: 15px !important; }
.add-top-b { margin-top: 60px !important; }
.add-top-c { margin-top: 120px !important; }
.add-top-500 { margin-top: 500px !important; }

.remove-top { margin-top: 0 !important; }
.remove-bottom { margin-bottom: 0 !important; }

.text-center{ text-align:center}
.text-left{ text-align:left}
.text-right{ text-align:right}

.text-v-bottom{ vertical-align: bottom;}
.text-v-top{ vertical-align: top;}
.text-v-middle{ vertical-align: middle;}

@media only screen and (max-width: 720px) {
	.hide-small {		display: none; 	}

}