.cls-1 { fill: #EF9C07; }
.cls-2 { fill: #010057; }
.cut { display: none; }
.st0 { fill: #e6ecf5; }

#logo-insta {
  animation: anim-insta 0.5s ease-in-out forwards;
}

#code-all {
  opacity: 0;
}

#code-all.animated {
  animation: anim-insta 0.5s ease-in-out forwards;
}

@keyframes anim-insta {
  0% { transform: translateX(-50%); opacity: 0; }
  30% { opacity: 0.5; }
  100% { transform: translateX(0%); opacity: 1; }
}

#logo-broken-arrow { opacity: 0; }
#logo-broken-arrow.animated {
  animation: anim-b-arrow 0.5s ease-in-out forwards;
}

@keyframes anim-b-arrow {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0%); opacity: 1; }
}

#white-cover,
#cut-c, #cut-o, #cut-d, #cut-e {
  opacity: 1;
}

#white-cover.cut-animate,
#cut-c.cut-animate,
#cut-o.cut-animate,
#cut-d.cut-animate,
#cut-e.cut-animate {
  animation: anim-type-fx 0.2s ease-in forwards;
}

@keyframes anim-type-fx {
  to { opacity: 0; }
}