/*
Author: Aurélien Scapa
http://extatic.net
*/

/* #region reset */

html,
body,
header, menu, section, footer,
div, span,
object,
h1, h2, h3, h4, h5, h6, h7, p, a, abbr,
acronym, cite, code,
em,
center,
ol, ul, li,
fieldset, form, label, blockquote,
img, figure, figcaption {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
}

/* #endregion */

/* #region HTML */

html {
    width: 100%;
    height: 100%;
}

/* #endregion */

/* #region body */

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 380px;
    height: 100%;
    min-height: 100%;
    font-family: 'Open Sans', Arial;
    font-size: 1em;
    line-height: 1em;
    background: rgb(0, 0, 0); /* IE10 & IE11 footer hack */
}

html[data-useragent*='MSIE 10.0'] body,
html[data-useragent*='rv:11.0'] body { /* IE10 & IE11 hack */
    display: block;
}

body a {
    text-decoration: none;
}

/* #endregion */

/* #region header */

header {
    position: fixed;
    top: 0;
    z-index: 999; /* do not remove = header always on top of content */
    width: 100%;
    height: 48px;
    font-size: 1.2em;
    color: rgb(255, 255, 255);
    background: rgb(58, 60, 65);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 8px;
    transition: all 1s ease;
    bottom: 0;
}

    header:hover {
        box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 20px;
        transition: all 1s ease;
    }

#headerMenu {
    position: relative;
    display: block;
    height: 100%;
    line-height: 48px;
    margin: 0 32px 0 32px;
}

#siteLogo {
    position: absolute;
    top: -2px;
    left: 0;
    line-height: 48px;
}

    #siteLogo:hover h1 {
        color: rgb(255, 197, 107);
    }

    #siteLogo:hover a img:nth-child(2) {
        display: inline-block;
    }

    #siteLogo:hover a img:nth-child(1) {
        display: none;
    }

    #siteLogo a img {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        height: 24px;
    }

        #siteLogo a img:nth-child(2) {
            display: none;
            vertical-align: middle;
            width: 24px;
            height: 24px;
        }

    #siteLogo a h1 {
        display: inline-block;
        vertical-align: middle;
        letter-spacing: 0.3em;
        color: rgb(255,255,255);
    }

#searchEngine {
    position: absolute;
    top: 8px;
    right: 0;
}

#searchForm input {
    position: relative;
    width: 128px;
    height: 32px;
    display: block;
    line-height: 32px;
    vertical-align: middle;
    margin: 0 32px 0 0;
    padding: 0 16px 0 16px;
    font-size: 0.9em;
    color: rgb(0, 0, 0);
    background: rgb(255, 255, 255);
    border: none;
    outline: none;
    transition: width 0.5s ease;
    cursor: pointer;
}

html[data-useragent*='MSIE 10.0'] #searchForm input,
html[data-useragent*='rv:11.0'] #searchForm input { /* IE10 & IE11 hack */
    transition: none;
}

#searchForm input:focus {
    width: 192px;
}

#search\.php #searchForm input {
    transition: width 0.5s ease;
    animation-name: searchFormResize;
    animation-duration: 0.5s;
}

@keyframes searchFormResize {
    from {
        width: 226px;
    }

    to {
        width: 164px;
    }
}

@media (max-width: 600px) {
    #searchForm input {
        width: 64px;
        font-size: 0.6em;
    }

        #searchForm input:focus {
            width: 120px;
        }

    #search\.php #searchForm input {
        transition: width 0.5s ease;
        animation-name: searchFormResize;
        animation-duration: 0.5s;
    }

    @keyframes searchFormResize {
        from {
            width: 120px;
        }

        to {
            width: 60px;
        }
    }
}

/* #endregion */

/* #region footer */

footer {
    position: relative;
    z-index: 996;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px;
    transition: all 1s ease;
}

    footer:hover {
        box-shadow: rgba(0, 0, 0, 0.8) 0 0 20px;
        transition: all 1s ease;
    }

    footer, footer a {
        line-height: 1.8em;
    }

@media (max-width: 380px) {
    #twitter {
        display: none;
    }
}

#twitter {
    background: rgb(76, 76, 77);
}

    #twitter .twitterTimeline {
        width: 520px;
        margin: 0 auto;
        padding: 32px 0 24px 0;
    }

    #twitter #twitterIcon {
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto 16px auto;
    }

    #twitter #lastTweet {
        min-height: 90px;
    }

html[data-useragent*='MSIE 10.0'] #infoFooter,
html[data-useragent*='rv:11.0'] #infoFooter { /* IE10 & IE11 hack */
    box-shadow: none;
}

#infoFooter {
    padding: 32px 0 16px 0;
    background: rgb(42, 42, 42);
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px;
    transition: all 1s ease;
}

    #infoFooter:hover {
        box-shadow: rgba(0, 0, 0, 0.8) 0 0 16px;
        transition: all 1s ease;
    }

#siteInfo {
    font-size: 0.9em;
}

    #siteInfo h4 {
        color: rgb(255, 255, 255);
        font-weight: bold;
    }

    #siteInfo ul li {
        list-style: none;
    }

        #siteInfo ul li a {
            color: rgb(200, 200, 200);
        }

            #siteInfo ul li a:hover {
                color: rgb(255, 197, 107);
            }

    #siteInfo h4,
    #siteInfo #iconHeart,
    #siteInfo #iconContact,
    #siteInfo #iconCategories {
        display: inline-block;
        vertical-align: middle;
    }

    #siteInfo #iconHeart,
    #siteInfo #iconContact,
    #siteInfo #iconCategories {
        position: relative;
        left: -8px;
        top: -2px;
        width: 16px;
        height: 16px;
        margin: 0 0 0 -16px;
    }

#copyright {
    margin: 48px auto 0 auto;
    font-size: 0.8em;
}

    #copyright p {
        color: rgb(115, 115, 115);
        text-align: center;
    }

    #copyright a {
        color: rgb(155, 155, 155);
    }

        #copyright a:hover {
            color: rgb(255, 197, 107);
        }

    #copyright #siteName {
        letter-spacing: 0.3em;
    }

        #copyright #siteName img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }

/* #endregion */

/* #region miscellaneous */

#index\.php,
#single\.php,
#page\.php,
#search\.php,
#error404\.php {
    flex: 1;
    background: rgb(220, 220, 220);
}

#content {
    margin: 48px 0 0 0;
}

html[data-useragent*="Safari"]:not([data-useragent*="Chrome"]) #content {
    margin: 0 0 0 0;
}

.row {
    position: relative;
    z-index: 995;
    width: 100%;
}

.col { /* /!\ must not have width setting for margin/padding to work */
    display: block;
    max-width: 960px;
    height: 100%;
    margin: 0 auto;
    padding: 0 16px 0 16px;
}

.col-1-1 {
    display: inline-block;
    width: 100%;
    height: 100%;
    width: calc(100% - 32px);
    margin: 0 16px 0 16px;
}

.col-1-2 {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 32px);
    margin: 0 16px 0 16px;
}

.col-1-3 {
    display: inline-block;
    vertical-align: top;
    width: calc((100% / 3) - 32px);
    margin: 0 16px 0 16px;
}

.col-2-3 {
    display: inline-block;
    vertical-align: top;
    width: calc(((100% / 3) * 2) - 32px);
    margin: 0 16px 0 16px;
}

.col-1-4 {
    display: inline-block;
    vertical-align: top;
    width: calc(25% - 32px);
    margin: 0 16px 0 16px;
}

.col-2-4 {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 32px);
    margin: 0 16px 0 16px;
}

.col-3-4 {
    display: inline-block;
    vertical-align: top;
    width: calc(75% - 32px);
    margin: 0 16px 0 16px;
}

/* ----- ----- ----- ----- ----- */
/* responsive */

@media (max-width: 380px) {
    #siteMap .col-1-3 {
        display: inline-block;
        width: calc(100% - 32px);
        margin: 0 16px 16px 16px;
    }
}

/* #region ScrollToTop */

#scrollToTop {
    display: none;
    width: 56px;
    height: 56px;
    margin: 8px 0 8px 0;
    position: fixed;
    right: 24px;
    bottom: 24px;
    text-align: center;
    background: rgba(50,50,50, 0.7);
    border-radius: 50%;
    z-index: 997;
    cursor: pointer;
}

    #scrollToTop:hover {
        background: rgba(0, 0, 0, 0.7);
    }

    #scrollToTop img {
        padding: 12px 0 8px 0;
    }

/* #endregion */

/* #region Lightbox */

#lightbox {
    position: fixed;
    z-index: 997;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

    #lightbox img {
        position: absolute;
        z-index: 998;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 32px 32px 32px 32px;
        max-width: 80%;
        max-height: 80%;
        background: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.8) 0 0 16px;
    }

/* #endregion */

/* #endregion */

/* #region index.php & search.php */




#index\.php .postMetadataTag,
#search\.php .postMetadataTag {
    display: block;
    position: relative;
    height: 0;
}

    #index\.php .postMetadataTag .postDate,
    #search\.php .postMetadataTag .postDate,
    #index\.php .postMetadataTag .postCommentNumber,
    #search\.php .postMetadataTag .postCommentNumber,
    #index\.php .postMetadataTag .postMeta .post-meta-key,
    #search\.php .postMetadataTag .postMeta .post-meta-key {
        position: relative;
        top: 64px;
        left: -96px;
        display: block;
        width: 64px;
        margin: 0 0 16px 0;
        text-align: center;
        font-size: 1.1em;
        border-radius: 4px;
        box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px;
        transition: all 1s ease;
    }

        #index\.php .postMetadataTag .postDate:hover,
        #search\.php .postMetadataTag .postDate:hover,
        #index\.php .postMetadataTag .postCommentNumber:hover,
        #search\.php .postMetadataTag .postCommentNumber:hover,
        #index\.php .postMetadataTag .postMeta .post-meta-key:hover,
        #search\.php .postMetadataTag .postMeta .post-meta-key:hover {
            box-shadow: rgba(0, 0, 0, 0.8) 0 0 24px;
            transition: all 1s ease;
        }

    #index\.php .postMetadataTag .postDate,
    #search\.php .postMetadataTag .postDate {
        height: 64px;
        color: rgb(255, 255, 255);
        background: none;
    }

        #index\.php .postMetadataTag .postDate .postDateMonth,
        #search\.php .postMetadataTag .postDate .postDateMonth,
        #index\.php .postMetadataTag .postDate .postDateDay,
        #search\.php .postMetadataTag .postDate .postDateDay {
            text-align: center;
            text-transform: uppercase;
        }

        #index\.php .postMetadataTag .postDate .postDateMonth,
        #search\.php .postMetadataTag .postDate .postDateMonth {
            height: 21px;
            line-height: 21px;
            font-size: 0.7em;
            color: rgb(255, 255, 255);
            background: rgb(58, 60, 65);
            border-radius: 4px 4px 0 0;
        }

        #index\.php .postMetadataTag .postDate .postDateDay,
        #search\.php .postMetadataTag .postDate .postDateDay {
            width: 58px;
            height: 40px;
            line-height: 40px;
            color: rgb(255, 255, 255);
            background: rgb(99, 101, 108);
            border: solid rgb(58, 60, 65);
            border-width: 0 3px 3px 3px;
            border-radius: 0 0 4px 4px;
        }

    #index\.php .postMetadataTag .postCommentNumber,
    #search\.php .postMetadataTag .postCommentNumber {
        position: relative;
        height: 48px;
        background: rgb(58, 60, 65);
        border-radius: 4px;
    }

        #index\.php .postMetadataTag .postCommentNumber::after,
        #search\.php .postMetadataTag .postCommentNumber::after {
            position: absolute;
            top: 48px;
            left: 40px;
            content: "";
            border-bottom: 8px solid transparent; /* comment triangle */
            border-right: 12px solid rgb(58, 60, 65); /* comment triangle */
        }

        #index\.php .postMetadataTag .postCommentNumber a,
        #search\.php .postMetadataTag .postCommentNumber a {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0 auto 0 auto;
            line-height: 48px;
            color: rgb(255, 255, 255);
        }

    #index\.php .postMetadataTag .postMeta .post-meta-key,
    #search\.php .postMetadataTag .postMeta .post-meta-key {
        height: 48px;
        color: rgb(255, 255, 255);
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background: rgb(58, 60, 65) url(design/wstar.png) no-repeat center;
        background-size: 20px;
        border-radius: 4px;
    }

    #index\.php .postMetadataTag .postMeta .rating,
    #search\.php .postMetadataTag .postMeta .rating {
        display: none;
    }

    #index\.php .postMetadataTag .postMeta ul,
    #search\.php .postMetadataTag .postMeta ul {
        list-style-type: none;
    }

html[data-useragent*='MSIE 10.0'] #index\.php .postPreview,
html[data-useragent*='MSIE 10.0'] #search\.php .postPreview,
html[data-useragent*='rv:11.0'] #index\.php .postPreview,
html[data-useragent*='rv:11.0'] #search\.php .postPreview,
html[data-useragent*='Edge'] #index\.php .postPreview, /* IE10 & IE11 hack */
html[data-useragent*='Edge'] #search\.php .postPreview { /* IE10 & IE11 hack */
    transition: none;
}

#index\.php .postPreview,
#search\.php .postPreview {
    position: relative;
    padding-bottom: calc(100% / 2.6);
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px;
    transition: all 1s ease;
}

    #index\.php .postPreview:hover,
    #search\.php .postPreview:hover {
        box-shadow: rgba(0, 0, 0, 0.8) 0 0 24px;
        transition: all 1s ease;
    }

    #index\.php .postPreview .postMetadataTag,
    #search\.php .postPreview .postMetadataTag {
        position: absolute;
    }

    #index\.php .postPreview .postThumbnail,
    #search\.php .postPreview .postThumbnail {
        position: absolute;
        display: block;
        height: calc(100% - 48px);
        width: 100%;
        overflow: hidden;
    }

        #index\.php .postPreview .postThumbnail img,
        #search\.php .postPreview .postThumbnail img {
            position: relative;
            top: 50%;
            width: 100%;
            height: auto;
            transform: translateY(-50%);
        }

    #index\.php .postPreview .postMetadata,
    #search\.php .postPreview .postMetadata {
        position: absolute;
        width: 100%;
        bottom: 0px;
    }

        #index\.php .postPreview .postMetadata .postCategory,
        #search\.php .postPreview .postMetadata .postCategory,
        #index\.php .postPreview .postMetadata .postTitle,
        #search\.php .postPreview .postMetadata .postTitle {
            display: inline-block;
            height: 100%;
            vertical-align: top;
        }

        #index\.php .postPreview .postMetadata .postCategory,
        #search\.php .postPreview .postMetadata .postCategory {
            width: 64px;
            text-align: center;
            background: rgb(42, 42, 42);
            color: rgb(0, 0, 0);
        }

        #index\.php .postPreview .postMetadata .postTitle,
        #search\.php .postPreview .postMetadata .postTitle {
            width: calc(100% - 96px);
            padding: 0 16px 0 16px;
            background: rgb(58, 60, 65);
            color: rgb(255, 255, 255);
        }

            #index\.php .postPreview .postMetadata .postTitle h2,
            #search\.php .postPreview .postMetadata .postTitle h2 {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

#index\.php .meta ul li,
#search\.php .meta ul li {
    list-style-type: none;
}

#index\.php .meta .star img,
#search\.php .meta .star img {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 4px 0 0;
}

@media (min-width: 1024px) {
    #index\.php .postMetadata,
    #search\.php .postMetadata {
        height: 48px;
        line-height: 48px;
        font-size: 1.2em;
    }

        #index\.php .postMetadata .postCategory img,
        #search\.php .postMetadata .postCategory img {
            padding: 12px 0 12px 0;
            width: 24px;
            height: 24px;
        }

    #index\.php .postPreview,
    #search\.php .postPreview {
        margin: 64px 0 64px 0;
    }

    #pagination {
        margin: 0 0 64px 0;
    }
}

@media (min-width: 1024px) and (max-width: 1200px) {
    #index\.php .postMetadataTag,
    #search\.php .postMetadataTag {
        overflow: hidden;
    }

    #index\.php .postPreview,
    #search\.php .postPreview {
        margin: 64px 0 64px 0;
    }

    #pagination {
        margin: 0 0 64px 0;
    }
}

@media (min-width: 640px) and (max-width: 1024px) {
    #index\.php .postMetadata,
    #search\.php .postMetadata {
        height: 36px;
        line-height: 36px;
        font-size: 1em;
    }

        #index\.php .postMetadata .postCategory img,
        #search\.php .postMetadata .postCategory img {
            padding: 8px 0 8px 0;
            width: 20px;
            height: 20px;
        }

    #index\.php .postMetadataTag,
    #search\.php .postMetadataTag {
        overflow: hidden;
    }

    #index\.php .postPreview,
    #search\.php .postPreview {
        margin: 32px 0 32px 0;
    }

        #index\.php .postPreview .postThumbnail,
        #search\.php .postPreview .postThumbnail {
            position: absolute;
            height: calc(100% - 36px);
            width: 100%;
            display: block;
        }

    #pagination {
        margin: 0 0 64px 0;
    }
}

@media (max-width: 640px) {
    #index\.php .postMetadata,
    #search\.php .postMetadata {
        height: 30px;
        line-height: 30px;
        font-size: 0.8em;
    }

        #index\.php .postMetadata .postCategory img,
        #search\.php .postMetadata .postCategory img {
            padding: 8px 0 8px 0;
            width: 16px;
            height: 16px;
        }

    #index\.php .postMetadataTag,
    #search\.php .postMetadataTag {
        overflow: hidden;
    }

    #index\.php .postPreview,
    #search\.php .postPreview {
        margin: 24px 0 24px 0;
    }

        #index\.php .postPreview .postThumbnail,
        #search\.php .postPreview .postThumbnail {
            position: absolute;
            height: calc(100% - 30px);
            width: 100%;
            display: block;
        }

    #index\.php .meta .estar img,
    #search\.php .meta .estar img,
    #index\.php .meta .hstar img,
    #search\.php .meta .hstar img,
    #index\.php .meta .fstar img,
    #search\.php .meta .fstar img {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 2px 0 0;
    }

    #pagination {
        margin: 0 0 24px 0;
    }
}

/* #region pagination */

#pagination {
    position: relative;
    height: 48px;
}

#navPrevious a, #navNext a {
    width: 96px;
    height: 48px;
    text-align: center;
    background: rgb(99, 101, 108);
    border-radius: 3px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px;
    transition: all 1s ease;
}

#navPrevious img, #navNext img {
    width: 24px;
    height: 24px;
}

#navPrevious a:hover, #navNext a:hover {
    background: rgb(58, 60, 65);
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 24px;
    transition: all 1s ease;
}

#navPrevious a {
    position: absolute;
    left: 0;
}

#navNext a {
    position: absolute;
    right: 0;
}

#navPrevious img {
    padding: 12px 4px 8px 0;
}

#navNext img {
    padding: 12px 0 8px 4px;
}

/* #endregion */

/* #endregion */

/* #region single.php & page.php */

#single\.php #postThumbnail,
#page\.php #postThumbnail {
    position: relative;
    z-index: 1;
}

    #single\.php #postThumbnail img,
    #page\.php #postThumbnail img {
        display: none;
    }

    #single\.php #postThumbnail #postThumbnailTitle,
    #page\.php #postThumbnail #postThumbnailTitle {
        position: fixed;
        z-index: 2;
        display: table;
        width: 100%;
        height: 100%;
        color: rgb(255, 255, 255);
    }

        #single\.php #postThumbnail #postThumbnailTitle h2,
        #page\.php #postThumbnail #postThumbnailTitle h2 {
            display: table-cell;
            vertical-align: middle;
            padding: 0 64px 0 64px;
            font-size: 4vw;
            text-transform: uppercase;
            text-align: center;
            text-shadow: rgb(0, 0, 0) 0px 1px 2px;
            line-height: 1em;
            background-size: cover;
            background-position: center;
        }

@media (min-width: 1024px) {

    #single\.php #postThumbnail #postThumbnailTitle h2,
    #page\.php #postThumbnail #postThumbnailTitle h2 {
        font-size: 2vw;
        padding: 0 128px 0 128px;
    }
}

#single\.php #extend,
#page\.php #extend {
    position: relative;
    z-index: 994;
    background: rgb(255, 255, 255) url('design/background.png') repeat;
}

    #single\.php #extend #post,
    #page\.php #extend #post {
        position: relative;
        z-index: 995;
    }

html[data-useragent*='MSIE 10.0'] #single\.php #extend,
html[data-useragent*='MSIE 10.0'] #page\.php #extend,
html[data-useragent*='rv:11.0'] #single\.php #extend,
html[data-useragent*='rv:11.0'] #page\.php #extend,
html[data-useragent*='Edge'] #single\.php #extend, /* 1px line between divs that mess things up */
html[data-useragent*='Edge'] #page\.php #extend { /* 1px line between divs that mess things up */
    margin: -1px 0 -1px 0;
}

#single\.php #postMetadata,
#page\.php #postMetadata {
    margin: 64px 0 48px 0;
    font-size: 0.8em;
    text-align: center;
}

    #single\.php #postMetadata #postDate,
    #page\.php #postMetadata #postDate,
    #single\.php #postMetadata #postCategory a,
    #page\.php #postMetadata #postCategory a {
        color: rgb(175, 175, 175);
    }

#single\.php #postTitle h2,
#page\.php #postTitle h2 {
    margin: 48px 0 48px 0;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.3em;
    text-align: center;
    text-overflow: ellipsis;
}

@media (min-width: 800px) and (max-width: 1024px) {
    #single\.php #postTitle h2,
    #page\.php #postTitle h2 {
        font-size: 1.2em;
        line-height: 1.1em;
    }
}

@media (min-width: 320px) and (max-width: 800px) {
    #single\.php #postTitle h2,
    #page\.php #postTitle h2 {
        font-size: 1.2em;
        line-height: 1.1em;
    }
}

#single\.php #postContent,
#page\.php #postContent {
    margin: 48px 0 48px 0;
    font-size: 1em;
    line-height: 1.5em;
}

    #single\.php #postContent h3,
    #page\.php #postContent h3 {
        margin: 0 0 8px 0;
        font-size: 1.1em;
        font-weight: bold;
        color: rgb(0, 181, 255);
    }

#single\.php #commentNumber h4,
#page\.php #commentNumber h4 {
    margin: 48px 0 48px 0;
    font-size: 1.6em;
    line-height: 1em;
    font-weight: bold;
    text-align: center;
}

#single\.php #postContent a,
#page\.php #postContent a {
    color: rgb(255, 0, 94);
}

#single\.php #postContent ul,
#page\.php #postContent ul {
    list-style: none;
}

#single\.php #postContent figure,
#page\.php #postContent figure {
    margin: 32px 0 32px 0;
    text-align: center;
}

    #single\.php #postContent figure img,
    #page\.php #postContent figure img {
        max-width: 100%;
    }

    #single\.php #postContent figure figcaption,
    #page\.php #postContent figure figcaption {
        display: block;
        font-size: 0.7em;
        text-transform: uppercase;
    }

#single\.php #postContent .multipleFigures,
#page\.php #postContent .multipleFigures {
    text-align: center;
}

    #single\.php #postContent .multipleFigures figure,
    #page\.php #postContent .multipleFigures figure {
        display: inline-block;
        margin: 32px 12px 32px 16px;
        width: calc((100% / 4) - 32px);
    }

#single\.php #postContent figure .video,
#page\.php #postContent figure .video {
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
}

    #single\.php #postContent figure .video object,
    #page\.php #postContent figure .video object {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


#single\.php #postContent .lightbox img,
#page\.php #postContent .lightbox img {
    cursor: pointer;
}

/* #endregion */

/* #region commentaires */
/* comments.php + functions.php */

html[data-useragent*='MSIE 10.0'] #comments,
html[data-useragent*='rv:11.0'] #comments,
html[data-useragent*='Edge'] #comments { /* 1px line between divs that mess things up */
    margin: -1px 0 -1px 0;
}

#comments #postComment {
    width: 100%;
    margin: 48px 0 48px 0;
}

    #comments #postComment h4 {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0 0 32px 0;
    }

/* #region commentaires : comments.php */

/* #region form */

#comments #postCommentForm {
    width: 100%;
    margin: 48px 0 64px 0;
}

    #comments #postCommentForm h4 {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0 0 32px 0;
    }


    #comments #postCommentForm small {
        font-size: medium;
    }

    #comments #postCommentForm #reply-title a:first-child {
        color: rgb(53, 157, 238);
    }

    #comments #postCommentForm #reply-title #cancel-comment-reply-link {
        display: inline-block;
        margin: 0 0 16px 8px;
        padding: 0 8px 0 8px;
        line-height: 32px;
        font-size: 1em;
        color: rgb(255, 255, 255);
        border-radius: 3px;
        background: rgb(235, 76, 76);
    }

        #comments #postCommentForm #reply-title #cancel-comment-reply-link:hover {
            border-radius: 3px;
            background: rgb(209, 38, 38);
        }

    #comments #postCommentForm #loggedInAs {
        margin: 0 0 24px 0;
    }

        #comments #postCommentForm #loggedInAs a {
            color: rgb(53, 157, 238);
        }

        #comments #postCommentForm #loggedInAs #logOut {
            display: inline-block;
            margin: 0 0 16px 8px;
            padding: 0 8px 0 8px;
            line-height: 32px;
            font-size: 1em;
            color: rgb(255, 255, 255);
            border-radius: 3px;
            background: rgb(235, 76, 76);
        }

@media (max-width: 380px) {
    #comments #postCommentForm #loggedInAs #logOut {
        display: inline-block;
        margin: 16px 0 0 0;
    }
}

#comments #postCommentForm #loggedInAs #logOut:hover {
    border-radius: 3px;
    background: rgb(209, 38, 38);
}

/* #endregion */

/* #region commentaires : functions.php */

#comments #commentList {
    display: block;
    width: 100%;
}

    #comments #commentList .comment {
        display: block;
        width: 100%;
        margin: 0 0 32px 0;
    }

    #comments #commentList .children {
        margin: 32px 0 0 88px;
    }

#comments .commentMetadata {
    display: inline-block;
    width: 72px;
    vertical-align: top;
}

    #comments .commentMetadata .commentAvatar {
        width: 72px;
        height: 72px;
    }

    #comments .commentMetadata .commentDate {
        margin: 8px 0 8px 0;
    }

        #comments .commentMetadata .commentDate .dateDisplay {
            display: inline-block;
            width: 16px;
            padding: 4px 3px 4px 3px;
            margin: 2px 1px 2px 1px;
            text-align: center;
            font-size: 0.9em;
            color: rgb(255, 255, 255);
            background: rgb(47, 47, 55);
            border-radius: 3px;
        }

    #comments .commentMetadata .commentMetadataAuthor {
        width: 72px;
        height: 24px;
        margin: 8px 0 0 0;
        text-align: center;
        text-transform: uppercase;
        font-size: 0.8em;
        color: rgb(255, 255, 255);
        background: rgb(255, 197, 107);
        border-radius: 3px;
    }

        #comments .commentMetadata .commentMetadataAuthor p {
            font-weight: bold;
            line-height: 24px;
        }

#comments #commentList .comment .commentSection,
#comments #commentList .children .commentSection {
    display: inline-block;
    line-height: 1.4em;
    vertical-align: top;
}

#comments #commentList .comment .commentSection {
    position: relative;
    width: calc(100% - 88px);
    margin: 0 0 0 16px;
}

    #comments #commentList .comment .commentSection .commentContent {
        padding: 8px 16px 8px 16px;
        background: rgb(255, 255, 255);
        border: solid 1px rgb(220, 220, 220);
    }

        #comments #commentList .comment .commentSection .commentContent:hover {
            background: rgb(246, 246, 246);
        }

    #comments #commentList .comment .commentSection .commentAuthor p,
    #comments .commentSection .commentAuthor a {
        margin: 0 0 10px 0;
        font-weight: bold;
        color: rgb(99, 185, 251);
    }

    #comments #commentList .comment .commentSection .commentPlus {
        display: block;
        margin: 16px 0 0 0;
        text-align: right;
    }

        #comments #commentList .comment .commentSection .commentPlus .waitingForApproval {
            display: inline;
            margin: 0 12px 0 0;
        }

            #comments #commentList .comment .commentSection .commentPlus .waitingForApproval p {
                display: inline-block;
                height: 32px;
                padding: 0 8px 0 8px;
                line-height: 32px;
                font-size: 1em;
                color: rgb(255, 255, 255);
                background: rgb(255, 0, 70);
                border-radius: 3px;
            }

        #comments #commentList .comment .commentSection .commentPlus .commentReply {
            display: inline;
        }

            #comments #commentList .comment .commentSection .commentPlus .commentReply a {
                height: 32px;
                padding: 4px 8px 4px 8px;
                line-height: 32px;
                font-size: 1em;
                color: rgb(255, 255, 255);
                border-radius: 3px;
                background: rgb(99, 185, 251);
            }

                #comments #commentList .comment .commentSection .commentPlus .commentReply a:hover {
                    background: rgb(56, 110, 151);
                }

#comments #postCommentForm {
    position: relative;
}

    #comments #postCommentForm #respond {
        width: 100%;
    }

    #comments #postCommentForm #commentNotes {
        font-size: 0.9em;
    }

    #comments #postCommentForm #commentFormAuthor,
    #comments #postCommentForm #commentFormEmail,
    #comments #postCommentForm #commentFormUrl {
        margin: 16px 0 16px 0;
    }

        #comments #postCommentForm #commentFormAuthor input,
        #comments #postCommentForm #commentFormEmail input,
        #comments #postCommentForm #commentFormUrl input {
            width: 192px;
            margin: 0 16px 0 0;
            padding: 8px 16px 8px 16px;
            font-size: 1em;
            font-weight: bold;
            background: rgb(251,251, 251);
            border: solid 1px rgb(220, 220, 220);
            outline: none;
        }

            #comments #postCommentForm #commentFormAuthor input:focus,
            #comments #postCommentForm #commentFormEmail input:focus,
            #comments #postCommentForm #commentFormUrl input:focus,
            #comments #postCommentForm #commentform textarea:focus {
                border: solid 1px rgb(255, 197, 107);
            }

        #comments #postCommentForm #commentFormAuthor label,
        #comments #postCommentForm #commentFormEmail label,
        #comments #postCommentForm #commentFormUrl label {
            font-size: 1em;
        }

@media (max-width: 380px) {

    #comments #postCommentForm #commentFormAuthor input,
    #comments #postCommentForm #commentFormEmail input,
    #comments #postCommentForm #commentFormUrl input {
        width: 128px;
    }

    #comments #postCommentForm #commentFormAuthor label,
    #comments #postCommentForm #commentFormEmail label,
    #comments #postCommentForm #commentFormUrl label {
        font-size: 0.8em;
    }
}

#comments #postCommentForm #comment {
    box-sizing: border-box;
    min-width: 100%;
    max-width: 100%;
    min-height: 224px;
    max-height: 352px;
    padding: 16px 16px 16px 16px;
    font-family: 'Open Sans';
    font-size: 1em;
    line-height: 1em;
    background: rgb(251, 251, 251);
    border: solid 1px rgb(220, 220, 220);
    outline: none;
}

#comments #postCommentForm .form-submit {
    display: inline-block;
    width: 100%;
    margin: 16px 0 0 0;
    text-align: right;
}

#comments #postCommentForm #submit {
    height: 32px;
    padding: 0 8px 0 8px;
    line-height: 32px;
    font-size: 1em;
    color: rgb(255, 255, 255);
    background: rgb(19, 226, 163);
    border-radius: 3px;
    border: none;
    outline: none;
}

    #comments #postCommentForm #submit:hover {
        background: rgb(22, 191, 140);
    }

.commentPagination {
    text-align: center;
}

    .commentPagination .pagination {
        display: inline-block;
        margin: 32px 0 32px 0;
        text-align: center;
        border-radius: 3px;
    }

        .commentPagination .pagination a,
        .commentPagination .pagination span {
            display: inline-block;
            width: 24px;
            height: 40px;
            margin: 0 -4px 0 0;
            padding: 0 8px 0 8px;
            line-height: 40px;
            background: rgb(99, 185, 251);
            color: rgb(255, 255, 255);
        }

        .commentPagination .pagination span {
            margin: 0 -5px 0 0;
        }

        .commentPagination .pagination .page-numbers:hover {
            background: rgb(56, 110, 151);
        }

        .commentPagination .pagination .current {
            background: rgb(56, 110, 151);
        }

        .commentPagination .pagination .prev {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .commentPagination .pagination .next {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

/* #endregion */

/* #endregion */

/* #endregion */

#search\.php #noResult {
    margin: 64px 0 64px 0;
}

    #search\.php #noResult h4 {
        margin: 0 0 48px 0;
        font-size: 1.6em;
        line-height: 1em;
        font-weight: bold;
    }

/* #endregion */

/* #region 404.php */

#error404\.php #error404 {
    margin: 64px 0 64px 0;
}

    #error404\.php #error404 p {
        text-align: center;
    }

    #error404\.php #error404 #code {
        margin: 0 0 64px 0;
        font-size: 12em;
        font-family: monospace;
        line-height: 1em;
        text-align: center;
        text-shadow: -8px 0 0 rgb(0, 255, 0);
    }

/* #endregion */

/* #region related posts */

html[data-useragent*='MSIE 10.0'] #single\.php #relatedPostsByCategory,
html[data-useragent*='MSIE 10.0'] #page\.php #relatedPostsByCategory,
html[data-useragent*='rv:11.0'] #single\.php #relatedPostsByCategory,
html[data-useragent*='rv:11.0'] #page\.php #relatedPostsByCategory,
html[data-useragent*='Edge'] #single\.php #relatedPostsByCategory, /* 1px line between divs that mess things up */
html[data-useragent*='Edge'] #page\.php #relatedPostsByCategory { /* 1px line between divs that mess things up */
    margin: -1px 0 -1px 0;
}

#single\.php #relatedPostsByCategory,
#page\.php #relatedPostsByCategory {
    width: 100%;
    height: 100%;
}

    #single\.php #relatedPostsByCategory h4,
    #page\.php #relatedPostsByCategory h4 {
        margin: 48px 0 48px 0;
        font-size: 1.6em;
        line-height: 1em;
        font-weight: bold;
        text-align: center;
    }

    #single\.php #relatedPostsByCategory ul,
    #page\.php #relatedPostsByCategory ul {
        display: block;
        width: 100%;
        font-size: 0; /* trick to collapse <li> */
    }

        #single\.php #relatedPostsByCategory ul li,
        #page\.php #relatedPostsByCategory ul li {
            font-size: 16px; /* trick to collapse <li> + text right size (see above) */
        }

            #single\.php #relatedPostsByCategory ul li .thumbnailURL,
            #page\.php #relatedPostsByCategory ul li .thumbnailURL {
                display: block;
                position: relative;
                padding-bottom: calc(100% / 2);
                overflow: hidden;
                background: rgb(56, 110, 151);
                transition: all 1s ease;
                box-shadow: rgb(0, 0, 0) 0 0 4px;
            }

html[data-useragent*='MSIE 10.0'] #single\.php #relatedPostsByCategory ul li .thumbnailURL,
html[data-useragent*='MSIE 10.0'] #page\.php #relatedPostsByCategory ul li .thumbnailURL,
html[data-useragent*='rv:11.0'] #single\.php #relatedPostsByCategory ul li .thumbnailURL,
html[data-useragent*='rv:11.0'] #page\.php #relatedPostsByCategory ul li .thumbnailURL,
html[data-useragent*='Edge'] #single\.php #relatedPostsByCategory ul li .thumbnailURL, /* IE10 & IE11 hack */
html[data-useragent*='Edge'] #page\.php #relatedPostsByCategory ul li .thumbnailURL { /* IE10 & IE11 hack */
    transition: none;
}

#single\.php #relatedPostsByCategory ul li:hover .thumbnailURL,
#page\.php #relatedPostsByCategory ul li:hover .thumbnailURL {
    transition: all 1s ease;
    box-shadow: rgb(0, 0, 0) 0 0 8px;
}

#single\.php #relatedPostsByCategory ul li .thumbnailURL .relatedPostThumbnail,
#page\.php #relatedPostsByCategory ul li .thumbnailURL .relatedPostThumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
}

    #single\.php #relatedPostsByCategory ul li .thumbnailURL .relatedPostThumbnail img,
    #page\.php #relatedPostsByCategory ul li .thumbnailURL .relatedPostThumbnail img {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: auto;
    }

#single\.php #relatedPostsByCategory ul li a,
#page\.php #relatedPostsByCategory ul li a {
    width: 100%;
}

    #single\.php #relatedPostsByCategory ul li a p,
    #page\.php #relatedPostsByCategory ul li a p {
        width: 100%;
        margin: 16px 0 48px 0;
        line-height: 1.2em;
        color: rgb(0, 0, 0);
        text-overflow: ellipsis;
        overflow: hidden;
    }

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

    #single\.php #relatedPostsByCategory ul li a p,
    #page\.php #relatedPostsByCategory ul li a p {
        margin: 16px 0 16px 0;
    }
}

@media only screen and (max-width: 380px) {
    #single\.php #relatedPostsByCategory .col-1-3,
    #page\.php #relatedPostsByCategory .col-1-3 {
        display: inline-block;
        width: calc(100% - 32px);
        margin: 0 16px 32px 16px;
    }

    #single\.php #relatedPostsByCategory ul li .thumbnailURL,
    #page\.php #relatedPostsByCategory ul li .thumbnailURL {
        padding-bottom: calc(100% / 3);
    }
}

/* #endregion */

/* #region latestsPosts */

#page\.php #latestPosts,
#search\.php #latestPosts,
#error404\.php #latestPosts {
    width: 100%;
    height: 100%;
    font-size: 1em;
}

    #page\.php #latestPosts h4,
    #search\.php #latestPosts h4,
    #error404\.php #latestPosts h4 {
        margin: 48px 0 48px 0;
        font-size: 1.6em;
        line-height: 1em;
        font-weight: bold;
        text-align: center;
    }

    #page\.php #latestPosts ul,
    #search\.php #latestPosts ul,
    #error404\.php #latestPosts ul {
        width: 100%;
        font-size: 0; /* trick to collapse <li> */
    }

        #page\.php #latestPosts ul li,
        #search\.php #latestPosts ul li,
        #error404\.php #latestPosts ul li {
            font-size: 16px; /* trick to collapse <li> + text right size (see above) */
        }

            #page\.php #latestPosts ul li .thumbnailURL,
            #search\.php #latestPosts ul li .thumbnailURL,
            #error404\.php #latestPosts ul li .thumbnailURL {
                display: block;
                position: relative;
                padding-bottom: calc(100% / 2);
                overflow: hidden;
                background: rgb(56, 110, 151);
                transition: all 1s ease;
                box-shadow: rgb(0, 0, 0) 0 0 4px;
            }

html[data-useragent*='MSIE 10.0'] #page\.php #latestPosts ul li .thumbnailURL,
html[data-useragent*='MSIE 10.0'] #search\.php #latestPosts ul li .thumbnailURL,
html[data-useragent*='MSIE 10.0'] #error404\.php #latestPosts ul li .thumbnailURL,
html[data-useragent*='rv:11.0'] #page\.php #latestPosts ul li .thumbnailURL,
html[data-useragent*='rv:11.0'] #search\.php #latestPosts ul li .thumbnailURL,
html[data-useragent*='rv:11.0'] #error404\.php #latestPosts ul li .thumbnailURL,
html[data-useragent*='Edge'] #page\.php #latestPosts ul li .thumbnailURL, /* IE10 & IE11 hack */
html[data-useragent*='Edge'] #search\.php #latestPosts ul li .thumbnailURL, /* IE10 & IE11 hack */
html[data-useragent*='Edge'] #error404\.php #latestPosts ul li .thumbnailURL { /* IE10 & IE11 hack */
    transition: none;
}

#page\.php #latestPosts ul li:hover .thumbnailURL,
#search\.php #latestPosts ul li:hover .thumbnailURL,
#error404\.php #latestPosts ul li:hover .thumbnailURL {
    transition: all 1s ease;
    box-shadow: rgb(0, 0, 0) 0 0 8px;
}

#page\.php #latestPosts ul li .thumbnailURL .latestPostThumbnail,
#search\.php #latestPosts ul li .thumbnailURL .latestPostThumbnail,
#error404\.php #latestPosts ul li .thumbnailURL .latestPostThumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
}

    #page\.php #latestPosts ul li .thumbnailURL .latestPostThumbnail img,
    #search\.php #latestPosts ul li .thumbnailURL .latestPostThumbnail img,
    #error404\.php #latestPosts ul li .thumbnailURL .latestPostThumbnail img {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: auto;
    }

#page\.php #latestPosts ul li a,
#search\.php #latestPosts ul li a,
#error404\.php #latestPosts ul li a {
    width: 100%;
}

    #page\.php #latestPosts ul li a p,
    #search\.php #latestPosts ul li a p,
    #error404\.php #latestPosts ul li a p {
        width: 100%;
        margin: 16px 0 64px 0;
        line-height: 1.2em;
        color: rgb(0, 0, 0);
        text-overflow: ellipsis;
        overflow: hidden;
    }

@media (max-width: 640px) {
    #page\.php #latestPosts ul li a p,
    #search\.php #latestPosts ul li a p,
    #error404\.php #latestPosts ul li a p {
        margin: 16px 0 16px 0;
    }
}

@media (max-width: 640px) {
    #page\.php #latestPosts .col-1-3,
    #search\.php #latestPosts .col-1-3,
    #error404\.php #latestPosts .col-1-3 {
        display: inline-block;
        width: calc(100% - 32px);
        margin: 0 16px 32px 16px;
    }

    #page\.php #latestPosts ul li .thumbnailURL,
    #search\.php #latestPosts ul li .thumbnailURL,
    #error404\.php #latestPosts ul li .thumbnailURL {
        padding-bottom: calc(100% / 3);
    }
}

/* #endregion */