/*
Schrift: dunkelbraun - #5F4427 - RGB 95 68 39
Hintergrund: creme - #f6e3cb - RGB 246 27 203
Navigation hover: gelb - #f5df67 - RGB 245 223 103
Links hover: rot - #860202 - RGB 134 2 2
*/

.projekte {
	display: table;
}

@media screen and (max-width: 499px) {
	.projekte {
		width: 250px;
		height: auto;
		position: relative;
		left: 50%;
		margin-left: -125px;
	}
	.container {
		width: 250px;
		margin-bottom: 30px;
	}
}
@media screen and (min-width: 500px) and (max-width: 739px) {
	.projekte {
		width: 250px;
		height: auto;
		position: relative;
		left: 50%;
		margin-left: -125px;
	}
	.container {
		width: 250px;
		margin-bottom: 30px;
	}
}
@media screen and (min-width: 740px) and (max-width: 1099px) {
	.projekte {
		width: 560px;
		height: auto;
		position: relative;
		left: 50%;
		margin-left: -280px;
	}
	.container {
		width: 250px;
		position: relative;
		float: left;
		margin: 0 30px 30px 0;
	}
}
@media screen and (min-width: 1100px) {
	.projekte {
		width: 840px;
		height: auto;
		position: relative;
		left: 50%;
		margin-left: -420px;
	}
	.container {
		width: 250px;
		position: relative;
		float: left;
		margin: 0 30px 30px 0;
	}
	
	.middle {
		transition: .8s ease;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.container:hover .imgprojekt {
		transition: .8s ease;
		opacity: 0.3;
	}
	
	.container:hover .middle {
		transition: .8s ease;
		opacity: 1;
	}

	.text a {
		font-family: 'Karla', sans-serif;
		color: #5F4427;
		font-size: 2em;
		font-weight: bold;
		letter-spacing: 0.01em;
		line-height: 1.1em;
	}
	
	.text a:hover {
		text-decoration: none;
	}
}




.imgprojekt {
	width: 250px;
	height: auto;
}