/* Pre-load Fonts Locally */

@font-face {
  font-family: 'Bebas';
  src: url('assets/fonts/bebas-neue-regular.ttf');
}

@font-face {
  font-family: 'Bebas-Bold';
  src: url('assets/fonts/bebas-neue-bold.ttf');
}

@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/lato-Thin.ttf');
}

@font-face {
  font-family: 'Lato-Light';
  src: url('assets/fonts/lato-regular.ttf');
}

@font-face {
  font-family: 'SourceSans';
  src: url('assets/fonts/source-sans-pro.ttf');
}

@font-face {
  font-family: 'SourceSans-Light';
  src: url('assets/fonts/source-sans-pro-light.ttf');
}

@font-face {
  font-family: 'GoRoutIcons';
  src: url('assets/fonts/gorout-icons.ttf');
}

/* Splash Page Body */

html,
body {
  position: fixed;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Resets */

*,
*:after,
*:before {
  box-sizing: border-box;
}

/* Helper classes */

.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}

.clearfix:after {
  clear: both;
}

body,
div.splash {
  margin: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  background: linear-gradient(rgba(24, 27, 34, 1), rgba(23, 27, 38, 1));
  background-size: 200%;
  background-size: cover;
  background-position: 0 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-background-size: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  overflow: hidden;
  z-index: 999;
}

body,
div.splash {
  background: linear-gradient(rgba(24, 27, 34, 1), rgba(23, 27, 38, 1));
  background-image: linear-gradient(-45deg, rgba(24, 27, 34, 1), rgba(23, 27, 38, 1), rgba(23, 27, 38, 1) 20%, rgba(24, 27, 34, 1) 80%);
  background-size: 300%;
  background-position: 0 0;
  animation-duration: 22s;
  animation-iteration-count: infinite;
  animation-name: gradients;
  overflow: hidden;
}

body.light,
body.light div.splash {
  background: linear-gradient(rgba(200, 200, 200, 1), rgba(224, 224, 224, 1));
  background-image: linear-gradient(-45deg, rgba(224, 224, 224, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 20%, rgba(224, 224, 224, 1) 80%);
}

div.splash {
  opacity: 0;
}

.splash-container {
  position: absolute;
  left: 50%;
  top: 45%;
  height: auto;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

body.ready div.splash {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  transition: max-height 500ms ease-in-out;
  -webkit-transition: max-height 500ms ease-in-out;
}

body.ready img.splash {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 1;
  width: 255px;
  min-width: 255px;
  animation: zoom-in-zoom-out 1750ms ease infinite;
}

body.light img.splash,
body.ready.light img.splash {
  width: 225px;
  min-width: 225px;
}

@media only screen and (max-width: 480px) {

  body.ready img.splash {
    width: 200px;
    min-width: 200px;
  }

  body.light img.splash,
  body.ready.light img.splash {
    width: 175px;
    min-width: 175px;
  }

}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.25, 1.25);
  }

  100% {
    transform: scale(1, 1);
  }
}

flt-glass-pane {
  visibility: hidden;
  opacity: 0;
}

body.loaded flt-glass-pane {
  visibility: visible;
  opacity: 1;
  transition: opacity 1500ms ease-in-out;
  -webkit-transition: opacity 1500ms ease-in-out;
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
}

body.loaded div.splash {
  opacity: 0;
  transition: opacity 800ms ease-out;
  -webkit-transition: opacity 800ms ease-out;
}

/* IOS Safe Area Fixes */

body,
html,
div.splash,
flt-glass-pane {
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant (safe area inset bottom);
  padding-bottom: env(safe area inset bottom);
}