/* ==========================================================================
   Holder with mouse icon that tells the user he can scroll
   ========================================================================== */

.scroll-hinter

  position: absolute
  z-index: 35
  top: 34%
  left: column(5.3)
  width: column(3.4)
  height: 0

  // Hide on small view
  +respond-to-width($smGridBreakpoint)
    display: none

  // Use this element to determine the height using padding
  .sizer
    width: 100%
    //padding-bottom: 75%
    border-top-left-radius: 500px
    border-top-right-radius: 500px
    +transform(translateY(-199%))

  // The mouse with the arrow
  .icon
    +position(absolute, 30% null null 38%)
    width: 24%
    cursor: pointer

    // Color the svg
    .mouse-body,
    .mouse-wheel,
    .arrow
      fill: #fff

    .arrow
      transition: transform 200ms ease-out

    &:hover
      .arrow
        +transform(translate3D(0,30%,0))


  .mouse-wheel
    animation: moveUpDown 1s ease-out infinite

// Up and down animation for mouse wheel
@keyframes moveUpDown
  0%
    +transform(translate3D(0,0,0))
  50%
    +transform(translate3D(0,7%,0))
  100%
    +transform(translate3D(0,0,0))