body, html{
  margin: 0;
}

.newsletter-wrapper{
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

#newsletter-svg{
  transform-style: preserve-3d;
}

#benderLetter {
  animation: moveEnvelope ease-in-out 10s infinite;
}

#stop1{
  stop-color: #F9B00000;
  animation: fill-stop1 ease-in .5s .2s forwards;
}
#stop2{
  stop-color: #0000;
}

#envelopFlap{
  transform-origin: center 19.5%;
  animation: open-envelope ease-in 10s infinite;
}

#envelopFlapAfter{
  opacity: 0;
  transform-origin: center 19.5%;
  animation: moveEnvelopeFlapAfter 10s infinite;
}

#greenLetter{
  transform-origin: 95% 0%;
  animation: moveGreenLetter ease-in-out 10s infinite;
}
#greyLetter{
  transform-origin: 95% 0%;
  animation: moveGreyLetter ease-in-out 10s infinite;
}
#yellowLetter{
  transform-origin: 95% 0%;
  animation: moveYellowLetter ease-in-out 10s infinite;
}

@keyframes moveEnvelope {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-80%) translateY(25%);
  }
  
  48% {
    transform: translateX(-80%) translateY(25%);
  }
  53% {
    transform: translateX(-80%) translateY(25%) translateX(-80%);
  }
  70% {
    opacity: 1;
    transform: translateX(-80%) translateY(25%) translateX(-80%);
  }
  71% {
    opacity: 0;
    transform: translateX(-80%) translateY(25%) translateX(-80%);
  }
  72%{
    opacity: 0;
    transform: translateX(5%);
  }
  73%{
    opacity: 1;
  }
  83%{
    transform: translateX(0);
  }
  
}

@keyframes moveGreenLetter {
  0%{
    transform: translateY(0);
  }
  29% {
    transform: translateY(0);
  }
  32%{
    transform: translateY(-25%);
  }
  47%{
    transform: translateY(-25%);
  }
  53%{
    transform: translateY(-25%) rotateZ(180deg) translateY(-80%);
  }
  74%{
    opacity: 1;
  }
  75%{
    opacity: 0;
    transform: translateY(-25%) rotateZ(180deg) translateY(-80%);
  }
  76%{
    opacity: 0;
    transform: translateY(0);
  }
  77%{
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moveGreyLetter {
  0%{
    transform: translateY(0);
  }
  31% {
    transform: translateY(0);
  }
  34%{
    transform: translateY(-25%);
  }
  47%{
    transform: translateY(-25%);
  }
  53%{
    transform: translateY(-25%) rotateZ(90deg) translateY(-80%);
  }
  65%{
    opacity: 1;
  }
  75%{
    opacity: 0;
    transform: translateY(-25%) rotateZ(180deg) translateY(-80%);
  }
  76%{
    opacity: 0;
    transform: translateY(0);
  }
  77%{
    opacity: 0;
  }
}
@keyframes moveYellowLetter {
  0%{
    transform: translateY(0);
  }
  33% {
    transform: translateY(0);
  }
  36%{
    transform: translateY(-25%);
  }
  47%{
    transform: translateY(-25%);
  }
  53%{
    transform: translateY(-25%) rotateZ(200deg) translateY(-80%);
  }
  74%{
    opacity: 1;
  }
  75%{
    opacity: 0;
    transform: translateY(-25%) rotateZ(180deg) translateY(-80%);
  }
  76%{
    opacity: 0;
    transform: translateY(0);
  }
  77%{
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes fill-stop1 {
  to {
    stop-color: #F9B000ff;
  }
}

@keyframes open-envelope {
  0% {
    transform: scaleY(1);
  }
  17% {
    transform: scaleY(1);
  }
  22% {
    transform: scaleY(-1);
  }
  23%{
    opacity: 1;
  }
  23.1%{
    opacity: 0;
  }
  75%{
    opacity: 0;
    transform: scaleY(1); 
  }
  76%{
    opacity: 1;
  }
}

@keyframes moveEnvelopeFlapAfter {
  0% {
    opacity: 0;
    transform: translateX(-80%) translateY(25%) scaleY(-1);
  }
  22.9% {
    opacity: 0;
  }
  23% {
    opacity: 1;
  }
  48%{
    transform: translateX(-80%) translateY(25%) scaleY(-1);
  }
  53%{
    opacity: 1;
    transform: translateX(-80%) translateY(25%) scaleY(-1) translateX(-25%);
  }
  54%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}