@font-face {
  font-family: 'itclegacysans_lt_bookregular';
  src: url('../fonts/lte52461-webfont.woff2') format('woff2'),
  url('../fonts/lte52461-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'itclegacysans_lt_boldregular';
  src: url('../fonts/lte52465-webfont.woff2') format('woff2'),
  url('../fonts/lte52465-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.container, .container-sm, .container-md, .container-lg, .container-xl {
  max-width: 1000px;
}

a, a:hover {
  color: #343a40;
  text-decoration: none;
}

a:hover {
  opacity: .9;
}

.colored-text-area {
  height: 100%;
  background-color: #F59000;
  border-radius: 30px;
  padding: 30px;
  color: white;
}

.colored-text-area a, .colored-text-area a:hover {
  color: white;
}

.Header-Logo {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
}

main { margin-top: 210px; }

.leben-und-arbeiten-in-der-langener-altstadt h1 {
  font-family: 'itclegacysans_lt_boldregular', serif;
  color: #949494;
  text-transform: uppercase;
  font-size: 2.4rem;
}

.colored-text-area .h2 {
  font-family: 'itclegacysans_lt_boldregular', serif;
  font-size: 2.8rem;
}

.colored-text-area .text {
  font-family: 'itclegacysans_lt_bookregular', serif;
  font-size: 2rem;
}



/* Responsive CSS */

@media only screen and (max-width: 991px) {

  main { margin-top: 20vw; }

  .colored-text-area .h2 {
    font-size: 2.4rem;
  }

  .colored-text-area .text {
    font-size: 1.6rem;
  }

}


@media only screen and (max-width: 820px) {

  .colored-text-area .h2 {
    font-size: 2rem;
  }

  .colored-text-area .text {
    font-size: 1.2rem;
  }

}


@media only screen and (min-width: 768px) {


}


@media only screen and (max-width: 767px) {

  .colored-text-area .h2 {
    font-size: 1.6rem;
  }

  .colored-text-area .text {
    font-size: 1.1rem;
  }

  .leben-und-arbeiten-in-der-langener-altstadt h1 {
    font-size: 1.6rem;
  }

}


@media only screen and (max-width: 620px) {

  .colored-text-area .h2 {
    font-size: 1.4rem;
  }

  .colored-text-area .text {
    font-size: 1rem;
  }

}


@media only screen and (max-width: 575px) {

  .colored-text-area .h2 {
    font-size: 2rem;
  }

  .colored-text-area .text {
    font-size: 1.4rem;
  }

}

@media only screen and (max-width: 480px) {


}

@media only screen and (max-width: 410px) {


}

@media only screen and (max-width: 360px) {


}