body, html {
    height: 100%;
    margin: 0;
    background-color: #4f5b62;
  }

  p {
      margin: 0px;
      padding: 0px;
  }
  
  .hero-image {
    background-image: url("img/sofimen_header.jpg");
    height: 90%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  .hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: BeBasNeue;
    font-size: 130px;
    letter-spacing: 60px;
  }

  .center {
    text-align: center;
  }

  .title {
      font-family: SourceSansProRegular;
      font-size: 30px;
      color: #ededed;
      
  }

  .address_title {
      font-family: SourceSansProLight;
      font-size: 20px;
      color: #939393;
  }

  .address {
    font-family: SourceSansProLight;
    font-size: 20px;
    color: #939393;
  }

  .contact {
    font-family: SourceSansProRegular;
    font-size: 20px;
    color: #939393;
  }

  @media only screen and (max-width: 800px) {
    /* For tablets: */
    .hero-text {
        position: absolute;
        top: 50%;
        left: 50%;
        color: white;
        font-family: BeBasNeue;
        font-size: 130px;
        letter-spacing: 20px;
      }

      .title {
        font-family: SourceSansProRegular;
        font-size: 25px;
        color: #ededed;
    }
  
    .address_title {
        font-family: SourceSansProLight;
        font-size: 15px;
        color: #939393;
    }
  
    .address {
      font-family: SourceSansProLight;
      font-size: 20px;
      color: #939393;
    }
  
    .contact {
      font-family: SourceSansProRegular;
      font-size: 15px;
      color: #939393;
    }
  }

  @media only screen and (max-width: 450px) {
  
  .hero-image {
    height: 85%;
  }
  
    /* For tablets: */
    .hero-text {
        position: absolute;
        top: 50%;
        left: 50%;
        color: white;
        font-family: BeBasNeue;
        font-size: 100px;
        letter-spacing: 10px;
      }

      .title {
        font-family: SourceSansProRegular;
        font-size: 25px;
        color: #ededed;
    }
  
    .address_title {
        font-family: SourceSansProLight;
        font-size: 15px;
        color: #939393;
    }
  
    .address {
      font-family: SourceSansProLight;
      font-size: 20px;
      color: #939393;
    }
  
    .contact {
      font-family: SourceSansProRegular;
      font-size: 15px;
      color: #939393;
    }
  }

  @font-face {
    font-family: 'BeBasNeue';
    src: url('fonts/BebasNeue-Regular.ttf')
  }

  @font-face {
    font-family: 'SourceSansProRegular';
    src: url('fonts/SourceSansPro-Regular.ttf')
  }

  @font-face {
    font-family: 'SourceSansProLight';
    src: url('fonts/SourceSansPro-Light.ttf')
  }