#container{
  position: relative;
  width: 95%;
	/*border: solid black 1px;*/

	display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
	z-index: 2;
	margin-left: 6%;
	margin-right: 6%;
	margin-bottom: 3%;

}

.top-left {
    position: absolute;
    top: 0px;
    left: 16px;
		font-size: 12px;
	opacity: .4;
}

#picture {
    position: relative;
    text-align: center;
    color: white;
	
}

#info{
	position: relative;
	width: 325.833px;
	height: 10%;
	text-align: left;
	display: inline;
	margin-left: 1%;
	font-family: 'Josefin Sans', sans-serif;
}


#titel{
	text-align: center;
}


#titel h1{
font-family: 'Special Elite', cursive;
font-size: 35px;
}


#text{
	position: relative;
  width:40%;
	padding-top: 0%;
	padding-left: 1%;
	text-align:left;
	margin: 0;
	margin-left: 1%;
	font-family: 'Raleway', sans-serif;
	float: center;
}

#ptext{
	margin:0;
	width: 100%;
}

.il{
	color:black;
	text-decoration: underline;
}

#coverPic{
	position: relative;
	float: left;
	height: 500px;
	display: inline;
	margin-left:5%;
}

#abouttext{
	position: right;
	padding-left: 1%;
	font-family: 'Architects Daughter', cursive;
float:right;
font-size: 20px;
}

#containerab{
	 position: relative;
  width: 95%;
	/*border: solid black 1px;*/
  left:2.5%;
	display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}

@media screen and (min-width: 320px) and (max-width: 480px) {
	#container{
  position: relative;
  width: 95%;
	/*border: solid black 1px;*/
  left:2.5%;
	display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  flex-wrap: wrap;
	z-index: 2;

}

#info{
	position: relative;
	height: 10%;
	text-align: left;
	display: inline;
	margin-top: 2%;
	
	width: 100%;
	font-size: 10px;
	font-family: 'Josefin Sans', sans-serif;
}


#titel{
	text-align: center;
}


#titel h1{
font-family: 'Special Elite', cursive;
font-size: 15px;
}


#text{
	position: relative;
	padding-top: 0%;
	padding-left: 1%;
	text-align:left;
	
	width: 100%;
	margin: 0;
	font-family: 'Raleway', sans-serif;
	font-size:10px;
}

#ptext{
	margin:0;
	width: 100%;
}

.il{
	color:black;
	text-decoration: none;
}

#coverPic{
	position: relative;
	float: center;
	width: 50%;
	left: 25%;
	height: 280px;
	display: inline;
	z-index: 1;
}

#abouttext{
	position: right;
	padding-left: 1%;
	font-family: 'Architects Daughter', cursive;

font-size: 20px;
}

#containerab{
	 position: relative;
  width: 95%;
	/*border: solid black 1px;*/
  left:2.5%;
	display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}
}

@media screen and (min-width: 768px) and (max-width : 1024px) {
	#container{
  position: relative;
  width: 95%;
	/*border: solid black 1px;*/
  left:2.5%;
	display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
	z-index: 2;

}

#info{
	position: relative;
	width: 20%;
	height: 10%;
	text-align: left;
	display: inline;
	margin-left: 2%;
	font-family: 'Josefin Sans', sans-serif;
}


#titel{
	text-align: center;
}


#titel h1{
font-family: 'Special Elite', cursive;
font-size: 35px;
}


#text{
	position: relative;
  width:50%;
	padding-top: 0%;
	padding-left: 1%;
	text-align:left;
	margin: 0;
	font-family: 'Raleway', sans-serif;
}

#ptext{
	margin:0;
	width: 100%;
}

.il{
	color:black;
	text-decoration: none;
}

#coverPic{
	position: relative;
	float: left;
	width: 25%;
	height: 500px;
	display: inline;
	z-index: 1;
}

#abouttext{
	position: right;
	padding-left: 1%;
	font-family: 'Architects Daughter', cursive;

font-size: 20px;
}

#containerab{
	 position: relative;
  width: 95%;
	/*border: solid black 1px;*/
  left:2.5%;
	display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}
}