body {
margin:0; padding:0; width:1200px; height:100%; background-color:#FFFFFF; 
}


@font-face {
    font-family: "Vollkorn";
    src: url("Vollkorn.ttf") format("truetype");
}


#menu {
position:fixed; top:-1em; left:-0.5em; bottom:-1em; z-index:100; background-color:#FFFFFF; width:14em; opacity:0; filter:alpha(opacity=0); float:left; display:table-cell;
}

#menu:hover {
opacity:0.7; filter:alpha(opacity=70);
}

#menu li {
font-family:Vollkorn; font-size:1.2em; letter-spacing:0.1em; font-weight:bold; color:#cd4e2b; text-decoration:none; list-style-type:none; padding:0em; border: none; margin-left:11.5px;
}

#menu li a {
font-weight:400;
}

#menu li a:hover {
opacity:0.8; filter:alpha(opacity=80); letter-spacing:0.2em;
} 

#menu ol {
font-size:0.8em; padding:0; margin-bottom:32px;
}


a:link {
opacity:1; filter:alpha(opacity=100); color:#cd4e2b; text-decoration:none; border: none; font-family:Vollkorn; font-style:regular;
}

a:hover {
opacity:0; filter:alpha(opacity=0); text-decoration:none; border: none;
}

a:active {
opacity:0.8; filter:alpha(opacity=80); color:#cd4e2b; text-decoration:none; border: none; font-family:Vollkorn; font-style:regular;
}

a:visited {
opacity:1; filter:alpha(opacity=100); color:#cd4e2b; text-decoration:none; border: none; font-family:Vollkorn; font-style:regular;
}


.icon {
position:fixed; width: 35px; height: 5px; background-color:#cd4e2b; margin: 6px 42px;
}


#main {
width:100%; position:absolute;
}



.h1 {
position:absolute; top:0.5em; right:10%; z-index:10; font-family:Vollkorn; font-style:regular; font-size:540%; font-weight: 420; color:#cd4e2b; opacity:0.7; filter:alpha(opacity=70); padding:0.1em; text-align:right;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 1200px) {
  .h1 {
    font-size:540%;
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .h1 {
    font-size:420%;
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 600px) {
  .h1 {
    font-size:320%;
    margin-top:0.5em;
    margin-right:0;
    opacity:0.9; filter:alpha(opacity=90);
  }
}


.h2 {
width:72%; position:relative; left: 54%; transform: translateX(-54%); top:20em; font-family:Vollkorn; font-style:regular; font-size:1.2em; font-weight: 420; color:#FFFFFF; opacity:0.7; letter-spacing:0.2em;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .h2 {
    font-size:1em;  
  }
}


.h3 {
width:72%; position:relative; left: 54%; transform: translateX(-54%); top:20em; font-family:Vollkorn; font-style:regular; font-size:1.2em; font-weight: 420; color:#FFFFFF; opacity:0.7; letter-spacing:0.2em;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 1600px) {
  .h3 {
    font-size:1em;
  }
}

@media (max-width: 1300px) {
  .h3 {
    font-size:1em;
    margin-top:8em;
    color:#000000;
  }
}


.h4 {
position:absolute; left: 50%; transform: translateX(-50%); z-index:10; font-family:Vollkorn; font-style:regular; font-size:960%; font-weight: 420; color:#ffffff; padding:0.1em; line-height:1em;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 1200px) {
  .h4 {
    font-size:720%;
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 1000px) {
  .h4 {
    font-size:620%;
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
  .h4 {
    font-size:480%;
    margin-top:4em;
    left: 42%; transform: translateX(-42%);
  }
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 640px) {
  .h4 {
    font-size:340%;
    margin-top:5em;
  }
}



.row {
  display: flex;
  flex-wrap: wrap;
  background-color:#FFFFFF;
  padding-top:6%;
  padding-bottom:6%;
  padding-right:8%;
  padding-left:8%; 
  z-index:10;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0px 4px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 880px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}


.row2 {
  display: flex;
  flex-wrap: wrap;
  background-color:#FFFFFF;
  padding-top:8%;
  padding-bottom:8%;
  padding-left:10%;
  padding-right:6%; 
  z-index:10;
}

/* Create four equal columns that sits next to each other */
.column2 {
  flex: 16%;
  max-width: 16%;
  padding: 0px 4px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 1000px) {
  .column2 {
    flex: 32%;
    max-width: 32%;
  }
  .row2 {
    padding-right:6%;
    padding-left:10%;
  }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column2 {
    flex: 50%;
    max-width: 50%;
  }
  .row2 {
    padding-right:8%;
    padding-left:8%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column2 {
    flex: 100%;
    max-width: 100%;
  }
  .row2 {
    padding-right:8%;
    padding-left:8%;
  }
}



#enso {
position:absolute; bottom:3em; z-index:4; opacity:0.9; filter:alpha(opacity=90); left:50%; transform: translateX(-50%);
}


#Bodenb {
width:100%; position:absolute; bottom:0; background-color:#414141; height:6em; z-index:3; text-align:center; padding:1.5em 0em 1.5em 0em;  opacity:0.9; filter:alpha(opacity=90);
}






p {
font-family:Vollkorn, font-style:regular; opacity:1; filter:alpha(opacity=100);
}

p1 {
font-style:regular; font-family:Vollkorn; font-style:regular; font-size:2em; color:#000000;
}

p2 {
font-family:Vollkorn; font-style:regular; font-size:0.8em; color:#000000; letter-spacing:0em;
}

p3 {
font-family:Vollkorn, font-style:regular; font-size:0.8em; color:#000000; letter-spacing:0.5em;
}

p4 {
font-family:Vollkorn, font-style:regular; font-size:0.8em; color:#FFFFFF; letter-spacing:0.2em;
}

p5 {
font-family:Vollkorn, font-style:regular; font-size:0.8em; color:#cd4e2b; letter-spacing:0.2em;
}

p6 {
font-family:Vollkorn, font-style:regular; font-size:0.8em; color:#000000; letter-spacing:0.2em;
}

p13 {
font-family:Vollkorn, font-style:regular; font-size:1em; color:#FFFFFF; letter-spacing:0.5em;
}

p7 {
font-family:Vollkorn, font-style:regular; font-size: 216px; color:#CCCCCC; opacity:0.2; filter:alpha(opacity=20); letter-spacing:0.2em; line-height:152px;
}

p8 {
font-family:Vollkorn, font-style:regular; font-size: 42px; color:#CCCCCC; opacity:0.4; filter:alpha(opacity=40); letter-spacing:0.2em; line-height:42px;
}

p10 {
position: relative; float:left; margin-left: 22%; margin-top: 16%; font-family:Vollkorn, font-style:regular; font-size:172%; color:#000000; text-align:center; letter-spacing:0.2em; z-index:7;
}

p11 {
font-family:Vollkorn, font-style:regular; font-size:148%; color:#FFFFFF; text-align:center; letter-spacing:0.2em;
}

p12 {
position: relative; float:left; margin-left: 24%; font-family:Vollkorn, font-style:regular; font-size:172%; color:#000000; text-align:center; letter-spacing:0.2em; z-index:7;
}



* {
  box-sizing: border-box;
}