.loader {
 border: 3px solid #f3f3f3;
 border-top: 3px solid rgb(0, 66, 128);
 border-radius: 50%;
 width: 15px;
 height: 15px;
 margin-right: 5px;
 align-self: center;

 animation: spin .5s linear infinite;
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}



@keyframes slideLeft{
  0% {
  transform: translateX(-100%);
}
100% {
  transform: translateX(0);
}
}

@keyframes turnIn{
  0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}

.fun-animation1{
  animation: .5s ease-out 0s 1 turnIn;
}

.float-top{
  animation: .7s ease-out 0s 1 floatTop;
  position: relative;
}

@keyframes floatTop {
  from{
    opacity: 0;
    top:-100px;
  }
  to{
    opacity: 1;
    top:0px;
  }
}