@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400&subset=latin-ext');
.text_overflow{
	overflow-y: auto;
	height: 90%;
}
.text_overflow h3{
	font-weight: 300;
	margin: 50px 0 25px;
}
.text_overflow a{
	text-decoration: underline;
}
.underline{
	text-decoration: underline;
}
*{
	position: relative;
	margin: 0px;
	padding: 0px;
	font-family: 'Work Sans', sans-serif;
	font-weight: 100;
	color: #1d1d1d;
}

body{
	/*overflow-y: hidden;*/
	width: 100vw;
	height: 100vh;
	position: relative;
	background-color: #181818;
/*	background-image: url("../media/img/icons/c_logo.svg");
	background-size: 1%;
	background-repeat: repeat;*/
	overflow: hidden;
}
h1, h2, h3, h4, h5, h6{
	/*font-family: 'Miriam Libre', sans-serif;*/
	/*font-weight: 300;*/
}
h1{
	font-size: 5em;
	margin-bottom: 5%;
}
strong{
	font-weight: 300;
}
p{
	color: #d2c1a5;
	font-size: 1.2em;
}
a{
	text-decoration: none;
	color: #d2c1a5;
}
ul{
	padding: 0 0 0 41px;
	position: relative;
	font-size: 1.7em;
	line-height: 1.5em;
	overflow-y: auto;
	list-style-image: url('../media/img/icons/list_item.svg');
	list-style-position: inherit;
}
li:not(:last-child) {
    margin-bottom: 20px;
}
li>ul{
	font-size: .8em;
}
li>ul>li{
	margin-left: 50px;
	list-style: initial;
}
form *{
	/*font-weight: 200;*/
	font-size: 1.2em;
}
fieldset{
	/*display: block;*/
	/*float: right;*/
	margin: 10px 0px;
	border: none;
}
input, textarea{
	width: 100%;
	padding: 5px;
	background-color: transparent;
	border: solid 1px #d2c1a5;
}
::placeholder{
	color: #d2c1a5
}
input[type="submit"]{
	/*padding: 5px 50.5%;*/
}
input[type="submit"]:hover{
	color: #181818;
	background-color: #d2c1a5;
	cursor: pointer;
}
footer{
	background-color: #181818;
	position: relative;
	width: 100%;
	height: 5%;
}
footer>*{
	text-align: center;
	width: 30%;
	position:absolute; 
	font-size: 1.8em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*ID selectors*/
#nav{
	/*position: absolute;*/
	top: 0px;
	left: 5%;
	height: 9%;
	width: 90%;
}

#nav div{
	font-size: 1.8em;
	/*top: 50%;*/
	height: 100%;
	text-align: center;
	display: block;
	float: left;
	position: relative;
	width: 20%;
}
#nav div *{
	top: 50%;
	transform: translateY(-50%);
}
#nav div a{
	display: inherit;
}
#nav div a img{
	/*display: initial;*/
}
#nav a:hover{
	padding-bottom: 5px;
}
/*#nav a{
	top: 50%;
	transform:translateY(-50%);
	float: left;
	text-decoration: none;
	position: relative;
}
.nav_margin{
		margin-left: 33%;
}*/

#logo{
	display: inline-block;
	z-index: 10;
	/*position: absolute;*/
	/*transform:translateX(-50%);*/
	height: 90%;
	/*top: 5%;*/
	cursor: pointer;
}
#portrait{
	top: 0px;
	left: 100%;
	transform: translateX(-100%);
}
#about{
	height: auto;
}
#kontakt, #impressum, #agb{
	width: 50%;
	left: 25%;
	float: initial;
}
#kontakt ul{
	height: auto;
}

.media{
	height: 80%;
	top: 10%;
	float: left;
	position: relative;
	width: 40%;
	overflow: hidden; 
}
.media *{
	top: -30em;
	left: -55em;
}
.kompetenzen_bild{
	left: -70em;
}
.information{
	float: left;
	width: 40%;
	height: 80%;
	left: 5%;
	top: 10%;
	/*overflow-y: scroll;*/
	/*background-color: orange;*/
}
.information *{
	color: #d2c1a5;
}
.information ul, #agb p{
	height: 80%;
	/*top: 100%;*/
	/*transform: translateY(-100%);*/
	margin-bottom: 5%;
}
#agb p{
	overflow-y: auto;
}
#mobile{
	display: none;
}
.contact_info{
	position: relative;
	/*font-weight: lighter;*/
	color: #d2c1a5;
	font-size: 1.3vw;
}


/*Class selectors*/

.content{
	position: relative;
	left: 2.5%;
	/*top: 9%;*/
	width: 95%;
	height: 86%;
}
.slideshow{
	position: relative;
	width: 100%;
	height: 100%;
}
.slideshow_objects{
	float: left;
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.slideshow_h2{
	background-color: rgba(20,20,20,.8);
	padding: 1% 0;
	width: 100.1%;
	text-align: center;
	/*text-shadow: #000 2px 2px 5px;*/
	display: inline-block;
	color: #d2c1a5;
	/*z-index: 1;*/
	/*left: 50%;*/
	top: 100.1%;
	font-size: 4em;
	/*font-weight: 300;*/
	 /*transform-origin: 20% 40%;*/
	transform: translateY(-100%);
}
.slideshow_objects img{
	/*filter: blur(2px);*/
	/*z-index: 0;*/
    top: 0px;
    left: 0px;
	position: absolute;
	/*transform: scale(1.1);*/
	width: 100%;
	/*height: 100%;*/
	/*transform: translateX(-20%);*/
}
.slideshow_objects img:hover{
	filter:none;
}
.cycle_button{
	position: absolute;
	width: 10%;
	height: 80%;
	top: 10%;
	/*float: left;*/
	/*background-color: orange;*/
	cursor: url("../media/img/icons/cursor_left.png"), pointer;
}
.right{
	left: 90%;
}
/*Animations*/
.animate{
	-webkit-transition: all 150ms cubic-bezier(0.550, 0.085, 0.680, 0.530);
		-moz-transition: all 150ms cubic-bezier(0.550, 0.085, 0.680, 0.530);
			-o-transition: all 150ms cubic-bezier(0.550, 0.085, 0.680, 0.530);
				transition: all 150ms cubic-bezier(0.550, 0.085, 0.680, 0.530); /* easeInQuad */

	-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
		-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
			-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
				transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530); /* easeInQuad */
}
@keyframes unBlur {
    from {
		-webkit-filter: blur(3px);
		filter: blur(3px);
    }
    to {
		-webkit-filter: blur(0px);
		filter: blur(0px);
    }
}

@media only screen and (max-aspect-ratio: 15/9) {

	#logo{
		margin-left: 10px;
		width: 100%;
	}
	.slideshow_objects img{
	/*z-index: 0;*/
    top: 0px;
    left: 0px;
	position: absolute;
	transform: scale(1.1);
	width: auto;
	/*height: 100%;*/
	/*height: 100%;*/
	/*transform: translateX(-20%);*/
	}
	.media *{
		/*left: -50em;*/
	}
}
@media only screen and (max-aspect-ratio: 11/16) {

	p::selection, a::selection, h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, ul::selection{
		color: #fff;
		background: #f4d9ab;
	}
	.content{
		height: 80%;
	}
	.slideshow{
		height: 100%;
	}
	.slideshow_h2{
		padding: 15% 0;
		font-size: 9em;
	}
	.slideshow_objects img{
		height: 100%;
		width: auto;
		left: -100%;
	}
	#slideshow3 img{
		transform:rotate(-90deg);
		/*left: -120%;*/
	}

/*SUB-Pages*/

	ul{
		height: 50%;
		font-size: 2.5em;
	}

	form *{
		font-size: 1.5em;
	}
	footer > *{
		width: 80%;
		/*font-size: 3em;*/
	}
	#nav{
		height: 15%;
	}
	#nav div{
		height: auto;
	}
	#nav div {
		top: 50%;
		transform: translateY(-150%);
	}	
	#nav div:nth-child(1), #nav div:nth-child(4){
		position: absolute;
	}
	#nav div:nth-child(4){
		left: 80%;
	}
	#nav div:nth-child(2), #nav div:nth-child(5){
		transform:translateY(50%);
	}
	#nav div a{
		transform: none;
	}
	#nav #div_logo{
		transform: none;
		top: 0px;
		height: 100%;
		/*position: absolute;*/
		width: 60%;
		/*left: 30%;*/
	}
	#logo{
		/*left: 5%;*/
		height: 60%;
	}

	#portrait{
		left: 5em;
		top: -8em;
		transform: none;
	}
	.content{
		/*display: none;*/
		width: 90%;
		left: 5%;
	}
	#kontakt, #impressum, #agb{
		height: 90%;
		width: 90%;
		left: 5%;
	}
	#agb p{
		height: 80%;
	}
	#success_message{
		font-size: 2em;
	}
	input, textarea{
		font-size: 2em;
	}
	.media{
		height: 20%;
		top: 0px;
		float: none;
		position: relative;
		width: 100%;
		overflow: hidden; 
	}
	.media *{
		top: -45em;
		left: -52em;
	}
	.kompetenzen_bild{
		/*left: -120%;*/
	}
	.information{
		float: none;
		width: 100%;
		height: 70%;
		left: 0px;
		top: 5%;
	}

	.information ul{
		/*height: 50%;*/
		margin-bottom: 5%;
	}

	.contact_info{
		text-align: center;
		/*display: none;*/
		font-size: 5.1vw;
	}
/*	#mobile{
		text-align: center;
		top: 10%;
		display: initial;
	}*/
}