/*==========================================================================
  Contact page
  ========================================================================== */
.contact
  #map
    position: absolute
    top: 0
    right: 0
    height: 100%
    width: 50%

    +respond-to-width(850)
      position: relative
      height: 450px
      width: 100%
      +order(4)

  .after-menu>header
    .content
      padding-bottom: 80px
      .text
        font-family: rubik()
        font-size: 1.1rem

        a
          color: $brightBlue
          font-size: 1.25rem
          font-weight: light()

      .button
        margin-top: 40px

    +respond-to-width(850)

      .grid-row
        width: 100%

      .content
        width: 100%
        padding-left: column(1, 12)
        padding-right: column(1, 12)

        .content-overlay
          display: block

        .logo-wrapper
          .logo
            max-width: 400px


  .contact-page-info
    padding: 75px 0

    .grid-col
      vertical-align: top

    .info
      width: column(6, 12)
      h3
        font-family: rubik()
        font-size: 1.2rem
        line-height: 1.6
        font-weight: medium()
        color: $orange

      .opening-hours
        ul
          font-size: 1.1rem
          line-height: 1.6
          font-family: rubik()
          font-style: italic
          list-style: none
          padding: 0
          margin: 2px 0 0

          span, b
            display: inline-block
            font-weight: regular()

          span
            color: $darkPurple
            width: 140px

          b
            color: $purple

          .active
            span
              font-weight: bold()

            b
              color: $darkerPurple

          +respond-to-width(400)
            li
              width: 100%
              margin-bottom: 10px
              span
                display: block


      .financial-records
        p
          font-size: 1.1rem
          line-height: 1.6
          font-family: rubik()
          color: $purple
          margin: 0

          b, span
            display: inline-block
            font-weight: regular()

          span
            width: 140px

          &:first-of-type
            margin-top: 2px

          +respond-to-width(450)
            margin-bottom: 10px
            span
              display: block

      .personal
        ul
          list-style: none
          padding: 0
          margin: 40px 0 0
          +flex(flex-start, flex-start)
          +flex-rows

          li
            width: 50%
            color: $purple
            font-size: 1.1rem
            line-height: 1.2
            font-family: rubik()
            margin-bottom: 20px

          +respond-to-width(1000)
            display: block
            li
              width: 100%

          +respond-to-width(920)
            +flex(flex-start, flex-start)
            li
              width: 50%

          +respond-to-width(500)
            display: block
            li
              width: 100%

      .financial-records, .opening-hours
        +flex(flex-start, flex-start)
        margin-bottom: 70px

        h3
          width: 280px


        +respond-to-width(1670)
          display: block
          h3
            width: 100%

    .contact-form
      margin-left: column(1, 12)
      width: column(4, 12)

      .form
        padding-top: 0

    +respond-to-width(920)
      .grid-row
        display: block

      .contact-form, .info
        width: 100%
        margin-left: 0

      .contact-form
        margin-top: 80px

        .form
          display: block
          width: 100%
          max-width: 400px
          padding-bottom: 0

  .contact-disclaimer
    background-color: $gray
    padding: 60px 0 85px

    .grid-col
      vertical-align: top

    .text
      width: 50%
      p
        font-size: 0.9rem
        line-height: 1.4
        color: $purple
        font-family: rubik()
        font-style: italic
        font-weight: light()

    .year-document
      margin-left: column(1, 12)
      width: column(5, 12)

      p
        font-size: 0.9rem
        line-height: 1.4
        color: $darkPurple
        font-family: rubik()
        font-weight: regular()

      .download
        position: relative
        display: inline-block
        min-width: 200px
        padding: 8px 55px 8px 20px
        border-radius: 10px
        background-color: $purple
        font-family: rubik()
        font-weight: medium()
        font-size: 0.8rem
        transition: background 0.3s
        cursor: pointer
        text-decoration: none
        color: white

        span
          display: block
          position: absolute
          right: 20px
          bottom: 9px
          width: 16px
          height: 16px
          border-bottom: 2px solid rgba(white, 0.4)

          &:after
            content: ''
            display: inline-block
            position: absolute
            right: 0
            bottom: 7px
            +arrowWhite
            +translate3dRotate(0,0,0, 90deg)
            transition: transform 0.3s

        &:hover
          background-color: darken($purple, 5%)

          span
            &:after
              +translate3dRotate(0, 2px, 0, 90deg)

    +respond-to-width(750)
      padding: 60px 0 60px
      .text, .year-document
        margin-left: 0
        width: 100%

      .year-document
        margin-top: 40px