/*==========================================================================
  Default styling for pages
  ========================================================================== */

.after-menu

  >header
    position: relative


    .content
      position: relative
      padding: 40px column(1) 80px 0
      min-height: 85vh

      .logo-wrapper
        position: relative
        line-height: 0
        font-size: 0
        //white-space: nowrap

        +respond-to-width(750)
          display: none

        .logo-text
          position: absolute
          left: 125px
          top: 24%
          width: calc(66.667%)
          max-width: 270px

          +respond-to-width-beyond(1150)
            left: 150px

          img
            width: 100%

        .logo
          display: inline-block
          width: column(2,6)
          max-width: 90px

          img
            width: 100%

            &.full-logo
              display: none

        .breadcrumb-placeholder
          position: absolute
          bottom: -6px
          display: inline-block
          width: calc(66.667%)
          left: 125px


          +respond-to-width-beyond(1150)
            left: 150px

        +respond-to-width(950)
          .logo
            width: 100%
            max-width: none
            img
              &.icon
                display: none
              &.full-logo
                display: block
          .logo-text
            display: none

          .breadcrumb-placeholder
            position: relative
            display: block
            margin-top: 40px
            bottom: 0
            left: 0
            width: 100%

      h1
        position: relative
        margin-top: 100px
        color: white
        font-size: 1.6rem
        font-weight: medium()
        margin-bottom: 20px

        +respond-to-width(1500)
          margin-top: 60px

        +respond-to-width(750)
          margin-top: 0

      .text
        position: relative

        p
          margin: 2rem 0

          &:first-of-type
            margin-top: 1rem

      .meta
        position: relative
        margin-bottom: 55px

        .property
          border-bottom: 2px solid rgba(white, 0.25)
          padding: 15px 0
          +flex(flex-start, flex-start)
          line-height: 1.2

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

          span
            display: block
            width: 185px
            opacity: 0.5

          b
            width: calc(100% - 185px)
            font-weight: regular()

            a
              position: relative
              display: inline-block

              &:after
                content: ''
                bottom: 0
                left: 0
                display: block
                height: 1px
                width: 100%
                background-color: white
                opacity: 0.5

          +respond-to-width(1260)
            span
              width: 125px

            b
              width: calc(100% - 125px)

        &.events
          .property
            +respond-to-width(1400)
              display: block
              b
                display: block
                width: 100%
                margin-top: 5px

            +respond-to-width(750)
              +flex(flex-start, flex-start)

              b
                width: calc(100% - 185px)

            +respond-to-width(450)
              display: block
              b
                display: block
                width: 100%
                margin-top: 5px

      .button
        position: relative
        display: inline-block
        min-width: 200px
        padding: 8px 55px 8px 20px
        border-radius: 10px
        background-color: $orange
        font-family: rubik()
        font-weight: medium()
        font-size: 0.8rem
        transition: background 0.3s
        cursor: pointer

        &:after
          content: ''
          display: inline-block
          position: absolute
          right: 20px
          bottom: 15px
          +arrowWhite
          +translate3d(0,0,0)
          transition: transform 0.3s

        &.scroll-to
          &:after
            +translate3dRotate(0,0,0, 90deg)

          &:hover
            &:after
              +translate3dRotate(0,5px,0, 90deg)

        &:hover
          background-color: $flatOrange
          &:after
            +translate3d(5px, 0, 0)

        &.subscribe
          background-color: $headerBlue

          &:hover
            background-color: $dirtyBlue

      .content-overlay
        position: absolute
        display: none
        overflow: hidden
        left: 0
        bottom: 0
        width: 100%
        height: 100%
        background-color: $bluePurple1
        background: linear-gradient(135deg, $bluePurpleGradient12)

        &:before
          content: ''
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          opacity: 1
          transition: opacity 1s
          background:
            size: cover
            repeat: no-repeat
            position: top left
            image: url("/img/shapes/header.svg")

        &.animation-part
          &:before
            opacity: 0

      .scroll-down
        right: 25px
        bottom: 30px
        position: absolute
        +flex(center, center)
        width: 45px
        height: 45px
        border-radius: 10px
        cursor: pointer
        border: 1px solid white

        &:before
          content: ''
          +arrowWhite
          +movingDown
          animation-play-state: running

        +respond-to-width(750)
          display: none


    .overlay
      position: absolute
      overflow: hidden
      left: 0
      bottom: 0
      width: 50%
      height: 100%
      background-color: $bluePurple1
      background: linear-gradient(135deg, $bluePurpleGradient12)

      &:before
        content: ''
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        opacity: 1
        transition: opacity 1s
        background:
          size: cover
          repeat: no-repeat
          position: bottom center
          image: url("/img/shapes/header.svg")

      &.animation-part
        &:before
          opacity: 0


    .header-image
      position: absolute
      width: 50%
      height: 100%
      top: 0
      right: 0

      span
        position: absolute
        top: 0
        left: 0
        display: none
        width: 100%
        height: 100%
        background:
          size: cover
          position: center
          repeat: no-repeat

        &.large
          display: block

        +respond-to-width(400)
          &.medium
            display: none !important

          &.small
            display: block


    +respond-to-width(750)
      +flex(flex-start, flex-start)
      +flex-rows

      .grid-row
        width: 100%
        +order(2)

      .overlay
        display: none

      .header-image
        position: relative
        +order(1)
        width: 100%
        height: 0
        padding-bottom: 66.667%

        span
          &.large
            display: none
          &.medium
            display: block


      .content
        width: 100%
        padding: 60px column(1) 80px
        min-height: 0

        .content-overlay
          display: block

        .logo-wrapper
          .breadcrumb-placeholder
            margin-top: 0
          .logo, .logo-text
            display: none