.topics h2{
    display: block;
    font-size: 20px;
    color: #424753;
    margin: 0;
    padding: 0 0 3px 0;
}

.topics a{
    display: block;
    font-size: 14px;
    color: #424753;
    margin-top: 9px;
}

.topics a.active{
    font-weight: bold;
}


.help-topics > .content{
    padding: 10px 20px 10px 0;
}

.help-topics h2{
    font-size: 20px;
}

.help-topics > .content a{
    display: block;
    color: #424753;
    font-size: 14px;
    margin: 11px 0;
}

.help-topics > .content a:hover {
    color: #0096FF;
}

.help-topics > .content a.active{
    font-weight: bold;
}


.help-topics .xs-header{
    display: none;
}

@media (max-width: 767px){

    .help-topics{
        display: none;
        transition: .5s;
    }

    .help-topics.active{
        display: block;
        position: fixed;
        z-index: 49;
        left: 0; top: 0;
        height: 100%;
        width: 100%;
        background-color: #f7f9fc;
    }

    .help-topics h2{
        display: none;
    }

    .help-topics .xs-header{
        display: block;
        background-color: white;
        border-bottom: #d6d8da;
        box-shadow: 0 1px 1px #00000029;
        padding: 10px 20px;
    }

    .help-topics .xs-header div{
        font-size: 15px;
        width: 30%;
        cursor: pointer;
    }

    .help-topics .xs-header div:last-child{
        width: 70%;
        text-align: right;
        font-weight: bold;
    }

    .help-topics > .content{
        padding: 10px 20px;
    }

    .help-topics > .content a{
        font-size: 16px;
    }
}