footer
  background-image: url('/img/stars_background.jpg')
  background-size: cover
  background-position: 50% 50%
  padding-bottom: 60px

  .footer-placeholder
    height: 200px
  .try-row
    padding: 160px 0
    .icon
      +sprite(0 0, 67px, 31px)
      display: block
      margin: auto
    h3
      +font-semi-bold(28px, 45px)
      color: white
      text-align: center
      margin: 45px auto

    .footerForm
      text-align: center
      .input
        background-color: $darkBlue
        -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.4)
        -moz-box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.4)
        box-shadow: inset 0px 0px 15px 0px rgba(0,0,0,0.4)
        border-radius: 5px
        display: inline-block
        width: 90%
        max-width: 360px
        min-width: 290px
        height: 50px
        position: relative
        input
          +appearance(none)
          background-color: transparent !important
          width: calc(100% - 105px)
          padding: 0 10px 0 20px
          display: block
          border: none
          +font-light()
          font-size: 14px !important
          line-height: 50px !important
          height: 50px
          color: white
          +placeholder
            color: white
          &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
            +transition(9999s background-color)
            border-radius: 5px
            -webkit-text-fill-color: white
            +transition-delay(9999s)
          &:focus
            box-shadow: none
            border: none
            border-radius: 0
            outline: none
        input::-ms-input-placeholder
          color: white
        input[type=submit]
          display: none
        .submit
          background-color: $orange
          width: 100px
          height: 100%
          position: absolute
          padding: 0
          right: 0
          text-align: center
          top: 0
          cursor: pointer
          border-radius: 0 5px 5px 0
          +transition(all .2s)
          p
            color: white
            +font-semi-bold()
            font-size: 14px !important
            line-height: 50px !important
            margin: 0
            &:after
              content: ''
              +arrowWhite
              margin-left: 10px
              +translate3d(0, 0, 0)
              +transition(all .3s)
          &:hover
            background-color: $fellOrange
            p:after
              +translate3d(5px, 0, 0)
  .menu
    margin-bottom: 50px
    ul
      list-style: none
      padding-left: 0
      display: inline-block
      margin: 0 50px 0 0
      li
        a
          +font-light(20px, 28px)
          font-size: 18px
          color: white
    .social
      display: inline-block
      a
        display: inline-block
        opacity: 0.7
        margin-right: 10px
        &:hover
          opacity: 1
      .facebook
        +sprite(-35px -35px, 30px, 30px)
      .linkedin
        +sprite(0 -35px, 30px, 30px)
      .twitter
        position: relative
        top: -2px   
        margin-right: 0
        transform: scale(1.2)
        transform-origin: 50% 50%
        +socialMedia(0 -27px, 25px, 22px)
  .rights
    +flex(space-between, flex-start)
    p, p a, p span
      +font-default()
      font-size: 14px !important
      line-height: 18px !important
      color: $lightBlue
    span
      white-space: nowrap
    .info
      width: calc(100% - 160px)
    .komma
      width: 195px
      text-align: right
      a
        +flex(space-between, center)
        +transition(all 0.3s)
        &:before
          content: ''
          display: inline-block
          +sprite(-600px -55px, 22px, 20px)
          opacity: 0.2
          +transform(rotate(0deg))
          +transition(all 1s)
        &:hover
          color: white
          &:before
            opacity: 1
            +transform(rotate(360deg))



+media-query(840px)
  footer
    .rights
      p, p a, p span
        font-size: 12px !important
      .komma
        width: 165px

+media-query(750px)
  footer
    .rights
      display: block
      .info
        width: 100%
        text-align: left

+media-query(450px)
  footer
    .try-row
      h3
        +font-semi-bold(21px, 32px)