/* SMC Main CSS */ @font-face { font-family: '微软雅黑','Arial'; font-weight: normal; font-style: normal; } @font-face { font-family: '微软雅黑','Arial'; font-weight: normal; font-style: normal; } @font-face { font-family: '微软雅黑','Arial'; font-weight: normal; font-style: normal; } article, section { width: 100; overflow: visible; } section { position: relative; } ::-moz-selection { color: #fefefe; background: #E2007E; } ::selection { color: #fefefe; background: #E2007E; } .container { } .block { max-width: 100%; margin-left: auto; margin-right: auto; overflow: visible; position: relative; } .line { width: 100%; margin: 0; padding: 0; overflow: visible; } .inner { padding: 0; } [class*="space"] { margin: 0; padding: 0; float: left; overflow: visible; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .space3 { width: 25%; } .space4 { width: 33.333%; } .space6 { width: 50%; } .space9 { width: 75%; } .space12 { width: 100%; } img, video, embed { height: auto; border-outline: none; outline: none; border: none; } iframe, object { max-width: 100%; } .line:before, .line:after, .block:before, .block:after, .inner:before, .inner:after, article:before, article:after, section:before, section:after, header:before, header:after, footer:before, footer:after, nav:before, nav:after { display: table; content: ""; } .line:after, .block:after, .inner:after, article:after, section:after, header:after, footer:after, nav:after { clear:both; } /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ .overlay { top: 0; width: 100%; height: 100%; z-index: 998 !important; position: absolute; background: #e0e0e0; -webkit-transition: all 1.4s ease-in; -moz-transition: all 1.4s ease-in; -ms-transition: all 1.4s ease-in; -o-transition: all 1.4s ease-in; transition: all 1.4s ease-in; } .overlay-left { position: absolute; bottom: 40px; left: 40px; } .overlay-right { position: absolute; bottom: 100px; right: 40px; } .overlay-intro { top: 0; position: absolute; height: 100%; width: 100%; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; background: url('../images/startbild.jpg'); z-index: 15000 !important; } .page-intro .backstretch { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .overlay.hide { top: -100%; } .overlay h1 { color: #E2007E; font-size: 70px; line-height: 80px; text-align: center; padding-bottom: 15%; font-weight: bold; } #overlay-info { color: #E2007E; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; font-size: 26px; line-height: 28px; font-weight: bold; font-family: 'MetaBoldCE-Roman',Verdana,Georgia,Arial,sans-serif; overflow: hidden; height: 100%; } #overlay-info img { position: absolute; right: 50px; bottom: 40px; } #topnav { z-index: 900; height: 30px; width: 100%; position: absolute; bottom: -130px; background: #fefefe; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #topnav .block { height: 100%; } #topnav .space4 { } #topnav .space4:last-child a { border: 0; } #topnav a.topnav-link { color: #555; display: block; text-align: center; padding:5px 10px; border-right: 1px solid #d8d8d8; height: 100%; background: #fefefe; overflow: hidden; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -ms-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; transition: all 0.7s ease-out; background: #fefefe url('../images/menu_icon_grau.png') no-repeat right; background-position: 96% 50%; } #topnav a.topnav-link i { float: right; padding-top: 2px; } #topnav a.topnav-link:hover { background: #E2007E; color: #fefefe; background: #E2007E url(../images/menu_icon_weiss.png) no-repeat right; background-position: 96% 50%; } #topnav ul { position: absolute; z-index: -1000; top: -240px; width: 33.3%; margin: 0; padding: 0; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -ms-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #topnav a.topnav-link.active { background: #E2007E; color: #fefefe; background: #E2007E url(../images/menu_icon_weiss.png) no-repeat right; background-position: 96% 50%; } #topnav #dropleft{ background:#e8b446 url(../images/menu_icon_weiss.png) no-repeat right; color:#fff; background-position: 96% 50%; font-size:15px;} #topnav #dropcenter{ background:#96b000 url(../images/menu_icon_weiss.png) no-repeat right; color:#fff; background-position: 96% 50%; font-size:15px;} #topnav #dropright{ background:#4faedf url(../images/menu_icon_weiss.png) no-repeat right; color:#fff; background-position: 96% 50%; font-size:15px;} #topnav ul.show { display: block; } #topnav ul.active { top: 40px !important; } #topnav ul li { list-style: none; z-index: -1000; } #topnav ul li a { z-index: -1000; display: block; padding: 11px 14px; background: #fefefe; border-bottom: 1px solid #ececec; } #topnav ul li a:hover { background: #E2007E; color: #fefefe; } #topnav ul li:last-child a { border-bottom: 0; } .index .container { position: absolute; top: 130px; width: 100%; overflow:hidden; } .index .container .block { background: black; } .container .slide { position: relative; overflow:hidden; margin-top: 0px; } .container .imagebox img { width: 100%; height: auto; margin:0; padding: 0; display: block; overflow: hidden; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; filter:alpha(opacity=100);-moz-opacity:1;opacity:1; } .imagebox .img-wrap { -webkit-transition: background 0.1s linear; -moz-transition: background 0.1s linear; -ms-transition: background 0.1s linear; -o-transition: background 0.1s linear; transition: background 0.1s linear; } div.imagebox.fade .img-wrap { display: block; line-height: 0; } div.imagebox.fade .img-wrap > img { filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4; } .container .slide div.imagebox.fade .img-wrap { background: #111; } ._mCS_1 .imageabout { width: 100%; height: 100%; position: absolute; vertical-align: middle; background: #e8b446; filter:alpha(opacity=0);-moz-opacity:0;opacity:0; -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -ms-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } ._mCS_2 .imageabout { width: 100%; height: 100%; position: absolute; vertical-align: middle; background: #96b000; filter:alpha(opacity=0);-moz-opacity:0;opacity:0; -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -ms-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } ._mCS_3 .imageabout { width: 100%; height: 100%; position: absolute; vertical-align: middle; background: #4faedf; filter:alpha(opacity=0);-moz-opacity:0;opacity:0; -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -ms-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } .imagebox.active .imageabout { filter:alpha(opacity=100);-moz-opacity:1;opacity:1; } .imagebox { overflow: hidden; position: relative; color: #fefefe; width: 100%; height: auto; } .imagebox h3 { text-transform: uppercase; display: inline; text-align: center; color: #fefefe; width: 100%; padding-top: 23%; vertical-align: middle;float: center; position: absolute; font-weight: normal; font-size: 28px; line-height: 100%; } .imagebox span { display: inline; font-size: 16px; text-transform: uppercase; text-align: center; color: #fefefe; width: 100%; bottom: 15px; position: absolute; } .imagebox img.hide { opacity: 0; } html, body { width: 100%; height:100%;overflow: hidden !important; position: relative;} body.preload * { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .mCSB_container { margin-right: 0; } .mCSB_draggerRail { display: none !important; } .mCSB_dragger { filter:alpha(opacity=0);-moz-opacity:0;opacity:0; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -ms-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; } .mCustomScrollBox>.mCSB_scrollTools { right: -3px; } .slide:hover .mCSB_dragger { filter:alpha(opacity=0);-moz-opacity:0;opacity:0; } .slideinpink { background: #E2007E; width: 100%; height: 0; top: 0; position: absolute; z-index: 99999; -webkit-transition: height 0.4s ease-out; -moz-transition: height 0.4s ease-out; -ms-transition: height 0.4s ease-out; -o-transition: height 0.4s ease-out; transition: height 0.4s ease-out; } .slideinpink.show { height: 100%; } .mCSB_dragger_bar:hover { background: #E2007E !important; } .overlay-pfeile-container { display: block; position: absolute; width: 54px; height: 52px; bottom: 35px; left: 50%; margin-left: -27px; } .overlay-pfeile { background: url('../images/danielpfeileheast.png') no-repeat center center; position: absolute; width: 53px; height: 28px; } #pfeil1 { top: 0; filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2; } #pfeil2 { top: 12px; filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5; } #pfeil3 { top: 24px; filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8; } /*--------------------------------------------------------------------------------------*/ /* page css */ .back { top: -68px; position: absolute; padding-right: 25px; z-index: 900; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .bankwerbung { top: -180px; position: absolute; left: 10%; z-index: 5000; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .bankwerbung-close { position: absolute; z-index: 1000; top: 0; right: 0; width: 30px; height: 30px; background: transparent; } .bankwerbung.active, .back.active { top: 0; } .overlay-page { width: 100%; height: 100%; top: 0px; left: 0px; z-index: 2000 !important; position: absolute; -webkit-transition: top 3.5s ease-out; -moz-transition: top 3.5s ease-out; -ms-transition: top 3.5s ease-out; -o-transition: top 3.5s ease-out; transition: top 3.5s ease-out; background: transparent; } .overlay-page.hide { top: -100%; } .overlay.noanimation { -webkit-transition: all 0s ease-in; -moz-transition: all 0s ease-in; -ms-transition: all 0s ease-in; -o-transition: all 0s ease-in; transition: all 0s ease-in; } .overlay-page #overlay-info { z-index: 2000 !important; position: absolute; width: 100%; height: 100%; -webkit-transition: bottom 3.0s ease-in; -moz-transition: bottom 3.0s ease-in; -ms-transition: bottom 3.0s ease-in; -o-transition: bottom 3.0s ease-in; transition: bottom 3.0s ease-in; } #mainimg { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .datum { position: absolute; top: 180px; left: 0; color: #E2007E; font-size: 19px; line-height: 23px; } .preis { position: absolute; top: 200px; left: 0; color: #E2007E; font-size: 19px; line-height: 23px; } .pfeile { position: absolute; top: 200px; width: 65px; height: 117px; } .arrow-links { left: 50px; background: url('../images/pfeil_links.png'); } .arrow-rechts { right: 50px; background: url('../images/pfeil_rechts.png'); } .pfeile:hover { background-position: 0 117px; } .page-image { top: 0; position: absolute; height: 100%; width: 100%; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .page-image .backstretch { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .page-image.active { top: -150px; } .page-content { position: absolute; height: 250px; bottom: -330px; width: 100%; background: #fefefe; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .page-content.active { bottom: 40px; } #content-inner { max-width: 1280px; } #content-inner .space3, .bottom-content .space3, .bottom-content .space6 { padding-top: 20px; padding-right: 25px; } .bottom-content .feature .block { max-width: 1280px; } .page-controls .space3 { padding-right: 25px; } .page-controls { height: 40px; position: absolute; bottom: -40px; width: 100%; background: #E2007E; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .page-controls.active { bottom: 0px; } #controls-inner { max-width: 1280px; } #controls-inner a { color: #fefefe; display: block; padding: 12px; padding-left: 0; text-transform: uppercase; font-size: 14px; background: url('../images/pfeil_small.png') no-repeat right; } #controls-inner a:hover { color: #ececec; } #controls-inner a#link-tickets { background: url('../images/pfeil_rechts_small.png') no-repeat right; } .page-controls #controls-inner a { background: url('../images/pfeil_small.png') no-repeat right; } .page-controls.show #controls-inner a { background: url('../images/pfeil_small.png') no-repeat right; } .page-controls.show #controls-inner a.options-link.active { background: url('../images/x_small.png') no-repeat right; } .bottom-content { position: absolute; width: 100%; background: #fefefe; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; } .slideinpink-links { display: none; background: #E2007E; width: 100%; height: 100%; top: 0; position: absolute; z-index: 99999; -webkit-transition: left 0.5s ease-in; -moz-transition: left 0.5s ease-in; -ms-transition: left 0.5s ease-in; -o-transition: left 0.5s ease-in; transition: left 0.5s ease-in; } .slideinpink-rechts { display: none; background: #E2007E; width: 100%; height: 100%; top: 0; position: absolute; z-index: 99999; -webkit-transition: right 0.5s ease-in; -moz-transition: right 0.5s ease-in; -ms-transition: right 0.5s ease-in; -o-transition: right 0.5s ease-in; } .closelower { position: absolute; bottom: -5px; z-index: 9000; padding-right: 25px;} #link-gewinn { display: none; } .logo-klein { position: absolute; right: 25px; top: 175px; } .kritiken { border-bottom: 1px solid #E9E9E9; padding-bottom: 10px; padding-top: 5px; margin-bottom: 10px; } .kritikenimage { position: relative; left: 0px; bottom: 0px; } .kritikendatum { position: relative; position: relative; right: -88px; bottom: 10px; display: inline; } .kritiken:last-child { border: none; } #specialul { } .facebook-icon { right: 292px; top: 176px; position: absolute; } .impressum { right: 258px; top: 205px; font-size: 12px; color: #444; position: absolute; } .feature .block { padding-bottom: 80px; } /*--------------------------------------------------------------------------------------*/ /* features */ .feature { position: absolute; width: 100%; overflow: hidden; display: none; } .feature.active { } .link-gewinn { border: 1px solid #E6E6E6; padding: 5px 10px; font-size: 14px; line-height: 100%; float: left; margin-right: 8px; -webkit-transition: background 0.4s ease-out; -moz-transition: background 0.4s ease-out; -ms-transition: background 0.4s ease-out; -o-transition: background 0.4s ease-out; transition: background 0.4s ease-out; } .link-gewinn.active, .link-gewinn:hover { background: #E2007E; color: #fefefe; } .link-gewinn:last-child { margin-right: 0; } .input-fields { width: 100%; column-count:2; -moz-column-count:2; -webkit-column-count:2; } .inp, #WinPlayForm_WinPlayForm_FirstName, #WinPlayForm_WinPlayForm_LastName, #WinPlayForm_WinPlayForm_Mail, #WinPlayForm_WinPlayForm_Country { width: 100%; height: 32px; padding: 4px 10px; padding-left: 5px; border: 1px solid #DDDDDD; margin-top: 20px; } .checkbox-container { margin-top: 188px; } .checkbox-container p { left: 25px; position: relative; } .checkbox { position: absolute; margin-right: 10px; width: 18px; height: 18px; background-position: 0px 0px; background: url('../images/checkbox.png') no-repeat; } .checkbox.active { background-position: 0px -18px; } a.senden, #WinPlayForm_WinPlayForm_action_submit { width: 100%; cursor: pointer; border: 0; display: block; margin-top: 180px; background: #E2007E; color: #fefefe; text-align: center; text-transform: uppercase; padding: 9px 20px; } a.senden:hover, #WinPlayForm_WinPlayForm_action_submit:hover { color: #fefefe; } .winning h3 { margin-top: 50px; } #map_canvas { width: 100%; height: 100% !important; } .mobile-hidden { display: inline; } #content-inner .space3 { } input:focus { outline: 2px solid #E2007E; } /*--------------------------------------------------------------------------------------*/ /* media querys */ @media handheld, only screen and (max-device-width: 480px) { iframe, object, embed { width: 100%; height: auto; } } @media handheld, only screen and (max-device-width: 480px) and (orientation:portrait) { iframe, object, embed{ width: 100%; height: auto; } } @media handheld, only screen and (max-device-width: 769px) and (orientation:landscape) { iframe, object, embed{ width: 100%; height: auto; } } .mobile { display: none; } .fullbrowser { display: block; } .feature.mehr, .feature.program, .winning, .impressum-content { overflow-y: scroll; overflow-x: hidden; } @media only screen and (max-width: 1280px) { .page-content, .feature.mehr, .feature.program, .winning { overflow-y: scroll; overflow-x: hidden; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 18px; } .mobile-hidden { display: none; } } @media only screen and (max-width: 1024px) { .back, .closelower { right: 0 !important; } .bankwerbung { left: 0 !important; } .page-content, .mehr, .program, .winning { overflow-y: scroll; overflow-x: hidden; } .page .space3, .page .space4, .page .space6, .page .space9 { padding-left: 10px; } .datum, .preis { left: 10px; } #controls-inner a { font-size: 12px; } .link-gewinn { margin-right: 4px; padding: 5px 8px; } #content-inner a { font-size: 13px; } .facebook-icon { position: static; display: block; float: left; width: 100%; margin-top: 10px; } .impressum { position: static; margin-top: 10px; display: block; float: left; margin-bottom: 10px; } .link-gewinn { margin-bottom: 5px; } .logo-klein { position: relative; right: auto; top: auto; } .logo-klein { position: absolute; right: 5px; top: 175px; } } @media only screen and (max-width: 768px) { .mobile { display: block; } .fullbrowser { display: none; } .block { min-width: 300px; } .page-content, .mehr, .program, .winning { overflow-y: scroll; } .datum, .preis { position: static; display: block; } .imagebox h3 { font-size: 16px; } .imagebox span { font-size: 12px } .checkbox-container, a.senden { margin-top: 20px; } a.senden, #WinPlayForm_WinPlayForm_action_submit { margin-bottom: 10px; margin-top: 20px; } .back { right: 0 !important; } .bankwerbung { display: none !important; } #controls-inner a { font-size: 12px; } .logo-klein { position: relative; right: auto; top: auto; } } #leftslide { display: block; } #centerslide { display: block; } #rightslide { display: block; } @media only screen and (max-width: 640px) { .input-fields { width: 100%; column-count:1; -moz-column-count:1; -webkit-column-count:1; } #leftslide { display: none !important; } #centerslide { display: none !important; } #rightslide { display: none !important; } #leftslide.mobileshow { display: block !important; } #centerslide.mobileshow { display: block !important; } #rightslide.mobileshow { display: block !important; } .impressum { position: static; width: 100%; display: block; float: left; margin-bottom: 10px; margin-top: 10px; } .facebook-icon { position: static; display: block; float: left; width: 100%; margin-top: 20px; } .imagebox .imageabout { opacity: 1 !important; background: transparent !important; } .imageabout h3 { text-shadow: 3px 3px 2px rgba(0, 0, 0, .5); } .winning h3 { margin-top: 20px; } #controls-inner a { text-align: center; } [class*="space"] { width: 100%; } #topnav ul { display: none !important; } #topnav .space4 { width: 33.33%; } #topnav a.topnav-link { font-size: 13px; padding: 6px; padding-top: 12px; padding-bottom: 12px; background: #fefefe; } #topnav a.topnav-link.active { background: #E2007E; } #topnav a.topnav-link:hover { background: #E2007E; } #topnav a.topnav-link i { display: none; } .page .space3, .page .space4, .page .space6, .page .space9 { padding-left: 6px; } .arrow-rechts, .arrow-links { background: none; } .arrow-links { left: 5px; } .arrow-rechts { right: 5px; } a.options-link { background: none !important; display: inline; } .page-controls .space3 { width: 25%; padding-right: 7px; } .bankwerbung { display: none; } .overlay-left { bottom: auto; position: absolute; top: 18px; left: 20px; } #overlay-info img { width: 100px; position: absolute; right: 20px; top: 20px; } #overlay-info { font-size: 12px; line-height: 13px; } } /*--------------------------------------------------------------------------------------*/ #map_canvas img { max-width: none !important; } #map_canvas * { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } /* --- Awwwards Ribbons --- */ /* Base */ #awwwards { position:absolute; top:50px; z-index:9999; } /* Left */ #awwwards.left { left:0; } /* Right */ #awwwards.right { right:0; } /* Link */ #awwwards a { display:block; width:70px; height:105px; text-indent:-8000px; background-repeat:no-repeat; background-position: 0 0; overflow:hidden; } /* Black */ #awwwards.left.black a { background-image:url('ribbons/awwwards_honorable_black_left.png'); } #awwwards.right.black a { background-image:url('ribbons/awwwards_honorable_black_right.png'); } /* White */ #awwwards.left.white a { background-image:url('ribbons/awwwards_honorable_white_left.png'); } #awwwards.right.white a { background-image:url('ribbons/awwwards_honorable_white_right.png'); } /* Green */ #awwwards.left.green a { background-image:url('ribbons/awwwards_honorable_green_left.png'); } #awwwards.right.green a { background-image:url('ribbons/awwwards_honorable_green_right.png'); } /* MEDIA QUERIES */ /* Landscape phone to portrait tablet */ @media (max-width: 767px) { /* hidden */ #awwwards { display: none; } } /* Retina Displays */ /* Target any device with retina display (ie iPad 3 and MacBook Pro) */ @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { #awwwards a { -moz-background-size: 70px 105px; -ie-background-size:70px 105px; -o-background-size:70px 105px; -webkit-background-size:70px 105px; background-size:70px 105px; } } #footer{position:absolute; bottom:0;}