/*==========================================================================
  Contact page
  ========================================================================== */
body.transportservice
  .content
    .titleHolder
      background-color: white
      border-left: solid 15px $douvYellow
      color: $douvDarkBlue
      width: 100%
      margin-top: 60px
      font-weight: bold
      padding-left: column(0.5)

      h1
        color: $douvDarkBlue
        font-weight: 600

      span
        margin: 5px 10px -7px -15px

        &.transportservice
          width: 50px
          background-position: -160px -171px
          background-repeat: no-repeat
          background-size: 200px

    h1
      color: white
      display: inline-block
      font-size: 30px
      line-height: 80px

    .main
      margin-top: 60px
      margin-bottom: 60px
      .left
        width: column(4,12)
        padding-left: column(0.5)

        p
          margin: 0

        h3, h4
          font-size : 22px
          color: $douvBlue

        a.button
          padding: 7.5px 20px
          min-width: 180px

      .right
        width: column(6.5,12)
        margin-left: column(1, 12)

        figure
          position: relative
          width: 100%
          height: 320px
          background-repeat: no-repeat
          background-size: cover
          background-position: center 35%

    .transBlock
      .top
        background-color: $douvBlue
        padding: 50px column(1) 90px column(1)

        .header
          text-align: center

          h1
            margin-top: 0
            line-height: 0

        .icon-holder
          +flex(space-between, center)
          border-bottom: solid 2px white
          width: column(9, 10)
          margin: 0 auto
          padding-bottom: 55px

          .icon
            display: block
            width: 153px
            padding-top: 100px
            font-family: 'Open Sans', sans-serif
            font-weight: bold
            font-size: 14px
            color: white
            text-align: center
            position: relative
            top: 25px
            background-image: url('/img/svg/transport_icons.svg')
            background-repeat: no-repeat
            background-size: 280%
            background-position: 50px top

            // activate when there is content

            //&:hover
            //  color: $douvYellow
            //  cursor: pointer
            //
            //  &:after
            //    border: solid 2px $douvYellow
            //
            //  &.choose
            //    background-image: url('/img/svg/icons.svg')
            //    background-size: 350%
            //    background-position: -103.9px 30px
            //
            //  &.contact
            //    background-image: url('/img/svg/icons.svg')
            //    background-size: 350%
            //    background-position: 48.5px 30px
            //
            //  &.ship
            //    background-position: -313px -208px
            //
            //  &.use
            //    background-position: -490px -208px

            span
              position: relative
              top: 55px

            &:after
              content: ''
              display: block
              width: 13px
              height: 13px
              border-radius: 100%
              border: solid 2px #E4E4E4
              background-color: $douvBlue
              position: absolute
              left: calc(50% - 5px)
              bottom: -40px

            &.active
              color: $douvDarkYellow

              &:after
                border: solid 2px $douvYellow

              &.choose
                background-image: url('/img/svg/icons.svg')
                background-size: 245%
                background-position: -48.5px 50px

              &.contact
                background-image: url('/img/svg/icons.svg')
                background-size: 245%
                background-position: 58px 60px

              &.ship
                background-position: -195px -110px

              &.use
                background-position: -330px -110px

            &.choose
              margin-left: -75px

              background-image: url('/img/svg/icons.svg')
              background-size: 245%
              background-position: -264px 50px

            &.contact
              background-image: url('/img/svg/icons.svg')
              background-size: 245%
              background-position: -158px 60px

            &.ship
              background-position: -195px 35px

            &.use
              background-position: -330px 35px
              margin-right: -65px

      .bottom
        background-color: white
        margin-bottom: 60px

        .block-wrapper
          display: block
          position: relative

          .service-block
            position: absolute
            opacity: 0
            padding: 60px column(1, 12)
            transition: opacity 0.3s

            &.active
              position: relative
              opacity: 1

            .left
              width: column(7,10)

              p
                display: inline-block
                width: column(3,7)
                margin: 0
                margin-right: column(0.5,10)

            .right
              width: column(3,10)

              figure
                position: relative
                width: 100%
                height: 167px
                background-repeat: no-repeat
                background-size: cover
                background-position: center center

        .video-block
          height: 280px
          display: block
          padding: 30px column(1, 12)

          .left
            width: column(7,10)
            height: 100%

            iframe
              width: 100%
              height: 100%

html.ie
  body.transportservice
    .content
      .titleHolder
        span
          &.transportservice
            background-position: -300px -302px
            background-size: 400px

      .transBlock
        .top
          .icon-holder
            .icon
              &.choose
                background-size: 600%
                background-position: -600px 30px

              &.contact
                background-size: 600%
                background-position: -450px 30px

              &.ship
                background-position: -313px -20px

              &.use
                background-position: -500px -20px

              &.active, &:hover
                &.choose
                  background-size: 600%
                  background-position: -295px 30px

                &.contact
                  background-size: 600%
                  background-position: -144.5px 30px

                &.ship
                  background-position: -313px -228px

                &.use
                  background-position: -500px -228px


+respond-to-width(840)
  body.transportservice
    .content
      .top
        padding-left: 0
        padding-right: 0
        .grid-row
          padding-left: 0
          padding-right: 0
          .titleHolder
            margin-top: 0
      .main
        margin-top: 30px
        padding-left: column(0.5,12)
        padding-right: column(0.5,12)
        display: -ms-flexbox
        display: -webkit-box
        display: flex
        flex-direction: column-reverse
        .left, .right
          width: 100%
          margin-left: 0
          padding-left: 0

        .left
          margin-top: 30px


      .transBlock
        display: none // activate when there is content
        .bottom
          margin-bottom: 0
          .block-wrapper
            .service-block
              padding: 60px 0