.zf-primary-regular {
    font-family: var(--zf-primary-regular),sans-serif
}

.zf-primary-semibold {
    font-family: var(--zf-primary-semibold),sans-serif;
    font-weight: 600
}

.seventh {
    background: #f8fbfa
}

.seventh .wrapper {
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
    position: relative;
    padding-bottom: 100px
}

.seventh-three-sec-wrapper {
    max-width: 1030px;
    margin: 0 auto;
    border: 1px solid #e0e1e2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.02)
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #fff
}

.compare-table th,.compare-table td {
    vertical-align: middle
}

.compare-table thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    z-index: 5;
    background-color: #fff;
    border-bottom: 1px solid #e0e1e2;
    box-shadow: 0 3px 15px 0 rgba(107,152,125,0.12)
}

.compare-table .col-feature {
    width: 550px
}

.compare-table th.col-feature,.compare-table td.col-feature {
    text-align: left;
    padding: 30px 0 30px 40px
}

.compare-table thead .col-feature .seventh-head {
    font-size: 30px;
    line-height: 1;
    color: #181818
}

.compare-table tbody .col-feature .seventh-head {
    font-size: 19px;
    line-height: 1;
    color: #181818;
    margin: 0;
    max-width: 100%
}

.compare-table .col-sheet {
    text-align: center;
    padding: 30px 0;
    border-left: 1px solid #0eb36e;
    border-right: 1px solid #0eb36e;
    background-color: #f0fbf8;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.06)
}

.compare-table thead .col-sheet {
    background-color: #d3f4e2;
    border-top: 1px solid #0eb36e
}

.compare-table tbody tr:last-child .col-sheet {
    border-bottom: 1px solid #0eb36e
}

.compare-table .col-excel {
    text-align: center;
    padding: 30px 0
}

.compare-table thead .sheet-logo,.compare-table thead .excel-logo {
    width: 27px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 8px
}

.compare-table thead .col-sheet p,.compare-table thead .col-excel p {
    font-size: 19px;
    line-height: 1;
    color: #181818;
    padding: 5px 0 0;
    max-width: 100%;
    margin: 0 auto
}

.compare-table tbody td.col-feature,.compare-table tbody td.col-excel {
    border-bottom: 1px solid #f3f3f3
}

.compare-table tbody tr:last-child td {
    border-bottom: 0
}

.compare-table tbody tr.row-hover:hover td.col-feature,.compare-table tbody tr.row-hover:hover td.col-excel {
    background-color: rgba(74,74,74,0.03);
    transition: .5s all
}

.compare-table tbody .col-sheet p:not(.check):not(.notcheck),.compare-table tbody .col-excel p:not(.check):not(.notcheck) {
    font-size: 15px;
    color: #383838;
    padding-top: 4px;
    max-width: 100%;
    margin: 0 auto
}

.compare-table .check,.compare-table .notcheck {
    width: 20px;
    height: 20px;
    background: #0eb36e url(/sites/zweb/images/sheet/sheet-vs-excel-tick.png) no-repeat;
    background-size: 60%;
    background-position: center;
    border-radius: 99px;
    margin: 0 auto
}

.compare-table .notcheck {
    background: #c1c1c1 url(/sites/zweb/images/sheet/sheet-vs-excel-minus.png) no-repeat;
    background-size: 50%;
    background-position: center
}

.seventh .side-text {
    width: 93%;
    margin: 60px auto 0;
    text-align: center;
    font-family: var(--zf-primary-regular),sans-serif;
    padding: 30px 110px;
    font-size: 22px;
    line-height: 34px;
    color: #333
}

@media(max-width: 1112px) {
    .compare-table tbody .col-sheet p:not(.check):not(.notcheck),.compare-table tbody .col-excel p:not(.check):not(.notcheck) {
        font-size:14px
    }

    .seventh .side-text {
        font-size: 20px
    }
}

@media(max-width: 1024px) {
    .compare-table thead .col-feature .seventh-head {
        font-size:26px
    }
}

@media(max-width: 1023px) {
    .seventh .wrapper {
        width:90%
    }

    .compare-table .col-feature {
        width: 50%
    }

    .compare-table th.col-feature,.compare-table td.col-feature {
        padding: 30px 0 30px 20px
    }

    .seventh .side-text {
        width: 90%
    }
}

@media(max-width: 900px) {
    .seventh .side-text {
        padding:30px 20px
    }
}

@media(max-width: 768px) {
    .compare-table tbody .col-feature .seventh-head {
        font-size:17px
    }

    .seventh .side-text {
        font-size: 20px;
        line-height: 32px
    }
}

@media(max-width: 667px) {
    .compare-table thead .col-feature .seventh-head {
        font-size:22px
    }

    .compare-table tbody .col-feature .seventh-head {
        font-size: 16px;
        line-height: 20px
    }

    .seventh .side-text {
        font-size: 18px;
        line-height: 28px
    }
}

@media(max-width: 570px) {
    .compare-table thead .col-feature .seventh-head {
        font-size:22px
    }

    .compare-table th,.compare-table td {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .compare-table .check,.compare-table .notcheck {
        width: 15px;
        height: 15px
    }

    .seventh .side-text {
        width: 90%;
        font-size: 15px;
        line-height: 25px
    }

    .compare-table tbody .col-sheet p:not(.check):not(.notcheck),.compare-table tbody .col-excel p:not(.check):not(.notcheck) {
        font-size: 12px;
        line-height: 15px
    }
}

@media(max-width: 414px) {
    .compare-table tbody .col-sheet p:not(.check):not(.notcheck),.compare-table tbody .col-excel p:not(.check):not(.notcheck) {
        font-size:12px;
        line-height: 15px;
        padding-top: 5px
    }

    .seventh .side-text {
        width: 100%
    }
}

@media(max-width: 767px) {
    .seventh-three-sec-wrapper {
        overflow-x:auto;
        -webkit-overflow-scrolling: touch
    }

    .compare-table {
        min-width: 680px
    }
}