/*==========================================================================
  Travel detail page
  ========================================================================== */

.travel-show
  .after-menu>header
    .header-image
      background-color: $bluePurple1
      background: linear-gradient(-135deg, $bluePurpleGradient12)

      span
        max-width: 820px

    .content
      padding-bottom: 0

      .logo-wrapper
        .breadcrumb-placeholder
          .breadcrumb
            ol
              li
                &:last-child
                  display: none

                &:nth-last-child(2)
                  &:after
                    display: none

                  a
                    span
                      color: $brightBlue
                      font-weight: semi-bold()

                  a
                    &:hover
                      span
                        color: rgba($brightBlue, 0.6)

      .footer-meta
        position: relative
        margin-top: 185px
        +flex(flex-start, center)
        +flex-rows

        +respond-to-width(750)
          padding-bottom: 40px

        .date
          +flex(flex-start, center)

          .day, .month, .icon
            width: 55px
            height: 55px
            +flex(center, center)
            color: white
            font-size: 1.2rem
            line-height: 1
            font-weight: semi-bold()

          .day, .icon
            background-color: $lightGreen
          .month
            background-color: $darkPurple

          .icon
            &:before
              content: ''
              display: inline-block
              +sprite(0 -88px, 22px, 25px)

        p
          margin: 0 0 0 19px
          font-weight: regular()
          span
            opacity: 0.5

      .button
        margin-bottom: 10px

    +respond-to-width(1200)

      .content

        h1
          margin-top: 60px

        .button
          display: block
          max-width: 260px

        .footer-meta
          margin-top: 60px
          +flex(flex-start, center)
          +flex-rows

          .date
            +order(2)

          p
            display: block
            margin-left: 0
            margin-bottom: 25px
            width: 100%
            +order(1)

  .return-to-travel-overview
    text-align: center
    margin-top: 80px

    .wrapper
      display: inline-block

      +respond-to-width(400)
        display: block
        a
          border-radius: 0 !important

    a
      +flex(flex-start, center)
      margin: auto
      padding: 15px 30px
      background-color: $green
      border-radius: 10px 10px 0 0
      text-decoration: none
      font-family: rubik()
      color: white
      font-size: 0.9rem
      transition: background 0.3s

      .icon
        height: 44px
        width: 44px
        margin-right: 30px
        border: 2px solid rgba(white, 0.4)
        border-radius: 100%
        +flex(center, center)
        transition: border 0.3s

        .placeholder
          opacity: 0.8
          transition: opacity 0.3s

          &.items1
            margin-right: 3px

          span
            display: block
            margin-bottom: 3px
            width: 8px
            height: 3px
            background-color: white
            +translate3d(0,0,0)
            transition: transform 0.3s

            &:last-of-type
              margin-bottom: 0

      &:hover
        background-color: $lightGreen

        .icon
          border-color: white
          .placeholder
            opacity: 1

            span
              +translate3d(2px,0,0)
              &:nth-of-type(2)
                +translate3d(-2px,0,0)