/* ------------------------------------------------------------------------------------
Styles für Zeitplanfalter 
------------------------------------------------------------------------------------ */


@font-face {
    font-family: 'rubik';
    src: url('../fonts/rubik-light-webfont.woff2') format('woff2'),
         url('../fonts/rubik-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'rubik';
    src: url('../fonts/rubik-medium-webfont.woff2') format('woff2'),
         url('../fonts/rubik-medium-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}


* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
	font-family: 'Rubik', Helvetica, Arial, sans-serif; 
    font-size: 15px;
	line-height: 1.75em;
	font-weight: 300;
	color: #073E5F;
	background: white;
    padding: 0 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;


    -webkit-overflow-scrolling: touch;
    
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


/* ------------------------------------------------------------------------------------
Layout
------------------------------------------------------------------------------------ */

#wrapper-one {
    background: #203a4a url(../img/bodybackground_d.jpg) no-repeat center center;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    display: relative;
    cursor: -webkit-grab;
    cursor: grab;
    padding: 40px;
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 1;
    overflow-x: scroll;
    overflow-y: hidden;
    overflow: hidden;
    height: 100%;
}

#wrapper-content {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-shadow: 0 1.5em 3em 0.25em rgba(64, 64, 64, 0.60);
    box-shadow: 0 1.5em 3em 0.25em rgba(64, 64, 64, 0.60);
    position: relative;
    opacity: 0;


}

section {
    width: 920px;
    min-width: 920px;
    min-height: 450px;
    height: 500px;
    position: relative;
}

.section-one {
    background: white url(../img/white-noise.png) repeat top left;
}

.section-two {
    background: white url(../img/white-noise.png) repeat top left;
    color: #383838;
}

.section-three {
    background: white url(../img/white-noise.png) repeat top left;
    color: #252525;
}

.section-four {
    background: white url(../img/white-noise.png) repeat top left;
    color: #252525;
}

.section-text {
    position: relative;
}


ul { padding: 10px 0px 10px 16px; }

h1 { margin-bottom: 10px;}

h2 { margin-bottom: 10px;}

hr { margin: 20px 0; }

a, a:link, a:hover, a:visited { color: #073E5F;}

.scroll-link {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 50%;
    background: #444;
    color: white;
    text-align: center;
    line-height: 2.2em;
    text-decoration: none;
    font-weight: 700;
    color: #fff !important;
}

.section-one .scroll-link {
    left: 50%;
    transform: translateX(-50%);
    bottom: 120px;
    position: absolute;
    
}

.section-two .scroll-link, 
.section-three .scroll-link {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

span.anchor {
    position: absolute;
    left: 0;
    top: 0;
/*
    width: 10px;
    height: 10px;
    display: block;
    background: red;
*/
}

@media (max-width: 992px) {
    
    
    #wrapper-one {
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
    }
    #wrapper-content {
        display: block;
        max-width: 100%;
        background: transparent;
        box-shadow: none;
    }
    
    section {
        min-height: 400px;
        max-width: 100%;
        min-width: initial;
        border-bottom: 1px solid #073E5F;
        margin-bottom: 40px;
        -webkit-box-shadow: 0 1.5em 3em 0.25em rgba(64, 64, 64, 0.60);
        box-shadow: 0 1.5em 3em 0.25em rgba(64, 64, 64, 0.60);
    }
    .spacer {
        display: none;
    }
    
    .section-two .section-content,
    .section-four .section-content {
        flex-direction: row-reverse;
    }
}

@media (max-width: 767px) {
    body .square1, body .square2 {
        bottom: -300px;
    }
    
    .scroll-link {
        display: none;
    }
    
}


@media (max-width: 680px) {
    
    section.section-two,
    section.section-three,
    section.section-four {
        height: auto;
    }
    section.section-two .section-content,
    section.section-three .section-content,
    section.section-four .section-content {
        display: block;
        
    }
    section.section-two .section-content .section-image,
    section.section-three .section-content .section-image,
    section.section-four .section-content .section-image {
        display: block;
        width: 100%;
        height: 80vw; 
        
    }
    section.section-two .section-content .section-text,
    section.section-three .section-content .section-text,
    section.section-four .section-content .section-text {
        display: block;
        width: 100%;
    }
    
    body .square1, body .square2 {
        bottom: -400px;
    }
    
}

/* ------------------------------------------------------------------------------------
Content One
------------------------------------------------------------------------------------ */


.section-one .section-content {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    color: #242424
    position: relative;
}
.section-one .section-image {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
}


.logo {
    width: 200px;
    position: absolute;
    padding-left: 20px;
    top: 2em;
    left: 50%;
    transform: translateX(-50%);
    
}

.key-message {
    position: absolute;
    bottom: 160px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.square1 {
    width: 800px;
    height: 400px;
    background: #1470B8;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    position: absolute;
    bottom: -250px;
    left: -200px;

}
.square2 {
    width: 800px;
    height: 400px;
    background: #073E5F;
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
    position: absolute;
    bottom: -250px;
    right: -200px;
    mix-blend-mode: multiply;
}



/* ------------------------------------------------------------------------------------
Content Two
------------------------------------------------------------------------------------ */

.section-two .section-content {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}
.section-two .section-image {
    width: 40%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    background: black url('../img/bild-mit-stift.jpg') no-repeat center center;
    background-size: cover;
    
}
.section-two .section-text {
    width: 60%;
    background: rgba(255,255,255,0.5);
    padding: 60px;
}

/* ------------------------------------------------------------------------------------
Content Three
------------------------------------------------------------------------------------ */

.section-three .section-content {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}
.section-three .section-image {
    width: 40%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    background: black url('../img/plan.jpg') no-repeat center center;
    background-size: cover;
    
}
.section-three .section-text {
    width: 60%;
    background: rgba(255,255,255,0.5);
    padding: 60px;
}

/* ------------------------------------------------------------------------------------
Content Four
------------------------------------------------------------------------------------ */

.section-four .section-content {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}
.section-four .section-image {
    width: 40%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    background: black url('../img/laptop.jpg') no-repeat center center;
    background: black url('../img/computer.jpg') no-repeat center center;
    background-size: cover;
    
}
.section-four .section-text {
    width: 60%;
    background: rgba(255,255,255,0.5);
    padding: 60px;
}

/* ------------------------------------------------------------------------------------
Last Spacer
------------------------------------------------------------------------------------ */

.spacer {
    width: 50px;
    height: 100%;
    padding-right: 50px;
}

/* ------------------------------------------------------------------------------------
Scrollzone Balken
------------------------------------------------------------------------------------ */

.scrollzone {
    height: 100%;
    width: 50px;
    position: fixed;
    background: transparent;
}

.scrollzone-left {
    left: 0;
    top: 0;
}
.scrollzone-right {
    right: 0;
    top: 0;
}

@media (max-width: 992px) {
    .scrollzone {
        display: none;
    }
}

/* ------------------------------------------------------------------------------------
Animation
------------------------------------------------------------------------------------ */

.startanimation {
    -webkit-animation: fadeIn 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
            animation: fadeIn 1.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}