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


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


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


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


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

main .band.band-header {	padding-top:0; padding-bottom:0; }
main .band.band-header + .band { padding-top:1rem; } /* next band */
main .band.band-header + .band.band-tabs { padding-top:1rem; } /* restores */
main .band.band-header-text { padding-top:1rem; padding-bottom:1rem; }
main .band.band-header-text + .band { padding-top:1rem; } /* next band */

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


/* ---- 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; row-gap:1rem; 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;
}


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


/* ---- nesting ---- */
.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-stack { border:none; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; text-align:left; }


/* 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; padding-top:2rem !important;}
main .band-tabs { box-shadow: 0 4px 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.365em; font-family: 'odudo', Sans-serif; font-size: 1rem; line-height: 1.625em; background-clip: padding-box; text-align: center; margin:0 0.25rem; border-top-left-radius:0.5rem; border-top-right-radius:0.5rem; }
.tabs a:link,
.tabs a:visited {		color: var(--BlueSea); background-color:var(--WhiteCloud); box-shadow: var(--CloudSlate) 0px 0px 16px inset;}
.tabs a:hover,
.tabs a:active {		color: white; background-color:var(--BlueSea); text-decoration: none; cursor: pointer;}
.tabs a.current:link,
.tabs a.current:visited { color: white; background-color:var(--GraySlate); cursor: default; }
.tabs a.current:active,
.tabs a.current:hover { color: white; background-color:var(--GraySlate); text-decoration: none; }





/* ################# 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 {}

}