@import "https://www.timkoegler.de/res/style/_base.css";
@import "https://www.timkoegler.de/res/style/layout-centered.css";
@import "https://www.timkoegler.de/res/style/mode-light.css";

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url("https://www.timkoegler.de/res/fonts/Montserrat-Light.woff2") format('woff2')
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 300;
    src: url("https://www.timkoegler.de/res/fonts/Montserrat-Light-Italic.woff2") format('woff2')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url("https://www.timkoegler.de/res/fonts/Montserrat-Bold.woff2") format('woff2')
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    src: url("https://www.timkoegler.de/res/fonts/Montserrat-Bold-Italic.woff2") format('woff2')
}

* {
    letter-spacing: 0 !important;
}

body {
    color: #4b4b4d;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif !important;
}

.button, 
button {
    font-weight: 700;
}

p {
    margin-bottom: .4em;
}

.icon-left {
    float: left;
    margin-right: 0.4em;
    margin-top: 0.4em;
}

header span.website-tagline,
aside.blog-sidebar {
    display: none !important;
}

header .title-container {
    position: relative;
    max-width: 64rem;
    margin-left: auto !important;
    margin-right: auto !important;
}

header nav {
    max-width: none !important;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: #4b4b4d;
    font-weight: 700;
}

main h1 {
    margin-bottom: calc(1.8 * 0.5rem);
}

main p,
main li {
    color: #4b4b4d;
    text-align: left !important;
}

main small {
    font-size: 75%;
}

main blockquote {
    position: relative;
    font-size: 2em;
    font-weight: 400;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left !important;
}

main blockquote::before {
    content: '\201E';
    position: absolute;
    font-size: 3em;
    font-weight: 700;
    line-height: 0;
    left: 0;
    top: -.25em;
    color: rgba(0, 0, 0, .15);
}

main blockquote small {
    font-size: .5em;
    font-weight: 400;
}

div.pagecover,
div#container main.template-set>.collection-description,
div#container main.template-album>.collection-description,
div#container main.template-albums>.collection-description {
    margin-bottom: 2em !important;
}

div.pagecover div.cover-text .cover-title,
div.pagecover div.cover-text .cover-tagline,
div.pagecover div.cover-text .cover-link,
div#container .start-intro {
    max-width: 64rem;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

div#container .start-intro h1 {
    font-size: 1.5em;
}

div#container .start-slideshow {
    margin-bottom: 2em;
}

div.backlink {
    color: #000;
    font-weight: 400;
    font-size: .75em;
    margin-bottom: .25em;
    text-transform: uppercase;
}

p.links-prevnext {
    font-size: .75em;
}

p.links-prevnext a {
    font-weight: 400;
    color: #000;
    opacity: 1;
}

ul.gallery.gallery-set.layout-mosaic li span.info,
ul.gallery.gallery-set.layout-wall li span.info {
    background-color: rgba(0, 0, 0, .5);
    font-size: 1em;
    font-weight: 400;
    opacity: 1;
}

.template-tag-container {
    position: relative;
    background-color: #000;
}

.template-tag-container .template-tag-embed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.template-tag-container.loaded .template-tag-embed-overlay {
    display: none !important;
}

.template-tag-container .template-tag-embed-overlay p {
    color: #fff;
    margin-bottom: 1em;
}

footer ul.secondary li a {
    font-size: .75em;
}

@media (max-width: 999px) {

    header span.website-title,
    header h1.website-title {
        width: 120px;
        height: 20px;
        margin-top: -4px;
    }

     header .button-contact {
        margin-top: -4px;
     }

    header nav>ul li {
        border-top: 1px solid rgba(0, 0, 0, .15);
    }

    header nav>ul li.active {
        background-color: rgba(0, 0, 0, .075);
    }

    header nav>ul li>.nav-item-title {
        font-weight: 400;
        text-transform: uppercase;
    }

    main.template-startshowcase ul.slideshow {
        height: auto !important;
        aspect-ratio: 2 / 3 !important;
    }

}

@media (min-width: 1000px) {

    header nav ul {
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    div#container {
        margin: 2em auto;
    }

    div#container main {
        margin-block: 0;
        padding-block: 3em;
        padding-bottom: 3em;
    }

    div#container main h1 {
        font-size: 2.5em;
    }

}