.bbm-wrapper
  background: rgba(0,0,0,.75)
  -webkit-transition: background-color .3s

.bbm-modal
  background: white
  box-shadow: 0 0px 6px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.9)


/* BLOCKS */
.bbm-modal__topbar,
.bbm-modal__bottombar
  padding: 0 30px

.bbm-modal__topbar
  border-bottom: 1px solid rgba(0,0,0,.1)
  margin:
    bottom: 30px

  >ul
    list-style: none
    text-align: center
    padding: 0
    margin: 0

.bbm-modal__tab
  display: inline-block
  padding: 15px 10px

  a
    font:
      size: 16px
      weight: bold
    color: #999

    &:hover,
    &.active
      color: #222

.bbm-modal__title
  padding: 20px 0 19px
  margin: 0
  font:
    weight: normal
    size: 22px
  line-height: 1em
  color: #312D3A

.bbm-modal__section
  padding: 0 30px
  margin-top: 0px
  font:
    size: 16px
  line-height: 26px
  color: #575656

  p
    font:
      size: 16px
    line-height: 26px
    color: #575656

    &:last-child
      padding: 0
      margin-bottom: 0

  a
    color: #FF643C

  h3
    margin: 0
    font-size: 20px
    line-height: 1em

.bbm-modal__bottombar
  border-top: 1px solid rgba(0,0,0,.1)
  padding: 18px
  text-align: right
  margin-top: 30px


/* MODULES */
.bbm-group
  content: ""
  display: table
  clear: both

.bbm-button
  display: inline-block
  color: rgba(49,45,58,.8)
  text-decoration: none
  font:
    size: 14px
    weight: 500
  position: relative
  line-height: 1em
  padding: 10px 14px
  border-radius: 3px
  background: #FCFCFC

  background-image: -o-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
  background-image: -moz-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
  background-image: -webkit-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
  background-image: -ms-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
  background-image: linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)

  -moz-box-shadow:    0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
  box-shadow:         0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)

  &.inactive
    opacity: .5
    pointer-events: none

  &:active
    background-image: -o-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
    background-image: -moz-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
    background-image: -webkit-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
    background-image: -ms-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
    background-image: linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)

    -moz-box-shadow:    inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
    box-shadow:         inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)


/* ANIMATIONS */

/* Open modal */
@-webkit-keyframes bbm-open
  0%
    -webkit-transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813)
    opacity: 0.1259
  4%
    -webkit-transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809)
    opacity: 0.29544
  8%
    -webkit-transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922)
    opacity: 0.46703
  12%
    -webkit-transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355)
    opacity: 0.61908
  16%
    -webkit-transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991)
    opacity: 0.74284
  20%
    -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067)
    opacity: 0.83724
  24%
    -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658)
    opacity: 0.90523
  28%
    -webkit-transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049)
    opacity: 0.9515
  32%
    -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675)
    opacity: 0.98107
  36%
    -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966)
    opacity: 0.99852
  40%
    -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361)
    opacity: 1.00766
  44%
    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08)
    opacity: 1.01143
  48%
    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394)
    opacity: 1.01199
  52%
    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589)
    opacity: 1.01084
  56%
    -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265)
    opacity: 1.00895
  60%
    -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833)
    opacity: 1.0069
  64%
    -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518)
    opacity: 1.00503
  68%
    -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421)
    opacity: 1.00346
  72%
    -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567)
    opacity: 1.00224
  76%
    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941)
    opacity: 1.00134
  80%
    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506)
    opacity: 1.00072
  84%
    -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 50.00223)
    opacity: 1.00032
  88%
    -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 50.0005)
    opacity: 1.00007
  92%
    -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 49.99956)
    opacity: 0.99994
  96%
    -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 49.99913)
    opacity: 0.99988
  100%
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50)
    opacity: 1

.bbm-modal--open
  -webkit-animation-duration: 0.3s
  -webkit-animation-name: bbm-open
  -webkit-animation-timing-function: linear
  -webkit-animation-fill-mode: both
  -webkit-transform-origin: 50% 50%
  -webkit-backface-visibility: hidden

/* Open a stacked modal */
@-webkit-keyframes bbm-stacked
  0%
    -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187)
    opacity: 0.93705
  4%
    -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192)
    opacity: 0.85228
  8%
    -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078)
    opacity: 0.76648
  12%
    -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645)
    opacity: 0.69046
  16%
    -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009)
    opacity: 0.62858
  20%
    -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933)
    opacity: 0.58138
  24%
    -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342)
    opacity: 0.54739
  28%
    -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951)
    opacity: 0.52425
  32%
    -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325)
    opacity: 0.50946
  36%
    -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034)
    opacity: 0.50074
  40%
    -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639)
    opacity: 0.49617
  44%
    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001)
    opacity: 0.49429
  48%
    -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606)
    opacity: 0.494
  52%
    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411)
    opacity: 0.49458
  56%
    -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736)
    opacity: 0.49553
  60%
    -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167)
    opacity: 0.49655
  64%
    -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482)
    opacity: 0.49749
  68%
    -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579)
    opacity: 0.49827
  72%
    -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433)
    opacity: 0.49888
  76%
    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059)
    opacity: 0.49933
  80%
    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494)
    opacity: 0.49964
  84%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777)
    opacity: 0.49984
  88%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995)
    opacity: 0.49996
  92%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044)
    opacity: 0.50003
  96%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088)
    opacity: 0.50006
  100%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43)
    opacity: 0.5

.bbm-modal--stacked
  -webkit-animation-duration: 0.43333333333333335s
  -webkit-animation-name: bbm-stacked
  -webkit-animation-timing-function: linear
  -webkit-animation-fill-mode: both
  -webkit-transform-origin: 50% 50%
  -webkit-backface-visibility: hidden


/* destroy a stacked modal */
@-webkit-keyframes bbm-stacked-reverse
  0%
    -webkit-transform: matrix(0.99123, 0, 0, 0.99123, 0, 43.86266)
    opacity: 0.56162
  4%
    -webkit-transform: matrix(0.99293, 0, 0, 0.99293, 0, 45.05306)
    opacity: 0.64665
  8%
    -webkit-transform: matrix(0.99465, 0, 0, 0.99465, 0, 46.25785)
    opacity: 0.7327
  12%
    -webkit-transform: matrix(0.99618, 0, 0, 0.99618, 0, 47.32543)
    opacity: 0.80896
  16%
    -webkit-transform: matrix(0.99742, 0, 0, 0.99742, 0, 48.19443)
    opacity: 0.87103
  20%
    -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.8572)
    opacity: 0.91837
  24%
    -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33456)
    opacity: 0.95247
  28%
    -webkit-transform: matrix(0.99951, 0, 0, 0.99951, 0, 49.65946)
    opacity: 0.97568
  32%
    -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8671)
    opacity: 0.99051
  36%
    -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98963)
    opacity: 0.99926
  40%
    -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05377)
    opacity: 1.00384
  44%
    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08024)
    opacity: 1.00573
  48%
    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08419)
    opacity: 1.00601
  52%
    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07612)
    opacity: 1.00544
  56%
    -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06284)
    opacity: 1.00449
  60%
    -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04848)
    opacity: 1.00346
  64%
    -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03529)
    opacity: 1.00252
  68%
    -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02428)
    opacity: 1.00173
  72%
    -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01572)
    opacity: 1.00112
  76%
    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00944)
    opacity: 1.00067
  80%
    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00508)
    opacity: 1.00036
  84%
    -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 50.00223)
    opacity: 1.00016
  88%
    -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 50.0005)
    opacity: 1.00004
  92%
    -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 49.99956)
    opacity: 0.99997
  96%
    -webkit-transform: matrix(1.0, 0, 0, 1.0, 0, 49.99912)
    opacity: 0.99994
  100%
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50)
    opacity: 1

.bbm-modal--stacked-reverse
  -webkit-animation-duration: 0.43333333333333335s
  -webkit-animation-name: bbm-stacked-reverse
  -webkit-animation-timing-function: linear
  -webkit-animation-fill-mode: both
  -webkit-transform-origin: 50% 50%
  -webkit-backface-visibility: hidden


/* destroy a modal */
@-webkit-keyframes bbm-destroy
  0%
    -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187)
    opacity: 0.8741
  4%
    -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192)
    opacity: 0.70456
  8%
    -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078)
    opacity: 0.53297
  12%
    -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645)
    opacity: 0.38092
  16%
    -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009)
    opacity: 0.25716
  20%
    -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933)
    opacity: 0.16276
  24%
    -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342)
    opacity: 0.09477
  28%
    -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951)
    opacity: 0.0485
  32%
    -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325)
    opacity: 0.01893
  36%
    -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034)
    opacity: 0.00148
  40%
    -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639)
    opacity: -0.00766
  44%
    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001)
    opacity: -0.01143
  48%
    -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606)
    opacity: -0.01199
  52%
    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411)
    opacity: -0.01084
  56%
    -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736)
    opacity: -0.00895
  60%
    -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167)
    opacity: -0.0069
  64%
    -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482)
    opacity: -0.00503
  68%
    -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579)
    opacity: -0.00346
  72%
    -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433)
    opacity: -0.00224
  76%
    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059)
    opacity: -0.00134
  80%
    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494)
    opacity: -0.00072
  84%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777)
    opacity: -0.00032
  88%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995)
    opacity: -7.0e-05
  92%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044)
    opacity: 0.00006
  96%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088)
    opacity: 0.00012
  100%
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43)
    opacity: 0

.bbm-modal--destroy
  -webkit-animation-duration: 0.43333333333333335s
  -webkit-animation-name: bbm-destroy
  -webkit-animation-timing-function: linear
  -webkit-animation-fill-mode: both
  -webkit-transform-origin: 50% 50%
  -webkit-backface-visibility: hidden

// Fix for iPad safari bug (-webkit-animation-fill-mode and click events)
// Reference: https://github.com/awkward/backbone.modal/issues/77
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
  .bbm-modal--open, .bbm-modal--stacked, .bbm-modal--stacked-reverse, .bbm-modal--destroy
    -webkit-animation: none !important