@import url("../webfontkit/stylesheet.css");
@import url("animate.css");


/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
	text-align: center;
	margin: 0.2em 0;
	background: #C33;
	color: #000;
	padding: 0.2em 0;
	font-family: Arial, Helvetica, sans-serif;
}

/* Global */

body {
	font: 1.4em/1.8 'misoregular',"Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #8d8d8d;
	letter-spacing: 0.02em;
	background: #000 url(../img/dark-wood.jpg) no-repeat fixed center top;
	background-size: cover;
	-webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
	-0-hyphens: auto;
  hyphens: auto;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
p {
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 0 0 1em;
}
ul, li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
img {
	max-width: 100%;
}
a:link {
	color: #bec200;
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
a:hover {
	color: #8d8d8d;
	text-decoration: none;
}
a:visited {
	color: #bec200;
	text-decoration: none;
}
a:focus { outline: none;}

address {
	font-style: normal;
}
address p {margin: 0 0 0.25em;}
address p:nth-child(3) {margin: 0 0 1em;}
p.copy {text-align: center;}
/* SCROLL-UP */ 
#scrollUp {
    background: url(../img/up4.svg) no-repeat scroll 0 0;
		background-size: 100%;
    bottom: 20px;
    height: 1em;
    right: 20px;
    width: 1em;
}



/* Navigation */


nav {
	position:fixed; 
	top:0; 
	width:100%;
	height:auto;
	z-index:100;
	opacity:0;
}
.lt-ie9 nav {
	position: absolute;
	left: 0px;
	display: none;
}
nav .container { 
	background: rgba(255, 255, 255, 1);
	-webkit-box-shadow: 0px 2px 4px rgba(3, 3, 3, 0.2);
	-moz-box-shadow: 0px 2px 4px rgba(3, 3, 3, 0.2);
	-o-box-shadow: 0px 2px 4px rgba(3, 3, 3, 0.2);
	-ms-box-shadow: 0px 2px 4px rgba(3, 3, 3, 0.2);
	box-shadow: 0px 2px 4px rgba(3, 3, 3, 0.2);
}
.visible {opacity:1;}
.lt-ie9 nav {
	position: absolute;
	left: 0px;
	display: none;
}
.lt-ie9 .visible {display: block;}
#logo {
	text-align: center;
	margin: 10px 0;
	
}
#logo h2 {
	/* Text */
	font-size: 1.4em;
	line-height: 2em;
	color: #bec200;
	/* Positioning & Display */
	display: inline-block;
	margin: 0em;
	padding: 5px;
	z-index: 2;
	border: 5px solid;
  border-radius: 100%;
  height: 60px;
  width: 60px;
}
#logo h2 span {font-size: 0.6em; letter-spacing: -0.06em;}
#nav {
	text-align: right;
}
.navigation {
	float: right;
	list-style: none;
	margin: 0;
	text-align: center;
}
.navigation li{
	color: #bec200;
	 border-top: 10px solid rgba(0, 0, 0, 0);
   display: inline-block;
   margin: 0;
   padding: 1.4em 1em 0;
	 -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}
.navigation li:hover{
	cursor:pointer;
	color: #8d8d8d;
	border-top: 10px solid rgba(0, 0, 0, 0);
}

.navigation .active{
	cursor:pointer;
	color: #8d8d8d;
	border-top: 10px solid #BEC200;
}




/* General Slides */ 

.slide{
	background-attachment: fixed;
	width:100%;
	height:auto;
	position: relative;
	padding: 5em 0;
}
aside {
	text-align: right;
	padding-right: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
aside  h2 {
	line-height: 0.8em;
	color: #464646;
	margin-bottom: 3px;
	margin-top: 0;
}
aside  h5 {
	font-family: 'journalregular', Arial, Helvetica, sans-serif;
	line-height: 1.2em;
	color: #bec200;
	margin: 0.6em 0;
	letter-spacing: 0.12em;
	display: inline-block;
	top: -6px;
	position: relative;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

/* Header */

header {
	text-align: center;
	border-bottom: 1px solid #d4d4d4;
}
header h1 {
	/* Text */
	font-size: 4em;
	line-height:0.666667em;
	color: #d4d4d4;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
	/* Positioning & Display */
	display: inline-block;
	margin: 0.35em 0em;
	z-index: 2;
}
header h1 span {font-size: 0.6em; letter-spacing: -0.06em;}

header h1:before,
header h1:after {
	/* Elemants */
    border-top: 1px solid #d4d4d4;
    content: " ";
	/* Positioning & Display */
    display: block;
    height: 1px;
    width: 38%;
    position: absolute;
    left: 0;
    top: 28%;
	z-index: 1;
}
header h1:after {
   right: 0;  
   left: auto; 
}
header h2 {
	font-size: 1.15em;
	color: #d4d4d4;
	margin: -30px 0 25px 0;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}
header h3 {
	font-size: 1.5em; /* 25px/10 */
	line-height: 1.2em; /* 30px/25px */
	color: #a4a5a6;
	margin: 2em 3em 0;
}
header h4 {
	font-size: 1em; /* 25px/10 */
	line-height: 1.2em; /* 30px/25px */
	color: #a4a5a6;
	margin: 2em 0em 0;
}
.button {
	width:1em;
	height: 1em;
	display: inline-block;
	position:relative;
	margin-bottom: -3em;
	background: url(../img/down4.svg) no-repeat center center;
	background-size: 100%;
}
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}

@-moz-keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}

.button {
-webkit-animation-name: blink;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 3;
-moz-animation-name: blink;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: 3;
animation-name: blink;
animation-duration: 5s;
animation-iteration-count: 3;
} 
small { 
	font-family: 'journalregular', Arial, Helvetica, sans-serif;
	font-size: 60%;
	color: #bec200;
	letter-spacing: 0.12em;
	display: inline-block;
	top: -6px;
	position: relative;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}


/* Slide 1 */ 

#slide1 .container { 
	background: rgba(255, 255, 255, 1);
	padding: 3em 0;
}
#slide1 .circle {
	/* Positioning & Display */
	border-radius: 50%;
	width: 200px;
	height: 200px;
	display: inline;
	position: relative;
	float: left;
	margin-right: 20px;
	margin-top: 4px;
	/* Elemants */
	border: 4px solid white;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 15px rgba(3, 3, 3, 0.3);
	-moz-box-shadow: 0px 0px 15px rgba(3, 3, 3, 0.3);
	-o-box-shadow: 0px 0px 15px rgba(3, 3, 3, 0.3);
	-ms-box-shadow: 0px 0px 15px rgba(3, 3, 3, 0.3);
	box-shadow: 0px 0px 15px rgba(3, 3, 3, 0.3);
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	transform: rotate(10deg);
}
#slide1 article {
	padding-left: 30px;
	position: relative;
	border-left: 1px solid #D4D4D4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#slide1 article p:last-child {
	margin-bottom: -3px;
}

/* contact info */
.cont_info {
	overflow: hidden;
}
ul.soc li {
	display: inline-block;
	margin:  0 2% 2% 0;
}
ul.soc li a {color: #bec200; text-decoration: none;}
ul.soc img {
	max-width: 100%;
}
ul.info {
	margin-top: 0.5em;
}
ul.info li {
	padding-bottom: 20px;
	font-size: 0.9em;
}
ul.info li span {
	/* Text */
	color: #8D8D8D;
	/* Positioning & Display 
	margin: 0; padding: 0;
	margin-top: -4px;
	position: relative;*/
}
ul.info li a, ul.info li a:hover {
	color: #959595;
	text-decoration: none;
	line-height: 0em;
}
.icon-social-xing,
.icon-social-linkedin,
.icon-social-facebook,
.icon-social-dasauge {font-size: 1.6em; line-height: 1.2em;}
.icon-mobile,
.icon-phone-hook,
.icon-pin,
.icon-mail {font-size: 1.4em; line-height: 1.4em;}



/* Slide 2 */ 

#slide2 .container { 
	background: rgba(255, 255, 255, 1);
	padding: 3em 0;
}
#slide2 article {
	padding-left: 30px;
	position: relative;
	border-left: 1px solid #D4D4D4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.skill_level {
	margin-top: 10px;
	padding: 0 12px 0 7px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.skill_level h4{
	/* Text */
	font: 1.2em; /* 14px/10 */
	line-height: 1.071428em; /* 15px/14px */
	color: #464646;
	text-align: center;
	/* Positioning & Display */
	margin-top: -10px;
	margin-bottom: 0px;
}
.progressbar {
	width: 100%;
	height: 13px;
	margin: 0 auto 20px auto;
	padding: 0px;
	background: #cfcfcf;
	border-width: 1px;
	border-style: solid;
	border-color: #aaa #bbb #fff #bbb;
	box-shadow: inset 0px 2px 3px #bbb;
}
.progressbar, .progressbar-inner {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}
.progressbar-inner {
	width: 77%;
	height: 100%;
	background: #999;
	background-size: 100%;
	background: rgb(190,194,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(190,194,0,1) 0%, rgba(92,103,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(190,194,0,1)), color-stop(100%, rgba(92,103,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(190,194,0,1) 0%, rgba(92,103,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(190,194,0,1) 0%, rgba(92,103,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(190,194,0,1) 0%, rgba(92,103,0,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(190,194,0,1) 0%, rgba(92,103,0,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bec200', endColorstr='#5c6700', GradientType=0 ); /* IE6-9 */
	box-shadow: inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2);
}
/*
 * Color Options
 */

.progressbar-inner {
	background-color: #f2c345;
}
.percent_10 .progressbar-inner {
	width: 10%;
}
.percent_20 .progressbar-inner {
	width: 20%;
}
.percent_30 .progressbar-inner {
	width: 30%;
}
.percent_40 .progressbar-inner {
	width: 40%;
}
.percent_50 .progressbar-inner {
	width: 50%;
}
.percent_60 .progressbar-inner {
	width: 60%;
}
.percent_65 .progressbar-inner {
	width: 65%;
}
.percent_70 .progressbar-inner {
	width: 70%;
}
.percent_75 .progressbar-inner {
	width: 75%;
}
.percent_80 .progressbar-inner {
	width: 80%;
}
.percent_85 .progressbar-inner {
	width: 85%;
}
.percent_90 .progressbar-inner {
	width: 90%;
}
.percent_100 .progressbar-inner {
	width: 100%;
}





/* Slide 3 */ 

#slide3 .container { 
	background: rgba(255, 255, 255, 1);
	padding: 3em 0;
}
#slide3 article {
	padding: 0 10px 15px 30px;
	position: relative;
	border-left: 1px solid #D4D4D4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#slide3 .period {
    background-color: #BEC200;
    color: #FFFFFF;
    padding-left: 5px;
    padding-right: 5px;
    position: absolute;
    top: 0;
}
#slide3 article header {
    padding-left: 155px;
		text-align: left;
}
#slide3 article header h2 {
    color: #464646;
    font-size: 1.4em;
    line-height: 1em;
    margin-top: 0;
		text-shadow: none;
}
#slide3 article header h3 {
    color: #8E8E8E;
    font-size: 1.2em;
    line-height: 0.535714em;
    padding-bottom: 5px;
		margin: 0.5em 0 1em;
}


/* Slide 4 */

#slide4 .container { 
	background: rgba(255, 255, 255, 1);
	padding: 3em 0;
}
#slide4 article {
	
}
/* gallery */
.gallery {
	margin-top: -10px;
	padding-left: 30px;
	position: relative;
	border-left: 1px solid #D4D4D4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.gallery h5,
.gallery h6,
.gallery p {
	font-size: 65%;
	color: #616161;
	line-height: 1.1em;
  margin: 0.5em 0.5em;
}
.gallery h5,
.gallery h6 { color: #464646; font-size: 0.85em;}

.gallery figure {
	text-align: center;
	margin-bottom: 1em;
	border: 4px solid white;
	height: 8em;
	overflow: hidden;
	visibility:hidden;
	-webkit-box-shadow: 0px 0px 5px rgba(3, 3, 3, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(3, 3, 3, 0.3);
	-o-box-shadow: 0px 0px 5px rgba(3, 3, 3, 0.3);
	-ms-box-shadow: 0px 0px 5px rgba(3, 3, 3, 0.3);
	box-shadow: 0px 0px 5px rgba(3, 3, 3, 0.3);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.no-js .gallery figure {
	visibility:visible;
}
.gallery figure:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	
}
.gallery figure figcaption {
	position: absolute;
	bottom: -175px;
	left: 0px;
	display: block;
	width: 100%;
	height: 7.65em;
	text-align: center;
	background: rgba(255, 255, 255, 0.8);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.gallery figure:hover figcaption { 
	bottom: 0px;
	}
.gallery figure img { 
	opacity: 1;
}
.gallery figure:hover img { opacity: 0.3;}
.gallery h2 { clear: both;}


/* Slide 5 */

#slide5 .container { 
	background: rgba(255, 255, 255, 1);
	padding: 3em 0;
	position: relative;
}
#slide5 article {
	
}
#slide5 form {
	padding: 0 30px;
	position: relative;
	border-left: 1px solid #D4D4D4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#contact  input, #contact  label, #contact  textarea {
	display: block;
	margin-bottom: 1.5em;
}
#contact  label { margin-top: 0 }
#contact input, #contact textarea {
    font-size: 0.7em;
    border: 1px solid #D8D8D8;
    outline: 0 none;
    padding: 5px;
    width: 98%;
		background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE 1px, #FFFFFF 25px) repeat scroll 0 0 transparent;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		transition: all 0.5s ease;
}
#contact input#submit {
	font: 1.2em 'misoregular',"Trebuchet MS", Arial, Helvetica, sans-serif;
	background: #BEC200;
	float: right;
	margin: 0;
	width: 8em;
}
#contact textarea { width: 98%; font: normal 0.7em/150% Arial, Helvetica, sans-serif;  }

#contact input:hover, 
#contact textarea:hover {
    border-color: #B0B0B0;
}
#contact input:focus, 
#contact textarea:focus  {
    border-color: #BEC200;
}
form label.error {
    margin-top:-1em;
    margin-bottom:1em;
    font-size:0.8em;
    line-height:1em;
    color:#c0392b
}
form label#answer,
form input#answer {display: inline-block; width: 48.74%;}
form input[type="text"].error, form input[type="password"].error, form input[type="date"].error, form input[type="datetime"].error, form input[type="datetime-local"].error, form input[type="month"].error, form input[type="week"].error, form input[type="email"].error, form input[type="number"].error, form input[type="search"].error, form input[type="tel"].error, form input[type="time"].error, form input[type="url"].error, form textarea.error {
    background:#e6e6e6;
    border-color:#c0392b;
}
fieldset {
    border:0px;
    margin:0;
    padding:0;
}
.required {
    color:#e9266d;
}
#success, #error {
    display:none;
}
#success span, #error span {
    display:block;
    position:absolute;
    top:0;
    width:100%;
}
#success span p, #error span p {
    margin-top:12em;
		text-align: center;
}
#success span p {
    color:#000;
}
#error span p {
    color:#c0392b;
}

/* Footer */

footer .container { 
	background: rgba(255, 255, 255, 1);
	padding: 3em 0;
}
/* imprint */
.imprint {
	margin-top: -10px;
	padding-left: 30px;
	position: relative;
	border-left: 1px solid #D4D4D4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}



/* Tablet */
@media screen and (max-width: 1024px) {

header h3 {
    margin: 2em 2em 0;
}
.navigation li {
	padding: 1.4em 0.75em 0;
}
.slide{
	width:100%;
	position: relative;
	padding: 10% 0;
}
.icon-social-xing, 
.icon-social-linkedin, 
.icon-social-facebook, 
.icon-social-dasauge {
    font-size: 1.4em;
}


}
/* Tablet */
@media screen and (max-width: 800px) {
#slide1 .circle {height: 120px; width: 120px;}
ul.soc li {
    display: inline-block;
    margin: 0 -2% 2% 0;
}
.icon-social-xing, 
.icon-social-linkedin, 
.icon-social-facebook, 
.icon-social-dasauge {
    font-size: 1.2em;
}
ul.info li {text-align: center;}
ul.info li span {display: block;}	
}


/* Mobile */
@media screen and (max-width: 568px) {
header h1 {font-size: 2em;}
header h2 {font-size: 0.88em; margin: -20px 0 25px;}
header h1:before, header h1:after {
	top: 12%;
  width: 25%;
}
header h3 {margin: 0; font-size: 1.3em;}
.button {
    margin-bottom: -0.5em;
}
#logo {
	display: none;
}

#nav {
	display: none;
	width:100%;
	margin:5px 0;
}

.navigation{
	width: 100%;
	list-style: none;
	margin: 0;
	padding:0;
}

.navigation li {
	width: 22%;
	padding: 0;
	border: none;
	font-size: 90%;
}
.navigation li:hover,
.navigation .active  { border: none;}
.navigation li:nth-child(4) { display: none;
}
.slide {
    padding: 5% 0;
    position: relative;
    width: 100%;
}
ul.soc li {
    margin: 0 2% 2% 0;
}
ul.info li {text-align: left;}
ul.info li span {display: inline;}	
#slide1 article,
#slide2 article,
#slide3 article,
#slide5 form {
    display: block;
    padding: 0 4%;
		border: none;
		margin: 0;
}
#slide1 .circle { display: block; float: none; margin: 2% auto; width:200px; height:200px;}
.cont_info {
    -moz-box-sizing: border-box;
    display: block;
    overflow: hidden;
    padding: 5% 4% 0;
}
.cont_info ul {margin-left: auto; margin-right: auto; width: 65%;}
.skill_level,
.imprint {
    -moz-box-sizing: border-box;
    display: block;
    overflow: hidden;
    padding: 5% 4% 0;
		margin: 0;
		border: none;
}
#slide3 .period {position: relative;}
#slide3 article hgroup {
    padding-left: 0px;
		font-size:80%;
}
#slide3 article hgroup h3 {
    line-height: 1em;
}
#slide4 {display: none;}
aside {
	display: block !important;
	text-align: center;
	padding: 0;
}
.container .grid_1, 
.container .grid_2, 
.container .grid_3, 
.container .grid_4, 
.container .grid_5, 
.container .grid_6, 
.container .grid_7, 
.container .grid_8, 
.container .grid_9, 
.container .grid_10, 
.container .grid_11, 
.container .grid_12 {
	float: none;
	width: 100%;
	margin: 0;
}


}