// Cloud animation
@keyframes slideinLeft {
    from {
      left: -15%;
    }
  
    to {
      left: 0%;
    }
  }
  
  @keyframes slideinRight {
    from {
      right: -15%;
    }
  
    to {
      right: 0%;
    }
  }
  
  @keyframes videoCircle{
      0%{
          transform: scale(.001);
      }
      100%{
          transform: scale(1.6);
          visibility: visible;
      }
  }
  
  @keyframes videoIframe{
      0%{
          opacity: 0;
      }
      100%{
          opacity: 1;
          visibility: visible;
      }
  }
  
  // Animation when loading
  @keyframes animator {
      from {
          opacity: 0;
          transform: translateY(25px);
      }
  }
  
  
  .animate {
     visibility: hidden; 
  }
  
  .animate-in {
    animation-duration: .8s;
    animation-fill-mode: both;
    visibility: visible;
    animation-name: animator;
    &.to-right{
      animation-name: slideinRight;
    }
    &.to-left{
      animation-name: slideinLeft;
    }
  }
  
  //Animacion flecha gris
  // @keyframes arrowDown {
  //   0% {
  //     bottom: -43px;
  //   }
  //   50% {
  //     // background-color: $primary;
  //   }
  //   100% {
  //     bottom: -60px;
  //   }
  // }

  @keyframes scroll {
    0% { top: 5px; opacity: 1;}
    100% { top: 75%; opacity: 0; }
  }

  @-webkit-keyframes bg {
    0% {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }
  
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  
  @keyframes bg {
    0% {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }
  
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }