section.loader{
  z-index:100;

  position:fixed;
  
  top:0;
  left:0;

  width:100%;
  height:100vh;
}

section.loader.hidden{
  display: none;
}

.loader-background{
  width: 100%;
  height: 100%;

  background-color: white;
  opacity: 100%;

  top:50%;
  left:50%;

  transform: translate(-50%,-50%);

  position:absolute;

  transition-property: opacity;
  transition-duration: 0.5s;
}

.loader-background.hidden{
  opacity:0%;
}

.loading-icon{
  position:absolute;

  top:50%;
  left:50%;

  width:120px;
  height:120px;

  border:2px solid #e6e6e6;
  border-top: 2px solid #666666;
  border-radius: 50%;

  transform: translate(-50%,-50%);

  animation : loadingIcon 1.2s ease infinite;
}

@keyframes loadingIcon{

  0%{
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%,-50%) rotate(720deg);
  }

}