@charset "UTF-8";
/* Variables */
@font-face {
  font-family: "Freight Text Pro";
  font-weight: 400;
  src: url("/assets/fonts/freight-text-pro-book.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-book.woff") format("woff");
}
@font-face {
  font-family: "Freight Text Pro";
  font-style: italic;
  font-weight: 400;
  src: url("/assets/fonts/freight-text-pro-book-italic.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-book-italic.woff") format("woff");
}
@font-face {
  font-family: "Freight Text Pro";
  font-weight: 600;
  src: url("/assets/fonts/freight-text-pro-semibold.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-semibold.woff") format("woff");
}
@font-face {
  font-family: "Freight Text Pro";
  font-style: italic;
  font-weight: 600;
  src: url("/assets/fonts/freight-text-pro-semibold-italic.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-semibold-italic.woff") format("woff");
}
@font-face {
  font-family: "Freight Text Pro";
  font-weight: 700;
  src: url("/assets/fonts/freight-text-pro-bold.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-bold.woff") format("woff");
}
@font-face {
  font-family: "Freight Text Pro";
  font-style: italic;
  font-weight: 700;
  src: url("/assets/fonts/freight-text-pro-bold-italic.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-bold-italic.woff") format("woff");
}
@font-face {
  font-family: "Freight Text Pro";
  font-weight: 900;
  src: url("/assets/fonts/freight-text-pro-black.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-black.woff") format("woff");
}
@font-face {
  font-family: "Freight Text Pro";
  font-style: italic;
  font-weight: 900;
  src: url("/assets/fonts/freight-text-pro-black-italic.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-black-italic.woff") format("woff");
}
@font-face {
  font-family: "Freight Text Pro SC";
  font-weight: 400;
  src: url("/assets/fonts/freight-text-pro-book-smallcaps.woff2") format("woff2"), url("/assets/fonts/freight-text-pro-book-smallcaps.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans";
  font-weight: 400;
  src: url("/assets/fonts/freight-sans-book.woff2") format("woff2"), url("/assets/fonts/freight-sans-book.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans";
  font-style: italic;
  font-weight: 400;
  src: url("/assets/fonts/freight-sans-book-italic.woff2") format("woff2"), url("/assets/fonts/freight-sans-book-italic.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans";
  font-weight: 700;
  src: url("/assets/fonts/freight-sans-bold.woff2") format("woff2"), url("/assets/fonts/freight-sans-bold.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans";
  font-style: italic;
  font-weight: 700;
  src: url("/assets/fonts/freight-sans-bold-italic.woff2") format("woff2"), url("/assets/fonts/freight-sans-bold-italic.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans";
  font-weight: 900;
  src: url("/assets/fonts/freight-sans-black.woff2") format("woff2"), url("/assets/fonts/freight-sans-black.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans";
  font-style: italic;
  font-weight: 900;
  src: url("/assets/fonts/freight-sans-black-italic.woff2") format("woff2"), url("/assets/fonts/freight-sans-black-italic.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans SC";
  font-weight: 400;
  src: url("/assets/fonts/freight-sans-book-small-caps.woff2") format("woff2"), url("/assets/fonts/freight-sans-book-small-caps.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans SC";
  font-weight: 700;
  src: url("/assets/fonts/freight-sans-bold-small-caps.woff2") format("woff2"), url("/assets/fonts/freight-sans-bold-small-caps.woff") format("woff");
}
@font-face {
  font-family: "Freight Sans SC";
  font-weight: 900;
  src: url("/assets/fonts/freight-sans-black-small-caps.woff2") format("woff2"), url("/assets/fonts/freight-sans-black-small-caps.woff") format("woff");
}
@font-face {
  font-family: "Streamster";
  font-weight: 400;
  src: url("/assets/fonts/streamster.woff2") format("woff2"), url("/assets/fonts/streamster.woff") format("woff");
}
/*****************************************************************************
  MIXINS
******************************************************************************/
/*****************************************************************************
Mobile-first media queries
https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2
******************************************************************************/
/*****************************************************************************
  Other Mixins
******************************************************************************/
/* Global */
html {
  height: 100%;
}

body {
  display: grid;
  min-height: 100%;
  grid-template-rows: 1fr auto;
}

footer.grid {
  grid-row-start: 2;
  grid-row-end: 3;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.container-padding {
  padding: 0 10px;
}

.container {
  max-width: 1220px;
  margin: 0 auto;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, p, blockquote, ol, ul, figure, figcaption, embed, aside, hr, pre {
  margin: 0;
}

main {
  overflow: hidden;
  z-index: 0;
}

/*****************************************************************************
  SITE TYPOGRAPHY
 *****************************************************************************

 -[ ] Architect whether they're mixins, regular, etc
 -[ ] Responsive text sizing, mobile first
 -[ ] Small caps where necessary, using font-variant-caps: small-caps;
 -[ ] Look into kerning, font variants ('zero', etc)
 -[ ] Consider first letter mods using ::first-letter

******************************************************************************
STRUCTURE

body
  main
  main.page-project
  main.page-about
  main.page-post
  main.page-page
  main.page-index
  main.page-tag
    header.nav-container
      nav.nav
    header.grid
      section.skew-top
    article.grid
    article.grid.post
    article.grid.post.tag-projects
  footer.grid


ROOT PAGES
about
landing

INDEX PAGES
index
tag
projects
games

POST PAGES
custom-project
page
post

OTHER PAGES
author

COMMON SECTIONS
nav.nav-header
footer


******************************************************************************/
/******************************************************************************
MODULAR SCALE TYPOGRAPHY SIZING
-[ ] Responsive modularscale


NOTE: 100% defaults to 16px in browser, except when users override settings to
bump up font size (e.g. for accessibility).

An alternative is to scale it according to viewport width, which means no jumpy
changes to font sizes. If you set the sizing correctly, the breakpoints where
it turns on/off are seamless. For instance, this works well:

  @include md {
    font-size: calc(1.05vw + 8px);
  }
  @include xl {
    font-size: 133%;
  }

More on viewport-based typography here:
https://zellwk.com/blog/changing-modular-scale/
******************************************************************************/
/******************************************************************************
 RESPONSIVE FONT SIZING
******************************************************************************/
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  font-family: "Freight Text Pro", Palatino, Georgia, serif;
  line-height: 1.4;
  font-size: 110%;
}
@media (min-width: 768px) {
  html {
    font-size: 120%;
  }
}
@media (min-width: 992px) {
  html {
    font-size: 130%;
  }
}
@media (min-width: 1220px) {
  html {
    font-size: 138%;
  }
}

h1, h2, h3, h4 {
  font-family: "Freight Sans", "Proxima Nova", proxima-nova, sans-serif;
  line-height: 1.25;
  font-weight: 700;
}

h1 {
  font-size: 2.197em;
}

h2 {
  font-size: 1.69em;
}

h3 {
  font-size: 1.3em;
}

h1.title {
  font-size: 1.69em;
}

h1.post-link {
  font-size: 1.3em;
}

h1.post-card-title {
  font-size: 1.3em;
}

.page-index h1 {
  letter-spacing: 0.6;
}
.page-index h1, .page-index h2, .page-index h3, .page-index h4 {
  text-transform: uppercase;
  word-spacing: 0.05em;
}
.page-index h2 {
  font-size: 1.15em;
  word-spacing: 0.05em;
}
.page-index h3 {
  font-size: 1.05em;
}

/* Below are all overrides to modularscale font sizes
******************************************************************************/
aside, figcaption, .footnote-item {
  font-size: 0.85em;
  line-height: 1.25;
  opacity: 0.85;
}

time {
  font-size: 0.9em;
}

.post-tag, .post-button {
  font-size: 0.6em;
}

pre {
  font-size: 1em;
}

.nav-container, .nav-skew {
  font-family: "Freight Sans", "Proxima Nova", proxima-nova, sans-serif;
  font-size: 1em;
}
@media (min-width: 1220px) {
  .nav-container, .nav-skew {
    font-size: 0.9em;
  }
}

.nav-link {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-transform: uppercase;
  font-weight: 700;
}
.nav-link:hover {
  text-decoration: none;
}

footer .nav-link {
  font-size: 0.85em;
}
footer .copyright {
  font-family: "Freight Sans", "Proxima Nova", proxima-nova, sans-serif;
  font-size: 0.7em;
}

/*****************************************************************************
  VARIOUS FORMATTING
******************************************************************************/
a {
  text-decoration: none;
}

.post-full a, .post-inline a, .post-page a {
  border-width: 0 0 2px 0;
  border-style: none none solid none;
  padding: 0px 0px 1px 0px;
}
.post-full a:hover, .post-inline a:hover, .post-page a:hover {
  border: none;
  padding: 0px 0px 2px 0px;
}
.post-full a.lg-image, .post-inline a.lg-image, .post-page a.lg-image {
  border: none;
}
.post-full a.lg-image:hover, .post-inline a.lg-image:hover, .post-page a.lg-image:hover {
  padding-bottom: 1px;
}

.post-link a, .footnote-ref a, a.footnote-backref {
  border: none;
}

/*
p > a:hover {
  background-image: url("/assets/img/outline.svg");
  border-bottom: none;
  background-position: 0 calc(100% - 1.5px);
  background-size: auto 3px;
  background-repeat: repeat-x;
  padding-bottom: 3px;
}
*/
h1.title {
  text-transform: uppercase;
}

pre {
  word-wrap: normal;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

pre > code, code.hljs {
  border: none;
}

pre code, pre tt {
  white-space: pre;
}

code {
  padding: 1px 5px 2px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
}

ul li {
  list-style-type: none;
}

.post-full ul li, .post-full ol li, .post-inline ul li, .post-inline ol li {
  margin-bottom: 5px;
}
.post-full ul li:last-child, .post-full ol li:last-child, .post-inline ul li:last-child, .post-inline ol li:last-child {
  margin-bottom: 0;
}
.post-full ul li::before, .post-inline ul li::before {
  content: "•";
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

ol {
  list-style: none;
  counter-reset: li;
}

ol li {
  counter-increment: li;
}

ol li::before {
  font-family: "Freight Sans", "Proxima Nova", proxima-nova, sans-serif;
  content: counter(li);
  display: inline-block;
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em;
  font-weight: 600;
  text-align: right;
  direction: rtl;
}

.quote blockquote {
  font-style: italic;
  letter-spacing: 0.02em;
}
.quote figcaption {
  font-style: italic;
  text-align: left !important;
}

.quote-large blockquote {
  font-style: italic;
  letter-spacing: 0em;
  font-size: 1.3em;
}
.quote-large figcaption {
  font-style: italic;
  text-align: left !important;
}

time {
  font-family: "Freight Sans", "Proxima Nova", proxima-nova, sans-serif;
  text-transform: uppercase;
  word-spacing: 0.1em;
  font-weight: 700;
  font-variant-numeric: normal;
}

.post-tag, .post-button {
  font-family: "Freight Sans", "Proxima Nova", proxima-nova, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}
.post-tag:hover, .post-tag:hover a, .post-button:hover, .post-button:hover a {
  text-decoration: none;
}
.post-tag a, .post-button a {
  border: none;
}

.post-button {
  border-width: 0;
}

.page-project header h1 {
  margin-bottom: 10px;
}
.page-project header h3 {
  margin-bottom: 10px;
}
.page-project header .date-pill {
  font-family: "Freight Sans", "Proxima Nova", proxima-nova, sans-serif;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.85em;
  font-weight: 800;
  display: inline;
}
.page-project header h4 {
  margin-top: 25px;
}

.project-card .project-card-title {
  font-family: "Freight Text Pro", Palatino, Georgia, serif;
  font-weight: 600;
}
.project-card .project-card-excerpt {
  font-size: 19px;
}

body.synth .center-header h1 {
  font-family: "Streamster", proxima-nova, sans-serif;
}

/*****************************************************************************
  HEXES; TODO move and clean up
******************************************************************************/
#hexGrid {
  position: relative;
  left: -50%;
  display: grid;
  width: 200%;
  list-style-type: none;
  overflow: hidden;
  font-size: 13px;
  grid-gap: 15px;
  padding: 0;
}
@media (max-width: 575px) {
  #hexGrid {
    left: -66%;
    width: 266%;
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (min-width: 576px) {
  #hexGrid {
    grid-template-columns: repeat(8, 1fr);
    font-size: 15px;
  }
}

.hex h1, .hex p {
  font-weight: 300;
}
.hex h1 {
  font-size: 1.5em;
}

/*******************************************************************************
Hexagons
*******************************************************************************/
#hexGrid {
  position: relative;
  left: -50%;
  display: grid;
  width: 200%;
  list-style-type: none;
  overflow: hidden;
  grid-gap: 15px;
  padding: 0;
}
@media (max-width: 575px) {
  #hexGrid {
    left: -66%;
    width: 266%;
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (min-width: 576px) {
  #hexGrid {
    grid-template-columns: repeat(8, 1fr);
    padding-bottom: 10%;
  }
}
@media (min-width: 768px) {
  #hexGrid {
    grid-template-columns: repeat(12, 1fr);
    padding-top: 3%;
  }
}
@media (min-width: 992px) {
  #hexGrid {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media (min-width: 1220px) {
  #hexGrid {
    left: -5%;
    width: 120%;
    grid-template-columns: repeat(12, 1fr);
  }
}

.hex {
  grid-column-end: span 2;
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}
.hex::after {
  content: "";
  display: block;
  padding-bottom: 86.602%;
  /* =  100 / tan(60) * 1.5 */
}
.hex.hex-content:hover {
  transition: all 0.4s ease;
  -webkit-transform: translate3D(0, -1px, 0) scale(1.15);
          transform: translate3D(0, -1px, 0) scale(1.15);
  z-index: 100;
}
@media (max-width: 575px) {
  .hex:nth-child(-n+3) {
    display: none;
  }
  .hex:nth-of-type(6n+1) {
    grid-column-start: 1;
  }
  .hex:nth-of-type(6n+2) {
    grid-column-start: 3;
  }
  .hex:nth-of-type(6n+4) {
    grid-column-start: 2;
  }
  .hex:nth-of-type(6n+5) {
    grid-column-start: 4;
  }
  .hex:nth-last-child(-n+3) {
    display: none;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .hex:nth-of-type(9n+1) {
    grid-column-start: 1;
  }
  .hex:nth-of-type(9n+2) {
    /* first hexagon of even rows */
    grid-column-start: 3;
  }
  .hex:nth-of-type(9n+3), .hex:nth-of-type(9n+4) {
    display: none;
  }
  .hex:nth-of-type(9n+7) {
    grid-column-start: 2;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hex:nth-last-child(-n+3) {
    display: block !important;
  }
  .hex:nth-of-type(15n+3), .hex:nth-of-type(15n+4), .hex:nth-of-type(15n+6), .hex:nth-of-type(15n+7), .hex:nth-of-type(15n+12), .hex:nth-of-type(15n+13) {
    display: none;
  }
  .hex:nth-of-type(15n+1) {
    grid-column-start: 2;
  }
  .hex:nth-of-type(15n+10) {
    grid-column-start: 3;
  }
}
@media (min-width: 992px) and (max-width: 1219px) {
  .hex:nth-last-child(-n+3) {
    display: block !important;
  }
  .hex:nth-of-type(15n+3), .hex:nth-of-type(15n+4), .hex:nth-of-type(15n+6), .hex:nth-of-type(15n+7), .hex:nth-of-type(15n+12), .hex:nth-of-type(15n+13) {
    display: none;
  }
  .hex:nth-of-type(15n+1) {
    grid-column-start: 2;
  }
  .hex:nth-of-type(15n+10) {
    grid-column-start: 3;
  }
}
@media (min-width: 1220px) {
  .hex:nth-of-type(12n+7) {
    grid-column-start: 2;
  }
  .hex:nth-of-type(12n+4), .hex:nth-of-type(12n+10) {
    display: none;
  }
}
.hex h1, .hex p {
  width: 100%;
  padding: 5%;
  box-sizing: border-box;
  transition: opacity 0.3s ease-out, -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.3s ease-out;
  transition: transform 0.2s ease-out, opacity 0.3s ease-out, -webkit-transform 0.2s ease-out;
}
.hex h1 {
  bottom: 50%;
  padding-top: 50%;
  z-index: 1;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.hex h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.hex p {
  top: 50%;
  padding-bottom: 50%;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.hexIn {
  position: absolute;
  width: 100%;
  padding-bottom: 115.47%;
  /* =  width / sin(60) */
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexIn * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

/*** HOVER EFFECT  ************************************************************/
.hexLink {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hexLink:hover h1, .hexLink:focus h1, .hexLink:hover p, .hexLink:focus p {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/******** DETAILS ON HEX DESIGN ********
XSMALL (8col)
------

A 1 B
 C 2 D

A : 6n+1 : col1
1 : 6n+2 : col3
B : 6n+3 : (col5)
C : 6n+4 : col2
2 : 6n+5 : col4
D : 6n+6 : (col6)


SMALL (8col)
-----

a 1 b c 2 d
   E 3 F
g 4 h i 5 j

a : 9n+1 : col1 (invisible)
1 : 9n+2 : col3
b : 9n+3 : hide
c : 9n+4 : hide
2 : 9n+5 : (col5)
d : 9n+6 : invisible
E : 9n+7 : col2
3 : 9n+8 : (col4)
F : 9n+9 : (col6)


MEDIUM/LG (12col, 3ish wide)
------

A 1 b c 2 e f 3 G
 H   4 i j 5   K

A : 15n+1  : col2
1 : 15n+2  : (col4)
b : 15n+3  : hide
c : 15n+4  : hide
2 : 15n+5  : (col6)
e : 15n+6  : hide
f : 15n+7  : hide
3 : 15n+8  : (col8)
G : 15n+9  : (col10)
H : 15n+10 : col3
4 : 15n+11 : (col5)
i : 15n+12 : hide
j : 15n+13 : hide
5 : 15n+14 : (col7)
K : 15n+15 : (col9)


XL (12col)
--------
left: -20%;
width: 140%;

A 1 B C 2 D
 E 3 Fg4 H

A : 12n+1  : (col1)
1 : 12n+2  : ()
B : 12n+3  : ()
C : 12n+4  : ()
2 : 12n+5  : ()
D : 12n+6  : ()
E : 12n+7  : col2
3 : 12n+8  : ()
F : 12n+9  : ()
g : 12n+10 : hide
4 : 12n+11 : ()
H : 12n+12 : ()

XL better (12col)
---------
left: -5%;
width: 120%;

A 1 B c 2 D
 E 3 F g 4 I

A : 12n+1  : (col1)
1 : 12n+2  : ()
B : 12n+3  : ()
c : 12n+4  : hide
2 : 12n+5  : ()
D : 12n+6  : ()
E : 12n+7  : col2
3 : 12n+8  : ()
F : 12n+9  : ()
g : 12n+10 : hide
4 : 12n+11 : ()
H : 12n+12 : ()



XL Alt
-------
A 1 B C 2 E
 F 3 G H 4
I J 5 K L 6
 M N 7 O P
8 Q R 9 S T
 0 U V 1 W



somewhat helpful:

https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids
************/
/*****************************************************************************
NAVIGATION
*****************************************************************************/
.nav-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
  justify-items: center;
  height: 50px;
}

.nav-header {
  display: grid;
  grid-template-columns: auto;
  justify-items: center;
  -webkit-align-items: center;
          align-items: center;
  width: calc(100% - 40px);
  max-width: 1220px;
  padding-left: 0;
  z-index: 10;
}
@media (min-width: 1220px) {
  .nav-header .header-name {
    margin-left: 0;
  }
  .nav-header .header-links {
    margin-right: 0;
  }
}

.nav-name {
  justify-self: start;
  grid-row: 1;
  -webkit-align-items: center;
          align-items: center;
  display: grid;
}
.nav-name .nav-logo {
  grid-row: 1;
  justify-self: start;
  display: block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
}
.nav-name .nav-title {
  display: none;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  margin-left: 10px;
}
@media (min-width: 768px) {
  .nav-name .nav-title {
    display: block;
  }
}

.nav-links {
  justify-self: end;
  grid-row: 1;
  margin-top: 2px;
}
.nav-links ul {
  list-style-type: none;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 15px;
  -webkit-align-items: center;
          align-items: center;
}
@media (min-width: 768px) {
  .nav-links ul {
    grid-column-gap: 30px;
  }
}

#nav-light {
  height: 100%;
  margin-top: 2px;
}
#nav-light svg {
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
#nav-light svg:hover {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#nav-light.lights-off svg {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
#nav-light.lights-off svg:hover {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#nav-light button {
  cursor: pointer;
  height: 100%;
  background: none;
  border: none;
}
#nav-light button:focus {
  outline: none;
}

.nav-skew ul {
  list-style-type: none;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 15px;
  padding-left: 0;
}

/*
.nav-current a {
  border-width: 0 0 2px 0;
  border-style: none none solid none;
  padding: 0px 0px 3px 0px;
}
.page-project .nav-projects a {
  border-width: 0 0 2px 0;
  border-style: none none solid none;
  padding: 0px 0px 3px 0px;
}
*/
/*****************************************************************************
CASPER Styles (default Ghost 2.0 theme)
TODO delete this when I've imported these into appropriate places
******************************************************************************/
/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */
/* Full width page blocks */
.outer {
  position: relative;
  padding: 0 10px;
}

/* Centered content container blocks */
.inner {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}

/* 6. Project Feed
/* ---------------------------------------------------------- */
.project-feed {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  padding: 20px 0 0 0;
  margin: 0 -10px;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
@media (min-width: 768px) {
  .project-feed {
    margin: 0;
  }
}
@media (min-width: 992px) {
  .project-feed {
    padding: 30px 0 0 0;
  }
}
@media (min-width: 1220px) {
  .project-feed {
    padding: 40px 0 0 0;
  }
}

.project-card {
  -webkit-flex: 1 1 350px;
          flex: 1 1 350px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  margin: 0 5px 10px;
  background: var(--bg-color) center center;
  background-size: cover;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  border-width: 2px;
  border-style: solid;
  text-align: center;
  max-width: 350px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.project-card:hover {
  -webkit-transform: translate3D(0, -1px, 0) scale(1.02);
          transform: translate3D(0, -1px, 0) scale(1.02);
}
@media (min-width: 768px) {
  .project-card {
    min-height: 300px;
  }
}
@media (min-width: 992px) {
  .project-card {
    min-height: 300px;
  }
}
@media (min-width: 1220px) {
  .project-card {
    min-height: 300px;
    margin: 0 15px 40px;
  }
}

.project-card-image-link {
  position: relative;
  display: block;
  overflow: hidden;
}

.project-card-image {
  transition: all 0.3s ease;
  width: auto;
  height: 200px;
  background: var(--lightgrey) no-repeat center center;
  background-size: cover;
  border-width: 10px;
  border-style: solid;
  border-radius: 15px;
}

.project-card-content-link {
  position: relative;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  display: block;
  padding: 10px 25px 20px;
}

.project-card-content-link:hover {
  text-decoration: none;
}

.project-card-tags {
  display: block;
  margin-bottom: 4px;
  color: var(--midgrey);
  font-size: 1.2rem;
  line-height: 1.15em;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.project-card-title {
  margin-top: 0;
  font-size: 1.2em;
}

.project-card-content {
  -webkit-flex-grow: 1;
          flex-grow: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}

.project-card-excerpt {
  margin-top: 10px;
}

.project-card-meta {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  padding: 0 25px 25px;
}

.author-profile-image,
.avatar-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  background-color: color(var(--lightgrey) l(10%));
  border-radius: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.project-card-meta .profile-image-wrapper,
.project-card-meta .avatar-wrapper {
  position: relative;
}

/* 7.4. Related posts
/* ---------------------------------------------------------- */
.read-next-feed {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 -20px;
  padding: 40px 0 0 0;
}

.read-next-card {
  position: relative;
  -webkit-flex: 1 1 300px;
          flex: 1 1 300px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  margin: 0 20px 40px;
  padding: 25px;
  color: #fff;
  background: var(--bg-color) center center;
  background-size: cover;
  border-radius: 5px;
  box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
}

.read-next-card:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: linear-gradient(135deg, rgba(0, 40, 60, 0.8) 0%, rgba(0, 20, 40, 0.7) 100%);
  border-radius: 5px;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.read-next-card-header {
  position: relative;
  z-index: 50;
  padding-top: 20px;
  text-align: center;
}

.read-next-card-header-sitetitle {
  display: block;
  font-size: 1.3rem;
  line-height: 1.3em;
  opacity: 0.8;
}

.read-next-card-header-title {
  margin: 0;
  padding: 0 20px;
  color: #fff;
  font-size: 3rem;
  line-height: 1.2em;
  letter-spacing: 1px;
}

.read-next-card-header-title a {
  color: #fff;
  font-weight: 300;
  text-decoration: none;
}

.read-next-card-header-title a:hover {
  text-decoration: none;
}

.read-next-divider {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  height: 80px;
}

.read-next-divider svg {
  width: 40px;
  fill: transparent;
  stroke: #fff;
  stroke-width: 0.5px;
  stroke-opacity: 0.65;
}

.read-next-card-content {
  position: relative;
  z-index: 50;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  display: -webkit-flex;
  display: flex;
  font-size: 1.7rem;
}

.read-next-card-content ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  list-style: none;
}

.read-next-card-content li {
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.25em;
  font-weight: 200;
  letter-spacing: -0.5px;
}

.read-next-card-content li a {
  display: block;
  padding: 20px 0;
  border-bottom: rgba(255, 255, 255, 0.3) 1px solid;
  color: #fff;
  font-weight: 500;
  vertical-align: top;
  transition: opacity 0.3s ease;
}

.read-next-card-content li:first-of-type a {
  padding-top: 10px;
}

.read-next-card-content li a:hover {
  opacity: 1;
}

.read-next-card-footer {
  position: relative;
  margin: 15px 0 3px 0;
  text-align: center;
}

.read-next-card-footer a {
  color: #fff;
}

/* 7.5. Koenig Styles
/* ---------------------------------------------------------- */
.post-content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
}

.post-full .kg-image {
  max-width: 100%;
  height: auto;
}

/* Preventing full-width image overlap with post image.  */
.post-full-image + .post-full .kg-content *:first-child .kg-image {
  width: 100%;
  height: auto;
}

.post-full .kg-width-full .kg-image {
  max-width: 100vw;
  height: auto;
}

.post-full figure {
  margin: 0.8em 0 2.3em;
}

.post-full h1 + figure,
.post-full h2 + figure,
.post-full h3 + figure,
.post-full h4 + figure {
  margin-top: 2em;
}

.post-full figure img {
  margin: 0 auto;
  height: auto;
}

.post-full figcaption {
  margin: 1em 0 0;
  color: color(var(--midgrey) l(-10%));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 75%;
  line-height: 1.5em;
  text-align: center;
}

.kg-width-full figcaption {
  padding: 0 1.5em;
}

.kg-embed-card {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 56.5%;
}

.kg-embed-card > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.kg-embed-card .fluid-width-video-wrapper {
  margin: 0;
}

@media (max-width: 1040px) {
  .post-full .kg-width-full .kg-image {
    width: 100vw;
  }
}
.kg-gallery-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 100vw;
}

.kg-gallery-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
          justify-content: center;
}

.kg-gallery-image img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
  margin: 0.75em 0 0 0;
}

.kg-gallery-image:not(:first-of-type) {
  margin: 0 0 0 0.75em;
}

.kg-gallery-card + .kg-image-card.kg-width-wide,
.kg-gallery-card + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
  margin: -2.25em 0 3em;
}

/* keep existing <pre> styles for code cards with captions */
.kg-code-card {
  width: 100%;
}

.kg-code-card pre {
  margin: 0;
}

.kg-bookmark-card {
  width: 100%;
  background: var(--white);
}

.kg-card + .kg-bookmark-card {
  margin-top: 0;
}

.post-full .kg-bookmark-container {
  display: -webkit-flex;
  display: flex;
  min-height: 148px;
  color: var(--darkgrey);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
}

.post-full .kg-bookmark-container:hover {
  color: var(--darkgrey);
  text-decoration: none;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
}

.kg-bookmark-content {
  -webkit-flex-grow: 1;
          flex-grow: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  padding: 20px;
}

.kg-bookmark-title {
  color: color(var(--midgrey) l(-30%));
  font-size: 1.6rem;
  line-height: 1.5em;
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}

.post-full .kg-bookmark-container:hover .kg-bookmark-title {
  color: var(--blue);
}

.kg-bookmark-description {
  display: -webkit-box;
  overflow-y: hidden;
  margin-top: 12px;
  max-height: 48px;
  color: color(var(--midgrey) l(-10%));
  font-size: 1.5rem;
  line-height: 1.5em;
  font-weight: 400;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kg-bookmark-thumbnail {
  position: relative;
  min-width: 33%;
  max-height: 100%;
}

.kg-bookmark-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 3px 3px 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.kg-bookmark-metadata {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: center;
          align-items: center;
  margin-top: 14px;
  color: color(var(--midgrey) l(-10%));
  font-size: 1.5rem;
  font-weight: 400;
}

.post-full .kg-bookmark-icon {
  margin-right: 8px;
  width: 22px;
  height: 22px;
}

.kg-bookmark-author {
  line-height: 1.5em;
}

.kg-bookmark-author:after {
  content: "•";
  margin: 0 6px;
}

.kg-bookmark-publisher {
  overflow: hidden;
  max-width: 240px;
  line-height: 1.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
@media (max-width: 800px) {
  .post-full figure {
    margin: 0.2em 0 1.3em;
  }

  .post-full h1 + figure,
  .post-full h2 + figure,
  .post-full h3 + figure,
  .post-full h4 + figure {
    margin-top: 0.9em;
  }
}

@media (max-width: 500px) {
  .post-full .kg-width-wide,
  .post-full .kg-width-full {
    margin-right: -5vw;
    margin-left: -5vw;
  }

  .post-full figcaption {
    margin-bottom: 0.4em;
  }

  .post-full .kg-bookmark-container {
    flex-direction: column;
  }

  .kg-bookmark-title,
  .kg-bookmark-description,
  .kg-bookmark-metadata {
    font-size: 1.4rem;
    line-height: 1.5em;
  }

  .post-full .kg-bookmark-icon {
    width: 18px;
    height: 18px;
  }

  .kg-bookmark-thumbnail {
    order: 1;
    min-height: 160px;
    width: 100%;
  }

  .kg-bookmark-thumbnail img {
    border-radius: 3px 3px 0 0;
  }

  .kg-bookmark-content {
    order: 2;
  }
}
*/
/* 7.2. Members Subscribe Form
/* ---------------------------------------------------------- */
.post-subscribe .form-group {
  align-self: stretch;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 80% 1fr;
}

.subscribe-email {
  display: grid;
  padding: 7px;
  width: 100%;
  font-size: 0.8rem;
  font-weight: 400;
  border-radius: 5px 0 0 5px;
  pointer-events: all;
  box-sizing: border-box;
  border: 3px solid #fff;
  margin: 0;
}

.subscribe-email:focus {
  outline: 0;
  border: 3px solid #82b1e0;
}

.post-subscribe button {
  pointer-events: all;
  cursor: pointer;
  margin: 0;
  background-color: #82b1e0;
  border: 0;
  border-radius: 0 5px 5px 0;
  font-size: 0.8rem;
  position: relative;
  outline: none;
  font-weight: 400;
  text-align: center;
}

.post-subscribe .button-loader,
.post-subscribe .message-success,
.post-subscribe .message-error {
  display: none;
}

.post-subscribe .loading .button-content {
  visibility: hidden;
}

.post-subscribe .loading .button-loader {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-block;
  margin-left: -19px;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

.post-subscribe .button-loader svg path,
.post-subscribe .button-loader svg rect {
  fill: #fff;
}

.post-subscribe .success .message-success,
.post-subscribe .invalid .message-error,
.post-subscribe .error .message-error {
  margin: 0.25em 0 0;
}

.post-subscribe .success .message-success {
  display: block;
  color: var(--success-text-color);
}

.post-subscribe .invalid .message-error,
.post-subscribe .error .message-error {
  display: block;
  color: var(--error-text-color);
}

/*****************************************************************************
HEADER STYLES
*****************************************************************************

nav                 // always at top, no bg color, header appears under it
header.grid         // container using 10 col grid from posts
  section.skew      // contents of header
    .anyclasshere   // Any content desired in the header
  .skewbg           // the angled background

Pages:
Landing         - A smaller image of me
About           - A larger image of me
Projects        - A two column project head
Index           - No image but header text within skew
Post            - No skew

TODO
-[X] Fix footer not seeing left half of background in body when body has background
    // SOLUTION: apply background to body rather than main
-[ ] Fix min-height issue for headers with text only; grid-row-gap one lever
-[ ] Add top padding for main body content so it doesn't overlap header skew on left


*****************************************************************************/
.skew-top {
  justify-items: center;
  position: relative;
  min-height: 200px;
}
.skew-top .skew-top-bg {
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  position: absolute;
  top: -115px;
  height: calc(100% - 6vw + 60px);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12vw), 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12vw), 0 100%);
  padding-bottom: calc(6vw + 6%);
  margin-bottom: calc(-1 * 6vw - 6%);
  background-size: cover;
}
@media (min-width: 1220px) {
  .skew-top .skew-top-bg {
    height: calc(100% - 20px);
  }
}

.page-projects .skew-top h1, .page-projects .skew-top h3 {
  text-align: center;
}
.page-projects .skew-top .skew-top-bg {
  height: calc(100% - 6vw + 300px);
}
@media (min-width: 1220px) {
  .page-projects .skew-top .skew-top-bg {
    height: calc(100% + 215px);
  }
}

.page-post .skew-top {
  min-height: calc(6vw + 50px);
}
@media (min-width: 1220px) {
  .page-post .skew-top {
    min-height: 130px;
  }
}
.page-post .skew-top.feature-image-background {
  min-height: calc(6vw + 260px);
}
@media (min-width: 1220px) {
  .page-post .skew-top.feature-image-background {
    min-height: 345px;
  }
}
.page-post .skew-top.feature-image-background .center-header {
  min-height: calc(6vw + 110px);
  width: 100%;
  grid-column: 3/span 7;
}
.page-post .skew-top.feature-image-background .title {
  text-align: left;
  padding-top: calc(3vw + 20px);
  text-shadow: 0 1px 6px #000;
  padding-bottom: 10px;
}
@media (min-width: 1220px) {
  .page-post .skew-top.feature-image-background .title {
    padding-top: 65px;
  }
}
.page-post .skew-top.feature-image-background .subhead {
  text-shadow: 0 1px 6px #000;
}
.page-post .skew-top.feature-image-background .skew-top-bg {
  opacity: 0.8;
}

.page-post .skew-top.feature-image-center .center-header {
  text-align: center;
}
.page-post .skew-top.feature-image-center .feature-image {
  display: grid;
  max-height: 300px;
  margin: 0 auto;
  grid-column: 1/span 10;
  margin-top: 15px;
}

.page-about .center-image {
  width: 200px;
}
.page-about .skew-top .skew-top-bg {
  height: calc(100% - 6vw);
}
@media (min-width: 1220px) {
  .page-about .skew-top .skew-top-bg {
    height: calc(100% - 85px);
  }
}

.skew-bot {
  justify-items: center;
  position: relative;
}
.skew-bot .skew-bot-bg {
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  position: absolute;
  bottom: 0;
  height: calc(100% - 6vw - 50px);
  -webkit-clip-path: polygon(0 calc(0% + 12vw), 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 calc(0% + 12vw), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(6vw + 6%);
  margin-top: calc(-1 * 6vw - 6%);
}
@media (min-width: 1220px) {
  .skew-bot .skew-bot-bg {
    height: calc(100% - 122px);
  }
}

.page-about .center-header, .page-landing .center-header, .page-index .center-header {
  text-align: center;
}

.page-post .longpost {
  min-height: calc(6vw + 140px);
}
.page-post .center-header {
  width: 100%;
  -webkit-align-content: start;
          align-content: start;
}
.page-post .center-header .title {
  padding-top: 20px;
}
@media (min-width: 992px) {
  .page-post .center-header .title {
    padding-top: 30px;
  }
}

.center-header {
  grid-column: 1/span 10;
}

.center-image {
  grid-column: 1/span 10;
  width: 100px;
  border-radius: 100px;
  border-width: 3px;
  border-style: solid;
}

footer .center-image {
  display: block;
}

/* for future use: header image just like footer

header.grid {
  position: relative;
}
.dark .header-image {
  position: absolute;
  display: block;
  background-size: cover;
  background-repeat: repeat-x;
  background-position: center;
  z-index: -2;
  mask-image: linear-gradient(to top, transparent 0%, black 100%);
  top: calc(6vw + 6% + 80px);
  left: -7.5%;
  width: 115%;
  max-height: 10vh;
  height: calc(100% + 24vw);
  transform: rotate(-6.8deg);
  transform-origin: center;
  background-image: url('/assets/img/dark.jpg');
  @include xl {
    bottom: calc(6% + 165px);
    height: calc(200% + 60px);
  }
}
*/
footer {
  position: relative;
}
footer .grid {
  position: relative;
  z-index: 5;
}
footer .footer-image {
  position: absolute;
  display: block;
  background-size: cover;
  background-repeat: repeat-x;
  background-position: center;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  pointer-events: none;
}

/*
This doesn't work with iphones, since it pushes the image content outside 100% width
Instead, I'm disabling it and going with more standard straight image

.dark .footer-image {
  bottom: calc(6vw + 6% + 90px);
  left: -7.5%;
  width: 115%;
  max-height: 40vh;
  height: calc(100% + 24vw);
  transform: rotate(-6.8deg);
  transform-origin: center;
  background-image: url('/assets/img/dark.jpg');
  opacity: 0.6;

  @include xl {
    bottom: calc(6% + 165px);
    height: calc(200% + 60px);
  }
}
*/
.dark .footer-image {
  bottom: calc(6% + 82px - 6vw);
  width: 100%;
  max-height: 40vh;
  min-height: 250px;
  height: calc(100% + 24vw);
  background-image: url("/assets/img/dark.jpg");
  opacity: 0.8;
  transition: opacity 2s ease-out;
}
@media (min-width: 1220px) {
  .dark .footer-image {
    height: calc(200% + 60px);
  }
}
@media (min-width: 1600px) {
  .dark .footer-image {
    bottom: calc(6% - 10px);
  }
}

.light .footer-image {
  bottom: calc(6% + 82px - 6vw);
  width: 100%;
  max-height: 40vh;
  min-height: 250px;
  height: calc(100% + 24vw);
  background-image: url("/assets/img/norway.jpg");
  opacity: 1;
  transition: opacity 2s ease-out;
}
@media (min-width: 1220px) {
  .light .footer-image {
    height: calc(200% + 60px);
  }
}
@media (min-width: 1600px) {
  .light .footer-image {
    bottom: calc(6% - 10px);
  }
}

.light .footer-image.alt-image {
  bottom: calc(6vw + 6% + 90px);
  left: -7.5%;
  width: 115%;
  max-height: 25vh;
  height: calc(100% + 24vw);
  -webkit-transform: rotate(-6.8deg);
          transform: rotate(-6.8deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  background-image: url("/assets/img/light.jpg");
  opacity: 0.45;
}
@media (min-width: 1220px) {
  .light .footer-image.alt-image {
    bottom: calc(6% + 165px);
    height: calc(200% + 60px);
  }
}

.synth main {
  position: relative;
}
.synth .header-image {
  position: absolute;
  display: block;
  background-size: cover;
  background-repeat: repeat-x;
  background-position: top center;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
          mask-image: linear-gradient(to top, transparent 0%, black 100%);
  pointer-events: none;
  top: 0;
  width: 100%;
  max-height: 50vh;
  min-height: 260px;
  height: calc(100% + 24vw);
  background-image: url("/assets/img/synth-top.jpg");
  opacity: 0.7;
  transition: opacity 5s ease-out;
}
@media (min-width: 1220px) {
  .synth .header-image {
    height: calc(200% + 60px);
  }
}
.synth .footer-image {
  bottom: 0;
  width: 100%;
  max-height: 50vh;
  min-height: 260px;
  height: calc(100% + 24vw);
  background-image: url("/assets/img/synth.jpg");
  opacity: 0.7;
  transition: opacity 5s ease-out;
}
@media (min-width: 1220px) {
  .synth .footer-image {
    height: calc(200% + 60px);
  }
}

/*
.synth .skew-top {
  justify-items: center;
  position: relative;
  // minimum height to enforce for text-only content; TODO consider another way
  min-height: 200px;

  .skew-top-bg {
    @include fullwidth;
    position: absolute;
    display: block;
    background-size: cover;
    //background-repeat: repeat-x;
    background-position: top center;
    z-index: -1;
    opacity: 1;
    mask-image: linear-gradient(to top, transparent 0%, black 100%);
    clip-path: none;
    top: -50px;
    max-height: 50vh;
    min-height: 260px;
    height: calc(100% + 24vw);
    background-image: url('/assets/img/synth-top.jpg');

    @include xl {
      height: calc(200% + 60px);
    }
  }
}
*/
/*****************************************************************************
GRID LAYOUT (POSTS)
******************************************************************************
The overall goal of this is to make an elegant, responsive, performant article
layout using CSS Grid. This means supporting the wide variety of ways articles
typically format content and figures, up to and including entirely different
sub-layouts broken out in sections. These features should make this suitable
for both articles and portfolio items.

Specific goals include
- legibility of code
- responsiveness primarily driven by pure CSS with a minimum of media queries
- performant with well-scoped and minimal CSS
- progressive enhancement (mobile-first) CSS

Usage
- blog posts
- projects (basis for, still requires custom projects css)

****************************************************************************
REQUIREMENTS
****************************************************************************
ARCHITECTURE REQUIREMENTS

-[X] Support Ghost composer blocks (images, galleries, embeds)
-[X] Mobile-first
-[X] Centered article text
-[X] Canvas-width sections
-[ ] Consider adding normalize.css https://github.com/necolas/normalize.css
-[ ] Vertical height reduces size of wide/full-width figures
-[X] Color themes
  -[X] Dark mode & light mode

LAYOUT REQUIREMENTS

-[X] Paragraphs (normal width)
-[X] Lists ordered/unordered (normal width)
-[X] Code blocks (normal width)
-[X] Images (normal width)
-[X] Headings (normal width)
-[X] Blockquotes (normal width)
-[X] Asides (right)
-[X] Images (wide width)
-[X] Images (xwide width)
-[X] Images with left caption (xwide width)
-[X] Images (canvas width)
-[X] Embeds like airtable (xwide width)
-[ ] Embeds like tweets (normal width)
-[ ] Embed spotify (narrow width centered) - breaks with figcaption
-[ ] Figures: two-column (L/R header)
-[ ] Figcaptions: no wider than max-width; ideally width of content only

CONTENT REQUIREMENTS
-[ ] Actions block (e.g. a show/hide button of some type)
-[ ] Cards to navigate to other articles (possibly in angled section)
-[X] Responsive font sizing
-[X] Refactor color names for themes
-[ ] TOC for longer posts? https://grantwinney.com/creating-a-table-of-contents-for-your-blog/
-[ ] JS for 'see more' in asides, and adding classes to lengthen them in grid-rows
-[ ] Projects should have next project navigation at bottom
-[ ] About page

AESTHETIC REQUIREMENTS

-[X] Section with angled background and different color scheme
-[X] Special header section w angled background
-[o] Special footer section w angled background
-[ ] Support non-angled headers AND angled dark headers in light mode
-[ ] Footer add nav links and recent posts
-[ ] Navigation section (.nav-current) styling with better underline than default

LOW PRIORITY EXTRAS
-[ ] Author bio block (left column?)
-[ ] Related content block (right column)

****************************************************************************
KNOWN ISSUES
****************************************************************************
Figure widths - if figures are too small for the given width, they don't
stretch out, e.g. images in canvas widths that are narrower than viewport
will leave blank space on left/right.

Embeds - some I want narrow (spotify) others wide (airtable), no way to
scope this in Ghost. Solution is probably to not have captions on smaller
ones since they will wind up too wide.

Figcaptions - expanding to full width even if the figure above them is not.
Makes it hard to style them with backgrounds.

Asides - if they're longer than content to their left, they will push down
that content to fit their height. Workaround is add 'aside-md' or larger
classes to add row spans.

****************************************************************************
DETAILS - HTML
****************************************************************************
All post content lives within the <article> tag. This includes
different <section> content, which primarily is there for styling.

See test-article.md for HTML

****************************************************************************
DETAILS - GRID
****************************************************************************
10 column grid, with ~20% grid gaps. Names are grid-area names.

COLUMNS      NAME        USAGE
*            canvas      for fullpage images & section w/ backgrounds
  34567890*  canvas-rt   for fullpage image with lt-side caption
1234567890   xwide       very large images and embeds
 23456789    wide        slightly oversized images and embeds
  345678     default     normal article width
12           lt-side     left column actions and captions
        90   rt-side     right column asides
      7890   rt-side-lg  for image hanging off right (use w/ centerleft)
  3456       narrow-lt   footnotes and slightly narrower text content
      78     narrow-rt   for tall narrow image (use w/ centerleft)
 23456       wide-lt     page-landing left content
       890   rt-side-md  page-landing right content
  345        half-lt     ?
     678     half-rt     ?
12345        xwide-lt    ?
     67890   xwide-rt    ?

****************************************************************************
DETAILS - CONTAINER
****************************************************************************
Unlike CSS Flex, CSS Grid doesn't allow multiple columns to set equivalent
flexible widths up to a fixed size (minmax only works opposite to that [1][2]).
This means at larger screen sizes, articles will keep getting wider. Manually
setting column max-widths would be hacky, and wouldn't be possible in just CSS
with the above desired grid layouts.

The solution is to make <article> NOT full width, and in the few circumstances
where a full-canvas width is desired (such as adding a section with a different
background color), use special viewport-based css to break out. [3]

The <article> would then have responsive columns of equal width (1fr), while
enforcing the desired max width, calculated as all columns + gaps (1220px).

While Grid is generally a great tool, another failing is that if asides (or
callouts) are taller than the content they're next to, a gap is created in the
main article flow [4]. This, however, is a minor issue.

[1] Limits of minmax - https://css-tricks.com/things-ive-learned-css-grid-layout/#article-header-id-8
[2] https://medium.com/csstuff/the-one-thing-i-hate-about-grid-cd2c4acdbb8a
[3] https://css-tricks.com/full-width-containers-limited-width-parents/#article-header-id-6
[4] https://jonathan-harrell.com/contextual-asides-with-css-grid/

****************************************************************************
CURRENT PROBLEMS (9/28/18)

My goal is to have the main river of text exhibit a smooth transition as you
scale the window, without any sudden width changes. The only sudden changes I
want are the reflow of certain items like asides once breakpoints are hit. I'm
unsure if font size should change in media queries (probably should).

# 1. Narrow river of text on mobile (DONE)
At small screen sizes, the main text content is super narrow. This is because
if columns are non-0, they also get grid-gaps added to them.
Setting minmax to 0 for the left and right two columns doesn't do anything:
  grid-template-columns: repeat(2, minmax(0px, 1fr)) repeat(6, 1fr) repeat(2, minmax(0px, 1fr));
Setting minmax to minimum 40px helps for sizes down to 320px, but is too narrow after:
  repeat(2, minmax(0px, 1fr)) repeat(6, minmax(50px, 1fr)) repeat(2, minmax(0px, 1fr));
Basic problem here is conceptual: it doesn't know that I want columns 3-7 full width
until a certain point when I want layout to reflow.

## Possible Solutions
A. Carefully optimize breakpoints around the width of the text, setting the
side columns up to grow once a size is reached. This effectively means two
separate times where the text river grows. (CHOSEN FOR NOW)

  For instance, at 768px, this is perfectly smooth w grid-gap 10px:
  repeat(2,minmax(0,1fr)) repeat(6,minmax(113px,1fr)) repeat(2,minmax(0,1fr))
  At 720px: minmax(105px,1fr)
  At 650px: minmax(93px,1fr)
  At 600px: minmax(84px,1fr)
  At 576px (sm): minmax(81px,1fr)

B. Change which grids the content spans. This is hacky.

C. There may be other solutions around messing with variable-width grid-gaps.


# 2. Super wide images aren't centered
The container-breakout layout hack seems to not handle this case well.
I may just give up on these and the right-aligned images.

# 3. Angled Sections don't work (DONE)
I can't get the angled section background to be below the content.

# 4. Child Grids (DONE)
Any children of <article> that contain children themselves for their content
(such as figures with figcaptions) are not inheriting the overall grid. I believe
I just need to reimplement the grid within them, but this is inelegant extra css.

# 5. Consideration: non-centered text at smaller widths (DONE)
Right now the asides that I hope to use quite a bit don't appear until a relatively
big screen size (992px). Since I'm already messing with grids at smaller sizes,
I could simply keep the river of text aligned to the side hitting its first
breakpoint max width at sm (576px), then as the screen grows the right side
column comes in, making good room for the aside to appear at md (768px), then
as lg (992px) is hit, the left column starts coming in strong (while the rest
are equal widths). The only concern here is the left aside of the .canvas-rt
figure, which pops in at lg (992px).

******************************************************************************/
/*****************************************************************************
GRID COLUMN SETUP
*****************************************************************************/
.grid, .grid > section {
  display: grid;
  grid-template-columns: repeat(2, 0) repeat(6, 1fr) repeat(2, 0);
  grid-column-gap: 10px;
  grid-row-gap: 20px;
  max-width: 1220px;
}

@media (min-width: 576px) {
  .grid, .grid > section {
    grid-template-columns: repeat(2, 0) repeat(6, minmax(81px, 1fr)) repeat(2, minmax(0px, 1fr));
  }
}
@media (min-width: 768px) {
  .grid, .grid > section {
    grid-template-columns: repeat(2, 0) repeat(8, minmax(81px, 113px));
  }
}
@media (min-width: 992px) {
  .grid, .grid > section {
    grid-template-columns: repeat(2, minmax(0px, 113px)) repeat(8, minmax(112px, 113px));
  }

  figure.canvas-rt {
    grid-column-gap: 10px;
    grid-template-columns: repeat(2, minmax(0px, 113px)) repeat(8, minmax(112px, 113px));
  }
}
/*****************************************************************************
CONTENT PLACEMENT ON GRID
*****************************************************************************/
.grid {
  -webkit-justify-content: center;
          justify-content: center;
}
.grid h1, .grid h2, .grid h3, .grid h4, .grid p, .grid blockquote, .grid ol, .grid ul, .grid figure, .grid figcaption, .grid embed, .grid aside, .grid hr,
.grid time, .grid form,
.grid .post-teaser-card,
.grid .kg-image-card,
.grid .narrow-lt,
.grid .wide-lt,
.grid .rt-side-md,
.grid .read-next {
  grid-column: 3/span 6;
}
.grid .kg-embed-card {
  justify-self: center;
}
.grid .post-tags {
  grid-column: 1/span 2;
  justify-self: right;
}
.grid .post-meta .post-tags {
  grid-column: 3/span 6;
  justify-self: left;
}
.grid article.post-inline,
.grid section.skew-inline,
.grid section.post-meta,
.grid section.post-subscribe,
.grid section.post-next,
.grid section.skew-top,
.grid section.skew-bot,
.grid section.footnotes,
.grid pre,
.grid .gist,
.grid figure.canvas-rt,
.grid figure.canvas, .grid .kg-image-card.kg-width-full,
.grid figure.xwide, .grid .kg-image-card.kg-width-wide,
.grid figure.wide,
.grid .kg-gallery-card,
.grid .kg-embed-card {
  grid-column: 1/span 10;
}
.grid figure.canvas {
  justify-self: center;
}
.grid figure {
  margin-bottom: 10px;
}
.grid figure img, .grid figure iframe {
  display: block;
}
.grid figure.rt-side-lg img {
  width: 100%;
}
.grid figcaption {
  max-height: 100%;
  max-width: 100%;
  padding: 10px 0;
  justify-self: stretch;
  margin-left: 10px;
}
.grid aside {
  grid-row: auto/span 1;
}
.grid aside.aside-md {
  grid-row: auto/span 2;
}
.grid aside.aside-lg {
  grid-row: auto/span 3;
}
.grid aside.aside-xl {
  grid-row: auto/span 5;
}
.grid .narrow-lt {
  justify-self: left;
}

@media (min-width: 576px) {
  .grid figure.wide, .grid .kg-image-card.kg-width-wide, .grid > section figure.wide, .grid > section .kg-image-card.kg-width-wide {
    grid-column: 1/span 10;
  }
}
@media (min-width: 768px) {
  .grid aside, .grid > section aside {
    grid-column: 9/span 2;
    margin-right: 10px;
  }
  .grid pre, .grid .gist, .grid > section pre, .grid > section .gist {
    grid-column: 3/span 7;
  }
  .grid .narrow-lt, .grid > section .narrow-lt {
    grid-column: 3/span 4;
  }
  .grid .wide-lt, .grid > section .wide-lt {
    grid-column: 3/span 4;
  }
  .grid .rt-side-md, .grid > section .rt-side-md {
    grid-column: 8/span 3;
  }
  .grid figure.rt-side-lg, .grid > section figure.rt-side-lg {
    grid-column: 7/span 4;
    margin-right: calc(-3vw * 3);
  }
}
@media (min-width: 992px) {
  .grid figure.canvas-rt, .grid > section figure.canvas-rt {
    display: grid;
    grid-column: 1/span 10;
    grid-template-areas: "canvas-rt" "lt-side";
  }
  .grid figure.canvas-rt a.lg-image, .grid > section figure.canvas-rt a.lg-image {
    grid-area: canvas-rt;
    grid-column: 3/span 8;
    grid-row: 1;
  }
  .grid figure.canvas-rt figcaption, .grid > section figure.canvas-rt figcaption {
    grid-area: lt-side;
    grid-column: 3/span 8;
    align-self: stretch;
  }
  .grid .wide-lt, .grid > section .wide-lt {
    grid-column: 2/span 5;
  }
  .grid pre, .grid .gist, .grid > section pre, .grid > section .gist {
    grid-column: 2/span 8;
  }
  .grid .read-next, .grid > section .read-next {
    grid-column: 1/span 10;
  }
}
@media (min-width: 1220px) {
  .grid, .grid > section {
    margin-left: auto;
    margin-right: auto;
  }
  .grid aside, .grid > section aside {
    margin-right: 0;
  }
  .grid figure.canvas, .grid > section figure.canvas {
    justify-self: stretch;
  }
  .grid figure.canvas figcaption, .grid > section figure.canvas figcaption {
    max-width: 1220px;
    margin: 0 auto;
  }
  .grid figure.canvas-rt, .grid > section figure.canvas-rt {
    grid-template-areas: "lt-side" "canvas-rt";
  }
  .grid figure.canvas-rt figcaption, .grid > section figure.canvas-rt figcaption {
    grid-column: 1/span 2;
    grid-row: 1;
    text-align: right;
    margin: 0 -10px;
  }
  .grid figure.canvas, .grid .kg-image-card.kg-image-full, .grid > section figure.canvas, .grid > section .kg-image-card.kg-image-full {
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: relative;
    grid-column: 1/span 10;
  }
  .grid figure.canvas img, .grid .kg-image-card.kg-image-full img, .grid > section figure.canvas img, .grid > section .kg-image-card.kg-image-full img {
    margin: 0 auto;
  }
}
@media (min-width: 1600px) {
  .grid figure.rt-side-lg, .grid > section figure.rt-side-lg {
    margin-right: -143px;
  }
}
/* Skew sections
These support background images on .skew-inline-bg
This works differently from header/footer, which add padding and negative margin
on the background item itself rather than the parent skew container. Instead,
I've added z-index -1 to prevent the padding/negative margins from messing up
clickable areas above and below.
*/
.grid > .skew-inline {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  -webkit-align-items: center;
          align-items: center;
  padding: calc(6vw + 6%) 0;
  pointer-events: none;
}
.grid > .skew-inline a {
  pointer-events: auto;
}
.grid > .skew-inline .skew-inline-bg {
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: absolute;
  z-index: -1;
  top: -20px;
  height: calc(100% + 40px);
  -webkit-clip-path: polygon(0 calc(0% + 12vw), 100% 0, 100% calc(100% - 12vw), 0 100%);
          clip-path: polygon(0 calc(0% + 12vw), 100% 0, 100% calc(100% - 12vw), 0 100%);
  pointer-events: none;
}
@media (min-width: 1220px) {
  .grid > .skew-inline {
    margin: calc(-1 * 6vw + 6%) 0;
  }
}

.kg-gallery-container {
  max-width: 1220px;
  width: 100vw;
}

.kg-gallery-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
          justify-content: center;
}

.kg-gallery-image img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
  margin: 0.75em 0 0 0;
}

.kg-gallery-image:not(:first-of-type) {
  margin: 0 0 0 0.75em;
}

/* Cards to navigate to other articles
  // TODO still working on 5 cards style and how to auto-place them having x column span width and starting a y column
  nav.full {
    grid-column: 1 / span 10;

    .next-article-card {
      background-color: $c-bg;
      color: $c-lt-bg;
      max-width: 100%;
      max-height: 100%;
      grid-column: span 2;
      padding: 10px;
      border-radius: 20px;

      &:first-child {
        grid-column-start: 1;
      }
    }
  }
*/
/* Saved for potential future use
aside {
//  grid-area: rt-side;
}
section {
//  grid-area: canvas;
}
figure.xwide {
//  grid-area: xwide;
}
figure.wide {
//  grid-area: wide;
}
section.heading {
  header {
    grid-area: narrow-lt;
  }
  img {
    grid-area: rt-side-lg;
  }
}
*/
/*****************************************************************************
  CONTENT STYLES
 *****************************************************************************

   Requirements
******************************************************************************/
.content-spacing {
  padding: 4% 0;
}
@media (min-width: 1220px) {
  .content-spacing {
    padding: 30px 0;
  }
}

.page-project header.grid {
  padding-top: 40px;
}

.page-project .skew-top img {
  border-width: 2px;
  border-style: solid;
}

.page-landing h1 {
  margin-top: 15px;
  margin-bottom: 5px;
}
.page-landing .grid .grid-spacing-replicate h3 {
  margin-bottom: 15px;
}
.page-landing .grid .grid-spacing-replicate p {
  margin-bottom: 20px;
}
.page-landing .grid .grid-spacing-replicate ul {
  padding-left: 0;
  margin-bottom: 30px;
}
.page-landing .grid .grid-spacing-replicate li {
  list-style-type: none;
  margin-bottom: 10px;
}

.post-next {
  margin-top: 40px;
  margin-bottom: 160px;
}
.post-next .post-other {
  margin-top: 20px;
}

.read-next {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}

.page-about .subhead {
  margin: 0 0 10px;
}

.page-projects .projects-list {
  margin-top: -80px;
}
.page-projects .post-full {
  margin-bottom: 160px;
}

.post-teaser-card {
  margin-bottom: 0;
}
.post-teaser-card:last-of-type {
  margin-bottom: 5em;
}

.post-tags {
  margin-right: 10px;
}

aside {
  margin-left: 10px;
}

ul, ol {
  padding-left: 25px;
}

hr {
  border: 0;
  height: 2px;
  margin: 15px 10px;
}

blockquote {
  border-left-width: 2px;
  border-left-style: solid;
  padding-left: 15px;
  margin-left: 2px;
  padding-bottom: 0;
}

.quote {
  border-left-width: 2px;
  border-left-style: solid;
  padding-left: 15px;
  margin-left: 2px;
}
.quote figcaption {
  margin-left: 0;
  padding-bottom: 0;
  margin-top: 0;
}
.quote blockquote {
  padding-left: 0;
  border-left: 0;
  margin-left: 0;
}

.quote-large figcaption {
  margin-left: 0;
  padding-bottom: 0;
  margin-top: 0;
}
.quote-large blockquote {
  padding-left: 0;
  border-left: 0;
  margin-left: 0;
}

ol li.footnote-item {
  display: grid;
  -webkit-justify-content: left;
          justify-content: left;
  margin-bottom: 10px;
}
ol li.footnote-item:last-of-type {
  margin-bottom: 0;
}
ol li.footnote-item p {
  margin-bottom: 10px;
}
ol li.footnote-item p:last-of-type {
  margin-bottom: 0;
}

footer .skew-bot {
  grid-row-gap: 10px;
}

footer .center-image {
  height: 100px;
}

.footer-height-set {
  height: 25px;
}

.copyright {
  margin-bottom: 10px;
}

/*****************************************************************************
  Simple Grid
******************************************************************************

This simpler grid implementation allows for a centered text river along with
full width images and possibly simple asides. See:
https://www.rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/
https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

*****************************************************************************/
.grid-simple {
  display: grid;
  grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(0, 1fr) [full-end];
  grid-gap: 10px;
}
.grid-simple p, .grid-simple div, .grid-simple ul, .grid-simple ol, .grid-simple h1, .grid-simple h2, .grid-simple h3, .grid-simple h4, .grid-simple section, .grid-simple blockquote, .grid-simple hr, .grid-simple article {
  grid-column: main;
  margin: 0;
}
.grid-simple ul, .grid-simple ol {
  padding-left: 20px;
}
.grid-simple pre {
  grid-column: full;
  margin: 0;
  display: grid;
  grid-template-columns: [fullnest-start] minmax(0, 1fr) [mainnest-start] minmax(0, 44em) [mainnest-end] minmax(0, 1fr) [fullnest-end];
  grid-gap: 10px;
  background-color: var(--code-bg-color);
}
.grid-simple pre > code.hljs {
  grid-column: mainnest;
  background: none;
  padding: 0.8em 0;
}
.grid-simple aside {
  grid-column: main/full;
}
@media (min-width: 992px) {
  .grid-simple aside {
    -webkit-order: -1;
            order: -1;
  }
}
.grid-simple blockquote {
  letter-spacing: 0.04em;
  padding-left: 10px;
  border-left: 2px solid var(--link-color);
}
.grid-simple hr {
  border: 0;
  height: 3px;
  margin: 15px 0;
  background-color: var(--hr-color);
}

/*****************************************************************************
  THEMES FOR DIFFERENT COLORS
 *****************************************************************************

Uses CSS Variables to handle many different themes. Super efficient!
Followed these instructions:
https://medium.com/@NateBaldwin/theming-with-css-variables-d7acddd3a699

Note that to use SASS variables in CSS variables, you must escape them
See here: https://github.com/sass/libsass/issues/2621

Used names for css colors from here: http://chir.ag/projects/name-that-color/

HSL color picker always useful: http://hslpicker.com/

TODO
-[ ] Add theme classes to header/footer to keep them always dark, & eliminate extra colors
-[ ] Use CSS darken/lighten/desaturate to reduce colors
-[ ] Optimize variables so they're reusable / less scoped
*****************************************************************************/
.dark {
  --bg-color: #171e27;
  --text-color: #dae0e7;
  --dark-text-color: #dae0e7;
  --dark-link-color: #82cef7;
  --dark-link-color-visited: #5cc6ff;
  --dark-link-color-underline:#2e4256;
  --dark-link-color-hover: #2a3541;
  --success-text-color: #71efb6;
  --error-text-color: #ff3b39;
  --link-color: #82cef7;
  --link-color-visited: #5cc6ff;
  --link-color-underline: #2e4256;
  --link-color-hover: #2a3541;
  --post-header-color: #82cef7;
  --post-header-color-hover: white;
  --post-subhead-color: #b6c0ce;
  --nav-link-color: #ffcf99;
  --nav-link-color-hover: white;
  --nav-sec-link-color: #9ac7e0;
  --time-color: #9ac7e0;
  --text-mark-color: #f0f2f5;
  --text-mark-bg-color: #2f3e50;
  --text-selection-color: white;
  --text-selection-bg-color: #8fa3bd;
  --quote-border-color: #5489a6;
  --subhead-text-color: #ffcf99;
  --header-bg-color: #202a37;
  --header-text-color-h1: white;
  --header-text-color-h3: #ddd;
  --header-pill-color-bg: #f6f0e4;
  --header-pill-text-color: #202a37;
  --header-text-color: white;
  --header-project-border: #202a37;
  --skew-text-color: white;
  --skew-bg-color: #202a37;
  --skew-barely-text-color: #556f91;
  --hex-bg-color: #2f3e50;
  --hex-text: white;
  --card-bg-color: #202a37;
  --card-bg-color-hover: #2f3e50;
  --projectcard-title-color: #ffcf99;
  --projectcard-text-color: #f6f0e4;
  --projectcard-bg-color: #2a3541;
  --projectcard-bg-hover: #323f4e;
  --projectcard-border-color: #425261;
  --code-bg-color: #202a37;
  --code-border-color: #2f3e50;
  --hr-color: #5489a6;
  --li-color: #5d97b6;
}

.light {
  --bg-color: #f6f0e4;
  --text-color: #64554a;
  --dark-text-color: #dae0e7;
  --dark-link-color: #82cef7;
  --dark-link-color-visited: #5cc6ff;
  --dark-link-color-underline:#2e4256;
  --dark-link-color-hover: #2a3541;
  --success-text-color: #0f8550;
  --error-text-color: #d20200;
  --link-color: #8e7143;
  --link-color-visited: #ba8d45;
  --link-color-underline: #e2c8ac;
  --link-color-hover: #e7d9ca;
  --post-header-color: #64554a;
  --post-header-color-hover: #c29b5b;
  --post-subhead-color: #877464;
  --nav-link-color: #ffcf99;
  --nav-link-color-hover: white;
  --nav-sec-link-color: #9ac7e0;
  --time-color: #bd9a61;
  --text-mark-color: #64554a;
  --text-mark-bg-color: #efe3cd;
  --text-selection-color: white;
  --text-selection-bg-color: #64554a;
  --quote-border-color: #beab97;
  --subhead-text-color: #ffcf99;
  --header-bg-color: #202a37;
  --header-text-color-h1: white;
  --header-text-color-h3: #ddd;
  --header-pill-color-bg: #f6f0e4;
  --header-pill-text-color: #202a37;
  --header-text-color: white;
  --header-project-border: #202a37;
  --skew-text-color: #64554a;
  --skew-bg-color: #f1e7d5;
  --skew-barely-text-color: #556f91;
  --hex-bg-color: #f1e7d5;
  --hex-text: #202a37;
  --card-bg-color: #f1e7d5;
  --card-bg-color-hover: #e9dabe;
  --projectcard-title-color: #ffcf99;
  --projectcard-text-color: #f6f0e4;
  --projectcard-bg-color: #2a3541;
  --projectcard-bg-hover: #323f4e;
  --projectcard-border-color: #425261;
  --code-bg-color: #202a37;
  --code-border-color: #d7cdbc;
  --inline-code-bg-color: #f2e9d9;
  --hr-color: #beab97;
  --li-color: #ab9278;
}

.synth {
  --bg-color: #041749;
  --text-color: #fff5ff;
  --dark-text-color: #dae0e7;
  --dark-link-color: #82cef7;
  --dark-link-color-visited: #5cc6ff;
  --dark-link-color-underline:#2e4256;
  --dark-link-color-hover: #2a3541;
  --link-color: #fb8dd3;
  --link-color-visited: #ba8d45;
  --link-color-underline: #bf70ff;
  --link-color-hover: #3d3768;
  --post-header-color: #64554a;
  --post-header-color-hover: #c29b5b;
  --post-subhead-color: #bf70ff;
  --nav-link-color: #fb8dd3;
  --nav-link-color-hover: white;
  --nav-sec-link-color: #9ac7e0;
  --time-color: #04eaf6;
  --text-mark-color: #ffe6ff;
  --text-mark-bg-color: #33284d;
  --text-selection-color: white;
  --text-selection-bg-color: rgba(110, 225, 231, 0.05);
  --quote-border-color: #bf70ff;
  --subhead-text-color: #bf70ff;
  --header-bg-color: #332744;
  --header-text-color-h1: white;
  --header-text-color-h3: #ddd;
  --header-pill-color-bg: #ff3b39;
  --header-pill-text-color: #202a37;
  --header-text-color: white;
  --header-project-border: #202a37;
  --skew-text-color: #afb4cf;
  --skew-bg-color: #332744;
  --skew-barely-text-color: #9ac7e0;
  --hex-bg-color: #f1e7d5;
  --hex-text: #202a37;
  --card-bg-color: #332744;
  --card-bg-color-hover: #3a2d4e;
  --projectcard-title-color: #ffcf99;
  --projectcard-text-color: #f6f0e4;
  --projectcard-bg-color: #332744;
  --projectcard-border-color: #07608d;
  --code-bg-color: #332744;
  --code-border-color: rgba(20, 179, 107, 0.1);
  --inline-code-bg-color: rgba(17, 156, 94, 0.1);
  --hr-color: #50d5dc;
  --li-color: #04eaf6;
}

body.synth {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
}
body.synth .page-about .nav-title, body.synth .page-landing .nav-title {
  display: none;
}
body.synth .post h2, body.synth .post h3, body.synth .post h4, body.synth .subhead, body.synth .page h2, body.synth .page h3, body.synth .page h4 {
  text-shadow: 0 0 2px #100c0f, 0 0 10px #dc078e99, 0 0 15px #fff3;
}
body.synth ::-moz-selection {
  text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf9ff;
}
body.synth ::selection {
  text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf9ff;
}
body.synth li::before {
  text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
}
body.synth blockquote {
  color: #cf91b8;
  text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
}
body.synth .quote figcaption {
  color: #bf70ff;
}
body.synth hr {
  box-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 28px #03edf9ff;
}
body.synth .center-header h1, body.synth .title {
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #bbeff2;
  text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
  margin: 20px 0;
}
body.synth a {
  color: #fb8dd3;
  text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
}
body.synth h1.post-card-title, body.synth .page-project h1 {
  color: var(--text-color);
  text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
}
body.synth time {
  text-shadow: 0 0 2px #001716, 0 0 5px #03edf945, 0 0 28px #03edf945;
}
body.synth code {
  color: #71efb6;
  text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
}
body.synth pre > code.hljs {
  color: #df2a9d;
  text-shadow: 0 0 2px #001716, 0 0 4px rgba(251, 141, 211, 0.2);
}
body.synth .hljs-keyword {
  color: #f4eee4;
  text-shadow: 0 0 2px #393a33, 0 0 6px #f39f0575;
}
body.synth .hljs-title {
  color: #36f9f6;
  text-shadow: 0 0 2px #001716, 0 0 3px #36f9f675, 0 0 5px #36f9f675, 0 0 8px #36f9f675;
}
body.synth .hljs-comment {
  text-shadow: 0 0 2px #001716, 0 0 7px #495495;
}
body.synth .hljs-tag {
  text-shadow: 0 0 2px #001716, 0 0 9px #fc1f2caa;
}
body.synth .hljs-string {
  color: #ff8b39;
}
body.synth .hljs-built_in {
  color: #f4dddd;
  text-shadow: 0 0 2px #001716, 0 0 9px #fc1f2caa;
}
body.synth .post-teaser-card, body.synth .project-card {
  box-shadow: 0 0 5px #4f404f, 0 0 10px rgba(168, 61, 255, 0.3);
}
body.synth .post-teaser-card:hover, body.synth .project-card:hover {
  box-shadow: 0 0 10px #f0d1f0, 0 0 25px rgba(168, 61, 255, 0.3);
}
body.synth .post-card-content-link {
  text-shadow: none;
}
body.synth .skew-top .skew-top-bg {
  background-color: transparent;
}
body.synth .nav-header .nav-link {
  background-image: linear-gradient(to bottom, #FFFC8A, #fb8dd3 80%, #f82aad 90%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 2px rgba(255, 252, 138, 0.2), 0 0 10px rgba(251, 141, 211, 0.5), 0 0 22px rgba(251, 141, 211, 0.3);
}
body.synth .nav-header .nav-link:hover {
  color: white;
  text-shadow: 0 0 2px rgba(255, 252, 138, 0.2), 0 0 10px rgba(251, 141, 211, 0.5), 0 0 22px rgba(251, 141, 211, 0.3);
}
body.synth .skew-header #nav-light svg {
  box-shadow: 0 0 2px rgba(255, 252, 138, 0.2), 0 0 15px rgba(251, 141, 211, 0.3);
}
body.synth .skew-header #nav-light path {
  fill: url(#synth3) #FFFC8A;
}
body.synth .center-header .nav-skew .nav-link {
  color: #fb8dd3;
}
body.synth .center-header .nav-skew .nav-link:hover {
  color: white;
}
body.synth .skew-header a.nav-name .nav-logo svg {
  -webkit-mask: url("/assets/img/synthmask-sm.svg");
          mask: url("/assets/img/synthmask-sm.svg");
}
body.synth .skew-header a.nav-name .nav-logo svg path {
  fill: url(#synth2) #FFFC8A;
}
body.synth header .center-header .center-image {
  border: none;
  box-shadow: 0 0 53px #FFFC8A33, 0 0 15px rgba(255, 252, 138, 0.2), 0 0 24px rgba(4, 234, 246, 0.5);
}
body.synth .copyright {
  text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #04eaf6;
  margin-bottom: 25vh;
}
body.synth .skew-bot-bg {
  background-color: transparent !important;
}
body.synth footer .nav-skew .nav-link {
  text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
}
body.synth footer .center-image {
  border: none;
  background: linear-gradient(to bottom, rgba(255, 252, 138, 0.1) 75%, rgba(251, 141, 211, 0.4));
  box-shadow: 0 0 53px #FFFC8A33, 0 0 15px #dc078e33, 0 0 24px rgba(251, 141, 211, 0.5);
}
body.synth footer .center-image svg {
  -webkit-mask: url("/assets/img/synthmask.svg");
          mask: url("/assets/img/synthmask.svg");
}
body.synth footer .center-image svg path {
  fill: url(#synth) #FFFC8A;
}

/*****************************************************************************
 POSTS
*****************************************************************************/
body {
  background-color: var(--header-bg-color);
  color: var(--text-color);
  /*****************************************************************************
   HEADER
  *****************************************************************************

  Header-free page, where no skew is at top so header should change according to
  theme. Currently unused.
  *****************************************************************************/
  /*****************************************************************************
  All other pages that have skew at top
  *****************************************************************************/
  /*
  .nav-current a {
    border-color: var(--link-color-underline);
  }
  */
}
body ::-moz-selection {
  text-shadow: none;
  color: var(--text-selection-color);
  background-color: var(--text-selection-bg-color);
}
body ::selection {
  text-shadow: none;
  color: var(--text-selection-color);
  background-color: var(--text-selection-bg-color);
}
body main {
  background-color: var(--bg-color);
}
body footer {
  background-color: var(--bg-color);
}
body .header-free a.nav-name .nav-logo path,
body .header-free #nav-light path {
  fill: var(--post-header-color);
}
body .header-free .nav-container a,
body .header-free .nav-container a .nav-name {
  color: var(--post-header-color);
}
body .header-free a.nav-name:hover .nav-logo path {
  fill: var(--post-header-color-hover);
}
body .header-free .nav-container a:hover,
body .header-free .nav-container a:hover .nav-name {
  color: var(--post-header-color-hover);
}
body .header-free .subhead {
  color: var(--post-subhead-color);
}
body .skew-header a.nav-name .nav-logo path,
body .skew-header #nav-light path {
  fill: var(--nav-link-color);
}
body .skew-header a.nav-name .nav-logo svg,
body .skew-header #nav-light svg {
  box-shadow: 0 0 6px var(--header-bg-color);
  border-radius: 30px;
}
body .skew-header .nav-container a,
body .skew-header .nav-container a .nav-name {
  color: var(--nav-link-color);
  text-shadow: 0 0 4px var(--header-bg-color);
}
body .skew-header a.nav-name:hover .nav-logo path {
  fill: var(--nav-link-color-hover);
}
@media (hover: hover) {
  body .skew-header #nav-light:hover path {
    fill: var(--nav-link-color-hover);
  }
}
body .skew-header .nav-container a:hover,
body .skew-header .nav-container a:hover .nav-name {
  color: var(--nav-link-color-hover);
}
body .skew-header .skew-top {
  color: white;
}
body .skew-header .skew-top .subhead {
  color: var(--subhead-text-color);
}
body .subhead {
  color: var(--post-subhead-color);
}
body a {
  color: var(--link-color);
}
body .post-link a {
  color: var(--text-color);
}
body .post-teaser-card {
  background-color: var(--card-bg-color);
}
body .post-card-content-link {
  color: var(--text-color);
}
body .post-full a, body .post-inline a, body .post-page a {
  border-color: var(--link-color-underline);
}
body .post-full a:hover, body .post-inline a:hover, body .post-page a:hover {
  background-color: var(--link-color-hover);
}
body .post-full a.lg-image:hover, body .post-inline a.lg-image:hover, body .post-page a.lg-image:hover {
  background-color: transparent;
}
body time {
  color: var(--time-color);
}
body .post-tag, body .post-button {
  color: var(--text-color);
  background-color: var(--card-bg-color);
}
body .post-tag:hover, body .post-button:hover {
  background-color: var(--card-bg-color-hover);
}
body mark {
  color: var(--text-mark-color);
  background-color: var(--text-mark-bg-color);
}
body .quote, body .quote-large, body blockquote {
  border-left-color: var(--quote-border-color);
}
body li::before {
  color: var(--li-color);
}
body .nav-skew .nav-link {
  color: var(--nav-sec-link-color);
}
body .nav-skew .nav-link:hover {
  color: var(--nav-link-color-hover);
}
body .skew-inline {
  color: var(--skew-text-color);
}
body .skew-inline .skew-inline-bg {
  background-color: var(--skew-bg-color);
}
body .skew-inline.inline-dark {
  color: var(--dark-text-color);
}
body .skew-inline.inline-dark a {
  color: var(--dark-link-color);
  border-color: var(--dark-link-color-underline);
}
body .skew-inline.inline-dark a:visited {
  color: var(--dark-link-color-visited);
}
body .skew-inline.inline-dark a:hover {
  background-color: var(--dark-link-color-hover);
}
body .skew-inline.inline-dark .skew-inline-bg {
  background-color: var(--header-bg-color);
}
body .skew-top-bg,
body .skew-bot-bg {
  background-color: var(--header-bg-color);
}
body .center-image {
  border-color: var(--header-bg-color);
}
body .page-project .skew-top img {
  border-color: var(--header-project-border);
}
body .page-project .nav-projects a {
  border-color: var(--link-color-underline);
}
body .page-project .narrow-lt h1 {
  color: var(--header-text-color-h1);
}
body .page-project .narrow-lt .date-pill {
  background-color: var(--header-pill-color-bg);
  color: var(--header-pill-text-color);
}
body .page-project .narrow-lt h4 {
  color: var(--header-text-color-h3);
}
body .hex h1, body .hex p {
  background-color: var(--hex-bg-color);
}
body .hex h1::after {
  border-bottom-color: var(--hex-text);
}
body .hex .hex-fill .hexLink {
  background-color: var(--hex-bg-color);
}
body .hexLink {
  background-color: var(--hex-bg-color);
  color: var(--hex-text);
}
body .project-card {
  border-color: var(--projectcard-border-color);
  background-color: var(--projectcard-bg-color);
}
body .project-card:hover {
  background-color: var(--projectcard-bg-hover);
}
body .project-card:hover .project-card-image {
  border-color: var(--projectcard-bg-hover);
}
body .project-card .project-card-title {
  color: var(--projectcard-title-color);
}
body .project-card .project-card-excerpt {
  color: var(--projectcard-text-color);
}
body .project-card .project-card-image {
  border-color: var(--projectcard-bg-color);
}
body pre > code, body code.hljs {
  background-color: var(--code-bg-color);
}
body code {
  background-color: var(--inline-code-bg-color);
  border-color: var(--code-border-color);
}
body hr {
  background-color: var(--hr-color);
}
body footer .center-image {
  background-color: var(--header-bg-color);
}
body footer .center-image:hover path {
  fill: white;
}
body footer .center-image path {
  fill: var(--nav-sec-link-color);
}
body .copyright {
  color: var(--skew-barely-text-color);
}
body .copyright a {
  color: var(--skew-barely-text-color);
}

.post-tag {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 4px;
  padding: 3px 6px 1px 5px;
}

.post-button {
  padding: 6px 10px 5px;
  border-radius: 6px;
}
.post-button:hover {
  cursor: pointer;
}

.post-inline {
  margin-bottom: 5em;
}

.post-teaser-card {
  -webkit-flex: 1 1 300px;
          flex: 1 1 300px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  border-radius: 15px;
  margin-bottom: 5em;
  box-shadow: 0 0 20px rgba(8, 6, 3, 0.2);
}
.post-teaser-card:hover {
  transition: all 0.2s ease;
  -webkit-transform: translate3D(0, -1px, 0) scale(1.01);
          transform: translate3D(0, -1px, 0) scale(1.01);
  box-shadow: 0 0 40px rgba(8, 6, 3, 0.2);
}

.post-card-image-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}

.post-card-image {
  width: auto;
  height: 200px;
  background: var(--lightgrey) no-repeat center center;
  background-size: cover;
}

.post-card-content-link {
  position: relative;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  display: block;
  padding: 25px;
}

.post-card-content-link:hover {
  text-decoration: none;
}

.post-card-tags {
  display: block;
  margin-bottom: 4px;
  color: var(--midgrey);
  font-size: 1.2rem;
  line-height: 1.15em;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.post-card-time {
  font-size: 0.75em;
  margin-top: -12px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
  font-family: "Freight Sans", "Proxima Nova", proxima-nova, sans-serif;
}

.post-card-title {
  margin-top: 0;
  margin-bottom: 20px;
}

.post-card-content {
  -webkit-flex-grow: 1;
          flex-grow: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}

.post-card-meta {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  padding: 0 25px 25px;
}

.author-profile-image,
.avatar-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  background-color: color(var(--lightgrey) l(10%));
  border-radius: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.post-card-meta .profile-image-wrapper,
.post-card-meta .avatar-wrapper {
  position: relative;
}

@font-face {
  font-family: "lg";
  src: url("/assets/fonts/lg.eot?n1z373");
  src: url("/assets/fonts/lg.eot?#iefixn1z373") format("embedded-opentype"), url("/assets/fonts/lg.woff?n1z373") format("woff"), url("/assets/fonts/lg.ttf?n1z373") format("truetype"), url("/assets/fonts/lg.svg?n1z373#lg") format("svg");
  font-weight: normal;
  font-style: normal;
}
.lg-icon {
  font-family: "lg";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lg-actions .lg-next, .lg-actions .lg-prev {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  color: #999;
  cursor: pointer;
  display: block;
  font-size: 22px;
  margin-top: -10px;
  padding: 8px 10px 9px;
  position: absolute;
  top: 50%;
  z-index: 1080;
}
.lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
  color: #FFF;
}
.lg-actions .lg-next {
  right: 20px;
}
.lg-actions .lg-next:before {
  content: "";
}
.lg-actions .lg-prev {
  left: 20px;
}
.lg-actions .lg-prev:after {
  content: "";
}

@-webkit-keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
.lg-outer.lg-right-end .lg-object {
  -webkit-animation: lg-right-end 0.3s;
  animation: lg-right-end 0.3s;
  position: relative;
}
.lg-outer.lg-left-end .lg-object {
  -webkit-animation: lg-left-end 0.3s;
  animation: lg-left-end 0.3s;
  position: relative;
}

.lg-toolbar {
  z-index: 1082;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}
.lg-toolbar .lg-icon {
  color: #999;
  cursor: pointer;
  float: right;
  font-size: 24px;
  height: 47px;
  line-height: 27px;
  padding: 10px 0;
  text-align: center;
  width: 50px;
  text-decoration: none !important;
  outline: medium none;
  transition: color 0.2s linear;
}
.lg-toolbar .lg-icon:hover {
  color: #FFF;
}
.lg-toolbar .lg-close:after {
  content: "";
}
.lg-toolbar .lg-download:after {
  content: "";
}

.lg-sub-html {
  background-color: rgba(0, 0, 0, 0.45);
  bottom: 0;
  color: #EEE;
  font-size: 16px;
  left: 0;
  padding: 10px 40px;
  position: fixed;
  right: 0;
  text-align: center;
  z-index: 1080;
}
.lg-sub-html h4 {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
}
.lg-sub-html p {
  font-size: 12px;
  margin: 5px 0 0;
}

#lg-counter {
  color: #999;
  display: inline-block;
  font-size: 16px;
  padding-left: 20px;
  padding-top: 12px;
  vertical-align: middle;
}

.lg-toolbar, .lg-prev, .lg-next {
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear, -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
  transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear, -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s;
}

.lg-hide-items .lg-prev {
  opacity: 0;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
}
.lg-hide-items .lg-next {
  opacity: 0;
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
}
.lg-hide-items .lg-toolbar {
  opacity: 0;
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object {
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0, 0, 0.25, 1), -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s !important;
  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1), -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s !important;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

.lg-outer .lg-thumb-outer {
  background-color: #0D0A0A;
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 1080;
  max-height: 350px;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}
.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
  transition-duration: 0s !important;
}
.lg-outer.lg-thumb-open .lg-thumb-outer {
  -webkit-transform: translate3d(0, 0%, 0);
  transform: translate3d(0, 0%, 0);
}
.lg-outer .lg-thumb {
  padding: 10px 0;
  height: 100%;
  margin-bottom: -5px;
}
.lg-outer .lg-thumb-item {
  border-radius: 5px;
  cursor: pointer;
  float: left;
  overflow: hidden;
  height: 100%;
  border: 2px solid #FFF;
  border-radius: 4px;
  margin-bottom: 5px;
}
@media (min-width: 1025px) {
  .lg-outer .lg-thumb-item {
    transition: border-color 0.25s ease;
  }
}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  border-color: #a90707;
}
.lg-outer .lg-thumb-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.lg-outer.lg-has-thumb .lg-item {
  padding-bottom: 120px;
}
.lg-outer.lg-can-toggle .lg-item {
  padding-bottom: 0;
}
.lg-outer.lg-pull-caption-up .lg-sub-html {
  transition: bottom 0.25s ease;
}
.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
  bottom: 100px;
}
.lg-outer .lg-toggle-thumb {
  background-color: #0D0A0A;
  border-radius: 2px 2px 0 0;
  color: #999;
  cursor: pointer;
  font-size: 24px;
  height: 39px;
  line-height: 27px;
  padding: 5px 0;
  position: absolute;
  right: 20px;
  text-align: center;
  top: -39px;
  width: 50px;
}
.lg-outer .lg-toggle-thumb:after {
  content: "";
}
.lg-outer .lg-toggle-thumb:hover {
  color: #FFF;
}

.lg-outer .lg-video-cont {
  display: inline-block;
  vertical-align: middle;
  max-width: 1140px;
  max-height: 100%;
  width: 100%;
  padding: 0 5px;
}
.lg-outer .lg-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}
.lg-outer .lg-video .lg-object {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.lg-outer .lg-video .lg-video-play {
  width: 84px;
  height: 59px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -42px;
  margin-top: -30px;
  z-index: 1080;
  cursor: pointer;
}
.lg-outer .lg-has-vimeo .lg-video-play {
  background: url("/assets/img/vimeo-play.png") no-repeat scroll 0 0 transparent;
}
.lg-outer .lg-has-vimeo:hover .lg-video-play {
  background: url("/assets/img/vimeo-play.png") no-repeat scroll 0 -58px transparent;
}
.lg-outer .lg-has-html5 .lg-video-play {
  background: transparent url("/assets/img/video-play.png") no-repeat scroll 0 0;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  width: 64px;
  opacity: 0.8;
}
.lg-outer .lg-has-html5:hover .lg-video-play {
  opacity: 1;
}
.lg-outer .lg-has-youtube .lg-video-play {
  background: url("/assets/img/youtube-play.png") no-repeat scroll 0 0 transparent;
}
.lg-outer .lg-has-youtube:hover .lg-video-play {
  background: url("/assets/img/youtube-play.png") no-repeat scroll 0 -60px transparent;
}
.lg-outer .lg-video-object {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}
.lg-outer .lg-has-video .lg-video-object {
  visibility: hidden;
}
.lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play {
  display: none;
}
.lg-outer .lg-has-video.lg-video-playing .lg-video-object {
  visibility: visible;
}

.lg-progress-bar {
  background-color: #333;
  height: 5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1083;
  opacity: 0;
  transition: opacity 0.08s ease 0s;
}
.lg-progress-bar .lg-progress {
  background-color: #a90707;
  height: 5px;
  width: 0;
}
.lg-progress-bar.lg-start .lg-progress {
  width: 100%;
}
.lg-show-autoplay .lg-progress-bar {
  opacity: 1;
}

.lg-autoplay-button:after {
  content: "";
}
.lg-show-autoplay .lg-autoplay-button:after {
  content: "";
}

.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
  transition-duration: 0s;
}
.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  transition: -webkit-transform 0.1s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.1s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.1s cubic-bezier(0, 0, 0.25, 1) 0s, -webkit-transform 0.1s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  transition: left 0.1s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.1s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  transition: opacity 0.15s, -webkit-transform 0.1s cubic-bezier(0, 0, 0.25, 1) 0s !important;
  transition: transform 0.1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  transition: transform 0.1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s, -webkit-transform 0.1s cubic-bezier(0, 0, 0.25, 1) 0s !important;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#lg-zoom-in:after {
  content: "";
}

#lg-actual-size {
  font-size: 20px;
}
#lg-actual-size:after {
  content: "";
}

#lg-zoom-out {
  opacity: 0.5;
  pointer-events: none;
}
#lg-zoom-out:after {
  content: "";
}
.lg-zoomed #lg-zoom-out {
  opacity: 1;
  pointer-events: auto;
}

.lg-outer .lg-pager-outer {
  bottom: 60px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 1080;
  height: 10px;
}
.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
  overflow: visible;
}
.lg-outer .lg-pager-cont {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  margin: 0 5px;
}
.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
  box-shadow: 0 0 0 2px white inset;
}
.lg-outer .lg-pager-thumb-cont {
  background-color: #fff;
  color: #FFF;
  bottom: 100%;
  height: 83px;
  left: 0;
  margin-bottom: 20px;
  margin-left: -60px;
  opacity: 0;
  padding: 5px;
  position: absolute;
  width: 120px;
  border-radius: 3px;
  transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
}
.lg-outer .lg-pager-thumb-cont img {
  width: 100%;
  height: 100%;
}
.lg-outer .lg-pager {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
  display: block;
  height: 12px;
  transition: box-shadow 0.3s ease 0s;
  width: 12px;
}
.lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus {
  box-shadow: 0 0 0 8px white inset;
}
.lg-outer .lg-caret {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px dashed;
  bottom: -10px;
  display: inline-block;
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  vertical-align: middle;
  width: 0;
}

.lg-fullscreen:after {
  content: "";
}
.lg-fullscreen-on .lg-fullscreen:after {
  content: "";
}

.lg-outer #lg-dropdown-overlay {
  background-color: rgba(0, 0, 0, 0.25);
  bottom: 0;
  cursor: default;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1081;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
}
.lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay {
  transition-delay: 0s;
  -webkit-transform: translate3d(0, 0px, 0);
  transform: translate3d(0, 0px, 0);
  opacity: 1;
  visibility: visible;
}
.lg-outer.lg-dropdown-active #lg-share {
  color: #FFF;
}
.lg-outer .lg-dropdown {
  background-color: #fff;
  border-radius: 2px;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  right: 0;
  text-align: left;
  top: 50px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
  transition: visibility 0s linear 0.5s, opacity 0.18s linear 0s, -webkit-transform 0.18s linear 0s;
  transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
  transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s, -webkit-transform 0.18s linear 0s;
}
.lg-outer .lg-dropdown:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  border: 8px solid transparent;
  border-bottom-color: #FFF;
  right: 16px;
  top: -16px;
}
.lg-outer .lg-dropdown > li:last-child {
  margin-bottom: 0px;
}
.lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon {
  color: #333;
}
.lg-outer .lg-dropdown a {
  color: #333;
  display: block;
  white-space: pre;
  padding: 4px 12px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.lg-outer .lg-dropdown a:hover {
  background-color: rgba(0, 0, 0, 0.07);
}
.lg-outer .lg-dropdown .lg-dropdown-text {
  display: inline-block;
  line-height: 1;
  margin-top: -3px;
  vertical-align: middle;
}
.lg-outer .lg-dropdown .lg-icon {
  color: #333;
  display: inline-block;
  float: none;
  font-size: 20px;
  height: auto;
  line-height: 1;
  margin-right: 8px;
  padding: 0;
  vertical-align: middle;
  width: auto;
}
.lg-outer #lg-share {
  position: relative;
}
.lg-outer #lg-share:after {
  content: "";
}
.lg-outer #lg-share-facebook .lg-icon {
  color: #3b5998;
}
.lg-outer #lg-share-facebook .lg-icon:after {
  content: "";
}
.lg-outer #lg-share-twitter .lg-icon {
  color: #00aced;
}
.lg-outer #lg-share-twitter .lg-icon:after {
  content: "";
}
.lg-outer #lg-share-googleplus .lg-icon {
  color: #dd4b39;
}
.lg-outer #lg-share-googleplus .lg-icon:after {
  content: "";
}
.lg-outer #lg-share-pinterest .lg-icon {
  color: #cb2027;
}
.lg-outer #lg-share-pinterest .lg-icon:after {
  content: "";
}

.group {
  *zoom: 1;
}

.group:before, .group:after {
  display: table;
  content: "";
  line-height: 0;
}

.group:after {
  clear: both;
}

.lg-outer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.15s ease 0s;
}
.lg-outer * {
  box-sizing: border-box;
}
.lg-outer.lg-visible {
  opacity: 1;
}
.lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current {
  transition-duration: inherit !important;
  transition-timing-function: inherit !important;
}
.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
  transition-duration: 0s !important;
  opacity: 1;
}
.lg-outer.lg-grab img.lg-object {
  cursor: -webkit-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}
.lg-outer.lg-grabbing img.lg-object {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}
.lg-outer .lg {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
}
.lg-outer .lg-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.lg-outer .lg-item {
  background: url("/assets/img/loading.gif") no-repeat scroll center center transparent;
  display: none !important;
}
.lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide {
  display: inline-block !important;
}
.lg-outer.lg-css .lg-current {
  display: inline-block !important;
}
.lg-outer .lg-item, .lg-outer .lg-img-wrap {
  display: inline-block;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
}
.lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}
.lg-outer .lg-img-wrap {
  position: absolute;
  padding: 0 5px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.lg-outer .lg-item.lg-complete {
  background-image: none;
}
.lg-outer .lg-item.lg-current {
  z-index: 1060;
}
.lg-outer .lg-image {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
}
.lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play {
  opacity: 0;
  transition: opacity 0.15s ease 0s;
}
.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play {
  opacity: 1;
}
.lg-outer .lg-empty-html {
  display: none;
}
.lg-outer.lg-hide-download #lg-download {
  display: none;
}

.lg-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.15s ease 0s;
}
.lg-backdrop.in {
  opacity: 1;
}

.lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current {
  transition: none 0s ease 0s !important;
}
.lg-css3.lg-use-css3 .lg-item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lg-css3.lg-use-left .lg-item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lg-css3.lg-fade .lg-item {
  opacity: 0;
}
.lg-css3.lg-fade .lg-item.lg-current {
  opacity: 1;
}
.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
  transition: opacity 0.1s ease 0s;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item {
  opacity: 0;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  transition: opacity 0.1s ease 0s, -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s, -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-css3.lg-slide.lg-use-left .lg-item {
  opacity: 0;
  position: absolute;
  left: 0;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide {
  left: -100%;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide {
  left: 100%;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
  left: 0;
  opacity: 1;
}
.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
  transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}

/*
{{! Highlight.js for code highlighting }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/tomorrow-night-eighties.min.css">
*/
.hljs-comment,
.hljs-quote {
  color: #999999;
}

.hljs-deletion,
.hljs-name,
.hljs-regexp,
.hljs-selector-class,
.hljs-selector-id,
.hljs-tag,
.hljs-template-variable,
.hljs-variable {
  color: #f2777a;
}

.hljs-built_in,
.hljs-builtin-name,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-type {
  color: #f99157;
}

.hljs-attribute {
  color: #ffcc66;
}

.hljs-addition,
.hljs-bullet,
.hljs-string,
.hljs-symbol {
  color: #99cc99;
}

.hljs-section,
.hljs-title {
  color: #6699cc;
}

.hljs-keyword,
.hljs-selector-tag {
  color: #cc99cc;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #2d2d2d;
  color: #cccccc;
  padding: 0.5em;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}