/* This file is for your main application css. */

/* ==========================================================================
   Table of Contents
   ========================================================================== */

/*

    0.  Normalize
    1.  Icons
    2.  General
    3.  Utilities
    4.  General
    5.  Single Post
    6.  Tag Archive
    7.  Read Next
    8.  Third Party Elements
    9.  Pagination
    10.  Footer
    11. Media Queries (Tablet)
    12. Media Queries (Mobile)
    13. Animations

*/

/* ==========================================================================
   0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified)
   ========================================================================== */

article, aside, details,
figcaption, figure,
footer, header, hgroup,
main, nav, section,
summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
a { background: transparent; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: 700; }
dfn { font-style: italic; }
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
mark { background: #FF0; color: #000; }
code, kbd, pre,
samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend { border: 0; padding: 0; }
button, input, select,
textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"],
input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }


/* ==========================================================================
   1. Icons - Sets up the icon font and respective classes
   ========================================================================== */

/* Import the font file with the icons in it */
@font-face {
    font-family: "casper-icons";
    src:url(/fonts/f1b61a941a948727750a0ee3fd44f733-f1b61a941a948727750a0ee3fd44f733.eot?vsn=d);
    src:url(/fonts/f1b61a941a948727750a0ee3fd44f733.eot#iefix) format("embedded-opentype"),
    url(/fonts/54ded7e167f750384d5aac1f8408d8de-54ded7e167f750384d5aac1f8408d8de.woff?vsn=d) format("woff"),
    url(/fonts/5f60df32157c5120658907ef24dff0bc-5f60df32157c5120658907ef24dff0bc.ttf?vsn=d) format("truetype"),
    url(/fonts/e92d155cdb9bf0ece9e56b10708f7e1d.svg#icons) format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Apply these base styles to all icons */
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "casper-icons", "Open Sans", sans-serif;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    text-decoration: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Each icon is created by inserting the correct character into the
   content of the :before pseudo element. Like a boss. */
.icon-ghost:before {
    content: "\F600";
}
.icon-feed:before {
    content: "\F601";
}
.icon-twitter:before {
    content: "\F602";
    font-size: 1.1em;
}
.icon-google-plus:before {
    content: "\F603";
}
.icon-facebook:before {
    content: "\F604";
}
.icon-arrow-left:before {
    content: "\F605";
}
.icon-stats:before {
    content: "\F606";
}
.icon-location:before {
    content: "\F607";
    margin-left: -3px; /* Tracking fix */
}
.icon-link:before {
    content: "\F608";
}
.icon-menu:before {
    content: "\F609";
}
/*
    IMPORTANT: When making any changes to the icon font, be sure to increment
    the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2`
    This forces browsers to download the new font file.
*/


/* ==========================================================================
   2. General - Setting up some base styles
   ========================================================================== */

html {
    height: 100%;
    max-height: 100%;
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    height: 100%;
    max-height: 100%;
    font-family: "Merriweather", serif;
    letter-spacing: 0.01rem;
    font-size: 1.8rem;
    line-height: 1.75em;
    color: #3A4145;
    -webkit-font-feature-settings: 'kern' 1;
    -moz-font-feature-settings: 'kern' 1;
    -o-font-feature-settings: 'kern' 1;
    text-rendering: geometricPrecision;
}

::-moz-selection {
    background: #D6EDFF;
}

::selection {
    background: #D6EDFF;
}

h1, h2, h3,
h4, h5, h6 {
    -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
    -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
    -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
    color: #2E2E2E;
    line-height: 1.15em;
    margin: 0 0 0.4em 0;
    font-family: "Open Sans", sans-serif;
    text-rendering: geometricPrecision;
}

h1 {
    font-size: 5rem;
    letter-spacing: -2px;
    text-indent: -3px;
}

h2 {
    font-size: 3.6rem;
    letter-spacing: -1px;
}

h3 {
    font-size: 3rem;
}

h4 {
    font-size: 2.5rem;
}

h5 {
    font-size: 2rem;
}

h6 {
    font-size: 2rem;
}

a {
    color: #4A4A4A;
    transition: color 0.3s ease;
}

a:hover {
    color: #111;
}

p, ul, ol, dl {
    -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    margin: 0 0 1.75em 0;
    text-rendering: geometricPrecision;
}

ol, ul {
    padding-left: 3rem;
}

ol ol, ul ul,
ul ol, ol ul {
    margin: 0 0 0.4em 0;
    padding-left: 2em;
}

dl dt {
    float: left;
    width: 180px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    margin-bottom: 1em;
}

dl dd {
    margin-left: 200px;
    margin-bottom: 1em
}

li {
    margin: 0.4em 0;
}

li li {
    margin: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: #EFEFEF 1px solid;
    margin: 3.2em 0;
    padding: 0;
}

blockquote {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.75em 0 1.75em -2.2em;
    padding: 0 0 0 1.75em;
    border-left: #4A4A4A 0.4em solid;
    margin-left: 0;
}

blockquote p {
    margin: 0.8em 0;
    font-style: italic;
}

blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
    font-size: 0.9em;
    color: #CCC;
}

blockquote small:before { content: "\2014   \A0"; }

blockquote cite {
    font-weight: 700;
}

blockquote cite a { font-weight: normal; }

mark {
    background-color: #fdffb6;
}

code, tt {
    padding: 1px 3px;
    font-family: Inconsolata, monospace, sans-serif;
    font-size: 0.85em;
    white-space: pre-wrap;
    border: #E3EDF3 1px solid;
    background: #F7FAFB;
    border-radius: 2px;
}

pre {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 1.75em 0;
    border: #E3EDF3 1px solid;
    width: 100%;
    padding: 10px;
    font-family: Inconsolata, monospace, sans-serif;
    font-size: 0.9em;
    white-space: pre;
    overflow: auto;
    background: #F7FAFB;
    border-radius: 3px;
}

pre code, pre tt {
    font-size: 16px;
    white-space: pre-wrap;
    background: transparent;
    border: none;
    padding: 0;
}

kbd {
    display: inline-block;
    margin-bottom: 0.4em;
    padding: 1px 8px;
    border: #CCC 1px solid;
    color: #666;
    text-shadow: #FFF 0 1px 0;
    font-size: 0.9em;
    font-weight: 700;
    background: #F4F4F4;
    border-radius: 4px;
    box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.2),
    0 1px 0 0 #fff inset;
}

table {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.75em 0;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
}

table th,
table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: #EFEFEF 1px solid;
}

table th { color: #000; }

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
    border-top: 0;
}

table tbody + tbody { border-top: #EFEFEF 2px solid; }

table table table { background-color: #FFF; }

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: #F6F6F6;
}

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
    background: transparent;
}

iframe, .fluid-width-video-wrapper {
    display: block;
    margin: 1.75em 0;
}

/* When a video is inside the fitvids wrapper, drop the
margin on the iframe, cause it breaks stuff. */
.fluid-width-video-wrapper iframe {
    margin: 0;
}


/* ==========================================================================
   3. Utilities - These things get used a lot
   ========================================================================== */

/* Clears shit */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Hides shit */
.hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}

/* Creates a responsive wrapper that makes our content scale nicely */
.inner {
    position: relative;
    width: 80%;
    max-width: 710px;
    margin: 0 auto;
}

/* Centres vertically yo. (IE8+) */
.vertical {
    display: table-cell;
    vertical-align: middle;
}

/* Wraps the main content & footer */
.site-wrapper {
    position: relative;
    z-index: 10;
    min-height: 100%;
    background: #fff;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
}

body.nav-opened .site-wrapper {
    overflow-x: hidden;
    -webkit-transform: translate3D(-240px, 0, 0);
    -ms-transform: translate3D(-240px, 0, 0);
    transform: translate3D(-240px, 0, 0);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}


/* ==========================================================================
   4. General - The main styles for the the theme
   ========================================================================== */

/* Big cover image on the home page */
.main-header {
    position: relative;
    display: table;
    width: 100%;
    height: 100vh;
    margin-bottom: 5rem;
    text-align: center;
    background: #222 no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.main-header .inner {
    width: 80%;
}

.main-nav {
    position: relative;
    padding: 35px 40px;
    margin: 0 0 30px 0;
}

.main-nav a {
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}

/* Navigation */
body.nav-opened .nav-cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 240px;
    bottom: 0;
    z-index: 200;
}

.nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 240px;
    opacity: 0;
    background: #111;
    margin-bottom: 0;
    text-align: left;
    overflow-y: auto;
    -webkit-transition: -webkit-transform 0.5s ease,
    opacity 0.3s ease 0.7s;
    transition: transform 0.5s ease,
    opacity 0.3s ease 0.7s;
}

body.nav-closed .nav {
    -webkit-transform: translate3D(97px, 0, 0);
    -ms-transform: translate3D(97px, 0, 0);
    transform: translate3D(97px, 0, 0);
}

body.nav-opened .nav {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s ease,
    opacity 0s ease 0s;
    transition: transform 0.3s ease,
    opacity 0s ease 0s;
    -webkit-transform: translate3D(0, 0, 0);
    -ms-transform: translate3D(0, 0, 0);
    transform: translate3D(0, 0, 0);
}

.nav-title {
    position: absolute;
    top: 45px;
    left: 30px;
    font-size: 16px;
    font-weight: 100;
    text-transform: uppercase;
    color: #fff;
}

.nav-close {
    position: absolute;
    top: 38px;
    right: 25px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
}

.nav-close:focus {
    outline: 0;
}

.nav-close:before,
.nav-close:after {
    content: '';
    position: absolute;
    top: 0;
    width: 20px;
    height: 1px;
    background: rgb(150,150,150);
    top: 15px;
    -webkit-transition: background 0.15s ease;
    transition: background 0.15s ease;
}

.nav-close:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-close:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.nav-close:hover:before,
.nav-close:hover:after {
    background: rgb(255,255,255);
}

.nav ul {
    padding: 90px 9% 5%;
    list-style: none;
    counter-reset: item;
}

.nav li:before {
    display: block;
    float: right;
    padding-right: 4%;
    padding-left: 5px;
    text-align: right;
    font-size: 1.2rem;
    vertical-align: bottom;
    color: #B8B8B8;
    content: counter(item, lower-roman);
    counter-increment: item;
}
.nav li {
    margin: 0;
}
.nav li a {
    text-decoration: none;
    line-height: 1.4;
    font-size: 1.4rem;
    display: block;
    padding: 0.6rem 4%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.nav li a:after {
    display: inline-block;
    content: " .......................................................";
    color: rgba(255,255,255,0.2);
    margin-left: 5px;
}
.nav .nav-current:before {
    color: #fff;
}
.nav .nav-current a:after {
    content: " ";
    border-bottom: rgba(255,255,255,0.5) 1px solid;
    width: 100%;
    height: 1px;
}

.nav a:link,
.nav a:visited {
    color: #B8B8B8;
}

.nav li.nav-current a,
.nav a:hover,
.nav a:active,
.nav a:focus {
    color: #fff;
}

.subscribe-button {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    height: 38px;
    padding: 0 20px;
    color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */
    text-align: center;
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 35px;
    border-radius: 3px;
    background: #fff;
    transition: all ease 0.3s;
}
.subscribe-button:before {
    font-size: 9px;
    margin-right: 6px;
}


/* Create a bouncing scroll-down arrow on homepage with cover image */
.scroll-down {
    display: block;
    position: absolute;
    z-index: 100;
    bottom: 45px;
    left: 50%;
    margin-left: -16px;
    width: 34px;
    height: 34px;
    font-size: 34px;
    text-align: center;
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-animation: bounce 4s 2s infinite;
    animation: bounce 4s 2s infinite;
}

/* Stop it bouncing and increase contrast when hovered */
.scroll-down:hover {
    color: #fff;
    -webkit-animation: none;
    animation: none;
}

/* Put a semi-opaque radial gradient behind the icon to make it more visible
   on photos which happen to have a light background. */
.home-template .main-header:after {
    display: block;
    content: " ";
    width: 150px;
    height: 130px;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
}

/* Hide when there's no cover image or on page2+ */
.no-cover .scroll-down,
.no-cover.main-header:after,
.archive-template .scroll-down,
.archive-template .main-header:after {
    display: none
}

/* Appears in the top left corner of your home page */
.blog-logo {
    display: block;
    float: left;
    background: none !important; /* Makes sure there is never a background */
    border: none !important; /* Makes sure there is never a border */
}

.blog-logo img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    height: 75px;
    padding: 1px 0 5px 0;
    width: auto;
}

.menu-button {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    float: right;
    height: 38px;
    padding: 0 15px;
    border-style: solid;
    border-width: 1px;
    opacity: 1;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 35px;
    white-space: nowrap;
    border-radius: 3px;
    transition: all 0.5s ease;
}
.menu-button:before {
    font-size: 12px;
    font-weight: bold;
    margin-right: 6px;
    position: relative;
    top: 1px;
}
.menu-button:hover {
    background: #fff;
}
.menu-button:focus {
    outline: 0;
}

/* When the navigation is closed */
.nav-closed .menu-button {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}
.nav-closed .menu-button:hover {
    color: #222;
}

/* When the navigation is closed and there is no cover image */
.nav-closed .no-cover .menu-button {
    border-color: #BFC8CD;
    color: #9EABB3;
}
.nav-closed .no-cover .menu-button:hover {
    border-color: #555;
    color: #555;
}

/* When the navigation is opened */
.nav-opened .menu-button {
    padding: 0 12px;
    background: #111;
    border-color: #111;
    color: #fff;
    -webkit-transform: translate3D(94px, 0, 0);
    -ms-transform: translate3D(94px, 0, 0);
    transform: translate3D(94px, 0, 0);
    transition: all 0.3s ease;
}

.nav-opened .menu-button .word {
    opacity: 0;
    transition: all 0.3s ease;
}

/* Special styles when overlaid on an image*/
.main-nav.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    border: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
}
.no-cover .main-nav.overlay {
    background: none;
}

/* The details of your blog. Defined in ghost/settings/ */
.page-title {
    margin: 10px 0 10px 0;
    font-size: 5rem;
    letter-spacing: -1px;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    color: #fff;
}

.page-description {
    margin: 0;
    font-size: 2rem;
    line-height: 1.5em;
    font-weight: 400;
    font-family: "Merriweather", serif;
    letter-spacing: 0.01rem;
    color: rgba(255,255,255,0.8);
}

.no-cover.main-header {
    min-height: 160px;
    max-height: 30vh;
    background: #f5f8fa;
}

.no-cover .page-title {
    color: rgba(0,0,0,0.8);
}

.no-cover .page-description {
    color: rgba(0,0,0,0.5);
}

/* Every post, on every page, gets this style on its <article> tag */
.post {
    position: relative;
    width: 80%;
    max-width: 980px;
    margin: 4rem auto;
    padding-bottom: 4rem;
    word-wrap: break-word;
}

body:not(.post-template) .post-title {
    font-size: 3.6rem;
}

.post-title a {
    text-decoration: none;
}

.post-excerpt p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.7em;
}

.read-more {
    text-decoration: none;
}

.post-meta {
    display: block;
    margin: 1.75rem 0 0 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1.5rem;
    line-height: 2.2rem;
    color: #9EABB3;
}

.author-thumb {
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 9px;
    border-radius: 100%;
}

.post-meta a {
    color: #9EABB3;
    text-decoration: none;
}

.post-meta a:hover {
    text-decoration: underline;
}

.user-meta {
    position: relative;
    padding: 0.3rem 40px 0 100px;
    min-height: 77px;
}

.post-date {
    display: inline-block;
    margin-left: 8px;
    padding-left: 12px;
    border-left: #d5dbde 1px solid;
    text-transform: uppercase;
    font-size: 1.3rem;
    white-space: nowrap;
}

.user-image {
    position: absolute;
    top: 0;
    left: 0;
}

.user-name {
    display: block;
    font-weight: 700;
}

.user-bio {
    display: block;
    max-width: 440px;
    font-size: 1.4rem;
    line-height: 1.5em;
}

.publish-meta {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4.3rem 0 4rem 0;
    text-align: right;
}

.publish-heading {
    display: block;
    font-weight: 700;
}

.publish-date {
    display: block;
    font-size: 1.4rem;
    line-height: 1.5em;
}


/* ==========================================================================
   5. Single Post - When you click on an individual post
   ========================================================================== */

.post-header {
    margin-bottom: 3.4rem;
}

.post-title {
    margin-bottom: 0;
}

.post-meta {
    margin: 0;
}

.post-date {
    padding: 0;
    margin: 0;
    border: none;
}

/* Stop elements, such as img wider than the post content, from
   creating horizontal scroll - slight hack due to imperfections
   with browser width % calculations and rounding */
.post-template .content {
    overflow: hidden;
}

/* Tweak the .post wrapper style */
.post-template .post {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Kill that stylish little circle that was on the border, too */
.post-template .post:after {
    display: none;
}

/* Keep images centered, and allow images wider than the main
   text column to break out. */
.post-content img {
    display: block;
    max-width: 126%;
    height: auto;
    padding: 0.6em 0;
    /* Centers an image by (1) pushing its left edge to the
       center of its container and (2) shifting the entire image
       in the opposite direction by half its own width.
       Works for images that are larger than their containers. */
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%); /* for Safari and iOS */
    -ms-transform: translateX(-50%); /* for IE9 */
    transform: translateX(-50%);
}

.footnotes {
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.6em;
}

.footnotes li {
    margin: 0.6rem 0;
}

.footnotes p {
    margin: 0;
}

.footnotes p a:last-child {
    text-decoration: none;
}


/* The author credit area after the post */
.post-footer {
    position: relative;
    margin: 6rem 0 0 0;
    padding: 6rem 0 0 0;
    border-top: #EBF2F6 1px solid;
}

.post-footer h4 {
    font-size: 1.8rem;
    margin: 0;
}

.post-footer p {
    margin: 1rem 0;
    font-size: 1.4rem;
    line-height: 1.75em;
}

/* list of author links - location / url */
.author-meta {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 1.4rem;
    line-height: 1;
    font-style: italic;
    color: #9EABB3;
}

.author-meta a {
    color: #9EABB3;
}
.author-meta a:hover {
    color: #111;
}

/* Create some space to the right for the share links */
.post-footer .author {
    margin-right: 180px;
}

.post-footer h4 a {
    color: #2e2e2e;
    text-decoration: none;
}

.post-footer h4 a:hover {
    text-decoration: underline;
}

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
    position: absolute;
    top: 6rem;
    right: 0;
    width: 140px;
}

.post-footer .share a {
    font-size: 1.8rem;
    display: inline-block;
    margin: 1rem 1.6rem 1.6rem 0;
    color: #BBC7CC;
    text-decoration: none;
}

.post-footer .share .icon-twitter:hover {
    color: #55acee;
}
.post-footer .share .icon-facebook:hover {
    color: #3b5998;
}
.post-footer .share .icon-google-plus:hover {
    color: #dd4b39;
}


/* ==========================================================================
   6. Author profile
   ========================================================================== */

.post-head.main-header {
    height: 65vh;
    min-height: 180px;
}

.no-cover.post-head.main-header {
    height: 85px;
    min-height: 0;
    margin-bottom: 0;
    background: transparent;
}

.tag-head.main-header {
    height: 40vh;
    min-height: 180px;
}

.author-head.main-header {
    height: 40vh;
    min-height: 180px;
}

.no-cover.author-head.main-header {
    height: 10vh;
    min-height: 100px;
    background: transparent;
}

.author-profile {
    padding: 0 15px 5rem 15px;
    border-bottom: #EBF2F6 1px solid;
    text-align: center;
}

/* Add a little circle in the middle of the border-bottom */
.author-profile:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 5px;
}

.author-image {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    overflow: hidden;
    padding: 6px;
    background: #fff;
    z-index: 2;
    box-shadow: #E7EEF2 0 0 0 1px;
}

.author-image .img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 100%;
}

.author-profile .author-image {
    position: relative;
    left: auto;
    top: auto;
    width: 120px;
    height: 120px;
    padding: 3px;
    margin: -100px auto 0 auto;
    box-shadow: none;
}

.author-title {
    margin: 1.5rem 0 1rem;
}

.author-bio {
    font-size: 1.8rem;
    line-height: 1.5em;
    font-weight: 200;
    color: #50585D;
    letter-spacing: 0;
    text-indent: 0;
}

.author-meta {
    margin: 1.6rem 0;
}
/* Location, website, and link */
.author-profile .author-meta {
    margin: 2rem 0;
    font-family: "Merriweather", serif;
    letter-spacing: 0.01rem;
    font-size: 1.7rem;
}
.author-meta span {
    display: inline-block;
    margin: 0 2rem 1rem 0;
    word-wrap: break-word;
}
.author-meta a {
    text-decoration: none;
}

/* Turn off meta for page2+ to make room for extra
   pagination prev/next links */
.archive-template .author-profile .author-meta {
    display: none;
}


/* ==========================================================================
   7. Read More - Next/Prev Post Links
   ========================================================================== */

.read-next {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-top: 10rem;
}

.read-next-story {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 50%;
    text-decoration: none;
    position: relative;
    text-align: center;
    color: #fff;
    background: #222 no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
.read-next-story:hover:before {
    background: rgba(0,0,0,0.8);
    transition: all 0.2s ease;
}
.read-next-story:hover .post:before {
    color: #222;
    background: #fff;
    transition: all 0.2s ease;
}

.read-next-story:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    transition: all 0.5s ease;
}

.read-next-story .post {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.read-next-story .post:before {
    content: "Read This Next";
    padding: 4px 10px 5px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-family: "Open Sans", sans-serif;
    color: rgba(255,255,255,0.8);
    border: rgba(255,255,255,0.5) 1px solid;
    border-radius: 4px;
    transition: all 0.5s ease;
}
.read-next-story.prev .post:before {
    content: "You Might Enjoy";
}

.read-next-story h2 {
    margin-top: 1rem;
    color: #fff;
}

.read-next-story p {
    margin: 0;
    color: rgba(255,255,255,0.8);
}

/* Special styles for posts with no cover images */
.read-next-story.no-cover {
    background: #f5f8fa;
}

.read-next-story.no-cover:before {
    display: none;
}

.read-next-story.no-cover .post:before {
    color: rgba(0,0,0,0.5);
    border-color: rgba(0,0,0,0.2);
}

.read-next-story.no-cover h2 {
    color: rgba(0,0,0,0.8);
}

.read-next-story.no-cover p {
    color: rgba(0,0,0,0.5);
}

/* if there are two posts without covers, put a border between them */
.read-next-story.no-cover + .read-next-story.no-cover {
    border-left: rgba(0,0,100,0.04) 1px solid;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Correctly position site-footer when next to the .read-next container */
.read-next + .site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
}

/* ==========================================================================
   8. Third Party Elements - Embeds from other services
   ========================================================================== */

/* Github */
.gist table {
    margin: 0;
    font-size: 1.4rem;
}
.gist td {
    line-height: 1.4;
}
.gist .line-number {
    min-width: 25px;
}

/* Pastebin */
.content .embedPastebin {
    margin-bottom: 1.75em;
}


/* ==========================================================================
   9. Pagination - Tools to let you flick between pages
   ========================================================================== */

/* The main wrapper for our pagination links */
.pagination {
    position: relative;
    width: 80%;
    max-width: 710px;
    margin: 4rem auto;
    font-family: "Open Sans", sans-serif;
    font-size: 1.3rem;
    color: #9EABB3;
    text-align: center;
}

.pagination a {
    color: #9EABB3;
    transition: all 0.2s ease;
}

/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
    position: absolute;
    display: inline-block;
    padding: 0 15px;
    border: #bfc8cd 1px solid;
    text-decoration: none;
    border-radius: 4px;
    transition: border 0.3s ease;
}

.older-posts {
    right: 0;
}

.page-number {
    display: inline-block;
    padding: 2px 0;
    min-width: 100px;
}

.newer-posts {
    left: 0;
}

.older-posts:hover,
.newer-posts:hover {
    color: #889093;
    border-color: #98a0a4;
}

.extra-pagination {
    border-bottom: #EBF2F6 1px solid;
}
.extra-pagination:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 5px;
}
.extra-pagination .pagination {
    width: auto;
}

/* On page2+ make all the headers smaller */
.archive-template .main-header {
    max-height: 30vh;
}

/* On page2+ show extra pagination controls at the top of post list */
.archive-template .extra-pagination {
    display: block;
}


/* ==========================================================================
   10. Footer - The bottom of every page
   ========================================================================== */

.site-footer {
    position: relative;
    margin: 8rem 0 0 0;
    padding: 1rem 15px;
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.75em;
    color: #BBC7CC;
}

.site-footer a {
    color: #BBC7CC;
    text-decoration: none;
    font-weight: bold;
}

.site-footer a:hover {
    border-bottom: #bbc7cc 1px solid;
}

.poweredby {
    display: block;
    width: 45%;
    float: right;
    text-align: right;
}

.copyright {
    display: block;
    width: 45%;
    float: left;
}


/* ==========================================================================
   11. Media Queries - Smaller than 900px
   ========================================================================== */

@media only screen and (max-width: 900px) {
   
    .main-header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: auto;
        min-height: 240px;
        height: 60vh;
        padding: 15% 0;
    }

    .scroll-down,
    .home-template .main-header:after { display: none; }

    .archive-template .main-header {
        min-height: 180px;
        padding: 10% 0;
    }

    .blog-logo img {
        padding: 4px 0;
    }

    .page-title {
        font-size: 4rem;
        letter-spacing: -1px;
    }

    .page-description {
        font-size: 1.8rem;
        line-height: 1.5em;
    }

    .post {
        font-size: 0.95em
    }

    body:not(.post-template) .post-title {
        font-size: 3.2rem;
    }

    hr {
        margin: 2.4em 0;
    }

    ol, ul {
        padding-left: 2em;
    }

    h1 {
        font-size: 4.5rem;
        text-indent: -2px;
    }

    h2 {
        font-size: 3.6rem;
    }

    h3 {
        font-size: 3.1rem;
    }

    h4 {
        font-size: 2.5rem;
    }

    h5 {
        font-size: 2.2rem;
    }

    h6 {
        font-size: 1.8rem;
    }

    .author-profile {
        padding-bottom: 4rem;
    }

    .author-profile .author-bio {
        font-size: 1.6rem;
    }

    .author-meta span {
        display: block;
        margin: 1.5rem 0;
    }
    .author-profile .author-meta span {
        font-size: 1.6rem;
    }

    .post-head.main-header {
        height:45vh;
    }

    .tag-head.main-header,
    .author-head.main-header {
        height: 30vh;
    }

    .no-cover.post-head.main-header {
        height: 55px;
        padding: 0;
    }

    .no-cover.author-head.main-header {
        padding: 0;
    }

    .read-next {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 4rem;
    }

    .read-next p {
        display: none;
    }

    .read-next-story.no-cover + .read-next-story.no-cover {
        border-top: rgba(0,0,100,0.06) 1px solid;
        border-left: none;
    }

}


/* ==========================================================================
   12. Media Queries - Smaller than 500px
   ========================================================================== */

@media only screen and (max-width: 500px) {

    .main-header {
        margin-bottom: 15px;
        height: 40vh;
    }

    .no-cover.main-header {
        height: 30vh;
    }

    .archive-template .main-header {
        max-height: 20vh;
        min-height: 160px;
        padding: 10% 0;
    }

    .main-nav {
        padding: 5px;
        margin-bottom: 2rem;
    }

    .blog-logo {
        padding: 5px;
    }

    .blog-logo img {
        height: 30px;
    }

    .menu-button {
        padding: 0 5px;
        border-radius: 0;
        border-width: 0;
        color: #2e2e2e;
        background: transparent;
    }
    .menu-button:hover {
        color: #2e2e2e;
        border-color: transparent;
        background: none;
    }
    body.nav-opened .menu-button {
        background: none;
        border: transparent;
    }

    .main-nav.overlay a:hover {
        color: #fff;
        border-color: transparent;
        background: transparent;
    }

    .no-cover .main-nav.overlay {
        background: none;
    }
    .no-cover .main-nav.overlay .menu-button {
        border: none;
    }

    .main-nav.overlay .menu-button {
        border-color: transparent;
    }

    .nav-title {
        top: 25px;

    }

    .nav-close {
        position: absolute;
        top: 18px;
    }

    .nav ul {
        padding: 60px 9% 5%;
    }

    .inner,
    .pagination {
        width: auto;
        margin: 2rem auto;
    }

    .post {
        width: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
        margin-left: 16px;
        margin-right: 16px;
        padding-bottom: 2rem;
        line-height: 1.65em;
    }

    .post-date {
        display: none;
    }

    .post-template .post-header {
        margin-bottom: 2rem;
    }

    .post-template .post-date {
        display: inline-block;
    }

    hr {
        margin: 1.75em 0;
    }

    p, ul, ol, dl {
        font-size: 0.95em;
        margin: 0 0 2.5rem 0;
    }

    .page-title {
        font-size: 3rem;
    }

    .post-excerpt p {
        font-size: 0.85em;
    }

    .page-description {
        font-size: 1.6rem;
    }

    h1, h2, h3,
    h4, h5, h6 {
        margin: 0 0 0.3em 0;
    }

    h1 {
        font-size: 2.8rem;
        letter-spacing: -1px;
    }

    h2 {
        font-size: 2.4rem;
        letter-spacing: 0;
    }

    h3 {
        font-size: 2.1rem;
    }

    h4 {
        font-size: 1.9rem;
    }

    h5 {
        font-size: 1.8rem;
    }

    h6 {
        font-size: 1.8rem;
    }

    body:not(.post-template) .post-title {
        font-size: 2.5rem;
    }

    .post-template .site-footer {
        margin-top: 0;
    }

    .post-content img {
        padding: 0;
        width: calc(100% + 32px); /* expand with to image + margins */
        min-width: 0;
        max-width: 112%; /* fallback when calc doesn't work */
    }

    .post-meta {
        font-size: 1.3rem;
        margin-top: 1rem;
    }

    .post-footer {
        padding: 5rem 0 3rem 0;
        text-align: center;
    }

    .post-footer .author {
        margin: 0 0 2rem 0;
        padding: 0 0 1.6rem 0;
        border-bottom: #EBF2F6 1px dashed;
    }

    .post-footer .share {
        position: static;
        width: auto;
    }

    .post-footer .share a {
        margin: 1.4rem 0.8rem 0 0.8rem;
    }

    .author-meta li {
        float: none;
        margin: 0;
        line-height: 1.75em;
    }

    .author-meta li:before {
        display: none;
    }

    .older-posts,
    .newer-posts {
        position: static;
        margin: 10px 0;
    }

    .page-number {
        display: block;
    }

    .site-footer {
        margin-top: 3rem;
    }

    .author-profile {
        padding-bottom: 2rem;
    }

    .post-head.main-header {
        height: 30vh;
    }

    .tag-head.main-header,
    .author-head.main-header {
        height: 20vh;
    }

    .author-profile .author-image {
        margin-top: -70px;
    }

    .author-profile .author-meta span {
        font-size: 1.4rem;
    }

    .archive-template .main-header .page-description {
        display: none;
    }

    .read-next {
        margin-top: 2rem;
        margin-bottom: -37px;
    }

    .read-next .post {
        width: 100%;
    }

}


/* ==========================================================================
   13. Animations
   ========================================================================== */

/* Used to fade in title/desc on the home page */
@-webkit-keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Used to bounce .scroll-down on home page */
@-webkit-keyframes bounce {
    0%, 10%, 25%, 40%, 50% {
        -webkit-transform: translateY(0) rotate(-90deg);
        transform: translateY(0) rotate(-90deg);
    }
    20% {
        -webkit-transform: translateY(-10px) rotate(-90deg);
        transform: translateY(-10px) rotate(-90deg);
    }
    30% {
        -webkit-transform: translateY(-5px) rotate(-90deg);
        transform: translateY(-5px) rotate(-90deg);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0) rotate(-90deg);
        transform: translateY(0) rotate(-90deg);
    }
    40% {
        -webkit-transform: translateY(-10px) rotate(-90deg);
        transform: translateY(-10px) rotate(-90deg);
    }
    60% {
        -webkit-transform: translateY(-5px) rotate(-90deg);
        transform: translateY(-5px) rotate(-90deg);
    }
}


/* ==========================================================================
   End of file. Animations should be the last thing here. Do not add stuff
   below this point, or it will probably fuck everything up.
   ========================================================================== */

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/* Patterns: Groups of Styles
/* ---------------------------------------------------------- */
/* Global styles
/* ---------------------------------------------------------- */
/* Variables
/* ---------------------------------------------------------- */
:root {
    /* Colours */
    /* Style values */
}
/* Colour classes
/* ---------------------------------------------------------- */
.darkgrey {
    color: #343f44;
}
.midgrey {
    color: #738a94;
}
.lightgrey {
    color: #e5eff5;
}
.blue {
    color: #3eb0ef;
}
.red {
    color: #f05230;
}
.orange {
    color: #fecd35;
}
.green {
    color: #a4d037;
}
/* Colour classes (hover)
/* ---------------------------------------------------------- */
.darkgrey-hover:hover {
    color: #343f44;
}
.midgrey-hover:hover {
    color: #738a94;
}
.lightgrey-hover:hover {
    color: #e5eff5;
}
.blue-hover:hover {
    color: #3eb0ef;
}
.red-hover:hover {
    color: #f05230;
}
.orange-hover:hover {
    color: #fecd35;
}
.green-hover:hover {
    color: #a4d037;
}

/* Layout
/* ---------------------------------------------------------- */
*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    overflow: hidden;
    width: 100%;
    /* Prevent elastic scrolling on the whole page */
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 62.5%;
    line-height: 1.65;
    letter-spacing: 0.2px;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    overflow: auto;
    overflow-x: hidden;
    width: 100%;
    /* Prevent elastic scrolling on the whole page */
    height: 100%;
    color: #343f44;
    font-size: 18px;
}

.gh-view {
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Text
/* ---------------------------------------------------------- */
h1 {
    margin: 0 0 0.3em 0;
    color: #343f44;
    line-height: 1.15em;
    text-rendering: geometricPrecision;
    text-indent: -1px;
    font-size: 2.9rem;
}

h2 {
    margin: 0 0 0.3em 0;
    color: #343f44;
    line-height: 1.15em;
    text-rendering: optimizeLegibility;
    text-indent: -1px;
    font-size: 2.9rem;
}

@media (max-width: 500px) {
    h1 {
        font-size: 2.4rem;
    }
}
/* Inputs
/* ---------------------------------------------------------- */
.gh-input {
    display: block;
    padding: 10px 12px;
    width: 100%;
    height: 40px;
    border: rgb(214, 227, 235) 1px solid;
    border-radius: 4px;
    color: rgb(75, 91, 98);
    font-size: 1.6rem;
    line-height: 1em;
    font-weight: 300;
    -webkit-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
    transition: border-color 0.15s linear;

    -webkit-appearance: none;
}

.gh-input:focus {
    outline: 0;
    border-color: rgb(180, 203, 218);
}

/* Buttons
/* ---------------------------------------------------------- */
/* Base button style */
/* Should only be applied to <a> tags */
.gh-btn {
    display: inline-block;
    outline: none;
    border: 1px solid rgb(214, 227, 235);
    color: rgb(130, 154, 168);
    text-shadow: 0 1px 0 #fff;
    text-decoration: none !important;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    fill: rgb(130, 154, 168);
    border-radius: 5px;
    transition: all 0.2s ease;

    -webkit-font-smoothing: subpixel-antialiased;
}
/* ALL buttons must have a span for content */
.gh-btn span {
    display: block;
    padding: 0 12px;
    height: 33px;
    font-size: 1.3rem;
    line-height: 33px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.2px;
    border-radius: 4px;
}
.gh-btn:hover {
    border-color: rgb(180, 203, 218);
}

/* Button highlights
/* ---------------------------------------------------------- */
.gh-btn-hover-blue:hover {
    border-color: #3eb0ef;
    color: #3eb0ef;
}

/* Blue button
/* ---------------------------------------------------------- */
/* The background of the button creates 1px gradient border */
.gh-btn-blue {
    padding: 1px;
    border: 0;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
    fill: #fff;
    background: linear-gradient(
    rgb(61, 161, 214),
    rgb(34, 136, 191)
    );
    box-shadow: 0 1px 0 rgba(0,0,0,0.12);
    transition: none !important;
}
/* The background of the span is the main visual element */
.gh-btn-blue span {
    background: linear-gradient(
    rgb(74, 182, 240),
    rgb(47, 165, 228) 60%,
    rgb(47, 165, 228) 90%,
    rgb(56, 169, 229)
    );
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
}
/* When clicked or focused with keyboard */
.gh-btn-blue:active,
.gh-btn-blue:focus {
    background: rgb(30, 120, 169);
}
.gh-btn-blue:active span,
.gh-btn-blue:focus span {
    background: rgb(41, 160, 224);
    box-shadow: none;
}
/* Special Buttons
/* ---------------------------------------------------------- */
.gh-btn-block {
    display: block;
    width: 100%;
}

/* Input Icons
/* ---------------------------------------------------------- */

.gh-input-icon {
    position: relative;
    display: block;
}

.gh-input-icon svg {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 2;
    height: 14px;
    width: auto;
    fill: color(var(--midgrey) l(+15%));
    transform: translateY(-7px);
}

.gh-input-icon input {
    padding-left: 35px;
}

/* Layouts: Groups of Components
/* ---------------------------------------------------------- */
/* Global Layout
/* ---------------------------------------------------------- */

/* Main viewport, contains main content, and alerts */
.gh-app {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    overflow: hidden;
    height: 100%;
}
/* Content viewport, contains everything else */
.gh-viewport {
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    max-height: 100%;
}
.gh-main {
    position: relative;
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    overflow-y: auto;
}

/* Full screen workflow
/* ---------------------------------------------------------- */
.gh-flow {
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    overflow-y: auto;
    min-height: 100%;
}
.gh-flow-head {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-top: 4vh;
    padding-bottom: 20px;
}
.gh-flow-content-wrap {
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    margin: 0 5%;
    padding-bottom: 8vh;
}
.gh-flow-back {
    position: absolute;
    top: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin: 0 0 0 3%;
    padding: 2px 9px 2px 5px;
    border: transparent 1px solid;
    border-radius: 4px;
    color: #7d878a;
    font-weight: 100;
    transition: all 0.3s ease;
}
.gh-flow-back svg {
    margin-right: 4px;
    height: 12px;
    line-height: 14px;
}
.gh-flow-back svg path {
    stroke: #7d878a;
    stroke-width: 1.2px;
}
.gh-flow-back:hover {
    border: #dae1e3 1px solid;
}
.gh-flow-back-plain {
    position: absolute;
    top: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin: 0 0 0 3%;
    padding: 2px 9px 2px 5px;
    color: #7d878a;
    font-weight: 300;
    transition: all 0.3s ease;
    text-decoration: none;
}
.gh-flow-back-plain svg {
    margin-right: 4px;
    height: 12px;
    line-height: 14px;
}
.gh-flow-back-plain svg path {
    stroke: #7d878a;
    stroke-width: 1.2px;
}
.gh-flow-back-plain:hover {
    color: #15212A;
}
.gh-flow-nav {
    position: relative;
    -ms-flex: 1;
        flex: 1;
}
.gh-flow-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    max-width: 700px;
    width: 100%;
    color: #738a94;
    text-align: center;
    font-size: 1.9rem;
    line-height: 1.5em;
    font-weight: 100;
}

.gh-flow-content .gh-input-icon input {
    padding-left: 35px;
}

.gh-flow-content-unsubscribe {
    font-weight: 300;
}

@media (max-width: 500px) {
    .gh-flow-head-unsubscribe {
        padding-top: 2.8vh;
    }
    .gh-flow-content {
        font-size: 4vw;
    }
    .gh-flow-content-unsubscribe {
        font-size: 1.8rem;
        line-height: 1.6em;
    }
}
.gh-flow-content header {
    margin: 0 auto;
    max-width: 520px;
}
.gh-flow-content h1 {
    font-size: 4.2rem;
    font-weight: 100;
}
@media (max-width: 600px) {
    .gh-flow-content h1 {
        font-size: 7vw;
    }
}
.gh-flow-content .gh-btn {
    display: block;
    margin: 20px auto 0;
    max-width: 400px;
}
.gh-flow-content .form-group {
    margin-bottom: 2.5rem;
}
.gh-flow-content input {
    padding: 10px;
    border: #dae1e3 1px solid;
    font-size: 1.6rem;
    line-height: 1.4em;
    font-weight: 100;
}
.gh-flow-em {
    font-weight: 500;
}

/* Sign in
/* ---------------------------------------------------------- */
.gh-signin {
    position: relative;
    margin: 30px auto;
    padding: 40px;
    max-width: 400px;
    width: 100%;
    border: #dae1e3 1px solid;
    background: #f8fbfd;
    border-radius: 5px;
    text-align: left;
}
.gh-signin .form-group {
    margin-bottom: 1.5rem;
}
.gh-signin .gh-btn {
    margin: 0;
}

/* Error /ghost/404/
/* ---------------------------------------------------------- */

.error-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: text;
    padding: 8vw;
}

.error-details {
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
}

.error-ghost {
    margin: 15px;
    height: 115px;
}

@media (max-width: 630px) {
    .error-ghost {
        display: none;
    }
}

.error-code {
    margin: 0;
    color: #C5D2D9;
    font-size: 10vw;
    font-weight: 600;
    line-height: 0.9em;
    letter-spacing: -0.4vw;
}


.error-description {
    margin: 0;
    padding: 0;
    border: none;
    color: #54666D;
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 1.3em;
}

.error-message {
    display: flex;
    flex-direction: column;
    margin: 15px;
    align-items: center;
}

.error-message a {
    font-size: 1.4rem;
    line-height: 1;
    margin: 8px 0;
}

.error-link {
    background-color: transparent;
    color: #5ba4e5;
    transition: background .3s,color .3s;
    text-decoration: none;
}

/* Stack trace
/* ---------------------------------------------------------- */

.error-stack {
    margin: 1rem auto;
    padding: 2rem;
    max-width: 800px;
    background-color: rgba(255, 255, 255, 0.3);
}

.error-stack-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.error-stack-list li {
    display: block;
}

.error-stack-list li:before {
    content: "\21AA";
    display: inline-block;
    margin-right: 0.5rem;
    color: #bbb;
    font-size: 1.2rem;
}

.error-stack-function {
    font-weight: bold;
}


#cf_ad {
  margin-top: 20px;
}
.cf-wrapper .cf-text:before {
  content: "Sponsor" !important;
}

code.makeup .unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.makeup .hll {
  background-color: #ffffcc;
}
.makeup .bp {
  color: #3465a4;
}
.makeup .c {
  color: #999999;
}
.makeup .c1 {
  color: #999999;
}
.makeup .ch {
  color: #999999;
}
.makeup .cm {
  color: #999999;
}
.makeup .cp {
  color: #999999;
}
.makeup .cpf {
  color: #999999;
}
.makeup .cs {
  color: #999999;
}
.makeup .dl {
  color: #4e9a06;
}
.makeup .err {
  color: #a40000;
  border: #ef2929;
}
.makeup .fm {
  color: #4d4d4c;
}
.makeup .g {
  color: #4d4d4c;
}
.makeup .gd {
  color: #a40000;
}
.makeup .ge {
  color: #4d4d4c;
  font-style: italic;
}
.makeup .gh {
  color: #000080;
  font-weight: bold;
}
.makeup .gi {
  color: #00A000;
}
.makeup .go {
  color: #4d4d4c;
  font-style: italic;
}
.makeup .gp {
  color: #999999;
}
.makeup .gr {
  color: #ef2929;
}
.makeup .gs {
  color: #4d4d4c;
  font-weight: bold;
}
.makeup .gt {
  color: #a40000;
  font-weight: bold;
}
.makeup .gu {
  color: #800080;
  font-weight: bold;
}
.makeup .il {
  color: #0000cf;
  font-weight: bold;
}
.makeup .k {
  color: #204a87;
}
.makeup .kc {
  color: #204a87;
}
.makeup .kd {
  color: #204a87;
}
.makeup .kn {
  color: #204a87;
}
.makeup .kp {
  color: #204a87;
}
.makeup .kr {
  color: #204a87;
}
.makeup .kt {
  color: #204a87;
}
.makeup .l {
  color: #4d4d4c;
}
.makeup .ld {
  color: #cc0000;
}
.makeup .m {
  color: #2937ab;
}
.makeup .mb {
  color: #2937ab;
}
.makeup .mf {
  color: #2937ab;
}
.makeup .mh {
  color: #2937ab;
}
.makeup .mi {
  color: #2937ab;
}
.makeup .mo {
  color: #2937ab;
}
.makeup .n {
  color: #4d4d4c;
}
.makeup .na {
  color: #c4a000;
}
.makeup .nb {
  color: #204a87;
}
.makeup .nc {
  color: #0000cf;
}
.makeup .nd {
  color: #5c35cc;
  font-weight: bold;
}
.makeup .ne {
  color: #cc0000;
  font-weight: bold;
}
.makeup .nf {
  color: #f57900;
}
.makeup .ni {
  color: #ce5c00;
}
.makeup .nl {
  color: #f57900;
}
.makeup .nn {
  color: #4d4d4c;
}
.makeup .no {
  color: #c17d11;
}
.makeup .nt {
  color: #204a87;
  font-weight: bold;
}
.makeup .nv {
  color: #4d4d4c;
}
.makeup .nx {
  color: #4d4d4c;
}
.makeup .o {
  color: #ce5c00;
}
.makeup .ow {
  color: #204a87;
}
.makeup .p {
  color: #4d4d4c;
}
.makeup .py {
  color: #4d4d4c;
}
.makeup .s {
  color: #4e9a06;
}
.makeup .s1 {
  color: #4e9a06;
}
.makeup .s2 {
  color: #4e9a06;
}
.makeup .sa {
  color: #4e9a06;
}
.makeup .sb {
  color: #4e9a06;
}
.makeup .sc {
  color: #4e9a06;
}
.makeup .sd {
  color: #8f5902;
  font-style: italic;
}
.makeup .se {
  color: #204a87;
}
.makeup .sh {
  color: #4e9a06;
}
.makeup .si {
  color: #204a87;
}
.makeup .sr {
  color: #cc0000;
}
.makeup .ss {
  color: #c17d11;
}
.makeup .sx {
  color: #4e9a06;
}
.makeup .sx {
  color: #4e9a06;
}
.makeup .vc {
  color: #4d4d4c;
}
.makeup .vg {
  color: #4d4d4c;
}
.makeup .vi {
  color: #4d4d4c;
}
.makeup .vm {
  color: #4d4d4c;
}
.makeup .x {
  color: #4d4d4c;
}
/* https://tmbb.github.io/makeup_demo/elixir.html#monokai */
.night-mode .makeup {
  color: #f8f8f2;
  /* :name_builtin_pseudo */

  /* :comment */

  /* :comment_single */

  /* :comment_hashbang */

  /* :comment_multiline */

  /* :comment_preproc */

  /* :comment_preproc_file */

  /* :comment_special */

  /* :string_delimiter */

  /* :error */

  /* :name_function_magic */

  /* :generic_deleted */

  /* :generic_emph */

  /* :generic_inserted */

  /* :generic_strong */

  /* :generic_subheading */

  /* :generic_traceback */

  /* :number_integer_long */

  /* :keyword */

  /* :keyword_constant */

  /* :keyword_declaration */

  /* :keyword_namespace */

  /* :keyword_pseudo */

  /* :keyword_reserved */

  /* :keyword_type */

  /* :literal */

  /* :literal_date */

  /* :number */

  /* :number_bin */

  /* :number_float */

  /* :number_hex */

  /* :number_integer */

  /* :number_oct */

  /* :name */

  /* :name_attribute */

  /* :name_builtin */

  /* :name_class */

  /* :name_decorator */

  /* :name_exception */

  /* :name_function */

  /* :name_entity */

  /* :name_label */

  /* :name_namespace */

  /* :name_constant */

  /* :name_tag */

  /* :name_variable */

  /* :name_other */

  /* :operator */

  /* :operator_word */

  /* :punctuation */

  /* :name_property */

  /* :string */

  /* :string_single */

  /* :string_double */

  /* :string_affix */

  /* :string_backtick */

  /* :string_char */

  /* :string_doc */

  /* :string_escape */

  /* :string_heredoc */

  /* :string_interpol */

  /* :string_regex */

  /* :string_symbol */

  /* :string_other */

  /* :string_sigil */

  /* :name_variable_class */

  /* :name_variable_global */

  /* :name_variable_instance */

  /* :name_variable_magic */

}
.night-mode .makeup .hll {
  background-color: #49483e;
}
.night-mode .makeup .bp {
  color: #f8f8f2;
}
.night-mode .makeup .c {
  color: #75715e;
}
.night-mode .makeup .c1 {
  color: #75715e;
}
.night-mode .makeup .ch {
  color: #75715e;
}
.night-mode .makeup .cm {
  color: #75715e;
}
.night-mode .makeup .cp {
  color: #75715e;
}
.night-mode .makeup .cpf {
  color: #75715e;
}
.night-mode .makeup .cs {
  color: #75715e;
}
.night-mode .makeup .dl {
  color: #e6db74;
}
.night-mode .makeup .err {
  color: #960050;
  background-color: #1e0010;
}
.night-mode .makeup .fm {
  color: #a6e22e;
}
.night-mode .makeup .gd {
  color: #f92672;
}
.night-mode .makeup .ge {
  font-style: italic;
}
.night-mode .makeup .gi {
  color: #a6e22e;
}
.night-mode .makeup .gs {
  font-weight: bold;
}
.night-mode .makeup .gu {
  color: #75715e;
}
.night-mode .makeup .gt {
  color: #f92672;
  font-weight: bold;
}
.night-mode .makeup .il {
  color: #ae81ff;
}
.night-mode .makeup .k {
  color: #66d9ef;
}
.night-mode .makeup .kc {
  color: #66d9ef;
}
.night-mode .makeup .kd {
  color: #66d9ef;
}
.night-mode .makeup .kn {
  color: #f92672;
}
.night-mode .makeup .kp {
  color: #66d9ef;
}
.night-mode .makeup .kr {
  color: #66d9ef;
}
.night-mode .makeup .kt {
  color: #66d9ef;
}
.night-mode .makeup .l {
  color: #ae81ff;
}
.night-mode .makeup .ld {
  color: #ae81ff;
}
.night-mode .makeup .m {
  color: #ae81ff;
}
.night-mode .makeup .mb {
  color: #ae81ff;
}
.night-mode .makeup .mf {
  color: #ae81ff;
}
.night-mode .makeup .mh {
  color: #ae81ff;
}
.night-mode .makeup .mi {
  color: #ae81ff;
}
.night-mode .makeup .mo {
  color: #ae81ff;
}
.night-mode .makeup .n {
  color: #f8f8f2;
}
.night-mode .makeup .na {
  color: #a6e22e;
}
.night-mode .makeup .nb {
  color: #f8f8f2;
}
.night-mode .makeup .nc {
  color: #a6e22e;
}
.night-mode .makeup .nd {
  color: #a6e22e;
}
.night-mode .makeup .ne {
  color: #a6e22e;
}
.night-mode .makeup .nf {
  color: #a6e22e;
}
.night-mode .makeup .ni {
  color: #f8f8f2;
}
.night-mode .makeup .nl {
  color: #f8f8f2;
}
.night-mode .makeup .nn {
  color: #f8f8f2;
}
.night-mode .makeup .no {
  color: #66d9ef;
}
.night-mode .makeup .nt {
  color: #f92672;
}
.night-mode .makeup .nv {
  color: #f8f8f2;
}
.night-mode .makeup .nx {
  color: #a6e22e;
}
.night-mode .makeup .o {
  color: #f92672;
}
.night-mode .makeup .ow {
  color: #f92672;
}
.night-mode .makeup .p {
  color: #f8f8f2;
}
.night-mode .makeup .py {
  color: #f8f8f2;
}
.night-mode .makeup .s {
  color: #e6db74;
}
.night-mode .makeup .s1 {
  color: #e6db74;
}
.night-mode .makeup .s2 {
  color: #e6db74;
}
.night-mode .makeup .sa {
  color: #e6db74;
}
.night-mode .makeup .sb {
  color: #e6db74;
}
.night-mode .makeup .sc {
  color: #e6db74;
}
.night-mode .makeup .sd {
  color: #e6db74;
}
.night-mode .makeup .se {
  color: #ae81ff;
}
.night-mode .makeup .sh {
  color: #e6db74;
}
.night-mode .makeup .si {
  color: #e6db74;
}
.night-mode .makeup .sr {
  color: #e6db74;
}
.night-mode .makeup .ss {
  color: #e6db74;
}
.night-mode .makeup .sx {
  color: #e6db74;
}
.night-mode .makeup .sx {
  color: #e6db74;
}
.night-mode .makeup .vc {
  color: #f8f8f2;
}
.night-mode .makeup .vg {
  color: #f8f8f2;
}
.night-mode .makeup .vi {
  color: #f8f8f2;
}
.night-mode .makeup .vm {
  color: #f8f8f2;
}

:root{
  --page-width: 8.5in;
  --page-height: 11in;
  --main-width: 6.3in;
  --sidebar-width: calc(var(--page-width) - var(--main-width) - 0);
  --decorator-horizontal-margin: 0.2in;

  --sidebar-horizontal-padding: 0.2in;

  /* XXX: using px for very good precision control */
  --decorator-outer-offset-top: 10px;
  --decorator-outer-offset-left: -5.5px;
  --decorator-border-width: 1px;
  --decorator-outer-dim: 9px;
  --decorator-border: 1px solid #ccc;

  --row-blocks-padding-top: 5pt;
  --date-block-width: 0.6in;

  --main-blocks-title-icon-offset-left: -19pt;
}

.resume{
  font-family: "Open Sans", sans-serif; 
  font-weight: 300;
  line-height: 1.3;
  color: #444;
  hyphens: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.resume .wrapper {
  width: var(--page-width);
  margin: 0 auto;
  position: relative;
}

.resume a {
  text-decoration: none;
}

.resume h1, .resume h2, .resume h3{
  margin: 0;
  color: #000;
  letter-spacing: 0;
  text-indent: 0;
}

.resume li{
  list-style-type: none;
}

.resume #main{
  float: left;
  width: var(--main-width);
  padding: 0.25in 0.25in 0.5in 0.25in;
  font-size: 8pt;
}

.resume #sidebar{
  position: absolute; /* for disclaimer */
  right: 0;
  top: 0;
  display: block;
  width: var(--sidebar-width);
  height: 100%;
  padding: 0.3in var(--sidebar-horizontal-padding);
  background-color: #f2f2f2;
  font-size: 8.5pt;
}

/* main */

/** big title **/
.resume #title, .resume h1, .resume h2{
  text-transform: uppercase;
}

.resume #title{
  position: relative;
  left: 0.55in;
  margin-bottom: 0.3in;
  line-height: 1.2;
}

.resume #title h1{
  font-weight: 300;
  font-size: 18pt;
  line-height: 1.5;
}

.resume #title h1 strong{
  margin: auto 2pt auto 4pt;
  font-weight: 600;
}

.resume .subtitle{
  font-size: 8pt;
  text-transform: none;
}

/*** categorial blocks ***/

.resume .main-block{
  margin-top: 0.1in;
}

.resume #main h2{
  position: relative;
  top: var(--row-blocks-padding-top);
  /* XXX: 0.5px for aligning fx printing */
  left: calc((var(--date-block-width) + var(--decorator-horizontal-margin)));
  font-weight: 400;
  font-size: 11pt;
  color: #555;
}

.resume #main h2 > i{
  /* use absolute position to prevent icon's width from misaligning title */
  /* assigning a fixed width here is no better due to needing to align decorator
     line too */
  position: absolute;
  left: var(--main-blocks-title-icon-offset-left);
  z-index: 1; /* over decorator line */
  color: #444;
}

.resume #main h2::after{ /* extends the decorator line */
  height: calc(var(--row-blocks-padding-top) * 2);
  position: relative;
  top: calc(-1 * var(--row-blocks-padding-top));
  /* XXX: 0.5px for aligning fx printing */
  left: calc(-1 * var(--decorator-horizontal-margin));
  display: block;
  border-left: var(--decorator-border);
  z-index: 0;
  line-height: 0;
  font-size: 0;
  content: ' ';
}

/**** minor tweaks on the icon fonts ****/
.resume #main h2 > .fa-graduation-cap{
  left: calc(var(--main-blocks-title-icon-offset-left) - 2pt);
  top: 2pt;
}

.resume #main h2 > .fa-suitcase{
  top: 1pt;
}

.resume #main h2 > .fa-folder-open{
  top: 1.5pt;
}

/**** individual row blocks (date - decorator - details) ****/

.resume .blocks{
  display: flex;
  flex-flow: row nowrap;
}

.resume .blocks > div{
  padding-top: var(--row-blocks-padding-top);
}

.resume .date{
  flex: 0 0 var(--date-block-width);
  padding-top: calc(var(--row-blocks-padding-top) + 2.5pt) !important;
  padding-right: var(--decorator-horizontal-margin);
  font-size: 7pt;
  text-align: right;
  line-height: 1;
}

.resume .date span{
  display: block;
}

.resume .date span:nth-child(2)::before{
  position: relative;
  top: 1pt;
  right: 10.5pt;
  display: block;
  height: 10pt;
  content: '|';
}

.resume .decorator{
  flex: 0 0 0;
  position: relative;
  width: 2pt;
  min-height: 100%;
  border-left: var(--decorator-border);
}

/*
 * XXX: Use two filled circles to achieve the circle-with-white-border effect.
 * The normal technique of only using one pseudo element and
 * border: 1px solid white; style makes firefox erroneously either:
 * 1) overflows the grayshade background (if no background-clip is set), or
 * 2) shows decorator line which should've been masked by the white border
 *
 */

.resume .decorator::before{
  position: absolute;
  top: var(--decorator-outer-offset-top);
  left: var(--decorator-outer-offset-left);
  content: ' ';
  display: block;
  width: var(--decorator-outer-dim);
  height: var(--decorator-outer-dim);
  border-radius: calc(var(--decorator-outer-dim) / 2);
  background-color: #fff;
}

.resume .decorator::after{
  position: absolute;
  top: calc(var(--decorator-outer-offset-top) + var(--decorator-border-width));
  left: calc(var(--decorator-outer-offset-left) + var(--decorator-border-width));
  content: ' ';
  display: block;
  width: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
  height: calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2));
  border-radius: calc((var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)) / 2);
  background-color: #555;
}

.resume .blocks:last-child .decorator{ /* slightly shortens it */
  margin-bottom: 0.25in;
}

/***** fine-tunes on the details block where the real juice is *****/

.resume .details{
  flex: 1 0 0;
  padding-left: var(--decorator-horizontal-margin);
  padding-top: calc(var(--row-blocks-padding-top) - 0.5pt) !important; /* not sure why but this is needed for better alignment */
}

.resume .details header{
  color: #000;
}

.resume .details h3{
  font-size: 9pt;
}

.resume .main-block:not(.concise) .details div{
  margin: 0.18in 0 0.1in 0; 
}

.resume .main-block:not(.concise) .blocks:last-child .details div{
  margin-bottom: 0;
}

.resume .main-block.concise .details div:not(.concise){
  /* use padding to work around the fact that margin doesn't affect floated
     neighboring elements */
  padding: 0.05in 0 0.07in 0;
}

.resume .details .place{
  float: left;
  font-size: 7.5pt;
}

.resume .details .location{
  float: right;
}

.resume .details div{
  clear: both;
}

/***** fine-tunes on the lists... *****/

.resume #main ul{
  padding-left: 0.07in;
  margin: 0.08in 0;
}

.resume #main li{
  margin: 0 0 0.025in 0;
}

/****** customize list symbol style ******/
.resume #main li::before{
  position: relative;
  margin-left: -4.25pt;
  content: '\2022   ';
}

.resume .details .concise ul{
  margin: 0 !important;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}

.resume .details .concise li{
  margin: 0 !important;
}

.resume .details .concise li{
  margin-left: 0 !important;
}



/* sidebar */

.resume #sidebar h1{
  font-weight: 400;
  font-size: 11pt;
}

.resume .side-block{
  margin-top: 0.5in; 
}

.resume #contact{
  margin-top: 0;
}

.resume #contact ul{
  margin-top: 0.05in;
  padding-left: 0;
  font-family: "Source Code Pro";
  font-weight: 400;
  line-height: 1.75;
}

.resume #contact li > i{
  width: 9pt; /* for text alignment */
  text-align: right;
}

.resume #skills{
  line-height: 1.5;
}

.resume #skills ul{
  margin: 0.05in 0 0.15in;
  padding: 0;
}

.resume #education{
  line-height: 1.5;
}

.resume #education ul{
  margin: 0.05in 0 0.15in;
  padding: 0;
}

.resume #education b {
  font-weight: bold;
}

.resume #disclaimer{
  position: absolute;
  bottom: var(--sidebar-horizontal-padding);
  right: var(--sidebar-horizontal-padding);
  font-size: 7.5pt;
  font-style: italic;
  line-height: 1.1;
  text-align: right;
  color: #777;
}

.resume #disclaimer code{
  color: #666;
  font-family: "Source Code Pro";
  font-weight: 400;
  font-style: normal;
}