/* 	GG grid */

* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

/* MAIN CONTAINER */
#container { 
	margin: 0 auto;
	/*border: 3px solid grey;*/
}

.maincontent {
}

img {
	max-width: 100%;
	/* avoid deformation as opencms sets a pixel height in the image's style. */
	height: auto !important;
}
								  
/* default column style */
.float_row .span_1, .float_row .span_2, .float_row .span_3, .float_row .span_4, .float_row .span_5, .float_row .span_6 { 
	display: block;
	float:left;
	/*margin-bottom: 1.5em;*/
}

/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.float_row:after, .col:after, .clr:after, .group:after { 
	content: ""; 
	display: block; 
	clear: both; 
	visibility: hidden;
}

.inline_row .span_1, .inline_row .span_2, .inline_row .span_3, .inline_row .span_4, .inline_row .span_5, .inline_row .span_6 {
	/*margin-bottom: 1.5em;*/
	display: inline-block !important;
	float: none !important;
	vertical-align: top;
}

.col_content {
	padding: 0 0.5em;
}

/* default size 4: display width +769px */
.span_1 {
		width:16.66666666%;
		/*background-color: #DDD;*/
}
.span_2 {
		width:33.33333333%;
		/*background-color: #9999AA;*/
}
.span_3 {
		width:50%;
		/*background-color: #BBBBFF;*/
}
.span_4 {
		width:66.66666666%;
		/*background-color: #5555FF;*/
}
.span_5 {
		width:83.33333333%;
		/*background-color: #88FF88;*/
}
.span_6, .header, .footer {
		width: 100%;
		/*background-color: #dd5599;*/
}

/* ---------- MEDIA QUERIES ---------- */

/* size 4: display width from 0px to 320px */
@media screen and (min-width: 0) and (max-width: 20em) {
	.container { 
			/*border: 3px solid green;*/
	}
	.span_1 {
			width: 100%;
		/*	background-color: #DDD;*/
	}
	.span_2 {
			width: 100%;
			/*background-color: #9999AA;*/
	}
	.span_3 {
			width: 100%;
			/*background-color: #BBBBFF;*/
	}
	.span_4 {
			width: 100%;
			/*background-color: #5555FF;*/
	}
	.span_5 {
			width: 100%;
			/*background-color: #88FF88;*/
	}
	.span_6, .header, .footer {
			width: 100%;
	}
}

/* size 3: display width from +321px to 479px */
@media screen and (min-width: 20.0625em) and (max-width: 30em) {
	.container { 
			/*border: 3px solid blue;*/
	}
	.span_1 {
			width: 50%;
			/*background-color: #DDD;*/
	}
	.span_2 {
			width: 100%;
			/*background-color: #9999AA;*/
	}
	.span_3 {
			width: 100%;
			/*	background-color: #BBBBFF;*/
	}
	.span_4 {
			width: 100%;
			/*background-color: #5555FF;*/
	}
	.span_5 {
			width: 100%;
			/*background-color: #88FF88;*/
	}
	.span_6, .header, .footer {
			width: 100%;
	}
}

/* size 2: display width from +481px to 768px */
@media screen and (min-width: 30.0625em) and (max-width: 48em) {
	.container { 
			/*border: 3px solid red;*/
	}
	.span_1 {
			width:33.33333333%;
			/*background-color: #DDD;*/
	}
	.span_2 {
		width: 50%;
			/*background-color: #9999AA;*/
	}
	.span_3 {
			width: 100%;
			/*background-color: #BBBBFF;*/
	}
	.span_4 {
			width: 100%;
		/*	background-color: #5555FF;*/
	}
	.span_5 {
			width: 100%;
			/*background-color: #88FF88;*/
	}
	.span_6, .header, .footer {
			width: 100%;
	}
}