@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600');

body {
	margin: 0 auto;
    max-width: 80em;
	display: flex;
	flex-flow: row wrap;	
	background-image: url(../images/background3.jpg);
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
}

a:link{color:#cc0000;}
a:visited{color:#990101;}
a:hover{color:#FF0000;}

header,
.logo,
.images,
main,
article,
footer {
	flex: 1 1 100%;
}
h1 {
	padding-bottom: 10px;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.2em;
	color: #434343;
}

/*---------------------------------- HEAD ----------------------------------*/

header {
	background: #F1F3F4;
	display: flex;
	flex-flow: row wrap;
	flex: 1 1 100%;
}
.logo {
	box-sizing: border-box;
	background-color: #485058;
	border-bottom: 2px solid #ffffff;	
	height: 50px;
}
#logo_big {
	width: 200px;
	z-index: 1;
	position: relative;
	left: 1em; top: -3em;
}
#logo_solo {
	width: 0px;
	z-index: 1;
	position: relative;
	left: -20em; top: -30em;
}

/*---------------------------------- NAVI ----------------------------------*/
.space {
	box-sizing: border-box;
	background-color: #333a42;
	border-bottom: 1px solid #ffffff;	
	flex: 25 0 auto;
}
nav {
	background-color: #333a42;
	border-bottom: 1px solid #ffffff;
	flex: 1 10 680px;
	font-weight: 300;
}
*{ 
	margin: 0; 
 	padding: 0;
  	box-sizing: border-box;
}
.menu a {
	color: #FFFFFF;
	background: #333a42;
	height: 50px;
	padding: 0px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.4s;
}

.menu a:hover {
	background: #cc0000;
}

.menu ul {
	list-style: none;
	display: flex;
}

.menu li {
	width: 160px;
	text-align: center;
	position: relative;
	white-space: nowrap; 						/* Der Münüpunkt über uns, soll nicht umgebrochen werden */
	justify-content: space-around;
}
#small {
	width: 100px;
}
#active {
	height: 50px;
	display: flex;
	align-items: center;
	color: #FFFFFF;
	background: #cc0000;
}
#small_active {
	width: 100px;
	height: 50px;
	display: flex;
	align-items: center;
	color: #FFFFFF;
	background: #cc0000;
}

/*---------------------------------- MAIN ----------------------------------*/

.image {	
	width: 100%;
	max-height: 450px;
	overflow: hidden;
    object-fit: cover;
}
.tast .image {
	max-height: unset;
}
.images.about {
	position: relative;
	overflow: hidden;
	max-height: 450px;
}
.about .image {
	max-height: unset;
}
#top {
	object-position: top;
}
main {
	background-color: #FFFFFF;
	padding: 20px;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;		
}
article {
	background-color: #FFFFFF;
	padding: 10px;
	display: flex; 
	flex-flow: row wrap; 
}
.sector {
	padding: 20px;
	margin: 5px;
	background-color: #e0e0e0;
	border-radius: 1em;
	flex: 1 1 100%;
	text-align: center;
	display: flex;
}
.column {
	flex: 1 1 0%;
	margin: 20px 20px;
	text-align: justify;
	font-weight: 300;
	line-height: 25px;
	color: #454545;
}
.column_image {
	flex: 1 1 30%;
	margin: 20px 20px;
}
.column_imagetext {
	flex: 1 1 70%;
	margin: 20px 20px;
	text-align: justify;
	font-weight: 300;
	line-height: 25px;
	color: #454545;
}
.column_datenschutz {
	flex: 1 1 100%;
	margin: 2% 5%;
	text-align: justify;
}
	/*------------ Referenzen ------------*/
.headline_actual {
	flex: 1 0 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content:center; 
	align-content: flex-start;	
}
.column_actual {
	flex: 1 1 31%;
	flex: 1 1 100%;
	margin: 10px;
}
.column_projects {
	flex: 1 1 50%;
	padding: 20px;
	font-weight: 300;
	line-height: 25px;
	color: #454545;
	display: flex;
	flex-flow: row wrap;
	justify-content:center; 
	align-content: flex-start;
}
.column_projects_past {
	flex: 1 1 50%;
	padding: 20px;
	font-weight: 300;
	line-height: 25px;
	color: #454545;
	display: flex;
	flex-flow: row wrap;
	justify-content:center; 
	align-content: flex-start;
}
.column_projects_past>ul {	
	text-align: left;
}
.column_space {
	flex: 1 1 auto;
}
#headline_projects {
	flex: 1 1 100%;
	padding-bottom: 15px;
}
.img_description {
	font-weight: 400;
	font-size: 1em;
}
.sector_image {	
	width: 100%;
	border-radius: 0.5em;
}
.sector1 {
	padding: 20px;
	margin: 5px;
	background-color: #e0e0e0;
	border-radius: 1em;
	flex-flow: wrap;
	flex: 1 1 100%;
	text-align: center;
	display: flex;
}
.sector2 {
	padding: 20px;
	margin: 5px;
	background-color: #e0e0e0;
	border-radius: 1em;
	flex: 1 1 49%;
	text-align: center;
	display: flex;
}
	/*------------ Kontakt ------------*/
.contact {
	padding: 20px;
	margin: 5px;
	background-color: #e0e0e0;
	border-radius: 1em;
	flex: wrap;
	text-align: center;
}
.portrait {
	width: 200px;
	border-radius: 0.5em;
	margin-bottom: 10px;
}
.name {
	text-transform: uppercase;
	font-weight: 500;
}

.pictogramme {
	text-align: center;
	display: inline-block;
	width: 90%;
	margin: 50px 5%;
}
.pictogramm {
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin: auto 5%;
	height: 180px;
}

.pictogramm img {
	display: inline-block;
	width: 120px;
	margin: 10px 0px;
	opacity: 0.85;
}

.pictogramm span {
	position: relative;
	top: -170px;
	height: 160px;
	display: block;
display:none;
	font-weight: 900;
	font-size: 2rem;
	word-break: break-word;
	text-transform: uppercase;
	letter-spacing: -2px;
	color: rgb(204,0,0);
	text-shadow: 0 0 2px rgba(0,0,0,0.45);
	opacity: 0.45;
	width: 160px;
	vertical-align: middle;
	margin: 10px 0px;
}

/*---------------------------------- FOOT ----------------------------------*/
.trinity {
	padding: 20px;
	flex: 1 1 200px;
	background: #485058;
	align-content: center;
	text-align: center;
	color: #FFFFFF;
	justify-content: center;
	font-weight: 300;
	height: auto;
}
.trinity_headline {	
	margin-bottom: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.trinity_pas {
	font-size: 24px;
}
.zertifikate {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.img_certificate {
	padding: 5px;
}

/*---------------------------------- IMPRESSUM ----------------------------------*/
footer {
	background: #333a42;
	display: flex;
	flex-flow: row wrap;
	flex: 1 1 100%;
	justify-content: center;
	color: #FFFFFF;
	padding: 20px;
}
.impressum {
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	text-decoration: none;
}
.impressum:link,
.impressum:visited{
   color: #ffffff;
}
.impressum:hover {
   color: #a6a09d;
}
.mail:link,
.mail:visited{
	color: #ffffff;	
}
.mail:hover {
   color: #a6a09d;
}
.owl-prev,
.owl-next  {
	width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    overflow: hidden;
    left: 10px;
    top: 50%;
}
.owl-next {
	left: unset;
	right: 10px;
}
.owl-prev span,
.owl-next span {
	font-size: 100px;
    color: white;
    top: -50px;
    position: relative;
}

/* --------------------------------------------------------------------------- 930 --------------------------------------------------------------------------- */

@media (min-width: 751px) and (max-width: 930px) {

	/*---------------------------------- HEAD ----------------------------------*/
	#logo_big {
		width: 0px;
		left: -20em; top: -30em;
	}
	#logo_solo {
		width: 41px;
		left: 47%; top: 3px;
	}
	
	/*---------------------------------- NAVI ----------------------------------*/
	.menu a {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.menu ul {
		list-style: none;
		display: flex;
	}
	.menu li {
		width: auto;
		flex: 1 1 100%;
	}
	.space {
		flex: 0 0 0%;
	}
	nav {
		flex: 1 1 100%;
	}
	#small {
		width: auto;
		flex: 1 1 100%;
	}
	#small_active {
		width: auto;		
		flex: 1 1 100%;
		background: #cc0000;
	}
}

/* --------------------------------------------------------------------------- 750 --------------------------------------------------------------------------- */

@media (min-width: 551px) and (max-width: 750px) {
	
	h1 {
		letter-spacing: 0em;
		display: flex;
  		align-items: center;
  		justify-content: center;
	}

	/*---------------------------------- HEAD ----------------------------------*/
	#logo_big {
		width: 0px;
		left: -20em; top: -30em;
	}
	#logo_solo {
		width: 41px;
		left: 45%; top: 3px;
	}
	
	/*---------------------------------- NAVI ----------------------------------*/
	.menu a {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.menu ul {
		list-style: none;
		display: flex;
	}
	.menu li {
		width: auto;
		flex: 1 1 100%;
	}
	.space {
		flex: 0 0 0%;
	}
	nav {
		flex: 1 1 100%;
	}
	#small {
		width: auto;
		flex: 1 1 100%;
	}
	#small_active {
		width: auto;		
		flex: 1 1 100%;
		background: #cc0000;
	}
	
	/*---------------------------------- MAIN ----------------------------------*/
	article,
	.sector {
		flex-wrap: wrap;
	}
	.column {
		flex: 1 1 100%;
	}
	.column_projects {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------- 550 --------------------------------------------------------------------------- */

@media (min-width: 331px) and (max-width: 550px) {
	
	h1 {
		letter-spacing: 0.05em;
		font-size: 95%;
		font-weight: 500;
		display: flex;
  		align-items: center;
  		justify-content: center;
	}

	/*---------------------------------- HEAD ----------------------------------*/
	.logo {
		order: -1;
		border-bottom: 1px solid #ffffff;	
	}
	#logo_big {
		width: 0px;
		left: -20em; top: -30em;
	}
	#logo_solo {
		width: 41px;
		left: 45%; top: 3px;
	}
	
	/*---------------------------------- NAVI ----------------------------------*/
	.space {
		flex: 0 0 0%;
	}
	.nav {
		border-bottom: 1px solid #FFFFFF;	
	}
	.menu ul {
		display: block;
	}
	.menu li {
		width: 100%;
		flex: wrap;
	}
	.menu a {
		border-bottom: 1px solid #ffffff;	
	}
	#small{
		width: 100%;
	}
	#small_active {
		width: auto;		
		background: #cc0000;
	}

	/*---------------------------------- MAIN ----------------------------------*/
	article,
	.sector {
		flex-wrap: wrap;
	}
	.column {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------- 330 --------------------------------------------------------------------------- */
		
@media (max-width: 330px) {
	
	h1 {
		letter-spacing: 0em;
		font-size: 80%;
		font-weight: 500;
		display: flex;
  		align-items: center;
  		justify-content: center;
	}
	
	/*---------------------------------- HEAD ----------------------------------*/

	.logo {
		order: -1;
		border-bottom: 1px solid #ffffff;	
	}
	#logo_big {
		width: 0px;
		left: -20em; top: -30em;
	}
	#logo_solo {
		width: 41px;
		left: 42%; top: 3px;
	}

	/*---------------------------------- NAVI ----------------------------------*/
	.space {
		flex: 0 0 0%;
	}
	.nav {
		border-bottom: 0px solid #FFFFFF;	
	}
	.menu ul {
		display: block;
	}
	.menu li {
		width: 100%;
	}
	.menu a {
		border-bottom: 1px solid #ffffff;	
	}
	#small{
		width: 100%;
	}
	#small_active {
		width: auto;	
		background: #cc0000;
	}

	/*---------------------------------- MAIN ----------------------------------*/
	article,
	.sector {
		flex-wrap: wrap;
	}
	.column {
		flex: 1 1 100%;
	}

	/*---------------------------------- FOOT ----------------------------------*/
	.zertifikate {
		flex-wrap: wrap;
	}
}