/****************************************************/ /* 1. CSS-Modul: COLORS */ /****************************************************/ .neutralColorTrans {background-color: transparent;} .neutralColorWhite {background-color: rgb(255,253,249);} .neutralColorBlack {background-color: rgb(0,0,0);} .neutralColorStrong {background-color: rgb(17,17,17);} .neutralColorMedium {background-color: rgb(221,221,221);} .neutralColorLight {background-color: rgb(249,249,249);} .teaserColor {background-color: rgb(252,194,79);} /* -- Accent -- */ .secondColorStrong {background-color: rgb(76,73,71);} /* -- HG Dark -- */ .secondColorMedium {background-color: rgb(224,224,224);} /* -- HG Medium -- */ .secondColorLight {background-color: rgb(240,240,240);} /* -- HG Light -- */ .primColorStrong {background-color: rgb(51,51,51);} /* -- Text Headline -- */ .primColorMedium {background-color: rgb(76,73,71);} /* -- Text Primary -- */ .primColorLight {background-color: rgb(102,102,102);} /* -- Text Secondary -- */ /****************************************************/ /* 2. CSS-Modul: LAYOUT (PAGE REGIONS) */ /****************************************************/ @font-face { font-family: 'Visby'; src: url('../fontsLocal/visby-cf.eot'); src: url('../fontsLocal/visby-cf.eot?#iefix') format('embedded-opentype'), url('../fontsLocal/visby-cf.woff2') format('woff2'), url('../fontsLocal/visby-cf.woff') format('woff'), url('../fontsLocal/visby-cf.ttf') format('truetype'), url('../fontsLocal/visby-cf.svg#Visby') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Visby Bold'; src: url('../fontsLocal/visby-cf-bold.eot'); src: url('../fontsLocal/visby-cf-bold.eot?#iefix') format('embedded-opentype'), url('../fontsLocal/visby-cf-bold.woff2') format('woff2'), url('../fontsLocal/visby-cf-bold.woff') format('woff'), url('../fontsLocal/visby-cf-bold.ttf') format('truetype'), url('../fontsLocal/visby-cf-bold.svg#Visby Bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Visby Heavy'; src: url('../fontsLocal/visby-cf-heavy.eot'); src: url('../fontsLocal/visby-cf-heavy.eot?#iefix') format('embedded-opentype'), url('../fontsLocal/visby-cf-heavy.woff2') format('woff2'), url('../fontsLocal/visby-cf-heavy.woff') format('woff'), url('../fontsLocal/visby-cf-heavy.ttf') format('truetype'), url('../fontsLocal/visby-cf-heavy.svg#Visby Hold') format('svg'); font-weight: normal; font-style: normal; } /* -- BODY ----------------------------------------------*/ * {margin:0; border:0; padding:0;} article,aside,details,figcaption,figure,footer,header,menu,nav,section {display:block;} html { height: 100%; } body { display: flex; flex-direction: column; width: 100%; height: 100%; font-size: 1em; font-family: Visby,Helvetica,Arial,sans-serif; color: rgb(76,73,71); background: rgb(255,253,249); font-weight: 300; line-height: 1.375; } body.hidden, body.showForm { overflow: hidden; } /* -- GENERAL CLASSES -----------------------------------*/ .general-width { position: relative; width: 92%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; } /* -- MIDDLE --------------------------------------------*/ .middle { position: relative; flex: 1 0 auto; clear: both; margin: 0; overflow-x: hidden; } /* --- 1 column full (col1Full) --- */ .middle.layout3 { } .page { position: relative; background: rgb(255,253,249); } body[data-header-gap="2"] .page:first-child { padding-top: 65px; } body[data-header-desktop="3"][data-header-gap="2"] .page:first-child { padding-top: 90px; } /* --- 1 column full (col1Full) --- */ .layout3 .page > .container { width: 100%; max-width: 100%; } .page:first-child > .container:only-child { padding-top: 65px; } body[data-header-desktop="3"] .page:first-child > .container:only-child { padding-top: 90px; } body[data-header-gap="2"] .page:first-child > .container:only-child, body[data-header-desktop="3"][data-header-gap="2"] .page:first-child > .container:only-child { padding-top: 0; } .content { position: relative; float: left; width: 100%; min-height: 100px; padding: 0; box-sizing: border-box; z-index: 1; } /* --- content L | sidebar R (col2Left) --- */ .layout0 .content { width: 75.4%; padding-right: 0.8%; } /* --- sidebar L | content R (col2Right) --- */ .layout1 .content { float: right; width: 75.4%; padding-left: 0.8%; } /* --- 1 column (col1) --- */ .layout2 .content { width: 100%; } /* --- 1 column full (col1Full) --- */ .layout3 .content { width: 100%; } .right { position: relative; float: left; width: 24.6%; margin: 0 0 50px; padding-left: 0.8%; box-sizing: border-box; } /* --- 1 column (col1) --- */ .layout2 .right { width: 100%; padding: 0; } /* --- 1 column full (col1Full) --- */ .layout3 .right { width: 100%; padding: 0; } .right:empty { display: none; } .hero { position: relative; max-width: 1920px; height: 400px; margin: 0 auto; background: rgb(240,240,240); overflow: hidden; } .hero .hero-background { position: absolute; top: 0; right: auto; left: 0%; width: 100%; height: 100%; background-position: center; background-size: cover, cover; background-repeat: no-repeat; overflow: hidden; z-index: 1; } .hero .hero-background[data-orientation="0"] { background-position: center; } .hero .hero-background[data-orientation="1"] { background-position: left top; } .hero .hero-background[data-orientation="2"] { background-position: center top; } .hero .hero-background[data-orientation="3"] { background-position: right top; } .hero .hero-background[data-orientation="4"] { background-position: right center; } .hero .hero-background[data-orientation="5"] { background-position: right bottom; } .hero .hero-background[data-orientation="6"] { background-position: center bottom; } .hero .hero-background[data-orientation="7"] { background-position: left bottom; } .hero .hero-background[data-orientation="8"] { background-position: left center; } .hero img { display: none; } /* -- TOP -----------------------------------------------*/ .top-header { position: fixed; flex-shrink: 0; top: 0; right: 0; left: 0; background: rgb(255,253,249); border-bottom: 1px solid rgba(76,73,71,0.1); clear: both; z-index: 10; -webkit-transition: all 0.3s; transition: all 0.3s; } body[data-header-gap="2"] .top-header { background: rgb(252,194,79); } /* relative */ body[data-header-desktop="2"] .top-header { position: relative; } body[data-header-desktop="3"] .top-header.scroll-shrink { background: rgb(255,253,249); border-bottom: 1px solid rgba(76,73,71,0.1); } /* relative, show on scroll to page top */ body[data-header-desktop="4"] .top-header { position: absolute; } body[data-header-desktop="4"] .top-header.scroll-down { top: -100%; } .csstransforms body[data-header-desktop="4"] .top-header.scroll-down { top: 0; -webkit-transform: translate(0, -200%); transform: translate(0, -200%); } body[data-header-desktop="4"] .top-header.scroll-up { top: 0; } .csstransforms body[data-header-desktop="4"] .top-header.scroll-up { -webkit-transform: translate(0, 0); transform: translate(0, 0); } header { display: flex; align-content: center; align-items: center; justify-content: space-between; text-align: right; -webkit-transition: all 0.3s; transition: all 0.3s; } /* fixed, shrink on scroll */ body[data-header-desktop="3"] .top-header header { height: 105px; } body[data-header-desktop="3"] .top-header.scroll-shrink header { height: 65px; } .no-csstransitions header:before { content: ""; display: inline-block; width: 1px; height: 100%; margin: 0 0 0 -1px; vertical-align: middle; } .logo { position: relative; } .no-csstransitions .logo { float: left; } .logo a { position: relative; display: block; width: auto; height: 65px; padding: 10px 0; box-sizing: border-box; } body[data-header-desktop="3"] .top-header header .logo a { height: 90px; } body[data-header-desktop="3"] .top-header.scroll-shrink header .logo a { height: 65px; } .no-touch .logo a:hover, .no-touch .logo a:active { color: rgb(51,51,51); } .logo a:before { content: ""; display: inline-block; width: 1px; height: 100%; margin: 0 0 0 -1px; vertical-align: middle; } .logo a img { display: inline-block; width: auto; max-width: 250px; height: auto; max-height: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: middle; } body[data-header-desktop="3"] .top-header.scroll-shrink .logo img { max-width: 162px; } /* --- Slide Navigation button --- */ .sTrigger { position: relative; display: none; width: 24px; height: 55px; padding: 0 0 0 15px; cursor: pointer; vertical-align: middle; } /* --- hamburger --- */ .sTrigger span { position: absolute; display: block; top: 50%; right: 0; width: 24px; height: 2px; border-radius: 1px; background: rgb(76,73,71); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: all 0.2s 0.1s; transition: all 0.2s 0.1s; } .sTrigger.open span { background: transparent; -webkit-transition: all 0.1s; transition: all 0.1s; } .sTrigger span:before, .sTrigger span:after { content: ""; position: absolute; display: block; right: 0; width: 100%; height: 2px; border-radius: 1px; background: rgb(76,73,71); -webkit-transition: all 0.3s; transition: all 0.3s; } /* --- top bun --- */ .sTrigger span:before { top: -6px; -webkit-transform-origin: right top; } .sTrigger.open-right.open span:before { -webkit-transform: rotate(-45deg) translate(0, -3px); transform: rotate(-45deg) translate(0, -3px); transform-origin: right top; } .sTrigger.open-left.open span:before { -webkit-transform: rotate(45deg) translate(0, -3px); transform: rotate(45deg) translate(0, -3px); transform-origin: left top; } /* --- bottom bun --- */ .sTrigger span:after { top: 6px; -webkit-transform-origin: right bottom; } .sTrigger.open-right.open span:after { -webkit-transform: rotate(45deg) translate(0, 3px); transform: rotate(45deg) translate(0, 3px); transform-origin: right bottom; } .sTrigger.open-left.open span:after { -webkit-transform: rotate(-45deg) translate(0, 3px); transform: rotate(-45deg) translate(0, 3px); transform-origin: left bottom; } /* -- BOTTOM --------------------------------------------*/ #bottom { position: relative; display: block; flex-shrink: 0; width: 100%; clear: both; background-image: url(footer-blue.jpeg); background-size: cover; color: rgb(255,253,249); text-transform: lowercase; background-color: rgb(224,224,224); text-align: center; } footer { padding: 2em 0; } footer a { color: rgb(255,253,249); } .no-touch footer a:hover, .no-touch footer a:active { color: rgb(246,129,68); } footer section, footer nav { margin: 2em 0; } footer section > a, footer nav > a, footer section > span, footer nav > span { display: inline-block; padding: 0.5rem 1rem; vertical-align: middle; } .social a { font-size: 1.7em; } .copyright { font-size: 0.85em; } footer .togis { padding: 0.5rem 0; font-size: 0.6em; } /* --- PARTNER --- */ .partner { display: inline-flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; margin-bottom: 0; } .partner a { padding: 1rem; opacity: 0.75; } .no-touch .partner a:hover, .no-touch .partner a:active { opacity: 1; } .partner img { display: block; width: auto; max-width: 150px; height: auto; max-height: 75px; -webkit-transition: all 0.3s; transition: all 0.3s; } /****************************************************/ /* 3. CSS-Modul: LAYOUT (PAGE ELEMENTS) */ /****************************************************/ /* -- FORM -----------------------------------------*/ /* -- STANDARDS -----------------------------------------*/ form input, form select, form textarea { position: relative; max-width: 100%; margin: 0; border: 1px solid rgb(76,73,71); border-radius: 2px; padding: 0.5em; box-sizing: border-box; font-size: 1em; font-family: Visby,Helvetica,Arial,sans-serif; color: rgb(76,73,71); background: rgb(255,253,249); font-weight: 300; line-height: 1.375; } form input[type=radio], form input[type=checkbox] { width: 16px; height: 16px; margin: 2px 5px; border: 0; padding: 0; background: transparent; } button { font-size: 1em; font-family: Visby,Helvetica,Arial,sans-serif; color: rgb(76,73,71); background: rgb(255,253,249); font-weight: 300; line-height: 1.375; } /* --- STANDARDS - VALIDATION --- */ .conForm .errors { display: none; margin: 0 0 2em; padding: 2em; background: rgb(76,73,71); color: rgb(255,253,249); box-sizing: border-box; } .contentBar .conForm .errors { background: rgb(240,240,240); background: rgba(255,253,249,0.3); } .conForm .errors.show { display: block; } form .required input, form .required select, form .required textarea { border-color: rgb(246,129,68); } form .invalid input:invalid, form .invalid select:invalid, form .invalid textarea:invalid, form .invalid input.js-check-number { border-color: rgb(246,129,68); background: rgb(224,224,224); } form .invalid input.radio, form .invalid input.checkbox { border: 2px solid rgb(246,129,68); outline: 2px solid rgb(246,129,68); } form .invalid input + label { color: rgb(51,51,51); } /* --- CONTAINERS --- */ .conForm { position: relative; } .form-modal .conForm { padding: 3em 0 0; } .conForm.narrow { display: inline-block; width: 49.1817%; } .col-layout .conForm.narrow, .contentBar .content-wrapper.position1 .conForm.narrow, .contentBar .content-wrapper.position2 .conForm.narrow, .contentBar .content-wrapper.position3 .conForm.narrow, .contentBar .content-wrapper.position5 .conForm.narrow, .contentBar .content-wrapper.position6 .conForm.narrow, .contentBar .content-wrapper.position8 .conForm.narrow, .contentBar .content-wrapper.position9 .conForm.narrow { width: 100%; } .conForm.newsletter-signup { max-width: 600px; margin: 2rem 0; } .contentBar .bar-content.justify2 .conForm.newsletter-signup { margin: 2rem auto; } .conForm.narrow.newsletter-signup { display: block; width: auto; } .conForm.newsletter-signup form { display: flex; align-items: center; align-content: center; justify-content: center; } /* --- MODAL --- */ .form-modal { position: fixed; display: none; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: -1; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-backface-visibility: hidden; } .form-modal.showForm { display:block; opacity: 1; z-index: 15; } .form-modal .modal-holder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(255,253,249); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* --- SECTIONS --- */ .conForm.narrow section, .form-modal .conForm.narrow section { width: 100%; } .conForm.narrow.newsletter-signup section { width: auto; } .conForm .formSend { text-align: right; } .conForm.newsletter-signup .formName { flex-grow: 1; } .conForm.newsletter-signup .formSend { flex-shrink: 0; margin-left: 1rem; } /* --- WRAPPERS --- */ .conForm div { position: relative; display: inline-block; width: 100%; padding: 0 0 1em; vertical-align: top; } .conForm.newsletter-signup div:not(.errors) { padding: 0; } .conForm .double1 { width: 30.4125%; padding: 0; } .form-modal .conForm .double1 { width: 31.1664%; margin-right: 3.2501%; } .conForm .double2 { width: 65.2074%; padding: 0; } .form-modal .conForm .double2 { width: 65.5839%; } .conform .double1 + .double2, .conform .double2 + .double1 { margin-left: 4.3822%; } /* --- STANDARDS --- */ .conForm h4 { margin: 0 0 1rem; } .conForm p { clear: both; } /* --- LABELS --- */ .conForm label { position: relative; display: none; padding: 0 0 2px 4px; } .conForm label.beside { display: inline-block; margin-right: 1rem; vertical-align: middle; } .conForm label.radio, .conForm .wide label.radio { display: inline-block; width: auto; margin: 0; padding: 0 1em 0 0; vertical-align: middle; } .conForm label.checkbox { display: inline; } .conForm .wide label.radio { padding: 0; } .conForm label.long, .conForm .wide label.long { display: inline-block; width: 75%; width: calc(100% - 30px); padding: 0; vertical-align: top; } /* --- INPUTS --- */ .conForm input { position: relative; display: inline-block; width: 100%; margin: 0; z-index: 0; vertical-align: middle; } .conForm input.short { width: 30%; } .conForm input.medium { width: 40%; margin: 0 3%; } .conForm input.radio, .conForm .required input.radio { margin-left: 0; } .conForm .btn { width: auto; margin: 0; padding-top: 0.6rem; padding-bottom: 0.6rem; white-space: normal; } /* --- SELECT --- */ .conForm select { position: relative; display: inline-block; width: 100%; cursor: pointer; vertical-align: top; } .conForm select.short { width: 60px; } .conForm select.short-80 { width: 80px; } .conForm option { color: rgb(76,73,71); } .conForm option.hide { display: none; } /* --- TEXTAREA --- */ .conForm textarea { width: 100%; height: 300px; } /* -- SEARCH ---------------------------------------*/ /* -- (Input) -- */ .search { float:right; width:225px; height:22px; margin:0 3px 0 0; border:1px solid rgb(17,17,17); border-radius:6px; background: rgb(255,253,249); } .searchLabel, .searchLabel, .searchElement, .searchText { font-size:0.85em; } .search input#raw { float:left; width:183px; height:15px; margin:0; border:0; border-radius:0; padding:4px 5px 3px 9px; background:transparent; box-shadow:none; color: rgb(102,102,102); font-size:0.9em; } .search input.submit { float:right; width:35px; height:35px; margin:-7px -7px 0 0; border:0; padding:0; background:transparent; box-shadow:none; font-size:0px; line-height:1px; color: rgb(221,221,221); cursor:pointer; } .search input.submit:hover { background-position:-50px -130px; } /* -- (Results) -- */ div.navTop { border-bottom:1px solid rgb(76,73,71); } div.navBtm { margin-top:10px; border-top:1px solid rgb(76,73,71); } div.navTop a, div.navBtm a { padding:0 5px; } /****************************************************/ /* 4. CSS-Modul: NAVIGATION */ /****************************************************/ /* -- CHANNEL MENU ---------------------------------*/ .menu { position: relative; display: inline-block; vertical-align: middle; } .menu ul { display: inline-flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; overflow: inherit; overflow: initial; vertical-align: middle; } .menu li { position: relative; display: inline-block; margin: 0; padding: 0; vertical-align: top; } .menu li a { position: relative; display: block; padding: 15px 15px 13px; font-family: Visby Bold,Helvetica,Verdana,Arial,sans-serif; color: rgb(51,51,51); text-transform: lowercase; text-decoration: none; } .menu li span { display: block; border-bottom: 2px solid transparent; -webkit-transition: all 0.3s; transition: all 0.3s; } .no-touch .menu ul li a:hover, .no-touch .menu ul li a:active { color: rgb(51,51,51); } .no-touch .menu ul li a:hover span, .no-touch .menu ul li a:active span, .menu ul li.active a span { border-color: rgb(51,51,51); } /* --- DROP DOWN - SECOND LEVEL --- */ .menu ul ul { position: absolute; display: block; top: 100%; left: 0; width: 230px; background: rgb(255,253,249); background: rgba(255,253,249, 0.95); box-shadow: 0 3px 3px rgba(0,0,0, 0.2); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: left; } .menu ul li:hover ul { opacity: 1; z-index: 1; visibility: visible; } .menu ul .edge ul { right: 0; left: auto; } .menu li li { display: block; } .menu li li a { border-bottom: 1px solid rgba(0,0,0, 0.05); padding: 10px 20px; font-size: 1em; } .no-touch .menu li li a:hover, .no-touch .menu li li a:active { background-color: rgba(76,73,71, 0.05); color: rgb(76,73,71); } .menu li.active li a { color: rgb(76,73,71); } .no-touch .menu li.active li a:hover, .no-touch .menu li.active li a:active { background-color: rgba(76,73,71, 0.1); color: rgb(76,73,71); } .menu li.active li.active > a { background-color: rgba(76,73,71, 0.2); color: rgb(76,73,71); } .menu li li span { border: 0; } .no-touch .menu ul li li a:hover span, .no-touch .menu ul li li a:active span, .menu ul li.active li a span, .menu ul li li.active a span { border: 0; } /* --- THIRD LEVEL --- */ .menu ul li:hover ul ul { opacity: 0; z-index: -1; visibility: hidden; } .menu ul ul ul { top: 0; left: 100%; width: 230px; opacity: 0; visibility: hidden; } .menu ul .edge ul ul, .menu ul ul .edge ul { right: 100%; left: auto; } .menu ul ul li:hover > ul { opacity: 1; z-index: 1; visibility: visible; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } /* -- MACRONAVIGATION ------------------------------*/ .macronav { display: block; margin: 3em 0; overflow: hidden; } .macronav ul { list-style-type: none; margin: 0; padding: 0; background-color: rgb(240,240,240); background-color: rgba(76,73,71,0.1); } .macronav ul li { display: block; margin: 0; padding: 0; } .macronav ul li a { display: block; } .macronav ul li a span { display: block; border-top: 1px solid rgb(224,224,224); border-top: 1px solid rgba(76,73,71,0.25); padding: 1rem; color: rgb(76,73,71); text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .macronav ul li:first-child a span { border-top: 0; } .no-touch .macronav ul li a:hover span, .no-touch .macronav ul li a:active span { background-color: rgb(224,224,224); background-color: rgba(76,73,71,0.1); text-decoration: none; } .macronav ul li a.active span { color: rgb(51,51,51); } .macronav ul li a.current span, .no-touch .macronav ul li a.current:hover span, .no-touch .macronav ul li a.current:active span { color: rgb(255,253,249); background-color: rgb(252,194,79); cursor: default; } /* -- level 2 -- */ .macronav ul ul { background-color: rgba(76,73,71,0.05); } .macronav ul li.active > ul { border-top: 1px solid rgb(224,224,224); border-top: 1px solid rgba(76,73,71,0.25); } .macronav ul li li a span { margin: 2px 0; border-top: 0; padding: 0.5rem 1rem 0.5rem 2rem; font-size: 0.9em; } .macronav ul li li:first-child a span { margin-top: 0; } .macronav ul li li:last-child a span { margin-bottom: 0; } /* -- level 3 -- */ .macronav ul li li ul { border-top: 0; } .macronav ul li li li a span { margin: 0; padding: 0.25rem 1rem 0.25rem 3rem; } /* -- level 4 -- */ .macronav ul li li li li a span { padding-left: 4rem; } /* --- TRANSLATE --- */ .translate { position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; vertical-align: middle; } .translate div { display: inline-block; } header .translate div + div { margin-left: 4px; } .translate div a, .translate div > span { display: block; border-bottom: 0; font-size: 0.85em; line-height: 1em; text-transform: uppercase; color: rgb(76,73,71); } .translate div:not(:first-child) a:before, .translate div:not(:first-child) > span:before { content: "|"; display: inline-block; margin: 0 4px 0 2px; } .translate div a span, .translate div > span span { color: rgb(76,73,71); } .no-touch .translate a:active span, .no-touch .translate a:hover span { color: rgb(51,51,51); } .translate > .active a span { color: rgb(51,51,51); border-bottom: 1px solid rgb(51,51,51); } .translate > .inactive span span { opacity: 0.5; } #bodyMask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(76,73,71,0.8); z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s, z-index 0.3s; transition: opacity 0.3s, z-index 0.3s; cursor: pointer; } #bodyMask.open { opacity: 1; z-index: 7; visibility: visible; } .showForm #bodyMask.open { z-index: 20; } .no-opacity #bodyMask.open { visibility: visible; } #sNav { display: block; position: fixed; top: 0; bottom: 0; right: -310px; width: 300px; z-index: 9; -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } #sNav.open-right { right: -310px; } #sNav.open-left { left: -310px; } .csstransforms #sNav.open-right { right: 0; -webkit-transform: translate(110%, 0); transform: translate(110%, 0); } .csstransforms #sNav.open-left { left: 0; -webkit-transform: translate(-110%, 0); transform: translate(-110%, 0); } #sNav.open-right.open { right: 0; } #sNav.open-left.open { left: 0; } .csstransforms #sNav.open-right.open { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .csstransforms #sNav.open-left.open { -webkit-transform: translate(0, 0); transform: translate(0, 0); } #sNav .nav-holder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(255,253,249); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* --- ITEMS --- */ #sNav .nav-holder > *:first-child { margin-top: 55px; } #sNav .nav-holder > *:last-child { margin-bottom: 40px; border-bottom: 1px solid rgba(76,73,71,0.25); } /* --- MACRONAV --- */ #sNav .macronav { margin: 0; } #sNav .inactive > ul { display: none; } #sNav .macronav ul { padding: 0; background: transparent; } #sNav .macronav ul li { position: relative; border-top: 1px solid rgba(76,73,71,0.25); } #sNav .macronav a { text-transform: lowercase; } #sNav li .submenu { position: absolute; top: 1rem; right: 0; width: 45px; padding: 0; text-align: center; color: rgb(76,73,71); } #sNav li .submenu:before { content: "\f107"; display: block; font-family: FontAwesome; font-size: 1.2em; line-height: 1.1; } #sNav li.open > .submenu:before { content: "\f106"; } #sNav li.js-toggle > a { margin-right: 45px; } #sNav .macronav ul li a span { border: 0; } #sNav .macronav ul li a.current { background: rgb(252,194,79); } #sNav .macronav ul li a.current span { font-weight: normal; color: rgb(255,253,249); } /* -- level 2 -- */ #sNav .macronav ul ul { border: 0; background-color: rgba(76,73,71,0.05); } #sNav .macronav ul li li a span { margin: 0; padding: 1rem 1rem 1rem 2rem; } /* -- level 3 -- */ #sNav .macronav ul li li li a span { padding: 0.5rem 1rem 0.5rem 3rem; } /* --- SECOND PAGES --- */ #sNav .macronav .second-pages { border-top: 1px solid rgba(76,73,71,0.25); padding: 1rem 0; } #sNav .macronav .second-pages li { border: 0; } #sNav .macronav .second-pages li a span { padding: 0.5rem 1rem; font-size: 0.85em; line-height: 1.25; } /* --- TRANSLATE --- */ #sNav .translate { display: block; border-top: 1px solid rgba(76,73,71,0.25); } #sNav .translate div a, #sNav .translate div > span { border-right: 1px solid rgba(76,73,71,0.25); padding: 15px; box-sizing: border-box; font-size: 1em; text-align: center; } #sNav .translate > .active a { background: rgba(76,73,71,0.1); } #sNav .translate div:not(:first-child) a:before, #sNav .translate div:not(:first-child) > span:before { display: none; } #sNav .translate > .active a span { border-bottom: 0; } #sNav .translate > .inactive span span { opacity: 0.5; } /* --- SOCIAL --- */ #sNav .social { border-top: 1px solid rgba(76,73,71,0.25); padding: 0; } #sNav .social a { display: inline-block; width: 20%; margin: 0; border-right: 1px solid rgba(76,73,71,0.25); padding: 5px 0; box-sizing: border-box; text-align: center; } #sNav .social a:last-child { border-right: 0; } /****************************************************/ /* 5. CSS-Modul: TEXT */ /****************************************************/ /* -- STANDARD -------------------------------------*/ .accent-color { color: rgb(252,194,79); } h1.nocaps, h2.nocaps, h3.nocaps, h4.nocaps { text-transform: none; } .hgroup { margin: 2rem 0; } .hero + .container .hgroup { margin: 0 0 1rem; position: absolute; bottom: 100%; } h1, h2, h3, h4, h5 { color: rgb(76,73,71); text-transform: lowercase; font-weight: 800; margin: 2rem 0 1rem; line-height: 1.25; } h1 { font-size: 3.6em; font-family: Visby Heavy,Helvetica,Verdana,Arial,sans-serif; } .hgroup h1 { margin: 0; } .hero + .container .hgroup h1 { color: rgb(255,253,249); } h2 { font-size: 1.6em; font-size: 2.8em; font-family: Visby Heavy,Helvetica,Verdana,Arial,sans-serif; } .hgroup h2 { font-size: 1.2em; font-size: 1.2em; font-family: Visby,Helvetica,Verdana,Arial,sans-serif; margin: 0; font-weight: 300; } .hero + .container .hgroup h2 { color: rgb(255,253,249); } h3 { font-size: 1.4em; font-size: 2em; font-family: Visby Bold,Helvetica,Verdana,Arial,sans-serif; } h4 { font-size: 1.2em; font-size: 1.8em; } p { margin: 1rem 0; } ul { list-style: disc; margin: 1em 0; padding: 0 0 0 5.6725%; overflow: hidden; } .layout2 .content > ul { padding: 0 0 0 4.233%; } ol { list-style: decimal; margin: 1em 0; padding: 0 0 0 5.6725%; overflow: hidden; } .layout2 .content > ol { padding: 0 0 0 4.233%; } .contentBar .bar-content > ul:not(.js-toggle-container), .contentBar .bar-content > ol { padding: 0 0 0 9.4144%; } li { padding: 2px 0; } ul.list-plus { list-style: none; } ul.list-plus li { position: relative; } ul.list-plus li:before { content: "\f067"; position: absolute; top: 5px; left: -1.618em; font-family: FontAwesome; font-size: 0.9em; } .contentBar .bar-content.justify1 > ul.list-plus li:before, .contentBar .bar-content.justify2 > ul.list-plus li:before { position: relative; top: auto; left: auto; padding: 0 0.5rem 0 0; } ul.list-check { list-style: none; } ul.list-check li { position: relative; } ul.list-check li:before { content: "\f00c"; position: absolute; top: 5px; left: -1.618em; font-family: FontAwesome; font-size: 0.9em; } .contentBar .bar-content.justify1 > ul.list-check li:before, .contentBar .bar-content.justify2 > ul.list-check li:before { position: relative; top: auto; left: auto; padding: 0 0.5rem 0 0; } a { color: rgb(51,51,51); text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .content h2 a, .content h3 a, .content h4 a, .content p a, .content li a, .content blockquote a { border-bottom: 1px solid currentColor; } .no-touch a:hover, .no-touch a:active { color: rgb(76,73,71); text-decoration: none; } .no-touch .content h2 a:hover, .no-touch .content h2 a:active, .no-touch .content h3 a:hover, .no-touch .content h3 a:active, .no-touch .content h4 a:hover, .no-touch .content h4 a:active, .no-touch .content p a:hover, .no-touch .content p a:active, .no-touch .content li a:hover, .no-touch .content li a:active, .no-touch .content blockquote a:hover, .no-touch .content blockquote a:active { background: rgba(76,73,71,0.1); } a span { cursor: pointer; } a img { border: none; } hr { margin: 2em 0; height: 1px; background: rgb(76,73,71); } /* -- ZMS FORMAT (Text Formats) --------------------*/ strong, b { font-family:Visby Bold,Helvetica,Verdana,Arial,sans-serif; font-weight: normal; } i, em { font-style: italic; } small, .small { font-size: 0.85em; } p.big { margin: 4rem 0; font-size: 2rem; } p.caption { font-size: 0.85em; color: rgb(102,102,102); } p.emphasis { position: relative; display: block; margin: 2rem 5.6725%; padding: 2rem; background-color: rgb(221,221,221); background-color: rgba(17,17,17,0.1); color: rgb(51,51,51); } .layout2 p.emphasis { margin: 2rem 4.233%; } p.description { color: rgb(102,102,102); } blockquote { margin: 2rem 5.6725% 2rem 4.6008%; margin: 2rem 5.6725% 2rem calc(4.6008% - 2px); border-left: 2px solid rgb(224,224,224); border-left: 2px solid rgba(76,73,71,0.2); padding: 0 0 0 1.0716%; } .layout2 blockquote { margin: 2rem 4.233% 2rem 3.433%; margin: 2rem 4.233% 2rem calc(3.433% - 2px); padding: 0 0 0 0.8%; } p.initial:first-letter { float: left; margin: 7px 10px 10px 0; font-size: 3em; line-height: 1; text-transform: uppercase; } p.pullleft { float: left; width: 31.8731%; margin: 0 2.1433% 1em 0; color: rgb(51,51,51); } p.pullright { float: right; width: 31.8731%; margin: 0 0 1em 2.1433%; color: rgb(51,51,51); } .content > *:first-child:not(.contentBar) { margin-top: 3rem; } .content > .ZMSGraphic:first-child + * { margin-top: 0; } .content > *:last-child:not(.contentBar):not(.ticket-btn) { margin-bottom: 3rem; } .hero + .container .content > .hgroup + *:not(.contentBar) { margin-top: 3rem; } .hero + .container .content > .hgroup + .ZMSGraphic.floatleft + *, .hero + .container .content > .hgroup + .ZMSGraphic.floatright + * { margin-top: 3rem; } /****************************************************/ /* 6. CSS-Modul: ZMS-DEFAULTS */ /****************************************************/ /* -- ZMS GRAPHIC ----------------------------------*/ /* --- CONTAINER --- */ .ZMSGraphic { position: relative; width: 100%; max-width: 100%; margin: 1em 0; background: transparent; box-sizing: border-box; } .ZMSGraphic.none.top, .ZMSGraphic.center { background: transparent; text-align: center; } .ZMSGraphic.imgwidth3 { width: auto; } .ZMSGraphic.floatleft { float: left; margin-top: 0.33em; margin-right: 2.1433%; } .layout2 .ZMSGraphic.floatleft, .layout3 .ZMSGraphic.floatleft { margin-right: 1.6%; } .ZMSGraphic.floatleft.imgwidth0 { width: 31.8731%; } .layout2 .ZMSGraphic.floatleft.imgwidth0, .layout3 .ZMSGraphic.floatleft.imgwidth0 { width: 32.2548%; } .ZMSGraphic.floatleft.imgwidth0 + .ZMSGraphic.floatleft.imgwidth0 + .ZMSGraphic.floatleft.imgwidth0 { margin-right: 0; } .ZMSGraphic.floatleft.imgwidth1 { width: 48.9096%; } .layout2 .ZMSGraphic.floatleft.imgwidth1, .layout3 .ZMSGraphic.floatleft.imgwidth1 { width: 49.1817%; } .ZMSGraphic.floatleft.imgwidth1 + .ZMSGraphic.floatleft.imgwidth1 { margin-right: 0; } .ZMSGraphic.floatleft.imgwidth2 { float: none; width: 100%; margin-right: 0; } .ZMSGraphic.floatright { float: right; margin-top: 0.33em; margin-left: 2.1433%; } .layout2 .ZMSGraphic.floatright, .layout3 .ZMSGraphic.floatright { margin-left: 1.6%; } .ZMSGraphic.floatright.imgwidth0 { width: 31.8731%; } .layout2 .ZMSGraphic.floatright.imgwidth0, .layout3 .ZMSGraphic.floatright.imgwidth0 { width: 32.2548%; } .ZMSGraphic.floatright.imgwidth0 + .ZMSGraphic.floatright.imgwidth0 + .ZMSGraphic.floatright.imgwidth0 { margin-left: 0; } .ZMSGraphic.floatright.imgwidth1 { width: 48.9096%; } .layout2 .ZMSGraphic.floatright.imgwidth1, .layout3 .ZMSGraphic.floatright.imgwidth1 { width: 49.1817%; } .ZMSGraphic.floatright.imgwidth1 + .ZMSGraphic.floatright.imgwidth1 { margin-left: 0; } .ZMSGraphic.floatright.imgwidth2 { float: none; width: 100%; margin-left: 0; } /* --- GRAPHIC --- */ .ZMSGraphic.imgwidth0 .graphic { width: 31.8731%; } .layout2 .ZMSGraphic.imgwidth0 .graphic, .layout3 .ZMSGraphic.imgwidth0 .graphic { width: 32.2548%; } .ZMSGraphic.imgwidth1 .graphic { width: 48.9096%; } .layout2 .ZMSGraphic.imgwidth1 .graphic, .layout3 .ZMSGraphic.imgwidth1 .graphic { width: 49.1817%; } .ZMSGraphic.imgwidth2 .graphic { width: 100%; } .ZMSGraphic.imgwidth3 .graphic { width: auto; } .ZMSGraphic.floatleft.imgwidth0 .graphic, .ZMSGraphic.floatleft.imgwidth1 .graphic, .ZMSGraphic.floatleft.imgwidth2 .graphic, .ZMSGraphic.floatright.imgwidth0 .graphic, .ZMSGraphic.floatright.imgwidth1 .graphic, .ZMSGraphic.floatright.imgwidth2 .graphic, .layout2 .ZMSGraphic.floatleft.imgwidth0 .graphic, .layout2 .ZMSGraphic.floatleft.imgwidth1 .graphic, .layout2 .ZMSGraphic.floatleft.imgwidth2 .graphic, .layout2 .ZMSGraphic.floatright.imgwidth0 .graphic, .layout2 .ZMSGraphic.floatright.imgwidth1 .graphic, .layout2 .ZMSGraphic.floatright.imgwidth2 .graphic, .layout3 .ZMSGraphic.floatleft.imgwidth0 .graphic, .layout3 .ZMSGraphic.floatleft.imgwidth1 .graphic, .layout3 .ZMSGraphic.floatleft.imgwidth2 .graphic, .layout3 .ZMSGraphic.floatright.imgwidth0 .graphic, .layout3 .ZMSGraphic.floatright.imgwidth1 .graphic, .layout3 .ZMSGraphic.floatright.imgwidth2 .graphic { width: 100%; } .ZMSGraphic.left .graphic, .ZMSGraphic.right .graphic { float: left; margin-right: 2.1433%; } .layout2 .ZMSGraphic.left .graphic, .layout2 .ZMSGraphic.right .graphic, .layout3 .ZMSGraphic.left .graphic, .layout3 .ZMSGraphic.right .graphic { margin-right: 1.6%; } .ZMSGraphic.center .graphic { float: none; display: inline-block; margin: 0 auto; } /* --- IMAGE --- */ .ZMSGraphic .graphic img { display: block; width: 100%; max-width: 100%; height: auto; } .ZMSGraphic.imgwidth3 .graphic img { width: auto; } /* --- TEXT --- */ .ZMSGraphic .text { padding: 0.5em 0 0; background: transparent; box-sizing: border-box; } .ZMSGraphic.none.top.imgwidth0 .text, .ZMSGraphic.center.imgwidth0 .text { width: 31.8731%; } .layout2 .ZMSGraphic.none.top.imgwidth0 .text, .layout2 .ZMSGraphic.center.imgwidth0 .text, .layout3 .ZMSGraphic.none.top.imgwidth0 .text, .layout3 .ZMSGraphic.center.imgwidth0 .text { width: 32.2548%; } .ZMSGraphic.none.top.imgwidth1 .text, .ZMSGraphic.center.imgwidth1 .text { width: 48.9096%; } .layout2 .ZMSGraphic.none.top.imgwidth1 .text, .layout2 .ZMSGraphic.center.imgwidth1 .text, .layout3 .ZMSGraphic.none.top.imgwidth1 .text, .layout3 .ZMSGraphic.center.imgwidth1 .text { width: 49.1817%; } .ZMSGraphic.none.top.imgwidth2 .text, .ZMSGraphic.center.imgwidth2 .text { width: 100%; } .ZMSGraphic.center .text { margin: 0 auto; } .ZMSGraphic .text p { margin: 0; } /* --- ZOOM/LINK --- */ .graphic a.zoom, .graphic a.imgUrl { position: relative; display: block; border: 0; cursor: pointer; } .graphic a.zoom .gal-zoom, .graphic a.imgUrl .gal-zoom { opacity: 1; visibility: visible; } .graphic a.zoom .gal-zoom span, .graphic a.imgUrl .gal-zoom span { position: absolute; display: block; top: auto; right: 0; bottom: 0; left: auto; border: 0; padding: 10px; -webkit-transform: none; transform: none; opacity: 0.5; font-size: 2em; cursor: pointer; } .no-touch .graphic a.zoom:hover .gal-zoom span, .no-touch .graphic a.zoom:active .gal-zoom span, .no-touch .graphic a.imgUrl:hover .gal-zoom span, .no-touch .graphic a.imgUrl:active .gal-zoom span { -webkit-transform: none; transform: none; opacity: 1; } /* -- ZMS TEASER -----------------------------------*/ .layout2 #teaser, .layout3 #teaser { width: 101.6%; margin: 0.8% -0.8%; } .ZMSTeaserElement { margin: 1em 0; background-color: rgb(240,240,240); background-color: rgba(76,73,71,0.1); overflow: hidden; } .layout2 .ZMSTeaserElement, .layout3 .ZMSTeaserElement { display: inline-block; width: 31.7471%; margin: 0.7868%; vertical-align: top; } .ZMSTeaserElement .graphic { text-align: center; } .ZMSTeaserElement .graphic img { display: inline-block; width: 100%; max-width: 100%; height: auto; } .ZMSTeaserElement .title { display: block; margin: 1rem; font-size: 1.2em; } .ZMSTeaserElement img.title, .ZMSTeaserElement .graphic .title { padding: 0; } .ZMSTeaserElement .text { display: block; margin: 1rem; } .linkItem { display: block; padding: 5px 0 0; } /* -- ZMS TABLES -----------------------------------*/ .ZMSTable { display: inline-block; max-width: 100%; margin: 2em 0; border-spacing: 0; border-collapse: collapse; padding: 0 0 5px 0; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .ZMSTable th { position: relative; vertical-align: bottom; color: rgb(51,51,51); border-bottom: 1px solid rgb(224,224,224); border-bottom: 1px solid rgba(76,73,71,0.5); padding: 0.5rem 1rem; } .ZMSTable tr th p { margin: 0; color: rgb(51,51,51); font-weight: normal; text-align: left; } .ZMSTable tr td { position: relative; min-width: 200px; border-top: 1px solid rgb(224,224,224); border-top: 1px solid rgba(76,73,71,0.5); padding: 0.5rem 1rem; vertical-align: top; } .ZMSTable tr:first-child td { border-top: 0; } .ZMSTable tr:last-child td { border-bottom: 0; } .ZMSTable tr td p { position: relative; margin: 0; text-align: left; z-index: 1; } .ZMSTable caption { position: relative; margin: 0; border-top: 1px solid rgb(224,224,224); border-top: 1px solid rgba(76,73,71,0.5); padding: 0.5rem 1rem; background-color: transparent; font-size: 0.85em; color: rgb(102,102,102); text-align: left; } /* -- ZMS FILE / ZMS LINK --------------------------*/ .ZMSLinkElement { margin: 1em 0; } .ZMSFile { background-color: transparent; margin: 1em 0; padding: 0; } .ZMSFile.file-img { } .ZMSFile.none, .ZMSLinkElement.none { background-color: transparent; border: 2px dashed rgb(224,224,224); } .ZMSFile.floatleft, .ZMSLinkElement.floatleft { float: left; width: 48.9096%; margin-right: 2.1433%; } .ZMSFile.floatright, .ZMSLinkElement.floatright { float: right; width: 48.9096%; margin-left: 2.1433%; } .ZMSFile.file-img a, .ZMSLinkElement.file-img a { display: block; color: rgb(76,73,71); } .ZMSFile .img, .ZMSLinkElement .img { position: relative; display: block !important; float: left; width: 14.8743%; margin: 0 2.1433% 0 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .ZMSFile .img img, .ZMSLinkElement .img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .no-touch .ZMSFile a:hover .img img, .no-touch .ZMSFile a:active .img img, .no-touch .ZMSLinkElement a:hover .img img, .no-touch .ZMSLinkElement a:active .img img { opacity: 0.5; } .ZMSFile .img > span, .ZMSLinkElement .img > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.6em; opacity: 0.7; } .no-touch .ZMSFile a:hover .img > span, .no-touch .ZMSFile a:active .img > span, .no-touch .ZMSLinkElement a:hover .img > span, .no-touch .ZMSLinkElement a:active .img > span { color: rgb(51,51,51); opacity: 1; } .ZMSFile.file-img .text, .ZMSLinkElement.file-img .text { margin: 0 0 0 110px; } .ZMSFile .title i, .ZMSLinkElement .title i, .ZMSLinkElement .title img { display: inline-block; vertical-align: middle; } .ZMSFile.file-img .text i, .ZMSLinkElement.file-img .text i { font-size: 0.95em; } .ZMSFile .title a, .ZMSLinkElement .title a { padding-left: 5px; vertical-align: middle; text-decoration: none; } .ZMSFile .title span, .ZMSLinkElement .title span, .ZMSFile .text span, .ZMSLinkElement .text span { display: inline-block; padding-left: 5px; vertical-align: middle; } .ZMSLinkElement .text { margin: 0 0 0 25px; } .ZMSFile .description, .ZMSLinkElement .description { margin: 0 0 0 25px; font-size: 0.85em; } .ZMSFile.file-img .description, .ZMSLinkElement.file-img .description { display: block; margin: 0; padding: 5px 0 0; } /*-- FLOATING ---------------*/ .clearing:after { content: ""; position: relative; display: block; width: 100%; clear: both; } .clearLine { clear: both; width: 100%; height: 1px; margin: 30px 0; padding: 0; background: rgb(76,73,71); font-size: 1px; line-height: 0; } .floatRight { float: right; } .floatLeft { float: left; } img.imgNoborder { border: 0px; } /****************************************************/ /* 7. CSS-Modul: SPECIAL OBJECTS */ /****************************************************/ /* --- PROGRESS BAR --- */ .tix-sold { position: relative; display: block; width: 1em; height: 1em; margin: 1rem 0; border-radius: 50%; background-color: rgb(224,224,224); background-color: rgba(255,253,249,0.75); box-sizing: border-box; z-index: 1; font-size: 5rem; text-align: center; white-space: nowrap; } .contentBar .content-wrapper .bar-content.justify2 .tix-sold { margin-right: auto; margin-left: auto; } .tix-sold span { box-sizing: border-box; } .tix-sold::after { content: " "; position: absolute; display: block; top: 0.08em; left: 0.08em; width: 0.84em; height: 0.84em; border-radius: 50%; background-color: rgba(51,51,51,0.25); } .tix-amt { position: absolute; top: 5px; left: 6px; width: 2em; z-index: 1; font-size: 0.43em; line-height: 2em; color: rgb(51,51,51); text-align: center; } .tix-amt::after { content: "%"; display: inline-block; font-size: 0.5em; vertical-align: super; line-height: 1; } .tix-slice { position: absolute; top: 0; left: 0; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em); } .tix-sold.p55 .tix-slice, .tix-sold.p60 .tix-slice, .tix-sold.p65 .tix-slice, .tix-sold.p70 .tix-slice, .tix-sold.p75 .tix-slice, .tix-sold.p80 .tix-slice, .tix-sold.p85 .tix-slice, .tix-sold.p90 .tix-slice, .tix-sold.p95 .tix-slice, .tix-sold.p100 .tix-slice { clip: rect(auto, auto, auto, auto); } .tix-sold .tix-bar, .tix-sold.p55 .tix-fill, .tix-sold.p60 .tix-fill, .tix-sold.p65 .tix-fill, .tix-sold.p70 .tix-fill, .tix-sold.p75 .tix-fill, .tix-sold.p80 .tix-fill, .tix-sold.p85 .tix-fill, .tix-sold.p90 .tix-fill, .tix-sold.p95 .tix-fill, .tix-sold.p100 .tix-fill { position: absolute; top: 0; left: 0; width: 1em; height: 1em; border-radius: 50%; border: 0.1em solid rgb(76,73,71); clip: rect(0em, 0.5em, 1em, 0em); } .tix-sold.p55 .tix-fill, .tix-sold.p60 .tix-fill, .tix-sold.p65 .tix-fill, .tix-sold.p70 .tix-fill, .tix-sold.p75 .tix-fill, .tix-sold.p80 .tix-fill, .tix-sold.p85 .tix-fill, .tix-sold.p90 .tix-fill, .tix-sold.p95 .tix-fill, .tix-sold.p100 .tix-fill { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .tix-sold.p5 .tix-bar { -webkit-transform: rotate(18deg); transform: rotate(18deg); } .tix-sold.p10 .tix-bar { -webkit-transform: rotate(36deg); transform: rotate(36deg); } .tix-sold.p15 .tix-bar { -webkit-transform: rotate(54deg); transform: rotate(54deg); } .tix-sold.p20 .tix-bar { -webkit-transform: rotate(72deg); transform: rotate(72deg); } .tix-sold.p25 .tix-bar { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .tix-sold.p30 .tix-bar { -webkit-transform: rotate(108deg); transform: rotate(108deg); } .tix-sold.p35 .tix-bar { -webkit-transform: rotate(126deg); transform: rotate(126deg); } .tix-sold.p40 .tix-bar { -webkit-transform: rotate(144deg); transform: rotate(144deg); } .tix-sold.p45 .tix-bar { -webkit-transform: rotate(162deg); transform: rotate(162deg); } .tix-sold.p50 .tix-bar { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .tix-sold.p55 .tix-bar { -webkit-transform: rotate(198deg); transform: rotate(198deg); } .tix-sold.p60 .tix-bar { -webkit-transform: rotate(216deg); transform: rotate(216deg); } .tix-sold.p65 .tix-bar { -webkit-transform: rotate(234deg); transform: rotate(234deg); } .tix-sold.p70 .tix-bar { -webkit-transform: rotate(252deg); transform: rotate(252deg); } .tix-sold.p75 .tix-bar { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .tix-sold.p80 .tix-bar { -webkit-transform: rotate(288deg); transform: rotate(288deg); } .tix-sold.p85 .tix-bar { -webkit-transform: rotate(306deg); transform: rotate(306deg); } .tix-sold.p90 .tix-bar { -webkit-transform: rotate(324deg); transform: rotate(324deg); } .tix-sold.p95 .tix-bar { -webkit-transform: rotate(342deg); transform: rotate(342deg); } .tix-sold.p100 .tix-bar { -webkit-transform: rotate(360deg); transform: rotate(360deg); } /* --- TICKET BUTTON --- */ .ticket-btn { position: relative; left: 0; left: calc(-50vw + 50%); width: 100vw; margin: 2rem 0 0; padding: 2rem 0; background-color: rgb(76,73,71); box-sizing: border-box; color: rgb(255,253,249); text-align: center; } .overlay .ticket-btn { position: fixed; right: 0; bottom: 5vw; left: 0; width: 84vw; max-width: 1920px; margin: 0 auto; padding: 2rem 1rem; z-index: 3; opacity: 1; visibility: visible; -webkit-transition: all 0.5s; transition: all 0.5s; } .overlay .ticket-btn.hide { opacity: 0; visibility: hidden; } .ticket-btn-trigger { display: block; width: 100%; height: 1px; margin-bottom: 6.5rem; } .ticket-btn .btn { margin: 0; } iframe[name='google_conversion_frame'] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px; float: left; } .iframe-tickets { margin: 50px 0 0; } /* --- QUOTE --- */ .quote-item { position: relative; margin: 2em 5.6725%; padding: 35px 0 0 20px; box-sizing: border-box; } .layout2 .quote-item, .layout3 .quote-item { width: 66.1096%; margin: 2em auto; } .column .quote-item, .layout2 .column .quote-item, .layout3 .column .quote-item, .contentBar .position1 .quote-item, .contentBar .position2 .quote-item, .contentBar .position3 .quote-item, .contentBar .position5 .quote-item, .contentBar .position6 .quote-item, .contentBar .position8 .quote-item, .contentBar .position9 .quote-item { width: 100%; margin: 1em 0; } .quote-item:before { content:"\f10d"; position: absolute; top: 0; left: 0; opacity: 0.1; font-family: FontAwesome; font-size: 4em; } .quote-item .q-quote { margin: 0; font-size: 1.4em; color: rgb(51,51,51); } .contentBar .container.color1 .quote-item .q-quote { color: rgb(255,253,249); } .contentBar .container.color2 .quote-item .q-quote { color: rgb(252,194,79); } .quote-item .q-text { margin: 1rem 0 0; font-size: 0.85em; } .quote-item p span { display: block; } .quote-item p .q-author { font-weight: bold; } /* --- CLOSE BUTTON --- */ .labeled-icon { position: absolute; display: block; top: 5%; top: 4vw; right: 2%; right: 4vw; width: 50px; height: 50px; margin: 0; border: 0; border-radius: 50%; padding: 0; background: rgba(0,0,0,0.2); -webkit-transform: translate(50%,-50%); transform: translate(50%,-50%); z-index: 5; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; } .no-touch .labeled-icon:hover, .no-touch .labeled-icon:active { background: rgba(255,253,249,0.6); } .labeled-icon .icon { position: relative; display: block; width: 50%; height: 50%; margin: 25% 0 0 25%; background: transparent url(sprite-icons.png) 3px -75px no-repeat; -webkit-transition: all 0.2s; transition: all 0.2s; } button.labeled-icon .icon { margin-top: 0; } .csstransforms .labeled-icon .icon { background: transparent; } .no-touch .labeled-icon:hover .icon, .no-touch .labeled-icon:active .icon { background: transparent url(sprite-icons.png) 10px 10px no-repeat; } .csstransforms.no-touch .labeled-icon:hover .icon, .csstransforms.no-touch .labeled-icon:active .icon { background: transparent; } .csstransforms .labeled-icon .icon:before, .csstransforms .labeled-icon .icon:after { content: ""; position: absolute; top: 0; left: 45%; width: 3px; height: 100%; background: rgb(255,253,249); backface-visibility: hidden; -webkit-transition: all 0.2s; transition: all 0.2s; } .csstransforms .labeled-icon .icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .csstransforms .labeled-icon .icon:after { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .csstransforms.no-touch .labeled-icon:hover .icon:before, .csstransforms.no-touch .labeled-icon:active .icon:before, .csstransforms.no-touch .labeled-icon:hover .icon:after, .csstransforms.no-touch .labeled-icon:active .icon:after { background: rgb(0,0,0); } .csstransforms .labeled-icon i { display: none; } /* -- BUTTONS --------------------------------------*/ .btn { display: inline-block; margin: 0.5rem 1rem 0.5rem 0; border-radius: 2px; border: 1px solid rgb(76,73,71); padding: 0.5rem 1rem; background-color: rgb(76,73,71); box-sizing: border-box; font-size: 1em; color: rgb(255,253,249); text-align: center; vertical-align: middle; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; text-transform: lowercase; } .contentBar .container .bar-content > .btn:last-child { margin-bottom: 0.5rem; } .contentBar .bar-content.justify2 .btn { margin-right: 0.5rem; margin-left: 0.5rem; } .no-touch .btn:hover, .no-touch .btn:active, .no-touch a:hover .btn { background-color: rgb(255,253,249); color: rgb(51,51,51); text-decoration: none; } .btn:focus { outline: 0; } .btn.active, .btn:active { outline: 0; } .btn.disabled, .btn[disabled] { cursor: default; opacity: 0.65; } .btn-primary.active, .btn-warning.active, .btn-inverse.active { color: rgb(255,253,249); color: rgba(255,253,249, 0.75); } /* --- PRIMARY --- */ .btn-primary { border-color: rgb(252,194,79); background-color: rgb(252,194,79); } .no-touch .btn-primary:hover, .no-touch .btn-primary:active, .no-touch a:hover .btn-primary { background-color: rgb(255,253,249); color: rgb(252,194,79); } .contentBar.back3 .container.color1 .btn-primary, .contentBar .container.back4:not([data-text-style="2"]) .btn-primary { border-color: rgb(255,253,249); background-color: transparent; } .no-touch .contentBar.back3 .container.color1.back0 .btn-primary:hover, .no-touch .contentBar.back3 .container.color1.back0 .btn-primary:active, .no-touch .contentBar.back3 .container.color1.back0 a:hover .btn-primary, .no-touch .contentBar .container.back4:not([data-text-style="2"]) .btn-primary:hover, .no-touch .contentBar .container.back4:not([data-text-style="2"]) .btn-primary:active, .no-touch .contentBar .container.back4:not([data-text-style="2"]) a:hover .btn-primary { background-color: rgb(255,253,249); } /* --- SECONDARY --- */ .btn-secondary { border-color: rgb(224,224,224); background-color: rgb(224,224,224); color: rgb(51,51,51); } .no-touch .btn-secondary:hover, .no-touch .btn-secondary:active, .no-touch a:hover .btn-secondary { background-color: rgb(255,253,249); color: rgb(51,51,51); } .fa-color { color: rgb(252,194,79); } .btn > span, .link-button > span { display: inline-block; vertical-align: middle; } .btn > i, .link-button > i { position: relative; vertical-align: middle; font-size: 1.4rem; } .btn > i + span, .btn > span + i, .link-button > i + span, .link-button > span + i { margin-left: 0.5rem; vertical-align: middle; } .link-button { display: inline-block; margin: 5px 1rem 5px 0; } /* -- CONTENT BAR ----------------------------------*/ .contentBar { position: relative; left: 0; left: calc(-50vw + 50%); width: 100vw; margin: 0; background-color: rgb(255,253,249); box-sizing: border-box; overflow: hidden; } .overlay-holder .contentBar { left: calc(-42vw + 50%); width: 84vw; } .contentBar.no-image { margin: 3rem 0; } .content > .contentBar.no-image:last-child { margin-bottom: 0; } /* --- need margins when other content before or after content bar --- */ *:not(.contentBar):not(.hgroup) + .contentBar { margin-top: 3rem; } .contentBar + *:not(.contentBar):not(.ticket-btn-trigger) { margin-top: 3rem !important; } .layout0 .contentBar { left: 0; left: calc(-50vw + 67%); } .layout1 .contentBar { left: 0; left: calc(-50vw + 33%); } .modal-notice .contentBar { left: auto; width: 100%; margin: 0; padding: 10%; } /* --- content bar height --- */ .contentBar.no-text.height2 { height: 25vh; } .contentBar.no-text.height3 { height: 50vh; } .contentBar.no-text.height4 { height: 75vh; } .contentBar.no-text.height5 { height: 100vh; } /* --- content bar background --- */ .contentBar.back1 { background-color: rgb(240,240,240); } .contentBar.back2 { background-color: rgb(76,73,71); } .contentBar.back3 { background-color: rgb(252,194,79); } .contentBar.back4 { background-color: transparent; } /* --- orange --- */ .contentBar.back5 { background-color: rgb(246,129,68); } /* --- blau --- */ .contentBar.back6 { background-color: rgb(36,42,62); } /* --- grün --- */ .contentBar.back7 { background-color: rgb(69,102,88); } .contentBar .background-image[data-bg-opacity="1"] { opacity:0.75; } .contentBar .background-image[data-bg-opacity="2"] { opacity:0.5; } .contentBar .background-image[data-bg-opacity="3"] { opacity:0.25; } .contentBar .background-image { position: absolute; top: 0; right: 0; left: 0; bottom: 0; max-width: 1920px; margin: 0 auto; } .contentBar.height1 .background-image { position: relative; top: auto; right: auto; left: auto; width: 100%; height: 0; } .contentBar .background-image > div { position: absolute; top: 0; right: 0; left: 0; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; } .no-touch .contentBar .parascrollFull { background-attachment: fixed; } .contentBar .background-image[data-bg-layout="2"] > div { right: auto; width: 50%; } .contentBar .background-image[data-bg-layout="3"] > div { left: auto; width: 50%; } .contentBar .background-image[data-orientation="1"] > div { background-position: left top; } .contentBar .background-image[data-orientation="2"] > div { background-position: center top; } .contentBar .background-image[data-orientation="3"] > div { background-position: right top; } .contentBar .background-image[data-orientation="4"] > div { background-position: right center; } .contentBar .background-image[data-orientation="5"] > div { background-position: right bottom; } .contentBar .background-image[data-orientation="6"] > div { background-position: center bottom; } .contentBar .background-image[data-orientation="7"] > div { background-position: left bottom; } .contentBar .background-image[data-orientation="8"] > div { background-position: left center; } .contentBar .background-image video { position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: transparent; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .contentBar .background-image[data-orientation="1"] video { top: 0; left: 0; -webkit-transform: translate(0,0); transform: translate(0,0); } .contentBar .background-image[data-orientation="2"] video { top: 0; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } .contentBar .background-image[data-orientation="3"] video { top: 0; right: 0; left: auto; -webkit-transform: translate(0,0); transform: translate(0,0); } .contentBar .background-image[data-orientation="4"] video { right: 0; left: auto; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .contentBar .background-image[data-orientation="5"] video { top: auto; right: 0; bottom: 0; left: auto; -webkit-transform: translate(0,0); transform: translate(0,0); } .contentBar .background-image[data-orientation="6"] video { top: auto; bottom: 0; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } .contentBar .background-image[data-orientation="7"] video { top: auto; bottom: 0; left: 0; -webkit-transform: translate(0,0); transform: translate(0,0); } .contentBar .background-image[data-orientation="8"] video { left: 0; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } /* --- OFFSET GRAPHIC --- */ .contentBar .offset-graphic { position: absolute; top: 0; bottom: 0; width: 50%; } .contentBar .offset-graphic[data-gap="1"] { top: 2em; bottom: 2em; } .contentBar .offset-graphic.img-layout0 { right: 50%; } .contentBar .offset-graphic[data-gap="1"].img-layout0 { right: 45%; right: calc(50% + 2em); width: calc(50% - 4em); } .contentBar .offset-graphic.img-layout1 { left: 50%; } .contentBar .offset-graphic[data-gap="1"].img-layout1 { left: 45%; left: calc(50% + 2em); width: calc(50% - 4em); } .offset-graphic img { position: absolute; display: inline-block; width: auto; max-width: 100%; height: auto; max-height: 100%; } .contentBar .offset-graphic[data-orientation="0"] img { top: 0; left: 0; } .contentBar .offset-graphic[data-orientation="1"] img { top: 0; right: 0; } .contentBar .offset-graphic[data-orientation="2"] img { bottom: 0; right: 0; } .contentBar .offset-graphic[data-orientation="3"] img { bottom: 0; left: 0; } .contentBar .offset-graphic[data-orientation="4"] img { top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* --- MAP IN FIRST LEVEL --- */ .contentBar .background-map { position: absolute; top: 0; right: 0; left: 0; height: 100%; } .contentBar.height1 .background-map, .contentBar.height0 .background-map:only-child { position: relative; top: auto; right: auto; left: auto; width: 100%; height: 400px; } .contentBar .background-map[data-bg-layout="2"] { right: auto; width: 50%; } .contentBar .background-map[data-bg-layout="3"] { left: auto; width: 50%; } .contentBar .background-map #map { height: 100%; padding: 0; } .contentBar .content-wrapper { position: relative; display: flex; width: 100%; align-content: center; align-items: center; justify-content: center; z-index: 2; } /* --- mittig (default) --- */ .contentBar .content-wrapper.position, .contentBar .content-wrapper.position0 { align-items: center; } /* --- Oben --- */ .contentBar .content-wrapper.position4, .contentBar .content-wrapper.position5, .contentBar .content-wrapper.position6 { align-items: flex-start; } /* --- Unten --- */ .contentBar .content-wrapper.position7, .contentBar .content-wrapper.position8, .contentBar .content-wrapper.position9 { align-items: flex-end; } .contentBar .content-wrapper:before, .contentBar > .media-gallery:only-child:before { content: ""; float: left; width: 1px; margin-left: -1px; } .contentBar.height2 .content-wrapper:before, .contentBar.height2 > .media-gallery:only-child:before { height: 25vh; } .contentBar.height3 .content-wrapper:before, .contentBar.height3 > .media-gallery:only-child:before { height: 50vh; } .contentBar.height4 .content-wrapper:before, .contentBar.height4 > .media-gallery:only-child:before { height: 75vh; } .contentBar.height5 .content-wrapper:before, .contentBar.height5 > .media-gallery:only-child:before { height: 100vh; } .contentBar .container { display: flex; align-content: center; align-items: center; justify-content: center; padding: 4em 0; } .contentBar.back4 .content-wrapper:only-child .container, .contentBar .content-wrapper .container[data-text-style="1"] { padding: 0; } /* --- Linksbündig --- */ .contentBar .content-wrapper.position .container, .contentBar .content-wrapper.position0 .container, .contentBar .content-wrapper.position1 .container, .contentBar .content-wrapper.position4 .container, .contentBar .content-wrapper.position5 .container, .contentBar .content-wrapper.position7 .container, .contentBar .content-wrapper.position8 .container { justify-content: flex-start; } /* --- Rechtsbündig --- */ .contentBar .content-wrapper.position3 .container, .contentBar .content-wrapper.position6 .container, .contentBar .content-wrapper.position9 .container { justify-content: flex-end; } /* --- Zentriert --- */ .contentBar .content-wrapper.position2 .container { justify-content: center; } .contentBar .media-gallery + .content-wrapper, .contentBar .background-map + .content-wrapper { pointer-events: none; } /* --- text color --- */ /* standard */ /* white */ .contentBar .container.color1, .contentBar .container.color1 h2, .contentBar .container.color1 h3, .contentBar .container.color1 h4, .contentBar .container.color1 h5, .contentBar .container.color1 .index ul:not(.ix-bild) li > a { color: rgb(255,253,249); } .contentBar .container.color1 p > a:not(.btn) { color: rgb(255,253,249); } .no-touch .contentBar .container.color1 p > a:hover, .no-touch .contentBar .container.color1 p > a:active, .no-touch .contentBar .container.color1 .index ul:not(.ix-bild) li > a:hover .ix-more, .no-touch .contentBar .container.color1 .index ul:not(.ix-bild) li > a:active .ix-more { color: rgb(255,253,249); background: rgba(255,253,249,0.1); } /* accent */ .contentBar .container.color2, .contentBar .container.color2 h2, .contentBar .container.color2 h3, .contentBar .container.color2 h4, .contentBar .container.color2 h5, .contentBar .container.color2 .index ul:not(.ix-bild) li > a { color: rgb(252,194,79); } /* --- reverse above style for ix-bild headlines --- */ .contentBar .container.color2 .ix-bild h3 { color: rgb(255,253,249); } .contentBar .container.color2 p > a:not(.btn) { color: rgb(252,194,79); } .no-touch .contentBar .container.color2 p > a:hover, .no-touch .contentBar .container.color2 p > a:active, .no-touch .contentBar .container.color2 .index ul:not(.ix-bild) li > a:hover .ix-more, .no-touch .contentBar .container.color2 .index ul:not(.ix-bild) li > a:active .ix-more { color: rgb(252,194,79); background: rgba(252,194,79,0.1); } /* --- BAR CONTENT --- */ .contentBar .container .bar-content { display: inline-block; width: 100%; box-sizing: border-box; border-radius: 2px; pointer-events: auto; } /* --- text width --- */ .contentBar .content-wrapper.position1 .bar-content, .contentBar .content-wrapper.position2 .bar-content, .contentBar .content-wrapper.position3 .bar-content, .contentBar .content-wrapper.position5 .bar-content, .contentBar .content-wrapper.position6 .bar-content, .contentBar .content-wrapper.position8 .bar-content, .contentBar .content-wrapper.position9 .bar-content { width: 44.95%; } .contentBar .content-wrapper.position1 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position2 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position3 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position5 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position6 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position8 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position9 .container[data-text-style="1"] .bar-content { width: 50%; } /* --- text justify --- */ .contentBar .content-wrapper .bar-content.justify0 { text-align: left; } .contentBar .content-wrapper .bar-content.justify1 { text-align: right; } .contentBar .content-wrapper .bar-content.justify2 { text-align: center; } /* --- text padding --- */ .contentBar .container:not(.back0)[data-text-style="0"] .bar-content, .contentBar .container:not(.back0)[data-text-style="1"] .bar-content { padding: 3em 4.233%; } /* --- text background - full container height --- */ .contentBar .container[data-text-style="1"] .bar-content:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: -1; } .contentBar .content-wrapper.position3 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position6 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position9 .container[data-text-style="1"] .bar-content:before { left: 50%; } .contentBar .content-wrapper.position2 .container[data-text-style="1"] .bar-content:before { left: 25%; } .contentBar .content-wrapper.position1 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position2 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position3 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position5 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position6 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position8 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position9 .container[data-text-style="1"] .bar-content:before { width: 50%; } /* --- text background color --- */ .contentBar .container.back1[data-text-style="0"] .bar-content, .contentBar .container.back1[data-text-style="1"] .bar-content:before { background-color: rgb(255,253,249); background-color: rgba(255,253,249,0.85); } .contentBar .container.back2[data-text-style="0"] .bar-content, .contentBar .container.back2[data-text-style="1"] .bar-content:before { background-color: rgb(240,240,240); background-color: rgba(240,240,240,0.85); } .contentBar .container.back3[data-text-style="0"] .bar-content, .contentBar .container.back3[data-text-style="1"] .bar-content:before { background-color: rgb(76,73,71); background-color: rgba(76,73,71,0.85); } .contentBar .container.back4[data-text-style="0"] .bar-content, .contentBar .container.back4[data-text-style="1"] .bar-content:before { background-color: rgb(252,194,79); background-color: rgba(252,194,79,0.85); } .contentBar .media-gallery + .content-wrapper .bar-content, .contentBar .background-map + .content-wrapper .bar-content { pointer-events: auto; } .contentBar .container .bar-content > *:first-child { margin-top: 0; } .contentBar .container .bar-content > *:last-child { margin-bottom: 0; } .contentBar .container[data-text-style="2"] .bar-content h2, .contentBar .container[data-text-style="2"] .bar-content h3, .contentBar .container[data-text-style="2"] .bar-content h4, .contentBar .container[data-text-style="2"] .bar-content p, .contentBar .container[data-text-style="2"] .bar-content .gallery-title { box-decoration-break: clone; display: inline; line-height: 1.5; } .contentBar .container[data-text-style="2"] .bar-content h2:before, .contentBar .container[data-text-style="2"] .bar-content h2:after, .contentBar .container[data-text-style="2"] .bar-content h3:before, .contentBar .container[data-text-style="2"] .bar-content h3:after, .contentBar .container[data-text-style="2"] .bar-content h4:before, .contentBar .container[data-text-style="2"] .bar-content h4:after, .contentBar .container[data-text-style="2"] .bar-content p:before, .contentBar .container[data-text-style="2"] .bar-content p:after, .contentBar .container[data-text-style="2"] .bar-content .gallery-title:before, .contentBar .container[data-text-style="2"] .bar-content .gallery-title:after { content: ""; display: block; width: 100%; height: 0; margin: 1rem 0; } .contentBar .container.back1[data-text-style="2"] .bar-content h2, .contentBar .container.back1[data-text-style="2"] .bar-content h3, .contentBar .container.back1[data-text-style="2"] .bar-content h4, .contentBar .container.back1[data-text-style="2"] .bar-content p, .contentBar .container.back1[data-text-style="2"] .bar-content .gallery-title { background-color: rgb(255,253,249); background-color: rgba(255,253,249,0.85); box-shadow: 0.5rem 0 0 rgba(255,253,249,0.85), -0.5rem 0 0 rgba(255,253,249,0.85); } .contentBar .container.back2[data-text-style="2"] .bar-content h2, .contentBar .container.back2[data-text-style="2"] .bar-content h3, .contentBar .container.back2[data-text-style="2"] .bar-content h4, .contentBar .container.back2[data-text-style="2"] .bar-content p, .contentBar .container.back2[data-text-style="2"] .bar-content .gallery-title { background-color: rgb(240,240,240); background-color: rgba(240,240,240,0.85); box-shadow: 0.5rem 0 0 rgba(240,240,240,0.85), -0.5rem 0 0 rgba(240,240,240,0.85); } .contentBar .container.back3[data-text-style="2"] .bar-content h2, .contentBar .container.back3[data-text-style="2"] .bar-content h3, .contentBar .container.back3[data-text-style="2"] .bar-content h4, .contentBar .container.back3[data-text-style="2"] .bar-content p, .contentBar .container.back3[data-text-style="2"] .bar-content .gallery-title { background-color: rgb(76,73,71); background-color: rgba(76,73,71,0.85); box-shadow: 0.5rem 0 0 rgba(76,73,71,0.85), -0.5rem 0 0 rgba(76,73,71,0.85); } .contentBar .container.back4[data-text-style="2"] .bar-content h2, .contentBar .container.back4[data-text-style="2"] .bar-content h3, .contentBar .container.back4[data-text-style="2"] .bar-content h4, .contentBar .container.back4[data-text-style="2"] .bar-content p, .contentBar .container.back4[data-text-style="2"] .bar-content .gallery-title { background-color: rgb(252,194,79); background-color: rgba(252,194,79,0.85); box-shadow: 0.5rem 0 0 rgba(252,194,79,0.85), -0.5rem 0 0 rgba(252,194,79,0.85); } .contentBar .container[data-text-style="2"] .bar-content ul { clear: both; } .contentBar .container[data-text-style="2"] .bar-content > ul li { position: relative; float: left; margin: 2px 0; padding: 0; clear: both; } .contentBar .container[data-text-style="2"] .bar-content > ul.list-plus li:before, .contentBar .container[data-text-style="2"] .bar-content > ul.list-check li:before { top: 2px; } .contentBar .container[data-text-style="2"] .bar-content > ul li:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: -1em; z-index: -1; white-space: pre-wrap; box-decoration-break: clone; } .contentBar .container[data-text-style="2"] .bar-content > ul.list-plus li:after, .contentBar .container[data-text-style="2"] .bar-content > ul.list-check li:after { left: -1.618em; } .contentBar .container.back1[data-text-style="2"] .bar-content > ul li:after { background-color: rgb(255,253,249); background-color: rgba(255,253,249,0.85); box-shadow: 0.5rem 0 0 rgba(255,253,249,0.85), -0.5rem 0 0 rgba(255,253,249,0.85); } .contentBar .container.back2[data-text-style="2"] .bar-content > ul li:after { background-color: rgb(240,240,240); background-color: rgba(240,240,240,0.85); box-shadow: 0.5rem 0 0 rgba(240,240,240,0.85), -0.5rem 0 0 rgba(240,240,240,0.85); } .contentBar .container.back3[data-text-style="2"] .bar-content > ul li:after { background-color: rgb(76,73,71); background-color: rgba(76,73,71,0.85); box-shadow: 0.5rem 0 0 rgba(76,73,71,0.85), -0.5rem 0 0 rgba(76,73,71,0.85); } .contentBar .container.back4[data-text-style="2"] .bar-content > ul li:after { background-color: rgb(252,194,79); background-color: rgba(252,194,79,0.85); box-shadow: 0.5rem 0 0 rgba(252,194,79,0.85), -0.5rem 0 0 rgba(252,194,79,0.85); } .contentBar .container[data-text-style="2"] .bar-content .btn { margin-left: -0.5rem; } .contentBar.back3 p > a, .contentBar .back4 p > a { color: rgb(76,73,71); } /* -- PHOTO ALBUM ----------------------------------*/ .gallery-title { font-size: 1.2em; font-size: 1.8em; margin: 2rem 0 1rem; } .media-gallery { position: relative; display: block; margin: 1rem 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .media-gallery.tInfinity { padding-bottom: 75px; } .media-gallery.tInfinity.hide-infinity { padding-bottom: 0; } .contentBar > .media-gallery { margin: 0; } .contentBar > .media-gallery:only-child { width: 100%; } .media-gallery:not(.single-media):not(.gallery-slideshow):not(.tArrows) .gallery-page { position: relative; width: 102.1432%; margin: 0 -1.0716%; } .layout2 .media-gallery:not(.single-media):not(.gallery-slideshow):not(.tArrows) .gallery-page, .layout3 .media-gallery:not(.single-media):not(.gallery-slideshow):not(.tArrows) .gallery-page { width: 101.6%; margin: 0 -0.8%; } .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 104.3822%; margin: 0 -2.1911%; } .layout2 .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page, .layout3 .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 103.251%; margin: 0 -1.6255%; } .media-gallery .gallery-page.changing { overflow: hidden; } .media-gallery.tArrows .gallery-page { position: relative; width: 90.7156%; margin: 0 auto; } .layout2 .media-gallery.tArrows .gallery-page, .layout3 .media-gallery.tArrows .gallery-page { width: 93.0989%; } .contentBar > .media-gallery:only-child:not(.single-media):not(.gallery-slideshow):not(.tArrows) .gallery-page { width: 100%; margin: 0; } /* --- WRAPPER FOR NAVIGATION --- */ .media-gallery .wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; overflow: hidden; } .media-gallery.carousel .wrap { white-space: nowrap; overflow-x: scroll; } .media-gallery.carousel .wrap.flickity-enabled { overflow: unset; } .media-gallery .wrap.active { z-index: 1; } .media-gallery .wrap.active, .media-gallery.tInfinity .wrap.view { position: relative; top: auto; right: auto; bottom: auto; left: auto; opacity: 1; visibility: visible; } .contentBar > .gallery-slideshow .wrap.active { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; visibility: visible; } .media-gallery .wrap.old { z-index: auto; } .media-gallery .wrap.new { opacity: 1; visibility: visible; z-index: 1; } .media-gallery.tInfinity .wrap.new { top: 100%; } /* --- GALLERY ITEM DEFAULTS --- */ .media-gallery .gallery-item .item-container { position: relative; display: block; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .contentBar > .gallery-slideshow .gallery-item .item-container { position: static; } .media-gallery .gallery-item .gal-img { position: relative; display: block; width: 100%; height: 0; padding: 0 0 66%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .media-gallery .gallery-item .gal-img.lazy { opacity: 0; } .contentBar > .gallery-slideshow .gallery-item .gal-img, .contentBar > .gallery-slideshow.center .gallery-item .gal-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; padding: 0; } .media-gallery .gallery-item img { display: block; width: 100%; height: auto; } .media-gallery .gallery-item .gal-text { margin: 5px 0 0; } /* --- CAROUSEL --- */ .media-gallery.carousel .gallery-item { position: relative; display: inline-block; width: 22.9018%; margin: 1.0491%; vertical-align: top; -webkit-transition: width 0.3s, margin 0.3s; transition: width 0.3s, margin 0.3s; } .layout2 .media-gallery.carousel .gallery-item, .layout3 .media-gallery.carousel .gallery-item { width: 15.09306%; margin: 0.7868%; } .contentBar > .media-gallery.carousel .gallery-item, .layout2 .contentBar > .media-gallery.carousel .gallery-item, .layout3 .contentBar > .media-gallery.carousel .gallery-item, .contentBar .bar-content .media-gallery.carousel .gallery-item, .layout2 .contentBar .bar-content .media-gallery.carousel .gallery-item, .layout3 .contentBar .bar-content .media-gallery.carousel .gallery-item { width: 33.333333%; margin: 0; } /* --- THUMBGRID THUMBNAILS --- */ .gallery-thumbgrid .gallery-item { position: relative; display: inline-block; width: 14.5624%; margin: 1.0491%; vertical-align: top; -webkit-transition: width 0.3s, margin 0.3s; transition: width 0.3s, margin 0.3s; } .layout2 .gallery-thumbgrid .gallery-item, .layout3 .gallery-thumbgrid .gallery-item { width: 10.9215%; margin: 0.7868%; } .col-layout .gallery-thumbgrid .gallery-item { width: 29.1367%; margin: 2.0992%; } .layout2 .col-layout .gallery-thumbgrid .gallery-item, .layout3 .col-layout .gallery-thumbgrid .gallery-item { width: 21.8521%; margin: 1.5743%; } .gallery-thumbgrid .gallery-item .item-container { background-color: rgba(0,0,0,0.1); color: rgb(255,253,249); } .gallery-thumbgrid.hover2 .gallery-item a, .gallery-thumbgrid.hover3 .gallery-item a { overflow: hidden; } .gallery-thumbgrid .gallery-item .gal-img { padding: 0 0 100%; background-size: cover, cover; } .gallery-thumbgrid .gal-text { display: none; } /* --- THUMBGRID HOVER EFFECTS --- */ /* --- BORDER --- */ .hover1 .gallery-item a:after { content: ""; position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; background: rgb(252,194,79); background: rgba(252,194,79,0.8); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; } .no-touch .hover1 .gallery-item a:hover:after, .no-touch .hover1 .gallery-item a:active:after { top: -3px; right: -3px; bottom: -3px; left: -3px; } /* --- ZOOM IMAGE --- */ .no-touch .hover2 .gallery-item a:hover .gal-img, .no-touch .hover2 .gallery-item a:active .gal-img { -webkit-transform: scale(1.1); transform: scale(1.1); } /* --- ZOOM ICON --- */ .gal-zoom { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .single-media .gal-zoom { opacity: 0.8; visibility: visible; } .no-touch a:hover .gal-zoom, .no-touch a:active .gal-zoom { opacity: 1; visibility: visible; } .gal-zoom span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 2.2rem; line-height: 1; color: rgb(255,253,249); -webkit-transition: all 0.3s; transition: all 0.3s; } .single-media .gallery-page .gal-zoom span { font-size: 5rem; } /* --- ZOOM IMAGE & BKGD --- */ .hover3 .gal-zoom, .hover4 .gal-zoom { background: rgb(252,194,79); background: rgba(252,194,79,0.6); } .gallery-slideshow.hover3 .gal-zoom, .gallery-slideshow.hover4 .gal-zoom, .single-media.hover3 .gal-zoom, .single-media.hover4 .gal-zoom { background: transparent; } .no-touch .gallery-slideshow.hover3 a:hover .gal-zoom, .no-touch .gallery-slideshow.hover3 a:active .gal-zoom, .no-touch .gallery-slideshow.hover4 a:hover .gal-zoom, .no-touch .gallery-slideshow.hover4 a:active .gal-zoom, .no-touch .single-media.hover3 a:hover .gal-zoom, .no-touch .single-media.hover3 a:active .gal-zoom, .no-touch .single-media.hover4 a:hover .gal-zoom, .no-touch .single-media.hover4 a:active .gal-zoom { background: rgb(252,194,79); background: rgba(252,194,79,0.6); } .hover3 .gal-zoom span { background: transparent; } /* --- PLAY ICON --- */ .media-gallery .gal-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .media-gallery.single-media .gal-play, .media-gallery.single-media .gal-play { opacity: 0.5; visibility: visible; } .no-touch .media-gallery a:hover .gal-play, .no-touch .media-gallery a:active .gal-play { opacity: 1; visibility: visible; } .media-gallery .gal-play span { position: absolute; top: 50%; left: 50%; border-radius: 2px; border: 1px solid rgb(76,73,71); border: 1px solid rgba(76,73,71,0.8); padding: 0 8px; background: rgb(76,73,71); background: rgba(0,0,0,0.8); -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); font-size: 2.5rem; color: rgb(255,253,249); -webkit-transition: all 0.3s; transition: all 0.3s; } .media-gallery.single-media .gal-play span, .media-gallery.single-media .gal-play span, .no-touch .media-gallery a:hover .gal-play span, .no-touch .media-gallery a:active .gal-play span { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } /* --- PAGE LOADER --- */ .gallery-page .loader { position: absolute; display: none; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,253,249,0.7); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; z-index: -1; } .gallery-page .loader.view { display: block; opacity: 1; visibility: visible; z-index: 1; } .gallery-page .loader span { position: absolute; display: block; top: 50%; left: 50%; border-radius: 50%; padding: 10px 7px; background: rgb(0,0,0); background: rgba(0,0,0,0.2); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; z-index: 10; font-size: 2rem; line-height: 1; color: rgb(255,253,249); } /* --- VIDEO ALBUM / AUDIO ALBUM --- */ .gallery-audio .gallery-item, .gallery-video .gallery-item { display: inline-block; width: 31.22318%; margin: 1.0491%; vertical-align: top; } .layout2 .gallery-audio .gallery-item, .layout3 .gallery-video .gallery-item { display: inline-block; width: 31.7471%; margin: 0.7868%; } .gallery-audio .gallery-item .gal-text, .gallery-video .gallery-item .gal-text { position: relative; display: block; } /* --- THUMBGRID PAGE NAVIGATION --- */ .nav-pages { margin: 1rem 0; text-align: center; } .nav-pages a { position: relative; display: inline-block; margin: 0 2px; border-radius: 2px; border: 1px solid transparent; padding: 6px 14px; text-decoration: none; vertical-align: middle; font-size: 1.2rem; color: rgb(76,73,71); } .no-touch .nav-pages a:hover, .no-touch .nav-pages a:active { background-color: rgb(224,224,224); } .nav-pages .active, .no-touch .nav-pages .active:hover, .no-touch .nav-pages .active:active { border: 1px solid rgb(224,224,224); background-color: rgb(255,253,249); cursor: default; } .nav-pages .active span { cursor: default; } .nav-pages .disabled, .no-touch .nav-pages .disabled:hover, .no-touch .nav-pages .disabled:active { background-color: transparent; color: rgb(102,102,102); cursor: default; opacity: 0.25; } .nav-pages .disabled span { cursor: default; } .nav-pages a:first-child { border-left-width: 1px; border-radius: 2px 0 0 2px; } .nav-pages a:last-child { border-radius: 0 2px 2px 0; } /* --- THUMBGRID PAGE ARROW NAVIGATION --- */ .nav-arrows, .nav-infinity { position: absolute; top: 50%; width: 3.5292%; height: 60px; margin: 0; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); -webkit-transition: all 0.2s; transition: all 0.2s; z-index: 3; } .nav-arrows.next { right: 0; } .nav-arrows.prev { left: 0; } .nav-infinity { top: auto; bottom: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } .nav-arrows.disabled, .nav-infinity.disabled { opacity: 0.3; cursor: default; } .nav-arrows.hide, .nav-infinity.hide { opacity: 0; visibility: hidden; } .media-gallery:not(.tArrows) .nav-arrows { display: none; } .nav-arrows a, .nav-infinity a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: all 0.2s; transition: all 0.2s; cursor: pointer; } .nav-arrows.prev a { text-align: left; } .nav-arrows.next a { text-align: right; } .nav-arrows a.disabled, .nav-infinity a.disabled { opacity: 0.3; cursor: default; } .nav-arrows a.hide, .nav-infinity a.hide { opacity: 0; visibility: hidden; } .nav-arrows a span, .nav-infinity a span { position: relative; display: block; width: 100%; height: 100%; margin: 0; box-sizing:border-box; font-size: 4rem; line-height: 1; color: rgb(76,73,71); -webkit-transition: all 0.2s; transition: all 0.2s; } .nav-arrows a.disabled span, .nav-infinity a.disabled span { cursor: default; } .no-touch .nav-arrows:not(.disabled) a:not(.disabled):hover span, .no-touch .nav-arrows:not(.disabled) a:not(.disabled):active span, .no-touch .nav-infinity:not(.disabled) a:not(.disabled):hover span, .no-touch .nav-infinity:not(.disabled) a:not(.disabled):active span { color: rgb(252,194,79); } /* --- PHOTOALBUM - SLIDESHOW --- */ .gallery-slideshow.left { float: left; width: 48.9096%; margin-right: 2.1433%; padding: 0; } .col-layout .gallery-slideshow.left { float: none; width: 100%; margin-right: 0; } .gallery-slideshow.right { float: right; width: 48.9096%; margin-left: 2.1433%; padding: 0; } .col-layout .gallery-slideshow.right { float: none; width: 100%; margin-left: 0; } .contentBar > .gallery-slideshow:not(:only-child) { position: absolute; top: 0; bottom: 0; margin: 0; } .contentBar > .gallery-slideshow:not(:only-child).left { left: 0; width: 50%; } .contentBar > .gallery-slideshow:not(:only-child).right { right: 0; width: 50%; } .contentBar > .gallery-slideshow:not(:only-child).center { left: 0; right: 0; } .gallery-slideshow.hover2 .gallery-item, .gallery-slideshow.hover3 .gallery-item { overflow: hidden; } .gallery-slideshow .gallery-item .gal-img { padding: 0 0 66%; background-size: cover, cover; } .gallery-slideshow.center .gallery-item .gal-img { padding: 0 0 33%; } .gallery-slideshow .gallery-item img { display: none; } /* --- SLIDESHOW NAV DOTS --- */ .slidetabs { position: relative; margin: 5px 0 0; text-align: center; z-index: 1; } .indextabs { position: absolute; top: 2.5%; top: 2.5vw; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index: 5; } .contentBar > .gallery-slideshow .slidetabs { position: absolute; right: 0.5em; bottom: 0.5em; left: 0.5em; margin: 0; } .contentBar > .gallery-slideshow.left .slidetabs { right: auto; } .contentBar > .gallery-slideshow.right .slidetabs { left: auto; } .indextabs:before { content: ""; display: inline-block; width: 1px; height: 100%; margin: 0 0 0 -1px; vertical-align: middle; } /* single tab */ .slidetabs a, .indextabs a { position: relative; display: inline-block; margin: 0 5px; outline: none; border: 0; overflow: hidden; vertical-align: middle; } .slidethumbs a { margin: 5px 2px; } .slidetabs a span, .indextabs a span { position: relative; display: block; width: 15px; height: 15px; border-radius: 50%; background-color: rgb(240,240,240); background-color: rgba(0,0,0,0.15); -webkit-transition: all 0.3s; transition: all 0.3s; outline: none; } .slidethumbs a span { width: 35px; height: 35px; border-radius: 0; padding: 2px; background-color: transparent; background-size: cover; background-position: center; background-repeat: no-repeat; box-sizing: border-box; opacity: 0.5; } .slidetabs a span:before, .indextabs a span:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; background-color: rgb(255,253,249); z-index: -1; } .slidethumbs a span:before { display: none; } .no-touch .slidetabs a:hover span, .no-touch .slidetabs a:active span, .no-touch .indextabs a:hover span, .no-touch .indextabs a:active span { background-color: rgb(224,224,224); background-color: rgba(0,0,0,0.3); } .slidetabs a.active span, .indextabs a.active span, .no-touch .slidetabs a.active:hover span, .no-touch .slidetabs a.active:active span, .no-touch .indextabs a.active:hover span, .no-touch .indextabs a.active:active span { background-color: rgb(252,194,79); cursor: default; } .no-touch .slidethumbs a:hover span, .no-touch .slidethumbs a:active span { opacity: 1; } .slidethumbs a.active span, .no-touch .slidethumbs a.active:hover span, .no-touch .slidethumbs a.active:active span { border: 2px solid rgb(252,194,79); padding: 0; cursor: default; } .slidethumbs a.active span, .no-touch .slidethumbs a.active:hover span, .no-touch .slidethumbs a.active:active span { opacity: 1; } /* --- SINGLE VIDEO / SINGLE AUDIO --- */ .contentBar > .single-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .single-media .gallery-item { width: 48.9096%; box-sizing: border-box; cursor: pointer; } /* --- left --- */ .single-media .gallery-page[data-layout="0"] .gallery-item { float: left; margin-right: 2.1433%; } /* --- right --- */ .single-media .gallery-page[data-layout="1"] .gallery-item { float: right; margin-left: 2.1433%; } /* --- 100% | col content --- */ .single-media .gallery-page[data-layout="2"] .gallery-item, .col-layout .single-media .gallery-page[data-layout="0"] .gallery-item, .col-layout .single-media .gallery-page[data-layout="1"] .gallery-item { float: none; width: 100%; margin: 0; } .contentBar > .single-media .gallery-item { position: absolute; top: 0; bottom: 0; } .contentBar > .single-media .gallery-page[data-layout="0"] .gallery-item { float: none; left: 0; width: 50%; margin: 0; } .contentBar > .single-media .gallery-page[data-layout="1"] .gallery-item { float: none; right: 0; width: 50%; margin: 0; } .contentBar > .single-media .gallery-page[data-layout="2"] .gallery-item { left: 0; right: 0; width: auto; } .content .single-media .gallery-page .gal-text { margin-left: 51.0529%; color: rgb(76,73,71); } .content .single-media .gallery-page[data-layout="1"] .gal-text { margin-right: 51.0529%%; margin-left: 0; } .content .single-media .gallery-page[data-layout="2"] .gal-text, .col-layout .single-media .gallery-page[data-layout="1"] .gal-text { margin: 1em 0 0; } .contentBar > .single-media .gal-text { display: none; } .content .single-media .gallery-page h3 { margin-top: 0; } .single-media .gallery-item .gal-img { padding: 0 0 56.25%; } .contentBar > .single-media .gallery-item .gal-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; padding: 0; } .single-media .gallery-page .gallery-item .js-pano { position: relative; display: block; float: none; width: 100%; height: 0; padding: 0 0 56.25%; } .single-media .gallery-item .video-container { position: relative; display: block; width: 100%; height: 0; padding: 0 0 56.25%; background: rgb(0,0,0); } .contentBar > .single-media .gallery-item .video-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; padding: 0; } .single-media .gallery-item .video-container iframe, .single-media .gallery-item .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --- OVERLAY GALLERY --- */ .overlay { position: fixed; display: none; top: 0; right: 0; bottom: 0; left: 0; background: rgb(0,0,0); background: rgba(0,0,0,0.8); text-align: center; opacity: 0; z-index: -1; -webkit-backface-visibility: hidden; overflow: hidden; } .overlay.open { display:block; opacity: 1; z-index: 14; } .overlay.changing { display:block; opacity: 1; z-index: 500; } .overlay .galImg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0; text-align: center; opacity: 0; visibility: hidden; } .overlay .galImg.active { opacity: 1; visibility: visible; z-index: 1; } .overlay .galImg.new { opacity: 1; visibility: visible; z-index: 2; } /* --- OVERLAY AUDIO WRAPPER --- */ .overlay .media-wrapper { } .overlay .audio-container { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; width: 500px; max-width: 100%; height: 30px; max-height: 100%; margin: auto; } /* --- OVERLAY IMAGE --- */ .overlay .galImg .image-container { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: contain, contain; } .overlay .galImg img { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: auto; } .overlay .galImg .media-wrapper img { display: none; } .overlay .galImg .media-wrapper audio { display: block; width: 100%; } /* --- VIDEO IN OVERLAY --- */ .overlay .overlay-video img { display: none; } .overlay .video-container, .overlay .iframe-container { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; width: 100%; width: 100vw; max-width: 177.78vh; height: 56.25vw; max-height: 100vh; margin: auto; background: rgb(0,0,0); z-index: 5; } .overlay .iframe-container iframe, .overlay .video-container iframe, .overlay .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; } .overlay #player object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* --- OVERLAY DESCRIPTION --- */ .overlay .galImg .text { position: absolute; right: 0; bottom: 0; left: 0; padding: 1%; background: rgba(0,0,0,0.6); color: rgb(255,253,249); color: rgba(255,253,249,0.7); text-align: left; font-size: 0.85rem; -webkit-transition: all 0.2s; transition: all 0.2s; z-index: 1; } .overlay .galImg .text.img-view { opacity: 0; } .overlay .galImg .text p { max-width: 800px; } /* --- OVERLAY LOADER --- */ .overlay .loader { position: absolute; display: block; top: 50%; left: 50%; border-radius: 50%; padding: 10px 7px; background: rgb(0,0,0); background: rgba(0,0,0,0.2); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; z-index: 10; font-size: 2rem; line-height: 1; color: rgb(255,253,249); } .overlay .loader.hide { opacity: 0; z-index: -1; } .no-opacity .overlay .loader.hide { visibility: hidden; } /* --- OVERLAY NAV --- */ .overlay > .nav { position: absolute; top: 50%; width: 50px; height: 50px; border-radius: 50%; background: rgb(0,0,0); background: rgba(0,0,0,0.2); box-sizing: border-box; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 0.2s; transition: all 0.2s; cursor: pointer; z-index: 5; } .overlay > .nav.prev { left: 2%; left: 4vw; } .overlay > .nav.next { right: 2%; right: 4vw; -webkit-transform: translate(50%,-50%); transform: translate(50%,-50%); } .overlay > .nav.disabled { opacity: 0.3; cursor: default; } .overlay > .nav.hide, .overlay.inactive > .nav { opacity: 0; visibility: hidden; } .overlay > .nav.img-view { opacity: 0; visibility: hidden; } .no-touch .overlay > .nav:hover { background: rgba(255,253,249,0.6); } .no-touch .overlay > .nav.disabled:hover { background: rgba(0,0,0,0.2); } .overlay > .nav span { position: relative; display: block; width: 60%; height: 60%; margin: 20% 0 0 20%; box-sizing:border-box; font-size: 4rem; line-height: 1; } .overlay > .next span { margin-left: 15%; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .overlay > .nav span:before, .overlay > .nav span:after { content: ""; position: absolute; left: 25%; width: 3px; height: 50%; background: rgb(255,253,249); backface-visibility: hidden; -webkit-transition: all 0.2s; transition: all 0.2s; } .overlay > .nav span:before { -webkit-transform: translate(-50%,0) rotate(40deg); transform: translate(-50%,0) rotate(45deg); -webkit-transform-origin: 0 100% 0; transform-origin: 0 100% 0; } .overlay > .nav span:after { top: 50%; -webkit-transform: translate(-50%,0) rotate(-40deg); transform: translate(-50%,0) rotate(-40deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; } .no-touch .overlay > .nav:not(.disabled):hover span:before, .no-touch .overlay > .nav:not(.disabled):hover span:after { background: rgb(0,0,0); } /* --- CLOSE BUTTON --- */ .overlay .close.img-view { opacity: 0; } .overlay.inactive .close { opacity: 0; visibility: hidden; } /* --- CONTENT GALLERY NAV --- */ .contentGallery .galNav { position: relative; width: 100%; margin: 20px 0; padding: 0; list-style-type: none; text-align: center; } .contentGallery .galNav li { position: relative; display: inline-block; margin: 0; padding: 0; } .contentGallery .galNav a { position: relative; display: block; width: 45px; height: 45px; margin: 0 10px; padding: 10px; background-color: rgb(76,73,71); background-color: rgba(76,73,71,0.5); } .contentGallery .galNav span { position: relative; display: block; width: 80%; height: 80%; margin: 10% 0 0 10%; box-sizing:border-box; font-size: 2rem; line-height: 1; color: rgb(255,253,249); } .csstransforms .contentGallery .galNav span i { display: none; } .csstransforms .contentGallery .galNav .next span { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .csstransforms .contentGallery .galNav span:before, .csstransforms .contentGallery .galNav span:after { content: ""; position: absolute; left: 25%; width: 4px; height: 50%; background: rgb(255,253,249); backface-visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransforms .contentGallery .galNav span:before { -webkit-transform: translate(-50%,0) rotate(40deg); transform: translate(-50%,0) rotate(45deg); -webkit-transform-origin: 0 100% 0; transform-origin: 0 100% 0; } .csstransforms .contentGallery .galNav span:after { top: 50%; -webkit-transform: translate(-50%,0) rotate(-40deg); transform: translate(-50%,0) rotate(-40deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; } .no-touch .contentGallery .galNav a:hover span, .no-touch .contentGallery .galNav a:hover span { color: rgb(252,194,79); } .csstransforms.no-touch .contentGallery .galNav a:hover span:before, .csstransforms.no-touch .contentGallery .galNav a:hover span:after { background: rgb(252,194,79); } .contentGallery .galImg { text-align: center; } .contentGallery .galImg img { display: inline-block; width: auto; max-width: 100%; height: auto; } .overlay.page-overlay { z-index: 13; } .overlay .pageoverlay-item { position: absolute; top: 5%; top: 5vw; right: 0; bottom: 5%; bottom: 5vw; left: 0; width: 84%; width: 84vw; max-width: 1920px; margin: 0 auto; border-radius: 2px; padding: 0; box-shadow: 0 0 10px rgba(0,0,0,0.85); opacity: 0; visibility: hidden; overflow: hidden; } .overlay .pageoverlay-item.active { opacity: 1; visibility: visible; z-index: 1; } .overlay .pageoverlay-item.new { visibility: visible; z-index: 2; } .overlay-holder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(255,253,249); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .body-splash + .overlay-holder { background: transparent; } .overlay-holder > div { position: relative; display: inline-block; float: none; vertical-align: top; } .overlay-holder .content { text-align: left; } .overlay-holder .general-width { width: 92%; max-width: 1280px; } .overlay-holder .content h1 { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .overlay .close-gal { position: relative; display: inline-block; left: auto; right: auto; width: 35px; height: 35px; margin: 0 10px 0 -45px; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: middle; } .overlay .close-gal.hide { opacity: 0; visibility: hidden; } /* -- INDEX ----------------------------------------*/ /* -- INDEX ----------------------------------------*/ .index { position: relative; margin: 0; clear: both; } .index ul { margin: 0; padding: 0; list-style: none; overflow: inherit; overflow: initial; } .index li { position: relative; display: inline-block; width: 100%; margin: 1em 0; padding: 0; vertical-align: top; } .index li > a, .index li > span { position: relative; display: block; width: 100%; border: 0; background-color: rgb(240,240,240); background-color: rgba(76,73,71,0.1); box-sizing: border-box; color: rgb(76,73,71); -webkit-transition: all 0.15s; transition: all 0.15s; overflow: hidden; } .no-touch .index li > a:hover, .no-touch .index li > a:active { background-color: rgb(224,224,224); background-color: rgba(76,73,71,0.2); } .index span { position: relative; display: block; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; } .index .btn span { display: inline-block; } .index .ix-header { padding: 1em; } .index h3 { margin: 0; } .index .ix-subtitle { color: rgb(51,51,51); } .index .ix-img { background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .index .ix-icon { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .index .ix-icon img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; } .index .ix-desc { padding: 0 1em 1em; } .index .ix-more { text-transform: lowercase; } .index .ix-more:not(:only-child) { padding: 0.5em 0 0; } .index .ix-more i { padding: 0 0 0 5px; } .no-touch .index a:hover .ix-more, .no-touch .index a:active .ix-more { color: rgb(51,51,51); } /* --- TEXT (TITLE DESC) --- */ .layout2 .ix-text, .layout3 .ix-text { width: 101.6%; margin: 0 -0.8%; } .layout2 .ix-text li, .layout3 .ix-text li { width: 48.4075%; margin: 0.5em 0.7868%; } .ix-text li > a, .ix-text li > span { background-color: transparent; } .no-touch .ix-text li > a:hover, .no-touch .ix-text li > a:active { background-color: transparent; } .ix-text .ix-header { padding: 0 0 1em; } .ix-text .ix-img { display: none; } .ix-text .ix-desc { padding: 0 0 1em; } .no-touch .ix-text a:hover .ix-more, .no-touch .ix-text a:active .ix-more { } /* --- FULL (TITLE IMG DESC) --- */ .layout2 .ix-full, .layout3 .ix-full { display: flex; flex-wrap: wrap; width: 101.6%; margin: 0 -0.8%; } .layout2 .ix-full li, .layout3 .ix-full li { display: inline-flex; width: 48.4075%; margin: 0.5em 0.7868%; } .ix-full li > a, .ix-full li > span { padding: 0 2.1433% 40px 34.0143%; } .layout2 .ix-full li > a, .layout2 .ix-full li > span, .layout3 .ix-full li > a, .layout3 .ix-full li > span { padding: 0 3.251% 40px 34.4174%; } .ix-full .ix-header { padding: 1em 0; } .ix-full .ix-img { position: absolute; top: 0; bottom: 0; left: 0; width: 31.8731%; } .layout2 .ix-full .ix-img, .layout3 .ix-full .ix-img { width: 31.1664%; } .ix-full .ix-desc { position: static; padding: 0 0 1em; } .ix-full .ix-more { position: absolute; bottom: 0; right: 0; padding: 0 1em 1em; } /* --- TITLE (TITLE IMG) --- */ .index .ix-title { width: 102.1432%; margin: 0 -1.0716%; } .layout2 .ix-title, .layout3 .ix-title { width: 101.6%; margin: 0 -0.8% } .index .ix-title li { width: 31.22318%; margin: 1.0491%; } .layout2 .ix-title li, .layout3 .ix-title li { width: 31.7471%; margin: 0.7868%; } .ix-title li > a, .ix-title li > span { padding: 45% 0 0; background: rgb(0,0,0); color: rgb(255,253,249); } .no-touch .ix-title li > a:hover, .no-touch .ix-title li > a:active { background: rgb(0,0,0); } .ix-title .ix-header { position: absolute; top: 0; right: 0; left: 0; z-index: 1; } .ix-title h3 { color: rgb(255,253,249); } .ix-title .ix-subtitle { color: rgb(255,253,249); } .ix-title .ix-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .no-touch .ix-title a:hover .ix-img, .no-touch .ix-title a:active .ix-img { opacity: 0.5; } .ix-title .ix-desc { position: absolute; right: 0; bottom: 0; left: 0; text-align: right; color: rgb(255,253,249); } .ix-title .ix-more { color: rgb(255,253,249); } .no-touch .ix-title a:hover .ix-more, .no-touch .ix-title a:active .ix-more { color: rgb(255,253,249); } /* --- BILD (TITLE IMG DESC) --- */ .index .ix-bild { width: 102.1432%; margin: 0 -1.0716%; } .layout2 .ix-bild, .layout3 .ix-bild { width: 101.6%; margin: 0 -0.8% } .index .ix-bild li { width: 31.22318%; margin: 1.0491%; } .layout2 .ix-bild li, .layout3 .ix-bild li { width: 31.7471%; margin: 0.7868%; } .ix-bild li > a, .ix-bild li > span { padding: 66% 0 0; background: rgb(0,0,0); color: rgb(255,253,249); } .no-touch .ix-bild li > a:hover, .no-touch .ix-bild li > a:active { background: rgb(0,0,0); color: rgb(255,253,249); } .ix-bild .ix-header { position: absolute; top: 0; right: 0; left: 0; z-index: 1; } .ix-bild h3 { color: rgb(255,253,249); } .ix-bild .ix-subtitle { color: rgb(255,253,249); } .ix-bild .ix-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .no-touch .ix-bild a:hover .ix-img, .no-touch .ix-bild a:active .ix-img { opacity: 0.5; } .ix-bild .ix-desc { position: absolute; right: 0; bottom: 100%; left: 0; text-align: right; color: rgb(255,253,249); } .csstransforms .ix-bild .ix-desc { bottom: 0; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } .no-touch .ix-bild a:hover .ix-desc, .no-touch .ix-bild a:active .ix-desc { bottom: 0; } .csstransforms.no-touch .ix-bild a:hover .ix-desc, .csstransforms.no-touch .ix-bild a:active .ix-desc { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .ix-bild .ix-more { color: rgb(255,253,249); } .no-touch .ix-bild a:hover .ix-more, .no-touch .ix-bild a:active .ix-more { color: rgb(255,253,249); } /* --- TICKETS --- */ .index .ix-tickets { max-width: 800px; margin: 0 auto; } .ix-tickets > li { margin: 0.5rem 0; } .ix-tickets .ix-category { text-align: center; background-color: transparent; } .ix-tickets .ix-category .ix-icon { position: relative; display: inline-block; top: auto; left: auto; padding-right: 1rem; -webkit-transform: unset; transform: unset; } .ix-tickets ul { background-color: rgb(240,240,240); background-color: rgba(76,73,71,0.1); } .ix-tickets li li > a, .ix-tickets li li > span { border-top: 1px solid rgba(76,73,71,0.25); padding: 0.5rem 1rem; background-color: transparent; color: rgb(51,51,51); } .ix-tickets li li:first-child > a, .ix-tickets li li:first-child > span { border: 0; } .no-touch .ix-tickets li li > a:hover, .no-touch .ix-tickets li li > a:active { border-color: rgba(76,73,71,0.15); background-color: rgb(240,240,240); background-color: rgba(76,73,71,0.2); color: rgb(51,51,51); } .ix-tickets h2 { margin: 0 0 0.5rem; } .ix-tickets li li { margin: 0; } .ix-tickets .ix-item { display: flex; flex-wrap: nowrap; align-items: flex-start; align-content: flex-start; justify-content: space-between; } .ix-tickets .ix-item.available_soon { opacity: 0.75; } .ix-tickets ul .ix-header { display: inline-block; padding: 0.5rem 1rem 0.5rem 0; vertical-align: top; } .ix-tickets ul .ix-header.show-graph { padding: 0.5rem 3.5rem 0.5rem 0; } .ix-tickets ul h3 { display: inline-block; padding: 0 0.5rem 0 0; vertical-align: bottom; font-size: 1.2em; } .ix-tickets ul .ix-subtitle { display: inline-block; padding: 0; vertical-align: bottom; font-size: 0.85em; } .ix-tickets .ix-desc { display: inline-block; flex-shrink: 0; padding: 0.5rem 0; vertical-align: top; font-size: 1.2em; } .ix-tickets .ix-item.sold_out { opacity: 0.5; } .ix-tickets .ix-item.sold_out, .ix-tickets .ix-item.sold_out h3, .ix-tickets .ix-item.sold_out .ix-subtitle, .ix-tickets .ix-item.sold_out .ix-price { text-decoration: line-through; } /* --- PROGRESS BAR --- */ .ix-tickets .tix-sold { position: absolute; top: 0; right: 0.5rem; margin: 0; font-size: 2.5rem; } .ix-tickets .tix-amt, .ix-tickets .tix-slice { position: absolute; } .ix-tickets .tix-amt { top: 2px; left: 4px; } .ticket-note { max-width: 800px; margin: 1rem auto; } /* --- LINEUP --- */ .ix-lineup2 { min-height: 250px; } .index .ix-lineup { width: 100%; margin: 0%; } .layout2 .ix-lineup, .layout3 .ix-lineup { width: 100%; margin: 0; } .index .ix-lineup li, .layout2 .ix-lineup li, .layout3 .ix-lineup li { width: 25%; margin: 0%; } .ix-lineup li > a { cursor: pointer; } .ix-lineup .artist-live { display: inline-block; padding: 0 0 0 0.5rem; vertical-align: baseline; font-size: 1rem; line-height: 1.25; } .ix-lineup h3.nocaps, .ix-lineup .ix-title.nocaps { text-transform: none; } /* --- FILTER --- */ .index .ix-filter { position: -webkit-sticky; position: sticky; top: 65px; list-style-type: none; margin: 1rem 0 2rem; padding: 1rem 0; background-color: rgba(255,253,249,0.95); overflow: inherit; overflow: initial; text-align: center; z-index: 2; -webkit-transition: all 0.3s; transition: all 0.3s; } .index .ix-filter > div { position: relative; display: inline-block; width: auto; vertical-align: middle; -webkit-transition: all 0.3s; transition: all 0.3s; } .index .ix-filter > div + div { margin: 0 0 0 2rem; } .index .filter-title { position: relative; display: inline-block; width: auto; margin: 0; vertical-align: middle; -webkit-transition: all 0.3s; transition: all 0.3s; } .index .filter-title[data-filter] { cursor: pointer; } .index .filter-title.active[data-filter], .index .filter-title[data-filter]:hover, .index .filter-title[data-filter]:active { color: rgb(252,194,79); } .index .filter-select { position: relative; display: inline-flex; flex-direction: column; width: 150px; height: 35px; margin: 0; border-bottom: 1px solid rgb(76,73,71); padding: 0; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: middle; list-style-type: none; overflow: inherit; overflow: initial; z-index: 2; text-align: left; } .index .filter-select::after { position: absolute; top: 50%; right: 2px; font-family: FontAwesome; font-size: 1.2em; color: rgb(51,51,51); -webkit-transform: translate(0,-50%); transform: translate(0,-50%); z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s; pointer-events: none; } .index .filter-select::after { content: "\f107"; } .no-touch .index .filter-select:hover::after, .index .filter-select.hover::after { content: "\f106"; } .index .filter-select li { position: relative; display: block; width: 100%; margin: 0; padding: 0; order: 1; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .no-touch .index .filter-select:hover li, .index .filter-select.hover li { opacity: 1; visibility: visible; pointer-events: auto; } .index .filter-select li.active { order: 0; opacity: 1; visibility: visible; pointer-events: auto; -webkit-transition: none; transition: none; } .index .filter-select li.group-title:not(.active) { order: 2; } .index .filter-select li:not(.active) { background-color: rgba(255,253,249,0.95); } .touch .index .filter-select li:not(.active) { background-color: rgba(240,240,240,0.95); } .index .filter-select li::before { content: ""; display: inline-block; width: 1px; height: 100%; margin: 0 0 0 -1px; vertical-align: middle; } .index .filter-select li span { position: relative; display: inline-block; width: 100%; padding: 0.25rem 1.5rem 0.25rem 5px; background-color: transparent; color: rgb(51,51,51); z-index: 1; vertical-align: middle; cursor: pointer; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .no-touch .index .filter-select:hover li:not(.active):hover span { background-color: rgba(76,73,71,0.2); } .index .filter-select li.active span { height: 35px; margin-bottom: 1px; background-color: transparent; -webkit-transition: none; transition: none; } .index .filter-select li.group-title:not(.active) span:nth-child(1) { display: none; } .index .filter-select li.group-title.active span:nth-child(1) { display: inline-block; } .index .filter-select li.group-title:not(.active) span:nth-child(2) { display: inline-block; background-color: rgba(76,73,71,0.1); } .index .filter-select li.group-title.active span:nth-child(2) { display: none; } /* -- GOOGLE MAP -----------------------------------*/ #map { position: relative; width: 100%; height: 400px; overflow: hidden; } #map > div { position: absolute; top: 0; right: auto; left: 0%; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } /* -- COLUMN LAYOUT --------------------------------*/ .col-layout { position: relative; width: 102.1432%; margin: 0 -1.0716%; } .layout2 .col-layout, .layout3 .col-layout, .contentBar .col-layout, .form-modal .col-layout { width: 101.6%; margin: 0 -0.8%; } .col-layout .column { position: relative; display: inline-block; margin: 1em 1.0491%; vertical-align: top; } .layout2 .col-layout .column, .layout3 .col-layout .column, .contentBar .col-layout .column, .form-modal .col-layout .column { margin: 1em 0.7868%; } /* --- 2 COL 50/50 --- */ .col-layout.type1 > .column { width: 47.8839%; } .layout2 .col-layout.type1 > .column, .layout3 .col-layout.type1 > .column, .contentBar .col-layout.type1 > .column, .form-modal .col-layout.type1 > .column { width: 48.4075%; } /* --- 3 COL --- */ .col-layout.type2 > .column { width: 31.22318%; } .layout2 .col-layout.type2 > .column, .layout3 .col-layout.type2 > .column, .contentBar .col-layout.type2 > .column, .form-modal .col-layout.type2 > .column { width: 31.7471%; } /* --- 2 COL 66/33 --- */ .col-layout.type3 > .column:nth-of-type(2n + 1) { width: 64.5447%; } .layout2 .col-layout.type3 > .column:nth-of-type(2n + 1), .layout3 .col-layout.type3 > .column:nth-of-type(2n + 1), .contentBar .col-layout.type3 > .column:nth-of-type(2n + 1), .form-modal .col-layout.type3 > .column:nth-of-type(2n + 1) { width: 65.0680%; } .col-layout.type3 > .column:nth-of-type(2n) { width: 31.22318%; } .layout2 .col-layout.type3 > .column:nth-of-type(2n), .layout3 .col-layout.type3 > .column:nth-of-type(2n), .contentBar .col-layout.type3 > .column:nth-of-type(2n), .form-modal .col-layout.type3 > .column:nth-of-type(2n) { width: 31.7471%; } /* --- 2 COL 33/66 --- */ .col-layout.type4 > .column:nth-of-type(2n + 1) { width: 31.22318%; } .layout2 .col-layout.type4 > .column:nth-of-type(2n + 1), .layout3 .col-layout.type4 > .column:nth-of-type(2n + 1), .contentBar .col-layout.type4 > .column:nth-of-type(2n + 1), .form-modal .col-layout.type4 > .column:nth-of-type(2n + 1) { width: 31.7471%; } .col-layout.type4 > .column:nth-of-type(2n) { width: 64.5447%; } .layout2 .col-layout.type4 > .column:nth-of-type(2n), .layout3 .col-layout.type4 > .column:nth-of-type(2n), .contentBar .col-layout.type4 > .column:nth-of-type(2n), .form-modal .col-layout.type4 > .column:nth-of-type(2n) { width: 65.0680%; } /* --- 4 COL --- */ .col-layout.type5 > .column { width: 22.9018%; } .layout2 .col-layout.type5 > .column, .layout3 .col-layout.type5 > .column, .contentBar .col-layout.type5 > .column, .form-modal .col-layout.type5 > .column { width: 23.4264%; } /* --- COLUMN CONTENT --- */ .col-layout .column > *:first-child:not(.btn) { margin-top: 0; } .col-layout .column > *:last-child:not(.btn) { margin-bottom: 0; } .col-layout p { word-wrap: break-word; } .col-layout .ZMSGraphic:not(.imgwidth3) { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .col-layout .ZMSGraphic:not(.imgwidth3) .graphic, .col-layout .ZMSGraphic:not(.imgwidth3) .text { float: none !important; width: 100% !important; margin-right: 0 !important; } .artist-profile { position: relative; display: flex; flex-wrap: nowrap; align-content: center; align-items: stretch; justify-content: space-between; margin-left: 0; background: rgb(252,194,79); box-sizing: border-box; color: rgb(76,73,71); text-align: left; overflow: hidden; } .ix-lineup .artist-profile { display: none; width: 400%; } /* --- 4th item --- */ .ix-lineup li:nth-of-type(4n) .artist-profile { margin-left: -300%; } /* --- 3rd item --- */ .ix-lineup li:nth-of-type(4n + 3) .artist-profile { margin-left: -200%; } /* --- 2nd item --- */ .ix-lineup li:nth-of-type(4n + 2) .artist-profile { margin-left: -100%; } /* --- Lineup with Filter Formats --- */ .index .ix-filter + .ix-lineup li.visible:nth-of-type(4n) .artist-profile, .index .ix-filter + .ix-lineup li.visible:nth-of-type(4n + 3) .artist-profile, .index .ix-filter + .ix-lineup li.visible:nth-of-type(4n + 2) .artist-profile { margin-left: 0; } .index .ix-filter + .ix-lineup li .artist-profile { -webkit-transition: margin 0.3s; transition: margin 0.3s; } .index .ix-filter + .ix-lineup li.visible[data-order="4"] .artist-profile { margin-left: -300%; } /* --- 3rd item --- */ .index .ix-filter + .ix-lineup li.visible[data-order="3"] .artist-profile { margin-left: -200%; } /* --- 2nd item --- */ .index .ix-filter + .ix-lineup li.visible[data-order="2"] .artist-profile { margin-left: -100%; } /* --- 1st item --- */ .index .ix-filter + .ix-lineup li.visible[data-order="1"] .artist-profile { margin-left: 0; } .open .artist-profile { position: relative; display: flex; max-height: 1000px; padding: 0; } .artist-profile.video-view { max-height: 0; padding: 0 0 150%; -webkit-transition:all 0.3s; transition:all 0.3s; } .artist-profile.video-close { -webkit-animation: resizeInfo 0.3s ease both; animation: resizeInfo 0.3s ease both; } .artist-wrapper { width: 100%; } .artist-wrapper > div { display: inline-block; box-sizing: border-box; vertical-align: top; } /* --- TEXT --- */ .artist-profile .artist-info { position: relative; width: 66.667%; min-height: 300px; padding: 0 1em 0 0; background: rgb(255,253,249); overflow: hidden; } .artist-profile h2 { margin-bottom: 0; } .artist-profile h3 { margin-top: 0; color: rgb(51,51,51); } /* --- NEXT EVENTS / IMAGE --- */ .artist-profile .next-events { width: 33.333%; margin: 0; padding: 1em; } .artist-profile .next-events * { color: rgb(76,73,71); } .artist-profile .playtimes { position: absolute; right: 0; bottom: 0; left: 66.667%; padding: 1rem; } .artist-profile .artist-img { position: absolute; top: 0; right: 0; bottom: 0; left: 66.667%; background-position: center center; background-repeat: no-repeat; background-size: cover; opacity: 0.15; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } /* --- VIDEO --- */ .artist-profile .artist-video { position: absolute; top: 0; right: 33.3%; bottom: 0; left: 0; background: rgb(0,0,0); -webkit-transform: translate(0,100%); transform: translate(0,100%); } .artist-profile .artist-video.view { -webkit-animation: openVideo 0.3s ease both; animation: openVideo 0.3s ease both; } .artist-profile .artist-video.close { -webkit-animation: closeVideo 0.3s ease both; animation: closeVideo 0.3s ease both; } .artist-profile .artist-video iframe { position:absolute; top:0; left:0; width:100%; height:100%; } /* --- ANIMATIONS --- */ @-webkit-keyframes resizeInfo { 0% { max-height: 0; padding: 0 0 150%; } 100% { max-height: 100%; padding: 0; } } @keyframes resizeInfo { 0% { max-height: 0; padding: 0 0 150%; } 100% { max-height: 100%; padding: 0; } } @-webkit-keyframes resizeInfo1280 { 0% { max-height: 0; padding: 0 0 123%; } 100% { max-height: 100%; padding: 0; } } @keyframes resizeInfo1280 { 0% { max-height: 0; padding: 0 0 123%; } 100% { max-height: 100%; padding: 0; } } @-webkit-keyframes resizeInfo800 { 0% { max-height: 0; padding: 0 0 115%; } 100% { max-height: 100%; padding: 0; } } @keyframes resizeInfo800 { 0% { max-height: 0; padding: 0 0 115%; } 100% { max-height: 100%; padding: 0; } } @-webkit-keyframes resizeInfo600 { 0% { max-height: 100%; padding: 0; } 100% { max-height: 100%; padding: 0; } } @keyframes resizeInfo600 { 0% { max-height: 100%; padding: 0; } 100% { max-height: 100%; padding: 0; } } @-webkit-keyframes openVideo { 0% { -webkit-transform: translate(0,100%); } 100% { -webkit-transform: translate(0,0); } } @keyframes openVideo { 0% { transform: translate(0,100%); } 100% { transform: translate(0,0) } } @-webkit-keyframes closeVideo { 0% { -webkit-transform: translate(0,0); } 100% { -webkit-transform: translate(0,100%); } } @keyframes closeVideo { 0% { transform: translate(0,0); } 100% { transform: translate(0,100%) } } .scootchFromRight { -webkit-animation: scootchFromRight 0.3s ease both; animation: scootchFromRight 0.3s ease both; } .scootchToLeft { -webkit-animation: scootchToLeft 0.3s ease both; animation: scootchToLeft 0.3s ease both; } .scootchToRight { -webkit-animation: scootchToRight 0.3s ease both; animation: scootchToRight 0.3s ease both; } .scootchFromLeft { -webkit-animation: scootchFromLeft 0.3s ease both; animation: scootchFromLeft 0.3s ease both; } .scaleDown { -webkit-animation: scaleDown .4s ease both; animation: scaleDown .4s ease both; } .scaleUp { -webkit-animation: scaleUp .4s ease both; animation: scaleUp .4s ease both; } .moveToLeft { -webkit-animation: moveToLeft 0.6s ease both; animation: moveToLeft 0.6s ease both; } .moveFromRight { -webkit-animation: moveFromRight 0.6s ease both; animation: moveFromRight 0.6s ease both; } .moveToRight { -webkit-animation: moveToRight 0.6s ease both; animation: moveToRight 0.6s ease both; } .moveFromLeft { -webkit-animation: moveFromLeft 0.6s ease both; animation: moveFromLeft 0.6s ease both; } .moveToBottom { -webkit-animation: moveToBottom 0.4s ease both; animation: moveToBottom 0.4s ease both; } .moveFromBottom { -webkit-animation: moveFromBottom 0.4s ease both; animation: moveFromBottom 0.4s ease both; } .fadeOut { -webkit-animation: fadeOut 0.4s ease both; animation: fadeOut 0.4s ease both; } .fadeIn { -webkit-animation: fadeIn 0.4s ease both; animation: fadeIn 0.4s ease both; } .popIn { -webkit-animation: popIn 0.4s ease both; animation: popIn 0.4s ease both; } .stayPut { -webkit-animation: stayPut 0.4s ease both; animation: stayPut 0.4s ease both; } /* --- ANIMATIONS --- */ @-webkit-keyframes scootchToLeft { 0% { -webkit-transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-25%); opacity: 0; } } @keyframes scootchToLeft { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-25%); opacity: 0; } } @-webkit-keyframes scootchFromLeft { 0% { -webkit-transform: translateX(-25%); opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @keyframes scootchFromLeft { 0% { transform: translateX(-25%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @-webkit-keyframes scootchToRight { 0% { -webkit-transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(25%); opacity: 0; } } @keyframes scootchToRight { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(25%); opacity: 0; } } @-webkit-keyframes scootchFromRight { 0% { -webkit-transform: translateX(25%); opacity: 0; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @keyframes scootchFromRight { 0% { transform: translateX(25%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @-webkit-keyframes moveToLeft { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); } } @keyframes moveToLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @-webkit-keyframes moveFromLeft { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); } } @keyframes moveFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @-webkit-keyframes moveToRight { 0% { -webkit-transform: translateX(0); } 100% { -webkit-transform: translateX(100%); } } @keyframes moveToRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @-webkit-keyframes moveFromRight { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0); } } @keyframes moveFromRight { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @-webkit-keyframes moveToBottom { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(150%); } } @keyframes moveToBottom { 0% { transform: translateY(0); } 100% { transform: translateY(150%); } } @-webkit-keyframes moveFromBottom { 0% { -webkit-transform: translateY(150%); } 100% { -webkit-transform: translateY(0); } } @keyframes moveFromBottom { 0% { transform: translateY(150%); } 100% { transform: translateY(0); } } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes fadeInText { 0% { -webkit-transform: translate3D(0,50px,0); opacity:0; } 100% { -webkit-transform: translate3D(0,0,0); opacity:1; } } @keyframes fadeInText { 0% { transform: translate3D(0,50px,0); opacity:0; } 100% { transform: translate3D(0,0,0); opacity:1; } } @-webkit-keyframes fadeOutText { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOutText { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes scaleDown { 0% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(.8); } } @keyframes scaleDown { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.8); } } @-webkit-keyframes scaleUp { 0% { opacity: 0; -webkit-transform: scale(.8); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes scaleUp { 0% { opacity: 0; transform: scale(.8); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes stayPut { 0% { opacity: 1; } 50% { opacity: 0.99; } 100% { opacity: 1; } } @keyframes stayPut { 0% { opacity: 1; } 50% { opacity: 0.99; } 100% { opacity: 1; } } @-webkit-keyframes popIn { 0% { opacity: 0; -webkit-transform: scale(0); } 40% { opacity: 0.75; -webkit-transform: scale(1.05); } 85% { opacity: 1; -webkit-transform: scale(0.95); } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0); } 40% { opacity: 0.75; transform: scale(1.05); } 85% { opacity: 1; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } /* --- STANDARDS --- */ .person { position: relative; } .person span { position: relative; display: block; box-sizing: border-box; -webkit-transition:all 0.3s; transition:all 0.3s; } .person.variant1 .ix-header { text-align: center; } .person h3 { margin: 0; } .person .ix-img { background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .person.variant1 .ix-img { position: relative; float: none; top: auto; right: auto; left: auto; width: 90%; width: calc(100% - 2em); margin: 0 0 1em 1em; border-radius: 50%; padding: 0 0 90%; padding: 0 0 calc(100% - 2em); } .person.variant2 .ix-img { position: absolute; float: none; top: 0; right: 0; left: 0; width: auto; } .person .ix-info:empty { display: none; } .person .ix-info > span { margin: 2px 0; } .person .ix-info span span, .person .ix-info span a { display: inline-block; margin-left: 1em; } .person .ix-info a { color: rgb(76,73,71); } .no-touch .person .ix-info a:hover, .no-touch .person .ix-info a:active { color: rgb(51,51,51); } .person .btn { margin: 0; padding: 1em calc(1em - 3px); text-align: left; } /* --- PERSON INFO --- */ .content > .person { position: relative; display: block; margin: 1.0716% 0; background: rgb(240,240,240); } .content > .person:after { content: ""; position: relative; display: block; width: 100%; clear: both; } .content > .person .ix-header { float: right; width: 65.9272%; padding: 2.1433% 0; } .content > .person .ix-img { float: left; width: 31.8731%; height: 0; padding: 0 0 22%; } .content > .person .ix-info { margin-left: 31.8731%; padding: 0 2.1433% 2.1433%; clear: right; } .content > .person .btn { margin: 0 2.1433% 2.1433%; } .person .btn span { display: inline-block; } /* --- PERSON IN TEASER --- */ #teaser .person .ix-header { float: right; width: auto; width: calc(100% - 50px - 3em); margin: 0 1em 1em; padding: 0; text-align: left; } #teaser .person .ix-title { font-size: 1em; } #teaser .person .ix-img { float: left; width: 50px; margin: 0 0 0 1em; padding: 0 0 50px; } #teaser .person.variant2 .ix-img { position: relative; top: auto; left: auto; } #teaser .person .ix-info { margin: 1em; padding: 0; clear: both; } #teaser .person .btn { display: block; border-radius: 0; } /* --- PERSON INDEX --- */ .index .ix-person { width: 102.1432%; margin: 0 -1.0716%; } .layout2 .ix-person, .layout3 .ix-person { width: 101.6%; margin: 0 -0.8% } .ix-person li { width: 31.22318%; margin: 1em 1.0491%; } .layout2 .ix-person li, .layout3 .ix-person li { width: 31.7471%; margin: 1em 0.7868%; } .ix-person li > a, .ix-person li > span { padding: 0; overflow: hidden; } .ix-person li .variant2 { padding-top: 66%; } .ix-person .ix-header { float: none; width: auto; padding: 1em; } .ix-person .ix-img { position: absolute; height: 0; padding: 0 0 66%; background-repeat: no-repeat; background-position: center; background-size: cover; } .ix-person .ix-desc { min-height: 60px; margin: 0; padding: 0 1em 1em; } .ix-person .btn { display: block; margin: 0; border-radius: 0; } /* --- COUNTDOWN --- */ .countdown { width: 100%; margin: 15px 0; text-align: center; } .ZMSTeaserElement .countdown { margin: 0; } /* --- LINKS --- */ .countdown.layout0 { float: left; margin-right: 2%; text-align: left; } /* --- RECHTS --- */ .countdown.layout1 { float: right; margin-left: 2%; text-align: right; } .content > .countdown.layout0, .content > .countdown.layout1 { width: 32%; margin-top: 0.33em; } .layout0 .content > .countdown.layout0, .layout1 .content > .countdown.layout0, .layout0 .content > .countdown.layout1, .layout1 .content > .countdown.layout1 { width: 49%; } .column .countdown.layout0, .column .countdown.layout1 { margin: 15px 0; } .ZMSTeaserElement .countdown.layout0, .ZMSTeaserElement .countdown.layout1 { margin: 0; text-align: center; } .countdown > div { display: block; border: 1px solid rgb(76,73,71); padding: 15px; } .column .countdown.layout0 > div, .column .countdown.layout1 > div, :not(.ZMSTeaserElement) > .countdown.layout2 > div { display: inline-block; } .countdown div > span { display: block; text-align: center; } .countdown .clock-title { font-size: 1.2em; margin-bottom: 15px; } .ZMSTeaserElement .countdown .clock-title { color: rgb(252,194,79); } .clock-timer .unit { display: inline-block; margin: 0 0 5px; vertical-align: top; font-size: 0.65em; line-height: 1.25; } .clock-timer .wrapper { display: inline-block; vertical-align: top; } .clock-timer > .unit { padding-right: 10px; } .clock-timer .unit span { display: block; font-size: 3.8em; line-height: 1; } .clock-timer .hours:after, .clock-timer .minutes:after { content: ":"; } /* --- ICONS --- */ .list-icon { padding: 0; list-style-type: none; } .list-icon.type0 { width: 100%; margin: 2em 0; } .list-icon li { padding: 0; box-sizing: border-box; } .list-icon.type0 li { display: block; width: 100%; margin: 2em 0; } /* --- ICON --- */ .list-icon li .icon-icon { position: relative; display: block; width: 50px; height: 50px; margin: 0 0 1em; border-radius: 50%; border: 2px solid rgb(252,194,79); box-sizing: border-box; font-size: 1.4em; color: rgb(252,194,79); } .list-icon.type0 .icon-icon, .list-icon .one-line .icon-icon { display: inline-block; vertical-align: top; margin: 0 1em 0 0; } .list-icon .one-line .icon-icon { vertical-align: middle; } .list-icon li .icon-icon i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* --- INFO --- */ .list-icon .icon-info { display: block; } .list-icon.type0 .icon-info, .list-icon .one-line .icon-info { display: inline-block; width: calc(100% - 65px); vertical-align: top; } .list-icon .one-line .icon-info { vertical-align: middle; } .list-icon .icon-info * { position: relative; margin: 0; } .list-icon .icon-info .icon-title + .icon-text { margin-top: 5px; } /* --- ACCORDION --- */ .js-toggle-container { max-width: 800px; margin: 1em 0; padding: 0; list-style-type: none; text-align: left; } .contentBar .bar-content.justify2 .js-toggle-container { margin: 0 auto; } .js-toggle { position: relative; margin: 1em 0; padding-left: 0; } .js-toggle:only-child { margin: 0; } .js-toggle-container[data-icon-side="right"] .js-toggle { padding-right: 0; padding-left: 0; } .layout2 .js-toggle, .layout3 .js-toggle, .overlay .js-toggle { padding-left: 0; } .layout2 .js-toggle-container[data-icon-side="right"] .js-toggle, .layout3 .js-toggle-container[data-icon-side="right"] .js-toggle, .overlay .js-toggle-container[data-icon-side="right"] .js-toggle { padding-right: 0; padding-left: 0; } .column .js-toggle { padding-left: 2rem; } .column .js-toggle-container[data-icon-side="right"] .js-toggle { padding-right: 2rem; padding-left: 0; } .js-toggle-container .js-toggle:first-child { margin-top: 0; } .js-toggle-container.bg-border .js-toggle { margin: 0.5em 0; border-bottom: 1px solid rgb(252,194,79); padding-top: 0.5em; padding-bottom: 1em; } .js-toggle-container.bg-border .js-toggle:first-child { border-top: 1px solid rgb(252,194,79); padding-top: 1em; } .js-toggle-container.bg-border .js-toggle .js-toggle:first-child { border-top: 0; } .js-toggle-container.bg-border .js-toggle .js-toggle:last-child { border-bottom: 0; } .js-toggle > .js-toggle-headline { position: relative; margin: 0; padding-left: 4rem; cursor: pointer; font-size: 1.6em; font-size: 2em; font-family: Visby Bold,Helvetica,Verdana,Arial,sans-serif; color: rgb(51,51,51); } .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline { padding: 0 4rem 0 0; } .js-toggle .js-toggle > .js-toggle-headline { font-size: 1em; } .js-toggle-container.bg-accent .js-toggle > .js-toggle-headline { padding: 1rem 1rem 1rem 4rem; background: rgb(252,194,79); color: rgb(255,253,249); } .js-toggle-container.bg-light .js-toggle > .js-toggle-headline { padding: 1rem 1rem 1rem 4rem; background: rgb(240,240,240); } .js-toggle-container.bg-accent[data-icon-side="right"] .js-toggle > .js-toggle-headline, .js-toggle-container.bg-light[data-icon-side="right"] .js-toggle > .js-toggle-headline { padding: 1rem 4rem 1rem 1rem; } .content .js-toggle > .js-toggle-headline:before { content: "+"; position: absolute; top: 4px; left: 1.5rem; -webkit-transform: scale(1.2); transform: scale(1.2); font-family: Tahoma; font-size: 1em; line-height: 1; z-index: 1; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; transform-origin: center; } .js-toggle .js-toggle > .js-toggle-headline:before { top: 2px; left: 1.6rem; } .content .js-toggle-container[data-icon-color="accent"] .js-toggle > .js-toggle-headline:before { color: rgb(252,194,79); } .content .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline:before { right: 1.5rem; left: auto; } .content .js-toggle-container[data-icon-side="right"] .js-toggle .js-toggle > .js-toggle-headline:before { right: 1.6rem; left: auto; } .content .js-toggle.open > .js-toggle-headline:before { -webkit-transform: scale(1.1) rotate(45deg) translate(1px, -1px); transform: scale(1.4) rotate(45deg) translate(1px, -1px); } .content .js-toggle-container[data-icon-side="right"] .js-toggle.open > .js-toggle-headline:before { -webkit-transform: scale(1.1) rotate(45deg) translate(1px, -1px); transform: scale(1.4) rotate(45deg) translate(1px, -1px); } .content .js-toggle .js-toggle.open > .js-toggle-headline:before { -webkit-transform: scale(1.1) rotate(45deg) translate(1px, -1px); transform: scale(1.4) rotate(45deg) translate(1px, -1px); } .content .js-toggle-container[data-icon-side="right"] .js-toggle .js-toggle.open > .js-toggle-headline:before { -webkit-transform: scale(1.1) rotate(45deg) translate(1px, -1px); transform: scale(1.4) rotate(45deg) translate(1px, -1px); } .content .column .js-toggle > .js-toggle-headline:before { left: -1rem; } .content .column .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline:before { right: -1rem; left: auto; } .content .js-toggle-container.bg-accent .js-toggle .js-toggle-headline:before { top: 1em; color: rgb(255,253,249); } .content .js-toggle-container.bg-light .js-toggle .js-toggle-headline:before { top: 1em; } .js-toggle-container.bg-accent .js-toggle .js-toggle-headline:after { content: ""; position: absolute; top: 0; right: 100%; bottom: 0; left: -10%; background: rgb(252,194,79); } .js-toggle-container.bg-light .js-toggle .js-toggle-headline:after { content: ""; position: absolute; top: 0; right: 100%; bottom: 0; left: -10%; background: rgb(240,240,240); } .js-toggle-container.bg-accent[data-icon-side="right"] .js-toggle .js-toggle-headline:after, .js-toggle-container.bg-light[data-icon-side="right"] .js-toggle .js-toggle-headline:after { right: -10%; left: 100%; } .js-toggle > .js-toggle-body { display: none; margin-top: 0; } .js-toggle .js-toggle > .js-toggle-body { max-width: 800px; padding-left: 4rem; } .js-toggle-container[data-icon-side="right"] .js-toggle .js-toggle > .js-toggle-body { padding: 0 4rem 0 0; } /* --- MODAL NOTICE --- */ .modal-notice { position: fixed; top: 50%; left: 50%; width: 96%; min-width: 250px; max-width: 1000px; max-height: 96%; border-radius: 2px; background: rgb(255,253,249); box-shadow: 0 0 15px 3px rgba(0,0,0,0.2); box-sizing: border-box; -webkit-transform: scale(0) translate(-50%, -50%); transform: scale(0) translate(-50%, -50%); transform-origin: top left; opacity: 0; overflow-y: scroll; overflow-x: hidden; z-index: -1; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; -webkit-transition: opacity 0.3s, z-index 0.01s 0.29s, -webkit-transform 0.3s; transition: opacity 0.3s, z-index 0.01s 0.29s, transform 0.3s; } .modal-notice.show { -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); opacity: 1; z-index: 50; -webkit-transition: opacity 0.3s, z-index 0.01s 0s, -webkit-transform 0.3s; transition: opacity 0.3s, z-index 0.01s 0s, transform 0.3s; } .modal-notice > div { position: relative; } /* --- SIDEBAR --- */ .sidebar { position: fixed; top: 65px; right: 0; border-radius: 2px 0 0 2px; z-index: 9; } body.hidden .sidebar, body.showForm .sidebar { display: none; } .sidebar > div { position: relative; display: block; width: 40px; border-top: 1px solid rgba(255,253,249,0.5); font-size: 1.3em; text-align: center; } .sidebar > div:first-child { border-top: 0; } .sidebar .side-icon { position: relative; display: block; width: 40px; padding: 8px 0; background: rgb(76,73,71); text-align: center; cursor: pointer; z-index: 1; color: rgb(255,253,249); -webkit-transition: all 0.3s; transition: all 0.3s; } .sidebar > div:first-child .side-icon { border-radius: 2px 0 0 0; border-top: 0; } .sidebar > div:first-child:hover .side-icon, .sidebar > div:first-child:active .side-icon { border-radius: 0; } .sidebar > div:last-child .side-icon { border-radius: 0 0 0 2px; } .sidebar > div:hover .side-icon, .sidebar > div:active .side-icon { background: rgb(252,194,79); } .sidebar .popup { position: absolute; top: 0; right: -500px; width: 400px; min-height: 100px; padding: 20px 60px 20px 20px; background: rgb(240,240,240); box-shadow: 0 0 3px rgba(0,0,0,0.1); -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 0.85em; text-align: left; overflow: hidden; } .csstransforms .sidebar .popup { right: 0; -webkit-transform: translate(150%,0); transform: translate(150%,0); } .sidebar > div:hover .popup, .sidebar > div:active .popup { right: 0; } .csstransforms .sidebar > div:hover .popup, .csstransforms .sidebar > div:active .popup { -webkit-transform: translate(0,0); transform: translate(0,0); } .popup .bg-icon { position: absolute; right: -70px; bottom: -50px; opacity: 0.3; color: rgb(224,224,224); font-size: 15em; z-index: -1; } .sidebar .popup h4 { position: relative; margin: 0 0 10px; color: rgb(76,73,71); } /* --- Styleswitcher --- */ .styleswitcher .btn-css { border-color: transparent; font-size: 0.85em; } .iSlider { position: relative; width: 100%; max-width: 1920px; min-height: 500px; height: 75vh; margin: 0 auto; background: rgb(240,240,240); } .content > .iSlider { left: 0; left: calc(-50vw + 50%); width: 100%; width: 100vw; max-width: 100vw; } .no-opacity .iSlider { height: 0; padding: 0 0 60%; } .iSlider::before { content: ""; position: absolute; top: 0; right: calc(-50vw + 50%); bottom: 0; left: calc(-50vw + 50%); background: rgb(240,240,240); } .iSlider::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(logo-white.png) center no-repeat; background-size: 250px auto; opacity: 0.5; } .iSlider .gallery-page { width: 100%; margin: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .iSlider .wrap { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; } .iSlider .wrap.active { opacity: 1; visibility: visible; z-index: 1; } .iSlider .wrap.new { opacity: 1; visibility: visible; z-index: 2; } .iSlider .gallery-item { overflow: hidden; } .iSlider .item-container { position: absolute; display: flex; top: 0; right: 0; bottom: 0; left: 0; padding-top: 65px; align-content: center; align-items: center; justify-content: center; -webkit-transition: all 0.3s; transition: all 0.3s; } body[data-header-desktop="3"] .iSlider .item-container { padding-top: 90px; } /* --- mittig (default) --- */ .iSlider .item-container[data-layout="0"] { align-items: center; } /* --- Oben --- */ .iSlider .item-container[data-layout="4"], .iSlider .item-container[data-layout="5"], .iSlider .item-container[data-layout="6"] { align-items: flex-start; } /* --- Unten --- */ .iSlider .item-container[data-layout="7"], .iSlider .item-container[data-layout="8"], .iSlider .item-container[data-layout="9"] { align-items: flex-end; } .iSlider .item-container .item-img { position: absolute; display: block; top: 0; right: 0; left: 0; bottom: 0; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .iSlider .item-container .item-img.hide { opacity: 0; -webkit-transition: none; transition: none; } .iSlider .item-container .item-img > span { position: absolute; top: 0; right: 0; left: 0; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; } .no-touch .iSlider .item-container .item-img .parascrollFull { background-attachment: fixed; } .iSlider .item-container[data-orientation="1"] .item-img > span { background-position: left top; } .iSlider .item-container[data-orientation="2"] .item-img > span { background-position: center top; } .iSlider .item-container[data-orientation="3"] .item-img > span { background-position: right top; } .iSlider .item-container[data-orientation="4"] .item-img > span { background-position: right center; } .iSlider .item-container[data-orientation="5"] .item-img > span { background-position: right bottom; } .iSlider .item-container[data-orientation="6"] .item-img > span { background-position: center bottom; } .iSlider .item-container[data-orientation="7"] .item-img > span { background-position: left bottom; } .iSlider .item-container[data-orientation="8"] .item-img > span { background-position: left center; } .iSlider .item-container .video-html5 video { position: absolute; top: 0; left: 0; width: auto; min-width: 100%; height: auto; min-height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: transparent; } /* --- CONTENT --- */ .gallery-item .item-info { position: relative; display: inline-flex; vertical-align: middle; opacity: 0; visibility: hidden; margin: 4em 0; -webkit-transform: translate(0,75px); transform: translate(0,75px); -webkit-transition: all 0.3s; transition: all 0.3s; } .gallery-page[data-scrollicon="1"] .gallery-item .item-info { margin-bottom: 100px; margin-bottom: calc(2em + 5% + 55px); } /* --- Linksbündig --- */ .iSlider .item-container[data-layout="0"] .item-info, .iSlider .item-container[data-layout="1"] .item-info, .iSlider .item-container[data-layout="4"] .item-info, .iSlider .item-container[data-layout="5"] .item-info, .iSlider .item-container[data-layout="7"] .item-info, .iSlider .item-container[data-layout="8"] .item-info { justify-content: flex-start; } /* --- Rechtsbündig --- */ .iSlider .item-container[data-layout="3"] .item-info, .iSlider .item-container[data-layout="6"] .item-info, .iSlider .item-container[data-layout="9"] .item-info { justify-content: flex-end; } /* --- Zentriert --- */ .iSlider .item-container[data-layout="2"] .item-info { justify-content: center; } .gallery-item .item-info.show { -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; visibility: visible; } .gallery-item .item-info.show.delay { -webkit-transition: all 0.3s ease-out 0.8s; transition: all 0.3s ease-out 0.8s; } .gallery-item .item-text { position: relative; display: inline-block; width: 100%; margin: 0; padding: 1em; box-sizing: border-box; color: rgb(76,73,71); text-align: left; } .gallery-item .item-container[data-layout="2"] .item-text { text-align: center; } /* --- TEXT BACKGROUND STYLES --- */ .gallery-item .item-info[data-text-background="1"][data-text-style="0"] .item-text { background: transparent; } .gallery-item .item-info[data-text-background="1"][data-text-style="1"] .item-text { background: rgba(255,253,249,0.7); } .gallery-item .item-info[data-text-background="1"][data-text-style="2"] .item-text { background: rgba(252,194,79,0.7); } .gallery-item .item-info[data-text-background="1"][data-text-style="3"] .item-text { background: transparent; } .gallery-item .item-info[data-text-background="1"][data-text-style="4"] .item-text { background: rgba(76,73,71,0.7); } .gallery-item .item-info[data-text-background="1"][data-text-style="6"] .item-text { background: transparent; } /* --- text width --- */ .iSlider .item-container[data-layout="1"] .item-text, .iSlider .item-container[data-layout="2"] .item-text, .iSlider .item-container[data-layout="3"] .item-text, .iSlider .item-container[data-layout="5"] .item-text, .iSlider .item-container[data-layout="6"] .item-text, .iSlider .item-container[data-layout="8"] .item-text, .iSlider .item-container[data-layout="9"] .item-text { max-width: 49.1817%; } .gallery-item .item-info[data-text-background="2"] h2, .gallery-item .item-info[data-text-background="2"] h3, .gallery-item .item-info[data-text-background="2"] p.item-desc { float: left; clear: both; box-decoration-break: clone; display: inline; line-height: 1.5; } .gallery-item .item-info[data-text-background="2"][data-text-style="0"] h2, .gallery-item .item-info[data-text-background="2"][data-text-style="0"] h3, .gallery-item .item-info[data-text-background="2"][data-text-style="0"] p.item-desc { background-color: transparent; box-shadow: none; } .gallery-item .item-info[data-text-background="2"][data-text-style="1"] h2, .gallery-item .item-info[data-text-background="2"][data-text-style="1"] h3, .gallery-item .item-info[data-text-background="2"][data-text-style="1"] p.item-desc { background-color: rgb(255,253,249); background-color: rgba(255,253,249,0.7); box-shadow: 0.5rem 0 0 rgba(255,253,249,0.7), -0.5rem 0 0 rgba(255,253,249,0.7); } .gallery-item .item-info[data-text-background="2"][data-text-style="2"] h2, .gallery-item .item-info[data-text-background="2"][data-text-style="2"] h3, .gallery-item .item-info[data-text-background="2"][data-text-style="2"] p.item-desc { background-color: rgb(252,194,79); background-color: rgba(252,194,79,0.7); box-shadow: 0.5rem 0 0 rgba(252,194,79,0.7), -0.5rem 0 0 rgba(252,194,79,0.7); } .gallery-item .item-info[data-text-background="2"][data-text-style="3"] h2, .gallery-item .item-info[data-text-background="2"][data-text-style="3"] h3, .gallery-item .item-info[data-text-background="2"][data-text-style="3"] p.item-desc { background-color: transparent; box-shadow: none; } .gallery-item .item-info[data-text-style="3"] h2, .gallery-item .item-info[data-text-style="3"] h3, .gallery-item .item-info[data-text-style="3"] p { color: rgb(255,253,249); } .gallery-item .item-info[data-text-background="2"][data-text-style="4"] h2, .gallery-item .item-info[data-text-background="2"][data-text-style="4"] h3, .gallery-item .item-info[data-text-background="2"][data-text-style="4"] p.item-desc { background-color: rgb(76,73,71); background-color: rgba(76,73,71,0.7); box-shadow: 0.5rem 0 0 rgba(76,73,71,0.7), -0.5rem 0 0 rgba(76,73,71,0.7); } .gallery-item .item-info[data-text-style="4"] h2, .gallery-item .item-info[data-text-style="4"] h3, .gallery-item .item-info[data-text-style="4"] p { color: rgb(255,253,249); } .gallery-item .item-info[data-text-background="2"][data-text-style="6"] h2, .gallery-item .item-info[data-text-background="2"][data-text-style="6"] h3, .gallery-item .item-info[data-text-background="2"][data-text-style="6"] p.item-desc { background-color: transparent; box-shadow: none; } .gallery-item .item-info[data-text-style="6"] h2, .gallery-item .item-info[data-text-style="6"] h3, .gallery-item .item-info[data-text-style="6"] p { color: rgb(252,194,79); } .gallery-item .item-text *:first-child { margin-top: 0; } .gallery-item .item-text *:last-child { margin-bottom: 0; } .gallery-item .item-text span { display: block; } .gallery-item .item-text h2 { font-size: 3em; font-size: 3em; font-weight: 700; margin: 0 0 0.5rem; } .gallery-item .item-text h3 { font-size: 1.8em; font-size: 1.8em; margin: 0 0 0.5rem; } .gallery-item .item-text p { margin: 0; } .gallery-item .item-text p + p { margin-top: 1em; } .gallery-item .item-text .btn, .gallery-item .item-text .btn span { display: inline-block; } /* --- HIGHLIGHT BACKGROUND --- */ /* --- NO BACKGROUND --- */ .gallery-item .item-info[data-text-background="0"][data-text-style="0"] .btn { border-color: rgb(51,51,51); background: rgba(51,51,51, 0.3); color: rgb(51,51,51); } .no-touch .gallery-item .item-info[data-text-background="0"][data-text-style="0"] .item-text:hover .btn:not(.disabled) { background: rgb(51,51,51); color: rgb(255,253,249); } /* --- FULL BACKGROUND --- */ /* --- HIGHLIGHT BACKGROUND --- */ .gallery-item .item-info[data-text-background="2"][data-text-style="1"] .btn { border-color: rgb(255,253,249); background: rgba(255,253,249, 0.7); color: rgb(51,51,51); } .no-touch .gallery-item .item-info[data-text-background="2"][data-text-style="1"] .item-text:hover .btn:not(.disabled) { background: rgb(255,253,249); color: rgb(51,51,51); } /* --- NO BACKGROUND --- */ /* --- FULL BACKGROUND --- */ /* --- HIGHLIGHT BACKGROUND --- */ .gallery-item .item-info[data-text-background="2"][data-text-style="2"] .btn { border-color: rgb(252,194,79); background: rgba(252,194,79, 0.7); color: rgb(51,51,51); } .no-touch .gallery-item .item-info[data-text-background="2"][data-text-style="2"] .item-text:hover .btn:not(.disabled) { background: rgb(252,194,79); color: rgb(51,51,51); } /* --- NO BACKGROUND --- */ /* --- FULL BACKGROUND --- */ /* --- HIGHLIGHT BACKGROUND --- */ /* --- NO BACKGROUND --- */ .gallery-item .item-info[data-text-background="0"][data-text-style="3"] .btn { border-color: rgb(255,253,249); background: rgba(255,253,249, 0.3); color: rgb(255,253,249); } .no-touch .gallery-item .item-info[data-text-background="0"][data-text-style="3"] .item-text:hover .btn:not(.disabled) { background: rgb(255,253,249); color: rgb(51,51,51); } /* --- FULL BACKGROUND --- */ /* --- HIGHLIGHT BACKGROUND --- */ .gallery-item .item-info[data-text-background="2"][data-text-style="4"] .btn { border-color: rgb(76,73,71); background: rgba(76,73,71, 0.7); color: rgb(255,253,249); } .no-touch .gallery-item .item-info[data-text-background="2"][data-text-style="4"] .item-text:hover .btn:not(.disabled) { background: rgb(76,73,71); color: rgb(255,253,249); } /* --- NO BACKGROUND --- */ /* --- FULL BACKGROUND --- */ .gallery-item .item-info[data-text-background="1"][data-text-style="4"] .btn { border-color: rgb(255,253,249); background: rgba(255,253,249, 0.7); color: rgb(76,73,71); } .no-touch .gallery-item .item-info[data-text-background="1"][data-text-style="4"] .item-text:hover .btn:not(.disabled) { background: rgb(76,73,71); color: rgb(255,253,249); } /* --- HIGHLIGHT BACKGROUND --- */ /* --- NO BACKGROUND --- */ .gallery-item .item-info[data-text-background="0"][data-text-style="6"] .btn { border-color: rgb(252,194,79); background: rgba(252,194,79, 0.3); color: rgb(252,194,79); } .no-touch .gallery-item .item-info[data-text-background="0"][data-text-style="6"] .item-text:hover .btn:not(.disabled) { background: rgb(252,194,79); color: rgb(255,253,249); } /* --- FULL BACKGROUND --- */ .gallery-item .item-info[data-text-background="2"] .btn-primary::before { display: none; } .gallery-item .item-info[data-text-background="2"] .btn { margin-top: 0.5rem; margin-left: -0.5rem; } /* --- NAV BUTTONS --- */ .iSlider .nav-arrows.prev a { text-align: right; } .iSlider .nav-arrows.next a { text-align: left; } .iSlider .nav-arrows span { color: rgb(255,253,249); } .no-touch .iSlider .nav-arrows:not(.disabled) a:not(.disabled):hover span, .no-touch .iSlider .nav-arrows:not(.disabled) a:not(.disabled):active span { color: rgb(252,194,79); } .iSlider .slidetabs { position: absolute; right: 2%; bottom: 2%; margin: 0; z-index: 5; } /* --- SCROLL ICON --- */ .scrollicon { position: absolute; bottom: 5%; left: 50%; margin: 0 0 0 -25px; border-radius: 50%; border: 2px solid rgb(255,253,249); padding: 0 10px 1px; font-size: 3rem; line-height: 1; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 2; color: rgb(255,253,249); } .no-touch .scrollicon:hover { border-color: rgb(252,194,79); color: rgb(252,194,79); } /* -- SCREEN SIZES ---------------------------------*/ @media (max-width:1440px) { .hero { height: 0; padding: 0 0 calc(23% + 65px); } #map.parascroll { height: 0; padding: 0 0 calc(23% + 65px); } .media-gallery.carousel .gallery-item { width: 22.9018%; } .layout2 .media-gallery.carousel .gallery-item, .layout3 .media-gallery.carousel .gallery-item { width: 23.4264%; } .contentBar > .media-gallery.carousel .gallery-item, .layout2 .contentBar > .media-gallery.carousel .gallery-item, .layout3 .contentBar > .media-gallery.carousel .gallery-item, .contentBar .bar-content .media-gallery.carousel .gallery-item, .layout2 .contentBar .bar-content .media-gallery.carousel .gallery-item, .layout3 .contentBar .bar-content .media-gallery.carousel .gallery-item { width: 33.333333%; margin: 0; } } @media (max-width: 1280px) { .index .ix-lineup li, .layout2 .ix-lineup li, .layout3 .ix-lineup li { width: 33.33333%; } .ix-lineup .artist-profile { width: 300%; } /* --- reset 4-wide --- */ .ix-lineup li:nth-of-type(4n) .artist-profile, .ix-lineup li:nth-of-type(4n + 3) .artist-profile, .ix-lineup li:nth-of-type(4n + 2) .artist-profile { margin-left: 0; } /* --- 3-wide --- */ /* --- 3rd item --- */ .ix-lineup li:nth-of-type(3n) .artist-profile { margin-left: -200%; } /* --- 2nd item --- */ .ix-lineup li:nth-of-type(3n + 2) .artist-profile { margin-left: -100%; } .artist-profile.video-view { padding: 0 0 123%; } .artist-profile.video-close { -webkit-animation: resizeInfo1280 0.3s ease both; animation: resizeInfo1280 0.3s ease both; } } @media (max-width: 1025px) { .layout0 .content { width: 67%; padding-right: 1%; } .layout1 .content { width: 67%; padding-left: 1%; } .right { width: 33%; padding-left: 1%; } .menu li a { padding: 0 0.5rem; font-size: 0.85em; } .col-layout { width: 103.0303%; margin: 0 -1.5151%; } .layout2 .col-layout, .layout3 .col-layout, .contentBar .col-layout, .form-modal .col-layout { width: 102%; margin: 0 -1%; } .content .conForm .col-layout { width: 100%; margin: 0; } .col-layout .column { margin: 1.4705%; } .layout2 .col-layout .column, .layout3 .col-layout .column, .contentBar .col-layout .column, .form-modal .col-layout .column { margin: 0.9803%; } .contentBar .conForm .col-layout .column { margin: 1.5151% 0; } .col-layout.type1 .column, .col-layout.type2 .column, .col-layout.type3 .column:nth-of-type(2n + 1), .col-layout.type3 .column:nth-of-type(2n), .col-layout.type4 .column:nth-of-type(2n + 1), .col-layout.type4 .column:nth-of-type(2n), .col-layout.type5 .column { width: 47.0588%; } .layout2 .col-layout.type1 .column, .layout2 .col-layout.type2 .column, .layout2 .col-layout.type3 .column:nth-of-type(2n + 1), .layout2 .col-layout.type3 .column:nth-of-type(2n), .layout2 .col-layout.type4 .column:nth-of-type(2n + 1), .layout2 .col-layout.type4 .column:nth-of-type(2n), .layout2 .col-layout.type5 .column, .layout3 .col-layout.type1 .column, .layout3 .col-layout.type2 .column, .layout3 .col-layout.type3 .column:nth-of-type(2n + 1), .layout3 .col-layout.type3 .column:nth-of-type(2n), .layout3 .col-layout.type4 .column:nth-of-type(2n + 1), .layout3 .col-layout.type4 .column:nth-of-type(2n), .layout3 .col-layout.type5 .column, .contentBar .col-layout.type1 .column, .contentBar .col-layout.type2 .column, .contentBar .col-layout.type3 .column:nth-of-type(2n + 1), .contentBar .col-layout.type3 .column:nth-of-type(2n), .contentBar .col-layout.type4 .column:nth-of-type(2n + 1), .contentBar .col-layout.type4 .column:nth-of-type(2n), .contentBar .col-layout.type5 .column, .form-modal .col-layout.type1 .column, .form-modal .col-layout.type2 .column, .form-modal .col-layout.type3 .column:nth-of-type(2n + 1), .form-modal .col-layout.type3 .column:nth-of-type(2n), .form-modal .col-layout.type4 .column:nth-of-type(2n + 1), .form-modal .col-layout.type4 .column:nth-of-type(2n), .form-modal .col-layout.type5 .column { width: 48.0392%; } .contentBar .col-layout .conForm .col-layout.type1 .column { width: 100%; } .layout0 .contentBar { left: calc(-50vw + 75.75%); } .layout1 .contentBar { left: calc(-50vw + 24.25%); } /* --- text width --- */ .contentBar .content-wrapper.position1 .bar-content, .contentBar .content-wrapper.position2 .bar-content, .contentBar .content-wrapper.position3 .bar-content, .contentBar .content-wrapper.position5 .bar-content, .contentBar .content-wrapper.position6 .bar-content, .contentBar .content-wrapper.position8 .bar-content, .contentBar .content-wrapper.position9 .bar-content { width: 40.5%; } .contentBar .container.back1[data-text-style="0"] .bar-content, .contentBar .container.back1[data-text-style="1"] .bar-content, .contentBar .container.back2[data-text-style="0"] .bar-content, .contentBar .container.back2[data-text-style="1"] .bar-content, .contentBar .container.back3[data-text-style="0"] .bar-content, .contentBar .container.back3[data-text-style="1"] .bar-content, .contentBar .container.back4[data-text-style="0"] .bar-content, .contentBar .container.back4[data-text-style="1"] .bar-content { padding: 2em; } .conForm.narrow { width: 49%; } .conForm .double1 { width: 22.7272%; margin-right: 3.0303%; padding: 0; } .form-modal .conForm .double1 { width: 30.6059%; margin-right: 4.0789%; } .conForm .double2 { width: 74.2424%; padding: 0; } .form-modal .conForm .double2 { width: 65.2908%; } .index li { margin: 1.5151% 0; } .layout2 .ix-full, .layout3 .ix-full { width: 100%; margin: 0; } .layout2 .ix-full li, .layout3 .ix-full li { width: 100%; margin: 0.5em 0; } .ix-full li > a, .ix-full li > span { padding: 0 3.0303% 40px 38.6363%; } .layout2 .ix-full li > a, .layout2 .ix-full li > span, .layout3 .ix-full li > a, .layout3 .ix-full li > span { padding: 0 1% 40px 34%; } .ix-full .ix-img { width: 35.6060%; } .layout2 .ix-full .ix-img, .layout3 .ix-full .ix-img { width: 32%; } .index .ix-bild:not(.ix-lineup) { width: 103.0303%; margin: 0 -1.5151%; } .layout2 .ix-bild:not(.ix-lineup), .layout3 .ix-bild:not(.ix-lineup) { width: 102%; margin: 0 -1%; } .index .ix-bild:not(.ix-lineup) li { width: 47.0588%; margin: 0.5em 1.4705%; } .layout2 .ix-bild:not(.ix-lineup) li, .layout3 .ix-bild:not(.ix-lineup) li { width: 48.0392%; margin: 0.5em 0.9803%; } .index .ix-title { width: 103.0303%; margin: 0 -1.5151%; } .layout2 .ix-title, .layout3 .ix-title { width: 102%; margin: 0 -1%; } .index .ix-title li { width: 47.0588%; margin: 0.5em 1.4705%; } .layout2 .ix-title li, .layout3 .ix-title li { width: 48.0392%; margin: 0.5em 0.9803%; } .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { position: relative; left: auto; width: 103.0303%; margin: 0 -1.5151%; } .layout2 .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page, .layout3 .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 102%; margin: 0 -1%; } .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 106.246%; margin: 0 -3.123%; } .layout2 .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page, .layout3 .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 104.0788%; margin: 0 -2.0394%; } .gallery-audio .gallery-item, .gallery-video .gallery-item { display: inline-block; width: 47.0588%; margin: 1.4705%; vertical-align: top; } .layout2 .gallery-audio .gallery-item, .layout3 .gallery-audio .gallery-item, .layout2 .gallery-video .gallery-item, .layout3 .gallery-video .gallery-item { display: inline-block; width: 48.0392%; margin: 0.9803%; } .gallery-thumbgrid .gallery-item { width: 22.0588%; margin: 1.4705%; } .layout2 .gallery-thumbgrid .gallery-item, .layout3 .gallery-thumbgrid .gallery-item { width: 14.7058%; margin: 0.9803%; } .col-layout .gallery-thumbgrid .gallery-item { width: 44.1133%; margin: 2.9395%; } .layout2 .col-layout .gallery-thumbgrid .gallery-item, .layout3 .col-layout .gallery-thumbgrid .gallery-item { width: 29.4074%; margin: 1.9596%; } .media-gallery.carousel .gallery-item { width: 30.39233%; margin: 1.4705%; } .layout2 .media-gallery.carousel .gallery-item, .layout3 .media-gallery.carousel .gallery-item { width: 31.37273%; margin: 0.9803%; } .contentBar > .media-gallery.carousel .gallery-item, .layout2 .contentBar > .media-gallery.carousel .gallery-item, .layout3 .contentBar > .media-gallery.carousel .gallery-item, .contentBar .bar-content .media-gallery.carousel .gallery-item, .layout2 .contentBar .bar-content .media-gallery.carousel .gallery-item, .layout3 .contentBar .bar-content .media-gallery.carousel .gallery-item { width: 50%; margin: 0; } .gallery-slideshow.left { width: 48.4848%; margin-right: 2.9411%; } .gallery-slideshow.right { width: 48.4848%; margin-left: 2.9411%; } .single-media .gallery-item { width: 48.4848%; margin: 0 2.9411% 0 0; } .single-media .gallery-page[data-layout="1"] .gal-item { margin: 0 0 0 2.9411%; } .content .single-media .gallery-page .gal-text { margin-left: 51.4259%; } .content .single-media .gallery-page[data-layout="1"] .gal-text { margin-right: 51.4259%; } .gallery-slideshow.center .gallery-item .gal-img { padding: 0 0 50%; } .media-gallery.tArrows { text-align: right; } .nav-arrows { position: relative; display: inline-block; top: auto; -webkit-transform: translate(0,0); transform: translate(0,0); } .nav-arrows.next { right: auto; margin-left: 15px; } .nav-arrows.prev { left: auto; margin-right: 15px; } h1 { font-size: 3em; } h2 { font-size: 2.4em; } h3 { font-size: 1.8em; } h4 { font-size: 1.6em; } ul, ol, layout2 .content > ul, .layout2 .content > ol { padding: 0 0 0 2.5rem; } .contentBar .bar-content > ul:not(.js-toggle-container), .contentBar .bar-content > ol { padding: 0 0 0 20.97843%; } .contentBar .bar-content > ul.list-check li:before { left: auto; right: calc(100% + 0.75rem); } .contentBar .bar-content.justify1 > ul.list-plus li:before, .contentBar .bar-content.justify2 > ul.list-plus li:before, .contentBar .bar-content.justify1 > ul.list-check li:before, .contentBar .bar-content.justify2 > ul.list-check li:before { position: relative; right: auto; } blockquote, .layout2 blockquote { margin: 2em 9.8484% 2em calc(11.3189% - 2px); padding: 0 0 0 1.4705%; } p.emphasis, .layout2 .p.emphasis { margin: 2.9411% 12.8787%; } p.pullleft { width: 35.6060%; margin: 0 2.9411% 1.4705% 0; } p.pullright { width: 35.6060%; margin: 0 0 1.4705% 2.9411%; } /* --- ZMS GRAPHIC --- */ .ZMSGraphic.floatleft { margin-right: 2.9411%; } .layout2 .ZMSGraphic.floatleft, .layout3 .ZMSGraphic.floatleft { margin-right: 2%; } .ZMSGraphic.floatright { margin-left: 2.9411%; } .layout2 .ZMSGraphic.floatright, .layout3 .ZMSGraphic.floatright { margin-left: 2%; } .ZMSGraphic.floatleft.imgwidth0, .ZMSGraphic.floatleft.imgwidth1, .ZMSGraphic.floatright.imgwidth0, .ZMSGraphic.floatright.imgwidth1, .ZMSGraphic.imgwidth0 .graphic, .ZMSGraphic.imgwidth1 .graphic, .ZMSGraphic.none.top.imgwidth0 .text, .ZMSGraphic.center.imgwidth0 .text, .ZMSGraphic.none.top.imgwidth1 .text, .ZMSGraphic.center.imgwidth1 .text { width: 48.4848%; } .layout2 .ZMSGraphic.floatleft.imgwidth0, .layout2 .ZMSGraphic.floatright.imgwidth0, .layout2 .ZMSGraphic.imgwidth0 .graphic, .layout2 .ZMSGraphic.none.top.imgwidth0 .text, .layout2 .ZMSGraphic.center.imgwidth0 .text, .layout3 .ZMSGraphic.floatleft.imgwidth0, .layout3 .ZMSGraphic.floatright.imgwidth0, .layout3 .ZMSGraphic.imgwidth0 .graphic, .layout3 .ZMSGraphic.none.top.imgwidth0 .text, .layout3 .ZMSGraphic.center.imgwidth0 .text { width: 32%; } .layout2 .ZMSGraphic.floatleft.imgwidth1, .layout2 .ZMSGraphic.floatright.imgwidth1, .layout2 .ZMSGraphic.imgwidth1 .graphic, .layout2 .ZMSGraphic.none.top.imgwidth1 .text, .layout2 .ZMSGraphic.center.imgwidth1 .text, .layout3 .ZMSGraphic.floatleft.imgwidth1, .layout3 .ZMSGraphic.floatright.imgwidth1, .layout3 .ZMSGraphic.imgwidth1 .graphic, .layout3 .ZMSGraphic.none.top.imgwidth1 .text, .layout3 .ZMSGraphic.center.imgwidth1 .text { width: 49%; } .ZMSGraphic.left .graphic, .ZMSGraphic.right .graphic { margin-right: 2.9411%; } .layout2 .ZMSGraphic.left .graphic, .layout2 .ZMSGraphic.right .graphic, .layout3 .ZMSGraphic.left .graphic, .layout3 .ZMSGraphic.right .graphic { margin-right: 2%; } /* --- ZMS TEASER --- */ #teaser { margin: 1% 0; } .layout2 #teaser, .layout3 #teaser { width: 102%; margin: 0 -1%; } .ZMSTeaserElement { margin: 6.5% 0; } .layout2 .ZMSTeaserElement, .layout3 .ZMSTeaserElement { width: 48.0392%; margin: 0.9803%; } .ZMSFile.floatleft, .ZMSLinkElement.floatleft { width: 48.4848%; margin-right: 2.9411%; } .ZMSFile.floatright, .ZMSLinkElement.floatright { width: 48.4848%; margin-left: 2.9411%; } .ZMSFile .img, .ZMSLinkElement .img { width: 22.7272%; margin: 0 2.9411% 0 0; } .content > .person { margin: 1.4705% 0; } .content > .person .ix-header { width: 48.5741%; padding: 2.9411% 0; } .content > .person .ix-img { width: 48.4848%; padding: 0 0 33%; } .content > .person .ix-info { margin-left: 48.4848%; padding: 0 2.9411% 2.9411%; } .content > .person .btn { margin: 0 2.9411% 2.9411%; } .index .ix-person { width: 103.0303%; margin: 0 -1.5151%; } .layout2 .ix-person, .layout3 .ix-person { width: 102%; margin: 0 -1%; } .ix-person li { width: 47.0588%; margin: 1em 1.4705%; } .layout2 .ix-person li, .layout3 .ix-person li { width: 48.0392%; margin: 1em 0.9803%; } .js-toggle-container { padding: 0; } .js-toggle, .layout2 .js-toggle, .layout3 .js-toggle, .overlay .js-toggle { padding-left: 0; } .js-toggle-container[data-icon-side="right"] .js-toggle, .layout2 .js-toggle-container[data-icon-side="right"] .js-toggle, .layout3 .js-toggle-container[data-icon-side="right"] .js-toggle, .overlay .js-toggle-container[data-icon-side="right"] .js-toggle { padding-left: 0; padding-right: 0; } .js-toggle > .js-toggle-headline { font-size: 1.8em; } .js-toggle > .js-toggle-headline, .js-toggle-container.bg-accent .js-toggle > .js-toggle-headline, .js-toggle-container.bg-light .js-toggle > .js-toggle-headline { padding-left: 2rem; } .js-toggle-container.bg-accent[data-icon-side="right"] .js-toggle > .js-toggle-headline, .js-toggle-container.bg-light[data-icon-side="right"] .js-toggle > .js-toggle-headline { padding-left: 0; padding-right: 2rem; } .content .js-toggle > .js-toggle-headline:before, .layout2 .content .js-toggle > .js-toggle-headline:before, .layout3 .content .js-toggle > .js-toggle-headline:before, .overlay .content .js-toggle > .js-toggle-headline:before { left: 0; } .content .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline:before, .layout2 .content .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline:before, .layout3 .content .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline:before, .overlay .content .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline:before { right: 0; left: auto; } .js-toggle-container.bg-accent .js-toggle .js-toggle-headline:after, .js-toggle-container.bg-light .js-toggle .js-toggle-headline:after { left: 0; } .quote-item { margin: 2em auto; } /* --- text width --- */ .iSlider .item-container[data-layout="1"] .item-text, .iSlider .item-container[data-layout="2"] .item-text, .iSlider .item-container[data-layout="3"] .item-text, .iSlider .item-container[data-layout="5"] .item-text, .iSlider .item-container[data-layout="6"] .item-text, .iSlider .item-container[data-layout="8"] .item-text, .iSlider .item-container[data-layout="9"] .item-text { max-width: 66%; } .gallery-item .item-text h2 { font-size: 2.6em; } .gallery-item .item-text h3 { font-size: 1.6em; } .iSlider .nav-arrows { display: none; } } @media (max-width: 800px) { .general-width { width: 92%; } body[data-header-gap="2"] .page, body[data-header-desktop="3"][data-header-gap="2"] .page { padding-top: 55px; } .page:first-child > .container:only-child { padding-top: 55px; } body[data-header-gap="2"] .page:first-child > .container:only-child, body[data-header-desktop="3"][data-header-gap="2"] .page > .container { padding-top: 0; } .layout0 .content, .layout1 .content { width: 100%; padding-right: 0; padding-left: 0; } .right { width: 100%; padding: 0; } .hero { margin-top: 55px; padding: 0 0 35%; } .page-overlay .hero { padding: 0 0 35%; } .top-header { background: rgb(255,253,249); border-bottom: 1px solid rgba(76,73,71,0.1); } /* fixed, show on scroll to page top */ body[data-header-mobile="1"] .top-header, body[data-header-mobile="2"] .top-header { position: fixed; } body[data-header-mobile="1"] .top-header.scroll-down { top: -100%; } .csstransforms body[data-header-mobile="1"] .top-header.scroll-down { top: 0; -webkit-transform: translate(0, -200%); transform: translate(0, -200%); } body[data-header-mobile="1"] .top-header.scroll-up { top: 0; } .csstransforms body[data-header-mobile="1"] .top-header.scroll-up { -webkit-transform: translate(0, 0); transform: translate(0, 0); } body.hide-header .top-header { opacity: 0; visibility: hidden; -webkit-transition: none; transition: none; } header, body[data-header-desktop="3"] .top-header header, body[data-header-desktop="3"] .top-header.scroll-shrink header { height: 55px; } .logo a, body[data-header-desktop="3"] .top-header header .logo a, body[data-header-desktop="3"] .top-header.scroll-shrink header .logo a { height: 55px; } .logo a img { max-width: 200px; } .sTrigger { display: inline-block; } .menu, .right .macronav { display: none; } .col-layout, .layout2 .col-layout, .layout3 .col-layout, .contentBar .col-layout, .form-modal .col-layout { width: 102%; margin: 0 -1%; } .col-layout .column, .layout2 .col-layout .column, .layout3 .col-layout .column, .contentBar .col-layout .column, .form-modal .col-layout .column { margin: 1%; } .col-layout.type1 .column, .col-layout.type2 .column, .col-layout.type3 .column:nth-of-type(2n + 1), .col-layout.type3 .column:nth-of-type(2n), .col-layout.type4 .column:nth-of-type(2n + 1), .col-layout.type4 .column:nth-of-type(2n), .col-layout.type5 .column, .layout2 .col-layout.type1 .column, .layout2 .col-layout.type2 .column, .layout2 .col-layout.type3 .column:nth-of-type(2n + 1), .layout2 .col-layout.type3 .column:nth-of-type(2n), .layout2 .col-layout.type4 .column:nth-of-type(2n + 1), .layout2 .col-layout.type4 .column:nth-of-type(2n), .layout2 .col-layout.type5 .column, .layout3 .col-layout.type5 .column, .layout3 .col-layout.type1 .column, .layout3 .col-layout.type2 .column, .layout3 .col-layout.type3 .column:nth-of-type(2n + 1), .layout3 .col-layout.type3 .column:nth-of-type(2n), .layout3 .col-layout.type4 .column:nth-of-type(2n + 1), .layout3 .col-layout.type4 .column:nth-of-type(2n), .layout3 .col-layout.type5 .column, .contentBar .col-layout.type1 .column, .contentBar .col-layout.type2 .column, .contentBar .col-layout.type3 .column:nth-of-type(2n + 1), .contentBar .col-layout.type3 .column:nth-of-type(2n), .contentBar .col-layout.type4 .column:nth-of-type(2n + 1), .contentBar .col-layout.type4 .column:nth-of-type(2n), .contentBar .col-layout.type5 .column, .form-modal .col-layout.type1 .column, .form-modal .col-layout.type2 .column, .form-modal .col-layout.type3 .column:nth-of-type(2n + 1), .form-modal .col-layout.type3 .column:nth-of-type(2n), .form-modal .col-layout.type4 .column:nth-of-type(2n + 1), .form-modal .col-layout.type4 .column:nth-of-type(2n), .form-modal .col-layout.type5 .column { width: 48%; } .contentBar { display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center; } .overlay-holder .contentBar { left: calc(-50vw + 50%); width: 100vw; } .layout0 .contentBar, .layout1 .contentBar { left: calc(-50vw + 50%); } *:not(.contentBar) + .contentBar { margin-top: 2em; } .contentBar + *:not(.contentBar):not(.ticket-btn-trigger) { margin-top: 2em; } .contentBar.height1 { display: block; } /* bild height */ .contentBar.height1 .background-image { height: auto; } .contentBar .background-image[data-bg-layout="2"], .contentBar .background-image[data-bg-layout="3"] { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; } .contentBar .background-image[data-bg-layout="2"] > div, .contentBar .background-image[data-bg-layout="3"] > div { position: relative; top: auto; right: auto; left: auto; width: 100%; height: 0; padding: 0 0 50%; } .contentBar .background-video { display: none; } .contentBar .offset-graphic { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 92%; text-align: center; } .contentBar .offset-graphic[data-gap="1"] { top: auto; bottom: auto; padding: 1em 0; } .contentBar .offset-graphic.img-layout0 { right: auto; } .contentBar .offset-graphic[data-gap="1"].img-layout0 { right: auto; width: 92%; } .contentBar .offset-graphic.img-layout1 { left: auto; } .contentBar .offset-graphic[data-gap="1"].img-layout1 { left: auto; width: 92%; } .contentBar[data-order="0"] .offset-graphic, .contentBar[data-order="0"] .media-gallery, .contentBar[data-order="0"] .background-map { order: 2; } .offset-graphic img, .contentBar .offset-graphic[data-orientation="0"] img, .contentBar .offset-graphic[data-orientation="1"] img, .contentBar .offset-graphic[data-orientation="2"] img, .contentBar .offset-graphic[data-orientation="3"] img, .contentBar .offset-graphic[data-orientation="4"] img { position: relative; top: auto; right: auto; bottom: auto; left: auto; -webkit-transform: none; transform: none; } /* --- MAP IN FIRST LEVEL --- */ .contentBar .background-map { position: relative; top: auto; right: auto; left: auto; width: 100%; height: auto; } .contentBar .background-map[data-bg-layout="0"], .contentBar .background-map[data-bg-layout="1"], .contentBar.height1 .background-map, .contentBar.height0 .background-map:only-child { height: auto; } .contentBar .background-map[data-bg-layout="2"], .contentBar .background-map[data-bg-layout="3"] { width: 100%; } .contentBar .background-map #map { height: 300px; } .contentBar.height2 *:not(.background-image) + .content-wrapper:before, .contentBar.height3 *:not(.background-image) + .content-wrapper:before, .contentBar.height4 *:not(.background-image) + .content-wrapper:before, .contentBar.height5 *:not(.background-image) + .content-wrapper:before { height: auto; } .contentBar .container { display: block; padding: 2em 0; } /* --- text width --- */ .contentBar .content-wrapper.position1 .bar-content, .contentBar .content-wrapper.position2 .bar-content, .contentBar .content-wrapper.position3 .bar-content, .contentBar .content-wrapper.position5 .bar-content, .contentBar .content-wrapper.position6 .bar-content, .contentBar .content-wrapper.position8 .bar-content, .contentBar .content-wrapper.position9 .bar-content, .contentBar .content-wrapper.position1 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position2 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position3 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position5 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position6 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position8 .container[data-text-style="1"] .bar-content, .contentBar .content-wrapper.position9 .container[data-text-style="1"] .bar-content { width: 100%; } /* --- text padding --- */ .contentBar .container[data-text-style="0"] .bar-content { padding: 2em 0; } .contentBar .container[data-text-style="1"] .bar-content, .contentBar .container.back1[data-text-style="0"] .bar-content, .contentBar .container.back1[data-text-style="1"] .bar-content, .contentBar .container.back2[data-text-style="0"] .bar-content, .contentBar .container.back2[data-text-style="1"] .bar-content, .contentBar .container.back3[data-text-style="0"] .bar-content, .contentBar .container.back3[data-text-style="1"] .bar-content, .contentBar .container.back4[data-text-style="0"] .bar-content, .contentBar .container.back4[data-text-style="1"] .bar-content { padding: 2em 4%; } /* --- text background - full container height --- */ .contentBar .content-wrapper.position3 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position6 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position9 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position2 .container[data-text-style="1"] .bar-content:before { left: 0; } .contentBar .content-wrapper.position1 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position2 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position3 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position5 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position6 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position8 .container[data-text-style="1"] .bar-content:before, .contentBar .content-wrapper.position9 .container[data-text-style="1"] .bar-content:before { width: 100%; } .conForm.narrow { width: 100%; } .conForm .double1 { width: 23.5%; margin-right: 2%; padding: 0; } .form-modal .conForm .double1 { width: 100%; margin-right: 0; padding: 0 0 15px; } .conForm .double2 { width: 74.5%; padding: 0; } .form-modal .conForm .double2 { width: 100%; } #map { height: 300px; } #map.parascroll { height: 0; padding: 0 0 calc(35% + 55px); } .index li { margin: 1% 0; } .index .ix-full, .index .ix-bild:not(.ix-lineup), .layout2 .ix-full, .layout2 .ix-bild:not(.ix-lineup), .layout3 .ix-full, .layout3 .ix-bild:not(.ix-lineup) { display: flex; flex-wrap: wrap; width: 102%; margin: 0 -1%; } .index .ix-full li, .index .ix-bild:not(.ix-lineup) li, .layout2 .ix-full li, .layout2 .ix-bild:not(.ix-lineup) li, .layout3 .ix-full li, .layout3 .ix-bild:not(.ix-lineup) li { display: inline-flex; width: 48%; margin: 0.5em 1%; } .ix-full li > a, .ix-full li > span, .layout2 .ix-full li > a, .layout2 .ix-full li > span, .layout3 .ix-full li > a, .layout3 .ix-full li > span, .ix-bild:not(.ix-lineup) li > a, .ix-bild:not(.ix-lineup) li > span { padding: 0 0 40px; background: rgb(240,240,240); color: rgb(76,73,71); } .no-touch .ix-bild:not(.ix-lineup) li > a:hover, .no-touch .ix-bild:not(.ix-lineup) li > a:active { background: rgb(240,240,240); } .ix-full .ix-header { padding: calc(50% + 1em) 1em 1em; } .ix-full .ix-img, .layout2 .ix-full .ix-img, .layout3 .ix-full .ix-img { right: 0; bottom: auto; width: auto; padding: 0 0 50%; } .ix-full .ix-desc, .layout2 .ix-full .ix-desc, .layout3 .ix-full .ix-desc { padding: 0 1em 1em; } .ix-bild:not(.ix-lineup) .ix-header { position: relative; top: auto; right: auto; left: auto; padding: calc(50% + 1em) 1em 1em; background: transparent; } .ix-bild:not(.ix-lineup) h3, .ix-bild:not(.ix-lineup) .ix-subtitle { color: rgb(51,51,51); } .ix-bild:not(.ix-lineup) .ix-img { bottom: auto; height: 0; padding: 0 0 50%; -webkit-transform: none; transform: none; } .no-touch .ix-bild:not(.ix-lineup) a:hover .ix-img, .no-touch .ix-bild:not(.ix-lineup) a:active .ix-img { opacity: 1; } .ix-bild:not(.ix-lineup) .ix-desc { position: static; right: auto; bottom: auto; left: auto; padding: 0 1em 1em; background: transparent; color: rgb(76,73,71); text-align: left; } .csstransforms .ix-bild:not(.ix-lineup) .ix-desc, .csstransforms.no-touch .ix-bild:not(.ix-lineup) a:hover .ix-desc, .csstransforms.no-touch .ix-bild:not(.ix-lineup) a:active .ix-desc { bottom: auto; -webkit-transform: none; transform: none; } .no-touch .ix-bild:not(.ix-lineup) a:hover .ix-desc, .no-touch .ix-bild:not(.ix-lineup) a:active .ix-desc { bottom: auto; } .ix-bild:not(.ix-lineup) .ix-more { position: absolute; bottom: 0; right: 0; padding: 0 1em 1em; color: rgb(76,73,71); } .no-touch .ix-bild:not(.ix-lineup) a:hover .ix-more, .no-touch .ix-bild:not(.ix-lineup) a:active .ix-more { color: rgb(51,51,51); } .index .ix-tickets { width: 108%; margin: 0 -4%; } .ix-tickets li li > a, .ix-tickets li li > span { padding: 0.5rem 4%; } .index .ix-lineup li, .layout2 .ix-lineup li, .layout3 .ix-lineup li { width: 50%; } /* --- FILTER --- */ .index .ix-filter { top: 0; margin: 0 0 1rem; } .top-header.scroll-up + .middle .index .ix-filter { top: 55px; } .overlay:before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 50px; background-color: rgba(0,0,0, 0.6); z-index: 4; } .overlay .pageoverlay-item { top: 50px; bottom: 0; width: auto; border-radius: 0; } .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { position: relative; width: 102%; margin: 0 -1%; } .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page, .layout2 .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page, .layout3 .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 104.1666%; margin: 0 -2.0833%; } .contentBar > .gallery-slideshow:not(:only-child) .wrap.active { position: relative; top: auto; right: auto; bottom: auto; left: auto; } .contentBar > .gallery-slideshow:not(:only-child) .gallery-item { position: relative; } .gallery-audio .gallery-item, .gallery-video .gallery-item, .layout2 .gallery-audio .gallery-item, .layout3 .gallery-audio .gallery-item, .layout2 .gallery-video .gallery-item, .layout3 .gallery-video .gallery-item { width: 48%; margin: 2% 1%; } .gallery-thumbgrid .gallery-item, .layout2 .gallery-thumbgrid .gallery-item, .layout3 .gallery-thumbgrid .gallery-item { width: 23%; margin: 1%; } .col-layout .gallery-thumbgrid .gallery-item, .layout2 .col-layout .gallery-thumbgrid .gallery-item, .layout3 .col-layout .gallery-thumbgrid .gallery-item { width: 46.0786%; margin: 1.9575%; } .gallery-slideshow.left { width: 49%; margin-right: 2%; } .gallery-slideshow.right { width: 49%; margin-left: 2%; } .contentBar > .gallery-slideshow:not(:only-child) { position: relative; top: auto; bottom: auto; margin: 0; } .contentBar > .gallery-slideshow:not(:only-child).left, .contentBar > .gallery-slideshow:not(:only-child).right, .contentBar > .gallery-slideshow:not(:only-child).center { left: auto; right: auto; width: 100%; } .contentBar > .single-media { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; } .single-media .gallery-item { width: 100%; } .single-media .gallery-page[data-layout="0"] .gallery-item, .single-media .gallery-page[data-layout="1"] .gallery-item { margin: 0; } .contentBar > .single-media .gallery-item, .contentBar > .single-media .gallery-page[data-layout="0"] .gallery-item, .contentBar > .single-media .gallery-page[data-layout="1"] .gallery-item, .contentBar > .single-media .gallery-page[data-layout="2"] .gallery-item { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; } .content .single-media .gallery-page .gal-text { margin-left: 51%; } .content .single-media .gallery-page[data-layout="1"] .gal-text { margin-right: 51%; } .contentBar > .gallery-slideshow .gallery-item .gal-img { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: 0; padding: 0 0 66%; } .contentBar > .single-media .gallery-item .gal-img, .contentBar > .single-media .gallery-item .video-container { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: 0; padding: 0 0 56.25%; } /* --- GALLERY THUMBGRID ARROWS --- */ .overlay .nav { top: 0; border-radius: 0; -webkit-transform: translate(0,0); transform: translate(0,0); } .overlay .nav.prev { left: 0; } .overlay .nav.next { right: auto; left: 52px; -webkit-transform: translate(0,0); transform: translate(0,0); } .contentBar > .gallery-slideshow:not(:only-child) .slidetabs { position: relative; right: auto; bottom: auto; left: auto; margin: 1em auto; } .indextabs { top: 25px; } .indextabs a { margin: 0 3px; } .indextabs a span { width: 5px; height: 5px; } h1, h2, h3, h4 { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } h1 { font-size: 2.6em; } h2 { font-size: 2em; } h3 { font-size: 1.6em; } h4 { font-size: 1.4em; } .contentBar .bar-content > ul:not(.js-toggle-container), .contentBar .bar-content > ol { padding: 0 0 0 2.5rem; } .content > *:first-child:not(.contentBar) { margin-top: 2rem; } .content > *:last-child:not(.contentBar):not(.ticket-btn) { margin-bottom: 2rem; } .hero + .container .content > .hgroup + *:not(.contentBar) { margin-top: 2rem; } .hero + .container .content > .hgroup + .ZMSGraphic.floatleft + *, .hero + .container .content > .hgroup + .ZMSGraphic.floatright + * { margin-top: 2rem; } blockquote { margin: 1rem 0; padding: 0 0 0 1rem; } p.emphasis { margin: 1rem 0; } p.pullleft { float: none; width: 100%; margin: 1rem 0; } p.pullright { float: none; width: 100%; margin: 1rem 0; } /* --- ZMS GRAPHIC --- */ .ZMSGraphic.floatleft { margin-right: 2%; } .ZMSGraphic.floatright { margin-left: 2%; } .ZMSGraphic.floatleft.imgwidth0, .ZMSGraphic.floatleft.imgwidth1, .ZMSGraphic.floatright.imgwidth0, .ZMSGraphic.floatright.imgwidth1, .ZMSGraphic.imgwidth0 .graphic, .ZMSGraphic.imgwidth1 .graphic, .ZMSGraphic.none.top.imgwidth0 .text, .ZMSGraphic.center.imgwidth0 .text, .ZMSGraphic.none.top.imgwidth1 .text, .ZMSGraphic.center.imgwidth1 .text { width: 49%; } .layout2 .ZMSGraphic.floatleft.imgwidth0, .layout2 .ZMSGraphic.floatright.imgwidth0, .layout2 .ZMSGraphic.imgwidth0 .graphic, .layout2 .ZMSGraphic.none.top.imgwidth0 .text, .layout2 .ZMSGraphic.center.imgwidth0 .text, .layout3 .ZMSGraphic.floatleft.imgwidth0, .layout3 .ZMSGraphic.floatright.imgwidth0, .layout3 .ZMSGraphic.imgwidth0 .graphic, .layout3 .ZMSGraphic.none.top.imgwidth0 .text, .layout3 .ZMSGraphic.center.imgwidth0 .text { width: 49%; } .ZMSGraphic.left .graphic, .ZMSGraphic.right .graphic { margin-right: 2%; } /* --- ZMS TEASER --- */ #teaser, .layout2 #teaser, .layout3 #teaser { width: 102%; margin: 1% -1%; border-top: 1px solid rgba(76,73,71,0.3); padding-top: 1%; } .ZMSTeaserElement, .layout2 .ZMSTeaserElement, .layout3 .ZMSTeaserElement { display: inline-block; width: 48%; margin: 1%; vertical-align: top; } .ZMSFile.floatleft, .ZMSLinkElement.floatleft { width: 49%; margin-right: 2%; } .ZMSFile.floatright, .ZMSLinkElement.floatright { width: 49%; margin-left: 2%; } .ZMSFile .img, .ZMSLinkElement .img { width: 23.5%; margin: 0 2% 0 0; } .ix-lineup .artist-profile { width: 200%; } /* --- reset 4-wide --- */ .ix-lineup li:nth-of-type(3n) .artist-profile, .ix-lineup li:nth-of-type(3n + 2) .artist-profile { margin-left: 0; } /* --- 2-wide --- */ /* --- 2nd item --- */ .ix-lineup li:nth-of-type(2n) .artist-profile { margin-left: -100%; } .artist-profile .artist-info { width: 100%; padding: 0; } .artist-profile .next-events { position: relative; width: 100%; height: 0; padding: 0 1rem 50%; } .artist-profile .playtimes { left: 0; } .artist-profile .artist-img { left: 0; } .artist-profile .artist-video { right: 0; } .artist-profile.video-view { padding: 0 0 115%; } .artist-profile.video-close { -webkit-animation: resizeInfo800 0.3s ease both; animation: resizeInfo800 0.3s ease both; } .artist-profile.video-view button.close-artist { display: none; } .content > .person { margin: 1% 0; } .content > .person .ix-header { width: 49%; padding: 2% 0; } .content > .person .ix-img { width: 49%; } .content > .person .ix-info { margin-left: 49%; padding: 0 2% 2%; } .content > .person .btn { margin: 0 2% 2%; } .index .ix-person, .layout2 .ix-person, .layout3 .ix-person { width: 102%; margin: 0 -1%; } .ix-person li, .layout2 .ix-person li, .layout3 .ix-person li { width: 48%; margin: 1em 1%; } .content > .countdown.layout0, .content > .countdown.layout1 { width: 49%; } .js-toggle > .js-toggle-headline { font-size: 1.4em; font-size: 1.6em; } .js-toggle .js-toggle > .js-toggle-headline { font-size: 1em; } .overlay .ticket-btn { bottom: 0; width: auto; padding: 0; } .overlay .ticket-btn .btn { border-radius: 0; border-color: rgb(76,73,71); background: rgb(76,73,71); } .ticket-btn-trigger { margin-bottom: 2.5rem; } .quote-item { margin: 1rem 0; } .labeled-icon { top: 0; right: 0; border-radius: 0; -webkit-transform: translate(0,0); transform: translate(0,0); } .iSlider { min-height: 0; height: 100vh; } .iSlider:not([data-slide-length="1"]) { height: calc(100vh - 50px); margin-bottom: 50px; } body[data-header-gap="2"] .iSlider { height: calc(100vh - 55px); } body[data-header-gap="2"] .iSlider:not([data-slide-length="1"]) { height: calc(100vh - 105px); } .iSlider:before { right: 0; left: 0; } .iSlider:after { background-size: 150px auto; } .iSlider[data-slide-layout="1"] .item-container { padding-top: 0; flex-direction: column; justify-content: space-between; align-content: center; align-items: center; } body[data-header-desktop="3"] .iSlider .item-container { padding-top: 0; } .iSlider[data-slide-layout="1"] .item-container .item-img { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: 100%; flex-grow: 1; } .iSlider[data-slide-layout="1"] .item-info { display: block; width: 100%; max-height: 60%; margin: 0; padding: 0; -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; visibility: visible; flex-grow: 0; } .iSlider[data-slide-layout="2"] .item-info { position: absolute; display: block; bottom: 0; left: 0; width: 100%; margin: 0; padding: 0; } .iSlider[data-slide-layout="2"][data-slide-length="1"] .item-info { bottom: 50px; } .gallery-page[data-scrollicon="1"] .gallery-item .item-info { margin: 0; } .gallery-item .item-text { display: block; width: 100%; padding: 4%; } .iSlider[data-slide-layout="1"] .gallery-item .item-info[data-text-style="3"] .item-text { background: rgba(76,73,71,0.7); } /* --- text width --- */ .iSlider .item-container[data-layout="1"] .item-text, .iSlider .item-container[data-layout="2"] .item-text, .iSlider .item-container[data-layout="3"] .item-text, .iSlider .item-container[data-layout="5"] .item-text, .iSlider .item-container[data-layout="6"] .item-text, .iSlider .item-container[data-layout="8"] .item-text, .iSlider .item-container[data-layout="9"] .item-text { max-width: 100%; } .gallery-item .item-text h2 { font-size: 2em; margin: 0 0 0.5rem; } .gallery-item .item-text h3 { font-size: 1.4em; } .iSlider .slidetabs { top: 100%; right: 0; bottom: auto; left: 0; text-align: center; } .iSlider .slidetabs a { margin: 0; padding: 10px 5px; } .iSlider .slidetabs a span { width: 20px; height: 20px; } .scrollicon { display: none; } } @media (max-width: 600px) { .hero { padding: 0 0 50%; } footer section > a, footer nav > a, footer section > span, footer nav > span { display: block; margin: 0.5rem 0; padding: 0.5rem; } .social a { display: inline-block; padding: 0.5rem 1rem; } .col-layout, .layout2 .col-layout, .layout3 .col-layout, .contentBar .col-layout, .form-modal .col-layout { width: 100%; margin: 0; } .col-layout .column, .layout2 .col-layout .column, .layout3 .col-layout .column, .contentBar .col-layout .column, .form-modal .col-layout .column { width: 100% !important; margin: 1em 0; } .contentBar .background-map #map { height: 200px; } .contentBar .container { padding: 1em 0 2em; } .conForm .double1, .conForm .double2 { width: 100%; padding: 0 0 1rem; } .conform .double1 + .double2, .conform .double2 + .double1 { margin-left: 0; } #map { height: 200px; } #map.parascroll { padding: 0 0 calc(50% + 55px); } .index .ix-full, .index .ix-bild:not(.ix-lineup), .layout2 .ix-text, .layout2 .ix-full, .layout2 .ix-bild:not(.ix-lineup), .layout3 .ix-text, .layout3 .ix-full, .layout3 .ix-bild:not(.ix-lineup) { display: block; width: 100%; margin: 0; } .index .ix-full li, .index .ix-bild:not(.ix-lineup) li, .layout2 .ix-text li, .layout2 .ix-full li, .layout2 .ix-bild:not(.ix-lineup) li, .layout3 .ix-text li, .layout3 .ix-full li, .layout3 .ix-bild:not(.ix-lineup) li { display: inline-block; width: 100%; margin: 1% 0; } .index .ix-full, .index .ix-title { display: block; width: 100%; margin: 0; } .index .ix-full li, .index .ix-title li { display: inline-block; width: 100%; margin: 1% 0; } .index .ix-lineup li, .layout2 .ix-lineup li, .layout3 .ix-lineup li { display: inline-block; width: auto; margin: 0.25em 0; } .ix-lineup li > a, .ix-lineup li > span { width: auto; padding: 0; background: transparent; color: rgb(51,51,51); } .no-touch .ix-lineup li > a:hover, .no-touch .ix-lineup li > a:active { background: transparent; } .ix-lineup li > a:after { display: none; } .ix-lineup .ix-header { position: relative; top: auto; right: auto; left: auto; padding: 0; color: rgb(51,51,51); } .ix-lineup h3 { display: inline-block; color: rgb(51,51,51); } .ix-lineup .ix-header h3:after { content: "/"; margin: 0 0.5rem; font-family: Roboto Condensed; font-family: 300; } .ix-lineup li:last-child .ix-header h3:after { display: none; } .ix-lineup .ix-subtitle { display: none; } .ix-lineup .ix-img, .ix-lineup .ix-desc { display: none; } .ix-tickets .ix-item { display: block; } .ix-tickets ul .ix-header { display: block; padding: 0; } .ix-tickets ul .ix-header.show-graph { padding: 0.5rem 3rem 0.5rem 0; } .ix-tickets .ix-desc { display: block; padding: 0; } .ix-tickets .tix-sold { top: 0.5rem; right: 0; } /* --- FILTER --- */ .index .ix-filter > div + div { margin: 0 0 0 1rem; } .media-gallery.gallery-audio .gallery-page, .media-gallery.gallery-video .gallery-page, .media-gallery.gallery-slideshow .gallery-page, .layout2 .media-gallery.gallery-audio .gallery-page, .layout3 .media-gallery.gallery-audio .gallery-page, .layout2 .media-gallery.gallery-video .gallery-page, .layout3 .media-gallery.gallery-video .gallery-page, .layout2 .media-gallery.gallery-slideshow .gallery-page, .layout3 .media-gallery.gallery-slideshow .gallery-page { width: 100%; margin: 1% 0; } .contentBar > .media-gallery.gallery-slideshow .gallery-page { margin: 0; } .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page, .layout2 .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page, .layout3 .col-layout .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 102%; margin: 0 -1%; } .gallery-thumbgrid .gallery-item, .layout2 .gallery-thumbgrid .gallery-item, .layout3 .gallery-thumbgrid .gallery-item, .col-layout .gallery-thumbgrid .gallery-item, .layout2 .col-layout .gallery-thumbgrid .gallery-item, .layout3 .col-layout .gallery-thumbgrid .gallery-item { width: 31.3333%; margin: 1%; } .media-gallery.carousel .gallery-item, .layout2 .media-gallery.carousel .gallery-item, .layout3 .media-gallery.carousel .gallery-item { width: 48%; margin: 1%; } .contentBar > .media-gallery.carousel .gallery-item, .layout2 .contentBar > .media-gallery.carousel .gallery-item, .layout3 .contentBar > .media-gallery.carousel .gallery-item, .contentBar .bar-content .media-gallery.carousel .gallery-item, .layout2 .contentBar .bar-content .media-gallery.carousel .gallery-item, .layout3 .contentBar .bar-content .media-gallery.carousel .gallery-item { width: 100%; margin: 0; } .gallery-audio .gallery-item, .gallery-video .gallery-item, .layout2 .gallery-audio .gallery-item, .layout3 .gallery-audio .gallery-item, .layout2 .gallery-video .gallery-item, .layout3 .gallery-video .gallery-item { width: 100%; padding: 2% 0; } .gallery-slideshow.left { float: none; width: 100%; margin-right: 0; } .gallery-slideshow.right { float: none; width: 100%; margin-left: 0; } .gallery-slideshow.center .gallery-item .gal-img { padding: 0 0 66%; } .single-media .gallery-item, .single-media .gallery-page[data-layout="1"] .gallery-item { float: none; width: 100%; margin: 0; } .single-media .gallery-page .gal-text, .content .single-media .gallery-page .gal-text { margin: 1em 0 0; } .content .single-media .gallery-page[data-layout="1"] .gal-text { margin-right: 0; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } /* --- ZMS GRAPHIC --- */ .layout2 .ZMSGraphic.floatleft, .layout3 .ZMSGraphic.floatleft { margin-right: 0; } .layout2 .ZMSGraphic.floatright, .layout3 .ZMSGraphic.floatright { margin-left: 0; } .ZMSGraphic.floatleft.imgwidth, .ZMSGraphic.floatleft.imgwidth0, .ZMSGraphic.floatleft.imgwidth1, .ZMSGraphic.floatleft.imgwidth2, .ZMSGraphic.floatright.imgwidth, .ZMSGraphic.floatright.imgwidth0, .ZMSGraphic.floatright.imgwidth1, .ZMSGraphic.floatright.imgwidth2 { float: none; width: 100%; margin: 1em 0; } .layout2 .ZMSGraphic.floatleft.imgwidth0, .layout2 .ZMSGraphic.floatleft.imgwidth1, .layout2 .ZMSGraphic.floatright.imgwidth0, .layout2 .ZMSGraphic.floatright.imgwidth1, .layout2 .ZMSGraphic.imgwidth0 .graphic, .layout2 .ZMSGraphic.imgwidth1 .graphic, .layout2 .ZMSGraphic.none.top.imgwidth0 .text, .layout2 .ZMSGraphic.center.imgwidth0 .text, .layout2 .ZMSGraphic.none.top.imgwidth1 .text, .layout2 .ZMSGraphic.center.imgwidth1 .text, .layout3 .ZMSGraphic.floatleft.imgwidth0, .layout3 .ZMSGraphic.floatleft.imgwidth1, .layout3 .ZMSGraphic.floatright.imgwidth0, .layout3 .ZMSGraphic.floatright.imgwidth1, .layout3 .ZMSGraphic.imgwidth0 .graphic, .layout3 .ZMSGraphic.imgwidth1 .graphic, .layout3 .ZMSGraphic.none.top.imgwidth0 .text, .layout3 .ZMSGraphic.center.imgwidth0 .text, .layout3 .ZMSGraphic.none.top.imgwidth1 .text, .layout3 .ZMSGraphic.center.imgwidth1 .text { width: 100%; } .ZMSGraphic.imgwidth .graphic, .ZMSGraphic.imgwidth0 .graphic, .ZMSGraphic.imgwidth1 .graphic { width: 100%; } .ZMSGraphic.left .graphic, .ZMSGraphic.right .graphic { float: none; margin-right: 0; } .layout2 .ZMSGraphic.left .graphic, .layout2 .ZMSGraphic.right .graphic, .layout3 .ZMSGraphic.left .graphic, .layout3 .ZMSGraphic.right .graphic { margin-right: 0; } .ZMSGraphic.none.top.imgwidth .text, .ZMSGraphic.none.top.imgwidth0 .text, .ZMSGraphic.none.top.imgwidth1 .text, .ZMSGraphic.center.imgwidth .text, .ZMSGraphic.center.imgwidth0 .text, .ZMSGraphic.center.imgwidth1 .text { width: 100%; } /* --- TEASER --- */ #teaser, .layout2 #teaser, .layout3 #teaser { width: 100%; margin: 1% 0; } .ZMSTeaserElement, .layout2 .ZMSTeaserElement, .layout3 .ZMSTeaserElement { display: block; width: 100%; margin: 1% 0; } .ZMSFile.floatleft, .ZMSLinkElement.floatleft { float: none; width: 100%; margin-right: 0; } .ZMSFile.floatright, .ZMSLinkElement.floatright { float: none; width: 100%; margin-left: 0; } .ZMSFile .img, .ZMSLinkElement .img { width: 32%; margin: 0 2% 0 0; } .ix-lineup .artist-profile, .open .artist-profile { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: auto; max-height: 100%; margin: 0; background: rgb(252,194,79); z-index: 20; } .top-header.scroll-down + .middle .ix-lineup .artist-profile, .top-header.scroll-down + .middle .open .artist-profile { top: 0; } .top-header.scroll-down.scroll-up + .middle .ix-lineup .artist-profile, .top-header.scroll-down.scroll-up + .middle .open .artist-profile { top: 55px; } .artist-profile .artist-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* --- reset 2-wide --- */ /* --- 2nd item --- */ .ix-lineup li:nth-of-type(2n) .artist-profile { margin-left: 0; } .artist-profile .artist-info { padding: 0 2%; } .artist-profile.video-view { padding: 0 0 123%; } .artist-profile.video-close { -webkit-animation: resizeInfo1280 0.3s ease both; animation: resizeInfo1280 0.3s ease both; } .artist-profile .artist-video { position: fixed; top: 55px; } .top-header.scroll-down + .middle .ix-lineup .artist-profile .artist-video, .top-header.scroll-down + .middle .open .artist-profile .artist-video { top: 0; } .top-header.scroll-down.scroll-up + .middle .ix-lineup .artist-profile .artist-video, .top-header.scroll-down.scroll-up + .middle .open .artist-profile .artist-video { top: 55px; } .person .btn { padding: 2%; padding: 2% calc(2% - 3px); } .content > .person { margin: 2% 0; } .content > .person .ix-header { width: 66%; padding: 2% 0; } .content > .person .ix-img { width: 32%; margin-bottom: 2%; } .content > .person .ix-info { margin-left: 32%; padding: 0 2% 2%; } .content > .person .btn { display: block; margin: 0; border-radius: 0; clear: both; } .index .ix-person, .layout2 .ix-person, .layout3 .ix-person { width: 100%; margin: 0; } .ix-person li, .layout2 .ix-person li, .layout3 .ix-person li { width: 100%; margin: 1em 0; } .ix-person li .variant2 { padding-top: 0; } .ix-person .person .ix-header { float: right; width: 66%; padding: 2% 0; text-align: left; } .ix-person .variant1 .ix-img { float: left; width: 30%; margin: 2% 0 2% 2%; padding: 0 0 30%; } .ix-person .variant2 .ix-img { position: relative; float: left; top: auto; right: auto; left: auto; width: 32%; margin: 0 0 2%; padding: 0 0 32%; } .ix-person .ix-desc { margin-left: 32%; padding: 0 2% 2%; clear: right; } .ix-person .btn { display: block; margin: 0; clear: both; } .column .countdown.layout0, .column .countdown.layout1 { float: none; text-align: center; } .content > .countdown.layout0, .layout0 .content > .countdown.layout0, .layout1 .content > .countdown.layout0 { width: 100%; margin: 15px 0; } .content > .countdown.layout1, .layout0 .content > .countdown.layout1, .layout1 .content > .countdown.layout1 { width: 100%; margin: 15px 0; } .column .countdown.layout0 > div, .column .countdown.layout1 > div, :not(.ZMSTeaserElement) > .countdown.layout2 > div { display: block; } .js-toggle > .js-toggle-headline { font-size: 1.2em; font-size: 1.4em; } .gallery-item .item-text h2 { font-size: 1.4em; } .gallery-item .item-text h3 { font-size: 1em; } } @media (max-width: 400px) { .btn { width: 100%; margin-right: 0; } .contentBar .bar-content.justify2 .btn { margin-right: 0; margin-left: 0; } .contentBar .background-image[data-bg-layout="2"] > div, .contentBar .background-image[data-bg-layout="3"] > div { padding: 0 0 66%; } .index .ix-filter { margin: 1rem 0; } .index .ix-filter > div { margin: 1rem 0; } .index .filter-select { width: 110px; } .index .filter-select::after { font-size: 1em; } .ZMSFile .img, .ZMSLinkElement .img { float: none; width: 100%; margin: 0; } .ZMSFile .img > span, .ZMSLinkElement .img > span { font-size: 2.5em; } .ZMSFile.file-img .text, .ZMSLinkElement.file-img .text { margin: 5px 0 0; } .content > .person .ix-header { width: 74.5%; } .content > .person .ix-img { width: 23.5%; } .content > .person .ix-info { display: block; margin-left: 0%; clear: both; } .ix-person .person .ix-header { width: 74.5%; } .ix-person .variant1 .ix-img { width: 21.5%; padding: 0 0 21.5%; } .ix-person .variant2 .ix-img { width: 23.5%; padding: 0 0 23.5%; } .ix-person .ix-desc { display: block; margin-left: 0; clear: both; } } /*!-------------------------------------------------------------------- STYLES "Outdated Browser" Version: 1.0.1 - 2014 author: Burocratik website: //www.burocratik.com * @preserve -----------------------------------------------------------------------*/ #outdated { position: fixed; display: none; top: 0; left: 0; width: 100%; background-color: #666666; color: #FFFFFF; text-align: center; text-transform: uppercase; z-index: 1500; } #outdated.hide { display: none; } * html #outdated { position: absolute; } #outdated h6 { margin: 30px 0 15px; font-size: 1.5em; line-height: 1.25; color: #FFFFFF; } #outdated p { font-size: 0.85em; line-height: 1.25; color: #FFFFFF; } #outdated #btnUpdateBrowser { position: relative; display: inline-block; width: auto; margin: 0 auto 30px; border: 2px solid #FFFFFF; padding: 10px 20px; color: #FFFFFF; text-decoration: none; cursor: pointer; } #outdated #btnUpdateBrowser:hover { background-color: #FFFFFF; color: #666666; } #outdated #btnCloseUpdateBrowser { position: absolute; display: block; right: 15px; top: 15px; text-decoration: none; color: #FFFFFF; font-size: 2em; line-height: 1.25; } /* -- COOKIE CONSENT -----------------------------------------------*/ .cookie-consent { position: fixed; display: block; right: 0; bottom: -100%; left: 0; padding: 1rem 0; background-color: rgb(238,238,238); box-shadow: 0 0 5px rgba(0,0,0,0.1); color: rgb(51,51,51); -webkit-transition: all 0.3s; transition: all 0.3s; clear: both; z-index: 100; } .csstransforms .cookie-consent { bottom: 0; -webkit-transform: translate(0,110%); transform: translate(0,110%); } body[data-cookie="top"] .cookie-consent { top: -100%; bottom: auto; } .csstransforms body[data-cookie="top"] .cookie-consent { top: 0; bottom: auto; -webkit-transform: translate(0,-110%); transform: translate(0,-110%); } .cookie-consent.show { bottom: 0; } body[data-cookie="top"] .cookie-consent.show { top: 0; bottom: auto; } .csstransforms .cookie-consent.show { -webkit-transform: translate(0,0); transform: translate(0,0); } .csstransforms body[data-cookie="top"] .cookie-consent.show { -webkit-transform: translate(0,0); transform: translate(0,0); } .cookie-consent::after { content: ""; position: relative; display: block; width: 100%; clear: both; } .cookie-consent > div { position: relative; width: 96%; max-width: 1280px; margin: 0 auto; font-size: 0.85em; text-align: left; } .cookie-consent p { width: auto; max-width: 100%; margin: 0; padding: 0; text-align: left; } .cookie-consent a { display: inline-block; text-decoration: underline; } .no-touch .cookie-consent a:hover, .no-touch .cookie-consent a:active { } .cookie-consent .btn { display: block; float: right; width: auto; margin: 0 0 0 1rem; padding: 0.5rem 1rem; background-color: rgb(204,204,204); color: rgb(51,51,51); } @media (max-width: 450px) { .cookie-consent > div { font-size: 0.8em; } } /*! Flickity v2.0.5 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: hsla(0, 0%, 100%, 0.75); cursor: pointer; /* vertically center */ -webkit-transform: translateY(-50%); transform: translateY(-50%); } .flickity-prev-next-button:hover { background: white; } .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px #09F; } .flickity-prev-next-button:active { opacity: 0.6; } .flickity-prev-next-button.previous { left: -60px; } .main-carousel[data-flickity-version="3"] .flickity-prev-next-button.previous { left: 1.5rem; } .flickity-prev-next-button.next { right: -60px; } .main-carousel[data-flickity-version="3"] .flickity-prev-next-button.next { right: 1.5rem; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: -60px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: -60px; } .flickity-prev-next-button:disabled { opacity: 0.3; cursor: auto; } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #333; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot, .index .flickity-page-dots .dot, .layout2 .index .flickity-page-dots .dot, .layout3 .index .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; } .contentBar .container.color1 .flickity-page-dots .dot { background: #FFFFFF; } .flickity-page-dots .dot.is-selected, .index .flickity-page-dots .dot.is-selected, .layout2 .index .flickity-page-dots .dot.is-selected, .layout3 .index .flickity-page-dots .dot.is-selected { opacity: 1; } @media (min-width: 1441px) { .flickity-page-dots { display: none; } } @media (max-width: 1440px) { .main-carousel:not([data-flickity-version="3"]) .flickity-prev-next-button { top: auto; bottom: -45px; width: 30px; height: 30px; -webkit-transform: none; transform: none; } .main-carousel:not([data-flickity-version="3"]) .flickity-prev-next-button.previous { left: 50%; -webkit-transform: translate(-125%,0); transform: translate(-125%,0); } .main-carousel:not([data-flickity-version="3"]) .flickity-prev-next-button.next { right: 50%; -webkit-transform: translate(125%,0); transform: translate(125%,0); } .main-carousel[data-flickity-version="4"] .flickity-prev-next-button { display: none; } } .layout-grid { position: fixed; display: none; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 100; } .layout-grid.closed { display: none; } .layout-grid.open { display: block; } .layout-grid .container { height: 100%; } .layout-grid div { position: relative; display: inline-block; height: 100%; background: rgba(0,0,0,0.03); } .layout-grid.invert div { background: rgba(255,253,249,0.05); } .layout-grid[data-size="24"] div { width: 2.6333%; margin: 0 0.8%; } .layout-grid[data-size="16"] div { width: 4.375%; margin: 0 1%; } .layout-grid[data-size="8"] div { width: 10.75%; margin: 0 1%; } .layout-grid div:first-child { margin-left: 0; } .layout-grid div:last-child { margin-right: 0; } @media (max-width: 1025px) { .layout-grid[data-size="24"] div { width: 6.5%; margin: 0 1%; } .layout-grid[data-size="24"] div:nth-child(n+13) { display: none; } .layout-grid div:first-child { margin-left: 0; } .layout-grid[data-size="24"] div:nth-child(12) { margin-right: 0; } } @media (max-width: 800px) { .layout-grid[data-size="24"] div { width: 23.5%; } .layout-grid[data-size="24"] div:nth-child(n+5) { display: none; } .layout-grid div:first-child { margin-left: 0; } .layout-grid[data-size="24"] div:nth-child(4) { margin-right: 0; } } @media (max-width: 600px) { .layout-grid[data-size="24"] div { width: 32%; margin: 0 1%; } .layout-grid[data-size="24"] div:nth-child(n+4) { display: none; } .layout-grid div:first-child { margin-left: 0; } .layout-grid[data-size="24"] div:nth-child(3) { margin-right: 0; } } @media (max-width: 400px) { .layout-grid[data-size="24"] div { width: 23.5%; } .layout-grid[data-size="24"] div:nth-child(n+4) { display: inline-block; } .layout-grid[data-size="24"] div:nth-child(n+5) { display: none; } .layout-grid div:first-child { margin-left: 0; } .layout-grid[data-size="24"] div:nth-child(3) { margin-right: 1%; } .layout-grid[data-size="24"] div:nth-child(4) { margin-right: 0; } } /* Pannellum 2.3.2, https://github.com/mpetroff/pannellum */ .pnlm-container{margin:0;padding:0;overflow:hidden;position:relative;cursor:default;width:100%;height:100%;font-family:Helvetica,"Nimbus Sans L","Liberation Sans",Arial,sans-serif;background:#f4f4f4 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A') repeat;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;outline:0;line-height:1.4;contain:content}.pnlm-container *{box-sizing:content-box}.pnlm-grab{cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}.pnlm-grabbing{cursor:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s5.07-5.29%203.77-6.74c-1.31-1.45-2.53%200.14-2.53%200.14s2.74-3.29%200.535-4.06c-2.2-0.769-2.52%201.3-2.52%201.3s0.81-2.13-1.12-2.13-1.52%201.77-1.52%201.77-0.261-1.59-1.87-1.12c-1.61%200.468-0.874%202.17-0.874%202.17s-0.651-1.55-2-0.445c-1.35%201.11-0.68%202.25-0.365%203.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A') 12 8,default}.pnlm-sprite{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A')}.pnlm-container:-moz-full-screen{height:100%!important;width:100%!important}.pnlm-container:-webkit-full-screen{height:100%!important;width:100%!important}.pnlm-container:-ms-fullscreen{height:100%!important;width:100%!important}.pnlm-container:fullscreen{height:100%!important;width:100%!important}.pnlm-render-container{cursor:inherit;position:absolute;height:100%;width:100%}.pnlm-controls{margin-top:4px;background-color:#fff;border:1px solid #999;border-color:rgba(0,0,0,0.4);border-radius:3px;cursor:pointer;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-control:hover{background-color:#f8f8f8}.pnlm-controls-container{position:absolute;top:0;left:4px;z-index:1}.pnlm-zoom-controls{width:26px;height:52px}.pnlm-zoom-in{width:100%;height:50%;position:absolute;top:0;border-radius:3px 3px 0 0}.pnlm-zoom-out{width:100%;height:50%;position:absolute;bottom:0;background-position:0 -26px;border-top:1px solid #ddd;border-top-color:rgba(0,0,0,0.10);border-radius:0 0 3px 3px}.pnlm-fullscreen-toggle-button,.pnlm-orientation-button,.pnlm-hot-spot-debug-indicator{width:26px;height:26px}.pnlm-hot-spot-debug-indicator{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;background-color:rgba(255,255,255,0.5);border-radius:13px;display:none}.pnlm-orientation-button-inactive{background-position:0 -156px}.pnlm-orientation-button-active{background-position:0 -182px}.pnlm-fullscreen-toggle-button-inactive{background-position:0 -52px}.pnlm-fullscreen-toggle-button-active{background-position:0 -78px}.pnlm-panorama-info{position:absolute;bottom:4px;background-color:rgba(0,0,0,0.7);border-radius:0 3px 3px 0;padding-right:10px;color:#fff;text-align:left;display:none;z-index:2;-webkit-transform:translateZ(9999px);transform:translateZ(9999px)}.pnlm-title-box{position:relative;font-size:20px;display:table;padding-left:5px;margin-bottom:3px}.pnlm-author-box{position:relative;font-size:12px;display:table;padding-left:5px}.pnlm-load-box{position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:rgba(0,0,0,0.7);border-radius:3px;text-align:center;font-size:20px;display:none;color:#fff}.pnlm-load-box p{margin:20px 0}.pnlm-lbox{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;display:none}.pnlm-loading{animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-name:pnlm-mv;-webkit-animation-name:pnlm-mv;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-timing-function:linear;height:10px;width:10px;background-color:#fff;position:relative}@keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}@-webkit-keyframes pnlm-mv{from{left:0;top:0}25%{left:10px;top:0}50%{left:10px;top:10px}75%{left:0;top:10px}to{left:0;top:0}}.pnlm-load-button{position:absolute;top:50%;left:50%;width:200px;height:100px;margin:-50px 0 0 -100px;background-color:rgba(0,0,0,.7);border-radius:3px;text-align:center;font-size:20px;display:table;color:#fff;cursor:pointer}.pnlm-load-button:hover{background-color:rgba(0,0,0,.8)}.pnlm-load-button p{display:table-cell;vertical-align:middle}.pnlm-info-box{font-size:15px;position:absolute;top:50%;left:50%;width:200px;height:150px;margin:-75px 0 0 -100px;background-color:#000;border-radius:3px;display:table;text-align:center;color:#fff;table-layout:fixed}.pnlm-info-box a{color:#fff;word-wrap:break-word;overflow-wrap:break-word}.pnlm-info-box p{display:table-cell;vertical-align:middle;padding:0 5px 0 5px}.pnlm-error-msg{display:none}.pnlm-about-msg{font-size:11px;line-height:11px;color:#fff;padding:5px 8px 5px 8px;background:rgba(0,0,0,0.7);border-radius:3px;position:absolute;top:50px;left:50px;display:none;opacity:0;-moz-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;z-index:1}.pnlm-about-msg a:link,.pnlm-about-msg a:visited{color:#fff}.pnlm-about-msg a:hover,.pnlm-about-msg a:active{color:#eee}.pnlm-hotspot-base{position:absolute;visibility:hidden;cursor:default;vertical-align:middle;top:0;z-index:1}.pnlm-hotspot{height:26px;width:26px;border-radius:13px}.pnlm-hotspot:hover{background-color:rgba(255,255,255,0.2)}.pnlm-hotspot.pnlm-info{background-position:0 -104px}.pnlm-hotspot.pnlm-scene{background-position:0 -130px}div.pnlm-tooltip span{visibility:hidden;position:absolute;border-radius:3px;background-color:rgba(0,0,0,0.7);color:#fff;text-align:center;max-width:200px;padding:5px 10px;margin-left:-220px;cursor:default}div.pnlm-tooltip:hover span{visibility:visible}div.pnlm-tooltip:hover span:after{content:'';position:absolute;width:0;height:0;border-width:10px;border-style:solid;border-color:rgba(0,0,0,0.7) transparent transparent transparent;bottom:-20px;left:-10px;margin:0 50%}.pnlm-compass{position:absolute;width:50px;height:50px;right:4px;bottom:4px;border-radius:25px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2250%22%20width%3D%2250%22%3E%0A%3Cpath%20d%3D%22m24.5078%206-3.2578%2018h7.5l-3.25781-18h-0.984376zm-3.2578%2020%203.2578%2018h0.9844l3.2578-18h-7.5zm1.19531%200.9941h5.10938l-2.5547%2014.1075-2.5547-14.1075z%22%2F%3E%0A%3C%2Fsvg%3E%0A');cursor:default;display:none}.pnlm-world{position:absolute;left:50%;top:50%}.pnlm-face{position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0}.pnlm-dragfix,.pnlm-preview-img{position:absolute;height:100%;width:100%}.pnlm-preview-img{background-size:cover;background-position:center}.pnlm-lbar{width:150px;margin:0 auto;border:#fff 1px solid;height:6px}.pnlm-lbar-fill{background:#fff;height:100%;width:0}.pnlm-lmsg{font-size:12px}.pnlm-fade-img{position:absolute;top:0;left:0} /****************************************************/ /* 8. CSS-Modul: PRINT */ /****************************************************/ /****************************************************/ /* 9. ZMI Management Interface */ /****************************************************/ .cmsTxtColorStrong0 { color: #436976; } .cmsTxtColorStrong1 { color: #666666; } .cmsBgColorStrong0 { background-color: #8CABB9; } .cmsBgColorStrong1 { background-color: #CCCCCC; } .cmsBgColorMedium0 { background-color: #DDE6EC; } .cmsBgColorLight0 { background-color: #FFFFFF; } .neutralColorWhite { background-color: #FFFFFF; } div.ZMSTable table th { background-color:#DDEFFC; } div.ZMSTable table td { background-color:#EEEEEE; } .zmiTableRowEven {background-color:#eee;} .zmiTableRowOdd {background-color:#ccc;} .form-submit { font-size:12px; } body.zmi h1, body.zmi h2, body.zmi h3, body.zmi h4, body.zmi h5, body.zmi h6 { font-family: 'Open Sans','Lucida Grande',Helvetica,Verdana,Arial,sans-serif; } body.zmi p, body.zmi li, body.zmi blockquote { font-family: 'Open Sans','Lucida Grande',Helvetica,Verdana,Arial,sans-serif; font-size: 1em; } body.zmi .small { font-size: 0.85em; } body.zmi .zmi-error-note { margin: 0.5rem 0; border: 1px dashed; padding: 0.5rem; background-color: rgba(102,102,102,0.1); font-size: 0.85em; font-weight: bold; color: red; } body.zmi form input,body.zmi form select, body.zmi form textarea { margin: 1px; border: 1px solid #333333; padding: 1px; background: rgb(255,255,255); box-shadow: none; } body.zmi .ZMSTable, body.zmi .ZMSTable th, body.zmi .ZMSTable td { background: transparent; } body.zmi .ZMSTable th:first-child:before, body.zmi .ZMSTable td:first-child:before, body.zmi .ZMSTable caption:before, body.zmi .ZMSTable th:first-child:after, body.zmi .ZMSTable td:first-child:after, body.zmi .ZMSTable caption:after { display: none; } body.zmi .ZMSTable tr td { min-width: 0; } body.zmi .contentBar { margin: 0; padding: 15px; } body.zmi .col-layout { width: 100%; margin: 0; } body.zmi .col-layout .column { width: 100% !important; margin: 1% 0 !important; } body.zmi .btn.btnSO { width: auto; height: auto; } body.zmi .iSlider { width: 100%; height: 350px; min-height: 0; } body.zmi .iSlider:before, body.zmi .iSlider:after { display: none; } body.zmi .iSlider .item-container { padding-top: 0; } body.zmi .gallery-item .item-info { margin: 1em 0; } body.zmi .gallery-item .item-text h2, body.zmi .gallery-item .item-text h3 { font-size: 0.85rem; } body.zmi .gallery-item .item-text p { font-size: 0.5rem; } body.zmi .index .ix-header, body.zmi .index .ix-desc { font-size: 0.5em; } body.zmi .index .ix-img { background-color: #EEEEEE; } body.zmi .ix-full { display: block; width: 100%; margin: 0; } body.zmi .ix-full li { display: inline-block; width: 100%; margin: 0.5em 0; } body.zmi .index .ix-bild { display: block; width: 100%; margin: 0; } body.zmi .ix-bild li { width: 48%; margin: 0.5em 1%; } /* --- ZMS GRAPHIC --- */ body.zmi .ZMSGraphic img { width: auto; max-width: 500px; height: auto; } body.zmi .ZMSGraphic.floatleft.imgwidth, body.zmi .ZMSGraphic.floatleft.imgwidth0, body.zmi .ZMSGraphic.floatleft.imgwidth1, body.zmi .ZMSGraphic.floatleft.imgwidth2, body.zmi .ZMSGraphic.floatright.imgwidth, body.zmi .ZMSGraphic.floatright.imgwidth0, body.zmi .ZMSGraphic.floatright.imgwidth1 { float: none; width: 100%; margin: 0; } body.zmi .ZMSGraphic.left .graphic, body.zmi .ZMSGraphic.right .graphic { float: none; margin-right: 0; } /* --- Hintergrund/Text Ausrichtung --- */ body.zmi div.interface-box { display: inline-block; width: 100px; height: 66px; margin: 5px 15px 5px 0; box-sizing: border-box; background-color: transparent; background-repeat: no-repeat; vertical-align: top; } body.zmi div.box-img { background-image: url(sprite-image-orientation.png); } body.zmi div.text-pos { background-image: url(sprite-text-orientation.png); } body.zmi div.text-style, body.zmi div.text-bg { width: 140px; height: 75px; border: 1px solid rgb(221,221,221); font-size: 0.7em; } body.zmi div.box-img.lay0 { background-position: 0 0; } body.zmi div.box-img.lay1 { background-position: -125px 0; } body.zmi div.box-img.lay2 { background-position: -250px 0; } body.zmi div.box-img.lay3 { background-position: -375px 0; } body.zmi div.box-img.lay4 { background-position: -500px 0; } body.zmi div.box-img.lay5 { background-position: -625px 0; } body.zmi div.box-img.lay6 { background-position: -750px 0; } body.zmi div.box-img.lay7 { background-position: -875px 0; } body.zmi div.box-img.lay8 { background-position: -1000px 0; } body.zmi div.box-img.lay9 { background-position: -1125px 0; } body.zmi div.interface-box label { display: block; width: 100px; height: 66px; } body.zmi div.text-style label, body.zmi div.text-bg label { width: 138px; height: 73px; } body.zmi div.interface-box input { display: block; margin: 5px 0 5px 5px; } body.zmi div.text-style.lay0 { background: transparent; } body.zmi div.text-style.lay1 { background: rgb(255,253,249); } body.zmi div.text-style.lay2 { background: rgb(252,194,79); } body.zmi div.text-style.lay3 { background: transparent; } body.zmi div.text-style.lay4 { background: rgb(76,73,71); } body.zmi div.text-style.lay5 { background: rgb(252,194,79); } body.zmi div.text-style.lay6 { background: transparent; } body.zmi div.text-style.lay7 { background: rgb(255,253,249); } body.zmi div.text-style.lay8 { background: rgb(76,73,71); } body.zmi div.text-style h4, body.zmi div.text-bg h4 { font-size: 1.2em; } body.zmi div.text-style h4, body.zmi div.text-style p { margin: 0 5px; } body.zmi div.text-style.lay3 h4, body.zmi div.text-style.lay3 p, body.zmi div.text-style.lay4 h4, body.zmi div.text-style.lay4 p, body.zmi div.text-style.lay5 h4, body.zmi div.text-style.lay5 p { color: rgb(255,253,249); } body.zmi div.text-style.lay3 h4, body.zmi div.text-style.lay3 p { text-shadow: 0 0 2px rgb(0,0,0); } body.zmi div.text-style.lay6 h4, body.zmi div.text-style.lay6 p, body.zmi div.text-style.lay7 h4, body.zmi div.text-style.lay7 p, body.zmi div.text-style.lay8 h4, body.zmi div.text-style.lay8 p { color: rgb(252,194,79); } body.zmi div.text-bg { background: rgb(221,221,221); } body.zmi div.text-bg.lay0 h4, body.zmi div.text-bg.lay0 p { margin: 0 5px; } body.zmi div.text-bg.lay1 h4 { margin: 0 5px; padding: 5px; background: rgb(255,253,249); } body.zmi div.text-bg.lay1 p { margin: 0 5px; padding: 0 5px 5px; background: rgb(255,253,249); } body.zmi div.text-bg.lay2 h4, body.zmi div.text-bg.lay2 p { float: left; clear: both; margin: 0 10px 2px; box-decoration-break: clone; display: inline; line-height: 1.5; background-color: rgb(255,253,249); background-color: rgba(255,253,249,0.85); box-shadow: 0.25rem 0 0 rgba(255,253,249,0.85), -0.25rem 0 0 rgba(255,253,249,0.85); } /* --- Newsletter Layout --- */ body.zmi div.placement { display: inline-block; width: 122px; height: 82px; padding: 5px 15px 5px 0; background-color: transparent; background-image: url(newsletter-layout-sprite.png); background-repeat: no-repeat; } body.zmi div.placement.lay0 { background-position: 0 5px; } body.zmi div.placement.lay1 { background-position: 0 -97px; } body.zmi div.placement.lay2 { background-position: 0 -199px; } body.zmi .placement input { margin: 5px 0 0 5px; } /* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- * +- Body * +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */ body.print { background-color: #fff; } span.unicode { font-family: "Arial Unicode MS", Verdana, Arial, Helvetica, sans-serif; } span.highlight { background-color: rgb(<dtml-var "colorscheme['secondcolorstrong']">); color: rgb(<dtml-var "colorscheme['secondcolorstrong']">); font-weight: bold; border: none; }