/*! 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 */