/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/

@media (min-width: 30em) {
  /* min-width: 480px */

  .site-description {
    left: 120px;
  }

  .site-description .description-text-inner {
    left: 60px;
  }

  #content .logo-content {
    display: block;
  }

}

@media (min-width: 50em) {
  /* min-width: 800px */

  #header::after {
    background-image: url("/images/supervision-florian-inkofer_bg-header_l.jpg");
  }

  #header .site-logo, 
  #header .site-slogan span,
  #content {
    width: 600px;
  }

  .site-description {
    top: 10px;
    left: 110px;
  }

  .site-description .description-profile {
    top: 180px;
    left: 0;
    width: 200px;
    height: 200px;
    padding-top: 5px;
    -moz-border-radius:     100px;
    -webkit-border-radius:  100px;
    border-radius:          100px;
  }

  .site-description .description-profile img {
    width: 180px;
    height: 180px;
    -moz-border-radius:     90px;
    -webkit-border-radius:  90px;
    border-radius:          90px;
  }

  .site-description .description-text {
    left: 160px;
    width: 400px;
    height: 400px;
    -moz-border-radius:     200px;
    -webkit-border-radius:  200px;
    border-radius:          200px;
  }

  .site-description .description-text-inner {
    left: 50px;
    width: 340px;
    height: 240px;
    margin-top: -110px;
    font-size: 13.5px;
    font-size: 1.35rem;
  }
}

@media (min-width: 80em) {
  /* min-width: 1280px */

  body {
    font-size: 30px;
    font-size: 3rem;
  }

  h1 {
    font-size: 64px;
    font-size: 6.4rem;
  }

  #header::after {
    background-image: url("/images/supervision-florian-inkofer_bg-header_xxl.jpg");
  }

  #header .site-logo, 
  #header .site-slogan span,
  #content {
    width: 980px;
  }

  #header .site-logo {
    padding: 40px 0 15px 10px;
    padding: 4rem 0 1.5rem 1rem;
  }

  #header .site-logo::before {
    top: -115px;
    left: -440px;
    width: 780px;
    height: 780px;
  }

  #header .site-logo img {
    width: 392px;
    height: 450px;
  }

  #header .site-navigation ul {
    height: 1.4em;
  }

  #header .site-navigation ul li a {
    font-size: 21px;
    font-size: 2.1rem;
  }

  #header .site-slogan {
    padding: 0.5em 0 0.3em 0;
    font-size: 60px;
    font-size: 6rem;
  }

  .site-description {
    top: 15px;
    left: 166px;
  }

  .site-description .description-profile {
    top: 256px;
    left: 0;
    width: 250px;
    height: 250px;
    padding-top: 8px;
    -moz-border-radius:     125px;
    -webkit-border-radius:  125px;
    border-radius:          125px;
  }

  .site-description .description-profile img {
    width: 220px;
    height: 220px;
    -moz-border-radius:     110px;
    -webkit-border-radius:  110px;
    border-radius:          110px;
  }

  .site-description .description-text {
    top: 0;
    left: 200px;
    width: 544px;
    height: 544px;
    -moz-border-radius:     272px;
    -webkit-border-radius:  272px;
    border-radius:          272px;
  }

  .site-description .description-text-inner {
    left: 68px;
    width: 480px;
    height: 280px;
    margin-top: -140px;
    font-size: 18px;
    font-size: 1.8rem;
  }

  #content .logo-content {
    display: block;
    top: -40px;
    top: -4rem;
    left: -120px;
    left: -18rem;
  }
  
  #content .logo-content img {
    width: 160px;
    height: 184px;
  }

}

@media (min-width: 100em) {
  /* min-width: 1600px */

  body {
    font-size: 40px;
    font-size: 4rem;
  }

  h1 {
    font-size: 87px;
    font-size: 8.7rem;
  } 

  #header .site-logo img {
    width: 540px;
    height: 620px;
  }

  #header .site-navigation ul {
    height: 1em;
  }

  .site-description .description-profile {
    top: 256px;
    left: 0;
    width: 434px;
    height: 434px;
    padding-top: 10px;
    -moz-border-radius:     217px;
    -webkit-border-radius:  217px;
    border-radius:          217px;
  }

  .site-description .description-profile img {
    width: 380px;
    height: 380px;
    -moz-border-radius:     190px;
    -webkit-border-radius:  190px;
    border-radius:          190px;
  }

  .site-description .description-text {
    top: 0;
    left: 375px;
    width: 714px;
    height: 714px;
    -moz-border-radius:     357px;
    -webkit-border-radius:  357px;
    border-radius:          357px;
  }

  .site-description .description-text-inner {
    left: 68px;
    width: 640px;
    height: 360px;
    margin-top: -180px;
    font-size: 23px;
    font-size: 2.3rem;
  }

  #content .logo-content {
    display: block;
    top: -40px;
    top: -4rem;
    left: -260px;
    left: -26rem;
  }
  
  #content .logo-content img {
    width: 221px;
    height: 254px;
  }

}