/* /////////////////// FORMAT BASIC LAYOUT ////////////////// */ html { font-size:0.890em; font-weight:300; letter-spacing:0.022em; background-image: url(pic/bg.png); background-attachment:fixed; background-color:#DBB724;} .container { max-width:100%; } header img.LOGO_NAV {display: block; position:fixed; z-index:9999; width:68px; top:32px; left:32px} header nav div.social {display:block; position:fixed; top:48px; right:12px; height:48px; overflow:hidden; width:160px; z-index:99999;} header nav div.social img {display:inline-block; float:left; width: 60px; height: auto; padding-left: 10px; padding-right: 10px;} div.first { height:100vh; width:100vw; position:fixed; left:0px; z-index:200; display:block; } div.lp_bottom, div.lp_top { display:block; position:fixed; width:100%; height:10%; height:25vh; z-index:8888; background-repeat:no-repeat; background-size:102%; background-size:contain; left:0px; } div.lp_bottom { padding-top:12vh; background-image:url(pic/bg_2.svg); background-position:bottom; bottom:0px; z-index: 9999 !important; font-size:3vw; letter-spacing:0.03em; color: rgba(255,255,255,1.00); text-shadow: 1px 1px 3px #000000; text-align:center; font-family:Bangers; } div.lp_top { background-image:url(pic/bg_3.svg); background-position:top; top:0px; } img.shake1 { float: left !important; display:block; width: 18%; z-index: 99999 !important; margin-left: 41%; margin-top: 26vh; opacity: 1.0; position: absolute; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;} img.shake1.endpos { width: 140px; margin-left: 3%; margin-top: 2vh; } p.headslogan { width:100%; font-family: 'Bangers', cursive; z-index:9999999; font-size:3.33vw; text-align:center; letter-spacing:0.03em; color: #ffffff; text-shadow: 1px 1px 9px #000; margin-top:4%; } /* MAIN */ div.comingSoon { position:relative; width: 100%; height: auto; margin: 15vh auto 0 auto; text-align:center;} img.box, .slogan, img.character { display:inline-block; position:relative; z-index: 9999 !important;} div.BG-characters { position:absolute; display:block; top:28vh; right:0%; width:15%; opacity:0.75; overflow:visible;} div.BG-characters img.characteraddition { position:absolute; display:block; } div.BG-characters img.characteraddition:first-child { width:55%; margin-left:6%; margin-top:2%; z-index: 9998 !important;} div.BG-characters img.characteraddition:last-child { width:40%; margin-left:37%; margin-top:5%; z-index: 9997 !important; opacity:0.9;} img.box { width: 25%; float: left !important; opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; margin:15vh 0px 0px 0px; } div.slogan { width:50vw; display:block; position:absolute; height:35vw; text-align:center; z-index:9999999; background-image:url(pic/speakbubble.svg); background-size:100%; background-size:contain; background-repeat:no-repeat; background-position:center top; left:50%; margin-left:-25vw; } p.slogan { font-family: 'Bangers', cursive; width:70%; margin:12% auto 0px 11%; font-size:1.85vw; text-align:left; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; letter-spacing:0.03em; color: rgba(255,255,255,1.00); text-shadow: 1px 1px 3px #000000; } img.character { width:16%; opacity:1; margin-top:21vh; margin-right:11vw;float: right !important; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } div.dialog:hover img.character { opacity:1; width:22%; margin-top:5vh; } /* Portrait Layout */ @media only screen and (orientation : portrait) { header img.LOGO_NAV { top:5px; left:16px; width:48px;} header nav div.social { top:12px; right:0px; height:48px; width:130px; } p.headslogan { font-size:4.8vw; letter-spacing:0.02em; margin-top:11vh; color:rgba(255,255,255,1.00);} div.lp_bottom { padding-top:15vh; font-size:4.5vw; letter-spacing:0.02em; } img.character { width:26%; margin-top:30vh; } div.dialog:hover img.character { width:28%; margin-top:26vh; } div.BG-characters { top:52vh; } img.shake1 { margin-top: 40vh; } img.shake1.endpos { width: 96px; margin-left: 2%; margin-top: 6px; } img.box { width:30%; margin:-6vh 35% 0px 35%; } div.slogan { width:100vw; height:70vw; margin-left:-50vw; margin-top:12vh;} p.slogan { font-size:3.67vw; } /* img.shake1.endpos { margin-top: -32px; width: 48px;} */ } @media only screen and (max-width: 764px) { img.shake1.endpos { margin-top: -32px; width: 48px;} } /* //// iPad Landscape : ONLY NAVI Größer --> besser für Touch //// */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 1040px) { } /* //// iPad Portrait //// */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 765px) { } /* //// iPhone Landscape //// */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 690px) { } /* //// iPhone Portrait //// */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1), only screen and (max-width: 420px) { }