/*@import 'https://okemono.com/css/dev.css';*/

/*///////  Animations ///////*/
/* Garden */
@keyframes flot-1 {
  from {transform: translateY(0px);}
  to {transform: translateY(10px);}
}

@keyframes flot-2 {
  0% { transform: rotate(140deg); }
  50% { transform: rotate(143deg); }
  100% { transform: rotate(140deg); }
}

@keyframes flot-3 {
  0% { transform: rotate(-40deg); }
  50% { transform: rotate(-10deg); }
  100% { transform: rotate(-40deg); }
}

@keyframes flot-4 {
  0% { transform: skew(0deg); }
  50% { transform: skew(-5deg); }
  100% { transform: skew(0deg); }
}

@keyframes flot-5 {
  0% { transform: rotate(-22deg); }
  50% { transform: rotate(-20deg); }
  100% { transform: rotate(-22deg); }
}

/* Home */
@keyframes waves {
  0% {
    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg); }
  100% {
    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg); } 
}
@keyframes barco {
  0% {transform: rotateZ(5deg) translate(-5%, 0px);}
  25% {transform: rotateZ(-5deg) translate(-10%, 0px);}
  50% {transform: rotateZ(5deg) translate(-20%, 0px);}
  75% {transform: rotateZ(-5deg) translate(-10%, 0px);}
  100% {transform: rotateZ(5deg) translate(-5%, 0px);}
}
@keyframes swing {
  0% {
    transform: rotateZ(10deg); }
  100% {
    transform: rotateZ(-10deg); } 
  }
@keyframes swing-suau {
  0% {
    transform: translate(0px, 0px);
    }
  100% {
    transform: translate(0px, 20px);
    } 
}
@keyframes swim {
  0% {
    transform: translate(0px, 0px); }
  100% {
    transform: translate(0px, 20px); } 
}
@keyframes webstrategy {
  0% {
    transform: rotateZ(180deg); }
  40% {
    transform: rotateZ(180deg); }
  60% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotateZ(0deg); } 
}
@keyframes swing-1 {
  0% {
    transform: rotateZ(1deg); }
  100% {
    transform: rotateZ(-12deg); } 
}
@keyframes swing-2 {
  0% {
    transform: rotateZ(0deg) translate3d(0,0.3%,0) rotateZ(-5deg); }
  100% {
    transform: rotateZ(360deg) translate3d(0,0.3%,0) rotateZ(-360deg); } 
}
@keyframes pulses {
  0% {
    transform: scale(0.9); }
  100% {
    transform: scale(1.2); } 
  }
@keyframes pulsebot {
  0% {
	  transform:  scale(0.5);  opacity: 1;}
  10% {
	  transform:  scale(1); }
  14% {
	  transform:  scale(0.5); }
  16% {
	  transform:  scale(1); opacity: 1; }
  20% {
	  transform:  scale(0.5); opacity: 0; }
  100% {
	  opacity: 0; }
}

@keyframes pointland {
  0% {
	  transform: translate(0%, 0%) scale(0.95); }
  10% {
	  transform: translate(50%, 50%) scale(1); }
  14% {
	  transform:  scale(0.95); }
  16% {
	  transform:  scale(1); }
  20% {
	  transform:  scale(0.95);  }
  60% {
	  transform: translate(50%, 50%) scale(1); } 
  100% {
    transform: translate(0%, 0%); }
}

@keyframes mosca {
  0% {
	  transform: rotateZ(0deg) translate3d(0,50%,0) rotateZ(330deg); }
  20% {
	  transform: rotateZ(40deg) translate3d(-100%,-40%,0) rotateZ(-80deg); } 
  100% {
	  transform: rotateZ(360deg) translate3d(0,50%,0) rotateZ(-360deg); } 
}

/* Neon */
@keyframes glow {
  from {
     text-shadow: 0 0 5px rgb(20 88 241 / 80%);
  }
  to {
      text-shadow: 0 0 15px rgb(20 88 241 / 100%);
  }
}
@keyframes tras-glow {
  from {
     opacity:0.2;
  }
  to {
      opacity:0.4;
  }
}


@keyframes neonbox {
  from {
    box-shadow:
    0 0 3px rgba(20,88,241,0.72),
    0 0 15px rgba(20,88,241,0.14),
    0 0 6px rgba(20,88,241,0.32),
    0 0 10px rgba(20,88,241,0.72),
    0 0 17px rgba(20,88,241,0.58),
    0 0 27px rgba(20,88,241,0.72);
  }
  to {
    box-shadow:
    0 0 3px rgba(20,88,241,0.58),
    0 0 15px rgba(20,88,241,0.22),
    0 0 6px rgba(20,88,241,0.38),
    0 0 10px rgba(20,88,241,0.64),
    0 0 17px rgba(20,88,241,0.68),
    0 0 30px rgba(20,88,241,0.80);
  }
}

@keyframes neon {
  from {
    text-shadow:
    0 0 6px rgba(255,255,255,0.92),
    0 0 30px rgba(255,255,255,0.34),
    0 0 12px rgba(239,239,239,0.52),
    0 0 21px rgba(239,239,239,0.92),
    0 0 34px rgba(239,239,239,0.78),
    0 0 54px rgba(239,239,239,0.92);
  }
  to {
    text-shadow:
    0 0 6px rgba(255,255,255,0.98),
    0 0 30px rgba(255,255,255,0.42),
    0 0 12px rgba(239,239,239,0.58),
    0 0 22px rgba(239,239,239,0.84),
    0 0 38px rgba(239,239,239,0.88),
    0 0 60px rgba(239,239,239,1);
  }
}

/* Skate */
@keyframes skate {
  from { background-position:  0%; }
  to { background-position: -5091px; }
}


/* Master y prolink*/
@keyframes master {
  0% {transform:skew(-5deg, 0deg);}
  20% {transform:skew(6deg, 1deg);}
  40% {transform:skew(-5deg, 0deg);}
  60% {transform:skew(8deg, -1deg);}
  80% {transform:skew(-5deg, 0deg);}
  80% {transform:skew(10deg, 1deg);}
}
@keyframes prolink {
  0% {
    transform: skew(3deg, 3deg) rotateY(10deg); }
  40% {
    transform: skew(-1deg, 1deg); }
  80% {
    transform: skew(1deg, -1deg); }
  100% {
    transform: skew(-3deg, -3deg) rotateY(-10deg); } 
  }

/* Efectos Home  */
/* Todas las animaciones del Home  */
.could-1 {
  animation: swing 7s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}
.could-2 {
  animation: swing 6.5s 0.3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}
.could-3 {
  animation: swing 5s  0.2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}
.could-4 {
  animation: swing 5.5s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}
.could-5 {
  animation: swing 4s 0.3s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}
.globo {
	animation: swing-suau 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}
.oke-land {
  animation: swing-suau 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}
.wave-1, .after-waves {
    animation: waves 6s 0.1s infinite linear;
}
.wave-2 {
    animation: waves 5.5s 0.1s infinite linear;
}
.wave-3 {
    animation: waves 6s 0.1s infinite linear;
}
.wave-4 {
    animation: waves 6.5s 0.1s infinite linear;
}
.wave-5 {
    animation: waves 7s 0.1s infinite linear;
}
.barquito {
	animation: waves 6s infinite linear;
 }
.cont-barco {
	animation: barco 9s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.swim-1 {
	animation: swim 4s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.swim-2 {
	animation: swim 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.web-strategy {
	animation: webstrategy 6s infinite alternate cubic-bezier(.98,-0.08,.4,1.07);
}
.dance-1 {
animation: prolink 1s infinite alternate cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
.bot-pulse {
	animation: pulsebot 6s infinite cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
.pointer.point-land {
  animation: pointland 4s infinite;
 }
 .bot-land {
   animation: pulsebot 4s infinite cubic-bezier(0.64, 0.57, 0.67, 1.53);
 }
/*Personajes*/
.hand-j-1, .hand-l-2, .hand-l-1 {
	animation: swing-1 1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.hand-j-2 {
	animation: swing-2 0.8s infinite alternate linear;
}
.cuore {
	animation: pulses 0.5s infinite alternate cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
.mosca {
	animation: mosca 2s infinite alternate cubic-bezier(0.64, 0.57, 0.67, 1.53);
}

/* Garden */
.gar-12{
  animation: flot-1 3s infinite .5s linear alternate; 
}
.gar-13{
  animation: flot-1 2s infinite .5s linear alternate; 
}
.gar-24{
  animation: flot-1 1.6s infinite linear alternate;
}
.gar-10{
  animation: flot-2 4s infinite ease;
}
.gar-25{
  animation: flot-3 6s infinite linear;
}
.gar-19{
  animation: flot-4 4s infinite linear; 
}
.gar-15{
  animation: flot-5 5s infinite ease;
}

/* Efectos */
.ipad-out {
  animation: neonbox 0.3s ease-in-out infinite alternate;
} 
.flo2 {
  animation: flot-1 2s linear infinite alternate;
}
.flo1 {
  animation: flot-1 1.5s linear infinite alternate;
}
.astro-phone {
  animation: waves 10s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.div-buttom {
  animation: master 8s linear infinite alternate;
}
.accord-header.acord-2, .max-mas.neon1 {
  animation: neon .08s ease-in-out infinite alternate;
}
.txt-neon {
  animation: neon 1s ease-in-out infinite alternate;
}
.titlee.glow::before {
  animation: glow 3s infinite alternate;
}
.retro-back {
  animation: tras-glow 3s infinite alternate;
}
.glow {animation: glow 3s infinite alternate;}
/* Text rotate  */

.in-line {display: inline-block;vertical-align: top; margin: 0;}
.word {position: absolute;width: auto; opacity: 0;}
.letter {
  display: inline-block;
  position: relative;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}
.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.letter.behind {
  transform: rotateX(-90deg);
}
.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wisteria {
  color: #8e44ad;
}
.belize {
  color: #2980b9;
}
.pomegranate {
  color: #c0392b;
}
.green {
  color: #16a085;
}
.midnight {
  color: #2c3e50;
}


/*// GENERAL //*/
html::-webkit-scrollbar {
  width: 0.5vh;
  height: 0px;
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#ffcc01,#e40155);
  border-radius: 3px;
  box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
html::-webkit-scrollbar-track {
  background: linear-gradient(90deg,#201c29,#201c29 1px,#100e17 0,#100e17);
}

.wave-2::after, .wave-4::after {
	background: rgb(111,181,229);
	background: linear-gradient(0deg, rgba(111,181,229,0) 0%, rgba(111,181,229,1) 50%);
  position: absolute;
  display: block;
  content: "";
  height: 50px;
  width: 100%;
  top: 98%;
  left: 0;
}
.wave-3::after, .wave-5::after {
	background: rgb(45,130,184);
	background: linear-gradient(0deg, rgba(45,130,184,0) 0%, rgba(45,130,184,1) 50%);
  position: absolute;
  display: block;
  content: "";
  height: 100px;
  width: 100%;
  top: 98%;
  left: 0;
}
.wave-1::after {
	background: rgb(72,159,215);
	background: linear-gradient(0deg, rgba(72,159,215,0) 0%, rgba(72,159,215,0.6) 50%, rgba(72,159,215,1) 80%);
  position: absolute;
  display: block;
  content: "";
  height: 100px;
  width: 100%;
  top: 90%;
  left: 0;
}
.back-blur {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  }
model-viewer#rocket {
  --poster-color: transparent;
  --progress-bar-color: transparent ;
  --progress-bar-height: 0px;
  width: 500px;
  height: 500px;
}
/* Portfolio */
  .link-portfolio {
    animation: neonbox 0.3s ease-in-out infinite alternate;
  } 
  .link-portfolio > img {
  width: 100%;
  } 
  #video-porta {
  width:100%;
  height:100% !important;
  }

/* According Arrow */
.drop-qst > .drop-qst-btn:before {
  width:15px;
  height:15px;
  position: static;
  top: auto;
  left: 10px;
  margin-right: 14px;
  bottom: auto;
  transition: .5s all;
  transform: rotate(-180deg) scale(1);
  opacity: 80;
}
.drop-qst > .drop-qst-btn.yellow-qst:before {
  content: url(../archivos/img/star-yellow.svg);
}
.drop-qst > .drop-qst-btn.pink-qst:before {
  content: url(../archivos/img/star-pink.svg);
}
.drop-qst > .drop-qst-btn.blue-qst:before {
  content: url(../archivos/img/star-blue.svg);
}
.drop-qst.active > .drop-qst-btn.yellow-qst:before, .drop-qst.active > .drop-qst-btn.pink-qst:before, .drop-qst.active > .drop-qst-btn.blue-qst:before, .drop-qst:hover > .drop-qst-btn:before {
  content: url(../archivos/img/star.svg);
}
.drop-qst.active > .drop-qst-btn:before {
  transform: rotate(0deg) scale(1.5);
}
.drop-qst.active > .yellow-qst {
	background-image: linear-gradient(to right, rgba(255, 204, 1, 0.66), rgba(255, 204, 1, 0.2));
}
.drop-qst.active > .pink-qst {
	background-image: linear-gradient(to right, rgba(228, 1, 85, 0.7), rgba(228, 1, 85, 0.2));
}
.drop-qst.active > .blue-qst {
	background-image: linear-gradient(to right, rgba(20, 88, 241, 0.7), rgba(20, 88, 241, 0.2));
}
.drop > .tog-drop:after {
  content: url(../archivos/img/arrow.svg);
  width: 12px;
  position: absolute;
  top: 4px;
  right: 10px;
  margin-right: 10px;
  bottom: auto;
  transition: .3s all;
  transform: rotate(0deg);
  opacity: 80;
  transform-origin: 50% 60%;
}
.drop.active > .tog-drop:after {
  transform: rotate(-180deg);
}
.titlee:before {
    content: attr(title);
    position: absolute;
    -webkit-text-stroke: 5px black;
    z-index: -1;
}
.titlee-spam {
  -webkit-text-stroke: rgb(255 255 255 / 0.80) 2px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: rgb(255,204,1);
  background-image: linear-gradient(184deg, rgba(255,204,1,1) 30%, rgba(228,1,85,1) 100%);

}
.titlee-spam:before {
  content: attr(title);
  position: absolute;
  text-shadow: -10px 10px 0px #120C2E;
  color: transparent;
  -webkit-text-stroke: 6px #120C2E;
  z-index: -1;
}

.sub-titlee::before {
content: "</";
margin-right:5px;
}
.sub-titlee::after {
content: ">";
margin-left:5px;
}
.sub-titlee::before, .sub-titlee::after {
color:#ffcc01;
font-size: 120%
}

.esquina-top {clip-path: polygon(0 0, 100% 0, 100% 100%);}
/*end General*/

/* Cookies */
.cli-bar-btn_container {
  justify-content: center;
}
/*.cli-plugin-main-link {
  font-weight: 400;
  text-decoration: none;
  color: rgba(255,255,255,0.92) !important;
}
.cli_settings_button {
  font-weight: 500;
  color: rgba(255,255,255,0.96) !important;
}*/
#cookie-law-info-bar{
  /*width: 440px;
  left: 50%;
  margin-left: -220px;
  z-index: 9995 !important;*/
  top: inherit !important;
  bottom: 3% !important;
  margin-top: 0px !important;
  background-color: rgb(0 0 0 / 0.8) !important;
  color: rgba(255,255,255,0.90) !important;
  padding: 0 !important;
}

/*All Medias*/
/*No landscape*/
@media(max-width: 1025px) and (orientation: landscape){
  .no-rot {display: flex;}
  }

/*/ Media Grande min 600px /*/
@media only screen and (min-width: 600px) {
  
  .astro_surf {
    height: 500px;
    width: 500px;
  }
  .skate{
    background-position: -4770px;
    transition: margin 0.5s ease;
    height: 190px;
    width: 318px;
    margin-top: -100px;
    margin-right: 80px;
  }
  .astro-cont:hover > .skate {
    animation: skate 2s steps(16) infinite;
    margin-top: -50px;
    transition: margin 0.5s ease;
  }
}


/*/ Media Peque max 600px /*/
@media only screen and (max-width: 600px) {
  #cookie-law-info-bar{
    width: 100%;
    left: 0px;
    margin-left: 0px;
  }
  model-viewer#rocket {
    width: 300px;
    height: 300px;
  }
  html::-webkit-scrollbar {
    width: 0.5vh;
    height: 0px;
	}
  .astro_surf {
    height: 340px;
    width: 340px;
  }
  .skate{
    background-position: -3590px;
    animation: skate-min 2s steps(16) infinite;
    height: 143px;
    width: 240px;
    margin-top: -40px;
    margin-right: 40px;
  }
}
/*end media*/


/*Imagenes*/
/* Sobretodo del diseño Inicial*/

/*Compress*/
@media only screen and (min-width: 600px) {
  .no-webp .meta_cont{
    background: url(../images/meta.png) no-repeat;
  }
  .no-webp .astro_surf{
    background: url(../images/astro-surf.png) no-repeat;
  }
  .no-webp .skate{
    background: url(../images/skate.png) no-repeat;
  }
  .no-webp .meta_cont {
    background: url(../images/meta.png) no-repeat;
  }
  .no-webp .pen-bloc {
    background-image: url(../images/pen.png);
  }
  .no-webp .ipad {
    background-image: url(../images/ipad-1.png);
  }
  .no-webp .phone-astro {
    background-image: url(../images/phone-astro-1.png);
  }
  .no-webp .astro-phone {
    background-image: url(../images/astro-phone.png);
  }
  .no-webp .gar-13 {
    background-image: url(../images/gar-13.png);
  }
  .no-webp .gar-24 {
    background-image: url(../images/gar-24.png);
  }
  .no-webp .gar-12 {
    background-image: url(../images/gar-12.png);
  }
  .no-webp .gar-1 {
    background-image: url(../images/gar-1.png);
  }
  .no-webp .gar-15 {
    background-image: url(../images/gar-15.png);
  }
  .no-webp .gar-10 {
    background-image: url(../images/gar-10.png);
  }
  .no-webp .gar-25 {
    background-image: url(../images/gar-25.png);
  }
  .no-webp .touch2 {
    background-image: url(../images/astro-touch2.png);
  }
  .no-webp .touch1 {
    background-image: url(../images/astro-touch1.png);
  }
  /*webp*/
  .webp .meta_cont{
    background: url(../images/meta.webp) no-repeat;
  }
  .webp .astro_surf{
    background: url(../images/astro-surf.webp) no-repeat;
  }
  .webp .skate{
    background: url(../images/skate.webp) no-repeat;
  }
  .webp .meta_cont {
    background: url(../images/meta.webp) no-repeat;
  }
  .webp .pen-bloc {
    background-image: url(../images/pen.webp);
  }
  .webp .ipad {
    background-image: url(../images/ipad-1.webp);
  }
  .webp .phone-astro {
    background-image: url(../images/phone-astro-1.webp);
  }
  .webp .astro-phone {
    background-image: url(../images/astro-phone.webp);
  }
  .webp .gar-13 {
    background-image: url(../images/gar-13.webp);
  }
  .webp .gar-24 {
    background-image: url(../images/gar-24.webp);
  }
  .webp .gar-12 {
    background-image: url(../images/gar-12.webp);
  }
  .webp .gar-1 {
    background-image: url(../images/gar-1.webp);
  }
  .webp .gar-15 {
    background-image: url(../images/gar-15.webp);
  }
  .webp .gar-10 {
    background-image: url(../images/gar-10.webp);
  }
  .webp .gar-25 {
    background-image: url(../images/gar-25.webp);
  }
  .webp .touch2 {
    background-image: url(../images/astro-touch2.webp);
  }
  .webp .touch1 {
    background-image: url(../images/astro-touch1.webp);
  }
  }

/*Mini*/
  @media only screen and (max-width: 600px) {
    .no-webp .meta_cont{
      background: url(../images/meta-mini.png) no-repeat;
    }
    .no-webp .astro_surf{
      background: url(../images/astro-surf-min.png) no-repeat;
    }
    .no-webp .skate{
      background: url(../images/skate-min.png) no-repeat;
    }
    .no-webp .meta_cont {
      background: url(../images/meta-mini.png) no-repeat;
    }
    .no-webp .pen-bloc {
      background-image: url(../images/pen-min.png);
    }
    .no-webp .ipad {
      background-image: url(../images/ipad-1-min.png);
    }
    .no-webp .phone-astro {
      background-image: url(../images/phone-astro-1-min.png);
    }
    .no-webp .astro-phone {
      background-image: url(../images/astro-phone-min.png);
    }
    .no-webp .gar-13 {
      background-image: url(../images/gar-13-min.png);
    }
    .no-webp .gar-24 {
      background-image: url(../images/gar-24-min.png);
    }
    .no-webp .gar-12 {
      background-image: url(../images/gar-12-min.png);
    }
    .no-webp .gar-1 {
      background-image: url(../images/gar-1-min.png);
    }
    .no-webp .gar-15 {
      background-image: url(../images/gar-15-min.png);
    }
    .no-webp .gar-10 {
      background-image: url(../images/gar-10-min.png);
    }
    .no-webp .gar-25 {
      background-image: url(../images/gar-25-min.png);
    }
    .no-webp .touch2 {
      background-image: url(../images/astro-touch2-mini.png);
    }
    .no-webp .touch1 {
      background-image: url(../images/astro-touch1-mini.png);
    }
    /*webp*/
    .webp .meta_cont{
      background: url(../images/meta.webp) no-repeat;
    }
    .webp .astro_surf{
      background: url(../images/astro-surf-min.webp) no-repeat;
    }
    .webp .skate{
      background: url(../images/skate-min.webp) no-repeat;
    }
    .webp .meta_cont {
      background: url(../images/meta-mini.webp) no-repeat;
    }
    .webp .pen-bloc {
      background-image: url(../images/pen-min.webp);
    }
    .webp .ipad {
      background-image: url(../images/ipad-1-min.webp);
    }
    .webp .phone-astro {
      background-image: url(../images/phone-astro-1-min.webp);
    }
    .webp .astro-phone {
      background-image: url(../images/astro-phone-min.webp);
    }
    .webp .gar-13 {
      background-image: url(../images/gar-13-min.webp);
    }
    .webp .gar-24 {
      background-image: url(../images/gar-24.webp);
    }
    .webp .gar-12 {
      background-image: url(../images/gar-12-min.webp);
    }
    .webp .gar-1 {
      background-image: url(../images/gar-1-min.webp);
    }
    .webp .gar-15 {
      background-image: url(../images/gar-15-min.webp);
    }
    .webp .gar-10 {
      background-image: url(../images/gar-10-min.webp);
    }
    .webp .gar-25 {
      background-image: url(../images/gar-25-min.webp);
    }
    .webp .touch2 {
      background-image: url(../images/astro-touch2-mini.webp);
    }
    .webp .touch1 {
      background-image: url(../images/astro-touch1-mini.webp);
    }
    }

/*STORY*/
/*webp*/
.webp #amiga{
  background: url(../archivos/img/amiga.webp) no-repeat;
}
.webp #boss{
  background: url(../archivos/img/boss.webp) no-repeat;
}
.webp #cry{
  background: url(../archivos/img/cry.webp) no-repeat;
}
.webp #dance{
  background: url(../archivos/img/dance.webp) no-repeat;
}
.webp #everyday{
  background: url(../archivos/img/everyday.webp) no-repeat;
}
.webp #ofice{
  background: url(../archivos/img/ofice.webp) no-repeat;
}
.webp #okecat{
  background: url(../archivos/img/okecat.webp) no-repeat;
}
.webp #okeparty{
  background: url(../archivos/img/okeparty.webp) no-repeat;
}
.webp #programing{
  background: url(../archivos/img/programing.webp) no-repeat;
}
.webp #team{
  background: url(../archivos/img/team.webp) no-repeat;
}
.webp #vision{
  background: url(../archivos/img/vision.webp) no-repeat;
}
.webp #yeah{
  background: url(../archivos/img/yeah.webp) no-repeat;
}
/*No webp*/
.no-webp #amiga{
  background: url(../archivos/img/amiga.gif) no-repeat;
}
.no-webp #boss{
  background: url(../archivos/img/boss.gif) no-repeat;
}
.no-webp #cry{
  background: url(../archivos/img/cry.gif) no-repeat;
}
.no-webp #dance{
  background: url(../archivos/img/dance.gif) no-repeat;
}
.no-webp #everyday{
  background: url(../archivos/img/everyday.gif) no-repeat;
}
.no-webp #ofice{
  background: url(../archivos/img/ofice.gif) no-repeat;
}
.no-webp #okecat{
  background: url(../archivos/img/okecat.gif) no-repeat;
}
.no-webp #okeparty{
  background: url(../archivos/img/okeparty.gif) no-repeat;
}
.no-webp #programing{
  background: url(../archivos/img/programing.gif) no-repeat;
}
.no-webp #team{
  background: url(../archivos/img/team.gif) no-repeat;
}
.no-webp #vision{
  background: url(../archivos/img/vision.gif) no-repeat;
}
.no-webp #yeah{
  background: url(../archivos/img/yeah.gif) no-repeat;
}

.st-time-dot-trigger, .st-it-trigger-1, .st-it-trigger-2 {
    position: absolute;
    top: 25vh;
    z-index: -1;
    width: 0px;
    height: 99999vh;
}
.bubble-st {
  animation: bubble 3s infinite linear;
}
#bubble-1 {
animation-delay: 0s;
}
#bubble-2 {
animation-delay: 1s;
}
#bubble-3 {
animation-delay: 2s;
}
@keyframes bubble {
  0% {transform: scale(0.4); opacity: 1;}
  95% {opacity: 1;}
  100% {transform: scale(1); opacity: 0;}
}