/* KEYFRAMES */

@keyframes fullIconWidth {
  from {
    width: 0;
  }
  to {
    width: 240rem;
  }
}

@keyframes fullheighyContent {
  from {
    max-height: 0;
  }
  to {
    max-height: 1000px;
  }
}

@keyframes move {
  from {
    left: -1000%;
  }
  to {
    left: 0px;
  }
}

@keyframes fadeIn {
  
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@keyframes arrowUpMove {
  100% {
    bottom: 23px;
  }
}

@keyframes arrowDownMove {
  100% {
    top: 0px;
  }
}

@keyframes fullHeight {
  /* Note: using css transform for animation property works much smoother  */
  from {
    transform: scale(1.0, 0.0);
  }
  to {
    transform: scale(1.0, 1.0);
  }
}

@keyframes tabsMaxHeight {
  100% {
    max-height: 1000px;
  }
}

@keyframes heroHeight {
  100% {
    height: 425px;
  }
}

@keyframes swipeUp {
  100% {
    height: 0px;
  }
}

@keyframes bounceUp {
  100% {
    width: 200px;
  }
}

@keyframes handShrink {
  100% {
    width: 20rem;
  }
}

@keyframes percentage-chart {
  to {
    stroke-dasharray: 0 100;
  }
}

@keyframes draw2 {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  to {
    stroke-dasharray: 0;
  }
}

@keyframes fullHeightIcon {
  from {
    width: 0;
    height: 0;
  }
  to {
    width: 20rem;
    height: 20rem;
  }
}

@keyframes movedown {
  to {
    transform: translateY(100px);
  }
}