/*==========================================================================
  Footer
  ========================================================================== */


footer
  position: relative
  z-index: 101
  background-color: $bluePurple1
  background: linear-gradient(60deg, $bluePurpleGradient12)

  .shape
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    overflow: hidden
    opacity: 1
    transition: opacity 0.8s ease 0.5s
    background:
      size: cover
      repeat: no-repeat
      position: 78% 100%
      image: url("/img/shapes/footer.svg")

    &.animation-part
      opacity: 0


  /* Footer Menu
   ========================================================================== */

  nav
    position: relative
    z-index: 2
    background-color: rgba(255,255,255,0.1)

    ul
      list-style: none
      +flex(space-between, center)
      padding: 0

    li
      font-size: 0.9rem
      line-height: 1

      a
        display: inline-block
        padding: 31px 0
        color: white
        text-decoration: none
        opacity: 0.75
        transition: opacity 0.2s

        &:hover
          opacity: 0.4

      &.active
        a
          opacity: 1
          font-weight: semi-bold()

    /* Footer menu - Media Queries
     ========================================================================== */
    +respond-to-width(900)
      ul
        +flex(flex-start, center)
        +flex-rows

      li
        width: 25%

        a
          text-align: center
          display: block

    +respond-to-width(550)
      ul
        display: block
        width: 100% !important
        padding: 30px 0
      li
        width: 100%
        display: block
        a
          padding: 15px 0
        &:nth-of-type(even)
          a
            //background-color: rgba(black, 0.1)



  // Main footer wrapper
  .main
    position: relative
    z-index: 2
    padding: 100px 0
    +flex(space-between, flex-start)

    .grid-col
      vertical-align: top
      line-height: 2

      h5
        font-size: 0.8rem
        color: white
        margin-bottom: 0
        font-weight: medium()



    /* Contact information
     ========================================================================== */
    .contact-info
      font-size: 0.8rem

      p
        margin: 0
        color: rgba(white, 0.4)
        font-family: rubik()

        strong
          font-weight: regular()
          color: white
          display: inline-block
          margin-right: 20px

        a
          color: rgba(white, 0.4)
          text-decoration: none
          transition: color 0.2s

          &:hover
            color: white


    /* Subscribe Form (Mailchimp)
     ========================================================================== */

    .footer-subscribe-form
      width: 265px

      h5
        margin-bottom: 20px

        strong
          font-weight: medium()

      #mc_embed_signup
        max-width: 265px
        form
          padding: 0
          width: 100%

        .mc-field-group
          width: 100%
          padding-bottom: 15px

          label
            margin-bottom: 0
            font-size: 0.6rem
            color: white
            opacity: 0.4
            font-weight: bold()
            text-transform: uppercase
            font-family: rubik()


          input
            background-color: $darkerPurple
            margin-top: 0px
            height: 45px
            width: 100%
            margin-left: 0
            color: white
            padding: 0 14px
            border: 2px solid transparent
            font-size: 0.65rem
            font-style: italic
            font-family: rubik()

            &.alert
              border-color: $red

            &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
              transition: 9999s background-color
              -webkit-text-fill-color: white
              transition-delay: 9999s

            &:focus
              box-shadow: none
              outline: none

        #mc-embedded-subscribe-form
          div.mce_inline_error
            color: $darkOrange
            background-color: white
            font-family: rubik()
            margin-bottom: 0
            padding: 5px 14px
            width: 100%

          input.mce_inline_error
            border-color: $darkOrange

          .button
            border: 1px solid rgba(white, 0.4)
            border-radius: 0
            font-size: 0.8rem
            padding: 5px 18px
            font-family: rubik()
            font-weight: bold()
            background-color: transparent
            margin: 0
            width: 100%
            text-align: left
            height: auto

            &:hover
              background-color: rgba(white, 0.1)

            &:focus
              box-shadow: none
              outline: none

        div#mce-responses
          width: 100%
          margin: 0
          top: 0
          float: none
          padding: 0

        div.response
          border: 1px solid white
          background-color: white
          float: none
          width: 100%
          padding: 10px 15px
          margin: 0 0 15px
          font-size: 0.75rem
          line-height: 1.25
          font-family: rubik()
          font-weight: light()
          border-radius: 3px

        #mce-error-response
          color: $red

          a
            color: $darkRed

        #mce-success-response
          color: $darkGreen

    /* Social Media
     ========================================================================== */

    .social-media
      .facebook, .twitter
        +flex(flex-start, center)
        margin-top: 20px
        color: white
        opacity: 0.4
        font-size: 0.8rem
        text-decoration: none
        font-family: rubik()
        transition: opacity 0.2s

        &:before
          content: ''
          display: inline-block
          margin-right: 15px

        &:hover
          opacity: 1

      .facebook
        &:before
          +sprite(-55px -54px, 30px, 30px)

      .twitter
        &:before
          +sprite(-55px -85px, 30px, 26px)


    /* Main footer - Media Queries
     ========================================================================== */

    +respond-to-width(1000)
      +flex(flex-start, flex-start)
      +flex-rows
      padding: 60px 0

      .grid-col
        width: 50%

      .subscribe-form
        margin-top: 60px
        +order(3)

    +respond-to-width(550)
      display: block
      padding: 30px 0
      text-align: center

      .grid-col
        margin: 30px 0
        width: 100%
        +order(1)

        &.footer-subscribe-form
          text-align: center
          +order(2)

          #mc_embed_signup
            display: inline-block
            width: 100%

        &.social-media
          +order(3)

          .facebook, .twitter
            +flex(center, center)


  /* Non-important subfooter
   ========================================================================== */

  .sub-footer
    position: relative
    z-index: 2
    background-color: $darkerPurple
    padding: 15px 0

    .placeholder
      +flex(space-between, center)

      .grid-col
        font-size: 0.8rem

    .links
      +flex(flex-start, center)
      margin: 0
      padding: 0
      list-style: none

      li
        margin-right: 20px

        &:before
          content: '|'
          color: white
          opacity: 0.4
          margin-right: 20px

        &:first-of-type
          &:before
            display: none

        a
          color: white
          text-decoration: none
          opacity: 0.4
          transition: opacity 0.2s

          &:hover
            opacity: 0.75

        &.active
          a
            opacity: 1

    // Our branding logo
    .komma
      overflow: visible
      position: relative
      color: white
      opacity: 0.4
      text-align: right
      padding-left: 35px
      text-decoration: none
      transition: opacity 0.2s

      &:hover
        opacity: 0.75
        &:before
          transform: rotate(360deg)

      &:before
        content: ''
        position: absolute
        left: 0
        right: 180px
        display: inline-block
        +sprite(0 -114px, 24px, 24px)
        transform: rotate(0deg)
        transition: all 0.7s

    /* Sub footer - Media Queries
     ========================================================================== */

    +respond-to-width(850)
      padding: 20px 0
      .placeholder
        display: block
        text-align: center

      .links
        +flex(center, center)
        margin-bottom: 15px

    +respond-to-width(500)
      padding: 40px 0
      .links
        display: inline-block
        padding-bottom: 10px
        border-bottom: 1px solid rgba(white, 0.1)
        margin-bottom: 25px
        li
          margin-right: 0
          margin-bottom: 10px
          &:before
            display: none