.full100, html, body, .bg, .main, .game-start {
  width: 100%;
  height: 100%; }

a, img {
  outline: none !important; }

.main {
  font-family: 'Oswald', sans-serif;
  position: relative;
  max-width: 375px;
  max-height: 580px;
  overflow: hidden;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */ }

.play-area {
  position: relative;
  max-width: 580px;
  min-width: 320px;
  height: 100%; }

.state {
  position: relative; }

.state-play {
  display: none; }

.state-end {
  display: none;
  padding-top: 140px; }

.state-tutorial {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  color: #fff; }
  .state-tutorial .close-tutorial {
    padding: 20px; }
  .state-tutorial .slick-dots li button {
    border: solid 2px #4b4b4b;
    border-radius: 50%; }
  .state-tutorial .slick-dots li.slick-active button:before {
    color: #fff;
    opacity: 1;
    font-size: 8px;
    line-height: 22px; }
  .state-tutorial .js-slick-img {
    padding-bottom: 20px; }
    .state-tutorial .js-slick-img img {
      display: block;
      width: 188px;
      height: auto; }
  .state-tutorial .js-slick-text {
    padding: 0 20px;
    font-size: 16px;
    font-weight: 300; }

.bg {
  position: absolute;
  top: 0; }

.game-start {
  position: absolute;
  padding: 0 40px;
  top: 392px; }
  .game-start a {
    padding-bottom: 4px; }

.top-wrapper {
  margin-top: 65px;
  font-size: 20px;
  font-weight: bold; }
  .top-wrapper .points-wrapper {
    position: relative;
    display: inline-block; }
    .top-wrapper .points-wrapper .img-points {
      width: 92px; }
    .top-wrapper .points-wrapper .img-star {
      position: absolute;
      width: 73px;
      top: 37px;
      right: -17px;
      opacity: 0; }
    .top-wrapper .points-wrapper .points {
      position: absolute;
      top: 12px;
      right: 18px; }
  .top-wrapper .timer-wrapper {
    position: relative;
    text-align: right; }
    .top-wrapper .timer-wrapper .img-timer {
      width: 110px; }
    .top-wrapper .timer-wrapper .timer {
      position: absolute;
      top: 12px;
      right: 20px; }

.counter-wrapper {
  position: relative;
  margin-top: 90px; }

.counter {
  position: relative;
  left: 24px;
  width: 216px; }

.customer-wrapper {
  position: absolute;
  top: 8px;
  right: 22px; }
  .customer-wrapper .speech-left {
    width: 95px;
    height: auto;
    position: absolute;
    top: -75px;
    left: 15px;
    opacity: 0; }
    .customer-wrapper .speech-left .product {
      width: 28px;
      height: auto;
      position: absolute;
      top: 10px;
      left: 33.5px;
      opacity: 0; }
  .customer-wrapper .speech-right {
    width: 95px;
    height: auto;
    position: absolute;
    top: -85px;
    right: -35px;
    opacity: 0; }
    .customer-wrapper .speech-right p {
      position: absolute;
      top: 24px;
      font-size: 16px;
      left: 15px; }
  .customer-wrapper .customer {
    height: auto;
    overflow: hidden;
    display: none; }
    .customer-wrapper .customer img {
      width: 200%; }
    .customer-wrapper .customer-a {
      width: 163px; }
    .customer-wrapper .customer-b {
      width: 161px; }

.product-choice-wrapper {
  margin-top: 30px;
  position: relative; }
  .product-choice-wrapper ul {
    padding: 20px 4px;
    position: absolute;
    top: 0;
    width: 100%; }
    .product-choice-wrapper ul .product-choice {
      width: 25%;
      padding: 0 10px; }
      .product-choice-wrapper ul .product-choice .tick {
        margin-top: 10px; }
      .product-choice-wrapper ul .product-choice .isDraggable {
        width: 50%;
        cursor: pointer;
        touch-action: none; }
        .product-choice-wrapper ul .product-choice .isDraggable.isDragging {
          border: solid 2px #e01a20;
          border-radius: 2px; }

.end-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 30px; }
  .end-wrapper p {
    font-size: 18px; }
  .end-wrapper .img-ok {
    width: 119px; }

.btn-red, .btn-red-no-border {
  background: #e20c18;
  border: solid 3px #000;
  color: #ffffff;
  -webkit-box-shadow: 0px 4px 0px 0px #b0b0af;
  -moz-box-shadow: 0px 4px 0px 0px #b0b0af;
  box-shadow: 0px 4px 0px 0px #b0b0af;
  font-size: 20px; }
  .btn-red:hover, .btn-red-no-border:hover {
    color: #ffffff; }
  .btn-red-no-border {
    border-color: #e20c18;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }