/*==========================================================================
  Contact page
  ========================================================================== */
.contact

  .contact-content
    position: relative

    .background
      position: absolute
      top: 0
      right: 0
      width: 50%
      height: 100%
      background: linear-gradient(90deg, $darkGreenGradient)
      background-color: $blue

    .contact-info
      width: column(4, 12)
      margin-left: column(1, 12)
      padding: 72px 0 100px

      figure
        width: 85%
        max-width: 300px
        margin-bottom: 50px
        img
          width: 100%


      h1
        font-size: 1.4rem
        line-height: 1.2
        color: $darkGreen
        font-weight: semi-bold()
        margin: 0 0 32px

      h3
        font-size: 0.8rem
        line-height: 1.2
        color: white
        opacity: 0.5
        text-transform: uppercase
        font-weight: semi-bold()
        margin: 100px 0 15px


      p
        font-size: 0.9rem
        color: $darkGreen

        a
          color: $orange
          font-weight: semi-bold()
          text-decoration: none
          transition: color 0.2s

          &:hover
            color: $orangeRed

      .social-media
        a
          +flex(space-between, center)
          margin-top: 5px

          .text
            display: block
            width: calc(100% - 40px)

          .icon
            +flex(center, center)
            width: 30px
            height: 30px

            &:before
              content: ''


          &.facebook
            span
              &:before
                +facebook

          &.twitter
            span
              &:before
                +twitter



      .opening-hours
        list-style: none
        margin: 0
        padding: 0

        li
          color: $lightBlue
          font-size: 0.9rem

          .day
            display: inline-block
            width: 175px

            +respond-to-width(400)
              width: 130px

          &.active
            color: white
            //font-weight: bold

      +respond-to-width(1100)
        width: column(5, 12)
        margin-left: 0

    .contact-form
      position: relative
      padding-top: 72px
      display: inline-block
      margin-left: column(1, 12)
      padding-left: column(1, 12)
      width: column(5, 12)
      vertical-align: top

      //&:before
      //  content: ''
      //  position: absolute
      //  left: 0
      //  top: 0
      //  width: 40px
      //  height: 100%
      //  background:
      //    image: url("/img/horizontal-gradient.png")
      //    size: contain

      h2
        font-size: 1.5rem
        line-height: 1.2
        font-weight: semi-bold()
        color: white

      p
        font-size: 0.9rem
        line-height: 1.2
        color: white

    +respond-to-width(840)
      .grid-row
        width: 100%

      .background
        display: none

      .contact-info
        width: 100%
        padding: 72px column(1, 12) 100px
        //background-color: $blue

        h3
          margin-top: 60px

      .contact-form
        width: 100%
        padding-right: column(1, 12)
        margin-left: 0
        background: linear-gradient(90deg, $darkGreenGradient)