/* section */

/* ###################### STRUCTURE ####################### */


	section {clear:left;float:left;width:100%;margin:0;}
	
		section > div {width:960px;margin-left:auto;margin-right:auto;padding:3em 0 3em 0;}


/* ######################################################## */



section.blue { background-color:#003399; }
section.blue p { color:#ffffff; margin:1em 1em 2em 1em; }
	section.blue h1,
	section.blue h2,
	section.blue h3,
	section.blue span { color:#ffffff; }

section.red { background-color:#cc0000;}
section.red p {color:#ffffff; margin:1em 1em 2em 1em; }
	section.red h1,
	section.red h2,
	section.red h3,
	section.red span { color:#ffffff; }

section.grey { background-color:#cccccc;}
section.grey p {color:#333333; margin:1em 1em 2em 1em; }

section.white { background-color:#ffffff; }
section.white p {color:#333333; margin:1em 1em 2em 1em; }

section.example { background-color:#ffffff; background-image:url(/ui/img/bg_white.jpg); background-size:cover;}
section.example p {color:#333333; font-size:larger; margin:1em 1em 2em 1em; }




/* box-group */
.box-group { display:flex; flex-direction:row; align-items:stretch; }
.box-group + .box-group { margin-top:1rem; }

/* box */
.box {
	flex:1;
	min-height:100px;
	margin:0;
	padding:0;
	text-align:center;
	border:solid 0.25rem transparent;
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.box-group.whole > .box { flex:1; }

.box-group.halves > .box { flex:1; }

.box-group.thirds > .box { flex:1; }
	.box-group.thirds.ds > .box:nth-child(1) { flex:2; }
	.box-group.thirds.sd > .box:nth-child(2) { flex:2; }
	
.box-group.quarters > .box { flex:1; }
	.box-group.quarters.dss > .box:nth-child(1) { flex:2; }
	.box-group.quarters.sds > .box:nth-child(2) { flex:2; }
	.box-group.quarters.ssd > .box:nth-child(3) { flex:2; }
	.box-group.quarters.ts > .box:nth-child(1) { flex:3; }
	.box-group.quarters.st > .box:nth-child(2) { flex:3; }

	
/* section & box */
.box.red { background-color:#cc0000; color:#ffffff;}
	.box.red > h1 { color:#ffffff; }
	.box.red > h2 { color:#ffffff; }
	.box.red > h3 { color:#ffffff; }
.box.blue { background-color:#003399; color:#ffffff;}
	.box.blue > h1 { color:#ffffff; }
	.box.blue > h2 { color:#ffffff; }
	.box.blue > h3 { color:#ffffff; }
.box.white { background-color:#ffffff; color:#666666;}
	.box.white > h1 { color:#003399; }
	.box.white > h2 { color:#cc0000; }
	.box.white > h3 { color:#003399; }
	.box.white > p { color:#666; }
	.box.white span { color:#666; }

/* Media Queries */

@media screen and (min-width: 640px) and (max-width: 960px) {
	
	/* section */
	section > div { display:block; float:left; width:100%; margin:0; }
	
	}

@media screen and (max-width: 640px) {
	
	/* section */
	section > div { display:block; float:left; width:100%; margin:0; }

		/* box */
	.box-group.whole > .box { width:100%; }
	 
	.box-group.halves { flex-direction:column; }
	
	.box-group.thirds { flex-direction:column; }
		.box-group.thirds.ds > .box:nth-child(1) { flex:1; }
		.box-group.thirds.sd > .box:nth-child(2) { flex:1; }

		
	.box-group.quarters { flex-direction:column; }
		.box-group.quarters.dss > .box:nth-child(1) { flex:1; }
		.box-group.quarters.sds > .box:nth-child(2) { flex:1; }
		.box-group.quarters.ssd > .box:nth-child(3) { flex:1; }

		.box-group.quarters.ts > .box:nth-child(1) { flex:1; }
		.box-group.quarters.st > .box:nth-child(2) { flex:1; }


	}