/* Coded by Florian Reithofer 2018 */

body{
}

.section{
	background-size: cover;
}

.slide{
	background-size: cover;
}

a:link {
	text-decoration: none;
}

a:visted {
	text-decoration: none;
}

body.preloader-site {
    overflow: hidden;
}

.preloader-wrapper {
    height: 100%;
    width: 100%;
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}

#preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10em;
    height: 10em;
    margin-top: -5em;
    margin-left: -5em;
}

.preloader {
    width: 10em;
    height: 10em;
}

#projectnav1{
	position: fixed;
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	z-index: 5;
	left: 50%;
	margin-top: 3em;
	width: 40em;
	margin-left: -20em;
}

#projectnav2{
	position: fixed;
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	z-index: 5;
	left: 50%;
	margin-top: 3em;
	width: 40em;
	margin-left: -20em;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav3{
	position: fixed;
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	z-index: 5;
	left: 50%;
	margin-top: 3em;
	width: 40em;
	margin-left: -20em;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav4{
	position: fixed;
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	z-index: 5;
	left: 50%;
	margin-top: 3em;
	width: 40em;
	margin-left: -20em;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav5{
	position: fixed;
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	z-index: 5;
	left: 50%;
	margin-top: 3em;
	width: 40em;
	margin-left: -20em;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav6{
	position: fixed;
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	z-index: 5;
	left: 50%;
	margin-top: 3em;
	width: 40em;
	margin-left: -20em;
}

#projectnav1 td:first-child{
	width: 10em;
	padding-right: 150px;
	text-align: right;
	color: #787878;
}

#projectnav1 td:last-child{
	width: 10em;
	padding-left: 150px;
}

#projectnav1 td:last-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav1 td:last-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav2 td:first-child{
	width: 10em;
	padding-right: 150px;
	text-align: right;
}

#projectnav2 td:first-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav2 td:first-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav2 td:last-child{
	width: 10em;
	padding-left: 150px;
}

#projectnav2 td:last-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav2 td:last-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav3 td:first-child{
	width: 10em;
	padding-right: 150px;
	text-align: right;
}

#projectnav3 td:first-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav3 td:first-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav3 td:last-child{
	width: 10em;
	padding-left: 150px;
}

#projectnav3 td:last-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav3 td:last-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav4 td:first-child{
	width: 10em;
	padding-right: 150px;
	text-align: right;
}

#projectnav4 td:first-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav4 td:first-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav4 td:last-child{
	width: 10em;
	padding-left: 150px;
}

#projectnav4 td:last-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav4 td:last-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav5 td:first-child{
	width: 10em;
	padding-right: 150px;
	text-align: right;
}

#projectnav5 td:first-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav5 td:first-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav5 td:last-child{
	width: 10em;
	padding-left: 150px;
}

#projectnav5 td:last-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav5 td:last-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav6 td:first-child{
	width: 10em;
	padding-right: 150px;
	text-align: right;
}

#projectnav6 td:first-child a{
	text-decoration: none;
	color: white;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav6 td:first-child a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#projectnav6 td:last-child{
	width: 10em;
	padding-left: 150px;
	color: #787878;
}

#previousproject{
	position: fixed;
	width: 150px;
	text-align: center;
	left: 50%;
	margin-left: -300px;
	margin-top: 2em;
	font-family: "Josefin Sans";
	font-size: 13pt;
	color: white;
	z-index: 9;
	font-weight: light;
}

#nextproject{
	position: fixed;
	width: 150px;
	text-align: center;
	left: 50%;
	margin-left: 200px;
	margin-top: 2em;
	font-family: "Josefin Sans";
	font-size: 13pt;
	color: white;
	z-index: 9;
	font-weight: light;
}

#previousproject a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#previousproject a:link{
	color: white;
}

#previousproject a:visited{
	color: white;
}

#about_black{
	position: fixed;
	font-family: "Josefin Sans";
	font-size: 13pt;
	color: black;
	width: 15em;
	text-align: center;
	top: 50%;
	left: -30px;
	z-index: 999;
	transform: rotate(270deg);
	margin-left: -4.5em;
	display: inline;
	font-weight: light;
	opacity: 1;
	padding: 30px;
	margin-top: -30px;
	cursor: pointer;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#about_black a:link{
	color: black;
}

#about_black a:visited{
	color: black;
}

#about_black:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#florianreithoferlogofixed{
	width: 3em;
	position: fixed;
	left: 50%;
	margin-left: -1.5em;
	top: 3%;
	z-index: 1;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

.florianreithoferlogofixed{
	width: 3em;
}

#florianreithoferlogofixed a{
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);

}

#florianreithoferlogofixed a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#nav2{
	position: fixed;
	font-family: "Josefin Sans";
	font-size: 13pt;
	color: white;
	width: 15em;
	text-align: center;
	top: 50%;
	left: 0;
	z-index: 9;
	transform: rotate(270deg);
	margin-left: -4.5em;
	display: inline;
	font-weight: light;
	opacity: 1;
	cursor: pointer;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#nav2 a:link{
	color: white;
}

#nav2 a:visited{
	color: white;
}

#nav2:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#nav3{
	position: fixed;
	font-family: "Josefin Sans";
	font-size: 13pt;
	color: white;
	width: 15em;
	text-align: center;
	right: 0;
	top: 50%;
	margin-right: -4.5em;
	transform: rotate(90deg);
	z-index: 9;
	font-weight: light;
}

#dotborder{
	display: none;
}

#navproject3{
	position: fixed;
	font-family: "Josefin Sans";
	font-size: 13pt;
	color: white;
	width: 15em;
	text-align: center;
	right: 0;
	top: 50%;
	margin-right: -4.5em;
	transform: rotate(90deg);
	z-index: 9;
	font-weight: light;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#navproject3 a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#navproject3 a:link{
	color: white;
}

#navproject3 a:visited{
	color: white;
}

#section0{
	background-color: gray;
	padding: 0 0 0;
}

#backgroundtitel1{
	top: 0%;
	left: 0%;
	bottom: 0%;
	right: 0%;
	overflow: auto;
	position: absolute;
}

#backgroundtitel2{
	top: 0%;
	left: 0%;
	bottom: -5%;
	right: 0%;
	overflow: auto;
	position: absolute;
}

#headline{

}

#florianreithoferlogo{
	width: 20em;
	height: 20em;
	position: absolute;
	left: 50%;
	margin-left: -10em;
	top: 50%;
	margin-top: -10em;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

.florianreithoferlogo{
	width: 20em;
	height: 20em;
}

#florianreithoferlogo a{
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);

}

#florianreithoferlogo a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

h2{
	color: white;
	font-size: 30pt;
	letter-spacing: 60pt;
	width: 6em;
	left: 50%;
	margin-left: -3em;
	font-family: "Reem Kufi";
	font-weight: light;
	position: absolute;
	text-align: center;
}

h1{
	color: black;
	font-size: 11pt;
	letter-spacing: 7pt;
	width: 22em;
	left: 50%;
	margin-top: 6em;
	margin-left: -11em;
	font-family: "Josefin Sans";
	font-weight: light;
	position: absolute;
	text-align: center;
}

#section1{
	display: none;
	z-index: 9;
	width: auto;
	height: 100vh;
	background: #202125;
}

#closebutton{
	position: absolute;
	z-index: 19;
	top: 5%;
	left: 2.5em;
	opacity: 1;
	cursor: pointer;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#closebutton2{
	position: absolute;
	z-index: 19;
	top: 5%;
	left: 2.5em;
	opacity: 1;
	cursor: pointer;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

.closebutton{
	width: 2em;
}

#closebutton:hover{
	transform: rotate(90deg);
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#closebutton2:hover{
	transform: rotate(90deg);
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#section1bg{
	border: 1px solid;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
	background: #211e1f;
}

#textabout1{
	font-family: "Josefin Sans";
	color: white;
	font-size: 25pt;
	width: 15em;
	height: 14em;
	text-align: left;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	position: absolute;
	top: 50%;
	margin-top: -7em;
	left: 4em;
	z-index: 19;
	font-weight: light;
	line-height: 28pt;
}

#portrait{
	width: auto;
	height: 100%;
	position: absolute;
	right: 0;
	z-index: 9;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

.portrait{
	width: auto;
	height: 100%;
	z-index: 9;
}

#icons{
	width: 28em;
	height: 3.5em;
	position: absolute;
	left: 50%;
	margin-left: -14em;
	bottom: 10%;
	z-index: 18;
}

#facebookicon{
	position: absolute;
	margin-left: 12em;
}

.facebookicon{
	width: 5em;
}

#facebookicon a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#facebookicon a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#instagramicon{
	position: absolute;
	margin-left: 24em;
}

.instagramicon{
	width: 5em;
}

#instagramicon a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#instagramicon a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#mailicon{
	position: absolute;

}

.mailicon{
	width: 5em;
}

#mailicon a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#mailicon a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#linkedinicon{
	position: absolute;
	margin-left: 6em;
}

.linkedinicon{
	width: 5em;
}

#linkedinicon a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#linkedinicon a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#telicon{
	position: absolute;
	margin-left: 18em;
}

.telicon{
	width: 5em;
}

#telicon a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#telicon a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#hello{
	position: fixed;
	font-family: "Josefin Sans";
	font-size: 13pt;
	color: white;
	width: 15em;
	text-align: center;
	top: 50%;
	left: 0;
	z-index: 9;
	transform: rotate(270deg);
	margin-left: -4.5em;
	display: none;
	font-weight: light;
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);

}

#hello:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#sectioncv{
	display: none;
	z-index: 900;
	width: auto;
	height: 100vh;
	background: #707070;
}

#sectioncvbg{
	border: 1px solid;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1000;
	background: #707070;
}

#mobileversioninfo{
	display: none;
}

#mobileversioninfo2{
	display: none;
}

#zeitstrahl{
	width: 75em;
	position: absolute;
	margin-left: -37.5em;
	left: 50%;
	margin-top: -1.5em;
}

.zeitstrahl{
	width: 75em;
}

#lebenslaufereignisse{
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	width: 69em;
	margin: 0 auto;
	padding-left: 5em;
	margin-top: 7.5em;
}

#lebenslauf1{
	border-left: 0.5px solid white;
	padding-left: 1em;
	width: 9em;
	height: 9em;
	padding-top: 1em;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 1;
	order: 1;
}

#lebenslauf2{
	border-left: 0.5px solid white;
	padding-left: 1em;
	width: 7em;
	height: 2.5em;
	padding-top: 7.5em;
	margin-top: 10em;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 2;
	order: 2;
}

#lebenslauf2 a:link{
	color: white;
}

#lebenslauf2 a:visited{
	color: white;
}

#lebenslauf2 a:hover{
	opacity: 0.5;
	transition: 1s;
}

#lebenslauf3{
	border-left: 0.5px solid white;
	padding-left: 1em;
	width: 9em;
	height: 9em;
	padding-top: 1em;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 3;
	order: 3;
}

#lebenslauf4{
	border-left: 0.5px solid white;
	padding-left: 1em;
	width: 7em;
	height: 2.5em;
	padding-top: 7.5em;
	margin-top: 10em;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 4;
	order: 4;
}

#lebenslauf4 a:link{
	color: white;
}

#lebenslauf4 a:visited{
	color: white;
}

#lebenslauf4 a:hover{
	opacity: 0.5;
	transition: 1s;
}

#lebenslauf5{
	border-left: 0.5px solid white;
	padding-left: 1em;
	width: 9em;
	height: 9em;
	padding-top: 1em;
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 4;
	order: 5;
}

#skills{
	
}

#skills2{
	width: 60em;
	margin: 0 auto;
	margin-top: 8em;
}

#hundertprozent{
	
}

#hundertprozenttext{
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	margin-top: -0.4em;
	width: 2.1em;
	left: 50%;
	margin-left: -35em;
	position: absolute;
}

#hundertprozentborder{
	border-bottom: 0.5px solid white;
	width: 70em;
	position: absolute;
	left: 50%;
	margin-left: -35em;
}

#skillbereiche{
	font-family: "Josefin Sans";
	color: white;
	font-size: 13pt;
	width: 60em;
	margin-top: 2em;
}

.prozentbalken95{
	width: 1.5em;
	padding-left: 1.25em;
}

.prozentbalken90{
	width: 1.5em;
	padding-left: 1.25em;
}

.prozentbalken85{
	width: 1.5em;
	padding-left: 1.25em;
}

.prozentbalken80{
	width: 1.5em;
	padding-left: 1.25em;
}

#photoshop{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 1;
	order: 1;
}

#photoshoptext{
	transform: rotate(270deg);
	transform-origin: 0% 0%;
	margin-top: 1em;
}

#photoshopbalken{
	width: 1.5em;
}

#photoshopprozent{
	position: absolute;
	margin-top: 0.5em;
	margin-left: 3em;
}

#illustrator{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 2;
	order: 2;
}

#illustratortext{
	transform: rotate(270deg);
	transform-origin: 0% 0%;
	margin-top: 1em;
}

#illustratorbalken{
	width: 1.5em;
}

#illustratorprozent{
	position: absolute;
	margin-top: 0.5em;
	margin-left: 3em;
}

#indesign{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 3;
	order: 3;
}

#indesigntext{
	transform: rotate(270deg);
	transform-origin: 0% 0%;
	margin-top: 1em;
}

#indesignbalken{
	width: 1.5em;
}

#indesignprozent{
	position: absolute;
	margin-top: 0.5em;
	margin-left: 3em;
}

#premiere{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 4;
	order: 4;
}

#premieretext{
	transform: rotate(270deg);
	transform-origin: 0% 0%;
	margin-top: 1em;
}

#premierebalken{
	width: 1.5em;
}

#premiereprozent{
	position: absolute;
	margin-top: 0.5em;
	margin-left: 3em;
}

#aftereffects{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 5;
	order: 5;
}

#aftereffectstext{
	transform: rotate(270deg);
	transform-origin: 0% 0%;
	margin-top: 1em;
}

#aftereffectsbalken{
	width: 1.5em;
}

#aftereffectsprozent{
	position: absolute;
	margin-top: 0.5em;
	margin-left: 3em;
}

#cinema4d{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 6;
	order: 6;
}

#cinema4dtext{
	transform: rotate(270deg);
	transform-origin: 0% 0%;
	margin-top: 1em;
}

#cinema4dbalken{
	width: 1.5em;
}

#cinema4dprozent{
	position: absolute;
	margin-top: 0.5em;
	margin-left: 3em;
}

#html5{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 7;
	order: 7;
}

#html5text{
	transform: rotate(270deg);
	transform-origin: 0% 0%;
	margin-top: 1em;
}

#html5balken{
	width: 1.5em;
}

#html5prozent{
	position: absolute;
	margin-top: 0.5em;
	margin-left: 3em;
}

#css3{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 8;
	order: 8;
}

#css3text{
	transform: rotate(270deg);
	transform-origin: 0% 0%;
	margin-top: 1em;
}

#css3balken{
	width: 1.5em;
}

#css3prozent{
	position: absolute;
	margin-top: 0.5em;
	margin-left: 3em;
}

#absaufentitel a{
	filter: invert(0%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#absaufentitel a:hover{
	filter: invert(100%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#absaufen{
	width: 75em;
	height: 40em;
	margin: 0 auto;
	background-image: url(data/project_preview_absaufen.jpg);
	background-position: center center;
	background-size: cover;
	padding: 0 0 0;
	box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.4);
}

#section2{
	background-color: #ececec;
}

#absaufentitel{
	width: 38em;
	height: 3.5em;
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -30em;
	z-index: 9;
}

#absaufentitel1{
	font-family: "Reem Kufi";
	letter-spacing: 10pt;
	color: #020b0f;
	filter: invert(100%);
	font-size: 32pt;
	position: absolute;
}

#absaufentitel2{
	font-family: "Josefin Sans";
	color: #4e565e;
	position: absolute;
	font-weight: light;
	font-size: 12pt;
	margin-top: 4em;
	letter-spacing: 5pt;
}

#viewproject{
	font-family: "Josefin Sans";
	font-size: 11pt;
	border-bottom: 0.5px solid;
	letter-spacing: 2pt;
	text-align: center;
	width: 12em;
	padding-bottom: 0.3em;
	position: absolute;
	left: 50%;
	margin-left: -6em;
	top: 90%;
	font-weight: light;
	z-index: 9;
}

.viewproject_hawaiianmystic{
	color: #79897a;
}

.viewproject_puls4{
	color: #7d7779;
}

.viewproject_oktotv{
	color: #444142;
}

.viewproject_queerwatch{
	color: #4b4949;
}

.viewproject_rundesleben{
	color: #827070;
}

.viewproject_duentscheidest{
	color: #9ea8c6;
}

.viewproject_absaufen{
	color: #4e565e;
}

#view a{
	opacity: 1;
	transition: 1s;
	-webkit-animation-transition-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#view a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-animation-transition-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#view a:link{
	color: white;
}

#view a:visited{
	color: white;
}

#projectarrow{
	display: none;
	width: 0.5em;
	margin-top: 18em;
	position: absolute;
	left: 50%;
	margin-left: -0.25em;
}

.projectarrow{
	width: 0.5em;
	position: absolute;
	
}

#absaufenlogo{
	position: absolute;
	top: 1.5em;
	left: 50%;
	margin-left: -6em;
	z-index: 9;
	width: 12em;
}

.absaufenlogo{
	width: 12em;
}

#section3{
	background-image: url(data/absaufen_bg.jpg);
	padding: 0 0 0;
}

#absaufenheader{
	width: 45em;
	margin: 0 auto;
}

.absaufenheader{
	width: 45em;
}

.arrow2{
	width: 0.5em;
	position: absolute;
}

#section4{
	background: #020b0f;
}

#headlinetext{
	font-family: "Reem Kufi";
	color: white;
	font-size: 25pt;
	line-height: 25pt;
	width: 15.1em;
	position: absolute;
	left: 50%;
	top: 25%;
	margin-left: -13em;
}

#text{
	font-family: "Josefin Sans";
	color: white;
	font-size: 19pt;
	width: 34em;
	text-align: left;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	position: absolute;
	left: 50%;
	margin-left: -17em;
	top: 45%;
	padding-left: 1.5em;
	font-weight: light;
	line-height: 21pt;
}

#arrowtext{
	width: 0.5em;
	margin-top: 16.5em;
	position: absolute;
	left: 50%;
	margin-left: -0.25em;
}

.arrowtext{
	width: 0.5em;
	position: absolute;
	
}

#section5{
	background: #020b0f;
}

#bookstartabsaufen{
	width: 65em;
	margin: 0 auto;
}

.bookstartabsaufen{
	width: 65em;
}

#section6{
	background: #020b0f;
}

#absaufenpicture1{
	background-image: url(data/printbooklet_absaufen.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#absaufenpicture2{
	background-image: url(data/lasercut_absaufen.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#absaufenpicture3{
	background-image: url(data/printbookletback_absaufen.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section7{
	background: #020b0f;
}

#verschluckt{
	position: absolute;
	width: 45em;
	left: 50%;
	margin-left: -37em;
	top: 10%;
}

.verschluckt{
	width: 45em;
}

#versunken{
	position: absolute;
	width: 45em;
	left: 50%;
	margin-left: -7.5em;
	top: 25%;
}

.versunken{
	width: 45em;
}

#nextproject a:link{
	color: white;
}

#nextproject a:visited{
	color: white;
}

#nextproject a:hover{
	opacity: 0.5;
	transition: 1s;
}

#rundesleben{
	width: 75em;
	height: 40em;
	margin: 0 auto;
	background-image: url(data/project_preview_rundesleben.jpg);
	background-position: center center;
	background-size: cover;
	padding: 0 0 0;
	box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.4);
}

#section8{
	background-color: #ececec;
}

#rundeslebentitel{
	width: 36em;
	height: 3.5em;
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -30em;
	z-index: 9;
}

#rundeslebentitel a{
	filter: invert(0%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#rundeslebentitel a:hover{
	filter: invert(100%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#rundeslebentitel1{
	font-family: "Reem Kufi";
	letter-spacing: 10pt;
	color: #38201d;
	filter: invert(100%);
	font-size: 32pt;
	position: absolute;
}

#rundeslebentitel2{
	font-family: "Josefin Sans";
	color: #827070;
	position: absolute;
	font-weight: light;
	font-size: 12pt;
	margin-top: 4em;
	letter-spacing: 5pt;
}

#projectpreviewrundesleben{
	background-image: url(data/rundesleben_preview.jpg);
	margin: 0 auto;
	width: 28em;
	height: 11.6em;
	background-size: 28em 11.6em;
	box-shadow: 15px 15px 15px rgba(0,0,0,0.32);
	filter: grayscale(80%);
	-webkit-filter: grayscale(80%);
	-moz-filter: grayscale(80%);
	-ms-filter: grayscale(80%);
	-o-filter: grayscale(80%);
}

#projectpreviewrundesleben:hover{
	z-index: 0;
	opacity: 0.5;
	transition: 1s;
}

#rundeslebenlogo{
	position: absolute;
	top: 2em;
	left: 50%;
	margin-left: -4.5em;
	width: 9em;
	z-index: 9;
}

.rundeslebenlogo{
	width: 9em;
}

#section9{
	background-image: url(data/rundesleben_bg.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#rundeslebenheader{
	width: 28em;
	margin: 0 auto;
}

.rundeslebenheader{
	width: 28em;
}

#section10{
	background: #38201d;
}

#section11{
	background: #38201d;
}

#jurtebanner{
	width: 100%;
}

.jurtebanner{
	width: 100%;
}

#rundeslebenpicture1{
	background-image: url(data/hanging_stone_rundesleben.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#rundeslebenpicture2{
	background-image: url(data/man_standing_in_front_of_jurte_rundesleben.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#rundeslebenpicture3{
	background-image: url(data/atmosphere_garden_rundesleben.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#rundeslebenpicture4{
	background-image: url(data/jurte_rundesleben.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#rundeslebenpicture5{
	background-image: url(data/man_in_jurte_rundesleben.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#rundeslebenpicture6{
	background-image: url(data/bamboo_rundesleben.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#rundeslebenpicture7{
	background-image: url(data/stove_fire_wood_rundesleben.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section13{
	background: #38201d;
}

#rundesleben_video{
	width: 70%;
	height: 70%;
	margin: 0 auto;
}

#duentscheidest{
	width: 75em;
	height: 40em;
	margin: 0 auto;
	background-image: url(data/project_preview_duentscheidest.jpg);
	background-position: center center;
	background-size: cover;
	padding: 0 0 0;
	box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.4);
}

#section14{
	background-color: #ececec;
}

#duentscheidesttitel{
	width: 38em;
	height: 3.5em;
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -30em;
	z-index: 9;
}

#duentscheidesttitel a{
	filter: invert(0%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#duentscheidesttitel a:hover{
	filter: invert(100%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#duentscheidesttitel1{
	font-family: "Reem Kufi";
	letter-spacing: 10pt;
	color: #282f44;
	filter: invert(100%);
	font-size: 32pt;
	position: absolute;
}

#duentscheidesttitel2{
	font-family: "Josefin Sans";
	color: #9ea8c6;
	position: absolute;
	font-weight: light;
	font-size: 12pt;
	margin-top: 4em;
	letter-spacing: 5pt;
}

#projectpreviewduentscheidest{
	background-image: url(data/duentscheidest_preview.jpg);
	margin: 0 auto;
	width: 28em;
	height: 11.6em;
	background-size: 28em 11.6em;
	box-shadow: 15px 15px 15px rgba(0,0,0,0.32);
	filter: grayscale(80%);
	-webkit-filter: grayscale(80%);
	-moz-filter: grayscale(80%);
	-ms-filter: grayscale(80%);
	-o-filter: grayscale(80%);
}

#projectpreviewduentscheidest:hover{
	z-index: 0;
	opacity: 0.5;
	transition: 1s;
}

#duentscheidestlogo{
	position: absolute;
	top: 2.5em;
	left: 50%;
	margin-left: -7em;
	width: 14em;
	z-index: 9;
}

.duentscheidestlogo{
	width: 14em;
}

#section15{
	background-image: url(data/duentscheidest_bg.jpg);
	padding: 0 0 0;
}

#duentscheidestheader{
	width: 45em;
	margin: 0 auto;
}

.duentscheidestheader{
	width: 45em;
}

#section16{
	background: #3b4564;
}

#section17{
	background: #3b4564;
}

#fish{
	width: 60em;
	margin: 0 auto;
	margin-top: 19em;
	margin-left: -20em;
}

.fish{
	width: 60em;
}

#duentscheidestpicture1{
	background-image: url(data/swimming_wood_3d.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#duentscheidestpicture2{
	background-image: url(data/deep_sea_3d.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#duentscheidestpicture3{
	background-image: url(data/fish_swimming_in_sea_3d.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#duentscheidestpicture4{
	background-image: url(data/drops_of_water.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#duentscheidestpicture5{
	background-image: url(data/you_decide.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section19{
	background: #3b4564;
}

#duentscheidestanimation{
	margin: 0 auto;
	width: 70em;
}

#duentscheidest_video{
	width: 70%;
	height: 70%;
	margin: 0 auto;
}

#section20{
	background-color: #ececec;
}

#icons2{
	height: 6em;
	width: 52.5em;
	margin: 0 auto;
	padding-bottom: 1em;
}

#icons2{
	height: 6em;
	width: 52.5em;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	padding-bottom: 1em;
}

#facebookicon2{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 3;
	order: 3;
	padding-right: 1em;
}

.facebookicon2{
	width: 9em;
}

#facebookicon2 a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#facebookicon2 a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#linkedinicon2{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 2;
	order: 2;
	padding-right: 1em;
}

.linkedinicon2{
	width: 9em;
}

#linkedinicon2 a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#linkedinicon2 a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#instagramicon2{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 5;
	order: 5;
	padding-left: 1em;
	padding-right: 1em;
}

.instagramicon2{
	width: 9em;
}

#instagramicon2 a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#instagramicon2 a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#mailicon2{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 1;
	order: 1;
	padding-left: 1em;
	padding-right: 1em;
}

.mailicon2{
	width: 9em;
}

#mailicon2 a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#mailicon2 a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#telicon2{
	-webkit-flex: 1;
	flex: 1;
	-webkit-order: 4;
	order: 4;
	padding-left: 1em;
}

.telicon2{
	width: 9em;
}

#telicon2 a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#telicon2 a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#lastinfotext{
	font-family: "Josefin Sans";
	font-size: 12pt;
	color: black;
	width: 15em;
	margin: 0 auto;
	margin-top: 8em;
	font-weight: light;
	line-height: 20pt;
	text-align: center;
}

#lastinfotext a:link{
	color: black;
	
}

#lastinfotext a:visited{
	color: black;
}

#lastinfotext a{
	opacity: 1;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#lastinfotext a:hover{
	opacity: 0.5;
	transition: 1s;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#queerwatch{
	width: 75em;
	height: 40em;
	margin: 0 auto;
	background-image: url(data/project_preview_queer.jpg);
	background-position: center center;
	background-size: cover;
	padding: 0 0 0;
	box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.4);
}

#section21{
	background-color: #ececec;
}

#queerwatchtitel{
	width: 36em;
	height: 3.5em;
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -30em;
	z-index: 9;
}

#queerwatchtitel a{
	filter: invert(0%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#queerwatchtitel a:hover{
	filter: invert(100%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#queerwatchtitel1{
	font-family: "Reem Kufi";
	letter-spacing: 10pt;
	color: #dfdbdb;
	filter: invert(100%);
	font-size: 32pt;
	position: absolute;
}

#queerwatchtitel2{
	font-family: "Josefin Sans";
	color: #4b4949;
	position: absolute;
	font-weight: light;
	font-size: 12pt;
	margin-top: 4em;
	letter-spacing: 5pt;
}

#queerwatchlogo{
	position: absolute;
	top: 2em;
	left: 50%;
	margin-left: -5em;
	width: 10em;
	z-index: 9;
}

.queerwatchlogo{
	width: 10em;
}

#section22{
	background-image: url(data/queerwatch_bg.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section23{
	background: 989898;
}

#queerwatchpicture1{
	background-image: url(data/scene_setting.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#queerwatchpicture2{
	background-image: url(data/camera_operator_florian_reithofer.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#queerwatchpicture3{
	background-image: url(data/actress_in_studio_setting.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#queerwatchpicture4{
	background-image: url(data/two_girls_dancing.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#queerwatchpicture5{
	background-image: url(data/two_man_looking_at_each_other.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#queerwatchpicture6{
	background-image: url(data/two_guys_looking_at_each_other.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#queerwatchpicture7{
	background-image: url(data/four_girls_having_fun.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section23{
	background: #989898;
}

#section24_1{
	background: #989898;
}

#queerwatch_video{
	width: 70%;
	height: 70%;
	margin: 0 auto;
}

#puls4{
	width: 75em;
	height: 40em;
	margin: 0 auto;
	background-image: url(data/project_preview_puls4.jpg);
	background-position: center center;
	background-size: cover;
	padding: 0 0 0;
	box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.4);
}

#section25{
	background-color: #ececec;
}

#puls4titel{
	width: 36em;
	height: 3.5em;
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -30em;
	z-index: 9;
}

#puls4titel a{
	filter: invert(0%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#puls4titel a:hover{
	filter: invert(100%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#puls4titel1{
	font-family: "Reem Kufi";
	letter-spacing: 10pt;
	color: #353237;
	filter: invert(100%);
	font-size: 32pt;
	position: absolute;
}

#puls4titel2{
	font-family: "Josefin Sans";
	color: #7d7779;
	position: absolute;
	font-weight: light;
	font-size: 12pt;
	margin-top: 4em;
	letter-spacing: 5pt;
}

#puls4logo{
	position: absolute;
	left: 50%;
	margin-left: -2em;
	top: 2em;
	width: 4em;
	z-index: 9;
}

.puls4logo{
	width: 4em;
}

#section26{
	background-image: url(data/man_standing_in_marxhalle.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section27{
	background: #353237;
}

#section28{

}

#puls4picture1{
	background-image: url(data/putting_tracking_markers_on_the_floor.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#puls4picture2{
	background-image: url(data/dop_red_camera.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#puls4picture3{
	background-image: url(data/director_and_dop_coordinate_actor.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#puls4picture4{
	background-image: url(data/first_scene_first_take.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#puls4picture5{
	background-image: url(data/young_scientist.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section28_1{
	background: #353237;
}

#puls4_video{
	width: 70%;
	height: 70%;
	margin: 0 auto;
}

#oktotv{
	width: 75em;
	height: 40em;
	margin: 0 auto;
	background-image: url(data/project_preview_okto.jpg);
	background-position: center center;
	background-size: cover;
	padding: 0 0 0;
	box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.4);
}

#section29{
	background-color: #ececec;
}

#oktotvtitel{
	width: 36em;
	height: 3.5em;
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -30em;
	z-index: 9;
}

#oktotvtitel a{
	filter: invert(0%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#oktotvtitel a:hover{
	filter: invert(100%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#oktotvtitel1{
	font-family: "Reem Kufi";
	letter-spacing: 10pt;
	color: #070707;
	filter: invert(100%);
	font-size: 32pt;
	position: absolute;
}

#oktotvtitel2{
	font-family: "Josefin Sans";
	color: #444142;
	position: absolute;
	font-weight: light;
	font-size: 12pt;
	margin-top: 4em;
	letter-spacing: 5pt;
}

#section30{
	background-image: url(data/oktotv_bg.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#oktotvlogo{
	position: absolute;
	left: 50%;
	margin-left: -2em;
	top: 2em;
	width: 4em;
	z-index: 9;
}

.oktotvlogo{
	width: 4em;
}

#section31{
	background: #070707;
}

#section32{
	background: #070707;
}

#oktotvpicture1{
	background-image: url(data/8_comet_falling.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#oktotvpicture2{
	background-image: url(data/8_comet_falling_faster.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#oktotvpicture3{
	background-image: url(data/8_comet_falling_earth.jpg);
	background-position: center top;
	padding: 0 0 0;
}


#section33{
	background: #070707;
}

#oktotv_video{
	width: 70%;
	height: 70%;
	margin: 0 auto;
}

#hawaiianmystic{
	width: 75em;
	height: 40em;
	margin: 0 auto;
	background-image: url(data/project_preview_hawaiianmystic.jpg);
	background-position: center center;
	background-size: cover;
	padding: 0 0 0;
	box-shadow: 20px 20px 80px rgba(0, 0, 0, 0.4);
}

#section34{
	background-color: #ececec;
}

#hawaiianmystictitel{
	width: 36em;
	height: 3.5em;
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -30em;
	z-index: 9;
}

#hawaiianmystictitel a{
	filter: invert(0%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#hawaiianmystictitel a:hover{
	filter: invert(100%);
	-webkit-transition: 3s;
	-webkit-transition-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

#hawaiianmystictitel1{
	font-family: "Reem Kufi";
	letter-spacing: 10pt;
	color: #151f15;
	filter: invert(100%);
	font-size: 32pt;
	position: absolute;
}

#hawaiianmystictitel2{
	font-family: "Josefin Sans";
	color: #79897a;
	position: absolute;
	font-weight: light;
	font-size: 12pt;
	margin-top: 4em;
	letter-spacing: 5pt;
}

#hawaiianmysticlogo{
	position: absolute;
	top: 1.5em;
	left: 50%;
	margin-left: -6em;
	z-index: 9;
	width: 12em;
}

.hawaiianmysticlogo{
	width: 12em;
}

#section35{
	background-image: url(data/waterfall_hawaii.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section36{
	background: #000c09;
}

#section37{

}

#hawaiianmysticpicture1{
	background-image: url(data/jungle_hawaii.jpg);
	background-position: center bottom;
	padding: 0 0 0;
}

#hawaiianmysticpicture2{
	background-image: url(data/lava_flow_ocean_hawaii.jpg);
	background-position: center bottom;
	padding: 0 0 0;
}

#hawaiianmysticpicture3{
	background-image: url(data/maunakea_top_view_vulcano.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#hawaiianmysticpicture4{
	background-image: url(data/lava_stone_3d_scanned.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#hawaiianmysticpicture5{
	background-image: url(data/stone_jungle_3d_scanned.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#section38{
	background: #000c09;
}

#hawaiianmystic_video{
	width: 70%;
	height: 70%;
	margin: 0 auto;
}











/*---------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- Responsive Part --------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*/



/*--------------------------------------------  Small Desktop  --------------------------------------------*/

@media only screen and (min-width: 980px) and (max-width: 1279px) { 

#textabout1{
	font-size: 20pt;
	height: 17em;
	margin-top: -8.5em;
	left: 2em;
	line-height: 25pt;	
}

#mobileversioninfo{
	display: none;
}

#mobileversioninfo2{
	display: none;
}

#zeitstrahl{
	width: 60em;
	margin-left: -30em;
	margin-top: 0em;
}

.zeitstrahl{
	width: 60em;
}

#lebenslaufereignisse{
	font-size: 10pt;
	width: 69em;
	margin-top: 10em;
}

#skills{
	margin-top: 10em;
}

#skills2{
	width: 40em;
}

#hundertprozenttext{
	font-size: 10pt;
	margin-left: -33em;
}

#hundertprozentborder{
	width: 50em;
	margin-left: -25em;
}

#skillbereiche{
	font-size: 10pt;
	width: 50em;
}

#hawaiianmystic{
	width: 52em;
	height: 28em;
}

#hawaiianmystictitel{
	width: 36em;
	height: 3.5em;
	top: 40%;
	margin-left: -21em;
}

#hawaiianmystictitel1{
	font-size: 24pt;
	letter-spacing: 7pt;
}

#hawaiianmystictitel2{
	font-size: 10pt;
	letter-spacing: 4pt;
}

#puls4{
	width: 52em;
	height: 28em;
}

#puls4titel{
	width: 36em;
	height: 3.5em;
	top: 40%;
	margin-left: -21em;
}

#puls4titel1{
	font-size: 24pt;
	letter-spacing: 7pt;
}

#puls4titel2{
	font-size: 10pt;
	letter-spacing: 4pt;
}

#oktotv{
	width: 52em;
	height: 28em;
}

#oktotvtitel{
	width: 36em;
	height: 3.5em;
	top: 40%;
	margin-left: -21em;
}

#oktotvtitel1{
	font-size: 24pt;
	letter-spacing: 7pt;
}

#oktotvtitel2{
	font-size: 10pt;
	letter-spacing: 4pt;
}

#queerwatch{
	width: 52em;
	height: 28em;
}

#queerwatchtitel{
	width: 36em;
	height: 3.5em;
	top: 40%;
	margin-left: -21em;
}

#queerwatchtitel1{
	font-size: 24pt;
	letter-spacing: 7pt;
}

#queerwatchtitel2{
	font-size: 10pt;
	letter-spacing: 4pt;
}

#rundesleben{
	width: 52em;
	height: 28em;
}

#rundeslebentitel{
	width: 36em;
	height: 3.5em;
	top: 40%;
	margin-left: -21em;
}

#rundeslebentitel1{
	font-size: 24pt;
	letter-spacing: 7pt;
}

#rundeslebentitel2{
	font-size: 10pt;
	letter-spacing: 4pt;
}

#duentscheidest{
	width: 52em;
	height: 28em;
}

#duentscheidesttitel{
	width: 36em;
	height: 3.5em;
	top: 40%;
	margin-left: -21em;
}

#duentscheidesttitel1{
	font-size: 24pt;
	letter-spacing: 7pt;
}

#duentscheidesttitel2{
	font-size: 10pt;
	letter-spacing: 4pt;
}

#absaufen{
	width: 52em;
	height: 28em;
}

#absaufentitel{
	width: 36em;
	height: 3.5em;
	top: 40%;
	margin-left: -21em;
}

#absaufentitel1{
	font-size: 24pt;
	letter-spacing: 7pt;
}

#absaufentitel2{
	font-size: 10pt;
	letter-spacing: 4pt;
}

#absaufenheader{
	width: 40em;
}

.absaufenheader{
	width: 40em;
}

#bookstartabsaufen{
	width: 65em;
	margin: 0 auto;
}

.bookstartabsaufen{
	width: 65em;
}

#bookstartabsaufen{
	width: 55em;
}

.bookstartabsaufen{
	width: 55em;
}

#verschluckt{
	width: 40em;
	margin-left: -31em;
}

.verschluckt{
	width: 40em;
}

#versunken{
	width: 40em;
	margin-left: -9em;
}

.versunken{
	width: 40em;
}

#rundeslebenheader{
	width: 25em;
}

.rundeslebenheader{
	width: 25em;
}

#duentscheidestheader{
	width: 35em;
}

.duentscheidestheader{
	width: 35em;
}

#fish{
	width: 50em;
	margin-left: -15em;
}

.fish{
	width: 50em;
}

#headlinetext{
	font-size: 22pt;
}

#text{
	font-size: 17pt;
	width: 30em;
	margin-left: -15em;
}

#icons2{
	width: 42.5em;
}

.linkedinicon2{
	width: 7em;
}

.facebookicon2{
	width: 7em;
}

.instagramicon2{
	width: 7em;
}

.mailicon2{
	width: 7em;
}

.telicon2{
	width: 7em;
}

#lastinfotext{
	margin-top: 2.5em;
}


}

/*-----------------------------------------------  Tablet  ------------------------------------------------*/

@media only screen and (min-width: 760px) and (max-width: 979px) {


#backgroundtitel1{
	display: none;
}

#backgroundtitel2{
	display: none;
}

#section0{
	background-image: url(data/titelbild_mobile.jpg);
	background-position: center top;
}

#florianreithoferlogo{
	width: 15em;
	height: 15em;
	margin-left: -7.5em;
	margin-top: -7.5em;
}

.florianreithoferlogo{
	width: 15em;
	height: 15em;
}

h2{
	font-size: 25pt;
	width: 7em;
	margin-left: -3.5em;
}

h1{
	font-size: 9pt;
	width: 22em;
	margin-left: -11em;
}

#textabout1{
	width: 20em;
	font-size: 18pt;
	height: 12em;
	left: 50%;
	top: 0;
	margin-top: 28em;
	margin-left: -10em;
	line-height: 21pt;
}

#portrait{
	width: 100%;
	top: 0;
	margin-top: 0;
	border: 0;
	clip:rect(auto auto 35em auto);
	background-image: url(data/portrait3.jpg);
	background-size: 100% auto;
	background-position: center top;
}

.portrait{
	display: none;
}

#icons{
	top: 3%;
	width: 20em;
	margin-left: -10em;
}

.mailicon{
	width: 4em;
}

#linkedinicon{
	width: 4em;
	margin-left: 2em;
}

.linkedinicon{
	width: 4em;
	margin-left: 2em;
}

#facebookicon{
	width: 4em;
	margin-left: 4em;
}

.facebookicon{
	width: 4em;
	margin-left: 4em;
}

#telicon{
	width: 4em;
	margin-left: 6em;
}

.telicon{
	width: 4em;
	margin-left: 6em;
}

#instagramicon{
	width: 4em;
	margin-left: 8em;
}

.instagramicon{
	width: 4em;
	margin-left: 8em;
}

#mobileversioninfo{
	display: none;
}

#mobileversioninfo2{
	display: none;
}

#zeitstrahl{
	width: 40em;
	margin-left: -20em;
	margin-top: 6em;
}

.zeitstrahl{
	width: 40em;
}

#lebenslaufereignisse{
	font-size: 10pt;
	width: 50em;
	margin-top: 10em;
}

#skills{
	margin-top: 10em;
}

#skills2{
	width: 35em;
}

#hundertprozenttext{
	font-size: 10pt;
	margin-left: -25em;
}

#hundertprozentborder{
	width: 38em;
	margin-left: -19em;
}

#skillbereiche{
	font-size: 10pt;
	width: 42.5em;
}

#viewproject{
	font-size: 10pt;
	width: 12em;
	margin-left: -6em;
}

#hawaiianmystic{
	width: 30em;
	height: 30em;
}

#hawaiianmystictitel{
	width: 28em;
	height: 3.5em;
	top: 30%;
	margin-left: -13em;
}

#hawaiianmystictitel1{
	font-size: 21pt;
	letter-spacing: 5pt;
}

#hawaiianmystictitel2{
	font-size: 9pt;
	letter-spacing: 3pt;
}

#puls4{
	width: 30em;
	height: 30em;
}

#puls4titel{
	width: 28em;
	height: 3.5em;
	top: 30%;
	margin-left: -13em;
}

#puls4titel1{
	font-size: 21pt;
	letter-spacing: 5pt;
}

#puls4titel2{
	font-size: 9pt;
	letter-spacing: 3pt;
}

#oktotv{
	width: 30em;
	height: 30em;
}

#oktotvtitel{
	width: 28em;
	height: 3.5em;
	top: 30%;
	margin-left: -13em;
}

#oktotvtitel1{
	font-size: 21pt;
	letter-spacing: 5pt;
}

#oktotvtitel2{
	font-size: 9pt;
	letter-spacing: 3pt;
}

#queerwatch{
	width: 30em;
	height: 30em;
}

#queerwatchtitel{
	width: 28em;
	height: 3.5em;
	top: 30%;
	margin-left: -13em;
}

#queerwatchtitel1{
	font-size: 21pt;
	letter-spacing: 5pt;
}

#queerwatchtitel2{
	font-size: 9pt;
	letter-spacing: 3pt;
}

#rundesleben{
	width: 30em;
	height: 30em;
}

#rundeslebentitel{
	width: 28em;
	height: 3.5em;
	top: 30%;
	margin-left: -13em;
}

#rundeslebentitel1{
	font-size: 21pt;
	letter-spacing: 5pt;
}

#rundeslebentitel2{
	font-size: 9pt;
	letter-spacing: 3pt;
}

#duentscheidest{
	width: 30em;
	height: 30em;
}

#duentscheidesttitel{
	width: 28em;
	height: 3.5em;
	top: 30%;
	margin-left: -13em;
}

#duentscheidesttitel1{
	font-size: 21pt;
	letter-spacing: 5pt;
}

#duentscheidesttitel2{
	font-size: 9pt;
	letter-spacing: 3pt;
}

#absaufen{
	width: 30em;
	height: 30em;
}

#absaufentitel{
	width: 28em;
	height: 3.5em;
	top: 30%;
	margin-left: -13em;
}

#absaufentitel1{
	font-size: 21pt;
	letter-spacing: 5pt;
}

#absaufentitel2{
	font-size: 9pt;
	letter-spacing: 3pt;
}

#absaufenheader{
	width: 40em;
}

.absaufenheader{
	width: 40em;
}

#projectarrow{
	margin-top: 6em;	
}

#absaufenheader{
	width: 30em;
}

.absaufenheader{
	width: 30em;
}

.absaufenlogo{
	width: 10em;
}

#bookstartabsaufen{
	width: 50em;
}

.bookstartabsaufen{
	width: 50em;
}

#verschluckt{
	width: 30em;
	margin-left: -22em;
	top: 20%;
}

.verschluckt{
	width: 30em;
}

#versunken{
	width: 30em;
	margin-left: -9em;
	top: 40%;
}

.versunken{
	width: 30em;
}

.rundeslebenlogo{
	width: 7em;
}

#rundeslebenheader{
	width: 20em;
}

.rundeslebenheader{
	width: 20em;
}

.duentscheidestlogo{
	width: 10em;
}

#duentscheidestheader{
	width: 25em;
}

.duentscheidestheader{
	width: 25em;
}

#fish{
	width: 35em;
	margin-left: -10em;
}

.fish{
	width: 35em;
}

#headlinetext{
	font-size: 20pt;
	margin-left: -11em;
}

#text{
	font-size: 15pt;
	width: 25em;
	margin-left: -12.5em;
}

#icons2{
	width: 31.75em;
}

.linkedinicon2{
	width: 5em;
}

.facebookicon2{
	width: 5em;
}

.instagramicon2{
	width: 5em;
}

.mailicon2{
	width: 5em;
}

.telicon2{
	width: 5em;
}

#lastinfotext{
	margin-top: 3em;
}

}

/*---------------------------------------------  Smartphone Landscape  ----------------------------------------------*/

@media screen and (max-width : 760px) and (min-width: 416px) {

#section0{
	background-image: url(data/titelbild_mobile.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#backgroundtitel1{
	display: none;
}

#backgroundtitel2{
	display: none;
}

#previousproject{
	font-size: 10pt;
}

#nextproject{
	font-size: 10pt;
}

#hello{
	z-index: 10;
	font-size: 10pt;
	width: 13.5em;
}

#about_black{
	font-size: 10pt;
	width: 13.5em;
}

#nav2{
	font-size: 10pt;
	width: 13.5em;
}

#navproject3{
	font-size: 10pt;
	width: 13.5em;
}

#projectnav1{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav1 td:first-child{
	padding-right: 70px;
}

#projectnav1 td:last-child{
	padding-left: 70px;
}

#projectnav2{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav2 td:first-child{
	padding-right: 70px;
}

#projectnav2 td:last-child{
	padding-left: 70px;
}

#projectnav3{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav3 td:first-child{
	padding-right: 70px;
}

#projectnav3 td:last-child{
	padding-left: 70px;
}

#projectnav4{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav4 td:first-child{
	padding-right: 70px;
}

#projectnav4 td:last-child{
	padding-left: 70px;
}

#projectnav5{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav5 td:first-child{
	padding-right: 70px;
}

#projectnav5 td:last-child{
	padding-left: 70px;
}

#projectnav6{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav6 td:first-child{
	padding-right: 70px;
}

#projectnav6 td:last-child{
	padding-left: 70px;
}

#florianreithoferlogo{
	width: 10em;
	height: 10em;
	margin-left: -5em;
	margin-top: -5em;
}

.florianreithoferlogo{
	width: 10em;
	height: 10em;
}

h2{
	font-size: 18pt;
	padding-bottom: 0em;
	width: 9em;
	margin-left: -4.5em;
}

h1{
	font-size: 8pt;
	width: 24em;
	text-align: center;
	margin-left: -12em;
	margin-top: 4.5em;
}

#closebutton{
	top: 7%;
	left: 5%;
}

#closebutton2{
	top: 7%;
	left: 5%;
}

.closebutton{
	width: 1.5em;
}

#textabout1{
	font-size: 13pt;
	line-height: 15pt;
	margin-top: -6em;
}

#portrait{
	height: 95%;
	width: auto;
	right: 9%;
	border: 0;
	top: 5%;
}

.portrait{
	height: 95%;
	width: auto;

}

#icons{
	width: 16.25em;
	height: 1.5em;
	top: 3%;
	margin-left: -8.125em;
	margin-top: 0em;
}

.mailicon{
	width: 2.5em;
}

#linkedinicon{
	margin-left: 3.5em;
}

.linkedinicon{
	width: 2.5em;
}

#facebookicon{
	margin-left: 7em;
}

.facebookicon{
	width: 2.5em;
}

#telicon{
	margin-left: 10.5em;
}

.telicon{
	width: 2.5em;
}

#instagramicon{
	margin-left: 14em;
}

.instagramicon{
	width: 2.5em;
}

#viewproject{
	font-size: 9pt;
	width: 10em;
	margin-left: -5em;
	letter-spacing: 3pt;
}

#hawaiianmystic{
	width: 30em;
	height: 15em;
}

#hawaiianmystictitel{
	width: 24em;
	height: 3.5em;
	top: 35%;
	margin-left: -13em;
}

#hawaiianmystictitel1{
	font-size: 19pt;
	letter-spacing: 4pt;
}

#hawaiianmystictitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#hawaiianmysticlogo{
	margin-left: -3.5em;
	width: 7em;
	position: fixed;
}

.hawaiianmysticlogo{
	width: 7em;
}

#puls4{
	width: 30em;
	height: 15em;
}

#puls4titel{
	width: 24em;
	height: 3.5em;
	top: 35%;
	margin-left: -13em;
}

#puls4titel1{
	font-size: 19pt;
	letter-spacing: 4pt;
}

#puls4titel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#oktotv{
	width: 30em;
	height: 15em;
}

#oktotvtitel{
	width: 24em;
	height: 3.5em;
	top: 35%;
	margin-left: -13em;
}

#oktotvtitel1{
	font-size: 19pt;
	letter-spacing: 4pt;
}

#oktotvtitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#queerwatch{
	width: 30em;
	height: 15em;
}

#queerwatchtitel{
	width: 24em;
	height: 3.5em;
	top: 35%;
	margin-left: -13em;
}

#queerwatchtitel1{
	font-size: 19pt;
	letter-spacing: 4pt;
}

#queerwatchtitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#rundesleben{
	width: 30em;
	height: 15em;
}

#rundeslebentitel{
	width: 24em;
	height: 3.5em;
	top: 35%;
	margin-left: -13em;
}

#rundeslebentitel1{
	font-size: 19pt;
	letter-spacing: 4pt;
}

#rundeslebentitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#duentscheidest{
	width: 30em;
	height: 15em;
}

#duentscheidesttitel{
	width: 24em;
	height: 3.5em;
	top: 35%;
	margin-left: -13em;
}

#duentscheidesttitel1{
	font-size: 19pt;
	letter-spacing: 4pt;
}

#duentscheidesttitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#absaufen{
	width: 30em;
	height: 15em;
}

#absaufentitel{
	width: 24em;
	height: 3.5em;
	top: 35%;
	margin-left: -13em;
}

#absaufentitel1{
	font-size: 19pt;
	letter-spacing: 4pt;
}

#absaufentitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#projectarrow{
	display: none;
}

#dotborder{
	display: none;
}

#absaufenheader{
	width: 12em;
}

.absaufenheader{
	width: 12em;
}

#absaufenlogo{
	position: fixed;
}

#absaufenlogo{
	margin-left: -3.5em;
	width: 7em;
}

.absaufenlogo{
	width: 7em;
}

#bookstartabsaufen{
	width: 20em;
}

.bookstartabsaufen{
	width: 20em;
}

#verschluckt{
	width: 15em;
	margin-left: -11em;
	top: 20%;
}

.verschluckt{
	width: 15em;
}

#versunken{
	width: 15em;
	margin-top: 1em;
	margin-left: -3em;
	top: 40%;
}

.versunken{
	width: 15em;
}

#oktotvlogo{
	position: fixed;
}

#queerwatchlogo{
	position: fixed;
}

#puls4logo{
	position: fixed;
}

#rundeslebenlogo{
	position: fixed;
	width: 5em;
	margin-left: -2.5em;
}

.rundeslebenlogo{
	width: 5em;
}

#rundeslebenheader{
	width: 10em;
}

.rundeslebenheader{
	width: 10em;
}

#rundeslebenpicture1{
	background-image: url(data/hanging_stone_rundesleben.jpg);
	background-position: left top;
	padding: 0 0 0;
}

#duentscheidestlogo{
	position: fixed;
	width: 8em;
	margin-left: -4em;
}

.duentscheidestlogo{
	width: 8em;
}

#duentscheidestheader{
	width: 15em;
}

.duentscheidestheader{
	width: 15em;
}

#fish{
	width: 30em;
	margin-left: -6em;
	margin-top: 5em;
	margin-bottom: 5em;
}

.fish{
	width: 30em;
}

#headlinetext{
	font-size: 12pt;
	width: 15em;
	margin-top: -1.5em;
	margin-left: -12.5em;
	line-height: 15pt;
}

#text{
	font-size: 11pt;
	width: 28em;
	margin-left: -14em;
	line-height: 12pt;
	top: 40%;
}

#icons2{
	width: 18em;
}

.linkedinicon2{
	width: 3em;
}

.facebookicon2{
	width: 3em;
}

.instagramicon2{
	width: 3em;
}

.mailicon2{
	width: 3em;
}

.telicon2{
	width: 3em;
}

#lastinfotext{
	margin-top: 3.5em;
}

#closebutton{
	position: fixed;
}

#section1bg{
	position: fixed;
}

#textabout1{
	position: fixed;
}

#portrait{
	position: fixed;
}

#icons{
	position: fixed;
}

#facebookicon{
	position: fixed;
}

#instagramicon{
	position: fixed;
}

#mailicon{
	position: fixed;
}

#telicon{
	position: fixed;
}

#hello{
	position: fixed;
}

#lastinfotext{
	font-size: 9pt;
	line-height: 12pt;
	margin-top: 0em;
}

#icons2{
	height: auto;
	width: 20em;
	flex-direction: row;
	padding-bottom: 1.5em;
}

#linkedinicon2{
	padding-right: 0em;
	padding-bottom: 0;
}

.linkedinicon2{
	width: 4em;
}

#facebookicon2{
	padding-right: 0em;
	padding-bottom: 0;
}

.facebookicon2{
	width: 4em;
}

#instagramicon2{
	padding-left: 0em;
	padding-right: 0em;
	padding-bottom: 0;
}

.instagramicon2{
	width: 4em;
}

#mailicon2{
	padding-left: 0em;
	padding-right: 0em;
	padding-bottom: 0;
}

.mailicon2{
	width: 4em;
}

#telicon2{
	padding-left: 0em;
}

.telicon2{
	width: 4em;
}


/*no animations mobile*/

.animated {
	/*CSS transitions*/
	-o-transition-property: none !important;
	-moz-transition-property: none !important;
	-ms-transition-property: none !important;
	-webkit-transition-property: none !important;
	transition-property: none !important;
	/*CSS transforms*/
	-o-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-webkit-transform: none !important;
	transform: none !important;
	/*CSS animations*/
	-webkit-animation: none !important;
	-moz-animation: none !important;
	-o-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
}

}

/*---------------------------------------------  Smartphone Portrait  ----------------------------------------------*/

@media screen and (max-width : 415px) {

#previousproject{
	font-size: 10pt;
}

#nextproject{
	font-size: 10pt;
}

#hello{
	z-index: 10;
	font-size: 10pt;
	width: 13.5em;
}

#about_black{
	font-size: 10pt;
	width: 13.5em;
}

#nav2{
	font-size: 10pt;
	width: 13.5em;
}

#navproject3{
	font-size: 10pt;
	width: 13.5em;
}

#projectnav1{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav1 td:first-child{
	padding-right: 70px;
}

#projectnav1 td:last-child{
	padding-left: 70px;
}

#projectnav2{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav2 td:first-child{
	padding-right: 70px;
}

#projectnav2 td:last-child{
	padding-left: 70px;
}

#projectnav3{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav3 td:first-child{
	padding-right: 70px;
}

#projectnav3 td:last-child{
	padding-left: 70px;
}

#projectnav4{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav4 td:first-child{
	padding-right: 70px;
}

#projectnav4 td:last-child{
	padding-left: 70px;
}

#projectnav5{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav5 td:first-child{
	padding-right: 70px;
}

#projectnav5 td:last-child{
	padding-left: 70px;
}

#projectnav6{
	font-size: 8pt;
	margin-top: 4em;
	width: 30em;
	margin-left: -15em;
}

#projectnav6 td:first-child{
	padding-right: 70px;
}

#projectnav6 td:last-child{
	padding-left: 70px;
}

#section0{
	background-image: url(data/titelbild_mobile.jpg);
	background-position: center top;
	padding: 0 0 0;
}

#backgroundtitel1{
	display: none;
}

#backgroundtitel2{
	display: none;
}

#florianreithoferlogo{
	width: 10em;
	height: 10em;
	margin-left: -5em;
	margin-top: -5em;
}

.florianreithoferlogo{
	width: 10em;
	height: 10em;
}

h2{
	font-size: 16pt;
	letter-spacing: 30pt;
	padding-bottom: 0em;
	width: 5.8em;
	margin-left: -2.9em;
}

h1{
	font-size: 7pt;
	width: 22em;
	text-align: center;
	margin-top: 4.5em;
	margin-left: -11em;
	letter-spacing: 5pt;	
}


#closebutton{
	top: 5%;
	left: 10%;
}

#closebutton2{
	top: 5%;
	left: 10%;
}

.closebutton{
	width: 1.5em;
}

#textabout1{
	width: 17em;
	font-size: 12pt;
	height: 12em;
	left: 50%;
	top: 0;
	margin-top: 18em;
	margin-left: -8.5em;
	line-height: 15pt;
}

#portrait{
	width: 100%;
	top: 0;
	margin-top: 0;
	border: 0;
	clip:rect(auto auto 17em auto);
	background-image: url(data/portrait3.jpg);
	background-size: 100% auto;
	background-position: center top;
}

.portrait{
	display: none;
}

#icons{
	top: 1.8%;
	width: 15em;
	margin-left: -6.5em;
}

.mailicon{
	width: 3em;
}

#linkedinicon{
	width: 3em;
	margin-left: 1.5em;
}

.linkedinicon{
	width: 3em;
	margin-left: 1.5em;
}

#facebookicon{
	width: 3em;
	margin-left: 3em;
}

.facebookicon{
	width: 3em;
	margin-left: 3em;
}

#telicon{
	width: 3em;
	margin-left: 4.5em;
}

.telicon{
	width: 3em;
	margin-left: 4.5em;
}

#instagramicon{
	width: 3em;
	margin-left: 6em;
}

.instagramicon{
	width: 3em;
	margin-left: 6em;
}

#sectioncv{
	position: fixed;
}

#sectioncvbg{
	position: fixed;
}

#mobileversioninfo{
	display: inline;
	font-family: "Josefin Sans";
	font-size: 12pt;
	color: white;
	width: 12.6em;
	position: absolute;
	margin-left: -6.3em;
	top: 25%;
	left: 50%;
}

#mobileversioninfo2{
	display: inline;
	font-family: "Expletus Sans";
	font-size: 80pt;
	color: white;
	opacity: 0.25;
	width: 0.6em;
	margin-left: -0.3em;
	position: absolute;
	top: 35%;
	left: 50%;
}

#zeitstrahl{
	display: none;
}

#lebenslaufereignisse{
	display: none;
}

#skills{
	display: none;
}

#hawaiianmystic{
	width: 15em;
	height: 25em;
	background-position: 45% center;
}

#hawaiianmystictitel{
	transform: rotate(270deg);
	width: 17em;
	margin-left: -12em;
	margin-top: 5em;
}

#hawaiianmystictitel1{
	font-size: 18pt;
	letter-spacing: 3pt;
}

#hawaiianmystictitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#puls4{
	width: 15em;
	height: 25em;
	background-position: 45% center;
}

#puls4titel{
	transform: rotate(270deg);
	width: 17em;
	margin-left: -12em;
	margin-top: 5em;
}

#puls4titel1{
	font-size: 18pt;
	letter-spacing: 3pt;
}

#puls4titel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#oktotv{
	width: 15em;
	height: 25em;
	background-position: 45% center;
}

#oktotvtitel{
	transform: rotate(270deg);
	width: 17em;
	margin-left: -12em;
	margin-top: 5em;
}

#oktotvtitel1{
	font-size: 18pt;
	letter-spacing: 3pt;
}

#oktotvtitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#queerwatch{
	width: 15em;
	height: 25em;
	background-position: 45% center;
}

#queerwatchtitel{
	transform: rotate(270deg);
	width: 17em;
	margin-left: -12em;
	margin-top: 5em;
}

#queerwatchtitel1{
	font-size: 18pt;
	letter-spacing: 3pt;
}

#queerwatchtitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#projectpreviewabsaufen{
	width: 8.12em;
	height: 16.6em;
	background-size: 500%;
}

#absaufen{
	width: 15em;
	height: 25em;
	background-position: 45% center;
}

#absaufentitel{
	transform: rotate(270deg);
	width: 17em;
	margin-left: -12em;
	margin-top: 5em;
}

#absaufentitel1{
	font-size: 18pt;
	letter-spacing: 3pt;
}

#absaufentitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#projectpreviewrundesleben{
	width: 8.12em;
	height: 16.6em;
	background-size: 500%;
}

#rundesleben{
	width: 15em;
	height: 25em;
	background-position: 45% center;
}

#rundeslebentitel{
	transform: rotate(270deg);
	width: 17em;
	margin-left: -12em;
	margin-top: 5em;
}

#rundeslebentitel1{
	font-size: 18pt;
	letter-spacing: 3pt;
}

#rundeslebentitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#projectpreviewduentscheidest{
	width: 8.12em;
	height: 16.6em;
	background-size: 500%;
}

#duentscheidest{
	width: 15em;
	height: 25em;
	background-position: 45% center;
}

#duentscheidesttitel{
	transform: rotate(270deg);
	width: 17em;
	margin-left: -12em;
	margin-top: 5em;
}

#duentscheidesttitel1{
	font-size: 18pt;
	letter-spacing: 3pt;
	width: 12em;
}

#duentscheidesttitel2{
	font-size: 8pt;
	letter-spacing: 3pt;
}

#viewproject{
	font-size: 8pt;
	width: 10em;
	margin-left: -5em;
	letter-spacing: 3pt;
}

#projectarrow{
	display: none;
}

#dotborder{
	display: none;
}

#absaufenheader{
	width: 12em;
}

.absaufenheader{
	width: 12em;
}

#absaufenlogo{
	position: fixed;
}

#absaufenlogo{
	margin-left: -3.5em;
	width: 7em;
}

.absaufenlogo{
	width: 7em;
}


#bookstartabsaufen{
	width: 20em;
}

.bookstartabsaufen{
	width: 20em;
}

#verschluckt{
	width: 18em;
	margin-left: -9em;
	top: 20%;
}

.verschluckt{
	width: 18em;
}

#versunken{
	width: 18em;
	margin-top: 3em;
	margin-left: -9em;
	top: 40%;
}

.versunken{
	width: 18em;
}

#hawaiianmysticlogo{
	position: fixed;
	margin-left: -3.5em;
	width: 7em;
}

.hawaiianmysticlogo{
	width: 7em;
}

#oktotvlogo{
	position: fixed;
}

#queerwatchlogo{
	position: fixed;
}

#puls4logo{
	position: fixed;
}

#rundeslebenlogo{
	position: fixed;
	width: 5em;
	margin-left: -2.5em;
}

.rundeslebenlogo{
	width: 5em;
}

#rundeslebenheader{
	width: 15em;
}

.rundeslebenheader{
	width: 15em;
}

#rundeslebenpicture1{
	background-image: url(data/hanging_stone_rundesleben.jpg);
	background-position: left top;
	padding: 0 0 0;
}

#duentscheidestlogo{
	position: fixed;
	width: 8em;
	margin-left: -4em;
}

.duentscheidestlogo{
	width: 8em;
}

#duentscheidestheader{
	width: 15em;
}

.duentscheidestheader{
	width: 15em;
}

#fish{
	width: 30em;
	margin-left: -13em;
}

.fish{
	width: 30em;
}

#headlinetext{
	font-size: 12pt;
	width: 15em;
	margin-left: -7.5em;
	line-height: 15pt;
}

#text{
	font-size: 11pt;
	width: 15em;
	margin-left: -8em;
	line-height: 12pt;
	top: 40%;
}

#icons2{
	width: 18em;
}

.facebookicon2{
	width: 3em;
}

.instagramicon2{
	width: 3em;
}

.mailicon2{
	width: 3em;
}

.telicon2{
	width: 3em;
}

#lastinfotext{
	margin-top: 3.5em;
}

#closebutton{
	position: fixed;
}

#section1bg{
	position: fixed;
}

#textabout1{
	position: fixed;
}

#portrait{
	position: fixed;
}

#icons{
	position: fixed;
}

#facebookicon{
	position: fixed;
}

#instagramicon{
	position: fixed;
}

#mailicon{
	position: fixed;
}

#telicon{
	position: fixed;
}

#hello{
	position: fixed;
}

#lastinfotext{
	font-size: 10pt;
	line-height: 15pt;
	margin-top: -2em;
}

#icons2{
	height: auto;
	width: 3em;
	flex-direction: column;
	padding-bottom: 2.5em;
}

#facebookicon2{
	padding-right: 0em;
	padding-bottom: 0;
}

.facebookicon2{
	width: 3em;
}

#linkedinicon2{
	padding-left: 0em;
	padding-right: 0em;
	padding-bottom: 0;
}

.linkedinicon2{
	width: 3em;
}

#instagramicon2{
	padding-left: 0em;
	padding-right: 0em;
	padding-bottom: 0;
}

.instagramicon2{
	width: 3em;
}

#mailicon2{
	padding-left: 0em;
	padding-right: 0em;
	padding-bottom: 0;
}

.mailicon2{
	width: 3em;
}

#telicon2{
	padding-left: 0em;
}

.telicon2{
	width: 3em;
}

/*no animations mobile*/

.animated {
	/*CSS transitions*/
	-o-transition-property: none !important;
	-moz-transition-property: none !important;
	-ms-transition-property: none !important;
	-webkit-transition-property: none !important;
	transition-property: none !important;
	/*CSS transforms*/
	-o-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-webkit-transform: none !important;
	transform: none !important;
	/*CSS animations*/
	-webkit-animation: none !important;
	-moz-animation: none !important;
	-o-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
}

}

/*animations*/

.animatedabout {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.animated2{
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated3{
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated4{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-delay: 1.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated5{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated6{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-delay: 2.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated7{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-delay: 2.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated8{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated9{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated10{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated11{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated11_1{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 1.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated12{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 3.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated13{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 4.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated14{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 4.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated15{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes flo-animation{
	0% {
		filter: invert(0%);
	}
	33% {
		filter: invert(100%);
	}
	66% {
		filter: invert(100%);
	}
	100% {
		filter: invert(0%);
	}
}

.floriananimation{
	animation: flo-animation 6s infinite;
	animation-delay: 2s;
	-webkit-animation-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

.mediadesigneranimation{
	animation: flo-animation 6s infinite;
	animation-delay: 2s;
	-webkit-animation-timing-function: cubic-bezier(0.735, 0.005, 0.240, 0.990);
}

@keyframes fadeInLogoHead {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLogoHead {
	animation: fadeInLogoHead;
	-webkit-animation: fadeInLogoHead;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-name: fadeInLogoHead;
	animation-name: fadeInLogoHead;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}