@font-face {
font-family: 'Diatype';
src: url('../font/ABCDiatypeSemi-Mono-Regular.woff2') format('woff2'), url('../font/ABCDiatypeSemi-Mono-Regular.woff') format('woff');
}
@font-face {
font-family: 'RIOROM';
src: url('../font/RioROMCompressed-Black.woff2') format('woff2'), url('../font/RioROMCompressed-Black.woff') format('woff');
}
:root {
--content-width: 100%;
position: relative;
}
input::-moz-focus-inner {
border: 0;
}
*, *::before, *::after {
margin: 0;
padding: 0;
border: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
outline: none;
}
*:focus {
outline: none;
}
html {
margin: 0 auto;
white-space: normal;
background-color: rgb(255,255,255);
color: rgba(0,0,0,1);
-webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-text-size-adjust: none;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
overflow-x: -moz-scrollbars-none;
-webkit-text-siaze-adjust: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, main::-webkit-scrollbar, .scroll-y::-webkit-scrollbar, .menu-content::-webkit-scrollbar {
display: none;
}
html, body, main, .scroll-y, .menu-content {
scrollbar-width: none;
-ms-overflow-style: none;
}
html, body, main, .scroll-y, .menu-content {
-webkit-overflow-scrolling: touch;
}
html, body, main, .scroll-y, .menu-content {
-webkit-overflow-scrolling: touch;
-webkit-scrollbar: none;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 099;
background-color: rgb(255,255,255);
border-bottom: 1px solid black;
overflow: hidden;
}
main {
position: relative;
margin-top: 50px;
min-height: calc(100vh - 50px);
min-height: calc((var(--vh, 1vh) * 100) - 50px);
-webkit-animation: fadein 1.5s ease;
animation: fadein 1.5s ease;
z-index: 1;
}

main.eintrag {
opacity: 0;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}

main.eintrag.loaded {
opacity: 1;
}

@media screen and (min-width: 85rem) {
main {
margin-top: calc(76px + 36px);
}
main.home, main.programm, main.eintrag, main.media {
margin-top: 76px;
min-height: calc(100vh - 76px);
min-height: calc((var(--vh, 1vh) * 100) - 76px);
}
}
footer{
background-color: rgb(255,255,255);
border-top: 1px solid black;
padding-top: .75rem;
padding-bottom: 36px;
padding-left: .75rem;
padding-right: .75rem;
z-index: 999;
-webkit-animation: fadein 1s ease;
animation: fadein 1s ease;
position: relative;
z-index: 5;
}
@media screen and (min-width: 85rem) {
footer{
padding-bottom: 0rem;
}
}
.overview {
display: none;
}
.formular-content {
display: none;
}
.small-only {
display: none;
}
.big-only {
display: block;
}
@media screen and (max-width: 85rem) {
.big-only {
display: none;
}
.small-only {
display: block;
}
}
header, footer, img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
p, h3, h2, h1, figcaption, button, input, textarea, strong, sub, sup, em {
font-weight: normal;
text-align: top;
font-style: normal;
font-variant: normal;
text-rendering: optimizeLegibility;
font-display: block;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
-webkit-font-feature-settings: "calt", "liga", "ss03", "ss06", "ss20", "dlig" 1;
font-feature-settings: "calt", "liga", "ss03", "ss06", "ss20", "dlig" 1;
}
p {
font-family: "Diatype";
font-size: 1.1rem;
line-height: 125%;
letter-spacing: .015rem;
}
button p {
font-family: "Diatype";
font-size: 1.1rem;
line-height: 122%;
letter-spacing: .025rem;
}
p.sub-p, footer p, figcaption {
font-family: "Diatype";
font-size: .9rem;
line-height: 122%;
letter-spacing: .025rem;
}
h3, footer h3, .filter-buttons h2, nav h3, .list h2, h1 .doubleconcert {
font-family: "RIOROM";
font-size: 2.25rem;
line-height: 82%;
text-transform: uppercase;
}
nav h3 span{
font-size: 1.75rem;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.notice h3 {
font-family: "RIOROM";
font-size: 1.25rem;
line-height: 82%;
text-transform: uppercase;
letter-spacing: .01rem;
}
.title h1 {
font-family: "RIOROM";
font-size: 3.5rem;
line-height: 82%;
text-transform: uppercase;
}
h2, footer h2 .table h2 {
font-family: "RIOROM";
font-size: 3.5rem;
line-height: 78%;
text-transform: uppercase;
}
main h3 {
text-align: center;
}
.menu-content h2 {
font-family: "RIOROM";
font-size: 5.75rem;
line-height: 75%;
text-transform: uppercase;
letter-spacing: -.025rem;
}
h1 {
font-family: "RIOROM";
font-size: 15vw;
line-height: 75%;
text-transform: uppercase;
letter-spacing: -.075vw;
}
.eintrag h1{
font-size: 12vw;
letter-spacing: -.01vw;
opacity: 0;
}
h1.xxs {
font-size: 15vw;
letter-spacing: -.02vw;
opacity: 1;
}

h1.xs {
font-size: 19vw;
letter-spacing: -.02vw;
opacity: 1;

}
h1.s {
font-size: 24vw;
letter-spacing: -.04vw;
opacity: 1;
}
h1.m {
font-size: 29vw;
letter-spacing: -.06vw;
opacity: 1;
}
h1.l {
font-size: 32vw;
letter-spacing: -.07vw;
opacity: 1;
}
h1.xl {
font-size: 34vw;
letter-spacing: -.08vw;
opacity: 1;
}
h1.xxs .doubleconcert, h1.xs .doubleconcert, h1.s .doubleconcert, h1.m .doubleconcert, h1.l .doubleconcert, h1.xl .doubleconcert{
font-size: 2.25rem;
letter-spacing: 0
}
strong {
color: black;
text-decoration: underline;
text-underline-position: bottom;
}


@media screen and (min-width: 85rem) {
button h3, h2 .doubleconcert {
font-family: "RIOROM";
font-size: 2.25rem;
line-height: 82%;
text-transform: uppercase;
}
h3, .list .notice h3, .doubleconcert, .home h1 .doubleconcert{
font-size: 2.75vw;
}
.title h1 {
font-size: 5.25rem;
letter-spacing: -.05rem;
}
.home .notice h3, .eintrag .notice h3{
font-size: 2vw;
}
h2, .filter-buttons h2, .list h2, h1 .doubleconcert {
font-size: 5vw;
letter-spacing: -.03vw;
}
footer h2, .table h2, .info h2, .ueberuns h2 {
font-size: 3.25rem;
letter-spacing: -.025rem;
}
.home h1 {
font-size: 7vw;
line-height: 75%;
letter-spacing: -.04vw;
}
p.xl {
font-size: 1.4rem;
line-height: 100%;
}
h1.xxs {
font-size: 5vw;
letter-spacing: -.015vw;
}
h1.xs {
font-size: 5.75vw;
letter-spacing: -.015vw;
}
h1.s {
font-size: 7vw;
letter-spacing: -.015vw;
}
h1.m {
font-size: 8.75vw;
letter-spacing: -.015vw;
}
h1.l {
font-size: 9.75vw;
letter-spacing: -.015vw;
}
h1.xl {
font-size: 11vw;
letter-spacing: -.015vw;
}

}
@media screen and (max-width: 85rem) {
main .text-block p, main .info-block p {
text-align: center;
}
.table h2, .info h2, .ueberuns h2 {
text-align: center;
}
form p{
text-align: left;
}
}

::-moz-selection {
color: rgb(225,225,225);
color: var(--color-3);
}
::selection {
color: rgb(225,225,225);
color: var(--color-3);
}
main .text-block p {
padding-bottom: 1.5rem;
}
footer p:last-of-type {
padding-bottom: 1.5rem;
}
main .text-block p:last-of-type, footer p, label p{
padding-bottom: 0rem;
}
ul li {
font-family: "Diatype";
font-size: 1.1rem;
line-height: 120%;
letter-spacing: .02rem;
}
figcaption{
padding-top: .5rem;
padding-bottom: .5rem;
}
.carousel-container figcaption{
opacity: 0;
}
.carousel-container figcaption.loaded{
opacity: 1;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
main .text-block p a, main .info-block p a, footer .social-media a, footer .kontakt a, footer a[target = "_blank"], .extern a {
text-decoration: underline;
text-underline-position: bottom;
}
p.medien{
margin-top: 1.32rem;
text-decoration: underline;
text-underline-position: bottom;
}
a {
color: inherit;
text-decoration: none;
outline: none;
outline: 0;
cursor: pointer;
}
.titel-block {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.home.loaded a h1{
-webkit-transition: transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
.home.loaded a h3{
-webkit-transition: transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
.home a.active h1{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.home a.active h3{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.subnav a:hover{
color: var(--color-1);
}
.subnav a.active{
color: var(--color-1);
}
.subnav:hover a.active{
color: black;
}
.subnav:hover a.active:hover{
color: var(--color-1);
}
header a{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding-top: .25rem;
width: 100%;
height: 100%;
}
nav:hover h3, nav:hover h3.open {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
nav h3 {
margin-left: 1.5rem;
margin-right: 1.5rem;
margin-bottom: .5rem;
text-align: bottom;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
-o-transition: transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
main .text-block a::before, .medien a::before, main .info-block p a::before {
content: '→ ';
}
.extern a::before, main .info-block p a[target = "_blank"]::before, main .text-block a[target = "_blank"]::before, a.kalender::before, footer a[target = "_blank"]::before, footer .kontakt a::before, footer .social-media a::before {
content: '↗ ';
}
.download a::before, main .text-block a[download] {
content: ' ';
}
.text-block ul li {
position: relative;
padding-left: 2.25rem;
}
.text-block ul li:last-of-type {
padding-bottom: 1.5rem;
}
.text-block ul li:before {
content: '';
position: absolute;
left: 0;
top: 0;
padding-right: .75rem;
padding-top: .1rem;
line-height: 1;
}
.home .text-block a:before, .home .text-block ul li:before {
content: '';
}
img[data-flickity-lazyload] {
opacity: 0;
}
img {
width: auto;
max-width: 100%;
vertical-align: top;
border: 0px;
height: auto;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: top left;
object-position: top left;
max-height: 80vh;
}

.lazyload, .lazyloading{
display: block;
width: 100%;
height: auto;
opacity: 0;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.lazyloaded {
opacity: 1;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}

.flexbox{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.inliner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.space-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.space-between {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
header .align-right{
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: right;
float: right;
}
@media screen and (min-width: 85rem) {
.align-right{
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: right;
float: right;
}
}
header .flexchild-60{
display: none;
}
@media screen and (min-width: 85rem) {
header{
height: 76px;
}
header .flexchild-20{
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
}
header .flexchild-60{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
.flexchild-20, .flexchild-30, .flexchild-35, .flexchild-65, .flexchild-70, .flexchild-100 {
width: 100%;
}
header .flexchild-15 {
width: 50%;
}
@media screen and (min-width: 85rem) {
header .flexchild-15 {
width: calc(((100% / 10) * 1.5));
}
.flexchild-30 {
width: calc(((100% / 10) * 3));
}
.flexchild-35 {
width: calc(((100% / 10) * 3.5));
}
.flexchild-65 {
width: calc(((100% / 10) * 6.5));
}
.flexchild-70 {
width: calc(((100% / 10) * 7));
}
}
main .flexchild-30 {
padding-bottom: 1.5rem;
}
.table {
padding-bottom: 64px;
padding-left: .75rem;
padding-right: .75rem;
}
.table a, .table .medien-block{
width: 100%;
border-bottom: 1px solid black;
padding-top: .5rem;
padding-bottom: .25rem;
}
.table .medien-block a{
width: auto;
border-bottom: 0px solid black;
padding-top: 0rem;
padding-bottom: 0rem;
}
.table a section:last-of-type {
width: 100%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.table a section:last-of-type p, .table .medien-block section:last-of-type p {
padding-top: .5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.table .medien-block section:last-of-type p{
display: inline-block;
}
@media screen and (max-width: 85rem) {
.table a section:first-of-type, .table .medien-block section{
padding-top: .5rem;
}
}
@media screen and (min-width: 85rem) {
.table {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.table a, .table .medien-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: colum wrap;
flex-direction: colum wrap;
}
.table .medien-block a {
display: inline-block;
}
.table a, .table .medien-block {
padding-bottom: .5rem;
}
.table .medien-block a{
padding-bottom: 0rem;
}
.table a section:first-of-type, .table .medien-block section:first-of-type {
vertical-align: middle;
width: 65%;
}
.table a section:last-of-type, .table .medien-block section:last-of-type {
width: 35%;
}
.table a section:last-of-type p{
padding-top: 0rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.table a section:last-of-type p:last-of-type {
width: 4.5rem;
text-align: right;
}
}
.menu-content svg {
vertical-align: top;
height: 4.25rem;
width: auto;
margin-top: .5rem;
margin-bottom: 36px;
}
#suche-button  {
  line-height: 1;
    font-size: 0;
}
#suche-button svg {
vertical-align: bottom;
height: 2.25rem;
width: 2.25rem;
width: auto;
padding: .25rem;
    display: inline-block;

}
@media screen and (min-width: 85rem) {
.login form, .search form {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
.separator{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#separator{
border-left: 1px solid black;
margin-left: 1.25rem;
margin-bottom: .5rem;
height: 2.25rem;
}
.ticket-link {
position: relative;
padding-left: 1.5rem;
}
.ticket-link::before {
content: '↗';
position: absolute;
left: 0;
display: inline-block;
font-size: 1.75rem;
line-height: 1;
}
.menu-content .ticket-link {
position: relative;
padding-left: 3.75rem;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-content .ticket-link::before {
content: '↗';
position: absolute;
left: 0;
font-size: 4.25rem;
line-height: 1;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
nav h3:hover {
-webkit-transform: scale(1.25);
-ms-transform: scale(1.25);
transform: scale(1.25);
}
nav a:hover h3 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
nav h3.open {
-webkit-transform: scale(1.25);
-ms-transform: scale(1.25);
transform: scale(1.25);
}
nav:hover h3.open:hover {
-webkit-transform: scale(1.25);
-ms-transform: scale(1.25);
transform: scale(1.25);
}
@media screen and (max-width: 85rem) {
nav{
display: none;
}
#main .flexbox, footer .flexbox, .kontakt .flexbox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#main .flexchild-30, footer .flexchild-30, .kontakt .section .flexchild-70{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
#main .flexchild-35:first-of-type, footer .flexchild-35:first-of-type, .kontakt .section .flexchild-30 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
#main .flexchild-35:last-of-type, footer .flexchild-35:last-of-type {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
}
@media screen and (max-width: 85rem) {
.footer-space-between{
border-top: 1px solid black;
padding-top: .3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer-space-between section:last-of-type{
text-align: right;
}
.social-media{
border-top: 1px solid black;
padding-top: .3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
}
.text-block, .carousel-container, .image-container {
padding-top: .5rem;
padding-bottom: .5rem;
}
.carousel-container .image-container {
padding-top: 0rem;
padding-bottom: 0rem;
}
.eintrag .image-container {
padding-top: 0rem;
}
.info-block {
padding-top: .5rem;
padding-bottom: .5rem;
padding-left: .75rem;
padding-right: .75rem;
}
.list .info-block {
padding-top: .125rem;
padding-bottom: .125rem;
}
@media screen and (min-width: 85rem) {
.text-block {
padding-left: .75rem;
padding-right: .75rem;
}
.info-block {
padding-left: .75rem;
padding-right: .75rem;
}
.list .info-block {
padding-top: .25rem;
padding-bottom: .25rem;
}
footer .text-block {
padding-top: 0rem;
padding-bottom: 0rem;
}
.text-block .image-container {
width: calc(((100% / 10) * 6.5));
}
}
.head-block{
padding-left: .75rem;
padding-right: .75rem;
height: 50px;
}
@media screen and (min-width: 85rem) {
.head-block {
padding-left: 1.5rem;
padding-right: 1.5rem;
height: 76px;
}
}
@media screen and (min-width: 135rem) {
.text-block .image-container {
width: calc(((100% / 10) * 3.5));
}
}
.past {
display: none;
}
.past .subnav-top, .past .subnav-bottom{
background: rgb(215,215,215);
}
.past p, .past h3, .past h2, .past h1{
color: rgb(215,215,215);
}
.past .subnav-top p, .past .subnav-bottom p{
color: black;
}
.overview .month.past .table a, .overview .event.past a {
border-bottom: 1px solid rgb(215,215,215);
}
.list .month.past .event, .list .month .event.past {
border-bottom: 1px solid rgb(215,215,215);
}
.inliner.center.info-block p{
padding-left: .375rem;
padding-right: .375rem;
}
.list .event {
padding-left: .75rem;
padding-right: .75rem;
}
@media screen and (min-width: 85rem) {
.list .event {
padding-right: 5vw;
padding-left: 5vw;
}
.list .inliner.center.info-block p{
padding-left: 5vw;
padding-right: 5vw;
}
}
.page-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.75rem;
padding-top: .75rem;
}
.subnav {
display: none;
}
.eintrag .subnav{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 36px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background-color: #fff;
z-index: 9999;
padding: .1rem .75rem;
padding-bottom: 0rem;
}
.eintrag .subnav .flexbox {
border-bottom: 1px solid rgb(255,255,255);
position: relative;
top: 0;
width: 100%;
}
@media screen and (min-width: 85rem) {
.subnav {
position: fixed;
top: 76px;
left: 0;
width: 100%;
height: 36px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
background-color: #fff;
z-index: 9999;
padding: .1rem 1.5rem;
padding-bottom: 0rem;
}
.subnav .flexbox {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid black;
}
.eintrag .subnav{
padding: .1rem 1.5rem;
}
.page-title {
display: none;
}
}
.scroll-y {
padding-bottom: calc(1.42rem * 2);
}
@media screen and (min-width: 85rem) {
.scroll-y {
height: calc(100vh - (76px + 36px));
height: calc((var(--vh, 1vh) * 100) - (76px + 36px));
overflow-y: scroll;
}
}
.subnav-top, .subnav-bottom {
left: 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: black;
color: rgb(255, 255, 255);
height: 36px;
}
.subnav-top {
top: 50px;
position: sticky;
z-index: 15;
}
.past .subnav-top {
opacity: 0;
}
.past.loaded .subnav-top {
opacity: 1;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.subnav-bottom {
bottom: 50px;
position: fixed;
display: none;
z-index: 25;
}
.subnav-bottom.active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.subnav-top a, .subnav-bottom a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 85rem) {
.subnav-top {
top: 76px;
}
.subnav-bottom {
bottom: 0;
}
}
.subnav section:first-of-type p{
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
display: inline-block;
margin-right: 1.75rem;
}
.list .event{
padding-top: 36px;
padding-bottom: 36px;
}
.loaded .list .event a h1{
-webkit-transition: transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
.loaded .list .event a h2{
-webkit-transition: transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}
.list .event a.active h1{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.list .event a.active h2{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.list .month .event {
border-bottom: 1px solid black;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.list .month .event:last-of-type {
border-bottom: 0px solid black;
}
@media screen and (max-width: 85rem) {
.list .month .event {
margin-left: .75rem;
margin-right: .75rem;
}
.list .event{
padding-top: 24px;
padding-bottom: 24px;
}
}
.section{
padding-top: .5rem;
padding-bottom: 76px;
padding-left: .75rem;
padding-right: .75rem;
position: relative;
}
.eintrag .section{
padding-bottom: 0rem;
}
.section:before{
content: '';
position: absolute;
top: -1px;
left: 1.5rem;
width: calc(100% - 3rem);
border-top: 1px solid black;
}
.home .section:before, .eintrag .section:before{
border-top: 0px solid black;
}

.list, .overview {
overflow-anchor: none;
}

@media screen and (max-width: 85rem) {
.section:before{
top: -1px;
left: .75rem;
width: calc(100% - 1.5rem);
}
}
.section:last-of-type{
border-bottom: 0px solid black;
}
.overview .month .title-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.month .title-block h2, .month .title-block h1{
position: relative;
}
.month .title-block h2, .month .title-block h1{
position: relative;
width: auto;
}
.overview .notice {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -49%);
-ms-transform: translate(-50%, -49%);
transform: translate(-50%, -49%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgb(255, 255, 255);
color: black;
border: 1px solid black;
padding: 0.25rem .5rem;
border-radius: 3rem;
width: auto;
}
.list .notice {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -49%);
-ms-transform: translate(-50%, -49%);
transform: translate(-50%, -49%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgb(255, 255, 255);
color: black;
border: 1px solid black;
padding: 0.5rem 1.5rem;
border-radius: 3rem;
width: auto;
}
.eintrag .notice {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -49%);
-ms-transform: translate(-50%, -49%);
transform: translate(-50%, -49%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgb(255, 255, 255);
color: black;
border: 1px solid black;
padding: 0.375rem 1rem;
border-radius: 3rem;
width: auto;
}
.home .notice {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -49%);
-ms-transform: translate(-50%, -49%);
transform: translate(-50%, -49%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgb(255, 255, 255);
color: black;
border: 1px solid black;
padding: 0.375rem 1rem;
border-radius: 2.75rem;
width: auto;
}

.heritage {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  text-align: left;
  padding-left: .5rem;
}

@media screen and (min-width: 85rem) {

.list .heritage {
margin-top: .5rem;
}


.overview .month .title-block h2 {
position: relative;
white-space: nowrap;
width: auto;
}

}
@media screen and (max-width: 85rem) {
.overview .month .title-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.home .notice, .list .notice {
padding: 0.25rem .75rem;
border-radius: 2rem;
}
}
.past .notice {
border: 1px solid rgb(215,215,215);
}
.ort {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.headline {
margin-bottom: 2.23rem;
}
.ort-entry {
margin-bottom: calc(2.23rem * 2);
}
@media screen and (min-width: 85rem) {
.ort li:nth-of-type(odd) {
width: 50%;
padding-right: .375rem;
}
.ort li:nth-of-type(even) {
width: 50%;
padding-left: .375rem;
}
}
.team {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
main .team p {
padding-bottom: 0;
}
.team li {
width: 100%;
padding-bottom: 2.23rem;
}
.team p {
padding-bottom: 0;
}
@media screen and (min-width: 85rem) {
.team li {
width: 50%;
padding-left: .25rem;
padding-right: .25rem;
}
}
@media screen and (min-width: 95rem) {
.team li {
width: 33.333%;
}
}
.home .text-block, .kuppel-svg-container svg, .nest-svg-container svg {
display:none;
}
.home .flexbox {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.home .flexbox.reverse{
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.home .event h1, .eintrag h1 {
position: relative;
}
.home li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 36px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-left: 1rem;
padding-right: 1rem;
}
.home li:nth-of-type(2n) {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 64px;
}
.home li:nth-of-type(3n) {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-top: 64px;
}
.home li:nth-of-type(4n) {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 24px;
}
.home li:nth-of-type(5n) {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 48px;
}
.home li:nth-of-type(2n) {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 64px;
}
.home .reverse li:nth-of-type(3n) {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-top: 64px;
}
.home .reverse li:nth-of-type(4n) {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 24px;
}
.home .reverse li:nth-of-type(5n) {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 48px;
}
main.home .text-block p{
padding-bottom: 0;
}
@media screen and (min-width: 85rem) {
.home li {
width: 50%;
}
.home li:nth-of-type(2n) {
width: 50%;
}
.home li:nth-of-type(3n) {
width: 35%;
}
.home li:nth-of-type(4n) {
width: 65%;
}
.home li:nth-of-type(5n) {
width: 65%;
}
.home li:nth-of-type(6n) {
width: 35%;
}
.home .text-block {
max-width: 35vw;
}
}
.kuppel-svg-container {
top: 0;
right: 0;
position: fixed;
height: 100vh;
width: 100vw;
z-index: -1;
padding: 0.75rem;
padding-bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.nest-svg-container {
bottom: 0;
left: 0;
position: fixed;
height: 100vh;
width: 100vw;
z-index: -2;
padding: 0.75rem;
padding-bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.below {
z-index: -99;
}
.kuppel-svg-container svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.kuppel-svg-container svg path, .kuppel-svg-container svg rect {
fill: var(--color-1);
}
.nest-svg-container svg {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.nest-svg-container svg path, .nest-svg-container svg rect {
fill: var(--color-2);
}
@media screen and (min-width: 85rem) {
.kuppel-svg-container {
margin-top: 5rem;
margin-bottom: 5rem;
height: calc((var(--vh, 1vh) * 100) - 10rem);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.nest-svg-container {
margin-top: 5rem;
margin-bottom: 5rem;
height: calc((var(--vh, 1vh) * 100) - 10rem);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.kuppel-svg-container svg {
float: right;
width: 45%;
height: calc(100vh - 5rem);
-o-object-fit: contain;
object-fit: contain;
}
.kuppel-svg-container svg path, .kuppel-svg-container svg rect {
fill: var(--color-1);
}
.nest-svg-container svg {
width: 66.666%;
height: calc(100vh - 5rem);
-o-object-fit: contain;
object-fit: contain;
}
.nest-svg-container svg path, .nest-svg-container svg rect {
fill: var(--color-2);
}
}
.filter-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: sticky;
bottom: 48px;
padding-top: .75rem;
padding-bottom: .75rem;
left: 0;
width: 100%;
z-index: 99;
pointer-events: none;
}
.filter-buttons button {
background-color: rgb(255, 255, 255);
color: black;
border: 1px solid black;
padding: .5rem 36px;
border-radius: 3rem;
cursor: pointer;
-webkit-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
margin-left: 1.5rem;
margin-right: 1.5rem;
pointer-events: auto;
}
.filter-buttons button:hover {
background-color: black;
color: rgb(255, 255, 255);
}
.filter-buttons button.open {
background-color: black;
color: rgb(255, 255, 255);
}
.filter-buttons button[data-filter="alle"] {
border-color: var(--color-1);
}
.filter-buttons button[data-filter="alle"] h2 {
color: var(--color-1);
}
.filter-buttons button[data-filter="alle"]:hover, .filter-buttons button[data-filter="alle"].open {
background-color: var(--color-1);
}
.filter-buttons button[data-filter="alle"]:hover h2, .filter-buttons button[data-filter="alle"].open h2 {
color: white;
}
.filter-buttons button[data-filter="kuppel"] {
border-color: var(--color-2);
}
.filter-buttons button[data-filter="kuppel"] h2 {
color: var(--color-2);
}
.filter-buttons button[data-filter="kuppel"]:hover, .filter-buttons button[data-filter="kuppel"].open {
background-color: var(--color-2);
}
.filter-buttons button[data-filter="kuppel"]:hover h2, .filter-buttons button[data-filter="kuppel"].open h2 {
color: white;
}
.filter-buttons button[data-filter="nest"] {
border-color: var(--color-3);
}
.filter-buttons button[data-filter="nest"] h2 {
color: var(--color-3);
}
.filter-buttons button[data-filter="nest"]:hover, .filter-buttons button[data-filter="nest"].open {
background-color: var(--color-3);
}
.filter-buttons button[data-filter="nest"]:hover h2, .filter-buttons button[data-filter="nest"].open h2 {
color: white;
}
@media screen and (max-width: 85rem) {
.filter-buttons {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 8rem;
left: .75rem;
bottom: calc(52px + 24px);
pointer-events: auto;
}
.filter-buttons button {
margin-bottom: .5rem;
margin-left: 0;
margin-right: 0;
padding: .5rem 24px;
}
}
.size-buttons button {
position: fixed;
top: 50px;
color: black;
cursor: pointer;
left: .75rem;
padding: .2rem;
padding-bottom: .1rem;
padding-top: .25rem;
padding-left: .75rem;
padding-right: .75rem;
border-radius: 1.5rem;
border: 1px solid black;
margin-top: .2rem;
z-index: 999;
}
.size-buttons button.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.size-buttons button {
display: none;
}
.size-buttons button:hover{
border-color: var(--color-4);
}
.size-buttons button:hover p{
color: var(--color-4);
}
.time-buttons button:hover{
border-color: var(--color-5);
}
.time-buttons button:hover p {
color: var(--color-5);
}

.time-buttons button {
position: fixed;
top: 50px;
right: .75rem;
color: black;
cursor: pointer;
padding: .2rem;
padding-bottom: .1rem;
padding-top: .25rem;
padding-left: .75rem;
padding-right: .75rem;
border-radius: 1.5rem;
border: 1px solid black;
margin-top: .2rem;
z-index: 999;
}
.time-buttons button.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.time-buttons button {
display: none;
}
@media screen and (min-width: 85rem) {
.size-buttons button {
top: 76px;
left: 1.5rem;
}
.time-buttons button {
top: 76px;
right: 1.5rem;
}
}
form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 1.42rem;
}
.login form, .search form {
display: block;
margin-top: 0rem;
margin-bottom: 2.84rem;
padding-left: .75rem;
padding-right: .75rem;
}
footer form{
display: block;
margin-top: 1.42rem;
margin-bottom: .75rem;
}
input, textarea {
font-family: "Diatype";
font-size: 1.2rem;
line-height: 120%;
letter-spacing: .02rem;
width: 100%;
padding: 0.5rem 0.75rem;
padding-top: .6rem;
margin-bottom: 0.25rem;
margin-top: .25rem;
color: black;
border: 1px solid black;
background: rgb(255, 255, 255);
}
footer input{
font-size: .9rem;
line-height: 120%;
letter-spacing: .025rem;
}

textarea {
min-height: 9rem;
resize: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
user-drag: none;
}
button, footer button {
font-family: "RIOROM";
font-size: 2.75rem;
line-height: 75%;
background: rgb(255,255,255);
cursor: pointer;
text-transform: uppercase;
text-align: center;
background: white;
color: black;
}
.search input {
font-family: "Diatype";
font-size: 1.1rem;
line-height: 120%;
letter-spacing: .02rem;
width: 100%;
padding: 0.25rem 0.5rem;
margin-bottom: 0.5rem;
color: black;
border: 0px solid black;
border-bottom: 1px solid black;
background: rgb(255, 255, 255);
}
.search .section {
padding-bottom: 0rem;
}
.search button {
font-family: "Diatype";
font-size: 1.1rem;
line-height: 120%;
letter-spacing: .02rem;
width: 100%;
padding: 0.25rem 0.5rem;
color: black;
background: rgb(255, 255, 255);
}
.honeypot {
position: absolute;
left: -9999px;
}
.formular-toggler {
cursor:pointer;
text-decoration: underline;
}
@media screen and (max-width: 85rem) {
.formular-toggler {
text-align: center;
}
}
.formular-toggler::after {
content: ' ↓';
text-decoration: unset;
}
.formular-toggler.open:after {
content: ' ↑';
text-decoration: unset;
}

.mc-field-group{
margin-bottom: 0.5rem;
display: inline-flex;
width: 100%;
}

.mc-field-group section{
display: block;
width: 100%;
}


.mc-field-group p:last-of-type {
padding-bottom: 0;
}

label p {
padding-bottom: 0;
}

footer label p:last-of-type {
padding-bottom: 0;
}

form{
display: inline-flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}

#vorname, #email, #form_line_email {
width: 100%;
margin-bottom: 0.5rem;
}
#name, #tel, #nameblock {
width: 100%;
margin-bottom: 0.5rem;
}
#preferred_date {
width: 100%;
margin-bottom: 0.5rem;
}
#alternative_date {
width: 100%;
margin-bottom: 0.5rem;
}
#time_period {
width: 100%;
margin-bottom: 0.5rem;
}
#event_type, #message, #event_amount {
width: 100%;
margin-bottom: 0.5rem;
}
#benutzername, #passwort {
margin-bottom: 0.5rem;
}

#prename input, #prename label {
display: block;
}

#surname input, #surname label {
display: block;
}

footer #mail section{
width: 100%;
display: inline-block;
}

footer #nameblock section:first-of-type{
margin-right: .25rem;
width: calc(50% - .25rem);
display: inline-block;
}

footer #nameblock section:last-of-type {
margin-left: .25rem;
width: calc(50% - .25rem);
display: inline-block;
}

footer #email {
margin-right: 0rem;
width: 100%;
margin-bottom: 0rem;
}

.newsletter-message {
margin-top: .5rem;
}
@media screen and (min-width: 85rem) {
#vorname, #email, #form_line_email {
margin-right: .25rem;
width: calc(50% - .25rem);
margin-bottom: 0.5rem;
}


#name, #tel {
margin-left: .25rem;
width: calc(50% - .25rem);
margin-bottom: 0.5rem;
}

#preferred_date {
margin-right: .25rem;
width: calc(33.333% - .25rem);
margin-bottom: 0.5rem;
}
#alternative_date {
margin-right: .25rem;
margin-left: .25rem;
width: calc(33.333% - .5rem);
margin-bottom: 0.5rem;
}
#time_period {
margin-left: .25rem;
width: calc(33.333% - .25rem);
margin-bottom: 0.5rem;
}
#event_type {
margin-right: .25rem;
width: calc(66.666% - .25rem);
margin-bottom: 0.5rem;
}
#event_amount {
margin-left: .25rem;
width: calc(33.333% - .25rem);
margin-bottom: 0.5rem;
}
#message {
width: 100%;
margin-bottom: 0.5rem;
}
}
.menu, .menu-content{
display: none;
}
@media screen and (max-width: 85rem) {
.menu {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 52px;
background: rgb(255,255,255);
z-index: 9999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.menu-toggler {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 50px;
height: 1.5rem;
margin-top: .75rem;
}
.menu-toggler .line {
width: 100%;
height: .25rem;
background-color: black;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.menu-toggler.open .line-1 {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: relative;
top: .625rem;
}
.menu-toggler.open .line-2 {
opacity: 0;
}
.menu-toggler.open .line-3 {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
position: relative;
top: -.625rem;
}
.menu-content {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
height: 100vh;
height: calc((var(--vh, 1vh) * 100));
background: rgba(255,255,255, .9);
text-align: center;
display: none;
z-index: 999;
padding-bottom: calc(36px + 52px);
}
.menu-content.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.menu-content h2{
line-height: 90%;
}
.menu-content.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
#news-banner {
display: none;
position: fixed;
top: 0rem;
left: 0;
width: 100vw;
z-index: 99;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.news-close-btn {
cursor: pointer;
color: black;
width: 2rem;
padding: .2rem;
padding-top: .3rem;
padding-bottom: .2rem;
display: block;
position: absolute;
top: 0;
left: 0;
margin-left: 1.5rem;
z-index: 9;
text-align: center;
}
#news-list-container {
margin-left: 3.75rem;
overflow: hidden;
}
#news-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-width: 100%;
z-index: 1;
}
#news-list li {
display: inline-bock;
white-space: nowrap;
margin-right: .25rem;
margin-left: .25rem;
padding-top: .3rem;
padding-bottom: .2rem;
height: 100%;
padding-left: 1rem;
padding-right: 1rem;
opacity: .8;
-webkit-transition: opacity .25s;
-o-transition: opacity .25s;
transition: opacity .25s;
width: auto;
}
#news-list li:hover {
opacity: 1;
}
#news-list {
-webkit-animation: infinite-scroll 25s linear infinite;
animation: infinite-scroll 25s linear infinite;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@media screen and (max-width: 85rem) {
#news-list-container {
margin-left: 3rem;
}
.news-close-btn {
margin-left: .75rem;
}
#news-list {
-webkit-animation: infinite-scroll 20s linear infinite;
animation: infinite-scroll 20s linear infinite;
}
}
#news-list:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.slide{
margin-right: 1.5rem;
width: 100%;
}
.flickity-enabled {
position: relative;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 0;
width: 100%;
}
.flickity-enabled.is-initialized .flickity-viewport {
height: auto;
}
.flickity-slider {
position: absolute;
width: 100%;
height: auto;
}
.carousel-cell img {
opacity: 0;
-webkit-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.carousel-cell.is-selected img {
opacity: 1;
}
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-initialized .flickity-viewport {
-webkit-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.prev-button, .next-button {
cursor: pointer;
}
.carousel .previous {
z-index: 10000;
top: 0;
display: block;
position: absolute;
left: 0;
width: 50%;
height: 100%;
cursor: pointer;
background: none;
border: none;
outline: none;
}
.carousel .next {
z-index: 10000;
top: 0;
display: block;
position: absolute;
right: 0;
width: 50%;
height: 100%;
cursor: pointer;
background: none;
}
.flickity-button-icon {
display: none;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes infinite-scroll {
0% {
-webkit-transform: translateX(110%);
transform: translateX(110%);
}
100% {
-webkit-transform: translateX(-150%);
transform: translateX(-150%);
}
}
@-webkit-keyframes infinite-scroll {
0% {
-webkit-transform: translateX(110%);
}
100% {
-webkit-transform: translateX(-150%);
}
}