.feature

position: relative
background: white

+desktop
  padding-bottom: 55px

+phone
  padding-bottom: 35px

h2
  margin-bottom: 57px

h3
  text-align: left
  margin: 0 0 1px 0

  > a
    position: relative
    display: block
    font-weight: 400
    color: black
    background: $gray-200

    +desktop
      font-size: 20px
      line-height: 66px
      border-left: 66px solid $green-500
      box-shadow: inset 1px 0 0px 0px #FFF
      -webkit-box-shadow: inset 1px 0 0px 0px #FFF
      height: 66px
      padding: 0 20px

    +phone
      font-size: 16px
      line-height: 22px
      padding: 10px 20px 10px 55px

    strong
      font-weight: 700

    &:hover,
    &:focus
      text-decoration: none
      background: darken($gray-200, 2%)
      border-left-color: darken($green-500, 2%)

    i
      position: absolute
      top: 50%
      margin-top: -8px
      display: block
      font-size: 19px

      +desktop
        left: -41px

      +phone
        left: 20px
        color: $green-500 !important

.btn + br
  +desktop
    display: none

.btn + br + .btn,
.btn + br + a
  +phone
    margin-top: 10px
    display: inline-block
    vertical-align: top

.btn + .btn
  margin-right: 10px
  margin-left: 10px

.panel
  border: 1px solid #0000

.panel-group
  .panel+.panel
    margin-top: 0

  +phone
    margin: 0 -10px

.panel-heading
  padding: 0

.panel-body
  text-align: left

  +desktop
    padding: 40px 20px 90px 120px

  +phone
    padding: 30px 20px 30px  20px

.panel-collapse
  display: none
  +phone
    transition: none

.panel-expanded .panel-collapse
  display: block

.panel-expanded:last-child
  position: relative

  &:before
    content: ''
    position: absolute
    border-bottom: 1px solid $gray-200
    height: 1px

    +desktop
      width: 60%
      left: 20%
      bottom: -10px

    +phone
      width: 100%
      left: 0
      bottom: 0

li
  background: url('#{$site_baseurl}/assets/theme_images/about-us/feature-list-bullet.png') no-repeat 0 4px
  margin-bottom: 18px
  padding-left: 22px

blockquote
  font-weight: 300
  font-size: 20px
  line-height: 28px
  border: 0
  background-repeat: no-repeat
  background-position: 0 0
  position: relative

  +desktop
    margin-top: 30px
    width: 80%
    height: 123px
    padding: 20px 0 0 130px

  +phone
    margin-top: 30px
    margin-bottom: 0
    padding: 130px 0 0 0
    font-size: 16px
    line-height: 22px

  a
    font-weight: 300

  small
    font: inherit
    font-weight: 300
    position: absolute
    font-size: 14px

    +desktop
      top: 130px
      left: 0
      line-height: 16px

    +phone
      top: 45px
      left: 120px
      line-height: 20px

    em
      font-weight: 400
      display: block
      font-style: normal

      +phone
        font-size: 16px

    &:before
      display: none

.feature-contact-subline
  margin-top: 30px

#for-organisations blockquote
  background-image: url('#{$site_baseurl}/assets/theme_images/about-us/testimonial-organisation.jpg')

#for-companies blockquote
  background-image: url('#{$site_baseurl}/assets/theme_images/about-us/testimonial-companies.jpg')

#for-birthdays blockquote
  background-image: url('#{$site_baseurl}/assets/theme_images/about-us/testimonial-birthday.jpg')

.panel.expanded h3 > a:before
  content: '–'
  line-height: 13px

.donors h4 ~ h4
  margin-top: 40px