/* STYLESHEET */

/* FONTS ADDENDUM */

 @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Sora:wght@300;500;700&display=swap');

/* <style> ========================================================================================================== */
/* TYPO */ /* ================================================================================================================== */

html, body { 
    min-height:100%;
    max-width:100%;
    height:100%;
    font-family: 'Sora','Open Sans', Arial, sans-serif; 
    font-size: 16px;
    line-height: 1.4em; 
    font-weight: 300;
    color: #efefef;
    background-color: #313139;
}

@media only screen and (min-width : 768px)
{
    html, body { font-size: 18px; line-height: 1.6em; } 
}

h1 { font-size: 2.1em; margin-top: 0; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }
p { margin-bottom: 1.3em; }
.lead { font-size: 1.2em; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 
    letter-spacing: 1px;
    font-weight: 400;
    font-family: 'DM Serif Display','Sora','Open Sans', Arial, sans-serif; 
    color: #d0b182;
    margin: 30px 0 15px;
}

/* ================================================================================================================== */
/* BOOTSTRAP OVERWRITES */
/* ================================================================================================================== */

a { color: #d0b182;}
a:hover, a:focus { color: #907142; }


/*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A
            /*  PRIMARY COLOR OVERWRITES { overwrites bootstrap 3 primary color settings } 
            /*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A*/

            .bs-primary-border { border-color: #d0b182; }
            .bs-primary-background { background-color: #d0b182; }
            .bs-primary-color { color: #d0b182; }

            .text-primary { color: #d0b182; }

            .bg-primary, .bg-brand  {
                color: #000;
                background-color: #d0b182;
            }

            .progress-bar-primary {
                color: #000;
                background-color: #d0b182;
            }

            a.bg-primary:hover,
            a.bg-primary:focus {
                background-color: #907142;
            }

            .btn-primary, .btn-primary:link, .btn-primary:visited {
                color: #000;
                background-color: #d0b182;
                border-color: #c3a475;
            }

            .btn-primary:focus,
            .btn-primary.focus,
            .btn-primary:hover,
            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                color: #FFF;
                background-color: #b69768;
                border-color: #aa8b5c;
            }

            .btn-primary:active:hover,
            .btn-primary.active:hover,
            .open > .dropdown-toggle.btn-primary:hover,
            .btn-primary:active:focus,
            .btn-primary.active:focus,
            .open > .dropdown-toggle.btn-primary:focus,
            .btn-primary:active.focus,
            .btn-primary.active.focus,
            .open > .dropdown-toggle.btn-primary.focus {
                color: #FFF;
                background-color: #aa8b5c;
                border-color: #9d7e4f;
            }

            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                background-image: none;
            }

            .btn-primary.disabled:hover,
            .btn-primary[disabled]:hover,
            fieldset[disabled] .btn-primary:hover,
            .btn-primary.disabled:focus,
            .btn-primary[disabled]:focus,
            fieldset[disabled] .btn-primary:focus,
            .btn-primary.disabled.focus,
            .btn-primary[disabled].focus,
            fieldset[disabled] .btn-primary.focus {
                background-color: #d0b182;
                border-color: #c3a475;
            }

            .btn-primary:not(:disabled):not(.disabled):active {
                color: #FFF;
                background-color: #b09162;
                border-color: #aa8b5c;
            }
            
            .btn-primary .badge {
                color: #d0b182;
                background-color: #000;
            }

            .label-primary {
                background-color: #d0b182;
            }

            .label-primary[href]:hover,
            .label-primary[href]:focus {
                background-color: #836435;
            }

            .panel-primary {
                border-color: #d0b182;
            }

            .panel-primary > .panel-heading {
                color: #000;
                background-color: #d0b182;
                border-color: #d0b182;
            }

            .panel-primary > .panel-heading + .panel-collapse > .panel-body {
                border-top-color: #d0b182;
            }

            .panel-primary > .panel-heading .badge {
                color: #d0b182;
                background-color: #000;
            }

            .panel-primary > .panel-footer + .panel-collapse > .panel-body {
                border-bottom-color: #d0b182;
            }

            .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
                background-color: #d0b182;
                border-color: #d0b182;
            }

            .pagination>li>a, .pagination>li>span {
                color: #d0b182;
            }
            
            .page-link:hover {
                color: #b69768;
            }
            

.jumbotron { color: #313139; }

/* ================================================================================================================== */
/* BASIC BUILDING BLOX */
/* ================================================================================================================== */

.hero {
    height: 70px;
    background-color: #313139;
    transition: all 0.2s;
    background-image: url('../img/stonewall.png');
    background-position: bottom center;
    background-repeat: repeat-x;
}

.logobalk {
    margin-top: -50px;
    transition: all 0.2s;
}

.brandlogo {
    display: block; 
    margin: 0 auto 0;
    max-width: 90%; 
}

.navbalk {
    display: flex;
    align-items: center;
}

.navbalk div {
    display: block;
    flex: 1;
    text-align: center;
    font-weight: 400;
    font-family: 'DM Serif Display','Sora','Open Sans', Arial, sans-serif; 
    
}

.navbalk div.active a {
    text-decoration: underline;
}


@media only screen and (min-width : 480px) {
    .hero { height: 70px; transition: all 0.2s; }
    .logobalk { margin-top: -60px; transition: all 0.2s; }
}

@media only screen and (min-width : 768px) {
    .hero { height: 125px; transition: all 0.2s; }
    .logobalk { margin-top: -110px; transition: all 0.2s; }
    .navbalk div { font-size: 1.7em; }
}

@media only screen and (min-width : 992px) {
    .hero { height: 200px; transition: all 0.2s; }
    .logobalk { margin-top: -135px; transition: all 0.2s; }
}

@media only screen and (min-width : 1200px) {
    .hero { height: 200px; transition: all 0.2s; }
    .logobalk { margin-top: -160px; transition: all 0.2s; }
}

.colorbalk {
    padding: 3em 0;
    margin: 60px 0;
    background-color: black;
}

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

#header, header {
    margin: 0 0 0 0;
    background-color: #313139;
    background-image: url('../img/dark-brick-wall.png');
    background-position: bottom center;
    background-repeat: repeat-all;
}

#content {
    padding: 3em 0 2em;
    background-color: #313139;
    background-image: url('../img/dark-brick-wall.png');
    background-position: top center;
    background-repeat: repeat-all;
}

@media only screen and (min-width : 992px) {
    #content { padding: 6em 0 5em; }
}

.gal.item { margin-bottom: 30px; }
.gal.item img { border-radius: 10px; }
.meta.titel { text-align: center; margin: 7px 0 0; font-weight: 500; }


/* ================================================================================================================== */
/* PEOPLE */
/* ================================================================================================================== */

.peoplelist {
	display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;    
    margin-right: -10px;
    margin-left: -10px;
    margin-bottom: 30px;
}

.person {
	padding-right: 10px;
    padding-left: 10px;
    width: 50%;
    position: relative;
    height: 100%;
    float: left;
}

.peoplelist h2 { text-align: center; margin: 40px 0 15px 0;  }
.peopleitem { border: 2px solid #d0b182; background-color: #313139; border-radius: 15px; position: relative; overflow: hidden; margin: 15px 0; clear: both; }
.profielfoto { border: 2px solid #d0b182; border-radius: 15px; }

.peopleitem .namebanner { 
    position: absolute;
    bottom: 25px;
    right: 0px;
    left: 0px;
    width: 100%;
    overflow: hidden; 
}

.peopleitem .namebanner span { background-color: #d0b182; padding: 5px 8px; }

.peopleitem .namebanner .name { 
    font-family: 'DM Serif Display','Sora','Open Sans', Arial, sans-serif; 
    font-weight: 400;
    font-size: 1.8em;
    line-height: 0.9em;
    text-align: center;
    margin: 0 auto 5px;
    padding: 5px;
    clear: both;
    text-shadow: #313139 0px 0px 3px;
}

.peopleitem .namebanner .title { 
    font-size: 0.7em;
    line-height: 1.2em;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 5px;
    clear: both;
    color: black;
    font-weight: 400;
}

@media only screen and (min-width : 768px) {
    .peopleitem .namebanner .name { font-size: 2.2em; line-height: 0.9em; }
    .peopleitem .namebanner .title { font-size: 0.8em; line-height: 1.2em; }
}

@media only screen and (min-width : 992px) {
    .person { width: 25%; }
    .peopleitem .namebanner .name { font-size: 1.90em; line-height: 0.9em; }
    .peopleitem .namebanner .title { font-size: 0.8em; line-height: 1.2em; }
}

@media only screen and (min-width : 1200px) {
    .person { width: 25%; }
    .peopleitem .namebanner .name { font-size: 2.1em; line-height: 0.9em; }
    .peopleitem .namebanner .title { font-size: 0.8em; line-height: 1.2em; }
}

.peopleitem { transition: all 0.1s; }
.peopleitem:hover { box-shadow: 0 2px 10px #d0b182; transition: all 0.3s; }

.peopleitem img { transition: all 0.5s;  opacity: 1;  }
.peopleitem:hover img { transform: scale(1.25); transition: all 2s; opacity: 0.8; }


.char-list, .stats-list { 
    padding-left: 0; 
    margin-left: -0.2rem; 
    clear: both;
}

.char-list>li, .stats-list>li { 
    min-width: 166px;
    display: inline-block;
    padding-right: 15px;
    margin: 0.2rem;
    background-color: #333;
    background-image: linear-gradient(180deg,#2e2e2e,#212121);
    border-radius: 6px;
}

.char-list>li:before, .stats-list>li:before {
    display: none !important;
}

.char-list strong, .stats-list strong {
    background-color:#191919;
    min-width:70px;
    display:inline-block;
    padding:8px 15px;
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
    margin-right:10px
}

.char-list > li { min-width: 340px; }
.char-list strong { min-width: 140px; }

@media only screen and (min-width : 1200px) {

    .stats-list > li {
        min-width: auto;
        width: 14%;
        text-align: center;
        padding: 0 0 10px 0;
        border-radius: 6px;
    }
    
    .stats-list strong {
        display: block;
        min-width: auto;
        width: 100%;
        margin: 0 0 10px 0; 
        border-radius: 6px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }
}


/* ================================================================================================================== */
/* CARDS (for episodes) */
/* ================================================================================================================== */

.episodelist {
	display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;    
    margin-right: -10px;
    margin-left: -10px;
}

.episode {
	padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    position: relative;
    height: 100%;
    float: left;
}

@media only screen and (min-width : 480px) {
    .episode { width: 50%; }
}

@media only screen and (min-width : 992px) {
    .episode { width: 33.33%; }
}


.card { height: 100%; position: relative; margin: 15px 0 30px; clear: both; }
.card-image { border: 2px solid #d0b182; border-radius: 15px; overflow: hidden; }

.card-bol { 
    background-color: #d0b182;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    line-height: 50px;
    position: absolute; 
    top: -5px;
    left: 35px;
    font-weight: 700;
}

.card-title { 
    letter-spacing: 1px;
    font-weight: 400;
    font-family: 'Epilogue','Sora','Open Sans', Arial, sans-serif; 
    color: #d0b182;
    margin-bottom: 0;
}

.card-descr {
    font-size: 15px;
    line-height: 1.3em;
    margin-bottom: 0;
    padding: 15px 0 0 0;
}

.episode .card-image { transition: all 0.1s; }
.episode:hover .card-image { box-shadow: 0 2px 10px #d0b182; transition: all 0.3s; }

.episode img { transition: all 0.5s;  opacity: 1;  }
.episode:hover img { transform: scale(1.25); transition: all 2s; opacity: 0.8; }


/* ================================================================================================================== */
/* CARDS (for episodes) */
/* ================================================================================================================== */


.lexicongroup {
	display: flex;
    margin: 0 -10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.lexiconword {
	padding: 0 10px;
    margin: 10px 0;
    width: 100%;
}

@media only screen and (min-width : 480px) {
    .lexiconword { width: 50%; }
}

@media only screen and (min-width : 992px) {
    .lexiconword { width: 33.33%; }
}

.lexiconwordinner {
    border: 2px solid #d0b182; 
    border-radius: 15px; 
    overflow: hidden;
    padding: 15px;
    position: relative;
    height: 100%;
}

.lexiconword .title {
    margin: 0;
    font-weight: 400;
    font-family: 'DM Serif Display','Sora','Open Sans', Arial, sans-serif; 
    font-size: 1.5em;
    line-height: 1.2em;
    color: #d0b182; 
}

.lexiconword .subtitle {
    margin: 0;
    color: #777;
    font-size: 1.2em;
    line-height: 1em; 
    font-weight: 400;
    font-family: 'DM Serif Display','Sora','Open Sans', Arial, sans-serif; 
    padding-bottom: 15px;
    border-bottom: 1px solid #d0b182;
}

.lexiconword .descr {
    font-size: 0.9em; 
    line-height: 1.3em;
    margin-bottom: 0;
    padding: 15px 0 0 0;
}


/* ================================================================================================================== */
/* SUBMENU */
/* ================================================================================================================== */

.nav.nav-pills {
    margin-bottom: 20px;
}

.nav-pills > li {
    margin: 0;
    padding: 0;
}

.nav-pills > li > a {
    color: #acacac;
    background-color: transparent;
    border-radius: 0;
    padding: 0.6em 5px;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #dadada;
    line-height: 1.2em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.nav-pills > li.active > a {
    color: #d0b182;
    font-weight: 500;
    background-color: transparent;
}

.nav-pills > li > a:focus, 
.nav-pills > li > a:hover,
.nav-pills > li.active > a:focus, 
.nav-pills > li.active > a:hover {
    color: #000;
    background-color: transparent;
}



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

#prefooter {
    padding: 100px 0 25px 0; 
    background-color: #ddd;
    color: #313139;
    background-image: url('../img/borderline.png');
    background-position: top center;
    background-repeat: repeat-x;
}

#prefooter h3, #prefooter a { 
    color: #00a9a5;
}

#footer {
    padding: 0.8em 0 0;
    background-color: #313139;
    color: white;
    overflow: hidden;
    font-size: 0.8em;
}

#footer a {
    color: #fff;
}

#footer a:hover {
    color: #fff1c2;
    text-decoration: none;
}

.footer-left, .footer-right { text-align: center; }
    
@media only screen and (min-width : 768px) 
{
    .footer-left { text-align: left; }
    .footer-right { text-align: right; }
}