.back-to-top {
  position: fixed;
  bottom: 1em;
  right: 1em;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 2px solid $darkgrey-1;
  text-indent: -9999px;
  background: $tertiary;
  opacity: 0.75;
  z-index: 10000;
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -moz-transition-property: -moz-transform,opacity;
  -o-transition-property: -o-transform,opacity;
  -webkit-transition-property: -webkit-transform,opacity;
  transition-property: transform,opacity;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  transition-duration: 250ms;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  cursor: pointer;


  span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: $grey-1;
  }

  &:hover, &:focus {
    opacity: 1;
    background: $ochre;
    border: 2px solid $ochre-red;
    -moz-transition-property: all;
    -o-transition-property: all;
    -webkit-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 250ms;
    -o-transition-duration: 250ms;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    span {
      border-bottom-color: $white;
    }
  }
}