#subtract1,
#subtract2,
#subtract3{background: #ff5b56;}
#add1,
#add3,
#add2{background: #83ffa4;}
#container{
	color: #312c25;
}
.white{
	background-color: #fff;
}
.blue{
	background-color: #5583ff;
}
.grey{
	background-color: #7c7c7c;
}
.two_sided{
	display: inline-block;
	text-align: center;
	align-content: center;
}
.two_sided .blue, .two_sided .white, .two_sided .grey{
	border: 4px solid black;
	height: 110px;
	width: 74px;
	color:black;
	font-size: 75px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
}
.notSelectable{
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
}
#words,#first_col{
	display: inline-block;
	vertical-align: top;
}
#words{
}
.pointTracker{
	border:4px black solid;
	height: 250px;
	width: 300px;
	margin: 0;
}
#pointers{
	width:910px;
	display: inline-block;
	/*height: 302px;*/
	/*align-items: center;*/
	text-align: center;
	/*vertical-align: middle;*/
	margin: 0;
}
#pointers>div{
	font-family: 'Russo One', sans-serif;
	margin: 0;
	display: inline-block;
}
#player1_track{
	background: #bbd190;
}
#player2_track{
	background: #ff9e6a;
}
#player3_track{
	background: #b4c2ff;
}
#player4_track{
	background: #ff92f9;
}
.name, .points{margin-top:20px;}
.sign{
	border:1px solid black;
	width: 250px;
	margin: auto;
	height: 48px;
	line-height: 44px;
	background: #ffffff;
	color:black;
	font-weight: bold;
	font-size: 24px;
	vertical-align: middle;
	-moz-box-shadow: 0 0 5px #fff46a;
	-webkit-box-shadow: 0 0 5px #fff46a;
	box-shadow: 0px 0px 5px #fff46a;
	text-shadow: 0px 3px 4px rgba(150, 150, 150, 1);
}
.selected, .vowels, .notSelected{
	font-size: 20px;
	font-weight: bold;
	text-shadow: 2px 2px #000000;
}
.selected{
	color: grey;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}
.vowels{
	color: yellow;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}
.notSelected{
	color: white;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}
#letterTracking {
	padding:5px 1px;
	display: inline-block;
	width: 100%;
}
#letterTracking > div{
	background: #B0BEC5;
	border:3px solid black;
	width: 100%;
}
#letterTracking > div > div{
	display: inline-block;
	font-size: 46px;
	margin:1px;
}
#WOFTitle{
	display: inline-block;
	font-size: 46px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}
#categoryTracking{
	display: inline-block;
}
#category{
	display: inline-block;
	font-size: 32px;
	width: 100%;
	padding-top: 7px;
	padding-bottom: 2px;
}
canvas{
	cursor: pointer; cursor: hand;
}




#container{
	margin-right:auto;
	margin-left:auto;
	width: 1378px;
}
@media screen and (max-width: 1377px) {
	#container{
		margin-right:auto;
		margin-left:auto;
		width: 1190px;
	}
	.two_sided .blue, .two_sided .white, .two_sided .grey{
		border: 3px solid black;
		height: 80px;
		width: 65px;
		color:black;
		font-size: 55px;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		display: inline-block;
	}
	.pointTracker{
		border:3px black solid;
		padding:15px 0;
		height: 250px;
		width: 210px;
		margin: 0;
	}
	#pointers{
		width:730px;
		display: inline-block;
		/*height: 302px;*/
		/*align-items: center;*/
		text-align: center;
		/*vertical-align: middle;*/
		margin: 0;
	}
	.sign{
		border:1px solid black;
		width: 190px;
		margin: auto;
		height: 38px;
		line-height: 44px;
		background: #ffffff;
		color:black;
		font-weight: bold;
		font-size: 24px;
		vertical-align: middle;
		-moz-box-shadow: 0 0 5px #fff46a;
		-webkit-box-shadow: 0 0 5px #fff46a;
		box-shadow: 0px 0px 5px #fff46a;
		text-shadow: 0px 3px 4px rgba(150, 150, 150, 1);
	}
	#category{
		padding-top: 25px;
		padding-bottom: 15px;
		font-size: 24px;
	}
	#letterTracking {
		padding:3px 1px;
		display: inline-block;
		width: 100%;
	}
	#letterTracking > div{
		background: #B0BEC5;
		border:3px solid black;
		width: 100%;
	}
	#letterTracking > div > div{
		display: inline-block;
		font-size: 35px;
		margin:1px;
	}
}
.r1 {
	border-top:5px blue solid!important;
}
.r4{
	border-bottom:5px blue solid!important;
}
.b1.r4, .b1.r3, .b1.r2, .b1.r1{
	border-left:5px blue solid!important;
}
.b14.r4, .b18.r3, .b18.r2, .b14.r1{
	border-right:5px blue solid!important;
}
.b1.r3, .b2.r3, .b18.r3,.b17.r3 {
	border-bottom:5px blue solid!important;
}
.b18.r2,.b17.r2,.b1.r2, .b2.r2 {
	border-top:5px blue solid!important;
}


/*///////////////////////////////
/////fliping started //////////////
///////////////////////////////*/

/*///////////////////////////////
/////fliping ended //////////////
///////////////////////////////*/