.video-list *
{
    -webkit-transition: all 0.45s;
    -moz-transition: all 0.45s;
    -ms-transition: all 0.45s;
    -o-transition: all 0.45s;
    transition: all 0.45s;

    text-indent: 0;
    line-height: 1.5;
}

.video-list .video-item
{
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.video-list img
{
    width: 100%;
}

.video-list .video-item > a:hover
{
    cursor: pointer;
}

.video-list .video-item .fa-play-circle
{
    position: absolute;
    top: 28%;
    left: 42%;
    z-index: 1;
    font-size: 55px;
    line-height: 0.8;
    color: #bbb;
    background: #555;
    border-radius: 50%;
    opacity: 0.25;
}

.video-list .video-item > a:hover .fa-play-circle
{
    opacity: 0.90;
    color: rgba(0,0,0,0.8);
    background: rgba(250,250,250,0.8);
    box-shadow: 0 0 10px #000;
}

.video-list .video-item .video-detail
{
    background:rgba(0,0,0,0.5);
    position: absolute;
    width: 100%;
    bottom: -25%;
    padding: 5px 10px 0 10px;
}

.video-list .video-item:hover .video-detail
{
    background:rgba(0,0,0,0.75);
    position: absolute;
    bottom: 0;
    width: 100%;
}

.video-list .video-item .video-detail .title
{
    color: #fff;
    font-size: 14px;

    overflow: hidden;
    height: 22px;
    width: 85%;

    margin: 0;
}

[dir="rtl"] .video-list .video-item .video-detail .title
{
    font-family: "IRANSans","byekan";
}

[dir="ltr"] .video-list .video-item .video-detail .title
{
    font-family: "calibri";
}

.video-list .video-item .video-detail .download-link
{
    display: block;
    width: 25px;
    height: 25px;
    z-index: 1031;
    text-align: center;
    position: relative;
}


.video-list .video-item .video-detail .fa
{
    color: #fff;
    font-size: 14px;
    width: 100%;
    height: 25px;
    display: block;
    padding-top: 0;
}

.video-list .video-item .video-detail .fa:hover
{
    color: #8bf;
    font-size: 14px;
}

[dir="rtl"] .video-list .pull-left
{
    float: right !important;
}

[dir="rtl"] .video-list .pull-right
{
    float: left !important;
}

@media (max-width: 540px)
{
    .video-list > div
    {
        width: 100%;
    }
}