.food-row
  position: relative
  padding-top: 75px
  background-color: $lightBlue

  .content
    position: relative
    z-index: 3
    padding: 80px 0 75px
    overflow: visible

    h2
      color: white
      max-width: 700px
      +metropolis
      em
        +metropolisSemiBoldItalic
        padding-right: 5px

    p
      width: column(7, 12)
      margin: 2rem 0
      font-size: 1.1rem
      color: $blue

    .button
      position: relative
      z-index: 5
      //margin-left: 20px
      &:after
        margin-left: 75px

    +respond-to-width(1650)
      width: column(8, 12)

    +respond-to-width(1420)
      width: column(11, 12)

      p
        max-width: 380px


  .grid-row
    position: relative
    padding-bottom: 150px

    &:before
      content: ''
      background: $brown
      position: absolute
      z-index: 1
      left: 0
      top: 0
      width: column(9, 48)
      height: calc(100% - 150px)

    .food-icon
      position: absolute
      z-index: 2
      left: 0
      bottom: 0
      width: 317px
      height: 326px

      svg
        position: relative
        z-index: -1
        transform: translate3d(-60%, 25%, 0)

        #glow
          stroke-dasharray: 120px
          stroke-dashoffset: 0
          transition: all 0.7s ease 1.7s

        #bottom-bord
          stroke-dasharray: 675px
          stroke-dashoffset: 0
          transition: all 2s ease-in-out

        #top-bord
          stroke-dasharray: 590px
          stroke-dashoffset: 0
          transition: all 1.5s ease-in-out

        #air-group
          opacity: 1
          transition: all 1s
          transition-delay: 0.4s

        #air-1, #air-2
          stroke-dasharray: 102px
          +animation-name(foodAir)
          animation-timing-function: linear
          +animation-duration(4s)
          +animation-iteration-count(infinite)
          animation-play-state: running

        #air-1
          animation-delay: -0.5s

      &.fracs-animation.fracamation
        svg
          #glow
            stroke-dashoffset: 120px
          #air-group
            opacity: 0
          #bottom-bord
            stroke-dashoffset: -675px
          #top-bord
            stroke-dashoffset: -590px
          #air-1, #air-2
            animation-play-state: paused

  .background
    span
      display: none
      width: 100% !important
      height: 100% !important


  .background, .background span
    position: absolute
    bottom: 0
    right: 0
    width: 100%
    height: 100%

    background:
      image: url("/img/backgrounds/food.jpg")
      size: auto 100%
      repeat: no-repeat
      position: 100% 100%

    +respond-to-width(1750)
      background-image: url("/img/backgrounds/food@0,75x.jpg")

    +respond-to-width(1650)
      width: 80%
      height: 90%

    +respond-to-width(1420)
      width: 75%
      height: 82%
      background-size: contain


    +respond-to-width(700)
      background-image: url("/img/backgrounds/food@0,5x.jpg")

    +respond-to-width(450)
      background-image: url("/img/backgrounds/food@0,3x.jpg")

  +respond-to-width(850)
    .content
      padding-bottom: 20px

      p
        max-width: none
        width: 75%

    .grid-row
      padding-bottom: 40px

      &:before
        width: 27.5%
        height: 100%

      .food-icon
        display: none
        //width: 160px
        //height: 162px
        //left: auto
        //right: 0
        //bottom: 0
        //svg
        //  transform: translate3d(0, 0, 0)

    .background
      position: relative
      //margin-top: -140px
      //bottom: auto
      margin-top: -40px
      width: 100%
      padding-bottom: 66.67%

  +respond-to-width(500)
    padding-top: 40px

    .content
      margin-left: column(1, 24)
      width: column(22, 24)
      padding-top: 0

      h2
        font-size: 1.6rem

      p
        width: 100%

    .grid-row
      &:before
        display: none

@keyframes foodAir
  0%
    stroke-dashoffset: 0
    opacity: 1

  5%, 35%
    opacity: 1

  15%, 25%
    opacity: 0

  40%, 100%
    stroke-dashoffset: -204px
    opacity: 1