*{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout:none; -webkit-text-size-adjust: none; padding: 0; margin: 0; border: none; outline: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @-ms-viewport { width: device-width; } ::-webkit-input-placeholder { color: #757575; } ::-moz-placeholder { color: #757575; } :-ms-input-placeholder { color: #757575; } input:-moz-placeholder { color: #757575; } ::-webkit-scrollbar { background: transparent; overflow: visible; width: 12px; height: 12px; } body::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background-color: #323232; } ::-webkit-scrollbar-track:vertical { border-radius: 10px; } body::-webkit-scrollbar-track { border-radius: 0px !important; } ::-webkit-scrollbar-thumb { background-color: rgba(50, 50, 50, 0.2); border: solid #323232; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(50, 50, 50, 0.8); } ::-webkit-scrollbar-thumb:horizontal { border-width: 3px; min-width: 40px; } ::-webkit-scrollbar-thumb:vertical { border-width: 3px; min-height: 40px; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #ADADAD; -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); } ::-webkit-scrollbar-thumb:hover { background-color: #999; } ::-webkit-scrollbar-thumb:window-inactive { background: #999; } html,body{ width: 100%; height: 100%; background: #181818; color: #fff; font-family: 'Open Sans', Arial, Verdana, sans-serif; font-size: 16px; line-height: 18px; } p{ margin: 1em 0; } a{ color: #fff; } hr{ border-top: 1px solid #eee; } .btn{ text-align: center; padding: 4px 9px; border: 1px solid #fff; display: inline-block; text-decoration: none; text-transform: uppercase; cursor: pointer; } .btn:hover{ background-color: rgba(255,255,255,0.2) !important; } #headline{ display: none; } #logo{ width: 116px; height: 30px; margin: 19px 0px 0px 72px; cursor: pointer; } #wrapper{ width: 100%; max-width: 100%; margin: auto; } #slider_area, #lists{ background: #181818; } #highlight_top_teaser{ position: relative; width: 98%; margin: 10px 1%; border: 1px solid #ddd; float: left; display: none; } @media( min-width: 1024px ){ #highlight_top_teaser{ width: 99%; margin: 10px 0px; } } #highlight_top_teaser li{ cursor: pointer; } #highlight_top_teaser .image{ float: left; height: 100px; margin-right: 1.5%; } #highlight_top_teaser .meta{ padding-right: 150px; vertical-align: middle; height: 96px; display: table-cell; } #highlight_top_teaser .datetime{ } #highlight_top_teaser .title{ font-size: 26px; line-height: 30px; margin: 5px 0 -5px 0; text-transform: uppercase; } #highlight_top_teaser .btn{ position: absolute; top: 36px; right: 25px; } #highlight_top_teaser .flex-control-nav{ bottom: 5px; right: 13px; width: 145px; } #highlight_top_teaser .flex-control-nav li{ margin: 0 3px; padding: 0px; } #highlight_top_teaser .flex-control-paging li a{ width: 17px; } @media( max-width: 640px ){ #highlight_top_teaser .meta{ padding-right: 0px; } #highlight_top_teaser .btn{ top: 8px; right: 9px; padding: 3px 7px 2px 7px; font-size: 14px; } #highlight_top_teaser .title{ font-size: 23px; line-height: 27px; } } #videoplayer_box{ width: 100%; position: relative; overflow: hidden; } body.desktop #videoplayer_box.fixed{ position: fixed; bottom: 12px; right: 16px; top: auto; left: auto; width: 32vw; border: 1px solid #ddd; overflow: visible; z-index: 100; -moz-transition: all .5s cubic-bezier(0.4,0.0,1,1); -webkit-transition: all .5s cubic-bezier(0.4,0.0,1,1); -ms-transition: all .5s cubic-bezier(0.4,0.0,1,1); transition: all .5s cubic-bezier(0.4,0.0,1,1); } #videoplayer_cinema{ position: absolute; top: 50%; right: 5px; width: 24px; height: 24px; margin-top: -12px; padding: 1px 0 0 0; background-image: url('../img/arrow_mini_right.png'); background-repeat: no-repeat; background-position: center center; background-size: 8px 16px; background-color: rgba(24,24,24,0.85); border-color: #ddd; color: #ddd; cursor: pointer; z-index: 1; display: none; opacity: 0; -moz-transition: opacity .35s linear; -webkit-transition: opacity .35s linear; -ms-transition: opacity .35s linear; transition: opacity .35s linear; } body.cinema #videoplayer_cinema{ background-image: url('../img/arrow_mini_left.png'); } body.desktop.sportalhd #videoplayer_cinema{ display: block; } body.desktop.sportalhd #videoplayer_box:hover #videoplayer_cinema{ opacity: 1; } #videoplayer_top{ position: absolute; top: -24px; right: 22px; width: 24px; height: 24px; background-image: url('../img/arrow_mini_up.png'); background-repeat: no-repeat; background-position: center center; background-size: 16px 8px; background-color: rgba(24,24,24,0.85); border-color: #ddd; cursor: pointer; display: none; } #videoplayer_close{ position: absolute; top: -24px; right: -1px; width: 24px; height: 24px; padding: 1px 0 0 0; background-image: url('../img/close.png'); background-repeat: no-repeat; background-position: center center; background-size: 17px 16px; background-color: rgba(24,24,24,0.85); border-color: #ddd; color: #ddd; cursor: pointer; display: none; } #videoplayer_top:hover, #videoplayer_close:hover, #videoplayer_cinema:hover{ background-color: rgba(44,44,44,0.85) !important; } #highlight_floating_teaser{ position: absolute; top: -49px; left: -1px; right: -1px; height: 50px; background-color: #181818; background-color: rgba(24,24,24,0.9); color: #fff; border: 1px solid #ddd; cursor: pointer; display: none; } #highlight_floating_teaser .image{ float: left; width: 95px; height: 50px; background-repeat: no-repeat; background-size: 100%; background-size: cover; background-position: center center; margin-right: 9px; } #highlight_floating_teaser .datetime{ font-size: 9px; padding: 0px 2px; line-height: 28px; } #highlight_floating_teaser .title{ padding-right: 93px; text-transform: uppercase; margin-top: -3px; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #highlight_floating_teaser .btn{ font-size: 11px; padding: 1px 5px; position: absolute; top: 12px; right: 8px; } body.desktop #videoplayer_box.fixed #videoplayer_top, body.desktop #videoplayer_box.fixed #videoplayer_close, body.desktop #videoplayer_box.fixed #highlight_floating_teaser.active, #highlight_top_teaser.active{ display: block; } body.desktop #videoplayer_box.fixed #videoplayer_cinema{ display: none; } @media( max-width: 1024px ){ body.desktop #videoplayer_box.fixed{ width: 62vw; } #highlight_top_teaser li{ padding: 2px 10px 7px 10px; } #highlight_top_teaser .image{ display: none; } } #highlight_floating_teaser.active ~ #videoplayer_top, #highlight_floating_teaser.active ~ #videoplayer_close{ top: -72px; } #videoplayer_box:before{ content: ""; display: block; padding-top: 56.25%; } .player{ background: #181818; background-image: url('../img/sportalhd_bg.png'); background-repeat: no-repeat; background-position: center center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; min-width:100%; width:100px; *width:100%; height: 100%; } #videoinfo{ padding: 8px 5px 10px 5px; } #videoinfo .title{ font-size: 19px; line-height: 20px; font-weight: bold; margin-bottom: 4px; } .content_area.list{ display: none; position: relative; overflow: hidden; z-index: 1; padding-top: 17px; } @media( max-width: 694px ){ .content_area.list{ padding-top: 2px; } } .loader{ margin: 24% auto; display: block; padding-bottom: 40px; } .slider_title{ margin: 16px 0 9px 6px; color: #efefef; text-transform: uppercase; cursor: pointer; clear: both; } body.large .slider_title{ margin-top: 30px; } .slider_title:hover > span{ border-bottom: 4px solid #c31e36; } .slider_title img{ margin: 6px 9px -3px 0px; } .slider_title .tag{ font-family: 'Open Sans', Arial, Verdana, sans-serif; font-size: 11px; line-height: 17px; margin-left: 13px; display: inline-block; border: 1px solid #aaa; padding: 1px 5px 0 5px; vertical-align: bottom; } .slider_title .tag .icon.episodes, .meta.tags .icon.episodes { width: 14px; height: 14px; font-size: 12px; vertical-align: middle; } .slider_container{ position: relative; width: 100%; height: 180px; overflow: hidden; } body.large .slider_container{ height: 234px; } body.large .slider_container.large{ height: 280px; } .slider{ position: absolute; top: 0; width: 100%; height: 230px; overflow: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: #151515; } body.large .slider{ height: 270px; } body.large .slider_container.large .slider{ height: 310px; } .slider > div{ display: table; width: 100%; height: 178px; } body.large .slider > div{ height: 234px; } body.large .slider_container.large .slider > div{ height: 280px; } .slider > div > div{ display: table-row; } .slider .slider_cell{ display: table-cell; position: relative; width: 220px; color: #fff; text-decoration: none; overflow: hidden; cursor: pointer; border-left: 4px solid #181818; border-right: 4px solid #181818; } .slider .slider_cell:first-child{ border-left: none; } .slider .slider_cell:last-child{ border-right: none; } .slider .slider_cell.more{ vertical-align: middle; text-align: center; } .slider .slider_cell.more:hover{ text-decoration: underline; } body.large .slider .slider_cell{ width: 320px; } body.large .slider_container.large .slider .slider_cell{ width: 530px; } .slider .slider_cell.teaser{ width: 133px; } body.large .slider .slider_cell.teaser{ width: 174px; } .slider .slider_cell div.image{ position: absolute; width: 100%; height: 123px; background-repeat: no-repeat; background-position: center; background-size: 100%; background-size: cover; background-clip: border-box; -moz-transition: -moz-transform .15s cubic-bezier(0.4,0.0,1,1); -webkit-transition: -webkit-transform .15s cubic-bezier(0.4,0.0,1,1); -ms-transition: -ms-transform .15s cubic-bezier(0.4,0.0,1,1); transition: transform .15s cubic-bezier(0.4,0.0,1,1); } .slider .slider_cell.teaser div.image{ height: 178px; } body.large .slider .slider_cell div.image{ height: 176px; } body.large .slider_container.large .slider .slider_cell div.image{ height: 280px; } body.large .slider .slider_cell.teaser div.image{ height: 234px; } .slider .slider_cell:hover div.image{ -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: -moz-transform .15s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: -webkit-transform .15s cubic-bezier(0.0,0.0,0.2,1); -ms-transition: -ms-transform .15s cubic-bezier(0.0,0.0,0.2,1); transition: transform .15s cubic-bezier(0.0,0.0,0.2,1); } .slider .slider_cell div.time{ position: absolute; top: 10px; left: 10px; color: #fff; font-size: 12px; text-shadow: 0px 0px 6px rgba(0,0,0,0.95); z-index: 1; } span.tag{ font-size: 11px; color: #fff; border: 1px solid #aaa; padding: 3px 7px; line-height: 27px; text-shadow: none; text-transform: uppercase; white-space: nowrap; } body.large span.tag{ padding: 1px 5px; line-height: 23px; } span.tag:first-child{ margin-left: 0px; } span.tag.hover{ cursor: pointer; } span.tag.hover:hover{ background-color: rgba(255,255,255,0.2); } span.tag.prio{ background: #c31e36; border-color: #c31e36; } span.tag.hover.prio:hover{ background-color: #c31e36; border-color: #c31e36; } span.tag.play{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAwIDEwMDAnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J00zODMgNTEwLjE1VjMxOC41MDNsMTY1LjY5NiA5NS44MjVMNzE0LjUzIDUxMC4xNWwtMTY1Ljc2NSA5NS44MjZMMzgzIDcwMS44Jy8+PC9zdmc+"); background-position: right center; background-repeat: no-repeat; padding-right: 17px !important; } .slider .slider_cell div.title{ display: block; overflow: hidden; padding: 7px; position: absolute; bottom: 0px; left: 0px; right: 0px; background-color: #262626; min-height: 58px; line-height: 42px; } body.large .slider_container.large .slider .slider_cell.tv_program div.title{ line-height: 23px; font-size: 19px; min-height: 68px; padding-top: 9px; background-color: rgba(40,40,40,.66); } .slider .slider_cell div.title span{ display: inline-block; vertical-align: middle; line-height: normal; } .addwatchlist{ position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; background: #000; cursor: pointer; text-align: center; padding-top: 5px; padding-right: 1px; font-size: 21px; z-index: 1; display: none; } .playbutton { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; background-color: #000; cursor: pointer; } .slider .playbutton{ top: auto; bottom: 7px; right: 9px; } .current .playbutton{ background-color: #c31e36; } .playbutton:before{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAwIDEwMDAnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J00zODMgNTEwLjE1VjMxOC41MDNsMTY1LjY5NiA5NS44MjVMNzE0LjUzIDUxMC4xNWwtMTY1Ljc2NSA5NS44MjZMMzgzIDcwMS44Jy8+PC9zdmc+"); background-position: center center; background-repeat: no-repeat; content: ' '; position: absolute; left: 0; width: 100%; height: 100%; } .slider_prev, .slider_next { position: absolute; top: 50%; height: 36px; width: 36px; margin-top: -18px; background-color: #262626; background-repeat: no-repeat; background-position: center center; background-size: 30px; border-radius: 50%; cursor: pointer; z-index: 2; opacity: 0; -moz-transition: opacity .3s cubic-bezier(0.4,0.0,1,1), -moz-transform 0.5s ease-in; -webkit-transition: opacity .3s cubic-bezier(0.4,0.0,1,1), -webkit-transform 0.5s ease-in; transition: opacity .3s cubic-bezier(0.4,0.0,1,1), transform 0.5s ease-in; } .slider_prev{ background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNDggNDgnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTMwLjgzIDE0LjgzbC0yLjgzLTIuODMtMTIgMTIgMTIgMTIgMi44My0yLjgzLTkuMTctOS4xN3onIGZpbGw9JyNjY2MnLz48L3N2Zz4="); } .slider_next{ background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNDggNDgnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTIwIDEybC0yLjgzIDIuODMgOS4xNyA5LjE3LTkuMTcgOS4xNyAyLjgzIDIuODMgMTItMTJ6JyBmaWxsPScjY2NjJy8+PC9zdmc+"); } body.large .slider_prev, body.large .slider_next{ height: 48px; width: 48px; margin-top: -24px; background-size: 40px; } body.touch .slider_prev, body.touch .slider_next{ display: none; } .slider_container:hover .slider_prev, .slider_container:hover .slider_next { opacity: 1; -webkit-box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.18); box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.18); } .slider .slider_cell.current{ border-left: 4px solid #c31e36; } .slider_prev{ left: -40px; } .slider_next{ right: -40px; } body:not(.touch) .slider_prev.active{ -moz-transform: translateX(45px); -webkit-transform: translateX(45px); transform: translateX(45px); } body:not(.touch) .slider_next.active{ -moz-transform: translateX(-45px); -webkit-transform: translateX(-45px); transform: translateX(-45px); } body.large .slider_prev{ left: -70px; } body.large .slider_next{ right: -70px; } body.large .slider_prev.active{ -moz-transform: translateX(77px); -webkit-transform: translateX(77px); transform: translateX(77px); } body.large .slider_next.active{ -moz-transform: translateX(-77px); -webkit-transform: translateX(-77px); transform: translateX(-77px); } .listheader_box{ overflow: hidden; width: 100%; height: 41px; position: relative; padding-right: 50px; } .listheader{ position: relative; width: 100%; height: 41px; padding: 9px; font-size: 16px; line-height: 20px; background: #181818; color: #efefef; text-transform: uppercase; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .listheader_box .listheader{ height: 61px; } .listheader > div{ display: inline-block; cursor: pointer; border-bottom: 4px solid #181818; padding-bottom: 2px; } .listheader > div.off{ opacity: 0.5; cursor: default; } .listheader > div.active{ display: inline-block; border-bottom: 4px solid #c31e36; padding-bottom: 2px; } .listheader select.siblingselect{ margin-left: 16px; border: 3px solid #666; color: #fff; background: #666; font-size: 12px; vertical-align: super; } .listheader_box > div.listgrid_toggle{ position: absolute; right: 11px; top: 9px; padding: 0px; font-size: 12px; border: 1px solid #323232; color: #ccc; line-height: 1px; z-index: 1; } .listheader_box > div.listgrid_toggle span{ padding: 4px 6px; display: inline-block; vertical-align: middle; } .listheader_box > div.listgrid_toggle img{ margin: 0px; } .listheader_box > div.listgrid_toggle span.active{ background-color: rgba(255,255,255,0.1); display: none; } .listheader_box > div.listgrid_toggle span:hover{ background-color: rgba(255,255,255,0.2); } .closelist{ display: inline-block; } .closelist:hover span{ border-bottom: 4px solid #c31e36; } .listheader img{ display: inline-block; margin: 2px 11px -2px 1px; cursor: pointer; } .listcategory_sep{ display: inline-block; border-left: 1px solid #737373; width: 1px; height: 16px; margin: 0px 10px; cursor: default; } .listitem{ border-bottom: 1px solid #393939; padding: 19px 51px 17px 9px; cursor: pointer; background: #262626; position: relative; } .listitem:last-child{ border-bottom: none; } .listitem.expand{ background: #181818; border-bottom-color: #181818; } .listitem.current{ border-left: 4px solid #c31e36; } .listitemtitle{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 19px; } body.large .listitemtitle{ padding-left: 314px; font-size: 21px; line-height: 25px; } .listitemtitle .counter{ display: inline-block; width: 30px; padding-right: 7px; text-align: center; } .listitem.current .listitemtitle{ font-weight: bold; } .listitem .addwatchlist{ top: 13px; right: 18px; left: auto; position: absolute; } .listitem .playbutton{ top: auto; bottom: 13px; right: 18px; left: auto; position: absolute; } .listitem.expand .playbutton:hover{ background: #c31e36; } .listiteminfo{ display: none; padding-top: 10px; white-space: normal; } body.large .listiteminfo{ display: block !important; min-height: 116px; padding-top: 7px; padding-left: 344px; } .listiteminfo div.image{ width: 160px; height: 90px; float: left; margin-right: 14px; margin-bottom: 8px; text-align: center; cursor: pointer; } @media( max-width: 320px ){ .listitem{ padding-right: 9px; } .listiteminfo{ text-align: center; } .listiteminfo div.image{ float: none; margin: 0 auto 8px auto; } .listitemtitle{ white-space: normal; text-overflow: inherit; overflow:visible; line-height: 21px; padding-left: 30px; } .listitemtitle .counter{ margin-left: -30px; } } .listiteminfo div.image div{ width: 100%; height: 100%; background-size: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; } body.large .listiteminfo div.image{ position: absolute; top: 7px; left: 14px; width: 291px; height: 164px; overflow: hidden; } body.large .listitem div.image div{ -moz-transition: -moz-transform .15s cubic-bezier(0.4,0.0,1,1); -webkit-transition: -webkit-transform .15s cubic-bezier(0.4,0.0,1,1); -ms-transition: -ms-transform .15s cubic-bezier(0.4,0.0,1,1); transition: transform .15s cubic-bezier(0.4,0.0,1,1); } body.large .listitem:hover div.image div{ -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: -moz-transform .15s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: -webkit-transform .15s cubic-bezier(0.0,0.0,0.2,1); -ms-transition: -ms-transform .15s cubic-bezier(0.0,0.0,0.2,1); transition: transform .15s cubic-bezier(0.0,0.0,0.2,1); } .listiteminfo .description{ padding-left: 0; color: #e3e3e3; font-size: 14px; line-height: 19px; } body.large .listiteminfo .description{ padding-bottom: 27px; } @media( min-width: 1200px ){ .listiteminfo .description{ font-size: 16px; line-height: 22px; } } .listiteminfo .meta{ clear: both; padding-top: 10px; font-size: 12px; color: #8f8f8f; } body.large .listiteminfo .meta{ position: absolute; bottom: 21px; } .griditem{ display: inline-block; float: left; width: 48%; height: calc(28vw + 112px); margin: 1%; overflow-y: hidden; position: relative; background: #262626; cursor: pointer; } .griditem.current{ border-left: 4px solid #c31e36; } @media( min-width: 780px ){ .griditem { height: calc(8.8vw + 156px); width: 48%; margin: 1%; } } @media( min-width: 925px ){ .griditem { height: calc(9.5vw + 133px); } } @media( min-width: 1300px ){ .griditem { height: calc(5.5vw + 170px); width: 31.3%; } } @media( min-width: 1600px ){ .griditem { height: calc(6.5vw + 117px); } } @media( min-width: 780px ){ body.sportalhd .griditem { height: calc(26vw + 95px); } } @media( min-width: 925px ){ body.sportalhd .griditem { height: calc(19vw + 95px); width: 31.3%; margin: 1%; } } @media( min-width: 1024px ){ body.sportalhd .griditem { height: calc(13vw + 95px); } } @media( min-width: 1600px ){ body.sportalhd .griditem { height: calc(12vw + 95px); width: 24%; margin: 0.5%; } } body.sportalhd .shows > .griditem { height: calc(63vw + 130px); } } @media( min-width: 925px ){ body.sportalhd .shows > .griditem { height: calc(41vw + 117px); width: 31.3%; margin: 1%; } } @media( min-width: 1024px ){ body.sportalhd .shows > .griditem { height: calc(33vw + 117px); } } @media( min-width: 1240px ){ body.sportalhd .shows > .griditem { height: calc(27vw + 117px); width: 24%; margin: 0.5%; } } @media( min-width: 1600px ){ body.sportalhd .shows > .griditem { height: calc(23vw + 117px); width: 19%; margin: 0.5%; } } .griditem div.image{ width: 100%; height: 28vw; background-size: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; display: inline-block; text-align: center; cursor: pointer; } @media( min-width: 780px ){ .griditem div.image{ height: 8.8vw; } } @media( min-width: 925px ){ .griditem div.image{ height: 9.5vw; } } @media( min-width: 1300px ){ .griditem div.image{ height: 5.5vw; } } @media( min-width: 780px ){ body.sportalhd .griditem div.image{ height: 26vw; } } @media( min-width: 925px ){ body.sportalhd .griditem div.image{ height: 19vw; } } @media( min-width: 1024px ){ body.sportalhd .griditem div.image{ height: 13vw; } } @media( min-width: 1600px ){ body.sportalhd .griditem div.image{ height: 12vw; } } body.sportalhd .shows > .griditem div.image{ height: 63vw; } } @media( min-width: 925px ){ body.sportalhd .shows > .griditem div.image{ height: 41vw; } } @media( min-width: 1024px ){ body.sportalhd .shows > .griditem div.image{ height: 33vw; } } @media( min-width: 1240px ){ body.sportalhd .shows > .griditem div.image{ height: 27vw; } } @media( min-width: 1600px ){ body.sportalhd .shows > .griditem div.image{ height: 23vw; } } .griditemtitle { padding: 9px 14px 12px 14px; line-height: 21px; } .griditemtitle p{ margin: 0; } .griditem .meta{ position: absolute; bottom: 0; width: 100%; padding: 10px 38px 10px 14px; font-size: 11.6px; color: #8f8f8f; background: #262626; } .griditem .playbutton{ top: auto; right: 9px; bottom: 9px; } .griditem:hover .playbutton{ background: #c31e36; } #search { width: 80%; height: 28px; margin: 10px 0 14px 14px; font-size: 16px; padding: 0px 6px 1px 10px; -webkit-border-radius:0; border-radius:0; -webkit-appearance: none; } #menubtn { position: absolute; top: 15px; left: 11px; display: block; overflow: hidden; width: 36px; height: 40px; text-indent: -9999px; cursor: pointer; } #menubtn:focus { outline: none; } #menubtn span { display: block; position: absolute; top: 18px; left: 5px; right: 5px; height: 2px; background: white; } #menubtn span::before, #menubtn span::after { position: absolute; display: block; left: 0; width: 100%; height: 2px; background-color: #fff; content: ""; transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; transition-timing-function: cubic-bezier(0.4,0.0,1,1); } #menubtn span::before { top: -7px; transition-property: top, transform; } #menubtn span::after { bottom: -7px; transition-property: bottom, transform; } #menubtn.active span { background: none; } #menubtn.active span::before { top: 0; transform: rotate(45deg); } #menubtn.active span::after { bottom: 0; transform: rotate(-45deg); } #menubtn.active span::before, #menubtn.active span::after { transition-delay: 0s, 0.3s; } #menu{ position: fixed; top: 60px; bottom: 0px; left: 0px; width: 270px; max-height: calc(100% - 60px); padding: 2px 0px; background: #181818; overflow: hidden; -moz-transform: translateX(-270px); -webkit-transform: translateX(-270px); transform: translateX(-270px); -moz-transition: -moz-transform .6s cubic-bezier(0.4,0.0,1,1); -webkit-transition: -webkit-transform .6s cubic-bezier(0.4,0.0,1,1); transition: transform .6s cubic-bezier(0.4,0.0,1,1); z-index: 1000010; } #menu > div { position: absolute; top: 0px; bottom: 0px; left: 0px; right: -20px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #menu.active{ -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); } @media( max-width: 1024px ){ #menu.active{ box-shadow: 8px 0px 10px -9px rgba(0,0,0,0.75); } } #menu div.separator{ padding: 4px 14px; font-size: 13px; border-top: 1px solid #323232; background-color: #000; background: -moz-linear-gradient(left, rgba(8,8,8,0.65) 0%, rgba(8,8,8,0.49) 25%, rgba(8,8,8,0) 100%); background: -webkit-linear-gradient(left, rgba(8,8,8,0.65) 0%,rgba(8,8,8,0.49) 25%,rgba(8,8,8,0) 100%); background: linear-gradient(to right, rgba(8,8,8,0.65) 0%,rgba(8,8,8,0.49) 25%,rgba(8,8,8,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6080808', endColorstr='#00080808',GradientType=1 ); color: #777; } #menu div.item{ padding: 13px 12px; font-size: 16px; cursor: pointer; border-top: 1px solid #323232; color: #e0e0e0; position: relative; } #menu div.item:hover{ color: #f0f0f0; background: #080808; } #menu div.item:first-child{ border-top: none; } #menu div.item.active{ border-left: 4px solid #c31e36; } #menu div.subitems{ margin-top: 10px; background-color: #181818; display: none; position: absolute; top: 30px; right: 0px; min-width: 60%; max-width: 96%; z-index: 1; border: 1px solid #323232; box-shadow: -6px 6px 6px rgba(0,0,0,0.5); } #menu div.item:hover div.subitems{ display: block; } #menu div.subitem{ padding: 9px 12px; font-size: 14px; cursor: pointer; border-top: 1px solid #323232; color: #c0c0c0; } #menu div.subitem:hover{ color: #e0e0e0; background: #141414; } #menu div.subitem:first-child{ border-top: none; } #footer{ font-size: 12px; padding: 18px; text-align: center; clear: both; display: none; } #footer p{ margin: 1em 11%; } .banner{ display: block; margin: auto; max-width: 100%; clear: both; -moz-transition: height .6s cubic-bezier(0.4,0.0,1,1); -webkit-transition: height .6s cubic-bezier(0.4,0.0,1,1); transition: height .6s cubic-bezier(0.4,0.0,1,1); } .banner.loaded{ margin-top: 0.7vw; } .content_area.list .banner.loaded{ margin-bottom: 0.7vw; } #popup{ display: none; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background: rgba(0,0,0,0.35); box-shadow: 0px 0px 20px -5px #000; padding: 12px; z-index: 1000002; } #popup > div{ position: absolute; top: 50%; left: 50%; width: 400px; min-height: 100px; max-height: 300px; margin-top: -100px; margin-left: -200px; background: #181818; background: rgba(0,0,0,0.85); box-shadow: 0px 0px 20px -5px #000; padding: 20px; } @media( max-width: 420px ){ #popup > div{ width: 100%; left: 0; margin-left: 0; } } #popup_title{ padding: 2px 0px 7px 0px; font-size: 23px; } #popup_close{ position: absolute; top: 7px; right: 6px; background-image: url('../img/close.png'); background-repeat: no-repeat; background-position: center center; background-size: 17px 16px; width: 28px; height: 28px; } #popup_content{ padding-top: 10px; padding-bottom: 8px; width: 100%; height: 100%; font-size: 18px; line-height: 25px; } #hint_popup{ display: none; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #181818; background: rgba(0,0,0,0.75); box-shadow: 0px 0px 20px -5px #000; padding: 12px; z-index: 1; } #hint_popup_title{ padding: 2px 0px 7px 0px; font-size: 20px; } #hint_popup_close{ position: absolute; top: 7px; right: 6px; background-image: url('../img/close.png'); background-repeat: no-repeat; background-position: center center; background-size: 17px 16px; width: 28px; height: 28px; } #hint_popup_content{ padding-top: 10px; padding-bottom: 8px; width: 100%; height: 100%; } .rrssb-buttons{ margin-bottom: 12px; } body.large .rrssb-buttons{ margin-bottom: 0px; } .slick-slide { margin: 0px 4px; position: relative; } .slick-slide .image{ background-repeat: no-repeat; background-position: center center; background-size: 100%; background-size: cover; width: 100%; height: 50vh; min-height: 280px; } .slick-prev{ left: 15px; z-index: 1; } .slick-next{ right: 15px; } .slick-prev:before, .slick-next:before { color: black; } body.desktop .slick-slider .slider_prev, body.large .slick-slider .slider_prev{ left: 1%; opacity: 1; } body.desktop .slick-slider .slider_next, body.large .slick-slider .slider_next{ right: 1%; opacity: 1; } .slick-dotted.slick-slider{ margin-bottom: 0; } .slick-dots{ bottom: -3px; } .slick-dots li{ margin: 0 8px; } .slick-dots li button{ background: #323232; width: 26px; height: 6px; padding: 0px; } .slick-dots li.slick-active button{ background: #777; } @media( max-width: 800px ){ .slick-dots{ bottom: 3%; } .slick-dots li{ width: 1px; height: 1px; } .slick-dots li button{ width: 13px; } } img.alignleft{ display: block; max-width: 100%; height: auto; margin-bottom: 12px; } @media( min-width: 680px ){ img.alignleft{ max-width: 50%; float: left; margin-right: 14px; } }