/* channels Header
--------------------------------------------- */
.s-channels-header {
    position: relative;
    overflow: hidden;
    padding-top: 8rem;
    padding-bottom: 8rem;
    background-color: var(--main-color);
}

.channels-arrow-down {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

.channels-cutouts {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.channels-cutout {
    position: absolute;
    z-index: 1;
    width: auto;
    height: 95%;
    -webkit-transform: translate(0px, 100%);
    -ms-transform: translate(0px, 100%);
    transform: translate(0px, 100%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.channels-cutout-up {
  -webkit-transform: translate(0px, 0%);
  -ms-transform: translate(0px, 0%);
  transform: translate(0px, 0%);
}

.s-channels-header .marquee-wrapper-wrapper {
    overflow: hidden;
    width: 100vw;
    -webkit-transform: translate(-100%, 0px);
    -ms-transform: translate(-100%, 0px);
    transform: translate(-100%, 0px);
    -webkit-transition: -webkit-transform 500ms ease-in-out;
    transition: -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
    text-transform: uppercase;
}

.s-channels-header .marquee-wrapper-wrapper:nth-of-type(3) {
    position: relative;
    z-index: 3;
    margin-top: -2.25vw;
    -webkit-transform: translate(100%, 0px);
    -ms-transform: translate(100%, 0px);
    transform: translate(100%, 0px);
}

.s-channels-header .marquee-wrapper-wrapper:nth-of-type(3) .s-channels-header-heading {
    color: white;
}

.s-channels-header-heading {
    margin-right: 1vw;
    font-family: 'Drukxcond super', sans-serif;
    font-size: 20.5vw;
    line-height: 0.89;
    font-weight: 400;
}

.text-stroke {
    -webkit-text-stroke: 1px black;
    text-stroke: 1px black;
    color: transparent;
}

.s-channels-header .marquee-wrapper-wrapper:nth-of-type(3) .text-stroke {
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
}

.s-channels-header .b-marquee {
    will-change: transform;
    animation: marquee-horizontal 60s linear infinite;
}

.s-channels-header .marquee-wrapper-wrapper:nth-child(2) .b-marquee {
    will-change: transform;
    animation: marquee-horizontal-alt 60s linear infinite;
}


@media screen and (max-width: 767px) {
  .s-channels-header {
      position: relative;
      overflow: hidden;
      padding-top: 2rem;
      padding-bottom: 2rem;
  }

  .s-channels-header-heading {
      font-size: 60vw;
  }

  .s-channels-header .marquee-wrapper-wrapper:nth-of-type(3) {
      margin-top: -7vw;
  }

  .channels-arrow-down {
    bottom: 1rem;
  }
}


/* channels Main
--------------------------------------------- */

.channels-intro {
    max-width: 660px;
    margin-bottom: 4rem;
    font-weight: 400;
}

.channels-intro h1 {
  font-size: 56px;
}

.channels-grid {
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-areas: ".";
    -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto 1rem auto;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
}

.channels-grid-block {
    position: relative;
    padding-bottom: 85%;
    border: 1px solid #CCCCCC;
}

.channels-grid-block-hor {
    position: relative;
    padding-bottom: 40%;
    border: 1px solid #CCCCCC;
}

.channels-grid-block-inner {
    position: absolute;
    left: 0px;
    top: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    background-color: rgba(241, 90, 34, 0.9);
    opacity: 0;
    -webkit-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}

.channels-grid-block-logo {
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    height: 80px;
}

.channels-grid-block-inner-cta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.channels-grid-block-inner-cta svg {
  min-width: 20px;
  max-width: 20px;
  height: auto;
  margin-top: 0.5rem;
  margin-left: 0.75rem;
}

.channels-grid-block .channels-grid-block-inner,
.channels-grid-block-hor .channels-grid-block-inner {
    pointer-events: none;
}

.channels-grid-block:hover .channels-grid-block-inner,
.channels-grid-block-hor:hover .channels-grid-block-inner {
    opacity: 1;
    pointer-events: auto;
}

#channels-wslam {
    -ms-grid-row: span 6;
    grid-row-start: span 6;
    -ms-grid-row-span: 6;
    grid-row-end: span 6;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
}

#channels-leaguefits,
#channels-slam-university {
    -ms-grid-row: span 6;
    grid-row-start: span 6;
    -ms-grid-row-span: 6;
    grid-row-end: span 6;
    -ms-grid-column: span 1;
    grid-column-start: span 1;
    -ms-grid-column-span: 1;
    grid-column-end: span 1;
}

#channels-slam-high-school,
#channels-slam-ftw {
    -ms-grid-row: span 3;
    grid-row-start: span 3;
    -ms-grid-row-span: 3;
    grid-row-end: span 3;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
}

#channels-slam-kicks,
#channels-slam-rewind {
    -ms-grid-row: span 6;
    grid-row-start: span 6;
    -ms-grid-row-span: 6;
    grid-row-end: span 6;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
}

#channels-wslam {
  background-image: url('../jpg/wslam.jpg');
}

#channels-leaguefits {
  background-image: url('../jpg/leaguefits.jpg');
}

#channels-slam-university {
  background-image: url('../jpg/slam-university.jpg');
}

#channels-slam-high-school {
  background-image: url('../jpg/slam-high-school.jpg');
}

#channels-slam-kicks {
  background-image: url('../jpg/slam-kicks.jpg');
}

#channels-slam-rewind {
  background-image: url('../jpg/slam-rewind.jpg');
}

#channels-slam-ftw {
  background-image: url('../jpg/slamftw.jpg');
}


@media screen and (max-width: 991px) {

  #channels-leaguefits,
  #channels-slam-high-school {
    -ms-grid-row: span 6;
    grid-row-start: span 6;
    -ms-grid-row-span: 6;
    grid-row-end: span 6;
    -ms-grid-column: span 2;
    grid-column-start: span 2;
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
  }

  #channels-slam-university {
  -ms-grid-column: span 2;
  grid-column-start: span 2;
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
  -ms-grid-row: span 6;
  grid-row-start: span 6;
  -ms-grid-row-span: 6;
  grid-row-end: span 6;
}


  .channels-grid-block,
  .channels-grid-block-hor {
      padding-bottom: 120%;
  }
}


@media screen and (max-width: 767px) {

  .channels-intro h1 {
    font-size: 32px;
  }

  .channels-grid {
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }

  #channels-wslam,
  #channels-leaguefits,
  #channels-slam-high-school,
  #channels-slam-kicks,
  #channels-slam-rewind {
      -ms-grid-row: span 5;
      grid-row-start: span 5;
      -ms-grid-row-span: 5;
      grid-row-end: span 5;
      -ms-grid-column: span 3;
      grid-column-start: span 3;
      -ms-grid-column-span: 3;
      grid-column-end: span 3;
  }

  #channels-slam-university,
  #channels-slam-ftw {
      -ms-grid-column: span 3;
      grid-column-start: span 3;
      -ms-grid-column-span: 3;
      grid-column-end: span 3;
      -ms-grid-row: span 5;
      grid-row-start: span 5;
      -ms-grid-row-span: 5;
      grid-row-end: span 5;
  }

  .channels-grid-block,
  .channels-grid-block-hor {
      padding-bottom: 120%;
  }
}