html, body {
    height: 100%;
    margin: 0;
}

.flex-container {
  
  margin:0 auto;
  padding-top:5% ;
  padding-left: ;
  width: 100%;
  height:100%;
  display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap-reverse;
	flex-flow: row wrap-reverse;
	-webkit-justify-content: center;
	justify-content:center;
   position:absolute;
  z-index:3;
  background:;
}

.flex-box{
  background: ;
  -webkit-flex: 1 auto;
  flex: 1 auto;
  width: 25%;
  text-align:left;
}

.flex-box2{
  background: ;
  -webkit-flex: 1 auto;
  flex: 1 auto;
  width: 3%;
  text-align:center;}

.flex-box3{
  background: ;
  -webkit-flex: 1 auto;
  flex: 1 auto;
  width: 1%;}

.flex-box4{
  background: ;
  -webkit-flex: 1 auto;
  flex: 1 auto;
  width: 1%;}

h1 {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -30px;  
}

svg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.me {
  width: 100%;
  height:100%;
}

h2{ 
  text-align:center;
  font-family: 'Droid Serif', serif;
  display: inline;
  color: black;
  background:white;
  font-size: 20px;}

section {
    height: 100%;
    width: 100%;
    position: relative;
}
section.eins {
    background: #fff;
}
section.zwei {
    background-color: #B22222;
}
section.drei {
    background-color: #f5bbff;
}
section.vier {
    background-color: #B22222;
}
section.fuenf {
    background-color: #fff5b1;
}
section.sechs {
    background-color: #f5bbff;
}
section.sieben {
    background-color: #B22222;
}
section.acht {
    background-color: #fff5b1;
}
section.neun {
    background-color: #f5bbff;
}
section.zehn {
    background-color: #B22222;
}
section.elf {
    background-color: #fff5b1;
}
section.zwoelf {
    background-color: #f5bbff;
}