@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&display=swap');
body {
    background: rgba(230, 231, 232, 1);
    height: 4600px;
    font-family: 'Nunito', sans-serif;
}

/* foreground (balloons/landscape)*/

div#parallax-bg-1 {
    position: fixed;
    width: 1200px;
    top: 0;
    left: 50%;
    margin-left: -600px;
    z-index: 1;
}

/* background middle layer*/

div#parallax-bg-2 {
    position: fixed;
    width: 1200px;
    top: 0;
    left: 50%;
    margin-left: -600px;
    z-index: 2;
}

/* background layer */

div#parallax-bg-3 {
    position: fixed;
    width: 960px;
    top: 0;
    left: 50%;
    margin-left: -470px;
    z-index: 3;
}

/* foreground */

div#parallax-bg-3 div {
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    overflow: hidden;
}

div#bg-3-1 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png');
    width: 529px;
    height: 757px;
    top: -100px;
    right: 100px;
}

div#bg-3-2 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png');
    width: 603px;
    height: 583px;
    top: 1050px;
    right: 70px;
}

div#bg-3-3 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png');
    width: 446px;
    height: 713px;
    top: 1800px;
    right: 140px;
}

div#bg-3-4 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png');
    width: 1104px;
    height: 684px;
    top: 2800px;
    right: 0px;
}

/* middle layer clouds */

div#parallax-bg-2 div {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png');
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    width: 488px;
    height: 138px;
    overflow: hidden;
}

div#bg-2-1 {
    top: 100px;
    left: -310px;
}

div#bg-2-2 {
    top: 270px;
    right: -70px;
}

div#bg-2-3 {
    top: 870px;
    left: -300px;
}

div#bg-2-4 {
    top: 1120px;
    right: -130px;
}

div#bg-2-5 {
    top: 1620px;
    left: 140px;
}

div#bg-2-6 {
    top: 720px;
    left: 340px;
}

/*background layer clouds */

div#parallax-bg-1 div {
    background-repeat: no-repeat;
    position: absolute;
    display: block;
    width: 488px;
    height: 138px;
    overflow: hidden;
}

div#bg-1-1 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
    top: 200px;
    right: 450px;
}

div#bg-1-2 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
    top: 420px;
    left: 0px;
}

div#bg-1-3 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
    top: 850px;
    right: -290px;
}

div#bg-1-4 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
    top: 1350px;
    left: 200px;
}

div#bg-1-5 {
    background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
    top: 1200px;
    left: -200px;
}

/* Next Button */

* {
    box-sizing: border-box;
}

.icon {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    fill: currentColor;
}

.icon--arrow-right {
    transform: scale3d(-1, -1, 1);
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
}

.next {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    bottom: 0;
    right: 0;
}

.next-demo {
    position: relative;
    margin: 1.5em 2em;
    font-weight: bold;
    color: #000 !important;
    text-decoration: none;
    font-size: 1.2rem;
}

.next-demo a:hover, .next-demo a:focus {
    color: #42AB9E !important;
}

.hidden {
    width: 0;
    height: 0;
}