@keyframes scroll-icon{
  0% {
    -webkit-transform:translateY(-12px);
            transform: translateY(-12px);
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
    opacity: 0;
  }
}
  .scroll-icon:after{
  content:'';
  width:5px;
  height:5px;
  background-color:#fff;
  border-radius:50%;
  -webkit-animation:scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
  animation:scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}
  .scroll-icon{
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  height:2em;
  width:1.2em;
  font-size:22px;
  color:rgba(255,255,255, 0.5);
  border-radius:2em;
  border:solid 2px;
  -webkit-transition:.4s;
  transition:.4s;
    margin: 0 auto;
}