/* 
.box
{
    position: relative;
    width: 100%;
    height: 135px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    transition: .5s;
}

.box.assistindo
{
    pointer-events: none;
    background: rgba(238, 255, 0, 0.1);
}

.box.liberado
{
    pointer-events: none;
    background: gray;
    color: beige;
}

.box .imgbox
{
    position: relative;
}

.box .imgbox img
{
    transition: .5s;
}

.box.assistindo .imgbox img
{
   opacity: 1;
}

.box .content
{
    position: absolute;
    bottom: -40px;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    transition: .5s;
    opacity: 0;
}

.box.assistindo .content
{
    opacity: 1;
    bottom: 0;
}

.box .content
{
    font-size: 20px;
    color: #fff;
    font-weight: 700;
}

.box .content h6
{
    margin: 0;
}

.box .content p
{
    font-size: 18px;
    color: #fff;
    font-weight: 400;
} */

.box
{
    position: relative;
    width: 100%;
    height: 105px;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    transition: .5s;
    /* margin-bottom: 35px; */
}

.box:hover
{
    transform: translateY(-5px);
    box-shadow: 0 50px 50x rgba(0,0,0,.5);
}

.box.assistindo
{
    pointer-events: none;
    background: rgb(255, 217, 0);
}

.box.bloqueado
{
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
}

.box .icone{
    position: absolute;
    margin-left: 50%;
    left: -20px;
    top: 15px;
    color: white;
    opacity: 1;
}

.box .imgbox
{
    position: relative;
}

.box .imgbox img
{
    transition: .5s;
    width: 200px;
}

.box:hover .imgbox img
{
    opacity: .7;
    transform: translateY(-10px);
}

.box.assistindo .imgbox img
{
    opacity: .8;
    transform: translateY(-10px);
}

.box.bloqueado .imgbox img
{
    opacity: .2;
    transform: translateY(-10px);
}

.box .content
{
    position: absolute;
    /* bottom: -40px; */
    /* opacity: 0; */
    left: 0;
    padding: 0 20px;
    box-sizing: border-box;
    transition: .5s;
    opacity: 1;
    bottom: 0;
    text-shadow: 1px 2px 3px black;
}
/* 
.box:hover .content,
.box.assistindo .content
{
    
} */


.box .content
{
    font-size: 20px;
    color: #fff;
    font-weight: 700;
}

.box .content .icone
{
    font-size: 30px;
    left: 50%;
    position: relative;
    margin-left: -5px;
    top: -15px;
}


.box .content h6
{
    margin: 0;
    line-height: 0.5;
}

.box .content p
{
    font-size: 18px;
    color: #fff;
    font-weight: 400;
}