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

/*

    0.  Includes
    1.  Icons
    2.  General
    3.  Utilities
    4.  General
    5.  Single Post
    6.  Third Party Elements
    7.  Pagination
    8.  Footer
    9.  Media Queries (Tablet)
    10. Media Queries (Mobile)

 */

/* ==========================================================================
   0. Includes - Ground zero
   ========================================================================== */

/*@import url(normalize.css);*/


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

/* Import the font file with the icons in it */
@font-face {
    font-family: 'icons';
    src:url('../fonts/icons.eot');
    src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icons.woff') format('woff'),
        url('../fonts/icons.ttf') format('truetype'),
        url('../fonts/icons.svg#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Apply these base styles to all icons */
.icon-ghost, .icon-feed, .icon-twitter, .icon-google-plus, .icon-facebook {
    font-family: 'icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
}

.icon-ghost:before {
    content: "\e000";
}
.icon-feed:before {
    content: "\e001";
}
.icon-twitter:before {
    content: "\e002";
    font-size: 1.1em;
}
.icon-google-plus:before {
    content: "\e003";
}
.icon-facebook:before {
    content: "\e004";
}


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

/*html {
    height: 100%;
    max-height: 100%;
    font-size: 62.5%;
}

body {
    height: 100%;
    max-height: 100%;
    font-family: 'Droid Serif', serif;
    font-size: 2.0rem;
    line-height: 1.6em;
    color: #3A4145;
}

::-moz-selection {
    color: #222;
    background: #D6EDFF;
    text-shadow: none;
}

::selection {
    color: #222;
    background: #D6EDFF;
    text-shadow: none;
}

h1, h2, h3,
h4, h5, h6 {
    text-rendering: optimizeLegibility;
    line-height: 1;
    margin-top: 0;
    font-family: 'Open Sans', sans-serif;
}

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

h2 {
    font-size: 4rem;
    line-height: 1.2em;
    letter-spacing: -1px;
    text-indent: -2px;
}

h3 {
    font-size: 3.5rem;
}

h4 {
    font-size: 3rem;
}

h5 {
    font-size: 2.5rem;
}

h6 {
    font-size: 2rem;
}

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

a:hover {
    color: #57A3E8;
}

h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
    color: #50585D;
}


p, ul, ol {
    margin: 1.6em 0;
}

ol ol, ul ul,
ul ol, ol ul {
    margin: 0.4em 0;
}

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

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

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 \00A0'; }

blockquote cite {
    font-weight:bold;
}

blockquote cite a { font-weight: normal; }


dl {
    margin: 1.6em 0;
}

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

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

mark {
    background-color: #ffc336;
}

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

pre {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.6em 0;
    border: 1px solid #E3EDF3;
    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, tt {
    font-size: inherit;
    white-space: -moz-pre-wrap;
    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: bold;
    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.6em 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: 1px solid #efefef;
}

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: 2px solid #efefef; }

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,
    tbody > tr:nth-child(odd) > th {
        background: transparent;
    }
}*/


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

/* 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: 700px;
    margin: 0 auto;
}*/

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


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

/* Big cover image on the home page */
/*#site-head {
    position: relative;
    display: table;
    width: 100%;
    height: 60%;
    margin-bottom: 5rem;
    text-align: center;
    color: #fff;
    background: #303538 no-repeat center center;
    background-size: cover;
}*/

/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */
/*#blog-logo img {
    display: block;
    max-height: 100px;
    width: auto;
    margin: 0 auto;
    line-height: 0;
}

#back {
    color: rgba(0,0,0,0.2);
    position: fixed;
    top: 8px;
    left: 8px;
    padding: 6px;
    font-size: 16px;
}*/

/* The details of your blog. Defined in ghost/settings/ */
/*.blog-title {
    margin: 10px 0 10px 0;
    font-size: 5rem;
    letter-spacing: -1px;
}

.blog-description {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.5em;
    font-weight: 300;
    font-family: 'Droid Serif', serif;
    letter-spacing: 0;
}*/

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

/* Add a little circle in the middle of the border-bottom on our .post
   just for the lolz and stylepoints. */
/*.post:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    box-shadow: #fff 0 0 0 5px;
}

.post-title {
    margin:0;
}

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

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

.post-meta {
    display: inline-block;
    margin: 0 0 5px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5rem;
    color: #9EABB3;
}

.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;
}

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

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

.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: bold;
}

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

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

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

/* Insert some mad padding up in the header for better spacing */
/*.post-template .post-header {
    padding: 60px 0;
}*/

/* Keep large images within the bounds of the post-width */
/*.post-content img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}*/

/* The author credit area after the post */
/*.post-footer {
    position: relative;
    margin: 4rem 0 0 0;
    padding: 4rem 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.6em;
}*/

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

/* 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: 4rem;
    right: 0;
    width: 140px;
}

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

.post-footer .share a:hover {
    color: #50585D;
}*/


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

/* Github */
/*
.gist table {
    margin: 0;
    font-size: 1.4rem;
}

.gist .line-number {
    min-width: 25px;
    font-size: 1.1rem;
}*/


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

/* The main wrapper for our pagination links */
.pagination {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 10px auto;
    font-size: 14px;
    color: #9EABB3;
    text-align: center;
}

.pagination a {
    color: #9EABB3;
}

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

.older-posts {
    right: 0;
}

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

.newer-posts {
    left: 0;
}

.older-posts:hover,
.newer-posts:hover {
    border-color: #9EABB3;
}


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

.site-footer {
    position: relative;
    margin: 8rem 0 0 0;
    padding: 4rem 0;
    border-top: #EBF2F6 1px solid;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3rem;
    line-height: 1.7em;
    color: #BBC7CC;
    text-align: center;
    background: #F7FAFB;
}

.site-footer a {
    color: #BBC7CC;
    text-decoration: underline;
}

.site-footer a:hover {
    color: #50585D;
}

.poweredby .icon-ghost {
    font-weight: 700;
    text-decoration: none;
}

.poweredby .icon-ghost:hover {
    text-decoration: none;
}

.poweredby .icon-ghost:before {
    font-size: 14px;
    margin-right: 0.2em;
}

/* The subscribe icon on the footer */
.subscribe {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: 2px;
    border: #333 1px solid;
    text-align: center;
    border-radius: 5px;
    background: #000;
    transition: box-shadow 0.5s;
}

/* The RSS icon, inserted via icon font */
.subscribe:before {
    color: #D2DEE3;
    font-size: 14px;
    position: absolute;
    top: 1px;
    left: 5px;
    font-weight: bold;
    transition: color 0.5s ease;
}

/* Add a box shadow to on hover */
.subscribe:hover {
    box-shadow: rgba(0,0,0,0.05) 0 0 0 3px;
    transition: box-shadow 0.25s;
}

.subscribe:hover:before {
    color: #50585D;
}

/* CSS tooltip saying "Subscribe!" - initially hidden */
.tooltip {
    opacity:0;
    display: inline-block;
    padding: 4px 8px 5px 8px;
    position:absolute;
    top: -23px;
    left: -33px;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    background: #50585D;
    border-radius:20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease, top 0.3s ease;
}

/* The little chiclet arrow under the tooltip, pointing down */
.tooltip:after {
    content:"";
    border-width:5px 5px 0 5px;
    border-style:solid;
    border-color: #50585D transparent;
    display:block;
    position:absolute;
    bottom:-4px;
    left:50%;
    margin-left:-5px;
    z-index: 220;
    width:0;
}

/* On hover, show the tooltip! */
.subscribe:hover .tooltip {
    opacity: 1;
    top: -33px;
}


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

/*@media only screen and (max-width: 900px) {

    blockquote {
        margin-left: 0;
    }

    #site-head {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: auto;
        min-height: 240px;
        padding: 15% 0;
    }

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

    .blog-description {
        font-size: 1.7rem;
        line-height: 1.5em;
    }

    .post {
        font-size: 0.9em;
        line-height: 1.6em;
    }

    .post-template .post {
        padding-bottom: 1rem;
    }

    .post-template .post-header {
        padding: 40px 0;
    }

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

    h2 {
        font-size: 3.8rem;
    }

    h3 {
        font-size: 3.3rem;
    }

    h4 {
        font-size: 2.8rem;
    }

}*/

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


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

    #blog-logo img {
        max-height: 80px;
    }

    .inner,
    .pagination {
        width: auto;
        margin-left: 16px;
        margin-right: 16px;
    }

    .post {
        width:auto;
        margin-left: 16px;
        margin-right: 16px;
        font-size: 0.8em;
        line-height: 1.6em;
    }

    #site-head {
        padding: 10% 0;
    }

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

    .blog-description {
        font-size: 1.5rem;
    }


    h1, h2 {
        font-size: 3rem;
        line-height: 1.1em;
        letter-spacing: -1px;
    }

    h3 {
        font-size: 2.8rem;
    }

    h4 {
        font-size: 2.3rem;
    }

    .post-template .post {
        padding-bottom: 0;
    }

    .post-template .post-header {
        padding: 30px 0;
    }

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

    .post-footer {
        padding: 4rem 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;
    }

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

    .page-number {
        display: block;
    }

    .site-footer {
        margin-top: 6rem;
        font-size: 1.1rem;
    }

}*/

/*
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize =============
 */


/* == HTML5 display definitions == */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* == Base == */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

::-moz-selection { background: #0085cf; color: #fff;}
::selection { background: #0085cf; color: #fff;}


/* ============= Links ========== */

a { color: #0075cf; }
a:visited { color: #0075cf; }
a:hover { color: #0075cf; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* == Typography == */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

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

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* ============ Embedded content ============= */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* == Figures == */

figure { margin: 0; }


/* ====== Forms ====== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

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-decoration { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* == Tables == */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles ==================
   Author: Bryan McAnulty
   ============= */
html{
    background: #d4d8db;
    /*height: 100%;*/
    /*overflow:auto;*/
}
body{
    font-family: "proxima-nova-1", "proxima-nova-2", proxima nova, arial, sans-serif;
    width: auto;
    /*overflow: visible;*/
    /*top: 0;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;*/
    height: 0;
    /*z-index: -10;*/
    /*background: #d4d8db;*/
    background: none;
}
h2{ font-size: 30px; }
.post h1,.post h2,.post h3,.post h4,.post h5,.post h6 { padding: 0 10px; }
.post h3{ font-size: 26px; }
.post h4{ font-size: 22px; }
#main{
    /*position:absolute;*/
    /*bottom: 0;
    top: 302px;
    left: 0;
    right: 0;*/
    width: 1200px;
    margin: 0 auto;
    position: relative;
    display: block;
    height: 100%;
    min-height: 400px;
    /*height: 100vh;*/
    /*z-index: -5;*/
}
.col1{
    padding-bottom: 33px !important;
    /*float: left;*/
    position: fixed;
    width: 399px;
    /*-webkit-transform: translateZ(0);*/
}
.col2{
    background: #f0f0f0;
    height: auto;
    padding-bottom: 33px !important;
    border-left: 1px solid #bbb;
    float: right;
    position: relative;
    width: 786px;
    /*z-index: -4;*/
    max-width: 809px;
    box-shadow: inset 1px 0 0px #fff, inset -1px 0 0px #fff, inset 10px 0 38px -8px rgba(0,0,0,0.15), 0 1px 0 rgba(0,0,0,0.15), 1px 0 0px rgba(0,0,0,0.15), 0 2px 0 #fff, 3px 3px 6px rgba(0,0,0,0.06);
}
.sidebar{
    width: 338px;
    /*float: left;*/
    margin: -4px 0;
    padding: 10px 30px 20px;
    background: #f2f2f2;
    border: 1px solid #bbb;
    border-top: none;
    max-height: 310px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7), -24px 20px 20px -30px #999, 24px 20px 20px -30px #999;
}
/*.sidebar:after{
    content: "Theme by Bryan McAnulty http://vibrance.co";
    position: absolute;
    bottom: 0;
    font-size: 10px;
    padding: 10px 0;
    color: #999;
}*/
.theme-author{
    color: #888;
    font-size: 11px;
    margin: 16px;
}
.theme-author a{
    text-decoration: none;
    font-weight: bold;
    color: #444;
}
.poweredby{
    margin: 0 20px;
}
.sidebar ul{
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}
.sidebar ul li a{
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
}
.sidebar ul li{
    color: #777;
}
.sidebar h4, .twitterbox h4{
    font-size: 18px;
    margin: 0 0 18px;
    color: #333;
    border-bottom: 1px solid #e6e6e6;
}
.avatar {
    position: absolute;
    top: 116px;
    left: 218px;
    margin:25px 0 0 18px;
    padding: 4px 6px 6px;
    background: #333;
    background: -moz-linear-gradient(top, #a6a6a6, #7a7a7a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222));
    border: 1px solid #555;
    border-radius: 5px;
    border-bottom: none;
    box-shadow: 0 -1px 0 #333, 0 4px 3px -3px #444, inset 0 -2px 1px #111;
    width: 130px;
    height: 130px;
    z-index: 1;
}
.avatar a{
    background: #efefef no-repeat left top;
    padding: 11px;
    max-width: 71px;
    display:block;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px #999;
}
.avatar img {
    width:130px;
    height:130px;
    display: block;
    margin: auto;
}
#bio{
    font-size: 14px;
    width: 330px;
    padding: 0 30px;
    margin: 10px 0 16px;
}
#bio h1{
    margin: 44px 0 0;
}
#bio p{
    font-size: 12px;
    line-height: 19px;
    color: #666;
    font-family: "proxima-nova-1", "proxima-nova-2", proxima nova, arial, sans-serif;
    font-weight: 400;
    margin: 10px 0 0;
    background: #e3e7ea;
    border-radius: 5px;
    padding: 10px 133px 10px 10px;
    position: relative;
    top: 45px;
}
#follow-links{
    height: 32px;
    position: relative;
    left: -8px;
}
#follow-links a{
    font-size: 10px;
    position: relative;
    text-indent: -9999px;
    cursor: pointer;
    border: none;
    outline: none;
    height: 32px;
    width: 35px;
    display: inline-block;
    opacity: 0.45;
    transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.5s ease;
}
#follow-links a:hover{
    opacity: 0.80;
}

/***------ @SOCIAL LINKS ------***/

.facebookb{
    background: url('../img/facebook.png') no-repeat center center;
    background-size: 22px;
}
.twitterb{
    background: url('../img/twitter.png') no-repeat center center;
    background-size: 22px;
}
.googleb{
    background: url('../img/google.png') no-repeat center center;
    background-size: 22px;
}
.linkedinb{
    background: url('../img/linkedin.png') no-repeat center center;
    background-size: 22px;
}
.behanceb{
    background: url('../img/behance.png') no-repeat center center;
    background-size: 24px;
}
.flickrb{
    background: url('../img/flickr.png') no-repeat center center;
    background-size: 24px;
}
.clarityb{
    background: url('../img/clarity.png') no-repeat center center;
    background-size: 24px;
}
.quorab{
    background: url('../img/quora.png') no-repeat center center;
    background-size: 24px;
}
.rssb{
    background: url('../img/rss.png') no-repeat center center;
    background-size: 24px;
}

/***------ @TWITTER ------***/

.twitterbox{
    margin: 0 30px 20px;
}
/*.twitterbox h3 {
    padding:0 0 7px 4px;
    font-size:14px;
}*/
.twitterbox a{
    text-decoration: none;
}
#twitter {
    background:#e3e7ea;
    border-radius: 5px;
}
#tweets {
    /*border: 1px solid #000;
    background-color: #222;
    box-shadow: 0 1px 4px #777,inset 0 0 1px #fff;*/
    padding:9px 9px 8px 11px;
    font-size:10px;
    min-height:60px;
    line-height:17px;
    /*color: #fff;*/
    color: #333;
    margin-top: 0;
    width: 183px;
}
.followme{ margin: 8px 10px; }
.archive{
    font-weight: 600;
    color: #333;
    text-decoration: none;
    padding: 20px;
    position: relative;
    top: 6px;
}


/***------@HEADER------***/

.headcontainer{
    width: 100%;
    position: absolute;
    z-index: 2;
    height: 300px;
    top: 0;
    left: 0;
    right: 0;
    background: url('../img/bg4.jpg') repeat-x left top #d4d8db;
    background-size: 960px;
    opacity: 1;
}
.bg1{ background: url('../img/bg1.jpg') repeat-x left top #d4d8db; }
.bg2{ background: url('../img/bg2.jpg') repeat-x left top #d4d8db; }
.bg3{ background: url('../img/bg3.jpg') repeat-x left top #d4d8db; }
.bg4{ background: url('../img/bg4.jpg') repeat-x left top #d4d8db; }
#sitebackground .bg1{ background: url('../img/bg1.jpg') repeat-x right top #d4d8db; }
#sitebackground .bg2{ background: url('../img/bg2.jpg') repeat-x right top #d4d8db; }
#sitebackground .bg3{ background: url('../img/bg3.jpg') repeat-x right top #d4d8db; }
#sitebackground .bg4{ background: url('../img/bg4.jpg') repeat-x right top #d4d8db; }
.bg1,.bg2,.bg3,.bg4{ background-size: 960px; }
/*.headcontainer:before{
    content: "";
    height: 40px;
    width: 100%;
    position: absolute;
    top: 0;
    background: -moz-linear-gradient(top, #333, #222);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222));
    border-bottom: 1px solid #555;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.8), inset 0 -1px 0 #111;
}*/
.headcontainer:after{
    content: "";
    height: 300px;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, #d4d8db 0%, rgba(240, 240, 240, 0) 100%);
    background-position-y: 0;
}
#blur-bg{
    width: 100%;
    position: absolute;
    z-index: 3;
    height: 300px;
    top: 0;
    left: 0;
    right: 0;
}
/*.headcontainer:before{
    content: "";
    height: 90px;
    width: 100%;
    position: absolute;
    top: 0;
    background: -moz-linear-gradient(top, #333, #222);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222));
    border-bottom: 1px solid #555;
    -webkit-box-shadow: 0 1px 0 #333, 0 1px 3px #222, inset 0 -1px 0 #111;
    -moz-box-shadow: 0 1px 0 #333, 0 1px 3px #222, inset 0 -1px 0 #111;
    box-shadow: 0 1px 0 #333, 0 1px 3px #222, inset 0 -1px 0 #111;
}*/
header{
    width: 1200px;
    height: 300px;
    margin: 0 auto 0;
    z-index: 0;
}
.header-col1{
    /*float: left;*/
    position: fixed;
    width: 398px;
    background: #f2f2f2;
    height: 303px;
    margin-right: -1px;
    border: 1px solid #bbb;
    border-bottom: none;
    border-top: none;
    /*-webkit-transform: translateZ(0);*/
}
.header-col2{
    float: right;
    /*margin-left: 414px;*/
    width: 786px;
    display: block;
    overflow: hidden;
    height: 300px;
    /*margin:  0;*/
    border-bottom: 1px solid rgba(0, 0, 0, 0.7);
    border-bottom: none;
    /*border-left: 1px solid #555;
    border-right: 1px solid #555;*/
    border-top: 1px solid #444;
    box-shadow: -1px 0 0px rgba(0,0,0,0.35), 1px 0 0px rgba(0,0,0,0.35), 0 1px 0 #fff;
}
#sitebackground{
    position: relative;
    height: 301px;
    top: 0;
    margin: 0 auto 0;
    z-index: -1;
    overflow: hidden;
    border-radius: 0 0 5px 0;
}
#sitebackground img{
    position: absolute;
    right: 0;
    top: 0;
    width: 960px;
    /*REMEMBER TO RESET WIDTH FOR REAL PICTURE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
}
.sitename{
    font-family: "proxima-nova-1", "proxima-nova-2", proxima nova, arial, sans-serif;
    margin: -1px 0;
    padding: 0;
    position: relative;
    z-index: 4;
}
.sitename h1 a{
    font-size: 43px;
    font-weight: 700;
    text-decoration: none;
    color: #333;
}


/***------@NAV------***/

.nav-hold{
    width: 100%;
    background: #333;
    height: 30px;
    position: fixed;
    top: 0;
    background: -moz-linear-gradient(top, #333, #222);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222));
    border-bottom: 1px solid #555;
    box-shadow: 0 1px 0 #333, 0 1px 3px #222, inset 0 -1px 0 #111;
    z-index: 1;
    /*-webkit-transform: translateZ(0);*/
}
.main{
    margin: 0 auto;
    width: 1200px;
    height: 30px;
}
.main ul{
    position: relative;
    margin: 7px auto;
    text-align: left;
    left: 445px;
}
.main li{
    list-style: none;
    display: inline;
    font-size: 14px;
    font-weight: 600;
}
.main a{
    color: #eee;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 7px 3px;
    margin: 0 0 0 10px;
    border-radius: 5px;
    transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    z-index: 50;
}
.main a:hover, .scrolling a:hover, .nav-current a{
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-shadow: 0 1px 0 #111;
    box-shadow: inset 0 1px 3px #111;
}
.scrolling{
    width: 786px;
    height: 30px;
    position: relative;
    top: 268px;
    /*top:-32px;*/
    right: -1px;
    margin: 0 0 0 auto;
    background-image: -moz-linear-gradient(top, rgba(21, 21, 21, 0.70) 0%, rgba(14, 14, 14, 0.65) 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(21, 21, 21, 0.70)), to(rgba(14, 14, 14, 0.65)));
    box-shadow: 0 1px 0 #333, 0 -3px 4px -1px rgba(0,0,0,0.6), 0 -1px 0 #333;
    border: 1px solid #555;
    border-right: none;
    border-left: 1px solid #333;
    z-index:4;
}
.scrolling ul{
    text-align: left;
    left: 30px;
    position: absolute;
}
.searchbox{
    background: #333;
    width: 398px;
    display: inline;
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 6px 0 3px;
    border: 1px solid #bbb;
    background: #eee;
    background: -moz-linear-gradient(top, #eee, #ddd);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ddd));
    border-radius: 0 0 5px 5px;
    border-bottom: none;

}
.searchbox input{
    position: relative;
    display: inline;
    position: relative;
    top: 0;
    width: 170px;
    font-size: 13px;
    line-height: 20px;
    outline: none;
    background: #fff;
    padding:  2px 9px 2px 9px;
    border: 1px solid #eee;
    border-top: 1px solid #eee;
    border-bottom: 1px solid rgba(255,255,255,0.9);
    box-shadow: inset 0 1px 2px #777, inset 0 -1px 0 #ccc, inset 0 2px 10px #ccc;
    border-radius: 12px 0 0 12px;
    transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}
.searchbox form{
    height: 30px;
    position: relative;
    float: right;
    width: 260px;
}
.submitb{
    background: #444;
    margin: 0 -7px;
    display: inline;
    height: 24px;
    position: relative;
    top: 0;
    padding: 0 8px;
    border-radius: 0 12px 12px 0;
    border: 1px solid #666;
    border-bottom: 1px solid rgba(0,0,0,0.6);
    border-left: none;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 0 #000;
    cursor: pointer;
    box-shadow: 0 1px 0 #fff;
}

/***------@POST------***/

.post{
    width: auto;
    margin: 18px 19px 0;
    padding: 1px 19px 0;
    transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}
.post:hover{
    background: #f8f8f8;
    box-shadow: 0 1px 4px #777, inset 0 -1px 0 #ccc, inset 0 -2px 0 #fff;
    border-radius: 5px ;
}
h1.post-title{
    font-size: 46px;
    color: #222;
    margin: 29px 0 0 0;
    padding: 0 10px;
}
.post h2{
    margin: 29px 0 25px 0;
    padding: 0 10px;
    display: block;
}
.post h2 a{
    font-size: 34px;
    color: #222;
    display: block;
    text-decoration: none;
}
.post p{
    padding: 0 10px;
    margin: 10px 0 22px;
    font-size: 17px;
    line-height: 30px;
    color: #555;
    font-family: "jubilat-1","jubilat-2";
    font-weight: 400;
}
.post img{
    width: 600px;
    margin: 0 auto;
    border-radius: 3px;
    display: block;
}
.post small.img-caption{
    font-family: "proxima-nova-1", "proxima-nova-2", proxima nova, arial, sans-serif;
    font-size: 75%;
    background: #e3e7ea;
    width: 600px;
    display: block;
    margin: 7px auto 0;
    padding: 7px 15px;
    box-sizing: border-box;
    border-radius: 3px;
    line-height: 16px;
}
.pbody_content{
    width: 500px;
    /**border: 1px solid #999;
    border-bottom: 1px solid #666;**/
    border-radius: 7px;
    margin: 5px auto 25px auto;
    /*border: 1px solid #aaa;
    background: #ccc;
    padding: 10px;
    box-shadow: inset 0 0px 0 1px rgba(255,255,255,0.7), inset 0 0px 5px rgba(0,0,0,0.3);*/
}
/*.pbody_content:before {
   height: 0;
   width: 480px;
   content:"";
   position: absolute;
   margin: -8px;
   border-bottom: 21px solid rgba(255, 255, 255, 0);
   border-left: 21px solid #ddd;
   -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
   border-radius: 7px 0;
   z-index: 1;
}
.pbody_content:after {
   height: 0;
   width: 480px;
   content:"";
   position: absolute;
   border-top: 25px solid rgba(255, 255, 255, 0);
   border-right: 25px solid #ddd;
   margin: -17px auto 0 3px;
   -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
   border-radius: 7px 0;
}*/

.img-link{
    display:block;
    position:relative;
}
.img-link:before{
    /*content:'';
    position:absolute;
    width:100%;
    height:100%;
    box-shadow:inset 0 0px 3px 2px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px rgba(255,255,255,0.3);
    border-radius: 3px;*/
}
.details{
    height: 25px;
    padding: 9px 10px 0;
    margin: 18px 9px 23px 9px;
    margin-top: 18px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    background: #ebebeb;
}
.share a{
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    padding: 7px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    border: 1px solid #222;
    border-radius: 5px;
    background: #000;
    color: #d2dee3;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    text-shadow: 0 1px 0 #000;
    margin: 3px 10px 10px;
    display: inline-block;
    box-shadow: inset 0 -1px 0 #555;
}
.share a:hover{
    background: #222;
    color: #fff;
    box-shadow: inset 0 0px 0 1px #666, 0 1px 3px #888;
}
/*.share .icon-twitter:before, .share .icon-google-plus:before, .share .icon-facebook:before {
    font-size: 16px;
}*/
/*#share {
  margin: auto;
  font-size: 16px;
  padding-top: 10px;
}
#share ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: .50;
    transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}
#share ul:hover {
    opacity: 1.0;
}
#share ul li {
  float: left;
  margin-right: 8px;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  padding: 0 10px;
}
#share .twitter { padding-top: 3px; height: 25px; margin-right: 0; }
#share .googleplus { padding-top: 3px; height: 25px; width: 70px; margin-right: 8px; }
#share .facebook { width: 80px; }
#share .stumbleupon { margin-top: 3px; }*/
.post-detail .post-meta{ padding: 0 10px; margin: 20px 0; display: inline-block; width: 98%;}
.tag{
    padding: 2px 8px;
    margin: 0 1px;
    display: inline-block;
    background: #ddd;
    font-size: 12px;
    border-radius: 11px;
    color: #444;
    text-shadow: 0 -1px 0 #f0f0f0;
    float: right;
    transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
}
.tag:hover{
    background: #bbb;
    color: #222;
    text-shadow: 0 -1px 0 #ddd;
    cursor: pointer;
}
.post-date{
    color: #888;
    font-size: 12px;
}
a.read-more{
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 10px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    border: 1px solid #222;
    background: #333;
    color: #eee;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    text-shadow: 0 1px 0 #000;
    margin: 3px 10px 10px;
    display: inline-block;
    box-shadow: inset 0 1px 0 #555;
}

.read-more:hover{
    background: #444;
    color: #fff;
    box-shadow: inset 0 0px 0 1px #666, 0 1px 3px #888;
}
.comment-link{
    font-weight: 600;
    text-decoration: none;
    padding: 0 15px 0 0;
    float: left;
}
.share-link{
    font-weight: 600;
    text-decoration: none;
    padding: 0 15px 0 0;
    float: left;
}
.divider {
    height: 0;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    display: block;
    width: auto;
    position: relative;
    margin-top: 5px;
}

/***------@FOOTER------***/

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 31px;
    /*overflow: hidden;*/
    clear:both;
    width: 1193px;
    margin: 0 auto;
    background: #333;
    background: -moz-linear-gradient(top, #333, #222);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222));
    border: 1px solid #555;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    box-shadow: 0 -1px 0 #333, 0 -1px 4px #333, inset 0 -2px 1px #111;
    z-index: -5;
}
.copyright{
    font-size: 10px;
    position: absolute; left: 50px; top: 9px;
    text-shadow: 0 1px 1px #111;
    font-family: "proxima-nova-1", "proxima-nova-2", proxima nova, arial, sans-serif;
    color: #999;
}
.rss a{
    text-decoration: none;
    position: absolute;
    left: 310px;
    line-height: 22px;
}


/* ==|== media queries ========== */



@media only screen and (max-width: 1200px) {
    header{
        width: 980px;
    }
    #main{
        width: 980px;
    }
    .main{
        width: 980px;
    }
    .main ul{
        left: 415px;
    }
    .scrolling ul{
        left: 30px;
    }
    .col1{
        width: 368px;
    }
    .col2{
        width: 596px;
    }
    .avatar{
        width: 120px;
        height: 120px;
        left: 200px;
    }
    .avatar img {
        width:120px;
        height:120px;
    }
    #bio{
        width: 320px;
    }
    #bio p{
        font-size: 11px;
    }
    .post img{
        width: 500px;
    }
    .post small.img-caption{
        width: 500px;
    }
    .sidebar{
        width: 308px;
    }
    .theme-author{
        margin: 16px 0;
    }
    .searchbox{
        width: 368px;
    }
    .scrolling{
        width: 596px;
    }
    .header-col1{
        width: 368px;
    }
    .header-col2{
        width: 596px;
    }
    footer {
        width: 975px;
    }

}

@media only screen and (max-width: 980px) {
    header{
        width: 767px;
    }
    #main{
        width: 767px;
    }
    .main{
        width: 767px;
    }
    .main ul{
        left: 6px;
    }
    .col1{
        width: 398px;
        position: relative;
    }
    .col2{
        width: 766px;
        float: none;
        top: -2px;
        position: relative;
    }
    .avatar{
        width: 120px;
        height: 120px;
        top: 50px;
        left: -18px;
        margin:25px 0 0 18px;
        border-left: none;
        border-radius: 0 5px 5px 0;
    }
    .avatar img {
        width:120px;
        height:120px;
    }
    #bio{
        float: none;
        padding: 0;
    }
    #bio p{
        display: none;
    }
    #bio h1{
        margin: -11px 0 0 20px;
        position: relative;
    }
    .sidebar{
        width: 706px;
        margin: 0;
        padding-top: 20px;
    }
    .searchbox{
        width: 766px;
    }
    .scrolling{
        width: 766px;
        right: 0;
    }
    .headcontainer{
        z-index: 0;
    }
    .header-col1{
        width: 766px;
        height: 35px;
        position: absolute;
        border-bottom: 1px solid #fff;
        background: rgba(255, 255, 255, 1.9);
        background: #f0f0f0;
        z-index: 2;
    }
    .header-col2{
        width: 767px;
        box-shadow: inset 10px 0 4px -8px #333, 1px 0 0px rgba(0,0,0,0.35);
        z-index: 0;
    }
    #sitebackground{
        z-index: 1;
    }
    footer {
        width: 760px;
    }
    .sitename h1 a{
        font-size: 20px;
    }
    .post{
        margin:0;
    }
    .twitterbox{
        display: none;
    }
    .theme-author{
        margin: 16px;
    }
    /*.facebookb{
        background-size: 18px;
    }
    .twitterb{
        background-size: 18px;
    }
    .googleb{
        background-size: 18px;
    }
    .linkedinb{
        background-size: 18px;
    }
    .behanceb{
        background-size: 20px;
    }
    .flickrb{
        background-size: 20px;
    }
    .quorab{
        background-size: 20px;
    }
    .rssb{
        background-size: 20px;
    }
    .twitterb{
        padding: 0;
    }*/

}

@media only screen and (max-width: 767px) {
    header{
        width: 480px;
    }
    #main{
        width: 480px;
    }
    .main{
        width: 480px;
    }
    .main ul{
        left: 6px;
    }
    .col1{
        width: 398px;
        position: relative;
    }
    .col2{
        width: 479px;
    }
    .avatar{
        width: 116px;
        height: 116px;
    }
    .avatar img {
        width:116px;
        height:116px;
    }
    #bio{
        float: none;
    }
    #bio p{
        display: none;
    }
    .sidebar{
        width: 419px;
    }
    .searchbox{
        width: 479px;
    }
    .post h2{
        font-size: 32px;
        margin: 29px 0 19px 0;
    }
    h1.post-title{
        font-size: 34px;
    }
    .post p{
        font-size: 16px;
        line-height: 28px;
    }
    /*.details{
        margin: 18px 0 0 0;
    }*/
    .scrolling{
        width: 479px;
    }
    .header-col1{
        width: 480px;
    }
    .header-col2{
        width: 480px;
    }
    footer {
        width: 480px;
    }
    .post img{
        width: 380px;
    }
    .post small.img-caption{
        width: 380px;
    }
    .pbody_content{
        width: 380px;
    }
    footer{
        display: none;
    }
}

@media only screen and (max-width: 479px) {
    header{
        width: 320px;
        height: 200px;
    }
    .headcontainer, .col1, .col2, .sidebar, .scrolling, .header-col1, .header-col2, footer{
        border-left: none;border-right: none;
    }
    .headcontainer{
        height: 204px;
    }
    #main{
        width: 320px;
    }
    .main{
        width: 320px;
    }
    .main ul{
        left: -5px;
        text-align: center;
    }
    .scrolling ul{
        left: 52px;
        text-align: center;
    }
    .col1{
        width: 319px;
        position: relative;
    }
    .col2{
        width: 319px;
        border-top: none;
    }
    .avatar{
        width: 90px;
        height: 90px;
        top: 27px;
    }
    .avatar img {
        width:90px;
        height:90px;
    }
    #bio{
        float: none;
    }
    #bio p{
        display: none;
    }
    #bio h1{
        position: inherit;
    }
    .sidebar{
        width: 257px;
    }
    .searchbox{
        width: 315px;
    }
    .scrolling{
        width: 320px;
        top: 171px;
    }
    .read-more{
        margin: 3px 0 10px;
    }
    .main ul{
        text-align: center;
    }
    .header-col1{
        width: 320px;
    }
    .header-col2{
        width: 320px;
        height: 202px;
    }
    #blur-bg{
        height: 210px;
    }
    .post h2, .post p, .post-detail .post-meta, .post-detail h1.post-title{
        padding: 0;
    }
    .post img{
        width: 260px;
    }
    .post small.img-caption{
        width: 260px;
    }
    .pbody_content{
        width: 260px;
    }
    .details{
        height: auto;
    }
    .tag{
        float: none;
        margin: 8px 2px 8px 0;
    }
    #follow-links{
        left: -22px;
        width: 306px;
    }
    #sitebackground img{
        width: 720px;
    }
    #share ul li {
      float: none;
      margin-right: 8px;
      height: 28px;
      display: none;
      visibility: hidden;
      line-height: 28px;
      vertical-align: middle;
      padding: 0 10px;
    }
    .post:hover{
        background: none;
        box-shadow: none;
        border-radius: 0;
    }
    .headcontainer:before{
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        top: 0;
        background: none;
        border-bottom: none;
        box-shadow: none;
    }
    .searchbox input{
        width: 100px;
    }
    .searchbox form{
        width: 200px;
    }
}


/* ==|== non-semantic helper classes == */


/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* Astro compatibility and accessibility overrides */
/*
 * The recovered Haunt stylesheet is the base layer. Keep this file limited to
 * Astro compatibility, modern equivalents for retired scripts, and a11y fixes.
 */

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  height: auto;
  padding-bottom: 49px;
  font-family: "proxima-nova-1", "proxima-nova-2", "Proxima Nova", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
}

a:focus-visible {
  outline: 3px solid #0085cf;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 7px 10px;
  color: #fff;
  background: #111;
  border-radius: 3px;
  transform: translateY(-180%);
}

.skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

#main:focus {
  outline: none;
}

.col1 {
  top: 302px;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#blur-bg {
  pointer-events: none;
  overflow: hidden;
}

#blur-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #d4d8db 0%, rgba(240, 240, 240, 0) 100%);
  z-index: 1;
}

#blur-bg canvas {
  position: relative;
  z-index: 0;
  display: block;
}

#sitebackground.bg1 { background: url('../img/bg1.jpg') repeat-x right top #d4d8db; }
#sitebackground.bg2 { background: url('../img/bg2.jpg') repeat-x right top #d4d8db; }
#sitebackground.bg3 { background: url('../img/bg3.jpg') repeat-x right top #d4d8db; }
#sitebackground.bg4 { background: url('../img/bg4.jpg') repeat-x right top #d4d8db; }

.bg1,
.bg2,
.bg3,
.bg4 {
  background-size: 960px !important;
}

.post p,
.archive-header p,
.empty-state {
  font-family: "jubilat-1", "jubilat-2", Jubilat, Rockwell, "Rockwell Nova", Georgia, serif;
}

.post-card .post-excerpt > :first-child,
.post-content > :first-child {
  margin-top: 10px;
}

.post-content a,
.post-excerpt a {
  overflow-wrap: anywhere;
}

.post-content ul,
.post-content ol {
  color: #555;
  font-family: "jubilat-1", "jubilat-2", Jubilat, Rockwell, "Rockwell Nova", Georgia, serif;
  font-size: 17px;
  line-height: 30px;
}

.post-content li p {
  padding: 0;
}

.sidebar {
  max-height: none;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
}

.sidebar .product-list {
  margin-bottom: 12px;
}

.sidebar .product-list li {
  margin-bottom: 7px;
  line-height: 16px;
}

.sidebar .product-list li:last-child {
  margin-bottom: 0;
}

.sidebar .product-list li a {
  line-height: inherit;
}

.sidebar .product-list span {
  display: block;
  font-size: 11px;
  line-height: 14px;
}

#follow-links .youtubeb {
  background: url('../img/youtube.svg') no-repeat center;
  background-size: 22px;
}

#follow-links .xb {
  background: url('../img/x.svg') no-repeat center;
  background-size: 22px;
}

.about-intro {
  margin: 8px 0 38px;
  padding: 24px 26px 20px;
  background: #e3e7ea;
  border-left: 4px solid #0085cf;
  border-radius: 0 5px 5px 0;
}

.post .about-intro p {
  padding-inline: 0;
}

.post .about-lede {
  margin-top: 0;
  color: #333;
  font-size: 20px;
  line-height: 31px;
}

.about-section {
  margin-top: 44px;
  padding-top: 6px;
  border-top: 1px solid #d0d0d0;
}

.post-content .about-section h2 {
  margin-top: 4px;
}

.post-content .about-eyebrow,
.post-content .appearance-show {
  margin: 20px 0 0;
  color: #66717a;
  font-family: "proxima-nova-1", "proxima-nova-2", "Proxima Nova", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 18px;
  text-transform: uppercase;
}

.post-content .about-eyebrow {
  padding: 0 10px;
}

.post-content .appearance-show {
  padding: 0;
}

.impact-grid,
.appearance-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.impact-item,
.appearance-item {
  padding: 18px;
  background: #fff;
  border: 1px solid #d6dade;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.impact-item strong,
.impact-item span {
  display: block;
}

.impact-item strong {
  margin-bottom: 5px;
  color: #0085cf;
  font-size: 22px;
  line-height: 26px;
}

.impact-item span {
  color: #555;
  font-family: "proxima-nova-1", "proxima-nova-2", "Proxima Nova", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 19px;
}

.appearance-item {
  margin: 0;
}

.post-content .appearance-item .appearance-show {
  margin: 0 0 5px;
}

.post-content .appearance-item h3 {
  margin: 0;
  padding: 0;
  font-size: 19px;
  line-height: 24px;
}

.post-content .appearance-item h3 a {
  text-decoration: none;
}

.post-content .appearance-item > p:last-child {
  margin: 10px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 22px;
}

.post-content .appearance-more {
  padding-inline: 0;
  font-family: "proxima-nova-1", "proxima-nova-2", "Proxima Nova", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.secondary-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding-bottom: 10px;
}

.secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  color: #555;
  background: #fff;
  border: 1px solid #d6dade;
  border-radius: 4px;
  font-family: "proxima-nova-1", "proxima-nova-2", "Proxima Nova", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-decoration: none;
}

.secondary-link span {
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}

.behance-link span { background-image: url('../img/behance.png'); }
.clarity-link span { background-image: url('../img/clarity.png'); }
.quora-link span { background-image: url('../img/quora.png'); }

.post-tags {
  display: inline;
}

.tag {
  text-decoration: none;
}

.post-footer {
  padding: 0 10px 30px;
}

.post-footer h4 {
  margin: 16px 0 4px;
  color: #333;
  font-size: 18px;
}

.post-footer .author a {
  color: inherit;
  text-decoration: none;
}

.linkedin-share::before {
  content: "in";
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.archive-header,
.empty-state {
  margin: 18px 19px 0;
  padding: 1px 29px 22px;
}

.archive-header {
  border-bottom: 1px solid #ccc;
  box-shadow: 0 1px 0 #fff;
}

.archive-header .post-title {
  margin-bottom: 8px;
}

.archive-header p,
.empty-state {
  color: #555;
  font-size: 17px;
  line-height: 30px;
}

footer::after {
  content: "";
  position: absolute;
  inset: 0 0 0 413px;
  z-index: 0;
}

.copyright {
  z-index: 1;
}

@media only screen and (max-width: 1200px) {
  footer::after {
    left: 383px;
  }
}

@media only screen and (max-width: 980px) {
  body {
    padding-bottom: 0;
  }

  .col1 {
    top: auto;
    bottom: auto;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .sidebar {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .col1 {
    padding-bottom: 0 !important;
  }

  footer::after {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .post-content ul,
  .post-content ol,
  .archive-header p,
  .empty-state {
    font-size: 16px;
    line-height: 28px;
  }

  .about-intro {
    padding: 20px;
  }

  .post .about-lede {
    font-size: 18px;
    line-height: 28px;
  }
}

@media only screen and (max-width: 479px) {
  .archive-header,
  .empty-state {
    margin-inline: 0;
    padding-inline: 19px;
  }

  .post-footer {
    padding-inline: 0;
  }

  .impact-grid,
  .appearance-list {
    grid-template-columns: 1fr;
  }

  .about-intro {
    margin-inline: 0;
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}