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

body { height:100%; margin:0; padding:0; border-top:4rem solid white; border-collapse:collapse; background-color:var(--Midnight); }

.TOP { width:100%; z-index:101; position:fixed; top:0; left:0; box-shadow:0 1px 3px 1px rgba(0,0,0,0.4); height:4rem; max-height:4rem; background-color:white; }
.MID { float:left; clear:left; width:100%; background-color:white; }
.BOT { float:left; clear:left; width:100%; }


/* content div */
.TOP > div { position:relative; display:flex; flex-direction:row; width:100%; max-width:1280px; min-width:320px; max-height:4rem; height:4rem; margin:0 auto; padding:0; background-color:white; }


/* ###################### TOP ############################## */
/* three flex content areas here: topMenu, topLogo, & topAux */

/* topLogo */
.topLogo { order:1; flex:0 0 12rem; width:12rem; height:4rem; }

	.topLogo .svgNCELAlt { display:block; width:10rem; height:4rem; margin:0rem auto; }
	.topLogo .svgNCELHorz { display:none; }
	.topLogo .svgNCELBubble { display:none; }


/* topMenu */
.topMenu { order:2; flex:1 0 auto; margin:1.25rem 0 0 0; height:2rem; } 

	.topMenu nav { border-left:1px solid #eee; }
	.topMenu nav > ul { display:table-row; height:2rem; padding:0; }
	.topMenu nav > ul > li { display:table-cell; position:relative; width:auto; height:2rem; padding:0 0.75rem 0 0.75rem; list-style-type:none; }
	.topMenu nav > ul > li > a { display:flex; width:100%; height:2rem; align-items:center; justify-content:center; font:600 0.865rem 'odudo', Sans-serif; }
	.topMenu nav > ul > li > a:link,
	.topMenu nav > ul > li > a:visited { color:var(--GraySlate); box-shadow:inset 0 0 0 0 var(--WhiteCloud); text-decoration:none; transition:all 0.3s ease; }
	.topMenu nav > ul > li > a:hover,
	.topMenu nav > ul > li > a:active,
	.topMenu nav > ul > li > a:focus { color:var(--BlueSea); box-shadow:inset 0 0.25em 0 0 var(--BlueSea); text-decoration:none; transition:all 0.3s ease; }
	/* current - only for local use */
	.topMenu nav > ul > li > a.current:link,
	.topMenu nav > ul > li > a.current:visited { color:var(--BlueMidnight); box-shadow:inset 0 0.25em 0 0 var(--BlueMidnight); }
	/* drop down suppressor */
	.topMenu nav > ul > li > ul { display:none; }

		/* .topMenu body inheritance state */
		body.PlayOnline .topMenu nav > ul > li > a[title="Play Online"]:link,
		body.PlayOnline .topMenu nav > ul > li > a[title="Play Online"]:visited { color:var(--BlueSea); box-shadow:inset 0 4px 0 0 var(--BlueSea); }
		body.Games .topMenu nav > ul > li > a[title="Games"]:link,
		body.Games .topMenu nav > ul > li > a[title="Games"]:visited { color:var(--BlueSea); box-shadow:inset 0 4px 0 0 var(--BlueSea); }
		body.Rewards .topMenu nav > ul > li > a[title="Rewards"]:link,
		body.Rewards .topMenu nav > ul > li > a[title="Rewards"]:visited { color:var(--BlueSea); box-shadow:inset 0 4px 0 0 var(--BlueSea); }
		body.Winning .topMenu nav > ul > li > a[title="Winning"]:link,
		body.Winning .topMenu nav > ul > li > a[title="Winning"]:visited { color:var(--BlueSea); box-shadow:inset 0 4px 0 0 var(--BlueSea); }
		body.Impact .topMenu nav > ul > li > a[title="Impact"]:link,
		body.Impact .topMenu nav > ul > li > a[title="Impact"]:visited { color:var(--BlueSea); box-shadow:inset 0 4px 0 0 var(--BlueSea); }
		body.About .topMenu nav > ul > li > a[title="About"]:link,
		body.About .topMenu nav > ul > li > a[title="About"]:visited { color:var(--BlueSea); box-shadow:inset 0 4px 0 0 var(--BlueSea); }


	/* -- hamburger menu & advanced checkbox hack -- */
	/* -- andriod fix -- */
	body { -webkit-animation:bugfix infinite 1s; }
	@-webkit-keyframes bugfix { from { padding:0; } to { padding:0; } }

	.topMenu input[type=checkbox].navTrigger { position:absolute; top:-9999px; left:-9999px; }
	.topMenu label[for="navTrigger"] { display:none; cursor:pointer; user-select:none; }
	.topMenu label[for="navTrigger"] { color:var(--BlueMidnight); text-decoration:none; font:2em sans-serif; transition:color .3s ease-in-out; }


/* -- topAux -- */
.topAux {
	order: 3;
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	margin: 0;
	padding: 0;
	height: 4rem; }


	/* -- tabPlaySmart -- */
	a.tabPlaySmart { margin:0 0 1rem 0; height:1.5rem; transition:all 0.3s ease; }
	a.tabPlaySmart .svgPlaySmart { margin:0 0.25rem 0 0; height:1.5rem; width:6.25rem; }


	/* -- tabCart -- */
	a.tabCart { position:relative; margin:0 0.25rem 1rem 0.25rem; height:1.75rem; width:1.875rem; color:var(--GraySlate); transition:all 0.3s ease; }
	a.tabCart:hover,
	a.tabCart:active { color:var(--BlueSea); }
	a.tabCart .svgCart { height:1.75em; width:1.75em; margin:0; padding:1px; }
	a.tabCart .cart-items-count {
			position:absolute; top:0; right:0; z-index:2;
			height:1.5em; width: auto; min-width:1.5em; max-width:2.5em; margin:0; padding:0 0.25em;
			border-radius:0.75em; border:1px solid white; background-color:var(--BlueOcean); 
			font-family:sans-serif; font-size:0.625rem; font-weight:600; line-height:1.365em; color:white; text-align:center; }
	a.tabCart .cart-items-count.loading { display:none; }


	/*-- tabAccount --*/
	div.tabAccount { height:2.75rem; margin:0 0 0 -0.25rem; padding-top:0; width:7.25rem; text-align:right; }


		/* -- tabSignIn -- */
		a.tabSignIn { position:relative; margin:0 0.25rem 0 0.25rem; padding:0 0.25em; height:2.75rem; text-decoration:none; color:var(--GraySlate); transition:all 0.3s ease; }

		a.tabSignIn:hover,
		a.tabSignIn:active { color:var(--BlueSea); }
		a.tabSignIn .svgSignIn { display:inline-block; margin:0; height:1.75em; width:1.75em; }
		a.tabSignIn span { display:inline-block; margin:0; padding:0 0.25rem 0 0; height:1.75rem; width:auto; max-width:7.5rem;
			font-family: 'odudo', sans-serif; font-size:0.875rem; font-weight:600; line-height:2; vertical-align:top; text-align:right; overflow:hidden; }


		/* -- tabUser -- */
		.tabUser { position:relative; display:inline-block; margin:0 0 0 0; padding:0 0.25rem; height:2.75rem; font-size:0.875rem; text-decoration:none; color:var(--GraySlate); white-space:nowrap; border-top-left-radius:0.5rem; border-top-right-radius:0.5rem; transition:all 0.3s ease; box-shadow: 0 -2px 0 0 transparent;}

		.tabUser .svgUser { display:inline-block; margin:0 0.25rem 0 0; padding:3px; height:1.75rem; width:1.75rem; }
		.tabUser:hover,
		.tabUser:focus { color:var(--BlueSea); transition:all 0.4s ease; }
		.tabUser:after { content:"\25BC"; margin-inline-start:-0.625rem; }
		.tabUser > span:first-child { display:inline-block; margin:0; padding:0; height:1.75rem; width:100%; min-width:4.5rem; max-width:4.5rem;
			font-family: 'odudo', sans-serif; font-size:0.875rem; line-height:2.365em; vertical-align:top; text-align:right; overflow:hidden; }
		.tabUser .notification-items-count {
				position: absolute; top: 0; right: 0.375rem; z-index: 2;
				margin: 0; padding: 0 0.25em;
				height: 1.5em; width: auto; min-width: 1.5em; max-width: 2.5em;
				border-radius: 0.75em; border: 1px solid white;
				background-color: var(--BlueSea);
				font-family: sans-serif; font-size: 0.625rem; font-weight:600; line-height: 1.365; color: white; text-align: center; }
		.tabUser .notification-items-count.loading { display:none; }


	/* trigger: topAux -> .tabUser/.navUserMenu */
	input[type=checkbox].navUserMenuTrigger { position:absolute; top:-9999px; left:-9999px; }
	label[for="navUserMenuTrigger"] { margin:0; padding:0; }
	label[for="navUserMenuTrigger"]:hover {  }
	label[for="navUserMenuTrigger"]:after {  }
	input[type=checkbox].navUserMenuTrigger:checked ~ label[for="navUserMenuTrigger"] > .tabUser { background-color:var(--BlueMidnight); color:white; box-shadow:0 -2px 0 0 var(--BlueMidnight); }
	input[type=checkbox].navUserMenuTrigger:checked ~ label[for="navUserMenuTrigger"] > .tabUser:hover,
	input[type=checkbox].navUserMenuTrigger:checked ~ label[for="navUserMenuTrigger"] > .tabUser:active { color:var(--BlueSea); }
	input[type=checkbox].navUserMenuTrigger:checked ~ label[for="navUserMenuTrigger"]:after {  }
	input[type=checkbox].navUserMenuTrigger:checked ~ label[for="navUserMenuTrigger"] > .tabUser:after { content: "\25B2"; -webkit-text-stroke:1px var(--BlueMidnight); }
	input[type=checkbox].navUserMenuTrigger:checked ~ label[for="navUserMenuTrigger"] > .tabUser .notification-items-count { border: 1px solid var(--BlueMidnight); }

/* nav.navUserMenu */
nav.navUserMenu { display:none; height:100%; padding:0.25rem; }

input[type=checkbox].navUserMenuTrigger:checked ~ nav.navUserMenu {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 1 1 0;
	width: 320px;
	height: auto;
	margin: 4rem 0 0 0;
	background: radial-gradient(circle farthest-side, #142f54, var(--BlueMidnight));
	box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,0.5);
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	transition: all 0.4s ease;
}

.navUserMenu > div { width:100%;}
.navUserMenu > div > .value { display:block; width:100%; color: white;
	line-height: 2rem;
	font-size: 0.875rem;
	font-weight: 800; 
	font-family: 'odudo', sans-serif;
	text-transform: uppercase; text-align:center; }

.navUserMenu > div > .label { display:block; width:100%; margin-bottom:0.5rem; color: #99c1da;
	line-height: 1.2;
	font-size: 0.75rem;
	font-weight: normal; 
	font-family: sans-serif;
	text-transform: uppercase; text-align:center; }

/* direct a.chiclet "chiclet" items */
a.chiclet {
	display: flex;
	margin: 0.25rem;
	padding: 0;
	width: 100%;
	border-radius: 0.5rem; }
a.chiclet:link,
a.chiclet:visited {
	color: #99c1da;
	background-color:var(--BlueMidnight);
	background: radial-gradient(farthest-corner, #194f99, var(--BlueMidnight)); /* #173661 */
	border: 1px solid rgba(0,168,225,0.3);
	transition: all 0.3s linear; }
a.chiclet:hover,
a.chiclet:active {
	color: white;
	background: var(--BlueMidnight);
	border: 1px solid var(--BlueOcean);
	box-shadow: inset 0 0 1px 1px var(--BlueOcean);
	text-decoration: none;
	transition: all 0.3s linear; }

.chiclet > span {
	margin: 0 auto;
	line-height: 2rem;
	font-size: 0.75rem;
	font-family: sans-serif;
	text-transform: uppercase; }

	
	/* "a" cklt "chicklets" */
	.chiclet { }	
	.chiclet.wallet,
	.chiclet.points { flex-basis:304px; }
	.chiclet.coupons,
	.chiclet.deposit,
	.chiclet.withdraw,
	.chiclet.luckedraws,
	.chiclet.secondchancedraws,
	.chiclet.messagecenter,
	.chiclet.myaccount,
	.chiclet.security,
	.chiclet.bonusoffers,
	.chiclet.signout { flex-basis:148px; }


	/* chiclet-box */
	.chiclet-box { flex: 1 1 auto; }

	.chiclet-box > span:first-child { 
		display: block;
		margin: 0.75rem 0 0 0;
		height: 1.75rem;
		font-size: 1.5rem;
		line-height: 1;
		font-family: 'odudo', Arial, sans-serif;
		text-align: center;
		vertical-align: top;
		white-space: nowrap;
	}

	.chiclet-box > span:first-child.pointspending {	color:var(--GoldenSky);	}

	.chiclet-box span.value { color: white !important; }

	.chiclet-box span.label { 
		color: unset;
		display: block;
		margin:0 auto 0.25rem auto;
		padding:0;
		line-height:1.75;
		font-size: 0.75rem;
		font-weight:normal;
		text-transform: uppercase;
		text-align: center;
		_background-color:pink;
	}

	.chiclet-box svg.svgIcon {
		display: inline-block;
		box-sizing: border-box;
		margin: 0 !important;
		padding: 1px 0.5rem 1px 1px !important;
		font-size: inherit;
		height: 1em;
		width: 1.25em;
		vertical-align: top;
	}

	.chiclet-box.lastlogin {
		display: block;
		margin: 0.75rem 0 0 0;
		height: 1rem;
		font-size: 0.75rem;
		line-height: 1;
		font-family: 'odudo', Arial, sans-serif;
		text-align: center;
		color: white;
	}

	/* Special Menu items */
	.chiclet-item-count {
		display:inline-block; height: 1.25rem; width: auto; min-width: 1.25rem; max-width: 2.5rem; margin-top:0.125rem;
		border-radius: 0.625rem; border: 0px solid var(--BlueOcean); background-color: var(--BlueSea); font-family: sans-serif;
		font-size: 1rem; font-weight: 600; line-height: 1.375; color: white; text-align: center; vertical-align:top;
	}




/* -- .BOT -- */
.BOT { clear:left; float:left; width:100%; margin:0; padding:0 0 2rem 0; background-color:var(--BlueMidnight); }
.BOT > div { position:relative; width:100%; max-width:1280px; min-width:320px; min-height:3rem; margin:0 auto; padding:0; color:white; }

.BOT div.bot-row { display:flex; flex-flow:row wrap; }

.BOT div.bot-block { flex:1 1 50%; min-height:5rem; }

.BOT div.bot-block.bot-logo { text-align:left; padding-top:2rem;padding-left:1rem;}
.BOT div.bot-block.bot-logo img { height:2rem; }

.BOT div.bot-block.bot-social { text-align:left; }
.BOT div.bot-block.bot-social span { display:inline-block; width:2rem; height:2rem; margin:2rem 1rem 0 1rem;}
.BOT div.bot-block.bot-social a { color:white; text-decoration:none; }
.BOT div.bot-block.bot-social svg { height:2rem; width:2rem; fill:currentColor; }

.BOT div.bot-block.bot-3 { text-align:left; }
.BOT div.bot-block.bot-3 h6 { margin-bottom:1rem; }
.BOT div.bot-block.bot-3 span { margin:0.125rem 1rem 0 1rem; display:block; font:normal 0.875rem odudo; vertical-align:text-top; height:2rem;
								display:flex; flex-flow:row; align-items:center;}
.BOT div.bot-block.bot-3 svg { display:inline-block; height:2rem; width:2rem; margin-right:0.5rem; fill:currentColor; }

.BOT a { color:white; text-decoration:none; }
.BOT a:link,
.BOT a:visited { color:white; text-decoration:none; }
.BOT a:active,
.BOT a:hover { color:var(--GoldenSky); text-decoration:underline; }

.BOT h6 { margin-top:2rem; color:#fff; }
.BOT p { font-size:0.875rem; line-height:2em;}
.BOT p.legal { margin:1rem 0.5rem 0 1rem; font-size:0.75rem; color:white; }

	@media screen and ( max-width:799px ) { /* 799px and below */
		.BOT div.bot-block { flex:1 1 100%; }
	}








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

@media screen and (min-width: 801px) { /* above 800 */
	
	/* -- drop down for PC view - hide above 800 -- */
	.topMenu nav > ul > li > ul { display:none; margin:0; width:auto; background-color:var(--WhiteCloud); box-shadow:0 5px 5px 0 rgba(0,0,0,0.4); position:absolute; top:2em; left:-0.5em; }
	.topMenu nav > ul > li:hover > ul { display:block; }
	.topMenu nav > ul > li > ul > li { float:right; display:block; width:12em; height:2.5em; margin:0; padding:0; background-color:white; }
	.topMenu nav > ul > li > ul > li:last-child { margin:0 0 0 0; }
	.topMenu nav > ul > li > ul > li > a { display:flex; width:100%; height:2.5em; align-items:center; padding-left:1.25rem; font:600 0.875rem 'odudo', Arial, Sans-serif; }
	.topMenu nav > ul > li > ul > li > a:link,
	.topMenu nav > ul > li > ul > li > a:visited { color:var(--GraySlate); background-color:white; text-decoration:none; transition:all 0.3s linear; }
	.topMenu nav > ul > li > ul > li > a:hover,
	.topMenu nav > ul > li > ul > li > a:active { color:var(--BlueSea); background-color:var(--WhiteCloud); box-shadow:inset 4px 0 0 0 var(--BlueOcean); transition:all 0.3s linear; }
	.topMenu nav > ul > li:nth-child(7) { display:none; } /* Play Smart */

	/* topAux */
	.topAux a.tabPlaySmart {}
	.topAux a.tabPlaySmart .svgPlaySmart { display:inline-block; }
	/* .topAux a.tabPlaySmart .svgPlaySmartVert { display:none; } */

	}


@media screen and (min-width: 801px) and (max-width: 960px) { /* 801 to 960 - to fit nav items */

	.TOP > div { width:100%; height:4rem; flex-wrap:wrap; }

	.topLogo { order:1; min-width:100%; height:2rem;}

		.topLogo .svgNCELAlt { display:none; }
		.topLogo .svgNCELHorz { display:block; height:2rem; width:12rem; margin:0 auto 0 auto; }
		.topLogo .svgNCELBubble { display:none; }
	
	.topMenu { order:2; margin: 0 0 0 0; height:2rem; }

		.topMenu nav { margin: 0 0 0 0; border-left: none; }

	.topAux { margin:0 0 0 0; padding:0 0 0 0; height:2rem; }

		.topAux a.tabPlaySmart {	margin: 0 0.25rem 0.25rem 0;}
		.topAux a.tabCart {			margin: 0 0.25rem 0.25rem 0.25rem;}
		.topAux .tabAccount {		height: 2rem;}
		.topAux a.tabSignIn {		height: 2rem;}
		.topAux .tabUser {			height: 2rem;}
			.topAux a.tabUser > svg.svgUser {}
			.topAux a.tabUser > span {}
			.topAux a.tabUser:after {}

	}


@media screen and (max-width: 800px) { /* under 800 */
	
	body { border-top-width:2.5rem; transition: border-width 0.3s ease-in-out; }

	.TOP { max-height:2.5rem; transition:all 0.3s ease; }
	.TOP > div { width:100%; height:2.5rem; }

	/* topLogo */
	.topLogo { order:2; flex:1 1 auto; height:2.5rem; }
		.topLogo .svgNCELAlt { display:none; }
		.topLogo .svgNCELHorz { display:none; }
		.topLogo .svgNCELBubble { display:block; width:1.75rem; height:1.75rem; margin:0.375rem auto 0.375rem auto; }

	/* topMenu */
	.topMenu { order:1; flex:0 0 5rem; margin:0 0 0 0; height:2.5rem; width:5rem; }

		/* trigger */
		.topMenu label[for="navTrigger"] { display:block; width:2.5rem; height:2.5rem; margin:0; padding:0.125rem 0 0 0.5rem; font-size:2.5rem; line-height:1; color:var(--GraySlate); vertical-align:top; }
		.topMenu label[for="navTrigger"]:hover { color:var(--BlueSea); }
		.topMenu label[for="navTrigger"]:before { content:"\2261"; }
		.topMenu input[type=checkbox].navTrigger:checked ~ label[for="navTrigger"]:before { color:var(--BlueSea); }

		/* nav */
		.topMenu > nav { display:none; height:100%; }
		.topMenu input[type=checkbox].navTrigger:checked ~ nav { position:absolute; z-index:21; display:block; top:0; left:0; width:320px; height:auto; margin:2.5rem 0 0 0;}

		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul { display:block; width:100%; height:auto; margin:0; padding:0; }
		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul > li { display:block; float:left; width:100%; height:3rem; margin:0; padding:0; text-align:left; }
		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul > li:last-child { box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.4); }
		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul > li > a { margin:0; padding:0; width:100%; height:3rem; }
		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul > li > a:link,
		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul > li > a:visited { color:var(--GraySlate); background-color:white; opacity:1; border-bottom:0; border-top:1px solid #cccccc; box-shadow:inset 4px 0 0 0 var(--BlueMidnight); text-decoration:none; }
		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul > li > a:hover,
		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul > li > a:active { color:var(--BlueSea); background-color:var(--WhiteCloud); opacity:1; border-bottom:0; border-top:1px solid #cccccc; box-shadow:inset 8px 0 0 0 var(--BlueOcean); text-decoration:none; }
		/* Play Smart in-menu */
		.topMenu input[type=checkbox].navTrigger:checked ~ nav > ul > li:nth-child(6) { display:block; }

	/* topAux */
	.topAux { order:3; height:2.5rem; flex:0 0 auto; margin:0 0 0 0; padding:0.375rem 0 0 0; }

		.topAux a.tabPlaySmart {}
		.topAux a.tabPlaySmart .svgPlaySmart { display:none; }
		.topAux a.tabCart {			margin: 0 0.25rem 0.25rem 0.25rem; }
		.topAux div.tabAccount {	height:2rem; width:2.5rem; }	
		.topAux a.tabSignIn {		height:2rem; }
		.topAux a.tabSignIn span { display:none; }
		.topAux .tabUser {			height:2rem; }
		.topAux .tabUser > span:first-child { display:none; } /* hides username in narrow view */

		/* navUserMenu */
		input[type=checkbox].navUserMenuTrigger:checked ~ nav.navUserMenu {	margin:2.5rem 0 0 0; }


	/* .BOT */
	.BOT .svgLogo.default { margin:0 auto; }
	.BOT .social { clear:both; float:left; margin:2rem 1rem 2rem 1rem; text-align:center; }
	.BOT .social a { color:white; text-decoration:none; }
	.BOT .social svg { margin-right:1em; height:2rem; width:2rem; fill:currentColor; }

	}

/* Intermediate Break .topNav ONLY */
@media screen and (min-width:480px) and (max-width:800px) {  /* 480 to 800 */

	.topLogo { width:15rem; }
	.topLogo .svgNCELAlt { display:none; }
	.topLogo .svgNCELHorz { display:block; width:15rem; height:2.5rem; margin:0 auto 0 auto; }
	.topLogo .svgNCELBubble { display:none; }

	}