body { 
  background: url( '../images/home-background.jpg' ) no-repeat center center fixed; 
  background-size: cover;
}

#about {
  /* display: block; */
  /* text-align: center; */
  display: flex;
  flex-direction: row;
  width: 100%;
  /* justify-items: center; */
  align-items: right;
  margin: auto;
  margin-top: 100px;
  padding: 0px;
}

#about-header {
  position: relative;
  text-align: right;
  border-right: 2px solid white;
}

#about-header .outer-mask {
  position: absolute;
  width: calc( 100% + 20px );
  height: 40px;
  top: 160px;
  left: -20px;
  z-index: -1;
  overflow: hidden;
}

#about-header .inner-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 10px;
  transform: skew( -25deg, 0deg );
  overflow: hidden;
}

#about-header .background {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient( to right, rgb( 56, 48, 140 ), rgb( 226, 37, 35 ) ); 
}

#about-header .logo {
  padding-right: 8px;
}

#about-header .title {
  padding-right: 12px;
}

#about-text {
  margin-left: 8px;
  padding: 20px;
  background-color: rgba( 0, 0, 0, 0.5 );
}

/* for phones only */
@media screen and (max-width: 599px) {
  #about {
    display: flex;
    flex-direction: column;
    width: 95%;
  }
  
  #about-header .outer-mask {
    top: 40px;
  }
  
  #about-header .title {
    float: left;
    padding-right: 4px;
  }
}