@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-Thin.eot");
  src: local("Roboto Thin"), local("Roboto-Thin"), url("../build/fonts/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Thin.woff2") format("woff2"), url("../build/fonts/Roboto-Thin.woff") format("woff"), url("../build/fonts/Roboto-Thin.ttf") format("truetype"), url("../build/fonts/Roboto-Thin.svg#Roboto") format("svg");
  font-weight: 100;
  font-style: normal; }
@font-face {
  font-family: "Roboto-Thin";
  src: url("../build/fonts/Roboto-Thin.eot");
  src: local("Roboto Thin"), local("Roboto-Thin"), url("../build/fonts/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Thin.woff2") format("woff2"), url("../build/fonts/Roboto-Thin.woff") format("woff"), url("../build/fonts/Roboto-Thin.ttf") format("truetype"), url("../build/fonts/Roboto-Thin.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-ThinItalic.eot");
  src: local("Roboto ThinItalic"), local("Roboto-ThinItalic"), url("../build/fonts/Roboto-ThinItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-ThinItalic.woff2") format("woff2"), url("../build/fonts/Roboto-ThinItalic.woff") format("woff"), url("../build/fonts/Roboto-ThinItalic.ttf") format("truetype"), url("../build/fonts/Roboto-ThinItalic.svg#Roboto") format("svg");
  font-weight: 100;
  font-style: italic; }
@font-face {
  font-family: "Roboto-ThinItalic";
  src: url("../build/fonts/Roboto-ThinItalic.eot");
  src: local("Roboto ThinItalic"), local("Roboto-ThinItalic"), url("../build/fonts/Roboto-ThinItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-ThinItalic.woff2") format("woff2"), url("../build/fonts/Roboto-ThinItalic.woff") format("woff"), url("../build/fonts/Roboto-ThinItalic.ttf") format("truetype"), url("../build/fonts/Roboto-ThinItalic.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-Light.eot");
  src: local("Roboto Light"), local("Roboto-Light"), url("../build/fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Light.woff2") format("woff2"), url("../build/fonts/Roboto-Light.woff") format("woff"), url("../build/fonts/Roboto-Light.ttf") format("truetype"), url("../build/fonts/Roboto-Light.svg#Roboto") format("svg");
  font-weight: 300;
  font-style: normal; }
@font-face {
  font-family: "Roboto-Light";
  src: url("../build/fonts/Roboto-Light.eot");
  src: local("Roboto Light"), local("Roboto-Light"), url("../build/fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Light.woff2") format("woff2"), url("../build/fonts/Roboto-Light.woff") format("woff"), url("../build/fonts/Roboto-Light.ttf") format("truetype"), url("../build/fonts/Roboto-Light.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-LightItalic.eot");
  src: local("Roboto LightItalic"), local("Roboto-LightItalic"), url("../build/fonts/Roboto-LightItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-LightItalic.woff2") format("woff2"), url("../build/fonts/Roboto-LightItalic.woff") format("woff"), url("../build/fonts/Roboto-LightItalic.ttf") format("truetype"), url("../build/fonts/Roboto-LightItalic.svg#Roboto") format("svg");
  font-weight: 300;
  font-style: italic; }
@font-face {
  font-family: "Roboto-LightItalic";
  src: url("../build/fonts/Roboto-LightItalic.eot");
  src: local("Roboto LightItalic"), local("Roboto-LightItalic"), url("../build/fonts/Roboto-LightItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-LightItalic.woff2") format("woff2"), url("../build/fonts/Roboto-LightItalic.woff") format("woff"), url("../build/fonts/Roboto-LightItalic.ttf") format("truetype"), url("../build/fonts/Roboto-LightItalic.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-Regular.eot");
  src: local("Roboto Regular"), local("Roboto-Regular"), url("../build/fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Regular.woff2") format("woff2"), url("../build/fonts/Roboto-Regular.woff") format("woff"), url("../build/fonts/Roboto-Regular.ttf") format("truetype"), url("../build/fonts/Roboto-Regular.svg#Roboto") format("svg");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: "Roboto-Regular";
  src: url("../build/fonts/Roboto-Regular.eot");
  src: local("Roboto Regular"), local("Roboto-Regular"), url("../build/fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Regular.woff2") format("woff2"), url("../build/fonts/Roboto-Regular.woff") format("woff"), url("../build/fonts/Roboto-Regular.ttf") format("truetype"), url("../build/fonts/Roboto-Regular.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-RegularItalic.eot");
  src: local("Roboto RegularItalic"), local("Roboto-RegularItalic"), url("../build/fonts/Roboto-RegularItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-RegularItalic.woff2") format("woff2"), url("../build/fonts/Roboto-RegularItalic.woff") format("woff"), url("../build/fonts/Roboto-RegularItalic.ttf") format("truetype"), url("../build/fonts/Roboto-RegularItalic.svg#Roboto") format("svg");
  font-weight: 400;
  font-style: italic; }
@font-face {
  font-family: "Roboto-RegularItalic";
  src: url("../build/fonts/Roboto-RegularItalic.eot");
  src: local("Roboto RegularItalic"), local("Roboto-RegularItalic"), url("../build/fonts/Roboto-RegularItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-RegularItalic.woff2") format("woff2"), url("../build/fonts/Roboto-RegularItalic.woff") format("woff"), url("../build/fonts/Roboto-RegularItalic.ttf") format("truetype"), url("../build/fonts/Roboto-RegularItalic.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-Medium.eot");
  src: local("Roboto Medium"), local("Roboto-Medium"), url("../build/fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Medium.woff2") format("woff2"), url("../build/fonts/Roboto-Medium.woff") format("woff"), url("../build/fonts/Roboto-Medium.ttf") format("truetype"), url("../build/fonts/Roboto-Medium.svg#Roboto") format("svg");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: "Roboto-Medium";
  src: url("../build/fonts/Roboto-Medium.eot");
  src: local("Roboto Medium"), local("Roboto-Medium"), url("../build/fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Medium.woff2") format("woff2"), url("../build/fonts/Roboto-Medium.woff") format("woff"), url("../build/fonts/Roboto-Medium.ttf") format("truetype"), url("../build/fonts/Roboto-Medium.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-MediumItalic.eot");
  src: local("Roboto MediumItalic"), local("Roboto-MediumItalic"), url("../build/fonts/Roboto-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-MediumItalic.woff2") format("woff2"), url("../build/fonts/Roboto-MediumItalic.woff") format("woff"), url("../build/fonts/Roboto-MediumItalic.ttf") format("truetype"), url("../build/fonts/Roboto-MediumItalic.svg#Roboto") format("svg");
  font-weight: 500;
  font-style: italic; }
@font-face {
  font-family: "Roboto-MediumItalic";
  src: url("../build/fonts/Roboto-MediumItalic.eot");
  src: local("Roboto MediumItalic"), local("Roboto-MediumItalic"), url("../build/fonts/Roboto-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-MediumItalic.woff2") format("woff2"), url("../build/fonts/Roboto-MediumItalic.woff") format("woff"), url("../build/fonts/Roboto-MediumItalic.ttf") format("truetype"), url("../build/fonts/Roboto-MediumItalic.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-Bold.eot");
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../build/fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Bold.woff2") format("woff2"), url("../build/fonts/Roboto-Bold.woff") format("woff"), url("../build/fonts/Roboto-Bold.ttf") format("truetype"), url("../build/fonts/Roboto-Bold.svg#Roboto") format("svg");
  font-weight: 700;
  font-style: normal; }
@font-face {
  font-family: "Roboto-Bold";
  src: url("../build/fonts/Roboto-Bold.eot");
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../build/fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Bold.woff2") format("woff2"), url("../build/fonts/Roboto-Bold.woff") format("woff"), url("../build/fonts/Roboto-Bold.ttf") format("truetype"), url("../build/fonts/Roboto-Bold.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-BoldItalic.eot");
  src: local("Roboto BoldItalic"), local("Roboto-BoldItalic"), url("../build/fonts/Roboto-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-BoldItalic.woff2") format("woff2"), url("../build/fonts/Roboto-BoldItalic.woff") format("woff"), url("../build/fonts/Roboto-BoldItalic.ttf") format("truetype"), url("../build/fonts/Roboto-BoldItalic.svg#Roboto") format("svg");
  font-weight: 700;
  font-style: italic; }
@font-face {
  font-family: "Roboto-BoldItalic";
  src: url("../build/fonts/Roboto-BoldItalic.eot");
  src: local("Roboto BoldItalic"), local("Roboto-BoldItalic"), url("../build/fonts/Roboto-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-BoldItalic.woff2") format("woff2"), url("../build/fonts/Roboto-BoldItalic.woff") format("woff"), url("../build/fonts/Roboto-BoldItalic.ttf") format("truetype"), url("../build/fonts/Roboto-BoldItalic.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-Black.eot");
  src: local("Roboto Black"), local("Roboto-Black"), url("../build/fonts/Roboto-Black.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Black.woff2") format("woff2"), url("../build/fonts/Roboto-Black.woff") format("woff"), url("../build/fonts/Roboto-Black.ttf") format("truetype"), url("../build/fonts/Roboto-Black.svg#Roboto") format("svg");
  font-weight: 900;
  font-style: normal; }
@font-face {
  font-family: "Roboto-Black";
  src: url("../build/fonts/Roboto-Black.eot");
  src: local("Roboto Black"), local("Roboto-Black"), url("../build/fonts/Roboto-Black.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-Black.woff2") format("woff2"), url("../build/fonts/Roboto-Black.woff") format("woff"), url("../build/fonts/Roboto-Black.ttf") format("truetype"), url("../build/fonts/Roboto-Black.svg#Roboto") format("svg"); }
@font-face {
  font-family: 'Roboto';
  src: url("../build/fonts/Roboto-BlackItalic.eot");
  src: local("Roboto BlackItalic"), local("Roboto-BlackItalic"), url("../build/fonts/Roboto-BlackItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-BlackItalic.woff2") format("woff2"), url("../build/fonts/Roboto-BlackItalic.woff") format("woff"), url("../build/fonts/Roboto-BlackItalic.ttf") format("truetype"), url("../build/fonts/Roboto-BlackItalic.svg#Roboto") format("svg");
  font-weight: 900;
  font-style: italic; }
@font-face {
  font-family: "Roboto-BlackItalic";
  src: url("../build/fonts/Roboto-BlackItalic.eot");
  src: local("Roboto BlackItalic"), local("Roboto-BlackItalic"), url("../build/fonts/Roboto-BlackItalic.eot?#iefix") format("embedded-opentype"), url("../build/fonts/Roboto-BlackItalic.woff2") format("woff2"), url("../build/fonts/Roboto-BlackItalic.woff") format("woff"), url("../build/fonts/Roboto-BlackItalic.ttf") format("truetype"), url("../build/fonts/Roboto-BlackItalic.svg#Roboto") format("svg"); }
body {
  background-color: #fff;
  color: #777;
  text-align: center;
  overflow-y: scroll;
  margin: 8px; }

.gameContainer {
  display: inline-block;
  text-align: left;
  margin: 20px 0; }
  .gameContainer *, .gameContainer *:after, .gameContainer *:before {
    font-family: "roboto-regular";
    box-sizing: border-box; }
  .gameContainer .header {
    margin-bottom: 5px; }
    .gameContainer .header .scores {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      box-pack: justify;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: justify; }
      .gameContainer .header .scores .scoreContainer {
        display: inline-block;
        border: solid 1px #ff4e47;
        padding: 4px 24px;
        color: #ff4e47;
        font-size: 14px;
        border-radius: 2px;
        margin: 8px 0;
        min-width: 156px;
        text-align: center; }
    .gameContainer .header .nameAndDescription .first {
      line-height: 40px;
      font-size: 16px; }
      .gameContainer .header .nameAndDescription .first .name {
        font-size: 24px;
        font-weight: bold;
        display: inline-block; }
      .gameContainer .header .nameAndDescription .first .right_options {
        display: inline-block;
        float: right; }
        .gameContainer .header .nameAndDescription .first .right_options .level {
          display: inline-block;
          float: left;
          width: 80px;
          text-align: center;
          border: 1px solid #c0c8c9;
          background-color: #fff;
          height: 30px;
          color: #777;
          margin-right: 20px;
          border-radius: 2px;
          outline: none; }
          .gameContainer .header .nameAndDescription .first .right_options .level option {
            color: #777; }
          .gameContainer .header .nameAndDescription .first .right_options .level:focus, .gameContainer .header .nameAndDescription .first .right_options .level:hover {
            border-color: #FF4E47;
            color: #FF4E47; }
        .gameContainer .header .nameAndDescription .first .right_options .newGame {
          cursor: pointer;
          float: left;
          position: relative;
          height: 30px;
          border-radius: 2px;
          outline: none;
          color: #F95E58;
          background: #fff;
          border: solid 1px #FF4E47;
          transition: all ease 300ms; }
          .gameContainer .header .nameAndDescription .first .right_options .newGame:focus, .gameContainer .header .nameAndDescription .first .right_options .newGame:hover {
            background-color: #FF4E47;
            color: #fff;
            border: solid 1px #FF4E47; }
      .gameContainer .header .nameAndDescription .first .desc {
        display: block;
        line-height: 22px;
        height: 22px; }
        .gameContainer .header .nameAndDescription .first .desc .d {
          display: inline-block;
          float: left; }
  .gameContainer .gridContainerOuter {
    background-color: #f0f0f0;
    border: solid 1px #d8d8d8;
    position: relative; }
    .gameContainer .gridContainerOuter .gridContainerInner {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10; }
      .gameContainer .gridContainerOuter .gridContainerInner .backgroundGrid {
        position: absolute; }
      .gameContainer .gridContainerOuter .gridContainerInner .mainGrid {
        position: absolute;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; }
        .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .tile {
          position: absolute;
          background-color: #ffffff;
          color: #777;
          text-align: center;
          border-radius: 3px;
          z-index: 100;
          opacity: 1;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
          -webkit-transition: all 100ms ease, z-index 400ms ease, opacity 400ms ease;
          -moz-transition: all 100ms ease, z-index 400ms ease, opacity 400ms ease;
          transition: all 100ms ease, z-index 400ms ease, opacity 400ms ease; }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .tile.invisible {
            z-index: -100;
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9); }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .tile.fixed {
            cursor: default;
            background-color: #ff4e47;
            color: #ffffff;
            z-index: 505; }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .tile.updated {
            z-index: 500;
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
            transform: scale(1.2); }
        .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .bit {
          position: absolute;
          background-color: #ffffff;
          color: #777;
          text-align: center;
          z-index: -5;
          opacity: 0.86;
          border-radius: 3px;
          visibility: hidden;
          -webkit-transform: scale(0.5);
          -moz-transform: scale(0.5);
          -ms-transform: scale(0.5);
          -o-transform: scale(0.5);
          transform: scale(0.5);
          -webkit-transition: none;
          -moz-transition: none;
          transition: none; }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .bit.transition {
            -webkit-transition: all 400ms ease-in, z-index 80ms linear;
            -moz-transition: all 400ms ease-in, z-index 80ms linear;
            transition: all 400ms ease-in, z-index 80ms linear; }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .bit.visible {
            -webkit-transform: scale(0.7);
            -moz-transform: scale(0.7);
            -ms-transform: scale(0.7);
            -o-transform: scale(0.7);
            transform: scale(0.7);
            z-index: 5;
            visibility: visible; }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .bit.invisible {
            z-index: -5;
            background-color: transparent;
            color: transparent; }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .bit.destroy-1 {
            top: -120px; }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .bit.destroy-2 {
            left: calc(100% + 120px); }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .bit.destroy-3 {
            top: calc(100% + 120px); }
          .gameContainer .gridContainerOuter .gridContainerInner .mainGrid .bit.destroy-4 {
            left: -120px; }

.gameOver {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(238, 228, 218, 0.73);
  z-index: 1;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  z-index: -5;
  visibility: hidden; }
  .gameOver.open {
    visibility: visible;
    z-index: 100; }
    .gameOver.open button, .gameOver.open .game-over-title {
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
      opacity: 1; }
  .gameOver button {
    border: none;
    color: #fff;
    background: #8f7a66;
    font-weight: bold;
    padding: 0 24px;
    border-radius: 3px;
    line-height: 42px;
    font-size: 14px;
    text-transform: uppercase;
    align-self: center;
    cursor: pointer;
    -webkit-transition: all ease 550ms 100ms;
    -moz-transition: all ease 550ms 100ms;
    transition: all ease 550ms 100ms;
    -webkit-transform: translateY(240px);
    -moz-transform: translateY(240px);
    -ms-transform: translateY(240px);
    -o-transform: translateY(240px);
    transform: translateY(240px);
    opacity: 0; }
  .gameOver .game-over-title {
    font-size: 40px;
    margin-bottom: 12px;
    font-weight: bold;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    transition: all ease 400ms;
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px);
    opacity: 0; }

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