/**
 * @license
 * MyFonts Webfont Build ID 2982770, 2015-03-02T08:19:25-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: GalanoGrotesque-Bold by Rene Bieder
 * URL: http://www.myfonts.com/fonts/rene-bieder/galano-grotesque/bold/
 * 
 * Webfont: GalanoGrotesque-Light by Rene Bieder
 * URL: http://www.myfonts.com/fonts/rene-bieder/galano-grotesque/light/
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2982770
 * Licensed pageviews: 10,000
 * Webfonts copyright: Copyright © 2014 by René Bieder. All rights reserved.
 * 
 * © 2015 MyFonts Inc

*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("http://hello.myfonts.net/count/2d8372");

@font-face {
	font-family: 'GalanoGrotesque-Bold';
	src: url('/files/fonts/2D8372_0_0.eot');
	src: url('/files/fonts/2D8372_0_0d41d.eot?#iefix') format('embedded-opentype'),
		 url('/files/fonts/2D8372_0_0.html') format('woff2'),
		 url('/files/fonts/2D8372_0_0.woff') format('woff'),
		 url('/files/fonts/2D8372_0_0.ttf') format('truetype');
} 
  
@font-face {
	font-family: 'GalanoGrotesque-Light';
	src: url('/files/fonts/2D8372_1_0.eot');
	src: url('/files/fonts/2D8372_1_0d41d.eot?#iefix') format('embedded-opentype'),
		 url('/files/fonts/2D8372_1_0.html') format('woff2'),
		 url('/files/fonts/2D8372_1_0.woff') format('woff'),
		 url('/files/fonts/2D8372_1_0.ttf') format('truetype');
} 

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

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	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-comment-alt2-stroke:before {
	content: "\e600";
}

.icon-x:before {
	content: "\e601";
}

.icon-x-altx-alt:before {
	content: "\e602";
}

.icon-rss-alt:before {
	content: "\e603";
}

.icon-cog:before {
	content: "\e604";
}

.icon-mail:before {
	content: "\e605";
}

.icon-heart-stroke:before {
	content: "\e606";
}

.icon-document-stroke:before {
	content: "\e607";
}

.icon-document-fill:before {
	content: "\e608";
}

.icon-plus:before {
	content: "\e609";
}

.icon-move:before {
	content: "\e60a";
}

.icon-move-alt1:before {
	content: "\e60b";
}

.icon-magnifying-glass:before {
	content: "\e60c";
}

.icon-new-window:before {
	content: "\e60d";
}

.icon-lightbulb:before {
	content: "\e60e";
}

.icon-headphones:before {
	content: "\e60f";
}

.icon-play:before {
	content: "\e610";
}

.icon-pause:before {
	content: "\e611";
}

.icon-stop:before {
	content: "\e612";
}

.icon-fullscreen-exit:before {
	content: "\e613";
}

.icon-fullscreen-exit-alt:before {
	content: "\e614";
}

.icon-fullscreen:before {
	content: "\e615";
}

.icon-fullscreen-alt:before {
	content: "\e616";
}

.icon-info:before {
	content: "\e617";
}

.icon-book-alt:before {
	content: "\e618";
}

.icon-book-alt2:before {
	content: "\e619";
}

.icon-camera:before {
	content: "\e61a";
}

.icon-eye:before {
	content: "\e61b";
}

.icon-clock:before {
	content: "\e61c";
}

.icon-unlock-stroke:before {
	content: "\e61d";
}

.icon-unlock-fill:before {
	content: "\e61e";
}

.icon-tag-stroke:before {
	content: "\e61f";
}

.icon-cloud-download:before {
	content: "\e620";
}

.icon-cloud-upload:before {
	content: "\e621";
}

.icon-fork:before {
	content: "\e622";
}

.icon-paperclip:before {
	content: "\e623";
}

.icon-play2:before {
	content: "\e052";
}







/* My Basics */

/* yellow:#fffa7a, rgb(255,250,122);
green:#74E3A6, rgb(0,207,181)
grey:#4E4E4E, rgb(78,78,78)*/

::-webkit-scrollbar{
	-webkit-appearance:none;
	width:5px;
	height:5px;
}

::-webkit-scrollbar-thumb{
	background:#4e4e4e;
}

::-webkit-scrollbar-track{
	background:#fff;
}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a{
	text-decoration: none;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

html, body{
	width:100%;
	height:100%;
}

body
{
	 font-family: 'GalanoGrotesque-Light';
}

::-moz-selection {
	background-color:#4e4e4e;
	color: #fff;
}

::selection {
	background-color:#4e4e4e;
	color: #fff;
}

li{
	list-style:none;
}

strong{
	font-family: 'GalanoGrotesque-Bold';
	font-weight:normal;
}


h1, 
h2,
h3, 
h4, 
h5{
	font-weight:normal;
}

h1{
	font-size:8rem;
	letter-spacing:.1rem;
	line-height:6.4rem;
	font-family: 'GalanoGrotesque-Bold';
	color:#74E3A6;
}


p{
	font-size:0.8rem;
	line-height:1rem;
}

.invisible {
	display:none;
}

/* My Basics END*/

.l-box {
    padding: 1em;
}


.pure-push-3-4,
.pure-push-3-5,
.pure-push-1-2,
.pure-push-2-5,
.pure-push-1-3,
.pure-push-1-4,
.pure-push-1-5,
.pure-push-1-6 {
  position: relative;
}

.pure-push-3-4 {
  left: 75%;
}
.pure-push-3-5 {
  left: 60%;
}
.pure-push-1-2 {
  left: 50%;
}
.pure-push-2-5 {
  left: 40%;
}
.pure-push-1-3 {
  left: 33.3333%;
}
.pure-push-1-4 {
  left: 25%;
}
.pure-push-1-5 {
  left: 20%;
}
.pure-push-1-6 {
  left: 16.6667%;
}

.pure-rel{
	position:relative;
}


header{
	height:15vh;
	min-height:90px;
	position:relative;
}

.fullscreen header{
	height:0;
	position:relative;
}

#logo img{
	height:25px;
	top:42px;
	left:3%;
	position:absolute;
}


.container{
	min-width: 100%;
	width: 100%;
	height:100vh;
	position: relative;
	top: 0;
	bottom: 100%;
	right: 0;
	-webkit-transition: right 0.4s;
	transition: right 0.4s;
}

.hero-img{
    background-image: url(../../files/img/background02.jpg);
    background-position: 50% 70%;
    background-size: cover;
    width: 100%;
    height: 85vh;
    min-height: 339px;
    position: fixed;
}

#portfolio{
	position:absolute;
	width:100%;
	height:100vh;
	top:0;
	left:0;
}

#portfolio .poster{
	background-size:cover;
	background-image: url("../img/background02.jpg");
	position: absolute;
	left: 0;
	top: 0;
	right:0;
	bottom:0;
	width:1025px;
	height:577px;
	margin:auto;
}

#portfolio .overlay-img{
	position:absolute;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	background: -webkit-linear-gradient(rgba(116,227,166,0.3),rgba(255,255,255,0.5)); 
	background: -o-linear-gradient(rgba(116,227,166,0.3),rgba(255,255,255,0.5));  
  	background: -moz-linear-gradient(rgba(116,227,166,0.3),rgba(255,255,255,0.5));  
  	background: linear-gradient(rgba(116,227,166,0.3),rgba(255,255,255,0.5)); 
}



.overlay-img{
    position: fixed;
    width: 100%;
    max-height: calc(100vh - 90px);
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    height: 85vh;
}

.overlay-team{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: -webkit-linear-gradient(rgba(116,227,166,0.4),rgba(255,255,255,0.5)); 
	background: -o-linear-gradient(rgba(116,227,166,0.4),rgba(255,255,255,0.5));  
  	background: -moz-linear-gradient(rgba(116,227,166,0.4),rgba(255,255,255,0.5));  
  	background: linear-gradient(rgba(116,227,166,0.4),rgba(255,255,255,0.5)); 
  	opacity:0;
  	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.overlay-team:hover{
	opacity:1;
}

.home .intro{
	position:absolute;
	top:25%;
}

.contact #container,
.about #container,
.impressum #container,
.service #container{
	margin-top:69px;
}

.mod_article{
	display: inline-block;
    width: 50%;
	margin-left:48px;
	letter-spacing: normal;
}

#fullwidth .mod_article{
    width:100%;
	margin-left:0;
}

.home .intro {
	width:70%;
}

@media screen and (max-width: 64em)
{
.home .intro {
    width:90% !important;
}

.home .mod_article {
    width: 90%;
}
}

.home .intro,
.contact .intro,
.about .intro,
.impressum .intro,
.service .intro{
	margin-left:20%;
}

#map{
    margin-top: 100px;
    width: 100%;
    height: 500px;
}

#map a{
	margin-top:0;
	letter-spacing: normal;
}

#map .leaflet-control-attribution.leaflet-control a{
	margin-left:5px;
}

.home .intro h1,
.about .intro h1,
.contact .intro h1,
.impressum .intro h1,
.service .intro h1{
	margin:0;
	text-transform:uppercase;
}

.about .intro h3,
.contact .intro h3,
.impressum .intro h3,
.service .intro h3{
	display: inline-block;
	color:#74E3A6;
	font-size:0.8em;
	text-transform: uppercase;
	font-family: 'GalanoGrotesque-Bold';
	letter-spacing:0.15em;
	margin-bottom:3em;
	line-height: 1.2em;	
	min-width:437px;
}

.home .intro a:before,
.about .intro h3.ce_headline.first:before,
.contact .intro h3.ce_headline.first:before,
.impressum .intro h3.ce_headline.first:before,
.service .intro h3.ce_headline.first:before{
	content:'';
	width: 80px;
    height: 1px;
    border-bottom: 1px solid #74E3A6;
    display: inline-block;
    position: relative;
    top: -3px;
    margin-right: 1rem;
    -webkit-transition: border-color 0.5s ease;
    -moz-transition: border-color 0.5s ease;
    -ms-transition: border-color 0.5s ease;
    -o-transition: border-color 0.5s ease;
    transition: border-color 0.5s ease;
}

.push-top{
	margin-top:150px;
}

.about h2{
	font-size:1.8em;
	line-height:1.2em;
	font-family: 'GalanoGrotesque-Bold';
	color:#4e4e4e;
	margin-top:0;
	margin-bottom:0;
}

.impressum h2{
	margin-top:2em;
	font-size:1.8em;
	line-height:1.2em;
	font-family: 'GalanoGrotesque-Bold';
	color:#4e4e4e;
}

.team-info{
	padding:8%;
}

.team-info .position{
	font-family: 'GalanoGrotesque-Light';
	color:#4e4e4e;
	font-size:0.7rem;
	text-transform:uppercase;
	letter-spacing:0.10em;
	margin:5px 0 60px;
}

.loation{
	font-family: 'GalanoGrotesque-Bold';
	margin-left:20px;
}

.team-info a{
	color: #74E3A6;
	font-family: 'GalanoGrotesque-Bold';
	font-size: 1.2em;
	line-height: 1.2em;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	border-bottom: 2px solid;
}

.website{
	margin-top:20%;
	text-transform:normal;
	letter-spacing:0;
}

.team-info .website a {
	color: #4e4e4e;
	font-family: 'GalanoGrotesque-Bold';
	font-size: 1.2em;
	line-height: 1.2em;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	border-bottom: none;
}


.home .intro h1 span,
.about .intro h1 span,
.contact .intro h1 span,
.impressum .intro h1 span,
.service .intro h1 span{
	display:block;
}

.home .intro h1 span:nth-child(1),
.about .intro h1 span:nth-child(1),
.contact .intro h1 span:nth-child(1),
.impressum .intro h1 span:nth-child(1),
.service .intro h1 span:nth-child(1){
	text-align: center;
}

.home .intro h1 span:nth-child(3),
.about .intro h1 span:nth-child(3),
.contact .intro h1 span:nth-child(3),
.impressum .intro h1 span:nth-child(3),
.service .intro h1 span:nth-child(3){
	text-align: right;
}

.push-left{
	margin-left:3em;
}

.home .intro h2{
	color:#fff;
	font-size:2.5em;
	line-height: 1.2em;
	font-family: 'GalanoGrotesque-Bold';
}

.about .intro p,
.contact .intro p,
.impressum .intro p,
.service .intro p{
	color:#4e4e4e;
	font-size:1.2em;
	line-height: 1.5em;
	font-family: 'GalanoGrotesque-Light';
}

.contact .intro .adress p{
	font-size:1.2em;
	line-height: 1.5em;
	font-family: 'GalanoGrotesque-Bold';
	margin-top:2em;
	margin-bottom:2em;
}

.home .intro a{
	color:#74E3A6;
	font-family: 'GalanoGrotesque-Light';
	font-size:0.8rem;
	letter-spacing: 0.15em;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	margin-top:3em;
}

.contact .intro .ce_text a{
	color:#74E3A6;
	font-family: 'GalanoGrotesque-Bold';
	line-height: 1.2em;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	border-bottom:2px solid;
	margin-top:3em;
}

.impressum .intro a{
	color:#4e4e4e;
}


.contact .intro .ce_text a:hover{
	color:#abeec9;
}


.home .intro .border,
.about .intro .border,
.contact .intro .border,
.impressum .intro .border,
.service .intro .border{
	width: 80px;
	height: 1px;
	border-bottom: 1px solid #74E3A6;
	display: inline-block;
	position: relative;
	top: -3px;
	margin-right:1rem;
	-webkit-transition: border-color 0.5s ease;
	-moz-transition: border-color 0.5s ease;
	-ms-transition: border-color 0.5s ease;
	-o-transition: border-color 0.5s ease;
	transition: border-color 0.5s ease;
}


.about .team-info .border{
	width: 40px;
	border-bottom: 3px solid #4e4e4e;
	display: inline-block;
	position: relative;
	top: 0;
	margin-right:1rem;
	-webkit-transition: border-color 0.5s ease;
	-moz-transition: border-color 0.5s ease;
	-ms-transition: border-color 0.5s ease;
	-o-transition: border-color 0.5s ease;
	transition: border-color 0.5s ease;
}

.home .intro.pure-u-lg-1-2:hover{
	border-bottom: 1px solid #fff !important;
}

.home .intro a:hover{
	color:#abeec9;
}

.home .button{
	position:absolute;
	width:180px;
	margin:auto;
	bottom:0;
	left:0;
	right:0;
	background-color:#4e4e4e;
	color:white;
	text-align:center;
	font-size:0.7rem;
	text-transform: uppercase;
	padding:12px 0;
	letter-spacing:0.15em;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.content-img{
	background-size:cover;
	width: 100%;
	height:700px;
	position: relative;
	margin-top:69px;
}

#svg-wrapper{
	position:absolute;
	width:100%;
	margin:auto;
	top:100px;
	text-align:center;
}



.services{
	display: inline-block;
    position: relative;
    text-align: center;
    height: 450px;
    z-index: 5;
}

.label{
	color:white;
    position: absolute;
    width:250px;
    text-align: left;
    cursor: pointer;
}

.label h3{
	font-size: 1.4em;
    font-family: 'GalanoGrotesque-Bold';
    margin-top:0;
    margin-bottom:10px;
}

.label p{
    margin:0;
    line-height: 1.2rem;
}

#cur-service-1{
	top:-40px;
	margin-left:170px;
}
#cur-service-2{
	top:236px;
	margin-left:425px;
}

#cur-service-3{
	top:236px;
	margin-left:-140px;
}
#cur-service-4{
	top:460px;
	margin-left:170px;
}


#graph{
	padding:15px;
	width:400px;
	height:400px;
}

#cur-service-1-triangle,
#cur-service-2-triangle,
#cur-service-3-triangle,
#cur-service-4-triangle,
#cur-service-1-line,
#cur-service-2-line,
#cur-service-3-line,
#cur-service-4-line{
	opacity: 0.2;
	transition: 1s;
	
}

/*line animation pulse_lines*/

.pulse_lines {
  -moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
-webkit-transform-origin: center center;
transform-origin: center center;
  animation: 1s infinite;
  -webkit-animation: 1s infinite;
}



.home .button:hover{
	background-color:#74E3A6;
}

/*PORTFOLIO BUTTON*/


#portfolio .button{
	position:absolute;
	margin:auto;
	bottom:50vh;
	left:0;
	right:0;
	background-color:transparent;
	width:160px;
	height:160px;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	cursor: pointer;
}





/*PORTFOLIO BUTTON END*/


#hide_vid{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5000;
	cursor: pointer;
	font-family: 'GalanoGrotesque-Light';
	font-size: 50px;
	line-height:50px;
	color: #74E3A6;
	background-color: transparent;
	-webkit-transition: -webkit-transform .3s ease;
	transition: transform .3s ease;
	width:50px;
	height:50px;
	text-align:center;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#hide_vid:hover{
	color:#abeec9;
}

.container.fullscreen{
	position: absolute;
	overflow: hidden;
}


.portfolio .wrap{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 11;
-webkit-transition: opacity .2s cubic-bezier(0.215,.61,.355,1);
transition: opacity .2s cubic-bezier(0.215,.61,.355,1);	
}


.video-wrapper{
position:absolute;
z-index: 999;
top: -2000px;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #262626;
}

.video-wrapper.active{
	transition: all 0s none 2s;
	top:0;
}

.video-wrapper .video-player{
position: absolute;
left: 50%;
top: 50%;
width: 80%;
max-width:100%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-color: #262626;
}

.video-wrapper .video-player:before{
	content: "";
display: block;
padding-top: 56.25%;
}

.video-wrapper .video-player iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/*------custom video-js-----*/

.video-js{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	cursor: pointer;
}

  .vjs-default-skin .vjs-current-time, 
  .vjs-default-skin .vjs-time-divider, 
  .vjs-default-skin .vjs-duration, 
  .vjs-default-skin .vjs-remaining-time, 
  .vjs-default-skin .vjs-volume-control, 
  .vjs-default-skin .vjs-mute-control{
  display:none;
    }
    

.vjs-default-skin .vjs-progress-control{
	position: fixed;
top: auto;
left: 0;
right: 0;
bottom: 0;
height: 5px;
background: 0;
}

.vjs-default-skin .vjs-progress-holder{
	position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
-webkit-transition: bottom .3s ease;
transition: bottom .3s ease;
background: transparent;
}


.vjs-default-skin .vjs-progress-holder:after{
display: block;
width: 100%;
height: 5px;
background-color:transparent;
top: 0;
left: 0;
margin-top: 25px;
content: '';
}



.vjs-default-skin .vjs-play-control{
visibility: visible;
position: absolute;
width: 80px;
height: 100%;
bottom: 0;
-webkit-transition: bottom .3s ease;
transition: bottom .3s ease;
}

.vjs-default-skin .vjs-play-control .vjs-control-content{
	position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-color: transparent;
}

.vjs-default-skin .vjs-fullscreen-control{
	position: fixed;
top: auto;
right: 0;
bottom: 0;
height: 55px;
line-height: 55px;
background-color: transparent;
display: block;
-webkit-transition: bottom .3s ease;
transition: bottom .3s ease;
}

.vjs-default-skin .vjs-control:before{
	font-family: 'GalanoGrotesque-Light';
	font-size: 32px;
	line-height: 55px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #74E3A6;
	z-index: 50;
	text-shadow:none;
}

.vjs-default-skin .vjs-play-control:before{
	content: "\e610";
	display:none;
}

.vjs-default-skin .vjs-fullscreen-control:before{
	content: "+";
}

.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before{
	content: "-";
}

.vjs-default-skin .vjs-control:focus:before, .vjs-default-skin .vjs-control:hover:before{
	text-shadow:none;
}

.vjs-default-skin .vjs-load-progress{
	background: #434343;
	bottom: 0!important;
	height: 5px!important;
}
    
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar{
	display:inline;
}

.vjs-default-skin .vjs-control-bar{
	bottom: 0;
	width: 100%;
	height: 55px;
	background: transparent;
	display: block;
}

.vjs-default-skin .vjs-play-progress{
	background:#74E3A6;
}

.vjs-default-skin .vjs-slider-handle:before{
	display:none;
}

.vjs-default-skin .vjs-slider-handle{
display:none;
}



/*------custom video-js END-----*/


.triangle{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 45px 78px 45px;
	border-color: transparent transparent #74E3A6 transparent;
}

.contact .social{
	margin-top:3em;
    display: inline-block;
    width: 50%;
    margin-left:calc(33.333% + 48px);
    letter-spacing: normal;	
}

.contact .social a{
	border:none;
}


.icon{
    width:30px;
    height:30px;
    display:inline-block;
    margin-right:3px;
    cursor: pointer;
}

#soundcloud path,
#vimeo path{
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}


#soundcloud path:hover,
#vimeo path:hover{
	fill:#74E3A6;
}


footer{
	margin:80px 3%;
	color:#a6a6a6;
	padding-top:80px;
	border-top:1px solid #ededed;
}

footer .pure-g [class *= "pure-u"]{
	margin:0;
	font-family: 'GalanoGrotesque-Light';
}

footer a{
	color:#a6a6a6;
	font-size:0.8rem;
}

footer a:hover{
	margin:0;
	color:#74E3A6;
}

/*-------leaflet CSS------*/

.custom-popup .leaflet-popup-content-wrapper {
  background:#fff;
  color:#74E3A6;
  border-radius: 0;
  font-family: 'GalanoGrotesque-Bold';
  font-size:1rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  padding: 15px;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 999;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  box-shadow: none;
  }
  
  
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  }
.custom-popup .leaflet-popup-tip {
  border:0;
  }
  
.leaflet-popup-content .marker-title{
	font-weight:500;
}


#openvideo{
	width:100px;
	height:100px;
	position:absolute;
	
}

#test-wrapper{
	width:100px;
	height:100px;
	position:absolute;
	display:none;
}

/* -------------------------------- 

EXPANDABLE PORTFOLIO SITE

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
.projects-container {
  /*height: calc(100vh - 161px);*/
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  margin-bottom:-22px;
}
.projects-container ul {
  padding:0;
}
.projects-container::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.projects-container .cd-single-project {
  width: 100%;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
  /* on mobile -  move items outside the viewport */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.projects-container .cd-single-project div.image{
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}
.projects-container .cd-single-project::after {
  /* background image */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  width: 100%;
  -webkit-transition: opacity 0.5s, height 0.4s;
  -moz-transition: opacity 0.5s, height 0.4s;
  transition: opacity 0.5s, height 0.4s;
}
.projects-container .cd-single-project::before {
  /* never visible - this is used in jQuery to detect if the background image has been loaded  */
  content: 'img/keep_snap.jpg';
  display: none;
}
/*
.projects-container .cd-single-project:nth-of-type(1) {
  top: 150px;
}
.projects-container .cd-single-project:nth-of-type(1)::after {
  background-image: url("../img/leonie_snap.jpg");
}
.projects-container .cd-single-project:nth-of-type(1)::before {
  content: 'img/leonie_snap.jpg';
}
.projects-container .cd-single-project:nth-of-type(2) {
  top: 300px;
}
.projects-container .cd-single-project:nth-of-type(2)::after {
  background-image: url("../img/tvspot_snap.jpg");
}
.projects-container .cd-single-project:nth-of-type(2)::before {
  content: 'img/tvspot_snap.jpg';
}
.projects-container .cd-single-project:nth-of-type(3) {
  top: 450px;
}
.projects-container .cd-single-project:nth-of-type(3)::after {
  background-image: url("../img/kaldern_snap.jpg");
}
.projects-container .cd-single-project:nth-of-type(3)::before {
  content: 'img/kaldern_snap.jpg';
}
.projects-container .cd-single-project:nth-of-type(4) {
  top: 600px;
}
.projects-container .cd-single-project:nth-of-type(4)::after {
  background-image: url("../img/medi_snap.jpg");
}
.projects-container .cd-single-project:nth-of-type(4)::before {
  content: 'img/medi_snap.jpg';
}
.projects-container .cd-single-project:nth-of-type(5) {
  top: 750px;
}
.projects-container .cd-single-project:nth-of-type(5)::after {
  background-image: url("../img/mehl_snap.jpg");
}
.projects-container .cd-single-project:nth-of-type(5)::before {
  content: 'img/mehl_snap.jpg';
}
*/
.projects-container .cd-single-project.is-loaded {
  /* move items in the viewport when background images have been loaded */
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.projects-container .cd-single-project.is-full-width {
  /* selected item */
  position:fixed;
  cursor:default !important;
  top: 0;
  height: 100vh;
  z-index: 2002;
  cursor: auto;
  -webkit-transition: z-index 0s 0s, top 0.4s 0s;
  -moz-transition: z-index 0s 0s, top 0.4s 0s;
  transition: z-index 0s 0s, top 0.4s 0s;
}
.projects-container .cd-single-project.is-full-width::after {
  height: 100vh;
}
#vfilter {
    width:200px;
    margin: 0 auto;
	text-align:center;
	text-transform:uppercase;
	line-height: 26px;
	color:rgb(78, 78, 78);
}
#vfilter span:hover, #vfilter span.active {
	color:rgb(123, 226, 167);
}
#vfilter, #filter_del, #vfilter ul {
	display:none;
}
#vfilter.open ul, #vfilter.selected #filter_del {
	display:block;
}
#vfilter.selected #filter_del {
    font-size: 27px;
    line-height: 24px;
    margin-left: 186px;
    position: absolute;
    margin-top: -26px;
}
#vfilter span {
	cursor:pointer;
}
#vfilter.selected, #vfilter ul li {
	text-align:left;
}
#vfilter hr {
	border-style:none;
	height:0;
	line-height:0;
	border-top:1px solid rgb(78, 78, 78);
	left: 0;
	margin-top:0;
    position: absolute;
    width: 100%;
	display:none;
}
#vfilter.open hr {	
	display:block;
}
#vfilter ul {
    padding: 0;
    margin: 0;
}
#vfilter ul ul {
    border-style: none;
    border-bottom: 1px solid lightgray;
}
#vfilter #filter_choice {
	font-family:GalanoGrotesque-Bold;
}
@media only screen and (min-width: 64em) {
  .projects-container::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
  .projects-container .cd-single-project {
    width: 100;
    height: 150px;
    opacity: 0;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: width 0s;
    -moz-transition: width 0s;
    transition: width 0s;
  }
  
  .projects-container .cd-single-project::after {
    height: 100%;
    width: 100vw;
    opacity: 0;
  }
  .projects-container .cd-single-project.is-loaded {
    /* show items when background images have been loaded */
    opacity: 1;
  }
  .projects-container .cd-single-project.is-loaded::after {
    opacity: 1;
  }
  .projects-container .cd-single-project.is-full-width {
    /* selected item */
    top: 0vh;
    height: 100vh;
    -webkit-transition: height 0.4s 0s, z-index 0s 0s, top 0.4s 0s;
    -moz-transition: height 0.4s 0s, z-index 0s 0s, top 0.4s 0s;
    transition: height 0.4s 0s, z-index 0s 0s, top 0.4s 0s;
  }
}
@media only screen and (min-width: 64px) {
  /*.projects-container .cd-single-project::after {
    background-attachment: fixed;
  }*/
  .projects-container .cd-single-project.is-loaded::after {
    opacity: 1;
  }
  
  
  .no-touch .projects-container .cd-single-project:hover::after, .projects-container .cd-single-project.is-full-width.is-loaded::after {
    opacity: 1;
  }

}
.projects-container .cd-single-project.is-full-width::after {
  height: 100vh;
}

.cd-title {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.is-full-width .cd-title {
  top: 50vh;
  -webkit-transition: opacity 0s, top 0.4s;
  -moz-transition: opacity 0s, top 0.4s;
  transition: opacity 0s, top 0.4s;
}
.cd-title > * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-title h2 {
  	font-size:2rem;
	letter-spacing:.1rem;
	line-height:3rem;
	font-family: 'GalanoGrotesque-Bold';
	color:#74E3A6;
	text-transform:uppercase;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.cd-title h2:hover{
	color:#abeec9;
}

.cd-title p {
  font-size: 1.4rem;
  	font-family: 'GalanoGrotesque-Light';
  font-style: italic;
  line-height: 1.2;
  padding: .4em 2em;
  display: none;
  opacity: .6;
}
@media only screen and (min-width: 64em) {
  .cd-title {
    top: 50%;
    width: 100vw;
    opacity: 0;
    -webkit-transform: translateY(-50%) translateX(-20px);
    -moz-transform: translateY(-50%) translateX(-20px);
    -ms-transform: translateY(-50%) translateX(-20px);
    -o-transform: translateY(-50%) translateX(-20px);
    transform: translateY(-50%) translateX(-20px);
  }
  .is-loaded .cd-title {
    opacity: 1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s;
    -moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s;
    transition: transform 0.6s, opacity 0.6s, left 0.4s;
  }

  .cd-title p {
    display: block;
  }
}
@media only screen and (min-width: 48em) {
  .cd-title h2 {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 1023px) {
  
  .contact .social{
	  margin-left:48px;
  }
  .pure-push-1-4, .pure-push-1-2  {
	  left:0;
  }
}

  .is-loaded.is-full-width .cd-title {
    opacity: 0;
  }

.cd-project-content {
  clear: both;
  visibility: hidden;
  opacity: 0;
  /*margin-top: 100vh;*/
  padding: 3em 0;
  -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  transition: opacity 0.4s 0s, visibility 0s 0.4s;
  position: relative;
  z-index: 1;
}

.cd-project-content .vinfo {
    position: fixed;
    bottom: 50px;
    background-color: rgba(255,255,255,0.8);
    padding: 10px;
    font-family: 'GalanoGrotesque-Bold';
    min-width: 10vw;
    max-width: 33vw;
    left: 50%;
	font-size:16px;
	line-height:23px;
	cursor:auto;
}

@media (max-width:850px)
{
	.cd-project-content .vinfo {
		bottom: 15px;
		left: 15px;
		max-width: unset;
		width: calc(100% - 30px);
	}
}

.is-full-width .cd-project-content {
    visibility: visible;
    opacity: 1;
    position: fixed;
    top: calc(50% - 90px);
    left: calc(50% - 90px);
	cursor:pointer;
}

.projects-container .cd-close{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5000;
	cursor: pointer;
	font-family: 'GalanoGrotesque-Light';
	font-size: 50px;
	line-height:50px;
	color: #74E3A6;
	background-color: transparent;
	-webkit-transition: -webkit-transform .3s ease;
	transition: transform .3s ease;
	width:50px;
	height:50px;
	text-align:center;
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.projects-container .cd-close {
  position: fixed;
  top: 30px;
  right: 3%;
   -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}


.project-is-open .cd-close,
.project-is-open .cd-scroll {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
  transition: transform 0.4s 0s, visibility 0s 0s;
}


.no-touch .project-is-open .cd-close:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.no-touch .project-is-open .cd-scroll:hover {
  -webkit-transform: translateX(-50%) scale(1.2);
  -moz-transform: translateX(-50%) scale(1.2);
  -ms-transform: translateX(-50%) scale(1.2);
  -o-transform: translateX(-50%) scale(1.2);
  transform: translateX(-50%) scale(1.2);
}

.projects-container.project-is-open {
	position:fixed;
	top:0;
	height:100vh;
	width:100%;
	z-index:2200;
}

@-webkit-keyframes cd-translate {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
  }
}
@-moz-keyframes cd-translate {
  0% {
    -moz-transform: translateX(-50%) scale(1);
  }
  50% {
    -moz-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -moz-transform: translateX(-50%) scale(1);
  }
}
@keyframes cd-translate {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(-50%) scale(1);
    -moz-transform: translateY(10px) translateX(-50%) scale(1);
    -ms-transform: translateY(10px) translateX(-50%) scale(1);
    -o-transform: translateY(10px) translateX(-50%) scale(1);
    transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}

/*--------------------*/

/* Overlay style */
.overlay {
	position: absolute;
    width: 100%;
    min-height: 551px;
    top: 0;
    left: 0;
    background: #4e4e4e;
    z-index: 1000;
    height: 100vh;
}

 /*HAMBURGER ICON START*/
  
#trigger-overlay,
.overlay-close {
  position: fixed;
  z-index: 2001;
  right: 3%;
  top: 30px;
  height: 50px;
  width: 35px;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  cursor:pointer;
}
#trigger-overlay span, #trigger-overlay span::before, #trigger-overlay span::after {
  cursor: pointer;
  height: 5px;
  width: 35px;
  background:#74E3A6;
  position: absolute;
  display: block;
  content: '';
}

#trigger-overlay span, #trigger-overlay span::before, #trigger-overlay span::after {
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#trigger-overlay span::before {
  top: -10px;
}
#trigger-overlay span::after {
   top: 10px;
}
#trigger-overlay:hover span::after {
  top: 15px;
}
#trigger-overlay:hover span::before {
  top: -15px;
}

/*---------------*/

#trigger-overlay.open span {
  background-color: transparent;
}
#trigger-overlay.open span:before, #trigger-overlay.open span:after {
  top: 0;
}
#trigger-overlay.open span:before {
  background-color: #74E3A6;
  transform: rotate(45deg);
}

#trigger-overlay.open span:after {
  background-color: #74E3A6;
  transform: rotate(-45deg);
}

#trigger-overlay.open:hover span:before,
#trigger-overlay.open:hover span:after {
  background-color: #abeec9; 
}

  /*HAMBURGER ICON END*/






/* Overlay closing cross */
.overlay .overlay-close {
 	position: fixed;
  right: 3%;
  top: 4%;
  height: 50px;
  width: 50px;
}

/* Menu style */
.overlay nav {
	position: absolute;
	top: 12%;
	left:50%;
}

.overlay ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	position: relative;
}

.overlay ul li {
	display: block;
	padding:0.3em 0;
}

.social-nav{
	margin-top:10%;
	border-top:1px solid #717171;
	padding-top:5%;
}

.social-nav p{
	color: #717171;
	display:inline-block;
	margin-left:3rem;
	vertical-align:bottom; 
}


.social-nav path{
	-webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	fill:#717171;
	padding-top:2%;
}


#soundcloud path:hover,
#vimeo path:hover{
	fill:#74E3A6;
}


.overlay ul li small{
	color:#74E3A6;
	vertical-align:super;
	margin-right:3rem;
	font-size:1rem;
	letter-spacing: 0.15em;
}

/* Effect 5: same word slide in */

.overlay ul li a {
	overflow: hidden;
	padding: 0 4px;
	font-family: 'GalanoGrotesque-Bold';
	font-size: 3.6rem;
	color: #74E3A6;
	display: inline-block;
	text-decoration:none;
	vertical-align: middle;
}

.overlay ul li a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.overlay ul li a:hover,
.overlay ul li a:active {
	color:#abeec9;
}

.overlay ul li a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.overlay ul li a:hover span,
.overlay ul li a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

/* Effect 5: same word slide in END*/

/* Effects */
.overlay-hugeinc {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	z-index:2000;
}


.rotate{
	position: absolute;
    top: 0;
    bottom: 0;
    font-family: 'GalanoGrotesque-Bold';
    font-size: 1.4rem;
    color: #717171;
    width: 100%;
    left: 0;
}

.rotate span{
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	display: inline-block;
    top: 270px;
    position: absolute;
    left: -212px;
}

.rotate span:before{
	content: "\e607";
	font-family: 'icomoon';
	margin-right:30px;
}


.rotate a{
	color: #717171;
	font-family: 'GalanoGrotesque-Bold';
	font-size: 1.4rem;
	margin-left:30px;
	
}

/*RESPONSIVE*/
@media screen and (max-width: 64em){

h1{
	font-size:7rem;
	line-height:6rem;
}

.home .intro,
.contact .intro, 
.about .intro,
.impressum .intro,
.service .intro{
	margin-left:10%;
}			
}


@media screen and (max-width: 50em) {
	
.push-left, .mod_article, .contact .social{
margin-left:0;
width:100%;
}

.top{
	margin-top:6em;
}

.about .pure-push-1-4,
.about .pure-push-1-2
{
  left: 0;	
}	

.overlay nav {
	left:20%;

}
	
}



@media screen and (max-width: 35.5em) {


.home .intro h3, .about .intro h3, .contact .intro h3, .impressum .intro h3, .service .intro h3 {
    min-width: 0;
}

h1{
	font-size:5rem;
	line-height:4rem;
}

.about .intro h3.ce_headline.first:before, .contact .intro h3.ce_headline.first:before, .impressum .intro h3.ce_headline.first:before, .service .intro h3.ce_headline.first:before{
	display: block;
    margin-bottom: 6px;
}

.home .intro p{
	font-size:1.6em;
}

.home .intro,
.contact .intro, 
.about .intro, 
.impressum .intro,
.service .intro{
	margin-right:10%;
}

.overlay nav{
	top:22%;
}

.overlay ul li a {
	font-size:2.6em;
}

.services{
	height:auto;
}

.content-img{
	margin-top:0;
	height:567px;
}

#svg-wrapper{
	top:140px;
}

.label{
	max-width:120px;
}

#graph{
	height:300px;
	width:300px;
}

.label h3{
	font-size: 1.2em;
    font-family: 'GalanoGrotesque-Bold';
    margin-top:0;
    margin-bottom:0;
}

.label p{
    margin:0;
    line-height: 1.2rem;
}

#cur-service-1{
	top:-360px;
	margin-left:110px;
}
#cur-service-2{
	top:-170px;
	margin-left:-20px;
}

#cur-service-3{
	top:-170px;
	margin-left:220px;
}
#cur-service-4{
	top:0;
	margin-left:110px;
}

 
}


#coming h1{
	font-size:4em;
	text-transform: uppercase;
	text-align: center;
}


/* 1400px*/
@media screen and (min-width: 87.5em) {

/*.rotate{
	left:15%;
}*/

.home .intro p{
	font-size:2.8em;
}

 
}

/* 1600px*/
@media screen and (min-width: 100em) {

.home .intro p{
	font-size:3.2em;
}

.intro h1{
	max-width:350px;
}

.home .intro h1 {
	width:50%
}

.contact .intro, 
.about .intro,
.impressum .intro,
.service .intro{
	margin-left:22%;
}
 
}

/* 1800px*/
@media screen and (min-width: 112.5em) {


.overlay nav{
	top:15%;
}

.home .intro,
.contact .intro, 
.about .intro,
.impressum .intro,
.service .intro{
	margin-left:30%;
}
 
}