body{
    font-family: 'Josefin Sans', sans-serif;
    color: rgb(50,50,50);
}
a:link {
    color:inherit;
    text-decoration: none;
}
a:visited {
    color:inherit;
}

.outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}
#content{
    margin-left: auto;
    margin-right: auto;
    width: 100vmin;
    position: relative;
    height: 90vmin;
}
#boxcontainer{
    margin-left: auto;
    margin-right: auto;
    width: 80vmin;
    position: relative;
    height: 80vmin;
    top: 5vmin;
    overflow: hidden;
}
#box {
     margin-left: auto;
     margin-right: auto;
     width: 80vmin;
     position: relative;
     height: 80vmin;
     transition: opacity, 1s;
     transition: left, 0.5s;
     left:0;
     transition-timing-function: ease-in-out;
 }
#box2 {
    margin-left: auto;
    margin-right: auto;
    width: 80vmin;
    position: absolute;
    height: 80vmin;
    transition: opacity, 1s;
    transition: left, 0.5s;
    top: 0;
    left:100vh;
    transition-timing-function: ease-in-out;
    /*background-color: red;*/
}
#box0 {
    margin-left: auto;
    margin-right: auto;
    width: 80vmin;
    position: absolute;
    height: 80vmin;
    transition: opacity, 1s;
    transition: left, 0.5s;
    top: 0;
    left:-100vh;
    transition-timing-function: ease-in-out;
    /*background-color: blue;*/
}

.feld{
    position: absolute;
    overflow: hidden;
}
.c1{
    background-color: rgb(210,210,210);
}
.c2{
    background-color: rgb(215,215,215);
}
.c3{
    background-color: rgb(220,220,220);
}
.c4{
    background-color: rgb(225,225,225);
}
.c5{
    background-color: rgb(230,230,230);
}
.c6{
    background-color: rgb(235,235,235);
}






.h1{
    height: 24.25%;
}
.h2{
    height: 49.5%;
}
.h3{
    height: 74.75%;
}
.h4{
    height: 100%;
}
.b1{
    width: 24.25%;
}
.b2{
    width: 49.5%;
}
.b3{
    width: 74.75%;
}
.b4{
    width: 100%;
}

.x0{
    left:0;
}
.x1{
    left:25.25%;
}
.x2{
    left:50.5%;
}
.x3{
    left:75.75%;
}
.y0{
    top:0;
}
.y1{
    top:25.25%;
}
.y2{
    top:50.5%;
}
.y3{
    top:75.75%;
}

.fullWImg{
    width: 100%;
    position:relative;
}
.fullHImg{
    height: 100%;
    position:relative;
    float: left;
}



h1{
    font-weight: 700;
    font-size: 9vmin;
    padding-left: 1.5vmin;
    padding-top: 6.5vmin;
    margin-top:0;
    color: rgb(100,100,100);
}
h2{
    font-weight: 100;
    font-size: 5vmin;
    padding-top:1.5vmin;
    padding-left: 1.5vmin;
    margin-top:0;
    margin-bottom: 3vmin;
}

#navigButton{
    width: 7vmin;
    height: 7vmin;
    top: 45.5%;
    left: 0;
    position: absolute;
    transition: 1s;
    transition-timing-function: ease-in-out;
    z-index: 2;
}

#back{
    width: 5vmin;
    height: 5vmin;
    top: 46.8%;
    left: 0;
    cursor: pointer;
    position: absolute;
    transition:1s;
}
#pfad{
    position: absolute;
    background-color: white;
    font-weight: 300;
    padding-top:0;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 0.2;
    left: 10vmin;
    font-size: 2.5vmin;
}
#pfad a{
    padding-top: 1vmin;
    padding-bottom: 1vmin;
}

.hideMe{
    display: none;
}
.bildu{
    font-weight: 300;
    text-align: right;
    padding-right: 1.5vmin;
    paddig-top:0;
    margin-top:1.3vmin;
    color: #7f7f7f;
    line-height: 1.3;
    font-size: 1.8vmin;
}

.clickable{
    transition: 0.25s;
    cursor: pointer;
}
.clickable:hover{
    background-color: rgb(150,150,150);
    opacity: 0.8;
    color: white;
    transition: 0.5s;
}
.clickable:hover p{
    color: white;
}

.neben{
    float:right;
    word-wrap: break-word;
    margin-top:2vmin;
}

#pageCounter{
    position: absolute;
    background-color: white;
    font-weight: 300;
    padding-top:0;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 0.2;
    right: 10.5vmin;
    font-size: 2.5vmin;
    display: none;
}
#forward{
    width: 5vmin;
    height: 5vmin;
    top: 46.8%;
    right: 0;
    cursor: pointer;
    position: absolute;
    transition:1s;
    transform: scaleX(-1);
    display: none;
}

.imgInMiddle{
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.u1{
    font-weight: 500;
    padding-left: 2vmin;
    padding-right: 2vmin;
    paddig-top:0;
    margin-top:2vmin;
    color: #7f7f7f;
    line-height: 1.3;

    font-size: 1.8vmin;
}
.text1{
    font-weight: 300;
    padding-left: 2vmin;
    padding-right: 2vmin;
    paddig-top:0;
    margin-top:1.3vmin;
    color: #575757;
    line-height: 1.3;
    text-align: justify;
    font-size: 1.75vmin;
}

.scrollcontainer{
    position: absolute;
    overflow: scroll;
    height: 100%;
    width: 100%;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: none;
    -ms-overflow-style: none;

}
::-webkit-scrollbar {
    width: 0px;
    height:0;
    background: transparent; /* make scrollbar transparent */
}

.boxInScroll{
    width: 100%;
    height: 74.75%;
    padding: 0;
    margin:0;
    margin-bottom: 0.8vmin;

    position: relative;
}
.boxInScroll1{
    width: 100%;
    height: 24.25%;
    padding: 0;
    margin:0;
    margin-bottom: 0.8vmin;

    position: relative;
}
.boxInScroll2{
    width: 100%;
    height: 49.5%;
    padding: 0;
    margin:0;
    margin-bottom: 0.8vmin;

    position: relative;
}
.boxInScroll4{
    width: 100%;
    height: 100%;
    padding: 0;
    margin:0;
    margin-bottom: 0.8vmin;

    position: relative;
}

.h1s{
    height: 32.5%;
}
.h2s{
    height: 66.25%;
}
.h3s{
    height: 100%;
}
.y0s{
    top:0%;
}
.y1s{
    top:33.75%;
}
.y2s{
    top:67.5%;
}


#scroll{
    width: 4vmin;
    height: 4vmin;
    top: 5vmin;
    right: 5vmin;
    cursor: pointer;
    position: absolute;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}



#language{
    position: absolute;
    height: 10vmin;
    width: 4vmin;
    top:5vmin;
    right:5vmin;
    text-align: right;
    opacity: 0.8;
    transition: 1s;
}

.langicons{
    width: 100%;
    position: absolute;
}
.engicon{
    right:0;
    top:0;
}
.deuicon{
    top:4vmin;
    right:0;

}

.colorlangicon{
    opacity:0;
    transition: 0.2s;
}
.colorlangicon:hover{
    opacity: 1;
    cursor: pointer;
}

.vitaEintrag{
    width: 100%;
    position: relative;
    padding:0;
    margin-left: 5%;
}
.l1{
    height:3.3vmin;
}
.l2{
    height:5.4vmin;
}
.l3{
    height:7.0vmin;
}
.vitaJahr{
    display: inline-block;
    width: 25%;
    text-align: center;
    padding:0;
    line-height: 1;
    vertical-align:top;
}
.vitaText{
    display: inline-block;
    width: 60%;
    padding:0;
    line-height: 1.2;
    vertical-align:top;
}

.firstVitaEintrag{
    padding-top:1vmin;
}

.videoholder{
    width: 100%;
    position: absolute;
    height: 80%;
    display: block;
}

.videou{
    position: absolute;
    bottom: 0;
    right:0;
    height: 24%;
    width: 100%;
}

#mailcontainer{
    margin-top: 8vmin;
    width: 100%;
    text-align: center;
}
#mailIcon{
    width: 3vmin;
    vertical-align: middle;
    padding-bottom: 0.5vmin;

}

#mailtext{
    font-weight: 500;
    text-align: right;
    padding-right: 1.5vmin;
    padding-left: 1vmin;
    color: black;
    line-height: 1.3;
    font-size: 1.8vmin;
}