* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    margin: 0;
    background: #fff;
}

site-header {
    background: var(--global-color);
    display: block;
    width: 100%;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    color: #fff;
    position: fixed;
    z-index: 10000;
}

a {
    text-decoration: none
}

.topnav {
    overflow: hidden
}

.topnav a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    color: inherit;
}

.topnav>a {
    border-bottom: 3px solid transparent
}

.tab.active {
    border-bottom: 3px solid #fff
}

.topnav .icon {
    display: none
}

.topnav a.brand {
    color: #fff;
    font-size: 17px
}

@media screen and (max-width: 767px) {
    .topnav a:not(:first-child) {
        display: none
    }

    .topnav button.icon {
        display: block;
        font-size: 20px;
        position: absolute;
        right: 15px;
        top: 2px;
        background: var(--global-color);
        border: 0;
        padding: 10px 15px;
        cursor: pointer;
        color: #fff
    }

    .topnav.responsive {
        position: relative
    }

    .topnav.responsive .icon {}

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left
    }

    .topnav>a {
        border-bottom: 0
    }

    .tab.active {
        border-bottom: 0;
        background: #7f0066
    }

    .topnav>.tab:hover {
        border-bottom: 0;
        background: #7f0066
    }
}

.container {
    width: 100%;
    margin: auto
}

.mt0 {
    margin-top: 0
}

.mx1,
.ml1,
.m1 {
    margin-left: 8px
}

.mx1,
.mr1,
.m1 {
    margin-right: 8px
}

.my1,
.mt1,
.m1 {
    margin-top: 8px
}

.my1,
.mb1,
.m1 {
    margin-bottom: 8px
}

.mx2,
.ml2,
.m2 {
    margin-left: 16px
}

.mx2,
.mr2,
.m2 {
    margin-right: 8px
}

.my2,
.mt2,
.m2 {
    margin-top: 16px
}

.my2,
.mb2,
.m2 {
    margin-bottom: 16px
}

.px1,
.pl1,
.p1 {
    padding-left: 8px
}

.px1,
.pr1,
.p1 {
    padding-right: 8px
}

.py1,
.pt1,
.p1 {
    padding-top: 8px
}

.py1,
.pb1,
.p1 {
    padding-bottom: 8px
}

.px2,
.pl2,
.p2 {
    padding-left: 16px
}

.px2,
.pr2,
.p2 {
    padding-right: 16px
}

.py2,
.pt2,
.p2 {
    padding-top: 16px
}

.py2,
.pb2,
.p2 {
    padding-bottom: 16px
}

.wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    top: 50px;
}

@media (min-width:992px) {
    .site-main-content {
        grid-template-columns: minmax(752px, 800px) minmax(160px, 1fr);
        margin: 0 auto;
        max-width: none;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 1003;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        min-height: auto;
        display: grid;
        grid-gap: 24px;
        grid-template-columns: 1fr minmax(752px, 936px) 1fr;
        grid-template-rows: 1fr
    }

    .site-sidebar {
        margin-top: 24px;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        width: auto;
        position: relative
    }

    .site-content {
        align-self: start;
        grid-column: 1;
        grid-row: 1;
        margin: 24px;
        max-width: 936px;
        min-width: 0;
        display: block;
        position: relative;
        counter-reset: numbered;
        margin-top: 25px
    }

    .site-main-content {
        grid-template-columns: minmax(400px, 625px) minmax(160px, 1fr)
    }
}

@media (min-width:1200px) {
    .site-main-content {
        grid-template-columns: minmax(500px, 840px) minmax(160px, 1fr)
    }
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    font-weight: 500;
    width: 100%;
    line-height: 1.2
}

h1 {
    margin-bottom: 10px;
    margin-top: 15px
}

h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 20px;
    margin-top: 30px
}

.h1,
h1 {
    font-size: 2.5rem
}

.h2,
h2 {
    font-size: 1.8rem
}

.h3,
h3 {
    font-size: 1.5rem
}

.h4,
h4 {
    font-size: 1.3rem
}

.h5,
h5 {
    font-size: 1.15rem
}

.h6,
h6 {
    font-size: 1rem
}

.article {
    background: #f2f2f2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.side-content-box {
    background: #fff;
    margin-bottom: 30px;
    color: #000
}

.side-content-box img {
    padding: 6px
}

.side-content-box img:last-child {
    margin-bottom: 0
}

.box-title {
    padding: 8px 10px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: var(--global-color)
}


.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0
}

.breadcrumb li {
    display: inline-block;
    max-width: 150px
}

.crumb {
    padding: 5px;
    color: #3b3b3b
}

#footer {
    margin-top: 30px;
    background: #e6e6e6;
    padding: 30px 0;
    margin-bottom: 75px;
    text-align: center
}

.footer-nav-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.footer-nav-list li {
    display: inline-block;
    border-right: 2px solid #a5a5a5
}

.footer-nav-list li:last-child {
    border-right: 0
}

.footer-nav-list li:first-child a {
    padding-left: 0
}

.footer-nav-list li a {
    padding: 3px 10px;
    color: #565656
}

.footer-nav-list li a:hover {
    color: #00559f
}

site-book-nav {
    position: relative;
    max-width: 290px;
    display: inline-block
}

site-book-nav .site-book-nav[fixed] {
    width: 290px;
    position: fixed;
    height: 100%;
    background: #fff;
    z-index: 1008;
    top: 0;
    left: 0;
    bottom: 0;
    box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.2);
    display: none;
    padding: 15px 5px;
    overflow: auto
}

site-book-nav .toggle_book_nav[fixed] {
    position: fixed;
    top: 40%;
    z-index: 1007;
    transform: rotate(90deg);
    left: -30px
}

site-book-nav .site-book-nav[fixed].active {
    display: block
}

.toggle_book_nav .btn_book_nav {
    padding: 9px;
    background: #0087ff;
    color: #fff;
    border: 0;
    box-shadow: 5px 0px 7px 3px rgba(0, 0, 0, 0.24);
    font-size: 16px;
    cursor: pointer
}

.toggle_book_nav .btn_book_nav:hover {
    box-shadow: 5px 0px 7px 3px rgba(0, 0, 0, 0.15)
}

site-book-nav .toggle_book_nav[fixed].active {
    left: 260px
}

site-book-nav[fixed] {
    position: fixed;
    top: 0;
    bottom: 0;
    min-width: 100%;
    z-index: 1008;
    background-color: rgb(0, 0, 0, 0.6)
}

.les {
    display: none
}

.toggle_book_nav.active .btn_book_nav .les {
    display: block
}

.toggle_book_nav.active .btn_book_nav .mor {
    display: none
}

.site-nav-list {
    margin: 0;
    list-style: none;
    padding-left: 12px;
    padding-right: 8px
}

.row {
    display: flex;
    flex-wrap: wrap
}

.item-card {
    border: 1px solid #e3e3e3;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1)
}

.nav-link:hover,
.wrapper a:hover,
#footer a:hover {
    text-decoration: underline;
    color: #00559f
}

.contact {
    display: flex
}

.contact a {
    padding: 8px 10px;
    background: #019103;
    color: #fff;
    font-weight: 600;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.08);
    margin-right: 10px
}

.contact a:hover {
    background: #007e02;
    color: #eee;
    font-weight: 600;
    box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.10)
}

.btn-float {
    display: inline-block;
    position: fixed;
    bottom: 5px;
    font-size: 18px;
    border-radius: 35px;
    z-index: 10024
}

.fa-btn {
    width: 60px;
    height: 60px;
    padding: 8px 17px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    border-radius: 35px
}

.btn-phone {
    background: #21b7d7;
    right: 80px
}

.btn-whatsapp {
    right: 150px;
    background: #1eae15
}

.whatsapp {
    background-color: #1eae15
}

.phone {
    background-color: #21b7d7
}

.to-top {
    right: 15px;
    width: 50px;
    height: 50px;
    bottom: 10px;
    padding: 13px 15px;
    display: none;
    background: #d2c8d0
}

.progress-circle {
    position: absolute;
    left: 0;
    top: 0
}

svg.progress-circle path {
    stroke: var(--global-color);
    stroke-width: 5;
    fill: none
}

#profiles .profile .profile-inn>div {
    padding: 5px;
    position: relative
}

#profiles .profile .profile-inn {
    max-width: 420px;
    padding-right: 15px;
    float: left
}

.photos {
    padding-top: 5px;
    position: absolute;
    bottom: 0;
    text-align: center
}

.photos img {
    border: 2px solid var(--global-color);
    margin-bottom: 5px;
    width: calc(16.6666% - 8px);
    display: inline-block;
    position: relative
}

.photos img:nth-child(2n-1) {
    margin-right: 5px
}

@media screen and (max-width:600px) {
    .site-sidebar {
        padding: 15px
    }

    #profiles .profile .profile-inn {
        padding-right: 0;
        width: 100%
    }
}

.side-content-box ul {
    list-style: none;
    padding: 0
}

.side-content-box ul.social li {
    display: inline-block
}

.side-content-box ul.social li a {
    border-radius: 50%;
    margin: 5px 0 0 5px;
    display: inline-block;
    background: var(--global-color);
    height: 47px;
    width: 47px
}

@media screen and (max-width:991px) {
    .mpr {
        padding-right: 15px
    }
}

#profiles .profile {
    vertical-align: top;
    padding: 10px
}

#profiles .profile {
    background: #fff;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.17)
}

.name {
    text-align: center;
    padding: 5px 10px;
    background: var(--global-color);
    color: #fff;
    font-weight: 600
}

#profiles .profile div>a {
    display: block;
    overflow: hidden
}

img {
    display: block;
    width: 100%;
    height: auto
}

#profiles .profile .profile-inn .photos>* {
    background: var(--global-color)
}



.site-main-content_cstm {
    padding: 30px 0;
}

.site-main-content_cstm .ad-section .img img{ width: 180px; height: 225px; object-fit: cover; padding: 0; }
.add_cstm.ad-section .content h3{ font-size: 20px; color: #34495e;  padding-bottom: 0px; margin-top: 0; }
.add_cstm.ad-section .iconcon{ display: block; padding:10px 10px 10px 20px; }
.add_cstm.ad-section .icons{ padding: 5px 0 0; display: flex; }
.add_cstm.ad-section .box{
    position: relative;
    padding: 5px;
    margin: 16px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    border-radius: 5px;
    border: 2px solid var(--global-color);
}
.add_cstm.ad-section .icons a{ padding: 6px 15px; border-radius: 30px; display: inline-block; vertical-align: top; margin-right: 5px; font-size: 17px; }
.add_cstm.ad-section .whatapp a {
    color: #fff;
    background: green;
}
.add_cstm.ad-section .call {
    padding-bottom: 0px;
}
.add_cstm.ad-section .call a {
    color: #fff;
    background: var(--global-color);
}

.location_book{ background-color: #f2f2f2; }

@media (min-width:768px) {
    .container {
        max-width: 720px
    }

    .md5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .md7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .md-pl1 {
        padding-left: 8px
    }

    .md-pr1 {
        padding-right: 8px
    }

    .md-pl2 {
        padding-left: 16px
    }

    .md-pr2 {
        padding-right: 16px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 900px
    }

    .dn_lg {
        display: none
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1100px
    }
}

@media (min-width:1400px) {
    .container {
        max-width: 1300px
    }
}

.side-content-box ul.nav-book li a {
    display: block;
    width: 100%;
    padding: 10px;
    color: #000
}

.side-content-box ul.nav-book li a:hover {
    background: var(--global-color);
    color: #fff
}

.side-content-box ul.nav-book li {
    display: block
}

.image-preview-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .6);
    transition: all .3s;
    display: none;
    color: #fff;
    will-change: transform;
    user-select: none
}

.image-preview-container.show {
    animation: show .5s forwards;
    -webkit-animation: show .5s forwards
}

.image-preview-container.hiding .preview-header {
    animation: opacityAnimation .5s forwards reverse
}

.image-preview-container img {
    transition: all .5s;
    transform: translateX(var(--offsetX)) translateY(var(--offsetY)) translateZ(0) scale(var(--scale), var(--scale)) rotate(var(--rotate))
}

.image-preview-container .image-container {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden
}

.image-preview-container .preview-header {
    height: 60px;
    background: rgba(0, 0, 0, .2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2vw 0 1vw;
    position: relative;
    z-index: 90;
    animation: opacityAnimation .5s forwards
}

.image-preview-container .preview-header .nums {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.image-preview-container .preview-header .nums p {
    font-weight: 300;
    padding: 4px 8px;
    font-size: 16px
}

.image-preview-container .preview-header button {
    background: 0 0;
    border: none;
    outline: 0;
    font-size: 18px;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    position: relative
}

.image-preview-container .preview-header .tool-btn button {
    margin-left: 2vw
}

.image-preview-container .preview-header button:hover::after,
.image-preview-container .preview-header button:hover::before {
    display: block
}

.image-preview-container .preview-header button::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(130% - 5px);
    transform: translateX(-50%);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5px solid #000;
    display: none
}

.image-preview-container .preview-header button::after {
    content: attr(data-tooltip);
    font-size: 12px;
    position: absolute;
    left: 50%;
    top: 130%;
    transform: translateX(-50%);
    background: #000;
    padding: 2px 5px;
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    display: none
}

.image-preview-container .preview-header button:hover {
    background: rgba(0, 0, 0, .2);
    cursor: pointer
}

#next,
#prev {
    background: 0 0;
    border: none;
    outline: 0;
    position: absolute;
    top: 50%;
    color: #f6f6f6;
    padding: 20px 10px;
    cursor: pointer;
    z-index: 1
}

#next i,
#prev i {
    font-size: 24px;
    display: block;
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23ffffff' d='M187.8 264.5L41 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 392.7c-4.7-4.7-4.7-12.3 0-17L122.7 256 4.2 136.3c-4.7-4.7-4.7-12.3 0-17L24 99.5c4.7-4.7 12.3-4.7 17 0l146.8 148c4.7 4.7 4.7 12.3 0 17z'%3E%3C/path%3E%3C/svg%3E") no-repeat center
}

#prev i {
    transform: rotate(180deg)
}

#prev {
    left: 1%
}

#next {
    right: 1%
}

.zoom-in {
    cursor: zoom-in
}

.moving {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important
}

@keyframes show {
    0% {
        background: rgba(0, 0, 0, 0)
    }

    100% {
        background: rgba(0, 0, 0, .6)
    }
}

@keyframes opacityAnimation {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@font-face {
    font-family: iconfont;
    src: url('http://at.alicdn.com/t/font_2387568_7n96d4x0sva.eot?t=1614436212405');
    src: url('http://at.alicdn.com/t/font_2387568_7n96d4x0sva.eot?t=1614436212405#iefix') format('embedded-opentype'), url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAT4AAsAAAAACjAAAASqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDXgqGXIUtATYCJAMcCxAABCAFhG0HgQEbpggRFaRXkP0ocPcUUIQJE35oLZsytsFlXASH/P8RD//tx7pvZr5g2iCR4Ee6SRMNieSNBom6Ftqmsknrnm272avZT+9ZL5kSyYL4OoAruFgmd66mB+uXQDZXayVUeGYizL6S8eBfX0r6fOmkWbj7n2OmS2uw/GubS2VStY2Ge+MBDSj7ovRADvhO7OjUTwN23crPBD1NoNe0MMTq2MmzoVUomwJxWlKUA23IouSQQ6uvU04WiPvA16YB8ixwz/75+CwmRCCpMijP2j4Zkw+L7+B5CdJxOkjPRtC154JwjowOKMRdqucWkJvpIL2f38mzj0GtpH7nOfl84rnP88DnJRxHuFMZDYNqI1lRSfP650UNjKYf2ONszTvQ+WTekXwK72g+Fe981PK0gTAJaEugtaroRjfYQ+4XiC1gO03ah+KQ5TFC3eUXpVJ4eStVbZRJRxfkGzdsYh2LrHqHQgtDtdFmHZVfQKaNTFilT3OzdF0G0kGdnyuv4KJps6gqMFSOWW9us9rXr6UkV1/Pvn498caNJPbaDAmzUbeJllq3OBKWzX6YguvX3+Rr1xLeW6dgjjqR+Ji/csMJV2Q/nm6iFBYHpLdKlayZzmngvuuzh1ntmxlqtgnTCWZ2i91h6I2EisXmdRuWpJmwqXJswnMjYfLQkUnViZa9TjZ6yPXZHewsMNNK1kogvUWiMFFkVoByzJnUHd29/jiBVpzQ1LmB3RWXlpSWWkWjXbHRiI3NBuNGVxuEP3KDAVcmGbfJMNfmuhEG34wYcdbnLOiqEUrsrPdZlRc66nNUFZSkSDNvhEFXse7f92aFE849J7fOIZajy6/QclVoCo1DyYvHD52t8HH3ubj5oY98sztTkT54wvaE4iPo188M5RFWiMesI9+99FgG1zjWCyvfDOGP7Ed7JhXnrGMXiN+UBD6r34Y8Jrr3HrnSH18T0ozGDoijnXFWvsXWn5Vqc9V+mTe1grLglsj1h50bB08xXwW46p6Z0gd7tm3Y3xRSEVzPl1ldfVxwTrLNpT87727g9KijCa2oNqQ36vB5X0a0TrQA8xJ4/yv8QbxAzKlJ2OuskoO7nvjjWfgPm6Ed/H+TnuYAlvolz0Ey6tN8CA3K3fIQ0j97L/M45NqZLOXgbyIpD+BtdnM9LNz/ch4jwAOkVVr6pJkKkYP4p/jKFWtT3n10UeklCDQWZUol9KpDPF+BUffb0070JjF9rQkfksYUZK0ZZMF2UOkzD7XWAvSaM+58nzG1sihiYFYPQRi2A5JBTyAbdg5ZsPegMukd1IaxgUAiMbQ3SgVEiRrFqAU/8P6HYKhazS7KKb2h27PmoNymvJB7iMMaERXNX7Eit7Gnf90mYsEyFbjQ8zBngsYU0cjkRdp5jixM+6TJUBmUURjSBPoAb/9AYJDKmuOFin3/DXJ2mcY5PT+CL4h1YXqwmiwlkFdNLdVzLPO7L2cjhGXXWYwU4AIXymqGgJa+LEKGmPgaqeZsZgbZspqpf105zhPQS/lgEylylKiijiZawuug/4PDY53X1bmzTtoY2quMjUm0XzfhmLF3qqPJ1PHQ6qk6oygcm3ddbREMynWvwwAA') format('woff2'), url('http://at.alicdn.com/t/font_2387568_7n96d4x0sva.woff?t=1614436212405') format('woff'), url('http://at.alicdn.com/t/font_2387568_7n96d4x0sva.ttf?t=1614436212405') format('truetype'), url('http://at.alicdn.com/t/font_2387568_7n96d4x0sva.svg?t=1614436212405#iconfont') format('svg')
}

.iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-account-practice-lesson-close:before {
    content: '\e600'
}

.icon-zhongzhi:before {
    content: '\e602'
}

.icon-xuanzhuan:before {
    content: '\e615'
}

.icon-xuanzhuan1:before {
    content: '\e669'
}

@media screen and (max-width:768px) {

    .preview-header .iconfont,
    .preview-header .nums p {
        font-size: 12px !important
    }

    .add_cstm.ad-section .content h3{ font-size: 15px; margin-bottom: 10px; }
    .add_cstm.ad-section .icons a{ padding: 4px 12px; font-size: 13px; }
    .add_cstm.ad-section .icons{ padding: 0; }
    .article_cstm{ padding-top: 0px; }
    .add_cstm.ad-section .content p {
        font-size: 12px;
        margin-bottom: 10px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .site-main-content_cstm .ad-section .img img{ width: 120px; height: 150px; }
    .add_cstm.ad-section .iconcon{ padding: 5px 5px 5px 10px; }
    .site-main-content_cstm{ padding: 15px 0; }


    site-header .topnav{ display: flex; flex-wrap: wrap; }
    site-header .topnav .tab{ background-color: #fff; color: #4258ff; border-radius: 6px; margin:8px; padding: 12px 15px; font-size: 15px;
     text-transform: uppercase; line-height: 15px; width: calc( 50% - 18px) ; text-align: center !important;  }
    site-header .topnav a.tab.location_tab{ width: calc( 100% - 18px) ; }
    site-header .topnav.responsive{ padding-bottom: 15px; }
     site-header .topnav .tab:hover, site-header .topnav .tab:focus{ background-color: #000; color: #fff; }
     .topnav button.icon:focus{ border: none; box-shadow: none; outline: none; }
}

.image-preview-container .preview-header .nums p,
#next i,
#prev i {
    display: none
}

.profile p {
    font-family: Times New Roman
}

.profile p:nth-child(3),
.profile p:nth-child(4) {
    font-size: 15px
}


.list-group-item:first-child, .list-group-item:last-child {
	border-radius: 0;
}

a.list-group-item.active {
	background: transparent linear-gradient(to right, var(--global-color) 50%, #f5f5f5 50%) repeat scroll right bottom / 207% 100%;
	border-color: var(--global-color);
	color: #01273a !important;
	z-index: 0;
	background-position: left bottom;
}
a.list-group-item:hover {
	background: transparent linear-gradient(to right, var(--global-color) 50%, #f5f5f5 50%) repeat scroll right bottom / 207% 100%;
	color: #ffffff !important;
	text-decoration: none;
	background-position: left bottom;
	border-color: #ddd !important
}
.list-group a.list-group-item span {
	font-family: 'Open Sans', sans-serif;
	background: var(--global-color);
	border-radius: 30px;
	color: #fff;
	float: right;
	font-weight:600;
	font-size: 11px;
	height: 28px;
	line-height: 26px;
	margin-top: 11px;
	text-align: center;
	vertical-align: middle;
	width: 28px;	
}
a.list-group-item:hover i {
	color: #01273a;
}
a.list-group-item:hover span {
	background: #ffffff;
	color: #01273a;
}
a.list-group-item:hovre i {
 color:#ffffff;
}
a.list-group-item.active i {
	color: #01273a;
}
a.list-group-item.active span {
	background: #ffffff;
	color: #01273a;
}

.list-group-item {
	background: transparent linear-gradient(to right, var(--global-color) 50%, #ffffff 50%) repeat scroll right bottom / 207% 100%;
	border: 1px solid #ddd;
	display: block;
	margin-bottom: -1px;
	position: relative;
	color: #696969;
	font-size: 13px;	
	line-height: 48px;
	padding: 0 15px;
	font-weight:600;
	-webkit-transition: all .6s ease 0;
	transition: all .6s ease 0;
	transition: all 0.3s ease 0s;
}

a.list-group-item, button.list-group-item {
	text-align: inherit;
	width: 100%;
}
.list-group-item i {
	color: var(--global-color);
	padding-right: 5px;
}