html {
  scroll-behavior: smooth; }

html::before {
  z-index: -1;
  content: "";
  height: 100vh;
  width: 100vw;
  background-color: #000;
  position: fixed; }

/* Loading Overlay */
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  color: #fff;
  display: block;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }
  .overlay p {
    padding: 3rem 1rem 0;
    letter-spacing: 4px;
    font-size: 1.125em; }
  .overlay > div {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .overlay .loader,
  .overlay .loader:before,
  .overlay .loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out; }
  .overlay .loader {
    color: #ffffff;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s; }
    .overlay .loader:before, .overlay .loader:after {
      content: "";
      position: absolute;
      top: 0; }
    .overlay .loader:before {
      left: -3.5em;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s; }
    .overlay .loader:after {
      left: 3.5em; }

.dice-loader {
  display: flex;
  margin-top: 4rem;
  justify-content: center; }
  .dice-loader .face {
    display: flex;
    width: 3rem;
    height: 3rem;
    margin: 0 0.7rem;
    padding: 0.5rem;
    border-radius: 5px;
    opacity: 0; }
    @media screen and (max-width: 736px) {
      .dice-loader .face {
        width: 2.3rem;
        margin: 0 0.3rem; } }
  .dice-loader .face .dot {
    width: 0.8rem;
    height: 0.8rem;
    background: #F44336;
    border-radius: 50%; }
    @media screen and (max-width: 736px) {
      .dice-loader .face .dot {
        width: 0.6rem;
        height: 0.6rem; } }
  .dice-loader .face:nth-child(1) {
    border: 2px solid #F44336;
    -webkit-animation: waves 5s linear infinite;
    animation: waves 5s linear infinite; }
  .dice-loader .face:nth-child(1) .dot {
    background: #F44336; }
  .dice-loader .face:nth-child(2) {
    border: 2px solid #E91E63;
    -webkit-animation: waves 5s 0.2s linear infinite;
    animation: waves 5s 0.2s linear infinite; }
  .dice-loader .face:nth-child(2) .dot {
    background: #E91E63; }
  .dice-loader .face:nth-child(3) {
    border: 2px solid #9C27B0;
    -webkit-animation: waves 5s 0.4s linear infinite;
    animation: waves 5s 0.4s linear infinite; }
  .dice-loader .face:nth-child(3) .dot {
    background: #9C27B0; }
  .dice-loader .face:nth-child(4) {
    border: 2px solid #673AB7;
    -webkit-animation: waves 5s 0.6s linear infinite;
    animation: waves 5s 0.6s linear infinite; }
  .dice-loader .face:nth-child(4) .dot {
    background: #673AB7; }
  .dice-loader .face:nth-child(5) {
    border: 2px solid #3F51B5;
    -webkit-animation: waves 5s 0.8s linear infinite;
    animation: waves 5s 0.8s linear infinite; }
  .dice-loader .face:nth-child(5) .dot {
    background: #3F51B5; }
  .dice-loader .face:nth-child(6) {
    border: 2px solid #2196F3;
    -webkit-animation: waves 5s 1s linear infinite;
    animation: waves 5s 1s linear infinite; }
  .dice-loader .face:nth-child(6) .dot {
    background: #2196F3; }
  .dice-loader .first-face {
    justify-content: center;
    align-items: center; }
  .dice-loader .second-face {
    justify-content: space-between; }
  .dice-loader .second-face .dot:last-of-type {
    align-self: flex-end; }
  .dice-loader .third-face {
    justify-content: space-between; }
  .dice-loader .third-face .dot:nth-child(2) {
    align-self: center; }
  .dice-loader .third-face .dot:last-of-type {
    align-self: flex-end; }
  .dice-loader .fourth-face {
    justify-content: space-between; }
  .dice-loader .fourth-face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
  .dice-loader .fifth-face {
    justify-content: space-between; }
  .dice-loader .fifth-face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
  .dice-loader .fifth-face .column:nth-child(2) {
    justify-content: center; }
  .dice-loader .sixth-face {
    justify-content: space-between; }
  .dice-loader .sixth-face .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between; }

.show {
  opacity: 1;
  visibility: visible; }

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }

@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }

@-webkit-keyframes waves {
  0% {
    transform: translateY(0);
    opacity: 0; }
  4% {
    transform: translateY(-25px);
    opacity: 1; }
  8% {
    transform: translateY(0);
    opacity: 1; }
  70% {
    opacity: 0; } }

@keyframes waves {
  0% {
    transform: translateY(0);
    opacity: 0; }
  4% {
    transform: translateY(-25px);
    opacity: 1; }
  8% {
    transform: translateY(0);
    opacity: 1; }
  70% {
    opacity: 0; } }