/* Beautiful Jekyll inspired theme for Pelican */

body {
    font-family: 'Lora', 'Times New Roman', serif;
    font-size: 18px;
    color: #404040;
    position: relative;
    background-color: #FFF;
}

p {
    line-height: 1.5;
    margin: 30px 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
}

a {
    color: #008AFF;
}

a:hover,
a:focus {
    color: #0085A1;
}

blockquote {
    color: #808080;
    font-style: italic;
}

blockquote p:first-child {
    margin-top: 0;
}

hr.small {
    max-width: 100px;
    margin: 15px auto;
    border-width: 4px;
    border-color: #EAEAEA;
}

/* Navigation Bar - FIXED */
.navbar-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #EAEAEA;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #FFF;
    min-height: 50px;
}

.navbar-custom .navbar-brand {
    font-weight: 800;
    color: #404040 !important;
    line-height: 50px;
    padding: 0 20px;
}

.navbar-custom .navbar-nav > li > a {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #404040 !important;
    line-height: 50px;
    padding: 0 20px;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    color: #0085A1 !important;
}

@media only screen and (min-width: 768px) {
    .navbar-custom {
        background: #FFF;
        border-bottom: 1px solid #EAEAEA;
    }

    .navbar-custom .navbar-brand {
        color: #404040 !important;
        padding: 0 20px;
    }

    .navbar-custom .navbar-nav > li > a {
        color: #404040 !important;
        padding: 0 20px;
    }
}

/* The centered avatar collides with the nav links at tablet/small-desktop
   widths under Bootstrap's default 768px collapse breakpoint. Bootstrap's
   .container snaps between fixed widths (750px at >=768px, 970px at
   >=992px, 1170px at >=1200px) rather than scaling smoothly, and there
   isn't enough room for the nav links until the 1170px tier, so push the
   hamburger menu out to 1200px instead of switching to the full inline
   nav at 768px. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .navbar-header {
        float: none;
    }

    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
        margin-right: -15px;
        margin-left: -15px;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

    .navbar-nav > li {
        float: none;
    }

    .navbar-right {
        float: none !important;
    }
}

/* Multi-level navigation links */
.navbar-custom .nav .navlinks-container {
    position: relative;
}

.navbar-custom .nav .navlinks-parent:after {
    content: " \25BC";
}

.navbar-custom .nav .navlinks-children {
    width: 100%;
    display: none;
    word-break: break-word;
}

.navbar-custom .nav .navlinks-container .navlinks-children a {
    display: block;
    padding: 10px;
    padding-left: 30px;
    background-color: #F5F5F5;
    text-decoration: none !important;
    border-width: 0 1px 1px 1px;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #404040;
}

.navbar-custom .nav .navlinks-container .navlinks-children a:hover,
.navbar-custom .nav .navlinks-container .navlinks-children a:focus {
    color: #0085A1;
}

@media only screen and (max-width: 1199px) {
    .navbar-custom .nav .navlinks-container.show-children {
        background: rgba(0, 0, 0, 0.2);
    }

    .navbar-custom .nav .navlinks-container.show-children .navlinks-children {
        display: block;
    }
}

@media only screen and (min-width: 1200px) {
    .navbar-custom .nav .navlinks-container {
        text-align: center;
        min-width: 180px;
    }

    .navbar-custom .nav .navlinks-container:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .navbar-custom .nav .navlinks-container:hover .navlinks-children {
        display: block;
    }

    .navbar-custom .nav .navlinks-children {
        position: absolute;
    }

    .navbar-custom .nav .navlinks-container .navlinks-children a {
        padding-left: 10px;
        border: 1px solid #eaeaea;
        border-width: 0 1px 1px;
    }
}

/* Header */
.intro-header {
    background-color: transparent;
    margin-bottom: 20px;
    padding-top: 80px;
}

@media only screen and (min-width: 768px) {
    .intro-header {
        padding-top: 130px;
    }
}

.intro-header .site-heading {
    padding: 0 0 50px;
    color: #404040;
    text-align: center;
}

.intro-header .post-heading,
.intro-header .page-heading {
    padding: 0 0 50px;
}

.intro-header .site-heading h1 {
    margin-top: 0;
    font-size: 50px;
    color: #404040;
}

.intro-header .site-heading .subheading {
    font-size: 27px;
    line-height: 1.1;
    display: block;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    margin: 10px 0 0;
    color: #808080;
}

@media only screen and (min-width: 768px) {
    .intro-header .site-heading h1 {
        font-size: 80px;
    }
}

/* Avatar - overlaps the bottom edge of the navbar */
.navbar-custom .avatar-container {
    position: absolute;
    left: 50%;
    width: 50px;
    margin-top: -25px;
}

.navbar-custom .avatar-container .avatar-img-border {
    width: 100%;
    border-radius: 50%;
    margin-left: -50%;
    display: inline-block;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.navbar-custom .avatar-container .avatar-img {
    width: 100%;
    border-radius: 50%;
    display: block;
}

@media only screen and (min-width: 768px) {
    .navbar-custom .avatar-container {
        width: 100px;
        margin-top: -50px;
    }

    .navbar-custom .avatar-container .avatar-img-border {
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
    }
}

.navbar-custom.top-nav-expanded .avatar-container {
    display: none;
}

/* Posts */
.post-preview {
    margin-bottom: 30px;
}

.post-preview > a {
    color: #404040;
}

.post-preview > a:focus,
.post-preview > a:hover {
    text-decoration: none;
    color: #0085A1;
}

.post-preview > a > .post-title {
    font-size: 30px;
    margin-top: 30px;
    margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    .post-preview > a > .post-title {
        font-size: 36px;
    }
}

.post-preview .post-meta {
    color: #808080;
    font-size: 18px;
    font-style: italic;
    margin-top: 0;
}

.post-preview .post-entry {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.post-preview .read-more {
    font-weight: 800;
}

/* Post and page headers */
.intro-header .post-heading h1,
.intro-header .page-heading h1 {
    margin-top: 0;
    font-size: 35px;
    line-height: 1.1;
    color: #404040;
}

.intro-header .post-heading .post-meta {
    color: #808080;
    font-style: italic;
}

@media only screen and (min-width: 768px) {
    .intro-header .post-heading h1,
    .intro-header .page-heading h1 {
        font-size: 50px;
    }
}

/* Article pages */
article .post-content {
    margin: 30px 0;
}

article .post-content h2 {
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 20px;
}

article .post-content h3 {
    font-size: 26px;
    margin-top: 30px;
}

article .post-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

article .post-tags {
    margin: 30px 0;
    color: #808080;
}

article .post-share {
    margin: 30px 0;
}

article .post-share a {
    margin-right: 15px;
}

/* Pagination */
.pager {
    margin: 20px 0 0;
}

.pager li > a,
.pager li > span {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 10px 5px;
    background-color: #FFF;
    border-radius: 0;
    color: #404040;
}

@media only screen and (min-width: 768px) {
    .pager li > a,
    .pager li > span {
        padding: 15px 25px;
    }
}

.pager li > a:hover,
.pager li > a:focus {
    color: #FFF;
    background-color: #0085A1;
    border: 1px solid #0085A1;
}

/* Footer */
footer {
    padding: 30px 0;
    border-top: 1px solid #EAEAEA;
    margin-top: 50px;
    font-size: 14px;
    background-color: #F5F5F5;
}

@media only screen and (min-width: 768px) {
    footer {
        padding: 50px 0;
    }

    footer .copyright {
        font-size: 16px;
    }
}

footer .list-inline {
    margin: 0;
    padding: 0;
}

footer .copyright {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center;
    margin-bottom: 0;
}

footer .theme-by {
    text-align: center;
    margin: 10px 0 0;
}

.fa-stack {
    color: #808080;
}

.fa-stack:hover {
    color: #0085A1;
}