/* ==========================================================================
 * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
   ========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
html {-webkit-tap-highlight-color:rgba(0,0,0,0);}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}


/* ========================================================================== 
 * Basic styles
   ========================================================================== */
@font-face {font-family:'Bebas Neue';src:url('fonts/BebasNeue.otf') format('truetype');font-weight:normal;font-style:normal;}
body {font-family:'Lato','Helvetica Neue',Arial,sans-serif;font-size:95%;font-weight:300;}
* {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
*::-moz-selection {background:#33587a;color:#FFF;text-shadow:none;}
*::selection {background:#33587a;color:#FFF;text-shadow:none;}
hr {height:4px;width:140px;background-color:#999999;margin:2em auto 2em;border:0 none;}
hr.title {background-color:#FFF; margin:1.5em auto;}
hr.work-dash {height:1px;width:140px;background-color:#C0C0C0;margin:2.55em auto 3.75em;border:0 none;}
img {vertical-align:middle;}
noscript {position:fixed;left:0;top:0;width:100%;height:60px;font-size:80%;text-align:center;line-height:60px;color:#808080;background-color:#262626;opacity:0.9;z-index:9999;}
.clearfix:before, .clearfix:after {content:" ";display:table;}
.clearfix:after {clear:both;}


/* ========================================================================== 
 * Div-container
   ========================================================================== */
.dunkelblau {color:#2f465c;}
.dunkelblau2 {color:#335270;}
.blau {color:#386288;}
.hellblau {color:#3a6fa0;} 

header {position:relative;width:100%;overflow:hidden;}
section {position:relative;padding:3.25em 0 4.375em 0;background-color:#FFF; }
#imprint p,#imprint ul ul {padding: 0 10px; }
section hr {background-color:#33587a;}
footer {position:relative;padding:2.75em 0 2.25em;text-align:center;border-top:1px solid #E6E6E6;}
footer .left, footer .right {width:100%;}
footer .right {margin-top:0.75em;}
#mainheader {height:28.5em;background:url('img/welt.png') no-repeat bottom;background-size:cover;background-color:#386288;}
#mainheader2 {height:18.5em;background:url('img/welt.png') no-repeat bottom;background-size:cover;background-color:#386288;}


#title {position:relative;padding-top:5em;text-align:center;}
#page {position:relative;min-height:320px;}
#hello, #work, #contact {background-color:#F2F2F2;}
#loading {position:fixed;left:0;top:0;width:100%;height:100%;background-color:#33587a;z-index:9999;}
.inner {position:relative;width:100%;max-width:1080px;margin:0 auto;}
.item {position:relative;display:block;width:100%;margin-bottom:2.75em;}
.project {position:relative;width:100%;max-width:768px;margin:0 auto 2.75em; text-align:center;}
.project:last-of-type {margin-bottom:0;}

.box {position:relative;margin: 1.75em auto 0 auto; padding-top: 1.75em; background-color:#FFF;border-top:1px solid #C0C0C0;width:100%;}
/*.circle {position:relative;width:128px;height:128px;top:180px;margin:0 auto;padding-top:28px;border-radius:128px;border:2px solid #4989c4;background-color:#FFF;overflow-x:hidden;} */


.iemsg {background-color:#190C0C;color:#FFF;}

.icon {display:block;width:64px;height:64px;margin:0 auto;}
.bild {display:block;width:100%;height:100%;margin:0 auto; background: #999;}

.skill {position:relative;display:block;width:100%;margin:0 auto 0.95em;background-color:#E6E6E6;color:#fff;text-align:center;border-radius:2px;}
.skill:last-of-type {margin-bottom:0;}

.progress {height:1.75em;width:0;background-color:#33587a;line-height:1.75em;border-radius:2px;}
.progress-text-animate {-webkit-animation:skilltext .6s ease-out .6s 1 forwards;animation:skilltext .6s ease-out .6s 1 forwards;}
.progress-lekto-animate {-webkit-animation:skilllekto .6s ease-out .8s 1 forwards;animation:skilllekto .6s ease-out .8s 1 forwards;}
.progress-kurse-animate {-webkit-animation:skillkurse .6s ease-out 1s 1 forwards;animation:skillkurse .6s ease-out 1s 1 forwards;}
.progress-bera-animate {-webkit-animation:skillbera .6s ease-out 1.2s 1 forwards;animation:skillbera .6s ease-out 1.2s 1 forwards;}
.progress-dol-animate {-webkit-animation:skilldol .6s ease-out 1.4s 1 forwards;animation:skilldol .6s ease-out 1.4s 1 forwards;}

#work h3 {margin-bottom:0.5em;}
#work ul {padding-left: 20px; list-style: circle; font-size: 1em;}
#work ul li{text-align:left; margin: 8px 0; padding-bottom: 8px; border-bottom: 1px dotted #ccc;}


.loadimg {position:absolute;left:50%;top:50%;width:0;height:1px;margin-left:-160px;margin-top:-1px;background-color:#FFF;-webkit-animation:loader 5s linear 0s infinite;animation:loader 5s linear 0s infinite;}


@keyframes skilltext {0% {width:0%;} 100% {width:100%;}}
@-webkit-keyframes skilltext {0% {width:0%;} 100% {width:100%;}}
@keyframes skilllekto {0% {width:0%;} 100% {width:80%;}}
@-webkit-keyframes skilllekto {0% {width:0%;} 100% {width:80%;}}
@keyframes skillkurse {0% {width:0%;} 100% {width:95%;}}
@-webkit-keyframes skillkurse {0% {width:0%;} 100% {width:95%;}}
@keyframes skillbera {0% {width:0%;} 100% {width:80%;}}
@-webkit-keyframes skillbera {0% {width:0%;} 100% {width:80%;}}
@keyframes skilldol {0% {width:0%;} 100% {width:50%;}}
@-webkit-keyframes skilldol {0% {width:0%;} 100% {width:50%;}}


@keyframes popup {0% {bottom:180px;}100% {bottom:0px;top:0px;}}
@-webkit-keyframes popup {0% {bottom:180px;}100% {bottom:0px; top:0px;}}
@keyframes loader {0% {width:0;}100% {width:320px;}}
@-webkit-keyframes loader {0% {width:0;}100% {width:320px;}}


/* ==========================================================================  
 * Fonts 
   ========================================================================== */
h1,h2,h3,h4,h5,h6,p,span,blockquote,ul,ol,li,small,em,pre {color:#2c557b;}
h1,h2,h3,h4 {word-wrap:break-word;}
h2 {font-size:175%;text-align:center;text-transform:uppercase;letter-spacing:1px;}
h3 {font-size:125%;text-align:left;text-transform:uppercase;}
p,label {width:100%;margin:0 auto;font-size:112.5%;line-height:1.55em;}
address {margin-top:0.75em;font-size:125%;text-align:center;text-transform:uppercase;line-height:1.6em;color:#33587a;}
#page-title {font-family:'Lato';font-size:200%; font-weight:normal;text-align:center;color:#FFF;letter-spacing:0.1em;}
.subtitle {font-size:135%;text-align:center;line-height:1.7em;color:#FFF;letter-spacing:1px; margin:1em 0;}
#project h1 {font-size:175%;text-align:center;text-transform:uppercase;letter-spacing:1px;}
#project p {padding-bottom:1.25em;}
#about p {width:100%;font-size:112.5%;}
#skills p {margin-bottom:1.25em;}
.skill p {color:#FFF;}

footer p {width:100%;line-height:1.75em;font-size:90%;font-weight:400;color:#4989c4;}
footer ul {margin-bottom:1.25em;}
footer li {display:block;margin:0.75em 0;}

strong, b {font-weight:400;}
.italic, em, i {font-style:italic;}
.center {text-align:center;}
.quote {color:#808080;}


/* ==========================================================================  
 * Links 
   ========================================================================== */
a {text-decoration:none;-webkit-transition:all .25s ease-out 0s;transition:all .25s ease-out 0s;color:#33587a;}
a:hover, a:focus {color:#4989c4;}
footer a {color:#444;font-weight:400;}
footer ul a {font-size:90%;text-transform:uppercase;}
footer a:hover, footer a:focus {color:#C0C0C0;}
#menu {display:block;position:relative;top:10px;width:100%;text-align:center;z-index:99;}
#menu:hover, #menu-desktop :focus {opacity:0.5;}
#nav-menu a {display:block;color:#C2C2C2;line-height:60px;text-align:center;text-transform:uppercase;font-weight:400;border-bottom:1px solid #262626;}
#nav-menu a:hover {background-color:#262626;}
.btn {padding:2px 16px;color:#FFF;background-color:#33587a;line-height:50px;text-transform:uppercase;font-weight:400;text-align:center;border-radius:6px;-webkit-transition:all .25s ease-in 0s;transition:all .25s ease-in 0s;}
.btn:hover, .btn:focus {background-color:#999;color:#FFF;}
.btn-contact {display:block;width:100%;max-width:260px;margin:2.25em auto 0;}
.btn-project {display:block;width:32px;height:32px;margin:0 auto;background:url('img/enter.svg') no-repeat;}
.btn-project:hover {opacity:0.4;}
.btn-more {display:none;}
#awwwards a {display:block;width:70px;height:105px;text-indent:-8000px;background-image:url('img/awwwards_honorable_white_left.png');background-repeat:no-repeat;background-position: 0 0;overflow:hidden;}

#totop {opacity:0;}
#totop {position:fixed; bottom: 100px; right: 20px; z-index:9999999;}
.totop {padding:4px 14px 8px 14px;color:#FFF;background-color:#33587a;text-transform:uppercase;font-weight:400;text-align:center;border-radius:6px;-webkit-transition:all .25s ease-in 0s;transition:all .25s ease-in 0s;}

#navi {position: relative; width: 100%; top: 50px; left: 0;}
.navi {display:block;background:none; margin: 0 auto;}
.navi ul {padding: 0; border: 0px solid #ccc; margin:0;}
.navi ul li {float:left; padding: 0; margin: 0;}
.navi ul li a {color:#fff; padding: 4px 10px; margin: 0 5px; display: block;  border: 1px solid #fff;}
.navi ul li a:hover {border-color:#999;}
.navi ul.first {float:left;}
.navi ul.last {float:right;}
.navi .btn-navi {display:block;position:absolute;left:50%;top:-5px;margin-left:-25px;color:#FFF;background:none;border:1px solid #fff;border-radius:50px; text-align:center;}
.navi .btn-navi:hover, .btn-navi:focus {border-color:#999;background:none;}

a.impress {color:#fff; padding: 4px 10px; margin: 0 5px; display: block;}

/* #lang {position:absolute;top:50px; right:50px; text-align:right; z-index:999999; width: 120px;} */
#language {width:100%; display:block; margin-bottom: 2.5em;}
#lang {width: 120px; margin:1em auto; text-align: center;}
/* #lang a {width: 30px; height: 30px; display:block; margin-right: 10px; float:left; border-radius:30px; } */
#lang a {width: 30px; height: 30px; margin-right: 10px; float:left; border-radius:30px; }
#lang a {opacity:1; }
#lang a:hover {opacity:0.5; }
#lang a.de{background: url(img/de.png) no-repeat center; }
#lang a.en{background: url(img/en.png) no-repeat center; }
#lang a.es{background: url(img/es.png) no-repeat -2px 0; }



/* ==========================================================================  
 * Fallbacks
   ========================================================================== */
.no-js #loading {display:none;}
.no-js nav.hide {transform:translateX(0px);top:0;}
.no-rgba footer {background-color:#190C0C;}
.no-rgba #work .item {border:1px solid #C2C2C2;}
.no-svg .footerimg {display:none;}
.no-cssanimations .progress-text {width:100%;}
.no-cssanimations .progress-lekto {width:90%;}
.no-cssanimations .progress-bera {width:100%;}
.no-cssanimations .progress-dol {width:50%;}
.no-cssanimations .progress-kurse {width:95%;}


/* ==========================================================================  
 * form
   ========================================================================== */


#contact_form{
    width: 600px;
	padding:20px;
	border: 0px solid #DDD;
	border-radius: 5px;
	font-size: 12px;
	font-weight: bold;
	color: #444;
	background:#FAFAFA;
	margin-right: auto;
	margin-left: auto;
}
#contact_form legend{
	font-size: 18px;
	color: #444;
}
#contact_form label{
	display: block;
	margin-bottom:5px;
}
#contact_form label span{
	float:left;
	width:35%;
	color:#444;
    text-align:left;
}
#contact_form input{
	height: 25px;
	border: 1px solid #DBDBDB;
	border-radius: 3px;
	padding-left: 4px;
	color: #444;
	width: 65%;
	font-family: Arial, Helvetica, sans-serif;
}
#contact_form .datenschutz{
	width: 66%;
	font-family: Arial, Helvetica, sans-serif;
    float: left;
    height:35px;
    margin: 10px 0 10px 34%;
}
#contact_form input#agb{
	color: #444;
	width: 20px;
	font-family: Arial, Helvetica, sans-serif;
    float: left;
    height:12px;
}
#contact_form .datenschutz span{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    font-weight: normal;
    width:80%;
}
#contact_form textarea{
	border: 1px solid #DBDBDB;
	border-radius: 3px;
	padding-left: 4px;
	color: #444;
	height:100px;
	width: 65%;
	font-family: Arial, Helvetica, sans-serif;
}
.submit_btn {
	border: 1px solid #D8D8D8;
	padding: 5px 15px 5px 15px;
	color: #444;
	text-shadow: 1px 1px 1px #FFF;
	border-radius: 3px;
	background: #F8F8F8;
}
.submit_btn:hover 
{
	background: #ECECEC;
}
.success{
	background: #CFFFF5;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #B9ECCE;
	border-radius: 5px;
	font-weight: normal;
}
.error{
	background: #FFDFDF;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #FFCACA;
	border-radius: 5px;
	font-weight: normal;
}

ul.liste {list-style: none; padding:0; margin:0;}
ul.liste ul{list-style: circle; padding:auto; margin-left:100px;}



/* ==========================================================================  
 * Start Media Queries 
   ========================================================================== */
@media only screen and (max-width:480px) {
body {font-size:100%;}
#page-title {font-size:100%;}
#title {padding-top:7em;}
/* #lang {left:50%; margin-left:-60px;} */

#totop {display:none;}
.navi {background:none; margin: 0 auto; width:100%;}
.navi ul {padding: 0; border: 0px solid #ccc; margin:0;}
.navi ul li {float:left; padding: 0; margin: 0;}
.navi ul li a {color:#fff; padding: 2px 6px; margin: 0 5px; display: block;  border: 1px solid #fff;font-size: 12px; }
.navi ul li a:hover {border-color:#999;}
.navi ul.first {float:left;}
.navi ul.last {float:right;}
/* .navi .btn-navi {width:32px;height:30px;line-height:26px; font-size: 0.6em; padding: 0; display:none;} */
.navi .btn-navi {display:none;}
.navi a{font-size: 12px;}


.btn-more2 {display:block;width:40px;height:38px;line-height:28px;margin:50px auto 0px auto;color:#444;background:none;border:1px solid #444;border-radius:50px;}
.btn-more2:hover, .btn-more2:focus {color:#999; border-color:#999;background:none;}

.item {position:relative;display:block;width:100%;margin-bottom:2.75em; padding: 0 10px;}
.box {position:relative;margin: 1.75em auto 0 auto; padding-top: 1.75em; background-color:#FFF;border-top:1px solid #C0C0C0;}

#title {position:relative;padding-top:3em;text-align:center;}
#mainheader {height:25.5em;background:url('img/welt.png') no-repeat bottom;background-size:cover;background-color:#386288;}

#contact_form{width:90%;}
#contact_form .datenschutz span{font-family: Arial, Helvetica, sans-serif;font-size: 0.55em;}

}




@media only screen and (max-width:768px) {
body {font-size:107.5%;}
#page-title {font-size:200%;}
#title {padding-top:7em;}
/* #lang {left:50%; margin-left:-60px;} */

footer li {display:inline-block;margin:0 0.55em;}

.navi {display:block;background:none; margin: 0 auto;}
.navi ul {padding: 0; border: 0px solid #ccc; margin:0;}
.navi ul li {float:left; padding: 0; margin: 0;}
.navi ul li a {color:#fff; padding: 2px 8px; margin: 0 5px; display: block;  border: 1px solid #fff;}
.navi ul li a:hover {border-color:#999;}
.navi ul.first {float:left;}
.navi ul.last {float:right;}

.navi .btn-navi {width:36px;height:34px;line-height:30px; font-size: 0.8em; padding: 0;}
.navi a{font-size: 1em;}

.btn-more2 {display:block;width:40px;height:38px;line-height:28px;margin:50px auto 0px auto;color:#444;background:none;border:1px solid #444;border-radius:50px;}
.btn-more2:hover, .btn-more2:focus {color:#999; border-color:#999;background:none;}

#title {position:relative;padding-top:4em;text-align:center;}

}


@media only screen and (min-width:768px /* 768px */) {
body {font-size:120%;}
#page-title {font-size:300%;}
#title {padding-top:7em;}
.layer {background-color:rgba(231,76,60,0.75);}
.project {margin-bottom:4.25em;}
#work .item, #about .item, footer .item {float:left;width:46.296296%;margin:1.8518519%;}
#work .item, .mask, #work img {border-radius:6px;}
#authorimg {width:256px;height:256px;}
h1,h2,h3,h4,h5,h6,p,span,blockquote,ul,ol,li,small,em,pre {color:#2c557b}
p, form, .skill {width:660px;}
address {font-size:175%;}
#about p, .mask p {font-size:95%;}
#about p {font-size:107.5%;}
footer p {font-size:85%}

#title {padding-top:7em;}
.btn {font-size:75%;}
.navi {width: 800px;}
#work .item, #about .item, footer .item {float:left;width:46.296296%;margin:1.8518519%;}
#work .item, .mask, #work img {border-radius:6px;}
p, form, .skill {width:660px;}
#totop {display:block;}

.btn-more2 {display:block;width:50px;height:48px;line-height:36px;margin:50px auto 0px auto;color:#444;background:none;border:1px solid #444;border-radius:50px;}
.btn-more2:hover, .btn-more2:focus {color:#999; border-color:#999;background:none;}

.navi {display:block;background:none; margin: 0 auto; width: 600px;}
.navi .btn-navi {width:50px;height:48px;line-height:36px;}
}



a.link {color:#33587a; border:1px solid #33587a; padding:5px 8px; background:none; border-radius: 5px; display:inline-block;}
a.link:hover {color:#fff; background: #33587a}

p.abstand {margin: 24px 0;}