.arrow_container {
  height: 100px;
  width: 300px;
  position: absolute;
  top: 350px;
  right:-7%;
}

.chevron {
  position: absolute;
  width: 2.1rem;
  height: 0.48rem;
  opacity: 0;
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-animation: move-chevron 3s ease-out infinite;
          animation: move-chevron 3s ease-out infinite;
}

.chevron:first-child {
  -webkit-animation: move-chevron 3s ease-out 1s infinite;
          animation: move-chevron 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  -webkit-animation: move-chevron 3s ease-out 2s infinite;
          animation: move-chevron 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: #FC7CFF;
}

.chevron:before {
  left: 0;
  -webkit-transform: skewY(30deg);
          transform: skewY(30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  -webkit-transform: skewY(-30deg);
          transform: skewY(-30deg);
}

@-webkit-keyframes move-chevron {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    -webkit-transform: translateY(2.28rem);
            transform: translateY(2.28rem);
  }
  66.6% {
    opacity: 1;
    -webkit-transform: translateY(3.12rem);
            transform: translateY(3.12rem);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(4.8rem) scale(0.5);
            transform: translateY(4.8rem) scale(0.5);
  }
}

@keyframes move-chevron {
  25% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
    -webkit-transform: translateY(2.28rem);
            transform: translateY(2.28rem);
  }
  66.6% {
    opacity: 1;
    -webkit-transform: translateY(3.12rem);
            transform: translateY(3.12rem);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(4.8rem) scale(0.5);
            transform: translateY(4.8rem) scale(0.5);
  }
}

@media(min-width: 1300px) and (max-width: 1400px){
  .arrow_container {
    height: 100px;
    width: 300px;
    position: absolute;
    top: 340px;
    right:-8%;
  }
}

@media(min-width: 1100px) and (max-width: 1300px){
  .arrow_container {
    height: 100px;
    width: 300px;
    position: absolute;
    top: 300px;
    right:-10%;
  }
}

@media(min-width: 900px) and (max-width: 1100px){
  .arrow_container {
    height: 100px;
    width: 300px;
    position: absolute;
    top: 230px;
    right:-14%;
  }
}

@media(min-width: 700px) and (max-width: 900px){
  .arrow_container {
    height: 100px;
    width: 300px;
    position: absolute;
    top: 130px;
    right:-25%;
  }
}


@media(min-width: 560px) and (max-width: 700px){
  .arrow_container {
    height: 100px;
    width: 300px;
    position: absolute;
    top: 110px;
    right:-35%;
  }
}

@media(min-width: 150px) and (max-width: 560px){
  .arrow_container {
    height: 100px;
    width: 80px;
    position: absolute;
    top: 50px;
  }
}