:root {
    --sprite-icon: url("/sites/zweb/images/contracts/construction/sprite.png")
}

.zinline-block {
    display: inline-block
}

.page-wrapper .content-wrap {
    max-width: 1170px;
    padding: 50px 0
}

.flex-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

h1,h2 {
    font-family: var(--zf-primary-bold)
}

.act-btn,.cta-btn {
    padding: 12px 30px
}

.block-content img {
    vertical-align: top
}

.block-content .cta-wrap a {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 15px
}

[class|="zsprite"] {
    display: inline-block;
    background: var(--sprite-icon) no-repeat;
    background-size: 369px auto;
    background-position: 0 0;
    letter-spacing: -40px
}

[class|="zsprite-fea"] {
	height: 60px;
    margin-bottom: 20px;
}

.feature-box-1 .zsprite-fea-icon1 {
    background-position: -12px -3px;
	width: 55px;
}

.feature-box-1 .zsprite-fea-icon2 {
    background-position: -81px -3px;
	width: 64px;
}

.feature-box-1 .zsprite-fea-icon3 {
    background-position: -158px -3px;
	width: 68px;
}

.feature-box-2 .zsprite-fea-icon1 {
    background-position: -239px 0;
	width: 61px;
	height: 63px;
}

.feature-box-2 .zsprite-fea-icon2 {
    background-position: -313px -3px;
	width: 56px;
}

.feature-box-2 .zsprite-fea-icon3 {
    background-position: 0 -77px;
	width: 67px;
}

.feature-box-3 .zsprite-fea-icon1 {
    background-position: -81px -77px;
	width: 64px;
}

.feature-box-3 .zsprite-fea-icon2 {
    background-position: -158px -77px;
	width: 71px;
}

.feature-box-3 .zsprite-fea-icon3 {
    background-position: -242px -77px;
	width: 74px;
}

.zw-product-header,.banner-section {
    background: #dbfcf8
}

.page-wrapper .banner-section .content-wrap {
    max-width: 1280px
}

.banner-section p:last-child {
    margin-bottom: 0
}

.feature-box-section.feature-box-2 {
    background: #fff2f2
}

.feature-box-section .flex-content {
    -webkit-box-align: unset;
    -ms-flex-align: unset;
    -ms-grid-row-align: unset;
    align-items: unset;
    gap: 40px 80px
}

.feature-box-section .fea-box {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}

.feature-box-section .fea-box h4 {
    line-height: 1.2
}

.feature-box-section .fea-box p:last-child {
    margin-bottom: 0
}

.feature-box-section .fea-box.img-fea-box {
    display: flex;
    justify-content: center;
    align-items: end
}

.bottom-cta-section {
    background: #102345;
    color: #fff
}

.bottom-cta-section .block-content {
    max-width: 600px;
    margin: 0 auto
}

.bottom-cta-section .block-content p:last-child {
    margin-bottom: 0
}

@media only screen and (max-width: 767px) {
    .block-content .zgreen-anim-txt {
        display:inline-block
    }

    .page-wrapper .banner-section .content-wrap {
        padding-top: 30px
    }

    .page-wrapper .content-wrap {
        max-width: 600px
    }

    .zflex-one-col,.zflex-two-col,.zflex-three-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
    }

    .banner-section .banner-image {
        margin-top: 40px
    }

    .banner-section .banner-image .bnr-img {
        max-width: 320px
    }

    .feature-box-section .fea-icon {
        -webkit-transform: scale(0.7) translate(-20%,5%);
        transform: scale(0.7) translate(-20%,5%)
    }

    .feature-box-section .fea-title {
        margin-bottom: 40px
    }

    .feature-box-section .fea-box.img-fea-box {
        display: none
    }
}

@media only screen and (min-width: 768px) {
    .page-wrapper .content-wrap {
        padding:70px 0
    }

    .page-wrapper .steps-section .content-wrap {
        padding-top: 50px
    }

    .zflex-one-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
    }

    .zflex-two-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%
    }

    .zflex-three-col {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33%;
        flex: 0 0 33%
    }

    .zflex-row-reverse-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .banner-section .zflex-two-col:first-child {
        -ms-flex: 0 0 55%;
        flex: 0 0 55%
    }

    .banner-section .zflex-two-col:last-child {
        -ms-flex: 0 0 45%;
        flex: 0 0 45%
    }

    .banner-section .banner-content {
        max-width: 660px;
        padding-right: 5%
    }

    .banner-section .banner-content p {
        max-width: 590px;
    }

    .feature-box-section .fea-title {
        max-width: 1030px;
        margin: 0 auto 60px
    }

    .feature-box-section .fea-box {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 40px);
        flex: 0 0 calc(50% - 40px)
    }

    .feature-box-section .fea-box .fea-content {
        max-width: 500px
    }

    .feature-box-section .fea-title,.bottom-cta-section {
        text-align: center
    }
}

@media only screen and (min-width: 1200px) {
    .page-wrapper .content-wrap {
        padding:100px 0
    }

    .page-wrapper .mob-only {
        display: none
    }

    .i18n-en h1 {
        font-size: 50px
    }

    .i18n-en h2 {
        font-size: 36px
    }

    .feature-box-section .fea-box h4 {
        font-size: 32px
    }

    .feature-box-section .img-fea-box .fea-image {
        opacity: 0;
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        transform: translateX(30px);
        -ms-filter: "alpha(opacity=0)";
        -webkit-transition: all 1000ms cubic-bezier(0.11,0.16,0.43,0.86);
        -o-transition: all 1000ms cubic-bezier(0.11,0.16,0.43,0.86);
        transition: all 1000ms cubic-bezier(0.11,0.16,0.43,0.86)
    }

    .feature-box-section .img-fea-box.zwe-op .fea-image {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -ms-filter: "alpha(opacity=100)"
    }
    .bottom-cta-section .block-content {
        max-width: 900px;
    }
}

@media only screen and (min-width: 1400px) {
    .i18n-en h1 {
        font-size:54px
    }

    .i18n-en h2 {
        font-size: 48px
    }
}