/****************************************************/ /* Layout */ /****************************************************/ /* -- 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%; --headerHeight: var(--headerHeightDefault); font-family: Montserrat,Helvetica,Arial,sans-serif; font-size: 1em; line-height: 1.375; font-weight: 400; color: rgb(var(--textColor)); background: rgb(var(--bgColor)); -webkit-transition: all 0.3s; transition: all 0.3s; } body.scroll-shrink { --headerHeight: var(--headerHeightShrink); } body.hidden, body.showForm, body.nav-open, body.modal-open { 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; -webkit-transition: all 0.3s; transition: all 0.3s; } /* --- page --- */ .page { position: relative; background: rgb(var(--bgColor)); color: rgb(var(--textColor)); overflow-x: clip; } body[data-header-gap="2"] .page:first-child { padding-top: var(--headerHeight); -webkit-transition: all 0.3s; transition: all 0.3s; } /* --- container --- */ .page:first-child > .container:only-child { padding-top: var(--headerHeight); -webkit-transition: all 0.3s; transition: all 0.3s; } body[data-header-gap="2"] .page:first-child > .container:only-child, body[data-header-desktop="2"] .page:first-child > .container:only-child { padding-top: 0; } /* --- content --- */ .content { position: relative; float: left; width: 100%; padding: 0; box-sizing: border-box; z-index: 1; } /* --- content L | sidebar R (col2Left) --- */ .layout0 .content { width: 75%; width: var(--grid_col18_100); } /* --- 1 column (col1) --- */ .layout2 .content { width: 100%; } .container > .right { position: relative; float: left; width: 100%; padding: 0; } /* --- 1 column (col1) --- */ .layout0 .container > .right { width: 24%; width: var(--grid_col6_100); margin: 0 0 50px; padding-left: 1%; padding-left: var(--grid_gutter1_100); } .container > .right:empty { display: none; } /* -- BOTTOM --------------------------------------------*/ #bottom { position: relative; display: block; flex-shrink: 0; clear: both; background-color: rgb(var(--footerBgColor)); color: rgb(var(--footerTextColor)); text-align: center; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; } footer { position: relative; } footer a { color: rgb(var(--footerTextColor)); } .no-touchevents footer a:hover, .no-touchevents footer a:active { color: rgba(var(--footerTextColor),0.75); } footer section, footer nav { margin: 2rem 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; line-height: 1; } .copyright { font-size: 0.85em; } footer .togis { padding: 0.5rem 0; font-size: 0.6em; } /* -- TOP -----------------------------------------------*/ .top-header { position: fixed; flex-shrink: 0; top: 0; right: 0; left: 0; box-sizing: border-box; clear: both; z-index: 10; -webkit-transition: all 0.3s; transition: all 0.3s; height: var(--headerHeight); background: rgba(var(--headerBgColor),0.95); box-shadow: 0 0 1px rgba(var(--black),0.5); } body[data-header-gap="2"] .top-header { background: rgb(var(--headerBgColor)); } .top-header[data-info="1"] { padding-top: 40px; } /* relative */ body[data-header-desktop="2"] .top-header { position: absolute; } body.scroll-shrink .top-header { background: rgb(var(--headerBgColor)); } body.scroll-shrink .top-header[data-info="1"] { padding-top: 0; } header { display: flex; align-content: center; align-items: center; justify-content: space-between; height: 100%; text-align: right; -webkit-transition: all 0.3s; transition: all 0.3s; } .no-csstransitions header:before { content: ""; display: inline-block; width: 1px; height: 100%; margin: 0 0 0 -1px; vertical-align: middle; } header .header-wrapper { height: 100%; padding: 0; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; } body[data-header-desktop="3"].scroll-shrink .top-header .header-wrapper { padding: 0; } .no-csstransitions header .header-wrapper { float: right; } .hero div.hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero div.hero-background.parascroll { left: 50%; height: 125%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } .hero img, .hero .hero-background .lores { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .no-objectfit .hero img, .no-objectfit .hero .hero-background .lores { top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .overlay .pageoverlay-item .hero .lores { display: none; } .overlay .pageoverlay-item.active .hero .lores { display: block; } /* --- TRANSLATE --- */ .translate { position: relative; display: inline-flex; flex-direction: column; height: 40px; padding-left: 1rem; vertical-align: middle; font-size: 0.8em; -webkit-transition: all 0.3s; transition: all 0.3s; } body[data-snav="1"] header .translate { display: none; } header .translate div { background-color: rgba(var(--bgColor),0.95); opacity: 0; visibility: hidden; z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s; color: rgb(var(--headlineColor)); } header .translate div.active { order: -1; background-color: transparent; opacity: 1; visibility: visible; } .no-touchevents header .translate:hover div { opacity: 1; visibility: visible; } .no-touchevents header .translate:hover div.active { background-color: rgba(var(--bgColor),0.95); } .translate div a, .translate div > span { position: relative; display: block; padding: 0.75rem 1.5rem 0.75rem 1rem; line-height: 1em; text-transform: uppercase; color: rgb(var(--textColor)); -webkit-transition: all 0.3s; transition: all 0.3s; } .no-touchevents header .translate:hover div a, .no-touchevents header .translate:hover div > span { background-color: rgba(var(--textColor),0.1); } header .translate > .active > span { color: rgb(var(--textColor)); cursor: default; } .no-touchevents header .translate div a:hover, .no-touchevents header .translate div a:active { background-color: rgba(var(--textColor),0.2); color: rgb(var(--textColor)); } header .translate > .active span::before { content: "\f0d7"; position: absolute; top: 0.75rem; right: 0.75rem; font-family: 'Font Awesome 6 Pro'; font-size: 0.8em; font-weight: 900; -webkit-transition: all 0.1s 0.2s; transition: all 0.1s 0.2s; } .translate > .inactive span span { opacity: 0.5; } .logo { position: relative; flex-shrink: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .no-csstransitions .logo { float: left; } .logo a { position: relative; display: block; box-sizing: border-box; text-align: left; width: 300px; height: 65px; margin: 10px 0; } .no-touchevents .top-header:hover .logo a { } body.scroll-shrink .top-header header .logo a { width: 150px; height: 35px; } .no-touchevents body.scroll-shrink .top-header:hover header .logo a { } .logo a img { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center left; object-position: center left; -webkit-transition: all 0.3s; transition: all 0.3s; } .no-objectfit .logo a img { width: auto; max-width: 100%; height: auto; max-height: 100%; } .logo a svg { display: block; width: auto; height: 100%; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; } .logo a svg path, .logo a svg rect { -webkit-transition: all 0.3s; transition: all 0.3s; } .logo a span { display: block; -webkit-transition: all 0.3s; transition: all 0.3s; overflow: hidden; } /* .logo a .logo-main { background-image: url(logo.png); } .logo a .logo-small { background-image: url(logo-small.png); } */ .logo a > span { position: relative; display: block; height: 100%; } .logo[data-format="2"] a > span { display: inline-flex; flex-direction: column; justify-content: center; vertical-align: middle; } .logo[data-format="3"] a span.logo-small { position: absolute; top: 0; left: 0; } .logo .showonscroll { opacity: 0; } /* --- CHANGE LOGO ON SCROLL --- */ body.scroll-shrink .top-header .logo .hideonscroll { opacity: 0; -webkit-transition: all 0.2s 0.1s; transition: all 0.2s 0.1s; } body.scroll-shrink .top-header .logo[data-format="2"] .hideonscroll { height: 0; } body.scroll-shrink .top-header .logo .showonscroll { opacity: 1; -webkit-transition: all 0.2s 0.1s; transition: all 0.2s 0.1s; } /* -- CHANNEL MENU ---------------------------------*/ .menu { position: relative; display: inline-block; height: 100%; vertical-align: middle; } body[data-snav="1"] .menu { display: none; } .menu ul { display: inline-flex; flex-wrap: wrap; justify-content: center; height: 100%; margin: 0; padding: 0; list-style: none; overflow: inherit; overflow: initial; vertical-align: middle; } .menu li { position: relative; display: inline-flex; height: 100%; margin: 0; padding: 0; vertical-align: top; } .menu li a { position: relative; display: flex; align-items: center; height: 100%; box-sizing: border-box; } .menu > ul > li > a { padding: 1rem; color: rgb(var(--headerTextColor)); } .no-touchevents .menu > ul > li > a:hover, .no-touchevents .menu > ul > li > a:active { color: rgb(var(--headerTextColor)); } .menu > ul > li.active > a, .no-touchevents .menu > ul > li.active > a:hover, .no-touchevents .menu > ul > li.active > a:active { color: rgb(var(--headerTextColor)); } body.scroll-shrink .top-header .menu > ul > li > a { } .no-touchevents body.scroll-shrink .top-header .menu > ul > li > a:hover, .no-touchevents body.scroll-shrink .top-header .menu > ul > li > a:active { } body.scroll-shrink .top-header .menu > ul > li.active > a, .no-touchevents body.scroll-shrink .top-header .menu > ul > li.active > a:hover, .no-touchevents body.scroll-shrink .top-header .menu > ul > li.active > a:active { } .menu li a span { display: block; -webkit-transition: all 0.3s; transition: all 0.3s; } .menu > ul > li > a span { border-bottom: 1px solid transparent; } .no-touchevents .menu > ul > li > a:hover span, .no-touchevents .menu > ul > li > a:active span { border-color: currentColor; } .menu > ul > li.active > a span, .no-touchevents .menu > ul > li.active > a:hover span, .no-touchevents .menu > ul > li.active > a:active span { border-color: currentColor; } body.scroll-shrink .top-header .menu > ul > li > a span { } .no-touchevents body.scroll-shrink .top-header .menu > ul > li > a:hover span, .no-touchevents body.scroll-shrink .top-header .menu > ul > li > a:active span { } body.scroll-shrink .top-header .menu > ul > li.active > a span, .no-touchevents body.scroll-shrink .top-header .menu > ul > li.active > a:hover span, .no-touchevents body.scroll-shrink .top-header .menu > ul > li.active > a:active span { } /* --- DROP DOWN - SECOND LEVEL --- */ .menu ul ul { position: absolute; display: block; top: 100%; left: 0; width: 230px; height: auto; background: rgb(var(--headerBgColor)); background: rgba(var(--headerBgColor), 0.95); box-shadow: 0 3px 3px rgba(var(--black), 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 li:focus-within > ul { opacity: 1; z-index: 1; visibility: visible; } .menu ul .edge ul { right: 0; left: auto; } .menu li li { display: block; height: auto; } .menu li li a { display: block; height: auto; border-bottom: 1px solid rgba(var(--headerTextColor), 0.1); padding: 0.75rem 1.5rem; font-size: 1em; color: rgb(var(--headerTextColor)); } .no-touchevents .menu li li a:hover, .no-touchevents .menu li li a:active { background-color: rgba(var(--headerTextColor), 0.05); color: rgb(var(--headerTextColor)); } .menu li.active li a { color: rgb(var(--headerTextColor)); } .no-touchevents .menu li.active li a:hover, .no-touchevents .menu li.active li a:active { background-color: rgba(var(--headerTextColor), 0.1); color: rgb(var(--headerTextColor)); } .menu li.active li.active > a { background-color: rgba(var(--headerTextColor), 0.2); color: rgb(var(--headerTextColor)); } /* --- 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; } .content-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .content-background img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0.15; } .no-objectfit .content-background img { top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .content-background video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .no-objectfit .content-background video { top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } @supports (-ms-ime-align:auto) { .content-background video { top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } } /* --- Slide Navigation button --- */ .sTrigger { position: relative; display: none; width: 30px; height: 100%; margin-right: -1rem; padding: 0 1rem; cursor: pointer; vertical-align: middle; -webkit-transition: all 0.3s; transition: all 0.3s; } body[data-snav="1"] .sTrigger { display: block; } /* --- hamburger --- */ .sTrigger span { position: absolute; display: block; top: 50%; right: 1rem; width: 30px; height: 2px; border-radius: 1px; background: rgb(var(--headerTextColor)); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: all 0.2s 0.1s; transition: all 0.2s 0.1s; } .nav-open .sTrigger 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(var(--headerTextColor)); -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform-origin: center; } /* --- top bun --- */ .sTrigger span::before { top: -7px; } .nav-open .sTrigger span::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* --- bottom bun --- */ .sTrigger span::after { top: 7px; } .nav-open .sTrigger span::after { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #sNav { display: block; position: fixed; top: 0; bottom: 0; right: 0; width: 100%; max-width: 400px; z-index: 9; background-color: rgb(var(--headerBgColor)); box-shadow: 0 0 2px rgba(var(--black),0.2); -webkit-transform: translate(110%, 0); transform: translate(110%, 0); -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .nav-open #sNav { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .no-touchevents #sNav.hover { -webkit-transform: translate(0, 0); transform: translate(0, 0); } #sNav .nav-holder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-top: var(--headerHeight); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; -webkit-transition: all 0.3s; transition: all 0.3s; } /* --- ITEMS --- */ /* --- Navigation --- */ #sNav .nav-main { display: block; margin: 0; border-bottom: 1px solid rgba(var(--headerTextColor),0.25); overflow: hidden; } #sNav .inactive > ul { display: none; } #sNav .nav-main ul { list-style-type: none; margin: 0; padding: 0; background: transparent; } #sNav .nav-main ul li { position: relative; display: block; margin: 0; padding: 0; border-top: 1px solid rgba(var(--headerTextColor),0.25); } #sNav .nav-main ul li a { position: relative; display: block; } #sNav li.js-toggle > a { margin-right: 45px; } #sNav .nav-main li .submenu { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; right: 0; width: 45px; height: 50px; border-radius: 0; border: 0; padding: 0; background-color: transparent; text-align: center; color: rgb(var(--headerTextColor)); -webkit-transition: all 0.3s; transition: all 0.3s; } .no-touchevents #sNav .nav-main li .submenu:hover { color: rgb(var(--highlightColor)); } #sNav .nav-main li .submenu:before { content: "\f078"; display: block; font-family: 'Font Awesome 6 Pro'; font-weight: 900; font-size: 1.2em; line-height: 1.1; } #sNav .nav-main li.open > .submenu:before { content: "\f077"; } #sNav .nav-main ul li a span { display: block; border: 0; padding: 1rem; color: rgb(var(--headerTextColor)); text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .no-touchevents #sNav .nav-main ul li a:hover span, .no-touchevents #sNav .nav-main ul li a:active span { background-color: rgba(var(--headerTextColor),0.1); text-decoration: none; } #sNav .nav-main ul li a.active span { background-color: rgba(var(--headerTextColor),0.2); } .no-touchevents #sNav .nav-main ul li a.active:hover span, .no-touchevents #sNav .nav-main ul li a.active:active span { background-color: rgba(var(--headerTextColor),0.25); } #sNav .nav-main ul li a.current span, .no-touchevents #sNav .nav-main ul li a.current:hover span, .no-touchevents #sNav .nav-main ul li a.current:active span { background-color: rgb(var(--headerTextColor)); color: rgb(var(--headerBgColor)); cursor: default; } /* -- level 2 -- */ #sNav .nav-main ul ul { border: 0; background-color: rgba(var(--headerTextColor),0.05); } #sNav .nav-main ul li.active > ul { border-top: 1px solid rgba(var(--headerTextColor),0.25); } #sNav .nav-main ul li li a span { margin: 0; border-top: 0; padding: 1rem 1rem 1rem 2rem; font-size: 0.9em; } #sNav .nav-main ul li li:first-child a span { margin-top: 0; } #sNav .nav-main ul li li:last-child a span { margin-bottom: 0; } /* -- level 3 -- */ #sNav .nav-main ul li li ul { border-top: 0; } #sNav .nav-main ul li li li a span { margin: 0; padding: 0.5rem 1rem 0.5rem 3rem; } /* --- SECOND PAGES --- */ #sNav .nav-main .second-pages { border-top: 1px solid rgba(var(--headerTextColor),0.25); padding: 1rem 0; } #sNav .nav-main .second-pages li { border: 0; } #sNav .nav-main .second-pages li a span { padding: 0.5rem 1rem; font-size: 0.85em; line-height: 1.25; } /* --- TRANSLATE --- */ #sNav .translate { display: block; height: auto; border-bottom: 1px solid rgba(var(--headerTextColor),0.25); padding: 0.5rem 0; font-size: 1em; text-align: center; } #sNav .translate div { display: inline-block; width: auto; } #sNav .translate div a, #sNav .translate div > span { padding: 0.5rem 0.75rem; color: rgb(var(--headerTextColor)); } #sNav .translate > .active span { text-decoration: underline; } #sNav .translate > .active a span { border-bottom: 0; } #sNav .translate > .inactive span span { opacity: 0.5; } :root { --headerHeightDefault: 90px; --headerHeightShrink: 55px; --maxWidth: var(--grid_col16_100); --borderRadius: 0; --grid_colgutter2_50: calc(4.5/25.75 * 100%); --grid_gutter1_half_50: calc((1.25/25.75 * 100%) / 2); --grid_gutter1_half_100: calc((1.25/52.75 * 100%) / 2); --grid_gutter1_33: calc(1.25/16.75 * 100%); --grid_gutter1_50: calc(1.25/25.75 * 100%); --grid_gutter1_66: calc(1.25/34.75 * 100%); --grid_gutter1_100: calc(1.25/52.75 * 100%); --grid_col1_25: calc(1/12.25 * 100%); --grid_col2_25: calc(3.25/12.25 * 100%); --grid_col1_33: calc(1/16.75 * 100%); --grid_col2_33: calc(3.25/16.75 * 100%); --grid_col4_33: calc(7.75/16.75 * 100%); --grid_col1_50: calc(1/25.75 * 100%); --grid_col2_50: calc(3.25/25.75 * 100%); --grid_col3_50: calc(5.5/25.75 * 100%); --grid_col4_50: calc(7.75/25.75 * 100%); --grid_col8_50: calc(16.75/25.75 * 100%); --grid_col1_66: calc(1/34.75 * 100%); --grid_col2_66: calc(3.25/34.75 * 100%); --grid_col3_66: calc(5.5/34.75 * 100%); --grid_col4_66: calc(7.75/34.75 * 100%); --grid_col12_66: calc(25.75/34.75 * 100%); --grid_col1_100: calc(1/52.75 * 100%); --grid_col2_100: calc(3.25/52.75 * 100%); --grid_col3_100: calc(5.5/52.75 * 100%); --grid_col4_100: calc(7.75/52.75 * 100%); --grid_col5_100: calc(10/52.75 * 100%); --grid_col6_100: calc(12.25/52.75 * 100%); --grid_col8_100: calc(16.75/52.75 * 100%); --grid_col11_100: calc(24.75/52.75 * 100%); --grid_col12_100: calc(25.75/52.75 * 100%); --grid_col16_100: calc(34.75/52.75 * 100%); --grid_col18_100: calc(39.25/52.75 * 100%); --grid_colgutter1_25: calc(2.25/12.25 * 100%); --grid_colgutter1_33: calc(2.25/16.75 * 100%); --grid_colgutter1_50: calc(2.25/25.75 * 100%); --grid_colgutter1_66: calc(2.25/34.75 * 100%); --grid_colgutter1_100: calc(2.25/52.75 * 100%); --grid_colgutter2_33: calc(4.5/16.75 * 100%); --grid_colgutter4_66: calc(8.75/34.75 * 100%); --grid_colgutter4_100: calc(9/52.75 * 100%); --grid_colgutter6_100: calc(13.5/52.75 * 100%); } /****************************************************/ /* Standards */ /****************************************************/ /* -- STANDARD -------------------------------------*/ .accent-color { color: rgb(var(--highlightColor)); } .content > h2, .content > h3, .content > h4, .content > p, .content > ul, .content > ol, .content > blockquote { max-width: var(--maxWidth); } .hgroup { margin: 2rem 0; } .iSlider .hgroup { margin: 0 0 0.5rem; font-size: 1.2em; } .hgroup > * { margin: 0; } .iSlider .item-info[data-content-layout="2"] .hgroup :first-child:not(:only-child) { margin-bottom: 0.5rem; } h1,h2,h3,h4,.title-h2,.title-h3,.title-h4 { margin: 2rem 0 1rem; font-family: Montserrat,Helvetica,Arial,sans-serif; line-height: 1.25; font-weight: 400; color: rgb(var(--headlineColor)); } h1, .title-h1 { font-size: 3.5em; font-weight: 700; } h2, .title-h2 { font-size: 2em; } .hgroup h1 + h2 { font-size: 2.5em; } .conForm h2, .conForm .title-h2 { margin-top: 0; } h3, .title-h3 { font-size: 1.6em; } h4, .title-h4 { font-size: 1.4em; } p { margin: 1rem 0; } p.emphasis { position: relative; display: block; margin: 2rem var(--grid_colgutter1_100); font-size: 1.2em; color: rgb(var(--highlightColor)); } .column p.emphasis { margin: 2rem 0; } p.big { font-size: 1.4em; } p.caption { font-size: 0.85em; } p.description { } blockquote { margin: 2rem 0; padding: 2rem var(--grid_colgutter1_100); background: rgb(var(--cardBgColor)); box-sizing: border-box; color: rgb(var(--cardTextColor)); } p.teaser1 { margin: 2rem 0 1rem; font-family: Montserrat,Helvetica,Arial,sans-serif; color: rgb(var(--headlineColor)); font-size: 4em; line-height: 1.25; font-weight: 700; } p.teaser2 + p.teaser1, p.teaser3 + p.teaser1 { margin-top: 0; } p.teaser1:has(+ p.teaser2), p.teaser1:has(+ p.teaser3) { margin-bottom: 0; } p.teaser2 { margin: 2rem 0 1rem; box-sizing: border-box; font-family: Montserrat,Helvetica,Arial,sans-serif; color: rgb(var(--headlineColor)); font-size: 2em; line-height: 1.25; } p.teaser1 + p.teaser2, p.teaser3 + p.teaser2 { margin-top: 0; } p.teaser2:has(+ p.teaser1), p.teaser2:has(+ p.teaser3) { margin-bottom: 0; } p.teaser3 { margin: 2rem 0 1rem; font-size: 1.4em; } p.teaser1 + p.teaser3, p.teaser2 + p.teaser3 { margin-top: 0.5rem; } p.teaser3:has(+ p.teaser1), p.teaser3:has(+ p.teaser2) { margin-bottom: 0; } ul, ol { margin: 1rem 0; padding: 0 0 0 3rem; padding-left: var(--grid_colgutter1_100); box-sizing: border-box; overflow: hidden; } .column ul, .column ol { padding-left: 3rem; } ul { list-style: disc; } ol { list-style: decimal; } ul.list-plus, ul.list-check { list-style: none; } li { position: relative; padding: 2px 0; } ul.list-plus li::before, ul.list-check li::before { position: absolute; top: 5px; left: -1.618em; font-family: 'Font Awesome 6 Pro'; font-size: 0.9em; font-weight: 900; } ul.list-plus li::before { content: "\f067"; } ul.list-check li::before { content: "\f00c"; } .contentBar .section-content.justify1 > ul.list-plus li:before, .contentBar .section-content.justify2 > ul.list-plus li:before, .contentBar .section-content.justify1 > ul.list-check li:before, .contentBar .section-content.justify2 > ul.list-check li:before { position: relative; top: auto; left: auto; padding: 0 0.5rem 0 0; } a { color: rgb(var(--hoverColor)); text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .no-touchevents a:hover, .no-touchevents a:active { color: rgb(var(--textColor)); text-decoration: none; } .content h2 a, .content h3 a, .content h4 a, .content p a, .content li a, .content blockquote a, .content label a { border-bottom: 1px solid currentColor; } a span { cursor: pointer; } a img { border: 0; } .small { font-size: 0.85em; } small { font-size: 0.5em; } strong, b { font-weight: 700; } i, em { font-style: italic; } hr, .clearing[data-type="1"] { display: block; width: 100%; max-width: var(--maxWidth); height: 2px; margin: 2rem 0; clear: both; overflow: hidden; } .conForm .clearing[data-type="1"] { margin: 1rem 0; } .clearing[data-type="1"][data-width="1"] { max-width: 100%; } .content > *:first-child:not(.contentBar) { margin-top: 3rem; } .content > *:last-child:not(.contentBar):not(script) { margin-bottom: 3rem; } .content > .ZMSGraphic:first-child + * { margin-top: 0; } .col-layout { position: relative; display: grid; grid-column-gap: var(--grid_gutter1_100); width: 100%; margin: 1rem 0; } .no-cssgrid .col-layout { width: 102.36966%; margin: 1rem -1.1848%; } .contentBar .container:not([data-content-width="0"]) .col-layout { grid-column-gap: var(--grid_gutter1_50); } /* --- 2 COL 50/50 --- */ .col-layout.type1 { grid-template-columns: repeat(2, 1fr) } .col-layout.type1 > .column:nth-of-type(n+3) { margin-top: 1rem; } /* --- 3 COL --- */ .col-layout.type2 { grid-template-columns: repeat(3, 1fr) } .col-layout.type2 > .column:nth-of-type(n+4) { margin-top: 1rem; } /* --- 2 COL 66/33 --- */ .col-layout.type3 { grid-template-columns: var(--grid_col16_100) var(--grid_col8_100); } .col-layout.type3 > .column:nth-of-type(n+3) { margin-top: 1rem; } /* --- 2 COL 33/66 --- */ .col-layout.type4 { grid-template-columns: var(--grid_col8_100) var(--grid_col16_100); } .col-layout.type4 > .column:nth-of-type(n+3) { margin-top: 1rem; } /* --- 4 COL --- */ .col-layout.type5 { grid-template-columns: repeat(4, 1fr) } .col-layout.type5 > .column:nth-of-type(n+5) { margin-top: 1rem; } /* --- COLUMNS --- */ .col-layout .column { position: relative; display: block; margin: 0; } .no-cssgrid .col-layout .column { display: inline-block; margin: 0 1.1574%; vertical-align: top; } /* --- 2 COL 50/50 --- */ .no-cssgrid .col-layout.type1 > .column { width: 47.6851%; } .no-cssgrid .col-layout.type1 > .column:nth-of-type(n+3) { margin-top: 1rem; } /* --- 3 COL --- */ .no-cssgrid .col-layout.type2 > .column { width: 31.0184%; } .no-cssgrid .col-layout.type2 > .column:nth-of-type(n+4) { margin-top: 1rem; } /* --- 2 COL 66/33 --- */ .no-cssgrid .col-layout.type3 > .column:nth-of-type(2n + 1) { width: 64.3517%; } .no-cssgrid .col-layout.type3 > .column:nth-of-type(2n) { width: 31.0184%; } .no-cssgrid .col-layout.type3 > .column:nth-of-type(n+3) { margin-top: 1rem; } /* --- 2 COL 33/66 --- */ .no-cssgrid .col-layout.type4 > .column:nth-of-type(2n + 1) { width: 31.0184%; } .no-cssgrid .col-layout.type4 > .column:nth-of-type(2n) { width: 64.3517%; } .no-cssgrid .col-layout.type4 > .column:nth-of-type(n+3) { margin-top: 1rem; } /* --- 4 COL --- */ .no-cssgrid .col-layout.type5 > .column { width: 22.6851%; } .no-cssgrid .col-layout.type5 > .column:nth-of-type(n+5) { margin-top: 1rem; } /* --- COLUMN CONTENT --- */ .col-layout .column > *:first-child { margin-top: 0; } .col-layout .column > h2:first-child, .col-layout .column > h3:first-child, .col-layout .column > h4:first-child { margin-top: 0; } .col-layout .column > *:last-child { 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; } /* --- CSS COLUMNS --- */ .css-columns[data-columns="2"] { columns: 300px 2; } .css-columns[data-columns="3"] { columns: 300px 3; } /* -- ZMS GRAPHIC ----------------------------------*/ /* --- CONTAINER --- */ .ZMSGraphic { position: relative; width: 100%; max-width: 100%; margin: 1rem 0; background: transparent; box-sizing: border-box; } .overlay .ZMSGraphic { display: none; } .overlay.open .ZMSGraphic { display: block; } .ZMSGraphic.none.top, .ZMSGraphic.center { background: transparent; text-align: center; } .ZMSGraphic.imgwidth3 { width: auto; } .ZMSGraphic.floatleft { float: left; margin-top: 0.33rem; margin-right: 2.3696%; margin-right: var(--grid_gutter1_100); } .layout0 .ZMSGraphic.floatleft { margin-right: 3.1847%; } .ZMSGraphic.floatleft.imgwidth0 { width: 31.7535%; } .layout0 .ZMSGraphic.floatleft.imgwidth0 { width: 31.2101%; } .ZMSGraphic.floatleft.imgwidth0 + .ZMSGraphic.floatleft.imgwidth0 + .ZMSGraphic.floatleft.imgwidth0 { margin-right: 0; } .ZMSGraphic.floatleft.imgwidth1 { width: 48.8151%; } .layout0 .ZMSGraphic.floatleft.imgwidth1 { width: 48.4076%; } .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.33rem; margin-left: 2.3696%; margin-left: var(--grid_gutter1_100); } .layout0 .ZMSGraphic.floatright { margin-left: 3.1847%; } .ZMSGraphic.floatright.imgwidth0 { width: 31.7535%; } .layout0 .ZMSGraphic.floatright.imgwidth0 { width: 31.2101%; } .ZMSGraphic.floatright.imgwidth0 + .ZMSGraphic.floatright.imgwidth0 + .ZMSGraphic.floatright.imgwidth0 { margin-left: 0; } .ZMSGraphic.floatright.imgwidth1 { width: 48.8151%; } .layout0 .ZMSGraphic.floatright.imgwidth1 { width: 48.4076%; } .ZMSGraphic.floatright.imgwidth1 + .ZMSGraphic.floatright.imgwidth1 { margin-left: 0; } .ZMSGraphic.floatright.imgwidth2 { float: none; width: 100%; margin-left: 0; } /* --- GRAPHIC --- */ .ZMSGraphic .graphic { position: relative; overflow: hidden; } .ZMSGraphic.imgwidth0 .graphic { width: 31.7535%; } .layout0 .ZMSGraphic.imgwidth0 .graphic { width: 31.2101%; } .ZMSGraphic.imgwidth1 .graphic { width: 48.8151%; } .layout0 .ZMSGraphic.imgwidth1 .graphic { width: 48.4076%; } .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, .layout0 .ZMSGraphic.floatleft.imgwidth0 .graphic, .layout0 .ZMSGraphic.floatleft.imgwidth1 .graphic, .layout0 .ZMSGraphic.floatleft.imgwidth2 .graphic, .layout0 .ZMSGraphic.floatright.imgwidth0 .graphic, .layout0 .ZMSGraphic.floatright.imgwidth1 .graphic, .layout0 .ZMSGraphic.floatright.imgwidth2 .graphic { width: 100%; } .ZMSGraphic.left .graphic, .ZMSGraphic.right .graphic { float: left; margin-right: 2.3696%; margin-right: var(--grid_gutter1_100); } .layout0 .ZMSGraphic.left .graphic, .layout0 .ZMSGraphic.right .graphic { margin-right: 3.1847%; } .ZMSGraphic.center .graphic { float: none; display: inline-block; margin: 0 auto; } /* --- IMAGE --- */ .ZMSGraphic .graphic img { display: block; width: 100%; max-width: 100%; height: auto; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .ZMSGraphic.imgwidth3 .graphic img { width: auto; max-width: 100%; } /* --- TEXT --- */ .ZMSGraphic .text { padding: 0.5rem 0 0; background: transparent; box-sizing: border-box; font-size: 0.85em; } .ZMSGraphic.none.top.imgwidth0 .text, .ZMSGraphic.center.imgwidth0 .text { width: 31.7535%; } .layout0 .ZMSGraphic.none.top.imgwidth0 .text, .layout0 .ZMSGraphic.center.imgwidth0 .text { width: 31.2101%; } .ZMSGraphic.none.top.imgwidth1 .text, .ZMSGraphic.center.imgwidth1 .text { width: 48.8151%; } .layout0 .ZMSGraphic.none.top.imgwidth1 .text, .layout0 .ZMSGraphic.center.imgwidth1 .text { width: 48.4076%; } .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; } /* -- ZMS TABLES -----------------------------------*/ .ZMSTable { width: 100%; margin: 1rem 0; border-spacing: 0; border-collapse: collapse; padding: 0 0 5px 0; box-sizing: border-box; } .column .ZMSTable, .js-toggle .ZMSTable{ display: inline-block; width: auto; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .ZMSTable th { position: relative; vertical-align: bottom; border-bottom: 1px solid rgba(var(--textColor),0.5); padding: 0.5rem 1rem; font-weight: 400; text-align: left; } .ZMSTable tr td { position: relative; border-top: 1px solid rgba(var(--textColor),0.5); padding: 0.5rem 1rem; vertical-align: top; text-align: left; } .ZMSTable tr:first-child th, .ZMSTable tr:first-child td { border-top: 0; } .ZMSTable tr:last-child th, .ZMSTable tr:last-child td { border-bottom: 0; } .ZMSTable caption { position: relative; margin: 0; border-top: 1px solid rgba(var(--textColor),0.5); padding: 0.5rem 1rem; background-color: transparent; font-size: 0.85em; text-align: left; } .ZMSTable caption[align="top"] { border-bottom: 1px solid rgba(var(--textColor),0.5); border-top: 0; } /* -- ZMS FILE -------------------------------------*/ .ZMSFile { position: relative; width: 48.8151%; max-width: var(--maxWidth); background-color: transparent; margin: 2rem 0; padding: 0; clear: both; } .ZMSFile[data-width="1"] { width: 100%; } .ZMSFile[data-width="2"] { width: 100%; max-width: 100%; } .ZMSFile.file-img { } .column .ZMSFile, .layout0 .column .ZMSFile, .js-toggle .ZMSFile, .js-toggle .ZMSFile[data-width="1"] { width: 100%; max-width: 100%; } .ZMSFile * { -webkit-transition: all 0.3s; transition: all 0.3s; } .ZMSFile > a, .ZMSFile > span { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; color: rgb(var(--textColor)); } .no-touchevents .ZMSFile a:hover, .no-touchevents .ZMSFile a:active { color: rgb(var(--textColor)); } li .ZMSFile > a { border-bottom: 0; } .ZMSFile .img { position: relative; flex-shrink: 0; width: 31.1664%; width: var(--grid_col4_50); } .ZMSFile[data-width="1"] .img { width: 22.30215%; width: var(--grid_col4_66); } .ZMSFile[data-width="2"] .img { width: 23.2227%; width: var(--grid_col6_100); } .ZMSFile .img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; } .no-touchevents .ZMSFile a:hover .img img, .no-touchevents .ZMSFile a:active .img img { opacity: 0.5; } .ZMSFile .img > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.6em; opacity: 0.7; } .no-touchevents .ZMSFile a:hover .img > span, .no-touchevents .ZMSFile a:active .img > span { color: rgb(var(--highlightColor)); opacity: 1; } .ZMSFile .text { position: relative; padding-left: 2rem; box-sizing: border-box; } .ZMSFile.file-img .text { width: 65.8767%; width: calc(100% - var(--grid_col4_50)); margin-left: 1rem; padding-left: 2rem; } .ZMSFile[data-width="1"].file-img .text { width: 74.1007%; width: calc(100% - var(--grid_col4_66)); } .ZMSFile[data-width="2"].file-img .text { width: 74.4075%; width: calc(100% - var(--grid_col6_100)); } .ZMSFile .file-icon { position: absolute; display: block; top: 0; left: 0; font-size: 1.4em; line-height: 1.2; } .ZMSFile .title { display: block; font-size: 1.2em; color: rgb(var(--highlightColor)); } .no-touchevents .ZMSFile a:hover .title, .no-touchevents .ZMSFile a:active .title { color: rgb(var(--textColor)); } .ZMSFile .file-size { display: block; font-size: 0.75em; } .ZMSFile .description { display: block; margin: 5px 0 0; } /* -- ZMS LINK -------------------------------------*/ .ZMSLinkElement { position: relative; max-width: var(--maxWidth); margin: 1rem 0; padding-left: 2rem; } .column .ZMSLinkElement, .layout0 .column .ZMSLinkElement, .js-toggle .ZMSLinkElement { max-width: 100%; } .ZMSLinkElement .link-icon { position: absolute; display: block; top: 0; left: 0; font-size: 1.2em; } .ZMSLinkElement .title a { display: block; text-decoration: none; font-size: 1.2em; } .no-touchevents .ZMSLinkElement a:hover .title a, .no-touchevents .ZMSLinkElement a:active .title a { color: rgb(var(--textColor)); } li .ZMSLinkElement .title a { border-bottom: 0; } .ZMSLinkElement .description { margin: 5px 0 0; } /* -- FLOATING ------------------------------------ */ .clearing:after { content: ""; position: relative; display: block; width: 100%; clear: both; } .floatRight { float: right; } .floatLeft { float: left; } img.imgNoborder { border: 0px; } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; vertical-align: middle; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; min-height: 45px; margin: 0.75rem 1rem 0.75rem 0; border-radius: var(--borderRadius); border: 1px solid transparent; padding: 0 1rem; font-size: 1em; } /* --- size --- */ .btn[data-size="0"] { min-height: 35px; font-size: 0.75em; } .btn[data-size="2"] { min-height: 55px; padding: 0 1.5rem; font-size: 1.4em; } /* --- text --- */ .btn[data-layout="0"] { min-width: 0; min-height: 0; margin: 5px 1rem 5px 0; border-radius: 0; border: 0; padding: 0; color: rgb(var(--textColor)); } .no-touchevents .btn[data-layout="0"]:hover, .no-touchevents .btn[data-layout="0"]:active, .no-touchevents a:hover .btn[data-layout="0"] { color: rgb(var(--hoverColor)); } /* --- solid --- */ .btn[data-layout="1"] { border-color: rgb(var(--bgColor)); background-color: rgb(var(--bgColor)); color: rgb(var(--textColor)); } .no-touchevents .btn[data-layout="1"]:hover, .no-touchevents .btn[data-layout="1"]:active, .no-touchevents a:hover .btn[data-layout="1"] { border-color: rgb(var(--bgColor)); background-color: rgb(var(--textColor)); color: rgb(var(--bgColor)); } .btn[data-layout="1"]:not([data-colorset]) { border-color: rgb(var(--textColor)); background-color: rgb(var(--textColor)); color: rgb(var(--bgColor)); } .no-touchevents .btn[data-layout="1"]:not([data-colorset]):hover, .no-touchevents .btn[data-layout="1"]:not([data-colorset]):active, .no-touchevents a:hover .btn[data-layout="1"]:not([data-colorset]) { border-color: rgb(var(--textColor)); background-color: rgb(var(--bgColor)); color: rgb(var(--textColor)); } /* --- outline --- */ .btn[data-layout="4"] { border-color: rgb(var(--textColor)); background-color: transparent; color: rgb(var(--textColor)); } .no-touchevents .btn[data-layout="4"]:hover, .no-touchevents .btn[data-layout="4"]:active, .no-touchevents a:hover .btn[data-layout="4"] { border-color: rgb(var(--textColor)); background-color: rgb(var(--textColor)); color: rgb(var(--bgColor)); } .content p > a.btn { border-bottom: inherit; } .col-layout .column > .btn + .btn:last-child, .contentBar .container .section-content > .btn:last-child { margin-bottom: 0.75rem; } .contentBar .section-content.justify2 > .btn { margin-right: 0.5rem; margin-left: 0.5rem; } .contentBar .section-content.justify1 > .btn { margin-right: 0; margin-left: 1rem; } .no-touchevents .btn:hover, .no-touchevents .btn:active, .no-touchevents a:hover .btn { text-decoration: none; } .no-touchevents .btn.disabled:hover, .no-touchevents .btn.disabled:active, .no-touchevents a.disabled:hover .btn { text-decoration: none; min-height: 45px; margin: 0.75rem 1rem 0.75rem 0; border-radius: var(--borderRadius); border: 1px solid transparent; padding: 0 1rem; font-size: 1em; cursor: default; opacity: 0.65; } .notice-privacy[data-notice-color="2"] .btn { border-color: rgb(var(--white)); background-color: transparent; color: rgb(var(--white)); } .notice-privacy[data-notice-color="2"] .btn span, .notice-privacy[data-notice-color="2"] .btn i { color: rgb(var(--white)); } .no-touchevents .notice-privacy[data-notice-color="2"] .btn:hover, .no-touchevents .notice-privacy[data-notice-color="2"] .btn:active { border-color: rgb(var(--white)); background-color: rgba(var(--white),0.1); color: rgb(var(--white)); } .no-touchevents .notice-privacy[data-notice-color="2"] .btn:hover span, .no-touchevents .notice-privacy[data-notice-color="2"] .btn:active span, .no-touchevents .notice-privacy[data-notice-color="2"] .btn:hover i, .no-touchevents .notice-privacy[data-notice-color="2"] .btn:active i { color: rgb(var(--white)); } .btn:focus { outline: 0; } .btn.active, .btn:active { outline: 0; } .btn.disabled, .btn[disabled] { cursor: default; opacity: 0.65; } /* --- SPAN / ICON --- */ .btn > span { display: inline-block; -webkit-transition: all 0.2s; transition: all 0.2s; padding: 0.5rem 0; } .btn[data-format="0"] > span { order: 1; } .btn:not([data-format]) > span, .btn[data-format=""] > span, .btn[data-format="1"] > span, .btn[data-format="2"] > span { order: 2; margin-left: 1rem; vertical-align: middle; } .btn > i { position: relative; -webkit-transition: all 0.2s; transition: all 0.2s; vertical-align: middle; font-size: 1.2em; } .btn[data-size="2"] > i { font-size: unset; } .btn[data-format="0"] > i { order: 2; margin-left: 1rem; vertical-align: middle; } .btn:not([data-format]) > i, .btn[data-format=""] > i, .btn[data-format="1"] > i, .btn[data-format="2"] > i { order: 1; } .btn > span:only-child, .btn > i:only-child { margin: 0; } /* --- text --- */ .btn[data-layout="0"] span { display: inline-block; color: rgb(var(--textColor)); border-bottom: 1px solid currentColor; padding: 0 0 2px; } .btn[data-layout="0"] i { display: inline-block; color: rgb(var(--textColor)); padding: 0; } .no-touchevents .btn[data-layout="0"]:hover span, .no-touchevents .btn[data-layout="0"]:active span, .no-touchevents a:hover .btn[data-layout="0"] span, .no-touchevents .btn[data-layout="0"]:hover i, .no-touchevents .btn[data-layout="0"]:active i, .no-touchevents a:hover .btn[data-layout="0"] i { color: rgb(var(--hoverColor)); } .btn[data-layout="0"]:not([data-format]) > span, .btn[data-layout="0"][data-format=""] > span, .btn[data-layout="0"][data-format="1"] > span, .btn[data-layout="0"][data-format="2"] > span, .btn[data-format="0"] > i { margin-left: 0.5rem; vertical-align: middle; } /* --- solid --- */ .btn[data-layout="1"] span, .btn[data-layout="1"] i { color: rgb(var(--textColor)); } .no-touchevents .btn[data-layout="1"]:hover span, .no-touchevents .btn[data-layout="1"]:active span, .no-touchevents a:hover .btn[data-layout="1"] span, .no-touchevents .btn[data-layout="1"]:hover i, .no-touchevents .btn[data-layout="1"]:active i, .no-touchevents a:hover .btn[data-layout="1"] i { color: rgb(var(--bgColor)); } .btn[data-layout="1"]:not([data-colorset]) span, .btn[data-layout="1"]:not([data-colorset]) i { color: rgb(var(--bgColor)); } .no-touchevents .btn[data-layout="1"]:not([data-colorset]):hover span, .no-touchevents .btn[data-layout="1"]:not([data-colorset]):active span, .no-touchevents a:hover .btn[data-layout="1"]:not([data-colorset]) span, .no-touchevents .btn[data-layout="1"]:not([data-colorset]):hover i, .no-touchevents .btn[data-layout="1"]:not([data-colorset]):active i, .no-touchevents a:hover .btn[data-layout="1"]:not([data-colorset]) i { color: rgb(var(--textColor)); } /* --- outline --- */ .btn[data-layout="4"] span, .btn[data-layout="4"] i { color: rgb(var(--textColor)); } .no-touchevents .btn[data-layout="4"]:hover span, .no-touchevents .btn[data-layout="4"]:active span, .no-touchevents a:hover .btn[data-layout="4"] span, .no-touchevents .btn[data-layout="4"]:hover i, .no-touchevents .btn[data-layout="4"]:active i, .no-touchevents a:hover .btn[data-layout="4"] i { color: rgb(var(--bgColor)); } /* --- VIDEO BUTTON --- */ .media-gallery.btn-video .gallery-item > .btn { margin: 0; border: 0; padding: 0; background-color: transparent; color: rgb(var(--textColor)); } .no-touchevents .media-gallery.btn-video .gallery-item > .btn:hover, .no-touchevents .media-gallery.btn-video .gallery-item > .btn:active { color: rgba(var(--textColor),0.8); } .media-gallery.btn-video .gallery-item > .btn i { font-size: 5em; color: rgb(var(--textColor)); } .no-touchevents .media-gallery.btn-video .gallery-item > .btn:hover i, .no-touchevents .media-gallery.btn-video .gallery-item > .btn:active i { color: rgba(var(--textColor),0.8); } /* -- STANDARDS -----------------------------------------*/ form input, form select, form textarea { position: relative; max-width: 100%; margin: 0; border: 1px solid rgba(var(--cardTextColor),0.25); border-radius: 2px; padding: 0.5rem; background: rgb(var(--cardBgColor)); box-sizing: border-box; font: inherit; color: rgb(var(--cardTextColor)); } form input[type=radio], form input[type=checkbox] { width: 16px; height: 16px; margin: 2px 0.5rem 2px 0; border: 0; padding: 0; background: transparent; } button { max-width: 100%; margin: 0; border: 1px solid rgba(var(--cardTextColor),0.25); border-radius: 2px; padding: 0.5rem; background: rgb(var(--cardBgColor)); box-sizing: border-box; font: inherit; color: rgb(var(--cardTextColor)); } .conForm input::placeholder, .conForm select::placeholder, .conForm textarea::placeholder { } /* --- STANDARDS - VALIDATION --- */ .conForm .errors { display: none; margin: 0 0 2rem; border: 2px solid rgb(var(--systemErrorColor)); padding: 1rem; background: rgb(var(--cardBgColor)); color: rgb(var(--cardTextColor)); box-sizing: border-box; } .conForm .errors.show { display: block; } form .required input, form .required select, form .required textarea { border-color: rgb(var(--cardHighlightColor)); } form .invalid input:invalid, form .invalid select:invalid, form .invalid textarea:invalid, form .invalid input.js-check-number { border-color: rgb(var(--systemErrorColor)); background: rgba(var(--systemErrorColor),0.1); } form .invalid input[type=radio]:invalid, form .invalid input[type=checkbox]:invalid { border: 2px solid rgb(var(--systemErrorColor)); outline: 2px solid rgb(var(--systemErrorColor)); } form .invalid input + label { color: rgb(var(--systemErrorColor)); } form .note-required { display: none; padding: 0.25rem 0; color: rgb(var(--systemErrorColor)); font-size: 0.85em; -webkit-transition: all 0.3s; transition: all 0.3s; } form .privacy-input .note-required { font-size: 1em; } form .invalid input:invalid + .note-required, form .invalid select:invalid + .note-required, form .invalid textarea:invalid + .note-required, form .invalid input:invalid ~ .note-required, form .invalid select:invalid ~ .note-required, form .invalid textarea:invalid ~ .note-required { display: block; opacity: 1; } form .invalid input + .note-required, form .invalid select + .note-required, form .invalid textarea + .note-required, form .invalid input ~ .note-required, form .invalid select ~ .note-required, form .invalid textarea ~ .note-required { display: block; opacity: 0; } /* --- CONTAINERS --- */ .conForm { position: relative; } .conForm.narrow { display: inline-block; width: 48.8151%; } .form-modal .conForm.narrow { display: block; } .col-layout .conForm.narrow, .contentBar .container[data-content-width="1"] .conForm.narrow, .contentBar .container[data-content-width="2"] .conForm.narrow, .contentBar .container[data-content-width="3"] .conForm.narrow { width: 100%; } .conForm.newsletter-signup { max-width: 600px; margin: 2rem 0; } .contentBar .section-content.justify2 .conForm.newsletter-signup { margin: 2rem auto; } .contentBar .section-content.justify2 .conForm { margin-right: auto; margin-left: auto; } .conForm.narrow.newsletter-signup { display: block; width: auto; } .conForm.newsletter-signup form { display: flex; flex-wrap: wrap; text-align: left; } /* --- 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.open { display: flex; opacity: 1; z-index: 25; } .form-modal .modal-holder { position: relative; max-height: 100%; margin: auto; background: rgb(var(--bgColor)); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; opacity: 0; visibility: hidden; } .form-modal .modal-holder.open { opacity: 1; visibility: visible; } /* --- SECTIONS --- */ .conForm form { position: relative; display: block; } .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; order: 0; } .conForm.newsletter-signup .formPrivacy { flex-grow: 2; order: 2; padding-top: 0.75rem; font-size: 0.85em; } .conForm.newsletter-signup .formSend { flex-shrink: 0; order: 1; margin-left: 1rem; } /* --- WRAPPERS --- */ .conForm div { position: relative; display: inline-block; width: 100%; padding: 0 0 1rem; vertical-align: top; } .conForm div > div, .conForm.newsletter-signup div:not(.errors), .conForm .clearing { padding: 0; } .conForm .formSelect div > div { padding-bottom: 0.5rem; } .conForm .double1 { width: 32.3232%; padding: 0; } .conForm.narrow .double1, .form-modal .conForm .double1 { width: 32.3232%; } .conForm .double2 { width: 63.6363%; padding: 0; } .conForm.narrow .double2, .form-modal .conForm .double2 { width: 63.6363%; } .conForm .double1 + .double2, .conForm .double2 + .double1 { margin-left: 4.0404%; } .conForm.narrow .double1 + .double2, .conForm.narrow .double2 + .double1, .form-modal .conForm .double1 + .double2, .form-modal .conForm .double2 + .double1 { margin-left: 4.0404%; } .conForm .split { width: 48.81466%; padding-bottom: 0.5rem; } .conForm.narrow .split, .form-modal .conForm .split { width: 48.81466%; } .conForm .split:nth-of-type(2n) { margin-left: 1.6%; margin-left: var(--grid_gutter1_100); } .conForm.narrow .split:nth-of-type(2n), .form-modal .conForm .split:nth-of-type(2n) { margin-left: 1.6%; margin-left: var(--grid_gutter1_100); } .conForm .triple { width: 31.75322%; padding: 0; } .conForm.narrow .triple, .form-modal .conForm .triple { width: 31.75322%; } .conForm .triple:nth-of-type(3n+2), .conForm .triple:nth-of-type(3n) { margin-left: 1.6%; margin-left: var(--grid_gutter1_100); } .conForm.narrow .triple:nth-of-type(3n+2), .conForm.narrow .triple:nth-of-type(3n), .form-modal .conForm .triple:nth-of-type(3n+2), .form-modal .conForm .triple:nth-of-type(3n) { margin-left: 1.6%; margin-left: var(--grid_gutter1_100); } form div.email-alt, .conForm form div.email-alt { display: none; } /* --- STANDARDS --- */ .conForm p { clear: both; } .conForm p a { border-bottom: 1px solid currentColor; } /* --- LABELS --- */ .conForm label { position: relative; display: none; padding: 0 0 2px 4px; } .conForm label.hide { display: none; } .conForm label.beside { display: inline-block; margin-right: 1rem; vertical-align: middle; } .conForm label.above { display: block; margin: 0; padding: 0 0 5px; } .conForm label.radio, .conForm .wide label.radio { display: inline-block; width: auto; margin: 0; padding: 0 1rem 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% - 16px - 1rem); padding: 0; vertical-align: top; } .conForm label a { border-bottom: 1px solid currentColor; } /* --- INPUTS --- */ .conForm input { position: relative; display: inline-block; width: 100%; margin: 0; z-index: 0; vertical-align: middle; } .conForm .privacy-input input.checkbox { margin-top: 0; vertical-align: top; } .conForm input.short { width: 30%; } .conForm input.medium { width: 40%; margin: 0 3%; } .conForm input.radio, .conForm .required input.radio { margin-left: 0; } .conForm label input.radio { vertical-align: initial; } .conForm .btn { width: auto; margin: 0; white-space: normal; } /* --- SELECT --- */ .conForm select { position: relative; display: inline-block; width: 100%; cursor: pointer; vertical-align: middle; } .conForm select.short { width: 60px; } .conForm select.short-80 { width: 80px; } .conForm option { color: rgb(var(--black)); } .conForm option.hide { display: none; } /* --- TEXTAREA --- */ .conForm textarea { width: 100%; height: 200px; } textarea + .remaining-chars span { font-weight: 700; } .contentBar { position: relative; left: 0; left: calc(-50vw + 50%); width: 100vw; margin: 0; box-sizing: border-box; overflow: hidden; z-index: 1; transform-style: preserve-3d; } .contentBar[data-bg-color="0"]:has(.content-container:only-child) { margin: 3rem 0; } .overlay-holder .contentBar { left: calc(-42vw + 50%); width: 84vw; } /* --- need margins when other content before or after content bar --- */ *:not(.contentBar) + .contentBar { margin-top: 3rem; } .contentBar + *:not(.contentBar) { margin-top: 3rem; } .layout0 .contentBar { left: 0; left: calc(-50vw + 67%); } .modal-notice .contentBar { left: auto; width: 100%; margin: 0; padding: 10%; } /* --- content bar height --- */ .contentBar[data-height="2"].no-text { height: 25vh; min-height: 300px; } .contentBar[data-height="3"].no-text { height: 50vh; min-height: 300px; } .contentBar[data-height="4"].no-text { height: 75vh; min-height: 300px; } .contentBar[data-height="5"].no-text { height: 100vh; min-height: 300px; } /* --- BACKGROUND CONTAINER --- */ .contentBar .background-container[data-bg-opacity="1"] { opacity: 0.75; } .contentBar .background-container[data-bg-opacity="2"] { opacity: 0.5; } .contentBar .background-container[data-bg-opacity="3"] { opacity: 0.25; } .contentBar .background-container { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0 auto; overflow: hidden; } .contentBar[data-height="1"] .background-container { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: 0; margin: 0; } .contentBar .background-container[data-bg-layout="5"] { max-width: 100%; } .contentBar .background-container > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } /* --- 33% links --- */ .contentBar .background-container[data-bg-layout="7"] > div { width: 33%; } /* --- 33% rechts --- */ .contentBar .background-container[data-bg-layout="8"] > div { right: 0; left: auto; width: 33%; } /* --- 50% links --- */ .contentBar .background-container[data-bg-layout="2"] > div { width: 50%; } /* --- 50% rechts --- */ .contentBar .background-container[data-bg-layout="3"] > div { right: 0; left: auto; width: 50%; } /* --- 66% links --- */ .contentBar .background-container[data-bg-layout="9"] > div { width: 66%; } /* --- 66% rechts --- */ .contentBar .background-container[data-bg-layout="10"] > div { right: 0; left: auto; width: 66%; } /* --- Kachel --- */ .contentBar .background-container[data-bg-layout="5"] > div, .contentBar .background-container > div div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: auto; background-repeat: repeat; background-position: center; -webkit-transition: all 0.3s; transition: all 0.3s; } /* --- Parallax --- */ .contentBar .background-container[data-bg-layout="0"] > .parascroll { left: 50%; width: 100vmax; height: 150%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } /* --- Everything else --- */ .contentBar .background-container > div img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .no-objectfit .contentBar .background-container > div img, .no-objectfit .contentBar .background-container[data-bg-layout="0"] > div img { top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .contentBar .background-container > div .lores { opacity: 0.75; background-size: cover; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } /* --- 100% Höhe --- */ .contentBar .background-container[data-bg-layout="6"] > div img { left: auto; width: auto; } .contentBar .background-container[data-bg-layout="6"][data-orientation="1"] > div img, .contentBar .background-container[data-bg-layout="6"][data-orientation="7"] > div img, .contentBar .background-container[data-bg-layout="6"][data-orientation="8"] > div img { left: 0; } .contentBar .background-container[data-bg-layout="6"][data-orientation="3"] > div img, .contentBar .background-container[data-bg-layout="6"][data-orientation="4"] > div img, .contentBar .background-container[data-bg-layout="6"][data-orientation="5"] > div img { right: 0; } .contentBar .background-container[data-bg-layout="6"][data-orientation="0"] > div img, .contentBar .background-container[data-bg-layout="6"][data-orientation="2"] > div img, .contentBar .background-container[data-bg-layout="6"][data-orientation="6"] > div img { left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } .contentBar .background-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .no-objectfit .contentBar .background-container video, .no-objectfit .contentBar .background-container[data-bg-layout="0"] video { top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } /* --- GRAPHIC CONTAINER --- */ .contentBar .graphic-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } /* --- OFFSET CONTAINER --- */ .contentBar .offset-container { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-sizing: border-box; } /* --- if container set to text-height but no text --- */ .contentBar[data-height="0"] .offset-container:last-child { position: relative; top: auto; right: auto; bottom: auto; left: auto; } .contentBar .offset-container[data-offset-gap="1"] { padding: 3rem; padding: 3vw; } .contentBar .offset-container[data-content-width="0"] { left: 0; width: 100%; } .contentBar .offset-container[data-content-width="1"] { width: 66%; width: calc(66% - 4vw); } .contentBar .offset-container[data-content-width="2"] { width: 50%; } .contentBar .offset-container[data-content-width="3"] { width: 33%; } .contentBar .offset-container[data-content-width="1"][data-content-position="0"], .contentBar .offset-container[data-content-width="1"][data-content-position="3"], .contentBar .offset-container[data-content-width="1"][data-content-position="6"] { left: 33%; } .contentBar .offset-container[data-content-width="1"][data-content-position="1"], .contentBar .offset-container[data-content-width="1"][data-content-position="4"], .contentBar .offset-container[data-content-width="1"][data-content-position="7"] { left: 33%; } .contentBar .offset-container[data-content-width="2"][data-content-position="0"], .contentBar .offset-container[data-content-width="2"][data-content-position="3"], .contentBar .offset-container[data-content-width="2"][data-content-position="6"] { left: 50%; } .contentBar .offset-container[data-content-width="2"][data-content-position="1"], .contentBar .offset-container[data-content-width="2"][data-content-position="4"], .contentBar .offset-container[data-content-width="2"][data-content-position="7"] { left: 50%; } .contentBar .offset-container[data-content-width="3"][data-content-position="0"], .contentBar .offset-container[data-content-width="3"][data-content-position="3"], .contentBar .offset-container[data-content-width="3"][data-content-position="6"] { left: 66%; } .contentBar .offset-container[data-content-width="3"][data-content-position="1"], .contentBar .offset-container[data-content-width="3"][data-content-position="4"], .contentBar .offset-container[data-content-width="3"][data-content-position="7"] { left: 66%; } .contentBar .offset-container[data-content-position="2"], .contentBar .offset-container[data-content-position="5"], .contentBar .offset-container[data-content-position="8"] { left: 0; } /* --- OFFSET GRAPHIC --- */ .contentBar .offset-graphic { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; } .offset-graphic img { display: inline-block; width: auto; max-width: 100%; height: auto; max-height: 100%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } /* --- MAP IN FIRST LEVEL --- */ .contentBar .background-map { position: absolute; top: 0; right: 0; left: 0; height: 100%; } /* --- CONTENT CONTAINER --- */ .contentBar .content-container { position: relative; display: flex; width: 100%; align-content: stretch; z-index: 2; } /* --- content height --- */ .contentBar .content-container::before { content: ""; float: left; width: 1px; margin-left: -1px; } .contentBar[data-height="2"] .content-container::before { height: 25vh; min-height: 300px; } .contentBar[data-height="3"] .content-container::before { height: 50vh; min-height: 300px; } .contentBar[data-height="4"] .content-container::before { height: 75vh; min-height: 300px; } .contentBar[data-height="5"] .content-container::before { height: 100vh; min-height: 300px; } /* --- content outer container --- */ .contentBar .container { display: flex; align-items: center; justify-content: center; padding: 4rem 0; color: rgb(var(--textColor)); } .contentBar[data-bg-color="0"]:has(.content-container:only-child) .container { padding: 0; } .contentBar .container[data-content-layout="3"] { width: 100%; padding: 0; } /* --- CONTENT POSITION --- */ /* --- oben links (default) --- */ .contentBar .container[data-content-position="0"] { align-items: flex-start; justify-content: flex-start; } /* --- oben mitte --- */ .contentBar .container[data-content-position="1"] { align-items: flex-start; justify-content: center; } .no-csstransitions .contentBar .container[data-content-position="1"] { text-align: center; } /* --- oben rechts --- */ .contentBar .container[data-content-position="2"] { align-items: flex-start; justify-content: flex-end; } .no-csstransitions .contentBar .container[data-content-position="2"] { text-align: right; } /* --- mitte links --- */ .contentBar .container[data-content-position="3"] { align-items: center; justify-content: flex-start; } /* --- mitte mitte --- */ .contentBar .container[data-content-position="4"] { align-items: center; justify-content: center; } .no-csstransitions .contentBar .container[data-content-position="4"] { text-align: center; } /* --- mitte rechts --- */ .contentBar .container[data-content-position="5"] { align-items: center; justify-content: flex-end; } .no-csstransitions .contentBar .container[data-content-position="5"] { text-align: right; } /* --- unten links --- */ .contentBar .container[data-content-position="6"] { align-items: flex-end; justify-content: flex-start; } /* --- unten mitte --- */ .contentBar .container[data-content-position="7"] { align-items: flex-end; justify-content: center; } .no-csstransitions .contentBar .container[data-content-position="7"] { text-align: center; } /* --- unten rechts --- */ .contentBar .container[data-content-position="8"] { align-items: flex-end; justify-content: flex-end; } .no-csstransitions .contentBar .container[data-content-position="8"] { text-align: right; } .contentBar .offset-container + .content-container { pointer-events: none; } /* --- BAR CONTENT --- */ .contentBar .container .section-content { display: inline-block; width: 100%; box-sizing: border-box; border-radius: 2px; pointer-events: auto; z-index: 1; } /* --- text width --- */ /* no background */ .contentBar .container[data-content-width="1"] .section-content { width: 31.7535%; width: var(--grid_col8_100); } .contentBar .container[data-content-width="2"] .section-content { width: 44.5497%; width: var(--grid_col11_100); } .contentBar .container[data-content-width="3"] .section-content { width: 65.8767%; width: var(--grid_col16_100); } /* - full background */ .contentBar .container[data-content-width="1"][data-content-layout="1"] .section-content { width: 31.7535%; width: var(--grid_col8_100); } .contentBar .container[data-content-width="2"][data-content-layout="1"] .section-content { width: 44.5497%; width: var(--grid_col12_100); } .contentBar .container[data-content-width="3"][data-content-layout="1"] .section-content { width: 65.8767%; width: var(--grid_col16_100); } /* -- complete background -- */ .contentBar .container[data-content-width="1"][data-content-layout="3"] .section-content { width: 33%; } .contentBar .container[data-content-width="2"][data-content-layout="3"] .section-content { width: 50%; } .contentBar .container[data-content-width="3"][data-content-layout="3"] .section-content { width: 66%; } /* --- text justify --- */ .contentBar .content-container .section-content.justify0 { text-align: left; } .contentBar .content-container .section-content.justify1 { text-align: right; } .contentBar .content-container .section-content.justify2 { text-align: center; } /* --- text padding --- */ .contentBar .container[data-content-layout="1"] .section-content, .contentBar .container[data-content-layout="3"] .section-content { padding: 3rem; padding: var(--grid_colgutter1_100); } /* --- container for complete background --- */ .contentBar .container[data-content-layout="3"] .section-content::before { content: ""; position: absolute; display: block; top: 0; bottom: 0; left: 0; width: 100%; z-index: -1; } .contentBar .container[data-content-layout="3"][data-content-width="1"] .section-content::before { width: 33%; } .contentBar .container[data-content-layout="3"][data-content-width="2"] .section-content::before { width: 50%; } .contentBar .container[data-content-layout="3"][data-content-width="3"] .section-content::before { width: 66%; } /* --- zentriert --- */ .contentBar .container[data-content-layout="3"][data-content-position="1"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="4"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="7"] .section-content::before { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* --- rechtsbündig --- */ .contentBar .container[data-content-layout="3"][data-content-position="2"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="5"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="8"] .section-content::before { right: 0; left: auto; } .contentBar .offset-container + .content-container .section-content { pointer-events: auto; } .contentBar .container .section-content > *:first-child { margin-top: 0; } .contentBar .container .section-content > *:last-child { margin-bottom: 0; } /* --- HIGHLIGHT BACKGROUND --- */ .contentBar .container[data-content-layout="2"] .section-content h2, .contentBar .container[data-content-layout="2"] .section-content h3, .contentBar .container[data-content-layout="2"] .section-content h4, .contentBar .container[data-content-layout="2"] .section-content p, .contentBar .container[data-content-layout="2"] .section-content .gallery-title { box-decoration-break: clone; display: inline; line-height: 1.5; } .contentBar .container[data-content-layout="2"] .section-content h2::before, .contentBar .container[data-content-layout="2"] .section-content h2::after, .contentBar .container[data-content-layout="2"] .section-content h3::before, .contentBar .container[data-content-layout="2"] .section-content h3::after, .contentBar .container[data-content-layout="2"] .section-content h4::before, .contentBar .container[data-content-layout="2"] .section-content h4::after, .contentBar .container[data-content-layout="2"] .section-content p::before, .contentBar .container[data-content-layout="2"] .section-content p::after, .contentBar .container[data-content-layout="2"] .section-content .gallery-title::before, .contentBar .container[data-content-layout="2"] .section-content .gallery-title::after { content: ""; display: block; width: 100%; height: 0; margin: 1rem 0; } .contentBar .container[data-content-layout="2"] .section-content ul { clear: both; } .contentBar .container[data-content-layout="2"] .section-content > ul li { position: relative; float: left; margin: 2px 0; padding: 0; clear: both; } .contentBar .container[data-content-layout="2"] .section-content > ul.list-plus li::before, .contentBar .container[data-content-layout="2"] .section-content > ul.list-check li::before { top: 2px; } .contentBar .container[data-content-layout="2"] .section-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-content-layout="2"] .section-content > ul.list-plus li::after, .contentBar .container[data-content-layout="2"] .section-content > ul.list-check li::after { left: -1.618em; } /* --- FULL & COMPLETE BACKGROUND --- */ .contentBar .container[data-content-layout="1"] .section-content { background-color: rgba(var(--bgColor),0.85); background-color: rgba(var(--bgColor),var(--bg-opacity)); } /* --- HIGHLIGHT BACKGROUND --- */ .contentBar .container[data-content-layout="2"] .section-content h2, .contentBar .container[data-content-layout="2"] .section-content h3, .contentBar .container[data-content-layout="2"] .section-content h4, .contentBar .container[data-content-layout="2"] .section-content p, .contentBar .container[data-content-layout="2"] .section-content .gallery-title, .contentBar .container[data-content-layout="2"] .section-content > ul li::after { background-color: rgb(var(--bgColor)); background-color: rgba(var(--bgColor),0.85); background-color: rgba(var(--bgColor),var(--bg-opacity)); box-shadow: 0.5rem 0 0 rgba(var(--bgColor),0.85), -0.5rem 0 0 rgba(var(--bgColor),0.85); box-shadow: 0.5rem 0 0 rgba(var(--bgColor),var(--bg-opacity)), -0.5rem 0 0 rgba(var(--bgColor),var(--bg-opacity)); } /* --- COMPLETE BACKGROUND --- */ .contentBar .container[data-content-layout="3"] .section-content::before { background-color: rgba(var(--bgColor),0.85); background-color: rgba(var(--bgColor),var(--bg-opacity)); } .gallery-title { margin: 2rem 0 1rem; } .contentBar .offset-container .gallery-title { display: none; } .media-gallery { position: relative; display: block; margin: 1rem 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .media-gallery.tInfinity { padding-bottom: 60px; } .media-gallery.tInfinity.hide-infinity { padding-bottom: 0; } .contentBar .offset-container .media-gallery, .contentBar .offset-container .media-gallery.wide { margin: 0; } .media-gallery.wide { left: 0; left: calc(-50vw + 50%); width: 100vw; margin: 4rem 0; box-sizing: border-box; } .overlay-holder .media-gallery.wide { left: calc(-42vw + 50%); width: 84vw; } .contentBar .container .media-gallery.wide, .contentBar .offset-container .media-gallery.wide { left: auto; width: 100%; margin: 0; } /* --- swiffy --- */ /* 66% */ .col-layout.type3 > .column:nth-of-type(2n + 1) .media-gallery.carousel.swiffy-slider, .col-layout.type4 > .column:nth-of-type(2n) .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="3"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="1"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 3; } /* 50% */ .col-layout.type1 .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="2"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="2"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 2; } /* 25%, 33% */ .col-layout .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="1"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="3"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 1; } .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { position: relative; width: 100%; margin: 0; } .media-gallery.btn-video:not(.single-media):not(.gallery-slideshow) .gallery-page { display: inline-block; width: 100%; margin: 0; } .no-cssgrid .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { position: relative; width: 102.36966%; margin: 0 -1.1848%; margin: 0 calc(-1 * var(--grid_gutter1_half_100)); } .no-cssgrid .contentBar .offset-container .media-gallery:only-child:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 100%; margin: 0; } .media-gallery.carousel .gallery-page { width: 100%; margin: 0; } .media-gallery .gallery-page.changing { overflow: hidden; } /* --- swiffy --- */ .media-gallery.carousel:not(.slider-item-nogap) .slider-container { --swiffy-slider-item-gap: var(--grid_gutter1_100); } .media-gallery.carousel .slider-container { overflow-x: auto; } /* --- WRAPPER FOR NAVIGATION --- */ .media-gallery .wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; overflow: hidden; } .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 .offset-container .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%; } .media-gallery.gallery-thumbgrid .wrap { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 1.5rem var(--grid_gutter1_100); } .col-layout .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(2, 1fr); grid-gap: 1.5rem var(--grid_gutter1_33); } .col-layout.type1 .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(4, 1fr); grid-gap: 1.5rem var(--grid_gutter1_50); } .col-layout.type3 > .column:nth-of-type(2n + 1) .media-gallery.gallery-thumbgrid .wrap, .col-layout.type4 > .column:nth-of-type(2n) .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(4, 1fr); grid-gap: 1.5rem var(--grid_gutter1_66); } .contentBar .container:not([data-content-width="0"]) .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(4, 1fr); grid-gap: 1.5rem var(--grid_gutter1_66); } .media-gallery.gallery-audio .wrap, .media-gallery.gallery-video .wrap { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.5rem var(--grid_gutter1_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 .offset-container .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; } .overlay .gal-img.lazy { display: none; } .pageoverlay-item.new .gal-img.lazy, .pageoverlay-item.active .gal-img.lazy { display: block; } .media-gallery .gallery-item .gal-img.lazy { opacity: 0; } .contentBar .offset-container .gallery-slideshow .gallery-item .gal-img, .contentBar .offset-container .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 .gal-img.lores { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; padding: 0; opacity: 0.75; } .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; width: 100%; margin: 0; -webkit-transition: width 0.3s, margin 0.3s; transition: width 0.3s, margin 0.3s; } /* --- THUMBGRID THUMBNAILS --- */ .gallery-thumbgrid .gallery-item { position: relative; vertical-align: top; -webkit-transition: width 0.3s, margin 0.3s; transition: width 0.3s, margin 0.3s; } .no-cssgrid .gallery-thumbgrid .gallery-item { width: 10.1851%; margin: 1.1574%; } .no-cssgrid .col-layout .gallery-thumbgrid .gallery-item { width: 21.8521%; margin: 1.5743%; } .no-cssgrid .layout0 .col-layout .gallery-thumbgrid .gallery-item { width: 29.1367%; margin: 2.0992%; } .gallery-thumbgrid .gallery-item .item-container { background-color: rgba(var(--textColor),0.1); } .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(var(--galleryColor)); background: rgba(var(--galleryColor),0.8); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; } .no-touchevents .hover1 .gallery-item a:hover:after, .no-touchevents .hover1 .gallery-item a:active:after { top: -3px; right: -3px; bottom: -3px; left: -3px; } /* --- ZOOM IMAGE --- */ .no-touchevents .hover2 .gallery-item a:hover .gal-img, .no-touchevents .hover2 .gallery-item a:active .gal-img, .no-touchevents .hover3 .gallery-item a:hover .gal-img, .no-touchevents .hover3 .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-touchevents a:hover .gal-zoom, .no-touchevents 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(var(--white)); -webkit-transition: all 0.3s; transition: all 0.3s; } .single-media .gallery-page .gal-zoom span { font-size: 5rem; } .contentBar .container:not([data-content-width="0"]) .col-layout .single-media .gallery-page .gal-zoom span { font-size: 3rem; } .contentBar .gal-zoom span i { color: rgb(var(--white)); } /* --- ZOOM IMAGE & BKGD --- */ .hover3 .gal-zoom, .hover4 .gal-zoom { background: rgba(var(--galleryColor),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-touchevents .gallery-slideshow.hover3 a:hover .gal-zoom, .no-touchevents .gallery-slideshow.hover3 a:active .gal-zoom, .no-touchevents .gallery-slideshow.hover4 a:hover .gal-zoom, .no-touchevents .gallery-slideshow.hover4 a:active .gal-zoom, .no-touchevents .single-media.hover3 a:hover .gal-zoom, .no-touchevents .single-media.hover3 a:active .gal-zoom, .no-touchevents .single-media.hover4 a:hover .gal-zoom, .no-touchevents .single-media.hover4 a:active .gal-zoom { background: rgba(var(--galleryColor),0.6); } .hover3 .gal-zoom span { background: transparent; } /* --- VIDEO ALBUM / AUDIO ALBUM --- */ .no-cssgrid .gallery-audio .gallery-item, .no-cssgrid .gallery-video .gallery-item { display: inline-block; width: 31.0184%; margin: 1.1574%; vertical-align: top; } .no-cssgrid .layout0 .gallery-audio .gallery-item, .no-cssgrid .layout0 .gallery-audio .gallery-item { width: 30.247%; margin: 1.5432%; } .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(var(--textColor)); } .no-touchevents .nav-pages a:hover, .no-touchevents .nav-pages a:active { background-color: rgba(var(--textColor),0.15); color: rgb(var(--textColor)); } .nav-pages .active, .no-touchevents .nav-pages .active:hover, .no-touchevents .nav-pages .active:active { border: 1px solid rgba(var(--textColor),0.25); background-color: rgba(var(--textColor),0.25); cursor: default; } .nav-pages .active span { cursor: default; } .nav-pages .disabled, .no-touchevents .nav-pages .disabled:hover, .no-touchevents .nav-pages .disabled:active { background-color: transparent; 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; } /* --- PHOTOALBUM - SLIDESHOW --- */ .gallery-slideshow.left { float: left; width: 48.8151%; margin-right: var(--grid_gutter1_100); padding: 0; } .layout0 .gallery-slideshow.left { width: 48.407139%; margin-right: 3.1847%; } .col-layout .gallery-slideshow.left { float: none; width: 100%; margin-right: 0; } .gallery-slideshow.right { float: right; width: 48.8151%; margin-left: var(--grid_gutter1_100); padding: 0; } .layout0 .gallery-slideshow.right { width: 48.407139%; margin-left: 3.1847%; } .col-layout .gallery-slideshow.right { float: none; width: 100%; margin-left: 0; } .contentBar .offset-container .gallery-slideshow { position: relative; float: none; width: 100%; height: 100%; margin: 0; padding: 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; } /* --- SINGLE VIDEO --- */ .media-gallery.single-media { width: 48.8151%; } .layout0 .media-gallery.single-media { width: 48.407139%; } /* --- left --- */ .media-gallery.single-media[data-layout="0"] { float: left; margin-top: 0.33rem; margin-right: 2.3696%; margin-right: var(--grid_gutter1_100); } .layout0 .media-gallery.single-media[data-layout="0"] { margin-right: 3.1847%; } /* --- right --- */ .media-gallery.single-media[data-layout="1"] { float: right; margin-top: 0.33rem; margin-left: 2.3696%; margin-left: var(--grid_gutter1_100); } .layout0 .media-gallery.single-media[data-layout="1"] { margin-left: 3.1847%; } /* --- 100% | col content --- */ .media-gallery.single-media[data-layout="2"], .col-layout .media-gallery.single-media[data-layout="0"], .layout0 .col-layout .media-gallery.single-media[data-layout="0"], .col-layout .media-gallery.single-media[data-layout="1"], .layout0 .col-layout .media-gallery.single-media[data-layout="1"] { float: none; width: 100%; margin: 0; } .contentBar .offset-container .media-gallery.single-media { position: relative; float: none; width: 100%; height: 100%; margin: 0; } .single-media .gallery-item { position: relative; box-sizing: border-box; cursor: pointer; overflow: hidden; } .contentBar .offset-container .single-media .gallery-item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; margin: 0; } .single-media .gallery-page h3, .btn-video .gallery-page h3 { margin-top: 0; } .content .single-media .gallery-page .gal-text { margin: 1rem 0 0; } .content .single-media .gallery-page .gal-text:empty, .contentBar .offset-container .single-media .gallery-page h3, .contentBar .offset-container .single-media .gal-text { display: none; } .single-media .gallery-item .gal-img { padding: 0 0 56.25%; } .contentBar .offset-container .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 .iframe-wrapper, .single-media .gallery-item .video-container { position: relative; display: block; width: 100%; height: 0; padding: 0 0 56.25%; background: rgb(var(--textColor)); } .contentBar .offset-container .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 .iframe-wrapper iframe, .single-media .gallery-item .video-container iframe, .single-media .gallery-item .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --- SINGLE AUDIO --- */ .audio-player { max-width: var(--maxWidth); margin: 2rem 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .contentBar .section-content.justify2 > .audio-player { margin-right: auto; margin-left: auto; } .player-container { position: relative; overflow: hidden; } .waveform { width: 100%; color: rgb(var(--highlightColor)); } .audio-player .activity-indicator.pending { z-index: 5; } .audio-player .track-image { position: relative; display: block; -webkit-transition: all 0.3s; transition: all 0.3s; } .audio-player .track-image-img { display: block; width: 100%; height: 0; padding: 0 0 100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .audio-player[data-layout="1"] { display: grid; grid-template-columns: 200px 1fr; grid-column-gap: 1.5rem; } .audio-player[data-layout="1"] > .track-image { width: 100%; grid-column-start: 1; grid-column-end: 2; grid-row: span 2; } .audio-player.multiple-track[data-layout="1"] > .track-image { grid-row: span 3; } .audio-player[data-layout="1"] .title-h2 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; margin-top: 0; } .audio-player[data-layout="1"] .player-container { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } .audio-player[data-layout="1"] .track-text { grid-column: span 3; grid-row-start: 3; grid-row-end: 4; } .audio-player[data-layout="1"] .player-list { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; } /* -- single track -- */ .audio-player.single-track .title-h2:has(.track-download) { display: flex; align-items: flex-start; justify-content: space-between; } .audio-player.single-track .title-h2 .track-download { margin-left: 1rem; font-size: 0.75em; } .audio-player.single-track .track-text { margin: 1rem 0 0; } /* -- playlist -- */ .player-list { margin: 0; padding: 0; list-style: none; } .player-list li { display: flex; align-items: flex-start; justify-content: flex-start; border-bottom: 1px solid rgb(var(--textColor)); padding: 0; } .audio-player .player-list a { border: 0; text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; color: rgb(var(--neutralColorStrong)); } .no-touchevents .audio-player .player-list a:hover { background-color: rgba(var(--textColor),0.1); } .player-list .player-track { display: flex; align-items: flex-end; justify-content: flex-start; flex-grow: 1; padding: 0.75rem 1rem 0.75rem 50px; } .player-list .player-track.active { background-color: rgba(var(--textColor),0.2); } .no-touchevents .audio-player .player-list .player-track.active:hover { background-color: rgba(var(--textColor),0.2); cursor: default; } .player-list .player-track::before { content: "\f144"; position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 50px; height: 100%; font-family: 'Font Awesome 6 Pro'; font-size: 1.4em; line-height: 1; font-weight: 400; } .audio-player.playing .player-track.active::before { content: "\f6a8"; font-weight: 900; } .player-list .track-image { width: 25px; margin-right: 1rem; } .player-list .track-title { padding-right: 1rem; } .player-list .track-duration { margin-left: auto; } .player-list .track-download { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; flex-shrink: 0; width: 50px; font-size: 1.2em; } /* --- 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; border: 0; padding: 10px; background-color: rgba(var(--textColor),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(var(--bgColor)); } .contentGallery .galNav .next span { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .contentGallery .galNav span::before, .contentGallery .galNav span::after { content: ""; position: absolute; left: 25%; width: 4px; height: 50%; color: rgb(var(--bgColor)); backface-visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .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; } .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-touchevents .contentGallery .galNav a:hover span, .no-touchevents .contentGallery .galNav a:hover span { color: rgb(var(--highlightColor)); } .no-touchevents .contentGallery .galNav a:hover span::before, .no-touchevents .contentGallery .galNav a:hover span::after { background: rgb(var(--highlightColor)); } .contentGallery .galNav span i { display: none; } .contentGallery .galImg { text-align: center; } .contentGallery .galImg img { display: inline-block; width: auto; max-width: 100%; height: auto; } /* --- SLIDESHOW/SLIDER NAV DOTS --- */ .slidetabs { position: relative; margin: 5px 0 0; text-align: center; z-index: 1; } .iSlider .slidetabs { position: absolute; right: 2vw; right: calc(2vw - 5px); bottom: 2vw; bottom: calc(2vw - 5px); margin: 0; z-index: 5; } .slidetabs.hide { opacity: 0; visibility: hidden; } .indextabs { position: absolute; bottom: 2.5%; bottom: 2.5vw; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); text-align: center; z-index: 5; } .indextabs[data-status="hide"] { display: none; } .contentBar .offset-container .gallery-slideshow .slidetabs { position: absolute; right: 0.5em; bottom: 0.5em; left: 0.5em; margin: 0; } .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; padding: 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; -webkit-transition: all 0.3s; transition: all 0.3s; outline: none; width: 15px; height: 15px; border: 0; border-radius: 50%; background-color: rgba(var(--textColor),0.15); } .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; } .no-touchevents .slidetabs a:hover span, .no-touchevents .slidetabs a:active span, .no-touchevents .indextabs a:hover span, .no-touchevents .indextabs a:active span { background-color: rgba(var(--textColor),0.3); } .slidetabs a.active span, .indextabs a.active span, .no-touchevents .slidetabs a.active:hover span, .no-touchevents .slidetabs a.active:active span, .no-touchevents .indextabs a.active:hover span, .no-touchevents .indextabs a.active:active span { cursor: default; background-color: rgb(var(--highlightColor)); } .no-touchevents .slidethumbs a:hover span, .no-touchevents .slidethumbs a:active span { opacity: 1; } .slidethumbs a.active span, .no-touchevents .slidethumbs a.active:hover span, .no-touchevents .slidethumbs a.active:active span { border: 2px solid rgb(var(--highlightColor)); padding: 0; cursor: default; } .slidethumbs a.active span, .no-touchevents .slidethumbs a.active:hover span, .no-touchevents .slidethumbs a.active:active span { opacity: 1; } .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(var(--bgColor)); z-index: -1; } .slidethumbs a span:before { display: none; } /* --- NAV ARROWS (OVERLAY/SLIDER) --- */ .overlay > .nav, .iSlider .nav-arrows { position: absolute; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; z-index: 5; top: 50%; width: 50px; height: 50px; border: 0; border-radius: 50%; background-color: rgba(var(--black),0.2); -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } .overlay > .nav.prev, .iSlider .nav-arrows.prev { left: 2%; left: 2vw; } .overlay > .nav.next, .iSlider .nav-arrows.next { right: 2%; right: 2vw; } .overlay > .nav.disabled, .iSlider .nav-arrows.disabled { opacity: 0.3; cursor: default; } .overlay > .nav.hide, .overlay.inactive > .nav, .iSlider .nav-arrows.hide { opacity: 0; visibility: hidden; } .overlay > .nav.img-view { opacity: 0; visibility: hidden; } .no-touchevents .overlay > .nav:not(.disabled):hover, .no-touchevents .iSlider .nav-arrows:not(.disabled):hover { background-color: rgba(var(--white),0.6); } .iSlider .nav-arrows a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .overlay > .nav span, .iSlider .nav-arrows 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, .iSlider .nav-arrows.next span { margin-left: 15%; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .overlay > .nav span::before, .overlay > .nav span::after, .iSlider .nav-arrows span::before, .iSlider .nav-arrows span::after { content: ""; position: absolute; backface-visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; left: 25%; width: 3px; height: 50%; background-color: rgb(var(--white)); } .overlay > .nav span::before, .iSlider .nav-arrows span::before { -webkit-transform: translate(-50%,0) rotate(45deg); transform: translate(-50%,0) rotate(45deg); -webkit-transform-origin: 0 100% 0; transform-origin: 0 100% 0; } .overlay > .nav span::after, .iSlider .nav-arrows span::after { top: 50%; -webkit-transform: translate(-50%,0) rotate(-45deg); transform: translate(-50%,0) rotate(-45deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; } .no-touchevents .overlay > .nav:not(.disabled):hover span::before, .no-touchevents .overlay > .nav:not(.disabled):hover span::after, .no-touchevents .iSlider .nav-arrows:not(.disabled):hover span::before, .no-touchevents .iSlider .nav-arrows:not(.disabled):hover span::after { background-color: rgb(var(--black)); } /* --- THUMBGRID NAV INFINITY --- */ .nav-infinity { margin: 0; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 3; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; } .nav-infinity.disabled { opacity: 0.3; cursor: default; } .nav-infinity.hide { opacity: 0; visibility: hidden; } .nav-infinity a { position: relative; display: block; cursor: pointer; } .nav-infinity a.disabled { opacity: 0.3; cursor: default; } .nav-infinity a.hide { opacity: 0; visibility: hidden; } .nav-infinity a span { box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; display: block; width: 100%; height: 100%; margin: 0; font-size: 3em; line-height: 1; color: rgb(var(--textColor)); } .nav-infinity a.disabled span { cursor: default; } .no-touchevents .nav-infinity:not(.disabled) a:not(.disabled):hover span, .no-touchevents .nav-infinity:not(.disabled) a:not(.disabled):active span { color: rgb(var(--highlightColor)); } /* --- CLOSE BUTTON --- */ .labeled-icon { position: absolute; display: block; z-index: 5; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; top: 2vw; right: 2vw; width: 50px; height: 50px; border: 0; border-radius: 50%; padding: 0; background-color: rgba(var(--black),0.15); } .no-touchevents .labeled-icon:not(.disabled):hover, .no-touchevents .labeled-icon:not(.disabled):active { background-color: rgba(var(--white),0.6); } .labeled-icon .icon { position: relative; display: block; width: 50%; height: 50%; margin: 25% 0 0 25%; background: transparent; -webkit-transition: all 0.3s; transition: all 0.3s; } button.labeled-icon .icon { margin-top: 0; } .no-touchevents .labeled-icon:hover .icon, .no-touchevents .labeled-icon:active .icon { background: transparent; } .labeled-icon .icon::before, .labeled-icon .icon::after { content: ""; position: absolute; backface-visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; top: 0; left: 45%; width: 3px; height: 100%; background-color: rgb(var(--white)); } .labeled-icon .icon::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .labeled-icon .icon::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .no-touchevents .labeled-icon:hover .icon::before, .no-touchevents .labeled-icon:active .icon::before, .no-touchevents .labeled-icon:hover .icon::after, .no-touchevents .labeled-icon:active .icon::after { background-color: rgb(var(--black)); } .labeled-icon i { display: none; } /* --- CLOSE BUTTON --- */ .overlay .close.img-view { opacity: 0; } .overlay.inactive .close { opacity: 0; visibility: hidden; } /* --- SCROLL ICON --- */ .scrollicon { position: absolute; box-sizing: border-box; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 2; bottom: 2vw; left: 50%; width: 50px; height: 50px; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } .no-touchevents .scrollicon:hover { } .scrollicon span { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 50%; background-color: rgba(var(--textColor),0.15); font-size: 1.6em; color: rgb(var(--bgColor)); } .no-touchevents .scrollicon:hover span { background-color: rgba(var(--bgColor),0.6); color: rgb(var(--textColor)); } /* --- LOADER ICON --- */ .loader { position: fixed; display: block; top: 0; right: 0; bottom: 0; left: 0; background: rgba(var(--black),0.25); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; pointer-events: none; z-index: -1; } /* --- pages in bildergalerie --- */ .gallery-page .loader { background: rgba(var(--textColor),0.7); } .form-modal .loader { background: transparent; } /* --- loader in overlay --- */ .overlay > .loader { opacity: 1; } .loader.view { opacity: 1; } .loader.hide { opacity: 0; } .loader span { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; padding: 0; opacity: 0.5; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; font-size: 15em; font-size: calc(100% + 20vw); line-height: 1; color: rgb(var(--white)); } /* --- pages in bildergalerie --- */ .gallery-page .loader span { background: rgba(var(--bgColor),0.2); } .overlay { position: fixed; display: none; top: 0; right: 0; bottom: 0; left: 0; background: rgb(var(--black)); background: rgba(var(--black),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 PAGE --- */ .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: 1400px; margin: 0 auto; border-radius: 2px; padding: 0; box-shadow: 0 0 10px rgba(var(--black),0.9); 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(var(--bgColor)); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .body-splash + .overlay-holder { background: transparent; } .overlay-holder .general-width { width: 92%; max-width: 1280px; } .overlay-holder > div { position: relative; display: inline-block; float: none; vertical-align: top; } .overlay-holder .content { text-align: left; } .overlay-holder .content h1 { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* --- OVERLAY GALLERY --- */ .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 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 .galImg .video-container, .overlay .galImg .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(var(--black)); z-index: 5; } .overlay .galImg .iframe-container iframe, .overlay .galImg .video-container iframe, .overlay .galImg .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 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 DESCRIPTION --- */ .overlay .galImg .text { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background: rgba(var(--black),0.6); color: rgb(var(--black)); color: rgba(var(--white),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; } /* -- INDEX ----------------------------------------*/ .index { position: relative; clear: both; } .index ul { position: relative; display: grid; margin: 0; padding: 0; list-style: none; overflow: inherit; overflow: initial; } .no-cssgrid .index ul { display: flex; flex-wrap: wrap; width: 102.36966%; margin: 0 -1.1848%; } .index ul.slider-container { --swiffy-slider-item-gap: var(--grid_gutter1_100); grid-template-columns: none; grid-column-gap: var(--swiffy-slider-item-gap); overflow-x: auto; } .index.swiffy-slider ul[data-slide-length="1"], .index.swiffy-slider ul[data-slide-length="2"], .index.swiffy-slider ul[data-slide-length="3"] { --swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count)); } .index li { position: relative; display: flex; width: 100%; margin: 1rem 0; padding: 0; } .no-cssgrid .index li { display: inline-block; display: inline-flex; width: 31.0184%; margin-right: 1.1574%; margin-left: 1.1574%; } .index ul.slider-container li { margin: 0; } .index li * { box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; } .index li span { display: block; } .index li .ix-item { position: relative; display: flex; flex-direction: column; width: 100%; border: 0; overflow: hidden; cursor: pointer; } .index li .ix-item a { border: 0; background-color: transparent; text-decoration: none; } .index li .ix-item a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .index li .ix-item a:focus { text-decoration: underline; } .index li .ix-item:focus-within a:focus { text-decoration: none; } .index .ix-maintitle { margin: 0; } .index .ix-img { position: relative; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .image-default::after, .index .ix-img.image-default::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; opacity: 0.2; } .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-more span { display: inline-block; } .index .ix-more i { padding: 0 0 0 5px; } /* --- TITLE (TITLE DESC) --- */ .index .ix-title { grid-template-columns: repeat(2, 1fr); } .no-cssgrid .ix-title li { width: 47.6851%; } .ix-title li .ix-item { display: block; } .ix-title .ix-headline { position: relative; display: inline-block; } /* --- TEXT (TITLE DESC) --- */ /* --- FULL (TITLE IMG DESC) --- */ .ix-full .ix-headline { order: 2; } .ix-full .ix-img { order: 1; } .ix-full .ix-desc { order: 3; } .ix-full .ix-more { order: 4; } /* --- BILD (TITLE IMG DESC) --- */ .ix-bild .ix-headline { z-index: 1; } .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); } } /* --- background images (hero, slider, contentbar) --- */ .hero .lores[data-orientation=""], .iSlider .item-container[data-orientation=""] .item-img > span, .iSlider .item-container[data-orientation=""] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation=""] > div, .contentBar .background-container[data-orientation=""] > div div, .index .ix-img[data-orientation=""], .hero .lores[data-orientation="0"], .iSlider .item-container[data-orientation="0"] .item-img > span, .iSlider .item-container[data-orientation="0"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="0"] > div, .contentBar .background-container[data-orientation="0"] > div div, .index .ix-img[data-orientation="0"] { background-position: center; } .hero .lores[data-orientation="1"], .iSlider .item-container[data-orientation="1"] .item-img > span, .iSlider .item-container[data-orientation="1"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="1"] > div, .contentBar .background-container[data-orientation="1"] > div div, .index .ix-img[data-orientation="1"] { background-position: left top; } .hero .lores[data-orientation="2"], .iSlider .item-container[data-orientation="2"] .item-img > span, .iSlider .item-container[data-orientation="2"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="2"] > div, .contentBar .background-container[data-orientation="2"] > div div, .index .ix-img[data-orientation="2"] { background-position: center top; } .hero .lores[data-orientation="3"], .iSlider .item-container[data-orientation="3"] .item-img > span, .iSlider .item-container[data-orientation="3"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="3"] > div, .contentBar .background-container[data-orientation="3"] > div div, .index .ix-img[data-orientation="3"] { background-position: right top; } .hero .lores[data-orientation="4"], .iSlider .item-container[data-orientation="4"] .item-img > span, .iSlider .item-container[data-orientation="4"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="4"] > div, .contentBar .background-container[data-orientation="4"] > div div, .index .ix-img[data-orientation="4"] { background-position: right center; } .hero .lores[data-orientation="5"], .iSlider .item-container[data-orientation="5"] .item-img > span, .iSlider .item-container[data-orientation="5"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="5"] > div, .contentBar .background-container[data-orientation="5"] > div div, .index .ix-img[data-orientation="5"] { background-position: right bottom; } .hero .lores[data-orientation="6"], .iSlider .item-container[data-orientation="6"] .item-img > span, .iSlider .item-container[data-orientation="6"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="6"] > div, .contentBar .background-container[data-orientation="6"] > div div, .index .ix-img[data-orientation="6"] { background-position: center bottom; } .hero .lores[data-orientation="7"], .iSlider .item-container[data-orientation="7"] .item-img > span, .iSlider .item-container[data-orientation="7"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="7"] > div, .contentBar .background-container[data-orientation="7"] > div div, .index .ix-img[data-orientation="7"] { background-position: left bottom; } .hero .lores[data-orientation="8"], .iSlider .item-container[data-orientation="8"] .item-img > span, .iSlider .item-container[data-orientation="8"] .item-img .lores, .contentBar .background-container[data-bg-layout="5"][data-orientation="8"] > div, .contentBar .background-container[data-orientation="8"] > div div, .index .ix-img[data-orientation="8"] { background-position: left center; } /* --- image/video as background (hero, slider, contentbar) --- */ img[data-orientation=""], [data-orientation=""] img, video[data-orientation=""], [data-orientation=""] video, img[data-orientation="0"], [data-orientation="0"] img, video[data-orientation="0"], [data-orientation="0"] video { -o-object-position: center center; object-position: center center; } img[data-orientation="1"], [data-orientation="1"] img, video[data-orientation="1"], [data-orientation="1"] video { -o-object-position: left top; object-position: left top; } img[data-orientation="2"], [data-orientation="2"] img, video[data-orientation="2"], [data-orientation="2"] video { -o-object-position: center top; object-position: center top; } img[data-orientation="3"], [data-orientation="3"] img, video[data-orientation="3"], [data-orientation="3"] video { -o-object-position: right top; object-position: right top; } img[data-orientation="4"], [data-orientation="4"] img, video[data-orientation="4"], [data-orientation="4"] video { -o-object-position: right center; object-position: right center; } img[data-orientation="5"], [data-orientation="5"] img, video[data-orientation="5"], [data-orientation="5"] video { -o-object-position: right bottom; object-position: right bottom; } img[data-orientation="6"], [data-orientation="6"] img, video[data-orientation="6"], [data-orientation="6"] video { -o-object-position: center bottom; object-position: center bottom; } img[data-orientation="7"], [data-orientation="7"] img, video[data-orientation="7"], [data-orientation="7"] video { -o-object-position: left bottom; object-position: left bottom; } img[data-orientation="8"], [data-orientation="8"] img, video[data-orientation="8"], [data-orientation="8"] video { -o-object-position: left center; object-position: left center; } @media print { html {background:transparent;} body { display:inline; font-size:14pt;} .top-header {position: relative; background:transparent;} header {height: 10px;} .layout0 .content, .layout2 .content {float:none !important; width:90%; padding:0 5%;} .hero, .menu, .right, #bottom {display:none !important;} .printOnly { visibility:visible !important; display:block !important; float:none;} .noPrint { display: none; } .conForm .form {background:transparent;} .conForm input { width:300px; height: 23px; font-size:14pt; background:transparent !important;} .conForm textarea { width:600px !important; font-size:14pt;} } /* --- SIDEBAR --- */ .sidebar { position: fixed; bottom: 0; right: 0; border-radius: 2px 0 0 2px; z-index: 12; -webkit-transition: all 0.3s; transition: all 0.3s; } body.hidden .sidebar, body.showForm .sidebar { display: none; } .sidebar > div { position: relative; display: block; width: 40px; font-size: 1.3em; text-align: center; } .sidebar .side-icon { position: relative; display: block; width: 40px; padding: 8px 0; background: rgb(var(--textColor)); text-align: center; cursor: pointer; z-index: 1; color: rgb(var(--bgColor)); -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(var(--highlightColor)); } .sidebar .popup { position: absolute; bottom: 0; right: 0; width: 450px; min-height: 100px; padding: 20px 60px 20px 20px; background-color: rgb(var(--textColor)); box-shadow: 0 0 3px rgba(var(--textColor),0.1); box-sizing: border-box; -webkit-transform: translate(0,150%); transform: translate(0,150%); -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 0.85em; text-align: left; overflow: hidden; } .sidebar > div:hover .popup, .sidebar > div:active .popup { -webkit-transform: translate(0,0); transform: translate(0,0); } .sidebar .popup::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(var(--bgColor),0.9); z-index: -1; } .popup .bg-icon { position: absolute; right: -70px; bottom: -50px; opacity: 0.1; color: rgb(var(--textColor)); font-size: 15em; z-index: -1; } .sidebar .popup h4 { position: relative; margin: 0 0 10px; color: rgb(var(--textColor)); } .sidebar .btn { margin-right: 0.5rem; font-size: 0.85em; } .sidebar hr { margin: 1rem 0; } /* --- Styleswitcher --- */ .styleswitcher .btn-css { border-color: transparent; font-size: 0.85em; } @media (max-width: 600px) { .sidebar .popup { width: 300px; } .sidebar .btn { width: 100%; margin: 0.5rem 0; } } .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 { display: grid; grid-template-columns: repeat(24, 1fr); grid-column-gap: calc(1.25/52.75 * 100%); height: 100%; } .layout-grid div { position: relative; display: inline-block; height: 100%; background: rgba(var(--textColor),0.03); } .layout-grid.invert div { background: rgba(var(--textColor),0.05); } @media (max-width: 1025px) { .layout-grid .container { grid-template-columns: repeat(12, 1fr); grid-column-gap: 2.8571%; } .layout-grid[data-size="24"] div:nth-child(n+13) { display: none; } } @media (max-width: 800px) { .layout-grid .container { grid-template-columns: repeat(4, 1fr); grid-column-gap: 1rem; } .layout-grid[data-size="24"] div:nth-child(n+5) { display: none; } } @media (max-width: 600px) { .layout-grid .container { grid-template-columns: repeat(3, 1fr); } .layout-grid[data-size="24"] div:nth-child(n+4) { display: none; } } @media (max-width: 400px) { .layout-grid .container { grid-template-columns: repeat(4, 1fr); } .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; } } /* --- Quick select as banner --- */ .cm-container-quick { position: fixed; display: block; right: 0; bottom: 0; left: 0; padding: 2rem 0; background-color: rgb(var(--bgColor)); box-shadow: 0 0 5px rgba(var(--black),0.1); -webkit-transform: translate(0,110%); transform: translate(0,110%); color: rgb(var(--textColor)); -webkit-transition: all 0.3s; transition: all 0.3s; clear: both; z-index: 100; overflow: hidden; } body[data-cookie="top"] .cm-container-quick { top: 0; bottom: auto; -webkit-transform: translate(0,-110%); transform: translate(0,-110%); } .cm-container-quick.show { -webkit-transform: translate(0,0); transform: translate(0,0); } body[data-cookie="top"] .cm-container-quick.show { -webkit-transform: translate(0,0); transform: translate(0,0); } .cm-container-quick.show.hide { bottom: 0; -webkit-transform: translate(0,110%); transform: translate(0,110%); } .cm-container-quick.hidden { display: none; } .cm-container-quick::after { content: ""; position: relative; display: block; width: 100%; clear: both; } .cm-container-quick form section { text-align: right; } .cm-container-quick h3 { margin-top: 0; } .cm-container-quick .cm-holder h3 i { width: 50px; margin-right: 1.5rem; vertical-align: top; font-size: 2em; } .cm-container-quick .cm-holder h3 > span { display: inline-block; width: 70%; width: calc(100% - 60px - 1.5rem); } .cm-container-quick .cm-holder h3 .subtitle { display: block; font-size: 0.65em; } .cm-container-quick .btn { margin-top: 0; margin-bottom: 0; } /* --- Settings in Modal Window --- */ .cm-container.show ~ #bodyMask { cursor: default; } .cm-container { position: fixed; display: none; flex-direction: column; top: 0; right: 0; bottom: 0; left: 0; padding: 0; background: rgb(var(--black)); background: rgba(var(--black),0.5); opacity: 0; z-index: -1; -webkit-backface-visibility: hidden; overflow: hidden; } .cm-container.open { display: flex; opacity: 1; z-index: 14; } .cm-container .cm-holder { position: relative; width: 92%; max-width: 800px; margin: auto; border-radius: var(--borderRadius); background: rgb(var(--bgColor)); box-shadow: 0 0 10px rgba(var(--black),0.25); box-sizing: border-box; opacity: 0; visibility: hidden; color: rgb(var(--textColor)); } .cm-container .cm-holder.active { opacity: 1; visibility: visible; z-index: 1; } .cm-container .cm-holder.new { visibility: visible; z-index: 2; } .cm-container .close.hidden { display: none; } .cm-container .cm-content { position: relative; height: auto; max-height: 84vh; max-height: 84dvh; padding: 2rem 2rem 0; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .cm-container .cm-content > :first-child { margin-top: 0; } .cm-container .cm-holder .labeled-icon { top: 0; right: 0; background-color: rgb(var(--textColor)); box-shadow: 0 0 10px rgba(var(--black),0.25); -webkit-transform: translate(50%,-50%); transform: translate(50%,-50%); } .no-touchevents .cm-container .cm-holder .labeled-icon:not(.disabled):hover, .no-touchevents .cm-container .cm-holder .labeled-icon:not(.disabled):active { background-color: rgb(var(--bgColor)); } .cm-container .cm-holder .labeled-icon .icon::before, .cm-container .cm-holder .labeled-icon .icon::after { background-color: rgb(var(--bgColor)); } .no-touchevents .cm-container .cm-holder .labeled-icon:hover .icon::before, .no-touchevents .cm-container .cm-holder .labeled-icon:active .icon::before, .no-touchevents .cm-container .cm-holder .labeled-icon:hover .icon::after, .no-touchevents .cm-container .cm-holder .labeled-icon:active .icon::after { background-color: rgb(var(--textColor)); } .cm-container .cm-content h2 { display: flex; font-size: 1.8em; } .cm-container .cm-content h2 i { flex-shrink: 0; margin-right: 1.5rem; font-size: 1.6em; } .cm-container .cm-content h2 > span { display: block; flex-grow: 1; } .cm-container .cm-content h2 .subtitle { display: block; font-size: 0.65em; } .cm-container form { display: flex; flex-direction: column; margin: 1rem 0 0; } .cm-holder form .formSend { position: sticky; display: flex; justify-content: flex-end; grid-column-gap: 1rem; grid-row-gap: 0.5rem; bottom: 0; left: 0; padding: 1rem 0; background-color: rgb(var(--bgColor)); z-index: 1; } .cm-container-quick .cm-holder form .formSend { padding: 0; } .cm-holder .btn { margin: 0; border-color: transparent; padding: 0.25rem 1rem; background-color: rgba(var(--textColor),0.15); color: rgb(var(--textColor)); } .cm-holder .btn-essential { order: 2; } .cm-holder .btn-save { order: 1; } .no-touchevents .cm-holder .btn:hover { border-color: transparent; background-color: rgba(var(--textColor),0.3); color: rgb(var(--textColor)); } .cm-holder .btn.btn-all { border-color: rgb(var(--hoverColor)); background-color: rgb(var(--hoverColor)); color: rgb(var(--bgColor)); order: 3; } .no-touchevents .cm-holder .btn-all:hover { border-color: rgb(var(--textColor)); background-color: rgb(var(--textColor)); color: rgb(var(--bgColor)); } .cm-options { margin: 0; } .cm-options .js-toggle > .js-toggle-headline { padding-right: 80px; padding-right: calc(65px + 1rem); } .cm-options .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline { padding-left: 80px; padding-left: calc(65px + 1rem); } .cm-options .js-toggle-container[data-icon-side="right"] .js-toggle > .js-toggle-headline .headline-icon { order: 2; } .cm-container .cm-options .title-h3 { font-size: 1.4em; } .cm-options .small { font-size: 0.65em; } .cm-options .switch-wrapper { position: absolute; top: 1em; right: 0; z-index: 1; } .cm-options .js-toggle-container[data-icon-side="right"] .switch-wrapper { right: auto; left: 0; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 65px; height: 29px; margin: 0; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; overflow: hidden; } /* The slider */ .switch .switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 29px; background-color: rgba(var(--textColor),0.2); box-shadow: 0 0 3px rgba(var(--textColor),0.25) inset; -webkit-transition: 0.15s; transition: 0.15s; cursor: pointer; } .switch input:checked + .switch-slider { background-color: rgb(92,165,36); } .switch.always-on .switch-slider, .switch.always-on input:checked + .switch-slider { background-color: rgb(133,163,109); cursor: not-allowed; } .switch .switch-slider::before, .switch .switch-slider::after { content: ""; position: absolute; top: 50%; -webkit-transition: 0.15s; transition: 0.15s; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); opacity: 0; font-size: 0.9em; line-height: 1; } .switch .switch-slider::before { content: attr(data-label-on); left: 10px; color: rgb(var(--textColor)); } .switch .switch-slider::after { content: attr(data-label-off); right: 10px; opacity: 1; } .switch input:checked + .switch-slider::before, .switch.always-on .switch-slider::before { opacity: 1; color: rgb(var(--white)); } .switch input:checked + .switch-slider::after, .switch.always-on .switch-slider::after { opacity: 0; } .switch .switch-slider span { position: absolute; height: 21px; width: 21px; left: 4px; bottom: 4px; border-radius: 50%; background-color: rgb(var(--white)); box-shadow: 0 0 3px rgba(var(--textColor),0.25); -webkit-transition: 0.25s; transition: 0.25s; z-index: 1; } .switch input:checked + .switch-slider span, .switch.always-on .switch-slider span { -webkit-transform: translateX(35px); -ms-transform: translateX(35px); transform: translateX(35px); } .cm-settings-btn { position: absolute; bottom: 0; left: 0; padding: 1rem; z-index: 5; cursor: pointer; } .cm-settings-btn span { position: relative; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: rgb(var(--footerTextColor)); box-shadow: 0 0 5px rgba(var(--footerTextColor),0.25); box-sizing: border-box; -webkit-transition: 0.3s; transition: 0.3s; color: rgb(var(--footerBgColor)); line-height: 1; } .cm-settings-btn:hover span { box-shadow: 0 0 1px rgba(var(--footerTextColor),0.25); color: rgb(var(--footerBgColor)); } .cm-settings-btn span i { font-size: 1.3em; } .cm-settings-btn span::after { content: attr(title); position: absolute; top: 2px; left: 100%; margin-left: 0.5rem; -webkit-transition: 0.3s; transition: 0.3s; opacity: 0; visibility: hidden; color: rgb(var(--footerTextColor)); font-size: 0.85em; text-align: left; } .cm-settings-btn:hover span::after { opacity: 1; visibility: visible; } @media (max-width: 800px) { .cm-container { font-size: 0.85em; } .cm-container .cm-content { max-height: calc(84vh - 50px); max-height: calc(94dvh - 50px); padding: 1rem 1rem 0; } .cm-container .cm-holder .labeled-icon { background-color: transparent; box-shadow: none; -webkit-transform: none; transform: none; } .no-touchevents .cm-container .cm-holder .labeled-icon:not(.disabled):hover, .no-touchevents .cm-container .cm-holder .labeled-icon:not(.disabled):active { background-color: rgba(var(--white),0.2); } .cm-container .cm-holder .labeled-icon .icon::before, .cm-container .cm-holder .labeled-icon .icon::after { background-color: rgb(var(--white)); } .cm-container .button-bar { content: ""; position: relative; display: none; width: 100%; height: 50px; background-color: rgb(var(--black)); -webkit-transition: 0.3s; transition: 0.3s; } .cm-container.open .button-bar { display: block; } .cm-container .close.hidden + .button-bar, .cm-container.open .close.hidden + .button-bar { display: none; } .cm-container .cm-content h2 { font-size: 1.4em; hyphens: none; } .cm-container .cm-content h2 i { margin-right: 1rem; } .cm-container .cm-content h2 .subtitle { font-size: 0.75em; } .cm-container .cm-options .title-h3 { font-size: 1.2em; } .cm-options .switch-wrapper { top: 0.75em; } .cm-settings-btn { position: relative; bottom: auto; left: auto; padding-top: 0; text-align: center; } .cm-settings-btn span { display: inline-flex; width: auto; height: auto; border-radius: 0; background: transparent; box-shadow: none; color: rgb(var(--footerTextColor)); } .cm-settings-btn:hover span { box-shadow: none; color: currentColor; } .cm-settings-btn span::after { position: relative; display: inline-block; top: auto; left: auto; font-size: 0.75em; opacity: 1; visibility: visible; color: currentColor; } } @media (max-width: 600px) { .cm-container form { margin: 1rem 0; } .cm-options { margin: 0; } .cm-container form .formSend { flex-direction: column; } .cm-holder .btn { min-height: 40px; } } @media (max-width: 400px) { .cm-container .cm-holder h2 i { width: 25px; margin-top: 2px; font-size: 1.5em; } } /* --- INLINE PRIVACY NOTICE --- */ .notice-privacy { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; padding: 5% 10%; background-color: rgba(255,255,255,0.5); transition: all 0.3s; opacity: 0; line-height: 1.25; text-align: center; cursor: pointer; } .media-gallery.btn-video .notice-privacy { top: -1rem; right: auto; bottom: -1rem; left: 50%; width: 100%; max-width: 300px; padding: 0.5rem; box-sizing: border-box; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 0.75em; } .hover3 .notice-privacy::before, .hover4 .notice-privacy::before { content: ""; position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; background: rgba(var(--hoverColor),0.75); } .notice-privacy:hover, .notice-privacy.visible, a:hover .notice-privacy, a:active .notice-privacy { opacity: 1; } .media-gallery.single-media[data-layout="0"] .notice-privacy, .media-gallery.single-media[data-layout="1"] .notice-privacy { font-size: 0.85em; } .col-layout .media-gallery.single-media .notice-privacy, .col-layout .media-gallery.single-media[data-layout="0"] .notice-privacy, .col-layout .media-gallery.single-media[data-layout="1"] .notice-privacy { padding: 5%; font-size: 0.75em; } .contentBar .container:not([data-content-width="0"]) .col-layout .single-media .notice-privacy { font-size: 0.35em; } .notice-privacy[data-notice-color="2"] { color: rgb(var(--white)); } .notice-privacy[data-notice-color="3"] { color: rgb(var(--black)); } .notice-privacy .privacy-text { position: relative; color: inherit; } .notice-privacy .btn { margin: 1rem 0 0; } .media-gallery.btn-video .notice-privacy .btn { margin-top: 5px; padding: 2px 5px; } .contentBar .container:not([data-content-width="0"]) .col-layout .single-media .notice-privacy .btn { min-height: 20px; margin-top: 0.5rem; } @media (max-width: 1025px) { .media-gallery.single-media .notice-privacy, .media-gallery.single-media[data-layout="0"] .notice-privacy, .media-gallery.single-media[data-layout="1"] .notice-privacy { padding: 5%; font-size: 0.85em; } .media-gallery.single-media[data-layout="0"] .notice-privacy .btn, .media-gallery.single-media[data-layout="1"] .notice-privacy .btn { margin: 0.5rem 0 0; } } @media (max-width: 800px) { .col-layout .media-gallery.single-media .notice-privacy, .col-layout .media-gallery.single-media[data-layout="0"] .notice-privacy, .col-layout .media-gallery.single-media[data-layout="1"] .notice-privacy { font-size: 0.65em; } .contentBar .container:not([data-content-width="0"]) .col-layout .single-media .notice-privacy { font-size: 0.65em; } } @media (max-width: 600px) { .media-gallery.single-media .notice-privacy, .media-gallery.single-media[data-layout="0"] .notice-privacy, .media-gallery.single-media[data-layout="1"] .notice-privacy { font-size: 0.75em; } .contentBar .container:not([data-content-width="0"]) .col-layout .single-media .notice-privacy { font-size: 0.75em; } .media-gallery.single-media[data-layout="2"] .notice-privacy .btn { margin: 0.5rem 0 0; } .col-layout .media-gallery.single-media .notice-privacy, .col-layout .media-gallery.single-media[data-layout="0"] .notice-privacy, .col-layout .media-gallery.single-media[data-layout="1"] .notice-privacy { font-size: 0.75em; } } .swiffy-slider { position: relative; display: block; width: 100%; --swiffy-slider-snap-align: center; --swiffy-slider-item-width: 100%; --swiffy-slider-item-gap: 1rem; --swiffy-slider-item-reveal: 0rem; --swiffy-slider-item-ratio: 2/1; --swiffy-slider-item-count: 1; --swiffy-slider-nav-light: #fff; --swiffy-slider-nav-dark: #333; --swiffy-slider-nav-zoom: 1; --swiffy-slider-track-opacity: 0.1; --swiffy-slider-track-height: 0; --swiffy-slider-nav-outside-size: 3.5rem; --swiffy-slider-indicator-outside-size: 1.5rem; --swiffy-slider-animation-duration: .75s; --swiffy-slider-animation-delay: 0s; --swiffy-slider-animation-timing: ease-in-out; } .swiffy-slider, .swiffy-slider::after, .swiffy-slider::before { box-sizing: border-box; } .swiffy-slider ::-webkit-scrollbar { height: var(--swiffy-slider-track-height); } .swiffy-slider ::-webkit-scrollbar-track { background: rgba(0, 0, 0, var(--swiffy-slider-track-opacity)); } .swiffy-slider ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.4); border-radius: 1rem; } .swiffy-slider ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.6); } .slider-container { --swiffy-slider-item-gap-totalwidth: calc(var(--swiffy-slider-item-gap) * (var(--swiffy-slider-item-count) - 1)); --swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count)); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-behavior: smooth; display: grid; align-items: center; height: 100%; grid: auto / auto-flow max-content; grid-auto-rows: 100%; grid-auto-columns: var(--swiffy-slider-item-width); grid-auto-flow: column; grid-gap: var(--swiffy-slider-item-gap); list-style: none; margin: 0; padding: 0; scrollbar-width: none; scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, var(--swiffy-slider-track-opacity)); background-clip: padding-box; } .slider-container>* { /*The slides*/ scroll-snap-align: var(--swiffy-slider-snap-align); position: relative; width: 100%; height: 100%; } .slider-item-helper .slider-container>* { background-size: cover; background-color: #e1e1e1; background-position: 50% 50%; display: flex; justify-content: center; align-items: center; } .slider-item-helper:not(.slider-item-ratio) .slider-container>* { min-height: 20rem; } .slider-item-ratio .slider-container>*>* { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .slider-item-ratio-contain .slider-container>*>* { object-fit: contain; } .slider-item-ratio .slider-container>*::after { display: block; padding-top: calc( 100% / (var(--swiffy-slider-item-ratio))); content: ""; } .slider-item-ratio-32x9 { --swiffy-slider-item-ratio: 32/9; } .slider-item-ratio-21x9 { --swiffy-slider-item-ratio: 21/9; } .slider-item-ratio-16x9 { --swiffy-slider-item-ratio: 16/9; } .slider-item-ratio-4x3 { --swiffy-slider-item-ratio: 4/3; } .slider-item-ratio-2x1 { --swiffy-slider-item-ratio: 2/1; } .slider-item-ratio-1x1 { --swiffy-slider-item-ratio: 1/1; } .slider-item-ratio-3x4 { --swiffy-slider-item-ratio: 3/4; } .slider-nav-scrollbar { --swiffy-slider-track-height: 0.5rem; } .slider-nav-scrollbar .slider-container { scrollbar-width: thin; } .slider-nav-nodelay .slider-container { scroll-behavior: auto; } .slider-indicators { position: absolute; right: 2rem; bottom: 0; left: 2rem; display: flex; justify-content: center; padding: 0; margin-bottom: 1rem; list-style: none; } .slider-nav-scrollbar .slider-indicators { margin-bottom: calc(1rem + var(--swiffy-slider-track-height)); } .slider-indicators>*.active { opacity: 1; } .swiffy-slider.slider-indicators-outside .slider-nav { margin-bottom: var(--swiffy-slider-indicator-outside-size); } .swiffy-slider.slider-indicators-outside { padding-bottom: var(--swiffy-slider-indicator-outside-size); } .swiffy-slider.slider-indicators-outside.slider-indicators, .swiffy-slider.slider-indicators-outside .slider-indicators { margin-bottom: 0; } .slider-indicators>* { box-sizing: content-box; flex: 0 1 auto; width: 2rem; height: .2rem; padding: 0; border: .4rem solid transparent; cursor: pointer; background-color: #fff; background-clip: padding-box; opacity: .5; transition: opacity .4s ease; } .slider-indicators-square.slider-indicators>*, .slider-indicators-square .slider-indicators>* { width: .5rem; height: .5rem; border: .4rem solid transparent; } .slider-indicators-round.slider-indicators>*, .slider-indicators-round .slider-indicators>* { width: .5rem; height: .5rem; border: .4rem solid transparent; border-radius: 50%; } .slider-indicators-highlight.slider-indicators>*.active, .slider-indicators-highlight .slider-indicators>*.active { border: .33rem solid transparent; padding: .07rem; } .slider-nav { position: absolute; top: 0; left: 0; bottom: 0; border: 0; background-color: transparent; cursor: pointer; padding: 0; visibility: hidden; opacity: 0.8; transition: visibility 0.1s, opacity 0.2s linear; margin-bottom: var(--swiffy-slider-track-height); display: flex; align-items: center; padding: 0 .5rem; filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5)); transform: scale(var(--swiffy-slider-nav-zoom)); } .slider-nav::after { content: ""; width: 3rem; height: 3rem; } .swiffy-slider:hover .slider-nav { visibility: visible; } .swiffy-slider.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next) { visibility: hidden; } .swiffy-slider.slider-nav-autohide.slider-item-last-visible .slider-nav.slider-nav-next { visibility: hidden; } .slider-nav-outside .slider-container { margin: 0 var(--swiffy-slider-nav-outside-size); } .slider-nav-outside .slider-nav { padding: 0; } .swiffy-slider .slider-nav:hover { opacity: 1; } .slider-nav-square .slider-nav { padding: 0; } .slider-nav-sm { --swiffy-slider-nav-zoom: .75; --swiffy-slider-nav-outside-size: 2.5rem; } .slider-nav.slider-nav-next::after { transform: rotate(180deg); } .slider-nav.slider-nav-next { right: 0; left: unset; } .slider-nav-visible .slider-nav { visibility: visible; } .slider-nav-dark .slider-nav { opacity: 0.6; } .slider-indicators-dark.slider-indicators>*, .slider-indicators-dark .slider-indicators>* { filter: invert(1); } .slider-item-snapstart { --swiffy-slider-snap-align: start; } .slider-item-nosnap { --swiffy-slider-snap-align: unset; } .slider-item-nogap { --swiffy-slider-item-gap: 0rem; } .slider-item-reveal { --swiffy-slider-item-reveal: 8rem; } .slider-item-snapstart.slider-item-reveal { --swiffy-slider-item-reveal: 4rem; } .slider-item-show2 { --swiffy-slider-item-count: 2; } .slider-item-show3 { --swiffy-slider-item-count: 3; } .slider-item-show4 { --swiffy-slider-item-count: 4; } .slider-item-show5 { --swiffy-slider-item-count: 5; } .slider-item-show6 { --swiffy-slider-item-count: 6; } .slider-nav-mousedrag .slider-container { cursor: grab; } .slider-nav-mousedrag.dragging .slider-container { scroll-snap-type: unset; scroll-behavior: unset; user-select: none; } .slider-nav-mousedrag.dragging .slider-nav { visibility: hidden; } @media (hover: hover) { .slider-nav-mousedrag .slider-container::after { content: ""; position: absolute; width: 100%; height: 100%; } } @media (prefers-reduced-motion: no-preference) { .slider-nav-animation.slider-nav-animation-fast { --swiffy-slider-animation-duration: .25s; } .slider-nav-animation.slider-nav-animation-slow { --swiffy-slider-animation-duration: 1.25s; } .slider-nav-animation .slider-container>*>* { transition: opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing), transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing); transition-delay: var(--swiffy-slider-animation-delay); } .slider-nav-animation .slider-container .slide-visible>* { transition: opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing), transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing); transition-delay: var(--swiffy-slider-animation-delay); } .slider-nav-animation.slider-nav-animation-fadein .slider-container>*>* { opacity: 0.5; } .slider-nav-animation.slider-nav-animation-scale .slider-container>*>* { transform: scale(.9); } .slider-nav-animation.slider-nav-animation-appear .slider-container>*>* { opacity: 0.3; transform: scale(.9); } .slider-nav-animation.slider-nav-animation-scaleup .slider-container>*>* { transform: scale(.25); } .slider-nav-animation.slider-nav-animation-zoomout .slider-container>* { overflow: hidden; } .slider-nav-animation.slider-nav-animation-zoomout .slider-container>*>* { transform: scale(1.3); } .slider-nav-animation.slider-nav-animation-turn .slider-container>*>* { transform: rotateY(70deg); } .slider-nav-animation.slider-nav-animation-slideup .slider-container>*>* { transform: translateY(60%) scale(.99); } .slider-nav-animation.slider-nav-animation-slideup .slider-container { overflow-y: hidden; } .slider-nav-animation .slider-container>*.slide-visible>* { opacity: 1; transform: none; } } @media (min-width: 62rem) { .slider-item-show6:not(.slider-item-snapstart) .slider-container>*, .slider-item-show4:not(.slider-item-snapstart) .slider-container>*, .slider-item-show2:not(.slider-item-snapstart) .slider-container>* { scroll-snap-align: unset; } .slider-item-show6:not(.slider-item-snapstart) .slider-container>*::before, .slider-item-show4:not(.slider-item-snapstart) .slider-container>*::before, .slider-item-show2:not(.slider-item-snapstart) .slider-container>*::before { content: " "; display: block; position: absolute; left: calc((var(--swiffy-slider-item-gap)/2)*-1); top: 0; /*FF fix setting w+h to 1 px - otherwise snap will not occur*/ width: 1px; height: 1px; scroll-snap-align: var(--swiffy-slider-snap-align); } .slider-nav-outside-expand .slider-nav { margin-left: -4rem; } .slider-nav-outside-expand .slider-nav.slider-nav-next { margin-right: -4rem; } .slider-nav-sm.slider-nav-outside-expand .slider-nav { margin-left: -3.5rem; } .slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next { margin-right: -3.5rem; } .slider-indicators-sm.slider-indicators { display: none; } } @media (max-width: 62rem) { .swiffy-slider { --swiffy-slider-track-height: 0rem; --swiffy-slider-item-reveal: 0rem; --swiffy-slider-item-count: 1; } .swiffy-slider .slider-item-show2-sm { --swiffy-slider-item-count: 2; } .slider-item-reveal { --swiffy-slider-item-reveal: 4rem; } .slider-item-snapstart.slider-item-reveal { --swiffy-slider-item-reveal: 2rem; } .slider-nav-outside-expand .slider-container, .slider-nav-outside .slider-container { margin: 0 2rem; } .slider-nav-outside-expand .slider-container { margin: 0 var(--swiffy-slider-nav-outside-size); } .slider-nav-outside-expand .slider-nav { padding: 0; } .slider-indicators-square.slider-indicators>*, .slider-indicators-square .slider-indicators>*, .slider-indicators-round.slider-indicators>*, .slider-indicators-round .slider-indicators>* { width: .3rem; height: .3rem; } .slider-indicators { margin-bottom: .5rem; display: none; } .slider-nav-scrollbar .slider-indicators { margin-bottom: 0rem; } .slider-indicators>* { width: 1rem; height: 0.125rem; border-width: .25rem; } .slider-indicators-sm .slider-indicators, .slider-indicators-sm.slider-indicators { display: flex; } } @media (hover: none) { .swiffy-slider.slider-nav-touch .slider-nav { visibility: visible; } .swiffy-slider:not(.slider-nav-touch).slider-nav-outside-expand .slider-container, .swiffy-slider:not(.slider-nav-touch).slider-nav-outside .slider-container { margin: 0 0rem; } .slider-item-nosnap-touch { --swiffy-slider-snap-align: unset; } } /* Pannellum 2.5.6, 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-ui{position:absolute;width:100%;height:100%;z-index:1}.pnlm-grab{cursor: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: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;position:static!important}.pnlm-container:-webkit-full-screen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:-ms-fullscreen{height:100%!important;width:100%!important;position:static!important}.pnlm-container:fullscreen{height:100%!important;width:100%!important;position:static!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,.pnlm-author-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}.pnlm-pointer{cursor:pointer} .logo .logo-icon { margin-right: 1rem; } .index { margin: 1rem 0; } .index ul { grid-template-columns: repeat(3, 1fr); grid-column-gap: var(--grid_gutter1_100); text-align: left; } .column .index ul, .contentBar .container[data-content-width="1"] .index ul, .contentBar .container[data-content-width="2"] .index ul { display: block; } .index li .ix-item { background-color: rgba(var(--cardBgColor)); color: rgb(var(--cardTextColor)); } .no-touchevents .index li .ix-item:hover { background-color: rgba(var(--cardBgColor)); color: rgb(var(--cardTextColor)); } .index li .ix-item:focus-within { background-color: rgba(var(--cardBgColor)); } .index li .ix-item a { color: rgb(var(--cardHighlightColor)); } .no-touchevents .index li .ix-item a:hover, .no-touchevents .index li .ix-item a:active { color: rgb(var(--cardHighlightColor)); } .index li .ix-item a:focus { text-decoration: underline; } .index li .ix-item:focus-within a:focus { text-decoration: none; } .index .ix-headline { padding: 1rem var(--grid_col1_33); } .index .ix-subtitle { padding: 0.25rem 0 0; } .image-default, .index .ix-img.image-default { background-color: rgba(var(--cardTextColor),0.5); } .image-default::after, .index .ix-img.image-default::after { background-image: url(logo-index.png); background-size: 60% auto; } .index .ix-icon { color: rgb(var(--cardBgColor)); font-size: 5em; } .index .ix-desc { padding: 0 var(--grid_col1_33) 1rem; } .index .ix-more { padding: 0 var(--grid_col1_33) 1rem; text-align: right; } .no-touchevents .index .ix-item:hover .ix-more { color: rgb(var(--cardHighlightColor)); } .index li .ix-item:focus-within .ix-more { color: rgb(var(--cardHighlightColor)); } .ix-title li .ix-item { background-color: transparent; color: rgb(var(--textColor)); } .no-touchevents .ix-title li .ix-item:hover { background-color: transparent; color: rgb(var(--textColor)); } .ix-title li .ix-item:focus-within { background-color: transparent; } .ix-title .ix-headline { display: block; padding: 0; } .ix-title .ix-maintitle { margin-right: 3rem; } .ix-title li .ix-item a { color: rgb(var(--highlightColor)); } .no-touchevents .ix-title li .ix-item a:hover, .no-touchevents .ix-title li .ix-item a:active { color: rgb(var(--highlightColor)); } .ix-title .ix-maintitle::after { content: "\f105"; display: inline-block; margin: -3px -3rem 0 0; padding-left: 1rem; -webkit-transition: all 0.3s; transition: all 0.3s; font-family: 'Font Awesome 6 Pro'; color: rgb(var(--highlightColor)); font-size: 1em; line-height: 1; font-weight: 900; vertical-align: middle; } .no-touchevents .ix-title .ix-item:hover .ix-maintitle::after { -webkit-transform: translate(5px,0); transform: translate(5px,0); } .no-touchevents .ix-title .ix-item.no-hover:hover .ix-maintitle::after { -webkit-transform: translate(0,0); transform: translate(0,0); } .ix-title li .ix-item:focus-within .ix-maintitle::after { -webkit-transform: translate(5px,0); transform: translate(5px,0); } .ix-title li .ix-item.no-hover:focus-within .ix-maintitle::after { -webkit-transform: translate(0,0); transform: translate(0,0); } .ix-title .ix-subtitle { display: none; } .ix-title .ix-more { display: none; } .ix-text li .ix-item { background-color: transparent; color: rgb(var(--textColor)); } .no-touchevents .ix-text li .ix-item:hover { background-color: transparent; color: rgb(var(--textColor)); } .ix-text li .ix-item:focus-within { background-color: transparent; } .ix-text .ix-headline { padding: 0; } .ix-text li .ix-item a { color: rgb(var(--highlightColor)); } .no-touchevents .ix-text li .ix-item a:hover, .no-touchevents .ix-text li .ix-item a:active { color: rgb(var(--highlightColor)); } .ix-text .ix-desc { padding: 0.5rem 0 0; } .ix-text .ix-more { padding: 0.5rem 0 0; text-align: left; } .no-touchevents .ix-text .ix-item:hover .ix-more { color: rgb(var(--highlightColor)); } .no-touchevents .ix-text .ix-item.no-hover:hover .ix-more { color: rgb(var(--textColor)); } .ix-text li .ix-item:focus-within .ix-more { color: rgb(var(--highlightColor)); } .ix-text li .ix-item.no-hover:focus-within .ix-more { color: rgb(var(--textColor)); } .ix-full .ix-img { height: 0; padding: 0 0 50%; } .ix-full .ix-more { margin-top: auto; } .ix-short .ix-item { border-radius: 0; } .ix-bild li .ix-item { padding: 0 0 66%; color: rgb(var(--white)); } .no-touchevents .ix-bild li .ix-item:hover { background-color: rgb(var(--darkGrey)); } .ix-bild li .ix-item:focus-within { background-color: rgb(var(--darkGrey)); } .ix-bild .ix-headline { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .ix-bild .ix-maintitle, .index .ix-bild .ix-maintitle a, .ix-bild .ix-subtitle { color: rgb(var(--white)); } .no-touchevents .ix-bild .ix-item:hover .ix-maintitle, .no-touchevents .index .ix-bild .ix-item:hover .ix-maintitle a, .no-touchevents .ix-bild .ix-item:hover .ix-subtitle { color: rgb(var(--white)); } .ix-bild .ix-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .no-touchevents .ix-bild .ix-item:hover .ix-img { opacity: 0.5; } .no-touchevents .ix-bild .ix-item:focus-within .ix-img { opacity: 0.5; } .ix-bild .ix-img.image-default { background-color: rgba(var(--darkGrey),0.85); } .ix-bild .ix-img:not(.image-default)::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom, rgba(var(--darkGrey),0.2) 0, transparent 50%); } .ix-bild .ix-more { position: absolute; right: 0; bottom: 0; left: 0; -webkit-transform: translate(0,100%); transform: translate(0,100%); color: rgb(var(--white)); } .no-touchevents .ix-bild .ix-item:hover .ix-more { -webkit-transform: translate(0,0); transform: translate(0,0); color: rgb(var(--white)); } .ix-bild li .ix-item:focus-within .ix-more { -webkit-transform: translate(0,0); transform: translate(0,0); color: rgb(var(--white)); } .index .ix-job { grid-template-columns: repeat(2, 1fr); } .ix-job li .ix-item { background-color: transparent; color: rgb(var(--textColor)); } .no-touchevents .ix-job li .ix-item:hover { background-color: transparent; color: rgb(var(--textColor)); } .ix-job li .ix-item:focus-within { background-color: transparent; } .ix-job .ix-headline { padding: 0; } .ix-job .ix-maintitle span { display: inline-block; font-size: 0.5em; } .ix-job .ix-desc { display: flex; flex-wrap: wrap; grid-column-gap: 1rem; padding: 0; } .ix-job .ix-more { padding: 0.5rem 0 0; } .index .ix-iconfull { grid-template-columns: repeat(2, 1fr); } .ix-iconfull li .ix-item { display: grid; grid-template-columns: var(--grid_colgutter2_50) 1fr; grid-column-gap: var(--grid_col1_50); background-color: transparent; color: rgb(var(--textColor)); } .no-touchevents .ix-iconfull li .ix-item:hover { background-color: transparent; color: rgb(var(--textColor)); } .ix-iconfull li .ix-item a:focus { text-decoration: underline; } .ix-iconfull li .ix-item:focus-within { background-color: transparent; } .ix-iconfull .ix-headline { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; padding: 0; } .ix-iconfull li .ix-item a { color: rgb(var(--highlightColor)); } .no-touchevents .ix-iconfull li .ix-item a:hover, .no-touchevents .ix-iconfull li .ix-item a:active { color: rgb(var(--highlightColor)); } .ix-iconfull li .ix-item:focus-within a:focus { text-decoration: none; } .ix-iconfull .ix-img { grid-row: span 4; grid-column: span 1; width: 100%; height: 0; margin-top: 6px; padding: 0 0 100%; } .ix-iconfull[data-id="sectionContent4436"] .ix-img { background-size: contain; } .ix-iconfull .ix-img.image-default { background-color: transparent; z-index: 0; } .ix-iconfull .ix-img.image-default::after { background-size: 90% auto; filter: invert(1); } [data-colorset="2"] .ix-iconfull .ix-img.image-default::after { filter: invert(0); } .ix-iconfull .ix-desc { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; padding: 0.5rem 0 0; } .ix-iconfull .ix-more { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; padding: 0.5rem 0 0; text-align: left; } .no-touchevents .ix-iconfull .ix-item:hover .ix-more { color: rgb(var(--highlightColor)); } .no-touchevents .ix-iconfull .ix-item.no-hover:hover .ix-more { color: rgb(var(--textColor)); } .ix-iconfull li .ix-item:focus-within .ix-more { color: rgb(var(--highlightColor)); } .ix-iconfull li .ix-item.no-hover:focus-within .ix-more { color: rgb(var(--textColor)); } .ix-portrait li .ix-item { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: end; aspect-ratio: 3 / 4; color: rgb(var(--white)); isolation: isolate; } .no-touchevents .ix-portrait li .ix-item:hover { background-color: rgb(var(--darkGrey)); } .ix-portrait li .ix-item:focus-within { background-color: rgb(var(--darkGrey)); } .ix-portrait .ix-item::before { content: ""; grid-area: 1 / 1 / -1 / 1; z-index: -1; background-color: rgba(var(--darkGrey),0.5); } .ix-portrait .ix-headline { grid-area: 1 / 1; z-index: 2; } .ix-portrait .ix-maintitle, .index .ix-portrait .ix-maintitle a, .ix-portrait .ix-subtitle { color: rgb(var(--white)); } .no-touchevents .ix-portrait .ix-item:hover .ix-maintitle, .no-touchevents .index .ix-portrait .ix-item:hover .ix-maintitle a, .no-touchevents .ix-portrait .ix-item:hover .ix-subtitle { color: rgb(var(--white)); } .ix-portrait li .ix-item:focus-within a:focus { color: rgb(var(--white)); } .ix-portrait .ix-img { position: absolute; inset: 0; z-index: -2; } .ix-portrait .ix-desc, .ix-portrait .ix-more { max-height: 0; padding-bottom: 0; opacity: 0; overflow: hidden; color: rgb(var(--white)); z-index: 1; } .ix-portrait .ix-desc { grid-area: 2 / 1; } .ix-portrait .ix-more { grid-area: 3 / 1; } .no-touchevents .index .ix-portrait .ix-item:hover .ix-desc, .no-touchevents .index .ix-portrait .ix-item:hover .ix-more { max-height: 10rem; padding-bottom: 1rem; opacity: 1; color: rgb(var(--white)); } .index .ix-portrait .ix-item:focus-within .ix-desc, .index .ix-portrait .ix-item:focus-within .ix-more { max-height: 10rem; padding-bottom: 1rem; opacity: 1; color: rgb(var(--white)); } .form-modal .modal-holder { max-width: 600px; max-height: 84vh; background-color: rgb(var(--bgColor)); box-shadow: 0 0 10px rgba(var(--black),0.9); } .form-modal .modal-holder::before { content: ""; position: fixed; display: block; right: 2vw; bottom: 2vw; width: 50%; max-width: 500px; height: 50%; max-height: 500px; background-image: url(logo-white.png); background-position: bottom right; background-repeat: no-repeat; background-size: contain; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; } .form-modal .modal-holder.scaleUp::before { opacity: 0; } .form-modal .modal-holder.open::before { opacity: 0.25; } .conForm { max-width: 600px; } .conForm.form-default { max-width: 100%; } .form-modal .conForm, .form-modal .conForm.form-default { max-width: 100%; padding: 3rem; } .conForm.form-default form { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; } .form-modal .conForm.form-default form { display: block; } .conForm.form-default section { width: var(--grid_col12_100); } .form-modal .conForm.form-default section, .conForm.form-default .formSend, .conForm.form-default .formPrivacy { width: 100%; } .iSlider { position: relative; width: 100%; height: 80vh; min-height: 600px; margin: 0 auto; } .iSlider[data-slide-height="2"] { height: 100vh; } body[data-header-gap="2"] .iSlider[data-slide-height="1"] { height: calc(100vh - var(--headerHeight)); } body[data-header-gap="2"] .iSlider[data-slide-height="2"] { height: calc(100vh - var(--headerHeight)); } .iSlider::before { background-color: rgba(var(--cardBgColor)); } .iSlider::after { background: url(logo-white.png) center no-repeat; background-size: 40% auto; opacity: 0.5; } .hero { position: relative; width: 100%; max-width: 100%; height: 30vw; min-height: 350px; max-height: 70vh; margin: 0 auto; background: rgb(var(--cardBgColor)); overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .overlay .pageoverlay-item .hero { height: 20vw; max-height: 45vh; } /****************************************************/ /* Special Objects */ /****************************************************/ /* --- ul --- */ .js-toggle-container { margin: 1rem 0; padding: 0; list-style-type: none; text-align: left; } .column .js-toggle-container { padding: 0; } .content > .js-toggle-container, .contentBar .container[data-content-width="0"] .js-toggle-container { max-width: var(--maxWidth); } .layout0 .content > .js-toggle-container { max-width: 100%; } .contentBar .section-content.justify2 .js-toggle-container { margin: 0 auto; } .js-toggle-body .js-toggle-container { margin: 0; } /* --- li --- */ .js-toggle { position: relative; margin: 1rem 0; padding: 1px 0; } /* --- background --- */ .js-toggle { margin: 1rem 0; } /* --- border & consent manager --- */ .bg-border .js-toggle { margin: 0; border-bottom: 1px solid rgb(var(--textColor)); padding-top: 1em; padding-bottom: 1em; } .bg-border .js-toggle:first-child { border-top: 1px solid rgb(var(--textColor)); } .bg-border .js-toggle .js-toggle:first-child { border-top: 0; } .bg-border .js-toggle .js-toggle:last-child { border-bottom: 0; } .js-toggle:only-child { margin: 0; } /* --- headline --- */ .js-toggle > .js-toggle-headline { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; margin: 0; cursor: pointer; } .js-toggle .js-toggle > .js-toggle-headline { font-size: 1em; } /* --- icon --- */ .js-toggle > .js-toggle-headline .headline-icon { width: 3rem; width: var(--grid_colgutter1_66); text-align: center; flex-shrink: 0; } .column .js-toggle > .js-toggle-headline .headline-icon { width: 2rem; } .js-toggle > .js-toggle-headline .headline-icon::before { display: inline-block; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform-origin: center; transform-origin: center; font-family: 'Font Awesome 6 Pro'; font-size: 0.85em; line-height: 1; font-weight: 900; } /* --- plus --- */ .js-toggle > .js-toggle-headline .headline-icon::before { content: "\f067"; } .js-toggle.open > .js-toggle-headline .headline-icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* --- title --- */ .js-toggle > .js-toggle-headline .headline-title { flex-grow: 1; } /* --- body --- */ .js-toggle > .js-toggle-body { display: none; margin-top: 0; margin-left: 3rem; margin-left: var(--grid_colgutter1_66); } /* --- consent manager --- */ .cm-options .js-toggle > .js-toggle-body { margin-right: 0; margin-left: 0; } /* - business hours container - */ footer .business-hours { max-width: 500px; margin-right: auto; margin-left: auto; text-align: left; } /* -- title -- */ .business-hours > .title-h4 { display: none; } .modal-notice .business-hours > .title-h4, footer .business-hours > .title-h4 { display: block; } /* -- header -- */ .header-info .info-hours { position: relative; display: flex; flex-wrap: wrap; align-items: center; grid-column-gap: 0.5rem; max-width: 95%; max-width: calc(100% - 1rem); margin: 0 1rem 0 0; color: rgb(var(--headerTextColor)); -webkit-transition: all 0.3s; transition: all 0.3s; text-align: left; cursor: pointer; } .no-touchevents .header-info .info-hours:hover { color: rgb(var(--highlightColor)); } .info-hours span { display: inline-block; -webkit-transition: all 0.3s; transition: all 0.3s; } .header-info .info-hours .today-hours { display: flex; flex-wrap: wrap; grid-column-gap: 0.5rem; flex-grow: 1; } .info-hours .today-icon { min-width: 20px; } .header-info .info-hours .hours1:empty { display: none; } .header-info .info-hours .hours2:empty { display: none; } .info-hours .today-icon-down { margin-left: auto; } .info-hours .today-icon-down::before { content: "\f0d7"; font-family: 'Font Awesome 6 Pro'; font-size: 1em; line-height: 1; font-weight: 900; -webkit-transition: all 0.3s; transition: all 0.3s; } /* -- business hours list -- */ .hours-list { position: relative; display: block; margin: 0; box-sizing: border-box; cursor: default; -webkit-transition:all 0.3s; transition:all 0.3s; } .hours-list .dow { position: relative; display: flex; margin: 0.5rem 0; } .modal-notice .hours-list .dow { padding: 0.5rem 0; } .modal-notice .hours-list .dow.active::before { content: ""; position: absolute; top: 0; right: -0.5rem; bottom: 0; left: -0.5rem; background-color: rgba(var(--headerTextColor),0.1); -webkit-transition:all 0.3s; transition:all 0.3s; } .hours-list .dow > span { position: relative; display: block; margin: 0; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: top; } .hours-list .dow .dow-title { flex-shrink: 0; min-width: 115px; font-weight: 700; } .hours-list .dow .dow-hours { display: flex; justify-content: space-between; flex-wrap: wrap; grid-column-gap: 1rem; flex-grow: 1; width: calc(100% - 115px); } .hours-list .dow .dow-hours span { display: inline-block; } .hours-list .dow .dow-hours .hours1 { width: 115px; flex-shrink: 0; } .hours-list .dow .dow-hours .hours1:only-child { width: 100%; } .hours-list .dow .dow-hours .hours1:has(+ .note) { width: 100%; } .hours-list .dow .dow-hours .hours2 { flex-grow: 1; } .hours-list .dow .dow-hours .note { display: block; width: 100%; margin-top: 5px } .hours-list .dow.note { position: relative; padding-left: 25px; } .hours-list .dow.note i { position: absolute; top: 3px; left: 0; } .modal-notice .hours-list .dow.note i { top: calc(0.5rem + 3px); } :root { --image-ratio: 66%; } .comp-slider { position: relative; max-width: var(--maxWidth); margin: 2rem 0; } .contentBar .section-content.justify1 .comp-slider { margin-left: auto; } .contentBar .section-content.justify2 .comp-slider { margin-right: auto; margin-left: auto; } .slider-images { position: relative; width: 100%; height: 0; margin: 0; padding: 0 0 var(--image-ratio); } .slider-images:only-child { margin: 0 0 5rem; } .comp-slider .slider-img { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .comp-slider .resize { position: absolute; top:0; left: 0; height: 100%; width: 50%; border-right: 2px solid rgb(var(--bgColor)); overflow: hidden; } .slider-bar { position: absolute; top: 100%; right: 0; left: 0; height: 2px; margin: 2rem 0 0; background: rgb(var(--textColor)); z-index: 1; } .handle { position: absolute; top: 0; left: 50%; width: 10px; height: 25px; margin: -12px 0 0 -5px; background: rgb(var(--textColor)); cursor: ew-resize; } .handle::after { content: ""; position: absolute; top: -10px; right: -5px; bottom: -10px; left: -5px; } .slider-text { display: flex; justify-content: space-between; align-items: center; flex-wrap: no-wrap; width: 100%; margin: 4rem 0 0; text-align: left; } .slider-text > span { display: block; width: 45%; pointer-events: none; } .slider-text .text-right { text-align: right; } /* --- PERSON --- */ .person-contact, .contentBar .person-contact { position: relative; display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; max-width: var(--maxWidth); margin: 2rem 0; border-radius: var(--borderRadius); background-color: rgb(var(--cardBgColor)); box-sizing: border-box; overflow: hidden; color: rgb(var(--cardTextColor)); text-align: left; } .ix-person .person-contact { flex-direction: column; max-width: 100%; margin: 0; } .person-contact span { display: block; } .ix-person .person-contact .contact-header { display: none; } .person-contact .contact-title, .contentBar .person-contact .contact-title { padding: 1rem; background-color: rgb(var(--cardTextColor)); font-family: Montserrat,Helvetica,Arial,sans-serif; font-size: 1.2em; color: rgb(var(--cardBgColor)); } .person-contact .contact-text { display: none; } .person-contact .contact-img { width: 31.7535%; width: var(--grid_col8_100); margin: 0; margin-right: 1.6%; margin-right: var(--grid_gutter1_100); box-sizing: border-box; overflow: hidden; } .ix-person .person-contact .contact-img { width: 100%; margin-right: 0; } .person-contact .contact-img.image-default { background-color: rgba(var(--cardBgColor),0.1); } .person-contact .contact-img-img { position: relative; display: block; width: 100%; height: 100%; min-height: 200px; border-radius: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .ix-person .person-contact .contact-img-img { height: 0; min-height: 0; padding: 0 0 66%; } .person-contact .contact-info { display: flex; flex-direction: column; align-items: flex-start; width: calc(100% - var(--grid_gutter1_100) - var(--grid_col8_100)); box-sizing: border-box; } .ix-person .person-contact .contact-info { width: 100%; } .person-contact .contact-info > span { width: 100%; padding: 0.25rem 0; box-sizing: border-box; } .ix-person .person-contact .contact-info > span { padding: 0.25rem 1rem; padding: 0.25rem var(--grid_col1_33); } .person-contact .contact-info > span:first-child { padding-top: 1rem; } .person-contact .contact-info > span:last-of-type { padding-bottom: 1rem; } .person-contact .contact-name { font-size: 1.2em; font-family: Montserrat,Helvetica,Arial,sans-serif; } .person-contact .contact-info .contact-desc { padding-bottom: 1rem; } .contact-info > span > span { display: inline-block; width: 25px; margin-right: 0.5rem; font-weight: 700; } .contact-info > span > a, .contentBar .contact-info > span > a { display: inline-block; max-width: calc(100% - 25px - 0.5rem); border-bottom: 0; vertical-align: top; color: rgb(var(--cardHighlightColor)); } .no-touchevents .contact-info > span > a:hover, .no-touchevents .contact-info > span > a:active, .no-touchevents .contentBar .contact-info > span > a:hover, .no-touchevents .contentBar .contact-info > span > a:active { color: rgb(var(--cardTextColor)); } .person-contact .contact-info .contact-name + .contact-email a, .person-contact .contact-info .contact-position + .contact-email a, .person-contact .contact-info .contact-desc + .contact-email a { max-width: 100%; } .person-contact .btn { width: auto; margin: 0 0 1rem; } .ix-person .person-contact .btn, .ix-person .person-contact .btn[data-layout="1"] { width: 100%; margin: auto 0 0; border-radius: 0; } .job-apply .person-contact .btn { display: none; } /* --- COUNTDOWN --- */ .countdown { width: 100%; margin: 2rem 0; text-align: center; } /* --- Linksbündig & Rechtsbündig --- */ .countdown.layout0, .countdown.layout1 { width: 32%; width: var(--grid_col8_100); margin-top: 0.33em; } /* Linksbündig */ .countdown.layout0 { float: left; margin-right: 2%; margin-right: var(--grid_gutter1_100); text-align: left; } /* Rechtsbündig */ .countdown.layout1 { float: right; margin-left: 2%; margin-right: var(--grid_gutter1_100); text-align: right; } .column .countdown.layout0, .column .countdown.layout1 { float: none; width: 100%; margin: 2rem 0; text-align: center; } .countdown > div { display: block; padding: 1rem; padding: 1rem var(--grid_col1_100); } .countdown.layout0 > div, .countdown.layout1 > div { padding: 1rem var(--grid_col1_33); } .column .countdown.layout0 > div, .column .countdown.layout1 > div, .countdown.layout2 > div { display: inline-block; } .countdown div > span { display: block; text-align: center; } .countdown .clock-title { font-size: 1.2em; margin-bottom: 1rem; } .clock-timer { font-size: 2em; } .clock-timer .unit { display: inline-block; margin: 0 0 5px; vertical-align: top; font-size: 0.65em; } .clock-timer .wrapper { display: inline-block; vertical-align: top; } .clock-timer > .unit { padding-right: 10px; } .clock-timer .unit span { display: block; font-family: monospace; font-size: 3.8em; line-height: 1; font-variant-numeric: tabular-nums; } .clock-timer .hours:after, .clock-timer .minutes:after { content: ":"; } /* - header info - */ .header-info { position: absolute; display: flex; top: 0; right: 0; left: 0; height: 40px; background-color: rgb(var(--grey10)); -webkit-transition: all 0.3s; transition: all 0.3s; } body.scroll-shrink .top-header .header-info { -webkit-transform: translate(0,-100%); transform: translate(0,-100%); } body.scroll-up .top-header .header-info { -webkit-transform: translate(0,-100%); transform: translate(0,-100%); } body.scroll-down.scroll-up .top-header .header-info { -webkit-transform: translate(0,0); transform: translate(0,0); } .header-info > div { display: flex; align-items: center; justify-content: flex-end; } /* --- lazy load icon --- */ .lazy { opacity: 0; } .lores { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .ps-wait, .lores.ps-wait, .lores.hide { opacity: 0; } .lores.hidden, .media-gallery .gal-img.lores.hidden { display: none; } .overlay .lazy { display: none; } .pageoverlay-item.new .lazy, .pageoverlay-item.active .lazy { display: block; } .lazy-loader, .index .lazy-loader { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 1; } .lazy + .lazy-loader { opacity: 1; visibility: visible; } .lazy.ps-wait + .lazy-loader { opacity: 0; } .iSlider .lazy-loader { z-index: 0; } .ZMSGraphic .graphic img.lazy { position: absolute; } .graphic .lazy + .lazy-loader { position: relative; top: auto; right: auto; bottom: auto; left: auto; background-color: rgba(var(--cardBgColor),0.5); } .img-noscript ~ .lazy-loader { display: none; } .ix-full .lazy-loader { bottom: auto; height: 0; padding: 0 0 50%; } .ix-bild .lazy-loader { background-color: rgba(var(--white),0.5); } .lazy-loader span, .index .lazy-loader span { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-size: 2rem; line-height: 1; color: rgb(var(--textColor)); } /* --- ICONS --- */ .list-icon { display: block; margin: 2rem 0; padding: 0; list-style: none; overflow: inherit; overflow: initial; } .content > .list-icon { max-width: 100%; } .list-icon[data-columns="1"] { max-width: var(--maxWidth); } .list-icon[data-columns="2"] { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 2.3696%; grid-column-gap: var(--grid_gutter1_100); } .list-icon[data-columns="3"] { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 2.3696%; grid-column-gap: var(--grid_gutter1_100); } .list-icon li { position: relative; display: flex; flex-direction: column; margin: 1rem 0; padding: 0; box-sizing: border-box; } .list-icon[data-layout="0"] li { text-align: center; } .list-icon[data-layout="1"] li { flex-direction: row; margin: 2rem 0; } .list-icon[data-layout="0"][data-columns="1"] li { margin: 2rem 0; } .list-icon span { position: relative; display: block; box-sizing: border-box; } .list-icon .icon-icon img { display: inline-block; width: auto; max-width: 65px; height: auto; max-height: 65px; } .list-icon .icon-info { box-sizing: border-box; } .list-icon .icon-text p { margin: 0; } /* --- LOGOS --- */ /* --- swiffy --- */ .list-logo-container[data-columns="4"] { --swiffy-slider-item-count: 4; } .list-logo-container[data-columns="5"] { --swiffy-slider-item-count: 5; } .list-logo-container[data-columns="6"] { --swiffy-slider-item-count: 6; } .list-logo { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 2.3696%; grid-column-gap: var(--grid_gutter1_100); margin: 2rem 0; padding: 0; list-style: none; overflow: inherit; overflow: initial; } .list-logo[data-columns="4"] { grid-template-columns: repeat(4, 1fr); } .list-logo[data-columns="5"] { grid-template-columns: repeat(5, 1fr); } .list-logo[data-columns="6"] { grid-template-columns: repeat(6, 1fr); } /* --- swiffy --- */ .list-logo-container ul.slider-container { --swiffy-slider-item-gap: var(--grid_gutter1_100); grid-template-columns: none; grid-column-gap: var(--swiffy-slider-item-gap); overflow-x: auto; } .list-logo-container.swiffy-slider ul[data-slide-length="1"], .list-logo-container.swiffy-slider ul[data-slide-length="2"], .list-logo-container.swiffy-slider ul[data-slide-length="3"] { --swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count)); } .layout2 .content > .list-logo { max-width: 100%; } .no-cssgrid .list-logo { width: 101.6%; margin: 2rem -0.8%; } footer .list-logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; grid-column-gap: 0; width: 92%; max-width: 1280px; margin: 0 auto; } .list-logo li { position: relative; display: flex; margin: 1rem 0; padding: 0; box-sizing: border-box; } ul.list-logo.slider-container li { margin: 0; } .no-cssgrid .list-logo li { display: inline-block; width: 48%; margin: 1rem 1%; } footer .list-logo li { display: inline-flex; margin: 1rem 2rem; } .list-logo .logo-item .item-text { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; border-bottom: 0; box-sizing: border-box; overflow: hidden; } .list-logo span { display: block; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; } .list-logo .logo-img { display: flex; align-items: center; justify-content: center; width: 100%; padding: 1.5rem 0; --imgLeft: var(--grid_colgutter1_25); --imgWidth: calc(100% - var(--imgLeft) * 2); --imgHeight: calc(var(--imgWidth) * var(--rvalue)); } .list-logo .logo-img[data-ratio="tall"] { padding: 1rem 0; --imgLeft: var(--grid_col2_25); } .list-logo .logo-img[data-ratio="wide"] { --imgLeft: var(--grid_col1_25); } .list-logo .logo-img img { display: block; object-fit: scale-down; object-position: center center; } footer .list-logo .logo-img { --imgWidth: 100%; } footer .list-logo .logo-img[data-ratio="tall"] { max-height: 80px; } footer .list-logo .logo-img[data-ratio="wide"] { max-width: 200px; } footer .list-logo .logo-img img { max-width: 150px; max-height: 50px; } .no-objectfit .list-logo .logo-img img, .no-objectfit .list-logo .logo-img[data-ratio="tall"] img, .no-objectfit .list-logo .logo-img[data-ratio="wide"] img { top: 50%; left: 50%; width: auto; max-width: 75%; height: auto; max-height: 75%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .list-logo .logo-img img.lazy { position: absolute; } .list-logo .logo-img .lazy + .lazy-loader { position: relative; top: auto; right: auto; bottom: auto; left: auto; background-color: rgba(var(--textColor),0.1); } .list-logo .logo-info { box-sizing: border-box; } .no-touchevents footer .list-logo a:hover .gal-zoom, .no-touchevents footer .list-logo a:active .gal-zoom { opacity: 0; visibility: hidden; } .list-vertical { position: relative; display: block; margin: 4rem 0; padding: 0; list-style: none; overflow: inherit; overflow: initial; } .content > ul.list-vertical { max-width: 100%; } .list-vertical::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background-color: rgb(var(--textColor)); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: all 0.3s; transition: all 0.3s; } .list-vertical > li { position: relative; display: flex; width: 100%; margin: -4rem 0 2rem; padding: 0; box-sizing: border-box; align-items: center; justify-content: flex-start; -webkit-transition: all 0.3s; transition: all 0.3s; } .list-vertical[data-marker-type="1"] > li { counter-increment: step-counter; } .list-vertical > li:first-child { margin-top: 2rem; } .list-vertical > li:nth-child(2n) { justify-content: flex-end; } .list-vertical > li::before { content: ""; position: absolute; top: 0.5rem; left: 50%; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: rgb(var(--highlightColor)); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s; } .list-vertical[data-marker-type="1"] > li::before { content: counter(step-counter); display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: rgb(var(--bgColor)); } .list-vertical > li div { width: 45%; width: var(--grid_col11_100); min-height: 100px; padding: 1.5rem 2.3696%; padding: 1.5rem var(--grid_col1_100); background-color: rgb(var(--cardBgColor)); box-sizing: border-box; -webkit-transition: all 0.5s; transition: all 0.5s; } .list-vertical[data-icon-position="1"] > li div { display: flex; align-items: flex-start; justify-content: flex-start; } .list-vertical[data-icon-position="1"] > li div:has(.vertical-icon) { padding-left: 0; } .list-vertical span { position: relative; display: block; box-sizing: border-box; } .list-vertical .vertical-icon { display: flex; width: 100%; padding: 0 0 1.5rem; box-sizing: border-box; align-items: center; justify-content: center; color: rgb(var(--highlightColor)); text-align: center; font-size: 4em; } .list-vertical[data-icon-position="1"] .vertical-icon { width: calc(5.5/23.75 * 100%); margin-top: 5px; padding: 0; font-size: 3.5em; flex-shrink: 0; } .list-vertical .vertical-icon img { display: inline-block; width: auto; max-width: 250px; height: auto; max-height: 100%; } .list-vertical .vertical-title { display: block; margin: 0; } .list-vertical .vertical-text p { margin-bottom: 0; } /* -- body mask -- */ #bodyMask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(var(--black),0.8); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 11; cursor: pointer; pointer-events: none; } .no-pointerevents #bodyMask { z-index: -1; } .nav-open #bodyMask { opacity: 1; visibility: visible; z-index: 7; pointer-events: auto; } .showForm #bodyMask { opacity: 1; visibility: visible; z-index: 20; pointer-events: auto; } .nav-open.showForm #bodyMask { z-index: 7; } .no-opacity .nav-open #bodyMask { visibility: visible; } #bodyMask.visible { opacity: 1; visibility: visible; z-index: 20; pointer-events: auto; } .modal-open #bodyMask { opacity: 1; visibility: visible; pointer-events: auto; } /* -- modal styles -- */ .modal-notice { display: block; position: fixed; top: 0; bottom: 0; right: 0; width: 100%; max-width: 500px; z-index: 12; background-color: rgb(var(--headerBgColor)); box-shadow: 0 0 2px rgba(var(--black),0.2); -webkit-transform: translate(110%, 0); transform: translate(110%, 0); -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .modal-notice.open { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .modal-notice .modal-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 40px 2rem 2rem; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; -webkit-transition: all 0.3s; transition: all 0.3s; } .modal-notice .close { top: 0; right: 0; left: 0; width: 100%; height: 40px; border-radius: 0; background-color: rgb(var(--black)); } .no-touchevents .modal-notice .close:hover, .no-touchevents .modal-notice .close:active { background-color: rgb(var(--grey10)); } .person-overview { display: block; margin: 2rem 0; padding: 0; list-style: none; overflow: inherit; overflow: initial; --maxWidth: 100%; --grid_col8_66: calc(16.75/34.75 * 100%); } .person-overview li { position: relative; display: grid; grid-template-areas: "pInfo pImg"; grid-template-columns: 1fr var(--grid_col8_66); grid-column-gap: 1.6%; grid-column-gap: var(--grid_gutter1_66); width: var(--grid_col16_100); margin: 3rem auto; padding: 0; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s; } .person-overview li:nth-child(2n) { grid-template-areas: "pImg pInfo"; grid-template-columns: var(--grid_col8_66) 1fr; } .person-overview li .overview-img { position: relative; grid-area: pImg; align-self: center; } .person-overview .overview-img-img { display: block; max-height: 450px; aspect-ratio: var(--rvalue); border-radius: var(--borderRadius); background-position: center; background-repeat: no-repeat; background-size: cover; } .person-overview .overview-img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 450px; border-radius: var(--borderRadius); -webkit-transition: all 0.3s; transition: all 0.3s; } .person-overview .overview-img img.lazy { position: absolute; } .person-overview .overview-img .lazy + .lazy-loader { position: relative; top: auto; right: auto; bottom: auto; left: auto; max-height: 450px; aspect-ratio: var(--rvalue); background-color: rgba(var(--textColor),0.1); } .person-overview li .overview-info { grid-area: pInfo; align-self: center; } .person-overview span { display: block; } .person-overview .overview-headline { font-family: Montserrat,Helvetica,Arial,sans-serif; font-size: 1.2em; } .person-overview .overview-name { font-family: Montserrat,Helvetica,Arial,sans-serif; font-size: 1.8em; color: rgb(var(--headlineColor)); } .person-overview .overview-text { margin-top: 1rem; } .person-overview .btn { margin-right: 0; margin-bottom: 0; } /* --- SCROLL VISIBILITY --- */ .js-scroll-visible-top { -webkit-transition: all 0.5s; transition: all 0.5s; } .js-scroll-visible-top.hide { -webkit-transform: translate(0, 50%); transform: translate(0, 50%); opacity: 0; } .js-scroll-visible-top.show { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .js-scroll-visible-btm { -webkit-transition: opacity 0.5s, transform 0.8s; transition: opacity 0.5s, transform 0.8s; } .js-scroll-visible-btm.hide { -webkit-transform: translate(0, 20%); transform: translate(0, 20%); opacity: 0; } .js-scroll-visible-btm.show { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } /* --- TOOL TIP --- */ .tooltip { position: absolute; display: none; width: 250px; border: 1px solid rgba(var(--black),0.5); padding: 0.5rem; background-color: rgb(var(--white)); box-shadow: 0 0 5px rgba(var(--black),0.5); z-index: 13; } .no-touchevents .tooltip { pointer-events: none; } .no-touchevents .tooltip.open { pointer-events: auto; } .tooltip::before { content: "\f00d"; position: absolute; display: flex; align-items: center; justify-content: center; top: 0; right: 0; width: 25px; height: 25px; border-radius: 50%; background: rgb(var(--black)); box-shadow: 1px -1px 3px rgba(var(--black),0.5); -webkit-transform: translate(40%,-40%); transform: translate(40%,-40%); font-family: 'Font Awesome 6 Pro'; font-size: 1em; line-height: 1; font-weight: 900; color: rgb(var(--white)); cursor: pointer; } .tooltip p { margin: 0; } .tooltip p.headline { font-weight: 700; } .tooltip-target { color: rgb(var(--highlightColor)); border-bottom: 1px dashed currentColor; cursor: pointer; } /* --- QUOTE --- */ .quote-container { max-width: 65.876%; margin: 2rem 0; } .column .quote-container, .contentBar .container:not([data-content-width="0"]) .quote-container, .contentBar:not([data-bg-color="0"]) .container:[data-content-width="0"] .quote-container { width: 100%; } .quote-container ul { padding: 0; list-style: none; overflow-x: auto; } .quote-container ul li { display: flex; align-items: center; padding: 0; } .quote-container .quote-item { width: 100%; justify-content: center; margin: 1rem 0; } .quote-container .quote-text { max-width: unset; } .quote-container .slider-indicators span { background-color: rgb(var(--textColor)); } .quote-item { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; margin: 2rem 0; box-sizing: border-box; } /* --- zentriert --- */ .quote-item[data-position="1"] { justify-content: center; } .layout0 .quote-item { width: auto; } .column .quote-item, .contentBar .container[data-content-width="0"] .quote-item { width: 100%; margin: 1rem 0; } /* --- ACTIVITY INDICATOR --- */ .activity-indicator, .conForm .activity-indicator { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; margin: 0; background: rgba(var(--black),0.75); pointer-events: none; cursor: default; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .activity-indicator.pending, .conForm .activity-indicator.pending { opacity: 1; } .activity-indicator.complete, .conForm .activity-indicator.complete { background: rgba(var(--systemOkayColor),0.75); opacity: 1; } .activity-indicator.error, .conForm .activity-indicator.error { background: rgba(var(--systemErrorColor),0.75); opacity: 1; } .activity-indicator span, .conForm .activity-indicator span { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-size: 1.4em; } .activity-indicator span::after, .conForm .activity-indicator span::after { content: ""; display: block; vertical-align: top; font-family: 'Font Awesome 6 Pro'; font-weight: 900; line-height: 1; letter-spacing: normal; white-space: nowrap; color: rgb(var(--white)); -moz-font-feature-settings: 'liga'; -moz-osx-font-smoothing: grayscale; } .activity-indicator.pending span::after, .conForm .activity-indicator.pending span::after { content: "\f1ce"; -webkit-animation: iconSpin 2s infinite linear; animation: iconSpin 2s infinite linear; } .activity-indicator.complete span::after, .conForm .activity-indicator.complete span::after { content: "\f00c"; } .activity-indicator.error span::after, .conForm .activity-indicator.error span::after { content: "\f00d"; } @-webkit-keyframes iconSpin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes iconSpin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } #copyTextTarget { position: absolute; left: -99999px; } .copy-text { position: relative; cursor: pointer; } .copy-text::after { content: "kopiert"; position: absolute; bottom: 100%; left: 50%; width: 100px; margin-left: -50px; border-radius: 2px; padding: 5px; background-color: rgb(var(--black)); box-sizing: border-box; color: rgb(var(--white)); text-align: center; z-index: 1; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .copy-text.copied::after { content: "kopieren"; opacity: 1; visibility: visible; } .iSlider { position: relative; width: 100%; margin: 0 auto; -webkit-transition: all 0.3s; transition: all 0.3s; } .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%); } .iSlider::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .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: var(--headerHeight); align-content: stretch; -webkit-transition: all 0.3s; transition: all 0.3s; } body[data-header-gap="2"] .iSlider .item-container { padding-top: 0; } .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; left: 0; width: 100%; height: 100%; opacity: var(--image-opacity); } .iSlider .item-container .item-img > .parascroll { left: 50%; width: 100vmax; height: 125%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); } .iSlider .item-container .item-img .lores { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .iSlider .item-container .item-img img, .iSlider .item-container .video-html5 video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .no-objectfit .iSlider .item-container .item-img img, .no-objectfit .iSlider .item-container .video-html5 video { top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } @supports (-ms-ime-align:auto) { .iSlider .item-container .video-html5 video { top: 50%; left: 50%; width: auto; min-width: 100%; height: auto; min-height: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } } .gallery-item .item-info { position: relative; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; margin-top: 4rem; margin-bottom: 4rem; -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(1rem + 4vw + 25px); } .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; } .iSlider .item-container[data-content-position="0"] .item-info { align-items: flex-start; justify-content: flex-start; } .iSlider .item-container[data-content-position="1"] .item-info { align-items: flex-start; justify-content: center; } .no-csstransitions .iSlider .item-container[data-content-position="1"] .item-info { text-align: center; } .iSlider .item-container[data-content-position="2"] .item-info { align-items: flex-start; justify-content: flex-end; } .no-csstransitions .iSlider .item-container[data-content-position="2"] .item-info { text-align: right; } .iSlider .item-container[data-content-position="3"] .item-info { align-items: center; justify-content: flex-start; } .iSlider .item-container[data-content-position="4"] .item-info { align-items: center; justify-content: center; } .no-csstransitions .iSlider .item-container[data-content-position="4"] .item-info { text-align: center; } .iSlider .item-container[data-content-position="5"] .item-info { align-items: center; justify-content: flex-end; } .no-csstransitions .iSlider .item-container[data-content-position="5"] .item-info { text-align: right; } .iSlider .item-container[data-content-position="6"] .item-info { align-items: flex-end; justify-content: flex-start; } .iSlider .item-container[data-content-position="7"] .item-info { align-items: flex-end; justify-content: center; } .no-csstransitions .iSlider .item-container[data-content-position="7"] .item-info { text-align: center; } .iSlider .item-container[data-content-position="8"] .item-info { align-items: flex-end; justify-content: flex-end; } .no-csstransitions .iSlider .item-container[data-content-position="8"] .item-info { text-align: right; } .gallery-item .item-text { position: relative; display: block; width: 100%; margin: 0; box-sizing: border-box; color: rgb(var(--textColor)); text-align: left; z-index: 1; } .iSlider .item-container[data-content-width="1"] .item-text { width: 31.7535%; width: var(--grid_col8_100); } .iSlider .item-container[data-content-width="2"] .item-text { width: 44.5497%; width: var(--grid_col11_100); } .iSlider .item-container[data-content-width="3"] .item-text { width: 65.8767%; width: var(--grid_col16_100); } .iSlider .item-container[data-content-width="1"][data-content-layout="1"] .item-text { width: 31.7535%; width: var(--grid_col8_100); } .iSlider .item-container[data-content-width="2"][data-content-layout="1"] .item-text { width: 44.5497%; width: var(--grid_col12_100); } .iSlider .item-container[data-content-width="3"][data-content-layout="1"] .item-text { width: 65.8767%; width: var(--grid_col16_100); } .gallery-item .item-info[data-content-layout="1"] .item-text { padding: 1rem; padding: var(--grid_col1_100); } .gallery-item .item-info[data-content-layout="2"] h2, .gallery-item .item-info[data-content-layout="2"] h3, .gallery-item .item-info[data-content-layout="2"] p.item-desc { display: inline; float: left; margin-right: 0.75rem; margin-left: 0.75rem; padding: 5px 0; clear: both; box-decoration-break: clone; } .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 p { margin: 0; } .gallery-item .item-text p + p { margin-top: 1rem; } .gallery-item .item-info[data-content-layout="2"] .item-btn { clear: both; } .gallery-item .item-info .btn { margin: 0; } .gallery-item .item-info[data-content-layout="2"] .btn { margin-top: 0.5rem; } .gallery-item .item-text .btn, .gallery-item .item-text .btn span { display: inline-flex; } .gallery-item .item-info .btn-primary::before { display: none; } .gallery-item .item-info[data-content-layout="1"] .item-text { background-color: rgba(var(--bgColor),0.85); background-color: rgba(var(--bgColor),var(--bg-opacity)); } .gallery-item .item-info[data-content-layout="2"] h2, .gallery-item .item-info[data-content-layout="2"] h3, .gallery-item .item-info[data-content-layout="2"] p.item-desc { background-color: rgb(var(--bgColor)); background-color: rgba(var(--bgColor),0.85); background-color: rgba(var(--bgColor),var(--bg-opacity)); box-shadow: 0.75rem 0 0 rgba(var(--bgColor),0.85), -0.75rem 0 0 rgba(var(--bgColor),0.85); box-shadow: 0.75rem 0 0 rgba(var(--bgColor),var(--bg-opacity)), -0.75rem 0 0 rgba(var(--bgColor),var(--bg-opacity)); } .gallery-item .item-info p { color: rgb(var(--textColor)); } .gallery-item .item-info h2, .gallery-item .item-info h3 { color: rgb(var(--headlineColor)); } .gallery-item .item-info .btn { border-color: transparent; background: rgba(var(--bgColor),0.85); background: rgba(var(--bgColor),var(--bg-opacity)); color: rgb(var(--textColor)); } .no-touchevents .gallery-item .item-info .item-text:hover .btn { background: rgba(var(--textColor),0.85); background: rgba(var(--textColor),var(--bg-opacity)); color: rgb(var(--bgColor)); } .gallery-item .item-info .btn[data-layout="1"] span, .gallery-item .item-info .btn[data-layout="1"] i { color: rgb(var(--textColor)); } .no-touchevents .gallery-item .item-info .btn[data-layout="1"]:hover span, .no-touchevents .gallery-item .item-info .btn[data-layout="1"]:active span, .no-touchevents .gallery-item .item-info a:hover .btn[data-layout="1"] span, .no-touchevents .gallery-item .item-info .btn[data-layout="1"]:hover i, .no-touchevents .gallery-item .item-info .btn[data-layout="1"]:active i, .no-touchevents .gallery-item .item-info a:hover .btn[data-layout="1"] i { color: rgb(var(--bgColor)); } .gallery-item .item-info[data-content-layout="1"] .btn { border-color: transparent; background: rgb(var(--textColor)); color: rgb(var(--bgColor)); } .no-touchevents .gallery-item .item-info[data-content-layout="1"] .item-text:hover .btn { border-color: rgb(var(--textColor)); background: rgb(var(--bgColor)); color: rgb(var(--textColor)); } .gallery-item .item-info[data-content-layout="1"] .btn[data-layout="1"] span, .gallery-item .item-info[data-content-layout="1"] .btn[data-layout="1"] i { color: rgb(var(--bgColor)); } .no-touchevents .gallery-item .item-info[data-content-layout="1"] .btn[data-layout="1"]:hover span, .no-touchevents .gallery-item .item-info[data-content-layout="1"] .btn[data-layout="1"]:active span, .no-touchevents .gallery-item .item-info[data-content-layout="1"] a:hover .btn[data-layout="1"] span, .no-touchevents .gallery-item .item-info[data-content-layout="1"] .btn[data-layout="1"]:hover i, .no-touchevents .gallery-item .item-info[data-content-layout="1"] .btn[data-layout="1"]:active i, .no-touchevents .gallery-item .item-info[data-content-layout="1"] a:hover .btn[data-layout="1"] i { color: rgb(var(--textColor)); } .swiffy-slider.slider-nav-noloop.slider-item-first-visible .slider-nav:not(.slider-nav-next), .swiffy-slider.slider-nav-noloop.slider-item-last-visible .slider-nav:not(.slider-nav-prev), .swiffy-slider.slider-nav-noloop.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next), .swiffy-slider.slider-nav-noloop.slider-nav-autohide.slider-item-last-visible .slider-nav:not(.slider-nav-prev) { visibility: visible; opacity: 0.3; cursor: default; } .swiffy-slider .slider-nav { width: 50px; padding: 0; filter: none; z-index: 1; } .index.swiffy-slider ul[data-slide-length="1"] ~ .slider-nav, .index.swiffy-slider ul[data-slide-length="2"] ~ .slider-nav, .index.swiffy-slider ul[data-slide-length="3"] ~ .slider-nav { display: none; } .contentBar .offset-container .media-gallery.swiffy-slider:not(.wide) .slider-nav { display: none; } .swiffy-slider.slider-nav-dark .slider-nav { opacity: 0.8; } .swiffy-slider.slider-nav-outside-expand .slider-nav.slider-nav-prev { margin-left: -50px; } .swiffy-slider.slider-nav-outside-expand .slider-nav.slider-nav-next { margin-right: -50px; margin-left: 0; } .swiffy-slider .slider-nav::before { display: none; } .swiffy-slider .slider-nav::after { position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; mask: none; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-family: 'Font Awesome 6 Pro'; font-size: 2em; line-height: 1; font-weight: 900; color: rgb(var(--textColor)); -webkit-transition: all 0.2s; transition: all 0.2s; } .swiffy-slider .slider-nav.slider-nav-prev::after { content: "\f053"; } .swiffy-slider .slider-nav.slider-nav-next::after { content: "\f054"; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .index.swiffy-slider .slider-nav::after { -webkit-transform: translate(-50%,-45%); transform: translate(-50%,-45%); } .index.swiffy-slider .slider-nav:hover::after { color: rgb(var(--highlightColor)); } .media-gallery.carousel.wide.swiffy-slider .slider-nav::after { background-color: rgb(var(--bgColor)); } .list-vertical[data-marker-type="1"] > li::before { width: 2.8rem; height: 2.8rem; border: 2px solid rgb(var(--textColor)); background-color: rgb(var(--bgColor)); box-sizing: border-box; font-size: 1.8em; color: rgb(var(--textColor)); } .list-vertical > li div { background-color: rgb(var(--cardBgColor)); } .list-icon .icon-icon { width: 100%; padding: 0 0 1rem; color: rgb(var(--headlineColor)); } .list-icon[data-layout="1"] .icon-icon { width: 60px; margin-right: 1rem; padding: 0; flex-shrink: 0; } .list-icon[data-layout="1"] .icon-icon img { max-width: 100%; } .list-icon .icon-icon i { font-size: 4em; } .list-icon[data-layout="1"] .icon-icon i { font-size: 3em; } .list-icon .icon-info { width: 100%; padding: 0; } .list-icon[data-layout="1"] .icon-info { width: auto; flex-grow: 1; } .list-icon .icon-title { display: block; margin: 0; } .list-logo .logo-info { width: 100%; margin-top: 1rem; color: rgb(var(--textColor)); } .list-logo .logo-title { font-weight: 700; } .quote-item, .column .quote-item, .contentBar .container[data-content-width="0"] .quote-item { margin: 2rem 0; } .column .quote-item, .contentBar .section-content > .quote-item:first-child { margin-top: 0; } .quote-img { position: relative; flex-shrink: 0; width: var(--grid_col4_100); height: 0; margin-right: var(--grid_gutter1_100); border-radius: 50%; padding: 0 0 var(--grid_col4_100); background-position: center; background-repeat: no-repeat; background-size: cover; vertical-align: middle; } .quote-text { position: relative; max-width: var(--maxWidth); padding: 35px 0 0 20px; padding-left: var(--grid_col1_100); box-sizing: border-box; } .column .quote-text, .contentBar .container:not([data-content-width="0"]) .quote-text { max-width: 100%; } .quote-text::before { content: "\f10e"; position: absolute; top: 0; left: 0; font-family: 'Font Awesome 6 Pro'; font-size: 4em; line-height: 1; font-weight: 900; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0.1; } .quote-item .q-quote { margin: 0; font-size: 1.8em; } .quote-item .q-text { margin: 1rem 0 0; font-size: 0.85em; } .quote-item span { display: block; } .quote-item .q-author { font-weight: 700; } .job-apply { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; grid-column-gap: var(--grid_gutter1_100); justify-content: space-between; margin: 2rem 0 0; padding: 2rem 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .job-apply::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-50vw + 50%); width: 100vw; background-color: rgba(var(--textColor),0.15); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; } .job-apply > div:not(:only-child) { width: var(--grid_col12_100); } .job-apply > div:only-child { max-width: var(--maxWidth); } .job-info { display: block; max-width: var(--maxWidth); margin: 1rem 0; } .job-info:empty { display: none; } .job-info span { display: block; margin: 0.25rem 0; } /****************************************************/ /* Screen Sizes */ /****************************************************/ @media (max-width:1800px) { .iSlider .nav-arrows { display: none; } } @media (max-width:1440px) { :root { } body[data-snav="2"] .menu, body[data-snav="2"] .right .macronav, body[data-snav="2"] header .translate { display: none; } body[data-snav="2"] .sTrigger { display: block; } .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(6, 1fr); } .hero { } .overlay .pageoverlay-item .hero { } } @media (max-width:1280px) { :root { } body[data-snav="3"] .menu, body[data-snav="3"] .right .macronav, body[data-snav="3"] header .translate { display: none; } body[data-snav="3"] .sTrigger { display: block; } .index.swiffy-slider { --swiffy-slider-item-count: 3; } .index ul.slider-container { left: calc(-50vw + 50%); width: 100vw; padding: 0 4vw; } /* --- swiffy --- */ .list-logo-container[data-columns="4"] { --swiffy-slider-item-count: 3; } .list-logo-container[data-columns="5"] { --swiffy-slider-item-count: 4; } .list-logo-container[data-columns="6"] { --swiffy-slider-item-count: 5; } .list-logo { grid-template-columns: repeat(3, 1fr); } .list-logo[data-columns="4"] { grid-template-columns: repeat(3, 1fr); } .list-logo[data-columns="5"] { grid-template-columns: repeat(4, 1fr); } .list-logo[data-columns="6"] { grid-template-columns: repeat(5, 1fr); } .list-logo .logo-img { --imgLeft: var(--grid_colgutter1_33); } .list-logo .logo-img[data-ratio="tall"] { --imgLeft: var(--grid_colgutter2_33); } .list-logo .logo-img[data-ratio="wide"] { --imgLeft: var(--grid_col1_33); } .swiffy-slider .slider-container { --swiffy-slider-snap-align: center; } .swiffy-slider.slider-nav-outside-expand .slider-container { margin: 0; } .slider-nav-outside-expand .slider-nav { display: none; } } @media (max-width: 1025px) { :root { --maxWidth: 100%; --grid_colgutter2_50: calc(4/17 * 100%); --grid_gutter1_half_50: calc(1/35 * 100%); --grid_gutter1_half_100: calc(0.5/35 * 100%); --grid_gutter1_33: calc(1/17.5 * 100%); --grid_gutter1_50: calc(2/35 * 100%); --grid_gutter1_66: calc(1/23 * 100%); --grid_gutter1_100: calc(1/35 * 100%); --grid_col1_25: calc(1/17 * 100%); --grid_col2_25: calc(2/17 * 100%); --grid_col1_33: calc(1/17 * 100%); --grid_col2_33: calc(5/17 * 100%); --grid_col4_33: calc(8/17 * 100%); --grid_col1_50: calc(1/23 * 100%); --grid_col2_50: calc(5/23 * 100%); --grid_col3_50: calc(8/23 * 100%); --grid_col4_50: calc(8/23 * 100%); --grid_col8_50: calc(14/23 * 100%); --grid_col1_66: calc(2/35 * 100%); --grid_col2_66: calc(5/35 * 100%); --grid_col3_66: calc(8/35 * 100%); --grid_col4_66: calc(11/35 * 100%); --grid_col12_66: calc(23/35 * 100%); --grid_col1_100: calc(1/35 * 100%); --grid_col2_100: calc(5/35 * 100%); --grid_col3_100: calc(8/35 * 100%); --grid_col4_100: calc(9/35 * 100%); --grid_col5_100: calc(10/35 * 100%); --grid_col6_100: calc(11/35 * 100%); --grid_col8_100: calc(11/35 * 100%); --grid_col11_100: calc(16/35 * 100%); --grid_col12_100: calc(17/35 * 100%); --grid_col16_100: calc(23/35 * 100%); --grid_col18_100: calc(23/35 * 100%); --grid_colgutter1_25: calc(1.5/17 * 100%); --grid_colgutter1_33: calc(3/17 * 100%); --grid_colgutter1_50: calc(3/17 * 100%); --grid_colgutter1_66: calc(3/35 * 100%); --grid_colgutter1_100: calc(3/35 * 100%); --grid_colgutter2_33: calc(3/11 * 100%); --grid_colgutter4_66: calc(9/35 * 100%); --grid_colgutter4_100: calc(9/35 * 100%); --grid_colgutter6_100: calc(12/35 * 100%); } body[data-snav="4"] .menu, body[data-snav="4"] .right .macronav, body[data-snav="4"] header .translate { display: none; } body[data-snav="4"] .sTrigger { display: block; } .no-cssgrid .col-layout { width: 102%; margin: 1rem -1%; } .col-layout.type2, .col-layout.type3, .col-layout.type4, .col-layout.type5 { grid-template-columns: repeat(2, 1fr) } /* --- COLUMNS --- */ .no-cssgrid .col-layout .column { margin: 0 0.9803%; } .no-cssgrid .col-layout.type1 > .column, .no-cssgrid .col-layout.type2 > .column, .no-cssgrid .col-layout.type3 > .column:nth-of-type(2n + 1), .no-cssgrid .col-layout.type3 > .column:nth-of-type(2n), .no-cssgrid .col-layout.type4 > .column:nth-of-type(2n + 1), .no-cssgrid .col-layout.type4 > .column:nth-of-type(2n), .no-cssgrid .col-layout.type5 > .column { width: 48.0392%; } .col-layout.type1 > .column:nth-of-type(n+3), .col-layout.type2 > .column:nth-of-type(n+3), .col-layout.type3 > .column:nth-of-type(n+3), .col-layout.type4 > .column:nth-of-type(n+3), .col-layout.type5 > .column:nth-of-type(n+3) { margin-top: 1rem; } .contentBar:has(.offset-container) { display: flex; flex-direction: column; align-content: center; align-items: center; justify-content: center; } .contentBar .background-container[data-bg-layout="2"], .contentBar .background-container[data-bg-layout="3"] { position: relative; top: auto; right: auto; left: auto; width: 100%; height: 0; padding: 0 0 50%; } .contentBar .background-container[data-bg-layout="2"] > div, .contentBar .background-container[data-bg-layout="3"] > div { width: 100%; } /* --- OFFSET CONTAINER --- */ .contentBar .offset-container:not(:last-child) { position: relative; top: auto; bottom: auto; left: auto; } .contentBar[data-order="0"] .offset-container { order: 2; } .contentBar .offset-container[data-offset-gap="1"] { padding: 2rem 4%; } .contentBar[data-order="0"] .offset-container[data-offset-gap="1"] { padding-top: 0; } .contentBar[data-order="1"] .offset-container[data-offset-gap="1"] { padding-bottom: 0; } .contentBar .offset-container[data-content-width="0"] { left: auto; } .contentBar .offset-container[data-content-width="1"], .contentBar .offset-container[data-content-width="2"], .contentBar .offset-container[data-content-width="3"] { width: 100%; } .contentBar .offset-container[data-content-width="1"][data-content-position="0"], .contentBar .offset-container[data-content-width="1"][data-content-position="3"], .contentBar .offset-container[data-content-width="1"][data-content-position="6"], .contentBar .offset-container[data-content-width="1"][data-content-position="1"], .contentBar .offset-container[data-content-width="1"][data-content-position="4"], .contentBar .offset-container[data-content-width="1"][data-content-position="7"], .contentBar .offset-container[data-content-width="2"][data-content-position="0"], .contentBar .offset-container[data-content-width="2"][data-content-position="3"], .contentBar .offset-container[data-content-width="2"][data-content-position="6"], .contentBar .offset-container[data-content-width="2"][data-content-position="1"], .contentBar .offset-container[data-content-width="2"][data-content-position="4"], .contentBar .offset-container[data-content-width="2"][data-content-position="7"], .contentBar .offset-container[data-content-width="3"][data-content-position="0"], .contentBar .offset-container[data-content-width="3"][data-content-position="3"], .contentBar .offset-container[data-content-width="3"][data-content-position="6"], .contentBar .offset-container[data-content-width="3"][data-content-position="1"], .contentBar .offset-container[data-content-width="3"][data-content-position="4"], .contentBar .offset-container[data-content-width="3"][data-content-position="7"], .contentBar .offset-container[data-content-position="2"], .contentBar .offset-container[data-content-position="5"], .contentBar .offset-container[data-content-position="8"] { left: auto; } .contentBar .offset-container:not(:last-child) .offset-graphic { margin: 0 auto; max-width: 600px; } .contentBar .offset-container:last-child[data-content-width][data-content-position] { left: 0; } /* --- CONTENT CONTAINER --- */ .contentBar .container { padding: 2rem 0; } /* --- text width --- */ /* no background */ .contentBar .container[data-content-width="1"] .section-content, .contentBar .container[data-content-width="2"] .section-content, .contentBar .container[data-content-width="3"] .section-content { width: 100%; } /* - full background */ .contentBar .container[data-content-width="1"][data-content-layout="1"] .section-content, .contentBar .container[data-content-width="2"][data-content-layout="1"] .section-content, .contentBar .container[data-content-width="3"][data-content-layout="1"] .section-content { width: 100%; } /* -- complete background -- */ .contentBar .container[data-content-width="1"][data-content-layout="3"] .section-content, .contentBar .container[data-content-width="2"][data-content-layout="3"] .section-content, .contentBar .container[data-content-width="3"][data-content-layout="3"] .section-content { width: 100%; } /* --- text padding --- */ .contentBar .container[data-content-layout="1"] .section-content { padding: var(--grid_col1_100); } .contentBar .container[data-content-layout="3"] .section-content { padding: var(--grid_col1_100) 4%; } /* --- container for complete background --- */ .contentBar .container[data-content-layout="3"][data-content-position="1"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="4"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="7"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="2"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="5"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-position="8"] .section-content::before { right: auto; left: 0; -webkit-transform: none; transform: none; } .contentBar .container[data-content-layout="3"][data-content-width="1"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-width="2"] .section-content::before, .contentBar .container[data-content-layout="3"][data-content-width="3"] .section-content::before { width: 100%; } .conForm.narrow { width: 65.7142%; } .conForm input.short { width: 40%; } .conForm select.short { width: 40%; } .conForm .column .split { width: 100%; padding: 0 0 1rem; } .conForm.narrow .column .split, .form-modal .conForm .column .split { width: 100%; } .conForm .column .split:nth-of-type(2n), .conForm.narrow .column .split:nth-of-type(2n), .form-modal .conForm .column .split:nth-of-type(2n) { margin-left: 0; padding: 0; } .conForm.narrow .triple, .conForm .column .triple { width: 48.4848%; padding: 0 0 1rem; } .conForm div > .triple:last-of-type { padding: 0; } .conForm.narrow .triple:nth-of-type(3n+2), .conForm.narrow .triple:nth-of-type(3n), .conForm .column .triple:nth-of-type(3n+2), .conForm .column .triple:nth-of-type(3n) { margin-left: 0; } .conForm.narrow .triple:nth-of-type(2n), .conForm .column .triple:nth-of-type(2n) { margin-left: 2%; } .index.swiffy-slider { --swiffy-slider-item-count: 2; } .index ul { grid-template-columns: repeat(2, 1fr); grid-column-gap: 2.8571%; } .index.swiffy-slider ul[data-slide-length="3"] { --swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count)); } .no-cssgrid .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { position: relative; width: 102.8561%; margin: 0 -1.428%; } /* --- swiffy --- */ .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 3; } .media-gallery.carousel.wide.swiffy-slider { --swiffy-slider-item-count: 2; } /* 66% */ .col-layout.type3 > .column:nth-of-type(2n + 1) .media-gallery.carousel.swiffy-slider, .col-layout.type4 > .column:nth-of-type(2n) .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="3"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="1"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 2; } /* 50% */ .col-layout.type1 .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="2"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="2"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 1; } .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(4, 1fr); } .col-layout .media-gallery.gallery-thumbgrid .wrap, .col-layout.type1 .media-gallery.gallery-thumbgrid .wrap, .col-layout.type3 > .column:nth-of-type(2n + 1) .media-gallery.gallery-thumbgrid .wrap, .col-layout.type4 > .column:nth-of-type(2n) .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(2, 1fr); grid-gap: 1.5rem var(--grid_gutter1_50); } .contentBar .container:not([data-content-width="0"]) .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(3, 1fr); grid-gap: 1rem 5.8823%; } .media-gallery.gallery-video .wrap { grid-template-columns: repeat(2, 1fr); } .no-cssgrid .gallery-thumbgrid .gallery-item { width: 14.7058%; margin: 0.9803%; } .no-cssgrid .col-layout .gallery-thumbgrid .gallery-item, .no-cssgrid .layout0 .col-layout .gallery-thumbgrid .gallery-item { width: 29.4074%; margin: 1.9596%; } .no-cssgrid .gallery-video .gallery-item { width: 48.5714%; margin: 1.4285%; } .gallery-slideshow.left, .layout0 .gallery-slideshow.left { width: 48.5714%; margin-right: 2.8571%; } .col-layout .gallery-slideshow.left, .layout0 .col-layout .gallery-slideshow.left { width: 100%; margin-right: 0; } .gallery-slideshow.right, .layout0 .gallery-slideshow.right { width: 48.5714%; margin-left: 2.8571%; } .col-layout .gallery-slideshow.right, .layout0 .col-layout .gallery-slideshow.right { width: 100%; margin-left: 0; } .gallery-slideshow.center .gallery-item .gal-img { padding: 0 0 50%; } /* --- SINGLE VIDEO / SINGLE AUDIO --- */ .media-gallery.single-media, .layout0 .media-gallery.single-media { width: 100%; } /* --- left, right --- */ .media-gallery.single-media[data-layout="0"], .layout0 .media-gallery.single-media[data-layout="0"], .media-gallery.single-media[data-layout="1"], .layout0 .media-gallery.single-media[data-layout="1"] { float: none; width: 100%; margin: 1rem 0; } .media-gallery.tArrows { text-align: right; } h1, .title-h1 { font-size: 3.5em; } p.teaser1 { font-size: 4em; } ul, ol { padding: 0 0 0 3rem; } /* -- ZMS GRAPHIC ----------------------------------*/ .ZMSGraphic.floatleft { margin-right: 2.8571%; } .layout0 .ZMSGraphic.floatleft { margin-right: 2.8571%; } .ZMSGraphic.floatright { margin-left: 2.8571%; } .layout0 .ZMSGraphic.floatright { margin-left: 2.8571%; } .ZMSGraphic.floatleft.imgwidth0, .ZMSGraphic.floatright.imgwidth0, .ZMSGraphic.imgwidth0 .graphic, .ZMSGraphic.none.top.imgwidth0 .text, .ZMSGraphic.center.imgwidth0 .text, .ZMSGraphic.floatleft.imgwidth1, .ZMSGraphic.floatright.imgwidth1, .ZMSGraphic.imgwidth1 .graphic, .ZMSGraphic.none.top.imgwidth1 .text, .ZMSGraphic.center.imgwidth1 .text { width: 48.5714%; } .layout0 .ZMSGraphic.floatleft.imgwidth0, .layout0 .ZMSGraphic.floatright.imgwidth0, .layout0 .ZMSGraphic.imgwidth0 .graphic, .layout0 .ZMSGraphic.none.top.imgwidth0 .text, .layout0 .ZMSGraphic.center.imgwidth0 .text, .layout0 .ZMSGraphic.floatleft.imgwidth1, .layout0 .ZMSGraphic.floatright.imgwidth1, .layout0 .ZMSGraphic.imgwidth1 .graphic, .layout0 .ZMSGraphic.none.top.imgwidth1 .text, .layout0 .ZMSGraphic.center.imgwidth1 .text { width: 48.5714%; } .ZMSGraphic.left .graphic, .ZMSGraphic.right .graphic { margin-right: 2.8571%; } .layout0 .ZMSGraphic.left .graphic, .layout0 .ZMSGraphic.right .graphic { margin-right: 2.8571%; } /* -- ZMS FILE -------------------------------------*/ .ZMSFile { width: 100%; } .ZMSFile .img, .ZMSFile[data-width="1"] .img { width: var(--grid_col6_100); } .ZMSFile.file-img .text, .ZMSFile[data-width="1"].file-img .text { width: calc(100% - var(--grid_col6_100)); } .js-toggle > .js-toggle-headline .headline-icon { width: 2rem; text-align: left; } .js-toggle .js-toggle > .js-toggle-headline .headline-icon { width: 1.5rem; } .js-toggle > .js-toggle-body { margin-right: 0; margin-left: 0; } .js-toggle-body .js-toggle-container { margin-left: 2rem; } .js-toggle .js-toggle > .js-toggle-body { margin-right: 0; margin-left: 0; } .person-contact, .contentBar .person-contact { max-width: 100%; } .person-contact .contact-img { width: var(--grid_col12_100); } .person-contact .contact-info { width: calc(100% - var(--grid_gutter1_100) - var(--grid_col12_100)); } .countdown.layout0, .countdown.layout1 { width: 49%; width: var(--grid_col12_100); } .countdown.layout0 > div, .countdown.layout1 > div { padding: 1rem var(--grid_col1_50); } .list-icon[data-columns="3"] { grid-template-columns: repeat(2, 1fr); } /* --- swiffy --- */ .list-logo-container[data-columns="5"] { --swiffy-slider-item-count: 3; } .list-logo-container[data-columns="6"] { --swiffy-slider-item-count: 4; } .list-logo[data-columns="5"] { grid-template-columns: repeat(3, 1fr); } .list-logo[data-columns="6"] { grid-template-columns: repeat(4, 1fr); } .list-logo .logo-img { --imgLeft: calc(var(--grid_col1_33) * 2); } .list-vertical::before { left: 0.75rem; } .list-vertical[data-marker-type="1"]::before { left: 1rem; } .list-vertical > li { margin: 2rem 0; padding: 0 0 0 calc(2/35 * 100%); } .list-vertical > li:nth-child(2n) { justify-content: flex-start; } .list-vertical > li::before { top: 1rem; left: 0; -webkit-transform: none; transform: none; } .list-vertical > li div { width: 100%; min-height: 0; padding: 1.5rem var(--grid_col1_100); } .list-vertical[data-icon-position="1"] > li div { padding-left: var(--grid_col1_100); } .list-vertical[data-icon-position="1"] .vertical-icon { width: 65px; margin-right: 1.5rem; } .person-overview { --grid_col8_66: var(--grid_col12_100); } .person-overview li { width: 100%; max-width: 800px; } .quote-container { max-width: 100%; } .translate { padding-left: 0; } .logo a { width: 250px; height: 55px; } .index .ix-headline { padding: 1rem var(--grid_col1_50); } .index .ix-desc { padding: 0 var(--grid_col1_50) 1rem; } .index .ix-more { padding: 0 var(--grid_col1_50) 1rem; } .index .ix-title { display: block; } .ix-title .ix-headline { padding: 0; } .ix-text .ix-headline { padding: 0; } .ix-text .ix-desc { padding: 0.5rem 0 0; } .ix-text .ix-more { padding: 0.5rem 0 0; } .ix-job .ix-headline { padding: 0; } .ix-job .ix-desc { padding: 0; } .ix-job .ix-more { padding: 0.5rem 0 0; } .ix-iconfull li .ix-item { grid-column-gap: var(--grid_col1_25); } .ix-iconfull .ix-headline { padding: 0; } .ix-iconfull .ix-desc { padding: 0.5rem 0 0; } .ix-iconfull .ix-more { padding: 0.5rem 0 0; } .ix-portrait .ix-desc, .ix-portrait .ix-more { padding-bottom: 0; } .no-touchevents .index .ix-portrait .ix-item:hover .ix-desc, .no-touchevents .index .ix-portrait .ix-item:hover .ix-more { padding-bottom: 1rem; } .index .ix-portrait .ix-item:focus-within .ix-desc, .index .ix-portrait .ix-item:focus-within .ix-more { padding-bottom: 1rem; } .list-vertical[data-marker-type="1"]::before { left: 1.12rem; } .list-vertical[data-marker-type="1"] > li::before { width: 2.25rem; height: 2.25rem; font-size: 1.2em; } .job-apply > div:not(:only-child) { width: 100%; } } @media (max-width: 800px) { :root { --headerHeightDefault: 55px; --grid_colgutter2_50: 2.5rem; --grid_gutter1_half_50: 1rem; --grid_gutter1_half_100: 1rem; --grid_gutter1_33: 1rem; --grid_gutter1_50: 1rem; --grid_gutter1_66: 1rem; --grid_gutter1_100: 1rem; --grid_col1_25: 1rem; --grid_col2_25: 2rem; --grid_col1_33: 1rem; --grid_col2_33: 2rem; --grid_col4_33: 4rem; --grid_col1_50: 1rem; --grid_col2_50: 2rem; --grid_col3_50: 3rem; --grid_col4_50: 4rem; --grid_col8_50: 10rem; --grid_col1_66: 1rem; --grid_col2_66: 2rem; --grid_col3_66: 3rem; --grid_col4_66: 4rem; --grid_col12_66: 65%; --grid_col1_100: 1rem; --grid_col2_100: 2rem; --grid_col3_100: 3rem; --grid_col4_100: 4rem; --grid_col5_100: 5rem; --grid_col6_100: 100%; --grid_col8_100: 100%; --grid_col11_100: 100%; --grid_col12_100: 100%; --grid_col16_100: 100%; --grid_col18_100: 100%; --grid_colgutter1_25: 1rem; --grid_colgutter1_33: 1rem; --grid_colgutter1_50: 1rem; --grid_colgutter1_66: 1rem; --grid_colgutter1_100: 1rem; --grid_colgutter2_33: 1rem; --grid_colgutter4_66: 25%; --grid_colgutter4_100: 25%; --grid_colgutter6_100: 25%; } .general-width { } .layout0 .content { width: 100%; padding-right: 0; padding-left: 0; } .layout0 .container > .right { width: 100%; padding: 0; } .top-header, body.scroll-shrink .top-header { background: rgb(var(--headerBgColor)); } .top-header[data-info="1"], body.scroll-shrink .top-header[data-info="1"] { padding-top: 40px; } /* 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="3"] .top-header { position: absolute; } body[data-header-mobile="1"].scroll-down .top-header { top: 0; -webkit-transform: translate(0, -200%); transform: translate(0, -200%); } body[data-header-mobile="1"].scroll-up .top-header { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .logo a, .no-touchevents .top-header:hover .logo a, body.scroll-shrink .top-header header .logo a, .no-touchevents body.scroll-shrink .top-header:hover header .logo a { width: 150px; height: 35px; margin: 10px 0; } body.scroll-shrink .top-header .logo .hideonscroll { opacity: 1; } body.scroll-shrink .top-header .logo[data-format="2"] .hideonscroll { height: auto; } body.scroll-shrink .top-header .logo .showonscroll { opacity: 0; } .hero div.hero-background { left: 0; width: 100%; height: 100%; -webkit-transform: none; transform: none; } .menu, .right .macronav, header .translate { display: none; } .sTrigger, body.scroll-shrink .top-header .sTrigger { display: block; } .no-touchevents #sNav { z-index: 9; } .col-layout { display: block; } .no-cssgrid .col-layout { width: 100%; margin: 1rem 0; } /* --- COLUMNS --- */ .col-layout .column { margin: 1rem 0; } .no-cssgrid .col-layout .column { display: block; margin: 1rem 0; } .no-cssgrid .col-layout.type1 > .column, .no-cssgrid .col-layout.type2 > .column, .no-cssgrid .col-layout.type3 > .column:nth-of-type(2n + 1), .no-cssgrid .col-layout.type3 > .column:nth-of-type(2n), .no-cssgrid .col-layout.type4 > .column:nth-of-type(2n + 1), .no-cssgrid .col-layout.type4 > .column:nth-of-type(2n), .no-cssgrid .col-layout.type5 > .column { width: 100%; } .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 { left: calc(-50vw + 50%); } .contentBar[data-bg-color="0"]:has(.content-container:only-child) { margin: 2rem 0; } *:not(.contentBar) + .contentBar { margin-top: 2rem; } .contentBar + *:not(.contentBar) { margin-top: 2rem; } /* bild height */ .contentBar[data-height="1"] .background-container { height: auto; } .touchevents .contentBar .background-container[data-bg-layout="0"] > .parascroll { left: 0; width: 100%; height: 100%; -webkit-transform: none; transform: none; } .contentBar .background-video { display: none; } /* --- CONTENT CONTAINER --- */ /* --- text padding --- */ .contentBar .container[data-content-layout="0"] .section-content { padding-top: 1rem; } .contentBar .container[data-content-layout="1"] .section-content, .contentBar .container[data-content-layout="3"] .section-content { padding: 2rem 4%; } .contentBar .content-container .section-content.justify1 { text-align: left; } .conForm.narrow { width: 100%; } .conForm.newsletter-signup { margin: 1rem 0; } .contentBar .section-content.justify2 .conForm.newsletter-signup { margin: 1rem auto; } .conForm input.short, .conForm select.short, .conForm input.medium, .conForm select.medium { width: 100%; margin: 0; } .conForm .double1 { width: 32%; } .conForm.narrow .double1, .form-modal .conForm .double1 { width: 100%; margin-right: 0; padding: 0 0 1em; } .conForm .double2 { width: 65%; } .conForm.narrow .double2, .form-modal .conForm .double2 { width: 100%; } .conForm .double1 + .double2, .conForm .double2 + .double1 { margin-left: 3%; } .conForm.narrow .double1 + .double2, .conForm.narrow .double2 + .double1, .form-modal .conForm .double1 + .double2, .form-modal .conForm .double2 + .double1 { margin-left: 0; } .conForm .split, .conForm.narrow .split, .form-modal .conForm .split { width: 48.4276%; } .conForm .split:nth-of-type(2n), .conForm.narrow .split:nth-of-type(2n), .form-modal .conForm .split:nth-of-type(2n) { margin-left: 3.1446%; } .conForm .triple, .form-modal .conForm .triple, .conForm.narrow .triple, .conForm .column .triple { width: 48.4276%; padding: 0 0 1rem; } .conForm div > .triple:last-of-type { padding: 0; } .conForm .triple:nth-of-type(3n+2), .conForm .triple:nth-of-type(3n), .form-modal .conForm .triple:nth-of-type(3n+2), .form-modal .conForm .triple:nth-of-type(3n) { margin-left: 3.1446%; } .conForm.narrow .triple:nth-of-type(3n+2), .conForm.narrow .triple:nth-of-type(3n), .conForm .column .triple:nth-of-type(3n+2), .conForm .column .triple:nth-of-type(3n) { margin-left: 0; } .conForm.narrow .triple:nth-of-type(2n), .conForm .column .triple:nth-of-type(2n) { margin-left: 3.1446%; } #map { height: 300px; } .index ul { grid-column-gap: 1rem; } .index .ix-title, .index .ix-text { display: block; } .overlay:before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 50px; background-color: rgba(var(--black), 0.6); z-index: 4; } .overlay .pageoverlay-item { top: 50px; bottom: 0; width: auto; border-radius: 0; } .overlay-holder .media-gallery.wide { left: calc(-50vw + 50%); width: 100vw; } .no-cssgrid .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 103.1446%; margin: 0 -1.5723%; } /* --- swiffy --- */ .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 2; } .media-gallery.carousel.wide.swiffy-slider { --swiffy-slider-item-count: 2; } /* 50% */ .col-layout.type1 .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="2"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="2"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 2; } /* 25%, 33% */ .col-layout .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="1"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="3"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 2; } .contentBar .offset-container .gallery-slideshow:not(:only-child) .wrap.active { position: relative; top: auto; right: auto; bottom: auto; left: auto; } .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(4, 1fr); } .col-layout .media-gallery.gallery-thumbgrid .wrap, .col-layout.type1 .media-gallery.gallery-thumbgrid .wrap, .col-layout.type3 > .column:nth-of-type(2n + 1) .media-gallery.gallery-thumbgrid .wrap, .col-layout.type4 > .column:nth-of-type(2n) .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(4, 1fr); } .contentBar .container:not([data-content-width="0"]) .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem 6.4935%; } .contentBar .offset-container:not(:last-child) .gallery-slideshow .wrap.active { position: relative; top: auto; right: auto; bottom: auto; left: auto; opacity: 1; visibility: visible; } .contentBar .offset-container:not(:last-child) .gallery-slideshow .gallery-item { position: relative; } .no-cssgrid .gallery-thumbgrid .gallery-item { width: 23%; margin: 1%; } .no-cssgrid .col-layout .gallery-thumbgrid .gallery-item, .no-cssgrid .layout0 .col-layout .gallery-thumbgrid .gallery-item { width: 46.0786%; margin: 1.9575%; } .no-cssgrid .gallery-video .gallery-item { width: 48%; margin: 2% 1%; } .gallery-slideshow.left, .layout0 .gallery-slideshow.left { width: 48.4276%; margin-right: 3.1446%; } .col-layout .gallery-slideshow.left, .layout0 .col-layout .gallery-slideshow.left { width: 100%; margin-right: 0; } .gallery-slideshow.right, .layout0 .gallery-slideshow.right { width: 48.4276%; margin-left: 3.1446%; } .col-layout .gallery-slideshow.right, .layout0 .col-layout .gallery-slideshow.right { width: 100%; margin-left: 0; } .contentBar .offset-container:not(:last-child) .gallery-slideshow { height: auto; } /* --- SINGLE VIDEO --- */ .contentBar .offset-container .media-gallery.single-media { height: auto; } .contentBar .offset-container .single-media .gallery-item { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; border-radius: 0; } .single-media .gallery-page .gal-text, .content .single-media .gallery-page .gal-text, .content .single-media .gallery-page[data-layout="1"] .gal-text { margin: 1rem 0 0; } /* --- SINGLE AUDIO --- */ .audio-player[data-layout="1"] { grid-template-columns: 100px 1fr; } .contentBar .offset-container:not(:last-child) .gallery-slideshow .gallery-item .gal-img, .contentBar .offset-container:not(:last-child) .gallery-slideshow.center .gallery-item .gal-img { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: 0; padding: 0 0 66%; } .contentBar .offset-container .gallery-slideshow .gallery-item .gal-img.lores { position: absolute; top: 0; right: 0; left: 0; width: auto; height: 0; padding: 0 0 66%; } .contentBar .offset-container .single-media .gallery-item .gal-img, .contentBar .offset-container .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%; } .contentBar .offset-container .single-media .gallery-item .gal-img.lores { position: absolute; top: 0; right: 0; left: 0; width: auto; height: 0; padding: 0 0 56.25%; } /* --- SLIDESHOW/SLIDER NAV DOTS --- */ .indextabs { top: 25px; bottom: auto; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .indextabs a span { width: 5px; height: 5px; } /* --- NAV ARROWS (OVERLAY/SLIDER) --- */ .overlay > .nav { top: 0; width: 50px; height: 50px; 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); } /* --- CLOSE BUTTON --- */ .labeled-icon { top: 0; right: 0; width: 50px; height: 50px; border-radius: 0; -webkit-transform: translate(0,0); transform: translate(0,0); } h1,h2,h3,h4,.title-h2,.title-h3,.title-h4 { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } h1, .title-h1 { font-size: 3.5em; } h2, .title-h2 { font-size: 2em; } blockquote { margin: 1rem 0; padding: 1rem; } p.teaser1 { font-size: 3.7em; } .content > *:first-child:not(.contentBar) { margin-top: 2rem; } .content > *:last-child:not(.contentBar):not(script) { margin-bottom: 2rem; } /* -- ZMS GRAPHIC ----------------------------------*/ .ZMSGraphic.floatleft { margin-right: 2%; } .ZMSGraphic.floatright { margin-left: 2%; } .ZMSGraphic.floatleft.imgwidth0, .ZMSGraphic.floatright.imgwidth0, .ZMSGraphic.imgwidth0 .graphic, .ZMSGraphic.none.top.imgwidth0 .text, .ZMSGraphic.center.imgwidth0 .text, .ZMSGraphic.floatleft.imgwidth1, .ZMSGraphic.floatright.imgwidth1, .ZMSGraphic.imgwidth1 .graphic, .ZMSGraphic.none.top.imgwidth1 .text, .ZMSGraphic.center.imgwidth1 .text { width: 49%; } .layout0 .ZMSGraphic.floatleft.imgwidth0, .layout0 .ZMSGraphic.floatright.imgwidth0, .layout0 .ZMSGraphic.imgwidth0 .graphic, .layout0 .ZMSGraphic.none.top.imgwidth0 .text, .layout0 .ZMSGraphic.center.imgwidth0 .text, .layout0 .ZMSGraphic.floatleft.imgwidth1, .layout0 .ZMSGraphic.floatright.imgwidth1, .layout0 .ZMSGraphic.imgwidth1 .graphic, .layout0 .ZMSGraphic.none.top.imgwidth1 .text, .layout0 .ZMSGraphic.center.imgwidth1 .text { width: 49%; } .ZMSGraphic.left .graphic, .ZMSGraphic.right .graphic { margin-right: 2%; } /* -- ZMS TABLES -----------------------------------*/ .ZMSTable { display: inline-block; width: auto; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } /* -- ZMS FILE -------------------------------------*/ .ZMSFile .img, .ZMSFile[data-width="1"] .img, .ZMSFile[data-width="2"] .img { width: 25%; } .ZMSFile.file-img .text, .ZMSFile[data-width="1"].file-img .text, .ZMSFile[data-width="2"].file-img .text { width: calc(100% - 25% - 1rem); } /* -- ZMS LINK -------------------------------------*/ .ZMSLinkElement.floatleft, .ZMSLinkElement.floatright { float: none; width: 100%; margin-right: 0; margin-left: 0; } .person-contact .contact-img { width: 200px; } .person-contact .contact-info { width: calc(100% - var(--grid_gutter1_100) - 200px); } .countdown.layout0, .countdown.layout1 { float: none; width: 100%; margin: 2rem 0; text-align: center; } .countdown.layout0 > div, .countdown.layout1 > div { display: inline-block; } .clock-timer { font-size: 1em; } .ix-bild .lazy-loader { right: 0; bottom: auto; width: auto; height: 0; padding: 0 0 50%; background: transparent; } .list-icon[data-layout="1"][data-columns="2"], .list-icon[data-layout="1"][data-columns="3"] { display: block; } .list-icon[data-layout="1"] li { flex-direction: row; } .list-icon[data-layout="1"] .icon-icon img { max-width: 100%; } /* --- swiffy --- */ .list-logo-container[data-columns="4"], .list-logo-container[data-columns="5"], .list-logo-container[data-columns="6"] { --swiffy-slider-item-count: 2; } .list-logo, .list-logo[data-columns="4"], .list-logo[data-columns="5"], .list-logo[data-columns="6"] { grid-template-columns: repeat(2, 1fr); } .list-logo-container ul.slider-container { --swiffy-slider-item-gap: 1.5rem; } .no-cssgrid .list-logo { width: 102%; margin: 2rem -1%; } .no-cssgrid .list-logo li { width: 48%; margin: 1rem 1%; } footer .list-logo li { margin: 1rem 1.5rem; } .list-logo .logo-img { --imgLeft: 6vw; } .list-logo .logo-img[data-ratio="tall"] { --imgLeft: 10vw; } .list-logo .logo-img[data-ratio="wide"] { --imgLeft: 4vw; } .list-logo .logo-img img { max-width: 250px; max-height: 150px; } footer .list-logo .logo-img img { max-width: 150px; max-height: 50px; } footer .list-logo .logo-img[data-ratio="tall"] img { max-height: 75px; } footer .list-logo .logo-img[data-ratio="wide"] img { max-width: 175px; } .list-vertical::before { left: 0.5rem; } .list-vertical[data-marker-type="1"]::before { left: 1rem; } .list-vertical > li { padding: 0 0 0 2rem; } .list-vertical[data-marker-type="1"] > li { padding: 0 0 0 2.5rem; } .list-vertical > li::before { width: 1rem; height: 1rem; } .list-vertical > li div { padding: 1rem; } .list-vertical .vertical-icon { padding-bottom: 1rem; } .list-vertical[data-icon-position="1"] .vertical-icon { margin-right: 1rem; font-size: 3em; } .modal-notice .modal-content { padding: 40px 4% 2rem; } .person-overview li { display: block; max-width: 600px; } .person-overview li .overview-img { max-width: 300px; margin: 0 auto 1rem; } .quote-item { flex-direction: column; } .iSlider::before { right: 0; left: 0; } .iSlider[data-slide-layout="1"] .item-container { padding-top: 0; flex-direction: column; justify-content: space-between; align-content: center; align-items: center; } .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; } .touchevents .iSlider .item-container .item-img > .parascroll { left: 0; width: 100%; height: 100%; -webkit-transform: none; transform: none; } .iSlider .item-container .video-html5 video { display: none; } .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; } .gallery-page[data-scrollicon="1"] .gallery-item .item-info { margin: 0; } /* --- text width --- */ .iSlider .item-container[data-content-width="1"] .item-text, .iSlider .item-container[data-content-width="2"] .item-text, .iSlider .item-container[data-content-width="3"] .item-text, .iSlider .item-container[data-content-width="1"][data-content-layout="1"] .item-text, .iSlider .item-container[data-content-width="2"][data-content-layout="1"] .item-text, .iSlider .item-container[data-content-width="3"][data-content-layout="1"] .item-text { width: 100%; } .gallery-item .item-text, .gallery-item .item-info[data-content-layout="1"] .item-text { padding: var(--grid_col1_100) 4%; } .iSlider .slidetabs { top: 100%; right: 0; bottom: auto; left: 0; text-align: center; } .iSlider .slidetabs a { margin: 0; padding: 10px 8px; } .scrollicon { display: none; } .logo .logo-icon { margin-right: 0.5rem; } .index .ix-iconfull { display: block; } .index .ix-iconfull li { margin: 2rem 0; } .ix-iconfull li .ix-item { grid-template-columns: 125px 1fr; grid-column-gap: 1rem; } .form-modal .conForm, .form-modal .conForm.form-default { padding: 2rem; } .conForm.form-default section { width: 100%; } .iSlider { height: 80vh; min-height: 300px; margin-top: var(--headerHeight); margin-bottom: 50px; } .iSlider[data-slide-height="2"] { height: calc(100vh - var(--headerHeight) - 50px); } body[data-header-gap="2"] .iSlider[data-slide-height="1"] { height: calc(100vh - var(--headerHeight) - 50px); margin-top: 0; } body[data-header-gap="2"] .iSlider[data-slide-height="2"] { height: calc(100vh - var(--headerHeight) - 50px); } .iSlider[data-slide-length="1"] { margin-bottom: 0; } .hero { height: 35vw; min-height: 0; max-height: 70vh; margin: var(--headerHeight) 0 0; } .top-header[data-info="1"] + .middle .hero { margin-top: var(--headerHeight); } body[data-header-gap="2"] .hero { margin: 0; } .overlay .pageoverlay-item .hero { height: 35vw; max-height: 70vh; margin: 0; } .list-vertical[data-marker-type="1"] > li::before { width: 2rem; height: 2rem; } .column .quote-item, .contentBar .section-content > .quote-item:first-child { margin: 0; } .quote-img { width: 150px; margin: 0 auto 1rem; padding: 0 0 150px; } .quote-text { padding-top: 1rem; } .quote-text::before { top: -1.5rem; } .quote-item .q-quote { font-size: 1.4em; } } @media (max-width: 600px) { :root { } footer section > a, footer nav > a, footer section > span, footer nav > span { display: block; margin: 0; padding: 1rem 0; } .social a { display: inline-block; padding: 0.5rem 1rem; } .contentBar .background-map .map { height: 200px; } .conForm.newsletter-signup form { display: block; } .conForm.narrow.newsletter-signup section { margin: 1rem 0 0; } .conForm.narrow.newsletter-signup .formPrivacy { margin-top: 0; } .conForm .double1, .conForm .double2 { width: 100%; padding: 0 0 1rem; } .conForm .double1 + .double2, .conForm .double2 + .double1 { margin-left: 0; padding: 0; } .conForm .split { width: 100%; padding: 0 0 1rem; } .conForm.narrow .split, .form-modal .conForm .split { width: 100%; } .conForm .split:nth-of-type(2n), .conForm.narrow .split:nth-of-type(2n), .form-modal .conForm .split:nth-of-type(2n) { margin-left: 0; padding: 0; } .conForm .triple, .conForm.narrow .triple, .form-modal .conForm .triple, .conForm .column .triple { width: 100%; padding: 0 0 1rem; } .conForm .triple:nth-of-type(3n+2), .conForm .triple:nth-of-type(3n), .form-modal .conForm .triple:nth-of-type(3n+2), .form-modal .conForm .triple:nth-of-type(3n), .conForm.narrow .triple:nth-of-type(2n), .conForm .column .triple:nth-of-type(2n) { margin-left: 0; } .conForm div > .triple:last-of-type { padding: 0; } #map { height: 200px; } .index.swiffy-slider { --swiffy-slider-item-count: 1; } .index ul { display: block; } .index ul.slider-container { display: grid; } .index.swiffy-slider ul[data-slide-length="1"], .index.swiffy-slider ul[data-slide-length="2"] { --swiffy-slider-item-width: calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count)); } .index .ix-full, .index .ix-bild { display: block; left: calc(-50vw + 50%); width: 100vw; } .index li { display: block; margin: 1rem 0; } .index ul.slider-container li { display: flex; margin: 0; } .no-cssgrid .media-gallery:not(.single-media):not(.gallery-slideshow) .gallery-page { width: 100%; margin: 0; } .contentBar .offset-container .media-gallery.gallery-slideshow .gallery-page { margin: 0; } /* --- swiffy --- */ .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 1; } .media-gallery.carousel.wide.swiffy-slider { --swiffy-slider-item-count: 1; } /* 66% */ .col-layout.type3 > .column:nth-of-type(2n + 1) .media-gallery.carousel.swiffy-slider, .col-layout.type4 > .column:nth-of-type(2n) .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="3"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="1"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 1; } /* 50% */ .col-layout.type1 .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="2"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="2"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 1; } /* 25%, 33% */ .col-layout .media-gallery.carousel.swiffy-slider, .contentBar .container[data-content-width="1"] .media-gallery.carousel.swiffy-slider, .contentBar .offset-container[data-content-width="3"] .media-gallery.carousel.swiffy-slider { --swiffy-slider-item-count: 1; } .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(2, 1fr); } .col-layout .media-gallery.gallery-thumbgrid .wrap, .col-layout.type1 .media-gallery.gallery-thumbgrid .wrap, .col-layout.type3 > .column:nth-of-type(2n + 1) .media-gallery.gallery-thumbgrid .wrap, .col-layout.type4 > .column:nth-of-type(2n) .media-gallery.gallery-thumbgrid .wrap { grid-template-columns: repeat(2, 1fr); } .contentBar .container:not([data-content-width="0"]) .media-gallery.gallery-thumbgrid .wrap { grid-gap: 1rem 3.1446%; } .no-cssgrid .gallery-thumbgrid .gallery-item, .no-cssgrid .col-layout .gallery-thumbgrid .gallery-item, .no-cssgrid .layout0 .col-layout .gallery-thumbgrid .gallery-item { width: 31.3333%; margin: 1%; } .no-cssgrid .gallery-video .gallery-item{ width: 100%; padding: 2% 0; } .gallery-slideshow.left, .layout0 .gallery-slideshow.left { float: none; width: 100%; margin-right: 0; } .gallery-slideshow.right, .layout0 .gallery-slideshow.right { float: none; width: 100%; margin-left: 0; } .gallery-slideshow.center .gallery-item .gal-img { padding: 0 0 66%; } /* --- SINGLE AUDIO --- */ .audio-player[data-layout="1"] { display: block; } .audio-player[data-layout="1"] .title-h2 { margin-top: 1rem; } .hgroup { margin: 1rem 0; } h1, .title-h1 { font-size: 3.5em; } p.teaser1 { font-size: 3.4em; } p.teaser2 { font-size: 1.8em; } .content > *:first-child:not(.contentBar) { margin-top: 1rem; } .content > *:last-child:not(.contentBar):not(script) { margin-bottom: 1rem; } /* -- ZMS GRAPHIC ----------------------------------*/ .layout0 .ZMSGraphic.floatleft { margin-right: 0; } .layout0 .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: 1rem 0; } .layout0 .ZMSGraphic.floatleft.imgwidth0, .layout0 .ZMSGraphic.floatleft.imgwidth1, .layout0 .ZMSGraphic.floatright.imgwidth0, .layout0 .ZMSGraphic.floatright.imgwidth1, .layout0 .ZMSGraphic.imgwidth0 .graphic, .layout0 .ZMSGraphic.imgwidth1 .graphic, .layout0 .ZMSGraphic.none.top.imgwidth0 .text, .layout0 .ZMSGraphic.center.imgwidth0 .text, .layout0 .ZMSGraphic.none.top.imgwidth1 .text, .layout0 .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; } .layout0 .ZMSGraphic.left .graphic, .layout0 .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%; } /* -- ZMS FILE -------------------------------------*/ .ZMSFile .img { display: none; } .ZMSFile.file-img .text, .ZMSFile[data-width="1"].file-img .text, .ZMSFile[data-width="2"].file-img .text { width: 100%; margin-left: 0; } .person-contact, .contentBar .person-contact { flex-direction: column; } .person-contact .contact-img { width: 100%; margin-right: 0; } .person-contact .contact-img-img { height: 0; min-height: 0; padding: 0 0 66%; } .person-contact .contact-info { width: 100%; } .person-contact .contact-info > span { padding: 0.25rem 1rem; } .person-contact .btn, .person-contact .btn[data-layout="1"] { width: 100%; margin: auto 0 0; border-radius: 0; } .list-icon[data-layout="0"][data-columns="2"], .list-icon[data-layout="0"][data-columns="3"] { display: block; } .list-icon[data-layout="0"][data-columns="2"] li, .list-icon[data-layout="0"][data-columns="3"] li { margin: 2rem 0; } .index.slider-item-snapstart.slider-item-reveal { --swiffy-slider-item-reveal: 4rem; } .index .ix-title li { margin: 2rem 0; } .ix-short .ix-item { border-radius: 0; } .ix-iconfull li .ix-item { display: flex; } .ix-iconfull .ix-headline { padding: 1rem 0 0; order: 2; } .ix-iconfull .ix-img { order: 1; margin-top: 0; padding: 0 0 50%; } .ix-iconfull .ix-desc { padding: 1rem 0 0; order: 3; } .ix-iconfull .ix-more { padding: 1rem 0 0; order: 4; } .form-modal { display: block; } .form-modal .modal-holder { width: 100%; max-width: 100%; max-height: calc(100vh - 50px); margin-top: 50px; box-shadow: none; } .form-modal .modal-holder::before { display: none; } .conForm { max-width: 100%; } .form-modal .conForm, .form-modal .conForm.form-default { margin: 0 4%; padding: 1rem 0 2rem; } } @media (max-width: 400px) { :root { } .btn { width: 100%; margin-right: 0; } .contentBar .section-content.justify2 .btn { margin-right: 0; margin-left: 0; } .contentBar .section-content.justify1 .btn { margin-right: 0; margin-left: 0; } .contentBar .background-container[data-bg-layout="2"], .contentBar .background-container[data-bg-layout="3"] { padding: 0 0 66%; } .header-info .info-hours { width: 100%; max-width: 100%; margin: 0; } .info-hours .today-hours { font-size: 0.9em; } .hours-list .dow .dow-hours { width: 100%; } .hours-list .dow .dow-hours .hours1:empty { display: none; } /* --- swiffy --- */ .list-logo-container[data-columns="4"], .list-logo-container[data-columns="5"], .list-logo-container[data-columns="6"] { --swiffy-slider-item-count: 1; } .list-logo, .list-logo[data-columns="4"], .list-logo[data-columns="5"], .list-logo[data-columns="6"] { display: block; } .list-logo-container .list-logo, .list-logo-container .list-logo[data-columns="4"], .list-logo-container .list-logo[data-columns="5"], .list-logo-container .list-logo[data-columns="6"] { display: grid; } .no-cssgrid .list-logo { width: 100%; margin: 2rem 0; } .no-cssgrid .list-logo li { width: 100%; margin: 1rem 0; } footer .list-logo li { margin: 1rem; } footer .list-logo .logo-img, footer .list-logo .logo-img[data-ratio="tall"] { padding: 0; } footer .list-logo .logo-img img { max-width: 115px; max-height: 40px; } footer .list-logo .logo-img[data-ratio="tall"] img { max-height: 65px; } footer .list-logo .logo-img[data-ratio="wide"] img { max-width: 150px; } .btn { width: auto; margin-right: 0.5rem; } }