.comparison-table-holder {
    position:relative;
    max-width:100%;
    overflow-x: hidden;
}

#overflow-scroller {
    overflow-x:auto;
    width: 100%;
}

table.comparison-table {
    font-size:0.75em;
    width: 140%;
    table-layout: fixed;
    border-collapse: collapse;

    tbody {
        position:relative;
    }

    tr {

        &:last-child {

            td{
            /* border-bottom: 1px solid #eaeaea; */
            }
        }

        &:nth-child(even) {
        	background-color:unset;
        }
        
        th {
            text-align:center;
            font-weight:700;
            background:#fff;
            color:#4a4a4a;
            border:1px solid #ddd;

            &#homhero-header {
                background:var(--theme--primary-color);
                color:#fff;
            }

            &#competitor-header {
                color:#fff;
            }

        }
        
        td {
            padding:1em;
            border:1px solid #ddd;
            
            &:first-child {
                width:33.33333%;
                background-color: #ffffff;
            }

            &.homhero-value,
            &.competitor-value {
                text-align:center;
                width:33.33333%;
                min-width:200px;

                & i.fa-check {
                    color: green;
                }

                & i.fa-times {
                    color: red;
                }

                & i.fa-star,
                & i.fa-star-half,
                & i.fa-star-half-alt{
                    color: gold;
                }
            }
        }
    }
    
    &#comparison-table-1 {
        z-index:1;

        & th {
            position:relative;

            #scroll-competitor {
                position:absolute;
                right:20px;
            }

            #scroll-homhero {
                position:absolute;
                left:20px;
            }

        }
        
        td {
            background: #ffffff;

            &.homhero-value {
                background:#e0f6f5;
            }
        }
    }
    
    &#comparison-table-2 {
        position: absolute;
        top:0;
        left:0;
        pointer-events: none;
        z-index:2;

         & th.features-header {
            text-align:left;
        }

        & th#homhero-header,
        & th#competitor-header,
        & td.homhero-value,
        & td.competitor-value{
            opacity:0;
            border: solid 1px transparent;
            
        }
    
    }
}

@media screen and (min-width: 992px) {
    
    table.comparison-table {
        font-size:1em;
        width: 100%;
        table-layout: auto;
        
        #scroll-competitor {
            display:none;
        }

        #scroll-homhero {
            display:none;
        }
        
        tr {
            td {
                    &:first-child {
                        width:50%;
                    }
                    
                    &.homhero-value,
                    &.competitor-value {
                        width:25%;
                    }
            }
        }
    }
}