/** baseline 1920x1080 */
/* unchecked category text size */
/* checked category text size */
/** base color focused text */
/* text focused */
/* text unfocused */
#up {
  position: fixed;
  left: 50%;
  top: 0%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  width: 100%;
  height: 120px;
  background: url(img/all/up.png) no-repeat center center;
  visibility: hidden;
  z-index: 501;
}
#up:hover {
  background: url(img/all/up.png) no-repeat center center, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0)));
  background: url(img/all/up.png) no-repeat center center, linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}
#down {
  position: fixed;
  left: 50%;
  bottom: 0%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  visibility: hidden;
  width: 100%;
  height: 120px;
  background: url(img/all/down.png) no-repeat center center;
  z-index: 501;
}
#down:hover {
  background: url(img/all/down.png) no-repeat center center, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.65)));
  background: url(img/all/down.png) no-repeat center center, linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}
#right {
  position: fixed;
  right: 0%;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  visibility: hidden;
  width: 120px;
  height: 100%;
  background: url(img/all/right.png) no-repeat center center;
  z-index: 500;
}
#right:hover {
  background: url(img/all/right.png) no-repeat center center, -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.65)));
  background: url(img/all/right.png) no-repeat center center, linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}
#left {
  position: fixed;
  left: 0%;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  visibility: hidden;
  width: 120px;
  height: 100%;
  background: url(img/all/left.png) no-repeat center center;
  z-index: 500;
}
#left:hover {
  background: url(img/all/left.png) no-repeat center center, -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0)));
  background: url(img/all/left.png) no-repeat center center, linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}
/** main screen padding (safe screen area)*/
@font-face {
  font-family: Lato;
  src: url("fonts/lato-regular.woff2");
  font-style: normal;
}
@font-face {
  font-family: Lato-Bold;
  src: url("fonts/lato-bold.woff2");
  font-weight: 900;
  font-style: bold;
}
@font-face {
  font-family: Merriweather;
  src: url("fonts/merriweather-italic.woff2");
  font-weight: 300;
  font-style: italic;
}
html {
  font-size: 62.5%;
  min-height: 100%;
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 14px;
  }
}
@media screen and (min-width: 1500px) {
  html {
    font-size: 22px;
  }
}
@media screen and (min-width: 2500px) {
  html {
    font-size: 48px;
  }
}
body {
  margin: 0;
  padding: 0;
  color: white;
  overflow: hidden;
  font-family: Lato;
  background-image: url("img/1080/pattern.png");
  background-repeat: repeat;
  background-size: 3%;
  min-height: 100%;
}
.app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("img/all/shadows.svg");
  z-index: 0;
  background-size: cover;
}
.screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.logo {
  position: absolute;
  padding-top: 2vh;
  width: 10.2vw;
  height: 10.2vw;
  z-index: 200;
}
.logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  content: url('img/1080/logo_with_shadow.png');
}
.content {
  margin-top: 10vw;
  height: 95vh;
}
.listVContainer {
  position: absolute;
  height: 100%;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  z-index: 100;
  will-change: scroll-position;
}
.watermark {
  position: absolute;
  background: url(img/1080/large-logo.png);
  width: 100vw;
  height: 90vh;
  left: 15vh;
  bottom: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 100%;
}
#episode {
  position: absolute;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('img/2160/large-logo.png'), url('img/all/shadows.svg'), url('img/1080/pattern.png');
  background-position: right -3vh top 3vh, center center, left top;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: contain, cover , 3%;
  left: 80vw;
  -webkit-transition: right, left 150ms ease-in-out;
  transition: right, left 150ms ease-in-out;
  left: 100vw;
}
#episode.move {
  left: 0;
}
#preload1 {
  background: url('img/2160/livestream-placeholder.jpg') no-repeat -9999px -9999px;
}
#preload2 {
  background: url('img/1080/livestream-placeholder.jpg') no-repeat -9999px -9999px;
}
.notransition {
  -webkit-transition: none !important;
  transition: none !important;
}
.notransform {
  transform: none !important;
  -webkit-transform: none !important;
}
html.android4k {
  font-size: 60%;
}
html.android4k *:focus {
  outline: none;
}
html.android4k .app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("img/all/shadows.svg");
  background-size: cover;
}
html.android4k .screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("img/all/shadows.svg");
  z-index: 0;
  background-size: cover;
}
html.android4k .listVContainer {
  position: relative;
  height: 100%;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  z-index: 100;
  will-change: scroll-position;
}
/** width of the single content item */
/** height of the single content item  */
/** animation duration during transition */
/** scale ratio */
/** height of info box */
/* margin between content items */
/** 
    If listH is in the active mode the focus class for itemH is working 

**/
.listH {
  overflow: hidden;
  width: 9999px !important;
}
.listH .subtitle {
  padding-left: 11vw;
  height: 5vw;
  font-size: 1.5em;
  opacity: 0.6;
}
.listH .listTitle {
  padding-left: 11vw;
  vertical-align: middle;
  height: 0px;
  color: #C0C0C0;
  opacity: 0.6;
  font-size: 3.78vh;
  line-height: 0px;
}
.listH .listTitle b {
  font-family: Lato, sans-serif;
  font-weight: 700;
  letter-spacing: 0.008em;
}
.listH .listTitle em {
  font-family: Merriweather,serif;
  letter-spacing: -0.03em;
  font-style: italic;
  font-weight: 200;
  font-size: 4.5vh;
}
.listHContainer {
  width: 100%;
  white-space: nowrap;
  -webkit-transition: 150ms transform;
  -webkit-transition: 150ms -webkit-transform;
  transition: 150ms -webkit-transform;
  transition: 150ms transform;
  transition: 150ms transform, 150ms -webkit-transform;
  font-size: 0;
  margin-left: 6vw;
  will-change: scroll-position;
}
.itemH {
  color: white;
  position: relative;
  display: inline-block;
  width: 24vw;
  height: 23vw;
  margin-right: 0.5vw;
  vertical-align: middle;
  -webkit-transform-origin: center left;
  transform-origin: center left;
  -webkit-transition: 150ms all;
  transition: 150ms all;
}
.itemH .border {
  display: none;
}
.itemH .thumbnail {
  width: 24vw;
  height: 13vw;
}
.itemH .thumbnail .play {
  display: none;
  /** set this to block if play shallbe always*/
  background: url("img/1080/icon_play.png") no-repeat;
  background-size: contain;
  position: absolute;
  top: 15%;
  left: 40%;
  width: 5vw;
  height: 5vw;
  line-height: 5vw;
  text-align: center;
  border-radius: 100%;
  z-index: 1;
  opacity: 0.8;
}
.itemH .thumbnail .timeInfo {
  position: absolute;
  color: white;
  font-size: 2vh;
  font-weight: 100;
  width: 5vw;
  height: 3vh;
  line-height: 3vh;
  vertical-align: middle;
  text-align: center;
  right: 0;
  bottom: 10vw;
  background-color: #782E2B;
  opacity: 0.8;
}
.itemH .thumbnail .timeInfo .time {
  padding-left: 10px;
  display: inline-block;
  vertical-align: middle;
}
.itemH .thumbnail .timeInfo .arrow-right {
  display: inline-block;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid white;
  vertical-align: middle;
}
.itemH img {
  width: 24vw;
  height: 13vw;
  -o-object-fit: cover;
  object-fit: cover;
}
.itemH .info {
  height: 5vw;
  background-color: #441414;
  padding: 2vh 2vh 2vh 2vh;
  overflow: hidden;
}
.itemH .info .title1 {
  font-size: 3vh;
  white-space: pre-wrap;
  vertical-align: middle;
  line-height: 3.2vh;
  height: 9.6vh;
  overflow: hidden;
}
.itemH .info .title {
  font-size: 1rem;
  height: 2.2rem;
  color: #C0C0C0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 100;
}
.itemH .info .desc {
  font-size: 1rem;
  line-height: 1.2rem;
  height: 2.4rem;
  overflow: hidden;
  white-space: pre-wrap;
  text-overflow: ellipsis;
}
/* jezeli horizontal list actie*/
.listH.active .listTitle {
  opacity: 1;
  color: white;
  font-size: 5.38vh;
}
.listH.active .listTitle em {
  font-size: 7vh;
  font-size: 200;
}
.listH.active .subtitle {
  opacity: 1;
  color: white;
}
.listH.active .itemH.focus {
  /* jezeli item ma focus */
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  z-index: 2;
}
.listH.active .itemH.focus .border {
  display: block;
  position: absolute;
  width: 23.6vw;
  height: 19.8vw;
  z-index: 4;
  box-shadow: 10px 3px 15px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 10px 3px 15px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 10px 3px 15px rgba(0, 0, 0, 0.9);
  border: 4px solid white;
}
@media screen and (min-width: 1000px) {
  .listH.active .itemH.focus .border {
    border: 2px solid white;
  }
}
@media screen and (min-width: 1500px) {
  .listH.active .itemH.focus .border {
    border: 4px solid white;
  }
}
@media screen and (min-width: 2500px) {
  .listH.active .itemH.focus .border {
    border: 6px solid white;
  }
}
.listH.active .itemH.focus .info {
  background-color: black;
}
.listH.active .itemH.focus ~ .itemH {
  /* wszystkie inne itemy bez focusa i nieaktywne*/
  -webkit-transform: translate3d(4.8vw, 0, 0);
  transform: translate3d(4.8vw, 0, 0);
}
.listH.active .itemH.focus .play {
  display: block;
}
html.android4k .itemH .thumbnail .timeInfo .arrow-right {
  display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid white;
  vertical-align: middle;
}
.listH.live.active .livePlayer {
  border: 4px solid white;
}
@media screen and (min-width: 1000px) {
  .listH.live.active .livePlayer {
    border: 2px solid white;
  }
}
@media screen and (min-width: 1500px) {
  .listH.live.active .livePlayer {
    border: 4px solid white;
  }
}
@media screen and (min-width: 2500px) {
  .listH.live.active .livePlayer {
    border: 6px solid white;
  }
}
.listH.live {
  z-index: 10;
  padding-top: 0;
  height: 75vh;
}
.listH.live .live {
  padding-left: 8vw;
  width: 79.5vw 2px;
  height: 30.93vw;
  font-size: 0;
}
.listH.live .livePlayer {
  float: left;
  width: 55vw;
  height: 30.93vw;
  background-image: url('img/2160/livestream-placeholder.jpg');
  background-size: cover;
  border: 4px solid transparent;
}
@media screen and (min-width: 1000px) {
  .listH.live .livePlayer {
    border: 2px solid transparent;
  }
}
@media screen and (min-width: 1500px) {
  .listH.live .livePlayer {
    border: 4px solid transparent;
  }
}
@media screen and (min-width: 2500px) {
  .listH.live .livePlayer {
    border: 6px solid transparent;
  }
}
.listH.live .liveInfo {
  margin-top: 4px;
  float: left;
  width: 24.5vw;
  height: 30.93vw;
  background: #441414;
  font-size: 3vh;
  color: white;
}
@media screen and (min-width: 1000px) {
  .listH.live .liveInfo {
    margin-top: 2px;
  }
}
@media screen and (min-width: 1500px) {
  .listH.live .liveInfo {
    margin-top: 4px;
  }
}
@media screen and (min-width: 2500px) {
  .listH.live .liveInfo {
    margin-top: 6px;
  }
}
.liveEvent {
  padding-left: 1.98vw;
  padding-top: 2.13vh;
  font-size: 2vh;
  height: 12vh;
}
.liveEvent.first {
  background-color: black;
}
.liveEvent .title {
  font-size: 2.5vh;
  font-weight: bold;
  font-family: Lato-Bold;
}
.liveEvent .gmt {
  font-size: 2vh;
  font-family: Lato;
  font-weight: 100;
}
.liveBar {
  margin-top: 3vh;
  background-color: #808080;
  height: 0.4vh;
  position: relative;
  width: 92%;
  color: #010101;
}
.liveEventTime {
  display: inline-block;
  font-size: 2vh;
}
.liveEventTime.time {
  width: 6.25vw;
  color: #A3A3A3;
  font-family: Lato;
  height: 4vh;
}
.liveEventTime.onair {
  color: red;
  font-family: Lato-Bold;
  font-weight: 900;
}
.liveEventTime.next {
  color: #A3A3A3;
  font-family: Lato-Bold;
  font-weight: 900;
}
.liveSlider {
  padding-top: 2.41vh;
  width: 90%;
  height: 0.56vh;
  overflow: hidden;
}
.liveSlider div {
  display: inline;
  border-left: 1px solid #999;
}
.liveProgressBar {
  margin-top: 1.68vh;
  background-color: #e5e9eb;
  height: 0.25em;
  position: relative;
  width: 88%;
}
.liveProgress {
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-name: width;
          animation-name: width;
  background-color: #823231;
  background-size: 24em 0.25em;
  height: 100%;
  width: 25px;
  position: relative;
}
.arrow-down {
  margin: 5% 42%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #823231;
}
#main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: url("../all/shadows.svg");
  height: 100vh;
  width: 100vw;
  background-size: cover;
}
.logo-image {
  width: 25vh;
  content: url('img/2160/logo-white-letter.png');
}
@media screen and (min-width: 1000px) {
  .logo-image {
    content: url('img/720/logo-white-letter.png');
  }
}
@media screen and (min-width: 1500px) {
  .logo-image {
    content: url('img/1080/logo-white-letter.png');
  }
}
@media screen and (min-width:2500px) {
  .logo-image {
    content: url('img/2160/logo-white-letter.png');
  }
}
.main-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  width: 100vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 22px;
}
@media screen and (min-width: 1000px) {
  .main-logo {
    font-size: 14px;
  }
}
@media screen and (min-width: 1500px) {
  .main-logo {
    font-size: 22px;
  }
}
@media screen and (min-width: 2500px) {
  .main-logo {
    font-size: 48px;
  }
}
.logoanim {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  max-width: 50%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 5%;
}
.slogan {
  text-transform: uppercase;
  padding-top: 20px;
  font-size: 1.5em;
}
.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.slideInUp2 {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-80px);
            transform: translateY(-80px);
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-80px);
            transform: translateY(-80px);
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.sk-circle {
  margin: 0px auto;
  width: 60px;
  height: 60px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #FFF;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/* The toastPanel - position it at the bottom and in the middle of the screen */
#toast {
  visibility: visible;
  /* Hidden by default. Visible on click */
  min-width: 80vw;
  /* Set a default minimum width */
  margin-left: -40vw;
  /* Divide value of min-width by 2 */
  background-color: #a32324;
  /* Red background color */
  color: #fff;
  /* White text color */
  text-align: center;
  /* Centered text */
  border-radius: 1vh;
  /* Rounded borders */
  padding: 2vh;
  /* Padding */
  position: fixed;
  /* Sit on top of the screen */
  z-index: 10000;
  /* Add a z-index if needed */
  left: 50%;
  /* Center the toastPanel */
  bottom: -10vh;
  /* 30px from the bottom */
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  text-align: left;
}
#toast.show {
  -webkit-animation: hsshowpulse 0.5s ease-in-out both;
  animation: hsshowpulse 0.5s ease-in-out both;
}
@-webkit-keyframes hsshowpulse {
  0% {
    opacity: 1;
    bottom: -10vh;
  }
  100% {
    opacity: 1;
    bottom: 2vh;
  }
}
@keyframes hsshowpulse {
  0% {
    opacity: 1;
    bottom: -10vh;
  }
  100% {
    opacity: 1;
    bottom: 2vh;
  }
}
#toast.hide {
  -webkit-animation: hshidepulse 0.3s ease-in-out both;
  animation: hshidepulse 0.3s ease-in-out both;
}
@-webkit-keyframes hshidepulse {
  0% {
    opacity: 1;
    bottom: 2vh;
  }
  100% {
    opacity: 0;
    bottom: -10vh;
  }
}
@keyframes hshidepulse {
  0% {
    opacity: 1;
    bottom: 2vh;
  }
  100% {
    opacity: 0;
    bottom: -10vh;
  }
}
/** animation duration during transition */
.headerImage {
  height: 30.5vh;
  overflow: hidden;
}
.headerImage img {
  height: 30.5vh;
  width: 100vw;
  -o-object-fit: cover;
  object-fit: cover;
}
.episodeInfo {
  height: 100%;
  width: 100%;
}
.episodeInfo .descriptionTitle {
  height: 11.11vh;
  position: relative;
  line-height: 11.11vh;
  vertical-align: middle;
  padding-left: 6.8vw;
  font-size: 4.25vw;
}
.episodeInfo .buttonBack {
  position: relative;
  width: 8.5vw;
  height: 4.4vh;
  line-height: 4.4vh;
  top: 0.5vh;
  left: 8.7vw;
  vertical-align: middle;
  text-align: center;
  font-size: 1.5vw;
}
.episodeInfo .buttonBack.selected {
  background-color: #df3133;
}
.episodeInfo .buttonBack:hover {
  background-color: #df3133;
}
.episodeInfo .detailsPanel {
  width: 100vw;
  height: 33.33vh;
}
.episodeInfo .detailsPanel .description {
  width: 57.3vw;
  float: left;
  line-height: 24px;
  padding-left: 6.8vw;
  padding-right: 1vw;
  vertical-align: top;
  font-size: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.episodeInfo .detailsPanel .playing {
  display: inline-block;
  width: 23.7vw;
  height: 35.2vh;
}
.episodeInfo .detailsPanel .playing .thumbnail {
  width: 23.7vw;
  height: 26.4vh;
}
.episodeInfo .detailsPanel .playing .thumbnail img {
  width: 23.7vw;
  height: 26.4vh;
  -o-object-fit: cover;
  object-fit: cover;
}
.episodeInfo .detailsPanel .playing .episodeTitle {
  width: 23.7vw;
  font-size: 1.5vw;
}
.episodeInfo .detailsPanel .playing .playmedia {
  position: relative;
  width: 8.5vw;
  height: 4.4vh;
  line-height: 4.4vh;
  bottom: 4.4vh;
  vertical-align: middle;
  text-align: center;
  background: url('img/all/play.png') no-repeat left;
  font-size: 1.5vw;
  background-color: #a32324;
  opacity: 0.5;
  padding-right: 2vw;
}
.episodeInfo .detailsPanel .playing .playmedia.selected {
  background-color: #df3133;
  opacity: 1;
}
.singleShowEpisodesScreen {
  position: absolute;
  top: 0px;
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
}
.singleShowEpisodesScreen.showCarouselEpisodes {
  -webkit-transform: translateY(-480px);
          transform: translateY(-480px);
}
@media screen and (min-width: 1000px) {
  .singleShowEpisodesScreen.showCarouselEpisodes {
    -webkit-transform: translateY(-480px);
            transform: translateY(-480px);
  }
}
@media screen and (min-width: 1500px) {
  .singleShowEpisodesScreen.showCarouselEpisodes {
    -webkit-transform: translateY(-870px);
            transform: translateY(-870px);
  }
}
@media screen and (min-width: 2500px) {
  .singleShowEpisodesScreen.showCarouselEpisodes {
    -webkit-transform: translateY(-1740px);
            transform: translateY(-1740px);
  }
}
.singleShowEpisodesScreen.showCarouselQuickBytes {
  -webkit-transform: translateY(-1300px);
          transform: translateY(-1300px);
}
@media screen and (min-width: 1000px) {
  .singleShowEpisodesScreen.showCarouselQuickBytes {
    -webkit-transform: translateY(-880px);
            transform: translateY(-880px);
  }
}
@media screen and (min-width: 1500px) {
  .singleShowEpisodesScreen.showCarouselQuickBytes {
    -webkit-transform: translateY(-1300px);
            transform: translateY(-1300px);
  }
}
@media screen and (min-width: 2500px) {
  .singleShowEpisodesScreen.showCarouselQuickBytes {
    -webkit-transform: translateY(-2600px);
            transform: translateY(-2600px);
  }
}
.episodeNotAvailable {
  display: none;
  text-transform: uppercase;
  font-size: 30px;
  text-align: center;
  padding-top: 12vh;
  opacity: 0.8;
}
.listVContainer.episodes {
  padding-top: 12vh;
}
.listVContainer.episodes:empty + .episodeNotAvailable {
  display: block;
}
html.android4k .buttonBack {
  font-size: 18px;
}
html.android4k .descriptionTitle {
  font-size: 48px;
}
html.android4k .detailsPanel .description {
  font-size: 18px;
  line-height: 18px;
}
html.android4k .detailsPanel .playing .playmedia {
  background-size: 2.5vw 2.5vw;
  font-size: 18px;
}
html.android4k .detailsPanel .playing .episodeTitle {
  font-size: 18px;
}
html.android4k .showCarouselQuickBytes {
  -webkit-transform: translateY(-700px);
          transform: translateY(-700px);
}
@media screen and (min-width: 1000px) {
  html.android4k .showCarouselQuickBytes {
    -webkit-transform: translateY(-880px);
            transform: translateY(-880px);
  }
}
@media screen and (min-width: 1500px) {
  html.android4k .showCarouselQuickBytes {
    -webkit-transform: translateY(-1300px);
            transform: translateY(-1300px);
  }
}
@media screen and (min-width: 2500px) {
  html.android4k .showCarouselQuickBytes {
    -webkit-transform: translateY(-2600px);
            transform: translateY(-2600px);
  }
}
.playerPanel {
  position: absolute;
  width: 70vw;
  height: 9vh;
  background-color: #a32324;
  top: 80vh;
  left: 15vw;
  z-index: 2001;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.playerPanel.show {
  -webkit-animation: hsshowpulse 1s ease-in-out both;
  animation: hsshowpulse 1s ease-in-out both;
}
@-webkit-keyframes hsshowpulse {
  0% {
    opacity: 1;
    bottom: -10vh;
  }
  100% {
    opacity: 1;
    bottom: 2vh;
  }
}
@keyframes hsshowpulse {
  0% {
    opacity: 1;
    bottom: -10vh;
  }
  100% {
    opacity: 1;
    bottom: 2vh;
  }
}
.playerPanel.hide {
  -webkit-animation: hshidepulse 1s ease-in-out both;
  animation: hshidepulse 1s ease-in-out both;
}
@-webkit-keyframes hshidepulse {
  0% {
    opacity: 1;
    bottom: 2vh;
  }
  100% {
    opacity: 0;
    bottom: -10vh;
  }
}
@keyframes hshidepulse {
  0% {
    opacity: 1;
    bottom: 2vh;
  }
  100% {
    opacity: 0;
    bottom: -10vh;
  }
}
.playerPanelVideo {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: black;
  z-index: 2000;
  visibility: visible;
}
.playerPanelVideo.show {
  visibility: visible;
}
.playerPanelVideo.hide {
  visibility: hidden;
}
.playerPanelControl {
  position: absolute;
  width: 70vw;
  height: 9vh;
  background-color: #a32324;
  top: 0;
  left: 0;
  overflow: hidden;
}
.playerButton {
  position: absolute;
  width: 7vw;
  height: 13.2vh;
  top: -2vh;
  z-index: 200;
  border-radius: 90px;
  font-size: 1em;
}
.playerButton.play {
  left: 30vw;
  background: url('img/1080//ic_play.png') no-repeat center;
}
.playerButton.play.selected {
  background-color: #df3133;
}
.playerButton.pause {
  left: 30vw;
  background: url('img/1080//ic_pause.png') no-repeat center;
}
.playerButton.pause.selected {
  background-color: #df3133;
}
.playerButton.rew {
  left: 21vw;
  background: url('img/1080//ic_fast_rewind.png') no-repeat center;
}
.playerButton.rew.selected {
  background-color: #df3133;
}
.playerButton.ff {
  left: 39vw;
  background: url('img/1080//ic_fast_forward.png') no-repeat center;
}
.playerButton.ff.selected {
  background-color: #df3133;
}
.playerButton.skipPrev {
  left: 12vw;
  background: url('img/1080//ic_skip_previous.png') no-repeat center;
}
.playerButton.skipPrev.selected {
  background-color: #df3133;
}
.playerButton.skipNext {
  left: 48vw;
  background: url('img/1080//ic_skip_next.png') no-repeat center;
}
.playerButton.skipNext.selected {
  background-color: #df3133;
}
.playerButton.back {
  left: 0.2vw;
}
@media screen and (min-width: 1000px) {
  .playerButton.back {
    background: url('img/720/ic_back.png') no-repeat center;
  }
}
@media screen and (min-width: 1500px) {
  .playerButton.back {
    background: url('img/1080/ic_back.png') no-repeat center;
  }
}
@media screen and (min-width: 2500px) {
  .playerButton.back {
    background: url('img/2160/ic_back.png') no-repeat center;
  }
}
.playerButton.back.selected {
  background-color: #df3133;
}
.playerButton.inactive {
  opacity: 0.5;
}
.playerButton:hover {
  background-color: #df3133;
}
.playerLabelProgressDuration {
  position: absolute;
  width: 20vw;
  height: 6vh;
  line-height: 3vh;
  vertical-align: middle;
  top: 3vh;
  right: 1.5vh;
  color: white;
  opacity: 0.5;
  text-align: right;
  font-size: 4vh;
}
.playerProgressBar {
  position: absolute;
  width: 70vw;
  height: 0.9vh;
  top: -0.9vh;
  left: 0;
  background: white;
  opacity: 0.25;
}
.playerProgressBarCurrentPosition {
  position: absolute;
  width: 0;
  height: 0.9vh;
  top: -0.9vh;
  left: 0;
  background: #df3133;
}
html.android4k .playerButton.back {
  left: 0.2vw;
  background: url('img/2160/ic_back.png') no-repeat center;
  background-size: contain;
}
html.android4k .playerButton.back.selected {
  background-color: #df3133;
}
html.android4k .playerButton.play {
  background-size: 50%;
}
html.android4k .playerButton.pause {
  background-size: 50%;
}
html.android4k .playerButton.rew {
  background-size: 50%;
}
html.android4k .playerButton.ff {
  background-size: 50%;
}
html.android4k .playerButton.skipPrev {
  background-size: 50%;
}
html.android4k .playerButton.skipNext {
  background-size: 50%;
}
#playerOverlay {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  z-index: 2001;
  background: transparent;
}
#playerOverlay.show {
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(255, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(255, 0, 0, 0));
}
#playerOverlay.hide {
  -webkit-animation: hideoverlay 1s ease-in-out both;
  animation: hideoverlay 1s ease-in-out both;
}
@-webkit-keyframes hideoverlay {
  0% {
    opacity: 1;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(255, 0, 0, 0)));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(255, 0, 0, 0));
  }
  100% {
    opacity: 0;
    background: transparent;
  }
}
@keyframes hideoverlay {
  0% {
    opacity: 1;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(255, 0, 0, 0)));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(255, 0, 0, 0));
  }
  100% {
    opacity: 0;
    background: transparent;
  }
}
.playerInfo {
  font-size: 3vh;
  position: relative;
  top: -16.5vh;
  height: 100%;
}
.playerSubtitle {
  height: 3.5vh;
  line-height: 3.5vh;
  font-size: 3vh;
}
.playerTitle {
  width: 70vw;
  font-size: 5vh;
  height: 12vh;
  white-space: pre-line;
  overflow: hidden;
}
.playerTitleContent {
  width: 100%;
  height: 100%;
  display: table;
}
.playerTitleContent p {
  display: table-cell;
  vertical-align: middle;
}
#spinner {
  visibility: hidden;
  position: absolute;
  z-index: 2001;
  top: 50%;
  left: 50%;
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  background-image: url('img/all/spinner.svg');
}