ul.tabs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
ul.tabs li{
    align-self: center;
    -ms-flex-align: center;
    -webkit-align-self: center;
    -webkit-box-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 12px 38px;
}
ul.tabs li.active:first-child {
    border-left: none;
}
ul.tabs li a, ul.tabs li a:link {
    border-bottom: 1px dashed rgba(66, 131, 192, 0.3);
    color: #4283c0;
    text-decoration: none;
}
ul.tabs li a:hover {
    border-bottom: 1px dashed rgba(216, 2, 2, 0.3);
    color: #d80202;
}
ul.tabs li.active a, ul.tabs li.active a:link, ul.tabs li.active a:hover {
    color: #212121;
    border-bottom: none;
    text-decoration: none;
}
ul.tabs li:first-child {
    padding-left: 0px;
}
ul.tabs li.active {
    border-left: 1px solid #d6d6d6;
    border-top: 1px solid #d6d6d6;
    border-right: 1px solid #d6d6d6;
    border-radius: 4px;
}
@media (max-width: 48rem) {
    ul.tabs li {
        padding: 0 0 0 2.25rem;
    }
    ul.tabs li:first-child {
        padding: 0 0 0 2.25rem;
    }
    ul.tabs li.active {
        border: none;
    }
    ul.tabs {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
        cursor: pointer;
    }
    ul.tabs li.active {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    ul.tabs li {
        width: 100%;
    }
    ul.tabs li a, ul.tabs li a:link, ul.tabs li a:hover {
        color: #212121;
        border-bottom: none;
        text-decoration: none;
    }
    ul.tabs li::before {
        border: 1px solid #ccc;
        border-radius: 50%;
        content: "";
        height: 1.5rem;
        left: 0;
        position: absolute;
        top: 0.25rem;
        width: 1.5rem;
        background: white;
    }
    ul.tabs li {
        line-height: 2rem;
        padding-left: 2.25rem;
        position: relative;
    }
    ul.tabs li.question:after {
        background: url("../../img/ivr/question.png");
        width: 24px;
        height: 24px;
        content: "";
        position: absolute;
        margin-left: 14px;
        margin-top: 4px;
    }
    ul.tabs li.active::before {
        border: 1px solid #4283c0;
    }
    ul.tabs li.active span::before {
        background: #4283c0 none repeat scroll 0 0;
        border: 1px solid #4283c0;
        border-radius: 50%;
        content: "";
        height: 1rem;
        left: 0.25rem;
        position: absolute;
        top: 0.5rem;
        width: 1rem;
    }
    ul.tabs li .player {
        float: right;
    }
    ul.tabs li .img {
        float: left;
        margin-right: 12px;
    }
    ul.tabs li .img .img-ar {
        background-color: #e0e0e0;
        position: relative;
        width: 32px;
        height: 32px;
    }
    ul.tabs li .img .img-ar img, ul.tabs li .img .img-ar svg, ul.tabs li .img .img-ar video {
        bottom: 0;
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
    }
}

.tabs-wrapper {
    position: relative;
}

.tab {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tab-hidden-init {
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    visibility: hidden;
    pointer-events: none;
}


/* custom pages */

ul.tabs.video-tabs {
    justify-content: center;
    align-items: stretch;
    margin-bottom: 0;
    background: #f1715a;
}

ul.tabs.video-tabs li {
    align-self: stretch;
    border: 0;
    padding: 60px 20px 48px;
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    color: #000;
}

ul.tabs.video-tabs li.active {
    color: #fff;
}

@media (max-width: 48rem) {
    ul.tabs.video-tabs li::before {
        display: none;
    }

    ul.tabs.video-tabs li.active span::before {
        display: none;
    }
}

ul.tabs.video-tabs li {
    width: 16.5%;
}

.video-tab-img {
    height: 64px;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.tabs.video-tabs li.video-tab-1,
.tabs-wrapper .video-tab-1 {
    background: #86a6ca;
}

ul.tabs.video-tabs li.video-tab-1 svg {
    width: 61px;
    height: 58px;
}

ul.tabs.video-tabs li.video-tab-2,
.tabs-wrapper .video-tab-2 {
    background: #ca9669;
}

ul.tabs.video-tabs li.video-tab-2 svg {
    width: 60px;
    height: 41px;
}

ul.tabs.video-tabs li.video-tab-2 svg * {
    stroke: #f44336;
}

ul.tabs.video-tabs li.video-tab-3,
.tabs-wrapper .video-tab-3 {
    background: #f3c4a9;
}

ul.tabs.video-tabs li.video-tab-3 svg {
    width: 38px;
    height: 60px;
}

ul.tabs.video-tabs li.video-tab-3 svg * {
    stroke: #ffc107;
}

ul.tabs.video-tabs li.video-tab-4,
.tabs-wrapper .video-tab-4 {
    background: #f0c4cf;
}

ul.tabs.video-tabs li.video-tab-4 svg {
    width: 60px;
    height: 38px;
}

ul.tabs.video-tabs li.video-tab-4 svg * {
    stroke: #9e9e9e;
}

ul.tabs.video-tabs li.video-tab-5,
.tabs-wrapper .video-tab-5 {
    background: #fde891;
}

ul.tabs.video-tabs li.video-tab-5 svg {
    width: 59px;
    height: 59px;
}

ul.tabs.video-tabs li.video-tab-5 svg * {
    stroke: #673ab7;
}

ul.tabs.video-tabs li.active svg * {
    stroke: #fff!important;
}