/* Theme Name: lissypony Theme URI: https://www.pixelcloud.de/ Template: twentytwentyone Author: Pixelcloud - JVoigt Author URI: https://www.pixelcloud.de/ Description: lissypony is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog. Tags: one-column,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready Version: 2.1.1707688786 Updated: 2024-02-11 22:59:46 */ /*fonts*/ /* merriweather-sans-300 - latin */ @font-face { font-display: swap; font-family: 'Merriweather Sans 300'; font-style: normal; font-weight: 300; src: url('fonts/merriweather-sans-v26-latin/merriweather-sans-v26-latin-300.woff2') format('woff2'); } /* merriweather-sans-regular - latin */ @font-face { font-display: swap; font-family: 'Merriweather Sans 400'; font-style: normal; font-weight: 400; src: url('fonts/merriweather-sans-v26-latin/merriweather-sans-v26-latin-regular.woff2') format('woff2'); } /* merriweather-sans-600 - latin */ @font-face { font-display: swap; font-family: 'Merriweather Sans 600'; font-style: normal; font-weight: 600; src: url('fonts/merriweather-sans-v26-latin/merriweather-sans-v26-latin-600.woff2') format('woff2'); } /* merriweather-sans-700 - latin */ @font-face { font-display: swap; font-family: 'Merriweather Sans 700'; font-style: normal; font-weight: 700; src: url('fonts/merriweather-sans-v26-latin/merriweather-sans-v26-latin-700.woff2') format('woff2'); } /* playpen-sans-regular - latin */ @font-face { font-display: swap; font-family: 'Playpen Sans 400'; font-style: normal; font-weight: 400; src: url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-regular.woff2') format('woff2'), url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-regular.ttf') format('truetype'); } /* playpen-sans-500 - latin */ @font-face { font-display: swap; font-family: 'Playpen Sans 500'; font-style: normal; font-weight: 500; src: url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-500.woff2') format('woff2'), url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-500.ttf') format('truetype'); } /* playpen-sans-600 - latin */ @font-face { font-display: swap; font-family: 'Playpen Sans 600'; font-style: normal; font-weight: 600; src: url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-600.woff2') format('woff2'), url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-600.ttf') format('truetype'); } /* playpen-sans-700 - latin */ @font-face { font-display: swap; font-family: 'Playpen Sans 700'; font-style: normal; font-weight: 700; src: url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-700.woff2') format('woff2'), url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-700.ttf') format('truetype'); } /* playpen-sans-800 - latin */ @font-face { font-display: swap; font-family: 'Playpen Sans 800'; font-style: normal; font-weight: 800; src: url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-800.woff2') format('woff2'), url('fonts/playpen-sans-v13-latin/playpen-sans-v13-latin-800.ttf') format('truetype'); } /* opensans-regular - latin */ @font-face { font-display: swap; font-family: 'Open Sans 400'; font-style: normal; font-weight: normal; src: url('fonts/opensans/opensans-regular-webfont.woff2') format('woff2'); } /* opensans-700 - latin */ @font-face { font-display: swap; font-family: 'Open Sans 700'; font-style: normal; font-weight: normal; src: url('fonts/opensans/opensans-bold-webfont.woff2') format('woff2'); } body { --global--font-size-base: 20px; --global--font-size-smaller: 0.875rem; --global--font-size-small: 0.75rem; --global--line-height-body: 1.3; --global--color-primary: #000; --global--color-secondary: #fff; --global--color-tertiary: #D8006B; --global--color-quartiary: #792182; --global--color-background: #fff; --global--secondary-color-background: #D8006B; --global--font-family-base: 'Merriweather Sans 300', sans-serif; --global--font-family-base-bold: 'Merriweather Sans 700', sans-serif; --global--font-family-regular: 'Playpen Sans 400', sans-serif; --global--font-family-semibold: 'Playpen Sans 600', sans-serif; --global--font-family-bold: 'Playpen Sans 700', sans-serif; --heading--font-size-h1: 2.0rem; --heading--font-size-h1-smaller: 1.75rem; --heading--letter-spacing-h1: normal; --heading--line-height-h1: 1.2; --heading--margin-bottom-h1: 1em; --heading--font-size-h2: 2.2rem; --heading--font-size-h2-smaller: 1.75rem; --heading--letter-spacing-h2: normal; --heading--line-height-h2: 1.2; } html { margin-top: 16px !important; } body, * { font-family: var(--global--font-family-base); line-height: var(--global--line-height-body); /*font-style: normal; font-weight: 300;*/ font-size: var(--global--font-size-smaller); font-weight: normal; color: var(--global--color-primary); text-align: left; } p, p b, p strong { font-family: var(--global--font-family-base); color: var(--global--color-primary); font-size: var(--global--font-size-smaller); line-height: var(--global--line-height-body); letter-spacing: normal; } h1, .h1 { font-family: var(--global--font-family-base-bold); color: var(--global--color-primary); font-size: var(--heading--font-size-h1); letter-spacing: var(--heading--letter-spacing-h1); line-height: var(--heading--line-height-h1); margin-bottom: var(--heading--margin-bottom-h1); } h2, .h2 { font-family: var(--global--font-family-base-bold); color: var(--global--color-tertiary); font-size: var(--heading--font-size-h2-smaller); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); } p, h2, .h2 { margin-bottom: 0.5em; } b, strong { font-weight: 700; } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes "beat" { to { -webkit-transform: scale(0.96); -moz-transform: scale(0.96); -o-transform: scale(0.96); -ms-transform: scale(0.96); transform: scale(0.96); } } @-moz-keyframes beat { to { -moz-transform: scale(0.96); transform: scale(0.96); } } @-webkit-keyframes "beat" { to { -webkit-transform: scale(0.96); transform: scale(0.96); } } @-ms-keyframes "beat" { to { -ms-transform: scale(0.96); transform: scale(0.96); } } @-o-keyframes "beat" { to { -o-transform: scale(0.96); transform: scale(0.96); } } @keyframes "beat2" { to { -webkit-transform: scale(0.94); -moz-transform: scale(0.94); -o-transform: scale(0.94); -ms-transform: scale(0.94); transform: scale(0.94); } } @-moz-keyframes beat2 { to { -moz-transform: scale(0.94); transform: scale(0.94); } } @-webkit-keyframes "beat2" { to { -webkit-transform: scale(0.94); transform: scale(0.94); } } @-ms-keyframes "beat2" { to { -ms-transform: scale(0.94); transform: scale(0.94); } } @-o-keyframes "beat2" { to { -o-transform: scale(0.94); transform: scale(0.94); } } /* Custom Scrollbar for Firefox */ .scroller { scrollbar-width: thin; scrollbar-color: var(--global--color-quartiary) #ddd; } /* Custom Scrollbar for Chrome, Edge, and Safari */ .scroller::-webkit-scrollbar { width: 6px; } .scroller::-webkit-scrollbar-track { background: #ddd; } .scroller::-webkit-scrollbar-thumb { background-color: var(--global--color-quartiary); border-radius: 3px; border: 1px solid #ddd; } .swiper-slide button { padding: 0; background: transparent!important; border-width: 0 } button.lp-btn, button.lp-btn span { background: transparent!important; font-family: var(--global--font-family-semibold); font-weight: 600; font-size: var(--global--font-size-smaller); color: var(--global--color-secondary); border-width: 1px; border-radius: 25px; padding: 4px; text-align: center; outline: none; } button.lp-btn:hover, button.lp-btn span:hover { border-color: transparent; } .btns-row { -ms-flex-wrap: wrap; flex-wrap: wrap; } .btns-row, .btns-row .join-btn-area button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .btns-row .join-btn-area { padding: 4px 1em 20px; } .btns-row .join-btn-area button { flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 70px; height: 70px; text-align: center; } .btns-row .join-btn-area button > span { font-family: var(--global--font-family-extrabold); font-size: var(--global--font-size-small); color: var(--global--color-tertiary); text-transform: uppercase; } video { display: block; width: 100%; height: auto; } body { background-color: var(--global--color-background); } .site-main > #lp-content, .site-main .page > .entry-content { margin-top: 0; margin-bottom: 0; } .site-header { width: 100%; max-width: 100%; padding: 0px 3px 12px 16px; background-color: var(--global--secondary-color-background); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; row-gap: 0; } .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { padding-top: 3px; } .site-header .site-logo img, .site-header .site-logo a { width: 95px; height: 76px; outline: none; } .site-branding { max-width: 152px; } .site-branding .custom-logo-link { outline: none; } .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo img { max-height: none; } .site-header .header-slider { display: none; } #masthead.site-header { position: fixed; top: 0; left: 0; z-index: 99999; } .menu-button-container #primary-mobile-menu { display: none; } #primary-menu-list { padding-top: 7px; } .primary-navigation > .primary-menu-container { height: auto; z-index: 499; overflow-x: hidden; overflow-y: auto; border: none; } .primary-navigation { position: relative; top: 0; right: 18px; } .primary-navigation .primary-menu-container { margin-right: calc(0px - var(--primary-nav--padding)); margin-left: calc(0px - var(--primary-nav--padding)); } .primary-navigation > .primary-menu-container { visibility: visible; opacity: 1; position: relative; padding: 0; background-color: transparent; overflow: initial; transform: none; } .primary-navigation > div > .menu-wrapper { padding-bottom: 0; flex-wrap: nowrap; } #site-navigation #primary-menu-list .pll-parent-menu-item a:after { border-bottom: 0 solid transparent; } .primary-navigation > div > .menu-wrapper > li > .sub-menu { padding-top: 0; border-color: transparent; } .primary-navigation > div > .menu-wrapper > li > .sub-menu { margin: 0; min-width: max-content; position: absolute; top: 112%; left: -15px; left: -12px; padding-top: 3px; z-index: 88888; } .primary-navigation > div > .menu-wrapper > li > .sub-menu { transition: all 0.5s ease; } .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul { display: none; } .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { right: -8px; left: auto; } .primary-navigation > div > .menu-wrapper #menu-item-1268, .primary-navigation > div > .menu-wrapper #menu-item-1269, .primary-navigation > div > .menu-wrapper #menu-item-1274, .primary-navigation > div > .menu-wrapper #menu-item-1277, .primary-navigation > div > .menu-wrapper #menu-item-1275, .primary-navigation > div > .menu-wrapper #menu-item-2900 { background-image: url(images/global/LP_Icon_App_or.svg); background-size: contain; background-position: center top; background-repeat: no-repeat; } .primary-navigation > div > .menu-wrapper #menu-item-1271, .primary-navigation > div > .menu-wrapper #menu-item-1272, .primary-navigation > div > .menu-wrapper #menu-item-1273, .primary-navigation > div > .menu-wrapper #menu-item-1278, .primary-navigation > div > .menu-wrapper #menu-item-1276, .primary-navigation > div > .menu-wrapper #menu-item-2901 { background-image: url(images/global/LP_Icon_News_tu.svg); background-size: contain; background-position: center top; background-repeat: no-repeat; } .primary-navigation > div > .menu-wrapper #menu-item-1268, .primary-navigation > div > .menu-wrapper #menu-item-1271 { -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .primary-navigation > div > .menu-wrapper #menu-item-1268:hover, .primary-navigation > div > .menu-wrapper #menu-item-1271:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .primary-navigation > div > .menu-wrapper li:first-child a, .primary-navigation > div > .menu-wrapper li:nth-child(2) a, .primary-navigation > div > .menu-wrapper > li:last-child a > span { font-size: 16px; } .primary-navigation > div > .menu-wrapper li:first-child a { font-size: 16px; padding: 47px 8px 0; } .primary-navigation > div > .menu-wrapper li:nth-child(2) a { font-size: 16px; padding: 47px 0px 0 } .primary-navigation > div > .menu-wrapper > li:last-child { margin-left: 16px; } .primary-navigation > div > .menu-wrapper > li:nth-child(2) { margin-left: 20px; } .primary-navigation > div > .menu-wrapper > li:last-child > a { text-align: center; } .primary-navigation > div > .menu-wrapper > li:last-child > a > img { display: block; width: 25px!important; height: 19px!important; margin-bottom: 14px; margin-top: 0; } .primary-navigation > div > .menu-wrapper > li:last-child a > span { display: block; margin-left: 0!important; text-align: center; background-color: var(--global--secondary-color-background); } .primary-navigation > div > .menu-wrapper .sub-menu > li a > span { background-color: transparent; } .primary-navigation > div > .menu-wrapper > li:last-child .sub-menu-toggle { display: none; } .primary-navigation .primary-menu-container > ul > .menu-item > a, .primary-navigation .primary-menu-container > ul > .menu-item > a span, .primary-navigation > div > .menu-wrapper > li > .sub-menu li a span { color: var(--global--color-secondary); font-family: var(--global--font-family-semibold); font-weight: 600; } .primary-navigation > div > .menu-wrapper > li > .sub-menu > li > a > span { display: inline-block; margin-left: 0.6em !important; } .primary-navigation > div > .menu-wrapper > li > .sub-menu > li > a > img { width: 18px!important; height: 16px!important; } .primary-navigation .primary-menu-container .sub-menu-toggle .svg-icon path { fill: var(--global--color-secondary); /*stroke-width: 1.5; */ } .primary-navigation > div > .menu-wrapper > li > .sub-menu { padding-top: 0; border-color: transparent; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li { background: #ff6eb2; border-left: 2px solid #fff; border-right: 2px solid #fff; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li:first-child { border-top: 2px solid #fff; border-top-left-radius: 6px; border-top-right-radius: 6px; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li:last-child { border-bottom: 2px solid #fff; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li a { padding: 0.5em; } .primary-navigation .current-menu-item > a:first-child, .primary-navigation .current-menu-item > a:first-child:hover, .primary-navigation .menu-item > a, .primary-navigation .menu-item > a:hover { text-decoration: none; } #primary-menu-list a { position: relative; } #primary-menu-list a:after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0; border-bottom: 2px solid #fff; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #primary-menu-list a:hover:after { width: 100%; } #primary-menu-list .sub-menu a:hover:after, #primary-menu-list li.pll-parent-menu-item > a:hover:after { width: 0; } #content.site-content { padding-top: 123px; } #main { padding-top: 0; padding-bottom: 0; } .section { position: relative; width: 100%; max-width: 100% !important; margin-bottom: 30px; margin-top: 0; } .section .section-entry-header, .section .section-textarea { padding-top: 30px; } .swiper-button-prev:after, .swiper-button-next:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .swiper-button-prev:hover:after, .swiper-button-next:hover:after { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* #content > .swiper-header-mobile */ .header-slider-mobile { position: fixed; top: 87px; left: 0; width: 100%; padding: 8px 16px 10px; border-bottom: 1px solid #999; background-color: #fff; z-index: 88889; } .header-slider-mobile .swiper-button-prev:after, .header-slider-mobile .swiper-rtl .swiper-button-next:after, .header-slider-mobile .swiper-button-next:after, .header-slider-mobile .swiper-rtl .swiper-button-prev:after { color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; } .header-slider-mobile .swiper-button-prev, .header-slider-mobile .swiper-rtl .swiper-button-next { left: 16px; } .header-slider-mobile .swiper-button-next, .header-slider-mobile .swiper-rtl .swiper-button-prev { right: 16px; } .header-slider-mobile .swiper-button-prev:after, .header-slider-mobile .swiper-button-next:after { width: 30px; height: 30px; color: transparent; } .header-slider-mobile .swiper-button-prev:after { background-image: url(images/global/LP_Icon_Arrow_Left_Red.svg); } .header-slider-mobile .swiper-button-next:after { background-image: url(images/global/LP_Icon_Arrow_Right_Red.svg); } .header-slider-mobile .swiper-header-mobile .swiper-slide { top: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 4px; } .header-slider-mobile .swiper-header-mobile .swiper-slide .img-link { width: 104px; padding-top: 0px; } .header-slider-mobile .swiper-header-mobile .swiper-slide:not(.current) .img-link { -webkit-animation: beat2 1s infinite alternate; -moz-animation: beat2 1s infinite alternate; -ms-animation: beat2 1s infinite alternate; -o-animation: beat2 1s infinite alternate; animation: beat2 1s infinite alternate; -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { max-width: var(--responsive--alignwide-width); } .entry-header h1.entry-title { padding-top: 0.25em; } #introvideo { display: none; } #section-1-overlay-bubble #bubble-close-btn, #section-4 .section-4-bubble-close-btn, .post-archive-overlay .post-archive-overlay-close-btn, .section6-overlay #section6-overlay-close-btn, .section7-overlay #section7-overlay-close-btn { position: absolute; width: 36px; height: 36px; border-width: 0; padding: 0; background-color: transparent; background-image: url(images/global/LP_Icon_Close_Purple.svg); background: url(images/global/LP_Icon_Close_Purple.svg) !important; background-size: 100% 100% !important; background-position: center!important; background-repeat: no-repeat !important; outline: none; z-index: 10; } #section-1 .open-section-1-overlay-bubble, #section-4 .section-4-open-slider-bubble { position: absolute; width: 68px; height: 68px; padding: 10px; border-width: 0px; opacity: 1; -webkit-transform: scale(100%), rotate(0deg); -ms-transform: scale(100%), rotate(0deg); transform: scale(100%), rotate(0deg); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: none; } .overlay-bubble { position: absolute; top: 34%; left: 50%; translate: -50% -50%; background-size: contain; background-position: center; background-repeat: no-repeat; } #section-1-overlay-bubble { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 351px; height: 159px; overflow: hidden; background-image: url(images/global/LP_Intro_Speechbubble.svg); } #section-1-overlay-bubble #bubble-close-btn { top: -1%; right: 0%; } .ponys.unicorns #section-1-overlay-bubble { top: 19%; background-image: url(images/global/LP_Intro_Speechbubble_flip.svg); } .ponys.sparkle #section-1-overlay-bubble { background-image: url(images/global/LP_Intro_Speechbubble.svg); } #section-1-overlay-bubble.hide-bg, .unicorns #section-1-overlay-bubble.hide-bg, .ponys.sparkle #section-1-overlay-bubble.hide-bg { background: transparent; } .unicorns #section-1-overlay-bubble #bubble-close-btn { top: 0; right: 0; } #section-1-overlay-bubble .swiper-wrapper .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #section-1-overlay-bubble .bubble-swiper-1 .swiper-slide p, #section-1-overlay-bubble .bubble-swiper-1 .swiper-slide p strong { font-size: calc(13px + (15 - 13) * ((100vw - 320px) / (980 - 320))); margin-bottom: 0; } #section-1-overlay-bubble .bubble-swiper-1 .swiper-slide p { font-family: var(--global--font-family-regular); color: var(--global--color-quartiary); } #section-1-overlay-bubble .bubble-swiper-1 .swiper-slide p strong { font-family: var(--global--font-family-semibold); font-weight: 600; } #section-1-overlay-bubble .bubble-swiper-1 { width: 80%; height: 76%; margin: -4% auto 0; padding: 0% 9%; overflow: hidden; z-index: 6; } .bubble-swiper-1 .swiper-button-prev:after, .bubble-swiper-1 .swiper-rtl .swiper-button-next:after, .bubble-swiper-1 .swiper-button-next:after, .bubble-swiper-1 .swiper-rtl .swiper-button-prev:after { width: 26px; height: 26px; color: transparent; color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; } .bubble-swiper-1 .swiper-button-prev:after { background-image: url(images/global/LP_Icon_Arrow_Left_Purple.svg); } .bubble-swiper-1 .swiper-button-next:after { background-image: url(images/global/LP_Icon_Arrow_Right_Purple.svg); } .bubble-swiper-1 .swiper-button-prev, .bubble-swiper-1 .swiper-rtl .swiper-button-next { left: 4%; top: 49%; } .bubble-swiper-1 .swiper-button-next, .bubble-swiper-1 .swiper-rtl .swiper-button-prev { right: 3%; top: 49%; } #section-1 .open-section-1-overlay-bubble { top: -3%; right: -2%; } #section-1 .scroll-down-btn { position: absolute; left: 49%; bottom: 1%; width: 40px; height: 40px; z-index: 6; } #quicklinks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 16px 4px; background-color: var(--global--secondary-color-background); } #quicklinks { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 10; } #quicklinks .quicklinks-btn-area { text-align: center; } #quicklinks .lp-btn img { width: 40px; height: 40px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} #quicklinks .lp-btn:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #quicklinks button.lp-btn, #quicklinks button.lp-btn span { font-family: var(--global--font-family-semibold); font-weight: 600; font-size: 12px; } #quicklinks button.lp-btn span { display: inline-block; padding-top: 0.5em; text-transform: uppercase; } #quicklinks button#mitmachen-btn { position: relative; } #quicklinks button#mitmachen-btn::after { content: ""; position: absolute; width: 140%; height: 140%; top: -20%; left: -53%; z-index: -1; background-image: url(images/global/sparkle-gif_256x256-2.gif); background-size: contain; background-position: center; background-repeat: no-repeat; } .section-textarea, .section-entry-header { max-width: 920px; margin: 0 auto; padding: 0 16px 20px; } .section-textarea .section-textarea-headline, .section-entry-header .section-header { font-family: var(--global--font-family-bold); font-weight: 700; text-align: center; } #section-2 { background-size: 100% 100%; background-position: center 70px; background-repeat: no-repeat; } .ponys #section-2 { background-image: url(images/global/LP_Ponys_BG_Heart.png); } .unicorns #section-2 { background-image: url(images/unicorns/unicorns/LPD2_unicorns_BG.png); } .pegasus #section-2 { background-image: url(images/pegasus/pegasus/LPD3_pegasus_BG.png.png); } .section-2-content { padding: 0px 16px; } .section-2-content #dreams-swiper-1 .swiper-wrapper { left: 1.5%; } #section-2 .slider-text { width: 100%; max-width: 500px; margin: 0 auto 0; font-family: var(--global--font-family-regular); } #section-2 .slider-text strong { font-family: var(--global--font-family-base-bold); font-size: var(--global--font-size-base); } #section-2 .section-2-content .section-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; max-width: 400px; margin: 86px auto 30px; } #section-2 .section-2-content .section-buttons button { position: relative; width: 70px; height: 70px; } #section-2 .section-buttons .lp-btn img { -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} #section-2 .section-buttons .lp-btn:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #section-2 .section-2-content .section-buttons .sparkles { position: absolute; top: -25px; left: -25px; width: 120px; height: 120px; background-image: url(images/global/LP_Button_Effect_Sparkles.png); background-position: center; background-repeat: no-repeat; background-size: contain; display: none; } #section-2 .section-2-content .section-buttons .lp-btn:hover .sparkles { display: block; background-image: url(images/global/sparkle-gif_256x256-2.gif) } #section-2 .section-2-content .section-buttons button.active .sparkles { display: block; background-image: url(images/global/LP_Button_Effect_Sparkles.png); } .section-2-slider-area { width: 100%; max-width: 700px; margin: 0 auto; } .section-slider { position: relative; width: 100%; max-width: 100%; overflow: hidden; } .section .section-slider .swiper-button-prev:after, .section .section-slider .swiper-rtl .swiper-button-next:after, .section .section-slider .swiper-button-next:after, .section .section-slider .swiper-rtl .swiper-button-prev:after { color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; } #section-2 .swiper { width: 100%; padding-top: 20px; padding-bottom: 46px; margin-left: 0; margin-left: -1%; } #section-2 .swiper-slide { background-position: center; background-size: cover; width: 126px; height: 126px; } .section-2-slider-area .profile-info { position: absolute; top: 0; right: 4%; width: 46px; height: 46px; padding: 10px; border-width: 0px; opacity: 0; -webkit-transform: scale(0), rotate(0deg); -ms-transform: scale(0), rotate(0deg); transform: scale(0), rotate(0deg); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active .profile-info { opacity: 1; -webkit-transform: scale(100%); -ms-transform: scale(100%); transform: scale(100%); } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active .btn-stars { position: absolute; top: 6%; right: 1%; width: 50px; height: 50px; padding: 10px; background: url(images/profiles/LP_Button_Effect_Hearts.png); background-size: contain; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active:hover .btn-stars { opacity: 1; -webkit-transform: scale(100%); -ms-transform: scale(100%); transform: scale(100%); } #section-2 .swiper-slide img { width: 75%; opacity: 0.01; -webkit-transition: width 0.5s ease-in-out, opacity 0.05s ease-in-out; -o-transition: width 0.5s ease-in-out, opacity 0.05s ease-in-out; transition: width 0.5s ease-in-out, opacity 0.05s ease-in-out; } #section-2 .swiper-slide .slidetext { text-align: center; font-size: var(--global--font-size-base); font-family: var(--global--font-family-semibold); font-weight: 600; color: var(--global--color-tertiary); opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #section-2 .swiper-slide.swiper-slide-visible.swiper-slide-prev img, #section-2 .swiper-slide.swiper-slide-visible.swiper-slide-next img, #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active img { opacity: 1; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active { padding-top: 5%; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active img { position: relative; left: -14%; width: 100%; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active .profile-info img { position: relative; left: 0%; width: 100%; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active .slidetext { position: relative; left: 4%; opacity: 1; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active.swiper-slide:first-child .slidetext { left: -4%; } #section-2 .swiper-button-prev, #section-2 .swiper-rtl .swiper-button-next { left: 14%; top: auto; bottom: 4%; } #section-2 .swiper-button-next, #section-2 .swiper-rtl .swiper-button-prev { right: 14%; top: auto; bottom: 4%; } #section-2 .swiper-button-prev:after { width: 24px; color: transparent; background-image: url(images/global/LP_Icon_Arrow_Left_Red.svg); } #section-2 .swiper-button-next:after { width: 24px; color: transparent; background-image: url(images/global/LP_Icon_Arrow_Right_Red.svg); } #profile-overlay { position: fixed; top: 50%; left: 50%; translate: -50% -50%; width: 90%; max-width: 450px; height: auto; -webkit-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.25); box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.25); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: 10; display: none; } #profile-overlay.active { -webkit-transform: scale(100%); -ms-transform: scale(100%); transform: scale(100%); } #profile-overlay img { display: block; width: 100%; height: auto; } #profile-overlay, #profile-overlay img { border-radius: 34px; } #profile-overlay-close-btn { position: absolute; top: -4%; right: -5%; width: 12%; height: 12%; padding: 0; border-width: 0; background-color: transparent; background-image: url(images/global/LP_Icon_Close_Purple.svg); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; outline: none; z-index: 5; } #section-3 .show-area { position: relative; } #section-3 #traumbetten-swiper { position: absolute; bottom: 0; right: 0; width: 100%; height: auto; } #section-3 .show-area img { width: 100%; height: auto; } #section-3 #show-bg-img img { height: 90vh; } #section-3 .show-bg-landscape { display: none;} #section-3 .swiper-slide { height: 80vh; } #section-3 .swiper-slide img, #section-3 .traumbetten-slide-text { position: absolute; left: 50%; translate: -50% 0; display: block; height: auto; text-align: center; } #section-3 .swiper-slide img { bottom: 38%; width: 38vh; } #section-3 .traumbetten-slide-text { bottom: 3.5vh; width: 92%; font-size: 22px; font-family: var(--global--font-family-bold); font-weight: 700; color: var(--global--color-tertiary); } #section-3 .traumbetten-text-bubble { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0vh; left: 50%; translate: -50% 0; width: 37vh; height: 16vh; padding: 7vh 4vh 12vh 5vh; font-size: 16px; /* background-color: #ff0; */ background-image: url(images/gadgets/LPD1_Traumbetten_Bubble_mob.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } #section-3 .traumbetten-text-bubble p { font-size: 14px; line-height: 1.2; font-family: var(--global--font-family-regular); color: var(--global--color-quartiary); } #section-3 .swiper-button-prev, #section-3 .swiper-rtl .swiper-button-next { left: 10%; top: auto; right: auto; bottom: 3%; } #section-3 .swiper-button-next, .sw#section-3 iper-rtl .swiper-button-prev { left: auto; top: auto; right: 10%; bottom: 3%; } #section-3 .swiper-button-prev:after { background-image: url(images/global/LP_Icon_Arrow_Left_Red.svg); } #section-3 .swiper-button-next:after { background-image: url(images/global/LP_Icon_Arrow_Right_Red.svg); } #section-3 .swiper-button-prev:after, #section-3 .swiper-button-next:after { width: 30px; height: 30px; color: transparent; } #section-3 .fader-buttons { display: none; } #section-4 .swiper-slide img { width: 100%; height: auto; } #section-4 .swiper-slide .internat-img-mob { display: block; background-size: cover; background-repeat: no-repeat; background-position: center top; } #section-4 .swiper-slide .internat-img { display: none; } #section-4 #internat-swiper .swiper-overlay-mobile, #section-4 #internat-swiper .swiper-overlay { position: absolute; top: 0%; right: 0%; width: 100%; z-index: 6; } #section-4 #internat-swiper .swiper-overlay-mobile img, #section-4 #internat-swiper .swiper-overlay img { width: 100%; } #section-4 #internat-swiper .swiper-overlay { display: none;} #section-4 .slider-text-bubble { position: absolute; top: 44%; left: 50%; translate: -50% 0;/* width: 44vh;*/ width: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-image: url(images/umgebung/LPD1_Texthintergrund.png); background-size: contain; background-position: center; background-repeat: no-repeat; height: 340px; background-size: 300px 310px; } #section-4 .slider-text-bubble .slider-text-bubble-inner { padding: 4% 13% 9% 13%; } #section-4 .slider-text-bubble .slider-bubble-headline { margin-bottom: 0.5em; line-height: 1.2; font-family: var(--global--font-family-semibold); font-weight: 600; color: var(--global--color-tertiary); font-size: 16px; } #section-4 .slider-text-bubble p, #section-4 .slider-text-bubble p strong { margin-bottom: 0; line-height: 1.2; font-family: var(--global--font-family-regular); color: var(--global--color-quartiary); font-size: 14px; } #section-4 .slider-text-bubble p strong { font-family: var(--global--font-family-bold); font-weight: 700; } #section-4 .swiper-button-prev:after, #section-4 .swiper-button-next:after { width: 30px; height: 30px; } #section-4 .swiper-button-prev, .bubble-swiper-1 .swiper-rtl .swiper-button-next { left: 3.5%; top: 45%; } #section-4 .swiper-button-next, .bubble-swiper-1 .swiper-rtl .swiper-button-prev { right: 3.5%; top: 45%; } #section-4 .swiper-button-prev:after { width: 24px; color: transparent; background-image: url(images/global/LP_Icon_Arrow_Left_Red.svg); } #section-4 .swiper-button-next:after { width: 24px; color: transparent; background-image: url(images/global/LP_Icon_Arrow_Right_Red.svg); } #section-4 .slider-text-bubble.hide-bg { background: transparent; } #section-4 .section-4-bubble-close-btn { top: 11%; right: -1%; } #section-4 .section-4-open-slider-bubble { top: 5%; right: -6%; width: 48px; height: 48px; } #section-3 .section-textarea, #section-4 .section-textarea { padding-bottom: 16px!important; } #section-5 .section-entry-header { padding-bottom: 20px; } #section-5 .btns-row { position: relative; z-index: 4; } #section-5 .join-btns-img-holder { position: relative; top: -20px; } #section-5 .btns-row .lp-btn img { -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} #section-5 .btns-row .lp-btn:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #section-6 { margin-bottom: -20px; } #section-6 #section-6-swiper { max-width: 1020px; } #section-6 #section-6-swiper .swiper-slide-inner { padding-left: 0; padding-right: 0; } #section-6 .swiper-button-prev, #section-6 .swiper-button-next { top: 34%; } #section-6 .swiper-button-prev:after, #section-6 .swiper-button-next:after { width: 30px; height: 30px; color: transparent; } #section-6 .swiper-button-prev:after { background-image: url(images/global/LP_Icon_Arrow_Left_Red.svg); } #section-6 .swiper-button-next:after { background-image: url(images/global/LP_Icon_Arrow_Right_Red.svg); } #section-6 #section-6-swiper .section-6-bubble { position: relative; top: -40px; left: 50%; width: 267px; height: 139px; translate: -50% 0; padding: 26px 36px 29px 36px; line-height: 1.1; font-family: var(--global--font-family-regular); color: var(--global--color-quartiary); background-image: url(images/lehrende/lehrende-bubble.svg); background-size: contain; background-position: center; background-repeat: no-repeat; /*background-color: #ff0;*/ } #section-6 #section-6-swiper .section-6-bubble-headline { margin-bottom: 0.25em; font-size: 16px; font-family: var(--global--font-family-semibold); font-weight: 600; color: var(--global--color-tertiary); } #section-6 #section-6-swiper .section-6-bubble-text { font-size: 14px; color: var(--global--color-quartiary); } #section-6 .section-6-open-overlay { position: absolute; top: 2%; right: -5%; width: 46px; height: 46px; padding: 10px; border-width: 0px; } #section-6 .section-6-open-overlay:hover { animation-name: spin; animation-duration: 500ms; animation-iteration-count: 1; animation-timing-function: linear; } #news { position: relative; top: -120px; } #section-7 { margin-bottom: 0!important; overflow: hidden; } #section-7 .section-entry-header { padding: 30px 16px 0; } #section-7 .section-7-content { position: relative; } #section-7 .section-7-content-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 2%; } #section-7 .section-7-content-wrap-left, #section-7 .section-7-content-wrap-right, #section-7 .section-7-content-wrap-left .section-7-open-overlay-holder { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #section-7 .section-7-content-wrap-left .section-7-open-overlay-holder { position: absolute; top: -7%; right: 0; } #section-7 .section-7-content-wrap-left { width: 100%; } #section-7 #section-7-swiper { width: 400px; padding: 90px 50px 30px; } #section-7 #section-7-swiper .swiper-slide { background: #fff; -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.24); -moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.24); box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.24); border-radius: 8px; } #section-7 #section-7-swiper .swiper-slide-inner { padding: 20px 35px; } #section-7 #section-7-swiper .featured-img-holder, #section-7 #section-7-swiper .post-date, #section-7 #section-7-swiper .post-title { /*max-width: 200px;*/ } #section-7 #section-7-swiper .featured-img-holder, .section7-overlay .featured-img-holder { margin-bottom: 20px; } #section-7 #section-7-swiper .featured-img-holder { cursor: pointer; } .section7-overlay .featured-img-holder { display: none; } #section-7 #section-7-swiper .post-date, .section7-overlay .post-date { font-size: 14px; font-family: var(--global--font-family-base); color: var(--global--color-quartiary); } .section7-overlay .post-date { margin-bottom: 0.5em; } #section-7 #section-7-swiper .post-title, .section7-overlay .post-title { font-size: 16px; font-family: var(--global--font-family-base-bold); color: var(--global--color-quartiary); } #section-7 .swiper-button-prev:after, #section-7 .swiper-button-next:after { width: 30px; height: 30px; color: transparent; } #section-7 .swiper-button-prev:after { background-image: url(images/global/LP_Icon_Arrow_Left_Red.svg); } #section-7 .swiper-button-next:after { background-image: url(images/global/LP_Icon_Arrow_Right_Red.svg); } #section-7 .section-7-open-overlay-holder { position: absolute; top: -5%; right: -8%; width: 150px; height: 150px; } #section-7 .section-7-open-overlay { position: relative; width: 70px; height: 70px; padding: 10px; border-width: 0px; z-index: 2; } #section-7 .section-7-open-overlay:hover { animation-name: spin; animation-duration: 500ms; animation-iteration-count: 1; animation-timing-function: linear; } #section-7 .section-7-content-wrap-left .btn-sparkles { position: absolute; top: 0; left: -8px; width: 150px; height: 150px; padding: 10px; background: url(images/global/sparkle-gif_256x256-2.gif); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #section-7 .section-7-content-wrap-left:hover .btn-sparkles { opacity: 1; -webkit-transform: scale(100%); -ms-transform: scale(100%); transform: scale(100%); } /* ----------- unicorns ----------- */ .unicorns .intro-img-holder { display: none; } .unicorns .overlay-bubble { top: 26%; } /* ----------- pegasus ----------- */ .pegasus .intro-img-holder { display: none; } .pegasus .overlay-bubble { top: 18%; } /* ----------- footer ----------- */ #colophon.site-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; max-width: 100%; margin: 0; padding: 30px 16px 90px; background-color: var(--global--secondary-color-background); font-size: var(--global--font-size-small); font-family: var(--global--font-family-base); line-height: var(--global--line-height-body); font-size: var(--global--font-size-smaller); font-weight: normal; color: var(--global--color-secondary); } .site-footer .footer-navigation { margin-top: 0; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; align-items: center; } .footer-navigation .footer-navigation-left { padding-bottom: 24px; text-align: center; } .footer-navigation .footer-navigation-left .footer-company-logo { max-width: 200px; } .site-footer .footer-copyright span { color: var(--global--color-secondary); } .site-footer .footer-copyright.mobile { display: block; margin: 20px 0; text-align: center; } .site-footer .footer-copyright.mobile > span:last-child { display: block; text-align: center; } .site-footer .footer-copyright.pc { display: none; } .footer-navigation .footer-navigation-wrapper { max-width: 300px; } .footer-navigation-wrapper li a:link, .footer-navigation-wrapper li a:visited, .footer-navigation-wrapper li a:active, .footer-navigation-wrapper li a span { padding: 0.5em 0.25em; outline: none; color: var(--global--color-secondary); text-decoration: none; display: block; text-align: center; line-height: 1.1; } .footer-navigation-wrapper .menu-item:nth-child(1), .footer-navigation-wrapper .menu-item:nth-child(2), .footer-navigation-wrapper .menu-item:nth-child(3) { margin: 0 14px 20px; padding: 0; } .footer-navigation-wrapper .menu-item:nth-child(1) { margin-left: 0; } .footer-navigation-wrapper .menu-item:nth-child(3) { margin-right: 0; } .footer-navigation-wrapper .menu-item:nth-child(4), .footer-navigation-wrapper .menu-item:nth-child(5) { width: 50%; text-align: center; } .footer-navigation-wrapper .menu-item:nth-child(1) a, .footer-navigation-wrapper .menu-item:nth-child(2) a, .footer-navigation-wrapper .menu-item:nth-child(3) a { width: 42px; height: 42px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; border-radius: 50%; color: var(--global--secondary-color-background); background-color: var(--global--color-secondary); -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .footer-navigation-wrapper .menu-item:hover a { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .footer-navigation-wrapper .menu-item:nth-child(1) .svg-icon, .footer-navigation-wrapper .menu-item:nth-child(2) .svg-icon, .footer-navigation-wrapper .menu-item:nth-child(3) .svg-icon { width: 28px; height: 28px; fill: var(--global--secondary-color-background); } .footer-navigation-wrapper li a:hover { outline: 2px solid transparent; text-decoration: underline 1px dotted currentColor; } .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: transparent; } html:lang(de-DE) .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a { background-image: url(images/global/LP_Icon_Language_de.svg)!important; } html:lang(en-US) .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a { background-image: url(images/global/LP_Icon_Language_en.svg)!important; } html:lang(fr-FR) .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a { background-image: url(images/global/LP_Icon_Language_fr.svg)!important; } html:lang(pl-PL) .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a { background-image: url(images/global/LP_Icon_Language_pl.svg)!important; } html:lang(hu-HU) .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a { background-image: url(images/global/LP_Icon_Language_hu.svg)!important; } html:lang(it-IT) .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a { background-image: url(images/global/LP_Icon_Language_it.svg)!important; } .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a { width: 50px; padding-top: 47px; padding-bottom: 0; background-size: contain; background-position: center top; background-repeat: no-repeat !important; text-decoration: none !important; } .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a > img { display: none; } /* ------------------------------ */ .confirm-overlay, .post-archive-overlay, .section6-overlay, .section7-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0; z-index: 20; display: none; } .confirm-overlay.show { display: block; } .confirm-overlay .confirm-overlay-inner, .post-archive-overlay .post-archive-overlay-inner, .section6-overlay .section6-overlay-inner, .section7-overlay .section7-overlay-inner { position: absolute; top: 50%; left: 47%; width: 320px; height: 374px; translate: -50% -50%; background-size: contain; background-position: center; background-repeat: no-repeat; } .confirm-overlay .confirm-overlay-inner { background-image: url(images/global/confirm-bg.png); } .confirm-overlay .confirm-content { position: absolute; top: 71%; left: 58%; width: 67%; height: auto; translate: -50% -50%; } .confirm-overlay .confirm-content .confirm-headline { color: var(--global--color-tertiary); font-family: var(--global--font-family-semibold); font-weight: 600; font-size: 14px; margin-bottom: 0.25em; } .confirm-overlay .confirm-content .confirm-text { margin-bottom: 0.75em; color: var(--global--color-quartiary); font-family: var(--global--font-family-regular); font-size: 12px; } .confirm-overlay .confirm-content .confirm-btns { text-align: center; } .confirm-overlay .confirm-content .confirm-btns button { display: inline-block; padding: 0.5em; font-family: var(--global--font-family-semibold); font-weight: 600; color: var(--global--color-quartiary); border: 1px solid var(--global--color-quartiary); font-size: 10px; } .confirm-overlay .confirm-content .confirm-btns #continue-btn { margin-right: 16px; color: var(--global--color-secondary); background-color: var(--global--color-quartiary)!important; } .confirm-overlay #confirm-close-btn { position: absolute; top: 10%; right: 2%; width: 36px; height: 36px; background-image: url(images/global/LP_Icon_Close_Purple.svg)!important; background-size: contain!important; background-position: center!important; background-repeat: no-repeat!important; } .post-archive-overlay, .section6-overlay, .section7-overlay { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .post-archive-overlay.active, .section6-overlay.active, .section7-overlay.active { -webkit-transform: scale(100%); -ms-transform: scale(100%); transform: scale(100%); } .section6-overlay .section6-overlay-inner { top: 55%; left: 50%; width: 90vw; height: 60vw; /*max-width: 800px; max-height: 550px;*/ padding: 32px 40px 30px 40px; } .post-archive-overlay .post-archive-overlay-inner { top: 55%; left: 50%; width: 71vw; height: 84vw; padding: 42px 30px 36px 37px; background-image: url(images/global/pop-up-portrait.svg); } .post-archive-overlay .partner-block { position: absolute; top: 3.3%; right: 16%; z-index: 10; } .post-archive-overlay .partner-link, .post-archive-overlay .partner-link:focus { /* display: block !important; */ width: 130px; height: 30px; /* background-image: url(images/mitmachen/CAVALLUNA_Logo.svg)!important; */ background-image: url(images/mitmachen/CAVALLUNA_Logo.svg); background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 0; } .post-archive-overlay .post-archive-overlay-close-btn { top: 0%; right: 2%; } .section7-overlay .section7-overlay-inner { top: 50%; left: 50%; width: 90vw; height: 112vw; padding: 11% 8% 17% 10%; background-image: url(images/global/pop-up-portrait.svg); } .section7-overlay .section7-overlay-inner { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; } .section7-overlay .section7-overlay-inner .featured-img-holder .featured-img { width: 100%; max-width: 100%; } .section7-overlay .section7-overlay-inner .section7-overlay-header-content { width: 100%; } .section7-overlay .section7-overlay-inner .section7-overlay-content { width: 100%; padding-right: 10px; } .post-archive-overlay .post-archive-overlay-content, .section7-overlay .section7-overlay-content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: auto; max-height: 100%; } .post-archive-overlay .post-archive-overlay-content .post-link { width: 99%; padding: 5px; } .post-archive-overlay .post-archive-overlay-content .post-link img { width: 100%; } .post-archive-overlay #post-archive-overlay-close-btn, .section6-overlay #section6-overlay-close-btn { top: -2%; right: -2%; } .section7-overlay #section7-overlay-close-btn { top: 2%; right: 2%; } .post-archive-overlay .post-archive-overlay-label { position: absolute; top: 2%; left: -4%; width: 46px; height: 46px; background-size: contain; background-position: center; background-repeat: no-repeat; } .post-archive-overlay.read .post-archive-overlay-label { background-image: url(images/mitmachen/mitmachen_read.png); } .post-archive-overlay.paint .post-archive-overlay-label { background-image: url(images/mitmachen/mitmachen_paint.png); } .post-archive-overlay.craft .post-archive-overlay-label { background-image: url(images/mitmachen/mitmachen_craft.png); } .post-archive-overlay.eat .post-archive-overlay-label { background-image: url(images/mitmachen/mitmachen_eat.png); } .post-archive-overlay.play .post-archive-overlay-label { background-image: url(images/mitmachen/mitmachen_play.png); } .post-archive-overlay.mystery .post-archive-overlay-label { background-image: url(images/mitmachen/mitmachen_mystery.png); } .post-archive-overlay.news .post-archive-overlay-label { background-image: url(images/global/LP_Icon_Info.svg); } .section6-overlay .section6-overlay-inner { position: relative; width: 800px; height: 550px; } .section6-overlay .section6-overlay-inner .section6-overlay-content { height: 100%; line-height: 1.1; } .section6-overlay .section6-overlay-inner .section6-overlay-content .section-6-bubble-headline { margin-bottom: 0.25em; font-size: 18px; font-family: var(--global--font-family-regular); color: var(--global--color-tertiary); } .section6-overlay .section6-overlay-inner .section6-overlay-content .section-6-bubble-text { font-size: 16px; font-family: var(--global--font-family-regular); color: var(--global--color-quartiary); } .section6-overlay.overlay-1 .section6-overlay-inner { top: 59%; left: 46%; width: 392px; height: 479px; padding: 41px 30px 48px 117px; } .section6-overlay.overlay-1 #section6-overlay-close-btn { top: 1%; right: 2%; } .section6-overlay.overlay-2 .section6-overlay-inner { top: 56%; left: 48%; width: 373px; height: 553px; padding: 52px 28px 36px 103px; } .section6-overlay.overlay-2 #section6-overlay-close-btn { top: 0%; right: 0%; } .section6-overlay.overlay-3 .section6-overlay-inner { top: 55%; left: 46%; width: 380px; height: 323px; padding: 78px 29px 30px 74px; } .section6-overlay.overlay-3 #section6-overlay-close-btn { top: 5%; right: -1%; } .section6-overlay.overlay-4 .section6-overlay-inner { top: 56%; left: 44%; width: 402px; height: 547px; padding: 47px 27px 36px 110px; } .section6-overlay.overlay-4 #section6-overlay-close-btn { top: 1%; right: 0%; } .section6-overlay.overlay-5 .section6-overlay-inner { top: 56%; left: 50%; width: 336px; height: 400px; padding: 111px 34px 30px 74px; } .section6-overlay.overlay-5 #section6-overlay-close-btn { top: 6%; right: -1%; } .section6-overlay.overlay-6 .section6-overlay-inner { top: 56%; left: 50%; width: 336px; height: 310px; padding: 67px 34px 30px 74px; } .section6-overlay.overlay-6 #section6-overlay-close-btn { top: 5%; right: -1%; } .section6-overlay-inner .section6-overlay-inner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #lp-content.blur { -webkit-filter: blur(5px); filter: blur(5px); } .section-default-inner { width: 100%; max-width: 900px; margin: 0 auto; padding: 30px 16px 0; } .section-default-inner h2 { color: var(--global--color-primary); } #hbm-privacy h2, #hbm-privacy h3, #hbm-privacy h4, #hbm-privacy a { font-size: 1em; } #section-1 .open-section-1-overlay-bubble:hover , #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active .profile-info:hover, #section-4 .section-4-open-slider-bubble:hover { -webkit-animation-name: spin; -webkit-animation-duration: 500ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 500ms; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 500ms; -ms-animation-iteration-count: 1; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 500ms; animation-iteration-count: 1; animation-timing-function: linear; } #scroll-top-btn { position: fixed; bottom: 20px; right: 22px; width: 40px; height: 40px; padding: 0; border-radius: 50%; -webkit-transform: rotate(90deg) scale(1); -ms-transform: rotate(90deg) scale(1); transform: rotate(90deg) scale(1); border: 1px solid var(--global--secondary-color-background); background-color: #fff; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(images/global/LP_Icon_Arrow_Left_White.svg); z-index: 10; display:none; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #scroll-top-btn:hover { -webkit-transform: rotate(90deg) scale(1.1); -ms-transform: rotate(90deg) scale(1.1); transform: rotate(90deg) scale(1.1); } #mitmachen, #ponys, #gadgets, #welt, #magica, #news { position: relative; top: -120px; } @media only screen and (min-width: 482px) { .site-header { padding: 0px 16px; } .site-branding { margin-top: 0; } .header-slider-mobile { top: 109px; } .primary-navigation { margin-left: 0; right: 0; } .primary-navigation > div > .menu-wrapper li:first-child { padding: 0 12px; } .primary-navigation > div > .menu-wrapper .sub-menu li:first-child { padding: 0; } .primary-navigation > div > .menu-wrapper li:first-child a { padding: 54px 0 0; } .primary-navigation > div > .menu-wrapper li:nth-child(2) a a { padding: 54px 4px 0; } .primary-navigation > div > .menu-wrapper > li:last-child > a > img { margin-top: 7px; } .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { right: 0 } .primary-navigation > div > .menu-wrapper li:nth-child(2) a { padding: 53px 3px 0; } .primary-navigation > div > .menu-wrapper li.pll-parent-menu-item > a { width: 56px; padding-top: 53px; } #content.site-content { padding-top: 142px; } #section-1 { /* margin-top: 78px; */ } .post-archive-overlay .post-archive-overlay-inner { padding: 50px 34px 62px 40px; } .post-archive-overlay #post-archive-overlay-close-btn { top: -1%; right: 1%; } .post-archive-overlay .post-archive-overlay-label { top: 2%; left: -1%; } #section-7 .section-7-content-wrap-left .section-7-open-overlay-holder { top: 4%; right: 0; } .site-footer .footer-copyright.mobile > span:last-child { display: inline; } } @media only screen and (min-width: 600px) { #section-2 .swiper-button-prev, #section-2 .swiper-rtl .swiper-button-next { left: 22%; } #section-2 .swiper-button-next, #section-2 .swiper-rtl .swiper-button-prev { right: 22%; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active .slidetext { left: -6.5%; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active.swiper-slide:first-child .slidetext { left: -14%; } #section-6 .section-6-open-overlay { top: -1%; right: -8%; } .post-archive-overlay .post-archive-overlay-inner { top: 55%; left: 50%; width: 90vw; height: 60vw; max-width: 800px; max-height: 550px; padding: 32px 40px 30px 40px; background-image: url(images/global/pop-up-default.svg); } .post-archive-overlay .partner-block { top: 6%; right: 11%; } .post-archive-overlay .partner-link, .post-archive-overlay .partner-link:focus { width: 250px; height: 50px; } .post-archive-overlay .post-archive-overlay-close-btn { top: 0%; right: 2%; } .post-archive-overlay .post-archive-overlay-content .post-link { width: 49%; } .post-archive-overlay .post-archive-overlay-inner, .section7-overlay .section7-overlay-inner { padding: 73px 72px 62px 84px; } .post-archive-overlay #post-archive-overlay-close-btn, .section6-overlay #section6-overlay-close-btn, .section7-overlay #section7-overlay-close-btn { top: -2%; right: 1%; } .post-archive-overlay .post-archive-overlay-label { top: 7%; left: -1%; width: 56px; height: 56px; } #section-7 .section-7-content-wrap { padding-top: 5%; } #section-7 #section-7-swiper { width: 60%; } .section7-overlay .section7-overlay-inner { top: 54%; left: 50%; width: 90vw; height: 60vw; max-width: 800px; max-height: 538px; padding: 8% 7% 7% 8%; flex-direction: row; background-image: url(images/global/pop-up-default.svg); } .section7-overlay .section7-overlay-inner .section7-overlay-header-content { width: 30%; padding-right: 20px; } .section7-overlay .section7-overlay-inner .section7-overlay-content { width: 70%; } .section7-overlay .featured-img-holder { display: block; } .section7-overlay #section7-overlay-close-btn { top: -1%; right: 1%; } #section-7 .section-7-content-wrap-left .section-7-open-overlay-holder { top: 11%; right: 3%; } } @media only screen and (min-width: 640px) { #section-3 .traumbetten-text-bubble p { font-size: 17px; } } @media only screen and (min-width: 680px) { .confirm-overlay { left: 0; background-size: 500px; } #section-6 #section-6-swiper .section-6-bubble { left: 30%; } } @media only screen and (min-width: 770px) { #section-1-overlay-bubble #bubble-close-btn, #section-4 .section-4-bubble-close-btn, .post-archive-overlay .post-archive-overlay-close-btn, .section7-overlay #section7-overlay-close-btn { width: 40px; height: 40px; } #section-1-overlay-bubble .bubble-swiper-1 { top: 46%; width: 72%; padding: 0% 0%; } .section6-overlay #section6-overlay-close-btn, .section7-overlay #section7-overlay-close-btn { top: 0%; right: 2%; } .post-archive-overlay .post-archive-overlay-label { top: 8%; left: -1%; width: 64px; height: 64px; } .bubble-swiper-1 .swiper-button-prev:after, .bubble-swiper-1 .swiper-button-next:after { width: 30px; height: 30px; } #section-2 { background-size: 100% auto; background-size: 100% 100%; background-position: center 100px; } #section-2 .section-2-content .section-buttons { margin: 140px auto 50px; } #section-2 .swiper { width: 100%; padding-bottom: 70px; width: 120%; } #section-2 .swiper-slide { width: 256px; height: 256px; } .section-2-slider-area .profile-info { top: 4%; right: 10%; width: 50px; height: 50px; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active .btn-stars { top: 9%; right: 10%; } #section-2 .swiper-button-prev, #section-2 .swiper-rtl .swiper-button-next { bottom: 9%; } #section-2 .swiper-button-next, #section-2 .swiper-rtl .swiper-button-prev { bottom: 9%; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active .slidetext { left: -4.5%; } #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active.swiper-slide:first-child .slidetext { left: -3.5%; } #profile-overlay { width: 60%; } /* ----------- unicorns ----------- */ #colophon.site-footer { padding: 30px 16px 56px; } .site-footer .footer-navigation { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer-navigation .footer-navigation-left, .footer-navigation .footer-navigation-wrapper { width: 50%; } .footer-navigation .footer-navigation-left { text-align: left; } .footer-navigation .footer-navigation-left .footer-copyright { margin-top: 20px; } .footer-navigation .footer-navigation-wrapper { max-width: 350px; padding-top: 30px; } .site-footer .footer-copyright.mobile { display: none; } .site-footer .footer-copyright.pc { display: block; padding-top: 5px; } #scroll-top-btn { bottom: 104px; right: 35px; } } @media only screen and (min-width: 900px) { .site-header .site-logo { margin: 10px 0; } .site-header .site-logo img, .site-header .site-logo a { width: 148px; height: 100px; } .site-header .header-slider-off, .header-slider-mobile { display: none!important; } .site-header .header-slider { display: block; } .site-header .header-slider { height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .site-header .header-slider .swiper-header { position: relative; width: 480px; height: 100px; margin: 0 auto; overflow: hidden; } .header-slider .swiper-header .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; width: 480px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-slider .swiper-header .swiper-slide.swiper-slide-active { /* background-image: none; */ /* background-image: url(images/global/sparkle-gif_256x256-2.gif); */ background-position: 66% 14%; /* background-position: -8% 16%; */ background-repeat: no-repeat; } .header-slider .swiper-header .swiper-slide:not(.current) .img-link { -webkit-animation: beat 1s infinite alternate; -moz-animation: beat 1s infinite alternate; -ms-animation: beat 1s infinite alternate; -o-animation: beat 1s infinite alternate; animation: beat 1s infinite alternate; -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .header-slider .swiper-button-prev:after, .header-slider .swiper-rtl .swiper-button-next:after, .header-slider .swiper-button-next:after, .header-slider .swiper-rtl .swiper-button-prev:after { color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; } .header-slider .swiper-header .swiper-button-prev:after { color: transparent; background-image: url(images/global/LP_Icon_Arrow_Left_White.svg); } .header-slider .swiper-header .swiper-button-next:after { color: transparent; background-image: url(images/global/LP_Icon_Arrow_Right_White.svg); } #content.site-content { padding-top: 106px; } } @media only screen and (max-width: 980px) and (orientation: landscape){ #quicklinks { padding: 4px 16px 4px; } } @media only screen and (min-width: 980px) { body, * { font-size: var(--global--font-size-base); } p, p b, p strong, p a { font-size: var(--global--font-size-base); line-height: var(--global--line-height-body); } h2, .h2 { font-size: var(--heading--font-size-h2); line-height: var(--heading--line-height-h2); } .site-header { padding: 0 80px 0; } .site-branding { padding-top: 0; } .primary-navigation > div > .menu-wrapper > li > .sub-menu { left: -4px; } #masthead.site-header { position: fixed; top: 0; left: 0; z-index: 99999; } #quicklinks { position: fixed; top: 50%; left: auto; right: 0; translate: 0 -50%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 16px 0 16px; width: 96px; min-height: 390px; max-height: 390px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; } #quicklinks .lp-btn { display: inline-block; } #quicklinks .lp-btn img { width: 50px; height: 50px; } #quicklinks .lp-btn span { display: block; width: 100%; } #quicklinks button#mitmachen-btn::after { width: 130%; height: 100%; top: -18%; left: -13%; } #quicklinks .quicklinks-btn-area.app-btn-area { display: none; } .post-archive-overlay .post-archive-overlay-inner { padding: 100px 90px 90px 100px; } .section7-overlay .section7-overlay-inner { padding: 80px 70px 70px 80px; } .post-archive-overlay .post-archive-overlay-content .post-link { width: 33%; } #introvideo-mobile { display: none; } #introvideo { display: block; } .section { margin-bottom: 70px; } .section-textarea, .section-entry-header { padding: 0 40px 30px; } #section-1-overlay-bubble { width: 400px; height: 181px; top: 39%; left: 48%; } .unicorns #section-1-overlay-bubble { top: 33%; left: 50%; } .pegasus #section-1-overlay-bubble { top: 38%; left: 46%; } #section-1-overlay-bubble .bubble-swiper-1 .swiper-slide p, #section-1-overlay-bubble .bubble-swiper-1 .swiper-slide p strong { font-size: calc(14px + (18 - 14) * ((100vw - 980px) / (1920 - 980))); } #section-2 .swiper-button-prev:after, #section-2 .swiper-button-next:after { width: 30px; } #section-3 .show-bg-landscape { display: block; } #section-3 #traumbetten-swiper { padding: 0 15vw 0 8vw; } #section-3 #traumbetten-swiper .swiper-slide .swiper-slide-img { width: 50%; cursor: pointer; } #section-3 .show-bg-portrait { display: none;} #section-3 #traumbetten-swiper .swiper-slide .swiper-slide-img { -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #section-3 .traumbetten-text-bubble { -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #section-3 .traumbetten-text-bubble { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 0; } #section-3 .traumbetten-slide-text { display: block; width: 100%; opacity: 0; } #section-3 #show-bg-img img { height: 90vh; } #section-3 #traumbetten-swiper .swiper-slide { height: 80vh; } #section-3 #traumbetten-swiper .swiper-slide .swiper-slide-img { position: absolute; bottom: 8vh; display: block; max-width: 200%; width: 20vh; height: auto; } #section-3 #traumbetten-swiper .swiper-slide .swiper-slide-2-img, #section-3 #traumbetten-swiper .swiper-slide .swiper-slide-3-img { bottom: 11vh; } #section-3 .traumbetten-text-bubble { translate: 0 -50%; width: 36vh; height: 15vh; padding: 22% 13% 16% 44%; background-image: url(images/gadgets/LPD1_Traumbetten_Bubble.png); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #section-3 .traumbetten-text-bubble p { font-size: 14px; } #section-3 .traumbetten-slide-text { position: absolute; bottom: 3.1vh; translate: -50% 0; } #section-3 #traumbetten-swiper #traumbetten-slide-1.active .swiper-slide-img { width: 36vh; bottom: 35vh; left: 72%; } #section-3 #traumbetten-swiper #traumbetten-slide-1.active #traumbetten-bubble-1 { display: -webkit-box; display: -ms-flexbox; display: flex; top: 20vh; left: 41vh; opacity: 1; } #section-3 #traumbetten-swiper #traumbetten-slide-1.active #traumbetten-slide-text-1 { display: block; left: calc(200% + 5vw); opacity: 1; } #section-3 #traumbetten-swiper #traumbetten-slide-2.active .swiper-slide-img { width: 36vh; bottom: 35vh; left: 0%;} #section-3 #traumbetten-swiper #traumbetten-slide-2.active #traumbetten-bubble-2 { display: -webkit-box; display: -ms-flexbox; display: flex; top: 20vh; left: 22vh; opacity: 1; } #section-3 #traumbetten-swiper #traumbetten-slide-2.active #traumbetten-slide-text-2 { display: block; left: calc(100% + 4vw); opacity: 1; } #section-3 #traumbetten-swiper #traumbetten-slide-3.active .swiper-slide-img { width: 36vh; bottom: 35vh; left: 100%; } #section-3 #traumbetten-swiper #traumbetten-slide-3.active #traumbetten-bubble-3 { display: -webkit-box; display: -ms-flexbox; display: flex; width: 37vh; height: 18vh; top: 20vh; left: -50vh; padding: 20% 39% 20% 14%; opacity: 1; background-image: url(images/traumbetten/LPD1_Traumbetten_Bubble_reverse.png); } #section-3 #traumbetten-swiper #traumbetten-slide-3.active #traumbetten-slide-text-3 { display: block; left: 3vw; opacity: 1; } #section-3 #traumbetten-swiper #traumbetten-slide-4.active .swiper-slide-img { width: 36vh; bottom: 35vh; } #section-3 #traumbetten-swiper #traumbetten-slide-4.active #traumbetten-bubble-4 { display: -webkit-box; display: -ms-flexbox; display: flex; width: 37vh; height: 18vh; top: 20vh; left: -62vh; padding: 20% 39% 20% 14%; opacity: 1; background-image: url(images/gadgets/LPD1_Traumbetten_Bubble_reverse.png); } #section-3 #traumbetten-swiper #traumbetten-slide-4.active #traumbetten-slide-text-4 { display: block; left: calc(-100% + 2vw); opacity: 1; } #section-3 .fader-buttons { display: block; position: absolute; bottom: 3vh; left: 50%; translate: -50% 0; width: 100%; max-width: 360px; padding: 0 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 10; } #section-3 .fader-button.fader-button-prev { background: url(images/global/LP_Icon_Arrow_Left_Red.svg)!important; } #section-3 .fader-button.fader-button-next { background: url(images/global/LP_Icon_Arrow_Right_Red.svg)!important; } #section-3 .fader-button.fader-button-prev, #section-3 .fader-button.fader-button-next { width: 30px; height: 30px; background-size: contain!important; background-position: center!important; background-repeat: no-repeat!important; } #section-4 #internat-swiper .swiper-overlay-mobile, #section-4 .swiper-slide .internat-img-mob { display: none;} #section-4 #internat-swiper .swiper-overlay, #section-4 .swiper-slide .internat-img { display: block;} #section-4 .slider-text-bubble { top: 35%; left: 65%; width: 360px; background-size: contain; } #section-4 .slider-text-bubble .slider-bubble-headline { font-size: 18px; } #section-4 .slider-text-bubble p, #section-4 .slider-text-bubble p strong { font-size: 16px; } #section-4 .swiper-button-prev, .bubble-swiper-1 .swiper-rtl .swiper-button-next { left: 11%; top: 52%; } #section-4 .swiper-button-next, .bubble-swiper-1 .swiper-rtl .swiper-button-prev { right: 11%; top: 52%; } #section-4 .swiper-button-prev:after, #section-4 .swiper-button-next:after { width: 30px; } #section-4 .section-4-open-slider-bubble { top: 6%; right: -5%; } #section-6 { margin-bottom: 20px; } #section-6 #section-6-swiper .swiper-slide-inner { padding-left: 60px; padding-right: 60px; } #section-6 #section-6-swiper .section-6-bubble { top: -82px; left: -40px; translate: 0 0; width: 334px; height: 178px; padding: 37px 30px 20px 40px; font-size: 16px; } #section-6 #section-6-swiper .section-6-bubble-headline { font-size: 18px; } #section-6 #section-6-swiper .section-6-bubble-text { font-size: 16px; } #section-6 .section-6-open-overlay { top: 4%; right: -4%; } .section6-overlay.overlay-1 .section6-overlay-inner { top: 50%; left: 50%; width: 460px; height: 501px; padding: 60px 60px 51px 130px; } .section6-overlay.overlay-1 #section6-overlay-close-btn { top: 1%; right: 1%; } .section6-overlay.overlay-2 .section6-overlay-inner { top: 50%; left: 50%; width: 468px; height: 540px; padding: 95px 44px 41px 137px; } .section6-overlay.overlay-2 #section6-overlay-close-btn { top: 8%; right: 1%; } .section6-overlay.overlay-3 .section6-overlay-inner { top: 50%; left: 50%; width: 630px; height: 328px; padding: 126px 90px 27px 190px; } .section6-overlay.overlay-3 #section6-overlay-close-btn { top: 35%; right: 2%; } .section6-overlay.overlay-4 .section6-overlay-inner { top: 50%; left: 50%; width: 480px; height: 550px; padding: 89px 49px 37px 137px; } .section6-overlay.overlay-4 #section6-overlay-close-btn { top: 8%; right: 1%; } .section6-overlay.overlay-5 .section6-overlay-inner { top: 50%; left: 50%; width: 630px; height: 328px; padding: 132px 90px 107px 200px; } .section6-overlay.overlay-5 #section6-overlay-close-btn { top: 35%; right: 2%; } .section6-overlay.overlay-6 .section6-overlay-inner { top: 50%; left: 50%; width: 600px; height: 346px; padding: 151px 90px 107px 98px; } .section6-overlay.overlay-6 #section6-overlay-close-btn { top: 35%; right: 2%; } #section-7 .section-entry-header { max-width: 100%; margin: 0 20px; } #section-7 .section-entry-header .section-header { margin-bottom: 0; text-align: left; } #section-7 .section-7-content-wrap-left { width: 50%; } /* ----------- unicorns ----------- */ .unicorns .intro-img-holder { display: block; } .unicorns .intro-img-holder-mob { display: none; } .pegasus .intro-img-holder { display: block; } .pegasus .intro-img-holder-mob { display: none; } #colophon.site-footer * { font-size: var(--global--font-size-smaller); font-size: var(--global--font-size-small); } #colophon.site-footer { padding: 25px 80px 0; } #colophon.site-footer .footer-row:last-child { padding-bottom: 20px; } .confirm-overlay .confirm-overlay-inner { top: 50%; left: 48%; width: 400px; height: 468px; } .confirm-overlay .confirm-content { width: 65%; } .confirm-overlay .confirm-content .confirm-headline { font-size: 16px; } .confirm-overlay .confirm-content .confirm-text { font-size: 14px; } .confirm-overlay .confirm-content .confirm-btns button { font-size: 14px; } .confirm-overlay #confirm-close-btn { top: 10%; right: 2%; width: 40px; height: 40px; } .section-default-inner { padding: 40px 40px 0; } #scroll-top-btn { bottom: -14px; right: 22px; } } @media only screen and (min-width: 1180px) { .header-buttons .news-btn-area, .header-buttons .app-btn-area { margin-right: 20px; } #section-1-overlay-bubble { top: 45%; left: 48%; } .ponys #section-1-overlay-bubble { top: 45%; left: 51%; } #section-1-overlay-bubble #bubble-close-btn { top: -1%; right: -4px; } #profile-overlay { width: 30%; } .section-textarea, .section-entry-header { padding: 0 80px 50px; } #section-3 .fader-buttons { left: 50%; } #section-3 #traumbetten-swiper { padding: 0 9vw; } #section-3 .section-textarea, #section-4 .section-textarea { padding-bottom: 0!important; } #section-3 .traumbetten-text-bubble p { font-size: 16px; } #section-3 .traumbetten-text-bubble { padding: 22% 13% 16% 32%; } #section-3 #traumbetten-swiper #traumbetten-slide-1.active #traumbetten-slide-text-1 { left: calc(200% + 0.5vw); } #section-3 #traumbetten-swiper #traumbetten-slide-2.active #traumbetten-slide-text-2 { left: calc(100% + 0vw); } #section-3 #traumbetten-swiper #traumbetten-slide-3.active #traumbetten-slide-text-3 { left: -0.5vw; } #section-3 #traumbetten-swiper #traumbetten-slide-4.active #traumbetten-slide-text-4 { left: calc(-100% - 1vw); } #section-3 #traumbetten-swiper #traumbetten-slide-1.active #traumbetten-bubble-1 { left: 52vh; } #section-3 #traumbetten-swiper #traumbetten-slide-3.active #traumbetten-bubble-3 { left: -42vh; background-image: url(images/gadgets/LPD1_Traumbetten_Bubble_reverse.png); } #section-4 .slider-text-bubble { top: 46%; } #section-5 .join-btns-img-holder { top: -16px; } #section-6 .section-textarea { padding-bottom: 30px; } #section-7 .section-entry-header { margin: 0 60px; } /* ----------- unicorns ----------- */ .unicorns #section-1-overlay-bubble { top: 33%; left: 50%; } .pegasus #section-1-overlay-bubble { width: 30%; height: 28%; } .section-default-inner { padding: 80px 80px 0; } } @media only screen and (min-width: 1600px) { .pegasus #section-1-overlay-bubble #bubble-close-btn { top: 5%; right: -4px; } #section-4 .slider-text-bubble { top: 56%; } .unicorns #section-1-overlay-bubble { top: 37%; left: 46%; } #section-7 .section-7-content-wrap-left .section-7-open-overlay-holder { top: 11%; right: 6%; } } @media only screen and (max-width: 979px) { #profile-overlay, #profile-overlay img { border-radius: 24px; } .cmpboxrecall { bottom: 100px!important; left: 18px!important; } } @media only screen and (max-width: 769px) { #section-2 .swiper-slide.swiper-slide-fully-visible.swiper-slide-active { width: 150px; height: 150px; padding-top: 9%; } } @media only screen and (max-width: 521px) { .unicorns .section-textarea, .section-entry-header { max-width: 920px; margin: 0 auto; padding: 0 16px 0; } .unicorns #section-2 { background-position: center 84px; } } /* APP-PAGE */ .app-page .section-entry-header, .app-page .section-textarea, .app-page .video-fon-wrap { max-width: 1010px!important; } .app-page .section-entry-header { padding: 0 16px 0; } .app-page h2 { margin-bottom: 1em; font-size: 1.5rem; color: var(--global--color-primary); } .app-page .section#section-2 .section-textarea { margin-top: -0.5em; padding-top: 0; } .app-page .video-fon-wrap { margin: 0 auto; padding: 0 16px 20px; } .app-page .video-fon-wrap .caption { margin-top: 6px; font-size: 12px; text-align: center; } .app-page .plyr.plyr--video { background: transparent; } .app-page .plyr .plyr__controls { display: none; } .app-page .plyr button { width: 60px; height: 60px; } .app-page .plyr button:not(:hover):not(:active):not(.has-background) { background-color: rgba(255,255,255,0.8); } .app-page .plyr.plyr--video .plyr__control:hover, .app-page .plyr.plyr--video .plyr__control[aria-expanded=true] { background-color: rgba(255,255,255,1); } .app-page .plyr .plyr__control--overlaid svg { left: 3px; width: 30px; height: 30px; } .app-page .plyr .plyr__video-wrapper { border-radius: 21px; } .app-page .plyr .plyr__video-wrapper:after { content: ""; position: absolute; top: -1%; left: 0%; width: 100%; height: 102%; z-index: 2; background-image: url(images/app/iPhone-Mockup-tr.png); background-position: center; background-repeat: no-repeat; background-size: 104% 107%; } .bullet-list { list-style-image: url("images/global/bullet-point.png"); } .bullet-list li { margin-bottom: 1em; padding-left: 0.5em; } .app-page .section-3-bg, .app-page .section-4-bg { position: relative; z-index: -1; } .app-page .section-3-bg img, .app-page .section-4-bg img { width: 100%; } .app-page .section-3-bg { max-height: 500px; overflow: hidden; } .app-page .section-3-bg img { height: 500px; width: 100%; width: auto; } .app-page #section-3 .swiper.section-3-swiper { position: absolute; top: 110px; left: 0; width: 100%; padding-top: 150px; padding-bottom: 10px; } .app-page #section-3 .section-3-swiper:after { content: ""; position: absolute; top: 56%; left: 50%; translate: -50% -50%; width: 318px; height: 160px; z-index: 2; background-image: url(images/app/iPhone-Mockup-tr.png); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .app-page #section-3 .section-3-swiper .swiper-slide { background-position: center; background-size: cover; width: 300px;height: 140px; } .app-page #section-3 .section-3-swiper .swiper-slide img { display: block; width: 100%; translate: -50% -14%; } .app-page #section-3 .section-3-swiper .swiper-slide-active img { translate: -50% 0; } .app-page #section-3 .swiper-3d .swiper-slide-shadow-left, .app-page #section-3 .swiper-3d .swiper-slide-shadow-right, .app-page #section-3 .swiper-3d .swiper-slide-shadow-top { /*position: absolute;*/ left: 0; top: -51%; /*width: 100%; height: 100%; pointer-events: none; z-index: 10;*/ } .app-page #section-3 .section-3-swiper .swiper-slide img, .app-page #section-3 .swiper-3d .swiper-slide-shadow-left, .app-page #section-3 .swiper-3d .swiper-slide-shadow-right, .app-page #section-3 .swiper-3d .swiper-slide-shadow-top { border-radius: 12px; } .app-page .section-3-swiper .caption { position: absolute; left: 50%; bottom: 5%; max-width: 160px; translate: -50% 0; font-size: 12px; text-align: center; } .app-page #section-3 .swiper-button-prev, #section-3 .swiper-rtl .swiper-button-next { left: 50%; bottom: 5%; translate: -20vh 0; } .app-page #section-3 .swiper-button-next, .sw#section-3 iper-rtl .swiper-button-prev { right: 50%; bottom: 5%; translate: 20vh 0; } .app-page #section-3 .swiper-button-prev, .app-page #section-3 .swiper-button-next, .app-page #section-3 .swiper-button-prev:after, .app-page #section-3 .swiper-button-next:after { width: 30px; height: 30px; } .app-page #section-3 .swiper-button-prev:after, .app-page #section-3 .swiper-button-next:after { color: transparent; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .app-page #section-3 .swiper-button-prev:after { background-image: url(images/global/LP_Icon_Arrow_Left_Purple.svg); } .app-page #section-3 .swiper-button-next:after { background-image: url(images/global/LP_Icon_Arrow_Right_Purple.svg); } .app-page #section-4 { margin-top: -50px; } .app-page .section-4-bg { max-height: 950px; overflow: hidden; } .app-page .section-4-bg img { height: 950px; max-width: 150%; width: 150%; } .app-page .section-4-content, .app-page .section-4-content-inner, .app-page .section-4-content .section-4-content-inner-left, .app-page .badges { display: flex; } .app-page .section-4-content, .app-page .section-4-content .section-4-content-inner-left, .app-page .badges { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .app-page .section-4-content { position: absolute; top: 61%; left: 50%; translate: -50% -50%; width: 82%; } .app-page .section-4-content-inner-left img { display: block; width: 240px; height: auto; } .app-page .section-4-content h2 { margin: 1.0em 0 1.0em; font-size: 1.5rem; font-size: var(--heading--font-size-h1); text-align: center; color: var(--global--color-tertiary); } .app-page .section-4-content-inner, .app-page .section-4-content .badges { -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .app-page .section-4-content-inner, .app-page .section-4-content .badges a { margin-bottom: 2em; } .app-page .section-4-content .badges a { display: inline-block; max-width: 240px; margin-right: 3%; } @media only screen and (min-width: 400px) { #section-3 .swiper-slide img { bottom: 37%; } } @media only screen and (min-width: 540px) { .app-page .plyr .plyr__video-wrapper { border-radius: 36px; } .app-page #section-3 .swiper.section-3-swiper { top: 74px; } .app-page #section-3 .section-3-swiper:after { top: 50%; left: 50%; width: 466px; height: 235px; } .app-page #section-3 .section-3-swiper .swiper-slide { width: 450px; height: 210px; } .app-page #section-3 .swiper-3d .swiper-slide-shadow-left, .app-page #section-3 .swiper-3d .swiper-slide-shadow-right, .app-page #section-3 .swiper-3d .swiper-slide-shadow-top { top: -45%; } .app-page #section-3 .section-3-swiper .swiper-slide img, .app-page #section-3 .swiper-3d .swiper-slide-shadow-left, .app-page #section-3 .swiper-3d .swiper-slide-shadow-right, .app-page #section-3 .swiper-3d .swiper-slide-shadow-top { border-radius: 40px; } .app-page #section-3 .swiper-slide img { bottom: 32%; width: 38vh; } .app-page .section-4-content .badges { -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start } } @media only screen and (min-width: 700px) { .app-page .plyr .plyr__video-wrapper { border-radius: 48px; } .app-page .section-4-content-inner-left img { width: 300px; } .app-page .section-4-content h2 { margin: 1.5em 0 1.5em; } .app-page .section-4-content .badges a { max-width: 274px; } } @media only screen and (min-width: 900px) { .app-page .section-3-bg { max-height: 780px; } .app-page .section-3-bg img { height: 780px; } .app-page #section-3 .swiper.section-3-swiper { top: 220px; left: 0; padding-top: 150px; padding-bottom: 10px; } .app-page #section-3 .section-3-swiper:after { top: 50%; left: 50%; width: 631px; height: 320px; } .app-page #section-3 .section-3-swiper .swiper-slide { width: 700px; width: 609px; height: 323px; height: 283px; } .app-page #section-3 .swiper-3d .swiper-slide-shadow-left, .app-page #section-3 .swiper-3d .swiper-slide-shadow-right, .app-page #section-3 .swiper-3d .swiper-slide-shadow-top { left: 0; top: -37%; } .app-page .section-3-swiper .caption { left: 50%; bottom: 7%; max-width: 220px; font-size: 12px; } .app-page #section-3 .swiper-button-prev, #section-3 .swiper-rtl .swiper-button-next { bottom: 4%; translate: -20vw 0; } .app-page #section-3 .swiper-button-next, .sw#section-3 iper-rtl .swiper-button-prev { bottom: 4%; translate: 20vw 0; } .app-page #section-3 .swiper-button-prev, .app-page #section-3 .swiper-button-next, .app-page #section-3 .swiper-button-prev:after, .app-page #section-3 .swiper-button-next:after { width: 40px; height: 40px; } .app-page #section-3 .section-textarea { padding-top: 50px; } .app-page #section-3 .swiper-slide img { bottom: 25%; width: 38vh; } .app-page .section-4-bg { max-height: 600px; } .app-page .section-4-bg img { height: 600px; } .app-page .section-4-content { position: absolute; top: 62%; left: 50%; } .app-page .section-4-content-inner { -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .app-page .section-4-content-inner-right { padding-left: 50px; } .app-page .section-4-content-inner-left img { width: 280px; height: 280px; max-width: 280px; } .app-page .section-4-content .section-entry-header { margin: 0; padding: 0; max-width: 35em !important; } .app-page .section-4-content h2 { margin: 0.5em 0 1em; text-align: left; } .app-page .section-4-content .badges a:first-child { /* margin-right: 5%; */ } } @media only screen and (min-width: 980px) { .app-page .plyr .plyr__video-wrapper { border-radius: 54px; } .app-page .video-fon-wrap { padding: 0 40px 30px; } .app-page .video-fon-wrap .caption { margin-top: 10px; font-size: 13px; } .app-page .section-3-bg img { height: 780px; width: auto; } .app-page .section-4-content .badges img { margin-bottom: 0; } .app-page .section-4-content .badges a:first-child { /* margin-right: 50px; */ } } @media only screen and (min-width: 1180px) { .app-page .plyr .plyr__video-wrapper { border-radius: 62px; } .app-page .video-fon-wrap { padding: 0 80px 50px; } .app-page .section-3-bg img { height: 780px; width: 100%; } } .tag { opacity: 0; transform: translate(0, 15vh); transition: all 1s; } .tag.visible { opacity: 1; transform: translate(0, 0); } /* Shrink Header on Scroll */ .site-header .site-logo-img img, .site-header.shrink .header-buttons-right #news-btn > img, .site-header.shrink .header-buttons-right #news-btn > span, .site-header .header-slider .swiper-header, .site-header .header-slider .swiper-header .swiper-slide button, .site-header .header-slider .swiper-header .swiper-slide button > img { -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .site-header.shrink .site-logo-img img { width: 90px; height: 58px; top: 0; } .site-header.shrink .header-buttons-right #news-btn > img, .site-header.shrink .header-buttons-right #app-btn > img, .site-header.shrink .header-buttons-right #lang-btn > img { width: 30px; height: 30px; } .site-header.shrink .header-buttons-right #news-btn > span, .site-header.shrink .header-buttons-right #app-btn > span, .site-header.shrink .header-buttons-right #lang-btn > span { font-size: var(--global--font-size-small); } .site-header.shrink .header-slider .swiper-header { width: 320px; height: 60px; } .site-header.shrink .header-slider .swiper-header .swiper-slide button { height: 60px; } .site-header.shrink .header-slider .swiper-header .swiper-slide button > img { width: 183px; } /* ----------- sparkle ----------- */ .sparkle .overlay-bubble { top: 16%; left: 50%; } @media only screen and (min-width: 980px) { .ponys.sparkle #section-1-overlay-bubble { width: 400px; height: 181px; top: 21%; left: 29%; } } @media only screen and (min-width: 1180px) { .ponys.sparkle #section-1-overlay-bubble { top: 21%; left: 78%; background-image: url(images/global/LP_Intro_Speechbubble_flip.svg); } } /* ----------- lang-switcher ----------- */ @media only screen and (min-width: 482px) { .primary-navigation > div > .menu-wrapper > li > .sub-menu:before { width: 100%; height: 14px; top: -13px; left: 0; border-width: 0; /* background: rgba(0, 0, 0, 0.9); */ background: transparent; } } /* .postid-2298 #menu-item-783-pl, .postid-2280 #menu-item-784-pl, .postid-2268 #menu-item-785-pl { display: none; } */