/**********************************************************
** Defines animation in different directions for text.   **
**********************************************************/

.animate-on-scroll-in-left {
  opacity: 0;
  transition-delay: 0.2s;
  transform: translateX(-300px);
  transition: all 0.7s ease-out;
  transition-delay: 0.2s;
}

.animate-in-left {
  opacity: 1;
  transform: translateX(0);
}

.animate-on-scroll-in-right {
  opacity: 0;
  transition-delay: 0.2s;
  transform: translateX(300px);
  transition: all 0.7s ease-out;
  transition-delay: 0.2s;
}

.animate-in-right {
  opacity: 1;
  transform: translateX(0);
}

.animate-on-scroll-in-top {
  opacity: 0;
  transition-delay: 0.2s;
  transform: translateY(300px);
  transition: all 0.7s ease-out;
  transition-delay: 0.2s;
}

.animate-in-top {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll-in-bottom {
  opacity: 0;
  transition-delay: 0.2s;
  transform: translateY(-200px);
  transition: all 0.7s ease-out;
  transition-delay: 0.2s;
}

.animate-in-bottom {
  opacity: 1;
  transform: translateY(0);
}


/**********************************************************
** This section defines the shimmer on slide 4           **
**********************************************************/

@-webkit-keyframes shimmer {
    from{-webkit-transform:scale(1); opacity: 0.3;}
    25% {-webkit-transform:scale(1); opacity: 0.5;}
    50% {-webkit-transform:scale(1); opacity: 0.7;}
    75% {-webkit-transform:scale(1); opacity: 0.5;}
    to{-webkit-transform:scale(1); opacity: .3;}
}

@keyframes swell {
    0%, 100% {
      transform: translate3d(0,-150px,0);      
      }
    50% {
      transform: translate3d(0,150px,0);
      }
}

.animate-shimmer {
    display: flex;
    -webkit-animation: shimmer 7s linear infinite, swell 20s ease-in-out -2.25s infinite;
    -webkit-transition: swell .5s ease-out;
}


/**********************************************************
** This section defines the hero tag line logo           **
**********************************************************/

@-webkit-keyframes rise {
    from{-webkit-transform:scale(.95); opacity: 0;}
    to{-webkit-transform:scale(1); opacity: 1;}
  }

.rise {
    -webkit-animation: rise 2s;
    height: 100%;
    }
  

/**********************************************************
** This section defines the animation for the hero logo  ** 
** and the cogs.                                         **
**********************************************************/

  @-webkit-keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    8.3% {
      transform: rotate(30deg);
    }
    16.6% {
      transform: rotate(60deg);
    }
    25% {
      transform: rotate(90deg);
    }
    33.3% {
      transform: rotate(120deg);
    }
    41.6% {
      transform: rotate(150deg);
    }
    50% {
      transform: rotate(180deg);
    }
    58.3% {
      transform: rotate(210deg);
    }
    66.6% {
      transform: rotate(240deg);
    }
    75% {
      transform: rotate(270deg);
    }
    83.3% {
      transform: rotate(300deg);
    }
    91.3% {
      transform: rotate(330deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .rotate_clockwise {
    -webkit-animation: rotate 13s infinite;
    animation-timing-function: linear;
  }
  
  .rotate_counterclockwise {
    -webkit-animation: reverse rotate 13s infinite;
    animation-timing-function: linear;
  }


/**********************************************************
** This section defines the animation for the hero logo. **
**********************************************************/

@-webkit-keyframes popout {
    from{-webkit-transform:scale(0)}
    80%{-webkit-transform:scale(1.2)}
    to{-webkit-transform:scale(1)}
}

.popout {
    -webkit-animation: popout 2s cubic-bezier(0, 1, 0.165, 2);
  }


/**********************************************************
** This section defines the animation not used.          **
**********************************************************/

@-webkit-keyframes stretch {
    0% { transform: scale(1, 1); }
    50% { transform: scale(2, 1); }
    100% { transform: scale(1,1); }
}

.animate-stretch {
    -webkit-animation-name: stretch;
    animation-duration: 1s;
    animation-timing-function: linear;
    transition-delay: .2s;
}
    
@-webkit-keyframes tilt-shaking {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: rotate(5deg);}
    50% {-webkit-transform: rotate(0deg);}
    75% {-webkit-transform: rotate(-5deg);}
    100% {-webkit-transform: rotate(0deg);}
}

.animate-shake {
    -webkit-animation: tilt-shaking 0.15s;
    -webkit-animation-iteration-count: 5;
    transition-delay: 0.2s;
}


/*Resize for mobile devicese*/
@media screen and (max-width: 480px) {
  .alignment_hero, h2 {
    height: auto;
    font-size: 0.6em;
    padding: 1em;
  }
 
  .animate-on-scroll-in-right {
    opacity: 0;
    transition-delay: 0.2s;
    transform: translateX(10px);
    transition: all 0.7s ease-out;
    transition-delay: 0.2s;
  }


  .animate-in-right {
    opacity: 1;
    transform: translateX(0);
  }

  .animate-on-scroll-in-left {
    opacity: 0;
    transition-delay: 0.2s;
    transform: translateX(-10px);
    transition: all 0.7s ease-out;
    transition-delay: 0.2s;
  }

  .animate-in-left {
    opacity: 1;
    transform: translateX(0);
  }

}