/* Je Fe V2.0
 * Copyright 2018, Jethro Wilson
 * jethrowilson.com
 */
/*
    Je provides the styles for JethroWilson.com.

    Je uses Fe 2.0 as a base, and is written with sass (ooohhh)
*/
/*
    i. Color
*/
/*
   ii. Fonts
*/
.desktop {
  display: grid !important;
}

.mobile {
  display: none !important;
}

@media (max-width: 599px) {
  .desktop {
    display: none !important;
  }

  .mobile {
    display: grid !important;
    grid-gap: 0;
  }
}
header {
  background-image: url(/resources/images/header/paper/PaperSq@2x.jpg);
  background-size: 250px 250px;
  background-position: center center;
  overflow: hidden;
  text-align: center;
  padding: 0;
  margin-bottom: 2rem;
  height: 80vh;
}
@media (min-width: 1370px) {
  header {
    background-attachment: fixed;
  }
}
@media (max-width: 599px) {
  header {
    height: auto;
    background: none;
  }
}
header .hero {
  background-image: url(HeroTorch.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-gap: 0%;
  height: 100%;
}
@media (max-width: 599px) {
  header .hero {
    height: 60vw;
    width: 100%;
    background-size: auto 50vw !important;
  }
}
@media (min-width: 1370px) {
  header .hero {
    background-attachment: fixed;
  }
}
header h1 {
  font-family: "Vollkorn";
  font-size: 12rem;
  font-weight: 600;
  align-self: center;
  color: #14adff;
  mix-blend-mode: multiply;
  align-self: center;
}
header nav {
  height: auto;
  align-self: end;
}
header nav ul {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
header nav ul li a {
  text-transform: uppercase;
  color: inherit;
  mix-blend-mode: normal;
  font-weight: 600;
  letter-spacing: 0.15rem;
  font-size: 1.2rem;
}
header nav ul li a:hover, header nav ul li a:focus {
  mix-blend-mode: multiply;
  color: #14adff;
}
header nav ul li a:active {
  mix-blend-mode: overlay;
}
@media (max-width: 599px) {
  header h1 {
    font-size: 5rem;
  }
  header nav ul {
    list-style: none;
    width: 100%;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.1em;
  }
  header nav ul li {
    display: block;
    margin-left: 0%;
    margin-bottom: 2rem;
  }
}
header nav#light {
  color: #eee;
}
header nav#dark {
  color: #808080;
}
header #i1 {
  background-image: url(/resources/images/header/heroes/jazz%20guitar.png);
  background-position: center center;
  background-size: 300px auto;
}
header #i2 {
  background-image: url(/resources/images/header/heroes//jazz%20dance.png);
  background-position: center center;
  background-size: 300px auto;
}
header #i3 {
  background-image: url(/resources/images/header/heroes//HeroTorch.png);
  background-position: center center;
  background-size: 300px auto;
}
header #i4 {
  background-image: url(/resources/images/header/heroes//octopus.png);
  background-position: center center;
  background-size: 300px auto;
}
header #i5 {
  background-image: url(/resources/images/header/heroes//astronaut.png);
  background-position: center center;
  background-size: 300px auto;
}
header #i6 {
  background-image: url(/resources/images/header/heroes//bag.png);
  background-position: center center;
  background-size: 400px auto;
}
header #i7 {
  background-image: url(/resources/images/header/heroes//basket.png);
  background-position: center center;
  background-size: 600px auto;
}
header #i8 {
  background-image: url(/resources/images/header/heroes//plane.png);
  background-position: center center;
  background-size: 300px auto;
}
header #i9 {
  background-image: url(/resources/images/header/heroes//saxophone.png);
  background-position: center center;
  background-size: 400px auto;
}
header #i10 {
  background-image: url(/resources/images/header/heroes//splash.png);
  background-position: center center;
  background-size: 450px auto;
}
header #i11 {
  background-image: url(/resources/images/header/heroes//teddy.png);
  background-position: center center;
  background-size: 300px auto;
}
header #i12 {
  background-image: url(/resources/images/header/heroes//summer%20plans.png);
  background-position: center center;
  background-size: 600px auto;
}
header #i13 {
  background-image: url(/resources/images/header/heroes//dragon.png);
  background-position: center center;
  background-size: 600px auto;
}
header #i14 {
  background-image: url(/resources/images/header/heroes//dragon.png);
  background-position: center center;
  background-size: 600px auto;
}
header #i15 {
  background-image: url(/resources/images/header/heroes//rocketSingle.png);
  background-position: center center;
  background-size: 800px auto;
}
header #i16 {
  background-image: url(/resources/images/header/heroes//rocketDouble.png);
  background-position: center center;
  background-size: 800px auto;
}
header #i17 {
  background-image: url(/resources/images/header/heroes//The_Balloonist_One.png);
  background-position: right top;
  background-size: 70% auto;
}
header #i18 {
  background-image: url(/resources/images/header/heroes//drifting.png);
  background-position: center center;
  background-size: 100% auto;
}
header #i19 {
  background-image: url(/resources/images/header/heroes//summer.png);
  background-position: center bottom;
  background-size: 100% auto;
}

/*# sourceMappingURL=je-header.css.map */