@import url(https://fonts.googleapis.com/css?family=Roboto:700);
	.section_gomoku {	margin:0; padding: 25px 0;  background: #2c3e50 }

	section {	  margin-top: 10px;	}

	.board {	  margin: auto;	  margin-top: 10px;	  width: 400px;	  height: 400px;	}
	.boardRow {	  width: 100%;	  height: 7.69230769231%;	  border-bottom: 1px solid #2c3e50;	  box-sizing: border-box;	position:relative; 	}
	.boardCol {	  width: 7.69230769231%;	  height: 100%;	  background-color: #34495e;	  float: left;	  border-radius: 3px;	  border-left: 1px solid #2c3e50;	  box-sizing: border-box;	}
	.boardCol:hover{			background: #485b6e	}
	.mobile .boardCol:hover{		background: #34495e	}
	.gameover .boardCol:hover{	background: #34495e	}
	.legende_row{	position: absolute;	top: 8px;	left: -12px;		color: #5c6d7e;	font-size: 10px;	font-weight: 600;	cursor: default;	}
	.div_legende_col{width: 100%;    height: 7.69230769231%;    border-bottom: 1px solid #2c3e50;    box-sizing: border-box;    position: relative;	}
	.legende_col{    width: 7.69230769231%;    height: 20px;    float: left;    text-align: center;	   padding-top: 2px;	box-sizing: border-box;	color: #5c6d7e;	font-size: 10px;	font-weight: 600;	cursor: default;	}

@media (max-width: 500px) {
		.div_legende_col , .legende_col , .legende_row{		display: none;	}
	}
	
	.boardCellCross {	  margin: auto;   margin-top: 0.65%;	  width: 3px;	  height: 98.7%;	  background-color: black;	  -webkit-transform: rotate(-45deg);	  transform: rotate(-45deg);	  border-radius: 1.5px;	}
	.boardCellCross:before {	  background-color: inherit;	  border-radius: inherit;	  height: inherit;	  width: inherit;
	  position: absolute;	  content: "";	  -webkit-transform: rotate(90deg);	  transform: rotate(90deg);	}

	.boardCellCircle {	  margin: 15%;	  width: 70%;	  height: 70%;	  border: 3px solid white;
	  border-radius: 50%;	  box-sizing: border-box;	}

	.controls {	  width: 400px;	  height: 17px;	  margin: auto;	}

	.newGameCtrl, .sizeCtrl, .messages {	  position: relative;	  display: inline-block;	  height: 100%;	  width: 6.6666666667%;	}

	.sizeCtrl, .messages {	  float: right;	}

	.messages {	  width: 73.3333333333%;	  z-index: 0;	}

	#check {	  display: none;	}

	.newContainer {	  z-index: 10;	}

	.newMain, .sizeScale, .messagesContainer {	  width: 100%;	  height: 100%;	  position: absolute;	  z-index: 50;	  display: table;	  text-align: center;	}

	.newMain, .sizeScale {	  cursor: pointer;	  background-color: #2ecc71;	  border-radius: 50%;	}
	.newMain:hover, .sizeScale:hover {	  background-color: #e74c3c;	}

	.newMainText {	  font-family: "Roboto", sans-serif;	  font-size: 13px;	  color: white;	display: block;	text-align: center;		padding-top: 6px;		}

	.messagesContainer .newMainText {	  color: #2ecc71;	}

	.messagesContainer .looseState {	  color: #e74c3c;	}

	.newPlate {	  width: 100%;	  height: 100%;	  opacity: 0;	  transition: all 0.2s ease-in;	  position: absolute;	  top: 0;
	  right: 0;	  bottom: 0;	  left: 0;	  z-index: 5;	}
	.newPlate:hover {	  background-color: #34495e;	}

	.newPlate:nth-of-type(1) {	  transition-delay: 0s;	}

	.newPlate:nth-of-type(2) {	  transition-delay: 0.3s;	}

	#check:checked ~ .newMain + .newContainer .newPlate {	  opacity: 1;	}
	#check:checked ~ .newMain + .newContainer .newPlate:nth-of-type(1) {	  left: 100%;	}
	#check:checked ~ .newMain + .newContainer .newPlate:nth-of-type(2) {	  left: 200%;	}

.boutonJeu   { 	display: inline-block;     cursor: pointer; 		background-color: #FFFFFF;    cursor: pointer;    padding: 6px 16px;   
				margin: 10px;    border-radius: 5px;    border: 1px solid transparent;    color: #2c3e50;	font-weight: 600;
}
.gameover .boutonJeu   {	border-color:	orange; background-color:#1bdf6e;		}
.boutonJeu:hover{		background-color: #fff;	border-color: #fff; }

.encartScore{				display:inline-block; width: 150px; background: #2c3e50; font-weight: bold;	 border: 1px solid transparent;		cursor: default;	}
.encartScore.encartActif{ 	border-color: white; background: #2c3e50;}
.encartScore.encartWin{ 	border-color: white; }
#score1, #score2{			display:inline-block;	font-weight: 600;    font-size: 16px;	color:#fff; }


.clicked{	background-color: #111;					}
.last{		box-shadow: inset 0 0 0 1px #B4C9D8; 	background: #2f4357;}
.gameover .last, .gameover .last:hover{		background:#264234 ;  box-shadow: inset 0 0 1px 1px #B7C9E2; 		}
.gameover .winstate, .gameover .winstate:hover{		background:#B7C9E2 }

#message_bas{color: white;font-weight: 600;padding-top: 5px;	display: inline-block; height:16px; }

#crosshair {			top: -161px;			left: -554px;		height: 80px;		width: 80px;	 	position: absolute;		opacity:0.8;	z-index: 20;	}
#crosshair .circle{
	height: 70px;		width: 70px;		border-radius: 50%;		display: block;		border: 3px solid white;	position: absolute; top:5px; left:5px;
}

#crosshair .vertical, #crosshair .vertical::after, #crosshair .horizontal, #crosshair .horizontal::after{	
    border: 2px solid orange;    position: absolute;
    top: -5px;    left: 38px;    height: 22px;	width: 0px;
	}
	
#crosshair .vertical::after{			content:''; 	top: 65px;    	left: -1px;		}
#crosshair .horizontal{		 		top: 36px;    	left: -4px;		height: 0px;	width: 22px;				}
#crosshair .horizontal::after{		content:''; 	top: -1px;    	left: 65px;		height: 0px;	width: 22px;		}


#crosshair.nop .circle,   #crosshair.nop  .vertical, #crosshair.nop  .vertical::after, #crosshair.nop  .horizontal, #crosshair.nop  .horizontal::after{	 border-color: blue;			}


.boardCol.selected{	background: #485b6e; box-shadow: inset 0 0 2px 1px orange;	}