@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-Light.eot");
  src: local("Segoe UI Light"), local("SegoeUI-Light"), url("../fonts/segoe/SegoeUI-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-Light.woff") format("woff"), url("../fonts/segoe/SegoeUI-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-BoldItalic.eot");
  src: local("Segoe UI Bold Italic"), local("SegoeUI-BoldItalic"), url("../fonts/segoe/SegoeUI-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-BoldItalic.woff") format("woff"), url("../fonts/segoe/SegoeUI-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-SemiBold.eot");
  src: local("Segoe UI Semibold"), local("SegoeUI-SemiBold"), url("../fonts/segoe/SegoeUI-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-SemiBold.woff") format("woff"), url("../fonts/segoe/SegoeUI-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI.eot");
  src: local("Segoe UI"), local("SegoeUI"), url("../fonts/segoe/SegoeUI.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI.woff") format("woff"), url("../fonts/segoe/SegoeUI.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-Bold.eot");
  src: local("Segoe UI Bold"), local("SegoeUI-Bold"), url("../fonts/segoe/SegoeUI-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-Bold.woff") format("woff"), url("../fonts/segoe/SegoeUI-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Segoe UI';
  src: url("../fonts/segoe/SegoeUI-Italic.eot");
  src: local("Segoe UI Italic"), local("SegoeUI-Italic"), url("../fonts/segoe/SegoeUI-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/segoe/SegoeUI-Italic.woff") format("woff"), url("../fonts/segoe/SegoeUI-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic; }

/* posters */
.posters-list {
  display: block;
  font-size: 0;
  margin: 10px -10px; }
  .posters-list.clear {
    margin-left: -10px;
    margin-right: -10px; }
  .posters-list > li {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
    width: 16.666%;
    padding: 10px; }
    .posters-list > li:nth-child(5n) .poster .card-overlay {
      left: auto;
      right: 100%; }
    .posters-list > li.full-size ~ li:nth-child(5n) {
      background-color: transparent; }
      .posters-list > li.full-size ~ li:nth-child(5n) .poster .card-overlay {
        right: auto;
        left: 100%; }
      .posters-list > li.full-size ~ li:nth-child(5n) + li .poster .card-overlay {
        left: auto;
        right: 100%; }
  .posters-list.half-part-list > li {
    width: 33.33%; }
    .posters-list.half-part-list > li:nth-child(3n) .poster .card-overlay {
      left: auto;
      right: 100%; }
  .posters-list.video-hover-list > li {
    width: 20%; }
    .posters-list.video-hover-list > li:nth-child(5n) .poster .card-overlay {
      left: auto;
      right: 100%; }
    .posters-list.video-hover-list > li:nth-child(6n) .poster .card-overlay {
      left: 100%;
      right: auto; }
  .posters-list.video-hover-list .poster .image-cover {
    padding-top: 56.25%;
    background-color: #000; }
    .posters-list.video-hover-list .poster .image-cover > img {
      top: 50%;
      left: 0;
      height: auto;
      width: 100%;
      -webkit-transform: translateY(-50%) translateX(0);
      transform: translateY(-50%) translateX(0); }
  .posters-list.video-hover-list .poster .video-detail:after {
    display: none; }
  .posters-list.video-hover-list .poster .bottom-part {
    position: relative; }
    .posters-list.video-hover-list .poster .bottom-part .progress {
      position: absolute;
      background-color: #2DB72D;
      height: 5px;
      z-index: 2; }
      .posters-list.video-hover-list .poster .bottom-part .progress.danger {
        background-color: #ff9100; }
      .posters-list.video-hover-list .poster .bottom-part .progress.default {
        background-color: #898989; }
  .posters-list.small-caption .poster .card-overlay {
    width: 80%; }
  .posters-list.small-caption .poster .static-list > .item {
    display: block; }
    .posters-list.small-caption .poster .static-list > .item .description,
    .posters-list.small-caption .poster .static-list > .item .title {
      display: block;
      width: 100%;
      padding: 0; }
    .posters-list.small-caption .poster .static-list > .item .description {
      margin-top: 5px; }

.poster {
  display: block;
  width: calc(100% + 20px);
  height: auto;
  color: inherit;
  color: #fff;
  font-size: 14px;
  margin: -10px;
  padding: 10px;
  position: relative;
  transition: background-color .3s; }
  .poster .image-cover {
    transition: .2s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  .poster img[src*="flags"][src$=".svg"] {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    bottom: 2px;
    margin-left: 1px;
    width: auto;
    height: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2); }
  .poster .bottom-part {
    position: relative; }
  .poster .video-detail {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: block;
    width: 100%;
    white-space: nowrap;
    position: relative;
    padding: 5px 0;
    z-index: 3; }
    .poster .video-detail:after {
      content: '';
      display: block;
      position: absolute;
      width: auto;
      height: 5px;
      left: 0;
      right: 0;
      top: 0;
      background: #2DB72D; }
    .poster .video-detail .icon {
      color: #2DB72D;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      bottom: 2px; }
    .poster .video-detail dt, .poster .video-detail dd {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .poster .video-detail dt {
      width: calc(100% - 50px);
      text-transform: uppercase;
      color: #fff;
      padding: 7px 5px 7px 0; }
    .poster .video-detail dd {
      width: 50px;
      text-align: right;
      padding-right: 5px; }
      .poster .video-detail dd .icon {
        font-size: 18px;
        color: inherit !important;
        margin-bottom: 0px; }
      .poster .video-detail dd .icon.large {
        font-size: 40px;
        line-height: 14px; }
    .poster .video-detail.danger .icon {
      color: #f8af22; }
    .poster .video-detail.danger:after {
      background: #f8af22; }
    .poster .video-detail.default .icon {
      color: #bababa; }
    .poster .video-detail.default:after {
      background: transparent; }
  .poster .model-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .poster .statistic {
    font-size: 12px;
    margin-top: 5px; }
    .poster .statistic [class*="col-"] {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    .poster .statistic .icon {
      font-size: 14px;
      vertical-align: middle;
      position: relative;
      bottom: 1px; }
      .poster .statistic .icon.icon-eye {
        font-size: 17px; }
      .poster .statistic .icon:first-child {
        margin-right: 10px; }
      .poster .statistic .icon:last-child {
        margin-left: 8px; }
  .poster .caption {
    margin: 15px 0; }
  .poster .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2; }
    .poster .image-overlay img {
      display: block;
      width: auto;
      height: auto;
      max-width: 40%;
      margin: 0 auto;
      position: static;
      -webkit-transform: none;
      transform: none;
      left: auto; }
  .poster .card-overlay {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
    background-color: #313131;
    z-index: 4;
    padding: 0 0 0 10px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s; }
    .poster .card-overlay .outer {
      opacity: 0;
      height: 100%;
      padding-bottom: 64px;
      -webkit-transform: translateY(10px) translateZ(0);
      transform: translateY(10px) translateZ(0); }
    .poster .card-overlay .btn-cover {
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 100%;
      text-align: center; }
    .poster .card-overlay .scrolled {
      height: 100%;
      overflow: hidden;
      padding-top: 15px;
      padding-right: 15px; }
  .poster:hover {
    color: #fff;
    text-decoration: none;
    background-color: #313131; }
    .poster:hover .card-overlay {
      visibility: visible;
      opacity: 1; }
      .poster:hover .card-overlay .outer {
        transition: opacity .3s, -webkit-transform .3s;
        transition: opacity .3s, transform .3s;
        transition: opacity .3s, transform .3s, -webkit-transform .3s;
        -webkit-transform: translateY(0) translateZ(0);
        transform: translateY(0) translateZ(0);
        opacity: 1; }
  .poster:focus {
    color: #fff; }

@media (max-width: 1600px) {
  /* posters */
  .posters-list > li.full-size + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list > li.full-size + li + li .poster .card-overlay {
    right: 100%;
    left: auto; }
  .posters-list > li.full-size ~ li:nth-child(5n) {
    background-color: transparent; }
    .posters-list > li.full-size ~ li:nth-child(5n) .poster .card-overlay {
      right: auto;
      left: 100%; }
    .posters-list > li.full-size ~ li:nth-child(5n) + li .poster .card-overlay {
      right: auto;
      left: 100%; }
  .posters-list > li.full-size ~ li:nth-child(5n) .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list > li.full-size ~ li:nth-child(5n) + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list > li.full-size ~ li:nth-child(5n) + li + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list > li.full-size ~ li:nth-child(5n) + li + li + li .poster .card-overlay {
    right: 100%;
    left: auto; } }

@media (max-width: 1600px) {
  .posters-list > li {
    width: 20%; }
    .posters-list > li:nth-child(6n) .poster .card-overlay {
      left: 100%;
      right: auto; }
    .posters-list > li:nth-child(5n) .poster .card-overlay {
      right: 100%;
      left: auto; }
  .posters-list.middle-spaced > li {
    width: 25%; } }

@media (max-width: 1520px) {
  .posters-list.video-hover-list > li {
    width: 25%; }
    .posters-list.video-hover-list > li:nth-child(4n) .poster .card-overlay {
      left: auto;
      right: 100%; }
    .posters-list.video-hover-list > li:nth-child(5n) {
      background-color: transparent; }
      .posters-list.video-hover-list > li:nth-child(5n) .poster .card-overlay {
        left: 100%;
        right: auto; }
    .posters-list.video-hover-list > li.full-size ~ li:nth-child(4n) .poster .card-overlay {
      left: 100%;
      right: auto; }
    .posters-list.video-hover-list > li.full-size ~ li:nth-child(4n) + li .poster .card-overlay {
      right: auto;
      left: 100%; }
    .posters-list.video-hover-list > li.full-size ~ li:nth-child(4n) + li + li .poster .card-overlay {
      right: auto;
      left: 100%; }
    .posters-list.video-hover-list > li.full-size ~ li:nth-child(4n) + li + li + li .poster .card-overlay {
      right: 100%;
      left: auto; }
    .posters-list.video-hover-list > li.full-size + li .poster .card-overlay {
      right: auto;
      left: 100%; }
    .posters-list.video-hover-list > li.full-size + li + li .poster .card-overlay {
      right: auto;
      left: 100%; }
    .posters-list.video-hover-list > li.full-size + li + li + li .poster .card-overlay {
      right: auto;
      left: 100%; }
    .posters-list.video-hover-list > li.full-size + li + li + li + li .poster .card-overlay {
      right: 100%;
      left: auto; } }

@media (max-width: 1280px) {
  .posters-list > li {
    width: 25%; }
    .posters-list > li:nth-child(5n) .poster .card-overlay {
      left: 100%;
      right: auto; }
    .posters-list > li:nth-child(4n) .poster .card-overlay {
      right: 100%;
      left: auto; } }

@media (max-width: 1199px) {
  .posters-list.middle-spaced > li {
    width: 33.33%; }
  .posters-list.video-hover-list > li {
    width: 33.33%; }
    .posters-list.video-hover-list > li:nth-child(4n) .poster .card-overlay {
      left: 100%;
      right: auto; }
    .posters-list.video-hover-list > li:nth-child(3n) .poster .card-overlay, .posters-list.video-hover-list > li:nth-child(6n) .poster .card-overlay {
      left: auto;
      right: 100%; }
  .posters-list.video-hover-list > li.full-size ~ li:nth-child(4n) .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size ~ li:nth-child(4n) + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size ~ li:nth-child(4n) + li + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size ~ li:nth-child(4n) + li + li + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size + li + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size + li + li + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size + li + li + li + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size ~ li:nth-child(3n) + li .poster .card-overlay {
    right: auto;
    left: 100%; }
  .posters-list.video-hover-list > li.full-size ~ li:nth-child(3n) + li + li .poster .card-overlay {
    right: 100% !important;
    left: auto !important; } }

@media (max-width: 992px) {
  .posters-list > li {
    width: 33.3333%; }
    .posters-list > li:nth-child(4n) .poster .card-overlay {
      left: 100%;
      right: auto; }
    .posters-list > li:nth-child(3n) .poster .card-overlay {
      right: 100%;
      left: auto; }
  .posters-list.middle-spaced > li {
    width: 50%; }
  .posters-list.small-caption .poster .card-overlay {
    width: 85%; }
    .posters-list.small-caption .poster .card-overlay .btn-cover .btn {
      width: 100%;
      display: block; } }

@media (max-width: 768px) {
  .posters-list {
    margin: 0 -10px; }
    .posters-list > li {
      width: 50%; }
      .posters-list > li:nth-child(3n) .poster .card-overlay {
        left: 100%;
        right: auto; }
      .posters-list > li:nth-child(2n) .poster .card-overlay {
        right: 100%;
        left: auto; }
    .posters-list.half-part-list > li {
      width: 50%; }
      .posters-list.half-part-list > li:nth-child(3n) .poster .card-overlay {
        right: auto;
        left: 100%; }
      .posters-list.half-part-list > li:nth-child(2n) .poster .card-overlay {
        left: auto;
        right: 100%; }
    .posters-list.video-hover-list > li {
      width: 50%; }
    .posters-list.small-caption .poster .card-overlay {
      width: 100%; }
  .poster .card-overlay {
    opacity: 1;
    visibility: visible;
    position: static;
    height: auto;
    background-color: transparent;
    padding-left: 0; }
    .poster .card-overlay .outer {
      -webkit-transform: none;
      transform: none;
      opacity: 1;
      padding-bottom: 0; }
    .poster .card-overlay .btn-cover {
      padding-left: 0;
      padding-right: 0;
      margin-top: 15px;
      position: static; }
      .poster .card-overlay .btn-cover .btn {
        display: block; }
    .poster .card-overlay .scrolled {
      padding-right: 10px;
      min-height: 420px; }
  .poster .static-list .item.hidden-xs {
    display: none; }
  .poster .static-list .item .title,
  .poster .static-list .item .description {
    width: 100%;
    display: block;
    padding: 0; }
  .poster .static-list .item .title {
    margin-bottom: 5px; } }

@media (max-width: 640px) {
  .posters-list > li {
    display: block;
    width: 100%; }
  .posters-list.half-part-list > li {
    width: 100%; }
  .posters-list.middle-spaced > li {
    width: 100%; }
  .posters-list.video-hover-list > li {
    width: 100%; }
  .poster .card-overlay {
    padding-bottom: 10px; }
    .poster .card-overlay .scrolled {
      min-height: unset; } }