/***********************************
Spot's Trash Match-Up
INTERACTIVE CART GAME
v 3.3 - Chula Vista Recycles
************************************
Entire game (including leaderboard & UI)
designed & developed with love by 
Drew Matamales — WEBSITES FOR HUMANS
https://w4hs.com
				
   / \__		  __________________
  (    @\___     |  THANK YOU FOR   |
  /         O	 |  PLAYING, HUMAN! |
 /   (_____/	<___________________|
/_____/   U
*/

:root {
  --blue: rgb(77,77,255);
  --blue-glow: 0 0 3px rgba(77,77,255,.75), 0 0 15px rgba(77,77,255,.25);
  --cyan: rgb(74, 172, 206);
  --cyan-glow: 0 0 3px rgba(74, 172, 206,.75), 0 0 15px rgba(74, 172, 206,.25);
  --green: #58a618;
  --green-dark: #479507;
  --green-glow: 0 0 3px rgba(88,166,24,.75), 0 0 15px rgba(88,166,24,.25);
  --red: rgb(255, 60, 60);
  --red-dark: rgb(205, 10, 10);
  --red-glow: 0 0 3px rgba(255, 60, 60, .85), 0 0 15px rgba(255, 60, 60, .30);
  --white: #ffffff;
  --white-glow: 0 0 3px rgba(225,255,255,.75), 0 0 15px rgba(225,255,255,.25);
  --orange: rgb(246,138,65);
  --orange-glow: 0 0 3px rgba(255,185,70,.85), 0 0 15px rgba(255,185,70,.30);
  --yellow: rgb(255,185,70);
  --yellow-glow: 0 0 3px rgba(255,185,70,.85), 0 0 15px rgba(255,185,70,.30);
  --pink: rgb(255,102,255);
  --pink-glow: 0 0 3px rgba(255,102,255,.85), 0 0 15px rgba(255,102,255,.30);
  --purple: rgb(166,77,255);
  --purple-glow: 0 0 3px rgba(166,77,255,.85), 0 0 15px rgba(166,77,255,.30);
  --black: rgb(34, 34, 34);
  --black-glow: 0 0 3px rgba(34, 34, 34,.85), 0 0 15px rgba(34, 34, 34,.30);
}


body
{
  min-height: 100vh !important;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available !important;
  
  background: var(--cyan);
  
}

body,
body a,
body a:hover,
body a:visited
{
	color: var(--cyan);
}

.cart-game .game-container
{
	transition: .3s all .3s;
	opacity: 1 !important;
}

.cart-game.initial-loading .game-container
{
	opacity: 0;
	
}


.cart-game
{
	color: var(--black);
}

.cart-game a,
.cart-game a:visited
{
	color: var(--blue);
	transition: .2s all;
/*	text-decoration-color: transparent;*/
}

.cart-game a:active
{
	color: var(--cyan);
	text-decoration-color: transparent;
}

/*.cart-game a:hover
{
	text-decoration-color: currentColor;
}

.cart-game a:active
{
	color: var(--cyan);
	text-decoration-color: currentColor;
}*/


html {
  height: -webkit-fill-available;
}

#page,
#primary,
#primary > article,
#primary > article > .entry-content,
.cart-game
{
	position: fixed !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


.cart-game .leaderboard .username-heading
{
	padding-left: 50px;
}

.cart-game .leaderboard .username
{
	display: flex;
	height: 50px;
}


.cart-game .leaderboard .username .avatar,
.w4hs-user-menu .username .avatar
{
	width: 50px;
	height: 100%;
	background-color: #ccc;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.w4hs-user-menu .username
{
	display: inline-block;
	display: inline-flex;
	height: 26px;
	align-items: center;
}

.w4hs-user-menu .username .w4hs-register-link
{
	display: inline-block;
	display: inline-flex;
	align-items: center;
}


.w4hs-user-menu .username .avatar
{
	margin-right: 5px;
	display: inline-block;
	display: inline-flex;
	align-items: center;
	width: 26px;
	height: 26px;
	border: 2px solid white;
	box-shadow: 0 0 3px rgba(0,0,0,.8) !important;
	transition: .2s all;
}

.w4hs-user-menu .username .w4hs-register-link:hover .avatar
{
	border-color: var(--yellow);
}


.cart-game .username .avatar-bear
{
	background-image: url('images/avatars/static/bear.svg');
}

.cart-game .username .avatar-eagle
{
	background-image: url('images/avatars/static/eagle.svg');
}

.cart-game .username .avatar-fish
{
	background-image: url('images/avatars/static/fish.svg');
}

.cart-game .username .avatar-frog
{
	background-image: url('images/avatars/static/frog.svg');
}

.cart-game .username .avatar-joshua_tree
{
	background-image: url('images/avatars/static/joshua_tree.svg');
}

.cart-game .username .avatar-lizard
{
	background-image: url('images/avatars/static/lizard.svg');
}

.cart-game .username .avatar-poppy
{
	background-image: url('images/avatars/static/poppy.svg');
}

.cart-game .username .avatar-squirrel
{
	background-image: url('images/avatars/static/squirrel.svg');
}

.cart-game .username .avatar-unclaimed
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cart-game .username .avatar-unclaimed:before
{
	content: '?';
	font-size: 30px;
	font-weight: bold;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	text-align: center;
	color: #222;
	text-shadow: var(--black-glow);
	
}

/*.cart-game .leaderboard table tbody:empty
{
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	height: calc(100% - 50px);
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #222;

}

.cart-game .leaderboard table tbody:empty:before
{
	content: 'Please wait.  Loading the leaderboard.';
}*/


.w4hs-user-menu .username
{
	display: flex;
}


.w4hs-user-menu .username .name,
.cart-game .leaderboard .username .name
{
	flex: 1;
}

.cart-game .leaderboard .username.with-color-red
{
	color: var(--red);
	text-shadow: var(--red-glow);
}

.cart-game .leaderboard .username.with-color-orange,
.cart-game .leaderboard .time span
{
	color: var(--orange);
	text-shadow: var(--orange-glow);
}

.cart-game .leaderboard .time span
{
	font-size: 14px;
}

.cart-game .leaderboard .username.with-color-yellow
{
	color: var(--yellow);
	text-shadow: var(--yellow-glow);
}

.cart-game .leaderboard .username.with-color-green
{
	color: var(--green);
	text-shadow: var(--green-glow);
}

.cart-game .leaderboard .username.with-color-cyan
{
	color: var(--cyan);
	text-shadow: var(--cyan-glow);
}

.cart-game .leaderboard .username.with-color-blue
{
	color: var(--blue);
	text-shadow: var(--blue-glow);
}

.cart-game .leaderboard .username.with-color-purple
{
	color: var(--purple);
	text-shadow: var(--purple-glow);
}

.cart-game .leaderboard .username.with-color-pink
{
	color: var(--pink);
	text-shadow: var(--pink-glow);
}




ul.avatar-color-selector li.color-red,
ul.avatar-color-selector[data-color-selected="red"] + .avatar-selector .avatar:before,
.cart-game .username.with-color-red .avatar
{
	background-color: var(--red);
	box-shadow: var(--red-glow);
}

ul.avatar-color-selector li.color-orange,
ul.avatar-color-selector[data-color-selected="orange"] + .avatar-selector .avatar:before,
.cart-game .username.with-color-orange .avatar
{
	background-color: var(--orange);
	box-shadow: var(--orange-glow);
}

ul.avatar-color-selector li.color-yellow,
ul.avatar-color-selector[data-color-selected="yellow"] + .avatar-selector .avatar:before,
.cart-game .username.with-color-yellow .avatar
{
	background-color: var(--yellow);
	box-shadow: var(--yellow-glow);
}

ul.avatar-color-selector li.color-green,
ul.avatar-color-selector[data-color-selected="green"] + .avatar-selector .avatar:before,
.cart-game .username.with-color-green .avatar
{
	background-color: var(--green);
	box-shadow: var(--green-glow);
}

ul.avatar-color-selector li.color-cyan,
ul.avatar-color-selector[data-color-selected="cyan"] + .avatar-selector .avatar:before,
.cart-game .username.with-color-cyan .avatar
{
	background-color: var(--cyan);
	box-shadow: var(--cyan-glow);
}

ul.avatar-color-selector li.color-blue,
ul.avatar-color-selector[data-color-selected="blue"] + .avatar-selector .avatar:before,
.cart-game .username.with-color-blue .avatar
{
	background-color: var(--blue);
	box-shadow: var(--blue-glow);
}


ul.avatar-color-selector li.color-purple,
ul.avatar-color-selector[data-color-selected="purple"] + .avatar-selector .avatar:before,
.cart-game .username.with-color-purple .avatar
{
	background-color: var(--purple);
	box-shadow: var(--purple-glow);
}

ul.avatar-color-selector li.color-pink,
ul.avatar-color-selector[data-color-selected="pink"] + .avatar-selector .avatar:before,
.cart-game .username.with-color-pink .avatar
{
	background-color: var(--pink);
	box-shadow: var(--pink-glow);
}

#frm_field_42_container,
#frm_field_45_container,
#frm_field_68_container,
#frm_field_66_container
{
	display: none;
}


ul.avatar-color-selector
{
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 4px solid #222;
	border-radius: 20px;
}

ul.avatar-color-selector li:first-child
{
	border-radius: 15px 0 0 15px;
}

ul.avatar-color-selector li:last-child
{
	border-radius: 0 15px 15px 0;
}


ul.avatar-color-selector li
{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

ul.avatar-color-selector li a
{
	padding: 10px 5px;
	flex: 1;
	display: block;
	position: relative;
	color: white;
	text-decoration: none;
	text-align: center;
	background-color: transparent;
	text-shadow: 0 0 3px rgba(0,0,0,.7);
}

ul.avatar-color-selector li a:hover
{
	background-color: background-color: rgba(0,0,0,.1);
}


ul.avatar-color-selector li a:before
{
	content: '';
	position: absolute;
	top: -4px;
	right: -4px;
	bottom: -4px;
	left: -4px;
	border: 4px solid #eee;
	border-radius: 3px;
	box-shadow: 0 0 3px rgba(0,0,0,.7), 0 0 3px rgba(0,0,0,.7) inset;
	opacity: 0;
	transform: scale(1.3);
	transition: .2s all;
	pointer-events: none;
}

ul.avatar-color-selector li:first-child a:before
{
	border-radius: 20px 3px 3px 20px;
}

ul.avatar-color-selector li:last-child a:before
{
	border-radius: 3px 20px 20px 3px;
}

ul.avatar-color-selector li a:active:before
{
	border-color: #ccc;
}


ul.avatar-color-selector li.selected a:before,
ul.avatar-color-selector li a:active:before
{
	opacity: 1;
	transform: scale(1);
}

#frm_form_5_container
{
	display: none;
}

.w4hs-hide
{
	display: none;
}

.w4hs-hide-lite
{
	opacity: 0 !important;
	pointer-events: none !important;
}

.cart-game .account-registration
{
	position: relative;
}

/* HIDE CITY FIELD */
.cart-game .account-registration #frm_field_17_container,
.cart-game .account-registration #frm_field_69_container
{
	display: none;
}

.cart-game .info-bar
{
	position: absolute;
	top: 0em;
	right: 50px;
	text-align: right;
}


#w4hs-icg-score 
{
	position: relative;
	text-align: center;
	margin-top: 0;
}

body .cart-game.cart-game-2 .ui-pane-container .panes > div:not(.title-screen)
{
	overflow-y: scroll;
	overflow-x: hidden;
	background: rgba(255,255,255,.8);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	padding: 30px;
	border: 4px solid #222;
	max-width: 900px;
	margin: 0 auto;
}

body .cart-game.cart-game-2 .ui-pane-container .panes > div.leaderboard
{
	overflow-y: hidden;
	
}

body .cart-game.cart-game-2 .ui-pane-container .panes > div.leaderboard > div
{
	position: absolute;
	overflow-y: auto;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	background: #222;
	border-bottom: 2px inset #eee;
}

/*body .cart-game.cart-game-2 .ui-pane-container .panes > div.leaderboard > div > table
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}*/


body .cart-game.cart-game-2 .ui-pane-container .settings-board .back-button
{
	
	position: absolute;
	z-index: 2;
	top: -20px;
	left: -10px;
	
	/*top: -2vw;
	left: -6vw;*/
	font-size: 1rem;
	line-height: 1.2;
	
	border-radius: 20px 0 0 20px;
	border: 4px solid #222;
	
	padding: 3px 20px;
	color: #222;
	
	background-color: white;
	box-shadow: 7px 7px 0 #4AACCE inset, -7px -7px 0 #4AACCE inset, 7px -7px 0 #4AACCE inset, -7px 7px 0 #4AACCE inset;

	transition: .3s all;
	transform: translateX(-200%);
	opacity: 0;
	text-decoration: none;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .back-button .dashicons,
body .cart-game .w4hs-icon-link .dashicons
{
	width: 40px;
	height: 40px;
	font-size: 40px;
}


body .cart-game.cart-game-2 .ui-pane-container .settings-board .back-button:hover
{
	background-color: rgb(230,230,230);
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .back-button:active
{
	background-color: rgb(230,230,230);
}


body .cart-game.cart-game-2.ui-display:not(.title-ui-display) .ui-pane-container .settings-board .back-button
{
	transform: translateY(0);
	opacity: 1;
	/*transition: .3s all 6s;*/
}


.cart-game .w4hs-user-menu
{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5050;
	color: white;
	text-shadow: 0 0 3px rgba(0,0,0,.8);
	font-weight: bold;
}

.cart-game .w4hs-user-menu a
{
	color: white;
	text-decoration-color: transparent;
	transition: .2s all;
	display: inline-block;
	padding: 8px 15px;
}

.cart-game .w4hs-user-menu a:hover
{
	text-decoration-color: currentColor;
}

.cart-game .w4hs-user-menu a:active
{
	color: var(--yellow);
	text-decoration-color: currentColor;
}

.cart-game .leaderboard
{
	position: relative;
}


.cart-game .leaderboard table
{
	border-collapse: collapse;
}




.cart-game .leaderboard table thead
{
	top: 0;
/*	border-top: 7px solid var(--cyan);*/
	position: sticky;
	z-index: 5000;
	background-color: white;
	height: 50px;
	
}


.cart-game .leaderboard table thead tr
{
	background-color: white;
}

.cart-game .leaderboard table thead th:not(.username-heading)
{
	padding: 0;
}


.cart-game .settings-board ul.tabs li a:first-child
{
	padding-left: 20px;
}

.cart-game .settings-board ul.tabs li a:last-child
{
	padding-right: 20px;
}

.cart-game .settings-board ul.tabs li a:not(:first-child):not(:last-child)
{
	padding: 0 10px;
}

.scoreboard .info-heading,
body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs a,
.cart-game .leaderboard table thead,
.cart-game .ui-pane-container .panes h2
{
	text-transform: uppercase;
	text-align: center;
	color: #4AACCE;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.1;
/*	text-shadow: 1px 1px 0 #222, -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222;*/
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #222;
	text-stroke-width: 1px;
	text-stroke-color: #222;
	
	text-decoration: none;
	
}


.cart-game .ui-pane-container .panes h2
{
	font-size: 24px;
}


/*.cart-game .leaderboard table thead
{
	text-align: left;
}*/





.scoreboard .info-heading
{
	margin-top: .5em;
	margin-bottom: .3em;
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs
{
	list-style-type: none;
	padding: 0;
	margin: 0 -13px;
	display: flex;
	width: calc(100% + 26px);
	transition: .15s all;
	transform: translateY(200%);
	opacity: 0;
	height: auto !important;
	max-height: 0 !important;
}

body .cart-game.cart-game-2.ui-display > .game-container > .messages,
body .cart-game.cart-game-2.ui-display > .game-container > .messages .you-did-it
{
	opacity: 0 !important;
	pointer-events: none !important;
}

body .cart-game.cart-game-2.ui-display.title-ui-display.title-animation-done .ui-pane-container .settings-board .tabs
{
	transform: translateY(0);
	opacity: 1;
	transition: .3s all;
	max-height: 100px !important;
}

body .cart-game.cart-game-2.ui-display
{
	transition: .3s all;
}


body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li
{
	border-left: 4px solid #222;
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 50px;
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li:first-child
{
	border-left: 0 none transparent;
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li:last-child
{
	
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li:first-child a
{
	border-radius: 15px 0 0 15px;
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li:last-child a
{
	border-radius: 0 15px 15px 0;
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li a
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li a:hover
{
	background-color: rgba(200,200,200,.5);
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li a:active
{
	background-color: rgba(200,200,200,.5);
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs li.is-selected a
{
	background-color: rgba(200,200,200,.8);
}

.avatar-selector
{
	display: flex;
	/*overflow-x: scroll;
	overflow-y: hidden;*/
	flex-wrap: wrap;
/*	align-items: flex-start;*/
	justify-content: center;
}

.avatar-selector .avatar
{
/*	flex: 1;*/
	display: block;
	padding: .5%;
	margin: .5%;
	height: 120px;
	cursor: pointer;
	min-width: 120px;
	width: 23%;
	position: relative;
}

.avatar-selector .avatar:before
{
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
	min-width: 130px;
	min-height: 130px;
	padding-bottom: 50%;
	border-radius: 50%;
	background: #eee;
	border: 4px solid #222;
	opacity: 0;
	transform: scale(0);
	transition: .2s all;
}

.avatar-selector .avatar.is-selected:before
{
	opacity: 1;
	transform: scale(1);
}



.scoreboard
{
	position: absolute;
	top: 100px;
	right: 30px;
	z-index: 2300;
	pointer-events: none;
}

.scoreboard .info-display
{
	background-color: #222;
	overflow: hidden;
	border: 2px inset #eee;
	position: relative;
	
}

.cart-game .leaderboard table td
{
	background-color: #222;
	overflow: hidden;
	position: relative;
}


.scoreboard .info-display:after,
.cart-game .leaderboard table td:after,
.leaderboard table tbody:empty:after
{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 1px,  transparent 2px,  transparent 3px);
}




.scoreboard .info-display .info
{
	display: block;
	transform-origin: center;
}


.scoreboard .info-display .info,
.cart-game .leaderboard table tbody tr,
.leaderboard table tbody:empty
{
	transition: .1s all;
	transform: scale(1);
	
/*	font-weight: bold;*/
	color: var(--yellow);
	
	font-family: 'Share Tech Mono', monospace;
	
/*	letter-spacing: 3px;*/
	font-size: 32px;
	line-height: 1.1;
	text-shadow: var(--yellow-glow);
	text-align: center;
}



.cart-game .leaderboard table tbody tr
{
	font-size: 24px;
	background: #222;
}


/*.cart-game .leaderboard table tbody tr.highlight-score,*/
.cart-game .leaderboard table tbody tr.highlight-score td,
.cart-game .leaderboard table tbody tr.highlight-score td.with-color-yellow,
.cart-game .leaderboard table tbody tr.highlight-score .time span
{
	background: var(--yellow) !important;
	color: #222;
	text-shadow: var(--black-glow);
}


.cart-game .leaderboard .username .name
{
	display: flex;
	flex-direction: column;
	justify-content: center;
}



#w4hs-icg-timer-digits .hidden
{
	display: none;
}

#w4hs-icg-timer-digits .hours
{
	color: var(--red);
	text-shadow: var(--red-glow);
/*	display: inline !important;*/
}


#w4hs-icg-timer-digits .milliseconds
{
	color: var(--orange);
}

.scoreboard .info-display.mini .info
{
	font-size: 22px;
}

.info-display .info.bump
{
/*	transform: scale(1.2);*/
	

	-webkit-animation-duration: .6s;
	animation-duration: .6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: flicker-drew;
	animation-name: flicker-drew;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.scoreboard .info-display .info.high-score
{
	font-size: 26px;
}

.scoreboard .info-display .info.high-score small
{
	font-size: 16px;
}


.scoreboard .info-display .info.high-score .time small
{
	color: var(--orange);
}

.scoreboard .high-score .points
{
	color: var(--green);
	text-shadow: var(--green-glow);
}

#w4hs-icg-score .points-added
{
	position: absolute;
	right: 20%;
	top: 10%;
	opacity: 0;
	transform: translateY(-1.2em);
	transition: .1s all .1s;
	display: block;
	font-size: 22px;
	color: rgb(88,166,24);
	font-family: 'Share Tech Mono', monospace;
	text-shadow: 0 0 3px rgba(88,166,24,.75), 0 0 15px rgba(88,166,24,.25);
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs
{
	
}



body .cart-game.cart-game-2 .ui-pane-container
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5000;
	transition: .3s all 1.5s;
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	
	user-select: auto !important;
	-webkit-tap-highlight-color: black !important;
}

body .cart-game.cart-game-2 .game-container > div:not(.ui-pane-container):not(.lottie-background)
{
	transition: 1s all 1s;
}


body .cart-game.cart-game-2.ui-display .game-container > div:not(.ui-pane-container):not(.lottie-background):not(.w4hs-user-menu)
{
	filter: blur(20px);
}

body .cart-game.cart-game-2 .game-container > div.scoreboard
{
	transition: 3s transform, 3s opacity;
	transform: rotateY(0);
}



body .cart-game.cart-game-2.ui-display .game-container > div.scoreboard,
body .cart-game.cart-game-2.initial-loading .game-container > div.scoreboard
{
	transform: rotateY(60deg);
	opacity: 0;
}

body .cart-game.cart-game-2:not(.ui-display):not(.initial-loading) .game-container > div.scoreboard
{
	opacity: 1 !important;
}

body .cart-game.cart-game-2 .mascot-container
{
	opacity: 1;
	transition: .3s all;
}



body .cart-game.cart-game-2.ui-display .mascot-container
{
	opacity: 0;
}


body .cart-game.cart-game-2 .game-container > div.items-container
{
/*	transform: scale(1) translateY(0);*/
	transition: 2s transform, 1s filter 1s;
}


body .cart-game.cart-game-2.ui-display .game-container > div.items-container
{
	transform: scale(0) translateY(-2000px);
}


body .cart-game.cart-game-2 .game-container > div.buckets
{
	transform: scale(1) translateY(0);
	opacity: 1;
	transition: 5s transform, 1s filter 1s, 2s opacity 3s;
}

body .cart-game.cart-game-2.ui-display .game-container > div.buckets
{
	transform: scale(0) translateY(-150px);
	opacity: 0;
}


body .cart-game.cart-game-2.ui-display .ui-pane-container
{
	opacity: 1 !important;
	transform: translateY(0);
}


body .cart-game.cart-game-2 .ui-pane-container .panes > div
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: .2s all;
	transform: translateY(-100%);
}

body .cart-game.cart-game-2 .ui-pane-container .panes > div.is-selected
{
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

body .cart-game.cart-game-2 .ui-pane-container .panes .title-screen
{
	display: flex;
	flex-direction: column;
	height: 100%;
}

body .cart-game.cart-game-2 .ui-pane-container .panes .title-screen .whitelabel-logo
{
	width: 200px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	pointer-events: none;
}

body .cart-game.cart-game-2 .ui-pane-container .panes .title-screen .credit-text
{
	color: white;
	margin-top: 10px;
	text-shadow: 0 0 0.25em rgba(0,0,0, .7);
	user-select: none;
}

@media screen and (max-width: 900px)
{
	body .cart-game.cart-game-2 .ui-pane-container .panes .title-screen .whitelabel-logo
	{
		width: 100px;
	}
}


body .cart-game.cart-game-2 .ui-pane-container .panes .title-screen .w4hs-lottie-animation-outer
{
	
	flex: 1;
	margin-top: -30px;
	max-height: 100%;

}

body .cart-game.cart-game-2 .ui-pane-container .panes .title-screen .w4hs-lottie-animation-outer svg
{
	position: absolute;
}

body .cart-game.cart-game-2 .ui-pane-container .panes .title-screen .start-button-container
{
	text-align: center;
	margin-top: -10px;
	padding-bottom: 10px;
	
	transform: translateY(-100%);
	opacity: 0;
	
	transition: .3s;
}

body .cart-game.cart-game-2.title-animation-done .ui-pane-container .panes .title-screen.is-selected .start-button-container
{
	transform: translateY(0);
	opacity: 1;
	transition: .3s all;
}



@keyframes TransitioningBackground {
  0% {
    background-position: 1% 0%;
  }
  50% {
    background-position: 99% 100%;
  }
  100% {
    background-position: 1% 0%;
  }
}

.shiny-button,
a.shiny-button,
.cart-game a.shiny-button
{
  font-size: 1rem;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: 60px;
  border-radius: 20px;
  border: 4px solid white;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(270deg, #54bf67, #2b7348);
  background-size: 400% 400%;
  animation: TransitioningBackground 10s ease infinite;
  transition: 0.3s;
  letter-spacing: .5px;
}

.shiny-button:before
{
	content: '';
	display: block;
	position: absolute;
	background: rgba(255, 255, 255, 0.5);
	width: 60px;
	height: 100%;
	top: 0;
	filter: blur(30px);
	transform: translateX(-100px) skewX(-15deg);
}

.shiny-button:after
{
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  width: 30px;
  height: 100%;
  top: 0;
  filter: blur(5px);
  transform: translateX(-100px) skewX(-15deg);
}

.shiny-button:hover
{
  background-image: linear-gradient(to left, var(--green), var(--cyan));
  transform: scale(1.15);
  cursor: pointer;
  color: white;
}

.shiny-button:active
{
  background-image: linear-gradient(to left, var(--green), var(--cyan));
  transform: scale(1.25);
  cursor: pointer;
  color: white;
}

.shiny-button:hover:before,
.shiny-button:hover:after {
  transform: translateX(300px) skewX(-15deg);
  transition: 0.7s;
}





body .cart-game.cart-game-2 .ui-pane-container .settings-board
{
	position: absolute;
	
	/*height: calc(100% - 60px);*/
	padding: 30px 30px 15px;
	width: 100%;
	height: 100%;
	
	
	/*top: 4vw;
	right: 12vw;
	bottom: 6vw;
	left: 12vw;*/
/*	overflow-y: auto;*/
/*	overflow-x: hidden;*/
	display: flex;
	flex-direction: column;
/*	padding: 20px 20px 0;*/
}

.ui-pane-container .panes
{
	flex: 1;
	position: relative;
}

body .cart-game.cart-game-2.ui-display .ui-pane-container .settings-board .tabs
{
	pointer-events: auto;
}



.w4hs-icg-score-container,
body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs,
body .cart-game.cart-game-2 .ui-pane-container .panes > div.leaderboard
{
	height: auto;
	min-height: 100px;
	
	border: 4px solid #222;
	
	
	
/*	overflow: hidden;*/
	
	background-color: white;
	border-radius: 20px;
	box-shadow: 7px 7px 0 #4AACCE inset, -7px -7px 0 #4AACCE inset, 7px -7px 0 #4AACCE inset, -7px 7px 0 #4AACCE inset;
}


body .cart-game.cart-game-2 .ui-pane-container .panes > div.leaderboard
{
	padding: 20px 20px;
}

body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs
{
	min-height: 0;
}




.w4hs-icg-score-container
{
	padding: 0 20px 20px;
	width: 250px;
	overflow-y: visible !important;
	position: relative;
	margin: 0 40px;
}


.w4hs-icg-score-container .control-tabs
{
	position: absolute;
	right: calc(100% + 4px);
	top: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: auto;
}


.w4hs-icg-score-container .control-tabs ul
{
	height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	
	display: flex;
	
	flex-direction: column;
	justify-content: center;
	
}

.w4hs-icg-score-container .control-tabs ul li,
.w4hs-icg-score-container .control-tabs ul li div.gtranslate_wrapper
{
	/* margin: 7px 0; */
	
	position: relative;
	display: flex;
	flex-direction: row-reverse;
}

.w4hs-icg-score-container .control-tabs ul li a,
.gtranslate_wrapper > a
{
	background: var(--green);
	color: white;
	border: 4px solid #222;
	border-right: 0;
	width: 60px;
	height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transform: translateX(7px);
	transition: .2s all;
	text-decoration: none;
	
	border-radius: 15px 0 0 15px;
}

.gtranslate_wrapper > a 
{
	margin-right: -4px;
}

/*.cart-game .w4hs-icg-score-container .control-tabs ul li #w4hs-icg-pause-menu-button
{
	transform: translateX(200%);
	opacity: 0;
}

.cart-game .w4hs-icg-score-container .control-tabs ul li #w4hs-icg-pause-menu-button
{
	transform: translateX(7px);
	opacity: 1;
}*/





.w4hs-icg-score-container .control-tabs ul li.expanded a:not(:first-child),
.w4hs-icg-score-container .control-tabs ul li.expanded a:not(:first-child):hover
{
	transform: translateX(0);
}

.w4hs-icg-score-container .control-tabs ul li a:not(:first-child),
li.language:not(.expanded) .gtranslate_wrapper > a
{
	margin-right: -4px;
	position: relative;
	z-index: 0;
	transform: translateX(200%);
	opacity: 0;
	pointer-events: none;
}

li.language.expanded > a
{
	border-radius: 0 !important;
}


.w4hs-icg-score-container .control-tabs ul li.expanded a
{
	transform: translateX(7px) !important;
}

.w4hs-icg-score-container .control-tabs ul li.expanded a:not(:first-child)
{
	opacity: 1;
	pointer-events: auto;
}

.w4hs-icg-score-container .control-tabs ul li.expanded a:not(:last-of-type)
{
	border-radius: 0;
}

.w4hs-icg-score-container .control-tabs ul li.expanded a:last-of-type
{
	border-radius: 15px 0 0 15px;
}

.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-reset-control.enabled,
.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-exit-control.enabled
{
	border-right: 4px solid #222;
}


.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-sound-control:not(.enabled),
.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-exit-control:not(.enabled),
.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-reset-control.enabled + #w4hs-icg-reset-confirm-control
{
	border-radius: 15px 0 0 15px;
}


.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-sound-control + a,
.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-reset-control + a,
.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-exit-control + a
{
	transform: translateX(200%) !important;
	opacity: 0;
	pointer-events: none;
}




.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-sound-control.enabled + a,
.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-reset-control.enabled + a,
.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-exit-control.enabled + a
{
	transform: translateX(7px) !important;
	opacity: 1;
	pointer-events: auto;
}

.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-reset-confirm-control + a
{
	transform: translateX( calc(100% + 7px) ) !important;
}

.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-reset-confirm-control.w4hs-hide-lite + a
{
	transform: translateX( 200% ) !important;
}

.w4hs-icg-score-container .control-tabs ul li.expanded #w4hs-icg-exit-control.enabled + a
{
	transform: translateX( 200% ) !important;
}


#w4hs-icg-music-control .w4hs-glyph
{
	position: relative;
}

#w4hs-icg-music-control,
#w4hs-icg-sound-control
{
	background: #666;
}



#w4hs-icg-music-control:hover,
#w4hs-icg-music-control:active,
#w4hs-icg-sound-control:hover,
#w4hs-icg-sound-control:active
{
	background: #444;
}

#w4hs-icg-music-control.enabled,
#w4hs-icg-sound-control.enabled
{
	background-color: var(--green);
}

#w4hs-icg-music-control.enabled:hover,
#w4hs-icg-music-control.enabled:active,
#w4hs-icg-sound-control.enabled:hover,
#w4hs-icg-sound-control.enabled:active
{
	background-color: var(--green-dark);
}

#w4hs-icg-reset-confirm-control,
#w4hs-icg-exit-confirm-control
{
	background: var(--red);
}

#w4hs-icg-reset-confirm-control:hover,
#w4hs-icg-reset-confirm-control:active,
#w4hs-icg-exit-confirm-control:hover,
#w4hs-icg-exit-confirm-control:active
{
	background-color: var(--red-dark);
}




#w4hs-icg-music-control .w4hs-glyph:after,
#w4hs-icg-sound-control .dashicons:after
{
	content: '';
	position: absolute;
	height: 0;
	border-bottom: 3px solid red;
	top: 50%;
	left: -10px;
	right: -10px;
	transform: rotate(-45deg);
	
	transition: .2s all;
	opacity: 1;
}

#w4hs-icg-music-control.enabled .w4hs-glyph:after,
#w4hs-icg-sound-control.enabled .dashicons:after
{
	opacity: 0;
	
}


/*.w4hs-icg-score-container .control-tabs ul li a:not(:first-child)
{
	position: absolute;
	top: 0;
	right: calc(100% - 10px);
}*/

.w4hs-icg-score-container .control-tabs ul li a .dashicons,
.w4hs-icg-score-container .control-tabs ul li a .w4hs-glyph
{
	padding-right: 10px;
	transform: scale(1);
	transition: .2s all;
	display: inline-block;
	
	width: 24px;
	height: 24px;
	font-size: 24px;
	
/*	-webkit-text-stroke-width: .5px;
	-webkit-text-stroke-color: var(--blue);
	text-stroke-width: .5px;
	text-stroke-color: var(--blue);*/
	
}

.w4hs-icg-score-container .control-tabs ul li a .w4hs-glyph
{
	margin-bottom: 3px;
}


.w4hs-icg-score-container .control-tabs ul li a:hover
{
	transform: translateX(2.5px);
	background-color: var(--green-dark);
}

.w4hs-icg-score-container .control-tabs ul li.expanded a:hover
{
	transform: translateX(0);
}


.w4hs-icg-score-container .control-tabs ul li a:hover .dashicons,
.w4hs-icg-score-container .control-tabs ul li a:hover .w4hs-glyph
{
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: swing;
	animation-name: swing;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/*.w4hs-icg-score-container .control-tabs ul li a#w4hs-icg-pause-menu-button
{
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: background-flash-green;
	animation-name: background-flash-green;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.w4hs-icg-score-container .control-tabs ul li a#w4hs-icg-pause-menu-button:hover
{
	-webkit-animation-name: none;
	animation-name: none;
}*/

.cart-game.paused .w4hs-icg-score-container .control-tabs ul li a .dashicons-controls-play
{
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: swing-pulsate;
	animation-name: swing-pulsate;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


.w4hs-icg-score-container .control-tabs ul li a:active
{
/*	transform: translateX(0);*/
	background-color: var(--green-dark);
}

.w4hs-icg-score-container .control-tabs ul li a:active .dashicons,
.w4hs-icg-score-container .control-tabs ul li a:active .w4hs-glyph
{
	
}


.w4hs-icg-score-container .post
{
	width: 24px;
	border: 4px solid #222;
	background-color: #4AACCE;
	position: absolute;
	top: 10%;
	right: calc(50% - 25px);
	bottom: calc(-66vh + 100%);
	left: calc(50% - 7px);
	z-index: -2;
}


.w4hs-icg-score-container:after
{
	content: '';
	position: absolute;
	z-index: -1;
	background-color: #4AACCE;
	border: 4px solid #222;
	border-radius: 20px 40px 20px 40px;
	top: -3px;
	right: -18px;
	bottom: -14px;
	left: -3px;
}



#w4hs-icg-score .points-added.visible
{
	opacity: 1;
	transform: translateY(0);
	transition: .1s all;
	
}

#w4hs-icg-score .points-added.dropoff
{
	opacity: 0;
	transform: translateY(1.2em);
	transition: .5s all .2s;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: flicker-drew-nowhite;
	animation-name: flicker-drew-nowhite;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

body .entry-content
{
	margin-top: 0;
}

body
{
	overflow: hidden;
}


/* CART GAME */
/* line 567, sass/elements/_elements.scss */
body .cart-game.cart-game-2 {
  width: 100%;
  overflow: hidden;
/*  background-image: url('images/back.svg');
  background-size: cover;
  background-position: center;*/
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

body .cart-game.cart-game-2 .game-container
{
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

/* line 573, sass/elements/_elements.scss */
.hidden-desktop.alert.alert-info {
  display: none;
}

/* line 578, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .controls {
/*  overflow: hidden;*/
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: flex-start;
  position: absolute;
}



/* line 581, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .controls .btn {
  float: right;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .5px;
  margin-bottom: 12px;
  padding: 3px 8px;
  border-radius: 3px;
  background-color: #ffe80a;
  color: #222;
  cursor: pointer;
  transition: .2s all;
  position: relative;
  display: inline-block;
  text-decoration: none;
}


body .cart-game.cart-game-2 .controls #btn_start_animation
{
	display: none;
}


body .cart-game.cart-game-2 .controls.stopped #btn_start_animation
{
	display: inline-block;
}

body .cart-game.cart-game-2 .controls.stopped #btn_stop_animation
{
	display: none;
}


/* line 594, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .controls a#btn_reset:hover {
  color: white;
  background-color: #f00;
}
/* line 600, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .controls a#btn_reset:active {
  color: white;
  background-color: #d00;
}

/* line 606, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets {
  position: relative;
  z-index: 3500;
  align-self: flex-end;
/*  position: absolute;*/
  clear: both;
  font-size: 0;
  display: flex;
  height: 45%;
  width: 90%;
  margin: 0 0 0 auto;
/*  right: 0;
  bottom: 0;
  left: 0;*/
}


body .cart-game.cart-game-2 .buckets .bucket .points-bump-container
{
	pointer-events: none;
	
	position: absolute;
	bottom: calc(100% + 30px);
	left: 0;
	right: 0;
	z-index: 9000;
	
	-webkit-animation-duration: 4s;
	animation-duration: 4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: shake;
	animation-name: shake;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: paused;
}

body .cart-game.cart-game-2 .buckets .bucket .points-bump-container.visible
{
	animation-play-state: running;
}


body .cart-game.cart-game-2 .buckets .bucket .points-bump
{
	position: static;
	text-align: center;
	opacity: 0;
	transform: translateY(100%) scale(.7) rotate(90deg);
	transition: .07s all;
	
	font-size: 80px;
	font-weight: bold;
	color: var(--green);
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: white;
	text-stroke-width: 3px;
	text-stroke-color: white;
	line-height: 1;
}

body .cart-game.cart-game-2 .buckets .bucket .points-bump-message
{
	font-size: 30px;
	-webkit-text-stroke-width: 0;
	-webkit-text-stroke-color: white;
	text-stroke-width: 0;
	text-stroke-color: white;
	color: white;
	text-shadow: 0 0 2px rgba(0,0,0,.7);
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: shake;
	animation-name: shake;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: paused;

}

body .cart-game.cart-game-2 .buckets .bucket .points-bump.visible .points-bump-message
{
	animation-play-state: running;
}


body .cart-game.cart-game-2 .buckets .bucket .points-bump.visible
{
	opacity: .9;
	transform: translateY(0) scale(1) rotate(10deg);
	transition: .1s opacity, .3s transform;
}


@media screen and (max-width: 600px)
{
	body .cart-game.cart-game-2 .buckets
	{
		width: 100%;
		height: 55%;
	}
}

body .cart-game.cart-game-2 .mascot-container 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 35vw;
	max-height: 35vh;
	z-index: 2500;
	pointer-events: none;
	
}

.avatar-reactions
{
	position: relative;
	opacity: 0;
	transition: .3s all;
}

.avatar-reactions:before
{
	content: '';
	position: absolute;
	background-color: rgba(0,150,255, .8);
	border-radius: 50%;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: calc(100% - 20px);
	transform: scale(0);
	transition: 0s all .5s;
	border: 10px solid white;
}


.avatar-reactions.visible
{
	opacity: 1;
	transition: .5s all;
}

.avatar-reactions.visible:before
{
	transform: scale(.75);
	transition: .3s all;
}


body .cart-game.cart-game-2 .messages 
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 5001;
	pointer-events: none;
}

body .cart-game.cart-game-2 .messages .you-did-it.visible
{
	pointer-events: auto;
}


/* line 610, sass/elements/_elements.scss */

body .cart-game.cart-game-2 .messages .pregame-start-message,
body .cart-game.cart-game-2 .messages .success,
body .cart-game.cart-game-2 .messages .you-did-it,
body .cart-game.cart-game-2 .messages .fail {
  display: none;
  position: relative;
  background-color: white;
  border-radius: 0;
/*  top: auto;*/
/*  left: calc(50% - 10vw);*/
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  pointer-events: none;
}

body .cart-game.cart-game-2 .messages .you-did-it h3,
body .cart-game.cart-game-2 .messages .you-did-it h4
{
	margin-bottom: 0;
}

body .cart-game.cart-game-2 .messages .you-did-it .close-button
{
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
	padding: 5px;
	
}

.cart-game .you-did-it .share-link
{
	position: relative;
	display: inline-block;
}


.cart-game .you-did-it .share-link:before
{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12.5px 15px 12.5px;
    border-color: transparent transparent #00aeef transparent;
    position: absolute;
    top: 100%;
    left: calc(50% - 12.5px);
	opacity: 0;
	transition: .2s all;
	pointer-events: none;
}


.cart-game .you-did-it .share-link:after {
  content: '✓ Link Copied';
  position: absolute;
  top: calc(100% + 15px);
  left: -40px;
  right: -40px;
  background-color: #00aeef;
  color: white;
  font-size: 14px;
  line-height: 1;
  padding: 5px;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: .2s all;
  text-align: center;
}


.cart-game .you-did-it .share-link.copy-success:before,
.cart-game .you-did-it .share-link.copy-success:after
{
	opacity: 1;
}

/*body .cart-game.cart-game-2 .messages .you-did-it .close-button:after
{
	position: absolute;
	padding-top: 50%;
	height: 100%;
}*/

body .cart-game.cart-game-2 .messages .pregame-start-message
{
	font-size: 18px;
	width: 300px;
	opacity: 0;
	display: none;
	transition: .2s opacity;
}

body .cart-game.cart-game-2:not(.game-in-progress) .messages .pregame-start-message
{
	display: block;
}


body .cart-game.cart-game-2:not(.game-in-progress) .messages .pregame-start-message.visible
{
	opacity: 1;
}

.game-not-in-progress
{
	opacity: 1;
	transition: .4s all;
}

body .cart-game.cart-game-2.game-in-progress .game-not-in-progress
{
	opacity: 0;
	pointer-events: none;
}

body .cart-game.cart-game-2.game-in-progress .w4hs-user-menu .username .w4hs-register-link
{
	pointer-events: none;
}

/* line 627, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .messages .success,
body .cart-game.cart-game-2 .messages .you-did-it
{
  /* color: #64B149; */ 
  /* border: 2px solid #64B149; */
  border: 0 none transparent;
  color: white;
  background-color: var(--green);
}

body .cart-game.cart-game-2 .messages .you-did-it
{
	display: block;
	opacity: 0;
	transition: .3s all;
	transform: scale(0.7);
	border: 4px solid white;
	border-radius: 20px;
}

body .cart-game.cart-game-2 .messages .you-did-it a
{
	color: white;
}

body .cart-game.cart-game-2 .messages .you-did-it a:hover
{
	color: var(--yellow);
}

body .cart-game.cart-game-2 .messages .you-did-it a:active
{
	color: var(--cyan);
}

.w4hs-icon-link
{
	text-decoration: none;
}


body .cart-game.cart-game-2 .messages .you-did-it.visible
{
	opacity: 1;
	transform: scale(1);
	pointer-events: auto !important;
}


/* line 631, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .messages .fail {
  /* color: #C00;
  border: 2px solid #C00; */
  border: 0 none transparent;
  color: white;
  background-color: var(--red);
}

/* line 635, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket {
  width: 20%;
/*  margin-right: .3333333%;*/
  height: 100%;
  padding-bottom: 8px;
  display: inline-block;
  display: inline-flex;
  flex-direction: column;
  float: none;
  flex: 1;
  position: relative !important;
  
  
  
}

body .cart-game.cart-game-2 .buckets .bucket .w4hs-dropzone
{
	position: relative;
}


body .cart-game.cart-game-2 .buckets .bucket .w4hs-dropzone .message h3
{
	font-weight: normal;
	text-transform: uppercase;
	margin: 0 0 .3em;
}

body .cart-game.cart-game-2 .buckets .bucket .w4hs-dropzone .message
{
	z-index: 3900;
	position: fixed;
	bottom: 100%;
	left: 0;
	width: 300px;
	background: var(--red);
	color: white;
	font-size: 18px;
	
	opacity: 0;
	transform: translateY(10%) scale(.8);
	transform-origin: center bottom;
	transition: .3s all;
	pointer-events: none;
	padding: 25px;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

body .cart-game.cart-game-2 .buckets .bucket .w4hs-dropzone .message:after
{
    content: '';
	position: absolute;
    border-style: solid;
    border-width: 20px 20px 0;
	border-color: var(--red) transparent;
	display: block;
    width: 0;
    z-index: 1;
	
	bottom: -20px;
	left: calc(50% - .5em);
}


body .cart-game.cart-game-2 .buckets .bucket.display-message .w4hs-dropzone .message
{
	transform: translateY(0) scale(1);
	opacity: 1;
	transition: .2s all;
}



@media screen and (max-width: 550px)
{
	body .cart-game.cart-game-2 .buckets .bucket .w4hs-dropzone .message:after
	{
		display: none;
	}
	
	body .cart-game.cart-game-2 .buckets .bucket:nth-child(2) .w4hs-dropzone .message
	{
		left: -20vw;
		right: auto;
		
	}


	body .cart-game.cart-game-2 .buckets .bucket:nth-child(3) .w4hs-dropzone .message
	{
		left: -40vw;
		right: auto;
	}

	body .cart-game.cart-game-2 .buckets .bucket:last-child .w4hs-dropzone .message
	{
		left: auto;
		right: 0;
	}

}


/* line 641, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket h2 {
  text-align: center;
  /*font-size: 22px;*/
  font-size: 0;
/*  line-height: 1em;
*/  font-weight: 200;
  color: white;
/*  background-color: #222;*/
  min-height: 30px;
  max-width: 20vw;
  margin: 0 auto 0 0;
  position: absolute;
  height: 55px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2999;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
/*  mix-blend-mode: luminosity;*/
  /*display: flex;
  flex-direction: column;
  justify-content: center;*/
/*  background-color: transparent !important;
*/  
  
	touch-action: none;
	
	transition: .2s filter;
	

	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: shake;
	animation-name: shake;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: paused;
}

/*body .cart-game.cart-game-2 .buckets .bucket:hover h2,*/
body .cart-game.cart-game-2 .buckets .bucket.is-dropTarget h2
{
	animation-play-state: running;
	filter: drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff);
	
}

body .cart-game.cart-game-2 .buckets .bucket.bucket-fail h2
{
	animation-play-state: running;
	filter: drop-shadow(2px 2px 0 var(--red)) drop-shadow(-2px -2px 0 var(--red)) drop-shadow(2px -2px 0 var(--red)) drop-shadow(-2px 2px 0 var(--red));
}


body .cart-game.cart-game-2 .buckets .bucket.bucket-success h2
{
	filter: drop-shadow(2px 2px 0 var(--green)) drop-shadow(-2px -2px 0 var(--green)) drop-shadow(2px -2px 0 var(--green)) drop-shadow(-2px 2px 0 var(--green));
}

body .cart-game.cart-game-2 .buckets .bucket
{
	transition: .2s all;
	transform: scale(1);
	transform-origin: bottom;
}

body .cart-game.cart-game-2 .buckets .bucket.is-dropTarget
{
	transform: scale(1.05);
}


/* line 651, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket h2 span {
  opacity: 0.9;
}

/* line 654, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket.bucket-recycle h2 {
  /*background-color: #0065b8;*/
  background-image: url('images/recycle-label.svg');
}

/* line 657, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket.bucket-recycle .w4hs-dropzone {
  background: transparent url(images/blue-menifee-v2.png) center center no-repeat scroll;
}

/* line 660, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket.bucket-compost {
  margin-right: 0;
}

/* line 663, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket.bucket-compost h2 {
/*  background-color: #58a618;*/
  background-image: url('images/organics-label.svg');
}

/* line 666, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket.bucket-compost .w4hs-dropzone {
  background: transparent url(images/green-menifee-v2.png) center center no-repeat scroll;
}

/* line 669, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket.bucket-garbage .w4hs-dropzone {
  background: transparent url(images/black-menifee-v2.png) center center no-repeat scroll;
  background-size: contain;
}

body .cart-game.cart-game-2 .buckets .bucket.bucket-hhw
{
	width: 40%;
	flex: 2;
}


body .cart-game.cart-game-2 .buckets .bucket.bucket-hhw h2 {
  /* background-image: url('images/label-hhw-drop-off.png'); */
  display: none;
}

body .cart-game.cart-game-2 .buckets .bucket.bucket-garbage h2 {
  background-image: url('images/trash-label.svg');
}


body .cart-game.cart-game-2 .buckets .bucket:nth-child(2) h2
{
	-webkit-animation-delay: -10.3s !important;
	animation-delay: -10.3s !important;
}

body .cart-game.cart-game-2 .buckets .bucket:nth-child(3) h2
{
	-webkit-animation-delay: -3.8s !important;
	animation-delay: -3.8s !important;
}

body .cart-game.cart-game-2 .buckets .bucket:nth-child(4) h2
{
	 -webkit-animation-delay: -7.6s !important;
	 animation-delay: -7.6s !important;
}





/* line 672, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .buckets .bucket .w4hs-dropzone {
  height: 100%;
  /*background-color: DarkOliveGreen ;*/
  width: 100%;
  /*margin: 12px auto 24px auto;*/
  margin: 0 auto;
  background-size: contain !important;
  z-index: 1002;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.3) );
  transition: .15s all linear;
  transform: rotate(0deg);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;

}

body .cart-game.cart-game-2 .buckets .bucket.bucket-fail .w4hs-dropzone
{
	transform: rotate(1.5deg);
}

body .cart-game.cart-game-2 .buckets .bucket.bucket-success .w4hs-dropzone
{
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	
	/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: shake;
	animation-name: shake;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}




body .cart-game.cart-game-2 .buckets .bucket.bucket-hhw .w4hs-dropzone {
  background: transparent url(images/hhw_car-menifee.svg) center center no-repeat scroll;
/*  width: 100%;*/
  background-position: left center;
}

/*.login-forgot
{
	color: #222;
}*/


body .cart-game.cart-game-2 .items-container
{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
}

body .cart-game.cart-game-2.needs-reset .items-container,
body .cart-game.cart-game-2.needs-reset .items-container .items
{
	pointer-events: none;
	opacity: 0;
}

body .cart-game.cart-game-2:not(.initial-loading):not(.ui-display) .items-container
{
	opacity: 1 !important;
}

body .cart-game.cart-game-2 .items-container .notice
{
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 5000;
	display: flex;
	transition: .2s;
}

body .cart-game.cart-game-2 .items-container .notice .inner
{
	margin: 0 auto;
	max-width: 550px;
	padding: 10px;
	background-color: rgba(255,255,255,.5);
}

body .cart-game.cart-game-2 .items-container .notice .inner h3
{
	margin: 0;
}


body .cart-game.cart-game-2.paused .items-container
{
	pointer-events: none;
}

body .cart-game.cart-game-2.paused .items-container .notice
{
	opacity: 1 !important;
	
}


body .cart-game.cart-game-2.paused .control-tabs .pause a
{
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: border-color-flash;
	animation-name: border-color-flash;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


body .cart-game.cart-game-2:not(.game-in-progress) .control-tabs .pause
{
	transform: translateX(53px);
}


/* line 679, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .items {
    width: 100%;
	text-align: center;
	height: 160px;
    margin: 0 auto;
	padding: 0 40px;
	overflow: hidden;
	font-size: 0;
	max-width: 800px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	transition: .4s all;
}

body .cart-game.cart-game-2.paused .items
{
	filter: blur(10px);
	pointer-events: none;
}



/*body .cart-game.cart-game-2 .items .item
{
	display: none;
	z-index: 100;
}*/

/*body .cart-game.cart-game-2 .items .item:nth-child(1),
body .cart-game.cart-game-2 .items .item:nth-child(2),
body .cart-game.cart-game-2 .items .item:nth-child(3),
body .cart-game.cart-game-2 .items .item:nth-child(4),
body .cart-game.cart-game-2 .items .item:nth-child(5)
{
	display: inline-block;
}*/

/* line 687, sass/elements/_elements.scss */
body .cart-game.cart-game-2 {
  /* Compost */
  /* Garbage */
  /* Recycle */
}

body .cart-game.cart-game-2 .placeholder
{
    /*width: 100px !important;*/
	margin-right: 3px;
	margin-left: 3px;
	/*padding-right: 3px;
	padding-left: 3px;*/
    height: 0 !important;
	background-color: transparent;
	display: inline-block;
	min-height: 100px;
	min-width: 100px;
}

/* line 689, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .item {
	cursor: grab;
	display: inline-block;
	float: none;
	width: 100px !important;
	margin: 6px 3px 60px 3px;
	height: 100px !important;
	min-height: 100px;
	min-width: 100px;
	/*background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;*/
	
	/* background: transparent url("images/cart_game_sprite.png") 0px 0px no-repeat scroll; */
	background: none !important;
	
	position: relative;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background-position: initial !important;
	z-index: 1000;
	touch-action: none;
	

	-webkit-animation-duration: 15s;
	animation-duration: 15s;
	/*-webkit-animation-fill-mode: both;
	animation-fill-mode: both;*/
/*	-webkit-transform-origin: top center;
	transform-origin: top center;*/
	-webkit-animation-name: swing;
	animation-name: swing;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	/*transition: .4s filter, .5s opacity, .1s top, .1s left, .3s transform;
	transform: scale(1);*/
	
	
}


body .cart-game.cart-game-2 .item > span.image
{
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-repeat: no-repeat;
	/* background: transparent url("images/cart_game_sprite.png") 0px 0px no-repeat scroll; */
	background-size: contain;
	transition: 0s all;
/*	transform: scale(0);*/
	filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff);
	opacity: 1;
	
}


body .cart-game.cart-game-2 .lottie-background
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}



body .cart-game.cart-game-2 .lottie-background .w4hs-lottie-animation-outer
{
	width: 100%;
	height: 100%;
}

body .cart-game.cart-game-2 .lottie-background .w4hs-lottie-animation-outer canvas
{
	object-fit: cover;
	object-position: center bottom;
}



body .cart-game.cart-game-2 .item:hover > span.image
{
	filter: drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff);
	transform: scale(1.03);
}

body .cart-game.cart-game-2 .item:active > span.image,
body .cart-game.cart-game-2 .item.is-dragging > span.image
{
	transform: scale(1.06);
}

body .cart-game.cart-game-2 .item:hover,
body .cart-game.cart-game-2 .item:active,
body .cart-game.cart-game-2 .item.is-dragging
{
	animation-play-state:paused;
	z-index: 4000 !important;	
}

body .cart-game.cart-game-2 .item:active,
body .cart-game.cart-game-2 .item.is-dragging
{
	cursor: grabbing;
}

body .cart-game.cart-game-2 .item > span.image,
body .cart-game.cart-game-2 .item.is-dragging > span.image,
body .cart-game.cart-game-2 .item:hover > span.image,
body .cart-game.cart-game-2 .item:active > span.image
{
	transition: .3s all, .1s filter;
	opacity: 1 !important;
}


body .cart-game.cart-game-2 .item.is-dropped-success > span.image,
body .cart-game.cart-game-2 .item.is-dropped-success.is-dragging > span.image,
body .cart-game.cart-game-2 .item.is-dropped-success:hover > span.image,
body .cart-game.cart-game-2 .item.is-dropped-success:active > span.image
{
	transform-origin: center bottom;
	transform: scale(0) rotate(180deg);
	opacity: .4 !important;
/*	position: absolute;
	top: -100px;
	left: calc(50% - 50px);*/
}

body .cart-game.cart-game-2 .item.is-dropped-failure > span.image,
body .cart-game.cart-game-2 .item.is-dropped-failure.is-dragging > span.image,
body .cart-game.cart-game-2 .item.is-dropped-failure:hover > span.image,
body .cart-game.cart-game-2 .item.is-dropped-failure:active > span.image
{
	transform: scale(1.1);
	position: static !important;
}


body .cart-game.cart-game-2 .item.beaming-up > span.image
{
	transform: translateY(-25vh);
	transition: .3s all, .1s filter;
	opacity: 0 !important;
	filter: drop-shadow(1px 1px 0 #f00) drop-shadow(-1px -1px 0 #f00) drop-shadow(1px -1px 0 #f00) drop-shadow(-1px 1px 0 #f00) !important;
}

body .cart-game.cart-game-2 .item.beaming-up,
body .cart-game.cart-game-2 .item.beamed-up
{
	position: fixed !important;
}


body .cart-game.cart-game-2 .item.beamed-up > span.image
{
	transform: translateY(0);
	transition: .3s all;
	opacity: 0 !important;
}


body .cart-game.cart-game-2 .item.is-dropped-in-zone
{
	display: inline-block;
	
	
	width: 100px !important;
	height: 100px !important;
	-webkit-animation: none !important;
	animation: none !important;
	/* opacity: 0; */
/*    transform: scale(.5);*/
}


body .cart-game.cart-game-2 .item:before,
body .cart-game.cart-game-2 .item:after
{
	filter:none !important;
}

body .cart-game.cart-game-2 .item.is-dropped-success:before,
body .cart-game.cart-game-2 .item.is-dropped-success:after,
body .cart-game.cart-game-2 .item.is-dropped-failure:before,
body .cart-game.cart-game-2 .item.is-dropped-failure:after,
body .cart-game.cart-game-2 .item.beaming-up:before,
body .cart-game.cart-game-2 .item.beaming-up:after,
body .cart-game.cart-game-2 .item.beamed-up:before,
body .cart-game.cart-game-2 .item.beamed-up:after
{
	opacity: 0 !important;
}


body .cart-game.cart-game-2 .item:first-child
{
	-webkit-animation-delay: -2.8s;
	animation-delay: -2.8s;
}


body .cart-game.cart-game-2 .item:nth-child(even)
{
	-webkit-animation-duration: 11.2s;
	animation-duration: 11.2s;
}

body .cart-game.cart-game-2 .item:nth-child(odd)
{
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

body .cart-game.cart-game-2 .item:nth-child(3n+3)
{
	 -webkit-animation-delay: -2.2s;
	 animation-delay: -2.2s;
}


/* line 699, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .item:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12.5px 15px 12.5px;
  border-color: transparent transparent #00aeef transparent;
  position: absolute;
  top: 100%;
  left: calc(50% - 12.5px);
  opacity: 0;
  pointer-events: none;
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
	     -moz-user-select: none; /* Old versions of Firefox */
	      -ms-user-select: none; /* Internet Explorer/Edge */
	          user-select: none; /* Non-prefixed version, currently
	                                supported by Chrome, Opera and Firefox */
  /* transition: .2s all; */
  z-index: 60;
}
/* line 716, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .item:after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 15px);
  left: -40px;
  right: -40px;
  background-color: #00aeef;
  color: white;
  font-size: 14px;
  line-height: 1;
  padding: 5px;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: .2s all;
  text-align: center;
}
/* line 735, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .item:hover:after,
body .cart-game.cart-game-2 .item:hover:before 
{
  opacity: 1;
}
/* line 741, sass/elements/_elements.scss */
body .cart-game.cart-game-2 .item:active:after, 
body .cart-game.cart-game-2 .item:active:before, 
body .cart-game.cart-game-2 .item.ui-draggable.is-dragging:after, 
body .cart-game.cart-game-2 .item.ui-draggable.is-dragging:before 
{
  opacity: 0;
}

.cart-game.cart-game-2 .item.ui-draggable.is-dragging
{
	z-index: 1001;
}


.cart-game.cart-game-2 .item.ui-draggable.is-dragging:after
{
	display: none;
}

.w4hs-indeterminate-progress-indicator
{
	position: absolute;
	z-index: 7000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
/*	background: rgba(150,150,150,.5);*/
	opacity: 0;
	transform: scale(1.2);
	pointer-events: none;
	transition: .3s all;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cart-game.initial-loading .w4hs-indeterminate-progress-indicator,
.w4hs-indeterminate-progress-indicator.visible
{
	pointer-events: auto;
	opacity: 1;
	transform: scale(1);
	cursor: progress;
}

.w4hs-spinner {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.w4hs-spinner div {
  transform-origin: 40px 40px;
  animation: w4hs-spinner 1.2s linear infinite;
}
.w4hs-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: var(--yellow);
  box-shadow: var(--yellow-glow);
}
.w4hs-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.w4hs-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.w4hs-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.w4hs-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.w4hs-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.w4hs-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.w4hs-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.w4hs-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.w4hs-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.w4hs-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.w4hs-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.w4hs-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

.w4hs-indeterminate-progress-indicator .w4hs-spinner
{
	animation-play-state: paused;
}

.cart-game.initial-loading .w4hs-indeterminate-progress-indicator .w4hs-spinner,
.w4hs-indeterminate-progress-indicator.visible .w4hs-spinner
{
	animation-play-state: running;
	cursor: progress;
}


.cart-game.initial-loading .w4hs-indeterminate-progress-indicator
{
	background-color: var(--cyan);
}


.cart-game.initial-loading #w4hs-panes-back-button
{
	opacity: 0;
}


@keyframes w4hs-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



@-webkit-keyframes background-flash-green
{
/* 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } */
1%, 100% { background-color: var(--green); }
50% { background-color: var(--green-dark); }
}

@keyframes background-flash-green
{
	1%, 100% { background-color: var(--green); }
	50% { background-color: var(--green-dark); }
}



@-webkit-keyframes swing
{
/* 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } */
20% { -webkit-transform: rotate(7deg); }
40% { -webkit-transform: rotate(-5deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}

@keyframes swing
{
	20% { transform: rotate(7deg); }
	40% { transform: rotate(-5deg); }
	60% { transform: rotate(5deg); }
	80% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

@-webkit-keyframes swing-pulsate
{
/* 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } */
20% { -webkit-transform: rotate(7deg)  scale(1); }
40% { -webkit-transform: rotate(-5deg) scale(1.2); }
60% { -webkit-transform: rotate(5deg)  scale(1.3); }
80% { -webkit-transform: rotate(-5deg) scale(0.9); }
100% { -webkit-transform: rotate(0deg) scale(1); }
}

@keyframes swing-pulsate
{
	20% { transform: rotate(7deg)  scale(1); }
	40% { transform: rotate(-5deg) scale(1.2); }
	60% { transform: rotate(5deg)  scale(1.3); }
	80% { transform: rotate(-5deg) scale(0.9); }
	100% { transform: rotate(0deg) scale(1); }
}


@-webkit-keyframes border-color-flash
{
/* 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } */
1,100% { border-color: #222; }
40% { border-color: white}
}

@keyframes border-color-flash
{
	1,100% { border-color: #222; }
	40% { border-color: white}
}


@-webkit-keyframes pulsate
{
/* 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } */
20% { -webkit-transform:  scale(1); }
40% { -webkit-transform:  scale(1.2); }
60% { -webkit-transform:  scale(1.3); }
80% { -webkit-transform:  scale(0.95); }
100% { -webkit-transform: scale(1); }
}

@keyframes pulsate
{
	20% { transform:  scale(1); }
	40% { transform:  scale(1.2); }
	60% { transform:  scale(1.3); }
	80% { transform:  scale(0.95); }
	100% { transform: scale(1); }
}

@-webkit-keyframes shake {
  0%,100% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
}


@keyframes shake {
  0%,100% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  
}

@-webkit-keyframes flicker-drew-nowhite
{
	0%, 100%
	{
		opacity: 1;
	}
	
	25%
	{
		opacity: .2;
	}
	
	80%
	{
		opacity: 1;
	}
}


@keyframes flicker-drew-nowhite
{
	0%, 100%
	{
		opacity: 1;
	}
	
	25%
	{
		opacity: .2;
	}
	
	80%
	{
		opacity: 1;
	}
}


@-webkit-keyframes flicker-drew
{
	0%, 100%
	{
		color: unset;
		opacity: 1;
	}
	
	25%
	{
		opacity: .2;
	}
	
	80%
	{
		color: white;
		opacity: 1;
	}
}

@keyframes flicker-drew
{
	0%, 100%
	{
		color: unset;
		opacity: 1;
	}
	
	25%
	{
		opacity: .2;
	}
	
	80%
	{
		color: white;
		opacity: 1;
	}
}


@keyframes flicker1 {
	0% {
		opacity: 0.4;
	}
	5% {
		opacity: 0.5;
	}
	10% {
		opacity: 0.6;
	}
	15% {
		opacity: 0.85;
	}
	25% {
		opacity: 0.5;
	}
	30% {
		opacity: 1;
	}
	35% {
		opacity: 0.1;
	}
	40% {
		opacity: 0.25;
	}
	45% {
		opacity: 0.5;
	}
	60% {
		opacity: 1;
	}
	70% {
		opacity: 0.85;
	}
	80% {
		opacity: 0.4;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes flicker2 {
	0% {
		opacity: 0.19;
	}
	5% {
		opacity: 0.2;
	}
	10% {
		opacity: 0.25;
	}
	15% {
		opacity: 0.35;
	}
	25% {
		opacity: 0.2;
	}
	30% {
		opacity: 0.4;
	}
	35% {
		opacity: 0.1;
	}
	40% {
		opacity: 0.25;
	}
	45% {
		opacity: 0.2;
	}
	60% {
		opacity: 0.4;
	}
	70% {
		opacity: 0.35;
	}
	80% {
		opacity: 0.4;
	}
	90% {
		opacity: 0.2;
	}
	100% {
		opacity: 0.4;
	}
}

@keyframes flicker3 {
	0% {
		opacity: 0.15;
	}
	5% {
		opacity: 0.2;
	}
	10% {
		opacity: 0.12;
	}
	15% {
		opacity: 0.2;
	}
	25% {
		opacity: 0.15;
	}
	30% {
		opacity: 0.4;
	}
	35% {
		opacity: 0.05;
	}
	40% {
		opacity: 0.12;
	}
	45% {
		opacity: 0.15;
	}
	60% {
		opacity: 0.3;
	}
	70% {
		opacity: 0.2;
	}
	80% {
		opacity: 0.3;
	}
	90% {
		opacity: 0.18;
	}
	100% {
		opacity: 0.3;
	}
}

@keyframes flicker3 {
	0% {
		opacity: 0.15;
	}
	5% {
		opacity: 0.2;
	}
	10% {
		opacity: 0.12;
	}
	15% {
		opacity: 0.2;
	}
	25% {
		opacity: 0.15;
	}
	30% {
		opacity: 0.4;
	}
	35% {
		opacity: 0.05;
	}
	40% {
		opacity: 0.12;
	}
	45% {
		opacity: 0.15;
	}
	60% {
		opacity: 0.3;
	}
	70% {
		opacity: 0.2;
	}
	80% {
		opacity: 0.3;
	}
	90% {
		opacity: 0.18;
	}
	100% {
		opacity: 0.3;
	}
}



@keyframes flicker4 {
	0% {
		opacity: 0.01;
	}
	5% {
		opacity: 0.05;
	}
	10% {
		opacity: 0.03;
	}
	15% {
		opacity: 0.1;
	}
	25% {
		opacity: 0.07;
	}
	30% {
		opacity: 0.1;
	}
	35% {
		opacity: 0.05;
	}
	40% {
		opacity: 0.06;
	}
	45% {
		opacity: 0.1;
	}
	60% {
		opacity: 0.;
	}
	70% {
		opacity: 0.1;
	}
	80% {
		opacity: 0.;
	}
	90% {
		opacity: 0.0;
	}
	100% {
		opacity: 0.1;
	}
}





@media screen and (max-width: 900px)
{
	body .cart-game.cart-game-2 .items {
		padding: 0 20px;
	}
	
	body .cart-game.cart-game-2 .item:after {
	  left: -20px;
	  right: -20px;
	}
}


@media screen and (max-width: 600px)
{
	.cart-game .leaderboard table tr {
		display:  flex;
		flex-wrap:  wrap;
		align-items: center;
		border-bottom: 10px solid #222;

	}

	.cart-game .leaderboard table tr > * {
		padding: 2px 5px;
		font-size: 18px
	}

	.cart-game .leaderboard table td.username .name{
		padding: 0 5px;
	}

	.cart-game .leaderboard table .rank
	{
		min-width: 70px;
		height: 100%;
		
		background-color: var(--yellow);
		color: var(--black);
		text-shadow: var(--black-glow);
	}
	
	ul.avatar-color-selector
	{
		margin-left: -10px !important;
		margin-right: -10px !important;
		width: calc(100% + 20px);
	}
}

@media screen and (max-width: 500px)
{
	ul.avatar-color-selector
	{
		position: relative;
		flex-wrap: wrap;
/*		overflow: hidden;*/
		border-left: 0 none transparent;
		border-right: 0 none transparent;
		border-radius: 0;
	}		
	
	ul.avatar-color-selector > li,
	ul.avatar-color-selector > li > a:before
	{
		border-radius: 0 !important;
	}
	
	ul.avatar-color-selector > li
	{
		flex: 1;
		min-width: 25%;
	}
	
	body .cart-game.cart-game-2 .ui-pane-container .settings-board
	{
		/*right: 10px;
		left: 10px;*/
	}
	
	body .cart-game.cart-game-2 .ui-pane-container .panes > div:not(.title-screen)
	{
		padding: 10px;
	}
	
/*	.scoreboard .info-heading,*/
	body .cart-game.cart-game-2 .ui-pane-container .settings-board .tabs a,
	.cart-game .leaderboard table thead
	{
		font-size: 14px;
	}
		
	
	/*body .cart-game.cart-game-2 .mascot-container
	{
		top: 100px;
	}*/
	
	/*.scoreboard
	{
		top: 100px;
	}*/
	
	.scoreboard .info-heading
	{
		font-size: 14px;
		-webkit-text-stroke-width: .5px;
		text-stroke-width: .5px;
	}
	
	.scoreboard .info-display .info
	{
		font-size: 20px;
	}
	
	.scoreboard .info-display .info.high-score
	{
		font-size: 14px;
	}

	.scoreboard .info-display .info.high-score small
	{
		font-size: 10px;
	}
	
	.w4hs-icg-score-container
	{
		width: 160px;
		margin-right: -20px;
	}
	
	body .cart-game.cart-game-2 .item
	{
		width: 22vw;
		height: 22vw;
		margin-left: 0.39583vw;
		margin-right: 0.39583vw;
	}
	
	body .cart-game.cart-game-2 .buckets .bucket .w4hs-dropzone
	{
		background-size: contain !important;
		max-width: 100%;
		position: relative;
	}
	
	body .cart-game.cart-game-2 .messages .success,
	body .cart-game.cart-game-2 .messages .you-did-it,
	body .cart-game.cart-game-2 .messages .fail 
	{
		font-size: 18px;
	}
}

@media screen and (max-width:420px)
{
	body .cart-game.cart-game-2 .mascot-container
	{
		top: 100px;
	}
}


@media screen and (max-height:585px)
{
	
	
	
	
	
	.scoreboard .info-heading
	{
		font-size: 14px;
		-webkit-text-stroke-width: .5px;
		text-stroke-width: .5px;
	}
	
	.scoreboard .info-display .info
	{
		font-size: 20px;
	}
	
	.scoreboard .info-display .info.high-score
	{
		font-size: 14px;
	}

	.scoreboard .info-display .info.high-score small
	{
		font-size: 10px;
	}
	
	.w4hs-icg-score-container
	{
		width: 160px;
		margin-right: -20px;
	}
}

@media screen and (max-height:822px) and (max-width: 500px) and (orientation : portrait)
{
	body .cart-game.cart-game-2 .items-container
	{
		margin-top: 221px;
	}
	
	.scoreboard
	{
		top: 30px;
	}
	
	body .cart-game.cart-game-2 .items-container
	{
		z-index: 5000;
	}
	
	
}


@media screen and (max-height:822px) and (max-width: 600px) and (orientation : portrait)
{
	body .cart-game.cart-game-2 .buckets
	{
	  height: 30%;
	}
}