// For demo purposes only
.demo-headline
  padding: 73px 0 110px
  text-align: center

.demo-logo
  font-size: 90px
  font-weight: 900
  letter-spacing: -2px
  line-height: 100px

  .logo
    background: url(asset-path('demo/logo-mask.png',image)) center 0 no-repeat
    background-size: 256px 186px
    height: 186px
    margin: 0 auto 26px
    overflow: hidden
    text-indent: -9999em
    width: 256px

  small
    color: rgba($base, .3)
    display: block
    font-size: 22px
    font-weight: 700
    letter-spacing: -1px
    padding-top: 5px

// Panels delimiter
.demo-row
  margin-bottom: 20px

.demo-panel-title
  margin-bottom: 20px
  padding-top: 20px

  small
    color: scale-color(desaturate($base, 25%), $lightness: 66%)
    font-size: inherit
    font-weight: 400

// Shift blocks to fit design
.demo-navigation
  margin-bottom: -4px
  margin-top: -10px

.demo-pager
  margin-top: -10px

.demo-tooltips
  height: 126px

  // Needed just for the demo. Don't use it in producion ;)
  .tooltip
    left: -8px !important
    position: relative !important
    top: -8px !important

.demo-headings
  margin-bottom: 12px

.demo-tiles
  margin-bottom: 46px

.demo-icons
  margin-bottom: 115px

.demo-icons-24
  font-size: 24px
  margin-bottom: 38px
  position: relative
  span
    margin: 0 0 0 18px
    &:first-child
      margin-left: 0

.demo-icons-16
  font-size: 16px
  margin: 0 0 38px 5px
  position: relative
  span
    margin: 0 0 0 28px
    &:first-child
      margin-left: 0

.demo-icons-tooltip
  bottom: 0
  color: scale-color($base, $lightness: 70%)
  font-size: 12px
  left: 100%
  margin-left: 0 !important
  position: absolute
  width: 80px

.demo-illustrations
  margin-bottom: 45px

  img
    height: 100px
    margin-left: 35px
    width: 100px
    vertical-align: bottom

    &:first-child
      margin-left: 0

    &.big-illustration
      height: 111px
      width: 112px

    &.big-retina-illustration
      height: 104px
      margin-right: -24px
      width: 117px

    &.big-illustration-pusher
      margin-right: 12px

.demo-samples
  margin-bottom: 46px

.demo-video
  border-radius: 6px
  padding-top: 95px

.demo-download-section
  float: none
  margin: 0 auto
  padding: 60px 0 90px 20px
  text-align: center

  [class*='fui-']
    margin: 3px 0 -3px

.demo-download
  background-color: scale-color($base, $lightness: 90%)
  border-radius: 50%
  height: 120px
  margin: 0 auto 32px
  padding: 40px 28px 30px 32px
  text-align: center
  width: 130px

  img
    height: 104px
    width: 82px

.demo-download-text
  font-size: 15px
  padding: 20px 0
  text-align: center

.demo-text-box
  a:hover
    color: $firm

.demo-browser
  background: scale-color($base, $lightness: -15%) url(asset-path('demo/browser.png',image)) 0 0 no-repeat
  background-size: 659px 42px
  border-radius: 0 0 6px 6px
  color: $inverse
  margin: 0 41px 140px 0
  padding-top: 42px

.demo-browser-side
  float: left
  padding: 22px 20px
  width: 111px

  > h5
    margin-bottom: 3px
    text-transform: none

  > h6
    font-size: 11px
    font-weight: 300
    line-height: 18px
    margin-top: 3px
    text-transform: none

.demo-browser-author
  background: url(asset-path('demo/browser-author.jpg',image)) center center no-repeat
  border: 3px solid $inverse
  display: block
  height: 84px
  margin: 0 auto
  width: 84px
  +border-radius(50%)

.demo-browser-action
  padding: 30px 0 12px

  > .btn
    padding: 9px 0 10px 11px
    text-align: left
    +border-radius(3px)

    &:before
      color: $inverse
      content: '\e004'
      font-size: 16px
      font-family: 'Flat-UI-Icons-16'
      font-weight: 300
      margin-right: 12px
      position: relative
      top: 1px
      -webkit-font-smoothing: antialiased

.demo-browser-content
  background-color: $base
  border-radius: 0 0 6px
  overflow: hidden
  padding: 21px 0 0 20px

  > img
    border: 6px solid $inverse
    float: left
    margin: 0 15px 20px 0
    width: 134px

// Serving 2x images
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2)
  .logo
    background-image: url(asset-path('demo/logo-mask-2x.png',image))

  .demo-browser
    background-image: url(asset-path('demo/browser-2x.png',image))