/* kolorystyka */ /* baza */ .ce-styles { /* szerokosc bocznego panelu */ --ce-content-row-side-width: 380px; /* odstep bocznego panelu */ --ce-content-row-gap: 35px; /* rozmiary odstepow */ --ce-spacing-xs: 8px; --ce-spacing-s: 16px; --ce-spacing-m: 32px; --ce-spacing-l: 64px; --ce-spacing-xl: 120px; --ce-spacing-xxl: 200px; /* odstep pomiedzy elementami w base */ --ce-base-margin-top: 50px; --ce-base-margin-between: 50px; --ce-base-margin-between-blocks: 30px; --ce-base-margin-bottom: 50px; /* przesuniecie id do kierowania linkos (aby nie bylo pod sticky headerem) */ --ce-link-id-offset:0px; /* margines tla */ --ce-background-margin: 0px; /* margines tresci */ --ce-content-margin: 0px; /* szerokosc tla */ --ce-background-width: 100% /* szerokosc zawartosci */ --ce-content-width: 100%; /* szerokosc zawartosci z marginesami */ --ce-content-with-margins-width: calc(var(--ce-content-width) + var(--ce-content-margin) + var(--ce-content-margin)); /* kolorystyka dark */ --ce-colors-dark-lightbackground: rgba(0,0,0,0.04); --ce-colors-dark-text: #545454; --ce-colors-dark-text-important: #000000; --ce-colors-dark-text-important2: #000000; --ce-colors-dark-heading: #000000; --ce-colors-dark-heading-alternative: #000000; --ce-colors-dark-url: #000000; --ce-colors-dark-url-hover: #000000; --ce-colors-dark-button-background: #000000; --ce-colors-dark-button-background-hover: #505050; --ce-colors-dark-button-text: #ffffff; --ce-colors-dark-button-text-hover: #ffffff; /* kolorystyka light */ --ce-colors-light-lightbackground: rgba(255,255,255,0.04); --ce-colors-light-text: #ffffff; --ce-colors-light-text-important: #ffffff; --ce-colors-light-text-important2: #ffffff; --ce-colors-light-heading: #ffffff; --ce-colors-light-heading-alternative: #ffffff; --ce-colors-light-url: #ffffff; --ce-colors-light-url-hover: #ffffff; --ce-colors-light-button-background: #ffffff; --ce-colors-light-button-background-hover: #ffffff; --ce-colors-light-button-text: #000000; --ce-colors-light-button-text-hover: #000000; --ce-colors-lightbackground: var(--ce-colors-dark-lightbackground); --ce-colors-text: var(--ce-colors-dark-text); --ce-colors-text-important: var(--ce-colors-dark-text-important); --ce-colors-text-important2: var(--ce-colors-dark-text-important2); --ce-colors-heading: var(--ce-colors-dark-heading); --ce-colors-heading-alternative: var(--ce-colors-dark-heading-alternative); --ce-colors-url: var(--ce-colors-dark-url); --ce-colors-url-hover: var(--ce-colors-dark-url-hover); --ce-colors-button-background: var(--ce-colors-dark-button-background); --ce-colors-button-background-hover: var(--ce-colors-dark-button-background-hover); --ce-colors-button-text: var(--ce-colors-dark-button-text); --ce-colors-button-text-hover: var(--ce-colors-dark-button-text-hover); } @media only screen and (min-width: 769px) { .ce-desktop-elements-colors-dark { --ce-colors-lightbackground: var(--ce-colors-dark-lightbackground); --ce-colors-text: var(--ce-colors-dark-text); --ce-colors-text-important: var(--ce-colors-dark-text-important); --ce-colors-text-important2: var(--ce-colors-dark-text-important2); --ce-colors-heading: var(--ce-colors-dark-heading); --ce-colors-heading-alternative: var(--ce-colors-dark-heading-alternative); --ce-colors-url: var(--ce-colors-dark-url); --ce-colors-url-hover: var(--ce-colors-dark-url-hover); --ce-colors-button-background: var(--ce-colors-dark-button-background); --ce-colors-button-background-hover: var(--ce-colors-dark-button-background-hover); --ce-colors-button-text: var(--ce-colors-dark-button-text); --ce-colors-button-text-hover: var(--ce-colors-dark-button-text-hover); } .ce-desktop-elements-colors-light { --ce-colors-lightbackground: var(--ce-colors-light-lightbackground); --ce-colors-text: var(--ce-colors-light-text); --ce-colors-text-important: var(--ce-colors-light-text-important); --ce-colors-text-important2: var(--ce-colors-light-text-important2); --ce-colors-heading: var(--ce-colors-light-heading); --ce-colors-heading-alternative: var(--ce-colors-light-heading-alternative); --ce-colors-url: var(--ce-colors-light-url); --ce-colors-url-hover: var(--ce-colors-light-url-hover); --ce-colors-button-background: var(--ce-colors-light-button-background); --ce-colors-button-background-hover: var(--ce-colors-light-button-background-hover); --ce-colors-button-text: var(--ce-colors-light-button-text); --ce-colors-button-text-hover: var(--ce-colors-light-button-text-hover); } } @media only screen and (max-width: 768px) { .ce-mobile-elements-colors-dark { --ce-colors-lightbackground: var(--ce-colors-dark-lightbackground); --ce-colors-text: var(--ce-colors-dark-text); --ce-colors-text-important: var(--ce-colors-dark-text-important); --ce-colors-text-important2: var(--ce-colors-dark-text-important2); --ce-colors-heading: var(--ce-colors-dark-heading); --ce-colors-heading-alternative: var(--ce-colors-dark-heading-alternative); --ce-colors-url: var(--ce-colors-dark-url); --ce-colors-url-hover: var(--ce-colors-dark-url-hover); --ce-colors-button-background: var(--ce-colors-dark-button-background); --ce-colors-button-background-hover: var(--ce-colors-dark-button-background-hover); --ce-colors-button-text: var(--ce-colors-dark-button-text); --ce-colors-button-text-hover: var(--ce-colors-dark-button-text-hover); } .ce-mobile-elements-colors-light { --ce-colors-lightbackground: var(--ce-colors-light-lightbackground); --ce-colors-text: var(--ce-colors-light-text); --ce-colors-text-important: var(--ce-colors-light-text-important); --ce-colors-text-important2: var(--ce-colors-light-text-important2); --ce-colors-heading: var(--ce-colors-light-heading); --ce-colors-heading-alternative: var(--ce-colors-light-heading-alternative); --ce-colors-url: var(--ce-colors-light-url); --ce-colors-url-hover: var(--ce-colors-light-url-hover); --ce-colors-button-background: var(--ce-colors-light-button-background); --ce-colors-button-background-hover: var(--ce-colors-light-button-background-hover); --ce-colors-button-text: var(--ce-colors-light-button-text); --ce-colors-button-text-hover: var(--ce-colors-light-button-text-hover); } } /* style tekstow */ .ce-text-styles { color:var(--ce-colors-text); } .ce-text-styles p.important { color:var(--ce-colors-text-important); font-weight:bold; } .ce-text-styles p.important2 { color:var(--ce-colors-text-important); color:var(--ce-colors-text-important2); font-weight:bold; font-size:1.2em; } .ce-text-styles h1, .ce-text-styles h2, .ce-text-styles h3, .ce-text-styles h4, .ce-text-styles h5, .ce-text-styles h6 { color:var(--ce-colors-heading); } .ce-text-styles a { text-decoration:underline; color:var(--ce-colors-url); } .ce-text-styles a:hover { text-decoration:underline; color:var(--ce-colors-url-hover); } .ce-text-styles h1, .ce-text-styles h2, .ce-text-styles h3, .ce-text-styles h4, .ce-text-styles h5, .ce-text-styles h6 { margin:0; padding:0; margin-top:var(--ce-spacing-m); color:var(--ce-colors-heading); } .ce-text-styles h1 strong, .ce-text-styles h2 strong, .ce-text-styles h3 strong, .ce-text-styles h4 strong, .ce-text-styles h5 strong, .ce-text-styles h6 strong { font-weight:inherit; color:var(--ce-colors-heading-alternative); } .ce-text-styles h1:first-child, .ce-text-styles h2:first-child, .ce-text-styles h3:first-child, .ce-text-styles h4:first-child, .ce-text-styles h5:first-child, .ce-text-styles h6:first-child { margin-top:0; } /* .ce-text-styles h1 + h1, .ce-text-styles h2 + h1, .ce-text-styles h3 + h1, .ce-text-styles h4 + h1, .ce-text-styles h5 + h1, .ce-text-styles h6 + h1, .ce-text-styles h1 + h2, .ce-text-styles h2 + h2, .ce-text-styles h3 + h2, .ce-text-styles h4 + h2, .ce-text-styles h5 + h2, .ce-text-styles h6 + h2, .ce-text-styles h1 + h3, .ce-text-styles h2 + h3, .ce-text-styles h3 + h3, .ce-text-styles h4 + h3, .ce-text-styles h5 + h3, .ce-text-styles h6 + h3, .ce-text-styles h1 + h4, .ce-text-styles h2 + h4, .ce-text-styles h3 + h4, .ce-text-styles h4 + h4, .ce-text-styles h5 + h4, .ce-text-styles h6 + h4, .ce-text-styles h1 + h5, .ce-text-styles h2 + h5, .ce-text-styles h3 + h5, .ce-text-styles h4 + h5, .ce-text-styles h5 + h5, .ce-text-styles h6 + h5, .ce-text-styles h1 + h6, .ce-text-styles h2 + h6, .ce-text-styles h3 + h6, .ce-text-styles h4 + h6, .ce-text-styles h5 + h6, .ce-text-styles h6 + h6 { margin-top:var(--ce-spacing-xs); } */ .ce-text-styles li a, .ce-text-styles h1 a, .ce-text-styles h2 a, .ce-text-styles h3 a, .ce-text-styles h4 a, .ce-text-styles h5 a, .ce-text-styles h6 a { text-decoration:inherit; color:inherit; } .ce-text-styles p { margin-top:var(--ce-spacing-m); } .ce-text-styles p + p { margin-top:var(--ce-spacing-m); } .ce-text-styles p:first-child { margin-top:0; } .ce-text-styles img { margin-top:var(--ce-spacing-m); } .ce-text-styles img:first-child { margin-top:0; } .ce-text-styles blockquote { margin-top:var(--ce-spacing-m); } .ce-text-styles blockquote:first-child { margin-top:0; } .ce-text-styles blockquote:before { content: "\201E"; } .ce-text-styles ul { margin:0; list-style-type:none !important; padding:0; margin-top:var(--ce-spacing-m); display:flex; flex-direction:column; gap:var(--ce-spacing-s); color:var(--ce-colors-text-important); } .ce-text-styles ul:first-child { margin-top:0; } .ce-text-styles ul li { padding:0; position:relative; margin:0; padding-left:var(--ce-spacing-m); line-height:1.3em; } .ce-text-styles ul li:before { display:block; position:absolute; font-size:inherit; line-height:inherit; content:"\203A"; top:0; left:0; color:var(--color-primary-text); font-weight:bold; width:1.3em; background:linear-gradient(90deg, var(--color-primary), var(--color-primary-alternative)); text-align:center; border-radius:var(--global-radius); } .ce-text-styles ol { margin:0; padding:0; margin-top:var(--ce-spacing-m); list-style-type:none; } .ce-text-styles ol:first-child { margin-top:0; } .ce-text-styles ol li { padding:0; margin:0; margin-top:var(--ce-spacing-xs); position:relative; border-left:5px solid rgba(0,0,0,0.06); padding-top:var(--ce-spacing-xs); padding-bottom:var(--ce-spacing-xs); padding-left:1em; } .ce-text-styles ol li:first-child { margin-top:0; } /* baza */ .ce-base { width: 100%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; } /* przesuniecie elementu na ktory kierujemy tak, zeby przejscie na niego nie powodowalo wyswietlania nad nim sticky headera */ .ce-link-id { display:block; position:absolute; top:calc(0px - var(--ce-link-id-offset)); left:0; } /* elementy */ .ce-element { /* te zmienne sa wspolne dla wszystkich elementow wiec wstepnie zakladamy dla nich 0px` */ --ce-default-margin-top: 0px; --ce-default-margin-bottom: 0px; --ce-default-margin-left: 0px; --ce-default-margin-right: 0px; --ce-default-padding-top: 0px; --ce-default-padding-bottom: 0px; --ce-default-padding-left: 0px; --ce-default-padding-right: 0px; color:var(--ce-colors-text); } /* ukrywanie elementow na desktop/mobile */ @media only screen and (min-width:768px){ .ce-base .ce-hide-on-desktop {display:none !important;} } @media only screen and (max-width:768px){ .ce-base .ce-hide-on-mobile {display:none !important;} } /* ################################ */ /* ################################ */ /* content row - na tresci bedace w centrum serwisu podzielone na 2 kolumny - elementy znajdujace sie tutaj nie moga byc rozciagniete na cala szerokosc okna */ /* ################################ */ /* ################################ */ .ce-content-row { position:relative; z-index:99; display: flex; flex-wrap: nowrap; gap:var(--ce-content-row-gap); justify-content: flex-end; max-width:var(--ce-content-width); margin:0 auto; width:100%; } .ce-content-row > .ce-content-row-description { flex-grow: 1; min-width: 0; position:relative; z-index:1; } .ce-content-row > .ce-content-row-side { flex: 0 0 var(--ce-content-row-side-width); width: var(--ce-content-row-side-width); position:relative; z-index:3; } @media only screen and (max-width:768px){ .ce-content-row { flex-direction:column; } .ce-content-row > .ce-content-row-side { flex: 1 1 auto; min-width: 0; width:auto; } } /* domyslne wartosci zmiennych odpowiadajacych za marginesy */ .ce-content-row { --ce--margin-top: 0; --ce--margin-bottom: 0; } @media (min-width: 769px) { /* odstep od poczatku */ .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-content-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-content-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-content-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-content-row { --ce--margin-top: var(--ce-base-margin-top); } /* odstep od wszelkich innych elementow */ .ce-element:not(.ce-hide-on-desktop) + .ce-content-row, .ce-element:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-content-row, .ce-element:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-content-row, .ce-element:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-content-row { --ce--margin-top: var(--ce-base-margin-between); } /* odstep dolny od konca bazy */ .ce-base:not(.ce-padding-bottom-0) > .ce-content-row:has( + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-content-row:has( + .ce-element.ce-hide-on-desktop + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-content-row:has( + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-content-row:has( + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-base-end) { --ce--margin-bottom: var(--ce-base-margin-bottom); } } @media (max-width: 768px) { /* odstep od poczatku */ .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-content-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-content-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-content-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-content-row { --ce--margin-top: var(--ce-base-margin-top); } /* odstep od wszelkich innych elementow */ .ce-element:not(.ce-hide-on-mobile) + .ce-content-row, .ce-element:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-content-row, .ce-element:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-content-row, .ce-element:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-content-row { --ce--margin-top: var(--ce-base-margin-between); } /* odstep dolny od konca bazy */ .ce-base:not(.ce-padding-bottom-0) > .ce-content-row:has( + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-content-row:has( + .ce-element.ce-hide-on-mobile + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-content-row:has( + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-content-row:has( + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-base-end) { --ce--margin-bottom: var(--ce-base-margin-bottom); } } /* ustawiamy odpowiednie marginesy dla content row w zaleznosci od tego, co znajduje sie przed i po */ .ce-content-row { margin-top:var(--ce--margin-top); margin-bottom:var(--ce--margin-bottom); } /* przycisk do przejscia na side */ .ce-content-row > .ce-content-row-button { display:none; position:sticky; bottom:0; z-index:2; left:0; width:100%; height:0; } @media only screen and (max-width:768px){ .ce-content-row > .ce-content-row-button:has( + .ce-content-row-side .ce-content-row-side-target) { display:block; } /* jesli jest button i przenosi na side to usuwamy gap pomiedzy buttonem i side .ce-content-row > .ce-content-row-button + .ce-content-row-side:has(.ce-content-row-side-target) { margin-top: calc(0px - var(--ce-content-row-gap)); } } .ce-content-row-side-target { display: block; position:relative; height:0; } .ce-content-row-side-target b { display: block; position: absolute; margin-top:calc(0px - var(--ce-link-id-offset)); /* przesuniecie, zeby przejsc pod sticky header */ } /* nadpisujemy domyslne */ .ce-base { /* domyslne odstepy */ --ce-spacing-xs: var(--spacing-xs); --ce-spacing-s: var(--spacing-s); --ce-spacing-m: var(--spacing-m); --ce-spacing-l: var(--spacing-l); --ce-spacing-xl: var(--spacing-xl); --ce-spacing-xxl: var(--spacing-xxl); /* margines zawartosci */ --ce-content-margin: var(--global--content-margin); /* margines tla */ --ce-background-margin: var(--global--background-margin); /* szerokosc tla */ --ce-background-width: var(--global--background-width); /* szerokosc zawartosci */ --ce-content-width: var(--global--content-width); /* przesuniecie, na ktore przechodzimy dla odnosnikow wenatrz - sticky header + spacing-s */ --ce-link-id-offset: calc((1px * var(--ee--header-scrolled-height-px)) + var(--spacing-s)); /* szerokosci dla content row */ --ce-content-row-side-width: 380px; --ce-content-row-gap: var(--spacing-l); /* odstepy pomniedzy elementami w base */ --ce-base-margin-top:var(--spacing-l); --ce-base-margin-between:var(--spacing-l); --ce-base-margin-between-blocks:var(--spacing-m); --ce-base-margin-bottom:var(--spacing-l); } .ce-module-WYSIWYG.ce-module-style-footer_links a { text-decoration:none; color:#6a6a6a !important; display:inline-block; font-size:14px; } .ce-module-WYSIWYG.ce-module-style-footer_links a:hover { color:#ffffff !important; } .ce-module-WYSIWYG.ce-module-style-footer_links a ~ a { margin-top:0.25em; } .ce-container.ce-style-background { --ce-default-background: linear-gradient(to right, var(--color-primary), var(--color-primary-alternative)); border-radius:var(--global-radius); } /* single image */ .ce-module-single_image > * > span { font-family:var(--heading1-font-family); font-weight:var(--heading1-font-weight); font-weight:300; letter-spacing:var(--heading1-letter-spacing); line-height:var(--heading1-line-height); font-size:var(--text-styles-heading4-size); } .ce-module-single_image > * > span strong, .ce-module-single_image > * > span b { font-family:var(--heading2-font-family); font-weight:var(--heading2-font-weight); letter-spacing:var(--heading2-letter-spacing); line-height:var(--heading2-line-height); color:transparent; background:var(--ce-colors-heading-alternative); -webkit-text-fill-color:transparent; -webkit-background-clip: text; background-clip: text; } .ce-module-opinions ul li.source-google:before { content:''; position:absolute; content: "\f1a0"; font-family: 'Font Awesome 5 Brands'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; color:red; z-index:1; font-size:200px; transform:rotate(-45deg); bottom:-0.2em; left:-0.2em; line-height:1em; color:var(--ce-colors-lightbackground); } .ce-container { --ce--flex-direction__desktop: var(--ce-default-flex-direction); --ce--flex-direction__mobile: var(--ce-default-flex-direction); --ce--flex-direction: var(--ce--flex-direction__desktop); --ce--justify-content__desktop: var(--ce-default-justify-content); --ce--justify-content__mobile: var(--ce-default-justify-content); --ce--justify-content: var(--ce--justify-content__desktop); --ce--align-items__desktop: var(--ce-default-align-items); --ce--align-items__mobile: var(--ce-default-align-items); --ce--align-items: var(--ce--align-items__desktop); --ce--gap__desktop: var(--ce-default-gap); --ce--gap__mobile: var(--ce-default-gap); --ce--gap: var(--ce--gap__desktop); --ce--background__desktop: var(--ce-default-background); --ce--background__mobile: var(--ce-default-background); --ce--background: var(--ce--background__desktop); --ce--width__desktop: var(--ce-default-width); --ce--width__mobile: var(--ce-default-width); --ce--width: var(--ce--width__desktop); --ce--max-width__desktop: var(--ce-default-max-width); --ce--max-width__mobile: var(--ce-default-max-width); --ce--max-width: var(--ce--max-width__desktop); --ce--min-height__desktop: var(--ce-default-min-height); --ce--min-height__mobile: var(--ce-default-min-height); --ce--min-height: var(--ce--min-height__desktop); --ce--padding-left__desktop: var(--ce-default-padding-left); --ce--padding-left__mobile: var(--ce-default-padding-left); --ce--padding-left: var(--ce--padding-left__desktop); --ce--padding-right__desktop: var(--ce-default-padding-right); --ce--padding-right__mobile: var(--ce-default-padding-right); --ce--padding-right: var(--ce--padding-right__desktop); --ce--padding-top__desktop: var(--ce-default-padding-top); --ce--padding-top__mobile: var(--ce-default-padding-top); --ce--padding-top: var(--ce--padding-top__desktop); --ce--padding-bottom__desktop: var(--ce-default-padding-bottom); --ce--padding-bottom__mobile: var(--ce-default-padding-bottom); --ce--padding-bottom: var(--ce--padding-bottom__desktop); --ce--margin-left__desktop: var(--ce-default-margin-left); --ce--margin-left__mobile: var(--ce-default-margin-left); --ce--margin-left: var(--ce--margin-left__desktop); --ce--margin-right__desktop: var(--ce-default-margin-right); --ce--margin-right__mobile: var(--ce-default-margin-right); --ce--margin-right: var(--ce--margin-right__desktop); --ce--margin-top__desktop: var(--ce-default-margin-top); --ce--margin-top__mobile: var(--ce-default-margin-top); --ce--margin-top: var(--ce--margin-top__desktop); --ce--margin-bottom__desktop: var(--ce-default-margin-bottom); --ce--margin-bottom__mobile: var(--ce-default-margin-bottom); --ce--margin-bottom: var(--ce--margin-bottom__desktop); --ce--image_background__desktop: var(--ce-default-image_background); --ce--image_background__mobile: var(--ce-default-image_background); --ce--image_background: var(--ce--image_background__desktop); --ce--image_opacity__desktop: 100; --ce--image_opacity__mobile: 100; --ce--image_opacity: var(--ce--image_opacity__desktop); --ce--image_blur__desktop: 0; --ce--image_blur__mobile: 0; --ce--image_blur: var(--ce--image_blur__desktop); --ce--image_transition: 1; } @media only screen and (max-width:768px){ .ce-container { --ce--flex-direction: var(--ce--flex-direction__mobile); --ce--justify-content: var(--ce--justify-content__mobile); --ce--align-items: var(--ce--align-items__mobile); --ce--gap: var(--ce--gap__mobile); --ce--background: var(--ce--background__mobile); --ce--width: var(--ce--width__mobile); --ce--max-width: var(--ce--max-width__mobile); --ce--min-height: var(--ce--min-height__mobile); --ce--padding-left: var(--ce--padding-left__mobile); --ce--padding-right: var(--ce--padding-right__mobile); --ce--padding-top: var(--ce--padding-top__mobile); --ce--padding-bottom: var(--ce--padding-bottom__mobile); --ce--margin-left: var(--ce--margin-left__mobile); --ce--margin-right: var(--ce--margin-right__mobile); --ce--margin-top: var(--ce--margin-top__mobile); --ce--margin-bottom: var(--ce--margin-bottom__mobile); --ce--image_background: var(--ce--image_background__mobile); --ce--image_opacity: var(--ce--image_opacity__mobile); --ce--image_blur: var(--ce--image_blur__mobile); } } /* domyslne wartosci zmiennych */ .ce-container { --ce-default-gap: 0px; --ce-default-flex-direction: column; --ce-default-justify-content: flex-start; --ce-default-align-items: center; --ce-default-image_background: transparent; --ce-default-background: transparent; /* domyslnie kontener ma marginesy m/l i maksymalna szerkosc taka jak zawartosc serwisu */ --ce-default-padding-left: var(--ce-spacing-m); --ce-default-padding-right: var(--ce-spacing-m); --ce-default-padding-top: var(--ce-spacing-l); --ce-default-padding-bottom: var(--ce-spacing-l); --ce-default-max-width: var(--ce-content-width); --ce-default-margin-left: auto; --ce-default-margin-right: auto; --ce-default-margin-top: 0; --ce-default-margin-bottom: 0; --ce-default-width: 100%; --ce-default-min-height: 0px; /* domyslnie szerokosc kontenera jest maksymalnie taka jak szerokosc tla i boczne marginesy takie jak marginesy zawartosci */ } /* kontenery znajduyjace sie bezposrednio w base maja maksymalna szerokosc tla i marginesy zawartosci */ .ce-base > .ce-container { --ce-default-padding-left: var(--ce-content-margin); --ce-default-padding-right: var(--ce-content-margin); --ce-default-padding-top: var(--ce-spacing-l); --ce-default-padding-bottom: var(--ce-spacing-l); --ce-default-max-width: var(--ce-background-width); } /* domyslne marginesy gorne i dolne dla desktop */ @media (min-width: 769px) { /* odstep od blokow */ .ce-block:not(.ce-hide-on-desktop) + .ce-container, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-container, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-container, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-container { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od wierszy */ .ce-row:not(.ce-hide-on-desktop) + .ce-container, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-container, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-container, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-container { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od content row */ .ce-content-row:not(.ce-hide-on-desktop) + .ce-container, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-container, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-container, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-container { --ce-default-margin-top: var(--ce-base-margin-between); } } /* domyslne marginesy gorne i dolne dla mobile */ @media (max-width: 768px) { /* odstep od blokow */ .ce-block:not(.ce-hide-on-mobile) + .ce-container, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-container, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-container, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-container { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od wierszy */ .ce-row:not(.ce-hide-on-mobile) + .ce-container, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-container, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-container, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-container { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od content row */ .ce-content-row:not(.ce-hide-on-mobile) + .ce-container, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-container, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-container, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-container { --ce-default-margin-top: var(--ce-base-margin-between); } } .ce-container-base { position: relative; z-index:1; display:flex; flex-direction:var(--ce--flex-direction); justify-content:var(--ce--justify-content); align-items:var(--ce--align-items); gap:var(--ce--gap); min-height:var(--ce--min-height); max-width:var(--ce--max-width); width:var(--ce--width); padding-left:var(--ce--padding-left); padding-right:var(--ce--padding-right); padding-top:var(--ce--padding-top); padding-bottom:var(--ce--padding-bottom); margin-left:var(--ce--margin-left); margin-right:var(--ce--margin-right); margin-top:var(--ce--margin-top); margin-bottom:var(--ce--margin-bottom); background:var(--ce--background); } .ce-container-base > i { display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; background:var(--ce--image_background); overflow:hidden; display:none; } .ce-container-base > i > img { position:relative; width:100%; display:none; top:-100000px; left:-100000px; } .ce-container-base > i > em { display:block; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; } .ce-container-base > i > em > b { display:block; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; opacity:1; transition:opacity calc(var(--ce--image_transition) * 1s); } .ce-container-base > i > em > b ~ b { opacity:0; pointer-events:none; } .ce-container-base > i > em > b > img { display:block; position:absolute; top:calc(0px - (2px * var(--ce--image_blur))); left:calc(0px - (2px * var(--ce--image_blur))); width:calc(100% + (2 * (2px * var(--ce--image_blur)))); height:calc(100% + (2 * (2px * var(--ce--image_blur)))); object-fit: cover; filter:blur(calc(1px * var(--ce--image_blur))); opacity: calc(var(--ce--image_opacity) / 100); max-width:none; max-height:none; } .ce-container-base > i > em.animation > b { opacity:0; pointer-events:none; } .ce-container-base > i > em.animation > b.current { opacity:1; pointer-events:auto; } @media (min-width: 769px) { .ce-container-base.ce-with-desktop-image > i { display:block; } .ce-container-base.ce-with-desktop-image.ce-desktop-image-position-left > i { width:50%; } .ce-container-base.ce-with-desktop-image.ce-desktop-image-position-left { /* lewy padding: 50% szerokosci elementu + okreslony w konfiguracji padding */ padding-left:calc((min(100%, var(--ce--max-width)) / 2) + var(--ce--padding-left)); /* prawy padding: szerokosc elementu minus obliczona maksymaalna szerokosc tresci razem z marginesem i to dzielimy na 2, a potem dodajemy do tego wybrany padding prawy */ --ce-default-padding-right:calc( max(0px, min(100%, var(--ce--max-width)) - var(--ce-content-width)) / 2); } .ce-container-base.ce-with-desktop-image.ce-desktop-image-position-right > i { width:50%; left:50%; } .ce-container-base.ce-with-desktop-image.ce-desktop-image-position-right { /* prawy padding: 50% szerokosci elementu + okreslony w konfiguracji padding */ padding-right:calc((min(100%, var(--ce--max-width)) / 2) + var(--ce--padding-right)); /* lewy padding: szerokosc elementu minus obliczona maksymaalna szerokosc tresci razem z marginesem i to dzielimy na 2, a potem dodajemy do tego wybrany padding prawy */ --ce-default-padding-left:calc( max(0px, min(100%, var(--ce--max-width)) - var(--ce-content-width)) / 2); } .ce-container-base.ce-with-desktop-image.ce-desktop-image-position-after > i { position:relative; top:calc(var(--ce--padding-bottom)); left:auto; height:auto; width:auto; margin-left:calc(0px - var(--ce--padding-left)); margin-right:calc(0px - var(--ce--padding-right)); } .ce-container-base.ce-with-desktop-image.ce-desktop-image-position-after > i > img { display:block; } .ce-container-base.ce-with-desktop-image.ce-desktop-image-position-before > i { position:relative; top:calc(0px - var(--ce--padding-bottom)); left:auto; height:auto; width:auto; order:-2; margin-left:calc(0px - var(--ce--padding-left)); margin-right:calc(0px - var(--ce--padding-right)); } .ce-container-base.ce-with-desktop-image.ce-desktop-image-position-before > i > img { display:block; } } @media (max-width: 768px) { .ce-container-base.ce-with-mobile-image > i { display:block; } .ce-container-base.ce-with-mobile-image.ce-mobile-image-position-left > i { width:50%; } .ce-container-base.ce-with-mobile-image.ce-mobile-image-position-left { /* lewy padding: 50% szerokosci elementu + okreslony w konfiguracji padding */ padding-left:calc((min(100%, var(--ce--max-width)) / 2) + var(--ce--padding-left)); /* prawy padding: szerokosc elementu minus obliczona maksymaalna szerokosc tresci razem z marginesem i to dzielimy na 2, a potem dodajemy do tego wybrany padding prawy */ --ce-default-padding-right:calc( max(0px, min(100%, var(--ce--max-width)) - var(--ce-content-width)) / 2); } .ce-container-base.ce-with-mobile-image.ce-mobile-image-position-right > i { width:50%; left:50%; } .ce-container-base.ce-with-mobile-image.ce-mobile-image-position-right { /* prawy padding: 50% szerokosci elementu + okreslony w konfiguracji padding */ padding-right:calc((min(100%, var(--ce--max-width)) / 2) + var(--ce--padding-right)); /* lewy padding: szerokosc elementu minus obliczona maksymaalna szerokosc tresci razem z marginesem i to dzielimy na 2, a potem dodajemy do tego wybrany padding prawy */ --ce-default-padding-left:calc( max(0px, min(100%, var(--ce--max-width)) - var(--ce-content-width)) / 2); } .ce-container-base.ce-with-mobile-image.ce-mobile-image-position-after > i { position:relative; top:calc(var(--ce--padding-bottom)); left:auto; height:auto; width:auto; margin-left:calc(0px - var(--ce--padding-left)); margin-right:calc(0px - var(--ce--padding-right)); } .ce-container-base.ce-with-mobile-image.ce-mobile-image-position-after > i > img { display:block; } .ce-container-base.ce-with-mobile-image.ce-mobile-image-position-before > i { position:relative; top:calc(0px - var(--ce--padding-bottom)); left:auto; height:auto; width:auto; order:-2; margin-left:calc(0px - var(--ce--padding-left)); margin-right:calc(0px - var(--ce--padding-right)); } .ce-container-base.ce-with-mobile-image.ce-mobile-image-position-before > i > img { display:block; } } .ce-container-base.ce-style-SideImage > i { width:50%; } .ce-container-base.ce-style-SideImage { /* lewy padding: 50% szerokosci elementu + okreslony w konfiguracji padding */ padding-left:calc((min(100%, var(--ce--max-width)) / 2) + var(--ce--padding-left)); /* prawy padding: szerokosc elementu minus obliczona maksymaalna szerokosc tresci razem z marginesem i to dzielimy na 2, a potem dodajemy do tego wybrany padding prawy */ padding-right:calc( (max(0px, min(100%, var(--ce--max-width)) - var(--ce-content-with-margins-width)) / 2) + var(--ce--padding-right)); } .ce-row { --ce--gap__desktop: var(--ce-default-gap); --ce--gap__mobile: var(--ce-default-gap); --ce--gap: var(--ce--gap__desktop); --ce--background__desktop: var(--ce-default-background); --ce--background__mobile: var(--ce-default-background); --ce--background: var(--ce--background__desktop); --ce--width__desktop: var(--ce-default-width); --ce--width__mobile: var(--ce-default-width); --ce--width: var(--ce--width__desktop); --ce--max-width__desktop: var(--ce-default-max-width); --ce--max-width__mobile: var(--ce-default-max-width); --ce--max-width: var(--ce--max-width__desktop); --ce--min-height__desktop: var(--ce-default-min-height); --ce--min-height__mobile: var(--ce-default-min-height); --ce--min-height: var(--ce--min-height__desktop); --ce--padding-left__desktop: var(--ce-default-padding-left); --ce--padding-left__mobile: var(--ce-default-padding-left); --ce--padding-left: var(--ce--padding-left__desktop); --ce--padding-right__desktop: var(--ce-default-padding-right); --ce--padding-right__mobile: var(--ce-default-padding-right); --ce--padding-right: var(--ce--padding-right__desktop); --ce--padding-top__desktop: var(--ce-default-padding-top); --ce--padding-top__mobile: var(--ce-default-padding-top); --ce--padding-top: var(--ce--padding-top__desktop); --ce--padding-bottom__desktop: var(--ce-default-padding-bottom); --ce--padding-bottom__mobile: var(--ce-default-padding-bottom); --ce--padding-bottom: var(--ce--padding-bottom__desktop); --ce--margin-left__desktop: var(--ce-default-margin-left); --ce--margin-left__mobile: var(--ce-default-margin-left); --ce--margin-left: var(--ce--margin-left__desktop); --ce--margin-right__desktop: var(--ce-default-margin-right); --ce--margin-right__mobile: var(--ce-default-margin-right); --ce--margin-right: var(--ce--margin-right__desktop); --ce--margin-top__desktop: var(--ce-default-margin-top); --ce--margin-top__mobile: var(--ce-default-margin-top); --ce--margin-top: var(--ce--margin-top__desktop); --ce--margin-bottom__desktop: var(--ce-default-margin-bottom); --ce--margin-bottom__mobile: var(--ce-default-margin-bottom); --ce--margin-bottom: var(--ce--margin-bottom__desktop); } @media only screen and (max-width:768px){ .ce-row { --ce--gap: var(--ce--gap__mobile); --ce--background: var(--ce--background__mobile); --ce--width: var(--ce--width__mobile); --ce--max-width: var(--ce--max-width__mobile); --ce--min-height: var(--ce--min-height__mobile); --ce--padding-left: var(--ce--padding-left__mobile); --ce--padding-right: var(--ce--padding-right__mobile); --ce--padding-top: var(--ce--padding-top__mobile); --ce--padding-bottom: var(--ce--padding-bottom__mobile); --ce--margin-left: var(--ce--margin-left__mobile); --ce--margin-right: var(--ce--margin-right__mobile); --ce--margin-top: var(--ce--margin-top__mobile); --ce--margin-bottom: var(--ce--margin-bottom__mobile); } } /* domyslne wartosci zmiennych */ .ce-row { --ce-default-gap: var(--ce-spacing-l); --ce-default-background: transparent; --ce-default-width: 100%; --ce-default-max-width: var(--ce-content-width); --ce-default-min-height: 0px; --ce-default-padding-left: 0; --ce-default-padding-right: 0; --ce-default-padding-top: 0; --ce-default-padding-bottom: 0; --ce-default-margin-left: auto; --ce-default-margin-right: auto; --ce-default-margin-top: 0; --ce-default-margin-bottom: 0; } @media (min-width: 769px) { /* odstep od poczatku */ .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row { --ce-default-margin-top: var(--ce-base-margin-top); } /* odstep od content row */ .ce-content-row:not(.ce-hide-on-desktop) + .ce-row, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-row, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od kontenerow */ .ce-container:not(.ce-hide-on-desktop) + .ce-row, .ce-container:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-row, .ce-container:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row, .ce-container:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od blokow */ .ce-block:not(.ce-hide-on-desktop) + .ce-row, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-row, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row { --ce-default-margin-top: var(--ce-base-margin-between-blocks); } /* odstep od wierszy */ .ce-row:not(.ce-hide-on-desktop) + .ce-row, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-row, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-row { --ce-default-margin-top: var(--ce-base-margin-between-blocks); } /* odstep dolny od konca bazy */ .ce-base:not(.ce-padding-bottom-0) > .ce-row:has( + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-row:has( + .ce-element.ce-hide-on-desktop + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-row:has( + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-row:has( + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-base-end) { --ce-default-margin-bottom: var(--ce-base-margin-bottom); } } @media (max-width: 768px) { /* odstep od poczatku */ .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row { --ce-default-margin-top: var(--ce-base-margin-top); } /* odstep od content row */ .ce-content-row:not(.ce-hide-on-mobile) + .ce-row, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-row, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od kontenerow */ .ce-container:not(.ce-hide-on-mobile) + .ce-row, .ce-container:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-row, .ce-container:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row, .ce-container:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od blokow */ .ce-block:not(.ce-hide-on-mobile) + .ce-row, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-row, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row { --ce-default-margin-top: var(--ce-base-margin-between-blocks); } /* odstep od wierszy */ .ce-row:not(.ce-hide-on-mobile) + .ce-row, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-row, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-row { --ce-default-margin-top: var(--ce-base-margin-between-blocks); } /* odstep dolny od konca bazy */ .ce-base:not(.ce-padding-bottom-0) > .ce-row:has( + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-row:has( + .ce-element.ce-hide-on-mobile + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-row:has( + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-row:has( + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-base-end) { --ce-default-margin-bottom: var(--ce-base-margin-bottom); } } .ce-row-base { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; z-index:1; max-width:var(--ce--max-width); min-height:var(--ce--min-height); width:var(--ce--width); padding-left:var(--ce--padding-left); padding-right:var(--ce--padding-right); padding-top:var(--ce--padding-top); padding-bottom:var(--ce--padding-bottom); margin-left:var(--ce--margin-left); margin-right:var(--ce--margin-right); margin-top:var(--ce--margin-top); margin-bottom:var(--ce--margin-bottom); gap:var(--ce--gap); background:var(--ce--background); } @media (max-width: 768px) { .ce-row-base { grid-auto-columns: 1fr; grid-auto-flow: row; } } .ce-row-base .ce-row-column { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; } .ce-container-base.ce-style-SideImage > i { width:50%; } .ce-container-base.ce-style-SideImage { /* lewy padding: 50% szerokosci elementu + okreslony w konfiguracji padding */ padding-left:calc((min(100%, var(--ce--max-width)) / 2) + var(--ce--padding-left)); /* prawy padding: szerokosc elementu minus obliczona maksymaalna szerokosc tresci razem z marginesem i to dzielimy na 2, a potem dodajemy do tego wybrany padding prawy */ padding-right:calc( (max(0px, min(100%, var(--ce--max-width)) - var(--ce-content-with-margins-width)) / 2) + var(--ce--padding-right)); } .ce-block { --ce--justify-content__desktop: var(--ce-default-justify-content); --ce--justify-content__mobile: var(--ce-default-justify-content); --ce--justify-content: var(--ce--justify-content__desktop); --ce--align-items__desktop: var(--ce-default-align-items); --ce--align-items__mobile: var(--ce-default-align-items); --ce--align-items: var(--ce--align-items__desktop); --ce--background__desktop: var(--ce-default-background); --ce--background__mobile: var(--ce-default-background); --ce--background: var(--ce--background__desktop); --ce--width__desktop: var(--ce-default-width); --ce--width__mobile: var(--ce-default-width); --ce--width: var(--ce--width__desktop); --ce--max-width__desktop: var(--ce-default-max-width); --ce--max-width__mobile: var(--ce-default-max-width); --ce--max-width: var(--ce--max-width__desktop); --ce--min-height__desktop: var(--ce-default-min-height); --ce--min-height__mobile: var(--ce-default-min-height); --ce--min-height: var(--ce--min-height__desktop); --ce--padding-left__desktop: var(--ce-default-padding-left); --ce--padding-left__mobile: var(--ce-default-padding-left); --ce--padding-left: var(--ce--padding-left__desktop); --ce--padding-right__desktop: var(--ce-default-padding-right); --ce--padding-right__mobile: var(--ce-default-padding-right); --ce--padding-right: var(--ce--padding-right__desktop); --ce--padding-top__desktop: var(--ce-default-padding-top); --ce--padding-top__mobile: var(--ce-default-padding-top); --ce--padding-top: var(--ce--padding-top__desktop); --ce--padding-bottom__desktop: var(--ce-default-padding-bottom); --ce--padding-bottom__mobile: var(--ce-default-padding-bottom); --ce--padding-bottom: var(--ce--padding-bottom__desktop); --ce--margin-left__desktop: var(--ce-default-margin-left); --ce--margin-left__mobile: var(--ce-default-margin-left); --ce--margin-left: var(--ce--margin-left__desktop); --ce--margin-right__desktop: var(--ce-default-margin-right); --ce--margin-right__mobile: var(--ce-default-margin-right); --ce--margin-right: var(--ce--margin-right__desktop); --ce--margin-top__desktop: var(--ce-default-margin-top); --ce--margin-top__mobile: var(--ce-default-margin-top); --ce--margin-top: var(--ce--margin-top__desktop); --ce--margin-bottom__desktop: var(--ce-default-margin-bottom); --ce--margin-bottom__mobile: var(--ce-default-margin-bottom); --ce--margin-bottom: var(--ce--margin-bottom__desktop); } @media only screen and (max-width:768px){ .ce-block { --ce--justify-content: var(--ce--justify-content__mobile); --ce--align-items: var(--ce--align-items__mobile); --ce--background: var(--ce--background__mobile); --ce--width: var(--ce--width__mobile); --ce--max-width: var(--ce--max-width__mobile); --ce--min-height: var(--ce--min-height__mobile); --ce--padding-left: var(--ce--padding-left__mobile); --ce--padding-right: var(--ce--padding-right__mobile); --ce--padding-top: var(--ce--padding-top__mobile); --ce--padding-bottom: var(--ce--padding-bottom__mobile); --ce--margin-left: var(--ce--margin-left__mobile); --ce--margin-right: var(--ce--margin-right__mobile); --ce--margin-top: var(--ce--margin-top__mobile); --ce--margin-bottom: var(--ce--margin-bottom__mobile); } } /* domyslne wartosci zmiennych */ .ce-block { --ce-default-justify-content: flex-start; --ce-default-align-items: center; --ce-default-background: transparent; --ce-default-padding-left: 0; --ce-default-padding-right: 0; --ce-default-padding-top: 0; --ce-default-padding-bottom: 0; --ce-default-margin-left: 0; --ce-default-margin-right: 0; --ce-default-margin-top: 0; --ce-default-margin-bottom: 0; --ce-default-width: 100%; --ce-default-max-width: var(--ce-content-width); /* domyslnie blok ma maksymalnie taka szerokosc jak szerokosc serwisu, nawet jesli dodamy go bezposrednio do bazy */ --ce-default-min-height: 0px; } @media (min-width: 769px) { /* odstep od poczatku */ .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-block, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-block, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block { --ce-default-margin-top: var(--ce-base-margin-top); } /* odstep od content row */ .ce-content-row:not(.ce-hide-on-desktop) + .ce-block, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-block, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block, .ce-content-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od kontenerow */ .ce-container:not(.ce-hide-on-desktop) + .ce-block, .ce-container:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-block, .ce-container:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block, .ce-container:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od blokow */ .ce-block:not(.ce-hide-on-desktop) + .ce-block, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-block, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block, .ce-block:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block { --ce-default-margin-top: var(--ce-base-margin-between-blocks); } /* odstep od wierszy */ .ce-row:not(.ce-hide-on-desktop) + .ce-block, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-block, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block, .ce-row:not(.ce-hide-on-desktop) + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-block { --ce-default-margin-top: var(--ce-base-margin-between-blocks); } /* odstep dolny od konca bazy */ .ce-base:not(.ce-padding-bottom-0) > .ce-block:has( + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-block:has( + .ce-element.ce-hide-on-desktop + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-block:has( + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-block:has( + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-element.ce-hide-on-desktop + .ce-base-end) { --ce-default-margin-bottom: var(--ce-base-margin-bottom); } } @media (max-width: 768px) { /* odstep od poczatku */ .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-block, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-block, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block, .ce-base:not(.ce-padding-top-0) > .ce-base-start + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block { --ce-default-margin-top: var(--ce-base-margin-top); } /* odstep od content row */ .ce-content-row:not(.ce-hide-on-mobile) + .ce-block, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-block, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block, .ce-content-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od kontenerow */ .ce-container:not(.ce-hide-on-mobile) + .ce-block, .ce-container:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-block, .ce-container:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block, .ce-container:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block { --ce-default-margin-top: var(--ce-base-margin-between); } /* odstep od blokow */ .ce-block:not(.ce-hide-on-mobile) + .ce-block, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-block, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block, .ce-block:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block { --ce-default-margin-top: var(--ce-base-margin-between-blocks); } /* odstep od wierszy */ .ce-row:not(.ce-hide-on-mobile) + .ce-block, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-block, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block, .ce-row:not(.ce-hide-on-mobile) + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-block { --ce-default-margin-top: var(--ce-base-margin-between-blocks); } /* odstep dolny od konca bazy */ .ce-base:not(.ce-padding-bottom-0) > .ce-block:has( + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-block:has( + .ce-element.ce-hide-on-mobile + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-block:has( + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-base-end), .ce-base:not(.ce-padding-bottom-0) > .ce-block:has( + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-element.ce-hide-on-mobile + .ce-base-end) { --ce-default-margin-bottom: var(--ce-base-margin-bottom); } } .ce-block-base { position: relative; z-index:1; display:flex; flex-direction:column; justify-content:var(--ce--justify-content); align-items:var(--ce--align-items); min-height:var(--ce--min-height); max-width:var(--ce--max-width); width:var(--ce--width); padding-left:var(--ce--padding-left); padding-right:var(--ce--padding-right); padding-top:var(--ce--padding-top); padding-bottom:var(--ce--padding-bottom); margin-left:var(--ce--margin-left); margin-right:var(--ce--margin-right); margin-top:var(--ce--margin-top); margin-bottom:var(--ce--margin-bottom); background:var(--ce--background); } .ce-module-base { position:relative; width:100%; } .ce-block-base.ce-style-accordion + .ce-block-base.ce-style-accordion { --ce-default-margin-top: var(--ce-spacing-xs) !important; } .ce-block-base.ce-style-accordion > div.ce-accordion { width:100%; background:rgba(0,0,0,0.03); transition: background 0.3s ease-out; } .ce-block-base.ce-style-accordion > div.ce-accordion:has(>input.open:checked) { background:rgba(0,0,0,0.1); } .ce-block-base.ce-style-accordion > div.ce-accordion:has(> span > .open:hover) { background:rgba(0,0,0,0.13); } .ce-block-base.ce-style-accordion > div.ce-accordion > input { position:fixed; top:50%; left:-10000px; } .ce-block-base.ce-style-accordion > div.ce-accordion > span { display:block; position:relative; font-weight:bold; } .ce-block-base.ce-style-accordion > div.ce-accordion > span > .open { display:block; cursor:pointer; position:relative; z-index:1; padding:var(--ce-spacing-m); padding-right:calc(var(--ce-spacing-m) + 15px + (var(--ce-spacing-m) / 1)); -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Standardowa składnia */ } .ce-block-base.ce-style-accordion > div.ce-accordion > span > .open:before { content:''; width: 0; height: 0; position:absolute; top:50%; font-size:8px; margin-top:-0.5em; right:var(--ce-spacing-m); border-left: 0.8em solid transparent; border-right: 0.8em solid transparent; border-top: 1em solid rgba(0,0,0,0.2); transition: border 0.3s ease-out, transform 0.3s ease-out; } .ce-block-base.ce-style-accordion > div.ce-accordion > span > .open:hover:before, .ce-block-base.ce-style-accordion > div.ce-accordion > span:hover > .open:before { border-top: 1em solid rgba(0,0,0,1); } .ce-block-base.ce-style-accordion > div.ce-accordion > input.open:checked ~ span > .open:before { transform:rotate(180deg); } .ce-block-base.ce-style-accordion > div.ce-accordion > span > .close { display:none; cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; } .ce-block-base.ce-style-accordion > div.ce-accordion > input.open:checked ~ span > .open { } .ce-block-base.ce-style-accordion > div.ce-accordion > input.open:checked ~ span > .close { display:block; } .ce-block-base.ce-style-accordion > div.ce-accordion > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; } .ce-block-base.ce-style-accordion > div.ce-accordion > input.open:checked ~ div { grid-template-rows: 1fr; } .ce-block-base.ce-style-accordion > div.ce-accordion > div > div { overflow: hidden; } .ce-block-base.ce-style-accordion > div.ce-accordion > div > div > div { padding:var(--ce-spacing-m); padding-top:calc(var(--ce-spacing-m) / 2); } .ce-module-contactForm { --ce--gap__desktop: var(--ce-spacing-s); --ce--gap__mobile: var(--ce-spacing-s); --ce--gap: var(--ce--gap__desktop); --ce--textarea_height__desktop: 200px; --ce--textarea_height__mobile: 200px; --ce--textarea_height: var(--ce--textarea_height__desktop); } @media only screen and (max-width:768px){ .ce-module-contactForm { --ce--gap: var(--ce--gap__mobile); --ce--textarea_height: var(--ce--textarea_height__mobile); } } .ce-module-base.ce-module-contactForm { /* kolorystyka dark */ --ce-colors-dark-border: rgba(0,0,0,0.1); --ce-colors-dark-border-focus: rgba(0,0,0,1); --ce-colors-dark-rules: rgba(0,0,0,0.6); --ce-colors-dark-rules-focus: rgba(0,0,0,1); --ce-colors-dark-text: rgba(0,0,0,0.6); --ce-colors-dark-text-focus: rgba(0,0,0,1); --ce-colors-dark-placeholder: rgba(0,0,0,0.6); --ce-colors-dark-placeholder-focus: rgba(0,0,0,1); --ce-colors-dark-btn-background: rgba(0,0,0,0.6); --ce-colors-dark-btn-background-focus: rgba(0,0,0,1); --ce-colors-dark-btn-text: rgba(255,255,255,1); --ce-colors-dark-btn-text-focus: rgba(255,255,255,1); /* kolorystyka light */ --ce-colors-light-border: rgba(255,255,255,0.3); --ce-colors-light-border-focus: rgba(255,255,255,1); --ce-colors-light-rules: rgba(255,255,255,0.6); --ce-colors-light-rules-focus: rgba(255,255,255,1); --ce-colors-light-text: rgba(255,255,255,0.6); --ce-colors-light-text-focus: rgba(255,255,255,1); --ce-colors-light-placeholder: rgba(255,255,255,0.6); --ce-colors-light-placeholder-focus: rgba(255,255,255,1); --ce-colors-light-btn-background: rgba(255,255,255,1); --ce-colors-light-btn-background-focus: rgba(255,255,255,0.6); --ce-colors-light-btn-text: rgba(0,0,0,1); --ce-colors-light-btn-text-focus: rgba(0,0,0,1); --ce-colors-border: var(--ce-colors-dark-border); --ce-colors-border-focus: var(--ce-colors-dark-border-focus); --ce-colors-rules: var(--ce-colors-dark-rules); --ce-colors-rules-focus: var(--ce-colors-dark-rules-focus); --ce-colors-text: var(--ce-colors-dark-text); --ce-colors-text-focus: var(--ce-colors-dark-text-focus); --ce-colors-placeholder: var(--ce-colors-dark-placeholder); --ce-colors-placeholder-focus: var(--ce-colors-dark-placeholder-focus); --ce-colors-btn-background: var(--ce-colors-dark-btn-background); --ce-colors-btn-background-focus: var(--ce-colors-dark-btn-background-focus); --ce-colors-btn-text: var(--ce-colors-dark-btn-text); --ce-colors-btn-text-focus: var(--ce-colors-dark-btn-text-focus); } @media only screen and (min-width: 769px) { .ce-desktop-elements-colors-dark .ce-module-base.ce-module-contactForm { --ce-colors-border: var(--ce-colors-dark-border); --ce-colors-border-focus: var(--ce-colors-dark-border-focus); --ce-colors-rules: var(--ce-colors-dark-rules); --ce-colors-rules-focus: var(--ce-colors-dark-rules-focus); --ce-colors-text: var(--ce-colors-dark-text); --ce-colors-text-focus: var(--ce-colors-dark-text-focus); --ce-colors-placeholder: var(--ce-colors-dark-placeholder); --ce-colors-placeholder-focus: var(--ce-colors-dark-placeholder-focus); --ce-colors-btn-background: var(--ce-colors-dark-btn-background); --ce-colors-btn-background-focus: var(--ce-colors-dark-btn-background-focus); --ce-colors-btn-text: var(--ce-colors-dark-btn-text); --ce-colors-btn-text-focus: var(--ce-colors-dark-btn-text-focus); } .ce-desktop-elements-colors-light .ce-module-base.ce-module-contactForm { --ce-colors-border: var(--ce-colors-light-border); --ce-colors-border-focus: var(--ce-colors-light-border-focus); --ce-colors-rules: var(--ce-colors-light-rules); --ce-colors-rules-focus: var(--ce-colors-light-rules-focus); --ce-colors-text: var(--ce-colors-light-text); --ce-colors-text-focus: var(--ce-colors-light-text-focus); --ce-colors-placeholder: var(--ce-colors-light-placeholder); --ce-colors-placeholder-focus: var(--ce-colors-light-placeholder-focus); --ce-colors-btn-background: var(--ce-colors-light-btn-background); --ce-colors-btn-background-focus: var(--ce-colors-light-btn-background-focus); --ce-colors-btn-text: var(--ce-colors-light-btn-text); --ce-colors-btn-text-focus: var(--ce-colors-light-btn-text-focus); } } @media only screen and (max-width: 768px) { .ce-mobile-elements-colors-dark .ce-module-base.ce-module-contactForm { --ce-colors-border: var(--ce-colors-dark-border); --ce-colors-border-focus: var(--ce-colors-dark-border-focus); --ce-colors-rules: var(--ce-colors-dark-rules); --ce-colors-rules-focus: var(--ce-colors-dark-rules-focus); --ce-colors-text: var(--ce-colors-dark-text); --ce-colors-text-focus: var(--ce-colors-dark-text-focus); --ce-colors-placeholder: var(--ce-colors-dark-placeholder); --ce-colors-placeholder-focus: var(--ce-colors-dark-placeholder-focus); --ce-colors-btn-background: var(--ce-colors-dark-btn-background); --ce-colors-btn-background-focus: var(--ce-colors-dark-btn-background-focus); --ce-colors-btn-text: var(--ce-colors-dark-btn-text); --ce-colors-btn-text-focus: var(--ce-colors-dark-btn-text-focus); } .ce-mobile-elements-colors-light .ce-module-base.ce-module-contactForm { --ce-colors-border: var(--ce-colors-light-border); --ce-colors-border-focus: var(--ce-colors-light-border-focus); --ce-colors-rules: var(--ce-colors-light-rules); --ce-colors-rules-focus: var(--ce-colors-light-rules-focus); --ce-colors-text: var(--ce-colors-light-text); --ce-colors-text-focus: var(--ce-colors-light-text-focus); --ce-colors-placeholder: var(--ce-colors-light-placeholder); --ce-colors-placeholder-focus: var(--ce-colors-light-placeholder-focus); --ce-colors-btn-background: var(--ce-colors-light-btn-background); --ce-colors-btn-background-focus: var(--ce-colors-light-btn-background-focus); --ce-colors-btn-text: var(--ce-colors-light-btn-text); --ce-colors-btn-text-focus: var(--ce-colors-light-btn-text-focus); } } .ce-module-base.ce-module-contactForm form { display:flex; gap:var(--ce--gap); flex-wrap: wrap; } .ce-module-base.ce-module-contactForm form > input.time { position:fixed; left:-100000px; top:50%; } .ce-module-base.ce-module-contactForm form > em.phone_number_2 { position:fixed; left:-100000px; top:50%; } .ce-module-base.ce-module-contactForm form > em { position:relative; border:1px solid var(--ce-colors-border); border-top:0px; position:relative; display:block; color:var(--ce-colors-placeholder); width:100%; } .ce-module-base.ce-module-contactForm form > em:has(input:focus), .ce-module-base.ce-module-contactForm form > em:has(textarea:focus) { border:1px solid var(--ce-colors-border-focus); border-top:0px; color:var(--ce-colors-placeholder-focus); } .ce-module-base.ce-module-contactForm form > em input, .ce-module-base.ce-module-contactForm form > em textarea { border:0; background:transparent; outline:0; line-height:1em; padding:0.8em; display:block; font-style:normal; color:var(--ce-colors-text); width:100%; } .ce-module-base.ce-module-contactForm form > em textarea { height: var(--ce--textarea_height); resize: vertical; } .ce-module-base.ce-module-contactForm form > em input:focus, .ce-module-base.ce-module-contactForm form > em textarea:focus { color:var(--ce-colors-text-focus); } .ce-module-base.ce-module-contactForm form > em b { display:flex; position:absolute; top:0; left:0; width:100%; font-style:normal; line-height:0.8em; height:0.8em; top:-0.4em; } .ce-module-base.ce-module-contactForm form > em b i { display:block; position:relative; width:0.4em; height:100%; } .ce-module-base.ce-module-contactForm form > em b i ~ i { width:auto; flex-grow:1; } .ce-module-base.ce-module-contactForm form > em b i:before { content:''; position:absolute; top:50%; left:0; height:1px; width:100%; background:var(--ce-colors-border); overflow:hidden; } .ce-module-base.ce-module-contactForm form > em:has(input:focus) b i:before, .ce-module-base.ce-module-contactForm form > em:has(textarea:focus) b i:before { background:var(--ce-colors-border-focus); } .ce-module-base.ce-module-contactForm form > em b strong { display:block; line-height:inherit; font-size:0.8em; padding-left:0.4em; padding-right:0.4em; flex-grow:0; flex-shrink:0; } .ce-module-base.ce-module-contactForm form > label { position:relative; position:relative; display:block; width:100%; padding-left:1.7em; font-size:0.85em; line-height:1em; color:var(--ce-colors-rules); } .ce-module-base.ce-module-contactForm form > label:has(input:focus) { color:var(--ce-colors-rules-focus); } .ce-module-base.ce-module-contactForm form > label a, .ce-module-base.ce-module-contactForm form > label a:hover { color:inherit; text-decoration:underline; } .ce-module-base.ce-module-contactForm form > label a:hover { text-decoration:none; } .ce-module-base.ce-module-contactForm form > label > input { position:fixed; left:-100000px; top:50%; } .ce-module-base.ce-module-contactForm form > label:before { content:''; display:block; position:absolute; top:0; left:0; width:1em; height:1em; border:1px solid var(--ce-colors-border); } .ce-module-base.ce-module-contactForm form > label:has(input:focus):before { border:1px solid var(--ce-colors-border-focus); } .ce-module-base.ce-module-contactForm form > label:after { content:''; display:block; position:absolute; top:2px; left:2px; width:calc(1em - 4px); height:calc(1em - 4px); background:var(--ce-colors-border); display:none; } .ce-module-base.ce-module-contactForm form > label:has(input:checked):after { display:block; } .ce-module-base.ce-module-contactForm form > label:has(input:focus):after { background: var(--ce-colors-border-focus); } .ce-module-base.ce-module-step { /* kolorystyka dark */ --ce-colors-dark-background: #000000; --ce-colors-dark-text: #ffffff; /* kolorystyka light */ --ce-colors-light-background: #ffffff; --ce-colors-light-text: #000000; } @media only screen and (min-width: 769px) { .ce-desktop-elements-colors-dark .ce-module-base.ce-module-step { --ce-colors-text: var(--ce-colors-dark-text); --ce-colors-background: var(--ce-colors-dark-background); } .ce-desktop-elements-colors-light .ce-module-base.ce-module-step { --ce-colors-text: var(--ce-colors-light-text); --ce-colors-background: var(--ce-colors-light-background); } } @media only screen and (max-width: 768px) { .ce-mobile-elements-colors-dark .ce-module-base.ce-module-step { --ce-colors-text: var(--ce-colors-dark-text); --ce-colors-background: var(--ce-colors-dark-background); } .ce-mobile-elements-colors-light .ce-module-base.ce-module-step { --ce-colors-text: var(--ce-colors-light-text); --ce-colors-background: var(--ce-colors-light-background); } } .ce-module-base.ce-module-step { background:var(--ce-colors-background); color:var(--ce-colors-text); width:4em; height:4em; border-radius:50%; text-align:center; } .ce-module-base.ce-module-step b { display:block; position:absolute; line-height:1em; width:100%; top:50%; left:0; margin-top:-0.5em; font-size:1.5em; } .ce-module-base.ce-module-html { } .ce-module-button { --ce--width__desktop: auto; --ce--width__mobile: auto; --ce--width: var(--ce--width__desktop); } @media only screen and (max-width:768px){ .ce-module-button { --ce--width: var(--ce--width__mobile); } } .ce-module-base.ce-module-button { width:var(--ce--width); text-align:center; display:inline-block; } .ce-module-base.ce-module-single_image { --ce-bg-gradient-dark: linear-gradient(to top,rgba(255,255,255, 0.9) , rgba(255,255,255, 0)); --ce-bg-gradient-light: linear-gradient(to top,rgba(0, 0, 0, 0.65) , rgba(0, 0, 0, 0)); color:var(--ce-colors-text-important); overflow:hidden; } @media only screen and (min-width: 769px) { .ce-desktop-elements-colors-dark .ce-module-base.ce-module-single_image { --ce-bg-gradient: var(--ce-bg-gradient-dark); } .ce-desktop-elements-colors-light .ce-module-base.ce-module-single_image { --ce-bg-gradient: var(--ce-bg-gradient-light); } } @media only screen and (max-width: 768px) { .ce-mobile-elements-colors-dark .ce-module-base.ce-module-single_image { --ce-bg-gradient: var(--ce-bg-gradient-dark); } .ce-mobile-elements-colors-light .ce-module-base.ce-module-single_image { --ce-bg-gradient: var(--ce-bg-gradient-light); } } .ce-module-base.ce-module-single_image label { cursor:pointer; } .ce-module-base.ce-module-single_image > label, .ce-module-base.ce-module-single_image > a, .ce-module-base.ce-module-single_image > div { display:block; position:relative; } .ce-module-base.ce-module-single_image > label > img, .ce-module-base.ce-module-single_image > a > img, .ce-module-base.ce-module-single_image > div > img { display:block; width:100%; transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); } .ce-module-base.ce-module-single_image > label:hover > img, .ce-module-base.ce-module-single_image > label:focus-within > img, .ce-module-base.ce-module-single_image > a:hover > img, .ce-module-base.ce-module-single_image > a:focus-within > img { transform:scale(1.1); } .ce-module-base.ce-module-single_image > * > span { display:block; position:absolute; bottom:0; left:0; width:100%; padding:var(--ce-spacing-m); text-align:right; z-index:5; transition: bottom 0.5s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.5s; text-wrap: balance; } .ce-module-base.ce-module-single_image > label:hover > span, .ce-module-base.ce-module-single_image > label:focus-within > span, .ce-module-base.ce-module-single_image > a:hover > span, .ce-module-base.ce-module-single_image > a:focus-within > span { bottom:calc(0px - var(--ce-spacing-m)); opacity:0; } .ce-module-base.ce-module-single_image > * > span:before { display:block; position:absolute; bottom:0; left:0; width:100%; content:''; height:200%; background:var(--ce-bg-gradient); z-index:-1; } .ce-module-gallery { --ce--gap__desktop: 0px; --ce--gap__mobile: 0px; --ce--gap: var(--ce--gap__desktop); --ce--min_width__desktop: 200px; --ce--min_width__mobile: 200px; --ce--min_width: var(--ce--min_width__desktop); --ce--height_ratio__desktop: 100; --ce--height_ratio__mobile: 100; --ce--height_ratio: var(--ce--height_ratio__desktop); } @media only screen and (max-width:768px){ .ce-module-gallery { --ce--gap: var(--ce--gap__mobile); --ce--min_width: var(--ce--min_width__mobile); --ce--height_ratio: var(--ce--height_ratio__mobile); } } .ce-module-base.ce-module-gallery ul { padding:0; margin:0; list-style-type:none; display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--ce--min_width), 1fr)); gap:var(--ce--gap); } .ce-module-base.ce-module-gallery ul li { padding:0; margin:0; } .ce-module-base.ce-module-gallery ul li label { padding:0; margin:0; display:block; position:relative; overflow:hidden; padding-top:calc(1% * var(--ce--height_ratio)); cursor:pointer; } .ce-module-base.ce-module-gallery ul li label img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform 0.25s; transform:scale(1); } .ce-module-base.ce-module-gallery ul li label:hover img { transform: scale(1.1); }.ce-module-base.ce-module-gallery.ce-module-style-before-after { --ce--height_ratio__desktop: 45; --ce--height_ratio__mobile: 45; overflow:hidden; } .ce-module-base.ce-module-gallery.ce-module-style-before-after > span { display:block; position:absolute; bottom:0; right:0; pointer-event:none; color:#ffffff; font-size:var(--small-font-size); padding:var(--spacing-s); z-index:10; width:100%; text-align:center; line-height:1em; } .ce-module-base.ce-module-gallery.ce-module-style-before-after > span:before { position:absolute; bottom:0; right:0; width:100%; height:calc(100% + var(--spacing-m)); background:linear-gradient(to top,rgba(0, 0, 0, 0.45) , rgba(0, 0, 0, 0)); content:''; z-index:-1; } .ce-module-base.ce-module-gallery.ce-module-style-before-after ul { grid-template-columns:1fr 1fr; } .ce-module-base.ce-module-gallery.ce-module-style-before-after ul li + li ~ li { display:none; } .ce-module-base.ce-module-gallery.ce-module-style-before-after ul:before, .ce-module-base.ce-module-gallery.ce-module-style-before-after ul:after { display:block; position:absolute; content:'Przed zabiegiem'; right:50%; top:0; padding:var(--spacing-s); color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.2em; z-index:20; font-size:var(--smaller-font-size); line-height:1em; } .ce-module-base.ce-module-gallery.ce-module-style-before-after ul:after { content:'Po zabiegu'; left:50%; right:auto; font-weight:bold; } @media only screen and (max-width: 768px) { .ce-module-base.ce-module-gallery.ce-module-style-before-after ul { grid-template-columns:1fr; } .ce-module-base.ce-module-gallery.ce-module-style-before-after ul:before, .ce-module-base.ce-module-gallery.ce-module-style-before-after ul:after { right:0%; bottom:50%; width:100%; text-align:center; top:auto; } .ce-module-base.ce-module-gallery.ce-module-style-before-after ul:after { content:'Po zabiegu'; left:auto; right:0; bottom:auto; top:50%; } } .ce-module-base.ce-module-opinions { container-type: inline-size; position: relative; } .ce-module-base.ce-module-opinions .opinions { display:block; position:relative; } .ce-module-base.ce-module-opinions ul { --visible-slides: 1; --gap: var(--ce-spacing-m); display: flex; flex-wrap: wrap; gap: var(--gap); position: relative; list-style-type: none; padding: 0; margin: 0; width: 100%; } .ce-module-base.ce-module-opinions ul li { flex: 0 0 calc((100% - (var(--visible-slides) - 1) * var(--gap)) / var(--visible-slides)); background: var(--ce-colors-lightbackground); color: var(--ce-colors-text); padding:var(--ce-spacing-m); font-size:var(--small-font-size); display:flex; flex-direction:column; justify-content:space-between; border-radius:var(--global-radius); overflow:hidden; position:relative; } .ce-module-base.ce-module-opinions.format-carousel .opinions { overflow:hidden; } .ce-module-base.ce-module-opinions.format-carousel ul { flex-wrap:nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; scroll-behavior: smooth; cursor: grab; user-select: none; -webkit-user-select: none; margin-bottom:calc(0px - var(--global--scrollbar-width)); } .ce-module-base.ce-module-opinions.format-carousel ul li { scroll-snap-align: start; } .ce-module-base.ce-module-opinions.format-carousel ul.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .ce-module-base.ce-module-opinions.format-carousel ul.dragging li { pointer-events: none; } @container (min-width: 600px) { .ce-module-base.ce-module-opinions ul { --visible-slides: 2; } } @container (min-width: 900px) { .ce-module-base.ce-module-opinions ul { --visible-slides: 3; } } @container (min-width: 1200px) { .ce-module-base.ce-module-opinions ul { --visible-slides: 4; } } .ce-module-base.ce-module-opinions ul li > div { color:var(--ce-colors-text-important); font-style:italic; font-weight:normal; position:relative; z-index:10; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; max-height: 9em; /* Wysokość zwiniętego tekstu (3 * line-height) */ transition: max-height 0.4s ease-in-out; } .ce-module-base.ce-module-opinions ul li > div:has( ~ button.is-longer[aria-expanded="true"]) { -webkit-line-clamp: unset; max-height: var(--full-height); } .ce-module-base.ce-module-opinions ul li > button { display:block; margin-top:0; margin-bottom:auto; display:none; cursor:pointer; width:100%; border:0; padding:0; margin:0; font-weight:normal; color:rgba(0,0,0,0.5); text-decoration:none; text-align:left; background:transparent; width:100%; z-index:2; padding-top:0.3em; margin-bottom:auto; } .ce-module-base.ce-module-opinions ul li > button:hover, .ce-module-base.ce-module-opinions ul li > button:focus-within { color:rgba(0,0,0,1); } .ce-module-base.ce-module-opinions ul li > button i { font-style:normal; font-weight:normal; } .ce-module-base.ce-module-opinions ul li > button b { display:none; font-weight:normal; } .ce-module-base.ce-module-opinions ul li > button.is-longer { display:block; } .ce-module-base.ce-module-opinions ul li > button.is-longer[aria-expanded="true"] b { display:block; } .ce-module-base.ce-module-opinions ul li > button.is-longer[aria-expanded="true"] i { display:none; } .ce-module-base.ce-module-opinions ul li > span { display:block; padding-top:var(--ce-spacing-m); text-align:right; position:relative; z-index:10; } .ce-module-base.ce-module-opinions ul li > span > strong { display:block; font-weight:bold; line-height:1em; } .ce-module-base.ce-module-opinions ul li > span > em { display:block; line-height:1em; margin-top:var(--ce-spacing-xs); display:none; } .ce-module-base.ce-module-opinions ul li > span > span { display:block; line-height:1em; margin-top:var(--ce-spacing-xs); } .ce-module-base.ce-module-opinions .footer { margin-top:var(--ce-spacing-l); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--ce-spacing-s); align-items:center; align-content:center; } .ce-module-base.ce-module-opinions .footer:empty { display:none; } .ce-module-base.ce-module-opinions .footer > span { display:flex; gap:var(--ce-spacing-xs); user-select: none; -webkit-user-select: none; } .ce-module-base.ce-module-opinions .footer > span .unactive { opacity:0.3; pointer-events:none; } .ce-module-base.ce-module-opinions .footer > a { margin-left:auto; } .ce-module-base.ce-module-opinions .footer > a + a { margin-left:0; } @media only screen and (max-width:768px){ .ce-module-base.ce-module-opinions .footer { flex-direction:column; } .ce-module-base.ce-module-opinions .footer > a { margin-left:0; } .ce-module-base.ce-module-opinions .footer > a + a { margin-left:0; } } .ce-module-base.ce-module-persons { --ce-bg-gradient-dark: linear-gradient(to top,rgba(255,255,255, 0.9) , rgba(255,255,255, 0)); --ce-bg-gradient-light: linear-gradient(to top,rgba(0, 0, 0, 0.75) , rgba(0, 0, 0, 0)); --ce-bg-gradient-dark2: linear-gradient(to bottom,rgba(255,255,255, 0.9) , rgba(255,255,255, 0)); --ce-bg-gradient-light2: linear-gradient(to bottom,rgba(0, 0, 0, 0.75) , rgba(0, 0, 0, 0)); color:var(--ce-colors-text-important); overflow:hidden; } @media only screen and (min-width: 769px) { .ce-desktop-elements-colors-dark .ce-module-base.ce-module-persons { --ce-bg-gradient: var(--ce-bg-gradient-dark); --ce-bg-gradient2: var(--ce-bg-gradient-dark2); } .ce-desktop-elements-colors-light .ce-module-base.ce-module-persons { --ce-bg-gradient: var(--ce-bg-gradient-light); --ce-bg-gradient2: var(--ce-bg-gradient-light2); } } @media only screen and (max-width: 768px) { .ce-mobile-elements-colors-dark .ce-module-base.ce-module-persons { --ce-bg-gradient: var(--ce-bg-gradient-dark); --ce-bg-gradient2: var(--ce-bg-gradient-dark2); } .ce-mobile-elements-colors-light .ce-module-base.ce-module-persons { --ce-bg-gradient: var(--ce-bg-gradient-light); --ce-bg-gradient2: var(--ce-bg-gradient-light2); } } .ce-module-base.ce-module-persons { position: relative; } .ce-module-base.ce-module-persons ul { gap: var(--ce-spacing-m); position: relative; list-style-type: none; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .ce-module-base.ce-module-persons ul li { display:block; position:relative; overflow:hidden; } .ce-module-base.ce-module-persons ul li > a { padding-top:150%; border-radius:var(--global-radius); overflow:hidden; position:relative; display:block; background: var(--ce-colors-lightbackground); color: var(--ce-colors-text); z-index:1; } .ce-module-base.ce-module-persons ul li > a:before { display:block; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg, var(--color-primary), var(--color-primary-alternative)); z-index:2; border-radius:var(--global-radius); mix-blend-mode: multiply; transition: opacity 0.35s; opacity:-0; } .ce-module-base.ce-module-persons ul li:has(> i > a:hover, > i > a:focus-within) > a:before, .ce-module-base.ce-module-persons ul li:hover > a:before, .ce-module-base.ce-module-persons ul li > a:hover:before, .ce-module-base.ce-module-persons ul li > a:focus-within:before { opacity:1; } .ce-module-base.ce-module-persons ul li > a > i { display:block; position:absolute; z-index:10; left:0; width:100%; top:%; height:100%; display:flex; justify-content:center; align-items:center; align-content:center; color:#ffffff; font-style:normal; flex-direction:column; gap:var(--spacing-xs); opacity:0; top:calc(0px - 15% - var(--ce-spacing-m)); transition: top 0.35s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.35s; opacity:0; } .ce-module-base.ce-module-persons ul li:has(> i > a:hover, > i > a:focus-within) > a > i, .ce-module-base.ce-module-persons ul li:hover > a > i, .ce-module-base.ce-module-persons ul li > a:hover > i, .ce-module-base.ce-module-persons ul li > a:focus-within > i { opacity:1; top:calc(0px - 15%); } .ce-module-base.ce-module-persons ul li > a > i:before { display:block; border:1px solid #ffffff; border-radius:50%; font-size:var(--very-very-big-font-size); content: "\f007"; font-family: 'Font Awesome 5 Free'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; width:2em; height:2em; line-height:2em; text-align:center; } .ce-module-base.ce-module-persons ul li > a > i b { display:block; font-weight:normal; font-size:var(--small-font-size); } .ce-module-base.ce-module-persons ul li > a img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; transition: transform 0.35s, filter 0.35s, opacity 0.35s; } .ce-module-base.ce-module-persons ul li:has(> i > a:hover, > i > a:focus-within) > a img, .ce-module-base.ce-module-persons ul li:hover > a img, .ce-module-base.ce-module-persons ul li > a:hover img, .ce-module-base.ce-module-persons ul li > a:focus-within img { transform:scale(1.1); filter:blur(5px); opacity:1; } .ce-module-base.ce-module-persons ul li > a > span { display:block; position:absolute; bottom:0; left:0; width:100%; padding:var(--ce-spacing-m); z-index:5; transition: bottom 0.35s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.35s; text-wrap: balance; } .ce-module-base.ce-module-persons ul li:has(> i > a:hover, > i > a:focus-within) > a > span, .ce-module-base.ce-module-persons ul li:has(> i):hover > a > span, .ce-module-base.ce-module-persons ul li:has(> i) > a:hover > span, .ce-module-base.ce-module-persons ul li:has(> i) > a:focus-within > span { bottom:calc((var(--default-font-size) * 3) + var(--spacing-m)); } .ce-module-base.ce-module-persons ul li > a > span:before { display:block; position:absolute; bottom:0; left:0; width:100%; content:''; height:200%; background:var(--ce-bg-gradient); z-index:-1; } .ce-module-base.ce-module-persons ul li > a > span:after { display:block; position:absolute; top:100%; left:0; width:100%; content:''; height:200%; background:var(--ce-bg-gradient2); z-index:-1; } .ce-module-base.ce-module-persons ul li > a > span > em { display: block; font-style: normal; font-weight: 600; text-transform: uppercase; font-size: var(--small-font-size); line-height:1em; } .ce-module-base.ce-module-persons ul li > a > span > strong { display:block; font-size:var(--very-very-big-font-size); font-family:var(--heading2-font-family); font-weight:var(--heading2-font-weight); letter-spacing:var(--heading2-letter-spacing); line-height:1em; color:transparent; background:var(--ce-colors-heading-alternative); -webkit-text-fill-color:transparent; -webkit-background-clip: text; background-clip: text; padding:var(--spacing-xs) 0; } .ce-module-base.ce-module-persons ul li > a > span > i { display: block; font-style: normal; opacity:0.6; font-size: var(--smaller-font-size); line-height:1em; padding-top:var(--spacing-xs); font-weight:300; } .ce-module-base.ce-module-persons ul li > i { display:block; position:absolute; bottom:0; left:0; width:100%; z-index:20; display:flex; padding-bottom:var(--spacing-m); padding-left:var(--spacing-m); transition: bottom 0.35s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.35s; opacity:0; bottom:calc(0px - (var(--default-font-size) * 3) - var(--spacing-m)); font-style:normal; } .ce-module-base.ce-module-persons ul li:has(> i):hover > i { opacity:1; bottom:0; } .ce-module-base.ce-module-subpages { position: relative; } .ce-module-base.ce-module-subpages ul { gap: var(--ce-spacing-m); position: relative; list-style-type: none; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } .ce-module-base.ce-module-subpages ul li { display:block; position:relative; overflow:hidden; } .ce-module-base.ce-module-subpages ul li > a { padding-top:66.66%; border-radius:var(--global-radius); overflow:hidden; position:relative; display:block; background: var(--ce-colors-lightbackground); color: var(--ce-colors-text); z-index:1; } .ce-module-base.ce-module-subpages ul li > a:before { display:block; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg, var(--color-primary), var(--color-primary-alternative)); z-index:2; border-radius:var(--global-radius); mix-blend-mode: multiply; transition: opacity 0.35s; opacity:-0; } .ce-module-base.ce-module-subpages ul li:has(> i > a:hover, > i > a:focus-within) > a:before, .ce-module-base.ce-module-subpages ul li:hover > a:before, .ce-module-base.ce-module-subpages ul li > a:hover:before, .ce-module-base.ce-module-subpages ul li > a:focus-within:before { opacity:1; } .ce-module-base.ce-module-subpages ul li > a > i { display:block; position:absolute; z-index:10; left:0; width:100%; top:%; height:100%; display:flex; justify-content:center; align-items:center; align-content:center; color:#ffffff; font-style:normal; flex-direction:column; gap:var(--spacing-xs); opacity:0; top:calc(0px - 15% - var(--ce-spacing-m)); transition: top 0.35s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.35s; opacity:0; } .ce-module-base.ce-module-subpages ul li:has(> i > a:hover, > i > a:focus-within) > a > i, .ce-module-base.ce-module-subpages ul li:hover > a > i, .ce-module-base.ce-module-subpages ul li > a:hover > i, .ce-module-base.ce-module-subpages ul li > a:focus-within > i { opacity:1; top:calc(0px - 15%); } .ce-module-base.ce-module-subpages ul li > a > i:before { display:block; border:1px solid #ffffff; border-radius:50%; font-size:var(--very-very-big-font-size); content: "\f5da"; font-family: 'Font Awesome 5 Free'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; width:2em; height:2em; line-height:2em; text-align:center; } .ce-module-base.ce-module-subpages ul li > a > i b { display:block; font-weight:normal; font-size:var(--small-font-size); } .ce-module-base.ce-module-subpages ul li > a img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; transition: transform 0.35s, filter 0.35s, opacity 0.35s; } .ce-module-base.ce-module-subpages ul li:has(> i > a:hover, > i > a:focus-within) > a img, .ce-module-base.ce-module-subpages ul li:hover > a img, .ce-module-base.ce-module-subpages ul li > a:hover img, .ce-module-base.ce-module-subpages ul li > a:focus-within img { transform:scale(1.1); filter:blur(5px); opacity:1; } .ce-module-base.ce-module-subpages ul li > a > span { display:block; position:absolute; bottom:0; left:0; width:100%; padding:var(--ce-spacing-m); z-index:5; transition: bottom 0.35s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.35s; text-wrap: balance; } .ce-module-base.ce-module-subpages ul li:has(> i > a:hover, > i > a:focus-within) > a > span, .ce-module-base.ce-module-subpages ul li:has(> i):hover > a > span, .ce-module-base.ce-module-subpages ul li:has(> i) > a:hover > span, .ce-module-base.ce-module-subpages ul li:has(> i) > a:focus-within > span { bottom:calc((var(--default-font-size) * 3) + var(--spacing-m)); } .ce-module-base.ce-module-subpages ul li > a > span:before { display:block; position:absolute; bottom:0; left:0; width:100%; content:''; height:200%; background:linear-gradient(to top,rgba(0, 0, 0, 0.75) , rgba(0, 0, 0, 0)); z-index:-1; } .ce-module-base.ce-module-subpages ul li > a > span:after { display:block; position:absolute; top:100%; left:0; width:100%; content:''; height:200%; background:linear-gradient(to bottom, rgba(0, 0, 0, 0.75) , rgba(0, 0, 0, 0)); z-index:-1; } .ce-module-base.ce-module-subpages ul li > a > span > strong { display:block; font-size:var(--very-big-font-size); font-family:var(--heading2-font-family); font-weight:var(--heading2-font-weight); letter-spacing:var(--heading2-letter-spacing); line-height:1em; color:transparent; background:var(--ce-colors-heading-alternative); -webkit-text-fill-color:transparent; -webkit-background-clip: text; background-clip: text; padding:var(--spacing-xs) 0; } .ce-module-base.ce-module-youtube_video { position: relative; } .ce-module-base.ce-module-youtube_video > div { position:relative; padding-top:56%; } .ce-module-base.ce-module-youtube_video > div > iframe { display:block; position:absolute; top:0; left:0; width:100%; height:100%; } .ce-module-base.ce-module-articles { position: relative; } .ce-module-base.ce-module-articles ul.list { gap: var(--ce-spacing-m); position: relative; list-style-type: none; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } .ce-module-base.ce-module-articles ul.list li { display:block; position:relative; overflow:hidden; } .ce-module-base.ce-module-articles ul.list li > a { overflow:hidden; position:relative; display:block; color: var(--ce-colors-text); z-index:1; text-decoration:none; font-size:var(--small-font-size); padding-left:var(--spacing-s); padding-right:var(--spacing-s); } .ce-module-base.ce-module-articles ul.list li > a > em { padding-top:55%; border-radius:var(--global-radius); overflow:hidden; position:relative; display:block; background: var(--ce-colors-lightbackground); color: #ffffff; z-index:1; margin-bottom:var(--spacing-s); margin-left:calc(0px - var(--spacing-s)); margin-right:calc(0px - var(--spacing-s)); } .ce-module-base.ce-module-articles ul.list li > a > em:before { display:block; content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg, var(--color-primary), var(--color-primary-alternative)); z-index:2; border-radius:var(--global-radius); mix-blend-mode: multiply; transition: opacity 0.35s; opacity:-0; } .ce-module-base.ce-module-articles ul.list li > a:hover > em:before, .ce-module-base.ce-module-articles ul.list li > a:focus-within > em:before { opacity:1; } .ce-module-base.ce-module-articles ul.list li > a > em > i { display:block; position:absolute; z-index:10; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; align-content:center; color:#ffffff; font-style:normal; flex-direction:column; gap:var(--spacing-xs); opacity:0; top:calc(0px - var(--ce-spacing-m)); transition: top 0.35s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.35s; opacity:0; } .ce-module-base.ce-module-articles ul.list li > a:hover > em > i, .ce-module-base.ce-module-articles ul.list li > a:focus-within > em > i { opacity:1; top:calc(0px); } .ce-module-base.ce-module-articles ul.list li > a > em > i:before { display:block; border:1px solid #ffffff; border-radius:50%; font-size:var(--very-very-big-font-size); content: "\f5da"; font-family: 'Font Awesome 5 Free'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; width:2em; height:2em; line-height:2em; text-align:center; } .ce-module-base.ce-module-articles ul.list li > a > em > i b { display:block; font-weight:normal; font-size:var(--small-font-size); } .ce-module-base.ce-module-articles ul.list li > a > em img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; transition: transform 0.35s, filter 0.35s, opacity 0.35s; } .ce-module-base.ce-module-articles ul.list li > a:hover > em img, .ce-module-base.ce-module-articles ul.list li > a:focus-within > em img { transform:scale(1.1); filter:blur(5px); opacity:1; } .ce-module-base.ce-module-articles ul.list li > a > i { display: block; font-style: normal; font-weight: 500; font-size: var(--small-font-size); line-height:1em; padding-bottom:var(--spacing-xs); } .ce-module-base.ce-module-articles ul.list li > a > strong { display:block; font-size:var(--very-big-font-size); font-family:var(--heading2-font-family); font-weight:var(--heading2-font-weight); letter-spacing:var(--heading2-letter-spacing); line-height:1em; color:transparent; background:var(--ce-colors-heading-alternative); -webkit-text-fill-color:transparent; -webkit-background-clip: text; background-clip: text; line-height:1.2em; margin-bottom:var(--spacing-s); } .ce-module-base.ce-module-articles ul.list li > a > em:first-child + i + strong + p, .ce-module-base.ce-module-articles ul.list li > a > em:first-child + strong + p { margin-top:var(--spacing-s); } .ce-module-base.ce-module-articles ul.pagination { padding:0; list-style-type:none; display:flex; gap:var(--spacing-xs); justify-content:center; flex-wrap:wrap; margin-top:var(--spacing-l); } .ce-module-base.ce-module-articles ul.pagination li { } .ce-module-base.ce-module-articles ul.pagination li strong { line-height:1em; padding:1em; background:linear-gradient(90deg, var(--color-primary), var(--color-primary-alternative)); color:var(--color-primary-text); border-radius:var(--global-radius); display:block; } .ce-module-base.ce-module-articles ul.pagination li b { display:block; line-height:1em; padding:1em; color:var(--color-text-very-light); } .ce-module-base.ce-module-articles ul.pagination li a { display:block; line-height:1em; padding:1em; background:var(--heading-background-color); color:var(--color-text-light); display:block; text-decoration:none; } @media only screen and (max-width:1024px) { .ce-module-base.ce-module-articles ul.pagination li strong { padding:0.8em; } .ce-module-base.ce-module-articles ul.pagination li b { padding:0.8em; } .ce-module-base.ce-module-articles ul.pagination li a { padding:0.8em; } .ce-module-base.ce-module-articles ul.pagination { font-size:var(--smaller-font-size); } } .ce-module-base.ce-module-menu { } .ce-module-base.ce-module-menu ul { position:relative; display:block; margin:0; padding:0; list-style-type:none; border:1px solid var(--color-text-very-very-light); padding:var(--spacing-s) 0; border-radius:var(--global-radius); } .ce-module-base.ce-module-menu ul li { position:relative; display:block; margin:0; padding:0; } .ce-module-base.ce-module-menu ul li + li { } .ce-module-base.ce-module-menu ul li a { display:block; line-height:1.3em; text-decoration:none; color:var(--color-text-light); padding:var(--spacing-s) var(--spacing-m); position:relative; } .ce-module-base.ce-module-menu ul li.current > a { font-weight:bold; color:var(--color-text); } .ce-module-base.ce-module-menu ul li a:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; color:var(--color-primary); background:#ffffff; content: "\f054"; position:absolute; font-size:var(--very-small-font-size); line-height:2em; top:50%; margin-top:-1em; width:1em; text-align:center; left:0; margin-left:-0.5em; } .ce-module-base.ce-module-menu ul li a:hover:before, .ce-module-base.ce-module-menu ul ul li a:before { display:none; } .ce-module-base.ce-module-menu ul li a:hover { color:var(--color-primary); background:linear-gradient(90deg, var(--color-primary), var(--color-primary-alternative)); color:#ffffff; } .ce-module-base.ce-module-menu ul ul { border:0px; padding:0; font-size:var(--small-font-size); padding-bottom:var(--spacing-s); padding-top:var(--spacing-s); } .ce-module-base.ce-module-menu ul ul:before, .ce-module-base.ce-module-menu ul ul:after { display:block; position:absolute; content:''; background:#ffffff; left:-1px; width:1px; height:var(--spacing-s); top:0; } .ce-module-base.ce-module-menu ul ul:after { top:auto; bottom:0; } .ce-module-base.ce-module-menu ul ul a { padding:var(--spacing-xs) var(--spacing-m); } .ce-module-base.ce-module-menu ul ul a:after { display:block; position:absolute; content:''; background:var(--color-primary); left:-1px; width:1px; height:100%; top:0; }