/** main styles **/

body { padding: 0; margin: 0; font: 1em/1.5 Helvetica, Arial, sans-serif; background: #eee; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.1em; }

p, li { color: #444; font-size: 1em; }
a { color: #5e7fba; }
a:any-link { text-decoration: none; cursor: hand; }
p > a:hover { color: #444; }

.anchor { height: 5em;  margin-top: -5em; display: block; visibility: hidden; }

#backToTop { display: none; position: fixed; bottom: 20px; left: 20px; z-index: 98; border: 4px; border-color: white; border-style: solid; outline: none; background-color: #555; color: white; cursor: pointer; padding: 10px; border-radius: 100%; font-size: 1.8em; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; }
#backToTop:hover { background-color: #444; }

.text-picture { padding-left: 15px; padding-right: 15px; }
.copy { font-weight: 0.2em; top:-4px; }
span.link { color: #5e7fba; }
span.link:hover { color: #444; }
input#burger { display:none; }

/** main **/
main { background: #eee; padding: 0; margin: 0; }
/** header **/
header { background: #444; padding-bottom: 0.6em; padding-top: 0.6em; position: fixed; top: 0px; right: 0px; width: 100%; z-index: 99; }

/** top teaser and headline h1 **/
.top-teaser { padding-top: 6em;  padding-bottom: 2em; padding-left: 5px; padding-right: 5px; background: #5e7fba; }
.top-teaser .headline { text-align: center; margin-top: 0.5em; margin-bottom: 0.5em; font-size: 1.6em; color: #fff; }
.top-teaser .text { text-align: center; font-size: 1.2em; max-width: 780px; margin-left: auto; margin-right: auto; color: #fff; font-weight: 400; }
.top-teaser .text a { color: #bbb; }

.top-teaser-small { padding-top: 1em;  padding-bottom: 1em; }

.teaser { max-width: 900px; margin-left: 3em; }

/** colors **/
.white { background: white; }
.grey { color: #444; }

/** cols and flexible row **/
.cols-2-4 { max-width: 600px; margin-left: auto; margin-right: auto; padding-top: 2em; padding-bottom: 2em; }
.picture { text-align: center; font-size: 8em; } 

/** svg styles **/
.col { overflow: hidden; }
.col object { padding-left: 15px; padding-right: 15px; height: 100%; width: auto; overflow: hidden; }
.col-icon, .icon, .label { text-align: center; }
.icon { font-size: 4em; padding-top: 10px; padding-bottom: 10px; }
.col-icon:hover { color: #5e7fba; }
.logo { text-align: right; height: 13em; width: auto; }

/** footer styles **/
footer { background: #444; padding-top: 2em; padding-bottom: 2em; color: white; }
.contact-footer p, .contact-footer a { color: #eee; font-size: 1.1em; }
#copyright { background: #5e7fba; padding-top: 0.6em; padding-bottom: 0.6em; }
.imprint ul li { text-align: center; list-style-type:none; }
.imprint a { color: #eee; text-align: center; font-size: 1em; }
.imprint a:hover { color: #444; }

/** burger navi and breakpoint definitions < 659px **/
@media only screen and (max-width: 659px) {
    
	input#burger { display: none; }
	label.burger {
		display: block;
		background: #eee;
		width: 60px; 
		height: 40px; 
		position: relative;
		margin-top: 0.6em; 
		margin-left: 0.6em; 
		margin-right: auto;
		margin-bottom: 0.6em;
		border-radius: 4px; 
		transition: border-radius .5s;
	}
	
	label.burger .line { 
		position: absolute; 
		height: 4px; 
		background: #444;
		border-radius: 2px;
		width: 40px; 
		display: block; 
		left:10px;
		transition: 0.5s; 
		transform-origin: center; 
	}

	label.burger .line:nth-child(1) { top: 8px; }
	label.burger .line:nth-child(2) { top: 18px; }
	label.burger .line:nth-child(3) { top: 28px; }

	#burger:checked + .burger .line:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
	}
	#burger:checked + .burger .line:nth-child(2) {
		opacity:0;
	}
	#burger:checked + .burger .line:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
	}
	
	#burger:checked + .burger { background: #eee; }
	#burger:checked + .burger  + nav.top-menu { height: auto; max-height: 600px; background: #444; }

	nav.top-menu { height: auto; max-height:0; overflow: hidden; background: #eee; transition: all 0.5s; }
	nav.top-menu ul { padding-left: 1em; padding-right: 1em; }
	nav.top-menu ul li { list-style-type: none; color: #eee; border-bottom: 1px solid #eee; padding-top: 1em; padding-bottom: 1em; font-weight: bold; }
	nav.top-menu ul li:first-child{ padding-top: 0; }
	nav.top-menu ul li:last-child{ border-bottom: 0; padding-bottom: 0; }
	nav.top-menu ul li a { color: #eee; display: block }
    nav.top-menu ul li a:hover { color: #5e7fba; }

    .col-object { height: 200px; position: relative; }
    .col-object object { padding: 0; height: auto; width: 100%; position: absolute; bottom: 0px; }
    .cols-2-3 .col.colspan-2 { text-align: center; float:none; clear:left; margin-left:0; width: auto; }
    .cols-2-3 .col.colspan-1 { text-align: center; width: 100%; }
    
    .teaser { margin-left: 0; }
    
}

/** wide screens > 660px **/
@media only screen and (min-width: 660px ) {
	.top-teaser { height: auto; }
    
	.cols-2-4 { display: -ms-flexbox; -ms-flex-flow : wrap; display: flex; flex-wrap: wrap; max-width: 1400px; }
	.cols-2-4 .col { width: 49%; }	
	.cols-2-3 { display: -ms-flexbox; -ms-flex-flow : wrap;  display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1400px; margin-left: auto; margin-right: auto}
	.cols-2-3 .col { width: 49%; }
    .cols-2-3 .col.colspan-2 { text-align: center; float:none; clear:left; margin-left:0; width: 100%; }
    .cols-2-3 .col.colspan-1 { text-align: center; width: 100%; }
    .cols-2-3 .col-object { width: 100%; height: 200px; }
    .col-object { width: 100%; height: 200px; position: relative; }
    .col-object object { padding: 0; height: auto; width: 100%; position: absolute; bottom: 0px; } 
    
	nav.top-menu { height: auto; max-height: auto; overflow: visible; }
	nav.top-menu ul { display: -ms-flexbox; -ms-flex-pack : end; display: flex; justify-content: flex-end; padding-left: 0; padding-right: 0; padding-top: 0; margin-bottom: 0; margin-top: 0; }
	nav.top-menu ul li {  border-bottom:0; list-style-type:none; margin-left: 1em; text-transform: uppercase; font-size: 84%; padding-right: 0.8em; color: #eee; }
	nav.top-menu ul li a { display: block; color: #eee; }
    nav.top-menu ul li a:hover { color: #5e7fba; }
    
    .anchor { height: 3em;  margin-top: -3em; }
    
    .top-teaser { padding-top: 3.5em; }
    .top-teaser-small { padding-top: 1em; }
    .teaser { margin-left: 1em; }
    
}

@media only screen and (min-width: 980px ) {	
	.cols-2-3 .col { width: 32%; }	
    .cols-2 { display: -ms-flexbox; -ms-flex-pack : distribute; display: flex; justify-content: space-around; max-width: 1260px; margin-left: auto; margin-right: auto; }
	.cols-2 main { width: 60%}
    .cols-2-3 .col.colspan-1 { width:28%; text-align: right; }
    .cols-2-3 .col.colspan-2 { width:70%; text-align: left; }
    .cols-2-3 .col-object { width: 28%; height: auto; }
    .col object { padding-left: 15px; padding-right: 15px; height: 100%; width: auto; overflow: hidden; }
	
    nav.top-menu ul { margin-bottom: 0; }
    nav.top-menu ul li { font-size: 100%; padding-right: 1.6em;}

	.top-teaser { padding-top: 4.8em; }
    .top-teaser-small { padding-top: 1em; }
    .top-teaser h1 { font-size: 2.5vw; margin-top: 5vh}
	.top-teaser p { font-size: 1.5vw }
}

@media only screen and (min-width: 1260px ) {	
	.cols-2-4 .col { width: 24%; }
}

/** fonts **/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?eg9fiw');
  src:  url('fonts/icomoon.eot?eg9fiw#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?eg9fiw') format('truetype'),
    url('fonts/icomoon.woff?eg9fiw') format('woff'),
    url('fonts/icomoon.svg?eg9fiw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-web:before {
  content: "\e900";
}
.icon-contact:before {
  content: "\e901";
}
.icon-address:before {
  content: "\e902";
}
.icon-mail:before {
  content: "\e903";
}
.icon-cms:before {
  content: "\e904";
}
.icon-learn:before {
  content: "\e905";
}
.icon-mobile:before {
  content: "\e90a";
}
.icon-phone:before {
  content: "\e90b";
}
.icon-window:before {
  content: "\e906";
}
.icon-arrow-up-bold:before {
  content: "\e90c";
}
.icon-arrow-forward:before {
  content: "\e90d";
}
.icon-media-play:before {
  content: "\e90e";
}
.icon-arrow-up-outline:before {
  content: "\e90f";
}
.icon-arrow-forward-outline:before {
  content: "\e910";
}
.icon-windows:before {
  content: "\e907";
}
.icon-arrow-up:before {
  content: "\f062";
}
.icon-develop:before {
  content: "\f085";
}
.icon-school:before {
  content: "\f19d";
}
.icon-chat:before {
  content: "\f1d7";
}
.icon-forward:before {
  content: "\e911";
}