.posterItem { margin: 3px; text-shadow: none; font-weight: normal!important; display: inline-block; font-size: 14px; position: relative; color: #fff!important; text-decoration: none; text-align: left; overflow: hidden; border: 1px solid #555; } .posterItem:hover { -moz-box-shadow: 0 0 20px 3px #2572EB; -webkit-box-shadow: 0 0 20px 3px #2572EB; box-shadow: 0 0 20px 3px #2572EB; } .posterItemImage { background-size: contain; background-repeat: no-repeat; background-position: center bottom; background-color: #000; } .transparentPosterItem .posterItemImage { background-color: transparent; } .defaultPosterItemImage { background-color: #999; } .borderlessPosterItem { border: 0; } .posterItemText { text-overflow: ellipsis; overflow: hidden; text-wrap: none; white-space: nowrap; padding: 5px 4px 4px; background: #181818; text-shadow: none; } .posterItemTextCentered { text-align: center; } .posterItemText + .posterItemText { padding-top: 2px; border-top: 0; } .posterItemDefaultText { position: absolute; top: 30%; left: 0; right: 0; text-align: center; } .squarePosterItem { width: 150px; } .squarePosterItem .posterItemImage { height: 150px; } .backdropPosterItem { width: 160px; } .backdropPosterItem .posterItemImage { height: 90px; } .smallBackdropPosterItem { width: 160px; } .smallBackdropPosterItem .posterItemImage { height: 90px; } .portraitPosterItem { width: 100px; border-color: #555; } .smallBackdropPosterItem { border-color: #555; } .portraitPosterItem .posterItemImage { height: 150px; } .posterItemProgress { font-size: 12px; color: #bbb; vertical-align: middle; } .posterItemProgress .itemProgressBar { height: 12px; width: 35%; } .portraitPosterItem .itemProgressText { display: none; } .portraitPosterItem .itemProgressBar { width: 100%; } .posterItem .itemProgressText { margin-left: 5px; vertical-align: middle; } @media all and (min-width: 650px) { .backdropPosterItem { width: 192px; } .backdropPosterItem .posterItemImage { height: 108px; } } @media all and (min-width: 750px) { .portraitPosterItem { width: 100px; } .portraitPosterItem .posterItemImage { height: 150px; } } @media all and (min-width: 1200px) { .backdropPosterItem { width: 224px; } .backdropPosterItem .posterItemImage { height: 126px; } .backdropPosterItem .itemProgressBar { width: 55%; } .portraitPosterItem { width: 108px; } .portraitPosterItem .posterItemImage { height: 162px; } .smallBackdropPosterItem { width: 192px; } .smallBackdropPosterItem .posterItemImage { height: 108px; } } @media all and (min-width: 1440px) { .squarePosterItem { width: 170px; } .squarePosterItem .posterItemImage { height: 170px; } .portraitPosterItem { width: 134px; } .portraitPosterItem .posterItemImage { height: 201px; } .backdropPosterItem { width: 256px; } .backdropPosterItem .posterItemImage { height: 144px; } .portraitPosterItem .itemProgressText { display: inline; } .portraitPosterItem .itemProgressBar { width: 20%; } } @media all and (min-width: 1920px) { .squarePosterItem { width: 200px; } .squarePosterItem .posterItemImage { height: 200px; } .portraitPosterItem { width: 160px; } .portraitPosterItem .posterItemImage { height: 240px; } .backdropPosterItem { width: 288px; } .backdropPosterItem .posterItemImage { height: 162px; } .portraitPosterItem .itemProgressBar { width: 30%; } }