/* Home - RoadMap */
.sliderMenu
  position: relative
  z-index: 2000
  margin: 0 0 60px 0
  padding-top: 20px
  width: 100%
  height: 180px
  background: #F5F5F5

  +respond-to(handheld)
    display: none

  .shadow
    position: absolute
    bottom: -50px
    left: 0
    width: 100%
    height: 50px
    background: no-repeat url('/images/structure/coevering_sprite.png') 0 -230px
    opacity: 0
    filter: alpha(opacity=0)

.sliderMenuPlaceHolder
  display: none
  position: relative
  margin: 0 0 120px 0
  width: 100%
  height: 200px

  +respond-to(handheld)
    display: none !important

.roadMapHolder
  position: relative
  margin: 40px 0 0 0
  width: 100%
  height: 70px

.stepHolder
  display: block
  position: absolute
  top: 0
  left: 0
  margin-left: -15px
  width: 30px
  height: 70px
  cursor: pointer

  &.step1
    left: 40%

  &.step2
    left: 50%

  &.step3
    left: 60%

.stepNumber
  display: block
  position: absolute
  top: 0
  left: 0
  padding: 5px 0 0 11px
  width: 20px
  height: 26px
  background: no-repeat url('/images/structure/coevering_sprite.png') -130px -10px
  color: #fff
  font-size: .947368421em
  font-family: 'DIN Next W02 Medium',arial,sans-serif

.stepArrow
  display: block
  position: absolute
  bottom: 0
  left: 0
  width: 30px
  height: 30px

  .over, .out
    display: block
    position: absolute
    width: 30px
    height: 30px
    background: no-repeat url('/images/structure/coevering_sprite.png')

  .out
    background-position: -170px -10px
  .over
    background-position: -210px -10px
    z-index: 10
    opacity: 0
    filter: alpha(opacity=100)

  &.active
    .stepArrow
      .out
        background-position: -210px -10px

/* Home - Slider */
.nav.slider
  position: relative

  +respond-to(handheld)
    display: none

  .mask
    position: relative
    overflow: hidden
    width: 100%

  .row
    position: relative
    left: 0
    padding: 40px 0 0 0
    width: 200%
    height: 340px

    .row-column
      float: left
      overflow: hidden
      width: 50%

    &.alt
      margin-left: 0
      margin-right: 100px

    .stepHolder
      top: 45px

  .stepHolder.step1, .stepHolder.step3
    left: 27.5%
  .stepHolder.step2
    left: 22%
  .stepHolder.back
    left: auto
    right: 0

  .column
    margin-top: 0
    margin-bottom: 0

.stepArrow.right .out
  background-position: -250px -10px
.stepHolder.active .stepArrow.right .out
  background-position: -290px -10px
.stepArrow.right .over
  background-position: -290px -10px
.stepArrow.left .out
  background-position: -380px -10px
.stepHolder.active .stepArrow.left .out
  background-position: -420px -10px
.stepArrow.left .over
  background-position: -420px -10px

.step1.back
  top: 40px
  z-index: 100
  opacity: 0
  filter: alpha(opacity = 0)

.step2.back
  top: 440px
  z-index: 100
  opacity: 0
  filter: alpha(opacity = 0)

.step3.back
  top: 840px
  z-index: 100
  opacity: 0
  filter: alpha(opacity = 0)



.blockHolder
  position: relative
  top: -320px
  float: left
  padding-right: 10px
  padding-left: 10px
  box-sizing: border-box

  .imageFrame
    margin-bottom: 15px
    box-sizing: border-box
    width: 100%

    img
      width: 100%

    &.last
      margin-right: 0

.slide1
  .blockHolder
    width: 25%

/* Home - Slider - Slide2 */
.slide2
  .blockHolder
    width: 16.666666667%


/* Home - Slider - Slide3 */
.slide3
  .blockHolder
    width: 25%

    h2
      margin: 0
      height: 110px