.packages
  margin-top: -220px
  padding-bottom: 60px
  .placeholder
    width: $contentGrid*12
    margin: auto
    +flex(space-between, center)
    position: relative
    .price-month
      position: absolute
      left: 0
      top: -15px
      margin: 0
      +font-light(18px, 18px)
      font-size: 16px
      color: $gray
    .package
      width: calc((100% - 45px) / 4)
      background-color: #e0e3e7
      text-align: center
      position: relative

      .header
        height: 80px
        text-align: left
        +flex(space-between, center)
        position: relative
        background-color: $darkBlue
        margin-bottom: 20px
        h2
          +font-default(30px, 34px)
          font-size: 28px
          line-height: 32px
          color: white
          padding: 0 0 0 40px

        &:after
          content: ''
          width: 100%
          position: absolute
          left: 0
          bottom: 0
          background-image: url('/img/horizontal-shadow.png')
          height: 40px
          background-repeat: repeat-x
          background-size: contain
          +transform(rotate(180deg))
      .poweruser
        position: relative
        &:hover
          .tooltip
            opacity: 1
            +translate3d(0,0,0)
          .pricing
            span
              .icon
                opacity: 1

        .tooltip
          background-color: white
          border-radius: 6px
          padding: 10px
          position: absolute
          top: -130px
          left: 19%
          +font-light(14px, 18px)
          font-size: 13px !important
          line-height: 18px !important
          color: $darkBlue
          width: 250px
          height: 120px
          z-index: 1
          +flex(center, center)
          -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.3)
          -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.3)
          box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.3)
          +translate3d(0,10px,0)
          +transition(all 0.5s)
          opacity: 0
          pointer-events: none


          &:after
            content: ''
            display: block
            width: 0
            height: 0
            border-top: 15px solid white
            border-bottom: 15px solid transparent
            border-left: 7px solid transparent
            border-right: 7px solid transparent
            position: absolute
            left: calc(50% - 4px)
            bottom: -30px

      .description
        text-align: left
        padding: 0 8%
        height: 140px

        p, span, a
          +font-light(18px, 24px)
          font-size: 16px
          line-height: 24px
          color: $darkBlue
      .pricing
        color: $darkBlue
        text-align: left
        padding: 0 8%
        margin: 0
        height: 40px
        +font-semi-bold(19px, 26px)
        font-size: 17px
        line-height: 26px
        +flex(space-between, center)
        span
          color: $darkBlue
          text-align: left
          +font-semi-bold(19px, 26px)
          font-size: 17px
          line-height: 26px
          +flex(flex-start, center)

          .icon
            display: inline-block
            +flex(center, center)
            border: 2px solid $darkBlue
            width: 16px
            height: 16px
            +font-bold(12px, 15px)
            color: $darkBlue
            font-size: 12px !important
            line-height: 15px !important
            border-radius: 100%
            margin-left: 5px
            opacity: 0.3
            transition: all 0.3s
        strong
          display: block
          &.hidden
            display: none
      .call-us
        +font-bold(22px, 26px)
        font-size: 18px
        line-height: 26px
        color: $darkBlue
        margin: 0
        height: 80px
        +flex(center, center)

      .button
        margin: 0px auto 25px
        background: $orange
        +transition(all .3s)
        border-radius: 4px
        display: inline-block

        p
          +font-semi-bold(21px, 21px)
          font-size: 18px
          color: $lightGray
          margin: 0
          display: inline-block
          padding: 15px 25px
          +flex(space-between, center)
          &:after
            content: ''
            margin-left: 30px
            +arrowWhite
            position: relative
            top: 2px
            opacity: 0.4
            +translate3d(0,0,0)
            +transition(all .3s)
        &:hover
          background-color: $fellOrange
          p:after
            +translate3d( 5px, 0, 0)

        &.disable
          background: $gray
          &:hover
            p:after
              +translate3d( 0, 0, 0)
      .footer-info
        height: 40px
        +flex(center, center)
        background-color: $yellow
        p
          +font-semi-bold(18px, 18px)
          font-size: 16px
          line-height: 16px
          color: white
          margin: 0
      &:after
        content: ''
        display: block
        width: 100%
        height: 80px
        position: absolute
        z-index: -1
        bottom: -80px
        left: 0
        background-image: url('/img/box-shadow.png')
        background-position: 50%
        background-repeat: no-repeat
      a
        display: block
        background-color: $lighterGray
        .button
          margin-bottom: 65px
          p
            color: white
            &:after
              opacity: 1
      &.package_pro
        background-color: $lighterGray
        a
          .button
            margin-bottom: 90px
        .header
          background-color: $orange
          margin-bottom: 45px
          &:after
            display: none

        .button
          margin-bottom: 90px

        &:after
          background-image: url('/img/box-shadow-large.png')

      &.development
        a
          .button
            background-color: $darkBlue
            margin-bottom: 20px
            p
              +font-semi-bold(19px, 19px)
              font-size: 17px
              &:after
                +sprite(-594px -80px, 20px, 12px)
          &:hover
            .button
              background-color: darken($darkBlue, 5%)

  .extra
    width: 66%
    margin-left: 34%

    .info
      min-width: 380px
      width: 75%
      max-width: 520px
      padding: 0 40px
      height: 80px
      margin: auto
      display: block
      background-color: $lighterGray
      +flex(space-between, center)
      p
        +font-light(22px, 22px)
        font-size: 20px
        color: $darkBlue

      .price
        +font-default(32px, 32px)
        font-size: 30px
        color: $darkerBlue
        &:before
          content: '€'
          color: $darkerBlue
          +font-default(20px, 20px)
          position: relative
          top: -7px
          left: 3px
    .guide
      height: 60px
      border: 2px solid $lighterGray
      border-top: none
      border-left: none
      position: relative
      margin-bottom: 30px
      &:before
        content: ''
        width: 2px
        height: 30px
        background-color: $lighterGray
        position: absolute
        left: 0
        bottom: 0
      &:after
        content: ''
        width: 2px
        height: 34px
        background-color: $lighterGray
        position: absolute
        left: calc(50% - 1px)
        bottom: -34px
  .button.more-info
    margin: 60px auto 10px
    background: $darkBlue
    +transition(all .3s)
    border-radius: 4px
    display: block
    max-width: 300px

    a
      +font-semi-bold(21px, 21px)
      font-size: 18px
      color: white
      margin: 0
      display: inline-block
      padding: 15px 25px
      +flex(space-between, center)
      &:after
        content: ''
        margin-left: 30px
        +arrowWhite
        position: relative
        top: 2px
        opacity: 0.7
        +translate3dRotate(0,0,0, 90deg)
        +transition(all .3s)
    &:hover
      background-color: $darkerBlue
      a:after
        +translate3dRotate( 0, 5px, 0, 90deg)

+media-query(1500px)
  .packages
    .placeholder
      width: $contentGrid*12

+media-query(1150px)
  .packages
    .placeholder
      +flex(center, flex-start)
      +flex-rows
      padding-top: 60px
      max-width: 600px
      margin: auto

      .package
        width: 80%
        max-width: 460px
        margin-bottom: 60px
        .button
          margin-top: 0
        .description
          height: auto
          padding-bottom: 20px
        .poweruser .tooltip
          left: 14%
      .package.package_pro
        width: 90%
        max-width: 540px
        .description
          height: auto
        .poweruser .tooltip
          left: 13%
        a
          .button
            margin-bottom: 65px
      .price-month
        width: 100%
        text-align: center

+media-query(800px)
  .packages
    .placeholder
      .package
        .poweruser .tooltip
          left: 9.3%

        &.package_pro
          .poweruser .tooltip
            left: 9%
+media-query(700px)
  .packages
    .placeholder
      .package
        .tooltip
          display: none
        .pricing
          span
            .icon
              display: none
+media-query(500px)
  .packages
    padding-bottom: 40px
    .content-container
      width: 100%
    .placeholder
      width: 100%
      .package
        width: 100% !important
        max-width: none !important