/* ============================================================
   AHSTORY.ORG
   AMERICAN HORROR STORY
   COPPERMINE THEME — DH_EXACT
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

html,
body {
    margin: 0;
    padding: 0;
}

html {
    background: #eeeeee;
}

body {
    margin: 0;
    padding: 0;

    background: #eeeeee;

    color: #333333;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 1.5;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

a {
    color: #172b47;
    text-decoration: none;
}

a:hover {
    color: #ae1d2b;
}


/* ============================================================
   GLOBAL CONTAINER
   ============================================================ */

.ahstory-container {
    width: 94%;
    max-width: 1350px;

    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   TOP BAR
   ============================================================ */

#ahstory-topbar {
    min-height: 30px;

    background: #050505;

    border-bottom: 1px solid #3b1015;

    color: #bfc7d1;
}

#ahstory-topbar .ahstory-container {
    min-height: 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.topbar-left {
    color: #8d8d8d;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;
}

.topbar-right {
    font-size: 10px;
}

.topbar-right a {
    color: #bdbdbd;

    margin-left: 13px;
}

.topbar-right a:hover {
    color: #c32332;
}


/* ============================================================
   HEADER
   ============================================================ */

#ahstory-header {
    position: relative;

    width: 100%;

    height: 480px;

    overflow: hidden;

    background: #050505;
}

.header-image {
    position: absolute;

    inset: 0;

    background-image:
        url("images/header.jpg");

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;
}

.header-dark {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,0) 50%,
            rgba(0,0,0,.12) 100%
        );

    pointer-events: none;
}

.header-container {
    position: relative;

    z-index: 5;

    height: 100%;

    display: flex;

    align-items: center;
}

.ahstory-logo {
    display: none;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

#ahstory-navigation {
    min-height: 52px;

    background: #071527;

    border-bottom: 3px solid #ae1d2b;

    box-shadow:
        0 2px 6px rgba(0,0,0,.25);
}

.navigation-container {
    min-height: 49px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;
}

.navigation-container a {
    position: relative;

    min-height: 49px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d5d9df;

    background: transparent;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: normal;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    border-right:
        1px solid rgba(255,255,255,.07);

    transition:
        color .2s ease,
        background .2s ease;
}

.navigation-container a::after {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;

    bottom: 0;

    height: 2px;

    background: transparent;

    transition:
        background .2s ease;
}

.navigation-container a:hover {
    color: #ffffff;

    background:
        rgba(255,255,255,.04);
}

.navigation-container a:hover::after {
    background: #ae1d2b;
}

.navigation-container a.nav-home {
    color: #ffffff;

    background:
        rgba(174,29,43,.15);
}

.navigation-container a.nav-home::after {
    background: #ae1d2b;
}


/* ============================================================
   MAIN
   ============================================================ */

#ahstory-main {
    padding:
        20px 0 45px;

    background:
        #f1f1f1;
}

#ahstory-content {
    width: 100%;

    padding: 25px;

    background:
        #ffffff;

    border:
        1px solid #d9d9d9;

    box-shadow:
        0 1px 6px rgba(0,0,0,.08);
}


/* ============================================================
   COPPERMINE TABLES
   ============================================================ */

table {
    border-collapse: collapse;
}

td,
th {
    border-color: #dedede;
}

.maintable {
    width: 100% !important;

    margin:
        0 auto 20px !important;

    background:
        #ffffff !important;

    border:
        1px solid #dddddd !important;
}

.tableb {
    background:
        #ffffff !important;

    border-color:
        #dddddd !important;
}

.tablef {
    background:
        #f7f7f7 !important;

    border-color:
        #dddddd !important;
}


/* ============================================================
   SECTION HEADERS
   ============================================================ */

.tableh1 {
    padding:
        10px 14px !important;

    background:
        #091a31 !important;

    color:
        #ffffff !important;

    border:
        0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        bold !important;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}

.tableh1 a {
    color:
        #ffffff !important;
}

.tableh2 {
    padding:
        9px 12px !important;

    background:
        #10243d !important;

    color:
        #ffffff !important;

    border-color:
        #d5d5d5 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        bold !important;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;
}


/* ============================================================
   CATEGORIES
   ============================================================ */

.catrow {
    background:
        #ffffff !important;

    border-bottom:
        1px solid #e5e5e5 !important;

    transition:
        background .2s ease;
}

.catrow:hover {
    background:
        #fafafa !important;
}

.catrow td {
    padding:
        10px 12px !important;

    vertical-align:
        middle !important;
}

.catlink {
    position:
        relative;

    display:
        inline-block;

    padding:
        6px 0 6px 16px;

    color:
        #182b47 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        15px !important;

    font-weight:
        normal !important;

    letter-spacing:
        .8px;

    line-height:
        1.3;

    text-transform:
        uppercase;

    transition:
        color .2s ease,
        padding-left .2s ease;
}

.catlink::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        50%;

    width:
        3px;

    height:
        18px;

    transform:
        translateY(-50%);

    background:
        #ae1d2b;

    transition:
        width .2s ease;
}

.catlink:hover {
    color:
        #ae1d2b !important;

    padding-left:
        21px;
}

.catlink:hover::before {
    width:
        5px;
}

.catrow:first-child .catlink {
    color:
        #ae1d2b !important;

    font-size:
        18px !important;

    font-weight:
        bold !important;

    letter-spacing:
        1px;
}


/* ============================================================
   ALBUMS
   ============================================================ */

.alblink {
    color:
        #182b47 !important;

    font-size:
        13px !important;

    font-weight:
        bold !important;
}

.alblink:hover {
    color:
        #ae1d2b !important;
}


/* ============================================================
   VIGNETTES
   150 × 150
   GROS CONTOUR GRIS CLAIR
   ============================================================ */

.thumbnail {
    position: relative;

    width: 150px !important;
    height: 150px !important;

    padding: 0 !important;

    margin: 10px !important;

    overflow: hidden !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    vertical-align: top !important;

    /*
     * Le cadre est entièrement gris.
     * Aucun fond blanc.
     */
    background:
        #d4d4d4 !important;

    /*
     * GROS CONTOUR GRIS
     */
    border:
        8px solid #d4d4d4 !important;

    /*
     * Pas d'ombre.
     */
    box-shadow:
        none !important;

    transition:
        border-color .3s ease;
}


/* ============================================================
   SUPPRESSION DES ANCIENS EFFETS
   ============================================================ */

.thumbnail::before,
.thumbnail::after {
    display:
        none !important;

    content:
        none !important;
}


/* ============================================================
   IMAGE DANS LA VIGNETTE
   ============================================================ */

.thumbnail img {
    display:
        block !important;

    max-width:
        none !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

    border:
        0 !important;

    /*
     * Photo normale au repos.
     */
    filter:
        grayscale(0);

    transition:
        filter .35s ease;
}


/* ============================================================
   SURVOL
   PHOTO PRESQUE NOIR & BLANC
   ============================================================ */

.thumbnail:hover img {
    filter:
        grayscale(90%)
        brightness(.85);
}


/* ============================================================
   SURVOL DU CADRE
   ============================================================ */

.thumbnail:hover {
    border-color:
        #c8c8c8 !important;

    background:
        #c8c8c8 !important;

    box-shadow:
        none !important;
}


/* ============================================================
   TITRES SOUS LES VIGNETTES
   ============================================================ */

.thumb_title {
    display:
        block !important;

    margin-top:
        8px !important;

    color:
        #182b47 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        bold !important;

    line-height:
        1.3 !important;

    text-align:
        center !important;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;
}

.thumb_title:hover {
    color:
        #ae1d2b !important;
}


/* ============================================================
   NOM DE FICHIER
   ============================================================ */

.thumb_filename {
    display:
        block !important;

    margin-top:
        3px !important;

    color:
        #777777 !important;

    font-size:
        10px !important;

    line-height:
        1.3 !important;

    text-align:
        center !important;
}


/* ============================================================
   INFORMATIONS DES VIGNETTES
   ============================================================ */

.thumb_caption,
.thumb_info,
.thumb_stats {
    display:
        block !important;

    color:
        #888888 !important;

    font-size:
        10px !important;

    line-height:
        1.5 !important;

    text-align:
        center !important;
}


/* ============================================================
   VIEWS / DATE
   ============================================================ */

.thumb_caption a {
    color:
        #777777 !important;
}

.thumb_caption a:hover {
    color:
        #ae1d2b !important;
}


/* ============================================================
   LAST UPDATED ALBUMS
   ============================================================ */

.lastalb {
    background:
        #ffffff;
}

.lastalb a {
    color:
        #182b47;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        13px;

    font-weight:
        normal;
}

.lastalb a:hover {
    color:
        #ae1d2b;
}


/* ============================================================
   FORMS
   ============================================================ */

input,
select,
textarea {
    padding:
        6px 8px;

    color:
        #333333;

    background:
        #ffffff;

    border:
        1px solid #cccccc;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;
}

input:focus,
select:focus,
textarea:focus {
    outline:
        none;

    border-color:
        #72849b;
}

input[type="submit"],
input[type="button"],
input[type="reset"],
.button {
    padding:
        7px 14px;

    color:
        #ffffff;

    background:
        #0b1b31;

    border:
        1px solid #071527;

    cursor:
        pointer;

    font-weight:
        bold;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover {
    background:
        #ae1d2b;
}


/* ============================================================
   MESSAGE
   ============================================================ */

#message {
    margin-bottom:
        15px;

    padding:
        10px 12px;

    background:
        #fff8e7;

    color:
        #555555;

    border:
        1px solid #ead9b1;
}


/* ============================================================
   ADMIN
   ============================================================ */

.admin_menu {
    margin-bottom:
        15px;

    padding:
        8px 10px;

    background:
        #f4f4f4;

    border:
        1px solid #dddddd;
}


/* ============================================================
   HEADINGS
   ============================================================ */

h1,
h2,
h3,
h4 {
    color:
        #182b47;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        normal;
}

h1 {
    padding-bottom:
        10px;

    border-bottom:
        2px solid #ae1d2b;
}


/* ============================================================
   FOOTER
   ============================================================ */

#ahstory-footer {
    width:
        100%;

    padding:
        0 0 18px;

    background:
        #000000;

    color:
        #999999;

    border-top:
        3px solid #8f1723;
}

.ahstory-footer-container {
    width:
        100%;

    max-width:
        650px;

    margin:
        0 auto;
}


/* ============================================================
   FOOTER IMAGE
   ============================================================ */

.ahstory-footer-image-wrapper {
    position:
        relative;

    width:
        100%;

    max-width:
        550px;

    margin:
        0 auto;

    overflow:
        hidden;

    background:
        #000000;

    text-align:
        center;
}

.ahstory-footer-image {
    display:
        block;

    width:
        100%;

    max-width:
        550px;

    height:
        auto;

    margin:
        0 auto;

    border:
        0;
}


/* ============================================================
   SOCIAL LINKS
   ============================================================ */

.footer-social-link {
    position:
        absolute;

    display:
        block;

    z-index:
        20;

    border-radius:
        50%;

    cursor:
        pointer;

    background:
        transparent;

    outline:
        none;
}

.footer-x-link {
    width:
        52px;

    height:
        52px;

    left:
        72%;

    top:
        30%;
}

.footer-facebook-link {
    width:
        52px;

    height:
        52px;

    left:
        83%;

    top:
        30%;
}

.footer-social-link:hover {
    background:
        rgba(174,29,43,.08);

    box-shadow:
        0 0 10px rgba(174,29,43,.15);
}


/* ============================================================
   FOOTER NAVIGATION
   ============================================================ */

.ahstory-footer-navigation {
    padding:
        12px 8px 3px;

    text-align:
        center;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}

.ahstory-footer-navigation a {
    color:
        #888888;

    transition:
        color .2s ease;
}

.ahstory-footer-navigation a:hover {
    color:
        #c32332;
}

.ahstory-footer-navigation span {
    margin:
        0 5px;

    color:
        #7f1722;
}


/* ============================================================
   COPYRIGHT
   ============================================================ */

.ahstory-footer-copyright {
    margin-top:
        7px;

    color:
        #505050;

    text-align:
        center;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .5px;
}


/* ============================================================
   TABLET
   ============================================================ */

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

    .thumbnail {
        width:
            150px !important;

        height:
            150px !important;
    }

    .thumbnail img {
        width:
            134px !important;

        height:
            134px !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

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

    #ahstory-header {
        height:
            300px;
    }

    .navigation-container {
        justify-content:
            center;
    }

    .navigation-container a {
        padding:
            0 12px;

        font-size:
            9px;

        letter-spacing:
            1px;
    }

    #ahstory-content {
        padding:
            15px;
    }

    .thumbnail {
        width:
            150px !important;

        height:
            150px !important;

        margin:
            7px !important;
    }

    .thumbnail img {
        width:
            134px !important;

        height:
            134px !important;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

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

    #ahstory-header {
        height:
            250px;
    }

    .header-image {
        background-position:
            center center;

        background-size:
            cover;
    }

    .thumbnail {
        width:
            150px !important;

        height:
            150px !important;

        margin:
            6px !important;
    }

    .thumbnail img {
        width:
            134px !important;

        height:
            134px !important;
    }

    .ahstory-footer-container {
        width:
            100%;

        max-width:
            100%;
    }

    .ahstory-footer-image-wrapper {
        width:
            85%;

        max-width:
            550px;
    }

    .ahstory-footer-image {
        width:
            100%;

        max-width:
            550px;
    }

    .footer-x-link {
        width:
            42px;

        height:
            42px;

        left:
            70%;

        top:
            28%;
    }

    .footer-facebook-link {
        width:
            42px;

        height:
            42px;

        left:
            82%;

        top:
            28%;
    }

    .ahstory-footer-navigation {
        line-height:
            2.2;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

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

    .ahstory-container {
        width:
            96%;
    }

    #ahstory-topbar .ahstory-container {
        justify-content:
            center;
    }

    .topbar-left {
        display:
            none;
    }

    #ahstory-header {
        height:
            210px;
    }

    .navigation-container {
        min-height:
            auto;

        justify-content:
            center;
    }

    .navigation-container a {
        min-height:
            38px;

        padding:
            0 8px;

        font-size:
            8px;

        letter-spacing:
            .7px;
    }

    #ahstory-main {
        padding:
            10px 0 25px;
    }

    #ahstory-content {
        padding:
            10px;
    }

    .thumbnail {
        width:
            150px !important;

        height:
            150px !important;

        margin:
            5px !important;
    }

    .thumbnail img {
        width:
            134px !important;

        height:
            134px !important;
    }

    .thumb_title {
        font-size:
            9px !important;
    }

    .ahstory-footer-image-wrapper {
        width:
            92%;

        max-width:
            550px;
    }

    .ahstory-footer-image {
        width:
            100%;

        height:
            auto;
    }

    .footer-x-link {
        width:
            35px;

        height:
            35px;

        left:
            69%;

        top:
            28%;
    }

    .footer-facebook-link {
        width:
            35px;

        height:
            35px;

        left:
            82%;

        top:
            28%;
    }

    .ahstory-footer-navigation {
        padding:
            12px 6px 3px;

        font-size:
            7px;

        letter-spacing:
            .7px;
    }

    .ahstory-footer-navigation span {
        margin:
            0 3px;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

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

    #ahstory-header {
        height:
            180px;
    }

    .navigation-container a {
        padding:
            0 6px;

        font-size:
            7px;
    }

    .thumbnail {
        width:
            140px !important;

        height:
            140px !important;

        margin:
            4px !important;
    }

    .thumbnail img {
        width:
            124px !important;

        height:
            124px !important;
    }

    .thumb_title {
        font-size:
            8px !important;
    }

    .ahstory-footer-image-wrapper {
        width:
            94%;
    }

    .ahstory-footer-navigation {
        font-size:
            7px;

        letter-spacing:
            .5px;
    }

    .footer-x-link {
        width:
            30px;

        height:
            30px;

        left:
            68%;

        top:
            27%;
    }

    .footer-facebook-link {
        width:
            30px;

        height:
            30px;

        left:
            82%;

        top:
            27%;
    }
}