/* DO NOT EDIT THIS FILE ============================================= */
/* The component file is built from the template and so is gitignore'd */
@font-face {
  font-family: "glyphs-2025-05-31T13-10";
  src: url("./glyphs-2025-05-31T13-10.eot");
  src: url("./glyphs-2025-05-31T13-10.eot?#iefix") format("eot"), url("./glyphs-2025-05-31T13-10.woff2") format("woff2"), url("./glyphs-2025-05-31T13-10.woff") format("woff"), url("./glyphs-2025-05-31T13-10.ttf") format("truetype"), url("./glyphs-2025-05-31T13-10.svg#glyphs-2025-05-31T13-10") format("svg");
}
.site-nav nav ul li.support a i:before, .site-nav nav ul li.info a i:before, .site-nav nav ul li.archive a i:before, .site-nav nav ul li.my-location a i:before, .site-nav nav ul li.main a i:before, [data-react-component=sky-map] .data-monitor b.planes-seen i:before, .runway .runway-scroll .runway-segment .runway-hour .plane:before, .runway .runway-scroll .runway-segment .block-info .announcement:before, aside#header span.my-location button.target b:before, .glyph-target:before, .glyph-plane:before, .glyph-nav-support-icon:before, .glyph-nav-plane-icon:before, .glyph-nav-near-icon:before, .glyph-nav-info-icon:before, .glyph-nav-archive-icon:before, .glyph-b777:before, .glyph-announce:before {
  font-family: "glyphs-2025-05-31T13-10";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.glyph-announce:before {
  content: "\e001";
}

.glyph-b777:before {
  content: "\e002";
}

.glyph-nav-archive-icon:before {
  content: "\e003";
}

.glyph-nav-info-icon:before {
  content: "\e004";
}

.glyph-nav-near-icon:before {
  content: "\e005";
}

.glyph-nav-plane-icon:before {
  content: "\e006";
}

.glyph-nav-support-icon:before {
  content: "\e007";
}

.glyph-plane:before {
  content: "\e008";
}

.glyph-target:before {
  content: "\e009";
}

:root {
  --color-westerly: #222222;
  --color-easterly: hsl(198,81%,60%);
  --color-uncertain: #666;
  --color-yellow:	#fc0;
  --color-white: rgb(255,255,255);
  --color-black: #222222;
  --color-super-black: #000000;
  --font-sans-condensed: "IBM Plex Sans Condensed", sans-serif;
  --font-sans:"IBM Plex Sans", sans-serif;
  --font-serif: "IBM Plex Serif", serif;
  --color-runway: #615e59;
  --color-runway-current: #5b5b5b;
  --color-runway-past: #000;
  --color-runway-future: #383838;
  --color-runway-selected: var(--color-easterly);
  --color-runway-quiet: #a39a9a;
  --color-sunburn: #b0762f;
  --color-dawny: #a2bfc4;
  --color-dusky: #454545;
  --color-night: #252525;
  --color-primary-cs-h: 212;
  --color-primary-cs-s: 56%;
  --color-primary-cs-l: 51%;
  --color-primary-cs-ll: 56%;
  --color-clear-sky: hsl(var(--color-primary-cs-h),var(--color-primary-cs-s),var(--color-primary-cs-l));
  --color-clear-sky-light:hsl(var(--color-primary-cs-h),var(--color-primary-cs-s),var(--color-primary-cs-ll));
  --color-primary-bc-h: 209;
  --color-primary-bc-s: 65%;
  --color-primary-bc-l: 31%;
  --color-primary-bc-ll: 24%;
  --color-clouds-bkn: hsl(var(--color-primary-bc-h),var(--color-primary-bc-s),var(--color-primary-bc-l));
  --color-clouds-bkn-light: hsl(var(--color-primary-bc-h),var(--color-primary-bc-s),var(--color-primary-bc-ll));
  --color-primary-sc-h: 210;
  --color-primary-sc-s: 48%;
  --color-primary-sc-l: 59%;
  --color-primary-sc-ll: 64%;
  --color-clouds-sct: hsl(var(--color-primary-sc-h),var(--color-primary-sc-s),var(--color-primary-sc-l));
  --color-clouds-sct-light:hsl(var(--color-primary-sc-h),var(--color-primary-sc-s),var(--color-primary-sc-ll));
  --color-primary-oc-h: 206;
  --color-primary-oc-s: 18%;
  --color-primary-oc-l: 55%;
  --color-primary-oc-ll: 61%;
  --color-clouds-ovc: hsl(var(--color-primary-oc-h),var(--color-primary-oc-s),var(--color-primary-oc-l));
  --color-clouds-ovc-light:hsl(var(--color-primary-oc-h),var(--color-primary-oc-s),var(--color-primary-oc-ll));
  --color-primary-fc-h: 210;
  --color-primary-fc-s: 85%;
  --color-primary-fc-l: 32%;
  --color-primary-fc-ll: 34%;
  --color-clouds-few: hsl(var(--color-primary-fc-h),var(--color-primary-fc-s),var(--color-primary-fc-l));
  --color-clouds-few-light:hsl(var(--color-primary-fc-h),var(--color-primary-fc-s),var(--color-primary-fc-ll));
  --color-primary-r-h: 207;
  --color-primary-r-s: 14%;
  --color-primary-r-l: 52%;
  --color-primary-r-ll: 44%;
  --color-rain: hsl(var(--color-primary-r-h),var(--color-primary-r-s),var(--color-primary-r-l));
  --color-rain-light:hsl(var(--color-primary-r-h),var(--color-primary-r-s),var(--color-primary-r-ll));
  --color-selected: var(--color-runway-selected);
  --color-night-background: hsla(212,0%,100%,5%);
  --max-width: 1330px;
  --min-width: 600px;
  --border-radius:0.25rem;
}

html, body, div[data-route] {
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-size: 16px;
  margin: 0;
  padding: 0;
  position: relative;
  font-family: "Walsheim-Regular", helvetica, arial, sans-serif;
}

[data-react-component] {
  max-width: var(--max-width);
  margin: 0 auto;
}

.overlay {
  position: fixed;
  top: 0;
  background-color: transparent;
  height: 100vh;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  transition: background-color 0.25s ease-in-out;
  z-index: -1;
}

footer {
  position: relative;
  padding: 1rem 1rem 6.5rem 1rem;
  text-align: center;
}
footer svg {
  margin-left: auto;
  margin-right: auto;
}

@-webkit-keyframes bg-move {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bg-move {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.bg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 75vh;
  overflow: hidden;
}
.bg .inside-bg {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  -webkit-animation: bg-move 35s ease-in infinite;
  animation: bg-move 35s ease-in infinite;
}

body {
  background-color: var(--color-clouds-bkn);
}
body .bg .inside-bg {
  background-image: url(/bg/clouds-bkn-top.jpg);
}
body .runway-calendar .day-container {
  background-color: var(--color-clouds-bkn-light);
}
body .explain {
  background-color: var(--color-clouds-bkn-light);
}

[data-weather=clouds-bkn] {
  background-color: var(--color-clouds-bkn);
}

[data-planes="0"][data-weather=clouds-bkn] .bg .inside-bg {
  background-image: url(/bg/clouds-bkn-top.jpg);
}

[data-weather=clouds-bkn] .bg .inside-bg {
  background-image: url(/bg/clouds-bkn-top-plane.jpg);
}

[data-weather=clouds-bkn] .runway-calendar .day-container {
  background-color: var(--color-clouds-bkn-light);
}

[data-weather=clouds-bkn] .explain {
  background-color: var(--color-clouds-bkn-light);
}

[data-weather=clear-sky] {
  background-color: var(--color-clear-sky);
}

[data-planes="0"][data-weather=clear-sky] .bg .inside-bg {
  background-image: url(/bg/clear-sky-top.jpg);
}

[data-weather=clear-sky] .bg .inside-bg {
  background-image: url(/bg/clear-sky-top-plane.jpg);
}

[data-weather=clear-sky] .runway-calendar .day-container {
  background-color: var(--color-clear-sky-light);
}

[data-weather=clear-sky] .explain {
  background-color: var(--color-clear-sky-light);
}

[data-weather=clouds-sct] {
  background-color: var(--color-clouds-sct);
}

[data-planes="0"][data-weather=clouds-sct] .bg .inside-bg {
  background-image: url(/bg/clouds-sct-top.jpg);
}

[data-weather=clouds-sct] .bg .inside-bg {
  background-image: url(/bg/clouds-sct-top-plane.jpg);
}

[data-weather=clouds-sct] .runway-calendar .day-container {
  background-color: var(--color-clouds-sct-light);
}

[data-weather=clouds-sct] .explain {
  background-color: var(--color-clouds-sct-light);
}

[data-weather=clouds-ovc] {
  background-color: var(--color-clouds-ovc);
}

[data-planes="0"][data-weather=clouds-ovc] .bg .inside-bg {
  background-image: url(/bg/clouds-ovc-top.jpg);
}

[data-weather=clouds-ovc] .bg .inside-bg {
  background-image: url(/bg/clouds-ovc-top-plane.jpg);
}

[data-weather=clouds-ovc] .runway-calendar .day-container {
  background-color: var(--color-clouds-ovc-light);
}

[data-weather=clouds-ovc] .explain {
  background-color: var(--color-clouds-ovc-light);
}

[data-weather=clouds-few] {
  background-color: var(--color-clouds-few);
}

[data-planes="0"][data-weather=clouds-few] .bg .inside-bg {
  background-image: url(/bg/clouds-few-top.jpg);
}

[data-weather=clouds-few] .bg .inside-bg {
  background-image: url(/bg/clouds-few-top-plane.jpg);
}

[data-weather=clouds-few] .runway-calendar .day-container {
  background-color: var(--color-clouds-few-light);
}

[data-weather=clouds-few] .explain {
  background-color: var(--color-clouds-few-light);
}

[data-weather=light-rain] {
  background-color: var(--color-rain);
}

[data-weather=light-rain] .bg .inside-bg {
  background-image: url(/bg/rain-plane-top.jpg);
}

[data-planes="0"][data-weather=light-rain] .bg .inside-bg {
  background-image: url(/bg/rain-top.jpg);
}

[data-weather=light-rain] .runway-calendar .day-container {
  background-color: var(--color-rain-light);
}

[data-weather=light-rain] .explain {
  background-color: var(--color-rain-light);
}

[data-weather=moderate-rain] {
  background-color: var(--color-rain);
}

[data-planes="0"][data-weather=moderate-rain] .bg .inside-bg {
  background-image: url(/bg/rain-top.jpg);
}

[data-weather=moderate-rain] .bg .inside-bg {
  background-image: url(/bg/rain-plane-top.jpg);
}

[data-weather=moderate-rain] .runway-calendar .day-container {
  background-color: var(--color-rain-light);
}

[data-weather=moderate-rain] .explain {
  background-color: var(--color-rain-light);
}

[data-weather="heavy-intensity rain"] {
  background-color: var(--color-rain);
}

[data-planes="0"][data-weather="heavy-intensity rain"] .bg .inside-bg {
  background-image: url(/bg/rain-top.jpg);
}

[data-weather="heavy-intensity rain"] .bg .inside-bg {
  background-image: url(/bg/rain-plane-top.jpg);
}

[data-weather="heavy-intensity rain"] .runway-calendar .day-container {
  background-color: var(--color-rain-light);
}

[data-weather="heavy-intensity rain"] .explain {
  background-color: var(--color-rain-light);
}

/*
	these now come from PHP suninof();

	'dawn_astronomical' 
	'dawn_nautical' 
	'dawn_civil' 
	'sunrise'
	'morning'
	'transit'
	'afternoon'
	'sunset' 
	'dusk_nautical'
	'dusk_astronomical' 
	'night'
*/
[data-daytime=dawn_civil] .runway-calendar .day-container,
[data-daytime=dawn_civil] .explain,
[data-daytime=sunset] .runway-calendar .day-container,
[data-daytime=sunset] .explain,
[data-daytime=dusk_nautical] .runway-calendar .day-container,
[data-daytime=dusk_nautical] .explain,
[data-daytime=dusk_astronomical] .runway-calendar .day-container,
[data-daytime=dusk_astronomical] .explain,
[data-daytime=night] .runway-calendar .day-container,
[data-daytime=night] .explain {
  background-color: var(--color-night-background);
}
[data-daytime=dawn_civil][data-weather=clear-sky] .runway-calendar .day-container,
[data-daytime=dawn_civil][data-weather=clear-sky] .explain, [data-daytime=dawn_civil][data-weather=clouds-few] .runway-calendar .day-container,
[data-daytime=dawn_civil][data-weather=clouds-few] .explain, [data-daytime=dawn_civil][data-weather=light-rain] .runway-calendar .day-container,
[data-daytime=dawn_civil][data-weather=light-rain] .explain, [data-daytime=dawn_civil][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=dawn_civil][data-weather=moderate-rain] .explain, [data-daytime=dawn_civil][data-weather=clouds-ovc] .runway-calendar .day-container,
[data-daytime=dawn_civil][data-weather=clouds-ovc] .explain, [data-daytime=dawn_civil][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=dawn_civil][data-weather=moderate-rain] .explain, [data-daytime=dawn_civil][data-weather=clouds-sct] .runway-calendar .day-container,
[data-daytime=dawn_civil][data-weather=clouds-sct] .explain,
[data-daytime=sunset][data-weather=clear-sky] .runway-calendar .day-container,
[data-daytime=sunset][data-weather=clear-sky] .explain,
[data-daytime=sunset][data-weather=clouds-few] .runway-calendar .day-container,
[data-daytime=sunset][data-weather=clouds-few] .explain,
[data-daytime=sunset][data-weather=light-rain] .runway-calendar .day-container,
[data-daytime=sunset][data-weather=light-rain] .explain,
[data-daytime=sunset][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=sunset][data-weather=moderate-rain] .explain,
[data-daytime=sunset][data-weather=clouds-ovc] .runway-calendar .day-container,
[data-daytime=sunset][data-weather=clouds-ovc] .explain,
[data-daytime=sunset][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=sunset][data-weather=moderate-rain] .explain,
[data-daytime=sunset][data-weather=clouds-sct] .runway-calendar .day-container,
[data-daytime=sunset][data-weather=clouds-sct] .explain,
[data-daytime=dusk_nautical][data-weather=clear-sky] .runway-calendar .day-container,
[data-daytime=dusk_nautical][data-weather=clear-sky] .explain,
[data-daytime=dusk_nautical][data-weather=clouds-few] .runway-calendar .day-container,
[data-daytime=dusk_nautical][data-weather=clouds-few] .explain,
[data-daytime=dusk_nautical][data-weather=light-rain] .runway-calendar .day-container,
[data-daytime=dusk_nautical][data-weather=light-rain] .explain,
[data-daytime=dusk_nautical][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=dusk_nautical][data-weather=moderate-rain] .explain,
[data-daytime=dusk_nautical][data-weather=clouds-ovc] .runway-calendar .day-container,
[data-daytime=dusk_nautical][data-weather=clouds-ovc] .explain,
[data-daytime=dusk_nautical][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=dusk_nautical][data-weather=moderate-rain] .explain,
[data-daytime=dusk_nautical][data-weather=clouds-sct] .runway-calendar .day-container,
[data-daytime=dusk_nautical][data-weather=clouds-sct] .explain,
[data-daytime=dusk_astronomical][data-weather=clear-sky] .runway-calendar .day-container,
[data-daytime=dusk_astronomical][data-weather=clear-sky] .explain,
[data-daytime=dusk_astronomical][data-weather=clouds-few] .runway-calendar .day-container,
[data-daytime=dusk_astronomical][data-weather=clouds-few] .explain,
[data-daytime=dusk_astronomical][data-weather=light-rain] .runway-calendar .day-container,
[data-daytime=dusk_astronomical][data-weather=light-rain] .explain,
[data-daytime=dusk_astronomical][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=dusk_astronomical][data-weather=moderate-rain] .explain,
[data-daytime=dusk_astronomical][data-weather=clouds-ovc] .runway-calendar .day-container,
[data-daytime=dusk_astronomical][data-weather=clouds-ovc] .explain,
[data-daytime=dusk_astronomical][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=dusk_astronomical][data-weather=moderate-rain] .explain,
[data-daytime=dusk_astronomical][data-weather=clouds-sct] .runway-calendar .day-container,
[data-daytime=dusk_astronomical][data-weather=clouds-sct] .explain,
[data-daytime=night][data-weather=clear-sky] .runway-calendar .day-container,
[data-daytime=night][data-weather=clear-sky] .explain,
[data-daytime=night][data-weather=clouds-few] .runway-calendar .day-container,
[data-daytime=night][data-weather=clouds-few] .explain,
[data-daytime=night][data-weather=light-rain] .runway-calendar .day-container,
[data-daytime=night][data-weather=light-rain] .explain,
[data-daytime=night][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=night][data-weather=moderate-rain] .explain,
[data-daytime=night][data-weather=clouds-ovc] .runway-calendar .day-container,
[data-daytime=night][data-weather=clouds-ovc] .explain,
[data-daytime=night][data-weather=moderate-rain] .runway-calendar .day-container,
[data-daytime=night][data-weather=moderate-rain] .explain,
[data-daytime=night][data-weather=clouds-sct] .runway-calendar .day-container,
[data-daytime=night][data-weather=clouds-sct] .explain {
  background-color: var(--color-night-background);
}

body {
  position: relative;
}
body .background {
  z-index: -1;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
body .background .weather, body .background .blended, body .background .shaded {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
body .background .weather {
  transition: all 2s linear;
}
body .background .blended, body .background .shaded {
  transition: all 10s linear;
}
body .background .blended {
  mix-blend-mode: color-burn;
  opacity: 0.5;
}
body .background .shaded {
  background: #000;
  opacity: 0;
}
body[data-daytime=morning] .blended, body[data-daytime=transit] .blended, body[data-daytime=afternoon] .blended {
  background-color: #999;
  opacity: 0;
}
body[data-daytime=morning] .shaded, body[data-daytime=transit] .shaded, body[data-daytime=afternoon] .shaded {
  opacity: 0;
}
body[data-daytime=dawn_civil] .blended, body[data-daytime=sunset] .blended {
  background-color: var(--color-sunburn);
  opacity: 0.3;
}
body[data-daytime=dawn_civil][data-weather=clear-sky] .blended, body[data-daytime=sunset][data-weather=clear-sky] .blended {
  background-color: #eea64d;
}
body[data-daytime=dawn_civil] .shaded {
  opacity: 0.1;
}
body[data-daytime=sunrise] .background .blended {
  background-color: var(--color-dawny);
  opacity: 0.3;
}
body[data-daytime=sunrise] .background .shaded {
  opacity: 0;
}
body[data-daytime=dusk_nautical] .blended {
  background-color: var(--color-dusky);
  opacity: 0.2;
}
body[data-daytime=dusk_nautical] .shaded {
  opacity: 0.3;
}
body[data-daytime=night] .blended, body[data-daytime=dawn_astronomical] .blended, body[data-daytime=dusk_astronomical] .blended {
  background-color: var(--color-night);
  opacity: 0.2;
}
body[data-daytime=night] .shaded, body[data-daytime=dawn_astronomical] .shaded, body[data-daytime=dusk_astronomical] .shaded {
  opacity: 0.6;
}
body[data-daytime=dusk_nautical] .day-container .guess-button,
body[data-daytime=dusk_nautical] .day-container h2,
body[data-daytime=dusk_nautical] .day-container .announcement, body[data-daytime=sunset] .day-container .guess-button,
body[data-daytime=sunset] .day-container h2,
body[data-daytime=sunset] .day-container .announcement, body[data-daytime=dawn_astronomical] .day-container .guess-button,
body[data-daytime=dawn_astronomical] .day-container h2,
body[data-daytime=dawn_astronomical] .day-container .announcement, body[data-daytime=dusk_astronomical] .day-container .guess-button,
body[data-daytime=dusk_astronomical] .day-container h2,
body[data-daytime=dusk_astronomical] .day-container .announcement {
  border-color: var(--color-white);
  color: var(--color-white) !important;
}
body[data-daytime=dusk_nautical] .day-container .runway-scroll .runway-segment, body[data-daytime=sunset] .day-container .runway-scroll .runway-segment, body[data-daytime=dawn_astronomical] .day-container .runway-scroll .runway-segment, body[data-daytime=dusk_astronomical] .day-container .runway-scroll .runway-segment {
  border-top-color: var(--color-white);
  border-bottom-color: var(--color-white);
}
body[data-daytime=dusk_nautical] .day-container .runway-scroll .runway-segment:after, body[data-daytime=sunset] .day-container .runway-scroll .runway-segment:after, body[data-daytime=dawn_astronomical] .day-container .runway-scroll .runway-segment:after, body[data-daytime=dusk_astronomical] .day-container .runway-scroll .runway-segment:after {
  border-bottom-color: var(--color-white);
}

section {
  max-width: calc(var(--max-width) - 1rem);
  margin: 0 auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 1rem;
}
section:last-of-type .section-frame {
  border-bottom: none;
}
section .section-frame {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-white);
}

.sub-pages {
  display: flex;
  margin-bottom: 0.5rem;
  justify-content: center;
  position: relative;
  z-index: 200;
  justify-content: space-between;
}
.sub-pages .section-btn.overhead a:hover img {
  transform: rotate(-20deg);
}
.sub-pages .section-btn.archive a:hover img {
  transform: translateY(0.5rem);
}
.sub-pages .section-btn a {
  padding: 0.5rem;
  display: block;
  text-align: center;
  text-decoration: none;
}
.sub-pages .section-btn a h3, .sub-pages .section-btn a b {
  text-decoration: none;
}
.sub-pages .section-btn .btn-wrapper {
  display: flex;
  width: 50%;
  align-content: center;
  align-items: center;
}
.sub-pages .section-btn .btn-wrapper img {
  transition: transform 0.25s ease-in-out;
  width: 1.5rem;
  padding-right: 0.5rem;
}
@media screen and (min-width: 600px) {
  .sub-pages .section-btn .btn-wrapper img {
    width: 2.75rem;
    padding-right: 0.5rem;
  }
}
.sub-pages .section-btn .btn-wrapper a {
  color: var(--color-white);
  text-decoration: none;
}
.sub-pages .section-btn h3 {
  font-family: var(--font-sans-condensed);
  text-decoration: none;
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 8vw;
  line-height: 1;
  margin: 0;
  transition: color 0.25s ease-in-out;
}
.sub-pages .section-btn b {
  font-weight: 300;
  margin-top: 0rem;
  display: inline-block;
  font-family: var(--font-serif);
  text-align: center;
  text-decoration: none;
  color: var(--color-white);
}

.section-frame {
  position: relative;
}
.section-frame h1, .section-frame h2 {
  color: var(--color-white);
  margin: 0;
}
.section-frame h2 {
  margin-bottom: 0.5rem;
}
.section-frame p {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-top: 0;
  color: var(--color-white);
  font-weight: 300;
}
.section-frame p:last-of-type {
  margin-bottom: 0;
}
.section-frame p a {
  color: var(--color-white);
}

.guess-button {
  padding: 0.25em 0.5em;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--color-white);
  font-weight: bold;
  border-radius: 0.25em;
  width: 3.5em;
  text-align: center;
  border: 1px solid var(--color-white);
}
.guess-button.no {
  color: var(--color-white);
  background: var(--color-easterly);
}
.guess-button.maybe {
  background: linear-gradient(50deg, var(--color-easterly) 50%, transparent 0%);
}
.guess-button.some {
  background: var(--color-easterly);
}
.guess-button.mostly {
  background: none;
}

.wind-arrow {
  display: inline-block;
  transition: 1s ease-in-out all;
  font-family: var(--font-serif);
  color: var(--color-white);
}
.wind-arrow .north-arrow {
  color: var(--color-white);
  transition: 1s ease-in-out color;
  display: inline-block;
}
.wind-arrow.strong .north-arrow {
  color: #f99 !important;
}

aside#header {
  position: fixed;
  top: 0;
  left: 0;
  font-family: var(--font-sans-condensed);
  right: 0;
  z-index: 1000;
  height: 2.4rem;
  transition: 0.5s background linear;
}
aside#header .context-switcher {
  position: absolute;
  padding: 0.5rem 0.75rem;
}
aside#header .context-switcher.london {
  right: 0;
}
aside#header .context-switcher span {
  opacity: 1;
}
aside#header .context-switcher.quiet span {
  text-decoration: line-through;
}
aside#header .context-switcher.new-activity span {
  -webkit-animation: blink 0.6s linear infinite;
  animation: blink 0.6s linear infinite;
}
aside#header .context-switcher.initial span {
  -webkit-animation: blink 0.4s linear 3;
  animation: blink 0.4s linear 3;
}
aside#header .context-switcher a {
  display: block;
  color: white;
  text-transform: uppercase;
  padding: 0;
  cursor: pointer;
}
aside#header span.my-location {
  position: absolute;
  padding: 0.5rem;
  right: 0;
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  cursor: pointer;
  opacity: 0.85;
}
aside#header span.my-location.windsor {
  left: 0;
  flex-direction: row-reverse;
}
aside#header span.my-location:hover {
  opacity: 1;
}
aside#header span.my-location .user-location {
  padding: 0.1rem 0.3rem;
  font-size: 0.8rem;
  font-family: var(--font-serif);
  font-weight: 100;
  position: relative;
  color: var(--color-white);
  white-space: nowrap;
}
aside#header span.my-location button.target {
  background: none;
  border: none;
  font-size: 1.6rem;
  padding: 0;
  cursor: pointer;
  position: relative;
  top: -2px;
}
aside#header span.my-location button.target span {
  display: none;
}
aside#header span.my-location button.target b {
  color: white;
  text-indent: -9000px;
}
aside#header span.my-location button.target b:before {
  content: "\e009";
}

body.scroll aside#header {
  background: hsl(210deg, 48%, 59%);
}

header#planesover {
  text-align: center;
  display: flex;
  position: relative;
  z-index: 2;
  padding: 1.5rem 0.5rem 0 0.5rem;
  perspective: 1000px;
  overflow: hidden;
}
header#planesover .logo-container {
  width: 100%;
  padding-bottom: 21%;
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  margin: 1rem auto;
}
@media screen and (min-width: 600px) {
  header#planesover .logo-container {
    padding-bottom: 0;
    height: 100px;
  }
}
header#planesover .logo-container .logo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 0;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
header#planesover .logo-container .logo.london {
  background-image: url(/assets/pol.svg);
}
header#planesover .logo-container .logo.windsor {
  background-image: url(/assets/pow.svg);
  transform: rotateY(180deg);
}

h1#title {
  text-transform: uppercase;
  font-family: var(--font-sans-condensed);
  text-align: center;
  color: white;
  position: relative;
  top: -2rem;
  font-weight: normal;
  font-size: 3rem;
  margin: 0;
}

.header-flips {
  perspective: 1000px;
  overflow: hidden;
  position: relative;
}
.header-flips .header-flips-inner {
  width: 100%;
  height: 4rem;
  position: relative;
  transition: transform 0.5s;
  transition-delay: 0.2s;
  transform-style: preserve-3d;
}
@media screen and (min-width: 1024px) {
  .header-flips .header-flips-inner {
    height: 5rem;
  }
}
@media screen and (min-width: 1400px) {
  .header-flips .header-flips-inner {
    height: 6rem;
  }
}
@media screen and (min-width: 1700px) {
  .header-flips .header-flips-inner {
    height: 8rem;
  }
}
.header-flips .header-flips-inner h1 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 0;
  backface-visibility: hidden;
  display: flex;
  align-item: center;
  justify-content: center;
}
.header-flips .header-flips-inner h1.windsor {
  transform: rotateY(180deg);
}

.windsor-only {
  display: none;
}

[data-context=windsor] header .logo-container {
  transform: rotateY(180deg);
}
[data-context=windsor] .header-flips .header-flips-inner {
  transform: rotateY(180deg);
}
[data-context=windsor] .windsor-only {
  display: inline-block;
}
[data-context=windsor] .london-only {
  display: none;
}
[data-context=windsor] .windsor-west span {
  display: none;
}
[data-context=windsor] .windsor-west:before {
  content: "west";
  opacity: 1;
}
[data-context=windsor] .windsor-east span {
  display: none;
}
[data-context=windsor] .windsor-east:before {
  content: "east";
  opacity: 1;
}

@-webkit-keyframes distant {
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes distant {
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.6;
  }
}
@-webkit-keyframes approach {
  40% {
    opacity: 0.6;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes approach {
  40% {
    opacity: 0.6;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes flickerAndFade {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  51% {
    opacity: 1;
  }
  52% {
    opacity: 0.4;
  }
  53% {
    opacity: 1;
  }
  54% {
    opacity: 0.4;
  }
  55% {
    opacity: 1;
  }
  56% {
    opacity: 0.4;
  }
  57% {
    opacity: 1;
  }
  58% {
    opacity: 0.4;
  }
  59% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flickerAndFade {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  51% {
    opacity: 1;
  }
  52% {
    opacity: 0.4;
  }
  53% {
    opacity: 1;
  }
  54% {
    opacity: 0.4;
  }
  55% {
    opacity: 1;
  }
  56% {
    opacity: 0.4;
  }
  57% {
    opacity: 1;
  }
  58% {
    opacity: 0.4;
  }
  59% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
ul.callsigns {
  list-style: none;
  margin: 0 2rem 0 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  font-weight: 300;
  transition: all 0.6s ease-out;
  font-family: var(--font-sans);
  justify-content: flex-start;
}
ul.callsigns::-webkit-scrollbar {
  display: none;
}
ul.callsigns li {
  margin: 0;
  padding: 0;
  width: auto;
  transition: all 0.6s ease-out;
  position: relative;
  display: block;
  font-size: 80%;
  border-radius: 0.2rem;
}
ul.callsigns li:nth-of-type(1) a {
  transition-delay: 0.05s;
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
}
ul.callsigns li:nth-of-type(2) a {
  transition-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
ul.callsigns li:nth-of-type(3) a {
  transition-delay: 0.15s;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
ul.callsigns li:nth-of-type(4) a {
  transition-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
ul.callsigns li:nth-of-type(5) a {
  transition-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
ul.callsigns li:nth-of-type(6) a {
  transition-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
ul.callsigns li:nth-of-type(7) a {
  transition-delay: 0.35s;
  -webkit-animation-delay: 0.35s;
  animation-delay: 0.35s;
}
ul.callsigns li:nth-of-type(8) a {
  transition-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
ul.callsigns li:nth-of-type(9) a {
  transition-delay: 0.45s;
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
}
ul.callsigns li:nth-of-type(10) a {
  transition-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
ul.callsigns li:nth-of-type(11) a {
  transition-delay: 0.55s;
  -webkit-animation-delay: 0.55s;
  animation-delay: 0.55s;
}
ul.callsigns li:nth-of-type(12) a {
  transition-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
ul.callsigns li:nth-of-type(13) a {
  transition-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
  animation-delay: 0.65s;
}
ul.callsigns li:nth-of-type(14) a {
  transition-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
ul.callsigns li:nth-of-type(15) a {
  transition-delay: 0.75s;
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
ul.callsigns li:nth-of-type(16) a {
  transition-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
ul.callsigns li:nth-of-type(17) a {
  transition-delay: 0.85s;
  -webkit-animation-delay: 0.85s;
  animation-delay: 0.85s;
}
ul.callsigns li:nth-of-type(18) a {
  transition-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
ul.callsigns li:nth-of-type(19) a {
  transition-delay: 0.95s;
  -webkit-animation-delay: 0.95s;
  animation-delay: 0.95s;
}
ul.callsigns li:nth-of-type(20) a {
  transition-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
ul.callsigns li a {
  width: auto;
  display: block;
  margin: 0 0.5rem 0 0;
  padding-top: 1.4rem;
  position: relative;
  font-size: 90%;
  text-decoration: none;
  transition: all 0.6s ease;
  color: var(--color-white);
  transition: color 3s linear;
  opacity: 0.6;
  -webkit-animation: approach 1s linear 1 normal forwards;
  animation: approach 1s linear 1 normal forwards;
}
ul.callsigns li a[data-status=initial], ul.callsigns li a.rwy-unknown {
  opacity: 0;
  -webkit-animation: distant 1s linear 1 normal forwards;
  animation: distant 1s linear 1 normal forwards;
}
ul.callsigns li a[data-status=landing] {
  opacity: 1;
  -webkit-animation: flickerAndFade 15s linear 1 normal forwards;
  animation: flickerAndFade 15s linear 1 normal forwards;
}
ul.callsigns li a[data-status=landed] {
  display: none;
}
ul.callsigns li a:before {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  background-repeat: no-repeat;
  position: absolute;
  background-size: contain;
  background-position: center center;
  top: 0;
  left: calc(50% - 0.6rem);
}
ul.callsigns li a:hover {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
}
ul.callsigns li a.light:before {
  background-size: 80% 80%;
  background-image: url(/assets/icons/icon-a320.svg);
}
ul.callsigns li a.heavy:before {
  background-image: url(/assets/icons/icon-77W.svg);
}
ul.callsigns li a span {
  display: inline-block;
  padding: 0.1rem 0.15rem;
  border-radius: 0.2rem;
  transition: all 2s linear;
}
ul.callsigns li a.rainfall span {
  background-color: #fff9ca;
  color: var(--color-black);
}
ul.callsigns li a.near-traffic span {
  background-color: #f9c243;
  color: var(--color-black);
}
ul.callsigns li a.washing-machine span {
  background-color: #ffb700;
  color: var(--color-black);
}
ul.callsigns li a.shower span {
  background-color: #ff6700;
}
ul.callsigns li a.hair-dryer span {
  background-color: #ff00c4;
}
ul.callsigns li a.motorway span {
  background-color: #ff1a1a;
}
ul.callsigns li a.circular-saw span {
  background-color: #a10037;
  color: white;
}

.now-diagram {
  margin-top: 1rem;
  min-width: 340px;
  max-width: 100%;
  flex-direction: column;
  border-top: 1px solid var(--color-white);
  font-size: 1rem;
  min-height: 118px;
}
@media only screen and (min-width: 600px) {
  .now-diagram {
    display: inline-flex;
    width: 450px;
  }
}
.now-diagram .planes-now {
  position: relative;
  border-bottom: 1px solid var(--color-white);
  display: none;
}
.now-diagram .planes-now .planes {
  display: grid;
  grid-template-columns: 23% 77%;
}
.now-diagram .planes-now .planes b {
  font-weight: 300;
  padding: 0.5rem 0;
  border-right: 1px solid var(--color-white);
  text-align: center;
}
.now-diagram .now-wind-runways .now-wind {
  border-right: 1px solid var(--color-white);
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.now-diagram .now-wind-runways .now-runway {
  display: flex;
  align-content: center;
  align-items: center;
}
.now-diagram .now-wind-runways .runwayuse {
  padding-left: 0.5rem;
  font-size: 1rem;
  white-space: nowrap;
}
.now-diagram .now-wind-runways .landings {
  font-weight: 300;
}
.now-diagram .tallies {
  display: flex;
  display: none;
  text-align: left;
  flex-direction: column;
  border-left: 1px solid var(--color-white);
}
.now-diagram .tallies .runway-landings {
  border-bottom: 1px solid var(--color-white);
  padding-left: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.now-diagram .tallies .runway-landings .stat {
  font-family: var(--font-sans-condensed);
}
.now-diagram .tallies .runway-landings:last-of-type {
  border-bottom: none;
}
.now-diagram .now-tallies {
  display: grid;
  grid-template-columns: 20% 80%;
  border-bottom: 1px solid var(--color-white);
}
.now-diagram .now-tallies h3 {
  margin: 0;
}
.now-diagram .now-wind-runways {
  display: grid;
  grid-template-columns: 23% 55% 22%;
  border-bottom: 1px solid var(--color-white);
}

@-webkit-keyframes radar {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes radar {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.data-monitor {
  font-size: 0.75rem;
  display: flex;
  justify-content: center;
  text-align: left;
  font-weight: 300;
  padding-top: 1rem;
}
.data-monitor b {
  padding: 0.25rem 0;
  font-family: var(--font-sans);
  font-weight: 300;
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
}
.data-monitor b.planes-seen {
  margin-right: 1rem;
}
.data-monitor b.planes-seen i {
  -webkit-animation: radar 5s infinite linear;
  animation: radar 5s infinite linear;
  position: relative;
  display: inline-block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.5rem;
  background-image: url(/assets/icons/icon-radar.svg);
}

.late-runners {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  border-top: 1px solid white;
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  margin-top: 1rem;
  min-width: 340px;
  max-width: 100%;
  display: grid;
  border-bottom: 1px solid var(--color-white);
  grid-gap: 0;
  grid-template-columns: 23% 77%;
  align-items: center;
}
@media only screen and (min-width: 600px) {
  .late-runners {
    width: 450px;
  }
}
.late-runners h3 {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 300;
  margin: 0;
  padding: 0.5rem;
  font-family: var(--font-serif);
}
.late-runners h3 span {
  font-size: 85%;
  font-family: var(--font-sans-condensed);
  display: block;
}
.late-runners ul {
  border-left: 1px solid var(--color-white);
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0.25rem 2rem 0.25rem 0.5rem;
}
.late-runners ul li {
  font-weight: 300;
}
.late-runners ul li a {
  text-decoration: none;
  padding: 0.1rem 0.2rem;
  display: inline-block;
  color: var(--color-white);
  border-radius: 0.2rem;
}
.late-runners ul li a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.windsock {
  display: inline-block;
  background-size: cover;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  background-position: bottom left;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/assets/windsock/windsock-15.svg);
}
.windsock[data-level="4"] {
  background-image: url(/assets/windsock/windsock-12.svg);
}
.windsock[data-level="3"] {
  background-image: url(/assets/windsock/windsock-9.svg);
}
.windsock[data-level="2"] {
  background-image: url(/assets/windsock/windsock-6.svg);
}
.windsock[data-level="1"] {
  background-image: url(/assets/windsock/windsock-3.svg);
}
.windsock[data-level="0"] {
  background-image: url(/assets/windsock/windsock-0.svg);
}
.windsock[data-direction="270"] {
  transform: scaleX(-1);
}

.runway-wind-wrapper {
  display: flex;
  margin: 0.5rem auto 0.7rem auto;
  justify-content: center;
}

.windwrapper {
  display: flex;
  justify-content: center;
  position: relative;
  text-align: center;
  width: 50px;
  height: 50px;
  margin: 4px;
}
.windwrapper .windbearing {
  position: absolute;
  text-align: center;
  background-position: center center;
  background-size: contain;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-image: url(/assets/icons/north-wind.svg);
}
.windwrapper .windholder {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 100;
  line-height: 1;
}
.windwrapper b {
  line-height: 1;
  text-align: center;
  z-index: 100;
  font-family: var(--font-sans-condensed);
  color: var(--color-black);
  font-size: 1rem;
}

.wind-runway {
  justify-content: center;
  display: flex;
}

.runwayuse {
  padding-right: 0.5rem;
  font-family: var(--font-serif);
  font-weight: 300;
}
.runwayuse b {
  font-family: var(--font-sans-condensed);
  font-weight: 600;
}

header#planesover svg {
  margin-left: auto;
  margin-right: auto;
}

.section-frame.right-now {
  background-color: transparent;
  text-align: center;
  color: #ffffff;
  position: relative;
  z-index: 500;
  padding: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  font-family: var(--font-serif);
  border: none;
}
.section-frame.right-now h1 {
  font-size: 3rem;
  font-size: clamp(3rem, 5vw, 6rem);
  margin: 0;
  text-transform: uppercase;
  font-family: var(--font-sans-condensed);
}

.wind-arrow {
  display: inline-block;
  transition: 1s ease-in-out all;
  font-family: var(--font-serif);
  color: var(--color-white);
}
.wind-arrow .north-arrow {
  color: var(--color-white);
  transition: 1s ease-in-out color;
  display: inline-block;
}
.wind-arrow.strong .north-arrow {
  color: #f99 !important;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
.explainer {
  position: absolute;
  top: 0.5rem;
  right: 0.25rem;
  width: 1rem;
  display: inline-block;
}
.explainer.open b {
  background-color: var(--color-black);
  color: var(--color-white);
}
.explainer.open span {
  transform: translate(0rem, 0rem);
  opacity: 1;
}
.explainer:hover {
  cursor: pointer;
}
.explainer b {
  position: relative;
  font-family: var(--font-sans-condensed);
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-white);
  color: var(--color-black);
  border-radius: 0.7rem;
  display: block;
  transition: all 0.15s ease-in-out;
}
.explainer span {
  transform: translate(0, -2rem);
  font-size: 0.8rem;
  color: var(--color-white);
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  top: -0.1rem;
  border-radius: var(--border-radius);
  padding: 0.25rem;
  right: 1.2rem;
  background-color: var(--color-black);
  opacity: 0;
  transition: all 0.15s ease-in-out;
  z-index: 20;
}

.how h2 {
  font-weight: 300;
  margin-bottom: 0.25rem;
  color: var(--color-white);
  font-family: var(--font-sans-condensed);
}
.how p.how {
  font-family: var(--font-sans);
  font-size: 90%;
}

.explain {
  display: flex;
  margin-bottom: 0.5rem;
  flex: 1;
  align-items: center;
  padding: 0.5rem;
  border-radius: var(--border-radius);
}
.explain:first-of-type {
  margin-top: 1rem;
}
.explain .explain-button {
  width: 3.5rem;
  padding-left: 0.5rem;
}
.explain b {
  font-size: 1.2rem;
  font-family: var(--font-serif);
  color: var(--color-white);
}
.explain small {
  font-weight: 300;
  text-align: right;
  padding-right: 0.5rem;
  width: calc(100% - 7rem);
  font-family: var(--font-sans);
  color: var(--color-white);
}
.explain small a {
  color: var(--color-white);
  text-decoration: underline;
}
.explain small b {
  font-size: inherit;
  font-family: inherit;
}
.explain .guess-button {
  display: block;
  font-family: var(--font-sans-condensed);
}

@media screen and (min-width: 600px) {
  .explanations {
    margin: 1rem 0;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    justify-content: right;
  }
  .explain {
    min-width: 200px;
    margin: 0;
  }
  .explain:first-of-type {
    margin-top: 0;
  }
}
h2.title {
  margin: 1rem 0 1rem 0;
  position: relative;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  letter-spacing: 0.1rem;
}
h2.title span {
  border: 1px solid var(--color-white);
  padding: 0 0.45rem;
  color: var(--color-white);
  font-size: 1.2rem;
  font-family: var(--font-sans-condensed);
}

.runway-calendar {
  margin-top: 1.5rem;
  position: relative;
  z-index: 10;
}
.runway-calendar .day-container {
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
.runway-calendar .day-container.loaded {
  opacity: 1;
}
.runway-calendar .day-container:nth-of-type(1).loaded {
  transition-delay: 0.05s;
}
.runway-calendar .day-container:nth-of-type(2).loaded {
  transition-delay: 0.1s;
}
.runway-calendar .day-container:nth-of-type(3).loaded {
  transition-delay: 0.15s;
}
.runway-calendar .day-container:nth-of-type(4).loaded {
  transition-delay: 0.2s;
}
.runway-calendar .day-container:nth-of-type(5).loaded {
  transition-delay: 0.25s;
}
.runway-calendar .day-container:nth-of-type(6).loaded {
  transition-delay: 0.3s;
}
.runway-calendar .day-container:nth-of-type(7).loaded {
  transition-delay: 0.35s;
}
.runway-calendar .day-container:nth-of-type(8).loaded {
  transition-delay: 0.4s;
}
.runway-calendar .day-container:nth-of-type(9).loaded {
  transition-delay: 0.45s;
}
.runway-calendar .day-container:nth-of-type(10).loaded {
  transition-delay: 0.5s;
}
.runway-calendar .day-container:nth-of-type(11).loaded {
  transition-delay: 0.55s;
}
.runway-calendar .day-container:nth-of-type(12).loaded {
  transition-delay: 0.6s;
}
.runway-calendar .day-container:nth-of-type(13).loaded {
  transition-delay: 0.65s;
}
.runway-calendar .day-container:nth-of-type(14).loaded {
  transition-delay: 0.7s;
}
.runway-calendar.unloading .day-container {
  opacity: 0 !important;
}
.runway-calendar.unloading .day-container:nth-of-type(14) {
  transition-delay: 0.02s;
}
.runway-calendar.unloading .day-container:nth-of-type(13) {
  transition-delay: 0.04s;
}
.runway-calendar.unloading .day-container:nth-of-type(12) {
  transition-delay: 0.06s;
}
.runway-calendar.unloading .day-container:nth-of-type(11) {
  transition-delay: 0.08s;
}
.runway-calendar.unloading .day-container:nth-of-type(10) {
  transition-delay: 0.1s;
}
.runway-calendar.unloading .day-container:nth-of-type(9) {
  transition-delay: 0.12s;
}
.runway-calendar.unloading .day-container:nth-of-type(8) {
  transition-delay: 0.14s;
}
.runway-calendar.unloading .day-container:nth-of-type(7) {
  transition-delay: 0.16s;
}
.runway-calendar.unloading .day-container:nth-of-type(6) {
  transition-delay: 0.18s;
}
.runway-calendar.unloading .day-container:nth-of-type(5) {
  transition-delay: 0.2s;
}
.runway-calendar.unloading .day-container:nth-of-type(4) {
  transition-delay: 0.22s;
}
.runway-calendar.unloading .day-container:nth-of-type(3) {
  transition-delay: 0.24s;
}
.runway-calendar.unloading .day-container:nth-of-type(2) {
  transition-delay: 0.26s;
}
.runway-calendar.unloading .day-container:nth-of-type(1) {
  transition-delay: 0.28s;
}

.day-container {
  padding: 0.5rem;
  border-radius: var(--border-radius);
  margin: 0.5rem 0;
  position: relative;
  left: 0;
}
.day-container .day-overview {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.day-container .detail-body {
  display: flex;
  position: relative;
  margin: 0;
}
.day-container h2 {
  font-weight: 300;
  font-family: var(--font-serif);
  margin: 0;
  color: var(--color-white);
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
.day-container h2 b {
  font-weight: 300;
}
.day-container .guess-button {
  font-family: var(--font-sans-condensed);
}
.day-container.closed {
  cursor: pointer;
}

.runway {
  padding: 3rem 0.25rem 1.5rem 0.25rem;
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  overflow: scroll;
  transition: 0.5s scroll-left ease;
}
.runway::-webkit-scrollbar {
  display: none;
}
.runway .runway-scroll {
  display: table;
  overflow-x: auto;
  width: auto;
  margin: 0;
  overflow: scroll;
  white-space: nowrap;
  position: relative;
}
.runway .runway-scroll .runway-segment {
  display: inline-block;
  position: relative;
  cursor: pointer;
  background: var(--color-runway);
  border-top: 1px solid var(--color-white);
  border-bottom: 1px solid var(--color-white);
}
.runway .runway-scroll .runway-segment:first-of-type {
  border-left: 4px solid var(--color-white);
}
.runway .runway-scroll .runway-segment:last-of-type {
  border-right: 5px solid var(--color-white);
}
.runway .runway-scroll .runway-segment:last-of-type .runway-hour:first-child .plane {
  display: none !important;
}
.runway .runway-scroll .runway-segment:after {
  width: 100%;
  height: 1px;
  position: absolute;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  top: 1.42rem;
  left: 0;
  content: "";
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.runway .runway-scroll .runway-segment .runway-hours, .runway .runway-scroll .runway-segment .runway-hour, .runway .runway-scroll .runway-segment .runway-hour-nodata {
  height: 3rem;
  box-sizing: border-box;
}
.runway .runway-scroll .runway-segment .selection-highlight {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.runway .runway-scroll .runway-segment .block-info {
  color: var(--color-black);
}
.runway .runway-scroll .runway-segment .block-info .time {
  transform: rotate(-90deg);
  position: absolute;
  top: -1rem;
  left: 0.1rem;
  font-size: 0.7rem;
  color: var(--color-white);
  transform-origin: left center;
}
.runway .runway-scroll .runway-segment .block-info .wind-arrow {
  position: absolute;
  top: -1.5rem;
  margin-left: 0.6rem;
}
.runway .runway-scroll .runway-segment .block-info .laterunners {
  position: absolute;
  margin-left: 2.3rem;
  top: -2.6rem;
  font-size: 0.65rem;
  padding: 0.2em 0.5em;
  background: var(--color-white);
  color: black;
  border-radius: 1rem;
}
.runway .runway-scroll .runway-segment .block-info .announcement {
  position: absolute;
  top: -1.5rem;
  margin-left: 1.7rem;
  width: 1rem;
  height: 1rem;
  text-decoration: none;
  color: var(--color-white);
}
.runway .runway-scroll .runway-segment .block-info .announcement:before {
  content: "\e001";
}
.runway .runway-scroll .runway-segment .block-info .announcement:hover {
  color: #09C;
}
.runway .runway-scroll .runway-segment .rationale {
  position: absolute;
  bottom: -1.5rem;
  left: 0rem;
  text-align: left;
  color: var(--color-white);
  font-size: 0.8rem;
  font-family: var(--font-serif);
}
.runway .runway-scroll .runway-segment .rationale span {
  position: static;
}
.runway .runway-scroll .runway-segment .rationale.right {
  text-align: right;
  left: auto;
  right: 0;
}
.runway .runway-scroll .runway-segment:last-of-type .rationale {
  right: 0;
  left: auto;
  text-align: right;
}
.runway .runway-scroll .runway-segment.no-data {
  background: none;
}
.runway .runway-scroll .runway-segment.no-data:after {
  display: none;
}
.runway .runway-scroll .runway-segment.no-data .dash {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 2px dashed #AAA;
  border-left-style: solid;
}
.runway .runway-scroll .runway-segment.no-data .block-info .wind-arrow {
  color: #AAA;
}
.runway .runway-scroll .runway-segment.no-data .runway-hour-nodata:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-sans-condensed);
  content: "?";
  color: #AAA;
}
.runway .runway-scroll .runway-segment .runway-hour, .runway .runway-scroll .runway-segment .runway-hour-nodata {
  width: 64px;
  padding-right: 2px;
  position: relative;
  display: inline-block;
}
.runway .runway-scroll .runway-segment .runway-hour {
  color: var(--color-white);
}
.runway .runway-scroll .runway-segment .runway-hour:first-child {
  position: relative;
  padding-right: 0;
  border-left: 1px solid var(--color-white);
}
.runway .runway-scroll .runway-segment .runway-hour:before, .runway .runway-scroll .runway-segment .runway-hour:after {
  display: none;
}
.runway .runway-scroll .runway-segment .runway-hour:first-child:before, .runway .runway-scroll .runway-segment .runway-hour:first-child:after, .runway .runway-scroll .runway-segment .runway-hour.current:before, .runway .runway-scroll .runway-segment .runway-hour.current:after {
  position: absolute;
  top: 2.25rem;
  left: 0.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-sans-condensed);
  transform: rotate(-90deg);
  transform-origin: top left;
  display: block;
  z-index: 2;
}
.runway .runway-scroll .runway-segment .runway-hour.current:before {
  background-color: var(--color-runway);
}
.runway .runway-scroll .runway-segment .runway-hour.current .plane {
  display: none;
}
.runway .runway-scroll .runway-segment .runway-hour.current:before {
  left: 0.3rem;
}
.runway .runway-scroll .runway-segment .runway-hour .plane {
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 1.2rem;
  font-size: 1.5rem;
  left: 1.8rem;
  transform: rotate(180deg);
  z-index: 2;
}
.runway .runway-scroll .runway-segment .runway-hour .plane:before {
  content: "\e008";
}
.runway .runway-scroll .runway-segment .runway-hour .current-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px dashed rgb(0, 255, 0);
}
.runway .runway-scroll .runway-segment .runway-hour.past {
  background: var(--color-runway-past);
  color: var(--color-black);
  border-color: var(--color-black);
}
.runway .runway-scroll .runway-segment .runway-hour.past .plane {
  color: var(--color-runway);
}
.runway .runway-scroll .runway-segment .runway-hour.past:before, .runway .runway-scroll .runway-segment .runway-hour.past:after {
  background: var(--color-runway-past);
}
.runway .runway-scroll .runway-segment .runway-hour.closed {
  background-image: linear-gradient(135deg, #5b5b5b 25%, #4d4d4d 25%, #4d4d4d 50%, #5b5b5b 50%, #5b5b5b 75%, #4d4d4d 75%, #4d4d4d 100%);
}
.runway .runway-scroll .runway-segment .runway-hour.closed .plane, .runway .runway-scroll .runway-segment .runway-hour.closed:before, .runway .runway-scroll .runway-segment .runway-hour.closed:after {
  opacity: 0 !important;
}
.runway .runway-scroll .runway-segment.easterly .runway-hour:before {
  transform: rotate(90deg);
  transform-origin: top right;
  opacity: 1;
  left: 0.1rem;
  background-color: var(--color-runway);
}
.runway .runway-scroll .runway-segment.easterly .runway-hour .plane {
  opacity: 1;
  transform: rotate(0deg);
  left: 3.5rem;
  top: 0.7rem;
}
.runway .runway-scroll .runway-segment.easterly .runway-hour:first-child .plane {
  display: block;
}
.runway .runway-scroll .runway-segment.easterly .runway-hour.current .plane {
  display: block;
}
.runway .runway-scroll .runway-segment.easterly .runway-hour.past:before {
  background-color: var(--color-runway-past);
}
.runway .runway-scroll .runway-segment.quiet {
  background: var(--color-runway-quiet);
}
.runway .runway-scroll .runway-segment.quiet.rwy0-27L .runway-hour:before, .runway .runway-scroll .runway-segment.quiet.rwy0-27R .runway-hour:before {
  background-color: var(--color-runway-quiet);
}
.runway .runway-scroll .runway-segment.quiet.rwy0-27L .runway-hour.future:before, .runway .runway-scroll .runway-segment.quiet.rwy0-27R .runway-hour.future:before {
  background-color: var(--color-runway-quiet);
}
.runway .runway-scroll .runway-segment.quiet .runway-hour:before {
  background-color: var(--color-runway-quiet);
}
.runway .runway-scroll .runway-segment.quiet .runway-hour, .runway .runway-scroll .runway-segment.quiet .current-time {
  border-color: var(--color-white);
}
.runway .runway-scroll .runway-segment:hover {
  opacity: 0.9;
}
.runway .runway-scroll .runway-segment.selected {
  background: var(--color-selected);
}
.runway .runway-scroll .runway-segment.selected:hover {
  opacity: 1;
}
.runway .runway-scroll .runway-segment.selected .runway-hour {
  background: none;
}
.runway .runway-scroll .runway-segment.selected .runway-hour.future:first-of-type:after, .runway .runway-scroll .runway-segment.selected .runway-hour.future:first-of-type:before {
  background-color: var(--color-selected);
}
.runway .runway-scroll .runway-segment.selected .runway-hour.current:after, .runway .runway-scroll .runway-segment.selected .runway-hour.current:before {
  background-color: var(--color-selected);
}
.runway .runway-scroll .runway-segment.selected .runway-hour.past:first-of-type:after, .runway .runway-scroll .runway-segment.selected .runway-hour.past:first-of-type:before {
  background-color: var(--color-selected);
}
.runway .runway-scroll .runway-segment.selected .runway-hour:before, .runway .runway-scroll .runway-segment.selected .runway-hour:after, .runway .runway-scroll .runway-segment.selected .runway-hour .plane {
  opacity: 1;
}
.runway .runway-scroll .runway-segment.selected .runway-hour .plane {
  color: var(--color-white);
}
.runway .runway-scroll .runway-segment.rwy0-09R .runway-hour:before {
  background-image: url(/assets/runway/09R.svg);
}
.runway .runway-scroll .runway-segment.rwy0-09L .runway-hour:before {
  background-image: url(/assets/runway/09L.svg);
}
.runway .runway-scroll .runway-segment.rwy0-27R .runway-hour:before {
  background-image: url(/assets/runway/27R.svg);
}
.runway .runway-scroll .runway-segment.rwy0-27L .runway-hour:before {
  background-image: url(/assets/runway/27L.svg);
}
.runway .runway-scroll .runway-segment.rwy0-27R .runway-hour.past:first-of-type, .runway .runway-scroll .runway-segment.rwy0-27L .runway-hour.past:first-of-type {
  border-color: var(--color-white);
}
.runway .runway-scroll .runway-segment.rwy0-27R .runway-hour.past:before, .runway .runway-scroll .runway-segment.rwy0-27L .runway-hour.past:before {
  background-color: var(--color-runway-past);
}
.runway .runway-scroll .runway-segment.rwy0-27R .runway-hour.future:before, .runway .runway-scroll .runway-segment.rwy0-27L .runway-hour.future:before {
  background-color: var(--color-runway);
}
.runway .runway-scroll .runway-segment.rwy0-27R .runway-hour:first-of-type .plane, .runway .runway-scroll .runway-segment.rwy0-27L .runway-hour:first-of-type .plane {
  display: none;
}
.runway .runway-scroll .runway-segment.rwy0-27R .runway-hour:before, .runway .runway-scroll .runway-segment.rwy0-27L .runway-hour:before {
  content: "";
  width: 1.7rem;
  z-index: 10;
  left: 0.5rem;
  height: 2.2rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.runway .runway-scroll .runway-segment.rwy0-09R .runway-hour:before, .runway .runway-scroll .runway-segment.rwy0-09L .runway-hour:before {
  content: "";
  width: 1.7rem;
  z-index: 10;
  left: 1rem;
  height: 2.2rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.runway .runway-scroll .runway-segment.rwy0-09R .runway-hour:before {
  background-image: url(/assets/runway/09R.svg);
}
.runway .runway-scroll .runway-segment.rwy0-09L .runway-hour:before {
  background-image: url(/assets/runway/09L.svg);
}
.runway .runway-scroll .runway-segment.rwy0-27R .runway-hour:before {
  background-image: url(/assets/runway/27R.svg);
}
.runway .runway-scroll .runway-segment.rwy0-27L .runway-hour:before {
  background-image: url(/assets/runway/27L.svg);
}
.runway .runway-scroll .runway-segment.rwy1-27L .runway-hour .plane, .runway .runway-scroll .runway-segment.rwy1-27R .runway-hour .plane {
  left: 1.3rem;
}
.runway .runway-scroll .runway-segment.rwy1-27L .runway-hour .plane:first-child, .runway .runway-scroll .runway-segment.rwy1-27R .runway-hour .plane:first-child {
  top: 0.4rem;
}
.runway .runway-scroll .runway-segment.rwy1-27L .runway-hour .plane:last-child, .runway .runway-scroll .runway-segment.rwy1-27R .runway-hour .plane:last-child {
  top: auto;
  bottom: 0.2rem;
}
.runway .runway-scroll .runway-segment.rwy1-27L .runway-hour:first-child:before, .runway .runway-scroll .runway-segment.rwy1-27L .runway-hour:first-child:after, .runway .runway-scroll .runway-segment.rwy1-27R .runway-hour:first-child:before, .runway .runway-scroll .runway-segment.rwy1-27R .runway-hour:first-child:after {
  font-size: 0.7rem;
  transform: rotate(-90deg);
  transform-origin: top center;
  width: 1.1rem;
  height: 1.6rem;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}
.runway .runway-scroll .runway-segment.rwy1-27L .runway-hour:first-child:before, .runway .runway-scroll .runway-segment.rwy1-27R .runway-hour:first-child:before {
  top: 0.85rem;
  left: 0rem;
  background-image: url(/assets/runway/27R.svg);
}
.runway .runway-scroll .runway-segment.rwy1-27L .runway-hour:first-child:after, .runway .runway-scroll .runway-segment.rwy1-27R .runway-hour:first-child:after {
  top: 2rem;
  left: 0rem;
  background-image: url(/assets/runway/27L.svg);
}
.runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09L .runway-hour .plane, .runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09R .runway-hour .plane, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09L .runway-hour .plane, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09R .runway-hour .plane {
  opacity: 1;
}
.runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09L .runway-hour:before, .runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09L .runway-hour:after, .runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09R .runway-hour:before, .runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09R .runway-hour:after, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09L .runway-hour:before, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09L .runway-hour:after, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09R .runway-hour:before, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09R .runway-hour:after {
  transform: rotate(90deg);
  transform-origin: top right;
  opacity: 1;
}
.runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09L .runway-hour:before, .runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09R .runway-hour:before, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09L .runway-hour:before, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09R .runway-hour:before {
  background-image: url(/assets/runway/09L.svg);
  top: 1.35rem;
  left: 0rem;
}
.runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09L .runway-hour:after, .runway .runway-scroll .runway-segment.rwy1-27L.rwy1-09R .runway-hour:after, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09L .runway-hour:after, .runway .runway-scroll .runway-segment.rwy1-27R.rwy1-09R .runway-hour:after {
  background-image: url(/assets/runway/09R.svg);
  top: 2.85rem;
  left: -0.2rem;
}
.runway .runway-scroll .runway-segment.rwy1-27L.rwy0-27R .runway-hour .plane:last-child, .runway .runway-scroll .runway-segment.rwy1-27R.rwy0-27R .runway-hour .plane:last-child {
  left: 2rem;
}
.runway .runway-scroll .runway-segment.rwy1-27L.rwy0-27L .runway-hour .plane:first-child, .runway .runway-scroll .runway-segment.rwy1-27R.rwy0-27L .runway-hour .plane:first-child {
  left: 2rem;
}
.runway .runway-scroll .runway-segment.rwy1-27L.rwy0-09L .runway-hour .plane:first-child, .runway .runway-scroll .runway-segment.rwy1-27R.rwy0-09L .runway-hour .plane:first-child {
  left: 2rem;
}
.runway .runway-scroll .runway-segment.rwy1-27L.rwy0-09R .runway-hour .plane:last-child, .runway .runway-scroll .runway-segment.rwy1-27R.rwy0-09R .runway-hour .plane:last-child {
  left: 2rem;
}
@media screen and (min-width: 600px) {
  .runway::-webkit-scrollbar:horizontal {
    height: 11px;
  }
  .runway::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid var(--color-white); /* should match background, can't be transparent */
    background-color: transparent;
  }
  .runway::-webkit-scrollbar {
    /* display: none;
    content:''; */
    display: block;
    height: 11px;
    width: 0;
  }
}
@media screen and (min-width: 1200px) {
  .runway::-webkit-scrollbar:horizontal {
    height: 0;
    display: none;
  }
  .runway::-webkit-scrollbar-thumb {
    border: none;
    display: none;
  }
  runway::-webkit-scrollbar {
    display: none;
  }
}
body.support-frame-open .overlay {
  z-index: 550;
  background-color: rgba(0, 0, 0, 0.4);
}

[data-route=support] section.page {
  max-width: 600px;
}

.notice {
  display: flex;
  justify-content: center;
}

.notice-wrapper {
  font-family: var(--font-sans);
}

.notice-wrapper a span {
  color: red;
  padding: 0 0.5rem;
  font-weight: bold;
  font-family: var(--font-serif);
  letter-spacing: 0.1rem;
  font-weight: bold;
}

.notice-wrapper a strong {
  font-weight: bold;
  font-family: var(--font-condensed);
  text-transform: uppercase;
}

.notice-wrapper a {
  display: block;
  border: 2px solid var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
  border-radius: 1.25rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.notice-wrapper a:hover {
  background-color: var(--color-black);
  text-decoration: none;
  color: var(--color-white);
}

.support-wrapper {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0 0.5rem;
  display: grid;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(3, 1fr);
}

h3.support-call-out {
  text-align: center;
  margin-bottom: 0;
}
h3.support-call-out a {
  font-family: var(--font-sans-condensed);
  display: block;
  padding: 0.5rem;
  text-decoration: none;
  border-color: var(--color-white);
  color: var(--color-white);
  background-color: transparent;
  transition: all 0.25s ease-in-out;
  border: 1px solid var(--color-white);
}
h3.support-call-out a:hover {
  color: var(--color-yellow);
}
h3.support-call-out a.active {
  background-color: var(--color-white);
  color: var(--color-black);
}
h3.support-call-out:nth-of-type(2) a {
  background-color: var(--color-yellow);
  color: var(--color-black);
  border-left: none;
  border-right: none;
}
h3.support-call-out:nth-of-type(2) a.active {
  background-color: var(--color-white);
  color: var(--color-black);
}

.updates-form,
.subscribe-form,
.support-form {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  padding: 1rem;
  max-width: calc(450px - 2rem);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  position: relative;
  color: var(--color-black);
  background-color: var(--color-white);
}
@media screen and (min-width: 600px) {
  .updates-form,
.subscribe-form,
.support-form {
    margin-left: auto;
    margin-right: auto;
  }
}
.updates-form h3,
.subscribe-form h3,
.support-form h3 {
  margin-top: 0;
  font-family: var(--font-sans-condensed);
}
.updates-form p,
.subscribe-form p,
.support-form p {
  font-family: var(--font-serif);
}
.updates-form .close-button,
.subscribe-form .close-button,
.support-form .close-button {
  background: none;
  border: none;
  position: absolute;
  top: 0.5rem;
  margin: 0;
  color: var(--color-black);
  right: 1rem;
  padding: 0;
  font-size: 1.75rem;
}
.updates-form .close-button:hover,
.subscribe-form .close-button:hover,
.support-form .close-button:hover {
  cursor: pointer;
}

article.news {
  padding-bottom: 1rem;
  border-bottom: 1px dashed black;
  margin-bottom: 1rem;
}
article.news b {
  display: block;
  font-size: 90%;
  padding-right: 1rem;
  font-family: var(--font-condensed);
}
article.news small {
  font-family: var(--font-serif);
}
article.news small a {
  color: var(--color-black);
}

.support-form .button-wrapper {
  max-width: 100%;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.subscribe-form input {
  width: 100%;
}
.subscribe-form input[type=email] {
  border: 2px solid var(--color-black);
  padding: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.15rem;
  border-radius: 1rem;
  font-weight: bold;
  width: calc(100% - 1rem);
}
.subscribe-form input[type=submit] {
  background-color: var(--color-black);
  padding: 0.75rem;
  font-size: 1rem;
  font-family: var(--font-condensed);
  color: var(--color-white);
  border-radius: 1rem;
  font-weight: bold;
  border: none;
  transition: all 0.25s ease-in-out;
}
.subscribe-form input[type=submit]:hover {
  cursor: pointer;
  background-color: var(--color-yellow);
  color: var(--color-black);
}

section.support {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 600;
  width: calc(100% - 1rem);
  padding: 0 0.5rem;
  overflow: hidden;
  transform: translateY(calc(100% - 2.5rem));
  transition: transform 0.3s ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
  display: flex;
  justify-content: center;
}
section.support:hover {
  transform: translateY(0);
  cursor: pointer;
}
section.support p {
  font-size: 1.25rem;
  font-family: var(--font-serif);
}
section.support .support-frame {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
}
section.support .support-headline {
  display: inline-flex;
  align-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-white);
  border-top-right-radius: calc(var(--border-radius) * 2);
  border-top-left-radius: calc(var(--border-radius) * 2);
  padding: 0.35rem 0.65rem;
}
section.support .support-headline h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: var(--font-sans-condensed);
  text-align: center;
  margin: 0 0 0 0;
  color: var(--color-black);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.01rem;
}
section.support .support-headline .plane-753 {
  margin-left: 0.5rem;
  width: 2.8rem;
  height: 1.8rem;
  display: block;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/assets/icons/icon-side-plane.svg);
}
section.support .support-silo {
  border-top-right-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
  padding: 1rem;
  box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.27);
  background-color: var(--color-white);
}
section.support .support-silo p {
  margin: 0;
}
section.support .support-details {
  background: black;
}

ul.support-buttons {
  list-style: none;
  padding: 0;
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
}
ul.support-buttons li a {
  text-align: center;
  font-family: var(--font-sans-condensed);
  border-radius: var(--border-radius);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  border: 1px solid var(--color-white);
  margin: 0.25rem;
  display: block;
  color: var(--color-white);
  transition: all 0.25s ease-in-out;
  padding: 0.5rem;
}
ul.support-buttons li a:hover {
  color: var(--color-black);
  background-color: var(--color-white);
}

.testimonial {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-white);
}
.testimonial blockquote {
  padding: 0;
  margin: 0;
}
.testimonial blockquote p {
  font-family: var(--font-serif);
}
.testimonial blockquote p a {
  color: var(--color-white);
}
.testimonial blockquote cite {
  color: var(--color-white);
  font-family: var(--font-sans);
  font-style: italic;
}
.testimonial blockquote cite a {
  color: var(--color-white);
}

html[data-route=my-location], html[data-route=my-location] body,
html[data-route=sky],
html[data-route=sky] body {
  height: 100%;
}

.map-container {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: 0.5s opacity ease;
  overflow: hidden;
}
.map-container .mapboxgl-ctrl-attrib {
  font-size: 0.8rem;
  pointer-events: none;
  opacity: 0.6;
  background: none;
  padding: 2px;
}
.map-container .mapboxgl-ctrl-attrib .mapbox-improve-map {
  display: none;
}
.map-container .mapboxgl-ctrl-logo {
  display: none;
}
.map-container.map-loaded {
  opacity: 1;
}

[data-react-component=sky-map] .data-monitor {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  color: #222;
}
[data-react-component=sky-map] .data-monitor b.planes-seen i {
  background: none;
  font-size: 1.2rem;
  margin-left: 0.25rem;
  margin-right: 0.2rem;
}
[data-react-component=sky-map] .data-monitor b.planes-seen i:before {
  content: "\e002";
}

.my-location-screen header {
  opacity: 0;
  z-index: 2;
  position: absolute;
}
.my-location-screen header h3 {
  margin: 0.25rem 0 0 0;
  font-family: var(--font-sans-condensed);
}
.my-location-screen footer {
  opacity: 0;
  position: fixed;
  top: 4rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  text-align: right;
}
.my-location-screen footer button {
  font-family: var(--font-sans-condensed);
  background-color: var(--color-black);
  outline: none;
  color: var(--color-white);
  border: none;
  padding: 0.5rem 0.75rem;
  text-transform: uppercase;
  font-size: 1.2rem;
  border-radius: 1.5rem;
}
.my-location-screen footer button.find-me-button {
  bottom: 5.5rem;
  position: fixed;
  width: 8rem;
  left: calc(50% - 5rem);
}
.my-location-screen footer button.done-button {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
}
.my-location-screen footer button:hover {
  cursor: pointer;
}
.my-location-screen.loaded header, .my-location-screen.loaded footer {
  opacity: 1;
}

header.page {
  padding: 1rem;
  text-align: center;
}
header.page svg {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
header.page ul {
  font-family: var(--font-serif);
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
header.page ul li {
  font-family: var(--font-sans-condensed);
  text-transform: uppercase;
  font-size: 1.25rem;
}
header.page ul li a {
  padding: 0.5rem;
  color: var(--color-white);
  text-decoration: none;
}

h1.title {
  margin: 1rem 0 1rem 0;
  position: relative;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  letter-spacing: 0.1rem;
}
h1.title span {
  border: 1px solid var(--color-white);
  padding: 0 0.45rem;
  color: var(--color-white);
  font-size: 1.2rem;
  font-family: var(--font-sans-condensed);
}

.monthly-tally p {
  font-family: var(--font-serif);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
}
.monthly-tally ul.legend {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  font-family: var(--font-serif);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 300;
  justify-content: center;
}
.monthly-tally ul.legend li {
  margin-right: 0.5rem;
}
.monthly-tally ul.legend span {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  display: inline-block;
}
.monthly-tally ul.legend span.westerly-use {
  background-color: var(--color-westerly);
}
.monthly-tally ul.legend span.easterly-use {
  background-color: var(--color-easterly);
}
.monthly-tally ul.legend span.late {
  background-color: var(--color-yellow);
}

.month.loaded article.day-archive {
  opacity: 1;
}

.month.unloading article.day-archive {
  opacity: 0 !important;
}
.month.unloading article.day-archive:nth-of-type(14) {
  transition-delay: 0.02s;
}
.month.unloading article.day-archive:nth-of-type(13) {
  transition-delay: 0.04s;
}
.month.unloading article.day-archive:nth-of-type(12) {
  transition-delay: 0.06s;
}
.month.unloading article.day-archive:nth-of-type(11) {
  transition-delay: 0.08s;
}
.month.unloading article.day-archive:nth-of-type(10) {
  transition-delay: 0.1s;
}
.month.unloading article.day-archive:nth-of-type(9) {
  transition-delay: 0.12s;
}
.month.unloading article.day-archive:nth-of-type(8) {
  transition-delay: 0.14s;
}
.month.unloading article.day-archive:nth-of-type(7) {
  transition-delay: 0.16s;
}
.month.unloading article.day-archive:nth-of-type(6) {
  transition-delay: 0.18s;
}
.month.unloading article.day-archive:nth-of-type(5) {
  transition-delay: 0.2s;
}
.month.unloading article.day-archive:nth-of-type(4) {
  transition-delay: 0.22s;
}
.month.unloading article.day-archive:nth-of-type(3) {
  transition-delay: 0.24s;
}
.month.unloading article.day-archive:nth-of-type(2) {
  transition-delay: 0.26s;
}
.month.unloading article.day-archive:nth-of-type(1) {
  transition-delay: 0.28s;
}

article.day-archive {
  border-radius: 0.5rem;
  padding: 0.5rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
  transition: background-color 0.25s ease-in-out;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
article.day-archive:nth-of-type(1).loaded {
  transition-delay: 0.05s;
}
article.day-archive:nth-of-type(2).loaded {
  transition-delay: 0.1s;
}
article.day-archive:nth-of-type(3).loaded {
  transition-delay: 0.15s;
}
article.day-archive:nth-of-type(4).loaded {
  transition-delay: 0.2s;
}
article.day-archive:nth-of-type(5).loaded {
  transition-delay: 0.25s;
}
article.day-archive:nth-of-type(6).loaded {
  transition-delay: 0.3s;
}
article.day-archive:nth-of-type(7).loaded {
  transition-delay: 0.35s;
}
article.day-archive:nth-of-type(8).loaded {
  transition-delay: 0.4s;
}
article.day-archive:nth-of-type(9).loaded {
  transition-delay: 0.45s;
}
article.day-archive:nth-of-type(10).loaded {
  transition-delay: 0.5s;
}
article.day-archive:nth-of-type(11).loaded {
  transition-delay: 0.55s;
}
article.day-archive:nth-of-type(12).loaded {
  transition-delay: 0.6s;
}
article.day-archive:nth-of-type(13).loaded {
  transition-delay: 0.65s;
}
article.day-archive:nth-of-type(14).loaded {
  transition-delay: 0.7s;
}
article.day-archive:nth-of-type(15).loaded {
  transition-delay: 0.75s;
}
article.day-archive:nth-of-type(16).loaded {
  transition-delay: 0.8s;
}
article.day-archive:nth-of-type(17).loaded {
  transition-delay: 0.85s;
}
article.day-archive:nth-of-type(18).loaded {
  transition-delay: 0.9s;
}
article.day-archive:nth-of-type(19).loaded {
  transition-delay: 0.95s;
}
article.day-archive:nth-of-type(20).loaded {
  transition-delay: 1s;
}
article.day-archive:nth-of-type(21).loaded {
  transition-delay: 1.05s;
}
article.day-archive:nth-of-type(22).loaded {
  transition-delay: 1.1s;
}
article.day-archive:nth-of-type(23).loaded {
  transition-delay: 1.15s;
}
article.day-archive:nth-of-type(24).loaded {
  transition-delay: 1.2s;
}
article.day-archive:nth-of-type(25).loaded {
  transition-delay: 1.25s;
}
article.day-archive:nth-of-type(26).loaded {
  transition-delay: 1.3s;
}
article.day-archive:nth-of-type(27).loaded {
  transition-delay: 1.35s;
}
article.day-archive:nth-of-type(28).loaded {
  transition-delay: 1.4s;
}
article.day-archive:nth-of-type(29).loaded {
  transition-delay: 1.45s;
}
article.day-archive:nth-of-type(30).loaded {
  transition-delay: 1.5s;
}
article.day-archive:nth-of-type(31).loaded {
  transition-delay: 1.55s;
}
article.day-archive.active, article.day-archive:hover {
  cursor: pointer;
  background-color: rgb(255, 255, 255);
}
article.day-archive.active .day-day-wrapper:last-of-type, article.day-archive:hover .day-day-wrapper:last-of-type {
  padding-top: 1rem;
}
article.day-archive.active h4 .late-arrivals, article.day-archive:hover h4 .late-arrivals {
  opacity: 1;
  margin-right: 1.5rem;
}
article.day-archive.active .day-day-breakdown .day-segment small, article.day-archive:hover .day-day-breakdown .day-segment small {
  opacity: 1;
}
article.day-archive h3, article.day-archive h4 {
  margin: 0;
}
article.day-archive h3 {
  color: var(--color-black);
  font-family: var(--font-serif);
  font-weight: 300;
}
article.day-archive h4 {
  color: var(--color-black);
  display: flex;
  line-height: 1;
  font-size: 1.1rem;
  overflow: hidden;
  margin-right: -1.5rem;
  align-content: center;
  align-items: center;
}
article.day-archive h4 .late-arrivals {
  transition: all 0.25s ease-in-out;
  display: block;
  margin-left: 0.15rem;
  font-size: 70%;
  width: 1.3rem;
  line-height: 1.3rem;
  text-align: center;
  height: 1.3rem;
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-family: var(--font-sans);
  border-radius: 50%;
  text-align: center;
  opacity: 0;
}
article.day-archive .day-day-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  transition: padding 0.25s ease-in-out;
}
article.day-archive .day-day-breakdown {
  position: relative;
  display: flex;
  height: 0.5rem;
  flex-wrap: nowrap;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  background-color: var(--color-dawny);
}
article.day-archive .day-day-breakdown .day-segment {
  position: relative;
  flex-grow: 1;
}
article.day-archive .day-day-breakdown .day-segment:first-of-type {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
article.day-archive .day-day-breakdown .day-segment:last-of-type {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
article.day-archive .day-day-breakdown .day-segment.westerly-use {
  background-color: var(--color-westerly);
}
article.day-archive .day-day-breakdown .day-segment.easterly-use {
  background-color: var(--color-easterly);
}
article.day-archive .day-day-breakdown .day-segment small {
  font-size: 80%;
  transition: opacity 0.25s ease-in-out;
  opacity: 0;
  color: var(--color-runway-current);
  position: absolute;
  bottom: -1rem;
  left: 0;
}
article.day-archive b {
  font-size: 80%;
  font-family: var(--font-sans);
  font-weight: normal;
}

nav.pagination {
  z-index: 300;
}
nav.pagination ul {
  font-family: var(--font-serif);
  margin: 0;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: row;
  list-style: none;
  justify-content: space-between;
}
nav.pagination ul li span {
  cursor: pointer;
  color: var(--color-white);
}
nav.pagination ul li span:hover {
  opacity: 0.8;
}
nav.pagination ul li.next {
  text-align: right;
}

.month-tally-footer {
  margin: 0 auto 1.5rem auto;
  width: 100%;
  text-align: center;
}
.month-tally-footer .month-tally-wrapper {
  background: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  border-radius: 0.5rem;
}
@media screen and (min-width: 600px) {
  .month-tally-footer .month-tally-wrapper {
    display: flex;
  }
}
.month-tally-footer h3 {
  align-content: center;
  align-self: center;
  padding: 0.25rem 0;
  background: rgba(255, 255, 255, 0.8);
  font-family: var(--font-serif);
  color: var(--color-black);
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-sans-condensed);
  text-transform: uppercase;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .month-tally-footer h3 {
    padding: 0.75rem;
  }
}
.month-tally-footer ul {
  align-content: center;
  align-self: center;
  padding: 0.5rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
}
@media screen and (min-width: 600px) {
  .month-tally-footer ul {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
  }
}
.month-tally-footer ul li {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--color-black);
  margin: 0.5rem;
}
.month-tally-footer ul li b, .month-tally-footer ul li span {
  font-family: var(--font-sans);
  font-weight: 500;
}
@media screen and (min-width: 600px) {
  .month-tally-footer ul li span,
.month-tally-footer ul li b {
    display: inline;
  }
}

#map {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
}

footer.overhead-details {
  text-align: left;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 100;
  padding: 0;
  box-shadow: -2px 2px 0.5rem 0px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 600px) {
  footer.overhead-details {
    max-width: 450px;
    left: calc(50% - 225px);
  }
}
footer.overhead-details .overhead-location {
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
}
footer.overhead-details .overhead-location b {
  font-family: var(--font-sans);
  font-weight: normal;
  font-size: 110%;
  white-space: nowrap;
}
footer.overhead-details .overhead-location b:first-of-type {
  display: flex;
  padding-right: 0.5rem;
  width: 100%;
}
footer.overhead-details .overhead-location b:first-of-type:after {
  margin-left: 0.5rem;
  content: "";
  flex: 1;
  margin-top: 0.75rem;
  width: 100%;
  background-color: var(--color-black);
  height: 1px;
}
footer.overhead-details h3 {
  font-weight: 300;
  padding: 0.5rem;
  margin: 0;
  line-height: 1.3;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 5vw, 1.5rem);
}
footer.overhead-details h3 form {
  display: inline-block;
  padding: 0 0.25rem;
  border-radius: 0.2rem;
}
footer.overhead-details h3 form select {
  background-color: rgb(247, 247, 152);
  font-family: var(--font-serif);
  border: none;
  font-size: clamp(1.2rem, 5vw, 1.5rem);
}

[data-route=support] .site-nav,
[data-route=info] .site-nav,
[data-route=mylocation] .site-nav {
  bottom: 0;
}

body.scroll .site-nav {
  bottom: 0;
}

.site-nav {
  position: fixed;
  bottom: -1.8rem;
  transition: 0.2s bottom linear;
  left: 0;
  width: 100%;
  z-index: 300;
  overflow: hidden;
  will-change: transform;
  transform: translateY(0), translateZ(0);
}
.site-nav:hover {
  bottom: 0;
}
.site-nav nav {
  padding: 0.5rem;
  background-color: var(--color-night);
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 600px) {
  .site-nav nav {
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
  }
}
.site-nav nav ul {
  pointer-events: all;
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
.site-nav nav ul li {
  width: 20%;
  font-family: var(--font-sans-condensed);
  margin: 0 0.1rem;
  cursor: pointer;
}
.site-nav nav ul li a {
  border-radius: var(--border-radius);
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  color: var(--color-white);
  justify-content: center;
  text-decoration: none;
  transition: color 0.25s ease-in-out;
  cursor: pointer;
}
.site-nav nav ul li a i {
  font-size: 1.8rem;
  text-align: center;
}
.site-nav nav ul li a span {
  opacity: 1;
  white-space: nowrap;
  text-align: center;
  display: inline-block;
  font-size: 90%;
  font-size: clamp(70%, 5vw, 80%);
}
.site-nav nav ul li.active a,
.site-nav nav ul li a:hover {
  color: var(--color-easterly);
}
.site-nav nav ul li.main a i:before {
  content: "\e006";
}
.site-nav nav ul li.my-location a i:before {
  content: "\e005";
}
.site-nav nav ul li.archive a i:before {
  content: "\e003";
}
.site-nav nav ul li.info a i:before {
  content: "\e004";
}
.site-nav nav ul li.support a i:before {
  content: "\e007";
}

section.page h1 {
  font-family: var(--font-sans-condensed);
  color: var(--color-white);
  text-align: center;
}
section.page h1 {
  margin: 1rem 0 1rem 0;
  position: relative;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  letter-spacing: 0.1rem;
}
section.page h1 span {
  border: 1px solid var(--color-white);
  padding: 0 0.45rem;
  color: var(--color-white);
  font-size: 1.2rem;
  font-family: var(--font-sans-condensed);
}
section.page h3 {
  color: var(--color-white);
  font-family: var(--font-sans);
}
section.page h3 a {
  text-decoration: none;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-white);
}
section.page p {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-top: 0;
  color: var(--color-white);
  font-weight: 300;
}
section.page p:last-of-type {
  margin-bottom: 0;
}
section.page p a {
  color: var(--color-white);
}
section.page p.short-para {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 600px) {
  section.page .page-content-wrapper {
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
}

.button-wrapper {
  margin-top: 1rem;
}
@media screen and (min-width: 600px) {
  .button-wrapper {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
  }
}

.button {
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 600px) {
  .button {
    margin-bottom: 0;
  }
}
.button a {
  display: block;
  border: 1px solid var(--color-black);
  padding: 0.5rem 1rem;
  font-size: 1.35rem;
  text-decoration: none;
  color: var(--color-black);
  background-color: var(--color-yellow);
  border-radius: 1.5rem;
  font-family: var(--font-sans-condensed);
  background-position: center left;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.25s ease-in-out;
}
@media screen and (min-width: 600px) {
  .button a {
    font-size: 1.25rem;
  }
}
.button a b {
  width: 60px;
  height: 1.6rem;
  background-size: contain;
  background-position: left center;
  left: 0.5rem;
  display: block;
  top: 0;
  margin-right: 0.5rem;
  background-image: url(/assets/icons/one-plane-black.svg);
}
.button a span {
  white-space: nowrap;
  text-align: center;
}
.button a.single b {
  background-repeat: no-repeat;
}
.button a.monthly b {
  background-repeat: space;
}
.button a:hover {
  background-color: var(--color-easterly);
  color: var(--color-black);
}

.loader {
  text-align: center;
  color: white;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader h1 {
  text-transform: uppercase;
}
/*# sourceMappingURL=egll-dev.css.map */