/* css */

html, body, td, tr, table, div, p, h1, h2, h3 {
	font-family: Verdana, Helvetica;
	font-weight: normal;
	font-size: 10px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}
div, p, h1, h2, h3 {
	font-family: Verdana, Helvetica;
	display: inline-block;
}
body {
	background: #181818;
	color: #aaaaaa;
}
	
a, a:active, a:visited {
	color: white;
	text-decoration: none;
	font-weight: normal;
	transition: color 0.5s ease-in-out;
}
a:hover {
	text-decoration: none;
/*	color: #aaaaaa; */
	color: #777777;
}

hr {
	width: 100%;
	height: 0px;
	border: 0px;
	border-top: 1px solid grey;
	padding-bottom: 20px;
}

h1 {
	font-size: 16px;
}
h2 {
	font-size: 14px;
}
h3 {
	font-size: 12px;
}
h1, h2, h3, h1 img, h2 img, h3 img {
}

input, textarea {
	font-size: 12px;
	color: white;
	border: 0px;
	background: rgba(0,0,0, 0.3);
	color: white;
	border-radius: 14px;
	margin-bottom: 3px;
	padding: 6px;
	vertical-align: middle;
}
form img {
	max-height: 14px;
	vertical-align: middle;
}

.portrait {
	position: absolute;
	margin-left: 100px;
	max-height: 200px;
	border-radius: 500px;
}
.icon {
	max-height: 14px;
	margin: 0px;
	vertical-align: middle;
}
.circle .portrait {
	max-height: 100px;
	position: static;
	margin: 0px;
	margin-left: 5px;
	float: right;
}

/* header */

header {
	position: fixed;
	top: 50px;
	left: 50px;
	vertical-align: middle;
}
header img {
	max-width: 50px; max-height: 50px;
	vertical-align: -100%;
}
header a:hover img {
	border-radius: 100px;
	animation: Logo 1s ease-in-out;
}
	
@keyframes Logo {
	50% {
		transform: scale(1.2,1.2);
		-ms-transform: scale(1,2,1.2); /* IE 9 */
		-webkit-transform: scale(1.2,1.2); /* Safari */
	}
	100% {
		transform: transform: scale(1,1);
		-ms-transform: scale(1,1); /* IE 9 */
		-webkit-transform: scale(1,1); /* Safari */
	}
}
	
img#banner {
	display: none;
}

header .circle {
	background: url('images/icons/circle_logo.png') 85px/85px;
	width: 85px;
	height: 85px;
	position: absolute;
	top: -15px;
	left: -19px;
	z-index: 1;
}

/* navigation */

nav .active {
	}
nav a.active {
}

nav {
	width: 200px;
	position: fixed;
	top: 150px;
	margin-top: -20px;
	left: 50px;
	bottom: 50px;
	white-space: nowrap;
	line-height: 175%;
	overflow: hidden;
/*	opacity: 0.5;
	transition: opacity 0.5s ease-in-out;
	-ms-transform: opacity 0.5s ease-in-out;
	-webkit-transform: opacity 0.5s ease-in-out; */
	}
nav:hover {
	overflow: auto;
	}
nav .title {
	font-size: 0px;
	display: block;
	background-repeat: no-repeat;
	background-position: center left;
	background-size: 12px;
	padding-left: 17px;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	-ms-transform: opacity 0.5s ease-in-out;
	-webkit-transform: opacity 0.5s ease-in-out
}
nav .menu .title {
	background-image: url('images/icons/menu.png');
}
nav .galleries .title {
	background-image: url('images/icons/camera.png');
}
nav .projects .title {
	background-image: url('images/icons/folder_close.png');
}
nav .links .title {
	background-image: url('images/icons/link_alt.png');
	display: none;
}
nav .menu {
	display: block;
}
nav .galleries {
	opacity: 0.1;
	display: block;
	margin-top: 15px;
	transition: opacity 0.5s ease-in-out;
	-ms-transform: opacity 0.5s ease-in-out;
	-webkit-transform: opacity 0.5s ease-in-out
}
nav .projects {
	opacity: 0.0;
	display: block;
	margin-top: 15px;
	transition: opacity 0.5s ease-in-out;
	-ms-transform: opacity 0.5s ease-in-out;
	-webkit-transform: opacity 0.5s ease-in-out
}
nav .links {
	opacity: 0.0;
	display: block;
	display: none; /* UNSICHTBAR */
	margin-top: 15px;
	transition: opacity 0.5s ease-in-out;
	-ms-transform: opacity 0.5s ease-in-out;
	-webkit-transform: opacity 0.5s ease-in-out
}
nav:hover .menu, nav:hover .galleries, nav:hover .projects, nav:hover .links, nav:hover .title {
	opacity: 1;
}
nav a {
	display: block;
	border-radius: 100px;
/*	background: url("images/icons/link.png") left/12px no-repeat;
	padding-left: 15px; */
/*	transition: background 1s ease-in-out; */
}
nav a:hover {
/*	background: black; */
}
nav a.active {
	font-weight: bold;
}
nav img {
	max-height: 8px;
	max-width: 8px;
	}
	
nav .links a {
	display: inline;
}
nav .links img {
	max-height: 20px;
	max-width: 20px;
}
nav .links img:hover {
	animation: Smols 0.5s ease-in-out;
}

/* main */

main {
	position: fixed;
	left: 300px;
	top: 150px;
	right: 0px;
	padding-right: 50px;
	bottom: 50px;
	overflow: auto;
}
main a {
}
main a:hover {
}
main section {
	padding-bottom: 20px;
	white-space: nowrap;
	overflow: auto;
	margin-bottom: 50px;
}
main section img {
	margin-left: 50px;
	max-height: 350px;
}
main section a:first-child img {
	margin-left: 0px;
}
main article {
	vertical-align: top;
	border: 1px solid grey;
	display: inline-block;
	padding: 10px;
    width: 300px;
    height: 300px;
    white-space: normal;
}

main h1, main h2, main h3 {
	display: block;
}
main h1 img {
	margin-left: 0px;
	max-height: 18px;
	vertical-align: top;
}
main .right {
	display: inline-block;
	float: right;
}
main td img { /*
	max-height: 8px;
	max-width: 8px; */
}
main td:first-child {
	padding-right: 10px;
	font-weight: bold;
	vertical-align: top;
	text-align: right;
}

aside {
}


/* footer */
	
footer {
	position: fixed;
	text-align: left;
	left: 0px;
	bottom: 0px;
	padding-top: 20px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
	opacity: 0.1;
	transition: opacity 0.5s ease-in-out; */
	-ms-transform: opacity 0.5s ease-in-out; /* IE 9 */
	-webkit-transform: opacity 0.5s ease-in-out; /* Safari */
	}

footer:hover {
	opacity: 1;
}

footer img {
	max-width: 13px;
	max-height: 13px;
	vertical-align: middle;
}

footer a:hover img {
	animation: Smols 0.5s ease-in-out;
}
	
@keyframes Smols {
	50% {
		transform: scale(0.9,0.9);
		-ms-transform: scale(0.9,0.9); /* IE 9 */
		-webkit-transform: scale(0.9,0.9); /* Safari */
	}
	100% {
		transform: transform: scale(1,1);
		-ms-transform: scale(1,1); /* IE 9 */
		-webkit-transform: scale(1,1); /* Safari */
	}
}

footer #developer {
	display: none;
}
footer #counter {
	display: none;
}

/* background slideshow */
	
	img#bg {
		position: fixed;
		bottom: 0px;
		right: 0px;
		min-height:100%;
		min-width:100%;
	}
	
	#bg_overlay {
		position:fixed; /* ! */
		height:100%;
		width:100%;
		top: 0px;
	    background: url('images/background_overlay.png') repeat;
	}
	
/* unused */
	
@keyframes Rotate{
	100% {
		transform: rotate(720deg);
		-ms-transform: rotate(720deg); /* IE 9 */
		-webkit-transform: rotate(720deg); /* Safari */
	}
}