/* FONTS */
/* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-regular - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-500 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-600 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-700 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
  /* open-sans-800 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  
html,body {
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans', sans-serif;
  line-height: 20px;
  color: #6d6d6d;
  height:100%;
}
.floatl{float:left;}
.floatr{float:right;}
.clear{clear:both;}
h1 {
  font-size: 1.2em;
  font-weight: bold;
}
h2 {
  font-size: 1.1em;
}
h3 {
  font-size: 1em;
  font-weight: bold;
}
p{
  font-size: 0.9em;
}
#main_wrapper{
  width:1980px;
  height:1020px;
}
#header{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;  
}
.mousemove{
  top:500px;
  left:400px;
  z-index:30;
}
/*--------------------------------------------Draggable InfoBox----------------------------------------*/

#infos {
  position: absolute;
  z-index: 9;
  background-color: #fff;
  text-align: left;
  border: 2px solid #f5ce68;
  width:250px;
  font-size:0.8em;
  border-radius:4px;
  box-shadow:2px 2px 5px rgba(0,0,0,0.2);
}
#infosheader {
  background: url(../img/cornertopleft.jpg) 2px 2px no-repeat; 
  padding: 0.05em;
  text-align: center;
  height:50px;
  cursor: move;
  z-index: 10;
  background-color: #f5ce68;
  color: #6d6d6d;
  text-shadow: 1px 1px  rgba(255,255,255,0.5);
}
#infoBox{
  position: fixed;
  right:10%;
  width:250px;
  bottom: 300px;
  height:30px;
  margin-left:auto;
  margin-right:auto; 
  max-width:1000px;
}
#main{
  padding:20px;
}
#grafik{
background: url("../img/messe_tisch_plexy.jpg") no-repeat;
background-size: contain;
width:100%;
height:100%;
}
/*--------------------------------------------Seiten----------------------------------------*/
canvas { 
  width: 400px;
  height: 100%;
}
#start{
  position:absolute;
  width:340px;
  height:100px;
  left:50%;
  margin-left:-170px;
  text-align:center;
  top:50%;
}
.h3willkommen{
  font-size:1.4em;
  text-decoration:none;
}
a.h3willkommen{
  color:#6d6d6d;
}
a.h3willkommen:hover{
  color:#f5ce68;
}
.pwillkommen{
  font-size:0.8em;
}
.container{
  min-height: 100%;
  margin-top:-20px;
  margin-bottom:-50px;
}
#wrapper{
  left:auto;
  right:auto;
  height: auto;
  background:#fff;
}
#verticalalign{
  position:relative;
  width:300px;
  margin-top:-80px;
  margin-bottom:40px;
  text-align: center;
}
#projekt{
  position: absolute;
  left:auto;
  right:auto;
  height: auto; 
  min-height: 100%;
  width:100%;
}
.hell:hover{
  opacity:0.3;
}
.milliongame{
  background: url(../img/projekt/Million.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.skills{
  background: url(../img/projekt/LKWmask.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.rasierer{
  background: url(../img/projekt/USB_rasierer.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.plakat{
  background: url(../img/projekt/plakat.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.stilltocome{
  background: url(../img/projekt/stilltocome.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.messetisch{
  background: url(../img/projekt/plexytisch.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.aquarium{
  background: url(../img/projekt/Aquarium.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.heizung{
  background: url(../img/projekt/heizung.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.messespiel{
  background: url(../img/projekt/messespiel.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#content{
  padding: 0 10px;
}
.test{
  writing-mode: vertical-lr;
text-orientation: mixed;
}
.active, .taphover{
  background:red;
}

/*--------------------------------------------Videos----------------------------------------*/
#videos{
  margin: 200px auto 0px auto;
  max-width:720px;
}
#animations{
  margin: 200px auto 0px auto;
  max-width:720px;
}
.zwanzig{
margin-right:20px;
}
.card .img-top {
  display: none;
  position: absolute;
  z-index: 99;
}
.card {
  width: 350px;
  height: 197px;
  position: relative;
  display: inline-block;
  margin-bottom:75px;
}
.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.card:hover .img-top {
  display: inline;
}
/*--------------------------------------------Formular----------------------------------------*/
#form{
  margin: 0px auto;
  padding-top:150px;
  max-width:600px;
  margin-bottom:90px;
  height: auto; 
  min-height: 100%;
}
.stern label:after{
  content:" " "*";
  color:red;
}
*,*:before,*:after {
  box-sizing:content-box;
}
.form{margin:0.5em 0;}
fieldset{
  margin:1em 1em 0 1em;
  padding:1.3em 1.3em 0 1.3em;
  border: 2px solid #f5ce68;
  border-radius:4px;
  box-shadow:2px 2px 5px rgba(0,0,0,0.2);
}
.error{
  font-size:0.8em;
  color:red;
}
label{
  display:inline-block;
  /* min-width:10em; */
  vertical-align:top;
}
input.kontakt,textarea.kontakt,select.kontakt{
  width:97%;
  margin:0;
  border-radius:3px;
  padding:8px;
  border:1px solid #f5ce68;
  }
.submit{
  margin-left:235px;
  margin-top:20px;
  float:left;
  color:#333;
  width:25%;
  height: 30px;
  border:1px solid #f5ce68;
  background:#eee;
}
.submitButton{
  margin: 20px 0px 20px 0px;
  float:left;
  color:#333;
  width:97%;
  height: 30px;
  border:1px solid #f5ce68;
  background:#eee;
}
.reset{
  margin-top:20px;
  padding:0;
  float:right;
  color:#6f6f6f;
  width:20%;
  height: 30px;
  border:1px solid #f5ce68;
  background:#fff;
}
#loginForm{
  max-width:250px;
  padding: 325px 40px 0px 40px;
  margin-left:auto;
  margin-right:auto; 
  height:440px;
  background: url(../img/icons/login/login.svg) center center;
  background-repeat: no-repeat;
}
.titlelogin{
  color:white;
  font-size:1.5em;
  padding:30px 0 15px 80px;
  margin:0px;
}
.feldLogin{
  background:white;
  margin:0px 0 15px 5px;
  text-align:center;
  border:none;
  color:#2e2e2e;
  border-radius:4px;
  padding:7px 0;
}
.submitLogin{
  background:#eee;
  text-align:center;
  border:none;
  margin:30px 0 10px 5px;
  text-align:center;
  border-radius:4px;
  padding:10px 0;
}
.inputlogin{
  border:none;
  text-align:center;
  padding:0px;
  color:#555454;

}
.pflichtfeld{
  font-size:0.7em;
  margin:0;
  padding:0;
} 
  /*--------------------------------------------Impressum----------------------------------------*/

/*--------------------------------------------Lebenslauf----------------------------------------*/
#lebenslauf{
  padding-top: 150px;
  width:1000px;
  margin-left:auto;
  margin-right:auto;
  height: auto; 
  min-height: 100%;
  }

.gb{
  font-size: 100%;
  line-height:20px;
  color:#6d6d6d;
  font-size:2em;
  margin-top: 10px;
}
#hobbies ul{
  list-style:none;
  height:40px;
  margin:0;
  padding:0;
  }
#row1_1{
background:url("../img/Gwendal_Bonneel.png") no-repeat;
width:340px;
height:375px;
border-top-left-radius:4px; 
border-bottom-left-radius:4px; 
}
#row1_2{
  margin:10px 0 0 20px;
  padding:10px 0 0 20px;
  height:375px;
  width:320px;
  }
.cv{
  margin:-5px 0 30px 20px;
  display:block;
}
.mail{
  text-decoration: none;
  color: #6d6d6d;
}
.tel{
  text-decoration: none;
  color: #6d6d6d;
}
#row1_3{
  background:url("../img/Orangerechts10.png") no-repeat;
  width:300px;
  height:375px; 
  border-top-right-radius:4px; 
  border-bottom-right-radius:4px; 
}
.hobbies{
  color:#6d6d6d;
  font-size:1em;
  padding-top:10px;
}
.padd30{
  padding-right:30px;
}
.adress{
  width:24px;
}
.kontakt{
  width:15px;
}
.geburt{
  width:15px;
}
/*--------------------------------------------kenntniss----------------------------------------*/
ul{
  list-style:none;
  margin:0;
  padding:0;
  }
#kenntniss{
  width:935px;
  margin: 150px auto 0 auto;
  height:200px;
  top:10px;
  position: relative;
  padding-bottom:60px;
}
#row2_1{
  width:67%;
  height:200px;
}
#row2_2{
   width:2%;
   height:200px;
   border-left:2px solid #f5ce68;
 }
#row2_3{
  width:28%;
  height:200px;
  margin-left:0px;
}
.prog{
  font-size:0.9em;
}
/*--------------------------------------------Download----------------------------------------*/
#download{
  list-style:none;
}
fieldset#download{
  padding-bottom:20px;
  padding-left:25px;
}
#downloadLebenslauf{
  border-top-left-radius:4px; 
  background:#eeeeee;
  padding-top:35px;
  width: 49%;
  height: 135px;
  border-bottom:6px solid white;
  border-right:6px solid white;
}
#downloadPortfolio{
  border-top-right-radius:4px; 
  background:#eeeeee;
  padding-top:60px;
  width: 49%;
  height: 110px;
  border-bottom:6px solid white;
}
#downloadZeugnis{
  border-bottom-left-radius:4px; 
  background:#eeeeee;
  padding-top:35px;
  width: 49%;
  height: 135px;
  border-right:6px solid white;
}
#downloadInfos{
  border-bottom-right-radius:4px; 
  background:#eeeeee;
  padding-top:35px;
  width: 49%;
  height: 135px;
}
.mittig{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  color:#555454;
  font-size: 1em;
  text-decoration: none;
}
.mittig:hover{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  color:#f5ce68;
  font-size: 1em;
  text-decoration: none;
}
.link a{text-decoration: none;}
/*FILTER VORSCHAU*/
.greyscale{filter:url(filter.svg#css_greyscale);
  -webkit-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  list-style:none;} 

.greyscale:hover{-webkit-filter:url(filter.svg#normal);
  filter:url(filter.svg#normal);
  filter:grayscale(0%) sepia(0%) invert(0%) blur(0px);
  animation: fade 1.2s linear;
}
@keyframes fade{
  0%, 100%  { opacity: 1; filter:none;transition:opacity 1s}
  50%  { opacity: 0.95; transition:opacity 2s}
}
/*--------------------------------------------footer----------------------------------------*/
#footer{ 
  width:100%;
  height:40px;
}

#containerfooter{
  position: relative;
  max-width:1000px; 
  height:40px;
  bottom:-10px;
  margin-left:auto; 
  margin-right:auto;
  background:#f5ce68;
  text-align: center;
  padding-top:7px;
  padding-right:10px;
  box-shadow:0px 0px 3px rgba(0,0,0,0.2); 
  border-radius:4px 4px 0px 0px 
}

footer ul{
  height:6px;
  margin:2px 0 0 auto;
  list-style:none;
}

footer li{float:left;}

.impressum{
  list-style:none;
  text-decoration: none;
  bottom:0px;
  padding:0.5em 0 0.5em 0;
  margin-right:10px;
  color:#6d6d6d;
  font-size:0.8em;
}
.copyright{font-size:0.8em;padding:0em 0 0.5em 0;}

.impressumTrenner{
  list-style:none;
  text-decoration: none;
  line-height:0px;
  padding:0.6em 0 0.5em 0;
  margin-right:10px;
  color:#6d6d6d;
}
.impressum:hover{
  color:#000;
}
#impressum{
  position: relative;
  margin:50px auto 100px auto;
  padding-left:50px;
  padding-right:50px;
  left:auto;
  right:auto;
  margin-top:50px;
  width:935px;
  top: 70px;
  bottom: 150px;
}

/*--------------------------------------------fehlerMeldung----------------------------------------*/
#fehlerMeldung{
  max-width:1000px;
  padding: 75px 0px 0px 0px;
  margin-left:auto;
  margin-right:auto; 
  height:558px;
  text-align:center;
}
.no_login{
    margin: 0px auto;
    padding-top: 150px;
    max-width: 600px;
    margin-bottom: 90px;
    height: auto;
    min-height: 100%;
}

/*--------------------------------------------Media Query----------------------------------------*/
/* @media screen and (max-width:992px){
  #wrapper{
    max-width:200px;
  }
}
  /*--------------------------------------------Media Query----------------------------------------*/