html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline
}

html {
  line-height: 1
}

ol, ul {
  list-style: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle
}

q, blockquote {
  quotes: none
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none
}

a img {
  border: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block
}

@font-face {
  font-family: 'digital';
  src: url("../fonts/ds-digib-webfont.woff2") format("woff2"), url("../fonts/ds-digib-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal
}

body {
  font-family: 'Ubuntu', sans-serif;
  background: url(../img/pattern.png) repeat;
  margin: 0;
  overflow: hidden
}

.skewFaceStand {
  transform: rotate(-45deg) skew(-45deg, 15deg);
  -webkit-transform: rotate(-45deg) skew(-45deg, 15deg);
  -ms-transform: rotate(-45deg) skew(-45deg, 15deg);
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased
}

.skewFaceTop {
  transform: rotate(-45deg) skew(15deg, 15deg);
  -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
  -ms-transform: rotate(-45deg) skew(15deg, 15deg);
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased
}

.hide {
  display: none
}

.red {
  color: #990000
}

.red .help {
  background: #990000 !important
}

.orange {
  color: #ff7700
}

.orange .help {
  background: #ff7700 !important
}

.green {
  color: #347f00
}

.green .help {
  background: #347f00 !important
}

#backHome {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 8px;
  background: #990000;
  color: #fff;
  font-size: 11px;
  text-decoration: none;
  box-shadow: 2px 2px #ddd
}

#showRules {
  position: absolute;
  top: 32px;
  padding: 6px 10px;
  background: #eee;
  text-transform: uppercase;
  font-size: 11px;
  text-decoration: none;
  color: #000;
  box-shadow: 2px 2px #ddd
}

#popAI {
  position: absolute;
  top: 64px;
  padding: 6px 10px;
  background: #eee;
  text-transform: uppercase;
  font-size: 11px;
  text-decoration: none;
  color: #000;
  box-shadow: 2px 2px #ddd;
  display: none;
}

#gameMode {
  position: absolute;
  top: 0;
  left: 22px;
  padding: 6px 10px;
  background: #eee;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: 2px 2px #ddd
}

.select {
  display: block;
  width: 60px;
  line-height: 14px;
  text-align: center;
  background: #0c2670;
  color: #fff;
  font-size: 15px;
  padding: 8px; cursor: pointer;
  text-decoration: none;
}

.leaderboard {
  position: relative;
  width: 980px;
  height: 620px;
  margin: 50px auto;
  /*transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%); */
  background: url(../img/leaderboard.png) no-repeat center;
  background-size: contain
}

.leaderboard .container { max-width: 500px; margin: 0 auto; }

.leaderboard .title {
  margin: 0 auto;
  width: 400px;
  padding: 40px;
  text-align: center 
}

.leaderboard .title p { font-weight: bold; }

.leaderboard .title .the {
  color: #cc3333;
  text-transform: uppercase
}

.leaderboard .title .beergame {
  color: #0c2670; font-weight: bold;
text-transform: capitalize;
font-size: 40px;
margin: 10px 0;
}

.leaderboard .title .by {
  text-transform: uppercase
}

.leaderboard .title .logo { width: 160px; height: auto; margin: 0;
}

.leaderboard .singlePlayer, .leaderboard .multiPlayer {
  position: relative;
  font-size: 12px;
  color: #00a99d;
  /* top: 160px; position: absolute;
  width: 245px */ width: 100%;
}

.leaderboard .singlePlayer .title, .leaderboard .multiPlayer .title {
  text-align: center;
  padding: 10px
}

.leaderboard .singlePlayer .scoreboard, .leaderboard .multiPlayer .scoreboard {
  margin-top: 0
}

.leaderboard .singlePlayer .scoreboard .title, .leaderboard .multiPlayer .scoreboard .title {
  padding: 5px;
  background: #00a99d;
  text-transform: uppercase;
  color: #fff;
  text-align: right;
  margin: 0;
  width: auto;
  border-radius: 2px;
  border-bottom: 2px solid #00776d
}

.leaderboard .singlePlayer .legend, .leaderboard .multiPlayer .legend {
  position: absolute;
  display: inline-block;
  width: 100%;
  text-align: center;
  top: 300px;
  color: #3674bf
}

.leaderboard .singlePlayer .select, .leaderboard .multiPlayer .select {
  position: absolute;
  display: inline-block;
  width: 48%;
  padding: 15px 0;
  left: 0;
  top: 245px;
  border-radius: 30px; font-weight: bold;
}

.leaderboard .singlePlayer .select:hover, .leaderboard .multiPlayer .select:hover {
  border-bottom: 0;
  margin-top: 3px
}
/*
.leaderboard .singlePlayer .select.active::after, .leaderboard .multiPlayer .select.active::after {
  position: absolute;
  left: 43%;
  top: -13px;
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 8px;
  border-color: transparent #3674bf transparent transparent;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg)
}
*/
.leaderboard .singlePlayer .select strong, .leaderboard .multiPlayer .select strong {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 3px
}

.leaderboard .singlePlayer .select.advanced, .leaderboard .multiPlayer .select.advanced {
  right: 0;
  left: inherit
}

.leaderboard .singlePlayer .select.disabled, .leaderboard .multiPlayer .select.disabled {
  opacity: .4
}

.leaderboard .singlePlayer th, .leaderboard .multiPlayer th {
  padding: 10px;
  font-weight: 700
}

.leaderboard .singlePlayer tr.you, .leaderboard .multiPlayer tr.you {
  border-top: 1px solid
}

.leaderboard .singlePlayer tr.you td, .leaderboard .multiPlayer tr.you td {
  font-weight: 700
}

.leaderboard .singlePlayer td, .leaderboard .multiPlayer td {
  padding: 5px;
  font-size: 13px;
  width: 40%
}

.leaderboard .singlePlayer td:last-child, .leaderboard .multiPlayer td:last-child {
  text-align: right
}

.leaderboard .singlePlayer {
  /* right: 55% */
}

.leaderboard .singlePlayer.lms {
  left: 50%;
  right: inherit;
  margin-left: -230px;
  width: 460px
}

.leaderboard .multiPlayer {
  left: 55%
}

.leaderboard .multiPlayer.lms {
  position: relative;
  margin: 140px auto 0;
  width: 340px;
  left: inherit
}

.leaderboard .multiPlayer.lms a {
  display: block;
  background: #EDC459;
  border-radius: 5px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #000
}

.leaderboard .playerName {
  margin: 300px auto 0;
  width: 340px
}

.leaderboard .playerName span {
  display: inline-block;
  border-radius: 5px 0 0 5px;
  background: #EDC459;
  height: 19px;
  padding: 8px
}

.leaderboard .playerName input {
  padding: 10px;
  border: 0;
  background: #EDC459;
  border-radius: 0 5px 5px 0;
  margin: 10px -5px
}

.leaderboard .playerName input#player_name {
  background: #f7e5b5
}

.leaderboard .playerName .msg {
  color: #990000;
  font-size: 12px
}

.gameboard {
  position: relative;
  width: 1360px;
  height: 620px;
  margin: 47vh auto 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background: url(../img/gameboard.png) no-repeat center;
  background-size: contain;
}

.gameboard .multiPlayer {
  display: none
}

.gameboard .playthisplayer {
  display: none
}

.sticker {
  position: absolute;
  background: rgba(245, 78, 51, 0.8);
  color: #fff;
  text-transform: uppercase;
  padding: 4px 8px;
  font-size: 11px;
  display: inline-block
}

.sticker.right::after {
  position: absolute;
  right: 0;
  top: 19px;
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent #fca17d transparent transparent
}

.sticker.left::after {
  position: absolute;
  left: 0;
  top: 19px;
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #fca17d transparent transparent transparent
}

#equilibriumBar {
  overflow: visible !important;
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -140px;
  text-transform: uppercase;
  width: 310px;
  text-align: center;
  padding: 2px 3px 3px;
  height: 24px;
  border-radius: 20px;
  border: 1px solid #ccc;
  box-shadow: #ccc 1px 3px 0
}

#equilibriumBar::before {
  display: block;
  content: 'equilibrium';
  position: absolute;
  z-index: -10;
  color: #ccc;
  text-align: center;
  width: 100%;
  top: 5px
}

#equilibriumBar span {
  display: block;
  background: #97d317;
  border-radius: 20px;
  width: 20%;
  height: 25px;
  line-height: 25px;
  min-width: 15%
}

#week {
  position: absolute;
  top: 38px;
  right: 52%;
  text-transform: uppercase;
  background: #ffff00;
  width: 80px;
  text-align: center
}

#weekTime {
  overflow: visible !important;
  position: absolute;
  top: 32px;
  left: 716px;
  text-transform: uppercase;
  width: 65px;
  text-align: right;
  background: #ffff00;
  padding: 5px 13px 0 40px;
  height: 24px;
  border-radius: 0 20px 20px 0;
  box-shadow: #ccc 1px 3px 0;
  margin: 0 0 0 24px
}

#weekTime::before {
  position: absolute;
  top: 0;
  left: -24px;
  background: url(../img/yellow.gif) no-repeat 0 0;
  content: ' ';
  display: block;
  height: 29px;
  width: 42px
}

#ctlTime {
  position: absolute;
  top: 32px;
  left: 716px;
  width: 143px;
  height: 29px;
  z-index: 100;
  display: none
}

#ctlTime.play {}

#ctlTime a {
  display: block;
  height: 100%
}

.player {
  position: absolute;
  margin: 0;
  width: 450px;
  height: 245px
}

.player.bot .name, .player.bot .title, .player.bot .details, .player.bot .autoplayer {
  opacity: .5
}

.player .autoplayer {
  font-size: 11px;
  text-transform: uppercase;
  color: white;
  background: rgba(245, 78, 51, 0.8);
  display: block;
  border-radius: 5px;
  padding: 5px 0 3px 5px;
  width: 58px;
  position: absolute;
  top: 145px;
  left: 50px
}

.player .playthisplayer {
  position: absolute;
  width: 60%;
  height: 80%;
  z-index: 600;
  line-height: 190px;
  text-align: center;
  background: rgba(252, 234, 212, 0.8);
  border-radius: 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: #444;
  font-weight: 700
}

.player .help {
  float: left;
  display: block;
  padding: 2px 5px 0 6px;
  margin: -2px 0 0 -23px;
  background: #347f00;
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  text-decoration: none
}

.player .help.skewFaceStand {
  position: absolute;
  left: 25px;
  margin-top: 147px
}

.player .name {
  color: #ff7f00;
  text-transform: uppercase;
  font-size: 20px;
  margin-bottom: 5px
}

.player .name.current::before {
  font-size: 11px;
  content: 'is playing';
  text-transform: uppercase;
  color: white;
  background: rgba(245, 175, 65, 0.8);
  display: block;
  border-radius: 5px;
  padding: 5px 0 3px 5px;
  width: 58px;
  position: absolute;
  top: 44px;
  left: 44px;
  -moz-animation: blink 0.5s alternate infinite linear;
  -webkit-animation: blink 0.5s alternate infinite linear;
  animation: blink 0.5s alternate infinite linear
}

.player .title {
  color: #5a5d86;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px
}

.player .stitle {
  display: inline-block
}

.player .mail {
  position: absolute;
  opacity: 0;
  top: 130px;
  left: -27px
}

.player .mail img {
  width: 47px
}

.player .score {
  position: absolute;
  top: 0;
  color: #00d8cd;
  margin-left: 10px;
  font-size: 30px;
  font-family: 'digital'
}

.player .controls:before {
  content: '';
  background: url(../img/arrow-white.png) no-repeat 0 0;
  display: block;
  width: 40px;
  height: 22px;
  left: 86px;
  top: 7px;
  position: absolute;
  background-size: contain;
  z-index: 10
}

.player .userValue {
  position: absolute;
  border: 0;
  top: 0;
  width: 85px;
  color: #00d8cd;
  margin-top: -3px;
  margin-left: -81px;
  padding-right: 68px;
  font-size: 34px;
  border: 4px solid transparent;
  border-right-width: 40px;
  border-radius: 14px;
  font-family: 'digital';
  text-align: right;
  outline: none
}

.player .userValue.hl {
  -moz-animation: highlight 0.5s alternate infinite linear;
  -webkit-animation: highlight 0.5s alternate infinite linear;
  animation: highlight 0.5s alternate infinite linear
}

.player .button {
  position: absolute;
  left: 5px;
  background: #3674bf;
  color: #fff;
  font-size: 16px;
  font-family: 'Ubuntu', sans-serif;
  padding: 8px;
  margin-top: 3px;
  text-decoration: none;
  text-transform: uppercase
}

.player .button:hover {
  background: #1b518e
}

.player .button.snap {
  display: none;
  background: #ff7f00;
  margin-left: 72px
}

.player .button.snap:hover {
  background: #c60
}

.player .details {
  color: #347f00;
  margin: 55px 0 0 80px;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  text-transform: uppercase;
  display: none
}

.player .details .showStockDetails, .player .details .showCostDetails {
  position: absolute;
  display: block;
  width: 70px;
  height: 50px;
  left: 180px;
  top: 100px;
  z-index: 50
}

.player .details .showCostDetails {
  left: 250px;
  top: 150px
}

.player .details span, .player .details .gap, .player .details .lastflux {
  position: absolute;
  left: 90px;
  margin-top: -16px;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 6px
}

.player .details .gap {
  background: #ff7f00;
  color: #fff;
  margin-top: -28px;
  opacity: 0
}

.player .details .lastflux {
  margin: -73px 0 0 0;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed;
  padding: 20px 10px 10px;
  left: -71px;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  display: none;
  z-index: 200
}

.player .details .lastflux .obsolete, .player .details .lastflux .sale {
  display: none
}

.player .details .lastflux div {
  position: relative;
  display: inline-block;
  margin: 0 !important;
  width: 65px;
  text-align: right;
  font-size: 14px;
}

.player .details .lastflux div span {
  left: 0;
  padding: 0;
  width: 65px;
  font-size: 10px
}

.player .details.left {
  margin: 12px 0 0 -105px
}

.player .details .stock {
  margin-bottom: 22px;
  margin-left: 0
}

.player .details .backlogs {
  margin-bottom: 10px;
  margin-left: 35px
}

.player .details .cumulativecost {
  margin-bottom: 15px;
  margin-left: 86px
}

.player .details .cumulativecost .value {
  margin-top: -4px;
  left: 95px
}

.player .details .cumulativecost.bank {
  margin-top: 22px;
  margin-left: 72px
}

.player .details .cumulativecost.bank .value {
  margin-top: -16px;
  left: 95px
}

.player .details .cumulativecost.bank .help {
  margin-top: -2px
}

.player .details .cumulativecost .help {
  margin-top: 8px
}

.player .details .incomingorder {
  margin-bottom: 15px;
  margin-left: 132px
}

.player .details .incomingorder .help {
  margin-top: 8px
}

.player .details .incomingdelivery {
  margin-bottom: 10px;
  margin-left: 178px
}

.player .details .incomingdelivery .help {
  margin-top: 8px
}

.advanced .player .userValue {
  padding-right: 176px
}

.advanced .player .controls:before {
  left: 194px
}

#p1 .backlogs, #p2 .backlogs, #p3 .backlogs {
  margin-bottom: 0;
  margin-left: 39px
}

#p1 .backlogs, #p2 .backlogs, #p3 .backlogs {
  margin-bottom: 20px
}

#p1 {
  top: -100px;
  right: 50px
}

#p1 .sticker {
  top: 340px;
  left: 90px
}

#p1 .playthisplayer {
  margin: 90px 0 0 70px
}

#p2 {
  bottom: -100px;
  right: 170px
}

#p2 .details {
  margin: -10px 0 0 230px
}

#p2 .details .showStockDetails {
  top: -80px;
  left: 310px
}

#p2 .details .showCostDetails {
  top: -20px;
  left: 400px
}

#p2 .details .incomingdelivery .value {
  margin-top: -26px
}

#p2 .autoplayer {
  top: 140px;
  left: 60px
}

#p2 .sticker {
  top: -40px;
  left: 60px
}

#p2 .playthisplayer {
  margin: 10px 0 0 70px
}

#p3 {
  left: 140px;
  bottom: -10px
}

#p3 .sticker {
  top: -40px;
  left: 270px
}

#p3 .playthisplayer {
  margin: 40px 0 0 -10px
}

#p4 {
  left: 180px;
  top: -50px
}

#p4 .sticker {
  top: 315px;
  left: 145px
}

#p4 .autoplayer {
  top: 160px;
  left: 310px
}

#p4 .button.snap {
  margin: -63px 0 0 0
}

#p4 .playthisplayer {
  margin: 100px 0 0 30px !important
}

#p4 .mail {
  top: 260px;
  left: 113px
}

#p4 .help.skewFaceStand {
  position: absolute;
  margin: 279px 0 0 118px
}

#p4 .skewFaceTop {
  position: absolute;
  margin: 162px 0 0 320px;
  z-index: 500
}

#p4 .name {
  position: absolute;
  top: 230px;
  left: 160px;
  width: 240px;
  top: 187px;
  margin-left: -8px
}

#p4 .name.current::before {
  top: 9px;
  left: 165px
}

#p4 .title {
  position: absolute;
  top: 250px;
  left: 160px
}

#p4 .userValue {
  padding-right: 0;
  width: 70px;
  margin-left: -63px
}

#p4 .details {
  margin: 85px 0 0 100px
}

#p4 .details.left {
  margin: -10px 0 0 -180px
}

#p4 .details .showCostDetails {
  left: 20px;
  top: 190px
}

@-webkit-keyframes cloud1 {
  0% {
    left: 120%;
    top: -60px
  }

  100% {
    left: 35%;
    top: 100%
  }
}

@-moz-keyframes cloud1 {
  0% {
    left: 120%;
    top: -60px
  }

  100% {
    left: 35%;
    top: 100%
  }
}

@-ms-keyframes cloud1 {
  0% {
    left: 120%;
    top: -60px
  }

  100% {
    left: 35%;
    top: 100%
  }
}

@keyframes cloud1 {
  0% {
    left: 120%;
    top: -60px
  }

  100% {
    left: 35%;
    top: 100%
  }
}

@-webkit-keyframes cloud2 {
  0% {
    left: 70%;
    top: -60px
  }

  100% {
    left: -15%;
    top: 100%
  }
}

@-moz-keyframes cloud2 {
  0% {
    left: 70%;
    top: -60px
  }

  100% {
    left: -15%;
    top: 100%
  }
}

@-ms-keyframes cloud2 {
  0% {
    left: 70%;
    top: -60px
  }

  100% {
    left: -15%;
    top: 100%
  }
}

@keyframes cloud2 {
  0% {
    left: 70%;
    top: -60px
  }

  100% {
    left: -15%;
    top: 100%
  }
}

@-webkit-keyframes cloud3 {
  0% {
    left: 150%;
    top: -60px
  }

  100% {
    left: 65%;
    top: 100%
  }
}

@-moz-keyframes cloud3 {
  0% {
    left: 150%;
    top: -60px
  }

  100% {
    left: 65%;
    top: 100%
  }
}

@-ms-keyframes cloud3 {
  0% {
    left: 150%;
    top: -60px
  }

  100% {
    left: 65%;
    top: 100%
  }
}

@keyframes cloud3 {
  0% {
    left: 150%;
    top: -60px
  }

  100% {
    left: 65%;
    top: 100%
  }
}

@-webkit-keyframes cloud4 {
  0% {
    left: 87%;
    top: -60px
  }

  100% {
    left: 2%;
    top: 100%
  }
}

@-moz-keyframes cloud4 {
  0% {
    left: 87%;
    top: -60px
  }

  100% {
    left: 2%;
    top: 100%
  }
}

@-ms-keyframes cloud4 {
  0% {
    left: 87%;
    top: -60px
  }

  100% {
    left: 2%;
    top: 100%
  }
}

@keyframes cloud4 {
  0% {
    left: 87%;
    top: -60px
  }

  100% {
    left: 2%;
    top: 100%
  }
}

@-webkit-keyframes cloud5 {
  0% {
    left: 80%;
    top: -60px
  }

  100% {
    left: -5%;
    top: 100%
  }
}

@-moz-keyframes cloud5 {
  0% {
    left: 80%;
    top: -60px
  }

  100% {
    left: -5%;
    top: 100%
  }
}

@-ms-keyframes cloud5 {
  0% {
    left: 80%;
    top: -60px
  }

  100% {
    left: -5%;
    top: 100%
  }
}

@keyframes cloud5 {
  0% {
    left: 80%;
    top: -60px
  }

  100% {
    left: -5%;
    top: 100%
  }
}

@-webkit-keyframes smoke {
  0% {
    opacity: 0;
    top: 0
  }

  80% {
    opacity: 1;
    top: -40px
  }

  100% {
    opacity: 0;
    top: -50px
  }
}

@-moz-keyframes smoke {
  0% {
    opacity: 0;
    top: 0
  }

  80% {
    opacity: 1;
    top: -40px
  }

  100% {
    opacity: 0;
    top: -50px
  }
}

@-ms-keyframes smoke {
  0% {
    opacity: 0;
    top: 0
  }

  80% {
    opacity: 1;
    top: -40px
  }

  100% {
    opacity: 0;
    top: -50px
  }
}

@keyframes smoke {
  0% {
    opacity: 0;
    top: 0
  }

  80% {
    opacity: 1;
    top: -40px
  }

  100% {
    opacity: 0;
    top: -50px
  }
}

@-webkit-keyframes highlight {
  0% {
    border-color: white
  }

  100% {
    border-color: #ff7f00
  }
}

@-moz-keyframes highlight {
  0% {
    border-color: white
  }

  100% {
    border-color: #ff7f00
  }
}

@-ms-keyframes highlight {
  0% {
    border-color: white
  }

  100% {
    border-color: #ff7f00
  }
}

@keyframes highlight {
  0% {
    border-color: white
  }

  100% {
    border-color: #ff7f00
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-ms-keyframes blink {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes blink {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes move-top-left {
  from {
    background-position: 130% 0
  }

  to {
    background-position: 20% 0
  }
}

@-moz-keyframes move-top-left {
  from {
    background-position: 130% 0
  }

  to {
    background-position: 20% 0
  }
}

@-ms-keyframes move-top-left {
  from {
    background-position: 130% 0
  }

  to {
    background-position: 20% 0
  }
}

@keyframes move-top-left {
  from {
    background-position: 130% 0
  }

  to {
    background-position: 20% 0
  }
}

@-webkit-keyframes move-top-right {
  from {
    background-position: 80% 0
  }

  to {
    background-position: 0% 0
  }
}

@-moz-keyframes move-top-right {
  from {
    background-position: 80% 0
  }

  to {
    background-position: 0% 0
  }
}

@-ms-keyframes move-top-right {
  from {
    background-position: 80% 0
  }

  to {
    background-position: 0% 0
  }
}

@keyframes move-top-right {
  from {
    background-position: 80% 0
  }

  to {
    background-position: 0% 0
  }
}

@-webkit-keyframes move-bottom-left {
  from {
    background-position: 17% 0
  }

  to {
    background-position: 97% 0
  }
}

@-moz-keyframes move-bottom-left {
  from {
    background-position: 17% 0
  }

  to {
    background-position: 97% 0
  }
}

@-ms-keyframes move-bottom-left {
  from {
    background-position: 17% 0
  }

  to {
    background-position: 97% 0
  }
}

@keyframes move-bottom-left {
  from {
    background-position: 17% 0
  }

  to {
    background-position: 97% 0
  }
}

@-webkit-keyframes move-bottom-right {
  from {
    background-position: 0% 0
  }

  to {
    background-position: 88% 0
  }
}

@-moz-keyframes move-bottom-right {
  from {
    background-position: 0% 0
  }

  to {
    background-position: 88% 0
  }
}

@-ms-keyframes move-bottom-right {
  from {
    background-position: 0% 0
  }

  to {
    background-position: 88% 0
  }
}

@keyframes move-bottom-right {
  from {
    background-position: 0% 0
  }

  to {
    background-position: 88% 0
  }
}

.boat {
  position: absolute;
  background: url(../img/boat.png) no-repeat;
  background-size: contain;
  width: 93px;
  height: 54px;
  top: 370px;
  left: 437px
}

.boat.animated {
  width: 398px;
  height: 184px
}

.wholesalerTruck {
  position: absolute;
  background: none no-repeat;
  background-size: contain;
  width: 243px;
  height: 170px;
  top: 311px;
  left: 836px
}

.retailerTruck {
  position: absolute;
  background: none no-repeat;
  background-size: contain;
  width: 357px;
  height: 89px;
  top: 237px;
  left: 661px
}

.manufacturerTruck {
  position: absolute;
  background: none no-repeat;
  background-size: contain;
  width: 203px;
  height: 168px;
  top: 270px;
  left: 292px
}

.lighthouse {
  position: absolute;
  background: url(../img/lighthouse.gif) no-repeat;
  background-size: contain;
  width: 42px;
  height: 19px;
  top: 374px;
  left: 629px
}

.lighthouse.animated {
  background: url(../img/lighthouse.gif) no-repeat;
  background-size: contain;
  width: 60px;
  height: 38px
}

.smokes {
  position: absolute;
  top: 230px;
  left: 335px
}

.smokes .smoke {
  position: absolute;
  background: #ccc;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  -webkit-animation: smoke 2s infinite linear;
  -moz-animation: smoke 2s infinite linear;
  -ms-animation: smoke 2s infinite linear;
  -o-animation: smoke 2s infinite linear;
  animation: smoke 2s infinite linear
}

.smokes .smoke.s1 {
  width: 5px;
  height: 5px;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -ms-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s
}

.smokes .smoke.s2 {
  width: 7px;
  height: 7px;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  animation-duration: 1.5s
}

.cloud {
  position: absolute;
  display: none;
  width: 67px;
  height: 48px
}

.cloud.c1 {
  background: url(../img/cloud1.png) no-repeat;
  z-index: 80
}

.cloud.c2 {
  background: url(../img/cloud3.png) no-repeat;
  z-index: 50
}

.cloud.c3 {
  background: url(../img/cloud2.png) no-repeat;
  z-index: 90
}

.cloud.c4 {
  background: url(../img/cloud2.png) no-repeat;
  z-index: 70
}

.cloud.c5 {
  background: url(../img/cloud1.png) no-repeat;
  z-index: 60
}

.tabs ul {
  display: block;
  background: #ddd
}

.tabs ul li {
  display: inline-block;
  background: #ff7f00;
  height: 50px;
  width: 150px;
  margin-right: -4px;
  border-right: 3px solid #fff
}

.tabs ul li a {
  display: block;
  color: #fff;
  padding: 10px 10px 25px;
  text-decoration: none
}

.tabs ul li.selected {
  background: #c60
}

.tabs .tab {
  padding: 20px;
  display: none
}

.tabs .tab .graph-info {
  margin: -5px 0 15px;
  font-size: 14px;
  line-height: 20px
}

.graphboard {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -28%;
  margin-top: 13vh;
  width: 56%;
  height: 60%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 500
}

.graphboard .buttons {
  margin: 30px auto;
  text-align: center
}

.graphboard .buttons .select {
  display: inline-block;
  width: 160px;
  font-size: 16px;
  padding: 12px
}

.graphboard .buttons .select::selection {
  background: none
}

.overlay {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 150;
  display: none
}

#preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

#preloader div {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 26px;
}

#messages, #waitingOtherPlayers, #yourTurn {
  position: absolute;
  width: 640px;
  margin: 0 0 0 -320px;
  top: -36px;
  left: 50%;
  height: 16px;
  text-align: center;
  background-color: rgba(245, 78, 51, 0.8);
  text-transform: uppercase;
  color: white;
  padding: 10px;
  border-radius: 20px;
  z-index: 300
}

#waitingOtherPlayers {
  background-color: rgba(243, 156, 18, 0.8)
}

#yourTurn {
  background-color: rgba(141, 214, 25, 0.8)
}

#countdown {
  width: 20%;
  height: auto;
  position: absolute;
  margin: -112px -10%;
  font-size: 224px;
  color: white;
  left: 50%;
  top: 50%;
  text-align: center;
  z-index: 200
}

.popup {
  display: none
}

.popup p, .popup ul {
  margin-bottom: 10px
}

.popup li {
  list-style-type: circle;
  margin-left: 17px;
  padding-left: 0
}

.popup.big {
  position: absolute;
  width: 600px;
  background: white;
  z-index: 200;
  margin: 0 -300px;
  left: 50%;
  top: 140px;
  font-size: 13px
}

.popup.big .timer {
  font-size: 60px;
  margin: 50px;
  text-align: center
}

.popup.big .popup_header {
  text-align: center;
  background-color: rgba(245, 78, 51, 0.8);
  text-transform: uppercase;
  border-radius: 20px 20px 0 0;
  color: white;
  padding: 10px
}

.popup.big .fermer {
  float: right;
  cursor: pointer;
  text-decoration: none;
  color: white
}

.popup.big .fermer:hover {
  text-decoration: underline
}

.popup.big .popup_body {
  text-align: left;
  background: white;
  color: #5a5d86;
  padding: 20px 30px 20px 30px
}

.popup.big .btn_action {
  background-color: #565656;
  padding: 5px 10px 5px 10px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 20px;
  border: none;
  color: white;
  text-decoration: none
}

.popup.big .popup_footer {
  padding: 10px 20px;
  background-color: #e0e0e0;
  text-align: right
}

#equilibrium .popup_body {
  line-height: 20px
}

.popup.small {
  position: absolute;
  width: 320px;
  background: white;
  z-index: 400;
  font-size: 14px;
  line-height: 18px;
  border: 1px solid rgba(245, 78, 51, 0.8)
}

.popup.small::after {
  position: absolute;
  left: -65px;
  bottom: 19px;
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 32px;
  border-color: transparent rgba(245, 78, 51, 0.8) transparent transparent
}

.popup.small#init {
  left: 300px;
  top: 492px
}

.popup.small#stockLow {
  left: 415px;
  top: 465px
}

.popup.small#stockHigh {
  left: 415px;
  top: 465px
}

.popup.small#backlogsPositive {
  left: 440px;
  top: 490px
}

.popup.small#tutoStep1 {
  left: 400px;
  top: 267px
}

.popup.small#tutoStep2 {
  left: 300px;
  top: 310px
}

.popup.small#tutoStep3 {
  left: 510px;
  top: 495px
}

.popup.small#tutoStep4 {
  left: 565px;
  top: 560px
}

.popup.small#tutoStep5 {
  left: 470px;
  top: 382px
}

.popup.small#tutoStep6 {
  left: 420px;
  top: 446px
}

.popup.small .popup_small_header {
  padding: 5px 10px 5px 10px;
  text-align: center;
  background-color: rgba(245, 78, 51, 0.8);
  text-transform: uppercase;
  color: white
}

.popup.small .fermer {
  float: right;
  cursor: pointer;
  text-decoration: none;
  color: white
}

.popup.small .fermer:hover {
  text-decoration: underline
}

.popup.small .popup_small_body {
  text-align: left;
  background: white;
  color: #5a5d86;
  padding: 10px 20px 10px 20px
}

.popup.video {
  width: 70%;
  height: 700px;
  max-height: 70% !important;
  margin: 20px 15%;
  left: auto;
  top: 20px;
  text-align: center
}

#videoBGEasy, #videoBGAdvanced {
  object-fit: contain;
  height: 100%;
  width: 100%
}

#fluxDetails {
  top: auto;
  bottom: 100px
}

#fluxDetails .popup_header a {
  color: #fff;
  display: block;
  text-decoration: none;
  font-size: 16px
}

#fluxDetails .popup_header a::before {
  content: '';
  background: url("../img/arrow-white.png") no-repeat;
  display: block;
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  background-size: contain;
  position: absolute;
  left: 11px;
  top: 13px
}

#fluxDetails .popup_header a::after {
  content: '';
  background: url("../img/arrow-white.png") no-repeat;
  display: block;
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  background-size: contain;
  position: absolute;
  right: 11px;
  top: 13px
}

#fluxDetails .popup_body {
  height: 410px
}

#fluxDetails .flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  align-items: center;
  -webkit-align-items: center;
  clear: both;
  padding: 0 0 10px
}

#fluxDetails .flex div {
  padding: 15px
}

#fluxDetails .flex .players {
  color: rgba(90, 93, 134, 0.6);
  font-size: 18px;
  text-align: center;
  padding: 0;
  width: 25%
}

#fluxDetails .flex .players .name {
  padding: 15px 0 10px
}

#fluxDetails .flex .players .title {
  font-size: 14px;
  padding: 0
}

#fluxDetails .flex .me {
  text-align: center;
  font-size: 22px;
  padding: 0;
  width: 25%
}

#fluxDetails .flex .me .name {
  padding: 15px 0 10px
}

#fluxDetails .flex .me .stock, #fluxDetails .flex .me .backlogs {
  font-size: 14px;
  padding: 0;
  margin-bottom: 5px
}

#fluxDetails .flex .flux {
  padding: 0
}

#fluxDetails .flex .flux div {
  opacity: 0;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase
}

#fluxDetails .flex .flux div span {
  display: block;
  text-align: center;
  background-size: contain
}

#fluxDetails .flex .previous.flux .in {
  background-image: url("../img/arrow-right.png");
  background-repeat: no-repeat;
  background-position: top right;
  margin: 10px 0 0;
  padding: 15px 0 0
}

#fluxDetails .flex .previous.flux .in span {
  margin: 0 0 5px
}

#fluxDetails .flex .previous.flux .out {
  background-image: url("../img/arrow-left.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  margin: 0 0 10px;
  padding: 0 0 15px
}

#fluxDetails .flex .previous.flux .out span {
  margin: 5px 0 0
}

#fluxDetails .flex .next.flux .in {
  background-image: url("../img/arrow-left.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  margin: 0 0 10px;
  padding: 0 0 15px
}

#fluxDetails .flex .next.flux .in span {
  margin: 5px 0 0
}

#fluxDetails .flex .next.flux .out {
  background-image: url("../img/arrow-right.png");
  background-repeat: no-repeat;
  background-position: top right;
  margin: 10px 0 0;
  padding: 15px 0 0
}

#fluxDetails .flex .next.flux .out span {
  margin: 0 0 5px
}

#fluxDetails .popup-animations-top .first, #fluxDetails .popup-animations-top .last {
  width: 275px;
  height: 50px;
  float: left;
  padding: 0;
  background-image: url("../img/mail.png");
  background-repeat: no-repeat;
  background-position: -100% 0;
  background-size: contain
}

#fluxDetails .popup-animations-top .last {
  margin: 0 0 0 -30px
}

#fluxDetails .popup-animations-top .first.animation {
  -webkit-animation: move-top-left 1s 1 linear forwards;
  -moz-animation: move-top-left 1s 1 linear forwards;
  -ms-animation: move-top-left 1s 1 linear forwards;
  -o-animation: move-top-left 1s 1 linear forwards;
  animation: move-top-left 1s 1 linear forwards
}

#fluxDetails .popup-animations-top .last.animation {
  -webkit-animation: move-top-right 1s 1 linear forwards;
  -moz-animation: move-top-right 1s 1 linear forwards;
  -ms-animation: move-top-right 1s 1 linear forwards;
  -o-animation: move-top-right 1s 1 linear forwards;
  animation: move-top-right 1s 1 linear forwards
}

#fluxDetails .popup-animations-bottom .first, #fluxDetails .popup-animations-bottom .last {
  width: 305px;
  height: 50px;
  float: left;
  padding: 0;
  background-image: url("../img/truck.png");
  background-repeat: no-repeat;
  background-position: -100% 0;
  background-size: contain
}

#fluxDetails .popup-animations-bottom .last {
  margin: 0 0 0 -88px
}

#fluxDetails .popup-animations-bottom .first.animation {
  -webkit-animation: move-bottom-left 1s 1 linear forwards;
  -moz-animation: move-bottom-left 1s 1 linear forwards;
  -ms-animation: move-bottom-left 1s 1 linear forwards;
  -o-animation: move-bottom-left 1s 1 linear forwards;
  animation: move-bottom-left 1s 1 linear forwards
}

#fluxDetails .popup-animations-bottom .last.animation {
  -webkit-animation: move-bottom-right 1s 1 linear forwards;
  -moz-animation: move-bottom-right 1s 1 linear forwards;
  -ms-animation: move-bottom-right 1s 1 linear forwards;
  -o-animation: move-bottom-right 1s 1 linear forwards;
  animation: move-bottom-right 1s 1 linear forwards
}

#fluxDetails h4 {
  font-size: 16px;
  margin: 70px 0 5px;
  font-weight: 700;
  text-align: center
}

#fluxDetails .financial {
  text-align: center;
  display: flex
}

#fluxDetails .financial .col {
  float: left;
  width: 50%
}

#fluxDetails .financial h5 {
  font-size: 14px;
  margin: 20px;
  font-weight: 700
}

#fluxDetails .financial ul {
  padding: 0 10px
}

#fluxDetails .financial li {
  list-style-type: none;
  margin: 0 0 5px;
  text-align: left
}

#fluxDetails .financial li span {
  float: right
}

#fluxDetails .financial li.nstock, #fluxDetails .financial li.cc {
  font-weight: 700;
  margin-top: 10px
}

@media screen and (max-height: 767px) {
  .popup.big {
    top: 0px
  }

  .popup.small#tutoStep1 {
    left: 150px;
    top: 92px
  }

  .popup.small#tutoStep2 {
    left: 60px;
    top: 130px
  }

  .popup.small#tutoStep3 {
    left: 235px;
    top: 282px
  }

  .popup.small#tutoStep4 {
    left: 270px;
    top: 340px
  }

  .popup.small#tutoStep5 {
    left: 210px;
    top: 185px
  }

  .popup.small#tutoStep6 {
    left: 170px;
    top: 260px
  }

  .popup.small#stockLow {
    left: 120px;
    top: 305px
  }

  .popup.small#stockHigh {
    left: 120px;
    top: 305px
  }

  .popup.small#backlogsPositive {
    left: 160px;
    top: 315px
  }

  .popup.small#init {
    left: 60px;
    top: 308px
  }

  .gameboard {
    position: relative;
    width: 680px;
    height: 420px;
    margin: 50vh auto 0
  }

  #backHome, #gameMode, #showRules, #popAI {
    position: absolute;
    top: -65px;
    left: -150px;
    z-index: 600
  }

  #gameMode {
    left: -130px
  }

  #showRules {
    top: -35px
  }

  #popAI {
    top: -5px;
  }

  #countdown {
    font-size: 144px;
    margin: -72px -10%
  }

  #equilibriumBar {
    top: -20px;
    left: 50%;
    margin-left: -94px;
    width: 180px;
    padding: 2px 3px 3px;
    height: 14px;
    box-shadow: #ccc 1px 1px 0
  }

  #equilibriumBar::before {
    font-size: 12px;
    top: 3px
  }

  #equilibriumBar span {
    font-size: 12px;
    height: 15px;
    line-height: 15px;
    min-width: 15%
  }

  #week {
    top: 25px;
    right: 52%;
    width: 70px;
    font-size: 13px
  }

  #weekTime {
    font-size: 13px;
    top: 22px;
    left: 364px;
    width: 12px !important;
    padding: 3px 13px 2px 30px;
    height: 14px;
    box-shadow: #ccc 1px 2px 0;
    margin: 0 0 0 16px
  }

  #weekTime::before {
    top: 0;
    left: -16px;
    height: 19px;
    width: 28px;
    background-size: contain
  }

  #ctlTime {
    top: 22px;
    left: 364px;
    width: 70px;
    height: 19px;
    z-index: 100;
    background-size: contain;
    display: none
  }

  #ctlTime.play {}

  #ctlTime a {
    display: block;
    height: 100%
  }

  .animations {
    position: absolute;
    left: -340px
  }

  .clouds {
    display: none
  }

  .smokes {
    top: 180px;
    left: 445px
  }

  .lighthouse {
    width: 21px;
    top: 254px;
    left: 645px
  }

  .player .name {
    font-size: 16px
  }

  .player .title {
    font-size: 10px
  }

  .player .autoplayer, .player .name.current::before {
    font-size: 7px;
    width: 35px;
    top: 90px;
    left: 85px;
    padding: 2px 2px 1px 4px
  }

  .player .name.current::before {
    width: 37px
  }

  .player .button {
    font-size: 13px
  }

  .player .button.snap {
    margin-left: 61px
  }

  .player .controls:before {
    height: 19px;
    left: 77px
  }

  .player .userValue {
    padding-right: 58px;
    font-size: 31px
  }

  .player .details {
    font-size: 10px;
    margin: 55px 0 0 70px
  }

  .player .details span, .player .details .gap, .player .details .lastflux {
    font-size: 14px;
    left: 70px
  }

  .player .details .stock {
    margin-bottom: 12px
  }

  .player .details .stock .lastflux {
    left: -60px;
    margin-top: -70px
  }

  .player .details .cumulativecost {
    margin-left: 63px
  }

  .player .details .cumulativecost.bank .value {
    left: 64px
  }

  .player .details .cumulativecost .value {
    left: 75px
  }

  .player .details .cumulativecost .lastflux {
    left: -60px;
    margin-top: -70px
  }

  .player .details .cumulativecost, .player .details .incomingorder, .player .details .incomingdelivery {
    line-height: 10px;
    margin-bottom: 9px
  }

  .player .details .showStockDetails {
    left: 140px;
    top: 100px
  }

  .player .details .showCostDetails {
    left: 215px;
    top: 142px
  }

  .advanced .player .userValue {
    padding-right: 149px !important
  }

  .advanced .player .controls {
    margin-left: -20px;
    margin-top: 20px
  }

  .advanced .player .controls:before {
    left: 168px
  }

  #p1 .backlogs, #p2 .backlogs, #p3 .backlogs {
    margin-left: 29px;
    margin-bottom: 9px
  }

  #p1 .incomingorder, #p2 .incomingorder, #p3 .incomingorder {
    margin-left: 95px;
    margin-bottom: 10px
  }

  #p1 .incomingdelivery, #p2 .incomingdelivery, #p3 .incomingdelivery {
    margin-left: 130px
  }

  #p1 {
    top: -110px;
    right: -200px
  }

  #p1 .skewFaceTop {
    margin: -10px 0 0 60px
  }

  #p1 .details {
    margin: 60px 0 0 100px
  }

  #p1 .details .showStockDetails {
    left: 168px;
    top: 106px
  }

  #p1 .details .showCostDetails {
    left: 235px;
    top: 147px
  }

  #p1 .name.current::before {
    top: 16px;
    left: 51px
  }

  #p1 .autoplayer {
    top: 100px;
    left: 67px
  }

  #p1 .sticker {
    top: 270px;
    left: 90px
  }

  #p1 .playthisplayer {
    margin: 50px 0 0 82px
  }

  #p2 {
    bottom: -105px;
    right: -170px
  }

  #p2 .name.current::before {
    top: 15px;
    left: 72px
  }

  #p2 .autoplayer {
    top: 89px;
    left: 86px
  }

  #p2 .details {
    margin: 20px 0 0 130px
  }

  #p2 .button.snap {
    margin: 34px 0 0 0
  }

  #p2 .sticker {
    top: 5px;
    left: 20px
  }

  #p2 .details .showStockDetails {
    left: 210px;
    top: -23px
  }

  #p2 .details .showCostDetails {
    left: 275px;
    top: 17px
  }

  #p2 .details .incomingdelivery .value {
    margin-top: -16px
  }

  #p2 .playthisplayer {
    margin: 30px 0 0 40px !important
  }

  #p2 .userValue {
    padding-right: 0
  }

  #p3 {
    left: -90px;
    bottom: -30px
  }

  #p3 .sticker {
    left: 240px;
    top: 25px
  }

  #p3 .name.current::before {
    top: 15px;
    left: 72px
  }

  #p3 .autoplayer {
    top: 89px;
    left: 86px
  }

  #p3 .details .cumulativecost {
    margin-bottom: 10px
  }

  #p3 .details .incomingorder {
    margin-left: 100px;
    margin-bottom: 10px
  }

  #p3 .details .incomingdelivery {
    margin-left: 135px
  }

  #p3 .playthisplayer {
    margin: 80px 0 0 -40px
  }

  #p4 {
    left: -20px;
    top: -150px
  }

  #p4 .skewFaceTop {
    margin: 220px 0 0 115px;
    z-index: 0
  }

  #p4 .skewFaceTop .button.nextWeek {
    margin: -28px 0 0 0
  }

  #p4 .skewFaceTop .button.snap {
    margin: 3px 0 0 0;
    width: 75px
  }

  #p4 .userValue {
    padding-right: 0 !important;
    top: -65px;
    margin-left: 0;
    text-align: left
  }

  #p4 .name.current::before {
    top: 16px;
    left: 86px
  }

  #p4 .autoplayer {
    top: 215px;
    left: 240px
  }

  #p4 .sticker {
    left: 165px;
    top: 290px
  }

  #p4 .details {
    margin: 115px 0 0 -105px
  }

  #p4 .details .stock {
    margin-bottom: 15px
  }

  #p4 .details .backlogs {
    margin-left: 25px
  }

  #p4 .details .showStockDetails {
    left: -10px;
    top: 175px
  }

  #p4 .details .showCostDetails {
    left: 50px;
    top: 230px
  }

  #p4 .details.left {
    margin: 15px 0 0 -165px
  }

  #p4 .details.left .cumulativecost {
    margin-left: 120px
  }

  #p4 .details.left .incomingorder {
    margin-left: 150px
  }

  #p4 .playthisplayer {
    margin: 140px 0 0 -60px !important
  }

  .boat {
    height: 37px;
    top: 251px;
    left: 515px
  }

  .boat.animated {
    height: 125px
  }

  .retailerTruck {
    height: 60px;
    top: 162px;
    left: 668px
  }

  .wholesalerTruck {
    height: 114px;
    top: 211px;
    left: 786px
  }

  .manufacturerTruck {
    height: 114px;
    top: 182px;
    left: 418px
  }
}

_:-ms-lang(x), .player .userValue {
  margin-left: -91px;
  padding-right: 78px
}

.safari-ipad .leaderboard {
  width: 980px
}

.safari-ipad #p1 .userValue {
  width: 62px;
  height: 17px;
  padding-right: 66px
}

.safari-ipad #p2 .userValue {
  width: 62px;
  height: 17px;
  padding-right: 66px
}

.safari-ipad #p3 .userValue {
  width: 62px;
  height: 17px;
  padding-right: 66px
}

.safari-ipad #p4 .userValue {
  width: 62px;
  height: 17px;
  padding-right: 66px
}

#whiteblocker {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}

.desktop { display: block!important; }
.mobile { display: none!important; }


@media screen and (max-height: 500px) {
.mobile { display: block!important; text-align: center; padding: 20px 0; }
.desktop { display: none!important; }

}