/**/
/* nuevos cuadrados about*/

@keyframes nuevoscuadradoscube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

.nuevoscuadrados {
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #ffffff;
    overflow: hidden;
}
.nuevoscuadrados li {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px #e5e5e5;
    color: transparent;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: nuevoscuadradoscube 22s ease-in forwards infinite;
}
undefined
.nuevoscuadrados li:nth-child(0) {
    animation-delay: 0s;
    left: 18vw;
    top: 67vh;
    border-color: #e5e5e5;
}

.nuevoscuadrados li:nth-child(1) {
    animation-delay: 2s;
    left: 0vw;
    top: 62vh;
}

.nuevoscuadrados li:nth-child(2) {
    animation-delay: 4s;
    left: 96vw;
    top: 40vh;
    border-color: #e5e5e5;
}

.nuevoscuadrados li:nth-child(3) {
    animation-delay: 6s;
    left: 42vw;
    top: 8vh;
}

.nuevoscuadrados li:nth-child(4) {
    animation-delay: 8s;
    left: 56vw;
    top: 84vh;
    border-color: #ffffff;
}

.nuevoscuadrados li:nth-child(5) {
    animation-delay: 10s;
    left: 76vw;
    top: 20vh;
    border-color: #e5e5e5;
}



/* C nuevos caudrados about*/
/**/


/*********** animacion rectangulos about *********/
/*
.squaresanimados {
  position: absolute;
  width: 100%;  
  height: 100%;
  top: 0px;
  left:0px;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  overflow: hidden }
.squareanimados {
  -webkit-animation: squaresanimados 9.5s linear infinite;
  animation: squaresanimados 9.5s linear infinite;
  align-self: flex-end;
  width: 1em;
  height: 1em;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  background: #ebebeb;  
  &:nth-child(2) { 
    height: 1.5em;  
    width: 3em;   
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 27s; 
    animation-duration: 27s; 
    -webkit-filter: blur(5px) }
  &:nth-child(3) { 
    height: 2em;    
    width: 1em;   
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-duration: 18s; 
    animation-duration: 18s; 
    -webkit-filter: blur() }
  &:nth-child(4) { 
    height: 1em;    
    width: 1.5em; 
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-filter: blur(3px);
    -webkit-animation-duration: 83s;
    animation-duration: 83s }
  &:nth-child(5) { 
    height: 1.25em; 
    width: 2em;   
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-filter: blur(2px);
    -webkit-animation-duration: 91s;
    animation-duration: 91s }
  &:nth-child(6) { 
    height: 2.5em;  
    width: 2em;   
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-filter: blur(1px);
    -webkit-animation-duration: 69s;
    animation-duration: 69s }
  &:nth-child(7) { 
    height: 5em;    
    width: 2em;   
    -webkit-filter: blur(2.5px);
    -webkit-animation-duration: 102s;
    animation-duration: 102s }
  &:nth-child(8) { 
    height: 1em;    
    width: 3em;   
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-filter: blur(6px);
    -webkit-animation-duration: 68s;
    animation-duration: 68s }
  &:nth-child(9) {
    height: 1.5em; 
    width: 2em; 
    -webkit-filter: blur(0.5px);
    -webkit-animation-duration: 19s;
    animation-duration: 19s }
  &:nth-child(9) {
    height: 3em;
    width: 2.4em;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-filter: blur(0.5px);
   -webkit-animation-duration: 22s; 
    animation-duration: 22s; }}

@keyframes squaresanimados { 
  from { transform: translateY(100%) rotate(-50deg);
         -webkit-transform: translateY(100%) rotate(-50deg);
       }
  to   { transform: translateY(calc(-150vh + -100%)) rotate(20deg); 
         -webkit-transform: translateY(calc(-150vh + -100%)) rotate(20deg);
       }}


*/
/********** C animacion rectangulos about ***********/



.boxgirar {
    -webkit-animation: rotateYGirar-anim 30s linear infinite;
    -o-animation: rotateYGirar-anim 30s linear infinite;
	-moz-animation: rotateYGirar-anim 30s linear infinite;
	-ms-animation: rotateYGirar-anim 30s linear infinite;
	animation: rotateYGirar-anim 30s linear infinite;	
}

@keyframes rotateYGirar-anim {
 0% {
    transform: rotateX(-13deg) rotateY(-13deg);
  }
  25% {
    transform: rotateX(13deg) rotateY(-13deg);
  }
  50% {
    transform: rotateX(13deg) rotateY(13deg);
  }
  75% {
    transform: rotateX(-13deg) rotateY(13deg);
  }
  100% {
    transform: rotateX(-13deg) rotateY(-13deg);
  }
}




/************animacion cuadros about**********/

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(243, 29, 29, 0.15);
  bottom: -160px;
  -webkit-animation: square 25s infinite;
  animation: square 25s infinite;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
/*
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  background-color: rgba(243, 29, 29, 0.25);
}
*/
.bg-bubbles li:nth-child(5) {
  left: 70%;
}

.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  background-color: rgba(243, 29, 29, 0.2);
}

/*.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
*/
/*
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
}
*/
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 40s;
          animation-duration: 40s;
  background-color: rgba(243, 29, 29, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
          animation-delay: 11s;
}
@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1300px) rotate(600deg);
            transform: translateY(-1300px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1300px) rotate(600deg);
            transform: translateY(-1300px) rotate(600deg);
  }
}

/**********C animacion cuadros about************/



/****************** background move ************/
  .bgmueve {
    width: 100%;
    height: 100%;
    
   
    top: 0;
    left: 0;
    z-index: 0;
    
    
    background-size: cover;

    transform: scale(1.025);
    overflow: hidden;
  }
  
  .bgmueve2 {
    width: 100%;
    height: 100%;
    
   
    top: 0;
    left: 0;
    z-index: 0;
    
    
    background-size: cover;

    transform: scale(1.097);
    overflow: hidden;
  }  

  .bgmueve3 {
    width: 100%;
    height: 100%;
    
   
    top: 0;
    left: 0;
    z-index: 0;
    
    
    background-size: cover;

    transform: scale(1.025);
    overflow: hidden;
  }


/****************** C background move **********/



/*animacion flotar*/

@keyframes float {
	0% {
		
		transform: translatey(0px);
	}
	50% {
		
		transform: translatey(-20px);
	}
	100% {
		
		transform: translatey(0px);
	}
}

/*C animacion flotar*/




/* animacion texto glitch*/

.wrapglitch {
  
  background-size: contain;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glitch {
  
  font-weight: 600;
  color: #610000;
  font-family:'Neuropol X Free';font-weight:normal;
  top: -100px;
  position: relative;
  margin: 0 auto;
  text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 0px 0px 15px rgba(255, 255, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
  transform: skewX(0deg);
}
@-webkit-keyframes blur {
  0%,40%, 50%, 60%, 90%, 95%, 100% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(0, 0, 0, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  }
  45%, 75% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #000000, 0px 0px 20px white;
  }
  97.5% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
@keyframes blur {
  0%,40%, 50%, 60%, 90%, 95%, 100% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(0, 0, 0, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  }
  45%, 75% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #000000, 0px 0px 20px white;
  }
  97.5% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 3px;
  text-shadow: -1px 0 red;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
  transform: skewX(0deg);
  z-index: -2;
  opacity: .7;
}

.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: 1px;
  text-shadow: -3px 0 cyan;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
  transform: skewX(0deg);
  z-index: -1;
   opacity: .8;
}

@-webkit-keyframes noise-anim {
  0% {
    clip: rect(98px, 9999px, 10px, 0);
  }
  5% {
    clip: rect(34px, 9999px, 28px, 0);
  }
  10% {
    clip: rect(59px, 9999px, 61px, 0);
  }
  15% {
    clip: rect(9px, 9999px, 72px, 0);
  }
  20% {
    clip: rect(68px, 9999px, 68px, 0);
  }
  25% {
    clip: rect(90px, 9999px, 36px, 0);
  }
  30% {
    clip: rect(59px, 9999px, 27px, 0);
  }
  35% {
    clip: rect(47px, 9999px, 57px, 0);
  }
  40% {
    clip: rect(41px, 9999px, 18px, 0);
  }
  45% {
    clip: rect(55px, 9999px, 37px, 0);
  }
  50% {
    clip: rect(53px, 9999px, 70px, 0);
  }
  55% {
    clip: rect(86px, 9999px, 57px, 0);
  }
  60% {
    clip: rect(92px, 9999px, 65px, 0);
  }
  65% {
    clip: rect(63px, 9999px, 34px, 0);
  }
  70% {
    clip: rect(31px, 9999px, 27px, 0);
  }
  75% {
    clip: rect(80px, 9999px, 14px, 0);
  }
  80% {
    clip: rect(30px, 9999px, 87px, 0);
  }
  85% {
    clip: rect(57px, 9999px, 73px, 0);
  }
  90% {
    clip: rect(32px, 9999px, 3px, 0);
  }
  95% {
    clip: rect(36px, 9999px, 25px, 0);
  }
  100% {
    clip: rect(55px, 9999px, 61px, 0);
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(98px, 9999px, 10px, 0);
  }
  5% {
    clip: rect(34px, 9999px, 28px, 0);
  }
  10% {
    clip: rect(59px, 9999px, 61px, 0);
  }
  15% {
    clip: rect(9px, 9999px, 72px, 0);
  }
  20% {
    clip: rect(68px, 9999px, 68px, 0);
  }
  25% {
    clip: rect(90px, 9999px, 36px, 0);
  }
  30% {
    clip: rect(59px, 9999px, 27px, 0);
  }
  35% {
    clip: rect(47px, 9999px, 57px, 0);
  }
  40% {
    clip: rect(41px, 9999px, 18px, 0);
  }
  45% {
    clip: rect(55px, 9999px, 37px, 0);
  }
  50% {
    clip: rect(53px, 9999px, 70px, 0);
  }
  55% {
    clip: rect(86px, 9999px, 57px, 0);
  }
  60% {
    clip: rect(92px, 9999px, 65px, 0);
  }
  65% {
    clip: rect(63px, 9999px, 34px, 0);
  }
  70% {
    clip: rect(31px, 9999px, 27px, 0);
  }
  75% {
    clip: rect(80px, 9999px, 14px, 0);
  }
  80% {
    clip: rect(30px, 9999px, 87px, 0);
  }
  85% {
    clip: rect(57px, 9999px, 73px, 0);
  }
  90% {
    clip: rect(32px, 9999px, 3px, 0);
  }
  95% {
    clip: rect(36px, 9999px, 25px, 0);
  }
  100% {
    clip: rect(55px, 9999px, 61px, 0);
  }
}
@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(38px, 9999px, 80px, 0);
  }
  5% {
    clip: rect(9px, 9999px, 77px, 0);
  }
  10% {
    clip: rect(66px, 9999px, 30px, 0);
  }
  15% {
    clip: rect(93px, 9999px, 67px, 0);
  }
  20% {
    clip: rect(1px, 9999px, 23px, 0);
  }
  25% {
    clip: rect(88px, 9999px, 40px, 0);
  }
  30% {
    clip: rect(86px, 9999px, 75px, 0);
  }
  35% {
    clip: rect(40px, 9999px, 69px, 0);
  }
  40% {
    clip: rect(93px, 9999px, 95px, 0);
  }
  45% {
    clip: rect(27px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(58px, 9999px, 71px, 0);
  }
  55% {
    clip: rect(79px, 9999px, 47px, 0);
  }
  60% {
    clip: rect(86px, 9999px, 61px, 0);
  }
  65% {
    clip: rect(97px, 9999px, 91px, 0);
  }
  70% {
    clip: rect(17px, 9999px, 71px, 0);
  }
  75% {
    clip: rect(8px, 9999px, 73px, 0);
  }
  80% {
    clip: rect(94px, 9999px, 87px, 0);
  }
  85% {
    clip: rect(4px, 9999px, 25px, 0);
  }
  90% {
    clip: rect(30px, 9999px, 68px, 0);
  }
  95% {
    clip: rect(9px, 9999px, 73px, 0);
  }
  100% {
    clip: rect(28px, 9999px, 16px, 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip: rect(38px, 9999px, 80px, 0);
  }
  5% {
    clip: rect(9px, 9999px, 77px, 0);
  }
  10% {
    clip: rect(66px, 9999px, 30px, 0);
  }
  15% {
    clip: rect(93px, 9999px, 67px, 0);
  }
  20% {
    clip: rect(1px, 9999px, 23px, 0);
  }
  25% {
    clip: rect(88px, 9999px, 40px, 0);
  }
  30% {
    clip: rect(86px, 9999px, 75px, 0);
  }
  35% {
    clip: rect(40px, 9999px, 69px, 0);
  }
  40% {
    clip: rect(93px, 9999px, 95px, 0);
  }
  45% {
    clip: rect(27px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(58px, 9999px, 71px, 0);
  }
  55% {
    clip: rect(79px, 9999px, 47px, 0);
  }
  60% {
    clip: rect(86px, 9999px, 61px, 0);
  }
  65% {
    clip: rect(97px, 9999px, 91px, 0);
  }
  70% {
    clip: rect(17px, 9999px, 71px, 0);
  }
  75% {
    clip: rect(8px, 9999px, 73px, 0);
  }
  80% {
    clip: rect(94px, 9999px, 87px, 0);
  }
  85% {
    clip: rect(4px, 9999px, 25px, 0);
  }
  90% {
    clip: rect(30px, 9999px, 68px, 0);
  }
  95% {
    clip: rect(9px, 9999px, 73px, 0);
  }
  100% {
    clip: rect(28px, 9999px, 16px, 0);
  }
}
@-webkit-keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    transform: skewX(0deg);
  }
  41% {
    transform: skewX(10deg);
  }
  42% {
    transform: skewX(-10deg);
  }
  59% {
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    transform: skewX(10deg) skewY(-10deg);
  }
}
@keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    transform: skewX(0deg);
  }
  41% {
    transform: skewX(10deg);
  }
  42% {
    transform: skewX(-10deg);
  }
  59% {
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    transform: skewX(10deg) skewY(-10deg);
  }
}



/* C animacion texto glicth*/