:root {
    --bloembraaden-default-paper-color: #fff;
    --bloembraaden-default-key-color: #000;
}

/**
 * Reset
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
main, section, article, nav, figure, figcaption,
header, footer, aside, mark, details, summary, time,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    color: var(--bloembraaden-default-key-color);
}

html, body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6em;
    background-color: var(--bloembraaden-default-paper-color);
}

fieldset, legend {
    display: inline;
    vertical-align: top;
}

img {
    display: block;
    line-height: 0;
    border: 0;
}

em {
    font-style: italic;
}

strong {
    font-weight: 700;
}

s {
    text-decoration: line-through;
}

/**
 * basic margins
 */
p, h2, h3, h4, h5, h6 {
    margin-top: .8rem;
}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
    margin-top: 0;
}

ol li {
    margin-bottom: .6rem;
}

ol label {
    display: block;
}

/* links and wannabe links */
a, .peatcms-link {
    text-decoration: underline;
    cursor: pointer;
}

/**
 * formatting headers
 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
}

h1 {
    font-size: 2em;
    font-weight: bold;
}

h2 {
    font-size: 1.8em;
    font-weight: bold;
}

h3 {
    font-size: 1.6em;
    font-weight: bold;
}

h3 {
    font-size: 1.4em;
    font-weight: bold;
}

h4 {
    font-size: 1.2em;
    font-weight: bold;
}

h5 {
    font-weight: bold;
}

h6 {
    font-weight: bold;
}

[data-peatcms-placeholder] {
    display: none !important;
}

html, body {
    height: 100%;
    width: 100%;
    font-size: 16px;
}

/**
 * handy standard css classes
 */
.nodisplay,
.display-none {
    display: none;
}

/* nice embed https://stackoverflow.com/a/20130011 */
.embed-wrapper {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #CCC
}

.embed-iframe {
    position: relative;
    padding-top: 56.25%; /* 16 × 9 */
}

.embed-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.attention-grabber,
.peatcms_attention_grabber {
    animation: peatcms_attention_grabber .2s 6 ease-in-out; /* 6 = iteration count, used to be infinite but removing the class does not stop the animation in IE11 then */
}

@keyframes peatcms_attention_grabber {
    0% {
        transform: translateX(0)
    }
    25% {
        transform: translateX(-6px)
    }
    75% {
        transform: translateX(6px)
    }
    100% {
        transform: translateX(0)
    }
}

.peatcms_signal_change {
    animation: peatcms_pulsating .3s 2 ease-in;
}

/**
 * Messages
 */
#message_wrapper {
    position: fixed;
    width: 80vw;
    top: 0;
    left: 10vw;
    display: block;
    z-index: 101;
}

.message {
    position: relative;
    display: block;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: var(--bloembraaden-default-paper-color);
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .28);
}

.log {
    color: rgb(48, 63, 123);
}

.warn {
    color: rgb(216, 136, 16);
}

.error {
    color: rgb(200, 0, 0);
    font-weight: bold;
}

.note {
    background-color: #ffc;
}

.message .button.close::before {
    content: '×';
}

.message .button.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
    color: var(--bloembraaden-default-paper-color);
    border-radius: 5px; /* same as message */
    background-color: rgb(90, 90, 90);
    font-weight: bold;
    width: auto;
    height: auto;
}

.message .button.close:hover {
    background-color: rgb(0, 180, 20);
}

/**
 * prompts
 */
#bloembraaden-prompt-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

#bloembraaden-prompt-wrapper .bloembraaden-prompt {
    background-color: rgb(255, 255, 255);
    padding: 1em;
    border-radius: 1em;
    max-width: 400px;
}

/**
 * from parser
 */
.nowrap {
    white-space: nowrap;
}

/**
 * Form elements
 */
textarea,
button,
input[type="submit"],
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="password"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    border: none;
    background: transparent;
    color: #484844;
    padding: .25em;
    margin-bottom: .25em;
    outline: none;
    outline-offset: -1px;
}

textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="password"] {
    outline: solid 1px #484844;
}

button,
input[type="submit"] {
    padding: .25em .5em;
}

@keyframes peatcms_pulsating {
    25% {
        opacity: 1;
    }
    75% {
        opacity: .31;
    }
}

.bloembraaden-fade-out {
    animation: bloembraaden_fade_out .5s forwards ease-in-out;
}

@keyframes bloembraaden_fade_out {
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.bloembraaden-fade-in {
    animation: bloembraaden_fade_in .4s forwards ease-in-out;
}

@keyframes bloembraaden_fade_in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/**
 * Pretty select lists
 */
body select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    border: none;
    padding: .25em 1.6rem .25em .25em;
    margin-bottom: .25em;
    /* border for select can only be done with outline */
    outline: none;
    outline-offset: -1px;
    /* the arrow image (https://www.filamentgroup.com/lab/select-css.html): */
    /* the color is the 484844 slightly after 'fill' */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23484844%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    /*linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);*/
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

body select::-ms-expand {
    display: none;
}

/**
 * slider https://cheewebdevelopment.com/boilerplate-vanilla-javascript-content-slider/
 */

.peatcms-slideshow-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    transition: 300ms;
}

/* ensure that we can adjust z-index or position elements absolutely within the slideshow itself (e.g., navigation) */
.peatcms-slideshow {
    position: relative;
}

/* set all slides as absolute positioning so they will stack on top of each other, and hidden from one another */
.peatcms-slide-entry {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity .6s;
}

.peatcms-slide-entry.active { /* this is how we transition the slides in/out */
    opacity: 1;
    visibility: visible;
}

/* set up our basic left/right navigation, would should ideally be vertically centered */

.peatcms-slide-nav {
    list-style: none;
}

.peatcms-slide-nav li {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    color: #333;
    background-color: var(--bloembraaden-default-paper-color);
    font-size: 25px;
}

/* pull our navigation out of the slider container to avoid z-index issues */

#peatcms-prev-slide {
    left: 0;
}

#peatcms-next-slide {
    right: 0;
}

/* src sets */
[data-srcset] {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0; /* will be set to 1 by javascript */
    transition: opacity .4s ease;
}

/* carousel */
.carousel {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.carousel .slide {
    flex: 0 0 auto;
    cursor: grab;
    height: 100%;
}

.carousel[data-mouse-is-down] .slide {
    cursor: grabbing;
}

/* just common sense */
[hidden] {
    display: none;
}

/* prevent CLS */
.cf-turnstile {
    height: 72.5px;
}

.cf-turnstile.invisible {
    max-height: 0;
    max-width: 0;
}
html {
    transition: background-color 1s ease;
    background-color: #ffffff;
}

body {
    background: transparent; /* as long as html is bigger everywhere... */
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
main, section, article, nav, figure, figcaption,
header, footer, aside, mark, details, summary, time,
table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: Cambria, Garamond, serif;
    line-height: 2.2em;
    color: #262627;
}

.wrapper-end {
    clear: both;
    max-height: 0;
    visibility: hidden;
}

#header {
    text-align: center;
}

#header h2 {
    line-height: 0;
    font-size: 1rem;
    font-style: italic;
    margin-top: 80px;
    margin-bottom: 45px;
}

h1 {
    font-size: 1.3em;
    font-weight: normal;
}

h2, h3 {
    font-size: 1.15em;
    font-weight: normal;
}

li {
    list-style-type: none;
}

main {
    float: left;
    width: calc(80% - 50px);
    margin-right: 9px;
    padding: 20px;
}

#sidebar {
    width: calc(20% - 25px);
    float: right;
    position: sticky;
    top: 0;
    padding: 20px 15px 55px 10px;
    border-left: solid 1px #16147a;
    background-color: #ffffff;
    overscroll-behavior: contain;
    transition: all 1s ease;
}

#sidebar img {
    width: 100%;
}

#sidebar * {
    line-height: 1.6em;
}

section[role="doc-endnotes"] {
    margin-top: 2em;
    opacity: .8;
}

#header, footer {
    clear: both;
    float: none;
}

@media (min-width: 1400px) {
    body {
        max-width: 1200px;
        margin: 0 auto;
    }
}

.reading-time {
    height: 1em;
    max-height: 1em;
    line-height: 1em;
    font-size: .9em;
    opacity: .9;
}

picture {
    display: block;
    margin-top: 2em;
    font-size: 85%;
}

figure img {
    max-width: 100%;
    max-height: 1000px;
    height: auto;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .11);
    margin: .5rem auto;
}

form {
    width: calc(100% - 40px);
    max-width: 400px;
    padding: 20px 0;
}

form label {
    display: block;
}

form select {
    display: none; /* no selects (rating...) at the moment */
}

form textarea,
form input {
    font-size: .9rem;
    width: calc(100% - .5em);
    padding: .25em !important;
    font-family: inherit;
    display: block;
}

form input[type="submit"] {
    background-color: #16147a;
    font-weight: bold;
    width: 100%;
    color: #ffffff;
}

form textarea,
form input[type="text"],
form input[type="email"] {
    outline: solid 1px #262627;
}

form textarea {
    height: 5rem;
}

form *:focus, form *:active, form *:focus-visible {
    outline-width: 3px !important;
}

.dark-mode form textarea,
.dark-mode form input[type="text"],
.dark-mode form input[type="email"] {
    outline-color: #ffffff;
}

.dark-mode form input[type="submit"] {
    background-color: #0bf3b4;
    color: #262627;
}

.dark-mode form input {
    color: #ffffff;
}

@media (max-width: 500px) {
    form {
        background: transparent;
        width: 100%;
        padding: 20px 0;
    }
}

.cf-turnstile {
    margin-top: 14px;
}

.cta {
    background-color: #16147a;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    padding: .25em .45em;
    white-space: nowrap;
}

.dark-mode .cta {
    background-color: #0bf3b4;
    color: #262627;
}

blockquote {
    margin-left: 1.4em;
}

blockquote:before {
    content: '→ ‘';
}

blockquote:after {
    content: '’';
}

/**
 * comments
 */
.is-reply {
    margin-left: 15px;
}

.is-reply .reply {
    display: none; /* allow only one level for now */
}

.replying {
    outline: solid 1px #16147a;
    outline-offset: 9px;
}

.is-reply:not(.replying) #comments-form {
    border-left: solid 1px #16147a;
    padding-left: 15px;
    margin-left: -16px;
}

.is-reply form h3,
.replying form h3 {
    display: none;
}

.dark-mode .is-reply:not(.replying) #comments-form {
    border-left: solid 1px #0bf3b4;
}

.controls {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    margin-top: 2px;
    min-height: 1.9rem;
}

.controls .reply {
    font-size: .9rem;
    cursor: pointer;
    background-color: #16147a;
    padding: 3px 5px;
    color: #ffffff;
}

.replying .reply {
    background-color: inherit;
    color: #16147a;
}

.replying .reply:after {
    content: 'en';
}

.replying .reply:before {
    content: 'aan het ';
}

#comments hr {
    display: none;
}

.comment * {
    line-height: 1.48em;
}

.comment p.info {
    opacity: .8;
    font-size: .8rem;
    margin-top: 2px;
}

.comment p.info.admin:after {
    content: ' [admin]';
}

.dark-mode .controls .reply {
    background-color: #0bf3b4;
    color: #262627;
}

.dark-mode .replying {
    outline-color: #0bf3b4;
}

.dark-mode .replying .reply {
    background-color: #262627;
    color: #0bf3b4;
}

/**
 * messages override
 */
.dark-mode #message_wrapper .message,
#message_wrapper .message {
    color: #262627;
}

#message_wrapper * {
    border-radius: 0;
}

/**
 * footnotes system
 */
.peatcms-curr {
    font-size: .6em;
    vertical-align: top;
    padding: .2em;
    cursor: pointer;
}
.footnote-back {
    margin-left: .2em;
    cursor: pointer;
    font-weight: bold;
}

.art-attention:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 1px solid #16147a;
    animation: art_attention_wide 4000ms 1 ease-in-out; /* 1 = iteration count, used to be infinite but removing the class does not stop the animation in IE11 then */
}

.dark-mode .art-attention:after {
    border-color: #0bf3b4;
}

@keyframes art_attention {
    0% {
        width: 0;
    }
    30% {
        width: 75%;
    }
    50% {
        width: 25%;
    }
    70% {
        width: calc(100% - 40px);
    }
    90% {
        width: calc(100% - 40px);
    }
    100% {
        width: 0;
    }
}

@keyframes art_attention_wide {
    0% {
        width: 0;
    }
    30% {
        width: 750px;
    }
    50% {
        width: 250px;
    }
    70% {
        width: 1000px;
    }
    90% {
        width: 1000px;
    }
    100% {
        width: 0;
    }
}

.read-more {
    font-size: 85%;
    margin-top: 0;
}

/**
 * buttons up top
 */
#dark-mode,
#letter-sizing {
    position: fixed;
    line-height: 32px;
    top: 2px;
    z-index: 2;
    vertical-align: text-top;
    opacity: 1;
    transition: opacity ease .5s;
}

#letter-sizing > input {
    position: absolute;
    top: 18px;
    left: 10px;
    width: 200px;
}

#dark-mode {
    margin-left: 220px;
    top: 4px;
}

#sidebar-toggle,
#dark-mode {
    cursor: pointer;
}

[data-sidebar-visible] #letter-sizing,
[data-sidebar-visible] #dark-mode,
[data-peatcms-scrolled-down] #letter-sizing,
[data-peatcms-scrolled-down] #dark-mode {
    opacity: 0;
}

/**
 * sidebar becomes menu
 */
#sidebar-toggle {
    display: none;
    z-index: 2;
    position: fixed;
    font-size: 32px; /* like #dark-mode:after */
    line-height: 32px;
    width: 32px;
    height: 32px;
    fill: #262627;
    top: 7px;
    right: 10px;
}

.dark-mode #sidebar-toggle {
    fill: #ffffff;
}

/* hamburger and close alternating */
#sidebar-toggle .hamburger {
    display: block;
}

#sidebar-toggle .close {
    display: none;
}

[data-sidebar-visible] #sidebar-toggle .hamburger {
    display: none;
}

[data-sidebar-visible] #sidebar-toggle .close {
    display: block;
}

/**
 * dark-mode...
 */
.dark-mode {
    background-color: #262627;
}

.dark-mode * {
    color: #ffffff;
}

.dark-mode #sidebar {
    border-left: solid 1px #0bf3b4;
    background-color: #262627;
}

#dark-mode:after {
    position: absolute;
    width: 39px;
    height: 39px;
    content: ' ';
    /* sun */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st2%7Bdisplay:inline;%7D%0A%3C/style%3E%3Cg id="Sun"%3E%3Ccircle class="st2" cx="30" cy="30" r="12.5"/%3E%3Cpath class="st2" d="M55.1,31.3h-9.3c-0.7,0-1.3-0.6-1.3-1.3v0c0-0.7,0.6-1.3,1.3-1.3h9.3c0.7,0,1.3,0.6,1.3,1.3v0 C56.4,30.7,55.8,31.3,55.1,31.3z"/%3E%3Cpath class="st2" d="M14.2,31.3H4.9c-0.7,0-1.3-0.6-1.3-1.3v0c0-0.7,0.6-1.3,1.3-1.3h9.3c0.7,0,1.3,0.6,1.3,1.3v0 C15.5,30.7,14.9,31.3,14.2,31.3z"/%3E%3Cpath class="st2" d="M31.3,4.9v9.3c0,0.7-0.6,1.3-1.3,1.3h0c-0.7,0-1.3-0.6-1.3-1.3V4.9c0-0.7,0.6-1.3,1.3-1.3h0 C30.7,3.6,31.3,4.2,31.3,4.9z"/%3E%3Cpath class="st2" d="M31.3,45.8v9.3c0,0.7-0.6,1.3-1.3,1.3h0c-0.7,0-1.3-0.6-1.3-1.3v-9.3c0-0.7,0.6-1.3,1.3-1.3h0 C30.7,44.5,31.3,45.1,31.3,45.8z"/%3E%3Cpath class="st2" d="M48.6,13.2l-6.6,6.6c-0.5,0.5-1.3,0.5-1.8,0l0,0c-0.5-0.5-0.5-1.3,0-1.8l6.6-6.6c0.5-0.5,1.3-0.5,1.8,0v0 C49.1,11.9,49.1,12.7,48.6,13.2z"/%3E%3Cpath class="st2" d="M19.8,42.1l-6.6,6.6c-0.5,0.5-1.3,0.5-1.8,0h0c-0.5-0.5-0.5-1.3,0-1.8l6.6-6.6c0.5-0.5,1.3-0.5,1.8,0l0,0 C20.3,40.7,20.3,41.6,19.8,42.1z"/%3E%3Cpath class="st2" d="M13.2,11.4l6.6,6.6c0.5,0.5,0.5,1.3,0,1.8l0,0c-0.5,0.5-1.3,0.5-1.8,0l-6.6-6.6c-0.5-0.5-0.5-1.3,0-1.8l0,0 C11.9,10.9,12.7,10.9,13.2,11.4z"/%3E%3Cpath class="st2" d="M42.1,40.2l6.6,6.6c0.5,0.5,0.5,1.3,0,1.8l0,0c-0.5,0.5-1.3,0.5-1.8,0l-6.6-6.6c-0.5-0.5-0.5-1.3,0-1.8l0,0 C40.7,39.7,41.6,39.7,42.1,40.2z"/%3E%3C/g%3E%3C/svg%3E%0A');
}

.dark-mode #dark-mode:after {
    /* moon */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st1%7Bdisplay:inline;fill:%23fffdfd;%7D%0A%3C/style%3E%3Cg id="Moon"%3E%3Cpath class="st1" d="M21.3,4.1c-2-0.5-4-0.7-5.9-0.8c8.5,6.7,12.9,18,10.1,29.2S13.7,51.8,3.1,53.8c1.8,0.9,3.6,1.6,5.6,2.1 c14.3,3.5,28.7-5.3,32.2-19.5C44.3,22,35.6,7.6,21.3,4.1z"/%3E%3Cpolygon class="st1" points="57.7,14.4 51.7,15 48.8,20.2 46.4,14.7 40.5,13.5 45,9.6 44.3,3.6 49.5,6.7 54.9,4.1 53.6,10 "/%3E%3Cpolygon class="st1" points="56.4,43.7 52.2,42.2 48.6,44.9 48.7,40.4 45.1,37.8 49.3,36.5 50.7,32.3 53.2,35.9 57.7,35.9 55,39.4 "/%3E%3C/g%3E%3C/svg%3E%0A');
}

/**
 * letter-sizing + slider
 */
.slider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 1px; /* Specified height */
    background: #262627; /* Grey background */
    outline: none; /* Remove outline */
    border-radius: 0;
}

.dark-mode .slider {
    background: #ffffff;
}

/* Mouse-over effects */
.slider:hover {
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #16147a;
    cursor: pointer; /* Cursor on hover */
    border: none;
    border-radius: 25px;
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #16147a;
    cursor: pointer; /* Cursor on hover */
    border: none;
    border-radius: 25px;
}

.dark-mode .slider::-webkit-slider-thumb {
    background: #0bf3b4;
}

.dark-mode .slider::-moz-range-thumb {
    background: #0bf3b4;
}

/**
 * reading bar
 */
#reading_wrap {
    z-index: 2;
    position: fixed;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    margin: 0; /* this is important for positioning */
    /*background-color: rgba(255, 255, 255, .2);*/
    -webkit-transition: height .4s;
    transition: height .4s;
    overflow: visible;
    background-color: rgba(255, 255, 255, .81);
}

#reading_bar {
    width: 0;
    height: 100%;
    background-color: #16147a;
}

.dark-mode #reading_bar {
    background-color: #0bf3b4;
}

.dark-mode #reading_wrap {
    background-color: rgba(0, 0, 0, .23);
}

/**/
[data-online="false"] article {
    background-color: rgba(255, 0, 0, .24);
}

#peatcms-tagline {
    width: 100%;
    padding-top: 200px;
    height: 200px;
    font-size: 80%;
    text-align: center;
}

.small {
    font-size: 65%;
}

[data-is_published="false"] {
    display: none;
}

.the_admin_is_present [data-is_published="false"] {
    display: inline-block;
    background-color: rgba(255, 0, 0, .24);
}

@media (max-width: 1010px) {
    main {
        float: none;
        width: calc(100% - 40px);
        margin-right: 0;
        padding: 20px;
    }

    .art-attention:after {
        animation: art_attention 4000ms 1 ease-in-out;
    }

    #sidebar-toggle {
        display: block;
    }

    #sidebar {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        height: calc(100vh - 40px);
        width: 260px;
        overflow-y: scroll;
    }

    [data-sidebar-visible] #sidebar {
        display: block;
    }

    body[data-sidebar-visible] {
        overflow: hidden;
    }
}


.loader {
    margin: 30px;
}

.loader:not(:last-of-type) {
    display: none;
}

/* loading.io */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #16147a;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.dark-mode .lds-ellipsis div {
    background: #0bf3b4;
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}