/* --------------------------------------------------
    
    DIGITAL TILES
    
-------------------------------------------------- */

.dgt-tiles {
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
    
    background-color: #111;
}

/* -------------------------
    TILE
------------------------- */

.dgt-tiles .tile {
    width: 236px;
    height: 130px;
    display: block;
    overflow: hidden;
    position: relative;

    text-decoration: none;
}

.dgt-tiles .tile img {
    width: 100%;
    display: block;
    margin: 0;
}

/* -------------------------
    OVERLAY
------------------------- */

.dgt-tiles .tile:before {
    content: ' ';
    display: block;
    
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: #000;
    opacity: 0.6;
    text-align:center;
}
.dgt-tiles .tile:hover:before {
    top: 0;
}

/* -------------------------
    ICON
------------------------- */

.dgt-tiles .tile:after {
    content: ' ';
    width: 22px;
    height: 22px;
    display: none;
    
    z-index: 1;
    position: absolute;
    right: 15px;
    bottom: 15px;

    background-image: url(oj-img/play.svg);
    background-repeat: no-repeat;
    background-position: -34px -34px;
}
.dgt-tiles .tile:hover:after {
    display: block;
}

.lyt-mo .dgt-tiles .tile:after {
    display: block;
    right: auto;
    left: 123px;
}
.lyt-mo .dgt-tiles .tile:hover:after {
    display: block;
    right: auto;
    left: 123px;
    background-position: -34px -64px;
}

/* -------------------------
    INFOS
------------------------- */

.dgt-tiles .tile-infos {
    display: none;
    padding: 15px;
    padding-right: 52px;

    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    color: #fff;
    font-size: 13px;
    line-height: 1.25;
}

.dgt-tiles .tile:hover .tile-infos {
    display: block;
}

.lyt-mo .dgt-tiles {
    padding: 15px;
}
.lyt-mo .dgt-tiles .tile {
    /*float: left;*/
    /*margin: 0 1px 1px 0;*/
}

.lyt-mo .dgt-tiles {
    /*background-color: transparent;*/
}
.lyt-mo .dgt-tiles .tile {
    height: 88px;
    width: auto;
    margin-bottom: 4px;
    background-color: #222;
}
.lyt-mo .dgt-tiles .tile img {
    width: 160px;
}
.lyt-mo .dgt-tiles .tile:before {
    content: ' ';
    display: none;
}
.lyt-mo .dgt-tiles .tile-infos {
    left: 160px;
    padding: 10px 15px;
    display: block;
    top: 0;
    bottom: auto;
}