:root{
  --lblue:#009fe3;
  --blue:#09497e;
  --bgblue:#070c14;
  --red:#8f1b1e;
  --lred:#cc3135;

  --orange:#f23527;
  --yellow:#f8d517;
}

@font-face {
  font-family: 'bf';
  src: url('../fonts/boldfinger-webfont.woff2') format('woff2'),
       url('../fonts/boldfinger-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
  padding:0;
  margin:0;
  box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

::selection {
  background-color:var(--orange);
  color:#fff;
}

img {
  max-width:100%;
  display:block;
}

.wrap {
  position:relative;
  width:1240px;
  padding:0 20px;
  max-width:100%;
  margin:0 auto;
  clear:both;
}

#burger {
  display:none;
}

html {
  min-height:100vh;
}

body {
  float:left;
  width:100%;
  font-size:62.5%;
  background-color:var(--bgblue);
  color:#fff;
  font-family: 'Lato', sans-serif;
  min-height:100vh;
  position:relative;
}

header {
  position:fixed;
  z-index:100;
  width:100%;
  left:0;
  top:0;
  padding:1em 0 4em 3em;
}

  .nav-dimmer {
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0) 100%);
    opacity:0;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transition: opacity 1s ease-out;
  }

  .dim .nav-dimmer {
    opacity:1;
  }

  #logo {
    position: fixed;
    z-index:2;
    height:100vh;
    width:auto;
    right:0;
    top:0;
  }

    #logo img {
      width:100%;
      user-select: none;
      object-fit: contain;
      object-position: top right;
    }

    nav {
      position: relative;
      z-index:2;
    }

    nav,
    nav ul,
    nav li,
    nav a {
      float:left;
      list-style: none;
    }

    nav ul {
      width:100%;
    }

      nav li {
        margin-right:3em;
      }

          nav a,
          nav button {
            position:relative;
            float:left;
            text-decoration: none;
            font-size:1.2em;
            font-weight: 600;
            padding:1em 0;
            text-transform: uppercase;
            transition:color 0.5s ease-in-out;
            letter-spacing: 0.1em;
          }

          nav a span {
            position:absolute;
            left:0;
            bottom:0;
            width:0;
            height:4px;
            background-color:#fff;
            transition:width 0.25s ease-in-out;
          }

            nav ul li a:hover span,
            nav button:hover span,
            .active span{
              width:calc(100% - 1px);
            }

            nav .social {
              display:none;
            }

            .social {
              position:fixed;
              left:3em;
              bottom:3em;
              z-index:100;
            }

              .social a {
                float:left;
                clear:left;
                border:none;
                padding:0;
                margin-bottom:0.5em;
                width:2.2em;
                transition: transform 0.5s ease-in-out;
              }

                .social a img {
                  width:100%;
                  transform:translateX(0);
                  transition:transform 0.5s ease;
                }

                .social a:hover img {
                  filter: saturate(0) brightness(20);
                  transform:translateX(5px);
                }

                li.social .line {
                  margin:1.1em 0;
                }
.bg {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.dim-check {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:25vh;
}

.dim-the-lights {
  position:fixed;
  z-index:1;
  inset:0;
  width:100vw;
  height:100vh;
  background-color:#000;
  opacity:0;
  transition:opacity 1.5s ease-in-out;
}

  .dim-the-lights.run {
    opacity:0.6;
  }

main {
	margin-left:9vw;
	float:left;
	position: relative;
	z-index:2;
  width:50vw;
}

.flex {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1 {
  font-family: 'bf',sans-serif;
  color:var(--yellow);
  text-shadow: 0.1em 0.1em #000;
  font-weight:normal;
}

main p,
main li{
	font-size:1.8em;
	line-height:1.6;
	margin-bottom:1em;
  clear:left;
  font-weight:bold;
}

main ul,
main ol {
  margin:2em;
}

  main li {
    padding-left:1em;
  }

main h2,
main h3,
main h4,
main h5,
main h6 {
	font-size:2.5em;
  letter-spacing: -0.025em;
	margin-bottom:1em;
}

main h3 {
	font-size:2.2em;
}

main h4 {
	font-size:1.9em;
}

main h5 {
	font-size:1.6em;
}

main h6 {
	font-size:1.3em;
}

main td {
  font-size:1.6em;
  padding:1em;
}

  main td p,
  main td li {
    font-size:1em;
    margin-bottom:0;
  }

  main p a {
    color:var(--yellow);
  }

  main td img {
    display:inline-block;
  }

blockquote {
  margin:7.5em 0;
  width:62.5%;
}

  blockquote:nth-of-type(2n+2){
    margin-left:37.5%;
  }

blockquote p {
  font-size:4.5em;
  line-height:1.1;
  font-weight: 300;
  letter-spacing: -0.025em;
  font-family: 'Big Shoulders Display', sans-serif;
  margin-bottom:0.25em;
}

  blockquote p.giver {
    font-size:1.6em;
    font-family: 'Lato', sans-serif;
    font-weight:bold;
    text-transform: uppercase;
    color:var(--orange);
    letter-spacing: 0.1em;
  }

.transition {
  transition:all 1s ease-out;
}

  .fadein {
    opacity:0;
  }

  .fadein.go {
    opacity:1;
  }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5em 1em 1em 0;
}

img.align_right {
  margin:0.5em 0 1em 1em;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}
  
footer {
  float:left;
  clear:left;
  width:100%;
  margin-top:2em;
  color:#fff;
}

  main p.copyright {
    font-size:1em;
    line-height:1.5;
    width:100%;
    margin-top:1em;
    margin-bottom:3em;
    opacity:0.4;
  }

.btn {
  display:inline-block;
  text-transform: uppercase;
  background-color:var(--red);
  color:#fff;
  text-decoration: none;
  padding:1em;
  text-align: center;
  line-height:1;
  transition: background-color 0.5s ease-in-out;
}

  .btn span {
    display:block;
    width:19em;
    border:1px solid #fff;
    padding:1em;
    font-size: 1.2em;
    letter-spacing: 0.25em;
    transition: border 0.5s ease-in-out, color 0.5s ease-in-out;
  }

  .btn:hover {
    background-color:#fff;
  }

  .btn:hover span {
    color:#000;
    border:1px solid #000;
  }

.red-overlay,
.red-overlay-cutout {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows: 100vh 1fr;
  mix-blend-mode: multiply;
  transform: translateZ(0);
}

  .red-overlay {
    grid-template-rows: 1fr;
  }

  #cutout {
    mix-blend-mode: multiply;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    z-index:0;
  }

  .red-overlay > div,
  .red-overlay-cutout > div {
    background-color:var(--orange);
    width:100%;
    height:100%;
    mix-blend-mode: multiply;
  }

.fade-in,
.fade-in-noscroll {
  opacity:0;
}

.fade-in.run,
.fade-in-noscroll {
  animation-name: fade-in;
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier();
}

.fade-in:nth-of-type(10n+1){
  animation-delay: 0s;
}
.fade-in:nth-of-type(10n+2){
  animation-delay: 0.15s;
}
.fade-in:nth-of-type(10n+3){
  animation-delay: 0.3s;
}
.fade-in:nth-of-type(10n+4){
  animation-delay: 0.45s;
}
.fade-in:nth-of-type(10n+5){
  animation-delay: 0.6s;
}
.fade-in:nth-of-type(10n+6){
  animation-delay: 0.75s;
}
.fade-in:nth-of-type(10n+7){
  animation-delay: 0.9s;
}
.fade-in:nth-of-type(10n+8){
  animation-delay: 1.05s;
}
.fade-in:nth-of-type(10n+9){
  animation-delay: 1.2s;
}
.fade-in:nth-of-type(10n+10){
  animation-delay: 1.35s;
}

@keyframes fade-in {
  0% {
    transform:translateX(-15px);
    opacity:0;
  }
  100%{
    transform:translateY(0);
    opacity:100%;
  }
}

@media screen and (max-width:1099px) {
  main {
    width:calc(85vw - (100vh / 5.6));
  }
}
  
@media screen and (max-width:999px) {

  header {
    width:10em;
    height:100%;
    transition:width 0.5s ease-in-out;
    pointer-events: none;
  }

  .nav-dimmer {
    position:fixed;
    background:unset;
    background-color:#000e;
    opacity:1;
    left:unset;
    height:100%;
    width: 100%;
    right:100%;
    transition: right 0.5s ease-in-out;
  }

  header.open {
    width:100%;
  }

  header.open .nav-dimmer {
    right:0;
    width:100%;
  }


    #burger {
      float:left;
      clear:left;
      display:block;
      width:35px;
      position: relative;
      z-index:5;
      margin-top:2em;
      pointer-events: all;
    }

    nav {
      position:fixed;
      width:35em;
      top:11em;
      display:none;
      pointer-events: all;
    }

    nav,
    nav li,
    nav a {
      float:left;
      clear:left;
      margin:0;
    }

      nav li {
        grid-template-columns: 1.5em 1fr;
        margin-bottom:1em;
      }

      nav a {
        font-size:1.2em;
      }

      nav .line {
        margin:1.8em 0;
      }

      .social {
        display:none;
      }

      nav .social {
        display:block;
      }
}

@media screen and (max-width:799px) {
  main {
    margin-left:3em;
  }
}
@media screen and (max-width:459px) {
  #logo {
    position:absolute;
  }

  header {
    padding-left:1.5em;
  }

  #burger {
    margin-top:0.5em;
  }

  main {
    margin:0;
    width:100%;
    padding:86vh 1.5em 0;
  }

    main .text {
      padding-left:0;
    }

  nav .social {
    left:1.5em;
  }
}
@media screen and (max-width:399px) {

}