Files
ostal.pl/wp-content/themes/ostal_WP/sass/main.css
2026-01-22 14:11:03 +01:00

2337 lines
53 KiB
CSS

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus, *:focus-visible {
outline: none !important;
}
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
/* 62.5% of 16px browser font size is 10px */
font-size: 62.5%;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
div:focus, div:focus-visible {
outline: none !important;
}
.heading {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
}
.heading--xl {
font-size: 3.8rem;
line-height: 110%;
}
@media only screen and (min-width: 768px) {
.heading--xl {
font-size: 4.8rem;
}
}
@media only screen and (min-width: 1366px) {
.heading--xl {
font-size: 4.8rem;
margin-bottom: 20px;
}
}
.heading--lg {
font-size: 3.2rem;
line-height: 110%;
}
@media only screen and (min-width: 1366px) {
.heading--lg {
font-size: 3.2rem;
}
}
.heading--md {
font-size: 24px;
line-height: 150%;
margin-bottom: 20px;
}
@media only screen and (min-width: 1366px) {
.heading--md {
font-size: 2.4rem;
}
}
.heading--sm {
font-size: 1.8rem;
line-height: 150%;
letter-spacing: 4%;
margin-bottom: 8px;
}
@media only screen and (min-width: 1366px) {
.heading--sm {
font-size: 1.8rem;
}
}
body {
background-color: #fff;
font-family: "Space Grotesk", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
}
h1 {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 3.8rem;
line-height: 110%;
}
@media only screen and (min-width: 768px) {
h1 {
font-size: 4.8rem;
}
}
@media only screen and (min-width: 1366px) {
h1 {
font-size: 4.8rem;
margin-bottom: 20px;
}
}
h2 {
font-family: "Space Grotesk", sans-serif;
font-size: 2.4rem;
line-height: 150%;
margin-bottom: 20px;
}
h3 {
font-family: "Space Grotesk", sans-serif;
font-size: 1.8rem;
line-height: 150%;
letter-spacing: 4%;
margin-bottom: 8px;
}
@media only screen and (min-width: 1366px) {
h3 {
font-size: 1.8rem;
}
}
p {
font-weight: 400;
font-size: 1.8rem;
line-height: 150%;
letter-spacing: 4%;
margin-bottom: 26px;
}
@media only screen and (min-width: 768px) {
p {
margin-bottom: 40px;
}
}
a {
transition: all;
color: #121E23;
}
a:hover {
color: #88B14B;
}
.wrapper--inner {
padding: 0 2rem;
margin: 0 auto;
}
@media only screen and (min-width: 768px) {
.wrapper--inner {
padding: 0 4rem;
max-width: inherit;
}
}
@media only screen and (min-width: 1366px) {
.wrapper--inner {
padding: 0 0;
max-width: 1200px;
}
}
.wrapper--default {
padding: 30px 0;
}
@media only screen and (min-width: 768px) {
.wrapper--default {
padding: 40px 0;
}
}
@media only screen and (min-width: 1366px) {
.wrapper--default {
padding: 50px 0;
}
}
.text-accent {
color: #88B14B;
}
.text-accent--lighten {
color: rgb(183.1904761905, 208.5714285714, 145.4285714286);
}
.text-accent--darken {
color: rgb(80.9523809524, 105.3571428571, 44.6428571429);
}
.text-black {
color: #121E23;
}
.text-black--lighten {
color: rgb(52.641509434, 87.7358490566, 102.358490566);
}
.text-black--darken {
color: black;
}
.text-white {
color: #fff;
}
.text-white--lighten {
color: white;
}
.text-white--darken {
color: #cccccc;
}
.top-margin-minus {
margin-top: -46px;
}
.top-margin-minus .wrapper {
padding-top: 46px;
}
.img-auto {
width: 100%;
height: auto;
}
/* Lightbox */
.lightbox {
opacity: 0;
visibility: hidden;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease-in;
}
.lightbox.show {
background-color: rgba(0, 0, 0, 0.85);
opacity: 1;
visibility: visible;
z-index: 1000;
}
.lightbox img {
max-width: 90%;
}
/* Close lightbox "x" icon */
.lightbox .close-lightbox {
cursor: pointer;
position: absolute;
top: 30px;
right: 50px;
width: 20px;
height: 20px;
}
.lightbox .close-lightbox::after,
.lightbox .close-lightbox::before {
content: "";
width: 3px;
height: 20px;
background-color: #ddd;
position: absolute;
border-radius: 5px;
transform: rotate(45deg);
}
.lightbox .close-lightbox::before {
transform: rotate(-45deg);
}
.lightbox .close-lightbox:hover::after,
.lightbox .close-lightbox:hover::before {
background-color: #fff;
}
.header {
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header .header-logo {
width: 125px;
height: 27px;
}
#main-nav {
overflow: hidden;
}
#main-nav nav #navbar-btn {
cursor: pointer;
height: 27px;
width: 27px;
border: 0px;
overflow: visible;
position: relative;
z-index: 9999;
background-color: transparent;
}
#main-nav nav #navbar-btn span,
#main-nav nav #navbar-btn span:before,
#main-nav nav #navbar-btn span:after {
background: #88B14B;
display: block;
height: 4px;
opacity: 1;
position: absolute;
transition: 0.3s ease-in-out;
}
#main-nav nav #navbar-btn span:before,
#main-nav nav #navbar-btn span:after {
content: "";
}
#main-nav nav #navbar-btn span {
right: 0px;
top: 13px;
width: 27px;
}
#main-nav nav #navbar-btn span:before {
left: 0px;
top: -10px;
width: 16px;
}
#main-nav nav #navbar-btn span:after {
left: 0px;
top: 10px;
width: 20px;
}
@media only screen and (min-width: 1366px) {
#main-nav nav #navbar-btn {
display: none;
}
}
#main-nav nav .main-menu {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
left: -100%;
top: 0;
transition: all 0.5s ease-in-out;
list-style: none;
z-index: 999;
gap: 20px;
margin-bottom: 0 !important;
}
@media only screen and (min-width: 1366px) {
#main-nav nav .main-menu {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
position: relative;
left: inherit;
top: inherit;
gap: 33px;
}
}
#main-nav nav .main-menu .menu-item {
font-size: 1.6rem;
margin-left: 0 !important;
}
#main-nav nav .main-menu.active {
top: 0;
left: 0;
z-index: 999;
background-color: #121E23;
color: #fff;
text-align: center;
transition: all 0.5s ease-in-out;
}
#main-nav nav .main-menu.active .menu-item a {
color: #fff !important;
}
footer .background-image {
position: relative;
height: 232px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
footer .background-image .bg-filter {
position: absolute;
background-color: #121E23;
opacity: 97%;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.4;
}
footer .footer-row {
padding: 70px 0;
}
footer .footer-row .logo {
width: 232px;
height: 50px;
margin-bottom: 50px;
}
footer .footer-row .footer-grid {
display: grid;
gap: 20px;
}
@media only screen and (min-width: 768px) {
footer .footer-row .footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 1366px) {
footer .footer-row .footer-grid {
grid-template-columns: repeat(4, 1fr);
}
}
footer .footer-row .footer-grid .footer-menu {
list-style: none;
padding-left: 0;
}
footer .footer-row .footer-grid .footer-menu .menu-item a {
font-size: 1.8rem;
line-height: 150%;
}
footer .footer-copyright {
background-color: #fff;
padding: 22px 0;
}
footer .footer-copyright-grid {
display: flex;
justify-content: space-between;
font-size: 1.2rem;
list-style: none;
color: #121E23;
}
@media only screen and (min-width: 768px) {
footer .footer-copyright-grid {
font-size: 1.6rem;
}
}
footer .footer-copyright-grid li {
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
footer .footer-copyright-grid li {
font-size: 1.6rem;
}
}
footer .footer-copyright-grid a {
color: #121E23;
}
footer .footer-copyright-grid a:hover {
color: #88B14B;
}
.wp-block-button__link, .wp-block-button a, .btn-secondary, a.btn-secondary, .btn-primary, a.btn-primary {
font-family: "Space Grotesk", sans-serif;
font-weight: 400;
display: block;
padding: 15px 68px;
border-radius: 7px;
font-size: 1.6rem;
text-transform: uppercase;
max-width: -moz-fit-content;
max-width: fit-content;
}
@media only screen and (min-width: 1366px) {
.wp-block-button__link, .wp-block-button a, .btn-secondary, a.btn-secondary, .btn-primary, a.btn-primary {
padding: 15px 68px;
font-size: 1.6rem;
}
}
.btn-primary, a.btn-primary {
background-color: #88B14B;
color: #fff !important;
border: 2px solid #88B14B;
transition: all 0.3s ease;
}
.btn-primary:hover, a.btn-primary:hover {
background-color: rgb(113.980952381, 148.3428571429, 62.8571428571);
border: 2px solid rgb(113.980952381, 148.3428571429, 62.8571428571);
}
.btn-secondary, a.btn-secondary {
background-color: #121E23;
color: #88B14B;
border: 2px solid #fff;
transition: all 0.3s ease;
}
.btn-secondary:hover, a.btn-secondary:hover {
background-color: rgb(4.1433962264, 6.9056603774, 8.0566037736);
border: 2px solid #88B14B;
}
.wp-block-button__link, .wp-block-button a {
background-color: #88B14B !important;
color: #fff !important;
border: 2px solid #88B14B !important;
}
.btn-link, a.btn-link {
font-size: 1.6rem;
color: #121E23;
text-decoration: underline;
}
.wpcf7 .wpcf7-form h2 {
font-family: "Space Grotesk", sans-serif;
font-size: 2.4rem;
line-height: 150%;
margin-bottom: 20px;
color: #fff;
}
.wpcf7 .wpcf7-form label {
display: block;
font-size: 1.8rem;
line-height: 150%;
color: #fff;
}
.wpcf7 .wpcf7-form label .wpcf7-form-control-wrap {
display: block;
height: 40px;
margin: 5px 0px 10px;
}
.wpcf7 .wpcf7-form label .wpcf7-form-control-wrap input, .wpcf7 .wpcf7-form label .wpcf7-form-control-wrap textarea {
width: 100%;
background-color: transparent;
color: #fff;
font-size: 1.4rem;
padding: 5px 15px;
border: 1px solid #fff;
border-radius: 7px;
}
.wpcf7 .wpcf7-form label .wpcf7-form-control-wrap input:focus, .wpcf7 .wpcf7-form label .wpcf7-form-control-wrap textarea:focus {
border: 1px solid #88B14B;
}
.wpcf7 .wpcf7-form label .wpcf7-form-control-wrap textarea {
max-height: 82px;
}
.wpcf7 .wpcf7-form label .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
font-size: 1rem;
}
.wpcf7 .wpcf7-form label .wpcf7-form-control-wrap[data-name=your-message] {
height: 80px;
}
.wpcf7 .wpcf7-form label .wpcf7-form-control-wrap[data-name=your-message] textarea {
height: 82px;
}
.wpcf7 .wpcf7-form label.terms-and-conditions {
display: flex;
font-size: 1.2rem;
margin-bottom: 10px;
}
.wpcf7 .wpcf7-form label.terms-and-conditions .wpcf7-form-control-wrap {
display: block;
margin: 0;
}
.wpcf7 .wpcf7-form label.terms-and-conditions .wpcf7-form-control-wrap .wpcf7-list-item {
margin-left: 0;
}
.wpcf7 .wpcf7-form label.terms-and-conditions span {
display: block;
}
.wpcf7 .wpcf7-form label.terms-and-conditions input[type=checkbox] {
width: 20px;
height: 20px;
margin: 0 10px 0 0;
background-color: #121E23 !important;
background: transparent;
border: none !important;
border-radius: 20px;
box-shadow: 0 0 0 1px #fff inset;
outline-color: transparent;
}
.wpcf7 .wpcf7-form label.terms-and-conditions input[type=checkbox]:checked {
background-color: #88B14B !important;
border: 1px solid #88B14B !important;
accent-color: #88B14B !important;
}
.wpcf7 .wpcf7-form label.terms-and-conditions a {
color: #fff;
transition: color 0.3s ease;
}
.wpcf7 .wpcf7-form label.terms-and-conditions a:hover {
color: #88B14B;
}
.wpcf7 .wpcf7-form .wpcf7-response-output {
border: 1px solid #88B14B !important;
border-radius: 7px;
color: #fff;
padding: 2px;
margin: 4px 0;
}
ul {
list-style: inherit;
padding-left: 20px;
}
ul li {
line-height: 1.5;
font-size: 1.6rem;
}
.hero-slider {
height: 90vh;
width: 100%;
}
@media only screen and (max-height: 667px) {
.hero-slider {
height: 100%;
}
}
@media only screen and (min-width: 1366px) {
.hero-slider {
height: inherit;
width: inherit;
}
}
.hero-slider .swiper-wrapper {
position: relative;
overflow: hidden;
}
.hero-slider .swiper-slide {
height: 100%;
width: 100% !important;
opacity: 0 !important;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 20px;
padding-bottom: 90px;
background-repeat: no-repeat;
background-size: cover !important;
background-position: center;
}
@media only screen and (min-width: 1366px) {
.hero-slider .swiper-slide {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
min-height: 780px;
padding: 102px;
width: 100%;
}
}
.hero-slider .swiper-slide .hero-slider-heading {
z-index: 99;
}
@media only screen and (min-width: 768px) {
.hero-slider .swiper-slide .hero-slider-heading {
max-width: 70%;
align-self: flex-end;
}
}
@media only screen and (min-width: 1366px) {
.hero-slider .swiper-slide .hero-slider-heading {
max-width: inherit;
flex: 0 0 50%;
}
}
.hero-slider .swiper-slide .hero-slider-content {
z-index: 99;
padding: 20px;
}
@media only screen and (min-width: 768px) {
.hero-slider .swiper-slide .hero-slider-content {
max-width: 70%;
align-self: flex-end;
}
}
@media only screen and (min-width: 1366px) {
.hero-slider .swiper-slide .hero-slider-content {
max-width: inherit;
align-self: inherit;
flex: 0 0 50%;
padding: 50px 28px 64px 42px;
}
}
.hero-slider .swiper-slide-active {
opacity: 1 !important;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.hero-slider .swiper-slide .bg-filter {
position: absolute;
background-color: #121E23;
opacity: 97%;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(119deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
}
.hero-slider .swiper-nav {
width: 110px;
height: 50px;
position: absolute;
display: flex;
align-items: initial;
gap: 10px;
bottom: 20px;
right: 65px;
}
@media only screen and (min-width: 768px) {
.hero-slider .swiper-nav {
right: 100px;
}
}
@media only screen and (min-width: 1366px) {
.hero-slider .swiper-nav {
right: 102px;
bottom: 42px;
}
}
.hero-slider .swiper-nav .swiper-button {
display: block;
background-color: #121E23;
height: 50px;
width: 50px;
padding: 12px;
content: url("./images/arrow-right.png");
position: relative;
}
.hero-slider .swiper-nav .swiper-button-prev {
transform: rotate(180deg);
left: 0;
}
.hero-slider .swiper-nav .swiper-button-next {
right: 0;
}
.box {
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
background-color: #000000;
}
.box--dark {
background-color: #121E23;
}
.two-cols {
padding: 45px 0;
}
@media only screen and (min-width: 768px) {
.two-cols {
padding: 153px 0;
}
}
@media only screen and (min-width: 768px) {
.two-cols .wrapper {
display: flex;
justify-content: space-between;
gap: 20px;
}
}
@media only screen and (min-width: 768px) {
.two-cols .wrapper .col {
flex: 0 0 50%;
}
}
.two-cols .wrapper .col-text {
margin-bottom: 50px;
}
@media only screen and (min-width: 1366px) {
.two-cols .wrapper .col-text {
padding: 0 35px 0;
}
}
.two-cols .wrapper .col-image .image-wrapper {
position: relative;
}
.two-cols .wrapper .col-image .image-wrapper::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 100%;
display: block;
top: -12px;
left: -12px;
z-index: 9;
}
.two-cols .wrapper .col-image img {
position: relative;
z-index: 990;
}
.two-cols .wrapper.imageLeft {
flex-flow: row-reverse;
}
.two-cols .wrapper.imageLeft .image-wrapper::before {
clip-path: polygon(0% 0%, 97% 0, 100% 4%, 100% 100%, 0% 100%);
top: -12px;
left: inherit;
right: -12px;
}
.two-cols .wrapper.imageRight {
flex-flow: row;
}
.two-cols .wrapper.imageRight .image-wrapper::before {
clip-path: polygon(0% 4%, 4% 0%, 100% 0%, 100% 4%, 100% 100%, 0% 100%, 0% 4%);
top: -12px;
left: -12px;
}
.two-cols.bg-light .wrapper .image-wrapper::before {
background-color: #121E23;
}
.two-cols.bg-dark .wrapper .image-wrapper::before {
background-color: #88B14B;
}
.two-cols-with-bg {
position: relative;
background-repeat: no-repeat;
background-size: cover;
padding: 83px 0;
}
@media only screen and (min-width: 768px) {
.two-cols-with-bg {
padding: 153px 0;
}
}
.two-cols-with-bg .bg-filter {
position: absolute;
background-color: #121E23;
opacity: 97%;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.two-cols-with-bg .wrapper {
position: relative;
z-index: 99;
}
@media only screen and (min-width: 768px) {
.two-cols-with-bg .wrapper {
display: flex;
justify-content: space-between;
gap: 20px;
}
}
@media only screen and (min-width: 768px) {
.two-cols-with-bg .wrapper .col {
flex: 0 0 50%;
}
}
@media only screen and (min-width: 1366px) {
.two-cols-with-bg .wrapper .col-text {
padding: 0 35px 0;
}
}
.imageLeft {
flex-flow: row;
}
.imageRight {
flex-flow: row-reverse;
}
@media only screen and (min-width: 768px) {
.one-col-cta .wrapper {
clip-path: polygon(0% 10%, 3% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
}
}
@media only screen and (min-width: 1366px) {
.one-col-cta .wrapper {
clip-path: polygon(0% 10%, 2% 0%, 100% 0%, 100% 2%, 100% 100%, 0% 100%, 0% 12%);
}
}
.one-col-cta.align-left {
padding: 0px 0px;
}
@media only screen and (min-width: 768px) {
.one-col-cta.align-left {
padding: 80px 50px;
}
}
@media only screen and (min-width: 1366px) {
.one-col-cta.align-left {
padding: 180px 0;
}
}
.one-col-cta.align-left .wrapper {
padding: 50px 35px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta.align-left .wrapper {
grid-column: 1/span 9;
}
}
.one-col-cta.align-left .wrapper .heading {
font-family: "Space Grotesk", sans-serif;
font-size: 2.4rem;
line-height: 150%;
margin-bottom: 20px;
}
.one-col-cta.align-left .wrapper .text {
padding-right: 100px;
margin-bottom: 10px;
}
.one-col-cta.align-left .wrapper .cta {
margin-bottom: 30px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta.align-left .wrapper .cta {
margin-bottom: 0px;
}
}
.one-col-cta.align-left .wrapper .cta .btn {
margin-left: auto;
}
.one-col-cta.align-center {
padding: 40px 0;
}
.one-col-cta.align-center .wrapper {
padding: 26px 20px 20px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta.align-center .wrapper {
padding: 50px 90px 9px;
grid-column: 2/12;
}
}
.one-col-cta.align-center .wrapper .heading {
font-family: "Space Grotesk", sans-serif;
font-size: 2.4rem;
line-height: 150%;
margin-bottom: 20px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.one-col-cta.align-center .wrapper .heading {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 3.8rem;
line-height: 110%;
}
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
.one-col-cta.align-center .wrapper .heading {
font-size: 4.8rem;
}
}
@media only screen and (min-width: 768px) and (min-width: 1366px) {
.one-col-cta.align-center .wrapper .heading {
font-size: 4.8rem;
margin-bottom: 20px;
}
}
.one-col-cta.align-center .wrapper .text {
text-align: center;
}
.one-col-cta.align-center .wrapper .cta {
margin-bottom: 30px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta.align-center .wrapper .cta {
margin-bottom: 40px;
}
}
.one-col-cta.align-center .wrapper .cta .btn {
margin: 0 auto;
}
.one-col-cta.bg-dark {
background-color: #121E23;
}
.one-col-cta-images {
display: grid;
gap: 20px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta-images {
grid-template-columns: repeat(12, 82px);
}
}
@media only screen and (min-width: 768px) {
.one-col-cta-images .wrapper {
clip-path: polygon(0% 2%, 2% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
}
}
@media only screen and (min-width: 1366px) {
.one-col-cta-images .wrapper {
clip-path: polygon(0% 2%, 2% 0%, 100% 0%, 100% 10%, 100% 100%, 0% 100%, 0% 3%);
}
}
.one-col-cta-images.align-left {
padding: 0px 0px;
}
@media only screen and (min-width: 768px) {
.one-col-cta-images.align-left {
padding: 80px 50px;
}
}
@media only screen and (min-width: 1366px) {
.one-col-cta-images.align-left {
padding: 145px 0;
}
}
.one-col-cta-images.align-left .wrapper {
padding: 50px 35px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta-images.align-left .wrapper {
grid-column: 1/span 12;
}
}
.one-col-cta-images.align-left .wrapper .heading {
font-family: "Space Grotesk", sans-serif;
font-size: 2.4rem;
line-height: 150%;
margin-bottom: 20px;
}
.one-col-cta-images.align-left .wrapper .text {
margin-bottom: 10px;
}
.one-col-cta-images.align-left .wrapper .cta {
margin-bottom: 30px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta-images.align-left .wrapper .cta {
margin-bottom: 40px;
}
}
.one-col-cta-images.align-left .wrapper .cta .btn {
margin-left: auto;
}
.one-col-cta-images.align-left .wrapper .gallery {
display: grid;
grid-template-columns: 205px;
grid-template-rows: repeat(auto, minmax(205px, 205px));
justify-content: center;
gap: 20px;
margin-bottom: 40px;
margin-top: 30px;
}
@media only screen and (min-width: 768px) {
.one-col-cta-images.align-left .wrapper .gallery {
grid-template-columns: repeat(auto-fit, 205px);
}
}
@media only screen and (min-width: 1366px) {
.one-col-cta-images.align-left .wrapper .gallery {
grid-template-columns: repeat(4, 245px);
}
}
.one-col-cta-images.align-left .wrapper .gallery-image {
overflow: hidden;
}
.one-col-cta-images.align-left .wrapper .gallery-image:nth-child(2n) {
display: none;
}
@media only screen and (min-width: 768px) {
.one-col-cta-images.align-left .wrapper .gallery-image:nth-child(2n) {
display: block;
}
}
.one-col-cta-images.align-left .wrapper .gallery-image img {
display: block;
-o-object-fit: cover;
object-fit: cover;
}
.one-col-cta-images.align-center {
padding: 40px 0;
}
.one-col-cta-images.align-center .wrapper {
padding: 26px 20px 0px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta-images.align-center .wrapper {
padding: 50px 90px 9px;
grid-column: 2/12;
}
}
.one-col-cta-images.align-center .wrapper .heading {
font-family: "Space Grotesk", sans-serif;
font-size: 2.4rem;
line-height: 150%;
margin-bottom: 20px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.one-col-cta-images.align-center .wrapper .heading {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 3.8rem;
line-height: 110%;
}
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
.one-col-cta-images.align-center .wrapper .heading {
font-size: 4.8rem;
}
}
@media only screen and (min-width: 768px) and (min-width: 1366px) {
.one-col-cta-images.align-center .wrapper .heading {
font-size: 4.8rem;
margin-bottom: 20px;
}
}
.one-col-cta-images.align-center .wrapper .text {
text-align: center;
}
.one-col-cta-images.align-center .wrapper .cta {
margin-bottom: 30px;
}
@media only screen and (min-width: 1366px) {
.one-col-cta-images.align-center .wrapper .cta {
margin-bottom: 40px;
}
}
.one-col-cta-images.align-center .wrapper .cta .btn {
margin: 0 auto;
}
.section-boxes-repeater {
position: relative;
background-repeat: no-repeat;
background-size: cover;
}
.section-boxes-repeater .bg-filter {
position: absolute;
background-color: #121E23;
opacity: 97%;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.section-boxes-repeater .wrapper {
position: relative;
padding-top: 46px;
padding-bottom: 46px;
z-index: 99;
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater .wrapper {
padding: 146px 0;
}
}
.section-boxes-repeater .wrapper .section-heading {
max-width: 520px;
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater .wrapper .section-heading {
margin-left: 32px;
}
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater .wrapper .section-description {
max-width: 60%;
margin-left: 32px;
}
}
.section-boxes-repeater .wrapper .boxes {
display: grid;
justify-content: center;
gap: 20px;
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater .wrapper .boxes {
padding: 14px 50px 0;
grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
}
}
.section-boxes-repeater .wrapper .boxes .box-single {
background-color: #F7F5F5;
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
padding: 30px 22px 15px;
}
@media only screen and (min-width: 768px) {
.section-boxes-repeater .wrapper .boxes .box-single {
clip-path: polygon(0% 12%, 2% 0%, 100% 0%, 100% 2%, 100% 100%, 0% 100%, 0% 12%);
}
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater .wrapper .boxes .box-single {
padding: 40px 22px 30px;
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
}
}
.section-boxes-repeater .wrapper .boxes .box-single .box-image {
max-width: 40px;
max-height: 40px;
aspect-ratio: 1/1;
margin-bottom: 22px;
}
.section-boxes-repeater .wrapper .boxes .box-single .box-content {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100%;
}
.section-boxes-repeater .wrapper .boxes .box-single .box-content .cta {
align-self: end;
text-align: end;
}
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards {
display: flex;
flex-direction: column;
position: relative;
gap: 20px;
counter-reset: box-counter;
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards {
flex-direction: row;
padding: 14px 0 0;
}
}
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single {
clip-path: inherit;
padding: inherit;
background-color: inherit;
}
@media only screen and (min-width: 768px) {
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single {
display: flex;
flex-direction: column;
}
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single {
min-height: 420px;
height: -moz-fit-content;
height: fit-content;
padding: inherit;
flex: 0 0 33%;
}
}
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single .box-content {
display: grid;
grid-template-rows: auto;
height: auto;
min-height: 300px;
background-color: #F7F5F5;
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
padding: 43px 40px;
}
@media only screen and (min-width: 768px) {
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single .box-content {
min-height: inherit;
flex: 1 0 205px;
clip-path: polygon(0% 10%, 3% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
}
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single .box-content {
flex: 1 0 395px;
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
}
}
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single .box-content__text {
color: #121E23;
}
@media only screen and (min-width: 768px) {
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single .box-content__text {
margin-bottom: 10px;
}
}
@media only screen and (min-width: 1366px) {
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single .box-content__text {
margin-bootom: inherit;
}
}
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single .box-counter {
color: #88B14B;
font-size: 7.2rem;
font-weight: 700;
line-height: 110%;
margin-left: 16px;
}
.section-boxes-repeater.bg-dark .wrapper .boxes.numbered-cards .box-single .box-counter:before {
content: "0" counter(box-counter);
counter-increment: box-counter;
}
.section-gallery {
padding: 45px 0;
}
@media only screen and (min-width: 1366px) {
.section-gallery {
padding: 55px 0 145px;
}
}
@media only screen and (min-width: 1366px) {
.section-gallery .wrapper .section-heading {
margin-bottom: 55px;
}
}
.section-gallery .wrapper .gallery {
display: grid;
grid-template-columns: 320px;
grid-template-rows: repeat(auto-fill, 260px);
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}
@media only screen and (min-width: 1366px) {
.section-gallery .wrapper .gallery {
display: grid;
grid-template-columns: repeat(4, 285px);
justify-content: inherit;
gap: 20px;
margin-bottom: 60px;
}
}
.section-gallery .wrapper .gallery-image {
overflow: hidden;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.section-gallery .wrapper .gallery-image:nth-child(1) {
grid-column: 1/span 2;
grid-row: 1/2;
}
}
@media only screen and (min-width: 768px) {
.section-gallery .wrapper .gallery-image:nth-child(2) {
grid-column: 3/span 2;
grid-row: 1/span 2;
}
}
.section-gallery .wrapper .gallery-image:nth-child(3) {
display: none;
}
@media only screen and (min-width: 768px) {
.section-gallery .wrapper .gallery-image:nth-child(3) {
display: block;
grid-column: 1/2;
grid-row: 2/span 1;
}
}
.section-gallery .wrapper .gallery-image:nth-child(4) {
display: none;
}
@media only screen and (min-width: 768px) {
.section-gallery .wrapper .gallery-image:nth-child(4) {
display: block;
grid-column: 2/3;
grid-row: 2/span 1;
}
}
.section-gallery .wrapper .gallery-image:nth-child(5) {
display: none;
}
@media only screen and (min-width: 768px) {
.section-gallery .wrapper .gallery-image:nth-child(5) {
display: block;
grid-column: 1/3;
grid-row: 3/5;
}
}
.section-gallery .wrapper .gallery-image:nth-child(6) {
display: none;
}
@media only screen and (min-width: 768px) {
.section-gallery .wrapper .gallery-image:nth-child(6) {
display: block;
grid-column: 3/5;
grid-row: 3/5;
}
}
.section-gallery .wrapper .gallery-image img {
display: block;
width: 100%;
height: 101%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 400ms ease-out;
}
.section-gallery .wrapper .gallery-image img:hover {
transform: scale(1.05);
}
.section-gallery .wrapper .cta {
display: flex;
justify-content: center;
}
.hero-with-form {
height: 90vh;
width: 100%;
margin-bottom: 80px;
}
@media only screen and (min-width: 768px) {
.hero-with-form {
margin-bottom: 0px;
}
}
@media only screen and (min-width: 1366px) {
.hero-with-form {
max-height: 780px;
}
}
.hero-with-form .hero-wrapper {
position: relative;
height: 100%;
width: 100% !important;
background-repeat: no-repeat;
background-size: cover !important;
background-position: center;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 768px) {
.hero-with-form .hero-wrapper {
flex-direction: row;
align-items: flex-end;
padding-bottom: 90px;
}
}
@media only screen and (min-width: 1366px) {
.hero-with-form .hero-wrapper {
padding: 102px;
}
}
.hero-with-form .bg-filter {
position: absolute;
background-color: #121E23;
opacity: 97%;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(119deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
}
.hero-with-form .hero-content {
padding: 20px;
display: flex;
flex-direction: column;
align-content: flex-end;
gap: 20px;
flex: 0 1 50%;
z-index: 998;
}
@media only screen and (min-width: 768px) {
.hero-with-form .hero-content {
align-items: flex-start;
}
}
.hero-with-form .hero-content .hero-heading {
z-index: 99;
}
@media only screen and (min-width: 768px) {
.hero-with-form .hero-content .hero-heading {
max-width: 70%;
}
}
@media only screen and (min-width: 1366px) {
.hero-with-form .hero-content .hero-heading {
max-width: inherit;
flex: 0 0 50%;
}
}
.hero-with-form .hero-content .hero-text {
text-shadow: 2px 2px 3px #121E23;
}
.hero-with-form .hero-form {
background-color: #121E23;
padding: 22px;
clip-path: polygon(0% 4%, 4% 0%, 100% 0%, 100% 4%, 100% 100%, 0% 100%, 0% 4%);
flex: 0 0 50%;
}
@media only screen and (min-width: 768px) {
.hero-with-form .hero-form {
height: -moz-fit-content;
height: fit-content;
}
}
@media only screen and (min-width: 1366px) {
.hero-with-form .hero-form {
padding: 28px;
}
}
.social-media {
list-style: none !important;
position: fixed;
top: 120px;
right: 0;
height: -moz-fit-content;
height: fit-content;
padding: 9px;
z-index: 998;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
box-shadow: -8px 8px 16px -14px #5F5F5F;
}
@media only screen and (min-width: 768px) {
.social-media {
padding: 16px;
gap: 20px;
box-shadow: -10px 10px 26px -14px #5F5F5F;
}
}
.social-media__single {
opacity: 0.6;
transition: all 0.3s ease-in-out;
margin-left: 0 !important;
}
.social-media__single a {
display: grid;
place-items: center;
}
.social-media__single .icon {
width: 26px;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 768px) {
.social-media__single .icon {
width: 32px;
}
}
.social-media__single:hover {
opacity: 1;
}
.page-template-template-contact .wpcf7 {
background-color: #121E23;
padding: 22px;
margin: 50px auto;
clip-path: polygon(0% 4%, 4% 0%, 100% 0%, 100% 4%, 100% 100%, 0% 100%, 0% 4%);
max-width: 500px;
}
#app .section-header {
text-align: center;
margin-bottom: 60px;
}
#app .section-header .title {
margin-bottom: 0;
margin-top: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#app .section-realizacje .recent-realizations-item {
width: 25%;
}
#app .section-realizacje .recent-realizations-item > p {
background: rgba(86, 165, 61, 0.8);
}
@media (min-width: 1536px) {
#app .section-realizacje .recent-realizations-item {
padding-bottom: 20rem;
}
}
@media (max-width: 1000px) {
#app .section-realizacje .recent-realizations-item {
width: 50%;
margin: 0;
}
}
@media (max-width: 640px) {
#app .section-realizacje .recent-realizations-item {
padding-bottom: 10rem;
}
}
#app .section-contact {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 1300px) {
#app .section-contact {
grid-template-columns: 1fr;
row-gap: 30px;
}
}
#app .section-contact .section-contact-texts {
display: grid;
grid-template-columns: auto 1fr;
}
@media (max-width: 900px) {
#app .section-contact .section-contact-texts {
grid-template-columns: 1fr;
}
}
#app .section-contact .section-contact-texts .section-contact-texts-img img {
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
}
@media (max-width: 900px) {
#app .section-contact .section-contact-texts .section-contact-texts-img img {
margin-left: auto;
margin-right: auto;
}
}
#app .section-contact .section-contact-texts .section-contact-texts-txt {
padding: 25px;
color: #1d293f;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 32px;
}
@media (max-width: 900px) {
#app .section-contact .section-contact-texts .section-contact-texts-txt {
padding-left: 0;
padding-right: 0;
}
}
#app .section-contact .section-contact-form {
width: 100%;
max-width: 400px;
}
@media (max-width: 1300px) {
#app .section-contact .section-contact-form {
max-width: unset;
}
}
#app .section-contact .section-contact-form .section-contact-form-wrapper {
padding: 10px;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper h3 {
font-size: 21px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper h3 strong {
font-weight: 700;
}
@media (max-width: 1300px) {
#app .section-contact .section-contact-form .section-contact-form-wrapper h3 {
text-align: center;
}
}
#app .section-contact .section-contact-form .section-contact-form-wrapper form .wpforms-field {
padding: 7px 0;
border-color: #bcbcbc;
outline: none !important;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper form .wpforms-field input {
border-radius: 0;
color: #000;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper form .wpforms-field input::-moz-placeholder {
color: #000;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper form .wpforms-field input::placeholder {
color: #000;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper form .required-alert p {
color: #cd1f27;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 0;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper form .marketing input[type=checkbox]::before {
border-radius: 0;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper form .marketing label {
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
#app .section-contact .section-contact-form .section-contact-form-wrapper form .wpforms-submit {
display: block;
margin-left: auto;
border-radius: 0;
background-color: #88b14b;
height: 49px;
padding: 0 30px;
color: #fff;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
#app #calc-container .calc-bar-fix {
overflow: hidden;
padding: 20px 0;
}
#app #calc-container .calc-bar-fix #progress-bar {
max-width: 1000px;
margin: 50px auto 30px auto;
}
#app #calc-container .calc-bar-fix #progress-bar .progress-bar {
background: #ddd;
}
#app #calc-container .calc-bar-fix #progress-bar .progress-bar .progress-bar-line {
background: #88b14b;
display: block;
height: 10px;
width: 0;
transition: all 250ms ease-in-out;
}
#app #calc-container .calc-bar-fix #calc-bar {
display: flex;
flex-direction: row;
width: 350%;
margin-left: 0%;
transition: all 500ms ease-in-out;
margin-left: -55%;
}
@media (max-width: 1000px) {
#app #calc-container .calc-bar-fix #calc-bar {
width: 400%;
margin-left: 0%;
}
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s {
width: 100%;
max-width: 70%;
padding: 0 20px;
opacity: 0.2;
transition: all 500ms ease-in-out;
pointer-events: none;
}
@media (max-width: 1000px) {
#app #calc-container .calc-bar-fix #calc-bar .calc-s {
max-width: 100%;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s.calc-placeholder {
display: none;
}
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s.active {
opacity: 1;
pointer-events: initial;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s#calc-ch-1 .slide-data {
display: flex;
flex-direction: row;
row-gap: 20px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s#calc-ch-1 .slide-data img {
width: 100%;
max-width: 200px;
height: -moz-fit-content;
height: fit-content;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s#calc-ch-1 .slide-data .calc-texts {
width: 100%;
}
@media (max-width: 767px) {
#app #calc-container .calc-bar-fix #calc-bar .calc-s#calc-ch-1 .slide-data {
flex-direction: column;
align-items: center;
}
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box {
position: relative;
padding: 25px 70px 65px 70px;
box-sizing: border-box;
height: 100%;
position: relative;
border: 2px solid #88b14b;
background: #fff;
}
@media (max-width: 640px) {
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box {
padding: 25px 20px 65px 20px;
}
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 100%;
display: block;
z-index: -1;
background-color: #88b14b;
clip-path: polygon(0% 0%, 97% 0, 100% 4%, 100% 100%, 0% 100%);
top: -12px;
left: inherit;
right: -12px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-radio {
list-style: none;
margin: 0;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-radio li {
display: flex;
flex-direction: row;
align-items: center;
-moz-column-gap: 1rem;
column-gap: 1rem;
margin: 0;
width: 100%;
padding: 12.5px 0;
transition: 0.3s;
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0);
cursor: pointer;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-radio li:hover {
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
background-color: #eee;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-radio li.selected .radio::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 100%;
background: #88b14b;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-radio li .radio {
position: relative;
width: 20px;
height: 20px;
background-color: #ddd;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
margin-left: 20px;
flex-shrink: 0;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-radio li .radio-text .radio-title {
font-weight: 600;
font-size: 16px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts {
list-style: none;
margin: 0;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li {
margin-right: 1.75rem;
/********** Range Input Styles **********/
/*Range Reset*/
/* Removes default focus */
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
/* slider thumb */
/******** Firefox styles ********/
/* slider track */
/* slider thumb */
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li:not(:last-child) {
margin-bottom: 10px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li p {
font-weight: 600;
font-size: 16px;
margin-bottom: 0;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li input.input {
background-color: #f7f7f7;
padding: 4px 10px;
border: 1px solid #eee;
width: 100%;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li input.input:focus {
outline: none;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: 100%;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li input[type=range]:focus {
outline: none;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li input[type=range]::-webkit-slider-runnable-track {
background-color: #ddd;
border-radius: 0.5rem;
height: 0.5rem;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -6px; /* Centers thumb on the track */
border-radius: 4px;
/*custom styles*/
background-color: #121e23;
border: 1px solid #fff;
height: 20px;
width: 10px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li input[type=range]::-moz-range-track {
background-color: #ddd;
border-radius: 0.5rem;
height: 0.5rem;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data ul.calc-texts li input[type=range]::-moz-range-thumb {
border: none; /*Removes extra border that FF applies*/
border-radius: 0px; /*Removes default border-radius that FF applies*/
/*custom styles*/
background-color: #121e23;
border: 1px solid #fff;
height: 20px;
width: 10px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data .btn_send {
max-width: -moz-fit-content;
max-width: fit-content;
margin: 30px auto 0;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--data .btn_send:disabled {
cursor: progress;
background: #cdcdcd;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--title {
position: relative;
display: block;
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 auto 30px auto;
text-align: center;
padding-bottom: 8px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box--title h2 {
margin: 0;
padding: 0;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev,
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next {
background: #88b14b;
top: 50%;
margin: -15px;
position: absolute;
transition: 0.3s;
cursor: pointer;
border-radius: 100%;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev.disabled,
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next.disabled {
background: #ddd;
cursor: default;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev .svg-arrow,
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next .svg-arrow {
margin: 0;
width: 48px;
height: 48px;
display: block;
padding: 7px;
top: 0;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev .svg-arrow path,
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next .svg-arrow path {
transition: 0.3s;
}
@media (max-width: 640px) {
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev,
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next {
top: 40px;
}
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev {
left: 25px;
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .prev .svg-arrow {
transform: rotate(180deg);
}
#app #calc-container .calc-bar-fix #calc-bar .calc-s .calc-box .next {
right: 25px;
}
#configurator_sended {
padding: 40px 70px;
box-sizing: border-box;
height: 100%;
position: relative;
border: 2px solid #88b14b;
width: 100%;
max-width: 700px;
margin: 50px auto;
background: #fff;
}
#configurator_sended::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 100%;
display: block;
z-index: -1;
background-color: #88b14b;
clip-path: polygon(0% 0%, 98% 0, 100% 4%, 100% 100%, 0% 100%);
top: -12px;
left: inherit;
right: -12px;
}
#configurator_sended h2 {
position: relative;
display: block;
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 auto 50px auto;
text-align: center;
padding-bottom: 8px;
}
#configurator_sended .configurator_sended_text {
text-align: center;
}
.bg-dark {
background-color: #121E23;
color: #fff;
}
.bg-dark a {
color: #fff;
}
.bg-dark a:hover {
color: #88B14B;
}
.bg-white {
background-color: #fff;
color: #121E23;
}
.bg-gray {
background-color: #F7F5F5;
color: #121E23;
}/*# sourceMappingURL=main.css.map */