@font-face{
	font-family: 'FormaDJRText-Medium';
	/*src: url('fonts/FormaDJRDisplay-Medium.otf') format('opentype'); */
	src: url('../fonts/FormaDJRText-Medium.otf') format('opentype'); 
	font-family: 'Forma';
	/*src: url('fonts/FormaDJRDisplay-Medium.otf') format('opentype'); */
	src: url('../fonts/FormaDJRText-Regular.otf') format('opentype'); 
	font-family: 'Minion';
	/*src: url('fonts/FormaDJRDisplay-Medium.otf') format('opentype'); */
	src: url('../fonts/MinionPro-Regular.otf') format('opentype'); 

}

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

body {
	font-family: 'Minion',sans-serif;
	font-size: 80%;
	background: white;
	margin : 0px;
	color: black;
	font-weight: lighter;
}

p{
	margin: 0;
}

br{
	height: 400%;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover, a:visited, a:link, a:active {
	text-decoration: none;
}


ul {
	padding-left: 0;
	line-height: 1.5em;
}

li {
	list-style: none;
	list-style-image: none;
	display: list-item;
	font: 
}

h1 {
	font-size: 40px;
	font-weight: 700;
}

h3 {
	font-size: 180%;
	line-height: 0.9em;
	font-weight: lighter;
}


.page {
	position: relative;
	min-height: 900px;
	z-index: 99;
}

.header-page, .footer-page {
	position: relative;
	min-height: 1100px;
	z-index: 998;
	background: #fff95d;
	font: black;
}

.header-page__wrapper{
	position:fixed;
	width: 100%;
	height: 600px;
}


.page-container {
	position: absolute;
	left: 8%;
	right:0;
	width: 92%;
	//height: 90%;
}

.page__background{
	position:fixed;
	width:100%;
}
.projects__wrapper{
	position: absolute;
	width: 100%;
	top: 75vh;
}



section{
	background-color: #f7f7f7;

}
section:nth-child(even) {
	background-color: #fff;
}

#headline {
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform-origin: left top;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	position: fixed;
	left: 0%;
	bottom: 38%;
	z-index: 997;
	color: #777777;
}

.overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	//background: #EDBBB4;
	background:black;
	opacity: 0.5;
	z-index: 100;	
	overflow: hidden;
}

.overlay-titel-image{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999;	
}

.overlay-titel{
	position: absolute;
	top: 60%;
	left: 90%;
	transform: translateY(-20%);
	-webkit-transform: translateY(-20%);
	-ms-transform: translateY(-20%);
	transform: translateX(-90%);
	-webkit-transform: translateX(-90%);
	-ms-transform: translateX(-90%);
	color: white;
	z-index: 999;
	opacity: 1002;
	font-weight: lighter;
	font-size: 90px;
	text-align: right;
}

.brand-icon{
	position:absolute;
	width: 200px;
	height: auto;
	top: 20px;
	right: 20px;
	z-index: 1005;
}

.splash-images{
	position: absolute;
	//z-index: 99;
	width: 100%;
	height: 100%;
	margin:0 auto;
	overflow: hidden;
	opacity: 1;
}

.splash-image{
	width: 100%;
	height:100%;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat:no-repeat;
	background-position: center center;

}

@keyframes fade {
	0% {
		opacity:1;
	}
	17% {
		opacity:1;
	}
	25% {
		opacity:0;
	}
	92% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

#cf4a div:nth-of-type(1) {
	-webkit-animation: fade 24s 18s infinite;
	z-index:10;
}
#cf4a div:nth-of-type(2) {
	-webkit-animation: fade 24s 12s infinite;
	z-index:10;
}
#cf4a div:nth-of-type(3) {
	-webkit-animation: fade 24s 6s infinite;
	z-index:10;
}
#cf4a div:nth-of-type(4) {
	-webkit-animation: fade 24s 0s infinite; 
	z-index:10;
}

.box-scrollable {
	height: 450px;
	width: 100%;
	overflow: auto;
	overflow-y: hidden;
}

.box-title{
	display: block;
	font-family: 'FormaDJRText-Medium',sans-serif;
	font-size: 3em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	cursor: pointer;
}

.box-element {
	float: left;
	height: 100%;
	font-size:115%;
}

.box-description {
	float: left;
	width: 350px;
	margin-right: 50px;
	text-align: left;
}

.box-continued {
	font-size: 100%;
	float: left;
	padding-top: 20px; 
	width: 300px;
	margin-right: 50px
}

.box-element img {
	height: 420px;
	width: auto;
}

.box-image-wrapper {
	margin-right: 25px;
}

.box-image-divider{
	height: 200px;
	width: auto;
}

#portrait{
	width: 10%;
	float: right; 
	margin: auto;
}

#layer1{

	top: 0px;
	left: 0px;
	z-index: 20;
}

#layer1{

	top: 0px;
	left: 0px;
	z-index: 10;
}

.box-next-project{
	font-family: 'FormaDJRText-Medium',sans-serif;
	height: 420px;
	width: 500px;
	background: #fff95d;
	text-align: center;
	cursor: pointer;
}

.box-next-project-text{
	position:relative;
	text-align: center;
	opacity: 0.7;

}

.box-next-project-text:hover{
	opacity: 1;
}

.box-hi{
	font-family: 'FormaDJRText-Light',sans-serif;
	font-size: 20px; 
	z-index: 1004;
	position: absolute;
	top: 2%;
	left: 1%;
	letter-spacing: 0.5px;
}

.box-about{
	font-family: 'FormaDJRText-Medium',sans-serif;
	padding: 2%;
	background: #fff95d;
	z-index: 1004;
	position: absolute;
	top: 55%;
	letter-spacing: 0.5px;
}

.box-contact{
	color: #fff95d;
	z-index: 1004;
	position: absolute;
	bottom: 0%;

}

.header-box {
	height: 280px;
	overflow: auto;
	margin:auto;
	width: 52%;
}

.footer-box {
	height: 420px;
	width: 100%;
	overflow: auto;
}
.footer-image {
	position: absolute;
	overflow: hidden;
	z-index: -1;
	text-align: right;
	width: 100%;
	height: 100%;
}

.footer-brand{
	position:absolute;
	right: 20px;
	bottom:20px;
	width: 200px;
	height: auto;
}


.box-franziskaseehausen {
	position: absolute;
	float: left;
	width: 35%;
	left: 10%;
	top: 30%;
	text-align: left;
	z-index: 1004;
	font-size: 180%;
	line-height: 1.1em;
}


.box-header {
	font-family: 'FormaDJRText-Light',sans-serif;
	font-size: 40px;
	color: black;
	z-index: 1004;
	position: absolute;
	top: 55%;
	letter-spacing: 0.9px;
	line-height: 1.40;
}

u{
    display: inline-block;
    text-decoration: none;
    border-bottom: 5px solid black;
}