/* RESPONSIVE GRID and OBJECTS*/
/* responsive images*/

/*responsive stub like in Bootstrap*/

*.pcalc-container {box-sizing: border-box;}
*.pcalc-container::before, *.pcalc-container::after {box-sizing: border-box;}

/*  SECTIONS  */
/* DOM structure: .group > .col>span_X_of_X*/
.grid-section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

.col {
	padding: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	overflow: hidden;
}

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

/*  GRID OF FIVE  */
.span_1_of_5 {width: 18%;}
.col.span_1_of_5:first-child {margin-left: 2%;}

/*  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%;}

/*  GRID OF THREE  */
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.1%;}
.span_1_of_3 {width: 32.2%;}


/*  GRID OF TWO  */
.span_2_of_2 {width: 100%;}
.span_1_of_2 {width: 49.2%;}

/* GRID OF ONE*/
.span_1_of_1 {width: 100%;}


@media only screen and (max-width: 768px) {
	.col { margin: 1% 0 1% 0%;}
	/* 5-> 3; 4->2; 2->1/3*/
	.span_1_of_5 {width: 32.2%} 
	.col.span_1_of_5:first-child {margin-left: inherit;}
	.span_1_of_4 {width: 49.2%}
	.span_1_of_2 {width: 32.2%} 
}

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

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}
	.span_1_of_5, 
	.span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4,
	.span_3_of_3, .span_2_of_3, .span_1_of_3,
	.span_2_of_2, .span_1_of_2 
	{ width: 100%;}
}


/*@media only screen and (min-width: 1024px) {
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
*/