@charset "UTF-8";

@font-face {
	font-family: 'neue_machinamedium';
	src: url('../fonts/neuemachina-medium-webfont.woff2') format('woff2'),
			 url('../fonts/neuemachina-medium-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}
@font-face {
	font-family: 'neue_machinalight';
	src: url('../fonts/neuemachina-light-webfont.woff2') format('woff2'),
			 url('../fonts/neuemachina-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}
@font-face {
	font-family: 'neue_machinaregular';
	src: url('../fonts/neuemachina-regular-webfont.woff2') format('woff2'),
			 url('../fonts/neuemachina-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}
@font-face {
	font-family: 'neue_machinaultrabold';
	src: url('../fonts/neuemachina-ultrabold-webfont.woff2') format('woff2'),
			 url('../fonts/neuemachina-ultrabold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

html {
	font-size: 100%;
	height: 100%;
}

body {
	list-style-type: none;
	text-decoration: none;
    font-family: "neue_machinaregular";
	font-size: 100%;
	outline: none!important;
	width: 100%;
	height: 100%;
	background:  #fff;
	color: #000;
}


.nav {
	width: 100%;
	height: auto;	
	transition: all .1s ease-in-out; 
	z-index: 800;
}	


.nav a { color: #000!important;  position: fixed; 	z-index: 800; border-radius: 40px; border: 1px solid #000; padding: 8px 16px; background: #fff; 	transition: all .2s ease-in-out; }
.nav a:hover {
	text-decoration: none!important; 
	background: #FFC7F6;
	border-color: #FFC7F6;
	color: #9E00FF!important;
}

.logo { top: 40px; left: 48px;}
.nav-folio { top: 40px; right: 48px;}
.nav-testimonials { bottom: 40px; left: 48px;}
.nav-about { bottom: 40px; right: 48px;}


.nav ul {
	margin-bottom: 0;
	padding-inline-start: 0;
}

.nav ul li {list-style-type: none; float: left; margin-right: 24px; }
a, a:visited, .intro a:hover, a:active  { color:#9E00FF; outline: none; text-decoration: none; text-shadow: none; 	transition: all 0.1s ease-out 0s;
}
a:focus, a:active { text-decoration: none!important;}
a:hover { text-decoration: underline!important;}
a.logo, .nav ul li a, .nav ul li a:hover, .nav ul li a:active, .logo:hover, .nav ul li a:visited, .logo:visited, .logo:active { text-decoration: none; }
.expertise li a { color: #000;}
.collab { margin-bottom: 24px;}

h2, h3, p, blockquote p, .expertise ul li, .nav a {
	font-size: 1.25vw;
	z-index: 500!important;
	margin-bottom: .5em;
	margin-top: 0;
	line-height: 1.4;
}

h2, blockquote p {
	font-size: 5.5vw;
	font-weight: normal;
	line-height: 1!important;

}


h2 span {  display: inline-block; float: left; margin: 0 10px 50px 170px; }
h2 strong { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: bold;}

.intro .is-active {
	opacity: 0;
	animation-duration: 1s;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: both;

	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
}


h3 span { text-decoration: none!important; display: block;}

h3 { font-weight: normal;}



.expertise h3, .testimonials h3 {
	border-top: 1px solid #000;
	padding-top: 24px;
	margin-bottom: .5em;
}


/*
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.expertise  {
-moz-animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite;
animation: marquee 10s linear infinite;
}
@-moz-keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
@keyframes marquee {
0% { 
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%) }
100% { 
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
}
*/



 .about .title h2 {
	top: 48px;
	position: absolute;
	left: 48px;
	color: #fff;
	z-index: 1!important;
} 



h3 { margin-top: 0;}

.no-padding-bottom { padding-bottom: 0!important;} 
.no-margin-bottom { margin-bottom: 0!important;} 


.container {
	width: 100%!important;
	padding: 0 48px;
	position: relative;
	z-index: 300;
}

.case .container {
	padding: 100px 48px 0 48px;

}

.intro { padding: 152px 0 70px 0; }





.freelance:hover:after, .freelance:active:after {
	background: url(../img/gifs/freelance.gif) no-repeat !important;
	-webkit-user-select: none; -webkit-touch-callout: none;}


.frontend:hover:after, .frontend:active:after {
	background: url(../img/gifs/frontend.gif) no-repeat !important;
	-webkit-user-select: none; -webkit-touch-callout: none;}

	
.clients:hover:after, .clients:active:after {
	background: url(../img/gifs/giphy4.gif) no-repeat !important;
	-webkit-user-select: none; -webkit-touch-callout: none;}

.more:hover:after, .more:active:after {
	background: url(../img/gifs/more.gif) no-repeat !important;
	-webkit-user-select: none; -webkit-touch-callout: none;}


.lala:hover:after, .lala:active:after {
	background: url(../img/gifs/prototyping.gif) no-repeat !important;
	-webkit-user-select: none; -webkit-touch-callout: none;}


.freelance:hover::before, .frontend:hover:before, .clients:hover:before, .more:hover:before, .lala:hover:before {
	width: 100%;
	height: 100%;
	content: '';
	position: fixed;
	bottom: 0;
	left: 0;
	opacity: .5;
	z-index: -1;
}


.freelance:hover::before { opacity: .1; background: #000;}
.frontend:hover:before { opacity: .1!important; background: #000;}
.clients:hover:before { opacity: .1!important; background: #000;} 
.more:hover:before { opacity: .1!important; background: #000;}
.lala:hover:before { opacity: .1!important; background: #000;}


.freelance:hover:after, .frontend:hover:after, .digitaldesign:hover:after, .clients:hover:after, .more:hover:after, .lala:hover:after  {
	display: block;
	content: '';
	top: 15%;
	left: 20%;
	z-index: -2!important;
	width: 60%;
	height: 60%!important;
	background-size: cover;
	background-size: 100%!important;
	position: fixed;

}


.expertise ul {
	list-style-type: none;
	padding: 0;
	overflow: hidden;
}

.expertise ul li {
	margin-bottom: 16px;
}

.expertise ul li strong, .expertise p strong  {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	display: block;
}

.skills ul { margin-bottom: 96px!important; } 
.skills ul li, .kunden-container ul li {  display: block; margin-bottom: 0; } 
.skills ul li:after, .kunden-container ul li:after {content: ""; }
.skills ul li:last-child:after, .kunden-container ul li:last-child:after { content: "";}

.tools { margin-top: 100px;}


.tools li {
	width: 25%!important;
	text-indent: -9999em;
	display: inline-block;
	 margin-right: 0!important;
	 overflow: hidden;
	 position:relative;
	 height: 400px;

} 

.tools li img {
	margin: 0 auto 100px;
}

.tools li:after { content: ""!important;}


.border { -webkit-box-shadow: 0px 0px 160px 3px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 160px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 160px 3px rgba(0,0,0,0.1);
}


.portfolio {
	position: relative;
	padding: 0;
	background: #fff;
}

.case {
	position: relative;
	margin-bottom: 0;
	padding-bottom: 200px;
}
.case img {
	text-align: center;
	max-width: 100%;
	display: block;
	margin: 0 auto 300px;

}


.tablet img { max-width: 70%!important;}

.about { padding-bottom: 100px; overflow: hidden;}


.left {
	margin-left: 30px!important;
}

.right {
	margin-right: 30px!important;
}

 .case .greybg img { margin-bottom: 200px;}


.smaller img { max-width: 50%; }
.dkms .smaller img, .dkms .smaller video { max-width: 50%; }

 .title, .full-width  { width: 100%!important; max-width: 100%!important;}


.video  { margin: 0 auto 300px; display: block; max-width: 100%;}
header .video { width: 100%; margin: 0 auto;}

.case p {
	margin-bottom: .75em;

}


.greybg {
	background:#f8f8f8; overflow: hidden; margin: 0 0 200px 0;padding: 200px 0 0 0;
	width: 100%;
	overflow: hidden;
}

.greybg.white { background: #fff;}



.title {
	width: 100%;
	position: relative;
}

.title::after {
	content: '';
	position: absolute;
	right: 100px; 
	z-index: 2;
	top:100px;
}
.title img { margin-bottom: 0!important; max-width: 100%!important;}

.title-xs { display: none!important;}


.testimonials img { width: 100%;}
.josefseibel .title:after { background: url(../img/logos/logo_josefseibel.svg) no-repeat; width: 129px; height: 70px;} 
.pflegenetzwerk .title:after { background: url(../img/logos/logo_pnd.svg) no-repeat; width: 214px; height: 105px;} 
.detomaso .title:after { background: url(../img/logos/logo_detomaso.svg) no-repeat; width: 84px; height: 87px;} 
.emirates .title:after { background: url(../img/logos/logo_emirates.svg) no-repeat; width: 175px; height: 175px;} 
.froneri .title:after { background: url(../img/logos/logo_froneri.svg) no-repeat; width: 289px; height: 99px;} 
.telekom .title:after { background: url(../img/logos/logo_telekom.svg) no-repeat; width: 135px; height: 66px;} 
.a2p .title:after { background: url(../img/logos/logo_a2p.svg) no-repeat; width: 355px; height: 80px;} 
.dkms .title:after { background: url(../img/logos/logo_dkms.svg) no-repeat; width: 278px; height: 84px;} 
.ingdiba .title:after { background: url(../img/logos/logo_ing.svg) no-repeat; width: 318px; height: 48px;} 
.bolz .title:after { background: url(../img/logos/logo_bolz.svg) no-repeat; width: 193px; height: 105px;} 
.doubox .title:after { background: url(../img/logos/logo_douglas.svg) no-repeat; width: 331px; height: 61px;} 
.wrm .title:after { background: url(../img/logos/logo_wrm.svg) no-repeat; width: 150px; height: 150px;} 
.dhl .title:after { background: url(../img/logos/logo_dhl.svg) no-repeat; width: 304px; height: 44px;} 
.schaefer .title:after { background: url(../img/logos/logo_schaefer.svg) no-repeat; width: 150px; height: 150px;} 

.kerrygold { display: none;}


/*
.schaefer h2, .schaefer h3, .schaefer p, .schaefer .expertise li { color: #ED1C24;}
.schaefer.case { background: #fff!important;}


.pflegenetzwerk h2, .pflegenetzwerk h3, .pflegenetzwerk p, .pflegenetzwerk .expertise li { color: #EC7561;}
/*.pflegenetzwerk.case { background: #5E2669!important; }*/

/*
.detomaso h2, .detomaso h3, .detomaso p, .detomaso .expertise li { color: #fff;}
.detomaso.case { background: #A79A6C!important;}



.ingdiba h2, .ingdiba h3, .ingdiba p, .ingdiba .expertise li { color: #fff;}
.case.ingdiba { background: #61A6DB;}

.dailyui h2, .dailyui h3, .dailyui p, .dailyui .expertise li { color: #fff;}
.case.dailyui { background:  #00E3A3;}


.emirates h2, .emirates h3, .emirates p,  .emirates .expertise li { color: #fff;}
.case.emirates { background:  #FF807B;}



.froneri h2, .froneri h3, .froneri p,  .froneri .expertise li { color: #fff;}
.froneri.case { background: #00B9DB;}


.telekom h2, .telekom h3, .telekom p,  .telekom .expertise li { color: #E20074;}


.a2p h2, .a2p h3, .a2p p, .a2p .expertise li { color: #fff;}
.a2p.case { background: #00B28B;}



.dkms h2, .dkms h3, .dkms p, .dkms .expertise li { color: #fff;}
.dkms.case { background: #623A9E;}



.doubox h2, .doubox h3, .doubox p, .doubox .expertise li { color: #000;}
.doubox.case { background: #BBE3D7;}


.bolz h2, .bolz h3, .bolz p, .bolz .expertise li { color: #a800ff;}
.kcp h2, .kcp h3, .kcp p, .kcp .expertise li { color: #0047BA;}
.dhl h2, .dhl h3, .dhl p, .dhl .expertise li { color: #d40511;}

.dhl.case { background: #FFD329;}

*/


blockquote { border: none; padding: 0; }
blockquote span { color: #000; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: bold;}
blockquote.screen { margin-bottom: 100px;}



@keyframes fadeInUp {
    from {
        transform: translate3d(0,100px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,100px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.screen {
	margin-bottom: 300px;
	opacity: 0;
}


.is-active {
	animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;

    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}


@media screen and (max-width: 2000px) {
}


@media screen and (max-width: 1920px) {
	.case { padding-bottom: 100px;}
	.case .container { padding: 75px 50px 0 48px;}
	.case img { margin: 0 auto 200px;} 
	.case img, .video, header .video { max-width: 80%; max-width: 100%;}}
	.case .smaller img { max-width: 50%;}
	.greybg { padding: 150px 0 0 0; margin: 0 0 150px 0;}
	.screen { margin-bottom: 100px;}
	#instafeed li  { padding: 25px 50px;}
	.tools li img  { width: 35%!important;}
	.tools li { height: 300px;}
	h3, .expertise h3, p, .expertise ul li, .nav a { font-size: 1.5vw;}
}


@media screen and (max-width: 1680px) {
	.container { padding: 0 40px;}
	.intro  { padding: 120px 0;}
	.case .container { padding: 100px 50px 0 50px;}
	blockquote.screen { margin-bottom: 50px;}

}

@media screen and (max-width: 1500px) {

	h2, blockquote p { font-size: 4.5vw; line-height: 1.2!important;}
	.intro { padding: 96px 0 32px 0;}
	.intro br { display: none;}
	.title:after { background-size: 70%!important; right: 0; top: 50px; }
	.testimonials .container { padding-top: 50px;}
	h2 span { margin: 0 10px 50px 100px; }
	.tools li { width: 33%!important; height: 250px;}
	.container {	padding: 0 32px;}
	.logo { left: 32px; top: 24px;}
	.nav-folio { right: 32px; top: 24px;}
	.nav-testimonials { left: 32px; bottom: 24px;}
	.nav-about { right: 32px; bottom: 24px;}

}

@media screen and (max-width: 1280px) {

	.case .container { padding: 50px 32px 0 32px;}
	.freelance:hover:after, .frontend:hover:after, .digitaldesign:hover:after, .clients:hover:after, .more:hover:after, .lala:hover:after  { width: 70%; height: 70%!important; left: 15%; top: 15%;}
	h3, .expertise h3, p, .expertise ul li, .nav a { font-size: 2vw;}


}

@media screen and (max-width: 1024px) {
	.container { padding: 0 30px;}
	.case .container { padding: 75px 30px 0 30px;}
	.testimonials .container { padding-top: 50px;}
	.case img { margin: 0 auto 150px;} 
	h2 span { margin: 0 10px 50px 50px; }


}


@media screen and (max-width: 991px) {
	.display-none { display: none;} 
	.expertise h3 { margin-bottom: 10px!important;}
	#instafeed li { width: 100%;}
	.title:after { display: none; }
	.video  { margin: 0 auto 100px;}
	.greybg { padding: 50px 0 0 0; margin: 0 0 50px 0;}
	.skills ul { margin-bottom: 48px!important;}

	p.about-clients { margin-bottom: 75px!important;}
	#instafeed li { padding: 0;}
	#instafeed li img { margin-bottom: 30px;}
	.testimonials .title h2, .about .title h2 { top: 48px;}
	.case .container { padding: 50px 30px 0 30px;}
	.tablet { display: none;}
	.title img { display: none!important;}
	img.title-xs, .testimonials .title img, .about .title img { display: block!important;}
	.bolz .smaller img { max-width: 30%;  }
	#instafeed { padding-top: 0;}

	.tools li { height: 200px;}


}

@media screen and (max-width: 768px) {
	.intro { width: 100%!important;	}
	.case img, .video { max-width: 100%;}
	.expertise ul li { float: none;}
	.expertise ul li { width: 100%;}
	.kunden-container { display: block;}
	.freelance:hover:after, .frontend:hover:after, .digitaldesign:hover:after, .clients:hover:after, .more:hover:after, .lala:hover:after  { width: 60%; height: 60%!important; left: 20%; top: 10%;}
	.case  img { margin-bottom: 100px;}
	.case .greybg img { margin-bottom: 100px;}
	h2 span { margin: 0 10px 50px 0; }
	.tools li { width: 50%!important; height: 250px; float: left!important;}
	.nav a { padding: 4px 8px;}
	h4 { font-size: 2vw;}
	.skills ul li:after, .kunden-container ul li:after {content: "";}


}

@media screen and (max-width: 600px) {
	h3, .expertise h3, p, blockquote p, .expertise ul li, .nav a { font-size:4vw;}
	h2, blockquote p { font-size: 7.8vw; line-height: 1.2!important; margin-bottom: .75em;}

}


@media screen and (max-width: 500px) {
	.intro { padding: 80px 0 32px 0;}
	.container { padding: 0 20px;}
	.case .container { padding: 30px 20px 0 20px;}
	.case  img { margin-bottom: 100px;}
	.nav ul li { margin-left: 0; margin-right: 1.3em;}
		.testimonials .title h2, .about .title h2 { top: 0; left: 20px;}
	.expertise ul, .expertise p { margin-bottom: 40px!important;}
	.about.case { padding-bottom: 0!important;}
	.freelance:hover:after, .frontend:hover:after, .digitaldesign:hover:after, .clients:hover:after, .more:hover:after, .lala:hover:after  { width: 80%; height: 80%!important; left: 10%; top: 10%;}
	.tools li { width: 50%!important; height: 180px;}
	.tools li img { width: 40%!important;}
	.tools { margin-top: 50px;}
	.logo { left: 20px; top: 20px;}
	.nav-folio { right: 20px; top: 20px;}
	.nav-testimonials { left: 20px; bottom: 20px;}
	.nav-about { right: 20px; bottom: 20px;}

}

@media screen and (max-width: 375px) {
	.title::after { display: none;}


	.border { -webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.1);
		box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.1);}
	 .expertise p, .expertise ul { margin-bottom: 30px!important;}
	 .tools li { width: 50%!important; height: 150px;}


}