.logo {
  margin-top: 15px;
  max-width: 413px;
}

.logo:hover {
  cursor: pointer;
}

.no-svg .logo {
  background-image: url(/static/images/logo.png);
  background-size: cover;
}

@media only screen and (max-width: 767px) {
  .logo {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  #hamburger {
    position: relative;
    background-color: #e93d59;
    border-radius: 50%;
    margin: 60px 0 0;
    width: 100%;
  }

  #hamburger:before {
    content: '';
    display: block;
    padding-top: 100%; /* trick for a height=width */
  }

  #lines {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
    border-radius: 50%;
  }

  #lines div {
    position: relative;
    background: #fff;
    height: 5%;
    margin: 0 auto;
    width: 45%;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
  }

  #lines div:nth-child(1) {
    margin-top: 33%;
  }

  #lines div:nth-child(2),
  #hamburger #lines div:nth-child(3) {
    margin-top: 11%;
  }
  /* After Hamburger click event */
  html.popup {
    overflow: auto;
  }

  .popup body {
    position: absolute;
    min-height: 700px;
    height: 100%;
    overflow: hidden;
  }

  .popup #lines div {
    transform-origin: left;
    margin-left: 33%;
  }

  .popup #lines div:nth-child(1) {
    transform: rotate(45deg);
  }

  .popup #lines div:nth-child(2) {
    transform: scaleX(0);
  }

  .popup #lines div:nth-child(3) {
    transform: rotate(-45deg);
  }

  .popup article {
    filter: blur(10px);
    opacity: 0.5;
  }

  .popup .tag h1 {
    opacity: 0.2;
  }

  .popup header {
    position: static;
    overflow: auto;
  }

  .popup header div.row {
    background-color: rgba(28, 11, 47, 0.8);
  }

  .popup header .row:nth-child(2) {
    min-height: 550px;
    z-index: 1000;
  }

  .popup header nav ul {
    height: auto;
  }

  .popup header nav ul li {
    transform: scale(1);
  }

  .popup footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2%;
    height: 80px;
    z-index: 1000;
    font-size: 1.3em;
    margin: 0 auto;
    opacity: 0.5;
  }

  .row:nth-child(1) div:nth-child(2) {
    outline: 0;
  }
}

@media only screen and (max-width: 700px) {
  .popup body {
    min-height: 650px;
  }
}
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}

nav li {
  padding-bottom: 25px;
  margin-top: 50px;
  color: white;
  text-align: center;
}

nav a {
  color: #7c8ba5;
  padding-bottom: 25px;
  border-bottom: 2px solid transparent;
  transition: all 0.4s ease;
}

nav a:focus {
  color: #7c8ba5;
}

nav a:hover,
nav a.active {
  color: #fff;
  border-bottom: 2px solid #ff425e;
}

nav a.active {
  cursor: default;
}

@media only screen and (max-width: 767px) {
  nav ul {
    display: block;
    margin-top: 30px;
    height: 0;
  }

  nav ul li {
    border-bottom: 2px solid rgba(103, 120, 150, 0.3);
    padding: 20px;
    margin: 0;
    font-size: 1.4em;
    transform: scale(0);
    transition: all 0.5s ease;
  }

  nav ul li:first-child {
    border-top: 2px solid rgba(103, 120, 150, 0.3);
  }

  nav ul li a {
    padding-bottom: 18px; /* TODO What's going on at Safari and Chrome with this border */
  }
}
header hr {
  margin-top: -2px;
}

header {
  z-index: 50; /* For clicking links */
}

@media only screen and (max-width: 767px) {
  header {
    margin-bottom: 20px;
  }

  header div.row {
    transition: all 0.5s ease;
  }

  header hr {
    display: none;
  }

  header .row:nth-child(2) {
    position: absolute;
    height: 100%;
    width: 100%;
    transition: all 0.5s ease;
    z-index: -100;
  }
}
footer {
  padding-top: 20px;
  position: absolute;
  height: 150px;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 1.1em;
  text-align: center;
  z-index: 50; /* Must be more than main */
}

@media only screen and (max-width: 767px) {
  footer {
    height: 100px;
  }
}
@font-face {
  font-family: 'PTMonoRegular';
  src: url('/static/fonts/PTMonoRegular.eot');
  src: url('/static/fonts/PTMonoRegular.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/PTMonoRegular.woff') format('woff'),
    url('/static/fonts/PTMonoRegular.woff2') format('woff2'),
    url('/static/fonts/PTMonoRegular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

html {
  background-color: #220d38;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

body {
  background: repeating-linear-gradient(
      150deg,
      rgba(140, 140, 140, 0.06),
      rgba(140, 140, 140, 0.06) 1px,
      transparent 0,
      transparent 20px
    ),
    repeating-linear-gradient(
      -150deg,
      rgba(140, 140, 140, 0.06),
      rgba(140, 140, 140, 0.06) 1px,
      transparent 0,
      transparent 20px
    );
  background-size: 82px 47px;
  overflow-x: hidden;
  position: relative;
  font-family: 'PTMonoRegular', monospace;
  color: #dbe2f2;
  font-size: 16px;
  line-height: 1.375em;
  max-width: 2000px;
  min-height: 100%;
  margin: auto;
}

h1 {
  font-size: 2em;
  line-height: 1.375em;
}

h2 {
  font-size: 1.5em;
  line-height: 1.333333333333333em;
}

h3 {
  font-size: 1.25em;
  line-height: 1.4em;
}

p {
  line-height: 1.5em;
  color: #7c8ba5;
  margin: 0;
}

label {
  line-height: 1.375em;
  font-weight: 400;
}

blockquote {
  font-size: 1.125em;
  line-height: 1.555555555555556em;
  border-color: #de1c02;
  padding: 0 0 0 15px;
  text-align: justify;
}

hr {
  width: 100%;
  border-top: 2px solid rgba(103, 120, 150, 0.2);
  margin: 0;
}

button {
  color: #fff;
  border: 0;
  border-radius: 4px;
  width: 100%;
  height: 40px;
  outline: none;
  box-shadow: 0 10px 25px 0 rgba(93, 13, 12, 0.3);
  max-width: 190px;
  background: rgb(178, 27, 26);
  background: -moz-linear-gradient(left, rgba(178, 27, 26, 1) 0%, rgba(225, 28, 0, 1) 100%);
  background: -webkit-linear-gradient(left, rgba(178, 27, 26, 1) 0%, rgba(225, 28, 0, 1) 100%);
  background: linear-gradient(to right, rgba(178, 27, 26, 1) 0%, rgba(225, 28, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b21b1a', endColorstr='#e11c00', GradientType=1);
  transition: all 0.1s ease-in-out;
}

button:active {
  box-shadow: none;
  transform: translateY(3px);
}

textarea {
  width: 100%;
  min-height: 100px;
  outline: none;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 10px;
  resize: none;
  overflow: hidden;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

.date {
  color: #7c8ba5;
  opacity: 0.25;
  font-size: 0.875em;
}

.container {
  max-width: 970px;
  position: relative;
}

.browser-upgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    max-width: 100%;
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  body {
    background-image: repeating-linear-gradient(
        150deg,
        rgba(140, 140, 140, 0.06),
        rgba(140, 140, 140, 0.06) 1px,
        transparent 0,
        transparent 20px
      ),
      repeating-linear-gradient(
        -150deg,
        rgba(140, 140, 140, 0.06),
        rgba(140, 140, 140, 0.06) 1px,
        transparent 0,
        transparent 20px
      );
    background-size: 82px 47px;
    font-size: 14px;
    width: 100%;
  }

  .no-svg body {
    background-image: none;
  }
}
/* Keep the legacy clipping and formatting context without a nested body scroller.
   WebKit otherwise sends the first scroll gesture to body's decorative overflow. */
@media only screen and (max-width: 767px) {
  /* The collapsed navigation row still overlaps the first post illustration. */
  html:not(.popup) header > .row:nth-child(2) {
    pointer-events: none;
  }

  body {
    overflow: clip;
    display: flow-root;
  }
}
.content h2 {
  text-align: center;
  margin: 20px auto;
}

.content h3 {
  margin: 20px auto;
}

.content .image-with-caption {
  text-align: center;
  margin-bottom: 30px;
}

.content .image-with-caption img {
  margin-bottom: 0;
}

.content .image-with-caption span {
  display: inline-block;
  font-size: 0.7em;
  line-height: 1.5em;
  margin-top: 10px;
}

.content .pull-right {
  max-width: 70%;
  margin-right: -25%;
  margin-left: 20px;
}

.content .pull-left {
  max-width: 70%;
  margin-left: -25%;
  margin-right: 20px;
}

.content blockquote p {
  margin-top: 25px;
  margin-bottom: 25px;
  font-size: 0.7em;
  line-height: 2em;
}

.content ul {
  list-style: disc inside;
  color: red;
  padding-left: 0;
  margin-top: 25px;
}

.content ul li {
  color: black;
  margin-bottom: 10px;
}

.content ul span {
  color: black;
}

.content ol {
  list-style-position: inside;
  color: red;
  padding-left: 0;
  margin: 20px 0 20px 30px;
}

.content ol li {
  margin-bottom: 10px;
  color: black;
  list-style-position: outside;
}

.content ol span {
  color: black;
}

.content .check-list {
  list-style: none inside;
  color: red;
  margin: 20px 0 20px;
  padding: 0;
}

.content .check-list li {
  margin-bottom: 10px;
}

.content .check-list label {
  color: black;
}

.content .radio-list {
  list-style: none inside;
  color: red;
  margin: 20px 0 20px;
  padding: 0;
}

.content .radio-list li {
  margin-bottom: 10px;
}

.content .radio-list label {
  color: black;
}

/* Base for label styling */
.content [type='checkbox']:not(:checked),
.content [type='radio']:not(:checked),
.content [type='checkbox']:checked,
.content [type='radio']:checked {
  position: absolute;
  left: -9999px;
}

.content [type='checkbox']:not(:checked) + label,
.content [type='radio']:not(:checked) + label,
.content [type='checkbox']:checked + label,
.content [type='radio']:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
.content [type='checkbox']:not(:checked) + label:before,
.content [type='radio']:not(:checked) + label:before,
.content [type='checkbox']:checked + label:before,
.content [type='radio']:checked + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25em;
  height: 1.25em;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* checked mark aspect */
.content [type='checkbox']:not(:checked) + label:after,
.content [type='checkbox']:checked + label:after {
  content: url('/static/images/check.svg');
  position: absolute;
  top: -0.2em;
  left: 0.3em;
  width: 100%;
  transition: all 0.2s ease;
}

/* checked mark aspect changes */
.content [type='checkbox']:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}

.content [type='checkbox']:checked + label:after {
  opacity: 1;
  transform: scale(1);
}

/* disabled checkbox */
.content [type='checkbox']:disabled:not(:checked) + label:before,
.content [type='radio']:disabled:not(:checked) + label:before,
.content [type='checkbox']:disabled:checked + label:before,
.content [type='radio']:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}

.content [type='checkbox']:disabled:checked + label:after,
.content [type='radio']:disabled:checked + label:after {
  color: #999;
}

/* hover style just for information */
.content [type='checkbox']:disabled:not(:checked) + label:hover:before,
.content [type='radio']:disabled:not(:checked) + label:hover:before {
  border-color: #bbb;
}

/* hover style just for information */
.content [type='checkbox'] + label:hover:before,
.content [type='radio'] + label:hover:before {
  border: 1px solid #f00;
}

/* checkbox aspect */
.content [type='radio']:not(:checked) + label:before,
.content [type='radio']:checked + label:before {
  border-radius: 50%;
}

/* checked mark aspect */
.content [type='radio']:not(:checked) + label:after,
.content [type='radio']:checked + label:after {
  content: '\2022';
  position: absolute;
  top: -0.03em;
  left: -0.01em;
  font-size: 2.2em;
  width: 100%;
  color: #f00;
  transition: all 0.2s;
}

.content [type='radio']:not(:checked) + label:after {
  opacity: 0;
  transform: scaleY(0);
}

.content [type='radio']:checked + label:after {
  opacity: 1;
  transform: scaleY(1);
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .content .pull-right {
    max-width: 60%;
    margin-right: -10%;
  }

  .content .pull-left {
    max-width: 60%;
    margin-left: -10%;
  }
}

@media only screen and (max-width: 767px) {
  .content .pull-right {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  .content .pull-left {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  .content .image-with-caption {
    margin: 15px 0;
  }
}
article {
  position: relative;
  color: #000;
  margin-top: 57px;
  background-color: white;
  border-radius: 10px;
  padding: 45px 0;
  transition: all 0.5s ease;
  margin-bottom: 150px; /* For footer */
}

article h1 {
  font-weight: bold;
  text-align: center;
}

article p {
  color: inherit;
  margin-bottom: 20px;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

article a {
  transition: all 0.4s ease;
}

.post-header img,
.content img {
  display: block;
  width: 100%;
  border: 10px solid #fff;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 30px;
}

@media only screen and (min-width: 993px) {
  article {
    z-index: 10;
  }

  .page-background {
    position: relative;
  }

  .page-background:before {
    content: '';
    position: absolute;
    display: block;
    width: 2000px;
    top: -295px;
    left: 50%;
    bottom: -150px;
    margin-left: -1000px;
    background: url(/static/images/river.svg) no-repeat top 3043px left,
      url(/static/images/water.svg) no-repeat top 3105px left,
      url(/static/images/depth.svg) no-repeat top 4350px left,
      url(/static/images/trees2.svg) no-repeat top 861px left 1860px,
      url(/static/images/police_siren_flip.png) no-repeat top 565px left 1594px,
      url(/static/images/police_siren.png) no-repeat top 722px left 1710px,
      url(/static/images/police_car.svg) no-repeat top 742px left 1686px,
      url(/static/images/accident.svg) no-repeat top 279px left 1143px,
      url(/static/images/overlap.svg) no-repeat top 579px left 1776px,
      url(/static/images/trees1.svg) no-repeat top 202px left 1696px,
      url(/static/images/trees3.svg) no-repeat top 844px left 1472px,
      url(/static/images/cemetery.svg) no-repeat top 767px left -43px,
      url(/static/images/witness.svg) no-repeat top 971px left 1784px,
      url(/static/images/trees5.svg) no-repeat top 1270px left 1549px,
      url(/static/images/alien.svg) no-repeat top 1368px left 1233px,
      url(/static/images/alien_light.png) no-repeat top 1444px left 1159px,
      url(/static/images/alien_trace.svg) no-repeat top 1572px left 1092px,
      url(/static/images/victim.svg) no-repeat top 1580px left 1371px,
      url(/static/images/rite.svg) no-repeat top 1995px left 375px,
      url(/static/images/dogs.svg) no-repeat top 2221px left,
      url(/static/images/trees6.svg) no-repeat top 1580px left 16px,
      url(/static/images/gates_to_hell.svg) no-repeat top 2049px left 1524px,
      url(/static/images/trees7.svg) no-repeat top 1899px left 1668px,
      url(/static/images/trees8.svg) no-repeat top 2473px left 9px,
      url(/static/images/camp.svg) no-repeat top 2797px left 233px,
      url(/static/images/trees11.svg) no-repeat top 3380px left 1474px,
      url(/static/images/red_light.png) no-repeat top 2959px left 1554px,
      url(/static/images/red_light.png) no-repeat top 2981px left 1604px,
      url(/static/images/house.svg) no-repeat top 2734px left 1195px,
      url(/static/images/trees9.svg) no-repeat top 2561px left 1175px,
      url(/static/images/road.png) no-repeat top 465px left,
      url(/static/images/depth.svg) no-repeat top 4350px left, #220d38;
    background-size: 2000px 1219px, 2000px, cover, 209px 208px, 142px 131px, 157px 126px,
      226px 157px, 621px 506px, 168px 145px, 363px 374px, 344px 409px, 996px 771px, 132px 125px,
      451px 498px, 293px 132px, 559px 656px, 759px 440px, 130px 76px, 486px 473px, 339px 291px,
      714px 698px, 379px 406px, 328px 456px, 509px 564px, 419px 437px, 529px 387px, 70px 111px,
      70px 111px, 864px 778px, 842px 519px, 2000px 1389px;
    filter: blur(20px);
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  article.container {
    width: 98%;
  }
}

@media only screen and (max-width: 767px) {
  article {
    position: relative;
    width: 95%;
    padding-top: 30px;
    margin-bottom: 100px; /* For footer */
  }
}