body:after /* Page invisible cloak */
{
  content: "";

  display: block;

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

  width: 100vw;
  height: 100vh;

  background-color: black;

  opacity: 0;
  transition: opacity 0.5s;

  z-index: 3;

  pointer-events: none;
}

body.hidden:after /* Page cloak that hides entire page until is loaded. */
{
  opacity: 1;
  transition: opacity 0s;

  pointer-events: auto;
}

body img.loading
{
    position: fixed;
    display: block;

    width: 250px;
    height: 88.5px;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    margin: auto;
    
    opacity: 0;
    transition: opacity 0.5s;

    z-index: 4;

    pointer-events: none;
}

body.hidden img.loading
{
  opacity: 1;
  transition: opacity 0.5s;
}

body.hidden img.loading.hidden
{
    opacity: 0;
    transition: opacity 0.5s;
}

@-webkit-keyframes spin
{
  0%
  {
    -webkit-transform: rotate(0deg); /* Safari */
     transform: rotate(0deg);
  }
  100%
  {
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
  }
}