:root {
  --clr-natural-gas: #FF6400;
  --clr-natural-gas-steam-border: #FF6400;
  --clr-hydro: #1A88F6;
  --clr-steam: #EC1D24;
  --clr-solar: #FFF100;
  --clr-diesel: #00AF64;
  --clr-wind: #714A9D;
  --clr-gas-lco: #EC3794;
  --clr-grid: #63666A;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v4.0 | 20180602
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}

/* HTML5 hidden-attribute fix for newer browsers */

*[hidden] {
    display: none;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

@font-face {
  font-family: 'CNN Sans Display';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('../fonts/CNNSansDisplay-Normal.woff2') format('woff2');
}

@font-face {
  font-family: 'CNN Sans Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/CNNSansDisplay-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'CNN Sans Display';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url('../fonts/CNNSansDisplay-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'CNN Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/CNNSansCondensed-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'CNN Sans Condensed';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url('../fonts/CNNSansCondensed-Bold.woff2') format('woff2');
}

#sponsor-header {
  font-family: 'CNN Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
  z-index: 20;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

#sponsor-header nav {
  background: #0c0c0c;
  color: #737373;
}

#sponsor-header ul {
  margin: 0 auto;
  max-width: 1145px;
  position: relative;
  display: flex;
  align-items: center;
}

#sponsor-header nav a {
  text-decoration: none;
  display: block;
  color: inherit;
}

#sponsor-header img {
  display: block;
  height: 60px;
}

#sponsor-header a:nth-of-type(2)::before {
  content: '<';
}

#sponsor-header li:nth-of-type(2) a {
  margin-left: 1.5em;
  padding-top: 0.5em;
}

#sponsor-header > h1 {
  background-color: #af8d43;
  color: white;
  font-size: 1rem;
  line-height: 1;
  font-weight: normal;
  margin: 0 auto;
  padding: 0.625em 1.25em;
  text-align: center;
  text-transform: uppercase;
}

#stat-year {
  position: absolute;
  top: 5%;
  right: 60px;
  display: flex;
  flex-direction: column;
  font-family: "CNN Sans Condensed",sans-serif;
  line-height: 1;
  opacity: 0;
  -webkit-transform: translateY(75%);
          transform: translateY(75%);
  transition: all 375ms ease-in 0;
  text-align: right;
}

#stat-year.active {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition: all 375ms ease-in 375ms;
}

#stat-year .year {
  color: #EF5139;
  min-width: 4ex;
  font-size: calc(100vh * 86/810);
  font-weight: bold;
}

#stat-year .stat {
  margin-top: 0.5em;
  position: relative;
  color: #fff;
  font-size: calc(100vh * 36/810);
}

#stat-year .stat::before,
#stat-year .stat::after {
  position: absolute;
  font-family: 'CNN Sans Display',sans-serif;
  font-weight: normal;
  font-size: calc(100vh * 10/810);
  line-height: 1;
  color: #7D7D7D;
  white-space: nowrap;
  right: 0;
}

#stat-year .stat::before {
  content: 'Power Equivalent to the Needs of';
  bottom: calc(100% + 0.5em);
}

#stat-year .stat::after {
  content: 'Households';
  top: calc(100% + 0.5em);
}

#timeline article[data-key="opening"] {
  height: calc(100vh + 96px);
  margin-bottom: 0;
}

#timeline article[data-key="intro"] {
  height: 125vh;
}

#intro {
  display: contents;
}

#title-card > * {
  position: absolute;
}

#title-card > h2 {
  font-family: "CNN Sans Condensed",sans-serif;
  font-weight: 500;
  font-size: calc(100vh * 36/810);
  line-height: 1;
  color: #EF5139;
  text-transform: uppercase;
  left: 60px;
  top: calc(10% - 100vh * 36/810);
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
  opacity: 0;
  transition: opacity 200ms ease-out, -webkit-transform 375ms ease-out;
  transition: transform 375ms ease-out, opacity 200ms ease-out;
  transition: transform 375ms ease-out, opacity 200ms ease-out, -webkit-transform 375ms ease-out;
  transition-delay: 0ms, 0ms;
}

#title-card.outro > h2 {
  transition-delay: 375ms, 575ms;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

#title-card > img {
  position: absolute;
  left: 15%;
  top: 19%;
  width: 50%;
  transition: all 750ms;
}

#title-card.intro > img {
  width: 18%;
  height: auto;
  left: 60px;
  top: 43%;
}

#title-card.legend > img {
  left: 60px;
  top: 5%;
}

#title-card.outro > img {
  width: auto;
  height: 20%;
  top: 10%;
  left: 60px;
}

#title-card > h1 {
  font-family: "CNN Sans Condensed",sans-serif;
  font-weight: 500;
  letter-spacing: 0.0809375em;
  line-height: 1;
  color: white;
  font-size: 2rem;
  text-transform: uppercase;
  transition: all 750ms;
  left: 15%;
  top: calc(19% + 50vw * (87/160) + 1em);
  width: 50%;
}

#title-card.intro > h1 {
  font-size: 50px;
  width: 18%;
  min-width: 185px;
  left: calc(60px + 18% + 3.125rem * 0.5);
  top: 43%;
  max-width: 200px
}

#title-card.intro > h1 > span {
    font-size: 32px;
  }

#title-card.legend > h1 {
  left: 26.5%;
  top: 5%;
}

#title-card.outro > h1 {
  left: 50%;
  opacity: 0;
}

#title-card .subhed {
  left: 15%;
  top: calc(19% + 50vw * (87/160) + 2 * 2rem + 1em);
  width: 34%;
  min-width: 475px;
  font-family: "CNN Sans Display",sans-serif;
  font-weight: 300;
  letter-spacing: 0.0133em;
  line-height: 1.3333;
  margin-bottom: 0.8667em;
  transition: all 750ms;
  font-size: 21px;
  text-transform: uppercase
}

#title-card .subhed b {
    font-weight: bold;
  }

#title-card.intro .subhed {
  left: calc(60px + 18% + 3.125rem * 0.5);
  top: calc(43% + 50px * 1.2 + 32px * 1.2 + 1em);
  width: 12%;
  min-width: 200px;
  font-size: 11px;
  margin-bottom: 1.182em
}

#title-card.intro .subhed cite {
    font-size: 11px;
  }

#title-card.legend .subhed {
  left: 26.5%;
  top: 18%;
}

#title-card.outro .subhed {
  left: 50%;
  opacity: 0;
}

#intro-copy,
#outro-copy {
  position: absolute;
  color: #bebebe;
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.333;
  font-family: "CNN Sans Display",sans-serif;
  transition: all 750ms;
  -webkit-transform: translateY(25vh);
          transform: translateY(25vh);
  opacity: 0;
  letter-spacing: 0.013em
}

#intro-copy p:not(:last-of-type), #outro-copy p:not(:last-of-type) {
    margin-bottom: 0.867em;
  }

#intro-copy {
  top: 64%;
  left: 60px;
  width: 32.5%;
}

#intro-copy.intro {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

#intro-copy.legend {
  opacity: 0;
  -webkit-transform: translateY(25vh);
          transform: translateY(25vh);
}

#outro-copy {
  top: calc(10% + 20% + 1em);
  left: 60px;
  width: 25%;
  min-width: 300px;
  padding-top: 1em;
  border-top: 1px solid #FF6400;
}

#outro-copy.outro {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.byLine{
  text-transform: capitalize;
  font-size: 18px;
}

#title-card.intro .byLine {
    display: none;

}

#title-card > #color100{
    opacity: 0;
}

#title-card.intro > img {
    opacity: 0;
}

#title-card.intro > #color100{
    opacity: 1;
}

#map {
  position: absolute;
  right: 100px;
  top: 0;
  height: 100%;
  transition: opacity 350ms;
}

/*
#map::after {
  content: '';
  position: absolute;
  right: -55px;
  top: 0;
  width: 88%;
  height: 50%;
  background-image: linear-gradient(45deg, transparent 50%, #222222 88%);
  background-size: contain;
}
*/

#map > img {
  display: block;
  height: 100%;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  transition: all 750ms;
  z-index: 1;
}

#map.intro > img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

#map.outro {
  opacity: 0.33;
}

#pins {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;  
}

.milestone-pins,
.pin-set {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  --delay-between-pins: 100ms;
}

.pin,
.shadow {
  position: absolute;
  left: var(--left);
  top: var(--top);
}

.pin {
  top: var(--top);
}

.shadow {
  top: calc(var(--top) + 0.1 * calc(100% * 32/690));
}

.pin {
  opacity: 0;
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  transition: opacity 150ms ease-out, -webkit-transform 300ms ease-out;
  transition: opacity 150ms ease-out, transform 300ms ease-out;
  transition: opacity 150ms ease-out, transform 300ms ease-out, -webkit-transform 300ms ease-out;
  z-index: 2;
}

.shadow {
  z-index: 1;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  transition: opacity 150ms ease-out, -webkit-transform 300ms ease-out;
  transition: opacity 150ms ease-out, transform 300ms ease-out;
  transition: opacity 150ms ease-out, transform 300ms ease-out, -webkit-transform 300ms ease-out;
}

.pin:not(.milestone),
.shadow {
  height: calc(100% * 32/690);
}

.pin.milestone {
  height: calc(100% * 120/690);
}

.milestone-pins .pin {
  height: calc(100% * 120/690);
}

.pin-set.intersecting .pin,
.pin-set.above .pin {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.pin-set.intersecting .shadow,
.pin-set.above .shadow {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.pin-set.intersecting:not(.active) .pin.milestone,
.pin-set.above .pin.milestone {
  -webkit-transform: translateY(0) scale(0.2542);
          transform: translateY(0) scale(0.2542);
  opacity: 0;
  transition: opacity 200ms ease-in 175ms, -webkit-transform 250ms ease-in;
  transition: transform 250ms ease-in, opacity 200ms ease-in 175ms;
  transition: transform 250ms ease-in, opacity 200ms ease-in 175ms, -webkit-transform 250ms ease-in;
}

.pin-set.above .pin:not(.milestone) {
  opacity: 0.5;
}

.pin > svg,
.shadow > svg {
  display: block;
  height: 100%;
}

.pin-set i:nth-of-type(2),
.pin-set u:nth-of-type(2) {
  transition-delay: calc(2 * var(--delay-between-pins));
}

.pin-set i:nth-of-type(3),
.pin-set u:nth-of-type(3) {
  transition-delay: calc(3 * var(--delay-between-pins));
}

.pin-set i:nth-of-type(4),
.pin-set u:nth-of-type(4) {
  transition-delay: calc(4 * var(--delay-between-pins));
}

.pin-set i:nth-of-type(5),
.pin-set u:nth-of-type(5) {
  transition-delay: calc(5 * var(--delay-between-pins));
}

.pin-set i:nth-of-type(6),
.pin-set u:nth-of-type(6) {
  transition-delay: calc(6 * var(--delay-between-pins));
}

.pin-set i:nth-of-type(7),
.pin-set u:nth-of-type(7) {
  transition-delay: calc(7 * var(--delay-between-pins));
}

[data-key="year-2019-1"] b.steam {
  display: none;
}

#legend {
  position: absolute;
  left: 9%;
  top: 56%;
  width: 32%;
  height: 33%;
  opacity: 0;
  transition: all 750ms;
  display: flex;
  flex-flow: column wrap;
}

#legend.big {
  opacity: 1;
}

#legend.small { 
  left: 60px;
  top: calc(5% + 18vw * (1179/2133) + 5%);
  width: 14.375%;
  min-width: 175px;
  height: 23%;
  opacity: 1;
}

#legend li {
  min-height: 0;
  min-width: 0;
  display: flex;
  width: 50%;
  margin-bottom: 1vh;
  height: calc((100% - 4vh) / 4);
}

#legend.small li {
  height: calc((100% - 7vh) / 7);
  width: 100%;
}

#legend svg {
  display: block;
  height: 100%;
}

.legend-icon svg {
  display: block;
  height: 100%;
  transition: all 750ms;
}

#legend .label {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  padding-left: 5%;
  padding-right: 5%;
  font-family: "CNN Sans Condensed",sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  color: #7d7d7d;
  text-transform: uppercase;
  letter-spacing: 0.0667em;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 750ms;
  white-space: nowrap;
}

#legend.small .label {
  font-size: 11px;
}

#legend.hide {
  opacity: 0;
}

#milestone-container {
  position: absolute;
  left: 60px;
  top: 55%;
  width: 33%;
  min-width: 375px;
  height: 33%;
  z-index: 100;
}

.milestone-info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.milestone-info.intersecting.active {
  opacity: 1;
  transition: opacity 300ms linear 1s;
}

.milestone-info.intersecting:not(.active) {
  opacity: 0;
  transition: opacity 150ms linear 0s;
}

.milestone-info > div {
  height: 100%;
  display: grid;
  grid-template: 1fr / minmax(150px, 40fr) 54fr;
  grid-gap: calc(100% * (25 / (1440 * 0.33)));
}

.milestone-info img {
  grid-column: 1 / 2;
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-filter: blur(0px);
          filter: blur(0px);
  transition: -webkit-filter 500ms;
  transition: filter 500ms;
  transition: filter 500ms, -webkit-filter 500ms
}

.milestone-info img.load-event {
    -webkit-filter: blur(4px);
            filter: blur(4px);
    transition-duration: 0ms;
  }

.milestone-info .description {
  grid-column: 2 / 3;
  font-family: "CNN Sans Display",sans-serif;
  font-size: 15px;
  font-size: calc(100vw * (1/208) + 1px * (105/13));
  line-height: 1.2;
}

.milestone-info .description h1 {
  font-weight: 500;
  font-size: 120%;
  line-height: 1.11;
  color: #fff;
  padding-top: calc(1em * 2/3);
  border-top: 1px solid #FF6400;
}

.milestone-info .description h2 {
  font-size: 93.333%;
  text-transform: uppercase;
  color: #EF5139;
  margin-top: calc(1em * 1/3);
}

.milestone-info .description p {
  color: #BEBEBE;
  font-weight: 300;
  margin-top: calc(1em * 2/3);
}

.milestone-info ul {
  position: absolute;
  height: calc(100% * (37 / (810 * 0.33)));
  left: 0;
  top: 0;
  -webkit-transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
          transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
  display: flex;
}

.milestone-info ul li {
  height: 100%;
  margin-left: 13.5%;
}

.milestone-info ul li svg {
  display: block;
  height: 100%;
}

#nav-guide {
  position: absolute;
  right: 20px;
  width: 15px;
  top: 5%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(to right, #4a4a4a 0%, #4a4a4a 100%);
  background-size: 5px calc(100% - 15px);
  background-position: 50%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 325ms linear 0ms;
}

#nav-guide.intro {
  opacity: 1;
  transition: opacity 750ms linear 325ms;
}

#nav-guide li {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

#nav-guide li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 50%;
  transition: background-color 325ms;
  z-index: 1;
}

#nav-guide li:hover::before,
#nav-guide li.active::before {
  background-color: #EF5139;
}

#nav-guide li.active + li.active::before {
  background-color: transparent;
}

#nav-guide li::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: white;
  transition: background-color 325ms;
  z-index: 2;
}

#nav-guide li.below::after {
  background-color: #63666A;
}

#nav-guide-arrows {
  position: absolute;
  right: calc(20px + 15px + 15px);
  bottom: 5%;
  display: flex;
  flex-direction: column;
  transition: opacity 325ms;
}

#nav-guide-arrows:not(.intro) {
  pointer-events: none;
  opacity: 0;
}

#nav-guide-arrows.intro {
  pointer-events: auto;
  opacity: 1;
}

#nav-guide-arrows button {
  border: none;
  background: none;
  padding: 0;
  height: calc(100vh * 50/810);
  cursor: pointer
}

#nav-guide-arrows button:focus {
    outline: none;
  }

#nav-guide-arrows .previous {
  margin-bottom: calc(100vh * 23/810);
  --rotation: -90deg;
}

#nav-guide-arrows .next {
  --rotation: 90deg;
}

#nav-guide-arrows button svg {
  display: block;
  height: 100%;
  -webkit-transform: rotate(var(--rotation));
          transform: rotate(var(--rotation));
}

#start {
  position: absolute;
  bottom: 5%;
  width: 15%;
  min-width: 220px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #EF5139;
  padding: 0.25em;
  text-transform: uppercase;
  font-family: "CNN Sans Condensed",sans-serif;
  font-weight: bold;
  font-size: 21px;
  line-height: 1;
  color: white;
  border: none;
  border-radius: calc(1em + 2 * 0.25em);
  transition: opacity 300ms
}

#start:focus,
  #start:active {
    outline: none;
  }

#start:not(.intro) {
  opacity: 1;
  pointer-events: auto;
}

#start.intro {
  opacity: 0;
  pointer-events: none;
}

#infographic {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  background-color: #222;
}

.natural-gas-steam-border,
.natural-gas {
  --clr-icon: var(--clr-natural-gas);
}

.natural-gas-steam-border {
  --clr-border: var(--clr-steam);
}

.hydro {
  --clr-icon: var(--clr-hydro);
}

.steam {
  --clr-icon: var(--clr-steam);
}

.solar {
  --clr-icon: var(--clr-solar);
}

.diesel {
  --clr-icon: var(--clr-diesel);
}

.wind {
  --clr-icon: var(--clr-wind);
}

.gas-lco {
  --clr-icon: var(--clr-gas-lco);
}

.grid {
  --clr-icon: var(--clr-grid);
}

@media (max-width: 325px) and (-webkit-min-device-pixel-ratio: 2),(max-width: 325px) {

    #map { 
        left: 25%;
        top: 25%;
        height: 55%;
        opacity: .20;
    }

    #nav-guide {
        display: none;
    }

    #title-card > h1 {
        color: #FF6400;
        color: var(--clr-natural-gas);
        text-transform: uppercase;
        left: 10%;
        top: 300px;
        width: 100%;
        text-align: left;
        letter-spacing: 4px;
        font-size: 24px;
    }

    #title-card > img {
        position: absolute;
        left: 10%;
        top: 140px;
        width: 85%;
    }

    #title-card > #color100{
        opacity: 0;
        max-width: 230px;
    }

    #title-card .subhed {
        left: 10%;
        top: 330px;
        width: 75%;
        font-weight: 300;
        font-size: 16px;
        text-transform: uppercase;
    }

    #nav-guide-arrows {
        flex-direction: row;
        bottom: 1%;
        right: 5%;
    }

    #nav-guide-arrows .previous {
        margin-right: calc(100vh * 23/810);
        --rotation: 180deg;
    }

    #nav-guide-arrows .next {
        --rotation: 0deg;
    }


    /* Intro Point */
    #map.intro {
        left: 0;
        right: auto;
        top: auto;
        bottom: 5%;
        opacity: .40;
        width: 100vw;
        height: 100vw;
    }

    #intro-copy, #outro-copy {
        font-size: 12px;
    }

    #title-card.intro > img {
        width: 55%;
        height: auto;
        left: 10%;
        top: 50px;
        opacity: 0;
    }

    #title-card.intro > #color100{
        opacity: 1;
    }

    #title-card.intro > h1 {
        font-size: 24px;
        width: 90%;
        left: 10%;
        top: 150px;
        max-width: none;
        letter-spacing: 0.0809375em;
    }

    #title-card.intro > h1 > span {
        font-size: 24px;
    }

    #title-card.intro .subhed {
        left: 10%;
        top: 180px;
        width: 84%;
        font-weight: 300;
        font-size: 21px;
        text-transform: uppercase;
        font-size: 12px;
        border-bottom: solid 1px #FF6400;
        border-bottom: solid 1px var(--clr-natural-gas);
        padding-bottom: 10px;
    }

    #title-card.intro .byLine {
        display: none;
    }

    #intro-copy {
        top: 230px;
        left: 10%;
        width: 85%;
    }

    /* Legend Point */
    #legend {
        position: absolute;
        left: 10%;
        top: 60px;
        width: 80%;
        height: 33%;
        opacity: 0;
        transition: all 750ms;
        display: flex;
        flex-flow: column wrap;
    }

    #legend.small {
        left: 10%;
        top: 40%;
        width: 40%;
        height: 35%;
        opacity: 0;
        display: none;
    }

    #legend .label{
        font-size: 12px;
    }

    #legend.small li {
        height: calc((100% - 7vh) / 7);
        width: 100%;
        opacity: 0;
    }


    /* Mile Stones */
    #milestone-container {
        position: absolute;
        left: 5%;
        top: 5%; 
        width: 90%;
        min-width: auto;
        height: 33%;
    }

    .milestone-info img {
        grid-row: 1 / 2;
        height: 100%;
        width: 100%;
        object-fit: cover;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        transition: -webkit-filter 500ms;
        transition: filter 500ms;
        transition: filter 500ms, -webkit-filter 500ms;
    }

    .info ul {
        position: absolute;
        height: calc(100% * (37 / (810 * 0.33)));
        left: 0;
        top: 0;
        -webkit-transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        display: flex;
    }

    .milestone-info {
        left: 0;
        width: 100%;
        height: 100%;
    }

    .milestone-info ul {
        position: absolute;
        height: calc(100% * (37 / (810 * 0.33)));
        left: auto;
        left: initial;
        top: auto;
        top: initial;
        right: 10px;
        bottom: 10px;
        -webkit-transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        display: flex;
    }

    .milestone-info .description {
        grid-column: 2 / 3;
        font-family: "CNN Sans Display",sans-serif;
        font-size: 12px;
        line-height: 1.4;
    }

    .milestone-pins, .pin-set {
        position: absolute;
        top: 0px;
        left: 21%;
        width: 70%;
        height: 100%;
        --delay-between-pins: 100ms;
    }

    #map.intro > img {
        width: 100%;
    }

    #stat-year {
        bottom: 2%;
        top: auto;
        left: 10%;
        right: 5%;
        display: flex;
        flex-direction: column-reverse;
        opacity: 0;
        -webkit-transform: translateY(75%);
        transform: translateY(75%);
        transition: all 375ms ease-in 0;
        text-align: left;
        pointer-events: none;
    }

    #stat-year .stat {
        bottom: 20px;
    }

    #stat-year .stat::before,
    #stat-year .stat::after {
        white-space: nowrap;
        left: 0;
    }

    #stat-year .stat::before {
        bottom: calc(100% + 0.5em);
    }

    #stat-year .stat::after {
        top: calc(100% + 0.5em);
    }

    #stat-year .year{
        border-top: solid 1px gray;
        padding-top: 10px; 
    }

    .milestone-info > div {
        height: 100%;
        display: block;
        grid-template: none;
        grid-gap: unset;
    }

    .milestone-info ul li svg {
        display: block;
        height: 150%;
    }

    /* Outro */
    #outro-copy {
        top: 20%;
        left: 5%;
        width: 90%;
        padding-top: 1em;
        border-top: 1px solid #FF6400;
    }
/*  ------ Mobile Smalls End here --------- */
}

@media (max-width: 500px) and (min-width: 325px) and (-webkit-min-device-pixel-ratio: 2),(max-width: 500px) and (min-width: 325px) {

#map { 
    left: 25%;
    top: 25%;
    height: 55%;
    opacity: .20;
}

#nav-guide {
    display: none;
}

#title-card > h2 {
    top: 20px;
    left: 20px;
}

#title-card > h1 {
    color: #FF6400;
    color: var(--clr-natural-gas);
    text-transform: uppercase;
    left: 20px;
    top: 325px;
    width: calc(100% - 2 * 20px);
    text-align: left;
    letter-spacing: 5px;
}

#title-card.outro > #color100 {
    top: calc(20px + 100vh * 36/810);
    left: 20px;
    width: 45%;
}

#title-card > img {
    position: absolute;
    left: 20px;
    top: 150px;
    width: 80%;
}

#title-card > #color100{
    opacity: 0;
    max-width: 230px;
}

#title-card > #image100{
    max-width: 300px;
}

#title-card .subhed {
    left: 20px;
    top: 360px;
    width: calc(100% - 2 * 20px);
    min-width: auto;
    font-weight: 300;
    font-size: 21px;
    text-transform: uppercase;
}

#nav-guide-arrows {
    flex-direction: row;
    bottom: 1%;
    right: 5%;
}

#nav-guide-arrows .previous {
    margin-right: calc(100vh * 23/810);
    --rotation: 180deg;
}

#nav-guide-arrows .next {
    --rotation: 0deg;
}


/* Intro Point */
#map.intro {
    left: 0;
    top: auto;
    right: auto;
    bottom: 5%;
    width: 100vw;
    height: 100vw;
    opacity: .40;
}

#title-card.intro > img {
    width: 55%;
    height: auto;
    left: 10%;
    top: 20px;
    opacity: 0;
}

#title-card.intro > #color100{
    opacity: 1;
}

#title-card.intro > h1 {
    font-size: 24px;
    width: calc(100% - 2 * 20px);
    left: 20px;
    top: 140px;
    max-width: none;
    letter-spacing: 0.0809375em
}

    #title-card.intro > h1 span {
        font-size: 24px;
    }

#title-card.intro .subhed {
    left: 20px;
    top: 175px;
    width: calc(90% - 2 * 20px);
    font-weight: 300;
    font-size: 21px;
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: solid 1px #FF6400;
    border-bottom: solid 1px var(--clr-natural-gas);
    padding-bottom: 15px;
}

#title-card.intro .byLine {
    display: none;
}

#title-card.legend {
    display: none;
}

#title-card.outro {
    display: block;
}

#intro-copy {
    top: 230px;
    left: 20px;
    width: calc(90% - 2 * 20px);
}

/* Legend Point */
#legend {
    position: absolute;
    left: 10%;
    top: 60px;
    width: 80%;
    height: 33%;
    opacity: 0;
    transition: all 750ms;
    display: flex;
    flex-flow: column wrap;
}

#legend.small {
    left: 10%;
    top: 40%;
    width: 40%;
    height: 35%;
    opacity: 0;
    display: none;
}

#legend .label{
    font-size: 12px;
}

#legend.small li {
    height: calc((100% - 7vh) / 7);
    width: 100%;
}

/* Mile Stones */
    #milestone-container {
        position: absolute;
        left: 5%;
        top: 5%; 
        width: 90%;
        min-width: auto;
        height: 33%;
    }

    .milestone-info img {
        grid-row: 1 / 2;
        height: 100%;
        width: 100%;
        object-fit: cover;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        transition: -webkit-filter 500ms;
        transition: filter 500ms;
        transition: filter 500ms, -webkit-filter 500ms;
    }

    .info ul {
        position: absolute;
        height: calc(100% * (37 / (810 * 0.33)));
        left: 0;
        top: 0;
        -webkit-transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        display: flex;
    }

    .milestone-info {
        left: 0;
        width: 100%;
        height: 100%;
    }

    .milestone-info ul {
        position: absolute;
        height: calc(100% * (37 / (810 * 0.33)));
        left: auto;
        left: initial;
        top: auto;
        top: initial;
        right: 10px;
        bottom: 10px;
        -webkit-transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        display: flex;
    }

    .milestone-info .description {
        grid-column: 2 / 3;
        font-family: "CNN Sans Display",sans-serif;
        font-size: 12px;
        line-height: 1.4;
    }

    #stat-year {
        bottom: 2%;
        top: auto;
        left: 10%;
        right: 5%;
        display: flex;
        flex-direction: column-reverse;
        opacity: 0;
        -webkit-transform: translateY(75%);
        transform: translateY(75%);
        transition: all 375ms ease-in 0;
        text-align: left;
        pointer-events: none;
    }

    #stat-year .stat {
        bottom: 20px;
    }

    #stat-year .stat::before,
    #stat-year .stat::after {
        white-space: nowrap;
        left: 0;
    }

    #stat-year .stat::before {
        bottom: calc(100% + 0.5em);
    }

    #stat-year .stat::after {
        top: calc(100% + 0.5em);
    }

    #stat-year .year{
        border-top: solid 1px gray;
        padding-top: 10px; 
    }

    .milestone-info > div {
        height: 100%;
        display: block;
        grid-template: none;
        grid-gap: unset;
    }

    .milestone-info ul li svg {
        display: block;
        height: 150%;
    }

    /* Outro */
    #outro-copy {
        font-size: 0.875rem;
        top: calc(20px + 100vh * 36/810 + 45vw * (87/160) + 1rem);
        left: 20px;
        width: calc(100% - 2 * 20px);
        padding-top: 1em;
        border-top: 1px solid #FF6400;
    }

/*  ------ Mobile Ends here --------- */
}

@media (min-width: 500px) and (max-width: 800px) and (max-height: 800px) and (-webkit-min-device-pixel-ratio: 2),(min-width: 500px) and (max-width: 800px) {


#map { 
    left: 25%;
    top: 25%;
    height: 55%;
    opacity: .20;
}

#nav-guide {
    display: none;
}

#title-card > h1 {
    color: #FF6400;
    color: var(--clr-natural-gas);
    left: 10%;
    top: 530px;
    width: 100%;
    letter-spacing: 10px;
    font-size: 60px;
}

#title-card > img {
    position: absolute;
    left: 10%;
    top: 180px;
    width: 80%;
}

#title-card > #color100{
    opacity: 0;
    max-width: 400px;
}

#title-card > #image100{
    max-width: none;
}

#title-card .subhed {
    left: 10%;
    top: 590px;
    width: 80%;
    font-weight: 300;
    font-size: 24px;
    text-transform: uppercase;
}

#nav-guide-arrows {
    flex-direction: row;
    bottom: 1%;
    right: 5%;
}

#nav-guide-arrows .previous {
    margin-right: calc(100vh * 23/810);
    --rotation: 180deg;
}

#nav-guide-arrows .next {
    --rotation: 0deg;
}


/* Intro Point */

#map.intro {
    left: 0%;
    top: 40%;
    right: 0px;
    opacity: .40;
    height: 46.75%;
}

#title-card.intro > img {
    width: 55%;
    height: auto;
    left: 10%;
    top: 100px;
    opacity: 0;
}

#title-card.intro > #color100{
    opacity: 1;
}

#title-card.intro > h1 {
    font-size: 32px;
    width: calc(100% - 2 * 20px);
    left: 20px;
    top: 330px;
    max-width: none;
    letter-spacing: 0.0809375em;
}

#title-card.intro .subhed {
    left: 10%;
    top: 370px;
    width: 80%;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 24px;
    border-bottom: solid 1px #FF6400;
    border-bottom: solid 1px var(--clr-natural-gas);
    padding-bottom: 20px;
}

#title-card.intro .byLine {
    display: none;

}

#title-card.legend {
    display: none;
}

#intro-copy {
    top: 470px;
    left: 10%;
    font-size: 100%;
    width: 80%;
}

/* Legend Point */

#legend {
    position: absolute;
    left: 10%;
    top: 60px;
    width: 80%;
    height: 33%;
    opacity: 0;
    transition: all 750ms;
    display: flex;
    flex-flow: column wrap;
}

#legend.small {
    left: 10%;
    top: 40%;
    width: 40%;
    height: 35%;
    opacity: 0;
    display: none;
}

#legend .label{
    font-size: 12px;
}

#legend.small li {
    height: calc((100% - 7vh) / 7);
    width: 100%;
}


/* Mile Stones */
    #milestone-container {
        position: absolute;
        left: 10%;
        top: 5%; 
        width: 80%;
        height: 33%;
    }

    .milestone-info img {
        grid-row: 1 / 2;
        height: 100%;
        width: 100%;
        object-fit: cover;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        transition: -webkit-filter 500ms;
        transition: filter 500ms;
        transition: filter 500ms, -webkit-filter 500ms;
    }

    .info ul {
        position: absolute;
        height: calc(100% * (37 / (810 * 0.33)));
        left: 0;
        top: 0;
        -webkit-transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        display: flex;
    }

    .milestone-info {
        left: 0;
        width: 100%;
        height: 100%;
    }

    .milestone-info ul {
        position: absolute;
        height: calc(100% * (37 / (810 * 0.33)));
        left: auto;
        left: initial;
        top: auto;
        top: initial;
        right: 10px;
        bottom: 10px;
        -webkit-transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        transform: translate(calc(100vh * (37/810) * (1/2) * -1), -50%);
        display: flex;
    }

    .milestone-info .description {
        grid-column: 2 / 3;
        font-family: "CNN Sans Display",sans-serif;
        font-size: 15px;
        line-height: 1.4;
    }

    #stat-year {
        bottom: 2%;
        top: auto;
        left: 10%;
s        right: 5%;
        width: 80%;
        display: flex;
        flex-direction: column-reverse;
        opacity: 0;
        -webkit-transform: translateY(75%);
        transform: translateY(75%);
        transition: all 375ms ease-in 0;
        text-align: left;
        pointer-events: none;
    }

    #stat-year .stat {
        bottom: 20px;
    }

    #stat-year .stat::before,
    #stat-year .stat::after {
        white-space: nowrap;
        left: 0;
    }

    #stat-year .stat::before {
        bottom: calc(100% + 0.5em);
    }

    #stat-year .stat::after {
        top: calc(100% + 0.5em);
    }

    #stat-year .year{
        border-top: solid 1px gray;
        padding-top: 10px; 
    }

    .milestone-info > div {
        height: 100%;
        display: block;
        grid-template: none;
        grid-gap: unset;
    }

    .milestone-info ul li svg {
        display: block;
        height: 150%;
    }

    /* Outro */
    #outro-copy {
        top: 20%;
        left: 5%;
        width: 90%;
        padding-top: 1em;
        border-top: 1px solid #FF6400;
    }


/*  ------ Tablet Portrait Ends here --------- */
}

@media (max-width: 1030px) and (max-height: 800px) and (-webkit-min-device-pixel-ratio: 2),(max-width: 1030px) and (max-height: 800px) {


/*  ------ Tablet landscape Endss here --------- */
}

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

html,
body {
  min-height: 100vh;
}

body {
  background-color: #15100D;
  color: white;
  display: flex;
  flex-direction: column;
}

main {
  z-index: 10;
  position: relative;
}

#timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

#timeline article {
  height: 75vh;
  margin-bottom: 25vh;
}

#icon-templates {
  position: absolute;
  z-index: -1;
}