.dynamic-content
  padding-top: 40px

.dynamic
  padding: 10px 0
  margin-bottom: 10px

  &.full-image
    img
      width: 100%
      display: block
      &.large, &.medium
        display: none

  &.content-block
    .image-side
      float: left
      padding-left: 10px


      &.right
        float: right

      &.content66
        +calc('width', '#{$contentGrid} * 4 - 15px')

        img.large
          display: none

      &.content50
        +calc('width', '#{$contentGrid} * 6 - 15px')

        img.medium
          display: none

      &.content33
        +calc('width', '#{$contentGrid} * 8 - 15px')

        img.medium
          display: none

      img
        width: 100%

      &.left
        padding-left: 0
        padding-right: 10px

    .content-side
      float: left
      padding-right: 10px

      &.right
        float: right
        padding-right: 0

      p, h1, h2
        text-align: center

      &.content66
        +calc('width', '#{$contentGrid} * 8 - 15px')

      &.content50
        +calc('width', '#{$contentGrid} * 6 - 15px')

      &.content33
        +calc('width', '#{$contentGrid} * 4 - 15px')

      &.left
        padding-left: 10px
        padding-right: 0

  &.multiple-images
    position: relative
    img
      width: 100%
      display: block
    .main-image
      height: calc(100% - 20px)
      background-color: $lightGray

      .responsive
        display: none

      &.left
        +position(absolute, 10px null 0 0)

      &.right
        +position(absolute, 10px 0 0 null)

      >div
        position: absolute
        height: 100%
        width: 100%
        background-size: cover
        background-position: 50% 50%

      &.main66
        +calc('width', '#{$contentGrid} * 8 - 15px')

        .medium
          display: none

      &.main50
        +calc('width', '#{$contentGrid} * 6 - 15px')

        .medium
          display: none

      &.main33
        +calc('width', '#{$contentGrid} * 4 - 15px')
        .large
          display: none

    .sub-images
      float: right
      padding-left: 10px

      .half, .full
        background-color: $lightGray

      &.right
        float: left
        padding-left: 0

      .half:nth-child(2)
        margin-top: 30px

      &.main66
        +calc('width', '#{$contentGrid} * 4 - 15px')
        img.large
          display: none


      &.main50
        +calc('width', '#{$contentGrid} * 6 - 15px')
        img.medium
          display: none

      &.main33
        +calc('width', '#{$contentGrid} * 8 - 15px')
        img.medium
          display: none

  &.dubble-text
    .left-content
      width: 48%
      margin-right: 4%
      float: left
    .right-content
      width: 48%
      float: right

  &.video
    width: 100%
    max-width: 960px
    margin: auto
    .video-wrapper
      position: relative
      padding-bottom: 53.6% /* 16:9 */
      padding-top: 25px
      height: 0
      iframe, .video-overlay
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
      .video-overlay
        z-index: 2
        +flex(center, center)
        opacity: 1
        cursor: pointer
        +transition(all 0.2s)
        .button
          width: 25%
          max-width: 85px
          +transform(scale(1))
          +transition(all 0.4s)
          img
            width: 100%
        &:hover
          .button
            +transform(scale(0.85))

        &.hide
          opacity: 0
          pointer-events: none
          +transition(all 0.5s)
          +transition-delay(0.7s)
          .button
            +transition(all 0.8s)
            +transform(scale(0.3))





+media-query(1370px)
  .dynamic
    &.full-image
      img
        width: 100%

        &.original
          display: none

        &.large
          display: block

    &.multiple-images
      .main-image
        &.main50
          .large
            display: none
          .medium
            display: block

+media-query(1250px)
  .dynamic
    &.multiple-images
      .sub-images
        &.main50
          img.large
            display: none
          img.medium
            display: block

+media-query(1170px)
  .dynamic
    &.multiple-images
      .main-image
        &.main66
          .large
            display: none
          .medium
            display: block

+media-query(900px)
  .dynamic

    &.content-block
      .image-side
        &.content33
          img.medium
            display: block

          img.large
            display: none

+media-query(830px)
  .dynamic
    &.multiple-images
      .sub-images
        &.main33
          img.large
            display: none
          img.medium
            display: block




+media-query(680px)
  .dynamic

    &.full-image
      img
        width: 100%

        &.original, &.large
          display: none

        &.medium
          display: block

+media-query(600px)
  .dynamic.content-block
    .content-side, .image-side
      width: 100% !important
      padding-left: 0
      padding-right: 0

  .dynamic.multiple-images
    .main-image, .sub-images
      width: 100% !important

    .main-image
      position: relative !important
      padding-right: 0
      padding-left: 0
      padding-bottom: 30px

      .medium
        display: none !important

      .responsive
        display: block