.about-row
  background: url('/images/structure/aboutBackground.jpg') no-repeat
  background-size: cover
  background-position: 50% 50%
  +transition(all 0.1s)
  background-attachment: fixed
  margin-top: -250px
  z-index: 1
  overflow-x: hidden

  .placeholder
    background: rgba(0,0,0, 0.75)
    max-width: 800px
    min-width: 350px
    float: right
    margin-right: 0
    padding: 400px 0 350px
    +transition(all 2s)

    &.not-in-view
      .about
        p
          opacity: 0.05

  .about
    top: 20%
    margin: auto
    float: none
    padding-bottom: 80px

    h2
      color: white
      +font-bold(60px)

    p
      +font-default(22px, 28px)
      color: white
      opacity: 1.0
      width: 100%
      +transition(opacity 2s)

      &.intro-text
        +font-bold(22px, 28px)

  .red-divider
    height: 10px
    margin-top: -10px
    z-index: 9
    position: relative
    width: 100%
    float: right
    background: $darkRed
    +transition(width 2s)
    +transition-delay(0.5s)

    &.not-in-view
      width: 0

+media-query(1050px)
  .about-row
    background-size: cover !important
    background-position: 25% 100% !important

+media-query(500px)
  .about-row
    .placeholder
      width: 100%
      min-width: initial
      max-width: initial
      +transition(none)