@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,700);

body {
	font-family: 'Raleway', sans-serif;
  font-weight:200;
  background-color:#dbdae2;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/

#wrap {
  width:1100px;
  margin: auto auto;
  padding-top:70px;
  padding-left:300px;
  padding-bottom:100px;
}
#wrap > a, .bl {
	color: #3B3B3B;
	text-decoration: none;
  text-transform:uppercase;
  font-size:50px;
  width:400px;
  -moz-transition: all 500ms ease-in;
  -webkit-transition: all 500ms ease-in;
  -o-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
}
#wrap > a:hover, .bl:hover {
	background-color:#000;
  color:#fff;
}
#wrap a {
	color: #3B3B3B;
}
#wrap a:hover {
	background-color:#000;
  color:#fff;
}
#wrap h2 {
	font-family: 'Raleway', sans-serif;
  font-weight:400;
  color:#808080;
  font-style:italic;
  margin-top:30px;
}

#header{
  width:100%;
  top:0px;
  position:fixed;
  padding:10px 20px 10px 10px;
  -moz-transition: all 1s ease-in;
  -webkit-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  transition: all 1s ease-in;
}
#header:hover {
  background:#000;
}
#header h1 {
	font-family: 'Raleway', sans-serif;
  font-weight:400;
  font-size:19px;
  float:left;
  color:#fff;
  margin-top:3px;
}
#header img {
  float:right;
  margin-right:20px;
}

/* Bewerbung */

#ph {
  width:50%;
  margin-bottom:20px;
}

.bewerbung #wrap {
  background:none;
  padding-top:70px;
}

.bewerbung h2 {
	font-family: 'Raleway', sans-serif;
  font-weight:400;
  font-size:60px;
  color:#808080;
  font-style:normal !important;
  margin-top:30px;
  margin-bottom:30px;
}
.bewerbung h3 {
	font-family: 'Raleway', sans-serif;
  font-weight:400;
  font-size:30px;
  color:#000;
  font-style:normal !important;
  margin-top:30px;
  margin-bottom:20px;
}

.bewerbung table {
  width:70%;
  margin-left:10%;
  line-height:24px;
}
.bewerbung table tr:hover {
  background-color:#fff;
}
.bewerbung table tr td{
  padding:5px 5px 5px 5px;
  border-bottom:10px solid #dbdae2;
}
.bewerbung table tr td:first-child {
  color:#808080;
  width:30%;
}
.bewerbung ul {
  margin-left:20px;
}
.bewerbung li {
  margin-bottom:4px;
  font-size:15px;
}

.backlink {
  font-size:16px !important;
  text-transform:none !important;
}
.backlink:hover {
  background:none !important;
  color:#000 !important;
  text-decoration:underline !important;
}

/* Projekte */
article h1 {
  display:block;
  margin-bottom:20px;
  margin-top:10px;
}
article {
  display:block;
  margin-bottom:30px;
}
article:hover{
  opacity:0.8;
}
article a {
  display:block;
  float:left;
  margin-right:10px;
}
article figure img {
  width:300px;
}
article ul {
  display:block;
  float:left;
  margin-left:30px;
  line-height:30px;
}
ul.pjkt {
  padding-left:20px;
}
ul.pjkt {
  line-height:30px;
}

@media screen and (max-width: 1400px) {
  #wrap {
    width:100%;
    margin:0px;
    padding-left:0;
    background-size:100%;
    padding-top:70px;
  }
  #wrap > a, #wrap h2, #wrap h3, #wrap p, #wrap article, #wrap > ul , #wrap > table, #wrap > img{
    margin-left:20%;
  }
}
@media screen and (max-width: 1200px) {
  #wrap > a img {
    width:70%
  }

}

@media screen and (max-width: 900px) {
  #wrap > a img {
    width:80%
  }
  #wrap > a, #wrap h2, #wrap h3, #wrap p, #wrap article, #wrap > ul, #wrap > table, #wrap > img {
    margin-left:10%;
  }
  #header img  {
    width:16px;
  }
  #header h1 {
    font-size:12px;
  }
  #wrap h2 {
    font-size:20px;
  }
  #wrap > a, .bl {
    font-size:30px;
    -moz-transition:none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
  #wrap a:hover {
    background-color:transparent;
  }
  .bewerbung table tr td:first-child {
    color:#808080;
    width:180px;
  }
  .bewerbung table {
    width:80%;
  }
}
@media screen and (max-width: 480px) {
  #wrap > a, .bl {
    font-size:24px;
  }
}