html, body{margin: 0; padding: 0; height:100%;  text-align: center;}
section{ min-height:100%;}
a { text-decoration: none;}
li{ list-style-type: none;}
h1 { font-family: 'Roboto', sans-serif; font-weight: 500; color: #233d76; text-transform: uppercase;}
h2, h3, a { font-family: 'Roboto', sans-serif; font-weight: 500; color: #233d76; text-transform: uppercase;}
h2{color: #233d76}
h3{ font-size: 40px; padding-top: 8%; margin-bottom: 5px; }
h4, p  {font-family: 'Roboto Slab', serif; color: #233d76}
h5, h6 {font-family: 'Roboto', sans-serif;font-weight: 500; color: #000000; text-transform: uppercase;}
h9 { font-size: 40px; padding-top: 8%; margin-top: 10px; }
hr {width: 30px; height: 3px; background: #233d76; border:0px; margin: 0 auto 40px auto;}
#logo, li, img, .button{ transition: all 200ms; -webkit-transition: all 200ms; -o-transition: all 200ms; -moz-transition: all 200ms;}
.fa-bars{ display: none;}
/*Header *********************/


header{width: 100%; height: 65px; position: fixed; top: 0; left: 0;
  background-color: #ffffff; box-shadow: 0 1px 3px; rgba(0, 0, 0, 0.1); z-index: 1;}
#logo {width: 140px; float: left; margin: 10px 0 0 50px;}
#logo:hover{ opacity: 0.5}
#logo img {width: 100%}

header nav {float: right; margin: 10px 50px 0 0}
header nav ul li {float: left; margin-left:25px}
header nav ul li a{ font-size: 16px;}
header nav ul li:hover{ padding-top: 5px}


/*home *********************/
#home {background-image: url(../img/banner.jpg);
background-position: center center;
background-size: cover;
background-attachment: fixed;}
#home h1{ margin: 120px auto 0 auto; font-size: 110px}
#home h2 {margin: 0  auto 0 auto; font-size: 30px;}
.fa-angle-double-down { color: #8bd1ea;font-size: 50px; width: 32px; margin-top: 150px; opacity: 1;}
.fa-angle-double-down:hover {opacity: 0.8;}



/*about *********************/

#about img {width: 360px}
#about img:hover {transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);}
#about h4{ font-size: 40px;}
#about p {width: 700px;margin:0 auto 0 auto;}

/*about *********************/

#work { background-color: #8bd1ea;}
#projekts {width: 900px
            margin 0 auto 0 auto;}

#projekts ul {padding: 0}
#projekts ul li {width: 33.3%;float: left;
margin-bottom: 15px}
#projekts img {
  width: 280px;
  height: 170px;
  border-radius: 5px
}
#projekts img:hover {transform: scale(1.5);-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-o-transform: scale(1.5); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3)}

/*Contact *********************/

/*form input, textarea{
  font-family: 'Roboto Slab', serif;
  font-size: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
  boarder: 2px solid;
  boarder-color: #494949;
  outline: none;
}

form input:first-child{
  margin-top: 10px;
}

form input{
  width: 552px;
  height: 30px;
}
form textarea{
  width: 550px;
  height: 200px;
  resize: none;

}

.input_text{
  color: #494949;
  padding-left: 10px;
}

.button{
  background-color: #f0f0f0;
  color: #4949494;
  width: 566px;
  height: 50px;
}
.button:hover {
  background-color: #494949;
  color: f0f0f0;
}

/*footer *********************/
footer{
  width: 100%;
  height: 70px;
  background-color: #3f3f3f;
}

footer p {
  font-size: 12px;
  color: #f0f0f0;
  padding-top: 30px
}


#impressum h5, m3 { color: black; margin: 100px auto 0 auto; font-size: 40px}
#impressum h6 { color: black; margin: 100px auto 0 auto; font-size: 25px}
#impressum p{ color: black; margin: 20px auto 0 auto; font-size: 18px; width: 80%}
#impressum strong { color: black; margin: 20px auto 0 auto; font-size: 18px; width: 80%}
#impressum a { color: black; margin: 20px auto 0 auto; font-size: 18px; width: 80%}
#impressum{background-image: url(../img/logog.svg);
padding-top: 100px;
background-position: bottom;
background-repeat: no-repeat;
background-size:40%;
background-attachment: fixed;
}


/*media quer *********************/

/*tablet *********************/

@media screen and (max-width: 1024px){
  header{ height: auto; }
  #logo { width: 100px; margin-top: 5px}

  header nav { margin-top: 0;}
header nav ul li {font-size: 12px;}

#home  h1{ font-size: 70px;margin-top: 200px}
#home  h2 {font-size: 22px}

h3 {padding-top: 12%;}

#about p {width: 80%;}

#projekts {width: auto}
#projekts ul li {width: 100%; float:none;}
#projekts ul li:last-child{padding-bottom: 20%}

#projekts img{width: 55%; height: auto;}

form input, form textarea{width: 60%}
.button {width: 62%}}
/*mobile *********************/


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

  #logo { width: 90px; margin-left: 30px}

  header nav { margin: 0; float: none;}
  .fa-bars{ font-size: 17px; display: inline-block; width: 100%; cursor: pointer;
    text-align: right; float: right; margin: -25px 30px 0 0;}
.fa-bars:hover{ opacity: 0.5}

header nav ul { height: 0; overflow: hidden; margin: 0; padding: 0; width: 100%;}

header nav ul.open{ height: 100%;}

header nav ul li {width: 100%; padding: 5px 0;margin: 0; font-size: 11px; border-top: 1px solid #dddddd;}

header nav ul li:hover{ background-color: #eeeeee}

#home   h1 {font-size: 50px; margin-top: 200px}
#home  h2 {width: 70%; height: auto;}

#projekts img {width: 70%; height: auto;}

form input,form textarea{width: 70%}
.button {width: 72%}

}