/* ----------------------------------------------------------
 * CHECKOUT
  /* COMMONS
    /* header
    /* body
    /* footer
  /* LOGIN
  /* CART
    /* movies
    /* total
  /* END MESSAGE
    /* code promo
  /* PAYMENT
  /* REGISTRATION
  /* SUCCESS
  /* ERROR
 * ---------------------------------------------------------*/

@import "http://www.fr.universcine.be/bundles/cineweb/css/variables"
@import "http://www.fr.universcine.be/bundles/cineweb/css/common/mixins"

/* -------------------------------------------------------------------------------
  * COMMONS
  *-----------------------------------------------------------------------------*/

.modal-content-checkout
  @include border-radius(3px)
  @include box-shadow-modal
  background-clip: padding-box
  outline: 0
  box-sizing: border-box

.registration
  #main-container
    background-color: #fff

#registration-form
  .checkout-title
    margin-bottom: 25px

#fos_user_registration_form_gender
  margin-bottom: 10px

.modal-getback
  z-index: 1
  position: absolute
  top: 54px
  left: 47px
  &:hover
    text-decoration: none
  &:before
    font-size: 32px
    color: #888a8d
  &:hover:before
    color: #fff


.checkout
  width: 650px
  .modal-container-step2
    @include transitionsAllStd

  /* -------------------------------------------------------------------------------
   * header
   * -----------------------------------------------------------------------------*/

  .modal-header
    .left-arrow-btn
      position: absolute
      top: 52px
      left: 45px
      text-decoration: none
      color: $grayIconsArrowCheckout
      font-size: 32px
      &:hover
        color: $white
      @media (max-width: 479px)
        left: 12px
  /* -------------------------------------------------------------------------------
   * body
   * -----------------------------------------------------------------------------*/
  .modal-body
    position: relative
    margin-top: -25px
    padding: 0 15px
    &.bg-step1
      height: 223px
      margin-bottom: -29px
      position: relative
      background: transparent url("../bundles/cineweb/images/common/backgrounds/bg-step1.jpg") no-repeat 0 0
      background-size: cover
      p
        max-width: 550px
        margin: 0 auto
        line-height: 1.2
        color: $white
        font-family: $mainFont
        font-size: 26px
        font-weight: lighter
        text-align: center
        &.first-paragraph, &.first-paragraph-payment-confirmation
          margin-top: 30px
          .styles-payment-confirmation-1,
          .styles-payment-confirmation-2
            font-weight: bolder
        &.first-paragraph
          font-weight: bold
      @media (min-width: 480px)
        p
          line-height: 1.6

    .checkout-title
      border-right: 0
    .checkout-title,
    .checkout-title-single,
    .checkout-title-cb
      width: 230px
      margin: 0 auto
      padding: 0 0 24px
      text-align: center
      font-family: $mainFont
      font-size: 20px
      font-weight: 900
      color: #fff
      -webkit-font-smoothing: antialiased
      &.checkout-title, &.checkout-title-cb
        border-bottom: 1px $borderColorCheckout solid
      &.checkout-title-cb
        display: none
        width: 275px
  /* -------------------------------------------------------------------------------
   * form
   * -----------------------------------------------------------------------------*/
  label
    a
      color: $mainColor
      &.registration-cgv-link
        text-transform: uppercase
        &:hover
          color: $white
          text-decoration: none
  input.form-control
    position: relative
    padding-left: 37px
  .form-group
    position: relative
    >
    i
      z-index: 1
      position: absolute
      top: 0
      bottom: 0
      left: 12px
      font-size: 12px
      line-height: 40px
      color: #a9a9ac
      .icon-account
        font-size: 14px
      .icon-pin, .icon-key
        font-size: 15px
    &.has-error
      > i
        color: $darkRedError
      .form-control
        border-width: 2px
  .form-control
    height: 40px
    &:focus:before
      color: $mainColor
  /* -------------------------------------------------------------------------------
   * footer
   * -----------------------------------------------------------------------------*/
  .modal-footer,
  .modal-footer-2
    margin-top: 29px
    &.modal-footer-2
      margin-top: 0
      padding-top: 25px

    .cssc-button--middle
      vertical-align: middle

    .cinepass-add
      margin-bottom: 27px
      padding: 0 52px 0 38px
      .sub-cinepass-add
        width: 100%
        display: inline-block
        border-top: 2px solid $colorMsgCreditCardsCheckout
        border-bottom: 2px solid $colorMsgCreditCardsCheckout
        .checkout-payment-types-figure
          width: 228px
          padding: 10px 0
          float: left
          text-align: center
        .checkout-payment-types-details
          padding: 25px 0  10px 228px
          text-align: left
          p
            margin: 0
          .payment-types-details-title
            margin-bottom: 18px
            color: $white
            font-size: 17px //17px
          .payment-types-details-msg-1
            color: $white
          .payment-types-details-msg-1, .payment-types-details-msg-1-gray
            font-size: 13px //13px
          .payment-types-details-msg-1-gray
            color: $colorMsgCreditCardsCheckout
          .payment-types-details-code
            font-size: 13px //13px
          .payment-types-details-msg-2
            margin-top: 5px
            color: $colorMsgCreditCardsCheckout
            font-size: 11px //11px
          .payment-types-details-buy
            margin-top: 10px
            display: block
          .payment-types-btns
            margin-top: 7.5px
          a
            text-decoration: underline
          a.click-here, a.the-cinepass
            color: $mainColor
            &:hover
              color: $white
          .cssc-button--gray-inactive
            box-shadow: none
            cursor: auto
            background-color: $bgColorGrayInactiveBtn
            color: $colorGrayInactiveBtn
        @media (max-width: 567px)
          .checkout-payment-types-figure
            width: auto
            margin-bottom: 0
            float: none
            text-align: left
          .checkout-payment-types-details
            padding: 15px 0  10px 0
    .btns-before-share-on
      margin: 0 0 8px 0
      text-align: center
      button, a, object
        width: 242px
        margin-bottom: 7.5px
        overflow: visible
        display: inline-block
      .sub-btns-before-share-on
        padding: 0 30px
        display: inline-block
        &:first-child
          margin-bottom: 26px
        .text-before-share-on
          margin-top: 30px
          float: none
          color: $grayPaymentConfirmationColor
          font-family: $mainFont
          font-size: 14px
          text-align: left
        .btn-block-before-share-on
          width: 100%
          float: none
          position: relative
          button, a
            padding: 0
            .icon-flash
              margin-right: 15px
              font-size: 20px
              line-height: 45px
              vertical-align: middle
          a
            background: $mainColor url(/bundles/cineweb/images/icons/icn-see-film.png) center 22px no-repeat
            &:hover
              background-color: $white
          .block-icn-arrow-circles
            width: 100%
            position: absolute
            .cssc-button-icn-arrow-circles
              margin: 10px 0 0 -135px
              display: inline-block
              text-align: center
        @media (min-width: 568px)
          &:first-child
            margin-bottom: 52px
          .text-before-share-on
            margin-bottom: 0
            float: left
          .btn-block-before-share-on
            float: right
          .block-icn-arrow-circles
            width: 235px
            .cssc-button-icn-arrow-circles
              margin: 10px 0 0 20px
              display: inline-block
              text-align: left
    .title-share-on
      color: $grayTextCheckout
      font-family: $mainFont
      font-size: 22px //22px
    .icons-share-on
      text-align: center
      a, .fb-share-button
        width: 38px
        height: 38px
        margin: 0 6px
        display: inline-block
        border-radius: 3px
        background-color: $grayIconsCheckout
        text-align: center
        text-decoration: none
        .fa
          vertical-align: middle
          line-height: 38px
          color: $white
          font-size: 25px
    #submit-checkout-form
      width: 235px

  /* -------------------------------------------------------------------------------
    * LOGIN
    *-----------------------------------------------------------------------------*/
  &#modal_connexion
    .modal-footer
      .title
        padding-right: 20px
        @media (max-width: $screen-xs-min)
          padding-right: 0
          width: 100%
  .modal-body-login
    padding: 0 25px
    .modal-body-login-left,
    .modal-body-login-right,
    .modal-login__submit
      box-sizing: border-box
    .modal-body-login-left
      padding-right: 30px
      &.next-modal-disabled
        margin: 0 auto
        float: none
        padding-right: 0
        border-right: 0
        text-align: center
      .form-group-login
        width: 100%
      .input-group
        width: 100%
        display: inline-block
        position: relative
        i
          position: absolute
          top: 14px
          left: 13px
          z-index: 10
          color: $grayLoginInputCheckoutIconsColor
          font-size: 14px
        .form-control
          width: 100%
          @include border-radius(4px)
          float: none
          color: $colorCodePromoInputCheckout
          font-size: 14px
          font-weight: lighter
      .pw-forgot-checkout-link
        color: $colorCodePromoInputCheckout
        font-size: 13px
        font-weight: bold
        @include transitionsAllStd
        &:hover
          color: $white
          text-decoration: none
          @include transitionsAllStd
    .modal-body-login-right
      padding-left: 30px
    .form-group-login,
    .modal-login__submit,
    .cssc-button--social.is-facebook,
    .modal-login__social .cssc-button + .cssc-button,
    .pw-forgot-checkout-link
      margin: 10px 0
      padding: 0
      display: inline-block
    .modal-login__submit .cssc-button
      margin-bottom: 0
    @media (max-width: $screen-sm-min) and (min-width: $screen-xs-min)
      .modal-body-login-left
        &.next-modal-disabled
          width: 50%
    @media (max-width: $screen-sm-min)
      .modal-body-login-left
        .modal-login__submit
          display: block

  /* -------------------------------------------------------------------------------
    * CART
    *-----------------------------------------------------------------------------*/
  .modal-list
    /* -------------------------------------------------------------------------------
      * movies
      * -----------------------------------------------------------------------------*/
    .checkout-movies-list
      max-height: 305px
      margin-top: 0
      padding: 0 30px
      border-top: $borderColorCheckout solid 1px
      border-bottom: $borderColorCheckout solid 5px
      overflow-x: hidden
      overflow-y: auto
      li
        width: 100%
        padding: $itemCartCheckoutVerticalPadding 0
        display: inline-block
        border-bottom: $borderColorCheckout solid 1px
        position: relative
        z-index: 1
        &:last-child
          border: 0
        .checkout-movies-sub-item
          .checkout-block-img
            width: 70px
            height: 92px
            margin-right: 25px
            float: left
            .checkout-img
              border: 0
          .checkout-block-datas
            width: 100%
            margin-bottom: 4px
            .checkout-movies-title
              margin: 8px 0 8px 0
              color: $white
              font-family: $mainFont
              font-size: 16px
              font-weight: bold
            .checkout-blocks
              width: 100%
              padding: 0 0 0 95px
              .bundle-content
                color : #fff
              .checkout-block-left, .checkout-block-right
                width: 50%
                float: left
                box-sizing: border-box
              .checkout-block-left
                border-right: $borderColorCheckout solid 1px
                p
                  height: 20px
                  margin: 0 auto
                  margin-right: 2px
                  padding: 0 8px
                  float: left
                  border-radius: 3px
                  background-color: $bgColorMoviesDetailsCheckout
                  text-align: center
                  span
                    line-height: 20px
                    vertical-align: middle
                    color: $grayVideoFormatCheckoutBgColor
                    font-family: $mainFont
                    font-size: 10px
                    font-weight: bold
                    text-transform: uppercase
              .checkout-block-right
                p
                  margin: 0
                  padding: 0
                  float: left
                  font-family: $mainFont
                  font-size: 15px
                  font-weight: bold
                  text-align: right
                .details-price
                  width: 55%
                  padding: 0 10px 0 10px
                  span
                    color: $white
                .price
                  width: 30%
                  span
                    color: $mainColor
                .icon-round-delete
                  width: 15%
                  float: right
                  display: block
                  color: $mainColor
                  font-size: 24px
                  text-decoration: none
                  text-align: right
          .checkout-block-reduction
            width: 100%
            height: $reductionBlockCheckoutHeight
            position: absolute
            bottom: $itemCartCheckoutVerticalPadding
            z-index: -1
            background-color: $greenAllCart
            .checkout-sub-block-reduction
              width: 100%
              padding: 0 35px
              display: inline-block
              line-height: $reductionBlockCheckoutHeight
              color: $white
              font-family: $mainFont
              .details-reduction
                width: 60%
                margin: 0 0 0 20%
                float: left
                text-align: center
                .details
                  font-size: 14px
                .code
                  font-size: 18px
              .price-reduction
                margin: 0
                float: right
                font-size: 18px
                font-weight: bold
                text-align: right
          @media (max-width: 567px)
            .checkout-block-datas
              width: auto
              float: none
              display: block
              .checkout-blocks
                .checkout-block-left, .checkout-block-right
                  width: auto
                  float: none
                  display: block
                  &.checkout-block-left
                    border: 0
                  &.checkout-block-right
                    width: 100%
                    float: left
                    .details-price, .price
                      margin-top: 10px
                      margin-left: 0
                    .details-price
                      padding-left: 0
                      text-align: left
                    .icon-round-delete
                      margin-top: 7.5px
            .checkout-block-reduction
              height: auto
              float: left
              position: inherit
              .checkout-sub-block-reduction
                padding: 2.5px 5px
                line-height: normal
                .details-reduction
                  width: auto
                  margin: 0
                .price-reduction
                  width: auto
                  margin: 0
                  float: left
      @media (max-width: $screen-sm-min)
        overflow: visible
        max-height: inherit
    /* -------------------------------------------------------------------------------
      * total
      * -----------------------------------------------------------------------------*/
    .checkout-movies-total
      width: 100%
      margin-bottom: 10px
      padding: 0 30px
      display: inline-block
      box-sizing: border-box
      color: $white
      .checkout-movies-total-left
        width: 50%
        margin-top: 5px
        float: left
        color: $colorMoviesTotalCheckout
        font-size: 14px
      .checkout-movies-total-center, .checkout-movies-total-right
        float: left
        box-sizing: border-box
        font-size: 18px
        font-weight: bold
      .checkout-movies-total-center
        width: 25%
        color: $colorMoviesTotalCheckout
        span
          margin-left: 60px
      .checkout-movies-total-right
        float: right
        span
          margin-right: 35px
          text-align: right
  /* -------------------------------------------------------------------------------
    * END MESSAGE
    * -----------------------------------------------------------------------------*/
  .modal-end-messages
    /* -------------------------------------------------------------------------------
      * code promo
      * -----------------------------------------------------------------------------*/
    .checkout-code-promo
      width: 100%
      padding: 0 27.5px
      display: inline-block
      .checkout-sub-end-messages
        .before-end-messages-form
          width: 50%
          float: left
          position: relative
          .left-icon-block
            width: 37px
            margin-right: 18px
            float: left
            position: absolute
            top: 0
            left: 0
            background-color: $white
            text-align: center
            .left-icon
              margin: 10px 0
              display: block
              font-size: 24px
            .bottom-icon
              display: block
              width: 0
              height: 0
              border-style: solid
              border-width: 0 18.5px 12px 18.5px
          .after-icon-block
            margin-left: 55px
            float: left
            color: $white
            font-family: $mainFont
            .title-after-icon-block
              margin: 10px 0
              font-size: 18px
              font-weight: bold
              text-transform: uppercase
            .text-after-icon-block
              margin: 0 0 25px 0
              font-size: 13px
        .checkout-end-messages-form
          width: 50%
          float: left
          fieldset
            margin-top: (97/2)-($stdSubmitBtnHeight/2)
            position: relative
            i
              position: absolute
              top: 10px
              bottom: 0
              left: 32px
              color: $colorCodePromoInputCheckout
              font-size: 20px
            input, button
              height: $stdSubmitBtnHeight
              float: left
              border: 0
              border-radius: 3px
              overflow: hidden
              background-color: $white
              font-size: 14px
              font-weight: lighter
            .code-promo-input
              width: 200px
              margin: 0 10px 0 20px
              padding: 0 16px 0 36px
              color: $colorCodePromoInputCheckout
              &.error
                padding: 0 14px
                border: 2px solid $redError
            .code-promo-submit-btn
              padding: 0 16px
              color: $colorCodePromoSubmitCheckout
        .after-end-messages-form
          width: 50%
          float: left
          .presentation-offer, .title-offer, .cancel-offer-btn
            margin: 0
            color: $white
            font-family: $mainFont
          .presentation-offer
            margin-top: 15px
            font-size: 18px
          .title-offer
            font-size: 18px
            font-weight: bold
          .cancel-offer-btn
            margin: 5px 0 15px
            display: block
            font-size: 14px
            text-decoration: underline
        @media (max-width: 767px)
          .before-end-messages-form
            width: auto
          .checkout-end-messages-form
            width: auto
            fieldset
              margin: 0 0 28.5px 0
              i
                left: 10px
              .code-promo-input
                margin: 0 10px 0 0
          .after-end-messages-form
            width: auto
            .presentation-offer
              margin: 0
      &.checkout-code-promo-type-code
        background-color: $black
        .left-icon
          color: $black
        .bottom-icon
          border-color: transparent transparent $black transparent
      &.checkout-code-promo-all-cart
        background-color: $greenAllCart
        .left-icon
          color: $greenAllCart
        .bottom-icon
          border-color: transparent transparent $greenAllCart transparent

  /* -------------------------------------------------------------------------------
   * PAYMENT
   * -----------------------------------------------------------------------------*/

  .checkout-total-price-basket
    margin: 37px 0 35px 0
    color: $white
    font-family: $mainFont
    font-size: 20px
    text-align: center
    .title-price, .total-price
      display: inline-block
    .title-price
      padding-right: 30px
    .total-price
      font-weight: bold

  .modal-credit-cards-error
    min-height: $errorBlocksPromoCheckout
    visibility: hidden
    margin: 0 auto
    padding: 0 15px
    background-color: $redError
    text-align: center
    color: #fff
    font-family: "Lato"
    font-size: 20px
    vertical-align: middle
    .sub-modal-credit-cards-error
      margin: 5px 0
      vertical-align: middle
      color: $white
      font-family: $mainFont
      font-size: 18px
      font-weight: bold
      @media (min-width: 480px)
        margin: 0
        line-height: $errorBlocksPromoCheckout
  .modal-payment-types
    padding: 0 15px
    color: $white
    font-family: $mainFont
    .cssc-button
      width: 235px
      padding: 0 16px
    .credit-cards-types-checkout
      min-height: 180px
      padding: 20px
      border: $borderColorCreditCardsCheckout solid 1px
      border-radius: 4px
      .payment-types-details-msg-little,
      .payment-types-details-msg-little-gray
        font-size: 12px
      &.cb-type-checkout
        .checkout-payment-types-figure
          padding-top: 12px
      &.cinepass-type-checkout
        margin: 12px 0 20px
      .checkout-payment-types-figure
        width: 228px
        padding-right: 10px
        float: left
        text-align: center
      .checkout-payment-types-details
        padding-left: 228px
        p
          margin: 0
        .payment-types-details-title
          margin-bottom: 18px
          font-size: 17px
        .payment-types-details-msg-1, .payment-types-details-msg-1-gray
          font-size: 13px
        .payment-types-details-msg-1-gray
          color: $colorMsgCreditCardsCheckout
        .payment-types-details-code
          font-size: 13px
        .payment-types-details-msg-2
          margin-top: 5px
          color: $colorMsgCreditCardsCheckout
          font-size: 11px
        .payment-types-details-buy
          margin-top: 10px
          display: block
        .payment-types-btns
          margin-top: 7.5px
          a
            text-decoration: none
        a
          text-decoration: underline
        a.click-here, a.the-cinepass
          color: $mainColor
          &:hover
            color: $white
        .cssc-button--gray-inactive
          box-shadow: none
          cursor: auto
          background-color: $bgColorGrayInactiveBtn
          color: $colorGrayInactiveBtn
    @media (max-width: 567px)
      .credit-cards-types-checkout
        .checkout-payment-types-figure
          margin-bottom: 20px
        .checkout-payment-types-details
          padding-left: 0
  .credit-cards-types-checkout-form
    display: none
    .modal-credit-card-numbers
      padding: 0 15px
      color: $white
      font-family: $mainFont
      .credit-card-choose-card-type
        text-align: center
        input
          margin: 0 2px 0 20px
      .credit-card-numbers-checkout
        margin: 0 0 40px 0
        text-align: center
        .inputs-block
          width: 100%
          display: inline-block
          position: relative
          color: $grayLabelsCheckout
          text-align: center
          @media (min-width: 480px)
            width: 340px
          input, select
            box-sizing: border-box
            &.error
              //padding: 0 14px
              border: 2px solid $redError
          p, label, input, .fakeselect-wrapper
            margin: 5px 0
            font-size: 14px
            font-weight: lighter
          p, label
            margin-top: 15px
            display: block
            text-align: left
          .numbers-input, .numbers-input-lg
            width: 70px
            height: 40px
            border: 0
            border-radius: 4px
            float: left
            color: $grayLabelsCheckout
            font-weight: bold
            text-align: center
            &.last-numbers-input
              margin-left: 20px
              float: right
            &.numbers-input
              float: right
            &.numbers-input-lg
              width: 100%
          .union-input, .union-input-invisible
            width: 20px
            height: 40px
            line-height: 40px
            float: left
            text-align: center
            &.union-input-invisible
              display: none
              @media (min-width: 480px)
                display: block
          .fakeselect-wrapper
            position: relative
            float: left
            color: $grayLabelsCheckout
            font-weight: bold
            .fake-select
              width: 100%
              margin: 0px
              padding: 0px
              opacity: 0.01
              position: absolute
              top: 0px
              left: 0px
              z-index: 2
              -webkit-appearance: menulist-button
          .last-numbers-text-top, .last-numbers-text-bottom
            width: 180px
            margin: 0
            position: absolute
            right: -110px
            @media (max-width: 567px)
              right: 0
          .last-numbers-text-top
            bottom: 55px
            label
              margin: 0
              display: inline-block
            li
              margin-right: 3px
              font-size: 20px
          .last-numbers-text-bottom
            bottom: -40px
      .validate-credit-card-numbers-checkout
        @media (max-width: 567px)
          padding-top: 20px
        .save-credit-card-numbers-checkout
          .after-checkbox
            margin: 0
            padding: 0 0 0 35px
            color: $grayLabelsCheckout
            font-size: 14px
            font-weight: lighter
            font-style: italic
  #credit-card-checkout-form-block .checkout-error-msg,
  .modal-container-pw-validation .checkout-error-msg
    @include checkout-error-msg
    text-align: center
    p
      margin: 0 30px
      line-height: 30px
      vertical-align: middle
      span
        display: inline-block
        color: $white
        font-size: 13px
        &:first-child
          margin-right: 10px
          font-size: 18px
      @media (max-width: 567px)
        p
          line-height: inherit

/* -------------------------------------------------------------------------------
 * REGISTRATION
 * -----------------------------------------------------------------------------*/


.checkout-fieldset-title,
.checkout label
  font-family: $mainFont
  font-size: 14px
  font-weight: lighter
  line-height: 20px
  color: $grayLabelsCheckout
  .checkout-checkbox
    margin-right: 8px

.checkout .password-label-registration,
.checkout .password-label-error-registration
  display: block
  position: absolute
  z-index: 1
  top: 10px
  left: 0
  overflow: hidden
  font-size: 14px
  &.password-label-registration
    color: $colorCodePromoInputCheckout
    font-weight: normal
  &.password-label-error-registration
    color: $redError

.checkout-fieldset-title
  padding: 0 0 17px
  .icon-account
    padding-right: 6px
    font-size: 12px

.form-group--dob .fakeselect-wrapper
  float: left
  &:last-child
    width: 111px
  + .fakeselect-wrapper
    margin-left: 20px
    &:before
      content: "/"
      position: absolute
      top: 0
      left: -14px
      font-family: $mainFont
      font-size: 14px
      font-weight: bold
      color: #a9a9ab

/* Mobile

@media (max-width: 767px)
  .modal-getback
    top: 129px
    left: 15px
  .form-group--dob .fakeselect-wrapper
    width: 69px
    &:last-child
      width: 90px
    .modal_checkout_cart .checkout-title
      margin-bottom: 0


/* ----------------------------------------------------------
 * SUCCESS
 * --------------------------------------------------------*/

.success
  position: relative
  margin: 0 -15px
  text-align: center
  font-family: $mainFont
  -webkit-font-smoothing: antialiased

.success__inner
  position: relative
  height: 216px
  padding: 0 15px
  background: transparent url("../bundles/cineweb/images/common/backgrounds/bg-success.jpg") center no-repeat

.success-title
  position: relative
  top: 42px
  font-size: 24px
  font-weight: 900
  line-height: 31px
  color: #fff
  opacity: 0
  transition-delay: 400ms
  transform: translateY(-20px)

.modal.fade.in .success-title
  opacity: .999
  transform: translateY(0px)

.success-title
  span
    font-weight: 300
  a
    color: $mainColor
    &:hover
      text-decoration: underline

.success-illu
  z-index: 1
  position: absolute
  top: 129px
  right: 0
  left: 0
  opacity: 0
  transition-delay: 700ms
  transform: translateY(-20px)
  height: 216px
  background: transparent url("../bundles/cineweb/images/icons/icn-success.png") center top no-repeat

.modal.fade.in .success-illu
  opacity: 1
  transform: translateY(0)

.success > p
  width: 525px
  margin: 119px auto 0
  font-family: $mainFont
  font-size: 14px
  line-height: 20px
  color: #babdc7

.success-share
  padding-bottom: 35px
  .title
    margin: 23px 0 6px
    font-size: 22px
    color: #8b8d95

.success-share__list
  font-size: 0
  a
    display: inline-block
    font-size: 46px
    vertical-align: middle
    color: #686a6e
    *display: inline
    *zoom: 1
    &:hover
      text-decoration: none
      color: $mainColor
    + a
      margin-left: 13px

.end-step-block-btn-checkout
  width: 100%
  margin: 0
  display: inline-block

.modal-switch-button
  width: 242px
  height: 45px
  line-height: 45px
  font-weight: bold

.cssc-button-inactive
  margin: 0
  padding: 0 16px
  border: 0
  display: inline-block
  box-sizing: border-box
  box-shadow: none
  line-height: 40px
  font-size: 13px
  text-align: center
  white-space: nowrap
  color: $colorGrayInactiveBtn
  &:hover
    text-decoration: none
    color: #fff

/* Mobile

@media (max-width: 767px)
  .checkout
    width: 100%
    margin: 0
  .success-title
    top: 12px
  .success-illu
    top: 150px
    height: 135px
    background-size: contain
  .success > p
    width: 100%
    margin-top: 80px
    padding: 0 15px


/* ----------------------------------------------------------
 * ERROR
 * --------------------------------------------------------*/

.checkout-error-msg
  @include checkout-error-msg
  p
    margin: 0 30px
    line-height: 30px
    vertical-align: middle
  &#login-msg-error
    height: auto
    min-height: 62px
    margin-bottom: 40px
    p
      line-height: normal
    p:first-child
      margin: 10px 30px 0 30px
    p:last-child
      margin: 0 30px 10px 30px
  &#password-msg-error
    height: 62px
    margin-bottom: 40px
    overflow: hidden
    p.login-msg-error-paragraph
      margin: 0 50px
      margin-top: auto
      margin-bottom: auto
      line-height: 62px
      span
        line-height: 1.2
        vertical-align: middle
    span
      display: inline-block
      color: $white
      font-size: 13px
      &:first-child
        margin-right: 10px
        font-size: 18px
  @media (max-width: 567px)
    p
      line-height: inherit


/* Forgot password modal

#lost-password-form-modal
  margin: 0 25px 30px 25px
  .lost-password-title, .lost-password-desc
    margin: 0
    color: $white
    &.lost-password-title
      margin-bottom: 12px
      font-size: 20px
      font-weight: lighter
    &.lost-password-desc
      font-size: 13px
      font-weight: normal
  .lost-password-block-input
    margin-top: 40px
    text-align: center
    .lost-password-sub-block-input
      margin: 0 0 20px 0
      display: inline-block
      position: relative
      i
        position: absolute
        top: 14px
        left: 13px
        z-index: 10
        color: $grayLoginInputCheckoutIconsColor
        font-size: 14px
      .lost-password-input
        width: 288px
        @media (max-width: 479px)
          width: 100%
  .lost-password-submit-block
    text-align: center
    .lost-password-submit
      width: 165px

.email-sent-title-modal
  margin: 0 25px 12px 25px
  color: $white
  font-size: 20px
  font-weight: lighter
.email-sent-msg-modal
  margin: 0 25px 60px 25px
  color: $white
  font-size: 13px
  font-weight: normal
.submit-block-reset
  width: 100%
  padding: 5px 25px 33px 25px
  float: left
  text-align: center
  @media (max-width: 320px)
    padding: 5px 0 33px 0


#cb-msg-error,
#password-msg-errorx
  height: auto

/* -------------------------------------------------------
 * Header
 * -------------------------------------------------------

@import "http://www.fr.universcine.be/bundles/cineweb/css/variables"
@import "http://www.fr.universcine.be/bundles/cineweb/css/common/mixins"


.profil-overlay
  display: none
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  z-index: 11
  background-color: transparent
  @include transitionsAllcustom(1s)
  @media (max-width: $desktopMin)
    background-color: rgba(0, 0, 0, .5)

.profil-row
  background-color: $black

.profil
  position: relative
  &.profil--person
    .background-profil
      min-height: 127px
      position: relative
      background-color: $black
      .bg-background-profil
        height: 415px
        background-size: cover
        background-position: center
        background-repeat: no-repeat
        background-color: transparent
      .icon-play
        margin: -(100/2)px -(100/2)px 0 0
        left: 50%
        top: 50%
        font-size: 100px
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus
  border: 0

#opinions
  background: $grayCcInnerBgColor
  .icon-chevron-right
    left: 95%
  .navigation-button:before
    color: $colorGrayInactiveBtn
.uc-main
  background: $white
  clear: both
  display: block
  margin: 0px
  padding:
    top: 50px
    left: 60px
    bottom: 37px
  @media (max-width: $desktopMin)
    padding-left: 0
  h2
    font-weight: normal
  .rent-film-thumbnail-block
    padding-left: 0
  #last-rent
    display: inline-block
    .rent-film-thumbnail-block, .current-rent
      display: inline-block
    @media (max-width: $iphone4PaysageMin)
      display: block
  div#graph
    @media (max-width: $iphone4PaysageMin)
      margin-top: 20px
      margin-bottom: 20px
  .all-commands
    width: 100%
    display: inline-block

.current-rent
  p,time
    padding: 0px
    margin: 0px
  p:first-child, time.current
    color: #999
    padding: 0px
    margin: 0px
.expiration-date
  color: #FF0000
time.expiration-date
  font-weight: bold
  font-size: 17px
#opinions.cc-main
  background: #f5f5f6
ul.opinion-list
  li
    list-style: none
    display: inline-block
    &:nth-child(2n+1)
      clear: both
.cinepass-package, .cinepass-informations
  display: inline-block
  vertical-align: top
.cinepass-informations
  margin-left: 15px
  p
    margin: 0
    padding: 0
    line-height: 35px
  .cinepass-title
    color: #999999
    font:
      family: $mainFont
      size: 25px
      weight: lighter
    margin:
      bottom: 2px
  .cinepass-label
    color: #333333
    font:
      family: $mainFont
      weight: lighter
      size: 35px
  .cinepass-sold
    color: #78c1b5
    font:
      weight: bold
      family: $mainFont
      size: 20px
    margin-top: 10px
#follower.cc-main
  background:
    color: #f0f0f1
  padding-bottom: 30px


.profil-header
  position: relative
  height: 227px
  background-color: #191919
  background-repeat: no-repeat
  background-position: center

a.profil-header
  display: block

.profil .has-shadow
  @include transitionsAllcustom(1s)
  content: ""
  display: block
  z-index: 1
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  background-image: -moz-linear-gradient(bottom, rgb(0, 0, 0) 0, rgba(0, 0, 0, 0) 100%)
  background-image: -webkit-linear-gradient(0, rgb(0, 0, 0) 0, rgba(0, 0, 0, 0) 100%)
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%)
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000',GradientType=0 )
/* IE6-9

.background-profil
  @include transitionsAllcustom(1s)
  @media (max-width: $desktopMax)
    position: relative
  .bg-background-profil
    @include transitionsAllcustom(1s)
    width: 100%
    height: 630px
    background-size: cover

.profil .icon-play
  margin: -50px 0 0 -30px
  display: block
  position: absolute
  top: 30%
  left: 50%
  z-index: 2
  font-size: 25px
  color: #fff
.profil .profil-header__poster .icon-play
  padding: 1px
  display: block
  width: auto
  top: inherit
  left: inherit
  bottom: 104%
  left: 80px
  span
    margin-left: -5px
    padding-top: 6px
    display: inline-block
    vertical-align: top
    font-family: $mainFont
    font-size: 13px
    font-weight: bold
  &:hover
    color: $mainColor

.profil-header > .icon-play:before
  margin: 0
  img
    z-index: 10
    position: absolute
    bottom: -96px
    left: 30px
    border-radius: 3px

.profil-header__name, .profil-header__name-noimg
  z-index: 2
  position: absolute
  bottom: 87px
  left: 405px
  font-family: $mainFont
  color: #fff
  -webkit-font-smoothing: antialiased
  @include transitionsAllcustom(1s)
  &.profil-header__name-noimg
    left: 90px
  &.user
    bottom: 22px
  .caption
    display: none
  .name
    position: relative
    top: 10px
    font-size: 40px
    font-weight: 900
    .agelimit
      margin-left: 6px
      color: $white
      font-size: 15px
      font-weight: bold
  .job
    color: $grayJobColor
    font-size: 25px
    font-weight: lighter
  .authors
    font-size: 20px
    font-family: $mainFont
    margin: 5px 0
    font-weight: 400
    a
      color: inherit
      &:hover
        text-decoration: underline
  .time
    font-size: 25px
    font-weight: 300
    color: #c5c5c5
  i
    font-size: 21px

.profil-header > .cssc-button--follow
  float: right
  padding: 0 16px
  line-height: 45px
  margin-left: 10px

.btns-follow
  position: absolute
  bottom: 30px
  right: 80px
  .cssc-button--follow
    padding: 0 15px
    margin-bottom: 5px
  &.user
    text-align: left
    li
      list-style: none
    a
      width: 200px
      text-align: left
      padding-left: 20px

.profil-header .cssc-button.has-icon--left i
  padding-right: 11px
  font-size: 19px
  vertical-align: -3px

/* Btn

@media (max-width: $lgMaxV3)
  .btns-follow.user
    width: 200px

/* Mobile

@media (max-width: $mdMin)
  .btns-follow.user
    position: inherit
    width: 100%
    margin: auto
    bottom: auto
    right: auto
    a
      margin-bottom: 10px
      width: calc(100% - 40px)

/* Header no-img

.profil--noimg
  background-color: #000
  height: auto
  .profil-header
    background-color: #000
    height: auto
  .profil-stats
    position: relative
    bottom: 0
    width: 100%
    padding-left: 35px
  .profil-stat:first-child, .profil-stats__inner
    padding-left: 0

/* Header person

.profil--person, .profil--film
  .profil-header
    height: 415px
  .icon-play
    top: 50%

/* Stats
 * -----------------------

.profil-stats
  border-bottom: 1px #dddee0 solid
  z-index: 5
  .profil-stats__inner, .profil-stats__inner-noimg
    min-height: 67px
    padding: 15px 0 15px 295px
    &.profil-stats__inner-noimg
      padding-left: 0
      .profil-stat:first-child
        padding-left: 0

.profil-stats__inner
  font-size: 0

.profil-stat
  width: 130px
  display: inline-block
  padding: 0 29px
  font-size: 13px
  line-height: 37px
  vertical-align: middle
  color: #8a8a8a
  *display: inline
  *zoom: 1
  + .profil-stat
    border-left: 1px #e2e2e2 solid
    border-left: 1px rgba(88, 88, 88, 0.1) solid
  &:nth-child(2)
    width: 150px
    @media (max-width: $mdMin)
      width: auto


.profil-stat__inner
  display: inline-block
  font-family: $mainFont
  font-weight: 400
  line-height: 1.2
  vertical-align: middle
  *display: inline
  *zoom: 1
  -webkit-font-smoothing: antialiased
  p
    margin: 0
    span
      display: inline-block

.profil-stat
  .title
    margin-bottom: 2px
    font-size: 14px
    font-weight: 700
    color: #040404
  .value-info-artist
    color: $grayinfoValueArtistColor
    font-size: 13px
    @media (max-width: $mdMin)
      float: right

.profil-stat__inner
  .icon-avis
    font-size: 16px
  .icon-addwishlist
    font-size: 12px
  .icon-playlist
    font-size: 15px
  .icon-label
    font-size: 14px
  .icon-clock
    font-size: 17px
  .icon-flag
    font-size: 15px

/* Mobile

@media (max-width: $mdMin)
  /* Header
   *-----------------------
  .profil-header
    >.icon-play
      margin-left: -50px
      img
        position: static
        width: calc(60% - 40px)
        margin-top: 20px
        margin-right: 20px
        margin-left: 20px
        border-radius: 0
    height: auto
    padding-bottom: 20px
    text-align: center
    .cssc-button--follow
      display: block
      position: static
      width: calc(100% - 40px)
      margin: 0 20px
  .profil-header__name
    position: static
  .profil-stats .profil-stats__inner
    padding-left: 0
    text-align: center
  .profil-stat
    width: auto
    padding: 0 15px
  .profil-header__name
    .name
      position: static
      margin: 9px 0 5px
      font-size: 30px
    .time
      margin-bottom: 20px
      font-size: 18px
  .profil--film .profil-header__name .time
    margin-top: 10px
  /* Profil stats
   *-----------------------
  .profil.profil--film .profil-stats__inner
    margin-top: 20px
  .profil-stat + .profil-stat
    border-left: 0
    border-top: 1px rgba(138, 138, 138, 0.4) solid
  .profil--film .profil-stat + .profil-stat
    border-top-color: rgba(88, 88, 88, 0.4)
  .profil-stat
    display: block
    padding: 0
    text-align: left
  .profil-stat__inner
    display: block
    line-height: 40px
    overflow: hidden
  .profil-stat
    .title
      float: left
      i
        display: inline-block
        width: 20px
        vertical-align: middle
    p
      float: right
  .profil .icon-play
    top: 70%
  .profil .background-profil .icon-play
    display: none
  .profil .profil-header__poster .icon-play
    display: block
    left: auto
    right: 15px
    top: auto
    bottom: 15px
    font-size: 88px
    z-index: 10
    span
      display: none

/* ----------------------------------------------------------
 * Fiche film
 * -------------------------------------------------------

.profil--film
  .profil-header
    height: 631px
  .profil-header__name
    bottom: 27px

.profil-header__empty
  display: none
  max-width: 100%
  width: 800px
  height: ($topTrailerHeight + 10)
  @include transitionsAllcustom(1s)

.profil-header__poster
  width: $profilHeaderPosterWidth
  height: $profilHeaderPosterHeight
  z-index: 9
  position: absolute
  bottom: -148px
  left: 80px
  @include border-radius(5px)
  @include transitionsAllcustom(1s)
  &.profil-header__poster-person
    width: $posterPersonImgHeight
    height: $posterPersonImgHeight
    bottom: -27px
  .bg-background-profil-header-poster
    width: 100%
    height: 100%
    position: absolute
    border: $white solid 3px
    background-size: cover
  @media (max-width: $mdMin)
    width: $profilHeaderPosterWidth*.75
    height: $profilHeaderPosterHeight*.75
  @media (max-width: $smMin)
    width: $profilHeaderPosterWidth
    height: $profilHeaderPosterHeight

.profil--film
  .name
    margin-bottom: -6px
    padding-bottom: 14px
  .profil-stat
    .title
      color: #fff
    &:first-child
      padding-left: 0
  .profil-stats__inner
    margin-top: 40px
  .profil-stat + .profil-stat
    border-left-color: #585858
    border-left-color: rgba(88, 88, 88, 0.4)

.profil-header__buttons
  z-index: 3
  position: absolute
  right: 30px
  bottom: 20px
  text-align: right
  font-size: 0
  .film-options
    display: inline-block
    margin: 0 -2px -2px 0
    vertical-align: middle
    *display: inline-block
    *zoom: 1
    &.film-options-versions
      padding-right: 12px
      border-right: 1px solid $grayinfoValueArtistColor
    &.film-options-format
      padding-left: 12px
  .film-option, .film-option-format
    margin: 0 2px
    &.film-option-format
      background-color: $black
      border: 1px solid $grayinfoValueArtistColor
  .buttons-set
    margin: 10px 0 0
    width: 200px
    .cssc-button
      line-height: 45px
      height: 45px
      + .cssc-button
        margin-top: 5px
    .offer-cssc-button
      width: 47px
      .icon-gift
        left: 0
    .button-player-launch
      margin-top: 8px
  .show-subtitles-options:hover
    cursor: pointer
    background: $mainColor
  .subtitles-popover
    position: absolute !important
    max-width: 100px
    .popover-content
      padding: 10px
    .film-option
      margin: 5px 0 0 0
      width: 100%
      box-sizing: border-box
      text-align: center
      &:first-child
        margin-top: 0
    > .arrow:after
      border-top-color: #27292F



/* Casting & share
 * -----------------------

.profil-stats--casting
  padding-top: 20px
  padding-bottom: 30px
  .casting
    padding-left: 315px
    max-width: 870px

.casting-title, .article-title
  font-family: $mainFont
  font-size: 22px
  font-weight: 400
  color: #27292f

.casting .casting-title
  margin-bottom: 10px

.casting-list, .article-infos
  font-family: $mainFont
  font-size: 14px
  font-weight: 700
  line-height: 18px
  color: #686a6e
  -webkit-font-smoothing: antialiased
  a
    padding-left: 3px
    color: inherit
    &:hover
      text-decoration: underline

#carousel-photos
  height: $photosCarouselFilmsWidth
  margin-bottom: 20px
  .carousel-inner
    height: 100%

.share .casting-title
  margin-bottom: 7px

/* Bundle
 * -----------------------

.bundle__inner
  position: relative
  width: 700px
  margin: 0 0 0 355px
  padding-left: 70px
  color: #fff

.bundle-left
  width: 320px

.bundle__inner.icon-starflag:before
  z-index: 1
  position: absolute
  top: 0
  left: 0
  font-size: 72px
  color: #fff

.bundle-title
  padding: 22px 0 13px
  font-family: $mainFont
  font-size: 27px
  font-weight: 300
  -webkit-font-smoothing: antialiased
  strong
    font-weight: 700

.bundle-films
  font-size: 16px
  line-height: 18px
  font-family: $mainFont
  -webkit-font-smoothing: antialiased

.bundle .bundle-price
  line-height: 127px

.bundle-price
  font-family: $mainFont
  font-size: 24px
  font-weight: 700
  color: #fff
  -webkit-font-smoothing: antialiased
  del
    color: #f39cbc

.bundle .cc-main-link-block
  top: 20px

/* Wide

@media (min-width: 1399px)
  .profil-stats--casting .casting
    padding-left: 325px
  .profil-header__poster
    left: 80px
  .profil-header__name
    left: 407px
  .bundle__inner
    margin-left: 395px
  .profil-header__buttons .buttons-set
    width: auto
    .cssc-button
      margin-left: 11px
      + .cssc-button
        margin-top: 0
  .profil-header__buttons .buttons-set.force-same-button-player-width
    width: 244px
    a
      margin-left: 0
  .profil-header
    > img
      left: 80px
    .cssc-button--follow
      right: 80px
  .profil-header__buttons
    right: 80px

@media (min-width: 1161px) and (max-width: 1398px)
  .profil-header__buttons
    .buttons-set
      width: 200px
      .cssc-button
        margin-left: 11px
        display: block
      .modal-switch-button
        width: 100%
    .film-options
      display: block
      &.film-options-versions
        margin-bottom: 4px
        padding-right: 0
        border: 0
  .profil-header__buttons .buttons-set.force-same-button-player-width
    width: 244px
    a
      margin-left: 0


@media (min-width: $mdMax) and (max-width: 1160px)
  .profil-header__poster
    left: 20px
  .profil-header__name
    left: 330px
  .profil-header__buttons
    right: 20px

@media (min-width: $mdMax) and (max-width: 1160px)
  .profil-header__buttons .buttons-set
    width: 200px
    .cssc-button
      margin-left: 0
      display: block
    .modal-switch-button
      width: 100%
  .profil-header__buttons .buttons-set.force-same-button-player-width
    width: 244px
    a
      margin-left: 0

/* Mobile

@media (max-width: $modalMin)
  .profil--film .background-profil .has-shadow,
  .profil--film .background-profil .bg-background-profil
    height: (768px*.45)

@media (max-width: $mdMin)
  .profil.profil--person
    .background-profil-noimg
      //display: none
      height: 10px
      min-height: 10px
    .profil-header__name.profil-header__name-noimg
      margin-top: 0
  .profil--film .background-profil .has-shadow,
  .profil--film .background-profil .bg-background-profil
    display: none
  .profil
    background-color: #000
  .profil--film .profil-header
    height: 218px
    padding-bottom: 0
  .profil-header__poster
    position: relative
    bottom: auto
    left: auto
    margin: 20px auto 0 auto
    img
      width: 100%
    .buttons-img
      top: 5px
      right: 5px
  .profil-header__buttons
    position: static
    text-align: center
    .film-options
      margin-top: 20px
    .buttons-set.force-same-button-player-width
      .button-player-launch
        display: none
  .profil-header__name
    margin: 50px 0 20px
    padding: 0 20px
    text-align: center
  .profil-header__buttons .buttons-set
    width: auto
    padding: 20px 0
    margin: 0 20px
    .cssc-button
      width: 100%
  .cssc-button--label
    span
      width: calc(100% - 85px)
      padding-left: 20px
      text-align: left
    &.gift span
      width: calc(100%)
      padding-left: 20px
      text-align: left
    .thelabel
      width: 70px
      text-align: center
  /* Casting
   *-----------------------
  .profil-stats--casting
    .casting
      padding-left: 0
      max-width: none
    .pull-left, .pull-right
      float: none !important
    .pull-left
      padding-bottom: 20px
  /* Bundle
   *-----------------------
  .bundle__inner
    width: auto
    margin: 0
    padding: 0 20px
    text-align: center
    &.icon-starflag:before
      left: 64px
  .bundle-title
    padding-left: 111px
    text-align: left
    font-size: 24px
    line-height: 24px
    padding-top: 16px
    strong
      display: block
  .bundle-left
    width: auto
  .bundle-films
    margin-top: 24px
    font-size: 15px
    line-height: 16px
  .bundle__inner
    .pull-left, .pull-right
      float: none !important
      line-height: 1.2
  .bundle
    .bundle-price
      margin-top: 14px
    .cc-main-link-block
      top: 0


/* ----------------------------------------------------------
 * Biographie
 * -------------------------------------------------------

.biographie
  padding-bottom: 30px
  .block-dark-title
    margin-bottom: 16px
    padding-top: 71px
    padding-bottom: 0
  a.cc-main-link
    display: block
    margin-top: 15px
  .content-biography-artist
    #biography-more
      overflow: hidden
      p a
        color: $mainColor
      .sub-biography-more
        max-height: 250px
        overflow: hidden
    #biography-less
      overflow: hidden
      .sub-biography-less
        max-height: 217px
        overflow: hidden
    #biography-more,
    #biography-less,
    #biographie
      line-height: 17px
      color: $grayIconsCheckout
      font-family: $mainFont
      font-size: 14px
      p
        margin: 0 0 20px 0

/* ----------------------------------------------------------
 * Carousel
 * -------------------------------------------------------

.profil-wishlist
  border-top: 1px solid #eee

/* ----------------------------------------------------------
 * Last films
 * -------------------------------------------------------

.container-last-film-artist
  padding: 0 0 0 20px

.lastfilm-container
  padding: 0 2.5px
  .last-film
    img
      float: right

.lastfilm
  .block-dark-title
    margin-bottom: 23px
    padding-top: 71px
    padding-bottom: 0
  .recommande-item__infos
    margin-top: 14px
    margin-left: 0px
    .title-link
      padding-left: 20px
      font-size: 16px
      font-weight: bold
    .author-link
      padding-left: 20px
      color: $grayAuthorNoticesModalColor
      font-size: 13px
      font-weight: lighter
      span
        color: $grayIconsCheckout

/* Wide

@media (min-width: 1399px)
  .lastfilm
    .recommande-item, .pull-left
      width: auto

/* Mobile

@media (max-width: 767px)
  .biographie .block-dark-title, .lastfilm .block-dark-title
    padding: 20px 0
    margin: 0

/* ----------------------------------------------------------
 * Filmographie
 * -------------------------------------------------------

.filmographie
  ul, li
    list-style: none
  .block-dark-title
    padding: 41px 0 49px
  .title
    color: #3e4045
  ul.filmography-list-artist
    padding: 0
    li
      display: block
      ul.top-item
        padding: 0
        display: block
        li.top-item-illu
          img
            width: 100%
        .fiche-description
          padding-bottom: 40px
          .title, .author, .price
            max-width: 100%
            max-height: 18px
            display: block
            white-space: nowrap
            overflow: hidden
            -o-text-overflow: ellipsis
            text-overflow: ellipsis
            strong, em
              max-width: 100%
              display: inline-block
              white-space: nowrap
              overflow: hidden
              -o-text-overflow: ellipsis
              text-overflow: ellipsis
          .title
            em
              font-style: normal
          .author
            font-weight: bold
          .price
            strong
              color: $mainColor


/* Tablette & Mobile

@media (max-width: 1023px)
  .filmographie
    padding-bottom: 0
    > div
      padding-bottom: 30px

@media (min-width: 768px) and (max-width: 992px)
  .filmographie .buttonsset
    top: 40px

/* ----------------------------------------------------------
 * Friends
 * -------------------------------------------------------

.friends
  padding-top: 40px


/* Followers

.follow-presentation
  display: block
  margin-bottom: 31px
  font-size: 0
  .name
    display: inline-block
    padding-left: 10px
    max-width: 62%
    overflow: hidden
    text-overflow: ellipsis
    font-family: $mainFont
    font-size: 14px
    font-weight: 700
    white-space: nowrap
    vertical-align: middle
    color: #686a6e
    *display: inline
    *zoom: 1
  &:hover .name
    text-decoration: underline

/* Mobile

@media (max-width: 767px)
  .friends
    padding-top: 20px
    .nav-tabs > li
      width: 50%
      text-align: center
      + li
        margin-left: 0
      a
        padding: 0 12px
        font-size: 17px
        line-height: 23px
  .follow-presentation .name
    padding-left: 10px
    max-width: 80%

/* Tablette

@media (min-width: 768px) and (max-width: 1023px)
  .follow-presentation .name
    padding-left: 23px
    max-width: 72%

/* Wide

@media (min-width: 1399px)
  .follow-presentation .name
    padding-left: 23px
    max-width: 72%

  .filmographie
    .col-md-3
      width: 20%
    ul
      li
        display: block
        &:nth-child(5n+1)
          clear: both

/* ----------------------------------------------------------
 * Avis
 * -------------------------------------------------------

.opinion-col
  .testimonial + .testimonial
    margin-top: 32px
  img
    border: 0
  .media > .pull-left
    margin-right: 20px
  .testimonial__avatar:after
    right: -20px

.carousel--avis
  padding-bottom: 60px
  .navigation-button
    left: -30px
    margin-top: -25px
    + .navigation-button
      right: -30px
      left: auto

/* Footer
 * -----------------------

#testimonial__modal + .opinion-footer
  margin-top: 20px

.opinion-footer
  position: relative
  margin: 0 -20px -13px
  padding: 0
  padding-right: 15px
  border-top: 1px #f2f2f2 solid
  text-align: right
  font-family: $mainFont
  font-weight: 400
  line-height: 42px
  color: #686a6e

.opinion-footer__nbr
  position: relative
  margin-left: 10px
  font-weight: 700
  &:hover i
    color: $mainColor
  + .opinion-footer__nbr
    &:before
      content: ""
      display: block
      position: absolute
      top: 50%
      left: -3px
      width: 1px
      height: 16px
      margin-top: -8px
      background-color: #dddee0
    padding-left: 10px
  i
    position: relative
    padding-right: 3px
    font-size: 17px
    vertical-align: middle
    color: #888a8d
  .icon-hand-up
    top: -3px
  .icon-hand-down
    top: 2px

.opinion-delete
  text-align: right
  a
    text-align: right
    text-decoration: underline
    font-family: $mainFont
    font-size: 12px
    color: #a0a3a9

/* Mobile

@media (max-width: 767px)
  .opinions .testimonial__avatar
    width: 130px
    img
      width: 100%

/* ----------------------------------------------------------
 * Articles
 * -------------------------------------------------------

.articles
  padding-bottom: 57px

/* Tablette & Mobile

@media (max-width: 1023px)
  .articles
    padding-bottom: 0
    .editorialfeeditem
      padding-bottom: 30px
.syno-photos
  padding-top: 41px
  .casting-title
    padding-bottom: 21px

.tab-details .table tr
  &:first-child td
    border-top: 0
  td
    &:first-child
      padding-left: 0
    color: #686a6e
    line-height: 28px

.tab-synopsis p
  font-family: $mainFont
  font-size: 14px
  line-height: 20px
  color: #686a6e

/* ----------------------------------------------------------
 * Slider photos
 * -------------------------------------------------------

.syno-photos
  .tab-content > .tab-pane
    min-height: $photosCarouselFilmsWidth
    overflow: hidden
    .tab-synopsis
      padding-right: 20px

.carousel--photos
  .clearfix
    font-size: 0
  img
    float: left
    width: calc(100% / 2 - 2px)
    + img
      float: right
  .cssc-button
    &:before
      left: 0
    + .cssc-button:before
      right: 0

#modal-photos
  .modal-dialog
    width: 100%
    display: inline-block
    top: 35px
    left: 0
    right: 0
    @include border-radius(0)
    text-align: center
    .modal-content
      border: 0
      @include border-radius(0)
      overflow: hidden
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3)
      background-color: transparent
      .cssc-notices-button
        position: absolute
        top: 18px
        right: 20px
        z-index: 9
        color: #a9a9ac
        &:hover
          text-decoration: none
      .modal-body
        .thumbnail
          padding: 0
          border: $colorGrayInactiveBtn solid 2px
          @include border-radius(0)
          background-color: transparent
    @media (max-width: $desktopMin)
      top: 0
      .modal-content
        .modal-body
          .thumbnail
            width: 100%

/* Wide

@media (min-width: 1399px)
  .carousel--photos img
    width: calc(100% / 2 - 2px)

/* Tablette

/* Mobile

@media (max-width: 767px)
  .carousel--photos img
    width: calc(50% - 10px)
  #carousel-photos
    height: 152px

@media (max-width: 567px)
  #carousel-photos
    height: 118px

@media (max-width: 479px)
  #carousel-photos
    height: 73px

/* ----------------------------------------------------------
 * Distribution
 * -------------------------------------------------------

.film-distribution
  min-height: 77px
  border-top: 1px #e5e5e5 solid
  font-family: $mainFont
  font-size: 14px
  font-weight: 400
  color: #27292f
  padding-top: 20px
  padding-bottom: 20px
  img
    margin-left: 22px

/* Mobile

@media (max-width: 767px)
  .film-distribution
    margin-top: 20px
    padding-top: 10px
    padding-bottom: 10px
    line-height: 1.2
    .pull-left, .pull-right
      float: none !important
    .pull-left
      margin-bottom: 10px

/* Tablette

@media (min-width: 768px) and (max-width: 1023px)
  .film-distribution
    margin-top: 20px

/* ----------------------------------------------------------
 * Slider Articles / Critiques
 * -------------------------------------------------------

.block-review-articles
  padding-bottom: 50px
  .block-dark-title
    padding: 51px 0 46px

.carousel-articles-reviews
  padding: 0 10px

.block-review-articles .cssc-button:before
  color: #8b8b8b
  margin-left: 30px
  color: #8b8b8b
  margin-right: 30px

.carousel-articles-reviews
  .navigation .cssc-button + .cssc-button:before
    right: -10px
    left: auto
  .block-dark-title
    padding: 53px 0 45px
  .navigation-button
    left: -10px
    margin-top: -7px
    + .navigation-button
      right: -10px
      left: auto
    &:before
      font-size: 15px

/* Tablette & Mobile

@media (max-width: 1161px)
  .block-review-articles
    .block-dark-title
      padding: 21px 0 20px
    .navigation-button
      &.icon-chevron-left
        left: -2.5%
      &.icon-chevron-right
        right: -2.5%

@media (max-width: 1160px)
  .block-review-articles
    .navigation-button
      display: block
    .cc-inner .row
      position: relative

@media (max-width: 768px)
  .block-review-articles .cc-main-link-block, .opinions .cc-main-link-block, .block-testimonials--fichefilm .cc-main-link-block
    padding-top: 0

/* ----------------------------------------------------------
 * Commentaires
 * -------------------------------------------------------

.carousel-commentaires
  .testimonial + .testimonial
    margin-top: 17px
  .cssc-button:before
    color: #8b8b8b
  .navigation-button
    right: -30px
    left: auto
    margin-top: -15px
    &:before
      right: -35px
      left: auto

/* Wide

@media (min-width: 1399px)
  .carousel-commentaires .testimonial + .testimonial
    margin-top: 57px

/* Mobile

@media (max-width: 767px)
  .block-review-articles
    padding-bottom: 0
    .col-md-6 + .col-md-6 .editorialfeeditem
      margin-top: 20px

/* ----------------------------------------------------------
 * Review lightbox
 * -------------------------------------------------------

.review-lightbox
  display: none
  z-index: 4
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  padding: 50px 80px
  background-color: #000
  background-color: rgba(0, 0, 0, 0.5)

.review-lightbox__modal
  opacity: 0
  visibility: hidden
  top: -15px
  padding: 65px 50px 48px
  border-radius: 4px
  position: relative
  background-color: #fff
  &.is-open
    opacity: .999
    visibility: visible
    top: 0
  > .cssc-button
    position: absolute
    top: 22px
    right: 22px
    font-size: 15px
    color: #a9a9ac
    z-index: 1
    &:hover
      background: transparent !important
      color: #757578 !important

.review-lightbox-name
  text-transform: uppercase
  font-family: $mainFont
  font-size: 17px
  font-weight: 700
  color: #686a6e

.review-lightbox-title
  font-family: $mainFont
  font-size: 36px
  line-height: 40px
  color: #27292f
  margin-top: 4px
  margin-bottom: 23px

.review-lightbox__modal p
  margin: 0
  font-family: $mainFont
  font-size: 14px
  line-height: 20px
  color: #686a6e
  + p
    margin-top: 10px

/* ----------------------------------------------------------
 * Slider On vous recommande
 * -------------------------------------------------------

.block-nouveaute--profil .slider-nouveaute-wrapper .navigation .cssc-button
  width: 140px

/* ----------------------------------------------------------
 * Playlist overview
 * -------------------------------------------------------

.playlistoverview__infos
  font-family: $mainFont
  -webkit-font-smoothing: antialiased
  .media > .pull-left
    display: block
    margin-right: 20px
  .media-body
    font-size: 0
  .time
    text-transform: uppercase
    font-size: 12px
    font-weight: 700
    color: #535559
  .name
    display: inline-block
    margin: -3px 0 -7px
    font-size: 30px
    font-weight: 900
    vertical-align: middle
    color: #27292f
    *display: inline
    *zoom: 1
    &:hover
      text-decoration: none
      color: $mainColor
    span
      font-weight: 300
    + .delete
      margin-left: 5px
      position: relative
      top: 2px
  .delete
    display: inline-block
    vertical-align: middle
    *display: inline
    *zoom: 1
    i
      font-size: 22px
      color: $mainColor
      position: relative
      top: 5px
      cursor: pointer
    .cc-main-link
      margin-left: 6px
      overflow: hidden
      position: relative
      top: -6px
      position: right
      right: 0
      opacity: 0
      visibility: hidden

.btn-delete-playlist-label
  padding-left: 6px
  font-family: $mainFont
  font-size: 14px
  font-weight: 400
  position: relative
  color: $mainColor

.playlistoverview__infos
  .delete.is-open
    .btn-delete-playlist-label
      top: -2px
      opacity: 0
      visibility: hidden
    i
      color: #888a8d
    .cc-main-link
      opacity: 1
      top: -2px
      visibility: visible
  .created
    font-weight: 400
    color: #686a6e
    font-size: 14px
    a
      color: #0f0f0f
      font-weight: 700
      &:hover
        text-decoration: underline
        color: #0f0f0f
  .description
    margin-top: 11px
    max-width: 500px
    font-family: $mainFont
    font-size: 14px
    font-weight: 400
    line-height: 20px
    strong
      font-weight: 700
      color: #111

.playlistoverview__medias
  position: relative
  margin: 30px 0 0
  margin-right: -5px
  padding-bottom: 50px
  font-size: 0
  .playlistoverview__medias-link
    margin-right: 5px
    margin-bottom: 5px
    display: inline-block
    vertical-align: middle
    *display: inline
    > img
      display: block
      *zoom: 1
  .dropdown-menu__alllinks
    display: inline-block
    width: 97px
    height: 130px
    vertical-align: top
    *display: inline
    *zoom: 1
    &:hover
      > div, .icon-icnround-right
        color: $mainColor
    > div
      bottom: 36px
      font-family: $mainFont
      font-size: 13px
      font-weight: 700
      line-height: 13px
      letter-spacing: 0
      padding-right: 10px
    i
      bottom: 10px
      font-size: 16px

/* Mobile

@media (max-width: 767px)
  .playlistoverview__medias .dropdown-menu__alllinks > div
    font-size: 20px
    line-height: 25px

/* ----------------------------------------------------------
 * Playlist manager
 * -------------------------------------------------------

.playlists
  .created + .playlistoverview__medias
    margin-top: 31px
  .description + .playlistoverview__medias
    margin-top: 24px
  position: relative
  >.block-dark-title
    padding-top: 65px
    .cssc-button
      position: absolute
      top: 67px
      right: 0
      padding: 0 12px 0 6px
      i
        font-size: 17px
  .playlistoverview + .playlistoverview
    border-top: 1px #dddee0 solid
    padding-top: 46px
  .playlistoverview__medias
    position: relative
    margin: 0 -6px -6px 0

.playlistoverview__item
  float: left
  position: relative
  margin: 0 6px 6px 0

.playlistoverview__item-hover
  visibility: hidden
  z-index: 1
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  opacity: 0
  background-color: #000
  background-color: rgba(0, 0, 0, 0.68)
  &.is-selected
    visibility: visible
    opacity: .999
    cursor: pointer
    transition-delay: .3s

.playlists .playlistoverview__item-hover:before
  position: absolute
  top: 50%
  left: 50%
  margin: -15px 0 0 -11px
  font-size: 22px
  color: $mainColor

.playlistoverview__item-hover.is-selected
  &:before
    margin-top: -11px
  &:hover
    background-color: rgba(0, 0, 0, 0.78)
    &:before
      color: #888a8d

.playlistoverview__item .roll
  position: absolute
  top: 100%
  right: 0
  bottom: 0
  left: 0
  background-color: #000

.playlistoverview__item-hover.deleting
  + .roll
    top: 0
  &:before
    visibility: hidden
    margin-top: -20px
    color: #888a8d
    opacity: 0
    transition-delay: .4s

.playlistoverview .dropdown-menu__alllinks
  > div, .icon-icnround-right
    left: 10px

/* Mobile

@media (max-width: $smMin)
  .playlists
    >.cssc-button
      position: static
      margin: 0
    .block-dark-title
      padding: 25px 0 15px
  /* Playlists
   *  -----------------------
  .playlistoverview__infos
    .media
      > .pull-left img
        display: none
      .media-object
        display: inline
    .name
      margin: -6px 0 -4px
      font-size: 23px
      line-height: 35px
    .created
      font-size: 12px
  .playlists .playlistoverview__medias
    position: relative
    margin-right: 0
    font-size: 0
  .playlistoverview .dropdown-menu__alllinks
    height: auto
    img
      width: 100%
  .playlistoverview__medias
    .dropdown-menu__alllinks
      float: left
      width: calc(100%  / 3 - 6px)
    .playlistoverview__item
      float: left
      width: calc(100%  / 3 - 6px)
      img
        width: 100%
    > img
      float: left
      width: calc(100%  / 3 - 6px)
      margin-bottom: 6px
  .playlistoverview__infos
    .name + .delete
      margin-bottom: 10px
      margin-left: 0
    .delete
      .cc-main-link
        position: absolute
        left: 22px
      &.is-open .cc-main-link
        top: 7px

/* ----------------------------------------------------------
 * Wishlist
 * -------------------------------------------------------

.whishlist
  padding-bottom: 50px
  .top-item-illu
    float: left
    margin-right: 10px
    margin-bottom: 10px
    .item-inner, .top-item-play
      width: 30px
      height: 30px
      font:
        size: 14px
      line-height: 33px
    .top-item-play
      .icon-play
        font-size: 25px
    .top-item-link
      display: block
      width: 100%
      height: 100%
    .buttonsset
      right: 0px
    &:hover .top-item-hover
      visibility: visible
      opacity: 1

/* Tablette

@media (max-width: 768px)
  .whislist .top-item-illu
    float: left
    width: calc(100% / 4 - 10px)
    margin-right: 10px
    margin-bottom: 10px

@media (max-width: 480px)
  .whislist .top-item-illu
    float: left
    width: calc(100% / 3 - 10px)
    margin-right: 10px
    margin-bottom: 10px



.rating-container .rating-stars
  color: $starsColor