html {
	box-sizing: border-box;
  }
  *, *:before, *:after {
	box-sizing: inherit;
  }
  
/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	height:100%;
	display: flex;
	flex-direction: row;
}

/*  GROUPING  ============================================================================= */


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

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

.col {
	display: block;
	float:left;
	margin: 1% 0% 0% 1.6%;
	min-height:24vh;
	width: 20vw;
    background: #ccc; 
    padding:2rem 1rem; 
	text-align:center;
	overflow: hidden;
	position:relative;
	top:0px;
}

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

/*  COLORS   ==================================================================== */
div > .orange{
	background-color: rgba(241, 90, 36, 0.4);
   }
div > .blue{
	background-color: #057dc2;
	padding-top: 3em;
   }
div > .green{
	background-color: #78a03f;
   }
div > .dkgray{
	background-color: #808080;
   }
div img {
	max-width: 100%;
  }
  

/*  ADJUST FONT SIZING */
.col > h1
{
font-size: 2em;
font-weight: 100;
text-align: center;
padding: 0px;
}
.col > h2
{
font-size: 1.5em;
font-weight: 600;
text-align: center;
}
.col > h3
{
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.col > p
{
	font-size: 1em;
	text-align: left;
}





/*  GRID OF FIVE   ============================================================================= */

	
.span_5_of_5 {
	width: 100%;
}

.span_4_of_5 {
	  width: 79.68%; 
}

.span_3_of_5 {
	  width: 59.36%; 
	  overflow: hidden;
}

.span_2_of_5 {
	  width: 39.04%;
	  overflow: hidden;
}

.span_1_of_5 {
	  width: 18.72%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media screen and (max-width: 480px) {
	.blue, .dkgray {
		display: none;
	}
	.green {
		display: block;
	}
	.span_5_of_5 {
		width: 100%; 
	}
	.span_4_of_5 {
		width: 100%; 
	}
	.span_3_of_5 {
		width: 100%; 
	}
	.span_2_of_5 {
		width: 100%; 
	}
	.span_1_of_5 {
		width: 100%; 
	}
	.section {
		display: block;
		min-height:0;
	}
	.col {
		margin: .5% 0 .5% 0%;
		min-height: 13vh !important;
		background: #ccc; 
		padding:10px 8px; 
		overflow: visible;
	}
}
@media screen and (max-height: 400px) {
	.blue, .dkgray, .span_3_of_5, .green, #headline {
		display: none;
	}
	.span_5_of_5 {
		width: 100%; 
	}
	.span_4_of_5 {
		width: 100%; 
	}
	.span_3_of_5 {
		width: 100%; 
	}
	.span_2_of_5 {
		width: 100%; 
	}
	.span_1_of_5 {
		width: 100%; 
	}
	.col {
		margin: 0%;
		background: #ccc; 
		padding:0 20px; 
	}
	
}