html {
  overflow: hidden;
}

b {
  font-family: Arial, Helvetica, sans-serif, 
  
}

h1 {
  color: black;
  margin: 0px 0px 2px 0px;
  font-size: 50px;
  padding: 2px 1px 5px 1px;
  text-align: left;
  display: block;
  position: fixed;
  left: 35px;
  top: 15px;
}
h1 sup {
    color: white;
    background-color: red;
    border-radius: 40px;
    font-size: 18px;
    padding: 1px 6px;
    text-transform: uppercase;
    vertical-align: revert;
}
h2 {
  font-weight: bold;
  color: #3cb0fd;
  margin: 0px 0px 2px 0px;
  font-size: 18px;
  padding: 2px 1px 5px 1px;
  border-bottom: 3px solid #3cb0fd;
  text-align: justify;
  margin-bottom: 15px;
}

h5 {
  font-weight: bold;
  color: #010b10;
  margin: 0px 0px 2px 0px;
  font-size: 22px;
  padding: 2px 1px 5px 1px;
  text-align: justify;
}

p {
  font-weight: arial;
  font-size: 14px;
  padding: 2px 1px 5px 1px;
  text-align: justify;
}

p.center {

  font-size: 14px;
  padding: 2px 1px 5px 1px;
  text-align: center;
}

body {
  font-family: verdana, helvetica, arial, sans-serif;
  border: 0px;
  margin: 0px;
  background: #eee;
}

.btn-new {
  background-origin: Haibu_board;
  float: center;
  font-size: 14px;
  background: #171d25;
  padding: 2px 1px 5px 1px;
  text-align: center;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background-size: auto;
  background-position: center;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  background: #fffffa;
  border: 5px solid #171d25;
}

#Haibu_container {
  position: relative;
}
.board_console .num {
  vertical-align: bottom !important;
}
.num.color-0.note:before {
  content: "";
  background-image: url("../img/pen2.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
  background-size: 45%;
  background-position: center;
} 
/****
  MODALS
****/

.modal-title {
  line-height: 2.5;
}

/** New game Modal **/

#levelModal div.choix-niveau {
  text-align: center;
}

#levelModal button.chooseLevel {
  width: 50%;
  text-align: center;
  border: 2px solid;
  margin: 10px auto;
  color: white;
  padding: 10px 0px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
}

#levelModal button.chooseLevel:hover {
  background-color: #999999;
  cursor: pointer;
}


#levelModal button.chooseNext {
  width: 50%;
  text-align: center;
  border: 2px solid;
  margin: 10px auto;
  color: white;
  padding: 10px 0px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
}

#levelModal button.chooseNext:hover {
  background-color: #999999;
  cursor: pointer;
}

#levelModal button.chooseStart {
  width: 50%;
  text-align: center;
  border: 2px solid;
  margin: 10px auto;
  color: white;
  padding: 10px 0px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
}

#levelModal button.chooseStart:hover {
  background-color: #999999;
  cursor: pointer;
}

/** Rules Modal **/

#rulesModal b.main-green {
  border-radius: 20px;
  padding: 3px 7px;
}

#rulesModal div:last-child {
  padding-top: 15px;
}


/** Main Colors **/
.main-green {
  background-color: #60c241;
  border: 3px solid #60c241;
}

.main-orange {
  background-color: orange;
  border: 3px solid orange;
}

.main-red {
  background-color: #e11e11;
  border: 3px solid #e11e11;
}

.main-black {
  background-color: black;
  border: 3px solid black;
}

.main-blue {
  background-color: blue;
  border: 3px solid blue;
}

/** Recommencer Modal **/

#confModal div.choix-conf {
  text-align: center;
}

#confModal button.chooseLevel {
  width: 50%;
  text-align: center;
  border: 2px solid;
  margin: 10px auto;
  color: white;
  padding: 10px 0px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: bold;
}

#confModal button.chooseLevel:hover {
  background-color: #999999;
  cursor: pointer;
}


#confModal button.chooseNext {
  width: 50%;
  text-align: center;
  border: 2px solid;
  margin: 10px auto;
  color: white;
  padding: 10px 0px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: bold;
}

#confModal button.chooseNext:hover {
  background-color: #999999;
  cursor: pointer;
}


/*****
  TOOLBAR
******/

#toolbar {
  position: fixed;
  right: 35px;
  bottom: 15px;
  background-color: #eeeeee;
  z-index: 99;
  /* border-radius: 30px; */
  padding: 10px 15px;
  /* box-shadow: 4px 6px 11px 0px #b2b2b2; */
}

#toolbar #settings-bar {
  display: inline;
}
#toolbar #settings-bar a {
  display: inline-grid;
  font-size: 10px;
  color: black;
  text-decoration: none;
  text-align: center;
  margin: 0 10px;
}
#toolbar span{
  margin-top:5px;
}
#toolbar #settings-bar img {
  margin-right: 15px;
  height: 30px;
  margin: 0 auto;
}

img {
  display: block; 
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/****** 
  BOARD 
*****/

.Haibu_board {
  position: fixed;
  z-index: 2;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: -2%;
  padding-bottom: 2%;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: perspective(1px) translateY(-50%) translateX(-50%);
}

 .triangleV1 {
  display: inline-block;
  position: absolute;
  left: 29.4%;
  top: 20.2%;
  width: 5px;
  height: 63%;
  background-origin: Haibu_board;
  background-color: black;
  z-index: -1;
} 

.triangleV2 {
  display: inline-block;
  position: absolute;
  left: 69.7%;
  top: 20.2%;
  width: 5px;
  height: 63%;
  background-origin: Haibu_board;
  background-color: black;
  z-index: -1;
}

.triangleV3 {
  display: inline-block;
  position: absolute;
  left: 59.6%;
  top: 14.2%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  z-index: -1;
}

.triangleV4 {
  display: inline-block;
  position: absolute;
  left: 89.4%;
  top: 40.2%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  z-index: -1;
}

.triangleV5 {
  display: inline-block;
  position: absolute;
  left: 49.3%;
  top: 60%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  z-index: -1;
}

.triangleV6 {
  display: inline-block;
  position: absolute;
  left: 39.6%;
  top: 55%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  z-index: -1;
}

.triangleH1 {
  display: inline-block;
  position: absolute;
  left: 7.7%;
  top: 28.3%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  transform-origin: right top;
  transform: rotate(-61deg) translate(7%, 0);
  z-index: -1;
}

.triangleH2 {
  display: inline-block;
  position: absolute;
  left: 18.8%;
  top: 24.1%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  transform-origin: right top;
  transform: rotate(-61deg) translate(7%, 0);
  z-index: -1;
}

.triangleH3 {
  display: inline-block;
  position: absolute;
  left: 63.2%;
  top: 15.9%;
  width: 5px;
  height: 30%;
  background-origin: Haibu_board;
  background-color: transparent;
  transform-origin: right top;
  transform: rotate(-61deg) translate(7%, 0);
  z-index: -1;
}

.triangleH4 {
  display: inline-block;
  position: absolute;
  left: 60.2%;
  top: 55.2%;
  width: 5px;
  height: 30%;
  background-origin: Haibu_board;
  background-color: transparent;
  transform-origin: right top;
  transform: rotate(-61deg) translate(7%, 0);
  z-index: -1;
}

.triangleH5 {
  display: inline-block;
  position: absolute;
  left: 25.2%;
  top: 17.8%;
  width: 5px;
  height: 63%;
  background-origin: Haibu_board;
  background-color: black;
  transform-origin: right top;
  transform: rotate(-61deg) translate(7%, 0);
  z-index: -1;
}

.triangleH6 {
  display: inline-block;
  position: absolute;
  left: 9%;
  top: 49.9%;
  width: 5px;
  height: 63%;
  background-origin: Haibu_board;
  background-color: black;
  transform-origin: right top;
  transform: rotate(-61deg) translate(7%, 0);
  z-index: -1;
}

.triangleT1 {
  display: inline-block;
  position: absolute;
  left: 38.1%;
  top: 46.2%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  transform-origin: right top;
  transform: rotate(61deg) translate(7%, 0);
  z-index: -1;
}

.triangleT2 {
  display: inline-block;
  position: absolute;
  left: 51.1%;
  top: 8.5%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  transform-origin: right top;
  transform: rotate(61deg) translate(7%, 0);
  z-index: -1;
}


.triangleT3 {
  display: inline-block;
  position: absolute;
  left: 90%;
  top: 29.3%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  transform-origin: right top;
  transform: rotate(61deg) translate(7%, 0);
  z-index: -1;
}


.triangleT4 {
  display: inline-block;
  position: absolute;
  left: 90%;
  top: 39.5%;
  width: 5px;
  height: 33%;
  background-origin: Haibu_board;
  background-color: transparent;
  transform-origin: right top;
  transform: rotate(61deg) translate(7%, 0);
  z-index: -1;
}

.triangleT5 {
  display: inline-block;
  position: absolute;
  left: 65%;
  top: 22.1%;
  width: 5px;
  height: 63%;
  background-origin: Haibu_board;
  background-color: black;
  transform-origin: right top;
  transform: rotate(61deg) translate(7%, 0);
  z-index: -1;
}

.triangleT6 {
  display: inline-block;
  position: absolute;
  left: 88.3%;
  top: 50.9%;
  width: 5px;
  height: 63%;
  background-origin: Haibu_board;
  background-color: black;
  transform-origin: right top;
  transform: rotate(61deg) translate(7%, 0);
  z-index: -1;
}

.Haibu_board .column {
  display: inline-block;
  float: left;

}

.Haibu_board .column:nth-child(odd) {
  margin-top: 5.45%;
}

.Haibu_board .colum {
  display: inline-block;
  float: left;
  margin-top: -5%;

}

.Haibu_board .colum:nth-child(odd) {
  margin-top: 1.1%;
}

.Haibu_board .colun {
  display: inline-block;
  float: left;
  margin-top: 1.1%;

}

.Haibu_board .colun:nth-child(odd) {
  margin-top: -5%;
}



div#Haibu_container .Haibu_board .cell {

  width: 11.10%;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  vertical-align: text-top;

  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 100px;
  background-size: auto;
  background-position: center;

  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;


  background: #fffffa;
  border: 5px solid #171d25;

}

div#Haibu_container .Haibu_board .cell:hover {
  background: #b3b3b3;

  transition: all 1s ease;
}


div#Haibu_container .Haibu_board .cell span {
  color: #171d25;
  font-size: 28px;
  text-align: middle;
}

div#Haibu_container .Haibu_board .cell.selected,
div#Haibu_container .Haibu_board .cell.selected.fix {
  background: #fffffa;
}

div#Haibu_container .Haibu_board .cell.selected.current {
  position: relative;

}
/*
div#Haibu_container .Haibu_board .cell.selected:hover {
  background: #b3b3b3;

  transition: all 1s ease;
}
*/
div#Haibu_container .Haibu_board .cell.selected.current span {
  color: white;

}

div#Haibu_container .Haibu_board .cell.selected.group {
  color: blue;
  background: white;
}

div#Haibu_container .Haibu_board .cell.selected.cache {
  background: #838383;
}

div#Haibu_container .Haibu_board .cell span.samevalue,
div#Haibu_container .Haibu_board .cell.fix span.samevalue {
  color: #171d25;
}

div#Haibu_container .Haibu_board .cell.notvalid,
div#Haibu_container .Haibu_board .cell.selected.notvalid {
  font-weight: bold;
  color: white;

}

div#Haibu_container .Haibu_board .cell.fix {
  background-image: none;
  cursor: default;
}

div#Haibu_container .Haibu_board .cell.fix.cache {
  background: transparent;
  border: 5px solid transparent;
  cursor: default;
  background-image: none;

}

div#Haibu_container .Haibu_board .cell.fix.cache span {
  color: #838383;
}

div#Haibu_container .Haibu_board .cell .solution {
  font-size: 10px;

}

div#Haibu_container .Haibu_board .cell .note {
  color: #171d25;
  width: 50%;
  height: 50%;
  display: inline-block;
  float: left;
  text-align: center;
  font-size: 14px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/** Messages **/

#restart-msg {
  position: relative;
  vertical-align: middle;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.1);
}

#restart-msg p {
  margin: 0;
  position: absolute;
  top: 50%;
  font-size: 30px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

/** Game over style **/
.gameover_container .gameover {
  color: black;
  font-weight: bold;
  text-align: center;
  display: block;
  position: absolute;
  width: 90%;
  z-index: 1000;
  box-shadow: 0px 0px 5px 5px transparent;
  
}
.gameover_container .gameover strong:before {
  content: "" ;
  display: block;
  width: 100%;
/**background: URL('../img/trophy.svg') no-repeat;**/
  background-position: center;
  background-size: cover;
  margin-top: 200px;
}

.gamever boutton.btn.btn-default {
  margin-bottom: 1px;
  background-color: royalblue;
  animation-duration: 6s;
  animation-name: apparition;
  animation-timing-function: ease-in-out;
}

.gameover strong {
  font-size: 0px;
  text-shadow: 1px 1px 2px white;
  animation-duration: 4s;
  animation-delay: 200ms;
  animation-name: grow;
  animation-timing-function: ease;
}

.restart {
  background: #b3b3b3;
  color: #ecf0f1;
}


/* console */

.board_console_container,
.Haibu_niveau {
  background-color: rgba(0, 0, 0, 0.4);
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
}

.gameover_container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.1);
  /* animation: victory 4s infinite; */
}

.board_console,
.Haibu_niveau {
  display: block;
  position: absolute;
  width: 50%;
  z-index: 9999;
  color: #ecf0f1;
  margin-left: 3.5%;
  box-shadow: 0px 0px 1px 1px transparent;

}

.board_console .num {
  width: 25%;
  color: #171d25;
  margin: 5px;
  padding: 0px;
  display: inline-block;
  font-weight: bold;
  font-size: 44px;
  text-align: center;
  cursor: pointer;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background-size: auto;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  background-color: rgba(127, 140, 141, 0.9);
  box-shadow: 0px 0px 0px 5px #171d25;
}


.board_console .num:hover {
  color: #171d25;

}

.board_console .num.remove {
  color: #171d25;

}

.board_console .num.note {
  color: #171d25;
}

.board_console .num.note:hover {
  background:#171d25;
  /* color: #f1c40f; */
}

.board_console .num.selected {
  background: steelblue;
}

.board_console .num.note.selected {
  background: orangered;
}

.board_console .num.note.selected:hover {
  color: #171d25;
}

.board_console .num.no:hover {
  color: #171d25;
  cursor: not-allowed;
}

.board_console .num.remove:hover {
  color: #171d25;
  background: #b3b3b3;
}

.statistics {
  text-align: center;
  /* z-index: 0; */
  /* position: relative; */
  /* height: 100%;
    width: 100%;
    top: 0; */
}

.statistics .game-info {
  top: 20px;
  right: 35px;
  position: fixed;
  text-align: right;
  font-size: 20px;
}
.statistics .game-info span {
 display: block;
}
.statistics .game-info span.coda{
  padding-bottom: 10px;
}
.statistics span.time {
  top: 75px;
  left: 23px;
  width: 150px;
  padding-left: 15px;
  position:fixed;
  text-align: left;
  font-size: 20px;
}

.statistics span.level {
  text-transform: uppercase;
  font-size: 11px;
  padding: 10px 15px;
  color: white;
  border-radius: 25px;
}

#Haibu_niveau {
  background-color: transparent;
  text-align: center;
  z-index: 2;
  width: 100%;
  height: 100%;
  left: -100%;
  box-sizing: center-box;
  -moz-box-sizing: center-box;
}

#Haibu_niveau ul li a {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  width: auto;
  font-weight: bold;
  color: white;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #2c3e50;
}

#Haibu_menu {
  top: 70px;
  background-color: #171d25;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: auto;
  left: -100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}


#Haibu_menu ul li a {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  width: auto;
  font-weight: bold;
  color: white;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #2c3e50;
}

#Haibu_menu ul li :hover {
  background-color: dimgrey;
  text-decoration: none;
  display: block;

}

#Haibu_menu.open-sidebar {
  left: 0px;
}

header {
  background-color: #171d25;
  height: 70px;
}

header #sidebar-toggle,
header #Haibu_title {
  display: inline-block;
  padding-left: 30px;
  padding-top: 19px;
}

header #Haibu_title {
  padding-left: 30px;
  font-size: 28px;
}

#sidebar-toggle {
  z-index: 3;
  background: #171d25;
  border-radius: 3px;
  display: block;
}

#sidebar-toggle .bar {
  display: block;
  width: 30px;
  margin-bottom: 5px;
  height: 4px;
  background-color: #f0f0f0;
  border-radius: 1px;
}

#sidebar-toggle .bar:last-child {
  margin-bottom: 0;
}


div#Haibu_container .Haibu_board .cell .note.color-20 {
  background: saddlebrown;
}

div#Haibu_container .Haibu_board .cell .note.color-21 {
  background:  #d42aff;
}

div#Haibu_container .Haibu_board .cell .note.color-22 {
  background: red;
}

div#Haibu_container .Haibu_board .cell .note.color-23 {
  background: limegreen;
}

div#Haibu_container .Haibu_board .cell .note.color-24 {
  background: darkorange;
}

div#Haibu_container .Haibu_board .cell .note.color-25 {
  background: teal;
}

div#Haibu_container .Haibu_board .cell .note.color-26 {
  background: #ffd800;
}

div#Haibu_container .Haibu_board .cell .note.color-27 {
  background: cornflowerblue;
}

div#Haibu_container .Haibu_board .cell .note.color-28 {
  background: plum;
}

div#Haibu_container .Haibu_board .cell .note.color-29 {
  background: darkviolet;
}
.board_console .num.color-0,
.board_console .num.color-0:hover {
  background: #b3b3b3;
}

.board_console .num.color-0.selected:hover {
  background: tomato;
}

.board_console .num.color-20.selected,
.board_console .num.color-21.selected,
.board_console .num.color-22.selected,
.board_console .num.color-23.selected,
.board_console .num.color-24.selected,
.board_console .num.color-25.selected,
.board_console .num.color-26.selected,
.board_console .num.color-27.selected,
.board_console .num.color-28.selected,
.board_console .num.color-29.selected{
  background: #b3b3b3;
}
.board_console .num.color-20,
.board_console .num.color-20:hover {
  background:  saddlebrown;
}
.board_console .num.color-21,
.board_console .num.color-21:hover {
  background:  #d42aff;
}
.board_console .num.color-22,
.board_console .num.color-22:hover {
  background: red;
}
.board_console .num.color-23,
.board_console .num.color-23:hover {
  background: limegreen;
}
.board_console .num.color-24,
.board_console .num.color-24:hover {
  background: darkorange;
}
.board_console .num.color-25,
.board_console .num.color-25:hover {
  background: teal;
}
.board_console .num.color-26,
.board_console .num.color-26:hover {
  background: #ffd800;
}
.board_console .num.color-27,
.board_console .num.color-27:hover {
  background: cornflowerblue;
}
.board_console .num.color-28,
.board_console .num.color-28:hover {
  background: plum;
}
.board_console .num.color-29,
.board_console .num.color-29:hover {
  background: darkviolet;
}
.board_console .num.color-20.selec,
.board_console .num.color-21.selec,
.board_console .num.color-22.selec,
.board_console .num.color-23.selec,
.board_console .num.color-24.selec,
.board_console .num.color-25.selec,
.board_console .num.color-26.selec,
.board_console .num.color-27.selec,
.board_console .num.color-28.selec,
.board_console .num.color-29.selec{
  padding: 10px 0px;
  font-size: 20px;
  vertical-align: bottom;
}

div#Haibu_container .Haibu_board .cell.fix.color-20 {
  background: saddlebrown;
}

div#Haibu_container .Haibu_board .cell.fix.color-21 {
  background:  #d42aff;
}

div#Haibu_container .Haibu_board .cell.fix.color-22 {
  background: red;
}

div#Haibu_container .Haibu_board .cell.fix.color-23 {
  background: limegreen;
}

div#Haibu_container .Haibu_board .cell.fix.color-24 {
  background: darkorange;
}

div#Haibu_container .Haibu_board .cell.fix.color-25 {
  background: teal;
}

div#Haibu_container .Haibu_board .cell.fix.color-26 {
  background: #ffd800;
}

div#Haibu_container .Haibu_board .cell.fix.color-27 {
  background: cornflowerblue;
}

div#Haibu_container .Haibu_board .cell.fix.color-28 {
  background: plum;
}

div#Haibu_container .Haibu_board .cell.fix.color-29 {
  background: darkviolet;
}

div#Haibu_container .Haibu_board .cell.fix.color-100 {
  background: #171d25;
}

div#Haibu_container .Haibu_board .cell.fix.color-100:hover {
  background: #838383;
}

div#Haibu_container .Haibu_board .cell.fix.color-101 {
  background: #171d25;
}

div#Haibu_container .Haibu_board .cell.fix.color-102 {
  background: black;
}

div#Haibu_container .Haibu_board .cell.color-20 {
  background:  saddlebrown;
}

div#Haibu_container .Haibu_board .cell.color-21 {
  background:  #d42aff;
}

div#Haibu_container .Haibu_board .cell.color-22 {
  background: red;
}

div#Haibu_container .Haibu_board .cell.color-23 {
  background: limegreen;
}

div#Haibu_container .Haibu_board .cell.color-24 {
  background: darkorange;
}

div#Haibu_container .Haibu_board .cell.color-25 {
  background: teal;
}

div#Haibu_container .Haibu_board .cell.color-26 {
  background: #ffd800;
}

div#Haibu_container .Haibu_board .cell.color-27 {
  background: cornflowerblue;
}

div#Haibu_container .Haibu_board .cell.color-28 {
  background: plum;
}

div#Haibu_container .Haibu_board .cell.color-29 {
  background: darkviolet;
}

div#Haibu_container .Haibu_board .cell.color-100 {
  background: #838383;
}

div#Haibu_container .Haibu_board .cell.color-101 {
  background: #171d25;
}

div#Haibu_container .Haibu_board .cell.color-102 {
  background: black;
}

div#Haibu_container .Haibu_board .cell.color-0 {
  background: #b3b3b3;
}


/** Style Modal **/

#styleModal .modal-body .presentation-block {
  text-align: center;
  padding-left: 12%;
  padding-right: 12%;
  vertical-align: middle;
  margin-bottom: 4%;

  justify-content: space-between;
  
}


#styleModal .modal-body div{
  text-align: center;
  width: percentage(1/3);

  justify-content: space-between;

}

#styleModal button.theme{
  margin-top: 15px;
  padding: 20px 0px;
  width: 140px;
  border-radius: 40px;
}

#theme-col{
  background: -webkit-linear-gradient(70deg, red 30%, rgb(12, 2, 2) 30%), -webkit-linear-gradient(30deg, rgb(12, 2, 2) 60%, darkred 60%);
  background: -o-linear-gradient(70deg, red  30%, rgb(12, 2, 2) 30%), -o-linear-gradient(30deg, rgb(12, 2, 2) 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, red  30%, rgb(12, 2, 2) 30%), -moz-linear-gradient(30deg, rgb(12, 2, 2) 60%, darkred 60%);
  background: linear-gradient(70deg, red 30%, rgb(12, 2, 2) 30%), linear-gradient(30deg, rgb(12, 2, 2) 60%, darkred 60%);
  color: snow;
  border: none;
}
#theme-col1{
  background: -webkit-linear-gradient(70deg, teal 30%, rgb(12, 2, 2) 30%), -webkit-linear-gradient(30deg, rgb(12, 2, 2) 60%, darkred 60%);
  background: -o-linear-gradient(70deg, teal  30%, rgb(12, 2, 2) 30%), -o-linear-gradient(30deg, rgb(12, 2, 2) 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, teal 30%, rgb(12, 2, 2) 30%), -moz-linear-gradient(30deg, rgb(12, 2, 2) 60%, darkred 60%);
  background: linear-gradient(70deg, teal 30%, rgb(12, 2, 2) 30%), linear-gradient(30deg, rgb(12, 2, 2) 60%, darkred 60%);
  color: snow;
  border: none;
}
#theme-black{
  background-color: #121f31;
  color: white;
  border: none;
}
#theme-wb{
  background-color: black;
  color: white;
  border: none;
}
#theme-full1{
  background: -webkit-linear-gradient(70deg, indigo 30%, #121f31 30%), -webkit-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -o-linear-gradient(70deg, indigo  30%, #121f31 30%), -o-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, indigo  30%, #121f31 30%), -moz-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: linear-gradient(70deg, indigo 30%, #121f31 30%), linear-gradient(30deg, #121f31 60%, darkred 60%);
  color: snow ;
  border: none;
}

#theme-full2{
  background: -webkit-linear-gradient(70deg, yellowgreen 30%, #b3b3b3 30%), -webkit-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -o-linear-gradient(70deg, yellowgreen  30%, #b3b3b3 30%), -o-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -moz-linear-gradient(70deg, yellowgreen  30%, #b3b3b3 30%), -moz-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: linear-gradient(70deg, yellowgreen 30%, #b3b3b3 30%), linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  color: black ;
  border: none;
}

#theme-bleunuit{
  background: -webkit-linear-gradient(70deg, royalblue 30%, #121f31 30%), -webkit-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -o-linear-gradient(70deg, royalblue  30%, #121f31 30%), -o-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, royalblue  30%, #121f31 30%), -moz-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: linear-gradient(70deg, royalblue 30%, #121f31 30%), linear-gradient(30deg, #121f31 60%, darkred 60%);
  color: snow ;
  border: none;
}
#theme-perso{
  background: -webkit-linear-gradient(70deg, lightslategray 30%, #121f31 30%), -webkit-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -o-linear-gradient(70deg, lightslategray  30%, #121f31 30%), -o-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, lightslategray  30%, #121f31 30%), -moz-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: linear-gradient(70deg, lightslategray 30%, #121f31 30%), linear-gradient(30deg, #121f31 60%, darkred 60%);
  color: snow ;
  border: none;
}
#theme-cpl{
  background: -webkit-linear-gradient(70deg, darkorange 30%, #b3b3b3 30%), -webkit-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -o-linear-gradient(70deg, darkorange  30%, #b3b3b3 30%), -o-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -moz-linear-gradient(70deg, darkorange  30%, #b3b3b3 30%), -moz-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: linear-gradient(70deg, darkorange 30%, #b3b3b3 30%), linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  color: black ;
  border: none;
}
#theme-grand{
  background: -webkit-linear-gradient(70deg, yellow 30%, #b3b3b3 30%), -webkit-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -o-linear-gradient(70deg, yellow  30%, #b3b3b3 30%), -o-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -moz-linear-gradient(70deg, yellow  30%, #b3b3b3 30%), -moz-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: linear-gradient(70deg, yellow 30%, #b3b3b3 30%), linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  color: black ;
  border: none;
}

#theme-hexa{
  background: -webkit-linear-gradient(70deg, tan 30%, #b3b3b3 30%), -webkit-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -o-linear-gradient(70deg, tan  30%, #b3b3b3 30%), -o-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -moz-linear-gradient(70deg, tan 30%, #b3b3b3 30%), -moz-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: linear-gradient(70deg, tan 30%, #b3b3b3 30%), linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  color: black ;
  border: none;
}

#theme-hexa2{
  background: -webkit-linear-gradient(70deg, violet 30%, #b3b3b3 30%), -webkit-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -o-linear-gradient(70deg, violet  30%, #b3b3b3 30%), -o-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -moz-linear-gradient(70deg, violet  30%, #b3b3b3 30%), -moz-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: linear-gradient(70deg, violet 30%, #b3b3b3 30%), linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  color: black ;
  border: none;
}

#theme-original{
  background: #b3b3b3 ;
  color: black ;
  border: none;
}

#theme-formes{
  background: -webkit-linear-gradient(70deg, steelblue 30%, #b3b3b3 30%), -webkit-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -o-linear-gradient(70deg, steelblue 30%, #b3b3b3 30%), -o-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -moz-linear-gradient(70deg, steelblue  30%, #b3b3b3 30%), -moz-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: linear-gradient(70deg, steelblue 30%, #b3b3b3 30%), linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  color: black ;
  border: none;
}
#theme-plein{
  background: -webkit-linear-gradient(70deg, gold 30%, #b3b3b3 30%), -webkit-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -o-linear-gradient(70deg, gold 30%, #b3b3b3 30%), -o-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -moz-linear-gradient(70deg, gold  30%, #b3b3b3 30%), -moz-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: linear-gradient(70deg, gold 30%, #b3b3b3 30%), linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  color: black ;
  border: none;
}
#theme-hexo{
  background: -webkit-linear-gradient(70deg, darkcyan 30%, #121f31 30%), -webkit-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -o-linear-gradient(70deg, darkcyan  30%, #121f31 30%), -o-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, darkcyan  30%, #121f31 30%), -moz-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: linear-gradient(70deg, darkcyan 30%, #121f31 30%), linear-gradient(30deg, #121f31 60%, darkred 60%);
  color: snow ;
  border: none;
}
#theme-plein2{
  background: -webkit-linear-gradient(70deg, indianred 30%, #b3b3b3 30%), -webkit-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -o-linear-gradient(70deg, indianred 30%, #b3b3b3 30%), -o-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: -moz-linear-gradient(70deg, indianred  30%, #b3b3b3 30%), -moz-linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  background: linear-gradient(70deg, indianred 30%, #b3b3b3 30%), linear-gradient(30deg, #b3b3b3 60%, darkorange 60%);
  color: black ;
  border: none;
}
#theme-trisk{
  background: -webkit-linear-gradient(70deg, sienna 30%, #121f31 30%), -webkit-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -o-linear-gradient(70deg, sienna  30%, #121f31 30%), -o-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, sienna  30%, #121f31 30%), -moz-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: linear-gradient(70deg, sienna 30%, #121f31 30%), linear-gradient(30deg, #121f31 60%, darkred 60%);
  color: snow ;
  border: none;
}
#theme-trisk2{
  background: -webkit-linear-gradient(70deg, crimson 30%, #121f31 30%), -webkit-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -o-linear-gradient(70deg, crimson  30%, #121f31 30%), -o-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, crimson  30%, #121f31 30%), -moz-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: linear-gradient(70deg, crimson 30%, #121f31 30%), linear-gradient(30deg, #121f31 60%, darkred 60%);
  color: snow ;
  border: none;
}
#theme-trisk3{
  background: -webkit-linear-gradient(70deg, black 30%, #121f31 30%), -webkit-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -o-linear-gradient(70deg, black  30%, #121f31 30%), -o-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, black  30%, #121f31 30%), -moz-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: linear-gradient(70deg, black 30%, #121f31 30%), linear-gradient(30deg, #121f31 60%, darkred 60%);
  color: snow ;
  border: none;
}
#theme-trisk4{
  background: -webkit-linear-gradient(70deg, yellowgreen 30%, #121f31 30%), -webkit-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -o-linear-gradient(70deg, yellowgreen  30%, #121f31 30%), -o-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: -moz-linear-gradient(70deg, yellowgreen  30%, #121f31 30%), -moz-linear-gradient(30deg, #121f31 60%, darkred 60%);
  background: linear-gradient(70deg, yellowgreen 30%, #121f31 30%), linear-gradient(30deg, #121f31 60%, darkred 60%);
  color: snow ;
  border: none;
}

/*Responsive Stuff*/

@media all and (orientation:portrait) and (min-width: 640px) {
  h1 {
    font-size: 50px;
  }

  .statistics {
    font-size: 30px;
  }

  div#Haibu_container .Haibu_board .cell span {
    font-size: 44px;
  }

  .board_console .num {
    font-size: 60px;
  }
}

@media all and (orientation:landscape) and (min-height: 640px) {
  h1 {
    font-size: 50px;
  }

  .statistics {
    font-size: 30px;
  }

  div#Haibu_container .Haibu_board .cell span {
    font-size: 44px;
  }

  .board_console .num {
    font-size: 50px;
  }
}

@media all and (orientation:portrait) and (max-width: 1000px) {
  div#Haibu_container .Haibu_board .cell span {
    font-size: 30px;
  }
}

@media all and (orientation:portrait) and (max-width: 640px) {
  div#Haibu_container .Haibu_board .cell span {
    font-size: 24px;
  }

  div#Haibu_container .Haibu_board .cell .note {
    font-size: 10px;
  }
}

@media all and (orientation:portrait) and (max-width: 470px) {
  div#Haibu_container .Haibu_board .cell span {
    font-size: 16px;
  }

  div#Haibu_container .Haibu_board .cell .note {
    font-size: 8px;
  }
}

@media all and (orientation:portrait) and (max-width: 320px) {
  div#Haibu_container .Haibu_board .cell span {
    font-size: 12px;
  }

  div#Haibu_container .Haibu_board .cell .note {
    font-size: 8px;
  }
}

@media all and (orientation:portrait) and (max-width: 240px) {
  div#Haibu_container .Haibu_board .cell span {
    font-size: 10px;
  }
}

#Haibu_menu,
#Haibu_menu ul

/* Liste */
  {
  padding: 0;
  /* pas de marge intérieure */
  margin: 0;
  /* ni extérieure */
  list-style: none;
  /* on supprime le style par défaut de la liste */
  line-height: 31px;
  /* on définit une hauteur pour chaque élément */
  text-align: center;
  /* on centre le texte qui se trouve dans la liste */
}

#Haibu_menu

/* Ensemble du menu */
  {
  font-weight: bold;
  /* on met le texte en gras */
  font-family: Arial;
  /* on utilise Arial, c'est plus beau ^^ */
  font-size: 12%;
  /* hauteur du texte : 12 pixels */
}

#Haibu_menu a

/* Contenu des listes */
  {
  display: block;
  /* on change le type d'élément, les liens deviennent des balises de type block */
  padding: 0;
  /* aucune marge intérieure */
  background: #171d25;
  /* couleur de fond */
  color: #fff;
  /* couleur du texte */
  text-decoration: none;
  /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
  width: 20%;
  /* largeur */
}

#Haibu_menu li

/* Elements des listes */
  {

  /* width: 20%; */
  /* pour IE qui ne reconnaît pas "transparent" */
  border-right: 1px solid transparent;
  /* on met une bordure blanche à droite de chaque élément */

}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #Haibu_menu li {
  border-right: 1px solid transparent;
  /* on met une bordure transparente à droite de chaque élément */
  border-top: 1px solid transparent;
}

#Haibu_menu li ul

/* Sous-listes */
  {
  display: none;
}

#Haibu_menu li a#style:hover+ul {
  display: block;
}

#Haibu_menu li ul li

/* Éléments de sous-listes */
  {
  /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
  border-top: 1px solid #fff;
  /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #Haibu_menu li ul li {
  border-top: 1px solid transparent;
  /* on met une bordure transparente en haut de chaque élément */
}

#Haibu_menu li ul ul {
  margin: -6.9% 0 0 20%;
  /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
  /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
  width: 130%;
  border-left: 1px solid #fff;
  /* Petite bordure à gauche pour ne pas coller ... */
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #Haibu_menu li ul ul {
  border-left: 1px solid transparent;
  /* on met une bordure transparente sur la gauche de chaque élément */
}

#Haibu_menu li:hover ul ul,
#Haibu_menu li.sfhover ul ul

/* Sous-sous-listes lorsque la souris passe sur un élément de liste */
  {
  left: -999em;
  /* On expédie les sous-sous-listes hors du champ de vision */
}

#Haibu_menu li:hover ul,
#Haibu_menu li li:hover ul,
#menu li.sfhover ul,
#menu li li.sfhover ul

/* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
  {
  left: auto;
  /* Repositionnement normal */
  min-height: 0;
  /* Corrige un bug sous IE */
}

.btn {
  background: #3cb0fd;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  z-index: 3;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
}

.btn:hover {
  background: #171d25;
  cursor: pointer;
  text-decoration: none;
}

.rond {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #171d25;
  background-image: -webkit-linear-gradient(top, #171d25, #2980b9);
  background-image: -moz-linear-gradient(top, #171d25, #2980b9);
  background-image: -ms-linear-gradient(top, #171d25, #2980b9);
  background-image: -o-linear-gradient(top, #171d25, #2980b9);
  background-image: linear-gradient(to bottom, #171d25, #2980b9);
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
  border: none;
  outline: none;
  font: 20px;
  text-align: center;
  color: #a7a7a7;

  margin: 20px;
}

.rond:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #171d25, #3cb0fd);
  background-image: -moz-linear-gradient(top, #171d25, #3cb0fd);
  background-image: -ms-linear-gradient(top, #171d25, #3cb0fd);
  background-image: -o-linear-gradient(top, #171d25, #3cb0fd);
  background-image: linear-gradient(to bottom, #171d25, #3cb0fd);
  text-decoration: none;
}

.resize {
  display: inline-block;
}

.container-confetti {
  width: 105%;
}

.confetti {
  width: 15px;
  height: 15px;
  background-color: #4e82f2;
  position: absolute;
  left: 50%;
  animation: confetti 5s ease-in-out -2s infinite;
  transform-origin: left top;
}

.confetti:nth-child(1) {
  background-color: #f2d74e;
  left: 10%;
  animation-delay: 0;
}

.confetti:nth-child(2) {
  background-color: #95c3de;
  left: 20%;
  animation-delay: -5s;
}

.confetti:nth-child(3) {
  background-color: #ff9a91;
  left: 30%;
  animation-delay: -3s;
}

.confetti:nth-child(4) {
  background-color: #f2d74e;
  left: 40%;
  animation-delay: -2.5s;
}

.confetti:nth-child(5) {
  background-color: #95c3de;
  left: 50%;
  animation-delay: -4s;
}

.confetti:nth-child(6) {
  background-color: #ff9a91;
  left: 60%;
  animation-delay: -6s;
}

.confetti:nth-child(7) {
  background-color: #f2d74e;
  left: 70%;
  animation-delay: -1.5s;
}

.confetti:nth-child(8) {
  background-color: #95c3de;
  left: 80%;
  animation-delay: -2s;
}

.confetti:nth-child(9) {
  background-color: #ff9a91;
  left: 90%;
  animation-delay: -3.5s;
}

.confetti:nth-child(10) {
  background-color: #f2d74e;
  left: 100%;
  animation-delay: -2.7s;
}


.confettit {
  width: 15px;
  height: 15px;
  background-color: #29d48d;
  position: absolute;
  left: 42%;
  animation: confetty 4s ease-in-out -2s infinite;
  transform-origin: left top;
}

.confettite {
  width: 15px;
  height: 15px;
  background-color: #29d48d;
  position: absolute;
  left: 74%;
  animation: confetti 4.2s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: -1.1s;
}

.confettito {
  width: 15px;
  height: 15px;
  background-color: #f2d74e;
  position: absolute;
  left: 62%;
  animation: confetty 4.3s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: -2.7s;
}

.confettiti {
  width: 15px;
  height: 15px;
  background-color: #37dada;
  position: absolute;
  left: 82%;
  animation: confetty 4s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: -1.7s;
}

.confettitu {
  width: 15px;
  height: 15px;
  background-color: #e99e3b;
  position: absolute;
  left: 22%;
  animation: confetti 4s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: -0.7s;
}


.confettity {
  width: 15px;
  height: 15px;
  background-color: #e99e3b;
  position: absolute;
  left: 92%;
  animation: confetty 4.5s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: -3.7s;
}

.confettita {
  width: 15px;
  height: 15px;
  background-color: red;
  position: absolute;
  left: 38%;
  animation: confetty 4.8s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: -1.5s;
}

.confettits {
  width: 15px;
  height: 15px;
  background-color: red;
  position: absolute;
  left: 76%;
  animation: confetti 4.2s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: 0.5s;
}

.confettitr {
  width: 15px;
  height: 15px;
  background-color: red;
  position: absolute;
  left: 6%;
  animation: confetti 4.9s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: -2.6s;
}


.confettitv {
  width: 15px;
  height: 15px;
  background-color: red;
  position: absolute;
  left: 105%;
  animation: confetty 4.7s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: 1.5s;
}

.confettitz {
  width: 15px;
  height: 15px;
  background-color: plum;
  position: absolute;
  left: 18%;
  animation: confetti 4.5s ease-in-out -2s infinite;
  transform-origin: left top;
}

.confettitw {
  width: 15px;
  height: 15px;
  background-color: plum;
  position: absolute;
  left: 86%;
  animation: confetty 4.1s ease-in-out -2s infinite;
  transform-origin: left top;
  animation-delay: -0.5s;
}

/***
**
**    ANIMATIONS
**
***/

@keyframes confetti {
  0% {
    transform: rotateZ(15deg) rotateY(0deg) translate(0, 0);
  }

  25% {
    transform: rotateZ(5deg) rotateY(360deg) translate(-5vw, 25vh);
  }

  50% {
    transform: rotateZ(15deg) rotateY(720deg) translate(5vw, 60vh);
  }

  70% {
    transform: rotateZ(5deg) rotateY(1080deg) translate(-9vw, 80vh);
  }

  100% {
    transform: rotateZ(15deg) rotateY(1440deg) translate(9vw, 110vh);
  }
}

@keyframes confetty {
  0% {
    transform: rotateZ(12deg) rotateY(0deg) translate(0, 0);
  }

  25% {
    transform: rotateZ(6deg) rotateY(360deg) translate(-4vw, 20vh);
  }

  50% {
    transform: rotateZ(12deg) rotateY(720deg) translate(4vw, 50vh);
  }

  75% {
    transform: rotateZ(6deg) rotateY(1080deg) translate(-8vw, 80vh);
  }

  100% {
    transform: rotateZ(15deg) rotateY(1440deg) translate(8vw, 110vh);
  }
}

@keyframes grow {
  from {
    opacity: 1;
    font-size: 20px;
  }
  95% {
    opacity: 1;
    font-size: 60px;
  }

  to {
    opacity: 0;
    font-size: 62px;
  }
}

@keyframes apparition {

  0% { background-color: transparent; color:transparent;}
  80% { background-color: transparent; color:transparent;}
  100% { background-color: royalblue;}
}


@keyframes victory {
  0% {
    background-color: rgba(0, 0, 0, 0.62);
  }

  25% {
    background-color: rgba(212, 0, 255, 0.62);
  }

  50% {
    background-color: rgba(176, 179, 28, 0.62);
  }

  100% {
    background-color: rgba(255, 0, 0, 0.62);
  }
}

/***
**
**    MEDIA QUERIES 
**
***/
@media (min-width: 992px) {
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 49%;
  }
}

@media (min-width: 768px) {
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 49%;
  }
}

/** 
** 
** PHONE
**
**/
@media (max-width: 768px) {
  h1 {
    font-size: 35px;
    left: 15px;
  }

  .statistics span.time {
    left: 15px;
  }

  #toolbar {
    right: 15px;
  }
  #toolbar a {
    font-size: 8px;
  }

  .statistics .game-info {
    right: 15px;
  }

  #toolbar #settings-bar img {
    height: 25px;
  }

  .board_console .num {
    font-size: 30px;
  }

  .triangleV1 {
    display: inline-block;
    position: absolute;
    left: 6.8%;
    top: 29.2%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    z-index: -1;
  }

  .triangleV2 {
    display: inline-block;
    position: absolute;
    left: 49.3%;
    top: 9.2%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    z-index: -1;
  }
  
  .triangleV3 {
    display: inline-block;
    position: absolute;
    left: 59.8%;
    top: 14.2%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    z-index: -1;
  }
  
  .triangleV4 {
    display: inline-block;
    position: absolute;
    left: 92%;
    top: 40.2%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    z-index: -1;
  }
  
  .triangleV5 {
    display: inline-block;
    position: absolute;
    left: 49.3%;
    top: 60%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    z-index: -1;
  }
  
  .triangleV6 {
    display: inline-block;
    position: absolute;
    left: 38.8%;
    top: 55%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    z-index: -1;
  }
  
  .triangleH1 {
    display: inline-block;
    position: absolute;
    left: 7.7%;
    top: 30.7%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(-61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleH2 {
    display: inline-block;
    position: absolute;
    left: 18.8%;
    top: 25.7%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(-61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleH3 {
    display: inline-block;
    position: absolute;
    left: 63.2%;
    top: 15.9%;
    width: 5px;
    height: 30%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(-61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleH4 {
    display: inline-block;
    position: absolute;
    left: 63.2%;
    top: 58.1%;
    width: 5px;
    height: 30%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(-61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleH5 {
    display: inline-block;
    position: absolute;
    left: 50.2%;
    top: 62.4%;
    width: 5px;
    height: 30%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(-61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleH6 {
    display: inline-block;
    position: absolute;
    left: 5.7%;
    top: 71.6%;
    width: 5px;
    height: 30%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(-61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleT1 {
    display: inline-block;
    position: absolute;
    left: 38.1%;
    top: 46.8%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleT2 {
    display: inline-block;
    position: absolute;
    left: 51.1%;
    top: 8.8%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(61deg) translate(7%, 0);
    z-index: -1;
  }
  
  
  .triangleT3 {
    display: inline-block;
    position: absolute;
    left: 90%;
    top: 31.5%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(61deg) translate(7%, 0);
    z-index: -1;
  }
  
  
  .triangleT4 {
    display: inline-block;
    position: absolute;
    left: 94%;
    top: 40.2%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleT5 {
    display: inline-block;
    position: absolute;
    left: 82%;
    top: 77.8%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(61deg) translate(7%, 0);
    z-index: -1;
  }
  
  .triangleT6 {
    display: inline-block;
    position: absolute;
    left: 38.1%;
    top: 57.1%;
    width: 5px;
    height: 33%;
    background-origin: Haibu_board;
    background-color: #171d25;
    transform-origin: right top;
    transform: rotate(61deg) translate(7%, 0);
    z-index: -1;
  }
}