body { font-family: 'Days One', sans-serif; font-weight: normal; }

/* Main Settings */
section { display: none; position: fixed; width: 100%; height: 100%; }
section div { position: absolute; }
section .elements { position: relative; width: 1000px; height: 1080px; margin: 0 auto; z-index: 100; }

.center { width: 100%; text-align: center; }

/* Thread */
.thread { position: fixed; top: 0; left: 8%; width: 62px; height: 100%; background: url('../../de/assets/img/content/thread.png') no-repeat; z-index: 1001; }
.thread .node { position: absolute; width: 62px; height: 62px; background: url('../../de/assets/img/content/node.png') no-repeat; }

/* Jump to scene */
.jumptoscene { display: none; z-index: 9999; position: fixed; right: 60px; height: 32px; width: 32px; background: #870B0F; }
.jumptoscene-next { bottom: 60px; }
.jumptoscene-previous { bottom: 140px; }

/* Section items */
section .item img { position: absolute; }
section .item img.hover { display: none; }

/* Noscript element */
.noscript { position: absolute; width: 90%; left: 5%; padding: 100px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 1002; }
.noscript .wrapper { padding: 30px 70px; background: #FFF; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0.9; -webkit-box-shadow: 10px 10px 0 0 rgba(0,0,0,0.90); -moz-box-shadow: 10px 10px 0 0 rgba(0,0,0,0.90); box-shadow: 10px 10px 0 0 rgba(0,0,0,0.90); }


/* section dialogs */
section dialog { display: none; position: absolute; left: 50%; top: -100px; width: 600px; padding: 75px 55px 0 55px; margin: 0 0 0 -355px; background: #9F1919; z-index: 9999; opacity: 0; color: #FFF; -webkit-box-shadow: 10px 10px 0 0 rgba(0,0,0,0.90); -moz-box-shadow: 10px 10px 0 0 rgba(0,0,0,0.90); box-shadow: 10px 10px 0 0 rgba(0,0,0,0.90); }
section dialog h3,
section dialog p,
section dialog .close { font-size: 26px; line-height: 40px; color: #FFF; }
section dialog h3 { margin: 0; padding: 0; font-size: 34px; }
section dialog .close { padding: 20px; float: right; margin: -70px -30px 0 0; text-decoration: none; font-weight: bold; font-size: 38px; }
section dialog .social-bar { position: relative; margin: 0 0 15px 0; border-top: 3px solid #CE8C8D; }
section dialog .social-bar a { display: block; float: left; padding: 20px; border-right: 3px solid #CE8C8D; }
section dialog .social-bar a:last-child { border: 0 none; }
section dialog .social-bar a.text { color: #FFF; font-size: 26px; line-height: 52px; text-decoration: none; }
section dialog .social-bar a.text:hover { text-decoration: underline; }

/* section backgrounds */
section .background-top { position: absolute; top: 0; width: 100%; height: 60%; }
section .background-bottom { position: absolute; top: 60%; width: 100%; height: 40%; }


/* section :: language */
.language { display: block; z-index: 10; }
.language .logo { top: 30px; }
.language .hannah { left: 50%; top: 270px; margin: 0 0 0 -89px; }
.language .lang { top: 325px; }
.language .lang a { display: block; width: 307px; height: 239px; direction: ltr; text-indent: -9999em; }
.language .lang:hover { background-position: bottom left; }
.language .de { left: 50px; background: url('../../assets/img/content/de.png') no-repeat top left; }
.language .en { right: 50px; background: url('../../assets/img/content/en.png') no-repeat top left; }
.language .background-top {  background: #7BB1BF; }
.language .background-bottom { background: #766857; }


/* section :: preloader */
.preloader { display: block; z-index: 10; }
.preloader .logo { top: -100px; opacity: 0; }
.preloader .loading { display: block; width: 100%; }
.preloader .loading div { opacity: 0; }
.preloader .loading img { width: 100%; height: 100%; }
.preloader .loading .sleep-01 { top: 480px; left: 600px; }
.preloader .loading .sleep-02 { top: 410px; left: 630px; }
.preloader .loading .sleep-03 { top: 330px; left: 680px; }
.preloader .child { opacity: 0; top: 200px; left: 340px; -webkit-animation: rotate15Deg 3.0s infinite; -moz-animation: rotate15Deg 3.0s infinite; animation: rotate15Deg 3.0s infinite; }
.preloader .child-wake { top: 200px; left: 340px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; }
.preloader .child-wakeup { display: none; top: 360px; left: 340px; z-index: 100; }
.preloader .background-top {  background: #7BB1BF; }
.preloader .background-bottom { background: #766857; }


/* section :: splash */
.splash { height: 100%; }
.splash .logo { top: 55px; }
.splash .child-wakeup { top: 360px; left: 340px; }
.splash .carpet { top: -200px; }
.splash .person { opacity: 0; left: -200px; }
.splash .hannah-01 { top: 460px; }
.splash .hannah-02 { top: 285px; }
.splash .hannah-03 { top: 280px; }
.splash .hannah-04 { top: 311px; }
.splash .scroll-now { display: none; top: 880px; left: 280px; }
.splash .background-top { background: #7BB1BF; z-index: 2; }
.splash .background-bottom { background: #766857; z-index: 2; }
.splash .background-top-scene2 { position: absolute; top: 0; width: 100%; height: 60%; z-index: 1; background-color: #DEFCF8; background-image: linear-gradient(90deg, transparent 50%, #7BB1BF 50%); background-size: 240px 240px; }


/* section :: childsroom */
.childsroom { z-index: 1000; }
.childsroom .window { left: 50%; margin-left: -246px; width: 493px; height: 339px; overflow: hidden; }
.childsroom .window .layer { position: absolute!important; }
.childsroom .dresser { top: 445px; }
.childsroom .books { top: 183px; }
.childsroom .letters { top: 507px; }
.childsroom .baby { top: 345px; }
.childsroom .baby-cry-1 { top: 450px; left: 570px; }
.childsroom .baby-cry-2 { top: 380px; left: 300px; }
.childsroom .mother { top: 310px; z-index: 2; }
.childsroom .mother-2 { top: 310px; right: 200px; z-index: 2; }
.childsroom .baby-wake { top: 345px; left: 330px; z-index: 1; }
.childsroom .item { top: 468px; left: 542px; cursor: pointer; z-index: 3; }
.childsroom .item img { position: absolute; }
.childsroom .item img.hover { display: none; }
.childsroom .item-arrow { top: 100px; left: 520px; opacity: 0; z-index: 2; }
.childsroom .background-top { background-color: #DEFCF8; background-image: linear-gradient(90deg, transparent 50%, #7BB1BF 50%); background-size: 240px 240px; }
.childsroom .background-bottom { background: #62364C; }
.childsroom .wheelchair { right: -1000px; top: 400px; }


/* section :: kindergarten */
.kindergarten { z-index: 990; }
.kindergarten .move-scene { width: 1800px; left: 50%; margin-left: -900px; }
.kindergarten .hands { left: 0; top: 420px; }
.kindergarten .child-hands { left: 830px; top: 430px; }
.kindergarten .window { width: 493px; height: 339px; left: 50%; top: 125px; margin-left: -246px; overflow: hidden; }
.kindergarten .window .layer { position: absolute!important; }
.kindergarten .kindergarten-logo { left: 0; top: 190px; }
.kindergarten .hannah { top: 550px; }
.kindergarten .boy { top: 450px; }
.kindergarten .childs { top: 650px; }
.kindergarten .tap-1 { position: absolute; opacity: 0; bottom: 0; left: 180px; }
.kindergarten .tap-2 { position: absolute; opacity: 0; bottom: 70px; left: 140px; }
.kindergarten .tap-3 { position: absolute; opacity: 0; bottom: 60px; left: 170px; }
.kindergarten .move-scene-2 { width: 1212px; left: 250%; top: 102px; margin-left: -606px; }
.kindergarten .move-scene-3 { width: 640px; left: 250%; top: 102px; margin-left: -320px; }
.kindergarten .move-scene-3 .persons { position: absolute; top: 150px; left: -200px; }
.kindergarten .move-scene-2 .hands { top: 290px; margin-left: 1500px; position: absolute; }
.kindergarten .board { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }
.kindergarten .background-top { background: #517C56; }
.kindergarten .background-bottom { background: #A4A553; }
.kindergarten .item-arrow { left: 705px; top: -100px; opacity: 0; }

/* section :: kindergarten :: dialog  */
.kindergarten .dialog div { opacity: 0; }
.kindergarten .dialog .spielzeug { top: 265px; left: 320px; }
.kindergarten .dialog .oh { top: 385px; left: 120px; }
.kindergarten .dialog .afrika { top: 415px; left: 680px; }
.kindergarten .dialog .fragezeichen { top: 460px; left: 845px; }
.kindergarten .dialog .rad { top: 160px; left: 415px; }
.kindergarten .dialog .plus { top: 165px; left: 605px; }
.kindergarten .dialog .spielzeug-1 { top: 85px; left: 660px; }
.kindergarten .dialog .gleich { top: 130px; left: 860px; }
.kindergarten .dialog .spielzeug-2 { top: 225px; left: 690px; }


/* section :: classroom */
.classroom .board { width: 640px; left: 50%; top: 102px; margin-left: -320px; }
.classroom .board-line { width: 640px; left: 50%; margin-left: -320px; }
.classroom .board-white { display: none; padding: 20px; width: 600px; height: 0; left: 50%; top: 40px; margin-left: -320px; background: #FFF; overflow: hidden; text-align: center; }
.classroom .board-white:hover { background: url('../../de/assets/img/content/weltkarte_hover.png') no-repeat 10px 10px #FFF; }
.classroom .board-white .svgholder { position: relative; width: 600px; height: 380px; background: #ccc; }
.classroom .board-white .svgholder img { position: absolute; left: 0; top: 0; }
.classroom .poster-01 { left: 0; top: 180px; }
.classroom .poster-02 { right: 0; top: 180px; }
.classroom .child-top { top: 550px; }
.classroom .child-bottom { bottom: 50px; }
.classroom .teacher { top: 225px; }
.classroom .teacher img { position: absolute; }
.classroom .font { width: 0; left: 250px; top: 170px; overflow: hidden; }
.classroom .background-top { background: #517C56; }
.classroom .background-bottom { background: #6C6552; }
.classroom .airplane { top: 0; left: 0; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); }
.classroom .item-arrow { left: 0; top: 0; opacity: 0; -webkit-transform: rotate(-65deg); -moz-transform: rotate(-65deg); -ms-transform: rotate(-65deg); -o-transform: rotate(-65deg); transform: rotate(-65deg); }


/* section :: flight */
.flight .airplane { top: 200px; transform: scale(20); }
.flight .background { width: 800%; height: 100%; left: 0; top: 0; }
.flight .background img { float: left; position: absolute; top: 0; left: 0; }
.flight .background .landscape-2 { left: 8341px; z-index: 101; }
.flight .background div { z-index: 110; }
.flight .background .welcome { left: 11600px; top: 300px; }
.flight .background .klick { left: 11600px; top: 300px; width: 1000px; }
.flight .background .klick .klick-01 { left: 865px; top: 35px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); }
.flight .background .klick .klick-02 { left: 730px; top: 175px; }
.flight .background .klick .klick-03 { left: 230px; top: 175px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); }
.flight .background .hannah { left: 9800px; top: 300px; }
.flight .background .hannah .sad { opacity: 0; }
.flight .background .dolphin { left: 14300px; top: 10px; width: 800px; height: 400px; overflow: hidden; }
.flight .background .dolphin img { position: absolute; left: 400px; top: 420px; }
.flight .background .trash { left: 14275px; top: 460px; width: 528px; height: 206px; }
.flight .background .trash img { position: absolute; }


/* section :: office / switch */
.switch { z-index: 201; left: -2704px; top: -198px; }
.office { z-index: 200; }
.office .poster { width: 1000px; }
.office .poster img { position: absolute; top: -250px; }
.office .poster .poster-01 { left: 0; }
.office .poster .poster-02 { left: 145px; }
.office .poster .poster-03 { left: 270px; }
.office .poster .poster-04 { left: 440px; }
.office .poster .poster-05 { left: 615px; }
.office .poster .poster-06 { left: 790px; }
.office .poster .poster-07 { left: 860px; }
.office .poster .poster-08 { left: 935px; }
.office .boy { left: 0; top: 355px; }
.office .girl { right: 0; top: 355px; }
.office .tipp { right: 0; top: 345px; width: 80px; }
.office .tipp img { position: absolute; }
.office .tipp .tipp-01 { left: 5px; top: 60px; }
.office .tipp .tipp-02 { left: -15px; top: 15px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
.office .chair { left: 0; top: 575px; }
.office .desk { left: 154px; top: 516px; }
.office .pedro { left: 50px; top: 380px; }
.office .hannah { top: 430px; }
.office .hastag { top: 650px; }
.office .heart { left: 50%; top: 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%); }
.office .background-top { background: #E9E8E4; }
.office .background-bottom { background: #62757C; }
.office .item-arrow { left: 450px; top: 0; opacity: 0; }


/* section :: founding */
.founding .background-wrapper { top: 0; width: 100%; height: 30%; overflow: hidden; }
.founding .background-wrapper .skyline { bottom: 0; }
.founding .background-wrapper .skyline img { display: block; }
.founding .background-wrapper .sun { left: 50%; top: 50%; }

.founding .hannah-pedro { width: 100%; }
.founding .hannah-pedro img { position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); }
.founding .hannah-pedro .stage-01 { top: 165px; }
.founding .hannah-pedro .stage-02 { top: 250px; }
.founding .hannah-pedro .stage-03 { top: 350px; }
.founding .news { top: 100px; }
.founding .people-01 { top: 300px; left: 100px; }
.founding .people-02 { top: 350px; right: -20px; }
.founding .balloon img { position: absolute; }
.founding .balloon-01 { top: 145px; left: 100px; }
.founding .balloon-02 { top: 220px; left: 635px; }
.founding .hannah { top: 395px; left: 538px; }
.founding .stones { bottom: 110px; left: 538px; }
.founding .move-background { width: 100%; height: 100%; }
.founding .background-top { background: #6AC0EC; }
.founding .background-bottom { background: url('../../de/assets/img/content/06_bg.png') repeat-x; }
.founding .background-bottom-2 { position: absolute; width: 100%; height: 0; bottom: 0; background: #AEAEAE; }
.founding .item-arrow { left: 715px; top: 500px; opacity: 0; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); }


/* section :: age */
.age { left: 100%; z-index: 200; }
.age .move-background { width: 100%; height: 100%; }
.age .scene { width: 100%; height: 100%; padding: 35px 0 35px 35px; overflow: hidden; background: #FFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.age .scene:last-child { padding-right: 35px; }
.age .scene .overlay { left: 0; width: 35px; height: 100%; background: #FFF; z-index: 102; }
.age .scene .hannah { top: 395px; z-index: 101; }
.age .scene .background { position: relative; height: 100%; overflow: hidden; }


/* section :: lastclassroom */
.lastclassroom { z-index: 100; }
.lastclassroom .photo { top: 207px; left: -34px; }
.lastclassroom .board { left: 50%; margin-left: -320px; top: 102px; width: 640px; }
.lastclassroom .poster { top: 155px; right: -10px; }
.lastclassroom .student { left: 50%; margin-left: -428px; bottom: 55px; width: 857px; }
.lastclassroom .hannah { top: 250px; right: 400px; }
.lastclassroom .hannah img { position: absolute; }
.lastclassroom .background-top { background: #C0EBFA; }
.lastclassroom .background-bottom { background: #285463; }
.lastclassroom .circle { top: 33%; left: 52%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 3000px; height: 3000px; border-radius: 50%; border: 1500px solid #000; z-index: 500; }
.lastclassroom .item-arrow { left: 0; top: 0; opacity: 0; -webkit-transform: rotate(-65deg); -moz-transform: rotate(-65deg); -ms-transform: rotate(-65deg); -o-transform: rotate(-65deg); transform: rotate(-65deg); }

.lastclassroom .no-end { top: 55%; 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%); z-index: 501; }
.lastclassroom .footer { width: 100%; height: 325px; bottom: 0; z-index: 502; }
.lastclassroom .footer .imprint { top: 100px; }
.lastclassroom .footer .imprint,
.lastclassroom .footer .info { width: 100%; text-align: center; color: #FFF; }
.lastclassroom .footer .imprint a { color: #FFF; text-transform: uppercase; }
.lastclassroom .footer .bottom { width: 100%; height: 155px; bottom: 0; background: #FFF; }
.lastclassroom .footer .bottom .wrapper { width: 1920px; 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%); }
.lastclassroom .footer .bottom img { position: absolute; top: 20px; }
.lastclassroom .footer .bottom .bmz { left: 460px; }
.lastclassroom .footer .bottom .eg { left: 800px; }
.lastclassroom .footer .bottom .top img { left: 1400px; top: 0; }

.lastclassroom .stempel { top: 39%; 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%); z-index: 502; }