/* ---------------------------------------------------------- * CHECKOUT * /* COMMONS * /* header * /* body * /* footer * /* LOGIN * /* CART * /* movies * /* total * /* END MESSAGE * /* code promo * /* PAYMENT * /* REGISTRATION * /* SUCCESS * /* ERROR * --------------------------------------------------------- @import ../bundles/cineweb/css/variables @import ../bundles/cineweb/css/common/mixins /* ------------------------------------------------------------------------------- * * COMMONS * *----------------------------------------------------------------------------- .modal-content-checkout +border-radius(3px) +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 +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 .payment-types-details-msg-1 color: $white .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: 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 .title-share-on color: $grayTextCheckout font-family: $mainFont font-size: 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 .order-items .item-gift background-color: #1B1B1B .item margin-top: 20px margin-bottom: 20px font-size: 11px color: $colorMsgCreditCardsCheckout text-align: justify padding-top: 20px &:not(.item-gift) border-top: 2px solid #282A30 //&:first-child // border-top: 0 // + .item // border-top: 2px solid #282A30 // padding-top: 20px &.first-item border: 0 .poster text-align: left .infos h2 color: $white font-family: $mainFont font-weight: bolder font-size: 20px text-align: left margin: 0 h3 color: $grayPaymentConfirmationColor font-family: $mainFont font-size: 14px text-align: left margin: 0 margin-top: 5px margin-bottom: 10px .cssc-button width: 100% height: 40px .btnWatchSvod margin-bottom: 5px .button-player-launch right: auto bottom: auto .gift-details margin-top: 5px strong color: $white .rent_notes padding: 0 52px 0 38px font-size: 11px color: $colorMsgCreditCardsCheckout text-align: justify #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% +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 +transitionsAllStd &:hover color: $white text-decoration: none +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-img max-width: 210px .stripe-button-el display: none .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 margin: 70px 0 0 0 text-align: center .save-credit-card-title font-size: 20px !important color: white !important text-align: center !important font-weight: bold !important @media (max-width: 567px) padding-top: 20px .save-credit-card-numbers-checkout margin-top: 10px .after-checkbox text-align: justify margin: 0 padding: 0 30px 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 +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 .label-gift label color: white font-weight: normal .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: 0.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 +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 .small-details-gift-confirmation font-size: 13px .grey-checkout color: $grayLabelsCheckout !important .placeholder-fontawesome font-family: Lato, FontAwesome .textera-border-radius border-radius: 4px !important .subtitle-checkout-gift font-size: 18px .send-direct-gift-message font-size: 12px .last-row-gift-checkout margin-bottom: 15px @media screen and (min-width: 992px) .space-buttons-classic-gift-right padding-right: 2px .space-buttons-classic-gift-left padding-left: 0px .input-date-small font-size: 9px .input-hour-select font-size: 13px .modal-confirmation-order .modal-footer padding: 0 0 33px 0 .credit-card-card height: 140px width: 220px background: linear-gradient(#4a7a8a, #508fc8) border-radius: 5px box-shadow: 0 0 6px #999 padding-left: 15px .credit-card-logo position: relative width: 50px height: auto left: 145px top: 10px .credit-card-name-label color: #d2d9dd !important margin: 0 !important .credit-card-name color: #fff !important margin: 0 0 20px 0 !important .credit-card-number color: #fff !important margin: 0 !important .credit-card-expire-date-label color: #d2d9dd !important margin: 0 !important .credit-card-expire-date color: #fff !important .credit-card-choices-payment .credit-card-card margin: 0 auto transition: all .4s ease &:hover transform: scale(1.1) .credit-card-choices-footer margin-top: 80px margin-bottom: 60px font-size: 18px color: #fff .link-other-credit-card font-size: 14px .modal-container-step3 display: none /* ------------------------------------------------------- * Header * ------------------------------------------------------- @import "../bundles/cineweb/css/variables" @import "../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: 120px 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-format border-left: 1px solid $grayinfoValueArtistColor padding-left: 12px margin-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 .download-btn width: 242px /* Uncut Svod * ----------------------- .btnWatchSvod width: 242px margin-right: -2px .thefilmlabel padding: 0 20px .icon-play margin: 0 display: inline-block position: relative top: 0 left: 0 font-size: inherit .film-label-buy-options margin: 0 12px !important .btnWatchSvod.btnAddMovie, .btnWatchSvod.watch-film-btn-edito width: 242px margin-right: 0 .uncut-svod background: #339999 padding: 5px >img height: auto width: 20% .offer color: #fff width: 80% >div font-weight: lighter .intro-offer-subscribed font-size: 20px text-transform: uppercase .intro-offer-unsubscribed font-size: 15px margin-bottom: 5px .see-offer-link color: inherit font-size: 16px font-weight: bold .btnSubscribe width: auto padding-left: 15px span font-weight: bold width: auto .thelabel line-height: 20px border-radius: 3px width: auto box-shadow: inset 0 2px 1px rgba(16, 16, 19, 0.1) .btnSubscribe.cssc-button--pink padding: 0 40px .btnSubscribe.cssc-button--white, .btnSubscribe.cssc-button--white>.thelabel transition: color 0.3s ease .btnSubscribe.cssc-button--white:hover, .btnSubscribe.cssc-button--white:hover>.thelabel background: #282a2f color: #fff i color: rgba(255,255,255,0.5) .btnSubscribe.cssc-button--white .thelabel font-size: 11px line-height: normal padding: 5px 10px 5px 0 i font-size: 2em line-height: initial b font-size: 13px @media (min-width: 992px) .uncut-svod padding: 0 0 0 300px >img height: 130px width: auto .offer padding-top: 15px width: 75% .intro-offer-subscribed font-size: 23px margin-top: 14px .intro-offer-unsubscribed width: 53% font-size: 18px float: left .intro-offer-unsubscribed.full width: 68% .btnSubscribe float: left margin-left: 20px @media (min-width: 1161px) .uncut-svod padding: 0 0 0 370px .offer .intro-offer-unsubscribed width: 60% .intro-offer-unsubscribed.full width: 72% @media (min-width: 1399px) .uncut-svod .offer padding-top: 26px width: 80% .intro-offer-unsubscribed width: 72% .intro-offer-unsubscribed.full width: 80% /* Casting & share * ----------------------- .profil-stats--casting padding-top: 20px padding-bottom: 30px min-height: 148px .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 .cssc-button-group + .cssc-button-group margin-top: 17px .cssc-button min-width: 50px .profil-header__buttons .buttons-set.force-same-button-player-width width: 244px a margin-left: 0 .button-player-launch margin-top: 10px .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 .cssc-button-group .cssc-button display: inline-block min-width: 50px + .cssc-button-group margin-top: 20px .modal-switch-button width: 100% .profil-header__buttons .buttons-set.force-same-button-player-width width: 244px a margin-left: 0 .button-player-launch margin-top: 10px @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 .cssc-button-group .cssc-button display: inline-block margin-left: 11px min-width: 50px .modal-switch-button width: 100% .profil-header__buttons .buttons-set.force-same-button-player-width width: 244px a margin-left: 0 .button-player-launch margin-top: 10px /* 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-group display: inline-block margin-left: 11px + .cssc-button-group margin-top: 11px .cssc-button width: auto min-width: 50px + .cssc-button margin-left: 11px .cssc-button--label min-width: 215px .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 margin-bottom: 40px .top-item-illu img width: 100% /* 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 .btnWatchSvod width: 100% @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 .search-item-img a max-height: 148px display: inline-block .whishlist-container display: flex flex-wrap: wrap 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 .svod-product-prices-modal text-align: center .modal-content border-radius: 0 .modal-header height: auto !important padding-top: 10px .main-logo-wrapper padding: 10px 0 .logo-sub position: relative bottom: 5px text-align: left .uncut-svod height: auto .offer text-transform: uppercase text-align: left width: 70% .intro1 font-size: 23px .intro2 font-size: 16px .seeOfferLink text-transform: none .prices .blocPrice width: 100% border: 1px solid #ececec border-top: 0 a text-decoration: none .price .month font-size: 16px text-transform: lowercase a, span color: #888 .head, .infos font-size: 17px font-weight: bold text-transform: uppercase padding: 20px 10px border-bottom: 1px solid #ececec display: block .head height: 145px h4 font-weight: bolder margin: 0 .price font-size: 35px font-weight: 100 color: #333 .infos height: 185px display: flex .blocCenterInfos margin: auto .description margin-bottom: 15px .btnSubscribe margin: 20px 0 float: none span color: #fff .btnSubscribe:hover color: #fff background: #47494e .blocPrice + .blocPrice margin-left: -4px .modal-footer font-size: inherit text-align: center !important margin: 0 !important padding: 30px 0 !important >div color: #fff font-size: 16px margin-bottom: 20px @media (min-width: 660px) .svod-product-prices-modal .modal-header .uncut-svod .offer padding-top: 26px @media (min-width: 768px) .svod-product-prices-modal .prices .blocPrice display: inline-block width: 49.5% @media (min-width: 1399px) .svod-product-prices-modal .modal-content width: 1000px !important .modal-header .uncut-svod padding: 0 0 0 30px .modal-body .prices .blocPrice width: 24.5% body.sticky-header .svod-product-prices-modal .main-logo-wrapper .logo a height: 59px width: auto .logo-sub font-size: inherit img margin-left: 5px .cssc-button-group .row .col-xs-12 margin-bottom: 10px .cssc-button-full width: 100% !important .button-player-launch .download-btn width: 100% !important .cssc-button-gift-fixer position: relative top: 10px .btn-delete-account color: #fff background-color: #d9534f border-color: #d43f3a display: inline-block padding: 6px 12px margin-bottom: 0 font-size: 14px font-weight: 400 line-height: 1.42857143 text-align: center white-space: nowrap vertical-align: middle -ms-touch-action: manipulation touch-action: manipulation cursor: pointer -webkit-user-select: none -moz-user-select: none -ms-user-select: none user-select: none background-image: none border: 1px solid transparent border-top-color: transparent border-right-color: transparent border-bottom-color: transparent border-left-color: transparent border-radius: 4px .btn-cancel-delete-account color: #333 background-color: #fff border-color: #ccc display: inline-block padding: 6px 12px margin-bottom: 0 font-size: 14px font-weight: 400 line-height: 1.42857143 text-align: center white-space: nowrap vertical-align: middle -ms-touch-action: manipulation touch-action: manipulation cursor: pointer -webkit-user-select: none -moz-user-select: none -ms-user-select: none user-select: none background-image: none border: 1px solid transparent border-top-color: transparent border-right-color: transparent border-bottom-color: transparent border-left-color: transparent border-radius: 4px