/* Style Sheet tr.web.authoring */
/* http://www.thorsten-reinicke.de/ */
/* © 2013 Thorsten Reinicke */


/* ********** FONT ********** */

@font-face {
	font-family: Raleway ;
	src: url(Raleway/Raleway-Regular.ttf) ; }

@font-face {
	font-family: Raleway-Italic ; 
	src: url(Raleway/Raleway-Italic.ttf) ; }

@font-face {
	font-family: Raleway-Thin ;
	src: url(Raleway/Raleway-Thin.ttf) ; }

@font-face {
	font-family: Raleway-Bold ;
	font-weight: bold ; 
	src: url(Raleway-Bold.ttf) ; }



/* ********** BODY ********** */


html, body {
	font-family: Raleway, Arial, serif ; }

body {

	background: #FFFFFF ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; 
	overflow: visible ; }


/* ********** HEADER ********** */

body > header { 
	font-weight: normal ; 
	font-style:normal ; 
	color: #000000 ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	text-shadow: 0px 0px 0px rgba(0,0,0,0.67) ; 
	background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.8), rgba(255,255,255,0)) ;  
	position: fixed ; 
	top: 0 ; 
	left: 0 ; 
	width: 100% ; 
	z-index: 100 ; 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 0 ; }


body > header h1 {	
	font-size: 12px ; 
	font-weight: normal ; 
	text-transform: uppercase;
	padding: 24px ; 
	border: 0 ; 
	margin: 0 ; }

body > header h1 img {
	vertical-align: baseline ; }

body > header h1 a {
	color: #000000 ; 
	text-decoration: none ; }


/* ********** NAVIGATION ********** */

nav#hauptseite {
	font-size: 16px ; 
	position: fixed ; 
	top: 0 ; 
	right: calc(8% - 24px ) ; 
	padding: 0 ; 
	border: 0px solid black ; 
	border-bottom-left-radius: 12px ; 
	border-bottom-right-radius: 12px ; 
	margin: 0 ; 
	background: #EEEEEE /* rgba(255,255,0,0.6) ; */ ; 
	box-shadow: 1px 1px 4px rgba(0,0,0,0.67) ; 
	z-index: 101 ; }

nav#hauptseite a {
	display: block ; 
	padding: 12px ; 
	text-decoration: none ; 
	line-height: 1 ; }


nav#hauptseite a:link,
nav#hauptseite a:visited {
	color: darkslategray ; }

nav#hauptseite a:hover {
	color: slategray ; }

nav#hauptseite a:active {
	color: lightsteelblue ; }



nav#main {
	position: fixed ; 
	width: 100% ; 
	top: 0px ; 
	padding: 0 0 0 0 ; 
	border: 0 ; 
	margin: 18px 0 0 0 ; 
/*	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)) ; */
	z-index: 100 ; }




nav ul {
	display: block ; 
	width: 100% ; 
	
	text-align: right ; 
	margin: 0 ; 
	padding: 0 ; }

nav ul li {
	list-style-type: none ; 
	font-size: 14px ; 
	line-height: 1 ; 
	padding: 0 ; 
	margin: 0 ; 
	border: 0px solid red ; }

nav ul li h2, 
nav ul li h3 {
	font-family: Raleway, Arial, serif;
	font-size: 14px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	text-align: center ; 
	color: #000000 ; 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 0 ;  
/*	text-shadow: 
		0px 0px 8px rgba(0,0,0,1) , 
		0px 0px 2px rgba(0,0,0,1) ; */
	z-index: 1 ; }

nav ul li h2 small {
	font-size: 14px ; }

nav ul li h3 {
	font-size: 12px ; }

nav ul li h2 a, 
nav ul li h3 a {
	display: inline-block ; 
	padding: 4px 24px 4px 24px ; 
	margin: 0 ; 
	border-radius: 18px ; 
	text-decoration: none ; 
	color: #000000 ; }

nav ul li h3 a {
	padding: 2px 12px 2px 12px ; }

nav ul li h2 a:link, 
nav ul li h2 a:visited,
nav ul li h3 a:link, 
nav ul li h3 a:visited { 
	background: rgb(255,255,255) /* (160,170,180) rgb(255,165,0) */ ; 
/*	box-shadow: 
		0 0 12px rgba(0,20,30,0.95) ; */}

nav ul li h2 a:hover, 
nav ul li h3 a:hover {
	color: #FFFFFF ; 
	background: rgb(165,255,0) ; 
	text-shadow: 
		0px 0px 8px rgba(0,0,0,1) , 
		0px 0px 2px rgba(0,0,0,1) ; 
	box-shadow: inset 0 0 12px rgba(0,20,30,0.95) ; }

nav ul li h2 a:active, 
nav ul li h3 a:active { 
	background: rgb(255,0,165) ; 
	box-shadow: inset 0 0 12px rgba(0,20,30,0.95) ; }

nav ul li h2 a:link,
nav ul li h2 a:visited,
nav ul li h2 a:hover,
nav ul li h3 a:link,
nav ul li h3 a:visited,
nav ul li h3 a:hover,
p a:link,
p a:visited,
p a:hover, 
figure a:link,
figure a:visited,
figure a:hover {
	-webkit-transition: all 0.4s ease ; 
	-moz-transition: all 0.4s ease ; 
	-o-transition: all 0.4s ease ; 
	-ms-transition: all 0.4s ease ; 
	transition: all 0.4s ease ; } 

nav ul li h2 a:active,
nav ul li h3 a:active,
p a:active, 
figure a:active {
	-webkit-transition: all 0s ease ; 
	-moz-transition: all 0s ease ; 
	-o-transition: all 0s ease ; 
	-ms-transition: all 0s ease ; 
	transition: all 0s ease ; }

nav ul li {
	display: inline-block ; 
	margin: 0 0 0 0 ; }

nav ul li:nth-child(5) { 
	border: 0px solid red ; 
	position: absolute ; 
	right: 5% ; 
	bottom: 0px ; 
	text-align: center ; 
	margin: 0 ; 
	padding: 0 ; 
	z-index: 1 ; }



/* ********** LINKS ********** */

p a,
figure figcaption a {
	padding: 1px 6px 1px 6px ; 
	border-radius: 16px ; 
	text-decoration: none ; }
	
p a:link, 
p a:visited, 
figure figcaption a:link, 
figure figcaption a:visited,
footer a {
	color: #000000 ; 
	background: rgb(211,217,223) ; }

footer a {
	font-size: 12px ; 
	text-decoration: none ; 
	padding: 1px 6px 0px 6px ; 
	border-radius: 8px ; }

p a:hover, 
p a:active, 
figure figcaption a:hover, 
figure figcaption a:active,
footer a {
	color: #000000 ; 
	text-decoration: none ; }

p a:hover, 
figure figcaption a:hover,
footer a:hover {
	color: #000000 ; 
	background: rgb(165,255,0) ; }

p a:active, 
figure figcaption a:active,
footer a:active {
	color: #FFFFFF ; 
	background: rgb(255,0,165) ; }

p.shadow {
	position: relative ; 
	top: 0 ; 
	left: 0 ; }


/* column text-shadow workaround */

div.column p a:link,
div.column p a:visited,
div.column p a:hover, 
div.column p a:active {
	position: relative ; 
	top: 0 ; 
	left: 0 ; }



/* ********** MAIN ********** */

main > h2 {
	font-family: Raleway, Arial, serif;
	font-size: 24px ; 
	font-weight: 200 ; 
	font-style: italic ; 
	color: #000000 ; /* rgb(255,165,0) ; */ 
	text-align: left ; 
	line-height: 1 ; 	
	padding: 144px 0 0 0 ; 
	border: 0px solid black ; 
	margin: 0 24px 0 24px ; 
	letter-spacing: 6px ; 
	z-index: 1 ; 
	text-shadow: 1px 1px 4px rgba(0,0,0,0.5) ; }

main article.flex {
	display: -webkit-flex ; 
	-webkit-flex-wrap: wrap ; 
	-webkit-align-items: flex-start ; 

	display: flex ; 
	flex-wrap: wrap ; 
	align-items: flex-start ; 
	
	margin: 210px 0 0 0px ; }

main article.flex section {
	-webkit-flex-grow: 1 ; 
	-webkit-flex-shrink: 1 ; 

	flex-grow: 1 ; 
	flex-shrink: 1 ; 
	
	width: 458px ; 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 0 24px 60px 24px ;  }







section#leistungen article {
	clear: both ; }

section#leistungen article.intro {
	margin-top:  ; }

section#leistungen article.intro h2 {
	font-size: 24px ; 
	color: rgb(255,165,0) ; 
	margin: 0 ; }







section#leistungen article { 
	margin: 22px 8% 0 8% ; }

section#leistungen article h2 {	
	font-family: Raleway, Arial, serif;
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: normal ; 
	color: #000000 ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	text-align: left ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 18px 0 8px 0 ; }
	
section#leistungen article h2 span {
	display: none ; }


section#leistungen article h3 { 
	font-family: Raleway, Arial, serif;
	font-size: 18px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	text-align: left ; 
	color: #000000 ; 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 12px 0 0 0 ; }

main article h3 { 
	font-family: Raleway, Arial, serif;
	font-size: 18px ; 
	font-weight: normal ; 
	font-style: italic ; 
	letter-spacing: 0px ; 
	line-height: 1 ; 
	text-align: left ; 
	color: #FF0000 /* #43494F ; */ 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 12px 0 0 0 ; }



p, ul, figure, figcaption, section address {	
	font-size: 16px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 0px ; 
	line-height: 1.75 ; 
	text-align: left ; 
	color: #000000 /* 33393F */ ; 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 6px 0 0 0 ; }

section address {
	font-size: 13px ; 
	color: #FFFFFF ; 
	font-weight: normal ; 
	text-align: center ; 
	background: rgb(160,170,180) ; 
	padding: 6px 0 6px 0 ; 
	clear: both ; }

main address {
	margin-bottom: 57px ; }

p.kontakt {
	position: absolute ; 
	left: 50% ; }

figure figcaption  { 
	line-height: 1 ; }

div.column {
	padding: 0 0 6px 0 ; 
	border: 0px solid red ; 
	margin: 0 0 0 0px ; 
	-webkit-column-count: 2 ; 
	-moz-column-count: 2 ; 
	-ms-column-count: 2 ; 
	-o-column-count: 2 ; 
	column-count: 2 ; 

	-webkit-column-width: 360px ; 
	-moz-column-width: 360px ; 
	-ms-column-width: 360px ; 
	-o-column-width: 360px ; 
	column-width: 360px ; 

	-webkit-column-gap: 36px ; 
	-moz-column-gap: 36px ; 
	-ms-column-gap: 36px ; 
	-o-column-gap: 36px ; 
	column-gap: 36px ; } 

section#leistungen article div.column p:first-child {
	margin-top: 0 ; }

section#leistungen article p {
	margin: 6px 0 6px 0 ; 
	text-align: justify ; }

section#leistungen article ul  {
	margin: 6px 0 6px 24px ; }









section#leistungen article { 
	border: 0 ; 
	margin: 22px 8% 0 8% ; }


section#leistungen article.intro {
	margin-top: 24px ; 
	border: 0px solid red ; 
	min-height: 1px ; }


main article.intro h2 {
	font-size: 36px ; 
	color: #43494F /* rgb(255,165,0) */ ; 
	margin: 0 ; }

main article.intro2 {
	margin-bottom: 48px ; }

 
main article h2 {  
	font-family: Raleway, Arial, serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	text-align: left ; 
	padding: 0 ; 
	margin: 0 ; }

main article h2 {
	color: #43494F /* #43494F */ ; 
	border: 0px solid black ; 
	margin: 8px 0 8px 0 ; }

main address {
	margin-bottom: 57px ; }

main article div.column p:first-child {
	margin-top: 0 ; }


main article p {
	margin: 6px 0 6px 0 ; }

main article ul  {
	margin: 6px 0 6px 24px ; }


/* ********** LEISTUNGEN POP-UP ********** */

label {	
	font-family: Raleway, Arial, serif;
	font-size: 18px ; 
	font-weight: normal ; 
	font-style: normal ; 
	color: #000000 ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	border: 0 ; 
	display: block ; 
	cursor: pointer ; 
	padding: 4px 0 4px 24px ; 
	border-radius: 12px ; 
	border: 0 ; 
	margin: 0 -24px 0px -24px ; 
	background: #D3D9DF ; }

label span.ein, label span.aus {
	position: absolute ; 
	right: 8% ; }

label span.ein span, label span.aus span {
	display: none ; 
	font-size: 14px ; }

label:hover span.ein span, label:hover span.aus span {
	display: inline-block ; 
	font-weight: normal ; 
	color: #000000 ; }

input[type=checkbox]:checked + label { 
	background: #93999F ; 
	color: #FFFFFF ; } 

input[type=checkbox]:checked + label:hover { 
	color: #000000 ; } 


label:hover, 
input[type=checkbox]:checked + label:hover { 
	background: rgb(165,255,0) ; }

label:active, 
input[type=checkbox]:checked + label:active { 
	background: rgb(255,0,165) ; }

label, 
label:hover, 
label span.aus, 
input[type=checkbox], 
input[type=checkbox]:checked , 
label span.ein, 
input[type=checkbox]:checked + label span.aus, 
input[type=checkbox]:checked + label span.ein {
	-webkit-transition: all 0.4s ease ; 
	-moz-transition: all 0.4s ease ;  
	-ms-transition: all 0.4s ease ; 
	-o-transition: all 0.4s ease ;
	transition: all 0.4s ease ; }

label:active {
	-webkit-transition: all 0s linear ; 
	-moz-transition: all 0s linear ; 
	-ms-transition: all 0s linear ;  
	-o-transition: all 0s linear ; 
	transition: all 0s linear ; }

/*
label:hover, 
label:active {
	box-shadow: inset 0 0 12px rgba(20,20,20,0.95) ; } */

/*
label {
	box-shadow: 0 0 12px rgba(0,0,0,0,67) ; } */


input[type=checkbox], 
label span.ein, 
input[type=checkbox]:checked + label span.aus { 
	display: none ; } 

input[type=checkbox]:checked + label span.ein
{	display: inline-block ; } 

/* Default */
div#content1, div#content1a, div#content2, div#content3, div#content4, div#content5, div#content6, div#content7, div#content8 {
	overflow: hidden ; 
/*	overflow-x: hidden ; */
	padding: 0 ; 
	margin: 0 ; }

/* Checked */
input[type=checkbox]:checked ~ div.inhalt {
	height: auto ; 
/* overflow-x: visible ; */
	margin-bottom: 48px ; 
/*	-webkit-transition: all 3s  ; 
	-moz-transition: all 3s  ; 
	-o-transition: all 3s  ; 
	-ms-transition: all 3s  ; 
	transition: all 3s ; */ 
	border: 0px solid black ; }

#content1, div#content1a, #content2, #content3, #content4, #content5, #content6, #content7, #content8  {
    display: none ; 
    background: #FFFFFF ; }


article div#content1, article div#content1a, article div#content2, article div#content3, article div#content4, article div#content5, article div#content6, article div#content7, article div#content8 {
	padding-left: 24px ; 
	padding-right: 24px ; 
	margin-left: -24px ; 
	margin-right: -24px ; }



/* ********** SECTIONS ********** */

section#leistungen header,
section#referenzen header,  
section#impressum header {
	border: 0px solid red ; 
	margin: 0 0 0 0 ; }

section#leistungen header h1,
section#referenzen header h1,
section#impressum header h1 {
	font-family: Raleway, Arial, serif; 
	font-size: 60px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 0px ; 
	line-height: 1 ; 
	text-align: left ; 
	color: #FFFFFF ; 
	background: rgb(160,170,0) ; 
	padding: 24px 0 24px 8% ; 
	border: 0px solid black ; 
	margin: 0 ; }


section#impressum header h1 {
	background: rgb(160,0,0) /* rgb(250,214,47) */ /* (250,54,102) */ ; } 


section#impressum header h1 {
	padding: 24px 0 0 8% ; }




section#referenzen header h2,
section#impressum header h2 {
	font-family: Raleway, Arial, serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 1px ; 
	line-height: 1.5 ; 
	text-align: left ; 
	color: #FFFFFF ; 
	padding: 0 0 0 8% ; 
	border: 0px solid black ; 
	margin: 0 ; 
	background: rgb(160,170,0) ; }

section#impressum header h2 {
	background: rgb(160,0,0) ; }

section nav {
	position: absolute ; 
	right: 3% ; }

section nav.bottom {
	position: relative ; 
	clear: both ; 
	height: 120px ; 
	padding-top: 12px ; }

section nav.bottom2 {
	position: relative ; 
	clear: both ; 
	height: 48px ; 
	margin-top: 12px ; }

section nav.bottom p,
section nav.bottom2 p {
	text-align: right ; }


/* ********** SECTIONS ARTICLES ********** */

/* section#referenzen article, */
 section#impressum article {
	clear: both ; 
	background: /* #FFFFFF */ ; 
	border: 0px solid red ; }
 
section#impressum article {
	margin: 48px 8% 12px 8% ; }

section#referenzen article {
	margin: 36px 8% 0 8% ; }
	
section#referenzen article.intro {
	margin-top: 48px ; 
	border: 0px solid red ; 
	min-height: 1px ; }

section#referenzen article.intro h2 {
	font-size: 24px ; 
	color: rgb(255,165,0) ; 
	margin: 0 ; }



section#referenzen article h2 {	
	font-family: Raleway, Arial, serif ; 
	font-size: 24px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	text-align: left ; 
	padding: 0 ; 
	margin: 0 ; }
 


section#referenzen article h3 { 
	font-family: Raleway, Arial, serif ; 
	font-size: 18px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 1px ; 
	line-height: 1 ; 
	text-align: left ; 
	color: #43494F ; 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 12px 0 0 0 ; }

section#referenzen article h3 { 
	margin: 0 ; 
	clear: both ; }

section#kontakt article p.map {
	margin-top: 48px ; }

p, ul, figure, figcaption, section address {	
	font-size: 14px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 1px ; 
	line-height: 1.75 ; 
	text-align: left ; 
	color: #000000 ; 
	padding: 0 ; 
	border: 0px solid black ; 
	margin: 6px 0 0 0 ; }



section address {
	font-family: Raleway, Arial, serif ;
	bottom: 0 ; 
	font-size: 13px ; 
	color: #FFFFFF ; 
	font-weight: normal ; 
	text-align: center ; 
	background: rgb(160,170,180) ; 
	padding: 6px 0 6px 0 ; 
	clear: both ; }



p.kontakt {
	position: absolute ; 
	left: 50% ; }

figure figcaption  { 
	line-height: 1 ; }

div.column {
	padding: 0 0 6px 0 ; 
	border: 0px solid red ; 
	margin: 0 0 0 0px ; 
	-webkit-column-count: 2 ; 
	-moz-column-count: 2 ; 
	-ms-column-count: 2 ; 
	-o-column-count: 2 ; 
	column-count: 2 ; 
	-webkit-column-gap: 36px ; 
	-moz-column-gap: 36px ; 
	-ms-column-gap: 36px ; 
	-o-column-gap: 36px ; 
	column-gap: 36px ; } 

 


section#referenzen article p {
	margin: 6px 0 6px 0 ; }


section#referenzen article p:last-child {
	clear: both ; }



figure {
	display: inline-block ; 
	text-align: center ; 
	border: 0px solid black ; 
	padding: 0 ; 
	margin: 0 18px 6px 0 ; }

figcaption {
	margin: 0 ; 
	text-align: center ; }

section#referenzen article div {
	position: relative ; 
	top: 0 ; 
	left: 0 ; 
	float: left ; 
/*	width: 400px ; */
/*	height: 250px ; */
	margin: 0  ; }

section#referenzen article div img {
	position: absolute ; 
/*	width: 400px ; */
/*	height: 250px ; */
	z-index: 1 ; }

section#referenzen article div img:hover {
	position: absolute ; 
	z-index: 10 ; 
	top: 0 ; 
	left: 0 ; 
	width: 640px ; 
	height: 400px ; }

section#referenzen article img, 
section#referenzen article img:hover {
	-webkit-transition: height 0.4s ease, width 0.4s ease, box-shadow 0.4s ease ; 
	-moz-transition: height 0.4s ease, width 0.4s ease, box-shadow 0.4s ease ; 
	-ms-transition: height 0.4s ease, width 0.4s ease, box-shadow 0.4s ease ; 
	-o-transition: height 0.4s ease, width 0.4s ease, box-shadow 0.4s ease ; 
	transition: height 0.4s ease, width 0.4s ease, box-shadow 0.4s ease ; } 



/* ********** SECTION POP-UP ********** */

section#leistungen,
section#referenzen, 
section#impressum {
	position: fixed ;  
	background: #FFFFFF ; 
	overflow: auto ; 
	z-index: 1 ; 
	box-shadow:	
		0 0 12px rgba(0,0,0,0.75) ; 
	border-radius: 36px ; }


section#leistungen {
	background: #FFFFFF ; 
	top: 0 ; 
	left: 24px ; 
	right: 24px ; 
	bottom: 100% ; }
section#leistungen:target {
	top: 96px ; 
	bottom: 57px ; }


section#referenzen {
	top: 96px ; 
	left: -100% ; 
	width: 100% - calc(100% - 48px) ; 
	bottom: 57px ; }
section#referenzen:target {
	left: 24px ; } 





section#leistungen,
section#referenzen, 
section#impressum, 
section#leistungen:target,
section#referenzen:target, 
section#impressum:target {
	-webkit-transition: all 1s ease ; 
	-moz-transition: all 1s ease ; 
	-o-transition: all 1s ease ; 
	-ms-transition: all 1s ease ; 
	transition: all 1s ease ; }

section#referenzen:target, 
section#impressum:target {
	z-index: 2 ; }


/*
section#referenzen:target {
	transform: rotate(360deg) ; }

section#referenzen,
section#referenzen:target {
	-webkit-transition: all 2s ease ; 
	-moz-transition: all 2s ease ; 
	-o-transition: all 2s ease ; 
	-ms-transition: all 2s ease ; 
	transition: all 2s ease ; } */


section#referenzen {
	top: 96px ; 
	left: -100% ; 
	width: calc(100% - 48px)  ; 
	bottom: 57px ; }
section#referenzen:target {
	left: 24px ; 
	z-index: 2 ; }





section#impressum {
	top: calc(100% - 57px) ; 
	bottom: 57px ; 
	left: 15% ; 
	right: 15% ; 
	box-sizing: border-box ; 
	z-index: 1 ; 
	box-shadow:	
		0 0 0px rgba(10,30,50,1), }
section#impressum:target {
	top: 96px ; 
	bottom: 57px ; 
	left: 15% ; 
	right: 15% ; 
	z-index: 3 ; 
	box-shadow:	 
		0 0 12px rgba(10,30,50,1) ; }



section#referenzen,
section#referenzen:target {
	z-index: 1 ; }

section#referenzen:target img {
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5) ; }


section#leistungen,
section#leistungen:target {
	z-index: 2 ; }

section#impressum {
	z-index: 3 ; }





img.mini1, img.mini2 {
	width: 46% ; 
	width: 23% ; 
	width: 33% ; 
	min-width: 120px ; 
	max-width: 240px ; 
	height: auto ; }

img.mini3 {
	width: 33% ; 
	width: 16.5% ; 
	width: 25% ; 
	min-width: 86px ; 
	max-width: 172px ; 
	height: auto ; } 

img.mini1, img.mini2, img.mini3 {
	float: left ; 
	border: 0px solid red ; 
	margin: 0 8% 6px 0 ; }





/* ********** FOOTER ********** */

footer {
	position: fixed ; 
	bottom: 0 ; 
	left: 0 ; 
	right: 0 ; 
	padding: 24px 24px 12px 24px ; 
	width: auto ; 
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,1)) ; 
	z-index: 4 ; }

footer address {
	font-size: 12px ; 
	font-weight: normal ; 
	font-style: normal ; 
	letter-spacing: 0px ; 
	width: 100% ; 
	line-height: 1 ; 
	text-align: left ; 
	color: #FFFFFF ; 
	padding: 0 ; 
	margin: 0 ; }

footer address span { 
	display: inline-block ; 
	font-weight: normal ; 
	background: rgba(10,30,40,1) ; 
	padding: 2px 6px 2px 6px ; 
	border-radius: 8px ; }




/* ********** NEU REFERENZEN BLACK - EINGLIEDERN ********** */



section#referenzen div.articles {
	margin: 0 8% 0 8% ; 
	text-align: center ; 
	border: 0px solid red ; }


section#referenzen article h2,
section#referenzen article h3,
section#referenzen article h4,
section#referenzen article p,
section#referenzen nav p span {
	color: #939699 ; }




section#referenzen article.ref h2,
section#referenzen article.ref h3 {
	color: #939699 ; 
	-webkit-transition: all 0.4s ease ; 
	-moz-transition: all 0.4s ease ; 
	-ms-transition: all 0.4s ease ; 
	-o-transition: all 0.4s ease ; 
	transition: all 0.4s ease ; }

section#referenzen article.ref:hover h2,
section#referenzen article.ref:hover h3 {
	color: #333639 ; 
	-webkit-transition: all 0.4s ease ; 
	-moz-transition: all 0.4s ease ; 
	-ms-transition: all 0.4s ease ; 
	-o-transition: all 0.4s ease ; 
	transition: all 0.4s ease ; }



section#referenzen > h1, 
section#referenzen address , 
section#referenzen header h1,
section#referenzen header h2 {
	color: #131619 ; }


section#referenzen header h1 {
	background: rgb(0,170,180) ; }


section#referenzen div.articles article.ref p,
section#referenzen div.articles article.ref h4 {
	color: #33393F ; }

section#referenzen div.articles article.ref p {
	margin: 6px 0 0 0 ; 
	line-height: 1.5 ; }

section#referenzen {
	background: rgba(19,22,25,1) ; }



section#referenzen article.ref h2 { 
	padding: 0 ; 
	border: 0 ; 
	margin-bottom: 0 ; }

section#referenzen article.ref h3 {
	padding: 0 ; 
	border: 0px solid red ; 
	margin: 168px 0 0 0 ; }

section#referenzen article.ref:hover h3 {
	margin: 264px 0 0 0 ; }

section#referenzen article.ref {
	margin: 36px 18px 0 18px ; 
	border: 0px solid blue ; 
	width: 256px ; 
	height: 210px ; 
	display: inline-block ; }

section#referenzen article.ref div {
	position: relative ; 
	width: 256px ; 
	min-height: 210px ; 
	padding: 0 ; 
	border: 0px solid #131619 ; 
	margin: 0 ; 
	background: #131619 ; 
	z-index: 1 ; }

section#referenzen article.ref:hover div {
	width: 404px ; 
	border: 12px solid #FFFFFF ; 
	border-radius: 12px ; 
	border-top: 6px solid #FFFFFF ; 
	margin: -72px 0 0 -86px ; 
	background: #FFFFFF ; 
	box-shadow: 0 0 24px rgba(0,0,0,1) ; 
	z-index: 10 ; }

section#referenzen article.ref div img {
	position: absolute ; 
	top: 28px ; 
	left: 0px ; 
	width: 256px ; 
	height: 160px ; 
	padding: 0 ; 
	border: 0 ; 
	margin: 0 ; }

section#referenzen article.ref:hover div img {
	width: 404px ; 
	height: 252px ; }

section#referenzen article.ref section {
	overflow: hidden ; 
	border: 0px solid FFFFFF ; 
	margin: -190px 0 0 0 ; 
	width: 256px ; 
	height: 0 ; 
	z-index: -1 ; }

section#referenzen article.ref:hover section { 
	margin: 0 0 0 0 ; 
	width: 404px ; 
	height: auto ; 
	z-index: 9 ; 
	padding: 0 ; }




section#referenzen article.ref h3, 
section#referenzen article.ref:hover h3,
section#referenzen article.ref div, 
section#referenzen article.ref:hover div, 
section#referenzen article.ref div img, 
section#referenzen article.ref:hover div img,
section#referenzen article.ref section, 
section#referenzen article.ref:hover section {
	-webkit-transition: all 0.4s ease ; 
	-moz-transition: all 0.4s ease ; 
	-ms-transition: all 0.4s ease ; 
	-o-transition: all 0.4s ease ; 
	transition: all 0.4s ease ; }








section#referenzen article.ref div img:nth-child(3) {
	opacity: 0 ; }

section#referenzen article.ref div img:nth-child(4) {
	opacity: 0 ; }

section#referenzen article.ref:hover div img:nth-child(3)
{	-webkit-animation-duration: 6s ; 
	-moz-animation-duration: 6s ; 
	-ms-animation-duration: 6s ; 
	-o-animation-duration: 6s ; 
	animation-duration: 6s ; 

	-webkit-animation-name: child2 ; 
	-moz-animation-name: child2 ; 
	-ms-animation-name: child2 ; 
	-o-animation-name: child2 ; 
	animation-name: child2 ; 
	
	-webkit-animation-iteration-count: infinite ; 
	-moz-animation-iteration-count: infinite ; 
	-ms-animation-iteration-count: infinite ; 
	-o-animation-iteration-count: infinite ; 
	animation-iteration-count: infinite ; 
	
	-webkit-animation-timing-function: ease ; 
	-moz-animation-timing-function: ease ; 
	-ms-animation-timing-function: ease ; 
	-o-animation-timing-function: ease ;  
	animation-timing-function: ease ; 
	
	-webkit-animation-delay: 0s ; 
	-moz-animation-delay: 0s ; 
	-ms-animation-delay: 0s ; 
	-o-animation-delay: 0s ; 
	animation-delay: 0s ; }

@keyframes child2 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 1 ; } 
	53% { opacity: 1 ; } 
	67% { opacity: 0 ; } 
	87% { opacity: 0 ; } 
	100% { opacity: 0 ; } }

@-webkit-keyframes child2 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 1 ; } 
	53% { opacity: 1 ; } 
	67% { opacity: 0 ; } 
	87% { opacity: 0 ; } 
	100% { opacity: 0 ; } }

@-moz-keyframes child2 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 1 ; } 
	53% { opacity: 1 ; } 
	67% { opacity: 0 ; } 
	87% { opacity: 0 ; } 
	100% { opacity: 0 ; } }

@-ms-keyframes child2 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 1 ; } 
	53% { opacity: 1 ; } 
	67% { opacity: 0 ; } 
	87% { opacity: 0 ; } 
	100% { opacity: 0 ; } }

@-o-keyframes child2 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 1 ; } 
	53% { opacity: 1 ; } 
	67% { opacity: 0 ; } 
	87% { opacity: 0 ; } 
	100% { opacity: 0 ; } }



section#referenzen article.ref:hover div img:nth-child(4)
{	-webkit-animation-duration: 6s ; 
	-moz-animation-duration: 6s ; 
	-ms-animation-duration: 6s ; 
	-o-animation-duration: 6s ; 
	animation-duration: 6s ; 

	-webkit-animation-name: child3 ; 
	-moz-animation-name: child3 ; 
	-ms-animation-name: child3 ; 
	-o-animation-name: child3 ; 
	animation-name: child3 ; 
	
	-webkit-animation-iteration-count: infinite ; 
	-moz-animation-iteration-count: infinite ; 
	-ms-animation-iteration-count: infinite ; 
	-o-animation-iteration-count: infinite ; 
	animation-iteration-count: infinite ; 
	
	-webkit-animation-timing-function: ease ; 
	-moz-animation-timing-function: ease ; 
	-ms-animation-timing-function: ease ; 
	-o-animation-timing-function: ease ;  
	animation-timing-function: ease ; 
	
	-webkit-animation-delay: 0s ; 
	-moz-animation-delay: 0s ; 
	-ms-animation-delay: 0s ; 
	-o-animation-delay: 0s ; 
	animation-delay: 0s ; }

@keyframes child3 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 0 ; } 
	53% { opacity: 0 ; }
	67% { opacity: 1 ; } 
	87% { opacity: 1 ; } 
	100% { opacity: 0 ; } }

@-webkit-keyframes child3 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 0 ; } 
	53% { opacity: 0 ; }
	67% { opacity: 1 ; } 
	87% { opacity: 1 ; } 
	100% { opacity: 0 ; } }

@-moz-keyframes child3 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 0 ; } 
	53% { opacity: 0 ; } 
	67% { opacity: 1 ; } 
	87% { opacity: 1 ; } 
	100% { opacity: 0 ; } }

@-ms-keyframes child3 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 0 ; } 
	53% { opacity: 0 ; } 
	67% { opacity: 1 ; } 
	87% { opacity: 1 ; } 
	100% { opacity: 0 ; } }

@-o-keyframes child3 {
	0% { opacity: 0 ; }
	20% { opacity: 0 ; } 
	33% { opacity: 0 ; } 
	53% { opacity: 0 ; } 
	67% { opacity: 1 ; } 
	87% { opacity: 1 ; } 
	100% { opacity: 0 ; } }


section#123,
section#123:target {
	position: fixed ; 
	top: 50% ; 
	left: 50% ; 
	height: 0 ; 
	width: 0 ; 
	z-index: 0 ; }