:root {
    --red: red;
}

/*src: url(asset-url("/fonts/Montserrat-Regular.ttf")) format('truetype');*/

@font-face {
    font-family: "ebgaramond";
    src: url("/fonts/EBGaramond-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    size-adjust: 110%;
}

@font-face {
    font-family: "ebgaramond";
    src: url("/fonts/EBGaramond-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
    size-adjust: 110%;
}

@font-face {
    font-family: "gloock";
    src: url("/fonts/Gloock-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Bold.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-BoldItalic.ttf.ttf") format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Bold.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-BoldItalic.ttf") format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-Bold.ttf") format('truetype');
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-RegularItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-MediumItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Regular.ttf") format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Italic.ttf") format('truetype');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-MediumItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Bold.ttf") format('truetype');
    font-style: normal;
    font-weight: bold;
}

*, .image_container > * {
    font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
}

html, body {
}

body {
    height: 100%;
}

#cosplayer_of_the_day a {
    color: white;

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

.text_container {
    font-family: "ebgaramond", "Open Sans", "lato", sans-serif, serif;
    font-size: 1.25rem;
    text-align: left;
    white-space: pre-wrap;
    padding: 0 .5rem 0 .5rem;

    & * {
        font-family: inherit;
        text-align: inherit;
        font-size: inherit;
        text-justify: inherit;
        white-space: inherit;
    }

    legend {
        margin-bottom: .25em;
    }

    & > h2 {
        line-height: 1.4em;
    }

    & > h1, & > h2, & > h3, & > h4, & > h1 a, & > h2 a, & > h3 a, & > h4 a {
        font-family: "ebgaramond", "Open Sans", "lato", sans-serif, serif;
        font-size: revert;
        margin-bottom: 0;
    }

    ul, ul li, ul li a {
        white-space: normal;
        text-align: left;
    }
}

h1, h2, h1 a, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, .card-title {
    font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
    font-weight: bold;
}

.nav_font {
    font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
}

.title_font, .title_font a {
    font-family: "gloock", "Open Sans", "lato", sans-serif, serif;
}

.subtitle {
    font-family: "crimsontext", "Open Sans", "lato", sans-serif, serif;
    font-size: 1.4rem;
}

.btn.active {
    -webkit-box-shadow: 0 0.25em 0.1em 0 #999999;
    -moz-box-shadow: 0 0.25em 0.1em 0 #999999;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

.card-text {
    font-size: smaller;
}

#error_explanation {
    text-align: center;

    h3, ul, li {
        color: var(--red);
    }
}

.field_with_errors {
    background-color: lightcoral;

    & span, & input, & textarea {
        border: 1px solid red;
        display: inline-block;
        vertical-align: top;
    }

    & + input[type=" checkbox "] {
        outline: 1px solid red;
    }

    select {
        border: 2px solid lightcoral;
    }
}

.floating_button {
    position: fixed;
    bottom: .5em;
    right: 1em;
    z-index: 101;
}

.fluid-img img {
/ / This auto-resizes the image . / / max-width: 100 %;
    height: auto;
    width: 100%;
}

.footer_links {
    a, a:visited, a:hover {
        color: black;
        text-decoration: none;
    }
}

.haze {
    opacity: .5;
}

.image_container {
    margin: 0 auto;
    margin-bottom: 0.5em;

    .card {
        margin: 0 auto;
    }

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

.image_above_text_center {
    clear: both;
    text-align: center;
    overflow: hidden;

    .text_container {
        text-align: center;
    }
}


.image_above_text_left {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: left;
    }

    .image_container {
        text-align: center;
    }

    .text_container {
        text-align: left;
    }
}

.image_above_text_right {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: right;
    }

}

.image_below_text_center {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: center;
    }

    .image_container {
    }
}

.image_below_text_left {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: left;
    }

    .image_container {
    }
}

.image_below_text_right {
    clear: both;
    overflow: hidden;

    .text_container {
        text-align: right;
    }

    .image_container {
    }
}

.image_left_text_wrap {
    clear: both;
    overflow: hidden;

    .card {
        overflow: hidden;
    }

    .image_container {
        float: none;
        overflow: hidden;
    }

    .text_container, .text_container {
        text-align: left;
    }
}

.image_only {
    display: inline-block;
    margin: 0 auto;
    vertical-align: top;
/ / width: 100 %;

    .image_container img {
        max-width: 100%;
        height: auto;
    }

    .text_container {
        display: none;
        overflow: hidden;
    }
}

.image_right_text_wrap {
    overflow: hidden;

    .card {
        overflow: hidden;
    }

    .image_container {
        float: none;
    }

    .text_container {
        text-align: left;
    }
}

.img-click-to-enlarge {
    display: none;
}

.icon_black {
    color: black;
}

.page-item.prev {
    display: none;
}

.pull_quote {
    border-radius: 5px;
    box-shadow: 0 0 6px 1px rgba(201, 201, 201, 1);
    background-color: white;
    border: 1px solid #c0c0c0;
    font-family: "ebgaramond", "Open Sans", "lato", sans-serif, serif;
    font-size: 1.1rem;
    padding: .9rem;
    margin: .5em auto;

    & * {
        font-family: "ebgaramond", "Open Sans", "lato", sans-serif, serif;
    }
}

/* Make the nav bar centered on collapsed view. */

.navbar .navbar-collapse {
    text-align: center;
}

#scroll_to_top_button {
    position: fixed;
    top: .5em;
    right: 1em;
    z-index: 101
}

.social_media_icons {
    text-align: center;
    float: left;
    padding-bottom: .7rem;
    padding-top: .5rem;
    margin: 0 .7rem;
    border-radius: 6px;
    border: 1px solid rgb(222, 226, 230);

    legend {
        color: black;
        font-size: 1rem;
    }
}

.social-share-button {
    text-align: center;

    .ssb-icon {
        height: 1.5rem;
        width: 1.5rem;
        background-size: 1.5rem 1.5rem;
    }
}

.red {
    color: var(--red);
}

.ui-datepicker-trigger {
    border: none;
    background: none;
    width: 2em;
    height: 2em;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .image_left_text_wrap .image_container {
        float: left;
        max-width: 45%;
        padding-left: 0.7em;
        padding-right: .7em;
    }

    .image_right_text_wrap .image_container {
        float: right;
        max-width: 45%;
        padding-left: 0.7em;
        padding-right: 0.7em;
    }

    .img-click-to-enlarge {
        display: block;
    }

    .image_only {
        max-width: 49%;


        .image_container img {
            width: 100%;
        }
    }

    .page-item.prev {
        display: list-item;
    }

    .pull_quote {
        width: calc(100% - 2em);
    }

    .rounded-md-3 {
        border-radius: .5rem;
    }

    ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
}

.rotate-text {
    transform: rotate(-5deg);
    background-color: white;
    opacity: 50%;
    transform-origin: center left;
}