/* GLOBAL VIDEO CLASSES
   NEVER CHANGE .videolimelight_html5 video class 
   TO MAKE VIDEO WIDTH REPONSIVE, CHANGE CSS ON THE PARENT ELEMENT */

.videolimelight_html5 video {
  height: 100%;
  width: 100%;
}
/* END GLOBAL VIDEO CLASSES */

/* LIMELIGHT VIDEOJS OVERRIDE */
.limelight-player .vjs-limelight-big-play {  /* play icon images */
  font-size: 8em !important;
  text-shadow: none !important;  
}

.limelight-player .vjs-limelight-big-play:before {
  content: "\f102" !important;  /*font awesome code overides player icon*/
}
/* END LIMELIGHT VIDEOJS OVERRIDE */  /*all lines above need to stay but can change sizes to change icon*/

/* ACCESSIBILITY - transcript won't show unless it exists */  /*dynamically writes transcript if found hidden if not found*/
p.vtranscript {margin:.5em 0; overflow: hidden;}
p.vtranscript a {visibility: hidden;}
p.vtranscript a.active {visibility:visible;}


/* PLAYLIST - update as needed for your site look and feel */
.video_info {background-color:#c1e2f7; color: #002247; font: bold 1.1em/1.2em Arial, Arial, Helvetica, sans-serif; min-height:19px; overflow: hidden; padding: 3px 1%; width: 98%;}
.video_info.nobg {background-color:#fff; color: #002247; font: bold 1.1em/1.2em Arial, Arial, Helvetica, sans-serif; min-height:19px; overflow: hidden; padding: 3px 0; width: 100%;}

.video {background-color:#fff; font: 13px/17px Arial, Helvetica, sans-serif; overflow:hidden;}

.playlist ul  {list-style:outside none none; margin:0; padding:0;}
.playlist ul li {background:none; line-height:17px; margin:0; padding:0;}
.playlist button {background: url(/media/managed/icon-play.png) 2% center no-repeat #fff; border-bottom:solid 1px #c1e2f7; border-right:none; border-top:none; border-left:none; color:#000; cursor:pointer; display:block; margin:0; padding:9px 5px 9px 50px; text-decoration:none; text-align:left; width:100%;}
.playlist button img {display: none;}
.playlist.nobg button {background: none; border-bottom:solid 1px #c1e2f7; border-right:none; border-top:none; border-left:none; color:#000; cursor:pointer; display:block; margin:0; padding:9px 5px 9px 0; text-decoration:none; text-align:left; width:100%;}
.playlist.nobg button img {display: inline-block; margin-right: 5px; }
.playlist.nobg button div {display: inline-block; vertical-align: top;}
.playlist button:hover, .playlist button:hover + a {background-color:#dddddd;}
.playlist button.selected, .playlist button.selected + a {background-color:#e0f0fb;}
.playlist a:hover {background-color:#e0f0fb; text-decoration:underline;}

/* LIMELIGHT HTML5 AUDIO PODCAST STYLES */
.audiopodcast {
  width: 100%;
  height: 60px;
}

.audiopodcast .video-js {
  background-color: #f0f0f0 !important;
  display: flex;
  justify-content: flex-end;
  margin-left: 15px;
}

.audiopodcast .limelight-player .vjs-limelight, 
.audiopodcast .limelight-player .vjs-limelight-viewport {
  overflow: visible;
}

.audiopodcast .video-js.vjs-default-skin .vjs-big-play-button, 
.audiopodcast .limelight-player .vjs-limelight-big-play { 
  display: none !important; 
}

.audiopodcast .vjs-poster {
  display: none;
}

.audiopodcast .vjs-limelight-poster,
.audiopodcast .limelight-player .vjs-limelight-poster,
.audiopodcast .limelight-player .vjs-audio.vjs-has-started .vjs-limelight-poster
{
    cursor: pointer;
  display: none !important;
    vertical-align: middle;
    background-color: transparent !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0 !important;
    height: 60px;
    width: 60px; /*must have this because Limelight loads poster image after player controls, which prevents all control bar buttons from being clickable*/
}

.audiopodcast .video-js .vjs-control-bar {
  display: flex;
  align-self: center;
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5.0em;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.0);
}

@media screen and (min-width: 480px) {
  .audiopodcast .video-js .vjs-control-bar {
    width: 100%;
  }

  .audiopodcast .vsj-poster,
  .audiopodcast .vjs-limelight-poster,
  .audiopodcast .limelight-player .vjs-limelight-poster,
  .audiopodcast .limelight-player .vjs-audio.vjs-has-started .vjs-limelight-poster,
  .audiopodcast .limelight-player .vjs-audio-only.vjs-has-started .vjs-limelight-poster
  {
    display: inline-block !important;
  }
}

.audiopodcast .video-js .vjs-control {
  width: 8em;
  text-align: right;
}

.audiopodcast .video-js .vjs-control:before {
  font-size: 3em;
  line-height: 1.6;
}

.audiopodcast .video-js .vjs-fullscreen-control { 
  display: none; 
} 

.audiopodcast .video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 2em;
}

.audiopodcast .video-js .vjs-volume-bar {
  margin: 2.4em 1.4em;
}

.audiopodcast .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
  left: 5em;
}

.audiopodcast .vjs-slider-vertical {
  background-color: transparent;
}

.audiopodcast .video-js .vjs-remaining-time-display {
  font-size: 1.4em;
  line-height: 3.4em;
  text-align: left;
}
.audiopodcast .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: transparent;
}

/* transcript link */
p.vtranscript {
  line-height: 1;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

p.vtranscript a {
  font-size: $font-size-small;
}

p.transcript a.inactive { /* hide link if transcript doesn't exist - set on .ready (javascript) */
  visibility: hidden;
}