#header {
	position:fixed;
	/* 250px in rem */
	width:15.625rem;
	height:15.625rem;
}

#header img{
	widh: 250px;
	height: 250px;
}

#footer {
	position:fixed;
	bottom:0;
	width:100%;
	height: 3.7rem;
}

#root .project-container .banner > div {
	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
}

#root .project-container:first-child {
	/* ist nötig, weil alle projekte mit a-tag gewrappt */
	margin-top: 4px;
}

img {
	/* Bilder sollen in der Höhe konstant bleiben, nicht in der Breite */
	max-width:initial;
}

h2,h3,h4,h5,h6 {
	color:#ffffff;
}

#root .footer-spacing {
	height:4rem;
}

.headeroffset {
	margin-top:3rem;
}

.centerer {
	width:3000px;
	position:absolute;
	left:50%;
	margin-left:-1500px;
	top:0;
}

.centerer img {
	display:block;
	margin:0 auto;
	/*-webkit-filter:opacity(40%) contrast(120%);
	-webkit-transition: all 0.3s ease-in-out;*/
}

/*#root .project-container a:hover .centerer img {
	-webkit-filter:opacity(100%) contrast(100%);
}*/

a {
	transition:color 0.3s ease;
	-webkit-transition:color 0.3s ease;
	-moz-transition:color 0.3s ease;
}
a:hover, a:focus {
	color:#fff;
}

#root .project-container .banner > div {
	transition:padding 0.3s ease, background-color 0.3s ease;
	-webkit-transition:padding 0.3s ease, background-color 0.3s ease;
	-moz-transition:padding 0.3s ease, background-color 0.3s ease;
}

#root .project-container a:hover .banner > div {
	padding-bottom:1rem;
	background-color:#243a48;
	color:#fff;
}

#root .project-container ul {
	margin:0;
	padding-top:2rem;
	padding-left:1rem;
	padding-right:2rem;
	padding-bottom:0;
	
	position:absolute;
	z-index:50;
	bottom:0;
	left:0;
	background-image:url(../media/badges/background.png);
	background-size:100%;
	margin-bottom:-2px;
}

#root .project-container ul.moretransparent {
	background-image:url(../media/badges/background_0.5.png);
}

/*PAUL*/

#root .project-container ul.moretransparent2 {
	background-image:url(../media/badges/background_0.2.png);
}

#root .project-container ul.nobackground {
	background-image: none;
}

#root .project-container li {
	list-style-type:none;
	display:block;
	float:left;
	margin:0;
	padding:0;
	position:relative;
	
	bottom: 0;
	
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
}

#root .project-container li:hover {
	bottom: 0.5rem;
}

#footer ul.inline-list {
	overflow:visible;
}

li.social {
	background-color:#243a48;
	margin-top:-6px;
}

li.social a {
	opacity:0.5;
	
	transition:opacity 0.3s ease;
	-webkit-transition:opacity 0.3s ease;
	-moz-transition:opacity 0.3s ease;
}

li.social a:hover {
	opacity:1.0;
}

li.social img{
	width:32px;
	height:32px; 
}

.content-box {
  background: #243a48;
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 15px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 15px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 15px;
}

@media only screen and (max-width: 63em) {
	#header {
		position:relative;
		/* zentrierung über grid? */
		margin-left:auto;
		margin-right:auto;
	}
	
	#footer {
		position:relative;
		height:12rem;
	}
	
	#footer ul li {
		float:none;
	}
	
	#footer ul li.social {
		float:left;
		margin-top:10px;
	}
	
	#root .footer-spacing {
		height:3rem;
	}
	
	#root .project-container ul {
		display:none;
	}
}

@media only screen and (max-width: 40em) {
	.ignorebreaks br {
		display:none;
	}
	
	#root .project-container .description,
	#root .project-container .time
	{
		display:none;
	}
	
	#root .project-container.headeroffset {
		height:auto;
		min-height:12rem;
		padding:0 0 2rem 0;
	}
}