/* CSS Document */

body
{
	font-family: 'Open Sans', sans-serif
}

::selection
{
	background-color: #0CF;
	color: #FFF
}

::-moz-selection
{
	background-color: #0CF;
	color: #FFF
}

.navbar 
{
  	background-color: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid #000;
	z-index: 80
}

.navbar-brand 
{
  	max-width: 220px;
	padding-top: 20px;
	color: #222;
	transition: color 0.5s;
	-webkit-transition: color 0.5s;
	font-family: 'Gochi Hand', cursive;
	font-size: 2.5em
}

.navbar-brand:hover,
.navbar-brand:focus 
{
  	color: #0CF
}

.navbar-nav > li > a 
{
  	color: #222;
	border-left: 1px solid rgba(255, 255, 255, 0);
	border-right: 1px solid rgba(255, 255, 255, 0);
	transition: color 0.5s, border-left 0.5s, border-right 0.5s;
	-webkit-transition: color 0.5s, border-left 0.5s, border-right 0.5s
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus 
{
  	color: #0CF;
	border-left: 1px solid #000;
	border-right: 1px solid #000
}

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus 
{
  	color: #0CF;
	background-color: transparent
}	

#index
{
	width: 100%;
	overflow: hidden
}

#canvasContainer
{
	position: relative;
	width: 110%;
	margin-left: -5%;
	overflow: hidden
}

.vierecke
{
	position: relative;
	width: 5%;
	height: 10%;
	float: left;
	opacity: 0.0
}

.schatten1
{
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	z-index: 1
}

#vorschau div
{
	padding: 0px;
	text-align: center;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
	transition: background-color 0.5s, box-shadow 0.5s;
	-webkit-transition: background-color 0.5s, box-shadow 0.5s
}

#vorschau div:hover
{
	background-color: #0CF;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

#vorschau img
{
	width: 100%;
	margin-bottom: 10px
}

#vorschau a
{
	text-decoration: none	
}

#hallo h1
{
	font-size: 3.5em
}
	
#portrait
{
	font-size: 1.25em
}
	
#portrait h3
{
	font-size: 2.25em;
	font-family: 'Gochi Hand', cursive;
	color: #0CF
}

#hallo p, #kontakt, #works, #monkey, #lizenz
{
	font-size: 1.375em;
	line-height: 1.375em
}

#erklaerung p
{
	font-size: 1.125em
}

#portrait
{
	margin-bottom: 30px;
	text-align: left;
	border-top: 1px dashed rgba(255, 255, 255, 0.7);
	color: #222
}

article a
{
	font-weight: bold;
	color: #222;
	text-decoration: underline;
	transition: color 0.5s;
	-webkit-transition: color 0.5s
}

article a:hover
{
	color: #0CF
}

#skills, #education, #name
{
	margin: 0px -15px 0px -15px;
	text-align: left
}

.data
{
	background-color: #0CF;
	color: #FFF;
	font-style: italic;
	padding: 10px;
	line-height: 3em
}

.data:nth-child(odd)
{
	border-radius: 15px 0px 15px 0px
}

.data:nth-child(even)
{
	border-radius: 0px 15px 0px 15px
}

#thesis
{
	background: url(../img/portrait/thesis.jpg) no-repeat center center
}

#devices
{
	background: url(../img/portrait/devices.jpg) no-repeat center center
}

#thesis, #devices
{
	position: relative;
	width: 100%;
	height: 200px;
	background-size: contain
}

footer
{
	padding: 70px 5px 70px 5px;
	width: 100%;
	bottom: 0;
  	z-index: 20;
	background-color: #222;
	color: #FFF;
	text-align: center;
	font-size: 1em;
	z-index: 30
}

footer a
{
	color: #FFF
}

footer a:hover
{
	color: #0CF;
	transition: color 0.5s;
	-webkit-transition: color 0.5s;
	text-decoration: none
}

.social
{
	padding: 15px 15px 0px 15px
}

.luecke
{
	padding: 0px 15px;
	font-size: 1.25em;
	text-decoration: none;
	font-weight: bold;
	line-height: 1.75em
}

#fb:hover
{
	color: #3a589c;
	transition: color 0.5s;
	-webkit-transition: color 0.5s
}

#in:hover
{
	color: #1783bc;
	transition: color 0.5s;
	-webkit-transition: color 0.5s
}

#xi:hover
{
    color: #006567;
    transition: color 0.5s;
    -webkit-transition: color 0.5s
}

#gm:hover
{
	color: #0C0;
	transition: color 0.5s;
	-webkit-transition: color 0.5s
}

#sprache
{
	text-decoration: underline
}

#bildContainer
{
	width: 100%;
	overflow: hidden
}

#wiese, #tisch
{
	position: relative;
	width: 101%;
	margin: 0px 0px 30px -1px
}

#wiese
{
	background: url(../img/portrait/wiese.jpg) no-repeat center center;
	background-size: cover
}

#tisch
{
	background: url(../img/works/tisch.jpg) no-repeat bottom center;
	background-size: cover
}

#brieftaube
{
	position: relative;
	width: 100%;
	margin-bottom: 30px;
	background-size: contain
}

#kontakt
{
	color: #222;
	text-align: left
}

#kontakt div
{
	margin-bottom: 30px
}

#kontakt h1, #kontakt h2, #hallo h1, #vorschau p, .arbeitName
{
	font-weight: bold;
	color: #0CF;
	font-family: 'Gochi Hand', cursive;
	text-transform: uppercase
}

#vorschau p
{
	color: #222
}

#kontakt input, #kontakt textarea, #kontakt select
{
	width: 100%;
	padding: 10px;
	font-size: 16px;
	color: #222;
	border-radius: 5px;
	border: 1px solid #AAA;
	transition: border 0.5s;
	-webkit-transition: border 0.5s
}

#kontakt input:hover, #kontakt textarea:hover, #kontakt select:hover
{
	border: 1px solid #0CF
}

#kontakt label, #kontakt select
{
	width: 100%
}

#kontakt select
{
	height: 45px;
	font-size: 1.5rem;
	border: 1px solid #AAA
}

textarea
{
	resize: none
}

.pflichtfeld
{
	color: #0CF
}

#kontakt input#senden
{
	margin-bottom: 10px;
	border: 3px solid #0CF;
	background-color: #0CF;
	color: #FFF;
	border-radius: 18px 0px 18px 0px
}

input:focus, select:focus, textarea:focus, button:focus 
{
    outline: 2px solid #0CF
}

#antwort
{
	color: #C00
}

.kleiner
{
	font-size: 0.875em
}

#separat
{
	background: url(../img/works/blasen.png) no-repeat center center;
	background-size: cover;
	background-color: rgba(0, 0, 0, 0.1)
}

#works
{
	position: relative;
	padding-top: 10px;
	margin-bottom: 50px;
	text-align: left
}

.arbeiten
{
	position: relative;
	padding: 0px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	text-align: center;
	transition: background-color 0.5s, box-shadow 0.5s;
	-webkit-transition:  background-color 0.5s, box-shadow 0.5s
}

.arbeiten:hover
{
	background-color: #0CF;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.arbeiten img
{
	position: relative;
	width: 100%
}

.arbeitName
{
	position: relative;
	top: 10px;
	color: #222;
	margin-bottom: 15px;
	padding: 0px 10px 0px 10px
}

.arbeiten a
{
	text-decoration: none
}

.tutorial:after
{
	position: absolute;
	content: "Tutorial";
	width: 101%;
	top: 20px;
	left: -0.5%;
	background: rgba(200, 0, 0, 0.8);
	padding: 2px 0;
	color: #FFF;
	text-shadow: 0px 1px 1px #000;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 1)
}

.keinLink
{
	cursor: default
}

#headline
{
	padding: 0px;
	margin-top: 100px;
	color: #222
}

#slideshow
{
	position: relative;
	padding: 0px
}

#slideshow img
{
	position: absolute;
	width: 100%;
	opacity: 0.0;
	z-index: 1
}

#slideshow img.sichtbar
{
	opacity: 1.0;
    z-index: 3
}

#slideshow img.zuvorSichtbar
{
    z-index: 2
}

#markerHintergrund
{
	position: relative;
	height: 40px;
	z-index: 4	
}

#markerFlaeche
{
	position: relative;
	height: 20px;
	margin: 0px 15px 0px 15px;
	text-align: center;
	overflow: hidden
}

.marker
{
	position: relative;
	width: 20px;
	height: 40px;
	margin: 0px 5px 0px 0px;
	cursor: pointer
}

.marker:last-child
{
	margin-right: 0px
}

.markerHoch
{
	top: -20px
}

#erklaerung table
{
	margin-bottom: 10px;
	font-weight: bold;
	text-align: left
}

#erklaerung table tr td
{
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: top;
	border: none
}

#erklaerung table tr td:first-child
{
	width: 50px
}

#erklaerung .formeln
{
	margin: 5px 0px;
	padding: 5px 10px;
	font-style: italic;
	line-height: 1.5em;
	color: #000;
	white-space: nowrap;
	overflow: auto;
	background: rgba(0, 0, 0, 0.1)
}

#erklaerung article
{
	margin-bottom: 30px	
}

/* Code-Darstellung */

.nowrapping
{
	width: 100%;
	margin: 20px 0;
	overflow: auto;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.1)
}

.nowrapping tr
{
	font-weight: normal
}

.nowrapping td:first-child
{
	padding-right: 15px;
	text-align: right	
}

.nowrapping code
{
	background: none;
}

.c-darkblue { color: #009 }
.c-blue { color: #00F }
.c-cyan { color: #099 }
.c-black { color: #000 }
.c-purple { color: #909 }
.c-pink { color: #F0F }
.c-lila { color: #906 }
.c-green { color: #060 }
.c-white { color: #FFF }
.c-red { color: #F00 }
.c-darkred { color: #700 }
.c-orange { color: #C60 }
.c-lightorange { color: #F90 }
.c-darkorange { color: #953 }

.space1 { padding-left: 25px }
.space2 { padding-left: 50px }
.space3 { padding-left: 75px }
.space4 { padding-left: 100px }
.space5 { padding-left: 125px }
.space6 { padding-left: 150px }
.space7 { padding-left: 175px }
.space8 { padding-left: 200px }
.space9 { padding-left: 225px }

/* ----- */

.kursiv { font-style: italic }

.highlight
{
	font-style: italic;
	color: #0CF;
	font-size: 1.25em
}

.highlight2 
{ 
	padding: 0 5px;
	background: rgba(0, 0, 0, 0.1)
}

.highlight3
{ 
	display: inline-block;
	margin: 20px 0;
	padding: 5px 10px;
	background: #0CF;
	color: #FFF;
	border-radius: 20px 0px 20px 0px
}

.highlightWarning
{
	color: #C00
}

.nextWork { text-align: right }

.zurueck a, .nextWork a, #lizenz a
{
	color: #222;
	text-decoration: none;
	transition: color 0.5s;
	-webkit-transition: color 0.5s
}

.zurueck a:hover, .nextWork a:hover, #lizenz a:hover { color: #0CF }

#imprint
{
	margin: 30px 0px 30px 0px;
	padding-top: 20px;
	text-align: right;
	border-top: 1px dashed #222;
	font-size: 1.25em
}

#imprint h3 { padding-bottom: 20px }

.codedirection 
{ 
	unicode-bidi: bidi-override; 
	direction: rtl 
}

#techlinks
{
	text-align: right;
	font-size: 0.875em;
	line-height: 2em
}

#techlinks a, #imprint a
{
	text-decoration: none;
	color: #222;
	transition: color 0.5s;
	-webkit-transition: color 0.5s
}

#techlinks a:hover, #imprint a:hover { color: #0CF }

#bananeContainer
{
	position: relative;
	width: 100%;
	background-color: #000
}

#bananeContainer h1
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	color: #090;
	font-family: 'Gochi Hand', cursive
}

#logo
{
	position: absolute;
	left: 50%;
	z-index: 5
}

#bananeLogo
{
	position: absolute;
	left: 50%;
	background: url(../img/monkeybiz/banana.png) no-repeat center center;
	background-size: contain
}

#illustrationen
{
	position: relative;
	padding: 30px 10px 50px 10px;
	text-align: center
}

#illustrationen img
{
	padding: 1px;
	border: 1px solid #000
}

#titel
{
	position: absolute;
	padding: 0px 5px 3px 5px;
	background: #090;
	color: #FFF;
	z-index: 20;
	font-size: 0.75em;
	line-height: 1.25em;
	display: none;
	text-align: center;
	text-shadow: 0px 1px 1px #000
}

#titel:after
{
	position: absolute;
	content: "";
   	width: 0; 
   	height: 0;
	left: 50%;
	top: -10px;
	margin-left: -10px;
   	border-bottom: 10px solid #090;
   	border-left: 10px solid transparent; 
   	border-right: 10px solid transparent
}

#lizenz h3
{
	font-size: 1.875em;
	font-family: 'Gochi Hand', cursive;
	color: #0CF
}

#lizenz a
{
	text-decoration: underline;
	font-weight: bold;
	padding-bottom: 2px
}

@media screen and (max-width: 480px)
{
	.row, .row .row 
	{
    	margin-right: 0px;
    	margin-left: 0px
  	}
	
	.navbar-toggle 
	{
		padding: 0px 10px;
		margin-top: 12px;
		border: none
	}
	
	.navbar-toggle:hover,
	.navbar-toggle:focus 
	{
		background-color: #0CF
	}
	
	.navbar-toggle .icon-bar 
	{
		width: 28px;
		height: 3px;
		background-color: #222
	}
  
	.navbar-nav > li > a 
	{
		margin: 0px -20px 0px -20px;
		padding-top: 8px;
  		padding-bottom: 8px;
		text-align: center;
		color: #222;
		border: 1px solid rgba(255, 255, 255, 0);
		transition: color 0.5s, border 0.5s;
		-webkit-transition: color 0.5s, border 0.5s
	}
	
	.navbar-nav > li > a:hover,
	.navbar-nav > li > a:focus 
	{
		color: #0CF;
		border: 1px solid #000
	}
	
	#canvasContainer, #bananeContainer
	{
		height: 300px
	}
	
	#bananeContainer h1
	{
		margin: 5px 0px 0px -120px;
		font-size: 2em
	}
	
	#bananeLogo
	{
		width: 200px;
		height: 145px;
		bottom: 30px;
		margin-left: -80px
	}
	
	#logo /* index */
	{
		width: 200px;
		height: 91px;
		bottom: -5px;
		margin-left: -100px;
		background: url(../img/logo.png) no-repeat center center
	}
	
	#hallo
	{
		padding: 20px 0px 20px 0px
	}
	
	#vorschau
	{
		margin-bottom: 50px	
	}
	
	#vorschau div:first-child
	{
		width: 90%;
		margin: 0px 0px 30px 5%
	}
	
	#vorschau div:last-child
	{
		width: 90%;
		margin-left: 5%
	}
	
	#vorschau p
	{
		margin: 0;
		font-size: 1.875em;
		line-height: 1em	
	}
	
	#wiese, #tisch
	{
		height: 320px
	}
	
	#thesis
	{
		margin-top: -10px
	}
	
	#devices
	{
		margin-top: -20px
	}
	
	.pikto i
	{
		float: left;
		margin-bottom: -10px
	}
	
	#kontakt h1, #kontakt h2
	{
		text-align: left;
		font-size: 2.5em
	}
	
	#brieftaube
	{
		height: 200px;
		background: url(../img/contact/brieftaubeKlein.jpg) no-repeat center center;
		background-color: #0CF
	}
	
	.arbeiten
	{
		width: 90%;
		margin: 20px 0px 0px 5%
	}
	
	.arbeitName
	{
		font-size: 1.25em
	}
	
	#headline
	{
		margin-bottom: -5px;
		padding: 0px 15px 0px 15px;
		font-size: 1.5em
	}
	
	#slideshow img
	{
		padding: 15px;
	}
	
	#markerHintergrund
	{
		margin-top: 57%
	}
	
	#markerHintergrund
	{
		height: 30px
	}
	
	#markerFlaeche
	{
		height: 15px;
		margin: 0px 15px 0px 15px
	}
	
	.marker
	{
		width: 15px;
		height: 30px
	}
	
	.markerHoch
	{
		top: -15px
	}
	
	#sprachen
	{
		text-align: center
	}
	
	.piktos
	{
		width: 35px;
		margin: 0px 20px 20px 0px
	}
	
	#erklaerung
	{
		text-align: left;
		margin-bottom: 30px
	}
	
	.zurueck
	{
		margin-bottom: 30px
	}
	
	#illustrationen img
	{
		max-width: 100%;
		margin-bottom: 3px
	}
	
	#lizenz
	{
		width: 90%;
		margin: 100px 0px 50px 5%
	}
}

@media screen and (min-width: 480px)  and (max-width: 767px)
{
	.row, .row .row 
	{
    	margin-right: 0px;
    	margin-left: 0px
  	}
	
	.navbar-toggle 
	{
		padding: 0px 10px;
		margin-top: 12px;
		border: none
	}
	
	.navbar-toggle:hover,
	.navbar-toggle:focus 
	{
		background-color: #0CF
	}
	
	.navbar-toggle .icon-bar 
	{
		width: 28px;
		height: 3px;
		background-color: #222
	}
  
	.navbar-nav > li > a 
	{
		margin: 0px -20px 0px -20px;
		padding-top: 8px;
  		padding-bottom: 8px;
		text-align: center;
		color: #222;
		border: 1px solid rgba(255, 255, 255, 0);
		transition: color 0.5s, border 0.5s;
		-webkit-transition: color 0.5s, border 0.5s
	}
	
	.navbar-nav > li > a:hover,
	.navbar-nav > li > a:focus 
	{
		color: #0CF;
		border: 1px solid #000
	}
	
	#canvasContainer, #bananeContainer
	{
		height: 300px
	}
	
	#logo
	{
		width: 200px;
		height: 91px;
		bottom: -5px;
		margin-left: -100px;
		background: url(../img/logo.png) no-repeat center center
	}
	
	#bananeContainer h1
	{
		margin: 5px 0px 0px -120px;
		font-size: 2em
	}
	
	#bananeLogo
	{
		width: 200px;
		height: 145px;
		bottom: 30px;
		margin-left: -80px
	}
	
	#hallo
	{
		padding: 20px 0px 20px 0px
	}
	
	#vorschau
	{
		margin-bottom: 50px	
	}
	
	#vorschau div:first-child
	{
		width: 90%;
		margin: 0px 0px 30px 5%
	}
	
	#vorschau div:last-child
	{
		width: 90%;
		margin-left: 5%
	}
	
	#vorschau p
	{
		margin: 0;
		font-size: 1.875em;
		line-height: 1em	
	}
	
	#wiese, #tisch
	{
		height: 320px
	}
	
	#thesis
	{
		margin-top: -10px
	}
	
	#devices
	{
		margin-top: -20px
	}
	
	.pikto i
	{
		float: left;
		margin-bottom: -10px
	}
	
	#kontakt h1, #kontakt h2
	{
		text-align: left;
		font-size: 2.5em
	}
	
	#brieftaube
	{
		height: 200px;
		background: url(../img/contact/brieftaubeKlein.jpg) no-repeat center center;
		background-color: #0CF
	}
	
	.arbeiten
	{
		width: 48%;
		margin-top: 20px
	}
	
	.arbeitName
	{
		font-size: 1.125em
	}
	
	.arbeiten:nth-child(2n+2)
	{
		float: right
	}
	
	#headline
	{
		margin-bottom: -5px;
		padding: 0px 15px 0px 15px;
		font-size: 1.5em
	}
	
	#slideshow img
	{
		padding: 15px;
	}
	
	#markerHintergrund
	{
		margin-top: 57%
	}
	
	#markerHintergrund
	{
		height: 30px
	}
	
	#markerFlaeche
	{
		height: 15px;
		margin: 0px 15px 0px 15px
	}
	
	.marker
	{
		width: 15px;
		height: 30px
	}
	
	.markerHoch
	{
		top: -15px
	}
	
	#sprachen
	{
		text-align: center
	}
	
	.piktos
	{
		width: 40px;
		margin: 0px 20px 20px 0px
	}
	
	#erklaerung
	{
		text-align: left;
		margin-bottom: 30px
	}
	
	.zurueck
	{
		margin-bottom: 30px
	}
	
	#illustrationen img
	{
		max-width: 100%;
		margin-bottom: 3px
	}
	
	#lizenz
	{
		width: 90%;
		margin: 100px 0px 50px 5%
	}
}
	
@media screen and (min-width: 768px) 
{
	.row, .row .row 
	{
    	margin-right: 0px;
    	margin-left: 0px;
  	}
	
  	.navbar-brand 
	{
    	margin-right: 25px
  	}
	
	nav div div
	{
		float: right
	}
	
	#canvasContainer, #bananeContainer
	{
		height: 400px
	}
	
	#logo
	{
		width: 360px;
		height: 160px;
		bottom: -10px;
		margin-left: -180px;
		background: url(../img/logoBig.png) no-repeat center center
	}
	
	#bananeContainer h1
	{
		margin: -15px 0px 0px -210px
	}
	
	#bananeLogo
	{
		width: 300px;
		height: 218px;
		bottom: 40px;
		margin-left: -110px;
	}
	
	#hallo
	{
		padding: 30px 0px 50px 0px
	}
	
	#vorschau
	{
		margin-bottom: 50px	
	}
	
	#vorschau div:first-child
	{
		width: 40%;
		float: left;
		margin-left: 8%
	}
	
	#vorschau div:last-child
	{
		width: 40%;
		float: right;
		margin-right: 8%
	}
	
	#vorschau p
	{
		margin: 0;
		font-size: 2.5em;
		line-height: 1.5em	
	}
	
	#wiese, #tisch
	{
		height: 500px
	}
	
	.pikto i
	{
		float: right;
		margin-right: -20px
	}
	
	#kontakt
	{
		margin-top: 30px
	}
	
	#kontakt h1, #kontakt h2
	{
		margin-top: 300px;
		text-align: right;
		transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg)
	}
	
	#kontakt h1
	{
		font-size: 2.875em
	}
	
	#kontakt h2
	{
		font-size: 2.375em
	}
	
	#brieftaube
	{
		height: 372px;
		background: url(../img/contact/brieftaube.jpg) no-repeat center center;
		background-color: #0CF
	}
	
	#devices
	{
		margin-bottom: 10px
	}
	
	.arbeiten
	{
		width: 32%;
		margin: 30px 2% 0px 0px
	}
	
	.arbeitName
	{
		font-size: 1.0em
	}
	
	.arbeiten:nth-child(3n+3)
	{
		margin-right: 0px
	}
	
	#headline
	{
		font-size: 1.75em
	}
	
	#sprachen
	{
		padding-right: 30px;
		text-align: right	
	}
	
	.piktos
	{
		width: 45px;
		margin: 0px 0px 20px 30px
	}
	
	#slideshow
	{
		margin-bottom: 280px
	}
	
	#erklaerung
	{
		padding: 0px;
		text-align: left;
		margin-bottom: 30px
	}
	
	.zurueck, .nextWork
	{
		padding: 0px
	}
	
	.zurueck
	{
		margin-bottom: 50px
	}
	
	#illustrationen img
	{
		max-width: 100%;
		height: 230px;
		margin: 5px
	}
	
	#lizenz
	{
		width: 70%;
		margin: 100px 0px 70px 15%
	}
}

@media (min-width: 992px)
{
	#slideshow
	{
		margin-bottom: 355px
	}
	
	#kontakt h2
	{
		font-size: 2.875em
	}
}

@media (min-width: 1200px)
{
	#slideshow
	{
		margin-bottom: 440px
	}
}