.whiteboard {
  transform: translateX(-20px);
  animation: move-whiteboard 1s ease 1 forwards;
}
@keyframes move-whiteboard {
  20% {transform:translateX(-20px)}
  100% {
    transform: translateX(0px);
  }
}

.sk-banner-mid-text1{
  display:inline;
  fill:"#662525";
  opacity: 0;
  animation-name: show-text-intro;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}
.sk-banner-mid-text2{
  display:inline;
  fill:"#662525";
  opacity: 0;
  animation-name: show-text;
  animation-duration: 2s;
  animation-delay: 5s;
  animation-fill-mode: backwards;
}
.sk-banner-mid-text3{
  display:inline;
  fill:"#662525";
  opacity: 0;
  animation-name: show-text;
  animation-duration: 2s;
  animation-delay: 7s;
  animation-fill-mode: backwards;
}
.sk-banner-mid-text4{
  display:inline;
  fill:"#662525";
  opacity: 0;
  animation-name: show-text;
  animation-duration: 2s;
  animation-delay: 9s;
  animation-fill-mode: backwards;
}
.sk-banner-mid-text5{
  display:inline;
  fill:"#662525";
  opacity: 0;
  animation-name: show-text-permanent;
  animation-duration: 4s;
  animation-delay: 11s;
  animation-fill-mode: forwards;
}
@keyframes show-text-intro {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes show-text {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes show-text-permanent {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.sk-banner-mid-thumb1{
  transform-origin: center center;
  transform: translate(0px,7px) rotate(7deg);
  animation-name: show-thumb1;
  animation-duration: 0.5s;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}
.sk-banner-mid-thumb2{
  transform-origin: center center;
  transform: translate(0,9.5px) rotate(7deg);
  animation-name: show-thumb2;
  animation-duration: 0.5s;
  animation-delay: 7s;
  animation-fill-mode: forwards;
}
.sk-banner-mid-thumb3{
  transform-origin: center center;
  transform: translate(0,14px) rotate(7deg);
  animation-name: show-thumb3;
  animation-duration: 0.5s;
  animation-delay: 9s;
  animation-fill-mode: forwards;
}
@keyframes show-thumb1 {
  0% {
    transform: translate(0px,7px) rotate(7deg);
  }
  100% {
    transform:translate(0px,-15.5px) rotate(7deg);
  }
}
@keyframes show-thumb2 {
  0% {
    transform: translate(0px,9.5px) rotate(7deg);
  }
  100% {
    transform:translate(0,-13px) rotate(7deg);
  }
}
@keyframes show-thumb3 {
  0% {
    transform: translate(0px,14px) rotate(7deg);
  }
  100% {
    transform: translate(0,-9.5px) rotate(7deg);
  }
}