/*==========================================================================
  Content Divide row
  ========================================================================== */

.content-divide-row
  position: relative
  background-color: $purple
  padding: 60px 0

  .grid-row
    position: relative
    z-index: 2

    .grid-col
      vertical-align: middle


    .image
      img
        width: 100%

      .crop-image
        position: relative
        width: 100%
        height: 0
        padding-bottom: 66.67%

        span
          position: absolute
          width: 100%
          height: 100%
          left: 0
          top: 0
          background-position: center
          background-size: cover


    .text
      padding-right: 50px
      padding-bottom: 75px

      +respond-to-width(750)
        padding-bottom: 40px

      h3
        font-size: 1.75rem
        color: white
        font-weight: medium()
        margin-bottom: 20px

      p
        margin: 0
        line-height: 1.5
        font-weight: light()
        color: white

      .button
        position: relative
        display: inline-block
        margin-top: 20px
        min-width: 200px
        padding: 8px 55px 8px 20px
        border-radius: 10px
        background-color: $darkPurple
        font-family: rubik()
        font-weight: medium()
        font-size: 0.8rem
        transition: background 0.3s
        cursor: pointer
        text-decoration: none
        color: white

        &:after
          content: ''
          position: absolute
          right: 20px
          bottom: 15px
          display: inline-block
          +arrowWhite
          +translate3d(0,0,0)
          transition: transform 0.3s

        &:hover
          background-color: $darkerPurple
          &:after
            +translate3d(5px, 0, 0)

      form
        margin-top: 30px
        +flex(flex-start, center)

        input
          background-color: $formPurple
          border-radius: 10px
          margin-top: 0
          height: 45px
          width: calc(100% - 60px)
          max-width: 320px
          margin-left: 0
          color: white
          padding: 0 14px
          border: 2px solid transparent
          font-size: 0.8rem
          font-style: italic
          font-family: rubik()

          &.alert
            border-color: $red

          &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
            transition: 9999s background-color
            -webkit-text-fill-color: white
            transition-delay: 9999s

          &:focus
            box-shadow: none
            outline: none

        button
          margin-left: 15px
          width: 45px
          height: 45px
          padding: 0
          background-color: $orange
          border: none
          border-radius: 10px
          cursor: pointer
          outline: none !important
          box-shadow: none !important
          transition: background 0.3s

          span
            position: relative
            +arrowWhite
            top: 2px
            +translate3d(0,0,0)
            transition: transform 0.3s

          &:hover
            background-color: $flatOrange
            span
              +translate3d(5px, 0, 0)

    .scroll-down
      left: column(1, 12)
      bottom: 0px
      position: absolute
      +flex(center, center)
      width: 45px
      height: 45px
      border-radius: 10px
      cursor: pointer
      border: 1px solid white

      &:before
        content: ''
        +arrowWhite
        +movingDown
        animation-play-state: running

      +respond-to-width(750)
        position: relative
        //margin: auto
        left: 0 !important

  &.webshop-row
    .grid-row
      .scroll-down
        left: column(7, 12)

  .shape
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    opacity: 1
    transition: opacity 0.8s
    background:
      size: cover
      repeat: no-repeat
      position: 100% 100%
      image: url("/img/shapes/shape1.svg")

    &.animation-part
      opacity: 0

  +respond-to-width(750)
    .grid-row
      max-width: 450px
      .text
        width: 100%
        margin-left: 0
        padding-right: 0

      .image
        display: none
    .shape
      background-position: 50% 100%