body.loaded {
    background-color: var(--offwhite) !important;
}

.no-scroll {
  overflow: hidden;
}

#page-wrap {
    opacity: 0;
}

.loaded #page-wrap {
    opacity: 1;
}

#loader {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1b2e63;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s, visibility 0.7s, z-index 0.7s;
    z-index: 61;
    justify-content: center;
  align-items: center;
}


#loader.is-hidden, #page-transition.is-hidden, .loader-content.is-hidden {
    opacity: 0;
    visibility: hidden;
    z-index: -1
}

.no-js #loader {
    display: none
}

.loader-content, #page-transition-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    text-align: center;
  }
  .loader-content::before, .loader-content::after, #page-transition-after::before, #page-transition-after::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    top: 50%;
    left: 50%;
    position: absolute;
    border-radius: 50%;
    -webkit-animation: dance infinite normal 6s cubic-bezier(0.25, 1, 0.5, 1);
            animation: dance infinite normal 6s cubic-bezier(0.25, 1, 0.5, 1);
    background-size: 90% 90%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .loader-content::before, #page-transition-after::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 5 0 Q 5 5 10 5 Q 5 5 5 10 Q 5 5 0 5 Q 5 5 5 0 Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
    -webkit-animation-delay: -1.5s;
            animation-delay: -1.5s;
  }
  .loader-content::after, #page-transition-after::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' fill='none' stroke-width='.3' stroke-linecap='round' d='M 4.25 5.5 Q 5 6.25 5.75 5.5' /%3E%3Cellipse class='' cx='3.25' cy='5' fill='white' stroke-width='0' rx='.4' ry='.4' /%3E%3Cellipse class='' cx='6.75' cy='5' fill='white' stroke-width='0' rx='.4' ry='.4' /%3E%3Cellipse class='' cx='5' cy='5' fill='none' stroke='white' stroke-width='0.3' rx='4' ry='4' /%3E%3C/svg%3E");
    -webkit-animation-delay: 0.75s;
            animation-delay: 0.75s;
  }
  
  @-webkit-keyframes dance {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    12.5%, 25% {
      transform: translate(-100%, 0) rotate(90deg);
    }
    37.5%, 50% {
      transform: translate(-100%, -100%) rotate(0deg);
    }
    62.5%, 75% {
      transform: translate(0, -100%) rotate(-90deg);
    }
    87.5%, 100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }
  
  @keyframes dance {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    12.5%, 25% {
      transform: translate(-100%, 0) rotate(90deg);
    }
    37.5%, 50% {
      transform: translate(-100%, -100%) rotate(0deg);
    }
    62.5%, 75% {
      transform: translate(0, -100%) rotate(-90deg);
    }
    87.5%, 100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }

  #page-transition {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #26408b;
    z-index: 61;
    
  }
  #page-transition.room {
    background-color: #060c10;
  }
  #page-transition.room + #page-transition-after {
    background-color: #168dd9;
  }
  #page-transition.lato {
    background-color: #00c8e7;
  }
  #page-transition.lato + #page-transition-after {
    background-color: #292f43;
  }
  #page-transition.la-francesca {
    background-color: #d16335;
  }
  #page-transition.la-francesca + #page-transition-after {
    background-color: #ece6da;
  }
  #page-transition.sportland {
    background-color: #c62b2e;
  }
  #page-transition.sportland + #page-transition-after {
    background-color: #54a416;
  }
  #page-transition-after {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--orange);
    z-index: 61;
  }