.hero__scroll {
    text-align: center;
    position: absolute;
    bottom: 60px;
    width: 200px;
    margin: auto;
    display: block;
    cursor: pointer;
    padding-bottom: 40px;
    left: 0;
    right: 0;
    font-weight:bold;
    text-transform: uppercase;
    color:#ffffff
}
  .hero__scroll .chevron {
      text-align:center;
    margin-top: 20px;
    display: block;
    -webkit-animation: pulse 2s infinite;
            animation: pulse 2s infinite;
    color: #FF4081; }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }

  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }

  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }

  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }

  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

.chevron::before {
  border-style: solid;
  border-width: 0.25em 0.25em 0 0;
  content: '';
  display: inline-block;
  height: 20px;
  position: relative;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  vertical-align: top;
  width: 20px; }

.chevron.right:before {
  left: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg); }

.chevron.bottom:before {
  top: 0;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg); }

.chevron.left:before {
  left: 0.25em;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg); }