/*
Theme Name: Clever Eng Blog
Author: RedStamp Agency
Author URI: http://redstamp.ca/
Description:
Version: 1.3.0
*/

// Beautified by http://www.cleancss.com/css-beautify/

@charset "UTF-8";

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
@font-face {
  font-family: Journal;
  src: url('fonts/journal.eot');
  src: url('fonts/journal.eot?#iefix') format('embedded-opentype'), url('fonts/journal.woff') format('woff'), url('fonts/journal.ttf') format('truetype'), url('fonts/journal.svg#Journal') format('svg');
  font-weight: normal;
  font-style: normal;
}
.font-journal {
  font-family: 'Journal';
}
.container,
body {
    position: relative
}
.button,
.pagination .page-numbers:hover,
a {
    text-decoration: none
}
.blog-article.full .blog-article-content ul,
.content ul {
    list-style-image: url(images/bullet.svg)
}
.content blockquote,
.content h2,
.footer,
.header.category h2,
.navigation {
    text-transform: uppercase
}
* {
    box-sizing: border-box
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 62.5%
}
body {
    height: 100%;
    background: #FFF;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 1.6rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}
blockquote,
figure,
h1,
h2,
h3,
h4,
ol,
p,
ul {
    margin: 0;
    padding: 0
}
li,
main {
    display: block
}
h1,
h2,
h3,
h4 {
    font-size: inherit
}
strong {
    font-weight: 700
}
a,
button {
    color: inherit;
    transition: .3s
}
button {
    overflow: visible;
    border: 0;
    font: inherit;
    -webkit-font-smoothing: inherit;
    letter-spacing: inherit;
    background: 0 0;
    cursor: pointer
}
::-moz-focus-inner {
    padding: 0;
    border: 0
}
:focus {
    outline: 0
}
img {
    max-width: 100%;
    height: auto;
    border: 0
}
.container {
    width: 100%;
    height: auto;
    margin: 0 auto
}
@media (min-width: 768px) {
    .container [class^=col] {
        float: left;
        min-height: 1px
    }
    .container .col-1-1 {
        width: 100%
    }
    .container .col-4-5 {
        width: 80%
    }
    .container .col-3-4 {
        width: 75%
    }
    .container .col-2-3 {
        width: 66.66%
    }
    .container .col-1-2 {
        width: 50%
    }
    .container .col-1-3 {
        width: 33.33%
    }
    .container .col-1-4 {
        width: 25%
    }
    .container .col-1-5 {
        width: 20%
    }
    .container .col-1-6 {
        width: 16.667%
    }
    .container .col-1-7 {
        width: 14.28%
    }
    .container .col-1-8 {
        width: 12.5%
    }
    .container .col-1-9 {
        width: 11.1%
    }
    .container .col-1-10 {
        width: 10%
    }
    .container .col-1-11 {
        width: 9.09%
    }
    .container .col-1-12 {
        width: 8.33%
    }
    .container {
        max-width: 960px
    }
    .container.container-pad {
        padding-right: 10px
    }
    .container.container-pad [class^=col] {
        padding: 0 0 10px 10px
    }
    .blog-article footer a {
        float: right
    }
}
.container.container-pad {
    padding-right: 20px
}
.container.container-pad [class^=col] {
    padding: 0 0 20px 20px
}
.container:after {
    content: "";
    display: table;
    clear: both
}
.button {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    transition: all .1s ease
}
.button.button-1 {
    background: #4274F6;
    color: #FFF
}
.button.button-1:hover {
    background: #2775ba
}
.button.button-1:active {
    background: #1e5b90
}
.button.button-2 {
    background: #2E67AC;
    color: #FFF
}
.button.button-2:hover {
    background: #234f84
}
.button.button-2:active {
    background: #18375c
}
.button.button-3 {
    background: #5794E5;
    color: #FFF
}
.button.button-3:hover {
    background: #2b78de
}
.button.button-3:active {
    background: #1d60b9
}
.button.button-4 {
    background: #8a8d8f;
    color: #FFF
}
.button.button-4:hover {
    background: #707476
}
.button.button-4:active {
    background: #585a5b
}
.blog-article {
    padding: 0 0 0 20px;
    margin: 0 auto 75px
}
@media (min-width: 960px) {
    .blog-article {
        padding: 0 0 0 10px
    }
}
.blog-article header h1 a {
    color: #4a4a4a
}
.blog-article header address {
    font-size: 1.5rem;
    font-style: normal;
    padding: 0 0 2.3rem
}
.blog-article footer {
    border-bottom: 1px solid #DDD;
    line-height: 3.7rem;
    min-height: 3.7rem
}
.blog-article footer a {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 3.3rem
}
.blog-article footer .author {
    padding: 35px 0;
    text-align: center
}
.blog-article footer .author figure {
    width: 75px;
    height: 75px;
    border-radius: 75px;
    overflow: hidden;
    display: inline-block
}
.blog-article .post-categories:after,
.blog-article footer:after {
    display: block;
    clear: both;
    content: ''
}
.blog-article footer .author figcaption {
    line-height: 2.1rem
}
@media (min-width: 768px) {
    .blog-article footer .author {
        text-align: left
    }
    .blog-article footer .author figure {
        float: left;
        margin-right: 25px
    }
    .blog-article footer .author figcaption {
        width: calc(100% - 100px);
        float: left;
        margin-top: 5px
    }
    .blog-article footer .author:after {
        clear: both;
        content: '';
        display: block
    }
}
.blog-article .post-categories {
    padding: 0 0 1.6rem
}
.blog-article .post-categories li {
    padding: 0;
    margin: 0 0 5px;
    line-height: normal
}
.blog-article .post-categories li:before {
    display: none
}
.blog-article .post-categories li a {
    background: #51ABCB;
    padding: 5px 10px 4px;
    font-size: 1.2rem;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
    color: #FFF;
    float: none
}
.blog-article .post-categories li a:hover {
    background: #3692b3;
    text-decoration: none
}
.blog-article .post-categories li a.case-study {
    background: #f1d145
}
.blog-article .post-categories li a.case-study:hover {
    background: #edc516
}
.blog-article .post-categories li a.classroom {
    background: #f43264
}
.blog-article .post-categories li a.classroom:hover {
    background: #e70c45
}
.blog-article .post-categories li a.clever {
    background: #2d76bc
}
.blog-article .post-categories li a.clever:hover {
    background: #235c93
}
.blog-article .post-categories li a.devops {
    background: #97d16e
}
.blog-article .post-categories li a.devops:hover {
    background: #7bc547
}
.blog-article .post-categories li a.node {
    background: #28e5ec
}
.blog-article .post-categories li a.node:hover {
    background: #12c8cf
}
.blog-article .post-categories li a.general {
    background: #e074cb
}
.blog-article .post-categories li a.general:hover {
    background: #d74abb
}
.blog-article .post-categories li a.privacy {
    background: #fdaf5b
}
.blog-article .post-categories li a.privacy:hover {
    background: #fc9629
}
.blog-article .post-categories li a.golang {
    background: #6fc0fc
}
.blog-article .post-categories li a.golang:hover {
    background: #3daafb
}
.blog-article .post-categories li a.security {
    background: #449a4b
}
.blog-article .post-categories li a.security:hover {
    background: #34773a
}
.blog-article .post-categories li a.diversity {
    background: #b595fb
}
.blog-article .post-categories li a.diversity:hover {
    background: #9364f9
}
@media (min-width: 768px) {
    .blog-article .post-categories li {
        margin: 0 5px 0 0;
        float: left
    }
    .blog-article .post-categories li:last-child {
        margin-right: 0
    }
    .blog-article.full figure.featured-image {
        height: auto
    }
    .blog-article figure.featured-image {
        height: 265px
    }
}
.blog-article.full .blog-article-content ul {
    margin-left: 60px;
    padding-left: 0
}
.blog-article.full .blog-article-content li {
    display: list-item;
    padding-left: 0
}
.blog-article.full .blog-article-content,
.blog-article.full .disqus {
    max-width: 700px
}
.blog-article.full footer {
    border-top: 3px solid #F7F7F7;
    border-bottom: 3px solid #F7F7F7
}
.blog-article figure.featured-image {
    width: 100%;
    overflow: hidden;
    margin: 0 0 3rem
}
.blog-article figure.featured-image img {
    width: 100%;
    padding: 0;
    display: block
}
.content .social-bar ul li:before,
.content .social-bar-container {
    display: none
}
@media (min-width: 960px) {
    .blog-article {
        width: 778px
    }
    .blog-article.full {
        float: right
    }
    .blog-article.full h1 {
        font-size: 5rem;
        line-height: 5rem
    }
    .blog-article.full address {
        padding: 0 0 3.5rem
    }
}
.content .social-bar ul {
    padding: 0
}
.content .social-bar ul li {
    float: left;
    font-size: 1.3rem;
    margin: 0 0 16px;
    padding: 0 0 0 15px;
    text-align: center
}
.content .social-bar ul li:first-child {
    padding-left: 0
}
.content .social-bar ul li.facebook a.icon {
    background-image: url(images/icons/facebook.svg);
    background-size: 10px
}
.content .social-bar ul li.facebook a.icon:hover {
    background-image: url(images/icons/facebook-hover.svg)
}
.content .social-bar ul li.twitter a.icon {
    background-image: url(images/icons/twitter.svg)
}
.content .social-bar ul li.twitter a.icon:hover {
    background-image: url(images/icons/twitter-hover.svg)
}
.content .social-bar ul li.linkedin a.icon {
    background-image: url(images/icons/linkedin.svg)
}
.content .social-bar ul li.linkedin a.icon:hover {
    background-image: url(images/icons/linkedin-hover.svg)
}
.content .social-bar ul li.email a.icon {
    background-image: url(images/icons/email.svg)
}
.content .social-bar ul li.email a.icon:hover {
    background-image: url(images/icons/email-hover.svg)
}
.content .social-bar ul li.rss {
    color: #5794E5
}
.content .social-bar ul li.rss a.icon {
    background-image: url(images/icons/rss.svg);
    background-size: 15px
}
.content .social-bar ul li.rss a.icon:hover {
    background-image: url(images/icons/rss-hover.svg)
}
.content .social-bar a.icon {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #84CFE0;
    text-indent: -9999px;
    background-color: #EBF9FF;
    background-size: 25px;
    background-position: center;
    background-repeat: no-repeat;
    transition: all .2s
}
.content .social-bar a.icon:hover {
    background-color: #84CFE0
}
.content .social-bar:after {
    clear: both;
    content: '';
    display: block
}
@media (min-width: 960px) {
    .content .social-bar-container {
        float: left;
        position: relative;
        display: block
    }
    .content .social-bar {
        position: relative;
        top: 150px
    }
    .content .social-bar ul li {
        float: none;
        text-align: left;
        padding: 0
    }
    .content .social-bar a {
        margin-right: 8px;
        display: inline-block
    }
    .content .social-bar.mobile {
        display: none
    }
    .content .social-bar.fixed {
        position: fixed;
        top: auto
    }
}
.pagination {
    text-align: center;
    line-height: 1.6rem;
    font-size: 1.6rem
}
.pagination .screen-reader-text {
    display: none
}
.pagination .page-numbers {
    padding: 3px 7px;
    margin: 0 5px;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
    color: #ccc
}
.pagination .page-numbers.current {
    background: #4274F6;
    color: #FFF
}
.pagination .page-numbers:hover {
    color: #4274F6
}
.footer,
.footer a,
.header {
    color: #FFF
}
.pagination .next,
.pagination .prev {
    text-indent: -9999px;
    padding: 3px 10px
}
.pagination .next:hover,
.pagination .prev:hover {
    background-color: #FFF;
    border-color: #4274F6
}
.pagination .prev {
    border: 2px solid #4274F6;
    background: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAALCAMAAAB1RTwXAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAABQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvhQpvgAAADxPfQOAAAAEnRSTlMAX/oidikBjwanBLolA7ikjnR+/VF/AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAADpJREFUCNc1zEsCgCAMA9EoAgX55v6H1daazbxVAN1xButFxjcp0yCFhnrzQ6OjDwdkOpCWA9g/9PkBmrwDOi2fVSoAAAAASUVORK5CYII=) center no-repeat
}
.pagination .next {
    border: 2px solid #e6e6e6;
    background: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAMAAACETmeaAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMAAAAAMyxPQAAAAEnRSTlMA6rMKyxXcJOs19kr0TDfdJel+buuaAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAADJJREFUCNdjYGRiZgABISEWVggtxMYOoYU4OCG0EBc3hBbigfJ5IfJ8YHl+AST9ghDzAId1Ax5/7Km8AAAAAElFTkSuQmCC) center no-repeat
}
.header {
    width: 100%;
    height: 70px;
    padding: 5px;
    background: #4274F6;
    text-align: left;
    position: fixed;
    top: 0;
    z-index: 12;
    overflow: hidden
}
.header h1 {
    line-height: 55px;
    font-size: 3.1rem;
    padding-top: 5px
}
.header h1 img {
    width: 190px;
    vertical-align: middle;
    margin-top: -10px
}
.header .toggle-nav {
    width: 40px;
    height: 40px;
    display: block;
    float: right;
    margin: 10px 0
}
.header .toggle-nav div {
    width: 30px;
    height: 30px;
    margin: 12px 0 12px auto
}
.header .toggle-nav span {
    width: 25px;
    height: 2px;
    display: block;
    margin: 0 0 7px;
    background: #FFF;
    transition: all .2s ease;
    transform-origin: left
}
.header.category {
    height: 137px;
    z-index: 11
}
.header.category h2 {
    font-weight: 800;
    text-align: center;
    font-size: 1.8rem;
    padding: 35px 0
}
@media (min-width: 960px) {
    .header.category {
        height: 261px
    }
    .header.category h2 {
        width: 100%;
        position: absolute;
        top: 127px;
        font-size: 3rem
    }
}
.header.nav-open {
    height: auto;
    z-index: 20
}
.header.nav-open .navigation {
    display: block
}
.header.nav-open .toggle-nav span:nth-child(1) {
    transform: rotateZ(45deg)
}
.header.nav-open .toggle-nav span:nth-child(2) {
    opacity: 0
}
.header.nav-open .toggle-nav span:nth-child(3) {
    transform: rotateZ(-45deg)
}
.header.scrolled {
    height: 70px;
    z-index: 12
}
.footer {
    width: 100%;
    background: #4274F6;
    font-size: 1.2rem;
    font-weight: 600
}
.footer p,
.footer ul li {
    line-height: 4rem;
    text-align: center
}
@media (min-width: 960px) {
    .header h1 {
        float: left
    }
    .header .toggle-nav {
        display: none
    }
    .footer {
        height: 55px;
        line-height: 55px
    }
    .footer ul li {
        line-height: 5.5rem;
        float: left;
        padding-right: 38px
    }
    .footer p {
        line-height: 5.5rem;
        text-align: right;
        float: right
    }
}
.content {
    background: #FFF;
    padding: 65px 0;
    margin-top: 70px;
    color: #4a4a4a;
    position: relative;
    z-index: 11
}
.content.category {
    top: 137px;
    margin-top: 0
}
.content a {
    color: #5794E5
}
.content a:hover {
    text-decoration: underline
}
.content h1 {
    font-size: 3.2rem;
    padding: 0 0 1.1rem
}
.content h1 a:hover {
    color: #4274F6;
    text-decoration: none
}
.content h2 {
    font-size: 2.8rem;
    padding: 2rem 0 4.5rem
}
.content h3 {
    font-size: 2.4rem;
    padding: 0 0 1.5rem
}
.content blockquote {
    text-align: center;
    font-size: 2.8rem;
    color: #4a4a4a;
    font-weight: 800;
    line-height: 4.2rem;
    padding: 30px 0 0
}
.content blockquote:before {
    width: 72px;
    height: 72px;
    border-radius: 72px;
    background: #4274F6;
    display: block;
    content: '”';
    text-align: center;
    font-size: 10rem;
    color: #FFF;
    line-height: 126px;
    font-weight: 600;
    margin: 0 auto 30px
}
.content blockquote:after {
    width: 63px;
    height: 4px;
    background: #4274F6;
    margin: 33px auto 57px;
    content: "";
    display: block
}
.content p {
    font-size: 1.8rem;
    line-height: 2.6rem;
    padding: 0 0 2.5rem
}
.content ol,
.content ul {
    font-size: 1.8rem;
    line-height: 3.3rem;
    padding: 0 0 30px 30px;
    color: #706D71
}
.content ol li,
.content ul li {
    position: relative;
    padding: 0 0 0 23px
}
.content ol li:before,
.content ul li:before {
    position: absolute;
    left: 0
}
@media (min-width: 960px) {
    .content.category {
        top: 261px
    }
    .content ol,
    .content ul {
        padding-left: 60px
    }
}
.content img {
    max-width: 100%;
    display: block
}
.content img.aligncenter {
    margin: 0 auto
}
.content img.alignleft {
    float: left;
    margin: 3rem 5rem 3rem 0
}
.content img.alignright {
    float: right;
    margin: 3rem 0 3rem 5rem
}
.navigation {
    margin-top: 30px;
    font-weight: 700;
    display: none
}
.navigation li {
    margin: 2.5rem 0;
    text-align: center
}

.navigation li:last-child {
    width: 100%
}
.navigation li:last-child a {
    width: 70%;
    margin: 0 auto;
    padding: 14px 0;
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .07);
    display: block
}
@media (min-width: 960px) {
    .navigation {
        display: block;
        margin: 0;
        height: 6rem;
        font-size: 1.4rem
    }
    .navigation ul {
        float: right
    }
    .navigation li {
        margin: 0 3.5rem 0 0;
        float: left;
        margin-top: 1px;
        margin-right: 30px;
        line-height: 6rem
    }
    .navigation li a {
        position: relative
    }

    .navigation li a.active {
        border-bottom: 3px solid;
        padding-bottom: 5px;
    }

    .navigation li a:hover:after {
        display: block;
        height: 3px;
        background: #FFF;
        width: 100%;
        content: '';
        margin-top: -18px
    }
    .navigation li:last-child {
        width: auto;
        margin-right: 0
    }
    .navigation li:last-child a {
        width: auto;
        margin: auto;
        display: inline;
        background: 0 0;
        border: 1px solid #FFF;
        border-radius: 4rem;
        height: 4rem;
        padding: 13px 21px 10px;
        transition: none
    }
    .navigation li:last-child a:hover {
        background: #FFF;
        color: #4274F6
    }
    .navigation li:last-child a:hover:after {
        display: none
    }
}