body{
margin:0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+5,003e65+29,003e65+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+5,00517e+29,00517e+100 */
background: #00517e; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0-5%, #00517e 3%, #00517e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0.5%,#00517e 3%,#00517e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0.5%,#00517e 3%,#00517e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00517e',GradientType=0 ); /* IE6-9 */
font-family: arial;
font-size: 1em;
line-height: 150%;
}

section {
  #height: 100vh;
  
  &:nth-of-type(2n) {
    background-color: #00517e;
  }
}

#start {
 #height: 100vh;
 
}

.box {
width:100%;
max-width: 1140px;
margin: 0 auto;
padding-top: 30px;
}

.logo {
display: inline-block;
width:42%;
text-align: right;
vertical-align: top;
}

.logo img{
width:100%;
max-width: 335px;
}

.bild img{
width:100%;
}

.headertext {
display: inline-block;
width:52%;
text-align: left;
padding-left: 20px;
color: #003E65;
padding-top: 5px;
vertical-align: top;
padding-bottom: 20px;
}

###p.tutchen2 {
position: relative;
    display: inline-block;
line-height: 170%;
margin:0;
}

##p.tutchen2:after {
 display: inline-block;
 width:20px;
 height:20px;
 font-family: 'American Typewriter';
  content: '“';
font-size: 3em;
padding-top: 0px;
white-space: pre;

}

p.tutchen2:before {
     display: block;
 font-family: 'American Typewriter';
  content: '„';
  white-space: pre;
font-size: 3em;
height:190px;
float:left;
vertical-align: top;
margin-top: -20px;
font-weight: normal;
padding-right:5px
}

i {
display: inline-block;
width:30px;
height:75px;
background-image: url("../bilder/gaensefuesschen.jpg");
background-repeat: no-repeat;
background-position:0px 57px;
margin-top: -60px;
}


blockquote {
  padding-left: 30px;
  padding-right: 30px;
  margin: 20px;
  margin-bottom: 30px;
}
blockquote:after {
 font-family: 'American Typewriter';
  content: '„';
  display: block;
  float: left;
  font-size: 300%;
  margin-right: 10px;
  margin-left: -30px;
  margin-top: -90px;
  color: #fff;
}
blockquote:before {
 font-family: 'American Typewriter';
  content: '“';
  display: block;
  
  font-size: 300%;
  margin-top: 40px;
  margin-right: 0px;
  color: #fff;
}

.sprache {
display: inline-block;
width:28%;
text-align: left;
vertical-align: top;
padding-top: 40px;
}
.sprache a {
color:#fff;
}
.back {
display: inline-block;
width:14%;
vertical-align: top;
padding-top: 40px;
}

.text {
color:#fff;
display: inline-block;
width:52%;
padding-left: 20px;
padding-top: 20px;
}

.text a {
color:#fff;
}

#impressum {
padding-top: 70px;
height: 100vh;
}

.back {
text-align: center;
color:#fff;
text-decoration: none;
}

.back a {
text-align: center;
color:#fff;
text-decoration: none;
font-size: 0.8em;
}

@media (max-width:700px){

section {
 # height: 400vh;
  
  &:nth-of-type(2n) {
    background-color: #FE4B74;
  }
}

#start {
#height: 200vh;
 min-height: auto;
}

.logo {
display: block;
width:86%;
margin:0 auto;
padding-bottom: 15px;
text-align: center;
}

.headertext {
display: block;
width:96%;
margin:0 auto;
padding-left: 5px;

}

.sprache {
display: block;
width:96%;
margin:0 auto;
padding-left: 20px;
}

.back {
display: block;
width:96%;
text-align: center;
}

.text {
display: block;
width:92%;
padding-left: 0px;
margin:0 auto;
}

#impressum {
padding-top: 10px;
height: 200vh;
background-color: #00517e;
}
}