.offer-container
  max-width: 720px
  width: 100%
  margin: auto

  .offer-placeholder
    +transition(all 0.5s)

  .under-title-row
    .under-title
      padding: 30px 0
      margin: 0

  .breadcrumb-row
    margin-left: 0
    .breadcrumb
      padding-left: 0
      margin: 0

      border: 1px solid $greyBackground
      border-right: none
      border-left: none

      ol, ul
        margin-left: 0

        li
          a, span
            line-height: 60px

  .content-offer
    margin: 50px 0 120px
    max-width: 550px
    width: 100%

    h1
      +font-semi-bold(28px)
      color: $defaultRed
      margin: 10px 0 0

    p
      color: $fontColor1
      +font-default(16px, 22px)
      margin: 0
      &.streamer
        +font-default(18px, 22px)


    h5.alert
      +font-semi-bold(14px, 21px)
      color: $highLightRed

    form
      margin-top: 40px

    label
      +font-default(15px)
      color: $fontColor1
      em
        color: $defaultRed
        font-size: 12px !important
        line-height: 18px !important
        position: relative
        top: -3px
        margin-left: 3px 

    input, textarea
      width: calc(100% - 20px)
      border: 1px solid $greyBackground
      padding: 6px 10px
      +font-default(15px, 19px)
      color: $fontColor1
      outline: 0 !important
      display: inline-block
      margin-bottom: 18px
      background: white

      &:-webkit-autofill
        background: white!important
        background-color: white !important
        -webkit-box-shadow: 0 0 0px 1000px white inset

      &.required.alert
        border: 1px solid $highLightRed

      &:focus
        outline: 0 !important

    textarea
      resize: none
      height: 140px

    .name-row, .adres-row
      +flex(space-between, center)
      div:first-child
        margin-right: 20px

    .submit-button
      width: calc(100% - 16%)
      border-radius: 9999px
      max-width: 200px
      background-color: $neonGreen
      height: 50px
      +flex(space-between, center)
      padding: 0 8%
      color: white
      +font-bold(16px, 18px)
      cursor: pointer

      input
        display: none

      &:hover
        background: darken($neonGreen, 2%)

      &:active
        background: darken($neonGreen, 5%)


      span
        display: block
        +arrowRightWhite
        position: relative
        top: 2px

    .thank-you
      margin: 20px 0 0

.isolation
  .content-offer
    h1
      color: $defaultGreen

  .offer-container
    .content-offer
      .submit-button
        background: $fontBlue
        &:hover
          background: darken($fontBlue, 2%)
        &:active
          background: darken($fontBlue, 5%)

+media-query(800px)
  .offer-container
    width: calc(100% - 80px)
    padding: 0 40px

+media-query(650px)
  .offer-container
    .under-title-row
      margin-top: 60px
      padding-top: 0

      .under-title
        .large-logo
          margin: 20px 0

+media-query(400px)
  .offer-container
    .content-offer
      .name-row, .adres-row
        display: block
        div:first-child
          margin-right: 0