html,
body {
	height: 100%;
}

html {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	height: 100%;
}

@-ms-viewport {
	width: device-width;
	height: device-height;
}

a[href],
button {
	/*-ms-touch-action: none;*/
	/* IE10 */
	/*touch-action: none;*/
	/* IE11 */
	cursor: pointer;
}

a {
	text-decoration: none;
	color: #ffffff;
}

a[target="_system"]:after {
	/* content:" 🔗"; */
}

a:focus,
a:active {
	opacity: .7;
}

body {
	margin: 0;
	padding: 0;
	background-color: #000000;
	color: #ffffff;
	background-image: url('../images/wood.jpg');
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	/* Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen.  */
	xfont-size: 62.5%;
	/* resets the page font size */
	line-height: normal;
}

fontSizesPXtoEM {
	font-size: 0.8em;
	/* equals 8px */
	font-size: 1.0em;
	/* equals 10px */
	font-size: 1.6em;
	/* equals 16px */
	font-size: 2.0em;
	/* equals 20px */
}

body {
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-highlight: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1 {
	display: block;
	font-size: 2em;
	-webkit-margin-before: 0.67em;
	-webkit-margin-after: 0.67em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	font-weight: bold;
}

.wrapper {
	padding: 10px 10px 10px 10px;
	xwidth: 480px;
	max-width: 350px;
	xmin-width: 300px;
	margin: 0 auto;
	xbackground-color: #808080;
}

.pageTitle {
	padding: 5px 0 5px 0;
}

.pageTitle h1 {
	display: inline-block;
	vertical-align: middle;
	padding: 10px 0px;
	font-size: 2em;
	-webkit-margin-before: 0.67em;
	-webkit-margin-after: 0.67em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	font-weight: bold;
}

.pageTitle img {
	text-align: center;
	width: 100%;
	padding: 10px 0px 10px 0px;
	max-width: 350px;
	min-width: 240px;
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
}

.gameDiv {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.backButton {
	width: 48px;
	height: 48px;
	margin: 3px 30px 3px 0px;
	display: inline-block;
	overflow: hidden;
	vertical-align: text-bottom;
	vertical-align: middle;
	padding-left: 3px;
}

.simpleButton {
	text-decoration: none;
	color: #ffffff;
	font-size: 30px;
	padding: 10px 0 0 10px;
	/* background-image: url('../images/Button1Player.png'); */
	background-repeat: no-repeat;
	min-height: 45px;
	background-size: auto 100%;
	background-color: rgba(0, 0, 0, 0.7);
	xbackground-color: #222222;
	xbackground-color: #4A6EA9;
	margin: 5px 0px 5px 0px;
	xdisplay: inline-block;
	display: block;
	cursor: pointer;
	text-align: center;
	border: none;
}

.simpleButtonOutLine {
	height: 45px;
	line-height: 41px;
	color: #ffffff;
	cursor: pointer;
	border: 2px solid #FFFFFF;
	display: inline-block;
	padding: 0 10px;
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	box-sizing: border-box;
	/* box-sizing: content-box; */
	border-radius: 5px;
	margin: 3px 3px 3px 3px;
	background: none;
	vertical-align: bottom;
}

.buttonList {
	margin: 0px auto;
	max-width: 350px;
}

.buttonSmall {
	margin: 3px 3px;
	padding: 5px 5px;
	min-width: 50px;
	border-radius: 5px;
	background-color: #218414;
	color: white;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
}

.button {
	text-decoration: none;
	color: #ffffff;
	font-size: 36px;
	padding: 0 0 0 90px;
	background-image: url(../images/Avatars/Easy.png);
	background-repeat: no-repeat;
	background-size: auto 60px;
	background-color: rgba(0, 0, 0, 0.7);
	margin: 3px 3px 3px 3px;
	xdisplay: inline-block;
	display: block;
	cursor: pointer;
	box-sizing: border-box;
	border-radius: 5px;
	min-height: 60px;
	line-height: 55px;
}

.button2 {
	xmargin: 5px 5px 5px 5px;
	text-decoration: none;
	color: #ffffff;
	font-size: 30px;
	padding: 10px 0 0 75px;
	background-image: url('../images/Button1Player.png');
	background-repeat: no-repeat;
	min-height: 45px;
	background-size: auto 100%;
	background-color: rgba(0, 0, 0, 0.7);
	xbackground-color: #222222;
	xbackground-color: #4A6EA9;
	margin: 5px 5px 5px 5px;
	xdisplay: inline-block;
	display: block;
	cursor: pointer;
}

.button1Player {
	background-image: url('images/CardSingle.png');
}

.button2Player {
	background-image: url('images/CardDouble.png');
}

.button4Player {
	background-image: url('images/Card4Player.png');
}

.buttonShare {
	background-image: url('../images/ButtonShare.png');
}

.buttonAchievements {
	background-image: url('images/Throphy.png');
}

.buttonShop {
	background-image: url('images/Shop.png');
}

.buttonDiscord {
	background-image: url('images/Discord-Logo-Color.png ');
}

.buttonGreen {
	background-image: url('images/Green.png');
}

.buttonDarkGreen {
	background-image: url('images/DarkGreen.png');
}

.buttonOrange {
	background-image: url('images/Orange.png');
}

.buttonRed {
	background-image: url('images/Red.png');
}

.buttonInsaneMonkey {
	background-image: url('../images/Avatars/InsaneMonkey.png');
}

.buttonUltraCheetah {
	background-image: url('../images/Avatars/UltraCheetah.png');
}

.buttonImpossibleh {
	background-image: url('../images/Avatars/Impossible.png');
}

/*.button2 {
    background-image: url('../images/Button1Player.png');
    background-repeat: no-repeat;
    min-height: 55px;
    background-size: auto 100%;
    background-color: rgba(0,0,0,0.5);
    
    margin: 5px 5px 5px 5px;
    xpadding: 10px 0 0 95px;
    xfont-size: 30px;
}*/

.button2 a {
	text-decoration: none;
	color: #ffffff;
}

/*.button {
    margin: 10px auto;
    text-decoration: none;
    color: #ffffff;
    font-size: 45px;
    padding: 17px 0 0 140px;
    background-image: url('../images/Button1Player.png');
    width: 317px;
    height: 64px;
    text-align: left;
    display: block;
}*/

.smallButton {
	margin: 10px 0px 5px 0px;
	max-width: 250px;
	height: 40px;
	cursor: pointer;
	font-size: 28px;
	padding: 10px 0 0 40px;
	text-align: center;
	background-size: 300px 50px;
	text-decoration: none;
	color: #ffffff;
}

.smallButton a {
	text-decoration: none;
	color: #ffffff;
}

.smallButton2 {
	margin: 10px 0px 5px 0px;
	max-width: 250px;
	height: 35px;
	cursor: pointer;
	font-size: 18px;
	padding: 15px 0 0 40px;
	text-align: center;
	background-size: 300px 50px;
}

.smallButton2 a {
	text-decoration: none;
	color: #ffffff;
}

.buttonMini {
	display: inline-block;
	text-align: center;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	margin: 0 3px;
	padding: 5px 6px;
	text-decoration: none;
	xheight: 28px;
	vertical-align: top;
	font-size: 14px;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
	cursor: pointer;
}

.buttonCoin {
	display: inline-block;
	text-align: right;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	margin: 0 3px;
	padding: 5px 6px;
	text-decoration: none;
	vertical-align: top;
	font-size: 14px;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
	cursor: pointer;
	background: none;
	min-height: inherit;
	margin: 4px 3px 1px 3px;
	width: initial;
	height: initial;
	background-position: top 3px right 5px;
	background-image: url(images/coin_c15x15.png);
	background-repeat: no-repeat;
	padding: 3px 30px 3px 5px;
	font-size: 15px;
}

ul {
	list-style: none;
	padding: 0px 3px;
	min-width: 260px;
}

.gamerTag {
	padding: 5px 5px 5px 5px;
	margin: 3px 3px 3px 3px;
	height: 75px;
	xbackground-color: #222222;
	background: rgba(0, 0, 0, 0.5);
	text-align: left;
	text-decoration: none;
	color: #ffffff;
	border-radius: 5px;
}

.gamerTag a {
	text-decoration: none;
	color: #ffffff;
}

.gamerTag .gamerTagImage {
	width: 75px;
	height: 75px;
	vertical-align: top;
	float: left;
	clear: both;
}

.gamerTag div.coins {
	font-size: 14px;
	float: right;
	background: url('images/coin_c15x15.png') right no-repeat;
	padding: 3px 18px 3px 5px;
	margin: 0 3px 0 0;
	box-sizing: border-box;
}

.gamerTag .deck {
	width: 50px;
	vertical-align: top;
	float: right;
}

.gamerTag img.miniIcon {
	width: 16px;
	height: 16px;
	margin-right: 10px;
}

.gamerTag div.title {
	padding: 0 0 0 15px;
	font-size: 22px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gamerTag div.description {
	padding: 1px 15px 0 90px;
	font-size: 16px;
}

.gamerTag progress[value] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 75%;
	height: 7px;
	margin: 5px 0px;
}

progress[value] {
	/* Reset the default appearance */
	/* Reset the default appearance */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 75%;
	height: 7px;
}

.minibuttons {
	margin: 5px 0 0 0;
	text-align: center;
}

.minibuttons a {
	display: inline-block;
	margin: 5px 3px;
}

.minibuttons img {
	width: 48px;
}

label {
	width: 150px;
	display: inline-block;
	vertical-align: top;
}

#orientation {
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../images/orientation.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgb(0, 0, 0);
	z-index: 999;
	display: none;
}

.settings {
	margin: 10px 15px 10px 15px;
}

.settings label {
	width: 100%;
	margin: 5px 0px;
}

.profile {}

.profile img {
	vertical-align: bottom;
}

.profile .avatar {
	margin-bottom: 12px;
}

.profile td {
	padding: 0;
	margin: 0;
	vertical-align: bottom;
}

.profile table {
	border-collapse: collapse;
}

.profile a {
	text-decoration: none;
}

.profile .avatar img {
	height: 100px;
	vertical-align: bottom;
}

.profile .avatar select {
	margin-bottom: 0px;
}

.profile {}

.profile .deck {
	margin-bottom: 12px;
}

.profile .deck img {}

.profile .deck ul {
	margin: 0;
	padding: 0;
}

.profile .deck li {
	display: inline-block;
	padding: 3px;
}

.profile .deck li .selected {
	background: yellow;
}

.profile .deck [data-locked='true'] {
	position: relative;
	width: 100px;
	height: 100px;
}

.profile .deck [data-locked='true']:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	color: #FFF;
	display: block;
	xbackground: rgba(0, 0, 0, .6);
	background-image: url('images/lock50x50.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	/*opacity: 0.5;*/
	pointer-events: none;
}

.avatarListHorizontal {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.avatarListHorizontal img {
	height: 100px;
	pointer-events: none;
}

.avatarListHorizontal label {
	width: inherit;
	margin: 0px 0px;
	/*display: inline-block;*/
}

.avatarListHorizontal label>input {
	/* HIDE RADIO */
	display: none;
}

.avatarListHorizontal label>input+img {
	/* IMAGE STYLES */
	cursor: pointer;
	border: 2px solid transparent;
}

.avatarListHorizontal label>input:checked+img {
	/* (RADIO CHECKED) IMAGE STYLES */
	border: 2px solid #fff;
	background: yellow;
	border-radius: 5px;
}

.avatarList {}

.avatarList ul {
	padding: 0px 0px;
}

.avatarList img {
	height: 93px;
	pointer-events: none;
}

.avatarList li {
	display: inline-block;
	padding: 2px 2px 2px 2px;
}

.deckListHorizontal {
	margin-bottom: 12px;
}

.deckListHorizontal img {}

.deckListHorizontal ul {
	margin: 0;
	padding: 0;
}

.deckListHorizontal li {
	display: inline-block;
	padding: 3px;
}

.deckListHorizontal li .selected {
	background: yellow;
}

.deckListHorizontal [data-locked='true'] {
	position: relative;
	width: 100px;
	height: 100px;
}

.deckListHorizontal [data-locked='true']:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	color: #FFF;
	display: block;
	xbackground: rgba(0, 0, 0, .6);
	background-image: url('images/lock50x50.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	/*opacity: 0.5;*/
	pointer-events: none;
}

.deckListLarge {
	text-align: center;
}

.deckListLarge li {
	margin: 5px 5px 5px 5px;
	padding: 5px 5px;
	/* border: 1px solid; */
	border-radius: 10px 10px;
	text-align: center;
	font-size: 20px;
	background: black;
	background: rgba(0, 0, 0, 0.50);
	box-sizing: border-box;
	box-shadow: 3px 3px black;
	padding: 0 0;
	position: relative;
	background-image: url(images/wood.jpg);
	min-width: 200px;
	display: inline-block;
}

.deckListLarge li .title {
	text-align: center;
	padding: 4px 8px;
}

.deckListLarge li img {
	display: inline-block;
	margin: 0 auto;
	vertical-align: bottom;
}

.deckListLarge li .bottomLabel {
	position: absolute;
	bottom: 0px;
	border-radius: 0 0 10px 10px;
	background: rgba(0, 0, 0, 0.90);
	width: 100%;
	padding: 3px 8px;
	box-sizing: border-box
}

.deckListLarge li .button {
	display: inline-block;
	text-align: center;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	margin: 0 3px;
	padding: 5px 6px;
	text-decoration: none;
	vertical-align: top;
	font-size: 14px;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
	cursor: pointer;
	float: right;
	background: none;
	min-height: inherit;
	margin: 4px 3px 1px 3px;
	width: initial;
	height: initial;
}

.deckListLarge li .coinButton {
	background-position: top 3px right 5px;
	background-image: url(images/coin_c15x15.png);
	background-repeat: no-repeat;
	padding: 3px 30px 3px 5px;
	font-size: 15px;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
}

.deckList {
	margin-bottom: 12px;
}

.deckList img {}

.deckList ul {
	margin: 0;
	padding: 0;
}

.deckList li {
	xdisplay: inline-block;
	padding: 3px;
	margin: 5px 0px 5px 0px;
	xheight: 75px;
	background-color: #222222;
	color: #ffffff;
	background-color: #ffffff;
	color: #222222;
	border-radius: 4px;
	cursor: pointer;
	border: 2px white solid;
}

.deckList li .selected {
	background: yellow;
}

.deckList [data-locked='true'] {
	position: relative;
	xwidth: 100px;
	xheight: 100px;
}

.deckList [data-locked='true']:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	color: #FFF;
	display: block;
	xbackground: rgba(0, 0, 0, .6);
	background-image: url('images/lock50x50.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	/*opacity: 0.5;*/
	pointer-events: none;
}

.backgroundList {}

.backgroundList img {
	width: 150px;
	pointer-events: none;
}

.backgroundList li {
	display: inline-block;
	padding: 2px 2px;
}

.locked:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	color: #FFF;
	display: block;
	/*background: rgba(0, 0, 0, .6);*/
	background-image: url('images/lock50x50.png');
	background-repeat: no-repeat;
	background-position: 100% 95%;
	/*opacity: 0.5;*/
	pointer-events: none;
}

.achievementList {
	margin: 0 0 50px 0;
	padding: 0 0;
}

.achievementList li,
.achievement {
	margin: 1px 1px 1px 1px;
	height: 50px;
	background-color: #222222;
	list-style-type: none;
	border-radius: 5px;
}

.achievementList li.notFound {
	background-color: #808080;
}

.achievementList li img,
.achievement img {
	width: 50px;
	max-height: 50px;
	vertical-align: top;
	float: left;
	clear: both;
}

.achievementList li.notFound img {
	xvisibility: hidden;
	opacity: 0.4;
}

.achievementList li div.title,
.achievement .title {
	padding: 3px 0 0 65px;
	font-size: 17px;
}

.achievementList li div.description,
.achievement .description {
	padding: 0px 0 0 65px;
	font-size: 12px;
}

.achievementList li div.points,
.achievement .points {
	font-size: 14px;
	float: right;
	background: url('images/coin_c15x15.png') right no-repeat;
	padding: 3px 18px 3px 5px;
	margin: 0 3px 0 0;
	box-sizing: border-box;
}

.moreGamesList li {
	margin: 5px 5px 5px 5px;
	height: 100px;
	xbackground-color: #eeeeee;
	xcolor: #000000;
}

.moreGamesList li img {
	width: 90px;
	vertical-align: top;
	float: left;
	clear: both;
	margin: 5px 5px;
	border-radius: 8px;
	box-shadow: 1px 1px black;
}

.moreGamesList li div.title {
	padding: 10px 0 0 110px;
	font-size: 26px;
}

.moreGamesList li div.description {
	padding: 5px 0 0 110px;
	font-size: 14px;
}

/* Progressbar */

.meter {
	height: 5px;
	position: relative;
	background: #f3efe6;
	overflow: hidden;
}

.meter span {
	display: block;
	height: 100%;
}

.progressAnimated {
	background-color: #218414;
	animation: progressBar 1s ease-in-out;
	animation-fill-mode: both;
}

@keyframes progressBar {
	0% {
		width: 0;
	}

	100% {
		width: 100%;
	}
}

.iapList li {
	margin: 5px 0px 5px 0px;
	height: 90px;
	background-color: #222222;
	color: #ffffff;
	background-color: #ffffff;
	color: #222222;
	border-radius: 4px;
	cursor: pointer;
	border: 2px white solid;
}

.iapList .highlight {
	border: 3px gold solid;
}

.iapList li img {
	width: 90px;
	vertical-align: top;
	float: left;
	clear: both;
	xbackground-color: #dddddd;
	border-right: 1px gray solid;
}

.iapList li div.title {
	padding: 8px 0 0 100px;
	font-size: 22px;
}

.iapList li div.description {
	padding: 8px 0 0 100px;
	font-size: 12px;
}

.iapList li .priceButton {
	display: inline-block;
	text-align: center;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	margin: 0 3px;
	padding: 5px 6px;
	text-decoration: none;
	height: 28px;
	vertical-align: top;
	font-size: 14px;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
	float: right;
	margin: 25px 10px 25px 15px;
	border: 1px solid #222222;
	color: #222222;
}

.modeList li {
	margin: 5px 0px 5px 0px;
	min-height: 75px;
	background-color: #222222;
	color: #ffffff;
	background-color: #ffffff;
	color: #222222;
	border-radius: 4px;
	cursor: pointer;
	border: 2px white solid;
}

.modeList .highlight {
	border: 3px gold solid;
}

.modeList li img {
	width: 75px;
	vertical-align: top;
	float: left;
	clear: both;
	xbackground-color: #dddddd;
	border-right: 1px gray solid;
}

.modeList li div.title {
	padding: 8px 0 0 90px;
	font-size: 18px;
}

.modeList li div.description {
	padding: 8px 8px 0 90px;
	font-size: 12px;
}

.modeList li .priceButton {
	display: inline-block;
	text-align: center;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	margin: 0 3px;
	padding: 5px 6px;
	text-decoration: none;
	vertical-align: top;
	font-size: 14px;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
	float: right;
	margin: 8px 8px 0px 10px;
	border: 1px solid #222222;
	color: #222222;
	background-position: top 3px right 5px;
	background-image: url(images/coin_c15x15.png);
	background-repeat: no-repeat;
	padding: 3px 30px 3px 5px;
	font-size: 15px;
}

.modeList li .owned {
	vertical-align: top;
	font-size: 14px;
	text-decoration: none;
	float: right;
	margin: 8px 8px 0px 10px;
	color: #222222;

}

/*#settings div {
            margin: 5px 5px 5px 5px;
        }*/

#stats {
	margin: 10px 10px 10px 10px;
}

#stats li {
	height: inherit;
	margin: 0;
}

/*#stats {
            padding: 1px 10px 3px 80px;
        }*/

label,
legend {
	xdisplay: block;
	xmargin-bottom: .5rem;
	xfont-weight: 600;
}

input,
textarea,
select,
fieldset {
	margin-bottom: 12px;
}

input {
	line-height: normal;
}

.u-full-width {
	width: 100%;
	box-sizing: border-box;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
	height: 45px;
	font-size: 20px;
	padding: 6px 10px;
	background-color: #fff;
	border: 0px solid #D1D1D1;
	xborder-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
	width: 100%;
}

/*.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
    color: #FFF;
    background-color: #1EAEDB;
    border-color: #1EAEDB;
}

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
    color: #FFF;
    background-color: #33C3F0;
    border-color: #33C3F0;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    height: 45px;
    padding: 0 30px;
    color: #555;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    xbackground-color: #1EAEDB;
    border-radius: 4px;
    border: 0px solid #bbb;
    cursor: pointer;
    box-sizing: border-box;
}*/

.spinner {
	xmargin: 30px auto;
	xwidth: 50px;
	height: 30px;
	text-align: center;
	font-size: 10px;
}

.spinner>div {
	background-color: #ffffff;
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {

	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.4);
	}

	20% {
		-webkit-transform: scaleY(1.0);
	}
}

@keyframes stretchdelay {

	0%,
	40%,
	100% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}

	20% {
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}

.gameOverScreen {
	width: 300px;
	padding: 10px;
	xdisplay: none;
	margin: 0 auto;
}

.loginMenu {
	margin: 130px 0px 0px 0px;
}

.loginMenu .title {
	font-size: 30px;
	padding: 22px 0 0 110px;
}

.loginMenu .title.dark {
	color: #555555;
}

.footer {
	position: absolute;
	width: 100%;
	height: 40px;
	bottom: 0;
	left: 0;
	text-align: center;
}

.showGame {
	xposition: inherit;
	xwidth: auto;
	xheight: auto;
	/*height: 100%;*/
	display: block;
}

.hideGame {
	xposition: absolute !important;
	xtop: -9999px !important;
	xleft: -9999px !important;
	/* width: 1px;
    height: 1px; */
	display: none;
	/*Crashes when not shown for a bit*/
}

.achievementPopup {
	/* Height & width depends on how you want to reveal the overlay (see JS below) */
	xmax-height: 200px;
	width: 100%;
	margin: 0 auto;
	position: fixed;
	/* Stay in place */
	z-index: 10;
	/* Sit on top */
	left: 0;
	top: -200px;
	overflow-x: hidden;
	/* Disable horizontal scroll */
	color: #FFFFFF;
	visibility: hidden;
	pointer-events: none;
}

.achievementPopup.showAchievementPopup {
	animation: showAchievementPopup 3s;
}

@keyframes showAchievementPopup {
	0% {
		visibility: visible;
		top: -200px;
	}

	10% {
		top: 0px;
	}

	90% {
		top: 0px;
	}

	99% {
		top: -200px;
	}

	100% {
		visibility: hidden;
	}
}

.coin {
	font-size: 15px;
	line-height: 15px;
	background: url('images/coin_c15x15.png') right no-repeat;
	display: inline-block;
	width: 15px;
	height: 15px;
}

.coinButton2 {
	display: inline-block;
	text-align: right;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	margin: 0 3px;
	padding: 5px 6px;
	text-decoration: none;
	xheight: 28px;
	vertical-align: top;
	font-size: 20px;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
	cursor: pointer;
	background-position: top 3px right 5px;
	background-image: url(images/coin_c20x20.png);
	background-repeat: no-repeat;
	font-size: 20px;
	padding: 3px 30px 3px 5px;
}

.coinIcon {
	display: inline-block;
	text-align: center;
	height: 20px;
	width: 20px;
	margin: 0 4px;
	padding: 5px 6px;
	vertical-align: top;
	box-sizing: border-box;
	background-image: url(images/coin_c20x20.png);
	background-repeat: no-repeat;
	font-size: 20px;
}

.coinButton3 {
	display: inline-block;
	text-align: center;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	margin: 0 3px;
	padding: 5px 6px;
	text-decoration: none;
	/* height: 28px; */
	vertical-align: top;
	font-size: 20px;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
	cursor: pointer;
}

.coinbox {
	height: 20px;
	background-image: url(images/coin_c20x20.png);
	background-repeat: no-repeat;
	padding: 0 0 0 23px;
	float: right;
	font-size: 20px;
}

div.freeShippingRibbon {
	height: 35px;
	width: 180px;
	background-color: #9C1B21;
	position: absolute;
	top: 48px;
	right: -6px;
	text-align: center;
	color: #FFF;
	font-weight: 600;
	font-size: 24px;
	white-space: nowrap;
	-webkit-transform: rotate(35deg);
	-moz-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	-o-transform: rotate(35deg);
	transform: rotate(35deg);
}

.freeShippingRibbon:before {
	box-sizing: border-box;
	border-style: solid;
	border-color: transparent;
	border-width: 37px;
	border-left-width: 53px;
	border-right-width: 26px;
	content: "";
	display: block;
	left: -49px;
	position: absolute;
	width: 141%;
	border-top-width: 0px;
	border-bottom-color: #9c1b21;
	top: -2px;
	z-index: -1;
}

.hide {
	display: none;
}

.radioButtons input[type=radio],
.radioButtons input[type=checkbox] {
	display: none;
}

.radioButtons input[type=radio]+label,
.radioButtons input[type=checkbox]+label {
	width: auto;
	display: inline-block;
	margin: 0 -3px;
	padding: 10px 9px;
	margin-bottom: 0;
	font-size: 16px;
	xline-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #285e8e;
	color: #4a6ea9;
	background-color: #fff;
	border-color: #285e8e;
}

.radioButtons input[type=radio]:checked+label,
.radioButtons input[type=checkbox]:checked+label {
	color: #fff;
	background-color: #4a6ea9;
	border-color: #285e8e;
}

.page {
	animation: none;
	display: none;
}

.page.activePage {
	animation: flipInY 0.5s;
	/*  https://animate.style/#usage fadeIn  bounceIn*/
	display: block;
}

.page.activePage.noAnimate {
	animation: none;
}

.page#Game {
	display: block;
	overflow: hidden;
	height: 1px;
	width: 1px;
}

.page.activePage#Game {
	animation: none;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.notifications {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	/* Stay in place */
	z-index: 10;
	/* Sit on top */
	left: 0px;
	top: 0px;
	overflow-x: hidden;
	/* Disable horizontal scroll */
	color: #FFFFFF;
	pointer-events: none;
}

.notification {
	text-decoration: none;
	color: #ffffff;
	xmin-height: 60px;
	background-size: auto 100%;
	background-color: rgba(0, 0, 0, 0.7);
	margin: 3px 3px 3px 3px;
	display: block;
	box-sizing: border-box;
	border-radius: 5px;
	margin: 0 auto;
	max-width: 350px;
	pointer-events: auto;
	xanimation: showNotification 5s;
	background-color: black;
	animation-name: showNotification;
	animation-duration: 4s;
	animation-fill-mode: forwards;
}

@keyframes showNotification {
	0% {
		visibility: visible;
		background-color: white;
	}

	10% {
		background-color: black;
	}

	90% {
		background-color: black;
	}

	99% {}

	100% {
		background-color: black;
		visibility: hidden;
	}
}

.notificationItem {
	padding: 20px 20px;
}

.popup {
	xmax-height: 200px;
	width: 100%;
	margin: 0 auto;
	position: fixed;
	/* Stay in place */
	z-index: 10;
	/* Sit on top */
	left: 0;
	top: -200px;
	xtop: 0px;
	overflow-x: hidden;
	/* Disable horizontal scroll */
	color: #FFFFFF;
	visibility: hidden;
	pointer-events: none;
}

.popupItem {
	text-decoration: none;
	color: #ffffff;
	padding: 0px 0px 0 0px;
	xbackground-image: url(../assets/Avatars/Easy.png);
	background-repeat: no-repeat;
	min-height: 60px;
	background-size: auto 100%;
	background-color: rgba(0, 0, 0, 0.7);
	margin: 3px 3px 3px 3px;
	display: block;
	xcursor: pointer;
	box-sizing: border-box;
	border-radius: 5px;
	margin: 0 auto;
	max-width: 350px;
	pointer-events: auto;
}

.popupItem img {
	max-width: 75px;
	max-height: 75px;
	vertical-align: top;
	float: left;
	clear: both;
	padding-right: 5px;
}

.dialogBox {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background-image: url(images/wood.jpg); */
	/* background-size: 100%; */
	z-index: 3;
	xcursor: pointer;
	display: none;
}

.dialogBox .background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background-color: #00000082; */
	background: rgba(0, 0, 0, 0.5);
}

.dialogBox .dialogBoxWindow {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/* left: 0px; */
	background-color: #333333;
	xbackground-color: #00000087;
	max-width: 100%;
	max-height: 100%;
	/* width: 500px;
    height: 400px; */
	width: 85%;
	xheight: 85%;
	background-color: #333333;
	box-sizing: border-box;
	overflow: auto;
}

.dialogBox header {
	background-color: #479ace;
	padding: 10px 10px;
	position: relative;
	font-size: 20px;
	text-align: center;
	min-height: 20px;
}

.dialogBox main {
	background-color: #333333;
	padding: 10px 15px;
}

.dialogBox .close {
	color: #FFFFFF;
	font: 20px/100% arial, sans-serif;
	position: absolute;
	right: 10px;
	top: 10px;
	content: '✖';
	/* UTF-8 symbol */
}