.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
    width: 10em
}

.video-js .vjs-controls-disabled .vjs-big-play-button {
    display: none!important
}

.video-js .vjs-control {
    width: 3em
}

.video-js .vjs-menu-button-inline:before {
    width: 1.5em
}

.vjs-menu-button-inline .vjs-menu {
    left: 3em
}

.vjs-paused.vjs-has-started.video-js .vjs-big-play-button,.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button {
    display: block
}

.video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button {
    display: none!important
}

.video-js .vjs-mouse-display:after,.video-js .vjs-play-progress:after {
    padding: 0 .4em .3em
}

.video-js.vjs-ended .vjs-big-play-button {
    display: block !important;
}

.video-js *,.video-js:after,.video-js:before {
    box-sizing: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit
}

.video-js.vjs-fullscreen,.video-js.vjs-fullscreen .vjs-tech {
    width: 100%!important;
    height: 100%!important
}

.video-js {
    font-size: 14px;
    overflow: hidden
}

.video-js .vjs-control {
    color: inherit
}

.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
    width: 8.35em
}

.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content {
    height: 3em;
    width: 6.35em
}

.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before {
    text-shadow: 0 0 1em #fff,0 0 1em #fff,0 0 1em #fff
}

.video-js .vjs-spacer,.video-js .vjs-time-control {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.video-js .vjs-time-control {
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: auto;
    padding: 0;
}

.video-js .vjs-time-control.vjs-time-divider {
    width: 14px
}

.video-js .vjs-time-control.vjs-time-divider div {
    width: 100%;
    text-align: center
}

.video-js .vjs-time-control.vjs-current-time {
    margin-left: 2em
}

.video-js .vjs-time-control .vjs-current-time-display,.video-js .vjs-time-control .vjs-duration-display {
    width: 100%
}

.video-js .vjs-time-control .vjs-current-time-display {
    text-align: right
}

.video-js .vjs-time-control .vjs-duration-display {
    text-align: left
}

.video-js .vjs-play-progress:before,.video-js .vjs-progress-control .vjs-play-progress:before,.video-js .vjs-remaining-time,.video-js.vjs-live .vjs-time-control.vjs-current-time,.video-js.vjs-live .vjs-time-control.vjs-duration,.video-js.vjs-live .vjs-time-control.vjs-time-divider,.video-js.vjs-no-flex .vjs-time-control.vjs-remaining-time {
    display: none
}

.video-js.vjs-no-flex .vjs-time-control {
    display: table-cell;
    width: 4em
}

.video-js .vjs-progress-control {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: .5em;
    top: -.5em;
    transition: all 0.2s ease 1s;
    -webkit-transition: all 0.2s ease 1s;
    -o-transition: all 0.2s ease 1s;
}

.video-js .vjs-progress-control .vjs-load-progress,.video-js .vjs-progress-control .vjs-play-progress,.video-js .vjs-progress-control .vjs-progress-holder {
    height: 100%
}

.video-js .vjs-progress-control .vjs-progress-holder {
    margin: 0;
}

.video-js .vjs-progress-control:hover {
    height: 1.5em;
    top: -1.5em;
    transition: all 0.1s ease 0s;
    -webkit-transition: all 0.1s ease 0s;
    -o-transition: all 0.1s ease 0s;
}

.video-js .vjs-control-bar {
    -webkit-transition: -webkit-transform .1s ease 0s;
    -moz-transition: -moz-transform .1s ease 0s;
    -ms-transition: -ms-transform .1s ease 0s;
    -o-transition: -o-transform .1s ease 0s;
    transition: transform .1s ease 0s
}

.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
    visibility: visible;
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateY(3em);
    -moz-transform: translateY(3em);
    -ms-transform: translateY(3em);
    -o-transform: translateY(3em);
    transform: translateY(3em);
    -webkit-transition: -webkit-transform 1s ease 0s;
    -moz-transition: -moz-transform 1s ease 0s;
    -ms-transition: -ms-transform 1s ease 0s;
    -o-transition: -o-transform 1s ease 0s;
    transition: transform 1s ease 0s
}

.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control {
    height: .25em;
    top: -.25em;
    pointer-events: none;
    -webkit-transition: height 1s,top 1s;
    -moz-transition: height 1s,top 1s;
    -ms-transition: height 1s,top 1s;
    -o-transition: height 1s,top 1s;
    transition: height 1s,top 1s
}

.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control {
    opacity: 0;
    -webkit-transition: opacity 1s ease 1s;
    -moz-transition: opacity 1s ease 1s;
    -ms-transition: opacity 1s ease 1s;
    -o-transition: opacity 1s ease 1s;
    transition: opacity 1s ease 1s
}

.video-js.vjs-live .vjs-live-control {
    margin-left: 1em
}

.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1em;
    margin-top: -1em;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border: none;
    border-radius: 50%;
    font-size: 3.5em;
    background-color: rgba(0,0,0,.45);
    color: #fff;
    -webkit-transition: border-color .4s,outline .4s,background-color .4s;
    -moz-transition: border-color .4s,outline .4s,background-color .4s;
    -ms-transition: border-color .4s,outline .4s,background-color .4s;
    -o-transition: border-color .4s,outline .4s,background-color .4s;
    transition: border-color .4s,outline .4s,background-color .4s
}

.video-js .vjs-menu-button-popup .vjs-menu {
    left: -3em
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background-color: transparent;
    width: 12em;
    left: -1.5em;
    padding-bottom: .5em
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
    background-color: #151b17;
    margin: .3em 0;
    padding: .5em;
    border-radius: .3em
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
    background-color: #2483d5
}

.video-js .vjs-big-play-button {
    background-color: rgba(12,51,77,0.8);
    font-size: 3em;
    border-radius: 0%;
    height: 2em !important;
    line-height: 2em !important;
    margin-top: -1em !important
}

.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
    background-color: #EF95BC
}

.video-js .vjs-control-bar2 {
    background-color: #0c334d
}

.video-js .vjs-control-bar {
    background-color: rgba(12,51,77,0.8) !important;
    color: #ffffff;
    font-size: 14px
}

.video-js .vjs-play-progress,.video-js  .vjs-volume-level {
    background-color: #EF95BC
}

.video-js .vjs-load-progress {
    background: rgba(255,255,255,0.3);
}

.video-js .vjs-logo {
    font-size: 3.5rem;
    margin-right: 10px;
    line-height: 2.8rem;
}

.video-js .vjs-marker {
    border-radius: 0 !important;
    width: 10px !important;
}

#videoWrapper {
    overflow: hidden;
    max-width: 960px;
}
#videoInnerWrapper {
    position: relative;
}

#videoPlayer {
    border: 2px solid rgba(12,51,77,1);
}

#videoPopup {
    padding: 0.2rem 0.5rem;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    text-align: center;
}

.playlist {
    display: flex;
}
.playlist .playlist-item {
    position: relative;
    overflow: hidden;
    padding: 0.5rem 1rem 0.5rem;
    display: inline-block;
    margin-right: .5rem;
    color: rgb(12,51,77);
    background-color: #eee;
    cursor: pointer;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}
.playlist .playlist-item:last-child {
    margin-right: 0;
}
.playlist .playlist-item:hover {
    background-color: #ddd;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}
.playlist .playlist-item.active {
    color: #EF95BC;
    background: rgba(12,51,77,1);
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}

.playlist .playlist-item .border-hover {
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
    height: 4px;
    background-color: #ccc;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
}
.playlist .playlist-item.active .border-hover {
    background-color: #EF95BC;
    width: 100% !important;
}
.playlist .playlist-item:hover .border-hover {
    width: 100%;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
}

#chapters .chapter.communication.active,
.video-js .vjs-marker.communication {
    background-color: rgba(50, 182, 184, 1) !important; /* #32b6b8; */
}
#chapters .chapter.maths.active,
.video-js .vjs-marker.maths {
    background-color: rgba(245, 161, 47, 1) !important; /* #f5a12f; */
}
#chapters .chapter.uict.active,
.video-js .vjs-marker.uict {
    background-color: rgba(207, 124, 180, 1) !important; /* #cf7cb4; */
}
#chapters .chapter.communication-tl1.active,
.video-js .vjs-marker.communication-tl1 {
    background-color: #ad8dc1 !important; 
}
#chapters .chapter.communication-tl2.active,
.video-js .vjs-marker.communication-tl2 {
    background-color: #aba8d2 !important;
}
#chapters .chapter.communication-tl3.active,
.video-js .vjs-marker.communication-tl3 {
    background-color: #71c3ed !important;
}
#chapters .chapter.communication-tl4.active,
.video-js .vjs-marker.communication-tl4 {
    background-color: #3bc0c8 !important;
}
#chapters .chapter.communication-tl5.active,
.video-js .vjs-marker.communication-tl5 {
    background-color: #80ceca !important;
}
#chapters .chapter.communication-tl6.active,
.video-js .vjs-marker.communication-tl6 {
    background-color: #bde1ca !important;
}

#chapters {
    background: rgba(12,51,77,1);
    max-height: 250px;
    overflow-y: scroll;
    border:2px solid rgba(12,51,77,1);
}
#chapters .chapter {
    position: relative;
    overflow: hidden;
    padding: 0.5rem;
    display: block;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background-clip: padding-box;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}
#chapters .chapter-time {
    float: right;
    position: relative;
    color: rgba(255,255,255,0.8);
    font-style: italic;
}
#chapters h5,
#chapters .chapter-text {
    position: relative;
}
#chapters .chapter-progress {
    background-color: rgba(0,0,0,0.1);
	/*background: linear-gradient(to left, rgba(12,51,77,0) 0%, rgba(12,51,77,1) 40px);*/
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .1s linear 0s;
    -webkit-transition: all .1s linear 0s;
    -o-transition: all .1s linear 0s;
}

.video-js .vjs-loading-spinner,
.video-js .vjs-loading-spinner:before,
.video-js .vjs-loading-spinner:after {
    background: #EF95BC;
    -webkit-animation: loading-anim 1s infinite ease-in-out;
    animation: loading-anim 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
    border-radius: 0;
    border: none;
}
.video-js .vjs-loading-spinner {
    color: #EF95BC;
    text-indent: -9999em;
    font-size: 8px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.video-js .vjs-loading-spinner:before,
.video-js .vjs-loading-spinner:after {
    position: absolute;
    top: 0;
    content: '';
    margin: 0;
}
.video-js .vjs-loading-spinner:before {
    left: -1.7em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.video-js .vjs-loading-spinner:after {
    left: 1.7em;
}
@-webkit-keyframes loading-anim {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes loading-anim {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}