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

/*

    0.  Normalize
    1.  Icons
    2.  General
    3.  Utilities
    4.  General
    5.  Single Post
      5.1. Koenig Styles
    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/casper-icons.eot");
    src:url("../fonts/casper-icons.eot?#iefix") format("embedded-opentype"),
        url("../fonts/casper-icons.woff") format("woff"),
        url("../fonts/casper-icons.ttf") format("truetype"),
        url("../fonts/casper-icons.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";
}


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

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: menlo, monospace;
}

h1, h2, h3,
h4, h5, h6 {
    font-size: 1em;
    margin: 19px 0;
}

p {
    margin: 19px 0;
}

img {
    width: 100%;
    max-width: 30em;
}

/* ==========================================================================
   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;
}

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

/* Wraps the main content & footer */
.site-wrapper {
    max-width: 42em;
    border: solid 1em transparent;
    border-width: 0 1em;
    margin: auto;
    margin-bottom: 10em;
}



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

/* Navigation */
.nav {
}

/* Appears in the top left corner of your home page */
.blog-logo {
    position: relative;
    top: 15px;
}

.blog-logo img {
    width: 68px;
}

.blog-logo:empty {
    height: 68px;
    width: 68px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    background-size: contain;
    margin-top: 7px;
    margin-left: -8px;
    background-image: -webkit-radial-gradient(circle, transparent 50%, rgba(0,0,0,.1) 54%, rgba(0,0,0,.1) 56%, transparent 60%, transparent 100%);
    background-image: -moz-radial-gradient(circle, transparent 50%, rgba(0,0,0,.1) 54%, rgba(0,0,0,.1) 56%, transparent 60%, transparent 100%);
    background-image: -ms-radial-gradient(circle, transparent 50%, rgba(0,0,0,.1) 54%, rgba(0,0,0,.1) 56%, transparent 60%, transparent 100%);
    background-image: -o-radial-gradient(circle, transparent 50%, rgba(0,0,0,.1) 54%, rgba(0,0,0,.1) 56%, transparent 60%, transparent 100%);
    background-image: radial-gradient(circle, transparent 50%, rgba(0,0,0,.1) 54%, rgba(0,0,0,.1) 56%, transparent 60%, transparent 100%);
}

/* The details of your blog. Defined in ghost/settings/ */
.page-description {
    font-weight: normal;
}

/* Every post, on every page, gets this style on its <article> tag */
.post {
}

.post + .post {
    margin-top: 38px;
}

.author-thumb {
    max-width: 32px;
}


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

/* ==========================================================================
   5.1. Koenig Styles
   ========================================================================== */

.kg-width-wide {
    position: relative;
    width: 85vw;
    min-width: 100%;
    margin: auto calc(50% - 50vw);
    transform: translateX(calc(50vw - 50%));
}

.kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}


.kg-gallery-container {
}

.kg-gallery-row {
    display: flex;
}

.kg-gallery-image img {
    max-width: 100%;
}


.kg-bookmark-card {
    width: 100%;
    position: relative;
}

.kg-bookmark-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    color: currentColor;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.kg-bookmark-container:hover {
    text-decoration: none;
}

.kg-bookmark-content {
    flex-basis: 0;
    flex-grow: 999;
    padding: 20px;
    order: 1;
}

.kg-bookmark-title {
    font-weight: 600;
}

.kg-bookmark-metadata,
.kg-bookmark-description {
    margin-top: .5em;
}

.kg-bookmark-metadata {
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kg-bookmark-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.kg-bookmark-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
    margin-right: .5em;
    margin-bottom: .05em;
}

.kg-bookmark-thumbnail {
    display: flex;
    flex-basis: 24rem;
    flex-grow: 1;
}

.kg-bookmark-thumbnail img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

.kg-bookmark-author {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.kg-bookmark-publisher::before {
    content: "•";
    margin: 0 .5em;
}


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


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

.read-next {
    position: relative;
    width: 2em;
    height: 0;
    top: -20px;
    left: -3em;
}

.read-next-story.prev {
    position: absolute;
    right: 0;
}

.share a,
.read-next a {
    text-decoration: none;
}


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


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

/* The main wrapper for our pagination links */
.pagination {
    margin-top: 1em;
}

.extra-pagination {
    display: none;
}

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


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


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


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


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


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