/* ==========================================================================
   Specific CSS for the contact page
   ========================================================================== */

.contact

  /* Basic structure
   ========================================================================== */

  header.main
    margin-bottom: column(1)
    padding-bottom: column(1)
    .intro
      padding-bottom: column(1)

    // Phone
    .phone-holder

      .phone
        display: block
        color: #fff
        text-decoration: none
        font-size: 1.4rem
        margin-bottom: column(1)

    // Row with details and account managers
    .company-details,
    .account-managers-holder
      color: #fff
      a
        color: $brightBlue
        text-decoration: none

    .flexable-layout
      flex-direction: row
      align-items: flex-end
      margin: 0 auto
      padding-bottom: column(.5)
      width: column(10)

    // Responsive layout
    +respond-to-width($mdGridBreakpoint)
      .phone-holder,
      .flexable-layout
        width: column(11)

      .flexable-layout
        flex-direction: column
        align-items: flex-start

      .company-details
        order: 2
        width: 100%

      .account-managers-holder
        order: 1
        margin-bottom: column(1)
        width: 100%

    +respond-to-width($smGridBreakpoint)
      .account-managers-holder
        padding-bottom: column(1)
        border-bottom: 1px solid rgba(255,255,255,.5)

  /* Company details
   ========================================================================== */
  .company-details
    width: 50%

  .account-managers-holder
    width: 50%

  /* Social media
   ========================================================================== */

  .sm-icon
    display: inline-block
    height: 22px
    margin-right: 10px
    +sprite(0 -60px)

    &.facebook
      width: 12px

    &.linkedin
      width: 22px
      background-position: -20px -60px
      +transform(translateY(-1px))

    &.behance
      width: 30px
      background-position: -100px -57px

    &.instagram
      width: 22px
      background-position: -75px -60px


  /* Form
   ========================================================================== */

  .form-maps-holder
    +respond-to-width($mdGridBreakpoint)
      width: column(11)

  .form-holder
    padding-bottom: column(1,10)

    +respond-to-width($mdGridBreakpoint)
      display: block
      margin: 0 auto
      width: column(8,11)
    +respond-to-width($smGridBreakpoint)
      width: column(11,11)

  /* Maps
   ========================================================================== */

  .maps-holder
    margin-left: column(1,10)
    +respond-to-width($mdGridBreakpoint)
      display: block
      margin: 0 auto
      width: column(8,10)
    +respond-to-width($smGridBreakpoint)
      width: column(10,10)

  .map-square
    position: relative
    width: 100%
    padding-bottom: 100%
    margin-bottom: column(1,5)

  .map-mask
    +position(absolute, 0 null null 0)
    width: 100%
    height: 100%
    overflow: hidden

  #map
    width: 100%
    height: 110%