footer
  background: white
  padding: 75px 0
  position: relative
  max-width: 1300px
  width: 90%
  margin: auto

  .footer-logo
    .logo
      +sprite(-210px -150px, 283px, 143px)
      +transform-origin(0% 50%)
      +transform(scale(0.6))

  h5
    color: $black
    +font-bold(16px, 14px)
    position: relative

    &:after
      content: ''
      height: 2.65px
      width: calc(100%/ 3 * 2)
      background: $yellow
      +position( absolute , null null -8px 0)

  p,a, span
    color: $black
    +font-default(16px)

  //&:after
  //  content: ''
  //  width: 0
  //  height: 0
  //  border-style: solid
  //  border-width: 0 0 120px 120px
  //  border-color: transparent transparent $yellow transparent
  //  +position(absolute, null 0 0 null)

  .social
    a
      +flex(initial, center)
      span
        opacity: 0.5
        display: inline-block
        margin-right: 10px
        +transition(opacity 0.2s)
      &:hover
        span
          opacity: 1

  .facebook
    +sprite(0 -180px, 15px, 15px)

  .twitter
    +sprite(-18px -180px, 15px, 15px)

  .linkedin
    +sprite(-35px -180px, 15px, 15px)

+media-query(1000px)
  footer
    .footer-logo
      .logo
        +transform(scale(0.4))

+media-query(860px)
  footer
    .footer-logo
      .logo
        +transform(scale(0.5))
        +transform-origin(0% 10%)
    .grid3
      width: 50%
      &:nth-of-type(2n + 1)
        clear: left

+media-query(450px)
  footer
    &:after
      border-width: 0 0 80px 80px
    .footer-logo
      margin-bottom: -50px
      .logo
        +transform(scale(0.5))
        margin-left: 10%
    .grid3
      width: 100%
      clear: left

      h5:after
        width: 100%

      p, h5
        box-sizing: border-box
        padding-left: 10%