/*------------------------FUNDAMENTALS------------------------*/

* {
	box-sizing: border-box; 						/*Anzeige Generell*/
	-webkit-box-sizing: border-box; 				/*Anzeige Webkit-Browser*/
	-moz-box-sizing: border-box; 					/*Anzeige Mozilla*/
	-o-box-sizing: border-box; 						/*Anzeige Opera*/
}

body {												/*Formatierung Text*/
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.5;
}

a {													/*Formatierung Hyperlinks*/
	text-decoration: none;
	color: #014975;
}

h1 {												/*Formatierung h1-Überschriften*/
	font-weight: 700;
	font-size: 30px;
	text-transform: uppercase;
	color: #014975;
}

h2 {												/*Formatierung h2-Überschriften*/
	font-weight: 700;
	font-size: 23px;
	text-transform: uppercase;
	color: #014975;
}

h3 {												/*Formatierung h3-Überschriften*/
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
}

/*------------------------GENERAL DESIGN ELEMENTS------------------------*/

/*---HEADER---*/

.main-header-container {
	background: #fff;
	border-bottom: 2px solid;
	border-color: #014975;
}

.main-header .logo {
	float: left;
}

.main-header nav {
	float: right;
}

.main-header ul {								
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-header li {
	float: left;
}

.main-header nav a {
	display: block;
	padding: 10px;
	text-transform: uppercase;
	font-size: 23px;
	font-weight: 300;
	color: #2e2e2e;
	border-bottom: 2px solid transparent;
}

.main-header nav a:hover {					
	border-color: #69b0cf;
}

.main-header nav .current a {	
	border-color: #014975;
}

/*---FOOTER---*/

.copyright,
.legal {
	float: right;
	background: #2e2e2e;
	color: #fff;
	padding: 10px;
}

.legal {
	width: 50%;
	text-align: right;
}

.copyright {
	width: 50%;
}

.legal-container a {
	color: #fff;
	font-weight: 700;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.legal-container a:hover {
	border-color: #69b0cf;
}

.legal .underlined {
	border-color: #014975
}

/*------------------------HOME------------------------*/

.home-video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: -1;
}

.home-overlay {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #2e2e2e;
	z-index: -1;
	opacity: 0.7;
}
	
.home-language,
.home-content {
	max-width: 1020px;
	padding-top: 20px;
	margin: 0 auto;
	z-index: 2;
}

.home-language {
	padding-right: 20px;
	padding-bottom: 50px;
}

.home-language a {
	float: right;
}

.home-logo {
	font-family: Merienda;
	font-size: 30px;
	color: #fff;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.home-buttons {
	text-align: center;
	color: #fff;
}

.home-buttons article {
	float: left;
	width: 20%;
	overflow: hidden;
	padding: 20px;
}

.home-buttons article .button-home {
	display: block;
}

/*------------------------PROFILE------------------------*/

.main-header,
.profile-content,
.main-footer {
	max-width: 960px;
	padding: 20px;
	margin: 0 auto;
}

.profile-content-container {
	background: transparent url(../img/layout/background.png) bottom center no-repeat;
	height: 770px;
	border-bottom: 2px solid;
	border-color: #014975;
}

.independant,
.profile-space1,
.experienced {
	float: right;
}

.independant,
.experienced {
	width: 49%;
	text-align: center;
	background-color: #fff;
	border: 1px solid;
	border-color: #014975;
}

.profile-space1 {
	width: 2%;
	padding-top: 1px;
}

.profile-content-row2 {
	height: 19px;
}

.competent,
.profile-space2,
.innovative {
	float: right;
}

.competent,
.innovative {
	width: 49%;
	text-align: center;
	background-color: #fff;
	border: 1px solid;
	border-color: #014975;
}

.profile-space2 {
	width: 2%;
	padding-top: 1px;
}

.profile-image {
	padding-top: 20px;
}

.profile-title {
	font-weight: 700;
	font-size: 23px;
	text-transform: uppercase;
	color: #014975;
	padding: 20px;
}

.profile-description {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

/*------------------------SERVICES------------------------*/

.main-header,
.services-content,
.main-footer {
	max-width: 960px;
	padding: 20px;
	margin: 0 auto;
}

.services-content-container {
	background: transparent url(../img/layout/background.png) bottom center no-repeat;
	height: 770px;
	border-bottom: 2px solid;
	border-color: #014975;
}

.services-content li {
	float: left;
	list-style: none;
	padding-top: 1px;
}

.services-design,
.services-planning,
.services-management {
	display: block;
	width: 32%;
}

.services-space {
	width: 2%;
}

.design-image {
	background: transparent url(../img/services/design.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.planning-image {
	background: transparent url(../img/services/planning.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.management-image {
	background: transparent url(../img/services/management.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.design-title,
.planning-title,
.management-title {
	background: #014975;
	text-transform: uppercase;
	text-align: center;
	font-weight: 700;
	color: #fff;
	padding: 10px;
}

.design-description,
.planning-description,
.management-description {
	height: 350px;
	background: #fff;
	text-align: left;
	line-height: 2;
	padding-top: 15px;
	padding-left: 15px;
	border: 1px solid;
	border-color: #014975;
}

/*------------------------PROJECTS------------------------*/

.main-header,
.projects-content,
.main-footer {
	max-width: 960px;
	padding: 20px;
	margin: 0 auto;
}

.projects-navigation {
	max-width: 960px;
	margin: 0 auto;
}

.projects-content-container {
	background: transparent url(../img/layout/background.png) bottom center no-repeat;
	height: 770px;
	border-bottom: 2px solid;
	border-color: #014975;
}

.projects-content li {
	float: left;
	list-style: none;
	padding-top: 1px;
}

.projects {
	display: block;
	width: 32%;
}

.projects-space {
	width: 2%;
}

.projects-image1 {
	background: transparent url(../img/projects/sc200.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
	text-transform: uppercase;
	text-align: left;
	padding-top: 170px;
	padding-left: 5px;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
}

.projects-image2 {
	background: transparent url(../img/projects/nts.gif) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image3 {
	background: transparent url(../img/projects/wos.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image4 {
	background: transparent url(../img/projects/sc300.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image5 {
	background: transparent url(../img/projects/ams2000.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
	text-transform: uppercase;
	text-align: left;
	padding-top: 170px;
	padding-left: 5px;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
}

.projects-image6 {
	background: transparent url(../img/projects/amtc.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image7 {
	background: transparent url(../img/projects/communicant.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
	text-transform: uppercase;
	text-align: left;
	padding-top: 170px;
	padding-left: 5px;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
}

.projects-image8 {
	background: transparent url(../img/projects/inotera.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
	text-transform: uppercase;
	text-align: left;
	padding-top: 170px;
	padding-left: 5px;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
}

.projects-image9 {
	background: transparent url(../img/projects/powerfab.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image10 {
	background: transparent url(../img/projects/poly.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image11 {
	background: transparent url(../img/projects/ve14.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image12 {
	background: transparent url(../img/projects/qag.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image13 {
	background: transparent url(../img/projects/IFX15_16.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image14 {
	background: transparent url(../img/projects/Siltronic.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image15 {
	background: transparent url(../img/projects/IFKM2.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
	text-transform: uppercase;
	text-align: left;
	padding-top: 170px;
	padding-left: 5px;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
}

.projects-image16 {
	background: transparent url(../img/projects/IFX_VI_B24.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image17 {
	background: transparent url(../img/projects/Siltronic_SIN.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image18 {
	background: transparent url(../img/projects/IFKM_HF.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image19 {
	background: transparent url(../img/projects/IFX_RGB_VE2.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image20 {
	background: transparent url(../img/projects/IFX_VI_VE22.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image21 {
	background: transparent url(../img/projects/IFX_RGB_B53.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image22 {
	background: transparent url(../img/projects/IFX_VI_VE22_2.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image23 {
	background: transparent url(../img/projects/IFX_VI_B25.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image24 {
	background: transparent url(../img/projects/IFX_RGB_DEK.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image25 {
	background: transparent url(../img/projects/IFKM_FAB2_UV.jpg) bottom center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image26 {
	background: transparent url(../img/projects/IFX_VI_RO.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image27 {
	background: transparent url(../img/projects/IFX_VI_GP300.jpg) top center no-repeat;		
	background-size: 100%;
	height: 190px;
	border: 1px solid;
	border-color: #014975;
}

.projects-image1 a,
.projects-image5 a,
.projects-image7 a,
.projects-image8 a,
.projects-image15 a {
	text-decoration: none;
	color: #fff;
}

.projects-title {
	background: #014975;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	padding-top: 10px;
}

.projects-subtitle {
	background: #014975;
	text-align: center;
	font-weight: 400;
	font-size: 11px;
	color: #fff;
	padding-bottom: 10px;
}

.projects-description {
	height: 330px;
	background: #fff;
	text-align: left;
	line-height: 1.5;
	padding-top: 10px;
	padding-left: 10px;
	border: 1px solid;
	border-color: #014975;
}

.projects-footer {
	background: #014975;
	text-align: center;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 11px;
	color: #fff;
	padding: 5px;
}

.projects-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
}

.projects-navigation a {
	float: right;
}

.dot {
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: #2e2e2e;
	margin: 4px;
}

.dot:hover {
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: #69b0cf;
	margin: 4px;
}

.dot-current {
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: #014975;
	margin: 4px;
	-webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;	
}

@-webkit-keyframes check {
	50% {
		outline-color: #69b0cf;
		box-shadow: 0 0 0 12px #69b0cf, 0 0 0 36px rgba(51, 51, 51, 0.2);
	}
	100% {
		outline-color: #014975;
		box-shadow: 0 0 0 0 #014975, 0 0 0 0 rgba(51, 51, 51, 0);
	}
}

@keyframes check {
	50% {
		outline-color: #014975;
		box-shadow: 0 0 0 12px #014975, 0 0 0 36px rgba(51, 51, 51, 0.2);
	}
	100% {
		outline-color: #014975;
		box-shadow: 0 0 0 0 #014975, 0 0 0 0 rgba(51, 51, 51, 0);
	}
}

/*------------------------CLIENTS------------------------*/

.main-header,
.clients-content,
.main-footer {
	max-width: 960px;
	padding: 20px;
	margin: 0 auto;
}

.clients-content-container {
	background: transparent url(../img/layout/background.png) bottom center no-repeat;
	height: 770px;
	border-bottom: 2px solid;
	border-color: #014975;
}

.clients-content li {
	float: left;
	list-style: none;
	padding-top: 1px;
}

.clients {
	display: block;
	width: 32%;
	padding-bottom: 15px;
}

.clients-space {
	width: 2%;
}

.clients-title {
	background: #014975;
	text-align: center;
	font-weight: 700;
	color: #fff;
	padding: 10px;
}

.clients-description {
	background: #fff;
	text-align: center;
	font-weight: 300;
	padding: 5px;
	border: 1px solid;
	border-color: #014975;
}

/*------------------------ARTICLES------------------------*/

.main-header,
.articles-content,
.main-footer {
	max-width: 960px;
	padding: 20px;
	margin: 0 auto;
}

.articles-content-container {
	background: transparent url(../img/layout/background.png) bottom center no-repeat;
	height: 770px;
	border-bottom: 2px solid;
	border-color: #014975;
}

.articles-content-row1,
.articles-content-row2,
.articles-content-row3,
.articles-content-row4 {
	background-color: #fff;
	border: 1px solid;
	border-color: #014975;
}

.articles-content-space {
	height: 20px;
}

.articles-icon,
.articles-description,
.articles-download {
	float: left;
	padding: 20px;
}

.articles-icon {
	width: 10%;
}

.articles-description {
	width: 70%;
}

.articles-download {
	width: 20%;
}

/*------------------------DATA PROTECTION------------------------*/

.main-header,
.dataprotection-content,
.main-footer {
	max-width: 960px;
	padding: 20px;
	margin: 0 auto;
}

.dataprotection-content-container {
	background: transparent url(../img/layout/background.png) bottom center no-repeat;
	height: 770px;
	border-bottom: 2px solid;
	border-color: #014975;
}

.dataprotection {
	max-height: 630px;
	background-color: #fff;
	padding: 20px;
	border: 1px solid;
	border-color: #014975;
	overflow-y: scroll;
}

/*------------------------IMPRINT------------------------*/

.main-header,
.imprint-content,
.main-footer {
	max-width: 960px;
	padding: 20px;
	margin: 0 auto;
}

.imprint-content-container {
	background: transparent url(../img/layout/background.png) bottom center no-repeat;
	height: 770px;
	border-bottom: 2px solid;
	border-color: #014975;
}

.imprint-content1,
.imprint-space,
.imprint-content2 {
	float: left;
}

.imprint-content1,
.imprint-content2 {
	width: 49%;
	background-color: #fff;
	border: 1px solid;
	border-color: #014975;
}

.imprint-space {
	width: 2%;
	padding-top: 1px;
}

.imprint-description {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	height: 320px;
}

/*------------------------BUTTONS------------------------*/

/*---REGULAR BOTTON---*/

.button {							
	display: inline-block;
	padding: 10px 20px;
	text-transform: uppercase;
	border: 1px solid #014975;
	color: #014975;
}

.button:hover {
	background: #014975;
	color: #fff;
	cursor: pointer;
}

/*---WHITE BOTTON---*/

.button-white {
	display: inline-block;
	padding: 10px 20px;
	text-transform: uppercase;
	border: 1px solid #fff;
	color: #fff;
}

.button-white:hover {
	background: #fff;
	color: #222;
	cursor: pointer;
}

/*---HOME BOTTON---*/

.button-home {
	display: inline-block;
	padding: 10px 20px;
	font-weight: 700;
	font-size: 18px;	
	text-transform: uppercase;
	border: 1px solid #fff;
	color: #fff;
}

.button-home:hover {
	background: #fff;
	color: #222;
	cursor: pointer;
}

/*------------------------CLEARFIX------------------------*/

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}