h1,
h2,
h3,
h4,
h5 {
    color: var(--black);
    font-weight: 700
}

.wrapper,
.wrapper-r {
    z-index: 1;
    position: relative
}

.w-r-content,
.w-r-margin,
.wrapper,
.wrapper-r {
    position: relative
}

.letter-effect-h div span,
body,
html,
input[type=text] {
    font-family: 'Noto Sans SC', sans-serif
}

.button-switch,
.dots,
.house-img {
    user-select: none
}

#header-menu,
.c-s-right .c-s-prev-next>div.disabled,
.dots.hero span:nth-of-type(4),
.dots.house span:nth-of-type(3),
.dots.inspired span:first-of-type,
.dots.products span:nth-of-type(2),
.house-img,
.menu-background span,
a.h-o {
    pointer-events: none
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700
}

#blog-content p,
.big {
    line-height: 38px
}

#calculator-steps,
#hero .down-arrow,
#house,
#products-view-contact,
.button,
.letter-effect-h div,
.line,
.no-scroll,
.oh,
.row,
.s-content,
.slide-blog,
body {
    overflow: hidden
}

.bg-text span,
.dots p,
.menu-background span {
    text-transform: uppercase
}

body {
    transition: 1s
}

.calculator-layout.hide,
.f-copy-and-by .f-row .f-links,
.f-s-colum:first-of-type,
.mobile,
.noUi-horizontal .noUi-handle::after,
.noUi-horizontal .noUi-handle::before,
.noUi-marker-large,
.noUi-marker-normal {
    display: none
}

h1 {
    font-size: 122px;
    line-height: 133px;
    letter-spacing: -5.95122px
}

h2 {
    font-size: 72px;
    line-height: 106px;
    letter-spacing: -4px
}

h3 {
    font-size: 62px;
    line-height: 76px;
    letter-spacing: -3 px
}

h4 {
    font-size: 42px;
    line-height: 57px
}

.big,
h5 {
    font-size: 20px
}

h5 {
    line-height: 28px
}

.normal,
p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 300
}

.bg-t-logo span,
.contac-l,
div#house-hour,
div#house-hour strong {
    font-weight: 500
}

p.small {
    font-size: 14px;
    line-height: 24px
}

small {
    font-size: 10px;
    line-height: 20px;
    font-weight: 400
}

:root {
    --green: #04AF00;
    --black: #323232;
    --night: #0F0F0F;
    --gray: #CFCFCF;
    --gray-back: #F9F8F4;
    --gray-back-2: #F5F5F5;
    --gray-l: #C4C4C4;
    --gray-l-2: #EDEDED;
    --gray-s: #A6A6A6;
    --gray-s-2: #696969;
    --gray-s-3: #747474;
    --gray-switch: #E3E3E3
}

.wrapper {
    max-width: 1440px;
    width: 71.5%;
    margin: 0 auto
}

.wrapper-big {
    width: 86.1%
}

#c-s-8 .c-s-title,
.not-wid {
    width: 100% !important
}

.wrapper-small {
    width: 56.8%
}

.wrapper-r {
    display: flex
}

.w-r-margin {
    width: 14.25%
}

.w-r-content {
    width: 85.75%
}

.bg-text {
    position: absolute;
    max-width: 100%;
    margin-top: -113px;
    z-index: 0
}

.bg-text span {
    display: block;
    width: fit-content;
    white-space: nowrap;
    transition: .3s ease-out;
    font-style: normal;
    font-weight: 900;
    font-size: 242px;
    line-height: 242px;
    color: #f3f3f3;
    z-index: 0;
    opacity: .6
}

.dib {
    display: inline-block
}

.house-backgrounds img,
.night-b,
.night-c,
.night-cw,
.night-cw-2,
.night-cw-3,
.night-g,
div#house-hour * {
    transition: 1s
}

.black,
.black #header-menu::after,
.black #header.active,
.black #header.nav,
.black .night-bn {
    background-color: var(--night)
}

.black .night-b,
.contac-l a:after {
    background-color: #000
}

#header.nav,
.black #blog-content::before,
.black #products-view-contact::before,
.black section {
    background-color: unset !important
}

.black .night-video::before {
    background: linear-gradient(180deg, var(--night), transparent)
}

.black .bg-text span,
.black .night-c {
    color: #000
}

.black #house-savings-tables .table-footer,
.black #house-savings-tables .table-title,
.black .night-cw,
.black div#house-hour *,
.button.white .line div::after,
.line div,
.white-letter {
    color: #fff
}

.black .night-cw-2,
.c-buttons>span {
    color: var(--gray-l)
}

.black .night-cw-3 {
    color: var(--gray-s-3)
}

.black .night-g {
    color: var(--green) !important
}

.black .c-f-row::before,
.black .select-content {
    background-color: #383838
}

.black .s-t-s-item svg path:first-of-type {
    fill: #000
}

.black #house::after,
.black #products-view-2:after,
.black #stay-inspired::after,
.black footer {
    background-color: var(--night) !important
}

.black .f-copy-and-by {
    border-top: 1px solid #383838
}

.black .down-arrow svg path:first-of-type {
    fill: var(--night)
}

.black form input {
    background-color: unset;
    color: #fff
}

.button,
.button.white::before,
.c-f-row.active::before {
    background-color: var(--green)
}

.black .select-content {
    color: #fff
}

.button.dark {
    --background: #2F3545;
    --shadow: 0 2px 8px -1px rgba(21, 25, 36, .32);
    --shadow-hover: 0 4px 20px -2px rgba(21, 25, 36, .5)
}

.button.fast {
    --duration: .32s
}

.letter-effect-h {
    --text-2: #fff;
    --font-size-2: 57px;
    --duration-2: .44s;
    --move-hover-2: 0;
    --font-shadow-2: 57px;
    padding: 16px 32px;
    line-height: var(--font-size-2);
    border-radius: 24px;
    display: block;
    outline: 0;
    text-decoration: none;
    font-size: var(--font-size) -2;
    letter-spacing: .5px;
    color: var(--text);
    box-shadow: var(--shadow-2);
    -webkit-transform: translateY(var(--y-2));
    transform: translateY(var(--y-2));
    -webkit-transition: box-shadow var(--duration-2) ease, -webkit-transform var(--duration-2) ease;
    transition: box-shadow var(--duration-2) ease, -webkit-transform var(--duration-2) ease;
    transition: transform var(--duration-2) ease, box-shadow var(--duration-2) ease;
    transition: transform var(--duration-2) ease, box-shadow var(--duration-2) ease, -webkit-transform var(--duration-2) ease
}

.button.white .line div,
.c-green,
.draggable-wrapper::before,
.g-number,
.line div::after {
    color: var(--green)
}

.button {
    position: relative;
    width: fit-content;
    display: block;
    padding: 12px 42px;
    border-radius: 100px 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    transition: .3s;
    line-height: 21px;
    cursor: pointer
}

.button-switch,
.button-switch-simple {
    border-radius: 100px;
    position: relative
}

.letter-effect-h div {
    display: -webkit-box;
    display: flex;
    text-shadow: 0 var(--font-shadow-2) 0 var(--green)
}

.letter-effect-h div span {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal;
    -webkit-transition: -webkit-transform var(--duration-2) ease;
    transition: -webkit-transform var(--duration-2) ease;
    transition: transform var(--duration-2) ease;
    transition: transform var(--duration-2) ease, -webkit-transform var(--duration-2) ease;
    -webkit-transform: translateY(var(--m-2));
    transform: translateY(var(--m-2))
}

.enter-x,
.enter-x-r,
.enter-y,
.enter-y-r {
    opacity: 0;
    transition: 2s cubic-bezier(.19, 1, .22, 1)
}

#header-menu.active::before,
#header-menu::after,
#header-menu::before {
    transition: 1.2s cubic-bezier(.86, 0, .07, 1)
}

#header.active,
.button.white,
.disabled.button {
    background-color: #fff
}

#house::after,
#our-products,
#stay-inspired {
    background-color: var(--gray-back)
}

#stay-inspired::after,
footer {
    background-color: var(--gray-back-2)
}

.button.white div {
    text-shadow: 0 var(--font-shadow) 0 #fff !important
}

.button div span:first-child,
.letter-effect-h div span:first-child {
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.button div span:nth-child(2),
.letter-effect-h div span:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.button div span:nth-child(3),
.letter-effect-h div span:nth-child(3) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s
}

.button div span:nth-child(4),
.letter-effect-h div span:nth-child(4) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.button div span:nth-child(5),
.letter-effect-h div span:nth-child(5) {
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s
}

.button div span:nth-child(6),
.letter-effect-h div span:nth-child(6) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}

.button div span:nth-child(7),
.letter-effect-h div span:nth-child(7) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s
}

.button div span:nth-child(8),
.letter-effect-h div span:nth-child(8) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s
}

.button div span:nth-child(9),
.letter-effect-h div span:nth-child(9) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s
}

.button div span:nth-child(10),
.letter-effect-h div span:nth-child(10) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
}

.button div span:nth-child(11),
.letter-effect-h div span:nth-child(11) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s
}

.button div span:nth-child(12),
.letter-effect-h div span:nth-child(12) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}

.button div span:nth-child(13),
.letter-effect-h div span:nth-child(13) {
    -webkit-transition-delay: 0.65s;
    transition-delay: 0.65s
}

.button div span:nth-child(14),
.letter-effect-h div span:nth-child(14) {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s
}

.button div span:nth-child(15),
.letter-effect-h div span:nth-child(15) {
    -webkit-transition-delay: 0.75s;
    transition-delay: 0.75s
}

.button div span:nth-child(16),
.letter-effect-h div span:nth-child(16) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s
}

.button div span:nth-child(17),
.letter-effect-h div span:nth-child(17) {
    -webkit-transition-delay: 0.85s;
    transition-delay: 0.85s
}

.button div span:nth-child(18),
.letter-effect-h div span:nth-child(18) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s
}

.button div span:nth-child(19),
.letter-effect-h div span:nth-child(19) {
    -webkit-transition-delay: 0.95s;
    transition-delay: 0.95s
}

.button div span:nth-child(20),
.letter-effect-h div span:nth-child(20) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.button.reverse {
    --font-shadow: calc(var(--font-size) * -1)
}

.button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: .7s cubic-bezier(.86, 0, .07, 1);
    background: #fff
}

.down-arrow {
    position: absolute;
    z-index: 20;
    cursor: pointer
}

.down-arrow svg path:first-of-type {
    fill: transparent;
    transition: .5s
}

.down-arrow svg path:nth-of-type(2) {
    transition: transform 2s cubic-bezier(.86, 0, .07, 1), fill .5s .3s
}

@keyframes arrowdown {
    0% {
        transform: translatey(0);
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: translatey(40%)
    }

    51% {
        opacity: 0;
        transform: translatey(-40%)
    }

    100% {
        opacity: 1;
        transform: translatey(0)
    }
}

.button-switch {
    width: 100%;
    max-width: 236px;
    min-height: 43px;
    background-color: var(--gray-switch);
    display: flex;
    justify-content: space-around;
    z-index: 20;
    cursor: pointer
}

.button-switch span {
    align-self: center;
    color: #fff;
    z-index: 2;
    transition: .1s 0.1s
}

.letter-effect div,
a.h-o h4 {
    color: var(--black)
}

.button-switch span svg path {
    transition: .1s
}

.button-switch.l span:first-of-type,
.button-switch.l span:first-of-type svg path,
.button-switch.r span:nth-of-type(2),
.button-switch.r span:nth-of-type(2) svg path {
    color: var(--green);
    fill: var(--green)
}

.button-switch svg {
    margin-right: 3px
}

.button-switch:before {
    position: absolute;
    content: '';
    background: #fff;
    top: 0;
    width: 50%;
    height: 43px;
    border-radius: 100px;
    transition: .3s;
    box-shadow: 0 0 14px rgba(0, 0, 0, .1)
}

.button-switch.l:before {
    transform: translateX(-50%)
}

.button-switch.r:before {
    transform: translateX(50%)
}

.button-switch-simple {
    max-width: 68px;
    min-height: 31px;
    background-color: var(--green);
    display: block;
    user-select: none;
    cursor: pointer
}

.button-switch-simple span {
    position: absolute;
    background-color: #fff;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    box-shadow: -1px 2px 4px rgba(0, 0, 0, .4);
    transition: .4s;
    overflow: hidden;
    transform: translateX(38px)
}

.button-switch-simple span svg {
    margin: 8px 7px;
    transition: .5s .1s
}

.button-switch-simple.active span svg {
    transform: translateY(-33px)
}

.button-switch-simple.active span {
    transform: translate(0)
}

.char-button::after {
    content: attr(data-char);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%)
}

.line {
    position: relative;
    display: block;
    height: max-content;
    white-space: nowrap;
    width: fit-content
}

.c-f-row.active .letter-effect-h,
.letter-effect-h.active span,
.letter-effect-h:hover span {
    --m-2: calc((var(--font-size-2) * -1) - 5px)
}

.letter-effect-h:hover div {
    text-shadow: 0 57px 0 var(--green)
}

.enter-y {
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px)
}

.enter-y-r {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px)
}

.enter-x {
    transform: translateX(100px);
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px)
}

.enter-x-r {
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px)
}

.loaded .enter-trigger.is-inview .delay-1 {
    transition-delay: .2s !important
}

.loaded .enter-trigger.is-inview .delay-2,
.loaded .enter-trigger.is-inview .h-o .delay-3,
.loaded .enter-trigger.is-inview .p-v-container .delay-3,
.loaded .modal-p .delay-3 {
    transition-delay: .4s !important
}

.loaded .enter-trigger.is-inview .delay-3,
.loaded .enter-trigger.is-inview .h-o .delay-7,
.loaded .enter-trigger.is-inview .p-v-container .delay-7,
.loaded .modal-p .delay-7 {
    transition-delay: .6s !important
}

.loaded .enter-trigger.is-inview .delay-4,
.loaded .enter-trigger.is-inview .h-o .delay-11 {
    transition-delay: .8s !important
}

.loaded .enter-trigger.is-inview .delay-5 {
    transition-delay: 1s !important
}

.loaded .enter-trigger.is-inview .delay-6 {
    transition-delay: 1.2s !important
}

.loaded .enter-trigger.is-inview .delay-7 {
    transition-delay: 1.4s !important
}

.loaded .enter-trigger.is-inview .delay-8 {
    transition-delay: 1.6s !important
}

.loaded .enter-trigger.is-inview .delay-9 {
    transition-delay: 1.8s !important
}

.loaded .enter-trigger.is-inview .delay-10 {
    transition-delay: 2s !important
}

.loaded .enter-trigger.is-inview .delay-11 {
    transition-delay: 2.2s !important
}

.loaded .enter-trigger.is-inview .delay-12 {
    transition-delay: 2.4s !important
}

.loaded .enter-trigger.is-inview .delay-13,
.loaded .enter-trigger.is-inview .p-v-container .delay-2-1 {
    transition-delay: 2.6s !important
}

.loaded .enter-trigger.is-inview .delay-14,
.loaded .enter-trigger.is-inview .p-v-container .delay-2-5,
.loaded .enter-trigger.is-inview .p-v-container .delay-2-9 {
    transition-delay: 2.8s !important
}

.loaded .enter-trigger.is-inview .delay-15 {
    transition-delay: 3s !important
}

.loaded .enter-trigger.is-inview .delay-16 {
    transition-delay: 3.2s !important
}

.loaded .enter-trigger.is-inview .delay-17 {
    transition-delay: 3.4s !important
}

.loaded .enter-trigger.is-inview .delay-18 {
    transition-delay: 3.6s !important
}

.loaded .enter-trigger.is-inview .delay-19 {
    transition-delay: 3.8s !important
}

.loaded .enter-trigger.is-inview .delay-20 {
    transition-delay: 4s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-1,
.loaded .enter-trigger.is-inview .p-v-container .delay-1,
.loaded .modal-p .delay-1 {
    transition-delay: .3s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-2,
.loaded .enter-trigger.is-inview .p-v-container .delay-2,
.loaded .modal-p .delay-2 {
    transition-delay: .35s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-4,
.loaded .enter-trigger.is-inview .p-v-container .delay-4,
.loaded .modal-p .delay-4 {
    transition-delay: .45s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-5,
.loaded .enter-trigger.is-inview .p-v-container .delay-5,
.loaded .modal-p .delay-5 {
    transition-delay: .5s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-6,
.loaded .enter-trigger.is-inview .p-v-container .delay-6,
.loaded .modal-p .delay-6 {
    transition-delay: .55s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-8,
.loaded .enter-trigger.is-inview .p-v-container .delay-8,
.loaded .modal-p .delay-8 {
    transition-delay: .65s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-9,
.loaded .enter-trigger.is-inview .p-v-container .delay-9 {
    transition-delay: .7s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-10 {
    transition-delay: .75s !important
}

.loaded .enter-trigger.is-inview .h-o .delay-12 {
    transition-delay: .85s !important
}

.loaded .enter-trigger.is-inview .p-v-container .delay-2-2 {
    transition-delay: 2.65s !important
}

.loaded .enter-trigger.is-inview .p-v-container .delay-2-3,
.loaded .enter-trigger.is-inview .p-v-container .delay-2-7 {
    transition-delay: 2.7s !important
}

.loaded .enter-trigger.is-inview .p-v-container .delay-2-4,
.loaded .enter-trigger.is-inview .p-v-container .delay-2-8 {
    transition-delay: 2.75s !important
}

.loaded .enter-trigger.is-inview .p-v-container .delay-2-6 {
    transition-delay: 2.85s !important
}

.loaded .enter-trigger.is-inview .enter-x,
.loaded .enter-trigger.is-inview .enter-x-r,
.loaded .enter-trigger.is-inview .enter-y,
.loaded .enter-trigger.is-inview .enter-y-r,
.loaded .modal-p.active .enter-y {
    opacity: 1;
    transform: translate(0)
}

.row span {
    display: block
}

h1 .row span {
    display: block;
    margin-bottom: 20px;
    margin-top: -20px
}

.c-s-all-info,
.d-f,
.h-case-study,
.h-content,
.h-options,
.header-right,
.proposal-block,
a.h-o h4 {
    display: flex
}

.showcase-cta__button-inner {
    position: absolute;
    z-index: 10;
    width: 30px;
    height: 30px;
    top: 5px;
    left: 35px
}

.showcase-cta__button-inner::after,
.showcase-cta__button-inner::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    display: block;
    width: 30px;
    height: 30px;
    background-color: var(--green);
    border-radius: 4rem;
    opacity: .4
}

.showcase-cta__button-inner::before {
    animation: 1.3s cubic-bezier(.25, .46, .45, .94) infinite both pulse
}

.showcase-cta__button-inner::after {
    animation: 1.3s cubic-bezier(.25, .46, .45, .94) .5s infinite both pulse
}

.showcase-cta__button__pulse {
    position: absolute;
    margin: 0 auto;
    width: 13px;
    height: 13px;
    background-color: var(--green);
    border-radius: 4rem;
    cursor: pointer;
    transition: .3s cubic-bezier(.25, .46, .45, .94);
    transition-property: transform, background-color;
    right: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.contac-l,
.h-content,
.header-right,
.toggle-nav {
    position: relative
}

.showcase-cta__button__pulse::after,
.showcase-cta__button__pulse::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 2px;
    height: 30%;
    background-color: #fff
}

.showcase-cta__button__pulse::after {
    width: 30%;
    height: 2px
}

@keyframes pulse {
    0% {
        opacity: .5;
        transform: scale(0)
    }

    100% {
        opacity: 0;
        transform: scale(1.75)
    }
}

#header {
    position: fixed;
    width: 100%;
    z-index: 2;
    transition: 1s
}

.h-content {
    justify-content: space-between;
    align-items: center;
    min-height: 80px
}

.header-right {
    justify-content: space-between;
    width: 192px;
    align-items: center
}

.contac-l {
    font-size: 18px;
    transition: .5s .8s;
    align-self: center
}

.contac-l a:after {
    bottom: -4px
}

.hide {
    transform: translateY(-100%)
}

.toggle-nav span {
    position: absolute;
    width: 31px;
    height: 4px;
    top: 0;
    right: 0;
    background: #04af00;
    border-radius: 1px 1px 1px 12px;
    transition: .3s
}

.toggle-nav span:nth-of-type(2) {
    width: 21px;
    top: 9px;
    transition-delay: .05s
}

.toggle-nav span:nth-of-type(3) {
    width: 12px;
    top: 18px;
    transition-delay: .1s
}

.toggle-nav {
    width: 31px;
    height: 22px;
    cursor: pointer;
    align-self: center
}

#header-menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%
}

#hero,
.dots>span,
.h-options,
a.h-o,
a.h-o h4 {
    position: relative
}

#header-menu.active {
    pointer-events: all
}

#header-menu::after,
#header-menu::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    left: initial;
    background-color: #fff;
    width: 0%;
    height: 100vh
}

#header-menu::before {
    background-color: var(--green);
    transition: 1.4s cubic-bezier(.86, 0, .07, 1)
}

#header-menu.active::after,
#header-menu.active::before {
    width: 100%;
    right: 0;
    left: initial
}

#header-menu.active::after {
    transition: 1.4s cubic-bezier(.86, 0, .07, 1)
}

.h-options::-webkit-scrollbar {
    width: 0
}

.h-options {
    width: 100%;
    flex-flow: wrap;
    transition: .3s;
    margin-top: 26vh;
    height: 100%
}

a.h-o {
    width: 33%;
    margin-bottom: 55px;
    transition: .5s;
    opacity: 0
}

.b-c-img iframe,
.back-hero-cont,
.back-hero-cont video {
    width: 100%;
    height: 100%
}

a.h-o p {
    margin-bottom: 16px
}

a.h-o h4 {
    font-style: normal;
    font-weight: 400;
    font-size: 52px;
    line-height: 47px;
    align-items: center;
    letter-spacing: .05px;
    margin-top: 14px;
    transition: .3s;
    cursor: pointer;
    padding-left: 33px
}

.dots p,
.dots span span,
.dots>span,
.usage-month span strong,
sup {
    display: inline-block
}

a.h-o h4.under-line:after {
    background-color: var(--black);
    height: 4px
}

.dots span:hover span,
.dots>span::before,
.item-content h5:after,
.s-back {
    background-color: var(--green)
}

a.h-o .f-social svg {
    display: inline
}

a.h-o .f-social {
    display: flex;
    justify-content: space-between;
    padding-left: 38px;
    max-width: 230px;
    margin-top: 20px
}

a.h-o .f-social svg path {
    fill: #D3D3D3
}

#c-s-1[data-value] .map img#map-0,
.black .house-shadow,
.toggle-nav.active span:nth-of-type(2) {
    opacity: 0
}

.toggle-nav.active span:first-of-type {
    width: 31px;
    border-radius: 0 12px;
    transform: rotate(45deg) translateY(15px)
}

.toggle-nav.active span:nth-of-type(3) {
    width: 31px;
    border-radius: 12px 0;
    transform: rotate(-45deg) translate(-3px, -13px)
}

#header.nav .contac-l {
    opacity: 0;
    pointer-events: none;
    transition-delay: .35s
}

#header-menu.active a.h-o {
    pointer-events: all;
    opacity: 1
}

#hero {
    padding-top: 24vh;
    min-height: 100vh
}

.back-hero-cont {
    position: absolute;
    top: 0;
    left: 24%
}

.g-number {
    font-weight: 900;
    font-size: 20px;
    line-height: 16px
}

.dots {
    position: fixed;
    width: fit-content;
    transform: rotate(-90deg);
    top: 39vh;
    left: -42px;
    min-width: 300px;
    height: 28px
}

.dots>span {
    height: 26px;
    width: 26px;
    padding: 0 5px;
    cursor: pointer
}

#dots-sticky,
#dots-wrapper,
.d-text,
.dots p,
.dots span span {
    position: absolute
}

.dots span span {
    width: 6px;
    height: 6px;
    border: 1px solid var(--gray);
    border-radius: 50%;
    transition: .3s;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.dots>span::after,
.dots>span::before {
    position: absolute;
    content: '';
    transform: scale(0);
    border-radius: 50%;
    z-index: -1;
    width: 26px;
    height: 26px;
    border: 1px solid #cfcfcf;
    opacity: 0;
    transition: .7s;
    margin: 0 auto;
    right: 0;
    left: 0
}

.dots>span::before {
    opacity: .1 !important
}

.carousel-item.visible,
.dots span.active::after,
.dots span.active::before,
.dots.hero span:nth-of-type(4)::after,
.dots.hero span:nth-of-type(4)::before,
.dots.house span:nth-of-type(3)::after,
.dots.house span:nth-of-type(3)::before,
.dots.inspired span:first-of-type::after,
.dots.inspired span:first-of-type::before,
.dots.products span:nth-of-type(2)::after,
.dots.products span:nth-of-type(2)::before {
    transform: scale(1);
    opacity: 1
}

.dots span.active span,
.dots.hero span:nth-of-type(4) span,
.dots.house span:nth-of-type(3) span,
.dots.inspired span:first-of-type span,
.dots.products span:nth-of-type(2) span {
    transform: translateY(-50%) scale(1.4);
    background-color: var(--green);
    border: 1px solid var(--green)
}

.dots .d-text p.active,
.dots.hero .d-text p:nth-of-type(4),
.dots.house .d-text p:nth-of-type(3),
.dots.inspired .d-text p:first-of-type,
.dots.products .d-text p:nth-of-type(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .2s
}

.dots p {
    font-weight: 400;
    font-size: 12px;
    line-height: 10px;
    letter-spacing: 10px;
    color: var(--gray);
    margin-left: 22px;
    opacity: 0;
    transition: .7s;
    transform: translateX(10px)
}

.d-text {
    top: 7px;
    left: 115px;
    min-width: 273px
}

.dots span:hover span {
    border: 1px solid var(--green)
}

#dots-sticky {
    top: 0;
    left: 0;
    width: 10%;
    height: calc(100% - 1300px)
}

#dots-wrapper {
    top: 0;
    left: 0;
    z-index: 15
}

#products-view,
.c-s-input,
.f-social,
.h-title,
.house-diagonals img:first-child,
.house-img .house-day img:first-child,
.system-req.roof-fit .roof-levels span {
    position: relative
}

.h-title .g-number {
    padding-left: 10px;
    margin-bottom: 24px
}

.h-desc {
    position: absolute;
    max-width: 455px;
    top: 21px;
    right: -130px
}

.h-desc span {
    font-weight: 300
}

.h-desc .button {
    margin-top: 93px
}

#hero .down-arrow svg {
    z-index: 5;
    position: relative
}

#hero .down-arrow {
    position: absolute;
    bottom: 55px;
    left: 65px;
    z-index: 17;
    border-radius: 50%
}

#hero .down-arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1
}

#hero .down-arrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--green);
    height: 0;
    transition: 1s cubic-bezier(.86, 0, .07, 1);
    z-index: 2
}

#bg-t-hero {
    z-index: -1;
    bottom: -90px
}

.menu-background {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

#house,
.house-img {
    position: relative
}

.menu-background span {
    font-style: normal;
    font-weight: 900;
    font-size: 242px;
    line-height: 242px;
    letter-spacing: -10px;
    color: rgba(0, 0, 0, .03);
    position: fixed;
    bottom: -3vh;
    left: 0;
    opacity: 0;
    transition: 1s;
    width: 100%;
    display: block;
    z-index: 5
}

#house {
    padding: 150px 0
}

.sub-title h4 {
    margin-top: 1px
}

.house-img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    z-index: 10;
    width: 100%;
    margin: 0 auto
}

.house-img .house-day {
    position: relative;
    z-index: 5;
    width: 80%;
    margin: 0 auto
}

.house-img img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    transition: none
}

.house-img .house-night {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    width: 80%;
    margin: 0 auto
}

.house-img .house-products img {
    opacity: 1;
    transition: .3s
}

.calculator-step:not(#c-s-8),
.house-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.house-diagonals {
    position: absolute;
    bottom: -7%;
    left: 0;
    width: 100%;
    z-index: 1
}

.house-diagonals img {
    transition: 1s .3s
}

body.black .house-diagonals #digonal-dark,
body:not(.black) .house-diagonals #diagonal-light {
    opacity: 1 !important;
    transition: 1s;
    z-index: 1
}

.house-img[data-image="1"] .house-backgrounds img:nth-child(13),
.house-img[data-image="1"] .house-night img:nth-child(6),
.house-img[data-image="10"] .house-backgrounds img:nth-child(2),
.house-img[data-image="10"] .house-day img:nth-child(2),
.house-img[data-image="11"] .house-backgrounds img:nth-child(3),
.house-img[data-image="11"] .house-day img:nth-child(3),
.house-img[data-image="12"] .house-backgrounds img:nth-child(3),
.house-img[data-image="12"] .house-day img:nth-child(3),
.house-img[data-image="13"] .house-backgrounds img:nth-child(3),
.house-img[data-image="13"] .house-day img:nth-child(3),
.house-img[data-image="14"] .house-backgrounds img:nth-child(3),
.house-img[data-image="14"] .house-day img:nth-child(3),
.house-img[data-image="15"] .house-backgrounds img:nth-child(3),
.house-img[data-image="15"] .house-day img:nth-child(3),
.house-img[data-image="16"] .house-backgrounds img:nth-child(4),
.house-img[data-image="16"] .house-day img:nth-child(4),
.house-img[data-image="17"] .house-backgrounds img:nth-child(5),
.house-img[data-image="17"] .house-day img:nth-child(5),
.house-img[data-image="18"] .house-backgrounds img:nth-child(6),
.house-img[data-image="18"] .house-day img:nth-child(6),
.house-img[data-image="19"] .house-backgrounds img:nth-child(8),
.house-img[data-image="19"] .house-day img:nth-child(7),
.house-img[data-image="2"] .house-backgrounds img:nth-child(13),
.house-img[data-image="2"] .house-night img:nth-child(6),
.house-img[data-image="20"] .house-backgrounds img:nth-child(8),
.house-img[data-image="20"] .house-night img:first-child,
.house-img[data-image="21"] .house-backgrounds img:nth-child(9),
.house-img[data-image="21"] .house-night img:nth-child(2),
.house-img[data-image="22"] .house-backgrounds img:nth-child(10),
.house-img[data-image="22"] .house-night img:nth-child(3),
.house-img[data-image="23"] .house-backgrounds img:nth-child(11),
.house-img[data-image="23"] .house-night img:nth-child(4),
.house-img[data-image="24"] .house-backgrounds img:nth-child(12),
.house-img[data-image="24"] .house-night img:nth-child(5),
.house-img[data-image="25"] .house-backgrounds img:nth-child(13),
.house-img[data-image="25"] .house-night img:nth-child(5),
.house-img[data-image="3"] .house-backgrounds img:nth-child(13),
.house-img[data-image="3"] .house-night img:nth-child(6),
.house-img[data-image="4"] .house-backgrounds img:nth-child(13),
.house-img[data-image="4"] .house-night img:nth-child(6),
.house-img[data-image="5"] .house-backgrounds img:nth-child(13),
.house-img[data-image="5"] .house-night img:nth-child(6),
.house-img[data-image="6"] .house-backgrounds img:first-child,
.house-img[data-image="6"] .house-day img:first-child,
.house-img[data-image="7"] .house-backgrounds img:nth-child(2),
.house-img[data-image="7"] .house-day img:nth-child(2),
.house-img[data-image="8"] .house-backgrounds img:nth-child(2),
.house-img[data-image="8"] .house-day img:nth-child(2),
.house-img[data-image="9"] .house-backgrounds img:nth-child(2),
.house-img[data-image="9"] .house-day img:nth-child(2) {
    opacity: 1;
    transition-delay: 0s
}

.house-products {
    position: absolute;
    width: 80%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0 auto;
    right: 0
}

.house-products-container {
    position: absolute;
    pointer-events: auto;
    width: 20%;
    height: 10%;
    top: 28%;
    left: 36.5%;
    cursor: pointer
}

#house .draggable-wrapper,
#house-savings-tables,
.c-f-row label,
.modal-p,
.s-b-i-desc span,
.select-content,
div#house-hour {
    pointer-events: none
}

.house-products-container:hover+img {
    transform: scale(1.05) translate(.5%, 1%)
}

.house-products-container#c-battery {
    top: 61%;
    z-index: 1;
    left: 33%;
    width: 12%;
    height: 15%
}

.house-products-container#c-battery .showcase-cta__button-inner {
    top: 37px;
    left: 68px
}

.house-products-container#c-battery:hover+img {
    transform: scale(1.08) translate(1.5%, -1.5%)
}

#house::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 260px;
    bottom: 0;
    transition: 1s;
    display: none
}

.h-case-study {
    position: relative;
    align-items: flex-end;
    width: 100%;
    justify-content: space-between;
    max-width: 60%;
    margin: 0 auto
}

.h-case-study .h-c-s-colum:first-of-type {
    max-width: 186px
}

.h-case-study .h-c-s-colum:nth-of-type(2) {
    max-width: 216px
}

#dark-mode {
    position: absolute;
    top: 80px;
    right: 70px;
    width: 68px
}

.button-switch-simple.active span svg {
    transform: translateY(-33px) rotate(-90deg)
}

#house .draggable-wrapper {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: none
}

.draggable-wrapper::before {
    content: 'Click and hold to drag';
    position: absolute;
    top: 95px;
    left: 190px;
    width: 160px;
    background: #fff;
    line-height: 38px;
    box-shadow: 0 0 10px rgb(0 0 0 / 11%);
    border-radius: 4px;
    font-size: 12px;
    z-index: 20;
    transition: .3s;
    right: 0;
    margin: 0 auto;
    text-align: center;
    pointer-events: none
}

.draggable-wrapper.dragged::before {
    opacity: 0;
    left: 220px
}

#house .draggable-wrapper::after {
    display: none;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30vw;
    height: 30vw;
    margin-top: -15vw;
    margin-left: -15vw;
    z-index: 16;
    border-radius: 50%;
    pointer-events: auto
}

#house #drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 300px;
    height: 500px
}

#house #drag-bounds,
#house .wrapper-big:last-child {
    width: 100%;
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0
}

#house #drag-bounds {
    top: 0
}

.sun-svg {
    position: absolute;
    top: 150px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: fit-content
}

#house .wrapper-big:last-child {
    bottom: 5%;
    z-index: 11
}

.ai-c {
    align-items: center
}

.ai-fs {
    align-items: flex-start
}

.ai-fe {
    align-items: flex-end
}

.jc-fs {
    justify-content: flex-start
}

.jc-fe {
    justify-content: flex-end
}

.jc-sb {
    justify-content: space-between
}

.fd-c {
    flex-direction: column
}

div#house-hour {
    position: absolute;
    top: 268px;
    left: 0;
    text-align: right;
    width: 77%;
    right: 0;
    margin: 0 auto;
    max-width: 1440px;
    padding-right: 36px
}

.c-tittle .row:first-of-type span,
.s-b-item p,
div#house-hour span {
    font-weight: 400
}

#house-savings-tables {
    position: absolute;
    top: 360px;
    left: 0;
    z-index: 20;
    width: 77%;
    right: 0;
    margin: 0 auto;
    max-width: 1440px
}

#house-savings-tables .table-title {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 20px;
    transition: .5s
}

#house-savings-tables .table-body,
#house-savings-tables .table-header {
    font-size: 14px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dfdfdf;
    transition: .5s
}

.c-red {
    color: #e80000
}

#house-savings-tables .table-header {
    color: #979797
}

#house-savings-tables .table-body {
    color: #323232;
    line-height: 40px
}

#house-savings-tables .table-footer {
    font-size: 16px;
    line-height: 36px;
    font-weight: 700;
    transition: .5s
}

.black #house-savings-tables .table-body {
    color: rgba(256, 266, 256, .7)
}

.black #house-savings-tables .table-body,
.black #house-savings-tables .table-header {
    border-bottom-color: rgba(256, 256, 256, .4)
}

.house-shadow {
    position: absolute;
    top: 75%;
    left: 0;
    margin: 0 auto;
    right: 0;
    width: 65%;
    height: 40%;
    transform: skewX(-10deg);
    transform-origin: center top;
    transition: .3s
}

.house-shadow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(#5f5f5f, transparent);
    height: 100%;
    filter: blur(20px);
    opacity: .5
}

.house-img[data-image="1"] .house-shadow {
    transform: skewX(83deg);
    opacity: .3
}

.house-img[data-image="2"] .house-shadow {
    transform: skewX(70deg);
    opacity: .5
}

.house-img[data-image="3"] .house-shadow {
    transform: skewX(50deg);
    opacity: .7
}

.house-img[data-image="4"] .house-shadow {
    transform: skewX(40deg);
    opacity: .8
}

.house-img[data-image="5"] .house-shadow {
    transform: skewX(30deg);
    opacity: .85
}

.house-img[data-image="6"] .house-shadow {
    transform: skewX(20deg);
    opacity: .9
}

.house-img[data-image="7"] .house-shadow {
    transform: skewX(0);
    opacity: 1
}

.house-img[data-image="8"] .house-shadow {
    transform: skewX(-20deg);
    opacity: .9
}

.house-img[data-image="9"] .house-shadow {
    transform: skewX(-30deg);
    opacity: .85
}

.house-img[data-image="10"] .house-shadow {
    transform: skewX(-40deg);
    opacity: .8
}

.house-img[data-image="11"] .house-shadow {
    transform: skewX(-50deg);
    opacity: .7
}

.house-img[data-image="12"] .house-shadow {
    transform: skewX(-70deg);
    opacity: .5
}

.house-img[data-image="13"] .house-shadow {
    transform: skewX(-83deg);
    opacity: .3
}

#our-products {
    padding-top: 106px;
    padding-bottom: 90px;
    transition: 1s
}

#our-products .dots {
    top: 350px
}

.our-products .bg-text {
    margin-top: 125px
}

#o-p-bg-t {
    margin-top: -140px;
    z-index: 0
}

.s-t-d {
    max-width: 260px;
    margin-top: 40px
}

.s-back {
    position: absolute;
    max-width: 813px;
    width: 100%;
    height: 554px;
    display: block;
    top: 210px;
    right: 0;
    z-index: -10
}

.our-p-flex,
.slide {
    display: flex;
    position: relative
}

.our-p-flex {
    justify-content: space-between;
    align-items: flex-end;
    flex-flow: wrap
}

.our-p-flex .s-t-d {
    margin-top: unset;
    width: 70%;
    min-width: 65%
}

.our-p-flex h4 {
    width: 30%;
    margin-top: 0
}

.slide {
    width: 100%;
    height: 600px;
    margin-bottom: 50px
}

#slide-baterry {
    margin-left: -58px
}

.s-content {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%
}

.s-b-item {
    position: relative;
    width: 100%;
    max-width: 291px;
    text-align: center;
    margin-left: 25px;
    height: fit-content
}

.s-b-i-back,
.s-b-i-desc {
    position: absolute;
    width: 100%;
    background: #fff;
    border-radius: 4px
}

.s-b-i-back {
    max-width: 292px;
    height: 336px;
    top: 160px;
    z-index: 0
}

.s-b-item img {
    z-index: 1;
    position: relative;
    transition: .5s
}

.s-b-item p {
    position: relative;
    font-style: normal;
    font-size: 18px;
    line-height: 32px;
    color: #000;
    z-index: 1
}

.f-links,
.s-b-i-desc p {
    font-size: 14px;
    font-weight: 400
}

.s-b-i-desc {
    display: block;
    top: 100%;
    transform: translateY(-100%);
    transition: .8s;
    text-align: center
}

.s-b-i-desc p {
    font-family: Noto Sans SC;
    font-style: normal;
    line-height: 22px;
    text-align: center;
    max-width: 213px;
    margin: 0 auto 12px;
    opacity: 0;
    transition: .4s
}

.c-text h4,
.c-text p {
    margin-bottom: 30px
}

.s-b-i-desc span {
    opacity: 0;
    transition: .6s;
    font-size: 12px;
    letter-spacing: 7px;
    color: var(--green);
    position: relative;
    width: fit-content
}

.s-b-i-desc span:after {
    transition-delay: .8s
}

.s-b-item-container {
    position: relative;
    display: block
}

.c-buttons,
.c-logos,
.calculator {
    position: relative;
    display: flex
}

.calculator {
    max-width: 1029px;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 80px rgba(0, 0, 0, .14);
    border-radius: 4px;
    padding: 90px 90px 60px
}

#calculator {
    margin-top: 50px
}

.c-logos {
    flex-flow: wrap;
    justify-content: space-between;
    padding-right: 80px;
    width: calc(100% - 300px)
}

.c-text {
    position: relative;
    margin-top: -10px
}

.c-logos svg {
    width: 26%
}

.c-text p {
    max-width: 64%;
    color: var(--gray-s-3)
}

.c-text .row span {
    color: --var(--gray-s-3)
}

.c-buttons {
    align-items: center;
    justify-content: space-between;
    max-width: 100%
}

.f-flex-content,
.f-s-colum .f-social {
    justify-content: space-between;
    display: flex
}

.c-buttons .button,
.c-f-flex .c-f-row,
.cookies-text {
    width: 60%
}

.c-buttons .button div {
    margin: 0 auto;
    width: fit-content
}

.c-logos svg:first-of-type {
    margin-bottom: 40px
}

#our-products .w-r-content .button {
    position: absolute;
    bottom: 10px;
    right: 100px;
    width: auto
}

#our-products .w-r-content .slide-arrows {
    position: absolute;
    left: 0;
    bottom: 15px
}

.slide-arrows {
    user-select: none
}

.slide-arrows svg {
    opacity: .5;
    transition: .3s;
    cursor: pointer
}

.slide-arrows svg:first-of-type {
    margin-right: 12px
}

.slide-baterry {
    opacity: 0;
    transition: .3s
}

.slide-baterry-2 {
    position: absolute;
    opacity: 0;
    transition: .3s;
    height: 100%
}

.c-f-row.err .err-s,
.slide-baterry-2.active,
.slide-baterry.active {
    opacity: 1
}

#slide-switch {
    position: absolute;
    top: -45px;
    right: 0
}

#stay-inspired {
    position: relative
}

#stay-inspired .slide-arrows {
    position: absolute;
    top: 57px;
    right: -100px
}

#s-t-slide {
    position: relative;
    margin-top: 55px
}

.s-t-s-item {
    position: relative;
    width: 100%;
    border-radius: 4px
}

.s-t-s-container {
    cursor: pointer;
    transition: .3s;
    background-color: #fff
}

.item-content {
    padding: 38px 24px 0
}

.s-t-s-item p {
    color: var(--gray-l);
    min-height: 120px
}

.item-content h5 {
    position: relative;
    padding-bottom: 58px;
    min-height: 112px
}

.item-content h5:after {
    position: absolute;
    content: '';
    width: 24px;
    height: 2px;
    bottom: 26px;
    left: 0
}

.f-links a,
.f-s-colum p,
.s-t-s-item span:first-of-type {
    width: fit-content;
    position: relative
}

.s-t-s-item span:first-of-type {
    display: block;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 7px;
    color: var(--green);
    margin: 35px 0 50px;
    transition: .3s
}

.s-t-s-item span:nth-of-type(2) {
    position: absolute;
    bottom: 243px;
    left: 24px;
    z-index: 1
}

#c-s-1 .map img#map-0,
.c-s-right .c-s-prev-next svg *,
.f-social svg path,
.nk-link,
.s-links a svg path,
.s-t-s-item span:nth-of-type(2) svg path {
    transition: .3s
}

.item-img {
    position: relative;
    background-image: url(img/blog/s-i-s-img.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 214px;
    transition: .5s
}

#stay-inspired::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 60px;
    bottom: 0;
    z-index: 0;
    transition: 1s
}

#stay-inspired .dots {
    top: 240px
}

footer {
    padding: 120px 0 0
}

.f-flex-content {
    position: relative
}

.f-sections {
    position: relative;
    display: flex;
    width: 70%;
    justify-content: flex-end
}

.f-s-colum {
    width: 25%;
    width: fit-content
}

.f-social svg {
    position: relative;
    display: block;
    margin-bottom: 28px;
    cursor: pointer
}

.f-logo {
    position: relative;
    width: 30%
}

.f-s-colum .f-social {
    max-width: 131px
}

.f-copy-and-by {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 20px 0 43px;
    margin-top: 91px;
    border-top: 1px solid var(--gray-l-2);
    color: var(--gray-l)
}

.f-s-colum h5 {
    color: var(--green);
    margin-bottom: 43px
}

.f-s-colum p {
    color: var(--gray-s);
    line-height: 42px;
    transition: .3s
}

.f-links a::after {
    background-color: var(--gray-s);
    bottom: -4px
}

.f-s-colum p::after {
    background-color: var(--gray-s);
    bottom: 7px
}

.f-logo svg {
    margin-bottom: 38px
}

.f-logo p {
    line-height: 42px;
    color: var(--gray-s-2)
}

.f-row,
.s-flex {
    position: relative;
    display: flex;
    align-items: center
}

.f-row small {
    min-width: 372px
}

.f-links {
    line-height: 14px
}

.bg-t-logo span,
.blog-title-desc {
    color: var(--black);
    font-size: 24px
}

.f-links a {
    margin-right: 19px
}

#hero.products {
    background: unset;
    min-height: unset;
    padding-bottom: 90px;
    padding-top: 140px
}

.products .h-desc {
    position: relative;
    right: unset;
    top: unset;
    margin-top: 50px
}

#hero.clients #arrow-hero,
#hero.products #arrow-hero {
    bottom: 100px
}

#hero.products #bg-t-hero {
    right: -45px;
    bottom: -120px
}

.bg-t-logo {
    position: absolute;
    display: flex;
    align-items: center;
    top: 10px;
    left: 160px
}

#products-view-2 .bg-text .bg-t-logo {
    top: -15px
}

.bg-t-logo span {
    letter-spacing: 20px;
    margin-left: 25px;
    line-height: 24px;
    letter-spacing: 2px;
    text-transform: none
}

.blog-title-desc,
a.b-c-link {
    line-height: 40px;
    font-weight: 500
}

.c-f-row input,
.c-f-row label {
    letter-spacing: .05px;
    padding-left: 20px
}

.p-v-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-flow: wrap
}

.p-v-container.swiper-wrapper {
    flex-flow: unset
}

.static-item {
    position: relative;
    width: 15%;
    margin-right: 2%;
    margin-bottom: -40px
}

#products-view-2:after,
.p-v-bg,
.s-i-back p {
    position: absolute;
    width: 100%
}

.static-item:hover {
    z-index: 50
}

.s-i-img {
    transition: .7s cubic-bezier(.19, .9, .58, 1)
}

.static-item:nth-of-type(6n+6) {
    margin-right: unset
}

.s-i-back p {
    text-align: center;
    bottom: 27px
}

.s-i-back {
    box-shadow: 0 0 80px rgba(0, 0, 0, .08);
    width: 100%;
    height: 215px;
    margin-top: -140px;
    border-radius: 4px;
    background-color: #fff
}

.p-v-bg {
    height: 355px;
    background-color: var(--green);
    top: 210px
}

#blog-content::before,
#products-view-2:after,
.select-content {
    background-color: var(--gray-back);
    left: 0
}

#products-view-2 {
    position: relative;
    padding-top: 220px;
    padding-bottom: 211px
}

#products-view-2 .bg-text {
    position: absolute;
    top: 260px;
    left: 0
}

#products-view-2:after {
    content: '';
    height: 33%;
    bottom: 0
}

#stay-inspired.products {
    padding-top: 145px
}

#hero.blog {
    padding-bottom: unset
}

.blog-title-desc {
    position: relative;
    margin-top: 67px
}

.b-span,
a.b-c-link {
    color: var(--green)
}

.green-line {
    position: absolute;
    width: 81px;
    height: 0;
    top: -33px;
    left: 0;
    border: 2px solid var(--green)
}

#contac,
.b-c-flex,
.b-c-img,
.b-c-img-bg,
.b-span,
.contact-flex,
.share {
    position: relative
}

a.b-c-link {
    font-size: 18px;
    text-decoration-line: underline
}

.b-c-img {
    width: 1030px;
    height: 524px;
    margin: 67px 0;
    max-width: 125%
}

.b-c-img-bg,
.back-hero-img {
    background-size: cover;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center
}

.b-c-img-bg {
    width: 100%
}

#blog-content p {
    font-weight: 400;
    font-size: 20px;
    color: var(--black)
}

.b-c-flex {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    margin-bottom: 66px
}

.b-c-flex .b-c-img {
    width: 50%;
    height: auto;
    margin: unset
}

.b-c-tex {
    margin-top: -13px;
    width: 45%
}

.b-span {
    font-weight: 700;
    font-size: 32px;
    line-height: 52px;
    margin: 57px 0 84px;
    display: block
}

.share {
    margin-top: 111px
}

.share .green-line {
    top: -50px
}

.s-links a {
    margin-left: 30px
}

section#blog-content {
    position: relative;
    padding-bottom: 77px
}

#blog-content::before {
    position: absolute;
    content: '';
    bottom: 0;
    width: 100%;
    height: 63.5%
}

#contac {
    margin-bottom: 200px
}

.contact-flex {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap
}

.c-f-row,
.c-i-row a {
    display: block;
    position: relative
}

.contact-form {
    position: relative;
    width: 69%
}

.c-info {
    position: relative;
    width: 21%
}

.c-i-row {
    position: relative;
    margin-bottom: 48px
}

.c-i-row a {
    width: fit-content
}

.c-i-row .row:first-of-type {
    color: var(--green);
    font-weight: 700;
    font-size: 20px;
    line-height: 16px
}

.c-i-row .row:nth-of-type(2) {
    color: var(--gray-s-2);
    font-weight: 300;
    font-size: 18px;
    line-height: 32px;
    margin-top: 13px
}

.c-f-row {
    margin-bottom: 37px;
    cursor: pointer
}

.c-f-row input {
    width: 100%;
    border: none;
    font-weight: 300;
    font-size: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    font-family: 'Noto Sans SC', sans-serif;
    min-height: 60px
}

.c-f-row.active input {
    background-color: rgba(4, 175, 0, .06)
}

.c-f-row label {
    position: relative;
    font-family: Noto Sans SC;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    transition: .5s;
    color: var(--black);
    line-height: 26px;
    margin-bottom: -65px
}

.c-s-input input,
.contact-form button,
.select-content span,
.send-proposal form button {
    font-family: 'Noto Sans SC', sans-serif
}

.c-f-row::before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    background: #b4b4b4;
    width: 100%;
    height: 1px;
    transition: .5s
}

.err-s {
    position: absolute;
    bottom: -24px;
    right: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #c70000;
    opacity: 0;
    transition: .3s
}

.c-f-row.err::before {
    background-color: #c70000
}

.c-f-flex {
    position: relative;
    display: flex;
    flex-flow: wrap;
    width: 100%;
    justify-content: space-between;
    z-index: 3
}

.c-f-flex:nth-of-type(2) {
    z-index: 2
}

.c-f-row.active .letter-effect-h {
    transform: translateY(-42px) scale(.7) translateX(-20%)
}

.c-f-flex .c-f-row:nth-of-type(2) {
    width: 36%
}

#products-view-contact .s-b-i-back {
    box-shadow: 0 0 80px rgba(0, 0, 0, .06)
}

#products-view-contact .p-v-container {
    justify-content: space-between;
    margin-top: 30px
}

#products-view-contact .s-b-item {
    margin: unset
}

#products-view-contact .button {
    position: absolute;
    top: 50px;
    right: 0
}

#products-view-contact::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 30%;
    bottom: -100px;
    left: 0;
    background-color: var(--gray-back-2)
}

.select-content {
    position: absolute;
    background-color: #f0faef;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 4px;
    padding: 20px;
    max-height: 300px;
    z-index: -1;
    overflow: auto;
    opacity: 0;
    transition: .4s;
    transform: translateY(100%)
}

.select-content.active {
    z-index: 1;
    opacity: 1;
    pointer-events: all;
    transition-delay: all .3s cubic-bezier(.86, 0, .07, 1)
}

.select-content span {
    display: block;
    cursor: pointer;
    font-size: 20px;
    line-height: 30px;
    transition: .3s;
    padding: 8px;
    font-weight: 200
}

.select-content span:hover {
    color: var(--green);
    transform: translateX(15px)
}

.row-select svg {
    position: absolute;
    top: 20px;
    right: 20px;
    transition: .4s cubic-bezier(.86, 0, .07, 1)
}

.row-select.active svg {
    top: 24px
}

.row-select svg.selected {
    transform: rotate(180deg)
}

.contact-form button {
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    margin-top: 60px;
    min-width: 155px;
    text-align: center;
    border-color: unset;
    appearance: unset;
    border-image: unset;
    border-style: unset
}

.contact-form button div {
    justify-content: center
}

#products-view-contact {
    position: relative;
    padding-bottom: 130px
}

.c-i-row .row a::after {
    background: var(--gray-s-2)
}

.back-hero-img {
    width: 100%
}

.back-hero-img-cont {
    position: absolute;
    width: 813px;
    height: 504px;
    top: 0;
    right: -8.1%
}

.c-tittle span {
    font-style: normal;
    font-weight: 700;
    color: var(--green);
    font-size: 62px;
    line-height: 76px
}

.c-tittle .row {
    padding-bottom: 4px;
    margin-top: -4px
}

.about-arrowimg svg.mobile {
    position: absolute;
    top: 65%;
    left: 14%;
    z-index: 2
}

.c-s-item {
    position: relative;
    text-align: center;
    width: fit-content
}

#hero.clients {
    padding-bottom: 198px
}

.c-tittle {
    margin-top: 120px;
    text-align: center
}

#clients {
    position: relative;
    margin-bottom: 190px
}

#clients .bg-text {
    right: 0;
    top: -40px
}

.c-slide.swiper-wrapper {
    justify-content: space-between;
    flex-flow: wrap
}

.swiper-wrapper {
    gap: 15px
}

.c-s-item:first-of-type {
    margin-bottom: 45px
}

.modal-p {
    position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    top: 0;
    left: 0;
    transition: .4s 2.5s;
    z-index: 100
}

.modal-p.active {
    opacity: 1;
    pointer-events: all;
    transition-delay: 0s
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .3s .3s
}

.modal-p.active .modal-overlay {
    background: rgba(0, 0, 0, .3);
    transition-delay: 0s
}

.modal-container {
    position: absolute;
    max-width: 714px;
    width: 100%;
    background-color: #fff;
    top: 30%;
    margin: 0 auto;
    right: 0;
    left: 0;
    padding: 42px 42px 54px;
    box-shadow: 0 0 60px rgba(0, 0, 0, .14);
    border-radius: 4px
}

.m-content,
.m-download,
.m-download span,
.m-img,
.modal {
    position: relative
}

.c-s-options,
.send-proposal form {
    box-shadow: 0 0 24px rgba(133, 133, 133, .14)
}

.modal {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap
}

.m-img {
    width: 50.2%
}

.m-content {
    width: 49.8%
}

.m-content>span:first-of-type {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--green);
    display: block;
    margin-bottom: 19px
}

.m-content>span:nth-of-type(2) {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: var(--black);
    display: block;
    margin-bottom: 19px
}

.m-content>span:nth-of-type(3) {
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    display: block;
    color: var(--gray-s-3);
    margin-bottom: 24px
}

.m-content>span:nth-of-type(4),
.m-download span {
    line-height: 20px;
    width: fit-content;
    display: block;
    font-weight: 500;
    font-style: normal
}

.m-content>span:nth-of-type(4) {
    font-size: 16px;
    border: 1px solid var(--green);
    border-radius: 6px;
    color: var(--green);
    padding: 14px;
    margin-bottom: 40px
}

.m-download span {
    font-size: 14px;
    letter-spacing: 7px;
    color: var(--green)
}

.c-s-detail-edit,
.c-s-detail-edit strong {
    font-weight: 400 !important
}

.m-download {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 180px
}

.m-i-bg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.m-img-container {
    position: absolute;
    width: 334px;
    height: 573px;
    bottom: -89px;
    left: -40px
}

img.s-i-img.custom-img {
    margin-top: 47px;
    margin-left: -15px;
    max-width: 110%
}

.m-close {
    position: absolute;
    top: -13px;
    right: -17px;
    transition: .3s;
    z-index: 3;
    cursor: pointer
}

.m-close svg,
.m-close svg path {
    transition: .5s
}

.m-close:hover svg path {
    fill: var(--black)
}

#calculator-steps {
    padding-top: 120px;
    padding-bottom: 100px
}

.calculator-step-jc .c-s-title {
    justify-content: unset !important
}

.calculator-layout {
    position: relative;
    z-index: 2
}

.calculator-layout .dots {
    position: absolute;
    transform: rotate(0);
    top: 0;
    left: initial;
    display: flex;
    height: inherit;
    min-width: initial;
    align-items: center;
    right: 10%;
    pointer-events: none
}

.calculator-layout .dots .d-text {
    position: relative;
    top: 0;
    left: 0;
    min-width: initial;
    width: 120px;
    height: 10px
}

.calculator-layout .dots .d-text p {
    white-space: nowrap;
    color: #323232;
    margin-left: 0
}

.calculator-step {
    position: relative;
    display: block;
    width: 100%;
    pointer-events: none;
    min-height: 86vh
}

.calculator-step.is-inview {
    pointer-events: auto
}

.calculator-step.hide {
    opacity: 0;
    transition: .3s;
    transform: translate(0, 0) !important
}

.calculator-step .c-s-title {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 450px);
    position: relative;
    z-index: 1
}

.calculator-step .c-s-title .c-s-number {
    font-size: 32px;
    color: var(--green);
    width: 85px;
    background: #fff
}

.calculator-step .c-s-title span {
    font-size: 28px;
    line-height: 46px;
    font-weight: 500;
    max-width: 600px;
    margin-top: -4px;
    background: #fff
}

sup {
    font-size: 18px;
    transform: translateY(-10px);
    margin-left: 5px
}

.c-s-detail-edit strong {
    text-transform: capitalize
}

.calculator-step .c-s-left {
    position: relative;
    width: calc(100% - 450px)
}

#c-s-1.active::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, #fff, #fff, transparent);
    z-index: 1;
    top: 0
}

#c-s-1.active::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 70%;
    background: linear-gradient(-95deg, #fff, #fff, transparent, transparent);
    top: 0;
    right: -80px;
    z-index: 0
}

.calculator-step .c-s-right {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 100px;
    min-height: 500px;
    margin-right: 10%;
    z-index: 5
}

.c-s-right-height {
    height: fit-content !important
}

.calculator-step .c-s-left .map img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: .5s
}

.calculator-step .c-s-left .map {
    transition: .7s cubic-bezier(.86, 0, .07, 1)
}

.c-s-options {
    position: relative;
    background: #fff;
    border-radius: 4px;
    padding: 36px 25px
}

.c-s-options .c-s-options-buttons {
    width: 100%;
    position: relative;
    flex-wrap: wrap;
    margin-bottom: -15px
}

.c-s-options .c-s-options-buttons .c-s-button {
    display: block;
    width: 100%;
    line-height: 37px;
    border: solid 1px var(--green);
    border-radius: 100px;
    margin-bottom: 15px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    transition: .3s
}

.c-s-options .c-s-options-buttons.two .c-s-button {
    width: 47%
}

.c-s-detail>span:hover,
.c-s-options .c-s-options-buttons .c-s-button.active,
.c-s-options .c-s-options-buttons .c-s-button:hover {
    background: var(--green);
    color: #fff
}

.c-s-right .c-s-prev-next {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%
}

.c-s-right .c-s-prev-next .hidden {
    opacity: 0 !important;
    pointer-events: none
}

.c-s-right .c-s-prev-next>div {
    transition: .3s;
    pointer-events: auto;
    cursor: pointer
}

.c-s-right .c-s-prev-next>div span {
    font-size: 16px;
    text-transform: uppercase;
    color: #bcbcbc;
    letter-spacing: 0;
    margin-left: 10px;
    transition: .3s
}

.c-s-right .c-s-prev-next .c-s-next span {
    margin-left: 0;
    margin-right: 8px
}

.c-s-right .c-s-prev-next div:not(.disabled) svg * {
    fill: #fff;
    transition: .3s .3s
}

.button svg {
    position: relative;
    z-index: 5
}

.button:hover svg path {
    fill: var(--green) !important
}

.c-s-right .c-s-prev-next>div:not(.disabled) span {
    color: #323232
}

.c-s-prev-next .button {
    padding: 9px 33px
}

.button svg path {
    fill: #c4c4c4
}

.c-s-prev-next .button:first-of-type {
    border-radius: 5px 100px
}

.map .showcase-cta__button__pulse {
    width: 25px;
    height: 25px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding-top: 4px
}

.c-s-input::after,
.calculator-step p a::after {
    content: '';
    position: absolute;
    left: 0;
    margin: 0 auto;
    height: 1px;
    background: var(--green);
    bottom: 0;
    right: 0
}

.map .showcase-cta__button-inner:first-of-type {
    top: 14%;
    left: 9%
}

.map .showcase-cta__button-inner:nth-of-type(2) {
    top: 16%;
    left: 47%
}

.map .showcase-cta__button-inner:nth-of-type(3) {
    top: 40%;
    left: 59%
}

.map .showcase-cta__button-inner:nth-of-type(4) {
    top: 47%;
    left: 49%
}

.map .showcase-cta__button-inner:nth-of-type(5) {
    top: 39%;
    left: 11%
}

.map .showcase-cta__button-inner:nth-of-type(6) {
    top: 53%;
    left: 38%
}

.map .showcase-cta__button-inner:nth-of-type(7) {
    top: 63%;
    left: 24%
}

#c-s-1[data-value="a"] .map .showcase-cta__button-inner:first-of-type,
#c-s-1[data-value="a"] .map img#map-a,
#c-s-1[data-value="b"] .map .showcase-cta__button-inner:nth-of-type(2),
#c-s-1[data-value="b"] .map img#map-b,
#c-s-1[data-value="c"] .map .showcase-cta__button-inner:nth-of-type(3),
#c-s-1[data-value="c"] .map img#map-c,
#c-s-1[data-value="d"] .map .showcase-cta__button-inner:nth-of-type(4),
#c-s-1[data-value="d"] .map img#map-d,
#c-s-1[data-value="e"] .map .showcase-cta__button-inner:nth-of-type(5),
#c-s-1[data-value="e"] .map img#map-e,
#c-s-1[data-value="f"] .map .showcase-cta__button-inner:nth-of-type(6),
#c-s-1[data-value="f"] .map img#map-f,
#c-s-1[data-value="g"] .map .showcase-cta__button-inner:nth-of-type(7),
#c-s-1[data-value="g"] .map img#map-g,
.carousel-item:first-of-type {
    opacity: 1
}

#c-s-1[data-value] .map .showcase-cta__button-inner,
.c-prod.disable {
    opacity: .5
}

#c-s-1[data-value="a"] .map {
    transform: scale(1.8) translate(20%, 20%)
}

#c-s-1[data-value="b"] .map {
    transform: scale(1.5) translate(2%, 10%)
}

#c-s-1[data-value="c"] .map {
    transform: scale(1.5) translateY(8%)
}

#c-s-1[data-value="d"] .map {
    transform: scale(1.2)
}

#c-s-1[data-value="e"] .map {
    transform: scale(1.5) translate(20%, -5%)
}

#c-s-1[data-value="f"] .map {
    transform: scale(1.5) translate(17%, -12%)
}

#c-s-1[data-value="g"] .map {
    transform: scale(1.6) translate(20%, -10%)
}

#calculator-steps::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: #fff;
    z-index: 2
}

#c-s-2 .c-s-left img {
    position: absolute;
    top: 25%;
    transform: scale(1.3);
    right: 26%
}

.c-s-input input {
    border: none;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 26px;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 15px
}

.c-prod,
.c-s-drag-container {
    box-shadow: 0 0 80px rgba(0, 0, 0, .08);
    border-radius: 4px;
    position: relative
}

.c-s-input input::placeholder {
    color: #d1d1d1
}

.calculator-step p {
    font-size: 12px;
    line-height: 22px;
    color: #a0a0a0
}

.calculator-step .c-s-options+p {
    margin-top: 35px
}

.calculator-step p a {
    color: var(--green);
    font-weight: 700;
    position: relative
}

.calculator-step p a::after {
    width: 100%;
    transition: .3s
}

.calculator-step p a:hover::after {
    width: 0
}

.c-s-input::after {
    width: 0;
    transition: .4s
}

.c-s-input.active::after {
    width: 100%
}

.usage-by-month {
    flex-wrap: wrap;
    margin-bottom: 35px;
    position: relative;
    max-width: 660px
}

.c-s-left h6 {
    font-size: 18px;
    color: #323232;
    font-weight: 700;
    margin-top: 95px;
    margin-bottom: 25px
}

.usage-month {
    position: relative;
    width: 16.6%;
    text-align: center;
    padding: 20px;
    border-bottom: 1px solid #d6d6d6;
    border-right: 1px solid #d6d6d6
}

.usage-month strong {
    font-size: 22px;
    display: block;
    color: #939393;
    font-weight: 400;
    margin-bottom: 15px
}

.usage-month span strong {
    font-size: 20px;
    color: #939393;
    margin-bottom: 0;
    margin-right: 1px
}

.usage-month span {
    font-size: 12px;
    color: #939393
}

.noUi-connect,
.usage-month.active {
    background: var(--green)
}

.usage-by-month::after,
.usage-by-month::before {
    position: absolute;
    background: #d6d6d6;
    content: '';
    top: 0;
    left: 0
}

.usage-month.active * {
    color: #fff !important
}

.usage-by-month::before {
    width: 1px;
    height: 100%
}

.usage-by-month::after {
    width: calc(100% - 3px);
    height: 1px
}

.c-s-options.c-s-green-alert {
    background: var(--green);
    color: #fff;
    font-size: 18px;
    line-height: 28px;
    padding: 35px
}

#c-s-3 .c-s-left {
    padding-left: 85px
}

#c-s-6 .c-s-right,
#c-s-7 .c-s-right {
    justify-content: unset !important;
    padding-top: 48px
}

.c-prod-flex {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center
}

.c-prod {
    width: 45%;
    max-width: 292px;
    padding: 0 33px 36px;
    margin: 140px 12px 0;
    cursor: pointer;
    transition: .35s
}

.c-prod img {
    position: relative;
    display: block;
    margin-top: -140px;
    margin-bottom: 5px
}

.c-prod span {
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    color: var(--green)
}

.c-prod p {
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
    margin-top: 16px
}

.c-s-drag-container {
    display: block;
    max-width: 608px;
    text-align: center;
    padding: 76px 50px 95px;
    margin-top: 46px;
    margin-left: 85px
}

.c-s-drag-container span {
    font-style: normal;
    font-weight: 500;
    font-size: 96.2903px;
    line-height: 65px;
    color: var(--green);
    margin-bottom: 76px;
    display: block
}

.noUi-horizontal .noUi-handle {
    border-radius: 50%;
    width: 31px;
    height: 31px;
    background: #fff;
    box-shadow: 0 0 14px rgba(0, 0, 0, .1);
    border: unset;
    top: -13px
}

.noUi-target {
    border: unset;
    box-shadow: unset;
    background: #d8d8d8;
    height: 4px
}

#drag-porcent::after {
    position: relative;
    content: '%';
    font-size: 64px;
    font-weight: 400
}

#drag-hours::after {
    position: relative;
    content: 'hs.';
    font-size: 64px;
    font-weight: 400
}

.drag-1 .noUi-value::after {
    position: relative;
    content: '%'
}

.drag-2 .noUi-value::after {
    position: relative;
    content: 'hs'
}

.c-s-proposal {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 41px
}

.c-s-p-item {
    position: relative;
    width: 25%;
    max-width: 187px;
    box-shadow: 0 0 80px rgba(0, 0, 0, .08);
    border-radius: 4px;
    text-align: center;
    padding-bottom: 35px;
    margin-top: 60px
}

.gen-recomendation,
.standard-alt-card {
    box-shadow: 0 4px 80px rgba(0, 0, 0, .06)
}

.c-s-p-item img {
    position: relative;
    display: block;
    margin: -60px auto 15px
}

.c-s-p-item span {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: var(--green)
}

.proposal-title,
.proposal-title-2,
.system-req>span {
    font-weight: 500;
    line-height: 16px
}

.proposal-title {
    font-size: 22px;
    color: var(--green);
    margin-bottom: 4rem
}

.proposal-title-2 {
    font-size: 22px;
    color: var(--green);
    margin-bottom: 3rem
}

.send-proposal {
    position: relative;
    margin-top: 30px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px
}

.send-proposal form {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 4px;
    padding: 14px 25px
}

.gen-info p:before,
.s-r-row>span {
    width: 6px;
    background: var(--green)
}

.send-proposal form button {
    max-height: unset;
    border: unset;
    padding: 4px 32px
}

#c-s-8 .c-s-left {
    padding-left: 0;
    padding-right: 48px;
    width: calc(100% - 268px);
    padding-top: 35px
}

#c-s-8 .c-s-right {
    width: 268px;
    flex-direction: unset;
    margin-right: 0;
    padding-top: 35px;
    display: block
}

.system-req {
    position: relative;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 30px 29px
}

.system-req>span {
    font-size: 18px;
    margin-bottom: 42px;
    color: var(--black);
    display: block;
    transition: .4s
}

.s-r-row {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 20px
}

.s-r-row:last-child,
.send-proposal .c-f-row {
    margin-bottom: 0
}

.s-r-row>span {
    height: 6px;
    border-radius: 50%;
    margin-top: 7px
}

.s-r-row>p {
    font-size: 12px;
    line-height: 18px;
    color: var(--black);
    max-width: 190px;
    margin-left: 5px
}

.system-req.roof-fit {
    margin-bottom: 20px
}

.system-req.roof-fit .roof-status {
    position: relative;
    font-size: 12px;
    background: #04af00;
    width: 100%;
    line-height: 48px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    margin-top: -25px
}

.system-req.roof-fit.s-1 .roof-status {
    background: #fd0;
    color: #000;
    padding: 10px 30px;
    line-height: 20px;
    margin-top: -25px
}

.system-req.roof-fit .roof-levels span:nth-child(3)::before,
.system-req.roof-fit.s-2 .roof-status {
    background: #e80000
}

.system-req.roof-fit .roof-status::before {
    content: 'Acceptable dimension'
}

.system-req.roof-fit.s-1 .roof-status::before {
    content: 'Critical area to be revised on site'
}

.system-req.roof-fit.s-2 .roof-status::before {
    content: 'Insufficient surface'
}

.system-req.roof-fit .roof-levels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    color: gray;
    margin-top: 15px
}

.system-req.roof-fit .roof-levels span::before {
    content: '';
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #04af00;
    display: inline-block;
    margin-right: 4px
}

.system-req.roof-fit .roof-levels span:nth-child(2)::before {
    background: #fd0
}

.send-proposal form input {
    border: unset;
    border-bottom: 1px solid #b4b4b4;
    min-width: 292px;
    padding-bottom: 0;
    min-height: 29px
}

.c-s-detail {
    position: relative;
    max-width: 714px;
    min-width: 580px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 6px 15px;
    flex-flow: wrap
}

.c-s-detail>span {
    font-style: normal;
    font-weight: 400;
    font-size: 12px !important;
    line-height: 17px;
    color: #838383;
    line-height: unset !important;
    border: 1px solid #e7e7e7;
    border-radius: 64px;
    padding: 7px 12px;
    min-width: fit-content;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    transition: .4s;
    cursor: pointer
}

.gen-warning,
.p-s-content,
.st5-pr,
.standard-alt-card {
    border-radius: 4px
}

.c-s-detail p {
    font-family: Noto Sans SC;
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
    color: #838383;
    max-width: 434px
}

.c-s-detail a,
.send-proposal input,
.send-proposal label {
    font-size: 14px
}

.c-s-detail p span {
    color: var(--green);
    font-size: 10px !important;
    line-height: 16px !important;
    font-weight: 700;
    margin: unset
}

.c-s-detail a {
    position: relative;
    display: flex;
    line-height: 22px;
    color: var(--green);
    align-items: center;
    text-decoration: underline;
    margin-left: 53px
}

.gen-qty,
.generation-block,
.standard-alt-qty {
    flex-direction: column;
    display: flex
}

.c-s-detail a svg {
    margin-right: 4px
}

.disabled.button .line span div {
    color: #c4c4c4
}

.generation-block {
    padding-bottom: 3rem;
    border-bottom: 1px solid #e7e7e7
}

.gen-recomendation {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #fff;
    border-radius: 4px;
    padding: 20px
}

.gen-qty-t {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -.5px;
    color: #a8a8a8
}

.gen-info h4,
.gen-qty-n,
.gen-qty-x,
.gen-warning-p {
    color: var(--green)
}

.gen-qty-x {
    font-size: 16px;
    line-height: 16px
}

.gen-qty-n {
    font-size: 45px;
    line-height: 62px;
    letter-spacing: -3px
}

.gen-info {
    max-width: 200px;
    width: 100%
}

.gen-info h4 {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 13px
}

.gen-btn .under-line,
.gen-info p {
    font-size: 12px;
    line-height: 20px;
    position: relative
}

.gen-info p {
    font-weight: 400;
    color: var(--black);
    padding-left: 14px
}

.gen-info p:before {
    content: '';
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 50%;
    transform: unset;
    top: 8px
}

span.c-s-detail-edit {
    padding: 12px
}

.gen-img {
    position: relative;
    width: 200px;
    pointer-events: none
}

.gen-img img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%)
}

.gen-more-warning {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end
}

.gen-btn .under-line {
    display: block;
    letter-spacing: 7px;
    color: var(--green);
    margin: 0 0 25px;
    transition: .3s;
    width: fit-content;
    cursor: pointer
}

.gen-warning {
    background: #e6ffe6;
    padding: 4px
}

.cookies,
.p-s-content,
.st5-pr {
    background: #fff
}

.gen-warning-p {
    font-size: 10px;
    line-height: 16px
}

.standard-alt {
    width: 50%;
    padding-right: 20px;
    border-right: 1px solid #e7e7e7
}

.all-in-one {
    width: 50%;
    padding-left: 20px
}

.standard-of-title {
    font-weight: 400;
    font-size: 18px;
    line-height: 16px;
    color: gray;
    margin-bottom: 3.2rem;
    display: block
}

.standard-alt-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #fff;
    padding: 20px;
    margin-bottom: 2rem
}

.standard-alt-img {
    position: relative;
    width: 120px
}

.standard-alt-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -40%) scale(1.2)
}

.standard-btn {
    margin-top: 25px
}

.standard-btn .under-line {
    margin-bottom: 0 !important
}

.privacy-terms p {
    margin-bottom: 2rem;
    font-weight: 200;
    font-size: 18px;
    line-height: 1.6;
    color: var(--gray-s-3)
}

.h-title h5 {
    font-size: 22px;
    line-height: 32px
}

.st5-pr {
    margin: 117px 12px 0;
    box-shadow: 0 0 80px rgba(0, 0, 0, .08);
    padding: 100px 0
}

.p-s-content .button,
.st5-pr img {
    margin: 0 auto
}

.f-s-colum:nth-of-type(3) {
    margin: 0 10.5%
}

.terms-title::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    height: 2px;
    width: 80px;
    background: var(--green)
}

div#c-s-8 {
    max-height: 100vh
}

div#c-s-8.active {
    max-height: unset
}

.cookies {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: 1s;
    box-shadow: 0 0 10px 6px #0000000d
}

.cookies-container {
    display: flex;
    padding: 22px 0;
    align-items: center
}

.cookies-button {
    width: 27%;
    margin-left: 8%;
    display: flex;
    justify-content: space-around
}

.cookies.hide {
    opacity: 0;
    bottom: -100%
}

.cookies-text p {
    font-size: 16px;
    line-height: 24px
}

.cookies-text p a,
.f-logo a {
    color: var(--green);
    text-decoration: underline
}

.f-links.prod-alig {
    position: absolute;
    bottom: -130px;
    color: #c4c4c4;
    z-index: 10
}

.contact-form button .line {
    width: fit-content;
    margin: 0 auto
}

h4.night-g.terms-title {
    padding-bottom: 50px;
    margin-bottom: 30px
}

.privacy-terms p:last-of-type {
    margin-bottom: 95px
}

.privacy-terms .h-title h5 {
    margin-bottom: 6px
}

.popup-send {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    transition: .5s;
    opacity: 0
}

.popup-send .overlay {
    background: rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%;
    position: relative;
    display: block
}

.p-s-content {
    position: absolute;
    z-index: 6;
    margin: 0 auto;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    max-width: 600px;
    width: 100%;
    box-shadow: 0 0 60px rgba(0, 0, 0, .14);
    padding: 85px 60px
}

.p-s-content>span {
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer
}

.p-s-content>p {
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 46px;
    text-align: center;
    color: #323232;
    margin-bottom: 40px
}

.popup-send.active {
    opacity: 1;
    pointer-events: all
}

.d-n-all {
    display: none !important
}

.c-s-last.d-f.ai-c.button {
    width: 100%;
    justify-content: space-around
}

video.video-mob {
    position: relative;
    width: 100%
}

.contact-ok-msj {
    margin-bottom: 80px !important;
    margin-top: -50px
}

@media screen and (min-width:900px) {

    .button:hover,
    .nk-link:hover {
        color: var(--green)
    }

    .button:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, .2)
    }

    .c-s-hide {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between
    }

    a.h-o h4 {
        font-size: 3vw
    }

    .menu-background.about span:first-of-type,
    .menu-background.calculator span:nth-of-type(2),
    .menu-background.contact span:nth-of-type(5),
    .menu-background.education span:nth-of-type(4),
    .menu-background.products span:nth-of-type(3),
    .menu-background.social span:nth-of-type(6),
    .slide-arrows svg:hover {
        opacity: 1
    }

    .f-social svg:hover path {
        fill: var(--green) !important
    }

    .s-links a:hover svg path,
    .s-t-s-item span:nth-of-type(2):hover svg path,
    a.s-t-s-item:hover span:nth-of-type(2) svg path {
        fill: var(--green)
    }

    .s-t-s-item span:nth-of-type(2):hover svg path:nth-of-type(2),
    a.s-t-s-item:hover span:nth-of-type(2) svg path:nth-of-type(2) {
        fill: #fff
    }

    .under-line:after {
        position: absolute;
        content: "";
        width: 0%;
        transition: .3s;
        right: 0;
        left: 0;
        margin: 0 auto;
        bottom: 0;
        height: 1px;
        background-color: var(--green)
    }

    .under-line:hover:after {
        width: 100%
    }

    .static-item:hover {
        z-index: 50
    }

    .s-b-item:hover .s-b-i-desc span.under-line::after,
    .static-item:hover .s-b-i-desc span:after,
    a.s-t-s-item:hover .under-line:after {
        width: 95%;
        left: -6px
    }

    a.s-t-s-item:hover .item-img {
        background-size: 115%
    }

    .under-line {
        width: fit-content
    }

    .down-arrow:hover svg path:nth-of-type(2) {
        fill: #fff;
        animation: 1s arrowdown
    }

    #hero .down-arrow:hover::before,
    .button:hover::before {
        height: 100%
    }

    .s-b-item:hover .s-b-i-back {
        box-shadow: 0 0 80px rgb(0 0 0 .14)
    }

    .button:hover span {
        --m: calc((var(--font-size) * -1) - 5px)
    }

    .button.reverse:hover span {
        --m: calc(var(--font-size))
    }

    .toggle-nav:hover span {
        width: 34px;
        border-radius: 1px 12px
    }

    .static-item:hover img {
        transform: scale(1.1) translateY(-20px)
    }

    .s-b-item:hover img {
        transform: scale(1.1) translateY(-5%)
    }

    .s-b-item:hover .s-b-i-desc {
        transform: translateY(24%);
        padding-bottom: 30px
    }

    .static-item:hover .s-b-i-desc {
        transform: translateY(-3%);
        padding-bottom: 30px
    }

    .s-b-item:hover .s-b-i-desc p,
    .static-item:hover .s-b-i-desc p {
        opacity: 1;
        transition: .4s .3s
    }

    .s-b-item:hover .s-b-i-desc span,
    .static-item:hover .s-b-i-desc span {
        opacity: 1;
        transition: .6s .5s
    }

    .static-item:hover .s-b-i-desc span {
        transition-delay: .3s
    }

    .toggle-nav.active:hover span {
        background-color: var(--black)
    }

    .toggle-nav.active {
        transition: .3s
    }

    .s-t-s-container:hover {
        box-shadow: 20px 25px 15px rgb(0 0 0 / 5%)
    }
}

@media screen and (max-width:1400px) {
    h1 {
        font-weight: 700;
        font-size: 92px;
        line-height: 81px;
        letter-spacing: -5.95122px
    }

    .h-desc .button {
        margin-top: 50px
    }

    h1 .row span {
        display: block;
        margin-bottom: 23px;
        margin-top: 0
    }
}

@media screen and (max-width:1360px) {
    .send-proposal form {
        display: block;
        text-align: center
    }

    .send-proposal form .button {
        margin: 0 auto
    }

    .send-proposal .c-f-row {
        margin: 40px 0
    }
}

@media screen and (max-width:1280px) {

    #c-s-8 .d-f.jc-sb .c-s-right .system-req,
    .back-hero-cont {
        width: 100%
    }

    .our-products .w-r-margin {
        display: none
    }

    .our-products .w-r-content {
        width: 89.5%;
        right: 0;
        left: 0;
        margin: 0 auto
    }

    #slide-baterry {
        margin-left: unset
    }

    .s-content {
        overflow: initial
    }

    #c-s-8 .c-s-title {
        display: block
    }

    #c-s-8 .c-s-title .c-s-all-info {
        margin-bottom: 27px
    }

    #c-s-8 .c-s-title .c-s-detail {
        padding-left: 0
    }

    #c-s-8 .d-f.jc-sb {
        width: 100%;
        flex-flow: wrap
    }

    #c-s-8 .d-f.jc-sb>div {
        width: 100%;
        padding-right: 0
    }

    #c-s-8 .d-f.jc-sb .c-s-left {
        order: 1
    }

    #c-s-8 .d-f.jc-sb .c-s-right .system-req .s-r-hide {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between
    }

    #c-s-8 .d-f.jc-sb .c-s-right .system-req .s-r-hide .s-r-row {
        width: 30%
    }

    #c-s-8 .c-s-right {
        padding-left: 0;
        padding-right: 0
    }

    #hero {
        padding-top: 15vh
    }

    #hero .down-arrow::after {
        background: unset
    }

    .h-case-study {
        max-width: 100%;
        margin: unset
    }

    .w-r-margin {
        width: 10%
    }

    .w-r-content {
        width: 90%
    }

    #our-products .w-r-content .slide-arrows {
        margin-left: 5.3%
    }

    .calculator {
        max-width: unset;
        padding: 50px
    }

    .back-hero-img-cont {
        width: 513px
    }

    .our-p-flex .s-t-d {
        width: 100%;
        max-width: unset
    }

    .our-p-flex h4 {
        width: 100%;
        margin-bottom: 20px
    }

    #slide-switch {
        top: -120px
    }
}

@media screen and (max-width:1100px) {
    .h-desc {
        position: relative;
        top: unset;
        right: unset;
        max-width: unset
    }

    .h-desc .button {
        margin-top: unset;
        position: absolute;
        bottom: 0;
        right: 0
    }

    .c-buttons,
    .calculator {
        display: block
    }

    .c-logos {
        width: 100%;
        padding: unset;
        margin: 36px 0 30px
    }

    .c-text h4 {
        display: none
    }

    .c-text {
        text-align: center
    }

    .c-buttons .button {
        max-width: 195px;
        margin: 30px auto 0;
        position: relative
    }

    .c-title-mobile.mobile {
        display: inline;
        position: relative;
        width: 100%;
        text-align: center
    }

    .f-sections {
        flex-flow: wrap;
        width: 65%;
        justify-content: flex-end
    }

    .f-s-colum {
        width: 40%
    }

    .back-hero-img-cont {
        width: 400px;
        height: 400px
    }

    h3 {
        font-size: 45px;
        line-height: 66px
    }

    .s-b-i-back {
        height: 266px
    }

    .f-s-colum:nth-of-type(3) {
        margin: unset
    }
}

@media screen and (max-width:900px) {

    .t-b-row p,
    h2 {
        font-style: normal
    }

    .h-desc span,
    .sub-title .normal {
        font-size: 18px
    }

    a.h-o h4,
    h4 {
        font-size: 32px
    }

    .c-info,
    .h-case-study,
    .h-desc,
    .h-title,
    .sub-title {
        text-align: center
    }

    .c-s-proposal,
    .system-req {
        box-shadow: 0 0 24px rgba(133, 133, 133, .14)
    }

    .c-s-detail,
    .send-proposal form input {
        min-width: unset
    }

    #c-s-8 .c-s-right,
    #c-s-8 .c-s-title .c-s-detail {
        padding-left: unset
    }

    body {
        overflow: initial;
        transition: 1s
    }

    #clients .bg-text,
    #hero.blog #arrow-hero,
    #our-products .slide-control:before,
    #stay-inspired .slide-arrows,
    #stay-inspired .w-r-margin,
    .all-in-one,
    .back-hero-img-cont,
    .black .sun-svg svg:first-of-type,
    .c-s-left h6,
    .calculator-layout,
    .desktop,
    .house-products div,
    .menu-background,
    .s-b-i-desc,
    .s-b-i-desc.night-b p,
    .sun-svg svg:nth-of-type(2) {
        display: none
    }

    .mobile {
        display: inline
    }

    h4 {
        line-height: 42px
    }

    h2 {
        font-weight: 700;
        font-size: 48px;
        line-height: 61px;
        letter-spacing: -1.95px
    }

    .h-desc {
        margin-top: 16px
    }

    #hero .down-arrow,
    .h-case-study {
        margin: 0 auto;
        width: fit-content
    }

    .h-desc .button {
        position: relative;
        margin: 42px auto 0;
        left: unset
    }

    .h-case-study {
        display: block
    }

    .h-c-s-colum {
        max-width: 290px !important
    }

    .h-case-study .button {
        margin: 44px auto 0
    }

    #slide-switch {
        position: relative;
        top: unset;
        right: unset;
        margin: 53px auto 0
    }

    .slide {
        margin-bottom: 0;
        height: unset;
        min-height: 346px
    }

    #our-products .w-r-content .button {
        position: relative;
        margin: 0 auto;
        bottom: unset;
        right: unset;
        width: fit-content
    }

    .back-hero-cont {
        top: unset;
        bottom: 0
    }

    .back-hero-cont::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 180px;
        top: 0;
        right: 0;
        background: linear-gradient(180deg, #fff, transparent)
    }

    .h-desc span {
        line-height: 26px
    }

    .s-b-item p,
    .t-b-colum span,
    .t-b-row p {
        font-size: 16px;
        line-height: 24px
    }

    .arrow-container {
        position: relative;
        margin-top: 42px;
        display: none
    }

    #hero .down-arrow {
        position: relative;
        bottom: unset;
        top: unset;
        display: block;
        left: unset
    }

    .h-title .g-number {
        margin-bottom: 14px
    }

    #products-view-contact .slide-control,
    .sub-title h4 {
        margin-top: 15px
    }

    .s-t-d {
        margin-top: 24px
    }

    .s-b-i-back {
        height: 230px;
        top: 90px;
        margin: 0 auto;
        right: 0;
        left: 0
    }

    .s-b-item img {
        width: 142px;
        height: 231px
    }

    .s-b-item p {
        max-width: 80%;
        margin: 0 auto
    }

    .c-s-detail,
    .s-r-row>p {
        max-width: unset
    }

    #calculator {
        margin-top: 75px
    }

    #house .sub-title {
        margin-bottom: 90px
    }

    #house .house-draggable {
        top: 240px
    }

    .tables-mobile.mobile {
        position: relative;
        display: block;
        background: #fff;
        box-shadow: 0 0 60px rgba(0, 0, 0, .06);
        border-radius: 4px;
        margin: -25px auto 35px;
        right: 0;
        left: 0;
        padding: 16px 28px;
        max-width: 334px
    }

    #drag-mobile-bounds {
        position: relative;
        width: 100%;
        display: block
    }

    div#drag-m-line {
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--gray);
        display: block;
        border-radius: 100px;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: 39px;
        z-index: 1
    }

    .black .sun-svg svg:nth-of-type(2),
    .gen-recomendation {
        display: block
    }

    .t-b-colum,
    .t-b-row {
        display: flex;
        position: relative
    }

    div#drag-m-progress {
        background-color: var(--green);
        height: 100%;
        width: 0%
    }

    #drag-mobile-bounds #drag-mobile-handle {
        position: relative;
        display: block;
        height: 65px;
        width: 30px;
        padding-top: 22px;
        z-index: 5
    }

    #drag-mobile-bounds #drag-mobile-handle img {
        width: 65px;
        max-width: initial;
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }

    .t-b-row {
        width: 100%;
        justify-content: space-between;
        margin-bottom: 12px
    }

    .t-b-colum {
        justify-content: space-between;
        width: 50%
    }

    .t-b-row p {
        width: 50%;
        font-weight: 500;
        color: var(--black)
    }

    .t-b-colum span {
        font-weight: 700;
        color: #e80000
    }

    .t-b-colum span:nth-of-type(2) {
        color: var(--green)
    }

    .t-b-row:first-of-type p {
        font-size: 18px;
        font-weight: 400
    }

    .t-b-row:first-of-type {
        margin-bottom: 30px
    }

    .t-b-row:nth-of-type(3) {
        margin-bottom: 24px
    }

    .t-b-row:first-of-type:before,
    .t-b-row:nth-of-type(3):before {
        position: absolute;
        content: '';
        width: 100%;
        height: 1px;
        background: #dfdfdf;
        bottom: -15px;
        right: 0
    }

    .t-b-row:nth-of-type(3):before {
        bottom: -21px
    }

    .t-b-row:first-of-type .t-b-colum {
        padding: 0 12px
    }

    .h-desc .row.mobile span {
        max-width: 345px;
        margin: 0 auto
    }

    .g-number {
        line-height: 20px
    }

    #header-menu {
        position: fixed;
        z-index: 30
    }

    #header {
        z-index: 31
    }

    .h-options {
        display: block;
        margin-top: 105px;
        overflow: auto;
        max-height: 80vh
    }

    #house,
    .slide-control {
        display: flex;
        align-items: center
    }

    #clients,
    #hero.products,
    #house,
    .s-content {
        overflow: hidden
    }

    a.h-o .f-social {
        padding-right: 33px;
        padding-left: 25px
    }

    a.h-o h4 {
        padding: 0 24px;
        margin: 2px 0 14px
    }

    .cookies-button .line,
    a.h-o p {
        font-size: 14px
    }

    a.h-o p {
        font-weight: 400;
        margin-bottom: 0
    }

    .loaded .enter-trigger.is-inview .h-o .delay-5 {
        transition-delay: .4s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-6 {
        transition-delay: .45s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-9 {
        transition-delay: .5s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-10 {
        transition-delay: .55s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-3 {
        transition-delay: .6s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-4 {
        transition-delay: .65s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-7 {
        transition-delay: .7s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-8 {
        transition-delay: .75s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-11 {
        transition-delay: .8s !important
    }

    .loaded .enter-trigger.is-inview .h-o .delay-12 {
        transition-delay: .85s !important
    }

    #house {
        padding-top: 0;
        justify-content: space-between;
        flex-direction: column
    }

    #hero.products #arrow-hero {
        bottom: unset;
        padding: 1px;
        display: none
    }

    .bg-t-logo {
        left: 0;
        right: 0;
        margin: 0 auto;
        width: fit-content
    }

    #hero.products #bg-t-hero {
        right: 0;
        left: 0;
        margin: 0 auto;
        text-align: center
    }

    .static-item {
        width: 31%;
        margin-bottom: 30px
    }

    #products-view-2 {
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 100px
    }

    #hero.products {
        padding-bottom: 130px;
        padding-top: 106px
    }

    .products .h-desc {
        margin-top: 24px;
        margin-bottom: 39px
    }

    #hero.products .down-arrow svg {
        width: 50px;
        margin-bottom: 39px
    }

    #hero.products #bg-t-hero>span {
        width: 100%;
        font-weight: 900;
        font-size: 152px;
        line-height: 242px;
        letter-spacing: -6px
    }

    #products-view::after {
        position: absolute;
        top: 250px;
        right: 0;
        content: '';
        background: var(--green);
        width: 100%;
        height: 65%
    }

    .bg-t-logo span {
        font-weight: 500;
        font-size: 26px;
        line-height: 52px
    }

    #products-view,
    .c-prod img {
        margin-top: -80px
    }

    #products-view-2 .bg-text {
        top: 120px
    }

    #calculator-steps,
    #stay-inspired.products {
        padding-top: 60px
    }

    .p-v-container {
        padding-bottom: 60px
    }

    #products-view-contact .s-b-i-back,
    .c-info,
    .contact-form,
    .cookies-text,
    .house-img .house-day,
    .house-img .house-night,
    .house-products {
        width: 100%
    }

    .contact-form button {
        width: fit-content;
        margin: 45px auto 100px
    }

    #products-view-contact::before {
        height: 70%
    }

    #products-view-contact {
        padding-bottom: 60px;
        margin-bottom: -40px
    }

    #contac {
        margin-bottom: 100px
    }

    #products-view-contact .mobile .button {
        top: unset;
        right: 0;
        margin: 35px auto 0;
        left: 0;
        position: relative;
        width: fit-content;
        display: block
    }

    .c-tittle span {
        font-weight: 400
    }

    .blog .h-title,
    .c-s-detail p,
    span.gen-qty-t.dib {
        text-align: left
    }

    .b-span,
    .blog-title-desc {
        font-size: 21px;
        line-height: 32px
    }

    #blog-content p {
        font-size: 16px;
        line-height: 28px
    }

    .back-hero-cont {
        left: unset
    }

    .c-i-row a,
    .our-p-flex .s-t-d,
    .st5-pr img {
        margin: 0 auto
    }

    .s-b-item {
        margin-left: unset
    }

    #stay-inspired .w-r-content {
        width: 89.5%
    }

    #c-s-4 .c-s-options .c-s-options-buttons,
    #c-s-5 .c-s-options .c-s-options-buttons,
    #stay-inspired .wrapper-r {
        justify-content: space-around
    }

    .slide-control {
        position: relative;
        width: 100%;
        margin-top: 50px
    }

    .s-c-buttons,
    .s-c-dots {
        width: 50%;
        position: relative
    }

    .s-c-dots {
        text-align: right
    }

    .swiper-pagination-bullet {
        background-color: var(--green);
        opacity: 1;
        margin-right: 28px;
        position: relative
    }

    #our-products .slide-control .swiper-pagination-bullet-active,
    .c-s-p-item,
    .system-req {
        background: #fff
    }

    .swiper-pagination-bullet:last-of-type {
        margin-right: 0
    }

    .s-c-buttons svg:nth-of-type(2) {
        margin-left: 28px
    }

    #our-products .slide-control .s-c-buttons svg path {
        fill: #fff
    }

    #our-products .slide-control .swiper-pagination-bullet,
    #our-products .slide-control .swiper-pagination-bullet-active:after {
        border: 1px solid #fff
    }

    #our-products .slide-control {
        margin-top: 0;
        margin-bottom: 38px
    }

    .swiper-pagination-bullet-active:after {
        position: absolute;
        content: '';
        width: 36px;
        height: 36px;
        background: rgba(4, 175, 0, .1);
        border: 1px solid #cfcfcf;
        border-radius: 50%;
        top: -14px;
        left: -14px
    }

    .s-t-s-item span:nth-of-type(2) {
        bottom: 242px
    }

    .slide-control:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 1px;
        background-color: #d1d1d1;
        right: 0;
        left: 0;
        bottom: -50px;
        margin: 0 auto
    }

    .h-options .h-o:nth-of-type(6)>.row {
        margin-top: 32px
    }

    #hero.products #bg-t-hero>span,
    #products-view-2 .bg-text>span,
    .hide-button.c-s.active svg path:nth-of-type(2),
    .system-req.active .hide-button.s-r svg path:nth-of-type(2) {
        opacity: 0
    }

    #hero.contact {
        padding-bottom: 47px
    }

    #products-view-contact .slide-control::before {
        bottom: -140px
    }

    .about-arrowimg .down-arrow {
        display: initial !important;
        bottom: unset !important;
        top: 260px !important;
        left: 120px !important
    }

    .about-arrowimg .back-hero-img-cont {
        position: relative;
        display: block;
        top: unset;
        bottom: unset;
        left: unset;
        width: 80%;
        right: -20%
    }

    p.mobile.c-slide-title {
        width: 100%;
        display: block;
        font-weight: 400;
        font-size: 22px;
        line-height: 48px;
        align-items: center;
        text-align: center;
        color: #b0b0b0;
        margin-bottom: 40px
    }

    #hero.clients {
        padding-bottom: 50px
    }

    #dark-mode {
        right: 0;
        top: 190px
    }

    .calculator-step .c-s-title {
        display: block;
        margin: 0 auto;
        text-align: center;
        width: 100%
    }

    .calculator-step .c-s-title .c-s-number {
        width: auto;
        background: unset;
        font-size: 18px;
        line-height: 16px
    }

    .d-f.jc-sb {
        flex-flow: wrap;
        position: relative;
        bottom: unset
    }

    .calculator-step .c-s-left {
        width: 100%;
        padding-left: 0 !important
    }

    .calculator-step .c-s-right {
        width: 100%;
        margin: 0 auto;
        min-height: unset;
        padding-bottom: 0;
        position: relative
    }

    .calculator-step .c-s-title span {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        display: block;
        margin-top: 2px;
        max-width: unset
    }

    .calculator-layout .dots {
        position: relative;
        top: unset;
        right: unset;
        margin: 0 auto 27px
    }

    #c-s-2 .c-s-left img {
        position: relative;
        top: initial;
        transform: scale(.8);
        margin-top: 0
    }

    .usage-month {
        width: 25%
    }

    .c-prod span {
        font-weight: 500;
        font-size: 16px;
        line-height: 18px
    }

    .c-prod p {
        font-weight: 400;
        font-size: 12px;
        line-height: 20px
    }

    .c-prod {
        text-align: center;
        padding: 0 16px 36px;
        margin: 50px 7px 0;
        width: 47%
    }

    .c-prod-flex {
        margin-bottom: 30px;
        margin-top: 30px
    }

    .c-s-drag-container {
        margin-left: unset;
        margin-bottom: 30px;
        margin-top: unset
    }

    #calculator-steps::before {
        background: 0 0
    }

    #c-s-8 .send-proposal,
    .c-s-options .c-s-options-buttons {
        margin-top: unset
    }

    #c-s-1 .c-s-prev-next {
        margin-bottom: 40px
    }

    div#c-s-6 .calculator-step .c-s-right {
        margin-bottom: 40px !important
    }

    .c-s-options.c-s-green-alert {
        font-size: 14px;
        line-height: 22px;
        padding: 14px
    }

    .c-s-drag-container span {
        font-size: 77px
    }

    .c-s-detail {
        margin: unset;
        margin-top: 36px;
        padding: 11px 26px 11px 15px
    }

    .c-s-hide,
    .c-s-proposal {
        padding-top: 40px
    }

    .c-s-detail p span {
        display: inline !important
    }

    #c-s-8 .c-s-left {
        width: 100%;
        padding: unset
    }

    #c-s-8 .c-s-right {
        margin-bottom: 45px
    }

    div#c-s-8 {
        padding-top: 0 !important
    }

    div#c-s-8.active {
        position: relative !important
    }

    div#c-s-1 {
        position: absolute
    }

    div#c-s-8 .d-f.jc-sb {
        flex-flow: column-reverse;
        padding-bottom: 45px
    }

    .system-req {
        border-radius: 4px;
        border: unset;
        width: 100%
    }

    .s-r-row {
        justify-content: unset;
        margin-bottom: 25px
    }

    .c-s-proposal {
        border-radius: 4px;
        margin-top: 30px;
        display: block;
        padding-bottom: 30px
    }

    .proposal-title {
        position: absolute;
        top: 55px;
        left: 24px
    }

    .c-s-p-item {
        display: flex;
        width: 100%;
        min-width: 90%;
        box-shadow: 0 0 20px rgba(0, 0, 0, .08);
        border-radius: 4px;
        align-items: center;
        margin: 0 auto 30px;
        padding: 10px 20px
    }

    .c-s-p-item img {
        margin: unset;
        max-width: 60px;
        margin-top: -30px
    }

    .c-s-p-item span {
        margin-left: 20px
    }

    .d-n {
        display: none !important
    }

    .hide-button.c-s,
    .hide-button.s-r {
        position: absolute;
        top: 54px;
        right: 27px;
        z-index: 3
    }

    .hide-button.s-r {
        top: 30px
    }

    .c-s-p-item:last-of-type,
    .s-r-row:last-of-type,
    .system-req.active>span {
        margin-bottom: 0
    }

    .hide-button.c-s.active svg path:first-of-type,
    .system-req.active .hide-button.s-r svg path:first-of-type {
        transform: rotate(-45deg);
        transform-origin: center
    }

    .hide-button.c-s svg,
    .system-req .hide-button.s-r svg {
        overflow: unset
    }

    .system-req .hide-button.s-r svg path {
        transition: .4s
    }

    .d-f.jc-sb {
        margin-top: 0
    }

    .c-s-options .c-s-options-buttons.two .c-s-button {
        width: 17%;
        margin-left: 2%
    }

    .c-s-options .c-s-options-buttons {
        justify-content: end
    }

    .c-s-prev-next.d-f.ai-c.jc-sb {
        max-width: 340px;
        margin: 40px auto 0
    }

    .c-s-options {
        padding: 20px;
        margin-top: -10px
    }

    #c-s-3 .c-s-title span {
        margin-bottom: 10px
    }

    .c-s-options .c-s-options-buttons .c-s-button {
        width: 45%
    }

    #c-s-6 .c-s-right,
    #c-s-7 .c-s-right {
        padding-top: 0
    }

    .generation-block span.proposal-title {
        display: block;
        width: 100%;
        position: absolute;
        top: 0
    }

    .gen-recomendation>div {
        display: block;
        max-width: unset
    }

    .gen-img img {
        transform: unset;
        position: relative;
        left: unset
    }

    .gen-img {
        position: absolute;
        top: -50px;
        right: 0;
        width: 170px
    }

    .gen-qty {
        margin-bottom: 45px
    }

    .gen-more-warning {
        margin-top: 35px
    }

    .standard-alt {
        width: 100%;
        border: unset;
        padding-right: unset
    }

    #c-s-8 .c-s-proposal {
        box-shadow: unset;
        margin-top: unset;
        padding-bottom: unset
    }

    #c-s-8 .c-s-proposal .standard-alt-card {
        flex-flow: wrap
    }

    .standard-alt-img {
        position: absolute !important;
        top: 40px;
        right: 0
    }

    #c-s-8 .c-s-proposal .standard-alt-card .gen-info {
        margin-top: 45px;
        max-width: unset;
        width: 100%
    }

    #c-s-8 .d-f.jc-sb .c-s-left {
        order: unset
    }

    #c-s-8 .c-s-title .c-s-all-info {
        text-align: center;
        width: fit-content;
        margin: 0 auto;
        align-items: center;
        display: block
    }

    .generation-block {
        padding-top: 65px
    }

    .gen-info p {
        padding-left: 20px
    }

    .gen-info p:before {
        left: 0
    }

    #c-s-8 .d-f.jc-sb .c-s-right .system-req .s-r-hide .s-r-row {
        width: 48%
    }

    .s-r-row>span {
        min-width: 6px;
        margin-right: 10px
    }

    span.proposal-title-2 {
        margin-bottom: 11px;
        display: block
    }

    div#c-s-5 .d-f.jc-sb {
        margin-top: 25px
    }

    .cookies-container {
        display: block;
        text-align: center
    }

    .cookies-button {
        margin: 20px auto 0;
        justify-content: space-between;
        width: 100%;
        max-width: 300px
    }

    .cookies-text p {
        font-size: 15px;
        line-height: 27px
    }

    .cookies-button .button {
        padding: 10px 42px
    }

    .c-s-item {
        width: 50%
    }

    .st5-pr {
        padding: 50px
    }

    .sun-svg {
        margin: unset
    }

    .s-b-i-desc.night-b {
        transform: unset;
        display: block !important;
        padding-top: 13px
    }

    .s-b-i-desc span {
        opacity: 1
    }

    .s-b-i-desc span:after {
        position: absolute;
        content: "";
        width: 100%;
        transition: .3s;
        right: 0;
        left: 0;
        margin: 0 auto;
        bottom: 0;
        height: 1px;
        background-color: var(--green)
    }

    .s-t-s-container .item-content h5 {
        font-size: 24px
    }

    .p-v-container .s-b-i-desc.night-b {
        margin-top: -32px;
        padding-bottom: 30px
    }

    .system-req.active .hide-button.s-r svg path:nth-of-type(2) {
        opacity: 1;
        transform: rotate(-45deg);
        transform-origin: center
    }

    form#projectForm {
        padding-top: 30px;
        padding-bottom: 30px
    }

    #products-view-contact .s-b-item p {
        min-height: 48px
    }

    #products-view-contact .s-b-item .s-b-i-desc {
        margin-top: -10px
    }

    a.h-o:nth-of-type(2) .row:nth-of-type(2) {
        max-height: 63px !important
    }

    #house .draggable-wrapper {
        position: relative;
        top: 0
    }

    #house .wrapper-big:last-child {
        position: relative;
        bottom: 0;
        padding-bottom: 30px
    }

    #house .wrapper-big:last-child::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #f8f7f2;
        transition: 1s
    }

    .black #house .wrapper-big:last-child::before {
        background: #0f0f0f
    }

    .house-diagonals {
        bottom: 0
    }

    div#house-hour {
        padding: 0 0 0 20px;
        text-align: center;
        top: 275px
    }
}

@media screen and (max-width:720px) {
    h1 {
        font-size: 48px;
        line-height: 67px;
        letter-spacing: -1.95px
    }

    h1 .row span {
        margin-bottom: -1px
    }

    #hero {
        padding-top: 108px
    }

    #stay-inspired .w-r-content,
    .our-products .w-r-content,
    .wrapper,
    .wrapper-big {
        width: 89.5%
    }

    .f-logo,
    .f-s-colum p {
        width: fit-content;
        margin: 0 auto;
        text-align: center
    }

    .contac-l {
        opacity: 0;
        pointer-events: none
    }

    #stay-inspired .w-r-margin,
    .bg-text,
    .f-links.prod-alig,
    .f-s-colum:nth-of-type(5),
    .our-products .w-r-margin {
        display: none
    }

    .f-copy-and-by,
    .f-copy-and-by .f-row .f-links,
    .f-row {
        display: block
    }

    .wrapper-r {
        justify-content: space-around
    }

    .f-flex-content {
        flex-flow: wrap;
        align-items: center
    }

    .f-sections {
        width: 100%;
        align-content: center
    }

    .f-logo p {
        line-height: 28px
    }

    .f-s-colum {
        width: 100%;
        text-align: center;
        margin-top: 63px !important
    }

    .f-s-colum p {
        font-size: 16px
    }

    .b-c-flex .b-c-img,
    .b-c-img,
    .b-c-tex,
    .f-row,
    .s-back {
        width: 100%
    }

    .f-s-colum h5 {
        margin-bottom: 5px
    }

    .f-s-colum .f-social {
        margin: 0 auto;
        max-width: 210px
    }

    .f-social {
        padding-left: 65px
    }

    .f-row {
        text-align: center
    }

    .f-links {
        position: absolute;
        top: -60px;
        margin: 0 auto;
        right: 0;
        left: 0
    }

    .f-copy-and-by>small {
        margin: 0 auto;
        position: relative;
        display: block;
        width: 100%;
        text-align: center
    }

    #hero.products #bg-t-hero,
    #products-view-2 .bg-text {
        display: initial
    }

    .c-tittle span {
        font-size: 45px
    }

    .b-c-img {
        margin: 30px 0
    }

    .b-c-flex .b-c-img {
        height: 530px;
        margin-bottom: 36px
    }

    #hero.blog {
        padding-bottom: 0
    }

    .b-span {
        margin: 36px 0
    }

    .b-c-flex {
        margin-bottom: 36px
    }

    section#blog-content {
        position: relative
    }

    h3 {
        font-size: 32px;
        line-height: 46px
    }

    .h-title .row {
        margin-top: -10px
    }

    .s-back {
        right: initial;
        left: initial;
        height: 450px;
        top: 40px
    }

    #slide-baterry {
        margin-left: unset
    }

    .f-s-colum:first-of-type h5 {
        margin-bottom: 28px
    }

    .f-copy-and-by small {
        font-size: 12px
    }
}

@media screen and (max-width:650px) {

    .m-img,
    .s-i-img {
        display: block
    }

    .p-v-container {
        justify-content: space-between
    }

    .static-item {
        width: 48%;
        margin-bottom: 0;
        margin-right: unset
    }

    .m-content,
    .m-img {
        width: 100%
    }

    .s-i-back p,
    .s-i-img {
        margin: 0 auto;
        right: 0;
        left: 0
    }

    img.s-i-img.custom-img {
        margin-top: unset
    }

    #products-view::after {
        height: 74%
    }

    .m-img {
        position: relative;
        margin-top: -70%;
        height: 100%
    }

    .modal-container {
        top: unset;
        width: calc(100% - 40px);
        max-height: 70vh;
        bottom: 2%;
        max-width: 405px
    }

    .m-close {
        top: -200px
    }

    .m-img-container {
        height: 413px;
        position: relative;
        top: unset;
        bottom: unset;
        left: unset;
        margin-top: -60px;
        width: 100%
    }

    .m-i-bg {
        background-size: auto 100%
    }

    .s-i-back p {
        max-width: 140px
    }

    .m-download span {
        text-decoration: underline
    }
}

.cardD,
.cardD-body,
.djc,
.f-social,
.noticias {
    display: flex
}

@media screen and (max-width:500px) {
    .c-title-mobile.mobile h4 {
        font-size: 32px
    }

    .c-logos svg {
        width: 26%
    }

    .c-logos svg:first-of-type {
        margin-bottom: 0
    }

    .c-f-flex .c-f-row,
    .c-f-flex .c-f-row:nth-of-type(2) {
        width: 100%
    }

    .c-tittle span {
        font-size: 42px;
        line-height: 62px
    }

    #clients {
        margin-bottom: 100px
    }

    #hero.products #bg-t-hero {
        bottom: -20px
    }

    #products-view-2 .bg-text .bg-t-logo,
    .bg-t-logo {
        top: 100px
    }

    .c-f-flex:nth-of-type(2) .c-f-row.row-select,
    .static-item:nth-of-type(3) {
        display: none
    }

    .static-item:nth-of-type(6) {
        display: block !important
    }

    #products-view::after {
        height: 65%
    }

    .c-f-flex:first-of-type .c-f-row.row-select {
        width: 48%;
        display: initial !important
    }

    .c-f-row input {
        font-size: 18px
    }

    #products-view-2 {
        padding-top: 140px
    }

    #products-view-2:after {
        height: 73%
    }

    .about-arrowimg svg.mobile {
        left: 8%
    }

    .modal-container {
        bottom: unset;
        top: 50%;
        transform: translateY(-50%) !important;
        overflow: auto
    }

    .modal-container .modal .m-img {
        width: 100%;
        margin: 0 auto
    }

    .modal-container .modal .m-img .m-img-container {
        height: 230px
    }

    .modal-container .modal .m-img .m-img-container .m-i-bg {
        background-size: contain
    }

    .m-close {
        top: -20px
    }
}

@media screen and (max-width:350px) {
    .s-b-item p {
        max-width: 140px
    }

    .swiper-pagination-bullet {
        margin-right: 23px
    }

    .s-c-buttons svg:nth-of-type(2) {
        margin-left: 20px
    }

    div#house-hour strong {
        display: none
    }
}

@media screen and (max-height:780px) and (max-width:500px) {
    .m-download span {
        text-decoration: underline
    }

    .m-img-container {
        height: 280px
    }

    .modal-container {
        padding-bottom: 30px;
        max-height: 80vh
    }

    .m-content>span:nth-of-type(3) {
        font-size: 16px;
        line-height: 20px
    }

    .m-img {
        margin-top: -50%
    }
}

.redes img {
    width: 30px;
    transition: filter 1s
}

.redes a {
    margin-right: 5px
}

.redes img:hover {
    filter: hue-rotate(50deg)
}

.green {
    color: #04af00;
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: 500
}

.gr {
    border-top: 1px solid #7add79
}

.f-social {
    padding-top: 8px;
    width: 50px;
    gap: 10px
}

.descarg {
    margin: 0 20px auto !important
}

.cardD-body {
    flex-direction: column;
    align-items: flex-end
}

.cardD-body p {
    width: 518px;
    margin: 40px 0;
    font-size: 20px
}

.cardD {
    align-items: center;
    width: 1000px;
    height: 560px;
    gap: 110px;
    margin-bottom: 100px;
    box-shadow: 8px 12px 20px 0 rgba(0, 0, 0, .1);
    background-color: #fff;
    margin-left: 140px;
    transition: .3s ease-in
}

.cardD img {
    width: 180px;
    margin-left: 80px
}

.notimg img {
    width: 700px
}

.noticias {
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 40px
}

.txt-not {
    max-width: 505px;
    margin-left: 80px
}

.txt-not p {
    font-size: 18px;
    margin-bottom: 40px;
    font-weight: 300
}

.txt-not h6 {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 300
}

.djc {
    justify-content: flex-end
}

@media (max-width:1023px) {
    .cardD {
        max-width: 670px;
        margin-left: 0;
        gap: 50px
    }

    .cardD img {
        width: 170px;
        margin-left: 65px
    }

    .cardD-body p {
        width: 330px
    }

    #header {
        width: 100%
    }

    .noticias {
        display: flex;
        margin-top: 20px;
        margin-bottom: 40px;
        flex-direction: row-reverse
    }

    .txt-not {
        width: auto;
        margin-left: 0
    }

    .noticias-flex {
        display: flex;
        flex-direction: column;
        align-items: center
    }
}

@media (max-width:1420px) {
    .noticias {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 40px;
        align-items: center
    }

    .txt-not {
        max-width: 700px;
        margin-left: 0
    }
    .txt-not p{
        text-align: center;
    }
    .noticias-flex {
        display: flex;
        flex-direction: column;
        align-items: center
    }
}

@media (max-width:664px) {
    .cardD {
        max-width: 460px;
        height: 610px;
        gap: 15px;
        margin-left: 0;
        align-items: center;
        flex-direction: column;
        justify-content: center
    }

    .cardD-body p {
        width: 250px;
        margin: 30px 0;
        font-size: 16px
    }

    .cardD img {
        margin-left: 0;
        width: 130px
    }

    .cardD-body {
        align-items: center
    }

    .desc {
        display: flex;
        justify-content: center
    }
}

#video-container {
    display: block;
    margin: 0 auto;
    width: 400px;
    height: 550px
}

.video-contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.image-carousel {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 3s ease-in-out
}

.pad-dist {
    padding: 80px 0 140px
}

.shadow {
    color: #39c337
}

@media (max-width:768px) {
    .image-carousel {
        height: 400px
    }
}

@media (max-width:480px) {
    .image-carousel {
        height: 250px;
    }
}

/* Estilos generales del formulario */
.form-instaladores {
    max-width: 640px;
    margin: 60px auto;
    padding: 20px;
}
.form-instaladores .form-group {
    margin-bottom: 20px;
}

.form-instaladores label {
    display: block;
    margin-bottom: 5px;
    color: #777777;
    font-size: 19px;
    font-weight: 300;
}

.form-instaladores input[type="text"], 
.form-instaladores input[type="email"], 
.form-instaladores input[type="tel"] {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background: transparent;
    border: transparent;
    border-bottom: 1px solid #ccc;
}

.form-instaladores input[type="text"]:focus,
.form-instaladores input[type="email"]:focus,
.form-instaladores input[type="tel"]:focus {
    border-color: #04AF00;
    background-color: rgba(4, 175, 0, .06);
    transition: 0.3s ease;
}

.form-instaladores .submit-btn {
    border: none;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 40px;
    padding: 12px 30px;
}
.sub-title {
    font-size: 16px;
}
.err-msg {
    color: red;
    display: none;
}
.err .err-msg {
    display: block;
}
/* Pequeños ajustes de responsive */
@media (max-width: 600px) {
    .form-instaladores {
        padding: 15px;
    }

    .form-instaladores .form-group {
        margin-bottom: 10px;
    }
}