/*
  This mixin can be used to set the object-fit:
  @include object-fit(contain);
  or object-fit and object-position:
  @include object-fit(cover, top);
*/
@media (max-width: 767px) {
  #playlistPage .hero .zw-container {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start; } }

#playlistPage .hero .txt {
  font-size: 1rem;
  padding-top: 1.5rem; }
  #playlistPage .hero .txt h1 {
    width: 100%;
    text-transform: uppercase;
    font-family: "Lilita One", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 0.8;
    color: #fff;
    letter-spacing: -0.025em; }
    #playlistPage .hero .txt h1 small {
      display: block;
      font-family: "VAGRounded", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-weight: bold;
      margin-bottom: .5rem;
      letter-spacing: 0.02em;
      font-size: 40%; }

@media (min-width: 576px) and (max-width: 767px) {
  #playlistPage .hero .txt h1 {
    font-size: 3.5rem; } }

@media (min-width: 768px) and (max-width: 991px) {
  #playlistPage .hero .txt h1 {
    font-size: 5rem; } }
    @media (min-width: 768px) {
      #playlistPage .hero .txt h1 small {
        font-size: 25%; } }
    @media (min-width: 992px) {
      #playlistPage .hero .txt h1 {
        font-size: 6.25rem; } }

#playlistPage .social {
  text-align: right;
  padding: 2rem 0; }
  @media (max-width: 767px) {
    #playlistPage .social span {
      display: block; } }

#playlistPage .main > .embed-responsive {
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  /* this fixes the overflow:hidden in Chrome/Opera */ }

@media (min-width: 768px) {
  #playlistPage .main {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
    margin: auto; } }

@media (max-width: 767px) {
  #playlistPage .series {
    height: 300px;
    padding-bottom: 1rem; } }

@media (min-width: 768px) {
  #playlistPage .series {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
    padding-bottom: 2rem;
    margin: auto;
    height: 200px;
    overflow-x: hidden; } }

#playlistPage .seri {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media (max-width: 767px) {
    #playlistPage .seri {
      padding: 1px 0; } }
  @media (min-width: 768px) {
    #playlistPage .seri {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 22%;
      -ms-flex: 0 0 22%;
      flex: 0 0 22%;
      width: 22%;
      display: inline-block;
      margin-right: -4px; } }
  #playlistPage .seri .img {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
    @media (min-width: 768px) {
      #playlistPage .seri .img {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        border-width: 0 1px;
        border-style: solid;
        border-color: transparent; } }
  #playlistPage .seri .embed-responsive-item {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    font-family: "object-fit: cover; object-position: 50% 50%"; }
  #playlistPage .seri .txt {
    padding: .5rem; }
    @media (max-width: 767px) {
      #playlistPage .seri .txt {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%; } }
    @media (min-width: 768px) {
      #playlistPage .seri .txt {
        display: none; } }
    #playlistPage .seri .txt h3, #playlistPage .seri .txt .h3 {
      font-size: 1rem;
      font-weight: bold; }
    #playlistPage .seri .txt p {
      font-size: 80%; }

.zw-scroll .mCSB_container_wrapper {
  margin-bottom: 5px;
  margin-right: 5px; }

.zw-scroll .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  height: 5px; }
  .zw-scroll .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .zw-scroll .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
    margin: 0;
    height: 100%; }

.zw-scroll .mCSB_scrollTools.mCSB_scrollTools_vertical {
  width: 5px; }
  .zw-scroll .mCSB_scrollTools.mCSB_scrollTools_vertical .mCSB_dragger .mCSB_dragger_bar,
  .zw-scroll .mCSB_scrollTools.mCSB_scrollTools_vertical .mCSB_draggerRail {
    margin: 0;
    width: 100%; }

.zw-scroll .mCSB_scrollTools .mCSB_draggerRail {
  background-color: #e8e8e8; }

.zw-scroll .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #F9922B; }

.playlists {
  padding-top: 3rem; }
  @media (max-width: 767px) {
    .playlists > h1 {
      font-size: 1.5rem; } }
  @media (min-width: 768px) {
    .playlists > h1 {
      font-size: 3.125rem; } }

.playlist {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 13px;
  padding-left: 13px; }
  @media (min-width: 576px) {
    .playlist {
      padding-right: 13px;
      padding-left: 13px; } }
  @media (min-width: 768px) {
    .playlist {
      padding-right: 13px;
      padding-left: 13px; } }
  @media (min-width: 992px) {
    .playlist {
      padding-right: 13px;
      padding-left: 13px; } }
  @media (min-width: 1200px) {
    .playlist {
      padding-right: 13px;
      padding-left: 13px; } }
  @media (max-width: 767px) {
    .playlist {
      padding-top: 6.5px;
      padding-bottom: 6.5px; } }
  @media (min-width: 768px) {
    .playlist {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
      padding-top: 13px;
      padding-bottom: 13px; } }
  .playlist .pl-content {
    position: relative;
    border-radius: 1rem 1rem 0 1rem;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    /* this fixes the overflow:hidden in Chrome/Opera */ }
    .playlist .pl-content .img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1; }
      .playlist .pl-content .img img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 50% 50%;
        object-position: 50% 50%;
        font-family: "object-fit: cover; object-position: 50% 50%"; }
    .playlist .pl-content .txt {
      padding: 8.33333%; }
      .playlist .pl-content .txt > div {
        width: 60%;
        padding-top: 1rem; }
      .playlist .pl-content .txt h3, .playlist .pl-content .txt .h3 {
        font-weight: bold;
        height: 6.0375rem;
        margin-bottom: .5rem;
        text-shadow: 0 0 2px rgba(178, 178, 178, 0.9); }
      @media (min-width: 768px) {
        .playlist .pl-content .txt h3, .playlist .pl-content .txt .h3 {
          height: 8.05rem; } }
    .playlist .pl-content .badge {
      font-size: 70%; }
    .playlist .pl-content .btn {
      text-transform: uppercase;
      font-family: "Lilita One", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: inherit; }