.about-row
  position: relative
  padding: 796px 0
  .image-background
    background: url("/img/about_background.jpg")

  .about
    position: relative
    z-index: 5

    .about-block
      width: $contentGrid*10
      margin: auto
      border: 4px solid $orange
      position: relative

      .text
        padding: 3.35%

      h3
        +font-bold(46px, 46px)
        text-transform: uppercase
        color: $orange

      p
        +font-default(20px, 36px)
        color: $semiWhite

      .image
        +position(absolute, 0 0 null null)
        height: 100%
        background-image: url("/img/bas.jpg")
        background-size: cover !important
        background-repeat: no-repeat !important
        background-position: 65% 100% !important 

        img
          display: none



  .blocks-after
    +position(absolute, null 0 0 0)
    height: 800px
    z-index: 5

    div
      background: $orange
      position: absolute
      will-change: top

    .block1
      width: 55px
      height: 55px
      left: calc(100% / 3 )
      top: 250px

    .block2
      width: 80px
      height: 80px
      right: calc(100% / 3 - 80px)
      top: 400px

+media-query(1100px)
  .about
    .about-block
      .text
        width: $contentGrid*7

      .image
        width: $contentGrid*5

+media-query(900px)
  .about
    .about-block
      max-width: 500px
      .grid6
        width: 100%

        &.image
          position: relative
          background: none

          img
            width: 100%
            display: block


+media-query(380px)
  .about
    .about-block
      h3
        +font-bold(34px, 40px) 

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