.main-content
  padding-left: 250px
  min-height: 400px
  top: 0
  overflow: hidden


  section.content-red-block
    max-width: inherit
    position: relative

  .main-header
    font-size: 52px

  .header-container
    width: 100%
    height: 164px
    background: rgba(255, 255, 255, 1)
    display: block

    .header-wrapper
      +flex(flex-end, center)
      position: relative
      max-width: 1125px
      padding: 0 $contentBlock1Grid 0 $contentBlock1Grid
      margin-left: auto
      margin-right: auto
      height: 100%

    h1
      +flex(space-between, center)
      white-space: nowrap

      small
        text-transform: uppercase
        position: absolute
        margin-top: -30px 
        color: $blue
        font-size: 18px


    div.header-button
      float: right
      width: 30px
      height: 30px
      border: 2px solid $orange
      border-radius: 40px
      cursor: pointer

      .icon
        +arrowBottomOrangeLarge
        margin: 9px auto


  .image-header-container
    min-height: 300px
    max-height: 650px
    position: relative
    overflow: hidden

    .image-wrapper
      width: 100%
      height: 100%
      background-size: cover
      background-position: 50% 50%

    .header-container
      position: absolute
      bottom: 0

      width: 100%
      height: 20%
      min-height: 115px
      max-height: 164px
      background: rgba(255, 255, 255, 0.9)

  .content-block1
    position: relative
    z-index: 1

    margin: 3.5% auto
    padding: 4% $contentBlock1Grid 0 $contentBlock1Grid
    background-color: $contentBackground1
    max-width: 1125px

    &.no-background
      background-color: inherit

    &.pre-content
      padding-top: 0%

    article
      &:after
        content: ""
        display: block
        clear: both

      &.extra-content

        &:last-of-type
          .item-indicator
            display: none

        >*
          width: 46%

        p, ol, ul
          margin-bottom: 20px

        h2
          color: $semiGrey
        .subscribe-container
          margin-bottom: -15px
          max-width: 70%
          a
            background: $contentBackground1

        .item-indicator
          width: 80%
          height: 80px
          //background-image: url("/images/structure/cross_pattern.png")
          clear: both
          margin: 0 auto -20px
          position: relative
          top: -15px
          z-index: -1

        .image-container
          margin-top: 20px
          img
            width: 100%
            max-width: 280px

        .partner-photo
          float: right
          z-index: 10
          img
            width: 100%

      p, ul li
        font-size: 18px
        line-height: 28px
        color: $borderColor

      ul
        list-style: disc
        padding: 10px 25px

      ul.check
        list-style-image: url('/images/structure/check.png')
        li
          padding-left: 20px
          color: white




      header
        margin-bottom: 50px

        h2
          font-size: 32px
          text-transform: uppercase
          +audiBold
          margin-bottom: 40px

          sup
            font-size: 60%

        p
          color: white
          font-size: 22px
          +audiBold

    .subscribe-container
      margin: 40px 0 10px

      &:last-of-type
        margin: 10px 0 75px

      &.lesrooster
        margin: 40px 0 50px
        padding: 0

      a
        +button(20px 30px)
        width: initial
        .text
          padding-right: 15px


    .content-image-container
      margin-left: $contentBlock1Grid*-11
      margin-bottom: -8%
      position: relative

      img
        width: 100%

  .content-red-block
    margin-top: -75px

    >div, >article >section
      position: relative
      min-height: 100px
      z-index: 1

    .background-image
      background-image: url("/images/structure/backgroundOrange2.jpg")
      background-size: 100%
      width: 100%
      position: absolute
      left: 0

      &:before
        content: ""
        position: absolute
        background-image: url("/images/structure/backgroundOrange1.png")
        background-size: 100%
        background-position: bottom
        background-repeat: no-repeat
        top: -180px
        width: 100%
        height: 180px
        pointer-events: none
.error404
  p
    font-size: 20px
    color: $borderColor
    margin: 50px 0 120px
    a
      color: $orange
.error404training
  margin-bottom: 100px

.stars
  text-align: left
  margin-top: 5px
.star
  +sprite(-32px -100px, 18px, 18px)
  display: inline-block

.opening-hours, .contact-info
  width: 100%
  max-width: 275px

  h4
    padding: 20px 0 10px
    font-size: 24px

  p
    margin-bottom: 20px

  li
    color: $borderColor
    span
      float: right
      color: $borderColor
    &.active
      color: white
      span
        color: white

#mobile_contact
  .opening-hours
    li
      color: $background
      span
        color: $background

      &.active
        color: $blue
        span
          color: $blue

.sitemap
  .content-block1
    article
      ul
        list-style: none
        li
          margin-bottom: 20px
          text-transform: capitalize

          a
            font-size: 24px
            padding-right: 50px
            padding-bottom: 5px
            border-bottom: 2px $borderColor dashed
            display: inline-block
            +transition(all 0.5s)
            &:hover
              border-bottom-color: $orange

          ul
            li
              margin-bottom: 10px
              a
                font-size: 24px
                color: $borderColor

              ul
                li
                  margin-bottom: 5px
                  a
                    font-size: 18px


.dividerExtra
  height: 100px
  width: 2000px
  margin: 0px 0 80px -400px
  background: $background
  clear: both

+media-query(2050px)
  .main-content
    .content-block1
      article
        .content-image-container
          margin-left: $contentBlock1Grid*-9
          width: 80%

+media-query(1800px)
  .main-content
    .content-block1
      article
        >.span10
          width: $contentBlock1Grid*9
        .content-image-container
          margin-left: $contentBlock1Grid*-8

+media-query(1700px)
  .main-content
    .content-block1
      article
        >.span10
          width: $contentBlock1Grid*8
        .content-image-container
          margin-left: $contentBlock1Grid*-7

+media-query(1520px)
  .main-content
    .content-red-block
      .background-image
        background-image: url("/images/structure/backgroundOrange3.jpg")
  .sporten
    .main-content
      .content-block1
        article.span8
          width: calc((100% / 12 * 9) - 4%)
          .content-image-container
            margin-left: $contentBlock1Grid*-6
            width: 75%


+media-query(1400px)
  .main-content
    .main-header
      font-size: 34px
    .header-container h1 small
      font-size: 14px


+media-query(1100px)
  .sporten
    .main-content
      .content-block1
        article.span8
          width: calc((100% / 12 * 9) - 4%)
          .content-image-container
            margin: 0 0 20px
            padding: 0
            width: 100%
          >.span10
            width: 100%
            padding: 0

  .main-content
    .content-block1
      article.extra-content
        >*
          width: 96%
          margin: auto
        .partner-photo
          float: none
          margin: 20px auto
          padding: 0

        .image-container
          margin: 20px auto

        .subscribe-container
          margin-left: 0




+media-query(900px)
  .main-content
    padding-left: 0
    width: 100%!important
    margin-top: 60px

    .header-container
      +flex(center, center)
      min-height: 80px
      .header-wrapper
        margin-left: 0
        h1
          width: initial
          position: relative
        div.header-button
          position: absolute
          right: -75px
          top: 3px

    .content-block1
      padding: 4% $contentBlock1Grid 0 $contentBlock1Grid
      .span8
        width: 100%

      .span9
        width: 100%

      .span8
        width: 100%

  .sporten
    .main-content
      .content-block1
        article.span8
          width: 100%

+media-query-height(500px)
  .main-content
    padding-left: 0
    width: 100%!important
    margin-top: 60px
    .header-container
      +flex(center, center)
      .header-wrapper
        margin-left: 0
        h1
          width: initial
          position: relative
        div.header-button
          position: absolute
          right: -75px
          top: 3px

    .content-block1
      padding: 4% $contentBlock1Grid 0 $contentBlock1Grid
      .span8
        width: 100%

      .span9
        width: 100%

      .span8
        width: 100%

  .sporten
    .main-content
      .content-block1
        article.span8
          width: 100%