/* Theme Name: FCK Description: Template 1 FC Kaiserlautern Author: Sebastian Klammer Grafikdesign Berlin Author URI: https://sebastian-klammer.de Version 1.01 (03.11.2022) */ /* === FONTS === */ @import url('fonts/stylesheet.css'); @font-face { font-family: "Betze"; src: url("/fonts/Betze/Betze-Regular.otf") format("truetype"); font-style: normal; font-weight: normal; } /* === RESET === */ body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, ol, ul, li, dl, dt, dd, figure, table, th, td, form, fieldset, legend, input, textarea { margin: 0; padding: 0; } header, footer, nav, section, aside, article, figure, figcaption { display: block } table { border-spacing: 0; border-collapse: collapse; } caption, th, td { text-align: left; text-align: start; vertical-align: top; } abbr, acronym { font-variant: normal; border-bottom: 1px dotted #666; cursor: help; } blockquote, q { quotes: none; } fieldset, img { border: 0; } ul { list-style-type: none; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } del { text-decoration: line-through; } ins { text-decoration: none; } *, *:before, *:after { box-sizing: inherit; /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ } html { position: relative; overflow-y: scroll; height: 100%; } input, button, textarea, select { vertical-align: baseline; *vertical-align: middle; } button, input.submit { *overflow: visible; } table { font-size: inherit; } img, object, embed, video { max-width: 100%; } a img { border: none; display: block; } img { height: auto; } /* === TYPOGRAPHY === */ html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } body, button, input, select, textarea { line-height: 1.5; color: #575756; font-family: 'pt_sansregular', Arial, sans-serif; font-weight: normal; font-size: 18px; font-size: 1.8rem; } /* === GENERIC === */ .clr { clear: both; } .clrfix:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; } a { color: #E0091D; text-decoration: none; -moz-transition: all .2s ease; -o-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease; } a:hover, a.black { color: black; } a.buttonsmall, a.button { display: inline-block; background: #E0091D; color: white; font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; white-space: nowrap; } a.buttonsmall:hover, a.button:hover { background: #000; } a.buttonsmall { padding: 0.4em 2em; } a.button { padding: 0.4em 2em; text-align: center; min-width: 31.5%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #page { position: relative; -webkit-transition: margin .25s; -moz-transition: margin .25s; -o-transition: margin .25s; transition: margin .25s; } #page.newsbar-active { margin-right: 280px; margin-right: 28rem; } .float-left { display: inline; float: left; margin-right: 1.5em; } .float-right { display: inline; float: right; margin-left: 1.5em; } .float-none { float: none; } .clear { clear: both; } .clear-left { clear: left; } .clear-right { clear: right; } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .align-justify { text-align: justify; } .aligncenter { display: block; margin-right: auto; margin-left: auto; } .alignleft { float: left; margin-right: 2em; } .alignright { float: right; margin-left: 2em; } .wrapper { position: relative; height: 100%; width: 100%; } .title { color: inherit; margin: 0; } .full-height { height: 100%; } .ps-container { position: relative; height: 100%; } /* Perfect Scrollbar Container */ .inside { width: 100%; max-width: 100%; margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 50px; padding-right: 50px;} /* === FONTS === */ h1, h2, h3 { font-weight: bold; margin: 0 0 1em; line-height: 1.2; } p { margin: 0 0 2em; color: #656565; } p+p { margin-top: -1em;; } p.left { text-align: left; } p.center { text-align: center; } p.justify { text-align: justify; } p.right { text-align: right; } article ul, article ol { margin: 0 0 1.5em; zoom: 1; } article ul { list-style-type: none; } article ol { list-style-type: decimal; } article ol li { margin: 0 0 0 1.5em; padding: 0 0 0 0.5em; } article ul li { position: relative; margin: 0 0 0 0.75em; padding: 0 0 0 0.5em; } article ul li:before { content: "\2022"; color: #E0091D; position: absolute; left: -0.5em; top:-0.2em; font-size: 1.5em; } /* === NEWSBAR === */ #newsbar { position: fixed; box-sizing: border-box; height: 100%; width: 0; right: 0; top: 0; z-index: 10000; } #newsbar .news-container { position: absolute; background-color: rgb(48, 48, 48); color: #fff; height: 100%; width: 280px; width: 28rem; top: 0; left: -10px; left: -1rem; -webkit-transition: left .25s; -moz-transition: left .25s; -o-transition: left .25s; transition: left .25s; } #newsbar.newsbar-active .news-container { left: -280px; left: -28rem; } #newsbar .news-container iframe { width: 280px !important; height: 220px !important; } #newsbar .news-container iframe img { width: 100%; height: auto; } /* .news-header */ #newsbar .news-header { position: relative; background-color: rgb(160, 0, 0); height: 125px; height: 12.5rem; z-index: 1000; background-size: auto 110%; background-position: center right -30%; background-repeat: no-repeat; background-image: url(images/fck_teufelskopf_white_semi_right.png); } #newsbar .news-header .title { padding-bottom: 10px; padding-bottom: 1rem; } #newsbar .news-header .icon { position: relative; color: inherit; display: block; font-size: 16px; font-size: 1.6rem; margin:0 4px; line-height: 1.5; /* height and width = 26px = (font-size * 1.5) + (2 * (border + padding)) */ border: 1px solid #fff; padding: 3px; padding: .3rem; border-radius: 24px; border-radius: 2.4rem; } #newsbar .news-header .icon:hover { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } #newsbar .news-header .fa { display: block; line-height: inherit; height: 1.5em; /* height and width inside to prevent inconsistence between line-height and border + padding */ width: 1.5em; } /* #newsbar-trigger */ #newsbar #newsbar-trigger { position: absolute; cursor: pointer; left: 0; top: 50%; } #newsbar #newsbar-mobile-trigger { position: absolute; cursor: pointer; color: #fff; display: none; right: 100%; top: 44px; z-index: 100000; margin-right: 30px; height: 38px; width: 38px; } #newsbar #newsbar-mobile-trigger img { height: 100%; width: auto; } #newsbar #newsbar-trigger .icon { position: absolute; background-color: #fff; color: rgb(64, 64, 64); font-size: 18px; font-size: 1.8rem; /* height and width = 32px = (font-size * 1.5) + (2 * padding) */ top: -1em; left: -22px; left: -2.2rem; padding: 6px; padding: .6rem; border: none; box-shadow: 0 0 20px rgba(0,0,0,0.2); -webkit-transition: all .25s, left .25s; -moz-transition: all .25s, left .25s; -o-transition: all .25s, left .25s; transition: all .25s, left .25s; } #newsbar #newsbar-trigger:hover .icon { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); box-shadow: 0 0 15px rgba(0,0,0,0.4); } #newsbar #newsbar-trigger .icon.open, #newsbar.newsbar-active #newsbar-trigger .icon.close { opacity: 1; } #newsbar.newsbar-active #newsbar-trigger .icon.open, #newsbar #newsbar-trigger .icon.close { opacity: 0; } #newsbar.newsbar-active #newsbar-trigger .icon { left: -22px; left: -2.2rem; } /* #news-content */ #news-content { position: absolute; overflow: hidden; height: 100%; width: 100%; top: 0; left: 0; padding-top: 120px; padding-top: 12rem; z-index: 1; } .tweet { position: relative; overflow: hidden; opacity: 1; -webkit-transition: opacity .25s; -moz-transition: opacity .25s; -o-transition: opacity .25s; transition: opacity .25s; } .tweet.inactive { opacity: 0; } .tweet.even { background-color: rgb(32, 32, 32); } .tweet-content { font-size: 12px; font-size: 1.2rem; padding: 10px; padding: 2rem; } .tweet-section { padding-top: 1em; } .tweet-section:first-child { padding-top: 0; } .tweet .icon { color: #E0091D; } .tweet .timestamp { padding-left: 1em; } .tweet .tweet-user-group .user-avatar { overflow: hidden; margin-right: 1em; border-radius: 2em; } .tweet .tweet-user-group .username, .tweet .tweet-user-group:hover .username { color: #fff; } /* === HEADER === */ .headerWrapper:before { content: ""; width: 100%; display: block; height: 169px; position: relative; } #header { background-color: #E0091D; background-position: top left; background-repeat: repeat; position: absolute; left: 0; top: 0; width: 100%; } .newsbar-active #header.fixed { position: fixed; width: auto; top: -169px; right: 250px; z-index: 999; } #header.fixed { position: fixed; width: auto; top: -169px; right: 0px; z-index: 999; } #logo, #logo2, #sponsorLogo, #sponsorLogo2 { display: inline-block; margin: 1em 0; height: 80px; width: auto;} #logo { /*min-width: 296px; === Alter Wert bei "Nur zusammen..."===*/ min-width:100px; } #sponsorLogo { /*min-width: 172px;*/ margin-left: -1em; } #sponsorLogoMobile { float: left; margin: 10px 10px 10px 30px; overflow: hidden; height: 30px; padding: 0; } #sponsorLogoMobile img { height: 100%; width: auto; } #logo img, #sponsorLogo img { height: 100%; width: auto; } #logo2 img, #sponsorLogo img { height: 100%; width: auto; /*margin-left:5%;*/ } #header .widgets { float: right; margin-top: 44px; } #header .widgets .widget { float: left; display: inline-block; margin-left: 15px; position: relative; } #header .widgets .widget .widgetTitle { background-color: transparent; color: #fff; border: 1px solid #fff; display: block; padding: 5px 15px; text-align: center; border-radius: 24px; font-size: 1em; } #header .widgets .widget:hover .widgetTitle { background-color: #fff; color: #000; cursor: pointer; } #header .widgets .widget .menu { display: none; z-index: 100; position: absolute; top: 0; padding-top: 50px; width: 200px; left: -30px; overflow: hidden; } #header .widgets .widget:hover .menu { display: block; } #header .widgets .widget .menu a { background: #fff; color: #000; display: block; padding: 10px; box-sizing: border-box; } #header .widgets .widget .menu a[title="fck-website"] { background-image: url(images/icon_fck_black.png); background-size: 20px 20px; background-position: left 10px center; background-repeat: no-repeat; padding-left: 40px; box-sizing: border-box; } #header .widgets .widget .menu a[title="fck-museum"] { background-image: url(images/icon_fck_museum_black.png); background-size: 20px 20px; background-position: left 10px center; background-repeat: no-repeat; padding-left: 40px; box-sizing: border-box; } #header .widgets .widget .menu a[title="fck-kids"] { background-image: url(images/icon_fck_kids_black.png); background-size: 20px 20px; background-position: left 10px center; background-repeat: no-repeat; padding-left: 40px; box-sizing: border-box; } #header .widgets .widget .menu a[title="fck-ticketshop"] { background-image: url(images/icon_fck_ticketshop_black.png); background-size: 20px 20px; background-position: left 10px center; background-repeat: no-repeat; padding-left: 40px; box-sizing: border-box; } #header .widgets .widget .menu a[title="fck-fanshop"] { background-image: url(images/icon_fck_fanshop_black.png); background-size: 20px 20px; background-position: left 10px center; background-repeat: no-repeat; padding-left: 40px; box-sizing: border-box; } #header .widgets .widget .menu a[title="fck-gastronomie"] { background-image: url(images/icon_fck_gastronomie_black.png); background-size: 20px 20px; background-position: left 10px center; background-repeat: no-repeat; padding-left: 40px; box-sizing: border-box; } #header .widgets .widget .menu a[title="fck-tv"] { background-image: url(images/icon_fck-tv_black.png); background-size: 20px 20px; background-position: left 10px center; background-repeat: no-repeat; padding-left: 40px; box-sizing: border-box; } #header .widgets .widget .menu li:first-of-type a { border-top-left-radius: 6px; border-top-right-radius: 6px; position: relative; } #header .widgets .widget .menu li:first-of-type a:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px; } #header .widgets .widget .menu li:last-of-type a { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } #header .widgets .widget .menu a:hover { color: #E0091D; } #header .widgets a.headerIcon { display: inline-block; color: #fff; font-size: 18px; font-size: 1.8rem; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; margin-right: 1em; } #header .widgets a.headerIcon img { height: 2.0em; width: 2.0em; } #header .widgets a.headerIcon:hover { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } #header .widgets a.headerIcon.circle { background:#fff; border-radius: 100%; color: rgb(64, 64, 64); padding: 6px; padding: .6rem; box-shadow: 0 0 20px rgba(0,0,0,0.2); } #header .widgets a.headerIcon.circle:hover { box-shadow: 0 0 15px rgba(0,0,0,0.4); } #header .widgets a.headerIcon.circle img { height: 1.4em; width: 1.4em; } #mainmenu { background: #404040; height: 50px; position: relative; } #mainmenu .inside { text-align:center;position: relative; } #menu-main { margin: 0 auto; } #menu-main a { color: white; white-space: nowrap; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } #menu-main > li { display: inline; } #menu-main > li > a { text-transform: uppercase; display: inline-block; font-family: 'pt_sansregular', Arial, sans-serif; font-weight: bold; margin-right: 2em; line-height: 50px; } #menu-main li a:hover, #menu-main li.active > a, #menu-main li.active-parent > a { color: #E0091D; } /* Submenu */ #menu-main li:hover > .mega-menu { visibility: visible; opacity: 1; } #menu-main .mega-menu { visibility: hidden; opacity: 0; position: absolute; z-index: 9999; width: 100%; height: auto; min-height: 360px; box-sizing:border-box; padding:30px; -webkit-transition: opacity 0.2s linear, visibility 0.2s linear; -moz-transition: opacity 0.2s linear, visibility 0.2s linear; -o-transition: opacity 0.2s linear, visibility 0.2s linear; transition: opacity 0.2s linear, visibility 0.2s linear; top: 50px; left: 0; background-color: #313131; text-align: left; display: inline; } #menu-main .mega-menu { background-image: url(images/fck_teufelskopf_menu_dark.png); background-position: center left; background-size: auto 100%; background-repeat: no-repeat; } #menu-main ul.sub-menu { list-style: none; } #menu-main ul.sub-menu li.menuwidget { float: right; width: 75%; height: 310px; overflow: hidden; } #menu-main ul.sub-menu li.menuwidget .columns { height: 100%; width: 100%; margin-left: 0; margin-right: 0; } #menu-main ul.sub-menu li.menuwidget .clmn { position: relative; padding: 0; overflow: hidden; background-size: cover; } #menu-main ul.sub-menu li.menuwidget .clmn img { width: 100%; height: auto; min-width: 0; min-height: 0; } #menu-main ul.sub-menu li.menuwidget .clmn span.menuWidgetTitle { position: absolute; bottom: 0; height: 25%; width: 100%; box-sizing: border-box; padding: 15px; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0 ); } #menu-main ul.sub-menu li.menuwidget .clmn.col33 { width: 30.33333333333333%; margin-left: 2%; height: 310px; } #menu-main ul.sub-menu li a { display: flex; font-family: 'pt_sansregular', Arial, sans-serif; font-weight: normal; width: auto; padding:5px 0; } #mainmenu .search { position: absolute; right: 50px; width: auto; height: auto; top: 10px; } #mainmenu .search .screen-reader-text { display: none; } #mainmenu input[type='text'] { padding: 2px 10px; border: none; background: rgba(255,255,255,0.2); color: #fff; border-radius: 20px; } #mainmenu input[type='text']:focus { background: rgba(255,255,255,1.0); color: #000; } #mainmenu input[type='submit'] { border: none; font-size: 1px; display: block; float: right; background-image: url(images/icon_search_white.png); background-position: center center; background-color: transparent; background-size: 100%; background-repeat: no-repeat; margin-left: 10px; width: 30px; height: 30px; opacity: 0.6; } #mainmenu input[type='submit']:hover { opacity: 1.0; } li.highlight a{ color: #e0091d; } /* === SLIDER / BANNER === */ #slider { width: 100%; overflow: hidden; position: relative; margin: 0 0 1em; } #slider .slider-wrapper { width: 100%; height: 860px; position: relative; } #slider .slide { float: left; position: absolute; width: 100%; height: 100%; background-color: lightgrey; background-repeat: no-repeat; background-size: cover; opacity: 0; display: none; } #slider .slide:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } #slider .slide .teaser { opacity: 0; position: absolute; bottom: 30px; left: 35px; color: #fff; width: 50%; } #slider .slider-wrapper:hover .slide .teaser { opacity: 1; } #slider .slider-wrapper h2, #slider .slider-wrapper p { margin: 0; color: #fff; } #slider h2 { text-transform: uppercase; } #slider .slide h2 { font-size: 2.5em; } #slider .meta { text-transform: uppercase; color: #fff; } #slider .date { color: #fff; } #slider .slider-wrapper > .slide:first-child { opacity: 1; display: block; } #slider .slider-wrapper > .slide a { display: block; height: 100%; width: 100%; position: relative; z-index: 99; } .slider-nav { height: 100%; position: relative; } .slider-nav button { position: absolute; border: none; display: block; width: 64px; height: 64px; cursor: pointer; text-indent: -9999em; background-color: transparent; background-repeat: no-repeat; background-size: 100%; top: 50%; margin-top: -32px; z-index: 99; } .slider-nav button:focus { outline-style: none; } .slider-nav button.slider-prev { left: 0; background-image: url("https://fck.de/de/wp-content/themes/fck/images/arrow_left_red.png"); display: none; margin-left: 1em; } .slider-nav button.slider-next { right: 0; background-image: url("https://fck.de/de/wp-content/themes/fck/images/arrow_right_red.png"); margin-right: 1em; } .slider-pagination a { display: block; float: left; width: 33.333333333333333%; height: 280px; text-decoration: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px 35px; color: #000; } .slider-pagination a p { margin-bottom: 0; } .slider-pagination .meta { color: #000 !important; } .slider-pagination a.odd { background-color: #dededd; } .slider-pagination a.even { background-color: #e7e8e6; } .slider-pagination a:hover, .slider-pagination a.current { background: #E0091D; color: #fff; } .slider-pagination a:hover .time, .slider-pagination a.current .time, .slider-pagination a:hover .meta, .slider-pagination a.current .meta { color: #fff !important; } .banner { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 820px; } .banner.news { background-position: top center; } .newsbar-active .banner { height: 740px; } .banner > .inside { height: 100%; position: relative; } .banner > .inside:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0 ); } .banner h1 { font-size: 2.5em; text-transform: uppercase; } .banner h1, .banner p { margin: 0; color: white; } .banner > .inside > h1, .banner > .inside > .header { position: absolute; bottom: 50px; left: 45px; } /* === ADVERTISING SECTIONS === */ section.fullWidthAd { background: #f2f2f2; width: 100%; height: auto; overflow: hidden; box-sizing: border-box; padding: 20px; } section.fullWidthAd .adContent { width: 100%; height: auto; overflow: hidden; text-align: center; } section.fullWidthAd .adContent iframe { width: 100% !important; } section.fullWidthAd .adContent iframe a { width: 100%; } section.fullWidthAd .adContent img { max-width: 100% !important; width: auto !important; height: auto !important; } p.tiny { font-size: 10px; margin: 0; float: left; text-align: left; } section.fullWidthAd p.tiny { color: #999; } section.mobileAd { padding: 0; margin: 0; margin-bottom: -30px; } section.mobileAd .adContent img { max-width: 100% !important; width: auto !important; height: auto !important; } /* === LISTS === */ /* --- FancyList --- */ ul.fancyList { list-style-type: none; width: 100%; display: block; margin-bottom: 40px; } ul.fancyList li { display: block; width: 100%; padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.1); } ul.fancyList li:before { display: none; } ul.fancyList li a { color: #575756; } ul.fancyList li a:hover { color: #000; } /* --- LinkList --- */ ul.linkList { list-style-type: none; width: 100%; display: block; margin-bottom: 40px; } ul.linkList li { display: block; width: 100%; } ul.linkList li:before { display: none; } ul.linkList li:nth-of-type(odd) a { background-color: rgba(0,0,0,0.02); } ul.linkList li:nth-of-type(even) a { background-color: rgba(0,0,0,0.04); } ul.linkList li a { display: block; width: 100%; padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.1); color: #575756; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } ul.linkList li a:hover { color: #fff; background-color: #575756; } /* === ACCORDIONS === */ .accordion .panel .columns { margin-left: 0; margin-right: 0; } /* === COLUMNS === */ .columns { margin-left: -1%; margin-right: -1%; } .columns+.columns { margin-top: 1em; } .clmn { float: left; moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin-left: 1%; margin-right: 1%; overflow: hidden; } .clmn img { width: 100%; height: auto; max-width: 100%; } .clmn.col100 img { width: auto; height: auto; max-width: 100%; } .clmn.col25 { width: 23%; } .clmn.col33 { width: 31.33333333333333%; } .clmn.col50 { width: 48%; } .clmn.col67 { width: 64.66666666666666%; } .clmn.col75 { width: 73%; } .col100 { width: 98%; } .clmn > .columns, .clmn > .columns .clmn { margin-left: 0; margin-right: 0; } .columns.odd .clmn, .columns.even .clmn { padding: 0.3em 0.5em; margin-bottom: 1px; } .columns.odd .clmn { background: #EEEEF0; } .columns.even .clmn { background: #E3E3E5; } /* === SOCIAL ICONS === */ ul.social { width: 90%; list-style-type: none; text-align: center; } ul.social li { display: inline-block; text-align: center; width: auto; height: auto; margin: 0; padding: 0; } ul.social li:before { display: none; } ul.social li a { display: block; font-size: 0; width: 84px; height: 84px; margin: 0 40px; background-size: 100% auto; background-repeat: no-repeat; background-position: center center; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } ul.social li a:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } ul.social li a.facebook { background-image: url(images/social_facebook_red.png); } ul.social li a.twitter { background-image: url(images/social_twitter_red.png); } ul.social li a.instagram { background-image: url(images/social_instagram_red.png); } ul.social li a.youtube { background-image: url(images/social_youtube_red.png); } ul.social li a.snapchat { background-image: url(images/social_snapchat_red.png); } ul.social.#E0091D li a.facebook { background-image: url(images/social_facebook_#E0091D.png); } ul.social.#E0091D li a.twitter { background-image: url(images/social_twitter_#E0091D.png); } ul.social.#E0091D li a.instagram { background-image: url(images/social_instagram_#E0091D.png); } ul.social.#E0091D li a.youtube { background-image: url(images/social_youtube_#E0091D.png); } ul.social.#E0091D li a.snapchat { background-image: url(images/social_snapchat_#E0091D.png); } /* === MAIN === */ article, .row, article.single section { padding-top: 50px; padding-bottom: 50px; } article.single { padding-top: 0; padding-bottom: 0; } .row.backlink { padding-top: 20px; padding-bottom: 20px; } .row.backlink a { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; color: rgba(0,0,0,0.4); text-transform: uppercase; letter-spacing: 1px; } .row.backlink a:hover { color: #E0091D; } .white + .white { margin-top: -50px; } .bgimg { background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment:fixed; } .light { background: #f2f2f2; } .dark { background: #383939; color: white; } article.newsletter { background: #dfdfdf; text-align: center; } article.newsletter .columns { margin-left: 10%; } article.newsletter .columns { margin-right: 10%; } article.grey { background-color: #666666; } article.grey p.tiny { color: #fff; } .headline, section > h1 { font-size: 1.5em; text-transform: uppercase; display: inline-block; margin-left: -50px; margin-bottom: 1.5em; padding: 0.25em 1em 0.25em 45px; min-width: 34.1%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .headline:after, section > h1:after { content: "."; clear: both; display: block; visibility: hidden; height: 0px; } .white .headline, .light .headline, .white section > h1, .light section > h1 { color: white; background: #E0091D; } .dark .headline, .dark section > h1 { color: white; background: #E0091D; } .dark section, .dark section p { color: rgba(255,255,255,0.8); } .partner .headline { color: white; background: #E0091D; } .toggler { cursor: pointer; background: #dfdfdf; padding: 0.6em 1em; } .toggler:before { content: "+"; margin-right: 0.5em; } .toggler.active:before { content: "\2013"; } h3.toggler { margin: 0 0 1em; } h3.toggler.active { margin: 0 0 2em; } .gallery p { margin: 0; } #main a.customlink { display: block; overflow: hidden; position: relative; margin: 0 0 2em; color: white; background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-transition: .7s all ease-out; -moz-transition: .7s all ease-out; -o-transition: .7s all ease-out; transition: .7s all ease-out; } #main a.customlink:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } #main a.customlink h3 { text-transform: uppercase; position: absolute; bottom: 0; left: 30px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink { height: 580px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink { height: 425px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink { height: 380px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink { height: 340px; } .imgblock { display: block; height: 250px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .pagenav .prev-posts { float: left; } .pagenav .next-posts { float: right; } /* === CUSTOM WIDGETS === */ .spiel { text-align: center; min-height: 315px; } .spiel .label { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; padding: 1em; text-transform: uppercase; font-size: 20px; font-size: 2.0rem; } .spiel p { margin: 0 0 1em; } .spiel.white { background: white; } .spiel.dark p { color: white; } .spiel p.label { text-align: left; margin: 0 0 1em; } .spiel .scoreline { margin: 0 0 1.5em; padding: 0 1em; } .spiel .scoreline > div { float: left; width: 33.3333333333%; } .spiel .score { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; font-size: 2.4em; } .spiel .logo img { max-width: 100px; width: auto; height: auto; } .spiel p.teams { margin: 0; font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; padding: 1em; background-color: rgba(0,0,0,0.5); color: #fff; } .spiel.dark p.teams { background-color: rgba(0,0,0,0.5); color: #fff; } .spiel.white p.teams { background-color: rgba(0,0,0,0.8); color: #fff; } .spiel p.date { margin: 0; font-family: 'pt_sansregular', Arial, sans-serif; font-weight: normal; padding: 1em; background-color: rgba(0,0,0,0.5); color: #fff; } .spiel.dark p.date { background-color: rgba(0,0,0,0.5); color: #fff; } .spiel.white p.date { background-color: rgba(0,0,0,0.8); color: #fff; } .spiel .button { width: 100%; } .termine.short { padding: 1em; background: white; } .termine.short .label { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; text-transform: uppercase; font-size: 20px; font-size: 2.0ren; } .termine.short p { margin: 0; padding: 0 0.5em; } .termine p.label { margin: 0 0 1em; } .termine p.last { margin: 1em 0 0; } .termine.short p.odd { background-color: #f0f0ef; } .termine .trow { display: table; width: 100%; } .termine .trow.head { background: #E0091D; color: white; } .termine .tcell { padding: 0 0.5em; box-sizing: border-box; } .termine .trow.even { background-color: #f0f0ef; } .termine .tcell { display: table-cell; } .termine .tcell.date, .termine .tcell.time, .termine .tcell.cat { width: 20%; } .termine .tcell.desc { width: 400%; } /* === PAGES === */ /* --- SPIELER - ÜBERSICHT --- */ .light .clmn.spieler { background-color: #fff; } .white .clmn.spieler { background-color: #f2f2f2; } .clmn.spieler { overflow: hidden; text-align: center; margin-bottom: 2em; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } .clmn.spieler:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); box-shadow: 2px 10px 20px rgba(0,0,0,0.4); } .clmn.spieler .imgblock { height: 490px; } .newsbar-active .clmn.spieler .imgblock { height: 560px; } .clmn.spieler .spielerContent { width: 100%; text-align: left; box-sizing: border-box; padding: 1em; height: auto; overflow: hidden; } .clmn.spieler .spielerContent .spielerNummer { float: left; font-family: 'pt_sansregular', Arial, sans-serif; font-weight: normal; width: 25%; color: #E0091D; font-size: 3em; line-height: 1em; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .clmn.spieler .spielerContent .spielerName { float: left; width: 70%; padding-left: 10px; box-sizing: border-box; line-height:1.2em; color: #000; font-family: 'pt_sansregular', Arial, sans-serif; font-weight: bold; height: 50px; } /* --- SPIELER - DETAILSEITE --- */ h1.playerTitle { font-size: 2.0em; line-height: 1.0em; margin-top: -20px; } h1 span.playerNumber { display: inline-block; background-color: #E0091D; color: #fff; border-radius: 100%; padding: 20px; width: 2.3em; height: 2.3em; text-align: center; line-height: 1.3em; margin-left: 10px; } .columns+h2.headline { margin-top: 2em; } .playerShortInfo .columns.odd .clmn { background: #e7e7e7; } .playerShortInfo .columns.even .clmn { background: #f2f2f2; } .playerShortInfo .columns+.columns { margin-top: 0; } .playerShortInfo .columns.odd .clmn, .playerShortInfo .columns.even .clmn { padding: 1em 1em; margin-bottom: 0; } table.statistics { width: 100%; background-color: #fff; } table.statistics tr.odd { } table.statistics tr.even { background-color: rgba(0,0,0,0.035); } table.statistics tr td:nth-of-type(odd) { width: 70%; } table.statistics tr td:nth-of-type(even) { width: 30%; font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; text-align: right; } table.statistics td { float: left; width: 50%; box-sizing: border-box; padding: 1em; } table.matches { width: 100%; } table.matches tr.matchesTitle td { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; } table.matches td { box-sizing: border-box; padding: 1em; background-color: #fff; } table.matches td.empty { height: 10px; padding: 0; background-color: transparent; } table.matches td.alignRight { text-align: right; } table.matches .statistics-bar { width: 100%; } table.matches .statistics-bar .won { display: inline-block; float: left; background-color: #E0091D; color: #fff; padding: 10px 0; box-sizing: border-box; text-align: center; } table.matches .statistics-bar .loss { display: inline-block; float: left; background-color: #000; color: #fff; padding: 10px 0; box-sizing: border-box; text-align: center; } /* --- SPIELPLAN --- */ #spielplan-selection { position: relative; background: #f2f2f2; padding: 20px; text-align: center; margin-bottom: 3em; } #spielplan-selection:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(242, 242, 242, 0); border-top-color: #f2f2f2; border-width: 20px; margin-left: -20px; } #spielplan-selection .label, #spielplan-selection .select, #spielplan-selection .submit { display: inline-block; margin-right: 6px; } #spielplan-selection, #spielplan-selection select { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; letter-spacing: .5px; color: rgba(0,0,0,0.3); } #spielplan-selection .submit button { background-color: #E0091D; color: #fff; border: none; font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; font-size: 1em; padding: 4px 20px; } #spielplan-selection .submit button:hover { background-color: #000; cursor: pointer; } table.spielplan+h2.headline { margin-top: 2em; } table.spielplan { width: 100%; } table.spielplan thead tr { background-color: #383939; } table.spielplan thead tr th { color: #fff; } table.spielplan thead th, table.spielplan tbody td { box-sizing: border-box; padding: 10px; } table.spielplan tbody .odd { background-color: #f5f5f5; } table.spielplan tbody .even { background-color: #e5e5e5; } table.spielplan .match-day, table.spielplan .time, table.spielplan .divider, table.spielplan .results { text-align: center; } table.spielplan .date, table.spielplan .home { text-align: right; } table.spielplan .away { text-align: left; } table.spielplan img.team-logo { width: 20px; height: 20px; } table.spielplan .home img.team-logo { margin-left: 15px; } table.spielplan .away img.team-logo { margin-right: 15px; } /* --- BUNDESLIGA-TABELLE --- */ #ligatabelle-selection { position: relative; background: #f2f2f2; padding: 20px; text-align: center; margin-bottom: 3em; } #ligatabelle-selection:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(242, 242, 242, 0); border-top-color: #f2f2f2; border-width: 20px; margin-left: -20px; } #ligatabelle-selection .label, #ligatabelle-selection .select, #ligatabelle-selection .submit { display: inline-block; margin-right: 6px; } #ligatabelle-selection, #ligatabelle-selection select { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; letter-spacing: .5px; color: rgba(0,0,0,0.3); } #ligatabelle-selection .submit button { background-color: #E0091D; color: #fff; border: none; font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; font-size: 1em; padding: 4px 20px; } #ligatabelle-selection .submit button:hover { background-color: #000; cursor: pointer; } table.ligaTabelle { width: 100%; } table.ligaTabelle caption { padding: 10px; box-sizing: border-box; color: #999; } table.ligaTabelle thead tr { background-color: #383939; } table.ligaTabelle thead tr th { color: #fff; } table.ligaTabelle thead th, table.ligaTabelle tbody td { box-sizing: border-box; padding: 10px; } table.ligaTabelle tbody .odd { background-color: #f5f5f5; } table.ligaTabelle tbody .even { background-color: #e5e5e5; } table.ligaTabelle .place, table.ligaTabelle .played, table.ligaTabelle .won, table.ligaTabelle .drawn, table.ligaTabelle .lost, table.ligaTabelle .goals, table.ligaTabelle .diff, table.ligaTabelle .points { text-align: center; } table.ligaTabelle .team { text-align: left; } table.ligaTabelle .team img.team-logo { margin-right: 15px; } /* --- WIDGET --- */ #widgets-selection { position: relative; background: #f2f2f2; padding: 20px; text-align: center; margin-bottom: 3em; } #widgets-selection:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(242, 242, 242, 0); border-top-color: #f2f2f2; border-width: 20px; margin-left: -20px; } #widgets-selection .label, #widgets-selection .select, #widgets-selection .submit { display: inline-block; margin-right: 6px; } #widgets-selection, #widgets-selection select { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; letter-spacing: .5px; color: rgba(0,0,0,0.3); } #widgets-selection .submit button, #widgets-selection #widget-type button { background-color: #E0091D; color: #fff; border: none; font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; font-size: 1em; padding: 4px 20px; } #widgets-selection .submit button:hover, #widgets-selection #widget-type button:hover, #widgets-selection #widget-type button.active { background-color: #000; cursor: pointer; } #widgets-selection #widget-type { padding-top: 6px; } /* --- NEWS OVERVIEW PAGE --- */ /* FILTER BAR */ .filterBar.inside { padding-bottom: 20px; padding-top: 20px; text-align: center; } .filterBar.light { color: rgba(0,0,0,0.3); } .filterBar.inside { font-family: 'pt_sansbold', Arial, sans-serif; font-weight: bold; letter-spacing: .5px; } .filterBar select { font-weight: normal; } /* ARTICLE GRID */ a.post { height: auto;overflow: hidden; background: green; } .news .postContent { color: #656565; } .news .postContent h2 { margin-bottom: 1em; color: #000; } .news a:hover .postContent h2 { color: #E0091D; } .teaserimg { display: block; height: 326px; overflow: hidden; margin-bottom: 1.3em; } .newsbar-active .teaserimg { height: 276px; } .teaserimg .imgHolder { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } .teaserimg .imgHolder { -webkit-transition: .7s all ease-out; -moz-transition: .7s all ease-out; -o-transition: .7s all ease-out; transition: .7s all ease-out; } a:hover .teaserimg .imgHolder { -moz-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .teaserimg img.attachment-thumbnail { -webkit-transition: .7s all ease-out; -moz-transition: .7s all ease-out; -o-transition: .7s all ease-out; transition: .7s all ease-out; } a:hover img.attachment-thumbnail { -moz-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .news .columns .clmn { margin-bottom: 3em; } .news .col100 .postContent h2 { font-size: 2.5em; } .news .col100 .postContent h2+.postMeta { margin-top: -3em; } .news .col100 .teaserimg { float: left; height: 500px; width: 48%; margin-right: 2%; margin-bottom: 0; } .newsbar-active .news .col100 .teaserimg { height: 425px; } .news .postCategory, .news .postCategory a, .news .postMeta { font-size: 1.4rem; color: rgba(0,0,0,0.4); } .postMeta { margin-bottom: 1em; } h2+.postMeta { margin-top: -1.5em; } /* --- SEARCH PAGE --- */ .searchresult h3, .searchresult .postMeta { margin: 0; } .searchresult a { color: #000; } /* === FOOTER === */ #footer { background-color: #E0091D;background-position: top left; background-repeat: repeat; box-sizing: border-box; padding: 60px 0; } #footer h3 { color: white; font-size: 2.2rem; text-transform: uppercase; letter-spacing: 1px; } #footer ul li a, #footer ul li a:visited { color: #000; display: block; padding: 4px 0; width: 100%; } #footer ul li a:hover { color: #000; text-decoration: underline; } /* --- jQuery Logo Slider Ticker --- */ .mainPartner { display: block; margin-bottom: 3em; } .mainPartner li { text-align: center; width: 100%; } .mainPartner li a img { margin: 0 auto; width: 360px; height: auto; } .partnerslider { list-style: none; padding: 0; } .partnerslider:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; } .partnerslider li { float: left; } .partnerslider li img { width: 215px; height: auto; margin: 0; display: inline-block; } /* === BOTTOM === */ #bottom { background: #ac0404; color: white; overflow: hidden; padding-top: 1.5em; padding-bottom: 1.5em; } #bottom .textwidget { line-height: 50px; } #bottom .textwidget a, #bottom .textwidget a:visited { color: #fff; } #bottom .textwidget a:hover { color: #fff; text-decoration: underline; } #bottom .textwidget img { height: 50px; width: auto; float: left; } #bottom .left img { margin-right: 20px; } #bottom .right .textwidget { text-align: right; } #bottom .right img { float: right; } .hideMobile { display: block; } .showMobile { display: none; } /* === RESPONSIVENESS IMAGE CONTENT === */ @media screen and (max-width:2000px) { #slider .slider-wrapper { height: 770px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 530px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink, .teaserimg { height: 360px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 300px; } #menu-main .mega-menu { min-height: 300px; } #menu-main ul.sub-menu li.menuwidget .clmn.col33 { height: 240px; } .banner { height: 740px; } .newsbar-active .banner { height: 660px; } section.fullWidthAd .adContent iframe { height: 200px; } } @media screen and (max-width:1900px) { #slider .slider-wrapper { height: 720px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 500px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 425px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink, .teaserimg { height: 326px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 276px; } #menu-main ul.sub-menu li.menuwidget .clmn.col33 { height: 200px; } .banner { height: 696px; } .newsbar-active .banner { height: 600px; } .clmn.spieler .imgblock { height: 490px; } .newsbar-active .clmn.spieler .imgblock { height: 560px; } } @media screen and (max-width:1800px) { #slider .slider-wrapper { height: 670px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 469px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 390px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink, .teaserimg { height: 306px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 254px; } #menu-main ul.sub-menu li.menuwidget .clmn.col33 { height: 180px; } .banner { height: 659px; } .newsbar-active .banner { height: 555px; } .clmn.spieler .imgblock { height: 544px; } .newsbar-active .clmn.spieler .imgblock { height: 454px; } } @media screen and (max-width:1700px) { #slider .slider-wrapper { height: 620px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 442px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 366px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink, .teaserimg { height: 288px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 238px; } #menu-main ul.sub-menu li.menuwidget .clmn.col33 { height: 167px; } #menu-main ul.sub-menu li.menuwidget .clmn span.menuWidgetTitle { height: 30%; } .banner { height: 623px; } .newsbar-active .banner { height: 520px; } .clmn.spieler .imgblock { height: 510px; } .newsbar-active .clmn.spieler .imgblock { height: 420px; } section.fullWidthAd .adContent iframe { height: 160px; } } @media screen and (max-width:1600px) { #slider .slider-wrapper { height: 570px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 414px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 338px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink, .teaserimg { height: 270px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 220px; } #menu-main ul.sub-menu li.menuwidget .clmn.col33 { height: 155px; } #menu-main ul.sub-menu li.menuwidget .clmn span.menuWidgetTitle { height: 30%; } .banner { height: 586px; } .newsbar-active .banner { height: 484px; } .clmn.spieler .imgblock { height: 484px; } .newsbar-active .clmn.spieler .imgblock { height: 394px; } } @media screen and (max-width:1500px) { #slider .slider-wrapper { height: 520px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 392px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 315px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink,.teaserimg { height: 256px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 206px; } #menu-main ul.sub-menu li.menuwidget .clmn.col33 { height: 140px; } #menu-main ul.sub-menu li.menuwidget .clmn span.menuWidgetTitle { height: 30%; } .banner { height: 550px; } .newsbar-active .banner { height: 447px; } .clmn.spieler .imgblock { height: 452px; } .newsbar-active .clmn.spieler .imgblock { height: 365px; } } @media screen and (max-width:1400px) { #slider .slider-wrapper { height: 470px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 362px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 287px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink,.teaserimg { height: 238px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 188px; } .banner { height: 512px; } .banner { background-position: top center;} .newsbar-active .banner { height: 410px; } .clmn.spieler .imgblock { height: 422px; } .newsbar-active .clmn.spieler .imgblock { height: 330px; } section.fullWidthAd .adContent iframe { height: 130px; } } @media screen and (max-width:1300px) { #slider .slider-wrapper { height: 420px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 338px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 260px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink,.teaserimg { height: 220px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 170px; } .banner { height: 476px; } .newsbar-active .banner { height: 374px; } .clmn.spieler .imgblock { height: 394px; } .newsbar-active .clmn.spieler .imgblock { height: 300px; } } @media screen and (max-width:1200px) { #slider .slider-wrapper { height: 380px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 315px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 238px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink,.teaserimg { height: 204px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 154px; } .banner { height: 440px; } .newsbar-active .banner { height: 337px; } .clmn.spieler .imgblock { height: 368px; } .newsbar-active .clmn.spieler .imgblock { height: 275px; } section.fullWidthAd .adContent iframe { height: 100px; } } @media screen and (max-width:1100px) { #slider .slider-wrapper { height: 350px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 287px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 210px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink,.teaserimg { height: 188px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 137px; } .banner { height: 440px; } .newsbar-active .banner { height: 337px; } .clmn.spieler .imgblock { height: 330px; } .newsbar-active .clmn.spieler .imgblock { height: 245px; } } @media screen and (max-width:1000px) { #slider .slider-wrapper { height: 300px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 260px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 182px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink,.teaserimg { height: 170px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 120px; } .clmn.spieler .imgblock { height: 300px; } .newsbar-active .clmn.spieler .imgblock { height: 211px; } .banner > .inside > h1, .banner > h1, .banner > .inside > .header{ bottom: 30px; left: 0; background: #e0091d; right: 0; } .banner h1, .banner p{ margin: 0; color: white; margin: 3%; font-size: 1.0em; } .date{ font-size: 0.8em; } } @media screen and (max-width:900px) { #slider .slider-wrapper { height: 250px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 232px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 155px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink,.teaserimg { height: 152px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 102px; } .clmn.spieler .imgblock { height: 268px; } .newsbar-active .clmn.spieler .imgblock { height: 180px; } } @media screen and (max-width:800px) { #slider .slider-wrapper { height: 200px; font-size: 0.6em; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg { height: 204px; } .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 128px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink,.teaserimg { height: 130px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 84px; } .clmn.spieler .imgblock { height: 220px; } .newsbar-active .clmn.spieler .imgblock { height: 148px; } } @media screen and (max-width:700px) { #slider .slider-wrapper { height: 280px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg, .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 360px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink, .teaserimg, .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 360px; } .clmn.spieler .imgblock { height: 269px; } .newsbar-active .clmn.spieler .imgblock { height: 269px; } } @media screen and (max-width:600px) { #slider .slider-wrapper { height: 250px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg, .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 306px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink, .teaserimg, .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 306px; } .clmn.spieler .imgblock { height: 354px; } .newsbar-active .clmn.spieler .imgblock { height: 354px; } } @media screen and (max-width:500px) { #slider .slider-wrapper { height: 200px; } .home #main .col50 a.customlink, .page #main .col50 a.customlink, .news .col100 .teaserimg, .home .newsbar-active #main .col50 a.customlink, .page .newsbar-active #main .col50 a.customlink, .newsbar-active .news .col100 .teaserimg { height: 250px; } .home #main .col33 a.customlink, .page #main .col33 a.customlink, .teaserimg, .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 250px; } .clmn.spieler .imgblock { height: 288px; } .newsbar-active .clmn.spieler .imgblock { height: 288px; } } /* === RESPONSIVENESS === */ @media screen and (max-width:2000px) { .slider-pagination a { height: 250px; } } @media screen and (max-width:1600px) { body, button, input, select, textarea { font-size: 16px; font-size: 1.6rem; } .slider-pagination a { height: 220px; } article, .row { padding-top: 40px; padding-bottom: 40px; } .inside { padding-left: 40px; padding-right: 40px; } #mainmenu .search { display:none;right: 40px;} .headline, section > h1 { margin-left: -40px; padding-left: 35px; } .banner > .inside > h1, .banner > h1, .banner > .inside > .header { bottom: 40px; left: 35px; } #newsbar .news-header { height: 120px !important; height: 12rem !important; } #menu-main ul.sub-menu li.menuwidget { height: 180px; } #menu-main .mega-menu { min-height: 200px; } table.spielplan thead th, table.spielplan tbody td, table.ligaTabelle thead th, table.ligaTabelle tbody td { padding: 8px; } ul.social li a { width: 64px; height: 64px; margin: 0 40px; } } @media screen and (max-width:1280px) { #logo, #sponsorLogo { height: 50px; margin: .5em 0; } #header #logo { min-width: 0; } #header #sponsorLogo { min-width: 0; } .headerWrapper:before { height: 122px; } #mainmenu input[type='text'] { width: 100px; } #header .widgets { position: absolute; right: 60px; margin-top: 0; top: 20px; height: 30px; } #header .widgets a.headerIcon { height: 30px; width: 30px; } #header .widgets a.headerIcon img { height: 100%; width: auto; } article, .row { padding-top: 30px; padding-bottom: 30px; } .inside { padding-left: 30px; padding-right: 30px; } .headline, section > h1 { margin-left: -30px; padding-left: 25px; } .banner > .inside > h1, .banner > h1, .banner > .inside > .header { bottom: 30px; left: 25px; } .clmn.spieler .spielerContent .spielerNummer { font-size: 2.2em; } table.spielplan thead th, table.spielplan tbody td, table.ligaTabelle thead th, table.ligaTabelle tbody td { padding: 5px; } .spiel .score { font-size: 1.5em; } ul.social li a { width: 64px; height: 64px; margin: 0 30px; } } @media screen and (max-width:1023px) { /* falls max-width-Wert fuers Mobile Menu geaendert wird, bitte auch in der global.js unter $(window).resize anpassen */ #page, #page.newsbar-active { padding-right: 0; margin-right: 0; } #header { position: fixed; z-index: 100; } #newsbar { left: 100%; width: 100%; } #newsbar .news-container, #newsbar.newsbar-active .news-container { left: 0; width: 100%; } #newsbar.newsbar-mobile-active .news-container { left: -100%; } #newsbar #newsbar-trigger { display: none; } #newsbar #newsbar-mobile-trigger { display: block; top: 20px; background-image: url("images/icon_news_white.png"); background-repeat: no-repeat; background-size: 100% auto; height: 30px; width: 30px; } #mainmenu { height: auto; } #header .widgets .widget .widgetTitle, .menu-menu-subsites-container, .widget ul.menu { display: none; } #menutoggler { display: block; width: 100%; height: 50px; background: url("images/mob_menu.png") no-repeat right center; cursor: pointer; } #mainmenu .inside { padding-left: 0; padding-right: 0; } #mainmenu .search { right: 80px; left:auto; } #menu-main { display: none; z-index: 9999; background: #404040; position: relative; border-top: 1px solid #666; overflow-y: auto; } #menu-main > li { border-top: 1px solid #666; display: block; } #menu-main > li:first-child { border-top: 0; } #menu-main li a { display: block; padding: 0 20px; } #menu-main .mega-menu { position: relative; display: none; top: 0; border-top: 1px solid #666; padding: 0; min-height: 0; } #menu-main li:hover > .mega-menu { display: block; } #menu-main ul.sub-menu li:first-child { padding-top: 10px; } #menu-main ul.sub-menu li:last-child { padding-bottom: 10px; } #menu-main ul.sub-menu li a { padding: 8px 20px; font-size:1.1em; } #menu-main ul.sub-menu li.menuwidget { display: none; float: none; width: 100%; height: auto; padding-top: 0; padding-bottom: 0; } #menu-main ul.sub-menu li.menuwidget .clmn.col33 { width: 100%; margin-left: 0; height: auto; border-bottom: 1px solid #666; } #menu-main ul.sub-menu li.menuwidget a { padding: 0; } #menu-main ul.sub-menu li.menuwidget .clmn span.menuWidgetTitle { position: relative; display: inline-block; padding: 20px; box-sizing:border-box; } h1.playerTitle { font-size: 1.5em; } h1 span.playerNumber { padding: 15px; width: 2.3em; height: 2.3em; line-height: 1.3em; } table.spielplan, table.ligaTabelle { font-size: .9em; } ul.social li a { width: 54px; height: 54px; margin: 0 20px; } } @media screen and (max-width:1023px) and (min-width:761px) { .slider-pagination a { font-size: 0.8em; } } @media screen and (max-width:760px) { .hideMobile { display: none !important; } .showMobile { display: block !important; } .columns { margin-left: 0; margin-right: 0; } .clmn { float: none; margin-left: 0; margin-right: 0; } .clmn.col25, .clmn.col33, .clmn.col50, .clmn.col67, .clmn.col75 { width: 100%; } .clmn.col25.spieler { width: 31%; float: left; margin-right: 2%; } .playerShortInfo .columns .clmn.col50 { width: 50%; float:left; } article.news .col100.imgLeft .teaserimg { height: 165px; width: 100%; margin-right: 0%; margin-bottom: 1em; } article.news .col100 .postContent h2 { font-size: 1.5em; } #slider { margin: 0 0 2em; } #slider .slide .teaser { bottom: 30px; left: 0; width: 100%; padding: 0 20px; box-sizing: border-box; } .slider-nav { height: 32px; margin-top: -16px; } .slider-nav button { width: 32px; height: 32px; } .slider-pagination a { font-size: 0.7em; float: none; width: 100%; height: auto; padding: 20px; } .button+.button { margin-top: 20px; } .home .newsbar-active #main .col33 a.customlink, .page .newsbar-active #main .col33 a.customlink, .newsbar-active .teaserimg { height: 210px; } #footer { padding: 40px 0; } #footer .col25 { text-align: center; margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid rgba(255,255,255,0.5); } #footer .col25:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } #bottom .footerLogo { float: left; width: 100%; text-align: center; } #bottom .footerMenu { float: left; text-align: center; width: 100%; margin: 20px 0; } #bottom .textwidget img { margin: 0 auto; float: none; } } @media screen and (max-width:640px) { .clmn.col25.spieler { width: 48%; margin-right: 2%; } ul.social { width: 100%; } ul.social li a { width: 36px; height: 36px; margin: 0 10px; } #header .widgets .widget { margin-left: 0px; } } @media screen and (max-width:320px) { #logo, #sponsorLogo { height: 40px; margin: .4em 0; } #header .widgets, #newsbar #newsbar-mobile-trigger { top: 15px; } #header .widgets .widget { margin-left: -5px; } #header .widgets a.headerIcon { margin-right: .5em; } #header .widgets a.headerIcon, #newsbar #newsbar-mobile-trigger { height: 25px; width: 25px; } }