/* Contents Sections */

section.contents {
  padding: 12px 0px 12px 0px;
  overflow: auto;
}

.contentsContainer::-webkit-scrollbar { 
  display: none; /* Chrome Safari */
}

.contents { 
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

.contentsContainer {
  overflow: auto;
  scroll-behavior: smooth;
}

.leftBlur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.5em;
  background: rgb(244, 244, 244);
  background: linear-gradient(90deg, rgb(247 250 252) 0%, rgba(255,255,255,0) 100%);
}

.rightBlur {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.5em;
  background:rgb(244, 244, 244);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgb(247 250 252) 100%);
}

.rightBlur button span, .leftBlur button span {
  font-size: 2em;
  transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  -ms-transition: all .8s ease-in-out;
}

.leftBlur.offset-pre-gap.offset-0 {
  display: none;
}

.contentsContainer .content:last-child {
  margin-right: 2.5em;
}

.content picture, .content a {
  width: inherit;
}

.content picture img {
  border-radius: 2px;
  width: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.content {
  transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
}

.contentsContainer .content:hover {
  transform: scale(1.08);
  transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}
.contentsContainer .content:hover {
  transform: scale(1.09);
}
.contentsContainer .content.small.portrait:hover {
  transform: scale(1.12);
}

.contentsContainer .content.small.landscape:hover {
  transform: scale(1.08);
}
.content:hover picture img {
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

.channel-logo img {
  width: auto !important;
  max-height: 60px;
  margin: 0 auto;
}


@media (max-width: 1079px) {
  .contents h1 {
    margin-left: 1.2em;
  }
  .contentsContainer .content:first-child {
    margin-left: 1.2em;
  }
  .contentsContainer .content:last-child {
    margin-right: 1.2em;
  }
  .rightBlur, .leftBlur {
    width: 1.2em;
  }
  .rightBlur button, .leftBlur button {
    display: none;
  }
}

@media (max-width: 340px) {
  .contentsContainer .content:first-child {
    margin-left: 1.1em;
  }
  .contentsContainer .content:last-child {
    margin-right: 1em;
  }
  .rightBlur, .leftBlur {
    width: 1em;
  }
}

/* Content Section configurations */

.content.portrait {
  width: 138px;
}
.content.portrait img {
  width: 138px;
  height: 214px;
  max-width: inherit;
}

.content.portrait.big {
  width: 190px;
}
.content.portrait.big img {
  width: 190px;
  height: 294px;
}

.content.landscape {
  width: 180px;
}
.content.landscape img {
  width: 180px;
  height: 116px;
  max-width: inherit;
}

.content.landscape.big {
  width: 290px;
}
.content.landscape.big img {
  width: 290px;
  height: 187px;
}

.content.big h2 {
  font-size: 0.9em;
  margin-top: 4px;
}

.content h2 {
  font-size: 0.8em;
  margin-top: 4px;
}

/* Clubbin cards Section headers */

@media (max-width: 1079px) {
    .block-section .block-section-title h3 {
      margin-left: 1.2em;
  }
}

@media (max-width: 1079px) {

  .contentsContainer .clubbinRailContainer:first-child {
    margin-left: 1.2em;
  }
  .contentsContainer .clubbinRailContainer:last-child {
    margin-right: 1.2em;
  }

}

@media (max-width: 340px) {
  .contentsContainer .clubbinRailContainer:first-child {
    margin-left: 1.1em;
  }
  .contentsContainer .clubbinRailContainer:last-child {
    margin-right: 1em;
  }

}

/* Clubbin Section configurations */


/* Horizontal Clubbin cards */

.contentsContainer .clubbin-card, 
.contentsContainer .clubbin-card-skeleton {
  height: 554px;
  width: 345px;
}

.gridContainer .clubbin-card, 
.gridContainer .clubbin-card-skeleton {
  height: 480px;
  width: 300px;
}

@media (min-width: 340px) {
  .gridContainer .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 514px;
      width: 320px;
  }
}

@media (min-width: 360px) {
  .gridContainer  .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 546px;
      width: 340px;
  }
}

@media (min-width: 375px) {
  .gridContainer .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 570px;
      width: 355px;
  }
}

@media (min-width: 412px) {
  .gridContainer .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 633px;
      width: 394px;
  }
}

@media (min-width: 540px) {
  .gridContainer .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 803px;
      width: 500px;
  }
}



@media (min-width: 620px) { /* Jump to 2 (Ipad porttrait) */
  .gridContainer .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 482px;
      width: 300px;
  }

}

@media (min-width: 767px) {
  .gridContainer .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 586px;
      width: 365px;
  }

}

@media (min-width: 820px) {
  .gridContainer .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 633px;
      width: 394px;
  }

}

@media (min-width: 920px) {
  .gridContainer .clubbin-card, 
  .gridContainer .clubbin-card-skeleton {
      height: 714px;
      width: 445px;
  }

}

@media (min-width: 1080px) { /* Jump to 3 (Desktop) */
  .gridContainer .clubbin-card,
  .gridContainer  .clubbin-card-skeleton {
      height: 554px;
      width: 345px;
  }

}

/* Vertical Clubbin cards */

.contentsContainer .vertical .clubbin-card, 
.contentsContainer .vertical .clubbin-card-skeleton {
  height: 700px;
  width: 267px;
}

.gridContainer .vertical .clubbin-card, 
.gridContainer .vertical .clubbin-card-skeleton {
  height: 700px;
  width: 267px;
}

@media (min-width: 340px) {
  .gridContainer .vertical .clubbin-card, 
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }
}

@media (min-width: 360px) {
  .gridContainer .vertical .clubbin-card, 
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }
}

@media (min-width: 375px) {
  .gridContainer .vertical  .clubbin-card, 
  .gridContainer  .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }
}

@media (min-width: 412px) {
  .gridContainer .vertical .clubbin-card, 
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }
}

@media (min-width: 540px) {
  .gridContainer .vertical .clubbin-card, 
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }
}

@media (min-width: 620px) { /* Jump to 2 (Ipad porttrait) */
  .gridContainer .vertical .clubbin-card, 
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }

}

@media (min-width: 767px) {
  .gridContainer .vertical .clubbin-card, 
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }

}

@media (min-width: 820px) {
  .gridContainer .vertical .clubbin-card, 
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }

}

@media (min-width: 920px) {
  .gridContainer .vertical .clubbin-card, 
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }

}

@media (min-width: 1080px) { /* Jump to 3 (Desktop) */
  .gridContainer .vertical .clubbin-card,
  .gridContainer .vertical .clubbin-card-skeleton {
    height: 700px;
    width: 267px;
  }

}