#tabs {
    list-style-type: none;
}
    #tabs li {
        display: inline-block;
        background: #efefef;
        border-top: 4px solid #02be7c;
        margin-left: 1px;
        margin-right: 1px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
        #tabs li a {
            display: block;
            height: 100%;
            font-size: 16.5px;
            font-family: var(--header-font);
            line-height: 3rem;
            position: relative;
            color: #000000;
            padding: 5px 25px;
            text-align: center;
            -webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
            text-decoration: none;
        }

        #tabs li:hover, #tabs li.active {
            border-top: 4px solid #00b1aa;
        }



#tab-contents {
    border-top: 1px solid #efefef;
    background-color: transparent;
}
    #tab-contents .tab-contents {
        padding: 15px 0;
        display: none;
        opacity: 0;        
    }
        #tab-contents .tab-contents.active {
            display: block;
            -webkit-transition: opacity 2.0s ease-in;
            -moz-transition: opacity 2.0s ease-in;
            -o-transition: opacity 2.0s ease-in;
            transition: opacity 2.0s ease-in;
            opacity: 1;
        }