/* DISABLE ALL ANTIALIASING ON IMAGES*/
img {
/*
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
*/
}
input[type=checkbox] {
	width:24px; height:24px;
	margin-right:8px;
	vertical-align:middle;
}

/* developer error messages to myself*/
.dev{
	position:absolute;
	background-color:white;
	color:red;
	padding:12px 24px;
	font-size:30px;
	z-index:99999999;
}

.token_dark{
	filter: brightness(50%);
}
.away{
	position:absolute;
	transform:translate(20px,36px) rotate(-1deg);
	border-radius:2px;
	font-size:18px;
	padding:0px 6px;
	line-height:22px;
	font-weight:bold;
	color:#444;
	text-shadow:0px 0px 4px #000;
	background-color:#333;
}
.punishmentbottom{
	background-color:darkorange;
	color:white;
	padding:8px;
	font-size:26px;
	line-height:36px;
}


.polaroid_image{
	position:absolute;
	border:1px solid red;
	width:360px;
	height:360px;
	margin-left:18px;
	margin-top:26px;
}

/*
@font-face {
    font-family: 'AlegreSansRegular';
    src: url('cyborgsister-webfont.woff2') format('woff2'),
         url('cyborgsister-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansLight';
    src: url('/i/files/OpenSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ComfortaaLight';
    src: url('/i/files/Comfortaa-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/
@font-face {
    font-family: 'Comfortaa';
    src: url('/i/files/Comfortaa.woff') format('woff');
}

@font-face {
	font-family: 'Digital-7';
	src: url('/i/files/digital-7.woff') format('woff');
}

/*
@font-face {
    font-family: 'MikadoBold';
    src: url('/i/files/MikadoBold_DEMO.otf') format('opentype');
}
*/


@font-face {
    font-family: 'impacted';
    src: url('/i/files/Impacted20.woff') format('woff');
}
@font-face {
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/i/files/monoton.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.impacted{
	font-family: impacted;
}

*{
   	font-family: 'Comfortaa';
	color: #FFF;
	font-size: 26px;
	line-height:150%;
}

input[type=submit],input[type=button]{
	appearance: none;
}

#layout{
	color: #FFF;
	font-size: 32px;
}

.flexcenter{
	position:absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	left:0;
	right:0;
	top:0;
	bottom:0;
}

table.players td{
	color:white;
	font-size: 32px;
	height:42px;
	vertical-align:middle;
}
table.players td img{
	width: 32px;
	height: 32px;
	border-radius:24px;
	border: 1px solid #666;
}
table.players .players_name{
	padding-left:16px;
	width: 200px;
}

/* This one is used in memory game*/
.beticon{
	position:absolute;
	z-index:15;
	background-color:rgba(0,0,0,0.7);
	color:#fff;
	font-size:14px;
	line-height:35px;
	width:35px;
	height:35px;
	font-weight:bold;
	border-radius:30px;
	text-align:center;
	box-shadow: 0px 0px 10px 5px #000;
}
/* This one is used for the bottom tokens*/
.beticon2{
	position:absolute;
	z-index:15;
	background-color:rgba(0,0,0,0.7);
	color:#fff;
	font-size:20px;
	line-height:48px;
	width:48px;
	height:48px;
	font-weight:bold;
	border-radius:30px;
	text-align:center;
	box-shadow: 0px 0px 10px 5px #000;
}
.player{
	font-size: 32px;
	margin: 4px;
	padding: 4px;
	height:34px;
	background-color: rgba(255, 255, 255, 0.6);
	border: 2px solid #DDD;
	color: #970052;
	width:250px;
}
.addplayer{
	color:#AAA;
	font-size:24px;
	cursor: pointer;
	font-size: 20px;
	margin: 4px;
	padding: 2px 4px;
	background-color: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.2);
	width:288px;
	display:inline-block;
}
.colorpicker{
	width:32px;
	height:32px;
	display:inline-block;
	vertical-align:top;
	margin-top:0px;
	margin-left:4px;
	border:2px solid #0072ff;
	border-radius: 18px;
}
.colorpicker_new{
	width:16px;
	height:16px;
	display:inline-block;
	border:1px solid #000;
	border-radius: 8px;
}
.colorpicker_new img{
	width:16px;
	height:16px;
	border-radius: 7px;
}


.colorpicker img{
	width:32px;
	height:32px;
	border-radius: 16px;
}
.fullscreencolors_color{
	border: 1px solid #222;
}

input.inputtext[type="text"]{
	font-size: 40px;
	padding:8px 16px;
	border-radius: 10px;
	background-color:white;
	color:black;
}

input.inputtext[type="submit"],input.inputtext[type="button"]{
	font-size: 30px;
	padding: 8px 16px;
	border-radius: 16px;
	background-color:#11b600;
	color:white;
	margin-top:16px;
}

#circle3 {
	display: block;
	padding: 0;
	width: 350px;
	height: 350px;
	border: 4px solid #F0F;
	text-shadow: 1px 1px #000;
	box-shadow: 0px 0px 150px #f679fb;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0.9;
}
.quarter {
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
	width: 50%;
	height: 50%;
	cursor: pointer;
	font-size: 24px;
	line-height: 20px;
	bottom: 0px;
	font-weight: bold;
}
.quarter .ttext_top{
	display:inline-block;
	width:90px;
}
.quarter .ttext{
	color: white;
	display:block;
	width:90px;
}

/* star on the play again button */
#burst-12 {
      background: gold;
      width: 80px;
      height: 80px;
      position: absolute;
      transform:translate(170px,-44px) rotate(-30deg) scale(0.5);
      text-align: center;
    }
    #burst-12:before,
    #burst-12:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 80px;
      width: 80px;
      background: gold;
    }
    #burst-12:before {
      transform: rotate(30deg);
    }
    #burst-12:after {
      transform: rotate(60deg);
    }

	#burst-12-black {
      background: black;
      width: 80px;
      height: 80px;
      position: absolute;
      transform:translate(170px,-44px) rotate(-30deg) scale(0.54);
      text-align: center;
    }
    #burst-12-black:before,
    #burst-12-black:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 80px;
      width: 80px;
      background: black;
    }
    #burst-12-black:before {
      transform: rotate(30deg);
    }
    #burst-12-black:after {
      transform: rotate(60deg);
    }



/* same star, but grey */
#burst-13 {
      background: #ccc;
      width: 80px;
      height: 80px;
      position: absolute;
      transform:translate(170px,-44px) rotate(-30deg) scale(0.5);
      text-align: center;
    }
    #burst-13:before,
    #burst-13:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 80px;
      width: 80px;
      background: #ccc;
    }
    #burst-13:before {
      transform: rotate(30deg);
    }
    #burst-13:after {
      transform: rotate(60deg);
    }

	#burst-13-black {
      background: black;
      width: 80px;
      height: 80px;
      position: absolute;
      transform:translate(170px,-44px) rotate(-30deg) scale(0.54);
      text-align: center;
    }
    #burst-13-black:before,
    #burst-13-black:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 80px;
      width: 80px;
      background: black;
    }
    #burst-13-black:before {
      transform: rotate(30deg);
    }
    #burst-13-black:after {
      transform: rotate(60deg);
    }


a#q1{text-decoration:none;}
a#q2{text-decoration:none;}
a#q3{text-decoration:none;}
a#q4{text-decoration:none;}
a#q1:hover{	background-color: #000;}
a#q2:hover{	background-color: #000;}
a#q3:hover{	background-color: #000;}
a#q4:hover{	background-color: #000;}

.quizanswer{
	border: 0px solid #DDD;
	color: #888;
	margin-top:8px;
	margin-left:32px;
	margin-right:32px;
	border-radius:8px;
	font-size: 32px;
	padding:18px;
	margin:12px;
	display:block;
	text-decoration:none;
	text-shadow: 1px 1px #DDD;
}

.error{
	padding:2px 10px;
	color:red;
	background-color:white;
	display:block;
	margin-bottom:10px;
	font-size:20px;
	display:inline-block;
}

/*only used before the game has started*/
.host_sign_bottom{
	background-color:gold;
	color:black;
	position:absolute;
	font-size:12px;
	font-weight:bold;
	width:60px;
	border-radius:4px;
	border:2px solid black;
	padding:4px;
	line-height:16px;
	transform:translate(13px,-38px) rotate(0deg);
	opacity:0.9;
}
#points {
    background: red;
    animation: fadeinout 1s  ease-in forwards;
    animation: fadeinout 1s ease-in forwards;
}

@keyframes fadeinout {
  100% { opacity: 0; visibility: hidden;}
  0% { opacity: 1; }
}

@keyframes fadeinout {
  100% { opacity: 0; visibility: hidden;}
  0% { opacity: 1; }
}
@keyframes fadein {
  0% { opacity: 0; visibility: visible;}
  100% { opacity: 1; visibility: visible;}
}

/* to make a selected button blink. Length should be 1s*/
@keyframes button_brighter{
	0%{	filter: brightness(1.5);}
	20%{	filter: brightness(1.5);}
	21%{	filter: brightness(1);}
	40%{	filter: brightness(1);}
	41%{	filter: brightness(1.5);}
	60%{	filter: brightness(1.5);}
	61%{	filter: brightness(1);}
	100%{	filter: brightness(1);}
}

.bottom_won{
	position:absolute;
	width:93px;
	height:112px;
	opacity:0.6;
	/* mix-blend-mode: multiply; */
}
.bottom_won img{
	width:16px;
	height:16px;
	position:absolute;
	transform:translate(-22px,64px);
}
.bottom_won div.won{
	background-color:gold;
	font-size:11px;
	color:black;
	position:absolute;
	transform:translate(26px,-20px);
	width:40px;

}
.bottom_won div.notwon{
	background-color:red;
	font-size:11px;
	color:black;
	position:absolute;
	transform:translate(20px,-20px);
	width:52px;

}




#track{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.lane_player{
	height:100%;
	position:relative;
	text-align:center;
	margin-left:-16px;
}
.score{
	color: #CCC;
	font-size: 18px;
	margin-top:1px;
	text-align:center;
}
.scname{
	color: #CCC;
	font-size: 18px;
	margin-bottom:0px;
	text-align:center;
	line-height:12px;
	margin-bottom:-10px;
}
.lane_icon{
	position:absolute;
	display:inline;
}
.lane_icon img{
 	width:64px;
 	height:64px;
 	border-radius:16px;
 	border: 2px solid white;
}

#curtain1,#curtain2{
	background-color: #990b2a;
}

/* The board game*/

.board_token{
	position:absolute;
	display:inline-block;
	z-index:12;
	width:44px;
	height:44px;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius:32px;
	/*
	box-shadow: 0px 2px 0px 1px rgba(0,0,0,0.25);
	*/
}
.board_token_name{
    	font-family: 'Comfortaa';
	width:54px;
	height:20px;
	white-space: nowrap;
	margin-left:-5px;
	text-shadow: 	1px 1px 1px rgba(0, 0, 0, 1),
			-1px -1px 1px rgba(0, 0, 0, 1),
			1px -1px 1px rgba(0, 0, 0, 1),
			-1px 1px 1px rgba(0, 0, 0, 1);
	overflow:hidden;
	position:absolute;
	bottom:-6px;
	font-weight:bold;
	font-size:14px;
	transform:translate(0px,0px);
}
.board_token_icon{
	position:absolute;
	width:54px;
	height:54px;
	margin-left:-31px;
	margin-top:-4px;
}
.board_token_coins{
	font-family: 'Comfortaa';

	/* It was a smaller coin size: font-size:14px;*/
	font-size:15px;
	transform:translate(-1px,-4px);

	line-height:14px;
	text-shadow: 	1px 1px 1px rgba(0, 0, 0, 1),
			-1px -1px 1px rgba(0, 0, 0, 1),
			1px -1px 1px rgba(0, 0, 0, 1),
			-1px 1px 1px rgba(0, 0, 0, 1);
	width:44px;
	position:absolute;
	top:1px;
}
/* In the leaderboard, the coin size is bigger */
.lb_parent .board_token_coins{
	font-size:15px;
	transform:translate(0px,-4px);
}

.board_token_icon_img{
/*
	width:32px;
	height:23px;
Change the width/height to 33, solved the ugly border problem on the token that happens after javascript resizes the page
*/
	position:absolute;
	width:50px;
	height:50px;
	opacity:100%;
	border-radius:100%;


mix-blend-mode: luminosity(100%);
/*
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
*/


}

/* new cleaner token, created in november 2024*/
.board_token_new{
    position:absolute;
    width:100px;
    height:100px;
    border-radius:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position:center;
}
.board_token_name_new{
    position:absolute;
    font-family: 'Comfortaa';
    white-space: nowrap;
    text-shadow: 	1px 1px 1px rgba(0, 0, 0, 1),
            -1px -1px 1px rgba(0, 0, 0, 1),
            1px -1px 1px rgba(0, 0, 0, 1),
            -1px 1px 1px rgba(0, 0, 0, 1);
    font-weight:bold;
    font-size:26px;
    line-height:26px;
    transform:translateY(40px);
}
.board_token_icon_img_new{
    position:absolute;
    width:90px;
    height:90px;
    border-radius:100%;
    border:1px solid rgba(0,0,0,0.2);
}
.board_token_coins_new{
    font-family: 'Comfortaa';
    font-size:26px;
    transform:translate(0px,-40px);
    line-height:26px;
    text-shadow: 	1px 1px 1px rgba(0, 0, 0, 1),
            -1px -1px 1px rgba(0, 0, 0, 1),
            1px -1px 1px rgba(0, 0, 0, 1),
            -1px 1px 1px rgba(0, 0, 0, 1);
    position:absolute;
}

/* Used for people who we are waiting for. Their icons are at the bottom of the screen wiggling */

.wiggle{
	animation: wiggle 0.5s infinite;
	filter: saturate(100%);
}
@keyframes wiggle{
  0% {
    transform: rotate(5deg) scale(1.5);
    transform-origin: center center;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  50% {
    transform: rotate(-5deg) scale(1.5);
    transform-origin: center center;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  100% {
    transform: rotate(5deg) scale(1.5);
    transform-origin: center center;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes token_explosion{
  0% {	transform:  translate(29px,-11px) scale(1);
	opacity:1;}
  100% {transform:  translate(29px,-11px) scale(2);
  	opacity:0;}
}
@keyframes token_answered{
  0% {	transform:  scale(1);filter:brightness(100%);}
  70% {	transform:  scale(2);}
  100% {transform:  scale(1.5);filter:brightness(50%);}
}

.token_answered{
	animation:token_answered 0.3s 0s ease-out forwards;
}
.waiting_answers_explosion{
	position:absolute;
	width:80px;
	height:80px;
	transform: translate(29px,-11px) scale(1);
	border-radius:100%;
	animation:token_explosion 3s 0.1s ease-out forwards;
}

/* The round tokens that are a pie-chart */
#p1 p,#p2 p,#p3 p,#p4 p,#p5 p,#p6 p,#p7 p,#p8 p,
#p9 p,#p10 p,#p11 p,#p12 p,#p13 p,#p14 p,#p15 p,#p16 p{
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 28px;
	clip: rect(0px, 28px, 56px, 0px);
	transform: rotate(21.5deg);
	margin:0;
	padding:0;
}
#p1,#p2,#p3,#p4,#p5,#p6,#p7,#p8,
#p9,#p10,#p11,#p12,#p13,#p14,#p15,#p16{
	margin-top:-6px;
	margin-left:-6px;
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  clip: rect(0px, 56px, 56px, 28px);
  display:block;

}

/* Leaderboard on the left of board*/

#leaderboard_left{
	width:280px;
	height:720px;
	background-color:black;
	opacity:0.8;
	z-index:-1;
	position:absolute;
	transform:translate(-500px,0px);
	border:1px solid #333;
}
.leaderboard_left_title{
	padding-left:14px;
	height:60px;
	line-height:60px;
	display:block;
	border-bottom:1px solid #333;
	font-size:20px;
	text-align:left;
}


/*
#p1 p {		background-color: #fafc28;}
#p2 p {		background-color: #c0c200;}
#p3 p {		background-color: #00b05a;}
#p4 p {		background-color: #007a3e;}
#p5 p {		background-color: #3562b6;}
#p6 p {		background-color: #00379f;}
#p7 p {		background-color: #8e4a16;}

#p8 p {		background-color: #6c2f00;}
#p9 p {		background-color: #90d2fc;}
#p10 p {	background-color: #2e8cc8;}
#p11 p {	background-color: #e21884;}
#p12 p {	background-color: #a30359;}
#p13 p {	background-color: #f99d00;}
#p14 p {	background-color: #bc7907;}
#p15 p {	background-color: #e56022;}
#p16 p {	background-color: #a1071e;}
*/


/*
#p1 p {			background-color: #6c2f00;}
#p2 p {			background-color: #90d2fc;}
#p3 p {			background-color: #2e8cc8;}
#p3 p {			background-color: #e21884;}
#p4 p {			background-color: #a30359;}
#p5 p {			background-color: #f99d00;}
#p6 p {			background-color: #bc7907;}
#p7 p {			background-color: #e56022;}
#p8 p {			background-color: #a1071e;}
#p9 p {			background-color: #fafc28;}
#p10 p {		background-color: #c0c200;}
#p11 p {		background-color: #00b05a;}
#p12 p {		background-color: #007a3e;}
#p13 p {		background-color: #3562b6;}
#p14 p {		background-color: #00379f;}
#p15 p {		background-color: #8e4a16;}
#p16 p {		background-color: #6c2f00;}
*/

/*
#p1 p {			background-color: #81490d;}
#p2 p {			background-color: #b2512d;}
#p3 p {			background-color: #2277a7;}
#p4 p {			background-color: #61a5a1;}

#p5 p {			background-color: #af3c63;}
#p6 p {			background-color: #e36c8f;}
#p7 p {			background-color: #b26d00;}
#p8 p {			background-color: #d49a3f;}

#p9 p {			background-color: #ae303a;}
#p10 p {		background-color: #db5359;}
#p11 p {		background-color: #a99b00;}
#p12 p {		background-color: #ceba42;}

#p13 p {		background-color: #2a7542;}
#p14 p {		background-color: #569e66;}
#p15 p {		background-color: #384f6e;}
#p16 p {		background-color: #69727e;}
*/

#p1 p, #p2 p, #p3 p, #p3 p, #p4 p, #p5 p, #p6 p, #p7 p, #p8 p, #p9 p, #p10 p , #p11 p , #p12 p , #p13 p , #p14 p , #p15 p , #p16 p{

}

#p1 p, #p2 p, #p3 p, #p3 p, #p4 p, #p5 p, #p6 p, #p7 p, #p8 p, #p9 p, #p10 p , #p11 p , #p12 p , #p13 p , #p14 p , #p15 p , #p16 p{
	background-color:gold;
}

/* By default they're all transparant, if they don't have this class, the previous declared color is shown*/
.trp{
	background-color: rgba(255,255,255,0.5) !important;
}

/* this adds a DOT to the tokens
.trp:before {
	position:absolute;
	transform:translate(-6px,-21px);
	font-size:22px;
	color:rgba(255,255,255,0.15);
	content: ".";
}
*/

#p2 {		transform: rotate(22.5deg);}
#p3 {		transform: rotate(45deg);}
#p4 {		transform: rotate(67.5deg);}
#p5 {		transform: rotate(90deg);}
#p6 {		transform: rotate(112.5deg);}
#p7 {		transform: rotate(135deg);}
#p8 {		transform: rotate(157.5deg);}
#p9 {		transform: rotate(180deg);}
#p10 {		transform: rotate(202.5deg);}
#p11 {		transform: rotate(225deg);}
#p12 {		transform: rotate(247.5deg);}
#p13 {		transform: rotate(270deg);}
#p14 {		transform: rotate(292.5deg);}
#p15 {		transform: rotate(315deg);}
#p16 {		transform: rotate(337.5deg);}



/* used in function_text_zoom.php*/
@keyframes text_zoomin{
	0%{	animation-timing-function: linear;
		visibility:visible;
		transform:scale(0.5) rotate(4deg);
		opacity:0;
	}
	70%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:scale(1.2) rotate(0deg);
		opacity:1;
	}
	100%{ animation-timing-function: ease-in;
		visibility:visible;
		transform:scale(1) rotate(0deg);
		opacity:1;
	}
}
@keyframes text_zoomout{
	0%{	animation-timing-function: ease-out;
		visibility:visible;
		transform:scale(1);
		opacity:1;
	}
	30%{	animation-timing-function: ease-out;
		visibility:visible;
		transform:scale(1.3) rotate(0deg);
		opacity:1;
	}
	100%{	animation-timing-function: ease-out;
		visibility:visible;
		transform:scale(0.5);
		opacity:0;
	}
}
/* used in function_text_zoom.php*/
@keyframes text_frombottom{
	0%{	animation-timing-function: linear;
		visibility:visible;
		transform:translateY(500px) scale(1);
	}
	70%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(-50px) scale(0.8,1.5);
	}
	80%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(-50px) scale(0.8,1.5);
	}
	100%{ animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(0px) scale(1);
	}
}

/* used in function_text_zoom.php*/
@keyframes text_frombottom_reverse{
	0%{	animation-timing-function: linear;
		visibility:visible;
		transform:translateY(0px) scale(1);
	}
	70%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(-50px) scale(0.8,1.5);
	}
	80%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(-50px) scale(0.8,1.5);
	}
	100%{ animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(800px) scale(1);
	}
}






/* used in function_text_zoom.php*/
@keyframes text_fromtop{
	0%{	animation-timing-function: linear;
		visibility:visible;
		transform:translateY(-500px) scale(1);
	}
	70%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(50px) scale(0.8,1.5);
	}
	80%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(50px) scale(0.8,1.5);
	}
	100%{ animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(0px) scale(1);
	}
}

/* used in function_text_zoom.php*/
@keyframes text_fromtop_reverse{
	0%{	animation-timing-function: linear;
		visibility:visible;
		transform:translateY(0px) scale(1);
	}
	70%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(50px) scale(0.8,1.5);
	}
	80%{	animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(50px) scale(0.8,1.5);
	}
	100%{ animation-timing-function: ease-in;
		visibility:visible;
		transform:translateY(-500px) scale(1);
	}
}

/* used in function_text_slap.php*/
@keyframes text_slap{
	0%{	animation-timing-function: linear;
		visibility:visible;
		transform:scale(3);
		opacity:0;
	}
	100%{	visibility:visible;
		transform:scale(1);
		opacity:1;
	}
}


/* Tokens at bottom that show the "HAS TOKEN" and didn't win token*/
#bottom_losers{
	position:absolute;
	transform:translate(-370px,332px);
	z-index:99902;
	width:550px;
	height:100px;
}
#bottom_winners{
	position:absolute;
	transform:translate(368px,332px);
	z-index:99902;
	width:550px;
	height:100px;
}
#sign_winners{
	transform:translate(68px,310px);
 	position:absolute;
	z-index:99902;
	width:60px;
	height:40px;
	line-height:16px;
	background-color:#1d9517;
	text-align:center;
	font-size:8px;
	letter-spacing: 0.5px;
	font-weight:bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

#sign_losers{
	transform:translate(-68px,310px);
 	position:absolute;
	z-index:99902;
	width:60px;
	height:40px;
	line-height:16px;
	background-color:#b51616;
	text-align:center;
	font-size:8px;
	letter-spacing: 0.5px;
	font-weight:bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

#game_title_bottom{
	transform:translate(0px,310px);
 	position:absolute;
	z-index:99903;
	width:100px;
	height:40px;
	line-height:16px;
	background: black;
	color:#FFF;
	text-align:center;
	font-size:12px;
	letter-spacing: 0.5px;
	font-weight:bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

#bottom_black_bar{
	width:1400px;
	height:200px;
	background-color:black;
	opacity:0.68;
	position:absolute;
	transform:translateY(360px);
}

.token_sign_lost{
	padding:8px 16px;
	background-color:#b51616;
	transform:scale(1) translate(-40px,-6px) rotateZ(-6deg);
	border-radius:16px;
	border: 3px solid white;
	position:absolute;
	z-index:99;
	font-size:24px;
	width:100px;
	font-weight:bold;
	text-align:center;
}
.token_sign_won{
	padding:8px 16px;
	background-color:#1d9517;
	transform:scale(1) translate(-40px,-6px) rotateZ(-6deg);
	border-radius:16px;
	border: 3px solid white;
	position:absolute;
	z-index:99;
	font-size:24px;
	width:100px;
	font-weight:bold;
	text-align:center;
}


@keyframes bottom_black_bar_up{
	0%{	transform:translateY(614px);visibility:visible;}
	80%{	transform:translateY(350px);visibility:visible;}
	100% {	transform:translateY(360px);visibility:visible;}
}
@keyframes bottom_black_bar_down{
	0%{	transform:translateY(360px);visibility:visible;}
	80%{	transform:translateY(350px);visibility:visible;}
	100% {	transform:translateY(614px);visibility:visible;}
}



@keyframes bottom_losers_up{
	0%{	transform:translate(-370px,614px);visibility:visible;}
	80%{	transform:translate(-370px,322px);visibility:visible;}
	100% {	transform:translate(-370px,332px);visibility:visible;}
}
@keyframes bottom_losers_down{
	0%{	transform:translate(-370px,332px);visibility:visible;}
	80%{	transform:translate(-370px,322px);visibility:visible;}
	100% {	transform:translate(-370px,614px);visibility:visible;}
}
@keyframes bottom_winners_up{
	0%{	transform:translate(368px,614px);visibility:visible;}
	80%{	transform:translate(368px,322px);visibility:visible;}
	100% {	transform:translate(368px,332px);visibility:visible;}
}
@keyframes bottom_winners_down{
	0%{	transform:translate(368px,332px);visibility:visible;}
	80%{	transform:translate(368px,322px);visibility:visible;}
	100% {	transform:translate(368px,614px);visibility:visible;}
}


@keyframes sign_losers_up{
	0%{	transform:translate(-68px,614px);visibility:visible;}
	80%{	transform:translate(-68px,300px);visibility:visible;}
	100% {	transform:translate(-68px,310px);visibility:visible;}
}
@keyframes sign_losers_down{
	0%{	transform:translate(-68px,300px);visibility:visible;}
	80%{	transform:translate(-68px,310px);visibility:visible;}
	100% {	transform:translate(-68px,614px);visibility:visible;}
}

@keyframes sign_winners_up{
	0%{	transform:translate(68px,614px);visibility:visible;}
	80%{	transform:translate(68px,300px);visibility:visible;}
	100% {	transform:translate(68px,310px);visibility:visible;}
}
@keyframes sign_winners_down{
	0%{	transform:translate(68px,300px);visibility:visible;}
	80%{	transform:translate(68px,310px);visibility:visible;}
	100% {	transform:translate(68px,614px);visibility:visible;}
}

@keyframes game_title_bottom_up{
	0%{	transform:scale(1) translate(0px,614px);visibility:visible;}
	80%{	transform:scale(1) translate(0px,300px);visibility:visible;}
	100% {	transform:scale(1) translate(0px,310px);visibility:visible;}
}
@keyframes game_title_bottom_down{
	0%{	transform:scale(1) translate(0px,310px);visibility:visible;}
	80%{	transform:scale(1) translate(0px,300px);visibility:visible;}
	100% {	transform:scale(1) translate(0px,614px);visibility:visible;}
}


.tokenblink{
	animation: tokenblink 1s 0s infinite;
}
/*tbg = Token Blink Green*/
.tbg{
	animation: tokenblinkgreen 1s 0s infinite;
}
.tokennoblink{
	animation: tokennoblink 1s 0s infinite;
}

@keyframes tokennoblink{
	0% {background-color:#ffd700;}
	100% {background-color:#ffd700;}
}


@keyframes tokenblinkgreen{
	0%{	background-color:#ffd700;}
	50% {	background-color:#ffd700;}
	51% {	background-color:rgba(255,255,255,0.5);}
	100% {	background-color:rgba(255,255,255,0.5);}
}

@keyframes tokenblink{
	0%{	background-color:white;}
	50% {	background-color:white;}
	51% {	background-color:#ffd700;}
	100% {	background-color:#ffd700;}
}




@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
#countdown_timer::after,#second_countdown_timer::after{
  content: counter(num);
}
@keyframes counter {
  from {
    --num: 500;
  }
  to {
    --num: 0;
  }
}
@keyframes counter_from_top{
	0%{	transform:translateY(-400px);}
	100%{	transform:translateY(-345px);}
}
@keyframes counter_from_top_reverse{
	0%{	transform:translateY(-345px);}
	100%{	transform:translateY(-400px);}
}
#countdown_timer,#second_countdown_timer{
	position:absolute;
	transform:translate(0px,-400px);
	z-index:99999;
	color:#AAA;
	font-size:22px;
	font-weight:bold;
	background-color:#333;
	width:80px;
	text-align:center;
	border-radius:0px 0px 100px 100px
}


/* connect four */
#connect4_board{

}
#connect4_blueoverlay td{
	background-image: url('/i/files/c4_bg.png');
	background-size: 50px 50px;
}
#connect4_blueoverlay td:nth-child(1)::after {	content: '1';transform:translate(-4px,-19px);}
#connect4_blueoverlay td:nth-child(2)::after {	content: '2';transform:translate(-6px,-19px);}
#connect4_blueoverlay td:nth-child(3)::after {	content: '3';transform:translate(-6px,-19px);}
#connect4_blueoverlay td:nth-child(4)::after {	content: '4';transform:translate(-6px,-19px);}
#connect4_blueoverlay td:nth-child(5)::after {	content: '5';transform:translate(-6px,-19px);}
#connect4_blueoverlay td:nth-child(6)::after {	content: '6';transform:translate(-6px,-19px);}
#connect4_blueoverlay td:nth-child(7)::after {	content: '7';transform:translate(-6px,-19px);}
#connect4_blueoverlay td:nth-child(8)::after {	content: '8';transform:translate(-6px,-19px);}
#connect4_blueoverlay td:nth-child(9)::after {	content: '9';transform:translate(-6px,-19px);}
#connect4_blueoverlay td:nth-child(10)::after {	content: '10';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(11)::after {	content: '11';transform:translate(-7px,-19px);}
#connect4_blueoverlay td:nth-child(12)::after {	content: '12';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(13)::after {	content: '13';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(14)::after {	content: '14';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(15)::after {	content: '15';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(16)::after {	content: '16';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(17)::after {	content: '17';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(18)::after {	content: '18';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(19)::after {	content: '19';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(20)::after {	content: '20';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(21)::after {	content: '21';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(22)::after {	content: '22';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(23)::after {	content: '23';transform:translate(-10px,-19px);}
#connect4_blueoverlay td:nth-child(24)::after {	content: '24';transform:translate(-10px,-19px);}

#connect4_blueoverlay td:nth-child(1){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(2){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(3){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(4){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(5){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(6){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(7){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(8){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(9){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(10){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(11){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(12){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(13){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(14){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(15){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(16){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(17){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(18){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(19){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(20){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(21){	filter: brightness(100%);}
#connect4_blueoverlay td:nth-child(22){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(23){	filter: brightness(80%);}
#connect4_blueoverlay td:nth-child(24){	filter: brightness(80%);}

#connect4_blueoverlay td::after {
	position:absolute;
	font-weight:bold;
	text-align:center;
	font-size:22px;
	color:rgba(112,112,166,0.2);
}
@keyframes connect4_falldown {
	0%	{	transform:translateY(-800px);	animation-timing-function:ease-in;visibility:visible;}
	79%	{	transform:translateY(0px);	animation-timing-function:ease-out;}
	84%	{	transform:translateY(-20px);	animation-timing-function:ease-in;}
	93%	{	transform:translateY(0px);	animation-timing-function:linear;}
	96%	{	transform:translateY(-2px);	animation-timing-function:linear;}
	100%	{	transform:translateY(0px);	animation-timing-function:linear;visibility:visible;}
}
.c4win{
	position:absolute;
	width:38px;
	height:38px;
	border-radius:40px;
	transform:translate(-1px,-25px);
	
}
.c4justwon{
	position:absolute;
	width:38px;
	height:38px;
	border:8px solid rgba(255,255,0,1);
	border-radius:40px;
	transform:translate(-1px,-25px);
	background-color:rgba(255,255,0,0.1);
	
	visibility:hidden;
}
.c4justwon_explosion,.c4justwon_explosion2{
	position:absolute;
	width:38px;
	height:38px;
	transform:translate(-1px,-25px);
	border-radius:40px;
	background-color:rgba(255,255,255,1);
	visibility:hidden;
}
.c4m{
	width:56px;
	height:56px;
	opacity:0.9;
	mix-blend-mode:luminosity;
	position:absolute;
	z-index:20;
	border-radius:100%;
	overflow:hidden;
}

@keyframes c4_explosion{
	0%	{	transform:translate(-1px,-25px) scale(1);visibility:visible;opacity:0;}
	100%	{	transform:translate(-1px,-25px) scale(1);visibility:visible;opacity:1;}
}
@keyframes c4_explosion2{
	0%	{	transform:translate(-1px,-25px) scale(1);visibility:visible;opacity:1;}
	100%	{	transform:translate(-1px,-25px) scale(1.5);visibility:visible;opacity:0;}
}
#connectfour_leaderboard{
	position:absolute;
	width:220px;
	height:700px;
	transform:translate(524px,24px);
	opacity: 0.9;
}
#connectfour_leaderboard #connectfour_header{
	display:block;
	width:220px;
	height:40px;
	line-height:40px;
	background-color:#333;
	font-size:18px;
	text-align:left;
	background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
	border-radius: 2px;
}
#connectfour_leaderboard #connectfour_results_text{
	font-size:18px;
	background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(255,255,255,1));
	padding-left:16px;
	height:40px;
	line-height:40px;
	color:#000;
	font-weight:bold;
	border-radius: 2px;
}

.stickman_sign_false{
	background-color:#9b4b4b;
	position:absolute;
	font-size: 16px;
	font-weight:bold;
	width:60px;
	line-height:30px;
	text-align:center;
	transform: translate(25px,-10px) rotate(90deg);
	border-radius:2px;
}
.stickman_sign_true{
	background-color:#4c833f;
	position:absolute;
	font-size: 16px;
	font-weight:bold;
	width:60px;
	line-height:30px;
	text-align:center;
	transform: translate(-46px,-15px) rotate(-90deg);
	border-radius:2px;
}



.chest_container{
	position:absolute;
	width: 200px;
	height: 150px;
	perspective: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.chest_back{
	position:absolute;
	transform:translate(0px,2px);
	width:200px;
	height:95px;
	filter: brightness(70%);
	border: 4px solid black;
	transform: translate3D(75px,-35px,-60px) rotateX(-23deg) rotateY(-30deg);
}
.chest_left{
	position:absolute;
	transform:translate(0px,2px);
	width:100px;
	height:90px;
	filter: brightness(60%);
	border: 4px solid black;
	transform: translate3D(-49px,-35px,-30px) rotateX(-25deg) rotateY(45deg);
}
.chest_top_open{
	position:absolute;
	transform:translate(0px,2px);
	width:186px;
	height:100px;
	filter: brightness(85%);
	border: 4px solid black;
	transform: translate3D(81px,-98px,13px) rotateX(-68deg) rotateY(-8deg) rotateZ(0deg);
}
.chest_top_closed{
	position:absolute;
	width:190px;
	height:100px;
	filter: brightness(80%);
	border: 4px solid black;
	transform: translate3D(31px,-56px,60px) rotateX(70deg) rotateY(-1deg) rotateZ(36deg);
}
.chest_carrot{
	position:absolute;
	width:100px;
	height:150px;
	transform:translate(50px,-45px) rotate(-30deg);
	filter: brightness(100%);
}
.chest_lock{
	position:absolute;
	width:10px;
	height:15px;
	transform:translate(0px,-45px) rotate(-30deg)
}
.chest_front{
	position:absolute;
	transform:translate(0px,2px);
	width:200px;
	height:100px;
	filter: brightness(80%);
	border: 4px solid black;
	transform: rotateX(-25deg) rotateY(-25deg);
}
.chest_right{
	position:absolute;
	transform:translate(0px,2px);
	width:100px;
	height:98px;
	filter: brightness(60%);
	border: 4px solid black;
	transform: translate3D(129px,2px,15px) rotateX(-25deg) rotateY(45deg);
}
.chest_tap{
	position:absolute;
	transform:translate(0px,22px) rotate(10deg);
	width:100px;
	height:98px;
	font-size:20px;
	line-height:20px;
	color:black;
}
.chest_no_carrot{
	position:absolute;
	color:black;
	font-size:20px;
	opacity:0.4;
	transform:translate(40px,-60px) rotate(8deg);
}
/*poker countdown*/
.cdnumber{
	position:absolute;
	width:130px;
	height:40px;
	transform:translateY(-65px);
	visibility:hidden;
}