:root { --my-color: #1da6a1; --my-second: #09535c; --my-dark: #343434; --my-shadow: #f2f0f5; } @media (min-width: 1340px) { .container { max-width: 1280px; } } img { max-width: 100%; } a:hover { text-decoration: none; } body { font-family:"Lato", Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 26px; letter-spacing: 0.2px; color: #333333; } header.header { position: relative; width: 100%; transition: all .35s ease; height: 115px; } header.header + .section-standard { padding-top: 25px; } header.header .container { border-top: 5px var(--my-color) solid; } header.header .logo { margin: 10px 0 0 0; display: block; position: absolute; width: 16%; transition: all .35s ease; } .menu-call { display: none; } .header nav { position: relative; margin-left: 17%; } .header nav ul { list-style: none; margin: 0 0; padding: 0 0; text-align: right; } .header nav ul li { display: inline-block; flex: 100%; } .header nav ul li:not(.langs) a { display: block; text-align: center; font-weight: 500; text-transform: uppercase; padding: 42px 15px; font-size: 15px; color: var(--my-dark); transition: all .25s ease; } .header nav ul li:not(.langs) a.active, .header nav ul li:not(.langs):hover a { box-shadow: 0px 5px var(--my-second); color: var(--my-color); text-decoration: none; } .header nav ul li.langs a { color: var(--my-color); } .btn { background-color: var(--my-color); border-radius: 25px; padding: 15px 25px; color: #FFF; font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; display: inline-block; text-align: left; position: relative; } .btn:hover { background-color: var(--my-second); color: #FFF; } .btn i { position: absolute; right: 10px; top:15px; } .start-intro .btn { margin-top:50px; } .btn.btn-primary { background-color: var(--my-color); border-color: var(--my-color) } .btn.btn-primary:hover { background-color: #333; border-color: #333; } .btn.btn-secondary { background-color: var(--my-gray); border-color: var(--my-gray) } .btn.btn-secondary:hover { background-color: #333; border-color: #333; } .start-slider { height: 530px; opacity: 0; transition: opacity .5s ease; background-color: var(--my-second); } .start-slider.on { opacity: 1; } .start-slider:before { background: transparent url(../img/bgslider.png) no-repeat 50% 50%; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .start-slider .item { height: 530px; display: flex; align-items: center; justify-content: center; } .start-slider .item img { position: absolute; z-index: 10; opacity: .5; } .start-slider .item .text { position: relative; z-index: 20; max-width: 700px; color: #FFF; font-size: 24px; font-weight: 300; line-height: 34px; letter-spacing: -1px; text-transform: uppercase; transform: translate(0%, 20%); } .start-slider .item .text:before { content: ""; background-color: var(--my-color); width: 6px; height: 80px; position: absolute; top: 0px; left: -25px; display: block; } .start-slider .text h1, .start-slider .text h2 { margin: 15px 0 0; font-weight: 800; font-size: 54px; line-height: 60px; } .start-slider .owl-dots { text-align: center; position: relative; bottom: 50px; } .start-slider .owl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255,255,255,.5); margin:0 5px; transition: all .25s ease; } .start-slider .owl-dot.active { transform: scale(1.25); background-color: #FFF; } .center-flex { display: flex; align-items: center; } .tiles-wrap { padding: 45px 0; } .tiles-wrap.neutral { margin: 40px 0; } .tiles-wrap h2 { font-size: 42px; color: var(--my-color); font-weight: 600; text-transform: uppercase; margin: 0 0 15px; padding: 0 0 15px; } .tiles-wrap.neutral h2 { color: var(--my-gray); } .tiles-wrap h2:after { left: 50%; bottom: 25px; background-color: var(--my-color); margin-left: -50px; width: 100px; height: 5px; content: ""; display: block; position: absolute; } .tiles-wrap.neutral h2:after { display: none; } .tiles.flex { display: flex; } .tiles-wrap .green { max-width: 90%; margin: 0 auto; } .tiles-wrap .green .box { text-align: center; flex: 1; padding: 20px 15px 0; } .tiles-wrap .green .box .img { width: 125px; height: 125px; padding: 15px; border-radius: 50%; border: 2px var(--my-color) solid; display: flex; align-items: center; justify-content: center; margin:0 auto; } .tiles-wrap .green .box img { object-fit: contain; } .tiles-wrap .green .box .text { font-weight: 500; padding: 10px 20px; } .tiles-wrap.neutral .tiles.flex { display: block; text-align: center; width: 100%; } .tiles-wrap.neutral .tiles.flex .text { font-family: "Barlow Condensed"; text-transform: uppercase; font-size: 20px; } .tiles-wrap.neutral .box { display: inline-block; vertical-align: top; min-width: 200px; } .tiles-wrap.neutral .img { background-color: #FFF; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 70px; margin:0 auto 20px; } .section-with-picture { padding: 35px 0; position: relative; min-height: 500px; } .section-with-picture.incont { min-height: 300px; padding: 0 0; } .section-with-picture .row.flex { min-height: 500px; } .section-with-picture.incont .row.flex { min-height: 300px; } .section-with-picture img { } .section-with-picture .right-img { position: absolute; width: calc(50% - 15px); height: 100%; object-fit: cover; top: 0; right: 15px; } .section-with-picture .left-img { position: absolute; width: calc( 50% - 15px ); height: 100%; object-fit: cover; top: 0; left: 15px; } .section-with-picture .padding { padding: 25px 45px 25px 50px;; } .section-with-picture .typical-content { } .typical-content a:not(.btn) { color: var(--my-color); } .typical-content a:not(.btn):hover { color: var(--my-second); } .section-with-picture h2, .section-with-picture h3 { font-size: 42px; color: var(--my-color); font-weight: 600; text-transform: uppercase; margin: 0 0 25px; padding: 0 0 15px; position: relative; } .section-with-picture h2:after, .section-with-picture h3:after { left: 0; bottom: 0px; background-color: var(--my-color); width: 80px; height: 4px; content: ""; display: block; position: absolute; } .section-with-picture .picture img { box-shadow: 25px 25px var(--my-shadow); width: 100%; height: 100%; object-fit: cover; } .section-with-picture.incont .picture img { box-shadow: 0 0; } .section-banner { margin: 25px 0; padding: 25px 0; } .section-banner > div { position: relative; display: flex; min-height: 200px; align-items: center; width: calc(100% - 30px); } .section-banner.green .container { background-color: #1da6a1; } @media (min-width: 1200px) { .section-banner .container { width: 1110px; } } @media (min-width: 1340px) { .section-banner .container { width: 1250px; } } .section-banner > div .picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .section-banner.green .container .picture { opacity: .25; filter: grayscale(1); } .section-banner .text { position: relative; z-index: 10; padding: 50px; color: #FFF; max-width: 800px; margin:0 auto; } .section-banner .text h2 { font-size: 80px; text-transform: uppercase; letter-spacing: -3px; font-weight: 800; } .owl-carousel.no-resize .owl-item img { max-width: 200px; height: 100px; object-fit: contain; display: block; margin: 0 auto; width: 100%; } .carousel-gallery .text { font-size: 14px; padding: 10px 20px; line-height: 20px; text-align: center; margin-top: 5px; font-weight: 500; } .section-map { margin-top: 30px; } .gallery { margin: 20px auto 30px; font-size: 20px; line-height: 28px; } .schemat { width: 500px; margin: 0 auto; height: 500px; padding: 25px; font-family: "Barlow Condensed"; position: relative; display: flex; align-items: center; justify-content: center; } .schemat .title { color: var(--my-color); font-size: 52px; padding: 0 90px; font-weight: 600; line-height: 40px; text-align: center; } .schemat:before { content: ""; display: block; width: calc(100% - 100px); height: calc(100% - 100px); top: 50px; left: 50px; border: 3px var(--my-color) solid; border-radius: 50%; position: absolute; } .schemat .circles { position: absolute; width: 100%; height: 100%; } .schemat .circles a { position: absolute; width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px var(--my-color) solid; font-family: "Barlow Condensed"; text-align: center; background-color: #FFF; color: var(--my-color); transition: all .25s ease; font-size: 18px; line-height: 22px; font-weight: 600; } .schemat .circles a:hover, .schemat .circles a:focus, .schemat .circles a.active { background-color: var(--my-color); color: #FFF; } .schemat .circles a:nth-of-type(1) { top: 20%; left: 25px; } .schemat .circles a:nth-of-type(2) { top: 60%; left: 25px; } .schemat .circles a:nth-of-type(3) { top: 60%; right: 25px; } .schemat .circles a:nth-of-type(4) { top: 20%; right: 25px; } .schemat .circles a:nth-of-type(5) { top: 0%; left: calc(50% - 50px); } .schemat .circles a:nth-of-type(6) { bottom: 0%; left: calc(50% - 50px); } @media (max-width: 900px) { .schemat { width: 100%; height: calc(100vw - 30px); } .schemat .title { font-size: 16px; padding: 0 60px; line-height: 22px; margin: 0 0; } .schemat .circles a { font-size: 12px; width: 70px; height: 70px; line-height: 15px; } .schemat .circles a:nth-of-type(5) { top: 0%; left: calc(50% - 35px); } .schemat .circles a:nth-of-type(6) { bottom: 0%; left: calc(50% - 35px); } } .section-with-picture + footer.footer { margin-top: 25px; } footer { padding: 50px 0; background-color: #454545; color: #7b7b7b; } footer h5 { font-size: 14px; line-height: 26px; letter-spacing: .4px; font-weight: 400; text-transform: uppercase; } footer h6 { font-size: 18px; font-weight: 500; color: #FFF; } footer .columns a { color: #FFF; transition: all .25s ease; } footer .columns .col a:before { font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-size: 16px; font-variant: normal; text-rendering: auto; line-height: 1; font-weight: 900; width: 26px; opacity: .2; } footer .columns > .col div a { font-size: 14px; font-weight: 400; } footer .columns > .col div a.mail:before { content: '\f658'; } footer .columns > .col div a { display: inline-block; margin-top: 6px; font-size: 18px; font-weight: 500; } footer .columns > .col div a.phone:before { content: '\f3cd'; } footer .columns a:hover { color: #7b7b7b; } footer img { filter: contrast(0) grayscale(1) brightness(2); max-width: 150px; margin-right: 25px; } footer .inner { max-width: 70%; margin: 40px auto 0px; text-align: center; padding: 20px 0; border-top: 1px #656565 solid; } footer nav { text-align: center; } footer nav a { text-transform: uppercase; font-size: 12px; font-weight: 400; color: #7b7b7b; } footer nav a:not(:last-of-type):after { content:"•"; display: inline-block; margin: 0 5px; } footer nav a:hover { color: #FFF; text-decoration: none; } footer em { font-style: normal; font-size: 12px; color: #999; } .subfooter a.icon { font-size: 24px; margin-left: 10px; } .subfooter { background-color: #333; color: #7b7b7b; padding: 15px; font-size: 12px; text-transform: uppercase; } .subfooter div.row > div:last-of-type { text-align: right; } .subfooter a { color: #FFF; } .created { padding: 25px; text-align: center; } .created a { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: .35; color: #000; } .created a:hover { opacity: .8 } a.mail-icon:before, a.phone-icon:before { font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-size: 16px; font-variant: normal; text-rendering: auto; line-height: 1; font-weight: 900; width: 26px; opacity: 1; color: var(--my-dark); margin-right: 5px; } a.mail-icon:before { content: '\f658'; } a.mail-icon, a.phone-icon { display: inline-block; margin-top: 6px; font-size: 18px; font-weight: 500; } a.phone-icon:before { content: '\f3cd'; } .my-tabs { display: flex; width: 100%; align-items: center; justify-content: space-between; margin: 20px auto 0px; border-bottom: 1px var(--my-color) solid; } .my-tabs a { display: block; padding: 10px; color: var(--my-color); } .my-tabs a.active { background-color: var(--my-color); color: #FFFFFF; } .my-tabs-content { /* background-color: #f2f2f2; */ padding: 35px; border-left: 1px var(--my-color) solid; border-right: 1px var(--my-color) solid; border-bottom: 1px var(--my-color) solid; } .my-tabs-content .content { display: none; } .my-tabs-content .content.active { display: block; } .icons-gallery { display: flex; flex-wrap: wrap; font-family: "Barlow Condensed"; font-weight: 300; align-items: center; justify-content: center; } .icons-gallery.left { justify-content: flex-start; margin-top: 15px; } .icons-gallery .icon { flex: 0 0 calc(100% / 7); text-align: center; letter-spacing: -.5px; text-transform: uppercase; margin-bottom: 25px; padding: 10px; height: 205px; transition: all .15s ease; } .icons-gallery .icon.bigger { flex: 0 0 33%; height: 175px; margin-bottom: 10px; } .icons-gallery .icon img { width: 100px; max-width: 90%; display: block; margin: 10px auto 20px; transition: all .15s ease; } .icons-gallery .icon.bigger img { width: 80px; margin: 5px auto 10px; } .icons-gallery .icon:hover { background-color: #1da6a1; color: #FFFFFF; } .icons-gallery .icon:hover img { filter: invert(1) grayscale(1) brightness(3); } .icons-gallery .icon.bigger span { font-size: 14px; line-height: 20px; display: block; } .contact-form { background: #f2f2f2; } .section-standard h4 em { font-style: normal; font-size: 14px; margin: 2px 0 2px; display: block; } body.pg-8 h4 { font-weight: 500; } div#formularz-kontaktowy { margin: 20px auto; max-width: 800px; } div#formularz-kontaktowy .h1 { font-size: 28px; margin: 0 0 20px; } div#cookieinfo { font-size: 11px; background-color: #f2f2f2; position: fixed; bottom: 50px; padding: 15px; max-width: 270px; line-height: 15px; } div#cookieinfo a:last-of-type { display: inline-block; background-color: var(--my-color); color: #FFF; padding: 5px 12px; border-radius: 5px; } @media (min-width:900px) { .btns2 { display: flex; align-items: center; justify-content: space-between; } .btns2 a { flex:0 0 49%; width: 49%; text-align: center; } }