@charset "UTF-8";

@font-face {
  font-family: "Burbank Small Bold";
  font-style: normal;
  font-display: swap;
  src: url("/journey/fonts/Burbank-Small.887fc8ca.woff") format("woff");
}
@font-face {
  font-family: "Burbank Small Medium";
  font-style: normal;
  font-display: swap;
  src: url("/journey/fonts/BurbankSmall-Medium.bb8ea9fb.woff") format("woff");
}
@font-face {
  font-family: "Burbank Small Light";
  font-style: normal;
  font-display: swap;
  src: url("/journey/fonts/BurbankSmall-Light.ec42628f.woff") format("woff");
}
@font-face {
  font-family: CCComicrazy;
  font-style: normal;
  font-display: swap;
  src: url("/journey/fonts/CCComicrazy_Italic.86bfeb70.woff") format("woff");
}

:root {
  --rounded: "Burbank Small Bold", "Arial Rounded MT Bold", sans-serif;
  --body: "Burbank Small Medium", Arial, sans-serif;
}
html, body {
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: normal;
  color: #fff;
  background: #206fbb;
  background-size: cover;
}
a { text-decoration: none; }
h1, h2, h3 { font-family: var(--rounded); font-weight: 700; }

/* Original header art and geometry; the name and links belong to Boreal. */
.site-header {
  position: relative;
  z-index: 2;
  margin-bottom: -17px;
  background: transparent url("/journey/media/topbar.png") center / auto 100% repeat-x;
}
.header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 1124px;
  margin: 0 auto;
}
.header-logo, .header-buttons { flex: 1 1 0; padding: 16px; }
.header-logo { text-align: right; }
.brand {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
  height: 75.296875px;
  line-height: 1;
  text-decoration: none;
  filter: drop-shadow(0 0 2px #53ccf9);
  transition: filter .2s;
}
.brand:hover { filter: drop-shadow(0 0 5px #53ccf9); }
.brand-logo-window {
  position: relative;
  display: block;
  flex: none;
  width: 150px;
  height: 56px;
  overflow: hidden;
}
.brand-logo-window .brand-logo {
  position: absolute;
  width: 358.8px;
  height: 358.8px;
  max-width: none;
  left: -119.8px;
  top: -71.1px;
  object-fit: initial;
}
.brand-refugio {
  margin-top: -1px;
  font-family: CCComicrazy, var(--rounded);
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 20px;
  color: #fff;
  -webkit-text-stroke: 3px #001629;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #001629;
}
.header-menu {
  flex: 3 1 0;
  text-align: center;
  align-self: center;
  margin-bottom: 35px;
  position: static;
}
.main-navigation {
  position: relative;
  z-index: 1002;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 16px;
}
.main-navigation > a, .main-navigation > button, .about-toggle {
  display: inline-block;
  margin: 0 16px;
  padding: 0;
  color: #fff;
  font-family: var(--rounded);
  font-size: 16px;
  line-height: normal;
  font-weight: normal;
  white-space: nowrap;
  background: transparent;
  text-decoration: none;
  text-shadow: 0 0 10px #53ccf9;
  transition: text-shadow .15s ease-in-out;
}
.main-navigation > a:hover, .main-navigation > button:hover, .about-toggle:hover {
  text-shadow: 0 0 15px #53ccf9;
}
.nav-about { position: relative; }
.about-toggle::after {
  content: "▼";
  display: inline-block;
  margin-left: 5px;
  font-size: .7em;
  vertical-align: middle;
}
.about-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  padding: 8px 0;
  background: #2b78b1;
  border-radius: 4px;
  box-shadow: 0 2px 5px #0003;
  z-index: 1002;
}
.about-dropdown > button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-family: var(--rounded);
  font-size: 16px;
  text-align: center;
  color: #fff;
  background: transparent;
}
.about-dropdown > button:hover { background: #3288c1; }
.header-tagline {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 1em;
  font-family: var(--body);
  font-weight: normal;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  z-index: 1001;
  color: #fff;
  opacity: 1;
  transition: opacity .5s ease;
}
.header-tagline.announcement-fade { opacity: 0; }
.header-tagline:hover { color: #ff9a00; text-decoration: underline; }
.play-button {
  position: relative;
  z-index: 1;
  display: block;
  width: 160px;
  padding: 15px 2px;
  border: 1px solid #0b3864;
  border-radius: 17px;
  background-image: linear-gradient(180deg, #539fd8, #1356a2, #2f88cc);
  box-shadow: inset 2px 0 0 0 #4fc3f3, 0 1px 0 1.25px #13497d, -2px -1px 0 1.5px #04347a, 1px 2px 0 2px #53ccf9;
  color: #fff;
  font-family: CCComicrazy, var(--rounded);
  font-size: 22px;
  line-height: 24px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.play-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  background-image: linear-gradient(180deg, #2270b5, #0b52a9);
  box-shadow: inset 2px 0 0 0 #4fc3f3;
  opacity: 0;
  transition: opacity .15s;
}
.play-button:hover::before { opacity: 1; }
.play-text {
  position: relative;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  -webkit-text-stroke: 6px #000;
}
.play-outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  -webkit-text-stroke: 0;
}
.mobile-menu { display: none; }

.journey-island {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 400px;
  min-height: 400px;
  margin-bottom: 50px;
  /* Match the native noScale movie before the iframe/runtime is available. */
  background: #206fbb url("/journey/media/homepage-desktop.e2fb31de.jpg") center top / 2050px 400px no-repeat;
}
.journey-island iframe {
  display: block;
  width: 100%;
  max-width: 2050px;
  height: 100%;
  border: 0;
  background: transparent;
}
.scene-fallback {
  position: absolute;
  inset: auto 20px 20px;
  margin: 0;
  padding: 12px;
  text-align: center;
  color: #fff;
  background: #0059a3;
  border-radius: 8px;
}
.content-wrap { position: relative; width: 95%; max-width: 1024px; margin: 0 auto; padding: 24px; }
.classic-promos {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  padding: 10px;
  margin: 20px auto;
  background: #22a0ee;
  border-radius: 15px;
  overflow: hidden;
}
.classic-promo {
  flex: 0 0 calc(20% - 8px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 310.78125px;
  padding: 15px;
  margin: 0;
  background: #22a0ee;
}
.promo-art { flex: none; width: 150px; margin-bottom: 10px; }
.promo-art img { display: block; width: 100%; height: auto; max-width: 100%; }
.promo-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 8px 0;
}
.classic-promo h2 { margin: 0 0 8px; padding: 0; color: #fff; font-size: 18px; line-height: 1.2; text-align: center; }
.classic-promo p {
  margin: 0 0 auto;
  color: #fff;
  font-family: "Burbank Small Light", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}
.promo-button {
  display: inline-block;
  align-self: center;
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px solid #176e91 !important;
  border-radius: 15px;
  color: #fff;
  background: #00b7ff;
  font-size: 12px;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  transition: background .2s;
}
.promo-button:hover { background: #0095d1; }
.news-section { margin: 20px auto 40px; max-width: 900px; }

.site-footer {
  position: relative;
  top: -20px;
  z-index: 50;
  clear: both;
  height: 140px;
  width: 100%;
  background: url("/journey/media/ftr_repeat.0a5391b1.png") repeat-x;
}
.footer-scene {
  position: relative;
  height: 140px;
  width: 100%;
  background: url("/journey/media/ftr_bg.c6db244f.png") center top no-repeat;
  margin: 0 auto;
  color: #fff;
  font-family: var(--body);
  font-size: 13.6px;
}
.footer-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
  padding-top: 15px;
}
.footer-logo { flex: none; width: 160px; text-align: center; }
.footer-logo .brand { width: 100px; height: 50.2px; }
.footer-logo .brand-logo-window { width: 100px; height: 37.33px; }
.footer-logo .brand-logo { width: 239.2px; height: 239.2px; left: -79.87px; top: -47.4px; }
.footer-logo .brand-refugio { font-size: 12px; line-height: 13.33px; letter-spacing: 1.33px; -webkit-text-stroke-width: 2px; }
.footer-middle { flex: 3 1 0; max-width: 720px; padding: 0 24px; }
.footer-middle nav { margin: 10px 0; text-align: center; }
.footer-middle nav button {
  display: inline-block;
  padding: 0 8px 10px;
  background: transparent;
  color: #fff;
  font-family: var(--body);
  font-size: 12px;
  text-decoration: none;
}
.footer-middle nav button:not(:last-child)::after { content: "|"; display: inline-block; margin-left: 16px; color: #000; }
.footer-middle nav button:hover { color: #ff9a00; text-decoration: underline; }
.footer-disclaimer { margin: 0 0 -5px; text-align: center; font-size: 9.6px; }
.footer-copyright { margin: 0; padding-top: 16px; text-align: center; font-size: 9.6px; }
.footer-social { flex: none; display: flex; align-items: center; justify-content: center; text-align: center; }
.footer-social button, .footer-social a { display: inline-block; flex: none; margin: 0 8px; padding: 0; color: #fff; background: transparent; }
.footer-social img { display: block; width: 24px; height: 24px; filter: invert(98%) sepia(33%) saturate(164%) hue-rotate(158deg) brightness(114%) contrast(100%); }

@media (max-width: 991px) {
  .classic-promos { flex-direction: column; }
  .classic-promo { flex: none; flex-direction: row; min-height: 0; width: 100%; }
  .promo-copy { align-self: stretch; }
}
@media (max-width: 920px) {
  .site-header { margin-bottom: 0; background: linear-gradient(#185faa, #13549c, #1960ab); }
  .header-inner { width: auto; flex-direction: column; }
  .header-menu { align-self: center; }
  .main-navigation { margin: 0; }
  .main-navigation > a, .main-navigation > button, .about-toggle { margin-top: 5px; }
  .header-tagline { display: none; }
}
@media (max-width: 768px) {
  .header-inner { padding: 10px; }
  .header-logo { margin-bottom: 10px; }
  .header-menu { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .mobile-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    align-self: center;
    width: 50px;
    height: 44px;
    margin: 0 auto;
    padding: 10px;
    background: transparent;
    z-index: 1003;
  }
  .mobile-menu span { display: block; width: 100%; height: 3px; border-radius: 2px; background: #fff; transition: transform .3s; }
  .main-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; width: 100%; padding: 0; background: #2b78b1; z-index: 1002; }
  .main-navigation.is-open { display: flex; flex-direction: column; }
  .main-navigation > a, .main-navigation > button, .about-toggle { display: block; width: 100%; margin: 0; padding: 15px 0; text-align: center; font-family: var(--rounded); font-size: 17.6px; border-bottom: 1px solid #13497d !important; }
  .main-navigation > a:hover, .main-navigation > button:hover, .about-toggle:hover { background: #3288c1; }
  .nav-about { width: 100%; }
  .about-dropdown { position: static; transform: none; padding: 0; width: 100%; border-radius: 0; box-shadow: none; background: #1960ab; }
  .about-dropdown > button { padding: 15px 20px; font-size: 17.6px; border-bottom: 1px solid #13497d !important; }
  .about-dropdown > button:hover { background: #2470bd; }
  .content-wrap { width: 100%; }
}
@media (max-width: 650px) {
  .journey-island { height: 240px; min-height: 240px; margin-bottom: 20px; background-image: url("/journey/media/island.c17446d0.png"); background-position: center; background-size: 100%; }
  .journey-island iframe { display: none; }
}
@media (max-width: 540px) {
  .footer-inner { flex-direction: column; row-gap: 15px; }
  .footer-logo { display: none; }
}
@media (max-width: 500px) {
  .journey-island { background-size: cover; }
}
@media (max-width: 470px) {
  .classic-promo { flex-direction: column; }
  .promo-art { width: 70%; }
  .promo-copy { padding: 15px 0 0; }
}
@media (max-width: 420px) {
  .footer-middle { padding: 16px 0; }
}