@charset "utf-8";
/* CSS Document */

/*--------------   SITE NAME   --------------*/


/*============================================*/
/*--------------- BASE STYLES ----------------*/
/*============================================*/


body {
    font-size:100%;
    text-align: center;
    font-family:HelveticaNeue, Helvetica, Arial, sans-serif;
    text-align: center;
    color:#444;
    height: 100%;
    width: 100%;
    min-height: 100%;
    background: #FFF;
}
.wrap {
    max-width: 1100px;
    padding:0 20px 0 45px;
    text-align: left;
    margin:auto;
}
#content {
    padding-top:120px;
    padding-bottom:60px;
}
aside {
    width: 28.5%;
    display:inline-block;
    margin-left:8.5%;
    vertical-align: top;
    background:#FFF;
}
.module {
    position: absolute;
    z-index: 102;
    overflow: hidden;
    min-width: 520px;
    min-height: 570px;
    background:#FFF;
    box-shadow:0px 10px 35px rgba(0,0,0,.2);
}
    .module iframe {
        max-width:100%;
    }
.centered-content {
    text-align: center;
}


/*============================================*/
/*---------------- TYPOGRAPHY ----------------*/
/*============================================*/


@font-face {
    font-family: 'Bebas';
    src: url('../fonts/bebasneue_bold-webfont.eot');
    src: url('../fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebasneue_bold-webfont.woff') format('woff'),
         url('../fonts/bebasneue_bold-webfont.ttf') format('truetype'),
         url('../fonts/bebasneue_bold-webfont.svg#RalewayThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {

}
h2 {
    font-family:HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    color:#000;
    overflow: hidden;
    font-size: 1.4375rem;
    margin-left:-1.3em;
    margin-bottom:20px;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h3 {
    text-transform: uppercase;
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom:15px;
    letter-spacing: .02em;
    color:#000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h4 {
    font-size: .875rem;
    color:#000;
    margin-bottom:5px;
    font-weight: bold;
    text-transform: uppercase;
}
    h4 a, h2 a, h3 a {
        color:inherit;
        text-decoration: none;
    }
    .dark h1, .dark h2, .dark h3, .dark h4 {
        color:#FFF;
    }
.box {
    height:.8em;
    background:#000;
    display:inline-block;
    width:.8em;
    margin-right:.5em;
}
    .dark .box {
        background: #FFF;
    }
p {
    font-size:.875rem;
    line-height: 1.4em;
    margin-bottom:30px;
}
    .dark p {
        color:#CCC;
    }
a {
    color:#999;
}
    p a {
        color:#999;
        text-decoration: none;
        border-bottom:1.5px dotted #000;
    }
        p a:hover {
            border-bottom:1.5px dotted #000;
            color:#000;
            background:#EAEAEA;
        }
ul {
    margin-bottom:30px;
}
li {
    list-style:outside;
    line-height: 1.4em;
    margin-left:20px;
    margin-bottom:10px;
    font-size:.875rem;
}
img {
    max-width: 100%;
    margin-bottom:20px;
}
dl {
    margin-bottom:20px;
    font-size:.875rem;
}
dt {
    font-weight: bold;
    margin-bottom:10px;
}
dd {
    border-left:4px solid #EAEAEA;
    padding-left:20px;
    margin-bottom:20px;
    line-height: 1.4em;
}
.big-text {
    font-size: 20rem;
    color:#000;
    font-family: HelveticaNeue-Condensed, Bebas, Helvetica, Arial, sans-serif;
}


/*============================================*/
/*------------------ LAYOUT ------------------*/
/*============================================*/



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

#logo {
    float:left;
    margin-left:-40px;
    position: relative;
}
    .home #logo {
        display:none;
    }
    #logo div {
        position: absolute;
    }
.logo-1 {
    background:#000;
    height:2px;
    width:35px;
    top:12px;
    transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    -webkit-animation: logo-1 2s ease-in-out infinite;
    -moz-animation: logo-1 2s ease-in-out infinite;
    -ms-animation: logo-1 2s ease-in-out infinite;
    animation: logo-1 2s ease-in-out infinite;
}
.logo-2 {
    background:#000;
    height:4px;
    width:35px;
    top:15px;
    -webkit-animation: logo-2 2.5s ease-in-out infinite;
    -moz-animation: logo-2 2.5s ease-in-out infinite;
    -ms-animation: logo-2 2.5s ease-in-out infinite;
    animation: logo-2 2.5s ease-in-out infinite;
    transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-30deg);
}
.logo-3 {
    background:#000;
    height:2px;
    width:15px;
    left:10px;
    top:20px;
    -webkit-animation: logo-3 3s ease-in-out infinite;
    -moz-animation: logo-3 3s ease-in-out infinite;
    -ms-animation: logo-3 3s ease-in-out infinite;
    animation: logo-3 3s ease-in-out infinite;
    transform: perspective( 50px ) rotateY( 10deg ) rotateX( 40deg ) rotate(0deg);
}
.logo-4 {
    background:#000;
    height:1px;
    width:25px;
    top:20px;
    -webkit-animation: logo-4 1.5s ease-in-out infinite;
    -moz-animation: logo-4 1.5s ease-in-out infinite;
    -ms-animation: logo-4 1.5s ease-in-out infinite;
    animation: logo-4 1.5s ease-in-out infinite;
    transform: perspective( 50px ) rotateY( 45deg ) rotateX( 30deg ) rotate(20deg);
}
@-webkit-keyframes logo-1 {
    0%   {
        top:12px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    }
    50%  {
        top:18px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-30deg);

    }
    100% {
        top:12px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    }
}
@-webkit-keyframes logo-2 {
    0%   {
        top:10px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-20deg);
    }
    50%  {
        top:20px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(0deg);

    }
    100% {
        top:10px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-20deg);
    }
}
@-webkit-keyframes logo-3 {
    0%   {
        top:25px;
        transform: rotate(10deg);    
    }
    50%  {
        top:15px;
        transform: rotate(40deg);

    }
    100% {
        top:25px;
        transform: rotate(10deg);
    }
}
@-webkit-keyframes logo-4 {
    0%   {
        top:20px;
        transform: rotate(20deg);    
    }
    50%  {
        top:15px;
        transform: rotate(0deg);

    }
    100% {
        top:20px;
        transform: rotate(20deg);
    }
}


@-moz-keyframes logo-1 {
    0%   {
        top:12px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    }
    50%  {
        top:18px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-30deg);

    }
    100% {
        top:12px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    }
}
@-moz-keyframes logo-2 {
    0%   {
        top:10px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-20deg);
    }
    50%  {
        top:20px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(0deg);

    }
    100% {
        top:10px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-20deg);
    }
}
@-moz-keyframes logo-3 {
    0%   {
        top:25px;
        transform: rotate(10deg);    
    }
    50%  {
        top:15px;
        transform: rotate(40deg);

    }
    100% {
        top:25px;
        transform: rotate(10deg);
    }
}
@-moz-keyframes logo-4 {
    0%   {
        top:20px;
        transform: rotate(20deg);    
    }
    50%  {
        top:15px;
        transform: rotate(0deg);

    }
    100% {
        top:20px;
        transform: rotate(20deg);
    }
}

@-ms-keyframes logo-1 {
    0%   {
        top:12px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    }
    50%  {
        top:18px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-30deg);

    }
    100% {
        top:12px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    }
}
@-ms-keyframes logo-2 {
    0%   {
        top:10px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-20deg);
    }
    50%  {
        top:20px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(0deg);

    }
    100% {
        top:10px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-20deg);
    }
}
@-ms-keyframes logo-3 {
    0%   {
        top:25px;
        transform: rotate(10deg);    
    }
    50%  {
        top:15px;
        transform: rotate(40deg);

    }
    100% {
        top:25px;
        transform: rotate(10deg);
    }
}
@-ms-keyframes logo-4 {
    0%   {
        top:20px;
        transform: rotate(20deg);    
    }
    50%  {
        top:15px;
        transform: rotate(0deg);

    }
    100% {
        top:20px;
        transform: rotate(20deg);
    }
}

@keyframes logo-1 {
    0%   {
        top:12px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    }
    50%  {
        top:18px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-30deg);

    }
    100% {
        top:12px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-10deg);
    }
}
@keyframes logo-2 {
    0%   {
        top:10px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-20deg);
    }
    50%  {
        top:20px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(0deg);

    }
    100% {
        top:10px;
        transform: perspective( 50px ) rotateY( 20deg ) rotateX( 30deg ) rotate(-20deg);
    }
}
@keyframes logo-3 {
    0%   {
        top:25px;
        transform: rotate(10deg);    
    }
    50%  {
        top:15px;
        transform: rotate(40deg);

    }
    100% {
        top:25px;
        transform: rotate(10deg);
    }
}
@keyframes logo-4 {
    0%   {
        top:20px;
        transform: rotate(20deg);    
    }
    50%  {
        top:15px;
        transform: rotate(0deg);

    }
    100% {
        top:20px;
        transform: rotate(20deg);
    }
}
#site-header {
    overflow: hidden;
    margin-bottom:60px;
    position: fixed;
    top:0px;
    width:100%;
    background: #FFF;
    background: rgba(255,255,255,.95);
    z-index: 100;
    box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.home #site-header {
    position: absolute;
}
#site-header #wordmark {
    display:inline-block;
    font-family: HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.3rem;
    color:#000;
    float:left;
    margin-bottom:0;
    width:35%;
    margin-top:6px;
    cursor: pointer;
    margin-left:0;
    letter-spacing: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
    #site-header #wordmark a {
        color:inherit;
        text-decoration: none;
    }

    header #wordmark span {
        color:#D8D8D8;
        -webkit-transition: all .5s ease-out;
        -moz-transition: all .5s ease-out;
        transition: all .5s ease-out;
    }
    #site-header #wordmark:hover span{
        color:#000;
    }
#site-nav {
    float:right;
    margin-bottom:0px;
}
    #site-nav ul {
        margin-bottom:0px;
        overflow: hidden;
    }
    #site-nav li {
        display:inline-block;
        padding:0;
        margin:0;
        width:90px;
        list-style: none;
        float: left;
        font-size:.875rem;
    }
        #site-nav li a {
            display:block;
            padding:10px;
            font-weight: normal;
            padding-bottom:6px;
            font-family: HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;
            color:#000;
            text-transform:uppercase;
            text-decoration: none;
            border-left:none;
            border-right:none;
            border-top:none;
            font-size: inherit;
            cursor: pointer;
            border-bottom:4px solid #FFF;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
            .home #site-nav li a {
                visibility: hidden;
            }
            #site-nav li .selected {
                border-bottom:4px solid #000;
            }
            #site-nav li a:hover {
                color:#FFF;
                border-bottom:4px solid #000;
            }
            #site-nav li .loaded {
                background-position: 0 0;
                color:#FFF;
                border-bottom:4px solid #000;
            }


/*------------------- HOME -------------------*/

.home {
    overflow: hidden;
}
.home #tout{
    position: absolute;
    overflow: hidden;
}
    .home #tout #next-btn, .home #tout #prev-btn {
        top:0;
        width:20%;
        position: absolute;
        height: 100%;
        z-index: 100;
        cursor: pointer;
    }
        .home #tout #next-btn {
            right:0;
        }
        .home #tout #prev-btn {
            left:0;
        }

.home-content {
    position: absolute;
    width:100%;
}
.home footer {
    display:none;
}
#project-gallery ul {
    border-bottom:1px solid #EAEAEA;
    margin-bottom:30px;
}
.home #site-header {
    visibility: hidden;
}

.project-list {
    padding-bottom:40px;
}

    .project-list li {
        width:30.5%;
        background:#FFF;
        margin-right:3%;
        margin-left:0;
        list-style: none;
        padding:0;
        display:inline-block;
        margin-bottom:20px;
        cursor: pointer;
        position: relative;
        padding:.5%;
        border:1px solid #EAEAEA;
        box-sizing:border-box;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;

    }
        .project-list li:hover {
            box-shadow: 0px 8px 20px rgba(0,0,0,.3);
        }
    .project-list .thumb-3, .project-list .thumb-6 {
        margin-right:0;
    }

.project-list li .live-area {
    overflow: hidden;
    width:100%;
    height: 100%;
    position: relative;
}
    .project-list li img {
        width:100%;
        position: relative;
        z-index: 1;
        top:0px;
        left:0px;
        margin-bottom:0;
        vertical-align: middle;
    }
    .project-list li .overlay {
            background: #000;
            background:rgba(0,0,0,.9);
            width:100%;
            height: 100%;
            position: absolute;
            top:0px;
            left:120%;
            z-index: 2;
        }
        #dribbble-gallery .project-list li .overlay {
            background-image:url(../images/link-out-arrow.png);
            background-repeat: no-repeat;
            background-position: 93% 20px;
            background-size:21px 22px;
        }

        .project-list li  h4 {
            font-family: HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;
            font-size: 1.65em;
            font-weight: normal;
            text-transform: uppercase;
            margin-bottom:60px;
            position: absolute;
            left:480px;
            top:40%;
            z-index: 10;
            width:93%;
            color:#FFF;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

        }
        .project-list li h5 {
            font-family: HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;
            font-size:1.1em;
            color:#666666;
            margin-bottom:5px;
            font-weight:normal;
            text-transform: uppercase;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .project-list li .project-meta {
            position: absolute;
            bottom:20px;
            left:580px;
            z-index: 11;
            width:93%;
            color:#FFF;
        }
        .project-list .project-link {
            position: absolute;
            top:0px;
            left:0px;
            height:100%;
            width:100%;
            z-index: 15;
        }


/*----------------- PROJECT ------------------*/


.project-page {
    overflow:hidden;
}
    .project-page header {
        display:none;
    }
    .project-page footer {
        display:none;
    }
#project-slides {
    height:100%;
    overflow: hidden;
    margin:0;
    padding:0;
    opacity: 0;
}
#project-slides li{
    list-style: none;
    margin:0;
    padding:0;
    position: absolute;
    width:100%;
    left:0;
    top:0;
    overflow: hidden;
    height:100%;
}
    #project-slides li img {
        max-width: inherit;
    }
#project-info {
    position: absolute;
    right:0;
    z-index: 80;
    border:1px solid #333;
    background:#000;
    background:rgba(0,0,0,.95);
    padding:5px 20px 20px 20px;
    color:#939598;
    bottom:-100%;
    width:20%;
    text-align: left;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
    #project-info h1 {
        font-family:HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;
        font-weight: normal;
        text-transform: uppercase;
        color:#FFF;
        overflow: hidden;
        margin-top:10px;
        font-size: 1.4375rem;
        margin-bottom:30px;
        color:#FFF;
        letter-spacing: .02em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

        #project-info h1 .box {
            background:#FFF;
        }
    #project-info p {
        margin-bottom:15px;
        color:#DDD;
    }
    #project-info h4 {
        font-size: .75rem;
        color:#444;
        font-weight: bold;
        text-transform: uppercase;
    }
    #project-info #related-projects {
        margin:0;
        padding:0;
    }
        #project-info #related-projects li {
            margin-left:0;
            list-style: none;
            margin-right:10px;
            margin-top:10px;
            width:25%;
            display:inline-block;
            border:1px solid #000;
        }
            #project-info #related-projects li img {
                width:100%;
                vertical-align: middle;
                margin-bottom:0px;
            }
                #project-info #related-projects li:hover {
                    border:1px solid #FFF;
                }

    .project-page #next-btn {
        position: absolute;
        right:0;
        top:0;
        width:30%;
        height:100%;
        cursor: pointer;
    }
    .project-page #prev-btn {
        position: absolute;
        left:0;
        top:0;
        width:30%;
        height:100%;
        cursor: pointer;
    }

/*----------------- WRITING ------------------*/

.article-list {
    width:100%;
}
.article-list li {
    list-style: none;
    width:100%;
    margin-left:0;
    padding-left:0;
}
    .article-list .article-lead {
        margin-bottom:40px;
        width:100%;
    }
        .article-list h2 a {
            text-decoration: none;
            color:inherit;
        }
#article-content {
    display:inline-block;
    width: 62%;
}
    #article-content img {
        max-width: 100%;
    }
.article-cover {
    margin-bottom:20px;
    width:100%;
}
.book-list {
    border-bottom:1px solid #EAEAEA;
    margin-bottom:35px;
}
    .book-list li{
        list-style: none;
        margin-left:0;
        padding-left:0;
        margin-bottom:15px;
    }
        .book-list li img {
            display:inline-block;
            max-width: 35%;
            box-shadow: 0px 2px 4px rgba(0,0,0,.2);
            vertical-align: middle;
        }
        .book-list li .info {
            vertical-align: middle;
            display:inline-block;
            width:60%;
            margin-left:3%;
        }
.avatar {
    width:50px;
    display:inline-block;
    vertical-align: middle;
    margin-right:5px;
    margin-bottom:0;
}
.info {
    display:inline-block;
    vertical-align: middle;
}
.dropcap {
    display:inline-block;
    font-size:2.6rem;
    font-weight: bold;
    padding:18px 17px;
    margin-right:6px;
    margin-bottom:0px;
    background:#000;
    margin-top:-4px;
    color:#FFF;
    float:left;
    vertical-align: top;
    font-family:HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;

}



/*----------------- ARTICLE ------------------*/


.article-page #article-title {
    font-family:HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    color:#000;
    overflow: hidden;
    font-size: 1.6375rem;
    margin-left:-1.3em;
    margin-bottom:20px;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.post-date {
    text-transform: uppercase;
    margin-bottom:15px;
    margin-top:0px;
    padding:0;
    font-size: .875rem;
    color:#999;
}
.original-post {
    font-size: .875rem;
    border: 1px solid #EAEAEA;
    background: #FAFAFA;
    padding: 8px;
    border-radius: 3px;
    text-align: center;
    margin-bottom: 30px;
}
    .article-page .article-cover {
        margin-bottom:30px;
        max-width: 100%;
    }

    .article-page aside {
        margin-top:0;
    }
.article-page blockquote {
    width:35%;
    font-size:1.1rem;
    padding-left:15px;
    padding-right:15px;
    border-left:4px solid #000;
    line-height: 1.1em;
    margin:12px;
    margin-left:-30px;
    margin-top:-2px;
    float:left;
    color:#000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: bold;
}
    .article-page blockquote p {
        font-size:1em;
        margin-bottom:0;
    }
    .article-page .twitter-tweet {
        margin-left:auto !important;
        margin-right:auto !important;
        border:none !important;
        padding:inherit;
        font-size: inherit;
        font-weight: normal;
        display:none;
        width:100%;
    }

.article-page #article-content .full-width {
    width:160%;
    max-width: inherit;
}
.article-page #article-content .pull-left {
    margin-left:-4.8%;
    max-width:55%;
    float:left;
    margin-right:2%;
    margin-bottom:5px;
}
.article-page #article-content .pull-right {
    margin-left:2%;
    max-width:85%;
    float:right;
    margin-right:-60%;
    margin-bottom:5px;
}
.article-page .entry {
    padding-bottom:20px;
}
    .article-page .entry iframe {
        max-width: 100%;
        width:100%;
    }
.article-page #article-content .share-links {
    display:block;
    padding-bottom:20px;
    padding-top:20px;
    border-bottom:1px solid #EAEAEA;
    border-top:1px solid #EAEAEA;
    margin-bottom:30px;
    clear:both;
}
    .article-page .share-links h4 {
        display:inline-block;
        margin-right:10px;
    }
    .article-page .book-list {
        border:none;
    }
.article-page #comment-list {
    padding-top:20px;
    margin-bottom:40px;
}
    .article-page #comment-list li {
        list-style: none;
        margin-left:0;
        margin-bottom:30px;
    }
        .article-page #comment-list .meta {
            width:18%;
            display:inline-block;
            margin-right:5%;
            vertical-align: top;
            font-size: .75rem;
        }
        .article-page #comment-list .the-comment {
            width:75%;
            display:inline-block;
            font-size: .75rem;
            line-height: 1.4em;
            vertical-align: top;
        }
        .article-page #comment-list .name {
            font-size: .75rem;
            text-transform: uppercase;
            font-weight: bold;
            color:#000;
            margin-bottom:7px;
            vertical-align: top;
            line-height: 1em;
        }
    .article-page .add-comment {
        display:block;
        cursor: pointer;
        max-width: 300px;
        margin-left:auto;
        margin-right:auto;
    }
    .article-page #comment-form {
        border-top:1px solid #EAEAEA;
        margin-top:15px;
        width:100%;
        padding-top:30px;
        display:none;
    }
        .article-page #comment-form ul {
            margin-top:30px;
        }

.article-list img {
    margin-bottom:10px;
    max-width: 100%;
}
.about-me {
    margin-bottom:15px;
}

    .about-me .avatar {
        float:left;
        width:10%;
        margin-right:3%;
        margin-bottom:15px;
    }
    .about-me p {
        max-width: 400px;
        display:block;
    }

.code-block {
    padding:5px;
    font-size:1rem;
    font-family: monospace;
    color:#000;
}

/*------------------ ABOUT -------------------*/

.find-me {
    padding-top:3px;
    margin-bottom:30px;
}
.find-me .avatar {
    height:45px;
    width:45px;
    margin-right:15px;
    float:left;
    margin-top:-3px;
    display:inline-block;
}
.social-media li {
    list-style: none;
    margin-left:0;
    margin-bottom:20px;
}
.social-media h4 {
    vertical-align: top;
    margin-top:5px;
}
.social-media p {
    margin-bottom:0;
}
.social-media a {
    float:left;
    margin-right:15px;
    margin-left:0 !important;
}
.about .pie-chart {
    width:40%;
    display:inline-block;
    vertical-align: top;
}
.about .abilities {
    width:59%;
    vertical-align: top;
    display:none;

}
    .abilities h4 {
        margin-top:70px;
    }
    .abilities ul {
       margin-top:10px;
    }
    .abilities li {
        font-size:.81rem;
        list-style: none;
        margin-left:0px;
    }
    .abilities .bar-graph {
        background:#EAEAEA;
        height:8px;
        display:inline-block;
        width:60%;
        float:right;
        margin-top:3px;
    }
        .abilities .bar-graph .fill {
            background:#000;
            height:100%;
            width:0%;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }
    .about #skill-pie {
        position: relative;
        height:200px;
        padding-top:20px;
        padding-bottom:40px;
    }
    /* Special thanks to Patrick Denny for help on this http://codepen.io/AtomicNoggin/pen/fEish */
    .about .pie {
        position:absolute;
        width:105px;
        height:200px;
        overflow:hidden;
        left:100px;
        -moz-transform-origin:left center;
        -ms-transform-origin:left center;
        -o-transform-origin:left center;
        -webkit-transform-origin:left center;
        transform-origin:left center;
    }

    .about .pie:BEFORE {
        content:"";
        position:absolute;
        width:100px;
        height:200px;
        left:-100px;
        border-radius:100px 0 0 100px;
        border:1px solid #CCC;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        -moz-transform-origin:right center;
        -ms-transform-origin:right center;
        -o-transform-origin:right center;
        -webkit-transform-origin:right center;
        transform-origin:right center;
        
    }
    .about .pie:AFTER {
        border:1px solid #CCC;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .about .pie[data-start="30"] {
        -moz-transform: rotate(30deg); /* Firefox */
        -ms-transform: rotate(30deg); /* IE */
        -webkit-transform: rotate(30deg); /* Safari and Chrome */
        -o-transform: rotate(30deg); /* Opera */
        transform:rotate(30deg);
    }
    .about .pie[data-start="150"] {
        -moz-transform: rotate(60deg); /* Firefox */
        -ms-transform: rotate(60deg); /* IE */
        -webkit-transform: rotate(60deg); /* Safari and Chrome */
        -o-transform: rotate(60deg); /* Opera */
        transform:rotate(150deg);
    }
    .about .pie[data-start="260"] {
        -moz-transform: rotate(100deg); /* Firefox */
        -ms-transform: rotate(100deg); /* IE */
        -webkit-transform: rotate(100deg); /* Safari and Chrome */
        -o-transform: rotate(100deg); /* Opera */
        transform:rotate(260deg);
    }
    .about .pie[data-start="330"] {
        -moz-transform: rotate(100deg); /* Firefox */
        -ms-transform: rotate(100deg); /* IE */
        -webkit-transform: rotate(100deg); /* Safari and Chrome */
        -o-transform: rotate(100deg); /* Opera */
        transform:rotate(330deg);
    }
    .about .pie[data-value="150"]:BEFORE {
        -moz-transform: rotate(31deg); /* Firefox */
        -ms-transform: rotate(31deg); /* IE */
        -webkit-transform: rotate(31deg); /* Safari and Chrome */
        -o-transform: rotate(31deg); /* Opera */
        transform:rotate(150deg);
    }
    .about .pie[data-value="110"]:BEFORE {
        -moz-transform: rotate(41deg); /* Firefox */
        -ms-transform: rotate(41deg); /* IE */
        -webkit-transform: rotate(41deg); /* Safari and Chrome */
        -o-transform: rotate(41deg); /* Opera */
        transform:rotate(110deg);
    }
    .about .pie[data-value="60"]:BEFORE {
        -moz-transform: rotate(41deg); /* Firefox */
        -ms-transform: rotate(41deg); /* IE */
        -webkit-transform: rotate(41deg); /* Safari and Chrome */
        -o-transform: rotate(41deg); /* Opera */
        transform:rotate(70deg);
    }
    .about .pie[data-value="30"]:BEFORE {
        -moz-transform: rotate(260deg); /* Firefox */
        -ms-transform: rotate(260deg); /* IE */
        -webkit-transform: rotate(260deg); /* Safari and Chrome */
        -o-transform: rotate(260deg); /* Opera */
        transform:rotate(30deg);
    }
    .pie:nth-of-type(1):BEFORE,
    .pie:nth-of-type(1):AFTER {
        border:1px solid #D8D8D8;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        z-index: 5;
    }
    .pie:nth-of-type(2):AFTER,
    .pie:nth-of-type(2):BEFORE {
        border:1px solid #D8D8D8;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .pie:nth-of-type(3):AFTER,
    .pie:nth-of-type(3):BEFORE {
        border:1px solid #D8D8D8;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .pie:nth-of-type(4):AFTER,
    .pie:nth-of-type(4):BEFORE {
        border:1px solid #D8D8D8;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        z-index: 1;
    }
        .about .pie-chart .selected:AFTER, .about .pie-chart .selected:BEFORE {
            background: #000;
            border:1px solid #000;
        }
            .about .pie:hover:AFTER, .about .pie:hover:BEFORE {
                background:#EAEAEA;
                cursor: pointer;
            }
            .about .pie-chart .selected:hover:AFTER, .about .pie-chart .selected:hover:BEFORE {
                background:#000;
                border:1px solid #000;
            }
.press-logos li {
    list-style: none;
    display:inline-block;
    margin-top:15px;
    width:13%;
    padding-left:0;
    margin-right:4%;
    margin-left:4%;
    opacity: .25;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
    .press-logos li:hover {
        opacity: 1;
        cursor: pointer;
    }
    .press-logos li:nth-child(1) {
        margin-left:0;
    }
    .press-logos li:nth-child(4) {
        margin-right:0;
    }



/*------------------ CONTACT -----------------*/

.page-overlay {
    position: fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:rgba(255,255,255,.9);
    z-index: 101;
}
#contact-form {
    position: absolute;
    z-index: 102;
    top:0;
    max-height: 100%;
    max-width: 100%;
    background:#000;
    padding:2%;
}
.contact-page {
    background:#000;
    color:#FFF;

}
.contact-page h3 {
    color:#FFF;
}
.contact-me {
    padding:40px 40px 20px 20px;
}
.contact-page #site-header, .contact-page footer {
    display:none;
}
.contact-not-inline {
    background: #FFF;
    padding-top:60px;
}
    .contact-not-inline p {
        color:#444;
    }
    .contact-not-inline #site-header, .contact-not-inline footer {
        display:block;
    }
    .contact-not-inline #contact-form {
        background:#FFF;
    }
    .contact-not-inline .contact-me {
        margin-bottom:50px;
    }


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

footer {
    border-top:1px solid #EAEAEA;
    padding:10px 0;
    color:#CCC;
    overflow: hidden;
    clear:both;
}
    footer p {
        font-size: .75rem;
        display:inline-block;
        vertical-align: middle;
        margin-top:15px;
        margin-bottom:0;
    }
    footer .share-links {
        display:inline-block;
        float:right;
        vertical-align: middle;
    }


/*============================================*/
/*------------------- FORMS ------------------*/
/*============================================*/

form {
    display:block;
}
form li {
    list-style: none;
    display:inline-block;
    margin-left:0;
    padding-left:0;
    display:block;
    margin-bottom:20px;
}
label {
    display:block;
    text-transform: uppercase;
    color:#000;
    font-weight: bold;
    margin-bottom:3px;
    font-size: .75rem;
}
    .dark label {
        color:#CCC;
    }
input[type="text"], input[type="password"], input[type="number"], input[type="email"] {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline: none;
    background:none;
    border:1px solid #EAEAEA;
    padding:1.5%;
    display:block;
    border-radius: 0;
    width:97%;
    font-size:.875rem;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

    /* Hover, focus, active states for ALL types of text inputs */
    input[type="text"]:hover, input[type="password"]:active, input[type="number"]:focus, input[type="email"]:hover {
        background:#EAEAEA;
    }
    input[type="text"]:active, input[type="text"]:focus, input[type="password"]:active, input[type="password"]:focus, input[type="number"]:active, input[type="number"]:focus, input[type="email"]:active, input[type="email"]:focus {
        background:#000;
        color:#EAEAEA;
}

    .dark input[type="text"], .dark input[type="password"], .dark input[type="number"], .dark input[type="email"] {
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        border:none;
        outline: none;
        background:none;
        border-radius: 0;
        border:1px solid #FFF;
        padding:1.5%;
        display:block;
        color:#FFF;
        width:97%;
        font-size:.875rem;
        -webkit-transition: all .15s ease-in-out;
        -moz-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;
    }

        /* Hover, focus, active states for ALL types of text inputs */
        .dark input[type="text"]:hover, .dark input[type="password"]:active, .dark input[type="number"]:focus, .dark input[type="email"]:hover {
            background:#1E1E1E;
        }
        .dark input[type="text"]:active, .dark input[type="text"]:focus, .dark input[type="password"]:active, .dark input[type="password"]:focus, .dark input[type="number"]:active, .dark input[type="number"]:focus, .dark input[type="email"]:active, .dark input[type="email"]:focus {
            background:#FFF;
            color:#1E1E1E;
        }   
input[type="submit"]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline: none;
    width:100%;
    display:inline-block;
    background:url(../images/button-bg.png) left top no-repeat;
    background-size:100% 100%;
    background-position: 0 75px;
    overflow: hidden;
    text-align: center;
    border:1px solid #EAEAEA;
    padding:10px 30px;
    display:inline-block;
    border-radius: 0;
    color:#000;
    font-weight: bold;
    font-size: .75rem;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1em;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}
    input[type="submit"]:focus{
        background-position: 0 0;
        color:#FFF;
        border-color:#000;
    }
textarea {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline: none;
    background:none;
    border:1px solid #EAEAEA;
    padding:1.5%;
    border-radius: 0;
    width:97%;
    display:block;
    min-height: 150px;
    font-size: .875rem;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}
    textarea:hover {
        background: #EAEAEA;
    }
    textarea:focus, textarea:active {
        color:#FFF;
        background:#000;
    }
    .dark textarea {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline: none;
    background:none;
    border:1px solid #FFF;
    padding:1.5%;
    width:97%;
    color:#FFF;
    display:block;
    border-radius: 0;
    min-height: 150px;
    font-size: .875rem;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    }
        .dark textarea:hover {
            background:#1E1E1E;
        }
        .dark textarea:focus, .dark textarea:active {
            background:#FFF;
            color:#1E1E1E;
        }

select {
    -ms-appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    margin:0px;
    margin-bottom:10px;
    padding:0px;
    appearance:none;
    outline: none;
    border: none;
    background: none;
}
    select:hover {

    }
.error-input {
    border:1px solid red !important;
}
.black-btn {
    display:inline-block;
    background:url(../images/button-bg.png) left top no-repeat;
    background-size:100% 100%;
    background-position: 0 75px;
    overflow: hidden;
    text-align: center;
    border:1px solid #EAEAEA;
    padding:10px 30px;
    cursor: pointer;
    display:inline-block;
    color:#000;
    font-weight: bold;
    font-size: .75rem;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1em;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}
    .black-btn:hover, .black-btn:focus {
        background-position: 0 0;
        color:#FFF;
        border-color:#000;
    }
    .dark .black-btn {
        display:inline-block;
        background:url(../images/button-bg.png) left top no-repeat;
        background-color:#FFF;
        background-size:100% 100%;
        background-position: 0 0;
        overflow: hidden;
        text-align: center;
        border:1px solid #EAEAEA;
        padding:10px 30px;
        display:inline-block;
        color:#FFF;
        font-weight: bold;
        font-size: .75rem;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 1em;
        -webkit-transition: all .15s ease-in-out;
        -moz-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;
    }
        .dark .black-btn:hover, .dark .black-btn:focus {
            background-position: left -75px;
            color:#000;
            border-color:#FFF;
        }
.btn {
    border:1px solid #EAEAEA;
    padding:10px 30px;
    display:inline-block;
    color:#000;
    font-weight: bold;
    font-size: .75rem;
    text-decoration: none;
    text-transform: uppercase;
}
    .btn:hover {

    }
.share-links a {
    border:1px solid #EAEAEA;
    height:45px;
    width:45px;
    display:inline-block;
    margin-left:10px;
    overflow: hidden;
    text-indent: -5000px;
    background-size:45px 90px;
    background-position: center top;
    vertical-align: middle;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    cursor: pointer;
}
.share-links .twitter {
    background-image:url(../images/twitter-btn-bg.jpg);   
}
.share-links .facebook {
    background-image:url(../images/facebook-btn-bg.jpg);   
}
.share-links .dribbble {
    background-image:url(../images/dribbble-btn-bg.jpg);   
}
.share-links .github {
    background-image:url(../images/github-btn-bg.jpg);   
}
    .share-links a:hover {
        background-position: center bottom;
        border:1px solid #000;
    }
.nav-previous a, .nav-next a, #next-btn a, #prev-btn a {
    border:1px solid #EAEAEA;
    height:45px;
    width:45px;
    display:inline-block;
    margin-left:10px;
    overflow: hidden;
    text-indent: -5000px;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-size:90px 45px;
    vertical-align: middle;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    cursor: pointer;
}
    #next-btn a, #prev-btn a {
        position: absolute;
        top:45%;
        opacity: .9;
        margin:0;
    }
    #next-btn a {
        right:10px;
    }
    #prev-btn a {
        left:10px;
    }
.nav-next a, #next-btn a {
    background-position: -46px center;
    background-image:url(../images/next-btn-bg.jpg);
}
    .nav-next:hover a, #next-btn:hover a{
        background-position: left center;
        border:1px solid #333;
    }
.nav-previous a, #prev-btn a {
    background-position: 1px center;
    background-image:url(../images/prev-btn-bg.jpg);
}
    .nav-previous:hover a, #prev-btn:hover a {
        background-position: right center;
        border:1px solid #333;
    }


/*============================================*/
/*--------------- MEDIA QUERIES --------------*/
/*============================================*/

@media screen and (max-width: 1100px) {
    #project-info{
        width:30%;
    }
}

/*-------------- iPAD LANDSCAPE --------------*/

@media screen and (max-width: 1024px) {
    .wrap {
        overflow: hidden;
    }
    .abilities-section {
        width:100%;
    }

}
@media screen and (max-width: 920px) {
    .pie-chart h3 {
        margin-bottom:0;
    }
    .abilities li .bar-graph {
        display:block;
        width:100%;
        margin-bottom:10px;
    }
    .about .abilities h4 {
        margin-top:40px;
    }
    .about .abilities {
        width:50%;
        float:right;
    }
}


/*--------------- iPAD PORTRAIT --------------*/

@media screen and (max-width: 768px) {
    #logo {
        margin-left:0;
        display:block !important;
    }
    #site-header #wordmark {
        margin-left:40px;
    }
    .wrap {
        padding:0 20px;
    }
    #content {
        padding-top:80px;
    }
    h2 {
        margin-left:0;
    }
    .article-page #article-title {
        margin-left:0;
    }
    .project-page {
        padding-top:50px;
        overflow: visible;
    }
    .project-page header {
        display:block;
    }
    .project-page #project-slides {
        opacity: 1;
    }
    .project-page #project-slides .slide {
        width:auto;
        height:auto;
        display:block;
        position: relative;
        left:auto !important;
        margin-bottom:20px;
    }
    .project-page footer {
        display: block;
    }
    .project-page #full-project {
        height: auto !important;
    }
    .project-page #project-info {
        position: relative;
        display:block;
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
        width:auto;
        border:none;
        background:#FFF;
        padding:0px 20px;
        overflow: hidden;
        opacity: 1 !important;
    }
        .project-page #project-info h1 {
            color:#000;
            font-size: 1.63rem;
        }
        .project-page #project-info h4 {
            font-size:1rem;
            color:#000;
        }
        .project-page #project-info p {
            color:#444;
        }
    .project-page .slide img {
        width:100%;
        height: auto;
        margin-bottom:0;
    }
    #next-btn, #prev-btn {
        display:none !important;
    }
    .related-projects-box {
        float:right;
        width:40%;
        vertical-align: bottom;
    }
        .related-projects-box li {
            padding:3px;
            margin-right:5px !important;
            border:1px solid #EAEAEA !important;
            -webkit-transition: all .15s ease-in-out;
            -moz-transition: all .15s ease-in-out;
            transition: all .15s ease-in-out;
        }
        #project-info #related-projects li:hover {
            border:1px solid #EAEAEA;
            box-shadow: 0px 3px 10px rgba(0,0,0,.2);
        }
    .project-page .project-details {
        float:left;
        width:50%;
        margin-right:10%;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #article-content {
        width: 100%;
    }
    .project-list li .project-meta {
        display: none;
    }
    .article-page #article-content .full-width {
        width:100%;
        max-width: 100%;
    }
    .article-page #article-content .pull-left {
        margin-left:0;
        max-width:100%;
        float:none;
        margin-right:0;
        margin-bottom:20px;
    }
    .article-page #article-content .pull-right {
        margin-right:0;
        max-width:100%;
        float:none;
        margin-left:0;
        margin-bottom:20px;
    }
    .article-page .about-me {
        margin:0;
        width:inherit;
        padding-top:20px;
        padding-bottom:20px;
        border-top:1px solid #EAEAEA;
        border-bottom:1px solid #EAEAEA;
        margin-bottom:20px;
    }
        .article-page .about-me .avatar {
            width:19%;
        }
        .article-page .about-me p {
            max-width:inherit;
            margin-bottom:0;
        }
    aside {
        display:block;
        width:inherit;
        margin-left:0;
        float:none;
    }
    #article-content {
        max-width:inherit;
        float:none;
    }
    .book-list {
        overflow: hidden;
    }
        .book-list li {
            display:inline-block;
            max-width:48%;
            float:left;
            margin-right:1%;
        }
    .box {
        display:none;
    }
    .comments {
        margin-bottom:30px;
        border-bottom:1px solid #EAEAEA;
        padding-bottom:30px;
    }
    .about aside {
        display:none;
    }
    .module {
        min-width: 0;
        
        width:90%;
    }
    .contact-me {
        padding:20px 5px 5px 5px;
    }
    .article-page blockquote {
        margin-left:0;
    }
    .project-page #next-btn, .project-page #prev-btn {
        display: none !important;
    }
    #project-slides {
        padding:0 20px 30px 20px;
        width:inherit;
        overflow: visible;
    }
    .press-logos {
        text-align: center;
    }
    .press-logos li {
        width:25%;
    }

}

@media screen and (max-width: 675px) {
    #site-header #wordmark{
        display:none;
    }
    #site-header #logo {
        display:block !important;
    }
    .book-list li img {
        max-width:25%;
        vertical-align: top;
    }
    .article-page .article-cover {
        margin-bottom:20px;
    }
    .post-date {
        margin-top:0px;
    }
    
    .module {
        min-height: 440px;
    }
    .project-list li {
        width:48%;
    }
    .project-list .thumb-3 {
        margin-right:3%;
    }
    .project-list .thumb-2, .project-list .thumb-4 {
        margin-right:0;
    }

}
@media screen and (max-width: 500px) {
    .about .abilities {
        width:100%;
        float:none;
        margin-bottom:30px;
        min-height: 200px;
    }
    .contact-me p {
        display:none;
    }
        .about .abilities h4 {
            margin-top:-20px;
        }
    .about .pie-chart {
        width:100%;
        display:block;
    }
        .about .pie-chart #skill-pie {
            margin-left:auto;
            margin-right:auto;
            text-align: center;
            width:200px;
        }
    .article-page #comment-list .meta {
        display:block;
        float:none;
        width:inherit;
    }
    .article-page #comment-list .the-comment {
        width:inherit;
        float: none;
        display:block;
    }
    .related-projects-box {
        width:inherit;
        display:block;
        float: none;
        margin-bottom:20px;
    }
    .project-page .project-details {
        width:inherit;
        display:block;
        float:none;
    }
    .project-list li {
        margin-right:0;
        width:100%;
        padding:2%;
    }

}


/*-------------- iPHONE PORTRAIT --------------*/


@media screen and (max-width: 420px) {
    #logo {
        margin-top:3px;
    }
    #site-nav li a {
        padding-top:13px;
        padding-bottom:10px;
    }
    .book-list li {
        display:block;
        max-width:inherit;
        float:none;
        margin-right:0;
    }
    #logo {
        margin-left:-4%;
    }
    #site-nav {
        width:90%;
    }
        #site-nav li {
            width:25%;
            position: relative;
            font-size:.9rem;
        }
    footer p {
        display:none;
    }
    footer .share-links {
        float:none;
        width:100%;
        text-align: center;
    }
        footer .share-links a {
            margin-left:5px;
            margin-right:5px;
        }
    .article-page blockquote {
        display:block;
        width:inherit;
        margin-left:0;
        margin-bottom:20px;
        padding-right:0;
    }
    
}






/*
-------------------------------------------------------------------
 ___ _   _ ___ _  _____   ___   _   _  _____   _      _   _  _____ 
| _ ) | | |_ _| ||_   _| / __| /_\ | ||_   _| | |    /_\ | |/ / __|
| _ \ |_| || || |__| |   \__ \/ _ \| |__| |   | |__ / _ \| ' <| _| 
|___/\___/|___|____|_|   |___/_/ \_\____|_|   |____/_/ \_\_|\_\___|

------------ OPERAM • FERVOR • SIMPLICITAS • INNOVATIO ------------

*/