.text-badge
  position: relative
  z-index: 2
  bottom: -40px
  +flex(space-between, flex-start)
  .text, .badge-container
    width: 40%

  .text
    padding-left: 5%
    h3
      +header-font2(82px, 90px)
      text-transform: uppercase
      color: $beige
      letter-spacing: 0.5px
      text-shadow: 4px 4px $darkGray
      margin: 0 0 35px
      text-align: left

    p, li
      +font-default(20px)
      font-size: 18px
      color: $darkGray
  .facebook-share
    margin-top: 45px
    padding-bottom: 40px
    a
      background-image: url("/img/facebook-button.svg")
      background-size: contain
      background-position: center
      display: block
      height: 80px
      width: 300px
      margin: auto
  .badge
    width: 100%
    border-radius: 12px
    background: $blue url('/img/noise.png')
    padding: 12px
    .content
      border-radius: 12px
      border-style: Dashed
      border-color: rgba(82, 82, 82, 0.5)
      border-width: 2px
      padding: 40px 10%
      text-align: right

      h3
        +header-font2(60px, 82px)
        font-size: 74px
        text-transform: uppercase
        color: $lightGray
        letter-spacing: 0.5px
        text-shadow: 4px 4px $darkGray
        margin: 0
        text-align: left

      p, li
        +font-default(21px)
        font-size: 19px
        color: $lightGray
        text-align: left

      .button
        background-color: $beige
        height: 60px
        margin-top: 20px
        display: inline-block
        box-shadow: 10px 10px rgba(82, 82, 82, 0.5)
        +transition(all 0.3s)

        a
          padding: 3px 5px
          display: block
          height: 100%
        .inner-button
          border-style: Dashed
          border-color: lighten($darkGray, 10%)
          border-width: 2px
          height: 100%
          +flex(center, center)
          p
            margin: 0
            text-align: center
            +font-bold(21px, 21px)
            font-size: 19px
            padding: 0 40px
        &:hover
          background-color: darken($beige, 5%)
          box-shadow: 0px 0px rgba(82, 82, 82, 0.0)
  &.orange
    .text
      h3
        color: $yellowish
      p, li
        color: $lightGray
    .badge
      background: $beige url('/img/noise.png')
      .content
        h3
          color: $yellowish
        .button
          background-color: $darkGray
          &:hover
            background-color: darken($darkGray, 5%)
  &.flip
    .text
      +order
    .badge
  &.home-text
    +flex(center, center)
    .text
      padding-left: 0
      h3, p, li
        text-align: center
  &.about
    .badge
      margin-top: 150px
+media-query(1700px)
  .text-badge.about
    .text
      width: 50%
      padding-left: 15%

+media-query(1400px)
  .text-badge.about
    width: 60%
    display: block
    .text
      margin: 0 auto 60px
      width: 90%
      padding-left: 0
    .badge-container
      width: 90%
      margin: 0 auto
+media-query(1150px)
  .text-badge.about
    width: 90%
    max-width: 800px
    margin-top: 60px


+media-query(900px)
  .text-badge
    +flex(space-around, flex-start)
    +flex-rows
    .text, .badge-container
      width: 80%

    .badge-container
      margin-top: 80px

+media-query(450px)
  .text-badge, .text-badge.about
    width: 100%
    .badge-container
      width: 100%
    .badge
      width: 100%
      border-radius: 0
      padding: 12px 0
      .content
        border-radius: 0
        border-left: none
        border-right: none
        h3
          +header-font2(48px, 54px)
  .text-badge.about
    .text
      width: 80%