/*general*/
body { background: #111111; font-family: "Open Sans Grabien", Helvetica, sans-serif; font-size: 15px;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { color: #EE1A3B; background: #999999; }
*:disabled, .disabled { opacity: .35; cursor: default !important; }
button:disabled, a.disabled { cursor: default; }
a { color: #3C89CA; text-decoration: none; outline: none; }
a:hover { color: #EE1A3B; }
button, select, input, textarea { font-family: "Open Sans Grabien", Helvetica, sans-serif; font-size: 15px; border-radius: 4px; }
input, select, textarea { color: #000000; background-color: #EDEDED; border: 1px solid #212121; background-image: none !important; }
input, textarea { padding: 2px 4px; }
select { padding: 1px 0px; }
button {  padding: 10px 6px 11px; width: auto; min-width: 100px; text-align: center; color: #FFFFFF; background: #EE1A3B; }
button span { text-align: center; }
p, ul, ol, dl { margin-bottom: 8px; }
li { margin-bottom: 4px; }
h1, h2, h3, h4, h5, h6, .titletext { font-weight: bold; color: #EE1A3B; }
hr { border: none; height: 3px; color: #EE1A3B; background-color: #EE1A3B; margin-bottom: 12px; }

/*blocks*/
#wrapper { position: relative; width: 100%; min-width: 320px; min-height: 100%; height: auto !important; height: 100%; border: 0px;
  padding-top: 60px; box-sizing: border-box; background: url(../images/background.jpg) repeat #EDEDED; }
#headfixed { position: fixed; width: 100%; height: 60px; top: 0px; left: 0px; background: #F2F2F2; z-index: 11000; }
#headfixed a { color: #000000; text-transform: uppercase; }
#headline { margin: 0px 25px 25px; }
#liveblock { background: #FFFFFF; padding: 13px 8px 8px; margin: 0px auto 25px; }
#makingblock, #streamsblock { width: 290px; background: #FFFFFF; padding: 8px; }
#rightcolumn { float: right; }
#headbox { padding-top: 25px; margin-bottom: 25px; }
#headbox .socialbutton { font-size: 23px; margin-left: 20px; }
#footer { font-size: 14px; position: relative; margin: -134px auto 0px; width: 100%; min-width: 320px; height: 134px; text-transform: uppercase; background: #FFFFFF; }
#footer div { padding-top: 20px; text-align: center; }
#footer a { display: inline-block; margin: 0px 16px; padding-bottom: 10px; color: #000000; }
#footer a:hover { color: #EE1A3B; }
#footer .socialbutton { font-size: 20px; }
#footerspacer { height: 160px; }

/*elements*/
.mainlogo { width: calc(100% - 40px); max-width: 562px; }
.livestatustext, .makingstatustext, .makingstatustitle, .streamsstatustext, .streamsstatustitle { font-size: 15px;
  width: auto; padding: 5px 9px 6px 8px; background: black; color: #FFFFFF; }
.makingstatustext, .streamsstatustext { display: inline-block; width: 273px; }
.makingstatustitle, .streamsstatustitle { display: inline-block; margin-top: 6px; margin-bottom: 6px; font-size: 18px;
  width: -moz-calc(100% - 17px); width: -webkit-calc(100% - 17px); width: calc(100% - 17px); }
.livebox { float: left; width: 276px; min-height: 150px; margin-top: 12px; margin-right: 16px; }
.livebox:first-child { margin-left: 0px; }
.livebox a, .makingbox a { color: #000000; }
.livebox a:hover, .makingbox a:hover, .streamsbox a:hover { color: #EE1A3B; }
.livepreview { position: relative; width: 276px; text-align: center; }
.livepreview img { max-width: 276px; max-height: 154px; }
.livedescription { display: block; position: absolute; top: 106px; width: 264px; height: 44px; line-height: 22px; padding: 2px 6px;
  background: black; opacity: 0.8; color: white !important; overflow: hidden; }
.livemore { padding-top: 12px; text-align: right; }
.livemorecontainer { display: inline-block; width: 150px; height: 26px; text-align: center; font-size: 15px; line-height: 24px; background: #DDDDDD; }
.livemorebutton { display: inline-block; font-size: 15px; width: 18px; height: 21px; padding-top: 5px; padding-left: 10px;
  background: #EE1A3B; color: #FFFFFF; cursor: pointer; }
.livepopout { margin-left: 12px; }
.livepopout a i { vertical-align: middle; font-size: 22px; }
.makingbox, .streambox { margin-top: 6px; overflow: hidden; }
.makingcontainer, .streamscontainer { margin: 0px 10px; padding: 6px 10px 16px; background: white; overflow: hidden; min-width: 306px;
  width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); }
.makingtitle, .streamtitle { width: -moz-calc(100% - 33px); width: -webkit-calc(100% - 33px); width: calc(100% - 33px); }
.makingsource { color: #EE1A3B; }
.storyitems { text-align: center; }
.indexcolumn { display: inline-block; width: 306px; margin: 0px 10px; }
.indexcolumn div.storydelimeter:last-child { display: none; }
.storyitem { width: 306px; }
.storyblock { width: 290px; padding: 6px 8px 7px; background: white; cursor: pointer; }
.storyblockpreview { margin-top: 2px; margin-bottom: 6px; text-align: center; }
.storyblockpreview img { max-width: 290px; max-height: 117px; }
.storyblock a { color: #000000; }
.storyblock:hover a { color: #EE1A3B; }
.storypopout { float: right; margin-left: 6px; }
.storypopout a i { vertical-align: baseline; font-size: 16px; }
.storyblockname { font-size: 17px; }
.storyblockname a { display: inline; }
.storybold { font-weight: bold; }
.storydelimeter { margin: 4px auto; text-align: center; color: #EE1A3B; }
.storydelimeter hr { display: inline-block; width: 70px; height: 0px; margin: 12px 4px; border: 0px; border-top: 1px solid #888888; background: #888888; }
.storycontainer { float: left; margin-left: 10px; background: white; overflow: hidden; min-width: 306px;
  width: -moz-calc(100% - 339px); width: -webkit-calc(100% - 336px); width: calc(100% - 336px); }
.popoutcontainer .storycontainer { float: none; background: white; overflow: hidden; min-width: 306px; width: 100% !important; margin: 0px !important; }
.storyname { font-family: "TisaOT-Medium Grabien"; font-size: 28px; text-transform: uppercase; margin-bottom: 8px; padding: 10px 10px 0px; }
.storysubname { font-size: 15px; margin-bottom: 10px; padding: 0px 10px; }
.storydate { float: left; color: #B2B2B2; font-size: 14px; padding: 6px 10px 0px; }
.storyshare { float: right; margin-bottom: 8px; padding: 0px 10px; }
.storysocial { background: #464646; color: #FFFFFF; display: inline-block; padding: 10px 0px 4px; width: 60px; font-size: 17px; text-align: center; }
.storydescription { padding: 0px 10px; }
.storydescription table { width: 100%; }
.storydescription p:first-child:first-letter { float: left; padding-top: 9px; padding-bottom: 6px; padding-right: 8px; line-height: 18px;
  color: #EE1A3B; font-size: 42px; }
.storydescription td p { margin-bottom: 2px; }
.storydescription td p:first-child:first-letter { float: none; padding-top: 0px; padding-right: 0px; line-height: inherit; color: inherit; font-size: inherit; }
.storypreview { width: 100%; max-width: 640px; }
.storybacklink { padding: 0px 10px; }
.storycomments { margin-top: 12px; padding: 0px 10px 10px; }
.subblock { width: 246px; padding: 15px 30px 5px; color: #FFFFFF; background: #212121; }
.subblock p { margin-bottom: 4px; text-align: center; font-size: 18px; }
.subblock div, .unsubblock div { text-align: center; margin-bottom: 16px; }
.subblock input, .subblock button, .unsubblock input, .unsubblock button { font-size: 14px; width: 100%; }
.subblock input, .unsubblock input { box-sizing: border-box; padding: 8px; background-color: #FAFAFA; border-color: #DDDDDD; }
.subblock button, .unsubblock button { text-transform: uppercase; color: #FFFFFF; background: #EE1A3B; padding: 8px 0px; }

/*media queries*/
@media (max-width: 380px)
{
  #storyblock { width: 100% !important; margin-left: 0px; margin-right: 0px; }
}
@media (max-width: 520px)
{
  #headmenusocial { display: none; }
}
@media (max-width: 680px)
{
  #headmenu { height: 47px; }
  #headmenucontainer { padding: 0px 15px; }
  #headmenucontainer div span, #headmenucontainer div a { display: block; }
  #headmenu a { margin-right: 0px; }
  #headmenu .dummylink { display: none; }
  #headmenusocial { padding-top: 2px; }
  #headmenusocial span { margin-bottom: 1px; }
  #storyblock { float: none; width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px); }
  #rightcolumn { float: none; display: block; margin: 12px auto 0px; }
}
@media (max-width: 960px)
{
  .bigtable { font-size: 90%; }
  .bigtable td.breakable { word-break: break-all;}
}

/*preloader*/
.cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool::after { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(238, 26, 58, 0.1);
  border-left-color: rgb(238, 26, 58); border-radius: 974px; -o-border-radius: 974px; -ms-border-radius: 974px; -webkit-border-radius: 974px; moz-border-radius: 974px; }
.cssload-whirlpool { margin: -24px 0 0 -24px; height: 49px; width: 49px; animation: cssload-rotate 1150ms linear infinite; -o-animation: cssload-rotate 1150ms linear infinite;
  -ms-animation: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload-rotate 1150ms linear infinite; -moz-animation: cssload-rotate 1150ms linear infinite; }
.cssload-whirlpool::before { content: ""; margin: -22px 0 0 -22px; height: 43px; width: 43px; animation: cssload-rotate 1150ms linear infinite; -o-animation: cssload-rotate 1150ms linear infinite;
  -ms-animation: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload-rotate 1150ms linear infinite; -moz-animation: cssload-rotate 1150ms linear infinite; }
.cssload-whirlpool::after { content: ""; margin: -28px 0 0 -28px; height: 55px; width: 55px; animation: cssload-rotate 2300ms linear infinite; -o-animation: cssload-rotate 2300ms linear infinite;
  -ms-animation: cssload-rotate 2300ms linear infinite; -webkit-animation: cssload-rotate 2300ms linear infinite; -moz-animation: cssload-rotate 2300ms linear infinite; }
@keyframes cssload-rotate { 100% { transform: rotate(360deg); }}
@-o-keyframes cssload-rotate { 100% { -o-transform: rotate(360deg); }}
@-ms-keyframes cssload-rotate { 100% { -ms-transform: rotate(360deg); }}
@-webkit-keyframes cssload-rotate { 100% { -webkit-transform: rotate(360deg); }}
@-moz-keyframes cssload-rotate { 100% { -moz-transform: rotate(360deg); }}

/*player*/
.playerbox { width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px); max-width: 640px;
  margin: 0px 10px 16px; text-align: center; }
.embeddedplayer { position: relative; max-width: 640px; min-width: 240px; min-height: 135px; overflow: hidden; }
.playererror { top: 50%; position: absolute; left: 50%; color: #FFFFFF; background-color: #000000; border-radius: 2px; display: flex; padding: 20px;
  transform: translate(-50%, -50%); opacity: 0.7; z-index: 1; }
.playererrorback { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.playerslides { position: relative; width: 100%; height: 100%; }
.playerslides img { position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain; object-position: center; overflow: hidden; }

/*jwplayer*/
.jwplayer.jw-skin-grabien .jw-error-msg { opacity: 0.7; }
.jwplayer.jw-skin-grabien .jw-rightclick { display: none !important; }
.jwplayer.jw-skin-grabien .jw-controls-backdrop { display: none; }
.jwplayer.jw-skin-grabien .jw-icon-rewind, .jwplayer.jw-skin-grabien .jw-display-icon-rewind { display: none; }
.jwplayer.jw-skin-grabien .jw-controlbar .jw-icon-cc, .jwplayer.jw-skin-grabien .jw-controlbar .jw-icon-settings { display: none; }
.jwplayer.jw-skin-grabien .jw-slider-time .jw-rail img { display: none; }
.jwplayer.jw-skin-grabien .jw-slider-time:hover .jw-rail img { display: block; }
.jwplayer.jw-skin-grabien .jw-button-container .jw-text { font-size: 16px; font-weight: bold; }
.jwplayer.jw-skin-grabien .jw-text-elapsed { padding-left: 10px; }
.jwplayer.jw-skin-grabien .jw-tooltip-time .jw-overlay { opacity: 0.6; }
.jwplayer.jw-skin-grabien .jw-time-tip { margin-bottom: 20px; }
.jwplayer.jw-skin-grabien.fileplayer .jw-slider-time:hover .jw-rail { transform: translate(0, -3px) scale(1, 6); }
.jwplayer.jw-skin-grabien.jw-breakpoint-4 .fa-external-link { margin-top: -8px; font-size: 66px; }
.jwplayer.jw-skin-grabien.jw-breakpoint-3 .fa-external-link, .jwplayer.jw-skin-grabien.jw-breakpoint-2 .fa-external-link { margin-top: -8px; font-size: 58px; }
.jwplayer.jw-skin-grabien.jw-breakpoint-1 .fa-external-link { margin-top: -2px; font-size: 32px; }

/*paginator*/
.paginator_pagebox { margin: 12px auto 0px; font-size: 15px; text-align: center; }
.paginator_pageinput { width: 60px; border-right: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.paginator_pagebutton { width: 60px; min-width: inherit; border-top-left-radius: 0px; border-bottom-left-radius: 0px; }
.paginator_pagelabel { display: inline-block; margin: 10px 20px; }
.paginator_pagelink, .paginator_dots, .paginator_activepage, .paginator_navbutton { display: inline-block; min-width: 18px; margin: 6px 0px; padding: 4px; padding-bottom: 5px; text-align: center; }
.paginator_dots { padding: 4px 10px; cursor: default; }
.paginator_activepage { color: #FFFFFF; background: #3C89CA; border-radius: 4px; }
.paginator_navbuttonright { margin: -1px 0px 0px 10px; padding-left: 0px; padding-bottom: 0px; }
.paginator_navbuttonleft { margin: -1px 7px 0px 3px; padding-right: 0px; padding-bottom: 0px; }
.paginator_pagelink:hover, .paginator_navbutton:hover { color: #FFFFFF !important; background: #EE1A3B; border-radius: 4px; text-decoration: none !important; }

/*misc*/
.centered { margin-left: auto; margin-right: auto; text-align: center; }
.backenderror { color: red; font-weight: bold; }
.adscentered, .adscentered > div { text-align: center; }
img.im_t { display: none; }
.playercaption, .ckimage-captioned figcaption { text-align: center; font-size: 80%; padding: 4px 4px 6px; }
