/* based on A Modern CSS Reset https://dev.to/hankchizljaw/a-modern-css-reset-6p3 */ /* Box sizing rules */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove default padding */ ul[class], ol[class] { padding: 0; } /* Remove default margin */ body, h1, h2, h3, h4, h5, h6, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Set core body defaults */ html{ scroll-behavior: smooth; } body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; min-height: 100%; } /* Remove list styles on ul, ol elements with a class attribute */ ul[class], ol[class] { list-style: none; } /* A elements that don't have a class get default styles */ a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } /* Make images easier to work with */ img { max-width: 100%; display: block; height: auto; /* to image can be useful with svg images. I had some issues with brand logo and illustrations in content. */ } /* Natural flow and rhythm in articles by default */ article > * + * { margin-top: 1em; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { * { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; -webkit-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } * { /* animation: unset | revert | initial !important; transition: unset | revert | initial !important; scroll-behavior: unset | revert | initial !important; */ } } /* legacy reset styles */ a, a:hover, a:link, a:visited { color : inherit; } ul { list-style: none } /* TODO maybe move to image module */ img { border : none; height : auto; line-height : 100%; outline : transparent solid 1px; vertical-align : top; box-user-select : none; -webkit-transform-style : preserve-3d; transform-style : preserve-3d; -ms-interpolation-mode : bicubic; } blockquote, q { quotes: 'ÔÇ£''ÔÇØ' } q:lang(de) { quotes: 'ÔÇ×''ÔÇ£' } blockquote::after, blockquote::before, q::after, q::before { content: ''; content: none } /* TODO check if this legacy resets below are needed anymore */ abbr, address, article, aside, audio, b, blockquote, body, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video { /* margin : 0; */ /* padding : 0; */ /* border : none;*/ /* outline : 0;*/ background : 0 0; /* font-size : 100%; font-weight : 400; */ white-space : normal; /* line-height : 1.25em; */ vertical-align: top } button, input, optgroup, option, select, textarea { margin : 0; padding : 0; /* font-family: inherit; font-size : inherit; font-style : inherit; font-weight: inherit; box-shadow : none */ } table { border-collapse: separate; border-spacing : 0 } caption, td, th { text-align : left; font-weight: 400 } /* custom media queries TODO rename to xs,sm,md,lg,xl */ /*noinspection CssInvalidAtRule*/ :root{ /* Responsive sizes*/ --content-max-width-sm: 540px; --content-max-width-md: 720px; --content-max-width-lg: 980px; --content-max-width-xl: 1280px; --content-max-width-xxl: 1536px; --content-padding-xs: 10px; --content-padding-sm: 16px; --content-padding-md: 32px; --content-padding-lg: 42px; --content-padding-xl: 62px; --content-padding-xxl: 82px; --bg-opacity: 1; --grid-gap: 0px; --grid-auto-rows:minmax(100px,auto); /* Color palette!*/ /* Colors: !*/ --white : #FFFFFF; --black: #515151; --yellow: #FED443; --yellow-light: rgba(254, 212, 67, 0.45); --green: #98A232; --green-light: rgba(152, 162, 50, 0.35); --red: #E75137; --red-light: rgba(231, 81, 55, 0.25); --blue: #00B1E6; --blue-light: rgba(0, 177, 230, 0.25); --grey-light: #FAFAFA; --grey-lighter : #E1E1E1; --gray: #515154; --gray-medium: #868686; --gray-light: #F2F2F2; /* --unnamed-color-a5a81e: #A5A81E; */ /* brand colors */ --brand-color-primary: #FFF; --brand-color-secondary: #FFF; --brand-color-tertiary: #FFF; --brand-color-dark: var(--gray); --white-color: var(--white, white); --dark-color: var(--black, black); --bright-color: var(--white); --neutral-color: var(--gray); --warn-color:var(--red); --success-color: var(--green); --brand-color-accent: var(--brand-color-primary, green); /* mixins*/ --input-border-color: var(--brand-color-primary, #a9a9a9); --input-border-color-focus:+var(--brand-color-primary, #a9a9a9); /* transitions */ --transition-all: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-color: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow-fx: 10px 10px 49px -10px rgba(0, 0, 0, 0.8); --perm-modal-shadow: 10px 10px 49px -10px rgba(0, 0, 0, 0.8); --shadow-fx-soft: 30px 30px 50px 0px rgba(0, 0, 0, 0.28); --balloon-color: var(--brand-color-primary, black); /* paddings */ --base-padding: 10px; --base-padding-lg-x: 110px; --base-padding-lg-y: 60px; /* colors */ --body-bg-color: #ffedd3; --base-text-color: var(--brand-color-dark,gray); /* navigation */ --font-size-nav-links-desktop: 14px; --font-size-nav-links-mobile: 14px; --letter-spacing-nav-links: 2.41px; --mobile-nav-padding: min(20px,5vmin); /* Header Nav */ --nav-links-color: var(--white-color,gray); --nav-links-focus-color: var(--brand-color-primary,gray); --nav-links-font-size:14px; --nav-links-font-weight:400; --nav-links-line-height:22px; --nav-links-text-transform: initial; --nav-links-gap:4px; --nav-bg-color: #0f0b0f; --nav-header-border-color:transparent; --nav-panel-bg-color: var(--brand-color-primary,black); --nav-header-height-min: 80px; --nav-header-width: 130px; --nav-header-height: auto; --header-sm-height: 70px; /* logo + Navigation Header*/ --logo-size-desktop: 130px; /* Forms*/ --form-element-height : 38px; --form-field-text-color: var(--gray); --form-field-bg-color: var(--white-color); --form-field-bg-color-focus: var(--white-color); --form-field-border-color: #b2b2b2; --form-field-border-focus: var(--brand-color-primary,blue); --form-field-border-radius: 0.5rem; /* border radius */ --border-radius-lg : 26px; --border-radius-md : 16px; /* gaps */ --columns-gap: 1rem; /* horizontal line spacer */ --hr-style: solid; --hr-thickness: 1px; --hr-opacity: 0.4; --perm-hr-color: var(--neutral-color,gray); --perm-hr-style: var(--hr-style,solid); --perm-hr-thickness: var(--hr-thickness,1px); --perm-hr-opacity: var(--hr-opacity,0.4); /* --focus-outline : 3px dashed rgba(152, 162, 50, 0.55);*/ --focus-outline : 3px dashed rgba(0, 177, 230, 0.81); --focus-outline-offset : 0.3rem; /* Footer */ --footer-bg-color: white; /* Accordion */ --perm-accordion-background-color: transparent; --perm-accordion-hovercolor: white; --perm-accordion-text-color: var(--gray,#515151); --perm-accordion-padding: 30px; --perm-accordion-border-color: #999; --perm-accordion-header-font-size: 18px; /*Typography*/ --font-headlines: 'Frank Ruhl Libre', sans-serif; --font-base: 'Roboto', sans-serif; --base-font-size: 16px; --base-font-weight: 400; --base-line-height: 28px; --headlines-letter-spacing: 2.41px; --links-color : currentColor; --links-hover-color : var(--brand-color-primary,blue); --content-spacing-y-sm : 18px; --content-spacing-y-md : 18px; --content-spacing-y-lg : 18px; --p1-font-weight: var(--base-font-weight,400); --p1-color: var(--gray-medium); --p1-font-family: var(--font-base); --p1-font-size-sm: var(--base-font-size); --p1-line-height-sm: var(--base-line-height); --p1-spacing-sm : 1px; --p1-font-size-md: var(--base-font-size); --p1-line-height-md: var(--base-line-height); --p1-spacing-md : 1px; --p1-font-size-lg: var(--base-font-size); --p1-line-height-lg: var(--base-line-height); --p1-spacing-lg : 1px; --p2-font-weight: 400; --p2-color: var(--gray-medium); --p2-font-family: var(--font-base); --p2-font-size-sm: 14px; --p2-line-height-sm: 20px; --p2-font-size-md: 14px; --p2-line-height-md: 20px; --p2-font-size-lg: 14px; --p2-line-height-lg: 20px; --p3-font-weight: 400; --p3-color: var(--gray-medium); --p3-font-family: var(--font-base); --p3-font-size-sm: 24px; --p3-line-height-sm: 28px; --p3-font-size-md: 28px; --p3-line-height-md: 20px; --p3-font-size-lg: 24px; --p3-line-height-lg: 28px; --p4-font-weight: 400; --p4-color: var(--gray-medium); --p4-font-family: var(--font-base); --p4-font-size-sm: 24px; --p4-line-height-sm: 28px; --p4-font-size-md: 28px; --p4-line-height-md: 20px; --p4-font-size-lg: 24px; --p4-line-height-lg: 28px; --p5-font-weight: 400; --p5-color: var(--gray-medium); --p5-font-family: var(--font-base); --p5-font-size-sm: 24px; --p5-line-height-sm: 28px; --p5-font-size-md: 28px; --p5-line-height-md: 20px; --p5-font-size-lg: 24px; --p5-line-height-lg: 28px; --p6-font-weight: 400; --p6-color: var(--gray-medium); --p6-font-family: var(--font-base); --p6-font-size-sm: 24px; --p6-line-height-sm: 28px; --p6-font-size-md: 28px; --p6-line-height-md: 20px; --p6-font-size-lg: 24px; --p6-line-height-lg: 28px; /* Headlines */ --h-base--font-family: var(--font-headlines); --h-base--font-weight: 700; --h-base--color: var(--dark-color); --h-base--font-size: 40px; --h-base--line-height: 44px; --h1-font-family: var(--font-headlines); --h1-font-weight: 400; --h1-color: var(--dark-color); --h1-text-transform: initial; --h1-font-size-sm: 40px; --h1-line-height-sm: 44px; --h1-line-spacing-sm: -0.32px; --h1-font-size-md: 40px; --h1-line-height-md: 38px; --h1-line-spacing-md: -0.32px; --h1-font-size-lg: 40px; --h1-line-height-lg:44px; --h1-line-spacing-lg: -0.32px; --h2-font-family: var(--font-headlines); --h2-font-weight: 400; --h2-color: var(--dark-color); --h2-text-transform: initial; --h2-font-size-sm: 20px; --h2-line-height-sm: 34px; --h2-line-spacing-sm: 0.24px; --h2-font-size-md: 20px; --h2-line-height-md: 34px; --h2-line-spacing-md: 0.24px; --h2-font-size-lg: 25px; --h2-line-height-lg:34px; --h2-line-spacing-lg: 0.242px; --h3-font-family: var(--font-headlines); --h3-font-weight: 400; --h3-color: var(--dark-color); --h3-text-transform: initial; --h3-font-size-sm: 20px; --h3-line-height-sm: 28px; --h3-line-spacing-sm: 0.24px; --h3-font-size-md: 20px; --h3-line-height-md: 28px; --h3-line-spacing-md: 0.24px; --h3-font-size-lg: 24px; --h3-line-height-lg:32px; --h3-line-spacing-lg: 0.24px; --h4-font-family: var(--font-headlines); --h4-font-weight: 400; --h4-color: var(--dark-color); --h4-text-transform: uppercase; --h4-font-size-sm: 14px; --h4-line-height-sm: 22px; --h4-line-spacing-sm:2.41px; --h4-font-size-md: 14px; --h4-line-height-md: 28px; --h4-line-spacing-md:2.41px; --h4-font-size-lg: 14px; --h4-line-height-lg:22px; --h4-line-spacing-lg:2.41px; --h5-font-family: var(--font-headlines); --h5-font-weight: 400; --h5-color: var(--dark-color); --h5-text-transform: uppercase; --h5-font-size-sm: 14px; --h5-line-height-sm: 22px; --h5-line-spacing-sm:2.41px; --h5-font-size-md: 14px; --h5-line-height-md: 28px; --h5-line-spacing-md:2.41px; --h5-font-size-lg: 14px; --h5-line-height-lg:22px; --h5-line-spacing-lg:2.41px; --h6-font-family: var(--font-headlines); --h6-font-weight: 400; --h6-color: var(--dark-color); --h6-text-transform: uppercase; --h6-font-size-sm: 14px; --h6-line-height-sm: 22px; --h6-line-spacing-sm:2.41px; --h6-font-size-md: 14px; --h6-line-height-md: 28px; --h6-line-spacing-md:2.41px; --h6-font-size-lg: 14px; --h6-line-height-lg:22px; --h6-line-spacing-lg:2.41px; /* Buttons */ --perm-button-height: 48px; --perm-button-font-size: 20px; --perm-button-font-weight: 400; --perm-button-line-height: 1.2; --perm-button-padding: 0.8ch 2ch; --perm-button-rounded: 28px; --perm-button-shadow: none; --perm-button-text-transform: uppercase; --perm-button-color: var(--white,white); --perm-button-color-hover: var(--brand-color-primary); --perm-button-bg-color: var(--brand-color-primary,white); --perm-button-bg-color-hover: var(--brand-color-primary,white); --perm-button-border-width: 2px; --perm-button-border-radius: 2px; --perm-button-border-color: var(--brand-color-primary,white); --perm-button-border-color-hover: var(--brand-color-primary,white); --perm-button-a-color: var(--white,#98A232); --perm-button-a-color-hover: var(--brand-color-primary); --perm-button-a-bg-color: var(--brand-color-primary,white); --perm-button-a-bg-color-hover: var(--white,white); --perm-button-a-border-color: var(--brand-color-primary,white); --perm-button-a-border-color-hover: var(--brand-color-primary,white); --perm-button-b-color: var(--white,#98A232); --perm-button-b-color-hover: var(--white); --perm-button-b-bg-color: var(--brand-color-primary,white); --perm-button-b-bg-color-hover: var(--brand-color-primary,white); --perm-button-b-border-color: var(--brand-color-primary,white); --perm-button-b-border-color-hover: var(--brand-color-primary,white); --perm-button-c-color: var(--brand-color-primary,#98A232); --perm-button-c-color-hover: var(--brand-color-primary); --perm-button-c-bg-color: var(--brand-color-primary,white); --perm-button-c-bg-color-hover: var(--brand-color-primary,white); --perm-button-c-border-color: var(--brand-color-primary,white); --perm-button-c-border-color-hover: var(--brand-color-primary,white); --perm-button-d-color: var(--brand-color-primary,#98A232); --perm-button-d-color-hover: var(--brand-color-primary); --perm-button-d-bg-color: var(--brand-color-primary,white); --perm-button-d-bg-color-hover: var(--brand-color-primary,white); --perm-button-d-border-color: var(--brand-color-primary,white); --perm-button-d-border-color-hover: var(--brand-color-primary,white) ; /* New Sep 2023: */ --content-vertical-offset : 0px; /* Modal */ --modal-overlay-background-color : #333333; --modal-overlay-background-opacity : 0.3; --modal-close-button-stroke : #333; --modal-close-button-fill : #ececf0; --perm--modal-closebtn-size: 40px; --perm--modal-opacity: 0.6; --perm--modal-shadow: 10px 10px 49px -10px rgba(1,1,1,0.8); --perm-modal-corner-radius: 20px; } @media (prefers-contrast: more) { :root{ --focus-outline : 3px dashed rgb(3, 101, 128); } } @media (min-width: 768px) { :root{ --base-padding: 30px; } } @media (min-width: 992px) { :root{ --base-padding: 30px; } } .block{ display: block; } .inline-block{ display: inline-block; } .inline{ display: inline; } .is-centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .rounded-lg{ border-radius: var( --border-radius-lg ); } .rounded-md{ border-radius: var( --border-radius-md ); } .rounded-sm{ border-radius: var( --border-radius-sm ); } .grid > .neos-contentcollection{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var( --grid-gap,30px); } .center-content { display: grid !important; } .center-content { -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; place-content: center; } .border-red{ border-color: var( --red ) !important; } .border-blue{ border-color: var( --blue ) !important; } .border-green{ border-color: var( --green ) !important; } .border-yellow{ border-color: var( --yellow ) !important; } .limiter-gray{ opacity:0.4; } .blur-fx{ -webkit-filter:blur(4px); filter:blur(4px); } .is-uppercase{ text-transform:uppercase; } /* copy paste */ @media (max-width:767px) { } @media (min-width: 768px) { } @media (min-width:1200px) { } @media (max-width:47.8em) { body:not(.neos-backend) .hidden-on-mobile{ display:none !important } } @media (min-width:1200px) { body:not(.neos-backend) .hidden-on-mobile{ display: inline !important; display: initial !important } } @media (min-width: 768px) { body:not(.neos-backend) .hidden-on-tablets{ display:none !important } } @media (min-width:1200px) { body:not(.neos-backend) .hidden-on-tablets{ display: inline !important; display: initial !important } } @media (min-width:1200px) { body:not(.neos-backend) .hidden-on-desktop{ display:none !important } } /* @font-face { font-family: "Frank Ruhl Libre"; src : url('/_Resources/Static/Packages/permanent.basic/assets/fonts/dm-sans-v11-latin-regular.woff2') format("woff2"); font-weight:400; font-display: swap; } @font-face { font-family: "Roboto"; src : url('/_Resources/Static/Packages/permanent.basic/assets/fonts/dm-sans-v11-latin-regular.woff2') format("woff2"); font-weight:400; font-display: swap; } @font-face { font-family: "Roboto"; src : url('/_Resources/Static/Packages/permanent.basic/assets/fonts/dm-sans-v11-latin-700.woff2') format("woff2"); font-weight:700; font-display: swap; }*/ html,body { color: var(--base-text-color); font-family: var(--font-base); font-size: var(--base-font-size); line-height: var(--base-line-height); letter-spacing: 0px; word-spacing: 0px; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-variant: normal; font-style: normal; font-weight: normal; text-transform: none; text-indent: 0px; vertical-align: baseline; text-align:left; } strong,b,p strong,p b { font-weight: bold; } /* TODO clean up selectors below! */ span, select, option, form, fieldset, table, tr, td, textarea, input, button, label, li, p, .p1, .p1 p, .p1 p, .p1 p, .dc7__type__p1, .button-component .button, .is-type-a .button, .is-type-b .button, .is-type-c .button, .is-type-d .button, #content .cron-formbuilder-plugin > button, #content .cron-formbuilder-plugin > button, .om3__segment__nform button, .om3__segment__nform button, .p2, .text-component.p2 p, .p2 p, .p2 p, .dc7__type__p2, .p3, .text-component.p3 p, .p3 p, .p3 p, .dc7__type__p3, .p4, .text-component.p4 p, .p4 p, .p4 p, .dc7__type__p4, .p5, .text-component.p5 p, .p5 p, .p5 p, .dc7__type__p5, .p6, .text-component.p6 p, .p6 p, .p6 p, .dc7__type__p6, h1, .h1, .dc7__type__h1, h2, .h2, .dc7__type__h2, h3, .h3, .dc7__type__h3, h4, .om3__segment__nform label, .om3__segment__nform label, .om3__segment__nform h3, .om3__segment__nform h3, .h4, .dc7__type__h4, h5, .h5, .dc7__type__h5, h6, .h6, .dc7__type__h6, .content-footer,.content_menu .navbar li{ font-size: var(--p1-font-size-sm); line-height: var(--p1-line-height-sm); letter-spacing: var(--p1-spacing-sm); } span a,select a,option a,form a,fieldset a,table a,tr a,td a,textarea a,input a,button a,label a,li a,p a,.p1 a,.p1 p a,.p1 p a,.p1 p a,.dc7__type__p1 a,.button-component .button a,.is-type-a .button a,.is-type-b .button a,.is-type-c .button a,.is-type-d .button a,#content .cron-formbuilder-plugin > button a,#content .cron-formbuilder-plugin > button a,.om3__segment__nform button a,.om3__segment__nform button a,.p2 a,.text-component.p2 p a,.p2 p a,.p2 p a,.dc7__type__p2 a,.p3 a,.text-component.p3 p a,.p3 p a,.p3 p a,.dc7__type__p3 a,.p4 a,.text-component.p4 p a,.p4 p a,.p4 p a,.dc7__type__p4 a,.p5 a,.text-component.p5 p a,.p5 p a,.p5 p a,.dc7__type__p5 a,.p6 a,.text-component.p6 p a,.p6 p a,.p6 p a,.dc7__type__p6 a,h1 a,.h1 a,.dc7__type__h1 a,h2 a,.h2 a,.dc7__type__h2 a,h3 a,.h3 a,.dc7__type__h3 a,h4 a,.om3__segment__nform label a,.om3__segment__nform label a,.om3__segment__nform h3 a,.om3__segment__nform h3 a,.h4 a,.dc7__type__h4 a,h5 a,.h5 a,.dc7__type__h5 a,h6 a,.h6 a,.dc7__type__h6 a,.content-footer a,.content_menu .navbar li a{ text-decoration: none; color: var(--links-color,currentColor); } span a:hover,select a:hover,option a:hover,form a:hover,fieldset a:hover,table a:hover,tr a:hover,td a:hover,textarea a:hover,input a:hover,button a:hover,label a:hover,li a:hover,p a:hover,.p1 a:hover,.p1 p a:hover,.p1 p a:hover,.p1 p a:hover,.dc7__type__p1 a:hover,.button-component .button a:hover,.is-type-a .button a:hover,.is-type-b .button a:hover,.is-type-c .button a:hover,.is-type-d .button a:hover,#content .cron-formbuilder-plugin > button a:hover,#content .cron-formbuilder-plugin > button a:hover,.om3__segment__nform button a:hover,.om3__segment__nform button a:hover,.p2 a:hover,.text-component.p2 p a:hover,.p2 p a:hover,.p2 p a:hover,.dc7__type__p2 a:hover,.p3 a:hover,.text-component.p3 p a:hover,.p3 p a:hover,.p3 p a:hover,.dc7__type__p3 a:hover,.p4 a:hover,.text-component.p4 p a:hover,.p4 p a:hover,.p4 p a:hover,.dc7__type__p4 a:hover,.p5 a:hover,.text-component.p5 p a:hover,.p5 p a:hover,.p5 p a:hover,.dc7__type__p5 a:hover,.p6 a:hover,.text-component.p6 p a:hover,.p6 p a:hover,.p6 p a:hover,.dc7__type__p6 a:hover,h1 a:hover,.h1 a:hover,.dc7__type__h1 a:hover,h2 a:hover,.h2 a:hover,.dc7__type__h2 a:hover,h3 a:hover,.h3 a:hover,.dc7__type__h3 a:hover,h4 a:hover,.om3__segment__nform label a:hover,.om3__segment__nform label a:hover,.om3__segment__nform h3 a:hover,.om3__segment__nform h3 a:hover,.h4 a:hover,.dc7__type__h4 a:hover,h5 a:hover,.h5 a:hover,.dc7__type__h5 a:hover,h6 a:hover,.h6 a:hover,.dc7__type__h6 a:hover,.content-footer a:hover,.content_menu .navbar li a:hover{ text-decoration: underline; text-decoration-color: var(--brand-color-primary,blue); text-decoration-thickness: 2px; text-underline-offset: 0.1em; } @media (min-width: 768px) { span, select, option, form, fieldset, table, tr, td, textarea, input, button, label, li, p, .p1, .p1 p, .p1 p, .p1 p, .dc7__type__p1, .button-component .button, .is-type-a .button, .is-type-b .button, .is-type-c .button, .is-type-d .button, #content .cron-formbuilder-plugin > button, #content .cron-formbuilder-plugin > button, .om3__segment__nform button, .om3__segment__nform button, .p2, .text-component.p2 p, .p2 p, .p2 p, .dc7__type__p2, .p3, .text-component.p3 p, .p3 p, .p3 p, .dc7__type__p3, .p4, .text-component.p4 p, .p4 p, .p4 p, .dc7__type__p4, .p5, .text-component.p5 p, .p5 p, .p5 p, .dc7__type__p5, .p6, .text-component.p6 p, .p6 p, .p6 p, .dc7__type__p6, h1, .h1, .dc7__type__h1, h2, .h2, .dc7__type__h2, h3, .h3, .dc7__type__h3, h4, .om3__segment__nform label, .om3__segment__nform label, .om3__segment__nform h3, .om3__segment__nform h3, .h4, .dc7__type__h4, h5, .h5, .dc7__type__h5, h6, .h6, .dc7__type__h6, .content-footer,.content_menu .navbar li{ font-size: var(--p1-font-size-md); line-height: var(--p1-line-height-md) } } @media (min-width: 992px) { span, select, option, form, fieldset, table, tr, td, textarea, input, button, label, li, p, .p1, .p1 p, .p1 p, .p1 p, .dc7__type__p1, .button-component .button, .is-type-a .button, .is-type-b .button, .is-type-c .button, .is-type-d .button, #content .cron-formbuilder-plugin > button, #content .cron-formbuilder-plugin > button, .om3__segment__nform button, .om3__segment__nform button, .p2, .text-component.p2 p, .p2 p, .p2 p, .dc7__type__p2, .p3, .text-component.p3 p, .p3 p, .p3 p, .dc7__type__p3, .p4, .text-component.p4 p, .p4 p, .p4 p, .dc7__type__p4, .p5, .text-component.p5 p, .p5 p, .p5 p, .dc7__type__p5, .p6, .text-component.p6 p, .p6 p, .p6 p, .dc7__type__p6, h1, .h1, .dc7__type__h1, h2, .h2, .dc7__type__h2, h3, .h3, .dc7__type__h3, h4, .om3__segment__nform label, .om3__segment__nform label, .om3__segment__nform h3, .om3__segment__nform h3, .h4, .dc7__type__h4, h5, .h5, .dc7__type__h5, h6, .h6, .dc7__type__h6, .content-footer,.content_menu .navbar li{ font-size: var(--p1-font-size-lg); line-height: var(--p1-line-height-lg) } } /* PARAGRAPHS */ p + *{ margin-top:var( --content-spacing-y-sm); } @media (min-width: 768px) { p + *{ margin-top:var( --content-spacing-y-md) } } @media (min-width: 992px) { p + *{ margin-top:var( --content-spacing-y-lg) } } .p1, .text-component.p1 p, .p1 p,.p1 li, .p1 .content p, .dc7__type__p1{ color: var(--p1-color); font-weight: var(--p1-font-weight); font-size: var(--p1-font-size-sm); line-height: var(--p1-line-height-sm); font-family: var(--p1-font-family); } @media (min-width: 768px) { .p1, .text-component.p1 p, .p1 p,.p1 li, .p1 .content p, .dc7__type__p1{ font-size: var(--p1-font-size-md); line-height: var(--p1-line-height-md) } } @media (min-width: 992px) { .p1, .text-component.p1 p, .p1 p,.p1 li, .p1 .content p, .dc7__type__p1{ font-size: var(--p1-font-size-lg); line-height: var(--p1-line-height-lg) } } .p2, .text-component.p2 p, .p2 p,.p2 li, .p2 .content p, .dc7__type__p2{ color: var(--p2-color); font-weight: var(--p2-font-weight); font-size: var(--p2-font-size-sm); line-height: var(--p2-line-height-sm); font-family: var(--p2-font-family); } @media (min-width: 768px) { .p2, .text-component.p2 p, .p2 p,.p2 li, .p2 .content p, .dc7__type__p2{ font-size: var(--p2-font-size-md); line-height: var(--p2-line-height-md) } } @media (min-width: 992px) { .p2, .text-component.p2 p, .p2 p,.p2 li, .p2 .content p, .dc7__type__p2{ font-size: var(--p2-font-size-lg); line-height: var(--p2-line-height-lg) } } .p3, .text-component.p3 p, .p3 p,.p3 li, .p3 .content p, .dc7__type__p3{ color: var(--p3-color); font-weight: var(--p3-font-weight); font-size: var(--p3-font-size-sm); line-height: var(--p3-line-height-sm); font-family: var(--p3-font-family); } @media (min-width: 768px) { .p3, .text-component.p3 p, .p3 p,.p3 li, .p3 .content p, .dc7__type__p3{ font-size: var(--p3-font-size-md); line-height: var(--p3-line-height-md) } } @media (min-width: 992px) { .p3, .text-component.p3 p, .p3 p,.p3 li, .p3 .content p, .dc7__type__p3{ font-size: var(--p3-font-size-lg); line-height: var(--p3-line-height-lg) } } .p4, .text-component.p4 p, .p4 p, .p4 .content p, .dc7__type__p4{ color: var(--p4-color); font-weight: var(--p4-font-weight); font-size: var(--p4-font-size-sm); line-height: var(--p4-line-height-sm); font-family: var(--p4-font-family); } @media (min-width: 768px) { .p4, .text-component.p4 p, .p4 p, .p4 .content p, .dc7__type__p4{ font-size: var(--p4-font-size-md); line-height: var(--p4-line-height-md) } } @media (min-width: 992px) { .p4, .text-component.p4 p, .p4 p, .p4 .content p, .dc7__type__p4{ font-size: var(--p4-font-size-lg); line-height: var(--p4-line-height-lg) } } .p5, .text-component.p5 p, .p5 p, .p5 .content p, .dc7__type__p5{ color: var(--p5-color); font-weight: var(--p5-font-weight); font-size: var(--p5-font-size-sm); line-height: var(--p5-line-height-sm); font-family: var(--p5-font-family); } @media (min-width: 768px) { .p5, .text-component.p5 p, .p5 p, .p5 .content p, .dc7__type__p5{ font-size: var(--p5-font-size-md); line-height: var(--p5-line-height-md) } } @media (min-width: 992px) { .p5, .text-component.p5 p, .p5 p, .p5 .content p, .dc7__type__p5{ font-size: var(--p5-font-size-lg); line-height: var(--p5-line-height-lg) } } .p6, .text-component.p6 p, .p6 p, .p6 .content p, .dc7__type__p6{ color: var(--p6-color); font-weight: var(--p6-font-weight); font-size: var(--p6-font-size-sm); line-height: var(--p6-line-height-sm); font-family: var(--p6-font-family); } @media (min-width: 768px) { .p6, .text-component.p6 p, .p6 p, .p6 .content p, .dc7__type__p6{ font-size: var(--p6-font-size-md); line-height: var(--p6-line-height-md) } } @media (min-width: 992px) { .p6, .text-component.p6 p, .p6 p, .p6 .content p, .dc7__type__p6{ font-size: var(--p6-font-size-lg); line-height: var(--p6-line-height-lg) } } /* HEADLINES */ h1, .h1, .dc7__type__h1, h2, .h2, .dc7__type__h2, h3, .h3, .dc7__type__h3, h4, .h4, .dc7__type__h4, h5, .h5, .dc7__type__h5, h6, .h6, .dc7__type__h6{ font-family: var(--font-headlines); font-size: var(--h-base--font-size); line-height: var(--h-base--line-heigh); font-weight: var(--h-base--font-weight); color: var(--h-base--color); word-wrap: break-word; } h1 a,.h1 a,.dc7__type__h1 a,h2 a,.h2 a,.dc7__type__h2 a,h3 a,.h3 a,.dc7__type__h3 a,h4 a,.h4 a,.dc7__type__h4 a,h5 a,.h5 a,.dc7__type__h5 a,h6 a,.h6 a,.dc7__type__h6 a{ } h1, .h1, .dc7__type__h1 { font-family: var(--h1-font-family); color: var(--h1-color); line-height: var(--h1-line-height-sm); font-size:var(--h1-font-size-sm); font-weight: var(--h1-font-weight); letter-spacing: var(--h1-line-spacing-sm); text-transform: var(--h1-text-transform); } @media (min-width: 768px) { h1, .h1, .dc7__type__h1 { font-size:var(--h1-font-size-md); line-height: var(--h1-line-height-md); letter-spacing: var(--h1-line-spacing-md) } } @media (min-width: 992px) { h1, .h1, .dc7__type__h1 { font-size:var(--h1-font-size-lg); line-height: var(--h1-line-height-lg); letter-spacing: var(--h1-line-spacing-lg) } } h2, .h2, .dc7__type__h2 { font-family: var(--h2-font-family); color: var(--h2-color); line-height: var(--h2-line-height-sm); font-size:var(--h2-font-size-sm); font-weight: var(--h2-font-weight); letter-spacing: var(--h2-line-spacing-sm); text-transform: var(--h2-text-transform); } @media (min-width: 768px) { h2, .h2, .dc7__type__h2 { font-size:var(--h2-font-size-md); line-height: var(--h2-line-height-md); letter-spacing: var(--h2-line-spacing-md) } } @media (min-width: 992px) { h2, .h2, .dc7__type__h2 { font-size:var(--h2-font-size-lg); line-height: var(--h2-line-height-lg); letter-spacing: var(--h2-line-spacing-lg) } } h3, .h3, .dc7__type__h3 { font-family: var(--h3-font-family); color: var(--h3-color); line-height: var(--h3-line-height-sm); font-size:var(--h3-font-size-sm); font-weight: var(--h3-font-weight); letter-spacing: var(--h3-line-spacing-sm); text-transform: var(--h3-text-transform); } @media (min-width: 768px) { h3, .h3, .dc7__type__h3 { font-size:var(--h3-font-size-md); line-height: var(--h3-line-height-md); letter-spacing: var(--h3-line-spacing-md) } } @media (min-width: 992px) { h3, .h3, .dc7__type__h3 { font-size:var(--h3-font-size-lg); line-height: var(--h3-line-height-lg); letter-spacing: var(--h3-line-spacing-lg) } } h4, .h4, .dc7__type__h4,.om3__segment__nform label,.om3__segment__nform h4{ font-family: var(--h4-font-family); color: var(--h4-color); line-height: var(--h4-line-height-sm); font-size:var(--h4-font-size-sm); font-weight: var(--h4-font-weight); letter-spacing: var(--h4-line-spacing-sm); text-transform: var(--h4-text-transform); } @media (min-width: 768px) { h4, .h4, .dc7__type__h4,.om3__segment__nform label,.om3__segment__nform h4{ font-size:var(--h4-font-size-md); line-height: var(--h4-line-height-md); letter-spacing: var(--h4-line-spacing-md) } } @media (min-width: 992px) { h4, .h4, .dc7__type__h4,.om3__segment__nform label,.om3__segment__nform h4{ font-size:var(--h4-font-size-lg); line-height: var(--h4-line-height-lg); letter-spacing: var(--h4-line-spacing-lg) } } h5, .h5, .dc7__type__h5 { font-family: var(--h5-font-family); color: var(--h5-color); line-height: var(--h5-line-height-sm); font-size:var(--h5-font-size-sm); font-weight: var(--h5-font-weight); letter-spacing: var(--h5-line-spacing-sm); text-transform: var(--h5-text-transform); } @media (min-width: 768px) { h5, .h5, .dc7__type__h5 { font-size:var(--h5-font-size-md); line-height: var(--h5-line-height-md); letter-spacing: var(--h5-line-spacing-md) } } @media (min-width: 992px) { h5, .h5, .dc7__type__h5 { font-size:var(--h5-font-size-lg); line-height: var(--h5-line-height-lg); letter-spacing: var(--h5-line-spacing-lg) } } h6, .h6, .dc7__type__h6 { font-family: var(--h6-font-family); color: var(--h6-color); line-height: var(--h6-line-height-sm); font-size:var(--h6-font-size-sm); font-weight: var(--h6-font-weight); letter-spacing: var(--h6-line-spacing-sm); text-transform: var(--h6-text-transform); } @media (min-width: 768px) { h6, .h6, .dc7__type__h6 { font-size:var(--h6-font-size-md); line-height: var(--h6-line-height-md); letter-spacing: var(--h6-line-spacing-md) } } @media (min-width: 992px) { h6, .h6, .dc7__type__h6 { font-size:var(--h6-font-size-lg); line-height: var(--h6-line-height-lg); letter-spacing: var(--h6-line-spacing-lg) } } a:active {outline:none;} /*Remove the outline from links on :active only*/ html,body{ background-color:var(--body-bg-color,grey); max-width: 100vw; } body.has-modal{ overflow-y: hidden; margin-right: 15px; } .page-content { min-height: 100vh; padding: 0; padding-top:var(--content-vertical-offset,0); } .dc7__modal__bs_in_modal__true .page-content { padding:0; } .dc7__modal__bs_in_modal__true .page-content > .neos-contentcollection > .clip-container{ padding-top: 0 !important; top: 0 !important; } .dc7__modal__bs_in_modal__true .page-content > .neos-contentcollection > .clip-container{ /*TODO SHAME!*/ } /*margin: 0 auto;*/ .page-content > .neos-contentcollection > * + * { margin-top: 1.5rem; } @media (max-width:767px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } /* activate hypoenation */ .content { -ms-hyphens: auto; hyphens: auto; } .dc7__modal__bs_in_modal__true .content { top: 0 !important; padding-top: 0 !important; } .dc7__modal__bs_in_modal__true .content { /* top: 0px !important;*/ } /* Z index layering */ .dc7__layout__zindex__1-5 { z-index: 10; } .dc7__layout__zindex__2-5 { z-index: 20; } .dc7__layout__zindex__3-5 { z-index: 30; } .dc7__layout__zindex__4-5 { z-index: 40; } .dc7__layout__zindex__5-5 { z-index: 50; } .is-position-relative { position: relative !important; } .is-position-absolute { position: absolute !important; } .is-position-absolute { left: auto; right: auto; top: auto; bottom: auto; } .is-position-fixed { position: fixed; left: auto; right: auto; top: auto; bottom: auto; } /* .content { min-height: 100vh; } */ .component:not(.clip-container) { position: relative; display: block; background-clip: padding-box; padding: var(--base-padding, 30px); } @media (max-width:767px) { .component:not(.clip-container) { padding: var(--base-padding, 30px) } } @media (min-width: 768px) { .component:not(.clip-container) { padding: var(--base-padding, 30px) } } @media (min-width:1200px) { .component:not(.clip-container) { padding: var(--base-padding, 30px) } } .component > .neos-contentcollection, .component > a > .neos-contentcollection { width: 100%; } .is-container { /* TODO use css variables*/ max-width: var( --container-max-width-large ,100vw); } @media (min-width: 768px) { .is-container { max-width: var( --container-max-width-tab ,100vw) } } .arrow-pagescroll-up { position: fixed!important; } .arrow-pagescroll-up { z-index: 1010; display:inline-block; overflow:hidden; width:40px; height:40px; bottom:0; right:0; color:var(--brand-color-primary,white) ; /*opacity:0;*/ } .arrow-pagescroll-up svg{ width:100%; height:100%; } .arrow-pagescroll-up svg path{ stroke: var(--brand-color-primary,blue); } .arrow-pagescroll-up { -webkit-transition : opacity 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1); transition : opacity 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1); transition : opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1); transition : opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-transform: scale(1) translate3d(0,-100%,0); transform: scale(1) translate3d(0,-100%,0); } /*mix-blend-mode:exclusion;*/ .arrow-pagescroll-up.is-visible{ opacity:1; -webkit-transform: scale(1) translate3d(0,0%,0); transform: scale(1) translate3d(0,0%,0); } perm-html{ padding:0 !important; } /* FOOTER! ! */ .content-footer { position: relative; background-color: var(--footer-bg-color ,cornflowerblue); width: 100%; overflow: hidden; padding:var(--footer-padding-top ,var(--base-padding ,0)) 0; } .dc7__modal__bs_in_modal__true .content-footer { display:none !important; } .content-footer a.perm-image:hover img{ -webkit-transform: none !important; transform: none !important; } .grid-container > .neos-contentcollection { display: grid; grid-template-columns: var(--grid-template-columns,repeat(12, 1fr)); grid-auto-rows: var(--grid-auto-rows,auto); /* grid-template-rows: none; grid-auto-rows: var(--grid-template-rows,auto);*/ /*HERE YOU CAN SET YOUR CUSTOM COLUMN GAP*/ grid-gap:var(--grid-gap,1vmax); gap:var(--grid-gap,1vmax); /*HERE YOU CAN SET YOUR CUSTOM ROW GAP*/ /*grid-row-gap: var(--grid-gap,1vmax);*/ /*grid-auto-flow DETERMINES HOW THE GRID WILL FILL UP. IF YOU ENABLE THE grid-auto-flow PROPERTY, grid-column-gap WILL HAVE NO EFFECT ON THE AUTO-GENERATED ROWS, SO YOU WILL NEED TO SET A MARGIN TOP &/OR BOTTOM TO THE ELEMENTS INSIDE THE GRID CONTAINER IF YOU WANT A ROW GAP. dense tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later, row TELLS THE AUTO-PLACEMENT ALGORITHM TO FILL IN EACH ROW IN TURN, ADDING NEW ROWS AS NECESSARY column TELLS THE AUTO-PLACEMENT ALGORITHM TO FILL IN EACH COLUMN IN TURN, ADDING NEW COLUMNS AS NECESSARY */ grid-auto-flow: dense; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xs-justify-items-start{ -ms-justify-items:start; justify-items:start; } .col-xs-justify-items-end{ -ms-justify-items:end; justify-items:end; } .col-xs-justify-items-center{ -ms-justify-items:center; justify-items:center; } .col-xs-justify-items-stretch{ -ms-justify-items:stretch; justify-items:stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xs-align-items-start{ -ms-align-items:start; -webkit-box-align:start; -ms-flex-align:start; align-items:start; } .col-xs-align-items-end{ -ms-align-items:end; -webkit-box-align:end; -ms-flex-align:end; align-items:end; } .col-xs-align-items-center{ -ms-align-items:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .col-xs-align-items-stretch{ -ms-align-items:stretch; -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xs-justify-content-start{ -ms-justify-content:start; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:start; } .col-xs-justify-content-end{ -ms-justify-content:end; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:end; } .col-xs-justify-content-center{ -ms-justify-content:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; } .col-xs-justify-content-stretch{ -ms-justify-content:stretch; -webkit-box-pack:stretch; -ms-flex-pack:stretch; justify-content:stretch; } .col-xs-justify-content-space-around{ -ms-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around; } .col-xs-justify-content-space-between{ -ms-justify-content:space-between; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } .col-xs-justify-content-space-evenly{ -ms-justify-content:space-evenly; -webkit-box-pack:space-evenly; -ms-flex-pack:space-evenly; justify-content:space-evenly; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xs-align-content-start{ -ms-align-content:start; -ms-flex-line-pack:start; align-content:start; } .col-xs-align-content-end{ -ms-align-content:end; -ms-flex-line-pack:end; align-content:end; } .col-xs-align-content-center{ -ms-align-content:center; -ms-flex-line-pack:center; align-content:center; } .col-xs-align-content-stretch{ -ms-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; } .col-xs-align-content-space-around{ -ms-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around; } .col-xs-align-content-space-between{ -ms-align-content:start; -ms-flex-line-pack:justify; align-content:space-between; } .col-xs-align-content-space-evenly{ -ms-align-content:end; -ms-flex-line-pack:space-evenly; align-content:space-evenly; } .col-xs-grid-auto-flow-row{ -ms-align-content:center; grid-auto-flow:row; } .col-xs-grid-auto-flow-column{ -ms-align-content:stretch; grid-auto-flow:column; } .col-xs-grid-auto-flow-dense{ -ms-align-content:space-around; grid-auto-flow:dense; } .col-xs-1{ -ms-grid-column-end: span 1; grid-column-end: span 1; } .col-xs-2{ -ms-grid-column-end: span 2; grid-column-end: span 2; } .col-xs-3{ -ms-grid-column-end: span 3; grid-column-end: span 3; } .col-xs-4{ -ms-grid-column-end: span 4; grid-column-end: span 4; } .col-xs-5{ -ms-grid-column-end: span 5; grid-column-end: span 5; } .col-xs-6{ -ms-grid-column-end: span 6; grid-column-end: span 6; } .col-xs-7{ -ms-grid-column-end: span 7; grid-column-end: span 7; } .col-xs-8{ -ms-grid-column-end: span 8; grid-column-end: span 8; } .col-xs-9{ -ms-grid-column-end: span 9; grid-column-end: span 9; } .col-xs-10{ -ms-grid-column-end: span 10; grid-column-end: span 10; } .col-xs-11{ -ms-grid-column-end: span 11; grid-column-end: span 11; } .col-xs-12{ -ms-grid-column-end: span 12; grid-column-end: span 12; } .col-xs-offset-2{ -ms-grid-column-start: 2; grid-column-start: 2; } .col-xs-offset-3{ -ms-grid-column-start: 3; grid-column-start: 3; } .col-xs-offset-4{ -ms-grid-column-start: 4; grid-column-start: 4; } .col-xs-offset-5{ -ms-grid-column-start: 5; grid-column-start: 5; } .col-xs-offset-6{ -ms-grid-column-start: 6; grid-column-start: 6; } .col-xs-offset-7{ -ms-grid-column-start: 7; grid-column-start: 7; } .col-xs-offset-8{ -ms-grid-column-start: 8; grid-column-start: 8; } .col-xs-offset-9{ -ms-grid-column-start: 9; grid-column-start: 9; } .col-xs-offset-10{ -ms-grid-column-start: 10; grid-column-start: 10; } .col-xs-offset-11{ -ms-grid-column-start: 11; grid-column-start: 11; } .col-xs-offset-12{ -ms-grid-column-start: 12; grid-column-start: 12; } .col-xs-justify-self-start{ -ms-justify-self:start; justify-self:start; } .col-xs-justify-self-end{ -ms-justify-self:end; justify-self:end; } .col-xs-justify-self-center{ -ms-justify-self:center; justify-self:center; } .col-xs-justify-self-stretch{ -ms-justify-self:stretch; justify-self:stretch; } .col-xs-align-self-start{ -ms-justify-self:start; -ms-flex-item-align:start; align-self:start; } .col-xs-align-self-end{ -ms-align-self:end; -ms-flex-item-align:end; align-self:end; } .col-xs-align-self-center{ -ms-align-self:center; -ms-flex-item-align:center; align-self:center; } .col-xs-align-self-stretch{ -ms-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch; } @media (max-width:767px) { /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-sm-justify-items-start{ -ms-justify-items:start; justify-items:start; } .col-sm-justify-items-end{ -ms-justify-items:end; justify-items:end; } .col-sm-justify-items-center{ -ms-justify-items:center; justify-items:center; } .col-sm-justify-items-stretch{ -ms-justify-items:stretch; justify-items:stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-sm-align-items-start{ -ms-align-items:start; -webkit-box-align:start; -ms-flex-align:start; align-items:start; } .col-sm-align-items-end{ -ms-align-items:end; -webkit-box-align:end; -ms-flex-align:end; align-items:end; } .col-sm-align-items-center{ -ms-align-items:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .col-sm-align-items-stretch{ -ms-align-items:stretch; -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-sm-justify-content-start{ -ms-justify-content:start; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:start; } .col-sm-justify-content-end{ -ms-justify-content:end; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:end; } .col-sm-justify-content-center{ -ms-justify-content:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; } .col-sm-justify-content-stretch{ -ms-justify-content:stretch; -webkit-box-pack:stretch; -ms-flex-pack:stretch; justify-content:stretch; } .col-sm-justify-content-space-around{ -ms-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around; } .col-sm-justify-content-space-between{ -ms-justify-content:space-between; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } .col-sm-justify-content-space-evenly{ -ms-justify-content:space-evenly; -webkit-box-pack:space-evenly; -ms-flex-pack:space-evenly; justify-content:space-evenly; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-sm-align-content-start{ -ms-align-content:start; -ms-flex-line-pack:start; align-content:start; } .col-sm-align-content-end{ -ms-align-content:end; -ms-flex-line-pack:end; align-content:end; } .col-sm-align-content-center{ -ms-align-content:center; -ms-flex-line-pack:center; align-content:center; } .col-sm-align-content-stretch{ -ms-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; } .col-sm-align-content-space-around{ -ms-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around; } .col-sm-align-content-space-between{ -ms-align-content:start; -ms-flex-line-pack:justify; align-content:space-between; } .col-sm-align-content-space-evenly{ -ms-align-content:end; -ms-flex-line-pack:space-evenly; align-content:space-evenly; } .col-sm-grid-auto-flow-row{ -ms-align-content:center; grid-auto-flow:row; } .col-sm-grid-auto-flow-column{ -ms-align-content:stretch; grid-auto-flow:column; } .col-sm-grid-auto-flow-dense{ -ms-align-content:space-around; grid-auto-flow:dense; } .col-sm-1{ -ms-grid-column-end: span 1; grid-column-end: span 1; } .col-sm-2{ -ms-grid-column-end: span 2; grid-column-end: span 2; } .col-sm-3{ -ms-grid-column-end: span 3; grid-column-end: span 3; } .col-sm-4{ -ms-grid-column-end: span 4; grid-column-end: span 4; } .col-sm-5{ -ms-grid-column-end: span 5; grid-column-end: span 5; } .col-sm-6{ -ms-grid-column-end: span 6; grid-column-end: span 6; } .col-sm-7{ -ms-grid-column-end: span 7; grid-column-end: span 7; } .col-sm-8{ -ms-grid-column-end: span 8; grid-column-end: span 8; } .col-sm-9{ -ms-grid-column-end: span 9; grid-column-end: span 9; } .col-sm-10{ -ms-grid-column-end: span 10; grid-column-end: span 10; } .col-sm-11{ -ms-grid-column-end: span 11; grid-column-end: span 11; } .col-sm-12{ grid-column-end: span 12; } .col-sm-offset-2{ -ms-grid-column-start: 2; grid-column-start: 2; } .col-sm-offset-3{ -ms-grid-column-start: 3; grid-column-start: 3; } .col-sm-offset-4{ -ms-grid-column-start: 4; grid-column-start: 4; } .col-sm-offset-5{ -ms-grid-column-start: 5; grid-column-start: 5; } .col-sm-offset-6{ -ms-grid-column-start: 6; grid-column-start: 6; } .col-sm-offset-7{ -ms-grid-column-start: 7; grid-column-start: 7; } .col-sm-offset-8{ -ms-grid-column-start: 8; grid-column-start: 8; } .col-sm-offset-9{ -ms-grid-column-start: 9; grid-column-start: 9; } .col-sm-offset-10{ -ms-grid-column-start: 10; grid-column-start: 10; } .col-sm-offset-11{ -ms-grid-column-start: 11; grid-column-start: 11; } .col-sm-offset-12{ -ms-grid-column-start: 12; grid-column-start: 12; } .col-sm-justify-self-start{ -ms-justify-self:start; justify-self:start; } .col-sm-justify-self-end{ -ms-justify-self:end; justify-self:end; } .col-sm-justify-self-center{ -ms-justify-self:center; justify-self:center; } .col-sm-justify-self-stretch{ -ms-justify-self:stretch; justify-self:stretch; } .col-sm-align-self-start{ -ms-justify-self:start; -ms-flex-item-align:start; align-self:start; } .col-sm-align-self-end{ -ms-align-self:end; -ms-flex-item-align:end; align-self:end; } .col-sm-align-self-center{ -ms-align-self:center; -ms-flex-item-align:center; align-self:center; } .col-sm-align-self-stretch{ -ms-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch; } } @media (min-width: 768px) { /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-md-justify-items-start{ -ms-justify-items:start; justify-items:start; } .col-md-justify-items-end{ -ms-justify-items:end; justify-items:end; } .col-md-justify-items-center{ -ms-justify-items:center; justify-items:center; } .col-md-justify-items-stretch{ -ms-justify-items:stretch; justify-items:stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-md-align-items-start{ -ms-align-items:start; -webkit-box-align:start; -ms-flex-align:start; align-items:start; } .col-md-align-items-end{ -ms-align-items:end; -webkit-box-align:end; -ms-flex-align:end; align-items:end; } .col-md-align-items-center{ -ms-align-items:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .col-md-align-items-stretch{ -ms-align-items:stretch; -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-md-justify-content-start{ -ms-justify-content:start; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:start; } .col-md-justify-content-end{ -ms-justify-content:end; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:end; } .col-md-justify-content-center{ -ms-justify-content:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; } .col-md-justify-content-stretch{ -ms-justify-content:stretch; -webkit-box-pack:stretch; -ms-flex-pack:stretch; justify-content:stretch; } .col-md-justify-content-space-around{ -ms-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around; } .col-md-justify-content-space-between{ -ms-justify-content:space-between; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } .col-md-justify-content-space-evenly{ -ms-justify-content:space-evenly; -webkit-box-pack:space-evenly; -ms-flex-pack:space-evenly; justify-content:space-evenly; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-md-align-content-start{ -ms-align-content:start; -ms-flex-line-pack:start; align-content:start; } .col-md-align-content-end{ -ms-align-content:end; -ms-flex-line-pack:end; align-content:end; } .col-md-align-content-center{ -ms-align-content:center; -ms-flex-line-pack:center; align-content:center; } .col-md-align-content-stretch{ -ms-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; } .col-md-align-content-space-around{ -ms-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around; } .col-md-align-content-space-between{ -ms-align-content:start; -ms-flex-line-pack:justify; align-content:space-between; } .col-md-align-content-space-evenly{ -ms-align-content:end; -ms-flex-line-pack:space-evenly; align-content:space-evenly; } .col-md-grid-auto-flow-row{ -ms-align-content:center; grid-auto-flow:row; } .col-md-grid-auto-flow-column{ -ms-align-content:stretch; grid-auto-flow:column; } .col-md-grid-auto-flow-dense{ -ms-align-content:space-around; grid-auto-flow:dense; } .col-md-1{ -ms-grid-column-end: span 1; grid-column-end: span 1; } .col-md-2{ -ms-grid-column-end: span 2; grid-column-end: span 2; } .col-md-3{ -ms-grid-column-end: span 3; grid-column-end: span 3; } .col-md-4{ -ms-grid-column-end: span 4; grid-column-end: span 4; } .col-md-5{ -ms-grid-column-end: span 5; grid-column-end: span 5; } .col-md-6{ -ms-grid-column-end: span 6; grid-column-end: span 6; } .col-md-7{ -ms-grid-column-end: span 7; grid-column-end: span 7; } .col-md-8{ -ms-grid-column-end: span 8; grid-column-end: span 8; } .col-md-9{ -ms-grid-column-end: span 9; grid-column-end: span 9; } .col-md-10{ -ms-grid-column-end: span 10; grid-column-end: span 10; } .col-md-11{ -ms-grid-column-end: span 11; grid-column-end: span 11; } .col-md-12{ grid-column-end: span 12; } .col-md-offset-2{ -ms-grid-column-start: 2; grid-column-start: 2; } .col-md-offset-3{ -ms-grid-column-start: 3; grid-column-start: 3; } .col-md-offset-4{ -ms-grid-column-start: 4; grid-column-start: 4; } .col-md-offset-5{ -ms-grid-column-start: 5; grid-column-start: 5; } .col-md-offset-6{ -ms-grid-column-start: 6; grid-column-start: 6; } .col-md-offset-7{ -ms-grid-column-start: 7; grid-column-start: 7; } .col-md-offset-8{ -ms-grid-column-start: 8; grid-column-start: 8; } .col-md-offset-9{ -ms-grid-column-start: 9; grid-column-start: 9; } .col-md-offset-10{ -ms-grid-column-start: 10; grid-column-start: 10; } .col-md-offset-11{ -ms-grid-column-start: 11; grid-column-start: 11; } .col-md-offset-12{ -ms-grid-column-start: 12; grid-column-start: 12; } .col-md-justify-self-start{ -ms-justify-self:start; justify-self:start; } .col-md-justify-self-end{ -ms-justify-self:end; justify-self:end; } .col-md-justify-self-center{ -ms-justify-self:center; justify-self:center; } .col-md-justify-self-stretch{ -ms-justify-self:stretch; justify-self:stretch; } .col-md-align-self-start{ -ms-justify-self:start; -ms-flex-item-align:start; align-self:start; } .col-md-align-self-end{ -ms-align-self:end; -ms-flex-item-align:end; align-self:end; } .col-md-align-self-center{ -ms-align-self:center; -ms-flex-item-align:center; align-self:center; } .col-md-align-self-stretch{ -ms-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch; } } @media (min-width:1200px) { /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xl-justify-items-start{ -ms-justify-items:start; justify-items:start; } .col-xl-justify-items-end{ -ms-justify-items:end; justify-items:end; } .col-xl-justify-items-center{ -ms-justify-items:center; justify-items:center; } .col-xl-justify-items-stretch{ -ms-justify-items:stretch; justify-items:stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xl-align-items-start{ -ms-align-items:start; -webkit-box-align:start; -ms-flex-align:start; align-items:start; } .col-xl-align-items-end{ -ms-align-items:end; -webkit-box-align:end; -ms-flex-align:end; align-items:end; } .col-xl-align-items-center{ -ms-align-items:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .col-xl-align-items-stretch{ -ms-align-items:stretch; -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xl-justify-content-start{ -ms-justify-content:start; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:start; } .col-xl-justify-content-end{ -ms-justify-content:end; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:end; } .col-xl-justify-content-center{ -ms-justify-content:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; } .col-xl-justify-content-stretch{ -ms-justify-content:stretch; -webkit-box-pack:stretch; -ms-flex-pack:stretch; justify-content:stretch; } .col-xl-justify-content-space-around{ -ms-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around; } .col-xl-justify-content-space-between{ -ms-justify-content:space-between; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; } .col-xl-justify-content-space-evenly{ -ms-justify-content:space-evenly; -webkit-box-pack:space-evenly; -ms-flex-pack:space-evenly; justify-content:space-evenly; } /*IN ORDER FOR THIS TO WORK, ALL ELEMENTS MUST HAVE A DEFINED WIDTH AND HEIGHT*/ .col-xl-align-content-start{ -ms-align-content:start; -ms-flex-line-pack:start; align-content:start; } .col-xl-align-content-end{ -ms-align-content:end; -ms-flex-line-pack:end; align-content:end; } .col-xl-align-content-center{ -ms-align-content:center; -ms-flex-line-pack:center; align-content:center; } .col-xl-align-content-stretch{ -ms-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; } .col-xl-align-content-space-around{ -ms-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around; } .col-xl-align-content-space-between{ -ms-align-content:start; -ms-flex-line-pack:justify; align-content:space-between; } .col-xl-align-content-space-evenly{ -ms-align-content:end; -ms-flex-line-pack:space-evenly; align-content:space-evenly; } .col-xl-grid-auto-flow-row{ -ms-align-content:center; grid-auto-flow:row; } .col-xl-grid-auto-flow-column{ -ms-align-content:stretch; grid-auto-flow:column; } .col-xl-grid-auto-flow-dense{ -ms-align-content:space-around; grid-auto-flow:dense; } .col-xl-1{ -ms-grid-column-end: span 1; grid-column-end: span 1; } .col-xl-2{ -ms-grid-column-end: span 2; grid-column-end: span 2; } .col-xl-3{ -ms-grid-column-end: span 3; grid-column-end: span 3; } .col-xl-4{ -ms-grid-column-end: span 4; grid-column-end: span 4; } .col-xl-5{ -ms-grid-column-end: span 5; grid-column-end: span 5; } .col-xl-6{ -ms-grid-column-end: span 6; grid-column-end: span 6; } .col-xl-7{ -ms-grid-column-end: span 7; grid-column-end: span 7; } .col-xl-8{ -ms-grid-column-end: span 8; grid-column-end: span 8; } .col-xl-9{ -ms-grid-column-end: span 9; grid-column-end: span 9; } .col-xl-10{ -ms-grid-column-end: span 10; grid-column-end: span 10; } .col-xl-11{ -ms-grid-column-end: span 11; grid-column-end: span 11; } .col-xl-12{ grid-column-end: span 12; } .col-xl-offset-2{ -ms-grid-column-start: 2; grid-column-start: 2; } .col-xl-offset-3{ -ms-grid-column-start: 3; grid-column-start: 3; } .col-xl-offset-4{ -ms-grid-column-start: 4; grid-column-start: 4; } .col-xl-offset-5{ -ms-grid-column-start: 5; grid-column-start: 5; } .col-xl-offset-6{ -ms-grid-column-start: 6; grid-column-start: 6; } .col-xl-offset-7{ -ms-grid-column-start: 7; grid-column-start: 7; } .col-xl-offset-8{ -ms-grid-column-start: 8; grid-column-start: 8; } .col-xl-offset-9{ -ms-grid-column-start: 9; grid-column-start: 9; } .col-xl-offset-10{ -ms-grid-column-start: 10; grid-column-start: 10; } .col-xl-offset-11{ -ms-grid-column-start: 11; grid-column-start: 11; } .col-xl-offset-12{ -ms-grid-column-start: 12; grid-column-start: 12; } .col-xl-justify-self-start{ -ms-justify-self:start; justify-self:start; } .col-xl-justify-self-end{ -ms-justify-self:end; justify-self:end; } .col-xl-justify-self-center{ -ms-justify-self:center; justify-self:center; } .col-xl-justify-self-stretch{ -ms-justify-self:stretch; justify-self:stretch; } .col-xl-align-self-start{ -ms-justify-self:start; -ms-flex-item-align:start; align-self:start; } .col-xl-align-self-end{ -ms-align-self:end; -ms-flex-item-align:end; align-self:end; } .col-xl-align-self-center{ -ms-align-self:center; -ms-flex-item-align:center; align-self:center; } .col-xl-align-self-stretch{ -ms-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch; } } .grid-container > .neos-contentcollection > * { width:auto !important; } .grid-container .row-1{ height:auto !important; } .grid-container .row-1{ grid-row : span 1; } .grid-container .row-2{ height:auto !important; } .grid-container .row-2{ grid-row : span 2; } .grid-container .row-3{ height:auto !important; } .grid-container .row-3{ grid-row : span 3; } .neos-backend a,.neos-backend button{ /* pointer-events: none; &.PSbCNW_toolBar__btnGroup__btn{ pointer-events: auto; }*/ } .neos-backend .content_menu { /*display: none;*/ } .neos-backend .om3__admin__info { position : fixed; bottom : 240px; left : 100%; z-index : 100000; text-transform : uppercase; -webkit-user-select : none; -moz-user-select : none; -ms-user-select : none; user-select : none; pointer-events : none; cursor : default; } .neos-backend .om3__admin__info_content,.neos-backend .om3__admin__type__debug { color : var(--white-color,white); position : relative; white-space: nowrap; /* legacy */ font-family : 'Noto Sans', sans-serif; font-size : 10px; font-weight : 700; letter-spacing: .1px; } .neos-backend .om3__admin__info_content span, .neos-backend .om3__admin__type__debug span { background-color: rgba(0, 181, 255, .9); margin : 0 2px 0 0; white-space : nowrap; padding : 2px 8px 3px; } .neos-backend .hide-hidden-nodes .TnLEVq_markHiddenNodeAsHidden { display:none !important; } .neos-backend [data-sal|=fade] { opacity: 1 !important; } .om3__admin__smalldescription { font-size : 8px; background : #00B5FF; color : #fff; padding : 1px 5px; position : relative; top : -2px; } /* obsolete ?? */ /* .neos-tooltip { display : none !important; visibility : hidden !important; user-select : none; pointer-events: none } .neos ul.neos-dynatree-container ul ul ul .neos-dynatree-node { white-space: nowrap } */ .host__productdetail { /* border: 1px dotted red !important;*/ --balloon-color: var(--brand-color-primary,black); } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > * { /*border: 2px dotted cyan !important;*/ background-color: var(--white-color,white); width:100%; min-width:320px; min-height: 200px; margin-top:40px; } /*border: 2px dotted blue !important;*/ .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-text { width:100%; padding:5px 0px; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-text p{ text-align:left !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-text p{ padding-left: 10px; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-clip.__s_contentverticalalign__top > .neos-contentcollection{ -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-clip.__s_contentverticalalign__top > .neos-contentcollection{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap:wrap; flex-wrap:wrap; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-clip.__s_contentverticalalign__top > .neos-contentcollection > * { margin:0 0 10px 10px !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-clip.__s_contentverticalalign__top > .neos-contentcollection > * { border: 1px solid black; height:200px; width:100px; } /* outline: 2px dotted red !important;*/ .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end; -ms-flex-wrap:wrap; flex-wrap:wrap; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-text { width:100%; padding:5px; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-text p{ /* color:white !important;*/ } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-clip{ margin: 5px !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-clip{ /*outline: 2px dotted red !important;*/ border: 1px solid black; width:80px; height:40px; white-space: nowrap; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-clip > .neos-contentcollection{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:last-of-type > .neos-contentcollection .perm-clip > .neos-contentcollection > .perm-clip{ } @media (min-width:1200px) { .host__productdetail { position:fixed !important } .host__productdetail { /* border: 1px dotted purple !important;*/ /* transform: translate3d(0,0,0);*/ z-index:12; left:0; top:100px /*user-select: none; pointer-events: none;*/ } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection{ -webkit-box-pack:justify !important; -ms-flex-pack:justify !important; justify-content:space-between !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection{ -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > * { width:20%; min-height: 80vh; padding: 20px 20px; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection .perm-text p{ text-align:right !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection > .perm-clip.__s_contentverticalalign__top > .neos-contentcollection{ -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .host__productdetail.childred-align-left.clip-container.__s_contentverticalalign__top > .neos-contentcollection > *:first-of-type > .neos-contentcollection > .perm-clip.__s_contentverticalalign__top > .neos-contentcollection{ /* outline: 2px dotted lightseagreen !important;*/ } } ._item__share { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.30s; transition-duration: 0.30s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-delay: 0.00s; transition-delay: 0.00s; position: fixed; right: 30px; top: 65px; background: transparent; margin: 0px 0px 40px 0px; z-index: 510; text-align: right; } ._item__share { right: 15px; top: 55px; } @media (min-width:1200px) { ._item__share { padding: 5px 30px 5px 10px } } ._item__share._active__true { z-index: 1510; } ._menucompact__1 ._item__share { -webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: skewX(0deg) skewY(0deg) scale(1.0, 1.0) rotate(0deg) translate(0px, 10px); transform: skewX(0deg) skewY(0deg) scale(1.0, 1.0) rotate(0deg) translate(0px, 10px); } ._menucompact__2 ._item__share { -webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: skewX(0deg) skewY(0deg) scale(1.0, 1.0) rotate(0deg) translate(0px, 80px); transform: skewX(0deg) skewY(0deg) scale(1.0, 1.0) rotate(0deg) translate(0px, 80px); } ._item__share__content { position: absolute !important; border-width: 8px !important; } ._item__share__content { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.20s; transition-duration: 0.20s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-delay: 0.00s; transition-delay: 0.00s; top: -13px; right: 26px; background-color: var(--white-color,white); border-right: 20px solid white; border-left: 20px solid white; width: 315px; max-width: calc(100vw - 23px); z-index: 1025; text-align: left; opacity: 0.00; overflow: hidden; height: 67px; } ._item__share__content { position: relative; display: inline-block; border: 20px solid transparent; } ._item__share._active__true ._item__share__content { opacity: 1.00; } ._item__share__content > p { font-size: 14px !important; } ._item__share__content > p { color: var(--brand-color-primary,blue); } ._item__share__content__text { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ._item__share__content__copy { color: var(--white-color,white) !important; opacity: 0.01 !important; vertical-align: text-bottom !important; } ._item__share__content__copy { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: all; cursor: pointer; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.20s; transition-duration: 0.20s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-delay: 0.00s; transition-delay: 0.00s; background-color: var(--brand-color-primary,blue); display: inline-block; border-radius: 2px; padding: 1px 6px 3px 8px; position: relative; margin-left: 6px; top: 0px; } ._item__share__content__copy:hover { background-color: #121e2d !important; } ._item__share__content__uri { -webkit-user-select: all; -moz-user-select: all; user-select: all; pointer-events: all; margin: 3px 0px 0px 0px; background-color: var(--body-bg-color,white); padding: 4px 10px 4px 4px; display: inline-block; cursor: text; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } ._item__share__button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: all; cursor: pointer; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.40s; transition-duration: 0.40s; -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-delay: 0.00s; transition-delay: 0.00s; z-index: 1026; position: relative; border-radius: 50.00%; top: 0px; left: 3px; background-color: rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0); } ._item__share__button:hover { -webkit-animation-name: dc7__animation__kf_pop; animation-name: dc7__animation__kf_pop; -webkit-animation-duration: 0.30s; animation-duration: 0.30s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); -webkit-animation-delay: 0.00s; animation-delay: 0.00s; } ._item__share._active__true ._item__share__button { top: -13px; border: 21px solid white; background-color: white; } ._item__share__button__img { width: 25px; height: 25px; } .perm-branding-label{ display: none; position: fixed; bottom: -2px; left: 10%; z-index: 600; border:1px solid var(--white-color,white); } .dc7__modal__bs_in_modal__true .perm-branding-label{ display:none !important; } @media (min-width: 768px) { .perm-branding-label{ display: block } } @media (min-width:1200px) { .perm-branding-label{ display: block } } .color-dark h1,.color-dark h2,.color-dark h3,.color-dark h4,.color-dark h5,.color-dark h6,.color-dark label,.color-dark a,.color-dark p{ color: var(--dark-color,grey); } .color-blue h1,.color-blue h2,.color-blue h3,.color-blue h4,.color-blue h5,.color-blue h6,.color-blue label,.color-blue a,.color-blue p{ color: var(--brand-color-primary,blue); } .color-bright h1,.color-bright h2,.color-bright h3,.color-bright h4,.color-bright h5,.color-bright h6,.color-bright label,.color-bright a,.color-bright p{ color: var(--white-color,white); } .color-neutral h1,.color-neutral h2,.color-neutral h3,.color-neutral h4,.color-neutral h5,.color-neutral h6,.color-neutral label,.color-neutral a{ color: var(--aogv-gray-light,gray); } .color-copy-dark p,.color-copy-dark li,.color-copy-dark a,.color-copy-dark h1,.color-copy-dark h2,.color-copy-dark h3,.color-copy-dark h4,.color-copy-dark h5,.color-copy-dark h6{ color: var(--dark-color,grey); } .color-copy-blue p,.color-copy-blue li,.color-copy-blue a,.color-copy-blue h1,.color-copy-blue h2,.color-copy-blue h3,.color-copy-blue h4,.color-copy-blue h5,.color-copy-blue h6{ color: var(--brand-color-primary,blue) !important; } .color-copy-bright p,.color-copy-bright li,.color-copy-bright a,.color-copy-bright h1,.color-copy-bright h2,.color-copy-bright h3,.color-copy-bright h4,.color-copy-bright h5,.color-copy-bright h6{ /* color: var(--white-color,white) !important;*/ color: var(--white-color,white); } .color-copy-accent p,.color-copy-accent li,.color-copy-accent a,.color-copy-accent h1,.color-copy-accent h2,.color-copy-accent h3,.color-copy-accent h4,.color-copy-accent h5,.color-copy-accent h6,.color-copy-accent label,.color-copy-accent a{ color: var(--brand-color-primary,blue); } /*TODO maybe refactor using @nest */ .perm-nav-header { min-height: var(--nav-header-height-min, 70px); /*hide header and navigation inside modals */ border-bottom: 1px solid var(--nav-header-border-color, #e6e6e6); } .dc7__modal__bs_in_modal__true .perm-nav-header { display: none !important; } .nav-menu-trigger { /*outline: 2px dashed red;*/ position: absolute; left: var(--mobile-nav-padding); display: block; z-index: 2; height: 16px; width: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .nav-menu-trigger:not(.is-open) .nav-open-btn { display: inline-block; } .nav-menu-trigger:not(.is-open) .nav-close-btn { display: none; } .nav-menu-trigger.is-open .nav-open-btn { display: none; } .nav-menu-trigger.is-open .nav-close-btn { display: inline-block; } .nav-panel-icon { color: var(--nav-links-color, #ffffff); } .nav-panel-icon svg { width: 100%; height: auto; color: var(--nav-links-color, #ffffff); -webkit-transform: scale(1.4); transform: scale(1.4); } .segment-menu { width: 100%; max-width: 100vw; position: fixed; z-index: 1000; left: 0; top: 0; /* SHAME*/ } .segment-menu.is-fixed { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .segment-menu.can-animate { -webkit-transition: visibility 0s 0.3s linear, -webkit-transform 0.3s ease; transition: visibility 0s 0.3s linear, -webkit-transform 0.3s ease; transition: transform 0.3s ease, visibility 0s 0.3s linear; transition: transform 0.3s ease, visibility 0s 0.3s linear, -webkit-transform 0.3s ease; } .segment-menu.scroll-up { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* padding:0 !important;*/ .segment-menu .nav-menu { /* outline: 2px dashed red;*/ margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; /*padding: 0 calc(var(--base-padding, 30px) / 3);*/ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 100%; -webkit-transform: none; transform: none; -webkit-transform: initial; transform: initial; background-color: var(--nav-bg-color, white); -webkit-transition: var(--transition-all); transition: var(--transition-all); } .segment-menu .nav-menu .nav-menu-links { display: none; } .segment-menu .nav-menu .nav-menu-links > div { display: inline-block; margin-left: 20px; } .segment-menu .nav-menu .nav-menu-links > div a { color: var(--nav-links-color, white); letter-spacing: var(--nav-links-letter-spacing, 2.41px); font-size: var(--nav-links-font-size, 24px); text-transform: var(--nav-links-text-transform,none); text-transform: var(--nav-links-text-transform,initial); white-space: nowrap; text-decoration: none; } .segment-menu .nav-menu .nav-menu-links > div a:hover { color: var(--nav-links-focus-color, currentColor); } @media (min-width:1200px) { .nav-menu_burger { display: none; } .segment-menu .nav-menu .nav-menu-links { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--nav-links-gap,4px); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .nav-menu-links > div { -webkit-box-sizing: border-box; box-sizing: border-box; } .nav-menu-links > div a { font-weight: 400; } .nav-menu-links > div a:hover, .nav-menu-links > div a:focus { outline: none; } .nav-menu-links > div a:hover:before, .nav-menu-links > div a:focus:before { width: 30%; } .nav-menu-links > div a.focus-visible { outline: var(--focus-outline); outline-offset: 0.8rem; } .nav-menu-links > div a:focus-visible { outline: var(--focus-outline); outline-offset: 0.8rem; } .nav-menu-meta { /* z-index: 3;*/ margin: 0 auto; } @media (min-width:1200px) { .nav-menu-meta { margin: 0 } } /* Logo Hover */ .header-logo { display: inline-block; margin: 0 auto; width: var(--nav-header-width, 70px); height: var(--nav-header-height, 70px); -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } /* outline: 2px dashed red;*/ .header-logo img { width: 100%; height: 100%; } .header-logo:hover, .header-logo:focus { -webkit-transform: scale(0.8); transform: scale(0.8); } .header-logo.focus-visible { outline: var(--focus-outline); outline-offset: 0.8rem; } .header-logo:focus-visible { outline: var(--focus-outline); outline-offset: 0.8rem; } @media (min-width:1200px) { .header-logo { /* width: var(--logo-size-desktop,480px);*/ } } .menu-scroll-trigger { position: absolute; z-index: 2; top: 0; width: 100%; height: 3rem; background-color: red; pointer-events: none; visibility: hidden; padding: 80px 0px 0px 0px; } @media (max-width:767px) { .menu-scroll-trigger { display: none } } @media (min-width: 768px) { .menu-scroll-trigger { display: none } } @media (min-width:1200px) { .menu-scroll-trigger { display: block } } /* hide menu in backend */ /* .neos-backend .segment-menu { display: none !important; } */ .neos-backend .segment-menu { pointer-events: none !important; } /* Mobile Nav Panel*/ .menu-panel { position: fixed; z-index: 100; /* top: var(--nav-header-height-min ,70px);*/ top: -100vh; left: 0; width: 100vw; height: calc(100vh - var(--nav-header-height-min, 70px)); opacity: 0.00; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); background-color: var(--nav-panel-bg-color, rgba(39, 89, 136, 0.9)); backdrop-filter: blur(4px); -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; transition: opacity 0.4s ease, -webkit-transform 0.4s ease; transition: opacity 0.4s ease, transform 0.4s ease; transition: opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease; } .menu-panel .mobile-navigation-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; pointer-events: initial; padding: 0 var(--mobile-nav-padding); opacity: 1.00; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; -webkit-transition-delay: 0.36s; transition-delay: 0.36s; } .menu-panel .mobile-navigation-links > div { /* margin-bottom:30px;*/ width: 100%; } .menu-panel .mobile-navigation-links > div a { display: block; padding: 1rem 0; font-size: var(--nav-links-font-size,14px); text-transform: var(--nav-links-text-transform); letter-spacing: 1px; font-weight: 400; margin: 0; /* color: var(--black-color);*/ } .menu-panel .mobile-navigation-links > div:not(:last-of-type) { border-bottom: 1px solid #ccc; } .menu-panel.is-open { opacity: 1.00; -webkit-transform: translate3d(0, calc(100vh + var(--nav-header-height-min, 70px)), 0); transform: translate3d(0, calc(100vh + var(--nav-header-height-min, 70px)), 0); pointer-events: none; } .menu-panel.is-open .mobile-navigation-links { opacity: 1.00; } .current > a { text-decoration: underline; } .mobile-navigation-links.mobile-navigation-links a { text-decoration: none; position: relative; color: var(--nav-links-color, red); font-family: var(--base-font-family); font-size: var(--font-size-nav-links-mobile, 24px); font-weight: 600; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: 30px; } .has-scrolling-disabled { overflow: hidden !important; } .nav-container { /* outline:2px dashed red; DEBUG*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position:relative; margin:0 auto; width:100%; padding:0 var(--content-padding-xs); } @media (max-width:767px) { .nav-container { max-width: var(--content-max-width-sm,590px); padding:0 var(--content-padding-sm) } } @media (min-width: 768px) { .nav-container { max-width: var(--content-max-width-md,590px); padding:0 var(--content-padding-md) } } @media (min-width: 992px) { .nav-container { max-width: var(--content-max-width-lg,788px); padding:0 var(--content-padding-lg) } } @media (min-width:1200px) { .nav-container { max-width: var(--content-max-width-xl,1480px); padding:0 var(--content-padding-xl) } } @media (min-width:1400px) { .nav-container { max-width: var(--content-max-width-xxl,1480px); padding:0 var(--content-padding-xxl) } } .current a { position: relative; } .current a:before { width: 30px !important; } :root{ } .perm-hr{ border: none; border-top: var(--perm-hr-thickness,1px) var(--perm-hr-style) var(--perm-hr-color); border-color: var(--perm-hr-color); opacity: var(--perm-hr-opacity,1); } /* shows teaser boxes (cards) in a flex grid to have same height grid items without JS. Last item in grid is centered */ @media (min-width:1200px) { .teaser-grid-rf{ display: block; } .teaser-grid-rf > .neos-contentcollection{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .teaser-grid-rf > .neos-contentcollection >div:last-of-type { margin:0 auto; } .teaser-grid-rf > .neos-contentcollection > div > .neos-contentcollection{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: stretch; align-self: stretch; } .teaser-grid-rf > .neos-contentcollection > div > .neos-contentcollection >div:last-child { margin-top:auto; } } .teaser-card-rf > .neos-contentcollection{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: stretch; align-self: stretch; } .teaser-card-rf > .neos-contentcollection >div:last-child { margin-top:auto; } :root { --col-1-12 : calc(100% / 12); --col-2-12 : calc(100% / 12 * 2); --col-3-12 : calc(100% / 12 * 3); --col-4-12 : calc(100% / 12 * 4); --col-5-12 : calc(100% / 12 * 5); --col-6-12 : calc(100% / 12 * 6); --col-7-12 : calc(100% / 12 * 7); --col-8-12 : calc(100% / 12 * 8); --col-9-12 : calc(100% / 12 * 9); --col-10-12 : calc(100% / 12 * 10); --col-11-12 : calc(100% / 12 * 11); --col-12-12 : 100%; } .flex-container > .neos-contentcollection { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; gap:var(--grid-gap,1vmax); } @media (max-width:767px) { .flex-container.flex-direction-horizontal > .neos-contentcollection { -ms-flex-wrap: wrap; flex-wrap: wrap } } .has-flex-wrap.flex-direction-horizontal > .neos-contentcollection { -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width:767px) { .col-sm-12 { width:100%; -ms-flex-preferred-size:100%; flex-basis:100%; } .col-sm-6 { width:50%; -ms-flex-preferred-size:50%; flex-basis:50%; } .col-sm-4 { width:var(--col-4-12); -ms-flex-preferred-size:var(--col-4-12); flex-basis:var(--col-4-12); } .col-sm-3 { width:var(--col-3-12); -ms-flex-preferred-size:var(--col-3-12); flex-basis:var(--col-3-12); } .col-sm-1 { width:var(--col-1-12); } .col-sm-2 { width:var(--col-2-12); -ms-flex-preferred-size:var(--col-2-12); flex-basis:var(--col-2-12); } .col-sm-5 { width:var(--col-5-12); -ms-flex-preferred-size:var(--col-5-12); flex-basis:var(--col-5-12); } .col-sm-7 { width:var(--col-7-12); -ms-flex-preferred-size:var(--col-7-12); flex-basis:var(--col-7-12); } .col-sm-8 { width:var(--col-8-12); -ms-flex-preferred-size:var(--col-8-12); flex-basis:var(--col-8-12); } .col-sm-9 { width:var(--col-9-12); -ms-flex-preferred-size:var(--col-9-12); flex-basis:var(--col-9-12); } .col-sm-10 { width:var(--col-10-12); -ms-flex-preferred-size:var(--col-10-12); flex-basis:var(--col-10-12); } .col-sm-11 { width:var(--col-11-12); -ms-flex-preferred-size:var(--col-11-12); flex-basis:var(--col-11-12); } } @media (min-width: 768px) { /* tablet */ .col-md-12 { width:100%; -ms-flex-preferred-size:100%; flex-basis:100%; } .col-md-6 { width:50%; -ms-flex-preferred-size:50%; flex-basis:50%; } .col-md-4 { width:var(--col-4-12); -ms-flex-preferred-size:var(--col-4-12); flex-basis:var(--col-4-12); } .col-md-3 { width:var(--col-3-12); -ms-flex-preferred-size:var(--col-3-12); flex-basis:var(--col-3-12); } .col-md-1 { width:var(--col-1-12); -ms-flex-preferred-size:var(--col-1-12); flex-basis:var(--col-1-12); } .col-md-2 { width:var(--col-2-12); -ms-flex-preferred-size:var(--col-2-12); flex-basis:var(--col-2-12); } .col-md-5 { width:var(--col-5-12); -ms-flex-preferred-size:var(--col-5-12); flex-basis:var(--col-5-12); } .col-md-7 { width:var(--col-7-12); -ms-flex-preferred-size:var(--col-7-12); flex-basis:var(--col-7-12); } .col-md-8 { width:var(--col-8-12); -ms-flex-preferred-size:var(--col-8-12); flex-basis:var(--col-8-12); } .col-md-9 { width:var(--col-9-12); -ms-flex-preferred-size:var(--col-9-12); flex-basis:var(--col-9-12); } .col-md-10 { width:var(--col-10-12); -ms-flex-preferred-size:var(--col-10-12); flex-basis:var(--col-10-12); } .col-md-11 { width:var(--col-11-12); -ms-flex-preferred-size:var(--col-11-12); flex-basis:var(--col-11-12); } } @media (min-width:1200px) { .col-xl-12 { width:100%; -ms-flex-preferred-size:100%; flex-basis:100%; } .col-xl-6 { width:50%; -ms-flex-preferred-size:50%; flex-basis:50%; } .col-xl-4 { width:var(--col-4-12); -ms-flex-preferred-size:var(--col-4-12); flex-basis:var(--col-4-12); } .col-xl-3 { width:var(--col-3-12); -ms-flex-preferred-size:var(--col-3-12); flex-basis:var(--col-3-12); } .col-xl-1 { width:var(--col-1-12); } .col-xl-2 { width:var(--col-2-12); -ms-flex-preferred-size:var(--col-2-12); flex-basis:var(--col-2-12); } .col-xl-5 { width:var(--col-5-12); -ms-flex-preferred-size:var(--col-5-12); flex-basis:var(--col-5-12); } .col-xl-7 { width:var(--col-7-12); -ms-flex-preferred-size:var(--col-7-12); flex-basis:var(--col-7-12); } .col-xl-8 { width:var(--col-8-12); -ms-flex-preferred-size:var(--col-8-12); flex-basis:var(--col-8-12); } .col-xl-9 { width:var(--col-9-12); -ms-flex-preferred-size:var(--col-9-12); flex-basis:var(--col-9-12); } .col-xl-10 { width:var(--col-10-12); -ms-flex-preferred-size:var(--col-10-12); flex-basis:var(--col-10-12); } .col-xl-11 { width:var(--col-11-12); -ms-flex-preferred-size:var(--col-11-12); flex-basis:var(--col-11-12); } } /* LEGACY */ div[class*=col-] { background-clip: padding-box } /*border: 2px dashed yellow !important;*/ .border-color-dark{ border-color:var(--dark-color,white); } .border-color-bright{ border-color:var(--bright-color,white); } .border-color-neutral{ border-color:var(--bright-neutral,gray); } .border-color-ci-1{ border-color:var(--brand-color-primary,red); } .border-color-ci-2{ border-color:var(--brand-color-secondary,blue); } .border-color-ci-3{ border-color:var(--brand-color-tertiary,green); } .border-color-ci-4{ border-color:var(--brand-color-accent,green); } .border-width-sm { border-width: var(--border-width-sm, 1px); } .border-width-md { border-width: var(--border-width-md, 2px); } .border-width-lg { border-width: var(--border-width-lg, 4px); } .border-style-solid { border-style: solid; } .border-style-dashed { border-style: dashed; } .border-style-dotted { border-style: dotted; } .background-color-dark{ background-color:var(--dark-color,white); } .background-color-bright{ background-color:var(--bright-color,white); } .background-color-neutral{ background-color:var(--bright-neutral,gray); } .background-color-ci-1{ background-color:var(--brand-color-primary,red); } .background-color-ci-2{ background-color:var(--brand-color-secondary,blue); } .background-color-ci-3{ background-color:var(--brand-color-tertiary,green); } .background-color-ci-4{ background-color:var(--brand-color-accent,green); } /*TODO put here in a central place all conflicts and overrides of existing legacy CSS hacky solutions you plan to refactor and clean up later . */ .typekit-badge { visibility: hidden !important; display: none !important } .typekit-badge { border: none } .om3__segment__html { font-size: 16px; } .button { text-align: center !important; } .mobile-navigation-links { width: 100%; /* TODO should be 100% by default display block */ } .segment-menu_navigation_burger_icon { opacity: 1 !important; } .segment-menu { position: fixed !important; } .segment-menu .nav-menu { max-width: 100% !important; } .segment-menu .nav-menu._topalign__false { border: 1px solid deepskyblue !important; } /*TODO refactor rest from host export min in own modules */ .om3__segment__googlemap { padding-left: 0 !important; padding-right: 0 !important } .om3__segment__googlemap iframe { width: 100%; height: 400px; } .segment-menu { padding: 0 !important; } /* CSS only Tooltip */ /* https://github.com/kazzkiq/balloon.css */ :root { --balloon-border-radius: 2px; --balloon-color: rgba(16, 16, 16, 0.95); --balloon-text-color: #fff; --balloon-font-size: 12px; --balloon-move: 4px; } button[aria-label][data-balloon-pos] { overflow: visible; } [aria-label][data-balloon-pos] { position: relative; cursor: pointer; } [aria-label][data-balloon-pos]:after { opacity: 0; pointer-events: none; -webkit-transition: all 0.18s ease-out 0.18s; transition: all 0.18s ease-out 0.18s; text-indent: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-weight: normal; font-style: normal; text-shadow: none; font-size: var(--balloon-font-size); background: var(--balloon-color); border-radius: 2px; color: var(--balloon-text-color); border-radius: var(--balloon-border-radius); content: attr(aria-label); padding: .5em 1em; position: absolute; white-space: nowrap; z-index: 10; } [aria-label][data-balloon-pos]:before { width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--balloon-color); opacity: 0; pointer-events: none; -webkit-transition: all 0.18s ease-out 0.18s; transition: all 0.18s ease-out 0.18s; content: ""; position: absolute; z-index: 10; } [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after { opacity: 1; pointer-events: none; } [aria-label][data-balloon-pos].font-awesome:after { font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } [aria-label][data-balloon-pos][data-balloon-break]:after { white-space: pre; } [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after { white-space: pre-line; word-break: break-word; } [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after { -webkit-transition: none; transition: none; } [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after { left: 0; } [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before { left: 5px; } [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after { right: 0; } [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before { right: 5px; } [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after { -webkit-transform: translate(0, 0); transform: translate(0, 0); } [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before { -webkit-transform: translate(0, 0); transform: translate(0, 0); } [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after { bottom: 100%; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: translate(0, var(--balloon-move)); transform: translate(0, var(--balloon-move)); } [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after { margin-bottom: 10px; } [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after { left: 50%; -webkit-transform: translate(-50%, var(--balloon-move)); transform: translate(-50%, var(--balloon-move)); } [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after { top: 100%; -webkit-transform: translate(0, calc(var(--balloon-move) * -1)); transform: translate(0, calc(var(--balloon-move) * -1)); } [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after { margin-top: 10px; } [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before { width: 0; height: 0; border: 5px solid transparent; border-bottom-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before { left: 50%; -webkit-transform: translate(-50%, calc(var(--balloon-move) * -1)); transform: translate(-50%, calc(var(--balloon-move) * -1)); } [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before { right: 100%; top: 50%; -webkit-transform: translate(var(--balloon-move), -50%); transform: translate(var(--balloon-move), -50%); } [aria-label][data-balloon-pos][data-balloon-pos="left"]:after { margin-right: 10px; } [aria-label][data-balloon-pos][data-balloon-pos="left"]:before { width: 0; height: 0; border: 5px solid transparent; border-left-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before { left: 100%; top: 50%; -webkit-transform: translate(calc(var(--balloon-move) * -1), -50%); transform: translate(calc(var(--balloon-move) * -1), -50%); } [aria-label][data-balloon-pos][data-balloon-pos="right"]:after { margin-left: 10px; } [aria-label][data-balloon-pos][data-balloon-pos="right"]:before { width: 0; height: 0; border: 5px solid transparent; border-right-color: var(--balloon-color); } [aria-label][data-balloon-pos][data-balloon-length]:after { white-space: normal; } [aria-label][data-balloon-pos][data-balloon-length="small"]:after { width: 80px; } [aria-label][data-balloon-pos][data-balloon-length="medium"]:after { width: 150px; } [aria-label][data-balloon-pos][data-balloon-length="large"]:after { width: 260px; } [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after { width: 380px; } @media screen and (max-width: 768px) { [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after { width: 90vw; } } [aria-label][data-balloon-pos][data-balloon-length="fit"]:after { width: 100%; } .perm-clip{ /*outline:1px dashed red;*/ } .clip-container{ /* font-size: 0 */ /* to the body element, to disable the gap when you use display: inline-block */ /* outline: 1px dotted purple;*/ background-clip: padding-box; background-size : cover; background-repeat : no-repeat; background-position : center; display : block; height:100%; overflow: hidden; } /*padding: 40px 0;*/ @media (min-width: 768px) { .page-content>.neos-contentcollection > .clip-container{ /*padding: 50px 0;*/ } } @media (min-width:1200px) { .page-content>.neos-contentcollection > .clip-container{ /*padding: 90px 0;*/ } } .clip-container.has-columns{ display: block !important; } .clip-container.has-columns > .neos-contentcollection { display: block !important; } .clip-container.has-columns > .neos-contentcollection { -webkit-columns: 3 auto; -moz-columns: 3 auto; columns: 3 auto; -webkit-column-gap:var(--grid-gap,1rem); -moz-column-gap:var(--grid-gap,1rem); column-gap:var(--grid-gap,1rem); } .clip-container.has-columns > .neos-contentcollection > *{ margin-bottom:var(--grid-gap,1rem); } @media (min-width: 75em){ .clip-container.has-columns > .neos-contentcollection { -webkit-columns: 3 auto; -moz-columns: 3 auto; columns: 3 auto; -webkit-column-gap:var(--grid-gap,1rem); -moz-column-gap:var(--grid-gap,1rem); column-gap:var(--grid-gap,1rem); } } .clip-container.has-shadow > .neos-contentcollection{ -webkit-box-shadow:var(--shadow-fx-soft,30px 30px 50px 0px rgba(0, 0, 0, 0.28)); box-shadow:var(--shadow-fx-soft,30px 30px 50px 0px rgba(0, 0, 0, 0.28)); } .clip-container.childred-y-align-start:not(.childred-same-height){ -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .clip-container.childred-y-align-start:not(.childred-same-height) > .neos-contentcollection{ -webkit-box-align: start; -ms-flex-align: start; align-items: start; -ms-flex-line-pack: start; align-content: start; } .clip-container.childred-y-align-center > .neos-contentcollection{ -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .clip-container.childred-y-align-end > .neos-contentcollection{ -ms-flex-line-pack: end; align-content: end; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .clip-container.childred-same-height > .neos-contentcollection{ -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; height: 100%; } .clip-container.childred-same-height > .neos-contentcollection .clip-container { height: auto; } .clip-container.childred-same-height > .neos-contentcollection > div > .neos-contentcollection{ height: 100%; } .clip-container.childred-x-align-start > .neos-contentcollection{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } .clip-container.childred-x-align-center > .neos-contentcollection{ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .clip-container.childred-x-align-end > .neos-contentcollection{ -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @supports(justify-content: end){ .clip-container.childred-x-align-end > .neos-contentcollection{ -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end } } .clip-container.has-content-limit > .neos-contentcollection{ /* outline:2px dashed mediumpurple; DEBUG*/ position:relative; margin:0 auto; width:100%; padding:0 var(--content-padding-xs); } @media (max-width:767px) { .clip-container.has-content-limit > .neos-contentcollection{ max-width: var(--content-max-width-sm,590px); padding:0 var(--content-padding-sm) } } @media (min-width: 768px) { .clip-container.has-content-limit > .neos-contentcollection{ max-width: var(--content-max-width-md,590px); padding:0 var(--content-padding-md) } } @media (min-width: 992px) { .clip-container.has-content-limit > .neos-contentcollection{ max-width: var(--content-max-width-lg,788px); padding:0 var(--content-padding-lg) } } @media (min-width:1200px) { .clip-container.has-content-limit > .neos-contentcollection{ max-width: var(--content-max-width-xl,1480px); padding:0 var(--content-padding-xl) } } @media (min-width:1400px) { .clip-container.has-content-limit > .neos-contentcollection{ max-width: var(--content-max-width-xxl,1480px); padding:0 var(--content-padding-xxl) } } .clip-container >.clip-container_backgroundvideo,.clip-container >.clip-container_backgroundoverlay { /* position: absolute; z-index : 1; top : 0; right : 0; bottom : 0; left : 0; overflow: hidden;*/ } .clip-container >.clip-container_backgroundoverlay { z-index : 2; } .clip-container.justify-initial > .neos-contentcollection{ -webkit-box-pack: initial; -ms-flex-pack: initial; justify-content: initial; } .clip-container.justify-end > .neos-contentcollection{ -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .clip-container.justify-space-between > .neos-contentcollection{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .clip-container.justify-space-evenly > .neos-contentcollection{ -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .clip-container.flex-direction-horizontal > .neos-contentcollection{ -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .clip-container.flex-direction-vertical > .neos-contentcollection{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .background-video{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .clip-anchor { position: absolute; top: calc(0px - var(--nav-header-height) - 30px ); } .link-overlay{ top: 0; right: 0; bottom: 0; left: 0; z-index:1; } /*Mouse over Zoom FX*/ .link-overlay.focus-visible { outline: var(--focus-outline); outline-offset: -0.3rem; } .link-overlay:focus-visible { outline: var(--focus-outline); outline-offset: -0.3rem; } .clip-container .link-overlay { position: absolute; } /* .anker { position: absolute; opacity: 0; top: -270px !important; }*/ .display-type-inline-block{ display: inline-block; } .display-type-block{ display: block; } .display-type-flex{ display: -webkit-box; display: -ms-flexbox; display: flex; } .display-type-grid{ display: grid; } .clip-overlay{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: var(--color-overlay); pointer-events: none; } .gradient-overlay-for-text-readability{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; background-image: -webkit-gradient( linear, left top, left bottom, from(hsla(0, 0%, 35.29%, 0)), color-stop(16.36%, hsla(0, 0%, 34.53%, 0.034375)), color-stop(33.34%, hsla(0, 0%, 32.42%, 0.125)), color-stop(50.1%, hsla(0, 0%, 29.18%, 0.253125)), color-stop(65.75%, hsla(0, 0%, 24.96%, 0.4)), color-stop(79.43%, hsla(0, 0%, 19.85%, 0.546875)), color-stop(90.28%, hsla(0, 0%, 13.95%, 0.675)), color-stop(97.43%, hsla(0, 0%, 7.32%, 0.765625)), to(hsla(0, 0%, 0%, 0.8)) ); background-image: linear-gradient( 180deg, hsla(0, 0%, 35.29%, 0) 0%, hsla(0, 0%, 34.53%, 0.034375) 16.36%, hsla(0, 0%, 32.42%, 0.125) 33.34%, hsla(0, 0%, 29.18%, 0.253125) 50.1%, hsla(0, 0%, 24.96%, 0.4) 65.75%, hsla(0, 0%, 19.85%, 0.546875) 79.43%, hsla(0, 0%, 13.95%, 0.675) 90.28%, hsla(0, 0%, 7.32%, 0.765625) 97.43%, hsla(0, 0%, 0%, 0.8) 100% ); } .grid-container > .neos-contentcollection{ display: grid !important; } .grid-container.childred-x-align-start > .neos-contentcollection{ justify-items: start!important; -webkit-box-pack: start!important; -ms-flex-pack: start!important; justify-content: start!important; } .grid-container.childred-x-align-start > .neos-contentcollection{ /* Horizontal alignment of grid items */ /* Horizontal alignment of grid tracks */ } .grid-container.childred-x-align-center > .neos-contentcollection{ justify-items: center!important; -webkit-box-pack: center!important; -ms-flex-pack: center!important; justify-content: center!important; } .grid-container.childred-x-align-center > .neos-contentcollection{ /* Horizontal alignment of grid items */ /* Horizontal alignment of grid tracks */ } .grid-container.childred-x-align-end > .neos-contentcollection{ justify-items: end!important; -webkit-box-pack: end!important; -ms-flex-pack: end!important; justify-content: end!important; } .grid-container.childred-x-align-end > .neos-contentcollection{ /* Horizontal alignment of grid items */ /* Horizontal alignment of grid tracks */ } .grid-container .childred-y-align-start > .neos-contentcollection{ -webkit-box-align: start!important; -ms-flex-align: start!important; align-items: start!important; -ms-flex-line-pack: start!important; align-content: start!important; } .grid-container .childred-y-align-start > .neos-contentcollection{ /* Vertical alignment of grid items */ /* Vertical alignment of grid tracks */ } .grid-container.childred-y-align-center > .neos-contentcollection{ -webkit-box-align: center!important; -ms-flex-align: center!important; align-items: center!important; -ms-flex-line-pack: center!important; align-content: center!important; } .grid-container.childred-y-align-center > .neos-contentcollection{ /* Vertical alignment of grid items */ /* Vertical alignment of grid tracks */ } .grid-container.childred-y-align-end > .neos-contentcollection{ -webkit-box-align: end!important; -ms-flex-align: end!important; align-items: end!important; -ms-flex-line-pack: end!important; align-content: end!important; } .grid-container.childred-y-align-end > .neos-contentcollection{ /* Vertical alignment of grid items */ /* Vertical alignment of grid tracks */ } .perm-image { /* height:300px; min-height:300px; */ overflow: hidden; position: relative; } .perm-image img { width: 100%; } .perm-image img.is-cover { height: 100%; -o-object-fit: cover; object-fit: cover; } .perm-image picture.is-cover { height: 100%; } .perm-image picture.is-cover img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .perm-image.has-shadow { -webkit-box-shadow: 20px 20px 0px var(--shadow-color, white); box-shadow: 20px 20px 0px var(--shadow-color, white); } .perm-image .image-link{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:1; } /*Mouse over Zoom FX*/ .perm-image .image-link.focus-visible { outline: var(--focus-outline); outline-offset: -0.3rem; } .perm-image .image-link:focus-visible { outline: var(--focus-outline); outline-offset: -0.3rem; } .perm-image .has-link-fx img{ -webkit-transition: -webkit-transform 0.4s ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } .perm-image:hover .has-link-fx img{ -webkit-transform: scale(1.1); transform: scale(1.1); } /*figure{ &.perm-image { overflow: hidden; } }*/ /* LEGACY */ .component img { max-width: 100% } .image-component { text-align: center; } .image-component figure,.image-component img{ max-width: 100%; } .image-component:not(.is-original-size) figure,.image-component:not(.is-original-size) img{ width: 100% } .perm-text { display: block; -ms-hyphens: none; hyphens: none; } .perm-text > * + * { margin-top: clamp(10px, 2vmax, 20px); } .perm-text ul { list-style-type: disc; padding: 1.3rem; } .perm-text ol { /* margin-left:20px; */ } .perm-text.has-hyphenation { -ms-hyphens: auto; hyphens: auto; } .perm-text a, .text-component a, .om3__segment__html a { -webkit-transition: var(--transition-color); transition: var(--transition-color); } .perm-text a.focus-visible, .text-component a.focus-visible, .om3__segment__html a.focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .perm-text a:focus-visible, .text-component a:focus-visible, .om3__segment__html a:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } a, a:hover, a:link, a:visited { position: relative; outline: none; color: var(--brand-color-primary, blue); } a:not(.om3__segment__menu_navigation_meta_logo):not(.perm-button):not(.perm-image):hover, a:hover:not(.om3__segment__menu_navigation_meta_logo):not(.perm-button):not(.perm-image):hover, a:link:not(.om3__segment__menu_navigation_meta_logo):not(.perm-button):not(.perm-image):hover, a:visited:not(.om3__segment__menu_navigation_meta_logo):not(.perm-button):not(.perm-image):hover { } .text-color-dark p, .text-color-dark li { color: var(--dark-color, white); } .text-color-bright p, .text-color-bright li { color: var(--bright-color, white); } .text-color-neutral p, .text-color-neutral li { color: var(--bright-neutral, gray); } .text-color-ci-1 p, .text-color-ci-1 li { color: var(--brand-color-primary, red); } .text-color-ci-2 p, .text-color-ci-2 li { color: var(--brand-color-secondary, blue); } .text-color-ci-3 p, .text-color-ci-3 li { color: var(--brand-color-tertiary, green); } .text-color-ci-4 p, .text-color-ci-4 li { color: var(--brand-color-tertiary, green); } .text-color-custom p, .text-color-custom li { color: var(--text-color-custom, purple); } .headline-color-dark h1, .headline-color-dark h2, .headline-color-dark h3, .headline-color-dark h4, .headline-color-dark h5, .headline-color-dark h6 { color: var(--dark-color, white); } .headline-color-dark h1 a,.headline-color-dark h2 a,.headline-color-dark h3 a,.headline-color-dark h4 a,.headline-color-dark h5 a,.headline-color-dark h6 a{ color: var(--dark-color, white); } .headline-color-bright h1, .headline-color-bright h2, .headline-color-bright h3, .headline-color-bright h4, .headline-color-bright h5, .headline-color-bright h6 { color: var(--bright-color, white); } .headline-color-bright h1 a,.headline-color-bright h2 a,.headline-color-bright h3 a,.headline-color-bright h4 a,.headline-color-bright h5 a,.headline-color-bright h6 a{ color: var(--bright-color, white); } .headline-color-neutral h1, .headline-color-neutral h2, .headline-color-neutral h3, .headline-color-neutral h4, .headline-color-neutral h5, .headline-color-neutral h6 { color: var(--bright-neutral, gray); } .headline-color-neutral h1 a,.headline-color-neutral h2 a,.headline-color-neutral h3 a,.headline-color-neutral h4 a,.headline-color-neutral h5 a,.headline-color-neutral h6 a{ color: var(--neutral-color, white); } .headline-color-ci-1 h1, .headline-color-ci-1 h2, .headline-color-ci-1 h3, .headline-color-ci-1 h4, .headline-color-ci-1 h5, .headline-color-ci-1 h6 { color: var(--brand-color-primary, red); } .headline-color-ci-1 h1 a,.headline-color-ci-1 h2 a,.headline-color-ci-1 h3 a,.headline-color-ci-1 h4 a,.headline-color-ci-1 h5 a,.headline-color-ci-1 h6 a{ color: var(--brand-color-primary, white); } .headline-color-ci-2 h1, .headline-color-ci-2 h2, .headline-color-ci-2 h3, .headline-color-ci-2 h4, .headline-color-ci-2 h5, .headline-color-ci-2 h6 { color: var(--brand-color-secondary, blue); } .headline-color-ci-2 h1 a,.headline-color-ci-2 h2 a,.headline-color-ci-2 h3 a,.headline-color-ci-2 h4 a,.headline-color-ci-2 h5 a,.headline-color-ci-2 h6 a{ color: var(--brand-color-secondary, white); } .headline-color-ci-3 h1, .headline-color-ci-3 h2, .headline-color-ci-3 h3, .headline-color-ci-3 h4, .headline-color-ci-3 h5, .headline-color-ci-3 h6 { color: var(--brand-color-tertiary, green); } .headline-color-ci-3 h1 a,.headline-color-ci-3 h2 a,.headline-color-ci-3 h3 a,.headline-color-ci-3 h4 a,.headline-color-ci-3 h5 a,.headline-color-ci-3 h6 a{ color: var(--brand-color-tertiary, white); } .headline-color-ci-4 h1, .headline-color-ci-4 h2, .headline-color-ci-4 h3, .headline-color-ci-4 h4, .headline-color-ci-4 h5, .headline-color-ci-4 h6 { color: var(--brand-color-accent, green); } .headline-color-ci-4 h1 a,.headline-color-ci-4 h2 a,.headline-color-ci-4 h3 a,.headline-color-ci-4 h4 a,.headline-color-ci-4 h5 a,.headline-color-ci-4 h6 a{ color: var(--brand-color-accent, white); } .headline-color-custom h1, .headline-color-custom h2, .headline-color-custom h3, .headline-color-custom h4, .headline-color-custom h5, .headline-color-custom h6 { color: var(--headline-color-custom, purple); } .headline-color-custom h1 a,.headline-color-custom h2 a,.headline-color-custom h3 a,.headline-color-custom h4 a,.headline-color-custom h5 a,.headline-color-custom h6 a{ color: var(--headline-color-custom, white); } ::-moz-selection { /* Code for Firefox */ color: white; background: var(--brand-color-tertiary, blue); } ::selection { color: white; background: var(--brand-color-tertiary, blue); } .is-uppercase { text-transform: uppercase; } .has-no-hypenation { -ms-hyphens: none; hyphens: none; } .has-color-primary { color: var(--brand-color-primary, red); } .perm-button{ /* border: 1px dashed red !important; */ } .button-component { text-decoration: none !important; } .button-component { /* border:1px dashed red !important; */ display: inline-block; } .button-component ion-icon{ -webkit-transform: translateY(20%); transform: translateY(20%); margin:0; } .button-component ion-icon:not([name]):not([src]){ display:none; } .button-component .button{ text-decoration: none !important; } .button-component .button{ text-transform: var(--perm-button-text-transform); letter-spacing: var(--perm-button-letter-spacing,0.5px); cursor:pointer; display: inline-block; min-height: var(--perm-button-height,48px); background-color: var(--perm-button-bg-color,white); color: var(--perm-button-color,white); border-color: var(--brand-color-primary,white); border:var(--perm-button-border-width) solid var(--perm-button-border-color,white); border-radius:var(--perm-button-rounded,4px); padding: var(--perm-button-padding); font-size: var(--perm-button-font-size); line-height: var(--perm-button-line-height); font-weight: var(--perm-button-font-weight); -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: var(--transition-all); transition: var(--transition-all); } .button-component .button.has-icon-right ion-icon{ margin-left: 1ch; } .button-component .button.has-icon-left ion-icon{ margin-right: 1ch; } .button-component .button:hover{ background-color: var(--perm-button-bg-color-hover,red); color: var(--perm-button-color-hover,white); border-color: var(--perm-button-border-color-hover,#98A232); } .button-component .button.focus-visible{ outline: var(--focus-outline); outline-offset: 0.3rem; } .button-component .button:focus-visible{ outline: var(--focus-outline); outline-offset: 0.3rem; } .button-component.is-auto-width .button{ width: auto !important; } .button-component.is-auto-width .button{ display:block; margin:0 auto; } .button-component.is-block-button .button{ width: 100%; } .is-type-a .button{ background-color: var(--perm-button-a-bg-color,#98A232); color: var(--perm-button-a-color,white); border-color: var(--perm-button-a-border-color,#98A232); } .is-type-a .button:hover{ background-color: var(--perm-button-a-bg-color-hover,#98A232); color: var(--perm-button-a-color-hover,white); border-color: var(--perm-button-a-border-color-hover,#98A232) } .is-type-b .button{ background-color: var(--perm-button-b-bg-color,#98A232); color: var(--perm-button-b-color,white); border-color: var(--perm-button-b-border-color,#98A232); } .is-type-b .button:hover{ background-color: var(--perm-button-b-bg-color-hover,#98A232); color: var(--perm-button-b-color-hover,white); border-color: var(--perm-button-b-border-color-hover,#98A232) } .is-type-c .button{ background-color: var(--perm-button-c-bg-color,#98A232); color: var(--perm-button-c-color,white); border-color: var(--perm-button-c-border-color,#98A232); } .is-type-c .button:hover{ background-color: var(--perm-button-c-bg-color-hover,#98A232); color: var(--perm-button-c-color-hover,white); border-color: var(--perm-button-c-border-color-hover,#98A232) } .is-type-d .button{ background-color: var(--perm-button-d-bg-color,#98A232); color: var(--perm-button-d-color,white); border-color: var(--perm-button-d-border-color,#98A232); } .is-type-d .button:hover{ background-color: var(--perm-button-d-bg-color-hover,#98A232); color: var(--perm-button-d-color-hover,white); border-color: var(--perm-button-d-border-color-hover,#98A232) } .cron-formbuilder-plugin > button{ color: var(--white-color,white) !important; } .cron-formbuilder-plugin > button{ background-color: var(--brand-color-primary,blue); } /* make buttons autowidth align with parent clip */ .childred-x-align-start > .neos-contentcollection .button-component.is-auto-width{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .childred-x-align-start > .neos-contentcollection .button-component.is-auto-width button{ margin: 0 !important; margin: initial !important; } .childred-x-align-end > .neos-contentcollection .button-component.is-auto-width{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .childred-x-align-end > .neos-contentcollection .button-component.is-auto-width button{ margin: 0 !important; margin: initial !important; } .childred-x-align-center > .neos-contentcollection .button-component.is-auto-width{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .childred-x-align-center > .neos-contentcollection .button-component.is-auto-width button{ margin: 0 !important; margin: initial !important; } .perm-accordion{ /*overflow: hidden;*/ -webkit-transform-origin: top; transform-origin: top; -webkit-transition: max-height 1700ms ease; transition: max-height 1700ms ease; color: var(--perm-accordion-text-color,black); border-bottom: 1px solid var(--perm-accordion-border-color,grey); } .perm-accordion__header{ text-align: left !important; } .perm-accordion__header{ font-family: var(--font-base); list-style: none; font-weight: 700; padding: 1rem 2rem 1rem 0 ; /* padding:1rem 1rem; */ /* min-height:1rem; */ position: relative; font-size: var(--perm-accordion-header-font-size,26px); } @media (min-width:1200px) { .perm-accordion__header{ padding: 16px 50px 16px 0 } } .perm-accordion__header::-webkit-details-marker { color: transparent; width:0; height:0; display: none; } .perm-accordion__header::-moz-details-marker { color: transparent; width:0; height:0; display: none; } .perm-accordion__header::marker { color: transparent; width:0; height:0; display: none; } .perm-accordion__header:before{ content:''; background-image: url("data:image/svg+xml;utf8,Chevron Down Circle"); background-repeat: no-repeat; background-position: center; width:36px; height:36px; position: absolute; right:0; top:16%; -webkit-transition: -webkit-transform 600ms; transition: -webkit-transform 600ms; transition: transform 600ms; transition: transform 600ms, -webkit-transform 600ms; } .perm-accordion__header > * { /* position: relative; top:0; left: 30px; */ } .perm-accordion__header:hover{ /*color:var(--aogv-blue-light,white);*/ } .perm-accordion__header.focus-visible{ outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .perm-accordion__header:focus-visible{ outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .perm-accordion__body{ padding:0 0 var(--base-padding) 0; -webkit-transition: all 600ms ease ; transition: all 600ms ease ; } @media (min-width: 768px) { .perm-accordion__body{ /* padding:0rem 1rem 1rem calc(var(--perm-accordion-padding,40px) + 2rem); */ } } @media (min-width:1200px) { .perm-accordion__body{ /* padding:0rem 0rem 1rem calc(var(--perm-accordion-padding,40px) + 0rem); */ } } .perm-accordion:not([open]) { /* min-height:2.68rem; */ max-height:150px; -webkit-transition: all 1700ms ease; transition: all 1700ms ease; } .perm-accordion:not([open]) > .perm-accordion__body { opacity:0; } .perm-accordion[open] { height:auto; outline: none; max-height:300rem; } .perm-accordion[open] > .perm-accordion__body { opacity:1; } .perm-accordion[open] > .perm-accordion__header:before{ -webkit-transform: rotate(180deg); transform: rotate(180deg); } .perm-slider { /* outline:1px dashed red !important; */ --arrow-x-offset: 16px; --arrow-y-offset: 58px; width: 100%; overflow-x: hidden; /*margin-top: 100px;*/ display: block; position: relative; padding-bottom: 40px; max-height: 80vh; max-height: 80dvh; overflow-y: hidden; /* min-height: 100px;*/ } .perm-slider img { max-height: 80vh; max-height: 80dvh; max-width: 100vw; } .slider-dots-nav { width: auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: absolute; z-index: 1000; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .slider-dots-nav .swiper-pagination-bullet { border-radius: 0; width: 40px; height: 6px; background: var(--gray, gray); margin-right: 10px; } .slider-dots-nav .swiper-pagination-bullet-active { background: var(--brand-color-accent, red); } .slider-dots-nav .swiper-pagination-bullet:focus { outline: none; } .arrow { width: 30px; height: 30px; position: absolute; z-index: 100; top: calc(50% - var(--arrow-y-offset)); -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; -webkit-transform-origin: center; transform-origin: center; } .arrow-left { left:var(--arrow-x-offset); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .arrow-right { -webkit-transform: scaleX(1) translateY(-50%); transform: scaleX(1) translateY(-50%); right: var(--arrow-x-offset); } .arrow-right img,.arrow-right svg { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .arrow:focus { outline: none; } /* TODO Obsolete? remove it !*/ .perm-slide keen-slider__slide { display: inline-block; width: 100%; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .arrow-icon { fill: var(--brand-color-accent, red); } .thumbs-swiper { width: 100%; max-height: 102px; height:102px; padding: 10px 0; margin-bottom: 10px; } .thumbs-swiper .swiper-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .thumbs-swiper .swiper-slide { max-width: 100px !important; max-height: 100px !important; aspect-ratio: 1/1 !important; } .thumbs-swiper .swiper-slide { width: auto; height: 100%; margin-right: 10px; border: 2px inset transparent; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .thumbs-swiper .swiper-slide img { width: 100px !important; height: 100px !important; aspect-ratio: 1/1 !important; } .thumbs-swiper .swiper-slide img { -o-object-fit: cover; object-fit: cover; } .thumbs-swiper .swiper-slide.swiper-slide-thumb-active img { border: 2px inset var(--belsana-blue, #375988) !important; } .thumbs-swiper .swiper-slide.swiper-slide-transform { } .thumbs-swiper .swiper-slide.swiper-slide-transform { aspect-ratio: 1/1 !important; } .thumbs-swiper .swiper-slide.swiper-slide-transform { width: auto; } .thumbs-swiper .swiper-slide img { aspect-ratio: 1/1 !important; } .thumbs-swiper .swiper-slide img { width: 100px; height: 100px; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border: 2px inset transparent; cursor: pointer; } .thumbs-swiper .swiper-slide img:hover { border: 2px inset var(--belsana-blue, #375988) !important; } .thumbs-swiper .swiper-slide img:hover { outline-offset: -2px; cursor: pointer; } [data-thumbnails-navigation] { /* --arrow-y-offset: 50px !important;*/ } .neos-backend .perm-slider { overflow-y:visible; } /*outline: 1px dashed red !important;*/ .perm-googlemaps iframe{ width: 100%; min-height: 400px; } .test{ -webkit-animation:none 0s ease 0s 1 normal none running; animation:none 0s ease 0s 1 normal none running; -webkit-backface-visibility:visible; backface-visibility:visible; background:transparent none repeat 0 0 / auto auto padding-box border-box scroll; border:medium none currentColor; border-collapse:separate; -o-border-image:none; border-image:none; border-radius:0; border-spacing:0; bottom:auto; -webkit-box-shadow:none; box-shadow:none; -webkit-box-sizing:content-box; box-sizing:content-box; caption-side:top; clear:none; clip:auto; color:#000; -webkit-columns:auto; -moz-columns:auto; columns:auto; -webkit-column-count:auto; -moz-column-count:auto; column-count:auto; -webkit-column-fill:balance; -moz-column-fill:balance; column-fill:balance; -webkit-column-gap:normal; -moz-column-gap:normal; column-gap:normal; -webkit-column-rule:medium none currentColor; -moz-column-rule:medium none currentColor; column-rule:medium none currentColor; -webkit-column-span:1; -moz-column-span:1; column-span:1; -webkit-column-width:auto; -moz-column-width:auto; column-width:auto; content:normal; counter-increment:none; counter-reset:none; cursor:auto; direction:ltr; display:inline; empty-cells:show; float:none; font-family:serif; font-size:medium; font-style:normal; font-variant:normal; font-weight:normal; font-stretch:normal; line-height:normal; height:auto; -ms-hyphens:none; hyphens:none; left:auto; letter-spacing:normal; list-style:disc outside none; margin:0; max-height:none; max-width:none; min-height:0; min-width:0; opacity:1; orphans:2; outline:medium none invert; overflow:visible; overflow-x:visible; overflow-y:visible; padding:0; page-break-after:auto; page-break-before:auto; page-break-inside:auto; -webkit-perspective:none; perspective:none; -webkit-perspective-origin:50% 50%; perspective-origin:50% 50%; position:static; right:auto; -moz-tab-size:8; -o-tab-size:8; tab-size:8; table-layout:auto; text-align:left; -moz-text-align-last:auto; text-align-last:auto; text-decoration:none; text-indent:0; text-shadow:none; text-transform:none; top:auto; -webkit-transform:none; transform:none; -webkit-transform-origin:50% 50% 0; transform-origin:50% 50% 0; -webkit-transform-style:flat; transform-style:flat; -webkit-transition:none 0s ease 0s; transition:none 0s ease 0s; unicode-bidi:normal; vertical-align:baseline; visibility:visible; white-space:normal; widows:2; width:auto; word-spacing:normal; z-index:auto; all:initial; } .gmap { aspect-ratio: 1/1; margin-top:100px; margin-bottom:20px; } @media (min-width: 1024px) { .gmap { aspect-ratio: 16/6; } } .flex-x{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex{ display: block; } @media (min-width: 1024px) { .flex{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .pharmacy-info-address h4 { font-weight:700 !important; text-transform:none !important; text-transform:initial !important; } .pharmacy-info-address h4 { font-size:13px; } .pharmacy-info-address p{ margin-top : 0 !important; } .pharmacy-info-address p{ font-size:13px; line-height:1.4; } .pharmacy-info-address div{ margin-top:0; } .emergencyServiceTable{ width: 100%; border-collapse:collapse; } /*visibility: hidden;*/ .emergencyServiceTable th{ font-size:18px; font-weight:700; padding: 18px; } .emergencyServiceTable tr:nth-child(even){ background-color: #eee; } .emergencyServiceTable tr:nth-child(odd){ background-color:#ccc; } .emergencyServiceTable td{ padding: 1rem; } .emergencyServiceTable .date{ margin:0 10px; } @media (max-width: 768px) { /* visibility: visible;*/ .emergencyServiceTable thead,.emergencyServiceTable .theadline{ display:none; } .emergencyServiceTable tr{ float: left; width: 100%; margin-bottom: 20px; } .emergencyServiceTable td{ float: left; width: 100%; padding: 4px 18px; } .emergencyServiceTable .is-small-on-mobile{ font-size: 14px !important; } .emergencyServiceTable .is-small-on-mobile{ line-height: 1.4; } } @media (min-width: 1024px) { .emergencyServiceTable { /* visibility: visible;*/ } } .update-zip-submit{ -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; background:transparent; display:inline-block; padding: 10px; } .update-zip-submit img{ display:inline-block; width:40px; } .emergency-header{ margin-bottom: 20px; } .emergency-header label{ margin:0 10px 0; } .icon{ -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; background:transparent; cursor: pointer; } .icon svg { width:30px; height:30px; } .zip-form-field { /*margin-left: 40px;*/ } .error{ color:red; background-color: #eac9c9; padding:1rem; border: 1px solid red; } .perm-magazine .grid-container{ /* outline: 1px dashed red !important;*/ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); grid-gap: var(--base-padding,30px); gap: var(--base-padding,30px); grid-auto-rows: minmax(100px, auto); } .perm-magazine .grid-container.max-items-1{ grid-template-columns: 1fr; } .perm-magazine .grid-container.max-items-2{ grid-template-columns:repeat(auto-fit, minmax( calc( var(--content-max-width-xxl) / 3 ),1fr)); } .perm-magazine .grid-container.max-items-3{ grid-template-columns:repeat(auto-fit, minmax( calc( var(--content-max-width-xxl) / 4 ),1fr)); } .perm-magazine .grid-container.max-items-4{ grid-template-columns:repeat(auto-fit, minmax( calc( var(--content-max-width-xxl) / 5 ),1fr)); } .perm-magazine .grid-container.max-items-5{ grid-template-columns:repeat(auto-fit, minmax( calc( var(--content-max-width-xxl) / 6 ),1fr)); } .perm-magazine .grid-container.max-items-6{ grid-template-columns:repeat(auto-fit, minmax( calc( var(--content-max-width-xxl) / 7 ),1fr)); } .perm-magazine .grid-container > .magazine-article{ /* outline: 3px dashed #144ee4 !important;*/ position: relative; overflow: hidden; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .perm-magazine .grid-container > .magazine-article img{ width:100%; height: auto; aspect-ratio: 4/3; -o-object-fit: contain; object-fit: contain; } .perm-magazine .grid-container > .magazine-article h4 { height: 60px; width:100%; } .perm-magazine .magazine-detail-link{ margin-top:auto; position: static; } .perm-magazine .magazine-detail-link:after{ content:''; position: absolute; top:0; right:0; bottom:0; left:0; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1000; /* Sit on top */ padding-top: 60px; /* Location of the box */ top:0; right:0; bottom:0; left:0; width: 100%; /* Full width */ height: 100%; /* Full height */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 95%; height: calc(100vh - 100px); border-radius:8px; overflow: auto; } /* Enable scroll if needed */ @media (min-width: 768px) { .modal-content { width: 95% } } @media (min-width: 992px) { .modal-content { width: 75% } } .modal-content .modal-inner-content{ max-width: 90%; margin: 0 auto; } .modal-content .modal-inner-content img{ margin: 20px auto 0; } @media (min-width: 768px) { .modal-content .modal-inner-content img{ max-width: 560px !important } } @media (min-width: 992px) { .modal-content .modal-inner-content img{ max-width: 560px !important } } .modal-content .modal-inner-content figcaption{ max-width: 560px !important; } .modal-content .modal-inner-content figcaption{ font-size:14px; line-height: 15px; margin: 0 auto; margin-bottom: 20px; background:var(--dark-color); color: var(--white); padding: 10px; } .modal-content .modal-inner-content figcaption figcaption{ display:none; } .modal-content .modal-inner-content .author{ max-width: 460px; margin: 20px auto; } /* The Close Button */ .close { color: #111; position: absolute; width:40px; height:40px; right:2rem; top:2rem; font-size: 28px; font-weight: bold; border-radius:100%; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .video-component { display: inline-block; overflow: hidden; aspect-ratio: 16/9; } .video-component video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .perm-overlaybox { /*outline:1px dashed red !important;*/ } :root { --overlay-box-bg-color: white; --overlay-box-text-color: white; --overlay-box-size-w: fit-content; --overlay-box-size-h:fit-content; --color-close-btn: 300px; --overlay-box-pos-top: 110px; --overlay-box-pos-bottom: auto; --overlay-box-pos-left: auto; --overlay-box-pos-right: 0; --overlay-box-pos-transform-x: 0; --overlay-box-pos-transform-y: 0; } .perm-overlaybox { position: fixed !important; } .perm-overlaybox { --overlay-box-close-btn-size: 80px; -webkit-transform-origin: center; transform-origin: center; z-index: 1000; top: var(--overlay-box-pos-top, 3rem); right: var(--overlay-box-pos-right, 0rem); bottom: var(--overlay-box-pos-bottom, auto); left: var(--overlay-box-pos-left, auto); overflow: hidden; /*min-width:fit-content;*/ max-width: var(--overlay-box-size-w, 100vw); /*width: var(--overlay-box-size-w, 360px);*/ min-height: var(--overlay-box-size-h, 360px); color: var(--overlay-box-text-color, black); background-color: var(--overlay-box-bg-color, gray); -webkit-box-shadow: 10px 10px 12px rgba(11, 11, 11, 0.7); box-shadow: 10px 10px 12px rgba(11, 11, 11, 0.7); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease; animation-timing-function: ease; } .perm-overlaybox.position-center { top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%,0); transform: translate3d(-50%, -50%,0); } .perm-overlaybox.position-top-right { top: var(--overlay-box-pos-top, 3rem); bottom: auto; right: 0; left: auto; } .perm-overlaybox.position-top-center{ top: var(--overlay-box-pos-top, 3rem); bottom: auto; right: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: auto; } .perm-overlaybox.position-top-left { top: var(--overlay-box-pos-top, 3rem); bottom: auto; right: auto; left: 0; } .perm-overlaybox.position-bottom-right { top: auto; bottom: var(--overlay-box-pos-bottom, 3rem); right: 0; left: auto; } .perm-overlaybox.position-bottom-center { top: auto; bottom: var(--overlay-box-pos-bottom, 3rem); right: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: auto; } .perm-overlaybox.position-bottom-left { top: auto; bottom: var(--overlay-box-pos-bottom, 3rem); right: auto; left: 0; } .perm-overlaybox > .overlaybox-close-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; position: absolute; z-index: 100; top: 0; right: 0; background-color: transparent; width: var(--overlay-box-close-btn-size, 40px); height: var(--overlay-box-close-btn-size, 40px); -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .perm-overlaybox > .overlaybox-close-button:hover, .perm-overlaybox > .overlaybox-close-button:focus { -webkit-transform: scale(0.8); transform: scale(0.8); } .overlaybox-close-button svg { color: var(--color-close-btn, white) !important; fill: transparent !important; } .overlaybox-close-button svg { width: 100%; height: 100%; } .perm-overlaybox > button > svg { color: var(--color-close-btn, white) !important; } .perm-overlaybox .om3__segment { /*padding: 0 !important;*/ } @media (max-width: 600px) { .perm-overlaybox { width: 100%; } } @-webkit-keyframes animateBoxIn { 0% { opacity: 0; /*transform: scale(0.2) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } 100% { opacity: 1; /*transform: scale(1) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } } @keyframes animateBoxIn { 0% { opacity: 0; /*transform: scale(0.2) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } 100% { opacity: 1; /*transform: scale(1) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } } @-webkit-keyframes animateBoxOut { 0% { opacity: 1; /*transform: scale(1);*/ } 100% { opacity: 0; /*transform: scale(0.2) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } } @keyframes animateBoxOut { 0% { opacity: 1; /*transform: scale(1);*/ } 100% { opacity: 0; /*transform: scale(0.2) translate3d(var(--overlay-box-pos-transform-x, 0), var(--overlay-box-pos-transform-y, 0), 0);*/ } } .impressum-component p + * { margin-top: calc(var(--content-spacing-y-sm) * 1); } @media (min-width: 768px) { .impressum-component p + * { margin-top: calc(var(--content-spacing-y-md) * 1) } } @media (min-width: 992px) { .impressum-component p + * { margin-top: calc(var(--content-spacing-y-lg) * 1) } } .impressum-container > .neos-contentcollection > * { -webkit-columns:380px 2; -moz-columns:380px 2; columns:380px 2; -webkit-column-gap:var(--base-padding,30px); -moz-column-gap:var(--base-padding,30px); column-gap:var(--base-padding,30px); -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column; } .impressum-container > .neos-contentcollection > * p { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column; } .impressum-container > .neos-contentcollection ul { list-style-type: none !important; padding: 0 !important; margin-bottom: 18px !important; } .impressum-container p { margin-top: 0; } .columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: var(--base-padding); -moz-column-gap: var(--base-padding); column-gap: var(--base-padding); -webkit-column-rule: 0; -moz-column-rule: 0; column-rule: 0; -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance; } .columns-1 { -webkit-columns:380px 1 !important; -moz-columns:380px 1 !important; columns:380px 1 !important; } .columns-2 { -webkit-columns:380px 2 !important; -moz-columns:380px 2 !important; columns:380px 2 !important; } .columns-3 { -webkit-columns:380px 3 !important; -moz-columns:380px 3 !important; columns:380px 3 !important;; } .columns-4 { -webkit-columns:280px 4 !important; -moz-columns:280px 4 !important; columns:280px 4 !important;; } .download-pdf { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .download-pdf { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .download-pdf button { width: auto !important; } .download-pdf button { display: inline-block; } .download-button-container { width:100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; } .childred-x-align-end .download-button-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .childred-x-align-center .download-button-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* test*/ .compact-layout-refactored > .neos-contentcollection{ display: grid !important; } .compact-layout-refactored > .neos-contentcollection{ /* outline: 3px dashed orange !important;*/ min-height: 2000px; grid-gap: 30px; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); grid-auto-rows: 0; } /* grid-auto-flow: dense;*/ .compact-layout-refactored > .neos-contentcollection > *{ width:100%; all : unset; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .compact-layout-refactored > .neos-contentcollection > * > .neos-contentcollection{ all : unset; -webkit-box-sizing: border-box; box-sizing: border-box; } .compact-layout-refactored > .neos-contentcollection > * > .neos-contentcollection > *{ display: block !important; } .error-messages{ position:fixed; z-index:2001; width:100%; left:0; bottom:0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-animation-name: slideInFromBottom; animation-name: slideInFromBottom; -webkit-animation-duration: 0.64s; animation-duration: 0.64s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .error-messages-inner{ max-width: var(--container-max-width-large,1150px); margin:0 auto; padding:1rem 2rem; font-weight:700; border-width:1px; border-style:solid; } .error-messages-inner.is-error{ background: #ffa3a3; color: red; border-color:red; } .error-messages-inner.is-success{ background: #b4f9b4; color: forestgreen; border-color:forestgreen; } @-webkit-keyframes slideInFromBottom { 0%{ -webkit-transform: translateY(100%); transform: translateY(100%); } 100%{ -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes slideInFromBottom { 0%{ -webkit-transform: translateY(100%); transform: translateY(100%); } 100%{ -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideOutFromBottom { 0%{ -webkit-transform: translateY(0%); transform: translateY(0%); } 100%{ -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideOutFromBottom { 0%{ -webkit-transform: translateY(0%); transform: translateY(0%); } 100%{ -webkit-transform: translateY(100%); transform: translateY(100%); } } :root{ --form-padding:20px; --checkbox-scale : 1.2; } .__s_row_id__kontaktform, .om3__segment__contact { margin : 0 0 30px; max-width: 900px; /* display : inline-block;*/ } form{ margin:20px 0; padding:0; overflow: hidden; } @media (min-width: 768px) { form{ margin-top:0px; padding: 5px 20px 5px 10px } } @media (min-width:1200px) { form{ padding :0 var(--base-padding,30px) } } label { display: inline-block; vertical-align: top; font-size: 18px; color: var(--gray); font-weight: 400; line-height: 28px; padding : 0; margin : 0 0 10px; } label:empty { max-height: .25em !important; padding : 0 0 0 0 !important } label:empty { overflow : hidden } label a{ text-decoration-color: var(--aogv-blue-light,blue) !important; } label sup { color: var(--red-color,red); } @media (min-width:1200px) { } input { accent-color: var(--brand-color-primary, red); } .input:not(.is-upload), .inputs-list:not(.is-upload) { margin-bottom: 10px; } @media (min-width:1200px) { .input:not(.is-upload), .inputs-list:not(.is-upload) { margin-bottom: 30px } } input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select{ display:inline-block; width: 100%; padding :6px 10px; overflow: hidden; background-color: var(--form-field-bg-color,gray); border: 1px solid var(--form-field-border-color,black); border-radius: var(--form-field-border-radius,3px); -webkit-transition: border 0.5s ease; transition: border 0.5s ease; line-height: 22px; font-size: 18px; font-weight: 400; color: var(--form-field-text-color,blue); } input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, textarea:focus, select:focus { border:1px solid var(--form-field-border-focus,black); outline:none; background-color: var(--form-field-bg-color-focus,darkgray); } input:not([type=checkbox]):not([type=radio]):not([type=submit]):hover, textarea:hover, select:hover { border:1px solid var(--form-field-border-focus,black); background-color: var(--form-field-bg-color-focus,darkgray); } input:not([type=checkbox]):not([type=radio]):not([type=submit]).focus-visible, textarea.focus-visible, select.focus-visible { border:1px solid var(--form-field-border-focus,black); outline:none; background-color: var(--form-field-bg-color-focus,darkgray); } input:not([type=checkbox]):not([type=radio]):not([type=submit]).focus-visible, textarea.focus-visible, select.focus-visible { border:1px solid var(--form-field-border-focus,black); outline:none; background-color: var(--form-field-bg-color-focus,darkgray); } input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus-visible, textarea:focus-visible, select:focus-visible { border:1px solid var(--form-field-border-focus,black); outline:none; background-color: var(--form-field-bg-color-focus,darkgray); } input:not([type=checkbox]):not([type=radio]):not([type=submit])::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder { opacity:0.6 !important; } input:not([type=checkbox]):not([type=radio]):not([type=submit])::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder { opacity:0.6 !important; } input:not([type=checkbox]):not([type=radio]):not([type=submit]):-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder { opacity:0.6 !important; } input:not([type=checkbox]):not([type=radio]):not([type=submit])::-ms-input-placeholder, textarea::-ms-input-placeholder, select::-ms-input-placeholder { opacity:0.6 !important; } input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder, textarea::placeholder, select::placeholder { opacity:0.6 !important; } input:not([type=checkbox]):not([type=radio]):not([type=submit])::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder { color:inherit; } input:not([type=checkbox]):not([type=radio]):not([type=submit])::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder { color:inherit; } input:not([type=checkbox]):not([type=radio]):not([type=submit]):-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder { color:inherit; } input:not([type=checkbox]):not([type=radio]):not([type=submit])::-ms-input-placeholder, textarea::-ms-input-placeholder, select::-ms-input-placeholder { color:inherit; } input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder, textarea::placeholder, select::placeholder { color:inherit; } input:not([type=checkbox]):not([type=radio]):not([type=submit]).error,textarea.error,select.error{ border-color: var(--warn-color,red); } @media (min-width:1200px) { } textarea { resize: vertical; height : 160px; } @media (min-width: 768px) { textarea { height : auto } } input[type=checkbox],input[type=radio] { border: none !important; border-radius:100% !important; } input[type=checkbox],input[type=radio] { color:red; outline-color: var(--aogv-blue-light,purple) ; outline-offset: -1px; margin: 0 12px 0 2px; -webkit-transform: scale(1.25); transform: scale(1.25); min-width: 16px; min-height:16px; } input[type=checkbox]:hover:focus, input[type=radio]:hover:focus { outline:2px solid var(--aogv-blue-light,purple) ; } label.form-checkbox{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-width: 740px; } label.form-checkbox input[type=checkbox]{ -webkit-transform:scale(1.25) translateY(52%); transform:scale(1.25) translateY(52%); } label.wrapped-label, label.form-checkbox{ color: var(--aogv-gray-dark,black); font-weight:400; font-size: 20px; } .inputs-list label{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } select{ background-color: var(--cloud-white ,white); height: var(--form-element-height,50px); max-height: var(--form-element-height); /*appearance: none;*/ position: relative; overflow:hidden; /*background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNSAxNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNTsiPjxwYXRoIGlkPSJjaGV2cm9uLWRvd24iIGQ9Ik0yLjQzMSwyLjU5MWw5Ljg4NywxMC4yMjVsMTAuMjI1LC0xMC4yMjUiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMyMWI4ZDU7c3Ryb2tlLXdpZHRoOjRweDsiLz48L3N2Zz4=") no-repeat calc(100% - 10px) transparent;*/ background-size:30px; } select option { min-height: calc(2em) !important } select option { padding : .75em .25em } select:after{ content: '>'; background-image: url('data:image/svg+xml;utf8,'); position: absolute; right:10px; top:50%; width:30px; height:30px; } fieldset{ border:none; padding: 5px 0; } @media (min-width: 768px) { fieldset{ padding: 5px 20px 5px 10px } } @media (min-width:1200px) { } fieldset > div:last-child { border-bottom: none !important; } .content .om3__segment__html>form>.component { padding: 0 !important; } .content .om3__segment__html>form>.component { width : 100%; } .cron-formbuilder-plugin>button, .button { padding : 10px 20px; width : 100%; -webkit-user-select : none; -moz-user-select : none; -ms-user-select : none; user-select : none; pointer-events : all; cursor : pointer; } .om3__segment__contact center { text-align: inherit !important } .om3__segment__contact center { margin : 1em 0 } .om3__segment__contact button { margin: .25em 0 1em } /* Refactor form button , TODO better way maybe */ form{ text-align: left; /* button{ background-color: var(--brand-color-primary,blue); color: var(--white-color,white) !important; border:2px solid var(--white-color,white); *//* TODO still needed the reset ? *//* appearance: none; transition: var(--transition-all); padding: 8px 20px 11px 20px; border-collapse: collapse; *//* TODO obsolete rule???*//* &:hover{ background-color: var(--white-color,white); color: var(--brand-color-primary) !important; border-color: var(--brand-color-primary); } }*/ } form ul{ padding:10px; margin:0; } /*TODO see if this is obsoletet or is used */ .success-box { font-size: 36px; padding: 1rem; border: 2px solid var(--success-color,green); max-width: 1150px; width: 100%; margin: 1rem auto; color: var(--success-color,green); background-color: var(--white-color,#ffffff); } legend{ position: relative; padding-left:60px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width: 100%; color:var(--white-color); background-color: var(--aogv-blue-dark); height:50px; white-space: nowrap; border-radius:0 0 0 20px; font-size:16px; line-height:50px; font-weight:500; padding-right:10px; } legend:focus{ outline:4px solid var(--aogv-blue-light,purple) !important; } legend:focus{ background-color: var(--aogv-blue-light); outline-offset:0px; } legend:hover{ background-color: var(--aogv-blue-light); } @media (min-width:1200px) { legend{ font-size:28px; line-height:68px; height:68px; padding-right:30px; padding-left:80px } } .toggle-button button{ color: var(--black-color,black) !important; } .toggle-button button{ font-weight:400; display:inline-block; background-color : var(--white-color,white); border:1px solid var(--black-color,black); padding: 10px 100px; margin-right:20px; } .toggle-button button:hover { outline:4px solid var(--aogv-blue-light,purple) !important; } .toggle-button button:hover { outline-offset:0px; } .toggle-button button:focus { outline:4px solid var(--aogv-blue-light,purple) !important; } .toggle-button button:focus { outline-offset:0px; } .toggle-button button.focus-visible { outline:4px solid var(--aogv-blue-light,purple) !important; } .toggle-button button.focus-visible { outline-offset:0px; } .toggle-button button:focus-visible { outline:4px solid var(--aogv-blue-light,purple) !important; } .toggle-button button:focus-visible { outline-offset:0px; } button[type=submit]{ text-decoration: none !important; } button[type=submit]{ -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; padding: 16px 56px; font-size: 24px; font-family: var(--font-semi-condensed,sans-serif); font-weight: var(--perm-button-font-weight); line-height: 36px; border: 1px solid transparent; cursor: pointer; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background-color: #fff; color: #111; -webkit-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border-color: #111; } button[type=submit]:hover{ background-color: #111; color: #fff; } button[type=submit]:focus{ background-color: #fff; color: #111; } .form-upload{ position: relative; border: 1px solid var(--black-color,black); min-height: 100px; } .form-upload-icon{ display:inline-block; width: 64px; position: absolute; top: 0px; right: var(--form-padding,20px); pointer-events: none; } .form-upload .button{ -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; background-color:transparent; } .form-upload .validation-error-msg { color:var(--warn-color,red); padding: 4px; } .form-upload:focus{ outline:4px solid var(--aogv-blue-light,purple) !important; } .form-upload:focus{ outline-offset:0px; } .form-upload .dz-button{ /* opacity: 0.5; */ } .form-upload .dz-message{ opacity:0.6 !important; } .form-upload .dz-message{ margin: 1em 0; max-width:260px; } .form-upload .dz-message span{ display: inline-block; } .form-upload .dz-message button{ display: inline-block; text-decoration:underline; } @media (min-width:1200px) { .form-upload .dz-message{ margin: 1em auto } } .form-upload .dropzone { --upload-preview-size : 80px; min-height:100px; border-radius:0; border:none; } .form-upload .dropzone:focus{ outline:4px solid var(--aogv-blue-light,purple) !important; } .form-upload .dropzone:focus{ outline-offset:0px; } .form-upload .dropzone:hover{ outline:4px solid var(--aogv-blue-light,purple) !important; } .form-upload .dropzone:hover{ outline-offset:0px; } .form-upload .dropzone .dz-preview { margin:0 20px 0 0; } .form-upload .dropzone .dz-preview .dz-image { width: var(--upload-preview-size,80px); height: var(--upload-preview-size,80px); } .form-upload .dropzone .dz-preview .dz-details .dz-size{ margin-bottom:0px; } .form-upload .dropzone .dz-preview .dz-details .dz-size span{ font-size:10px; } .form-upload .dropzone .dz-preview .dz-details .dz-filename{ font-size:14px; } .form-upload .dropzone .dz-preview .dz-details .dz-filename span { white-space:nowrap; } .required, .help-inline{ color : var(--warn-color,red); } .row { margin-top:30px; display: grid; grid-gap:10px; grid-auto-flow: row; grid-template-columns: 1fr; } @media (min-width:1200px) { .row { margin-top:60px; grid-gap:var(--base-padding); grid-template-columns: 1fr 1fr } } .row.is-full-width{ /* display:block; */ } .row .col.is-full{ grid-column: 1 / -1; } .error input:not([type=checkbox]):not([type=radio]),.error textarea,.error select{ border-color: var(--warn-color,red); } .error input[type=checkbox] { outline:2px solid var(--warn-color,red) !important; } .error input[type=checkbox] { outline-offset:-1px; } .help-inline{ display:block; font-size: 18px; color: var(--warn-color,red); margin-top:10px; } .is-hidden{ display: none; } /* position:relative; */ .is-invalid:after{ font-weight:400 !important; } .is-invalid:after{ position:absolute; top:50%; right:20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-left:auto; font-size:18px; content: "\00a0"; background-repeat: no-repeat; background-position: left center; padding-left: 46px; background-size: 36px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzNyAzNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNTsiPjxnIGlkPSJpY29uLWZhbHNjaCI+PGNpcmNsZSBjeD0iMTguMjEyIiBjeT0iMTguNDI1IiByPSIxOCIgc3R5bGU9ImZpbGw6I0NFMEIwQjsiLz48Zz48cGF0aCBkPSJNMTguMjEyLDI3LjI2OWwwLDMuMzEyIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS13aWR0aDo0cHg7Ii8+PHBhdGggZD0iTTE4LjIxMiw2LjI2OWwwLDE3LjQyNCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6NHB4OyIvPjwvZz48L2c+PC9zdmc+"); } @media (min-width:1200px) { .is-invalid:after{ content : 'Fehlende Eingaben'; padding-left: 46px } } .is-valid{ position:relative; } .is-valid:after{ font-weight:400 !important; } .is-valid:after{ margin-left:auto; font-size:18px; height:50px; content: "\00a0"; background-repeat: no-repeat; background-position: left center; padding-left: 46px; background-size: 36px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzNyAzNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNTsiPjxnIGlkPSJpY29uLXJpY2h0aWciPjxjaXJjbGUgY3g9IjE4LjI2NyIgY3k9IjE4LjQyNSIgcj0iMTgiIHN0eWxlPSJmaWxsOiMwM2FkMjM7Ii8+PHBhdGggZD0iTTcuMDY0LDE4LjY2NWw2Ljg3MSw3LjUyOGwxNS41MzYsLTE1LjUzNiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6NHB4OyIvPjwvZz48L3N2Zz4="); } @media (min-width:1200px) { } .delete-upload{ color: var(--aogv-blue-light,purple); font-weight:700; -webkit-transform:scaleY(0.5); transform:scaleY(0.5); font-size:16px; } .delete-upload:after{ content:''; } .dz-remove{ z-index: 100; } .error-message{ color: var(--warn-color,red); } button[disabled]{ opacity: 0.6; } /* Add required decorator to labels of conditionally hidden fields*/ .required-conditional label:after { content:'*'; color:var(--warn-color,emerald); } /* fix to large spacings */ .col .row.is-full-width { margin-top:0; } .required,.help-inline{ color:var(--warn-color,red) ; } .form-checkbox-label{ display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; } .form-checkbox-label input[type=checkbox]{ margin-top:10px; } .form-checkbox-label > span{ max-width:90%; } .form-checkbox-label .error-message{ width:100% !important; } /* use animation css https://animista.net/ or sal.css css classes if needed */ /* pop,rotate,fadeOut,FadeIn */ @-webkit-keyframes colors { 0% { stroke: #4285F4; } 50% { stroke: #333333; } 99% { stroke: #4285F4; } } @keyframes colors { 0% { stroke: #4285F4; } 50% { stroke: #333333; } 99% { stroke: #4285F4; } } @-webkit-keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 100% { stroke-dashoffset: 187; -webkit-transform: rotate(450deg); transform: rotate(450deg); } } @keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; -webkit-transform: rotate(135deg); transform: rotate(135deg); } 100% { stroke-dashoffset: 187; -webkit-transform: rotate(450deg); transform: rotate(450deg); } } /* .path { stroke-dasharray: 187; stroke-dashoffset: 0; transform-origin: center; animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; }*/ /*ZOOM hoover effect*/ .has-zoom-anim { -webkit-transition: -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease; transition: -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease; transition: box-shadow 0.4s ease, transform 0.4s ease; transition: box-shadow 0.4s ease, transform 0.4s ease, -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease; } .has-zoom-anim:hover{ -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-box-shadow: var(--shadow-fx,10px 10px 49px -10px black); box-shadow: var(--shadow-fx,10px 10px 49px -10px black); } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; -webkit-animation-duration: 1s; animation-duration: 1s; } [data-sal]{-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-delay:var(--sal-delay,0s);transition-delay:var(--sal-delay,0s);-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-duration:var(--sal-duration,.2s);transition-duration:var(--sal-duration,.2s);-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-timing-function:var(--sal-easing,ease);transition-timing-function:var(--sal-easing,ease)} [data-sal][data-sal-duration="200"]{-webkit-transition-duration:.2s;transition-duration:.2s} [data-sal][data-sal-duration="250"]{-webkit-transition-duration:.25s;transition-duration:.25s} [data-sal][data-sal-duration="300"]{-webkit-transition-duration:.3s;transition-duration:.3s} [data-sal][data-sal-duration="350"]{-webkit-transition-duration:.35s;transition-duration:.35s} [data-sal][data-sal-duration="400"]{-webkit-transition-duration:.4s;transition-duration:.4s} [data-sal][data-sal-duration="450"]{-webkit-transition-duration:.45s;transition-duration:.45s} [data-sal][data-sal-duration="500"]{-webkit-transition-duration:.5s;transition-duration:.5s} [data-sal][data-sal-duration="550"]{-webkit-transition-duration:.55s;transition-duration:.55s} [data-sal][data-sal-duration="600"]{-webkit-transition-duration:.6s;transition-duration:.6s} [data-sal][data-sal-duration="650"]{-webkit-transition-duration:.65s;transition-duration:.65s} [data-sal][data-sal-duration="700"]{-webkit-transition-duration:.7s;transition-duration:.7s} [data-sal][data-sal-duration="750"]{-webkit-transition-duration:.75s;transition-duration:.75s} [data-sal][data-sal-duration="800"]{-webkit-transition-duration:.8s;transition-duration:.8s} [data-sal][data-sal-duration="850"]{-webkit-transition-duration:.85s;transition-duration:.85s} [data-sal][data-sal-duration="900"]{-webkit-transition-duration:.9s;transition-duration:.9s} [data-sal][data-sal-duration="950"]{-webkit-transition-duration:.95s;transition-duration:.95s} [data-sal][data-sal-duration="1000"]{-webkit-transition-duration:1s;transition-duration:1s} [data-sal][data-sal-duration="1050"]{-webkit-transition-duration:1.05s;transition-duration:1.05s} [data-sal][data-sal-duration="1100"]{-webkit-transition-duration:1.1s;transition-duration:1.1s} [data-sal][data-sal-duration="1150"]{-webkit-transition-duration:1.15s;transition-duration:1.15s} [data-sal][data-sal-duration="1200"]{-webkit-transition-duration:1.2s;transition-duration:1.2s} [data-sal][data-sal-duration="1250"]{-webkit-transition-duration:1.25s;transition-duration:1.25s} [data-sal][data-sal-duration="1300"]{-webkit-transition-duration:1.3s;transition-duration:1.3s} [data-sal][data-sal-duration="1350"]{-webkit-transition-duration:1.35s;transition-duration:1.35s} [data-sal][data-sal-duration="1400"]{-webkit-transition-duration:1.4s;transition-duration:1.4s} [data-sal][data-sal-duration="1450"]{-webkit-transition-duration:1.45s;transition-duration:1.45s} [data-sal][data-sal-duration="1500"]{-webkit-transition-duration:1.5s;transition-duration:1.5s} [data-sal][data-sal-duration="1550"]{-webkit-transition-duration:1.55s;transition-duration:1.55s} [data-sal][data-sal-duration="1600"]{-webkit-transition-duration:1.6s;transition-duration:1.6s} [data-sal][data-sal-duration="1650"]{-webkit-transition-duration:1.65s;transition-duration:1.65s} [data-sal][data-sal-duration="1700"]{-webkit-transition-duration:1.7s;transition-duration:1.7s} [data-sal][data-sal-duration="1750"]{-webkit-transition-duration:1.75s;transition-duration:1.75s} [data-sal][data-sal-duration="1800"]{-webkit-transition-duration:1.8s;transition-duration:1.8s} [data-sal][data-sal-duration="1850"]{-webkit-transition-duration:1.85s;transition-duration:1.85s} [data-sal][data-sal-duration="1900"]{-webkit-transition-duration:1.9s;transition-duration:1.9s} [data-sal][data-sal-duration="1950"]{-webkit-transition-duration:1.95s;transition-duration:1.95s} [data-sal][data-sal-duration="2000"]{-webkit-transition-duration:2s;transition-duration:2s} [data-sal][data-sal-delay="50"]{-webkit-transition-delay:.05s;transition-delay:.05s} [data-sal][data-sal-delay="100"]{-webkit-transition-delay:.1s;transition-delay:.1s} [data-sal][data-sal-delay="150"]{-webkit-transition-delay:.15s;transition-delay:.15s} [data-sal][data-sal-delay="200"]{-webkit-transition-delay:.2s;transition-delay:.2s} [data-sal][data-sal-delay="250"]{-webkit-transition-delay:.25s;transition-delay:.25s} [data-sal][data-sal-delay="300"]{-webkit-transition-delay:.3s;transition-delay:.3s} [data-sal][data-sal-delay="350"]{-webkit-transition-delay:.35s;transition-delay:.35s} [data-sal][data-sal-delay="400"]{-webkit-transition-delay:.4s;transition-delay:.4s} [data-sal][data-sal-delay="450"]{-webkit-transition-delay:.45s;transition-delay:.45s} [data-sal][data-sal-delay="500"]{-webkit-transition-delay:.5s;transition-delay:.5s} [data-sal][data-sal-delay="550"]{-webkit-transition-delay:.55s;transition-delay:.55s} [data-sal][data-sal-delay="600"]{-webkit-transition-delay:.6s;transition-delay:.6s} [data-sal][data-sal-delay="650"]{-webkit-transition-delay:.65s;transition-delay:.65s} [data-sal][data-sal-delay="700"]{-webkit-transition-delay:.7s;transition-delay:.7s} [data-sal][data-sal-delay="750"]{-webkit-transition-delay:.75s;transition-delay:.75s} [data-sal][data-sal-delay="800"]{-webkit-transition-delay:.8s;transition-delay:.8s} [data-sal][data-sal-delay="850"]{-webkit-transition-delay:.85s;transition-delay:.85s} [data-sal][data-sal-delay="900"]{-webkit-transition-delay:.9s;transition-delay:.9s} [data-sal][data-sal-delay="950"]{-webkit-transition-delay:.95s;transition-delay:.95s} [data-sal][data-sal-delay="1000"]{-webkit-transition-delay:1s;transition-delay:1s} [data-sal][data-sal-easing=linear]{-webkit-transition-timing-function:linear;transition-timing-function:linear} [data-sal][data-sal-easing=ease]{-webkit-transition-timing-function:ease;transition-timing-function:ease} [data-sal][data-sal-easing=ease-in]{-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in} [data-sal][data-sal-easing=ease-out]{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out} [data-sal][data-sal-easing=ease-in-out]{-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out} [data-sal][data-sal-easing=ease-in-cubic]{-webkit-transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-timing-function:cubic-bezier(.55,.055,.675,.19)} [data-sal][data-sal-easing=ease-out-cubic]{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)} [data-sal][data-sal-easing=ease-in-out-cubic]{-webkit-transition-timing-function:cubic-bezier(.645,.045,.355,1);transition-timing-function:cubic-bezier(.645,.045,.355,1)} [data-sal][data-sal-easing=ease-in-circ]{-webkit-transition-timing-function:cubic-bezier(.6,.04,.98,.335);transition-timing-function:cubic-bezier(.6,.04,.98,.335)} [data-sal][data-sal-easing=ease-out-circ]{-webkit-transition-timing-function:cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1)} [data-sal][data-sal-easing=ease-in-out-circ]{-webkit-transition-timing-function:cubic-bezier(.785,.135,.15,.86);transition-timing-function:cubic-bezier(.785,.135,.15,.86)} [data-sal][data-sal-easing=ease-in-expo]{-webkit-transition-timing-function:cubic-bezier(.95,.05,.795,.035);transition-timing-function:cubic-bezier(.95,.05,.795,.035)} [data-sal][data-sal-easing=ease-out-expo]{-webkit-transition-timing-function:cubic-bezier(.19,1,.22,1);transition-timing-function:cubic-bezier(.19,1,.22,1)} [data-sal][data-sal-easing=ease-in-out-expo]{-webkit-transition-timing-function:cubic-bezier(1,0,0,1);transition-timing-function:cubic-bezier(1,0,0,1)} [data-sal][data-sal-easing=ease-in-quad]{-webkit-transition-timing-function:cubic-bezier(.55,.085,.68,.53);transition-timing-function:cubic-bezier(.55,.085,.68,.53)} [data-sal][data-sal-easing=ease-out-quad]{-webkit-transition-timing-function:cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94)} [data-sal][data-sal-easing=ease-in-out-quad]{-webkit-transition-timing-function:cubic-bezier(.455,.03,.515,.955);transition-timing-function:cubic-bezier(.455,.03,.515,.955)} [data-sal][data-sal-easing=ease-in-quart]{-webkit-transition-timing-function:cubic-bezier(.895,.03,.685,.22);transition-timing-function:cubic-bezier(.895,.03,.685,.22)} [data-sal][data-sal-easing=ease-out-quart]{-webkit-transition-timing-function:cubic-bezier(.165,.84,.44,1);transition-timing-function:cubic-bezier(.165,.84,.44,1)} [data-sal][data-sal-easing=ease-in-out-quart]{-webkit-transition-timing-function:cubic-bezier(.77,0,.175,1);transition-timing-function:cubic-bezier(.77,0,.175,1)} [data-sal][data-sal-easing=ease-in-quint]{-webkit-transition-timing-function:cubic-bezier(.755,.05,.855,.06);transition-timing-function:cubic-bezier(.755,.05,.855,.06)} [data-sal][data-sal-easing=ease-out-quint]{-webkit-transition-timing-function:cubic-bezier(.23,1,.32,1);transition-timing-function:cubic-bezier(.23,1,.32,1)} [data-sal][data-sal-easing=ease-in-out-quint]{-webkit-transition-timing-function:cubic-bezier(.86,0,.07,1);transition-timing-function:cubic-bezier(.86,0,.07,1)} [data-sal][data-sal-easing=ease-in-sine]{-webkit-transition-timing-function:cubic-bezier(.47,0,.745,.715);transition-timing-function:cubic-bezier(.47,0,.745,.715)} [data-sal][data-sal-easing=ease-out-sine]{-webkit-transition-timing-function:cubic-bezier(.39,.575,.565,1);transition-timing-function:cubic-bezier(.39,.575,.565,1)} [data-sal][data-sal-easing=ease-in-out-sine]{-webkit-transition-timing-function:cubic-bezier(.445,.05,.55,.95);transition-timing-function:cubic-bezier(.445,.05,.55,.95)} [data-sal][data-sal-easing=ease-in-back]{-webkit-transition-timing-function:cubic-bezier(.6,-.28,.735,.045);transition-timing-function:cubic-bezier(.6,-.28,.735,.045)} [data-sal][data-sal-easing=ease-out-back]{-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);transition-timing-function:cubic-bezier(.175,.885,.32,1.275)} [data-sal][data-sal-easing=ease-in-out-back]{-webkit-transition-timing-function:cubic-bezier(.68,-.55,.265,1.55);transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)} [data-sal|=fade]{opacity:0;-webkit-transition-property:opacity;transition-property:opacity} [data-sal|=fade].sal-animate,body.sal-disabled [data-sal|=fade]{opacity:1} [data-sal|=slide]{opacity:0;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform} [data-sal=slide-up]{-webkit-transform:translateY(20%);transform:translateY(20%)} [data-sal=slide-down]{-webkit-transform:translateY(-20%);transform:translateY(-20%)} [data-sal=slide-left]{-webkit-transform:translateX(20%);transform:translateX(20%)} [data-sal=slide-right]{-webkit-transform:translateX(-20%);transform:translateX(-20%)} [data-sal|=slide].sal-animate,body.sal-disabled [data-sal|=slide]{opacity:1;-webkit-transform:none;transform:none} [data-sal|=zoom]{opacity:0;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform} [data-sal=zoom-in]{-webkit-transform:scale(.5);transform:scale(.5)} [data-sal=zoom-out]{-webkit-transform:scale(1.1);transform:scale(1.1)} [data-sal|=zoom].sal-animate,body.sal-disabled [data-sal|=zoom]{opacity:1;-webkit-transform:none;transform:none} [data-sal|=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform} [data-sal=flip-left]{-webkit-transform:perspective(2000px) rotateY(-91deg);transform:perspective(2000px) rotateY(-91deg)} [data-sal=flip-right]{-webkit-transform:perspective(2000px) rotateY(91deg);transform:perspective(2000px) rotateY(91deg)} [data-sal=flip-up]{-webkit-transform:perspective(2000px) rotateX(-91deg);transform:perspective(2000px) rotateX(-91deg)} [data-sal=flip-down]{-webkit-transform:perspective(2000px) rotateX(91deg);transform:perspective(2000px) rotateX(91deg)} [data-sal|=flip].sal-animate,body.sal-disabled [data-sal|=flip]{-webkit-transform:none;transform:none} /*! By André Rinas, www.andrerinas.de Documentation, www.simplelightbox.com Available for use under the MIT License Version 2.14.2 */ body.hidden-scroll{overflow:hidden} .sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;display:none;z-index:1035} .sl-wrapper{z-index:1040;width:100%;height:100%;left:0;top:0;position:fixed} .sl-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box} .sl-wrapper button{border:0 none;background:rgba(0,0,0,0);font-size:28px;padding:0;cursor:pointer} .sl-wrapper button:hover{opacity:.7} .sl-wrapper .sl-close{display:none;position:fixed;right:30px;top:30px;z-index:10060;margin-top:-14px;margin-right:-14px;height:44px;width:44px;line-height:44px;font-family:Arial,Baskerville,monospace;color:#000;font-size:3rem} .sl-wrapper .sl-counter{display:none;position:fixed;top:30px;left:30px;z-index:10060;color:#000;font-size:1rem} .sl-wrapper .sl-download{display:none;position:fixed;bottom:5px;width:100%;text-align:center;z-index:10060;color:#fff;font-size:1rem} .sl-wrapper .sl-download a{color:#fff} .sl-wrapper .sl-navigation{width:100%;display:none} .sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-22px;height:44px;width:22px;line-height:44px;text-align:center;display:block;z-index:10060;font-family:Arial,Baskerville,monospace;color:#000} .sl-wrapper .sl-navigation button.sl-next{right:5px;font-size:2rem} .sl-wrapper .sl-navigation button.sl-prev{left:5px;font-size:2rem} @media(min-width: 35.5em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:10px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:10px;font-size:3rem}} @media(min-width: 50em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:20px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:20px;font-size:3rem}} .sl-wrapper.sl-dir-rtl .sl-navigation{direction:ltr} .sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000} .sl-wrapper .sl-image img{margin:0;padding:0;display:block;border:0 none;width:100%;height:auto} @media(min-width: 35.5em){.sl-wrapper .sl-image img{border:0 none}} @media(min-width: 50em){.sl-wrapper .sl-image img{border:0 none}} .sl-wrapper .sl-image iframe{background:#000;border:0 none} @media(min-width: 35.5em){.sl-wrapper .sl-image iframe{border:0 none}} @media(min-width: 50em){.sl-wrapper .sl-image iframe{border:0 none}} .sl-wrapper .sl-image .sl-caption{display:none;padding:10px;color:#fff;background:rgba(0,0,0,.8);font-size:1rem;position:absolute;bottom:0;left:0;right:0} .sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0} .sl-wrapper .sl-image .sl-caption.pos-outside{bottom:auto} .sl-spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;animation:pulsate 1s ease-out infinite} .sl-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll} .sl-transition{transition:-webkit-transform ease 200ms;-webkit-transition:-webkit-transform ease 200ms;transition:transform ease 200ms;transition:transform ease 200ms, -webkit-transform ease 200ms} @-webkit-keyframes pulsate{0%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0}} @keyframes pulsate{0%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0}} /* @import "../../../permanent.storefinder/Resources/Private/Fusion/Components/Presentation/_index.css"; */ /* import project specific styles*/ .perm-modal{ --modal-animation-duration: 0.4s; --modal-animation-delay: 0.2s; opacity: 0; -webkit-animation: fadeIn var(--modal-animation-duration,0.4s) ease; animation: fadeIn var(--modal-animation-duration,0.4s) ease; -webkit-animation-delay: var(--modal-animation-delay,0.2s); animation-delay: var(--modal-animation-delay,0.2s); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; z-index: 1000; top:0; left:0; right:0; bottom:0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .perm-modal__container{ position: relative; display: block; width:100%; height:100%; max-width: 92vw; max-height: 92vh; -webkit-box-shadow: var(--perm--modal-shadow); box-shadow: var(--perm--modal-shadow); -webkit-transition: opacity var(--modal-animation-duration,0.4s) ease; transition: opacity var(--modal-animation-duration,0.4s) ease; opacity: 0; border-radius: var(--perm-modal-corner-radius,10px); } .perm-modal__container iframe{ width: 100%; height: 100%; border-radius: var(--perm-modal-corner-radius,10px); } .perm-modal__container.has-loaded{ opacity: 1; } .per-modal__loader{ position: absolute; } .perm-modal__background{ position: absolute; top:0; right:0; bottom:0; left:0; background-color: var(--modal-overlay-background-color,#333333); opacity: var(--modal-overlay-background-opacity,0.3); } .perm-modal__close-btn{ position: absolute; z-index: 2; top:28px; right:36px; -webkit-transform: translate3d(50%,-50%,0); transform: translate3d(50%,-50%,0); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: white; -webkit-box-shadow: var(--perm--modal-shadow); box-shadow: var(--perm--modal-shadow); } .perm-modal__close-btn svg{ width: var(--perm--modal-closebtn-size,40px); height: var(--perm--modal-closebtn-size,40px); } body.has-modal{ overflow-y: hidden; margin-right: 15px; } .blur-fx{ -webkit-filter:blur(4px); filter:blur(4px); } .is-hidden{ display: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Copyright ( In Impressum but separrate package) */ .no-columns { -webkit-columns: auto !important; -moz-columns: auto !important; columns: auto !important; -webkit-columns: initial !important; -moz-columns: initial !important; columns: initial !important; } .test-andy-x-7 { color:red; }