@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        transform: translateY(0);
    } 
}


@keyframes spin{
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*colour change animation*/
@keyframes color-change{
  0%{
    -webkit-border-top-color: #7DBA2F;
    -ms-border-top-color: #7DBA2F;
    -o-border-top-color: #7DBA2F;
    border-top-color: #7DBA2F;
  }

  100%{
    -webkit-border-top-color: #ce1483;
    -ms-border-top-color: #ce1483;
    -o-border-top-color: #ce1483;
    border-top-color: #ce1483;
  }
}