html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, a, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button, input, select, textarea { margin: 0; padding: 0; border: 0; outline: none; font-size: 100%; vertical-align: baseline; background: transparent; text-align: left; } html { overflow-y: scroll; background-color: #000000; } body { background-color: #FFFFFF; font: 100% 'Open Sans', Arial, sans-serif; margin: 0px; padding: 0px; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; width: 100%; height: 100%; overflow: hidden; } #usdata { display: none; } * { transition: all 0.2s ease-in-out; } main { display: block; position: absolute; top: 0; left: 0; height: 100%; background: #43182F; } #showcase-slider { display: block; position: relative; top: 0; left: 0; overflow: auto; z-index: 99 !important; background: #43182F; } .slidePoints { position: absolute; width: 350px; text-align: right; z-index: 9999999999999999999999999; } .slidePoints a { display: inline-block; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.33); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.33); text-decoration: none; text-indent: -9999px; width: 6px; height: 6px; margin: 0 5px 0 5px; border-radius: 6px; } .slidePoints a:hover { border: 1px solid white; } .slidePoints a.active { background: white; } .slideritem { position: absolute; top: 0; left: 0; } .slideritem img { display: block; border: 0; width: 100%; height: auto; } .slideritem .overlay { position: absolute; top: 0; left: 0; } .slideritem .overlay .caption { position: absolute; bottom: 85px; left: 100px; text-shadow: 0 1px 33px rgba(0, 0, 0, 0.8); font-weight: 700; } .slideritem .overlay .caption h2 { display: block; font-size: 80px; line-height: 80px; color: #FFFFFF; text-transform: uppercase; margin: 0 0 15px 0; } .slideritem .overlay .caption div { font-size: 48px; line-height: 1.4; color: rgba(255, 255, 255, 0.8); } table { border-collapse: collapse; width: 100%; color: #FFFFFF; text-shadow: 0 1px 33px rgba(0, 0, 0, 0.9); } .table-header-rotated th.row-header { width: auto; } table thead th, table tbody th { font-weight: 400; color: #FFFFFF; } table thead th strong { font-weight: 700; } .table-header-rotated td { vertical-align: middle; text-align: center; border-collapse: collapse; } .table-header-rotated th.rotate-45 { position: relative; vertical-align: bottom; padding: 0; line-height: 0.8; text-align: right; } .table-header-rotated th.rotate-45 > div { position: relative; white-space: nowrap; text-align: right; transform: translate(-152px, 0) rotate(45deg); } .table-header-rotated th.rotate-45 span { display: block; text-align: right; white-space: nowrap; } @media only screen and (min-width: 1480px) { body { font-size: 44px; } main { width: 1920px; height: 1080px; background: #43182F url("../images/tvbg1080p.png") no-repeat 0 0; background-size: 1920px 1080px; } #showcase-slider, .slideritem { width: 1920px; height: 1080px; } .slidePoints { bottom: 25px; right: 26px; } table thead tr { height: 180px; line-height: 180px; background: url("../images/tvthrow1080p.svg") repeat-x 0 0; background-size: 330px 180px; } table tbody tr { height: 90px; line-height: 90px; background: url("../images/tvrow1080p.svg") repeat-x 0 0; background-size: 330px 90px; } table th.row-header { padding-left: 30px; } table tbody td i { font-size: 34px !important; } .table-header-rotated td { width: 88px; border-left: 2px solid rgba(255, 255, 255, 0.15); } .table-header-rotated tbody td { border-left: 2px solid rgba(255, 255, 255, 0.1); } .table-header-rotated th.rotate-45 { height: 90px; width: 88px; min-width: 88px; max-width: 88px; font-size: 22px; } .table-header-rotated th.rotate-45 > div { transform: translate(-152px, 0) rotate(45deg); top: -20px; left: -72px; height: 180px; } .table-header-rotated th.rotate-45 span { border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0 0 24px 40px; width: 210px; } #legende { position: absolute; bottom: 0; left: 0; width: 1890px; height: 90px; line-height: 90px; background: url("../images/tvrow1080p.svg") repeat-x 0 0; background-size: 330px 90px; color: rgba(255, 255, 255, 0.5); padding-left: 30px; z-index: 100 !important; } } @media only screen and (max-width: 1480px) { body { font-size: 29px; } main { width: 1280px; height: 720px; } #showcase-slider, .slideritem { width: 1280px; height: 720px; } .slidePoints { bottom: 17px; right: 15px; } table thead tr { height: 120px; line-height: 120px; background: url("../images/tvthrow720p.svg") repeat-x 0 0; background-size: 220px 120px; } table tbody tr { height: 60px; line-height: 60px; background: url("../images/tvrow720p.svg") repeat-x 0 0; background-size: 220px 60px; } table th.row-header { padding-left: 30px; } table tbody td i { font-size: 25px !important; } .table-header-rotated td { width: 59px; border-left: 1px solid rgba(255, 255, 255, 0.15); } .table-header-rotated tbody td { border-left: 1px solid rgba(255, 255, 255, 0.1); } .table-header-rotated th.rotate-45 { height: 60px; width: 59px; min-width: 59px; max-width: 59px; font-size: 16px; } .table-header-rotated th.rotate-45 > div { transform: translate(-152px, 0) rotate(45deg); top: -18px; left: 0; height: 120px; } .table-header-rotated th.rotate-45 span { border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0 0 16px 31px; width: 141px; } #legende { position: absolute; bottom: 0; left: 0; width: 1250px; height: 60px; line-height: 60px; background: url("../images/tvrow720p.svg") repeat-x 0 0; background-size: 220px 60px; color: rgba(255, 255, 255, 0.5); padding-left: 30px; z-index: 100 !important; } }