/* Allgemein */
body {
    font-family: 'Segoe UI', 'Roboto', 'Dosis', sans-serif;
}

@media screen and (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 980px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
.site-header {
    margin: 120px 0 0 0;
    
}
@media screen and (min-width: 768px) {
    .site-header {
        margin-top: 220px;
    }
    .site-header .col {
        flex: 0 1 34rem;
    }
}

.bg-transparent {
    background-color: transparent;
}

/* === Page-Header === */
#page_header {
    /* display: none; */
}


/* Navbar */
.nav-link,
.dropdown-item {
    padding: .7rem 1rem;
}
.dropdown-menu {
    background-color: rgba(255, 255, 255, .8);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #e9ecef;
}
@media screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        flex: 0 1 0%;
    }
    .navbar ul {
        font-size: 12px;
    }
    .nav-item {
        padding: .5rem 1rem;
    }
    .dropdown-menu {
        background-color: transparent;
        background-clip: unset;
        border: none;
        border-radius: 0;
    }
    .dropdown-item {
        padding: .25rem 1rem;
    }
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: transparent;
    }
}

/* BG-Slider */
#hero {
    min-height: 100vh;
}
#hero .container-fluid {
    position: absolute;
    top: 300px !important;
}

.bgslider > div {
    position: absolute;
    height: 100vh;
    background-size: cover;
}

/* Gallery */
.image-table {
    flex-direction: column;
}
.image-table a {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: rgb(143,107,84);
    text-decoration: none;
}
.image-table h5 > a {
    font-size: 25px;
    letter-spacing: normal;
    color: #333;
    text-decoration: none;
}

/* Category */
#category img {
    border-radius: 0;
}

/* Smooth Zoom Image from https://w3bits.com/css-image-hover-zoom/ */
/* [1] The container */
.img-hover-zoom {
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}
  
/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
    transition: transform 1s ease, filter .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
    transform: scale(1.1);
    filter: brightness(50%);
}

.img-hover-zoom .col {
    flex: 0 1 0%;
    height: 30px;
    color: #fff;
}

#category .card-text {
    font-size: 1.2rem;
}

#category .bi-reply::before {
    -moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
    font-size: 1.5rem;
}

#category .img-hover-zoom .card-img-overlay {
    /* display: none; */
    opacity: 0;
    transition: opacity 1s ease;
}
#category .img-hover-zoom:hover .card-img-overlay {
    /* display: block; */
    opacity: 1;
}

/* === Biography === */
#biography .section {
    border-bottom: 1px #ccc solid;
}

#biography .jdb-foot {
    color: rgb(143,107,84);
    text-transform: uppercase;
}

/* === Forms === */
.form-control {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #333;
}
.form-control:hover,
.form-control:focus {
    border: 1px solid #333;
}
.btn-submit {
    color: rgb(143,107,84);
}
.btn-submit:hover {
    color: rgba(143,107,84,.5);
}

/* === Post-Header === */
#img_post {
    /* display: none; */
}

#btn_fullscreen {
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    #img_post {
        height: -webkit-calc(100vh - 100px);
        height: -moz-calc(100vh - 100px);
        height: calc(100vh - 100px);
    }
    .img-post-header {
        margin-top: 64px;
        font-size: 1.2rem;
    }
}

/* === Image Fullscreen === */
#img_fullscreen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100vw;
    z-index: 100024;
    background-color: #fff;
}
#img_fullscreen i {
    font-size: 2rem;
}
#img_fullscreen .bi {
    cursor: pointer;
}
#img_fullscreen img {
    height: 100%;
    width: auto;
}

/* Footer */
#page_footer {
    /* display: none; */
    height: auto;
    background-color: rgb(218,199,188);
    padding: 2rem;
}
#page_footer a {
    color: #333;
    text-decoration: none;
    display: block;
    margin: 1.5rem 0;
}

@media screen and (min-width: 768px) {
    #page_footer {
        height: 150px;
        padding-top: 65px;
    }
    #page_footer a {
        display: inline-block;
        margin: 0 1.5rem;
    }
}