.sport-purpose
  position: relative
  top: 30px
  max-width: calc(1125px + 16.66666666666%)
  margin: 0 auto 160px

  h3
    display: inline-block
    padding: 0 50px 5px 0
    border-bottom: 1px solid $borderColor
    position: relative
    z-index: 2

    span
      +arrowBottomWhite
      margin-left: 10px
      display: inline-block
      padding-bottom: 2px

  .circle-row
    width: 100%
    margin-top: 75px
    +flex

    >div
      width: 22.5%
      height: 200px   //calculted by Javascript
      float: left
      text-align: center
      position: relative
      cursor: pointer

      &:hover
        .circle
          border-color: $blue

        h5
          color: $blue

          span
            opacity: 1.0

        .circle.circle-color
          opacity: 0.0


      &:nth-child(1)
        .circle
          background-image: url("/images/structure/healthy.jpg")
        .circle-icon
          +sprite(-60px -30px, 85px, 74px)

      &:nth-child(2)
        .circle
          background-image: url("/images/structure/condition.jpg")
        .circle-icon
          +sprite(-320px -30px, 78px, 85px)

      &:nth-child(3)
        .circle
          background-image: url("/images/structure/weight.jpg")
        .circle-icon
          +sprite(-150px -30px, 76px, 85px)

      &:nth-child(4)
        .circle
          background-image: url("/images/structure/stronger.jpg")
        .circle-icon
          +sprite(-230px -30px, 85px, 39px)

      .circle
        border: 8px solid $orange
        border-radius: 999px
        width: 95%
        height: 95%
        position: relative
        z-index: 1
        +transition(border-color 0.5s)

        background-size: cover
        background-position: 50% 50%

        .circle-icon
          margin-left: auto
          margin-right: auto

        &.circle-color  //Orange opacity layer
          position: absolute
          z-index: 2
          background: rgba(255, 80, 75, 0.7)
          opacity: 1.0
          +transition(opacity 0.5s)
          +flex(center, center)

      h5
        position: relative
        top: 40px
        +audiBold
        text-transform: uppercase
        overflow-wrap: break-word
        word-wrap: break-word
        //word-break: break-word
        +transition(color 0.5s)

        span
          +arrowRightBlue
          display: inline-block
          +position(absolute, 34% null null null)
          opacity: 0.0
          +transition(opacity 0.5s)

    .grid
      background-image: url("/images/structure/cross_pattern.png")
      width: $contentBlock1Grid*7
      margin: 0 $contentBlock1Grid*2.5
      height: 400px
      top: -340px
      position: absolute

.over-ons
  .sport-purpose
    top: -50px

  .sport-purpose-dimension
    opacity: 1

.sport-purpose-dimension
  position: absolute
  height: 100px
  width: 100%
  left: -250px
  padding-left: 250px
  z-index: -5
  background: $contentBackground1
  opacity: 0

+media-query(1640px)
  .sport-purpose
    width: 95%

+media-query(1350px)
  .sport-purpose
    .circle-row
      >div
        h5
          font-size: 18px


+media-query(1080px)
  .sport-purpose-dimension
    display: none
  .sport-purpose
    h3
      font-size: 18px
    .circle-row
      display: block

      >div
        width: 40%
        margin-left: 4.5%
        margin-right: 4.5%


        &:first-child,&:nth-child(2)
          margin-bottom: 100px
          .grid
            display: none
        &:nth-child(3),&:nth-child(4)
          .grid
            height: 600px
            top: -540px

        .circle-icon
          zoom: 0.8
        h5
          top: 20px
          font-size: 18px