/*** Fonts *******************************************/
    body, .basic { font-family: 'Open Sans', sans-serif !important; }
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .heading { Font-Family: 'Alegreya', Serif !important; }
    code, pre, .mono, dd { Font-Family: 'Cousine', monospace !important; }

/*** Colors ******************************************/

:root {
    --dark-color:           #2F3025;
        --dark-color-75:        rgba(47, 48, 37, 0.75);
    --medium-color:         #9A9B9B;
        --medium-color-75:        rgba(154, 155, 155, 0.75);
    --light-color:          #CCCED6;
        --light-color-75:        rgba(204, 206, 214, 0.75);
    --pure-color:           #fCfBfD;
        --pure-color-75:        rgba(236,235,237,0.75);
    --accent-color:         #C96906;
        --accent-color-75:      rgba(203, 99, 8, 0.75);
    --accent2-color:        #047A7A;
        --accent2-color-75:     rgba(4, 122, 122, 0.75);
    --warning-color:        #f9e500;
        --warning-color-75:        rgba(249, 229, 0, 0.75);
    --error-color:          #a7062e;
        --error-color-75:        rgba(167, 6, 46, 0.75);
}

.filter-dark, .filter-dark-hover:hover      { filter: invert(8%) sepia(14%) saturate(574%) hue-rotate(182deg) brightness(93%) contrast(92%);}
.filter-medium, .filter-medium-hover:hover  { filter: invert(81%) sepia(0%) saturate(1%) hue-rotate(189deg) brightness(86%) contrast(83%);}
.filter-light, .filter-light-hover:hover    { filter: invert(93%) sepia(5%) saturate(134%) hue-rotate(191deg) brightness(103%) contrast(85%); }
.filter-pure, .filter-pure-hover:hover      { filter: invert(100%) sepia(1%) saturate(3%) hue-rotate(3deg) brightness(107%) contrast(95%); }
.filter-accent, .filter-accent-hover:hover  { filter: invert(37%) sepia(75%) saturate(3347%) hue-rotate(19deg) brightness(99%) contrast(94%); }
.filter-accent2, .filter-accent2-hover:hover{ filter: invert(26%) sepia(60%) saturate(1472%) hue-rotate(143deg) brightness(96%) contrast(101%); }

.dark-text, .dark-text-hover:hover                  { color: var(--dark-color)!important; }
.medium-text, .medium-text-hover:hover              { color: var(--medium-color)!important; }
.light-text, .light-text-hover:hover                { color: var(--light-color)!important; }
.pure-text, .pure-text-hover:hover                  { color: var(--pure-color)!important; }
.accent-text, .accent-text-hover:hover              { color: var(--accent-color)!important; }
.accent2-text, .accent2-text-hover:hover            { color: var(--accent2-color)!important; }
.warning-text, .warning-text-hover:hover            { color: var(--warning-color)!important; }
.error-text, .error-text-hover:hover                { color: var(--error-color)!important; }
.dark-bg, .dark-bg-hover:hover                      { background-color: var(--dark-color)!important; }
.medium-bg, .medium-bg-hover:hover                  { background-color: var(--medium-color)!important; }
.light-bg, .light-bg-hover:hover                    { background-color: var(--light-color)!important; }
.pure-bg, .pure-bg-hover:hover                      { background-color: var(--pure-color)!important; }
.accent-bg, .accent-bg-hover:hover                  { background-color: var(--accent-color)!important; }
.accent2-bg, .accent2-bg-hover:hover                { background-color: var(--accent2-color)!important; }
.warning-bg, .warning-bg-hover:hover                { background-color: var(--warning-color)!important; }
.error-bg, .error-bg-hover:hover                    { background-color: var(--error-color)!important; }
.transparent-bg, .transparent-bg-hover:hover        { background-color: transparent!important; }
.dark-border, .dark-border-hover:hover              { border-color: var(--dark-color)!important; }
.medium-border, .medium-border-hover:hover          { border-color: var(--medium-color)!important; }
.light-border, .light-border-hover:hover            { border-color: var(--light-color)!important; }
.pure-border, .pure-border-hover:hover              { border-color: var(--pure-color)!important; }
.accent-border, .accent-border-hover:hover          { border-color: var(--accent-color)!important; }
.accent2-border, .accent2-border-hover:hover        { border-color: var(--accent2-color)!important; }
.warning-border, .warning-border-hover:hover        { border-color: var(--warning-color)!important; }
.error-border, .error-border-hover:hover            { border-color: var(--error-color)!important; }
.transparent-border, .transparent-border-hover:hover{ border-color: transparent!important; }


body                { color: var(--dark-color); background-color: var(--light-color); }
a, a:link           { color: var(--accent2-color); }
a:active            { color: var(--accent-color); }
a:visited           { color: var(--accent2-color); }
a:hover,a:focus     { color: var(--accent-color); }

blockquote          { color: var(--dark-color-75);  border-color: var(--accent2-color); }
td, th              { border-color: var(--pure-color); }
code                { background-color: var(--light-color); }
pre                 { background-color: var(--light-color); border-color: var(--accent2-color); }
hr                  { border-color: var(--light-color); }   

a.btn.cc-bg-primary, button.cc-bg-primary { color: var(--pure-color); background-color: var(--accent2-color); border-color: var(--accent2-color); }
a.btn.cc-bg-primary:hover, button.cc-bg-primary:hover { background-color:  var(--accent-color); border-color:  var(--accent-color); color:  var(--pure-color); }
a.btn.cc-bg-secondary, button.cc-bg-secondary { color: var(--pure-color); background-color: var(--dark-color); border-color: var(--dark-color); }
a.btn.cc-bg-secondary:hover, button.cc-bg-secondary:hover { background-color:  var(--dark-color); border-color:  var(--dark-color); color:  var(--pure-color); }

article { background: var(--pure-color); }
#sidebar .widget { background: var(--pure-color); }

/*****************************/

.container { max-width: 120rem; margin: 0 auto; }
body  { background-image: url('/img/squares.png'); }
#site-header { background-image: url('/img/grey.png'); }
#branding { padding: 3rem 0;  }
#brand-logo { margin-bottom: -1.5rem }
#brand-logo,
#brand-name {width: 25rem; height: auto;}
.brand-link { display: block;}
#site-brand { display: inline-block; padding: 0; }
#site-title { margin: 0; line-height: .85   ; font-size: 7rem; }
#site-subtitle { margin: 0; line-height: 1; font-size: 2.5rem; }

#navbar { padding: 0; } 
#navbar ul { margin: 0; padding: 0; }
#navbar ul li { list-style: none; display: inline-block; padding: 0; }
#navbar ul li a { display: block; padding: 1.5rem; line-height: 1 }

#menu-checkbox, .toggle		{ display: none; }
@media screen and (max-width:767px) {
    #sidebar { padding-left: 0; }
    #sidebar .widget li { display: inline-block; }
    #sidebar .widget li::after { content: " | " ; }
    #sidebar .widget li:last-child::after { content: ""; }
    
    .toggle { display: inline-block; }
    .toggle:hover {}
    #menu-checkbox:not(:checked) + label { display: inline-block; }
    #menu-checkbox:not(:checked) + label li { 
        opacity: 0;
        visibility: invisible;
        display: none;
    }
    #menu-checkbox:checked + label li {
        opacity: 1;
        visibility: visible;
        display: block;
    }
    #menu-checkbox:checked + label {}
    .header-menu {
        transition: all .3s linear;
        top: 4.4rem!important;
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 1000;
    }
    .header-menu li {
        opacity: 0;
        visibility: hidden;
        padding: .1rem 0!important;
    }
    .header-menu li a {
        padding: .2rem 0 .2rem 2rem!important;
        display: block;
    }
    #menu-checkbox:checked + label #header-share {
        text-align: center;
    }
    #menu-checkbox:checked + label #header-share li { 
        display: inline-block; 
    }

    #content article .list-post-content footer { position: relative!important; margin:0!important; padding-left:0!important; padding-right:0!important; }
    .list-post-content { padding: 0; }
}


#content article { margin: 3rem auto; padding: 3rem 3rem; border-radius: .5rem; }
#content #articles { padding: 0 }

#content #sidebar { padding-top: 0; padding-right: 0; padding-bottom: 0;}
#content #sidebar .widget { margin: 3rem auto; padding: 3rem 3rem; border-radius: .5rem; }
#content #sidebar .widget h2 { padding-bottom: 0; }
#content #sidebar .widget ul { margin-top: 0; }

#content #terms-title { margin: 3rem 0 0; padding-top: 2rem; padding-bottom: 2rem; border-radius: .5rem; }
#content article .post-title {}
#content article .post-title h1 { font-size:3.5rem; line-height: 1;}
#content article .post-meta { }
#content article .post-count,
#content article .post-category { float: right; line-height: 3.5rem; }
#content article .post-category a { padding-left: 1rem; }
#content article .post-image { margin: 1.5rem 0 0 0; padding-left: 0; padding-bottom: 0; padding-top: 0; }
#content article .list-post-content { margin: 0 0 0 0; padding-bottom: 3rem;  position: relative; }
#content article .list-post-content footer { bottom: 0; left: 0; right: 0; position: absolute; margin: 1.5rem 0 0 0; padding: 1.5rem 1.5rem 0 1.5rem ; }

#content article .post-content {}
#content article .post-footer { padding: 3rem 0 0 0; }
#content article .post-tags { padding: 0; }
#content article .post-tags ul { list-style: none; margin: 0; }
#content article .post-tags ul li { display: inline-block; }
#content article .post-tags ul li a { padding: 0 .5rem;  }
#content article .post-tags ul li a::before { content: "#"; }
#content article .post-share { padding: 0; }
#content article .post-share ul { list-style: none; margin: 0; }
#content article .post-share ul li { display: inline-block; }
#content article .post-share ul li a { padding: 0 .5rem;  }
#content article p { margin: 2rem 0; }
#content article p:first-child { margin-top: 0; }
#content article p:last-child { margin-bottom: 0; }
#content #articles article:last-child { margin-bottom: 0; }

#content article.terms .post-image { margin: 0; padding: 0; min-height: 20rem; }
#content article.terms .post-image a { height: 100%; display: block; background-position: center; background-size: cover; background-repeat: no-repeat; }
#content article.terms .post-content { padding-top: 0; padding-bottom: 0; }
#content article.terms .post-entry { position: relative; height: 100%; }
#content article.terms button { position: absolute; bottom: 0; right: 0; }

#prevnext { margin-top: 3rem; }
#comments { margin-top: 3rem; margin-bottom: 3rem;  }
#comments .container { padding: 3rem; border-radius: .5rem; }
#taxonomy-meta { margin-top: 3rem; }
#taxonomy-image { padding: 3rem 1.5rem 3rem 3rem; }

#pagination { margin: 6rem 0; }
#pagination ul { margin: 0; }
#pagination ul li { display: inline-block; list-style: none; }
#pagination ul li a {}

.author-social { list-style: none; margin-bottom: 0; }
.author-social li { display: inline-block; padding: 0 2rem 0 0; }

#footer-share {}
#footer-share ul { list-style: none; }
#footer-share ul li { display: inline-block; }
#footer-share ul li a { font-size: 3rem; line-height: 1; padding: 0 1rem; }

#site-footer { padding: 3rem 0; }

figure { margin: 0; position: relative; }
figure figcaption {
    background: var(--pure-color-75);
    color: var(--dark-color);
    box-sizing: border-box;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 5px;
    padding: 1rem;
}
blockquote { border-radius: .75rem; border-left: .3rem solid; border-right: .3rem solid; }
.screen-reader-text { display: none; }

pre, code { padding: 1rem; max-width: 100%; overflow: scroll; }