/*------------------------
    Tabs Showcase
------------------------*/
/*-------------------------
    Style 01
-------------------------*/
.xgenious-tab-wrapper-01 .xgnav-tabs li {
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
}

.xgenious-tab-wrapper-01 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-01 .xgnav-tabs li.active {
    background-color: #db0a5b;
    border-color: #db0a5b;
}

.xgenious-tab-wrapper-01 .xgtab-pane {
    font-size: 16px;
    line-height: 26px;
    padding: 20px 20px 10px 20px;
    border: 1px solid #e2e2e2;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-01 .xgnav-tabs li {
        margin-bottom: 10px;
    }
}

/*-------------------------
    Style 02
-------------------------*/
.xgenious-tab-wrapper-02 .xgnav-tabs {
    margin-bottom: 20px;
    text-align: center;
}

.xgenious-tab-wrapper-02 .xgnav-tabs li {
    padding: 10px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 30px;
    margin: 0 5px;
    border: 2px solid #2a384c;
    color: #2a384c;
}

.xgenious-tab-wrapper-02 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-02 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-02 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    border: 2px solid #2a384c;
    border-radius: 30px;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-02 .xgnav-tabs li {
        margin-bottom: 10px;
    }
}

/*-------------------------
    Style 03
-------------------------*/
.xgenious-tab-wrapper-03 .xgnav-tabs {
    margin-bottom: 20px;
    text-align: center;
}

.xgenious-tab-wrapper-03 .xgnav-tabs li {
    padding: 15px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    background-color: #2a384c;
    color: #fff;
    margin: 0 5px;
}

.xgenious-tab-wrapper-03 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-03 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-03 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    border: 10px double #197beb;
    background-color: #2a384c;
}

.xgenious-tab-wrapper-03 .xgtab-pane p {
    color: #fbfbfb;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-03 .xgnav-tabs li {
        margin-bottom: 10px;
    }
}

/*-------------------------
    Style 04
-------------------------*/
.xgenious-tab-wrapper-04 .xgnav-tabs {
    text-align: center;
    border: 1px solid #e2e2e2;
    display: inline-block;
    border-radius: 30px;
}

.xgenious-tab-wrapper-04 .xgnav-tabs li {
    padding: 15px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    border-radius: 30px;
}

.xgenious-tab-wrapper-04 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-04 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-04 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-04 .xgnav-tabs li {
        margin-bottom: 10px;
    }

    .xgenious-tab-wrapper-04 .xgnav-tabs {
        border: none;
    }
}

/*-------------------------
    Style 05
-------------------------*/
.xgenious-tab-wrapper-05 .xgnav-tabs {
    text-align: center;
    display: block;
    position: relative;
    z-index: 0;
    margin-bottom: 20px;
}

.xgenious-tab-wrapper-05 .xgnav-tabs:after {
    position: absolute;
    left: 0;
    top: 50%;
    background-color: #e2e2e2;
    content: '';
    width: 100%;
    height: 2px;
    z-index: -1;
}

.xgenious-tab-wrapper-05 .xgnav-tabs li {
    padding: 15px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: 2px solid #e2e2e2;
    margin: 0 10px;
    background-color: #fff;
}

.xgenious-tab-wrapper-05 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-05 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-05 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    border: 2px solid #e2e2e2;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-05 .xgnav-tabs li {
        margin-bottom: 10px;
    }

    .xgenious-tab-wrapper-05 .xgnav-tabs:after {
        display: none;
    }
}

/*-------------------------
    Style 06
-------------------------*/
.xgenious-tab-wrapper-06 .xgnav-tabs {
    text-align: center;
    display: block;
    position: relative;
    z-index: 0;
    margin-bottom: 20px;
}

.xgenious-tab-wrapper-06 .xgnav-tabs:after {
    position: absolute;
    left: 0;
    top: 50%;
    background-color: #e2e2e2;
    content: '';
    width: 100%;
    height: 2px;
    z-index: -1;
}

.xgenious-tab-wrapper-06 .xgnav-tabs li {
    padding: 15px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: 2px solid #e2e2e2;
    margin: 0 10px;
    background-color: #fff;
    border-radius: 30px;
}

.xgenious-tab-wrapper-06 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-06 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-06 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    border: 2px solid #e2e2e2;
    border-radius: 30px;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-06 .xgnav-tabs li {
        margin-bottom: 10px;
    }

    .xgenious-tab-wrapper-06 .xgnav-tabs:after {
        display: none;
    }
}

/*-------------------------
    Style 07
-------------------------*/
.xgenious-tab-wrapper-07 .xgnav-tabs {
    display: block;
}

.xgenious-tab-wrapper-07 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-07 .xgnav-tabs li {
    padding: 15px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
}

.xgenious-tab-wrapper-07 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-07 .xgnav-tabs li.active {
    background-color: #2a384c;
    border-color: #2a384c;
    color: #fff;
}

.xgenious-tab-wrapper-07 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    border: 2px solid #2a384c;
    background-color: #2a384c;
}

.xgenious-tab-wrapper-07 .xgtab-pane p {
    color: #fbfbfb;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-07 .xgnav-tabs {
        margin-bottom: 20px;
    }
}

/*-------------------------
    Style 08
-------------------------*/
.xgenious-tab-wrapper-08 .xgnav-tabs {
    display: block;
}

.xgenious-tab-wrapper-08 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-08 .xgnav-tabs li {
    padding: 15px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
}

.xgenious-tab-wrapper-08 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-08 .xgnav-tabs li.active {
    background-color: transparent;
}

.xgenious-tab-wrapper-08 .xgnav-tabs li.active:after,
.xgenious-tab-wrapper-08 .xgnav-tabs li.active:before {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.xgenious-tab-wrapper-08 .xgnav-tabs li:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    content: '';
    background-color: #e2e2e2;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
}

.xgenious-tab-wrapper-08 .xgnav-tabs li:before {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    content: '';
    background-color: #197beb;
    border-radius: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
}

.xgenious-tab-wrapper-08 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
}

/*-------------------------
    Style 09
-------------------------*/
.xgenious-tab-wrapper-09 .xgnav-tabs {
    display: block;
}

.xgenious-tab-wrapper-09 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-09 .xgnav-tabs li {
    padding: 15px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
}

.xgenious-tab-wrapper-09 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-09 .xgnav-tabs li.active {
    background-color: transparent;
}

.xgenious-tab-wrapper-09 .xgnav-tabs li.active:after,
.xgenious-tab-wrapper-09 .xgnav-tabs li.active:before {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.xgenious-tab-wrapper-09 .xgnav-tabs li:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    content: '';
    background-color: #197beb;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
}

.xgenious-tab-wrapper-09 .xgnav-tabs li:before {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    content: '';
    background-color: #197beb;
    border-radius: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
}

.xgenious-tab-wrapper-09 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
}

/*-------------------------
    Style 10
-------------------------*/
.xgenious-tab-wrapper-10 .xgnav-tabs {
    display: block;
    margin-bottom: 20px;
}

.xgenious-tab-wrapper-10 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-10 .xgnav-tabs li {
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    margin: 0 5px;
}

.xgenious-tab-wrapper-10 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-10 .xgnav-tabs li.active {
    background-color: transparent;
}

.xgenious-tab-wrapper-10 .xgnav-tabs li.active:after,
.xgenious-tab-wrapper-10 .xgnav-tabs li:hover:after {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

.xgenious-tab-wrapper-10 .xgnav-tabs li:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: '';
    background-color: #197beb;
    -webkit-transition: -webkit-transform .5s ease-in;
    transition: -webkit-transform .5s ease-in;
    -o-transition: transform .5s ease-in;
    transition: transform .5s ease-in;
    transition: transform .5s ease-in, -webkit-transform .5s ease-in;
    -webkit-transform: translateY(54px);
    -ms-transform: translateY(54px);
    transform: translateY(54px);
}

.xgenious-tab-wrapper-10 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    background-color: #f3f3f3;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-10 .xgnav-tabs li.active:after {
        display: block;
    }

    .xgenious-tab-wrapper-10 .xgnav-tabs li:after {
        display: none;
    }
}

/*-------------------------
    Style 11
-------------------------*/
.xgenious-tab-wrapper-11 .xgnav-tabs {
    display: block;
    margin-bottom: 20px;
}

.xgenious-tab-wrapper-11 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-11 .xgnav-tabs li {
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    border: 1px solid #e2e2e2;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
}

.xgenious-tab-wrapper-11 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-11 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-11 .xgnav-tabs li.active:after {
    visibility: visible;
    opacity: 1;
}

.xgenious-tab-wrapper-11 .xgnav-tabs li:after {
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 25px;
    height: 25px;
    content: '';
    background-color: #197beb;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotate(45deg) translateX(-50%);
    -ms-transform: rotate(45deg) translateX(-50%);
    transform: rotate(45deg) translateX(-50%);
}

.xgenious-tab-wrapper-11 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    background-color: #f3f3f3;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-11 .xgnav-tabs li {
        margin-bottom: 20px;
    }

    .xgenious-tab-wrapper-11 .xgnav-tabs li:after {
        display: none;
    }
}

/*-------------------------
    Style 12
-------------------------*/
.xgenious-tab-wrapper-12 .xgnav-tabs {
    display: block;
    margin-bottom: 20px;
    background-color: #f4f4f4;
}

.xgenious-tab-wrapper-12 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-12 .xgnav-tabs li {
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    border: none;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
    background-color: transparent;
    margin: 0 5px;
}

.xgenious-tab-wrapper-12 .xgnav-tabs li:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background-color: #197beb;
    content: '';
    visibility: hidden;
    opacity: 0;
}

.xgenious-tab-wrapper-12 .xgnav-tabs li:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #197beb;
    content: '';
    visibility: hidden;
    opacity: 0;
}

.xgenious-tab-wrapper-12 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-12 .xgnav-tabs li.active:after,
.xgenious-tab-wrapper-12 .xgnav-tabs li.active:before {
    visibility: visible;
    opacity: 1;
}

.xgenious-tab-wrapper-12 .xgnav-tabs li.active {
    color: #197beb;
}

.xgenious-tab-wrapper-12 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    background-color: #f3f3f3;
}

/*-------------------------
    Style 13
-------------------------*/
.xgenious-tab-wrapper-13 .xgnav-tabs {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.xgenious-tab-wrapper-13 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-13 .xgnav-tabs li {
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    border: none;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
    background-color: transparent;
}

.xgenious-tab-wrapper-13 .xgnav-tabs li i {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    background-color: #f3f3f3;
    text-align: center;
    line-height: 80px;
    font-size: 30px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.xgenious-tab-wrapper-13 .xgnav-tabs li.active {
    color: #197beb;
}

.xgenious-tab-wrapper-13 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    background-color: #f3f3f3;
}

/*-------------------------
    Style 14
-------------------------*/
.xgenious-tab-wrapper-14 .xgnav-tabs {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.xgenious-tab-wrapper-14 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-14 .xgnav-tabs li {
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    border: none;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
    background-color: transparent;
    width: auto;
    height: auto;
    background-color: #f3f3f3;
    text-align: center;
    margin: 0 5px;
}

.xgenious-tab-wrapper-14 .xgnav-tabs li i {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}

.xgenious-tab-wrapper-14 .xgnav-tabs li.active {
    color: #197beb;
}

.xgenious-tab-wrapper-14 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    background-color: #f3f3f3;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-14 .xgnav-tabs li {
        margin-bottom: 20px;
    }
}

/*-------------------------
    Style 15
-------------------------*/
.xgenious-tab-wrapper-15 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.xgenious-tab-wrapper-15 .xgnav-tabs {
    margin-bottom: 20px;
    display: inline-block;
    margin-right: 20px;
}

.xgenious-tab-wrapper-15 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-15 .xgnav-tabs li {
    padding: 15px 10px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    border: none;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
    background-color: transparent;
    width: 140px;
    height: auto;
    background-color: #f3f3f3;
    text-align: center;
    margin: 20px 0px;
    display: block;
}

.xgenious-tab-wrapper-15 .xgnav-tabs li:first-child {
    margin-top: 0;
}

.xgenious-tab-wrapper-15 .xgnav-tabs li:last-child {
    margin-bottom: 0;
}

.xgenious-tab-wrapper-15 .xgnav-tabs li i {
    font-size: 40px;
    display: block;
    margin-bottom: 15px;
}

.xgenious-tab-wrapper-15 .xgnav-tabs li.active {
    color: #197beb;
}

.xgenious-tab-wrapper-15 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    background-color: #f3f3f3;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-15 .xgnav-tabs li {
        width: auto;
        margin: 0 10px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .xgenious-tab-wrapper-15 {
        display: block;
    }
}

/*-------------------------
    Style 16
-------------------------*/
.xgenious-tab-wrapper-16 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.xgenious-tab-wrapper-16 .xgnav-tabs {
    display: block;
    margin-right: 20px;
}

.xgenious-tab-wrapper-16 .xgnav-tabs li:first-child {
    margin-top: 0;
}

.xgenious-tab-wrapper-16 .xgnav-tabs li {
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    border: none;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
    background-color: transparent;
    width: 180px;
    word-wrap: break-word;
    margin: 10px 0px;
    background-color: #f4f4f4;
}

.xgenious-tab-wrapper-16 .xgnav-tabs li:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background-color: #197beb;
    content: '';
    visibility: hidden;
    opacity: 0;
}

.xgenious-tab-wrapper-16 .xgnav-tabs li:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #197beb;
    content: '';
    visibility: hidden;
    opacity: 0;
}

.xgenious-tab-wrapper-16 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-16 .xgnav-tabs li.active:after,
.xgenious-tab-wrapper-16 .xgnav-tabs li.active:before {
    visibility: visible;
    opacity: 1;
}

.xgenious-tab-wrapper-16 .xgnav-tabs li.active {
    color: #197beb;
}

.xgenious-tab-wrapper-16 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    background-color: #f3f3f3;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-16 .xgnav-tabs li {
        width: auto;
        margin: 0 10px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .xgenious-tab-wrapper-16 {
        display: block;
    }
}

/*-------------------------
    Style 17
-------------------------*/
.xgenious-tab-wrapper-17 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.xgenious-tab-wrapper-17 .xgnav-tabs {
    display: block;
    margin-right: 40px;
}

.xgenious-tab-wrapper-17 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-17 .xgnav-tabs li {
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    border: 1px solid #e2e2e2;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
    width: 170px;
    margin-bottom: 20px;
}

.xgenious-tab-wrapper-17 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-17 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-17 .xgnav-tabs li.active:after {
    visibility: visible;
    opacity: 1;
}

.xgenious-tab-wrapper-17 .xgnav-tabs li:after {
    position: absolute;
    right: -13px;
    top: 15px;
    width: 25px;
    height: 25px;
    content: '';
    background-color: #197beb;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.xgenious-tab-wrapper-17 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    background-color: #f3f3f3;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-17 .xgnav-tabs li {
        width: auto;
        margin: 0 10px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .xgenious-tab-wrapper-17 {
        display: block;
    }

    .xgenious-tab-wrapper-17 .xgnav-tabs li:after {
        display: none;
    }
}

/*-------------------------
    Style 18
-------------------------*/
.xgenious-tab-wrapper-18 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.xgenious-tab-wrapper-18 .xgnav-tabs {
    display: block;
    margin-right: 20px;
}

.xgenious-tab-wrapper-18 .xgnav-tabs li:first-child {
    margin-left: 0;
}

.xgenious-tab-wrapper-18 .xgnav-tabs li {
    padding: 15px 10px;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: none;
    position: relative;
    width: 200px;
}

.xgenious-tab-wrapper-18 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-18 .xgnav-tabs li.active {
    background-color: transparent;
}

.xgenious-tab-wrapper-18 .xgnav-tabs li.active:after,
.xgenious-tab-wrapper-18 .xgnav-tabs li.active:before {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.xgenious-tab-wrapper-18 .xgnav-tabs li:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    content: '';
    background-color: #197beb;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
}

.xgenious-tab-wrapper-18 .xgnav-tabs li:before {
    position: absolute;
    left: 50%;
    top: 0px;
    width: 10px;
    height: 10px;
    content: '';
    background-color: #197beb;
    border-radius: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .3s linear;
    transition: -webkit-transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
}

.xgenious-tab-wrapper-18 .xgtab-pane {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-18 .xgnav-tabs li {
        width: auto;
        margin-bottom: 20px;
        display: inline-block;
    }

    .xgenious-tab-wrapper-18 {
        display: block;
    }

    .xgenious-tab-wrapper-18 .xgnav-tabs li:after {
        display: none;
    }
}

/*-------------------------
    Style 19
-------------------------*/
.xgenious-tab-wrapper-19 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.xgenious-tab-wrapper-19 .xgnav-tabs {
    display: block;
    margin-right: 20px;
}

.xgenious-tab-wrapper-19 .xgnav-tabs li {
    text-align: center;
    padding: 15px 10px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: 2px solid #e2e2e2;
    background-color: #fff;
    border-radius: 30px;
    width: 200px;
    word-wrap: break-word;
    margin-bottom: 20px;
}

.xgenious-tab-wrapper-19 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-19 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-19 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    border: 2px solid #e2e2e2;
    border-radius: 30px;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-19 .xgnav-tabs li {
        width: auto;
        margin-bottom: 20px;
        display: inline-block;
    }

    .xgenious-tab-wrapper-19 {
        display: block;
    }

    .xgenious-tab-wrapper-19 .xgnav-tabs li:after {
        display: none;
    }
}

/*-------------------------
    Style 20
-------------------------*/
.xgenious-tab-wrapper-20 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.xgenious-tab-wrapper-20 .xgnav-tabs {
    display: block;
    margin-right: 20px;
}

.xgenious-tab-wrapper-20 .xgnav-tabs li {
    text-align: center;
    padding: 15px 10px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
    border: 2px solid #e2e2e2;
    background-color: #fff;
    width: 200px;
    word-wrap: break-word;
    margin-bottom: 20px;
}

.xgenious-tab-wrapper-20 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-20 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-20 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    border: 2px solid #e2e2e2;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-20 .xgnav-tabs li {
        width: auto;
        margin-bottom: 20px;
        display: inline-block;
    }

    .xgenious-tab-wrapper-20 {
        display: block;
    }
}

/*-------------------------
    Style 21
-------------------------*/
.xgenious-tab-wrapper-21 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.xgenious-tab-wrapper-21 .xgnav-tabs {
    margin-right: 20px;
    text-align: center;
}

.xgenious-tab-wrapper-21 .xgnav-tabs li {
    padding: 15px 10px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    background-color: #2a384c;
    color: #fff;
    margin-bottom: 20px;
    width: 200px;
    text-align: center;
}

.xgenious-tab-wrapper-21 .xgnav-tabs li:last-child {
    margin-bottom: 0;
}

.xgenious-tab-wrapper-21 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-21 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
    color: #fff;
}

.xgenious-tab-wrapper-21 .xgtab-pane {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 20px 10px 20px;
    border: 10px double #197beb;
    background-color: #2a384c;
}

.xgenious-tab-wrapper-21 .xgtab-pane p {
    color: #fbfbfb;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-21 .xgnav-tabs li {
        width: auto;
        margin-bottom: 20px;
        display: inline-block;
    }

    .xgenious-tab-wrapper-21 {
        display: block;
    }
}

/*-------------------------
    Style 22
-------------------------*/
.xgenious-tab-wrapper-22 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.xgenious-tab-wrapper-22 .xgnav-tabs {
    margin-right: 20px;
}

.xgenious-tab-wrapper-22 .xgnav-tabs li {
    padding: 15px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    width: 200px;
    margin-bottom: 20px;
}

.xgenious-tab-wrapper-22 .xgnav-tabs li:last-child {
    margin-bottom: 0;
}

.xgenious-tab-wrapper-22 .xgnav-tabs li i {
    padding-right: 5px;
}

.xgenious-tab-wrapper-22 .xgnav-tabs li.active {
    background-color: #197beb;
    border-color: #197beb;
}

.xgenious-tab-wrapper-22 .xgtab-pane {
    font-size: 16px;
    line-height: 26px;
    padding: 20px 20px 10px 20px;
    border: 1px solid #e2e2e2;
}

@media only screen and (max-width: 767px) {
    .xgenious-tab-wrapper-22 .xgnav-tabs li {
        width: auto;
        margin-bottom: 20px;
        display: inline-block;
    }

    .xgenious-tab-wrapper-22 {
        display: block;
    }
}
