.home-start-block
  position: relative
  +grid-padding-s(1,1,0,1)
  +grid-margin($top: 2, $bottom: 2)
  width: 50%

  h1
    font-size: 2.4em
    margin-top: 0

  h2
    color: $blue
    font-size: 1.8em

  .search-bar
    +grid-margin($top: 1, $bottom: 1)

  ul
    width: 90%
    +type-basic

    li
      position: relative
      +grid-padding-s($left: .5)
      margin-bottom: .666665em

      &::before
        content: ''
        display: block
        +position(absolute, .4em null null 0)
        @extend %icon-sprite
        +icon-sprite(6,2,4px,8px)

  .btn-holder
    +grid-margin($top: .5, $bottom: .5)
    width: 100%
    text-align: center

  img.employee-home
    +position(absolute, null -175px 0 null)
    +grid-margin($bottom: -2)
    height: 400px

.home-planes
  li.content-block
    float: left
    +grid-padding-s(0,.75,0,.75)
    +grid-margin($top: 1, $bottom: 1)
    margin-right: 1.33332%
    width: 24%
    +grid-height(5)

    &.last
      margin-right: 0

  .payment-methods
    img
      width: 100%

  .reviews
    margin: 0
    padding: 0
    height: auto
    text-align: center
    border: none

    .stars
      display: inline-block
    .home-clear
      display: block

    .grade
      margin: 0 auto 10px
      float: none
      height: 80px
      width: 80px
      border-radius: 40px
      border-width: 4px
      font-size: 4em
      line-height: 72px

    .right-container
      float: none
      margin: 0 auto

    .kiyoh-logo
      display: none

    .recommendation
      display: none

  .selling-points
    padding-top: 0
    border: none

  .discount-info
    .title
      +type-basic-semibold-uc
      text-transform: uppercase
      display: block
      margin-bottom: 0.66665em

    table
      padding: 0
      margin: 0.66665em 0
      width: 100%
      +type-small

      td:first-child
        width: 75%

      td:nth-child(2)
        color: $blue
        +bold

    .note
      font-size: 1.3em
      +italic
      color: $light-grey



.home-brand-block
  +grid-height(6)
  +grid-margin($bottom: 1)

  li
    +dashed-border(left bottom)
    text-align: center

    .background
      display: block
      +position(absolute, 0 null null 0)
      width: 100%
      height: 100%
      +transition(all 0.2s ease-out)

    &:hover

      .background
        border: 1px solid rgba(156,201,239,.5)
        box-shadow: 0 0 6px 0 rgba(156,201,239,1)

    a
      display: block
      position: relative
      +grid-height(3)
      +grid-line-height(3)



    img
      display: block
      position: absolute
      top: 50%
      left: 50%
      max-width: 60%
      max-height: 70%
      +transform(translate(-50%,-50%))

.home .nav-brands
  border-radius: 4px

.home
  .bg-sidebar
    display: none
  .bg-content
    display: none