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:'Exo 2', arial, verdana, sans-serif;
	font-size:10px;
	line-height:10px;
}

html,body { width:100%; height:100%; }

.videoCenter { position:relative; margin:0 auto; overflow:visible; width:100vw; height:220px; }
.header { width:100%; max-width:121px; position:absolute; top:16px; bottom:16px; left:16px; }
.headerText { font-size:21px; font-size:2.1rem; line-height:26px; line-height:2.6rem; position:absolute; top:16px; bottom:0; left:0; width:100%; max-width:121px; text-align:center; }
.playerLogo { background-size:contain; background-position:center bottom; background-repeat:no-repeat; position:absolute; top:0; bottom:16px; left:0; width:100%; max-width:121px; }
.upper{ margin:0 auto; overflow:hidden; } 
.videoPosition { margin:0 auto; overflow:visible; position:absolute; top:16px; left:153px; bottom:16px; z-index:1999; width:334px; height:188px; background-color:#000; color:#FFF; }
.chromeVideo { width:5px; height:5px; }
#videoPlayer_wrapper { overflow:visible; }
.videoOverlay { display:none; position:absolute; }
.videoTitle { position:absolute; top:0; color:#FFF; font-size:1.1rem; line-height:1.4em; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; }
.upNext { position:absolute; bottom:8px; font-size:1.1rem; line-height:1.4em; font-weight: 600; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; display:none; }
.upNextLink { font-size:1.1rem; line-height:1.4em; }
.upNext, .upNextLink { color:#FFF; }

.playButton { width:80px; height:60px; padding-top:20px; border-radius:10px; margin-left:-40px; margin-top:-40px; position:absolute; top:50%; left:50%; }
.playButtonArrow { width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 30px; margin-left:28px; }
.frameLoader { margin:0 auto; overflow:hidden; position:absolute; top:0; right:0; bottom:0; left:0; z-index:300; display:none; }

.content { margin:0 auto; position:absolute; top:16px; right:16px; bottom:16px; left:503px; z-index:2998; background:rgba(0,0,0,0.5); }
.titleOverlay { display:none; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; opacity:0; background:rgba(0,0,0,0.5); font-size:1.4rem; height:36px; left:16px; line-height:3.6rem; padding:0 15px; position:absolute; top:16px; white-space:nowrap; width:384px; z-index:2002; }

.feedFrame { margin:0 auto; overflow:hidden; position:absolute; top:16px; right:16px; bottom:16px; left:16px; }
.feedContent { margin:0 auto; position:absolute; top:0; right:0; bottom:0; left:0; }
.feedPlaylist { margin:0 auto; float:left; position:absolute; top:0; right:0; bottom:0; left:0; }
.feedPlaylist.hover { height:114px; }
.page { margin:0 auto; position:absolute; top:0; right:0; bottom:0; left:0; }
.playlistSlider { margin:0 auto; width:100%; }

.pageWrapper { margin:0 auto; position:absolute; top:0; right:0; bottom:0; left:0; }
.story { margin:0; overflow:hidden; cursor:pointer; position:relative; z-index:2001; margin: 0 30px 12px 0; display:block; text-decoration:none; }
.story.active { background:#ba0700; background:rgba(186,7,0,0.5); }
.story:hover { background:#ba0700; }
.item { width:100%; margin:0 auto; overflow:hidden; }


.thumbWrapper  { margin:0 auto; overflow:hidden; width:100%; }
.thumbTitle { margin:0 auto; overflow:hidden; }
.thumbTitleText { padding:0; overflow:hidden; margin:0; }
.thumbTitleText p { margin:0 auto; padding:0; font-size:14px; line-height:29px; font-size:1.4rem; line-height:2.9rem; font-family:'Open Sans', arial, sans-serif; }
.thumbTitleP { padding:0 10px 0 19px; overflow:hidden; }

.itemDetails { display:none; margin:0 10px; }

.iScrollLoneScrollbar { position:absolute; width:8px; right:5px; bottom:5px; top:5px; border-radius:10px; overflow:visibile !important; }
.scrollHandle { width:8px !important; height:89px !important; margin-left:0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }

.scrollbarWrapper { width:20px; position:absolute; top:0; bottom:0; right:0; }
.categoryContainer .iScrollLoneScrollbar { position:absolute; width:8px; height:400px; right:16px; top:14px; border-radius:10px; overflow:visibile !important; }
.categoryContainer .iScrollLoneScrollbar .scrollHandle { width:20px !important; height:87px !important; margin-left:-6px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }

.errorMsg { font-size:1.5rem; position:absolute; top:50%; right:10px; left:10px; line-height:2rem; margin-top:-2rem; text-align:center; }

/* style to prevent default ie drag */
.feedFrame { touch-action: none; -ms-touch-action: none; } 

#overlayCompanion1close { z-index: 99; display: block; cursor: pointer; left: 50%; top: auto; bottom: 70px; margin-left: 136px; position: absolute; background: rgba(69,69,69,0.8); color: #fff; font-size: 2em; line-height: 1; padding: 1px 2px; border-radius: 20%; }

#aniplayer-overlay, #aniplayer, #aniplayer #playerDiv, #aniplayer #playerDiv * {
	top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
	-webkit-transform: none !important;
}

#aniplayer #logo_Button {     
	margin: 0px 0px -32px 100% !important;
    right: 57px !important;}
#aniplayer #closeButton { }
#aniplayer #bottomPlayer {width: 100% !important; }
#aniplayer #soundButton {    margin: 0px 0px -32px 100% !important;
    right: 32px !important; }
#aniplayer #playButton { }
/* The rule below is to resolve animation resizing issues */
.jw-media video {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100.5% !important;
    height: 100.5% !important;
    transform: none !important;
	-webkit-transform: none !important;
}

/* 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; }

.jwplayer.jw-state-paused.jw-skin-seven .jw-display-icon-container {
    display: table;
}

.jwplayer.jw-state-paused.jw-skin-seven.jw-flag-user-inactive  .jw-controlbar {
    display: none !important; 
}

.jwplayer.jw-flag-media-audio.jw-flag-user-inactive .jw-controlbar {
    display: none !important;
}

.jwplayer.jw-flag-media-audio.jw-flag-dragging .jw-controlbar {
    display: table !important;
}

.jwplayer.jw-skin-seven .jw-display-icon-container {
    border-radius: 10%;
    border: 0px solid #333;
}

.jwplayer.jw-skin-seven .jw-display-icon-container {
    position: relative;
    top: 50%;
    display: table;
    height: 5em;
    width: 5em;
    margin: -2.5em auto 0;
    cursor: pointer;
}

.jwplayer.jw-skin-seven .jw-display-icon-container .jw-button-color:hover {
    color: #fff;
}

/* Overrides for the 400px wide video */
.player400 .videoCenter { height:265px; }
.player400 .videoPosition { width:414px; height:233px; }
.player400 .content { left:583px; }

/* Overrides for the 500px wide video */
.player500 .videoCenter { height:313px; }
.player500 .videoPosition { width:500px; height:calc(500px / (16/9)); }
.player500 .content { left:666px; }
.player500 .playerLogo { background-size:contain; }

@media only screen 
and (min-width : 250px) 
and (max-width : 950px) {
	.thumbTitleP { padding:3px 10px 3px 10px; display:table; }
	.thumbTitleText p { font-size:1.2rem; line-height:1.2em; text-overflow:clip; vertical-align:middle; white-space:normal; display:table-cell; height:24px; }
}

/* Title and Logo on Top */
@media only screen 
and (min-width : 481px) 
and (max-width : 749px) {
	.header { top:0; right:8px; bottom:188px; left:8px; max-width:none; width:auto; }
	.headerText { top:0; right:50%; max-width:none; width:auto; text-align:left; font-size:1.6rem; line-height:2em; }
	.playerLogo { top:8px; right:0; bottom:8px; left:50%; max-width:none; width:auto; background-position:right center; }
	.videoPosition { width:320px; height:180px; top:32px; left:8px; }
	.content { left:336px; top:32px; right:8px; bottom:8px; }
}

@media only screen 
and (min-width : 250px) 
and (max-width : 480px) {
	.header { max-width:292px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); bottom:8px; top:172px; }
	.headerText { display:none; }
	.videoOverlay { display:block; top:180px; right:60px; bottom:0; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:100%; max-width:292px; }
	.upNext { right:60px; bottom:8px; left:0; font-size:1.1rem; line-height:1.4rem; display:block; }
	.upNextLink { font-size:1.1rem; line-height:1.4rem; }
	.videoTitle { right:60px; left:0; line-height:1.1rem; font-size:1.1rem; line-height:1.4rem; }
	.videoPosition { width:292px; top:8px; left:50%; height:164px; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); }
	.playerLogo { max-width:52px; top:0; right:0; bottom:0; left:auto; background-position:center center; }
}

@media only screen 
and (min-width : 250px) 
and (max-width : 1065px) {
	.player400 .thumbTitleP { padding:3px 10px 3px 10px; display:table; }
	.player400 .thumbTitleText p { font-size:1.2rem; line-height:1.2em; text-overflow:clip; vertical-align:middle; white-space:normal; display:table-cell; height:24px; }
}

/* Title and Logo on Top */
@media only screen 
and (min-width : 600px) 
and (max-width : 749px) {
	.player400 .header { top:0; right:8px; bottom:233px; left:8px; max-width:none; width:auto; }
	.player400 .headerText { top:0; right:50%; max-width:none; width:auto; text-align:left; font-size:1.6rem; line-height:2em; }
	.player400 .playerLogo { top:8px; right:0; bottom:8px; left:50%; max-width:none; width:auto; background-position:right center; }
	.player400 .videoPosition { width:400px; height:225px; top:32px; left:8px; bottom:8px; }
	.player400 .content { left:416px; top:32px; right:8px; bottom:8px; }
}

@media only screen 
and (min-width : 416px) 
and (max-width : 599px) {
	.player400 .header { max-width:400px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); bottom:0; top:229px; width:100%; }
	.player400 .headerText { display:none; }
	.player400 .videoOverlay { display:block; top:231px; right:auto; bottom:0; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:100%; max-width:400px; }
	.player400 .upNext { right:60px; bottom:4px; left:0; font-size:1.1rem; line-height:1.4rem; display:block; }
	.player400 .upNextLink { font-size:1.1rem; line-height:1.4rem; }
	.player400 .videoTitle { right:60px; left:0; line-height:1.1rem; font-size:1.1rem; line-height:1.4rem; }
	.player400 .videoPosition { width:400px; height:225px; top:4px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); right:8px; }
	.player400 .playerLogo { width:52px; top:0; right:0; bottom:0; left:auto; background-position:center center; }
	.player400 .titleOverlay { left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:370px; top:4px; }
}

@media only screen 
and (min-width : 250px) 
and (max-width : 415px) {
	.player400 .header { max-width:292px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); bottom:8px; top:172px; }
	.player400 .headerText { display:none; } 
	.player400 .videoOverlay { display:block; top:190px; right:60px; bottom:0; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:100%; max-width:292px; }
	.player400 .upNext { right:60px; bottom:8px; left:0; font-size:1.1rem; line-height:1.4rem; overflow:visible; text-overflow:clip; white-space:normal; display:block; }
	.player400 .upNextLink { font-size:1.1rem; line-height:1.4rem; }
	.player400 .videoTitle { right:60px; left:0; line-height:1.1rem; font-size:1.1rem; line-height:1.4rem; overflow:visible; text-overflow:clip; white-space:normal; }
	.player400 .videoPosition { width:292px; height:164px; top:16px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); }
	.player400 .playerLogo { max-width:52px; top:0; right:0; bottom:0; left:auto; background-position:center center; }
	.player400 .titleOverlay { left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:262px; top:16px; }
}

/* Title and Logo on Top */
@media only screen 
and (min-width : 740px) 
and (max-width : 900px) {
	.player500 .header { top:0; right:8px; bottom:auto; left:8px; max-width:none; width:auto; height:24px; }
	.player500 .headerText { top:0; right:50%; max-width:none; width:auto; text-align:left; font-size:1.6rem; line-height:2rem; }
	.player500 .playerLogo { top:4px; right:0; bottom:8px; left:50%; max-width:none; width:auto; background-position:right center; height:16px; }
	.player500 .videoPosition { top:24px; left:8px; bottom:8px; }
	.player500 .content { left:516px; top:24px; right:8px; bottom:8px; }
}

@media only screen 
and (min-width : 536px) 
and (max-width : 739px) {
	.player500 .header { max-width:500px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); bottom:4px; top:285px; width:100%; }
	.player500 .headerText { }
	.player500 .videoPosition { top:4px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); }
	.player500 .content { display:none; }
	.player500 .videoOverlay { display:block; top:285px; right:60px; bottom:4px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:100%; max-width:500px; }
	.player500 .upNext { right:60px; bottom:0; left:0; font-size:1.1rem; line-height:1.4rem; overflow:visible; text-overflow:clip; white-space:normal; display:block; }
	.player500 .upNextLink { font-size:1rem; line-height:1.2rem; }
	.player500 .videoTitle { right:60px; left:0; line-height:1.2rem; font-size:1rem; overflow:visible; text-overflow:clip; white-space:normal; }
	.player500 .playerLogo { width:52px; top:0; right:0; bottom:0; left:auto; background-position:center center; }
	.player500 .titleOverlay { left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:262px; top:16px; }
	.player500 .headerText { display:none; }
}

@media only screen 
and (min-width : 420px) 
and (max-width : 535px) {
	.player500 .header { max-width:400px; bottom:269px; top:12px; width:100%; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); }
	.player500 .headerText { display:block; line-height:3.2rem; top:0; left:0; right:auto; max-width:300px; text-align:left; font-size:1.6rem; }
	.player500 .videoOverlay { display:block; top:269px; right:auto; bottom:11px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:100%; max-width:400px; }
	.player500 .upNext { right:60px; bottom:0; left:0; font-size:1.1rem; line-height:1.6rem; display:block; }
	.player500 .upNextLink { font-size:1.1rem; line-height:1.4rem; }
	.player500 .videoTitle { right:60px; left:0; font-size:1.1rem; line-height:1.6rem; }
	.player500 .videoPosition { width:400px; height:225px; top:44px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); right:8px; }
	.player500 .playerLogo { max-width:100px; width:100%; top:0; right:0; bottom:0; left:auto; background-position:center center; }
	.player500 .titleOverlay { left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:370px; top:4px; }
}

@media only screen 
and (min-width : 250px) 
and (max-width : 419px) {
	.player500 .header { max-width:294px; bottom:239px; top:42px; width:100%; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); }
	.player500 .headerText { display:block; line-height:3.2rem; top:0; left:0; right:auto; max-width:194px; text-align:left; font-size:1.6rem; }
	.player500 .videoOverlay { display:block; top:239px; right:auto; bottom:42px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:100%; max-width:294px; }
	.player500 .upNext { right:0; bottom:0; left:0; font-size:1.1rem; line-height:1.6rem; display:block; }
	.player500 .upNextLink { font-size:1.1rem; line-height:1.4rem; }
	.player500 .videoTitle { right:0; left:0; font-size:1.1rem; line-height:1.6rem; }
	.player500 .videoPosition { width:293px; height:165px; top:74px; left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); right:8px; }
	.player500 .playerLogo { max-width:100px; width:100%; top:0; right:0; bottom:0; left:auto; background-position:center center; }
	.player500 .titleOverlay { left:50%; -ms-transform: translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); width:370px; top:4px; }
}