/*==========================================================================
  Menu items block in pages (home/do/kids)
  ========================================================================== */

/**
  * Menu items
  *
  */
.menu-items
  a
    text-decoration: none
    outline: none

  .menu-item
    position: relative
    padding: 20px
    +flex(center, center)
    +flex-direction(column)
    height: 400px

    +respond-to-width(1200)
      height: 300px

    +respond-to-width(900)
      height: 250px

    background:
      repeat: no-repeat
      size: cover
      position: center

    .placeholder
      display: inline-block
      z-index: 10
      position: absolute
      top: 60%
      left: 50%
      transform: translate(-50%, -50%)

    h2
      pointer-events: none
      z-index: 10
      flex: none
      text-align: center
      font-size: 2rem
      +respond-to-width(1200)
        font-size: 1.6rem
      +respond-to-width(900)
        font-size: 1.2rem

      font-family: 'Coda Caption', sans-serif
      color: white
      +stroke(3, $darkBlueGreen)

    p
      flex: none
      pointer-events: none
      opacity: 0
      visibility: hidden
      z-index: 10
      color: $darkBlueGreen
      text-align: center


  .hoverEl
    pointer-events: none
    opacity: 0
    visibility: hidden
    z-index: 2
    content: ''
    position: absolute
    width: 100%
    height: 100%
    background:
      color: $yellow

  /**
    * Menu items home
    *
    */

  .item-doing
    background:
      image: url('/img/structure/links/kid_with_sand_hands.png')

  .item-eating
    background:
      image: url('/img/structure/links/food.png')

  .item-playing
    background:
      image: url('/img/structure/links/playing_kid.png')

  .item-theater
    background:
      image: url('/img/structure/links/theater.png')

  .item-sleeping
    background:
      image: url('/img/structure/links/walking_family.png')

  .item-shopping
    background:
      image: url('/img/structure/links/shopping.png')

  /**
    * Menu items do page
    *
    */

  .item-ouddorp_duin
    background:
      image: url('/img/structure/links/ouddorp.png')

  .item-beach_square
    background:
      image: url('/img/structure/links/beach_square.png')

  .item-beach
    background:
      image: url('/img/structure/links/beach.png')

  .item-clinics
    background:
      image: url('/img/structure/links/clinics.png')

  .item-nature
    background:
      image: url('/img/structure/links/nature.png')

  .item-art_culture
    background:
      image: url('/img/structure/links/art_culture.png')

  /**
    * Menu items kids page
    *
    */

  .item-workshops
    background:
      image: url('/img/structure/links/kid_with_sand_hands.png')

  .item-on_the_road
    background:
      image: url('/img/structure/links/kid_with_sand_hands.png')

  .item-play_inside
    background:
      image: url('/img/structure/links/kid_with_sand_hands.png')

  .item-play_outside
    background:
      image: url('/img/structure/links/kid_with_sand_hands.png')

  .item-downloads
    background:
      image: url('/img/structure/links/kid_with_sand_hands.png')

  .item-kidsparty
    background:
      image: url('/img/structure/links/kid_with_sand_hands.png')