.sportivo
  .main-content
    .content-block1
      div.image-action
        img
          width: 100%
          margin-top: 40px

.home
  .image-header-container
    height: initial !important
    max-height: none !important

  .video-background
    +flex(center, center)
    position: relative
    z-index: 101


    .video-overlay
      +position(absolute, 0 0 0 0)
      width: 100%
      height: 100%
      background: rgba(0, 0, 0, 1) url("/images/structure/cross_pattern.png")
      pointer-events: none
      opacity: 0.3

  .text-overlay
    +position(absolute, 0 0 null 0)
    +flex(center, center)
    width: 100%
    height: 100%
    z-index: 102
    text-align: center

    h1, h2
      text-align: center

    h1
      font-size: 0
      color: rgba(0, 0, 0, 0.0)
      +sprite(0px 0px, 200px, 24px)
      +transform(scale(1.8))
      display: inline-block
      margin-bottom: 40px

    h3
      font-size: 28px

    .sportivo-home-logo
      +sprite(0px -123px, 65px, 70px)
      display: block
      margin: auto auto 20px

    .action-home
      font-size: 18px

      strong
        font-size: 23px
        line-height: 31px

      &.larger
        font-size: 21px
        line-height: 30px 

    .button-row
      margin-top: 40px
      margin-bottom: 20px
      .button1, .button2
        &.white
          p .icon
            margin-left: 10px !important

        +button(15px 0)
        text-align: center
        display: block
        &:nth-child(2)
          float: right

        p
          font-size: 21px
          +audiBold
          +flex(center, center)

          .icon
            margin-left: 10px


  .main-content
    .image-header-container
      min-height: initial
    .content-block1
      article
        header
          p
            +audi()

      .quote
        position: initial

      .redirect-placeholder
        +position(relative, -185px null null null)
        a
          display: inline-block
          width: 46%
          margin: 0 1.6% 0 2%
          position: relative
          &.redirect-nutrition
            background: url('/images/structure/nutrition_header.jpg')
            background-size: auto 100%

          &.redirect-personal-training
            background: url('/images/structure/personal-trainer-header.jpg')
            background-size: auto 100%

          &:hover
            h3
              height: 80px

          h3
            +position(absolute, null null 0 null)
            line-height: 54px
            height: 54px
            width: $contentBlock1Grid*11
            padding-left: $contentBlock1Grid
            color: $orange
            background-color: rgba(255,255,255,0.9)
            +transition(height 1s)

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



  .sport-purpose
    top: -50px
  .sport-purpose-dimension
    opacity: 1.0

  .articles-block.home-ul
    >h3
      margin: 20px 0 40px
      font-size: 36px


    .home-list
      height: 100px
      margin-bottom: 40px
      margin-left: 19%
      padding-left: 2.5%
      +transition(margin-left 1s)
      +flex(flex-start, center)
      background: $blue
      &:nth-of-type(odd)
        background: white
        .indicator
          em, h3
            color: $background
        p
          color: $background

      &.active
        margin-left: 0

      .indicator
        em, h3
          +audiBold
          font-size: 28px
          text-decoration: none
          font-style: normal
          display: inline-block
          color: white
        em
          width: 8.5%
          text-align: left
        h3
          width: 90%
          margin: 0

      p
        font-size: 24px
        line-height: 30px
        color: white
        +flex(flex-start, center)

      .logo-container
        +flex(center, center)
        text-align: center

        img
          width: 100%
          max-width: 100px
          opacity: 0.35


  .sportivo-call
    +flex(center, center)
    cursor: pointer
    position: relative
    padding-bottom: 50px
    h2
      margin-top: 10px
    p
      font-size: 20px

    span
      +arrowBottomWhiteLarge
      display: inline-block
      +position(relative, null null -20px null)
      +transition(bottom 0.5s)

      +animation(eye-catcher-home 2s infinite)

      +keyframes(eye-catcher-home)
        0%, 100%
          bottom: -20px
        50%
          bottom: -28px

    .background-block
      width: 0
      height: 0
      border-top: 100px solid $blue
      +position( absolute, null 0 0 0)
      left: 0
      z-index: 1

    .content-holder
      padding: 35px 0 20px
      position: relative
      z-index: 2
      width: 100%
      background-color: $blue
      text-align: center


    h2, h1, h3, p
      color: white

.main-content .content-red-block > .background-container.home-ul
  margin-top: 121px
  div
    height: 100px!important
    margin-bottom: 40px
    &:nth-of-type(even)
      background-color: $blue!important

+media-query(2050px)
  .home
    .main-content
      .content-block1
        .content-image-container
          margin-right: 50px

+media-query(1800px)
  .home
    .main-content
      .content-block1
        .content-image-container
          margin-left: $contentBlock1Grid*-7

+media-query(1640px)
  .home
    .main-content
      .articles-block.home-ul
        >h3
          width: 95%
          margin-left: auto
          margin-right: auto

+media-query(1350px)
  .home
    .articles-block.home-ul
      .home-list
        .indicator
          h3
            font-size: 24px
        p
          font-size: 18px


+media-query(1250px)
  .home, .sportivo
    .main-content
      .content-block1
        .content-image-container
          width: 100%
          margin: 0 0 50px
          padding: 0
        article.span8
          >.span9
            width: 100%


+media-query(1100px)
  .home
    .text-overlay
      h1
        display: none
      h3
        font-size: 20px

      .action-home
        font-size: 16px

      .button-row
        margin: 10px 0
        .span6
          width: 80%
          margin: 5px 10%
          p
            font-size: 18px

    .main-content
      .quote
        display: none

      .content-block1
        article
          width: 100%

      .content-red-block
        .background-image
          background-image: url("/images/structure/backgroundOrange3.jpg")

    .articles-block
      >h3
        margin: 20px 20px 40px
        font-size: 32px


    .articles-block.home-ul
      .home-list
        .indicator
          h3
            font-size: 22px
        .span5
          width: $contentBlock1Grid*6
        .logo-container
          display: none

+media-query(900px)
  .image-action
    width: 96%
    .main-content
      .header-container
        .header-wrapper
          .main-header
            padding-right: 40px
          div.header-button
            right: -5px

+media-query(800px)
  .home
    .main-content
      .articles-block
        .article
          p
            img
              display: none


+media-query(650px)
  .home

    .sportivo-call
      p
        font-size: 16px

    .text-overlay
      h1
        +transform(scale(1.2))
        margin-bottom: 15px
      h3
        font-size: 16px

      .sportivo-home-logo
        display: none

      .button-row
        margin-top: 20px
        .button1, .button2
          a
            p
              font-size: 16px


    .main-content
      .articles-block.home-ul
        .home-list
          display: block
          padding-top: 20px
          p
            width: 100%
            margin-left: 8.5%
            padding: 0
          .indicator
            width: 100%

      .content-block1
        .redirect-placeholder
          a
            width: 96%
            margin-top: 50px

      .button-holder .grid
        display: none

  .main-content .content-red-block > .background-container.home-ul
    display: none

+media-query(450px)
  .home


    .text-overlay
      h3, .action-home
        display: none

      .button-row
        width: 100%
        .span6
          width: 90%
          margin: 5px 5%

          p
            font-size: 14px
            white-space: pre