/**
 * Variables
 */
/**
 * Functions
 */
/**
 * Mixins
 */
/**
 * Videos
 */
main.videos {
  background-color: #b1d9e8;
  background-image: url(../static/videos/bg-video.jpg);
  background-repeat: no-repeat;
  height: auto;
  padding-bottom: 200px;
}
@media (min-width: 820px) {
  main.videos {
    height: 850px;
    padding-bottom: 0;
  }
}
@media (min-width: 1000px) {
  main.videos {
    height: 670px;
    min-height: 670px;
  }
}
.pbskids-default-skin .vjs-big-play-button {
  top: 0;
  left: 0;
  border: none;
}
html:not(.isfullscreen) #videos button.play-pause, html:not(.isfullscreen) #videos button.cc, html:not(.isfullscreen) #videos button.scrubber-thumb, html:not(.isfullscreen) #videos button.up, html:not(.isfullscreen) #videos button.down {
  border: none;
  padding: 0;
  background-color: transparent;
  font-size: 0;
  cursor: pointer;
  cursor: hand;
  bottom: 5px;
}
html:not(.isfullscreen) #videos .pbskids-default-skin.vjs-fullscreen.vjs-controls-disabled .vjs-control-bar {
  position: absolute !important;
}
html:not(.isfullscreen) #videos .content {
  margin-top: 210px;
}
@media (max-width: 419px) {
  html:not(.isfullscreen) #videos .content {
    margin-top: 180px;
  }
}
@media (min-width: 820px) and (max-width: 999px) {
  html:not(.isfullscreen) #videos .content {
    margin-top: 0;
    top: 425px;
  }
}
@media (min-width: 1000px) {
  html:not(.isfullscreen) #videos .content {
    margin-top: 170px;
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
}
/**
 * Loader
 */
.vjs-loading-spinner span, .loading-indicator, .appending-indicator {
  -ms-animation: spin 600ms infinite linear;
  -webkit-animation: spin 600ms infinite linear;
  animation: spin 600ms infinite linear;
}
/**
 * Playlist
 */
/**
 * Variables
 */
/**
 * Functions
 */
/**
 * Mixins
 */
/**
 * Playlists
 */
#videos .playlists {
  text-align: center;
  display: block;
  position: relative;
  width: 335px;
  margin: 30px auto 0;
}
@media (min-width: 420px) {
  #videos .playlists {
    margin-top: 100px;
  }
}
@media (min-width: 500px) {
  #videos .playlists {
    margin-top: 125px;
  }
}
@media (min-width: 600px) {
  #videos .playlists {
    width: 335px;
    margin-top: 0;
  }
}
@media (min-width: 820px) {
  #videos .playlists {
    margin-top: 340px;
    width: 100%;
    clear: both;
  }
}
@media (min-width: 1000px) {
  #videos .playlists {
    display: block;
    background-image: url(../static/videos/img-birch-2x.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    position: absolute;
    top: 27px;
    left: 10%;
    margin-top: -195px;
    width: 137px;
    height: 520px;
  }
}
#videos .playlists ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: center;
}
@media (min-width: 1000px) {
  #videos .playlists ul {
    margin: 0 0 15px 0;
    padding: 150px 0 0 30px;
    width: 165px;
  }
}
#videos .playlists li {
  position: relative;
  display: block;
  text-align: center;
  margin: 0 10px;
}
@media (max-width: 1000px) {
  #videos .playlists li {
    display: inline-block;
    width: 165px;
    margin: 0 auto;
  }
}
#videos .playlists li.active a, #videos .playlists li.active:hover a {
  background-color: #286B0A;
}
@media (min-width: 1000px) {
  #videos .playlists li.active a, #videos .playlists li.active:hover a {
    background-position-x: 100%;
    background-color: transparent;
  }
}
#videos .playlists a {
  display: inline-block;
  width: 48px;
  height: 89px;
  font-size: 0;
  transform: rotate(0deg);
  transition: transform 100ms;
  background-repeat: no-repeat;
  background-color: #59AD3D;
  border-radius: 5px;
  background-position: center center;
  width: 130px;
}
#videos .playlists a:hover {
  background-color: #286B0A;
}
#videos .playlists a.all {
  background-image: url(../static/videos/btn-m-all-2x.png);
  background-size: auto 60%;
}
#videos .playlists a.episodes {
  background-image: url(../static/videos/btn-m-episodes-2x.png);
  background-size: auto 58%;
}
#videos .playlists a.clips {
  background-image: url(../static/videos/btn-m-clips-2x.png);
  background-size: auto 65%;
}
#videos .playlists a.ask-molly {
  background-image: url(../static/videos/btn-m-ask-molly-2x.png);
  background-size: auto 65%;
}
#videos .playlists a.podcast {
  background-image: url(../static/videos/btn-m-podcast-2x.png);
  background-size: auto 65%;
}
@media (min-width: 1000px) {
  #videos .playlists a {
    display: block;
    border-radius: none;
    width: 95px;
    height: 70px;
    background-image: url(../static/videos/btn-video-types-2x.png);
    background-color: transparent;
  }
  #videos .playlists a:hover {
    transform: rotate(5deg);
    background: transparent;
  }
  #videos .playlists a.all {
    background-image: url(../static/videos/btn-video-types-2x.png);
    background-position: 0 0;
    background-size: 190px 350px;
  }
  #videos .playlists a.episodes {
    background-image: url(../static/videos/btn-video-types-2x.png);
    background-position: 0 -70px;
    background-size: 190px 350px;
  }
  #videos .playlists a.clips {
    background-image: url(../static/videos/btn-video-types-2x.png);
    background-position: 0 -140px;
    background-size: 190px 350px;
  }
  #videos .playlists a.ask-molly {
    background-image: url(../static/videos/btn-video-types-2x.png);
    background-position: 0 -210px;
    background-size: 190px 350px;
  }
  #videos .playlists a.podcast {
    background-image: url(../static/videos/btn-video-types-2x.png);
    background-position: 0 -280px;
    background-size: 190px 350px;
  }
}
.no-touchevents #videos .playlists a:hover, .touchevents #videos .playlists a:active, #videos .playlists li.active a {
  color: #fe6aae;
}
/**
 * Player
 */
/**
 * Variables
 */
/**
 * Functions
 */
/**
 * Mixins
 */
html:not(.isfullscreen) .pbskids-default-skin .vjs-big-play-button span {
  background-size: 30% !important;
}
html:not(.isfullscreen) #player #video-player {
  top: 14%;
  left: 8.5%;
}
html:not(.isfullscreen) #player {
  background-size: contain;
  z-index: 5;
  width: 487px;
  height: 309px;
  background-color: #000;
  background: url(../static/videos/bg-video-frame-2x.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
  left: auto;
  transition: left 0.2s;
}
@media (max-width: 599px) {
  html:not(.isfullscreen) #player {
    width: 300px;
    height: 191px;
  }
}
@media (min-width: 420px) {
  html:not(.isfullscreen) #player {
    transform: scale(1.3);
  }
}
@media (min-width: 500px) and (max-width: 600px) {
  html:not(.isfullscreen) #player {
    transform: scale(1.5);
  }
}
@media (min-width: 600px) {
  html:not(.isfullscreen) #player {
    transform: scale(0.8);
    left: auto;
  }
}
@media (min-width: 820px) {
  html:not(.isfullscreen) #player {
    float: left;
    position: relative;
    transform: translateX(0);
    margin: 0 0 0 30px;
    left: auto;
  }
}
@media (min-width: 1000px) {
  html:not(.isfullscreen) #player {
    left: 50%;
    top: -7%;
    transform: scale(1) translateX(-50%);
    float: none;
  }
}
html:not(.isfullscreen) #player #video-player {
  width: 82%;
  height: 73%;
  position: absolute;
  background-color: #000;
}
html:not(.isfullscreen) #player .play-pause {
  display: block;
  position: absolute;
  background: url(../static/videos/btn-play-pause-2x.png) no-repeat;
  background-size: 100% auto;
  opacity: 1;
  width: 30px;
  height: 27px;
  top: 89%;
  left: 4%;
}
@media (max-width: 600px) {
  html:not(.isfullscreen) #player .play-pause {
    width: 20px;
    height: 17px;
  }
}
html:not(.isfullscreen) #player .play-pause:hover {
  animation: depress 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
html:not(.isfullscreen) #player .play-pause.playing {
  background-position: right 98%;
}
html:not(.isfullscreen) #player .cc {
  display: block;
  position: absolute;
  background: url(../static/videos/btn-cc-2x.png) no-repeat center top;
  background-size: 100% auto;
  font-size: 0;
  opacity: 1;
  transition: opacity 0.2s;
  overflow: hidden;
  width: 30px;
  height: 27px;
  top: 89%;
  right: 3%;
}
@media (max-width: 600px) {
  html:not(.isfullscreen) #player .cc {
    width: 20px;
    height: 17px;
  }
}
html:not(.isfullscreen) #player .cc:hover {
  animation: depress 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
html:not(.isfullscreen) #player .cc.captions-on {
  background-position: 0 100%;
}
html:not(.isfullscreen) #player .scrubber {
  display: block;
  position: absolute;
  height: 8px;
  background-color: #ffd9b5;
  width: 69%;
  left: 11%;
  top: 92%;
}
@media (max-width: 600px) {
  html:not(.isfullscreen) #player .scrubber {
    height: 5px;
  }
}
html:not(.isfullscreen) #player .scrubber-track {
  width: 100%;
  height: 100%;
}
html:not(.isfullscreen) #player .scrubber-thumb {
  background: url(../static/videos/btn-node-2x.png) no-repeat top right;
  background-size: 100% auto;
  display: block;
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
html:not(.isfullscreen) #player .scrubber-thumb:before {
  content: "";
  display: block;
  padding-top: 100%;
}
html:not(.isfullscreen) #player .progress {
  float: right;
  margin: -23px -43px 0 0;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}
@media (max-width: 600px) {
  html:not(.isfullscreen) #player .progress {
    font-size: 8px;
    margin: -21px -25px 0 0;
  }
}
html.isfullscreen #video-player {
  width: auto !important;
  height: auto !important;
  position: static !important;
}
/**
 * Playlist
 */
/**
 * Variables
 */
/**
 * Functions
 */
/**
 * Mixins
 */
/**
 * Playlist buttons and misc (up / down / more / loading)
 */
#playlist {
  position: relative;
  margin: 50px auto 0;
  padding-bottom: 60px;
  max-width: 300px;
  width: 100%;
  height: auto;
  z-index: 10001;
}
@media (min-width: 820px) {
  #playlist {
    display: block;
    padding-bottom: 0;
    width: 160px;
    height: 325px;
    position: absolute;
    right: 6%;
    top: 4px;
    margin: 0;
  }
}
@media (min-width: 895px) {
  #playlist {
    right: 10%;
  }
}
@media (min-width: 1000px) {
  #playlist {
    right: 3%;
  }
}
#playlist .show-more {
  width: 100%;
  color: #fff;
  text-align: center;
  font-weight: 700;
  display: inline-block;
  -webkit-backface-visibility: hidden;
  background-color: #286B0A;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-transform: uppercase;
  -ms-transition: color 200ms ease-out, text-shadow 200ms ease-out;
  -webkit-transition: color 200ms ease-out, text-shadow 200ms ease-out;
  transition: color 200ms ease-out, text-shadow 200ms ease-out;
}
.no-touchevents #playlist .show-more:hover, .touchevents #playlist .show-more:active {
  color: #590388;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
#playlist .loading-indicator {
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  z-index: 100;
}
#playlist .up, #playlist .down {
  outline: none !important;
  border: none !important;
  cursor: pointer;
}
#playlist .up {
  display: none;
  position: absolute;
  top: 0px;
  left: 51%;
  transform: translateX(-50%);
  width: 52px;
  height: 51px;
  background-image: url(../static/videos/btn-arrow-up-2x.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  background-color: transparent;
  font-size: 0 !important;
  z-index: 30;
}
@media (min-width: 820px) {
  #playlist .up {
    top: -26px;
    display: block;
  }
}
#playlist .up:before {
  content: "";
  display: block;
  padding-top: 28.5714285714%;
}
#playlist .up:hover {
  background-position: 0 100%;
  animation: depressCenter 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
#playlist .down {
  display: none;
  position: absolute;
  bottom: 0;
  left: 51%;
  transform: translateX(-50%);
  width: 52px;
  height: 51px;
  background: transparent url(../static/videos/btn-arrow-down-2x.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  background-color: transparent;
  font-size: 0 !important;
  z-index: 30;
}
#playlist .down:before {
  content: "";
  display: block;
  padding-top: 28.5714285714%;
}
#playlist .down:hover {
  background-position: 0 100%;
  animation: depressCenter 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 820px) {
  #playlist .down {
    display: block;
  }
}
#playlist .appendingIndicator-container {
  height: 50px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  font-size: 20px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  -ms-transition: color 200ms ease-out, text-shadow 200ms ease-out;
  -webkit-transition: color 200ms ease-out, text-shadow 200ms ease-out;
  transition: color 200ms ease-out, text-shadow 200ms ease-out;
  text-transform: uppercase;
  color: #FFF;
  width: 100%;
}
#playlist .appendingIndicator-container .appending-indicator {
  width: 30px;
  height: 30px;
}
#playlist .appendingIndicator-container img {
  vertical-align: middle;
  margin-right: 5px;
}
/**
 * iScroll video playlist container
 */
#video-playlist-iScrollContainer {
  position: relative;
  max-width: 300px;
  width: 100%;
  overflow: visible;
  height: auto;
  top: 46px;
}
@media (min-width: 820px) {
  #video-playlist-iScrollContainer {
    width: 160px;
    height: 212px;
    min-height: 100px;
    position: absolute;
  }
}
#video-playlist-iScrollContainer #video-playlist {
  opacity: 1;
}
/**
 * Playlist thumbnails
 */
#video-playlist {
  -webkit-backface-visibility: hidden;
  opacity: 0;
  min-height: 100px;
  padding: 0;
  margin: 0;
}
#video-playlist .selected .label {
  background-color: #94771a;
}
#video-playlist .label {
  position: absolute;
  bottom: 0;
  display: block;
  padding: 5px 5px 0 0;
  width: auto;
  overflow: hidden;
  background-color: #613d24;
  z-index: 1;
  color: #FFF;
  text-transform: none;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}
#video-playlist .label .clip-label, #video-playlist .label .full-label {
  display: none;
}
#video-playlist .new-label {
  display: none;
  -ms-transition: opacity 300ms ease-out;
  -webkit-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}
#video-playlist .new-video .new-label {
  display: block;
  text-transform: uppercase;
  background-color: #59AD3D;
  background-repeat: no-repeat;
  background-size: contain;
  white-space: nowrap;
  width: auto;
  font-size: 12px;
  color: #fff;
  font-weight: 800;
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  padding: 5px;
}
#video-playlist .video-info {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.25em;
}
#video-playlist li.item {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 auto 10px;
  border: 7px solid #5f3c22;
  cursor: pointer;
}
#video-playlist li.item.selected {
  border: 7px solid #94771a;
}
#video-playlist li.item.clip .clip-label {
  display: block;
}
#video-playlist li.item.episode .full-label {
  display: block;
}
#video-playlist .thumb-container {
  display: block;
}
#video-playlist .thumb-container img {
  width: 100%;
  height: auto;
  z-index: 1;
  display: block;
}