@media only print {
  * {
    background: transparent !important;
    color: #000 !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
}

.rp1 {
  width: 80vw;
  height: 65px;
  position: absolute;
  bottom: 4%;
  right: 0;
  border-bottom: solid 65px #01b2ca;
  border-left: solid 25px rgba(255,255,255,0);
  animation: slideM 1s ease-in-out;
}

.rp2 {
  width: 80vw;
  height: 60px;
  position: absolute;
  bottom: 2%;
  right: -1%;
  border-bottom: solid 65px #423188;
  border-left: solid 25px rgba(255,255,255,0);
  animation: slideM 1.4s ease-in-out;
}

.rp3 {
  width: 80vw;
  height: 65px;
  position: absolute;
  bottom: 82%;
  left: 0;
  border-top: solid 65px #01b2ca;
  border-right: solid 25px rgba(255,255,255,0);
  animation: slideMe .8s ease-in-out;
}

.rp4 {
  width: 80vw;
  height: 65px;
  position: absolute;
  bottom: 84%;
  left: -1%;
  border-top: solid 65px #423188;
  border-right: solid 25px rgba(255,255,255,0);
  animation: slideMe 1.2s ease-in-out;
}

@keyframes slideMe2 {
  0% {
    transform: translateX(180vw);
    opacity: 0%;
  }
  100% {
    transform: skew(0deg);
    opacity: 100%;
  }
}

@keyframes slideMe {
  0% {
    transform: translateX(-80vw);
    opacity: 0%;
  }
  100% {
    transform: skew(0deg);
    opacity: 100%;
  }
}

@keyframes slideM {
  0% {
    transform: translateX(180vw);
    opacity: 0;
  }
  100% {
    transform: skew(0deg);
    opacity: 100%;
  }
}