.contain
{
     padding: 0 10px;
     margin: 0;
     background: #f7f7f7;
     color: #ecf0f1;
     box-sizing: border-box;
     width: 100%;
}
.contain::-webkit-scrollbar
{
     display: none;
} 

.rot-title
{
     font: 300 30px/1.3 'Open Sans', sans-serif;
     color: #333;
     padding: 20px 0 0 10px;
}

.row 
{
     overflow: scroll;
     overflow-y: hidden;
     width: 100%;
     box-sizing: border-box;
}
.row__inner
{
     transition: 450ms -webkit-transform;
     transition: 450ms transform;
     transition: 450ms transform, 450ms -webkit-transform;
     font-size: 0;
     white-space: nowrap;
     margin: 56px 0;
     padding-bottom: 10px;
     box-sizing: border-box;
}
.tile
{
     position: relative;
     display: inline-block;
     width: 170px;
     height: 220px;
     margin-right: 10px;     
     cursor: pointer;
     transition: 450ms all;
     -webkit-transform-origin: center left;
     transform-origin: center left;
}
.tile__img
{
     width: 170px;
     height: 220px;
     -o-object-fit: cover;
     object-fit: cover;
}
.tile__details
{
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
     font: 11px/1.4 'Open Sans', sans-serif;
	color: #fff;
     -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
     opacity: 0;
     background: linear-gradient(to top, rgba(100, 100, 100, 0.9) 0%, rgba(100, 100 ,100, 0) 100%);
     transition: 450ms opacity;
}
.tile:hover .tile__details
{
     opacity: 1;
}
.tile__title
{
     position: absolute;
     bottom: 0;
     padding: 10px;
     white-space: normal;
}
.row__inner:hover
{
     -webkit-transform: translate3d(-10px, 0, 0);
     transform: translate3d(-10px, 0, 0);
}
.row__inner:hover .tile
{
     opacity: 0.3;
}
.row__inner:hover .tile:hover
{
     -webkit-transform: scale(1.5);
     transform: scale(1.5);
     opacity: 1;
}
.tile:hover ~ .tile
{
     -webkit-transform: translate3d(125px, 0, 0);
     transform: translate3d(125px, 0, 0);
}