/* =======================================================================================
CSS
======================================================================================= */
/* =======================================================================================
Layout
======================================================================================= */
body {
	color:#000;
	background:#fff;
	font-family:'Source Sans Pro',sans-serif;
	font-size:1em;
	font-weight:500;
}

header {
	position:fixed;
	top:0;
	width:100%;
	background-color:#fff;
	z-index:2;
	border:2px solid #fcfcfc;
	box-shadow:0 1px 2px rgba(34,25,25,0.4);
}

header figure {
	text-align:center;
	padding:5px 0;
}

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	font-family:'Source Sans Pro',sans-serif;
}

/* =======================================================================================
Section Styles
======================================================================================= */
section {
	padding-top:125px;
}

article {
	padding:20px;
	background:rgba(255,255,255,0.85);
}

section#uebermich {
	padding:10px 0 50px;
	background-image:url(../images/subtle_grunge.png);
}

h2 {
	text-align:center;
}
h3 {
	font-style:bold;
	font-weight:700;
	font-size:36px;
	text-align:center;
}


section#uebermich h2 {
	margin:0 0 50px;
	font-style:bold;
	font-weight:700;
	font-size:50px;
	color:#000;
}

section#uebermich article {
	margin:auto;
	width:75%;
	font-weight:200;
	font-size:16px;
	color:#000;
	text-align:left;
	column-count:2;
	column-gap:40px;
	vertical-align:top;
}

section#leistungen {
	height:900px;
	width:100%;
	background-image:url(../images/black_bg.png);
}
section#leistungen h2,
section#leistungen h3,
section#leistungen li {
	color: #fff;
}
section#leistungen h2 {
	margin:0 0 50px;
	font-style:bold;
	font-weight:700;
	font-size:36px;
}
section#leistungen h3 {
	margin-bottom:30px;
	font-weight:400;
	font-size:16px;
}
section#leistungen li {
	font-weight:200;
}
.arrow-list {
	padding-left: 20px;
}


.list-container {
	margin:auto;
	width:90%;
	text-align:left;
}

section#referenzen {
	height:900px;
	width:100%;
	background-image:url(../images/subtle_grunge.png);
}
section#referenzen .fancybox-thumb img {
	height: 120px;
}

section#kontakt {
	background-image:url(../images/subtle_grunge.png);
}

section#kontakt h2 {
	margin:0 0 50px;
	font-style:bold;
	font-weight:700;
	font-size:36px;
}

div#google-map {
	position:relative;
	margin:auto;
	width:100%;
}

iframe {
	width:100%;
}

div#kontakt-box {
	position:absolute;
	bottom:70px;
	left:10px;
	width:330px;
	height:350px;
	padding:15px;
	background-color:#fff;
	filter:alpha(opacity=80);
	opacity:.8;
	-moz-opacity:.8;
}

div#kontakt-text {
	position:absolute;
	bottom:70px;
	left:10px;
	width:330px;
	height:350px;
	padding:15px;
}

.kontakt {
	margin:30px 0 0;
	font-weight:300;
	font-size:13px;
}

.kontakt a {
	text-decoration:none;
	color:#8e148b;
}

footer {
	background-image:url(../images/black_bg.png);
}

div#fb {
	float:left;
	margin:10px;
	width:30px;
	height:30px;
	background-image:url(../images/facebook-logo.png);
	background-size:contain;
	background-repeat:no-repeat;
}

div#pr {
	float:left;
	margin:10px 0;
	width:30px;
	height:30px;
	background-image:url(../images/instagram-logo.png);
	background-size:contain;
	background-repeat:no-repeat;
}

ul#impressum {
	float:right;
	margin:15px 10px 10px;
}

ul#impressum li a {
	text-decoration:none;
	color:#fff;
}

ul#impressum li a:hover {
	text-decoration:underline;
}

Section#imp {
	padding-top:30px;
	background-image:url(../images/subtle_grunge.png);
}

h1#h1 {
	margin:0 0 40px 50px;
	font-style:;
	font-weight:400;
	font-size:50px;
}

div#container1 {
	width:25%;
	padding:0 0 20px 50px;
	float:left;
}

div#container2 {
	width:60%;
	padding:0 20px 20px 50px;
	float:left;
}

.thin {
	font-weight:400;
	font-size:14px;
}

.thin a {
	text-decoration:none;
	color:#8e148b;
}

.thin1 {
	font-weight:400;
	font-size:14px;
	font-style:italic;
}

.fat {
	margin:20px 0 0;
	font-weight:700;
	font-size:15px;
}

.fat1 {
	font-weight:700;
	font-size:15px;
}

/* =======================================================================================
Klassen
======================================================================================= */
div.float-clear {
	clear:both;
}

/* =======================================================================================
Gallery
======================================================================================= */
#columns {
	width:90%;
	max-width:1100px;
	margin:50px auto;
}

div#columns figure {
	background:#fefefe;
	border:2px solid #fcfcfc;
	box-shadow:0 1px 2px rgba(34,25,25,0.4);
	margin:0 2px 15px;
	padding:15px;
	padding-bottom:10px;
	transition:opacity .4s ease-in-out;
	display:inline-block;
	column-break-inside:avoid;
}

@media screen and (max-width: 750px) {
	#columns figure {
		width:100%;
	}
}

div#columns figure img {
	width:100%;
	height:auto;
	border-bottom:1px solid #ccc;
	padding-bottom:15px;
	margin-bottom:5px;
}

div#columns figure figcaption {
	font-size:.9rem;
	color:#444;
	line-height:1.5;
}

div#columns small {
	font-size:1rem;
	float:right;
	text-transform:uppercase;
	color:#aaa;
}

div#columns small a {
	color:#666;
	text-decoration:none;
	transition:.4s color;
}

div#columns:hover figure:not(:hover) {
	opacity:.4;
}

/* =======================================================================================
Gridsystem
======================================================================================= */
.container:after,.row:after,.col:after,.clr:after,.group:after {
	content:"";
	display:table;
	clear:both;
}

.col {
	display:block;
	float:left;
	width:100%;
}

.span_1 {
	width:8.33333333333%;
}

.span_2 {
	width:16.6666666667%;
}

.span_3 {
	width:25%;
}

.span_4 {
	width:33.3333333333%;
}

.span_5 {
	width:41.6666666667%;
}

.span_6 {
	width:50%;
}

.span_7 {
	width:58.3333333333%;
}

.span_8 {
	width:66.6666666667%;
}

.span_9 {
	width:75%;
}

.span_10 {
	width:83.3333333333%;
}

.span_11 {
	width:91.6666666667%;
}

.span_12 {
	width:100%;
}

@media only screen and (max-width: 768px) {
	.span_1,.span_2,.span_3,.span_4,.span_5,.span_6,.span_7,.span_8,.span_9,.span_10,.span_11,.span_12 {
		width:33%;
	}
}

@media only screen and (max-width: 480px) {
	.span_1,.span_2,.span_3,.span_4,.span_5,.span_6,.span_7,.span_8,.span_9,.span_10,.span_11,.span_12 {
		width:50%;
	}
}