@font-face {
  font-family: "Roboto-Light"; }
@font-face {
  font-family: "Amiri-Regular"; }
/**
 * Fix fonts that render as bold in Firefox
 */
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400; }

/**
 * Firefox specific rule
 */
@-moz-document url-prefix() {
  body {
    font-weight: lighter !important; } }
body {
  background-color: #1e1e1e;
  align-content: center;
  width: 90%;
  margin: 0 auto 0 auto; }

h1 {
  font-family: 'Amiri', serif;
  font-weight: 100;
  color: #ffffff;
  margin-top: 2%; }

h2 {
  font-family: 'Amiri', serif;
  color: #075a9a; }

p {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  line-height: 135%; }

ul {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  text-align: left; }

a {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  text-align: right;
  text-decoration: none; }

.footer {
  background-color: #1e1e1e; }
  .footer a {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    text-align: right;
    text-decoration: none; }

@media screen and (min-device-width: 1024px) {
  .block_01 {
    display: flex;
    margin-top: 30px; }
    .block_01 .headline_line {
      width: 8%; }

  .block_01__col-1 {
    flex: 0 1 50%; }

  .block_01__col-2 {
    flex: 0 1 50%; }

  .block_01__image {
    width: calc(100% - 10px); }

  .block_02 {
    display: flex; }
    .block_02 .headline_line {
      width: 8%; }

  .block_02__col-1 {
    flex: 0 1 50%; }

  .block_02__col-2 {
    flex: 0 1 50%; }

  .block_02__image {
    width: calc(100% - 10px); }

  .block_03 {
    display: flex; }

  .block_03__col-1 {
    flex: 0 1 50%; }

  .block_03__col-2 {
    flex: 0 1 50%; }

  .personal {
    display: flex; }

  .personal__col-1 {
    flex: 0 1 50%; }

  .personal__col-1__02 {
    padding-right: 2%;
    text-align: right; }

  .personal__col-2 {
    flex: 0 1 50%; }

  .personal__col-2__02 {
    padding-left: 2%; }

  .personal__line--left {
    margin: 2% 0 0.8% 0;
    width: 8%; }

  .personal__line--right {
    margin: 2% 0 0.8% 0;
    width: 8%; }

  h1 {
    font-size: 200%; }

  h2 {
    font-size: 150%; }

  p {
    font-size: 90%;
    width: 85%; }

  ul {
    list-style: url(img/list.svg);
    font-size: 90%;
    margin-bottom: 1.5%;
    margin-top: 0.2%;
    margin-right: 6%; }

  li {
    margin-left: 2.8%;
    line-height: 1.2;
    padding-bottom: 1%; }

  .headline_line {
    width: 4%;
    display: block;
    margin: 0.2% 0 2% 0; }

  .menu {
    background-color: #13376e;
    height: 200%;
    display: block;
    margin: 0 auto 0 auto;
    padding: 2.5% 4% 0.6% 4%; }
    .menu .logo {
      width: 16%;
      display: inline;
      vertical-align: bottom;
      margin-right: 42%; }
    .menu ul {
      list-style: none;
      padding-bottom: 1%;
      padding-left: 50%;
      display: contents;
      margin-bottom: 1%; }
      .menu ul li {
        display: inline; }
      .menu ul a {
        font-size: 120%; }
      .menu ul :hover {
        color: #ffc082; }

  .seperator {
    display: block;
    width: 100%;
    margin: 5% auto 5% auto; }

  .block_04 {
    display: block;
    background-color: #ffffff;
    padding: 3% 0 3% 0;
    margin-top: 3%; }
    .block_04 h1 {
      color: #1e1e1e; }
    .block_04 .seperator {
      width: 95%;
      margin: 0 auto 0 auto; }
    .block_04 .images {
      width: calc(100% - 10px);
      margin-bottom: 10%; }
    .block_04 p {
      color: #1e1e1e; }
    .block_04 h1 {
      padding-left: 16%; }
    .block_04 .headline_line {
      padding-left: 16%; }
    .block_04 .contact p {
      padding-left: 16%;
      font-size: 100%; }

  .footer {
    height: 8%;
    padding-top: 1%;
    padding-bottom: 1%; }
    .footer a {
      font-size: 80%; }
      .footer a :hover {
        color: #ffc082; } }
@media screen and (max-device-width: 1023px) {
  body {
    width: 92%;
    padding: 0 4% 0 4%; }

  .block_01 {
    margin-top: 30px; }

  .block_01__col-1 {
    width: 100%; }

  .block_01__col-2 {
    width: 100%; }

  .block_01__image {
    width: 100%; }

  .block_02__col-1 {
    width: 100%; }

  .block_02__col-2 {
    display: none; }

  .block_02__image {
    width: 100%; }

  .block_03 {
    display: block; }

  .block_03__col-1 {
    width: 100%; }

  .block_03__col-2 {
    width: 100%; }

  .personal {
    display: block; }

  .personal__col-1 {
    flex: 0 1 50%;
    padding-top: 5%; }

  .personal__col-1__02 {
    padding-left: 2%;
    padding-top: 5%; }

  .personal__col-2 {
    flex: 0 1 50%; }

  .personal__col-2__02 {
    padding-left: 2%; }

  .personal__line--left {
    margin: 2% 0 0.8% 0;
    width: 8%; }

  .personal__line--right {
    margin: 2% 0 0.8% 0;
    width: 8%; }

  h1 {
    font-size: 160%; }

  h2 {
    font-size: 100%; }

  p {
    font-size: 85%; }

  ul {
    list-style: url(img/list.svg);
    font-size: 85%;
    width: 90%;
    margin: 0.6% auto 4% auto; }

  li {
    margin-left: 0.2%;
    line-height: 1.2;
    padding-bottom: 1%; }

  .headline_line {
    width: 14%;
    display: block;
    margin: 0.1% 0 2% 0; }

  .menu {
    background-color: #13376e;
    height: 200%;
    display: block;
    margin: 0 -4.1% 0 -4.1%;
    padding: 6.5% 4% 4% 4%; }
    .menu .logo {
      width: 30%;
      padding-left: 1%;
      margin-bottom: 4%;
      display: block;
      vertical-align: bottom; }
    .menu ul {
      list-style: none;
      padding-bottom: 1%;
      padding-left: 50%;
      display: contents;
      margin-bottom: 1%;
      margin-top: 2%; }
      .menu ul li {
        display: inline;
        margin-left: 0.6%;
        margin-right: 2.4%; }
      .menu ul a {
        font-size: 113%; }
      .menu ul :hover {
        color: #ffc082; }

  .seperator {
    display: block;
    width: 100%;
    margin: 5% auto 5% auto; }

  .block_04 {
    display: block;
    background-color: #ffffff;
    padding: 3% 0 3% 0;
    margin: auto -4.5% auto -4.5%;
    width: 109%; }
    .block_04 h1 {
      color: #1e1e1e; }
    .block_04 .seperator {
      width: 95%;
      margin: 5% auto 5% auto; }
    .block_04 .images {
      width: 55%; }
    .block_04 p {
      color: #1e1e1e; }
    .block_04 .personals h1 {
      padding-left: 2%; }
    .block_04 .personals .headline_line {
      padding-left: 2%; }
    .block_04 .contact {
      padding-left: 2%; }

  .footer {
    height: 8%;
    margin: 2% auto 2% auto; }
    .footer a {
      font-size: 100%;
      display: table;
      margin-bottom: 2%;
      margin-top: 2%; }
      .footer a :hover {
        color: #ffc082; } }