.project-row
  position: relative
  z-index: 6
  width: 100%
  padding-top: 800px

  .blocks-before
    +position(absolute, 0 0 null 0)
    height: 800px
    z-index: 5
    div
      background: $orange
      position: absolute
      will-change: top

    .block1
      width: 75px
      height: 75px
      right: calc(100% / 3 - 37.5px)
      top: -100px
      +flex(center, center)
      cursor: pointer
      span
        +whiteArrow
        +translate3dRotate(0,0,0, 90deg)
        +animation-name(animateArrow)
        +animation-duration(3s)
        +animation-iteration-count(infinite)

      +keyframes(animateArrow)
        0%, 100%
          +translate3dRotate(0,0,0, 90deg)
        50%
          +translate3dRotate(0,10px,0, 90deg)


    .block2
      width: 60px
      height: 60px
      left: calc(100% / 3 - 60px)
      top: 250px
    .block3
      width: 35px
      height: 35px
      right: calc(100% / 3 - 35px)
      top: 500px

  .project-container
    width: 80%

  h2
    font-family: "Lato", sans-serif
    font-weight: 700
    font-size: 180px
    line-height: 120px
    margin-top: 400px
    color: $subBlue
    +position(absolute, null null null null)
    +transform(rotate(90deg))
    +transform-origin(100% 0)
    will-change: margin-top

  .project
    a
      position: relative
      display: block
    &:nth-of-type(odd)
      .image
        +position(absolute, 0 null null 0)

      .content
        float: right

      .link:before
        content: ''
        +orangeArrow

    &:nth-of-type(even)
      .link:after
        content: ''
        +orangeArrow
        +transform(rotate(180deg))
        margin-bottom: -2px



    .image
      +position(absolute, 0 0 null null)
      width: 50%
      height: 100%
      background-size: cover
      background-position: 50% 50%

      img
        display: none
        width: 100%

      .corners
        +position(absolute, 0 0 0 0)
        width: 100%
        height: 100%

        .lb, .lt, .rb, .rt
          opacity: 0
          +transition(all 0.4s)
          .height
            width: 25px
            height: 5px
            background: $orange
            position: absolute
          .width
            width: 5px
            height: 25px
            background: $orange
            position: absolute

        .lt
          +position(absolute, 0 null null 0)
          .height, .width
            top: 0
            left: 0
          +translate3d(-5px, -5px, 0)
        .lb
          +position(absolute, null null 0 0)
          .height, .width
            bottom: 0
            left: 0
          +translate3d(-5px, 5px, 0)
        .rt
          .height, .width
            top: 0
            right: 0
          +position(absolute, 0 0 null null)
          +translate3d(5px, -5px, 0)
        .rb
          .height, .width
            bottom: 0
            right: 0
          +position(absolute, null 0 0 null)
          +translate3d(5px, 5px, 0)


    .content
      width: 50%
      float: left
      padding: 2.5% 2.5% 0
      h3
        +font-bold(38px, 50px)
        color: $orange
        margin-bottom: 20px

      .sub-content
        border-left: 4px solid $orange
        padding-left: 15px
        width: 80%
        span
          +font-bold(20px, 36px)
          text-transform: uppercase
          font-style: italic
          margin-right: 10px
          em
            +font-bold(22px, 36px)
            color: $orange
            font-style: normal

        >p:first-of-type
          margin-top: 10px

        p, h2, h1, h3, h4
          +font-default(18px, 28px)
          color: $semiWhite
          font-style: italic
          margin: 0

    .link
      +font-default(18px, 28px)
      color: $semiWhite
      font-style: italic
      margin-top: 20px
      &:after, &:before
        +translate3d(0,0,0)
        +transition(all 0.3s)

    &:hover
      .link
        color: white
        &:before
          +translate3d( -20px, 0, 0)
          opacity: 0

        &:after
          +translate3dRotate( 20px, 0, 0, 180deg)
          opacity: 0
      .image
        .corners
          .lb, .lt, .rb, .rt
            +translate3d(0,0,0)
            opacity: 1
.more-projects
  margin-top: 100px
  display: block
  position: relative
  z-index: 2
  &.project-overview
    margin-bottom: 150px
    .text-placeholder
      p
        span
          +transform(rotate(-90deg))
  &.back-project-overview
    z-index: 10
    margin-bottom: 125px
    pointer-events: none
    .text-placeholder
      a
        pointer-events: all
      p
        span
          +transform(rotate(180deg))

  .background-circle
    +position(absolute, 0 null null null)
    height: 100px //calculated by Javscript
    width: 100px
    background: $darkBlue
    left: 50%
    border-radius: 9999px
    z-index: -2
  svg
    display: block
    path
      stroke-dasharray: 2382
      stroke-dashoffset: 2382
      stroke-width: 4
      stroke-miterlimit: 10
      +transition(stroke-dashoffset 1s)
      +transition-timing-function(cubic-bezier(.69,0,.91,.58))

  &.animate
    svg
      path
        stroke-dashoffset: (2382/2)
  &:hover
    svg
      path
        stroke-dashoffset: 2154
        +transition(stroke-dashoffset 1s)

  .text-placeholder
    +position(absolute, 0 0 0 0)
    width: 100%
    height: 100%
    +flex(center, center)

    a
      height: 100%
      +flex(center, center)
      width: 9%

    p
      text-align: center
      width: 100%

      em
        font-style: normal
        display: block

      span
        +whiteArrow
.project-sub
  position: relative
  height: 1000px
  z-index: 5

  &.hidden
    height: 0

  .blocks
    +position(absolute, 0 0 0 0)
    width: 100%
    height: 100%
    z-index: 9

    div
      background: $orange

    .block1
      position: absolute
      left: calc(100% / 3 - 20px)
      width: 20px
      height: 20px
      top: 200px

    .block2
      position: absolute
      right: calc(100% / 3)
      width: 50px
      height: 50px
      top: 450px

    .block3
      position: absolute
      left: calc(100% / 3)
      width: 90px
      height: 90px
      top: 650px

  .image-background
    background: url("/img/project_background.jpg")
    opacity: 0.08



+media-query(1900px)
  .project-row
    h2
      font-size: 160px
      margin-right: 9px

+media-query(1600px)
  .project-row
    h2
      font-size: 140px
      margin-right: 17px

  .more-projects
    .text-placeholder
      p
        +font-default(15px)

+media-query(1500px)
  .more-projects.back-project-overview
    .text-placeholder
      p
        em
          display: none

+media-query(1400px)
  .project-row
    h2
      font-size: 120px
      margin-right: 25px

    .content
      .link
        &:after
          margin-bottom: -5px !important
+media-query(1350px)
  .project-row
    .project
      .content
        h3
          +font-bold(28px, 34px)

+media-query(1200px)
  .project-row
    h2
      font-size: 100px
      margin-right: 32px

    .project
      .content
        .sub-content
          width: 100%

+media-query(1050px)
  .project-row
    .project-container
      margin: auto 15% auto 5%

  .more-projects
    .text-placeholder
      p
        +font-default(15px)
        em.large
          display: none
        em.small
          margin-bottom: 4px

//+media-query(800px)
//  .project-row
//    .project
//      .content
//        .link
//          &:before
//            +transform-origin(0% 50%)
//            +transform(scale(0.8))
//
//          &:after
//            margin-bottom: -5px !important
//            +transform-origin(60% 50%)
//            +transform(rotate(180deg) scale(0.8))
//    .project
//      &:hover
//        .link
//          &:before
//            +translate3dRotateScale( -20px, 0, 0, 0deg, 0.8)
//          &:after
//            +translate3dRotateScale( 20px, 0, 0, 180deg, 0.8)


+media-query(850px)
  .project-row
    h2
      +transform(rotate(0deg))
      position: initial
      margin: auto auto 20px
      width: 80%
      font-size: 60px
      margin-top: 0 !important

    .project-container
      margin: auto

    .project
      margin-bottom: 50px
      .image
        position: relative !important
        background-image: none
        img
          display: block

      .image, .content
        float: none
        width: 100%

      .content
        .link
          &:before
            display: none
          &:after
            content: ''
            +orangeArrow
            +transform(rotate(180deg) scale(0.8))
            margin-bottom: -2px

      &:hover
        .link
          &:after
            +translate3dRotateScale( 20px, 0, 0, 180deg, 0.8)

+media-query(800px)
  .more-projects
    margin-top: 40px
    .text-placeholder
      p
        em.small
          display: none

        span
          margin-top: 5px