/*==========================================================================
  About block | Landingspage
  ========================================================================== */

.about-block
  padding-bottom: 120px

  .grid-col
    vertical-align: top

  /* Image and FAQ Wrapper
   ========================================================================== */
  .image-faq
    overflow: visible

    +respond-to-width(840)
      display: none

    img
      width: 100%

  /* About content
   ========================================================================== */
  .content

    // Dynamic styling
    h1
      margin: 30px 0 45px
      font-weight: bold()
      font-style: italic
      color: $darkBlue
      font-size: 2.2rem
      line-height: 1.2
      max-width: 320px

    .text
      font-size: 0.9rem
      line-height: 1.8

      p
        color: $darkGray

        a
          color: $darkGray
          text-decoration: none
          border-bottom: 2px solid $darkGray
          transition: color 0.3s, border 0.3s
          &:hover
            color: darken($darkGray, 25%) 
            border-bottom-color: darken($darkGray, 15%)

    // Location selection
    .locations
      margin: 60px 0 40px
      p
        font-size: 0.9rem
        font-weight: bold()
        color: $textBlue
        margin: 0 0 45px

      ul
        display: inline-block
        list-style: none
        padding: 0
        margin: 0
        font-size: 0.9rem
        line-height: 1.2

        &:first-of-type
          margin-right: 10%

        li
          position: relative
          padding-left: 15px
          margin-bottom: 10px
          a
            color: $blue
            text-decoration: none
            transition: color 0.2s

            &:before
              content: '›'
              position: absolute
              left: 0
              top: 0

            &:hover
              color: darken($blue, 20%)

    // Internal link
    .internalLink
      color: $textBlue
      font-size: 0.9rem
      font-weight: bold()
      text-decoration: none
      &:after
        content: ''
        +arrowDarkBlue
        +translate3dRotate(0,1px,0, 90deg)
        transition: transform 0.3s

      &:hover
        &:after
          +translate3dRotate(0,4px,0, 90deg)

  +respond-to-width(840)
    padding-bottom: 0

    .content
      width: 100%
      margin-left: 0
      h1
        margin: 55px 0 25px
        font-size: 2rem

      >.internalLink
        display: none