/* source-sans-pro-200 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/source-sans-pro-v13-latin-200.woff2") format("woff2"), url("../fonts/source-sans-pro-v13-latin-200.woff") format("woff"), url("../fonts/source-sans-pro-v13-latin-200.ttf") format("truetype");
}
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-pro-v13-latin-regular.woff2") format("woff2"), url("../fonts/source-sans-pro-v13-latin-regular.woff") format("woff"), url("../fonts/source-sans-pro-v13-latin-regular.ttf") format("truetype");
}
/* source-sans-pro-italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-pro-v13-latin-italic.woff2") format("woff2"), url("../fonts/source-sans-pro-v13-latin-italic.woff") format("woff"), url("../fonts/source-sans-pro-v13-latin-italic.ttf") format("truetype");
}
/* source-sans-pro-700 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans-pro-v13-latin-700.woff2") format("woff2"), url("../fonts/source-sans-pro-v13-latin-700.woff") format("woff"), url("../fonts/source-sans-pro-v13-latin-700.ttf") format("truetype");
}
/* tajawal-300 - latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/tajawal-v3-latin-300.woff2") format("woff2"), url("../fonts/tajawal-v3-latin-300.woff") format("woff"), url("../fonts/tajawal-v3-latin-300.ttf") format("truetype");
}
/* tajawal-700 - latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/tajawal-v3-latin-700.woff2") format("woff2"), url("../fonts/tajawal-v3-latin-700.woff") format("woff"), url("../fonts/tajawal-v3-latin-700.ttf") format("truetype");
}
/* tajawal-regular - latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tajawal-v3-latin-regular.woff2") format("woff2"), url("../fonts/tajawal-v3-latin-regular.woff") format("woff"), url("../fonts/tajawal-v3-latin-regular.ttf") format("truetype");
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif; 
  color: #706F6F;
}

body {
  display: -ms-flexbox;
  display: flex; }

img {
  max-width: 100%;
  height: auto; }

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

h2 {
  overflow-wrap: break-word; }

.highlight {
  color: #d40012; }

.cover-container {
  max-width: 1920px;
  min-height: 600px;
  position: relative;
  margin: 0 auto; }

@media all and (max-width: 700px) {
  #main.h-100 {
    height: auto !important; } }
#logo a {
  display: block;
  padding: 1em; }

header {
  background-color: #c5c3c4; }
  header nav ul {
    list-style: none;
    margin-top: 2em; }
    header nav ul li {
      float: left;
      display: inline-block; }
      header nav ul li a, header nav ul li a:hover {
        display: block;
        padding: 1em;
        color: #5c5c5c; }

@media all and (max-width: 700px) {
  header nav {
    display: none; } }
#main {
  background: url("../images/teaser-bg.jpg") center center no-repeat;
  background-size: cover; }

#teaser-text {
  position: absolute;
  bottom: 2em;
  left: 2em;
  color: #5c5c5c; }
  #teaser-text strong {
    font-size: 5.5em;
    line-height: 1em;
    font-weight: bold; }

@media all and (max-width: 700px) {
  #teaser-text strong {
    font-size: 4em; } }
#circle {
  background-color: #d40012;
  background-color: rgba(180, 0, 18, 0.9);
  border-radius: 25em;
  height: 25em;
  width: 25em;
  position: absolute;
  bottom: 2em;
  right: 2em;
  color: white;
  text-align: center;
  padding: 3em; }
  #circle p {
    margin: 0; }
  #circle small {
    font-size: .8em; }

@media all and (max-width: 1280px) {
  #circle {
    font-size: .8em; } }
@media all and (max-width: 960px) {
  #circle {
    display: none; } }
#loesungen {
  position: relative;
  background-color: #c0bebf;
  padding: 10em 2em; }

#solutions {
  border: 1px solid #5c5c5c;
  width: 100%; }
  #solutions p {
    font-weight: 300;
    font-size: 5em;
    margin: 1em;
    color: #d40012; }
  #solutions img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2em; }

@media all and (max-width: 1500px) {
  #solutions p {
    font-size: 4em; } }
@media all and (max-width: 1280px) {
  #solutions p {
    font-size: 2.5em; } }
@media all and (max-width: 960px) {
  #solutions p {
    font-size: 2em; } }
.headline {
  color: #5c5c5c; }
  .headline h2 {
    font-size: 6em;
    font-weight: 200; }
  .headline p {
    font-size: 2em;
    font-weight: 200; }

@media all and (max-width: 700px) {
  .headline h2 {
    font-size: 4em; } }
#about-us .content {
  font-family: 'Tajawal', sans-serif;
  font-weight: 300; }
  #about-us .content strong {
    font-size: 1.5em;
    font-weight: bold;
    color: #d40012; }
  #about-us .content small {
    font-weight: 400; }
#about-us #progress h2 {
  font-family: 'Tajawal', sans-serif;
  font-weight: bold;
  color: #d40012;
  font-size: 1.5em; }
#about-us #progress table img {
  height: 100%;
  width: 50px; }
#about-us #progress table tr td:first-child {
  color: red;
  font-size: 1.5em; }

#pharao-net {
  background: url("../images/pharao-net-bg.jpg") center center no-repeat;
  background-size: cover;
  padding-top: 5em; }
  #pharao-net h2 {
    font-size: 5em;
    font-weight: 200; }
  #pharao-net .subline {
    font-size: 2em;
    font-weight: 200; }
  #pharao-net .hero {
    position: relative;
    background: #999;
    margin: 2em;
    color: white;
    padding: 2em;
    font-weight: 200; }
  #pharao-net .floating-pc {
    position: absolute;
    bottom: -450px;
    right: 0; }
  #pharao-net .sidekick {
    margin: 4em; }
  @media all and (max-width: 1500px) {
    #pharao-net .floating-pc {
      width: 650px;
      bottom: -350px; } }
  @media all and (max-width: 1200px) {
    #pharao-net .floating-pc {
      width: 450px;
      bottom: -250px; } }
  @media all and (max-width: 800px) {
    #pharao-net .hero, #pharao-net .sidekick {
      margin: 0; }
    #pharao-net .floating-pc, #pharao-net .pharao-net-logo {
      display: none; } }
  #pharao-net .pharao-net-logo {
    background: white;
    position: absolute;
    top: -15px;
    right: 25px;
    height: 150px;
    width: 150px;
    padding: 1em; }
    #pharao-net .pharao-net-logo img {
      height: 100%;
      width: auto; }
  #pharao-net .three-stories {
    width: 75%;
    margin: 0 auto;
    padding: 5em 0; }
    #pharao-net .three-stories img {
      max-width: 150px;
      height: auto; }

#customers {
  padding: 5em 0; }
  #customers .customer {
    margin-bottom: 2em; }
    #customers .customer p {
      max-width: 500px;
      margin: 0 auto; }
    #customers .customer img {
      height: 150px;
      width: auto;
      margin-bottom: 1em; }

#contact {
  background: url("../images/pharao-net-bg.jpg") center center no-repeat;
  background-size: cover;
  padding: 5em 0; }
  #contact h2 {
    font-size: 3em; }
  #contact .headline p.highlight {
    font-weight: bold; }
  #contact p {
    font-size: 1em; }

footer {
  color: white;
  background-color: #d40012;
  padding: 1em; }
  footer a, footer a:hover {
    color: white; }