.rotate {
  transform: rotate(180deg); }

.fullContainer {
  overflow: hidden; }

.startgame-container {
  display: block; }
  .startgame-container.active {
    display: none; }
  .startgame-container .inputPlayerContainer {
    position: relative; }
    .startgame-container .inputPlayerContainer .inputPlayer {
      border: none;
      color: #ffffff;
      border-radius: .25rem;
      width: 100%;
      padding: 5px;
      display: block;
      margin: auto;
      margin-bottom: 10px; }
      .startgame-container .inputPlayerContainer .inputPlayer.inputPlayer1 {
        background-color: #007bff; }
      .startgame-container .inputPlayerContainer .inputPlayer.inputPlayer2 {
        background-color: #dc3545; }
    .startgame-container .inputPlayerContainer .edit {
      position: absolute;
      right: 5px;
      font-size: 25px;
      top: 5px;
      cursor: pointer; }
    .startgame-container .inputPlayerContainer .newgame {
      display: block;
      margin: auto; }

.game-container {
  display: none; }
  .game-container.active {
    display: block; }
  .game-container .player {
    position: relative;
    float: left;
    clear: both;
    text-align: center; }
    .game-container .player.player1 {
      transform: rotate(180deg); }
      .game-container .player.player1 .playerName {
        color: #007bff; }
    .game-container .player.player2 .playerName {
      color: #dc3545; }
    .game-container .player .btn {
      font-size: 18px;
      height: 60px;
      width: 60px;
      background-position: center;
      background-repeat: no-repeat;
      padding: 0 5px; }
    .game-container .player .score {
      color: red; }
      .game-container .player .score .btn {
        font-size: 20px;
        color: #000000;
        background-color: #ff9b9b;
        border-color: #ff9b9b;
        background-image: url("../img/game/life.png");
        background-size: 40px 40px; }
        .game-container .player .score .btn.add {
          text-align: right; }
        .game-container .player .score .btn.sub {
          text-align: left; }
    .game-container .player .energy label {
      color: #f1f1b3; }
    .game-container .player .energy .btn {
      font-size: 20px;
      color: #000000;
      background-color: #f1f1b3;
      border-color: #f1f1b3;
      background-image: url("../img/game/energy.png");
      background-size: 25px 25px; }
      .game-container .player .energy .btn.add {
        text-align: right; }
      .game-container .player .energy .btn.sub {
        text-align: left; }
    .game-container .player .scoreLabel {
      font-size: 60px;
      width: 100px;
      vertical-align: middle;
      text-shadow: 1px 1px 5px grey; }
    .game-container .player .bottom-buttons {
      position: absolute;
      bottom: 0px;
      width: 100%; }
      .game-container .player .bottom-buttons .button {
        padding: 5px;
        margin: 5px;
        border: 1px #000000 solid;
        border-radius: .25rem; }
      .game-container .player .bottom-buttons .winner {
        display: inline-block;
        font-size: 25px;
        cursor: pointer;
        float: left;
        padding: 5px;
        margin: 5px;
        border: 1px #000000 solid;
        border-radius: .25rem; }
      .game-container .player .bottom-buttons .restart {
        display: inline-block;
        font-size: 25px;
        cursor: pointer;
        float: left;
        padding: 5px;
        margin: 5px;
        border: 1px #000000 solid;
        border-radius: .25rem; }
      .game-container .player .bottom-buttons .playerName {
        display: inline-block;
        font-size: 20px;
        font-weight: bold; }
      .game-container .player .bottom-buttons .cointoss {
        display: inline-block;
        float: right;
        height: 35px;
        width: 35px;
        background-image: url("../img/game/cointoss.png");
        background-repeat: no-repeat;
        background-size: cover;
        display: block; }
  .game-container #reset {
    clear: both;
    float: left;
    margin-top: 75px; }
  .game-container .headtail {
    float: left;
    margin-top: 75px;
    font-size: 40px;
    cursor: pointer;
    display: block; }
    .game-container .headtail.active {
      display: none; }
  .game-container .spinner {
    display: none; }
    .game-container .spinner.active {
      display: block; }
  .game-container .result {
    display: none; }
    .game-container .result.active {
      display: block; }

.flipContainer {
  position: absolute;
  display: none;
  perspective: 1000; }
  .flipContainer.flipping {
    display: block; }
  .flipContainer.flipped {
    display: block; }
  .flipContainer .flipper {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    position: relative; }
    .flipContainer .flipper .coin {
      position: absolute;
      top: 0;
      left: 0;
      backface-visibility: hidden; }
      .flipContainer .flipper .coin.true {
        display: block;
        -moz-transform: rotateY(0deg) !important;
        -webkit-transform: rotateY(0deg) !important;
        -ms-transform: rotateY(0deg) !important; }
      .flipContainer .flipper .coin.false {
        display: none;
        -moz-transform: rotateY(0deg) !important;
        -webkit-transform: rotateY(0deg) !important;
        -ms-transform: rotateY(0deg) !important; }
      .flipContainer .flipper .coin.head {
        z-index: 2;
        -moz-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        background-image: url("../img/game/head.png");
        height: 100px;
        width: 100px;
        background-size: cover; }
      .flipContainer .flipper .coin.tail {
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        background-image: url("../img/game/tail.png");
        height: 100px;
        width: 100px;
        background-size: cover; }

.flipContainer.flipping {
  -webkit-animation: flipit .15s infinite;
  -moz-animation: flipit .15s infinite;
  -ms-animation: flipit .15s infinite; }

.flipContainer,
.coin {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -ms-border-radius: 100px;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  overflow: hidden; }

@-webkit-keyframes flipit {
  from {
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg); }
  to {
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg); } }

/*# sourceMappingURL=main.css.map */