@import vital/variables

// Demo

.grid-preview
  margin: 2em 0
  [class*='col-'], .autogrid .col
    padding-top: 0.5em
    padding-bottom: 0.5em
    background: #eee
    font-size: 0.7em
    text-align: center
    border: $border-width solid #ddd
    font-family: $code
    overflow: hidden

.empty-grid-preview
  margin: 1em 0
  padding: 1em 1em 0 1em
  background: $gray-lightest

.icons-preview
  img
    &[src$='.svg']
      width: 1em
      height: 1em
  p
    padding: 1em 0
    margin: 0
    height: auto
    min-height: 3em
    text-align: center
    line-height: 1.5
    color: gray
    width: 25%
    float: left
    display: block
    &:hover
      background: $gray-lightest
      border-radius: 2px
      transition: 0.1s linear background

.header-preview
  .header, nav ul li
    background: #efefef !important

// HR Colors
hr
  height: 3px
  &.red
    background: #DD3F41

// Header

.header nav ul li
  float: right
.get-started .header .menu li:nth-child(5),
.components .header .menu li:nth-child(4),
.layouts .header .menu li:nth-child(3),
  background: $header-link-hover

// Lazyload

.b-lazy
  opacity: 0
.b-loading, .b-loaded
  opacity: 1
  transform: $translate
  transition: opacity 0.5s ease

// Home

.index
  .hero
    h1
      font-size: 5em
      line-height: 1
    .icon-vital
      line-height: 1
      font-size: 8em
  .page
    .section
      padding: 3em 1em
  .centered-text
    padding: 0 15%

#productive
  .section
    padding: 5em 1em
  img
    width: 4em
    opacity: 0.7
  p
    padding-right: 2em

#simple
  img
    width: 4em
    opacity: 0.8
  .autogrid
    padding: 2em 0

#light
  img
    padding: 2% 15% 0 15%
  .stats
    h1
      font-size: 4em
      margin: 0
      font-weight: 100
      span
        font-size: 0.5em
        color: #aaa
        &:before
          content: ' '
    hr
      margin: 0 auto

#open-source
  img
    width: 5em
    margin: 2em 0 0 0


@media screen and (max-width: $phablet)

  .forms-preview
    [class*='col-']
      padding: 0.5% 0

  .centered-text
    padding: 0 5%

  .index .page .section
    padding: 1em

  #productive
    p
      padding-right: 0
    .section
      padding: 2em 1em 1em 1em
    .col-1-2
      padding-bottom: 2em

@media screen and (max-width: $handheld)

  // Components

  .icons-preview
    p
      width: 50%

  .forms-preview
    input:not([type='checkbox']):not([type='radio']), select, textarea, .btn
      margin: 0.1em 0
