/* Normal Screen Size */
	:root {
	  --box-margin: 12px;
	  --box-margin-2: 24px;
	}
	
	.section { overflow: hidden; clear: both; }
	
	.box, .box-r {
		margin-right: var(--box-margin);
		margin-left: var(--box-margin);
	}
	.box { float: left; }
	.box-r { float: right; }

	.box-1  { width: calc( calc(8.33% *  1) - var(--box-margin-2) ); }
	.box-2  { width: calc( calc(8.33% *  2) - var(--box-margin-2) ); }
	.box-3  { width: calc( calc(8.33% *  3) - var(--box-margin-2) ); }
	.box-4  { width: calc( calc(8.33% *  4) - var(--box-margin-2) ); }
	.box-5  { width: calc( calc(8.33% *  5) - var(--box-margin-2) ); }
	.box-6  { width: calc( calc(8.33% *  6) - var(--box-margin-2) ); }
	.box-7  { width: calc( calc(8.33% *  7) - var(--box-margin-2) ); }
	.box-8  { width: calc( calc(8.33% *  8) - var(--box-margin-2) ); }
	.box-9  { width: calc( calc(8.33% *  9) - var(--box-margin-2) ); }
	.box-10 { width: calc( calc(8.33% * 10) - var(--box-margin-2) ); }
	.box-11 { width: calc( calc(8.33% * 11) - var(--box-margin-2) ); }
	.box-12 { width: calc( calc(8.33% * 12) - var(--box-margin-2) ); }
	
	.clear { clear: both; }
	
	html { font-size: 16px; }
	h1 { font-size: 2.00rem; }
	h2 { font-size: 1.50rem; }
	h3 { font-size: 1.17rem; }
	h4 { font-size: 1.00rem; }
	
	body { font-size: 1rem; }
	
	.mobile-only { display: none; }
/* end */

@media only screen and (max-width: 1280px) {
	html { font-size: 14px !important; }	
}

@media only screen and (max-width: 980px) {
	html { font-size: 12px !important; }
	
	.mobile-only { display: initial; }
	.no-mobile { display: none; }
	
	.box-1,
	.box-2,
	.box-3,
	.box-4,
	.box-5,
	.box-6,
	.box-7,
	.box-8,
	.box-9,
	.box-10,
	.box-11,
	.box-12 { width: calc( 100% - var(--box-margin-2) ) !important; }	
}