/* ======================================================================
 *
 *                             CONTENT
 *
 * =================================================================== */

video {
    max-width: 100%;
}

section {
    padding-bottom: 1px;
}
section article table { margin: 14px 0; }
section article table,
section article table th,
section article table td {
    border: 1px solid grey;
}
section article table th,
section article table td {
    padding: 14px;
}
section article table th {
    font-weight: 600;
    white-space: nowrap;
}
section article table thead th {
    background-color: rgba(136,136,136,.055);
    text-align: center;
    color: white;
}
section article table tbody tr:nth-child(odd) th, section article table tr:nth-child(odd) td { background-color: rgba(255,255,255,.05); }
section article table tbody tr:nth-child(even) th, section article table tr:nth-child(even) td { background-color: rgba(0,0,0,.05); }
section article>a {
    text-decoration: none;
}

header a,
section article div a, section article p a, section article table a, section article ul a, section article cite a,
aside a,
footer a {
    text-decoration: none;
    color: inherit;
}

section article div a:hover,
section article p a:hover,
section article table a:hover,
section article ul a:hover,
section article cite a:hover,
aside a:hover,
footer a:hover {
    text-decoration: underline;
}
section article h2 a:hover { text-decoration: none; }
section article a.download,
section article a.demo,
div.alert {
    position: relative;
    margin: 70px auto 70px auto;
    padding: 21px 21px 21px 77px;
}
#content section article a.download,
#content section article a.demo {
    display: inline-block;
    margin: 14px 0;
    padding: 14px 21px 14px 60px;
    background-color: blueviolet;
    background-repeat: no-repeat;
    background-position: 7px 7px;
    background-size: 40px 40px;
    color: white;
    cursor: pointer;
    transition: background-color 1s;
}
#content section article a.download {
    background-image: url(../img/icon/download-white.svg);
}
#content section article a.demo {
    background-image: url(../assets/images/picto/play-white.svg);
}
#content section article a.download:hover,
#content section article a.demo:hover {
    background-color: magenta;
    text-decoration: none;
}
div+div,
p+div,
div+p {
    /*margin-top: 63px;*/
}
div+p,
h2+p,
h3+p,
h4+p,
p+p,
p+ol,
ol+p,
p+ul,
ul+p,
p+pre,
pre+p,
pre,
p+iframe,
iframe+p,
iframe,
p+figure,
figure+p,
figure,
p+table,
table+p,
table,
p+video,
video+p,
video {
    overflow: hidden;
    margin: 21px 0;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}
p+figure {
    margin: 70px 0;
}


.summary {
    /*margin-bottom: 70px;*/
}
#article .summary {
    border-bottom: 1px solid blue;
}

.back {
    margin: 21px 0;
    text-align: right;
}
.article-path,
.back {
    font-size: 1.2em;
}
.article-path a,
.back a {
    text-decoration: none !important;
}
.article-path,
.article-info {
    margin-bottom: 28px;
    font-family: "Syncopate", "Open Sans", Arial, sans-serif;
}
.article-subject,
.article-date {
    font-size: 1em;
    text-transform: uppercase;
}
.article-subject {
    font-weight: 700;
    color: deepskyblue;
}
.article-subject+.article-subject { margin-left: .33em; }
.article-date {
    font-weight: 300;
}
p,
ol li,
ul li,
aside,
code,
blockquote p,
footer p,
div.alert p {
    line-height: 150%;
}
p.summary { font-weight: 600; }
aside #search-block {
    line-height: 200%;
    text-align: left;
}
aside #search-block button {
    padding: 3px 7px;
    border-radius: 5px;
    background-color: steelblue;
    text-decoration: none;
    color: white;
    transition: all 500ms;
}
aside #search-block button:hover { background-color: deepskyblue; }
ol, ul, li { margin: 7px 0 7px 20px; }
ol { list-style: none; }
ol>li { counter-increment: step-counter; position: relative; }
ol>li:before {
    content: counter(step-counter)".";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: -35px;
    text-align: right;
    font-weight: bold;
}
ul { list-style: square; }
/*code { margin: 7px 0; }*/
.filter { display: inline-block; padding: 2px 4px; background-color: lightgrey; }
article cite { display: block; margin-top: 35px; text-align: right; font-size: .8em; word-wrap: break-word; }
blockquote cite { margin-bottom: 14px; }
aside .block-title {
    margin-bottom: 21px;
    font-family: "Titillium Web", Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 600;
}
aside div+.block-title {
    margin-top: 35px;
}
aside input[type=submit],input[type=button],button { background-color: grey; }
input[type="text"], textarea { box-sizing: border-box; border: 1px solid lightgrey; padding: 3px 7px; font-size: 1em; }
input[type=submit],input[type=button],button {
    border: 0;
    border-radius: 5px;
    font-size: 1em; font-family: "Titillium Web", Arial, sans-serif; color: white;
    vertical-align: text-bottom;
    cursor: pointer;
}
footer>div { text-align: center; }
canvas.particles-js-canvas-el {
    position: absolute;
    top: 0; left: 0;
    display: block;
}
/* ====================
    ALERTS
==================== */
div.alert.info {
    border-color: blue;
    background-color: aliceblue;
}
div.alert.warning {
    border-color: blueviolet;
    color: magenta;
}
div.alert.tip {
    border-color: rgb(0,190,128);
    /* color managed in the thematic CSS */
}
div.alert.spoiler {
    border-color: orangered;
    color: orange;
}
div.alert.success {
    border-color: deepskyblue;
    color: dodgerblue;
}
div.alert:before {
    display: block;
    position: absolute;
    top: 35px;
    left: 14px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    text-align: center;
    font-family: "pictos", sans-serif;
    font-size: 40px;
}
div.alert.info:before {
    content:"I";
}
div.alert.warning:before {
    content:"W";
}
div.alert.tip:before {
    content:"Y";
}
div.alert.spoiler:before {
    content:"Z";
}
div.alert.success:before {
    content:"C";
}
.comments { margin-top: 35px; }
.comment { display: table; width: 100%; margin-bottom: 3px; table-layout: fixed; }
.comment div { vertical-align: top; }
.comment div:nth-child(1) { display: table-cell; padding: 14px; text-align: center; }
.comment div:nth-child(1) img { display: block; }
.comment div:nth-child(2) .name,
.comment div:nth-child(2) .date,
.comment div:nth-child(2) .shortcut { display: inline-block; margin-bottom: 21px; font-family: "Open Sans", Arial, sans-serif; font-size: 1em;  }
.comment div:nth-child(2) .name { margin-right: 14px; font-weight: 600; }
.comment div:nth-child(2) .date { font-weight: 300; text-transform: uppercase; }
.comment div:nth-child(2) .shortcut { float: right; margin-left: 35px; }
.comment div:nth-child(2) {
    max-width: 604px; /*overflow-x: auto; */ overflow: hidden;
    word-wrap: break-word;
    /*text-overflow: clip ellipsis;*/
    -webkit-hyphens: auto;
    hyphens: auto;
}
/*.comment div:nth-child(2) p { max-width: 100%; }*/
/*.comment div:nth-child(2),
.comment div:nth-child(2) p { overflow-x: auto; overflow: hidden; word-wrap: break-word; }*/
.new-comment {
    margin: 21px 0; padding: 14px 21px;
    /*border: 1px solid lightgrey; border-radius: 21px;*/
    background-color: rgba(0,0,0,.5);
    text-align: left; color: white;
}
.new-comment p, .new-comment fieldset { margin-bottom: 21px; }
body #content .new-comment a { color: darkorange; }
.new-comment input[type="text"], .new-comment textarea { width: 100%; border: 1px solid rgba(0,0,0,.75); border-radius: 7px; font-family: "Open Sans", Arial, sans-serif; }
.new-comment textarea { height: 140px; box-sizing: border-box; }
.new-comment button, .new-comment input[type=submit], .new-comment input[type=button] { width: 200px; padding: 7px 14px; }
.new-comment button:hover, .new-comment input[type=submit]:hover {  }

/*.new-comment button.submit, .new-comment input[type=submit].submit { max-width: 300px; background-color: palevioletred; font-size: 1.5em; font-weight: 600; text-shadow: 0 0 3px red, 0 0 3px red, 0 0 3px red; transition: background-color 400ms; }
.new-comment button.cancel, .new-comment input[type=button] { max-width: 300px; background-color: dodgerblue; font-size: 1.5em; font-weight: 600; text-shadow: 0 0 3px blue, 0 0 3px blue, 0 0 3px blue; transition: background-color 400ms; }
.new-comment button.submit:hover, .new-comment input[type=submit].submit:hover { background-color: red; }
.new-comment button.cancel:hover, .new-comment input[type=button].cancel:hover { background-color: blue; }*/

/*.new-comment button.submit, .new-comment input[type=submit].submit { max-width: 300px; background-color: transparent; font-size: 1.5em; font-weight: 600; transition: background-color 200ms; }
.new-comment button.cancel, .new-comment input[type=button] { max-width: 300px; background-color: transparent; font-size: 1.5em; font-weight: 600; transition: background-color 200ms; }
.new-comment button.submit:hover, .new-comment input[type=submit].submit:hover { background-color: magenta; }
.new-comment button.cancel:hover, .new-comment input[type=button].cancel:hover { background-color: dodgerblue; }*/

.new-comment button.submit, .new-comment input[type=submit].submit { max-width: 300px; background-color: transparent; font-size: 1.5em; font-weight: 600; box-shadow: 0 0 0 0 dodgerblue inset; transition: all 200ms }
.new-comment button.cancel, .new-comment input[type=button] { max-width: 300px; background-color: transparent; font-size: 1.5em; font-weight: 600; box-shadow: 0 0 0 0 magenta inset; transition: all 200ms }
.new-comment button.submit:hover, .new-comment input[type=submit].submit:hover { background-color: transparent; box-shadow: 0 0 0 30px dodgerblue inset }
.new-comment button.cancel:hover, .new-comment input[type=button].cancel:hover { background-color: transparent; box-shadow: 0 0 0 30px magenta inset }

/* very cool*/
/*.new-comment button.submit, .new-comment input[type=submit].submit { max-width: 300px; background-color: transparent; font-size: 1.5em; font-weight: 600; background-color: springgreen; background-image: url(../assets/bg/submit.png); background-size: 100%; background-repeat: repeat; box-shadow: 0 0 0 30px #202020 inset; transition: all 200ms;  animation: 40s linear 0s caca infinite normal forwards running }
.new-comment button.cancel, .new-comment input[type=button] { max-width: 300px; background-color: transparent; font-size: 1.5em; font-weight: 600; background-color: magenta; background-image: url(../assets/bg/cancel.png); background-size: 100%; background-repeat: repeat; box-shadow: 0 0 0 30px #202020 inset; transition: all 200ms; animation: 40s linear 0s caca infinite normal forwards running; }
.new-comment button.submit:hover, .new-comment input[type=submit].submit:hover { background-color: transparent; box-shadow: 0 0 0 0 #202020 inset }
.new-comment button.cancel:hover, .new-comment input[type=button].cancel:hover { background-color: transparent; box-shadow: 0 0 0 0 #202020 inset }

/* ultra cool */
/*.new-comment button.submit, .new-comment input[type=submit].submit { max-width: 300px; background-color: transparent; font-size: 1.5em; font-weight: 600; background-color: springgreen; background-image: url(../assets/bg/submit.png); background-size: 100%; background-repeat: repeat; box-shadow: 0 0 0 30px #202020 inset; transition: all 200ms;  animation: 40s linear 0s caca infinite normal forwards running }
.new-comment button.cancel, .new-comment input[type=button] { max-width: 300px; background-color: transparent; font-size: 1.5em; font-weight: 600; background-color: magenta; background-image: url(../assets/bg/cancel.png); background-size: 100%; background-repeat: repeat; box-shadow: 0 0 0 30px #202020 inset; transition: all 200ms; animation: 40s linear 0s caca infinite normal forwards running; }
.new-comment button.submit:hover, .new-comment input[type=submit].submit:hover { background-color: transparent; box-shadow: 0 0 0 0 springgreen inset }
.new-comment button.cancel:hover, .new-comment input[type=button].cancel:hover { background-color: transparent; box-shadow: 0 0 0 0 magenta inset }

/* mega cool */
.new-comment button.action {
    max-width: 300px;
    font-size: 1.5em;
    font-weight: 600;
    text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;
    background-color: black ;
    background-size: 100%;
    background-repeat: repeat;
    box-shadow: 0 0 0 30px transparent inset;
    transition: all 200ms;
    animation: 30s linear 0s caca infinite normal forwards running;
}

.new-comment button.action.submit, .new-comment input[type=submit].action.submit {
    background-image: url(../assets/bg/submit.png);
    /*border-bottom: 3px solid yellow;*/
}
.new-comment button.action.cancel, .new-comment input[type=button].action.cancel {
    background-image: url(../assets/bg/cancel.png);
    /*border-bottom: 3px solid red;*/
}
.new-comment button.action.submit:hover, .new-comment input[type=submit].action.submit:hover {
    background-color: springgreen;
    box-shadow: 0 0 0 0 #202020 inset
}
.new-comment button.action.cancel:hover, .new-comment input[type=button].action.cancel:hover {
    background-color: magenta;
    box-shadow: 0 0 0 0 #202020 inset
}

@keyframes caca {
    from {
        background-position: 512px 256px;
    }
    to {
        background-position: -512px -256px;
    }
}

.special-block { background-color: rgba(136,136,136,.2); }
.article-footer { margin: 21px 0; padding: 21px; }
.article-footer > .cols2 > * { margin: 21px 0; }
aside {
    vertical-align: top;
}
.grecaptcha-badge { display: none;/*bottom: 100px !important;/* left: 14px;*/ }
/*.gravatar { border-radius: 50%; filter: grayscale(100%); }*/
.gravatar { position: relative; border-radius: 50%; filter: grayscale(100%); }
.languageManager label,
.themeManager label { cursor: pointer; }
.switch { position: relative; display: inline-block; width: 80px; /* 60px */ height: 34px; }
.switch input { display:none; }
.slider {
    position: absolute; top: 0; left: 0;right: 0; bottom: 0;
    background-color: #fff;
    cursor: pointer;

    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    content: "";
    position: absolute; left: 4px; bottom: 4px;
    width: 26px; height: 26px;
    background-color: #344853;

    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider { background-color: #282828; }
input:focus + .slider { box-shadow: 0 0 1px #344853; }
input:checked + .slider:before {
    background-color: #fff;
    -webkit-transform: translateX(46px); /* 26px */
    transform: translateX(46px); /* 26px */
    color: darkblue;
}
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
.theme-switcher,
button.comment-tool { position: relative; display: inline-table; overflow: hidden; background-color: grey; border-top: 1px solid white; font-weight: 300; transition: all 100ms; }
button.comment-tool:hover { background-color: lightgrey; color: black; text-shadow: 0 0 14px white, 0 0 14px white, 0 0 14px white; }
button.comment-tool:hover span.label:before { background-color: rgba(255,255,255,.5); text-shadow: none; }
button.comment-tool span { display: table-cell; vertical-align: middle; padding-right: 42px; }
button.comment-tool span.label:before {
    content: "";
    display: table-cell;
    vertical-align: middle;
    width: 42px; height: 100%;
    position: absolute; top: 0; right: 0;
    font-family: "pictos", sans-serif; font-size: 2em; text-shadow: 0 0 1px black;
    background-color: rgba(255,255,255,.2);
}
button.comment-tool.addImage span.label:before { content: "L"; }
button.comment-tool.addLink span.label:before { content: "U"; }
.links-logo {
    height: 25px;
    margin: 0 10px;
    border-radius: 3px;
    vertical-align: top;
}

.article-overview {
    position: relative;
    display: block;
    margin-bottom: 2em;
    padding: 14px;
}
/*.article-overview .header-illustration { debug
    z-index: 0;
    position: absolute;
    width: 100vw;
    height: 600px;
    object-fit: cover;
    object-position: center;
}*/
.article-intro {
    margin-bottom: 59px;
}
.article-overview .article-intro {
    position: relative;
    box-sizing: border-box;
    min-height: 220px;
    padding: 21px;
    float: left;
}
.article-overview .article-intro:before {
    content: "";
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
.article-illustration {
    width: 100%;
}

.back {
    display: block;
    margin: 100px 0 !important;
}