@charset "UTF-8";
/*! ------------------------------
    Utils Module
------------------------------ */
/*!*/
/* ------------------------------
    Util: Vars
------------------------------ */
/* Env */
/* Colors */
/* Typography */
/* Layers */
/* Animations */
/* ------------------------------
    Util: Mixins
------------------------------ */
/* Calculate px to rem */
/* Breakpoints */
/*
  // Print styles
  @else if $canvas == 'print' {
    @media print {
      @content;
    }
  }

}
*/
.only-l {
  display: none; }
  @media only screen and (min-width: 840px) {
    .only-l {
      display: block; } }
.only-s {
  display: block; }
  @media only screen and (min-width: 840px) {
    .only-s {
      display: none; } }
.lay-row {
  display: flex;
  flex-direction: row;
  column-gap: 16px; }

.lay-col {
  display: flex;
  flex-direction: column; }

.lay-spread {
  justify-content: space-between; }

@media only screen and (min-width: 840px) {
  .lay-l-row {
    display: flex;
    flex-direction: row; } }

@media only screen and (min-width: 840px) {
  .lay-l-block {
    display: block; } }

.lay-s-col-rev {
  flex-direction: column-reverse; }
  @media only screen and (min-width: 840px) {
    .lay-s-col-rev {
      flex-direction: row; } }
.lay-grow {
  flex-grow: 1; }

/* ------------------------------
    Base: Icons
------------------------------ */
@font-face {
  font-family: "wl";
  src: url("../fonts/wl.ttf?79zz52") format("truetype"), url("../fonts/wl.woff?79zz52") format("woff"), url("../fonts/wl.svg?79zz52#wl") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "wl" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-lang:before {
  content: ""; }

.icon-tt:before {
  content: ""; }

.icon-yt:before {
  content: ""; }

.icon-ig:before {
  content: ""; }

.icon-fb:before {
  content: ""; }

.icon-filter:before {
  content: ""; }

.icon-like:before {
  content: ""; }

.icon-liked:before {
  content: ""; }

.icon-prev:before {
  content: ""; }

.icon-next:before {
  content: ""; }

.icon-audio:before {
  content: ""; }

.icon-picture:before {
  content: ""; }

.icon-book:before {
  content: ""; }

.icon-book-alt:before {
  content: ""; }

.icon-eye:before {
  content: ""; }

.icon-play:before {
  content: ""; }

.icon-pause:before {
  content: ""; }

.icon-volume:before {
  content: ""; }

.icon-mute:before {
  content: ""; }

.icon-quote:before {
  content: ""; }

.icon-search:before {
  content: ""; }

.icon-acc-1:before {
  content: ""; }

.icon-acc-2:before {
  content: ""; }

.icon-acc-3:before {
  content: ""; }

.icon-all:before {
  content: ""; }

.icon-arrow-left:before {
  content: ""; }

.icon-arrow-right:before {
  content: ""; }

.icon-arrow-up:before {
  content: ""; }

.icon-arrow-down:before {
  content: ""; }

.icon-close:before {
  content: ""; }

.c-select {
  margin: 0 5px 0 5px;
  margin-right: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: calc(10% - 20px);
  top: 15px; }
  @media only screen and (min-width: 840px) {
    .c-select {
      position: static; } }
  .c-select.is-active ul li {
    display: flex; }
    .c-select.is-active ul li:first-child {
      border-radius: 4px 4px 0 0 !important; }
    .c-select.is-active ul li:last-child {
      border-radius: 0 0 4px 4px !important; }
    .c-select.is-active ul li:hover {
      background: #062c36; }
    .c-select.is-active ul li.is-active {
      border-radius: 0;
      color: #007880;
      background: #74bdc2; }
  .c-select ul {
    margin: 0;
    padding: 0; }
    .c-select ul li {
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 15px;
      line-height: 120%;
      display: none;
      cursor: pointer;
      width: 43px;
      height: 22px;
      transition: background cubic-bezier(0, 0, 0.2, 1) 450ms;
      text-align: center;
      color: #ffffff;
      background: #083F4D; }
      .c-select ul li.is-active {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 4px;
        color: #007880; }
        .c-select ul li.is-active:hover {
          background: #74bdc2; }

#player-bar .jp-state-playing .icon-play:before {
  content: ""; }

#player-bar .jp-state-muted .icon-volume:before {
  content: ""; }

#player-bar .c-media {
  margin: 0 auto; }

#player-bar .c-media__actions {
  display: flex; }

#player-bar .c-media__btn {
  width: 100%;
  text-align: center;
  align-items: center; }
  #player-bar .c-media__btn:nth-child(1) {
    padding-right: 19px; }
  #player-bar .c-media__btn:nth-child(2) {
    padding-left: 19px;
    padding-right: 19px; }
  #player-bar .c-media__btn:nth-child(3) {
    padding-left: 19px; }
  #player-bar .c-media__btn .l-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }

#player-bar .c-media__player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000; }
  #player-bar .c-media__player h2 {
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: 0.01em;
    color: #666666;
    margin: 0; }

#player-bar .c-media__caption {
  color: #474747;
  background: #F2F2F2;
  padding: 15px 24px;
  border-radius: 0 0 5px 5px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  #player-bar .c-media__caption .content {
    padding-left: 35px;
    width: calc(100% - 145px); }
  #player-bar .c-media__caption .icon {
    color: #808080;
    font-size: 26px; }
    #player-bar .c-media__caption .icon:not(:last-child) {
      margin-right: 16px; }
  #player-bar .c-media__caption p {
    margin: 0;
    color: #474747;
    font-weight: normal;
    font-size: 12px;
    line-height: 140%; }

#player-bar .c-player {
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
  color: #083F4D;
  background-color: #D5ECED;
  padding: 0 34px 0 14px; }

#player-bar .c-player__btn {
  background: #083F4D;
  border: 0;
  outline: 0;
  border-radius: 50%;
  padding: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms; }
  #player-bar .c-player__btn:hover {
    background: #083F4D; }
    #player-bar .c-player__btn:hover .icon {
      color: white; }
  #player-bar .c-player__btn .icon {
    color: white;
    font-size: 26px;
    position: relative;
    transition: background cubic-bezier(0.25, 1, 0.5, 1) 350ms; }
    #player-bar .c-player__btn .icon.icon-play {
      left: 3px; }
    #player-bar .c-player__btn .icon.icon-pause {
      left: 1px; }

#player-bar .jp-state-playing .c-player__btn .icon.icon-play {
  left: 1px; }

#player-bar .c-player__btns {
  display: flex;
  align-items: center; }
  #player-bar .c-player__btns button {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 5px;
    outline: 0;
    border: 1px solid transparent;
    transition: border-color cubic-bezier(0, 0, 0.2, 1) 450ms; }
    #player-bar .c-player__btns button:first-child {
      margin-left: 0; }
    #player-bar .c-player__btns button:hover {
      border-color: rgba(255, 255, 255, 0.5); }
    #player-bar .c-player__btns button:disabled {
      opacity: .33; }
      #player-bar .c-player__btns button:disabled:hover {
        border-color: transparent; }
    #player-bar .c-player__btns button.c-player__btn--md {
      width: 50px;
      height: 50px; }
      #player-bar .c-player__btns button.c-player__btn--md .icon-play {
        font-size: 20px;
        position: relative;
        left: 2px; }
      #player-bar .c-player__btns button.c-player__btn--md .icon-pause {
        font-size: 20px; }
    #player-bar .c-player__btns button .icon {
      color: #083F4D;
      font-size: 16px; }

#player-bar .jp-state-playing .c-player__btns button.c-player__btn--md .icon-play {
  left: 0; }

#player-bar .c-player__timeline {
  width: 100%;
  margin: 0 30px;
  position: relative; }
  #player-bar .c-player__timeline > span {
    height: 10px;
    width: 100%;
    display: block;
    background: #F2F2F2;
    border-radius: 5px;
    position: relative;
    overflow: hidden; }
    #player-bar .c-player__timeline > span span.jp-seek-bar {
      height: 100%;
      position: absolute;
      border-radius: 5px;
      background-color: #FFFFFF;
      top: 0;
      left: 0; }
    #player-bar .c-player__timeline > span span.jp-play-bar {
      height: 100%;
      position: absolute;
      border-radius: 5px;
      background-color: #006066;
      top: 0;
      left: 0; }

#player-bar .c-player__title {
  top: -27px;
  left: 0;
  position: absolute;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  color: #083F4D; }

#player-bar .c-player__info {
  display: none;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  color: #083F4D; }

#player-bar .c-player__chapters {
  display: none;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.05em;
  color: #083F4D;
  z-index: 1; }
  #player-bar .c-player__chapters.is-active > span:after {
    transform: rotate(180deg); }
  #player-bar .c-player__chapters.is-active ul {
    opacity: 1;
    transform: none;
    pointer-events: all; }
  #player-bar .c-player__chapters > span {
    display: flex;
    align-items: center;
    cursor: pointer; }
    #player-bar .c-player__chapters > span:after {
      margin-left: 5px;
      content: "";
      font-family: "wl" !important;
      transition: transform cubic-bezier(0, 0, 0.2, 1) 450ms; }
  #player-bar .c-player__chapters ul {
    width: 283px;
    position: absolute;
    background-color: #083F4D;
    transform: translateY(-10px);
    opacity: 0;
    box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
    transition: all cubic-bezier(0, 0, 0.2, 1) 450ms;
    list-style-position: inside;
    border-radius: 10px;
    right: 0;
    margin: 10px 0 0;
    padding: 15px;
    pointer-events: none; }
    #player-bar .c-player__chapters ul li {
      font-size: 12px;
      line-height: 140%;
      letter-spacing: 0.05em;
      list-style-type: decimal;
      margin: 5px 0;
      color: white;
      cursor: pointer; }
      #player-bar .c-player__chapters ul li span {
        display: none; }
      #player-bar .c-player__chapters ul li span.title {
        display: inline; }

#player-bar .c-player__volume {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 40px; }
  #player-bar .c-player__volume .icon {
    font-size: 21px;
    color: #083F4D;
    margin-right: 8px;
    cursor: pointer; }
  #player-bar .c-player__volume .jp-volume-bar {
    width: 100px;
    border-radius: 5px;
    height: 10px;
    display: block;
    background: white; }
  #player-bar .c-player__volume .jp-volume-bar-value {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: #006066; }

#player-bar .c-player__length {
  width: 100%;
  display: block;
  position: relative; }
  #player-bar .c-player__length > span {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 140%;
    letter-spacing: 0.05em;
    color: white; }
    #player-bar .c-player__length > span:nth-child(1) {
      left: 0; }
    #player-bar .c-player__length > span:nth-child(2) {
      right: 0; }
    #player-bar .c-player__length > span:nth-child(3) {
      left: 0;
      right: 0;
      text-align: center; }

#player-bar .project-icon {
  max-width: 100px;
  max-height: 50px; }

#player-bar #locator {
  position: relative; }
  #player-bar #locator.snap {
    background: white; }
    #player-bar #locator.snap .icon {
      color: black; }
  #player-bar #locator.up:after {
    content: '▲';
    color: #083F4D;
    font-size: .8em;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    text-align: center; }
  #player-bar #locator.down:after {
    content: '▼';
    color: #083F4D;
    font-size: .8em;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center; }

#menu * {
  box-sizing: content-box; }

.with-player-bar .playing-highlight {
  background: #FFE694; }

#player-bar {
  display: none; }

.with-player-bar #player-bar {
  display: block; }

.annoy-banner-on_blackout {
  display: none !important; }