@import 'flexvideo.css';
@import 'fix-bootstrap.css';

/* Only apply this style when the WordPress admin bar is visible (logged in users) */
body.admin-bar {
    padding-top: 32px;
    /* Adjust this value to match the admin bar height */
}

/* Ensure that your fixed header is placed below the admin bar */
body.admin-bar header {
    top: 32px;
    /* Push the header down to avoid overlap with the admin bar */
    z-index: 999;
    /* Ensure the header is below the admin bar */
}

@font-face {
    font-family: 'CircularXX-Book';
    src: url('../fonts/CircularXX-Book.otf') format('opentype');
}

@font-face {
    font-family: 'CircularXX-Medium';
    src: url('../fonts/CircularXX-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'CircularXX-Bold';
    src: url('../fonts/CircularXX-Bold.otf') format('opentype');
}

body {
    font-family: 'Source Sans 3', sans-serif;
    margin-bottom: 90vh;
}

#main {
    min-height: 200vh;
}

p {
    margin: 0 0 2.2vh;
    line-height: 1.66;
    max-width: 50vw;
    text-align: justify;
    font-size: larger;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'CircularXX-Book', sans-serif;
    /* Ensure CircularXX-Book is loaded correctly */
}

#content {
    margin-top: 140px;
    margin-bottom: 1vh;
}

div#main-column {
    padding-bottom: 20vh;
}


.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-top: 4vh;
    margin-bottom: 30px;
}

.h2,
h2 {
    font-size: clamp(2.5rem, 4vh, 3rem);
}

h4 {
    font-family: CircularXX-Bold;
    font-size: 18.66px;
    margin-top: 0;
}

.h3,
h3 {
    font-size: clamp(2rem, 3.5vh, 2.5rem);
}

h6 {
    margin-bottom: 0;
    font-family: 'CircularXX-Bold';
    font-size: 13.3px;
}

.justify {
    text-align: justify;
}

img.aligncenter {
    display: block;
    margin: 0 auto;
}

a {
    color: unset;
    text-decoration: none;
}

.title-seperator {
    font-weight: 100;
}

.stroke-link {
    position: relative;
    text-decoration: none;
    color: #000;
    max-width: fit-content;
    padding-bottom: 0px;
    line-height: 1.6;
    list-style-type: none;
    cursor: pointer;
}

.stroke-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #ddd;
    transition: width 0.3s ease;
}

.stroke-link:hover::before {
    width: 100%;
}

.stroke-link-li {
    position: relative;
    text-decoration: none;
    color: #000;
    max-width: fit-content;
}

.stroke-link-li::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #ddd;
    transition: width 0.3s ease;
}

.stroke-link-li:hover::before {
    width: 100%;
}

.sitemap-container ul,
#desktop-menu ul {
    list-style: none;
    padding-left: 0;
}

.sitemap-container ul li,
#desktop-menu ul li {
    position: relative;
    padding-left: 13%;
    padding-top: 15px;
    max-width: fit-content;
}


.sitemap-container ul li::before,
#desktop-menu ul li::before {
    content: '';
    /* Custom bullet or symbol */
    position: absolute;
    left: 0;
    font-size: 22px;
    /* Example size */
    color: #333;
    /* Example color */
    top: 11px;
}

#desktop-menu ul {
    padding-top: 2vh;
}



#desktop-menu ul li::after {
    content: '';
    /* Same symbol or different content */
    position: absolute;
    top: 11px;
    /* right: -12.33px; */
    /* Position it to the right */
    font-size: 22px;
    /* Same size as before */
    color: #333;
    /* Same color */
    /* Additional styles can be added here */
}

.sitemap-container ul li:hover::before,
#desktop-menu ul li:hover::before,
#desktop-menu ul li:hover::after {
    color: #000;
    /* Change color on hover */
}


a:focus,
a:hover {
    color: unset;
    text-decoration: none;
}



.ancient-browser-alert a {
    color: #fff;
    text-decoration: underline;
}

.page-header-top-right {
    margin-top: 10px;
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: unset;
}

.pagination {
    margin: 460px 0px 0px;
    padding-right: 30px;
}

.pagination-center {
    text-align: center;
}

.pagination-row {
    margin-bottom: 20px;
}

.required {
    color: #f00;
}

.row-with-vspace {
    margin-bottom: 20px;
    margin-top: 15px;
}

.site-branding {
    display: flex;
    height: 130px;
    align-items: center;
    background-color: white;
}


.site-menue {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.image-description {
    font-size: x-small !important;
}

.site-title {
    font-family: CircularXX-Bold;
    margin-bottom: 0;
    margin-top: 10px;
    font-size: 50px;
}

.site-title>a {
    text-decoration: none;
}

.site-title>div {
    height: auto;
    line-height: 18px;
}

.site-title .site-description {
    color: #999;
}

.site-title .site-title-heading {
    margin: 0;
    font-size: 50px;
    letter-spacing: -2.25px;
    margin-top: -25px;
    font-family: 'CircularXX-Bold';
}

.widget_calendar #wp-calendar {
    margin: 0;
}

.widget_calendar #wp-calendar #next {
    text-align: right;
}

#comments .comment-navigation {
    margin-bottom: 0;
}

#comments .comment-navigation-below {
    margin-bottom: 20px;
    margin-top: 15px;
}

#comments .media-list li .media {
    margin-top: 15px;
}

#comments .media-list li .media .media-body {
    border: 1px solid #eee;
    padding: 10px;
}

#comments .media-list li .media .media-body .comment-author {
    font-size: 12px;
    margin-bottom: 10px;
}

#comments .media-list ul.children {
    list-style: none;
    margin-left: 2.5em;
}

#main-column .wp-video-shortcode {
    display: block;
    height: auto;
    max-width: 100%;
}

#main-column .attachment .entry-content {
    margin-bottom: 20px;
}

#main-column .attachment .entry-content .attachment {
    text-align: center;
}

#main-column .attachment .entry-meta {
    margin-bottom: 20px;
}

#main-column .post,
#main-column .page {
    margin-bottom: 20px;
}

#main-column .post .entry-header .entry-meta {
    color: #999;
}

#main-column .post .entry-header .entry-meta a {
    color: inherit;
}

#main-column .post .entry-header .entry-meta .posted-on .updated {
    display: none;
}

#main-column .post .entry-meta .categories-icon {
    cursor: default;
}

#main-column .post .entry-meta .comments-link a {
    color: #333;
}

#main-column .post .entry-meta .comments-link a .comment-icon .comment-total,
#main-column .page .entry-meta .comments-link a .comment-icon .comment-total {
    color: #555;
    font-size: 12px;
    margin-left: 5px;
}

#main-column .attachment .edit-post-link a,
#main-column .attachment .entry-meta .edit-post-link a,
#main-column .post .entry-meta .edit-post-link a,
#main-column .page .entry-meta .edit-post-link a {
    color: #333;
}

#main-column .post .entry-meta .tags-icon {
    cursor: default;
}

#main-column .attachment .entry-title,
#main-column .post .entry-title,
#main-column .page .entry-title {
    margin-top: 0;
    word-wrap: break-word;
}

#sidebar-left .widget,
#sidebar-right .widget {
    border: 1px solid #eee;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 10px;
}

#sidebar-left .widget ul,
#sidebar-right .widget ul {
    padding-left: 20px;
}

#sidebar-left .widget .widget-title,
#sidebar-right .widget .widget-title {
    font-size: 18px;
    margin-top: 0;
}

.page-header-top-right {
    margin-top: 35px;
}

.navbar-default {
    background-color: unset;
    border-color: unset;
    background-image: unset;
    border: unset;
    box-shadow: unset;
}

header[role="banner"] {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding-top: 15px;
    background-color: white;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    font-family: 'CircularXX-Medium';
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.open>a {
    background-image: unset;
    filter: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    background-color: black;
    color: white;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: -5px;
    margin-right: -5px;
}

.navbar-default .navbar-toggle {
    border-color: #fff;
}

.navbar-default .navbar-nav>li>a {
    color: unset;
    padding: unset;
    padding: 2px 0;
}

.nav>li {
    position: relative;
    display: block;
    padding: 0 0 0 0px;
    margin-left: -12px;
}

.nav>li>a {
    position: relative;
    display: block;
    text-transform: lowercase;
}

.nav {
    text-transform: lowercase;
}

.navbar-toggle {
    position: relative;
    margin-right: -15px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.navbar {
    position: relative;
    min-height: unset;
    border: unset;
    margin-top: -10px;
}

.nav>li>a {
    font-size: 16.66px;
}

.navbar-nav {
    float: right;
    margin: unset;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: unset;
}

/** Biographien*/
.bioheadline {
    font-size: 16px;
}

img.size-medium.alignleft {
    filter: grayscale(1);
}

/** Artists*/
h2.entry-title {
    font-size: 18.66px;
    font-family: 'CircularXX-Medium';
    margin-bottom: 2.5em;
}

.werke.col-md-4 {
    min-height: 500px;
    display: inline-flex;
    flex-direction: column;
    font-size: 11px;
    line-height: 12px;
}

.toggle-artist {
    font-size: 18.66px;
    cursor: pointer;
    margin-left: -15px;
    font-family: 'CircularXX-Bold';
    line-height: 1.33em;
}

.artists-list {
    line-height: 1;
}

.collape-wrapper {
    padding-top: 30px;
}

.bio-link {
    padding-top: 10px;
}

.biotext {
    margin-bottom: 1em;
}

img.artist-portrait {
    filter: grayscale(1);
}

/* Accordion base styles */
.accordion {
    margin: 0;
    padding: 0;
}

.accordion-header {
    padding: 15px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

.accordion-title {
    margin: 0;
}

.accordion-content {
    display: none;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.accordion-content.active {
    display: block;
}

/* Active accordion */
.active-accordion .accordion-content {
    display: block;
}

footer#site-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
}

.container-single {
    min-height: 200vh;
}

/*ehibitions*/
.first-exhibition {
    padding: 30px 0;
}

.exhibition-item {
    min-height: 300px !important;
}

.border-top {
    border-top: 1px solid black;
    min-height: 30px;
    padding-bottom: 40px;
    padding-top: 40px;
}

.border-top-small {
    border-top: 1px solid black;
    min-height: 10px;
    padding-bottom: 15px;
}

.content-first-inline {
    margin-left: 20px;
}

.artist-image-links {
    margin-bottom: 50px;
}

.artist-image {
    filter: grayscale(1);
}

.image-single-gallery {
    padding: 20px 5px;
}

.image-single {
    padding-left: 0;
    padding-right: 0;
}

.pagination {
    margin: 460px 0px 0px;
    padding-right: 30px;
}

.modal-body {
    position: relative;
    padding: unset;
}

/** Quick Common class*/
.displaynon {
    display: none;
}

smaller {
    font-size: smaller;
}

.mr0 {
    margin: 0
}

.mr5 {
    margin: 5px
}

.mr10 {
    margin: 10px
}

.mr15 {
    margin: 15px
}

.mr20 {
    margin: 20px
}

.mrt5 {
    margin-top: 5px
}

.mrt10 {
    margin-top: 10px
}

.mrt15 {
    margin-top: 15px
}

.mrt20 {
    margin-top: 20px
}

.mrt30 {
    margin-top: 20px
}

.mrtb30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mrtb50 {
    margin-top: 50px;
    margin-bottom: 50px;
}

.mrtb70 {
    margin-top: 70px;
    margin-bottom: 70px;
}

.mrtb80 {
    margin-top: 70px;
    margin-bottom: 70px;
}

.mrr5 {
    margin-right: 5px
}

.mrr10 {
    margin-right: 10px
}

.mrr15 {
    margin-right: 15px
}

.mrr20 {
    margin-right: 20px
}

.mrb5 {
    margin-bottom: 5px
}

.mrb10 {
    margin-bottom: 10px
}

.mrb15 {
    margin-bottom: 15px
}

.mrb20 {
    margin-bottom: 20px
}

.mrb50 {
    margin-bottom: 50px
}

.mrb70 {
    margin-bottom: 70px
}

.mrb80 {
    margin-bottom: 70px
}

.mrb90 {
    margin-bottom: 90px
}

.mrl5 {
    margin-left: 5px
}

.mrr50 {
    margin-right: 50px
}

.mrl10 {
    margin-left: 10px
}

.mrl15 {
    margin-left: 15px
}

.mrl20 {
    margin-left: 20px
}

.pd0 {
    padding: 0
}

.pd5 {
    padding: 5px
}

.pd10 {
    padding: 10px
}

.pd15 {
    padding: 15px
}

.pd20 {
    padding: 20px
}

.pdt5 {
    padding-top: 5px
}

.pdt10 {
    padding-top: 10px
}

.pdt15 {
    padding-top: 15px
}

.pdt20 {
    padding-top: 20px
}

.pdt40 {
    padding-top: 40px
}

.pdt50 {
    padding-top: 50px
}

.pdt70 {
    padding-top: 70px
}

.pdr5 {
    padding-right: 5px
}

.pdr10 {
    padding-right: 10px
}

.pdr15 {
    padding-right: 15px
}

.pdr20 {
    padding-right: 20px
}

.pdb5 {
    padding-bottom: 5px
}

.pdb10 {
    padding-bottom: 10px
}

.pdb15 {
    padding-bottom: 15px
}

.pdb20 {
    padding-bottom: 20px
}

.pdb30 {
    padding-bottom: 20px
}

.pdt80 {
    padding-top: 80px
}

.pdl5 {
    padding-left: 5px
}

.pdl10 {
    padding-left: 10px
}

.pdl15 {
    padding-left: 15px
}

.pdl20 {
    padding-left: 20px
}

.pdtb10 {
    padding: 10px 0;
}

.pdtb30 {
    padding: 30px 0;
}

.pdtb50 {
    padding: 50px 0;
}

.pdtb65 {
    padding: 65px 0;
}

.pdtb-default {
    padding: 50px 0;
}

img {
    max-width: 100%;
}

.footer-imprint {
    padding: 15px 30px 15px;
    font-size: 11px;
}

.footer {
    position: fixed;
    bottom: 0;
}

.caption {
    font-size: 16.66px;
    font-family: 'CircularXX-Book';
    min-height: 6em;
    line-height: 1;
}


.caption-inner-image {
    margin: 33px;
}


.carousel-caption {
    position: absolute;
    bottom: -140px;
    z-index: 10;
    color: black;
    text-shadow: unset !important;
    line-height: 1em;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: initial !important;
}

.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
}

.wp-caption {
    border: unset;
    margin-bottom: 1.5em;
    max-width: 100%;
    font-size: xx-small;
}

/*Tooltipps*/
.tooltip-menue {
    position: relative;
    display: inline-block;
}

.tooltip-artists .tooltiptext-artists {
    visibility: hidden;
    width: 500px;
    background-color: white;
    text-align: left;
    border-radius: 6px;
    border: 1px solid;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -250px;
    /* Use half of the width (120/2 = 60), to center the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltiptext-menue a {
    color: black;
}

.tooltip-artists:hover .tooltiptext-artists {
    visibility: visible;
    opacity: 1;
}

hr {
    border-top: 1px solid #000;
}

/*news*/
.news-picture {
    /* border: 0.5px solid;
	*/
    max-width: 100%;
}

.news-link {
    font-family: 'CircularXX-Book';
    font-size: 13px;
    text-decoration: underline;
    padding-top: 30px;
}

.news-title {
    font-size: 18.66px;
    font-family: 'CircularXX-Bold';
    margin-top: 10px;
}

.news-artist {
    font-family: 'CircularXX-Book';
}

.gallery-thumbnail {
    min-height: 120px;
}

img.news-picture {
    max-width: 100%;
    min-width: 100%;
}

.content-news-caption {
    font-size: x-small;
    margin-left: -15px;
}

.container-dates-exhibitions {
    font-size: larger;
    line-height: 1.3em;
}

.ex-date {
    margin: -20px 0 0;
}

.two-col-right {
    padding-left: 65px;
}

.news-picture-recent {
    filter: grayscale(1);
}

img.artist-picture {
    float: left;
    max-height: 300px;
    padding-right: 20px;
}

.news-picture-container {
    max-height: 230px;
    height: 230px;
    overflow: hidden;
}

.d3-tour {
    cursor: pointer;
}

.video-container {
    position: relative;
    display: inline-block;
}

.video-container img {
    display: block;
}

.video-container .play-icon {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 11px 11px;
    cursor: pointer;
}

.modal-header {
    padding: 15px;
    border-bottom: none;
}

.slick-track {
    display: flex !important;
    /* align-content: center;
	*/
    align-items: center;
}

.slick-slider {
    margin-left: -15px;
}

.slick-slide img {
    display: block;
    max-height: 240px;
}

.exhibition-caption {
    padding-left: 1vh !important;
}

/*resposnsive*/
@media only screen and (max-width: 800px) {
    .navbar-default .navbar-toggle {
        border-color: #fff;
    }

    .cat-slider-image {
        min-width: 106%;
    }

    .col-xs-12 {
        width: 105%;
    }

    img {
        height: 100%;
    }

    .news-date {
        font-size: 14.66px;
    }

    .werke.col-md-4 {
        font-size: 13px;
        line-height: 14px;
    }

    .caption {
        font-size: 12.66px;
        font-family: CircularXX-Bold;
        line-height: 1.65em;
        margin-left: 15px;
    }

    .site-branding {
        position: fixed;
        width: 100%;
        z-index: 10000;
        background-color: white;
        margin-top: 0;
        display: flex;
        height: 140px;
        align-items: center;
    }

    .modal {
        top: 59px;
    }

    .news-picture {
        /* border: 0.5px solid;
		*/
        margin-left: -5px;
    }

    .toggle-artist {
        margin-top: 30px;
    }

    .two-col-right {
        padding-left: unset;
    }

    .content-news-caption {
        margin-left: 15px;
    }

    .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px;
        overflow-x: visible;
        border-top: none;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
        -webkit-overflow-scrolling: touch;
    }

    .video-container .play-icon {
        top: 34%;
    }

    .ex-date {
        margin: -20px 0 0;
    }

    .navbar-toggle {
        position: relative;
        margin-right: -50px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        margin-top: 3px;
    }

    img.artist-picture {
        max-height: none;
        /* Removes the max-height */
        height: auto;
        /* Ensures the height scales automatically */
    }

    .artist-picture {
        margin-bottom: 15px;
        /* Space between image and title */
    }

    .artist-title {
        margin-top: 0;
        /* Ensure no extra space above the title */
        margin-bottom: 30px;
        /* Additional space between title and the content */
    }

    .artist-box-image-item {
        padding-left: 0px;
        padding-right: 10px;
    }

    .artist-box-names {
        display: none;
    }
}



/* Basic reset for margins and paddings */
.mosaic-item {
    position: relative;
    overflow: hidden;
}

.mosaic-item img {
    display: block;
    width: 100%;
    height: auto;
}

.mosaic-content {
    display: flex;
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: bottom 0.3s ease, opacity 0.5s ease;
    z-index: 10;
    min-height: 100%;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 20px;
}

.mosaic-item {
    position: relative;
    overflow: hidden;
}

.mosaic-item:hover .mosaic-content {
    bottom: 0;
    opacity: 1;
}

.mosaic-content-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-decoration: none;
    /* Remove underline from link */
}

.mosaic-content a {
    position: relative;
    z-index: 20;
    /* Ensure internal links are above the overall content link */
}

/* Styles for regular posts */
.regular-post {
    width: 100%;
}

.regular-post img {
    height: 260px;
    object-fit: cover;
}

/* Styles for recent posts */
.recent-post {
    width: 100%;
}

.recent-post img {
    height: 300px;
    object-fit: cover;
}

.mosaic-item {
    position: relative;
    overflow: hidden;
}

.mosaic-item:hover .mosaic-content {
    bottom: 0;
    opacity: 1;
}

.mosaic-content-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-decoration: none;
    /* Remove underline from link */
}

.mosaic-content a {
    position: relative;
    z-index: 20;
    /* Ensure internal links are above the overall content link */
}

/* Responsive adjustments */
@media (min-width: 576px) {
    .mosaic-item {
        width: 50%;
        float: left;
    }
}

@media (min-width: 768px) {
    .mosaic-item {
        width: 33.33%;
        float: left;
    }
}

@media (min-width: 992px) {
    .mosaic-item {
        width: 25%;
        float: left;
    }
}

@media (max-width: 575px) {
    .mosaic-item {
        width: 100%;
        float: none;
    }
}

/* Container for the exhibition items */
.exhibitions-row {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
    /* Adjusts for spacing between items */
}

/* Exhibition item layout for three columns */
.exhibition-item {
    width: calc(33.3333% - 20px);
    /* Each item takes up 1/3 of the row minus spacing */
    margin: 10px;
    /* Adds spacing between items */
    position: relative;
    overflow: hidden;
}

.exhibition-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Sequentielles Scrollen: Ausstellung stoppt, bleibt stehen, scrollt dann nach oben weg, bevor die nächste kommt */
@media (min-width: 992px) {
    .exhibition-slide-track {
        position: relative;
        height: 140vh; /* Track-Länge: Definiert die Zeitspanne, die die Ausstellung stehen bleibt */
        margin-bottom: 40px;
    }

    .category-header-exhibition {
        position: -webkit-sticky;
        position: sticky;
        top: 100px; /* Stoppt oben im Sichtfeld */
        background-color: #ffffff;
        padding-top: 25px;
        padding-bottom: 40px;
        width: 100%;
        max-height: calc(100vh - 120px);
    }

    .category-header-exhibition .row {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }

    .category-header-exhibition:not(.is-reversed) .image-container {
        padding-left: 0;
        text-align: left;
    }

    .category-header-exhibition:not(.is-reversed) .image-container img {
        margin-left: 0;
        margin-right: auto;
    }

    .category-header-exhibition:not(.is-reversed) .exhibition-data {
        padding-right: 0;
    }

    .category-header-exhibition.is-reversed .row {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: stretch;
    }

    .category-header-exhibition.is-reversed .image-container {
        padding-right: 0;
        text-align: right;
    }

    .category-header-exhibition.is-reversed .image-container img {
        margin-left: auto;
        margin-right: 0;
        display: inline-block;
    }

    .category-header-exhibition.is-reversed .image-description {
        text-align: right;
    }

    .category-header-exhibition.is-reversed .exhibition-data {
        padding-left: 0;
    }

    .category-header-exhibition .exhibition-data {
        align-self: stretch;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .category-header-exhibition .exhibition-data .exhibition-share-wrapper {
        margin-top: auto;
        padding-top: 20px;
    }

    .exhibition-picture-wrapper img,
    .image-container img,
    .category-header-exhibition img {
        max-height: calc(100vh - 200px);
    }
}

/* Responsive / Mobile: Natürlicher Fluss */
@media (max-width: 991px) {
    .exhibition-slide-track {
        position: relative;
        height: auto;
        margin-bottom: 60px;
    }

    .category-header-exhibition {
        position: relative !important;
        top: auto !important;
        background-color: #ffffff;
        padding-top: 15px;
        padding-bottom: 40px;
        margin-bottom: 0;
        min-height: auto !important;
    }

    .category-header-exhibition .image-container,
    .category-header-exhibition .exhibition-picture-wrapper {
        display: block !important;
        width: 100% !important;
    }

    .category-header-exhibition .image-container img,
    .category-header-exhibition .exhibition-picture-wrapper img,
    .category-header-exhibition img,
    .responsive--full {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        display: block !important;
    }

    .category-header-exhibition .exhibition-data {
        padding-top: 15px !important;
    }

    .category-header-exhibition .ex-title h2 {
        font-size: 24px;
        line-height: 1.3;
        word-break: break-word;
        overflow-wrap: break-word;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

.exhibition-picture-wrapper {
    min-height: auto;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.exhibition-picture-wrapper img,
.image-container img,
.category-header-exhibition img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Exhibition content styling */
.exhibition-content {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: bottom 0.3s ease, opacity 0.3s ease;
    z-index: 10;
}

/* Hover effect to reveal content */
.exhibition-item:hover .exhibition-content {
    bottom: 0;
    opacity: 1;
}

.exhibition-content-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-decoration: none;
}

/* Title and date styling */
.exhibition-title {
    font-size: 16px;
    font-weight: bold;
}

.exhibition-date {
    font-size: 14px;
    margin-top: 5px;
    color: #ccc;
}

.exhibition-category-title {
    margin-right: 15px;
}

.exhibition-info.row {
    margin-top: 5vh;
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 768px) {
    .exhibition-item {
        width: calc(50% - 20px);
        /* Two columns on smaller screens */
    }
}

@media (max-width: 576px) {
    .exhibition-item {
        width: calc(100% - 20px);
        /* One column on mobile devices */
    }
}

/* Container for the category items */
.category-row {
    display: flex;
    flex-wrap: wrap;
    /* Adjusts for spacing between items */
}

/* Category item layout for four columns */
.category-item {
    width: calc(20% - 20px);
    /* Each item takes up 1/4 of the row minus spacing */
    margin: 10px;
    /* Adds spacing between items */
    position: relative;
    overflow: hidden;
}

/* Responsive image styling */
.artist-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Ensures the image covers the area without stretching */
    display: block;
}

.artist-work {
    padding-bottom: 7vh;
    display: flex;
}


.artist-work-image {
    padding-right: 5vw;
}

.artist-work-description {
    margin-left: 3vh;
}

/* Category content styling */
.category-content {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: bottom 0.3s ease, opacity 0.3s ease;
    z-index: 10;
}

/* Hover effect to reveal content */
.category-item:hover .category-content {
    bottom: 0;
    opacity: 1;
}

.category-content-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-decoration: none;
}

/* Title styling */
.category-title {
    font-size: 16px;
    font-weight: bold;
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 1024px) {
    .category-item {
        width: calc(33.3333% - 20px);
        /* Three columns on smaller screens */
    }
}

@media (max-width: 768px) {
    .category-item {
        width: calc(50% - 20px);
        /* Two columns on even smaller screens */
    }
}

@media (max-width: 576px) {
    .category-item {
        width: calc(100% - 20px);
        /* One column on mobile devices */
    }
}

/* Ensure modal and its content are centered */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

/* Make iframe responsive */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
}

.embed-responsive-16by9::before {
    display: block;
    content: "";
    padding-top: 56.25%;
    /* 16:9 aspect ratio */
}

.embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mosaic-gallery {
    display: flex;
    flex-wrap: wrap;
}

.gallery-thumbnail {
    position: relative;
    overflow: hidden;
}

.mosaic-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.image-wrapper {
    height: 200px;
    /* Adjust the height to create the mosaic effect */
}

@media (min-width: 768px) {
    .image-wrapper {
        height: 250px;
        /* Adjust height for medium screens */
    }
}

@media (min-width: 992px) {
    .image-wrapper {
        height: 300px;
        /* Adjust height for large screens */
    }
}

@media (max-width: 992px) {

    .content-first-exibition,
    .content-second-exibition,
    .content-third-exibition,
    .content-gallery-exibition,
    .exhibition-link {
        padding: 0px 0;
        margin-right: 0px;
        padding-right: 0px;
    }

    .current-exhibition {
        display: flex;
        flex-direction: column;
    }
}

.artist-links {
    margin-bottom: -24px;
    margin-left: 0px;
    z-index: 200;
    position: relative;
}

.container {
    width: 100%;
    padding: 0 5%;
}

.logos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Spacing between logos */
}

.logo-item {
    text-align: center;
    /* Center align text below logos */
    max-width: 150px;
    /* Set a maximum width for each logo item */
}

.logo-item img {
    max-width: 100%;
    /* Make images responsive */
    height: auto;
    /* Maintain aspect ratio */
}

.fair-logos {
    display: flex;
    padding: 0px 75px;
    margin-top: 40px;
    justify-content: space-between;
    align-items: flex-end;
}

.fair-logos img {
    max-height: 6vh;
}

.current-exhibition {
    display: flex;
    align-items: center;
}

.ex-date-small {
    font-size: small;
    padding-top: 5px;
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.artist-container {
    display: flex;
    gap: 10px;
}

.artist-content {
    margin-bottom: -20px;
}

.top-picture-artist {
    height: 500px;
    overflow: hidden;
}

.artist-top-picture {
    position: relative;
    width: 100%;
    height: 500px;
    /* Adjust based on your design needs */
    overflow: hidden;
}



.home-top-picture {
    position: relative;
    width: 100%;
    height: 700px;
    /* Adjust based on your design needs */
    overflow: hidden;
}

/* Parallax effect styling */
.parallax {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* This is the parallax effect */
    width: 100%;
    height: 100%;
}

.top-picture {
    background-size: cover;
    /* Ensures the image covers the entire area */
    background-position: center center;
    /* Centers the image horizontally and vertically */
    background-repeat: no-repeat;
    /* Ensures the image does not repeat */
    position: relative;
    /* To allow layering of the header pattern */
    margin-top: 100px;
    position: relative;
    width: 100%;
}

/* Optional header pattern overlay */
.artist-top-picture::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.0);
    /* Dark overlay for the pattern, adjust color/opacity */
    z-index: 1;
    pointer-events: none;
    /* Ensure overlay does not interfere with any content */
}

/* Optional pattern design (using a CSS pattern or image) */
.artist-top-picture::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('path-to-pattern-image.png');
    /* Pattern overlay */
    background-size: cover;
    /* Ensures the pattern covers the entire area */
    background-position: center center;
    opacity: 0.3;
    /* Adjust opacity to blend with the background */
    z-index: 2;
    /* Above the image but below any text */
    pointer-events: none;
}

.artist-names {
    width: 60%;
    line-height: 0.9em;
    display: flex;
    align-items: flex-start;
    flex-direction: column-reverse;
    justify-content: center;
    font-size: larger;
}

.artist-names ul {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin-left: -35px;
}

.artist-names li {
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 6px;
    font-size: larger;
}

.artist-image-preview {
    width: 80%;
    height: 600px;
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
}

.artist-image-preview img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    /* Adjust the duration and timing function as needed */
}

.artist-image-preview img.visible {
    opacity: 1;
}

section.artist-top-picture {
    max-height: 600px;
    overflow: hidden;
    margin-top: 100px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Equal spaces between columns */
    gap: 10px;
    /* Consistent gaps between items */
}

#text-content {
    margin-top: 80px;
}

.gallery-item {
    flex-grow: 1;
    margin-bottom: 10px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

.gallery-wrapper {
    clear: both;
    /* Ensures the gallery doesn't overlap with preceding content */
    padding-top: 20px;
    /* Adds space above the gallery */
}

.gallery-masonry {
    margin: 10px 0;
    /* Adds some vertical space */
}

.gallery-item-masonry {
    width: calc(25% - 10px);
    /* Four columns */
    margin-bottom: 10px;
}

.gallery-item-masonry img {
    width: 100%;
    display: block;
    border-radius: 5px;
}

.exhibition-header {
    /* Set the size of the header */
    height: 500px;
    /* Adjust this to your preferred height */
    background-size: cover;
    /* Ensures the image covers the entire header */
    background-position: center center;
    /* Centers the background image */
    background-repeat: no-repeat;
    /* Ensures the image does not repeat */
}

.page-title-line {
    padding: 0px 0 8vh 0 !important;
    text-transform: lowercase;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

a.page-title-line,
a.seperator-line,
a[data-toggle="collapse"] {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

a.page-title-line:hover,
a.page-title-line:focus,
a.page-title-line:active,
a.page-title-line.active,
a.seperator-line:hover,
a.seperator-line:focus,
a.seperator-line:active,
a.seperator-line.active,
a[data-toggle="collapse"]:hover,
a[data-toggle="collapse"]:focus,
a[data-toggle="collapse"]:active,
a[data-toggle="collapse"].active,
.seperator-line:focus,
.seperator-line:active,
.seperator-line.active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    color: inherit !important;
}

.seperator-line::before {
    content: '» ';
}

.seperator-line::before {
    flex-grow: 0;
    /* No extra space on the left side */
    margin-right: 5px;
    /* Spacing between the text and the left line */
    width: 15%;
    /* You can specify a fixed width if needed */
}

.seperator-line::after {
    flex-grow: 1;
    margin-left: 20px;
    background-color: white;
}

.seperator-line {
    position: relative;
    cursor: pointer;
    padding: 5vh 0 0 0;
    max-width: 52vw;
    font-size: 1.3em;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}


.seperator-line-function::before {
    content: '» ';
}

.seperator-line-function::before {
    flex-grow: 0;
    /* No extra space on the left side */
    margin-right: 5px;
    /* Spacing between the text and the left line */
    width: 15%;
    /* You can specify a fixed width if needed */
}

.seperator-line-function::after {
    flex-grow: 1;
    margin-left: 20px;
    background-color: white;
}

.seperator-line-function {
    position: relative;
    cursor: pointer;
    padding: 5vh 0 0 0;
    max-width: 52vw;
    font-size: 1.3em;
}

.toggle-content {
    padding: 10vh 0 0;
    max-width: 95%;
}

.seperator-line.active .seperator-toggle::after {
    transform: rotate(90deg);
    /* Arrow pointing down */
}

.seperator-toggle {
    position: absolute;
    cursor: pointer;
    right: 0px;
    margin-top: -12px;
}

.seperator-toggle::after {
    content: " «";
    position: absolute;
    right: 0;
    font-size: 22px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    top: 5px;
}

.seperator-toggle.active::after {
    transform: rotate(90deg);
    /* Arrow pointing down */
}


.seperator-line.active .seperator-toggle::after {
    transform: rotate(90deg);
    /* Arrow pointing down */
}

.seperator-toggle-menue {
    position: absolute;
    cursor: pointer;
    right: 0px;
    margin-top: -12px;
}

div#toggle-menue {
    margin-top: -2vh;
    width: 33%;
}

.seperator-toggle-menue::after {
    content: " «";
    position: absolute;
    right: 0;
    font-size: 22px;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
    top: 5px;
}

.seperator-toggle-menue.active::after {
    transform: rotate(90deg);
    /* Arrow pointing down */
}

/* Container to hold the parallax section */
.artist-top-picture {
    position: relative;
    width: 100%;
    height: 500px;
    /* Adjust based on your design needs */
    overflow: hidden;
}

/* Parallax effect styling */
.parallax {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* This is the parallax effect */
    width: 100%;
    height: 100%;
}


.site-content {
    min-height: 150vh;
}



/* Disable parallax on small devices */
@media screen and (max-width: 768px) {
    .parallax {
        background-attachment: scroll;
        /* Disable parallax for mobile */
        background-size: cover;
    }

    .top-picture {
        margin-bottom: 35px;
    }

    .exhibition-link.container {
        min-height: 700px;
    }

    .page-title-line {
        padding: 10px 0 2vh 0 !important;
        margin-top: 5px;
    }

    .toggle-content {
        padding: 5vh 0 0;
        min-width: 100%;
    }

    p {
        margin: 0 5px 3vh 0;
        text-align: justify;
        max-width: 100vw;
    }

    #content {
        margin-top: 125px;
        padding-bottom: 3vh;
    }

    header[role="banner"] {
        position: fixed;
        top: 0;
        z-index: 1000;
        width: 100%;
        padding-top: 5px;
        background-color: white;
    }

    .image-description {
        float: right;
    }

    .regular-post img {
        height: 100%;
        object-fit: cover;
        padding-bottom: 30px;
    }

    .seperator-line {
        max-width: 80vw;
    }

    .scroll-button {
        top: 45%;
    }

    .caption-inner-image {
        margin: 0;
        padding: 20px 3px;
    }

    .name-list-column {
        display: none;
    }
}

/* Optional: Hide the actual image to maintain accessibility */
.d-none {
    display: none;
}

.video-container iframe {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* Aspect ratio 16:9 */
    position: absolute;
    top: 0;
    left: 0;
}

.active-tab {
    border-bottom: 1px solid;
}

.tab-inner-flex {
    display: flex;
}

.tabs {
    /* display: flex;
    justify-content: space-between;
    flex-direction: row; */
}

span.tab-link {
    margin-right: 40px;
}

#tabs {
    width: 52vw;
}

.tab-toggle-content {
    padding: 10vh 0 20vh;
    max-width: 95%;
}

/* Hide mobile header on large screens */
#mobile-header {
    display: none;
}

@media (max-width: 768px) {

    .h2,
    h2 {
        font-size: 5vw;
        font-weight: 900;
    }


    .h3,
    h3 {
        font-size: 4vw;
    }

    /* Hide desktop header on small screens */
    #desktop-header {
        display: none;
    }

    /* Show mobile header on small screens */
    #mobile-header {
        display: block;
        background-color: white;
    }

    .nav>li {
        position: relative;
        display: block;
        padding: unset;
        /* padding: 0 0 0 40px;
		*/
    }

    section.artist-top-picture {
        margin-top: 90px;
    }

    .artist-names {
        width: 100%;
        line-height: 0.9em;
    }

    .artist-names ul {
        list-style: none;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin-left: -38px;
    }

    .footer-imprint {
        padding: 15px;
        font-size: 11px;
    }

    footer#site-footer {
        margin-top: 50px;
        margin-bottom: 15px;
        z-index: 200;
    }

    #footer-row {
        position: fixed;
        bottom: 0;
        background-color: white;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .seperator-line {
        padding: 4vh 0 0;
        width: 95%;
        padding-right: 25px;
        font-size: 1.3em;
    }

    .container-single {
        min-height: 153vh;
    }

    #tabs {
        width: unset;
    }

    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-xs-1,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9 {
        position: relative;
        min-height: 1px;
        padding-right: 0;
        padding-left: 0;
    }

    #text-content {
        margin-top: 80px;
    }
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 0;
    padding-left: 0;
}

.navbar-header {
    width: 100%;
    padding: 30px 30px 15px;
}

.navbar-collapse {
    min-height: unset;
    padding-bottom: 5vh;
    margin-left: -15px;
}

.site-title-heading.h1 {
    margin: unset;
    font-family: 'CircularXX-Bold';
    margin-left: -15px;
}

.image-single {
    max-height: 300px;
}

/* Expos */
.expos-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Space between exhibitions */
}

.expo-item {
    display: flex;
    align-items: baseline;
    align-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
}

.expo-year {
    width: 10%;
    text-align: left;
    font-family: 'CircularXX-Medium';
    padding-top: 10px;
}

.expo-details {
    text-align: left;
    color: #555;
    line-height: 1.5;
    font-size: small;
}

.expo-title-intern {
    font-family: 'CircularXX-Book';
}

/* Layout for the wrapper to hold titles and content */
.expo-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    /* Clip child elements */
}

/* Titles on the left */
.expo-titles {
    width: 20%;
    /* Adjust based on your design */
}

.expo-title {
    cursor: pointer;

    margin-bottom: 5px;
}

/* Content on the right */
.expo-content-wrapper {
    width: 80%;
    /* Remaining width */
    padding: 10px 20px;
    background-color: #fff;
    min-height: 300px;
    /* Ensure enough height for content */
}

/* All content is hidden by default */
.expo-content {
    display: none;
    margin-top: -10px;
}

/* Active content */
.expo-content.active {
    display: block;
}

/* Style for the active/open section */
.open {
    border-left-color: #000;
    /* Change to a solid black when active */
}

.exhibition-intern {
    padding-left: 11px;
    font-size: small;
}

.dates-title {
    margin-bottom: 6vh;
}

.ex-title h2 {
    margin: 1vh 0 2.5vh 0;
}

.ex-exerpt {
    padding-top: 2vh;
    max-width: 100%;
}

.ex-date {
    margin: -2vh 0 0;
}

.ex-ort {
    margin-top: 1vh;
}

.ex-thema {
    text-transform: lowercase;
}

@media (max-width: 768px) {

    /* Stack the year and details vertically on smaller screens */
    .expo-item {
        flex-direction: column;
    }

    .expo-titles {
        width: 100% !important;
        display: flex;
    }

    .expo-title {
        cursor: pointer;
        margin-bottom: 5px;
        margin-left: 15px;
        /* Smooth hover effect */
    }

    .expo-content-wrapper {
        width: 100%;
        padding: 0 15px;
        background-color: #fff;
        min-height: 300px;
    }

    .expo-year,
    .expo-details {
        width: 100%;
    }

    .expo-year {
        font-size: large;
        padding-top: 15px;
        padding-bottom: 7.5px;
    }

    .expo-details {
        text-align: left;
        line-height: 1.5;
        font-size: small;
        display: block;
    }

    .expo-wrapper {
        flex-direction: column;
        margin-left: -15px;
    }

    .accordion-content {
        display: none;
        padding: 15px 0;
        border-bottom: 1px solid #ddd;
    }

    .accordion-header {
        padding: 4px 15px;
        cursor: pointer;
        border-bottom: none;
    }

    .accordion-title {
        margin: 0 -15px;
    }


    .gallery {
        margin-left: 0;
    }

    #main {
        padding-bottom: 10vh;
    }

    .page-title-line {
        padding: 10px 0 3vh 0 !important;
        text-transform: lowercase;
    }

    .exhibition-data {
        padding-top: 15px;
    }

    .ex-date {
        margin: -1vh 0 0;
    }

    .past-ex-date {
        margin-top: 0;
    }

    .thema {
        padding-top: 5vh;
        min-width: 100%;
    }
}

/*share Buttons*/
.share-buttons {
    position: relative;
    float: right;
    /*padding-top: 5.2vh;*/
    margin-right: 5px;
    font-size: 14px;
}

.share-buttons .btn {
    padding: 2px 6px;
    font-size: 14px;
    color: #333;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.share-buttons .btn:hover,
.share-buttons .btn:focus {
    color: #000;
    opacity: 0.7;
    background: transparent;
}

/* Exhibition Top Header Meta: Thema on top */
.exhibition-header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
    padding-top: 0;
}

.exhibition-header-meta .ex-thema {
    margin: 0;
    font-size: 14px;
    text-transform: lowercase;
    color: #555;
    flex-grow: 1;
}

.exhibition-share-wrapper {
    margin-top: 25px;
    margin-bottom: 0;
    clear: both;
    display: flex;
    justify-content: flex-start;
}

.exhibition-share-wrapper .share-buttons {
    margin: 0;
    float: none;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.past-ex-share {
    margin-top: 10px;
    margin-bottom: 5px;
    clear: both;
}

.share-options {
    position: absolute;
    top: -6px;
    right: 100%;
    white-space: nowrap;
    z-index: 1000;
    display: flex;
    align-items: center;
    background-color: white;
    font-size: smaller;
    /* padding-top: 5.2vh;*/
}

.share-options a {
    display: inline-block;
    margin-right: 10px;
    /* Space between options */
    text-decoration: none;
    padding: 5px 10px;
    /* Optional padding for better button look */
}

/* Hamburger Button */
.navbar-toggle {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.navbar-toggle .icon-bar {
    width: 22px;
    height: 2px;
    background-color: #333;
    display: block;
    margin: 5px 0;
}


#desktop-menu {
    background-color: rgba(255, 255, 255, 0.98);
    padding: 0 0 5vh;
    margin-top: 0vh;
    height: 100vh;
    float: right;
    width: 20%;
    text-transform: lowercase;
    right: -30%;
    transition: right 0.3s ease;
    position: fixed;
}


#desktop-menu.active {
    right: 0;
    /* Slide in from the right */
    transition: right 0.3s ease;
}

/* Optionally, if you want to show the menu when the button is clicked, add the following CSS */
#desktop-menu.active {
    display: block;
    /* Shows the menu when active */
}

/* Show hamburger button on desktop */
@media (min-width: 992px) {
    .navbar-toggle {
        display: block;
    }
}

.triangle-border {
    position: relative;
    /* Ensure the triangle can be positioned relative to this element */
}

.triangle-border::before {
    content: '';
    position: absolute;
    top: -10px;
    /* Adjust to move the triangle higher or lower */
    left: 50%;
    /* Center the triangle */
    transform: translateX(-50%);
    /* Center the triangle */
    border-left: 20px solid transparent;
    /* Adjust the size as needed */
    border-right: 20px solid transparent;
    /* Adjust the size as needed */
    border-bottom: 10px solid #333;
    /* Color of the triangle */
}

article.edition {
    display: flex;
}

/* Slider container styles */
.slider-container {
    width: 100%;
    position: relative;
    /* For positioning the buttons */
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Hides any overflow from the container */
}

/* Slider styles */
.slider {
    display: flex;
    /* Images in a horizontal row */
    flex-wrap: nowrap;
    /* No wrapping to new rows */
    overflow-x: scroll;
    /* Enable horizontal scrolling */
    scroll-behavior: smooth;
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
    /* Touch scrolling */
}

/* Hide scrollbar for WebKit browsers */
.slider::-webkit-scrollbar {
    display: none;
    /* Hide the scrollbar */
}

/* Image wrapper styles */
.image-wrapper {
    position: relative;
    /* Ensures overlay is placed on top */
    flex: 0 0 auto;
    /* Prevents shrinking or wrapping */
    margin-right: 10px;
    /* Space between images */
}

.slider-image {
    height: 200px;
    /* Uniform height for all images */
    object-fit: cover;
    /* Maintain aspect ratio */
    display: block;
}

/* Overlay styles */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent overlay */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show overlay on hover */
.image-wrapper:hover .overlay {
    opacity: 1;
}

/* Scroll buttons */
.scroll-button {
    position: absolute;
    top: 30%;
    /* Center vertically */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border: none;
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    border-radius: 2%;
    /* Circular buttons */
    transition: background-color 0.3s ease;
}

.scroll-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Positioning for left and right buttons */
.left-button {
    left: 0px;
    /* Position the left button */
}

.right-button {
    right: 0px;
    /* Position the right button */
}


/* Artist News List  */

.artist-news-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    /* Responsive grid for artist news */
    gap: 20px;
    /* Space between items */
    width: 95%
}

.artist-news-item {
    display: flex;
    /* Flexbox layout for title and image */
    padding: 15px;
    /* Padding around the item */
    background-color: #ffffff;
    /* White background for items */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    transition: transform 0.2s, box-shadow 0.2s;
    /* Smooth transition for hover effect */
}

.artist-news-item:hover {
    transform: translateY(-3px);
    /* Lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Darker shadow on hover */
}

.artist-image-container {
    flex-shrink: 0;
    /* Prevent image from shrinking */
}

.artist-title-container {
    flex-grow: 1;
    /* Allow title container to take up remaining space */
    margin-left: 5vh
}

.artist-title-container h5 {
    margin: 0;
    /* Remove default margin */
    font-size: 1.25rem;
    /* Adjust font size */
    color: #333;
    /* Darker text color */
    font-weight: 600;
    /* Slightly bolder text for emphasis */
}

.artist-news-toggle {
    cursor: pointer;
    /* Change cursor on hover */
    font-size: 1.3em;
    /* Smooth transition on hover */
}

.img-fluid {
    max-width: 100%;
    /* Ensure images are responsive */
    height: auto;
    /* Maintain aspect ratio */

}

time.news-date {
    margin-top: 1vh;
}

.language-option {
    cursor: pointer;
}

.title-seperator {
    font-weight: 100;
}

.logos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* Space between logo items */
    padding: 20px;
}

.logo-item {
    text-align: center;
    margin: 10px;
}

.logo-item img {
    max-width: 100px;
    height: auto;
    transition: transform 0.3s;
    /* Optional: adds a hover effect */
}

.logo-item p {
    margin-top: 5px;
    font-size: 0.9rem;
    color: #333;
    /* Adjust color as needed */
}

.logo-item a {
    text-decoration: none;
    color: inherit;
}

.logo-item a:hover img {
    transform: scale(1.05);
    /* Slight zoom effect on hover */
}

.no-logos-message {
    text-align: center;
    font-size: 1rem;
    color: #666;
    /* Adjust color as needed */
    padding: 20px;
}

/* General Styling for Artist Box Image Container */
.artist-box-image-item {
    margin-bottom: 20px;
    /* Adds spacing between items */
    padding-left: 20px;
    /* Adds spacing between items */
}

.artist-box-image {
    width: 98%;
    /* Ensures image takes up full container width */
    height: 200px;
    /* Set a fixed height for the image (adjust as needed) */
    background-size: cover;
    /* Ensures image covers the area fully */
    background-position: center center;
    /* Centers the image within the div */
    /* border-radius: 8px; Optional: rounded corners for the image container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional: adds a shadow around images */
    transition: transform 0.3s ease-in-out;
    /* Optional: smooth transition on hover */
}

/* Hover effect for image */
.artist-box-image:hover {
    transform: scale(1.05);
    /* Slight zoom effect on hover */
}

/* Artist Name under the image */
.artist-box-name-under-image {
    text-align: center;
    /* Centers the name text */
    font-size: 16px;
    /* Adjust font size as needed */
    font-weight: bold;
    /* Makes the name bold */
    margin-top: 10px;
    /* Adds space between the image and the name */
    color: #333;
    /* Adjust text color */
    text-decoration: none;
    /* Removes underline if present */
}

/* Optional: Styling the artist name link */
.artist-box-name-under-image a {
    color: #333;
    /* Adjust color for the link */
    text-decoration: none;
    /* Removes underline */
    transition: color 0.3s ease-in-out;
}

/* General Styling for Image Box Container */
.image-box-item {
    margin-bottom: 20px;
    /* Adds spacing between items */
    padding-left: 20px;
    /* Adds spacing between items */
}

.image-box {
    width: 100%;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.image-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Hover effect for image */
.image-box:hover {
    transform: scale(1.03);
    /* Slight zoom effect on hover */
}

/* Name under the image */
.name-under-image {
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    color: #333;
    text-decoration: none;
    line-height: 1.2;
}

/* Optional: Styling the name link */
.name-under-image a {
    color: #333;
    /* Adjust color for the link */
    text-decoration: none;
    /* Removes underline */
    transition: color 0.3s ease-in-out;
}

/* Container for both columns */
.image-box-container {
    margin-top: 20px;
}

/* Editorial Pattern Grid for Past Exhibitions & Artworks (Desktop & Mobile) */
.image-editorial-grid {
    margin-top: 10px;
}

@media (min-width: 992px) {
    .image-editorial-grid,
    .image-grid-column .image-editorial-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-flow: dense !important;
        column-gap: 25px !important;
        row-gap: 35px !important;
    }

    .image-editorial-grid::before,
    .image-editorial-grid::after {
        display: none !important;
    }

    .image-editorial-grid > div {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Landscape Banners span 2 columns for a curated editorial rhythm */
    .image-editorial-grid > .item-landscape {
        grid-column: span 2 !important;
    }

    /* Portrait and square posters take 1 column */
    .image-editorial-grid > .item-portrait,
    .image-editorial-grid > .item-square {
        grid-column: span 1 !important;
    }
}

@media (max-width: 991px) {
    .image-editorial-grid {
        display: block !important;
    }

    .image-editorial-grid > div {
        width: 100% !important;
        margin-bottom: 35px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.language-switcher {
    float: left;
    margin-left: 30px;
    margin-top: 25px;
}

.navbar-fixed-bottom .navbar-collapse,
.navbar-fixed-top .navbar-collapse {
    max-height: 90vh;
}

/* Responsive padding for smaller screens */
@media (max-width: 768px) {
    /* Adjust breakpoint as needed */

    /* General item box padding adjustments */
    .image-box-item {
        padding-left: 0;
        /* Removes left padding */
        padding-right: 10px;
        /* Keeps right padding for smaller screens */
    }

    /* Language switcher alignment */
    .language-switcher {
        margin-left: 10px;
    }

    /* Work container adjustments */
    .work-item {
        display: block;
    }

    /* Work description styling */
    .work-description {
        display: block;
        margin-bottom: -35px;
        margin-left: 0;
    }

    /* Edition container adjustments */
    .edition-item {
        display: block;
    }

    /* Generic theme section margin */
    .theme-section {
        margin-top: 70px;
    }

    /* Title section styling */
    .section-title {
        padding: 10px 0 40px 0;
    }

    /* Page title line adjustments */
    .title-line {
        margin-top: 0;
        text-transform: lowercase;
        margin-bottom: -4vh;
    }

    .col-md-4.d3-tour.video-container {
        min-width: 100%;
    }

    .bg-image {
        position: relative;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        margin: 0px;
    }
    .location-bg {
       margin-bottom: 30px;
    }



}

/*NewsLetter*/
div.tnp-subscription,
form.tnp-subscription,
form.tnp-profile {
    display: block;
    margin: 1em 0;
    max-width: 500px;
    width: 100%;
}

.sitemap-link {
    color: #fff;
}

.col-md-6.col-xs-6.footer-imprint.text-right {
    margin-top: 7px;
}

#poster {
    margin-bottom: 20vh;
}

.name-list-column ul li ::before {
    content: '» ';
    margin-left: -18px;
}

.name-list-column ul li {
    list-style-type: none;
    line-height: 1.6;
}

.artist-portrait {
    filter: grayscale(1);
}

.artist-werke-gallery {
    position: relative;
    width: 95vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artist-werke-slider {
    display: flex;
    gap: 20px;
    width: max-content;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    padding: 10px 0;
}

.artist-slider-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artist-image-gallery {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artist-img-fluid {
    max-width: unset;
    height: 400px;
    object-fit: cover;
}

.artist-caption {
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
}

section.artist {
    margin-top: 150px;
}

.artist-no-artworks-message {
    text-align: center;
    font-size: 18px;
}

.artist-works-teaser {
    min-width: 300px
}


.img-fluid {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bg-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
}

.video-container .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 11px 11px;
    cursor: pointer;
}

.location-bg {
    height: 400px;
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    max-width: 300px;
}