/*! * SlickNav Responsive Mobile Menu v1.0.3 */ .slicknav_btn,.slicknav_nav .slicknav_item{cursor:pointer}.slicknav_menu,.slicknav_menu *{box-sizing:border-box}.slicknav_btn{display:block;float:right;height:35px;line-height:50px;padding:10px 0 9px;position:relative;vertical-align:middle;width:44px}.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_menu .slicknav_menutxt{display:block;line-height:1.188em;float:left}.slicknav_menu .slicknav_icon{margin:.188em 0 0 .438em}.slicknav_menu .slicknav_no-text{margin:0}.slicknav_menu .slicknav_icon-bar{display:block;width:1.125em;height:.125em;margin:0 auto;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear}.slicknav_menu:after,.slicknav_menu:before{content:" ";display:table}.slicknav_menu .slicknav_btn:hover .slicknav_icon-bar{background:#fff}.slicknav_menu:after{clear:both}.slicknav_nav ul{display:block}.slicknav_nav li{display:block;line-height:30px}.slicknav_nav li:not(:first-child){border-top:1px solid rgba(0,0,0,.04)}.slicknav_nav .slicknav_arrow{background:#ededed;float:right;text-align:center;width:35px;color:#666}.slicknav_nav .slicknav_item a{display:inline}.slicknav_nav .slicknav_row,.slicknav_nav a{display:block}.slicknav_nav .slicknav_parent-link a{display:inline}.slicknav_menu{font-size:16px}.slicknav_menu ul{background:#fff}.slicknav_menu .slicknav_menutxt{color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_btn{border:1px solid;border-radius:0;margin:16px 15px;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear}.slicknav_nav,.slicknav_nav ul{list-style:none;padding:0;margin:0}.slicknav_nav{clear:both;color:#fff;font-size:.875em;max-height:350px;overflow-y:scroll;width:100%}.slicknav_nav ul{overflow:hidden}.slicknav_nav .slicknav_row{padding:5px 10px;margin:2px 5px}.slicknav_nav a{padding:5px 10px;margin:0;text-decoration:none;color:#666}.slicknav_nav .slicknav_txtnode{margin-left:15px}.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a{padding:0;margin:0}.slicknav_brand{float:left;color:#fff;font-size:18px;line-height:30px;padding:7px 12px;height:44px} /*! * GoogleFont */ @font-face{font-family:Muli;font-style:normal;font-weight:400;font-display: swap;src:local('Muli Regular'),local('Muli-Regular'),url(../../assets/fonts/gfonts/Ul00HI23GehQ9qPsH_7ocQ.woff2) format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB} @font-face{font-family:Muli;font-style:normal;font-weight:400;font-display: swap;src:local('Muli Regular'),local('Muli-Regular'),url(../../assets/fonts/gfonts/jbCPU7JDvi-y7oVFF-ztAg.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Muli;font-style:normal;font-weight:400;font-display: swap;src:local('Muli Regular'),local('Muli-Regular'),url(../../assets/fonts/gfonts/z6c3Zzm51I2zB_Gi7146Bg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215} @font-face{font-family:Muli;font-style:normal;font-weight:700;font-display: swap;src:local('Muli Bold'),local('Muli-Bold'),url(../../assets/fonts/gfonts/gzctMFdSVe07b-eI-hQbL_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB} @font-face{font-family:Muli;font-style:normal;font-weight:700;font-display: swap;src:local('Muli Bold'),local('Muli-Bold'),url(../../assets/fonts/gfonts/X04JmgXDMHsn1xtyarw5Q_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Muli;font-style:normal;font-weight:700;font-display: swap;src:local('Muli Bold'),local('Muli-Bold'),url(../../assets/fonts/gfonts/WQIsflEaABH2ETkzZKPChw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215} @font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display: swap;src:local('Open Sans Light'),local('OpenSans-Light'),url(../../assets/fonts/gfonts/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F} @font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display: swap;src:local('Open Sans Light'),local('OpenSans-Light'),url(../../assets/fonts/gfonts/DXI1ORHCpsQm3Vp6mXoaTZX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display: swap;src:local('Open Sans Light'),local('OpenSans-Light'),url(../../assets/fonts/gfonts/DXI1ORHCpsQm3Vp6mXoaTRWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');unicode-range:U+1F00-1FFF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display: swap;src:local('Open Sans Light'),local('OpenSans-Light'),url(../../assets/fonts/gfonts/DXI1ORHCpsQm3Vp6mXoaTaaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');unicode-range:U+0370-03FF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display: swap;src:local('Open Sans Light'),local('OpenSans-Light'),url(../../assets/fonts/gfonts/DXI1ORHCpsQm3Vp6mXoaTf8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB} @font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display: swap;src:local('Open Sans Light'),local('OpenSans-Light'),url(../../assets/fonts/gfonts/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display: swap;src:local('Open Sans Light'),local('OpenSans-Light'),url(../../assets/fonts/gfonts/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215} @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display: swap;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(../../assets/fonts/gfonts/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F} @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display: swap;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(../../assets/fonts/gfonts/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display: swap;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(../../assets/fonts/gfonts/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');unicode-range:U+1F00-1FFF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display: swap;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(../../assets/fonts/gfonts/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');unicode-range:U+0370-03FF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display: swap;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(../../assets/fonts/gfonts/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB} @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display: swap;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(../../assets/fonts/gfonts/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display: swap;src:local('Open Sans Regular'),local('OpenSans-Regular'),url(../../assets/fonts/gfonts/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display: swap;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(../../assets/fonts/gfonts/k3k702ZOKiLJc3WVjuplzK-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display: swap;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(../../assets/fonts/gfonts/k3k702ZOKiLJc3WVjuplzJX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display: swap;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(../../assets/fonts/gfonts/k3k702ZOKiLJc3WVjuplzBWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');unicode-range:U+1F00-1FFF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display: swap;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(../../assets/fonts/gfonts/k3k702ZOKiLJc3WVjuplzKaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');unicode-range:U+0370-03FF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display: swap;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(../../assets/fonts/gfonts/k3k702ZOKiLJc3WVjuplzP8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display: swap;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(../../assets/fonts/gfonts/k3k702ZOKiLJc3WVjuplzD0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display: swap;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(../../assets/fonts/gfonts/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215} @font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display: swap;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(../../assets/fonts/gfonts/EInbV5DfGHOiMmvb1Xr-hq-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F} @font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display: swap;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(../../assets/fonts/gfonts/EInbV5DfGHOiMmvb1Xr-hpX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display: swap;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(../../assets/fonts/gfonts/EInbV5DfGHOiMmvb1Xr-hhWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');unicode-range:U+1F00-1FFF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display: swap;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(../../assets/fonts/gfonts/EInbV5DfGHOiMmvb1Xr-hqaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');unicode-range:U+0370-03FF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display: swap;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(../../assets/fonts/gfonts/EInbV5DfGHOiMmvb1Xr-hv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF9,U+20AB} @font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display: swap;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(../../assets/fonts/gfonts/EInbV5DfGHOiMmvb1Xr-hj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display: swap;src:local('Open Sans ExtraBold'),local('OpenSans-ExtraBold'),url(../../assets/fonts/gfonts/EInbV5DfGHOiMmvb1Xr-hugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215} body { font-family: 'Open Sans', sans-serif; background: #fff; font-size: 14px; font-weight: 400; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; color: #666; overflow-x: hidden; line-height: 25px; -webkit-backface-visibility: hidden; backface-visibility: hidden;} #whitescroll{ display: none; background-color: transparent; margin: 0; padding: 1px 0px 0px 0px;} @media screen and (max-width: 767px) { #whitescroll{ display: block; background-color: #fff; margin: 0; padding: 1px 0px 0px 0px; } } .modal-open .modal-backdrop{ display: block; background: #000; } .form-group .help-block { color: red; } .roof-menu ul li.active a:hover { opacity: 0.8; } .roof-menu ul li a:hover { opacity: 0.8; } .section-padding { padding: 110px 0; } .mt-10 { margin-top: 10px;} .mt-20 { margin-top: 20px;} .mt-30 { margin-top: 30px;} .mt-40 { margin-top: 40px;} .mt-50 { margin-top: 50px;} .mt-80 { margin-top: 80px;} .mb-10 { margin-bottom: 10px;} .mb-20 { margin-bottom: 20px;} .mb-30 { margin-bottom: 30px;} .mb-40 { margin-bottom: 40px;} .mb-50 { margin-bottom: 50pxs;} h1, h2, h3, h4, .h1, .h2 { font-family: 'Muli', sans-serif; font-weight: 400; } /* .h1/.h2: Angebotskacheln und Teaser sind seit 09/2026 div.h1 (nur ein h1 je Seite) */ p { font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 00; } a { color: #6fc5d3; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} a:hover { color: #3d8592; text-decoration: none;} a:focus { outline: none; text-decoration: none; } .ordinary-row { padding: 80px 0 90px; } .teaser-block:hover img { opacity: 0.8; transition: 1s;} @media (max-width: 768px) { .middle-title{ font-weight: 200 !important; font-size: 1.5em; } } .section-title + .row { padding: 40px 0 90px; } .btn, button { padding: 7px 30px; border-radius: 0px; font-weight: 400; color: #fff; font-size: 13px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; display: inline-block; } .btn:hover, button:hover { color: #fff; cursor: pointer; } .section { padding: 80px 0; } .input-group-btn button { padding: 11px 20px; } .btn-common { color: #000!important; background: #fff none repeat scroll 0 0; position: relative; border: transparent; z-index: 1; cursor: pointer;} .btn-common:before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; z-index: -1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; background: #6fc5d3 none repeat scroll 0 0; color: #fff;} .btn-common.active { background: #6fc5d3 none repeat scroll 0 0; color: #fff;} .btn-radius:before { border-radius: 5px 0px 0px 5px; } .btn-round { border-radius: 1.5em;} .btn-outline { border-width: 2px;} .btn-outline:hover { color: #fff; border: 2px solid transparent;} .btn-common:hover:before { width: 100%;} .btn-border { background: rgba(255, 255, 255, 0.18); border: 2px solid #fff; color: #fff;} .btn-border:hover { background: rgba(255, 255, 255, 0.3); border: 2px solid #ffffff; color: #fff;} .btn-lg { padding: 14px 33px; text-transform: uppercase; font-size: 16px;} .btn-xs {font-size: 11px; padding: 13px 12px;} .btn-sm { padding: 12px 15px;} .btn-md { font-size: 15px; padding: 12px 25px;} .btn-radius { border-radius: 5px;} .btn-secondary{ padding: 5px 5px; border-color: #6fc5d3; color: #6fc5d3; background-color: #fff; } .btn-secondary:hover, .btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle{ color: #fff; background-color: #6fc5d3; } .media-left{ padding-right: 10px;} .img-circle{ border-radius: 50%;} .input-group .form-control { border-radius: 30px 0 0 30px;} .form-group label { margin-bottom: 24px;} .form-group .radius-input { border-radius: 30px; height: 45px;} .form-group .flat-input { border-radius: 0;} .form-group .form-control { background: #ffffff; padding-right: 30px; color: #666; position: relative; box-shadow: none;} .form-group .help-block { font-weight: 700;} .label { font-weight: normal; margin: 0 2px;} .social-links { display: inline-block;} .social-links a { display: inline-block; margin: 0 0 0 5px;} .social-links a i { width: 32px; height: 32px; vertical-align: middle; border-radius: 100%; line-height: 32px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} .social-links a i:hover { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} .social-links a .fa-twitter:hover { color: #6fc5d3;} .social-links a .fa-facebook:hover { color: #6fc5d3;} .social-links a .fa-google-plus:hover { color: #6fc5d3;} .social-links a .fa-youtube-play:hover { color: #6fc5d3;} .social-links a .fa-linkedin:hover { color: #6fc5d3;} li.search { position: inherit; padding-right: 10px;} li.search .open-search { margin-right: 0 !important;} li.search .open-search i { font-size: 13px;} .navbar-engage .navbar-nav > li.search > a:before { display: none;} i { transition: all 0.3s ease-in-out;} i:hover { opacity: 0.8; transition: all 0.3s ease-in-out;} .full-search { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #333; padding: 15px 0; z-index: 999;} .full-search input[type="text"] { outline: medium none; display: inline-block; width: 97%; background: transparent; color: #FFF; font-size: 28px; padding: 4px 16px 8px; line-height: 39px; border-radius: 3px; height: auto; border: 1px solid #444;} .section-title { text-align: center; font-size: 38px; line-height: 40px; color: #000; font-family: 'Muli', sans-serif; padding: 10px 0;} .section-subcontent { text-align: center; padding-bottom: 30px;} .small-title { font-size: 22px; position: relative; text-align: left; padding: 0px 0px 15px 0px;} .section-title::before{ border-color: #9C3;} .small-title::before{ border-color: #9C3;} .error { padding: 20px 20px 10px 20px; background-color: #ff8585; color: #fff; border-left: 10px solid red; } .error h4 { font-size: 1.5em; font-weight: 600; } .error ul li { font-weight: 600; } .error p{ font-weight: 600; text-shadow: none !important; } .error a{ color: #fff; text-decoration: none;} .error a:hover{ text-decoration: underline;} .warning { padding: 20px 20px 10px 20px; background-color: #f5ff92; color: #4e4e4e ; border-left: 10px solid yellow; } .warning h4 { font-size: 1.2em; font-weight: 600; } .warning ul li { font-weight: 600; } .warning p{ font-weight: 400; color: #000 !important; text-shadow: none !important; } .warning a{ color: #4e4e4e ; text-decoration: none;} .warning a:hover{ text-decoration: underline;} /* ScrollToTop */ .back-to-top { display: none; position: fixed; bottom: 18px; right: 15px; } .back-to-top i { display: block; font-size: 18px; width: 36px; height: 36px; line-height: 36px;color: #fff; border-radius: 0px; text-align: center; background-color: #6fc5d3; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .page-header { padding: 0; margin: 0; position: relative; background: url(../img/backgrounds/testimonial-bg.jpg); min-height: 164px;} .page-header .page-header-inner { color: #fff; height: 100%; padding: 40px 0; position: absolute; width: 100%;} .page-header .page-header-inner:before { background: rgba(231, 76, 60, 0.2); position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; content: ""; display: block;} .page-header .page-title { color: #fff; font-size: 44px; font-weight: 600; margin-bottom: 10px !important; padding: 15px 0; text-align: left;} .page-header .breadcrumb { margin: 0; padding: 0; background: transparent; position: relative; z-index: 9;} .page-header .breadcrumb li { line-height: 25px;} .page-header .section-title:before { width: 40px;} #loader { position: fixed; background: #fff; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999999;} .square-spin { position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px;} .square-spin img { max-width: 64px;} .credit{ font-size: 0.7em; text-align: justify; } /* ========================================================================== Caousel Section Start ========================================================================== */ #carousel-area { overflow: hidden; background: #2c3e50;} #carousel-area .carousel-inner .carousel-item { opacity: 0.3; width: 100%; overflow: hidden; transition-property: opacity; transition-duration: 1s;} #carousel-area .carousel-inner .active { opacity: 1;} #carousel-area .carousel-inner .active.left, #carousel-area .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1;} #carousel-area .carousel-inner .next.left, #carousel-area .carousel-inner .prev.right { opacity: 1;} #carousel-area .carousel-control { z-index: 2;} #carousel-area .carousel-item { background-size: 100%; background-size: cover;} #carousel-area .carousel-item .carousel-caption { top: 26%; right: 10%; left: 10%; text-shadow: none; color: #fff;} #carousel-area .carousel-item .carousel-caption h2 { font-family: 'Muli', sans-serif; font-size: 70px; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; text-transform: none; text-shadow: -3px -3px 10px #000000;} #carousel-area .carousel-item .carousel-caption h3 { font-family: 'Open Sans', sans-serif; font-size: 35px; color: #fff; font-weight: 100; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; text-shadow: -3px -3px 10px #000000;} #carousel-area .carousel-item .carousel-caption .btn { margin: 30px 15px; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1.4s; animation-duration: 1.4s;} #carousel-area .active { opacity: 1;} #carousel-area .active.left, #carousel-area .active.right { left: 0; opacity: 0; z-index: 1;} #carousel-area .carousel-control { z-index: 10; width: 35px; height: 55px; top: 50%; padding: 10px 5px; box-shadow: none; background: url(../img/skin.png); margin-top: -35px; text-shadow: none;} #carousel-area .carousel-control-prev-icon { left: 5%;} #carousel-area .carousel-control-next-icon { right: 5%; background-position: -150px 0px !important;} #carousel-area .carousel-indicators { bottom: 5px;} #carousel-area .carousel-indicators li { border-radius: 0px; width: 32px; height: 5px; margin: 0 5px; background: rgba(253, 254, 255, 0.80); border: none; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out;} #carousel-area .carousel-indicators li:hover, #carousel-area .carousel-indicators li.active { opacity: 1; } #carousel-area:hover .carousel-control { display: block;} #carousel-area i { margin-right: 10px;} .big-title { font-family: 'Muli', sans-serif; font-size: 60px; color: #fff !important; text-transform: uppercase;} .medium-title { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 22px; line-height: 30px; font-weight: 300;} .mr { margin-right: 10px;} /* ========================================================================== Caousel Category Section Start ========================================================================== */ #carouselcategoriysection{ padding: 0;} #carousel-area-categories { overflow: hidden; } #carousel-area-categories .carousel-inner .carousel-item { opacity: 0.3; width: 100%; overflow: hidden; transition-property: opacity; transition-duration: 1s;} #carousel-area-categories .carousel-inner .active { opacity: 1;} #carousel-area-categories .carousel-inner .active.left, #carousel-area-categories .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1;} #carousel-area-categories .carousel-inner .next.left, #carousel-area-categories .carousel-inner .prev.right { opacity: 1;} #carousel-area-categories .carousel-control { z-index: 2;} #carousel-area-categories .carousel-item { background-size: 100%; background-size: cover;} #carousel-area-categories .carousel-item .carousel-caption { top: 26%; right: 10%; left: 10%; text-shadow: none; color: #fff;} #carousel-area-categories .carousel-item .carousel-caption h2 { font-family: 'Muli', sans-serif; font-size: 70px; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; text-transform: none; text-shadow: -3px -3px 10px #000000;} #carousel-area-categories .carousel-item .carousel-caption h3 { font-family: 'Open Sans', sans-serif; font-size: 35px; color: #fff; font-weight: 100; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; text-shadow: -3px -3px 10px #000000;} #carousel-area-categories .carousel-item .carousel-caption .btn { margin: 30px 15px; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1.4s; animation-duration: 1.4s;} #carousel-area-categories .active { opacity: 1;} #carousel-area-categories .active.left, #carousel-area-categories .active.right { left: 0; opacity: 0; z-index: 1;} #carousel-area-categories .carousel-control { z-index: 10; width: 35px; height: 55px; top: 50%; padding: 10px 5px; box-shadow: none; background: url(../img/skin.png); margin-top: -35px; text-shadow: none;} #carousel-area-categories .carousel-control-prev-icon { left: 5%;} #carousel-area-categories .carousel-control-next-icon { right: 5%; background-position: -150px 0px !important;} #carousel-area-categories .carousel-indicators { bottom: 5px;} #carousel-area-categories .carousel-indicators li { border-radius: 0px; width: 32px; height: 5px; margin: 0 5px; background: rgba(253, 254, 255, 0.80); border: none; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out;} #carousel-area-categories .carousel-indicators li:hover, #carousel-area-categories .carousel-indicators li.active { opacity: 1; } #carousel-area-categories:hover .carousel-control { display: block;} #carousel-area-categories i { margin-right: 10px;} .big-title { font-family: 'Muli', sans-serif; font-size: 60px; color: #fff !important; text-transform: uppercase;} .medium-title { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 22px; line-height: 30px; font-weight: 300;} .mr { margin-right: 10px;} /************************************** * Navigation **************************************/ .navbar { margin-bottom: 0; padding: 0 15px;} .navbar .container{ margin-left: 0px;} .navbar li { color: #666; } .navbar-nav .nav-item .nav-link { padding-top: 5px !important; margin-right: 60px !important; } .navbar-nav { margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;} .nav-bg{ background: transparent; } .nav-bg-blur { position: absolute; width: 100%; height: 100%; background: url('https://sdf-1a81f.kxcdn.com/assets/img/header/20200325_web_bgnd.webp'); background-repeat: no-repeat; background-size: auto auto; background-size: cover; } .nav-rec-dot { width: 14px; height: 14px; background: #fe0303; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; border-radius: 7px; margin-left: 5px; margin-top: 2px; } .navbar-engage.affix { width: 100%; top: 0; z-index: 99999; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInDown; animation-name: fadeInDown;} .navbar-engage.affix .navbar-brand { padding: 10px 15px; height: 54px;} .navbar-engage.affix .navbar-brand img { width: 100px;} .navbar-engage.affix .navbar-nav > li > a, .navbar-engage.affix .navbar-nav > li > a:focus { margin: 10px 20px;} .navbar-brand { width: 60px; padding-top: 10px; padding-bottom: 10px; height: auto;} .navbar-engage { border: none; border-radius: 0; background: #fff;} .navbar-engage .navbar-nav > li > a, .navbar-engage .navbar-nav > li > a:focus { font-size: 14px; padding: 28px 20px; margin: 0px; outline: 0; color: #666; font-weight: 400; background: transparent;} .navbar-engage .navbar-nav > li > a { background: transparent; padding-bottom: 5px; color: #666; position: relative;} .navbar-engage .navbar-nav > li > a:before { content: ""; display: inline-block; width: 0px; height: 1px; position: absolute; left: 1px; bottom: 4px; -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s; -moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s; -o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s; transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;} .navbar-engage .navbar-nav > li a:hover::before, .navbar-engage .navbar-nav > li.active a::before, .navbar-engage .navbar-nav > li.open > a::before, .navbar-engage .navbar-nav > .active > a:focus::before { width: 15px;} .navbar-engage .navbar-nav > li a:focus > a::before { background: transparent;} .navbar-engage .navbar-nav > li.open a:focus { background: transparent!important;} .navbar-engage .navbar-nav > li > a:hover, .navbar-engage .navbar-nav > .active > a, .navbar-engage .navbar-nav > li.open > a, .navbar-engage .navbar-nav > .active > a:hover, .navbar-engage .navbar-nav > .active > a:focus, .navbar-engage .navbar-nav > .open > a:hover { background: transparent;} .dropdown:hover>.dropdown-menu { display: block;} /*.dropdown-menu.show{ display: none;}*/ .dropdown-menu { -webkit-animation: fadeInUpMenu 0.4s; -moz-animation: fadeInUpMenu 0.4s; -ms-animation: fadeInUpMenu 0.4s; -o-animation: fadeInUpMenu 0.4s; animation: fadeInUpMenu 0.4s;} @-webkit-keyframes fadeInUpMenu { 0% { opacity: 0; -webkit-transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUpMenu { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0);} } .fadeInUpMenu { -webkit-animation-name: fadeInUpMenu; animation-name: fadeInUpMenu;} .navbar-engage .dropdown-menu { padding: 0; border-style: solid; border-width: 4px 0 0 0; border-radius: 0; left: 0; right: 0;} .navbar-engage .dropdown-menu a.dropdown-item { color: #666; padding: 10px 0 10px 15px; margin: 5px 0;} .navbar-engage .dropdown-menu a.dropdown-item:hover, .navbar-engage .dropdown-menu a.dropdown-item .active { background: #ecf0f1;} .navbar-engage .dropdown-menu a { background: #ecf0f1;} .navbar-engage .dropdown-item { color: #666; padding: 10px 0 10px 15px; margin: 5px 0;} .navbar-engage .sub-menu { top: -1px; left: 100% !important; padding: 0; border: none; -webkit-animation: fadeInUpMenu 0.4s; -moz-animation: fadeInUpMenu 0.4s; -ms-animation: fadeInUpMenu 0.4s; -o-animation: fadeInUpMenu 0.4s; animation: fadeInUpMenu 0.4s;} .navbar-engage .navbar-toggle { border-radius: 0;} @-webkit-keyframes fadeInUpMenu { 0% { opacity: 0; -webkit-transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUpMenu { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpMenu { -webkit-animation-name: fadeInUpMenu; animation-name: fadeInUpMenu;} .nav-inline .nav-item + .nav-item { margin-left: 0px;} .navbar-engage .dropdown .dropdown-menu > li.active > a{ color: #9C3;} .navbar-engage .navbar-nav > li > a:hover, .navbar-engage .navbar-nav > li.active > a, .navbar-engage .navbar-nav > li.open > a, .navbar-engage .navbar-nav > .active > a:hover, .navbar-engage .navbar-nav > .active > a:focus, .navbar-engage .navbar-nav > .open > a:hover{ color: #9C3;} .navbar-engage .navbar-nav > li a:hover::before, .navbar-engage .navbar-nav > li.active a::before, .navbar-engage .navbar-nav > li.open > a::before, .navbar-engage .navbar-nav > .active > a:focus::before { background: #9C3;} .navbar-engage .dropdown .dropdown-menu{ border-color: #9C3;} /* Gerade im TV & Nächstes Live-Spiel (Nur auf großen Displays) */ .nav_subline, .nav_subsubline{ display: none;} .nav_subline_onair{ font-size: 0.8em; font-weight: 600; background-color: #b40916; color: #fff; padding: 1px 5px;} @media (min-width: 992px) { .nav_subline{ font-size: 12px; display: inline; vertical-align: top; line-height: 15px; font-weight: lighter; color: #fff; } a.nav_subsubline { display: inline; font-size: 12px; line-height: 15px; vertical-align: top; font-weight: lighter !important; color: #fff; } /* Unterstreichung statt Farbwechsel: #6fc5d3 auf dem dunklen Navy der Navigation hat zu wenig Kontrast, um den Hover erkennbar zu machen. */ a.nav_subsubline:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } } .nav-bg #main-menu ul > li > a { background: transparent!important; color: #fff; position: relative; padding: 0px 0px 0px 0px; font-weight: 600; line-height: 18px; text-align: left;} .nav-bg #main-menu ul > li > a:hover { color: #6fc5d3;} .top-nav-collapse{ background: #fff; z-index: 999999; box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.06); -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInDown; animation-name: fadeInDown;} .top-nav-collapse #main-menu ul > li > a{ color: #666; } .top-nav-collapse #main-menu ul > li > a:hover{ color: #333; } .top-nav-collapse .nav_subline{ color: #666; } .top-nav-collapse .nav_subsubline{ color: #666; } #main-menu ul > .dropdown:hover > ul.dropdown-menu { display: block; webkit-animation: MenuFadeIn 400ms; animation: MenuFadeIn 400ms; transition: all 0.3s ease-in-out 0s;} #main-menu ul .dropdown .dropdown-menu { padding: 0; border-radius: 0; top: 0; right: 0; margin-top: 0px; width: 220px; border: none; box-shadow: 0 6px 12px rgba(0, 0, 0, .175);} #main-menu ul .dropdown .dropdown-menu a { font-size: 13px; color: #666; display: block; height: auto; padding: 12px 20px 13px; line-height: 16px; font-weight: 400; border-top: 1px solid #e2e6e7; transition: all 0.3s ease-in-out 0s;} #main-menu ul .dropdown .dropdown-menu a:hover, #main-menu .dropdown .dropdown-menu a .active { background: transparent; transition: all 0.3s ease-in-out 0s;} #main-menu ul .dropdown .dropdown-menu > li > a:focus { background: transparent;} #main-menu ul .dropdown .dropdown-menu > li.active > a { background: transparent;} #main-menu ul .dropdown .open > a { background: transparent;} #main-menu ul .dropdown .open > a:hover, #main-menu .dropdown .open > a:focus, #main-menu .dropdown .open > a.active { background: transparent;} #main-menu ul .dropdown .sub-menu { top: -2px; left: 100% !important; padding: 0; border: none; -webkit-animation: MenuFadeIn 0.4s; -moz-animation: MenuFadeIn 0.4s; -ms-animation: MenuFadeIn 0.4s; -o-animation: MenuFadeIn 0.4s; animation: MenuFadeIn 0.4s;} #main-menu > li > a:hover, #main-menu > li.active > a, #main-menu > li.open > a, #main-menu > .active > a:hover, #main-menu > .active > a:focus, #main-menu > .open > a:hover{ color: #9C3;} #main-menu .dropdown .dropdown-menu > li.active > a{ color: #9C3;} .open>a{color: #9C3 !important;} .navbar-engage .dropdown .dropdown-menu > li > a:hover, .navbar-engage .dropdown .dropdown-menu > li > a .active{ color: #6fc5d3;} #main-menu .dropdown .dropdown-menu > li > a:hover,#main-menu .dropdown .dropdown-menu > li > a:active{ color: #6fc5d3;} #main-menu ul .dropdown .dropdown-menu .dropdown-item.active, #main-menu ul .dropdown .dropdown-menu .dropdown-item.active:focus, #main-menu ul .dropdown .dropdown-menu .dropdown-item.active:hover { color: #6fc5d3; background-color: #eee;} #main-menu .nav-link.active { color: #152642; font-weight: bold;} #main-menu .nav-link:hover { color: #152642;} .sup-desc-wrap .sup-link a:hover { color: #6fc5d3;} #team .team-item .social a:hover { color: #6fc5d3;} #main-menu ul .dropdown .dropdown-menu a:hover, #main-menu .dropdown .dropdown-menu a .active { color: #6fc5d3;} /* ========================================================================== Button Submenu ========================================================================== */ #main-menu .submenu_btn{ cursor: pointer; display: block; float: right; height: 25px; line-height: 50px; padding: 2px 0px 2px 0px; position: relative; vertical-align: middle; width: 35px; margin-top: 0px;} #main-menu .submenu_btn .submenu_icon { box-sizing: border-box; } #main-menu .submenu_btn .submenu_icon-bar { display: block; width: 65%; height: 3px; margin: 0 auto; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; background: #fff; margin-top: 3px; } #main-menu .submenu_btn:hover .submenu_icon-bar, #main-menu .submenu_btn:focus .submenu_icon-bar, #main-menu .submenu_btn:active .submenu_icon-bar { background: #fff; border: none; outline: 0; box-shadow: none; } .top-nav-collapse #main-menu .submenu_btn .submenu_icon-bar{ background: #666; } @-webkit-keyframes MenuFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes MenuFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } #main-menu ul .dropdown-toggle::after { display: none; } .active.slicknav_collapsed,.slicknav_parent.slicknav_open { background: #eee;} .wpb-mobile-menu { display: none; } ul li > ul { padding: 0; border-style: solid; border-width: 4px 0 0 0; border-radius: 0; left: 0; right: 0; border-color: transparent;} ul li > ul > li > a { color: #666; padding: 10px 0 10px 15px; margin: 5px 0;} ul li > ul > li > a:hover,ul li > ul > li > a .active { background: #ecf0f1;} ul li > ul > li.active > a { background: #ecf0f1;} .active.slicknav_collapsed,.slicknav_parent.slicknav_open { background: #eee;} .wpb-mobile-menu { display: none;} .wpb-mobile-menu ul li > ul { padding: 0; border-style: solid; border-width: 4px 0 0 0; border-radius: 0; left: 0; right: 0; border-color: transparent;} .wpb-mobile-menu ul li > ul > li > a { color: #666; padding: 10px 0 10px 15px;} .wpb-mobile-menu ul li > ul > li > a:hover,.wpb-mobile-menu ul li > ul > li > a .active { background: #ecf0f1;} .wpb-mobile-menu ul li > ul > li.active > a { background: #ecf0f1;} .slicknav_menu { display: none;} @media screen and (max-width: 767px) { .nav-bg{ background: #fff; } .navbar-brand { position: absolute; top: 2px; } /* #menu is the original menu */ #wpb-mobile-menu { display: none; } .slicknav_menu { display: block; } } /* SlickMenu responsive */ @media screen and (max-width: 768px) { .navbar-toggler{ display: none; } } .top_search_con { background: #fff; height: 38px; border-radius: 50px; position: relative; width: 100%;} .top_search_con input[type="text"],.top_search_con input:focus { background: none !important; border: 1px solid #E4E4E4; height: 100%; width: 100%; padding: 1px 20px 0 40px; color: #818B8D; font-size: 12px; outline: none; border-radius: 50px; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;} .top_search_icon { color: #e64a4a; font-size: 14px; left: 15px; position: absolute; top: 7px;} .top_search .top_search_submit { border: none; padding: 0; position: absolute; width: 20px; left: 12px; opacity: 0; top: 9px;} /* ========================================================================== Service Section Start ========================================================================== */ .service-item { text-align: center;} .service-item .icon-wrapper { font-size: 40px; margin-bottom: 30px;} .service-item .icon-wrapper i { display: block; margin: 0 auto;} .service-item h2 { font-size: 22px; margin-bottom: 15px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out;} .service-item p { font-size: 13px;} /* Pulse Shrink */ @-webkit-keyframes pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes pulse-shrink { to { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } } .pulse-shrink { display: inline-block;} .service-item:hover .pulse-shrink { -webkit-animation-name: pulse-shrink; animation-name: pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate;} /* ========================================================================== VIDEO MODAL ==========================================================================*/ .videomodal .modal-backdrop.in { filter: alpha(opacity=7); opacity: 0.7;} @media (min-width: 768px) { .videomodal .modal-dialog{ width: 100%; } .videomodal .modal-dialog{ max-width: 70%;} } .videomodal .modal-content { background: none; border: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} .videomodal .modal-body { padding: 0px 0px 0px 0px;} .videomodal .modal-header { padding: 25px 0px 0px 0px; text-align: right;} .videomodal .modal-header, .modal-footer { border: 0;} .videomodal .modal-header .close { float: none; margin: 0; font-size: 36px; color: #fff; font-weight: 500; text-shadow: none; opacity: 1;} /* ========================================================================== EXIT MODAL CORONA ==========================================================================*/ .exit-modal .modal-backdrop.in { filter: alpha(opacity=7); opacity: 0.7;} @media (min-width: 768px) { .exit-modal .modal-dialog{ width: 100%; } .exit-modal .modal-dialog{ max-width: 60%;} } /* ========================================================================== SLIDE UP CONTAINER ==========================================================================*/ #mediathekSlideUpContainer{ display: none; position: sticky; bottom: 0; left: 0; width: 100%; padding: 20px 0px 20px 0px; background: rgba(12, 17, 28, 0.95); z-index: 100; color: #fff;} #mediathekSlideUpContainer h2{ font-size: 1.8em;} /* ========================================================================== SLIDE UP CONTAINER (BLACK WEEK) ==========================================================================*/ #mediathekSlideUpContainer_bw{ display: none; position: sticky; bottom: 0; left: 0; width: 100%; padding: 20px 0px 20px 0px; background: rgba(0, 0, 0, 0.85); z-index: 100; color: #fff;} #mediathekSlideUpContainer_bw h2{ font-size: 1.8em;} /* ========================================================================== EPG Section Start ========================================================================== */ #epgheadersection{ background-color: #152642; /*background-image: url('../img/header/20200325_web_bgnd.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 80%; */ padding: 100px 0px 10px 0px; } #epgheadersection .container{ } #epgheadersection h1, #epgheadersection h2, #epgheadersection h3, #epgheadersection p { color: #fff; } #epgsection{ padding: 0px; background-color: #ddd;} #epccontrols{ margin: 0; padding-bottom: 10px; background-color:#152642; color: #fff; font-size: 0.9em;} #epccontrols .leftcontrol{ text-align: left; padding-left: 25px; } #epccontrols .rightcontrol{ text-align: right; padding-right: 25px; } .am-next, .am-prev{ cursor: pointer; user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; } .am-next:not{ color: #02b0be;} #epg-item{ line-height: 1em;} #epg-item .item .ppHeadline{ padding: 5px 5px 5px 15px; } #epg-item .item .ppHeadline_today{ padding: 5px 5px 5px 15px; background-image:linear-gradient(0deg, #3d8592 0%, #02b0be 100%);border-top-left-radius: 10px; border-top-right-radius: 10px; } #epg-item .item .ppHeadline h2, #epg-item .item .ppHeadline_today h2{ color: #fff; font-size: 1.4em;} #epg-item .itemB_0{ background-image:linear-gradient(90deg, #fff 0%, #eee 80%);} #epg-item .itemB_1{ background-image:linear-gradient(90deg, #fff 0%, #eee 80%);} #epg-item .ppRunning{ border: 1px solid #be0404;} #epg-item .ppProgram_block, #epg-item .ppProgram_block_today{ padding: 0px 0px 10px 0px; } #epg-item .ppProgram_block h3, #epg-item .ppProgram_block_today h3{ color: #152642; font-size: 1.2em; padding: 10px 0px 5px 40px; margin: 0px; } #epg-item .ppProgram_block p, #epg-item .ppProgram_block_today p{ font-size: 1em; padding: 5px 0px 10px 40px; margin: 0px;} #epg-item .ppProgram_block a, #epg-item .ppProgram_block_today a{font-size: 0.9em; padding: 0px 5px 10px 40px; margin: 0px; line-height: 1.2em; } .ppTime { background-image:linear-gradient(90deg, #ddd 0%, #eee 80%); font-variant:small-caps; padding: 6px 10px 6px 5px;} .ppTimeTipp { background-image:linear-gradient(90deg, #02b0be 0%, #eee 100%); font-variant:small-caps; padding: 6px 10px 6px 5px;} .ppTime_live{ float: right; clear: both; font-size: 1.2em; font-style: italic; color: #be0404; font-weight: 900; padding-right: 10px;} .ppTime_ea{ float: right; clear: both; font-size: 1.2em; font-style: italic; color: #be0404; font-weight: 900; padding-right: 10px;} .ppTime_tipp{ float: right; clear: both; font-size: 1.2em; font-style: italic; color: #02b0be; font-weight: 900; padding-right: 10px;} @media only screen and (max-width: 767px) { #epgheadersection{ padding: 80px 0px 10px 0px; } #epgheadersection h1{ font-size: 22px; padding: 0px; line-height: 28px; font-weight: 600; } #epgheadersection p { font-size: 14px; padding: 0px; line-height: 1.5rem; } #epgsection .row { padding: 10px 0px;} } @media only screen and (min-width : 768px) { #epgheadersection{ padding: 80px 0px 10px 0px; } #epgheadersection h1{ font-size: 34px; padding: 0px; line-height: 38px; } #epgheadersection p { font-size: 14px; padding: 0px; line-height: 20px; } #epgsection .row { padding: 10px 0px;} } @media only screen and (min-width : 992px) { } /* ========================================================================== Top-Categories Section ========================================================================== */ #topcategoriessection{ background: #152642; padding: 20px 15px 20px 15px; width: 100%; } #topcategoriessection .row{ padding: 0px; } #topcategoriessection .owl-controls{ display: none; } .topcategorylink img{ transition: all 0.3s ease; width: 75px; height: 75px; object-fit: cover; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5); } .topcategorylink:hover img{ width: 80px; height: 80px; object-fit: cover; box-shadow: 0px 0px 11px rgba(255, 255, 255, 0.75); } #freevideos-item .freevideos-content a.link { color: #fff;} #freevideos-item .owl-pagination { margin-top: 10px; } #freevideos-item .owl-pagination .owl-page span { border-radius: 4px; width: 8px; height: 8px; background: none; opacity: 0.5; } #freevideos-item .owl-pagination .owl-page.active span { opacity: 1.0; } #freevideos-item .owl-wrapper{ padding: 0px;} #freevideos-item .owl-controls{ display: none;} #freevideos-item .owl-pagination{ display: none;} /* ========================================================================== Mediathek-Teaser Section ========================================================================== */ #mediathekteasersection .section-title, #mediathekteasersection .section-subcontent{ color: #fff;} #mediathekteasersection{ background: #152642; padding: 20px 15px 40px 15px; width: 100%; } #mediathekteasersection .row{ padding: 0px; } #mediathekteasersection .owl-controls{ display: none; } @media only screen and (max-width: 767px) { #mediathekteasersection h1{ font-size: 22px; padding: 0px; line-height: 28px; font-weight: 600; } #mediathekteasersection h2.section-title{ text-align: left; font-size: 24px; padding: 0px; line-height: 28px; } #mediathekteasersection p.section-subcontent { font-size: 14px; padding: 0px; line-height: 22px; } } @media only screen and (min-width : 768px) { #mediathekteasersection h1{ font-size: 34px; padding: 0px; line-height: 38px; font-weight: 600; } #mediathekteasersection h2.section-title{ font-size: 30px; padding: 0px; line-height: 34px; } #mediathekteasersection p.section-subcontent { font-size: 14px; padding: 0px; line-height: 24px; } } @media only screen and (min-width : 992px) { #mediathekteasersection h2.section-title{ font-size: 38px; padding: 0px; line-height: 48px; } #mediathekteasersection p.section-subcontent { font-size: 14px; padding: 0px; line-height: 28px; } } #freevideos-item .freevideos-content a.link { color: #fff;} #freevideos-item .owl-pagination { margin-top: 10px; } #freevideos-item .owl-pagination .owl-page span { border-radius: 4px; width: 8px; height: 8px; background: none; opacity: 0.5; } #freevideos-item .owl-pagination .owl-page.active span { opacity: 1.0; } #freevideos-item .owl-wrapper{ padding: 0px;} #freevideos-item .owl-controls{ display: none;} #freevideos-item .owl-pagination{ display: none;} .freevideos-wrapper .freevideos-overlay { position: absolute; top: 0px; width: 210px; height: 118px; transition: .5s ease; opacity:0; padding: 0px; margin: 0 auto; background: rgba(0, 0, 0, 0.3); background-image: url('../img/others/playbutton.webp'); background-size: 60px; background-repeat: no-repeat; background-position: 50% 50%; } .freevideos-wrapper { width: 210px; height: 118px; margin: 0 auto; } .freevideos-wrapper img { object-fit: cover; width: 210px; height: 118px; margin: 0 auto; } .freevideos-wrapper:hover .freevideos-overlay { opacity: 1; } /* ========================================================================== Programm-Details Section ========================================================================== */ #programdetailsection { background: #152642; color:#fff; padding: 100px 0px 10px 0px; } #programdetailsection .live { color: #be0404; font-style:italic; font-weight: bolder;} #programdetailsection .ea { color: #be0404; font-style:italic; font-weight: bolder;} #programdetailsection h1{font-size: 34px; font-weight: bold;} #programdetailsection h2{ font-size: 26px;} #programdetailsection h3{ font-size: 22px;} #programdetailsection .socialsharing a .fa{ border: none; background: transparent; font-size: 30px; height: 40px; line-height: 40px; margin: 10px 15px; width: 40px; color: #6fc5d3; } #programdetailsection .sendeplatz, .modal-content .sendeplatz{ font-size: 1.4em; text-transform: uppercase;} #programdetailsection .magenta , .modal-content .magenta{ font-size: 1.2em; font-weight: bolder; } #programdetailsection .btn-magenta, .modal-content .btn-magenta{ background-color: #e20074; } #programdetailsection .btn-magenta:hover, #programdetailsection .btn-magenta:active ,.modal-content .btn-magenta:hover, .modal-content .btn-magenta:active { transition: background-color 0.5s ease; background-color:#ea4c9d; color: #fff; } @media only screen and (max-width: 767px) { #programdetailsection{ padding: 80px 0px 10px 0px; } #programdetailsection h1{font-size: 24px; font-weight: bold;} #programdetailsection h2{ font-size: 20px;} #programdetailsection h3{ font-size: 18px; padding: 10px 0px 0px 0px;} #programdetailsection .row { padding: 10px 0px;} } @media only screen and (min-width : 768px) { #programdetailsection{ padding: 80px 0px 10px 0px; } #programdetailsection h1{font-size: 34px; font-weight: bold;} #programdetailsection h2{ font-size: 26px;} #programdetailsection h3{ font-size: 20px;} #programdetailsection .row { padding: 10px 0px;} } @media only screen and (min-width : 992px) {} /* ========================================================================== EPG-Details Section ========================================================================== */ #epgdetailsection { background: #152642; color:#fff; padding: 100px 0px 10px 0px; } #epgdetailsection .live { color: #ff2828; font-style:italic; font-weight: 600;} #epgdetailsection .ea { color: #ff2828; font-style:italic; font-weight: 600;} #epgdetailsection h1{font-size: 34px; font-weight: bold;} #epgdetailsection h2{ font-size: 26px;} #epgdetailsection h3{ font-size: 22px;} #epgdetailsection .socialsharing a .fi{ border: none; background: transparent; font-size: 30px; height: 40px; line-height: 40px; margin: 10px 15px; width: 40px; color: #6fc5d3; } #epgdetailsection .sendeplatz, .modal-content .sendeplatz{ font-size: 1.4em; text-transform: uppercase;} #epgdetailsection .magenta , .modal-content .magenta{ font-size: 1.2em; font-weight: bolder; } #epgdetailsection .btn-magenta, .modal-content .btn-magenta{ background-color: #e20074; } #epgdetailsection .btn-magenta:hover, #epgdetailsection .btn-magenta:active ,.modal-content .btn-magenta:hover, .modal-content .btn-magenta:active { transition: background-color 0.5s ease; background-color:#ea4c9d; color: #fff; } #wiederholungsBlock { padding: 20px 0px;} #wiederholungsBlock h2{ font-size: 16px;} #wiederholungsBlock p{ font-size: 14px; line-height: 16px; padding: 5px 0px; margin: 0px;} @media only screen and (max-width: 767px) { #epgdetailsection{ padding: 80px 0px 10px 0px; } #epgdetailsection h1{font-size: 24px; font-weight: bold;} #epgdetailsection h2{ font-size: 20px;} #epgdetailsection h3{ font-size: 18px; padding: 10px 0px 0px 0px;} #epgdetailsection .row { padding: 10px 0px;} #wiederholungsBlock { padding: 20px 0px;} #wiederholungsBlock h2{ font-size: 16px;} #wiederholungsBlock p{ font-size: 14px; line-height: 16px; margin: 0px;} } @media only screen and (min-width : 768px) { #epgdetailsection{ padding: 80px 0px 10px 0px; } #epgdetailsection h1{font-size: 34px; font-weight: bold;} #epgdetailsection h2{ font-size: 26px;} #epgdetailsection h3{ font-size: 20px;} #epgdetailsection .row { padding: 10px 0px;} #wiederholungsBlock { padding: 20px 0px;} #wiederholungsBlock h2{ font-size: 20px;} #wiederholungsBlock p{ font-size: 14px; line-height: 16px; margin: 0px;} } @media only screen and (min-width : 992px) {} /* ========================================================================== Hilfe Section Start ========================================================================== */ #hilfesection{ background: #152642; margin: 0px; padding: 100px 0px 0px 0px; color: #fff; } #hilfesection h1{ color: #fff;} #hilfesection h2, #hilfesection h3,#hilfesection p,#hilfesection ul { } #hilfesection .bg-help{ background-color: #fff; color: #000 !important; } .faq-link a[aria-expanded=true] > .bi-caret-right-fill { display: none; } .faq-link a[aria-expanded=false] > .bi-caret-down-fill { display: none; } .helppoint h2{ cursor:pointer; } .helppoint h2.collapsed .bi-caret-down-fill, .helppoint h2[aria-expanded=false] .bi-caret-down-fill { display: none; } .helppoint h2[aria-expanded=true] .bi-caret-right-fill { display: none; } @media only screen and (max-width: 767px) { #hilfesection .row{ padding: 5px 0px 5px 0px; } #hilfesection{ padding: 100px 0px 40px 0px; } #hilfesection h1{ font-size: 28px; padding: 0px; line-height: 32px;} #hilfesection h2{ font-size: 20px; padding: 0px; line-height: 26px; } #hilfesection h3 { font-size: 18px; padding: 0px; line-height: 26px; } #hilfesection p { font-size: 14px; padding: 0px; line-height: 26px; } } @media only screen and (min-width : 768px) { #hilfesection{ padding: 100px 0px 40px 0px; } #hilfesection h1{ font-size: 34px; padding: 0px; line-height: 38px;} #hilfesection h2{ font-size: 22px; padding: 0px; line-height: 28px; } #hilfesection h3 { font-size: 20px; padding: 0px; line-height: 22px; } #hilfesection p { font-size: 14px; padding: 0px; line-height: 26px; } } @media only screen and (min-width : 992px) { #hilfesection h1{ font-size: 44px; padding: 0px; line-height: 50px;} #hilfesection h2{ font-size: 22px; padding: 0px; line-height: 28px; } #hilfesection h3 { font-size: 20px; padding: 0px; line-height: 22px; } #hilfesection p { font-size: 14px; padding: 0px; line-height: 26px; } } /* ========================================================================== Media Section Start ========================================================================== */ #mediasection{background-color: #152642; margin: 0px; padding: 100px 0px 0px 0px; } #mediasection .container{ } #mediasection h1, #mediasection h2, #mediasection h3, #mediasection p { color: #fff;} #mediasection .row{ padding: 10px 0px;} @media only screen and (max-width: 767px) { #mediasection{ padding: 100px 0px 40px 0px; } #mediasection h1{ font-size: 28px; padding: 0px; line-height: 32px;} #mediasection h2{ font-size: 24px; padding: 0px; line-height: 28px; } #mediasection h3 { font-size: 20px; padding: 0px; line-height: 24px; } #mediasection p { font-size: 14px; padding: 0px; line-height: 28px; } } @media only screen and (min-width : 768px) { #mediasection{ padding: 100px 0px 40px 0px; } #mediasection h1{ font-size: 34px; padding: 0px; line-height: 38px;} #mediasection h2{ font-size: 30px; padding: 0px; line-height: 34px; } #mediasection h3 { font-size: 26px; padding: 0px; line-height: 30px; } #mediasection p { font-size: 14px; padding: 0px; line-height: 28px; } } @media only screen and (min-width : 992px) { #mediasection h1{ font-size: 44px; padding: 0px; line-height: 50px;} #mediasection h2{ font-size: 22px; padding: 0px; line-height: 28px; } #mediasection h3 { font-size: 20px; padding: 0px; line-height: 22px; } #mediasection p { font-size: 14px; padding: 0px; line-height: 26px; } } /* ========================================================================== Sportdigital+ Section Start ========================================================================== */ #sdfplussection{background-color: #152642; margin: 0px; padding: 100px 0px 0px 0px; } #sdfplussection .container{ } #sdfplussection h1, #sdfplussection h2, #sdfplussection h3, #sdfplussection p { color: #fff;} #sdfplussection .row{ padding: 10px 0px;} @media only screen and (max-width: 767px) { #sdfplussection{ padding: 80px 0px 40px 0px; } #sdfplussection h1{ font-size: 28px; padding: 0px; line-height: 32px;} #sdfplussection h2, #sdfplussection .h2{ font-size: 24px; padding: 0px; line-height: 28px; } #sdfplussection h3 { font-size: 20px; padding: 0px; line-height: 24px; } #sdfplussection p { font-size: 14px; padding: 0px; line-height: 28px; } } @media only screen and (min-width : 768px) { #sdfplussection{ padding: 80px 0px 40px 0px; } #sdfplussection h1{ font-size: 34px; padding: 0px; line-height: 38px;} #sdfplussection h2, #sdfplussection .h2{ font-size: 30px; padding: 0px; line-height: 34px; } #sdfplussection h3 { font-size: 20px; padding: 0px; line-height: 30px; } #sdfplussection p { font-size: 14px; padding: 0px; line-height: 28px; } } @media only screen and (min-width : 992px) { #sdfplussection h1{ font-size: 37px; padding: 0px; line-height: 50px;} #sdfplussection h2, #sdfplussection .h2{ font-size: 22px; padding: 0px; line-height: 28px; } #sdfplussection h3 { font-size: 20px; padding: 0px; line-height: 22px; } #sdfplussection p { font-size: 14px; padding: 0px; line-height: 26px; } } /* ========================================================================== Kontakt Section Start ========================================================================== */ #kontaktsection{ background-color: #1f3f5d; margin: 0px; padding: 90px 0px 0px 0px;} #kontaktsection .container{} #kontaktsection h1, #kontaktsection h2, #kontaktsection h3, #kontaktsection p { color: #fff;} .contact-title-text h2 { color: #152642; font-size: 50px;} .contact-title-text p { font-size: 18px; margin-top: 15px;} .contact-widget { margin-bottom: 30px;} .contact-widget h2 { margin-bottom: 20px;} .contact-widget address { line-height: 45px;} .contact-widget.office-location span { font-weight: 600;} #contactForm .form-group .contact-control { background: #152642 none repeat scroll 0 0; border-radius: 0; height: 50px;} #contactForm .form-group { margin-bottom: 25px;} #contactForm .form-group .form-control { border-radius: 0; background: #f2f2f2 none repeat scroll 0 0; font-size: 14px;} ul.contact-info2 { list-style: outside none none; margin-top: 20px; padding: 0;} ul.contact-info2 i.fa { margin-right: 10px;} #gMap { height: 400px; width: 100%; } /* ========================================================================== Datenschutz Section Start ========================================================================== */ #contentsection{ background-color: #fff; margin: 0px; padding: 0px; } @media (min-width: 320px) and (max-width: 480px){ #contentsection .row { padding: 10px 0; } } /* ========================================================================== Datenschutz Section Start ========================================================================== */ #datenschutzsection{ background: rgb(30,44,72); background: linear-gradient(180deg, rgba(30,44,72,1) 0%, rgba(21,38,64,1) 100%); margin: 0px; padding: 100px 0px 50px 0px; } #datenschutzsection .container{ background-color: #fff; } #datenschutzsection h1, #datenschutzsection h2, #datenschutzsection h3, #datenschutzsection p { background: #fff; color: #000; } /* ========================================================================== AGB Section Start ========================================================================== */ #agbsection{ background: rgb(30,44,72); background: linear-gradient(180deg, rgba(30,44,72,1) 0%, rgba(21,38,64,1) 100%); margin: 0px; padding: 100px 0px 50px 0px; } #agbsection .container{ background-color: #fff; } #agbsection h1,#agbsection h2,#agbsection h3, #agbsection p { background: #fff; color: #000; } /* ========================================================================== About Section Start ========================================================================== */ #about{ background: rgb(30,44,72); background: linear-gradient(180deg, rgba(30,44,72,1) 0%, rgba(21,38,64,1) 100%); margin: 0px; padding: 150px 0px 150px 0px; } #about h1, #about h2, #about h3, #about .container { color: #fff; } #about .container { padding: 20px; } @media only screen and (max-width: 767px) { #about{ padding: 100px 0px 10px 0px; } #about .row { padding: 10px 0px;} #about h1{ font-size: 24px; padding: 0px; line-height: 28px; } #about h2{ font-size: 20px; padding: 0px; line-height: 28px; } #about p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 768px) { #about{ padding: 80px 0px 20px 0px; } #about .row { padding: 10px 0px;} #about h1{ font-size: 34px; padding: 0px; line-height: 38px; } #about h2{ font-size: 28px; padding: 0px; line-height: 32px; } #about p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 992px) { #about{ padding: 80px 0px 30px 0px; } #about .row { padding: 10px 0px;} #about h1{ font-size: 34px; padding: 10px 0px; line-height: 38px; } #about h2{ font-size: 28px; padding: 10px 0px; line-height: 32px; } #about p { font-size: 14px; padding: 0px; line-height: 20px; } } /* ========================================================================== Mediathek Section Start ========================================================================== */ #mediathek{ background-color: #1e2c48; margin: 0px; padding: 150px 0px 150px 0px; } #mediathek h1, #mediathek h2, #mediathek h3, #mediathek p { color: #fff; text-shadow: -2px -2px 12px #000000;} #adblockersection { background: #1e2c48; color: #fff; padding: 0px; margin: 0px; } #livevideo{ background-color: #1e2c48; background-repeat: no-repeat; background-position: 50% 100%; margin: 0px; padding: 30px 0px; } #livevideo .teasertile{ padding: 30px 20px;} #livevideo h1 { font-size: 2em; color: #fff; text-shadow: -2px -2px 12px #000000;} #livevideo h2 { font-size: 1.5em; color: #fff; text-shadow: -2px -2px 12px #000000;} #livevideo .red { color: red; font-weight: bold} #livevideo .teasertile{ background: #ddd url('https://start.sportdigital.de/assets/img/others/sportdigital_0_general.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 100%; } #videoblock{ padding: 0px 0px 20px 0px; background-color: #868686; } #videoblock .headlineBlock { background-color: #1e2c48; margin: 0px 0px 0px 0px; } #videoblock .videoHeadline { font-size: 1.8em;} #videoblock .videoHeadline .live { color: red; font-weight: bolder; text-transform: uppercase;} #videoblock .videoHeadline .free { color: #6fc5d3; font-weight: bolder; text-transform: uppercase;} #videoblock .videoHeadline span {text-transform: none; color: #fff; font-size: 0.8em;} #videoblock .videoblock { padding: 10px 20px; margin-bottom: 0px; background-color: #f2f2f2; } #videoblock .live_list, #videoblock .vod_list #videoblock .free_list { border: 1px solid #d9d9d9; } #videoblock .videoblock img{ width: 100%; height: 100%;} #videoblock .videoblock p{ margin: 0px; padding: 0px; } #videoblock .videoblock p.name { line-height: 15pt; font-weight: bold; color: #152642;} #videoblock .videoblock p.date { font-weight: normal; color: #1e2c48;} #videoblock .videoblock p.date .live{ font-weight: 600; color: #ff2828;} #videoblock .videoblock p.date .pay{ font-weight: 600; color: #ff2828;} #videoblock .videoblock p.date .free{ font-weight: 600; color: #6fc5d3; text-transform: uppercase;} #videoblock .show_more_live, #videoblock .show_more_free, #videoblock .show_more_vod{ cursor: pointer;} #videoblock .show_more_main{ background-color: #e6e6e6; border-top: 1px solid #d9d9d9; color: #6fc5d3; padding: 5px 0px; text-align: center; text-transform: uppercase; font-weight: bolder; } #videoblock .show_more_main span{ color: #1e2c48; } #videoblock .show_more_main:hover { background-color: #bfbfbf;} /* PAYWALL */ #paywallsection { background: #1e2c48; color: #fff; padding: 00px 0px 30px 0px; } #paywallsection { background-image: url("https://sdf-1a81f.kxcdn.com/assets/img/plenigo/20240726_paywall_bgnd.webp"); background-size: cover; background-repeat: no-repeat; background-position: center top; background-attachment: fixed; } #offerspinner{ background-color: #1e2c48; -ms-user-select: None; -moz-user-select: None; -webkit-user-select: None; user-select: None; cursor: auto; } #offerlinks{ background-color: #1e2c48; -ms-user-select: None; -moz-user-select: None; -webkit-user-select: None; user-select: None; cursor: auto; } #offertiles{ background-color: #1e2c48; -ms-user-select: None; -moz-user-select: None; -webkit-user-select: None; user-select: None; cursor: auto; } #offertiles .offer-tile{ color: #152642; background-color: #f2f2f2; border: 4px solid #152642; cursor: pointer; } #offertiles .offer-tile:hover, #offertiles .offer-tile.selected{ background-color: #fff; border: 4px solid #6fc5d3; cursor: pointer; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5); transition : box-shadow 0.4s ease-in-out;} #offertiles .offer-tile .price_clause{ display: inline-block; text-align: start; line-height: 1.3em; min-height: 50px; opacity: 1; transition: opacity 1.3s ease, visibility 1.3s ease; } #offertiles .offer-tile .formdisabled{ pointer-events: none; opacity: .4; } #offertiles .offer-tile p{ color: #152642; } #offertiles .offer-tile h1, #offertiles .offer-tile .h1{ padding: 2px 7px !important; display: inline-block; color: #fff !important; background-color: #152642; } #offertiles .offer-tile h2{ color: #152642; min-height: 2em;} #offertiles .offer-tile h3{ padding: 2px 7px !important; font-size: 1.4em; display: inline-block; color: #fff !important; background-color: #152642; } /* SEARCH */ .gj-datepicker{ display: contents; } .gj-picker-bootstrap .today { background-color: #6fc5d3 !important; color: white !important; border-radius: 4px; } #videoblock .searchBlock{ background-color: #1e2c48; } #videoblock .searchBlock .dropdown-item:active, .searchBlock .dropdown-item.active, .searchBlock .dropdown-item.active:focus, .searchBlock .dropdown-item.active:hover { background-color: #cce6ec; color: #152642; border: none; } #videoblock .searchBlock .dropdown-item.active:hover{ display: none;} #videoblock .searchBlock .bs-searchbox input{ background-color: #e2f3f6; } #videoblock #mediaVideoBlock .sectionDividerLive{ font-weight: 600; color: #fff; background-color: #b40916; } #videoblock #mediaVideoBlock .sectionDividerFree{ font-weight: 600; color: #fff; background-color: #1e2c48; } #videoblock .searchBlock div.dropdown-menu.show { transform: none !important; top: auto !important; } #videoblock .searchBlock input:focus, .searchBlock textarea:focus, .searchBlock select:focus, .searchBlock button:focus, #videoblock.searchBlock input:active, .searchBlock textarea:active, .searchBlock select:active, .searchBlock button:active{ outline: none !important; box-shadow: none !important; } .bootstrap-select .active{ display: block !important;} .search-error-message { color: #f2f2f2; display: none; } .dropdown.bootstrap-select .dropdown-menu { outline:none !important; display: none !important; } .dropdown.bootstrap-select .dropdown-menu.show { outline:none !important; display: block !important; } .bootstrap-select .dropdown-toggle:focus,.bootstrap-select>select.mobile-device:focus+.dropdown-toggle { outline: none !important; } #videoblock a{ display: block; padding: 10px; border: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s;} #videoblock a:hover, #videoblock a:focus, #videoblock a:active{ display: block; background: #fff; color: #000; border-color: #56adc0; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } #videoblock .videoblock p.league { padding-top: 5px; font-size: 0.8em; text-transform: uppercase; line-height: 15pt; font-weight: 600; color: #6fc5d3;} #videoblock .videoblock p.name { line-height: 12pt;} #videoblock .videoblock p.geoinfo { font-size: 0.8em; color: #435167; line-height: 12pt;} #videoblock .videoblock p.date .next{ font-size: 0.8em; font-weight: 600; background-color: #56adc0; color: #fff; padding: 1px 5px; } #videoblock .videoblock p.date .onair{ font-size: 0.8em; font-weight: 600; background-color: #b40916; color: #fff; padding: 1px 5px; } #videoblock .videoblock p.date .pay{ font-weight: 600; color: #ff2828;} #videoblock .videoblock p.date .free{ font-size: 0.8em; font-weight: 600; background-color: #309550; color: #fff; padding: 1px 5px; } #videoblock .videoblock .video-overlay .fileLength { position: absolute; bottom: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 2px 5px; border-radius: 3px; } #videoblock .videoblock .video-overlay .batch { position: absolute; top: 10px; right: 10px; color: white; padding: 2px 5px; border-radius: 3px; } #videoblock .videoblock .video-overlay .batch .next{ font-weight: 600; background-color: #56adc0; color: #fff; padding: 1px 5px; } #videoblock .videoblock .video-overlay .batch .free{ font-weight: 600; background-color: #309550; color: #fff; padding: 1px 5px; } #videoblock .videoblock .video-overlay .batch .live{ font-weight: 600; background-color: #b40916; color: #fff; padding: 1px 5px; } #videoblock .videoblock .video-overlay .premium { position: absolute; top: 10px; left: 10px; color: white; padding: 2px 5px; border-radius: 3px; } #videoblock .videoblock .video-overlay .channel { position: absolute; bottom: 5px; left: 10px; color: white; padding: 2px 5px; border-radius: 3px; font-size: 0.7em; font-weight: light; } #bs-select-free{ font-size: 0.8em; font-weight: 600; background-color: #309550; color: #fff; padding: 1px 5px; } #bs-select-live{ font-size: 0.8em; font-weight: 600; background-color: #b40916; color: #fff; padding: 1px 5px; } #videoDetailBlock {background-color: #1e2c48; margin: 0px; padding: 20px 0px 20px 0px; } #videoDetailBlock h1, #videoDetailBlock h2, #videoDetailBlock h3, #videoDetailBlock p { color: #fff; text-shadow: -2px -2px 12px #000000;} #videoDetailBlock .backlink{ margin: 10px 0px; border: 1px solid #fff; background-color: #6fc5d3; padding: 0.5em 10px; font-size: small; } #videoDetailBlock .backlink fi, #videoDetailBlock .backlink fi :hover{ border: none; } #videoDetailBlock .backlink bi, #videoDetailBlock .backlink bi :hover{ border: none; } #videoDetailBlock .backlink:hover, #videoDetailBlock .backlink:active, #videoDetailBlock .backlink:link, #videoDetailBlock .backlink:visited, #videoDetailBlock .backlink:focus{ border: 1px solid #fff; outline: none !important; box-shadow: none !important; } #videoDetailBlock .sociallinks{ font-size: 2em; color: #fff; } #videoDetailBlock .sociallinks { display: inline-block;} #videoDetailBlock .sociallinks a { display: inline-block; margin: 0 0 0 5px; color: #fff;} #videoDetailBlock .sociallinks a i { width: 32px; height: 32px; vertical-align: middle; line-height: 32px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} #videoDetailBlock .sociallinks a i:hover { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} #videoMetadataBlock h2{ font-size: 1.2em; line-height: 1.4em; color: #fff; text-shadow: -2px -2px 12px #000000; } #videoMetadataBlock h1{ font-size: 1.6em; font-weight: bold; line-height: 1.6em; color: #fff; text-shadow: -2px -2px 12px #000000; } #videoMetadataBlock h3{ font-size: 1.4em; font-weight: bold; line-height: 1.em; color: #fff; text-shadow: -2px -2px 12px #000000;} #videoMetadataBlock p.subline{ font-size: 1.0em; line-height: 1.4em; text-shadow: -2px -2px 12px #000000; } #videoMetadataBlock p{ color: #fff; line-height: 1.6em; text-shadow: -2px -2px 12px #000000; } #proplayer h3{ font-size: 1.6em; font-weight: bold; line-height: 1.em; color: #fff; text-shadow: -2px -2px 12px #000000;} #tabmenu .nav-link { border: 1px solid #fff; border-top-left-radius: 0; border-top-right-radius: 0; } #tabmenu li a{margin-bottom: 0px; } #tabmenu li a{ color: #fff;} #tabmenu .nav-item.show .nav-link, #tabmenu .nav-link.active{ background-color: #6fc5d3; color: #fff; } .badge-secondary{ background-color: red;} #vasterror{ display: none;} .video-wrapper-2 .video-overlay { position: absolute; top: 0px; width: 100%; height: 100%; transition: .5s ease; opacity:0; padding: 0px !important; margin: auto; background: rgba(0, 0, 0, 0.3); background-image: url('../img/others/playbutton.webp'); background-size: 60px; background-repeat: no-repeat; background-position: 50% 50%; } .video-wrapper-2 { position: relative; padding: 0px; /*width: 210px; height: 118px; margin: 0 auto; */ } .video-wrapper-2 img { object-fit: cover; margin: 0; } .video-wrapper-2:hover .video-overlay { opacity: 1; } .video-wrapper .video-overlay { position: absolute; top: 10px; width: 210px; height: 118px; transition: .5s ease; opacity:0; padding: 0px; margin: 0 auto; background: rgba(0, 0, 0, 0.3); background-image: url('../img/others/playbutton.webp'); background-size: 60px; background-repeat: no-repeat; background-position: 50% 50%; } .video-wrapper { width: 210px; height: 118px; margin: 0 auto; } .video-wrapper img { object-fit: cover; width: 210px; height: 118px; margin: 0 auto; } .video-wrapper:hover .video-overlay { opacity: 1; } .video-wrapper-3 { position: relative; padding: 0; } .video-wrapper-3 .video-overlay { position: absolute; top: 0px; width: 100%; height: 100%; transition: .5s ease; opacity:0; padding: 0px !important; margin: auto; background: rgba(0, 0, 0, 0.3); background-image: url("../img/others/playbutton.webp"); background-size: 60px; background-repeat: no-repeat; background-position: 50% 50%; } .video-wrapper-3 img { object-fit: cover; margin: 0; } .video-wrapper-3:hover .video-overlay { position: absolute; top: 0px; width: 100%; opacity: 0.85; } #currentprogramContainer { padding-top: 10px; padding-bottom: 10px; background-color: rgba(30,44,72,0.8);} #currentprogramContainer .currentProgram{ margin: 0px; color: #ddd; line-height: normal; font-weight: 300; } #currentprogramContainer .time{ } #currentprogramContainer .nowonair{ font-weight: 600; } #currentprogramContainer .currentProgram .onair, #currentprogramContainer .currentProgram .live{ color: red; font-style: italic; font-weight: 600; padding: 0px 5px 0px 5px; } @media only screen and (max-width: 767px) { #mediathek{ padding: 100px 0px 10px 0px; } #mediathek .row { padding: 10px 0px;} #mediathek h1{ font-size: 20px; padding: 0px; line-height: 28px; font-weight: 600; } #mediathek h2{ text-align: left; font-size: 18px; padding: 0px; line-height: 28px; font-weight: 600; } #mediathek p { font-size: 14px; padding: 0px; line-height: 20px; } #videoblock .row { padding: 0px;} #videoblock .headlineBlock { background-color: #1e2c48; margin: 15px 0px 0px 0px; } #videoblock .videoHeadline { font-size: 1.5em;} #videoDetailBlock .row { padding: 10px 0px;} #videoMetadataBlock h1{ font-size: 1.4em; font-weight: bold; } #videoMetadataBlock h2{ font-size: 1.0em; padding-top: 10px; } #videoMetadataBlock h3{ font-size: 1.2em; font-weight: bold; } #videoMetadataBlock p.subline{ font-size: 0.8em; color: #fff; } #videoMetadataBlock p{ line-height: 1.4em; } #videoDetailBlock .laterpaycontainer{ padding: 0px; } #videoDetailBlock img{ display: none; } #proplayer h3{ font-size: 1.2em; font-weight: bold; } #currentprogramContainer p.time, #currentprogramContainer p.title, #currentprogramContainer p.subtitle{ font-size: 0.8em; } } @media only screen and (min-width : 768px) { #mediathek{ padding: 80px 0px 10px 0px; } #mediathek .row { padding: 10px 0px;} #mediathek h1{ font-size: 34px; padding: 0px; line-height: 38px; font-weight: 600;} #mediathek h2{ font-size: 28px; padding: 0px; line-height: 32px; font-weight: 600;} #mediathek p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 992px) { #mediathek{ padding: 80px 0px 10px 0px; } #mediathek .row { padding: 10px 0px;} #mediathek h1{ font-size: 34px; padding: 0px; line-height: 38px; font-weight: 600;} #mediathek h2{ font-size: 28px; padding: 0px; line-height: 32px; font-weight: 600;} #mediathek p { font-size: 14px; padding: 0px; line-height: 20px; } } /* ========================================================================== Videoplayer ========================================================================== */ #channelplayer-podcast-toggle{ display: none; } #channelinfobox{ background: #152642; } #channelinfobox .onair{ font-size: 0.8em; font-weight: 600; background-color: #b40916; color: #fff; padding: 1px 5px; } #channelinfobox .live-tv-image { position: relative; display: inline-block; } #channelinfobox .live-tv-image::after { content: "LIVE-TV"; position: absolute; top: 10px; right: 10px; font-size: 0.8em; font-weight: 600; background-color: #b40916; color: #fff; padding: 3px 5px; line-height: 1; white-space: nowrap; z-index: 2; pointer-events: none; } #channelinfobox .toggleChannelInfo:focus { outline: none; box-shadow: none; } #channelinfobox #programTable { width: 100%; table-layout: auto; border-collapse: collapse; } #channelinfobox #programTable th, #programTable td { text-align: left; padding: 5px 10px; color: #fff; border: none; } #channelinfobox #programTable .time { width: 120px; white-space: nowrap; } #channelinfobox #programTable .time .time-text { text-transform: uppercase; background-color: #ccc; color: #212529; font-size: 0.9em; border-radius: 6px; padding: 2px 5px; } #channelinfobox #programTable .program { width: 100%; } #channelinfobox #programTable .first-line { font-weight: bold; } #channelinfobox #programTable .second-line { margin: 0px; color: #ccc; } @media (max-width: 991px) { #channelinfobox .channel-button img{width: 30px; height: 30px; } } @media (max-width: 767px) { #channelinfobox #programTable { display: block; overflow-x: auto; padding: 0px 20px; } #channelinfobox #programTable thead { display: none; } #channelinfobox #programTable tbody { display: block; } #channelinfobox #programTable tr { display: flex; flex-direction: column; width: 100%; margin-bottom: 10px; } #channelinfobox #programTable td { display: block; width: 100%; } #channelinfobox #programTable .time { width: auto; margin-bottom: 0px; padding: 0px 0px 0px 0px; } #channelinfobox #programTable .program { width: 100%; padding-left: 0px; } } /* ========================================================================== Share Start ========================================================================== */ #shareSection{ background-color: #152642; margin: 0px; padding: 150px 0px 20px 0px; } #shareSection h2{ font-size: 1.4em; line-height: 1.4em; color: #fff; text-shadow: -2px -2px 12px #000000; } #shareSection h1{ font-size: 2.2em; font-weight: bold; line-height: 1.6em; color: #fff; text-shadow: -2px -2px 12px #000000; } #shareSection h3{ font-size: 1.6em; font-weight: bold; line-height: 1.em; color: #fff; text-shadow: -2px -2px 12px #000000;} #shareSection p.subline{ font-size: 1.0em; line-height: 1.4em; text-shadow: -2px -2px 12px #000000; } #shareSection p{ color: #fff; line-height: 1.6em; text-shadow: -2px -2px 12px #000000; } @media only screen and (max-width: 767px) { #shareSection{ padding: 100px 0px 10px 0px; } #shareSection .row { padding: 10px 0px;} #shareSection h2{ font-size: 1.0em; padding-top: 10px; } #shareSection h1{ font-size: 1.4em; font-weight: bold; } #shareSection h3{ font-size: 1.2em; font-weight: bold; } #shareSection p.subline{ font-size: 0.8em; color: #fff; } #shareSection p{ line-height: 1.4em; } #shareSection .laterpaycontainer{ padding: 0px; } } @media only screen and (min-width : 768px) { #shareSection{ padding: 80px 0px 10px 0px; } #shareSection .row { padding: 10px 0px;} } @media only screen and (min-width : 992px) { #shareSection{ padding: 80px 0px 10px 0px; } #shareSection .row { padding: 10px 0px;} } /* ========================================================================== Newsletter Section Start ========================================================================== */ #newslettersection{ background-color: #152642; margin: 0px; padding: 150px 0px 150px 0px; } #newslettersection h1, #newslettersection h2, #newslettersection h3, #newslettersection p { color: #fff; text-shadow: -2px -2px 12px #000000;} @media only screen and (max-width: 767px) { #newslettersection{ padding: 100px 0px 10px 0px; } #newslettersection .row { padding: 10px 0px;} #newslettersection h1{ font-size: 24px; padding: 0px; line-height: 28px; } #newslettersection h2{ font-size: 20px; padding: 0px; line-height: 28px; } #newslettersection p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 768px) { #newslettersection{ padding: 80px 0px 10px 0px; } #newslettersection .row { padding: 10px 0px;} #newslettersection h1{ font-size: 34px; padding: 0px; line-height: 38px; } #newslettersection h2{ font-size: 28px; padding: 0px; line-height: 32px; } #newslettersection p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 992px) { #newslettersection{ padding: 80px 0px 40px 0px; } #newslettersection .row { padding: 10px 0px;} #newslettersection h1{ font-size: 34px; padding: 0px; line-height: 38px; } #newslettersection h2{ font-size: 28px; padding: 0px; line-height: 32px; } #newslettersection p { font-size: 14px; padding: 0px; line-height: 20px; } } /* ========================================================================== Satellitenempfang Section Start ========================================================================== */ #satellitensection{ background-color: #152642; margin: 0px; padding: 150px 0px 150px 0px; } #satellitensection h1, #satellitensection h2, #satellitensection h3, #satellitensection p { color: #fff; text-shadow: -2px -2px 12px #000000;} #satellitensection ul { color: #fff; text-shadow: -2px -2px 12px #000000;} @media only screen and (max-width: 767px) { #satellitensection{ padding: 100px 0px 10px 0px; } #satellitensection .row { padding: 10px 0px;} #satellitensection h1{ font-size: 20px; padding: 0px; line-height: 28px; } /* seit 09/2026 h1.section-title - Werte der frueheren h2 */ #satellitensection h2{ font-size: 20px; padding: 0px; line-height: 28px; } #satellitensection h3{ font-size: 18px; padding: 0px; line-height: 28px; } #satellitensection p { font-size: 14px; padding: 0px; line-height: 20px; } } /* ========================================================================== Presse Section Start ========================================================================== */ #presse{ background: #1e2c48; color: #fff; padding: 80px 0px; } #presse .pmrow { color: #152642; background-color: #f2f2f2; border: 1px solid #152642;} #presse .pmrow:hover { color: #152642; background-color: #ffffff; border: 1px solid #6fc5d3; cursor:pointer; } #presse h1 { color: #fff; } @media only screen and (max-width: 767px) { #presse .pmrow{ padding: 0px; } #presse .teasertile{ padding: 0px !important; } } /* ========================================================================== 404 ERROR Section Start ========================================================================== */ #errorsection{ background-color: #152642; margin: 0px; padding: 150px 0px 150px 0px; } #errorsection h1, #errorsection h2, #errorsection h3, #errorsection p { color: #fff; text-shadow: -2px -2px 12px #000000;} /* ========================================================================== Header Section Start ========================================================================== */ #headersection{ background-color: #56697b; background-image: url('../img/SD_100proz_W_D.png'), url('../img/header/20200325_web_bgnd.jpg'); background-size: 200px, cover; background-repeat: no-repeat, no-repeat; background-position: right bottom, 50% 50%; max-width: 100%; margin: 0px; padding: 120px 0px 80px 0px;} #headersection h1{ font-size: 2.5em; color: #fff; padding-top: 1.8rem; font-weight: 600; text-shadow: -2px -2px 12px #000000;} #headersection h2{ font-size: 1.8em; color: #fff; padding-top: 1.4rem; line-height: 1.4em; font-weight: 300; text-shadow: -2px -2px 12px #000000;} #headersection p{ font-size: 1.2em; color: #fff; padding-top: 1.2rem; line-height: 1.6em; font-weight: 200; text-shadow: -2px -2px 12px #000000;} #headersection .btn{ width: 100%; margin-top: 20px; } #headersection .logoimage{ padding-bottom: 10px;} #headersection #laterpaystamp{ z-index: 100; position: absolute; top: 240px;} #headersection #multidevice{ padding-top: 0px;} .videotextlink{ display: none;} #headersection .moreAboutLink{ margin-top: 2.5em; font-size: 1.3em; cursor: pointer; color: #6fc5d3; text-shadow: -2px -2px 12px #000000;} @media (max-width: 767px) { #headersection{ background-image: url('../img/header/20200325_web_bgnd.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top left; padding-top: 40px; padding-bottom: 20px } #headersection h1{ font-size: 2em; padding-top: 1rem; } #headersection h2{ font-size: 1.2em; padding-top: 1rem; } #headersection p{ font-size: 1em; } #headersection .btn{ width: 100%; margin-top: 10px; } #headersection .logoimage{ display: none; } #headersection .row{ margin-bottom: 0px; padding-bottom: 20px; } #videolink img{ display: none; } #headersection #multidevice{ padding-top: 20px; } .videotextlink{ display: block;} #headersection .moreAboutLink{ margin-top: 1em; font-size: 1.0em; padding-left: 15px; } } #headersection .stamp-container { margin-top: -180px; margin-left: -50px;} #headersection .stamp-container-test { margin-top: 0px; margin-left: 0px;} #headersection .stamp { width: 200px; height: 100px; background: #ffffff; position: relative; margin-left: 6px; margin-top: 3px;} #headersection .stamp:before { content: ""; position: absolute; top: -50px; left: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 50px solid #ffffff;} #headersection .stamp:after { content: ""; position: absolute; bottom: -50px; left: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 50px solid #ffffff;} #headersection .stamp-test { width: 200px; height: 100px; background: #ffffff; position: relative; margin-left: 6px; margin-top: 3px;} #headersection .stamp-test:before { content: ""; position: absolute; left: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 50px solid #ffffff;} #headersection .stamp-test:after { content: ""; position: absolute; left: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 50px solid #ffffff;} #headersection .stamp-outer { width: 212px; height: 106px; background: #6fc5d3; position: absolute;} #headersection .stamp-outer:before { content: ""; position: absolute; top: -56px; left: 0; width: 0; height: 0; border-left: 106px solid transparent; border-right: 106px solid transparent; border-bottom: 56px solid #6fc5d3;} #headersection .stamp-outer:after { content: ""; position: absolute; bottom: -56px; left: 0; width: 0; height: 0; border-left: 106px solid transparent; border-right: 106px solid transparent; border-top: 56px solid #6fc5d3;} #headersection .stamp-outer-test { width: 212px; height: 106px; background: #6fc5d3; } #headersection .stamp-outer-test:before { content: ""; top: -60px; left: 0; width: 0; height: 0; border-left: 106px solid transparent; border-right: 106px solid transparent; border-bottom: 56px solid #6fc5d3;} #headersection .stamp-outer-test:after { content: ""; left: 0; width: 0; height: 0; border-left: 106px solid transparent; border-right: 106px solid transparent; border-top: 56px solid #6fc5d3;} #headersection .stamp p { color: #000 !important; font-weight: 400; text-align: center !important; font-size: 16px !important; text-shadow: none !important; width: 100% !important; margin-bottom: 0px !important; margin-top: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; line-height: 20px;} #headersection .stamp img { padding-left: 20px; padding-right: 20px; padding-top: 20px;} @media only screen and (max-width: 991px) { #headersection .stamp-container { display: none; } #headersection #laterpaystamp{ display: none; } } .sdnPlayer { height: 50% !important;} #landingpage { background-color: #001338;} /* ========================================================================== HEADER WEB-HERO ========================================================================== */ #sdhero{ background-color: #56697b; background-size: cover; background-repeat: no-repeat; background-position: 100% 100%; max-width: 100%; margin: 0px; padding: 60px 0px 0px 0px;} #sdhero .link_container{ position: absolute; top: 78%; width: 100%; z-index: 100; } #sdhero .claim_container { position: absolute; top: 0; left: 0; z-index: 70; } #sdhero .fgnd_container { position: absolute; top: 0; left: 0; z-index: 50; } @media (max-width: 767px) { #sdhero{ background-color: #fff; background-image: none; background-size: cover; background-repeat: no-repeat; background-position: top left; padding-top: 60px; padding-bottom: 0px ; } #sdhero .link_container{ top: 55%; } } /* ========================================================================== SDF 3,75 EURO ========================================================================== */ #sdfthreeseventyfiveeuro{ background-color: #56697b; background-image: url("https://sdf-1a81f.kxcdn.com/assets/img/SD_100proz_W_D.webp"), url("https://sdf-1a81f.kxcdn.com/assets/img/header/20230822_375EUR_Hintergrund.webp"); background-size: 200px, cover; background-repeat: no-repeat, no-repeat; background-position: right bottom, 50% 75%; max-width: 100%; margin: 0px; padding: 60px 0px 0px 0px;} #sdfthreeseventyfiveeuro .link_container{ position: absolute; top: 78%; width: 100%; z-index: 100; } #sdfthreeseventyfiveeuro .claim_container { position: absolute; top: 0; left: 0; z-index: 70; } #sdfthreeseventyfiveeuro .fgnd_container { position: absolute; top: 0; left: 0; z-index: 50; } @media (max-width: 767px) { #sdfthreeseventyfiveeuro{ background-color: #fff; background-image: none; background-size: cover; background-repeat: no-repeat; background-position: top left; padding-top: 60px; padding-bottom: 0px ; } #sdfthreeseventyfiveeuro .link_container{ top: 55%; } } /* ========================================================================== SDF+ ========================================================================== */ #sdfplus{ background-color: #56697b; background-image: url("https://sdf-1a81f.kxcdn.com/assets/img/header/20240325_SDFPLus_Hintergrund.webp"); background-size: cover; background-repeat: no-repeat; background-position: 100% 100%; max-width: 100%; margin: 0px; padding: 60px 0px 0px 0px;} #sdfplus .link_container{ position: absolute; top: 78%; width: 100%; z-index: 100; } #sdfplus .claim_container { position: absolute; top: 0; left: 0; z-index: 70; } #sdfplus .fgnd_container { position: absolute; top: 0; left: 0; z-index: 50; } @media (max-width: 767px) { #sdfplus{ background-color: #fff; background-image: none; background-size: cover; background-repeat: no-repeat; background-position: top left; padding-top: 60px; padding-bottom: 0px ; } #sdfplus .link_container{ top: 55%; } } /* ========================================================================== KOSMOS ========================================================================== */ #sdkosmos{ background-color: #56697b; background-image: url("https://sdf-1a81f.kxcdn.com/assets/img/header/20241113_Kosmos_Background_v2.webp"); background-size: cover; background-repeat: no-repeat; background-position: 100% 100%; max-width: 100%; margin: 0px; padding: 60px 0px 0px 0px;} #sdkosmos .link_container{ position: absolute; top: 78%; width: 100%; z-index: 100; } #sdkosmos .claim_container { position: absolute; top: 0; left: 0; z-index: 70; } #sdkosmos .fgnd_container { position: absolute; top: 0; left: 0; z-index: 50; } @media (max-width: 767px) { #sdkosmos{ background-color: #fff; background-image: none; background-size: cover; background-repeat: no-repeat; background-position: top left; padding-top: 60px; padding-bottom: 0px ; } #sdkosmos .link_container{ top: 55%; } } /* ========================================================================== NASCAR ========================================================================== */ #sdnascar{ background-color: #56697b; background-image: url("https://sdf-1a81f.kxcdn.com/assets/img/header/202250201_NASCAR_Background.webp"); background-size: cover; background-repeat: no-repeat; background-position: 100% 100%; max-width: 100%; margin: 0px; padding: 60px 0px 0px 0px;} #sdnascar .link_container{ position: absolute; top: 78%; width: 100%; z-index: 100; } #sdnascar .claim_container { position: absolute; top: 0; left: 0; z-index: 70; } #sdnascar .fgnd_container { position: absolute; top: 0; left: 0; z-index: 50; } @media (max-width: 767px) { #sdnascar{ background-color: #fff; background-image: none; background-size: cover; background-repeat: no-repeat; background-position: top left; padding-top: 60px; padding-bottom: 0px ; } #sdnascar .link_container{ top: 55%; } } /* ========================================================================== SIXNATIONS ========================================================================== */ #sdsixnations{ background-color: #56697b; background-image: url("https://sdf-1a81f.kxcdn.com/assets/img/header/20250201_SixNations_Background.webp"); background-size: cover; background-repeat: no-repeat; background-position: 100% 100%; max-width: 100%; margin: 0px; padding: 60px 0px 0px 0px;} #sdsixnations .link_container{ position: absolute; top: 78%; width: 100%; z-index: 100; } #sdsixnations .claim_container { position: absolute; top: 0; left: 0; z-index: 70; } #sdsixnations .fgnd_container { position: absolute; top: 0; left: 0; z-index: 50; } @media (max-width: 767px) { #sdsixnations{ background-color: #fff; background-image: none; background-size: cover; background-repeat: no-repeat; background-position: top left; padding-top: 60px; padding-bottom: 0px ; } #sdsixnations .link_container{ top: 55%; } } /* ========================================================================== BLACKWEEK ========================================================================== */ #sdplusblackweek{ background-color: #56697b; background-image: url("https://sdf-1a81f.kxcdn.com/assets/img/header/20241128_SDBlackWeek_Hintergrund.webp"); background-size: cover; background-repeat: no-repeat; background-position: 100% 100%; max-width: 100%; margin: 0px; padding: 60px 0px 0px 0px;} #sdplusblackweek .link_container{ position: absolute; top: 78%; width: 100%; z-index: 100; } #sdplusblackweek .claim_container { position: absolute; top: 0; left: 0; z-index: 70; } #sdplusblackweek .fgnd_container { position: absolute; top: 0; left: 0; z-index: 50; } @media (max-width: 767px) { #sdplusblackweek{ background-color: #fff; background-image: none; background-size: cover; background-repeat: no-repeat; background-position: top left; padding-top: 60px; padding-bottom: 0px ; } #sdplusblackweek .link_container{ top: 55%; } } /* ========================================================================== Content-Carousel ========================================================================== */ /* ========================================================================== Videoteaser-Section ========================================================================== */ #videoteasersection{ background-color: #56697b; background-image: url('https://sdf-1a81f.kxcdn.com/assets/img/SD_100proz_W_D.png'), url('https://sdf-1a81f.kxcdn.com/assets/img/header/boys_bgnd.webp'); background-size: 200px, cover; background-repeat: no-repeat, no-repeat; background-position: right bottom, 50% 75%; max-width: 100%; margin: 0px; padding: 120px 0px 78px 0px;} @media (max-width: 767px) { #videoteasersection{ background-image: url('https://sdf-1a81f.kxcdn.com/assets/img/header/boys_bgnd.webp'); background-size: cover; background-repeat: no-repeat; background-position: top left; margin: 0px; padding-top: 50px; padding-bottom: 10px; } } /* ========================================================================== Featured Section Start ========================================================================== */ .featured-box { margin-top: 15px; margin-bottom: 15px; } .featured-box .featured-icon { float: left; margin-top: 5px; } .featured-box .featured-icon i { font-size: 28px; text-align: center; float: left; margin-right: 25px; margin-bottom: 85px; display: block; } .featured-box .featured-content { padding-left: 40px; } .featured-box .featured-content h4 { font-size: 22px; margin-bottom: 10px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .featured-box .featured-content p { font-size: 13px; } /* ========================================================================== ANNOUNCEMENT ========================================================================== */ #announcementSection .image-wrapper { position: relative; background-color: #f2f2f2; overflow: hidden; border: 1px solid #f2f2f2; } #announcementSection .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; } #announcementSection .image-wrapper:hover .overlay { opacity: 1; } #announcementSection .image-wrapper img { transition: transform 0.4s ease; } #announcementSection .image-wrapper:hover { border: 1px solid #56adc0; background-color: #fff; } #announcementSection .image-wrapper:hover img { /* transform: scale(1.00); */ background: rgba(0, 0, 0, 0.3); } /* Angeglichen an den allgemeinen btn-petrol - vorher blieben die Knoepfe hier dunkel, waehrend der Rest der Seite auf hell mit Ring umgestellt wurde. */ #announcementSection .btn-petrol { background-color: #6fc5d3; color: #0a3a45; border-color: #00697a; } #announcementSection .btn-petrol:hover { background-color: #8ed6e1; color: #0a3a45; } #announcementSection .corner { position: absolute; z-index: 3; padding: 0.3rem 0.6rem; font-weight: 600; white-space: nowrap; } #announcementSection .top-left { top: 15px; left: 15px; } #announcementSection .top-right { top: 15px; right: 5px; } #announcementSection .bottom-left { bottom: 15px; left: 15px; } #announcementSection .bottom-left .tagstyle{ background-color: rgba(0, 0, 0, 0.35); } #announcementSection .bottom-right { bottom: 15px; right: 15px; } #announcementSection .badge-datum { background-color: #b40916; color: #fff; font-weight: 600; line-height: 1em; padding: 2px 8px 4px 8px; } #announcementSection .badge-tags { font-weight: 600; line-height: 1em; padding: 2px 8px 4px 8px; } #announcementSection .tag { text-transform: uppercase; background-color: rgba(60, 60, 60, 0.8); color: #fff; padding: 2px 4px; margin-left: 5px;} #announcementSection .linkdiv { background: #fff; box-shadow: 0px 0px 100px 60px rgba(0, 0, 0, 0.75); } #announcementSection{ background-color: #868686; margin: 0px; } #announcementSection h1, #announcementSection .h1, #announcementSection h2, #announcementSection p { color: #000;} #announcementSection .row{ padding: 10px 0px;} @media only screen and (max-width: 767px) { #announcementSection{ padding: 40px 0px 40px 0px; } #announcementSection h1, #announcementSection .h1{ font-size: 20px; padding: 0px; font-weight: bold; color: #152642; line-height: 16pt; } #announcementSection h2{ font-size: 16px; padding: 0px; color: #1e2c48; line-height: 14pt; } #announcementSection h3{ font-size: 14px; padding: 0px; font-weight: bold; color: #152642; line-height: 12pt; } #announcementSection p { font-size: 1em; padding: 0px; line-height: 1.5em; } #announcementSection .corner { white-space: normal !important; } #announcementSection h3 { white-space: normal !important; text-overflow: unset !important; } #announcementSection .linkdiv { box-shadow: 0px 0px 40px 20px rgba(0,0,0,0.4); } } @media only screen and (min-width : 768px) { #announcementSection{ padding: 100px 0px 40px 0px; } #announcementSection h1, #announcementSection .h1{ font-size: 24px; padding: 0px; font-weight: bold; color: #152642; line-height: 18pt; } #announcementSection h2{ font-size: 18px; padding: 0px; color: #1e2c48; line-height: 16pt; } #announcementSection h3{ font-size: 16px; padding: 0px; font-weight: bold; color: #152642; line-height: 14pt; } #announcementSection p { font-size: 14px; padding: 0px; line-height: 28px; } } @media only screen and (min-width : 992px) { #announcementSection h1, #announcementSection .h1{ font-size: 28px; padding: 0px; font-weight: bold; color: #152642; line-height: 23pt; } #announcementSection h2{ font-size: 20px; padding: 0px; color: #1e2c48; line-height: 18pt; } #announcementSection h3{ font-size: 18px; padding: 0px; font-weight: bold; color: #152642; line-height: 16pt; } #announcementSection p { font-size: 14px; padding: 0px; line-height: 26px; } } #announcementVideo .videoblock { padding: 10px 20px; margin-bottom: 0px; } #announcementVideo .videoblock img{ width: 100%; height: 100%;} #announcementVideo .videoblock p{ margin: 0px; padding: 0px; } #announcementVideo a{ display: block; padding: 10px; border: 1px solid lightgrey; transition: background-color 0.3s, border-color 0.3s;} #announcementVideo a:hover, #videoblock a:focus, #videoblock a:active{ display: block; background: #fff; color: #000; border-color: #56adc0; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } #announcementVideo .videoblock p.name { line-height: 15pt; font-weight: bold; color: #152642;} #announcementVideo .videoblock p.date { font-weight: normal; color: #1e2c48;} #announcementVideo .videoblock p.date .live{ font-weight: 600; color: #ff2828;} #announcementVideo .videoblock p.date .pay{ font-weight: 600; color: #ff2828;} #announcementVideo .videoblock p.date .free{ font-weight: 600; color: #6fc5d3; text-transform: uppercase;} #announcementVideo .videoblock .video-overlay .fileLength { position: absolute; bottom: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 2px 5px; border-radius: 3px; } #announcementVideo .videoblock .video-overlay .batch { position: absolute; top: 10px; right: 10px; color: white; padding: 2px 5px; border-radius: 3px; } #announcementVideo .videoblock .video-overlay .batch .next{ font-weight: 600; background-color: #56adc0; color: #fff; padding: 1px 5px; } #announcementVideo .videoblock .video-overlay .batch .free{ font-weight: 600; background-color: #309550; color: #fff; padding: 1px 5px; } #announcementVideo .videoblock .video-overlay .batch .live{ font-weight: 600; background-color: #b40916; color: #fff; padding: 1px 5px; } #announcementVideo .videoblock .video-overlay .premium { position: absolute; top: 10px; left: 10px; color: white; padding: 2px 5px; border-radius: 3px; } #announcementVideo .videoblock .video-overlay .channel { position: absolute; bottom: 5px; left: 10px; color: white; padding: 2px 5px; border-radius: 3px; font-size: 0.7em; font-weight: light; } .tag-cloud { word-wrap: break-word; overflow-wrap: break-word; white-space: normal; } .tag-cloud span { display: inline-block; margin-right: .25rem; margin-bottom: .25rem; } /* ========================================================================== Scooore Section Start ========================================================================== */ #scoooresection{ padding: 80px 0px; margin: 0px;} #scoooresection .scooore-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #scoooresection{ padding: 40px 0px; } #scoooresection .row{ padding: 0px; margin: 0px; } #scoooresection .scooore-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #scoooresection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #scoooresection{ padding: 80px 0px; } } /* ========================================================================== Transfermarkt Section Start ========================================================================== */ #tmtvsection{ background: #F6F6F6; padding: 80px 0px; } @media only screen and (max-width: 767px) { #tmtvsection{ padding: 40px 0px; } #tmtvsection .row{ padding: 0px; } } @media only screen and (min-width : 768px) { #tmtvsection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #tmtvsection{ padding: 80px 0px; } } /* ========================================================================== commenataro Section Start ========================================================================== */ @media only screen and (max-width: 767px) { } @media only screen and (min-width : 768px) { } @media only screen and (min-width : 992px) { } /* ========================================================================== K LEAGUE Section Start ========================================================================== */ @media only screen and (max-width: 767px) { } @media only screen and (min-width : 768px) { } @media only screen and (min-width : 992px) { } /* ========================================================================== Topspiel-Section Start ========================================================================== */ #topspielsection{ background: #fff; padding: 80px 0px;} #topspielsection .topspiel-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #topspielsection{ padding: 40px 0px; } #topspielsection .row{ padding: 0px; } #topspielsection .topspiel-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #topspielsection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #topspielsection{ padding: 80px 0px; } } /* ========================================================================== Dream Teams Section Start ========================================================================== */ #dreamteamssection{ background: #F6F6F6; padding: 80px 0px;} #dreamteamssection .topspiel-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #dreamteamssection{ padding: 40px 0px; } #dreamteamssection .row{ padding: 0px; } #dreamteamssection .topspiel-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #dreamteamssection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #dreamteamssection{ padding: 80px 0px; } } /* ========================================================================== Homage Section Start ========================================================================== */ #homagesection{ background: #fff; padding: 80px 0px;} #homagesection .topspiel-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #homagesection{ padding: 40px 0px; } #homagesection .row{ padding: 0px; } #homagesection .topspiel-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #homagesection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #homagesection{ padding: 80px 0px; } } /* ========================================================================== Life is A Pitch Section Start ========================================================================== */ #lifeisapitchsection{ background: #F6F6F6; padding: 80px 0px;} #lifeisapitchsection .topspiel-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #lifeisapitchsection{ padding: 40px 0px; } #lifeisapitchsection .row{ padding: 0px; } #lifeisapitchsection .topspiel-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #lifeisapitchsection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #lifeisapitchsection{ padding: 80px 0px; } } /* ========================================================================== Ikonen Section Start ========================================================================== */ #ikonensection{ background: #fff; padding: 80px 0px;} #ikonensection .topspiel-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #ikonensection{ padding: 40px 0px; } #ikonensection .row{ padding: 0px; } #ikonensection .topspiel-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #ikonensection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #ikonensection{ padding: 80px 0px; } } /* ========================================================================== Shortlist Section Start ========================================================================== */ #shortlistsection{ background: #F6F6F6; padding: 80px 0px;} #shortlistsection .topspiel-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #shortlistsection{ padding: 40px 0px; } #shortlistsection .row{ padding: 0px; } #shortlistsection .topspiel-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #shortlistsection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #shortlistsection{ padding: 80px 0px; } } /* ========================================================================== Football Greatest Section Start ========================================================================== */ #footballgreatestsection{ background: #fff; padding: 80px 0px;} #footballgreatestsection .topspiel-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #footballgreatestsection{ padding: 40px 0px; } #footballgreatestsection .row{ padding: 0px; } #footballgreatestsection .topspiel-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #footballgreatestsection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #footballgreatestsection{ padding: 80px 0px; } } /* ========================================================================== Sportreport Section Start ========================================================================== */ #sportreportsection{ background: #F6F6F6; padding: 80px 0px;} #sportreportsection .topspiel-intro-image img { width: 100%; } @media only screen and (max-width: 767px) { #sportreportsection{ padding: 40px 0px; } #sportreportsection .row{ padding: 0px; } #sportreportsection .topspiel-intro-image { margin-bottom: 20px; } } @media only screen and (min-width : 768px) { #sportreportsection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #sportreportsection{ padding: 80px 0px; } } /* ========================================================================== UEFA-Special Section Start ========================================================================== */ #uefasection{ background: #F6F6F6; padding: 80px 0px;} @media only screen and (max-width: 767px) { #uefasection{ padding: 40px 0px; } #uefasection .row{ padding: 0px; } } @media only screen and (min-width : 768px) { #uefasection{ padding: 60px 0px; } } @media only screen and (min-width : 992px) { #uefasection{ padding: 80px 0px; } } /* ========================================================================== Ads-Section Start ========================================================================== */ #teasersection{ background: #366b90; padding: 0px 0px; } #teasersection .row{ padding: 0px 0px; margin: 0px;} #teasersection .teasertile{ padding: 0px;} #teasersection .teasertile img{ width: 100%;} @media only screen and (max-width: 767px) { #teasersection .row{ padding: 0px; } #teasersection .teasertile{ padding: 0px; } } /* ========================================================================== Kariere-Section Start ========================================================================== */ #karrieresection{ background: #1e2c48; color: #fff; padding: 80px 0px; } #karrieresection #jobblock { color: #152642; background-color: #f2f2f2; border: 1px solid #152642;} #karrieresection #jobblock:hover { color: #152642; background-color: #ffffff; border: 1px solid #6fc5d3; } #karrieresection #jobblock h2{ font-size: 1.5em; } #karrieresection #jobblock h3{ font-size: 1.3em; } #karrieresection h1 { color: #fff; } #karrieresection .urllink { background-image: url('../img/others/file_download.png'); background-repeat: no-repeat; color: #fff; padding: 5px 0px 5px 30px;} #karrieresection .urllink:hover{ color: #6fc5d3;} #karrieresection .pdflink { background-image: url('../img/others/pdf_download.png'); background-repeat: no-repeat; color: #fff; padding: 5px 0px 5px 30px;} #karrieresection .pdflink:hover { color: #6fc5d3;} #karrieresection .row{ padding: 0px 0px; margin: 0px;} @media only screen and (max-width: 767px) { #karrieresection .row{ padding: 0px; } #karrieresection .teasertile{ padding: 0px !important; } } /* ========================================================================== CONNECT-Section Start ========================================================================== */ #connectSesction { background: rgb(30,44,72); background: linear-gradient(180deg, rgba(30,44,72,1) 0%, rgba(21,38,64,1) 100%); margin: 0px; padding: 100px 0px 50px 0px; } #connectSesction p, #connectSesction h1, #connectSesction h2{ color: #fff; } #user_code { text-transform: uppercase; /* Alle Buchstaben in Großbuchstaben umwandeln */ } @media only screen and (max-width: 767px) { #connectSesction .row{ padding: 5px 0px 5px 0px; } #connectSesction{ padding: 100px 0px 40px 0px; } #connectSesction h1{ font-size: 28px; padding: 0px; line-height: 32px;} #connectSesction h2{ font-size: 20px; padding: 0px; line-height: 26px; } #connectSesction h3 { font-size: 18px; padding: 0px; line-height: 26px; } #connectSesction p { font-size: 14px; padding: 0px; line-height: 26px; } } @media only screen and (min-width : 768px) { #connectSesction{ padding: 100px 0px 40px 0px; } #connectSesction h1{ font-size: 34px; padding: 0px; line-height: 38px;} #connectSesction h2{ font-size: 22px; padding: 0px; line-height: 28px; } #connectSesction h3 { font-size: 20px; padding: 0px; line-height: 22px; } #connectSesction p { font-size: 14px; padding: 0px; line-height: 26px; } } @media only screen and (min-width : 992px) { #connectSesction h1{ font-size: 44px; padding: 0px; line-height: 50px;} #connectSesction h2{ font-size: 22px; padding: 0px; line-height: 28px; } #connectSesction h3 { font-size: 20px; padding: 0px; line-height: 22px; } #connectSesction p { font-size: 14px; padding: 0px; line-height: 26px; } } /* ========================================================================== Plenigo-Section Start ========================================================================== */ #plenigopaywall{ background: #1e2c48; color: #fff; padding: 00px 0px 30px 0px; } #plenigopaywall { background-image: url('/assets/img/plenigo/paywall_bgnd.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center top; } #plenigopaywall h1, #plenigotest h2, #plenigotest h3, #plenigotest .container { color: #fff; } #plenigopaywall .container { padding: 20px; } @media only screen and (max-width: 767px) { .offer-1monthfree{ background-image: url("/assets/img/plenigo/20211118_Webseite_Gratis_Testmonat.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-1weekfree{ background-image: url("/assets/img/plenigo/20211221_Webseite_Gratis_Testwoche.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-25off{ background-image: url("/assets/img/plenigo/20211119_Webseite_Rabatt_Jahrespass.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-blackweek{ background-image: url("/assets/img/plenigo/20211127_Webseite_Rabatt_Blackweek2.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-maxdome{ background-image: url("/assets/img/plenigo/20251209_Webseite_Rabatt_maxdome.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-snowflakes{ background-image: url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 40% !important; background-repeat: repeat-x !important; background-position: top left !important; } .offer-christmas-snowflakes{ background-image: url("/assets/img/plenigo/20211216_Webseite_Rabatt_Christmas2.png"), url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 40%, 40% !important; background-repeat: no-repeat, repeat-x !important; background-position: top right !important; } .offer-25off-snowflakes{ background-image: url("/assets/img/plenigo/20211119_Webseite_Rabatt_Jahrespass.png"), url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 40%, 40% !important; background-repeat: no-repeat, repeat-x !important; background-position: top right !important; } #plenigopaywall{ padding: 00px 0px 10px 0px; } #plenigopaywall .row { padding: 10px 0px;} #plenigopaywall h1{ font-size: 24px; padding: 0px; line-height: 28px; } #plenigopaywall h2{ font-size: 20px; padding: 0px; line-height: 28px; } #plenigopaywall p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 768px) { .offer-1monthfree{ background-image: url("/assets/img/plenigo/20211118_Webseite_Gratis_Testmonat.png") !important; background-size: 20% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-1weekfree{ background-image: url("/assets/img/plenigo/20211221_Webseite_Gratis_Testwoche.png") !important; background-size: 20% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-25off{ background-image: url("/assets/img/plenigo/20211119_Webseite_Rabatt_Jahrespass.png") !important; background-size: 20% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-blackweek{ background-image: url("/assets/img/plenigo/20211127_Webseite_Rabatt_Blackweek2.png") !important; background-size: 20% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-maxdome{ background-image: url("/assets/img/plenigo/20251209_Webseite_Rabatt_maxdome.png") !important; background-size: 20% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-snowflakes{ background-image: url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 20% !important; background-repeat: repeat-x !important; background-position: top left !important; } .offer-christmas-snowflakes{ background-image: url("/assets/img/plenigo/20211216_Webseite_Rabatt_Christmas2.png"), url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 20%, 20% !important; background-repeat: no-repeat, repeat-x !important; background-position: top right !important; } .offer-25off-snowflakes{ background-image: url("/assets/img/plenigo/20211119_Webseite_Rabatt_Jahrespass.png"), url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 20%, 20%!important; background-repeat: no-repeat, repeat-x !important; background-position: top right !important; } #plenigopaywall{ padding: 0px 0px 20px 0px; } #plenigopaywall .row { padding: 10px 0px;} #plenigopaywall h1{ font-size: 34px; padding: 0px; line-height: 38px; } #plenigopaywall h2{ font-size: 28px; padding: 0px; line-height: 32px; } #plenigopaywall p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 992px) { .offer-1monthfree{ background-image: url("/assets/img/plenigo/20211118_Webseite_Gratis_Testmonat.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-1weekfree{ background-image: url("/assets/img/plenigo/20211221_Webseite_Gratis_Testwoche.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-25off{ background-image: url("/assets/img/plenigo/20211119_Webseite_Rabatt_Jahrespass.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-blackweek{ background-image: url("/assets/img/plenigo/20211127_Webseite_Rabatt_Blackweek2.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-maxdome{ background-image: url("/assets/img/plenigo/20251209_Webseite_Rabatt_maxdome.png") !important; background-size: 40% !important; background-repeat: no-repeat !important; background-position: top right !important; } .offer-snowflakes{ background-image: url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 40% !important; background-repeat: repeat-x !important; background-position: top left !important; } .offer-christmas-snowflakes{ background-image: url("/assets/img/plenigo/20211216_Webseite_Rabatt_Christmas2.png"), url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 40%, 40% !important; background-repeat: no-repeat, repeat-x !important; background-position: top right !important; } .offer-25off-snowflakes{ background-image: url("/assets/img/plenigo/20211119_Webseite_Rabatt_Jahrespass.png"), url("/assets/img/plenigo/20211216_WebseiteSnowFlakes.png") !important; background-size: 40%, 40% !important; background-repeat: no-repeat, repeat-x !important; background-position: top right !important; } #plenigopaywall{ padding: 0px 0px 30px 0px; } #plenigopaywall .row { padding: 10px 0px;} #plenigopaywall h1{ font-size: 34px; padding: 10px 0px; line-height: 38px; } #plenigopaywall h2{ font-size: 28px; padding: 10px 0px; line-height: 32px; } #plenigopaywall p { font-size: 14px; padding: 0px; line-height: 20px; } } div.product-chooser{ -ms-user-select: None; -moz-user-select: None; -webkit-user-select: None; user-select: None; cursor: auto; } div.product-chooser.disabled div.product-chooser-item{ zoom: 1;filter: alpha(opacity=60);opacity: 0.6;cursor: default; } div.product-chooser div.product-chooser-item{ background: #263a60; padding: 10px; border-radius: 6px;cursor: pointer;position: relative; border: 2px solid #efefef; margin-bottom: 15px; margin-left: 5px; margin-right: 5x; } div.product-chooser div.product-chooser-item.selected{ border: 2px solid #6fc5d3; outline: none !important; box-shadow: 0px 3px 22px 0px #7b7b7b; background: #56697b; padding: 8px; filter: alpha(opacity=100); opacity: 1; } div.product-chooser div.product-chooser-item > div .buy-form{ display: none; } div.product-chooser div.product-chooser-item > div .formdisabled{ pointer-events: none; opacity: .4; } div.product-chooser div.product-chooser-item.selected > div .buy-form{ display: block;} div.product-chooser div.product-chooser-item.selected > div .formdisabled{ pointer-events: none; opacity: .4; } div.product-chooser div.product-chooser-item img{ padding: 0; display: block; margin-left: auto; margin-right: auto; } div.product-chooser div.product-chooser-item h2.title{ display: block;margin: 10px 0 5px 0;font-weight: bold;font-size: 12px; } div.product-chooser div.product-chooser-item p.description{ font-size: 12px; text-align: justify; } div.product-chooser div.product-chooser-item h3.pricetag{ font-size: 30px; font-weight: 500; } //div.product-chooser div.product-chooser-item.selected h3.pricetag{ color: red; } div.product-chooser div.product-chooser-item input{ position: absolute;left: 0;top: 0;visibility:hidden; } /* ========================================================================== Benutzerkonto-Section Start ========================================================================== */ #benutzerkontosection{ background-color: #1e2c48; margin: 0px; padding: 150px 0px 150px 0px; } #benutzerkontosection h1, #benutzerkontosection h2, #benutzerkontosection h3, #benutzerkontosection .container { color: #fff; } /*#benutzerkontosection .container { padding: 20px 10px 20px 10px; }*/ @media only screen and (max-width: 767px) { #benutzerkontosection{ padding: 100px 0px 10px 0px; } /*#benutzerkontosection .row { padding: 10px 0px;}*/ #benutzerkontosection h1{ font-size: 24px; padding: 0px; line-height: 28px; } #benutzerkontosection h2{ font-size: 20px; padding: 0px; line-height: 28px; } #benutzerkontosection p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 768px) { #benutzerkontosection{ padding: 80px 0px 20px 0px; } /*#benutzerkontosection .row { padding: 10px 0px;}*/ #benutzerkontosection h1{ font-size: 34px; padding: 0px; line-height: 38px; } #benutzerkontosection h2{ font-size: 28px; padding: 0px; line-height: 32px; } #benutzerkontosection p { font-size: 14px; padding: 0px; line-height: 20px; } } @media only screen and (min-width : 992px) { #benutzerkontosection{ padding: 80px 0px 30px 0px; } /*#benutzerkontosection .row { padding: 10px 0px;}*/ #benutzerkontosection h1{ font-size: 34px; padding: 10px 0px; line-height: 38px; } #benutzerkontosection h2{ font-size: 28px; padding: 10px 0px; line-height: 32px; } #benutzerkontosection p { font-size: 14px; padding: 0px; line-height: 20px; } } /* ========================================================================== Plenigo ========================================================================== */ #ssosection{ background: #1e2c48; color: #fff; padding: 110px 0px 30px 0px; } /* Das Plenigo-Widget wird erst eingeblendet, wenn der Rahmen seinen Inhalt hat. Vorher ist er leer und nur 150 px hoch; Plenigo meldet die endgueltige Hoehe rund 1,3 Sekunden spaeter per postMessage. Ohne dieses Warten blendete ein leerer Kasten ein und der untere Teil des Formulars erschien nachtraeglich. Der Uebergang statt jQuerys fadeIn, weil der ueber die Grafikkarte laeuft und nicht stockt, wenn der Hauptthread beschaeftigt ist. */ .sso-bereich{ position: relative; transition: min-height .35s ease; } .sso-laden{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; transition: opacity .3s ease; } .sso-bereich.bereit .sso-laden{ opacity: 0; pointer-events: none; } .sso-widget{ opacity: 0; transition: opacity .45s ease; } .sso-bereich.bereit .sso-widget{ opacity: 1; } #plenigoCheckout #plenigoIFrameWrappercheckout #plenigoFramecheckout {margin-left: 0px !important;} #plenigoSSO #plenigoIFrameWrappercheckout #plenigoFramecheckout {margin-left: -15px !important;} #plenigoDiv{ background: #1e2c48 !important; margin: 40px 0px 0px 0px !important;} iframe{ overflow: hidden; } @media (min-width: 768px) { .collapse.dont-collapse-sm { display: block; height: auto !important; visibility: visible; } } #login_form_rememberMe, #login_form_rememberMe + label { display: none !important; } @media only screen and (max-width: 767px) { #ssosection{ padding: 80px 0px 30px 0px; } #ssosection .row{ padding: 0px; } #plenigoSSO {padding-left: 0px !important;} #plenigoCheckout #plenigoIFrameWrappercheckout #plenigoFramecheckout {margin-left: 0px !important;} #plenigoSSO #plenigoIFrameWrappercheckout #plenigoFramecheckout {margin-left: 0px !important;} } /* ========================================================================== Voucher-Section Start ========================================================================== */ #vouchersection{ background: #1e2c48; color: #fff; padding: 80px 0px; } #vouchersection h1 { color: #fff; } #vouchersection .row{ padding: 0px 0px; margin: 0px;} #voucher-form .voucher-code-input { font-size: 2em; color: #1e2c48; } .voucher-label { margin-bottom: 0px; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; color: #fff; line-height: 25px;} .form-group label { margin-bottom: 10px; } .text-muted { color: #fff !important; } @media only screen and (max-width: 767px) { #vouchersection .row{ padding: 0px; } #vouchersection .section-title{ font-size: 24px; padding: 0px; line-height: 28px; } #vouchersection .teasertile{ padding: 0px; } #voucher-form .voucher-code-input { font-size: 1em; color: #1e2c48; } } /* ========================================================================== Startseite-Content-Block ========================================================================== */ #startsiteContentSection .channelTile{ background: #eeeeee ; border: 1px solid #999; transition: background 0.3s ease, border 0.3s ease; display: flex; align-items: center; justify-content: center; padding-top: 56.25%; position: relative; } #startsiteContentSection .channelTile:hover { background: #f9f9f9 ; border: 1px solid #6fc5d3; } #startsiteContentSection .channelTile img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } @media only screen and (max-width: 767px) { #startsiteContentSection{ padding: 30px 0px 30px 0px; } #startsiteContentSection h1{ font-size: 2.5em; } #startsiteContentSection h2{ font-size: 1.8em; } } @media only screen and (min-width : 768px) { #startsiteContentSection{ padding: 60px 0px 40px 0px; } } @media only screen and (min-width : 992px) { #startsiteContentSection{ padding: 60px 0px 40px 0px; } } /* ========================================================================== Eredevise Section ========================================================================== */ #eredivise .content-container { padding: 0px 20px;} #eredivise .games-table img { height: 80px;} #eredivise .small-table img { height: 40px;} #eredivise .games-table { border: 1px solid lightgrey;} #eredivise .games-table td { line-height: 80px;} #eredivise .small-table td { line-height: 40px; border-top: none;} #eredivise .small-table th { border-top: none;} #eredivise .games-table th { color: #fff; background-color: #6fc5d3; border-color: #6fc5d3;} #eredivise .live { color: red; font-weight: bolder; text-transform: uppercase;} #eredivise .info-box { display: flex; flex-direction: column; justify-content: center; border: 1px solid lightgrey; padding: 15px;} #eredivise .info-box .small-title { text-align: center; padding-bottom: 15px;} #eredivise .info-box .big-image { width: 100%;} #eredivise .btn { width: 100%; background-color: #6fc5d3; padding: 5px 10px; line-height: 18px; font-weight: 400; color: #fff; font-size: 13px;} @media only screen and (max-width: 767px) { #eredivise .section-title{ font-size: 24px; padding: 0px; line-height: 28px; } #eredivise .section-subcontent { font-size: 14px; padding: 0px; line-height: 22px; } } @media only screen and (min-width : 768px) { #eredivise .section-title{ font-size: 30px; padding: 0px; line-height: 34px; } #eredivise .section-subcontent { font-size: 14px; padding: 0px; line-height: 24px; } } @media only screen and (min-width : 992px) { #eredivise .section-title{ font-size: 38px; padding: 0px; line-height: 48px; } #eredivise .section-subcontent { font-size: 14px; padding: 0px; line-height: 28px; } } /* ========================================================================== TVProgramm Section Start ========================================================================== */ #tvprogramm .section-title, #tvprogramm .section-subcontent{ color: #fff; } #tvprogramm{ background: #152642; padding: 20px 15px 10px 15px; width: 100%; } #tvprogramm .row{ padding: 0px; } #tvprogramm .owl-controls{ display: none; } #livematches { background: transparent; } #livematches .livematches-inner { background: #fff; text-align: center; padding: 10px 10px; border: 1px solid #ddd; margin: 5px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #livematches .livematches-inner:hover { } #livematches .livematches-inner h2 { font-size: 18px; line-height: 20px; font-weight: bold; } #livematches .livematches-inner h3{ font-size: 14px; line-height: 14px; } #livematches .livematches-inner p { font-size: 14px; line-height: 14px;} #livematches .livematches-inner a { line-height: 18px;} #livematches .livematches-inner h3 .live { color: #fff; background: #b40916; padding: 1px 5px; font-weight: 600; font-size: 0.8em; position: absolute; top: 10px; right: 10px; } #livematches .owl-pagination { margin-top: 10px; } #livematches .owl-pagination .owl-page span { border-radius: 4px; width: 8px; height: 8px; background: none; opacity: 0.5; } #livematches .owl-pagination .owl-page.active span { opacity: 1.0; } #livematches .owl-wrapper{ padding: 0px;} #livematches .owl-controls{ display: none;} #livematches .owl-pagination{ display: none;} @media only screen and (max-width: 767px) { #tvprogramm h2.section-title{ font-size: 24px; padding: 0px; line-height: 28px; } #tvprogramm p.section-subcontent { font-size: 14px; padding: 0px; line-height: 22px; } } @media only screen and (min-width : 768px) { #tvprogramm h2.section-title{ font-size: 30px; padding: 0px; line-height: 34px; } #tvprogramm p.section-subcontent { font-size: 14px; padding: 0px; line-height: 24px; } } @media only screen and (min-width : 992px) { #tvprogramm h2.section-title{ font-size: 38px; padding: 0px; line-height: 48px; } #tvprogramm p.section-subcontent { font-size: 14px; padding: 0px; line-height: 28px; } } /* ========================================================================== Channel Detail Section Start ========================================================================== */ #channelDetailSection{ background-color: #fff; margin: 0px; } #channelDetailSection h1, #channelDetailSection h2, #channelDetailSection h3, #channelDetailSection p { color: #000;} #channelDetailSection .row{ padding: 10px 0px;} @media only screen and (max-width: 767px) { #channelDetailSection{ padding: 40px 0px 40px 0px; } #channelDetailSection h1{ font-size: 1.6em; padding: 0px; line-height: 1.5em;} #channelDetailSection h2{ font-size: 1.4em; padding: 0px; line-height: 1.5em; } #channelDetailSection h3 { font-size: 1.2em; padding: 0px; line-height: 1.5em; } #channelDetailSection p { font-size: 1em; padding: 0px; line-height: 1.5em; } } @media only screen and (min-width : 768px) { #channelDetailSection{ padding: 100px 0px 40px 0px; } #channelDetailSection h1{ font-size: 34px; padding: 0px; line-height: 38px;} #channelDetailSection h2{ font-size: 30px; padding: 0px; line-height: 34px; } #channelDetailSection h3 { font-size: 26px; padding: 0px; line-height: 30px; } #channelDetailSection p { font-size: 14px; padding: 0px; line-height: 28px; } } @media only screen and (min-width : 992px) { #channelDetailSection h1{ font-size: 37px; padding: 0px; line-height: 50px;} #channelDetailSection h2{ font-size: 22px; padding: 0px; line-height: 28px; } #channelDetailSection h3 { font-size: 20px; padding: 0px; line-height: 22px; } #channelDetailSection p { font-size: 14px; padding: 0px; line-height: 26px; } } /* ========================================================================== Channel List Section Start ========================================================================== */ #channelListSection{background-color: #152642; margin: 0px; border-bottom: 5px solid #6fc5d3; } #channelListSection .channelTile { overflow: hidden; border-radius: 0.5rem; background: #c6c6c6; border: 1px solid #999; } #channelListSection .channelTile img { transition: transform 0.3s ease-in-out; } #channelListSection .channelTile:hover img { transform: scale(1.04); } #channelListSection .channelTile.active, #channelListSection .channelTile:hover, #channelListSection .channelTile:active { background: #fff; border: 1px solid #6fc5d3; cursor: pointer; } #channelListSection h1, #channelListSection h2, #channelListSection h3, #channelListSection p { color: #fff;} #channelListSection .row{ padding: 10px 0px;} @media only screen and (max-width: 767px) { #channelListSection{ padding: 80px 0px 40px 0px; } #channelListSection h1{ font-size: 1.6em; padding: 0px; line-height: 1.5em;} #channelListSection h2{ font-size: 1.4em; padding: 0px; line-height: 1.5em; } #channelListSection h3 { font-size: 1.em; padding: 0px; line-height: 1.5em; } #channelListSection p { font-size: 1em; padding: 0px; line-height: 1.5em; } } @media only screen and (min-width : 768px) { #channelListSection{ padding: 100px 0px 40px 0px; } #channelListSection h1{ font-size: 34px; padding: 0px; line-height: 38px;} #channelListSection h2{ font-size: 30px; padding: 0px; line-height: 34px; } #channelListSection h3 { font-size: 26px; padding: 0px; line-height: 30px; } #channelListSection p { font-size: 14px; padding: 0px; line-height: 28px; } } @media only screen and (min-width : 992px) { #channelListSection h1{ font-size: 37px; padding: 0px; line-height: 50px;} #channelListSection h2{ font-size: 22px; padding: 0px; line-height: 28px; } #channelListSection h3 { font-size: 20px; padding: 0px; line-height: 22px; } #channelListSection p { font-size: 14px; padding: 0px; line-height: 26px; } } /* ========================================================================== TVProgram Section Start ========================================================================== */ #tvprogramsection { background: #fff; } #tvprogramsection a{ color: #152642; } #tvprogramsection a:hover{ text-decoration: underline; color: #152642; } #tvprogramsection.blueInline{ background: #152642; padding: 0px;} #tvprogramsection.blueInline h2{ color: #fff;} #tvprogramsection.blueInline p.section-subcontent { color: #fff;} #tvprogramsection.specialBackground a{ color: #fff; } #tvprogramsection.specialBackground a:hover{ text-decoration: underline; color: #fff; } #tvprogramsection.specialBackground{ background: #152642; /* padding: 80px 0px 20px 0px; */} #tvprogramsection.specialBackground h2{ color: #fff;} #tvprogramsection.specialBackground p.section-subcontent { color: #fff;} #tvprogramsection .mix { padding: 0; } #tvprogramsection .mix { display: block; } #tvprogramsection .section-title { color: #0c0c0c; } #tvprogramsection .modal-dialog { max-width: 70%; } @media only screen and (max-width: 767px) { #tvprogramsection .modal-dialog { max-width: 95%;} #tvprogramsection{ padding: 40px 0px 40px 0px; } #tvprogramsection h2{ font-size: 1.6em; padding: 0px; line-height: 1em; } #tvprogramsection p { font-size: 14px; padding: 0px; line-height: 22px; } } @media only screen and (min-width : 768px) { #tvprogramsection{ padding: 100px 0px 40px 0px; } #tvprogramsection h2{ font-size: 2em; padding: 0px; line-height: 1em; } #tvprogramsection p { font-size: 1em; padding: 0px; line-height: 1.5em; } } @media only screen and (min-width : 992px) { #tvprogramsection h2{ font-size: 2.5em; padding: 0px; line-height: 1em; } #tvprogramsection p { font-size: 1em; padding: 0px; line-height: 1.5em; } } #tvprogram {background-color: transparent; } #tvprogram .tvprogram-item figure figcaption:hover{ background: rgba(153, 204, 51, 0.9); } .tvprogram-item:hover .tvprogram-content, .tvprogram-item:hover .tvprogram-content:before { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} .tvprogram-item:hover .sup-title { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1;} .tvprogram-item:hover .sup-description { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);} .tvprogram-item:hover .sup-link .right-link, .tvprogram-item:hover .sup-link .left-link { opacity: 1; webkit-transform: translateY(0px); transform: translateY(0px);} #tvprogram-list { margin-top: 15px; display: inline-block;} .tvprogram-img { overflow: hidden; display: block; position: relative;} /* height: auto ergaenzt: die Kacheln tragen width="330" height="180" im Markup. Ohne diese Zeile wirkt das height-Attribut wie height:180px, waehrend die Breite aus der Spalte kommt - das Logo wurde dadurch auf 190x180 gequetscht statt 330x180. Mit height:auto liefern die Attribute nur noch das Seitenverhaeltnis. */ .tvprogram-img img { width: 100%; height: auto;} .tvprogram-img img:hover { transform: scale(1.1); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -0-transition: all 0.3s ease; transition: all 0.3s ease;} .tvprogram-content { width: 100%; position: absolute; height: 100%; opacity: 0; top: 0; -webkit-transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);} .tvprogram-content:before { background-color: rgba(255, 255, 255, 0.8); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ''; position: absolute; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 400ms ease; transition: all 400ms ease;} /* ========================================================================== TVEmpfang Section Start ========================================================================== */ #tvempfang { background: #fff;} #tvempfang a{ color: #152642; } #tvempfang a:hover{ color: #152642; } #tvempfang.specialBackground{ background: #152642; /* padding: 80px 0px 20px 0px; */ } #tvempfang.specialBackground h2{ color: #fff;} #tvempfang.specialBackground p.section-subcontent { color: #fff;} #tvempfang .mix { padding: 0; display: none;} #tvempfang .section-title { color: #0c0c0c; } #tvempfang .modal-dialog { max-width: 70%; color: #0c0c0c;} @media only screen and (max-width: 767px) { #tvempfang .modal-dialog { max-width: 95%;} #tvempfang{ padding: 40px 0px 40px 0px; } #tvempfang h2{ font-size: 1.6em; padding: 0px; line-height: 1em; } #tvempfang p { font-size: 14px; padding: 0px; line-height: 22px; } } @media only screen and (min-width : 768px) { #tvempfang{ padding: 100px 0px 40px 0px; } #tvempfang h2{ font-size: 2em; padding: 0px; line-height: 1em; } #tvempfang p { font-size: 1em; padding: 0px; line-height: 1.5em; } } @media only screen and (min-width : 992px) { #tvempfang h2{ font-size: 2.5em; padding: 0px; line-height: 1em; } #tvempfang p { font-size: 1em; padding: 0px; line-height: 1.5em; } } #tvempfangitems{background-color: #fff;} #tvempfangitems .tvempfang-item figure figcaption:hover{ background: rgba(153, 204, 51, 0.9);} .tvempfang-item:hover .tvempfang-content, .tvempfang-item:focus .tvempfang-content, .tvempfang-item:focus .tvempfang-content:before , .tvempfang-item:hover .tvempfang-content:before { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} .tvempfang-item:focus .sup-title, .tvempfang-item:hover .sup-title { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1;} .tvempfang-item:focus .sup-description, .tvempfang-item:hover .sup-description { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);} .tvempfang-item:focus .sup-link .right-link, .tvempfang-item:focus .sup-link .left-link, .tvempfang-item:hover .sup-link .right-link, .tvempfang-item:hover .sup-link .left-link { opacity: 1; webkit-transform: translateY(0px); transform: translateY(0px);} .controls { text-align: center; padding: 20px;} .controls a:hover {cursor: pointer; } #tvempfang-list { margin-top: 15px; display: inline-block;} .tvempfang-img { overflow: hidden; display: block; position: relative;} .tvempfang-img img { width: 100%;} .tvempfang-img img:hover { transform: scale(1.1); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -0-transition: all 0.3s ease; transition: all 0.3s ease;} .tvempfang-content { width: 100%; position: absolute; height: 100%; opacity: 0; top: 0; -webkit-transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);} .tvempfang-content:before { background-color: rgba(255, 255, 255, 0.8); top: 15px; left: 15px; bottom: 15px; right: 15px; content: ''; position: absolute; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 400ms ease; transition: all 400ms ease;} /* ========================================================================== Kommentatoren Section Start ========================================================================== */ #kommentatorensection { background: #F6F6F6; color: #0c0c0c; padding: 80px 0px; margin: 0px;} #kommentatorensection .kommentatoren-inner { background-color: #fff; font-weight: 300; text-align: center; padding: 10px 30px; border: 1px solid #ddd; margin: 5px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} #kommentatorensection .kommentatoren-inner:hover {} #kommentatorensection .kommentatoren-images { margin-bottom: 20px;} #kommentatorensection .kommentatoren-images img { width: 90px; height: 90px; margin: 0 auto; padding: 5px; box-shadow: 0px 0px 3px #ddd;} #kommentatorensection .kommentatoren-content p { line-height: 25px; margin-bottom: 15px;} #kommentatorensection .kommentatoren-footer { font-size: 12px; font-weight: 600; color: #666;} #kommentatorensection .kommentatoren-footer i { margin-right: 5px;} #kommentatorensection .kommentatoren-footer a { color: #aaa; margin-left: 3px; font-weight: 300;} #kommentatorensection .kommentatoren-footer a:hover { color: #aaa; } #kommentatorensection .owl-pagination { margin-top: 30px;} #kommentatorensection .owl-pagination .owl-page span { border-radius: 4px; width: 8px; height: 8px; background: none; opacity: 0.5;} #kommentatorensection .owl-pagination { display: block;} #kommentatorensection .owl-pagination .owl-page.active span { opacity: 1.0;} #kommentatorensection .owl-pagination .owl-page span { border: 1px solid #666;} #kommentatorensection .owl-pagination .owl-page.active span { background: #666 none repeat scroll 0 0;} @media only screen and (max-width: 767px) { #kommentatorensection { padding: 40px 0px; } #kommentatorensection .row{ padding: 0px;} #kommentatorensection .modal-dialog { max-width: 95%; } #kommentatorensection h2.section-title{ font-size: 24px; padding: 0px; line-height: 28px; } #kommentatorensection p.section-subcontent { font-size: 14px; padding: 0px; line-height: 22px; } } @media only screen and (min-width : 768px) { #kommentatorensection h2.section-title{ font-size: 30px; padding: 0px; line-height: 34px; } #kommentatorensection p.section-subcontent { font-size: 14px; padding: 0px; line-height: 24px; } } @media only screen and (min-width : 992px) { #kommentatorensection h2.section-title{ font-size: 38px; padding: 0px; line-height: 48px; } #kommentatorensection p.section-subcontent { font-size: 14px; padding: 0px; line-height: 28px; } } /* ========================================================================== CALENDER STYLES (ical) ========================================================================== */ #calendarForm .calendar-icon-span { background-color: #6fc5d3; color: #fff; border-radius: 0; border: none; } #calendarForm .alarm-span {background-color: #6fc5d3; color: #fff; border-radius: 0; border: none; line-height: 30px; width:100%; font-family: inherit; } #calendarForm .alarm-label { font-size: 13px; } #calendarForm .alarm-label{ margin-bottom: 0px !important;} #calendarForm .calendar-select { font-size: 16px; width: 100%; cursor: pointer; border-radius:0; } #calendarForm input, textarea, select { font-size: 16px; } #calendarForm input[type="checkbox"].icon-checkbox{ display:none;} #calendarForm input[type="checkbox"].icon-checkbox+label .unchecked{ display:inline-block;} #calendarForm input[type="checkbox"].icon-checkbox+label .checked{ display:none;} #calendarForm input[type="checkbox"].icon-checkbox:checked+ label .unchecked{ display:none} #calendarForm input[type="checkbox"].icon-checkbox:checked+ label .checked{ display:inline-block} #blog { background: #F6F6F6;} #blog .blog-item-wrapper { background: #fff; box-shadow: 0 1px 1px #ddd; padding: 15px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;} #blog .blog-item-wrapper:hover { box-shadow: 0 0 40px #ddd;} #blog .blog-item-img { position: relative;} #blog .blog-item-img img { width: 100%;} #blog .blog-item-text { margin-top: 15px;} #blog .blog-item-text h3 { font-size: 18px; line-height: 30px;} #blog .blog-item-text h3 a { color: #555;} #blog .blog-item-text h3 a:hover {} #blog .blog-item-text .blog-one-footer { padding: 10px 0px 0px; border-top: 1px dashed #ddd;} #blog .blog-item-text .blog-one-footer a { font-size: 12px; padding-right: 15px; color: #999;} #blog .blog-item-text .blog-one-footer a:hover {} #blog .blog-item-text .blog-one-footer i { margin-right: 5px;} #team .team-item figure { position: relative; overflow: hidden; width: 100%; margin: 0;} #team .team-item figure img { width: 100%; height: auto;} #team .team-item figure figcaption { height: 100%; position: absolute; top: 0; background: rgba(0, 0, 0, 0.85); opacity: 0; width: 100%; -webkit-transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);} #team .team-item figure figcaption .details { position: absolute; top: 10%;} #team .team-item figure figcaption .content-white { font-size: 13px; text-align: center; color: #FFF; margin: 0 auto; line-height: 18px; width: 65%; -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;} #team .team-item figure figcaption .orange-line {margin: 12px auto 6px; width: 0px; height: 1px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease;} #team .team-item figure:hover figcaption { opacity: 1;} #team .team-item figure:hover .orange-line { width: 62px;} #team .team-item figure:hover figcaption .content-white { -webkit-transform: translateY(0px); transform: translateY(0px);} #team .team-item figure:hover .social a { -webkit-transform: translateY(0px); transform: translateY(0px);} #team .team-item .social { text-align: center; margin-top: 15px;} #team .team-item .social .facebook,#team .team-item .social .twitter,#team .team-item .social .google-plus { font-size: 14px; line-height: normal; outline: none; border-radius: 50%; color: #fff; width: 42px; height: 42px; line-height: 42px; text-align: center; display: inline-block; -webkit-transform: translateY(50px); transform: translateY(50px); margin-right: 5px;} #team .team-item .social .facebook { -webkit-transition: all 400ms ease; transition: all 400ms ease;} #team .team-item .social .twitter { -webkit-transition: all 500ms ease; transition: all 500ms ease;} #team .team-item .social .google-plus { -webkit-transition: all 600ms ease; transition: all 600ms ease;} #team .team-item .social a:hover { background: transparent; } #team .info { background: #F6F6F6; padding: 15px 0 1px; text-align: center;} #team .info h2 { color: #000; font-size: 18px;} #team .info p { color: #000; font-size: 12px; font-weight: 300; line-height: 22px; text-transform: uppercase;} .orange-line { margin: 12px auto 6px; width: 52px; height: 1px;} #team-block-2 .team-member { padding-bottom: 15px; margin-top: 20px; border-bottom: 5px solid transparent; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; background: #666; border-bottom: 4px solid transparent;} #team-block-2 .team-member .face { position: relative; width: 100%; overflow: hidden;} #team-block-2 .team-member .face img { width: 100%; height: auto;} #team-block-2 .team-member .member-info { text-align: center; padding: 24px;} #team-block-2 .team-member .member-info h3 { line-height: 30px; font-size: 30px; color: #fff;} #team-block-2 .team-member .member-info .position { color: #999; font-size: 16px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);} #team-block-2 .team-member .member-info .social-team { margin-top: 15px;} #team-block-2 .team-member .member-info .social-team a { color: #3D566E; margin: 0 4px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } #team-block-2 .team-member .member-info .social-team a i { color: #ffffff; padding: 7px; background: transparent; font-size: 18px; line-height: 28px; border: 1px solid #fff; width: 42px; height: 42px; border-radius: 50%; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; } #team-block-2 .team-member .member-info .desc { margin-top: 15px; color: #ecf0f1; } #team-block-2 .team-member .member-info .social .fa-facebook:hover { background: #3b5998; color: #fff; } #team-block-2 .team-member .member-info .social .fa-twitter:hover { background: #00CAFB; color: #fff; } #team-block-2 .team-member .member-info .social .fa-google-plus:hover { background: #D23A1D; color: #fff; } #team-block-2 .team-member .member-info .social .fa-linkedin:hover { background: #007bb6; color: #fff; } #team-block-2 .team-member:hover { background: #777; } #subscription .subscription-form .form-control { height: 60px; font-size: 24px; color: #999; } #subscription .subscription-form .btn { padding: 18px; } #error-404 { background: #ECF0F1; padding: 36px; } #error-404 h1 { font-size: 120px; } #error-404 h3 { font-size: 40px; margin-bottom: 30px; } #content { padding-top: 30px; padding-bottom: 30px; min-height: 600px; } #contact .contact-info-wrapper { margin-top: -60px; } #contact .contact-info-wrapper .contact-item-wrapper i { padding: 15px; width: 64px; height: 64px; border-radius: 50%; color: #fff; } #contact .map { position: relative; } #contact .contact-info { background: #666; color: #fff; padding: 30px 0; } #contact .contact-form-wrapper { background: url(../img/backgrounds/contact-form-bg.jpg); background-size: cover; } #contact .form-control { margin-bottom: 45px; background: transparent; color: #fff; } #contact2 .contact-info-wrapper { margin-top: -10px; } #contact2 .contact-info-wrapper .contact-item-wrapper { padding: 15px 30px; } #contact2 .contact-info-wrapper .contact-item-wrapper i { color: #fff; float: left; padding: 8px 15px; font-size: 24px; } #contact2 .contact-info-wrapper .contact-item-wrapper h4 { line-height: 40px; color: #FFF; font-size: 16px; font-family: "Roboto", sans-serif; font-weight: 300; } #contact2 .form-control { margin-bottom: 30px; } footer { background: #1f3f5d; color: #fff;} footer .small-title { margin-bottom: 15px; color: #fff;} footer ul { padding: 0; margin: 0; list-style: none;} footer ul li { line-height: 25px;} footer ul li a { color: #999;} footer ul li.tweet { margin-bottom: 15px;} footer ul li.tweet .fa-twitter { padding: 5px; color: #fff; border-radius: 100%; width: 24px; height: 24px;} footer ul li.tweet .tweet-date { font-size: 12px; font-style: italic; color: #bdc3c7;} footer .plain-flicker-gallery { margin-right: -5px; margin-left: -5px;} footer .plain-flicker-gallery a { display: inline-block; width: 32%; font-size: 0px; padding: 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -0-transition: all 0.3s ease; transition: all 0.3s ease;} footer .plain-flicker-gallery a:hover { opacity: 0.7;} footer .plain-flicker-gallery a img { width: 100%;} footer .contact-us .form-control { color: #999; font-size: 14px; background: #fff; border-radius: 0px; border: 1px solid transparent; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -0-transition: all 0.3s ease; transition: all 0.3s ease;} footer #copyright { background: #1e2c48; color: #fff;} footer #copyright .row { padding: 15px 0;} footer #copyright .copyright-text,footer #copyright .nav-inline { margin-top: 15px;} footer #copyright .nav-link{ color: #fff; } footer #copyright .nav-link:hover, footer #copyright .nav-link:active { color: #6fc5d3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -0-transition: all 0.3s ease; transition: all 0.3s ease; } .social-footer a .bi{ font-size: 25pt; height: 55px; line-height: 55px; margin: 10px; width: 55px; color: #6fc5d3; text-align: center;} .social-footer a .bi:hover{ transform: scale(1.2); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -0-transition: all 0.3s ease; transition: all 0.3s ease; } @media only screen and (max-width: 767px) { .social-footer a .bi{ font-size: 20pt; width: 45px; } } .scroll-top:hover{ background: #9C3; border-color: #9C3;} /* BUTTONS */ /* Helle Flaeche, Abgrenzung ueber den Rahmen: #007b8f war zu dunkel, aber heller allein reisst den Kontrast gegen die weisse Seite. Der Rahmen #00697a steht mit 6,36:1 gegen Weiss, die Schrift mit 6,22:1 auf der Flaeche. */ .btn.btn-petrol{ color: #0a3a45 !important; background-color: #6fc5d3; border-color: #00697a; box-shadow: inset 0 0 0 1px #00697a !important; transition: background-color 0.3s ease; } .btn.btn-petrol.focus, .btn.btn-petrol:focus { color: #0a3a45 !important; background-color: #8ed6e1 !important; border-color: #00697a !important; outline: none !important; box-shadow: inset 0 0 0 1px #00697a !important;} .btn.btn-petrol.hover, .btn.btn-petrol:hover { color: #0a3a45 !important; background-color: #8ed6e1 !important; border-color: #00697a !important; outline: none !important; box-shadow: inset 0 0 0 1px #00697a !important;} .btn.btn-petrol.active, .btn.btn-petrol:active { color: #0a3a45 !important; background-color: #4fb3c4 !important; border-color: #00697a !important; outline: none !important; box-shadow: inset 0 0 0 1px #00697a !important; } .btn.btn-outline-petrol{ color: #fff !important; background-color: transparent; border-color: #6fc5d3; transition: background-color 0.3s ease; } .btn.btn-outline-petrol.focus, .btn.btn-outline-petrol:focus { color: #152642 !important; background-color: #9ad6e0 !important; border-color: #8bd0db !important; outline: none !important; box-shadow: none !important;} .btn.btn-outline-petrol.hover, .btn.btn-outline-petrol:hover { color: #152642 !important; background-color: #9ad6e0 !important; border-color: #8bd0db !important; outline: none !important; box-shadow: none !important;} .btn.btn-outline-petrol.active, .btn.btn-outline-petrol:active { color: #152642 !important; background-color: #9ad6e0 !important; border-color: #8bd0db !important; outline: none !important; box-shadow: none !important; } /* Gleicher Weg wie btn-petrol - die beiden sind angeglichen. */ .btn.btn-danger{ color: #0a3a45 !important; background-color: #6fc5d3; border-color: #00697a; box-shadow: inset 0 0 0 1px #00697a !important; transition: background-color 0.3s ease; } .btn.btn-danger.focus, .btn.btn-danger:focus { color: #0a3a45 !important; background-color: #8ed6e1 !important; border-color: #00697a !important; outline: none !important; box-shadow: inset 0 0 0 1px #00697a !important;} .btn.btn-danger.hover, .btn.btn-danger:hover { color: #0a3a45 !important; background-color: #8ed6e1 !important; border-color: #00697a !important; outline: none !important; box-shadow: inset 0 0 0 1px #00697a !important;} .btn.btn-danger.active, .btn.btn-danger:active { color: #0a3a45 !important; background-color: #4fb3c4 !important; border-color: #00697a !important; outline: none !important; box-shadow: inset 0 0 0 1px #00697a !important; } .btn.btn-blackweek{ color: #fff !important; background-color: #000; border-color: #fff; outline: none; box-shadow: none; } .btn.btn-blackweek.focus,.btn.btn-blackweek:focus { color: #fff; background-color: #000; border: 1px solid #fff; outline: none; box-shadow: none; } .btn.btn-blackweek:hover { color: #fff; background-color: #000; border: 1px solid #fff; outline: none; box-shadow: none; } .btn.btn-blackweek.active, .btn.btn-blackweek:active { color: #fff; background-color: #000; border: 1px solid #fff; outline: none; box-shadow: none; } .btn.btn-blackweek.active.focus,.btn.btn-blackweek.active:focus,.btn.btn-blackweek.active:hover,.btn.btn-blackweek:active.focus,.btn.btn-blackweek:active:focus,.btn.btn-blackweek:active:hover { color: #fff; background-color: #6fc5d3; border: 1px solid #fff; outline: none; box-shadow: none; } .btn-blackweek:not(:disabled):not(.disabled).active, .btn-blackweek:not(:disabled):not(.disabled):active, .show > .btn-blackweek.dropdown-toggle { color: #111 !important; background-color: #fff; border-color: #111; } .btn.btn-blackweek_reverse{ color: #000 !important; background-color: #fff; border-color: #fff;} .btn.btn-blackweek_reverse.focus,.btn.btn-blackweek_reverse:focus { color: #000; background-color: #fff; border-color: #fff; outline: none; box-shadow: none;} .btn.btn-blackweek_reverse:hover { color: #000; background-color: #fff; border-color: #fff; outline: none; box-shadow: none;} .btn.btn-blackweek_reverse.active, .btn.btn-blackweek_reverse:active { color: #000; background-color: #fff; border-color: #fff; outline: none; } .btn.btn-blackweek_reverse.active.focus,.btn.btn-blackweek_reverse.active:focus,.btn.btn-blackweek_reverse.active:hover,.btn.btn-blackweek_reverse:active.focus,.btn.btn-blackweek_reverse:active:focus,.btn.btn-blackweek_reverse:active:hover { color: #000; background-color: #fff; border-color: #fff;outline: none;box-shadow: none;} .btn-blackweek_reverse:not(:disabled):not(.disabled).active, .btn-blackweek_reverse:not(:disabled):not(.disabled):active, .show > .btn-blackweek_reverse.dropdown-toggle { color: #fff !important; background-color: #000; border-color: #fff; } .page-header .page-header-inner:before{ background-color: #90BF34 ; opacity: 0.2; } /***************************************** ** Mobile menu **********************/ .slicknav_nav{ max-height: 500px;} .slicknav_btn{ border: none; background-color: transparent; margin: 16px 0px;} .slicknav_nav a:hover, .slicknav_open .active{ color: #24385f; } .slicknav_menu .slicknav_icon-bar{ background-color: #24385f; } .slicknav_menu .slicknav_btn:active .slicknav_icon-bar, .slicknav_menu .slicknav_btn:focus .slicknav_icon-bar, .slicknav_menu .slicknav_btn:hover .slicknav_icon-bar{ background-color: #152642; } .tparrows.preview2:hover:after{ color: #152642; } #default-tab .nav-tabs > li > a.active , #default-tab .nav-tabs > li a.active:focus, #default-tab .nav-tabs > li a.active:hover { color: #152642; background-color: blue;} #default-tab ul.nav-tabs > li a.active::before { background-color: #152642; } /* New Css */ #round-tab ul.nav-tabs { border-bottom: 1px solid #9C3; } #round-tab ul li a.active { border-left: 1px solid #9C3; border-right: 1px solid #9C3; border-top: 1px solid #9C3; color: #9C3; } #vertical-tab ul.nav-tabs li a.active { border-bottom: 3px solid #9C3; } #vertical-tab ul.nav-tabs li a.active > .fa { color: #9C3; } #tab-with-icon .nav-tabs li a:hover i, #tab-with-icon .nav-tabs li a:focus, #tab-with-icon .nav-tabs li a.active i { background: #9C3 none repeat scroll 0 0; } .btn-outline { border-color: #9C3; color: #9C3; } .btn-outline:hover { background: #9C3; } .progress-bar { background: #9C3; } i.icon-default { color: #9C3; } i.icon-round { background-color: #fff; } i.icon-round-border { border: 2px solid #6fc5d3; color: #6fc5d3; } i.icon-box { background-color: #fff; } i.icon-box-border { border: 2px solid #6fc5d3; color: #6fc5d3; } .form-control:focus { border-color: #152642 ; } h2.widget-title { color: #9C3; } .widget.tag-cloud a { background: #9C3; } .sidebar-area .search-bar button i.fa { color: #9C3; } .roof-menu ul li.active a { color: #9C3; } .roof-social-icons a i.fa:hover { background: #9C3; } .service2-single-service .fa { background: #9C3 none repeat scroll 0 0; } .top_search_icon{ color: #9C3; } #carousel-area .carousel-indicators li:hover, #carousel-area .carousel-indicators li.active { background: #6fc5d3 none repeat scroll 0 0; } .service-item .icon-wrapper i { color: #9C3; } .split .details-list h3 { color: #9C3; } .featured-box .featured-icon i { color: #9C3; } .top_search_con input:focus { border: 1px solid #9C3; } /*Short code icons style*/ i.icon-default { font-size: 50px; margin-bottom: 30px; margin-right: 30px; vertical-align: middle; } i.icon-round { border-radius: 100%; color: #fff; font-size: 50px; height: 100px; line-height: 100px; margin-bottom: 13px; margin-right: 13px; text-align: center; vertical-align: middle; width: 100px; } i.icon-round-border { border-radius: 100%; font-size: 45px; height: 100px; line-height: 100px; margin-bottom: 12px; margin-right: 12px; text-align: center; vertical-align: middle; width: 100px; } i.icon-box { border-radius: 4px; color: #fff; font-size: 45px; height: 100px; line-height: 100px; margin-bottom: 12px; margin-right: 12px; text-align: center; vertical-align: middle; width: 100px; } i.icon-box-border { border-radius: 4px; font-size: 45px; height: 100px; line-height: 100px; margin-bottom: 12px; margin-right: 12px; text-align: center; vertical-align: middle; width: 100px; } i.icon-xs { font-size: 16px !important; height: 30px !important; line-height: 30px !important; margin-bottom: 7px !important; margin-right: 7px !important; width: 30px !important; } i.icon-sm { font-size: 27px !important; height: 50px !important; line-height: 50px !important; margin-bottom: 14px !important; margin-right: 14px !important; width: 50px !important; } i.icon-md { font-size: 35px !important; height: 75px !important; line-height: 75px !important; margin-bottom: 14px !important; margin-right: 14px !important; width: 75px !important; } i.icon-lg { font-size: 50px !important; height: 100px !important; line-height: 100px !important; margin-bottom: 13px !important; margin-right: 13px !important; width: 100px !important; } #image-carousel .item img { height: 200px; width: 250px; } /* Single portfolio */ .single-portfolio-area .single-portfolio-image img { width: 100%; } .portfolio-meta ul , .portfolio-controls ul { list-style: outside none none; padding-left: 0; } .portfolio-meta ul li { margin: 10px 0; } .portfolio-meta ul li span { display: inline-block; font-size: 12px; font-weight: 600; text-decoration: underline; text-transform: uppercase; width: 130px; text-decoration-style: double; } .portfolio-controls ul li a.btn { padding: 10px 75px; } .portfolio-controls ul li a.btn i.fa { font-size: 37px; } /* Blog Post Section */ .blog-post-wrapper { border: 1px solid #eee; margin-bottom: 50px; } .blog-post-wrapper .format-video iframe { min-height: 350px; width: 100%; } .blog-post-wrapper .format-audio iframe { height: 200px; width: 100%; } .author-info , .blog-post-content { padding: 20px; } .tag-posted-in li a { color: #8F8F8F; } .tag-posted-in li i.fa { color: #8F8F8F; padding-right: 3px; } span.published-time { font-size: 12px; } span.published-time i.fa { margin-right: 5px; } .featured-wrapper img { width: 100%; height: 350px; } .sidebar-area .widget { margin-bottom: 60px; } .sidebar-area .search-bar { position: relative; } .sidebar-area .search-bar .form-control { border-radius: 0; color: #333 !important; font-size: 13px; height: 46px; } .sidebar-area .search-bar button { background-color: transparent; border: 0 none; height: 46px; position: absolute; right: 0; top: 0; width: 40px; } .sidebar-area .search-bar button i.fa { } .sidebar-area .search-bar button .fa { color: #333; } h2.widget-title { font-size: 20px; font-weight: 600; text-transform: uppercase; margin-bottom: 20px; } .widget ul { list-style: outside none none; padding-left: 0; } .widget.popular-post ul li { margin-bottom: 20px; } .widget.popular-post h4 { font-size: 16px; } .category-menu a { color: #333; font-size: 15px; transition: all 0.2s; } .category-menu a .fa { padding-right: 5px; transition: all 0.2s; } .category-menu li { border-bottom: 1px solid #333; padding: 10px 0; } .category-menu a:hover .fa { padding-right: 10px; transition: all 0.2s; } .widget.tag-cloud li { float: left; margin-bottom: 5px; margin-right: 5px; } .widget.tag-cloud a { color: #fff; display: block; font-size: 10px; font-weight: 600; line-height: 28px; padding: 0 11px; transition: all 0.3ms ease-in-out; } .widget.tag-cloud a:hover { opacity: 0.8; transition: all 0.3ms ease-in-out; } .widget.subscribe-widget .form-control { font-size: 14px; height: 42px; padding: 10px; width: 255px; } .widget-ad img { width: 100%; } .blog-post blockquote { margin: 40px 0; } .blog-post h3 { margin-top: 30px; } .blog-post > p { line-height: 29px; } .blog-post ul li { font-size: 15px; padding: 6px 0; font-weight: 600; } .blog-post ol li { font-size: 15px; padding: 6px 0; font-weight: 600; } #copyright ul li.nav-item { padding-right: 20px; text-transform: capitalize; } .nav-link{ padding: 0px; } .no-pdl { padding-left: 0 !important; } .comments-area ul { padding-left: 0; } .comments-area .media { margin-top: 40px; } .comments-area .media-body { padding-left: 10px ; } .comment-author span { padding-left: 5px; } .new-comment .form-group .form-control { background: #f2f2f2 none repeat scroll 0 0; border-radius: 0; color: #333 !important; font-size: 15px; padding: 12px; } /* Call to action */ .cta-section { background: url(../img/backgrounds/cta-bg.jpg) scroll center center; width: 100%; position: relative; } .cta-section::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background-color: rgba(51, 51, 51, 0.9); } .cta-area { display: table; width: 100%; height: 150px; } .cta-content { display: table-cell; vertical-align: middle; } .cta-content h2 { color: #fff; font-size: 38px; font-weight: 400; line-height: 38px; } .cta-content p { color: #fff; font-size: 18px; line-height: 28px; padding-top: 10px; } .cta-content .btn { font-size: 16px; margin-top: 15px; padding: 13px 24px; text-transform: uppercase; } .page-header-section { background: url(../img/backgrounds/testimonial-bg.jpg); width: 100%; } .page-header-area { display: table; height: 80px; width: 100%; } .page-header-content { display: table-cell; vertical-align: middle; } .page-header-content h2 { color: #fff; font-size: 36px; font-weight: 600; text-transform: capitalize; } #google-map-shortcode { padding: 0; height: 400px; } #google-map-contact { padding: 0; height: 300px; } #google-map-contact2 { padding: 0; height: 200px; } .error-section h1 { color: #ff2a40; font-size: 10rem; } .col-md-12.text-xs-center > h4 { } .error-section h4 { text-transform: capitalize; } .loadmore-button .btn { padding: 14px 35px; } .service2-single-service { text-align: center; margin: 20px 0; } .service2-single-service .fa { border-radius: 50%; color: #fff; font-size: 23px; height: 75px; line-height: 75px; margin-bottom: 20px; width: 75px; } .service2-single-service h2 { font-size: 20px; text-transform: uppercase; } .service2-single-service p { font-size: 13px; } .new-comment .btn { font-size: 16px; padding: 13px 30px; } .comments-area .media.reply { background: #E5F7FD none repeat scroll 0 0; padding: 20px; border-radius: 4px; } .blog-pagination { text-align: center; } .pricing-table2 { padding: 15px 30px; } .single-pricing-2 { border: 1px solid #dedede; } .single-pricing-2 .plan-name { color: #959595; display: block; font-size: 24px; font-weight: 700; line-height: 30px; padding: 20px 0; } .single-pricing-2 .plan-name small { display: block; font-size: 12px; font-weight: 700; line-height: normal; } .single-pricing-2 .plan-price { background: #f2f2f2 none repeat scroll 0 0; font-size: 48px; margin-bottom: 30px; padding: 30px 0; text-align: center; } .featured .plan-price { color: #fff !important; background: #ff5959; } .premium .plan-price { background: #3498db !important; color: #fff !important; } .single-pricing-2 .plan-price .currency { font-size: 50%; font-weight: 700; left: -0.01em; top: -0.9em; } .single-pricing-2 .plan-price sub { font-size: 18px; font-weight: 700; } .single-pricing-2 ul { background: #fff none repeat scroll 0 0; margin-bottom: 0; padding: 0; } .single-pricing-2 ul li { border-top: 1px dashed #dedede; font-weight: 500; padding: 12px 29px; text-align: center; } .single-pricing-2 ul li:first-child { border-top: 0; } .pricing2-button { padding: 20px 0; text-align: center; } .pricing2-button .btn { padding: 12px 55px; text-transform: uppercase; } /* Roof bar styles */ #roof { background: #3B3B3B; } .roof-content { display: table; height: 60px; width: 100% } .roof-middle { display: table-cell; vertical-align: middle; } .roof-menu{ margin-right: 15px; } .roof-social-icons a i.fa { background: #484848 none repeat scroll 0 0; border-radius: 50%; font-size: 13px; height: 35px; line-height: 35px; text-align: center; width: 35px; color: #fff; margin-right: 10px; } .roof-social-icons a i.fa:hover { } .roof-menu ul { list-style: none; } .roof-menu ul li { float: left; } .roof-menu ul li a { color: #fff; font-size: 12px; line-height: 35px; margin-right: 16px; padding: 6px 9px; text-transform: uppercase; } .roof-menu ul li.active a { border-radius: 3px; margin-right: 0; } #default-tab a.nav-link { background: none; } .dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover { background-color: #eee; } /* Tablet Layout: 768px. */ @media only screen and (min-width: 768px) and (max-width: 991px) { #main-menu ul > li > a { font-size: 13px; font-weight: 600; padding: 28px 10px; } #main-menu ul .dropdown .dropdown-menu a { border-top: 1px solid #e2e6e7; color: #666; display: block; font-size: 12px; font-weight: 400; height: auto; line-height: 16px; padding: 9px 19px 7px; transition: all 0.3s ease-in-out 0s; } #carousel-area .carousel-item .carousel-caption h2 { font-size: 50px; } #carousel-area .carousel-item .carousel-caption h3 { font-size: 20px; } #carousel-area img { height: 100%; } .service-item h2 { font-size: 15px !important; } .top_search { display: none; } .pricing-table-x .plan-info p { font-size: 12px; } #team .team-item figure figcaption .content-white { font-size: 9px; line-height: 12px; width: 60%; } #team .team-item .social .facebook, #team .team-item .social .twitter, #team .team-item .social .google-plus { font-size: 8px; height: 25px; line-height: 25px; width: 25px; } /*.section-title { font-size: 24px !important; } */ .footer-widget p { font-size: 12px; } .social-footer a .fa { height: 25px; line-height: 25px; width: 25px; } footer .plain-flicker-gallery a { width: 31%; } footer ul li.tweet { font-size: 12px !important; } #copyright p, #copyright a { font-size: 10px !important; } .single-pricing-2 .btn { padding: 10px 15px; font-size: 10px; } .single-pricing-2 .plan-price { font-size: 35px; } .single-pricing-2 ul li { font-size: 12px; } ul.nav-tabs li a { font-size: 11px; } .btn-lg { padding: 12px 20px; } .btn-md { padding: 12px 14px; } .pricing-table h3 { font-size: 24px !important; } .single-pricing-2 .plan-name { font-size: 18px; } .sup-desc-wrap .sup-meta-wrap .sup-description { display: none; } .portfolio-meta ul li span { font-size: 10px; width: 78px; } .portfolio-meta ul li { font-size: 10px; } span.published-time { font-size: 10px; } .widget.popular-post h4 { font-size: 12px; } .flickr-widget .plain-flicker-gallery a img { width: 31%; } .widget.tag-cloud a { font-size: 8px; } } @media (max-width: 767px) { .nav-inline .nav-item + .nav-item { margin-left: 0; float: none; } #main-menu ul .dropdown .dropdown-menu { display: block; position: relative; width: 100%; } #main-menu { clear: both; width: 100%; } nav.navbar.navbar-light { min-height: 73px; } nav.navbar.navbar-light button.navbar-toggler { background: #333 none repeat scroll 0 0; border-radius: 0 !important; margin-top: 17px; } nav.navbar.navbar-light ul.nav-inline .nav-item { display: block; } nav.navbar.navbar-light ul.nav-inline { max-height: 350px; overflow-x: scroll; margin-top: 20px; } #roof { display: none; } #main-menu ul > li > a { font-size: 12px !important; padding: 18px 10px; } .section-title { font-size: 22px; padding: 0px; line-height: 25px; } .section-subcontent { font-size: 12px; line-height: 17px; } .page-header-content h2 { text-align: center; } .footer-widget { margin-bottom: 40px; } .carousel-item > img { height: 100% !important; } #carousel-area .carousel-item .carousel-caption h2 { font-size: 20px; font-weight: 600; } #carousel-area .carousel-item .carousel-caption h3 { font-size: 16px; } .btn-lg { font-size: 10px; padding: 10px 16px; text-transform: uppercase; } #portfolio a.filter { font-size: 10px; margin: 5px; padding: 5px 11px; } .controls { padding: 0; } .pricing-table-x .table-header h3 { font-size: 18px; } .plan-info > p { font-size: 12px !important; } .pricing-table-x .button-area { padding: 14px 0 40px; } .pricing-table-x { margin: 20px 15px; } .service2-single-service .fa { font-size: 18px; height: 45px; line-height: 45px; width: 45px; } .service2-single-service h2 { font-size: 15px; } .service2-single-service p { font-size: 11px; } .images { text-align: center; } .split h2.title { font-size: 16px; line-height: 24px; } #other-services .service-content p.lead { font-size: 12px; line-height: 28px; margin-bottom: 7px; } #other-services .service-content p { font-size: 12px; } #default-tab li.nav-item a.nav-link { padding: 5px; font-size: 12px; } .single-testimonial-area h3 { font-size: 18px; line-height: 25px; } .single-testimonial-area p { font-size: 12px; } .section { padding: 40px 30px; } .page-header-area { height: 86px; } .page-header-content h2 { font-size: 28px; } .cta-content h2 { font-size: 20px; line-height: 32px; } .cta-content p { font-size: 12px; line-height: 18px; padding-top: 5px; } .cta-content .btn { font-size: 12px; margin-top: 0; padding: 7px 12px; } #google-map-contact { height: 200px; padding: 0; } .section-padding { padding: 60px 0; } .contact-title-text h2 {font-size: 30px; } .contact-title-text p { font-size: 14px; } .contact-widget h2 { margin-bottom: 10px; font-size: 20px; } .contact-widget address { line-height: 35px; font-size: 12px; } .error-section h1 { font-size: 4rem; } .error-section h4 { font-size: 16px; } #round-tab ul li a { font-size: 12px; padding: 6px !important; } #vertical-tab .nav-tabs, #vertical-tab .tab-content { vertical-align: top; display: inherit; } #vertical-tab ul.nav-tabs li a { font-size: 12px; padding: 12px 40px; } #vertical-tab ul.nav-tabs { margin-bottom: 20px; } #vertical-tab p { font-size: 13px; line-height: 23px !important; } .shortcode-buttons-area .col-md-3 , .shortcode-pie-skill-area .col-md-6 { margin: 30px 0; } .single-portfolio-area .small-title { margin-top: 30px; } .portfolio-controls ul li a.btn { padding: 5px 30px; } .featured-wrapper img { height: 200px; } .blog-post-footer ul li a { padding: 4px 12px; } .blog-post-footer a.btn { margin-top: 10px; } /*iframe { height: 200px !important; }*/ ul.pagination a.page-link { font-size: 10px; padding: 5px; } .search-bar { margin-top: 40px; } .sidebar-area .widget { margin-bottom: 30px; } .about-author-section .media-left { display: block !important; text-align: center; } .about-author-section .media .media-body { padding-left: 10px; text-align: center; padding-top: 20px; } .author-footer .fa { font-size: 18px !important; height: 35px !important; line-height: 35px !important; width: 35px !important; } .comments-area .media-left, .comments-area .media-right { display: block; margin-bottom: 5px; text-align: center; } .comment-author { margin: 10px 0; } .commentor-info > p { font-size: 13px; line-height: 23px; } } .images img { width: 100%; } /* Tablets */ @media (min-width: 768px) and (max-width: 991px) { #carousel-area .carousel-item { height: 300px; } .carousel-item > img { width: 100%; } #carousel-area .carousel-item .carousel-caption h2 { font-size: 28px; } #carousel-area .carousel-item .carousel-caption h3 { font-size: 16px; } #carousel-area .carousel-item .carousel-caption .btn { margin: auto; font-size: 12px; margin-top: 10px; padding: 10px 15px; } #carousel-area .carousel-item .carousel-caption { top: 25%; } #carousel-area .carousel-indicators { bottom: 25px;} } .btn-info { float: right; bottom: 0;} .credit{ font-size: 0.8em; text-align: justify; line-height: 1.5; padding-bottom: 30px;} /* ========================================================================== COMBINED ========================================================================== */ /* responsive.css */ @media (min-width:767px) and (max-width:1024px){.section-title{font-size:40px}.small-title{font-size:20px}.social-links-bordered a i{width:40px;height:40px;line-height:40px}.input-lg{font-size:14px}.full-search input[type=text]{width:96%}#roof .quick-contacts span{padding:0 10px}#roof .social-links a{margin:0 2px}.navbar-engage .navbar-nav>li>a,.navbar-engage .navbar-nav>li>a:focus,.navbar-engage.affix .navbar-nav>li>a,.navbar-engage.affix .navbar-nav>li>a:focus{font-size:12px;padding:0;margin:20px 10px}.navbar-engage .navbar-brand img,.navbar-engage.affix .navbar-brand img{width:100px}.navbar-engage .dropdown-menu>li>a,.navbar-engage.affix .dropdown-menu>li>a{font-size:12px}.navbar-engage .navbar-nav>li>a:before,.navbar-engage.affix .navbar-nav>li>a:before{bottom:0}.navbar-engage.affix .navbar-brand{padding:15px}.top_search_con{display:none}#carousel-area .item{height:400px}#carousel-area .item .carousel-caption h2{font-size:50px}#carousel-area .item .carousel-caption h3{font-size:20px}#carousel-area .carousel-control i{width:40px;height:40px;padding:12px 0;font-size:15px}#portfolio .portfolio-items .gap,#portfolio .portfolio-items .mix,#portfolio .portfolio-items.col-3 .gap,#portfolio .portfolio-items.col-3 .mix{width:50%}#service-block-main .service-item{margin:60px 0}#service-block-main .service-item h2{font-size:24px}#service-block-1 .service-item .service-content h2{font-size:26px}#portfolio .portfolio-items figure figcaption{padding:32px}#other-services .other-service-item .service-content h3{font-size:18px}#progress{overflow-x:hidden}#progress .our-progress:before{background:0 0}#progress .progress-bottom{padding-bottom:0;padding-top:0}#progress .progress-item{margin:30px 0}#notice h4{font-size:30px}#notice p{font-size:20px}#service-block-2 .service-inner h3,#tabs .tab-content h1,#why-choose .tab-container h2,#why-choose h2,.pricing-table h3{font-size:24px}#notice .notice-button{margin-top:15px}#blog .blog-item-wrapper,#cool-facts .fact-block,#team .team-item{margin:30px 0}#cool-facts .section-subtitle{padding-bottom:30px;font-size:24px}#blog .blog-item-text .blog-item-info a{padding-right:6px}.pricing-table{margin:60px 0}footer .footer-widget{margin:30px 0}.social-icons-fill li{margin-right:1px}.massage-box .massage-box-icon{height:60px}}@media only screen and (min-width:480px) and (max-width:767px){#carousel-area .carousel-indicators,#portfolio .portfolio-items .gap figure figcaption::after,#portfolio .portfolio-items .gap figure figcaption::before,#portfolio .portfolio-items .gap figure h4,#portfolio .portfolio-items .mix figure figcaption::after,#portfolio .portfolio-items .mix figure figcaption::before,#portfolio .portfolio-items .mix figure h4,#portfolio .portfolio-items.col-3 .gap figure figcaption::after,#portfolio .portfolio-items.col-3 .gap figure figcaption::before,#portfolio .portfolio-items.col-3 .gap figure h4,#portfolio .portfolio-items.col-3 .mix figure figcaption::after,#portfolio .portfolio-items.col-3 .mix figure figcaption::before,#portfolio .portfolio-items.col-3 .mix figure h4{display:none}.section-title{font-size:36px}.page-header .page-subtitle{font-size:18px}.navbar-header{width:100%}.navbar-engage .dropdown .sub-menu{top:0;left:0!important;padding:0;border:none;-webkit-animation:fadeInUpMenu .4s;-moz-animation:fadeInUpMenu .4s;-ms-animation:fadeInUpMenu .4s;-o-animation:fadeInUpMenu .4s;animation:fadeInUpMenu .4s}#carousel-area .item{height:300px}#carousel-area .item .carousel-caption h2{font-size:30px}#carousel-area .item .carousel-caption h3{font-size:18px}#carousel-area .item .carousel-caption .btn{margin:5px}#carousel-area .carousel-control i{width:40px;height:40px;padding:12px 0;font-size:15px}#portfolio .portfolio-items .gap,#portfolio .portfolio-items .mix,#portfolio .portfolio-items.col-3 .gap,#portfolio .portfolio-items.col-3 .mix{width:50%}#service-block-main .service-item{margin:60px 0}#service-block-main .service-item h2{font-size:24px}#portfolio .portfolio-items figure figcaption{padding:25px}#portfolio .controls .btn{margin:5px 2px}#blog .blog-item-wrapper,#cool-facts .fact-block,#progress .progress-item{margin:30px 0}#progress{overflow-x:hidden}#progress .our-progress:before{background:0 0}#progress .progress-bottom{padding-bottom:0;padding-top:0}#testimonial #testimonial-carousel p{font-size:20px}#testimonial #testimonial-carousel .carousel-control.left{left:15px}#testimonial #testimonial-carousel .carousel-control.right{right:15px}#testimonial .item blockquote small span{display:block;line-height:40px}#clients #clients-scroller img{width:80%;margin-left:34px}#team .team-item{margin:30px 0}.pricing-table{margin:60px 0}.pricing-table h3{font-size:24px}#tabs .nav-tabs li a{font-size:12px;padding:10px 12px}#why-choose .tab-container h2{font-size:26px}#why-choose .tab-menu .list-group{width:536px;margin:40px 8px;float:left}#why-choose .tab-menu .list-group>a{float:left;margin:0 8px}.page-header-content h2{text-align:center}}@media (min-width:320px) and (max-width:480px){#carousel-area .carousel-indicators,#portfolio .portfolio-items .gap figure figcaption::after,#portfolio .portfolio-items .gap figure figcaption::before,#portfolio .portfolio-items .gap figure h4,#portfolio .portfolio-items .mix figure figcaption::after,#portfolio .portfolio-items .mix figure figcaption::before,#portfolio .portfolio-items .mix figure h4,#portfolio .portfolio-items.col-3 .gap figure figcaption::after,#portfolio .portfolio-items.col-3 .gap figure figcaption::before,#portfolio .portfolio-items.col-3 .gap figure h4,#portfolio .portfolio-items.col-3 .mix figure figcaption::after,#portfolio .portfolio-items.col-3 .mix figure figcaption::before,#portfolio .portfolio-items.col-3 .mix figure h4,.section-title:before{display:none}.section-title{font-size:26px;line-height:45px}.small-title{font-size:25px}#portfolios .btn{padding:6px 13px;margin-bottom:5px}.social-links-bordered a i{width:40px;height:40px;line-height:40px}.navbar-header{width:100%}.page-header .page-title{font-size:20px}.page-header .page-subtitle{font-size:18px}.input-lg{font-size:14px}#roof .quick-contacts span{padding:0 10px}#roof .social-links a{margin:0 2px}.justify-content-end{justify-content:flex-start!important}.row{padding:30px 0 40px}.section-title{padding:30px 0 15px}.section-title+.row{padding:0 0 30px}#carousel-area .item{height:300px}#carousel-area .item .carousel-caption h2{font-size:30px}#carousel-area .item .carousel-caption h3{font-size:20px}#carousel-area .item .carousel-caption .btn{margin:5px}#carousel-area .carousel-control i{width:40px;height:40px;padding:12px 0;font-size:15px}#portfolio .portfolio-items .gap,#portfolio .portfolio-items .mix,#portfolio .portfolio-items.col-3 .gap,#portfolio .portfolio-items.col-3 .mix{width:100%}#service-block-main .service-item{margin:60px 0}#service-block-main .service-item h2{font-size:24px}#service-block-1 .service-item .service-content h2{font-size:22px}#portfolio .portfolio-items figure figcaption{padding:25px}#portfolio .controls .btn{margin:5px 2px}#other-services .other-service-item .service-content h3{font-size:15px}#progress{overflow-x:hidden}#progress .our-progress:before{background:0 0}#progress .progress-bottom{padding-bottom:0;padding-top:0}#progress .progress-item{margin:30px 0}#notice h4{font-size:18px}#notice p{font-size:16px}#notice .notice-button{margin-top:15px}#blog .blog-item-wrapper,#cool-facts .fact-block{margin:30px 0}#cool-facts .section-subtitle{padding-bottom:30px;font-size:24px}#cool-facts .wrapper h2,#testimonial #testimonial-carousel p{font-size:20px}#testimonial #testimonial-carousel .carousel-control.left{left:15px}#testimonial #testimonial-carousel .carousel-control.right{right:15px}#testimonial .item blockquote small span{display:block;line-height:40px}#cool-facts .fact-block h4{font-size:30px;line-height:40px}#blog .blog-item-text .blog-item-info a{padding-right:6px}#clients #clients-scroller .client-item-wrapper{padding:0 45px}#clients #clients-scroller .owl-controls{display:none}.pricing-table{margin:60px 0}.pricing-table h3{font-size:24px}#team .team-item,footer .footer-widget{margin:30px 0}.copyright-text{float:left!important}.social-icons-fill li{margin:0 16px 0 0}#why-choose .tab-container h2{font-size:28px}#why-choose .list-group-item{width:362%;margin:40px 15px}.navbar-nav .nav-item+.nav-item{margin-left:0}#main-menu{clear:both}.page-header-content h2{text-align:center}}@media (max-width:767px){.carousel-item>img{height:100%;width:100%}#carousel-area .carousel-item{height:200px}#carousel-area .carousel-item .carousel-caption h2{font-size:16px}#carousel-area .carousel-item .carousel-caption h3{font-size:12px}#carousel-area .carousel-item .carousel-caption .btn{margin:5px auto auto;font-size:9px;padding:8px 12px}#carousel-area .carousel-control{top:58%;display:none}#carousel-area:hover .carousel-control{display:block}#carousel-area .carousel-indicators{bottom:-8px}#carousel-area i{margin-right:0}#carousel-area .carousel-item .carousel-caption{top:14%}} @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate */ @-webkit-keyframes fadeInUpMenu{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.delay-0-5{animation-delay:.5s;-webkit-animation-delay:.5s}.delay-1{animation-delay:1s;-webkit-animation-delay:1s}.delay-1-2{animation-delay:1.2s;-webkit-animation-delay:1.2s}.delay-1-5{animation-delay:1.5s;-webkit-animation-delay:1.5s}.delay-1-8{animation-delay:1.8s;-webkit-animation-delay:1.8s}.delay-2{animation-delay:2s;-webkit-animation-delay:2s}.animated-fast{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(.755,.050,.855,.060);transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(.755,.050,.855,.060);transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(.755,.050,.855,.060);transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(.755,.050,.855,.060);transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@keyframes pulse{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}}@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%,100%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}}@keyframes wobble{0%,100%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}.bounceOut,.flipOutX{-webkit-animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightQuick{0%{opacity:0;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightQuick{0%{opacity:0;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightQuick{-webkit-animation-name:fadeInRightQuick;animation-name:fadeInRightQuick}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpQuick{0%{opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpQuick{0%{opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpQuick{-webkit-animation-name:fadeInUpQuick;animation-name:fadeInUpQuick}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}.flipInY,.flipOutX{-webkit-backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;animation-duration:.75s;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.stretchRight{animation-name:stretchRight;-webkit-animation-name:stretchRight;animation-duration:8s;-webkit-animation-duration:8s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;transform-origin:0 0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0}@keyframes stretchRight{0%{transform:scaleX(.3)}40%{transform:scaleX(1.02)}60%{transform:scaleX(.98)}80%{transform:scaleX(1.01)}100%{transform:scaleX(1)}}@-webkit-keyframes stretchRight{0%{-webkit-transform:scaleX(.3)}40%{-webkit-transform:scaleX(1.02)}60%{-webkit-transform:scaleX(.98)}}80%{-webkit-transform:scaleX(1.01)}100%{-webkit-transform:scaleX(1)} /* normalize.css */ /* Utility-Klassen des Themes, gekuerzt. * Das Original enthielt 2790 Regeln (103 KB) mit Skalen von 0 bis 100 fuer * Abstaende, Schriftgroessen und Eckenradien. Benutzt werden 36 davon - * nachgezaehlt im Quelltext und im ausgelieferten HTML von 138 Seiten. * * Behalten sind die benutzten plus der Bereich 0 bis 10 aller Abstands- und * Schriftgroessen-Praefixe als Reserve. Wird eine groessere Stufe gebraucht * (etwa mb-50, das hier vorkommt), muss sie hier ergaenzt werden. * * Achtung: Bootstrap definiert mt-*, mb-*, pt-*, pb-*, p-* und m-* fuer 0 bis 5 * selbst und mit !important - dort gewinnt Bootstrap. Nur ml-*, mr-*, pl-*, pr-* * und die Stufen ueber 5 kommen aus dieser Datei. * Das Original steht in der Git-Historie. */ .m-0{margin:0px;}.mtb-0{margin-top:0px; margin-bottom:0px;}.mlr-0{margin-left:0px; margin-right:0px; }.mt-0{margin-top:0px;}.mb-0{margin-bottom:0px;}.ml-0{margin-left:0px;}.mr-0{margin-right:0px;}.m-1{margin:1px;}.mtb-1{margin-top:1px; margin-bottom:1px;}.mlr-1{margin-left:1px; margin-right:1px; }.mt-1{margin-top:1px;}.mb-1{margin-bottom:1px;}.ml-1{margin-left:1px;}.mr-1{margin-right:1px;}.m-2{margin:2px;}.mtb-2{margin-top:2px; margin-bottom:2px;}.mlr-2{margin-left:2px; margin-right:2px; }.mt-2{margin-top:2px;}.mb-2{margin-bottom:2px;}.ml-2{margin-left:2px;}.mr-2{margin-right:2px;}.m-3{margin:3px;}.mtb-3{margin-top:3px; margin-bottom:3px;}.mlr-3{margin-left:3px; margin-right:3px; }.mt-3{margin-top:3px;}.mb-3{margin-bottom:3px;}.ml-3{margin-left:3px;}.mr-3{margin-right:3px;}.m-4{margin:4px;}.mtb-4{margin-top:4px; margin-bottom:4px;}.mlr-4{margin-left:4px; margin-right:4px; }.mt-4{margin-top:4px;}.mb-4{margin-bottom:4px;}.ml-4{margin-left:4px;}.mr-4{margin-right:4px;}.m-5{margin:5px;}.mtb-5{margin-top:5px; margin-bottom:5px;}.mlr-5{margin-left:5px; margin-right:5px; }.mt-5{margin-top:5px;}.mb-5{margin-bottom:5px;}.ml-5{margin-left:5px;}.mr-5{margin-right:5px;}.m-6{margin:6px;}.mtb-6{margin-top:6px; margin-bottom:6px;}.mlr-6{margin-left:6px; margin-right:6px; }.mt-6{margin-top:6px;}.mb-6{margin-bottom:6px;}.ml-6{margin-left:6px;}.mr-6{margin-right:6px;}.m-7{margin:7px;}.mtb-7{margin-top:7px; margin-bottom:7px;}.mlr-7{margin-left:7px; margin-right:7px; }.mt-7{margin-top:7px;}.mb-7{margin-bottom:7px;}.ml-7{margin-left:7px;}.mr-7{margin-right:7px;}.m-8{margin:8px;}.mtb-8{margin-top:8px; margin-bottom:8px;}.mlr-8{margin-left:8px; margin-right:8px; }.mt-8{margin-top:8px;}.mb-8{margin-bottom:8px;}.ml-8{margin-left:8px;}.mr-8{margin-right:8px;}.m-9{margin:9px;}.mtb-9{margin-top:9px; margin-bottom:9px;}.mlr-9{margin-left:9px; margin-right:9px; }.mt-9{margin-top:9px;}.mb-9{margin-bottom:9px;}.ml-9{margin-left:9px;}.mr-9{margin-right:9px;}.m-10{margin:10px;}.mtb-10{margin-top:10px; margin-bottom:10px;}.mlr-10{margin-left:10px; margin-right:10px; }.mt-10{margin-top:10px;}.mb-10{margin-bottom:10px;}.ml-10{margin-left:10px;}.mr-10{margin-right:10px;}.mb-50{margin-bottom:50px;}.p-0{padding:0px;}.ptb-0{padding-top:0px; padding-bottom:0px; }.plr-0{padding-left:0px; padding-right:0px; }.pt-0{padding-top:0px;}.pb-0{padding-bottom:0px;}.pl-0{padding-left:0px;}.pr-0{padding-right:0px;}.p-1{padding:1px;}.ptb-1{padding-top:1px; padding-bottom:1px; }.plr-1{padding-left:1px; padding-right:1px; }.pt-1{padding-top:1px;}.pb-1{padding-bottom:1px;}.pl-1{padding-left:1px;}.pr-1{padding-right:1px;}.p-2{padding:2px;}.ptb-2{padding-top:2px; padding-bottom:2px; }.plr-2{padding-left:2px; padding-right:2px; }.pt-2{padding-top:2px;}.pb-2{padding-bottom:2px;}.pl-2{padding-left:2px;}.pr-2{padding-right:2px;}.p-3{padding:3px;}.ptb-3{padding-top:3px; padding-bottom:3px; }.plr-3{padding-left:3px; padding-right:3px; }.pt-3{padding-top:3px;}.pb-3{padding-bottom:3px;}.pl-3{padding-left:3px;}.pr-3{padding-right:3px;}.p-4{padding:4px;}.ptb-4{padding-top:4px; padding-bottom:4px; }.plr-4{padding-left:4px; padding-right:4px; }.pt-4{padding-top:4px;}.pb-4{padding-bottom:4px;}.pl-4{padding-left:4px;}.pr-4{padding-right:4px;}.p-5{padding:5px;}.ptb-5{padding-top:5px; padding-bottom:5px; }.plr-5{padding-left:5px; padding-right:5px; }.pt-5{padding-top:5px;}.pb-5{padding-bottom:5px;}.pl-5{padding-left:5px;}.pr-5{padding-right:5px;}.p-6{padding:6px;}.ptb-6{padding-top:6px; padding-bottom:6px; }.plr-6{padding-left:6px; padding-right:6px; }.pt-6{padding-top:6px;}.pb-6{padding-bottom:6px;}.pl-6{padding-left:6px;}.pr-6{padding-right:6px;}.p-7{padding:7px;}.ptb-7{padding-top:7px; padding-bottom:7px; }.plr-7{padding-left:7px; padding-right:7px; }.pt-7{padding-top:7px;}.pb-7{padding-bottom:7px;}.pl-7{padding-left:7px;}.pr-7{padding-right:7px;}.p-8{padding:8px;}.ptb-8{padding-top:8px; padding-bottom:8px; }.plr-8{padding-left:8px; padding-right:8px; }.pt-8{padding-top:8px;}.pb-8{padding-bottom:8px;}.pl-8{padding-left:8px;}.pr-8{padding-right:8px;}.p-9{padding:9px;}.ptb-9{padding-top:9px; padding-bottom:9px; }.plr-9{padding-left:9px; padding-right:9px; }.pt-9{padding-top:9px;}.pb-9{padding-bottom:9px;}.pl-9{padding-left:9px;}.pr-9{padding-right:9px;}.p-10{padding:10px;}.ptb-10{padding-top:10px; padding-bottom:10px; }.plr-10{padding-left:10px; padding-right:10px; }.pt-10{padding-top:10px;}.pb-10{padding-bottom:10px;}.pl-10{padding-left:10px;}.pr-10{padding-right:10px;}.fz-0{font-size:0px;}.fz-1{font-size:1px;}.fz-2{font-size:2px;}.fz-3{font-size:3px;}.fz-4{font-size:4px;}.fz-5{font-size:5px;}.fz-6{font-size:6px;}.fz-7{font-size:7px;}.fz-8{font-size:8px;}.fz-9{font-size:9px;}.fz-10{font-size:10px;}.d-none{display:none;}.bg-white{background:#fff;} /* settings.css */ /* Hier stand das CSS des Revolution Sliders (406 Regeln, rund 50 KB): .tp-banner, .tp-caption, * .tparrows, .rev_slider, .fullwidthbanner, .revicon-* und die zugehoerigen Keyframes. * Ein Theme-Rest - keine dieser Klassen kommt im Quelltext oder im ausgelieferten HTML von * 16 Seiten vor. Bei Bedarf aus der Git-Historie holen. */ /* owl.carousel.min.css */ /* Hier stand das Kern-CSS von Owl Carousel v1 (.owl-wrapper, .owl-wrapper-outer, * .owl-item, .owl-animated-*). Slick bringt sein eigenes mit (assets/css/slick.css). * * Die Klasse owl-carousel bleibt im Markup - sie ist der Aufhaenger fuer die * Hoehenreservierung weiter unten. Bis Slick fertig ist, bleibt das Karussell * versteckt; danach setzt Slick slick-initialized und es wird sichtbar. Ohne das * stuenden vor der Initialisierung alle Elemente untereinander. */ .owl-carousel{ display: none; width: 100%; } .owl-carousel.slick-initialized{ display: block; } /* ow..theme.min.css */s .owl-theme .owl-controls{margin-top:10px;text-align:center}.owl-theme .owl-controls .owl-buttons div{color:#FFF;display:inline-block;zoom:1;margin:5px;padding:3px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background:#869791;filter:Alpha(Opacity=50);opacity:.5}.owl-theme .owl-controls.clickable .owl-buttons div:hover{filter:Alpha(Opacity=100);opacity:1;text-decoration:none}.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1}.owl-theme .owl-controls .owl-page span{display:block;width:12px;height:12px;margin:5px 7px;filter:Alpha(Opacity=50);opacity:.5;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:#869791}.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{filter:Alpha(Opacity=100);opacity:1}.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-item.loading{min-height:150px;background:url(AjaxLoader.gif) center center no-repeat} /* Platz fuer die Owl-Karussells vorab reservieren (CLS). Owls eigenes CSS setzt .owl-carousel{display:none}, die Karussells sind also bis zur Initialisierung null Pixel hoch und klappen dann auf - alles darunter rutscht nach unten. Die Hoehen wurden im Browser bei 1110px Containerbreite gemessen. :has() zielt auf das direkte Elternelement; faellt die Unterstuetzung weg, wird die Regel ignoriert und es bleibt beim bisherigen Verhalten. */ @media (min-width: 992px){ div:has(> #categories-carousel){ min-height: 164px; } div:has(> #livematches-item) { min-height: 234px; } div:has(> #kommentatoren-item) { min-height: 407px; } div:has(> #freevideos-item) { min-height: 118px; } } /* Webhero-Ebenen: ersetzt das ungueltige width="100%"-Attribut an den . Das Attribut erwartet eine Pixelzahl; Browser haben es als Praesentationshinweis width:100% ausgewertet, Lighthouse las daraus width=100 und meldete ein falsches Seitenverhaeltnis (100x774 statt 1280x774). Die Bildmaße kommen aus der Datenbank und variieren, deshalb hier per CSS statt fester Attribute. */ #sdhero img.img-fluid{ width: 100%; } /* Bootstrap 5 hat display:inline-block aus .navbar-brand gestrichen (BS4 hatte es). Ohne das wird das inline, das Logo darin schrumpft von 45px auf 34px und die gesamte Kopfzeile wird 11px flacher. */ .navbar-brand{ display: inline-block; } /* Bootstrap 5 skaliert h1-h4 auf schmalen Bildschirmen herunter (Responsive Font Sizes). Bei 390px Breite waere h1 27,9px statt 40px, h2 24,7px statt 32px. Das ist eine Designaenderung, keine Modernisierung - deshalb auf die bisherigen Groessen festgelegt. Wenn die Ueberschriften mobil kleiner werden sollen, diesen Block entfernen. */ h1, .h1 { font-size: 2.5rem; } h2, .h2 { font-size: 2rem; } h3, .h3 { font-size: 1.75rem; } h4, .h4 { font-size: 1.5rem; } /* Bootstrap 5 hat die Rinnenbreite des Rasters von 30px auf 1.5rem (24px) verkleinert. Damit haetten alle Spalten 12px statt 15px Innenabstand, Inhalte wuerden 6px breiter und Bilder entsprechend hoeher. Auf den bisherigen Wert zurueckgesetzt. */ .row, .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: 30px; } /* .form-group gibt es in Bootstrap 5 nicht mehr. In BS4 brachte die Klasse margin-bottom:1rem mit; sportdigital.css setzt zwar eigene Regeln darauf, aber keinen Abstand. Ohne das ruecken die Formularzeilen zusammen. */ .form-group { margin-bottom: 1rem; } /* Bootstrap 5 hat die Innenabstaende mehrerer Komponenten verkleinert. Das aendert Umbrueche und Hoehen an vielen Stellen - z.B. passte auf /hilfe der FAQ-Text ploetzlich in eine Zeile statt zwei. Auf die bisherigen Werte zurueckgesetzt. */ .card { --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem; --bs-card-cap-padding-y: .75rem; --bs-card-cap-padding-x: 1.25rem; } .alert { --bs-alert-padding-y: .75rem; --bs-alert-padding-x: 1.25rem; } .badge { --bs-badge-padding-y: .25em; --bs-badge-padding-x: .4em; } .table { --bs-table-cell-padding-y: .75rem; --bs-table-cell-padding-x: .75rem; } /* Bootstrap 5 gibt jeder Tabellenzelle einen eigenen Hintergrund und eine eigene Textfarbe (".table > :not(caption) > * > *" setzt background-color auf --bs-table-bg, und das ist --bs-body-bg, also weiss). Bootstrap 4 hatte auf .table nur "color: #212529" und gar keinen Hintergrund - die Tabelle war durchsichtig und erbte den Grund darunter. Aufgefallen am 06.09.2026 am EPG-Block, der per JavaScript von epg.sportdigital.de nachgeladen wird (#programTable): er liegt auf dunklem Grund, bekam durch BS5 einen weissen Kasten - und weil "#programTable td" color:#fff setzt, stand weisse Schrift auf weissem Grund. Beides zurueckgesetzt, damit Tabellen wieder erben. */ .table { --bs-table-bg: transparent; --bs-table-color: #212529; } /* Bootstrap 4 legte den Spalten-Innenabstand direkt auf die .col-*-Klassen, Bootstrap 5 nur noch auf ".row > *". Elemente mit col-*-Klasse, die nicht direkt in einer .row stehen (Bilder, Textbloecke), verlieren dadurch ihre 15px und werden breiter. Der Wert folgt der Rinne der Zeile, damit kuenftige g-0-Zeilen weiterhin ohne Abstand bleiben. */ [class*="col-"] { padding-left: calc(var(--bs-gutter-x, 30px) * .5); padding-right: calc(var(--bs-gutter-x, 30px) * .5); /* Bootstrap 4 gab jeder Spalte position:relative, Bootstrap 5 nicht mehr. Absolut positionierte Kinder verlieren dadurch ihren Bezugsrahmen und messen sich am naechsten positionierten Vorfahren. Auf /lfctv wuchsen so die Hero-Ebenen von 1140 auf 1280px (ihre natuerliche Bildbreite). */ position: relative; } /* Bootstrap 5 unterstreicht Links standardmaessig (Reboot: a{text-decoration:underline}), Bootstrap 4 nicht. Betroffen waren 129 von 189 Links allein auf der Startseite. Der :hover-Zustand des Themes bleibt davon unberuehrt (hoehere Spezifitaet). */ a { text-decoration: none; } /* Bootstrap 5 setzt fuer Listen padding-left: 2rem (32px), Bootstrap 4 ueberliess das dem Browser (40px). Aufzaehlungen werden dadurch breiter und brechen anders um - auf /datenschutz und /agb betrifft das den gesamten Fliesstext. Klassenbasierte Listen (.navbar-nav, .list-unstyled, .dropdown-menu) bleiben unberuehrt, weil eine Klasse den Elementselektor schlaegt. */ ol, ul { padding-left: 40px; } /* Bootstrap 4 gab .form-control eine feste Hoehe (calc(1.5em + .75rem + 2px)) und rechnete darin 2px fuer den Rahmen ein - auch bei Feldern, die per Inline-Stil gar keinen haben, wie das Suchfeld der Mediathek. Bootstrap 5 laesst die Hoehe aus Polsterung und Zeilenhoehe entstehen, solche Felder werden dadurch 2px flacher. */ .form-control { height: calc(1.5em + .75rem + 2px); } textarea.form-control, select[multiple].form-control { height: auto; } .form-control-lg { height: calc(1.5em + 1rem + 2px); } .form-control-sm { height: calc(1.5em + .5rem + 2px); } /* Bootstrap 5 hat den Eckenradius von .25rem auf .375rem vergroessert. Betroffen sind 77 Elemente im Markup plus alle Komponenten, die den Wert erben (Karten, Felder, Knoepfe). Auf die bisherigen Werte zurueckgesetzt. */ :root { --bs-border-radius: .25rem; --bs-border-radius-sm: .2rem; --bs-border-radius-lg: .3rem; } /* Zwei Bootstrap-4-Klassen sind in Bootstrap 5 ersatzlos entfallen. Sie stehen 22 bzw. einmal im Markup, deshalb hier mit den Bootstrap-4-Regeln nachgebildet. */ .text-justify { text-align: justify !important; } .form-inline { display: flex; flex-flow: row wrap; align-items: center; } /* Bootstrap 5 hat den Haltepunkt xxl (ab 1400px) neu eingefuehrt: der Container wird dort 1320px breit statt 1140. Bootstrap 4 kannte das nicht, die Seite war ab 1200px immer 1140 breit. Das ist eine Layoutaenderung auf allen grossen Bildschirmen - unter anderem reichen die Teaser-Bilder dann nicht mehr ueber die volle Kastenbreite, weil das groesste Bild im srcset 768px hat. Auf den bisherigen Wert zurueckgesetzt. Wenn die Seite auf breiten Schirmen mehr Platz nutzen soll, diesen Block entfernen und die srcset-Angaben der Teaser entsprechend erweitern. */ @media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } } /* bootstrap-datepicker an das bisherige Aussehen von gijgo angleichen. gijgo markierte den heutigen und den gewaehlten Tag in der Markenfarbe #6fc5d3 (dieselbe wie die Links), bootstrap-datepicker nutzt ein Standard-Orange mit Verlauf. Ausserdem war die Schrift 14px statt 16px. */ .datepicker { font-size: 14px; } .datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today.focused { background: #6fc5d3 !important; color: #1e2c48; border-color: #6fc5d3; } .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active, .datepicker table tr td span.active { background: #6fc5d3 !important; color: #1e2c48 !important; border-color: #6fc5d3; text-shadow: none; } .datepicker table tr td.day:hover, .datepicker table tr td.focused { background: #e2f3f6; } /* Kontaktformular: die Falle fuer Bots. Nicht display:none - manche Bots ueberspringen, was ausdruecklich verborgen ist. Aus dem Sichtfeld geschoben sieht das Feld fuer sie wie ein normales aus. */ .kontakt-falle{ position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Kontaktformular: die Auswahl soll auch wie eine aussehen - .form-control zeichnet keinen Pfeil, ohne ihn haelt man das Feld fuer ein Textfeld. Die .form-group im Selektor ist noetig: die Regel dort setzt background auf "none" und waere sonst spezifischer als diese hier. */ #contactForm .form-group select.form-control{ -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231e2c48' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 15px center; background-size: 14px 10px; padding-right: 40px; } /* Mobiler Hero auf breitem Sichtfenster. Welche Hero-Variante ausgeliefert wird, entscheidet die Browser-Kennung ($detect->isMobile()), nicht die Breite - ein Tablet oder ein Telefon im Querformat bekommt deshalb den mobilen Hero auch auf 1400px. Dort deckelte der Container bei 1140px, und das m-0 nahm ihm die Zentrierung: die Grafik klebte links und liess rechts Weissraum stehen. Unter 576px ist der Container ohnehin 100% breit - dort aendert sich nichts. */ #sdhero .container.m-0{ max-width: 100%; } #sdhero #sd_kosmos{ width: 100%; } /* Karussell-Indikatoren: das Markup ist ein
    mit
  1. , Bootstrap 5 erwartet dagegen