/* ======================================================================
 *
 *                             CUSTOM STYLE
 *
 * =================================================================== */

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Open Sans", sans-serif; font-size: 1em;
}

section article, aside>div, footer>div {
    padding: 28px 14px;
    font-size: 1.1em;
    font-weight: 400;
}
section article {
    position: relative;
    padding-top: 56px;
}

section article:nth-last-child(n+2) { margin-bottom: 70px; }

pre code {
    font-size: 14px;
}
code {
    padding: 3px;
    overflow-x: auto;
    /*background-color: rgba(255,255,255,.33);*/
    font-family: 'Fira Code Retina', monospace;
    white-space: nowrap;
}

#landing-screen_arrow-down,
#switch-to-panorama {
    z-index: 1;
    bottom: 5%;
    position: absolute;
    width: 64px;
    height: 64px;
}
#landing-screen_arrow-down {
    left: 50vw;
    margin-left: -32px;
    text-align: center;
    font-family: 'pictos', sans-serif;
    font-size: 4em;
    color: inherit;
    text-shadow: 0 0 2px black;
    animation: 1s ease-in-out infinite blink;
}
#switch-to-panorama {
    /*bottom: 25%;*/
    right: 5%;
}
#switch-to-panorama a {
    display: block;
    width: 50px;
    height: 50px;
}
#switch-to-panorama img {
    /*display: block;*/
    /*width: 50px;*/
    /*height: 50px;*/
    filter: invert(96%) sepia(99%) saturate(2%) hue-rotate(280deg) brightness(105%) contrast(101%);
    cursor: ew-resize;
}
h2, h3, h4 { margin-bottom: 10px; font-family: "Titillium Web", Arial, sans-serif; }
h2 {
    font-size: 3em;
    font-weight: 600;
}
h2 a { text-decoration: none; }
:not(h2) + h3 {
    margin-top: 80px;
    font-size: 35px;
    font-weight: 400;
}
:not(.description) h3 {
    /*margin: 49px 0;*/
}
:not(#comments)+h3 {
    /*margin-top: 100px;*/
}
h4 {
    margin-top: 70px;
    margin-bottom: 21px;
    font-size: 1.25em;
    font-weight: 400;
}

*+figure,
.youtube {
    max-width: 100%;
    margin-top: 21px;
    margin-bottom: 21px;
}

/* ----------------------------------------------------------------------
 * IMAGES
* ------------------------------------------------------------------- */

figure { text-align: center; }

blockquote,
div.alert {
    max-width: 600px;
    box-sizing: border-box;
    margin: 70px auto;
}
blockquote {
    position: relative;
    padding: 28px 42px;
    /*background-color: rgba(136,136,136,.055);*/
    /*quotes: "\201C""\201D""\2018""\2019";*/
    /*quotes: '”' '„';*/
    quotes: '“' '”';
    font-style: italic;
}
blockquote:before, blockquote:after {
    display: block;
    width: 40px; height: 40px;
    position: absolute;
    text-align: center;
    font-family: "Oswald", Arial, sans-serif; font-size: 6.5em; color: #bbb
}
blockquote:before { content: open-quote; top: -21px; left: -14px; }
blockquote:after { content: close-quote; bottom: -13px; right: 40px; }
iframe { width: 100%; max-width: 100%; }
img { max-width: 100%; }

figure img {
    width: auto;
    max-width: 100%;
}
.picto {
    font-family: 'pictos', sans-serif;
    font-size: 2em;
}