﻿@media only screen and (max-width: 991px) {
    #comparison-page-desktop.hide-for-mobile {
        display: none !important
    }
}

@media only screen and (min-width: 992px) {
    #comparison-page-desktop {
        display: block
    }

        #comparison-page-desktop #prowebcorp h2.lrg {
            font-size: 2.5em
        }

        #comparison-page-desktop .hero-flex > .hero-items:last-of-type {
            position: relative;
            top: 30px
        }

        #comparison-page-desktop .bold {
            font-weight: 700
        }

        #comparison-page-desktop h3.right-2p {
            margin-bottom: 3vh
        }

        #comparison-page-desktop .hero-grow {
            margin-bottom: 3vh;
            padding-bottom: 3vh
        }

        #comparison-page-desktop .hero-3pc {
            padding: 0
        }
}

@media only screen and (min-width: 992px) and (max-width:1199px) {
    #comparison-page-desktop .line {
        display: none
    }
}

@media only screen and (min-width: 992px) and (max-width:991px) {
    #comparison-page-desktop .hero-flex > .hero-items:first-child {
        width: 100%
    }

    #comparison-page-desktop .pro-web .products-wrapper {
        display: flex;
        flex-direction: column
    }
}

@media only screen and (min-width: 992px) and (min-width:768px) and (max-width:991px) {
    #comparison-page-desktop .pro-web img {
        padding: 0 30px;
        width: 300px
    }
}

@media only screen and (min-width: 992px) and (min-width:992px) {
    #comparison-page-desktop .pro-features-column-wrapper > .line {
        display: block;
        height: 100%;
        width: 1px;
        margin-left: 50px;
        margin-right: 50px;
        background-color: #000
    }

    #comparison-page-desktop .pro-web img {
        max-width: 500px
    }

    #comparison-page-desktop .pro-web .line {
        display: block;
        height: 100%;
        width: 2px;
        margin-left: 10px;
        margin-right: 10px
    }

    #comparison-page-desktop .tax-preparer-guide .line {
        display: block;
        height: 100%;
        width: 2px;
        margin-left: 50px;
        margin-right: 50px
    }

    #comparison-page-desktop .tax-preparer-guide {
        display: flex;
        justify-content: center;
        margin-bottom: 150px
    }

        #comparison-page-desktop .tax-preparer-guide > div {
            display: flex;
            justify-content: center
        }

    #comparison-page-desktop .tax-preparer-guide--content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: baseline
    }

        #comparison-page-desktop .tax-preparer-guide--content > h2 {
            font-weight: 700;
            margin-bottom: 20px
        }
}

#comparison-page-desktop .pro-features-2-column .fi-column-1 h2 {
    margin-bottom: 1vh
}

#comparison-page-desktop .pro-features-2-column .fi-column-1 .btn, #comparison-page-desktop .pro-features-2-column .fi-column-1 img, #comparison-page-desktop .pro-features-2-column .fi-column-1 p {
    margin-bottom: 2vh
}

#comparison-page-desktop .pro-features-column {
    padding-top: 4vh
}

@media screen and (min-width: 768px) {
    #comparison-page-desktop .pro-features-column .pro-features-column-item {
        padding-bottom: 2vh
    }
}

/*WTF else is this affecting ? */
.tab-product {
    background-color: #F6F6F6;
    width: fit-content;
    margin: auto;
    text-align: center;
}

.tabcontent {
    display: none;
}

.activate-tab {
    display: block !important;
}