/* ==========================================================================
   Home page
   ========================================================================== */
body.home
  .content
    .right
      padding-left: 0
      padding-right: 0

      .breadcrumb
        margin-left: column(0.5, 9.5)


.header-slider
  width: 100%
  z-index: 0

  .placeholder
    height: 400px !important
    padding-bottom: 0 !important
    overflow: hidden

    figure
      top: -48% !important
      height: 200% !important
      padding-bottom: 0 !important

      +respond-to-width(1000)
        height: 175%

      span
        background-size: cover !important
        background-color: #F0F5FA !important

  .controllers
    margin-top: 0 !important
    height: 40px !important
    .dots
      height: 20px
      text-align: center
      .dot
        display: inline-block
        width: 9px
        height: 9px
        border-radius: 50%
        background-color: #A5AAAF
        cursor: pointer

        &.active
          background-color: $blue


.intro
  vertical-align: top
  display: flex
  margin-bottom: 45px
  margin-left: column(0.25, 9.5)
  margin-top: 15px
  width: column(9, 9.5) !important
  //background: linear-gradient(180deg, rgba(238,238,238,0) 70%, rgba(#B1B8BF, 0.1) 100%)
  position: relative

  .left
    width: column(4.5, 9)
    overflow: visible

    p
      color: $euroTextGrey
      font-size: 16px
      line-height: 24px

    a.button
      margin-right: 30px

  .right
    width: column(4.35, 9.5)
    margin-left: column(0.5, 9.5)
    background: linear-gradient(270deg, #FFEF18 0%, #FFDA0A 100%)
    padding: 30px 0 10px 0
    overflow: visible
    margin-top: 20px
    margin-bottom: 60px

    .inner-right
      +respond-to-width(950)
        width: 100%

      ul
        margin: 0
        list-style: none
        text-transform: uppercase
        color: $euroHeaderGrey
        font-size: 14px
        font-weight: 600
        line-height: 18px
        padding: 0 25px


        li
          padding: 24px 70px 20px 50px
          position: relative
          border-bottom: 1px solid #DCB400
          position: relative

          &:before
            position: absolute
            left: 10px
            width: 14px
            margin-top: -4px

            content: "\2713"
            font-size: 1.4rem

          &:last-child
            border-bottom: none

          svg
            display: block
            width: 20px
            height: 27px
            position: absolute
            left: 16px
            top: 19px

            path
              &#Fill-1, &#Fill-7
                fill: #FFF0B3

  .img-holder
    position: absolute
    bottom: 0
    right: 0
    transform: scaleX(-1)

    +respond-to-width(500)
      display: none


.brands
  overflow: hidden
  height: 200px
  background-color: white
  width: column(9, 9.5) !important
  margin-left: column(0.25, 9.5)
  padding: 30px
  box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)

  +flex(space-between, center)
  flex-wrap: wrap

  h4
    width: 100%
    color: #3291FF
    font-size: 15px
    font-weight: 600
    line-height: 24px
    text-align: center
    text-transform: uppercase
    margin: 0

  .brand
    width: 17%
    height: 100%
    min-height: 150px

    figure
      width: 100%
      height: 100%
      background-color: transparent
      span
        width: 100%
        height: 100%
        display: block
        background-color: transparent
        background-position: center
        background-size: 100% !important
        background-repeat: no-repeat




.featured-products
  padding-left: column(0.25, 9.5)
  > .grid-col
    width: column(9.25, 9.5)
    a:hover
      color: $euroTextGrey
      &:after
        color: $euroTextGrey

    &.header
      margin: 36px 0 26px 0
      overflow: visible
      h2
        display: inline-block
        width: 80%
        color: $euroSubHeaderGrey
        text-transform: uppercase
        font-size: 15px
        font-weight: 600
        line-height: 24px

      a.button
        background-color: transparent
        border: solid 1px #C8CDD2
        position: absolute
        right: 0
        transition: background-color 0.4s

        &:hover
          background-color: $euroYellow
          color: $euroDarkGrey
          border: solid 1px $euroYellow


+respond-to-width(1280)
  .intro
    .right
      ul
        padding: 0 15px
        li
          padding: 20px 40px
          svg
            left: 10px

+respond-to-width(1150)
  .intro
    display: block

    .left, .right
      width: column(8.5, 9.5)

    .left
      margin-bottom: 60px

    .right
      margin-left: 0
      ul
        padding: 0 30px
        li
          padding: 20px 50px
          svg
            left: 20px


  .brands
    height: auto
    flex-wrap: wrap
    padding: 0 30px

    h4
      width: 100%

    .brand
      margin-bottom: 30px
      width: 140px
      height: 1px
      min-height: 70px

      +respond-to-width(1015)
        width: 190px
        margin-bottom: 30px

+respond-to-width(950)
  .intro
    overflow: hidden
    margin-left: 0
    padding-left: column(0.5, 9.5)
    width: 100% !important

    .right
      ul
        li
          br
            display: none

          svg
            top: calc(50% - 13px)

  .brands
    margin-left: column(0.5, 9.5)
    width: column(8.5, 9.5) !important
    .brand
      width: 140px
      +respond-to-width(695)
        width: 190px
        margin-bottom: 30px

      +respond-to-width(525)
        width: 140px

  .featured-products
    padding-left: 0
    width: column(8.5, 9.5) !important

+respond-to-width(500)
  .intro
    background: none
    .right
      width: column(9, 9.5)
      margin-bottom: 0

+respond-to-width(475)
  .intro
    .right
      margin-bottom: 25px

+respond-to-width(425)
  .header-slider
    margin-bottom: 0
  .intro
    width: 100% !important
    margin-left: 0
    margin-bottom: 0

    .left
      padding: 0 20px

    .right
      display: none

  .brands
    width: 100% !important
    margin-left: 0
    border-radius: 0
    box-shadow: none
    justify-content: space-around

  .featured-products
    margin-bottom: 30px
    > .grid-col.header
      h2
        display: block
        margin-top: 0px
        margin-bottom: 15px

      a.button
        position: relative