h1 {
    font-size: 70px;
    color: #000;
    font-family: var(--zf-secondary-bold)
}

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

.banner-section {
    height: 800px;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    -ms-flex-align: center
}

.banner-section .rows {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    align-items: center;
    -ms-flex-align: center;
    justify-content: space-between;
    -ms-flex-pack: space-between
}

.banner-section .rows .banner-content {
    flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    max-width: 420px
}

.banner-integration {
    flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    max-width: 50%
}

.banner-integration ul {
    display: flex;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    align-items: center;
    -ms-flex-align: center;
    position: relative;
    top: -70px
}

.banner-integration ul li:nth-child(3) {
    position: relative;
    top: 80px
}

.banner-integration ul li:nth-child(4) {
    position: relative;
    top: 160px
}

.banner-integration div.icon {
    width: 140px;
    height: 150px;
    background: #000;
    margin: 10px 10px;
    border-radius: 20px;
    position: relative
}

div.icon::before {
    background: url('/sites/zweb/images/projects/integration/projects-integration-sprite.png') no-repeat;
    background-size: 350px auto;
    width: 64px;
    height: 60px;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform:translate(-50%,-50%);
    -ms-transform: translate(-50%, -50%)
}

.banner-integration .icon.zfedx {
    background: #336cb1
}

.banner-integration ul li div.icon.zanalytics {
    background: #e8322e
}

.banner-integration .icon.zcrm,
.banner-integration .icon.zbook,
.banner-integration .icon.zg-analytics,
.banner-integration .icon.zups,
.banner-integration ul li div.icon.zpaypal {
    background: transparent
}

.banner-integration ul li div.icon.zcrm::before {
    background-position: -194px -3px;
    width: 80px;
    height: 60px
}

.banner-integration ul li div.icon.zstripe::before {
    background-position: 0 0;
    width: 0;
    height: 0
}

.banner-integration ul li div.icon.zpaypal::before {
    background-position: -66px -5px;
    width: 60px;
    height: 60px
}

.banner-integration ul li div.icon.zbook::before {
    background-position: -128px -3px;
    width: 65px
}

.banner-integration ul li div.icon.zmailchimp::before {
    background-position: -4px -67px;
    width: 75px;
    height: 70px
}

.banner-integration ul li div.icon.zups::before {
    background-position: -149px -72px;
    width: 63px
}

.banner-integration ul li div.icon.zavalara::before {
    background-position: -78px -72px;
    width: 70px
}

.banner-integration ul li div.icon.zg-analytics::before {
    background: var(--product-icons) no-repeat;
    background-size: var(--zp-i-bs);
    background-position: var(--zp-mail-bp);
    width: var(--zp-i-w);
    height: var(--zp-i-h);
    transform: scale(1.5)
}

.banner-integration ul li div.icon.zcanadapost::before {
    background-position: -280px -72px;
    width: 65px
}

.banner-integration ul li div.icon.zmailchimp {
    background: #fce03a
}

.banner-integration ul li div.icon.zstripe {
    background: #fff
}

.banner-integration ul li div.icon.zavalara {
    background: #2166f5
}

.banner-integration ul li div.icon.zcanadapost {
    background: #000
}

.banner-integration ul li div {
    opacity: 0;
    transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out
}

.banner-integration ul li:nth-child(1) div:nth-child(1),
.banner-integration ul li div:nth-child(1) {
    transform: translate3d(0, -50px, 0) scale(0.8);
    -webkit-transform: translate3d(0, -50px, 0) scale(0.8);
    -ms-transform: translate3d(0, -50px, 0) scale(0.8)
}

.banner-integration ul li:nth-child(1) div:nth-child(2),
.banner-integration ul li div:nth-child(3) {
    transform: translate3d(0, 50px, 0) scale(0.8);
    -webkit-transform: translate3d(0, 50px, 0) scale(0.8);
    -ms-transform: translate3d(0, 50px, 0) scale(0.8)
}

.banner-integration ul li div:nth-child(2) {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8)
}

.middle-animated .banner-integration ul li:nth-child(1) div:nth-child(1),
.middle-animated .banner-integration ul li:nth-child(1) div:nth-child(2),
.middle-animated .banner-integration ul li div {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.banner-integration ul li:nth-child(1) div:nth-child(2) {
    transition-delay: .2s;
    -webkit-transition-delay: .2s
}

.banner-integration ul li:nth-child(2) div:nth-child(1) {
    transition-delay: .3s;
    -webkit-transition-delay: .3s
}

.banner-integration ul li:nth-child(2) div:nth-child(2) {
    transition-delay: .4s;
    -webkit-transition-delay: .4s
}

.banner-integration ul li:nth-child(2) div:nth-child(3) {
    transition-delay: .5s;
    -webkit-transition-delay: .5s
}

.banner-integration ul li:nth-child(3) div:nth-child(1) {
    transition-delay: .6s;
    -webkit-transition-delay: .6s
}

.banner-integration ul li:nth-child(3) div:nth-child(2) {
    transition-delay: .8s;
    -webkit-transition-delay: .8s
}

.banner-integration ul li:nth-child(3) div:nth-child(3) {
    transition-delay: .9s;
    -webkit-transition-delay: .9s
}

.banner-integration ul li:nth-child(4) div:nth-child(1) {
    transition-delay: 1s;
    -webkit-transition-delay: 1s
}

.banner-integration ul li:nth-child(4) div:nth-child(2) {
    transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s
}

.banner-integration ul li:nth-child(4) div:nth-child(3) {
    transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s
}

.banner-integration ul li:nth-child(4) div:nth-child(2):before {
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 51px;
}

.banner-integration ul li div.icon.zanalytics::before {
    background-position: -273px 0;
    width: 70px;
    height: 70px
}


@media only screen and (max-width: 1366px) {
    .banner-section {
        height: auto;
        padding: 3em 0
    }

    .banner-integration ul {
        transform: translate(-70px, 0) scale(0.8) rotate(-20deg);
        -webkit-transform: translate(-70px, 0) scale(0.8) rotate(-20deg);
        -ms-transform: translate(-70px, 0) scale(0.8) rotate(-20deg);
        -o-transform: translate(-70px, 0) scale(0.8) rotate(-20deg)
    }
}

@media only screen and (max-width: 1023px) {
    h1 {
        font-size: 45px
    }

    .banner-section {
        padding: 2em 0 5em
    }

    .zsticky-link {
        display: none
    }

    .banner-integration {
        display: none
    }

    .banner-section .rows .banner-content {
        flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        max-width: 500px;
        margin: 0 auto;
        text-align: center
    }
}

.zint-icon.zint-servicenow img {
    max-width: 190px;
    min-height: auto !important
}

@media only screen and (max-width: 767px) {
    .banner-section {
        padding: 4em 0
    }
}