@font-face {
  font-family: AdihausDIN;
  src: url(fonts/adihausdin/adihausdin.ttf);
}

@font-face {
  font-family: AdihausDINBold;
  src: url(fonts/adihausdin/adihausdin_bold.ttf);
}

@font-face {
  font-family: PRO-Bold;
  src: url(fonts/adineueprocond/adineue_pro_cond.otf);
}

@font-face {
  font-family: PRO-Black;
  src: url(fonts/adineueprocond/adineue_pro_cond_black.otf);
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: unset;
  -webkit-tap-highlight-color: transparent;
}

body{
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}


 video, img{
  width: 100%;
  pointer-events: none;
  -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

button{
  cursor: pointer;
  background: none;
  border: none;
}
p{
  margin: 0;
  line-height: 120%;
}

.logo_mort{
      width: 14%;
    margin: auto;
    max-width: 240px;
    min-width: 130px;
}

#bakground_video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  z-index: -1;
  background: rgb(3,32,92);
  background: radial-gradient(circle, rgba(3,32,92,1) 0%, rgba(0,0,0,1) 100%);
}

#banner_stadio{
  width: 100%;
  height: 90vh;
  position: relative;
  overflow: hidden;
}
#back_stadio{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#rick, #stadio, #guayo , #morty, #grass{
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 100%;
}
#rick{
  top: 0;
  width: 77vw;
  transform: translateX(-50%);
}
#stadio{
  top: 60%;
  width: 110%;
}
#grass{
  width: 100%;
  bottom: -1%;
  transform: translateX(-50%);
}

#anima{
  width: 100%;
  height: 100vh;
  background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 5%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%);
}
#guayo{
  top: 31%;
    width: 21.5%;
    transform: translateX(-50%);
}
#morty{
  width: 28%;
  bottom: 5%;
  transform: translateX(-50%);
}
#front-stadio{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%);
}

#logo_x,#logo_rick,#logo_fast{
  position: absolute;
}

#logo_x{
  top: 50%;
  transform: translateY(-50%);
  left: 6%;
  width: 7.2%;
}

#logo_rick{
  top: 80%;
  right: 6%;
  width: 16%;
}
#logo_fast{
  top: 80%;
  left: 6%;
  width: 21%;
}

.wrap{
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
#guayo_anima{
  position: absolute;
  width: 65vmin;
  height: 65vmin;
  max-width: 703px;
  max-height: 703px;
}
.center{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.circle{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: solid white 1px;
}

#guayo_sprite{
  width: 70%;
  height: 70%;
  position: absolute;
  display:inline-block; 
  overflow:hidden; 
  background-repeat: no-repeat;
  background-image:url(../img/sprite.png);
  background-size: cover;
  /*14.5%*/
}

.titulo{
  font-family: AdihausDINBold;
  /*calc(14px + (26 - 14) * ((100vw - 1024px) / (1920 - 1024)));*/
  font-size: calc(15px + (20 - 15) * ((100vw - 1024px) / (1920 - 1024)));
  font-weight: bold;
  text-align: right;
  color: #fff;
}
.subtitulo{
  font-family: AdihausDIN;
  text-transform: uppercase;
  font-size: calc(12px + (16 - 12) * ((100vw - 1024px) / (1920 - 1024)));
  text-align: right;
  color: #fff;
}
.texto{
  font-family: AdihausDIN;
  text-transform: lowercase;
  font-size: calc(12px + (16 - 12) * ((100vw - 1024px) / (1920 - 1024)));
  text-align: right;
  color: #fff;
}
.text{
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 46vw;
  max-width: 710px;
  align-items: stretch;
}
.paragraph{
    width: 100%;
    /*235px*/
    padding-right: 15px;
}
.lines{
  width: 70%;
  display: flex;
  align-items: baseline;
}

.line_h{
  border: 1px solid white;
    width: 100%;
    height: 1px;
}
.line_v{
    width: 1px;
    height: 50%;
    border: solid 1px white;
    margin-right: 15px;
}
/*Textos ubicacions*/
#text_1_Land{
  top: 50%;
  left: 50%;
  transform: translate(-95%,-225%);
}
#text_2_Land{
  top: 50%;
  left: 50%;
  transform: translate(-95%,-50%);
}
#text_3_Land{
  top: 50%;
  left: 50%;
  transform: translate(-95%,121%);
}
#text_4_Land{
  top: 50%;
  left: 50%;
  transform: translate(8%,-51%);
}
#text_5_Land{
  top: 50%;
  left: 50%;
  transform: translate(-95%,-140%);
}
#text_6_Land{
  top: 50%;
  left: 50%;
  transform: translate(-95%,67%);
}
#text_7_Land{
  top: 50%;
  left: 50%;
  transform: translate(%,-51%);
}

#comprar{
  position: absolute;
    right: 7%;
    bottom: 9%;
}
.green_text{
  font-family: PRO-Black;
  text-transform: uppercase;
  font-size: calc(29px + (48 - 29) * ((100vw - 1024px) / (1920 - 1024)));
  color: #bcfd00;
  line-height: calc(29px + (48 - 29) * ((100vw - 1024px) / (1920 - 1024)));
}

.btcomprar{
    width: 15.8vw;
    height: 7.3vh;
    max-width: 228px;
    max-height: 69px;
    padding: 2vh 0;
    background-color: black;
    font-family: AdihausDIN;
    font-size: calc(19px + (24 - 19) * ((100vw - 1024px) / (1920 - 1024)));
    color: white;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    margin-top: 3vh;
}
.btcomprar::before{
  content: "";
  position: absolute;
  border: 1px solid white;
  width: 100%;
    height: 100%;
    z-index: -1;
        top: 0;
    transform: translate(4%, 4%);
    left: 0;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 5px grey;*/ 
  /*border-radius: 10px;*/
  background: #000000;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #bcfd0035; 
  border-radius: 10px;*/
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #bcfd00; 
}
#velocidad{
  position: absolute;
  top: 15%;
  left: 80%;
  width: 8%;

}
#vel{
  width: 41%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-62%, -4%);
}


#green-border{
    width: 100%;
    text-align: center;
    font-family: PRO-Black;
    color: white;
    font-size: calc(14px + (24 - 14) * ((100vw - 1024px) / (1920 - 1024)));;
    padding: 14%;
    background-image: url("../img/green.svg");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.wrap2{
  position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
}
#guayos2{
  position: absolute;
  width: 85vmin;
  height: 85vmin;
  max-width: 800px;
  max-height: 800px;
}
#pre{
  position: absolute;
    transform: translate(17%, 11%);
    width: 90%;
}
#copa{
  position: absolute;
  transform: translate(-20%, -9%);
}
#pretext{
  top: 12%;
    left: 48%;
  position: absolute;
  font-size: calc(50px + (64 - 50) * ((100vw - 1024px) / (1920 - 1024)));
  font-weight: bold;
  color: #ed4541;
  text-transform: uppercase;
  font-family: PRO-Black;
}
#copatext{
  top: 75%;
    left: 28%;;
  position: absolute;
  font-size: calc(50px + (64 - 50) * ((100vw - 1024px) / (1920 - 1024)));
  font-weight: bold;
  color: #bee92f;
  text-transform: uppercase;
  font-family: PRO-Black;
}

#text_1_copa{
  top: 50%;
    left: 50%;
    transform: translate(-109%, -115%);
    width: 434px;
}
#text_1_copa .lines{
      width: 16vw;
}

#text_2_copa{
  top: 50%;
    left: 50%;
    transform: translate(-119%, 32%);
    width: 341px;
}
#text_2_copa .lines{
      width: 40vw;
}
#text_1_pre{
  top: 50%;
  left: 50%;
  transform: translate(18%, -175%);
  width: 342px;
}
#text_2_pre{
  top: 50%;
  left: 50%;
  transform: translate(4%, -31%);
  width: 388px;
}

.flex_div{
  width: 100vw;
  margin: auto;
  height: 85vh;
  max-width: 1920px;
  position: relative;
  max-height: 598px;
}
.img_comtainer{
  position: absolute;
    width: 55vw;
    z-index: 1;
    top: 50%;
    left: 50%;
    max-width: 1056px;
    transform: translate(-82%, -50%);
}
#guayo_low{
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  transform: translate(49%, 45%);
}
#glitch{
    width: 43vw;
    height: 50vh;
    -webkit-backdrop-filter: blur(31px);
    backdrop-filter: blur(31px);
    box-shadow: 29px 34px 91px 4px rgb(0 187 199 / 25%);
    border: solid 5px #fff;
    background-color: rgba(12, 36, 71, 0.6);
    max-width: 771px;
    max-height: 598px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(9%,13%);
}

#texto{
    width: 56%;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(12px + (18 - 12) * ((100vw - 1024px) / (1920 - 1024)));
    font-family: AdihausDIN;
}

#glitch .btcomprar{
  background: white;
  color: black;
  margin-top: 20px;

}
#bt_comprar{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,-50%);
}
@media (orientation: landscape) {
  .land{
    display: block;
  }
  .port{
    display: none;
  }
}

@media (orientation: portrait) {
  p{
    line-height: 50%;
  }
  .titulo{
    line-height: 120%;
  }
  .land{
    display: none;
  }
  .port{
    display: block;
  }
  #rick_m{
    top: 0;
    width: 116%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }
  #stadio{
    top: 55%;
  }
  #grass_m{
    top: 55vh;
    position: absolute;
  }
  #morty{
    width: 79%;
    top: 45%;
  }
  #guayo{
    width: 63%;
    top: 29%;
  }
  #logo_x{
    width: 5%;
    left: 50%;
    top: 95%;
    transform: translate(-50%,-50%);
  }

  #logo_rick{
    width: 24%;
    top: 91%;
    right: 32%;
  }
  #logo_fast{
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
  }

  #front-stadio{
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 80%);
  }

  .btcomprar {
    min-width: 114px;
    min-height: 13px;
    width: 21.8vw;
    height: 5vh;
    font-size: calc(12px + (20 - 13) * ((100vw - 300px) / (1024 - 300)));
    padding: 2vmin 0;
  }

  #text_1_Land {
    transform: translate(-95%,-107%);
    align-items: flex-end;
    flex-direction: column;
    max-width: 100px;
  }

  #text_1_Land .paragraph, #text_2_Land .paragraph, #text_4_Land .paragraph, #text_5_Land .paragraph, #text_7_Land .paragraph{
    padding-right: 0;
    padding-bottom: 15px;
    width: 100%;
  }

   #text_1_Land .paragraph p{
        text-align: left !important;
   }

  #text_1_Land .lines, #text_4_Land .lines,#text_5_Land .lines, #text_7_Land .lines{
    height: 28vmin;
    align-items: baseline;
    flex-direction: column-reverse;
  }
  #text_2_Land .lines{
    height: 50vmin;
    align-items: center;
    flex-direction: column-reverse;
  }

  #text_1_Land .line_h, #text_2_Land .line_h, #text_4_Land .line_h, #text_5_Land .line_h, #text_7_Land .line_h {
    width: 51%;
    height: 1px;
     align-self: baseline;
  }
  #text_1_Land .line_v, #text_2_Land .line_v,  #text_4_Land .line_v, #text_5_Land .line_v, #text_7_Land .line_v {
      height: 100%;
      margin-right: 0;
      visibility: visible !important;
  }
  #text_2_Land {
    transform: translate(29%,-95%);
    align-items: flex-end;
    flex-direction: column;
    max-width: 100px;
  }

  #text_3_Land{
    transform: translate(-95%,12%);
  } 
   #text_3_Land .paragraph{
        width: 151%;
     align-self: self-end;
     transform: translateY(50%);
   }
  #text_3_Land .line_v{
        height: 40vmin;
  }
  #text_4_Land{
        transform: translate(-126%,-97%);;
        align-items: flex-end;
        flex-direction: column-reverse;
        max-width: 100px;
  }
  #text_4_Land .lines{
    height: 50vmin;
  }
  #text_4_Land .line_v{
    visibility: hidden !important;
  }
  #text_5_Land {
    transform: translate(16%,-103%);
    align-items: flex-end;
        flex-direction: column;
        max-width: 100px;
  }
  #text_5_Land .lines{
    align-items: center;
    height: 18vmin;
  }
  #text_6_Land{
    transform: translate(-92%,17%);
    width: 166px;
;
  }
  #text_6_Land .lines{
        width: 35%;
    height: 33vh;
  }
   #text_6_Land .paragraph{
        width: 180%;
    align-self: center;
  }
  #text_7_Land{
    transform: translate(-109%, -100%);
    align-items: flex-end;
        flex-direction: column-reverse;
        max-width: 100px;
  }

  #velocidad {
    top: 4%;
    left: 71%;
    width: 26%;
  }
  #green-border{
      font-size: calc(18px + (24 - 18) * ((100vw - 1024px) / (1920 - 1024)));;
  }

  #comprar {
    bottom: 2%;
    right: 50%;
    transform: translateX(50%);
    text-align: center;
  }
  .green_text{
    font-size: calc(33px + (48 - 33) * ((100vw - 1024px) / (1920 - 1024)));;
    line-height: calc(33px + (48 - 33) * ((100vw - 1024px) / (1920 - 1024)));;
  }
  .btcomprar {
    margin: auto;
    margin-top: 6px;
  }
  #guayos2{
    width: 98vmin;
    height: 98vmin;
  }
  #copatext, #pretext{
      font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1000 - 300)));
  }

  #text_1_copa{
    transform: translate(-95%,-107%);
    align-items: flex-end;
    flex-direction: column;
    max-width: 100px
  }

  #text_1_copa .paragraph, #text_1_pre .paragraph{
    padding-right: 0;
    padding-bottom: 15px;
    width: 100%;
  }
  #text_1_copa .lines, #text_1_pre .lines{
    height: 28vmin;
    align-items: baseline;
    flex-direction: column-reverse;
  }
  #text_1_copa .line_v, #text_1_pre .line_v, #text_2_copa .line_v, #text_2_pre .line_v{
    height: 100%;
    margin-right: 0;
    visibility: visible !important;
  }

  #text_1_pre{
    transform: translate(-94%,-120%);
    align-items: flex-end;
    flex-direction: column-reverse;
    width: 82px;
  }

  #text_2_copa {
    transform: translate(3%,40%);
    width: 166px;
    flex-direction: row-reverse;
  }

  #text_2_copa .paragraph {
    width: 180%;
    align-self: end;
    transform: translate(-12%, 50%);
  }
  #text_2_pre .paragraph {
    width: 180%;
    align-self: end;
    transform: translate(10%, 50%);
  }
  #text_2_copa .paragraph p, #text_2_pre .paragraph p, {
    text-align: left;
  }
  #text_2_copa .lines {
    width: 35%;
    height: 21vh;
    flex-direction: column-reverse;
  }

  #text_2_pre {
    transform: translate(-28%,40%);
    width: 166px;
  }
  #text_2_pre .lines{
    flex-direction: column-reverse;
  }
  .flex_div{
    height: 100vh;
    overflow: hidden;
    max-height: unset;
  }

  .img_comtainer {
    width: 119vw;
    top: -10%;
    left: 50%;
    transform: translate(-50%, 0);
    overflow: hidden;
  }
  #guayo_low {
    width: 71%;
    transform: translate(40%, 66%);
  }
  #glitch{
    width: 85vw;
    height: 40vh;
    transform: translate(-50%, 0);
    top: 44vh;
    max-height: 270px;
  }

}