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/SBogers85/dale-int.com/wwwroot/css/partials/_servicesRow.sass
.services-wrapper
  +flex(center, center)
  flex-direction: column
  position: relative
  background-image: url('/img/structure/bg_pattern.png')
  padding: 100px 0px

  .block-title
    color: white

  // Temporarily active/unactive for front-end speeding
  .dienst-wrapper
    +flex(flex-start, flex-start)
    overflow-x: hidden
    background-color: $blue
    width: $contentGrid*10
    height: 600px
    max-width: 1400px
    transition: height 0.4s ease
    .dienst-outer
      +flex(center, center)
      width: 70%
      height: 100%
      background: white
      padding: 50px
      align-self: stretch
      +respond-to(small)
        width: 100%
        +order(2)
    .dienst-menu
      width: 30%
      min-width: 360px
      //min-height: 400px
      height: 100%
      align-self: stretch
      ul
        margin: 0
        padding: 0
        height: 100%
        +flex(space-around, flex-start)
        flex-direction: column
        li
          +font-semi-bold(22px, 30px)
          +flex(flex-start, center)
          margin: 0
          padding-left: $iconSpace
          width: 100%
          height: 100%
          color: white
          list-style-type: none
          cursor: pointer
          transition: background-color 0.7s ease
          &:hover
            background: darken($blue, 2%)

          +respond-to(small)
            height: 50px

        .active
          background: $lightBlue
          &:hover
            background: $lightBlue

      +respond-to(small)
        width: 100%
        min-height: auto
        +order(1)

      .icon
        width: 25px
        height: 25px
        margin-right: $iconSpace
        display: inline-block
        img
          width: 100%
    +respond-to(small)
      flex-direction: column

  .dienst-block
    max-width: $maxContentWidth
    opacity: 0
    display: none

    &.active
      display: block
      opacity: 1
      animation: grow .4s ease-in-out

@keyframes grow
  0%
    display: none
    opacity: 0

  1%
    display: block
    opacity: 0

  100%
    opacity: 1