.videolibrary-clearfix:before,
.videolibrary-clearfix:after {
    content : " "; /* 1 */
    display : table; /* 2 */
}

.videolibrary-clearfix:after {
    clear : both;
}

.videolibrary-clearfix {
    *zoom : 1;
}

.shortcode-video-container {
    display            : none;
    -webkit-transition : display 0.5s;
    transition         : display 0.5s;
}

.shortcode-video-container.active {
    display : block;
}

.shortcode-video-container .shortcode-vl-video {
    display : block !important;
}

.video-thumbnail {
    display            : inline-block;
    position           : relative;

    -webkit-transition : border 0.5s;
    transition         : border 0.5s;
    margin-bottom:20px;
}

.video-thumbnail.active img {
    border : 2px solid #2be52b;
    box-sizing: border-box;
}

.video-state-indicator {
    position           : absolute;
    bottom             : 5px;
    right              : 5px;

    display            : none;
    width              : 48px;
    height             : 26px;
    background         : rgba(0, 0, 0, 0.5);

    -webkit-transition : background 0.5s;
    transition         : background 0.5s;
    border-radius: 5px;
}


.video-state-indicator.progress-none {
    display    : block;
    background : rgba(0,0,0,0.25) url(/wp-content/themes/mtc/img/video-state-none.png) no-repeat center center;

}

#content .video-container .video-thumbnail img
{ margin-bottom:0; display:block; cursor:pointer; }

.video-state-indicator.progress-started {
    display    : block;
    background : rgba(0,0,0,0.25) url(/wp-content/themes/mtc/img/video-state-started.png) no-repeat center center;

}

.video-state-indicator.progress-completed {
    display    : block;
    background : rgba(0,0,0,0.25) url(/wp-content/themes/mtc/img/video-state-compled.png) no-repeat center center;
}


.video-progress .progress-legend {
    display : table;
    width   : 100%;
}

.video-progress .progress-legend div {
    display    : table-cell;
    width      : 33.333333%;
    text-align : center;
    color      : #aaa;
}

.video-progress .progress-legend div:first-child {
    text-align : left;
}

.video-progress .progress-legend div:last-child {
    text-align : right;
}


.video-progress .progress-elements {
    border-radius : 10px;
    width         : 100%;
    border        : 1px solid #cccccc;
}

.video-progress .progress-elements div {
    display : block;
    float   : left;
    height  : 10px;
}

.video-progress .progress-elements div:first-child {
    border-top-left-radius    : 5px;
    border-bottom-left-radius : 5px;
}

.video-progress .progress-elements div:last-child {
    border-top-right-radius    : 5px;
    border-bottom-right-radius : 5px;
}

.video-progress .progress-elements div.progress-none {
    background : rgba(142, 142, 142, 0.5);
}

.video-progress .progress-elements div.progress-started {
    background : rgba(255, 217, 0, 0.5);
}

.video-progress .progress-elements div.progress-completed {
    background : rgba(0, 255, 34, 0.5);
}

.video-progress .progress-indicator {
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    margin-bottom: 5px;
}