.deko-azurowe{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection .Tooltip { pointer-events: none; } .descriptionSection .roundedImg { min-height: 65px !important; min-width: 65px !important; max-height: 65px !important; max-width: 65px !important; margin-bottom: 15px; } .descriptionSection__column--tiles { background-color: #f6f7f7; padding-bottom: 30px; background-size: cover; background-repeat: no-repeat; background-position: center; } .descriptionSection__column--tiles .grid { padding: 0 10px; display: flex; justify-content: center; flex-wrap: wrap; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 60px; } @media(min-width: 768px) { .descriptionSection__column--tiles .grid { padding: 0 20px; gap: 24px; } } @media(min-width: 1260px) { .descriptionSection__column--tiles .grid { padding: 0 30px; gap: 36px; } } .descriptionSection__column--tiles .grid div { background-color: white; color: #eb1f1c; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 8px; padding: 4px; font-size: 16px; box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; padding: 5px 10px; } .descriptionSection__column--tiles .big-text { padding: 0 20px; text-align: center; font-size: 32px; line-height: 1.2 !important; color: #eb1f1c; } .descriptionSection .Tooltip--first { display: flex; align-items: center; flex-direction: row-reverse; gap: 16px; left: unset !important; right: 15% !important; top: 50% !important; transform: translateY(-50%) !important; max-width: 300px !important; } .descriptionSection .Tooltip--second { display: flex; align-items: center; flex-direction: column; gap: 16px; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); } .descriptionSection .Tooltip--third { max-width: 272px !important; bottom: 5% !important; left: 50% !important; transform: translateX(-50%) !important; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: 16px; } @media(min-width: 500px) { .descriptionSection .Tooltip--third { bottom: 10% !important; } } @media(min-width: 700px) {} @media(min-width: 1260px) {} .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 20px; list-style: circle; color: red; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; pointer-events: all !important; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 42px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 20px; max-width: 278px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } }}.deko-sciennepremium{.div-blur { background: #0000009c !important; border-radius: 10px !important; padding: 10px !important; backdrop-filter: blur(12px) !important; } .descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection .Tooltip--first { bottom: 50% !important; left: 56px !important; transform: translateY(50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } .descriptionSection--withBg * { color: black !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .Tooltip--second { bottom: 50% !important; left: 5%; transform: translateY(50%); display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; } .descriptionSection--withBg .Tooltip--second .Tooltip__text { position: unset !important; } @media(min-width: 500px) {} @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--second { left: 30% !important; } } @media(min-width: 1000px) {} @media(min-width: 1260px) {} .descriptionSection .Tooltip--third { display: flex; align-items: center; flex-direction: column; gap: 16px; bottom: 50% !important; left: 50% !important; transform: translate(-50%, 50%); } @media(min-width: 500px) {} @media(min-width: 700px) {} @media(min-width: 1260px) {} .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 24px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; max-width: 350px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } } .technicalData { background-color: #fafafa; padding: 20px; margin-bottom: 60px; } .technicalData h2 { margin-bottom: 48px; } .technicalData h3 { margin-bottom: 12px; } .technicalData .box { display: grid; gap: 24px; } .technicalData__tile { background-color: white; padding: 24px; border: 1px solid #efefef; } .technicalData__tileRow { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #777777; margin-bottom: 12px; } .technicalData__tileRow .key { font-weight: 600; margin-right: auto; } .technicalData__tile figure { width: 100%; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #efefef; margin: 0 0 24px !important; padding-bottom: 24px; } .technicalData__tile figure img { max-width: 100%; } @media(min-width: 768px) { .technicalData { padding: 40px; } .technicalData .box { grid-template-columns: 1fr 1fr; } } @media(min-width: 1260px) { .technicalData { padding: 64px 112px; } .technicalData .box { grid-template-columns: 1fr 2fr 1fr; } } .Tooltip { pointer-events: none; } .Tooltip .Tooltip__circle { pointer-events: all !important; }}.deko-sciankiazurowe{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection--withBg * { color: black !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .Tooltip--second { bottom: 38% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--second { left: 10% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--second { left: 15% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--second { left: 20% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--second { left: 29% !important; } body .descriptionSection--withBg .Tooltip--second .Tooltip__text { left: -290px !important; bottom: -121px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--third { bottom: 5% !important; left: unset !important; right: 5% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--third { right: 10% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--third { right: 15% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--third { right: 20% !important; } body .descriptionSection--withBg .Tooltip--third .Tooltip__text { left: 117px !important; bottom: 50px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--third .Tooltip__circle { margin-left: auto; } .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 1%; bottom: 40%; } .descriptionSection .Tooltip--first .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--first { left: 17%; bottom: 9%; } .descriptionSection .Tooltip--first .Tooltip__text { position: unset !important; } } .descriptionSection .Tooltip--fourth { display: flex; align-items: center; bottom: unset; top: 20%; left: 24%; max-width: 220px; } .descriptionSection .Tooltip--fourth .Tooltip__text { position: absolute; top: 40px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--fourth { max-width: 330px; bottom: unset; top: 15%; left: 29%; } .descriptionSection .Tooltip--fourth .Tooltip__text { margin-left: 16px; position: unset !important; } } .descriptionSection .Tooltip--fifth { display: flex; align-items: center; flex-direction: column-reverse; bottom: 36%; left: 50%; transform: translateX(-50%); } .descriptionSection .Tooltip--fifth .Tooltip__text { margin-bottom: 16px; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: 0; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { min-width: 64px !important; min-height: 64px !important; object-fit: contain; margin-bottom: 30px !important; margin-top: 0 !important; position: relative !important; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0 !important; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } }}.deko-mdfnaplycie{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection .Tooltip--first { bottom: 50% !important; left: 56px !important; transform: translateY(50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } .descriptionSection--withBg * { color: black !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .Tooltip--second { bottom: 50% !important; left: 5%; transform: translateY(50%); display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; } .descriptionSection--withBg .Tooltip--second .Tooltip__text { position: unset !important; } @media(min-width: 500px) {} @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--second { left: 30% !important; } } @media(min-width: 1000px) {} @media(min-width: 1260px) {} .descriptionSection .Tooltip--third { display: flex; align-items: center; flex-direction: column; gap: 16px; bottom: 30% !important; left: 50% !important; transform: translate(-50%, 50%); } @media(min-width: 500px) {} @media(min-width: 700px) {} @media(min-width: 1260px) {} .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 24px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 54px; max-width: 350px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } } .technicalData { background-color: #fafafa; padding: 20px; margin-bottom: 60px; } .technicalData h2 { margin-bottom: 48px; } .technicalData h3 { margin-bottom: 12px; } .technicalData .box { display: grid; gap: 24px; } .technicalData__tile { background-color: white; padding: 24px; border: 1px solid #efefef; } .technicalData__tileRow { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #777777; margin-bottom: 12px; } .technicalData__tileRow .key { font-weight: 600; margin-right: auto; } .technicalData__tile figure { width: 100%; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #efefef; margin: 0 0 24px !important; padding-bottom: 24px; } .technicalData__tile figure img { max-width: 100%; } @media(min-width: 768px) { .technicalData { padding: 40px; } .technicalData .box { grid-template-columns: 1fr 1fr; } } @media(min-width: 1260px) { .technicalData { padding: 64px 112px; } .technicalData .box { grid-template-columns: 1fr 2fr 1fr; } } .Tooltip { pointer-events: none; } .Tooltip .Tooltip__circle { pointer-events: all !important; }}.deko-paneleakustyczne{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection .Tooltip { pointer-events: none; } .descriptionSection .Tooltip--first, .descriptionSection .Tooltip--second { bottom: 10% !important; display: flex; align-items: center; flex-direction: column; gap: 16px; } .descriptionSection .Tooltip--first { left: 5% !important; } .descriptionSection .Tooltip--second { flex-direction: column-reverse; } .descriptionSection .Tooltip--second { right: 5% !important; left: unset !important; } @media(min-width: 500px) { .descriptionSection .Tooltip--first, .descriptionSection .Tooltip--second { bottom: 15% !important; } } @media(min-width: 700px) { .descriptionSection .Tooltip--first, .descriptionSection .Tooltip--second { bottom: 20% !important; } } @media(min-width: 1260px) { .descriptionSection .Tooltip--first, .descriptionSection .Tooltip--second { bottom: 40% !important; } } .descriptionSection .Tooltip--third { max-width: 300px !important; bottom: 5% !important; left: 50% !important; transform: translateX(-50%) !important; display: flex; align-items: center; gap: 16px; } @media(min-width: 500px) { .descriptionSection .Tooltip--third { bottom: 10% !important; } } @media(min-width: 700px) {} @media(min-width: 1260px) {} .descriptionSection .Tooltip--fourth { bottom: unset !important; top: 0 !important; left: 50% !important; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; } @media(min-width: 500px) { .descriptionSection .Tooltip--fourth { top: 10% !important; } } @media(min-width: 768px) { .descriptionSection .Tooltip--fourth { top: 5% !important; } } @media(min-width: 1260px) { .descriptionSection .Tooltip--fourth { top: 20% !important; } } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 20px; list-style: circle; color: red; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; pointer-events: all !important; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 43px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; max-width: 278px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } }}.deko-drewnianethermowood{.img-test { max-width: 36px !important; height: auto !important; } .descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection .Tooltip--first { bottom: 5% !important; left: 45px !important; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } @media(min-width: 1000px) { .descriptionSection .Tooltip--first { align-items: center; left: 80px !important; bottom: 13% !important; } } .descriptionSection--withBg * { color: white !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .Tooltip--second { top: 40% !important; right: 5% !important; left: unset !important; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; max-width: 320px !important; } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--second { align-items: center; top: 10px !important; right: 8% !important; } } .descriptionSection--withBg .Tooltip--second .Tooltip__text { position: unset !important; } .descriptionSection--withBg .Tooltip--second .Tooltip__text ul { padding-left: 20px !important; } .descriptionSection--withBg .Tooltip--second .Tooltip__text li { padding-left: 0 !important; } .descriptionSection--withBg .Tooltip--second .Tooltip__text li::marker { color: #e83a26; } .descriptionSection--withBg .Tooltip--second .Tooltip__text li::before { display: none; } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--second { top: 25% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--second { top: 35% !important; flex-direction: row; align-items: flex-start; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--second { top: 40% !important; } } .descriptionSection .Tooltip--third { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; bottom: -16% !important; left: 10% !important; max-width: 320px !important; } .descriptionSection .Tooltip--third .Tooltip__text { position: unset !important; } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--third { flex-direction: row-reverse; bottom: -1% !important; } } .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/7partia/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 55px; } @media(min-width: 1000px) { .descriptionSection .descriptionSection__stepIcons img { margin-bottom: 34px; } } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; max-width: 350px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } } .Tooltip { pointer-events: none; } .Tooltip .Tooltip__circle { pointer-events: all !important; } .tilesSection { background-color: #f4f4f4; display: block; padding: 60px 20px; } @media(min-width: 768px) { .tilesSection { padding: 60px 40px; } } @media(min-width: 1260px) { .tilesSection { padding: 60px; } } .tilesSection .tiles { display: grid; gap: 20px; max-width: 900px; margin: 60px auto 0; } .tilesSection .tile img { max-width: 36px; height: auto; } @media(min-width: 768px) { .tilesSection .tiles { gap: 50px; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(min-width: 1260px) { .tilesSection .tiles { gap: 70px; grid-template-columns: repeat(3, minmax(0, 1fr)); } } .descriptionSection .Tooltip--fourth { display: flex; flex-direction: column; align-items: center; gap: 16px; bottom: 23% !important; right: 5% !important; left: unset !important; max-width: 320px !important; } .descriptionSection .Tooltip--fifth { display: flex; align-items: center; flex-direction: column; gap: 16px; bottom: 0 !important; left: 1% !important; } @media(min-width: 1000px) { .descriptionSection .Tooltip--fifth { bottom: 20% !important; left: 7% !important; } }}.deko-obrotowe{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection .Tooltip--first { bottom: 42% !important; left: 50% !important; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 16px; } @media(min-width: 1000px) { .descriptionSection .Tooltip--first { bottom: 45% !important; } } .descriptionSection .Tooltip--second { bottom: -14% !important; left: 50% !important; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } @media(min-width: 1000px) { .descriptionSection .Tooltip--second { bottom: 17% !important; } } .descriptionSection--withBg * { color: white !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/10partia/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 55px; } @media(min-width: 1000px) { .descriptionSection .descriptionSection__stepIcons img { margin-bottom: 21px; } } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; max-width: 350px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } } .Tooltip { pointer-events: none; } .Tooltip .Tooltip__circle { pointer-events: all !important; } .tilesSection { background-color: #f4f4f4; display: block; padding: 60px 20px; } @media(min-width: 768px) { .tilesSection { padding: 60px 40px; } } @media(min-width: 1260px) { .tilesSection { padding: 60px; } } .tilesSection .tiles { display: grid; gap: 20px; max-width: 900px; margin: 60px auto 0; } .tilesSection .tile img { max-width: 36px; height: auto; } @media(min-width: 768px) { .tilesSection .tiles { gap: 50px; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(min-width: 1260px) { .tilesSection .tiles { gap: 70px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }}.deko-ryflowane{.descriptionSection { max-width: 1381px; margin: 0 auto; } .descriptionSection * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection__Grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; padding: 20px; } .descriptionSection__Grid--item img { max-width: 90px; max-height: 90px; display: block; margin: 0 auto 10px auto; } .descriptionSection__Grid--item h3, .descriptionSection__Grid--item p { margin: 5px 0; text-align: center; } .descriptionSection__Switcher { display: flex; flex-direction: column; padding: 80px; background-color: #F1F1F1; } .descriptionSection__Row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .descriptionSection__RowsCenteredVertically { align-items: center; max-width: 800px; } .descriptionSectionCentered { flex-direction: column; text-align: center; max-width: 800px; } .descriptionSectionColorsAnimation { display: flex; gap: 80px; justify-content: center; padding: 80px; background-color: #F1F1F1; } .column50Colors { max-width: 600px; display: flex; flex-direction: column; } .button-container { margin-top: 30px; display: block; max-width: 300px; } .button-container a { display: block; text-decoration: none; color: #fff; text-align: center; background-color: #e63b20; padding: 10px 20px; border-radius: 5px; } .button-container a:hover { background-color: #333; } .descriptionSection__Column40 { width: 40%; padding-right: 20px; } .descriptionSection__Column50 { width: 50%; } .descriptionSection__Column60 { width: 60%; } .descriptionSection__column--image { position: relative; } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection__Switcher h3 { font-size: 1.5em; color: #0A0A0A; font-weight: bold; line-height: 1.2; margin: 0; } .descriptionSection__Switcher p { font-size: 1em; line-height: 1.6; color: #333; } .fullWidthImage { position: relative; background-color: #FFFFFF; text-align: center; padding: 30px; } .fullWidthImage img { width: 100%; height: auto; transition: opacity 0.5s ease; } .toggleSwitch { display: flex; justify-content: center; align-items: center; margin-top: 10px; font-size: 1em; } .toggleSwitch label { margin: 30px 10px; font-weight: bold; color: #333; } .toggleSwitch input[type="checkbox"] { width: 40px; height: 20px; appearance: none; background-color: #ccc; outline: none; cursor: pointer; border-radius: 10px; position: relative; transition: background-color 0.3s ease; } .toggleSwitch input[type="checkbox"]:checked { background-color: #e63b20; } .toggleSwitch input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background-color: #FFF; border-radius: 50%; transition: transform 0.3s ease; } .toggleSwitch input[type="checkbox"]:checked::before { transform: translateX(20px); } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 40%; bottom: 30%; } .descriptionSection .Tooltip--first .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 20% !important; bottom: 30% !important; } .descriptionSection .Tooltip--second .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 50%; } .descriptionSection .Tooltip--third .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--first { left: 55%; bottom: 2%; } .descriptionSection .Tooltip--first .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--second { left: 17%; bottom: 20%; } .descriptionSection .Tooltip--second .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--third { left: 17%; bottom: 20%; } .descriptionSection .Tooltip--third .Tooltip__text { position: unset !important; } } @media(max-width: 560px) { .descriptionSection .bigger-text { font-size: 12px; line-height: 16px; margin-bottom: 24px; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 5%; bottom: 35% !important; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 1%; bottom: 30% !important; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 30%; } .descriptionSection__Switcher { padding: 20px; } } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } @media(max-width: 768px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } .descriptionSection__Row { flex-direction: column; } .descriptionSection__Column40 { width: 100%; } .descriptionSection__Column60 { width: 100%; } .descriptionSectionColorsAnimation { gap: 20px; padding: 20px; flex-direction: column; text-align: center; padding-bottom: 40px; align-items: center; } .column50Colors { align-items: center; } } @media(max-width: 375px) { .descriptionSection__Grid { grid-template-columns: repeat(1, 1fr); } } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: center; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } } .descriptionSection__steps { display: flex; gap: 30px; } .descriptionSection__stepIcon { flex-direction: column; position: relative; max-width: 64px; }}.deko-panelescienne{.Mardom_Intro, .TF_Intro { display: flex; justify-content: space-evenly; align-items: center; } .Mardom_Intro_Column , .TF_Intro_Column { max-width: 50%; } .Mardom_Intro_Column, .TF_Intro_Column img { width: 400px; max-width: 100%; } .Mardom_section_column, .TF_section_column { display: flex; flex-direction: column; gap: 64px; align-items: center; } .Mardom_features { display: flex; flex-direction: column; gap: 32px; } .Mardom_feature_column { display: flex; align-items: flex-start; gap: 32px; } .Mardom_feature_column img { max-width: 64px; } .Mardom_section_grey, .TF_section_grey { background-color: #f1f1f1; padding: 112px; } @media (max-width: 768px) { .Mardom_section_grey { padding: 64px; } } @media (max-width: 600px) { .Mardom_Intro { display: flex; flex-direction: column; } .Mardom_Intro_Column { max-width: 100%; } .Mardom_feature_column { display: flex; flex-direction: column; } } .Mardom_columns, .TF_columns { display: flex; } .Mardom_column, .TF_column { display: flex; flex-direction: column; align-items: center; flex-basis: 50%; } .Mardom_column_txt, .TF_column_txt { display: flex; flex-direction: column; padding: 32px; justify-content: center; align-items: flex-start; } .Mardom_install_steps { display: flex; flex-direction: column; align-items: flex-start; } .Mardom_install_step { display: flex; gap: 32px; } .Mardom_install_step img { max-width: 64px; } .Mardom_inspirations { display: flex; flex-direction: column; } .Mardom_img_columns { display: flex; gap: 32px; } .Mardom_img_columns img { max-width: 100%; } @media (max-width: 768px) { .Mardom_columns, .TF_columns { display: flex; flex-direction: column; gap: 32px; } .Mardom_column, .TF_column { flex-basis: 100%; } .Mardom_img_columns, .TF_img_columns { display: flex; flex-direction: column; } } .descriptionSection { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { max-width: 1381px; margin: 0 auto; margin-bottom: 64px; } .descriptionSection h2 { font-size: 24px; max-width: 100%; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .bigger-text { font-size: 18px!important; line-height: 28px; } .button-container { display: flex; } .button-container a { display: flex; text-decoration: none; color: #fff; text-align: center; background-color: #e63b20; padding: 10px 20px; border-radius: 5px; } .Mardom_advantages { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; } .Mardom_advantage { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; background-color: #fff; width: 200px; padding: 32px; text-align: center; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } .Mardom_tooltips, .TF_tooltips { position:relative; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection__Grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; padding: 20px; } .descriptionSection__Grid--item img { max-width: 90px; max-height: 90px; display: block; margin: 0 auto 10px auto; } .descriptionSection__Grid--item h3, .descriptionSection__Grid--item p { margin: 5px 0; text-align: center; } @media(max-width: 768px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 375px) { .descriptionSection__Grid { grid-template-columns: repeat(1, 1fr); } } .descriptionSection .Tooltip--first { bottom: 30% !important; left: 15% !important; transform: translateY(50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } .descriptionSection .Tooltip--second { bottom: 40% !important; left: 20% !important; transform: translateY(50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } @media (max-width: 1024px) { .descriptionSection .Tooltip--first { bottom: 20% !important; left: 5% !important; } .descriptionSection .Tooltip--second { bottom: 40% !important; left: 20% !important; } } @media (max-width: 768px) { .descriptionSection .Tooltip--first { bottom: 35% !important; left: 15% !important; } .descriptionSection .Tooltip--second { bottom: 30% !important; left: 10% !important; } } @media (max-width: 425px) { .descriptionSection .Tooltip--first { bottom: 30% !important; left: 0% !important; } .descriptionSection .Tooltip--second { top: 30% !important; left: 10% !important; } }}.deko-elewacyjnekompozytowe{.img-test { max-width: 36px !important; height: auto !important; } .descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection .Tooltip--first { bottom: 0 !important; right: 3% !important; left: unset !important; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 320px !important; } @media(min-width: 1000px) { .descriptionSection .Tooltip--first { right: 23% !important; bottom: 9% !important; } } .descriptionSection--withBg * { color: white !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .Tooltip--second { top: 24% !important; right: 5% !important; left: unset !important; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; max-width: 320px !important; } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--second { align-items: center; right: 6% !important; } } .descriptionSection--withBg .Tooltip--first .Tooltip__text, .descriptionSection--withBg .Tooltip--second .Tooltip__text { position: unset !important; } .descriptionSection--withBg .Tooltip--first .Tooltip__text ul { padding-left: 20px !important; } .descriptionSection--withBg .Tooltip--first .Tooltip__text li { padding-left: 0 !important; } .descriptionSection--withBg .Tooltip--first .Tooltip__text li::marker { color: #e83a26; } .descriptionSection--withBg .Tooltip--first .Tooltip__text li::before { display: none; } @media(min-width: 768px) { .descriptionSection--withBg .Tooltip--first { bottom: 10% !important; right: 16% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--first { bottom: 22% !important; right: 17% !important; align-items: flex-start; } .descriptionSection--withBg .Tooltip--second { top: -48% !important; } .descriptionSection--withBg .Tooltip--first, .descriptionSection--withBg .Tooltip--second { flex-direction: row; } } .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/8partia/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 55px; } @media(min-width: 1000px) { .descriptionSection .descriptionSection__stepIcons img { margin-bottom: 34px; } } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; max-width: 350px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } } .Tooltip { pointer-events: none; } .Tooltip .Tooltip__circle { pointer-events: all !important; } .tilesSection { background-color: #f4f4f4; display: block; padding: 60px 20px; } @media(min-width: 768px) { .tilesSection { padding: 60px 40px; } } @media(min-width: 1260px) { .tilesSection { padding: 60px; } } .tilesSection .tiles { display: grid; gap: 20px; max-width: 1150px; margin: 60px auto 0; } .tilesSection .tile img { max-width: 36px; height: auto; max-height: 50px; object-fit: contain; } @media(min-width: 768px) { .tilesSection .tiles { gap: 50px; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(min-width: 1260px) { .tilesSection .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }}.deko-scienneclassic{.descriptionSection { max-width: 1381px; margin: 0 auto; } .descriptionSection * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection__Grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; padding: 20px; } .descriptionSection__Grid--item img { max-width: 90px; max-height: 90px; display: block; margin: 0 auto 10px auto; } .descriptionSection__Grid--item h3, .descriptionSection__Grid--item p { margin: 5px 0; text-align: center; } .descriptionSection__Switcher { display: flex; flex-direction: column; padding: 80px; background-color: #F1F1F1; } .descriptionSection__Row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .descriptionSection__RowsCenteredVertically { align-items: center; max-width: 800px; } .descriptionSectionCentered { flex-direction: column; text-align: center; max-width: 800px; } .descriptionSectionColorsAnimation { display: flex; gap: 80px; justify-content: center; padding: 80px; background-color: #F1F1F1; } .column50Colors { max-width: 600px; display: flex; flex-direction: column; } .button-container { margin-top: 30px; display: block; max-width: 300px; } .button-container a { display: block; text-decoration: none; color: #fff; text-align: center; background-color: #e63b20; padding: 10px 20px; border-radius: 5px; } .button-container a:hover { background-color: #333; } .descriptionSection__Column40 { width: 40%; padding-right: 20px; } .descriptionSection__Column50 { width: 50%; } .descriptionSection__Column60 { width: 60%; } .descriptionSection__column--image { position: relative; } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { height: auto; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 16 px; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection__Switcher h3 { font-size: 1.5em; color: #0A0A0A; font-weight: bold; line-height: 1.2; margin: 0; } .descriptionSection__Switcher p { font-size: 1em; line-height: 1.6; color: #333; } .fullWidthImage { position: relative; background-color: #FFFFFF; text-align: center; padding: 30px; } .fullWidthImage img { width: 100%; height: auto; transition: opacity 0.5s ease; } .toggleSwitch { display: flex; justify-content: center; align-items: center; margin-top: 10px; font-size: 1em; } .toggleSwitch label { margin: 30px 10px; font-weight: bold; color: #333; } .toggleSwitch input[type="checkbox"] { width: 40px; height: 20px; appearance: none; background-color: #ccc; outline: none; cursor: pointer; border-radius: 10px; position: relative; transition: background-color 0.3s ease; } .toggleSwitch input[type="checkbox"]:checked { background-color: #e63b20; } .toggleSwitch input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background-color: #FFF; border-radius: 50%; transition: transform 0.3s ease; } .toggleSwitch input[type="checkbox"]:checked::before { transform: translateX(20px); } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 40%; bottom: 50%; } .descriptionSection .Tooltip--first .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 20% !important; bottom: 50% !important; } .descriptionSection .Tooltip--second .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 50%; } .descriptionSection .Tooltip--third .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--first { left: 17%; bottom: 30%; } .descriptionSection .Tooltip--first .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--second { left: 17%; top: 40%; } .descriptionSection .Tooltip--second .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--third { left: 17%; bottom: 20%; } .descriptionSection .Tooltip--third .Tooltip__text { position: unset !important; } } @media(max-width: 560px) { .descriptionSection .bigger-text { font-size: 12px; line-height: 16px; margin-bottom: 24px; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 60% !important; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 1%; bottom: 50% !important; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 60%; } .descriptionSection__Switcher { padding: 20px; } } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } @media(max-width: 768px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } .descriptionSection__Row { flex-direction: column; } .descriptionSection__Column40 { width: 100%; } .descriptionSection__Column60 { width: 100%; } .descriptionSectionColorsAnimation { gap: 20px; padding: 20px; flex-direction: column; text-align: center; padding-bottom: 40px; align-items: center; } .column50Colors { align-items: center; } } @media(max-width: 375px) { .descriptionSection__Grid { grid-template-columns: repeat(1, 1fr); } } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: center; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } }}.deko-sciankitarasowe{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection--withBg * { color: black !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; background-color: #fff; max-width: 580px; border-radius: 16px; padding: 16px; } .descriptionSection--withBg .descriptionSection__whiteBg--text { margin-right: 0; margin-left: 0; background-color: #fff; border-radius: 16px; padding: 48px; } .descriptionSection--withBg .Tooltip--first { bottom: 28% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--first { left: 10% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--first { left: 15% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--first { left: 20% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--first { left: 1% !important; } body .descriptionSection--withBg .Tooltip--first .Tooltip__text { left: -290px !important; bottom: -121px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--second { bottom: 5% !important; left: unset !important; right: 5% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--second { right: 10% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--second { right: 15% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--second { right: 20% !important; } body .descriptionSection--withBg .Tooltip--second .Tooltip__text { left: 117px !important; bottom: 50px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--second .Tooltip__circle { margin-left: auto; } .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 20% !important; bottom: 10% !important; } .descriptionSection .Tooltip--first .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--first { left: 17%; bottom: 20%; } .descriptionSection .Tooltip--first .Tooltip__text { position: unset !important; } } .descriptionSection--withBg .Tooltip--third { bottom: 28% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--third { left: 10% !important; } } @media(max-width: 560px) { .descriptionSection .bigger-text { font-size: 12px; line-height: 16px; margin-bottom: 24px; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 1%; bottom: 10% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--third { left: 15% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--third { left: 20% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--third { left: 20% !important; } body .descriptionSection--withBg .Tooltip--third .Tooltip__text { left: -290px !important; bottom: -121px !important; top: unset !important; } } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 1%; bottom: 40%; } .descriptionSection .Tooltip--third .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--third { left: 17%; bottom: 20%; } .descriptionSection .Tooltip--third .Tooltip__text { position: unset !important; } } .descriptionSection .Tooltip--fourth { display: flex; align-items: center; bottom: unset; top: 20%; left: 24%; max-width: 220px; } .descriptionSection .Tooltip--fourth .Tooltip__text { position: absolute; top: 40px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--fourth { max-width: 330px; bottom: unset; top: 15%; left: 29%; } .descriptionSection .Tooltip--fourth .Tooltip__text { margin-left: 16px; position: unset !important; } } .descriptionSection .Tooltip--fifth { display: flex; align-items: center; flex-direction: column-reverse; bottom: 36%; left: 50%; transform: translateX(-50%); } .descriptionSection .Tooltip--fifth .Tooltip__text { margin-bottom: 16px; } .descriptionSection .Tooltip--sixth { display: flex; align-items: center; flex-direction: column-reverse; bottom: 36%; left: 50%; transform: translateX(-50%); } .descriptionSection .Tooltip--sixth .Tooltip__text { margin-bottom: 16px; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: center; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } }}.deko-sciennemini{.descriptionSection { max-width: 1381px; margin: 0 auto; } .descriptionSection * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection__Grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; padding: 20px; } .descriptionSection__Grid--item img { max-width: 90px; max-height: 90px; display: block; margin: 0 auto 10px auto; } .descriptionSection__Grid--item h3, .descriptionSection__Grid--item p { margin: 5px 0; text-align: center; } .descriptionSection__Switcher { display: flex; flex-direction: column; padding: 80px; background-color: #F1F1F1; } .descriptionSection__Row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .descriptionSection__RowsCenteredVertically { align-items: center; max-width: 800px; } .descriptionSectionCentered { flex-direction: column; text-align: center; max-width: 800px; } .descriptionSectionColorsAnimation { display: flex; gap: 80px; justify-content: center; padding: 80px; background-color: #F1F1F1; } .column50Colors { max-width: 600px; display: flex; flex-direction: column; } .button-container { margin-top: 30px; display: block; max-width: 300px; } .button-container a { display: block; text-decoration: none; color: #fff; text-align: center; background-color: #e63b20; padding: 10px 20px; border-radius: 5px; } .button-container a:hover { background-color: #333; } .descriptionSection__Column40 { width: 40%; padding-right: 20px; } .descriptionSection__Column50 { width: 50%; } .descriptionSection__Column60 { width: 60%; } .descriptionSection__column--image { position: relative; } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { height: auto; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 16 px; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection__Switcher h3 { font-size: 1.5em; color: #0A0A0A; font-weight: bold; line-height: 1.2; margin: 0; } .descriptionSection__Switcher p { font-size: 1em; line-height: 1.6; color: #333; } .fullWidthImage { position: relative; background-color: #FFFFFF; text-align: center; padding: 30px; } .fullWidthImage img { width: 100%; height: auto; transition: opacity 0.5s ease; } .toggleSwitch { display: flex; justify-content: center; align-items: center; margin-top: 10px; font-size: 1em; } .toggleSwitch label { margin: 30px 10px; font-weight: bold; color: #333; } .toggleSwitch input[type="checkbox"] { width: 40px; height: 20px; appearance: none; background-color: #ccc; outline: none; cursor: pointer; border-radius: 10px; position: relative; transition: background-color 0.3s ease; } .toggleSwitch input[type="checkbox"]:checked { background-color: #e63b20; } .toggleSwitch input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background-color: #FFF; border-radius: 50%; transition: transform 0.3s ease; } .toggleSwitch input[type="checkbox"]:checked::before { transform: translateX(20px); } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 40%; bottom: 50%; } .descriptionSection .Tooltip--first .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 20% !important; bottom: 50% !important; } .descriptionSection .Tooltip--second .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 50%; } .descriptionSection .Tooltip--third .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--first { left: 17%; bottom: 30%; } .descriptionSection .Tooltip--first .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--second { left: 17%; top: 40%; } .descriptionSection .Tooltip--second .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--third { left: 17%; bottom: 20%; } .descriptionSection .Tooltip--third .Tooltip__text { position: unset !important; } } @media(max-width: 560px) { .descriptionSection .bigger-text { font-size: 12px; line-height: 16px; margin-bottom: 24px; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 60% !important; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 1%; bottom: 50% !important; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 60%; } .descriptionSection__Switcher { padding: 20px; } } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } @media(max-width: 768px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } .descriptionSection__Row { flex-direction: column; } .descriptionSection__Column40 { width: 100%; } .descriptionSection__Column60 { width: 100%; } .descriptionSectionColorsAnimation { gap: 20px; padding: 20px; flex-direction: column; text-align: center; padding-bottom: 40px; align-items: center; } .column50Colors { align-items: center; } } @media(max-width: 375px) { .descriptionSection__Grid { grid-template-columns: repeat(1, 1fr); } } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: center; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } }}.zlacza-rurowe{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection .roundedImg { min-height: 65px !important; min-width: 65px !important; max-height: 65px !important; max-width: 65px !important; margin-bottom: 15px; } .descriptionSection__column--tiles { background-color: #f6f7f7; padding-bottom: 30px; background-size: cover; background-repeat: no-repeat; background-position: center; } .descriptionSection__column--tiles .grid { padding: 0 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 60px; } @media(min-width: 768px) { .descriptionSection__column--tiles .grid { padding: 0 20px; gap: 24px; } } @media(min-width: 1260px) { .descriptionSection__column--tiles .grid { padding: 0 30px; gap: 36px; } } .descriptionSection__column--tiles .grid div { background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 8px; padding: 4px; font-size: 14px; box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; } .descriptionSection__column--tiles .big-text { padding: 0 20px; text-align: center; font-size: 32px; line-height: 1.2 !important; } @media(min-width: 700px) {} @media(min-width: 1260px) {} .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100% !important; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 20px; list-style: circle; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 60px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 20px; max-width: 278px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } }}.rury{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection .Tooltip { pointer-events: none; } .descriptionSection .roundedImg { min-height: 65px !important; min-width: 65px !important; max-height: 65px !important; max-width: 65px !important; margin-bottom: 15px; } .descriptionSection__column--tiles { background-color: #f6f7f7; padding-bottom: 30px; background-size: cover; background-repeat: no-repeat; background-position: center; } .descriptionSection__column--tiles .grid { padding: 0 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 60px; } @media(min-width: 768px) { .descriptionSection__column--tiles .grid { padding: 0 20px; gap: 24px; } } @media(min-width: 1260px) { .descriptionSection__column--tiles .grid { padding: 0 30px; gap: 36px; } } .descriptionSection__column--tiles .grid div { background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 8px; padding: 4px; font-size: 14px; box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; } .descriptionSection__column--tiles .big-text { padding: 0 20px; text-align: center; font-size: 32px; line-height: 1.2 !important; } .descriptionSection .Tooltip--first { display: flex; align-items: center; flex-direction: column-reverse; justify-content: flex-end; gap: 16px; left: 50% !important; top: 5% !important; transform: translateX(-50%); } .descriptionSection .Tooltip--second { display: flex; align-items: center; flex-direction: column; gap: 16px; left: 10% !important; bottom: 10% !important; } @media(min-width: 700px) {} @media(min-width: 1260px) {} .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 20px; list-style: circle; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; pointer-events: all !important; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 60px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 20px; max-width: 278px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } }}.reklama{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection--withBg * { color: black !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .Tooltip--first { bottom: 44% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--first { left: 15% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--first { left: 20% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--first { left: 25% !important; } } .descriptionSection--withBg .Tooltip--second { bottom: 15% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--second { left: 15% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--second { left: 20% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--second { left: 25% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--first { left: 30% !important; } body .descriptionSection--withBg .Tooltip--first .Tooltip__text { left: -290px !important; bottom: -121px !important; top: unset !important; } .descriptionSection--withBg .Tooltip--second { left: 30% !important; } body .descriptionSection--withBg .Tooltip--second .Tooltip__text { left: -290px !important; bottom: -121px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--third { bottom: unset !important; top: 39% !important; left: unset !important; right: 9% !important; display: flex; justify-content: flex-end; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--third { right: 20% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--third { right: 25% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--third { right: 16% !important; } body .descriptionSection--withBg .Tooltip--third .Tooltip__text { margin-left: 16px; position: unset !important; } } .descriptionSection--withBg .Tooltip--fourth .Tooltip__circle { margin-left: auto; } .descriptionSection--withBg .Tooltip--fourth { bottom: 24% !important; left: unset !important; right: 9% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--fourth { right: 20% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--fourth { right: 25% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--fourth { right: 33% !important; } body .descriptionSection--withBg .Tooltip--fourth .Tooltip__text { left: 290px !important; bottom: -128px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--fourth .Tooltip__circle { margin-left: auto; } .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 20px; list-style: circle; color: red; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--fifth { display: flex; flex-direction: column; align-items: center; bottom: unset; top: 12%; right: 46%; left: unset; max-width: 220px; } .descriptionSection .Tooltip--fifth .Tooltip__text { position: absolute; top: 40px; margin-top: 16px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--fifth { max-width: 274px; right: unset; bottom: unset; top: 14%; left: 2%; } .descriptionSection .Tooltip--fifth .Tooltip__text { position: unset !important; } } .descriptionSection .Tooltip--sixth { display: flex; align-items: center; flex-direction: column; top: 22%; left: 50%; transform: translateX(-50%); } .descriptionSection .Tooltip--sixth .Tooltip__text { margin-top: 16px; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { position: relative; z-index: 2; width: 64px; max-width: unset !important; height: 64px !important; object-fit: contain; margin-bottom: 70px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } }}.reklama-variant1{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: \"Open Sans\", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection--withBg * { color: black !important; } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .Tooltip--second { bottom: 42% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--second { left: 15% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--second { left: 20% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--second { left: 25% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--second { left: 30% !important; } body .descriptionSection--withBg .Tooltip--second .Tooltip__text { left: -290px !important; bottom: -121px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--third { bottom: 50% !important; left: unset !important; right: 15% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--third { right: 20% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--third { right: 25% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--third { right: 30% !important; } body .descriptionSection--withBg .Tooltip--third .Tooltip__text { left: 290px !important; bottom: -128px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--third .Tooltip__circle { margin-left: auto; } .descriptionSection--withBg .Tooltip--fourth { bottom: 23% !important; left: unset !important; right: 15% !important; } @media(min-width: 500px) { .descriptionSection--withBg .Tooltip--fourth { right: 20% !important; } } @media(min-width: 700px) { .descriptionSection--withBg .Tooltip--fourth { right: 25% !important; } } @media(min-width: 1260px) { .descriptionSection--withBg .Tooltip--fourth { right: 30% !important; } body .descriptionSection--withBg .Tooltip--fourth .Tooltip__text { left: 290px !important; bottom: -128px !important; top: unset !important; } } .descriptionSection--withBg .Tooltip--fourth .Tooltip__circle { margin-left: auto; } .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 20px; list-style: circle; color: red; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--fifth { display: flex; flex-direction: column-reverse; align-items: center; bottom: unset; top: 50%; right: 0; left: unset; max-width: 220px; } .descriptionSection .Tooltip--fifth .Tooltip__text { position: absolute; top: 40px; margin-bottom: 16px; } @media(min-width: 1260px) { .descriptionSection .Tooltip--fifth { max-width: 274px; right: unset; bottom: unset; top: 13%; left: 55%; } .descriptionSection .Tooltip--fifth .Tooltip__text { margin-left: 16px; position: unset !important; } } .descriptionSection .Tooltip--sixth { display: flex; align-items: center; flex-direction: column-reverse; bottom: 18%; left: 50%; transform: translateX(-50%); } .descriptionSection .Tooltip--sixth .Tooltip__text { margin-bottom: 16px; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: \"\"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: \"\"; pointer-events: none; position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { position: relative; z-index: 2; max-width: unset !important; height: unset !important; width: 64px; height: 64px; object-fit: contain; margin-bottom: 70px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } }}.zestawy-variant1{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection .Tooltip { pointer-events: none; } .descriptionSection .roundedImg { min-height: 65px !important; min-width: 65px !important; max-height: 65px !important; max-width: 65px !important; margin-bottom: 15px; } .descriptionSection__column--tiles { background-color: #f6f7f7; padding-bottom: 30px; background-size: cover; background-repeat: no-repeat; background-position: center; } .descriptionSection__column--tiles .grid { padding: 0 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 60px; } @media(min-width: 768px) { .descriptionSection__column--tiles .grid { padding: 0 20px; gap: 24px; } } @media(min-width: 1260px) { .descriptionSection__column--tiles .grid { padding: 0 30px; gap: 36px; } } .descriptionSection__column--tiles .grid div { background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 8px; padding: 4px; font-size: 14px; box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; } .descriptionSection__column--tiles .big-text { padding: 0 20px; text-align: center; font-size: 32px; line-height: 1.2 !important; } .descriptionSection .Tooltip--first { display: flex; align-items: center; flex-direction: column-reverse; justify-content: flex-end; gap: 16px; left: 50% !important; top: 5% !important; transform: translateX(-50%); } .descriptionSection .Tooltip--second { display: flex; align-items: center; flex-direction: column-reverse; gap: 16px; left: 10% !important; top: 7% !important; bottom: unset !important; } .descriptionSection .Tooltip--third { display: flex; align-items: center; flex-direction: column-reverse; gap: 16px; left: unset !important; right: 10% !important; bottom: 7% !important; } @media(min-width: 700px) {} @media(min-width: 1260px) {} .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 20px; list-style: circle; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; pointer-events: all !important; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 60px; } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 20px; max-width: 278px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } }}.zestawy-variant2{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection--withBg { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 25px; min-height: 550px; align-items: flex-start !important; } .descriptionSection .Tooltip--first { bottom: 0 !important; right: 3% !important; left: unset !important; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 320px !important; } @media(min-width: 1000px) { .descriptionSection .Tooltip--first { right: 23% !important; bottom: 9% !important; } } .descriptionSection--withBg .descriptionSection__column--text { margin-right: 0; margin-left: 0; } .descriptionSection--withBg .descriptionSection__column--text * { color: black; } .descriptionSection--withBg .Tooltip--first .Tooltip__text { position: unset !important; } @media(min-width: 768px) { .descriptionSection--withBg .Tooltip--first { bottom: 10% !important; right: 16% !important; } } @media(min-width: 1000px) { .descriptionSection--withBg .Tooltip--first { bottom: 36% !important; right: 23% !important; align-items: flex-start; } .descriptionSection--withBg .Tooltip--first { flex-direction: row; } } .descriptionSection--withBg .Tooltip .Tooltip__text { position: absolute; top: 40px !important; } .descriptionSection--withBg .Tooltip .Tooltip__text * { color: white !important; } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/9partia/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 55px; } @media(min-width: 1000px) { .descriptionSection .descriptionSection__stepIcons img { margin-bottom: 34px; } } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; max-width: 350px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { padding: 50px; min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } } .Tooltip { pointer-events: none; } .Tooltip .Tooltip__circle { pointer-events: all !important; } .Tooltip li { position: relative; list-style: none; } .Tooltip li::before { content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 16px; background-size: contain; background-image: url('../../../img/descriptionSections/9partia/bullet.svg'); background-position: center; background-repeat: no-repeat; } .numbersGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 360px; } .numbersGrid .item { display: flex; align-items: center; gap: 16px; } .numbersGrid .item img { object-fit: contain; width: 16px; height: 16px; } .numbersGrid .item span { font-size: 14px; color: #777; }}.zestawy-variant3{.descriptionSections { max-width: 1381px; margin: 0 auto; } .descriptionSections * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection .Tooltip--first { bottom: 12% !important; left: 35% !important; display: flex; flex-direction: row; gap: 16px; align-items: center; max-width: 230px !important; } @media(min-width: 1000px) { .descriptionSection .Tooltip--first { max-width: 310px !important; bottom: 34% !important; left: 10px !important; flex-direction: row-reverse; } } .descriptionSection .Tooltip--second { bottom: 8% !important; right: 33% !important; left: unset !important; display: flex; align-items: center; gap: 16px; flex-direction: row-reverse; max-width: 240px !important; } @media(min-width: 1000px) { .descriptionSection .Tooltip--second { flex-direction: row; align-items: center; bottom: 15% !important; right: -6% !important; max-width: 320px !important; } } .descriptionSection__column--image { position: relative; } @media(max-width: 767px) { .descriptionSection__column--mobileMarginTop { margin-top: 40px; } } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { width: 100%; height: 100%; object-fit: cover; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection ul { padding-left: 0; list-style: none; } .descriptionSection ul li { padding-left: 35px; position: relative; margin-bottom: 12px; } .descriptionSection ul li::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("../../../img/descriptionSections/11partia/bullet.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } .descriptionSection ul span { color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip:hover .Tooltip__text { opacity: 1; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection .descriptionSection__steps { display: flex; margin-top: 32px; } .descriptionSection .descriptionSection__stepIcons { flex-basis: 64px; display: flex; flex-direction: column; position: relative; margin-right: 32px; } .descriptionSection .descriptionSection__stepIcons::before { content: ""; pointer-events: none; position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background-color: #e0e0e0; } .descriptionSection .descriptionSection__stepIcons img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 55px; } @media(min-width: 1000px) { .descriptionSection .descriptionSection__stepIcons img { margin-bottom: 34px; } } .descriptionSection .descriptionSection__stepIcons img:last-child { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts h3 { margin-bottom: 0; } .descriptionSection .descriptionSection__stepTexts p { margin-top: 0; margin-bottom: 32px; max-width: 350px; } .descriptionSection .descriptionSection__stepTexts .descriptionSection__stepText:last-child p { margin-bottom: 0; } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } } .Tooltip { pointer-events: none; } .Tooltip .Tooltip__circle { pointer-events: all !important; } .tilesSection { background-color: #f4f4f4; display: block; padding: 60px 20px; } @media(min-width: 768px) { .tilesSection { padding: 60px 40px; } } @media(min-width: 1260px) { .tilesSection { padding: 60px; } } .tilesSection .tiles { display: grid; gap: 20px; max-width: 900px; margin: 60px auto 0; } .tilesSection .tile img { max-width: 36px; height: auto; } @media(min-width: 768px) { .tilesSection .tiles { gap: 50px; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(min-width: 1260px) { .tilesSection .tiles { gap: 70px; grid-template-columns: repeat(3, minmax(0, 1fr)); } } .Tooltip--third, .Tooltip--fourth, .Tooltip--fifth, .Tooltip--sixth, .Tooltip--seventh, .Tooltip--eighth { display: flex; flex-direction: column; align-items: center; gap: 16px; } .Tooltip--third { flex-direction: column-reverse; top: -20% !important; bottom: unset !important; left: 10% !important; align-items: flex-start; } .Tooltip--fourth { flex-direction: column-reverse !important; left: unset !important; right: 7%; bottom: unset !important; top: -25%; } .Tooltip--fifth { align-items: flex-end; flex-direction: column-reverse !important; right: 13%; left: unset !important; bottom: 40% !important; } .Tooltip--sixth { left: 12% !important; bottom: -20px !important; } .Tooltip--seventh { align-items: flex-start; bottom: -20% !important; left: 9% !important; } .Tooltip--eighth { align-items: flex-end; bottom: -100px !important; left: 3% !important; } @media(min-width: 768px) { .Tooltip--third { align-items: center; left: -4% !important; top: 3% !important; } .Tooltip--fourth { top: -4% !important; right: 25% !important; } .Tooltip--fifth { align-items: center; right: -3%; } .Tooltip--sixth { left: 30% !important; bottom: 20% !important; } .Tooltip--seventh { align-items: center; left: -3% !important; bottom: 0 !important; } .Tooltip--eighth { left: unset !important; right: 3% !important; bottom: 0 !important; align-items: center; } }}.zestawy-variant4{.product-description { background-color: #fff; } .descriptionSection { max-width: 1381px; margin: 0 auto; } .descriptionSection * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; } .descriptionSection__Grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; padding: 20px; } .descriptionSection__Grid--item img { max-width: 90px; max-height: 90px; display: block; margin: 0 auto 10px auto; } .descriptionSection__Grid--item h3, .descriptionSection__Grid--item p { margin: 5px 0; text-align: center; } .descriptionSection__Switcher { display: flex; flex-direction: column; padding: 80px; background-color: #F1F1F1; } .descriptionSection__Row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .descriptionSection__RowsCenteredVertically { align-items: center; max-width: 800px; } .descriptionSectionCentered { flex-direction: column; text-align: center; } .descriptionSectionColorsAnimation { display: flex; gap: 80px; justify-content: center; padding: 80px; background-color: #F1F1F1; } .column50Colors { max-width: 600px; display: flex; flex-direction: column; } .button-container { margin-top: 30px; display: block; max-width: 300px; } .button-container a { display: block; text-decoration: none; color: #fff; text-align: center; background-color: #e63b20; padding: 10px 20px; border-radius: 5px; } .button-container a:hover { background-color: #333; } .descriptionSection__Column20 { width: 20%; } .descriptionSection__Column40 { width: 40%; padding-right: 20px; } .descriptionSection__Column50 { width: 50%; } .descriptionSection__Column60 { width: 60%; } .descriptionSection__Column80 { width: 80%; } .descriptionSection__column--image { position: relative; } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { max-width: 100%; height: auto; } .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 16 px; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection__Switcher h3 { font-size: 1.5em; color: #0A0A0A; font-weight: bold; line-height: 1.2; margin: 0; } .descriptionSection__Switcher p { font-size: 1em; line-height: 1.6; color: #333; } .fullWidthImage { position: relative; background-color: #FFFFFF; text-align: center; padding: 30px; } .fullWidthImage img { width: 100%; height: auto; transition: opacity 0.5s ease; } .toggleSwitch { display: flex; justify-content: center; align-items: center; margin-top: 10px; font-size: 1em; } .toggleSwitch label { margin: 30px 10px; font-weight: bold; color: #333; } .toggleSwitch input[type="checkbox"] { width: 40px; height: 20px; appearance: none; background-color: #ccc; outline: none; cursor: pointer; border-radius: 10px; position: relative; transition: background-color 0.3s ease; } .toggleSwitch input[type="checkbox"]:checked { background-color: #e63b20; } .toggleSwitch input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background-color: #FFF; border-radius: 50%; transition: transform 0.3s ease; } .toggleSwitch input[type="checkbox"]:checked::before { transform: translateX(20px); } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 30%; bottom: 30%; } .descriptionSection .Tooltip--first .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 20% !important; bottom: 50% !important; } .descriptionSection .Tooltip--second .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 50%; } .descriptionSection .Tooltip--third .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection__greyBlocks { display: flex; gap: 20px; align-items: unset !important; } .greyBlockRow { display: flex; gap: 20px; padding-bottom: 40px; align-items: start; } .greyBlock { display: flex; flex-direction: column; background-color: #F1F1F1; padding: 40px; } .Block50 { flex-basis: 50%; } .Block50 img { max-width: 100px; } .greyBlock100 { flex-direction: row; align-items: center; padding: 0 10%; } .greyBlock100 img { max-width: 90px; } .descriptionSection__BlocksSection { display: flex; flex-direction: column; gap: 20px; } .descriptionSection__acMeasures { display: flex; flex-direction: column; } .acMeasures { display: flex; flex-direction: row; align-items: flex-start; } .acMeasures img { max-width: 50%; } @media(min-width: 1260px) { .descriptionSection .Tooltip--first { left: 30%; bottom: 10%; } .descriptionSection .Tooltip--first .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--second { left: 17%; top: 40%; } .descriptionSection .Tooltip--second .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--third { left: 17%; bottom: 20%; } .descriptionSection .Tooltip--third .Tooltip__text { position: unset !important; } } @media(max-width: 560px) { .descriptionSection .bigger-text { font-size: 12px; line-height: 16px; margin-bottom: 24px; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 26% !important; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 1%; bottom: 50% !important; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 60%; } .descriptionSection__Switcher { padding: 40px; } } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } @media(max-width: 768px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } .descriptionSection__Row { flex-direction: column; } .descriptionSection__Switcher { padding: 60px; } .descriptionSection__Column20 { width: 100%; } .descriptionSection__Column40 { width: 100%; } .descriptionSection__Column60 { width: 100%; } .descriptionSection__Column80 { width: 100%; } .descriptionSectionColorsAnimation { gap: 20px; padding: 20px; flex-direction: column; text-align: center; padding-bottom: 40px; align-items: center; } .column50Colors { align-items: center; } .greyBlockRow { flex-direction: column; } .greyBlock100 { flex-direction: column; padding: 0; align-items: unset; } .descriptionSection__greyBlocks { display: flex; flex-direction: column; } .acMeasures { display: flex; flex-direction: column; } .acMeasures img { max-width: 100%; } } @media(max-width: 550px) { .descriptionSection__Switcher { padding: 60px 20px; } .toggleSwitch { font-size: 0.6em; } } @media(max-width: 375px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } .Tooltip__text h3 { font-size: 14px; } .Tooltip__text p { font-size: 12px; } .descriptionSection__Grid--item h3 { font-size: 14px; } } @media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: center; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { min-height: 820px; } } @media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } } .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); padding: 20px; z-index: 1000; width: 90%; max-width: 80%; max-height: 80%; overflow-y: auto; } .popup-content { display: flex; flex-direction: column; } .popup-content-patterns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .popup-content-patterns img { width: 150px; height: 150px; object-fit: cover; border: 1px solid #ccc; } .close-btn { position: absolute; top: 10px; right: 10px; background-color: #ff0000; color: #fff; border: none; padding: 5px 10px; cursor: pointer; font-size: 16px; border-radius: 50%; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .popup::-webkit-scrollbar { width: 10px; } .popup::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } .popup::-webkit-scrollbar-thumb:hover { background-color: #555; } .slideshow-container { display: flex; width: 100%; max-width: 800px; overflow: hidden; position: relative; margin: auto; } .mySlides { display: flex !important; transition: transform 0.5s ease; } .mySlide { width: 160px; margin: 20px; } .mySlide img { width: 100%; max-width: 100%; height: auto; } .mySlide p { font-size: 12px; } .prev, .next { cursor: pointer; top: 50%; padding: 16px; margin-top: -22px; font-weight: bold; font-size: 18px; transition: 0.6s ease; user-select: none; } .mySlidesNavigation { display: flex; gap: 20px; justify-content: center; } .next { right: 0; } .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #f1f1f1; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .dot--active, .dot:hover { background-color: #e63b20; } .mySlideFade { animation-name: fade; animation-duration: 1.5s; } @keyframes mySlideFade { from { opacity: .4 } to { opacity: 1 } } @media only screen and (max-width: 300px) { .prev, .next, .text { font-size: 11px } }}.sztukateria{.Mardom_Intro, .TF_Intro { display: flex; justify-content: space-evenly; align-items: center; } .Mardom_Intro_Column, .TF_Intro_Column { max-width: 50%; } .Mardom_Intro_Column, .TF_Intro_Column img { width: 400px; max-width: 100%; } .Mardom_section_column, .TF_section_column { display: flex; flex-direction: column; gap: 64px; align-items: center; } .Mardom_features { display: flex; flex-direction: column; gap: 32px; } .Mardom_feature_column { display: flex; align-items: flex-start; gap: 32px; } .Mardom_feature_column img { max-width: 64px; } .Mardom_section_grey, .TF_section_grey { background-color: #f1f1f1; padding: 112px; } @media (max-width: 768px) { .Mardom_section_grey { padding: 64px; } } @media (max-width: 600px) { .Mardom_Intro { display: flex; flex-direction: column; } .Mardom_Intro_Column { max-width: 100%; } .Mardom_feature_column { display: flex; flex-direction: column; } } .Mardom_columns, .TF_columns { display: flex; } .Mardom_column, .TF_column { display: flex; flex-direction: column; align-items: center; flex-basis: 50%; } .Mardom_column_txt, .TF_column_txt { display: flex; flex-direction: column; padding: 32px; justify-content: center; align-items: flex-start; } .Mardom_install_steps { display: flex; flex-direction: column; align-items: flex-start; } .Mardom_install_step { display: flex; gap: 32px; } .Mardom_install_step img { max-width: 64px; } .Mardom_inspirations { display: flex; flex-direction: column; } .Mardom_img_columns { display: flex; gap: 32px; } .Mardom_img_columns img { max-width: 100%; } @media (max-width: 768px) { .Mardom_columns, .TF_columns { display: flex; flex-direction: column; gap: 32px; } .Mardom_column, .TF_column { flex-basis: 100%; } .Mardom_img_columns, .TF_img_columns { display: flex; flex-direction: column; } } .descriptionSection { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { max-width: 1381px; margin: 0 auto; margin-bottom: 64px; } .descriptionSection h2 { font-size: 24px; max-width: 100%; margin-top: 0; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p, .descriptionSection ul { font-size: 14px; line-height: 25px; color: #777777; } .bigger-text { font-size: 18px !important; line-height: 28px; } .button-container { display: flex; } .button-container a { display: flex; text-decoration: none; color: #fff; text-align: center; background-color: #e63b20; padding: 10px 20px; border-radius: 5px; } .Mardom_advantages { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; } .Mardom_advantage { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; background-color: #fff; width: 200px; padding: 32px; text-align: center; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } .Mardom_tooltips, .TF_tooltips { position: relative; } .descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text ul { list-style: circle; padding-left: 20px; margin: 5px 0; font-size: 14px; color: red; } .descriptionSection .Tooltip .Tooltip__text ul span { color: white; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; } .descriptionSection__Grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; padding: 20px; } .descriptionSection__Grid--item img { max-width: 90px; max-height: 90px; display: block; margin: 0 auto 10px auto; } .descriptionSection__Grid--item h3, .descriptionSection__Grid--item p { margin: 5px 0; text-align: center; } @media(max-width: 768px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 375px) { .descriptionSection__Grid { grid-template-columns: repeat(1, 1fr); } } .descriptionSection .Tooltip--first { bottom: 76% !important; left: 52% !important; transform: translateY(50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } .descriptionSection .Tooltip--second { bottom: 20% !important; left: 30% !important; transform: translateY(50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } .descriptionSection .Tooltip--third { bottom: 20% !important; left: 70% !important; transform: translateY(50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } @media (max-width: 1024px) { .descriptionSection .Tooltip--first { bottom: 72% !important; left: 50% !important; } .descriptionSection .Tooltip--second { bottom: 15% !important; left: 26% !important; } .descriptionSection .Tooltip--third { bottom: 12% !important; left: 64% !important; } } @media (max-width: 768px) { .descriptionSection .Tooltip--first { top: -15% !important; left: 48% !important; } .descriptionSection .Tooltip--second { top: 30% !important; left: 10% !important; } .descriptionSection .Tooltip--third { bottom: -10% !important; left: 40% !important; } }}.zestawy-oslony-rur-grzejnikow{.product-description{ background-color: #fff;}.descriptionSection { max-width: 1381px; margin: 0 auto; }.descriptionSection * { box-sizing: border-box; font-family: "Open Sans", sans-serif; } .descriptionSection { margin-bottom: 32px; }.descriptionSection__Grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; padding: 20px;}.descriptionSection__Grid--item img { max-width: 90px; max-height: 90px; display: block; margin: 0 auto 10px auto; }.descriptionSection__Grid--item h3, .descriptionSection__Grid--item p {margin: 5px 0;text-align: center;}.descriptionSection__Switcher { display: flex; flex-direction: column; padding: 80px; background-color: #F1F1F1;}.descriptionSection__Row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%;}.descriptionSection__RowsCenteredVertically { align-items: center; max-width: 800px;}.descriptionSectionCentered { flex-direction: column; text-align: center;}.descriptionSectionColorsAnimation { display: flex; gap: 80px; justify-content: center; padding: 80px; background-color: #F1F1F1;}.column50Colors{ max-width: 600px; display: flex; flex-direction: column;}.button-container { margin-top: 30px; display: block; max-width: 300px;}.button-container a { display: block; text-decoration: none; color: #fff; text-align: center; background-color: #e63b20; padding: 10px 20px; border-radius: 5px;}.button-container a:hover { background-color: #333;}.descriptionSection__Column20 { width: 20%;}.descriptionSection__Column40 { width: 40%; padding-right: 20px;}.descriptionSection__Column50 { width: 50%;}.descriptionSection__Column60 { width: 60%;}.descriptionSection__Column80 { width: 80%;}.descriptionSection__column--image { position: relative; } .descriptionSection__column--text .wrapper { max-width: 480px; margin: 0 auto; } .descriptionSection figure { margin: 0; width: 100%; aspect-ratio: 1 / 1; } .descriptionSection img { max-width: 100%; height: auto;} .descriptionSection h2 { font-size: 24px; line-height: 36px; margin-top: 16 px; margin-bottom: 16px; font-weight: 600; } .descriptionSection h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; margin-top: 0; font-weight: 600; } .descriptionSection p { font-size: 14px; line-height: 25px; color: #777777; } .descriptionSection .bigger-text { font-size: 18px; line-height: 28px; margin-bottom: 32px; } .descriptionSection__Switcher h3 {font-size: 1.5em;color: #0A0A0A;font-weight: bold;line-height: 1.2;margin: 0;}.descriptionSection__Switcher p {font-size: 1em;line-height: 1.6;color: #333;}.fullWidthImage {position: relative;background-color: #FFFFFF;text-align: center;padding: 30px;}.fullWidthImage img {width: 100%;height: auto;transition: opacity 0.5s ease;}.toggleSwitch {display: flex;justify-content: center;align-items: center;margin-top: 10px;font-size: 1em;}.toggleSwitch label {margin: 30px 10px;font-weight: bold;color: #333;}.toggleSwitch input[type="checkbox"] {width: 40px;height: 20px;appearance: none;background-color: #ccc;outline: none;cursor: pointer;border-radius: 10px;position: relative;transition: background-color 0.3s ease;}.toggleSwitch input[type="checkbox"]:checked {background-color: #e63b20; }.toggleSwitch input[type="checkbox"]::before {content: "";position: absolute;top: 2px;left: 2px;width: 16px;height: 16px;background-color: #FFF;border-radius: 50%;transition: transform 0.3s ease;}.toggleSwitch input[type="checkbox"]:checked::before {transform: translateX(20px);}.descriptionSection .Tooltip { position: absolute; bottom: 0; left: 0; width: 100%; max-width: 272px; z-index: 3; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 30%; bottom: 30%; } .descriptionSection .Tooltip--first .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 20% !important; bottom: 50% !important; } .descriptionSection .Tooltip--second .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; }.descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 50%; } .descriptionSection .Tooltip--third .Tooltip__text { margin-top: 16px; position: absolute; top: 30px; }.descriptionSection__greyBlocks { display: flex; gap: 20px; align-items: unset!important;}.greyBlockRow { display: flex; gap: 20px; padding-bottom: 40px; align-items: start;}.greyBlock{ display: flex; flex-direction: column; background-color: #F1F1F1; padding: 40px;}.Block50 { flex-basis: 50%;}.Block50 img{ max-width: 100px;}.greyBlock100 { flex-direction: row; align-items: center; padding: 0 10%;}.greyBlock100 img{ max-width: 90px;}.descriptionSection__BlocksSection { display: flex; flex-direction: column; gap: 20px;}.descriptionSection__acMeasures { display: flex; flex-direction: column;}.acMeasures { display: flex; flex-direction: row; align-items: flex-start;}.acMeasures img{ max-width: 50%;}@media(min-width: 1260px) { .descriptionSection .Tooltip--first { left: 30%; bottom: 10%; } .descriptionSection .Tooltip--first .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--second { left: 17%; top: 40%; } .descriptionSection .Tooltip--second .Tooltip__text { position: unset !important; } .descriptionSection .Tooltip--third { left: 17%; bottom: 20%; } .descriptionSection .Tooltip--third .Tooltip__text { position: unset !important; } } @media(max-width: 560px) { .descriptionSection .bigger-text { font-size: 12px; line-height: 16px; margin-bottom: 24px; } .descriptionSection .Tooltip--first { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 26% !important; } .descriptionSection .Tooltip--second { display: flex; flex-direction: column; align-items: center; left: 1%; bottom: 50% !important; } .descriptionSection .Tooltip--third { display: flex; flex-direction: column; align-items: center; left: 20%; bottom: 60%; } .descriptionSection__Switcher { padding: 40px; }} .descriptionSection .Tooltip .Tooltip__circle { cursor: pointer; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; background-color: rgba(0, 0, 0, 0.48); border-radius: 50%; position: relative; } .descriptionSection .Tooltip .Tooltip__circle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background-color: black; border: 1px solid white; } .descriptionSection .Tooltip .Tooltip__text { background-color: black; width: 100%; border-radius: 16px; padding: 24px; color: white !important; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .descriptionSection .Tooltip .Tooltip__text--active { opacity: 1; } .descriptionSection .Tooltip .Tooltip__text h3 { margin-bottom: 0; } .descriptionSection .Tooltip .Tooltip__text p { margin-top: 0; color: white; }@media(max-width: 768px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } .descriptionSection__Row { flex-direction: column; } .descriptionSection__Switcher { padding: 60px; } .descriptionSection__Column20 { width: 100%; } .descriptionSection__Column40 { width: 100%; } .descriptionSection__Column60 { width: 100%; } .descriptionSection__Column80 { width: 100%; } .descriptionSectionColorsAnimation { gap: 20px; padding: 20px; flex-direction: column; text-align: center; padding-bottom: 40px; align-items: center; } .column50Colors { align-items: center; } .greyBlockRow { flex-direction: column; } .greyBlock100 { flex-direction: column; padding: 0; align-items: unset; } .descriptionSection__greyBlocks { display: flex; flex-direction: column; } .acMeasures { display: flex; flex-direction: column; } .acMeasures img{ max-width: 100%;}}@media(max-width: 550px) { .descriptionSection__Switcher { padding: 60px 20px; } .toggleSwitch { font-size: 0.6em; }}@media(max-width: 375px) { .descriptionSection__Grid { grid-template-columns: repeat(2, 1fr); } .Tooltip__text h3{ font-size: 14px; } .Tooltip__text p{ font-size: 12px; } .descriptionSection__Grid--item h3 { font-size: 14px; }}@media(min-width: 768px) { .descriptionSection { margin-bottom: 48px; display: flex; justify-content: center; align-items: center; } .descriptionSection__column { flex-basis: 50%; } .descriptionSection__column--text { padding: 0 20px; } .descriptionSection--withBg { min-height: 820px; }}@media(min-width: 1260px) { .descriptionSection { margin-bottom: 64px; } .descriptionSection--withBg { padding: 112px; } }.popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); padding: 20px; z-index: 1000; width: 90%; max-width: 80%; max-height: 80%; overflow-y: auto;}.popup-content { display: flex; flex-direction: column;}.popup-content-patterns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}.popup-content-patterns img { width: 150px; height: 150px; object-fit: cover; border: 1px solid #ccc;}.close-btn { position: absolute; top: 10px; right: 10px; background-color: #ff0000; color: #fff; border: none; padding: 5px 10px; cursor: pointer; font-size: 16px; border-radius: 50%;}.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;}.popup::-webkit-scrollbar { width: 10px;}.popup::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px;}.popup::-webkit-scrollbar-thumb:hover { background-color: #555;} .slideshow-container { display: flex; width: 100%; max-width: 800px; overflow: hidden; position: relative; margin: auto;}.mySlides { display: flex!important; transition: transform 0.5s ease;}.mySlide { width: 160px; margin: 20px;}.mySlide img { width: 100%; max-width: 100%; height: auto;}.mySlide p { font-size: 12px;}.prev, .next { cursor: pointer; top: 50%; padding: 16px; margin-top: -22px; font-weight: bold; font-size: 18px; transition: 0.6s ease; user-select: none;}.mySlidesNavigation { display: flex; gap: 20px; justify-content: center;}.next { right: 0;}.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #f1f1f1; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}.dot--active, .dot:hover { background-color: #e63b20;}.mySlideFade { animation-name: fade; animation-duration: 1.5s;}@keyframes mySlideFade { from {opacity: .4} to {opacity: 1}}@media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px}}}