.selectable .item{width:calc(52% - 20px);margin:10px 10px 0;height:400px}
.selectable .item .figure{transform:translateX(50%);bottom:0;right:50%;height:80%}
.selectable .item .pic{width:150px;left:25px;top:30px}
.selectable .item .pic .icon{margin-bottom:15px;object-fit:contain;object-position:center;max-height:50px;width:100%}
.selectable .item .info{width:150px;right:25px;top:40px}
.selectable .item .info .text{line-height:2;text-align:justify;opacity:.85;margin:10px 0;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:8;line-clamp:8;-webkit-box-orient:vertical}
.selectable .item .data{right:20px;bottom:20px;width:calc(100% - 40px)}
.selectable .item .data .inf{margin-left:30px}
.selectable .item .data .inf .icon{margin-left:3px;height:16px}
.selectable .item .data .inf .icon.ic-imdb,.selectable .item .data .inf .icon.ic-meta,.selectable .item .data .inf .icon.ic-tomato{background-size:contain !important;margin-left:8px}
.selectable .item .data .inf .icon.ic-meta{width:16px}
.selectable .item .iconx{transition-duration:0.7s;width:50px;height:50px;left:75px;bottom:25px}
.selectable .item .iconx i{position:relative;z-index:100;margin:auto}
.selectable .item:hover .iconx:before{background-color:#5492ff;border-radius:50%;content:"";right:0;width:100%;z-index:10;position:absolute;top:0;height:100%;z-index:0;pointer-events:none;-webkit-animation:sonarWave 2s linear infinite;animation:sonarWave 2s linear infinite}
.selectable .item .toggle-btn{display:none}
.selectable .item.not-active{width:calc(12% - 20px)}
.selectable .item.not-active *{opacity:0}
.selectable .item.not-active .figure{opacity:1;height:100%}
.selectable .item.not-active .toggle-btn{display:block}

.selectable .item .bgblur{z-index:-1;filter:blur(10px);position:absolute;top:0;right:0;height: 100%;z-index:0;opacity:.6}
.selectable .item .figureb{-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,1),rgba(0,0,0,0));-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:left top;transform:translateX(50%);bottom:0;right:50%;height:100%}

.selectable .item.not-active .figureb{-webkit-mask-image: linear-gradient(to left,rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,1));opacity:1}

@media only screen and (max-width:920px){
.selectable .item{margin:5px 7.5px 7.5px;width:350px;border:0;height:200px}
.selectable .item .bgblur{filter:blur(10px) brightness(.7)}
.selectable .item .iconx,.selectable .item .pic{display:none}
.selectable .item .info{width:calc(100% - 40px);top:20px;right:20px}
.selectable .item .info .title{text-shadow: 0 0 5px #000;font-size:18px;font-weight:bold}
.selectable .item .info .text{text-shadow: 0 0 5px #000;margin-top:0;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-size:14px}
.selectable .item .info .text,.selectable .item .info .text *{font-weight:400}
.selectable .item .data .inf{text-shadow: 0 0 5px #000;margin:5px 0 0 15px;font-size:13px;font-weight:500}
.selectable .item .data .inf .icon{font-size:14px;margin-left:10px}
.selectable .item .data .inf i.rt-icon{margin:0 0 0 5px !important}
.selectable .item .data .inf i.ic-imdb,.selectable .item .data .inf i.icon{margin-top:1px}
}
@media only screen and (max-width:640px){
.selectable .item{width:calc(100vw - 60px)}
}