body {
    background-image: url("../images/fondo.png");
    background-color: #FFD900 !important;
    font-family: 'Press Start 2P' !important;
    margin: 0;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=),auto;
}

html {
  height: -webkit-fill-available;
}

#mainDiv {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}
div {
  margin: auto;
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.no-height {
  height: 0px !important;
}

#musicaOnOffContainer {
  position: absolute;
  height: 7vh;
  width: 7vw;
  top: 0;
  left: 0;
  padding: .5em;
  z-index: 1;
}

#target {
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
}

.shaq {
  width: auto;
  height: 100%;
}

.seccionHeaderMusica img {
  height: 100%;
}

#seccionPortada {
  width: 100%;
  text-align: center;
}

.seccionHeader {
  border-left: 3px solid;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0,pointer;
}

#portadaDiv {
  flex-direction: column;
}

#menuDiv {
  width: 100%;
  text-align: center;
}

#infoPanel {
  background-image: url('../images/info_bg_2.png');
  background-repeat: repeat-x;
  width: 100vw;
}

.bgColorCris {
  background-color: #ed995c;
}

.bgColorComparte {
  background-color: #ed995c;
}

.bgColorDavid {
  background-color: #adbf6b;
}

.bgColorBus {
  background-color: #b4fff1
}

.bgColorConfirma {
  background-color: #ffee61;
}

.bgColorCelebracion {
  background-color: #cda6db;
}

#fondoBocadillo {
  height: 100vh;
  width: 100vw;
}

#bocadillo {
  height: 20vh;
  margin-bottom: .5em;
  margin-top: 0;
}

#fondoBocadillo img {
  height: auto;
  width: 100%;
}

.divMap {
  padding: 2em;
}

#hablandoContainer {
  height: 98%;
  width: 100%;
}

img.h100 {
  height: 100%;
}

img.w100 {
  width: 100%;
}

img.h25 {
  height: 25vh
}

#infoHablando div {
  display: inline-block;
}

#confirma {
  height: 20vh;
  margin: 12em 0 10em 0;
}

#pixelContainer {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: inline-block;
  z-index:999;
}

.oculto {
  visibility: hidden;
  display: none !important;
}

.nes-field {
    line-height: 1em !important;
    font-size: 1.2em;
}

.nes-select {
  line-height: 1em !important;
}

.iconButton {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0,pointer;
}

.pixelCon {
  position: absolute;
  width: 120%;  height: 120%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

#musica {
  position: absolute;
  z-index: 1;
  margin: 1em;
  top: 0vh;
}

.pixel {
  width: 5%;
  padding-top: 5%;
  float: left;
  opacity: 0.0;
}

.anim1sec {
  animation: blink 1s ease-out .1s alternate 1 forwards running;
}
.anim2sec {
  animation: blink 1s ease-out .2s alternate 1 forwards running;
}
.anim3sec {
  animation: blink 1s ease-out .3s alternate 1 forwards running;
}
.anim4sec {
  animation: blink 1s ease-out .4s alternate 1 forwards running;
}
.anim5sec {
  animation: blink 1s ease-out .5s alternate 1 forwards running;
}
.anim6sec {
  animation: blink 1s ease-out .6s alternate 1 forwards running;
}
.anim7sec {
  animation: blink 1s ease-out .7s alternate 1 forwards running;
}
.anim8sec {
  animation: blink 1s ease-out .8s alternate 1 forwards running;
}
.anim9sec {
  animation: blink 1s ease-out .9s alternate 1 forwards running;
}

.anim10sec {
  animation: blink 1s ease-out .10s alternate 1 forwards running;
}

@keyframes blink {
  0%    {opacity: 0.0;}
  25%   {opacity: 0.25;}
  50%   {opacity: 0.5;}
  100%  {opacity: 1.0;}
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}