/**
 * Pico's Default Theme
 *
 * Pico's default theme is a bit bare - but that's intentional! The default
 * theme isn't meant for production use, it's actually a template for you to
 * design your own theme around.
 *
 * Pico is a stupidly simple, blazing fast, flat file CMS.
 *
 * @author  Gilbert Pellegrom
 * @author  Daniel Rudolf
 * @link    http://picocms.org
 * @license http://opensource.org/licenses/MIT The MIT License
 * @version 2.1
 */

* {
    box-sizing: border-box;
    border: 0 none;
    margin: 0;
    padding: 0;
}

.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0 none;
}

.slide {
    overflow-y: hidden !important;
    -webkit-transition: height .5s ease-in !important;
            transition: height .5s ease-in !important;
}

/*** BASIC LAYOUT ***/

html, body { height: 100%; }

/*** Header, Main, Footer ***/
/** ------------------------------------------------ **/
body { display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }
#header, #footer { flex: 0 0 auto; }

/*** Main ***/
/** ------------------------------------------------ **/
.container {
    max-width: 60%;
    padding: 0 0.5em;
    margin: 0 auto;
    transition: all .2s ease-in;
}

/** Widescreen Adjustments **/
/** ------------------------------------------------ **/
.widescreen .container { max-width: 90%; }

.fullwide .container {
    max-width: 100%;
    padding: 0;
}

#main-container {
    transition: margin-left .5s;
}

.content {
    transition: all .2s ease-in;
}

/*
.widescreen #header .container {
    max-width: calc(72em + 25%);
}*/

/* very ugly overflow fix, avoid this whenever possible!
#main .container { 
    overflow-x: inherit;
    margin-right: 2em;
    margin-left: 2em;
} */

/** MAIN One Column **/
/** ------------------------------------------------ **/
#main > #one > .content {
    width: 90%;
    padding: 4em 1em 4em 1em;
}

#main > .content {
    width: 90%;
    padding: 4em 1em 4em 1em;
    margin: 0 auto;
}
/** MAIN Two Column **/
/** ------------------------------------------------ **/
#main > #two { display: flex; flex-direction: row; flex-wrap: wrap; }

#main > #two > .content {
    width: 70%;
    padding: 4em 0em 4em 0em;
    flex: 2 1 auto;
}

#main > #two > .side {
    width: 20%;
    padding: 4em 0em 4em 0em;
    flex: 1 1 auto;
    margin-right: 1em;
}

/** MAIN Three Column **/
/** ------------------------------------------------ **/
#main > #three { display: flex; flex-direction: row; flex-wrap: wrap; }

#main > #three > .content {
    width: 60%;
    padding: 2em 1em 4em 1em;
}

#main > #three > .side {
    width: 20%;
    padding: 2em 0em 4em 0em;
}

/** MAIN **/
/** PROGRESSBAR **/
/** -------------------------------------------------------------------------------------------------------- **/
#progress {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 11;
    background-color: rgba(255, 255, 255, 1);
}

#progressbar {
    --scrollAmount: 0%;
    
    /* background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    width: var(--scrollAmount); */
  
    background: linear-gradient(to right, #F24E1E var(--scrollAmount), transparent 0);
    width: 100%; 
    height: 10px;
    position: relative;
  }

/** TAXBAR **/
/** ------------------------------------------------ **/
/* A Container placed on the Top. It keeps links to document relevant taxonomies */
/** ------------------------------------------------ **/

#taxbar {
    height: 1.7em;
}

.docnav {
    position: relative;
    top: -1.5em;
    padding: 0 1em;
}

.widescreen .docnav .container {
    max-width: 80%;
    margin: 0 auto;
}

#taxbar .anibox {
    position: relative;
    width: 0;
    height: 100%;
    z-index: 0;
    background-image: linear-gradient(to right top, rgba(245, 245, 245, 0.95), rgba(245, 245, 245, 1));
    box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.3), 0 15px 15px 5px rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgb(204,204,204);
    animation-name: SlideToRight;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
}

.docbox {
    font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;;
    font-size: 0.8em;
    width: 60%;
    display: flex;
    align-content: stretch;
    flex-flow: row wrap;
    margin: 0 auto;
    padding: 0 0.5em;
}

.docbox a span { color: rgb(68, 68, 68); }

.docbox div { margin: auto 0.5em; }

.label { visibility: hidden; }

/** SIDEBARs **/
/** -------------------------------------------------------------------------------------------------------- **/
.side > .contentbox {
    border: 1px solid #ccc;
    border-radius: 0.2em;
    margin-bottom: 1em;
}

/** SIDEBARs Widgets **/
/** ------------------------------------------------ **/
.widget {
    /* background-color: rgba(47,126,168,0.05); */
    background-color: #f5f5f5;
    padding: 0.5em;
    font-size: 1em;
}

.widget p {  
    margin-bottom: 0em;
    font-size: 1em;
}

.widget .title {
    font-size: 1.1rem;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

.widget .title img {
    margin-left: auto;
}

.widget hr {
    border: 1px solid rgb(204, 220, 220);
    margin-bottom: 0.5em;
}

/** SIDEBAR WIDGET Tags **/
/** ------------------------------------------------ **/

#tagbox {
    position: sticky;
    top: 3em;
}

/** SIDEBAR - TOC **/
/** ------------------------------------------------ **/
#toc {
    border: 0;
    background-color: rgba(47,126,168,0);;
    margin: 0;
    padding: 0;
    font-size: 100%;
}

.toc .contentbox {
    position: sticky;
    top: 3em;
}

.toc-none, .toc-bullets, .toc-numbers {
  padding-inline-start: 0px;
  padding-block-end: 2px;
  padding-block-start: 0px;
}

.toc ol {
    margin-bottom: 0em;
    margin-left: 1em;
}

.toc ol:first-child {
    margin-top: 0.5em;
}

.toc li {
    text-align: unset;
}

.toc ol:only-child {
    margin-bottom: 1em;
}

.toc-heading {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.5em;
}
a.content-anchor:target:before {
    margin-top: 2em;
}

#mySidenav {
    width: auto;
}

.closebtn {
    visibility: hidden;
    position: absolute;
}

.openbtn {
    visibility: hidden;
    position: absolute;
}

/** Sidebar - METABOX **/
/** ------------------------------------------------ **/
.metabox * { 
    text-align: end; 
}

.metabox .row p:first-child {
    text-align: start;
}

.metabox .row p:last-child {
    width: auto;
    text-transform: uppercase;
    flex-shrink: 0;
}

/** Sidebar - TAGBOX **/
/** ------------------------------------------------ **/
#tagitems {
    display: flex;
    flex-flow: wrap;
    justify-content: stretch;
    gap: 5px;
}

#tagitems a {
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    border: 1px solid #ccc;
    font-style: italic;
    background-color: rgba(255, 255, 255, 1);
}

#tagitems a span {
    color: #444;
}

#tagitems a:hover {
    /* color: #C25F36; */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/** -------------------------------------------------------------------------------------------------------- **/
/** General Configuration **/

/** Flex Axis Definition **/
/** ------------------------------------------------ **/
.row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0.5em 0;
}

.row .title {
    margin-top: 0;
    margin-bottom: 0;
}

.col {
    display: flex;
    flex-direction: column;
    margin: 0 1em;
    /* justify-content: space-between; */
}

.col p * {
    max-width: 100%;
    word-wrap: anywhere;
}

.col.half {
    max-width: 50%;
}

.half .col {
    padding: 0 1em 0 1em;
    margin: 0 1em 0 1em;
    width: max-content;
}

.row p * {
    max-width: 100%;
    word-wrap: anywhere;
}

/** DOCUMENT - Layout **/
/** -------------------------------------------------------------------------------------------------------- **/

#contentbanner {
    position: relative;
    height: auto;
    margin-bottom: 0.5em;
}

/** Document BANNER Image **/
/** ------------------------------------------------ **/
#contentbanner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* filter: blur(1px); */
    object-position: left;
}

#contentbanner {
    position: relative;
    margin: 0 auto;
}

#contentbanner div {
    position: absolute;
    bottom: 5px;
    color: #fff;
    padding: 5px 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

#contentbanner div p {
    line-height: normal;
    margin-bottom: 0;
}

#manual-banner {
    position: relative;
    margin: 0 auto;
}

#manual-banner img {
    width: 100%;
    height: auto;
}

#manual-banner div {
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
}

#manual-banner div p {
    line-height: normal;
    margin-bottom: 0;
    padding: 5px 10px;
}

#code-banner {
    position: relative;
    margin: 0 auto;
}

#code-banner div {
    position: absolute;
    bottom: 5px;
    color: #fff;
    padding: 5px 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

#code-banner div p {
    line-height: normal;
    margin-bottom: 0;
}
#code-banner ul {
    padding-left: 0em;
}

#code-banner .tags-list * {
    font-family: monospace;
    color:#ccc;
}

#code-banner .tags-list a {
    margin-right: 0.2em;
}

#code-banner .tags-list *:hover {
    color:#fff;
}
/** Document Navigation **/
/** ------------------------------------------------ **/
#nav-page {
    position: sticky;
    right: 2em;
    top: 2em;
    max-width: 2em;
}

.content .contentbox img.small {
    width: 50%;
    float: left;
    margin: 0px 20px 0px 0px;
} 

.content .contentbox p.clear {
    clear: both;
}

.content .contentbox img.wide {
    width: 100%;
    clear: both;
    margin: 0 0 0 0;
} 

/*
@media (max-width: 973px ) {
    #main .container {
        margin-left: 2em;
    }
}

@media (max-width: 767px) {
    #main .container {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 973px) {
    #main .container {
        margin-left: auto;
        margin-right: auto;
    }
}
*/

/*** PAGES - Shows Collections of Pages in Lists ***/
/** -------------------------------------------------------------------------------------------------------- **/
/* .blog-list { margin-top: 1em; } */

.blog-list ul {
    padding: 0;
    display: flex;
    flex-flow: wrap;
}

.blog-list li {
    list-style: none;
    margin: 0.5em;
    padding: 0;
    transition: box-shadow 0.2s;
    flex: 1 2;
}

.blog-list ul .withImage { flex: 3 1; }

.blog-list ul .topic-item { flex: 60% 1; }

.withImage .blog-box {
    display: flex;
    flex-flow: column wrap;
}

.blog-box {
    height: 100%;
    text-align: left;
    background-color: #f5f5f5;
    border: 1px solid #cdd; 
}

.blog-box p { margin-bottom: 0.5em; }

.blog-box * { 
    word-wrap: break-word;
    text-align: start;
}

.blog-box img.banner-foto { 
    object-fit: cover;
    object-position: left;
}

.blog-box img.banner { 
    object-fit: cover;
    object-position: left;
    height: 2em;
    width: 100%;
}

.blog-item { 
    padding: 0.5em;
}

.blog-item h3 { font-size: 1.2em; }

.blog-item p { font-size: small; }

.blog-item p.date { font-size: smaller; }

.tag-item .blog-item {
    max-width: 100%;
}

.withIcon {
    position: relative;
}

.blog-box .icons {
    padding: 0.25em;
}

.blog-box .icons .icon {
    height: 25px;
    margin: 0 0.25em;
}

.blog-list li:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/** Tags Page **/

.tag-item .blog-item h2 {
    font-size: 1.2em;
}



/*** SITE HEADER  ***/
/** -------------------------------------------------------------------------------------------------------- **/

#header { background: rgb(47, 126, 168); }

/** SITE Logo & Title **/
/** ------------------------------------------------ **/

#title, #logo {
    float: left;
    padding: 3em 1em 1em 0;
}

#title * { margin: 0; color: #fff; }
#title p { font-style: italic; }

#logo { height: 9em; }
#logo * { display: block; height: 100%; }
#logo img { min-width: 4.8em; }

#logo + #title h1 { margin: 0.8rem 0; }
#logo + #title.tagline h1 { margin: 0; }

/*** Navigation ***/
/** ------------------------------------------------ **/
#nav {
    padding: 3em 0em 0em 2em;
    text-align: right;
}

#nav ul {
    list-style: none;
    margin: 0.5em 0 0.2em 0;
    padding: 0;
}

#nav ul li {
    margin-left: 0.6em;
    font-weight: 400;
    font-size: 0.9rem;
    text-align: right;
}

.navi a * { color: #afe1da; }

.navi ul { list-style: none;}

.navi ul li span { font-size: 0.8em; }

#nav a, #nav-toggle { color: #afe1da; }

#nav .active a, #nav a:hover, #nav-toggle:hover { color: #fff; }

#nav-toggle { display: none; } 

#nav-static li { display: inline-block; }

#nav-dynamic { 
    justify-content: end; 
    margin-bottom: 0;
}

.icon-menu::before {
    color: #fff;
  }

.nav-icon { width: 2em; }

.nav-button { display: flex; }

.nav-button a {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav-button span { 
    margin:auto; 
    font-style: italic;
}

#nav-dynamic .active a span { color: #fff; }
#nav-dynamic a:hover span { color: #C25F36; }

/* IE8 + IE9 clearfix */
#header > .container:after {
    content: '';
    display: block;
    clear: both;
    margin-bottom: 1em;
}

#searchbox {
    float: left;
    padding: 0 0 1em 0;
}

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

/** Basic Layout **/
/** ------------------------------------------------ **/
#footer {
    background: #4e4e4e;
    color: #C0C0C0;
    padding: 1.5em 0;
}

#footer a { 
    color: #fff;
    -webkit-transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
            transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
}

#footer a:hover { 
    color: #ff9669;
    -webkit-transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
            transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
}

#footer p {
    margin: 0;
}

#footer h3 {
    font-size: 1.1rem;
}

#footer p, #footer ul li * {
    font-size: 0.8rem;
}

#footer .social {
    float: right;
}

#footer .container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

#footer .container .site-links {
    flex: 3 2 auto;
}

#footer .container .site-legals {
    flex: 1 3 auto;
}

#footer .container .site-legals * {
    text-align: right;
}

/*** Configuration for EXTRA SMALL DEVICES ***/
/** -------------------------------------------------------------------------------------------------------- **/
@media screen and (min-width: 767px) {
    #mySidenav.contentbox {
        width: auto;
    }
    .nav-button a {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

@media screen and (max-width: 1200px) {
    #header .container {
        max-width: 98%;
    }

    .row {
        flex-direction: column;
    }

    #nav-types ul.row {
        flex-direction: row;
    }

    .col.half {
        max-width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    .widescreen .container {
        max-width: 100%;
        padding: 0 0.5em;
      }

    .fullwide .container {
        max-width: 100%;
        padding: 0;
    }

    #main { 
        padding: 0em 0 0em;
    }

    #main .content {
        width: 100%;
        padding: 0;
    }

    #main > #two { flex-direction: column; }

    #main > #two > .side {
        width: 100%;
        padding: 0 0 0 0;
    }

    #main > #two > .content {
        width: 100%;
        padding: 0 0 0 0;
    }

    #main > #three { flex-direction: column-reverse; }

    #main > #three > .side {
        width: 100%;
        padding: 0 0 0 0;
    }

    #main > #three > .content {
        width: 100%;
        padding:0 0 0 0;
    }

    #nav {
        padding: 3em 0em 0em 2em;
    }

    #nav ul li {
        text-align: unset;
    }

    #nav-types ul.row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .nav-button a {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .js #nav-toggle {
        display: block;
        float: right;
        padding: 3em 1em 1em 1em;
        font-size: 1.2em;
        cursor: pointer;
    }

    .js #nav-toggle > * { vertical-align: middle;  }

}

@media screen and (max-width: 767px) {

    .widescreen .container {
        max-width: 100%;
        padding: 0 0.5em;
      }

    .fullwide .container {
        max-width: 100%;
        padding: 0;
    }

    #main { 
        padding: 0em 0 0em;
    }

    #main .content {
        width: 100%;
        padding: 0;
    }

    #main > #two { flex-direction: column; }

    #main > #two > .side {
        width: 100%;
        padding: 0 0 0 0;
    }

    #main > #two > .content {
        width: 100%;
        padding: 0 0 0 0;
    }

    #main > #three { flex-direction: column-reverse; }

    #main > #three > .side {
        width: 100%;
        padding: 0 0 0 0;
    }

    #main > #three > .content {
        width: 100%;
        padding:0 0 0 0;
    }

    #title { 
        padding: 0.5em 1.5em 0.5em 0;
        margin: 0.5em 0 0.5em 0;
    }

    #logo { 
        display: block;
        height: 4.8em;
        margin: 0.5em 0 0.5em 0;
        padding: 0.5em 1.5em 0.5em 0;
        float: left;
    }

    #nav {
        clear: both;
        padding: 3em 0 0 0;
        text-align: left;
    }

    #nav ul li {
        text-align: unset;
        margin-left: 0;
        margin-right: 0.6em;
        padding-left: 0;
    }

    #nav ul li a {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    /* .nav-button a {
        display: flex;
        flex-direction: row;
        justify-content: center;
    } */

    .js #nav-toggle {
        display: block;
        float: right;
        font-size: 1.2em;
        cursor: pointer;
        padding: 3em 1em 1em 1em;
    }

    .js #nav-toggle > * { vertical-align: middle;  }

    .navi {
        float: right;
        margin-bottom: 0.5em;
    }

    #nav-types {
        box-sizing: content-box;
    }

    #nav-types ul {
        padding-left: 0;
    }
    #nav-types ul.row {
        flex-direction: column;
    }
    #mySidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }

    #mySidenav.contentbox {
        background-color: rgb(245, 245, 245);
    }
    
    .closebtn {
        visibility: visible;
    }

    .openbtn {
        visibility: visible;
        position: fixed;
        padding: 0.5em;
        font-size: 1.2em;
        background-color: #f5f5f5;
        border: 1px solid #cdd;
        line-height: normal;
    }

    #mySidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

    
    #footer { padding: 0.5em 0.5em 1em 0.5em; }
    /* #footer p { padding: 0.5em 0; } */
    #footer .social { padding: 0; }
}

/*** TYPOGRAPHY ***/
/** -------------------------------------------------------------------------------------------------------- **/
html { font-size: 16px; }

body {
    font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    color: #444;
}

p, td, th, li, dd {
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

p, hr, table, .table-responsive, ul, dl, dd, pre, blockquote, fieldset {
    margin-bottom: 1em;
}

.typs-list p, .kats-list p, .tags-list p {
    /* list-style-position: inside; */
    margin-bottom: 0;
}

#home .typs-list li *, #home .kats-list li *, #home .tags-list li * {
    float: left;
}

.typs-list li::after {
    clear: left;
}

a {
    color: rgb(47, 126, 168);
    text-decoration: none;
    -webkit-transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
            transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
}

a:hover { 
    color: #C25F36;
    -webkit-transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
            transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in; 
}

a span {
    color: rgb(47, 126, 168);
    text-decoration: none;
    -webkit-transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
            transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
}

a:hover span { 
    color: #C25F36;
    -webkit-transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in;
            transition: color .2s ease-in, background-color .2s ease-in, box-shadow .1s ease-in; 
}

a img { 
    filter: none;
    -webkit-transition: filter .2s ease-in;
    transition: filter .2s ease-in;
}

a:hover img { 
    filter: invert(100%);
    -webkit-transition: filter .2s ease-in;
    transition: filter .2s ease-in;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.3em;
    font-weight: 400;
    /* color: #333; */
}

h1 { font-size: 1.9rem; }
.contentbox h1 code { font-size: 0.9em; }

h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; font-weight: 600;}
h5 { font-size: 1rem; }
h6 { font-size: 1rem; font-weight: normal; font-style: italic; }

img { max-width: 100%; }

hr {
    border: 0.15em solid #f5f5f5;
    border-radius: 0.3em;
    background: #f5f5f5;
}

abbr { text-decoration: underline dotted; }

.date {
    color:#707070;
    font-size: smaller;
}

/* Code Block Corner for displaying programming language */
.pcpg div.corner { margin: 0.5em; }

/*** UTILITIES ***/
/** -------------------------------------------------------------------------------------------------------- **/

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

.image { display: block; margin: 0 auto; }
.image.xsmall { width: 20%; }
.image.small { width: 40%; }
.image.large { width: 60%; }
.image.xlarge { width: 80%; }
.image.float-left { float: left; margin: 1em 2em 1em 0; }
.image.float-right { float: right; margin: 1em 0 1em 2em; }
.image img { display: block; width: 100%; }

@media (max-width: 767px) {
    .image.xsmall { width: 60%; }
    .image.small { width: 80%; }
    .image.large, .image.xlarge { width: 100%; }
    .image.float-left, .image.float-right { float: none; margin: 0 auto; }
}

/** -------------------------------------------------------------------------------------------------------- **/

/*** TABLES ***/

table { border-spacing: 0; }

td, th {
    padding: 0.4em 1em;
    vertical-align: top;
}
th {
    font-weight: bold;
    text-align: center;
    background: #f5f5f5;
    color: #333;
}

td, th {                                         border: 1px solid #ccc; }
tr:not(:last-child) td, tr:not(:last-child) th { border-bottom: 0 none; }
thead tr:last-child th {                         border-bottom: 0 none; }
td:not(:last-child), th:not(:last-child) {       border-right: 0 none; }

tr:first-child td:first-child, tr:first-child th:first-child { border-top-left-radius: 0.2em; }
tr:first-child td:last-child, tr:first-child th:last-child {   border-top-right-radius: 0.2em; }
tbody tr:last-child td:first-child {                           border-bottom-left-radius: 0.2em; }
tbody tr:last-child td:last-child {                            border-bottom-right-radius: 0.2em; }
table thead + tbody tr:first-child td {                        border-radius: 0 !important; }

.table-responsive { overflow-x: none; }
.table-responsive > table { margin-bottom: 0; }

/*** LISTS ***/

ol, ul {
    list-style-position: outside;
    padding-left: 1em;
}

ul.collection {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    justify-content: space-around;
    margin-bottom: 0;
    flex-wrap: wrap;
}

ul.collection li {
    padding-left: 0;
    margin: 0.25em;
    flex: 1 2 auto;
    transition: box-shadow 0.2s;
}

ul.collection li:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.active a .blog-box {
    /*background-color: rgba(47,126,168,1);
    background-image: url("https://dev.dreinasen.org/themes/mytheme/img/banner-codesnippets.png");
    filter: drop-shadow(16px 16px 20px red) invert(75%); */
    border: 1px solid #F24E1E;
    background-image: linear-gradient(rgba(245, 245, 245,1), rgba(225,225,220,1));
    /* color:rgb(68, 68, 68);
    color: rgb(47, 126, 168); */
}

#manual-coll {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/*** Listen ***/

ol { padding-left: 1em; }
li { padding-left: 0.5em; }

dt { font-weight: bold; }
dd { margin-left: 2em; }


/* Footer - Listen */

#footer ul {
    list-style-type: none;
    padding-left: 0;
}

#footer ul li::before {
    float: left;
}

#footer ul li::after {
    clear: both;
}

/*** CODE ***/

code {
    margin: 0 0.1em;
    padding: 0.1em 0.2em;
    border: 1px solid #ccc;
    border-radius: 0.1em;
    background: #f5f5f5;
    font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
    font-size: 0.8rem;
    line-height: 1.9824;
}

pre {
    padding: 0 1em;
    border: 1px solid #ccc;
    border-radius: 0.2em;
    background: #f5f5f5;
}
pre code {
    display: block;
    margin: 0;
    padding: 1.1111em 0;
    border: 0 none;
    background: transparent;
    overflow-x: auto;
    line-height: 1.4;
}

/*** BLOCKQUOTE ***/

blockquote {
    font-style: italic;
    margin-left: 1em;
    padding-left: 1em;
    border-left: 0.5em solid #f5f5f5;
}

/*** FORMS ***/

label, fieldset legend { font-weight: bold; }

input:not([type="checkbox"]):not([type="radio"]), button, select, textarea, fieldset, fieldset legend {
    border: 1px solid #ccc;
    border-radius: 0.2em;
    background: #fff;
    -webkit-transition: none .2s ease-in;
            transition: none .2s ease-in;
    -webkit-transition-property: border-color, background, box-shadow;
            transition-property: border-color, background, box-shadow;
}

input:not([type="checkbox"]):not([type="radio"]), button, select, textarea {
    padding: 0.5em 1em;
    outline: 0 none;
    
}
input:focus:not([type="checkbox"]):not([type="radio"]), button:focus, select:focus, textarea:focus {
    border-color: #2EAE9B;
    box-shadow: 0 0 8px #2EAE9B;
}
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, button:focus,
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    background: #f5f5f5;
    cursor: pointer;
}

textarea, select[multiple] {
    vertical-align: bottom;
    overflow: auto;
}

fieldset {
    padding: 1em;
    background: #f5f5f5;
}
fieldset legend { padding: 0 0.5em; }

fieldset label, fieldset input, fieldset button,
fieldset select, fieldset textarea {
    margin: 0.2em 0.5em;
}
fieldset label:first-child, fieldset input:first-child, fieldset button:first-child,
fieldset select:first-child, fieldset textarea:first-child {
    margin-left: 0;
}
fieldset label:last-child, fieldset input:last-child, fieldset button:last-child,
fieldset select:last-child, fieldset textarea:last-child {
    margin-right: 0;
}

/* Firefox input size fix */
input::-moz-focus-inner, button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/** -------------------------------------------------------------------------------------------------------- **/
/** Animations **/
/** -------------------------------------------------------------------------------------------------------- **/

@keyframes SlideToRight {
    from {  
            width: 0;
        }
    to {    
            width: 100%;
        }
}