@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Cinzel');

.clear {
    clear: both;
}
footer colum h2{color:rgb(50,50,50);}
h2{font-family: 'Cinzel', serif;color:rgb(151,198,87);font-size: 30px;margin-bottom:20px;}
h3{font-family: 'helvetica';color:rgb(255,255,255);font-size: 20px;}
h4{font-family: 'helvetica';color:rgb(50,50,50);font-size: 16px;font-weight: 600;}
footer h3{color:rgb(50,50,50);}
p{color:rgb(199,199,199);font-size: 15px; font-family: 'helvetica'; max-width: 600px;}
html {
/*Fullheight Background*/
/*background: url(../images/background.jpg) no-repeat center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
*/
}

body {
    font: 300 12px/20px arial, helvetica; /* Schriftschitt/Größe/Zeilenabstand/Art*/
     /*Fullheight Background*//*
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    */
}
header{
    position: fixed;
    top: 0px;
    z-index: 100;
}
nav{
    padding:15px;
    margin: auto;
    width: 1080px;
    height: 50px;
    display: flex;
}
nav ul{
    display: flex;
    line-height: 50px;
    width:100%;
}
nav ul li{display: inline;vertical-align: middle;margin-left: auto;}
nav ul li a{text-decoration: none;font-family: 'Cinzel', serif;color:rgb(151,198,87);font-size: 15px;}

.navipunkt{position: relative;top:-200px;}

#logo{
    height: 50px;
    width:auto;
}
wrapper{
    width:1080px;
    display: block;
    margin: auto;
}
header{background-color:rgb(255,255,255);width:100%;}
article{min-height: 300px;margin:60px 0px;position: relative;}
article:last-of-type{background-image: url(../images/buch.png);background-position:bottom;background-repeat: no-repeat; background-size: contain;margin-bottom: 0px;}
.oversize{width:20%;height: 200%;position: absolute; right: 50px;top:-180px;background-size: contain;background-position: center; background-repeat: no-repeat;z-index: 10;}
#one{background-image: url(../images/fragezeichen.png);}
#two{background-image: url(../images/waage.png);}

.image{display: block; height: 700px; width: 100%;background-attachment: fixed;background-size: cover;background-repeat: no-repeat;position: relative;}
.image:nth-of-type(1){background-image: url(../images/parallax1.jpg);}
.image:nth-of-type(2){background-image: url(../images/parallax2.jpg);}
.image:nth-of-type(3){background-image: url(../images/parallax3.jpg);}

.imagetext{padding:30px 20px 65px 20px; width:500px;position:relative;top: 350px; left: -20px; transform: translate(0,-50%);background-color:white;}

.line{width:100%;vertical-align: middle; display: flex;}
.line:nth-of-type(2n) colum .square{transform:scale(0.6,0.6);}
.line:nth-of-type(3n) colum .square{transform:scale(0.8,0.8); }
.line:nth-of-type(2n+1) colum .square{opacity: 1;}
.line:nth-of-type(3n-2) colum .square{opacity: .85;}
.square{width:200px;height:200px;background-color:rgb(151,198,87);box-sizing: border-box; opacity: .7;}
.erklaerung{height: 200px;margin: 0px 20px;}
colum{flex:1;}
colum:first-of-type div{float: right;text-align: left;}
colum:first-of-type div p{text-align: right;}
colum div h3{text-align: center;}
colum div{float: left;}
.kontakt{display: flex;}
.kontakt>colum:last-of-type{margin-left: 20px;}
.line * p, .line * h3{position: relative;top:50%; transform: translate(0,-50%);}
footer{background-color:rgb(230,230,230);display:block;padding-bottom: 40px;}
footer colum p, footer colum a, footer colum li{color:rgb(50,50,50);}
.button{display: block;list-style: none;}
.button a{text-decoration: none;background-color:rgb(151,198,87);padding:5px;font-size: 20px;line-height: 35px;color:white;
}

/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/
@media screen and (max-width: 1111px) {
    wrapper,nav{width:100%;padding:  0px 20px;box-sizing: border-box;}
    nav{display: block;box-sizing: border-box; height: auto;position: fixed;top: 0px;z-index: 100;background-color: white;}
}
@media screen and (max-width: 830px) {
    h2+p{
max-width: 60%;
    }
}
@media screen and (max-width: 550px) {
    .imagetext{width:100%;background-color:rgba(255,255,255,.9);background-attachment: scroll;box-sizing: border-box;left: 0px;}
    #logo{height: 25px;width: auto;}
    nav ul{display: block;line-height: 18px;box-sizing: border-box;}
    nav ul a{margin:0px 5px;}
    h2{font-size: 20px;}
    wrapper,.kontakt,.line{display: block;}
    .erklaerung{display: none;}
    .square{width:100%;height: 50px;}
    nav{position: fixed;top: 0px;z-index: 100;background-color: white;}
}

@media screen and (max-width: 480px) {
    .image{height: 500px;}
    h2{font-size: 18px;}
    .oversize{display: none;}
        h2+p{
max-width: 100%;
    }
}