/* source-serif-4-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/source-serif-4-v7-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-serif-4-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/source-serif-4-v7-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-serif-4-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/source-serif-4-v7-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/source-sans-3-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/source-sans-3-v9-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/source-sans-3-v9-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body, html { font-family: 'Source Sans 3'; color: #000; font-size: 18px; font-weight: 400; }
h1 { font-family: 'Source Sans 3'; font-size: 60px; font-weight: 600; }
h2 { font-family: 'Source Sans 3'; font-size: 30px; font-weight: 400; }
h3 { font-family: 'Source Sans 3'; font-size: 30px; font-weight: 700; }
a { color: #000; }
a:hover { color: #666; }

.ar-logo { width: 100%; max-width: 360px; }
.ar-rahmen { border: 20px solid #000; text-align: center; padding: 700px 70px 70px 70px; }
.ar-serifen { font-family: 'Source Serif 4'; }

.ar-bild-1 { position: absolute; left: -40px; top: calc(500px + 20rem); width: 440px; z-index: -1; }
.ar-bild-2 { position: absolute; left: calc(50% - 300px); top: calc(360px+ 20rem); width: 800px; z-index: -1; }
.ar-bild-3 { position: absolute; right: 40px; top: calc(200px+ 20rem); width: 800px; z-index: -1; }
#apheum-logo { height: 50px; }
#apheum-link {font-size: 1.5rem;}

@media only screen and (max-width: 1500px) {
    h1 { font-size: 55px; }
    h2 { font-size: 26px; }
    h3 { font-size: 26px; }
    .ar-bild-1 { left: -40px; calc(500px + 20rem); width: 390px; }
    .ar-bild-2 { left: calc(50% - 300px); top: calc(360px + 20rem); width: 700px; }
    .ar-bild-3 { right: 40px; top: calc(200px + 20rem); width: 700px; }
    #slogan-line { margin-bottom:60px;}
    #apheum-logo { height:25px;}
}
@media only screen and (max-width: 1300px) {
    h1 { font-size: 50px; }
    h2 { font-size: 24px; }
    h3 { font-size: 24px; }
    .ar-bild-1 { left: -40px;calc(500px + 20rem); width: 290px; }
    .ar-bild-2 { left: calc(50% - 280px); top: calc(360px + 20rem); width: 580px; }
    .ar-bild-3 { right: 30px; top: calc(200px + 20rem); width: 580px; }
}
@media only screen and (max-width: 1100px) {
    .ar-rahmen { padding: 620px 70px 70px 70px; }
    h1 { font-size: 40px; }
    h2 { font-size: 22px; }
    h3 { font-size: 22px; }
    .ar-bild-1 { left: -40px; top: calc(500px + 20rem); width: 240px; }
    .ar-bild-2 { left: calc(50% - 220px); top: calc(320px + 20rem); width: 500px; }
    .ar-bild-3 { right: 20px; top: calc(200px + 20rem); width: 400px; }
    #apheum-link {font-size:1rem;}
}
@media only screen and (max-width: 830px) {
    .ar-rahmen { border: 16px solid #000; padding: 560px 50px 50px 50px; }
    h1 { font-size: 38px; }
    h2 { font-size: 22px; }
    h3 { font-size: 22px; }
    .ar-bild-1 { left: -40px; top: calc(400px + 20rem); width: 190px; }
    .ar-bild-2 { left: calc(50% - 200px); top: calc(320px + 20rem); width: 500px; }
    .ar-bild-3 { right: 20px; top: calc(240px + 20rem); width: 280px; }
}
@media only screen and (max-width: 650px) {
    .ar-rahmen { border: 14px solid #000; padding: 500px 40px 40px 40px; }
    h1 { font-size: 34px; }
    h2 { font-size: 22px; }
    h3 { font-size: 22px; }
    .ar-bild-1 { left: -40px; top: calc(480px + 20rem); width: 190px; }
    .ar-bild-2 { left: calc(50% - 200px); top: calc(360px + 20rem); width: 400px; }
    .ar-bild-3 { right: 20px; top: calc(260px + 20rem); width: 250px; }
}
@media only screen and (max-width: 480px) {
    h1 { font-size: 26px; }
    h2 { font-size: 18px; }
    h3 { font-size: 18px; }
    .ar-rahmen { border: 10px solid #000; padding: 500px 20px 20px 20px; }
    .ar-bild-1 { left: -40px; top: calc(480px + 20rem); width: 170px; }
    .ar-bild-2 { left: calc(50% - 200px); top: calc(360px + 20rem); width: 350px; }
    .ar-bild-3 { right: 20px; top: calc(260px + 20rem); width: 180px; }
}