.header {
  height: 10vh;
  width: 100%;
  background-color: #2A2A2A;
  display: flex;
  flex-direction: row;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

a.logo {
  width: 24vh;
  height: 8vh;
  margin: auto auto auto 3%;
}

img.logo {
  width: 100%;
  height: 100%;
  margin: 0;
}

.menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
  margin: auto 5% auto auto;
}

.menu:focus {
  outline: none;
  box-shadow: none;
}

.menu:active {
  outline: none;
  box-shadow: none;
}

svg#menu-lines {
  width: 100px;
  height: 100px;
}

.line {
  user-select: none;
  fill: none;
  stroke: white;
  stroke-width: 6;
  transition: stroke-dasharray 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.nav-menu {
  background-color: #1D1D1D;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(10vh + 750px);
  z-index: 9;
  transition: top 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.nav-menu-hidden { top: -750px; }

.header-spacer { width: 100%; height: 11vh; margin: 0; background-color: transparent; }

.menu-options-container {
  width: 100%;
  height: calc(100% - 12vh);
  margin: 0;
  margin-bottom: 1vh;
  display: flex;
  flex-direction: column;
}

.menu-option {
  width: 100%;
  height: 20%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-item {
  color: #FFF;
  font-size: 1.5em;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.menu-bkg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background-color: #000;
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;
  pointer-events: all;
}

.menu-bkg-overlay-hidden {
  opacity: 0;
  pointer-events: none;
}

.background {
  position: fixed;
  width: 100%;
  height: 200vh;
  top: 0;
  z-index: -1;
}

.home-bkg {
  position: absolute;
  height: 100%;
  top: -5%;
  left: -35%;
}

.background-image-info {
  position: absolute;
  right: 50px;
  top: calc(10vh + 50px);
  margin: 0;
  color: #FFF;
  font-size: 3vw;
  text-align: right;
  vertical-align: middle;
  opacity: 0.3;
}

.main-container {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.content {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  z-index: 9;
  overflow: hidden;
}

h1.title {
  width: 70%;
  margin: 60vh 15% 0 15%;
  color: #FFF;
  font-size: 10em;
  font-weight: 500;
  text-transform: uppercase;
}

p.title {
  width: 70%;
  margin: 10px 15% 0 15%;
  color: #FFF;
  font-size: 3em;
  font-weight: normal;
  text-transform: uppercase;
}

.div-line {
  font-size: 2.45vw;
  color: #FFF;
  width: 70%;
  margin: 100px 15%;
  text-align: center;
  letter-spacing: 4px;
}

.accent-line {
  width: 60%;
  height: 2px;
  background-color: #FFF;
  margin: 50px 20%;
}

.quote-container {
  width: 70%;
  margin: 0 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.quote-text {
  width: 100%;
  color: #FFF;
  font-size: 2.4vw;
  text-align: center;
  margin: 0;
}

.quote-attribution {
  width: 100%;
  color: #FFF;
  font-size: 2vw;
  text-align: center;
  margin: 30px 0 0 0;
}

.heading {
  width: 70%;
  margin: 100px 15% 0 15%;
  color: #FFF;
  font-size: 3vw;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}

.text {
  width: 70%;
  margin: 30px 15% 100px 15%;
  color: #FFF;
  font-size: 2.4vw;
  text-align: center;
}

.accent-image {
  width: 100%;
  margin: auto 0 0 5%;
  opacity: 0.8;
}

.accent-text {
  position: absolute;
  left: 11%;
  bottom: calc(5vh + 4%);
  color: #AAA;
  font-size: 2.3vw;
  margin: 0;
}

.footer {
  height: 5vh;
  width: 100%;
  background-color: #1D1D1D;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 0 0 0;
  flex-direction: column;
  z-index: 10;
}

.copyright {
  color: #FFF;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 2vw;
}

.website-version {
  color: #AAA;
  margin: 10px 0 0 0;
  text-transform: uppercase;
  font-size: 1.4vw;
}

.mobile { display: block; }

.desktop { display: none; }