/* ************************************************************ *************************************************************** *************************************************************** :: RESETS *************************************************************** *************************************************************** ************************************************************* */ * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } /* Change the white to any color */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: none; color: var(--black) !important; -webkit-text-fill-color: var(--black); -webkit-box-shadow: none; transition: background-color 5000s ease-in-out 0s; } html, body { /*overscroll-behavior: none;*/ } .opa0 { opacity: 0; } .dim0 { width: 0px; height: 0px; } .sideBySide { display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin-top: 1rem; gap: 1rem; } .flx-str { justify-content: flex-start; } /* ************************************************************ *************************************************************** *************************************************************** :: FONTS *************************************************************** *************************************************************** ************************************************************* */ @font-face { font-family: 'Barlow'; src: url('../ressources/fonts/Barlow-Regular.eot'); src: url('../ressources/fonts/Barlow-Regular.eot?#iefix') format('embedded-opentype'), url('../ressources/fonts/Barlow-Regular.woff2') format('woff2'), url('../ressources/fonts/Barlow-Regular.woff') format('woff'), url('../ressources/fonts/Barlow-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('../ressources/fonts/Barlow-Medium.eot'); src: url('../ressources/fonts/Barlow-Medium.eot?#iefix') format('embedded-opentype'), url('../ressources/fonts/Barlow-Medium.woff2') format('woff2'), url('../ressources/fonts/Barlow-Medium.woff') format('woff'), url('../ressources/fonts/Barlow-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('../ressources/fonts/Barlow-SemiBold.eot'); src: url('../ressources/fonts/Barlow-SemiBold.eot?#iefix') format('embedded-opentype'), url('../ressources/fonts/Barlow-SemiBold.woff2') format('woff2'), url('../ressources/fonts/Barlow-SemiBold.woff') format('woff'), url('../ressources/fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('../ressources/fonts/Barlow-Bold.eot'); src: url('../ressources/fonts/Barlow-Bold.eot?#iefix') format('embedded-opentype'), url('../ressources/fonts/Barlow-Bold.woff2') format('woff2'), url('../ressources/fonts/Barlow-Bold.woff') format('woff'), url('../ressources/fonts/Barlow-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('../ressources/fonts/Barlow-Black.eot'); src: url('../ressources/fonts/Barlow-Black.eot?#iefix') format('embedded-opentype'), url('../ressources/fonts/Barlow-Black.woff2') format('woff2'), url('../ressources/fonts/Barlow-Black.woff') format('woff'), url('../ressources/fonts/Barlow-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'BarlowCondensed'; src: url('../ressources/fonts/BarlowCondensed-Regular.eot'); src: url('../ressources/fonts/BarlowCondensed-Regular.eot?#iefix') format('embedded-opentype'), url('../ressources/fonts/BarlowCondensed-Regular.woff2') format('woff2'), url('../ressources/fonts/BarlowCondensed-Regular.woff') format('woff'), url('../ressources/fonts/BarlowCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'BarlowCondensed'; src: url('../ressources/fonts/BarlowCondensed-Medium.eot'); src: url('../ressources/fonts/BarlowCondensed-Medium.eot?#iefix') format('embedded-opentype'), url('../ressources/fonts/BarlowCondensed-Medium.woff2') format('woff2'), url('../ressources/fonts/BarlowCondensed-Medium.woff') format('woff'), url('../ressources/fonts/BarlowCondensed-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'BarlowCondensed'; src: url('../ressources/fonts/BarlowCondensed-Bold.eot'); src: url('../ressources/fonts/BarlowCondensed-Bold.eot?#iefix') format('embedded-opentype'), url('../ressources/fonts/BarlowCondensed-Bold.woff2') format('woff2'), url('../ressources/fonts/BarlowCondensed-Bold.woff') format('woff'), url('../ressources/fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ************************************************************ *************************************************************** *************************************************************** :: MAIN PAGE ELEMENTS *************************************************************** *************************************************************** ************************************************************* */ :root { --headerNavHeight: 50px; --footerNavHeight: 50px; } html { background: rgba(6,22,25,1); min-height: 100%; font-family: 'Barlow'; font-weight: normal; font-size: 16px; color: var(--white); height: 100%; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } html::-webkit-scrollbar { display: none; } body { min-height: 100%; height: auto; margin: 0px; /*padding-bottom: var(--footerNavHeight);*/ } html, body { padding-bottom: var(--footerNavHeight); } /* Links */ a, a:link, a:visited, a:hover, .lnk { color: inherit; text-decoration: none; cursor: pointer; } a:hover, .lnk { color: hsl(var(--col_pr_4)); } /* Headbar */ .headbar { position: fixed; padding: 0.75rem; top: 0px; left: 0px; width: 100%; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; } .headbar .bg { background: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)), hsl(var(--col_se_1)); position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; } .headbar .left { display: flex; z-index: 1; } .headbar .left svg { width: auto; height: 1.25em; } .headbar .middle { z-index: 1; display: none; } .headbar .right { z-index: 1; display: none; } /* Footer Navi */ .naviFooter { font-size: 0.625rem; position: fixed; bottom: -1px; left: 0px; width: 100%; padding: 1.4em; color: hsl(var(--col_gs_white)); background: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)), hsl(var(--col_se_1)); z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-around; align-items: center; } .naviFooter .elm { flex-grow: 1; width: 46px; height: 46px; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: center; } .naviFooter .elm svg { width: 2.2em; height: 2.2em; margin-bottom: 0.6em; } .naviFooter .threebar { display: block; width: 2.2em; height: 2.2em; margin-bottom: 0.7em; cursor: pointer; } .naviFooter .threebar .bar { width: 100%; height: 3px; background: hsl(var(--col_gs_white)); margin-bottom: 4px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .naviFooter .threebar:hover .bar { opacity: 0.8; } .naviFooter .threebar .bar:nth-child(1) { transform-origin: 50% !important; } .naviFooter .threebar .bar:nth-child(2) { transform-origin: 50% !important; } .naviFooter .threebar .bar:nth-child(3) { margin-bottom: 0px; } .naviFooter .threebar.cross .bar:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } .naviFooter .threebar.cross .bar:nth-child(2) { opacity: 0 !important; margin-left: 1000%; } .naviFooter .threebar.cross .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } /* Main Menu */ .mainNavigation { font-size: 1.5rem; display: none; position: fixed; z-index: 1; left: 0px; bottom: 0px; width: 100%; height: 100%; transform: scale(0); transition: transform 250ms ease-out 0s; background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), hsl(var(--col_se_1)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .mainNavigation .inner { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; height: 100%; padding-left: 2.5em; } .mainNavigation .inner > div:nth-child(1) { height: 100%; width: 100%; display: flex; gap: 2rem; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; color: hsl(var(--col_gs_white)); } .mainNavigation .inner > div:nth-child(1) .elm { font-weight: 600; text-transform: uppercase; cursor: pointer; transition: color 0.25s; } .mainNavigation .inner > div:nth-child(1) .lastElm { display: flex; gap:0.5rem; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; font-weight: 700; cursor: pointer; } .mainNavigation .inner > div:nth-child(1) .elm:hover, .mainNavigation .inner > div:nth-child(1) .lastElm .subElm:hover { color: hsl(var(--col_se_4)); } .mainNavigation .inner > div:nth-child(1) .elm:active, .mainNavigation .inner > div:nth-child(1) .lastElm .subElm:active { color: hsl(var(--col_se_5)); } .mainNavigation .inner > div:nth-child(2) { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: nowrap; height: var(--footerNavHeight); color: hsl(var(--col_gs_white)); } .mainNavigation .inner > div:nth-child(2) svg { width: 28px; height: 28px; fill: hsl(var(--col_gs_white)); } /* Footer? */ .footer { width: 100vw; margin-top: 3.75rem; margin-left: -9.66vw; padding-left: 9.66vw; padding-right: 9.66vw; position: relative; z-index: 1; border-top: 1px hsla(var(--col_se_5), 0.75) solid; } .footer .quickLinks { font-size: 0.875rem; padding-top: 3rem; padding-bottom: 3rem; border-radius: 0px; } .footer .quickLinks [data-gees="accordion"] { color: inherit; } .footer .quickLinks [data-gees="accordion"] > .group .body { padding-left: 1em; line-height: 3em; margin-bottom: 0px; } .footer a { color: hsl(var(--col_gs_gray1)); } .footer .lastPart { width: 100vw; font-size: 0.75rem; border-radius: 0px; margin-top: 0.125rem; margin-left: -9.66vw; padding: 2rem 9.66vw; border-top: 1px hsla(var(--col_se_5), 0.75) solid; } .footer .rightLnks { margin-top: 10px; } .footer .rightLnks > label:not(:last-child) { padding-right: 0.3em; border-right: 0.5px hsl(var(--col_se_3)) solid; } /* BigLoadingScreen */ .bigLoadingScreen { position: fixed; left: 0px; top: 0px; width: 100vw; height: 100vh; z-index: 1000; background-color: rgba(0,0,0,0.93); color: hsl(var(--col_gs_white)); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; } .bigLoadingScreen.active { opacity: 1; transition: all 250ms ease-in-out; } .bigLoadingScreen .txt { margin-top: 1rem; font-weight: bold; opacity: 0; height: 0px; overflow: hidden; transition: all 500ms ease-in-out 500ms; } .bigLoadingScreen.active .txt { opacity: 1; height: auto; } .bigLoadingScreen svg { width: 2.5rem; height: 2.5rem; animation: rotate infinite 2s linear; } /* ************************************************************ *************************************************************** *************************************************************** *************************************************************** *************************************************************** *************************************************************** *************************************************************** :: VIEWS & MODALS *************************************************************** *************************************************************** *************************************************************** *************************************************************** *************************************************************** *************************************************************** ************************************************************* */ .viewBox > section { background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), hsl(var(--col_se_1)); color: hsl(var(--col_gs_white)); } .viewBox > section > .body { width: 100%; max-width: 500px; min-height: calc(100vh - var(--footerNavHeight)); margin: 0px auto 5rem auto; padding: 1rem 0px 0px 0px; position: relative; z-index: 1; display: flex; flex-direction: column; /*justify-content: space-between;*/ justify-content: flex-start; text-align: left; } .modalBox > section { background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), hsl(var(--col_se_1)); color: hsl(var(--col_gs_white)); } .modalBox > section > .body { width: 100%; max-width: 500px; margin: 0px auto; padding: 0px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; text-align: center; } /* ************************************************************ *************************************************************** :: HOME *************************************************************** ************************************************************* */ .welcomeAnimation { /*display: none;*/ position: fixed; z-index: 10000; left: 0px; top: 0px; min-width: 100vw; min-height: 100vh; background-color: hsla(var(--col_gs_black),1); } .welcomeAnimation .welcomeTxt { position: fixed; top: calc(50vh - 1.9rem); left: 50%; transform: translate(-50%, -50%); font-size: 8vw; font-weight: bold; white-space: nowrap; color: hsl(var(--col_gs_white)); transition: all 2s; display: flex; justify-content: center; } .welcomeAnimation .welcomeTxt .inner { opacity: 0; width: 0%; display: inline-block; animation-name: welcomeTxtAni; animation-delay: 2s; animation-duration: 2s; animation-direction: normal; animation-iteration-count: 1; animation-timing-function: ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes welcomeTxtAni { 0% { opacity: 0; width: 0px; } 50% { opacity: 0; width: 45%; } 100% { opacity: 1; width: auto; } } section[data-sectionname="home"] { margin-top: 0px !important; } section[data-sectionname="home"] .bg { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } section[data-sectionname="home"] .part1bg video { position: absolute; object-fit: cover; height: 100%; width: 100%; left: 50%; transform: translateX(-50%); } section[data-sectionname="home"] .bg .cover { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; background: rgb(10,19,20); background: linear-gradient(180deg, rgba(10,19,20,0.75) 0%, rgba(10,19,20,0.98) 75%, rgba(10,19,20,1) 100%); } section[data-sectionname="home"] .parts { } section[data-sectionname="home"] .parts .part { min-height: calc(100vh - var(--footerNavHeight)); position: relative; } /* Part 1 */ section[data-sectionname="home"] .part_1 .welcomeTxt { position: absolute; top: calc(50vh - var(--footerNavHeight)); left: 50%; transform: translate(-50%, -50%); font-size: 8vw; font-weight: bold; white-space: nowrap; color: hsl(var(--col_gs_white)); transition: all 2s; display: flex; justify-content: center; } section[data-sectionname="home"] .part_1 .searchFields { display: none; } section[data-sectionname="home"] .part_1 .searchButton { font-size: 1.125rem; position: absolute; bottom: calc(var(--footerNavHeight) + 2rem); left: 50%; width: 100vw; padding: 0rem 2rem 2rem 2rem; border-radius: 2rem; transform: translateX(-50%); } section[data-sectionname="home"] .part_1 .searchButton button { font-weight: bold; } /* Part 2 */ section[data-sectionname="home"] .part_2 { ; } section[data-sectionname="home"] .part_2 .headline { text-align: center; color: hsl(var(--col_gs_white)); font-size: 3rem; font-weight: 600; margin-bottom: 2.68rem; } section[data-sectionname="home"] .part_2 .cnt { margin-top: 20vh; } section[data-sectionname="home"] .part_2 .cnt .cards { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: stretch; gap: 3rem; } section[data-sectionname="home"] .part_2 .cnt .card { text-align: center; font-size: 1.25rem; padding: 2.25rem 1.125rem 3.375rem 1.125rem; border-radius: 1.5rem; color: hsl(var(--col_gs_white)); width: 17vw; min-width: 300px; } section[data-sectionname="home"] .part_2 .cnt .card .iconLine { text-align: center; color: hsl(var(--col_sys_red)); margin-bottom: 0.5rem; } section[data-sectionname="home"] .part_2 .cnt .card .iconLine svg { width: 3rem; height: 3rem; } section[data-sectionname="home"] .part_2 .cnt .card .head { font-size: 2rem; font-weight: bold; margin-bottom: 3rem; } /* Part 3 */ section[data-sectionname="home"] .part_3 { color: hsl(var(--col_gs_white)) } section[data-sectionname="home"] .part_3 .content { margin-top: 20vh; } section[data-sectionname="home"] .part_3 .head { padding: 0rem 3.75rem 3.75rem 3.75rem; font-size: 2rem; font-weight: 600; text-align: center; } section[data-sectionname="home"] .part_3 .list { overflow: hidden; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2rem; } section[data-sectionname="home"] .part_3 .list .card { width: 100%; height: 5em; font-size: 1.375rem; font-weight: bold; text-align: center; border-radius: 0.636rem; position: relative; } section[data-sectionname="home"] .part_3 .list .card .vid { width: 100%; height: 100%; position: relative; transform: scale(1); transition: all 0.25s ease-in-out; position: absolute; } section[data-sectionname="home"] .part_3 .list .card.active .vid { transform: scale(1); } section[data-sectionname="home"] .part_3 .list .card.active .bg .cover { opacity: 0; } section[data-sectionname="home"] .part_3 .list .card.active video { border-color: hsla(var(--col_se_3)); border-style: solid; border-width: 2px; transform: scale(1.1); } section[data-sectionname="home"] .part_3 .list .cards.trans .card { transition: all 0.25s ease-in-out; } section[data-sectionname="home"] .part_3 .list .card .lable { position: absolute; left: 0px; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); z-index: 11; } section[data-sectionname="home"] .part_3 .list .card .bg { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } section[data-sectionname="home"] .part_3 .list .card .bg video { position: absolute; border-radius: 1rem; object-fit: cover; height: 100%; width: 100%; left: 50%; transform: translateX(-50%); } section[data-sectionname="home"] .part_3 .list .card .bg .cover { position: absolute; border-radius: 1rem; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; background: hsla(var(--col_gs_black),0.4); } section[data-sectionname="home"] .part_3 .slider { display: none; } /* More // Scroll Elm */ .more { display: none; } /* ************************************************************ *************************************************************** :: MAILVERIFICATION *************************************************************** ************************************************************* */ section[data-sectionname="mailVerification"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; padding: 0px var(--gap_3); min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: center } section[data-sectionname="mailVerification"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="mailVerification"] .body .entryTxt { text-align: left; } section[data-sectionname="mailVerification"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="mailVerification"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } /* ************************************************************ *************************************************************** :: NEWSLETTER_1 *************************************************************** ************************************************************* */ section[data-sectionname="newsletter_1"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="newsletter_1"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="newsletter_1"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } /* ************************************************************ *************************************************************** :: NEWSLETTER_2 *************************************************************** ************************************************************* */ section[data-sectionname="newsletter_2"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="newsletter_2"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="newsletter_2"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="newsletter_2"] .body .form .switches > .inputblock { border-radius: var(--gap_0_75); height: var(--gap_2_75); margin-top: var(--gap_1); background-color: hsl(var(--col_gs_white)); color: hsl(var(--col_gs_black)); } /* ************************************************************ *************************************************************** :: NEWSLETTER_3 *************************************************************** ************************************************************* */ section[data-sectionname="newsletter_3"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="newsletter_3"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="newsletter_3"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="newsletter_3"] .body .form input[type="text"] { font-size: 2.625rem; width: 100%; background: no-repeat; border: none; color: hsl(var(--col_gs_white)); padding-left: 0.1em; font-family: monospace; text-transform: uppercase; letter-spacing: 0.51em; background-image: url('data:image/svg+xml, Sorry, your browser does not support inline SVG.'); background-position: bottom; background-size: 100% 2px; } /* ************************************************************ *************************************************************** :: NEWSLETTER_4 *************************************************************** ************************************************************* */ section[data-sectionname="newsletter_4"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="newsletter_4"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="newsletter_4"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } /* ************************************************************ *************************************************************** :: CREATEACCOUNT/CREATEACCOUNT *************************************************************** ************************************************************* */ section[data-sectionname="createAccount"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="createAccount"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="createAccount"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="createAccount"] .body .entryTxt > div:nth-child(3) { margin-bottom: var(--gap_0_5); } /* ************************************************************ *************************************************************** :: CREATEACCOUNT/SELECTPASSWORD :: FORGOTPWD/SELECTPASSWORD *************************************************************** ************************************************************* */ section[data-sectionname="selectPassword"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="selectPassword"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="selectPassword"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="selectPassword"] .body .pwdCheckList { list-style-type: none; padding-left: 1rem; text-align: left; width: fit-content; margin-left: auto; margin-right: auto; } section[data-sectionname="selectPassword"] .body .pwdCheckList .active { color: hsl(var(--col_sys_green)); /*list-style-image: url('data:image/svg+xml,');/* Use translate(X, Y) to position the SVG up, down, left, and right */*/ } section[data-sectionname="selectPassword"] .body .pwdCheckList .active::before{ font-size: 1em; line-height: 1em; position: relative; top: 0.2em; left: -0.2em; content: url('data:image/svg+xml,'); color: hsl(var(--col_sys_green)); } /* ************************************************************ *************************************************************** :: CREATEACCOUNT/SELECTPASSIONS :: CONTACTFORM/SELECTPASSIONS *************************************************************** ************************************************************* */ section[data-sectionname="selectPassions"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="selectPassions"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="selectPassions"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="selectPassions"] [data-gees="stepIndicator"] { margin-bottom: 1.125rem; } section[data-sectionname="selectPassions"] .body { color: hsl(var(--col_gs_white)); word-wrap: break-word; } /* ************************************************************ *************************************************************** :: CREATEACCOUNT/VERIFYMAIL :: CONTACTFORM/VERIFYMAIL :: FORGOTPWD/VERIFYMAIL *************************************************************** ************************************************************* */ section[data-sectionname="verifyMail"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="verifyMail"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="verifyMail"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="verifyMail"] .body .form input[type="text"] { font-size: 2.625rem; width: 100%; background: no-repeat; border: none; color: hsl(var(--col_gs_white)); padding-left: 0.2em; font-family: monospace; text-transform: uppercase; letter-spacing: 0.57em; background-image: url('data:image/svg+xml,'); /*background-image: url('https://img.freepik.com/fotos-kostenlos/abstrakter-strukturierter-hintergrund_1258-30484.jpg');*/ background-position: bottom; background-size: 100% 2px; } section[data-sectionname="verifyMail"] [data-gees="stepIndicator"] { margin-bottom: 1.125rem; } section[data-sectionname="verifyMail"] .body { color: hsl(var(--col_gs_white)); word-wrap: break-word; } /* ************************************************************ *************************************************************** :: CREATEACCOUNT/THANKS :: LOGIN/THANKS :: CONTACTFORM/THANKS :: FORGOTPWD/THANKS :: SETPASSWORD/THANKS *************************************************************** ************************************************************* */ section[data-sectionname="thanks"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="thanks"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="thanks"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="thanks"] [data-gees="stepIndicator"] { margin-bottom: 1.125rem; } /* ************************************************************ *************************************************************** :: LOGIN/LOGIN *************************************************************** ************************************************************* */ section[data-sectionname="login"] .body .loginProbs { display: none; color: hsl(var(--col_sys_red)); margin-top: var(--gap_0_5); font-weight: bold; } section[data-sectionname="login"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="login"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="login"] .body .entryTxt > div:nth-child(2) { margin-bottom: 1.75rem; } /* ************************************************************ *************************************************************** :: LOGIN/PASSWORD *************************************************************** ************************************************************* */ section[data-sectionname="password"] { background-color: hsl(var(--col_pr_1)); min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="password"] .bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%), hsl(var(--col_pr_1)); background-size: 100% auto; /*background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);*/ } section[data-sectionname="password"] .body { width: 100%; max-width: 500px; margin: 0px auto; padding: 0px; position: relative; z-index: 1; padding: 0px var(--gap_3); min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } section[data-sectionname="password"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="password"] .body .entryTxt { text-align: left; } section[data-sectionname="password"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="password"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_se_3)); } /* ************************************************************ *************************************************************** :: USERMENU/USERMENU *************************************************************** ************************************************************* */ section[data-sectionname="userMenu"] .menuList { display: none; padding-top: 1rem; } section[data-sectionname="userMenu"] .menuList.active { display: block; } section[data-sectionname="userMenu"] .menuList .group .body { padding: 0.75em 1em; margin-bottom: 0px; } section[data-sectionname="userMenu"] .menuList .group .body > div { margin-bottom: 1rem; color: hsl(var(--col_gs_white)); } section[data-sectionname="userMenu"] .menuList .group .body > div svg { width: 1.5em; height: 1.5em; } section[data-sectionname="userMenu"] .menuList .group .body > div a { color: hsl(var(--col_gs_white)); display: flex; gap: 1em; } section[data-sectionname="userMenu"] .content { display: none; } section[data-sectionname="userMenu"] .content.active { display: block; } section[data-sectionname="userMenu"] .content .header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: absolute; top: 0px; width: 100%; padding-top: 1rem; } section[data-sectionname="userMenu"] .content .header .left .backBtn { display: flex; flex-direction: row; justify-content: center; align-items: center; } section[data-sectionname="userMenu"] .content .header svg { width: 1.25em; height: 1.25em; } /* ************************************************************ *************************************************************** :: USERMENU/PERSONALDATA *************************************************************** ************************************************************* */ section[data-sectionname="personalData"] { /*background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), hsl(var(--col_se_1));*/ min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="personalData"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } section[data-sectionname="personalData"] .blocks { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 3rem; } section[data-sectionname="personalData"] .inputGroup { background: hsla(var(--col_se_5),0.5); padding: 0px; width: 100%; overflow: hidden; } section[data-sectionname="personalData"] .inputGroup .head { padding: 1.5rem; background: hsla(var(--col_se_4),0.5); } section[data-sectionname="personalData"] .inputGroup .cnt { padding: 1.5rem; } section[data-sectionname="personalData"] .inputGroup:nth-child(3) { width: 100%; } section[data-sectionname="personalData"] .inputGroup:nth-child(3) .cnt { display: flex; flex-wrap: wrap; gap: 0.5rem; } section[data-sectionname="personalData"] .inputGroup:nth-child(3) .cnt > div { width: 100%; } /* ************************************************************ *************************************************************** :: USERMENU/SECURITYSETTINGS *************************************************************** ************************************************************* */ section[data-sectionname="securitySettings"] { background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), hsl(var(--col_pr_1)); min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="securitySettings"] .body { width: 100%; max-width: 500px; margin: 0px auto; padding: 0px; position: relative; z-index: 1; padding: 0px var(--gap_3); min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } /* ************************************************************ *************************************************************** :: USERMENU/CHANGEPASSWORD *************************************************************** ************************************************************* */ section[data-sectionname="changePassword"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); max-width: 500px; } section[data-sectionname="changePassword"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } section[data-sectionname="changePassword"] .warningLabel { text-align: left; margin-top: 0.25rem; } section[data-sectionname="changePassword"] .inputGroup { background: hsla(var(--col_se_5),0.5); padding: 0px; width: 100%; overflow: hidden; } section[data-sectionname="changePassword"] .inputGroup .head { padding: 1.5rem; background: hsla(var(--col_se_4),0.5); } section[data-sectionname="changePassword"] .inputGroup .cnt { padding: 1.5rem; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/SUPPLIERPORTAL *************************************************************** ************************************************************* */ section[data-sectionname="supplierPortal"] { background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), hsl(var(--col_pr_1)); min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="supplierPortal"] .body { width: 100%; max-width: 500px; margin: 0px auto; padding: 0px; position: relative; z-index: 1; padding: 0px var(--gap_3); min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/ADDLOCATION* :: SUPPLIERPORTAL/EDITLOCATION* *************************************************************** ************************************************************* */ section[data-sectionname^="addLocation"] { /*max-width: 500px;*/ } section[data-sectionname^="addLocation"] .inputGroup[data-gees="card"], section[data-sectionname^="editLocation"] .inputGroup[data-gees="card"] { background: hsla(var(--col_se_5),0.5); padding: 0px; width: 100%; overflow: hidden; } section[data-sectionname^="addLocation"] .inputGroup[data-gees="card"] .head, section[data-sectionname^="editLocation"] .inputGroup[data-gees="card"] .head { padding: 1.5rem; background: hsla(var(--col_se_4),0.5); } section[data-sectionname^="addLocation"] .inputGroup[data-gees="card"] .cnt, section[data-sectionname^="editLocation"] .inputGroup[data-gees="card"] .cnt { padding: 1.5rem; flex-grow: 1; flex-shrink: 1; } section[data-sectionname^="addLocation"] [data-gees="breadcrumb"], section[data-sectionname^="editLocation"] [data-gees="breadcrumb"] { flex-wrap: nowrap; overflow: scroll; white-space: nowrap; } section[data-sectionname^="addLocation"] .btnBx, section[data-sectionname^="editLocation"] .btnBx { flex-wrap: wrap; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/ADDLOCATION/ADDLOCBASICS *************************************************************** ************************************************************* */ section[data-sectionname="addLocationBasics"] [data-gees="input_text"] .prefix, section[data-sectionname="addLocationBasics"] [data-gees="input_text"] .suffix, section[data-sectionname="addLocationBasics"] [data-gees="input_text"] input { font-size: 0.875rem; } section[data-sectionname="addLocationBasics"] [data-gees="input_text"] .suffix, section[data-sectionname="addLocationBasics"] [data-gees="input_text"] input { opacity: 0.5; } /* ************************************************************ *************************************************************** :: DATASELECTS/MAPCOORDSSELECTION *************************************************************** ************************************************************* */ section[data-sectionname="mapCoordsSelection"] { } section[data-sectionname="mapCoordsSelection"] .inner { position: relative; } section[data-sectionname="mapCoordsSelection"] .body { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; } section[data-sectionname="mapCoordsSelection"] .body .infoBx { width: 100%; margin-bottom: 1rem; } section[data-sectionname="mapCoordsSelection"] .body .searchAdressBx { width: 100%; margin-bottom: 1rem; } section[data-sectionname="mapCoordsSelection"] .mapBx { width: 100%; flex-grow: 1; } section[data-sectionname="mapCoordsSelection"] .mapBx .map { width: 100%; height: 100%; } /* ************************************************************ *************************************************************** :: DATASELECTS/LOCTYPESELECTION *************************************************************** ************************************************************* */ section[data-sectionname="locTypeSelection"] { color: hsl(var(--col_gs_white)); } section[data-sectionname="locTypeSelection"] .inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; margin: 0px auto; } section[data-sectionname="locTypeSelection"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } section[data-sectionname="locTypeSelection"] .inner .body [data-gees="multilist"] { top: 0px; bottom: 0px; left: 0px; right: 0px; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/ADDLOCATION/USERCOUNTSELECTION *************************************************************** ************************************************************* */ section[data-sectionname="userCountSelection"] { color: hsl(var(--col_gs_white)); } section[data-sectionname="userCountSelection"] .inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; margin: 0px auto; } section[data-sectionname="userCountSelection"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/ADDLOCATION/M2SELECTION *************************************************************** ************************************************************* */ section[data-sectionname="m2Selection"] { color: hsl(var(--col_gs_white)); } section[data-sectionname="m2Selection"] .inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; margin: 0px auto; } section[data-sectionname="m2Selection"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/ADDLOCATION/INSERTSTREET *************************************************************** ************************************************************* */ section[data-sectionname="insertStreet"] { color: hsl(var(--col_gs_white)); } section[data-sectionname="insertStreet"] .inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; margin: 0px auto; } section[data-sectionname="insertStreet"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/ADDLOCATION/INSERTZIPCITY *************************************************************** ************************************************************* */ section[data-sectionname="insertZIPCity"] { color: hsl(var(--col_gs_white)); } section[data-sectionname="insertZIPCity"] .inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; margin: 0px auto; } section[data-sectionname="insertZIPCity"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/ADDLOCATION/COUNTRYSELECTION *************************************************************** ************************************************************* */ section[data-sectionname="countrySelection"] { color: hsl(var(--col_gs_white)); } section[data-sectionname="countrySelection"] .inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; margin: 0px auto; } section[data-sectionname="countrySelection"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/ADDLOCATION/ROOMSSELECTION *************************************************************** ************************************************************* */ section[data-sectionname="roomsSelection"] { color: hsl(var(--col_gs_white)); max-height: 100%; justify-content: space-between; } section[data-sectionname="roomsSelection"] .inner { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2rem; flex-grow: 1; flex-shrink: 1; width: 100%; margin: 0px auto; overflow: hidden; } section[data-sectionname="roomsSelection"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } section[data-sectionname="roomsSelection"] .inner .body [data-gees="multilist"] { max-height: calc(100vh - var(--headerNavHeight) - 10rem); } /* ************************************************************ *************************************************************** :: DATASELECTS/VIBESSEELCTION *************************************************************** ************************************************************* */ section[data-sectionname="vibesSelection"] { color: hsl(var(--col_gs_white)); } section[data-sectionname="vibesSelection"] .inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; margin: 0px auto; } section[data-sectionname="vibesSelection"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } section[data-sectionname="vibesSelection"] .inner .body [data-gees="multilist"] { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } /* ************************************************************ *************************************************************** :: DATASELECTS/EVENTTYPESSELECTION *************************************************************** ************************************************************* */ section[data-sectionname="eventTypesSelection"] { color: hsl(var(--col_gs_white)); } section[data-sectionname="eventTypesSelection"] .inner { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 500px; margin: 0px auto; } section[data-sectionname="eventTypesSelection"] .inner .body { width: 100%; margin: 0px auto; position: relative; z-index: 1; flex-grow: 1; } section[data-sectionname="eventTypesSelection"] .inner .body [data-gees="multilist"] { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/MANAGELOCATIONS *************************************************************** ************************************************************* */ section[data-sectionname="manageLocations"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="manageLocations"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; } section[data-sectionname="manageLocations"] .body .buttonGroup .addNewLoc { background-color: hsl(var(--col_pr_3)); } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/DETAILS *************************************************************** ************************************************************* */ section[data-sectionname="editLocationDetails"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="editLocationDetails"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; } section[data-sectionname="editLocationDetails"] .body .buttonGroup { display: flex; flex-direction: column; flex-wrap: wrap; gap: 1rem; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/BASICS *************************************************************** ************************************************************* */ section[data-sectionname="editLocationBasics"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); max-width: 500px; } section[data-sectionname="editLocationBasics"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; } section[data-sectionname="editLocationBasics"] [data-gees="input_block"] [data-gees="input_text"] { border: none; } section[data-sectionname="editLocationBasics"] [data-gees="input_block"] [data-gees="input_text"] input { color: hsl(var(--col_gs_white)); text-align: right; } section[data-sectionname="editLocationBasics"] [data-gees="input_text"] .prefix, section[data-sectionname="editLocationBasics"] [data-gees="input_text"] .suffix, section[data-sectionname="editLocationBasics"] [data-gees="input_text"] input { font-size: 0.875rem; } section[data-sectionname="editLocationBasics"] [data-gees="input_text"] .suffix, section[data-sectionname="editLocationBasics"] [data-gees="input_text"] input { opacity: 0.5; color: hsl(var(--col_gs_white)); } section[data-sectionname="editLocationBasics"] [data-gees="input_block"] [data-gees="input_text"]:not(input) { padding-right: 0px; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/ADRESS *************************************************************** ************************************************************* */ section[data-sectionname="editLocationAdress"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); max-width: 500px; } section[data-sectionname="editLocationAdress"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/ROOMS *************************************************************** ************************************************************* */ section[data-sectionname="editLocationRooms"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); max-width: 500px; } section[data-sectionname="editLocationRooms"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; } section[data-sectionname="editLocationRooms"] [data-gees="input_group"] [data-gees="input_block"] .add svg { color: hsl(var(--col_sys_green)); } section[data-sectionname="editLocationRooms"] [data-gees="input_group"] [data-gees="input_block"] .remove svg { color: hsl(var(--col_sys_red)); } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/EQUIPMENT *************************************************************** ************************************************************* */ section[data-sectionname="editLocationEquipment"] { height: calc(var(--windowHeight) - var(--footerNavHeight) - var(--headerNavHeight) - 1rem); color: hsl(var(--col_gs_white)); max-width: 500px; } section[data-sectionname="editLocationEquipment"] .container { height: 100%; display: flex; flex-direction: column; } section[data-sectionname="editLocationEquipment"] .container > .head h4 { display: none; color: hsl(var(--col_gs_white)); max-width: 500px; } section[data-sectionname="editLocationEquipment"] .container [data-gees="multilist"] { height: 100%; } section[data-sectionname="editLocationEquipment"] .container .btnBx { padding: 1rem 0rem; flex-wrap: nowrap; } section[data-sectionname="editLocationEquipment"] [data-gees="multilist"] .sidyBySide { display: flex; align-items: center; justify-content: space-between; } section[data-sectionname="editLocationEquipment"] [data-gees="multilist"] .addXtra { display: flex; opacity: 0; justify-content: flex-end; align-items: center; flex-wrap: nowrap; flex-direction: row; width: 20%; height: 100%; margin-right: -1rem; } section[data-sectionname="editLocationEquipment"] [data-gees="multilist"] .addXtra > svg { width: 1rem; height: 1rem; color: hsl(var(--col_pr_3)); } section[data-sectionname="editLocationEquipment"] [data-gees="multilist"] .addXtra.visible { opacity: 1; } section[data-sectionname="editLocationEquipment"] [data-gees="multilist"] .addXtra > svg { margin-right: 1rem; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/EQUIPMENTEXTRA *************************************************************** ************************************************************* */ section[data-sectionname="editLocationEquipmentExtra"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); max-width: 500px; } section[data-sectionname="editLocationEquipmentExtra"] .body { width: 100%; max-width: 500px; margin: 0px auto; padding: 0px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/IMAGES :: SUPPLIERPORTAL/ADDLOCATION/ADDLOC_IMAGES *************************************************************** ************************************************************* */ section[data-sectionname="editLocationImages"], section[data-sectionname="addLocationImages"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="editLocationImages"] .body, section[data-sectionname="addLocationImages"] .body { width: 100%; margin: 0px auto; padding: 0px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; } section[data-sectionname="editLocationImages"] .imagesList, section[data-sectionname="addLocationImages"] .imagesList { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; flex-direction: row; gap: 1rem; } /* Left Row */ section[data-sectionname="editLocationImages"] .imagesList .imgElm, section[data-sectionname="addLocationImages"] .imagesList .imgElm { width: calc(50% - 0.5rem); border: 1px hsl(var(--col_se_5)) solid; height: 100px; border-radius: 0.25rem; background-size: cover; background-position: center; position: relative; overflow: hidden; cursor: move; transition: all 100ms ease-in-out; } section[data-sectionname="editLocationImages"] .imagesList .imgElm.dropHover, section[data-sectionname="addLocationImages"] .imagesList .imgElm.dropHover { transform: scale(0.8); transform-origin: center; } section[data-sectionname="editLocationImages"] .imagesList .imgElm.uploading:after, section[data-sectionname="addLocationImages"] .imagesList .imgElm.uploading:after { content: ' '; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: rgb(0,0,0); opacity: 0.5; } section[data-sectionname="editLocationImages"] .imagesList .imgElm.imgBack, section[data-sectionname="addLocationImages"] .imagesList .imgElm.imgBack { background-color: hsl(var(--col_se_3)); padding: 1rem; font-size: 0.875rem; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; } section[data-sectionname="editLocationImages"] .imagesList .imgElm.imgBack:hover, section[data-sectionname="addLocationImages"] .imagesList .imgElm.imgBack:hover { background-color: hsl(var(--col_pr_3)); } section[data-sectionname="editLocationImages"] .imagesList .imgBack svg, section[data-sectionname="addLocationImages"] .imagesList .imgBack svg { fill: hsl(var(--col_sys_green)); margin-bottom: 0.5rem; } section[data-sectionname="editLocationImages"] .imagesList .imgBack:hover svg, section[data-sectionname="addLocationImages"] .imagesList .imgBack:hover svg { fill: hsl(var(--col_gs_white)); } section[data-sectionname="editLocationImages"] .imagesList .imgElm .upload, section[data-sectionname="addLocationImages"] .imagesList .imgElm .upload { position: absolute; opacity: 1; background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; left: 0px; top: 0px; display: flex; align-items: center; justify-content: center; } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/SELECTIMAGES *************************************************************** ************************************************************* */ section[data-sectionname="editLocationSelectImages"] { background-color: hsl(var(--col_pr_5)); color: hsl(var(--col_gs_white)); margin-top: 0rem; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; flex-direction: row; } section[data-sectionname="editLocationSelectImages"] .header { background: transparent; } section[data-sectionname="editLocationSelectImages"] .buttonGroup { text-align: center; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 1rem; } section[data-sectionname="editLocationSelectImages"] .buttonGroup button { justify-content: center; } section[data-sectionname="editLocationSelectImages"] button[data-action="abort"] { background-color: hsl(var(--col_gs_gray4)); } /* ************************************************************ *************************************************************** :: SUPPLIERPORTAL/MANAGELOCATIONS/EDITLOCATION/DELETEIMAGE *************************************************************** ************************************************************* */ section[data-sectionname="editLocationDeleteImage"] { color: hsl(var(--col_gs_white)); margin-top: 0rem; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; flex-direction: row; } section[data-sectionname="editLocationDeleteImage"] .header { background: transparent; } section[data-sectionname="editLocationDeleteImage"] button[data-action="abort"] { background-color: hsl(var(--col_gs_gray4)); } /* ************************************************************ *************************************************************** :: FORGOTPWD/FORGOTPWD *************************************************************** ************************************************************* */ section[data-sectionname="forgotPwd"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="forgotPwd"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="forgotPwd"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="forgotPwd"] .body .entryTxt > div:nth-child(3) { margin-bottom: 1.75rem; } /* ************************************************************ *************************************************************** :: CONTACTFORM/CONTACTFORM *************************************************************** ************************************************************* */ section[data-sectionname="contactForm"] .body > div:nth-child(2) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="contactForm"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="contactForm"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="contactForm"] [data-gees="stepIndicator"] { margin-bottom: 1.125rem; } section[data-sectionname="contactForm"] .body { color: hsl(var(--col_gs_white)); word-wrap: break-word; } /* ************************************************************ *************************************************************** :: WHISTLEBLOWER/NOTICE *************************************************************** ************************************************************* */ section[data-sectionname="whistleblowerNotice"] .body > div:nth-child(4) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="whistleblowerNotice"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="whistleblowerNotice"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="whistleblowerNotice"] [data-gees="stepIndicator"] { margin-bottom: 1.125rem; } section[data-sectionname="whistleblowerNotice"] .body { color: hsl(var(--col_gs_white)); word-wrap: break-word; } /* ************************************************************ *************************************************************** :: WHISTLEBLOWER/CONTACTDATA *************************************************************** ************************************************************* */ section[data-sectionname="whistleblowerContactData"] .body > div:nth-child(4) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="whistleblowerContactData"] [data-gees="stepIndicator"] { margin-bottom: 1.125rem; } section[data-sectionname="whistleblowerContactData"] .body { color: hsl(var(--col_gs_white)); word-wrap: break-word; } section[data-sectionname="whistleblowerContactData"] .body .entryTxt { flex-grow: 1; } /* ************************************************************ *************************************************************** :: WHISTLEBLOWER/THX *************************************************************** ************************************************************* */ section[data-sectionname="whistleblowerThx"] .body > div:nth-child(4) { display: flex; flex-grow: 1; flex-direction: column; justify-content: center; } section[data-sectionname="whistleblowerThx"] [data-gees="stepIndicator"] { margin-bottom: 1.125rem; } section[data-sectionname="whistleblowerThx"] .body { color: hsl(var(--col_gs_white)); word-wrap: break-word; } section[data-sectionname="whistleblowerThx"] .body .entryTxt > div:nth-child(1) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; } section[data-sectionname="whistleblowerThx"] .body .entryTxt > div:nth-child(2) { font-size: 2.625rem; font-weight: 900; line-height: 100%; text-transform: uppercase; color: hsl(var(--col_pr_3)); } section[data-sectionname="whistleblowerThx"] .body .entryTxt2 { flex-grow: 1; } /* ************************************************************ *************************************************************** :: QUICKSEARCH *************************************************************** ************************************************************* */ section[data-sectionname="quicksearch"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="quicksearch"] .bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%), hsl(var(--col_pr_1)); background-size: 100% auto; } section[data-sectionname="quicksearch"] .body { width: 100%; max-width: 500px; margin: 0px auto 0px auto; padding: 0px; position: relative; z-index: 1; padding: 0px var(--gap_3); min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } section[data-sectionname="quicksearch"] .lastSearch { display: none; } section[data-sectionname="quicksearch"] .lastSearch .headline { margin-top: var(--gap_0_75); font-size: var(--gap_0_75); display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: center; } section[data-sectionname="quicksearch"] .lastSearch .headline > div { display: flex; align-items: flex-end; flex-direction: row; } section[data-sectionname="quicksearch"] .lastSearch .headline svg { width: var(--gap_0_75); height: var(--gap_0_75); margin-left: var(--gap_0_25); } section[data-sectionname="quicksearch"] .lastSearch .list { margin-top: var(--gap_0_5); } section[data-sectionname="quicksearch"] .lastSearch .list .elm { margin-top: var(--gap_1); background-color: hsl(var(--col_pr_1)); border-radius: 1rem; padding: var(--gap_1); display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: center; } section[data-sectionname="quicksearch"] .lastSearch .list .elm svg { width: 1rem; } section[data-sectionname="quicksearch"] .lastSearch .list .elmTmp { display: none; } section[data-sectionname="quicksearch"] .lastSearch .list .elm .text > div:nth-child(1) { font-weight: bold; } section[data-sectionname="quicksearch"] .lastSearch .list .elm .text > div:nth-child(2) { font-weight: normal; font-size: 0.75rem; } section[data-sectionname="quicksearch"] .lastSearch .afterList { font-weight: normal; font-size: 0.75rem; margin-top: var(--gap_0_25); padding: 1rem 0px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; } section[data-sectionname="quicksearch"] .lastSearch .afterList svg { margin-left: 0.25rem; width: 0.75rem; height: 0.75rem; } section[data-sectionname="quicksearch"] .popularCats { margin-top: var(--gap_2); } section[data-sectionname="quicksearch"] .popularCats .elms .elm { margin-top: var(--gap_1); background-color: hsl(var(--col_pr_1)); border-radius: 1rem; display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; align-items: center; } section[data-sectionname="quicksearch"] .popularCats .elms .elm .imgBox { width: 40%; overflow: hidden; display: flex; padding: var(--gap_0_5); } section[data-sectionname="quicksearch"] .popularCats .elms .elm .imgBox img { width: 100%; border-radius: 1rem; aspect-ratio: 16/12; } section[data-sectionname="quicksearch"] .popularCats .elms .elm .text { flex-grow: 1; } section[data-sectionname="quicksearch"] .popularCats .elms .elm .text > div:nth-child(1) { font-weight: bold; } section[data-sectionname="quicksearch"] .popularCats .elms .elm .text > div:nth-child(2) { font-weight: normal; font-size: 0.75rem; } section[data-sectionname="quicksearch"] .popularCats .elms .elm .ico svg { width: 1rem; margin-right: 1rem; } /* ************************************************************ *************************************************************** :: LOCATIONSEARCHRESULTS *************************************************************** ************************************************************ */ section[data-sectionname="locationsearchresults"] .mainArea { display: flex; position: relative; } section[data-sectionname="locationsearchresults"] .filterArea, section[data-sectionname="locationsearchresults"] .sortingArea { display: none; overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } section[data-sectionname="locationsearchresults"] .filterArea.active, section[data-sectionname="locationsearchresults"] .sortingArea.active { position: fixed; left: 0px; top: 0px; width: 100%; height: 100vh; z-index: 1000; display: block; padding-left: 9.66vw; padding-right: 9.66vw; padding-bottom: 30vw; /*padding-top: var(--headerNavHeight); padding-bottom: calc(var(--footerNavHeight) + 2rem);*/ background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), hsl(var(--col_se_1)); } section[data-sectionname="locationsearchresults"] .filterArea::-webkit-scrollbar, section[data-sectionname="locationsearchresults"] .sortingArea::-webkit-scrollbar { display: none; } section[data-sectionname="locationsearchresults"] .filterArea .headBlock, section[data-sectionname="locationsearchresults"] .sortingArea .headBlock { position: sticky; top: 0px; z-index: 10001; width: calc(100% + 19.32vw); margin-left: -9.66vw; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 0px 0.5rem; height: var(--headerNavHeight); background: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)), hsl(var(--col_se_1)); } section[data-sectionname="locationsearchresults"] .filterArea .headBlock .left, section[data-sectionname="locationsearchresults"] .filterArea .headBlock .right, section[data-sectionname="locationsearchresults"] .sortingArea .headBlock .left, section[data-sectionname="locationsearchresults"] .sortingArea .headBlock .right { width: 30%; } section[data-sectionname="locationsearchresults"] .filterArea .headBlock .right, section[data-sectionname="locationsearchresults"] .sortingArea .headBlock .right { display: flex; justify-content: flex-end; } section[data-sectionname="locationsearchresults"] .filterArea .headBlock .middle, section[data-sectionname="locationsearchresults"] .sortingArea .headBlock .middle { flex-grow: 1; text-align: center; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm, section[data-sectionname="locationsearchresults"] .sortingArea .filterElms > .elm { margin-top: 1.25rem; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.5em; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm > .head, section[data-sectionname="locationsearchresults"] .sortingArea .filterElms > .elm > .head { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm .headlineLabel, section[data-sectionname="locationsearchresults"] .sortingArea .filterElms > .elm .headlineLabel { font-weight: bold; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm:not(:first-child), section[data-sectionname="locationsearchresults"] .sortingArea .filterElms > .elm:not(:first-child) { padding-top: 2rem; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm.hasTopBorder, section[data-sectionname="locationsearchresults"] .sortingArea .filterElms > .elm.hasTopBorder { border-top: 1px hsl(var(--col_se_5)) solid; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm .map .hoverMapLayer:after { display: none; content: ''; background-image: url('data:image/svg+xml,'); background-position: center; background-size: 10%; cursor: pointer; background-repeat: no-repeat; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); background-color: rgba(0,0,0,0.75); /*pointer-events: none;*/ } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm .map:not(.fullscreen):hover .hoverMapLayer:after { display: block; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm .map { height: 150px; border-radius: 0.75rem; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm .map .closeMapFullscreen { display: none; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm .map.fullscreen { overflow: hidden; border-radius: 0rem; position: fixed !important; transform: translateZ(0); left: 0px; top: var(--headerNavHeight); width: 100%; height: calc(100% - var(--headerNavHeight)); z-index: 10000; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm .map.fullscreen .closeMapFullscreen { display: block; cursor: pointer; background-color: rgb(255,255,255,1); border-radius: 1.25rem; padding: 0.5rem; color: white; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: center; background-size: 100%; position: absolute; width: 2.5rem; height: 2.5rem; right: 1rem; top: 1rem; transition: transform 250ms ease-in-out; } section[data-sectionname="locationsearchresults"] .filterArea .filterElms > .elm .map.fullscreen .closeMapFullscreen:hover { transform: rotate(90deg); } section[data-sectionname="locationsearchresults"] .filterArea .sideBySide, section[data-sectionname="locationsearchresults"] .sortingArea .sideBySide { flex-direction: row !important; align-items: center !important; } section[data-sectionname="locationsearchresults"] .filterArea .max_w_4 input, section[data-sectionname="locationsearchresults"] .sortingArea .max_w_4 input { max-width: 2em; } section[data-sectionname="locationsearchresults"] .filterArea .listSelection:not(:empty), section[data-sectionname="locationsearchresults"] .sortingArea .listSelection:not(:empty) { padding: 0.5rem 0rem; } section[data-sectionname="locationsearchresults"] .filterArea .listSelection > .elm, section[data-sectionname="locationsearchresults"] .sortingArea .listSelection > .elm { cursor: pointer; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 0.5rem; } section[data-sectionname="locationsearchresults"] .filterArea .listSelection > .elm:not(:last-child), section[data-sectionname="locationsearchresults"] .sortingArea .listSelection > .elm:not(:last-child) { margin-bottom: 0.5rem; } section[data-sectionname="locationsearchresults"] .filterArea .listSelection > .elm .icon, section[data-sectionname="locationsearchresults"] .sortingArea .listSelection > .elm .icon { background-color: hsl(var(--col_sys_red)); } section[data-sectionname="locationsearchresults"] .results { width: 100%; } section[data-sectionname="locationsearchresults"] .results .headline { display: none; } section[data-sectionname="locationsearchresults"] .results .filterLine { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 0.5em; position: sticky; top: -1rem; z-index: 9; padding: 1rem 0rem; background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), hsl(var(--col_se_1)); transition: top 250ms 0s ease-in-out; } section[data-sectionname="locationsearchresults"] .results .filterLine.visible { top: calc(var(--headerNavHeight) - 1px); } section[data-sectionname="locationsearchresults"] .results .filterLine::-webkit-scrollbar { display: none; } section[data-sectionname="locationsearchresults"] .results .filterLine .pills { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0.5em; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; } section[data-sectionname="locationsearchresults"] .results .filterLine [data-gees="pill"] .icon.cross { cursor: pointer; background: hsl(var(--col_sys_red)); } section[data-sectionname="locationsearchresults"] .results .btnBox { margin-top: 1rem; display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(300px, 1fr)); } section[data-sectionname="locationsearchresults"] .sorting_btn_global { display: none; } section[data-sectionname="locationsearchresults"] .cardSearchArea { border: 1px red solid; background-color: rgba(0,0,0,0.85); position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; padding: calc(var(--headerNavHeight) + 3rem) 3rem 3rem 3rem; } section[data-sectionname="locationsearchresults"] .cardSearchArea .adrSearchBx { } section[data-sectionname="locationsearchresults"] .cardSearchArea .mapBx { } .mapMarkerInfoWindow:hover { opacity: 0.85; } .mapMarkerInfoWindow { cursor: pointer; padding: 0px; margin: 0px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } .mapMarkerInfoWindow .title { padding: 0.25em; background-color: black; color: hsl(var(--col_gs_white)); font-weight: bold; } .mapMarkerInfoWindow .img { display: none; flex-grow: 1; height: 5em; background-repeat: no-repeat; background-size: cover; background-position: center; } .map.fullscreen .mapMarkerInfoWindow .title { background-color: white; color: hsl(var(--col_gs_black)); } .map.fullscreen .mapMarkerInfoWindow { max-width: 200px; aspect-ratio: 3 / 4; } .map.fullscreen .mapMarkerInfoWindow .img { display: block; } .mapMarkerInfoWindow .foot { padding: 0.25em; color: hsl(var(--col_gs_black)); font-weight: normal; display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; } .gm-style-iw.gm-style-iw-c { padding: 0px; } .gm-style-iw-chr { display: none; } .gm-style-iw-d { padding: 0 !important; margin: 0 !important; } .gm-ui-hover-effect { display: none !important; /* Versteckt das Schließen-Kreuz */ } /* ************************************************************ *************************************************************** :: SEARCH *************************************************************** ************************************************************ */ section[data-sectionname="search"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="search"] .bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%), hsl(var(--col_pr_1)); background-size: 100% auto; } section[data-sectionname="search"] .body { width: 100%; max-width: 500px; margin: 0px auto 0px auto; padding: 0px; position: relative; z-index: 1; padding: 0px var(--gap_3); min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } /* ************************************************************ *************************************************************** :: SEARCHFILTER *************************************************************** ************************************************************* */ section[data-sectionname="searchfilter"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="searchfilter"] .bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%), hsl(var(--col_pr_1)); background-size: 100% auto; } section[data-sectionname="searchfilter"] .body { width: 100%; max-width: 500px; margin: 0px auto 0px auto; padding: 0px; position: relative; z-index: 1; padding: 0px var(--gap_3); min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } section[data-sectionname="searchfilter"] .filters { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; } section[data-sectionname="searchfilter"] .filters hr { width: 100%; height: 1px; border: none; margin: var(--gap_1) 0px; background-color: hsl(var(--col_pr_2)); } section[data-sectionname="searchfilter"] .filters .elm { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } section[data-sectionname="searchfilter"] .filters .elm .headlineLabel { font-size: 1rem; display: block; font-weight: bold; margin-bottom: var(--gap_1_5); } section[data-sectionname="searchfilter"] .filters .elm[data-filtertype="input_range"] .vals { width: 100%; margin-top: var(--gap_1); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between } section[data-sectionname="searchfilter"] .filters .elm[data-filtertype="switch"] { width: 100%; font-weight: bold; display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: space-between } section[data-sectionname="searchfilter"] .flyButton { position: fixed; width: calc(100% - 6rem); bottom: 1rem; z-index: 999; } /* ************************************************************ *************************************************************** *************************************************************** :: LASTSEARCHES *************************************************************** *************************************************************** ************************************************************* */ section[data-sectionname="lastSearches"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); } section[data-sectionname="lastSearches"] .bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%), hsl(var(--col_pr_1)); background-size: 100% auto; } section[data-sectionname="lastSearches"] .body { width: 100%; max-width: 500px; margin: 0px auto 0px auto; padding: 0px; position: relative; z-index: 1; padding: 0px var(--gap_3); min-height: calc(var(--windowHeight) - var(--headerNavHeight)); display: flex; flex-direction: column; justify-content: space-between; } [data-sectionname="lastSearches"] .lastSearch .headline { margin-top: var(--gap_0_75); font-size: var(--gap_0_75); display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: center; } [data-sectionname="lastSearches"] .lastSearch .headline > div { display: flex; align-items: flex-end; flex-direction: row; } [data-sectionname="lastSearches"] .lastSearch .headline svg { width: var(--gap_0_75); height: var(--gap_0_75); margin-left: var(--gap_0_25); } [data-sectionname="lastSearches"] .lastSearch .list { margin-top: var(--gap_0_5); } [data-sectionname="lastSearches"] .lastSearch .list .elm { margin-top: var(--gap_1); background-color: hsl(var(--col_pr_1)); border-radius: 1rem; padding: var(--gap_1); display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: center; } [data-sectionname="lastSearches"] .lastSearch .list .elm svg { width: 1rem; } [data-sectionname="lastSearches"] .lastSearch .list .elmTmp { display: none; } [data-sectionname="lastSearches"] .lastSearch .list .elm .text > div:nth-child(1) { font-weight: bold; } [data-sectionname="lastSearches"] .lastSearch .list .elm .text > div:nth-child(2) { font-weight: normal; font-size: 0.75rem; } [data-sectionname="lastSearches"] .lastSearch .afterList { font-weight: normal; font-size: 0.75rem; margin-top: var(--gap_0_25); padding: 1rem 0px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; } [data-sectionname="lastSearches"] .lastSearch .afterList svg { margin-left: 0.25rem; width: 0.75rem; height: 0.75rem; } /* ************************************************************ *************************************************************** :: LOCATION :: LOCATIONPREVIEW *************************************************************** ************************************************************* */ section[data-sectionname="location"], section[data-sectionname="locationPreview"] { min-height: calc(var(--windowHeight) - var(--footerNavHeight) + 1px); color: hsl(var(--col_gs_white)); padding-bottom: 6rem; } section[data-sectionname="location"] .bg, section[data-sectionname="locationPreview"] .bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%), hsl(var(--col_pr_1)); background-size: 100% auto; } section[data-sectionname="location"] .container, section[data-sectionname="locationPreview"] .container { /*padding: 0rem 2rem 8rem 2rem;*/ } section[data-sectionname="location"] .part1, section[data-sectionname="locationPreview"] .part1 { ; } section[data-sectionname="location"] .bookNowBtLine, section[data-sectionname="locationPreview"] .bookNowBtLine { position: sticky; left: 0px; width: calc(100% - 2rem); padding: 0px; margin: 0px 1rem 1rem 1rem; bottom: calc(var(--footerNavHeight)); margin-top: 2rem; display: flex; justify-content: center; } section[data-sectionname="locationPreview"] .closeTabBtn { position: sticky; left: 0px; width: calc(100% - 2rem); padding: 0px; margin: 0px 1rem 1rem 1rem; bottom: calc(var(--footerNavHeight) + 1rem); margin-top: 2rem; display: flex; justify-content: center; } section[data-sectionname="location"] .bookNowBtLine button, section[data-sectionname="locationPreview"] .bookNowBtLine button { width: 100%; margin-bottom: 1rem; } section[data-sectionname="location"] .topImageBox, section[data-sectionname="locationPreview"] .topImageBox { height: calc(var(--windowHeight)*0.6); margin-top: 0rem; margin-left: -9.66vw; width: calc(100% + 19.32vw); position: relative; } section[data-sectionname="location"] .topImageBox .imgBx, section[data-sectionname="locationPreview"] .topImageBox .imgBx { position: relative; left: 0px; border-radius: 0; top: 0px; width: 100%; height: 100%; z-index: 0; display: flex; justify-content: flex-start; align-items: center; overflow: hidden } section[data-sectionname="location"] .topImageBox .imgBx img, section[data-sectionname="locationPreview"] .topImageBox .imgBx img { flex-shrink: 0; width: 100%; height: 100%; object-fit: cover; } section[data-sectionname="location"] .topImageBox .imgBx.trans img, section[data-sectionname="locationPreview"] .topImageBox .imgBx.trans img { transition: all 0.25s ease-in-out; } section[data-sectionname="location"] .topImageBox .headLine, section[data-sectionname="locationPreview"] .topImageBox .headLine { position: absolute; left: 0px; top: 0px; width: 100%; padding: 0.75rem; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; color: hsl(var(--col_gs_black)); } section[data-sectionname="location"] .topImageBox .headLine [data-gees="pill"], section[data-sectionname="locationPreview"] .topImageBox .headLine [data-gees="pill"] { background-color: hsla(var(--col_gs_white),0.5) } section[data-sectionname="location"] .topImageBox .headLine [data-gees="pill"] > div, section[data-sectionname="locationPreview"] .topImageBox .headLine [data-gees="pill"] > div { transition: all 250ms ease-in-out; cursor: pointer; } section[data-sectionname="location"] .topImageBox .headLine [data-gees="pill"] > div:hover, section[data-sectionname="locationPreview"] .topImageBox .headLine [data-gees="pill"] > div:hover { transform: scale(1.25); } section[data-sectionname="location"] .topImageBox .headLine [data-gees="pill"] svg:not(:first-child), section[data-sectionname="locationPreview"] .topImageBox .headLine [data-gees="pill"] svg:not(:first-child) { margin-left: 10px; } section[data-sectionname="location"] .topImageBox .headLine .left, section[data-sectionname="locationPreview"] .topImageBox .headLine .left { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } section[data-sectionname="location"] .topImageBox .headLine .left [data-gees="pill"], section[data-sectionname="locationPreview"] .topImageBox .headLine .left [data-gees="pill"] { display: flex; flex-direction: column; height: auto; gap: 0.5em; } section[data-sectionname="location"] .topImageBox .headLine .left [data-gees="pill"] svg, section[data-sectionname="locationPreview"] .topImageBox .headLine .left [data-gees="pill"] svg { width: 2em; height: 2em; } section[data-sectionname="location"] .topImageBox .headLine .left > div:not(:last-child), section[data-sectionname="locationPreview"] .topImageBox .headLine .left > div:not(:last-child) { margin-right: 0.5rem; } section[data-sectionname="location"] .topImageBox .headLine .right, section[data-sectionname="locationPreview"] .topImageBox .headLine .right { font-size: 1em; font-weight: normal; } section[data-sectionname="location"] .topImageBox .headLine .right [data-gees="pill"], section[data-sectionname="locationPreview"] .topImageBox .headLine .right [data-gees="pill"] { display: flex; flex-direction: row; height: auto; gap: 0.5em; } section[data-sectionname="location"] .topImageBox .headLine .right [data-gees="pill"] label, section[data-sectionname="locationPreview"] .topImageBox .headLine .right [data-gees="pill"] label { display: flex; flex-direction: row; align-items: center; } section[data-sectionname="location"] .topImageBox .headLine .right [data-gees="pill"] svg:not(:first-child), section[data-sectionname="locationPreview"] .topImageBox .headLine .right [data-gees="pill"] svg:not(:first-child) { margin-left: 0.5em; } section[data-sectionname="location"] .topImageBox .footLine, section[data-sectionname="locationPreview"] .topImageBox .footLine { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.75rem; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; } section[data-sectionname="location"] .topImageBox .footLine .elm, section[data-sectionname="locationPreview"] .topImageBox .footLine .elm { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.625rem; } section[data-sectionname="location"] .topImageBox .imgBx .shadowsBx, section[data-sectionname="locationPreview"] .topImageBox .imgBx .shadowsBx { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; } section[data-sectionname="location"] .topImageBox .imgBx .shadowsBx > div, section[data-sectionname="locationPreview"] .topImageBox .imgBx .shadowsBx > div { height: 33%; background: none; } section[data-sectionname="location"] .topImageBox .imgBx .shadowsBx > div:first-child, section[data-sectionname="locationPreview"] .topImageBox .imgBx .shadowsBx > div:first-child { background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); } section[data-sectionname="location"] .topImageBox .imgBx .shadowsBx > div:last-child, section[data-sectionname="locationPreview"] .topImageBox .imgBx .shadowsBx > div:last-child { background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); } section[data-sectionname="location"] .topImageBox.fullscreen, section[data-sectionname="locationPreview"] .topImageBox.fullscreen { position: fixed; left: 0px; top: 0px; width: 100%; max-width: 100%; min-width: 100%; height: 100%; margin:0px; z-index: 1001; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: hsla(var(--col_gs_black),1); display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } section[data-sectionname="location"] .topImageBox.fullscreen .headLine, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .headLine { opacity: 0; } section[data-sectionname="location"] .topImageBox.fullscreen .imgBx, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .imgBx { margin: 5rem auto; flex-grow: 1; } section[data-sectionname="location"] .topImageBox.fullscreen .footLine, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .footLine { display: none; } section[data-sectionname="location"] .topImageBox.fullscreen .footSliderIcons, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .footSliderIcons { position: absolute; bottom: 1.25rem; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0.75em; } section[data-sectionname="location"] .topImageBox.fullscreen .footSliderIcons > div, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .footSliderIcons > div { width: 2.25rem; height: 2.25rem; background-color: hsl(var(--col_gs_white)); border-radius: 50%; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; } section[data-sectionname="location"] .topImageBox.fullscreen .footSliderIcons > div .icon, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .footSliderIcons > div .icon { width: 1.25rem; height: 1.25rem; background-color: hsl(var(--col_gs_black)); } section[data-sectionname="location"] .topImageBox.fullscreen .closer, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .closer { position: absolute; z-index: 1000; width: 3rem; height: 3rem; right: 0px; top: 0px; display: flex; cursor: pointer; justify-content: center; align-items: center; } section[data-sectionname="location"] .topImageBox.fullscreen .closer .icon, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .closer .icon { background-color: hsl(var(--col_gs_white)); } section[data-sectionname="location"] .topImageBox.fullscreen .imgBx img, section[data-sectionname="locationPreview"] .topImageBox.fullscreen .imgBx img { object-fit: contain; } section[data-sectionname="location"] .addToFavs .onList, section[data-sectionname="locationPreview"] .addToFavs .onList { color: hsl(var(--col_sys_red)); } section[data-sectionname="location"] .mainInfoBox .line0, section[data-sectionname="locationPreview"] .mainInfoBox .line0 { display: flex; margin-top: 1rem; flex-direction: row; justify-content: space-between; align-items: flex-start; } section[data-sectionname="location"] .mainInfoBox .line0 .nameAdr, section[data-sectionname="locationPreview"] .mainInfoBox .line0 .nameAdr { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } section[data-sectionname="location"] .mainInfoBox .line0 .nameAdr .name, section[data-sectionname="locationPreview"] .mainInfoBox .line0 .nameAdr .name { font-size: 1.5rem; font-weight: bold; } section[data-sectionname="location"] .mainInfoBox .line0 .price, section[data-sectionname="locationPreview"] .mainInfoBox .line0 .price { text-align: right; } section[data-sectionname="location"] .mainInfoBox .line0 .price > div:nth-child(1), section[data-sectionname="locationPreview"] .mainInfoBox .line0 .price > div:nth-child(1) { font-size: 1.5rem; font-weight: bold; } section[data-sectionname="location"] .mainInfoBox .line0 .price > div:nth-child(2), section[data-sectionname="locationPreview"] .mainInfoBox .line0 .price > div:nth-child(2) { font-size: 1rem; font-weight: normal; } section[data-sectionname="location"] .mainInfoBox .line0 .price > div:nth-child(3), section[data-sectionname="locationPreview"] .mainInfoBox .line0 .price > div:nth-child(3) { font-size: 0.75rem; font-weight: normal; } section[data-sectionname="location"] .mainInfoBox .line1, section[data-sectionname="locationPreview"] .mainInfoBox .line1 { padding: 1rem 0px 1rem 0px; display: flex; font-size: 0.75rem; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } section[data-sectionname="location"] .mainInfoBox .line1 > div, section[data-sectionname="locationPreview"] .mainInfoBox .line1 > div { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; flex-direction: row; } section[data-sectionname="location"] .mainInfoBox .line1 > div:not(:last-child), section[data-sectionname="locationPreview"] .mainInfoBox .line1 > div:not(:last-child) { margin-right: 1.5rem; } section[data-sectionname="location"] .mainInfoBox .line1 svg, section[data-sectionname="locationPreview"] .mainInfoBox .line1 svg { color: hsl(var(--col_se_3)); margin-right: 0.3125rem; } section[data-sectionname="location"] .locationInfoBox .line2, section[data-sectionname="locationPreview"] .locationInfoBox .line2 { margin-top: 1rem; } section[data-sectionname="location"] .locationInfoBox .bubbleInfosLine, section[data-sectionname="locationPreview"] .locationInfoBox .bubbleInfosLine { margin-top: 2rem; } section[data-sectionname="location"] .locationInfoBox .bubbleInfosLine .group, section[data-sectionname="locationPreview"] .locationInfoBox .bubbleInfosLine .group { float: left; margin-right: 2rem; margin-bottom: 3rem; } section[data-sectionname="location"] .locationInfoBox .bubbleInfosLine .group label, section[data-sectionname="locationPreview"] .locationInfoBox .bubbleInfosLine .group label { font-weight: bold; } section[data-sectionname="location"] .locationInfoBox .bubbleInfosLine .group .elms, section[data-sectionname="locationPreview"] .locationInfoBox .bubbleInfosLine .group .elms { margin-top: calc(1rem * 0.75); } section[data-sectionname="location"] .locationInfoBox .bubbleInfosLine .group .elms .elm, section[data-sectionname="locationPreview"] .locationInfoBox .bubbleInfosLine .group .elms .elm { font-size: calc(1rem * 0.875); border: none; border-radius: 1rem; background: hsl(var(--col_se_3)); padding: 0.5rem 0.625rem; float: left; } section[data-sectionname="location"] .locationInfoBox .bubbleInfosLine .group .elms .elm:not(:last-child), section[data-sectionname="locationPreview"] .locationInfoBox .bubbleInfosLine .group .elms .elm:not(:last-child) { margin-right: calc(1rem * 0.75); margin-bottom: calc(1rem * 0.75); } section[data-sectionname="location"] .locationInfoBox .maps, section[data-sectionname="locationPreview"] .locationInfoBox .maps { position: relative; border-radius: 1rem; overflow: hidden; height: 300px; } section[data-sectionname="location"] .locationInfoBox .maps .map, section[data-sectionname="locationPreview"] .locationInfoBox .maps .map { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } section[data-sectionname="location"] .sendBookingRequestBox, section[data-sectionname="locationPreview"] .sendBookingRequestBox { display: none; } section[data-sectionname="location"] .equipmentInfosLine .group .equipmentElm, section[data-sectionname="locationPreview"] .equipmentInfosLine .group .equipmentElm { padding: 0.5em 0.5em 0.5em 0.75em; position: relative; } section[data-sectionname="location"] .equipmentInfosLine .group .equipmentElm:before, section[data-sectionname="locationPreview"] .equipmentInfosLine .group .equipmentElm:before { content: '\2022'; position: absolute; left: 0px; padding-right: 0.5em; color: hsl(var(--col_pr_3)); } section[data-sectionname="location"] .equipmentInfosLine .group .equipmentElm:last-child, section[data-sectionname="locationPreview"] .equipmentInfosLine .group .equipmentElm:last-child { padding-bottom: 1em; border-bottom: none; } .previewBanner { position: fixed; right: 0px; top: var(--headerNavHeight); width: 500px; z-index: 100; padding: 1rem 0rem; font-size: 1.5rem; font-weight: bold; text-transform: uppercase; background-color: hsl(var(--col_pr_3)); transform: rotate(45deg); transform-origin: 300px calc(300px - 2rem); display: flex; justify-content: center; align-items: center; } /* ************************************************************ *************************************************************** :: LOCATIONREQUESTS *************************************************************** ************************************************************* */ section[data-sectionname="locationRequests"] .requests { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 1rem; } section[data-sectionname="locationRequests"] .requests .elm { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0.25em; } section[data-sectionname="locationRequests"] .requests .elm:not(:last-child) { border-bottom: 1px hsl(var(--col_se_5)) solid; padding-bottom: 1rem; } section[data-sectionname="locationRequests"] .requests .head .creationTSLable { display: none; } section[data-sectionname="locationRequests"] .requests .elm .body { font-size: 1em; font-style: italic; } section[data-sectionname="locationRequests"] .requests .elm .foot { font-size: 0.75em; margin-top: 0.25em; } /* ************************************************************ *************************************************************** :: IMPRINT, TEAM *************************************************************** ************************************************************* */ section[data-sectionname="imprint"] .body hr, section[data-sectionname="team"] .body hr, section[data-sectionname="ourValues"] .body hr { height: 1px; width: 100%; margin-top: 2rem; margin-bottom: 2rem; background-color: hsl(var(--col_gs_white)); border: none; } section[data-sectionname="imprint"] .body .entryTxt, section[data-sectionname="team"] .body .entryTxt, section[data-sectionname="ourValues"] .body .entryTxt { text-align: left; font-size: 1rem; line-height: 1.625em; } section[data-sectionname="imprint"] .body .entryTxt p:first-child, section[data-sectionname="team"] .body .entryTxt p:first-child, section[data-sectionname="ourValues"] .body .entryTxt p:first-child { margin-top: 0px; } section[data-sectionname="imprint"] .body .entryTxt .head, section[data-sectionname="team"] .body .entryTxt .head, section[data-sectionname="ourValues"] .body .entryTxt .head { font-size: 1.5rem; margin-bottom: 1rem; font-weight: bold; } /* ************************************************************ *************************************************************** :: PRIVACY *************************************************************** ************************************************************* */ section[data-sectionname="privacy"] .body hr { height: 1px; width: 100%; margin-top: 2rem; margin-bottom: 2rem; background-color: hsl(var(--col_gs_white)); border: none; } section[data-sectionname="privacy"] .body .entryTxt { text-align: left; font-size: 1rem; line-height: 1.625em; } section[data-sectionname="privacy"] .body .entryTxt .bdy { margin-bottom: 0.5rem; } section[data-sectionname="privacy"] .body .entryTxt .head:not(:first-child) { margin-top: 2rem; } section[data-sectionname="privacy"] .body .entryTxt .head { font-size: 1.3rem; margin-bottom: 1rem; font-weight: bold; } section[data-sectionname="privacy"] .body .entryTxt .head2 { font-size: 1.15rem; margin-bottom: 1rem; font-weight: bold; } section[data-sectionname="privacy"] .body .entryTxt .head3 { font-size: 1rem; margin-bottom: 1rem; font-weight: bold; } /* ************************************************************ *************************************************************** :: SITEMAP *************************************************************** ************************************************************* */ section[data-sectionname="sitemap"] .body hr { height: 1px; width: 100%; margin-top: 2rem; margin-bottom: 2rem; background-color: hsl(var(--col_gs_white)); border: none; } section[data-sectionname="sitemap"] .body .entryTxt { text-align: left; margin-top: 1rem; font-size: 1rem; line-height: 1.625em; } section[data-sectionname="sitemap"] .body .entryTxt .head { font-size: 1.5rem; margin-bottom: 1rem; font-weight: bold; } section[data-sectionname="sitemap"] .body ul { margin: 0px; } /* ************************************************************ *************************************************************** :: LOCATIONCARDS *************************************************************** ************************************************************* */ .locationEntries { font-size: 1rem; display: grid; grid-template-columns: repeat(1, minmax(300px, 1fr)); gap: 1em; } .locationEntries .locationCard { font-size: 1rem; overflow: hidden; background-color: hsl(var(--col_se_5)); display: flex; flex-direction: column; border-radius: 1rem; align-items: stretch; flex-wrap: nowrap; justify-content: flex-start; cursor: pointer; } .locationEntries .locationCard .imgBox { width: 100%; display: flex; overflow: hidden; aspect-ratio: 1/1; position: relative; } .locationEntries .locationCard .imgBox img { width: 100%; height: 100%; object-fit: cover; } .locationEntries .locationCard .imgBox [data-gees="pill"] { position: absolute; left: 1em; top: 1em; width: 2.5em; height: 2.5em; border-radius: 1.75em; display: flex; justify-content: center; align-items: center; background: hsl(var(--col_gs_black)); color: hsl(var(--col_sys_red)); z-index: 5; } .locationEntries .locationCard .imgBox [data-gees="pill"] .addRemoveFromFavs { width: 2.5em; min-width: 2.5em; height: 2.5em; min-height: 2.5em; } .locationEntries .locationCard .imgBox [data-gees="pill"] .addRemoveFromFavs > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .locationEntries .locationCard .imgBox [data-gees="pill"] * { cursor: pointer; } .locationEntries .locationCard .imgBox [data-gees="pill"]:hover svg { animation: heartPulse 1s ease-in-out 1; } .locationEntries .locationCard .imgBox .shortMenu { position: absolute; right: 1em; top: 1em; border-radius: 1.75em; display: flex; padding: 0.5rem; justify-content: center; align-items: center; background: hsla(var(--col_gs_white), 0.5); color: hsl(var(--col_gs_black)); cursor: pointer; z-index: 100; } .locationEntries .locationCard .imgBox .shortMenu.opened { border-radius: 0.33em; background: hsla(var(--col_gs_white), 0.70); position: absolute; left: 50%; top: 50%; width: 60%; height: 60%; transform: translate(-50%, -50%); font-size: 2em; text-align: center; } .locationEntries .locationCard .imgBox .shortMenu svg { width: 1.5em; height: 1.5em; } .locationEntries .locationCard .imgBox .shortMenu .extended { display: flex; flex-direction: column; gap: 10px; } .locationEntries .locationCard .imgBox .shortMenu .extended > div:hover { text-decoration: underline; } .locationEntries .locationCard .imgBox .shortMenu * { cursor: pointer; } .locationEntries .locationCard .text { width: 100%; padding: 0.75em; flex-grow: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; flex-wrap: nowrap; } .locationEntries .locationCard .text .line1 { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 1em; } .locationEntries .locationCard .text .line1 .name { font-weight: bold; } .locationEntries .locationCard .text .line1 .price { font-weight: bold; text-align: right; } .locationEntries .locationCard .text .line1 .price > div:nth-child(1) { white-space: nowrap; } .locationEntries .locationCard .text .line1 .price > div:nth-child(2) { font-size: 0.5em; white-space: nowrap; } .locationEntries .locationCard .text hr { margin-left: -0.75em; width: calc(100% + 1.5em); opacity: 0.5; border: 1px hsl(var(--col_se_4)) solid; } .locationEntries .locationCard .text .line2 { font-size: 0.75em; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 1em; } .locationEntries .locationCard .text .line2 .adress { text-align: right; } .locationEntries .locationCard.disabled { position: relative; } .locationEntries .locationCard.disabled .shortMenu { background-color: hsla(var(--col_gs_white), 0.75); } .locationEntries .locationCard.disabled:after { content: ''; position: absolute; width: 100%; height: 100%; background-color: hsla(var(--col_se_5),0.75); display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } /* ************************************************************ *************************************************************** :: COOKIES *************************************************************** ************************************************************* */ section[data-sectionname="cookies"] .body hr { height: 1px; width: 100%; margin-top: 2rem; margin-bottom: 2rem; background-color: hsl(var(--col_gs_white)); border: none; } section[data-sectionname="cookies"] .body .entryTxt { text-align: left; } section[data-sectionname="cookies"] .body .entryTxt .head:not(:first-child) { margin-top: 2rem; } section[data-sectionname="cookies"] .body .entryTxt .head { font-size: 1.5rem; margin-bottom: 1rem; font-weight: bold; } section[data-sectionname="cookies"] .body .entryTxt .head2 { font-size: 1.25rem; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; } section[data-sectionname="cookies"] .body .entryTxt .cookieList { margin-top: 1rem; } /* ************************************************************ *************************************************************** :: TERMS *************************************************************** ************************************************************* */ section[data-sectionname="terms"] .body hr { height: 1px; width: 100%; margin-top: 2rem; margin-bottom: 2rem; background-color: hsl(var(--col_gs_white)); border: none; } section[data-sectionname="terms"] .body .entryTxt { text-align: left; } section[data-sectionname="terms"] .body .entryTxt .head:not(:first-child) { margin-top: 3rem; } section[data-sectionname="terms"] .body .entryTxt .head { font-size: 1.5rem; font-weight: bold; } section[data-sectionname="terms"] .body .entryTxt .cookieList { margin-top: 1rem; } section[data-sectionname="terms"] ol { list-style-type: none; } section[data-sectionname="terms"] li > div { padding-left: 0.5rem; } section[data-sectionname="terms"] .np { padding: 0px; } section[data-sectionname="terms"] .head2 { display: inline-block; font-size: 1rem; line-height: 1rem; font-weight: bold; margin-top: 2rem; } section[data-sectionname="terms"] .head3 { display: inline-block; font-size: 1rem; line-height: 1rem; margin-top: 1rem; font-weight: bold; } section[data-sectionname="terms"] .cntn { margin-top: 1rem; } /* ************************************************************ *************************************************************** *************************************************************** :: ANIMATIONS *************************************************************** *************************************************************** ************************************************************* */ [data-ani="fadeIn"] { opacity: 0; } [data-ani="fadeIn"].ani { animation-delay: 0.5s; animation-name: fadeIn; animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } [data-ani="fadeInFromLeft"] { opacity: 0; } [data-ani="fadeInFromLeft"].ani { animation-name: fadeInFromLeft; animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes fadeInFromLeft { 0% {opacity: 0; transform: translateX(-100%);} 100% {opacity: 1; transform: translateX(0);} } [data-ani="fadeInFromRight"] { opacity: 0; } [data-ani="fadeInFromRight"].ani { animation-name: fadeInFromRight; animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes fadeInFromRight { 0% {opacity: 0; transform: translateX(100%);} 100% {opacity: 1; transform: translateX(0);} } [data-ani="fadeInFromBottom"] { opacity: 0; } [data-ani="fadeInFromBottom"].ani { opacity: 0; animation-name: fadeInFromBottom; animation-duration: 0.5s; animation-delay: 0.5s; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes fadeInFromBottom { 0% {opacity: 0; transform: translateY(100%);} 100% {opacity: 1; transform: translateY(0);} } [data-ani="fadeInStandard"] { opacity: 0; transform: translateY(12rem); transition: opacity .6s linear, transform .6s cubic-bezier(0.26,0.67,0.48,0.91); } [data-ani="fadeInStandard"].ani { opacity: 1; transform: translateY(0); }