.shadow-text {
  font-size: 10rem;
  position: relative;
  display: inline; }
  .shadow-text .foreground {
    z-index: 10;
    position: relative;
    font-weight: 700; }
  .shadow-text .shadow {
    background-image: url("/assets/img/3x3-dot.svg");
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 32px;
    text-align: center;
    color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    z-index: 9;
    position: absolute;
    left: 0.7rem;
    top: 0.7rem;
    text-shadow: none;
    font-weight: 700;
    white-space: nowrap; }
  .shadow-text.text-small .shadow,
  .shadow-text .text-normal .shadow {
    background-size: 14px;
    left: 0.5rem;
    top: 0.5rem; }
  .shadow-text.text-medium .shadow {
    background-size: 14px;
    left: 0.7rem;
    top: 0.5rem; }
  .shadow-text.text-large .shadow {
    background-size: 27px;
    left: 0.5rem;
    top: 0.4rem; }

p, span {
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8); }

.text-ultra-large {
  font-size: 7.5rem; }

.text-large {
  font-size: 5rem;
  line-height: 5.1rem; }

.text-medium {
  font-size: 2.4rem;
  line-height: 2.5rem; }

.text-normal {
  font-size: 1.6rem;
  line-height: 1.8rem; }

.text-small {
  font-size: 1.2rem;
  line-height: 1.3rem; }

.text-light {
  font-weight: 300; }

.text-bold {
  font-weight: 700; }

.text-green {
  color: #d5e830; }

.text-white {
  color: #fff; }

.text-red {
  color: #d30f32; }

.text-yellow {
  color: #ffed00; }

.text-caps {
  text-transform: uppercase; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.section-title {
  margin-bottom: 20px; }

.header-image {
  height: 95px;
  background-image: url("/assets/img/city-scape-scroll.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: cover;
  margin-bottom: 40px;
  margin-top: 10px; }

.square-box,
.pitch-box {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  z-index: -5;
  padding: 20px;
  margin: 20px; }

.square-box {
  height: 270px;
  background-image: url("/assets/img/square-box.png");
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

.footer-image {
  height: 95px;
  background-image: url("/assets/img/goal-line.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0; }

.display-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }

.display-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }

.no-margin {
  margin: 0; }

.select-dropdown {
  position: relative;
  background-color: #191b03;
  width: auto;
  float: left;
  max-width: 100%;
  border-radius: 2px; }
  .select-dropdown select {
    font-size: 1rem;
    font-weight: 200;
    max-width: 100%;
    padding: 8px 24px 8px 10px;
    border: none;
    background-color: #191b03;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: white; }
    .select-dropdown select:active, .select-dropdown select:focus {
      outline: none;
      box-shadow: none; }
  .select-dropdown:after {
    content: " ";
    position: absolute;
    top: 50%;
    margin-top: -2px;
    right: 8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #d5e830; }

.options-group {
  position: absolute;
  right: 2px;
  top: 2px; }
  .options-group .select-dropdown {
    position: relative;
    right: 0;
    top: 0; }
  .options-group .metric-links {
    text-align: center; }
    .options-group .metric-links a {
      background: #000;
      padding: 0 5px; }
    .options-group .metric-links a.selected {
      color: #d5e830;
      text-decoration: underline; }
    .options-group .metric-links a:hover {
      cursor: pointer; }

.error .options-group, .error .loading-screen, .error header {
  display: none; }

.share-buttons {
  margin-top: 25px; }

.twitter-share-button,
.fb-share-button {
  display: block;
  width: 50px;
  height: 50px; }

.fade-background-image {
  position: relative; }
  .fade-background-image::after {
    content: '';
    position: absolute;
    height: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-image: linear-gradient(rgba(0, 0, 0, 0), black); }
  .fade-background-image::before {
    content: '';
    position: absolute;
    height: 20px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-image: linear-gradient(black, rgba(0, 0, 0, 0)); }

.margin-top {
  margin-top: 50px; }

.margin-top-bottom {
  margin-bottom: 50px;
  margin-top: 20px; }

.loading-screen {
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: #000; }
  .loading-screen .loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; }
    .loading-screen .loading-content .image-wrapper {
      width: 500px;
      height: 100%;
      overflow: hidden; }
      .loading-screen .loading-content .image-wrapper .image-animation {
        background-image: url("/assets/img/city-scape-scroll.svg");
        background-repeat: repeat-x;
        background-size: 50%;
        height: 200px;
        width: 4000px;
        animation: slide 2.5s linear forwards; }

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(-750px, 0, 0); } }

section.download {
  margin-bottom: 0px;
  padding: 0; }

.download-buttons {
  display: flex;
  justify-content: center;
  align-items: center; }
  .download-buttons .apple-badge {
    padding: 0 11px; }

.ie .shadow-text .shadow {
  display: none; }

/* Vue.js hide unstyled content */
[v-cloak] {
  display: none; }

section.error-section {
  display: none; }

body.error section,
body.error .footer-image,
body.error .language-select {
  display: none; }

body.error section.error-section {
  display: block;
  margin-top: 40px; }

body.error [v-cloak] {
  display: block; }

html {
  font-size: 16px; }

body {
  background-color: #000;
  color: #fff;
  font-family: futura-pt, sans-serif;
  margin: 0; }

#app {
  max-width: 1024px;
  margin: 0 auto;
  overflow: visible; }

section {
  padding: 20px;
  overflow: hidden; }

section.initial-page {
  padding: 0; }

p {
  margin: 0 0 10px; }

.select-dropdown {
  position: absolute;
  right: 2px;
  top: 2px; }
  .select-dropdown select {
    font-size: 0.8rem; }

.share-section img {
  width: 100%; }

.share-buttons {
  display: flex;
  align-items: center;
  justify-content: center; }
  .share-buttons > * {
    margin: 0 20px; }

.profile-container .top {
  border: 5px dashed #d5e830;
  text-align: center;
  margin-left: 5%;
  margin-right: 5%;
  padding: 40px 20px; }
  .profile-container .top p {
    margin-bottom: 5%; }

.profile-container img {
  width: 100%;
  margin-top: -5px; }

@media screen and (min-width: 768px) {
  .select-dropdown {
    right: 20px;
    top: 20px; }
    .select-dropdown select {
      font-size: 1rem; }
  .options-group {
    right: 20px;
    top: 20px; } }

section {
  margin-bottom: 200px; }
  section.initial-page {
    padding-top: 40px;
    margin-bottom: 30px; }

.header-image {
  margin-bottom: 0; }

.initial-page {
  padding-top: 20px;
  background-image: url("/assets/img/ref-stuff-background.png");
  background-repeat: repeat;
  background-size: 200px;
  position: relative; }
  .initial-page .refsix-logo {
    height: 30px; }
  .initial-page .title {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    max-width: 270px; }
  .initial-page .intro {
    margin: 50px; }
  .initial-page .icons-group {
    display: flex;
    flex-direction: column; }
    .initial-page .icons-group img {
      width: 50px; }

@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

.top-5 {
  display: flex;
  flex-direction: row; }
  .top-5 .categories {
    flex: 1;
    padding: 10px;
    border-right: 2px #d5e830 solid;
    color: white; }
    .top-5 .categories p:hover {
      color: #d5e830;
      cursor: pointer; }
  .top-5 .categories-icons {
    display: none; }
  .top-5 .results {
    flex: 4;
    padding: 10px; }

.home-away-wins {
  display: flex;
  align-items: center;
  justify-content: center; }
  .home-away-wins .values {
    flex: 1; }
  .home-away-wins .graph {
    flex: 2;
    justify-content: center;
    display: flex;
    margin-bottom: 20px; }

.matches-total {
  justify-content: center;
  margin-bottom: 30px; }
  .matches-total img {
    width: 190px;
    height: 138px; }
  .matches-total .matches-string {
    align-self: flex-end; }

.matches-stats .matches-hour {
  flex: 1; }

.matches-stats .pitch-divider {
  flex: 1;
  display: flex;
  justify-content: center; }
  .matches-stats .pitch-divider img {
    margin-left: 25%;
    width: 200px;
    height: 300px; }

.matches-stats .average-cards {
  flex: 1; }
  .matches-stats .average-cards .cards img {
    width: 80px;
    height: 58px; }

.refsix-around-world {
  display: flex;
  flex-direction: row; }
  .refsix-around-world .referee {
    flex: 1; }
    .refsix-around-world .referee img {
      width: 70%; }
  .refsix-around-world .countries {
    flex: 2;
    align-items: center;
    display: flex;
    flex-direction: column; }
    .refsix-around-world .countries img {
      width: 100%; }

.busiest-group {
  display: flex;
  flex-direction: row; }
  .busiest-group .busiest-day {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 3rem; }
    .busiest-group .busiest-day .content {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin-top: 100px;
      padding-right: 23px; }
    .busiest-group .busiest-day img {
      width: 330px; }
  .busiest-group .busiest-days {
    flex: 1; }

.sin-bins-group .sin-bins {
  display: flex;
  flex-direction: row; }
  .sin-bins-group .sin-bins .content {
    flex: 4; }
  .sin-bins-group .sin-bins .sin-bin-image {
    flex: 1;
    display: flex;
    align-items: center; }
    .sin-bins-group .sin-bins .sin-bin-image img {
      width: 100%; }
  .sin-bins-group .sin-bins .sin-bin-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 3rem 0; }
    .sin-bins-group .sin-bins .sin-bin-row .image {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1; }
      .sin-bins-group .sin-bins .sin-bin-row .image.image-ball img {
        height: 75%; }
      .sin-bins-group .sin-bins .sin-bin-row .image.image-card img {
        height: 85%; }
    .sin-bins-group .sin-bins .sin-bin-row .shadow-text {
      margin-right: 2rem; }
    .sin-bins-group .sin-bins .sin-bin-row .text {
      flex: 4;
      display: flex;
      align-items: center; }
    .sin-bins-group .sin-bins .sin-bin-row img {
      width: 90%;
      max-height: 6rem; }

.distance-section {
  background-image: url("/assets/img/stars.svg");
  background-repeat: repeat;
  background-size: 20vh;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; }

.distance-graphic {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center; }
  .distance-graphic .moon {
    width: 10%; }
    .distance-graphic .moon img {
      width: 100%; }
  .distance-graphic .space {
    width: 60%;
    position: relative; }
  .distance-graphic .moon-stat {
    position: absolute;
    left: 50%;
    opacity: 0; }
  .distance-graphic .rocket-box {
    position: absolute;
    top: -15px;
    z-index: 10;
    right: 0;
    margin-right: -5%;
    background-color: black; }
  .distance-graphic .flame {
    width: 20px;
    position: absolute;
    right: -14px;
    top: 10px;
    opacity: 0; }
  .distance-graphic .rocket-trail {
    border-bottom: 2px dotted white;
    right: -5%;
    z-index: 9; }
  .distance-graphic .rocket-box,
  .distance-graphic .rocket-trail {
    position: absolute; }
  .distance-graphic .earth {
    width: 30%;
    position: relative; }
    .distance-graphic .earth img {
      width: 84%;
      margin: 8%; }
  .distance-graphic .runner-trail-wipe {
    transform: rotate(-90deg);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5; }
    .distance-graphic .runner-trail-wipe circle {
      stroke: black;
      stroke-width: 5;
      fill: none;
      stroke-dasharray: 314;
      /* equal to circumference of circle 2 * 3.14 * 50 */
      stroke-dashoffset: 0; }
  .distance-graphic .runner-trail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    transform: rotate(-97deg); }
    .distance-graphic .runner-trail circle {
      stroke: #d5e830;
      fill: none;
      stroke-dasharray: 6, 10;
      stroke-dashoffset: 5; }
  .distance-graphic .runner-box {
    position: absolute;
    top: -1%;
    bottom: -1%;
    left: -1%;
    right: -1%;
    text-align: center;
    z-index: 11; }
    .distance-graphic .runner-box img {
      margin: -15px 0 0;
      width: 30px;
      height: 30px;
      opacity: 0; }
  .distance-graphic .earth-stat {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0; }
    .distance-graphic .earth-stat p {
      text-shadow: 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 6px black, 0px 0px 6px black; }

.distance-section.aos-animate .moon-stat {
  animation-name: fade-in;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-delay: 1.6s; }

.distance-section.aos-animate .rocket-box {
  animation-name: rocket-fly; }

.distance-section.aos-animate .flame {
  animation-name: flame;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-delay: -0.1s; }

.distance-section.aos-animate .rocket-trail {
  animation-name: rocket-trail; }

.distance-section.aos-animate .rocket-box,
.distance-section.aos-animate .rocket-trail {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s; }

.distance-section.aos-animate .runner-trail-wipe circle {
  animation: wipe 1.5s linear 1;
  animation-delay: 2.3s;
  animation-fill-mode: forwards; }

.distance-section.aos-animate .runner-box {
  animation: spin-right 1.5s linear 1;
  animation-delay: 2.3s; }
  .distance-section.aos-animate .runner-box img {
    animation-name: fade-in;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-delay: 2.1s; }

.distance-section.aos-animate .earth-stat {
  animation-name: fade-in;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-delay: 3.6s; }

@keyframes wipe {
  0% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 314; } }

@keyframes spin-right {
  100% {
    transform: rotate(-360deg); } }

@keyframes rocket-fly {
  from {
    right: 0%;
    margin-right: -5%; }
  to {
    right: 100%;
    margin-right: -60px; } }

@keyframes rocket-trail {
  from {
    width: 0%; }
  to {
    width: 100%; } }

@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes flame {
  0%, 100% {
    opacity: 0; }
  5%, 95% {
    opacity: 1; } }

.injury-time-group {
  justify-content: space-around; }

.injury-time-container .top {
  border: 4px solid #d5e830;
  border-radius: 10px;
  text-align: center;
  padding: 10px;
  margin: 0 11% -7% 12%; }

.injury-time-container img {
  width: 100%; }

.cards-position-section .card {
  display: flex;
  justify-content: center;
  flex: 1; }
  .cards-position-section .card img {
    width: 70%; }

.cards-position-section .pitch {
  flex: 3;
  position: relative; }
  .cards-position-section .pitch img {
    display: flex;
    width: 100%; }
  .cards-position-section .pitch .pitch-frame {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5; }

.cards-position-section .card-pitch-position {
  position: relative;
  width: 100%; }

.cards-position-section .position-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: calc(100% - 2px);
  padding-top: 1px; }
  .cards-position-section .position-text .position p.text-medium {
    font-size: 2rem; }
  .cards-position-section .position-text.align-right {
    left: auto;
    right: 0; }

.cards-position-section .yellow .position {
  background-color: #ffed00; }

.cards-position-section .red .position {
  background-color: #d30f32; }

.cards-position-section .display-row {
  width: 100%;
  height: 100%;
  justify-content: space-around; }

.cards-position-section .position {
  flex: 1;
  color: #fff;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.25); }
  .cards-position-section .position p {
    text-shadow: 1px 1px 5px #000000, 1px 1px 5px #000000, 1px 1px 5px #000000; }

.profile-container {
  max-width: 400px;
  margin: 0 auto; }

#refsixMap {
  width: 100%;
  height: 500px; }

.refsix-marker {
  background-image: url("/assets/img/refsix-round-icon.png");
  background-size: cover;
  width: 40px;
  height: 40px; }

.mapboxgl-ctrl-attrib .mapbox-improve-map,
.mapboxgl-ctrl-bottom-left {
  display: none; }

.youtube-embed {
  width: calc(100vw - 40px);
  height: calc((100vw - 40px) / 1.77); }

@media screen and (min-width: 1024px) {
  .youtube-embed {
    width: 984px;
    height: 554px; } }

@media screen and (max-width: 767px) {
  body {
    font-size: 14px; }
  section {
    margin-bottom: 30px; }
  .text-ultra-large.number-of-matches {
    font-size: 6.6rem; }
  .refsix-around-world .referee {
    display: none; }
  section.distance-section {
    padding: 40px 5px; }
  .distance-graphic .moon {
    width: 15%; }
  .distance-graphic .space {
    width: 35%; }
    .distance-graphic .space .moon-stat {
      left: initial; }
  .distance-graphic .earth {
    width: 50%; }
  .top-5 {
    display: flex;
    flex-direction: column; }
    .top-5 .categories {
      display: none; }
    .top-5 .categories-icons {
      display: block;
      margin: 0 auto; }
      .top-5 .categories-icons img {
        width: 70px;
        height: 48px;
        opacity: 0.4;
        padding: 5px;
        border-bottom: transparent 2px solid; }
      .top-5 .categories-icons img:hover {
        opacity: 1;
        cursor: pointer; }
      .top-5 .categories-icons img.selected {
        opacity: 1;
        border-bottom: #d5e830 2px solid; }
  .matches-total img {
    display: none; }
  .matches-total p {
    font-size: 3.5rem; }
  .matches-stats {
    flex-direction: column; }
    .matches-stats .pitch-divider img {
      margin-left: 0;
      width: 200px;
      height: 300px; }
  .refsix-around-world {
    flex-direction: column; }
  .busiest-group {
    flex-direction: column; }
  .home-away-group p {
    font-size: 1.3rem; }
  .home-away-group .graph {
    flex: 3; }
  .cards-position-section .position-text .position p.text-medium {
    font-size: 1.5rem; }
  .cards-position-section .card {
    display: none; }
  .home-away-group p {
    line-height: 1.3rem; }
  .sin-bins-group .sin-bins .sin-bin-image {
    display: none; }
  .sin-bins-group .sin-bins .sin-bin-row {
    flex-direction: column; }
    .sin-bins-group .sin-bins .sin-bin-row .shadow-text {
      margin: 0; }
    .sin-bins-group .sin-bins .sin-bin-row .image img,
    .sin-bins-group .sin-bins .sin-bin-row .image.image-ball img,
    .sin-bins-group .sin-bins .sin-bin-row .image.image-card img {
      width: auto;
      height: 4rem; }
    .sin-bins-group .sin-bins .sin-bin-row .text {
      display: flex;
      flex-direction: column;
      text-align: center; }
  .distance-graphic .moon-stat {
    margin-top: 20px; }
  .distance-graphic .rocket-trail {
    border-bottom: 2px dotted white;
    right: -15%;
    z-index: 9; }
  #refsixMap {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    height: 400px; } }

.ie .distance-section.aos-animate * {
  animation: none !important; }

.ie .distance-section.aos-animate .earth-stat,
.ie .distance-section.aos-animate .moon-stat,
.ie .distance-section.aos-animate .runner-box img {
  opacity: 1; }

.ie .distance-section.aos-animate .runner-trail-wipe {
  display: none; }

.ie .distance-section.aos-animate .rocket-trail {
  width: 100%; }

.ie .distance-section.aos-animate .rocket-box {
  right: 100%;
  margin-right: -60px; }