@media screen and (min-width: 0rem) and (max-width: 33.5rem) {
  .logo_wrapper, .logo_wrapper_small, .logo_wrapper_no_portrait, .portrait_wrapper,
  .headline, section, footer {
    width: 21rem;
  }

  .portrait_wrapper img {
    left: 6.75rem;
  }

  .greeting, .greeting .headline {
    width: 10.5rem;
    padding-right: 10.5rem;
  }

  .greeting {
    height: 27.875rem;
  }

  .projects {
    margin-top: 0rem; /*distance 2.625*/
  }

  .logo_wrapper_small {
    height: 2.25rem;
  }

  .logo_wrapper_small img {
    height: 100%;
  }

  .logo {
    visibility: visible;
  }

  .back_arrow {
    visibility: hidden;
  }

  .header_image, .header_image img {
    width: 100%;
  }

  .project_header {
    padding-top: 1.5rem; /*distance 2.5rem*/
  }

  .links {
    width: 15.5rem;
    position: relative;
    right: -2.75rem;
  }
}

@media screen and (min-width: 33.5rem) and (max-width: 49rem) {
  .logo_wrapper, .logo_wrapper_small, .logo_wrapper_no_portrait, .portrait_wrapper,
  .headline, section, footer {
    width: 31.5rem;
  }

  .portrait_wrapper img {
    left: 12rem;
  }

  .greeting, .greeting .headline {
    width: 21rem;
    padding-right: 10.5rem;
  }

  .greeting {
    height: 25.25rem;
  }

  .projects {
    margin-top: 0rem; /*distance 10.625rem*/
  }

  .logo_wrapper_small {
    height: 2.25rem;
  }

  .logo_wrapper_small img {
    height: 100%;
  }

  .logo {
    visibility: visible;
  }

  .back_arrow {
    visibility: hidden;
  }

  .header_image, .header_image img {
    width: 100%;
  }

  .project_header {
    padding-top: 1.5rem; /*distance 2.5*/
  }

  .links {
    width: 26rem;
    position: relative;
    right: -2.75rem;
  }
}

@media screen and (min-width: 49rem) and (max-width: 59.5rem) {
  .logo_wrapper, .logo_wrapper_small, .logo_wrapper_no_portrait, .portrait_wrapper,
  .headline, section, footer,
  .header_image, .header_image img {
    width: 42rem;
  }

  .portrait_wrapper img {
    left: 17.25rem;
  }

  .greeting, .greeting .headline {
    width: 26.25rem;
    padding-right: 15.75rem;
  }

  .greeting {
    height: 15.5rem;
  }

  .projects,  .projects .headline{
    width: 31.5rem;
  }

  .projects {
    padding-right: 10.5rem;
  }

  .logo_wrapper_small {
    height: 7.2rem;
  }

  .logo_wrapper_small img {
    height: 2.25rem;
    margin-top: 1.55rem; /*distance 1.55rem*/
  }

  .logo {
    visibility: hidden;
  }

  .back_arrow {
    visibility: visible;
    right: 5.5rem;
  }

  .header_image {
    position: relative;
    top: -7.125rem;
  }

  .header_image img {
    position: absolute;
    right: 0rem;
  }

  .project_header {
    padding-top: 18.25rem; /*distance 19.1875rem*/
  }

  .links {
    width: 36.5rem;
    position: relative;
    right: -2.75rem;
  }

  .description, .imprint, .error404 {
    width: 41.25rem;
    padding-right: 0.75rem;
  }
}

@media screen and (min-width: 59.5rem) {
  .portrait_wrapper,
  .headline, section, footer, .projects, .imprint, .error404 {
    width: 42rem;
    padding-right: 10.5rem;
  }

  .logo_wrapper, .logo_wrapper_no_portrait, .logo_wrapper_small,
  .header_image, .header_image img,
  footer {
    width: 52.5rem;
  }

  .portrait_wrapper img {
    left: 22.5rem;
  }

  .greeting, .greeting .headline {
    width: 31.5rem;
    padding-right: 21rem;
  }

  .greeting {
    height: 14.125rem;
  }

  .projects .headline {
    width: 36.75rem;
    padding-right: 5.25rem;
  }

  .logo_wrapper_small {
    height: 7.2rem;
  }

  .logo_wrapper_small img {
    height: 2.25rem;
    margin-top: 1.55rem; /*distance*/
  }

  .logo {
    visibility: hidden;
  }

  .back_arrow {
    visibility: visible;
    right: 5.5rem;
  }

  .header_image {
    position: relative;
    top: -7.125rem;
  }

  .header_image img {
    position: absolute;
    right: 0rem;
  }

  .project_header {
    padding-top: 24.25rem; /*distance*/
  }

  .links {
    width: 36.5rem;
    position: relative;
    right: 2.5rem;
  }

  .description, .imprint, .error404 {
    width: 41.25rem;
    padding-right: 11.25rem;
  }

  footer a {
    width: 41.625rem;
  }
}

html,body
{
  width: 100%;
  height: 100%;
  margin: 0rem;
  padding: 0rem;
  overflow-x: hidden;
}

header {
  margin-bottom: 0rem;
}

main {
  padding: 0rem;
  width: 100%;
}

section {
  margin:auto;
  padding-top: 0.4rem;
}

footer {
  float: block;
  margin: auto;
  padding: 1rem 0rem 1rem 0rem; /*distance*/
  margin-top: 0.25rem; /*distance*/
}

h1, h2, h3 {
  margin: 0rem;
}

h1 {
  padding: 0rem 0rem 0rem 0.375rem; /*distance*/
}

h2 {
  padding: 0.75rem 0rem 0.5rem 0.375rem; /*distance*/
}

h3 {
  padding: 0rem 0rem 0.25rem 0rem; /*distance*/
}

.gallery ul {
  padding: 0rem;
  margin: 0rem;
}

.gallery li {
  display: inline-block;
  width: 9.75rem;
  margin: 0rem 0.25rem 1.125rem 0.25rem; /*distance*/
  height:8.75rem;
  list-style:none;
  padding: 0rem 0rem 0rem 0rem;
}

figure {
  width: 100%;
  margin: 1.125rem 0rem 0rem 0rem;
  padding: 0rem;
}

figcaption {
  margin: 0.375rem 0rem 0rem 0rem; /*distance*/
  padding: 0.375rem 0.375rem 0rem 0.375rem; /*distance*/
}

footer a {
  display: block;
  padding: 0.75rem 0rem 0rem 0.375rem; /*distance*/
}

.back_arrow
{
  height: 2.25rem;
  display: inline-block;
  position: relative;
}

.logo_wrapper, .logo_wrapper_small, .logo_wrapper_no_portrait, .portrait_wrapper, .portrait_wrapper img, .back_arrow_wrapper {
  margin-left: auto;
  margin-right: auto;
}

.logo_wrapper {
  padding: 0.5rem 0rem 2rem 1rem; /*distance*/
}

.logo_wrapper_small {
  padding: 1rem 0rem 1rem 1rem; /*distance*/
}

.logo_wrapper_no_portrait {
  padding: 2.5rem 0rem 2rem 0.05rem; /*distance*/
}

.logo_wrapper img, .logo_wrapper_no_portrait img {
  height: 4.4705rem;
}

.portrait_wrapper {
  padding: 2rem 1.5rem 0rem 0rem; /*distance*/
  width: 9.5rem;
  position: relative;
}

.portrait_wrapper img {
  position: absolute;
  right: 0rem;
  width: 9rem;
}

.headline {
  padding: 0rem 0em 0.75rem 0rem; /*distance*/
  margin: 0rem 0rem 1.125rem 0rem; /*distance*/
}

.greeting .headline {
  margin-top: 1.5rem; /*distance*/
  margin-bottom: 0rem;
}

.greeting p {
  padding: 0rem 0rem 0rem 0.375rem;
  margin: 0rem;
}

.greeting ul {
  margin: 0rem;
  padding: 0rem 0rem 0.75rem 0rem; /*distance*/
  width: 100%;
}

.greeting li {
  display: inline-block;
  margin: 1rem 0.375rem 0rem 0.375rem; /*distance*/
  width: 9.5rem;
  padding: 0rem;
  display: inline-block;
  vertical-align: top;
  list-style:none;
}

.greeting li a img {
  width: 2.25rem;
  vertical-align: middle;
  margin: 0rem 0.25rem 0rem 0rem;
}

.greeting li a p {
  display: inline-block;
  position: relative;
  top: 0.125rem; /*distance*/
}

.projects ul {
  margin: 0rem;
  padding: 0rem 0rem 0.75rem 0rem; /*distance*/
  width: 100%;
}

.projects li {
  width: 4.5rem;
  height: 9rem;
  margin: 0rem 0.12rem 0.375rem 0.375rem; /*distance*/
  padding: 0rem;
  display: inline-block;
  vertical-align: top;
  list-style:none;
}

.projects li a {
  margin: 0rem;
  padding: 0rem;
}

.projects li img {
  width: 100%;
}

.projects li p {
  margin: 0rem;
  padding: 0.6rem 0rem 0rem 0rem;
}

.teaching ul {
  margin: 0rem;
  padding: 0rem 0rem 0.75rem 0.375rem; /*distance*/
  width: 100%;
}

.teaching li {
  width: 20.75rem;
  height: 4.5rem;
  margin: 0rem 0rem 0.75rem 0rem; /*distance*/
  padding: 0rem;
  display: inline-block;
  vertical-align: top;
  list-style:none;
}

.teaching li a {
  margin: 0rem;
  padding: 0rem;
}

.teaching li img {
  height: 100%;
  float: left;
  display: inline-block;
  padding: 0rem 0.75rem 0rem 0rem; /*distance*/
}

.teaching li h2 {
  vertical-align:top;
  margin: 0rem;
  padding: 0.375rem 0rem 0.375rem 0rem; /*distance*/
}

.teaching li p {
  margin: 0rem;
  padding: 0rem;
}

.skillsbar {
  width: 9.75rem;
  height: 3rem;
  margin: 0rem 0.375rem 0.5rem 0.375rem; /*distance*/
  display: inline-block;
  vertical-align: top;
}

.skillsbar img {
  width: 100%;
}

.header_image, .header_image img {
  padding: 0rem;
  margin: auto;
}

.project_header {
  height: 4.5rem;
  padding-left: 0.75rem;
}

.icon_headline {
  margin-top: 0rem;
}

.icon_headline img {
  height: 4.5rem;
  float: left;
  padding: 0rem 0.75rem 0rem 0rem;
  vertical-align: middle;
}

.icon_headline h1 {
  padding: 0.125rem 0rem 0rem 0rem; /*distance 0.125rem 0rem 0rem 0rem*/
}

.project_headline {
  height: 4rem;
  display: table-cell;
  vertical-align: bottom;
}

.project_info {
  padding-top: 0rem;
  padding-bottom: 0rem; /*distance*/
}

.info_left {
  display: table-cell;
  width: 2.625rem;
  padding-left: 5.75rem;

}

.info_right {
  display: table-cell;
}

.links {
  padding: 0.25rem 0rem 0rem 0rem;
  margin-top: 1rem;
}

.links a {
  display: inline-block;
  margin: 0rem 0.5rem 0rem 0.25rem; /*distance*/
  width: 9.5rem;
}

.links a img {
  width: 2.25rem;
  vertical-align: middle;
  margin: 0rem 0.75rem 0rem 0rem;
}

.links a p {
  display: inline-block;
  position: relative;
  top: 0.125rem; /*distance*/
}

.description {
  padding-top: 1.625rem; /*distance*/
  padding-bottom: 0.625rem; /*distance*/
}

.imprint, .error404 {
  padding-top: 1.875rem; /*distance*/
}

.description p, .imprint p, .error404 p {
  padding-left: 0.375rem;
}

.gallery {
  padding-top: 0rem; /*distance*/
  padding-bottom: 0rem; /*distance*/
}

.gallery img {
  width: 100%;
}

.gallery .headline {
  margin-bottom: 0rem;
}