@font-face {
	font-family: "default";
	src: url('../../../font/Raleway-Medium.ttf');
}
*, html, body, div, a, img, textarea, input, select {
	box-sizing:border-box;
	font-family: "default", sans-serif;
}
*:focus {
    outline: none;
}
body {
	width:100%;
	height:100%;
	font-size:16px;
	background-color:#fdfdfd;
    color:#444;
	padding:0;
	margin:0;
}
a { cursor:pointer;color:#444;text-decoration:none; }
h1 { font-size:150%; }


.w.pion { background: transparent url(whites.png) 0 0; }
.w.cheval { background: transparent url(whites.png) -80px 80px; }
.w.fou { background: transparent url(whites.png) -160px 80px; }
.w.tour { background: transparent url(whites.png) 0 80px; }
.w.dame { background: transparent url(whites.png) -240px 80px; }
.w.roi { background: transparent url(whites.png) -320px 80px; }

.b.pion { background: transparent url(blacks.png) 0 80px; }
.b.cheval { background: transparent url(blacks.png) -80px 0; }
.b.fou { background: transparent url(blacks.png) -160px 0; }
.b.tour { background: transparent url(blacks.png) 0 0; }
.b.dame { background: transparent url(blacks.png) -240px 0; }
.b.roi { background: transparent url(blacks.png) -320px 0; }

.piece { width:12.5%;height:12.5%;position:absolute;}
.piece img { 
	width:100%;
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none; 
}

.switchcontainer {
	display:flex;
	align-items:center;
	justify-content:center;
}

.switch {
	background-color: #bebebe;
	border-radius: 20px;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	color: #fff;
	cursor: pointer;
	display: block;
	height: 30px;
	/*margin-bottom: 12px;*/
	position: relative;
	width: 40px;
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-o-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}
.switchcontainer.checked .switch {
	/*background-color: #76d21d;*/
}
.switch .inner {
	cursor: pointer;
	width: 22px;
	height: 22px; /*10px;*/
	left: 4px;
	top: 4px;
	position: absolute;	
	-webkit-transition: left 0.05s ease-in-out;
	-moz-transition: left 0.05s ease-in-out;
	-o-transition: left 0.05s ease-in-out;
	-ms-transition: left 0.05s ease-in-out;
	transition: left 0.05s ease-in-out;
	
	border-radius:50%;
	background-color:#ffffff;
}
.switchcontainer.checked .switch .inner {
	left: 14px;
}
/*.switchlabel {*/
	/*width:70%;
	max-width:300px;*/
	/*display:block;*/
	/*margin:0 0 0 12px;*/
	/*height: 50px;	
	padding:0;*/
/*}*/


.endgame {
	position:fixed;left:0;right:0;top:8px;text-align:center;font-size:90%;
	animation-duration: 2s;
	animation-name: pulse;
	animation-iteration-count: infinite;
}	
	
@keyframes pulse {
	0% { transform:scale(1); }
	50% { transform:scale(1); }
	65%  { transform:scale(1.08); }
	80% { transform:scale(1); }
	100% { transform:scale(1); }
}