@font-face { font-family: 'FF Good Pro News'; src: url('css/FFGoodPro-NewsItalic.eot'); src: local('FF Good Pro News Italic'), local('FFGoodPro-NewsItalic'), url('css/FFGoodPro-NewsItalic.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-NewsItalic.woff2') format('woff2'), url('css/FFGoodPro-NewsItalic.woff') format('woff'), url('css/FFGoodPro-NewsItalic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-BlackItalic.eot'); src: local('FF Good Pro Black Italic'), local('FFGoodPro-BlackItalic'), url('css/FFGoodPro-BlackItalic.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-BlackItalic.woff2') format('woff2'), url('css/FFGoodPro-BlackItalic.woff') format('woff'), url('css/FFGoodPro-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; } @font-face { font-family: 'FF Good Pro News'; src: url('css/FFGoodPro-News.eot'); src: local('FF Good Pro News'), local('FFGoodPro-News'), url('css/FFGoodPro-News.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-News.woff2') format('woff2'), url('css/FFGoodPro-News.woff') format('woff'), url('css/FFGoodPro-News.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FF Good Pro Wide'; src: url('css/FFGoodProWide-Regular.eot'); src: local('FF Good Pro Wide'), local('FFGoodProWide-Regular'), url('css/FFGoodProWide-Regular.eot?#iefix') format('embedded-opentype'), url('css/FFGoodProWide-Regular.woff2') format('woff2'), url('css/FFGoodProWide-Regular.woff') format('woff'), url('css/FFGoodProWide-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-Light.eot'); src: local('FF Good Pro Light'), local('FFGoodPro-Light'), url('css/FFGoodPro-Light.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-Light.woff2') format('woff2'), url('css/FFGoodPro-Light.woff') format('woff'), url('css/FFGoodPro-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-Bold.eot'); src: local('FF Good Pro Bold'), local('FFGoodPro-Bold'), url('css/FFGoodPro-Bold.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-Bold.woff2') format('woff2'), url('css/FFGoodPro-Bold.woff') format('woff'), url('css/FFGoodPro-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-LightItalic.eot'); src: local('FF Good Pro Light Italic'), local('FFGoodPro-LightItalic'), url('css/FFGoodPro-LightItalic.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-LightItalic.woff2') format('woff2'), url('css/FFGoodPro-LightItalic.woff') format('woff'), url('css/FFGoodPro-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'FF Good Pro Ultra'; src: url('css/FFGoodPro-UltraItalic.eot'); src: local('FF Good Pro Ultra Italic'), local('FFGoodPro-UltraItalic'), url('css/FFGoodPro-UltraItalic.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-UltraItalic.woff2') format('woff2'), url('css/FFGoodPro-UltraItalic.woff') format('woff'), url('css/FFGoodPro-UltraItalic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-BoldItalic.eot'); src: local('FF Good Pro Bold Italic'), local('FFGoodPro-BoldItalic'), url('css/FFGoodPro-BoldItalic.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-BoldItalic.woff2') format('woff2'), url('css/FFGoodPro-BoldItalic.woff') format('woff'), url('css/FFGoodPro-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'FF Good Pro Ultra'; src: url('css/FFGoodPro-Ultra.eot'); src: local('FF Good Pro Ultra'), local('FFGoodPro-Ultra'), url('css/FFGoodPro-Ultra.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-Ultra.woff2') format('woff2'), url('css/FFGoodPro-Ultra.woff') format('woff'), url('css/FFGoodPro-Ultra.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-Black.eot'); src: local('FF Good Pro Black'), local('FFGoodPro-Black'), url('css/FFGoodPro-Black.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-Black.woff2') format('woff2'), url('css/FFGoodPro-Black.woff') format('woff'), url('css/FFGoodPro-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-MediumItalic.eot'); src: local('FF Good Pro Medium Italic'), local('FFGoodPro-MediumItalic'), url('css/FFGoodPro-MediumItalic.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-MediumItalic.woff2') format('woff2'), url('css/FFGoodPro-MediumItalic.woff') format('woff'), url('css/FFGoodPro-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-Italic.eot'); src: local('FF Good Pro Italic'), local('FFGoodPro-Italic'), url('css/FFGoodPro-Italic.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-Italic.woff2') format('woff2'), url('css/FFGoodPro-Italic.woff') format('woff'), url('css/FFGoodPro-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-Medium.eot'); src: local('FF Good Pro Medium'), local('FFGoodPro-Medium'), url('css/FFGoodPro-Medium.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-Medium.woff2') format('woff2'), url('css/FFGoodPro-Medium.woff') format('woff'), url('css/FFGoodPro-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'FF Good Pro'; src: url('css/FFGoodPro-Regular.eot'); src: local('FF Good Pro'), local('FFGoodPro-Regular'), url('css/FFGoodPro-Regular.eot?#iefix') format('embedded-opentype'), url('css/FFGoodPro-Regular.woff2') format('woff2'), url('css/FFGoodPro-Regular.woff') format('woff'), url('css/FFGoodPro-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } .page_container { width: 1024px; height: 580px; position: absolute; z-index:0; } .page_wrapper { z-index:0; width: 1024px; height: 580px; background-color: #4a4a4a; position:absolute; top: 50%; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* kleines quadrat */ .img_teil0 { z-index:1; position: absolute; border-style: none; margin-left: 0px; margin-top: 0px; } /* nicht genutz */ .img_teil1 { z-index:3; position: absolute; border-style: none; margin-left: 120px; margin-top: 0px; } /* gross L */ .img_teil2 { z-index:2; position: absolute; margin-left: 0px; margin-top: 0px; } /* gross quadrat */ .img_teil3 { z-index:3; position: absolute; margin-left: 128px; margin-top: 0px; } .img_teil4 { z-index:3; position: absolute; margin-left: 256px; margin-top: 0px; } .img_teil5 { z-index:3; position: absolute; margin-left: 288px; margin-top: 0px; } .img_teil6 { z-index:3; position: absolute; margin-left: 352px; margin-top: 0px; } .img_teil7 { z-index:3; position: absolute; margin-left: 256px; margin-top: 64px; } .img_teil8 { z-index:3; position: absolute; margin-left: 384px; margin-top: 0px; } .img_teil9 { z-index:1; position: absolute; margin-left: 384px; margin-top: 64px; } .img_teil9_a2 { z-index:6; position: absolute; margin-left: 384px; margin-top: -128px; } /* gross längs */ .img_teil10 { z-index:3; position: absolute; margin-left: 448px; margin-top: 0px; } /* gross längs */ .img_teil11 { z-index:3; position: absolute; margin-left: 512px; margin-top: 0px; } /* kleines quadrat */ .img_teil12 { z-index:3; position: absolute; margin-left: 576px; margin-top: 0px; } .img_teil13 { z-index:3; position: absolute; margin-left: 640px; margin-top: 0px; } .img_teil14 { z-index:1; position: absolute; margin-left: 576px; margin-top: 64px; } .img_teil15 { z-index:1; position: absolute; margin-left:704px; margin-top: 0px; } /* L */ .img_teil21_aussen_unten { z-index:7; position: absolute; margin-left: 62px; margin-top: 576px; } /* kleines quadrat */ .img_teil12_aussen_unten { z-index:5; position: absolute; margin-left: 128px; margin-top: 576px; } .img_teil13_aussen_unten { z-index:5; position: absolute; margin-left: 192px; margin-top: 576px; } .img_teil12_aussen_unten_1 { z-index:5; position: absolute; margin-left:96px; margin-top: 576px; } .img_teil12_aussen_unten_2 { z-index:5; position: absolute; margin-left: 64px; margin-top: 576px; } .img_teil12_aussen_unten_3 { z-index:5; position: absolute; margin-left: 96px; margin-top: 608px; } .img_teil12_aussen_unten_4 { z-index:5; position: absolute; margin-left: 64px; margin-top: 608px; } .img_teil12_aussen_unten_5 { z-index:5; position: absolute; margin-left: -64px; margin-top: 576px; } .img_teil12_aussen_unten_6 { z-index:7; position: absolute; margin-left: -64px; margin-top: 704px; } .img_teil12_aussen_unten_7 { z-index:7; position: absolute; margin-left: -192px; margin-top: 512px; } .img_teil12_aussen_unten_8 { z-index:7; position: absolute; margin-left: -256px; margin-top: 448px; } .img_teil14_aussen_unten { z-index:1; position: absolute; margin-left: 256px; margin-top: 576px; } .img_teil14_aussen_unten_2 { z-index:1; position: absolute; margin-left: 736px; margin-top: 576px; } .img_teil15_aussen_unten { z-index:1; position: absolute; margin-left:384px; margin-top: 576px; } .img_teil16_aussen_unten { z-index:3; position: absolute; margin-left:512px; margin-top: 576px; } .img_teil41_aussen_unten { z-index:3; position: absolute; margin-left:640px; margin-top: 576px; } .img_teil41_aussen_unten_2 { z-index:3; position: absolute; margin-left:864px; margin-top: 576px; } .img_teil42_aussen_unten { z-index:3; position: absolute; margin-left: 672px; margin-top: 576px; } .img_teil43_aussen_unten { z-index:3; position: absolute; margin-left:704px; margin-top: 576px; } .img_teil16 { z-index:3; position: absolute; margin-left:704px; margin-top: 64px; } .img_teil17 { z-index:3; position: absolute; margin-left:736px; margin-top: 64px; } .img_teil18 { z-index:3; position: absolute; margin-left:704px; margin-top: 96px; } .img_teil19 { z-index:3; position: absolute; margin-left:768px; margin-top: 64px; } .img_teil20 { z-index:3; position: absolute; margin-left:832px; margin-top: 0px; } .img_teil21 { z-index:3; position: absolute; margin-left:896px; margin-top: 0px; } .img_teil22 { z-index:2; position: absolute; margin-left:960px; margin-top: 0px; } .img_teil23 { z-index:2; position: absolute; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; margin-left:0px; margin-top: 128px; } .img_teil23:hover { } .img_teil23_off { z-index:5; position: absolute; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity: 0; margin-left:0px; margin-top: 128px; } .img_teil23_off:hover { -webkit-filter: brightness(1.6); filter: brightness(1.6); } .img_teil24 { z-index:2; position: absolute; margin-left:0px; margin-top: 192px; } .img_teil25 { z-index:2; position: absolute; margin-left:32px; margin-top: 192px; } .img_teil26 { z-index:2; position: absolute; margin-left:0px; margin-top: 224px; } .img_teil27 { z-index:2; position: absolute; margin-left:64px; margin-top: 128px; } .img_teil28 { z-index:2; position: absolute; margin-left:128px; margin-top: 128px; } .img_teil28_1 { z-index:2; position: absolute; margin-left:-64px; margin-top: 128px; } .img_teil_alo_28_1 { z-index:2; position: absolute; margin-left:-128px; margin-top: 64px; } .img_teil_alo_28_2 { z-index:2; position: absolute; margin-left:-192px; margin-top: 128px; } .img_teil_alo_28_3 { z-index:3; position: absolute; margin-left:-192px; margin-top: -64px; } .img_teil_alo_28_4 { z-index:2; position: absolute; margin-left:-256px; margin-top: 64px; } .img_teil_alo_28_5 { z-index:2; position: absolute; margin-left:-256px; margin-top: 320px; } .img_teil_alo_28_6 { z-index:2; position: absolute; margin-left:-256px; margin-top: 128px; } .img_teil_alo_28_7 { z-index:2; position: absolute; margin-left:-256px; margin-top: 192px; } .img_teil_alo_28_8 { z-index:2; position: absolute; margin-left:-256px; margin-top: 256px; } .img_teil_alo_28_9 { z-index:2; position: absolute; margin-left:-320px; margin-top: 512px; } .img_teil_alu_28_1 { z-index:2; position: absolute; margin-left:-192px; margin-top: 384px; } .img_teil_al_28_2 { z-index:2; position: absolute; margin-left:-64px; margin-top: 0px; } .img_teil_al_28_3 { z-index:2; position: absolute; margin-left:-64px; margin-top: 512px; } .img_teil_al_28_4 { z-index:2; position: absolute; margin-left:-64px; margin-top: 448px; } .img_teil_ar_28_2 { z-index:2; position: absolute; margin-left:960px; margin-top: -64px; } .img_teil_ar_28_3 { z-index:2; position: absolute; margin-left:1024px; margin-top: -64px; } .img_teil_aru_28_1 { z-index:2; position: absolute; margin-left:1024px; margin-top: 448px; } .img_teil_aru_28_2 { z-index:2; position: absolute; margin-left:1024px; margin-top: 512px; } .img_teil_aru_28_3 { z-index:2; position: absolute; margin-left:896px; margin-top: 576px; } .img_teil_ar_28_4 { z-index:2; position: absolute; margin-left:1088px; margin-top: -64px; } .img_teil_ar_28_5 { z-index:2; position: absolute; margin-left:1120px; margin-top: -64px; } .img_teil_ar_28_6 { z-index:2; position: absolute; margin-left:1088px; margin-top: -32px; } .img_teil_ar_28_7 { z-index:2; position: absolute; margin-left:1120px; margin-top: -32px; } .img_teil_ar_28_8 { z-index:2; position: absolute; margin-left:1152px; margin-top: -64px; } .img_teil_ar_28_9 { z-index:2; position: absolute; margin-left:1152px; margin-top: 0px; } .img_teil_ar_28_10 { z-index:2; position: absolute; margin-left:1152px; margin-top: 64px; } .img_teil_ar_28_1 { z-index:2; position: absolute; margin-left:1024px; margin-top: 0px; } .img_teil_al_28_5 { z-index:2; position: absolute; margin-left:-64px; margin-top: -64px; } .img_teil28_rechts_1 { z-index:2; position: absolute; margin-left:1024px; margin-top: 128px; } .img_teil29 { z-index:2; position: absolute; margin-left:192px; margin-top: 128px; } .img_teil30 { z-index:2; position: absolute; margin-left:256px; margin-top: 128px; } .img_teil31 { z-index:2; position: absolute; margin-left:256px; margin-top: 160px; } .img_teil32 { z-index:2; position: absolute; margin-left:288px; margin-top: 160px; } /* großsse L 2 reihe*/ .img_teil33 { z-index:2; position: absolute; margin-left:256px; margin-top: 128px; } .img_teil34 { z-index:2; position: absolute; margin-left:128px; margin-top: 192px; } .img_teil34_2 { z-index:2; position: absolute; margin-left:-128px; margin-top: 192px; } .img_teil34_rechts_2 { z-index:2; position: absolute; margin-left:1024px; margin-top: 192px; } .img_teil35 { z-index:2; position: absolute; margin-left:384px; margin-top: 192px; } .img_teil36 { z-index:2; position: absolute; margin-left:448px; margin-top: 128px; } .img_teil37 { z-index:2; position: absolute; margin-left:576px; margin-top: 128px; } .img_teil38 { z-index:2; position: absolute; margin-left:576px; margin-top: 160px; } .img_teil39 { z-index:2; position: absolute; margin-left:608px; margin-top: 128px; } .img_teil39_oben { z-index:6; position: absolute; margin-left:672px; margin-top: -64px; } .img_teil39_oben_2_9 { z-index:6; position: absolute; margin-left:928px; margin-top: -64px; } .img_teil39_1 { z-index:2; position: absolute; margin-left:896px; margin-top: 128px; } .img_teil39_2 { z-index:2; position: absolute; margin-left:864px; margin-top: 128px; } .img_teil39_2_2 { z-index:6; position: absolute; margin-left:-32px; margin-top: 256px; } .img_teil39_2_3 { z-index:6; position: absolute; margin-left:-64px; margin-top: 256px; } .img_teil39_2_4 { z-index:6; position: absolute; margin-left:-96px; margin-top: 256px; } .img_teil39_2_5 { z-index:6; position: absolute; margin-left:-128px; margin-top: 256px; } .img_teil39_2_7 { z-index:9999; position: absolute; margin-left:-192px; margin-top: 256px; } .img_teil39_2_8 { z-index:6; position: absolute; margin-left:-128px; margin-top: 384px; } .img_teil39_rechts_2_2 { z-index:2; position: absolute; margin-left:1024px; margin-top: 256px; } .img_teil39_rechts_2_3 { z-index:2; position: absolute; margin-left:1056px; margin-top: 256px; } .img_teil39_rechts_2_4 { z-index:2; position: absolute; margin-left:1088px; margin-top: 256px; } .img_teil39_rechts_2_5 { z-index:2; position: absolute; margin-left:1120px; margin-top: 256px; } .img_teil39_rechts_2_6 { z-index:2; position: absolute; margin-left:1152px; margin-top: 256px; } .img_teil39_rechts_2_7 { z-index:2; position: absolute; margin-left:1088px; margin-top: 128px; } .img_teil39_rechts_2_8 { z-index:2; position: absolute; margin-left:1088px; margin-top:0px; } .img_teil39_oben_2_2 { z-index:6; position: absolute; margin-left:576px; margin-top: -64px; } .img_teil39_oben_2_3 { z-index:6; position: absolute; margin-left:608px; margin-top: -64px; } .img_teil39_oben_2_4 { z-index:6; position: absolute; margin-left:640px; margin-top: -64px; } .img_teil39_3 { z-index:2; position: absolute; margin-left:576px; margin-top: 192px; } .img_teil39_4 { z-index:2; position: absolute; margin-left:704px; margin-top: 192px; } .img_teil39_5 { z-index:2; position: absolute; margin-left:768px; margin-top: 192px; } .img_teil39_5_2 { z-index:2; position: absolute; margin-left:800px; margin-top: 192px; } .img_teil39_6 { z-index:2; position: absolute; margin-left:832px; margin-top: 192px; } .img_teil40 { z-index:2; position: absolute; margin-left:0px; margin-top: 256px; } .img_teil41 { z-index:2; position: absolute; margin-left:128px; margin-top: 256px; } .img_teil42 { z-index:2; position: absolute; margin-left:160px; margin-top: 256px; } .img_teil43 { z-index:2; position: absolute; margin-left:192px; margin-top: 256px; } .img_teil44 { z-index:2; position: absolute; margin-left:256px; margin-top: 256px; } .img_teil45 { z-index:2; position: absolute; margin-left:320px; margin-top: 256px; } .img_teil46 { z-index:2; position: absolute; margin-left:384px; margin-top: 256px; } .img_teil47 { z-index:1; position: absolute; margin-left:640px; margin-top: 256px; } .img_teil48 { z-index:1; position: absolute; margin-left:704px; margin-top: 256px; } .img_teil48_a2 { z-index:6; position: absolute; margin-left:128px; margin-top: -64px; } .img_teil48_2_a2 { z-index:6; position: absolute; margin-left:256px; margin-top: -64px; } .img_teil49 { z-index:2; position: absolute; margin-left:832px; margin-top: 256px; } .img_teil50 { z-index:2; position: absolute; margin-left:832px; margin-top: 288px; } /*2 ini quadrate*/ .img_teil51 { z-index:2; position: absolute; margin-left:864px; margin-top: 256px; } .img_teil52 { z-index:2; position: absolute; margin-left:864px; margin-top: 288px; } /* gabschluss zeile 3*/ .img_teil53 { z-index:1; position: absolute; margin-left:896px; margin-top: 256px; } .img_teil140 { z-index:200; position: absolute; margin-left:0px; margin-top: 640px; } .img_teil140_1 { z-index:200; position: absolute; margin-left:-256px; margin-top: 576px; } .img_teil141 { z-index:2; position: absolute; margin-left:128px; margin-top: 640px; } .img_teil142 { z-index:2; position: absolute; margin-left:160px; margin-top: 640px; } .img_teil143 { z-index:2; position: absolute; margin-left:192px; margin-top: 640px; } .img_teil144 { z-index:2; position: absolute; margin-left:256px; margin-top: 640px; } .img_teil145 { z-index:2; position: absolute; margin-left:320px; margin-top: 640px; } .img_teil146 { z-index:2; position: absolute; margin-left:384px; margin-top: 640px; } .img_teil146_2 { z-index:2; position: absolute; margin-left:512px; margin-top: 640px; } .img_teil146_3 { z-index:2; position: absolute; margin-left:576px; margin-top: 640px; } .img_teil147 { z-index:1; position: absolute; margin-left:640px; margin-top: 640px; } .img_teil148 { z-index:1; position: absolute; margin-left:704px; margin-top: 640px; } .img_teil149 { z-index:2; position: absolute; margin-left:832px; margin-top: 640px; } .img_teil150 { z-index:2; position: absolute; margin-left:832px; margin-top: 672px; } /*2 ini quadrate*/ .img_teil151 { z-index:2; position: absolute; margin-left:864px; margin-top: 672px; } .img_teil152 { z-index:2; position: absolute; margin-left:864px; margin-top: 640px; } /* gabschluss zeile 3*/ .img_teil153 { z-index:1; position: absolute; margin-left:896px; margin-top: 640px; } .img_teil153_2 { z-index:1; position: absolute; margin-left:1024px; margin-top: 640px; } .img_teil153_3 { z-index:1; position: absolute; margin-left:1088px; margin-top: 640px; } .img_teil153_4 { z-index:1; position: absolute; margin-left:1152px; margin-top: 576px; } .img_teil153_5 { z-index:1; position: absolute; margin-left:1152px; margin-top: 512px; } .img_teil153_6 { z-index:1; position: absolute; margin-left:1216px; margin-top: 512px; } .img_teil153_7 { z-index:1; position: absolute; margin-left:1152px; margin-top: 448px; } .img_teil153_8 { z-index:1; position: absolute; margin-left:1216px; margin-top: 448px; } .img_teil153_9 { z-index:1; position: absolute; margin-left:1216px; margin-top: 384px; } .img_teil140_oben { z-index:200; position: absolute; margin-left:0px; margin-top: -128px; } .img_teil140_1_oben { z-index:200; position: absolute; margin-left:-256px; margin-top: -128px; } .img_teil141_oben { z-index:2; position: absolute; margin-left:128px; margin-top: -128px; } .img_teil142_oben { z-index:2; position: absolute; margin-left:160px; margin-top: -128px; } .img_teil143_oben { z-index:2; position: absolute; margin-left:192px; margin-top: -128px; } .img_teil144_oben { z-index:2; position: absolute; margin-left:256px; margin-top: -128px; } .img_teil145_oben { z-index:2; position: absolute; margin-left:320px; margin-top: -128px; } .img_teil146_oben { z-index:2; position: absolute; margin-left:448px; margin-top: -128px; } .img_teil147_oben { z-index:1; position: absolute; margin-left:640px; margin-top: -128px; } .img_teil148_oben { z-index:1; position: absolute; margin-left:704px; margin-top: -128px; } .img_teil149_oben { z-index:2; position: absolute; margin-left:832px; margin-top: -128px; } .img_teil150_oben { z-index:2; position: absolute; margin-left:832px; margin-top: -96px; } /*2 ini quadrate*/ .img_teil151_oben { z-index:2; position: absolute; margin-left:864px; margin-top: -96px; } .img_teil152_oben { z-index:2; position: absolute; margin-left:864px; margin-top: -128px; } /* gabschluss zeile 3*/ .img_teil153_oben { z-index:1; position: absolute; margin-left:896px; margin-top: -128px; } .img_teil153_1_oben { z-index:1; position: absolute; margin-left:512px; margin-top: -192px; } .img_teil153_2_oben { z-index:1; position: absolute; margin-left:384px; margin-top: -192px; } .img_teil153_3_oben { z-index:1; position: absolute; margin-left:352px; margin-top: -192px; } .img_teil153_4_oben { z-index:1; position: absolute; margin-left:320px; margin-top: -192px; } .img_teil153_5_oben { z-index:1; position: absolute; margin-left:288px; margin-top: -192px; } .img_teil153_6_oben { z-index:1; position: absolute; margin-left:256px; margin-top: -192px; } .img_teil153_7_oben { z-index:1; position: absolute; margin-left:640px; margin-top: -192px; } .img_teil153_10_oben { z-index:1; position: absolute; margin-left:768px; margin-top: -192px; } .img_teil153_11_oben { z-index:1; position: absolute; margin-left:832px; margin-top: -192px; } .img_teil153_12_oben { z-index:1; position: absolute; margin-left:-64px; margin-top: -192px; } .img_teil153_13_oben { z-index:1; position: absolute; margin-left:64px; margin-top: -192px; } .img_teil153_14_oben { z-index:1; position: absolute; margin-left:960px; margin-top: -192px; } .img_teil153_15_oben { z-index:1; position: absolute; margin-left:1088px; margin-top: -128px; } .img_teil153_16_oben { z-index:1; position: absolute; margin-left:-128px; margin-top: -128px; } .img_teil153_8_oben { z-index:1; position: absolute; margin-left:192px; margin-top: -192px; } .img_teil153_9_oben { z-index:1; position: absolute; margin-left:128px; margin-top: -192px; } .img_teil240 { z-index:200; position: absolute; margin-left:0px; margin-top: 704px; } .img_teil1240_1 { z-index:200; position: absolute; margin-left:-256px; margin-top: 704px; } .img_teil241 { z-index:2; position: absolute; margin-left:832px; margin-top: 704px; } .img_teil242 { z-index:2; position: absolute; margin-left:864px; margin-top: 704px; } .img_teil243 { z-index:2; position: absolute; margin-left:896px; margin-top: 704px; } .img_teil244 { z-index:2; position: absolute; margin-left:960px; margin-top: 704px; } .img_teil245 { z-index:2; position: absolute; margin-left:320px; margin-top: 704px; } .img_teil245_2 { z-index:2; position: absolute; margin-left:256px; margin-top: 704px; } .img_teil245_3 { z-index:2; position: absolute; margin-left:192px; margin-top: 704px; } .img_teil246 { z-index:2; position: absolute; margin-left:384px; margin-top: 704px; } .img_teil247 { z-index:1; position: absolute; margin-left:640px; margin-top: 704px; } .img_teil248 { z-index:1; position: absolute; margin-left:704px; margin-top: 704px; } .img_teil249 { z-index:2; position: absolute; margin-left:128px; margin-top: 704px; } .img_teil250 { z-index:2; position: absolute; margin-left:128px; margin-top: 736px; } /*2 ini quadrate*/ .img_teil251 { z-index:2; position: absolute; margin-left:160px; margin-top: 736px; } .img_teil252 { z-index:2; position: absolute; margin-left:160px; margin-top: 704px; } .img_teil253 { z-index:2; position: absolute; margin-left:1088px; margin-top: 704px; } .img_teil254 { z-index:2; position: absolute; margin-left:1120px; margin-top: 704px; } .img_teil255 { z-index:2; position: absolute; margin-left:1088px; margin-top: 736px; } /* gabschluss zeile 3*/ .img_teil256 { z-index:200; position: absolute; margin-left:-128px; margin-top: 640px; } .img_teil256_2 { z-index:200; position: absolute; margin-left:-128px; margin-top: 576px; } .img_teil256_3 { z-index:200; position: absolute; margin-left:-64px; margin-top: 640px; } .img_teil257 { z-index:200; position: absolute; margin-left:960px; margin-top: 704px; } .img_teil60 { z-index:2; position: absolute; margin-left:0px; margin-top: 320px; } .img_teil61 { z-index:3; position: absolute; margin-left:128px; margin-top: 320px; } .img_teil62 { z-index:2; position: absolute; margin-left:192px; margin-top: 320px; } .img_teil63 { z-index:2; position: absolute; margin-left:256px; margin-top: 384px; } .img_teil64 { z-index:2; position: absolute; margin-left:320px; margin-top: 320px; } .img_teil64_2 { z-index:2; position: absolute; margin-left:-64px; margin-top: 320px; } .img_teil64_rechts_2 { z-index:2; position: absolute; margin-left:1024px; margin-top: 320px; } .img_teil64_rechts_3 { z-index:2; position: absolute; margin-left:1088px; margin-top: 320px; } .img_teil64_rechts_4 { z-index:2; position: absolute; margin-left:1088px; margin-top: 448px; } .img_teil65 { z-index:2; position: absolute; margin-left:384px; margin-top: 384px; } .img_teil66 { z-index:2; position: absolute; margin-left:384px; margin-top: 320px; } .img_teil67 { z-index:2; position: absolute; margin-left:448px; margin-top: 320px; } .img_teil68 { z-index:2; position: absolute; margin-left:512px; margin-top: 320px; } .img_teil69 { z-index:2; position: absolute; margin-left:576px; margin-top: 320px; } .img_teil70 { z-index:2; position: absolute; margin-left:640px; margin-top: 320px; } .img_teil71 { z-index:2; position: absolute; margin-left:768px; margin-top: 320px; } .img_teil72 { z-index:2; position: absolute; margin-left:896px; margin-top: 320px; } .img_teil73 { z-index:2; position: absolute; margin-left:960px; margin-top: 384px; } .img_teil74 { z-index:2; position: absolute; margin-left:896px; margin-top: 384px; } .img_teil90 { z-index:2; position: absolute; margin-left:0px; margin-top: 448px; } .img_teil91 { z-index:1; position: absolute; margin-left:0px; margin-top: 512px; } .img_teil92 { z-index:2; position: absolute; margin-left:128px; margin-top: 512px; } .img_teil93 { z-index:2; position: absolute; margin-left:256px; margin-top: 512px; } .img_teil94 { z-index:2; position: absolute; margin-left:320px; margin-top: 512px; } .img_teil95 { z-index:2; position: absolute; margin-left:352px; margin-top: 512px; } /* ganz großen quer */ .img_teil96 { z-index:2; position: absolute; margin-left:128px; margin-top: 448px; cursor: pointer; } .img_teil96_2 { z-index:20; opacity: 0; position: absolute; margin-left:128px; margin-top: 448px; cursor: pointer; } /* eventuell Z index*/ .img_teil97 { z-index:2; position: absolute; margin-left:384px; margin-top: 448px; } .img_teil98 { z-index:1; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: absolute; margin-left:416px; margin-top: 448px; cursor: pointer; } .img_teil99 { z-index:1; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; cursor: pointer; position: absolute; margin-left:544px; margin-top: 448px; } .img_teil98:hover { -webkit-filter: brightness(1.4); filter: brightness(1.4); } .img_teil99:hover { -webkit-filter: brightness(1.4); filter: brightness(1.4); } .img_teil100 { z-index:1; position: absolute; margin-left:608px; margin-top: 448px; } .img_teil101 { z-index:1; position: absolute; margin-left:640px; margin-top: 448px; } .img_teil102 { z-index:1; position: absolute; margin-left:704px; margin-top: 448px; } .img_teil103 { z-index:1; position: absolute; margin-left:608px; margin-top: 512px; } .img_teil104 { z-index:2; position: absolute; margin-left:736px; margin-top: 544px; } .img_teil105 { z-index:1; position: absolute; margin-left:736px; margin-top: 512px; } .img_teil106 { z-index:1; position: absolute; margin-left:768px; margin-top: 448px; } .img_teil106_rechts { z-index:1; position: absolute; margin-left:1024px; margin-top: 256px; } .img_teil106_aussen_oben { z-index:6; position: absolute; margin-left:448px; margin-top:-64px; } .img_teil106_2_aussen_oben { z-index:6; position: absolute; margin-left:512px; margin-top: -64px; } .img_teil106_3_aussen_oben { z-index:6; position: absolute; margin-left:64px; margin-top: -64px; } .img_teil107 { z-index:2; position: absolute; margin-left:768px; margin-top: 448px; } .img_teil108 { z-index:2; position: absolute; margin-left:896px; margin-top: 448px; } .img_teil109 { z-index:1; position: absolute; margin-left:960px; margin-top: 512px; } .counter { text-align:center; font-size: 16px; color: #4b4131; position:absolute; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; font-weight: bold; margin-left:790px !important; margin-top:492px !important; opacity: 0.7; z-index:99999 !important; } .dock { position: relative; height: 50px; text-align: center; z-index:100; background-color:transparent; } .dock img { border: none; width:300px; } /* dock - top */ .dock-container { position: absolute; height: 50px; padding-left: 20px; } a.dock-item { display: block; width: 40px; color: #000; position: absolute; top: 0px; text-align: center; text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; font-family: "San Francisco"; } .dock-item img { border: none; margin: 5px 10px 0px; width: 100%; } .dock-item span { display: none; padding-left: 20px; } /* dock2 - war auf 40 BAUERbottom position:absolute; top: 63%; left:50%; transform: translate(-50%, -63%); VERISON OHNE ABSOLUTE BEI 'IMG'S #dock2 { width: 100%; height: 150px; bottom: 42.5%; position: absolute; top: 53%; left:-7px; z-index:2; } */ .box_btn3_text::-webkit-scrollbar { display: block; width: 5px; z-index: 1; } .box_btn3_text::-webkit-scrollbar-track { background: transparent;# z-index: 1; } .box_btn3_text::-webkit-scrollbar-thumb { background-color: #ffffff; border-right: none; border-left: none; border-style: solid; border-color:#ffffff; border-width: 1px; border-radius: 20px; z-index: 1; } .box_btn3_text::-webkit-scrollbar-track-piece:start { background: transparent; margin-top: 10px; z-index: 1; } .box_btn3_text::-webkit-scrollbar-track-piece:end { background: transparent; margin-bottom: 5px; z-index: 1; } .box2_text::-webkit-scrollbar { display: block; width: 5px; margin-left: -5px; z-index: 1; } .box2_text::-webkit-scrollbar-track { background: transparent; z-index: 1; } .box2_text::-webkit-scrollbar-thumb { background-color: #ffffff; border-right: none; border-left: none; border-style: solid; border-color:#ffffff; border-width: 1px; border-radius: 20px; margin-left: -15px; z-index: 1; } .box2_text::-webkit-scrollbar-track-piece:start { background: transparent; margin-top: 10px; z-index: 1; } .box2_text::-webkit-scrollbar-track-piece:end { background: transparent; margin-bottom: 5px; z-index: 1; } .box3_text::-webkit-scrollbar { display: block; width: 5px; z-index: 1; } .box3_text::-webkit-scrollbar-track { background: transparent; z-index: 1; } .box3_text::-webkit-scrollbar-thumb { background-color: #ffffff; border-right: none; border-left: none; border-style: solid; border-color:#ffffff; border-width: 1px; border-radius: 20px; z-index: 1; } .box3_text::-webkit-scrollbar-track-piece:start { background: transparent; margin-top: 10px; z-index: 1; } .box3_text::-webkit-scrollbar-track-piece:end { background: transparent; margin-bottom: 5px; z-index: 1; } .box4_text::-webkit-scrollbar { display: block; width: 5px; z-index: 1; } .box4_text::-webkit-scrollbar-track { background: transparent; z-index: 1; } .box4_text::-webkit-scrollbar-thumb { background-color: #ffffff; border-right: none; border-left: none; border-style: solid; border-color:#ffffff; border-width: 1px; border-radius: 20px; z-index: 1; } .box5_text::-webkit-scrollbar-track-piece:start { background: transparent; margin-top: 10px; z-index: 1; } .box5_text::-webkit-scrollbar-track-piece:end { background: transparent; margin-bottom: 5px; z-index: 1; } .box5_text::-webkit-scrollbar { display: block; width: 5px; z-index: 1; } .box5_text::-webkit-scrollbar-track { background: transparent; z-index: 1; } .box5_text::-webkit-scrollbar-thumb { background-color: #ffffff; border-right: none; border-left: none; border-style: solid; border-color:#ffffff; border-width: 1px; border-radius: 20px; z-index: 1; } .box5_text::-webkit-scrollbar-track-piece:start { background: transparent; margin-top: 10px; z-index: 1; } .box5_text::-webkit-scrollbar-track-piece:end { background: transparent; margin-bottom: 5px; z-index: 1; } /* scroll geht nicht wegen index so würds gehn z-index: 999; visibility: hidden; 30.12 reingenommen position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); und display: flex; bei allen te3xtboxes raus somit passt der text padding hängt mit width und heioght zusammen */ .box_copy_text{ z-index: -1 !important; width: 190px; height: 100px; padding-left: 0px; padding-top:0px; padding-bottom:10px; border-style: solid; border-color:#d5d3d3; border-width: 0px; border-radius: 0px; background-color: transparent; text-align: center; position: absolute; top: 83%; left:41.5%; transform: translate(-50%, -50%); } #box_copy_text { position: absolute; -webkit-animation-duration: 10s; -webkit-transform-origin: 0% 0%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-name: tremble; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } .box_copy_text_start { text-align:center; position: absolute; top: 83%; left:41.5%; transform: translate(-41.5%, -45%); -webkit-animation-duration: 19s; -webkit-transform-origin: 0% 0%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-name: tremble; -webkit-transition: all 5s ease-in-out; transition: all 5s ease-in-out; } .box_copy_text_stop { text-align:center; position: absolute; top: 83%; left:41.5%; transform: translate(-43.5%, -45%); animation-play-state: paused; } .box_btn3_text{ z-index: 1; opacity: 0; width: 718px; height: 285px; padding-left: 20px; padding-right: 20px; padding-top:15px; padding-bottom:10px; border-style: solid; border-color:#d5d3d3; border-width: 0px; border-radius: 0px; background: linear-gradient(#555353, #4a4a4a); border-radius: 6px; box-shadow: inset 0px 3px 3px rgba(0,0,0,0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); position: absolute; top:49.8%; left:50%; transform: translate(-50%, -50%); text-align: center; overflow-y: hidden; opacity: 0; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -ms-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; } .box_btn3_text_1{ z-index: 1; opacity: 0; width: 359px; height: auto; padding-left: 10px; padding-right: 10px; padding-top:20px; padding-bottom:10px; border-style: solid; border-color:#d5d3d3; border-width: 0px; border-radius: 0px; background-color:transparent; position: absolute; top:50%; left:25%; transform: translate(-50%, -50%); text-align: right; overflow-y: hidden; opacity: 1; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -ms-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; } .box_btn3_text_2{ z-index: 1; opacity: 0; width: 359px; height: auto; padding-left: 10px; padding-right: 10px; padding-top:20px; padding-bottom:10px; border-style: solid; border-color:#d5d3d3; border-width: 0px; border-radius: 0px; background-color:#000; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); text-align: left; overflow-y: hidden; opacity: 1; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -ms-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; } .box2_text{ z-index: 1; opacity: 0; width: 718px; height: 285px; padding-left: 20px; padding-right: 20px; padding-top:15px; padding-bottom:10px; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; text-align:center; font-size: 16px; color: #ffffff; float: left; border-style: solid; border-color:#d5d3d3; border-width: 0px; border-radius: 0px; background-color:#4a4a4a; position: absolute; top: 49.8%; left:50%; transform: translate(-50%, -50%); background: linear-gradient(#555353, #4a4a4a); border-radius: 6px; box-shadow: inset 0px 3px 3px rgba(0,0,0,0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); overflow-y: scroll; opacity: 0; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -ms-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; } .box3_text{ z-index: 1; opacity: 0; width: 718px; height: 285px; padding-left: 20px; padding-right: 20px; padding-top:15px; padding-bottom:10px; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; text-align:center; font-size: 16px; color: #ffffff; float: left; border-style: solid; border-color:#d5d3d3; border-width: 0px; border-radius: 0px; background-color:#4a4a4a; position: absolute; top: 49.8%; left:50%; transform: translate(-50%, -50%); background: linear-gradient(#555353, #4a4a4a); border-radius: 6px; box-shadow: inset 0px 3px 3px rgba(0,0,0,0.5), 0px 1px 0px rgba(255, 255, 255, 0.2); overflow-y: scroll; opacity: 0; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -ms-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; } .box4_text{ z-index: 1; opacity: 0; width: 738px; height: 289px; padding-left: 20px; padding-top:20px; padding-bottom:10px; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; text-align:center; font-size: 16px; color: #ffffff; float: left; border-style: solid; border-color:#d5d3d3; border-width: 0px; border-radius: 0px; background-color:#4a4a4a; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); overflow-y: scroll; opacity: 0; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -ms-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; } .box5_text{ z-index: 1; opacity: 0; width: 738px; height: 289px; padding-left: 20px; padding-top:20px; padding-bottom:10px; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; text-align:center; font-size: 16px; color: #ffffff; float: left; border-style: solid; border-color:#d5d3d3; border-width: 0px; border-radius: 0px; background-color:#4a4a4a; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); overflow-y: scroll; opacity: 0; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -ms-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; } .text { font-size: 20px; line-height:24px; color: #999999; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; } .text_btn { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; cursor: pointer; } .text_btn:hover { color:#e09408; cursor: pointer; } .arrow-top{ display: block; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; cursor: pointer; } .arrow-top:after { border-style: solid; content: ''; border-color: transparent transparent #999999; transparent; border-width: 0 10px 10px 10px; } .arrow-top:hover:after { border-style: solid; content: ''; border-color: transparent transparent #e09408; transparent; border-width: 0 10px 10px 10px; } .text_info { text-align:left; font-size: 20px; color: #999999; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; margin-left:10px; line-height: 22px; } .text_mini { text-align:center; font-size: 12px; color: #cccccc; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; } .space { text-align:center; font-size: 12px; color: #4a4a4a; } .headline { font-size:22px; color: #ffffff; font-family: 'FF Good Pro'; font-weight: 500; font-style: normal; text-shadow: 0px 0px 0 rgb(33,33,33), 0px 1px 0 rgb(-78,-78,0), 0px 2px 1px rgba(0,0,0,0.57), 0px 2px 1px rgba(0,0,0,0.5), 0px 0px 1px rgba(0,0,0,.2); } /* ACHTUNG 30.12. habe hier background-color reingegeben ohne geht scroll nicht hängt mit indizies zusammen mit back-farbe und height 0 gehts 02.01. bottom: 42.5%; raus */ #dock2 { width: 100%; height: 0px; position: absolute; top: 38%; left:86px; z-index:200; background-color: #000 ; position: absolute; } .dock-container2 { z-index:300; position: absolute; height: 0px; padding-left: 20px; background-color: #cccccc ; } a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 80px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none; font-family: "San Francisco"; } /* erster:links zweiter runter , farbe 3b3b3a*/ .dock-item2 span { position: absolute; min-width:150px; line-height:30px; display: none; padding-left: 0px; padding-right: 0px; margin-left:122px; margin-top:-35px; background-color:#ececeb; border-radius: 5px; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; color: #131312; font-size: 15px; font-weight:normal; text-shadow: 0 0px 0px #000; box-shadow: -1px -1px 3px rgb(0 0 0 / 0.2), 1px 1px 2px rgb(0 0 0 / 0.2); } .dock-item2 span::after { content: ""; position: absolute; font-family: -apple-system, BlinkMacSystemFont, sans-serif; border-width: 15px; border-style: solid; border-color: #000000 transparent transparent transparent; filter: drop-shadow(rgba(0, 0, 0, 3) 0 10px 20px); display: flex; position:absolute; top: 50%; left:46%; transform: translate(-50%, -46%); margin-top:12%; border: 6px; border-color: #000000; /* black */ border-style: solid; border-color: transparent transparent #ececec #ececec; transform-origin: -6px 0px; transform: rotate(-45deg); box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2); } .span2::after { font-family: -apple-system, BlinkMacSystemFont, sans-serif; content: ""; position: absolute; border-style: solid; border-color: transparent transparent black transparent ; border-bottom-color: #ececec; /* black */ font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; color: #131312; font-size: 15px; font-weight:normal; margin-left: 17% !important; margin-top: -12% !important; border: 15px; border-color: #000000; /* black */ border-style: solid; border-color: transparent transparent #ececec #ececec; transform-origin: 0 0; transform: rotate(135deg) !important; box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2); } .span3::after { content: ""; position: absolute; font-family: -apple-system, BlinkMacSystemFont, sans-serif; border-width: 15px; border-style: solid; border-color: #000000 transparent transparent transparent; filter: drop-shadow(rgba(0, 0, 0, 3) 0 10px 20px); display: flex; position:absolute; top: 30%; left:46%; transform: translate(-50%, -46%); margin-top:12%; font-family: 'FF Good Pro'; font-weight: 300; font-style: normal; color: #131312; font-size: 15px; font-weight:normal; border: 6px; border-color: #000000; /* black */ border-style: solid; border-color: transparent transparent #ececec #ececec; transform-origin: -6px 0px; transform: rotate(-45deg); box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.2); } .dock-item2 img { border: none; margin: 5px 10px 0px; width: 100%; cursor: pointer; z-index:9000; } #img_btn1 { cursor: pointer; position: absolute; -webkit-animation-duration: 16s; -webkit-transform-origin:50% 5cm; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-name: tremble; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #img_btn1:hover { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; -webkit-filter: brightness(1.4); filter: brightness(1.4); } .img_btn1_off { -webkit-filter: brightness(1); filter: brightness(1); } .img_btn1_clicked { animation-play-state: paused; -webkit-filter: brightness(1.4); filter: brightness(1.4); } #img_btn2 { position: absolute; cursor: pointer; -webkit-animation-duration: 19s; -webkit-transform-origin: 40% 40%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-name: tremble; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #img_btn2:hover { animation-play-state: paused; -webkit-filter: brightness(1.4); filter: brightness(1.4); } .img_btn2_off { -webkit-filter: brightness(1); filter: brightness(1); } .img_btn2_clicked { animation-play-state: paused; -webkit-filter: brightness(1.4); filter: brightness(1.4); } #img_btn3 { cursor: pointer; position: absolute; -webkit-animation-duration: 10s; -webkit-transform-origin: 50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-name: tremble; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #img_btn3:hover { animation-play-state: paused; -webkit-filter: brightness(1.4); filter: brightness(1.4); } .img_btn3_off { -webkit-filter: brightness(1); filter: brightness(1); } .img_btn3_clicked { animation-play-state: paused; -webkit-filter: brightness(1.4); filter: brightness(1.4); } #img_btn4 { position: absolute; -webkit-animation-duration: 10s; -webkit-transform-origin: 50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-name: tremble; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out; display:none; } #img_btn4:hover { animation-play-state: paused; -webkit-filter: brightness(1.2); filter: brightness(1.2); } .img_btn4_off { -webkit-filter: brightness(1); filter: brightness(1); } .img_btn4_clicked { animation-play-state: paused; -webkit-filter: brightness(1.2); filter: brightness(1.2); } #img_btn5 { display:none; position: absolute; -webkit-animation-duration: 12s; -webkit-transform-origin: 30% 30%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-name: tremble; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } #img_btn5:hover { animation-play-state: paused; -webkit-filter: brightness(1.2); filter: brightness(1.2); } .img_btn5_off { -webkit-filter: brightness(1); filter: brightness(1); } .img_btn5_clicked { animation-play-state: paused; -webkit-filter: brightness(1.2); filter: brightness(1.2); } @-webkit-keyframes tremble { 0% { -webkit-transform: translate(2px, 1px) rotate(2deg);} 10% { -webkit-transform: translate(-1px, 0px) rotate(-1deg); } 20% { -webkit-transform: translate(-2px, 0px) rotate(-2deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(2px, -1px) rotate(2deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-2px, 1px) rotate(-2deg); } 70% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 80% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 90% { -webkit-transform: translate(0px, 1px) rotate(0deg); } 100% { -webkit-transform: translate(2px, 0px) rotate(2deg); } } #main-column { float:left; margin:auto; width:220px; } .left-column { float:left; margin:auto; width:220px !important; } .middle-column { float:left; width:220px !important; margin-left: 10px; } .right-column { float:left; width:220px !important; margin-left: 20px; } .wrapper { z-index:6; width:780px; margin-left: auto; margin-right: auto; margin-top:27%; } .wrapper2 { z-index:7; width:250px; height: 100px; margin-left: auto; margin-right: auto; margin-top:10%; font-size: 16px; color:#3d3d3d; text-align:center; font-weight:bold; font-family: "San Francisco"; } ‚ .wrapper3 { z-index:8; width:800px; height: 400px; margin-left: auto; margin-right: auto; margin-top:25%; font-size: 20px; color:#3d3d3d; text-align:center; font-weight:bold; background-color:#33FFCC; } .wrapper4 { z-index:9; width:220px; height: 100px; margin-left: auto; margin-right: auto; margin-top:10%; font-size: 16px; color:#3d3d3d; text-align:center; font-weight:bold; background-color:#cccccc; position: absolute; bottom: 0; width: 100%; } div { } .box {text-align:center; font-size: 16px; color:#3d3d3d; float: left; width: 220px; margin-right: 0%; padding: 20px; font-family: "San Francisco"; } .box2 { z-index:1000; font-family: "San Francisco"; text-align:center; font-size: 16px; color: #3d3d3d; float: left; width: 220px; padding: 10px; } .box3 { z-index:1000; font-family: "San Francisco"; text-align:center; font-size: 18px; color: #3d3d3d; float: left; width: 220px; padding: 10px; } .box4 { display:none; } .copy { margin-left: auto; margin-right: auto; } .wrapper_text { z-index:5; width:100%; height:auto ; margin-top:-20px; } .lines { position: absolute; top: 0; left: 0; right: 0; height: 100%; margin: auto; width: 90vw; } .line { position: absolute; width: 1px; height: 120%; top: 0; left: 25%; background: transparent; overflow: hidden; z-index:0; } .line::after { content: ""; display: block; position: absolute; height: 8vh; width: 120%; top: -50%; left: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%); -webkit-animation: drop 7s 0s infinite; animation: drop 7s 0s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); } .line:nth-child(1) { margin-left: -25%; } .line:nth-child(1)::after { -webkit-animation-delay: 2s; animation-delay: 2s; } .line:nth-child(3) { margin-left: 25%; } .line:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .line2 { position: absolute; width: 1px; height: 120%; top: 0; left: 75%; background: transparent; overflow: hidden; z-index:0; } .line2::after { content: ""; display: block; position: absolute; height: 8vh; width: 120%; top: -50%; left: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #e09408 75%, #e09408 100%); -webkit-animation: drop 7s 0s infinite; animation: drop 7s 0s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); } .line2:nth-child(1) { margin-left: -25%; } .line2:nth-child(1)::after { -webkit-animation-delay: 2s; animation-delay: 2s; } .line2:nth-child(3) { margin-left: 25%; } .line2:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .line3 { position: absolute; width: 2px; height: 250%; /* linie quer von oben*/ top: -69.9%; /* start*/ left:43%; background: transparent; overflow: hidden; z-index:999; transform: rotate(-90deg) !important; } .line3::after { content: ""; display: block; position: absolute; height: 8vh; width: 180%; top: 49.8%; z-index:999; left: 47%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #e09408 75%, #e09408 100%); -webkit-animation: drop2 9s 0s infinite; animation: drop2 9s 0s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); } /* erste lkinie oben ---- hier zweite linie*/ .line3:nth-child(1) { margin-left: -25%; } .line3:nth-child(1)::after { -webkit-animation-delay: 2s; animation-delay: 2s; } /* erste lkinie oben ---- hier 3 linie*/ .line3:nth-child(3) { margin-left: 25%; } .line3:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .line4 { position: absolute; width: 2px; /* linie quer von oben*/ height: 200%; top: -77.9%; /* start*/ left:53%; background: transparent; overflow: hidden; z-index:1; transform: rotate(-90deg) !important; } .line4::after { content: ""; display: block; position: absolute; height: 8vh; width: 120%; top: 50%; z-index:1; left: 25%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #e09408 75%, #e09408 100%); -webkit-animation: drop3 6s 0s infinite; animation: drop3 6s 0s infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); } @-webkit-keyframes drop { 0% { top: -50%; } 100% { top: 120%; } } @keyframes drop { 0% { top: -50%; } 100% { top: 120%; } } @-webkit-keyframes drop2 { 0% { top: -15%; } 100% { /* wie weit*/ top: 140%; } } @keyframes drop2 { 0% { /* wie weit - dann unter zusöätzliches backimg verstecken*/ top: -15%; } 100% { top: 140%; } } @-webkit-keyframes drop3 { 0% { top: -25%; } 100% { /* wie weit*/ top: 120%; } } @keyframes drop3 { 0% { /* wie weit - dann unter zusöätzliches backimg verstecken*/ top: -25%; } 100% { top: 120%; } } input, textarea, select { display: inline-block; font-family: 'FF Good Pro'; font-weight:300; font-style: normal; font-size: 20px; font-style: normal; line-height: 100%; padding: 8px; margin-top: 8px !important; margin-bottom: 8px !important; color: #F80 !important; background-color: #000; resize: none; border: none; text-align: left; text-align-last: left; box-sizing: border-box; -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5); -webkit-border-radius: 8px; border-radius: 8px; -webkit-appearance: none; -moz-appearance:none; } button { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; font-size: 20px; font-style: normal; padding: 8px; color: #F80 !important; text-align: center; text-align-last: center; -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5); -webkit-border-radius: 0px; border-radius: 0px; width:100% !important; max-width:720px !important; border: none !important; } .js-validate-error-label { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 0px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; color: #F80; font-size:14px; list-style: none !important; } .js-validate-error-label .ul { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 0px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; color: #F80; font-size:14px; list-style: none !important; } .js-validate-error-label .li { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 0px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; color: #F80; font-size:14px; list-style: none !important; } .fc-status .ul { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 0px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; color: #F80; font-size:14px; list-style: none !important; } .fc-status .li { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 0px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; color: #F80; font-size:14px; list-style: none !important; } .success_text { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 0px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; color: #000; font-size:18px; } textarea { scrollbar-base-color: #F80; scrollbar-face-color: #F80; overflow: auto; } input[type=number] {-moz-appearance: textfield;} -webkit-inner-spin-button { -webkit-appearance: none;} -webkit-outer-spin-button { -webkit-appearance: none;} input:focus, textarea:focus { background-color: #444; color: #FFF; } a:link { color: #888; text-decoration: none; } a:visited { color: #888; text-decoration: none; } a:hover { color: #F80; text-decoration: none; } a:active { color: #888; text-decoration: none; } .txt1 { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 0px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; } .txt2 { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 1px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; } .txt3 { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 100%; letter-spacing: 1px; padding-left: 16px; padding-right: 16px; margin: 0px; pointer-events: none; } .txt31 { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 100%; letter-spacing: 1px; padding-left: 16px; padding-right: 16px; margin: 0px; } .txt4 { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; line-height: 120%; letter-spacing: 1px; padding-left: 8px; padding-right: 8px; margin: 0px; pointer-events: none; } .blank { font-family: 'FF Good Pro'; font-weight:300; font-style: normal; font-size: 8px; line-height: 100%; letter-spacing: 0px; margin: 0px; pointer-events: none; } .cent { text-align: center; } .just { text-align: justify; } .bold { font-weight: bold; } .selON { pointer-events: auto; } .selOFF { pointer-events: none; } p.col0 { color:#F80; } p.col1 { color:#000; } p.col2 { color:#888; } p.col3 { color:#FFF; } p.col4 { color: rgba(0, 0, 0, 0.5); } .col5 { color: rgba(255, 255, 255, 0.2); } p.size1 { font-size: 32px; } p.size2 { font-size: 24px; } p.size3 { font-size: 22px; } p.size4 { font-size: 16px; } p.size5 { font-size: 12px; } p.txtshd1 { text-shadow: 0px 4px 8px rgba(0,0,0, 0.4); } p.txtshd2 { text-shadow: 0px 4px 8px rgba(0,0,0, 0.3); } div.horicent { pointer-events: none; } div.horicent2 { pointer-events: auto; } div.divshd1 { background-color: #000; -webkit-box-shadow: 0px 4px 32px rgba(0,0,0, 0.3); box-shadow: 0px 4px 32px rgba(0,0,0, 0.3); -webkit-border-radius: 16px; border-radius: 16px; -webkit-appearance: none; } div.divshd2 { background-color: #000; -webkit-border-radius: 16px; border-radius: 16px; -webkit-appearance: none; } div.border1 { border-top: 2px; border-top-color: #74634b; border-top-style: solid; border-bottom: 2px; border-bottom-color: #857359;; border-bottom-style: solid; margin-bottom: 2px; } iframe:focus { outline: none; } iframe[seamless] { display: block; } .noshow { display: none; } /* PHP Email Form Messages ------------------------------*/ .error-message { display: none; background: #ae8015; color: #ffffff; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600; font-size:18px; text-align:center; } .sent-message { display: none; color: #ffffff; background: #ae8015; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600; font-size:18px; text-align:center; } .loading { display: none; background: var(--surface-color); text-align: center; padding: 15px; margin-bottom: 24px; font-size:18px; text-align:center; } .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid var(--accent-color); border-top-color: var(--surface-color); animation: php-email-form-loading 1s linear infinite; font-size:18px; text-align:center; } .submit_newsletter { display: none; background: #ae8015; color: #ffffff; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600; font-size:18px; text-align:center; } @keyframes php-email-form-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }