.calculator-form .steps:not(.active) {
display: none;
}
.why-it-works {
padding: 30px 0 80px;
}
.why-it-works .columns {
display: flex;
background: url(http://jebgroup.com/wp-content/themes/jeb/assets_sos/images/why-it-work-background.png) no-repeat center 7px;
background-size: contain;
}
.why-it-works h2 {
margin-bottom: min(max(40px, calc(2.5rem + (67.97 - 40) * ((100vw - 390px) / (1440 - 390)))), 67.97px);
text-align: center;
}
.why-it-works .container {
max-width: 1488px;
}
.why-it-works .columns .content>*:not(:last-child) {
margin-bottom: 22px;
}
.why-it-works .columns .content>h1,
.why-it-works .columns .content>h2,
.why-it-works .columns .content>h3,
.why-it-works .columns .content>h4,
.why-it-works .columns .content>h5,
.why-it-works .columns .content>h6 {
margin-bottom: 40px;
}
.why-it-works .columns .content>h6,
.why-it-works .columns .content>h6 * {
line-height: 28.32px;
}
.why-it-works .columns .content span {
font-weight: 600;
}
.why-it-works .columns .content h1,
.why-it-works .columns .content h2,
.why-it-works .columns .content h3,
.why-it-works .columns .content h4,
.why-it-works .columns .content h5,
.why-it-works .columns .content h6 {
margin-bottom: min(max(22px, calc(1.375rem + (40 - 22) * ((100vw - 390px) / (1440 - 390)))), 40px);
text-transform: uppercase;
font-family: var(--font-heading-primary);
}
.why-it-works .actions {
margin-top: min(max(22px, calc(1.375rem + (40 - 22) * ((100vw - 390px) / (1440 - 390)))), 40px);
}
.why-it-works .vs {
flex: 0 0 96px;
height: 96px;
text-align: center;
align-content: center;
}
.why-it-works .column>h3 {
text-align: center;
margin-bottom: min(max(40px, calc(2.5rem + (69.32 - 40) * ((100vw - 390px) / (1440 - 390)))), 69.32px);
align-content: center;
padding: 0 min(max(0px, calc(0rem + (82 - 0) * ((100vw - 390px) / (1440 - 390)))), 82px);
}
.why-it-works .column>.image img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
.why-it-works .column>.image {
text-align: center;
align-content: center;
}
.why-it-works .column {
flex: 0 0 calc((100% - 96px) / 2);
}
.why-it-works .content-right,
.why-it-works .content-left {
margin-top: min(max(40px, calc(2.5rem + (60.77 - 40) * ((100vw - 390px) / (1440 - 390)))), 60.77px);
}
.why-it-works .content-left {
padding-right: min(max(0px, calc(0rem + (94 - 0) * ((100vw - 390px) / (1440 - 390)))), 94px);
padding-left: min(max(0px, calc(0rem + (92 - 0) * ((100vw - 390px) / (1440 - 390)))), 92px);
}
.why-it-works .content-right {
padding-right: min(max(0px, calc(0rem + (184 - 0) * ((100vw - 390px) / (1440 - 390)))), 184px);
}
.why-sos {
padding: 96px 0 184px;
position: relative;
background: linear-gradient(290deg, rgba(93, 191, 140, 1) 0%, rgba(56, 133, 117, 1) 36%, rgba(19, 75, 95, 1) 100%);
}
.why-sos .container {
position: relative;
z-index: 1;
}
.why-sos:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background-image: url(http://jebgroup.com/wp-content/themes/jeb/assets_sos/images/why-sos-background.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.why-sos h2 {
color: #fff;
text-align: center;
margin-bottom: 99px;
}
.list-reason {
margin-top: 96px;
}
.list-reason .item {
text-align: center;
}
.list-reason .item .image-border {
content: '';
background: #fff;
display: block;
width: 100%;
height: 1px;
margin: 32px 0;
}
.list-reason .item .image {
background: #fff;
padding: 26px;
border-radius: 50%;
height: 118px;
width: 118px;
display: inline-block;
}
.list-reason .item * {
color: #fff;
}
.list-reason .item h6 {
text-transform: uppercase;
line-height: 28.32px;
margin-bottom: 32px;
font-weight: 600;
font-family: var(--font-heading-primary);
}
.list-reason .item .content {
padding: 0 41.5px;
text-align: left;
}
.list-reason .item .content li {
margin-bottom: 16px;
line-height: 23px;
letter-spacing: 0.01px;
}
.page-template-project-calculator ul li:before {
display: none !important;
}
.list-reason .item ul {
margin: 0;
}
.list-reason-container {
position: relative;
}
.list-reason-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 42px;
pointer-events: none;
z-index: 2;
left: 0;
}
.list-reason-navigation>div {
pointer-events: auto !important;
background: #fff;
border-color: #fff;
}
.list-reason-navigation>div:hover {
background: #65BAAB;
border-color: #65BAAB;
}
.list-reason-navigation>div:hover svg path {
stroke: #fff
}
.list-reason-navigation>div:before {
display: none;
}
.list-reason-navigation svg {
height: 15.98px;
}
.list-reason-navigation>.swiper-button-prev {
left: 0;
}
.list-reason-navigation>.swiper-button-next {
right: 0;
}
.list-reason .item .content li:last-child {
margin-bottom: 0;
}
.project-calculator-form {
padding: 80px 0 30px;
}
.project-calculator-form h2 {
text-align: center;
margin-bottom: 20px;
}
.project-calculator-form .container>.content {
max-width: 760px;
margin: 0 auto 50px;
text-align: center;
}
.project-calculator-form .form-container {
background-color: #428B8B;
border-radius: 30px;
padding: 64px 78px;
overflow: hidden;
}
.project-calculator-form .form-container *:not(input, .wpcf7-not-valid-tip) {
color: #fff;
}
.project-calculator-form .form-container .heading h5 {
font-size: 30px;
line-height: 35.4px;
font-weight: 600;
letter-spacing: normal;
font-family: var(--font-heading-primary);
}
.project-calculator-form .form-container .heading>* {
margin-bottom: 25px;
display: block;
}
.project-calculator-form .form-container .heading {
display: block; border-bottom: 1px solid #fff;
margin-bottom: 36px;
}
.project-calculator-form .form-top h4 {
line-height: 28.32px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 30px;
width: 100%;
font-family: var(--font-heading-primary);
}
.project-calculator-form .form-fields {
display: flex;
column-gap: 40px;
row-gap: 25px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.project-calculator-form .form-fields>div {
flex: 0 0 calc(((100% - 120px) / 4) - 3.4px);
overflow: hidden;
}
.project-calculator-form .form-fields>div.bigger {
flex: 0 0 calc(((100% - 120px) / 4) + 10px);
}
.project-calculator-form .form-fields .field {
margin-bottom: 0;
}
.project-calculator-form .form-container label {
font-size: 17px;
line-height: 23px;
letter-spacing: 0.01px;
font-family: var(--font-body-text);
font-weight: 400;
margin-bottom: 6px;
}
.project-calculator-form .form-fields .icon {
padding: 10.83px;
border: 1.4px solid #fff;
text-align: center;
flex: 0 0 77px;
height: 77px;
border-radius: 50%;
}
.project-calculator-form .form-fields .item {
display: flex;
gap: 24px;
}
.project-calculator-form .form-bottom h6 {
text-transform: uppercase;
margin-bottom: 30px;
line-height: 28.32px;
font-family: var(--font-heading-primary);
font-weight: 600;
}
.project-calculator-form .form-bottom .fields {
display: flex;
gap: 40px;
}
.project-calculator-form .form-bottom .field {
margin-bottom: 0;
}
.project-calculator-form .form-bottom .field:last-child {
flex: 0 0 46.53%;
}
.project-calculator-form .form-bottom {
padding-bottom: 36px;
border-bottom: 1.4px solid #fff;
}
.project-calculator-form .step-1 .actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 25px;
}
.project-calculator-form .clear-form {
text-decoration: underline;
font-weight: 500;
}
.project-calculator-form .notices {
margin-bottom: 30px;
}
.project-calculator-form .notices * {
line-height: 23px;
letter-spacing: 0.01px;
font-size: 15px;
}
.project-calculator-form .notices *:last-child {
margin-bottom: 0;
}
.project-calculator-form input {
color: #282828 !important;
border: none;
padding: 12.5px 15px !important;
}
.project-calculator-form input::placeholder {
color: #ababab
}
.project-calculator-form .form-container .heading.hide {
display: none;
}
.project-calculator-form .form-container.step-2 {
padding: 0;
}
.project-calculator-form .step-2 {
display: flex;
}
.project-calculator-form .step-2 .col-left {
flex: 0 0 48.006379585326953748006379585327%;
padding: 66px 74px 65.95px 78px;
}
.project-calculator-form .step-2 .col-left h3 {
letter-spacing: 0.05px;
font-weight: 600;
margin-bottom: 40px;
}
.project-calculator-form .result-top .number,
.project-calculator-form .result-bottom .number {
font-size: 32px;
font-weight: 600;
line-height: 37.76px;
letter-spacing: 0.05px;
width: 100%;
display: block;
text-align: center;
margin-bottom: 5px;
}
.project-calculator-form .result-top .number .unit-sub {
font-size: 26px;
transform: translateY(-13px);
display: inline-block;
line-height: 26px;
}
.project-calculator-form .result-top>div {
text-align: center;
}
.project-calculator-form .result-top {
display: flex;
gap: 30px;
margin-bottom: 40px;
justify-content: center;
}
.project-calculator-form .result-top .text {
letter-spacing: 0.01px;
}
.project-calculator-form .result-bottom {
display: flex;
flex-wrap: wrap;
column-gap: 48px;
row-gap: 40px;
text-align: center;
}
.project-calculator-form .result-bottom>div {
flex: 0 0 calc((100% - 96px) / 3);
overflow: hidden;
}
.project-calculator-form .result-bottom .image {
width: 117px;
height: 117px;
border: 2px solid #fff;
border-radius: 50%;
display: flex;
padding: 16.59px;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.project-calculator-form .background {
position: absolute;
top: 0;
left: 0;
z-index: 0;
height: 100%;
width: 100%;
}
.project-calculator-form .col-right {
position: relative;
padding: 66px 48px;
}
.project-calculator-form .col-right>div:not(.background) {
position: relative;
z-index: 2;
}
.project-calculator-form .col-right .background img {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
object-fit: cover;
}
.project-calculator-form .col-right .background:after {
display: block;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(290deg, rgba(93, 191, 140, 1) 0%, rgba(54, 130, 116, 1) 100%);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
.project-calculator-form .col-right h3 {
letter-spacing: 0.05px;
margin-bottom: 40px;
}
.project-calculator-form .col-right .cost,
.project-calculator-form .col-right .carbon {
margin-bottom: 40px; }
.project-calculator-form .col-right .cost {
border-bottom: 1px solid #fff;
padding-bottom: 40px;
display: none;
}
.project-calculator-form .col-right .number {
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.project-calculator-form .col-right .label {
margin-bottom: 5px;
display: block;
font-size: 17px;
line-height: 23px;
letter-spacing: 0.01px;
}
.project-calculator-form .col-right h3.label {
margin-bottom: 40px;
}
.project-calculator-form .col-right .actions {
display: flex;
justify-content: space-between;
margin-top: 57px;
gap: 37px;
flex-wrap: wrap;
}
.project-calculator-form .col-right .t-c {
margin-top: 20px;
}
.project-calculator-form .col-right a.button.btn-primary.get-quote {
background: #fff;
color: #037580;
border-color: #fff;
width: auto;
flex: 0 0 calc(100% - 37px - 175px);
}
.project-calculator-form .col-right a.button.btn-primary.get-quote:hover {
background: #037580;
color: #fff;
border-color: #037580;
}
.project-calculator-form .col-right .equal {
flex: 0 0 100%;
display: flex;
gap: 10px;
align-items: center;
}
.project-calculator-form .col-right .number .icon {
width: 118px;
height: 118px;
}
.project-calculator-form .col-right .number .icon svg {
width: 100%;
height: 100%;
}
.project-calculator-form .col-right .number h3 {
margin-bottom: 5px;
}
.project-calculator-form .col-right .equal * {
margin: 0 !important;
fill: #fff;
}
.project-calculator-form .col-right .equal svg {
width: 46px;
height: 46px;
}
#project-calculator-modal {
padding: min(max(40px, calc(2.5rem + (80 - 40) * ((100vw - 390px) / (1440 - 390)))), 80px) min(max(20px, calc(1.25rem + (80 - 20) * ((100vw - 390px) / (1440 - 390)))), 80px);
background: #fff;
border-radius: 30px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
width: calc(100% - 48px);
max-width: 741px;
display: flex;
flex-flow: column;
text-align: center;
gap: 25px;
}
#project-calculator-modal h6 {
font-size: 26px;
line-height: 33.5px;
letter-spacing: normal;
font-weight: 500;
text-transform: capitalize;
color: #037580;
}
#project-calculator-modal .actions {
justify-items: center;
}
.calculator-form .wpcf7 form.sent .wpcf7-response-output {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
word-break: normal;
}
.project-calculator-form .form-fields .field {
flex: 1;
}
@media (min-width: 1280px) {
.why-it-works .container {
padding: 0;
}
.project-calculator-form .form-fields .square {
order: 5;
}
.project-calculator-form .form-fields .monitor {
order: 6;
}
.project-calculator-form .form-fields .cabinet {
order: 7;
}
.project-calculator-form .form-fields .table {
order: 8;
}
}
@media (max-width: 1279px) {
.project-calculator-form .form-bottom .field {
flex: 0 0 calc((100% - 40px) / 2);
}
.project-calculator-form .form-bottom .field:last-child {
flex: 0 0 100%;
}
.project-calculator-form .form-bottom .fields {
flex-wrap: wrap;
}
.project-calculator-form .form-fields>div.bigger,
.project-calculator-form .form-fields>div {
flex: 0 0 calc((100% - 40px) / 2);
}
}
@media (min-width: 768px) {
.project-calculator-form .close-form-mobile {
display: none;
}
}
@media (max-width: 1223px) {
.list-reason-container {
padding: 0 62px;
}
}
@media (max-width: 767px) {
.why-sos {
padding: 50px 0;
}
.list-reason .item .image-border {
margin: 16px 0;
}
.list-reason .item h6 {
margin-bottom: 16px;
}
.list-reason {
margin-top: 40px;
}
.why-sos .container {
padding: 0 12px;
}
.list-reason .item .content {
padding: 0 15px;
}
.list-reason-navigation {
top: 124.59px;
transform: translateY(0);
}
.list-reason .item .image {
width: 101.59px;
height: 101.59px;
padding: 23.25px
}
.why-it-works .vs {
display: none;
}
.why-it-works .columns {
flex-flow: column;
}
.why-it-works .column {
flex: 0 0 100%;
}
.why-it-works .column:not(.active) {
display: none;
}
.why-it-works {
padding: 42px 0;
}
.why-it-works .columns {
background: none;
}
.why-it-works .content-right,
.why-it-works .content-left {
margin-top: 40px;
}
.why-it-works .column>h3,
.why-it-works h2 {
margin-bottom: 40px;
}
.why-it-works .columns .content>h6,
.why-it-works .columns .content>h6 * {
line-height: 20.06px;
}
.why-it-works .content-right,
.why-it-works .content-left {
padding: 0;
}
.list-title-mobile {
font-size: 17px;
font-weight: 500;
color: #037580;
line-height: 35px;
text-align: center;
gap: 47px;
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.list-title-mobile span {
padding: 6px 5px;
cursor: pointer;
}
.list-title-mobile span:not(.active) {
color: #7FB7BB;
}
#project-calculator-modal h6 {
font-size: 18px;
}
.popup-modal-dismiss {
width: 30;
height: 30px;
top: -34.22px;
right: 0;
}
.project-calculator-form .form-container:not(.content-mobile) {
position: fixed;
top: 100vh;
transition: top 0.4s ease-in-out;
left: 0;
z-index: 9999;
height: calc(100vh - 93px);
overflow: auto;
}
.project-calculator-form .form-container.show:not(.content-mobile) {
top: 93px;
}
.project-calculator-form .form-container-overlay {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
width: 100vw;
height: 100vh;
z-index: 9998;
opacity: 0;
transition-duration: 0.4s;
}
.project-calculator-form .form-container-overlay.show {
opacity: 1;
pointer-events: none;
}
.project-calculator-form .form-container .heading>*,
.project-calculator-form .form-container .heading {
margin-bottom: 15px;
}
.project-calculator-form .form-container .heading h5 {
font-size: 17px;
line-height: 20.06px;
letter-spacing: 0.05px;
}
.project-calculator-form .container>.content {
margin-bottom: 40px;
}
.project-calculator-form {
padding: 42px 0 43.05px;
}
.project-calculator-form .close-form-mobile {
position: absolute;
right: -39px;
top: 0;
width: 30px;
height: 30px;
cursor: pointer;
}
.project-calculator-form .heading-inner {
position: relative;
}
.project-calculator-form .form-container:not(.content-mobile) .heading .content {
display: none;
}
.project-calculator-form .form-container .heading {
width: calc(100% - 28px);
}
.project-calculator-form .form-container.content-mobile .heading {
width: 100%;
}
.project-calculator-form .form-container:not(.content-mobile) .heading {
margin-bottom: 40px;
}
.project-calculator-form .form-container:not(.content-mobile) .heading>* {
margin-bottom: 23.28px;
}
.project-calculator-form .form-fields {
row-gap: 20px;
column-gap: 20px;
margin-bottom: 20px;
}
.project-calculator-form .form-fields>div.bigger,
.project-calculator-form .form-fields>div {
flex: 0 0 calc((100% - 20px) / 2);
}
.project-calculator-form .form-fields .field {
flex: 0 0 100%;
}
.project-calculator-form .form-fields .icon {
position: absolute;
width: 39px;
height: 39px;
padding: 5.4px;
top: 1px;
}
.project-calculator-form .form-container .form-fields>div:not(.bigger) label {
font-size: 15px;
line-height: 20.03px;
padding: 9.485px 0;
padding-left: 49px;
align-content: center;
}
.project-calculator-form .form-fields .item {
position: relative;
}
.project-calculator-form .form-container input {
padding: 14.63px 20px;
}
.project-calculator-form .form-bottom .fields {
gap: 20px;
}
.project-calculator-form .form-container label {
font-size: 15px;
line-height: 20.03px;
letter-spacing: 0.01px;
}
.project-calculator-form .form-bottom {
padding-bottom: 40px;
}
.project-calculator-form .notices * {
font-size: 14px;
line-height: 20px;
}
.project-calculator-form .form-bottom h6 {
margin-bottom: 20px;
}
.project-calculator-form .form-top h4 {
margin-bottom: 20px;
}
.project-calculator-form .form-top h4,
.project-calculator-form .form-bottom h6 {
font-size: 17px;
line-height: 20.06px;
}
.project-calculator-form .step-2 .col-left {
padding: 0 24px 20px;
}
.project-calculator-form .step-2 {
flex-flow: column;
}
.project-calculator-form .result-bottom .image {
height: 59px;
width: 59px;
border-width: 1px;
justify-self: center;
margin-bottom: 10px;
padding: 8.3px;
}
.project-calculator-form .result-top .number,
.project-calculator-form .result-bottom .number {
font-size: 25px;
line-height: 29.5px;
}
.project-calculator-form .result-bottom {
column-gap: 31px;
}
.project-calculator-form .result-bottom>div {
flex: 0 0 calc((100% - 62px) / 3);
}
.project-calculator-form .form-bottom .field {
flex: 0 0 calc((100% - 20px) / 2);
}
.project-calculator-form .result-top {
gap: 20px;
}
.project-calculator-form .result-top>div {
flex: 0 0 50%;
}
.project-calculator-form .step-2 .col-left h3 {
font-size: 17px;
line-height: 20.06px;
}
.project-calculator-form .form-container.step-2 .heading {
display: block;
width: calc(100% - 48px - 28px);
margin-left: 24px;
margin-right: auto;
padding-top: 28px;
}
.project-calculator-form .result-top .number .unit-sub {
font-size: 20px;
transform: translateY(-10px);
line-height: 20px;
}
.project-calculator-form .col-right {
padding: 20px 24px;
}
.project-calculator-form .col-right h3.label {
font-size: 17px;
margin-bottom: 20px;
}
.project-calculator-form .col-right .number .icon {
width: 58.5px;
height: 59px;
}
.project-calculator-form .col-right .equal svg {
width: 28.94px;
height: 28.94px;
}
.project-calculator-form .col-right .equal h3 {
font-size: 18px;
line-height: 130%;
}
.project-calculator-form .col-right .equal .label {
font-size: 14px;
line-height: 23px;
letter-spacing: 0.01px;
}
#project-calculator-modal .popup-modal-dismiss {
top: -34px;
right: -14px;
}
.project-calculator-form .form-container.content-mobile .button-spiral.right:not(.samedsk) .arrow {
width: 84px;
height: 42px;
transform: translateX(-42px);
}
.project-calculator-form .form-container.content-mobile .button-spiral.right:not(.samedsk):hover .arrow {
transform: translateX(0);
}
.project-calculator-form .form-container.content-mobile .arrow-link:not(.samedsk) .icon,
.project-calculator-form .form-container.content-mobile .button-spiral:not(.samedsk) .arrow svg,
.project-calculator-form .form-container.content-mobile .button-spiral svg {
width: 42px;
height: 42px;
}
.project-calculator-form .form-container {
padding: 28px 24px;
}
}
@media (max-width: 575px) {
.why-it-works .column>h3 {
text-align: left;
}
.project-calculator-form .col-right a.button.btn-primary.get-quote {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
.project-calculator-form .col-right .actions {
margin-top: 40px;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 20px;
}
}