body.topsLuchtfilters
  #identity
    .logo-wrapper
      width: 100%
      max-width: 1000px
      margin: auto

      #tops-logo
        width: 100%
        display: block

        #icon

          #arrow-1, #arrow-2
            path
              stroke-dasharray: 290
              stroke-dashoffset: 0
              transition: stroke-dashoffset 1.2s

          #arrow-3, #arrow-4
            path
              stroke-dasharray: 368
              stroke-dashoffset: 0
              transition: stroke-dashoffset 1.2s

          #arrow-1, #arrow-2, #arrow-3, #arrow-4
            path
              transition-delay: 1s

          #blue-line, #white-line
            stroke-dasharray: 130
            stroke-dashoffset: 0
            transition: stroke-dashoffset 1.2s

          #blue-line
            transition-delay: 1.7s
          #white-line
            transition-delay: 1.4s

          polygon
            opacity: 1
            transition: opacity 1s
            transition-delay: 1.7s

        #name
          #tops
            path
              opacity: 1
              transition: opacity 1s

              @for $i from 0 to 5
                &:nth-child(#{$i + 1})
                  transition-delay: #{ 3 + 0.1 * $i}s

          #luchtfilters
            path
              opacity: 1
              transition: opacity 1s

              @for $i from 0 to 15
                &:nth-child(#{$i + 1})
                  transition-delay: #{ 4.2 + 0.04 * $i}s

        #grid
          #logo-side-horizontal
            line
              stroke-dasharray: 1080
              stroke-dashoffset: 0
              transition: stroke-dashoffset 1s
              //transition-delay: 0s

          #logo-side-vertical, #logo-main-vertical, #logo-name-vertical-whitespace, #logo-name-right
            line
              stroke-dasharray: 300
              stroke-dashoffset: 0
              transition: stroke-dashoffset 1s
              //transition-delay: 0s

              //transition: transfrom 1s

          #logo-main-vertical
            line
              &:nth-child(1), &:nth-child(8)
                transition-delay: 0.4s
              &:nth-child(2), &:nth-child(7)
                transition-delay: 0.3s
              &:nth-child(3), &:nth-child(6)
                transition-delay: 0.2s
              &:nth-child(4), &:nth-child(5)
                transition-delay: 0.1s

          #logo-name-vertical-whitespace, #logo-name-right
            line
              transition-delay: 2.4s

          #logo-main-horizontal
            line
              stroke-dasharray: 470
              stroke-dashoffset: 0
              transition: stroke-dashoffset 1s

              &:nth-child(1), &:nth-child(4)
                transition-delay: 0.4s
              &:nth-child(2), &:nth-child(3)
                transition-delay: 0.3s

          #logo-circles-right-top, #logo-circles-left-top, #logo-circles-right-bottom, #logo-circles-left-bottom
            path
              stroke-dashoffset: 0
              transition: stroke-dashoffset 1s

          #logo-circles-right-top, #logo-circles-left-top
            path
              &:nth-child(1)
                stroke-dasharray: 400
                transition-delay: 0.4s
              &:nth-child(2)
                stroke-dasharray: 310
                transition-delay: 0.5s
              &:nth-child(3)
                stroke-dasharray: 225
                transition-delay: 0.6s
              &:nth-child(4)
                stroke-dasharray: 135
                transition-delay: 0.7s

          #logo-circles-right-bottom, #logo-circles-left-bottom
            path
              &:nth-child(1)
                stroke-dasharray: 225
                transition-delay: 0.7s
              &:nth-child(2)
                stroke-dasharray: 135
                transition-delay: 0.8s

          #logo-diagonal
            line
              stroke-dasharray: 275
              stroke-dashoffset: 0
              transition: stroke-dashoffset 1s
              transition-delay: 1s

          #logo-name-horizontal-whitespace
            line
              stroke-dasharray: 600
              stroke-dashoffset: 0
              transition: stroke-dashoffset 1s
              transition-delay: 1s

              @for $i from 0 to 4
                &:nth-child(#{$i + 1})
                  transition-delay: #{ 3.8 - 0.1 * $i}s




      &.animate
        #tops-logo
          path, line, polygon
            transition-delay: 0s !important
            transition-duration: 1s !important
          #name
            #tops, #luchtfilters
              path
                opacity: 0

          #icon
            #arrow-1, #arrow-2
              path
                stroke-dashoffset: 290

            #arrow-3, #arrow-4
              path
                stroke-dashoffset: 368

            polygon
              opacity: 0

            #white-line, #blue-line
              stroke-dashoffset: 130

          #grid
            #logo-side-horizontal
              line
                stroke-dashoffset: 1080

            #logo-side-vertical
              line
                stroke-dashoffset: 300

            #logo-main-vertical
              line
                stroke-dashoffset: 300

            #logo-main-horizontal
              line
                stroke-dashoffset: 470

            #logo-circles-right-top, #logo-circles-left-top
              path
                &:nth-child(1)
                  stroke-dashoffset: 400
                &:nth-child(2)
                  stroke-dashoffset: 310
                &:nth-child(3)
                  stroke-dashoffset: 225
                &:nth-child(4)
                  stroke-dashoffset: 135

            #logo-circles-right-bottom, #logo-circles-left-bottom
              path
                &:nth-child(1)
                  stroke-dashoffset: 225
                &:nth-child(2)
                  stroke-dashoffset: 135

            #logo-diagonal
              line
                stroke-dashoffset: 275

            #logo-name-vertical-whitespace, #logo-name-right
              line
                stroke-dashoffset: 300

            #logo-name-horizontal-whitespace
              line
                stroke-dashoffset: 600