/* JW Player */

.jwplayer:not(.jw-flag-user-inactive) .jw-controls-backdrop { 
    opacity: 1 !important; 
    background: hsla(0, 0%, 0%, .2) !important; 
}
.jw-display-icon-ff.hidden { display: none; }

.jw-flag-fullscreen .jw-controlbar {
	background: hsla(0, 0%, 0%, .65) !important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+66&0+0,0.66+40 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.66) 40%, rgba(0,0,0,0.66) 66%) !important; /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.66) 40%,rgba(0,0,0,0.66) 66%) !important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.66) 40%,rgba(0,0,0,0.66) 66%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.jw-controlbar {
	background: hsla(0, 0%, 0%, .65) !important;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+66&0+0,0.66+40 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.66) 40%, rgba(0,0,0,0.66) 66%) !important; /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.66) 40%,rgba(0,0,0,0.66) 66%) !important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.66) 40%,rgba(0,0,0,0.66) 66%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.jw-state-idle .jw-controls, .jw-controls-backdrop, .jw-controls-backdrop { background-image: none !important; }
.jw-display .jw-icon { padding: .18em .75em !important; border-radius: 20%; }
.jw-breakpoint-2 .jw-display .jw-icon,
.jw-breakpoint-3 .jw-display .jw-icon,
.jw-breakpoint-4 .jw-display .jw-icon,
.jw-breakpoint-5 .jw-display .jw-icon 
    { padding: .55em .75em !important; }

.jwplayer .jw-display .jw-icon:hover,
.jwplayer .jw-display .jw-icon { -webkit-transition: background .3s ease; transition: background .3s ease; }
.jw-display-controls { display: inline-flex !important; }
.jw-breakpoint-0 .jw-display .jw-icon, .jw-breakpoint-0 .jw-display .jw-svg-icon {
    width: 24px !important;
    height: 42px !important;
}
.jw-breakpoint-1 .jw-display .jw-icon, .jw-breakpoint-1 .jw-display .jw-svg-icon {
    width: 30px !important;
    height: 49px !important;
}
.jw-icon-display.jw-icon .icon-svg {
    display: flex !important;
} 
.jw-breakpoint-0 .jw-icon-display.jw-icon .jw-svg-icon {
    width: 32px !important;
    height: 32px !important;
}
.jw-breakpoint-1 .jw-icon-display.jw-icon .jw-svg-icon {
    width: 38px !important;
    height: 38px !important;
}
.jwplayer .jw-display .jw-icon { display: flex; justify-content: center; align-content: center; align-items: center; }
.jwplayer .jw-display-icon-display .jw-icon:active { animation: pulseMedia .5s infinite ease-out; }

.jwplayer .jw-display .jw-icon:hover {  background: hsla(0, 0%, 0%, .5); }
.jwplayer .jw-display .jw-icon .jw-svg-icon { color: rgba(255,255,255,1) !important; }
.membersHome .jw-breakpoint-1 .jw-display .jw-svg-icon { width: 30px; height: 35px; }

.jw-breakpoint-0 .jw-svg-icon, 
.jw-breakpoint-1 .jw-svg-icon 
    { width: 32px !important; height: 32px !important; }

.jw-controlbar { 
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    max-height: 85px !important;
}
.jwplayer:not(.jw-flag-fullscreen) .jw-controlbar .jw-button-container { 
    margin-top: 4px !important;
}
.jwplayer.jw-flag-fullscreen .jw-controlbar .jw-button-container { 
    margin-top: -13px !important;
}

.jw-breakpoint-2.jwplayer:not(.jw-flag-fullscreen) .jw-controlbar,
.jw-breakpoint-3.jwplayer:not(.jw-flag-fullscreen) .jw-controlbar,
.jw-breakpoint-4.jwplayer:not(.jw-flag-fullscreen) .jw-controlbar,
.jw-breakpoint-5.jwplayer:not(.jw-flag-fullscreen) .jw-controlbar,
.jw-breakpoint-6.jwplayer:not(.jw-flag-fullscreen) .jw-controlbar,
.jw-breakpoint-7.jwplayer:not(.jw-flag-fullscreen) .jw-controlbar
{ max-height: 90px !important; }

.jw-slider-horizontal.jw-chapter-slider-time .jw-knob { width: 17px !important; height: 17px !important; }

.jw-settings-content-item, .jw-settings-menu .jw-tooltip .jw-text { font-size: 16px !important; }
.jw-text { font-size: 0.875rem !important; }
.jw-icon-cast { margin-right: 20px !important; }
.jw-settings-content-item {
	font-size: 15.5px !important;
	line-height: 1.5em !important;
	display: inline-block;
	width: 50%;
	padding: 10px 20px 3px 20px !important
}
.jw-settings-submenu.jw-settings-submenu-active {  display: flex; flex-flow: column wrap; }

.jw-display-icon-container { margin: 0 5px !important; }
/* rewind, play/pause, ff toolbar, when video active, move up, so not too close to scrub bar */
.jwplayer:not(.jw-state-idle) .jw-display { 
    /* height: calc(100% - 50px) !important;  */
    height: calc(100% - 58px) !important;
}

/* control bar buttons */
.jw-controlbar .jw-icon-inline .jw-button-image {
    filter: invert(96%) sepia(97%) saturate(12%) hue-rotate(237deg) brightness(103%) contrast(103%);
    opacity: .8;
}
.jw-controlbar .jw-icon-inline .jw-button-image:hover {
    filter: invert(100%) sepia(94%) saturate(26%) hue-rotate(72deg) brightness(106%) contrast(105%);
    opacity: 1;
}
.jw-controlbar .jw-icon-rewind, .jw-controlbar .jw-icon-ff {
    top: 0 !important;
    margin-left: 5px !important;
    margin-right: 6px !important;
    width: 28px !important;
    height: 28px !important;
}
.jw-controlbar .jw-icon-rewind .jw-button-image, .jw-controlbar .jw-icon-ff .jw-button-image {
    max-height: none !important;
    height: 100% !important;
}
.jw-controlbar .jw-icon-inline.jw-icon-ff {
    top: 0 !important;
    margin-right: -6px;
}
.jw-controlbar .jw-svg-icon {
    width: 28px !important;
    height: 28px !important;
}

/* hide added ff button in toolbar when in mobile */

.jw-breakpoint-0 .jw-display .jw-icon[button='btnFF'],
.jw-breakpoint-1 .jw-display .jw-icon[button='btnFF'] 
    { display: none !important; }
.jw-breakpoint-0 .jw-button-container .jw-icon-ff,
.jw-breakpoint-1 .jw-button-container .jw-icon-ff 
    { display: none !important; }


/* Hide rewind/ff/next buttons in toolbar when in desktop */
.jw-breakpoint-2 .jw-display-controls .jw-display-icon-container:not(.jw-display-icon-display),
.jw-breakpoint-3 .jw-display-controls .jw-display-icon-container:not(.jw-display-icon-display),
.jw-breakpoint-4 .jw-display-controls .jw-display-icon-container:not(.jw-display-icon-display),
.jw-breakpoint-5 .jw-display-controls .jw-display-icon-container:not(.jw-display-icon-display),
.jw-breakpoint-6 .jw-display-controls .jw-display-icon-container:not(.jw-display-icon-display),
.jw-breakpoint-7 .jw-display-controls .jw-display-icon-container:not(.jw-display-icon-display) 
{ display: none !important; }

.jw-breakpoint-2 .jw-display-controls .jw-icon.jw-icon-volume,
.jw-breakpoint-3 .jw-display-controls .jw-icon.jw-icon-volume,
.jw-breakpoint-4 .jw-display-controls .jw-icon.jw-icon-volume,
.jw-breakpoint-5 .jw-display-controls .jw-icon.jw-icon-volume,
.jw-breakpoint-6 .jw-display-controls .jw-icon.jw-icon-volume,
.jw-breakpoint-7 .jw-display-controls .jw-icon.jw-icon-volume
{ margin-right: 20px !important; margin-left: 7px !important; }

/* show back 10sec in really small mobile, override JW */
.jw-breakpoint-0 .jw-display-icon-rewind { display: block !important; }
.jw-state-idle.jw-breakpoint-0 .jw-display-icon-rewind,
.jw-state-idle.jw-breakpoint-0 .jw-display-icon-ff { display: none !important; }

.jw-display .jw-icon, .jw-display .jw-svg-icon {
    border-radius: 100% !important;
}
.jw-breakpoint-0 .jw-display .jw-display-icon-rewind .jw-icon, 
.jw-breakpoint-0 .jw-display .jw-display-icon-ff .jw-icon,
.jw-breakpoint-1 .jw-display .jw-display-icon-rewind .jw-icon, 
.jw-breakpoint-1 .jw-display .jw-display-icon-ff .jw-icon {
    width: auto !important;
    height: auto !important;
    padding: 5px !important;
}
.jw-breakpoint-4 .jw-display .jw-icon, .jw-breakpoint-4 .jw-display .jw-svg-icon, 
.jw-breakpoint-5 .jw-display .jw-icon, .jw-breakpoint-5 .jw-display .jw-svg-icon, 
.jw-breakpoint-6 .jw-display .jw-icon, .jw-breakpoint-6 .jw-display .jw-svg-icon, 
.jw-breakpoint-7 .jw-display .jw-icon, .jw-breakpoint-7 .jw-display .jw-svg-icon {
    padding-bottom: 11px !important;
    padding-top: 11px !important;
}
.jw-display-controls {
    display: inline-flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.jw-display-controls {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.jw-icon-rewind .icon-svg {
    background: url(http://images.azureedge.net/rcg/images/interface/icn_jwplay_rewind_10-large.svg) no-repeat center center;
}
.jw-icon-ff .icon-svg {
    background: url(http://images.azureedge.net/rcg/images/interface/icn_jwplay_forward_10-large.svg) no-repeat center center;
}
.jw-display-controls .jw-icon-rewind .icon-svg, .jw-display-controls .jw-icon-ff .icon-svg {
    width: 24px !important;
    height: 24px !important;
}
.jw-icon-rewind .icon-svg, .jw-icon-ff .icon-svg {
    padding: 5px !important;
    background-size: 100% auto;
    filter: invert(96%) sepia(97%) saturate(12%) hue-rotate(237deg) brightness(103%) contrast(103%);
    opacity: .8;
}
.jw-icon-rewind:hover .icon-svg, .jw-icon-ff:hover .icon-svg {
    filter: invert(100%) sepia(94%) saturate(26%) hue-rotate(72deg) brightness(106%) contrast(105%);
}
.jw-icon-rewind .icon-svg, .jw-icon-ff .icon-svg,
    .jw-icon-rewind:hover .icon-svg, .jw-icon-ff:hover .icon-svg {
    opacity: 1;
}

/* make submenus appear over scrub bar */
.jw-settings-menu { 
    z-index: 50;
    padding-bottom: 10px !important;
 }


/* Docked styles */
#mediaWrapper.docked.mobileDock .jwplayer:not(.jw-flag-fullscreen) .jw-display {
    height: calc(100% - 91px) !important;
}


/* Audio only player */
#mediaWrapper.audio .jw-display-controls .jw-icon {
    background: hsla(0, 0%, 0%, .45);
}
#mediaWrapper.audio .jw-display-controls .jw-icon:hover {
    background: hsla(0, 0%, 0%, .6) !important;
}
#mediaWrapper.audio .jw-controls .jw-display { opacity: 1 !important; visibility: visible !important; }
#mediaWrapper.audio .jw-icon-pip { display: none !important; } /* hide pip because it doesn't do anything */


 @keyframes pulseMedia {
    from {
      box-shadow:  0 0 0 0 hsla(0, 100%, 100%, .8),
                   0 0 0 0 hsla(0, 0%, 0%, .5);
    }
    to {
        box-shadow:  0 0 0 0.65em hsla(0, 100%, 100%, .8),
                     0 0 0 1em hsla(0, 0%, 0%, .5);
      }
  }