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


/* ------ section ------ */

/* default */

/*universal MID > Div 'classless' non-band child  */
.MID > div:not([class]) { padding:1rem; width:100%; max-width:1280px; margin:0 auto; }

/* explicit band */
.MID .band { padding-top:2rem; padding-bottom:2rem; }
.MID .band:first-of-type { padding-top:1rem; }
.MID .band:only-of-type { padding-top:1rem; padding-bottom:0; min-height:50vh; }

/* inner div */
.MID .band > div:first-child { width:100%; max-width:1280px; margin:0 auto; }

/* specific bands */
.MID .band.band-tabs { padding-top:0; padding-bottom:0; }
.MID .band.band-tabs + .band { padding-top:1rem; } /* next band */

.MID .band.band-header { padding-top:0; padding-bottom:0; }
.MID .band.band-header + .band { padding-top:1rem; } /* next band */

.MID .band.band-header + .band.band-tabs { padding-top:1rem; } /* restores */

.MID .band.band-header-text { padding-top:1rem; padding-bottom:1rem; }
.MID .band.band-header-text + .band { padding-top:1rem; } /* next band */

/* any tags NOT bog-group that precede a box-group */
.band > div > *:not(.box-group) + .box-group { padding-top:1rem; }


/* ----- box-center ( contains one box ) ( shrinking single breakpoint center content ) ---- */
.box-center { display:flex; flex-direction:column; max-width:480px; margin:0 auto; }
.box-center + .box-center { margin-top: 0; }
.box-center > .box { margin-top: 0.5em; width:100%; min-width:320px; border:none; padding:0 0 1rem 0; box-shadow: 1px 1px 2px 0 #808080; }
.box-center > .box > fieldset { margin:0 auto; padding:inherit 0; width:320px; }


/* ----- box half ----- */
.box.half { display:flex; flex-wrap:wrap; }


/* ----- box-group ----- */
.box-group { display:flex; flex-wrap:wrap; }
.box-group + .box-group { margin-top:0; }

/* fractions */
.box-group.whole > .box { width:100% }
.box-group.halves > .box { width:50%; }
.box-group.thirds > .box { width:33.3333%; }
	.box-group.thirds.ds > .box:nth-child(1) { width:66.6667%; }
	.box-group.thirds.sd > .box:nth-child(2) { width:66.6667%; }
.box-group.quarters > .box { width:25%; }
	.box-group.quarters.dss > .box:nth-child(1) { width:50%; }
	.box-group.quarters.sds > .box:nth-child(2) { width:50%; }
	.box-group.quarters.ssd > .box:nth-child(3) { width:50%; }
	.box-group.quarters.ts > .box:nth-child(1) { width:75%; }
	.box-group.quarters.st > .box:nth-child(2) { width:75%; }


/* ------- box ---------*/
.box {
	display:flex;
	position:relative;
	flex-direction:column; 
	margin:0;
	padding:0 0 0 0; /* not sure about this....but...*/
	text-align:center; /* not sure about this....but...*/
	border:solid 0.25rem transparent; /* gives appearance of space between boxes.*/
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* keeps background from showing through border - for IE9+, Firefox 4+, Opera, Chrome */
	border-radius:0.75rem !important;
	overflow:hidden;
}

.box > *:first-child { margin-top:1rem; }
.box > *:last-child { margin-bottom:1rem; }

	/* -- ordinal re-shuffling - rarely used -- */
	.box.moveup { -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; -ms-flex-order:1; -webkit-order:1; order:1;}
	.box { -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; -ms-flex-order:2; -webkit-order:2; order:2; }
	.box:nth-child(1) {  }
	.box:nth-child(2) {  }
	.box:nth-child(3) {  }
	.box:nth-child(4) {  }

	/* -- simple justify -- */
	.box.left { text-align:left; }
	.box.right { text-align:right; }
	.box.center { text-align:center; }


/* ---- box parts & part ---- */
/* box parts, only two parts, ALWAYS use 1:2, image-left, text-right */
/* horizontal to vertical for midbreaks when box shinks beyond 33% original. Vertical may change params in media queries */
.box.parts {						display:flex; flex-direction:row; flex-wrap:nowrap; }
.box.parts > .part {				margin:0; } /* resets box margins on all children */
.box.parts > .part:first-of-type {	flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 0 0 1rem;}
.box.parts > .part:last-of-type {	flex:2; display:flex; flex-direction:column; justify-content:center; }

/* box parts max-height imagesize depands on ... */
.box.parts > .part:first-of-type > img,
.box.parts > .part:first-of-type > svg { margin:1rem auto; flex:0 0 auto; width:auto; max-height:240px; } /* important defaults for raster images, max-height important limiter */

.box.parts > .part > *:first-child {margin-top:1rem;	} /* sets general margins on first child last child */
.box.parts > .part > *:last-child {	margin-bottom:1rem;	}


/* --- box foot --- */
.box .box-foot,
.box.parts > .part > .box-foot { margin:1rem; display:flex; align-content:flex-end; align-items:flex-end; justify-content:center; flex-flow:row; flex-wrap:wrap; flex:1 0 auto; }
.box-foot > * { margin:0.25em; }


/* ---- box-stack ---- */

/* box in box (box-stack) vertical stack */
.box.box-stack { border:none; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; text-align:left; }
.box.box-stack > .box { flex:0 1 auto; margin:0 !important; text-align:center; }
	@media screen and ( max-width:399px ) { 
		/* box  */
		.box-group.quarters > .box { width:100%; }

	}

/* box headers */
/* padding for subsequent headers */
.box > h1:first-child + h2,
.box > h1:first-child + h3,
.box > h1:first-child + h4,
.box > h1:first-child + h5,
.box > h2:first-child + h3,
.box > h2:first-child + h4,
.box > h2:first-child + h5,
.box > h3:first-child + h4,
.box > h3:first-child + h5 { padding-left:5%; padding-right:5%; }

/* paragraph text */
.box > p { text-align:left; }
.band-header .box > p,
.band-header-text .box > p {text-align:unset;}


/* breadcrumb */
.breadcrumb { display:block; margin-top:0rem; margin-left:1rem; padding-bottom:0.75rem; font:600 0.875rem/1 Arial, Sans-Serif; }
	.band-header .breadcrumb { margin-top:1rem; }
	.band-header + .band > .breadcrumb { margin-top:1rem; }
.breadcrumb > a,
.breadcrumb > span { white-space: nowrap; }
	.breadcrumb > a:not(:first-child)::before { content: " \2771  ";}
	.breadcrumb > span::before { content: " \2771  ";}


/* Sidebar */
.Sidebar { justify-content:flex-start !Important; }


/* tabs, tabs2 */
.tabs {
	width: 100%;
	display: flex;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

	.tabs a {/* format layout only */
		flex: 1;
		width: 100%;
		padding: 0.375em;
		font-family: 'odudo', Sans-serif;
		font-size: 1rem;
		line-height: 1.5em;
		background-clip: padding-box; /* keeps background from showing through border - for IE9+, Firefox 4+, Opera, Chrome */
		text-align: center;
	}

		.tabs a:link,
		.tabs a:visited {
			color: #ffffff;
			border: solid 0.125em transparent;
			/* box-shadow: inset 0 0.25em 0 #00a8e1; */
			background: linear-gradient(135deg, transparent 0.67rem, #51748b 0) bottom left no-repeat;
		}

		.tabs a:hover,
		.tabs a:active {
			color: #00a8e1;
			border-color: #00a8e1;
			background: linear-gradient(135deg, #00a8e1 0.75rem, transparent 0) bottom left no-repeat;
			box-shadow: 0 5px 15px rgba(27,62,111,0.5);
			text-decoration: none;
			cursor: pointer;
		}

		.tabs a.current:link,
		.tabs a.current:visited {
			color: #ffffff;
			box-shadow: none;
			cursor: default;
			background: linear-gradient(135deg, transparent 0.67rem, #1b3e6f 0) bottom left no-repeat;
		}

		.tabs a.current:active,
		.tabs a.current:hover {
			color: #ffffff;
			border-color: transparent;
			background: linear-gradient(135deg, transparent 0.67rem, #1b3e6f 0) bottom left no-repeat;
			box-shadow: none;
			cursor: default;
		}


		/* tabs B */

		.tabs.B a:link,
		.tabs.B a:visited {
			color: #ffffff;
			border: solid 0.125em transparent;
			/* box-shadow: inset 0 0.25em 0 #00a8e1; */
			background: linear-gradient(315deg, transparent 0.67rem, #51748b 0) bottom left no-repeat;
		}

		.tabs.B a:hover,
		.tabs.B a:active {
			color: #81bd41;
			border-color: #81bd41;
			background: linear-gradient(315deg, #81bd41 0.75rem, transparent 0) bottom left no-repeat;
			box-shadow: 0 5px 15px rgba(27,62,111,0.5);
			text-decoration: none;
			cursor: pointer;
		}

		.tabs.B a.current:link,
		.tabs.B a.current:visited {
			color: #ffffff;
			box-shadow: none;
			cursor: default;
			background: linear-gradient(315deg, transparent 0.67rem, #1b3e6f 0) bottom left no-repeat;
		}

		.tabs.B a.current:active,
		.tabs.B a.current:hover {
			color: #ffffff;
			border-color: transparent;
			background: linear-gradient(315deg, transparent 0.67rem, #1b3e6f 0) bottom left no-repeat;
			box-shadow: none;
			cursor: default;
		}




/* ################# MEDIA QUERIES ################### */

@media screen and (min-width:1280px) { /* 1280 and above */
	/* .band */
	.band > div { width:1280px; }
	}

@media screen and (max-width:1279px) { /* 1279 and below */
	/* .band */
	.band > div { width:100%; }

	/* primarybreaks */
	/* .box-group.thirds > .box:nth-child(3) { margin:0 auto; } */
	.box-group.quarters > .box { width:50%; } /* quarters - grow to half */
		.box-group.quarters.ts > .box:last-child,
		.box-group.quarters.st > .box:first-child { width:50%; margin:0 auto; } /* orphans floats before / after at 50% */
		.box-group.quarters.ts > .box:first-child,
		.box-group.quarters.st > .box:last-child { width:100%; } /* threequarters - goes to full  */
		.box-group.quarters.ssd > .box:last-child { width:640px; margin:0 auto; } /* trailing half stays at 640 until 640 */
		.box-group.quarters.sds > .box:last-child,
		.box-group.quarters.dss > .box:last-child { width:640px; margin:0 auto; } /* trailing quarter stays at 640 until 320 */
	}

@media screen and (max-width:959px) { /* 959 and below */
	/* primarybreaks */
	.box-group.halves > .box { width:50%; }
	.box-group.quarters > .box { width:50%; }	
		.box-group.quarters.dss > .box:nth-child(1) { width:100%; }
		.box-group.quarters.sds > .box:nth-child(2) { width:100%; -webkit-box-ordinal-group:4; -moz-box-ordinal-group:4; -ms-flex-order:4; order:4; }
		.box-group.quarters.ssd > .box:nth-child(3) { width:100%; }
		.box-group.quarters.dss > .box:nth-child(2) { width:640px; margin:0 auto; } /* third quarter stays at 640 until 320 */
	.box-group.thirds > .box { width:50%; }
		.box-group.thirds.sd > .box:last-child,
		.box-group.thirds.ds > .box:first-child { width:100%; } /* twothirds */
		.box-group.thirds.ds > .box:last-child,
		.box-group.thirds.sd > .box:first-child,
		.box-group.thirds > .box:nth-child(3):last-child { width:480px; margin:0 auto; } /* thirds orphans stay at 480px until 640 */
	/* midbreaks - parts */
	.box-group.halves .box.parts { flex-direction:column; }
		.box-group.halves .box.parts > .part:first-of-type { padding:1rem; }
		.box-group.halves .box.parts > .part:first-of-type > img,
		.box-group.halves .box.parts > .part:first-of-type > svg {  } /* do we need to limits image size? */
	}

@media screen and (max-width:639px) { /* 639 and below */
	/* primarybreaks */
	.box-group.halves > .box  { width: 100%; }
	.box-group.thirds > .box  { width: 100%; }
		.box-group.thirds.ds > .box:first-child,
		.box-group.thirds.sd > .box:last-child { width:100%; } /* twothirds */
		.box-group.thirds.ds > .box:last-child,
		.box-group.thirds.sd > .box:first-child { width:100%; } /* thirds */
		.box-group.thirds > .box:nth-child(3):last-child { width:100%; } /* orphan reset */
	.box-group.quarters > .box { width: 100%; }
		.box-group.quarters.ts > .box:first-child,
		.box-group.quarters.st > .box:last-child { width:100%; } /* orphans floats now 100% */

	/* midbreaks - parts */
	.box-group.whole > .box.parts { flex-direction:column; } /* whole -> parts=vertical */
	.box-group.halves > .box.parts { flex-direction:row; } /* :-) return to parts=horizontal */
	.box-group.thirds.ds > .box:first-child.parts,
	.box-group.thirds.sd > .box:last-child.parts { flex-direction:column; } /* twothirds -> parts=vertical */
	.box-group.quarters.ts > .box:first-child.parts,
	.box-group.quarters.ts > .box:first-child.parts { flex-direction:column; } /* threequarters -> parts=vertical */
	}

@media screen and (max-width:479px) { /* 480 and below */
	/* midbreak - parts */
	.box-group.halves > .box.parts { flex-direction:column; } /* halves -> parts=vertical*/
	}