@font-face {
  font-family: 'eurostile';
  src: url('https://www.mundovideo.com.co/assets/gifs2020/fonts/EurostileRegular.eot');
  src: url('https://www.mundovideo.com.co/assets/gifs2020/fonts/EurostileRegular.eot?#iefix') format('embedded-opentype'),
    url('https://www.mundovideo.com.co/assets/gifs2020/fonts/EurostileRegular.woff2') format('woff2'),
    url('https://www.mundovideo.com.co/assets/gifs2020/fonts/EurostileRegular.woff') format('woff'),
    url('https://www.mundovideo.com.co/assets/gifs2020/fonts/EurostileRegular.ttf') format('truetype'),
    url('https://www.mundovideo.com.co/assets/gifs2020/fonts/EurostileRegular.svg#EurostileRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'eurostile-bold';
  src: url('https://www.mundovideo.com.co/assets/gifs2020/fonts/Eurostile-Black.eot');
  src: url('https://www.mundovideo.com.co/assets/gifs2020/fonts/Eurostile-Black.eot?#iefix') format('embedded-opentype'),
    url('https://www.mundovideo.com.co/assets/gifs2020/fonts/Eurostile-Black.woff2') format('woff2'),
    url('https://www.mundovideo.com.co/assets/gifs2020/fonts/Eurostile-Black.woff') format('woff'),
    url('https://www.mundovideo.com.co/assets/gifs2020/fonts/Eurostile-Black.ttf') format('truetype'),
    url('https://www.mundovideo.com.co/assets/gifs2020/fonts/Eurostile-Black.svg#EurostileRegular') format('svg');
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: 'eurostile';
  background: #707070;
}

a {
  color: #000000;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: #000000;
}

.texto-principal {
  text-align: left;
}

.contenedor {
  width: 100%;
  display: block;
  top: 0;
  position: absolute;
  cursor: pointer;
}

.back_main {
  z-index: -4;
  width: 100%;
  background: #812019 url(../img/background-min.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  top: 0;
  position: absolute;
}

.border-back {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: rgba(0, 0, 0, .3);
  border: solid 1px #f2d818;
  z-index: -3;
}

.inner-border-back {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: none;
  border: solid 1px #ffffff;

}

.first-back {
  background: #131313;
  z-index: -3;
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  opacity: 1;
}

.img-mpk1 {
  background-image: url(../img/pkroom.png);
  width: 322px;
  height: 750px;
  background-position: center top;
  background-size: contain;
  display: block;
  margin: auto;
}

.static-r {
  z-index: -1;
  background-image: url(../img/pkr-static.png);
  width: 50%;
  background-position: right bottom;
  background-size: contain;
  display: block;
  background-repeat: no-repeat;
  top: 0;
  right: 5px;
  position: absolute;
}

.static-l {
  display: block;
  z-index: -1;
  width: 50%;
  display: block;
  top: 0;
  left: 5px;
  position: absolute;
}

.carta {
  width: 50%;
  height: auto;
  margin: auto;
  position: absolute;
}

.call_action {
  color: #000000;
  background-color: #ffd107;
  font-size: 0.8em;
}

.mvcall_action {
  color: #000000;
  background-color: #ffffff;
  font-size: 0.8em;
}

.pull-left {
  text-align: center;
}

.pull-left img {
  max-height: 146px;
}

@media (max-width: 420px) {
  .pull-left {
    text-align: left;
  }

  .static-l {
    display: none;
  }
}

@media (max-width: 320px) {
  .pull-left img {
    max-width: 146px;
  }

}

.mpk-anim {
  z-index: -2;
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  /*clip-path: inset(0 0 0 0)*/
  ;
  opacity: 1;
  animation: animationImg ease-out 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: animationImg ease-out 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
  /*Chrome 16+, Safari 4+*/
  -moz-animation: animationImg ease-out 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards;
  /*FF 5+*/
  -o-animation: animationImg ease-out 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards;
  /*Not implemented yet*/
  -ms-animation: animationImg ease-out 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode: forwards;
  /*IE 10+*/
}



@keyframes animationImg {
  0% {
    transform: translate(0px, -110%);
  }

  100% {
    transform: translate(0px, 100%);
  }
}

@-moz-keyframes animationImg {
  0% {
    -moz-transform: translate(0px, -100%);
  }

  100% {
    -moz-transform: translate(0px, 100%);
  }
}

@-webkit-keyframes animationImg {
  0% {
    -webkit-transform: translate(0px, -110%);
  }

  100% {
    -webkit-transform: translate(0px, 100%);
  }
}

@-o-keyframes animationImg {
  0% {
    -o-transform: translate(0px, -100%);
  }

  100% {
    -o-transform: translate(0px, 100%);
  }
}

@-ms-keyframes animationImg {
  0% {
    -ms-transform: translate(0px, -100%);
  }

  100% {
    -ms-transform: translate(0px, 100%);
  }
}


.fade-in-start {
  -webkit-animation: fade-in .8s ease-in-out both;
  animation: fade-in .8s ease-in-out both
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

/* animacion texto */
.fade-in {
  -webkit-animation: fade-in 1s ease-in-out 2.5s both;
  animation: fade-in 1s ease-in-out 2.5s both
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

/* animacion texto */
.fade-in-logo {
  -webkit-animation: fade-in-logo .3s ease-in-out 4.3s both;
  animation: fade-in-logo .3s ease-in-out 4.3s both
}

@-webkit-keyframes fade-in-logo {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fade-in-logo {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}


/* **************************** */
/* animaciones de textos juegos */
/* **************************** */

.fade-g1 {
  -webkit-animation: fade-g1 2s ease-in-out 1.6s both;
  animation: fade-g1 2s ease-in-out 1.6s both
}

@-webkit-keyframes fade-g1 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g1 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */

.fade-g2 {
  -webkit-animation: fade-g2 2s ease-in-out 1.76s both;
  animation: fade-g2 2s ease-in-out 1.7s both
}

@-webkit-keyframes fade-g2 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g2 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */

.fade-g3 {
  -webkit-animation: fade-g3 2s ease-in-out 1.8s both;
  animation: fade-g3 2s ease-in-out 1.8s both
}

@-webkit-keyframes fade-g3 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g3 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */

.fade-g4 {
  -webkit-animation: fade-g4 2s ease-in-out 1.9s both;
  animation: fade-g4 2s ease-in-out 1.9s both
}

@-webkit-keyframes fade-g4 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g4 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */

.fade-g5 {
  -webkit-animation: fade-g5 2s ease-in-out 2s both;
  animation: fade-g5 2s ease-in-out 2s both
}

@-webkit-keyframes fade-g5 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g5 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */

.fade-g6 {
  -webkit-animation: fade-g6 2s ease-in-out 2.1s both;
  animation: fade-g6 2s ease-in-out 2.1s both
}

@-webkit-keyframes fade-g6 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g6 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */

.fade-g7 {
  -webkit-animation: fade-g7 2s ease-in-out 2.2s both;
  animation: fade-g7 2s ease-in-out 2.2s both
}

@-webkit-keyframes fade-g7 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g7 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */

.fade-g8 {
  -webkit-animation: fade-g8 2s ease-in-out 2.3s both;
  animation: fade-g8 2s ease-in-out 2.3s both
}

@-webkit-keyframes fade-g8 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g8 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */

.fade-g9 {
  -webkit-animation: fade-g9 2s ease-in-out 2.4s both;
  animation: fade-g9 2s ease-in-out 2.4s both
}

@-webkit-keyframes fade-g9 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-g9 {
  0% {
    opacity: 0
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* **************************** */
/* animaciones de textos juegos */
/* **************************** */

/* animacion texto */
.fade-in-2 {
  -webkit-animation: fade-in 1s ease-in-out 4.5s both;
  animation: fade-in 1s ease-in-out 4.5s both
}

@-webkit-keyframes fade-in-2 {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fade-in-2 {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}


.fade-out {
  -webkit-animation: fade-out 1s ease-out 4.2s both;
  animation: fade-out 1s ease-out 4.2s both
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fade-out {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

.slide-in-fwd-center {
  -webkit-animation: slide-in-fwd-center .4s cubic-bezier(.25, .46, .45, .94) both;
  animation: slide-in-fwd-center .4s cubic-bezier(.25, .46, .45, .94) both
}

@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
    transform: translateZ(-1400px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
    transform: translateZ(-1400px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.bounce-in-top {
  -webkit-animation: bounce-in-top 1.1s 3.5s both;
  animation: bounce-in-top 1.1s 3.5s both
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1
  }

  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1
  }

  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }
}

.puff-in-center {
  -webkit-animation: puff-in-center .5s cubic-bezier(.47, 0.000, .745, .715) 4.8s both;
  animation: puff-in-center .5s cubic-bezier(.47, 0.000, .745, .715) 4.8s both
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(2px);
    filter: blur(2px);
    opacity: 0
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1
  }
}

@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(2px);
    filter: blur(2px);
    opacity: 0
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1
  }
}

.fade-in-bottom {
  -webkit-animation: fade-in-bottom .6s cubic-bezier(.39, .575, .565, 1.000) 4.5s both;
  animation: fade-in-bottom .6s cubic-bezier(.39, .575, .565, 1.000) 4.5s both
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

.fade-in-top {
  -webkit-animation: fade-in-top .6s cubic-bezier(.39, .575, .565, 1.000) 4s both;
  animation: fade-in-top .6s cubic-bezier(.39, .575, .565, 1.000) 4s both
}

@-webkit-keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

@media only screen and (min-width: 420px) {
  .texto-principal {
    text-align: center;
  }
}

/* cards animations */

.slide-in-top {
  -webkit-animation: slide-in-top .1s cubic-bezier(.25, .46, .45, .94) 4s both;
  animation: slide-in-top .1s cubic-bezier(.25, .46, .45, .94) 4s both
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0
  }

  80% {
    -webkit-transform: translateY(300);
    transform: translateY(300);
    opacity: 1
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0
  }

  80% {
    -webkit-transform: translateY(300);
    transform: translateY(300);
    opacity: 1
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

.slide-in-top-2 {
  -webkit-animation: slide-in-top-2 .1s cubic-bezier(.25, .46, .45, .94) 4.2s both;
  animation: slide-in-top-2 .1s cubic-bezier(.25, .46, .45, .94) 4.2s both
}

@-webkit-keyframes slide-in-top-2 {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0
  }

  80% {
    -webkit-transform: translateY(300);
    transform: translateY(300);
    opacity: 1
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slide-in-top-2 {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0
  }

  80% {
    -webkit-transform: translateY(300);
    transform: translateY(300);
    opacity: 1
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

.slide-in-top-3 {
  -webkit-animation: slide-in-top-3 .1s cubic-bezier(.25, .46, .45, .94) 4.3s both;
  animation: slide-in-top-3 .1s cubic-bezier(.25, .46, .45, .94) 4.3s both
}

@-webkit-keyframes slide-in-top-3 {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0
  }

  80% {
    -webkit-transform: translateY(300);
    transform: translateY(300);
    opacity: 1
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slide-in-top-3 {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0
  }

  80% {
    -webkit-transform: translateY(300);
    transform: translateY(300);
    opacity: 1
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

.slide-in-top-4 {
  -webkit-animation: slide-in-top-4 .1s cubic-bezier(.25, .46, .45, .94) 4.4s both;
  animation: slide-in-top-4 .1s cubic-bezier(.25, .46, .45, .94) 4.4s both
}

@-webkit-keyframes slide-in-top-4 {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0
  }

  80% {
    -webkit-transform: translateY(300);
    transform: translateY(300);
    opacity: 1
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slide-in-top-4 {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0
  }

  80% {
    -webkit-transform: translateY(300);
    transform: translateY(300);
    opacity: 1
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
}