.call-to-action-contact
  color: white
  position: relative
  padding-bottom: 8%

  &:after
    content: ""
    opacity: 0.5
    top: -33%
    left: 0
    bottom: 0
    right: 0
    width: 108%
    position: absolute
    z-index: -2
    background: white url('/img/clouds_bg.jpg') no-repeat
    -moz-transform: scaleX(-1) scaleY(-1)
    -o-transform: scaleX(-1) scaleY(-1)
    -webkit-transform: scaleX(-1) scaleY(-1)
    transform: scaleX(-1) scaleY(-1)
    filter: "FlipH"
    -ms-filter: "FlipH"

  .grid-row
    position: relative

    .cta-text
      background: linear-gradient(90deg, $lightOrange 0%, $darkOrange 100%)
      padding: 11% 0 9.5% column(2.35)
      box-shadow: 0 5px 10px rgba(0,0,0,0.1)

    .round-portrait
      width: 19vw
      height: 19vw
      max-width: 250px
      max-height: 250px
      border-radius: 50%
      position: absolute
      left: 40.5%
      top: 30%
      overflow: hidden
      z-index: 10

      figure
        height: 100%
        background-size: cover
        background-position: center center

  h2
    color: white
    font-style: italic
    font-size: 24px
    line-height: 30px
    letter-spacing: -0.24px
    margin-bottom: 24px

  h4
    font-size: 18px
    line-height: 24px
    font-weight: normal

  .cta-imgHolder
    padding-top: 11%
    display: block
    float: left

    img
      width: 67%
      height: 300px
      float: right

  .phone, .mail
    height: 75px
    display: block
    color: white
    text-decoration: none

    img
      height: 100%
      float: left
      margin: 0 0 0 -7px
      transform: scale3d(1,1,1)
      transform-origin: 50%
      transition: transform 0.3s

    &:hover
      img
        transform: scale3d(0.8,0.8,1)

    span
      display: block
      padding: 4%
      font-size: 20px
      line-height: 22px
      letter-spacing: -0.4px


  .hexagon-frame
    height: 100%
    width: 100%
    position: absolute
    top: 0
    overflow: hidden
    z-index: -1

    .big-hexagon-holder
      left: 27.5%
      position: relative
      top: 34%

      svg
        +spinLeftAnimation('spin5', 0.5)
        -webkit-animation: spin5 360s linear infinite
        animation: spin5 360s linear infinite
        -webkit-backface-visibility: hidden

body.home
  .call-to-action-contact:after
    width: 100%

+respond-to-width(1500)
  .call-to-action-contact
    .grid-row
      .round-portrait
        left: 39.5%

+respond-to-width(1025)
  .call-to-action-contact
    .phone, .mail
      img
        height: 70%
    .grid-row
      .cta-text
        padding: 11% 0 9.5% column(2)

      .round-portrait
        left: 39.5%

+respond-to-width(840)
  .call-to-action-contact
    .phone, .mail
      img
        height: 65%

      span
        font-size: 16px

    .grid-row
      .cta-text
        padding: 11% 0 9.5% column(1.5)

      .round-portrait
        width: 16.86%
        height: 26.3%
        border-radius: 50%
        position: absolute
        left: 41.5%
        top: 28%

+respond-to-width(760)
  .call-to-action-contact

    &:after
      top: -50%

    h2, h4
      padding-left: 25px

    .grid-row
      .cta-imgHolder
        display: none
      .cta-text
        padding: 11% 0 9.5% column(2)
        //padding: 11% 0 9.5% 21.714286%;
        width: 85%
        margin: 5% 0 0 18%

      .round-portrait
        width: 25vw
        height: 25vw
        border-radius: 50%
        position: absolute
        left: 3%
        top: 13%