HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers10/umans.komma.pro/wwwroot/css/partials/_isolationPlacing.sass
.isolation-placing
  padding-bottom: 0 !important
  &:after
    content: ''
    width: 100%
    height: 160px
    background-color: $defaultGreen
    display: block
    margin-top: -60px

  .content-container
    .breadcrumb
      padding-left: 35px
      position: relative
      background: transparent
      &:after
        display: none

  .placing-content
    +flex(space-between, flex-start)

    .placing-info
      width: $contentGrid*5
      background-color: white
      box-sizing: border-box
      +font-default(16px, 22px)
      .text
        padding: 30px 35px
        h1
          margin-top: 0
          color: $defaultGreen
          +font-semi-bold(24px, 32px)

        p
          +font-default(16px, 22px)
          color: $fontColor1
        em
          +font-semi-bold(16px, 22px)
          display: block
          color: $fontColor1
          padding-top: 20px
      img
        width: 100%

    .process
      margin-left: $contentGrid*2
      margin-right: $contentGrid
      width: $contentGrid*4
      padding-top: 30px
      box-sizing: border-box
      h2
        margin-top: 0
        color: $defaultGreen
        +font-semi-bold(24px, 32px)

      .steps
        counter-reset: steps
        .step
          padding: 30px 0px 30px 100px
          position: relative
          border-bottom: 2px solid rgba(0,0,0,0.05)
          max-width: 300px
          &:last-child
            border-bottom: none
          h4
            color: $defaultGreen
            margin: 0
            +font-semi-bold(18px, 28px)
            &:before
              content: counter(steps)
              counter-increment: steps
              position: absolute
              left: 30px
              top: 0
              height: 100%
              +font-semi-bold(32px, 32px)
              +flex(center, center)
          p
            margin: 0
            +font-default(14px, 18px)
            color: $fontColor1
            max-width: 280px

  &.about
    &:after
      background-color: $defaultRed
    .placing-content
      .placing-info
        h2
          color: $defaultRed
          +font-semi-bold(26px, 32px)
          margin-bottom: 40px

        p
          +font-default(26px, 36px)
          color: $fontColor1
          margin-bottom: 80px
      .process
        h2
          color: $defaultRed

        .steps
          .step
            h4
              color: $defaultRed
.isolation
  .isolation-placing.about
    &:after
      background-color: $defaultGreen
    .placing-content
      .placing-info
        h2
          color: $defaultGreen
    .process
      h2
        color: $defaultGreen

      .steps
        .step
          h4
            color: $defaultGreen

+media-query(1000px)
  .isolation-placing
    .content-container
      .breadcrumb
        padding-left: 20px
    .placing-content
      .placing-info
        width: 50%
        .text
          padding: 30px 20px
      .process
        margin-left: $contentGrid
        width: $contentGrid*5

+media-query(1000px)
  .isolation-placing
    &:after
      margin-top: 40px
    .placing-content
      +flex-rows
      .placing-info
        width: 100%
        background-color: transparent
        margin-bottom: 80px
        img
          max-width: 550px
          margin: 0 auto
      .process
        width: 100%
        max-width: 400px
        margin-left: auto
        margin-right: auto

    &.about
      .placing-content
        .placing-info
          margin-bottom: 40px
          h2, p
            text-align: center
          p
            margin-bottom: 0

          .offer, img
            display: none
        .process
          padding-top: 0
          h2
            display: none
+media-query(600px)
  .isolation-placing.about
    .placing-content
      .placing-info
        h2
          font-size: 22px
          line-height: 32px
        p
          font-size: 17px
          line-height: 30px
+media-query(400px)
  .isolation-placing
    .placing-content
      .placing-info
        .text
          p
            +font-default(15px, 20px)
          em
            +font-semi-bold(15px, 20px)