/*--------------------------------------------------------------------------


	Typefolio

	LESS-based responsive grid system

	0. YUI Library is used for CSS reset (http://yuilibrary.com/yui/docs/cssreset/)
	1. Body
	2. Typography
	3. Pages
		3.0. Common Elements
		3.1. Navigation
		3.2. Header
		3.3. Home
		3.4. News
		3.5. Works
		3.6. Archive (Blog)
		3.7. Contact
		3.8. Footer

--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
	1. Body
--------------------------------------------------------------------------*/

body {
	color: #111;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 28px;
	-webkit-font-smoothing: antialiased;
	/* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 767px) {
	body {
		font-size: 12px;
		line-height: 23px;
	}
}






/*--------------------------------------------------------------------------
	2. Typography
--------------------------------------------------------------------------*/

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: bold; }



/* Links */
a,
a:visited {
	color: #333;
	text-decoration: none;
	outline: 0;
}

a:hover{ color: gray; }
a:focus { color: black; }
p a,
p a:visited { line-height: inherit; }



/* Visibility */
.hide { display: none !important; }



/* Selection Highlighted Text */
::selection {
	background: #22eedd;
	color: white;
	text-shadow: none;
}

::-moz-selection {
	background: #22eedd;
	color: white;
	text-shadow: none;
}



/* Formatting */
em,
i,
.italic { font-style: italic; }
b, strong { font-weight: bold; }

.underline {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid #22eedd;
}



/* Colors */
.font-color-primary { color: #4d2800; }
.background-color-primary { background: #22eedd; }

.font-color-secondary { color: #a33; }
.font-color-black { color: black; }
.font-color-white { color: white; }
.background-color-white { background: white; }






/*--------------------------------------------------------------------------
	3. Pages
--------------------------------------------------------------------------*/

	/*---------------------------------------------------
			3.0 Common Elements
	---------------------------------------------------*/

	/* Responsive images */
	img { max-width: 100%; }



	/* Used to remove whitespace below an image */
	.remove-line-height { line-height: 0; }



	/* Vertical spacing */
	.padding-vertical {
		padding-top: 50px;
		padding-bottom: 50px;
	}



	/* Used frequently to apply a light border on top */
	.border-top {
		border-top: 1px solid black;
		padding-top: 15px;
	}



	/* Featured image */
	.post img.featured { margin-bottom: 50px; }



	/* Buttons */
	button,
	.button,
	a.button {
		color: white;
		background: #22eedd;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		padding: 20px 25px 18px 25px;
		border-bottom: 2px solid #11ddcc;
		cursor: pointer;
		display: inline-block;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		-o-border-radius: 4px;
		border-radius: 4px;
	}

		button.small,
		.button.small,
		a.button.small {
			font-size: 14px;
			line-height: 24px;
			padding: 16px 24px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-ms-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
		}

		button.full,
		.button.full,
		a.button.full {
			display: block;
			width: 100%;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-ms-border-radius: 5px;
			-o-border-radius: 5px;
			border-radius: 5px;
			padding: 30px 40px 26px 40px;
			border-bottom: 4px solid #11ddcc;
		}

			button:hover,
			.button:hover,
			a.button:hover { background: #12e5d3; }

			button.black,
			.button.black,
			a.button.black {
				color: white;
				background: #000;
				border-color: #111;
			}

			button.black:hover,
			.button.black:hover,
			a.button.black:hover {
				color: #22eedd;
				background: #111;
			}



	/* Forms */
	form p,
	label,
	legend {
		font-size: 15px;
		line-height: 24px;
	}

	label {
		display: block;
		color: #111;
		font-size: 13px;
		line-height: 23px;
		margin: 20px 0;
	}

	input[type=text],
	input[type=url],
	input[type=tel],
	input[type=number],
	input[type=color],
	input[type=email],
	input[type=password],
	textarea,
	select {
		width: 100%;
		padding: 20px 25px;
		color: #111;
		margin: 0 0 15px 0;
		border: 1px solid #ddd;
		outline: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

		input[type=text]:focus,
		input[type=url]:focus,
		input[type=tel]:focus,
		input[type=number]:focus,
		input[type=color]:focus,
		input[type=email]:focus,
		input[type=password]:focus,
		textarea:focus,
		select:focus {
			color: #22eedd;
			border: 1px solid #22eedd;
		}



	/* Placeholder */
	::-webkit-input-placeholder { color: #ddd; }
	::-moz-placeholder { color: #ddd; }
	:-ms-input-placeholder { color: #ddd; }
	input:-moz-placeholder { color: #ddd; }



	/* Input - submit */
	input[type=submit] {
		border: none;
	}



	/* Required */
	span.required { color: #22eedd; }



	/* Page elements */
	.page p.title-desc {
		color: #ddd;
		font-weight: bold;
		margin-top: 0;
	}

	.page p.page-desc {
		color: #222;
		font-family: 'Roboto Slab', Georgia, serif;
		font-size: 34px;
		line-height: 60px;
		font-weight: 300;
		margin-top: 30px;
		margin-bottom: 50px;
	}

		@media screen and (max-width: 767px) {
			.page p.page-desc {
				font-size: 24px;
				line-height: 42px;
			}
		}

		@media screen and (max-width: 479px) {
			.page p.page-desc {
				font-size: 20px;
				line-height: 36px;
			}
		}

	.page p { margin-top: 30px; }



	/* Sidebar (sticky) */
	.sidebar { padding-bottom: 20px; }

		.sidebar.sticked {
			background: white;
			display: none;
			padding: 30px 20px 20px 20px;
		}

			.sidebar.sticked h3.border-top { border-top: 0; }



	/* Page Navigation */
	.nav-pages {
		font-size: 11px;
		margin-top: 30px;
	}

		.nav-pages a.link-prev,
		.nav-pages a.link-next {
			color: #555;
			text-transform: uppercase;
			letter-spacing: 2px;
			text-align: center;
			padding: 25px 0;
			display: block;
			width: 50%;
			float: left;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

			.nav-pages a.link-prev span,
			.nav-pages a.link-next span {
				display: inline-block;
				padding-bottom: 4px;
				border-bottom: 1px solid #555555;
			}

			.nav-pages a.link-prev div { padding-right: 33.33333333%; }

			@media screen and (min-width: 1300px) {
				.nav-pages a.link-prev div { padding-right: 50%; }
			}

			@media screen and (max-width: 959px) {
				.nav-pages a.link-prev div { padding-right: 0%; }
			}

			.nav-pages a.link-next div { padding-left: 33.33333333%; }

			@media screen and (min-width: 1300px) {
				.nav-pages a.link-next div { padding-left: 50%; }
			}

			@media screen and (max-width: 959px) {
				.nav-pages a.link-next div { padding-left: 0%; }
			}

			.nav-pages a:hover { color: #22eedd; }

				.nav-pages a:hover span { border-bottom-color: #22eedd; }

			.container .nav-pages a.link-prev,
			.container .nav-pages a.link-next { padding: 20px 0; }
			.container .nav-pages a.link-prev { text-align: left; }
			.container .nav-pages a.link-next { text-align: right; }



/* Hamburger (Design und Verhalten der 3 Striche) */
#menuToggle {
	width: 66px;					/* horizontale Länge der 3 Striche*/
	height: 45px;
	position: absolute;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .4s ease-in-out;
	-moz-transition: .4s ease-in-out;
	-o-transition: .4s ease-in-out;
	transition: 0.4s ease-in-out;
	cursor: pointer;
	z-index: 1000;
	display: block;
	top: 40px;  					/* X-Position des gesamten Hamburgers, urspünglich 66px*/
	right: 20px;
	transition: all 0.2s;
}

#menuToggle span {
  display: block;
  position: absolute;
  height: 4px;       			/* Dicke der 3 Striche*/
  border-radius: 0px;
  width: 100%;
  background: #000;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 1.2s ease-in-out;   /* Geschwindigkeit der Hamburgerbewegung (3 Stricke zu einem X) */
  -moz-transition: 1.2s ease-in-out;
  -o-transition: 1.2s ease-in-out;
  transition: 1.2s ease-in-out;
}

#menuToggle span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}

#menuToggle span:nth-child(2) {
  top: 18px;												/* Abstand zwischen oberem und mittlerem Strich*/
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}

#menuToggle span:nth-child(3) {
  top: 36px;											/* Abstand zwischen oberem und unterstem Strich*/
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}

#menuToggle.active span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 16px;							/* Länge des obersten X-Striches bei geöffneter Menuleiste*/
  left: 0px;
}

#menuToggle.active span:nth-child(2) {
  width: 0%;						/* der mittlere Strich wird ausgeblendet*/
  opacity: 0;
}

#menuToggle.active span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 16px;								/* Länge des unteren X-Striches*/
  left: 0px;
}

/* Navigation unter dem Hamburger */

#navi {
	height: 0px;
	opacity: 0;
	position: absolute; 	/* Dadurch fliessen die Menüpunkt NICHT nach unten weg */
	overflow: hidden;
	display: block;
	color: white;
	width: 400px;   		/* Breite der Navileiste */
	top: 140px;
	right: 20px;   			 	/* X-Achsenposition der Navigations-Elementenleiste*/
	text-align: right;
	-webkit-transition: 0.7s linear;  /*Hat nur eine Auswirkung wenn ""#navi display: block" aktiviert ist */
	-moz-transition: 0.7s linear;
	-o-transition: 0.7s linear;
	transition: 0.7s linear;
}

#navi.open {
	opacity: 1;													/* Navigations-Elementenleiste geöffnet*/
	background: rgb(255, 255, 255);   /* weißer Hintergrund unter Navi-Elementen */
	z-index: +1;
	padding-bottom: 20px;
	/*padding-top: 0px;*/
	height: 520px;
	-webkit-transition: 0.7s linear;  /*Hat nur eine Auswirkung wenn ""#navi display: block" aktiviert ist */
	-moz-transition: 0.7s linear;
	-o-transition: 0.7s linear;
	transition: 0.7s linear;
	/*background-color: LightGray;*/
	font-size: 1.1em;
}

#navi a {
	display: block;
}


/* Überschriften der jeweiligen Seiten */
	#TextLogo {
		text-align: left;
		text-transform: uppercase;
		color: black;
		padding-top: 40px;
		padding-left: 20px;
		font-size: 75px;
		font-family: "Bahnschrift", Times, serif;
	}

	#TextLogo .unten {
		padding-top: 0px;
		padding-bottom: 10px;
		line-height: 92%;
		margin-top: 0;
	  margin-bottom: 0;
	}

	#TextLogo .indexUnten {
		padding-top: 0px;
		padding-bottom: 10px;
		line-height: 92%;
		margin-top: 0;
	  margin-bottom: 0;
		/*background-color: pink;*/
	}

	#Titel_1Zeile {
		text-align: left;
		text-transform: uppercase;
		color: black;
		padding-top: 60px;
		padding-left: 20px;
		padding-bottom: 52px;
		font-size: 75px;
		font-family: "Bahnschrift", Times, serif;
	}

	#Info_seitlich {
		border-top: 2px solid black;
		border-bottom: 2px solid black;
		text-align: left;
		color: black;
		font-size: 24px;
		padding-top: 15px;
		padding-bottom: 15px;
		line-height: 72%;
		font-family: "Arial", Times, serif;
	}

	#Text_seitlich {
		text-align: left;
		color: black;
		font-size: 17px;
		padding-top: 15px;
		padding-bottom: 15px;
		line-height: 100%;
		font-family: "Arial", Times, serif;
	}

	#videoTitel {
		font-size: 40px;
	  text-transform: uppercase;
	}

	#videoTitel .unten{
		text-transform: none;
		margin-top: 4px;
		font-size: 24px;
		line-height: 80%;
		margin-bottom:10px;
	}

	#bio {
		border-top: 2px solid black;
		border-bottom: 2px solid black;
		text-align: left;
		color: black;
		font-size: 16px;
		padding-top: 15px;
		padding-bottom: 15px;
		line-height: 110%;
	  text-align: justify;
	}

	#contact {
		text-align: center;
		padding-top: 100px;
		width: 90%;
	}

	#news {
		padding-top: 16px;
		padding-left: 30px;
		padding-right: 30px;
		padding-bottom: 6px;
	  font-size: 16px;
		text-align: justify;
	}

	#news .h2 {
		font-size: 28px;
		font-family: Bahnschrift;
	}

	#Einzelvideos {
		font-family: "Bahnschrift", Times, serif;
		text-align: left;
		text-transform: uppercase;
		color: black;
		margin-top: 50px;
		margin-bottom: 25px;
		font-size: 4.5vw; /*this makes the text responsive */
	}

/*Text der jeweiligen Einzelvideos*/
	.responsive {
		font-family: "Bahnschrift", Times, serif;
		font-size: 1.4vw; /*this makes the text responsive */
	  float: left;
	  width: 100%;
		margin-bottom: 20px;
		text-align: justify;
		margin-top: 5px;
		/*background-color: pink;*/
	}

		.videodesc {
			font-family: "Bahnschrift", Times, serif;
			text-align: center;
			color: black;
			margin-top: 5px;
			margin-bottom: 10px;
			font-size: 1.75vw; /*this makes the text responsive */
		}

		.videodesc2 {
			font-family: "Bahnschrift", Times, serif;
			text-align: right;
			color: black;
			margin-top: 5px;
			margin-bottom: 10px;
			font-size: 1.75vw; /*this makes the text responsive */
		}

/* Einmal verkleinerter Bildschirm */
@media screen and (max-width: 1300px) {
	#menuToggle {
	width: 56px;
	height: 39px;
	top: 40px;
	}
	#menuToggle span:nth-child(2) {
    top: 14px;
	}
	#menuToggle span:nth-child(3) {
	 top: 28px;
	}
	#menuToggle.active span:nth-child(1) {
	 top: 14px;
	}
	#menuToggle.active span:nth-child(3) {
	  top: 14px;
	}
	#navi.open {
	top: 134px;					/*Höhe der Navigation */
	padding-left: 20px;
	padding-bottom: 20px;
	height: 510px;
	}

 #TextLogo {
	 font-size: 66px;
 }

 #Titel_1Zeile {
 	font-size: 70px;
 }

 #Text_seitlich {
	 font-size: 17px;
	 line-height: 82%;
 }

 #videoTitel {
	 font-size: 35px;
	 text-transform: uppercase;
 }

 #videoTitel .unten{
	 text-transform: none;
	 margin-top: 4px;
	 font-size: 20px;
	 line-height: 80%;
	 margin-bottom:10px;
 }

 #contact {
	 padding-left: 120px;
	 width: 80%;
 }

 #news {
	 font-size: 16px;
 }

 #news .h2{
	font-size: 22px;
 }

 /*Text der jeweiligen Einzelvideos*/
	 .responsive {
		 font-size: 1.6vw; /*this makes the text responsive */
		 margin-top: 0px;
	 }

	 .videodesc {
		 margin-top: 5px;
		 margin-bottom: 5px;
		 font-size: 2.2vw; /*this makes the text responsive */
	 }

	 .videodesc2 {
		 margin-top: 5px;
		 margin-bottom: 10px;
		 font-size: 2.2vw; /*this makes the text responsive */
	 }


}/* einmal verkleinert */

#navi a {
	font-size: 2.4em;  	/* Schriftgröße der Navigationspunkte */
	line-height: 2;
	color: #000;
	margin-top: -0.5em;
 }

	/*---------------------------------------------------
			3.1 Navigation
	---------------------------------------------------*/

	@media screen and (min-width: 768px) and (max-width: 959px) {
	#menuToggle {
		width: 33px;
		height: 25px;
		top: 30px;
		right: 20px;
	}

	#menuToggle span {
	  height: 3px;
	}
	#menuToggle span:nth-child(2) {
	  top: 9px;
	}
	#menuToggle span:nth-child(3) {
	  top: 18px;
	}
	#menuToggle.active span:nth-child(1) {
	  top: 8px;
	}
	#menuToggle.active span:nth-child(3) {
	  top: 8px;
	}
	#navi.open {
	top: 125px;
	padding-left: 20px;      /*Breite der Navigation (abhöngig von font-size) */
	padding-bottom: 20px;
	margin-top: -13px;
	height: 450px;
	width: 660px;
	}
	#navi a {
	font-size: 2.1em;  		/*Schriftgröße */
	margin-top: -0.5em;
	}

	#TextLogo {
		font-size: 46px;
		line-height: 48%;
	}

	#Info_seitlich {
		font-size: 23px;
		line-height: 70%;
	}

	#Text_seitlich {
		font-size: 16px;
		padding-top: 15px;
		padding-bottom: 0px;
		line-height: 105%;
	}

	#Titel_1Zeile {
  	font-size: 50px;
		line-height: 63%;
		padding-bottom: 20px;
  }

	#videoTitel {
		font-size: 23px;
		text-transform: uppercase;
	}

	#videoTitel .unten{
		text-transform: none;
		margin-top: 4px;
		font-size: 17px;
		line-height: 80%;
		margin-bottom:10px;
	}

	#bio {
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		font-size: 15px;
		line-height: 134%;
	}

	#contact {
		padding-left: 120px;
		width: 80%;
	}

	#news {
	  font-size: 15px;
	}

	#news .h2 {
		font-size: 19px;
	}

	/*Text der jeweiligen Einzelvideos*/
		.responsive {
			font-size: 1.9vw; /*this makes the text responsive */
			margin-top: 0px;
		}

		.videodesc {
			text-align: left;
			margin-top: 5px;
			margin-bottom: 5px;
			font-size: 2.5vw; /*this makes the text responsive */
		}

		.videodesc2 {
			margin-top: 5px;
			margin-bottom: 10px;
			font-size: 2.5vw; /*this makes the text responsive */
		}

}

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

	#logo {
		margin-top: 10px;
	}

	#menuToggle {
	width: 30px;
	height: 21px;
	top: 30px;
	right: 20px;
	}

	#menuToggle span {
	  height: 2px;
	}
	#menuToggle span:nth-child(2) {
	  top: 7px;
	}
	#menuToggle span:nth-child(3) {
	  top: 14px;
	}
	#menuToggle.active span:nth-child(1) {
	  top: 7px;
	}
	#menuToggle.active span:nth-child(3) {
	  top: 7px;
	}
	#navi.open {
	top: 105px;
	padding-left: 20px;
	padding-bottom: 20px;
	margin-top: -15px;
	height: 370px;  					/* Höhe der Navigationsleiste */
	width: 500px;
	}
	#navi a {
	font-size: 2em;
	margin-top: -0.5em;
	}

	#TextLogo {
		padding-top: 30px;
		padding-bottom: 10px;
		font-size: 32px;
		line-height: 50%;
	}

	#TextLogo .unten{
		margin-top: 2px;
		line-height: 62%;
	}

		#TextLogo .indexUnten {
			margin-top: 4px;
			line-height: 70%;
		}

	#Info_seitlich {
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		font-size: 20px;
		line-height: 80%;
	}

	#Text_seitlich{
		padding-top: 10px;
		padding-bottom: 5px;
	 }

	#Titel_1Zeile {
  	font-size: 39px;
		line-height: 50%;
		padding-bottom: 20px;
		padding-top: 50px;
  }

	#videoTitel {
		font-size: 29px;
		text-transform: uppercase;
	}

	#videoTitel .unten{
		text-transform: none;
		margin-top: 4px;
		font-size: 17px;
		line-height: 80%;
		margin-bottom:10px;
	}

	#bio {
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		font-size: 14px;
		line-height: 134%;
	}

	#contact {
		padding-left: 100px;
		width: 80%;
	}

	#news {
	  font-size: 14px;
	}

	#news .h2 {
		font-size: 17px;
	}

	/*Text der jeweiligen Einzelvideos*/
		.responsive {
			font-size: 2.8vw; /*this makes the text responsive */
			margin-top: 0px;
		}

		.videodesc {
			color: black;
			margin-top: 5px;
			margin-bottom: 5px;
			font-size: 3.1vw; /*this makes the text responsive */
			text-align: left;
		}

		.videodesc2 {
			text-align: left;
			margin-top: 5px;
			margin-bottom: 10px;
			font-size: 3.1vw; /*this makes the text responsive */
		}

}

/* kleinste Bildschirmgröße */
	@media screen and (max-width: 480px) {

	#menuToggle {
	width: 25px;  			/*Horizontale Länge der 3 Striche */
	height: 39px;
	top: 21px;				/* X-Position der drei Striche = Höhe*/
	right: 20px;
	}

	#menuToggle span {
	  height: 2px;
	}
	#menuToggle span:nth-child(2) {
	  top: 6px;
	}
	#menuToggle span:nth-child(3) {
	  top: 12px;
	}
	#menuToggle.active span:nth-child(1) {
	  top: 6px;
	}
	#menuToggle.active span:nth-child(3) {
	  top: 6px;
	}
	#navi.open {
	top: 84px;
	padding-left: 20px;
	padding-bottom: 30px;
	padding-top: 10px;
	margin-top: -6px;
	height: 340px;
	}
	#navi a {
	font-size: 1.65em;
	margin-top: -0.5em;
	}

	#TextLogo {
		margin-top: 24px;
		font-size: 24px;
		line-height: 49%;
	}

	#TextLogo .unten{
		margin-top: 3px;
		line-height: 60%;
	}

	#TextLogo .indexUnten {
		margin-top: 12px;
		font-size: 24px;
	}

	#Titel_1Zeile {
		padding-top: 40px;
		font-size: 26px;
		line-height: 69%;
	}

	#Info_seitlich{
	  font-size: 16px;
	  line-height: 80%;
	}

	#videoTitel {
		font-size: 25px;
		text-transform: uppercase;
	}

	#videoTitel .unten{
		text-transform: none;
		margin-top: 4px;
		font-size: 15px;
		line-height: 80%;
		margin-bottom:10px;
	}

	#bio {
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		font-size: 13px;
		line-height: 138%;
	}

	#contact {
		padding-left: 100px;
		width: 70%;
	}

	#news {
	  font-size: 13px;
	}

	#news .h2 {
		font-size: 15px;
	}

	/*Text der jeweiligen Einzelvideos*/
		.responsive {
			font-size: 2.8vw; /*this makes the text responsive */
			margin-top: 0px;
		}

		.videodesc {
			color: black;
			margin-top: 5px;
			margin-bottom: 5px;
			font-size: 3vw; /*this makes the text responsive */
			text-align: left;
		}

		.videodesc2 {
			text-align: left;
			margin-top: 5px;
			margin-bottom: 10px;
			font-size: 3vw; /*this makes the text responsive */
		}

}

	/* Small smartphone size like Ana`s IPhone etc. */
@media screen and (max-width: 375px) {
.container{ width: 100%; margin: 0 auto; }

#TextLogo {
	font-size: 24px;
	line-height: 49%;
}

}

	/* Mobile Menu */
	#menu-mobile-wrapper { display: block;
		background-color: #e1066f;
	}

	@media screen and (max-width: 767px) {
		#menu-mobile-wrapper { display: block;
			background-color: green;
		}
	}

	#menu-mobile-wrapper #toggle-menu {
		cursor: pointer;
		color: #222;
		display: block;
		font-size: 15px;
		line-height: 25px;
		padding: 20px 0 20px 30px;
		background: url('../images/menu_open.png') no-repeat left center;
		border-bottom: 1px solid #f5f5f5;
	}

	#menu-mobile-wrapper.toggle-open #toggle-menu { background-image: url('../images/menu_closed.png'); }
	#menu-mobile-wrapper ul#menu-mobile {
		display: none;
		margin-bottom: 15px;
		overflow: hidden;
	}

		#menu-mobile-wrapper ul#menu-mobile li {
			font-size: 12px;
			line-height: 21px;
			display: block;
		}

			#menu-mobile-wrapper ul#menu-mobile li a {
				color: #444;
				display: block;
				padding: 12px 0;
				border-bottom: 1px solid #f5f5f5;
			}

			#menu-mobile-wrapper ul#menu-mobile li a:hover { color: #22eedd; }




	/*---------------------------------------------------
			3.2 Header
	---------------------------------------------------*/

	#header .logo-wrap { padding: 30px 0 30px 0; }

	#header h1 {
		font-size: 55px;
		line-height: 35px;
		font-weight: 500;
	}


	#header p.site-desc {
		color: #4d2800;
		font-size: 23px;
		line-height: 20px;
		font-weight: 500;
 	}




	/*---------------------------------------------------
			3.3 Home
	---------------------------------------------------*/

	/* Recent Posts */
	.box-recent h3 {
		font-size: 16px;
		line-height: 26px;
		padding: 30px 0 20px 0;
	}

		.box-recent h3 a { color: #ddd; }

	.box-recent a.permalink {
		display: block;
		border-top: 1px solid #eee;
	}

		.box-recent a.permalink h4 {
			color: #444;
			font-size: 22px;
			line-height: 36px;
			font-weight: normal;
			margin-bottom: 5px;
		}

			.box-recent a.permalink:hover h4 {
				color: #22eedd;
			}

		.box-recent a.permalink p.meta { color: #22eedd; }

			.box-recent a.permalink p.meta span { color: #ccc; }

	.box-recent a.permalink:hover {
		color: #22eedd;
		border-top: 1px solid #22eedd;
	}

		.box-recent a.permalink:hover p.meta span { color: #22eedd; }

	.box-recent .item { padding: 20px 0; }

	@media screen and (max-width: 767px) {
		.box-recent a.permalink h4 {
			font-size: 16px;
			line-height: 26px;
		}
	}


	/* About box */
	.box-about {
		margin-top: 20px;
	}

		.box-about h3 { margin-bottom: 50px; }

		.box-about p.tagline {
			font-family: 'Roboto Slab', Georgia, serif;
			font-size: 24px;
			line-height: 44px;
			font-weight: 300;
			margin-top: 30px;
			margin-bottom: 30px;
		}

	@media screen and (max-width: 767px) {
		.box-about p.tagline {
			font-size: 20px;
			line-height: 36px;
		}
	}

	/*---------------------------------------------------
			3.4 About
	---------------------------------------------------*/

	#about h2 { padding-top: 30px; }

	#about .services h3 {
		font-size: 32px;
		line-height: 42px;
	}

	#about .services .item { padding: 30px 0; }

	#about .services h4 {
		font-size: 16px;
		line-height: 26px;
		display: inline-block;
		padding-bottom: 5px;
		border-bottom: 1px solid #111;
	}

	#about .services p {
		font-size: 15px;
		line-height: 28px;
		margin-top: 20px;
	}

	@media screen and (max-width: 767px) {
		#about .services h4 {
			margin-top: 40px;
		}

		#about .services p {
			font-size: 12px;
			line-height: 24px;
		}
	}



	/*---------------------------------------------------
			3.4 News
	---------------------------------------------------*/


	#news .services .item { padding: 30px 0; }

	#news .services h4 {
		font-size: 16px;
		line-height: 26px;
		display: inline-block;
		padding-bottom: 5px;
		border-bottom: 1px solid #111;
	}

	#news .services p {
		font-size: 15px;
		line-height: 28px;
		margin-top: 20px;
	}

	@media screen and (max-width: 767px) {
		#news .services h4 {
			margin-top: 40px;
		}

		#news .services p {
			font-size: 12px;
			line-height: 24px;
		}
	}




	/*---------------------------------------------------
			3.5 Works
	---------------------------------------------------*/

	#works .item { margin-bottom: 40px; }

		#works .item h3 {
			color: #555;
			font-size: 12px;
			line-height: 22px;
			font-weight: bold;
		}

		#works a.permalink:hover h3 { color: #111; }

	#works .item span.category {
		color: #ccc;
		display: block;
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 10px;
	}

		#works a.permalink:hover span.category { color: #22eedd; }

	#works .item p.excerpt {
		font-size: 140px;
		line-height: 18px;
		margin-top: 10px;
	}

	/* Stackgrid */
	#works.stackgrid .item {
		width: 25%;
		float: left;
		margin-bottom: 0;
		position: relative;
	}

		#works.stackgrid .item img {
			width: 100%;
		}

	@media screen and (min-width: 1600px) {
		#works.stackgrid .item { width: 20%; }
	}

	@media screen and (min-width: 960px) and (max-width: 1599px) {
		#works.stackgrid .item { width: 25%; }
	}

	@media screen and (min-width: 768px) and (max-width: 959px) {
		#works.stackgrid .item { width: 33.333333%; }
	}

	@media screen and (min-width: 480px) and (max-width: 767px) {
		#works.stackgrid .item { width: 50%; }
	}

	@media screen and (max-width: 479px) {
		#works.stackgrid .item { width: 100%; }
	}

	#works.stackgrid .item .box-desc {
		padding: 15px 30px;
		text-align: center;
	}

	#works.stackgrid.images-only {
		/* Navigation */
		margin-top: 0;
	}

		#works.stackgrid.images-only .item .box-desc {
			display: none;
			text-align: left;
			padding: 25px 30px;
			background: url('../images/alpha/bg_alpha60.png');
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

			#works.stackgrid.images-only .item .box-desc h3 { color: white; }

		#works.stackgrid.images-only .nav-pages { margin-top: 0; }

			#works.stackgrid.images-only .nav-pages a.link-prev,
			#works.stackgrid.images-only .nav-pages a.link-next { border-top: none; }

		#works.stackgrid.images-only a.link-prev,
		#works.stackgrid.images-only a.link-next { border-top: none; }

			#works.stackgrid .item .box-desc span.category {
				margin-bottom: 2px;
			}



	/* Single */
	#works.single {
		background-color: white;

	}

		#works.single img {
			margin-bottom: 60px;
		}

		#works.single .box-info {  	/* Attribute für Text neben den jeweiligen Prijektbildern */
			margin-bottom: 20px;
			font-size: 14px;
			line-height: 24px;
		}

			#works.single .box-info p.project-desc {
				color: 	#c0c0c0;
				font-weight: bold;
				margin-top: 0;
			}

			#works.single .box-info h3 {
				font-size: 18px;
				line-height: 0px;
				text-transform: uppercase;
				letter-spacing: 4px;
				line-height: 80%;  		/* Kontrolliert den Zeilenabstand */
				padding-bottom: 10px;
			}

			#works.single .box-info h4 {
				font-size: 20px;
				line-height: 0px;
				text-transform: uppercase;
				letter-spacing: 4px;
				line-height: 80%;  		/* Kontrolliert den Zeilenabstand */
				padding-bottom: 10px;
			}

			/*	#works.single .box-info h4.border-top {
					padding-top: 0px; /*Ursprünglich 20px, Abstand nach oben
				} */

			#works.single .box-info p {
				margin-top: 0px;   /* Abstand zwischen Überschrift und Text, ursprünglich 15px */
			}

/* Einstellungen für kleinsten und zweitkleinste Bildschirmgröße */
			@media screen and (max-width: 767px) {
				#works.single .box-info p {
					font-size: 12px;
					line-height: 24px;
					/*background-color: pink;*/
				}
			}

	/* CV */
	#cv.single {

	}

		#cv.single .box-info {
			margin-bottom: 40px;
			font-size: 15px;
			line-height: 23px;
		}

			#cv.single .box-info p.project-desc {
				color: #ddd;
				font-weight: bold;
				margin-top: 0;
			}

			#cv.single .box-info h4 {
				font-size: 16px;
				line-height: 4px;
				text-transform: uppercase;
				letter-spacing: 5px;
			}

				#cv.single .box-info h4.border-top {
					padding-top: 20px;
				}

			#cv.single .box-info p {
				margin-top: 10px;
				margin-bottom: 35px;
			}

			@media screen and (max-width: 767px) {
				#cv.single .box-info p {
					font-size: 12px;
					line-height: 24px;
				}
			}


	/*---------------------------------------------------
			3.6 Archive (Blog)
	---------------------------------------------------*/

	#archive .entry { margin-bottom: 80px; }
	#archive .entry .box-content { padding-top: 30px; }



	/* Meta */
	#archive .box-meta {
		padding-top: 30px;
	}

		#archive .box-meta span.category,
		#archive .box-meta span.date {
			color: #ccc;
			font-size: 12px;
			line-height: 22px;
		}

		#archive .box-meta span.category {
			color: #333;
			font-weight: bold;
		}



	/* Tags */
	#archive .entry .box-tags {
		margin-top: 30px;
	}

	#archive .entry h4 {
		font-family: 'Roboto Slab', Georgia, serif;
		font-size: 26px;
		line-height: 40px;
		font-weight: 300;
		margin-bottom: 28px;
	}

	#archive .entry p {
		color: #111;
		margin-top: 40px;
		font-size: 16px;
		line-height: 32px;
	}

		#archive .entry a:hover h4 {
			color: #22eedd;
		}

		#archive .entry a:hover p {
			color: #111;
		}

	#archive .entry .box-tags h5 {
	}

	#archive .entry p.tags {
		font-size: 12px;
		line-height: 22px;
		margin-top: 0;
	}

		#archive .entry p.tags a {
			color: #111;
			display: inline-block;
			padding-bottom: 3px;
			border-bottom: 1px solid #111;
			margin-right: 5px;
		}

			#archive .entry p.tags a:hover {
				color: #22eedd;
				border-bottom: 1px solid #22eedd;
			}

	@media screen and (max-width: 959px) {
		#archive .entry p {
			font-size: 13px;
			line-height: 25px;
		}

		#archive .entry .box-content { border-top: none; }
	}



	/* BLockquote */
	#archive .entry blockquote {
		margin-bottom: 15px;
	}

		#archive .entry blockquote p {
			font-family: 'Roboto Slab', Georgia, serif;
			font-size: 36px;
			line-height: 60px;
			font-style: italic;
			font-weight: 300;
			margin-bottom: 10px;
		}

		#archive .entry blockquote footer {
			color: #22eedd;
			font-size: 12px;
			line-height: 22px;
			font-style: italic;
			display: inline-block;
			margin-top: 10px;
			padding-top: 4px;
			border-top: 1px solid #22eedd;
		}

	@media screen and (max-width: 959px) {
		#archive .entry blockquote p {
			font-size: 22px;
			line-height: 40px;
		}
	}



	/*---------------------------------------------------
			3.7 Contact
	---------------------------------------------------*/

	section#contact { /* Register Form */:  }

		section#contact p.title-desc { margin-bottom: 40px; }

		section#contact form { margin-bottom: 40px; }

		section#contact #contact-warning {
			color: white;
			background: #ee3a22;
			padding: 20px 25px;
			margin-bottom: 30px;
		}

		section#contact #contact-success {
			color: #22eedd;
			background: #111;
			padding: 20px 25px;
			margin-bottom: 30px;
		}

		section#contact .box-contact {
			font-size: 14px;
			line-height: 28px;
			background-size: cover;
		}

			section#contact .box-contact h3 {
				color: #22eedd;
				font-size: 14px;
				line-height: 24px;
				font-weight: normal;
				margin-bottom: 15px;
			}

			section#contact .box-contact p { margin-top: 0; }


		@media screen and (max-width: 767px) {
			section#contact .box-contact {
				font-size: 12px;
				line-height: 24px;
				margin-bottom: 30px;
			}
		}

		@media screen and (max-width: 479px) {
			section#contact .box-contact {
				font-size: 11px;
				line-height: 22px;
			}
		}



		/* Map */
		section#contact #map {
			height: 500px;
			margin-bottom: 30px;
		}



	/*---------------------------------------------------
			3.8 Footer
	---------------------------------------------------*/

	#footer {
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 2px;
			}

		#footer	a:hover {
    		color: #cc6600;
			}


		#footer p { margin-bottom: 60px; }

			#footer p a { color: #000000; }

		#footer ul#social li {
			display: inline-block;
			float: left;
		}

			#footer ul#social li a {
				display: block;
				padding: 30px 40px 30px 0;
			}

		@media screen and (max-width: 767px) {
			#footer ul#social {
				margin-top: 30px;
			}
			#footer ul#social li {
				display: block;
				float: none;
			}

				#footer ul#social li a {
					display: block;
					padding: 20px 0;
					border-top: 1px solid #eee;
				}
		}



	/* Responsive video(s)
	*********************************/
	.my_videos {
    	position: relative;
    	width: 100%;
    	height: 0;
	    margin: 0px 0px 60px 0px;
      padding-bottom: 56.25%;
	}
	.video {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
	}


	/*
	Slideshow
	*/
		* {box-sizing: border-box}
		body {
		font-family: Verdana, sans-serif;
		margin: 0 auto;
	  }

		.mySlides {display: none}
		img {vertical-align: middle;}

		.slideshow-container {
		position: relative;
		margin: 20px;
		padding-bottom: 40px;
		}
		/* Next & previous buttons */
		.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		padding: 16px;
		margin-top: -22px;
		color: white;
		font-weight: bold;
		font-size: 18px;
		transition: 0.6s ease;
		border-radius: 0 3px 3px 0;
		user-select: none;
		}
		/* Position the "next button" to the right */
		.next {
		right: 0;
		border-radius: 3px 0 0 3px;
		}
		/* On hover, add a black background color with a little bit see-through */
		.prev:hover, .next:hover {
		background-color: rgba(0,0,0,0.8);
		}
		/* Caption text */
		.text {
		font-family: Bahnschrift;
		color: black;
		font-size: 17px;
		padding: 1px 12px;
		position: absolute;
		bottom: 8px;
		width: 100%;
		text-align: center;
		}

		/* Fading animation */
		.fade {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 1.5s;
		animation-name: fade;
		animation-duration: 1.5s;
		}
		@-webkit-keyframes fade {
		from {opacity: .4}
		to {opacity: 1}
		}
		@keyframes fade {
		from {opacity: .4}
		to {opacity: 1}
		}
		/* On smaller screens, decrease text size */
		@media only screen and (max-width: 300px) {
		.prev, .next,.text {font-size: 11px}
		}


.flex-container {
  display: flex;
  background-color: white;
	/*text-align: justify;*/
	font-family: "Arial", Times, serif;
	/*background-color: green;*/
	margin: 10px;
	line-height: 115%;
	flex-wrap: wrap;
}

.flex-container > div {
	font-size: 17px;
	padding: 10px
}


#fileUnder {
	text-align: left;
	color: black;
	padding-top: 0px;
	padding-left: 20px;
	font-size: 27px;
	font-family: "Arial", Times, serif;
}