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/SBogers84/zuiderbos.nl/wwwroot/css/partials/mobile/_footerLinks.sass
.footer-link-block
  display: none
  position: relative
  font-size: 1.3rem
  line-height: 1.6
  letter-spacing: 0.4px
  background-color: black

  &:last-child
    margin-right: 0

  .placeholder
    position: relative
    +flex(flex-start, center)
    +flex-rows
    width: 100%
    height: 100%
    padding: 35px column(1, 12)
    text-decoration: none

    figure
      +flex(center, center)
      width: 60px
      height: 60px
      margin-right: 20px
      border-radius: 100%
      background-color: rgba(255,255,255,0.1)

      &:before
        content: ''
        display: block

    h4
      margin: 0
      font-size: 1rem
      line-height: 1.4
      color: white
      opacity: 0.8

    p
      margin: 0
      font-size: 0.85rem
      font-style: italic
      color: white

    span
      position: absolute
      top: calc(50% - 5px)
      right: column(1, 12)
      display: inline-block
      margin-left: 20px
      +arrowWhite
      +translate3d(0,0,0)
      transition: transform 0.3s

    &:hover
      span
        +translate3d(5px, 0, 0)

  &.new-zuiderbos
    background-color: $pink
    .placeholder
      figure
        background-color: $lightPink
        &:before
          +sprite(-122px -128px, 27px, 26px)
  &.latest-news
    background-color: $darkBlue
    .placeholder
      figure
        background-color: $bluer
        &:before
          +sprite(-95px -128px, 25px, 25px)
  &.faq
    background-color: $yellow
    .placeholder
      figure
        background-color: $lightYellow
        &:before
          +sprite(-174px -128px, 12px, 24px)

  &.academy
    background-color: $globalBlue
    .placeholder
      figure
        background-color: $servicesBlue
        &:before
          +sprite(-167px -390px, 28px, 25px)

  &.education
    background-color: $servicesBlue
    .placeholder
      figure
        background-color: $globalBlue
        &:before
          +sprite(-135px -400px, 28px, 16px)

  [class^="vso"] &
    &.new-zuiderbos
      background-color: $darkTurquoise
      .placeholder
        figure
          background-color: $turquoise

    &.latest-news
      background-color: $blue
      .placeholder
        figure
          background-color: $lightBlue

  +respond-to-width(840)
    display: block