/* Web Fonts : Source Sans Pro */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
*{box-sizing: border-box;}
body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #fff;
}
.loading {
  width: 50px; height: 50px;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.loading > span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fade 1.5s infinite linear;
}
.circle {
  width: inherit; height: inherit;
  border: 6px solid rgba(0,0,0,0);
  border-top-color: #555;
  border-bottom-color: #555;
  border-radius: 50%;
  box-sizing: border-box;
  position: absolute; top: 0; left: 0;
  animation: circle 1.5s infinite ease;
}
.outline{
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid #aaa;
  position:absolute; left: -3px; top: -3px;
  border-top-color: rgba(0,0,0,0);
  border-bottom-color: rgba(0,0,0,0);
  animation: circle2 1.5s infinite ease;
}

/* ANIMATION KEYFRAMES - S */
@keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes circle2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* ANIMATION KEYFRAMES - E */