/* Theme Name: museo Author: zaak Author URI: https://www.zaak.ch/ Version: 1.0 License: GNU General Public License */ :root { /* Header */ --mainColor: #24212E; /* Sidebars */ --secondaryColor: #292735; /* Backgrounds */ --teriaryColor: #323041; /* Events Waiting */ --activeColor: #537df1; /* Button Inactive */ --inactiveColor: #555; /* Header colors */ --headerActiveColor: #ffffff1a; --qamButtons: #373341; /* Error with Input, Currently Active Event */ --dangerColor: #FF6464; /* Tool */ --hoverColor: #42404d; --filterColor_White: brightness(0) saturate(100%) invert(98%) sepia(2%) saturate(0%) hue-rotate(214deg) brightness(102%) contrast(102%); --filterColor_Blue: brightness(0) saturate(100%) invert(43%) sepia(82%) saturate(556%) hue-rotate(189deg) brightness(97%) contrast(95%); } /* Cleanup */ /* Main States */ body.loggedIn .profileLoggedIn, body.loggedIn #like { display: inline; } .profileLoggedIn { display: none; } body.loggedIn .profileLoggedOut { display: none; } /* Header */ .header-top { width: 100%; height: 56px; background-color: var(--mainColor); position: fixed; top: 0; z-index: 6668; text-align: left; user-select: none; } .header-top img { display: inline; width: auto; } .header-top .right, .header-top .left { position: absolute; top: 6px; } .header-top .left { left: 31px; } .header-top .right { right: 24px; } /* Header Top Buttons */ .header-top .toggle { margin-left: 10px; height: 44px; width: 54px; padding: 12px 10px; box-sizing: border-box; background-color: transparent; border-radius: 9px; cursor: pointer; } .header-top .toggle#menu { padding: 6px 12px; margin: 0; background-color: transparent; } .toggle:hover { background-color: var(--headerActiveColor); } .toggle.active { background-color: var(--headerActiveColor); } /* Header Top Left */ body.akk-menu .header-top img#menu { background-color: var(--headerActiveColor); } #logobox { position: relative; margin-left: 106px; margin-top: -34px; } #logobox>div { display: inline-flex; } .location { width: 500px; color: #fff; position: absolute; top: 3px; text-transform: uppercase; letter-spacing: 0.48px; } .location span { width: 35px; display: inline-block; padding-left: 25px; } #locationparent { text-decoration: underline; color: #fff; } /* Header Top Right */ body.inProfile .profileLoggedIn { display: none !important; } body.inProfile #profile { background-color: var(--headerActiveColor); } .header-top .right svg:hover { background-color: var(--headerActiveColor); } .header-top .right svg.active { background-color: var(--headerActiveColor); } /* Menu */ .header-menu .close { height: auto; right: 24px; width: 56px; top: 80px; } /* END */ body, html, label, #v-museo-become-a-member->div>div.contentbox.member>div>div>div>button.button:hover, #gameAudioSlider { /* cursor: url(metaverse/images/Cursor_32.png), default; */ cursor: url(data:image/cur;base64,AAACAAEAICAAAAQABAAoEAAAGAAAAAAAKAAAACAAAABAAAAAAQAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wH///8y////TP///xH///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////LMvLy92YmJj88/Pzlv///wX///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///9feHh4/xoaGv+oqKjx////Rf///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////APf394lWVlb/FRUV/0hISP/o6Oi0////DP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8F5eXlsjo6Ov8ZGRn/Gxsb/5SUlPn///9a////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///xbLy8vUJiYm/xoaGv8ZGRn/OTk5/9zc3Mf///8V////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////MKmpqe0cHBz/Gxsb/xsbG/8ZGRn/f39//v7+/nD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///9ThISE+xgYGP8bGxv/Gxsb/xoaGv8uLi7/ycnJ3////3b///9O////MP///xn///8J////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////APr6+n1fX1//FxcX/xsbG/8bGxv/Gxsb/xoaGv89PT3/ampq/4mJifqoqKjtxsbG2d7e3r3w8PCc/Pz8d////zD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8C6+vrpkFBQf8ZGRn/Gxsb/xsbG/8bGxv/Gxsb/xkZGf8XFxf/GBgY/xsbG/8kJCT/MjIy/0dHR/9oaGj/19fXzv///xr///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///xDT09PLKysr/xoaGv8bGxv/Gxsb/xsbG/8bGxv/Gxsb/xsbG/8bGxv/Gxsb/xoaGv8ZGRn/FRUV/ysrK//Dw8Pk////JP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////J7Ozs+YeHh7/Gxsb/xsbG/8bGxv/Gxsb/xsbG/8bGxv/Gxsb/xsbG/8bGxv/GBgY/yAgIP9hYWH/yMjI3v39/Wb///8D////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///9Ij4+P+BgYGP8bGxv/Gxsb/xsbG/8bGxv/Gxsb/xsbG/8bGxv/GRkZ/xoaGv9GRkb/q6ur8PX19Zf///8p////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP39/XBpaWn/FxcX/xsbG/8bGxv/Gxsb/xsbG/8bGxv/Ghoa/xgYGP8yMjL/i4uL++bm5rj///9F////A////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A8PDwmklJSf8YGBj/Gxsb/xsbG/8bGxv/Gxsb/xgYGP8kJCT/bGxs/9HR0dT///9m////Dv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wvb29vBMDAw/xoaGv8bGxv/Gxsb/xkZGf8cHBz/T09P/7a2tur5+fmK////IP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////H729vd8hISH/Gxsb/xoaGv8YGBj/OTk5/5eXl/jt7e2s////Ov///wH///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8/mJiY9BkZGf8YGBj/KCgo/3d3d//a2trL////Wf///wn///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///1WHh4f+Hh4e/1lZWf/BwcHj/Pz8ff///xn///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////IeHh4b27u7vn8fHxn////y////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////E////yX///8G////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wA=), default; } a:hover, a:hover div, a, button:hover, .button:hover, a:hover svg, #home-vimu, .button, #like, .toggle, .profilepicture-box>label, #profileProper>form>div.flex.doppel>label, #profileProper>form>div.flex.doppel>label .checkmark, .close, .back, #home-vimu, .button, #like, .toggle, #CopyShareLink:hover, #Favorits>div.close, #debugger .close, .debugger-tools-game, .header-top .right svg, .akk-menu .header-menu .close, .containerradio input, .checkmark, .contentbox.tutorial .left ul li a, .close, .back, .forgotpassword, .newsletter .send input, .newsletter .send input:hover, .profilepicture-box>label, .slick-list.dragging, .slick-prev, .slick-next, .slick-dots li, .slick-dots li button { cursor: url('metaverse/images/Hand_Point_32.png') auto !important; cursor: url('metaverse/images/Hand_Point_32.cur')6 -10, auto !important; } .range__slider [type="range"]::-webkit-slider-thumb { cursor: url('metaverse/images/Hand_Point_32.png') auto !important; cursor: url('metaverse/images/Hand_Point_32.cur')6 -10, auto !important; } #voiceMicrophone svg:nth-child(1) { display: none; } #voiceMicrophone svg:nth-child(2) { display: block; } #voiceMicrophone:disabled .st0 { fill: #888; } #voiceMicrophone .st0 { fill: #fff; } .toggle-game.active #voiceMicrophone .st0 { fill: var(--activeColor); } .toggle-game.active #voiceMicrophone svg { fill: var(--activeColor); } .toggle-game.active #voiceMicrophone svg:nth-child(2) { display: none; } .toggle-game.active #voiceMicrophone svg:nth-child(1) { display: block; } #verificationFeedback, #verificationFeedback li { color: #fff; } .user_mini { object-fit: cover; } body.badBrowser .flexevents #meetEventButton, body.badBrowser button.button-museum { display: none !important; } .footer-start .social, .header-menu .social { display: none !important; } body .home_or_museum_box { display: block; } body.load .home_or_museum_box { display: block; } body.akk-participants #Participants { display: block; } button.profile-back { background-color: transparent; display: none; padding: 0; } body.leggedIn button.profile-back.active { background-color: transparent; display: inline-block; padding: 0; } button.profile-back.active { background-color: transparent; display: inline-block; } button.profile-back svg { background-color: #333 !important; } body.loggedIn .profileLoggedIn.hidden, body.loginprocess .profileLoggedOut { display: none; } body.loginprocess .profile-back { display: inline-block; } .profile-back, a.profileLoggedOut, a.profileLoggedIn { -webkit-transition: all 0s ease-in-out; -moz-transition: all 0s ease-in-out; -o-transition: all 0s ease-in-out; -ms-transition: all 0s ease-in-out; transition: all 0s ease-in-out; } #CopyShareLink { background-color: #373341; height: 56px; } #CopyShareLink:hover { background-color: var(--activeColor); height: 56px; cursor: pointer; } .flex50 { display: flex; flex-basis: 50%; flex-wrap: wrap; width: 100%; padding: 0; margin: 0 -0px; } .flex50>div { flex-basis: 50%; width: 50%; } .flex50>div:nth-child(1) { padding-right: 10px; box-sizing: border-box; } .flex50>div:nth-child(2) { padding-left: 10px; box-sizing: border-box; } #v-museo-meta-meet-art- h2, #v-meta-meet-art- h2 { font-size: 28px; font-weight: normal; font-family: 'D-DIN Regular'; margin-bottom: 30px; } .close-back { display: none; z-index: 1001; } .stopmobile .button { display: none; } .page-template-_homemobile .toggle { display: none; } .page-template-_homemobile .header-top .right { display: none; } .page-template-_homemobile .home_or_museum_box.fix { display: none; } .page-template-_homemobile #v-museo-mobile->div.blocks-home>div.image_artist>div>div.content_50.font_black.big_text>div>a, .page-template-_homemobile #v-museo-mobile->div.blocks-home>div.exhibitions.home.font_black>div>div>div>a, .page-template-_homemobile #v-museo-mobile->div.blocks-home>div.member>div>div.content>p a, .page-template-_homemobile .menu-menu-1-container, .page-template-_homemobile #v-museo-mobile->div.blocks-home>div.content_image_50>div>div.content_50.big_text>div>a, .page-template-_homemobile #v-museo-mobile->div.blocks-home>div:nth-child(8)>div>div.content_50.big_text>div>a, .page-template-_homemobile .close-back, .page-template-_homemobile #v-mobile->div.blocks-home>div.image_artist>div>div.content_50.font_black.big_text>div>a, .page-template-_homemobile #v-mobile->div.blocks-home>div.exhibitions.home.font_black>div>div>div>a, .page-template-_homemobile #v-mobile->div.blocks-home>div.member>div>div.content>p a, .page-template-_homemobile .menu-menu-1-container, .page-template-_homemobile #v-mobile->div.blocks-home>div.content_image_50>div>div.content_50.big_text>div>a, .page-template-_homemobile #v-mobile->div.blocks-home>div:nth-child(8)>div>div.content_50.big_text>div>a, .page-template-_homemobile .close-back { display: none; } body.loginprocess .home_or_museum_box { display: none; } .museumJoined .close-back { display: block; } body.inmuseum .close-back { display: none; } .wrapper-intro { position: fixed; top: 0px; left: 0px; z-index: 1000; height: 100vh; width: 100vw; box-sizing: border-box; padding: 0 157px; } body.sticky .wrapper-intro { position: absolute; top: 100vh; left: 0px; z-index: 1000; height: 100vh; width: 100vw; box-sizing: border-box; padding: 0 157px; } .menu li.titel a { font-family: 'D-DIN DIN-Bold'; letter-spacing: 0.05em; margin-left: 0px; } .deletion-note { height: 134px; width: 100%; background-color: #000; position: absolute; top: 56px; } .deletion-note button:first-of-type { border-radius: 4px; color: #fff; font-size: 19px; letter-spacing: 0.1em; margin: 0; position: absolute; left: 32px; } .deletion-note button:last-of-type { border-radius: 4px; color: #fff; font-size: 19px; letter-spacing: 0.1em; margin: 0; position: absolute; right: 32px; } .deletion-note button { min-height: 40px; width: 158px; max-width: 40%; } .deletion-note>div { margin-bottom: 20px; } .live .deletion-note { background-color: #FFB1B1 !important; text-align: left; padding: 23px 32px 0 32px; box-sizing: border-box; } .live .deletion-note button { background-color: var(--dangerColor) !important; } .normal .deletion-note { background-color: #C0C2D5 !important; text-align: left; padding: 23px 32px 0 32px; box-sizing: border-box; } .normal .deletion-note button { background-color: #8186AC !important; } .personal .deletion-note { background-color: #A8BDF8 !important; text-align: left; padding: 23px 32px 0 32px; box-sizing: border-box; } .personal .deletion-note button { background-color: var(--activeColor) !important; } .menu li.httpspreviewvimuorg.titel a { font-family: 'D-DIN DIN-Bold'; letter-spacing: 0.05em; margin-left: 15px; } .menu-tutorial-container a { margin-left: 15px; } .menu li.titel a:hover { background-color: transparent !important; } .wrapper { max-width: 350px; margin: 0 10%; } .wrapper { width: 90%; margin: 0 5%; } .page { /* background-color: var(--teriaryColor); */ } #intro {} #slide01, #slide03, #slide05 { background-color: #FFFFFF; } #intro, #slide02, #slide04 { background-color: #EDEDED; } .background-container { width: 100% !important; height: 100% !important; ; background-size: cover; z-index: 100; overflow: hidden; background-position: center; } .intro, .slide { position: relative; height: 100vh; } .slide .pin-wrapper { width: 100%; height: 100%; } #slide02 .pin-wrapper, #slide03 .pin-wrapper, #slide04 .pin-wrapper { transform: translateY(-100%); } .scrollmagic-pin-spacer { position: absolute !important; clip: rect(auto, auto, auto, auto); } #slide01 { margin-top: 00vh; } body.inmuseum body.akk-qam #debugger { display: block; } .cn-close-icon { position: absolute; right: 15px !important; top: 15px !important; margin-top: 0px !important; width: 15px; height: 15px; opacity: .5; padding: 10px; outline: 0; } .button.cookie { font-family: 'D-DIN Regular'; background-color: transparent; border-radius: 5px; width: 30%; margin: 0 auto; color: #000; padding: 12px 16px; border: 1px solid #fff; color: #fff; } .button.cookie:hover { font-family: 'D-DIN Regular'; background-color: #fff; border-radius: 5px; width: 30%; margin: 0 auto; color: #000; padding: 12px 16px; border: 1px solid #fff; color: #000; } body #cookie-notice { position: fixed; min-width: inherit; max-width: 87%; width: 340px; height: auto; z-index: 100000; font-size: 13px; letter-spacing: 0; line-height: 20px; left: 32px !important; bottom: 32px !important; text-align: left !important; font-weight: 400; font-family: -apple-system, BlinkMacSystemFont, Arial, Roboto, "Helvetica Neue", sans-serif; overflow: hidden; border: 1px solid #707070; border-radius: 12px; } #cookie-notice.cookie-notice-hidden { display: none !important; } .cookie-notice-container { padding: 32px 32px !important; text-align: left !important; width: 100%; z-index: 2; } #cookie-notice .cn-button { margin: 0 !important; width: 186px !important; text-align: center !important; margin-top: 20px !important; } .header-loadmuseum { display: none; width: 100vw; height: 100vh; /* position: absolute; */ top: 0 !important; z-index: 600; left: -100vw; } body.inmuseum .footer { display: block !important; } body.inmuseum.museumJoined .home_or_museum.profileLoggedIn { display: none; } .choose-experience { z-index: 998 !important; } .content-tutorial { width: 100%; } #signinTab, #create1Tab, #create2Tab, #create3Tab { padding-top: 120px; } .close-back { position: fixed; right: 24px; width: 56px; top: 80px; height: 56px; } .close-back button { font-size: 40px !important; background-color: transparent; padding: 0px; width: 100%; height: 100%; } .close-back img { width: 100%; height: 100%; } .close-back:hover img { opacity: 0.7; } .choose-experience { top: 0px !important; position: relative !important; height: auto !important; } .fieldbox { margin-bottom: 8px; } .verlauf50 { width: 100%; height: 1px; } #home-vimu, .button, #like, .toggle { cursor: pointer; } p.italic { font-family: 'D-DIN DIN-Italic'; } .imagebox.flex { display: flex; gap: 40px; flex-wrap: nowrap; } .image_artist_v2 .imagebox.flex>div { flex-basis: 50%; } .clear-underline { background-color: transparent; text-decoration: underline; color: #fff; } .header-login ul { list-style-type: disc; } .akk-menu .header-menu .close.toggle:hover, .akk-menu .header-menu .close.toggle { background-color: transparent !important; } .scrolldown { padding-left: 50px; display: block; text-transform: uppercase; font-size: 22px; letter-spacing: 1.2; background-image: url(metaverse/images/pfeil-down.svg); background-repeat: no-repeat; background-position: left top; background-size: 22px; opacity: 0; -webkit-transition: all 1s ease-in-out 6s; -moz-transition: all 1s ease-in-out 6s; -o-transition: all 1s ease-in-out 6s; -ms-transition: all 1s ease-in-out; 6s; transition: all 1s ease-in-out 6s; color: #fff; } .scrolldown.mobile { padding-left: 50px; display: block; text-transform: uppercase; font-size: 22px; letter-spacing: 1.2; background-image: url(metaverse/images/warnung.svg); background-repeat: no-repeat; background-position: left center; opacity: 1; -webkit-transition: all 1s ease-in-out 6s; -moz-transition: all 1s ease-in-out 6s; -o-transition: all 1s ease-in-out 6s; -ms-transition: all 1s ease-in-out; 6s: ; transition: all 1s ease-in-out 6s; color: #fff; } body.load .scrolldown { opacity: 1; } .footer-start { text-align: center; padding: 50px 0 200px 0; position: relative; } .footer-start .content { margin: 0 auto; position: relative; } .footer-start .content button { display: inline; margin: 0 10px; width: auto; font-size: 28px; } .newsletter h2 { display: block; text-align: left; background-image: url(metaverse/images/newsletter.svg); background-repeat: no-repeat; background-position: left; background-size: 44px; font-family: 'D-DIN Regular'; letter-spacing: 0.3em; padding-left: 70px; margin-bottom: 15px; } .newsletter { width: 490px; max-width: 688px; margin: 0 auto; text-align: left; } .scrolltop { position: absolute; right: 46px; bottom: 138px; width: 35px; opacity: 0.5; } .newsletter input:focus { background-color: transparent; } .opa50 { opacity: 0.5; } .footer-start .social img { width: 35px; margin: 0 5px; } #unityKeyboard { height: 0px; display: none; } #modToolsParticipants { margin-bottom: 0px !important } /* .qam>h3 { margin-bottom: 20px; } */ /* QAM & Participant */ /* #Participants>h3 { margin-bottom: 20px; } */ /* #Participants { z-index: 9999; background-color: #24212e; position: fixed; top: 66px; right: 11px; width: 384px; text-align: center; box-sizing: border-box; padding: 27px 32px 32px 32px; border-radius: 12px; display: none; max-height: 511px; } #Participants .back { width: 14px; height: auto; top: 31px; left: 32px; position: absolute; } */ #gform_fields_9>div { padding-bottom: 20px; } #modToolsParticipants>div { padding: 10px 10px 32px 10px; /* padding: 28px 10px 0 10px; */ } /* #Participants .close { width: 13px; height: auto; top: 31px; right: 32px; position: absolute; } */ button.clear { background-color: transparent; color: #fff; } ::-webkit-scrollbar { width: 4px; z-index: 22000; margin-left: 40x; display: none; } @-moz-document url-prefix() { html, body, .left, .right, #part_users, #favorits_list { scrollbar-width: none !important; scrollbar-color: transparent transparent; scrollbar-color: #0A4C95 #C2D2E4; } } /* ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background: #fff; border-radius:0px; } #::-webkit-scrollbar-thumb:hover { background: #999; } */ body.isTour #debugger>div.tool.margin>div:nth-child(1), body.isTour #debugger>div.tool.margin>div:nth-child(2), body.isTour #debugger>div.tool.margin>div:nth-child(3), body.isTour #debugger>div.tool.margin>div:nth-child(4), body.isTour #debugger>div.tool.margin>div:nth-child(5) { display: none; } body.isTour #debugger #movementMode { width: 66.666%; box-sizing: border-box; padding-right: 10px; } body.isTour #debugger>div.tool.margin { float: right; width: 33.333%; } body.isTour #debugger>div.tool.margin>div:nth-child(6) { flex-basis: 100%; box-sizing: border-box; padding: 0 10px 10px 10px; width: 100%; } body.isTour .tool.zusammen .toggle-game { flex-basis: 50%; box-sizing: border-box; padding: 0px; } .verlauf.klein { margin: 0 25%; width: 50%; height: 1px; } #debugger label { border-radius: 10px; } #debugger label svg { width: 100%; border: none; background-color: #373341; border-radius: 0px; padding: 15px 0; margin-bottom: 5px; height: 56px; box-sizing: border-box; } #debugger input[type="radio"] { display: none; } #debugger input[type="radio"]:checked+label {} #debugger input[type="radio"]:checked+label>svg { background-color: aliceblue; fill: #000; } #debugger input[type="radio"]:checked+svg { background-color: aliceblue; fill: #000; } #debugger label.label-guide .svg-box { background-image: url(metaverse/images/tool-guide.svg); background-repeat: no-repeat; background-size: auto 30px; background-position: center; } #debugger input[type="radio"]:checked+label.label-guide .svg-box { background-color: aliceblue; background-image: url(metaverse/images/tool-guide-black.svg); } #debugger label.label-clickmove .svg-box { background-image: url(metaverse/images/tool-movement.svg); background-repeat: no-repeat; background-size: auto 30px; background-position: center; } #debugger input[type="radio"]:checked+label.label-clickmove .svg-box { background-color: aliceblue; background-image: url(metaverse/images/tool-movement-black.svg); } #debugger label.label-freemove .svg-box { background-image: url(metaverse/images/tool-freemovement.svg); background-repeat: no-repeat; background-size: auto 30px; background-position: center; } #debugger input[type="radio"]:checked+label.label-freemove .svg-box { background-color: aliceblue; background-image: url(metaverse/images/tool-freemovement-black.svg); } #debugger label .svg-box { width: 100%; border: none; background-color: #373341; border-radius: 0px; padding: 15px 0; margin-bottom: 11px; height: 56px; box-sizing: border-box; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out -o-transition: all 500ms ease-in-out transition: all 500ms ease-in-out } #movementMode { letter-spacing: 0.1em; } #debugger label:hover .svg-box { background-color: #42404d; } #debugger .radiobut .toggle-game:nth-child(1) .svg-box { border-top-left-radius: 15px; border-bottom-left-radius: 15px; } #debugger .radiobut .toggle-game:nth-child(3) .svg-box { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } #part_profileSpeakingOutline { width: 50px; } body { font-size: 16px; line-height: 1; overflow-x: hidden; } body.akk-part_users #part_users { display: block; } .font11 { font-size: 11px; font-family: 'D-DIN Regular'; } .font16 { font-size: 16px; font-family: 'D-DIN Regular'; } .back, .close { width: 16px; height: auto; top: 20px; } .content-tutorial .small { width: 60%; } .download-icon { width: 30px; position: absolute; left: 20px; top: 17px; } .download-button { background-color: #585667; display: block; padding: 0px; position: relative; border-radius: 5px; margin-bottom: 10px; font-family: 'D-DIN Regular'; } .download-button:hover { background-color: #4b495a; } .accordion-container { border-bottom: 1px solid #fff; } .download-button a { color: #fff; font-size: 16px; padding: 20px; position: inherit; display: block; padding-left: 74px; } .accordion-title .pfeil { width: 16px; position: absolute; right: 10px; transform: rotate(90deg); top: 25px; } .accordion-title.open .pfeil { transform: rotate(-90deg); } .accordion-title h4 { font-size: 24px; } .accordion-title { border-top: 1px solid #fff; padding: 20px 40px 20px 0; position: relative; } .accordion-content { padding: 0 0 20px 0; } button.transparent { background-color: transparent; text-decoration: underline; color: var(--activeColor); padding: 0 !important; margin: 0; width: auto; font-size: 16px !important; letter-spacing: 0 !important; } .button.trans { background-color: transparent; border: none; padding: 0; width: 16px; position: absolute; right: 20px; top: 50%; } button.active { background-color: var(--activeColor); } #myEventsParent { display: none; } body.loggedIn #myEventsParent { display: flex; } #signUpEmail, #signUpPW, #submitBasic { font-size: 19px; box-sizing: border-box; width: 100%; } .back .backSignup { background-color: #4f4d5b; position: absolute; left: 46px; top: 120px; width: 110px; box-sizing: border-box; background-image: url(metaverse/images/back.svg); background-repeat: no-repeat; background-position: left 16px center; background-size: 16px; } .left .back button, .back button, .back a { background-color: #4f4d5b; width: auto; box-sizing: border-box; background-image: url(metaverse/images/back.svg); background-repeat: no-repeat; background-position: left 16px center; background-size: 16px; border-radius: 5px; color: #000; padding: 10px 20px 10px 40px !important; color: #fff; height: 40px; width: 110px !important; font-size: 16px !important; font-family: 'D-DIN Regular'; } .header-faq .back button { padding: 10px 20px 10px 40px !important; } .left .back button:hover { background-color: #42404d; } .header-about h2, .header-faq h2, .header-about h2 { font-size: 46px; font-weight: normal; font-family: 'D-DIN Regular'; margin-bottom: 30px; } .shoppage .left .back button { background-color: #c1c0c5 !important; } .shoppage .left .back button:hover { background-color: #c1c0c5 !important; opacity: 0.6; } .header-profile .back { flex-basis: 40%; padding-top: 20px; box-sizing: border-box; padding-left: 46px; padding-right: 20px; padding-top: 64px; width: 100%; } .header-tutorial .back { padding-top: 0px; box-sizing: border-box; padding-left: 46px; padding-right: 20px; padding-top: 0px; } .header-profile .back button { width: 100%; } .close { width: 13px; height: auto; position: absolute; right: 20px; } .close svg { width: 100%; } .button-speaker .button.grau { background-color: #454353; border: 0px; color: #fff; width: 100%; font-size: 16px; width: 40px; height: 40px; border-radius: 15px; } #mute { background-image: url(metaverse/images/icon_microphone_off.svg); background-repeat: no-repeat; background-size: 16px; background-position: center; } #KickUser { background-image: url(metaverse/images/speak-no.svg); background-repeat: no-repeat; background-size: 16px; background-position: center; margin-left: 12px; } .user-block { display: flex; } .user-block .userimage { flex-basis: 50px; display: flex; position: relative; } #v-museo-about-us-contact-us- textarea, #v-about-us-contact-us- textarea { background-color: transparent; border-color: #fff; border-radius: 3px; color: #fff; } #v-museo-about-us-contact-us- textarea { width: 100% !important; } .centercenter { position: absolute; top: 50%; transform: translateY(-50%); } .user-block .userimage #part_profileSpeakingOutline { border-radius: 50%; border: 0px solid transparent; width: 40px; height: 40px; box-sizing: border-box; } .user-block .userimage #part_profileSpeakingOutline.speaking { border-radius: 50%; border: 0px solid var(--activeColor); width: 40px; height: 40px; box-sizing: border-box; } .user-block .userimage #part_profileSpeakingOutline .blablabla { position: absolute; top: 0; left: 0; display: none; width: 40px; height: 40px; } .user-block .userimage #part_profileSpeakingOutline.speaking .blablabla { position: absolute; top: 0; left: 0; display: block; } #part_profileSpeakingOutline img { width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover; } #part_users>div { padding: 14px 5px 14px 12px; } #part_users>div.userheader { padding: 0; } #part_users>div:nth-child(2n+3) { background-color: #2e2b37; } .user-block #part_name { flex-basis: 100%; text-align: left; font-family: 'D-DIN Regular'; position: relative; box-sizing: border-box; padding-left: 10px; } .user-block .button-speaker { flex-basis: 110px; display: flex; padding: 0 7px 0 0; justify-content: flex-end; } .user-block .button-speaker .button { margin: 0; } .participants-label { display: flex; } .participants-label>div { flex-basis: 50%; text-align: left; } .participants-label>div:nth-child(2) { text-align: right; } #Participants .tool.margin { margin: 0 -10px; } body.akk-participants #Participants { display: block; } body #Favorits { z-index: 9999; background-color: var(--mainColor); position: fixed; top: 66px; right: 11px; width: 552px; text-align: center; box-sizing: border-box; padding: 32px; padding-top: 27px; border-radius: 12px; display: none; height: 511px; } .quadrat { width: 92px; height: 92px; overflow: hidden; margin: 15px; position: relative; } .quadrat img { min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-fit: cover; } .participantsDetails { display: flex; width: 274px; justify-content: space-between; } .participantsDetails>div>div { width: 24px; height: 24px; overflow: hidden; position: relative; border-radius: 50%; background-color: #ECEDEF; } .participantsDetails>div>div img { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .participantsDetails>div { display: inline-block; margin-right: 3.3px; } #detailMembers>div { display: inline-block; margin-right: 6.75px; } .participantsDetails, .userCount { display: inline-block; float: left; position: relative } .user_mini {} #detailMembers { z-index: 1; margin-bottom: -26.5px; } .userCount { display: inline-block; float: right; border: 1px solid #7F8495; color: #7F8495; border-radius: 12px; height: 24px; box-sizing: border-box; padding: 3px 15px; background: rgba(127, 132, 149, 0.15); } #favorit_name { margin-bottom: 0.5em } button { cursor: pointer; border: none; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out -o-transition: all 500ms ease-in-out transition: all 500ms ease-in-out } #favorits_list>div { padding: 12px; box-sizing: border-box; } #favorits_list>div:nth-child(2n+0) { background-color: #2e2b37; } @font-face { font-family: 'D-DIN Regular'; font-style: normal; font-weight: normal; src: local('D-DIN Regular'), url('webfonts/D-DIN.woff') format('woff'); } @font-face { font-family: 'D-DIN DIN-Italic'; font-style: normal; font-weight: normal; src: local('D-DIN DIN-Italic'), url('webfonts/D-DIN-Italic.woff') format('woff'); } @font-face { font-family: 'D-DIN DIN-Bold'; font-style: normal; font-weight: normal; src: local('D-DIN DIN-Bold'), url('webfonts/D-DIN-Bold.woff') format('woff'); } @font-face { font-family: 'D-DIN Condensed Regular'; font-style: normal; font-weight: normal; src: local('D-DIN Condensed Regular'), url('webfonts/D-DINCondensed.woff') format('woff'); } @font-face { font-family: 'D-DIN Exp Regular'; font-style: normal; font-weight: normal; src: local('D-DIN Exp Regular'), url('webfonts/D-DINExp.woff') format('woff'); } @font-face { font-family: 'D-DIN Exp DINExp-Italic'; font-style: normal; font-weight: normal; src: local('D-DIN Exp DINExp-Italic'), url('webfonts/D-DINExp-Italic.woff') format('woff'); } @font-face { font-family: 'D-DIN Condensed DINCondensed-Bold'; font-style: normal; font-weight: normal; src: local('D-DIN Condensed DINCondensed-Bold'), url('webfonts/D-DINCondensed-Bold.woff') format('woff'); } @font-face { font-family: 'D-DIN Exp DINExp-Bold'; font-style: normal; font-weight: normal; src: local('D-DIN Exp DINExp-Bold'), url('webfonts/D-DINExp-Bold.woff') format('woff'); } .din, label { font-family: 'D-DIN Regular'; } .bodoni { font-family: 'Bodoni Moda', serif; font-weight: 700; } .italic, .font_black p.italic { font-family: 'D-DIN DIN-Italic'; } /* Global */ html, body, div, span, h1, h2, h3, h4, h5, h6, ul, li { margin: 0; padding: 0; border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, html { font-family: 'D-DIN Regular'; font-size: 16px; } .titlesmal { font-size: 40px; font-family: 'D-DIN Regular'; } h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: #fff; line-height: 1.3; display: block; font-family: 'D-DIN DIN-Bold'; font-weight: 100; } a h1, a h2, a h3, a h4, a h5, a h6 { color: inherit; color: #001489; } .con-mus h3 { font-family: 'D-DIN DIN-Bold'; font-size: 28px; letter-spacing: 0; } h1.big { font-size: 46px; font-weight: normal; font-family: 'D-DIN Regular'; margin-bottom: 30px; } h1 { letter-spacing: 0em; color: #fff; font-size: 40px; font-family: 'D-DIN Regular'; line-height: 1; padding-bottom: 28px; } h1.font_black { color: #000; } h2 { font-size: 46px; font-weight: normal; font-family: 'D-DIN DIN-Bold'; margin-bottom: 30px; } #eventprivate { display: none; } #v-museo-meta-art-meet- h2, #v-meta-art-meet- h2 { font-size: 28px; font-weight: normal; font-family: 'D-DIN Regular'; margin-bottom: 30px; letter-spacing: 0.1em; } h3 { font-family: 'D-DIN DIN-Bold'; font-size: 19px; letter-spacing: 0.1em; margin-bottom: 20px; } .header-asia h3 { font-family: 'D-DIN Regular'; font-size: 18px; letter-spacing: 0.1em; margin-bottom: 20px; } .header-asia h3 .grau { color: #918D8D; } h4 { font-size: 1.2em; font-weight: normal; } .titel-big { font-size: 46px; } .mitte { transform: translateY(50%); -webkit-transform: translateY(50%); } .center { text-align: center; } h1.title-big { margin-bottom: 20px; } .title-big { font-weight: 100; font-size: 3em; text-transform: uppercase; margin-bottom: 60px; } .countbox .title-big { font-weight: 100; font-size: 3em; text-transform: uppercase; margin-bottom: 10px; } p { margin: 0 0 0px 0; font-size: 16px; line-height: 28px; font-weight: normal; color: #fff; font-family: 'D-DIN Regular'; } .exhibitions p { font-size: 18px; line-height: 28px; margin-block-end: 1.5rem; } .font_black p { color: #000; font-family: 'D-DIN Regular'; } p.big { font-size: 28px; line-height: 40px; } a:active, ul, li, input { outline: none; border: none; } input:read-only { border: unset; background-color: RGBA(255, 255, 255, 0.1); } li { line-height: 1.4; font-size: 0.9em; margin: 0px; font-family: 'D-DIN Regular'; padding: 0; } ul { list-style: none; margin: 0px; font-family: 'D-DIN Regular'; padding: 0; margin-left: 1em; } strong { font-family: 'D-DIN DIN-Bold'; } .right ul { list-style-type: disc; } .right ul li { font-size: 16px; line-height: 28px; } ul.menu { margin-left: 0em; } ol { list-style: decimal; } dfn, cite, em, i { font-style: italic; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } .center { text-align: center; } .clear { clear: both; } a { color: #000; text-decoration: none; outline: 0; border: 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } input { width: 100%; margin: 0; margin-top: 10px; padding: 10px; border: none; background-color: transparent; border: 1px solid white; color: white; border-radius: 3px; box-sizing: border-box; } label { display: block; font-size: 15px; padding: 0; line-height: 1; color: #9998a0; /* cursor: pointer; */ } a:hover {} .mainstage iframe { width: 100%; } a:hover, a:hover { transition: color .8s ease; } .contentstars { position: fixed; width: 100vw; height: 100vh; min-height: auto; top: 0; left: 0; z-index: -1; } @keyframes move-twink-back { from { background-position: 0 0; } to { background-position: -10000px 5000px; } } @keyframes move-clouds-back { from { background-position: 0 0; } to { background-position: 10000px 0; } } .stars, .twinkling, .clouds, .sterne-blau { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; } .sterne-blau { background: url(stars/sterne-blau.png) no-repeat; background-size: cover; z-index: 10; } .stars { background: #141629 url(stars/stars.png) repeat top center; z-index: 0; } .twinkling { background: transparent url(stars/twinkling.png) repeat top center; z-index: 1; animation: move-twink-back 200s linear infinite; } .clouds { background: transparent url(stars/clouds.png) repeat top center; z-index: 2; opacity: .4; animation: move-clouds-back 200s linear infinite; } .header-loadmuseum .footer.nav { bottom: 0; width: 100%; padding-bottom: 15px; } .header-loadmuseum .footer.nav .right p:nth-child(3) { bottom: 0; width: 100%; padding-bottom: 15px; } .header-loadmuseum .footer .right p.grau { opacity: 0.5; } .header-loadmuseum .center { padding-top: 18px; } .header-loadmuseum h2 { font-family: 'D-DIN Regular'; padding: 30px 0 0 0; font-size: 24px; margin: 0; } .starstitle { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999; pointer-events: none; } .header-loadmuseum .footer .right { position: absolute; right: 46px; top: 13px; text-align: right; } .header-loadmuseum .starstitle .vimu { height: auto; text-align: center; } .header-loadmuseum .starstitle { text-align: center; width: 25%; max-width: 300px; } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; width: 100%; box-sizing: border-box; border: 1px solid #aeb4c6; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #backSignup, .back-login button { background-color: #4f4d5b !important; padding-right: 20px !important; width: auto; box-sizing: border-box; background-image: url(metaverse/images/back.svg); background-repeat: no-repeat; background-position: left 16px center; background-size: 16px; padding-left: 30px; width: 100%; height: 40px; font-size: 160x; } .button.weiss { border: 1px solid #000; } .button.weiss:hover { border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.05); color: #fff; } .button.weiss.line { font-family: 'D-DIN Regular'; background-color: rgba(255, 255, 255, 0); border-radius: 5px; width: auto; margin: 0; color: #fff; padding: 15px 20px; border: 1px solid rgba(255, 255, 255, 1); background-color: transparent; } .contentbox.asia .right.w50 .button.weiss.line { display: inline-block; line-height: 1.2; } .button { font-family: 'D-DIN Regular'; background-color: #fff; border-radius: 5px; width: 30%; margin: 0 auto; color: #000; padding: 12px 16px; } .slick-dots .button { background-color: #000; border-radius: 5px; width: ; margin: 0px; color: #000; padding: 0px; font-size: 0px; width: 8px; height: 8px; border: 1px solid #666; } .slick-dots li.slick-active .button { background-color: #000; border-radius: 5px; width: ; margin: 0px; color: #000; padding: 0px; font-size: 0px; width: 8px; height: 8px; border: 1px solid #fff; } #location { font-family: 'D-DIN Regular'; } nav.navi a { color: #001489; } nav.navi a:hover { color: #001489; opacity: 0.5; } nav.navi { position: fixed; top: 318px; right: 0px; width: 20%; box-sizing: border-box; padding-right: 20px; padding-left: 20px; z-index: 2000; } nav.navi ul { list-style: none; } nav.navi ul>li { border-bottom: 1px solid #aeb4c6; border-left: 1px solid #aeb4c6; padding: 0 0 10px 20px; margin-bottom: 50px; text-transform: uppercase; font-family: 'HCo Verlag SSm black'; letter-spacing: 0.2em; color: #001489; font-weight: 800; font-size: 16px; } .debugger-tools-game { display: inline-block; cursor: pointer; } .header-home-image { height: 100vh; background-position: center !important; background-size: cover !important; } .header-home, .header-home-image { height: 100%; width: 100%; } .blocks-home>div { position: relative; } .light { text-transform: uppercase; letter-spacing: 0.2em; } picture { line-height: 0; display: block; } .liste>div { display: flex; flex-wrap: wrap; } .liste .leftlist { flex-basis: 20%; } .liste .rightlist { flex-basis: 80%; } .exhibitions.details.top p, .exhibitions.details.top h1, .exhibitions.details.top h2, .exhibitions.details.top h3, .exhibitions.details.top h4, { color: #fff; } .exhibitions.font_black p, .exhibitions.font_black h1, .exhibitions.font_black h2, .exhibitions.font_black h3, .exhibitions.font_black h4, .exhibitions .font_black p, .exhibitions .font_black h1, .exhibitions .font_black h2, .exhibitions .font_black h3, .exhibitions .font_black h4, .font_black p, .font_black h1, .font_black h2, .font_black h3, .font_black h4 { color: #000; } .header-home .content, .header-home-image .content { position: absolute; left: 10%; width: 30%; top: 50%; transform: translateY(-50%); } .intro.mobile .header-home-image .content { position: relative; margin-left: 0%; left: 0; width: 30%; top: 50%; transform: translateY(-50%); padding-left: 0; } .intro.mobile .wrapper-intro { position: absolute; top: 0px; left: 0px; z-index: 1000; height: 100vh; width: 100vw; box-sizing: border-box; padding: 0 157px; } .header-home-image .content p { font-size: 28px; line-height: 40px; } .header-home iframe { width: 100vw; height: 100vh; object-fit: cover; position: absolute; top: 0; left: 0; } .header-home-image { width: 100vw; height: 100vh; overflow: hidden; } .play-button { width: 98px; height: 98px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 666; } .play-button:hover { width: 105px; height: 105px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .play-button .st0 { fill: var(--activeColor); } .content_image_50 .content_50 { flex-basis: 50%; box-sizing: border-box; padding-left: 10%; position: relative; } .content_image_50 .image_50 { flex-basis: 50%; } .image_60 { flex-basis: 60%; } .image_full { width: 100%; } .image_60_content .content_40 { flex-basis: 40%; box-sizing: border-box; position: absolute; right: 0; width: 40%; top: 0; height: 100%; scroll-padding-bottom: 0; } .contentstars {} .the_museum { height: 100vh; } .the_museum .content { position: absolute; left: 15%; right: 15%; width: 70%; top: 50%; transform: translateY(-50%); } .the_museum .content .teaser-box { display: flex; flex-wrap: wrap; font-family: 'D-DIN Regular'; text-align: center; } .the_museum .content .teaser-box>div { flex-basis: 33.333%; box-sizing: border-box; padding: 00px 10% 40px 10%; box-sizing: border-box; line-height: 1.5em; } .the_museum .content .teaser-box>div:nth-child(6) { flex-basis: 33.333%; box-sizing: border-box; padding: 00px 6% 0px 6%; box-sizing: border-box; line-height: 1.5em; } .the_museum .content .teaser-box>div img { flex-basis: 33.333%; box-sizing: border-box; padding: 32px; } .the_museum .content .teaser-box>div:nth-child(6) img { margin-bottom: -0%; margin-top: -0%; } .the_museum .content .teaser-box>div picture { min-height: 141px; } body.screenmuseum .header-loadmuseum .footer.nav { display: block; } body.screenmuseum .header-loadmuseum .footer.nav p { line-height: 1.2; } .member .content { position: relative; width: 30%; } .member .content img { position: absolute; right: 10px; width: 140px; bottom: -30px; } .member { position: relative; background-color: var(--secondaryColor); } .blocks-home .member h2 { font-size: 46px; } .blocks-home .member p { font-size: 28px; line-height: 1.4em; } .member .content { position: absolute; left: 50%; top: 50%; transform: translateY(-50%); z-index: 4; } .content_50 p a { opacity: 1; text-decoration: underline; color: #000; } .vimu-bg { width: 60%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; opacity: 0.025; } .image_artist_v2 { padding: 80px 0; height: 100vh; box-sizing: border-box; } .image_artist_v2>div { width: 80%; margin-left: 10%; position: relative; } .image_artist_v2 .content_50 { width: 50%; position: relative; padding-right: 20px; box-sizing: border-box; } .image_artist_v2 .image_50 { width: 50%; position: relative; display: block; text-align: center; } .imagebox.flex img { max-height: 800px; box-sizing: border-box; padding-right: 0px; } .image_memberobjekt { width: 233px; margin-left: 15%; padding-top: 50px; z-index: 5; } .image_artist_v2 .uber { opacity: 0.5; } .font_black .legende { color: #000; } div.header-exhibitionsdetails>div.exhibitions.details.content>div>div.slider-exh.slick-initialized.slick-slider>div>div>div.slick-slide.slick-current.slick-active>div>div { min-width: 400px; } .legende { text-align: center; box-sizing: border-box; padding-right: 20px; font-size: 12px !important; line-height: 1.2; padding-top: 8px; } .imagebox .legende { min-height: 40px; line-height: 1em; } .image_artist { height: 100vh; min-height: 700px; } .image_artist>div, .image_artist_v2>div { width: 80%; margin-left: 10%; position: absolute; top: 50%; transform: translateY(-50%); } .image_artist .content_50 { width: 50%; position: relative; padding-right: 20px; box-sizing: border-box; } .image_artist .image_50 { width: 50%; position: relative; display: block; text-align: center; } .image_artist .image_50 img { width: 100%; height: auto; } .image_artist .uber { opacity: 0.5; } .image_60_content .content_40 { flex-basis: 40%; box-sizing: border-box; } .image_60_content .content_40 .centercenter { padding-right: 15%; padding-left: 60px; max-width: 550px; } .content_50 .centercenter { width: 80%; } .content_image_50 .content_50 .centercenter { width: 60%; } .image_full_content .content_40 { position: absolute; left: 10%; width: 30%; top: 50%; transform: translateY(-50%); } .image_full_content .image_full { width: 100% } .tool { right: 0px; top: 0px; display: flex; flex-wrap: wrap; flex-direction: row; } body.screenmuseum .tools { display: inline; } .toggle-game svg { display: block; margin: 0 auto; padding: 5px 0; } .tool.zwei { display: flex; margin-top: 20px; margin-bottom: 5px !important; } .tool.margin { margin: 0 -4px; } .tool.zwei .button-game { flex-basis: 50%; border: none; border-radius: 5px; box-sizing: border-box; padding: 10px 10px; } .radiobut label { font-size: 11px; color: #fff; } .tool.zwei .button-game button { width: 100%; background-color: #4a4754; color: #fff; border-radius: 5px; box-sizing: border-box; height: 40px; box-sizing: border-box; font-size: 16px; } .tool.zwei .button-game button.klein { height: 40px; } .tool.zwei .button-game button:hover { background-color: #42404d; } .tool.eins .button-game { flex-basis: 50%; border: none; border-radius: 5px; box-sizing: border-box; padding: 0px; } .tool.eins .button-game button { width: 100%; background-color: #4a4754; color: #fff; border-radius: 5px; box-sizing: border-box; height: 56px; box-sizing: border-box; font-size: 16px; } .tool.eins .button-game button:hover { background-color: #42404d; } .tool.eins { display: block; margin: 0 5px; margin-top: 0px !important; margin-bottom: 5px !important; ; } .button-full { width: 100%; background-color: #4a4754; border-radius: 5px; box-sizing: border-box; border: 0px !important; padding: 15px; height: 56px; box-sizing: border-box; color: #fff; font-size: 16px; } h3.h3ex { font-size: 24px; text-transform: none; letter-spacing: 0; margin-bottom: 0; } .exhibitionsuber .button { width: auto; } .exhibitions-more .exhibitions.top>h2, .exhibitions-more .exhibitions.home>h2 { margin-left: 0%; font-family: 'D-DIN Regular'; font-weight: normal; } .exhibitions.top>h2 { margin-left: 0%; font-family: 'D-DIN Regular'; font-weight: normal; } .exhibitions.home>h2 { margin-left: 10%; text-transform: uppercase; font-family: 'D-DIN Regular'; font-weight: normal; } .blocks-home .exhibitions { background-color: #EFEFEF; } .blocks-home .exhibitions { width: 100vw; padding: 100px 0%; } .blocks-home .exhibitions .flex { width: 100%; margin-left: 0%; padding: 0 157px; box-sizing: border-box; } .blocks-home .exhibitions .flex>div { padding-right: 60px; box-sizing: border-box; } .exhibitions.top .imagebox { margin-bottom: 0px; } .exhibitions .imagebox .legende { text-align: left; } .blocks-home .exhibitions .content_50>div .button { position: absolute; bottom: 20px; } .blocks-home .exhibitions .flex>div { flex-basis: 33.333%; position: relative; padding-bottom: 50px; gap: 60px; } .blocks-home .exhibitions .legende { text-align: left; } .content-inside-al h2 { font-size: 36px; } .vimu { height: 20px; } .header-menu .footer.nav { background-color: #0D0D0D; } .header-menu .menu { margin-bottom: 40px; } .header-menu .menu a:hover { opacity: 0.5; } .header-menu .centercenter { width: 100%; } .header-menu { width: 100vw; height: 100vh; background-color: #000; position: fixed; z-index: 6667; box-sizing: border-box; text-align: center; font-size: 40px; line-height: 1.5em; left: -100vw; font-family: 'D-DIN Regular'; color: #fff; overflow: scroll; } .header-menu a { text-align: center; font-size: 30px; line-height: 1.2em; font-family: 'D-DIN Regular'; color: #fff; } .header-menu .social img { width: 35px; height: auto; opacity: 0.25; } .header-menu .centercenter>p { opacity: 0.25; } .header-menu .social img:hover { opacity: 1; } .header-menu .social { display: flex; text-align: center; width: 100%; align-items: center; justify-content: center; } .header-menu .social a { flex-basis: 45px; } body.akk-menu .header-menu { left: -00vw; opacity: 1; transition: opacity 1s linear; } body { position: relative; min-height: 100vh; } .footer.nav .center { font-size: 14px; color: #fff; margin-top: 5px; } .footer.nav .center .menu a { background-color: transparent; border: none; color: rgba(255, 255, 255, 0.55); margin: 0 10px; } .footer.nav .center .menu li { display: inline-block; font-size: 16px; } .footer.nav .center .menu a { font-size: 16px; } #forgotpassword { text-decoration: underline; } .footer.nav { position: fixed; height: 66px; margin-top: -66px; width: 100%; z-index: 6666; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; bottom: -0px; } body.akk-login .footer.nav { bottom: -100px; } body.museumJoined .home_or_museum_box, body.inmuseum .home_or_museum_box { display: none; } .home_or_museum_box { position: fixed; height: 66px; margin-top: -66px; width: 300px; z-index: 6668; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; bottom: -0px; right: 0; } body .home_or_museum_box { opacity: 1; } body.startpage .home_or_museum_box { opacity: 0; } body.startpage.sticky .home_or_museum_box { opacity: 1; } button.button-museum.grau, a.button-museum.grau { background-color: #454353; } .#vizzard>div.museumbox.museum.center>div>div:nth-child(2)>div>div.profileLoggedIn>button { background-color: #333; } .content-inside { max-width: 400px; } .header-profile { width: 100vw; height: auto; background-color: var(--teriaryColor); position: absolute; box-sizing: border-box; text-align: center; /* font-size: 30px; */ line-height: 1.5em; padding-bottom: 0px; } .eventsDetail-box { position: relative; } .eventsDetail-box:nth-child(1) { border-radius: 0; } .eventsDetail-box>p { padding-right: 20px; } #eventdescription { height: 123px; } /* Sam Over */ body.header-profile { top: -00vh; } .header-profile button { display: block; background-color: transparent; border: 0; color: #fff; height: 42.5px; width: 100%; text-align: left; border-radius: 5px; box-sizing: border-box; padding-left: 15px; margin-bottom: 5px; font-size: 16px; } .header-profile .right button { padding: 16px 16px; height: 56px; margin-bottom: 22px; } .profilepicture-box>label:hover { background-color: #42404d; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } /* Customize the label (the container) */ .containerradio { display: block; position: relative; padding-left: 35px; /* cursor: pointer; */ font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default radio button */ .containerradio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom radio button */ .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; cursor: pointer; background-color: transparent; border-radius: 3px; border: 1px solid #fff; } .containerradio input:checked~.checkmark { background-image: url(metaverse/images/korrekt.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; background-color: #fff; } .correct input { background-image: url(metaverse/images/korrekt.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .containerradio input:checked~.checkmark:after { display: block; } .flex.doppel>label { width: 50%; padding-top: 5px; } .exhibitions h2 { margin-left: 10%; font-size: 28px; letter-spacing: 0.1em; font-family: 'D-DIN Regular'; } .stehle .exhibitions h2 { margin-left: 0%; font-size: 28px; letter-spacing: 0.0em; /* font-family: 'Bodoni Moda', serif; */ } h2.font_black { letter-spacing: 0em; color: #000; width: 80%; font-size: 40px; font-family: 'D-DIN Regular'; } .header-profile .menu button:hover { background-color: #42404d; } .header-profile button.active, .header-profile button.active:hover { background-color: var(--activeColor); } .shoppage .right .flex { display: flex; height: 100%; width: 100%; flex-wrap: wrap; position: relative; } .produktbox { flex-basis: 50%; display: block; box-sizing: border-box; text-align: center; margin-bottom: 50px; } .produktbox>div {} .produktbox img { margin: 0 10% 20px 10%; width: 80%; -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.56); box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.56); } .flex { box-sizing: border-box; padding: 0px; display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 auto; } .akk-about .left, .akk-faq .left, .akk-shop .content.shop-top>.shoppage.top>.left, .akk-tutorial .left { opacity: 0; -webkit-transition: opacity 500ms ease-out; -moz-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out; } .akk-about .contentbox .right, .akk-faq .contentbox .right, .akk-shop .content.shop-top>.shoppage.top>.right, .akk-tutorial .contentbox .right { opacity: 0; -webkit-transition: opacity 500ms ease-out 500ms; -moz-transition: opacity 500ms ease-out 500ms; -o-transition: opacity 500ms ease-out 500ms; transition: opacity 500ms ease-out 500ms; } .akk-about .opa .left, .akk-faq .opa .left, .akk-shop .opa .content.shop-top>.shoppage.top>.left, .akk-tutorial .opa .left { opacity: 1; -webkit-transition: opacity 500ms ease-out; -moz-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out; } .akk-about .opa .right, .akk-faq .opa .right, .akk-shop .opa .content.shop-top>.shoppage.top>.right, .akk-tutorial .opa .right { opacity: 1; -webkit-transition: opacity 500ms ease-out 500ms; -moz-transition: opacity 500ms ease-out 500ms; -o-transition: opacity 500ms ease-out 500ms; transition: opacity 500ms ease-out 500ms; } div.content-shop { flex-basis: 100%; box-sizing: border-box; position: relative; padding-left: 20%; } div.content-product { flex-basis: 100%; box-sizing: border-box; position: relative; padding-left: 20%; padding-right: 60px; } .content.shop.shop-detail { display: none; position: fixed; width: 100vw; height: 100vh; background-color: #fff; top: 0; left: 0; right: 0; bottom: 0; margin: 0; } .shoppage.top .shop { padding-top: 150px; } .header-shop .back { position: absolute; top: 120px; width: 124px; left: 46px; padding-top: 0px; box-sizing: border-box; padding-left: 0px; padding-right: 20px; z-index: 666; } .pages { min-height: 100vh; } .header-shop, .content.shop.details { min-height: 100vh; background-color: #fff; } .content.shop.details { position: relative; display: block; width: auto; margin: 0 157px; box-sizing: border-box; } .content.shop.details .centercenter { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .shoppage .back button.shopdetail { background-color: #c1c0c5 !important; } .content.shop.shop-detail.showproduct { display: block; } .akk-shop .opa .content.shop-top>.shoppage.top>.right { padding-top: 120px; } .shoppage { position: relative; } .shoppage.top>.left { position: fixed; width: 50%; height: 100%; } .shop-detail .centercenter { display: flex; width: 80%; padding: 0; margin: 0 10%; } .shopdetail-box { position: fixed; top: 100px; left: 10px; } .shop-detail .left { width: 40%; display: block; padding-right: 10%; } .shop-detail .right { width: 50%; display: block; position: relative; } .shop-detail div.content-product { flex-basis: none; box-sizing: border-box; position: relative; padding-left: 0%; padding-right: 0px; } .shoppage.top>.right { position: relative; left: 50%; width: 50%; box-sizing: border-box; padding-right: 157px; padding-bottom: 150px; } .header-member { position: relative; } .content-tutorial>div { margin-bottom: 150px; min-height: 100%; } .shoppage h1, .shoppage h2, .shoppage h3, .shoppage p { color: #000; } body.akk-shop .header-tutorial { background-color: #fff; } .content-shop.titlebox { height: 100vh; padding-left: 157px; } .header-shop .shop.details .left { flex-basis: 40%; width: 40%; } .header-shop .shop.details .right { flex-basis: 60%; width: 60%; padding-left: 157px; box-sizing: border-box; } body.page-template-_shop, body.single-shop { width: 100%; padding: 0; background-color: #fff; color: #000; margin: 0; } body .shoppage h1, body .shoppage h2, body .shoppage h3, body .shoppage h4, body .shoppage p, body .shoppage h3 { color: #000; } body .shoppage .produktbox h2.titel-shop { font-size: 22px; padding: 0 10px; } body .shoppage h2.titel-shop { font-size: 22px; } body .shoppage h2 { margin-bottom: 10px; box-sizing: border-box; } body .shoppage h3 { font-size: 18px; margin-bottom: 15px; } .contentbox.tutorial .flex, .contentbox.about .flex, .contentbox.faq .flex { min-height: 100vh; } .contentbox.tutorial { display: block; width: 100%; z-index: 100; position: relative; min-height: 100vh; } body.akk-about .header-about { left: 00%; top: 0; min-height: 100vh; overflow: inherit; background-color: var(--teriaryColor); overflow: auto; } .contentbox.tutorial .left, .contentbox.about .left { flex-basis: 403px; background-color: var(--secondaryColor); width: 403px; position: fixed; min-height: 100%; overflow-y: scroll; box-sizing: border-box; height: 100vh; } .contentbox.tutorial .right, .contentbox.about .right, .header-faq .contentbox .right { padding-left: 543px; box-sizing: border-box; padding-right: 50px; max-width: 1293px; width: 100%; overflow-y: scroll; min-height: 100%; height: auto; padding-bottom: 50px; } .contentbox.tutorial div.menu { padding-top: 0px; width: 100%; margin-left: 143px; box-sizing: border-box; padding-right: 32px; margin-bottom: 200px; } .contentbox.about div.menu { padding-top: 0px; box-sizing: border-box; margin-bottom: 00px; padding-left: 121px; padding-right: 32px; width: 100%; } .contentbox.about .back, .contentbox.faq .back { flex-basis: 40%; padding-top: 0px; box-sizing: border-box; padding-left: 46px; padding-right: 20px; } .contentbox.tutorial .back { top: 120px; left: 0px; position: fixed; z-index: 666; width: 110px } .contentbox.tutorial .shoppage .back, .contentbox.about .shoppage .back { flex-basis: auto; padding-top: 0px; box-sizing: border-box; padding-left: 46px; padding-right: 20px; position: absolute; } .contentbox.tutorial .left ul, .contentbox.about .left ul, .contentbox.faq .left ul { margin-left: 0; } .icon-tut { width: 28px; display: inline-block; padding-right: 10px; } a { cursor: pointer; } #createEvent .button { width: 100%; } .contentbox.about .left .menu a, .contentbox.faq .left .menu a { display: block; background-color: transparent; border: 0; color: #fff; padding: 9px 10px 9px 15px; text-align: left; border-radius: 5px; font-size: 16px; } .contentbox.tutorial .left .menu button { font-size: 16px; } .contentbox.about .left .menu li.current-menu-item a, .contentbox.about .left .menu li.current-menu-item a:hover, .contentbox.faq .left .menu li.current-menu-item a, .contentbox.faq .left .menu li.current-menu-item a:hover { background-color: var(--activeColor); } .contentbox.tutorial .left .menu li a:hover, .contentbox.about .left .menu li a:hover, .contentbox.faq .left .menu li a:hover { background-color: #42404d; } .contentbox.tutorial .left .menu li, .contentbox.about .left .menu li, .contentbox.faq .left .menu li { margin-bottom: 5px; } body.akk-faq .header-faq { left: 00%; top: 0; min-height: 100vh; overflow: inherit; background-color: var(--teriaryColor); overflow: auto; } .contentbox.tutorial .left ul li.current-menu-item { background-image: url(images/kreis-tut.svg); } .contentbox.tutorial .left ul li a { display: block; background-color: transparent; border: 0; color: #fff; padding: 10px 10px 10px 15px; width: 100%; text-align: left; border-radius: 5px; cursor: pointer; } .contentbox.tutorial .left ul li.current-menu-item a { background-color: var(--activeColor); } .contentbox.tutorial .left ul li { background-image: url(images/kreis-tut-no.svg); background-repeat: no-repeat; background-position: left center; background-size: 20px; z-index: 2; position: relative; display: block; padding: 10px 0 10px 50px; } .contentbox.tutorial .left ul li.titel { background-image: url(metaverse/images/tit-tut.svg); background-repeat: no-repeat; background-position: left center; background-size: 20px; padding-left: 40px; z-index: 2; position: relative; display: block; } .contentbox.tutorial .right>div.active, .contentbox.about .right>div.active, .contentbox.faq .right>div.active { display: block; } .contentbox.tutorial .shoppage .right>div, .contentbox.about .shoppage .right>div { display: block; } .contentbox.tutorial .right.w70, .contentbox.about .right.w70, .contentbox.faq .right.w70 { padding-top: 110px; } .contentbox.tutorial .left.w30 { padding-top: 115px; } .contentbox.about .left.w30 { padding-top: 115px; } .header-faq .contentbox .left.w30 { padding-top: 115px !important; } .header-tutorial .contentbox.about .left.w30 { padding-top: 103px; } .header-tutorial .header-shop .header-about { width: 100%; } .linehoch { position: absolute; left: 10px; bottom: 30px; top: 24px; border: none; border-left: 1px solid #6D6D6D; } .linebox { position: relative; } .header-profile .flex { display: flex; height: 100%; } .header-profile .left { flex-basis: 403px !important; width: 403px !important; box-sizing: border-box; text-align: left; background-color: var(--secondaryColor); display: flex; } .header-profile .right { flex-basis: auto; text-align: left; } .button.blue { background-color: var(--activeColor); display: inline-block; width: auto; border-radius: 5px; border: none; color: #fff; font-size: 16px; } .button.blue:hover { background-color: #4c62ad; } .social .button.blue:hover { background-color: transparent; } .form-check input { display: none; } .button.login { height: 56px; font-size: 19px; letter-spacing: 0.1em; } .button.full { width: 100%; font-family: 'D-DIN Regular'; } .button.grau { background-color: #454353; border: 0px; color: #fff; width: 100%; font-size: 16px; } .button.grau:hover { background-color: #42404d; } .doppelbutton .button { width: 100% !important; border-radius: 5px; overflow: hidden; background-color: var(--activeColor); display: inline-block; width: auto; border-radius: 10px; border: none; color: #fff; font-size: 16px; padding: 0px; } .doppelbutton .button span { width: 50%; display: inline-block; float: left; border-radius: 0px; background-color: #454353; border: none; color: #fff; font-size: 16px; padding: 15px 20px; box-sizing: border-box; font-family: 'D-DIN Regular'; font-weight: normal; } .doppelbutton .button span.active { width: 50%; display: inline-block; float: left; border-radius: 0px; background-color: #e1e1e7; border: none; color: var(--activeColor); } .select-box { display: block; position: relative; } select { width: 100%; height: 30px; background-color: transparent; color: #fff; border-radius: 5px; margin-top: 5px; padding-left: 4px; } .form-check label { background-color: var(--activeColor); display: inline-block; width: auto; border-radius: 5px; border: none; color: #fff; width: 50%; height: 56px; box-sizing: border-box; float: left; text-align: center; padding: 5px; } #screenMuseum { display: block; width: 100vw; height: 100vh; position: fixed; z-index: 555; } body.screenmuseum #screenMuseum { display: block; width: 100vw; height: 100vh; position: fixed; z-index: 555; box-sizing: border-box; padding-top: 56px; } .download-bar { font-family: 'D-DIN Regular'; } hr { border-top: 0.2px solid #373341; opacity: 0.3; } /* #debugger hr { display: block; margin: 16px 4px 16px 4px; border-top: 1px solid #373341; } */ .toggle-game.audio { padding: 0 5px; } .toggle-game .button-audio { width: 100%; border: none; background-color: #373341; border-radius: 15px; padding: 0px 0px; margin-bottom: 11px; height: 56px; box-sizing: border-box; display: flex; } .toggle-game .button-audio svg { width: 120px; border: none; background-color: #373341; border-radius: 15px; padding: 15px 20px 15px 30px; margin-bottom: 5px; height: 56px; box-sizing: border-box; } #debugger label.label-freemove { border-radius: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; } #participantsNr { display: inline; padding-right: 0.3em; } #debugger label.label-freemove .svg-box { border-radius: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; } input#gameAudioSlider { border: none; } .range { display: block; width: 300px; } .range__slider { width: 45%; } .range__value { width: 35%; margin-left: 0px; text-align: center; border-left: #e6e4e4 1px solid; display: none !important; } .form-group { display: block; width: 100%; box-sizing: border-box; padding-right: 25px; padding-top: 16px; } .form-group label { text-transform: uppercase; font-size: .7rem; color: #222; margin-bottom: 5px; } .form-group span { font-size: 2rem; font-weight: 600; color: #3c3b3b; } .range__slider label { margin-bottom: 10px; } .range__slider [type="range"] { width: 100%; -webkit-appearance: none; height: 3px; border-radius: 6px; background: #ffffff; outline: none; padding: 0; margin: 0; } /* custom thumb */ .range__slider [type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--activeColor); border: var(--activeColor) 5px solid; cursor: pointer; -webkit-transition: background .15s ease-in-out; transition: background .15s ease-in-out; } .range__slider [type="range"]::-webkit-slider-thumb:hover { background: var(--activeColor); } .range__slider [type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--activeColor); border: var(--activeColor) 5px solid; cursor: pointer; -webkit-transition: background .15s ease-in-out; transition: background .15s ease-in-out; } .range__slider [type="range"]::-moz-range-thumb:hover { background: var(--activeColor); } /* remove border */ input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } .tool { color: #fff; margin-bottom: 10px !important; margin: 0 4px; } #detailDescription { line-height: 1.5; } .close, .back { cursor: pointer; } .social .tool .toggle-game button svg { border-radius: 4px; } .tool.zusammen .toggle-game { flex-basis: 33.333%; box-sizing: border-box; padding: 0px; } .tool.zusammen .toggle-game button svg { width: 100%; border: none; background-color: #373341; border-radius: 0px; padding: 15px 0; margin-bottom: 5px; border-top-left-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .tool.zusammen .toggle-game:nth-child(1) button svg { width: 100%; border: none; background-color: #373341; border-radius: 0px; padding: 15px 0; margin-bottom: 5px; border-top-left-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 10px; } .tool.zusammen .toggle-game:nth-child(2) button svg { width: 100%; border: none; background-color: #373341; border-radius: 0px; padding: 15px 0; margin-bottom: 5px; border-top-left-radius: 0px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0px; } .tool.zusammen .toggle-game:nth-child(3) button svg { width: 100%; border: none; background-color: #373341; border-radius: 0px; padding: 15px 0; margin-bottom: 5px; border-top-left-radius: 0px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 0px; } /* .tool .toggle-game { flex-basis: 33.333%; box-sizing: border-box; padding: 8px 8px 14px 8px; } */ .footer .slider-nav .slick-dots { height: 86px; margin-top: -40px; background-color: var(--mainColor); } .footer .slick-next { right: 30%; top: -43px; } .footer .slick-prev { left: 30%; top: -43px; } .footer { position: relative; } .label-audioslider { color: #fff; font-size: 11px; letter-spacing: 0.1em; } .download-bar { position: absolute; left: 46px; top: 13px; line-height: 23px; /* bottom: 16px; */ z-index: 999; font-size: 14px; font-weight: normal; width: 230px; color: white; } .download-bar>div { display: block; height: 15px; border: 1px solid white; border-radius: 3px; margin-top: 5px; } .download-bar>div>div { display: block; width: 0%; height: 100%; border: 2px solid var(--mainColor); border-radius: 3px; background-color: white; box-sizing: border-box; transition: 0.4s; } .content.home {} body.load .content.home {} .button.blue.full { width: 100%; } .social .tool { color: #fff; margin: 0 -10px; } .home_or_museum { position: absolute; bottom: 44px; right: 44px; } .button.big { padding: 16px 10px; } .login-show { background-color: var(--activeColor); z-index: 9999; border: none; padding: 7px; border-radius: 50%; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out -o-transition: all 500ms ease-in-out transition: all 500ms ease-in-out } body.akk-afterlogin .login-show { display: none; } body.screenmuseum .footer.nav { display: none; } .flexevents { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 auto; } .flexevents>div { flex-basis: 30%; margin: 16px; box-sizing: border-box; height: 600px; max-width: 400px; min-width: 400px; border-radius: 15px; overflow: hidden; } .flexevents>div>div { position: relative; background-color: #fff; color: #000; height: 100%; } .flexevents>div.order3>div { position: relative; background: rgba(255, 255, 255, .1); color: #000; height: 100%; } /* .login-show button, */ ul#signUpEmailFeedback, ul#signUpPWFeedback { padding: 0; margin: 0; color: rgb(255, 0, 0); } #signUpEmail { display: inline; font-size: 15px; font-family: 'D-DIN Regular'; width: auto !important; } button.button[disabled=disabled], button.button:hover[disabled=disabled], button.button:disabled, button.button:hover:disabled { background-color: var(--inactiveColor); cursor: initial; } .back-museum { background-color: var(--activeColor); z-index: 9999; border: none; padding: 20px 20.6px; border-radius: 28px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; display: block; overflow: hidden; -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.5); } .back-museum button { background-color: var(--activeColor); border: 0px solid #6d90f3; padding: 0; text-transform: uppercase; color: #fff; display: block; font-size: 16px; font-family: 'D-DIN Regular'; letter-spacing: 0.15em; line-height: 1; } .header-login { width: 100vw; height: 100vh; position: fixed; z-index: 555; display: block; background-color: var(--teriaryColor); box-sizing: border-box; padding-top: 100px; text-align: center; overflow: hidden; overflow-y: scroll; padding-bottom: 120px; } .header-login .line { display: block; border-top: 1pxsolid #aeb4c6; margin-bottom: 20px; text-align: center; position: relative; } .header-login .back { position: fixed; top: -10px } #login-form .button.blue { padding: 17px 16px 18px 16px; font-size: 19px; } #login-createpw .mdl-textfield__input { background-image: url(metaverse/images/korrekt.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } .profilepicture-box {} .profilepicture { float: left; position: relative; display: block; box-sizing: border-box; } .profilepicture img { min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-fit: cover; } .profilepicture-box input { float: left; width: 60% !important; } input:focus, input:-internal-autofill-selected { background-color: transparent !important; } .inputFeedback ul { list-style-type: disc; color: rgb(245, 100, 100); } .inputFeedback li { color: rgb(245, 100, 100); list-style-type: disc; } .inputFeedback.blue li { color: var(--activeColor); list-style-type: disc; } body.loggedIn.loginprocess .profileLoggedIn { display: none !important; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active { -webkit-text-fill-color: rgb(195, 195, 195); -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; } input:-internal-autofill-selected { -webkit-text-fill-color: rgb(195, 195, 195); -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; } /* .footer span:after { content: '|'; } */ .line .or { display: block; position: absolute; margin: 0 auto; background-color: var(--teriaryColor); margin-top: -7px; font-family: 'D-DIN Regular'; width: 50px; left: 50%; margin-left: -25px; text-align: center; } .login-form { display: none; width: 400px; margin: auto; position: relative; text-align: left; } .login-form a { margin-left: 0px !important; } .login-form .facebook { background-color: #3B5998 !important; } .login-form .google { background-color: #B23939 !important; } .login-form .apple { background-color: #212121 !important; } .forgotpassword { background-color: transparent; color: var(--activeColor); opacity: 1; float: right; border: none; cursor: pointer; } label.floatleft { display: inline-block; float: left; } .login-form input { width: 100% !important; margin: 0; margin-top: 10px; padding: 10px; border: none; background-color: transparent !important; border: 1px solid white; color: white; border-radius: 3px; box-sizing: border-box; } #favorits_empty { font-family: 'D-DIN Regular'; padding: 15px 0 0 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .akk-afterlogin .back-login { position: fixed; left: 46px; top: 120px; width: 110px; } .back-login button { background-color: #4f4d5b; padding: 10px 10px 10px 30px; border-radius: 5px !important; border: none !important; color: #fff; font-size: 16px; width: 110px; font-family: 'D-DIN Regular'; } button, .button, input, select, textarea { font-family: 'D-DIN Regular'; } textarea { width: 100%; padding: 8px; box-sizing: border-box; margin-top: 10px; border: 1px solid #262626; border-radius: 3px; } .mdl-textfield__input { font-family: 'D-DIN Regular' !important; } .bottom-box { position: absolute; bottom: 0; width: 100%; } .slider-home { margin-bottom: 0; height: 100vh; box-sizing: border-box; padding-top: 40px; } .afterlogin-box .right>div { display: none; position: relative; height: 100%; } .afterlogin-box .right>div.active { display: block; } .header-afterlogin { width: 100vw; height: 100vh; position: absolute; z-index: 555; display: none; background-color: var(--teriaryColor); right: -100vw; box-sizing: border-box; padding-top: 100px; text-align: center; background: url(metaverse/images/bg-login.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: scroll; min-height: 800px; top: 0; } body.akk-afterlogin .header-afterlogin { width: 100vw; height: 100vh; position: absolute; z-index: 555; display: block; background-color: var(--teriaryColor); right: 00vh; box-sizing: border-box; padding-top: 120px; text-align: center; background: url(metaverse/images/bg-wiz.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: scroll; min-height: 800px; } .header-afterlogin .afterlogin-box { z-index: 9999; background-color: var(--mainColor); box-sizing: border-box; border-radius: 20px; width: 885px; margin: 0 auto; overflow: hidden; } .header-afterlogin .afterlogin-box .flex { display: flex; } .header-afterlogin .afterlogin-box .flex .left { flex-basis: 40%; text-align: left; background-color: var(--secondaryColor); padding: 50px 30px 26px 50px; box-sizing: border-box; } .header-afterlogin .afterlogin-box .flex .right { flex-basis: 60%; text-align: left; background-color: var(--teriaryColor); padding: 50px; box-sizing: border-box; width: 60%; display: block; position: relative; } .afterlogin-box .left button { background-color: transparent; border: none; display: block; background-color: transparent; border: 0; color: #6d6d6d; height: 40px; padding: 10px; width: 100%; text-align: left; border-radius: 5px; font-size: 16px; font-family: 'D-DIN Regular'; } .afterlogin-box .left .blue button { color: var(--activeColor); } .afterlogin-box .left button.active { font-family: 'D-DIN Regular'; background-color: var(--activeColor); color: #fff; } .afterlogin-box ul>span span.color { position: absolute; top: 0; background-color: var(--activeColor); width: 1px; -webkit-transition: height 0.3s ease-out; -moz-transition: height 0.3s ease-out; -o-transition: height 0.3s ease-out; transition: height 0.3s ease-out; } .afterlogin-box .line1 ul>span span.color { height: 14.28%; } .afterlogin-box .line2 ul>span span.color { height: 28.57%; } .afterlogin-box .line3 ul>span span.color { height: 42.85%; } .afterlogin-box .line4 ul>span span.color { height: 57.1%; } .afterlogin-box .line5 ul>span span.color { height: 71.4%; } .afterlogin-box .line6 ul>span span.color { height: 85.86%; } .afterlogin-box .line7 ul>span span.color { height: 100%; } .afterlogin-box ul { list-style-type: none; margin: 0; padding: 0; position: relative; } .afterlogin-box ul>span { position: absolute; height: auto; top: 23px; left: 10px; z-index: 1; display: block; bottom: 25px; width: 1px; background-color: #6D6D6D; } .afterlogin-box ul li { background-image: url(metaverse/images/kreis-no.svg); background-repeat: no-repeat; background-position: left center; background-size: 20px; line-height: 3em; padding-left: 45px; z-index: 2; position: relative; display: block; margin-bottom: 25px; } .afterlogin-box ul li.blue { background-image: url(metaverse/images/kreis-blue.svg); } .afterlogin-box ul li.active { background-image: url(metaverse/images/kreis.svg); } .shop-detail .centercenter .left, .shop-detail .centercenter .right { opacity: 0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .shop-detail.opa .centercenter .left { opacity: 1; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .shop-detail.opa .centercenter .right { opacity: 1; -webkit-transition: all 500ms ease-in-out 500ms; -moz-transition: all 500ms ease-in-out 500ms; -o-transition: all 500ms ease-in-out 500ms; transition: all 500ms ease-in-out 500ms; } .slider-home .flex { display: flex; flex-wrap: wrap; } .slider-region .textbox { width: 100%; height: 44px; box-sizing: border-box; padding: 10px; text-align: center; display: block; } .slider-region p { display: block; text-align: center; color: #fff; line-height: 25px; } .slider-region .slick-next { right: 25px; background-color: transparent; background-image: url(metaverse/images/pfeil-front.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; width: 16px; height: 16px; } .slider-region .slick-prev { left: 25px; background-color: transparent; background-image: url(metaverse/images/pfeil-back.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; width: 16px; height: 16px; } .slider-product .slick-prev:hover, .slider-product .slick-prev:active, .slider-product .slick-prev:visited { background-image: url(metaverse/images/pfeil-black.svg); } .slider-product .slick-next:hover, .slider-product .slick-next:active, .slider-product .slick-next:visited { background-image: url(metaverse/images/pfeil-front-black.svg); } .slider-product .slick-next { right: -35px; background-color: transparent; background-image: url(metaverse/images/pfeil-front-black.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; } .slider-product .slick-prev { left: -35px; background-color: transparent; background-image: url(metaverse/images/pfeil-back-black.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; } .button.weiss.line { font-family: 'D-DIN Regular'; background-color: transparent; border-radius: 5px; width: auto; margin: 0; color: #fff; padding: 15px 20px; border: 1px solid #fff; background-color: rgba(255, 255, 255, 0.0); display: inline-block; position: absolute; bottom: 0; } .button.weiss.line:hover { font-family: 'D-DIN Regular'; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; width: auto; margin: 0; color: #fff; padding: 15px 20px; border: 1px solid rgba(255, 255, 255, 1.0); } .font_black .button.weiss.line { font-family: 'D-DIN Regular'; background-color: transparent; border-radius: 5px; width: auto; margin: 0; color: #000; padding: 15px 20px; border: 1px solid #000; background-color: rgba(0, 0, 0, 0.0); display: inline-block; position: absolute; bottom: 0; opacity: 0.95; } .font_black .button.weiss.line:hover { font-family: 'D-DIN Regular'; background-color: rgba(0, 0, 0, 0.1); border-radius: 5px; width: auto; margin: 0; color: #000; padding: 15px 20px; border: 1px solid #000; } .exhibitionsuber { padding-bottom: 20px; position: relative; height: 100%; } .slick-next:before { content: '' !important; display: none; } .slick-prev:before { content: '' !important; display: none; } .slider-region .slick-prev:hover, .slider-region .slick-prev:focus { color: #000; outline: none; background-color: transparent !important; opacity: 1 !important; background-color: transparent; background-image: url(metaverse/images/pfeil-back.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; } .slider-region .slick-next:hover, .slider-region .slick-next:focus { color: #000; outline: none; background-color: transparent !important; opacity: 1 !important; background-image: url(metaverse/images/pfeil-front.svg) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 16px !important; } .slider-region { background-color: #4f4d5a; text-align: center; height: 44px; border-radius: 5px; color: #000; overflow: hidden; } .ml20 { padding-left: 10%; box-sizing: border-box; } .slider-home .flex .left.w50 { flex-basis: 50%; } .slider-home .flex .right.w50 { flex-basis: 50%; } .slider-home .flex .left.w50 { flex-basis: 50%; } .slider-home .flex .right.w50 { flex-basis: 50%; } .slider-home .flex .left.w60 { flex-basis: 60%; } .slider-home .flex .right.w40 { flex-basis: 40%; } .container-all { overflow: hidden; } .container { position: relative; margin: 0 0px; padding-top: 0px; display: block; z-index: 1000; } .content { display: block; width: 100%; position: relative; } .section { position: relative; padding: 30px 20% 30px 20%; } .section.titel { position: relative; padding: 0px 20% 30px 20%; } .section.programm { position: relative; padding: 30px 0% 30px 0%; } .programm-box>div { display: flex; flex-wrap: wrap; margin-bottom: 20px; position: relative; } .programm-box>div .zeit { flex-basis: 20%; padding-left: 10%; box-sizing: border-box; } .programm-box>div .inhat { flex-basis: 60%; } .line { display: block; border-top: 1px solid #aeb4c6; margin-bottom: 30px; margin-top: 30px; } .line.light { border-top: 1px solid rgba(174, 180, 198, 0.2); } .line.pro { display: block; border-top: 1px solid rgb(174, 180, 198); margin-bottom: 60px; margin: 0 20% 60px 20%; } .moderator-box { display: flex; flex-wrap: wrap; position: relative; margin: -40px; margin-bottom: 20px; } .moderator-box>div { flex-basis: 50%; box-sizing: border-box; display: block; text-align: center; padding: 40px; padding-bottom: 70px; } .moderator-box>div a, .moderator-box>div a:hover, .moderator-box>div a:root { color: #fff !important; opacity: 1; } .moderator-box>div>div { background-color: #001489; display: block; height: 100%; width: auto; padding-top: 30px; } .moderator-box img { box-sizing: border-box; padding: 30px 35px 30px 35px; } img { width: 100%; height: auto; } .toggle-box { display: none; } /* ----------------------------------------------------------------------------asia */ .akk-asia .header-asia .back { position: fixed; z-index: 3; display: block; top: 120px; left: 46px; } .header-asia .back button { background-color: #4f4d5b; width: auto; box-sizing: border-box; background-image: url(metaverse/images/back.svg); background-repeat: no-repeat; background-position: left 16px center; background-size: 16px; border-radius: 5px; margin: 0 auto; color: #000; padding: 10px 20px 10px 40px !important; color: #fff; height: 40px; width: 102px; } .header-asia .right>div { padding-left: 30px; border-left: 1px solid #fff; padding-right: 5%; } .header-asia .right { background-color: #000; } .contentbox.asia .left.w50 { background-color: transparent; display: block; flex-basis: 50%; height: 100vh; overflow: scroll; box-sizing: border-box; position: relative; } .contentbox.asia .right.w50 { flex-basis: 50%; box-sizing: border-box; padding-left: 30px; padding-right: 30px; height: 100vh; margin-left: inherit; padding-top: 120px; height: 100vh; } .contentbox.asia .right.w50 img { width: 150px; height: auto; } /* ----------------------------------------------------------------------------partner */ .header-partner .back { flex-basis: 20%; padding-top: 0px; box-sizing: border-box; padding-left: 0px; padding-right: 20px; width: 100%; } .header-partner .back { position: absolute; left: 46px; top: 120px; width: 110px; z-index: 999; } .akk-partner .header-partner .back button { padding: 10px 20px 10px 40px !important; } .akk-member .header-member .back { position: fixed; left: 46px; top: 120px; width: 110px; } #post-container>div.contentbox.tutorial.partner>div>div.right.w70>div { display: flex; flex-wrap: wrap; } .contentbox.tutorial.partner .right>div { display: flex; } .contentbox.partner>.flex { min-height: auto; width: 100vw; } .contentbox.partner { display: block; width: 100vw; /* z-index: 100; */ position: absolute; min-height: 100vh; top: 0; } .contentbox.partner .left.w30 { background-color: transparent; display: block; width: 50%; position: fixed; height: 100vh; box-sizing: border-box; display: flex; padding-left: 10%; } .contentbox.partner .right.w70 { width: 50%; box-sizing: border-box; padding-left: 30px; padding-right: 30px; height: 100vh; margin-left: inherit; float: right; height: 100vh; } .contentbox.partner .right.w70 .float { position: absolute; top: 45%; transform: translateY(-50%); width: 90%; display: flex; flex-wrap: wrap; position: relative; } .content-partner.titlebox {} .content-partner.titlebox>div { position: absolute; top: 45%; transform: translateY(-50%); padding-right: 20%; } .contentbox.partner .right.w70 .logobox { float: left; width: 33.33%; box-sizing: border-box; padding: 25px 100px 25px 0; } #bg { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; } body.load #bg { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; background-position: center; } .header-home-image #bg { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; -webkit-transition: all 9s ease-in-out 0.5s; -moz-transition: all 9s ease-in-out 0.5s; -o-transition: all 9s ease-in-out 0.5s; transition: all 9s ease-in-out 0.5s; } body.load .header-home-image #bg { position: relative; width: 140%; height: 140%; background-size: cover; background-position: center; background-position: center; -webkit-transition: all 9s ease-in-out 0.5s; -moz-transition: all 9s ease-in-out 0.5s; -o-transition: all 9s ease-in-out 0.5s; transition: all 9s ease-in-out 0.5s; margin-left: -40%; margin-top: -10%; } .hero-section { width: 100%; height: 70rem; overflow: hidden; position: relative; } .hero-section img { width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%); } .login-show.home-header { display: inline-block; } .header-home-image p, .header-home-image h1, .header-home-image h4 { color: #fff; } .header-home-image h1 { font-weight: 800; font-size: 60px; line-height: 1.2; } #instaStart { font-size: 16px; } .newsletter .send { width: 100px; margin-left: 10px; box-sizing: border-box; display: inline-block; height: 40px; } .newsletter .send input { width: 100px; margin: 0; margin-top: 10px; padding: 10px; border: none; background-color: transparent; border: 1px solid white; color: white; border-radius: 3px; box-sizing: border-box; cursor: pointer; } .newsletter .send input:hover { width: 100px; margin: 0; margin-top: 10px; padding: 10px; border: none; background-color: #fff; border: 1px solid white; color: #000; border-radius: 3px; box-sizing: border-box; cursor: pointer; } .newsletter .mc-field-group { width: 370px; box-sizing: border-box; display: inline-block; height: 40px; } .exhibitions.details h1 { margin-left: 0%; font-size: 60px; line-height: 1.2em; font-weight: 700; letter-spacing: 0; font-family: 'Bodoni Moda', serif; hyphens: auto; } .exhibitions.details { position: relative; } .exhibitions.details .content_50.text { padding-right: 60px; position: relative; box-sizing: border-box; } .exhibitions.details .content_50.text>div { position: absolute; top: 50%; transform: translateY(-50%); display: block; right: 30px; } .exhibitions.details.top .centercenter { width: 100vw; } .exhibitions.details.top { height: 100vh; } .exhibitions.details.content>div { width: 80%; max-width: 700px; margin: 0 auto; } .header-exhibitions .back { position: fixed; top: 112px; left: 46px; } .header-exhibitions { padding-top: 104px; } .header-exhibitions .flex, .header-exhibitionsdetails .exhibitions-more .flex { display: flex; width: 100%; margin-left: 0; padding: 0 157px; box-sizing: border-box; flex-wrap: nowrap; } .exhibitions.top>.flex { gap: 60px; } .header-exhibitions .exhibitions.upcoming>.flex { gap: 30px; } .header-exhibitions .exhibitions>.flex>div, .header-exhibitionsdetails .exhibitions-more .flex>div { flex-basis: 33.333%; } .header-exhibitions .back button { background-color: #c1c0c5 !important; z-index: 111; } .header-exhibitionsdetails .flex { width: 80%; margin-left: 10%; flex-wrap: nowrap; } .header-exhibitionsdetails .flex>div { flex-basis: 50%; } .slider-exh img { height: 600px; width: auto; margin: 0 auto; } .back.exhibitions, .back.exhibitionsdetails { z-index: 9999; position: fixed; left: 46px; top: 120px; } .content-ex { padding: 0px 0 80px 0; } .slider-exh { margin-bottom: 150px; } .exhibitions.details.content { padding-top: 100px; } .header-exhibitions, .header-exhibitionsdetails { background-color: #EFEFEF; width: 100vw; overflow: hidden; } .font_black .slider-exh .slick-prev:hover, .font_black .slider-exh .slick-prev:active, .font_black .slider-exh .slick-prev:visited { background-image: url(metaverse/images/pfeil-black.svg); opacity: 1; } .font_black .slider-exh .slick-next:hover, .font_black .slider-exh .slick-next:active, .font_black .slider-exh .slick-next:visited { background-image: url(metaverse/images/pfeil-front-black.svg); opacity: 1; } .font_black .slider-exh .slick-next { right: -55px; background-color: transparent; background-image: url(metaverse/images/pfeil-front-black.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; opacity: 1; } .font_black .slider-exh .slick-prev { left: -55px; background-color: transparent; background-image: url(metaverse/images/pfeil-back-black.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; opacity: 1; } .slick-arrow.slick-disabled { opacity: 1 !important; } .slider-exh .slick-prev:hover, .slider-exh .slick-prev:active, .slider-exh .slick-prev:visited { background-image: url(metaverse/images/pfeil-back.svg); opacity: 1 !important; } .slider-exh .slick-next:hover, .slider-exh .slick-next:active, .slider-exh .slick-next:visited { background-image: url(metaverse/images/pfeil-front.svg); opacity: 1 !important; } .slider-exh .slick-next { right: -55px; background-color: transparent; background-image: url(metaverse/images/pfeil-front.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; opacity: 1 !important; } .slider-exh .slick-prev { left: -55px; background-color: transparent; background-image: url(metaverse/images/pfeil-back.svg); background-repeat: no-repeat; background-position: center; background-size: 16px; opacity: 1 !important; } .akk-exhibitions .header-exhibitions, .akk-exhibitionsdetails .header-exhibitionsdetails { background-color: #EFEFEF; width: 100vw; min-height: 100vh; position: absolute; top: 0; right: 0vw; display: block; box-sizing: border-box; } .footer-start .menu li { display: inline-block; font-size: 30px; line-height: 1.2; } .footer-start .menu-menu-1-container { width: 60%; margin: 0 auto; } .footer-start .menu li a { font-size: 25px; color: #fff; padding: 0 15px; } .footer-start .menu li a:hover { opacity: 0.5; } .big_text h4.grau { font-size: 28px; opacity: 0.75; font-family: 'D-DIN Regular'; padding-bottom: 1em; } p.big_text { font-size: 28px; opacity: 0.75; font-family: 'D-DIN Regular'; padding-bottom: 1em; line-height: 40px; } h2.din { font-size: 24px !important; margin-bottom: 0px; font-family: 'D-DIN DIN-Bold' !important; } .header-profile h2.din { font-size: 40px !important; margin-bottom: 0px; font-family: 'D-DIN Regular' !important; } /* ----------------------------------------------------------------------------ajax */ button.button-museum, a.button-museum { position: absolute; bottom: 32px; left: 32px; right: 32px; padding: 10px; border-radius: 5px; background-color: var(--activeColor); color: #fff; box-sizing: border-box; display: block !important; width: calc(100% - 64px); height: 56px; font-size: 19px; letter-spacing: 0.1em; padding: 18px; } #vizzard .con-mus { position: relative; height: 100%; width: 100%; box-sizing: border-box; display: block; box-sizing: border-box; padding: 300px 32px 32px 32px; } #vizzard .museumbox .flex>div { height: 632px; width: 432px; position: relative; box-sizing: border-box; } #vizzard .museum { background-color: transparent; } #vizzard .museumbox.museum { position: relative; padding: 100px 0 50px 0; margin: 0 auto; max-width: 1296px; box-sizing: border-box; } .museumbox .flex { display: flex; box-sizing: border-box; padding: 0px; display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 auto; } .museumbox .flex>div>div { margin: 16px; background-size: cover; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 15px; overflow: hidden; } .load-spinner { left: 0; right: 0; width: 32px; margin: 0 auto; position: absolute; z-index: 1000; } .header-tutorial { position: absolute; background-color: var(--teriaryColor); } body.akk-tutorial .header-tutorial { left: 00%; top: 0; height: auto; overflow: inherit; width: 100vw; } .contentbox.member { position: relative; background-color: transparent; min-height: 90vh; } .member-absolut { position: relative; padding: 100px 0; margin: 0 auto; max-width: 1296px; box-sizing: border-box; } .back button.member { padding: 10px 20px 10px 40px !important; } .memberbox { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 auto; } .memberbox ul { list-style-type: disc; } .member-absolut .member { width: 400px; height: 600px; background: rgba(255, 255, 255, 0.1); margin: 16px; padding: 32px; border-radius: 10px; box-sizing: border-box; } .member-absolut .content-text { text-align: left; padding: 40px 0 40px 0 } .member-absolut .teaserimage { position: relative; border-radius: 10px; overflow: hidden; } .member-absolut .titelbox { position: absolute; bottom: 10px; left: 10px; text-align: left; } .member-absolut .titelbox h2 { font-size: 24px; margin-bottom: 0px; } .member-absolut .button.big { font-size: 19px; position: absolute; bottom: 32px; left: 32px; width: 336px; right: 32px; } .member-absolut .conbox { padding-bottom: 48px; } .profilepicture { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background-image: url(metaverse/images/defaultProfile.svg); background-position: center; background-size: 30px; background-color: var(--secondaryColor); background-repeat: no-repeat; } /* ----------------------------------------------------------------------------vote */ .survey-results .progress .bar { background-color: #001489 !important; background-image: none !important; position: absolute; overflow: hidden; border-radius: 2px 2px 2px 2px; font-size: 11px; font-weight: bold; line-height: 13px; padding: 5px 0px 4px; width: 0; height: 100%; color: rgb(255, 255, 255); float: left; text-align: center; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.15) inset; -moz-box-sizing: border-box; -webkit-transition: width 1.6s ease 2s; transition: width 1.6s ease 2s; } .survey_answers.selected:not(.survey_rating) { -moz-box-shadow: 0px 0px 0px 0px #000000 !important; -webkit-box-shadow: 0px 0px 0px 0px #000000 !important; box-shadow: 0px 0px 0px 0px #000000 !important; } .survey_header { display: none; } .survey_element.survey_question.sq0.active_question.ms-imgpos { display: none !important; color: #fff; } .survey_table.qt0, .survey_table.qt0 { text-align: center !important; font-size: 16px; color: #001489; } .survey_table.qt0 span { text-align: center !important; font-size: 16px; } .survey_element.default_answer.survey_answers.multiple.ms-imgpos.selected { background-color: #001489 !important; color: #fff !important; box-shadow: 0 !important; } .ms-next-question.button-default { text-align: center !important; } .ms-span-text { background-color: #001489 !important; color: #fff !important; padding: 10px 20px; margin: 0 auto; text-align: center; border-radius: 5px; } /* SAM */ #profilePicUpload, #profilePicUpload2 { display: none; } .profilepicture-box>label { float: left; width: 256px; margin-top: 40px !important; background-color: #585667; color: #fff; border-radius: 5px; padding: 12px 0; text-align: center; box-sizing: border-box; font-size: 16px; cursor: pointer; } .profilepicture { width: 120px; height: 120px; margin-right: 20px; float: left; position: relative; } .profilepicture-box { padding: 1rem 0 0; } .profilepicture { float: left; } .profilepicture-box input { float: left; width: 74% !important; margin-top: 20px !important } /* ----------------------------------------------------------------------------form */ #field_1_3 label, #field_1_1 { margin-bottom: 30px; } .gform_body { text-align: center; color: #001489; } .gform_body li { margin-bottom: 20px; } .gform_wrapper textarea { border: 1px solid #001489; } .gform_body input { border-bottom: 1px solid #001489; } .gform_footer.top_label { text-align: center; } .gform_button.button { background-color: #001489; color: #fff; padding: 15px 20px; height: 56px; } .gform_wrapper li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning { background-color: rgba(0, 20, 137, .25) !important; margin-bottom: 6px!important; border-top: 1px solid #001489 !important; border-bottom: 1px solid #001489 !important; padding-bottom: 6px; padding-top: 8px; box-sizing: border-box; } .gform_wrapper ul.gform_fields li.gfield { padding-right: 20px !important; padding-left: 20px !important; } #gform_confirmation_wrapper_1 { text-align: center; color: #001489; font-family: 'HCo Verlag SSm bold'; font-size: 2em; margin-bottom: 60px; } .gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { background: transparent !important; border: none !important; font-size: 14.992px; margin-top: 8px; padding: 0 !important; color: rgb(245, 100, 100) !important; display: list-item; margin-left: 16px; } .gform_wrapper .validation_message::before { display: list-item; } .gform_wrapper .gfield_error .gfield_repeater_cell label, .gform_wrapper .gfield_error label, .gform_wrapper .gfield_error legend, .gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message, .gform_wrapper [aria-invalid=true]+label, .gform_wrapper label+[aria-invalid=true] { color: rgb(245, 100, 100) !important; } .gform_wrapper .gform_validation_errors { background: #fff9f9; border: 1.5px solid #c02b0a; border-radius: 5px; box-shadow: 0 1px 4px rgb(0 0 0 / 11%), 0 0 4px rgb(18 25 97 / 4%); margin-bottom: 8px; margin-top: 8px; padding: 16px 16px 16px 48px; position: relative; width: 100%; display: none; } /* ----------------------------------------------------------------------------count */ .countbox { border: 2px solid #001489; box-sizing: border-box; padding: 20px; font-weight: 100; color: #001489; } .section.count #termin { display: flex; flex-wrap: wrap; position: relative; width: 100%; padding: 20px 0; font-weight: 100; } .section.count #termin>div { box-sizing: border-box; font-weight: 100; position: relative; flex-basis: 25%; text-align: center; display: block; font-size: 80px; text-transform: uppercase; } .section.count #termin>div>div:nth-child(1) { font-size: 15px; font-weight: 100; } .section.count #termin>div>div:nth-child(2) { font-size: 10px; font-weight: 100; } .toggle-box { top: 38px; right: 30px; position: fixed; width: 40px; height: 40px; } .toggle-box .toggle-x { display: none; } .navi-mob { display: none; } /* ---------------------------------------------------------------------------- media */ #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(2)>g:nth-child(1) { opacity: 0; } #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(5), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(6), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(7), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(8), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(9), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(10), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(11), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(12), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(13), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(14), #gfchart-Bar_chart_67>div>div:nth-child(1)>div>svg>g:nth-child(3)>g:nth-child(4)>g:nth-child(15) { display: none; } /* ...........................................Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url('./ajax-loader.gif') center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('./fonts/slick.eot'); src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; z-index: 999; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; opacity: 1; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; opacity: 1; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 0px; } .slick-dots { position: absolute; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; height: 40px; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; padding-top: 38px; } .slick-dots li button { font-size: 10px; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 25px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; } .opa60 { opacity: 0.6; letter-spacing: 0.15em; } .header-home-image .uber { font-size: 40px; font-family: 'D-DIN Regular'; margin-bottom: 10px; line-height: 1.2em; letter-spacing: 0.3em; text-transform: uppercase; opacity: 1; } .uberex { font-size: 24px; font-family: 'D-DIN DIN-Bold'; margin-bottom: 10px; line-height: 1.2em; letter-spacing: 0.15em; text-transform: uppercase; } .uber { font-size: 18px; font-family: 'D-DIN Regular'; margin-bottom: 10px; line-height: 1.2em; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5; } .big_text h2 { font-size: 3vw; } .big_text p, .big_text p a { font-size: 28px; line-height: 1.4; } p.big-p { font-size: 28px; font-weight: normal; line-height: 1.2em; } video { width: 100vw; height: 100vh; object-fit: cover; position: absolute; top: 0; left: 0; } .upper { text-transform: uppercase; } .the_museum h2 { font-size: 46px; } .big_text p.legende { font-size: 12px !important; line-height: 1.1; } .exhibitions.home>h2 { margin-left: 157px; font-family: 'D-DIN Regular'; font-weight: normal; } .image_artist>div, .image_artist_v2>div { width: 100%; margin-left: 0; box-sizing: border-box; padding: 0 157px; position: absolute; top: 50%; transform: translateY(-50%); } .header-home .content, .header-home-image .content { position: absolute; left: 0%; padding-left: 157px; width: 30%; top: 50%; transform: translateY(-50%); } .header-exhibitions .flex, .header-exhibitionsdetails .exhibitions-more .flex { display: flex; width: 100%; margin-left: 0; padding: 0 157px; box-sizing: border-box; } .content_image_50 .content_50 { flex-basis: 50%; box-sizing: border-box; padding-left: 157px; position: relative; } .vimu-for { width: 30%; margin: 15% auto 0 auto; } .exhibitions.details.top .content_50>.centercenter { width: 100% !important; position: relative; } .content_50>.centercenter>.text { padding: 0 157px; width: 100%; box-sizing: border-box; } .blocks-home .exhibitions .flex { width: auto; padding-right: 157px; margin-right: -60px; } .bgimg { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; text-align: center; } .header-exhibitionsdetails .flex { width: 100%; margin-left: 0%; padding: 0 157px; box-sizing: border-box; display: flex; } .header-exhibitionsdetails .flexfullheight { width: 100%; margin-left: 0%; box-sizing: border-box; height: 100vh; display: flex; } .header-exhibitionsdetails .flexfullheight>div { flex-basis: 50%; } .exhibitions.details.content>div.exhibitions.full { width: 100%; max-width: inherit; margin: 0 auto; } body .exhibitions { opacity: 1; -webkit-transition: opacity .65s ease-in-out 800ms; -moz-transition: opacity .65s ease-in-out 800ms; -ms-transition: opacity .65s ease-in-out 800ms; -o-transition: opacity .65s ease-in-out 800ms; transition: opacity .65s ease-in-out 800ms; } body.animate-intro-out .exhibitions, body.animate-intro-out .exhibitions-more { opacity: 0; -webkit-transition: opacity .05s ease-in-out 1ms; -moz-transition: opacity .05s ease-in-out 1ms; -ms-transition: opacity .05s ease-in-out 1ms; -o-transition: opacity .05s ease-in-out 1ms; transition: opacity .05s ease-in-out 1ms; } .gform_body input { border-bottom: 1px solid #fff; } .gform_button.button { background-color: var(--activeColor); font-size: 16px; width: 100%; padding: 12px 16px; } .gform_body { text-align: left !important; } /* ----------------------------------------------------------------------------1400px */ @media all and (min-width: 1400px) { .image_artist_v2 h2, .image_artist h2 { font-size: 46px; } } /* ----------------------------------------------------------------------------1650px */ @media all and (max-width: 1650px) { .member .content { width: 40%; } } /* ----------------------------------------------------------------------------1300px */ @media all and (max-width: 1300px) { .image_artist_v2 .content_50 { width: 50%; position: relative; padding-right: 20px; box-sizing: border-box; padding-right: 60px; } p { margin: 0 0 0px 0; font-size: 15px; line-height: 23px; font-weight: normal; color: #fff; font-family: 'D-DIN Regular'; } .header-home .content, .header-home-image .content { /* position: absolute; // sam remove width: 50%; top: 50%; transform: translateY(-50%); */ } .image_full_content .content_40 { position: absolute; left: 5%; width: 30%; top: 50%; transform: translateY(-50%); } .member .content { width: 45%; } .image_full_content .content_40 {} .content_image_50 .content_50 { flex-basis: 50%; box-sizing: border-box; padding-left: 5%; position: relative; width: 60 } .content_image_50 .felx { display: block; } .content_50 .centercenter { width: 100%; } .centercenter { position: relative; top: 50%; transform: translateY(-50%); } element.style {} .content_image_50 .image_50 { position: relative; min-height: 50vw } .content_image_50 .image_50 img { position: absolute; bottom: 0; } .image_full_content.scroll .content_40 { position: absolute; left: 5%; width: 45%; } .image_full_content.scroll .content_40>div { padding: 50px 20px 50px 0; } .content_40::-webkit-scrollbar { width: 4px; z-index: 22000; margin-left: 40x; display: block; background-color: transparent; } .content_40::-webkit-scrollbar-track { background-color: transparent; } .content_40::-webkit-scrollbar-thumb { background: #fff; border-radius: 0px; } .content_40#::-webkit-scrollbar-thumb:hover { background: #fff; } } /* ----------------------------------------------------------------------------1200 */ @media all and (max-width: 1200px) { .header-exhibitionsdetails .flex { width: 100%; margin-left: 0%; padding: 0 46px; box-sizing: border-box; gap: 60px; } .content-shop.titlebox { height: 100vh; padding-left: 46px; } .header-shop .shop.details .left { flex-basis: 40%; width: 40%; } .header-shop .shop.details .right { flex-basis: 60%; width: 60%; padding-left: 46px; box-sizing: border-box; } .shoppage.top>.right { position: relative; left: 50%; width: 50%; box-sizing: border-box; padding-right: 46px; padding-bottom: 150px; } .content.shop.details { margin: 0 46px; } .image_artist>div, .image_artist_v2>div { padding: 0 46px; } .content_image_50 .content_50 .centercenter { width: 100%; } .blocks-home .exhibitions .flex { padding: 0 46px; } .exhibitions.home>h2 { margin-left: 46px; } .header-exhibitions .flex, .header-exhibitionsdetails .exhibitions-more .flex { padding: 0 46px; } .contentbox.about div.menu { padding-left: 46px; } .header-profile .left, .contentbox.tutorial .left, .contentbox.about .left { flex-basis: 303px !important; width: 303px !important; } .contentbox.tutorial .right, .contentbox.about .right, .header-faq .contentbox .right { padding-left: 343px; box-sizing: border-box; padding-right: 50px; max-width: 1293px; width: 100%; } } /* ----------------------------------------------------------------------------1100 */ @media all and (max-width: 1100px) { .image_60_content .content_40 .centercenter { padding-top: 50px; position: relative; top: 0; transform: translateY(-0%); } .image_full_content.scroll .content_40 { position: absolute; left: 5%; width: 45%; top: 0%; transform: translateY(-0%); height: 100%; overflow-y: scroll; margin: 0; box-sizing: border-box; } } /* ----------------------------------------------------------------------------1000 */ @media all and (max-width: 1000px) { .image_60_content .content_40 .centercenter { padding-top: 0px; } .header-exhibitions .flex, .exhibitions-more .flex { display: flex; width: auto; margin-left: 44px; margin-right: 0px; } .header-exhibitions .exhibitionsuber, .exhibitions-more .exhibitionsuber { padding-right: 44px; } .header-exhibitionsdetails .flex { width: auto; margin-left: 44px; margin-right: 44px; } .exhibitions.details.content>div { width: 40%; min-width: 500px; margin: 0 auto; } .image_artist_v2 { padding: 80px 0; height: auto; box-sizing: border-box; } .image_artist>div, .image_artist_v2>div { width: 100%; margin-left: 0; box-sizing: border-box; padding: 0 46px; position: relative; top: 0%; transform: translateY(-0%); } .image_artist>.flex, .image_artist_v2>.flex { display: block; } .image_artist_v2 .content_50 { width: 100%; position: relative; padding-right: 20px; box-sizing: border-box; padding-right: 60px; padding-bottom: 40px; } .image_artist .image_50 { width: 100%; position: relative; display: block; text-align: center; } .centercenter { position: relative; top: 0%; transform: translateY(-0%); } .image_artist_v2 .image_50 { width: 100%; position: relative; display: block; text-align: center; } .the_museum .content { position: relative; left: 0px; right: 0px; width: 100%; top: 0%; transform: translateY(-0%); display: block; width: auto; margin: 0 46px; } .image_artist>.flex { display: block; padding-bottom: 60px; } .image_artist { height: auto; min-height: 700px; } .the_museum { height: auto; padding: 60px 0 } .intro.mobile .wrapper-intro { position: absolute; top: 0px; left: 0px; z-index: 1000; height: 100vh; width: 100vw; box-sizing: border-box; padding: 0 46px; } .intro.mobile .header-home-image .content { position: relative; margin-left: 0%; left: 0; width: 60%; top: 50%; transform: translateY(-50%); padding-left: 0; } .content_image_50 .image_50 { position: relative; min-height: auto; } .content_image_50 .content_50 { flex-basis: 100%; box-sizing: border-box; padding-top: 60px; padding-right: 30%; position: relative; width: 100%; margin-bottom: -0%; background-color: #1E1E1E; } .image_artist .content_50 { width: 100%; position: relative; padding-right: 20px; box-sizing: border-box; padding-top: 60px; } .content_image_50 .image_50 img { position: relative; bottom: 0; } .content_image_50 .flex { display: block; } .content_image_50 .flex img { display: block; width: 50%; padding-left: 50%; } .image_60 { flex-basis: 60%; display: none; } .image_60_content .flex { display: block; } .image_60_content .content_40 { flex-basis: 40%; box-sizing: border-box; position: relative; right: 0; width: 100%; top: 0; height: 100%; overflow-y: scroll; scroll-padding-bottom: 0; padding: 60px 0; } .image_60_content .content_40 .centercenter { padding-right: 46px; padding-left: 60px; max-width: 100%; } .wrapper-intro { position: fixed; top: 0px; left: 0px; z-index: 1000; height: 100vh; width: 100vw; box-sizing: border-box; padding: 0 46px; } header-home-image .content { position: absolute; width: 50%; top: 50%; transform: translateY(-50%); } } /* ----------------------------------------------------------------------------800 */ @media all and (max-width: 800px) { .header-exhibitions .flex, .exhibitions-more .flex { display: block; width: auto; max-width: 500px; margin-left: auto; margin-right: auto; } .header-exhibitions .exhibitionsuber, .exhibitions-more .exhibitionsuber { padding-right: 0px; } .blocks-home .exhibitions .flex { display: block; } } /* ----------------------------------------------------------------------------650 */ @media all and (max-width: 750px) { .image_artist>div { width: 90%; margin-left: 5%; padding: 50px 0; display: block; } .image_artist .content_50 { width: 100%; padding-bottom: 30px; } .image_artist .image_50 { width: 100%; } .image_full_content .content_40 { margin: 50px 0 -00px 0%; } element.style {} .image_memberobjekt { width: 150px; margin-left: 2%; padding-top: 50px; z-index: 5; display: none; } .member .content { width: 100%; box-sizing: border-box; } .member .content { position: relative; left: 0%; top: 0%; transform: translateY(-0%); z-index: 4; padding: 60px 46px 100px 46px; } .member .content img { position: absolute; right: 20px; width: 140px; bottom: 30px; } } /* ----------------------------------------------------------------------------1100 */ @media all and (max-width: 1380px) { .meeting, #vizzard .museumbox.museum, .member-absolut { position: relative; padding: 100px 0; margin: 0 auto; max-width: 864px; box-sizing: border-box; } } /* ----------------------------------------------------------------------------1100 */ @media all and (max-width: 1004px) { .meeting, #vizzard .museumbox.museum, .member-absolut { position: relative; padding: 100px 0; margin: 0 auto; max-width: 432px; box-sizing: border-box; } } /* --------------------------------------------------------------------------height--870px */ @media all and (max-height: 870px) { .header-menu .centercenter { width: 100%; position: relative; top: 0%; transform: translateY(-0%); padding-top: 93px; } .header-menu { padding-bottom: 120px; } } .ckeckbox-container a {} .ckeckbox-container label { padding-top: 6px; color: #fff; }