@charset "utf-8";

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../webfonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../webfonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../webfonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../webfonts/open-sans-v34-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html { 
	margin: 0px;
	min-height: 100%;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
} 

img {
	vertical-align: baseline;
}

span,div {
	zoom: 1;
}			   

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

a {
	zoom: 1;
	color: inherit;
}
	
a img {
	border-width: 0px;
}	   

a:hover  {
	color: inherit;
}

form {
	margin: 0px;
	padding: 0px;
}
	
sup { 
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
	font-size: 70%;
}

body {	 
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Open Sans",sans-serif;
	font-size: 15px;
	line-height: 21px;
	background-color: white;
	color: #3c3c3c;
	height: 100%;
	overflow-x: hidden;
}	 

.show-on-mobile { display: none !important; }

.smalltext { font-size: 80%; }

.bigtext { font-size: 125%; } 

.button {
	display: inline-block;
	background-color: #1b2535;
	color: white;
	text-decoration: none;	
	border-radius: 3px;
	padding: 5px 20px 5px 20px;
	font-size: 18px;
	line-height: 20px;
	font-weight: 700;
	margin-top: 5px;
}

.button:hover {
	background-color: #103252;
	color: white;
}


/**** HEADER ****/

.header {
	position: fixed;
	z-index: 99999;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 115px;
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	padding-top: 15px;
}

.header .logo {
	display: inline-block;
}	

.header .mainmenu {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	margin-top: 12px;
}

.header .mainmenu .entry {
	display: inline-block;
	margin-left: 35px;
	margin-right: 35px;
	letter-spacing: 8px;
	font-size: 15px;
}

.header .mainmenu .entry:first-child { margin-left: 0px; }
.header .mainmenu .entry:last-child { margin-right: 0px; }

.header .mainmenu .entry a { text-decoration: none; }
.header .mainmenu .entry a:hover, .header .mainmenu .entry.sel a { color: #006db4; }

.header .mainmenu .entry.greentext, .header .mainmenu .entry.greentext a { color: #088216 !important; }



/**** MOBILE MENU ****/

.menuicons {
	position: absolute;
	right:24px;
	bottom: 10px;
	display: none;
}

#menu-hide { display: none; }

.mobilemenu-container {
	box-sizing: border-box;
	display: none;
}

.mobilemenu {
	background-color: white;
	display: none;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	border-bottom: 1px solid #eeeeee;
}

.mobilemenu li {
	border-top: 1px solid #eeeeee;
	font-size: 13px;
	line-height: 18px;
}

.mobilemenu li a {
	text-decoration: none;
	display: block;
	padding: 9px 15px;
	text-align: center;	
	letter-spacing: 4px;
	font-size: 15px;
}

.mobilemenu li a:hover {
	background-color: rgba(112,112,112,0.03);
}

.mobilemenu li.sel a {
	color: #006db4;
}

.mobilemenu .entry.greentext a { color: #088216 !important; }

/**** MAIN ****/

.main {
	box-sizing: border-box;
	margin-top: 130px;
}

.textblock {
	max-width: 822px;
	margin: auto;
	padding: 25px 20px 40px 20px;
	font-size: 16px;
	line-height: 24px;
}

/**** SLIDES ****/

.bigimage {
	margin-bottom: 50px;
}

.startseite .bigimage {
	margin-bottom: 0px;
}

.slide-container {
	position: relative;
	font-size: 0;
	line-height: 0;
}

.slide {
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
	font-size: 0;
	line-height: 0;
	width: 100%;
}

#slide-0 { display: block; }

.slide-dots {
	position: absolute;
	left: 0px;
	bottom: 12px;
	width: 100%;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
}

.slide-dots .slide-dot {
	margin-left: 4px;
	margin-right: 4px;
	opacity: 0.4;
	cursor: pointer;
}

.slide-dots .slide-dot.sel{
	opacity: 1;
}


/**** STARTSEITE ****/

.introtext {
	color: white;
	padding: 20px;
	text-align: center;
	background-color: black;
}

.introtext p {
	max-width:840px;
	margin: 17px auto;
}


/**** WORK ****/

.work {
	position: relative;
	font-size: 0;
	line-height: 0;
	background-color: black;
}

.work-entry {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 16.66666%;
	overflow: hidden;
}

.work-entry .overlay {
	position: absolute;
	left: 0px;
	top: 100%;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	color: white;
	text-transform: uppercase;
	transition: top 0.4s ease-in-out;
}

.work-entry:hover .overlay {
	top: 0%;
}

.work-entry .overlay .titel {
	box-sizing: border-box;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 20% 7%;
	font-size: 1.2vw;
	line-height: 1.4vw;
	letter-spacing: 0.3vw;
}

.work-entry .overlay .text {
	box-sizing: border-box;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	padding: 10% 7%;
	font-size: 0.85vw;
	line-height: 1.5vw;
	letter-spacing: 0.17vw;
}

/**** TEAM ****/

.team {
	font-size: 0;
	line-height: 0;
	max-width: 1200px;
	margin: auto;
	padding: 0px 10px 50px 10px;
}

.team-entry {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: calc(25% - 20px);
	margin: 0px 10px 20px 10px;
	overflow: hidden;
}

.team-entry .overlay {
	box-sizing: border-box;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	color: white;
	transition: top 0.4s ease-in-out;
	font-size: 18px;
	line-height: 20px;
	letter-spacing:  1.5px;
	padding: 20px 15px;
}

.team-entry .overlay .funktion {
	font-size: 14px;	
}

.team-entry .overlay .email {
	font-size: 14px;
	display: none;
}

.team-entry .overlay .email a { text-decoration: none; }
.team-entry .overlay .email a:hover { text-decoration: underline; }


/**** TEXTPAGE ****/

.textpage {
	text-align: center;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 60px 20px 60px 20px;
}

.textpage h1 {
	font-weight: normal;
	text-transform: uppercase;
	font-size: 30px;
	line-height: 30px;
	letter-spacing: 5px;
	margin-bottom: 50px;
}

.textpage.not-centered p {
	text-align: left;
}

/**** FOOTER ****/

.footer {
	background-color: #1b2535;
	color: white;
	padding: 30px 20px;
	font-size: 12px;
	text-align: center;
}

.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }


/**** SMALL SCREENS ****/

@media only screen and (max-width: 1200px) {	
	.work-entry { width: 33.3333%; }
	.work-entry .overlay .titel { font-size: 2.4vw; line-height: 2.8vw; letter-spacing: 0.6vw; }
	.work-entry .overlay .text { font-size: 1.7vw; line-height: 3vw; letter-spacing: 0.34vw; }
}

@media only screen and (max-width: 1060px) {
	.team-entry { width: calc(33.3333% - 20px); }
}

@media only screen and (max-width: 880px) {
	.textblock { max-width: 720px; }
	.header .mainmenu .entry { margin-left: 47px; margin-right: 47px; }
}

@media only screen and (max-width: 780px) {	
	.hide-on-mobile { display: none !important; }
	.show-on-mobile { display: block !important; }	
	.header { position: relative; height: 80px; }
	.main { margin-top: 0px; }
	.mainmenu { display: none; }
	.menuicons { display: block; }
	.mobilemenu-container { display: block; }
	.textblock { padding-top: 10px; padding-bottom: 15px; }
	.team-entry { width: calc(50% - 20px); }
}

@media only screen and (max-width: 600px) {
	.header .logo img { width: 150px; height: auto; }
	.header { height: 62px; }
	.work-entry { width: 50%; }
	.work-entry .overlay .titel { font-size: 3.6vw; line-height: 4.2vw; letter-spacing: 0.9vw; }
	.work-entry .overlay .text { font-size: 2.55vw; line-height: 4.5vw; letter-spacing: 0.51vw; }
	.team { padding: 0px 7px 50px 7px; }
	.team-entry { width: calc(50% - 14px); margin: 0px 7px 14px 7px; }
	.team-entry .overlay { font-size: 16px; line-height: 18px; letter-spacing:  1.3px; padding: 15px 10px; }
}	

@media only screen and (max-width: 420px) {
	.team-entry { width: calc(100% - 14px); }
}