body {
  overflow: hidden;
  background: #000;
}

#container {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/grunge2.jpg");
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1300px;
  max-height: 650px;
  margin: auto;
  overflow: hidden;
}

.opener, .winning, .hangry {
  position: absolute;
  width: 60vw;
  background: black;
  font-size: 1.1em;
  left: 50%;
  color: white;
  margin-left: -33.3333333333vw;
  margin-top: 10vh;
  border-radius: 10px;
  font-family: 'Fira Mono', monospace;
  padding: 10vmin 4%;
  line-height: 2em;
  overflow: scroll;
}

.opener {
  z-index: 7000;
}

.winning, .hangry, .twitter {
  z-index: 30000;
  font-size: 1em;
  text-align: center;
  min-height: 60px;
}
.winning a, .hangry a, .twitter a {
  color: #00ffff;
  transition: 0.3s color ease;
  vertical-align: top;
  text-decoration: none;
}
.winning a:hover, .hangry a:hover, .twitter a:hover {
  color: #0ecece;
}

h1.winning, h1.hangry-text {
  text-align: center;
  font-size: 20px;
}

.award, .hangry-svg {
  width: 85px;
  height: 90px;
  display: table;
  margin: 30px auto;
}

.award {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/award-export.svg") no-repeat;
}

.hangry-svg {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hangry-export.svg") no-repeat;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #ff0032;
}

.overlayOpener {
  z-index: 6000;
}

.overlayLosing, .overlayWinning {
  z-index: 20000;
}

.overlayMargarita {
  z-index: 6000;
  visibility: hidden;
  opacity: 0;
  background: #cbdf26;
}

.loseContainer, .winContainer {
  visibility: hidden;
  opacity: 0;
}

.mutebutton {
    display: none;
  /*position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 10000;*/
}

.start {
  padding: .5em 1em;
  background: #00ffff;
  color: black;
  border-radius: 4px;
  border: none;
  margin: 30px auto 0;
  display: table;
  transition: background 0.5s ease;
}

.start:hover {
  background: #13d0d0;
  transition: background 0.3s ease;
}

.dots {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/dot3.svg);
  background-size: 30px;
  width: 100vw;
  height: 100vh;
  opacity: 0.8;
  position: absolute;
}

#app {
  position: relative;
}

.bk-clouds {
  position: absolute;
  left: -5vw;
  top: 30px;
  width: 40vw;
}

.cloud {
  position: absolute;
  top: 30px;
  width: 40vw;
}

.cloud2 {
  position: absolute;
  bottom: 10px;
  width: 20vw;
  opacity: 0.3;
}

.cloud3 {
  position: absolute;
  top: 200px;
  width: 30vw;
  opacity: 0.5;
}

.controls {
  position: absolute;
  right: -3vw;
  width: 30vw;
  top: 40vh;
}
.controls #up, .controls #down, .controls #left, .controls #right {
  cursor: pointer;
}

.elephantContainer {
  position: absolute;
  top: 15vh;
  left: 35vw;
  width: 30vw;
  background: url("../cerdito.png") center center no-repeat;
  background-size: 200px 200px;
}

.taco {
  /*background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/taco-export.svg");*/
  background: url("../moneda.png") center center no-repeat;
  background-size: cover;
  width: 95px;
  height: 95px;
}

.margarita {
  /*background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/margarita-export.svg");*/
  background: url("../billete.png") center center no-repeat;
  background-size: cover;
  width: 90px;
  height: 44px;
}

.tacoContainer, .textContainer, .margaritaContainer {
  position: absolute;
  -webkit-transform: translate3d(105vw, 0, 0);
          transform: translate3d(105vw, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.heartmeter {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -6vw;
  width: 15vw;
  z-index: 3000;
}

.wow {
  background-size: cover;
  width: 150px;
  position: absolute;
  right: 0;
  top: 50px;
  visibility: hidden;
}

.inWow {
  /*background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/wow.png") no-repeat;*/
  background: url("../ahorro.png") center center no-repeat;
  height: 120px;
}

.deWow {
  /*background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/bang2.png") no-repeat;*/
  background: url("../gasto.png") center center no-repeat;
  height: 150px;
}

.mWow {
  /*background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/margarita-pow.png") no-repeat;*/
  background: url("../bolsa.png") center center no-repeat;
  height: 272px;
  width: 318px;
}

.relative {
  position: relative;
}

pre {
  position: absolute;
  top: 70vh;
  left: 35vw;
  width: 30vw;
  background: #eee;
  opacity: 0.8;
  z-index: 100000000;
}

.controls-top {
  z-index: 3000;
}

.mute {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6000;
  cursor: pointer;
}

.st0 {
  fill: none;
  /*fill: #e2dfd8;
  stroke: #050606;
  stroke-width: 0.5;
  stroke-miterlimit: 10;*/
}

.st1 {
  /*fill: #e2dfd8;
  stroke: #050505;
  stroke-width: 0.5;
  stroke-miterlimit: 10;*/
  fill: none;
}

.st2 {
  /*fill: #050606;*/
  fill: none;
}

.st3 {
  fill: #020202;
}

.st4 {
  fill: none;
  /*stroke: #020202;
  stroke-miterlimit: 10;*/
}