:root {
    --default-font-stack: Lato;
}

* {
    border-radius: 0px !important;
}

.fs-ms {
    font-size: 100% !important;
}

body:has(header.custom-is-mainpage) {
    padding-top:0px !important;
}

header.custom-is-mainpage > div:not(.navbar-stuck) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent !important;
}

header.custom-is-mainpage > div:not(.navbar-stuck) .navbar-brand > img {
    opacity:0;
}

header.custom-is-mainpage > div:not(.navbar-stuck) .navbar-expand-lg .navbar-nav .nav-item > a {
    color: white;
}

@media (max-width: 991px) {
    header.custom-is-mainpage > div:not(.navbar-stuck) .navbar-expand-lg .navbar-nav .nav-item > a {
        color: black;
    }
}

header.custom-is-mainpage > div:not(.navbar-stuck) .navbar-expand-lg .navbar-nav .nav-item:hover > a,
header.custom-is-mainpage > div:not(.navbar-stuck) .navbar-expand-lg .navbar-nav .nav-item.active > a {
    color: var(--primary);
}

header.custom-is-mainpage > div:not(.navbar-stuck) .navbar .navbar-tool-icon-box {
    color:white;
}

header.custom-is-mainpage > div:not(.navbar-stuck) .navbar-toggler-icon {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

header.custom-is-mainpage > div:not(.navbar-stuck) .navbar-light .navbar-tool-icon-box.bg-secondary {
    background-color: transparent !important;
}

header.custom-is-mainpage > picture {
    display: block;
    position: relative;
    z-index: -1;
}

header.custom-is-mainpage > picture > img {
    height: 100vh;
    object-fit: cover;
    width: 100%;
}

@media (min-width: 300px) {
    header.custom-is-mainpage > picture::before {
        position: absolute;
        padding-left: 10%;
        bottom: 42%;
        content: url(https://lohrer.ch/files/design/lohrer-logo-shadow.png.res-688x150.png);
    }

    header.custom-is-mainpage > picture::after {
        content: "Wo Tr\00E4ume Gestalt annehmen";
        position: absolute;
        line-height: 1;
        padding-left: 10%;
        bottom: 23%;
        left: 0px;
        color: #fff;
        font-size: 11vw;
        text-shadow: 2px 2px 8px black;
    }
}

@media (min-width: 600px) {
    header.custom-is-mainpage > picture::after {
        font-size: 6vw;
    }
}

@media (min-width: 992px) {
    .navbar-brand {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .navbar-expand-lg .navbar-nav {
        justify-content: flex-end;
    }

    .navbar-nav .nav-item {
        border-radius: 0px;
        margin-left: 1px;
        margin-right: 1px;
    }

    .navbar-expand-lg .navbar-nav .nav-item > a {
        text-transform: uppercase;
        font-weight: bold;
        border: 1px solid transparent;
        letter-spacing: 1px;
    }

    .navbar-expand-lg .navbar-nav .nav-item:hover > a,
    .navbar-expand-lg .navbar-nav .nav-item.active > a {
        border: 1px solid var(--primary);
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 110%;
        padding: 0.5rem 0.75rem !important;
    }

    .navbar-expand-lg .navbar-nav .nav-item .dropdown-menu .dropdown-item {
        text-transform: uppercase;
        font-weight: bold !important;
        font-size: 110%;
        letter-spacing: 1px;
    }
}


section.page-title {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

section.page-title .page-title-breadcrumbs {
    display: none;
}

section.page-title .page-title-title {
    text-align: center !important;
    width: 100%;
}

section.page-title .page-title-title h1 {
    text-transform: uppercase;
    font-weight: bold;
}

/* Start - header search */
header .msw-search-suggestion,
header .msw-mobile-search {
    border-radius: 0px !important;
}
/* End - header search */

/* Start - widget bilderbox */
.msw-portfolio.type-image-box {
    max-width: 940px;
}

.msw-portfolio.type-image-box .mgrid-item .card {
    box-shadow: 0 0.25rem 0.5625rem -0.0625rem rgba(0, 0, 0, 0.03), 0 0.275rem 1.25rem -0.0625rem rgba(0, 0, 0, 0.05);
}

.msw-portfolio.type-image-box .mgrid-item .card img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover;
}

.msw-portfolio.type-image-box .mgrid-item .row > * > p {
    hyphens: auto;
}

.msw-portfolio.type-image-box .mgrid-item .row > * > a {
    background-color: var(--default-link-color);
    color: white;
    padding: 0.5rem 0.75rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: var(--cz-card-spacer-y) !important;
    display: inline-block;
}

.msw-portfolio.type-image-box .mgrid-item .row > * > a > i {
    display: none !important;
}

@media (min-width: 992px) {
    .msw-portfolio.type-image-box .mgrid-item .row > * {
        flex: 0 0 auto !important;
        width: 50% !important;
    }

    .msw-portfolio.type-image-box .mgrid-item .row > * > h6 {
        font-size: 175% !important;
        font-weight: bold;
        margin-bottom: var(--cz-card-spacer-y) !important;
    }
}
/* End - widget bilderbox */

/* Start - widget Bildergalerie 24er */
.ReferencesFooter {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ReferencesFooter > h3 {
    width: 100%;
    font-size: 110%;
    font-weight: bold;
    color: var(--primary);
}

.ReferencesFooter > div {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: calc((100% - (3 * 20px)) / 4);
}

.ReferencesFooter > div > a {
    display: block;
    height: 100%;
}

.ReferencesFooter > div > a > div {
    background-size: cover;
    background-position: center center;
    width: 100% !important;
    height: 100% !important;
}
/* End - widget Bildergalerie 24er */

/* Start - widget productgallery */
.productgallery .row > div a img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover;
}
/* End - widget productgallery */

/* Start - widget categorygallery */
.categorygallery .row > div a img {
    aspect-ratio: 4 / 3 !important;
    object-fit: cover;
}
/* End - widget categorygallery */

/* Start - widget employee */
.employee:hover > .inner > .front {
    display:none !important;
}

.employee:hover > .inner > .back {
    display: block !important;
}

.employee > .inner {
    aspect-ratio: 750 / 1050;
}

.employee > .inner > div {
    height:100%;
}

.employee > .inner > div > div.content {
    height: 100%;
    background-size: cover;
    background-position: center center;
}

.employee > .inner > div.front > div.content {
    position: relative;
}

.employee > .inner > div.front > div.content > div {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 25px;
    margin: 0px;
}

.employee > .inner > div.front > div.content > div > h3 {
    color:white;
    font-size:100%;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:0px;
}

.employee > .inner > div.front > div.content > div > h3 > span {
    display: block;
    margin-top: 5px;
    color: white;
    font-weight: 300;
    text-transform: none;
}

.employee > .inner > div.back {
    display: none;
}

.employee > .inner > div.back > div.content {
    position:relative;
}

.employee > .inner > div.back > div.content > ul {
    display:none !important;
}

.employee > .inner > div.back > div.content > .tab-content {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    align-items: flex-end;
    margin: 0px;
}

.employee > .inner > div.back > div.content > .tab-content > .tab-pane.fade {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    padding: 25px;
}

.employee > .inner > div.back > div.content > .tab-content > .tab-pane > div > p {
    color: white;
    font-size: 100%;
    font-weight: 300;
}

.employee > .inner > div.back > div.content > .tab-content > .tab-pane > div > p:last-child {
    margin-bottom: 0px;
}

.employee > .inner > div.back > div.content > .tab-content > .tab-pane > div > p > span {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
}
/* End - widget employee */

/* Start - widget blogcategory */
.blog-categories > .blog-list {
    flex-direction: column;
    max-width: 940px;
}

.blog-categories > .blog-list .blog-start-column {
    padding-right: 0px !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.blog-categories > .blog-list .blog-start-column > *:first-child {
    order: 2;
    width: 100%;
    font-size: 100% !important;
}

.blog-categories > .blog-list .blog-start-column > *:last-child {
    width: 100%;
    order: 1;
    font-size: 175% !important;
    font-weight: bold;
}

.blog-categories > .blog-list .blog-start-column > *:last-child > a {
    font-weight: bold;
    color:var(--primary);
}

.blog-categories > .blog-list .blog-end-column {
    padding-left: 0px !important;
    width: 100%;
}

.blog-categories > .blog-list .blog-end-column > * {
    font-size:100% !important;
}
/* End - widget blogcategory */

/* Start - footer */
footer.footer {
    background: -webkit-linear-gradient(rgba(68,68,68,.75),rgba(68,68,68,.75)),url(https://lohrer.ch/files/v200317151001/shop/M%C3%B6belbau/Weinkeller/weinkeller-hauptbild.jpg) no-repeat center center fixed;
    background-size:cover;
    background-position:center center;
    padding-bottom:0px !important;
}

footer .msw-image {
    text-align:left;
}

footer .msw-image img {
    max-width:220px;
}

footer h2,
footer h3 {
    font-size: 120% !important;
    font-weight: bold !important;
    margin-bottom: 0rem !important;
}

footer .msw-sub-area:first-child > section > .container {
    padding-bottom: 1.5rem !important;
}

footer .msw-sub-area:last-child > section > .container {
    padding-top: 1.5rem !important;
}
/* End - footer */