@charset 'UTF-8';
@font-face { font-family: 'Lyyra'; font-weight: 400; font-style: normal; src: url('./fonts/LyyraStandard-Regular.eot'); src: url('./fonts/LyyraStandard-Regular.eot?#iefix') format('embedded-opentype'), url('./fonts/LyyraStandard-Regular.woff2') format('woff2'), url('./fonts/LyyraStandard-Regular.woff') format('woff'); } 
@font-face { font-family: 'Lyyra'; font-weight: 700; font-style: normal; src: url('./fonts/LyyraStandard-Medium.eot'); src: url('./fonts/LyyraStandard-Medium.eot?#iefix') format('embedded-opentype'), url('./fonts/LyyraStandard-Medium.woff2') format('woff2'), url('./fonts/LyyraStandard-Medium.woff') format('woff'); }
@font-face { font-family: 'Lyyra'; font-weight: 900; font-style: normal; src: url('./fonts/LyyraExpanded-Medium.eot'); src: url('./fonts/LyyraExpanded-Medium.eot?#iefix') format('embedded-opentype'), url('./fonts/LyyraExpanded-Medium.woff2') format('woff2'), url('./fonts/LyyraExpanded-Medium.woff') format('woff'); }

/**
 * © 2019 Higi Bigler (nullnulleins.ch). All rights reserved.
 */

* { margin: 0; padding: 0; }
html, body { height: 100%; }
/*          italic small-caps bold */
body { font: normal normal normal 1.5625em/1.2 'Lyyra', sans-serif; letter-spacing: .015em; margin: 0; padding: 0; -webkit-text-size-adjust: none; overflow-y: scroll; background-color: #FFF; color: #000; }
body.inverted, .inverted { background-color: #000; color: #FFF; }
body.inverted header, body.inverted footer { background-color: #000; border-color: #FFF; }
body.inverted nav a:after { background-color: #FFF; }
body.inverted #bg { background-color: #000; }
body.inverted #bg.initialized .worm { stroke: #FFF; }
body.inverted #bg .text { fill: #000; }
body.inverted .contentwrapper { border-color: #FFF; background-color: #000; }

#fullscreen { position: fixed; bottom: .25em; right: .25em; }

/* bg */
#bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: #FFF; }
#bg svg { min-width: 100%; min-height: 100%; width: 680px; position: absolute; top: 0; right: 0; }
#bg svg .worm { fill: transparent; stroke: transparent; stroke-width: 28px; stroke-linecap: round; }
#bg.initialized svg .worm { stroke: #00f; }
#bg svg.racing .worm { /*stroke: #000; stroke-linecap: round; stroke-dasharray: 20,30;*/ }
#bg svg .textpath { fill: transparent; }
#bg svg .text { font-size: 15px; fill: #FFF; dominant-baseline: central; font-weight: 900; text-transform: uppercase; }

/* structure */
#container { }
header { position: fixed; top: 0; left: 0; right: 0; border-bottom: 2px solid #000; background-color: #FFF; z-index: 2; }
footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; border-top: 2px solid #000; justify-content: space-between; background-color: #FFF; }
.fixedwidth { margin: 0 auto; padding: 0 2em; /*max-width: 1200px;*/ display: block; }
.splitter { display: flex; width: 100%; justify-content: space-between; }
.splitter > div:last-child { text-align: right; }
.splitter a { display: block; }

/* navigation */
#logo, nav { font-size: 80%; font-weight: 700; text-transform: uppercase; padding: .525em 0; }
#logo { padding-left: 2.5em; }
footer nav { padding-right: 1.25em; }
footer nav span { font-size: 70%; font-weight: 400; }

nav ul { list-style: none; display: block; }
nav ul li { display: inline-block; margin: 0 1.25em; }
nav ul li.pagegroup { margin-right: 0; }
nav ul li.pagegroup + li.pagegroup { margin-left: 0; }
li.externalurl + li.externalurl { margin-left: 0; }
#navigation ul { display: flex; width: 100%; justify-content: space-between; }

nav a, #logo a { text-decoration: none; margin: 0 -.25em; padding: 0 .25em; display: block; }
nav a { }
nav a:hover, nav a.active, #logo a:hover { font-style: italic; }

nav a[href*=instagram] span, nav a[href*=facebook] span, nav a[href*=eepurl] span { display: none; }
nav a[href*=instagram]:hover, nav a[href*=facebook]:hover, nav a[href*=eepurl]:hover { }
nav a[href*=instagram]:before, nav a[href*=facebook]:before, nav a[href*=eepurl]:before { content: '\f2fe'; white-space: nowrap; font-family: 'Material Design Icons'; font-weight: 400; font-size: 100%; line-height: 1; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; }
nav a[href*=facebook]:before { content: '\f20c'; }
nav a[href*=eepurl]:before { content: '\ffd1'; }

/**/
#homearrow { top: calc(100vh - 3em); left: calc(50% - .5em); position: absolute; font-size: 200%; width: 1em; height: 1em; -webkit-animation: sdb04 5s infinite; animation: sdb04 5s 3; background-color: rgba(255,255,255,.5); border-radius: .5em; }
@-webkit-keyframes sdb04 {
	0% { transform: translateY(0); }
	70% { transform: translateY(0); }
	75% { transform: translateY(.15em); }
	80% { transform: translateY(0em); }
	85% { transform: translateY(.15em); }
	90% { transform: translateY(0em); }
}
@keyframes sdb04 {
	0% { transform: translateY(0); }
	70% { transform: translateY(0); }
	75% { transform: translateY(.15em); }
	80% { transform: translateY(0em); }
	85% { transform: translateY(.15em); }
	90% { transform: translateY(0em); }
}


/* smart navigation */
#smartbutton { position: fixed; top: 0; right: 0; z-index: 10; display: block; }
#smartbutton a { display: block; padding: 1em; width: 1.4em; height: 1em; border: none; }
#smartbutton a span { display: block; height: 2px; width: 100%; background-color: #000; position: relative; margin: calc(.5em - 1px) 0 0; transition: width 0s linear .15s, background-color .15s ease-out .15s; }
#smartbutton a span:before, #smartbutton a span:after { content: ''; display: block; height: inherit; background-color: #000; top: -9px; left: 0; position: absolute; width: 1.4em; transition: transform .15s ease-in, top .15s ease-out .15s, background-color .15s ease-out .15s; }
body.inverted #smartbutton a span, body.inverted #smartbutton a span:before, body.inverted #smartbutton a span:after { background-color: #FFF; }
#smartbutton a span:after { top: 9px; }
body.smartnavigation #smartbutton a span { width: 0; }
body.smartnavigation #smartbutton a span:before, body.smartnavigation #smartbutton a span:after { transition: top .15s ease-in, transform .15s ease-out .15s, background-color .15s ease-out .15s; background-color: #FFF; }
body.smartnavigation #smartbutton a span:before { top: 0; transform: rotate(45deg); }
body.smartnavigation #smartbutton a span:after { top: 0; transform: rotate(-45deg); }

/**/
#agendafilter { margin: 1.525em 0 -1.225em; border-top: 2px solid #000; padding: .25em 0 0; }
#agendafilter ul { list-style: none; margin: 0 -1em 0 0; padding: 0; }
#agendafilter ul li { margin: 0; padding: 0; display: inline-block; margin-right: 1em; }
#agendafilter a { text-decoration: none; }
#agendafilter a:hover, #agendafilter a.active { text-decoration: underline; }

/*
#agendafilter dl { display: flex; flex-wrap: wrap; }
#agendafilter dt { width: 2em; padding-top: 3px; }
#agendafilter dd { width: calc(100% - 2em); }
#agendafilter ul { list-style: none; }
#agendafilter ul li { display: inline-block; margin: 0 1px 2px; line-height: 1.1; }
#agendafilter a { padding: 2px 4px 0; border: 2px solid #000; text-decoration: none; display: block; }
#agendafilter a.active { background-color: #000; color: #FFF; text-decoration: none; }

/**/
section.eventgroup { margin: 1.525em 0; }
section.eventgroup h2, .eventlist.eventdetails h2 { margin: 0; line-height: 1.2; }
.eventlist.eventdetails .eventdetail h2 { margin: .25em 0; line-height: 1; }
section.eventgroup h2:not(.real), article.event h2:not(.real) { font-size: 100%; }

article.eventserie { margin: 6em 0 1.525em 0; background-color: #000; color: #FFF; position: relative; border-bottom: 2px solid #FFF; }
article.eventserie .header { background-color: #000; color: #FFF; border-top: 2px solid #FFF; padding-top: .5em; padding-bottom: .5em; text-transform: uppercase; }
article.eventserie .header .download { text-transform: none; }
article.eventserie .header .download a { font-size: 64%; }
article.eventserie .header .download a:after { content: '\f045'; white-space: nowrap; font-family: 'Material Design Icons'; font-weight: 400; font-size: 100%; line-height: 1; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; }
section.eventgroup:first-child article.eventserie { margin-top: 1.525em; }

div.eventlist { background-color: #FFF; }
article.event { border-bottom: 2px solid #000; position: relative; }
article.event:first-child { border-top: 2px solid #000; }
.datetime { display: flex; font-size: 80%; }

article.event .header { display: flex; width: 100%; max-width: 100%; line-height: 1.2; padding: 0 1em 0 2em; box-sizing: border-box; }
article.event .header > div { padding: .5em 1em .6em 0; box-sizing: border-box; flex-shrink: 0; }
article.event .date { text-transform: uppercase; width: 5em; }
article.event .time { width: 6.25em; }
article.event .titlewrapper { width: calc(100% - 11.25em); display: flex; }
article.event .titlewrapper .time { display: none; } 
article.event .title { width: 60%; box-sizing: border-box; padding-right: 1em; }
div.eventlist.eventdetails article.event .title { width: calc(100% - 10em); }
article.event .venue { text-transform: uppercase; width: 40%; }
article.event .body { display: none; padding: 0; }
p.morelinks a:not(:first-child) { margin-left: 1em; }
p.morelinks a.facebook span { font-size: 80%; }
p.morelinks a.facebook:hover span:before { font-style: italic; }

article.event .content img { max-width: 100%; height: auto; }

article.event > a { text-decoration: none; display: block; }
article.event > a:hover .header { background-color: #000; color: #FFF; }
article.event > a:hover .header .title h2 { font-style: italic; }

article.event.open, article.event:hover { background-color: #000; color: #FFF; }
section.eventgroup article.event.open, section.eventgroup article.event:hover { border-color: #FFF; }
article.event.open .body { display: block; }

/* hide the body in the space's agenda */
.eventdetail { padding: 1em; position: relative; }

/**/
table.openingtimes { border-collapse: collapse; padding: 0; margin: 0; }
table.openingtimes th { font-weight: 400; padding-right: .5em; }
table.openingtimes th, table.openingtimes td { text-align: left; vertical-align: top; }

/**/
article.eventserie .description { border-bottom: 2px solid #000; }

/* content */
#content { padding: 6.15em 0 75vh; }
a { color: inherit; }
a:hover { text-decoration: none; }
a img { border: none; }
main a.email, main a.phone { text-decoration: none; }
main a.email:hover, main a.phone:hover { text-decoration: underline; }

h1 { font-size: 260%; font-weight: 900; text-transform: uppercase; line-height: 1; word-wrap: break-word; }
h1 span { display: block; font-size: 51%; margin-left: -.1em; }
h2 { font-weight: 400; font-size: 160%; line-height: 1.212121212121212; margin: 1em 0 .625em; }
h2:first-child { margin-top: .1em; }
p { margin: 1em 0; }
p:first-child { margin-top: .25em; }
.visiting { font-size: 52%; }
sup, sub { vertical-align: text-top; font-size: 75%; }
sub { vertical-align: text-bottom; }

main ul, #ckeditorarea ul { list-style: disc; padding-left: 1em; }

address { font-style: normal; }
ul.publictransport { list-style: none; padding: 0; margin: 0; }
ul.publictransport li:before { content: '\F52C'; padding: 0 .25em 0 0; white-space: nowrap; font-family: 'Material Design Icons'; font-weight: 400; font-size: 90%; line-height: 1; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; }
ul.publictransport li.tram:before { content: '\F52D'; }
ul.publictransport li.bus:before { content: '\F0E7'; }

/* space */
.details { margin: 0 -1em 0 0; display: flex; max-width: 1200px; }
.details > div { padding: 0 1em 0 0; width: 33.3333%; box-sizing: border-box; flex-shrink: 0; }
.fixedwidth .description { max-width: 1200px; }

/* gallery */
.gallerywrapper { padding: 1em 0; overflow: hidden; width: 100%; position: relative; margin: 1em 0; }
.gallerywrapper .navigationwrapper { }
.galleryslider { white-space: nowrap; overflow: hidden; height: 70vh; max-height: 70vh; }
.galleryslider > div { display: flex; height: 70vh; max-height: 70vh; }
.galleryslider > div.sliding { transition: transform .5s; }
.galleryslider div.slide { height: 100%; flex-shrink: 0; max-height: 70vh; box-sizing: border-box; transition: transform .5s ease; position: relative; z-index: 0; }
.galleryslider div.slide.prev { transform: translateX(calc(8%)); z-index: 1; cursor: pointer; }
.galleryslider div.slide.next { transform: translateX(calc(-8%)); z-index: 1; cursor: pointer; }
.galleryslider figure { max-width: 90%; margin: auto; height: 100%; max-height: 70vh; background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform .5s, background-position .5s, opacity .5s; opacity: 1; }
.galleryslider .prev figure { background-position: right center; opacity: .5; }
.galleryslider .next figure { background-position: left center; opacity: .5; }
.galleryslider .prev:hover figure, .galleryslider .next:hover figure { opacity: 1; }
.gallerywrapper a.nav { display: block; height: .5em; line-height: .5; z-index: 1; position: absolute; top: 50%; margin: -.25em 0 0; right: 2.5%; border: none; visibility: hidden; cursor: pointer; font-size: 500%; }
.gallerywrapper a.prev { left: 2.5%; right: auto; /*transform: rotate(180deg);*/ }
.gallerywrapper.initialized a.nav { visibility: visible; visibility: hidden; }

/**/
.imagewrapper { position: relative; overflow: hidden; background-color: #000; }
.contentwrapper.gallery .imagewrapper { margin-bottom: 1.525em; }
.imagewrapper .imageslider { height: 62.08971553610503vw; max-height: 75vh; overflow: hidden; overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; -ms-scroll-snap-type: mandatory; scroll-snap-type: mandatory; -ms-scroll-snap-points-x: repeat(100%); scroll-snap-points-x: repeat(100%); -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; scroll-behavior: smooth; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.imagewrapper .imageslider::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
.imagewrapper figure { background-size: cover; background-position: center; height: 62.08971553610503vw; max-height: 75vh; width: 100%; flex-shrink: 0; flex-grow: 0; scroll-snap-align: center; background-repeat: no-repeat; }
.imagewrapper .navigationwrapper { display: none; }
.imagewrapper.initialized .navigationwrapper { display: block; }
.imagewrapper .navigationwrapper .nav { position: absolute; top: 0; bottom: 0; display: flex; justify-content: space-around; flex-direction: column; cursor: pointer; }
.imagewrapper .navigationwrapper .nav span { font-size: 200%; font-family: 'Material Design Icons'; font-weight: 400; line-height: 1; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; padding: 0 2.5vw; /*mix-blend-mode: difference;*/ color: #FFF; }
.imagewrapper .navigationwrapper .nav.prev { left: 0; }
.imagewrapper .navigationwrapper .nav.next { right: 0; }
.imagewrapper.first .navigationwrapper .nav.prev, .imagewrapper.last .navigationwrapper .nav.next { display: none; }
.pagepart .imagewrapper figure.portrait, .eventlist.eventdetails .imagewrapper figure.portrait, .eventlist .body figure.portrait, .eventserie figure.portrait { background-size: contain; background-color: #000 !important; }
.pagepart .imagewrapper { margin-bottom: -1.525em; }

/**/
.eventlist.eventdetails .imagewrapper { margin-bottom: 1em; }
.eventlist.eventdetails .imagewrapper .imageslider, .eventlist.eventdetails .imagewrapper figure { height: 20em; max-height: 20em; }
.eventlist.eventdetails .date { padding-right: 1em; text-transform: uppercase; }
.eventlist.eventdetails .date br { display: none; }
.eventlist.eventdetails .visitors span:first-child, .eventlist.eventdetails .visitors span:last-child { text-transform: uppercase; font-size: 76%; }

/**/
.contentwrapper { border-top: 2px solid #000; border-bottom: 2px solid #000; background-color: #FFF; margin: 2.15em 0; min-height: 1em; padding: 1.525em 0; position: relative; }
.contentwrapper + .contentwrapper.header { margin-top: 6.15em; }
.contentwrapper.gallery { padding-top: 0; }
.contentwrapper.list { padding: 0; border-bottom: none; }
.contentwrapper.list ul { padding: 0; margin: 0; list-style: none; }
.contentwrapper.list li { border-bottom: 2px solid #000; }
.contentwrapper.list a { text-decoration: none; text-transform: uppercase; }
.contentwrapper.list a span { font-size: 180%; line-height: 1; display: block; padding: .15em 0; word-wrap: break-word; }
.contentwrapper.list a:hover { background-color: #000; color: #FFF; font-style: italic; }
body.home main > .contentwrapper:first-child { margin-top: calc(100vh - 6.15em); }
section.eventgroup + .contentwrapper { margin-top: 6em; }
body.home .outerconnectedspace, body.home .outerconnectedspace + section { display: none; }

.compact { margin: 11.5em 0 2.15em; }
.compact.noheader .contentwrapper:first-child { display: none; }
.compact.noheader .contentwrapper.list { border-top: 2px solid #000; }
.compact.map { height: 75vh; position: relative; background-color: #FFF; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.compact.map #map { cursor: pointer; }
.compact .contentwrapper { margin: 0; }
.compact .contentwrapper:first-child { border-bottom: none; padding-bottom: 0; }
.compact .contentwrapper:not(:first-child) { border-top: none; }
main .inverted .contentwrapper { background-color: #000; color: #FFF; border-color: #FFF; }

/* map */
body.map #content { padding: 0; flex-grow: 1; display: flex; width: 100%; flex-direction: column; }
#mapwrapper { position: relative; width: 100%; height: 100%; flex-grow: 1; }
#mapwrapper svg { display: block; width: 100%;  height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s; cursor: grab; }
#mapwrapper svg.panning { cursor: grabbing; }
#mapwrapper svg.initialized { opacity: 1; }
#mapwrapper text { font-size: 7px; letter-spacing: 0; transition: font-size 1s; }
#mapwrapper textPath { text-transform: uppercase; fill: #FFF; dominant-baseline: central; font-weight: 900; font-size: 6px; }
/*.busstop { outline: 2px solid yellow; transform: scale(2); transform-origin: 0; }*/

#mapsearch { position: fixed; top: 2.5em; left: .5em; border: 2px solid #000; background-color: #FFF; cursor: pointer; max-width: 360px; width: calc(100vw - 5em); }
body.home #mapsearch { display: none; }
#mapsearch:after { content: '';  display: block; border-top: .4em solid #000; border-left: .3em solid transparent; border-right: .3em solid transparent; width: 0; height: 0; position: absolute; right: .5em; top: .3em; }
#mapsearch.open:after { border-top: none; border-bottom: .4em solid #000; }
#mapsearch.open #mapsearchlist { display: block; }
#mapsearch > div { font-size: 60%; line-height: 1.2; }
#mapsearchlabel { margin: .25em 2em .25em .5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#mapsearchlist { display: none; height: auto; max-height: calc(100vh - 10.5em); overflow: hidden; overflow-y: auto; border-top: 2px solid #000; }
#mapsearchlist ul { padding: 0; list-style: none; margin: 0; text-transform: uppercase; }
#mapsearchlist ul li { }
#mapsearchlist a { text-decoration: none; padding: .25em .5em; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#mapsearchlist a:hover { background-color: #000; color: #FFF; font-style: italic; }

#map circle.space { transition: r 1s; cursor: pointer; stroke: #000; stroke-width: 2px; fill: #FFF; }
#map circle.space.active { fill: #000; }
#map circle.space.active.inactive { fill: url(#activeinactive); }
#map path.visiting { stroke: magenta; fill: none; stroke-width: 12px; stroke-dasharray: 6 8; opacity: .4; animation: dash 5s linear infinite; stroke: url(#linear); transition: stroke-width 1s; }
@keyframes dash {
  to { stroke-dashoffset: 112; }
}

/* onzoom */
#map #smallstreets > g { opacity: 0; transition: opacity 1s; }
@media screen and (max-width: 699px) {
	#map circle.space { r: 10px !important; }
	#map path.visiting { stroke-width: 18px; }
	#map.zoom-6 circle.space { r: 6px !important; stroke-width: 1px; }
	#map.zoom-6 path.visiting { stroke-width: 10px; }
	#map.zoom-10 circle.space { r: 4px !important; }
	#map.zoom-10 path.visiting { stroke-width: 8px; }
	#map.zoom-6 #smallstreets > g { opacity: 1; }
	#map.zoom-8 #streetnames text { font-size: 6px; }
}
@media screen and (min-width: 700px) {
	#map.zoom-4 circle.space { r: 4px !important; stroke-width: 1px; }
	#map.zoom-4 path.visiting { stroke-width: 8px; }
	#map.zoom-8 circle.space { r: 3px !important; }
	#map.zoom-8 path.visiting { stroke-width: 7px; }
	#map.zoom-4 #smallstreets > g { opacity: 1; }
	#map.zoom-6 #streetnames text { font-size: 6px; }
	#map.zoom-8 #streetnames text { font-size: 5px; }
}

#maptooltips { background-color: red; font-size: 60%; line-height: 1.2; }

.maptooltip { background-color: #FFF; color: #000; margin: 0; display: inline-block; position: absolute; display: none; border: 2px solid #000; box-sizing: border-box; transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 90deg); transition: transform .125s; max-width: 40vw; }
.maptooltip div.space { padding: 6px 8px; background-color: #FFF; color: #000; }
.maptooltip div.space.active { background-color: #000; color: #FFF; }
.maptooltip.active { background-color: #000; color: #FFF; }
.maptooltip.active:after { display: none; }
.maptooltip span.visitors span { text-transform: none; }

.maptooltip:before, .maptooltip:after { content: ''; display: block; width: 0; height: 0; top: 100%; left: -2px; position: absolute; border-right: 15px solid transparent; border-left: 22px solid #000; border-bottom: 30px solid transparent; }
.maptooltip:after { border-left-color: #FFF; left: 0; border-bottom-width: 24px; border-left-width: 17px; }
.maptooltip.left:before { border-right: 22px solid #000; border-left: 15px solid transparent; left: auto; right: -2px; }
.maptooltip.left:after { left: auto; right: 0; border-right: 17px solid #FFF; border-left: 15px solid transparent; }
.maptooltip.right { text-align: right; }
.maptooltip.right:before { border-right-color: black; border-left-color: transparent; left: auto; right: 0; }
.maptooltip.bottom:before, .maptooltip.bottom:after { top: auto; bottom: 100%; border-bottom: none; border-top: 30px solid transparent; }
.maptooltip.bottom:after { bottom: calc(100%); border-top: 24px solid transparent; }

.maptooltip.show { display: block; transform: scale3d(1, 1, 1) rotate3d(1, 0, 0, 0); }
.maptooltip span { display: block; text-transform: uppercase; font-weight: 600; }
.maptooltip span a { text-decoration: none; }
.maptooltip span a:hover { font-style: italic; }

/**/
p.visitors { font-size: 76%; }
p.visitors .visiting { font-size: 68.5%; text-transform: none; }

/**/
.uppercase { text-transform: uppercase; }

/**/
div.logowrapper { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -1em; padding: 1.25em 0; }
div.logowrapper > div { width: 16.666667%; vertical-align: middle; padding: 1em; box-sizing: border-box; }
div.logowrapper img { max-width: 100%; height: auto; margin: 0 auto; display: block; }

/* gvideoembed */
span.gvideoembed { display: block; background-size: cover; background-position: center; position: relative; max-width: 100% !important; padding-bottom: 56.25%; height: 0 !important; overflow: hidden; transition: all .25s; cursor: pointer; background-color: #000; }
span.gvideoembed:hover { opacity: .9; }
span.gvideoembed a.gvideoembed { display: none; }
span.gvideoembed:before { opacity: .5; content: ''; display: block; border-radius: 5px; width: 44px; height: 44px; background-color: #FFF; position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; padding: 0; transition: all .25s; }
span.gvideoembed:after { opacity: .9; content: ''; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -9px; width:0; height:0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 22px solid #000; transition: all .25s; }
span.gvideoembed:hover:before, span.gvideoembed:hover:after { opacity: .85; }
span.gvideoembed.loaded, span.gvideoembed.loaded:hover { opacity: 1; cursor: wait; }
span.gvideoembed.loaded:after, span.gvideoembed.loaded:before { display: none; }
.gvideoembed iframe, .gvideoembed object, .gvideoembed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; }

/* image2 */
img { display: block; }
figure { margin: 0; padding: 0; }
figure.gimagecaptioned { margin-bottom: 2em; }
figure.gimagecaptioned figcaption { font-size: 90%; margin-top: .5em; max-width: 100%; }
.gimageleft { float: left; margin: .2em 1em 1em 0; }
.gimagecenter { text-align: center; }
.gimagecenter figcaption, .gimagecenter img { margin-left: auto; margin-right: auto; text-align: left; }
.gimageright { float: right; margin: .2em 0 1em 1em; }

/**/
.clearfix:before, .clearfix:after { content: ' '; display: table; }
.clearfix:after { clear: both; }
span.nowrap { white-space: nowrap; }
span.hyphenate { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

/* content to be read by screen-reader but not visible */
.invisible { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* mdi */
span.mdi { }
span.mdi.mdi-size-xs { font-size: 50%; }
span.mdi.mdi-size-s { font-size: 75%; }
span.mdi.mdi-size-l { font-size: 150%; }
span.mdi.mdi-size-xl { font-size: 200%; }
span.mdi > span { display: none; }

/* twocolumns */
@media only screen and (min-width: 630px) {
	.twocolumns { display: flex; width: 100%; flex-direction: row; }
	.twocolumns:not(:first-child) { margin-top: -1.25em; }
	.twocolumns:not(:last-child) { margin-bottom: -1.25em; }
	.twocolumns > div { flex-grow: 1; width: 50%; }
	.twocolumns > div.twocolumns-left { padding-right: .675em; }
	.twocolumns > div.twocolumns-right { padding-left: .675em; }
}

/* rwd */
@media only screen and (min-width: 1000px) {
	#bg svg .worm { stroke-width: 23px; }
	#bg svg .text { font-size: 12px; }
}
@media only screen and (min-width: 1260px) {
	#bg svg .worm { stroke-width: 22px; }
	#bg svg .text { font-size: 11px; }
}
@media only screen and (min-width: 1560px) {
	body { font-size: 1.75em; }
	#bg svg .worm { stroke-width: 20px; }
	#bg svg .text { font-size: 10px; }
}
@media only screen and (min-width: 1900px) {
	body { font-size: 2em; }
}

@media only screen and (min-width: 1001px) {
	article.eventserie .description { padding-left: 13.25em; }
}

@media only screen and (max-width: 1175px) {
	.eventlist.eventdetails .header .time { display: none; }
	div.eventlist.eventdetails article.event .title { width: calc(100% - 3.75em); }
}

@media only screen and (max-width: 1000px) {
	div.logowrapper > div { width: 20%; }
}

/* events on space page */
@media only screen and (min-width: 946px) {
	div.eventlist.eventdetails { display: flex; flex-direction: row; border-bottom: 2px solid #000; }
	div.eventlist.eventdetails > div { width: 50%; flex-shrink: 0; flex-grow: 0; box-sizing: border-box; }
	div.eventlist.eventdetails > div:last-child { border: 2px solid #000; border-right: none; border-bottom: none; }
	.eventdetails article.event .body { display: none !important; }
	div.eventlist.eventdetails article.event:last-child { border-bottom: none; }
}
@media only screen and (max-width: 945px) {
	.eventlist.eventdetails .eventdetail { display: none; }
	.eventlist.eventdetails article.event .body { padding: 0 2em; }
	.eventlist.eventdetails article.event .body h2, .eventlist.eventdetails article.event .body .date { display: none; }
	.eventlist.eventdetails article.event.open, .eventlist.eventdetails article.event:hover { border-color: #FFF; }
	body { font-size: 1.35em; }
	#bg { right: -11%; left: -7% }
	div.logowrapper > div { width: 25%; }
}

@media only screen and (max-width: 767px) {
	.details { display: block; }
	.details > div { width: auto; margin: 1em 0 0; }
	.details > div:first-child { margin-top: 0; }
}

@media only screen and (min-width: 741px) {
	article.event .body .fixedwidth { padding-left: 0; }
	article.event .content { display: flex; }
	article.event .content > div { width: 12.25em; flex-shrink: 0; flex-grow: 0; padding: 0 0 1em 1em; box-sizing: border-box; }
	article.event .content > div:last-child { width: calc(100% - 11.25em); margin: .55em 0 0; }
	article.event .content > div:last-child p:first-child { margin-top: 0; }
}
/* single column agenda */
@media only screen and (max-width: 740px) {
	article.event .time { display: none; }
	article.event .titlewrapper { display: block; padding-right: 0; width: calc(100% - 4.75em); }
	article.event .titlewrapper .title { width: auto; padding-right: 0; }
	article.event .titlewrapper .venue { width: auto; margin-top: .125em; }
	article.event .titlewrapper .time { display: block; }
	article.event .content > div:first-child img { margin-bottom: 1em; }
}

/* smartnavigation */
@media only screen and (min-width: 821px) {
	#smartbutton, nav li.home, header .footer { display: none; }
	body.map #container { display: flex; flex-direction: column; height: 100%; }
	body.map header, body.map footer { position: static; flex-grow: 0; }
}
@media only screen and (max-width: 820px) {
	body { font-size: 1.125em; line-height: 1.2; }
	h1 { font-size: 166.6666%; }
	.contentwrapper { padding: 1em 0; }
	.pagepart .imagewrapper { margin-bottom: -1em; }
	.fixedwidth { padding: 0 6%; }
	footer { display: none; }
	header { background-color: #000; color: #FFF; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; transform: translateX(-100%); opacity: 0; transition: transform .01s .3s, opacity .3s; border: none; display: flex; flex-direction: column; justify-content: space-between; }
	body.smartnavigation header { transform: translateX(0); opacity: 1; transition: transform .01s, opacity .3s .01s; }
	#navigation ul { display: block; width: 100%; }
	#navigation ul li { margin-bottom: .25em; }
	nav ul li { display: block; margin: 0; }
	.footer nav { text-transform: none; padding-bottom: 0; }
	#logo, nav { font-size: 120%; padding-left: 0; }
	nav a:after { background-color: #FFF; }
	#logo { padding-top: 0; }
	#navigation { padding: 18% 6% 6%; }
	header .footer { font-size: 80%; border-top: 2px solid #FFF; padding: 6%; }
	li.externalurl { margin-top: 1em; float: left; }
	li.externalurl + li.externalurl { margin-left: .75em; }
	
	body.map #container, body.map #content { height: 100%; }
	div.logowrapper > div { width: 33.3333%; }
	article.event .header { padding: 0 6%; }
	.eventlist.eventdetails article.event .body { padding: 0 6%; }
	
	#mapsearch { top: .65em; left: .65em; }
	#mapsearch > div { font-size: 80%; line-height: 1.2; }
	#mapsearch:after { top: .5em; }
	#agendafilter { margin: 1em 0 -.75em; padding: .35em 0 0; }
}

@media only screen and (min-width: 641px) {
	article.eventserie .header > div { display: flex; flex-direction: row; width: 100%; }
	article.eventserie .header h2 { width: 11em; }
	article.eventserie .header h2 + div { width: calc(100% - 17em); }
	article.eventserie .header .download { text-align: right; width: 6em; }
}

@media only screen and (max-width: 480px) {
	.eventlist.eventdetails .imagewrapper .imageslider, .eventlist.eventdetails .imagewrapper figure { height: 12em; max-height: 12em; }
}

@media only screen and (max-width: 400px) {
	div.logowrapper > div { width: 50%; }
}