/* compiled by scssphp v0.0.12 on Thu, 27 Apr 2017 11:52:26 -0700 (0.0549s) */

html, body {
  background: #303030;
  font-family: 'Open Sans', sans-serif;
  color: lightgray;
  margin: 0; }
  html ::-webkit-scrollbar, body ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5); }
  html ::-webkit-scrollbar-thumb, body ::-webkit-scrollbar-thumb {
    background: #424242;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5); }
  html ::-webkit-scrollbar-track, body ::-webkit-scrollbar-track {
    background: #303030; }
  html body, body body {
    scrollbar-face-color: #424242;
    scrollbar-track-color: #303030; }

#headKeeper {
  height: 44px;
  width: 100%; }
  @media screen and (min-width: 800px) {
  #headKeeper {
    height: 75px; } }

#headKeeper header {
  background: #212121;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
  z-index: 100; }
  #headKeeper header h1 {
    font-family: 'Karla', sans-serif;
    font-style: italic;
    margin-bottom: 6px;
    margin-top: 0;
    padding-right: 25px;
    padding-left: 25px;
    font-size: 64px; }
    @media screen and (max-width: 800px) {
  #headKeeper header h1 {
    font-size: 32px;
    padding-bottom: 2px; } }
  #headKeeper header nav {
    padding-right: 10px;
    padding-top: 3px;
    z-index: 100;
    position: fixed;
    width: 100%;
    top: 0px;
    right: 0px;
    padding-bottom: 4px;
    transition: box-shadow 0.2s, background 0.2s; }
    #headKeeper header nav.floating {
      background-color: #424242;
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5); }
      #headKeeper header nav.floating #searchContainer {
        background-color: #424242; }
    #headKeeper header nav #searchContainer {
      display: inline-block;
      z-index: 104;
      float: right;
      width: auto;
      border: 1px solid rgba(0, 0, 0, 0.0);
      transition: border 0.2s, box-shadow 0.2s;
      border-radius: 5px;
      box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0); }
      #headKeeper header nav #searchContainer:hover {
        border: 1px solid black;
        box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.75); }
      #headKeeper header nav #searchContainer #searchBox {
        width: 0px;
        position: relative;
        transition: width 0.25s;
        z-index: 104; }
      #headKeeper header nav #searchContainer #search {
        display: inline-block;
        font-size: 24px;
        padding-left: 10px;
        padding-right: 10px;
        transform: rotatez(-45deg);
        transform-origin: 50% 50%; }
      #headKeeper header nav #searchContainer.opened {
        border: 1px solid black;
        box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.75); }
        #headKeeper header nav #searchContainer.opened #searchBox {
          width: 200px; }

@media screen and (max-width: 800px) {
    body main {
      padding-left: 10px;
      padding-right: 10px; } }
  body main article {
    position: relative;
    background: #424242;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box; }
    @media screen and (max-width: 800px) {
  body main article {
    width: 100%; } }
    body main article header {
      position: relative;
      color: white;
      padding-top: 0px;
      font-size: 24px;
      padding-bottom: 10px;
      z-index: 102;
      transition: color 0.2s; }
    body main article time {
      color: lightslategray;
      position: absolute;
      right: 20px;
      top: 10px; }
    body main article.scrolling {
      padding-top: 48px; }
      body main article.scrolling header {
        position: fixed;
        box-sizing: border-box;
        top: 0px;
        padding-top: 10px;
        padding-bottom: 5px;
        padding-left: 30px;
        padding-right: 20px;
        margin-top: -8px;
        margin-left: -20px;
        width: 800px;
        background: none;
        z-index: 101;
        pointer-events: none; }
        @media screen and (max-width: 800px) {
  body main article.scrolling header {
    width: 100%;
    margin-left: 0px;
    left: 0px; } }
    body main article.hide header {
      color: rgba(66, 66, 66, 0); }

a {
  text-decoration: none; }
  a:link {
    color: #651fff; }
  a:visited {
    color: rgba(101, 31, 255, .5); }

#loading {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: -50px;
  text-align: center;
  transition: bottom 0.2s; }
  #loading.show {
    bottom: 0px; }
    #loading.show .dot {
      animation: dotline-move 4s infinite; }
  #loading .dot {
    display: inline-block;
    background: #651fff;
    height: 5px;
    width: 5px;
    opacity: 0;
    border-radius: 50%;
    transform: translateX(-100px);
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.5); }
    #loading .dot:nth-child(1) {
      animation-delay: 0.7s; }
    #loading .dot:nth-child(2) {
      animation-delay: 0.6s; }
    #loading .dot:nth-child(3) {
      animation-delay: 0.5s; }
    #loading .dot:nth-child(4) {
      animation-delay: 0.4s; }
    #loading .dot:nth-child(5) {
      animation-delay: 0.3s; }
    #loading .dot:nth-child(6) {
      animation-delay: 0.2s; }
    #loading .dot:nth-child(7) {
      animation-delay: 0.1s; }
    #loading .dot:nth-child(8) {
      animation-delay: 0s; }

@keyframes dotline-move {
  40% {
    transform: translateX(0px);
    opacity: 0.8; }

  100% {
    transform: translateX(100px);
    opacity: 0; } }

section.gallery {
  width: 100%; }
  section.gallery .no-transition {
    transition: none !important; }
  section.gallery .on-display {
    position: fixed;
    object-fit: contain !important;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5); }
  @media screen and (max-width: 800px) {
  section.gallery {
    height: 300px;
    overflow-y: hidden;
    overflow-x: auto;
    width: auto;
    white-space: nowrap; }
    section.gallery figure {
      height: 100%;
      width: auto;
      margin: 0;
      padding-right: 5px;
      display: inline-block; }
      section.gallery figure img {
        height: 100%;
        width: auto;
        transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s, background-color 0.25s;
        transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5); } }
  @media screen and (min-width: 800px) {
  section.gallery.Grid-1x3 {
    width: 100%;
    height: 500px; }
    section.gallery.Grid-1x3 figure {
      float: left;
      height: 33.33%;
      width: 25%;
      overflow: hidden;
      margin: 0; }
      section.gallery.Grid-1x3 figure:nth-child(1) {
        height: 100%;
        width: 75%; }
      section.gallery.Grid-1x3 figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s, background-color 0.25s;
        transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5); } }