@font-face {
  font-family: CardenioModernBold;
  src: url(font/CardenioModern-Bold.ttf) format("truetype");
}

body {
	margin: 0px;
	background-color: #ffffff;
  overflow: hidden;
}

.preloader {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #ffe22d;
  z-index: 99999;
  background-image: url(../images/preloader-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.preloader .perc {
  position: absolute;
  top: 55vh;
  width: 20vw;
  left: 50%;
  margin-left: -10vw;
  font-family: CardenioModernBold;
  font-size: 3vh;
  color: #000;
  text-align: center;
  display: none;
}
.preloader-bar-content {
  position: relative;
  top: 59vh;
  width: 31.343vw;
  left: 50%;
  margin-left: -15.672vw;
}
.preloader .preloader-bar {
  position: absolute;
  top: 0vh;
  width: 31.343vw;
  left: 50%;
  margin-left: -15.672vw;
}

.preloader .preloader-progress {
  position: absolute;
  top: 0.9vw;
  width: 0vw;/*29.8vw;*/
  left: 50%;
  margin-left: -14.9vw;
  background-color: #e079b1;
  height: 2.71vw;
  border-radius: 0.5vw;
}

.girar {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    z-index: 9999;
    display: none;
}

.scroll-up {
  position: fixed;
  right: 1.8vw;
  top: 3vw;
  width: 5.549vw;
  cursor: pointer;
}

.scroll-down {
  position: fixed;
  right: 1.8vw;
  bottom: 2vw;
  width: 5.549vw;
  cursor: pointer;
  top:10vw;
}

.section {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100%;
    display: none;
    overflow: hidden;
}
.section .bg {
    width: 100%;
    z-index: 0;
    position: absolute;
}
.section-content {
  position: relative;
  height: 100vh;
  width: 220.371vh;
  left: 50%;
  margin-left: -110.1855vh;
}

iframe {
  width: 100%;
  border: none;
  height: 100vh;
  overflow: hidden;
  /*pointer-events:none;*/
}

video {
  width: 100%;
  border: none;
  height: auto;
  overflow: hidden;
  /*pointer-events:none;*/
}

.section-2 .num {
  position: absolute;
  font-family: CardenioModernBold;
  font-size: 6.19vh;
  color: #000;
  top: 67.5926vh;
  left: 134vh;
  width: 21vh;
  text-align: center;
}
.section-2 .stickers-left {
  position: absolute;
  top: 67.5926vh;
  left: 124.3vh;
  cursor: pointer;
  width: 8.426vh;
}
.section-2 .stickers-right {
  position: absolute;
  top: 67.5926vh;
  left: 155.3vh;
  cursor: pointer;
  width: 7.408vh;
}
.section-2 .stickers {
  position: absolute;
  top: 25vh;
  left: 120vh;
  width: 52vh;
  overflow: hidden;
}
.stickers-items {
  width: 1000vh;
}
.stickers-item-page {
  width: 53vh;
  height: 40vh;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.stickers-items .sticker-bg {
  width: 15.464vh;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.stickers-items .sticker, .stickers-items .sticker-locked {
  width: 11.76vh;
  height: 13.71vh;
  position: absolute;
  top: 1.8vh;
  left: 1.8vh;
  z-index: 1;
}
.stickers-items .stickers-item {
  position: relative;
  margin-right: 2.2vh;
  margin-bottom: 2vh;
  width: 15.463vh;
  height: 17.686vh;
  display: inline-block;
}
.gotas-bg {
  position: absolute;
  top: 28.37vh;
  left: 60vh;
  width: 45.649vh;
  z-index: 2;
}
.gota-sum {
  position: absolute;
  width: 4.034vw;
  z-index: 1;
  display: none;
}
.gota-sum-1 {
  top: 67.3vh;
    left: 79.9vh;
    width: 8.89vh;
}
.gota-sum-2 {
  top: 63.7vh;
  left: 79.8vh;
  width: 8.982vh;
}
.gota-sum-3 {
  top: 59.5vh;
  left: 79.2vh;
  width: 9.538vh;
}
.gota-sum-4 {
  top: 53.7vh;
  left: 79vh;
  width: 9.723vh;
}
.gota-sum-5 {
  top: 50.4vh;
  left: 78.96vh;
  width: 9.815vh;
}
.gota-sum-6 {
    top: 44.3vh;
    left: 78.4259vh;
    width: 10.278vh;
}
.gota-sum-7 {
  top: 40.4vh;
  left: 78.15vh;
  width: 10.556vh;
}
.gota-sum-8 {
  top: 36.7vh;
  left: 77.9vh;
  width: 10.926vh;
}
.hazlo-crecer {
  position: absolute;
  top: 67vh;
  left: 82vh;
  width: 26vh;
  z-index: 2;
}
.sticker-modal {
  position: fixed;
  top: 0vw;
  left: 0vw;
  bottom: 0vw;
  right: 0vw;
  width: 100%;
  background-color: #000000b3;
  z-index: 99;
  opacity: 0;
  margin-top: -50vw;
  display: none;
}
.sticker-modal-bg {
  position: absolute;
  top: 2vw;
  width: 47.268vw;
  left: 50%;
  margin-left: -23.634vw;
  z-index: 0;
}
.sticker-modal-close {
  position: absolute;
  top: 4.4vw;
  width: 4.756vw;
  left: 66.9vw;
  z-index: 1;
  cursor: pointer;
}
.sticker-modal-item-1 {
  position: absolute;
  top: 10.5vw;
  width: 19.5vw;
  height: 23.5vw;
  left: 40.35vw;
  z-index: 1;
  transform: rotate(355.3deg);
  display: none;
}
.sticker-modal-item-2 {
  position: absolute;
  top: 12vw;
  width: 19.5vw;
  height: 23.5vw;
  left: 47vw;
  z-index: 1;
  transform: rotate(370deg);
  display: none;
}
/* ayuda */
.help-modal {
  position: fixed;
  top: 0vw;
  left: 0vw;
  bottom: 0vw;
  right: 0vw;
  width: 100%;
  background-color: #000000b3;
  z-index: 99;
  opacity: 0;
  margin-top: -50vw;
  display: none;
}
.help-modal-bg {
  position: absolute;
  top: 5.1vw;
  width: 52.6vw;
  left: 50%;
  margin-left: -26.3vw;
  z-index: 0;
}
.help-modal-close {
  position: absolute;
  top: 4.4vw;
  width: 4.756vw;
  left: 74vw;
  z-index: 1;
  cursor: pointer;
}
/* gotas */
.drops-modal {
  position: fixed;
  top: 0vw;
  left: 0vw;
  bottom: 0vw;
  right: 0vw;
  width: 100%;
  background-color: #000000b3;
  z-index: 99;
  opacity: 0;
  margin-top: -50vw;
  display: none;
}
.drops-modal-bg {
  position: absolute;
  top: 2vw;
  width: 47.268vw;
  left: 50%;
  margin-left: -23.634vw;
  z-index: 0;
}
.drops-modal-close {
  position: absolute;
  top: 4.4vw;
  width: 4.756vw;
  left: 66.9vw;
  z-index: 1;
  cursor: pointer;
}
.drops-num {
  position: absolute;
  top: 23.9vw;
  width: 4vw;
  left: 53.3vw;
  z-index: 1;
  font-family: 'CardenioModernBold';
  font-size: 2.2vw;
  color: #fff;
  text-align: center; 
}
/* gotas end*/
.album-help-btn {
  position: absolute;
  width: 4vw;
  top: 2vh;
  left: 50%;
  margin-left: 28vw;
  cursor: pointer;
}
.album-sound-btn {
  position: absolute;
  width: 4vw;
  top: 2vh;
  left: 50%;
  margin-left: 33vw;
  cursor: pointer;
}

.video-help-btn {
  position: absolute;
  width: 4vw;
  top: 2vh;
  left: 50%;
  margin-left: 28vw;
  cursor: pointer;
}
.video-sound-btn {
  position: absolute;
  width: 4vw;
  top: 2vh;
  left: 50%;
  margin-left: 33vw;
  cursor: pointer;
}

.videosbook {
  position: absolute;
  width: 26vh;
  left: 50%;
  margin-left: 63vh;
  top: 24vh;
  cursor: pointer;
}
.videos-bottom {
  position: absolute;
  top: 80vh;
  width: 104vh;
  left: 50%;
  margin-left: -52vh;
}
.video-left {
  width: 8.426vh;
  position: absolute;
  top: 4.4vh;
  left: 0vh;
  cursor: pointer;
}
.video-right {
  width: 7.408vh;
  position: absolute;
  top: 4.7vh;
  right: 0vh;
  cursor: pointer;
}
.videos-thumbs {
  position: absolute;
  width: 82vh;
  height: 18vh;
  left: 12vh;
  top: 0vh;
  overflow: hidden;
}
.videos-items {
  width: 500vh;
}
.videos-item {
  display: inline-block;
  position: relative;
  background-image: url(../images/video-item-bg.png);
  width: 18.612vh;
  height: 18.056vh;
  background-repeat: no-repeat;
  vertical-align: top;
  margin-right: 2vh;
  cursor: pointer;
  background-size: 100% auto;
}
.videos-item img {
  width: 14.445vh;
  position: absolute;
  top: 1.52vh;
  left: 1.81vh;
}
.videos-item .no-tocar {
  width: 16.945vh;
  top: 1.4vh;
  left: 0.4vh;
}
#video-player {
  background-color: #000;
  position: absolute;
  top: 11vh;
  left: 50%;
  width: 110vh;
  height: 62vh;
  margin-left: -55vh;
}
#video-player iframe {
  height: 100%;
}

.gag {
  display: none;
}

.gag-1 {
  position: fixed;
  width: 2380px;
  height: 1080px;
  overflow: hidden;
  background: url(../images/gags/bdb-gag_slime.png);
  background-position: 0px 0px;
  animation: gaganim1 2s steps(7) forwards;
  left: 50%;
  margin-left: -1190px;
  top: 50%;
  margin-top: -540px;
  z-index: 999;
}
.gag-2 {
  position: fixed;
  width: 2380px;
  height: 1080px;
  overflow: hidden;
  background: url(../images/gags/bdb-gag_explocion.png);
  background-position: 0px 0px;
  animation: gaganim2 2s steps(9) forwards;
  left: 50%;
  margin-left: -1190px;
  top: 50%;
  margin-top: -540px;
  z-index: 999;
}
.gag-3 {
  position: fixed;
  width: 2380px;
  height: 1080px;
  overflow: hidden;
  background: url(../images/gags/bdb-gag_planos.png);
  background-position: 0px 0px;
  animation: gaganim3 2s steps(7) forwards;
  left: 50%;
  margin-left: -1190px;
  top: 50%;
  margin-top: -540px;
  z-index: 999;
}

@keyframes gaganim1 {
  from { background-position: 0px 0px; }
  to { background-position: 0px -7560px; }
}
@keyframes gaganim2 {
  to { background-position: 0px -9720px; }
}
@keyframes gaganim3 {
  to { background-position: 0px -7560px; }
}