#scrolldown {
  margin:100px auto;
  position:relative;
  z-index:800;
  display:block;
  width:100px;
  padding-top:50px;
  text-align:center;
  color:#950101;
  text-decoration:none;
  font-weight:bold;
}

#scrolldown:before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  margin-left:-12.5px;
  background-color:transparent;
  width:25px;
  height:38px;
  border:2px solid rgba(176,11,0,0.56);
  border-radius:25px;
}

#scrolldown:after {
  content:"";
  display:block;
  position:absolute;
  top:10%;
  left:50%;
  width:5px;
  margin-left:-2.5px;
  background-color:transparent;
  height:9px;
  border-radius:5px;
  border:2px solid #bbb;
  -webkit-animation:SCROLLDOWN 2s infinite;
  -moz-animation:SCROLLDOWN 2s infinite;
  -ms-animation:SCROLLDOWN 2s infinite;
  -o-animation:SCROLLDOWN 2s infinite;
  animation:SCROLLDOWN 2s infinite;
}

@keyframes SCROLLDOWN {
  0% {
    opacity:0;
    transform:translateY(0px);
  }
  25% {
    opacity:1;
    transform:translateY(0px);
  }
  100% {
    opacity:0;
    transform:translateY(10px);
  }
}

#scrolldown, #scrolldown:before, #scrolldown:after, #scrolldown span:before {
  -webkit-transition:all 0.25s ease-in-out;
  -moz-transition:all 0.25s ease-in-out;
  -ms-transition:all 0.25s ease-in-out;
  -o-transition:all 0.25s ease-in-out;
  transition:all 0.25s ease-in-out;
}

#scrolldown:hover {
  color:#D4D4D4;
}

#scrolldown:hover span:before {
  border-color:#D4D4D4;
}

#scrolldown:hover:before {
  background-color:#fff;
  border-color:#D4D4D4;
}

#scrolldown:hover:after {
  background-color:#bd4018;
  border-color:#D4D4D4;
}