/*==========================================================================
  Dynamic Blocks
  ========================================================================== */

.dynamic-block

  .grid-row
    +flex(space-between, center)

  .content
    font-size: 0.9rem
    line-height: 1.6

    h2
      font-size: 1.2rem
      color: $darkBlue
      margin: 0 0 40px

    ul, ol
      padding-left: 20px
      list-style: none

      li
        position: relative
        padding-left: 20px
        //font-size: 0.8rem
        color: rgba($darkGray, 0.8)

        &:before
          content: '•'
          position: absolute
          color: $darkBlue
          font-size: 1.2rem
          line-height: 1
          left: -20px

    ol
      counter-reset: ol-counter
      li
        &:before
          counter-increment: ol-counter
          content: counter(ol-counter)'.'
          font-size: 1rem
          top: 2px

    p
      color: $darkGray

      &:first-of-type
        margin-top: 0
      &:last-of-type
        margin-bottom: 0

      strong
        color: $fontBlack

      a
        color: $fontBlack
        text-decoration: none
        border-bottom: 2px solid $fontBlack
        transition: color 0.3s, border 0.3s, opacity 0.3s
        &:hover
          color: darken($fontBlack, 25%)
          border-bottom-color: darken($fontBlack, 15%)


    &.white
      h2
        color: rgba(white, 0.8)

      ul, ol
        li
          color: rgba(white, 0.8)
          &:before
            color: white

      p
        color: rgba(white, 0.8)

        strong
          color: white

        a
          color: white
          border-bottom-color: white
          &:hover
            opacity: 0.6


  a.button
    display: inline-block
    margin-top: 50px
    padding: 15px 20px
    border-radius: 25px
    background-color: $blue
    text-decoration: none
    font-size: 0.9rem
    line-height: 1
    font-weight: bold()
    color: white
    transition: background-color 0.3s

    &:after
      content: ''
      +arrowWhite
      margin-left: 20px
      +translate3d(0,0,0)
      transition: transform 0.3s

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

//@import "twoTextColumn"
//@import "fullImageColumn"
@import "contentBlock"
//@import "multipleImages"
@import "fullTextBlock"
//@import "videoBlock"