html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	font-family:'Open Sans', arial, verdana, sans-serif;
	font-size:10px;
	line-height:10px;
	font-weight:400;
}

html,body { width:100%; height:100%; }

.active { background:#e1e1e1; }
.player { position:relative; margin:0 auto; overflow:hidden; width:100vw; height:calc(56.25vw + 25px); visibility: visible; }
.forceAspect .player { height:calc(56.25vw); }
.header { position:absolute; margin:0 auto; overflow:hidden; width:100vw; background:#0F3D62; height:25px; z-index:2000; }
.video { margin:0 auto; overflow:hidden; z-index:1999; top:25px; }
.forceAspect .video { top: 0; }
.videoOverlay { margin:0 auto; overflow:hidden; position:absolute; top:25px; right:0; bottom:0; left:0; z-index:2000; cursor:pointer; background:#000; color:#FFF; display:none; }
.underlayImage { display:block; width:100%; height:calc(100% / (16/9)); position:relative; }
.static { margin:10px auto; overflow:hidden; width:300px; display:none; }
.underlayTitle { font-weight: 600; color:#FFF; font-size:13px; font-size:1.3rem; line-height:14px; line-height:1.45rem; margin:10px; }
.underlayTime { font-weight:600; color:#FFF; font-size:11px; font-size:1.1rem; line-height:13px; line-height:1.3rem; position:absolute; right:10px; bottom:15px; left:10px; }
.underlaySummary { font-size:11px; font-size:1.1rem; color:#DDD; line-height:13px; line-height:1.3rem; margin:0 10px; }
.feedNav { position:relative; margin:10px auto; overflow:hidden; height:30px; }
.feedHeader { position:absolute; top:0; right:0; bottom:0; left:0; height:30px; margin:0 auto; overflow:hidden; }
.feedTitle { margin:0; overflow:hidden; font-size:15px; font-size:1.5rem; height:25px; line-height:25px; line-height:2.5rem; width:100%; font-weight:600; color:#FFF; text-align:center; }
 
.companion { width:300px; position: absolute; background: none; bottom:35px; right:calc(50% - 150px); display:none; }
.companion a img { width: 100% !important; height: auto !important; }
.overlayCompanionClose { cursor: pointer; position: absolute; bottom: 90px; right: calc(50% - 158px); background: #000; width: 15px; height: 15px; border-radius: 15px; color: #FFF; text-align: center; line-height: 15px; display:none; }
.vjs-remaining-time-display { line-height:3em; }

/* *** BEGIN ANIMATED COMPONENTS *** */

.videoUnderlay { position:absolute; overflow:hidden; top:25px; left:-50%; bottom:0; z-index: 3002; width:50%; background:#000; background:rgba(0, 0, 0, 0.75); }
.videoUnderlay.close{ left:-50%; }
.videoUnderlay.open{ left:0;}

.playlist { margin:0 auto; position:absolute; top:25px; bottom:0; right:-50%; width:50%; z-index:3004; background:#D2D2D2; overflow:hidden; }
.playlist.close { right:-50%; }
.playlist.open { right:0; }

.menuButton { position:absolute; height:25px; width:25px; right:0; top:0; cursor:pointer; z-index:3005; font-weight:600; color:#FFF; background:#0F3D62; }
.menuButton.close { right:0; }
.menuButton.open { right:0; }
.menuButton.hidden, .hidden { display: none; }

.menuIcon { position:relative; padding-left: 1.25rem; }
.menuBars { content:""; position:absolute; top:0.35rem; left:0; width:2rem; height:0.5rem; border-top:1rem double #FFF; border-bottom:0.25rem solid #FFF; }

.headerNowPlaying { display:block; position:absolute; right:0; top:0; height:25px; z-index:3001; width:100%; }
.upNext { display:none; }

.animateOn .animateRight { transition:right 0.35s ease-out; }
.animateOn .animateLeft { transition:left 0.35s ease-out; }
.animateOn .animateFade { transition:opacity 0s ease-out; }

/* *** END ANIMATED COMPONENTS *** */

.playlistSlider { margin:0 auto; width:100%; }
.item { height:76px; width:100%; margin:0 auto; overflow:hidden; cursor:pointer; border-bottom:0 none; }
.itemDetails  { margin:0 auto; overflow:hidden; height:76px; width:100%; }
.itemThumbnail { width:100px; height:56px; float:left; margin:10px; }
.thumb  { width:100px; height:56px; }
.itemTitle { margin:0 10px 0 0; font-size:13px; line-height:15px; font-size:1.3rem; line-height:1.55rem; font-family:'Open Sans', arial, sans-serif; color:#000; }
.iScrollLoneScrollbar { position:absolute; width:8px; right:5px; bottom:5px; top:5px; border-radius:10px; background:#E1E1E1; }
.scrollHandle { width:8px !important; height:89px !important; margin-left:0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background:#0F3D62; }
.scrollbarWrapper { width:20px; position:absolute; top:0; bottom:0; right:160px; background:#BFBFBF; }

.videoThumbnail { display:none; background-size:cover; position:absolute; top:0; right:0; bottom:0; left:0; z-index:2001; }

.playButton, .playCircle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#0F3D62; background:rgba(15,61,98,0.8); }
.playButton { height: 80px; width: 80px; border-radius: 10px; }
.playCircle { height: 53px; width: 53px; border-radius: 4px; }

.playButtonArrow, .playArrow { width:0; height:0; border-style:solid; top:50%; left:50%; transform:translate(-45%,-50%); position:absolute; border-color:transparent transparent transparent #FFF; }
.playButtonArrow { border-width:20px 0 20px 30px;}
.playArrow { border-width:10px 0 10px 16px; }

.playVideoArrow { width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; position:absolute; top:50%; transform:translate(0,-50%); border-color: transparent transparent transparent #FFF; }
.playVideoText { position:absolute; left:15px; top:50%; transform:translate(0,-50%); }
.playVideoText .playVideo, .playVideoText .seperator, .playVideoText .videoLength { float:left; font-weight:600; }
.playVideoText .seperator { margin:0 5px; }
.videoTime { position:absolute; bottom:0; right:0; padding:3px; background:#000; background:rgba(0,0,0,0.60); color:#FFF; font-weight:600; }
.errorMsg { font-size:1.5rem; position:absolute; top:50%; right:10px; left:10px; line-height:2rem; margin-top:-2rem; text-align:center; color: white;}
 
/* style to prevent default ie drag */ 
.feedFrame, .companyFrame { touch-action: none; -ms-touch-action: none; } 

/* The rule below is to resolve animation resizing issues during IMA/DFP ad playback*/
#videoPlayer_ad > div, #videoPlayer_ad iframe {width:100% !important; height:100% !important; }

/* Rules for the layout of the player when it is in floating mode */
.float .player { height:calc(56.25vw + 25px); }
.float .video { position:absolute; top:25px; right:0; bottom:0; left:0; }
.float .menuButton { display:none; }
.float .closeButton { position:absolute; right:3px; top:3px; width:20px; height:20px; background:#000; border-radius:50%; z-index:3004; }
.float .closeButton:before, .float .closeButton:after { position:absolute; top:50%; left:50%; content:''; height:14px; width:2px; background-color:#FFF; display:block;}
.float .closeButton:before { transform:translate(-50%,-50%) rotate(45deg); }
.float .closeButton:after { transform:translate(-50%,-50%) rotate(-45deg); }
.float .header { height:25px; }
.float .vjs-title-bar, .float .feedNav { display: none !important; }

.nowPlayingMargins { margin:0 35px 0 10px; line-height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#FFF; font-size:1.1rem; font-weight:600; line-height:2.5rem; }
.nowPlayingMargins span { font-size:1.1rem; font-weight:600; line-height:2.5rem; }
.thumb { width:80px; height:45px; }
.item { border:0 none; height:60px; }
.itemThumbnail { height: 45px; margin:7px; width: 80px; position:relative; }
.video { right: 0; position:relative; }
.feedNav { height: 25px; margin:0 auto; }
.feedHeader { height: 25px; right:13px; }
.itemDetails { height:60px; }
.itemTitle { font-size: 1.1rem; line-height: 1.2em; font-weight:600; }
.scrollbarWrapper { border-left:0 none; right:0; }

.video-js.s2nVideo .vjs-control-bar { background-color:#0F3D62; background-color:rgba(15,61,98,0.8); }
.video-js.s2nVideo .vjs-big-play-button { background-color:#0F3D62; background-color:rgba(15,61,98,0.8); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; border:0 none; height: 80px; width: 80px; margin-top:0; margin-left:0; transform:translate(-50%,-50%);  }
.video-js.s2nVideo .vjs-big-play-button:before { font-size:5rem; left:50%; top:70%; transform:translate(-50%,-50%); }
.video-js:hover.s2nVideo .vjs-big-play-button { background-color:#0F3D62; background-color:rgba(15,61,98,0.8); }

@media only screen 
and (min-width : 180px) and (max-width : 460px) { 
	
	/* *** BEGIN ANIMATED COMPONENTS *** */

	.videoUnderlay { left:-100%; width:100%; }
	.videoUnderlay.close{ left:-100%; }
	.playlist { right:-100%; width:100%; }
	.playlist.close { right:-100%; }
	.menuButton { width:25px; right:0; }

	/* *** END ANIMATED COMPONENTS *** */
	
	.underlayImage { display:none; }
	
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS fix for ad height issue */
	.ima-ad-container div:first-child, .ima-ad-container div iframe { height:100%!important; }
}
