/* 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: '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;
}

body.ready .splash {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 1;
  width: 255px;
  min-width: 255px;
}

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

.container.cover {
  width: 100%;
  height: 100vh;
  text-align: center;
  display: block;
  position: fixed;
  z-index: 100;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.play-spinner {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: 60px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 9000;
}

.spinner-one {
  stroke: rgba(255, 153, 0, 0.85);
  stroke-width: 2;
}

.spinner-two {
  stroke: rgba(155, 155, 155, 0.85);
  stroke-width: 2;
}

body.light .spinner-one {
  stroke: rgba(255, 153, 0, 1);
  stroke-width: 2;
}

body.light .spinner-two {
  stroke: rgba(185, 185, 185, 0.45);
  stroke-width: 2;
}

.play-spinner img { 
  position: fixed;
  top: 50%;
  left: 50%;
  width: 38px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 12000;
}

@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);
}

/* Updates for Loading Screen */


/* Loadng Screen */

.site-loader {
  position: fixed;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  color: #000000;
  font-family: 'SourceSans';
  box-sizing: border-box;
  background-color: #161a22;
  -webkit-transition: transform 800ms cubic-bezier(0.19, 1, 0.56, 1);
  -moz-transition: transform 800ms cubic-bezier(0.19, 1, 0.56, 1);
  -ms-transition: transform 800ms cubic-bezier(0.19, 1, 0.56, 1);
  -o-transition: transform 800ms cubic-bezier(0.19, 1, 0.56, 1);
  transition: transform 800ms cubic-bezier(0.19, 1, 0.56, 1);
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999995200;
}

.site-loader.show {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

body.preload .site-loader .site-loader-container {
  opacity: 0;
  visibility: hidden;
}

.site-loader .site-loader-container {
  visibility: visible;
  animation-duration: 0.675s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

.site-loader .site-loader-spinner {
  position: fixed;
  left: 50%;
  top: 50%;
  min-width: 400px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  opacity: 1;
  z-index: 1;
}

.site-loader-spinner svg {
  margin-top: -155px;
  margin-left: -100px;
  opacity: 0.80;
}

.site-loader-spinner .loading-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 58px;
  margin-left: 2px;
  margin-top: -68px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
}

.site-loader.show .site-loader-spinner .loading-logo {
  visibility: visible;
  animation-duration: 0.7s;
  animation-delay: 0.2s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

.site-loader .loading-text {
  display: block;
  position: relative;
  font-family: 'Arial';
  font-size: 0.825rem;
  letter-spacing: 0.625rem;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  text-align: center;
  margin: 0 auto;
  top: -80px;
  height: 80px;
  opacity: 0;
  visibility: hidden;
  animation: none;
  z-index: 999;
}

body.authorizing .site-loader .loading-text {
  font-size: 8px;
  letter-spacing: 0.225rem;
  color: rgba(255, 255, 255, 0.35);
  animation: pulse 3600ms infinite;
  animation-fill-mode: both;
}

.site-loader .loading-text.show {
  visibility: visible;
  animation-duration: 0.7s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

.site-loader-spinner.open {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 500ms;
  -webkit-transition-delay: 0s, 500ms;
  -webkit-transition: opacity 500ms linear, visibility 0s linear 500ms;
  -moz-transition: opacity 500ms linear, visibility 0s linear 500ms;
  -ms-transition: opacity 500ms linear, visibility 0s linear 500ms;
  -o-transition: opacity 500ms linear, visibility 0s linear 500ms;
  transition: opacity 500ms linear, visibility 0s linear 500ms;
}

.branding-logo {
  position: absolute;
  left: 65px;
  top: 50px;
  width: 125px !important;
  height: auto !important;
  opacity: 0.10;
}

.season-indicator {
  position: fixed;
  left: 65px;
  bottom: 48px;
  font-size: 46px;
  color: #DEDEDE;
  opacity: 0.15;
}

.season {
  position: relative;
  font-size: 16px;
}

.year {
  display: inline-block;
}

.play-icons {
  position: absolute;
  top: -10vh;
  left: -10px;
  text-align: center;
  font-size: 55vw;
  margin: 0 auto;
  opacity: 0.075;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.hashtag {
  display: none;
  position: absolute;
  right: 28px;
  bottom: 28px;
  font-size: 16px;
  font-style: italic;
  color: #DEDEDE;
  opacity: 0.35;
}

/* YardLines Backdrop */

.yardlines {
  position: fixed;
  display: block;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: no-repeat url("../img/yardlines.png");
  background-position: top 0px right 0px;
  background-size: cover;
  opacity: 0.85;
  z-index: 99999999999;
}

/* Animated Spinner */

.load-container.cover {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 95200;
  color: rgba(255,255,255,0.60);
  box-sizing: border-box;
  background-color: rgba(30, 31, 37, 0.80);
  visibility: visible !important;
  opacity: 1 !important;
}

.load-spinner {
  position: fixed;
  top: 47.5%;
  left: 50%;
  display: block;
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 999;
}

.load-spinner .spinner-one {
  stroke: rgba(255, 153, 0, 0.85);
  stroke-width: 1;
}

.load-spinner .spinner-two {
  stroke: rgba(155, 155, 155, 0.85);
  stroke-width: 1;
}

.load-spinner img { 
  position: fixed;
  top: 50%;
  left: 50%;
  width: 38px;
  margin-top: -2px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 12000;
}


/* CSS Animations */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.35; }
	100% { opacity: 1; }
}
@-moz-keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.35; }
	100% { opacity: 1; }
}
@-o-keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.35; }
	100% { opacity: 1; }
}
@-ms-keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.35; }
	100% { opacity: 1; }
}
@keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.35; }
	100% { opacity: 1; }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(.97, .97, .97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}