@keyframes hand {
  0% {
    transform: translateX(0px);
  }
  85% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0px);
  }
}


@keyframes arrowHeader {
  0% {
    transform: translateY(0px);
  }
  20% {
    transform:translateY(0px);
  }
  34% {
    transform: translateY(30px);
  }
  40% {
    transform: translateY(0px);
  }
  54% {
    transform: translateY(30px);
  }
  60% {
    transform: translateY(0px);
  }

  74% {
    transform:translateY(30px);
  }

  80% {
    transform: translateY(0px);
  }

  88% {
    transform:translateY(200px);
  }

  100% {
    transform:translateY(200px);
  }
}

@keyframes arrow {
  0% {
    transform: translateY(0px);
  }
  70% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0px);
  }
}


@keyframes box {
  0% {
    transform: scale(1);
  }
  45% {
    transform:scale(1);
  }
  55% {
    transform: scale(1.1);
  }
  90% {
    transform: scale(1);
  }
}




@keyframes boxHeader {
  0% {
    transform: scale(1);
  }

  20% {
    transform:scale(1);
  }

  29% {
    transform:scale(1);
  }

  31% {
    transform:scale(1.1);
  }

  40% {
    transform:scale(1);
  }

  49%{
    transform:scale(1);
  }

  51%{
    transform:scale(1.1);
  }

  60% {
    transform:scale(1);
  }

  69% {
    transform:scale(1);
  }

  71%{
    transform:scale(1.1);
  }

  80%{
    transform:scale(1);
  }

  100% {
    transform:scale(1);

  }
  
}


@keyframes highlighter {
  0% {
    transform: scaleX(1);
  }
  90% {
    transform: scaleX(2);
  }
  100% {
    transform: scaleX(1);
  }
}


@keyframes magnyfing {
  0% {
    transform: translate(0,0);
  }

  20% {
    transform: translate(15px,15px);
  }

  40% {
    transform: translate(15px,-15px);
  }

  60% {
    transform: translate(-15px,-15px);
  }
  80% {
    transform: translate(-15px,15px);
  }
  100% {
    transform: translate(0,0);
  }
}

@keyframes bottom {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}


@keyframes up {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes checkmark {
  0% {
  stroke-dashoffset:500;
  }
  85% {
    stroke-dashoffset:500;
  }

  92% {
    stroke-dashoffset:0;
  }

  98% {
    stroke-dashoffset:0;
    opacity:1;
  }

  100% {
    opacity:0;
  }
}

.download {
  display:box;
}

.header-animation {
  display:box;
}


#svgArrowHeader {
  position:absolute;
  top:-20px;
left:34px;}

#checkmark {
  position:absolute;
  top:25px;
  margin-left:25px;
  stroke-dasharray:500;
  stroke-dashoffset:500;
  animation:checkmark 12.5s 0s ease infinite;
}

#arrowHeader {
  animation: arrowHeader 12.5s 1.5s ease infinite;

}



#hand {
  animation: hand 2.5s 1s ease infinite;
}

#highlighter {
  animation: highlighter 2.5s 1s ease infinite;
}

#magnyfing {
  animation: magnyfing 2.5s 1s ease infinite;
}

#bottom {
  animation: bottom 2.5s 1s ease infinite;
}

#up {
  animation: up 2.5s 1s ease infinite;
}


#arrow {
  position:absolute;
  margin-left:-55px;
  top: -25px;
  animation: arrow 2.5s 1s ease infinite;
}

#box {
  animation: box 2.5s 1s ease infinite;
}


#boxHeader {
  animation: boxHeader 12.5s 1.5s ease infinite;
}