/*
Theme Name: Rochen's Blog
Theme URI: https://rochen.com/blog/
Description: This is just a lovely WordPress theme for Rochen
Author: Rochen
Author URI: https://www.rochen.com
Version: 2
*/



.hero-blog {text-align:center;}
.hero-heading {color:#00416B; max-width:800px; margin:0 auto 20px auto;}
.hero-text {margin-top:10px; margin-bottom:30px; color:#333;}
    @media (max-width:75em) {.hero-heading, .hero-text {margin-left:5%; padding-right:5%;}}

.posts {margin-bottom:40px;} .row-gutters>.column {padding-bottom:20px;}
.post-image {display:block;}
.post-image img {transition:all .2s ease-in-out;}
.post-image:hover img {transform: scale(.99);}
h4.post-title {margin-top:10px;}

a {transition:all .1s ease-in-out;}

.pagination {text-align:center; padding:3rem 0;}
.pagination h2 {display:none;}
.page-numbers {margin:0; padding:5px 10px; border:1px solid #f5f5f5; border-radius:3px;}
.pagination .current {background:#00416B; color:#FFF;}

@media (min-width: 75em) {.page-content {padding-top:20px;}}

.container-narrow {margin-top:20px; max-width: 700px; line-height:1.8; font-size:1rem;}
.post p span, .post ul li span {color:#666 !important; font-weight: 300 !important;}


.post a {color:#0af; border-bottom:1px dashed #e0e0e0;}
.post a:hover {color:#000;}

.post img {max-width:100%;}

.post ul {margin-left:25px; list-style:none;}
.post ul li {position:relative;}
.post ul li::before {display:block; content:""; height:3px; width:8px; background-color:#e0e0e0; position:absolute; top:12px; left:-25px; border-radius:2px;}

.post ol {margin-left:25px; list-style:none;}
.post ol li {counter-increment: step-counter; position:relative;}
.post ol li::before {content: counter(step-counter); color:#e0e0e0; font-family:Montserrat,sans-serif; font-weight:400; position:absolute; left:-25px; border-radius:2px;}

blockquote {margin:30px 0; border-left:3px solid #0af; padding:20px 10% 10px 10%;}
blockquote em {font-style: italic !important;}

code {padding:1rem 2rem; color:#666; font-family:'Courier New', monospace}

.alignleft, .alignright {margin: 1rem 0;}
.aligncenter {display:block; margin-left:auto; margin-right:auto; margin-bottom:1rem;}
.alignnone {margin-bottom: 1rem;}
@media(min-width: 64em) {
    .alignleft {float:left; margin:0 1rem 1rem 0;}
    .alignright {float:right;  margin:0 0 1rem 1rem;}
}
.wp-caption {text-align:center; font-size:.875rem; border:1px solid #f5f5f5; padding:4px;}
.wp-caption p {margin:0;}

.cta {margin:4rem 0; min-height:80px; font-family:Montserrat,sans-serif; font-size:1.25rem; font-weight:400; color:#00416B;}
.cta a {color:#0af;} .cta a:hover {color:#000;}
.cta_std {text-align:center;}
.cta_web {background:url('//cdn.rochen.com/images/icon-web.png') no-repeat 0 0;}
.cta_mcs {background:url('//cdn.rochen.com/images/icon-mcs.png') no-repeat 0 0;}
.cta_web, .cta_mcs {padding-left:140px; background-size:90px;}
@media (max-width:50em) {
    .cta {font-size:1rem;}
    .cta_web, .cta_mcs {padding-left:100px; background-size:80px;}
}

.reset {clear:both; margin:2rem 0;}


.share-embed {clear:both; margin:4rem 0; padding:2rem;}
    @media (min-width: 75em) { .share-embed {padding:2rem;} }
.share-buttons {margin:0; padding:0; list-style:none;}
.share-buttons > li {display:inline-block; width:40px; height:40px; margin:1rem .5rem;}
    @media (min-width: 48em) { .share-buttons > li {width: auto;} }
.share-buttons a {
    margin:0 10px;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 0.75rem;
    text-align: center;
    text-decoration: none;
    text-transform:uppercase;
    border:none;
    border-radius:2px;
}
    @media (min-width: 48em) { .share-buttons a {padding:7px 10px 7px 35px; font-size:1rem;} }
.share-buttons li span {color:#fff !important;}
.element-invisible {display:none;}
.share-buttons .share-facebook a {background:#306199; }
.share-buttons .share-twitter a {background:#26c4f1;}
.share-buttons .share-linkedin a {background:#007bb6;}
.share-buttons .share-email a {background:#00416B;}
.share-buttons .share-icon {position:absolute; top:9px; left:9px;}
.share-buttons .share-icon svg {width:24px; height:24px; fill:#fff;}
.share-buttons .share-text {visibility:hidden; color:#fff;}

@media (min-width: 48em) {
    .share-buttons .share-text {
        visibility: visible;
    }
}
.share-buttons a:hover {opacity:.9; transform:scale(.95);}

.meta {display:block; margin:1rem 0;}
.meta-date {color:#999;}
.meta-cats a, .meta-tags a {margin-bottom:4px; display:inline-block; padding:.35rem 1rem; border-radius:3px; font-size:.825rem;}
.meta-cats a {background-color:#e4f3fa; color:#0af;}
.meta-tags a {background-color:#ebf0f3; color:#00416B;}
.meta-cats a:hover, .meta-tags a:hover {transform:scale(.95);}

.article-nav {clear:both; margin-top:3rem;}
.article-nav .column {background-color:#f5f5f5; font-family:Montserrat,sans-serif; font-weight:400;}
.previous-text, .next-text {display:block; color:#999; font-size:.725rem;}
.previous-title, .next-title {font-size:1.5rem; line-height:1.4;}
.single .previous, .single .next {border-top:2px solid#fff; padding:2rem;}
    @media (min-width: 48em) { .single .previous, .single .next {padding:4rem 6rem;}}
.single .previous {border-right:2px solid#fff; }
.single .next {border-left:2px solid#fff; text-align:right;}