/* #################### 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:1rem; padding-bottom:1rem; }
.MID .band:first-of-type { padding-top:1rem; }
.MID .band:only-of-type { padding-top:1rem; padding-bottom:1rem; 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 */

.MID .band.band-jackpot { padding-top:0; padding-bottom:0; }

/* any tags NOT box-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-flow ----- */ 
/* replaces miniboxes, for all boxes that flow like tiles */
.box .box-flow,
.box-flow { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; border:0; clear:both; }
.box-flow .box {  }
.box-flow .box:first-child { margin-top:0; }
.box-flow .box:last-child { margin-bottom:0; } /* resets default settings for box elements */


/* ----- box-group ----- */
.box-group { display:flex; flex-wrap:wrap; clear:both; }
.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 { /* defaults */
	display:flex;
	position:relative;
	flex-direction:column; 
	margin:0;
	padding:0 0 0 0; /* not sure about this....but...*/
	text-align:center; /* gotta start somewhere */
	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;
}


/* This is complex: */
.box > *:first-child { margin-top: 1rem; }
.box > *:last-child { margin-bottom: 1rem; }
.box > div.box { margin-top: 0; margin-bottom: 0; }


	/* -- 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 */
.parts {				display:flex; flex-direction:row; flex-wrap:nowrap; padding:0;}
	.part {				display:flex; flex-direction:column; margin:0; } /* resets box margins part */
	.part:first-of-type {		flex:5; justify-content:center; align-content:center; padding:0; align-items:center; }
	.part:last-of-type {		flex:8; justify-content:center; align-content:center; padding:1rem 0; }
	.part:first-of-type > img,
	.part:first-of-type > svg { flex:0 0 auto; margin:1rem 0 1rem 1rem; width:auto; max-height:12rem; } /* important defaults for raster images, max-height important limiter */
	.box.parts > *:first-child { margin-top:unset; }


/* --- box foot --- */
.box .box-foot,
.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; }
.box-foot > * { margin:0.25em; }


/* ---- box-stack ---- */
/* box in box (box-stack) vertical stack */
.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%; }
	} */

/* headers box spacing */
h1 + .box,
h1 + .box-flow,
h1 + .box-group,
h2 + .box,
h2 + .box-flow,
h2 + .box-group,
h3 + .box,
h3 + .box-flow,
h3 + .box-group,
h4 + .box,
h4 + .box-flow,
h4 + .box-group, 
h5 + .box,
h5 + .box-flow,
h5 + .box-group { padding-top:1rem;}


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

/* box lists */
.box ul {margin:inherit auto;} /* center! */

/* 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  ";color: #a7b5c0;}
.breadcrumb > span::before {content: " \2771  ";color: #a7b5c0;} */


/* filter (fieldset.filter) */
h1 span.filter { display:inline-block; float:right; margin:0 0.5rem 0 0; padding:0; height:2.5rem; }


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


/* tabs, band-tabs */
.band.band-tabs { background-color: white;}
.MID .band-tabs { box-shadow: inset 0 -2px 0 0 var(--GraySlate), 0 2px 0 0 var(--GraySlate);}

/* tabs, tabsB */
.tabs {	width: 100%;display: flex;margin: 0;padding: 0;flex-wrap: wrap;}
.tabs a {flex: 1;width: 100%;padding: 0.375em;font-family: 'odudo', Sans-serif;font-size: 1rem;line-height: 1.5em; background-clip: padding-box; text-align: center;}
.tabs a:link,
.tabs a:visited { color: #ffffff;border: solid 0.125em transparent;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;}

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

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


@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 */

	.box-flow > .box.tile {	width: 240px;}
}


@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? */

	.box-flow > .box.tile {	width: 240px;}
}


@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 */

	.box-flow > .box.tile {	width:50%; max-width:240px;}

	/* .band-header .box-group.halves .box:first-child { display:block; } ################################ This hides the draw games logos for mobile web ############################*/
}

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

	.box-flow > .box.tile {	width:50%;	max-width:240px;}

	.box.parts.details { flex-direction:column; }
	.box.parts.details .part {}
	.box.parts.details .part:first-of-type { justify-content:center; text-align:center;}
	.box.parts.details .part:first-of-type .tslot { max-width:240px; margin:0 auto;}
	.box.parts.details .part:last-of-type {}

}