.services-circle
  +flex(space-around, flex-start)
  padding: 100px 0

  .clear
    display: none
    clear: both

  >.circle
    width: 25%
    min-width: 225px

    &.show:hover
      .container
        svg
          path
            stroke-dashoffset: 2382
            +transition(stroke-dashoffset 0.8s)

    .container
      position: relative
      +flex(center, center)

      >div
        text-align: center

      h2
        +font-default(28px, 34px)
        text-align: center
        position: relative
        display: inline-block
        margin: 0 0 20px 0
        strong
          +font-bold(30px, 34px)

        &:after
          content: ''
          width: 100%
          height: 4px
          background-color: $black
          +position(absolute, null 0 -5px 0 )

      p
        +font-default(18px, 21px)
        text-align: center
        margin: 0

      svg
        width: 100%
        position: absolute
        top: 0
        left: 0

        path
          fill: none
          stroke: $yellow
          stroke-width: 4
          stroke-miterlimit: 10
          stroke-dasharray: 2382
          stroke-dashoffset: 2382
          +transition(stroke-dashoffset 2s)

    ul
      list-style: none
      margin: 40px 0 0 0
      padding: 0
      li
        text-align: center
        +font-default(16px, 28px)

    &:nth-child(2)
      .container
        svg
          path
            +transition-delay(0.3s)

    &:nth-child(3)
      .container
        svg
          path
            +transition-delay(0.6s)

    &.show
      .container
        svg
          path
            stroke-dashoffset: 0

    &:nth-child(2)
      .container svg path
        +animation-delay(2s)

+media-query(850px)
  .services-circle
    display: block

    .clear
      display: block

    >.circle
      float: left
      width: 40%
      margin-left: 5%
      margin-bottom: 40px

    >.circle:nth-child(2n)
      float: right
      margin-left: 0
      margin-right: 5%


    >.circle:nth-child(3)
      clear: left
      margin-left: 30%

+media-query(580px)
  .services-circle
    >.circle, >.circle:nth-child(2n), >.circle:nth-child(3)
      width: 80%
      min-width: initial
      margin-left: 10%
      margin-right: 10%
      clear: left

      .container
        h2
          +font-default(40px, 48px)

          strong
            +font-bold(44px, 48px)

        p
          +font-default(30px, 36px)

+media-query(425px)
  .services-circle
    >.circle, >.circle:nth-child(2n), >.circle:nth-child(3)
      .container
        h2
          +font-default(30px, 36px)

          strong
            +font-bold(34px, 36px)

        p
          +font-default(24px, 28px)