@import url("https://fonts.googleapis.com/css?family=Raleway:100,200,300,400|Titillium+Web:300,400");
.headfont {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px; }

.icon {
  height: 1em;
  width: 1em; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s; }

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s; }

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s; }

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s; }

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s; }

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms; }

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms; }

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s; }

@media (print), (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important; } }

.header {
  overflow: hidden;
  max-width: 100vw;
  margin: 0em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100vh; }
  .header .logo {
    display: flex;
    height: 20em;
    width: 100vw; }
    @media (min-width: 75em) {
      .header .logo {
        height: 50%;
        width: 98vw; } }
    .header .logo .logoimg {
      height: 100%;
      width: 100vw; }
  .header .title {
    overflow: hidden;
    font-family: "Raleway", sans-serif;
    font-size: 3rem;
    color: #e68b12;
    line-height: 1.5em;
    margin: .3em 0;
    text-shadow: 0 0 25px #1f1201;
    font-weight: 100; }
    @media (min-width: 75em) {
      .header .title {
        font-size: 6rem;
        margin: 0 0 0 0; } }
  .header .subtitle {
    padding: 2em 0;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.5em;
    color: #D5C7CC;
    line-height: 1.3em; }
    @media (min-width: 75em) {
      .header .subtitle {
        font-size: 3em;
        padding: 0;
        margin: 1em 1em 0 1em; } }
    .header .subtitle svg {
      fill: #D5C7CC;
      width: auto;
      display: inline-flex;
      align-self: center;
      position: relative;
      animation-iteration-count: 3; }
    .header .subtitle svg:hover {
      fill: #3b5998; }
  .header .nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 1em auto 3em auto; }
    .header .nav a {
      color: #e68b12;
      font-family: "Raleway", sans-serif;
      padding: 0 1em;
      letter-spacing: 2px;
      font-size: 1em;
      text-decoration: none;
      text-align: center;
      height: 1.2em;
      margin: 0 auto; }
      @media (min-width: 75em) {
        .header .nav a {
          font-size: 2em;
          margin: 0 5em; } }
    .header .nav .active, .header .nav a:hover {
      color: #020919;
      background-color: #e68b12;
      border-top-left-radius: 25px;
      border-top-right-radius: 95px;
      border-bottom-right-radius: 45px;
      border-bottom-left-radius: 95px; }
    .header .nav a:hover {
      color: #D5C7CC;
      -webkit-animation-name: pulse;
      animation-name: pulse;
      animation-iteration-count: infinite;
      animation-duration: 10s; }

.postheader {
  overflow: hidden;
  max-width: 100vw;
  margin: 0em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 33vh; }
  .postheader .logo {
    display: flex;
    background-image: url(../img/spiral.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 120vw auto;
    height: 10em;
    width: 100vw;
    margin: 0 auto; }
    @media (min-width: 75em) {
      .postheader .logo {
        height: 70%;
        width: 98vw; } }
  .postheader .title {
    overflow: hidden;
    font-family: "Raleway", sans-serif;
    font-size: 1.8rem;
    color: #e68b12;
    line-height: 1.5em;
    margin: .3em 0;
    text-shadow: 0 0 25px #1f1201;
    font-weight: 100; }
    @media (min-width: 75em) {
      .postheader .title {
        font-size: 4rem;
        margin: auto;
        height: 2em;
        letter-spacing: 5px; } }
  .postheader .subtitle {
    padding: 2em 0;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.5em;
    color: #D5C7CC;
    line-height: 1.3em; }
    @media (min-width: 75em) {
      .postheader .subtitle {
        font-size: 3em;
        padding: 0;
        margin: 1em 1em 0 1em; } }
    .postheader .subtitle svg {
      fill: #D5C7CC;
      width: auto;
      display: inline-flex;
      align-self: center;
      position: relative; }
  .postheader .nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 1em auto 3em auto; }
    .postheader .nav a {
      color: #e68b12;
      font-family: "Raleway", sans-serif;
      padding: 0 1em;
      letter-spacing: 2px;
      font-size: 1em;
      text-decoration: none;
      text-align: center;
      height: 1.2em;
      margin: 0 auto; }
      @media (min-width: 75em) {
        .postheader .nav a {
          font-size: 2em;
          margin: 0 5em; } }
    .postheader .nav .active, .postheader .nav a:hover {
      color: #020919;
      background-color: #e68b12;
      border-top-left-radius: 25px;
      border-top-right-radius: 95px;
      border-bottom-right-radius: 45px;
      border-bottom-left-radius: 95px; }
    .postheader .nav a:hover {
      color: #D5C7CC;
      -webkit-animation-name: pulse;
      animation-name: pulse; }

.main--container article {
  max-width: 100vw; }
  .main--container article section .content {
    max-width: 100vw;
    font-family: "Titillium Web", sans-serif;
    color: #D5C7CC;
    text-decoration: none; }
    .main--container article section .content h1 a, .main--container article section .content h2 a, .main--container article section .content h3 a, .main--container article section .content h4 a {
      text-decoration: none;
      color: #e68b12; }
    .main--container article section .content p {
      margin: 2em auto;
      line-height: 1.5em;
      letter-spacing: 1px;
      max-width: 36ch; }
      .main--container article section .content p a {
        text-decoration: none;
        color: #e68b12; }
      @media (min-width: 75em) {
        .main--container article section .content p {
          max-width: 63ch;
          font-size: 1.5em;
          line-height: 1.7em; } }

body {
  background-color: #020919;
  margin: 0; }