/* v1.0 | 10/2017 | B. Hallerbach */

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,footer,header,nav,section{display:block;}figcaption,figure,main{display:block;}figure{margin:1em 40px;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;-webkit-text-decoration-skip:objects;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underlinedotted;}b,strong{font-weight:inherit;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}dfn{font-style:italic;}mark{background-color:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}audio,video{display:inline-block;}audio:not([controls]){display:none;height:0;}img{border-style:none;}svg:not(:root){overflow:hidden;}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,html[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{display:inline-block;vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details,menu{display:block;}summary{display:list-item;}canvas{display:inline-block;}template{display:none;}[hidden]{display:none;}

/* --- Defaults --- */
@-webkit-keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fade-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes fly-around {
    0% { -webkit-transform: translateX(300%); transform: translateX(300%)}
    49% { -webkit-transform: translateX(-10%); transform: translateX(-10%)}
    50% { -webkit-transform: translateX(-10%); transform: translateX(-10%)}
    51% { -webkit-transform: translateX(-10%); transform: translateX(-10%)}
    99% { -webkit-transform: translateX(300%); transform: translateX(300%)}
    100% { -webkit-transform: translateX(300%); transform: translateX(300%)}
}
@keyframes fly-around {
    0% { -webkit-transform: translateX(300%);transform: translateX(300%)}
    49% { -webkit-transform: translateX(-10%);transform: translateX(-10%)}
    50% { -webkit-transform: translateX(-10%);transform: translateX(-10%)}
    51% { -webkit-transform: translateX(-10%);transform: translateX(-10%)}
    99% { -webkit-transform: translateX(300%);transform: translateX(300%)}
    100% { -webkit-transform: translateX(300%);transform: translateX(300%)}
}
@-webkit-keyframes fly-through {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    75% { -webkit-transform: translateX(400%); transform: translateX(400%); opacity: 1; }
    76% { -webkit-transform: translateX(400%); transform: translateX(400%); opacity: 0; }
    77% { -webkit-transform: translateX(-150%); transform: translateX(-150%); opacity: 0; }
    78% { -webkit-transform: translateX(-150%); transform: translateX(-150%); opacity: 1; }
    100% { -webkit-transform: translateX(0); transform: translateX(0); }
 } 
@keyframes fly-through {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    75% { -webkit-transform: translateX(400%); transform: translateX(400%); opacity: 1; }
    76% { -webkit-transform: translateX(400%); transform: translateX(400%); opacity: 0; }
    77% { -webkit-transform: translateX(-150%); transform: translateX(-150%); opacity: 0; }
    78% { -webkit-transform: translateX(-150%); transform: translateX(-150%); opacity: 1; }
    100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes pulse {
	0% { transform: scale(0.9); }
	50% { transform: scale(1); }	
	100% { transform: scale(0.9); }
}
@keyframes pulse {
	0% { transform: scale(0.9); }
	50% { transform: scale(1); }	
	100% { transform: scale(0.9); }			
}
@font-face {
    font-family: 'mitr';
    src: url('../fonts/Mitr-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto';
    src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'roboto_condensed';
    src: url('../fonts/RobotoCondensed-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sansation';
    src: url('../fonts/Sansation-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'icon-font';
    src: url('../fonts/icon-font.woff?oci0op') format('woff');
	font-weight: normal;
	font-style: normal;
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}
body {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #555555;
	background-color: #fcfcfc;
    line-height: 1;
	-webkit-overflow-scrolling: touch;
	-webkit-animation: fade-in ease-in-out 1s;
	-moz-animation: fade-in ease-in-out 1s;
	animation: fade-in ease-in-out 1s;
}
*, :before, :after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #046aaa;
    cursor: pointer;
}
a:hover { color: #78b4dc; }
a.active {text-decoration: underline; }
img {
    max-width: 100%;
    height: auto;
	border: 0;
}

/* Typography */
h1, h2, h3 { font-family: 'roboto_condensed'; }
h1 { font-size: 2em; }
h2 { font-size: 1.3em; }
p {
	font-size: 1.125em;
	font-weight: 200;
	line-height: 1.5;
}
.small { font-size: 0.9rem; }
i {
	font-family: 'icon-font' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
    line-height: 1;
}
.icon-mail:before { content: "\e603"; }
.icon-up:before { content: "\e60d"; }
.icon-box-plain:before { content: "\e617"; color: #F9AE00; }


/* Positioning */
.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.justify { text-align: justify; }
.left { text-align: left; }
.right { text-align: right; }

/* Grid system */
.container {
	margin-left: auto; margin-right: auto;
	padding-left: 15px; padding-right: 15px;
}
.container:before, .container:after { content: " "; display: table; }
.container:after { clear: both; }
.row { margin-left: -15px; margin-right: -15px; }
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
[class*="col-"] {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}
@media (min-width: 992px) {
    .container{ max-width: 970px; }
    .col-1, .col-2, .col-3, .col-4,
    .col-5, .col-6, .col-7, .col-8,
    .col-9, .col-10, .col-11 { float: left; }
    .col-1 { width: 8.33333%; }
    .col-2 { width: 16.66667%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33333%; }
    .col-5 { width: 41.66667%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33333%; }
    .col-8 { width: 66.66667%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33333%; }
    .col-11 { width: 91.66667%; }
    .col-12 { width: 100%; }
    .pull-1 { right: 8.33333%; }
    .pull-2 { right: 16.66667%; }
    .pull-3 { right: 25%; }
    .pull-4 { right: 33.33333%; }
    .pull-5 { right: 41.66667%; }
    .pull-6 { right: 50%; }
    .pull-7 { right: 58.33333%; }
    .pull-8 { right: 66.66667%; }
    .pull-9 { right: 75%; }
    .pull-10 { right: 83.33333%; }
    .pull-11 { right: 91.66667%; }
    .push-1 { left: 8.33333%; }
    .push-2 { left: 16.66667%; }
    .push-3 { left: 25%; }
    .push-4 { left: 33.33333%; }
    .push-5 { left: 41.66667%; }
    .push-6 { left: 50%; }
    .push-7 { left: 58.33333%; }
    .push-8 { left: 66.66667%; }
    .push-9 { left: 75%; }
    .push-10 { left: 83.33333%; }
    .push-11 { left: 91.66667%; }
    .skip-1 { margin-left: 8.33333%; }
    .skip-2 { margin-left: 16.66667%; }
    .skip-3 { margin-left: 25%; }
    .skip-4 { margin-left: 33.33333%; }
    .skip-5 { margin-left: 41.66667%; }
    .skip-6 { margin-left: 50%; }
    .skip-7 { margin-left: 58.33333%; }
    .skip-8 { margin-left: 66.66667%; }
    .skip-9 { margin-left: 75%; }
    .skip-10 { margin-left: 83.33333%; }
    .skip-11 { margin-left: 91.66667%; }
}

/* --- Sections --- */
#top {
    margin: 0;
    padding: 0;
    background-color: #d4e5f6;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
#top-header {
    background-color: #d4e5f6;
    position: fixed;
	top: 0;
	left: 0;
	height: 70px;
	width: 100%;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    z-index: 99;
}
#top-header.hide { top: -300px; }
#top-header.fade { background-color: rgba(212,229,246,.8); }
#top-header .col-nav-left {
    width: 20%;
    float: left;
    padding-right: 0;
}
#top-header .col-nav-right {
    width: 80%;
    float: left;
    padding-left: 0;
}
#top-header .header-icon {
    height: 50px;
    width: 50px;
    margin: 10px 0;
}
#top-header a {
    cursor: pointer;
	vertical-align: middle;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#top-header nav { float: right; }
#top-header nav ul {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    display: block;
}
#top-header nav li {
    font-family: 'roboto_condensed';
    font-size: 1.5em;
    text-shadow: 1px 1px #fcfcfc;
    line-height: 2.5em;
    list-style: none;
    float: left;
    padding-left: 30px;
}
/* Hamburger navigation */
nav #menu-icon {
    color: #fcfcfc;
	cursor: pointer;
    display: none;
	position: relative;
	left: -30px;
	top: 23px;
}
nav #menu-icon span,
nav #menu-icon span:before,
nav #menu-icon span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 4px;
  width: 30px;
  background: #555555;
  position: absolute;
  display: block;
  content: '';
}
nav #menu-icon span:before {
  top: -8px; 
}
nav #menu-icon span:after {
  bottom: -8px;
}
nav #menu-icon span,
nav #menu-icon span:before,
nav #menu-icon span:after {
  transition: all 500ms ease-in-out;
}
nav #menu-icon.active span {
  background-color: transparent;
}
nav #menu-icon.active span:before,
nav #menu-icon.active span:after {
  top: 0;
}
nav #menu-icon.active span:before {
  transform: rotate(45deg);
}
nav #menu-icon.active span:after {
  transform: rotate(-45deg);
}
@media (max-width: 640px) {
    #top-header { height: 50px; }
    #top-header .header-icon {
        height: 40px;
        width: 40px;
        margin: 5px 0;
    }
    #top-header nav ul { 
		display: none;
		position: absolute;
		background: #d4e5f6;
		right: 0;
		top: 50px;
		width: 120px;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	}
	#top-header nav li {
        display: block;
        float: none;
		width: 100%;
		padding: 0 10px;
		margin: 5px;
        line-height: 1.3em;
	}
	nav #menu-icon { display: block; }
}
#top-title {
    background: url(../images/duesseldorf.png) no-repeat bottom;
    min-height: 480px;
    max-width: 800px;
    margin: 0 auto;
}
#top-title .drone-wrapper {
    margin: 0 auto;
    width: 100%;
}
#top-title #drone {
    position: relative;
    top: 100px;
    left: 75%;
    width: 300px;
    height: 200px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
}
#top-title .balloon {
    position: absolute;
    top: 100px;
    left: 30%;
    width: 10%;
    height: 10%;
    background-image: url("../images/balloon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-animation: fly-around 15s ease infinite;
    animation: fly-around 15s ease infinite;
    will-change: transform
}
#top-title .zeppelin {
    position: absolute; 
    top: 230px;
    left: 10%;
    width: 25%;
    height: 10%;
    background-image: url("../images/zeppelin.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-animation: fly-through 25s linear infinite;
    animation: fly-through 25s linear infinite;
    will-change: transform;
}
@media (min-width: 768px) and (min-height: 400px) {
    #top-title #drone {
        background-image: url(../images/drone.png);
    }
    #top-title .balloon {
        width: 6%;
        height: 6%;
    }
    #top-title .zeppelin {
        height: 6%;
    }
}
#typed, #typed-strings p {
    font-family: 'mitr';
    font-size: 1.7em;
    text-shadow: 1px 1px #fcfcfc;
}
#typed .bup, #typed-strings .bup {
    font-family: 'sansation';
    font-weight: normal;
}
#top-title-projects {
    background: url(../images/projects-title.png) no-repeat center;
    min-height: 350px;
    max-width: 800px;
}
#top-title-projects .projects-title { top: 110px; }
#top-title-projects h1 {
    font-family: 'mitr';
    font-size: 3em;
    text-shadow: 1px 1px #fcfcfc;
}

#divider { margin: 0 auto; max-width: 170px;}
#divider .divider-line {
    height: 100px;
    width: 100%;
    background: url(../images/divider.png) no-repeat center center;
}

article { text-align: center; margin: 0 auto; max-width: 500px; }
article figure { margin: 0 auto; }
article figure img { width: 100%; }
article header { text-align: center; }
article p { font-size: 1.25rem; }

#hello { padding-top: 3em; }
#hello figure { max-width: 220px; }
#hello figure.pulse {
	-webkit-animation: pulse 10s linear infinite;
	animation: pulse 10s linear infinite;
}
#work #design,
#work #develop { margin-top: 2em; }
#work #design figure,
#work #develop figure { max-width: 174px; }
@media (min-width: 992px) {
    #work article { max-width: 100%; }
    #work article p,
    #work article h3 { text-align: justify; max-width: 430px; }
}
#help { padding-bottom: 3em; }
#help a { color: #fcfcfc; }
#help .mail-btn {
    font-family: 'roboto_condensed';
    text-align: center;
    display: block;
    background: #046aaa;
    height: 2em;
    width: 240px;
    padding: .25em;
    margin: 0 auto;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
#help .mail-btn:hover { background: #78b4dc; }
#help .mail-btn i { padding-right: .5em; }

#projects { padding-top: 3em; padding-bottom: 2em; }
#projects article { max-width: 400px; }
#projects figure { max-width: 174px; }
#kluempkes { background: #c2d2a2; }
#pal-web { background: #c7a7a7; }
#sb-bc { background: #aaaaaa; }
#tls-bc { background: #999999; }
#tls-web { background: #92c4ce; }
#tls-womo { background: #5585b5; }
#web-project { background: #fde0c5; }
.project-list { padding: 2em 0; }
.project-preview { max-width: 600px; margin: 0 auto; }
.project-info { max-width: 500px; margin: 0 auto; color: #ffffff; }
.dark-text { color: #555555; }

#legal-text { padding-top: 90px; padding-bottom: 20px; }

/* --- Footer --- */
footer {
    background-color: #555555;
    color: #fcfcfc;
	width: 100%;
    padding: 25px 0;
}
footer a {
    font-family: 'roboto_condensed';
    font-size: 1.25rem;
    color: #fcfcfc;
}
#link, #copy {
    font-size: 0.9rem;
    line-height: 50px;
	text-align: center;
    vertical-align: middle;
}
@media (min-width: 992px) {
    #link { text-align: left; }
    #copy { text-align: right; }
}

/* --- Scroll-to-top --- */
a.scroll-to-top {
    background: rgba(200, 200, 200, 0.5) none repeat scroll 0% 0%;
    cursor: pointer;
    display: block;
    position: fixed;
    bottom: 30px;
    right: 0;
    z-index: 999;
    text-align: center;
    width: 45px;
    height: 30px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
a.scroll-to-top:hover { background: #78b4dc; opacity: .8; }
a.scroll-to-top.hide { bottom: -200px; }
a.scroll-to-top i {
    font-size: 24px;
    color: #555555;
    display: inline-block;
    margin-top: 3px;
}