.wpml-ls-legacy-list-horizontal{border:1px solid transparent;padding:7px;clear:both}.wpml-ls-legacy-list-horizontal>ul{padding:0;margin:0 !important;list-style-type:none}.wpml-ls-legacy-list-horizontal .wpml-ls-item{padding:0;margin:0;list-style-type:none;display:inline-block}.wpml-ls-legacy-list-horizontal a{display:block;text-decoration:none;padding:5px 10px 6px;line-height:1}.wpml-ls-legacy-list-horizontal a span{vertical-align:middle}.wpml-ls-legacy-list-horizontal a span.wpml-ls-bracket{vertical-align:unset}.wpml-ls-legacy-list-horizontal .wpml-ls-flag{display:inline;vertical-align:middle}.wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:.4em}.rtl .wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:0;margin-right:.4em}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer{margin-bottom:30px}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer>ul{text-align:center}.artists {
color: #3765E4;
white-space: pre-wrap;
}
.content .links p {
padding-bottom: 0;
}
.dates {
padding-bottom: 20px;
}
.swiper {
width: 100%;
height: auto;
padding-top: 50px;
}
.swiper-slide {
width: auto !important;
}
.swiper-slide .image-description {
font-size: 0.8rem;
max-width: 300px;
opacity: 0.8;
padding-top: 5px;
white-space: break-spaces;
}
.swiper-slide img {
display: block;
max-width: 100%;
height: 250px;
width: auto;
object-fit: cover;
}
@media (min-width: 600px) {
.swiper-slide img {
height: 300px;
}
}
@media (min-width: 900px) {
.swiper-slide img {
height: 350px;
}
}
@media (min-width: 1200px) {
.swiper-slide img {
height: 400px;
}
}
@media (min-width: 1800px) {
.swiper-slide img {
height: 450px;
}
}
.swiper-button::after {
display: block;
}
.swiper-button.swiper-button-next {
justify-content: flex-start;
width: 50px;
}
.swiper-button.swiper-button-next::after {
content: url(//kunstarkaden-muenchen.de/wp-content/themes/kunstarkaden/assets/images/arrow-right.svg);
width: 50px;
}
.swiper-button.swiper-button-prev {
justify-content: flex-end;
width: 50px;
}
.swiper-button.swiper-button-prev::after {
content: url(//kunstarkaden-muenchen.de/wp-content/themes/kunstarkaden/assets/images/arrow-left.svg);
width: 50px;
}
.accordion-block {
overflow: hidden;
}
.accordion-block .accordion-title {
width: 100%;
cursor: pointer;
border-top: 2px solid black;
transition: 0.5s ease-out;
position: relative;
padding-right: 40px;
text-align: left;
padding-bottom: 20px;
}
.accordion-block .accordion-title:hover {
color: gray;
}
.accordion-block .accordion-title.is-open {
color: gray;
border-color: transparent;
}
.accordion-block .accordion-title.is-open::after {
transform: scale(-1) translateY(10px);
transform-origin: center;
}
.accordion-block .accordion-title::after {
content: url(//kunstarkaden-muenchen.de/wp-content/themes/kunstarkaden/assets/images/arrow-down.svg);
display: block;
position: absolute;
width: 20px;
padding: 10px;
right: 0;
top: 0;
transition: 0.5s ease-out;
color: #3765E4;
}
@media (min-width: 600px) {
.accordion-block .accordion-title::after {
width: 30px;
}
}
@media (min-width: 1200px) {
.accordion-block .accordion-title::after {
width: 40px;
}
}
.accordion-block .accordion-content {
max-height: 0;
transition: 0.3s linear;
visibility: hidden;
}
.accordion-block .accordion-content li {
border-top: 2px solid black;
}
.accordion-block .accordion-content li h2 {
padding-bottom: 10px;
}
.accordion-block .accordion-content li a {
display: block;
transition: 0.5s ease-out;
}
.accordion-block .accordion-content li a::after {
display: none;
}
.accordion-block .accordion-content li a:hover {
padding-left: 10px;
}
.accordion-block .accordion-content.is-open {
max-height: 2000px;
visibility: visible;
}
.event {
transition: 0.5s ease-out;
padding: 50px 20px;
}
@media (min-width: 600px) {
.event {
padding: 50px 10% 50px 10%;
}
}
@media (min-width: 900px) {
.event {
padding: 50px 0;
}
}
@media (min-width: 1800px) {
.event {
padding: 50px 100px;
}
}
.event-archiv ul {
list-style: none;
padding: 0;
}
.current-event {
padding: 0 20px;
}
@media (min-width: 900px) {
.current-event .reorder .grid-2 .thumbnail {
order: 2;
}
}
.event-link {
width: 100%;
}
.event-link:hover .thumbnail img {
transform: scale(1.1);
}
.faq .questions .accordion-title {
border-top: 2px solid #3765E4;
color: black;
padding-right: 40px;
}
#footer {
background-color: rgb(215, 215, 215);
display: grid;
grid-template-columns: 1fr;
padding: 20px 20px 50px 20px;
row-gap: 50px;
border-top: 50px solid #F55A00;
z-index: 999999;
}
#footer li.current-menu-item a {
color: #3765E4;
}
@media (max-width: 599px) {
#footer nav, #footer div {
text-align: center;
}
#footer a {
line-height: 150%;
}
}
@media (min-width: 600px) {
#footer {
grid-template-columns: 1fr 1fr;
}
#footer nav, #footer div {
text-align: left;
}
}
@media (min-width: 900px) {
#footer {
grid-template-columns: 1fr 1fr 1fr;
}
#footer div:nth-child(3) {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
text-align: center;
}
#footer nav:last-child {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 3;
grid-column-end: 4;
}
#footer nav:last-child ul {
text-align: right;
}
}
@media (min-width: 1200px) {
#footer {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#footer div:nth-child(3) {
grid-column-start: 3;
grid-column-end: 4;
}
#footer nav:last-child {
grid-column-start: 5;
grid-column-end: 6;
}
}
#footer .icons {
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
}
#footer .icons img {
max-width: 40px;
height: auto;
width: 40px;
transition: 0.5s ease-out;
}
#footer .icons img:hover {
transform: scale(1.1);
}
#footer .icons a:first-child {
place-self: start end;
}
@media (max-width: 599px) {
#footer .icons a:last-child {
place-self: start start;
}
}
.foerderer {
display: grid;
justify-content: center;
}
.foerderer img {
width: 170px;
height: auto;
padding-top: 5px;
transition: 0.5s ease-out;
}
.foerderer img:hover {
transform: scale(1.1);
}
@media (min-width: 900px) {
.foerderer {
justify-content: start;
}
}
@media (min-width: 1200px) {
.foerderer {
justify-content: center;
}
}
.bottom-bar {
width: 100%;
height: 30px;
position: sticky;
position: -webkit-sticky;
bottom: 0;
left: 0;
background-color: #F55A00;
margin-top: 50px;
z-index: 99;
}
.grid-2 {
display: grid;
padding: 25px 0;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.grid-2 {
grid-template-columns: 2fr 3fr;
column-gap: 30px;
}
}
.grid-3 {
display: grid;
gap: 50px;
}
@media (min-width: 900px) {
.grid-3 {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 900px) {
.single .grid-2 .informations {
max-width: 80%;
}
}
.single .grid-2 h3.additional-info {
padding-top: 20px;
}
@media (min-width: 900px) {
.home .grid-2, .single .grid-2 {
grid-template-columns: 1fr 1fr;
}
} #header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: grid;
grid-template-columns: 1fr;
border-top: 15px solid #3765E4;
background-color: white;
}
@media (max-width: 899px) {
#header.zindex {
min-height: 100vh;
}
}
#header .logo {
text-align: right;
padding: 10px;
margin: 10px;
display: block;
color: inherit;
text-decoration: none;
width: fit-content;
margin-left: auto;
margin-right: 0;
text-transform: uppercase;
}
#header .logo:hover {
color: inherit;
}
.toggle-nav {
position: absolute;
left: 20px;
top: 10px;
display: block;
cursor: pointer;
transition: 0.5s ease-out;
}
.toggle-nav .bar {
display: block;
}
.toggle-nav:hover {
transform: scale(1.1);
}
.toggle-nav .bar.eins, .toggle-nav .bar.zwei, .toggle-nav .bar.drei {
width: 40px;
height: 4px;
background-color: black;
margin: 8px 0;
transition: 0.4s;
}
.toggle-nav .bar.eins.change {
transform: translate(0, 12px) rotate(-45deg);
}
.toggle-nav .bar.zwei.change {
opacity: 0;
}
.toggle-nav .bar.drei.change {
transform: translate(0, -12px) rotate(45deg);
}
@media (min-width: 900px) {
.toggle-nav {
display: none;
}
}
.home #header {
border-top: 0px;
padding-top: 15px;
height: 140px;
}
.home #header .logo {
margin-right: auto;
}
@media (max-width: 899px) {
.home #header.zindex {
z-index: 999999;
border-top: 15px solid #3765E4;
transition: 0.5s ease-out;
}
}
.home #header nav:first-child {
margin: 0 0 10px 0;
}
.home #header nav:nth-child(2) {
margin: 5px 0;
}
.home #header .toggle-nav {
left: 0;
right: 0;
margin: auto;
display: block;
width: fit-content;
top: 80px;
}
@media (min-width: 900px) {
.home #header {
height: 160px;
}
.home #header .language {
position: absolute;
top: 10px;
right: 0;
}
.home #header .navigation {
display: flex;
justify-content: center;
position: static;
top: 0;
left: 0;
}
.home #header .toggle-nav {
display: none;
}
}
.home #header .logo {
text-align: center;
}
@media (max-width: 899px) {
#header .navigation {
display: none;
}
#header .navigation.opened {
display: inline-block;
width: 100%;
text-align: center;
background: linear-gradient(white, rgb(239, 239, 239));
position: relative;
}
#header .navigation.opened nav {
padding: 0;
}
#header .navigation.opened nav:first-child li:first-child {
animation: fadeInFromLeft 0.5s ease-out forwards;
transform: translateX(-100vw);
}
#header .navigation.opened nav:first-child li:nth-child(2) {
animation: fadeInFromRight 0.5s ease-out forwards;
animation-delay: 0.1s;
transform: translateX(100vw);
}
#header .navigation.opened nav:first-child li:nth-child(3) {
animation: fadeInFromLeft 0.5s ease-out forwards;
animation-delay: 0.2s;
transform: translateX(-100vw);
}
#header .navigation.opened nav:first-child li:nth-child(4) {
animation: fadeInFromRight 0.5s ease-out forwards;
animation-delay: 0.3s;
transform: translateX(100vw);
}
@keyframes fadeInFromLeft {
from {
transform: translateX(-100vw);
}
to {
transform: translateX(0);
}
}
@keyframes fadeInFromRight {
from {
transform: translateX(100vw);
}
to {
transform: translateX(0);
}
}
#header .navigation.opened ul {
display: block;
}
#header .navigation.opened ul li {
padding-bottom: 40px;
}
#header .navigation.opened .language {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
#header .navigation.opened .language ul {
display: flex;
justify-content: center;
}
#header .navigation.opened .language ul li {
padding-bottom: 0;
}
}
@media (min-width: 900px) {
#header .navigation {
position: absolute;
left: 0;
display: block;
top: 15px;
}
}
@media (min-width: 1200px) {
#header .navigation {
display: flex;
top: 0;
}
}
#header nav {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
#header nav ul {
display: flex;
}
#header nav ul li {
margin: 5px 10px;
}
#header nav ul li.current-menu-item a {
border-radius: 25px;
border-color: #F55A00;
background: white;
background: linear-gradient(white, rgb(255, 227, 217));
}
#header nav.language a {
border-color: rgb(116, 116, 116);
border-radius: 25px;
color: rgb(116, 116, 116);
}
#header nav.language a:hover {
color: black;
}
#header nav a {
border: 2px solid black;
padding: 5px 10px;
transition: 0.5s ease-out;
color: inherit;
text-decoration: none;
transition: 0.5s ease-out;
}
#header nav a:hover {
border-radius: 25px;
border-color: #F55A00;
color: inherit;
background: linear-gradient(white, rgb(255, 227, 217));
}
#header nav.language {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
@media (min-width: 900px) {
#header nav.language {
justify-content: flex-start;
}
}
.page-id-16 #header nav.language a.einfache-sprache,
.page-id-111 #header nav.language a.einfache-sprache {
background: linear-gradient(white, rgb(255, 227, 217));
border-color: #F55A00;
color: black;
margin-right: 20px;
}
@media (min-width: 900px) {
.page-id-16 #header .navigation,
.page-id-111 #header .navigation {
top: 0;
}
}
.page-id-16 #header nav.language,
.page-id-111 #header nav.language {
margin-top: 15px;
}
.page-id-16 #header nav.main-nav,
.page-id-16 #header .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal,
.page-id-111 #header nav.main-nav,
.page-id-111 #header .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal {
display: none;
}
@media (max-width: 899px) {
.page-id-16 #header .navigation.opened .language,
.page-id-111 #header .navigation.opened .language {
position: static;
display: block;
}
.page-id-16 #header .navigation.opened .language ul,
.page-id-111 #header .navigation.opened .language ul {
display: block;
}
.page-id-16 #header .navigation.opened .language a,
.page-id-111 #header .navigation.opened .language a {
display: block;
width: fit-content;
margin: auto;
}
.page-id-16 #header .navigation.opened .language .einfache-sprache,
.page-id-111 #header .navigation.opened .language .einfache-sprache {
margin-bottom: 15px;
}
}
.home .content {
padding: 0;
} .intro {
min-height: 100vh;
display: grid;
align-items: end;
padding: 50px 0 100px 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.intro .introtext {
max-width: 90%;
margin: auto auto 0 auto;
}
@media (min-width: 600px) {
.intro .introtext {
max-width: 75%;
}
}
@media (min-width: 900px) {
.intro .introtext {
max-width: 50%;
}
}
@media (min-width: 1200px) {
.intro .introtext {
max-width: 40%;
}
}
@media (min-width: 1800px) {
.intro .introtext {
max-width: 30%;
}
}
.intro h2 {
position: relative;
text-align: center;
}
.intro .intro-text p {
text-align: center;
}
.links-subpages {
padding: 100px 30%;
}
@media (min-width: 900px) {
.links-subpages {
padding: 100px 20%;
}
}
@media (min-width: 1800px) {
.links-subpages {
padding: 100px 30%;
}
}
.links-subpages img {
transition: 0.5s ease-out;
margin-bottom: 25px;
}
.links-subpages div {
position: relative;
}
.links-subpages div a {
display: block;
}
.links-subpages a:hover img {
transform: scale(1.1);
}
.torbogen {
border: 15px solid #3765E4;
border-bottom: 0;
border-radius: 50% 50% 0 0/100% 100% 0 0;
width: auto;
height: 150px;
animation: torbogen 1s linear forwards;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
position: fixed;
top: 35vh;
left: 20%;
right: 20%;
z-index: 9999;
}
@media (min-width: 900px) {
.torbogen {
height: 200px;
}
}
@media (min-width: 1200px) {
.torbogen {
height: 300px;
}
}
@media (min-width: 1800px) {
.torbogen {
height: 400px;
}
}
@keyframes torbogen {
0% {
border-radius: 50% 50% 0 0/100% 100% 0 0;
}
80% {
border-radius: 50% 50% 0 0/100% 100% 0 0;
height: 0;
left: 0;
right: 0;
}
100% {
height: 0;
margin-top: 0;
border-radius: 0;
top: 0;
left: 0;
right: 0;
}
}
.kunstraeume .lead {
margin-bottom: 50px;
}
@media (min-width: 900px) {
.kunstraeume .lead {
grid-column-start: 2;
grid-column-end: 3;
}
}
.kunstraeume .grid-2 {
padding: 0;
}
.kunstraeume .accordion-block .swiper {
padding-top: 0;
opacity: 0;
}
.kunstraeume .accordion-block .accordion-title {
border-top: 2px solid #3765E4;
color: black;
padding-right: 40px;
}
@media (min-width: 900px) {
.kunstraeume .accordion-block .accordion-title {
grid-column-start: 2;
grid-column-end: 3;
}
}
.kunstraeume .accordion-block .accordion-content {
grid-column: 1/3;
}
.kunstraeume .accordion-block .accordion-content.is-open .swiper {
opacity: 1;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-weight: normal;
}
* :focus-visible {
border: 2px solid #3765E4 !important;
}
body {
font-family: NextRegular;
line-height: 128%;
letter-spacing: 0.2px;
}
html {
font-size: 16px;
}
main {
position: relative;
}
@font-face {
font-family: NextRegular;
src: url(//kunstarkaden-muenchen.de/wp-content/themes/kunstarkaden/assets/fonts/NEXT-Book-Regular.woff) format("woff"), url(//kunstarkaden-muenchen.de/wp-content/themes/kunstarkaden/assets/fonts/NEXT-Book-Regular.woff2) format("woff2");
font-style: normal;
}
@font-face {
font-family: NextBold;
src: url(//kunstarkaden-muenchen.de/wp-content/themes/kunstarkaden/assets/fonts/NEXT-Book-Bold.woff) format("woff"), url(//kunstarkaden-muenchen.de/wp-content/themes/kunstarkaden/assets/fonts/NEXT-Book-Bold.woff2) format("woff2");
font-style: normal;
}
h1, h2, h3, h4, h5, h6,
#header nav a,
#header .logo,
#footer nav a,
#footer p,
.accordion-title,
.intro-text p {
font-family: NextBold;
}
.content .date {
padding-bottom: 20px;
}
@media (min-width: 600px) {
.content .additional-info {
max-width: 75%;
}
}
.content .additional-info p, .content .additional-info h3 {
font-size: 1.05rem;
}
.content h1 {
font-size: 2.25rem;
line-height: 110%;
}
.content h2, .content .intro-text p, .content .accordion-title {
font-size: 1.75rem;
line-height: 110%;
padding-bottom: 20px;
}
.content h3 {
font-size: 1rem;
line-height: 120%;
}
.content .date {
font-size: 1.25rem;
}
.content p, .content li {
font-size: 1rem;
line-height: 120%;
}
.content p {
padding-bottom: 20px;
}
#header nav a {
font-size: 2rem;
}
#header .opened .language a {
font-size: 1rem;
}
.logo {
font-size: 2rem;
cursor: pointer;
}
@media (min-width: 600px) {
#header nav a {
font-size: 2.5rem;
}
.content h2, .content .accordion-title, .content .intro-text p {
font-size: 1.75rem;
}
}
@media (min-width: 900px) {
#header nav a {
font-size: 1.25rem;
}
.logo {
font-size: 2.5rem;
}
}
@media (min-width: 1200px) {
.content p, .content li {
font-size: 1.25rem;
}
.content .date {
font-size: 1.5rem;
}
.content h3 {
font-size: 1.25rem;
}
.content h2, .content .accordion-title, .content .intro-text p {
font-size: 2.5rem;
}
.content h1 {
font-size: 3.5rem;
}
}
.text-center {
text-align: center;
}
.no-link-decoration::after {
display: none;
}
.background {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
}
.page-id-12 .background,
.page-id-113 .background {
background: linear-gradient(white, rgb(228, 228, 254));
}
.page-id-14 .background,
.page-id-112 .background {
background: linear-gradient(white, rgb(255, 227, 217));
}
button {
background-color: transparent;
border: none;
margin: 0;
padding: 0;
}
.button {
background-color: gray;
color: white;
width: fit-content;
padding: 10px 15px 12px 15px;
border-radius: 20px;
font-size: 1.5rem;
margin: 100px auto 25px auto;
}
img {
width: 100%;
height: auto;
}
.thumbnail {
transition: 0.5s ease-out;
border: 3px solid #3765E4;
width: 100%;
height: 300px;
display: flex;
align-items: center;
overflow: hidden;
margin-bottom: 20px;
}
@media (min-width: 600px) {
.thumbnail {
height: 350px;
}
}
@media (min-width: 900px) {
.thumbnail {
height: 400px;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
.thumbnail {
height: 450px;
}
}
@media (min-width: 1800px) {
.thumbnail {
height: 500px;
}
}
.thumbnail img {
transition: 0.5s ease-out;
width: 100%;
height: 100%;
object-fit: cover;
}
.content a, #footer nav a {
color: inherit;
text-decoration: none;
transition: 0.5s ease-out;
display: inline-block;
position: relative;
}
.content a::after, #footer nav a::after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
border-radius: 5px;
height: 2px;
bottom: 0;
left: 0;
background: currentcolor;
transform-origin: bottom right;
transition: transform 0.5s ease-out;
}
.content a:hover::after, #footer nav a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
nav ul {
list-style: none;
}
nav ul a {
text-decoration: none;
}
.content {
min-height: 100vh;
padding: 150px 20px;
}
.content p {
padding-bottom: 20px;
}
.content p a {
color: #F55A00;
}
.content ul {
padding-bottom: 20px;
}
.lead {
margin-bottom: 50px;
}