/*csslint important: false, adjoining-classes: false, known-properties: false, box-sizing: false, box-model: false, overqualified-elements: false, display-property-grouping: false, bulletproof-font-face: false, compatible-vendor-prefixes: false, regex-selectors: false, errors: true, duplicate-background-images: false, duplicate-properties: false, empty-rules: false, selector-max-approaching: false, gradients: false, fallback-colors: false, font-sizes: false, font-faces: false, floats: false, star-property-hack: false, outline-none: false, import: false, ids: false, underscore-property-hack: false, rules-count: false, qualified-headings: false, selector-max: false, shorthand: false, text-indent: false, unique-headings: false, universal-selector: false, unqualified-attributes: false, vendor-prefix: false, zero-units: false */ .caritative-header { /*position: absolute;*/ } html, body { height: 100%; } body label, body .label{ font-weight:inherit; } body ul{ margin-top:0; margin-bottom:0; } /* Flexible Media */ img, video { max-width: 100%; height: auto; } /* overload bootstrap (car html bootstrap non utilisé) */ .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { position: inherit !important; margin-left: 0px !important; } ul.list-inline > li{ padding-left:0; padding-right:0; } /* fin overload bootstrap */ /*------------------------------------*\ $TYPOGRAPHIE \*------------------------------------*/ /* Museo */ @font-face { font-family: 'Museo-sans-500'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Museo-sans-500.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Museo-sans-500.eot') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Museo-sans-500.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Museo-sans-500.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Museo-sans-500-italic'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Museo-sans-500-itlalic.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Museo-sans-500-itlalic.eot') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Museo-sans-500-itlalic.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Museo-sans-500-itlalic.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Novecento-demibold'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Novecento-demibold.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Novecento-demibold.eot') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Novecento-demibold.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Novecento-demibold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Novecento-widebold'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Novecento-widebold.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Novecento-widebold.eot') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Novecento-widebold.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/Novecento-widebold.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* OpenSans */ @font-face { font-family: 'OpenSans'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Regular-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Regular-webfont.eot') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Regular-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sanssemibold'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibold-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibold-webfont.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibold-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibold-webfont.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sanssemibold_italic'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibolditalic-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibolditalic-webfont.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibolditalic-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibolditalic-webfont.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSans-bold'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Bold-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Bold-webfont.eot') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Bold-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Bold-webfont.ttf') format('truetype'); font-style: normal; } @font-face { font-family: 'OpenSans-italic'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Italic-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Italic-webfont.eot') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Italic-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/OpenSans-Italic-webfont.ttf') format('truetype'); font-style: normal; } @font-face { font-family: 'open_sanslight'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-light-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-light-webfont.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-light-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-light-webfont.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-light-webfont.svg#open_sanslight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-extrabold-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-extrabold-webfont.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-extrabold-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-extrabold-webfont.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-extrabold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-bolditalic-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-bolditalic-webfont.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-bolditalic-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-bolditalic-webfont.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/opensans-bolditalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } /* Sourcesanspro */ @font-face { font-family: 'sourcesanspro-regular'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-regular.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-regular.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-regular.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-regular.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-regular.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-regular.svg#sourcesanspro-regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sourcesanspro-semibold'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-semibold.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-semibold.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-semibold.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-semibold.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-semibold.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-semibold.svg#sourcesanspro-bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sourcesanspro-bold'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-bold.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-bold.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-bold.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-bold.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-bold.svg#sourcesanspro-bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sourcesanspro-boldit'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-boldit.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-boldit.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-boldit.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-boldit.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-boldit.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-boldit.svg#sourcesanspro-bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sourcesanspro-light'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-light.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-light.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-light.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-light.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-light.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-light.svg#sourcesanspro-light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sourcesanspro-lightitalic'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-lightitalic.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-lightitalic.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-lightitalic.woff2') format('woff2'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-lightitalic.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-lightitalic.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/sourcesanspro-lightitalic.svg#sourcesanspro-lightitalic') format('svg'); font-weight: normal; font-style: normal; } /* Dancing Script */ @font-face { font-family: 'Dancing Script'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/dancingscript-regular.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/dancingscript-regular.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/dancingscript-regular.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/dancingscript-regular.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/dancingscript-regular.svg#dancingscript') format('svg'); } /* texgyreadventor */ @font-face { font-family: 'texgyreadventor'; src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/texgyreadventor-regular-webfont.eot'); src: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/texgyreadventor-regular-webfont.woff') format('woff'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/texgyreadventor-regular-webfont.ttf') format('truetype'), url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/fonts/texgyreadventor-regular-webfont.svg#texgyreadventor') format('svg'); font-weight: normal; font-style: normal; } .sourcesanspro-semibold { font-family: 'sourcesanspro-semibold'; } /* HN */ body h2, body .h2 { font-size: 22px; } body h3, body .h3-style{ font-size: 18px; } body h4{ font-size:inherit; } body p{ margin:0; } body h1, body .h1, body h2, body .h2, body h3, body .h3, body h4, body .h4, body h5, body .h5, body h6, body .h6{ margin-bottom: 0; margin-top: 0; } body .radio label, body .checkbox label{ min-height:inherit } body .radio, body .checkbox{ margin-top:0; } /* fin Typographie */ /*------------------------------------*\ $GLOBAL CLASSES \*------------------------------------*/ /* Clearfix */ .clear { clear:both; } /* Floats */ .right{ float: right; padding: 0 0 1em 1em; } .right-search{ float: right; padding: 0 0 1em 0; } .left{ float: left; padding: 0 1em 1em 0; } /* Text */ .text-through{ text-decoration:line-through; } .text-underline{ text-decoration:underline; } /* Text-Align */ .align-right, .align-right p{ text-align: right; } .align-center, .align-center p{ text-align: center; } .align-left, .align-left p{ text-align: left; } .align-justify{ text-align: justify; } /* Generals margins */ .m-top-10{ margin-top:10px!important; } .m-top-15{ margin-top:15px!important; } .m-top-20{ margin-top:20px!important; } .m-top-25{ margin-top:25px!important; } @media only screen and (min-width: 1024px){ .m-top-md-30{ margin-top:30px!important; } } .m-top-30{ margin-top:30px!important; } .m-top-35{ margin-top:35px!important; } .m-top-40{ margin-top:40px!important; } .m-top-45{ margin-top:45px!important; } .m-top-50{ margin-top:50px!important; } .m-top-55{ margin-top:55px!important; } .m-top-65{ margin-top:65px!important; } .m-bottom-0{ margin-bottom:0!important; } .m-bottom-10{ margin-bottom:10px!important; } .m-bottom-15{ margin-bottom:15px!important; } .m-bottom-20{ margin-bottom:20px!important; } .m-bottom-25{ margin-bottom:25px!important; } .m-bottom-30{ margin-bottom:30px!important; } .m-bottom-40{ margin-bottom:40px!important; } .m-bottom-45{ margin-bottom:45px!important; } .m-bottom-50{ margin-bottom:50px!important; } .m-bottom-60{ margin-bottom:60px!important; } .no-margin-right{ margin-right:0px!important; } /* Generals paddings */ .no-padding{ padding:0!important; } .no-padding-left{ padding-left:0!important; } .no-padding-right{ padding-right:0!important; } @media (min-width: 1024px) { .no-padding-right-lg{ padding-right:0!important; } .no-padding-left-lg{ padding-left:0!important; } } .padding-bottom-60{ padding-bottom:60px!important; } div[role="main"] { padding-bottom: 50px; } /* Template 100% */ .width-cent-pourcent .col1-layout, .width-cent-pourcent .col-main, .width-cent-pourcent div[role=main], .univers-calendrier.category-folded [role="main"], .boutique-full-screen [role="main"]{ width: 100%; max-width: inherit; padding:0; } /* Effets images */ .opacity-7:hover{ filter: alpha(opacity=70); opacity: 0.7; } /* hide selon spécifs width */ @media (min-width: 1025px) and (max-width:1200px){ .hide-specif-tablet{ display:none; } } /*------------------------------------*\ $BREADCRUMBS \*------------------------------------*/ #breadcrumbs-container .breadcrumbs ul{ padding:10px 0; } .breadcrumbs li { color: #616060; float: none; font-family: 'Museo-sans-500'; font-size: 14px; } .breadcrumbs .home a { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/breadcrumbs.png"); background-position: left 4px; background-repeat: no-repeat; font-size: 0; height: 21px; width: 15px; } .breadcrumbs li a { color: #ababab; float: left; font-family: 'Museo-sans-500'; font-size: 14px; text-decoration: none; } .breadcrumbs li span { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/puce-orange.png"); background-position: center 9px; background-repeat: no-repeat; height: 20px; } .breadcrumbs li span { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/breadcrumbs.png"); background-position: left -14px; background-repeat: no-repeat; display: block; float: left; font-size: 0; height: 15px; margin: 0 8px; width: 7px; } .logo { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/logo-home-charte_2015.png') no-repeat scroll center transparent; width: 182px; height: 100px; display: block; text-indent: -5000px; } /* Persotool */ .fil-ariane-persotool ul{ display: table; margin:auto; } /* checkout/cart/packaging */ .fil-ariane-persotool ul > li { float: left; height: 30px; font-family: 'Museo-sans-500'; color: #616060; font-size: 20px; } @media only screen and (max-width:1200px) { .fil-ariane-persotool ul > li { font-size: 18px; } } .fil-ariane-persotool ul > li.perso, .fil-ariane-persotool ul > li.current { color: #1e82b0; } .fil-ariane-persotool ul > li.fleche { width: 16px; margin: 0 22px; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/persotool/fleche-fil-ariane-persotool.png"); background-repeat: no-repeat; background-position: left 6px; } @media only screen and (max-width:1200px) { .fil-ariane-persotool ul > li.fleche { margin: 0 16px; } } .fil-ariane-persotool .line-dotted-header { border-top: 1px dotted #ADAAA1; margin: 10px auto 10px; width: 90%; } /* fin checkout/cart/packaging */ /*------------------------------------*\ $NAVIGATION \*------------------------------------*/ /*** Menu de gauche ***/ .col2-left-layout #nav-left{ border: 2px solid #eaeaea; background-color: #fefcf7; margin-bottom:10px; } .col-left h2 { display: none; } #nav-left a { font-family: 'Museo-sans-500'; color: #616060; font-size:14px; line-height: 20px; text-decoration: none; } #nav-left li.level0 { margin-bottom: 15px; display: none; } #nav-left li.level0.active { margin-bottom: 15px; display: block; } #cms-nav li .separator-cat, #nav-left li .separator-cat { color: #605f5f; height: 21px; width: 195px; margin: 10px auto 10px; font-family: 'Museo-sans-500-italic'; text-transform: none; font-size: 15px; padding: 0; text-align: center; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-entete-col-sous-menu.png"); background-color: #f8f4e6; background-position: 4px 18px; -webkit-border-radius: 3px; border-radius: 3px; } #nav-left li .separator-catid-1487 { font-size: 14px; } #nav-left li .separator-catid-1518 { font-size: 13px; width: 210px; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-grise-separator-menu-gauche.png"), url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-grise-separator-menu-gauche.png"); background-repeat: no-repeat; background-position: 3px 7px, 198px 7px; } #nav-left li.level0 ul.level0 { display: none; } #nav-left li.level0.active ul.level0 { display: block; } #nav-left li.level0 .level-top { display:block; text-decoration: none; text-align: left; margin: 0; padding-left: 19px; color: #605f5f; font-family: 'Museo-sans-500'; font-size:15px; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-droite-menu-gauche.png"); background-repeat: no-repeat; background-position: 8px 5px; } #nav-left li.level0.active .level-top, #nav-left li.cms-level0 h3, #nav-left li.cms-level0 h3 a { display:block;text-decoration: none; text-align: center; line-height: 24px; margin: 7px 8px 0; padding-left: 0; color: #1e82b0; font-family: 'Novecento-demibold'; font-size:17px; background-image: none; } #nav-left li.level0 .level-top:hover {text-decoration: underline;} #nav-left li.level1 ul.level1 { display: none; } #nav-left li.level1.active ul.level1 { display: block; } #nav-left ul.level0 li.level1 { margin: 12px 0; } #nav-left ul.level0 li > a, #nav-left .cms-level0 li > a{ display:block; padding: 0 0 0 20px; font: 15px/18px Museo-sans-500; color:#605f5f; text-decoration: none; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleches-menu-gauche.png"); background-position:-240px 0px; background-repeat:no-repeat; } #nav-left ul.level0 li > a:hover { display:block; padding: 0 0 0 20px; color:#7bc6b7; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-rose.png"), url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-color: #f8f4e6; background-repeat: no-repeat; background-position: 8px 5px, right top; } #nav-left ul.level0 li.current > a { display:block; padding: 0 0 0 20px; color:#7bc6b7; text-decoration: none; font-family: 'Museo-sans-500'; line-height: 18px; font-size: 15px; background-color: #f8f4e6; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-bas-menu-gauche.png"), url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-repeat: no-repeat; background-position: 5px 5px, right top; } #nav-left ul.level0 li.active > a:hover { color:#605f5f; background-color: transparent; } #nav-left ul.level0 li.current > a:hover { color:#7bc6b7; background-color: #f8f4e6; } #nav-left ul.level1 li.level2 > a { color: #616060; background-color: transparent; margin: 4px 0; padding: 0 0 0 37px; background-image: none; font-size:13px;} #nav-left ul.level1 li.level2.parent > a, #nav-left ul.level1 li.level3.parent > a{ font-weight: normal; color: #616060; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleches-menu-gauche.png") 0 bottom no-repeat; } #nav-left ul.level1 li.parent.active > a { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleches-menu-gauche.png") left bottom no-repeat; } #nav-left ul.level1 li > a { display:block; padding: 0 0 0 37px; color:#7bc6b7; text-decoration: none; font-family: 'Museo-sans-500'; line-height: 18px; font-size: 15px; background-color: #f8f4e6; } #nav-left ul.level1 li.parent > a { display:block; padding: 0 0 0 37px; color:#7bc6b7; font-weight: bold; text-decoration: none; font-family: 'Museo-sans-500'; line-height: 18px; font-size: 13px; background-color: #f8f4e6; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-bas-menu-gauche.png"), url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-repeat: no-repeat; background-position: 20px 5px, right top; } #nav-left ul.level1 li.parent.active.current > a { color: #7bc6b7; background-color: #F8F4E6; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-bas-menu-gauche.png"), url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-repeat: no-repeat; background-position: 20px 5px, right top; } #nav-left ul.level1 li.active > a { color: #616060; background-image: none; background-repeat: no-repeat; background-position: 20px -64px; } #nav-left ul.level1 li > a:hover { color: #7bc6b7; background-color: #F8F4E6; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-repeat: no-repeat; background-position: right top; } #nav-left ul.level1 li.active.current > a { color: #7bc6b7; background-color: #F8F4E6; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-repeat: no-repeat; background-position: right top; } #nav-left li.level2 ul { display: none; } #nav-left li.level2.active ul { display: block; } #nav-left li.level2.active > a { margin-left: 0; } #nav-left ul.level2 li.level3 > a { color: #616060; margin-left: 47px; padding: 0; background-image: none; background-color: transparent; font-size: 13px; } #nav-left ul.level2 li.active > a { display:block; margin: 0; padding: 0 0 0 47px; color:#7bc6b7; font-weight: normal; text-decoration: none; font-family: 'Museo-sans-500'; line-height: 18px; font-size: 13px; background-color: #f8f4e6; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-repeat: no-repeat; background-position: right top; } #nav-left ul.level0 li > a > span { display: inline-block; padding-right: 15px;} #nav-left ul.level2 li.level3.parent > a { font-weight: normal; padding-left: 10px; margin-left: 37px; background-position: -22px bottom; } #nav-left ul.level3 li.level4.parent > a { font-weight: normal;} #nav-left ul.level2 li.level3.active > a { background-position: -225px bottom; padding-left: 50px; padding-left: 47px; margin-left: 0;} #nav-left ul.level2 li.parent.active.current > a { background-position: 35px 5px, right top; } #nav-left ul.level3 li.level4 > a { color: #616060; margin-left: 67px; padding: 0; background-image: none; background-color: transparent; font-size: 13px; } #nav-left ul.level4 li.level5 > a { color: #616060; margin-left: 87px; padding: 0; background-image: none; background-color: transparent; font-size: 13px; } #nav-left ul.level4 li.level5.active > a { padding-left: 50px; padding-left: 87px; margin-left: 0;} #nav-left ul.level3 li.level4.active > a { display:block; margin: 0; padding: 0 0 0 67px; color:#7bc6b7; font-weight: normal; text-decoration: none; font-family: 'Museo-sans-500'; line-height: 18px; font-size: 13px; background-color: #f8f4e6; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-repeat: no-repeat; background-position: right top; } #nav-left ul li.active > a, #nav-left ul.level0 li.active > a, #nav-left ul li.active > a:hover, #nav-left ul.level0 li.active > a:hover{ color:#7bc6b7; } #nav-left ul.level3 li.level4.parent > a { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleches-menu-gauche.png") no-repeat; background-position: -196px 0; background-repeat: no-repeat; padding: 0 0 0 67px; margin-left:0 } #nav-left ul.level3 li.level4.parent.active > a{ background-position:-201px -1px, right top; } #nav-left ul.level3 li.level4.parent > a{ background-position: 39px -1px, right top; } #nav-left ul.level3 li.level4.active.parent.current > a{ background-position: 46px 5px, right top; } #nav-left .cms-level0 h3{ background-color:#fff; border-radius:2px; box-shadow:0 7px 2px -7px #ecebe9, 0 -7px 2px -7px #ecebe9 } /* Pour la vue mobile seulement */ @media (max-width: 767px) { #nav-left li.level0.active.parent li.level1.parent > a:first-child span::after { background-image: none; } #nav-left li.level0.parent > a:first-child span::after, #nav-left li.level1.active.parent > a:first-child span::after { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/nav-cat/arrow-cat-rose.png') no-repeat right center transparent !important; content: " "; width: 20px; height: 25px; display: inline-block; vertical-align: middle; background-size: 70% auto !important; } .atelier-mariage #nav-left li.level1.parent > a:first-child span::after { display: none; } } /* Menu sidebar cms page */ /** Ne pas Effacer ! (prevision de la suppression de "general.css" **/ /*.l-sidebar .encart-promo-sidebar{ border: 2px solid #eaeaea; background-color: #fefcf7; }*/ .cms-page-view .col2-left-layout .l-sidebar{ width:25%; max-width: 297px; } .cms-page-view .col2-left-layout .l-main{ width:75%; } #nav-left ul.level0 li.level1 { margin: 12px 0; } .col2-left-layout .l-sidebar ul.level0 li > a, .col2-left-layout .l-sidebar ul.level1 li > a, .col2-left-layout .l-sidebar ul.level1 li > a:hover{ padding: 0 0 0 20px; font: 15px/18px Museo-sans-500; text-decoration: none; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleches-menu-gauche.png") 0 0 no-repeat; } .col2-left-layout .l-sidebar ul.level1 li.level2 > a { color: #616060; background-color: transparent; margin: 4px 0; background-image: none; font-size: 13px; } ul.level0 li.current > a { display: block; } .col2-left-layout .l-sidebar li.level0.active .level-top, .col2-left-layout .l-sidebar li.level0 .level-top{ display: block; text-align: center; line-height: 25px; margin: 7px 8px 0; background-color: #f8f4e6; color: #1e82b0; font-family: 'Novecento-demibold'; font-size: 17px; background-image: none; } /* Page CMS > Nav Left */ #cms-grouplist ul li.cms-level0 .level-top { color: #5d7e8d !important; } #cms-grouplist ul .cms-level0 li > a > span { display: inline-block; padding-right: 15px; line-height: 16px; } #cms-grouplist ul ul.cms-level1 li > a { display:block; padding: 0 0 0 20px; font: 15px/18px Museo-sans-500; color:#605f5f; text-decoration: none; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleches-menu-gauche.png"); background-position:-240px 0px; background-repeat:no-repeat; } #cms-grouplist ul li.active > a, #cms-grouplist ul.cms-level0 li.active > a { color: #7bc6b7 !important; } #cms-grouplist ul.cms-level1 li > a:hover { display:block; padding: 0 0 0 20px; color:#7bc6b7; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-rose.png"), url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-color: #f8f4e6; background-repeat: no-repeat; background-position: 8px 5px, right top; } #cms-grouplist ul.cms-level1 li.active > a { background-color: #f8f4e6; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fleche-bas-menu-gauche.png"), url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/fond-categorie-en-cours.png"); background-position: 5px 5px, right top; } /* Fin Page CMS > Nav Left */ /* fin NAVIGATION */ /*------------------------------------*\ $MON COMTPE \*------------------------------------*/ body .my-account .col-1, body .my-account .col-2 { width: 50%; margin: 0; } body .my-account .account-history .col-left{ width: 25%; } body .my-account .account-history .col-right{ width: 75%; } @media only screen and (max-width: 1200px){ body .my-account .contact-infos .box-content .buttons-set a { margin-top:5px; } } body .my-account .account-history ul, body .my-account .account-history .col-left, body .my-account .account-history .col-right{ max-width: 100%; text-align: center; } @media only screen and (max-width: 767px){ body .my-account #account-logout{ top:-20px; } body .my-account .contact-infos { height:inherit; } body .my-account .col-1 { width: 100%; margin-bottom: 15px; } body .my-account .account-address { background-image: none; } body .my-account .account-address .box-content { display: inline-table; } body .my-account .col-1, body .my-account .col-2, body .customer-address-index .my-account .col-1, body .customer-address-index .my-account .col-2 { width: 100%; } body .my-account #form-validate { margin: 0; } body .my-account .fieldset { width: 100%; } body.customer-account-edit .my-account label, body.customer-address-form .my-account label { width:30%; font-size:12px; } body.customer-account-edit .my-account .input-box, body.customer-address-form .my-account .input-box { width: 50%; } body.customer-account-edit .my-account .field input, body.customer-address-form .my-account .field input, body.customer-address-form .my-account select { width: 100%; } body.customer-account-edit .my-account .control { margin-left: 0; width: 100%; } body.customer-account-edit .my-account .control input[type="checkbox"] { margin-left: 25%; margin-right:0; float: left; } body.customer-account-edit .my-account .control label { float:left; width: 70%; } body.customer-account-edit .my-account .button-submit { margin-left: 142px; } body .my-account .validation-advice { width: 100%; } body .my-account .account-edit-content { width: 100%; } body .my-account .notice-link{ height: inherit; line-height: 20px !important; } body .my-account .box-account .box-head a{ top: 20px; } body .my-account .tableau-commandes{ width: 100%; } body .my-account #my-orders-table th, body .my-account #my-orders-table td, body .my-account #my-orders-table a { font-size: 7px; } body .my-account .account-history, body .my-account .account-history ul, body .my-account .account-history .col-left, body .my-account .account-history .col-right{ width: 100%; padding: 0; text-align: center; } body .my-account .account-subscription .line-checkbox > label { display: block; text-align: justify; } body .my-account .account-subscription .line-checkbox > label > small { margin-left: 0; } body.customer-account .block-account { margin-top: 30px; } body .success-msg span { font-size:10px; } } .my-account #form-validate { margin-top: 15px; } .my-account .account-subscription .line-checkbox { margin: 6px 0; float:left; } .my-account .account-subscription .line-checkbox > label { line-height: 20px; } .my-account .account-subscription .line-checkbox > label > small { font-size: 10px; font-style: italic; margin-left: 40px; float:left; color: #1E82B0; } .my-account .account-subscription .box-content { margin-top:0; } .newsletter-manage-index .my-account .back-button-set { margin: 15px 0 30px 0 !important; } .my-account .contact-infos .box-content .buttons-set a { position: static; display: inline-block; margin: 5px 0; } .my-account .col-1 address .button { left: 13%; right: auto; } .my-account .col-2 address .button { left: 16%; right: auto; } @media only screen and (max-width:1200px) { .my-account .col-2 address .button { left: 11%; } } @media only screen and (max-width: 1024px){ body.customer-account .l-main { padding:0 10px; } body .l-sidebar .block-account { width: 100%; margin-left:auto; margin-right:auto; } } .genpop.cgu .genpop-content { padding: 20px; } .catalog-category-view .cat-invit .listing-cat > a:first-child { background-image: none; } /* Pop in CGU */ .genpop.cgu { border: 2px solid #4b9bc0; border-radius: 10px; position: relative; text-align: left; height: 604px; } @media (min-width: 768px){ .genpop.cgu{ width: 615px; } } .genpop.cgu .genpop-head { background-color: #f9f6eb; border-top-left-radius: 10px; border-top-right-radius: 10px; } @media (min-width: 767px){ .genpop.cgu .genpop-head{ height: 40px; } .genpop.cgu .genpop-head h3{ text-align: center; } } .genpop.cgu .genpop-content { background-color: #ffffff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: 560px; overflow: auto; } .genpop.cgu .genpop-head h3 { color: #616060; font: 22px museo-sans-500; padding-top: 7px; margin-top:0; } .genpop.cgu .genpop-head .auto-close { color: #616060; font: 15px museo-sans-500; position: absolute; right: 5px; text-decoration: none; top: 5px; opacity:inherit; } /* oubli mot de passe */ .customer-account-forgotpassword h1, .shipping-tracking-popup h1 { border-bottom: 1px dotted lightgray; color: #1e82b0; font: 28px museo-sans-500; margin: 10px 0 20px 25px; padding-bottom: 10px; } .customer-account-forgotpassword .col-main, .shipping-tracking-popup { color: #616060; font: 14px/18px OpenSans; text-align: justify; } .customer-account-forgotpassword .page-content { padding-left: 20px; } .customer-account-forgotpassword h2, .shipping-tracking-popup h2 { color: #1e82b0; font: 20px museo-sans-500; padding-bottom: 10px; } .customer-account-forgotpassword .form-list { margin: 15px 0; } .customer-account-forgotpassword .input-text.required-entry.validate-email { border: 1px solid lightgray; height: 25px; margin-top: 5px; width: 300px; } .customer-account-forgotpassword .button { margin-top: 15px; } .customer-account-forgotpassword #advice-required-entry-email_address { color: red; } .customer-account-forgotpassword .back-link { color: #1e82b0; } .customer-account-forgotpassword .account-login { padding: 30px; } /* fin oubli mot de passe */ /*------------------------------------*\ $NOUVEL OUTIL \*------------------------------------*/ body.marketalbum-fullscreen-flash { height: 100%; margin: 0; overflow: hidden; padding: 0; text-align: center; } body.marketalbum-fullscreen-flash > div { height: 100%; margin: 0 auto; width: 100%; } /*------------------------------------*\ $FOOTER \*------------------------------------*/ .tracker-tags { display: none; } div[role="main"]{ padding-bottom:50px; } .footer-flat-wrapper .reass { background-color: #f3f1f1; border-top: 1px solid #e3e2e2; color: #434343; font-family: "opensans"; font-size: 14px; padding: 30px 0; } .footer-flat-wrapper .reass li { font-size:14px; } @media (max-width: 1200px) and (min-width: 768px) { .footer-flat-wrapper .reass li { font-size:14px; } } .footer-flat-wrapper .reseaux-sociaux { background-color: #4ca0b3; padding: 12px 0; } .footer-flat-wrapper .reseaux-sociaux a { color:white; font-family: "opensans-bold"; font-size:14px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .footer-flat-wrapper .reass .js-rs { color: #4ca0b3; font-family: "opensans-bold"; cursor: pointer; position:relative; } .footer-flat-wrapper .reass .js-rs.active::after { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/arrow-down-rs.png"); bottom: -38px; content: ""; height: 9px; left: 44%; position: absolute; width: 21px; } .footer-flat-wrapper .reass .link-communaute:hover { opacity: 0.8; filter: alpha(opacity=80); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .footer-flat-wrapper .reseaux-sociaux a:hover, .footer-flat-wrapper .content-inner ul li a:hover, .footer-flat-wrapper .lien-avis-verifies:hover .logo-avis-verifes > span, .footer-flat-wrapper .catalogues li:hover { opacity:0.7; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .footer-flat-wrapper .footer-flat-content { background-color:#3b3b3b; border-top:1px solid #252525; padding:55px 0; color:#b4b3b3; } .footer-sprite { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/footer-sprite.png"); background-repeat: no-repeat; display: block; } .footer-sprite-blog { width: 23px; height: 22px; background-position: -5px -5px; } .footer-sprite-fab-fr { width: 24px; height: 26px; background-position: -5px -37px; } .footer-sprite-facebook { width: 12px; height: 24px; background-position: -5px -73px; } .footer-sprite-g-plus { width: 22px; height: 21px; background-position: -5px -107px; } .footer-sprite-hellocoton { width: 26px; height: 25px; background-position: -5px -138px; } .footer-sprite-paiement-secure { width: 17px; height: 23px; background-position: -5px -173px; } .footer-sprite-pinterest { width: 21px; height: 26px; background-position: -5px -206px; } .footer-sprite-rs { width: 23px; height: 26px; background-position: -5px -242px; } .footer-sprite-tarif { width: 18px; height: 19px; background-position: -5px -274px; } .footer-sprite-twitter { width: 27px; height: 22px; background-position: -5px -303px; } .footer-sprite-yt { width: 24px; height: 26px; background-position: -5px -335px; } .footer-flat-wrapper .reass .list-inline i, .footer-flat-wrapper .reseaux-sociaux .list-inline i { display: inline-block; margin-right: 8px; vertical-align: middle; } .footer-flat-wrapper .reass .js-rs i { margin-right:0; margin-left:8px; } .footer-flat-wrapper .reseaux-sociaux .list-inline li { margin:0 25px; } .footer-flat-wrapper .content-inner { margin:0 auto; display: inline-block; } .footer-flat-wrapper .content-inner ul { margin-bottom:30px; } .footer-flat-wrapper .content-inner li { line-height:24px; } .footer-flat-wrapper .content-inner .column ul:last-child { margin-bottom:0; } .footer-flat-wrapper .content-inner ul .title a, .footer-flat-wrapper .footer-titles, .footer-flat-wrapper .logo-avis-verifes > span, .footer-flat-wrapper .catalogues li.title { font-family:"novecento-demibold"; font-size:17px; color:white; margin-bottom:10px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .footer-flat-wrapper .content-inner ul .title { margin-bottom:7px; } .footer-flat-wrapper .content-inner ul li a, .footer-flat-wrapper .catalogues li { font-family:"open_sanssemibold"; font-size:14px; color:#b4b3b3; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .footer-flat-website { background-color: #292929; color: #b4b3b3; display: inline-block; padding: 20px 0; width: 100%; font-family: 'open_sanssemibold'; font-size:14px; } .footer-flat-website a { color: #b4b3b3; font-family: 'opensans-bold'; } .footer-flat-website a:hover { color: #b4b3b3; opacity:0.7; } i.footer-logo-websites { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/mini-logo-planet.png"); display: inline-block; height: 54px; margin-right: 20px; vertical-align: middle; width: 47px; } /* Sprite */ .footer-paiement { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/moyen-paiement.png"); background-repeat: no-repeat; display: block; } .footer-paiement-paiement-cheque { width: 57px; height: 34px; background-position: -10px -10px; } .footer-paiement-paiement-mastetrcard { width: 52px; height: 34px; background-position: -10px -64px; } .footer-paiement-paiement-paypal { width: 53px; height: 34px; background-position: -10px -118px; } .footer-paiement-paiement-visa { width: 53px; height: 34px; background-position: -10px -172px; } .footer-paiement-paiement-afterpay{ background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/afterpay.png"); width: 52px; height: 34px; } /* fin sprite */ /** Fix footer **/ @media (min-width:600px) and (max-width: 1024px) { .footer-flat-wrapper .hidden-sm { display:none !important; } .footer-flat-wrapper .visible-sm { display:block !important; } } @media only screen and (max-width: 1024px) { .footer-flat-wrapper .reass, .footer-flat-wrapper .reass > ul { padding: 0; } .footer-flat-wrapper .reass ul > li { border-bottom: 1px solid #dcdbdb; min-height: 50px; padding: 13px 0 0; } .footer-flat-wrapper .content-inner li { display:none; } .footer-flat-wrapper .content-inner li.title a, .footer-flat-wrapper .catalogues .title { font-size:14px !important; height: 52px; } .footer-flat-wrapper .content-inner li.title { display: block; float: left; width: 50%; background-color: #292929; margin: 0; line-height: 50px; text-align: center; border-bottom:1px solid #707070; border-left:1px solid #707070; } .footer-flat-wrapper .content-inner .column { height: 0 !important; margin-left: -1px; min-height: 0 !important; } .footer-flat-wrapper .reass .js-rs.active::after { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/arrow-down-rs.png"); bottom: -9px; content: ""; height: 9px; left: 44%; position: absolute; width: 21px; } .footer-flat-wrapper .reseaux-sociaux ul li { display:block; float:left; width:50%; margin:10px 0 !important; } .footer-flat-wrapper .footer-flat-content, .footer-flat-wrapper .footer-flat-content .content-inner, .footer-flat-wrapper .footer-flat-content .column { padding:0 !important; width:100%; display:block; } .footer-flat-content ul { margin-bottom: 0 !important; } .footer-flat-content .content-inner .col-sm-3 { width:auto !important; float:none; } .infos-supp span { line-height: 50px; display: block; background-color: #3b3b3b; color: white; border-bottom: 1px solid #707070; font-family: 'novecento-demibold'; position: relative; } .infos-supp span.js-btn-liens-footer::after { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/fleche-down-footer.jpg"); content: ""; height: 7px; margin-left: 7px; position: absolute; top: 20px; width: 12px; } .infos-supp .picto-paiement { border: none; padding:0; display:inline-block; } .infos-supp .inner-content li { background-color:#4c4c4c; } .infos-supp .inner-content li a { padding: 15px 0; display:block; color:white; font-family: 'opensans'; } i.footer-logo-websites { background-size: 100% auto; display: block; height: 33px; margin: 0 auto 10px; width: 29px; } .footer-flat-website .capital, .footer-flat-website .footer-copyright, .footer-flat-website .links, .footer-flat-website .tel { display:block; } .footer-flat-website .hidden-sm { display: none; } } .picto-paiement i { display:inline-block; vertical-align: middle; margin:0 3px; -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .picto-paiement i:hover { -webkit-filter: grayscale(0); -webkit-filter: grayscale(0%); filter: grayscale(00%); filter: none; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .picto-paiement { margin-left:10px; } .picto-paiement.desktop { margin:-10px 0 0 0; } /*------------------------------------*\ $FORMULAIRES \*------------------------------------*/ /* .customer-account-create input[type=text], .customer-account-create input[type=password], .customer-account-login .section-content-email-form input[type=text], .customer-account-login .section-content-email-form input[type=password]{ height:28px; -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); } input[type=text], input[type=search], input[type=url], input[type=number], textarea { -webkit-appearance: none; } */ form ol, form ul { list-style: none; margin-left: 0; } fieldset { border: 0; padding: 0; margin: 0; } label { display: block; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0 1px 0; } input[type="text"], input[type="password"], select, textarea { width: 100%; border: 1px solid #949494; padding: 0 10px; font: 16px/26px Museo-sans-500; border-radius:0; } /* Gestion des erreurs Altics */ .alticsform .js-info.err, .customer-account-login .js-info.err, .onestepcheckout-threecolumns .js-info.err, .onestepcheckout-error, #discount-coupon-form .validation-advice, .block-subscription .validation-advice { display: inline-block; position: absolute; margin-top: -47px; padding: 2px 8px; font: 12px/14px Museo-sans-500; color: white; -webkit-border-radius: 5px; border-radius: 5px; background: #f10202; cursor: default; } .alticsform .js-info.err:after, .alticsform .js-info.err:before, .customer-account-login .js-info.err:after, .onestepcheckout-error:after, .onestepcheckout-threecolumns .js-info.err:after, .onestepcheckout-threecolumns .js-info.err:before, #discount-coupon-form .validation-advice:after, .block-subscription .validation-advice:after { content: '.'; display: block; position: absolute; width: 20px; height: 9px; margin-left: 16px; font-size: 0; color: transparent; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/customer/fleche-required-2.png") no-repeat; clear: both; cursor: default; } .alticsform .js-info.err:before, .onestepcheckout-threecolumns .js-info.err:before { display: none; margin: -11px 0 0 16px; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/customer/fleche-required.png"); } .alticsform .js-info.err.nb-breaks-1, .customer-account-login .js-info.err.nb-breaks-1, .onestepcheckout-threecolumns .js-info.err.nb-breaks-1 { margin-top: -61px; } .customer-account-login .mdp .input-zone .js-info.err { left: 0; top: 20px; width: auto; } .alticsform .js-info.valid, .account-create-general .js-info.valid, #productsamplerequest-form .js-info.valid, #catalogrequest-form .js-info.valid { position: absolute; width: 21px; height: 19px; margin: -24px 0 0 256px; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/customer/valid.png") no-repeat; } #productsamplerequest-form .js-info.valid, #catalogrequest-form .js-info.valid { margin: 3px 85px 0 0; right: 0; } @media only screen and (max-width:1200px) { #productsamplerequest-form .js-info.valid, #catalogrequest-form .js-info.valid { margin: 3px 25px 0 0; } #checkout_parameters_wrapper .container{ width:100%; } /*** Styles généraux des formulaires ***/ /* Inputs */ .alticsform label, .onestepcheckout-index-index #onestepcheckout-form .inputs label { font: 14px/1 Museo-sans-500; color: #616060; } .alticsform input[type=text], .alticsform input[type=password], .alticsform select, .onestepcheckout-index-index #onestepcheckout-form input[type=text], .onestepcheckout-index-index #onestepcheckout-form input[type=password], .onestepcheckout-index-index #onestepcheckout-form select, .customer-account-login .section-content-email-form input[type=text], .customer-account-login .section-content-email-form input[type=password], .customer-account-create .cform-rows .inputs input, #cart-account-login #login-form .content .form-list .input-text, .catalogrequest .section .inputs input, .productsamplerequest .section .inputs input{ height: 26px; padding: 0 10px; margin: 0; font: 16px/26px Museo-sans-500; color: #616060; border: 1px solid #949494; -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); background: white; } .catalogrequest .section .inputs select, .productsamplerequest .section .inputs select { height: 26px; padding: 0 0px; border: 1px solid #949494; margin: 0; font-size: 16px; font-family: Museo-sans-500, "Arial"; color: #616060; -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); width: 256px; } .alticsform select, .onestepcheckout-index-index #onestepcheckout-form select { padding: 0; } .alticsform input[type=text]:focus, .alticsform input[type=password]:focus, .alticsform select:focus, .onestepcheckout-index-index #onestepcheckout-form input[type=text]:focus, .onestepcheckout-index-index #onestepcheckout-form input[type=password]:focus, .onestepcheckout-index-index #onestepcheckout-form select:focus, .customer-account-login .section-content-email-form input[type=text]:focus, .customer-account-login .section-content-email-form input[type=password]:focus, .customer-account-create .cform-rows .inputs input:focus { outline: none; border-color: #4b9bc0; -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px 1px #7acdf3; box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px 1px #7acdf3; } .alticsform input[type=text]:disabled, .alticsform input[type=password]:disabled, .alticsform select:disabled, .customer-account-login .section-content-email-form input:disabled { background-color: #EBEBE4; } /*------------------------------------*\ $SPECIFIC FORMS \*------------------------------------*/ /* Search Form */ .search-field { padding-right: 3em; } .inline-form .search-submit { background: none; padding: 0.78em 1em; border: 0; border-left: 1px solid gray; color: gray; } /*------------------------------------*\ $TABLE \*------------------------------------*/ table { border: 0 none; border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: 100%; } } /*------------------------------------*\ $PRODUCTS GRID \*------------------------------------*/ .category-title h1 { color: #1e82b0; font-family: "Museo-sans-500"; font-size: 26px; margin-bottom: 5px; } .entete-page-category { border-bottom: 1px dotted #B2B2B2; padding:6px 0 10px 0; } .entete-page-category .title-description-category{ padding-right:0; padding-left: 0; } .category-products .products-grid .products-page > div .quickview, .category-products .products-grid .products-page > div .quick-view { position: relative; display: block; text-decoration: none; text-align:center; } .category-products .all_products { position: relative; width: 33%; float:left; margin-top:10px; } @media (max-width:600px) { .category-products .all_products { width: 100%; } .products-grid .products-page > div .quick-view > div, .products-grid .products-page > div .quick-view-mobile > div { height:250px !important; } .category-products .separateur-ligne-produit { display: none !important; } } .category-products #description_category, .category-products #reassurance_category{ float: left; padding: 0 8px; width: 232px; } .category-products .all_products img { cursor: pointer; } .product-name-clear { display: none; } .products-grid .product-infos { clear:both; color: #7A7A7A; font-size: 14px; padding-top: 5px; text-align: center; } .products-grid .pinfos-format { font-style: italic; } .products-grid .products-page.loading { display: block; } .products-grid .products-page.loading .products-page-loader { display: block; } .products-grid .infinite-scroll-page-sep { border-top: 1px solid #E0E0E0; color: #7A7A7A; margin: 30px 0 12px; padding-right: 28px; text-align: right; } .products-list li.item { border-bottom: 1px solid #DDDDDD; padding: 12px 10px; } .products-list li.item.last { border-bottom: 0 none; } .products-list .product-image { float: left; height: 135px; margin: 0 0 10px; width: 135px; } .products-list .product-shop { margin-left: 150px; } .products-list .product-name { font-size: 13px; font-weight: bold; margin: 0 0 5px; } .products-list .price-box { float: left; margin: 3px 13px 5px 0; } .products-list .availability { float: left; margin: 3px 0 0; } .products-list .desc { clear: both; line-height: 1.35; margin: 0 0 15px; padding: 6px 0 0; } .products-list .desc .link-learn { font-size: 11px; } .products-list .add-to-links { clear: both; } .products-list .add-to-links li { display: inline; } .products-list .add-to-links .separator { display: inline; margin: 0 2px; } /** Refonte reassurance *************************************************************************/ /* Sprite */ .sprite-new-reass { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-reassurance-pcfr.png"); background-repeat: no-repeat; display: block; } .footer-flat-wrapper .sprite-new-reass { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-reassurance-ppfr.png"); background-repeat: no-repeat; display: block; } .sprite-new-reass-enveloppes-offertes { background-position: -10px -10px; height: 15px; width: 21px; } .sprite-new-reass-fabrication-24h { background-position: -10px -45px; height: 21px; width: 21px; } .sprite-new-reass-fabrication-france { background-position: -10px -86px; height: 25px; width: 23px; } .sprite-new-reass-livraison-suivie { background-position: -10px -131px; height: 20px; width: 32px; } .sprite-new-reass-paiement-securise { background-position: -10px -171px; height: 23px; width: 16px; } .sprite-new-reass-tarifs-tout-compris { background-position: -10px -214px; height: 18px; width: 17px; } .header-flat-qualite { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/header-reass-pdt-qualite.png') no-repeat top left transparent; height:22px; width:23px; } /* Fin sprites */ /* Panier */ .reassurance-cart { margin: 15px 0 0 !important; width: 60%; } .reassurance-panier-1200 { text-align: center; width: 100%; } .encart-reass { border: 1px solid #dcdbdb; color: #434343; display: inline-block; float: none !important; font-family: OpenSans; font-size: 14px; height: 45px; line-height: 41px; margin-right: 15px; text-align: center; } .encart-reass i { display: inline-block; margin-right: 10px; vertical-align: middle !important; } @media (max-width: 1200px) { .reassurance-cart { width: auto !important; } .encart-reass { display: block; float: none !important; height: 50px; line-height: 47px; margin: 0 0 10px 0 !important; padding: 0 55px !important; width: 100% !important; } } @media (max-width: 767px) { .visible-xs.reassurance-cart { display: block !important; width: 100% !important; } .visible-xs.reassurance-cart .reassurance-panier-1200 { text-align: center; } .visible-xs.reassurance-cart .encart-reass { display: inline-block; margin: 0 auto !important; padding: 0 70px !important; width: auto !important; } .checkout-cart-index .footer-flat-wrapper .reass { margin-top: 15px; } .onestepcheckout-index-index .header-inner.container, .checkout-cart-index .header-inner.container{ padding:0; } } /* Fin panier */ /* Listing produit */ .reass-listing { margin: 30px 0; } .reass-listing > div > .encart-reass { width: 100%; } .reass-listing > div > .encart-reass > p { display: inline-block; text-align: left; vertical-align: middle; font-size: 12px; line-height: 16px; } .reass-listing > div > .encart-reass > p > span { font-size: 14px; } .category-non-carterie-fpaccessoires .fab-24, .cart-reass-carterie-scodix .fab-24 { display:none !important; } .category-non-carterie-fpaccessoires .fab-72, .cart-reass-carterie-scodix .fab-72 { display:inline-block !important; } @media (min-width: 1025px) { .reass-listing-wrapper.visible-sm.fixed, .reass-listing-wrapper.in-product.fixed { background: none repeat scroll 0 0 white; border-bottom: 2px solid #ebebeb; display: inline-block !important; left: 0; margin: 0; position: fixed; top: 0; width: 100%; z-index: 999; } .reass-listing-wrapper.fixed .reass-listing, .reass-listing-wrapper.in-product.fixed .reass-listing { margin: 10px auto; } } @media (max-width: 1200px) { .reass-listing-wrapper .reass-listing { width: 100%; } .reass-listing-wrapper .encart-reass { margin: 0 !important; padding: 0 !important; } } @media (max-width: 1024px) { .reass-listing-wrapper { width: 100%; } .reass-listing-wrapper > div > div { margin: 5px 0; } } @media (min-width:769px) and (max-width: 1024px) and (orientation: landscape) { .reass-listing-wrapper.visible-sm { display: inline-block !important; } } @media (max-width: 768px) { .reass-listing .col-sm-3 { display: inline-block; float: none; margin-bottom: 10px; } .reass-listing-wrapper .reass-listing { margin: 20px 0; text-align: center; } } @media (max-width: 450px) { .reass-listing-wrapper.visible-sm { display: none !important; } .reass-listing .col-sm-3 { width: 100%; } .reass-listing-wrapper .reass-listing { margin: 0; } .reass-listing-wrapper { margin: 0 !important; } } /* Fin listing produit */ /* Page catégorie */ .reass-listing-wrapper.in-product { clear: both; display: block; margin: 0 auto; } .reass-listing-wrapper.in-product .reass-listing { margin: 20px 0 0; text-align: center; } @media (max-width: 1024px) { .reass-listing-wrapper.in-product .reass-listing > div { width: 50%; } } @media (max-width: 1024px) { .reass-listing-wrapper.in-product .reass-listing { display: inline-block; width: 100%; } .reass-listing-wrapper.in-product .reass-listing > div { width: 25%; } .reass-listing-wrapper.in-product .reass-listing > div .encart-reass { margin: 5px 0 !important; padding: 0 !important; } } @media (max-width: 900px) { .reass-listing-wrapper.in-product .reass-listing > div { width: 49%; } } @media (max-width: 600px) { .reass-listing-wrapper.in-product { display: none; } } /* Fin page catégorie */ /** FIN Refonte reassurance *************************************************************************/ /** Ekomi dans le footer *************************************************************************/ .footer-flat-content .ekomi-wrapper { position: relative; } .footer-flat-content .logo-ekomi { margin-top:25px; } #eKomiSeal_default img { width:40px; height:auto; } #eKomiSeal_default { display: inline-block; } .footer-flat-content .ekomi-wrapper .ekomi-link { color: white; font-family: "novecento-demibold"; font-size: 17px; vertical-align: sub; transition: all 0.2s ease 0s; display:inline-block; margin-left:10px; } .arrow-up { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/ekomi/arrow-up.png"); height: 11px; left: 46%; position: absolute; bottom: -11px; width: 17px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } .wrapper-ekomi-widget { visibility: hidden; opacity: 0; position: absolute; z-index: 999; -moz-transition: all 300ms ease-in; -webkit-transition: all 300ms ease-in; -o-transition: all 300ms ease-in; transition: all 300ms ease-in; background:white; border:2px solid #dcdbdb; padding:5px; top:-160px; } .logo-ekomi:hover .wrapper-ekomi-widget { visibility: visible; opacity: 1; -moz-transition: all 300ms ease-in; -webkit-transition: all 300ms ease-in; -o-transition: all 300ms ease-in; transition: all 300ms ease-in; transition-delay:0.7s; } .ekomi-mobile a { color:white; } .ekomi-mobile a:hover { color:white; opacity: 0.8; } .ekomi-mobile a img { max-height:32px; width:auto; margin-right: 15px; } /** FIN - Ekomi dans le footer *************************************************************************/ /** Identification dans le header *************************************************************************/ .user-toolbox .show-my-account { width:295px !important; left:-132px !important; } .user-toolbox fieldset { float: none; margin: 0 auto; } .user-toolbox .show-my-account input { background-color: #f8f8f8; border-color: #dcdbdb; border-radius: 3px; color: #959595; height: 42px; margin-top: 12px; font-family: 'open_sanssemibold'; box-shadow: none !important; } #header-login-table > a { display: block; text-align: right; margin-top: 5px; } .show-my-account .bouton-flat { margin:10px 0 15px 0 !important; } .show-my-account .header-login-popup-contents-new { background-color: #f8f8f8; border-top: 1px solid #dcdbdb; height: 55px; line-height: 55px; } .show-my-account .popup-forgot-title-header { font-size: 14px; margin-top: 10px; padding: 0 14px; } .show-my-account .loading-ajax { height: 16px; margin: 20px; width: 16px; } .show-my-account .msg-info { float: none; font-size: 14px; margin-top: 8px; padding: 5px 5px 5px 10px; text-align: left; } .show-my-account .header-error { background-color: #fef7f8; border: 1px solid #c8081d; color: #c8081d; } .show-my-account input.error { color: #c8081d; } .show-my-account .header-success { background-color: #f1fffa; border: 1px solid #1eb580; color: #1eb580; } .show-my-account i { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/good-bad.png") no-repeat top left transparent; height:16px; width:16px; display: inline-block; vertical-align: middle; margin-right: 4px; margin-top:-3px; filter: grayscale(0) !important; } .show-my-account i.bad { background-position: bottom left; } .show-my-account ul { text-align: left; margin:20px 15px; } .show-my-account ul li a:hover { opacity: 0.8; } /** FIN - Identification dans le header *************************************************************************/ /** DEBUT - Module de paiement Sherlock *************************************************************************/ #payment_form_sherlocks > li > p { margin: 0 0 10px; } label.payment-label-sherlocks { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/checkout/payment/method/cb.png") 200px 5px no-repeat; } label.payment-label-paypal_standard { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/checkout/payment/method/paypal.png") 208px 9px no-repeat; } /** FIN - Module de paiement Sherlock *************************************************************************/ /** DEBUT amélio mea produit dans les cat *********************************************************************/ #mobile-price-objets{ color:#1E82B0; } #mobile-price-objets { display: block; clear: both; text-align: center; margin: 0; clear: both; padding-top: 10px; font-size: 28px; } @media only screen and (max-width: 768px) { .univers-objets .mea-description img { display: block; margin: auto; } } /** FIN amélio mea produit dans les cat ***********************************************************************/ /** DEBUT inté popup devis carte pro mobile *********************************************************************/ @media (max-width: 767px) { #quotation-request-form .col-left { display: none; } .popup-request-quotation-inner { width: 95% !important; } .quotation-popup-content .col-right { padding: 10px 20px; width: 100% !important; } .request-form #popuprequest-fields label, .request-form .input-box, .request-form .input-text { width: 100% !important; } .quotation-popup-content .ddd-papier li { width: 32% !important; } .quotation-popup-content .bloc li span { display: block; } .ddd-coins .title { float: none !important; } .request-form #popuprequest-fields .left, .request-form #popuprequest-fields .right { width: 100% !important; padding-left:0; padding-right:0; } #popuprequest-actions .buttons-set span { font-size: 5.2vw; background-position: right 7px; height: 100%; display: block; line-height: 36px; } #popuprequest-actions .form-note { font-size:10px; } #quotation-request-form .validation-advice { margin-left: -125px; margin-top: -18px; width:auto; } } /** FIN inté popup devis carte pro mobile *********************************************************************/ /** DEBUT PPV panier mobile ***********************************************************************************/ @media (max-width: 1024px) { .checkout-cart-index .lightbox-content { width: 100% !important; } } @media (max-width: 767px) { #carte-unique-lightbox .lightbox-loader, .checkout-cart-index #carte-unique-lightbox .lightbox-content, .carte-unique-product-lightbox .border, #cart-lightbox-product-info, .date-shipping-desc { width: 100% !important; padding:0 !important; } #carte-unique-lightbox .cform-rows { padding:0 !important; width:95%; margin:0 auto; } .cform-fieldset .label { width:100% !important; text-align: left !important; } #carte-unique-lightbox #cart-add-address .cform-fieldset .inputs { width:100% !important; } #carte-unique-lightbox #cart-add-address .cform-fieldset .inputs > label.radio { width:30% !important; } .cform-fieldset .recipient-detail { padding-top: 20px !important; font-size: 15px !important; padding-left: 10px !important; } #carte-unique-lightbox #lighbox-carteunique-header .container { font-size:13px !important; } #cart-lightbox-product-info { display: none !important; } #carte-unique-lightbox #cart-add-address { margin-top:20px !important; } .date-shipping-desc { width: 80% !important; text-align: center !important; } #cart-account-login #login-form .right-content { display: block !important; float: none !important; width: 100% !important; background: none !important; margin-top: 60px !important; margin-left: 0 !important; } #cart-account-login #login-form .content .form-list { margin: -10px 10px 20px 10px !important; float: none !important; } #cart-account-login #login-form .buttons-set { width: 95% !important; left: 10px !important; top: 210px !important; } #cart-account-login { height: 425px !important; } } /** FIN PPV panier mobile *************************************************************************************/ /** DEBUT Page recherche ***********************************************************************************/ .catalogsearch-result-index .note-msg{ padding:25px; } /** FIN Page recherche *************************************************************************************/ /** DEBUT Structure ***********************************************************************************/ @media only screen and (max-width: 1200px){ .lc, .header, #content-main-footer, [role="main"] { max-width: 980px; } } /** FIN Structure *************************************************************************************/ /** DEBUT Classes générales ***********************************************************************************/ .hover-img-90:hover{ opacity:0.9; filter: alpha(opacity=90); } .img-block-auto{ display:block; margin:auto; } /** FIN Classes générales *************************************************************************************/ /** DEBUT Images Icones ***********************************************************************************/ div.loading-ajax, div.loading-ajax-login { height: 50px; text-align: center; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/onestepcheckout/ajax-loader.gif"); background-repeat: no-repeat; background-position: center center; } /** Fin Images Icones ***********************************************************************************/ /** DEBUT PAGES (404, PANIER VIDE...) ***********************************************************************************/ /* Panier vide */ @media (max-width: 979px){ #cart-empty .access-account { background: none; min-height: 0; } } @media (min-width: 980px) { #content-text-access-account{ float:right; margin: 45px 25px 0; } } /* Fin panier vide */ /* Page Contact */ .field-attach-file{ clear:both } /* Fin page contact */ /** Page NoFlash **/ .page-noflash .main-container, .page-noflash .l-main{ width:100%; max-width:100%; text-align: center; } .page-noflash .header-noflash { height:113px; background:#f8f8f8; } .page-noflash .header-noflash > div { width:1200px; display:inline-block; position:relative; } .page-noflash .link-ui { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/boutique-noel-2014/grey-arrow.jpg") no-repeat scroll left 50% transparent; color: #606060; font-family: Museo-sans-500; font-size: 13px; height: 17px; left: 0px; line-height: 20px; padding-left: 18px; position: absolute; text-decoration: none; top: 10px; } .page-noflash .link-ui:hover { opacity:0.85; } /* Deplacement / reUse de la CSS packaging */ .entete-desc-product { border: 2px solid #f1f0f0; color: #616264; display: block; font-family: opensans; font-size: 14px; margin: 0 auto 45px; width: 1200px; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/packaging/picto-info.png") no-repeat scroll 1165px 9px transparent; text-align: left; } .entete-desc-product { margin-top:30px; } .packaging.block-content .packaging-perso div, .entete-desc-product div { display:inline-block; vertical-align: top; } .entete-desc-product .perso-thumbnail { display: inline-block; float: none; margin: 0; } .entete-desc-product .perso-thumbnail img { margin:10px 0 10px 20px; } .packaging.block-content .product-image { display: inline-block; height: auto; overflow: auto; width: auto; } .entete-desc-product .txt { margin-left: 40px; width: 78%; } .packaging.block-content .packaging-perso .title, .entete-desc-product .title { color: #616161; display: block; font-family: Novecento-demibold; font-size: 16px; margin:20px 0; } .packaging-perso .product-name, .entete-desc-product .product-name { float: left; margin-left: 20px; font-family: Novecento-demibold; } .entete-desc-product .product-name { font-family:inherit; } .packaging-perso .product-name .name { color: #2c78a1; } .packaging-perso .product-price, .entete-desc-product .product-price { color: #2c78a1; float: right; font-family: Novecento-demibold; font-size: 16px; } .packaging-perso .product-format { font-family: museo-sans-500-italic; } .packaging-perso .product-format, .packaging-perso .edit_instance { clear: both; display: block !important; margin-left: 45px; } .packaging-perso .edit_instance a { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/packaging/picto-crayon.jpg") no-repeat scroll right top transparent; color: #2c78a1; padding-right: 20px; text-decoration: none; } .packaging-perso .edit_instance a:hover { opacity: 0.85; } .packaging-perso .edit_instance a:active { color:#0c5e83; } /* End reUse */ .page-noflash .content-noflash p { color: #5a5a5a; font-family: open_sanslight; font-size: 35px; line-height: 43px; margin-bottom: 40px; } .content-noflash > img { display: block; margin: 0 auto 42px; } .page-noflash .bouton-flat { margin-bottom: 10px; } @media only screen and (max-width:1200px) { .page-noflash .entete-desc-product, .page-noflash .header-noflash > div { width: 980px; } } .page-noflash-tablette .entete-desc-product, .page-noflash-tablette .header-noflash > div { width:90%; } .page-noflash-tablette .entete-desc-product .txt { width: 70%; } .msg-siret.is-required .js-info.loading { position: absolute; z-index: 1; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/ajax-loader.gif"); background-size: 15px auto; width: 15px; height: 15px; background-repeat: no-repeat; font-size:0; } .account-create-general .msg-siret.is-required .js-info.loading { left: inherit; top: 10%; } /* creation compte */ .account-create-full-data .section ul li .label > label { color: #1e82b0; font-family: museo-sans-500; font-size: 15px; } body.customer-account-create .cform-children .input-wrapper.checkbox input[type="checkbox"] { width: inherit!important; margin-left: 0!important; } .field-cgu-confirm { clear: both; display: inline-block; float: left; height: 1px; overflow: hidden; width: 1px; } /* demande catalogue*/ .catalogrequest .buttons-set, .productsamplerequest .buttons-set{ text-align:center; padding-bottom: 25px; clear: both; } .marketingcatalogrequest-catalogrequest-register ul.messages li { background-image: none; } .marketingcatalogrequest-catalogrequest-register .error-msg span a { color: #FFFFFF; } .form-register-cat .form-advert .col-left-download-catalog, .form-register-cat .form-advert .catalogrequest.altics{ display: none; } .avec-form-identification .texte-rose { text-align: center !important; color: #e53360 !important; } .catalogrequest .section .inputs input, .productsamplerequest .section .inputs input, .productsamplerequest .section .inputs select { width: 255px; } .catalogrequest .section .inputs select, .productsamplerequest .section .inputs select { height: 26px; padding: 0 0px; border: 1px solid #949494; margin: 0; font-size: 16px; font-family: Museo-sans-500, "Arial"; color: #616060; -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); width: 256px; } .catalogrequest .cform-register-stuff .cgu .required > div, .productsamplerequest .cform-register-stuff .cgu .required > div { position: absolute; top: 36px; } #list-inline-links{ text-align: center; display: table; float: none; margin: auto; width: auto; } /* catalogue après connexion */ .form-logged-cat .form-advert .banniere-demande-catalogue { display: none; } .download-catalog .catalogrequest.altics { width: 60%; float: left; border-left: 2px solid #e8e8e8; } .download-catalog .col-left-download-catalog { float: left; width: 39%; text-align: center; } .download-catalog .form-advert .catalogrequest.altics { text-align: center; } .download-catalog .field div.label { width: 40% !important; } .download-catalog .catalogrequest.altics .section ul li label { font-size: 15px; } .download-catalog .field div.inputs { width: 60% !important; text-align: right; } .inputs .input-wrapper { margin: 0 !important; } .download-catalog .section ul li { float: none!important; clear:both; } .download-catalog .field.city { margin-top: 20px; } .download-catalog #catalogrequest-form .js-info.valid { margin-right: 0; } .download-catalog .col-left-download-catalog > p, .download-catalog .catalogrequest.altics > p { margin-top: 0; } .download-catalog .col-left-download-catalog > p, .download-catalog .catalogrequest.altics > p { color: #e95a7b; text-align: center; } .catalogrequest .extras.block{ display:block; } .catalogrequest .extras{ font-size: 13px; } @media (max-width: 767px){ .download-catalog .field div.label, .download-catalog .field div.inputs { width: 100% !important; } } /* fin demande catalogue */ /** FIN PAGES (404, PANIER VIDE...) *************************************************************************************/ /** HELPDESK *************************************************************************************/ #HD-messages .back a{ float:none; } /** FIN HELPDESK *************************************************************************************/ /** ONESTEPCHECKOUT *************************************************************************************/ .onestepcheckout-column-middle .inputs .input-wrapper { margin: 0 auto 8px !important; } @media (max-width:767px){ .checkout-onepage-success .page-content p.notice-link{ line-height:inherit!important } } @media (max-width:980px), (max-width:1024px) and (orientation:landscape) { #onestepcheckout-login-popup { max-width: 100%; } /* Checkout success */ .checkout-onepage-success .col-main { width: auto !important; padding: 0 15px; } .checkout-onepage-success .buttons-set{ text-align:center; } body.checkout-onepage-success .btn-right, body.checkout-onepage-success .btn-left{ float:none; } .checkout-onepage-success .btn-right{ margin-top:25px; } } .alticsform label, .onestepcheckout-index-index #onestepcheckout-form .inputs label { font: 14px/1 Museo-sans-500; color: #616060; } /** FIN ONESTEPCHECKOUT *************************************************************************************/ /** SLIDESHOW DESKTOP/MOBILE (BANNIERE DIFFERENTE SELON DEVICE) *************************************************************************************/ @media (max-width: 767px){ .catalog-category-view .market-slideshow.xs-image, .xs-image .market-slideshow { display: block!important; height: 100%!important; } } .ban300.xs-image, .ban300.xs-image .ban300{ height:100%!important; } .catalog-category-view .xs-image .market-slideshow{ margin-bottom:0px; } /** SLIDESHOW DESKTOP/MOBILE (BANNIERE DIFFERENTE SELON DEVICE) *************************************************************************************/ /* success screen */ .success-screen { height: 100%; left: 0; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/1px-opacity70.png") top left repeat transparent; position: fixed; top: 0; width: 100%; z-index: 100000; text-align: center; } .success-content { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-success-cart.png") no-repeat scroll center top transparent; color: white; display: inline-block; font-family: "novecento-demibold"; font-size: 42px; height: 170px; line-height: 290px; text-align: center; vertical-align: bottom; } /* success screen */ /** MESSAGES ERREURS *************************************************************************************/ .customer-account-create .error-msg ul li span a, .page-cms-inscription .error-msg ul li span a { text-decoration: underline; color: #FFFFFF; } .error-msg li, .success-msg li { text-align: center; } .error-msg span, .success-msg span { display: inline-block; font-family: 'museo-sans-500-italic'; font-size: 17px; padding-left: 35px; padding-right: 20px; margin:10px 0; background-position: 10px center; background-repeat: no-repeat; border-radius: 10px; color: #FFFFFF; } .error-msg span { background-color: #C26262; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/checkout/cart/erreur-panier.png"); } .success-msg span { background-color: #7BC6B7; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/checkout/cart/coche-ajout-produit-panier.png"); } /** fin MESSAGES ERREURS *************************************************************************************/ /*** NAV LEFT A PARTIR DE DESKTOP PETITE RESO ***/ @media (max-width:980px), (max-width:1024px) and (orientation:landscape) { .encart-promo-sidebar, .accroche-sous-menu { display:none; } body .l-main { float: none !important; width: 98% !important; display: block; margin: 0 auto; } .col2-left-layout .l-main, #content-breadcrumbs .breadcrumbs { float: none; } #nav-left { margin:0 auto; } #nav-left > li > a { display: none !important; } #nav-left li > ul > li:not(.active) { display:none; background:white; } #nav-left .level1 > ul li { display: block !important; } .col2-left-layout .l-sidebar, .customer-account .l-sidebar { background-color: white; border: none; float: none !important; margin-bottom: 10px; width: 100% !important; max-width:100% !important; } .col2-left-layout .l-sidebar #nav-left, #nav-left .cms-level0 h3 { border: none; background-color: inherit; box-shadow:none; } .col2-left-layout .l-sidebar #nav-left, #nav-left .cms-level0 h3 { background-color: inherit; } #nav-left li.level0.active { margin-bottom: 0; } #nav-left li.level0.active .level-top, #nav-left li.cms-level0 h3, #nav-left li.cms-level0 h3 a { margin-left: 0; } #nav-left ul.level0 li.level1 { margin: 0; text-align: center; } #nav-left .level0 ul.level1, #nav-left .level0.current ul.level0, #cms-grouplist .cms-level0.active ul.cms-level1 { background-color: white; display:none; padding: 5px 0; width:100%; } #nav-left .column, #cms-grouplist .column { border-right: 1px solid #cccccc; display: table-cell; width: 333px; vertical-align: top; } #nav-left .column:last-child { border:none; } #nav-left ul.level1 li.level2 > a, #nav-left ul.level0 li.level1 > a, #nav-left .level0.current .level1.parent a, #cms-grouplist .cms-level0.active li.cms-level1 .cms-link.active { font-size: 14px; margin: 0px 0; height: auto; line-height: 25px; background: none!important; text-align: left; border:none; } #nav-left li.level1.parent > ul.level1 { display:none; } #nav-left li.level1.parent > a:first-child, #nav-left li.level0.current > .level-top, #cms-grouplist .cms-level0.active > h3 > a, .customer-account .l-sidebar .block-account .page-title { background:#f7f7f7!important; font-size: 15px; text-transform: uppercase; font-family: 'Novecento-demibold'; width:100%; padding:0; text-align: center; display:inline-block; color:#e53360!important; } #nav-left li.level1.parent > a:first-child span, #nav-left li.level0.current > a:first-child span { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/nav-cat/arrow-cat-rose.png') no-repeat right 6px transparent; padding-right: 0px; display: inline-block; font-size: 13px; padding-right:20px } #nav-left li.level0.active { display: block; } #nav-left li.parent > a:first-child.open { border-bottom:none!important; } #nav-left .column > li { width: 99%; margin-left: 2px; } #nav-left .column > li.current a { background-image: none !important; color:#1e82b0 !important; background-color:transparent !important; } #nav-left .column > li.current { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/nav-cat/arrow-item-menu.png") no-repeat scroll 19px -32px #f7f7f7 !important; } #nav-left .column li:hover a { color:#1e82b0 !important; background-color:inherit !important; background-image:none !important; } #nav-left.fixed, #cms-grouplist.fixed { position: fixed; top:10px; left:2.5%; z-index: 9; } #nav-left ul.level2 li.level3 > a, #nav-left ul.level3 li.level4 > a{ color:#616060 !important; text-align: left; } #nav-left ul.level2 li.level3 > a:hover, #nav-left ul.level3 li.level4 > a:hover { color:#1e82b0 !important; } #nav-left ul.level1 li.active.current > a, #cms-grouplist .cms-level0.active ul.cms-level1 li.active > a span { color:#1e82b0 !important; } #nav-left ul.level2 li.level3.active > a, #nav-left ul.level3 li.level4.active > a { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/nav-cat/arrow-item-menu.png") no-repeat scroll 19px -37px #f7f7f7 !important; } /** Menu Collapse Level 0 **/ #nav-left .level0.current > a { display: block!important; margin:0 !important; } #nav-left .level0.current > a:hover { text-decoration: none; } #nav-left li.level0.current ul.level0 { display: none; } #nav-left .level0.current ul.level0 a > span::before { content: "" !important; } #nav-left .level0.current .level1 a span { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; color: #616060; font-family: 'Museo-sans-500'; text-transform: none; } #nav-left .level0.current .level1 a span:hover { color: #1e82b0 !important; } #nav-left .level0.current .level1 a { padding-left: 37px !important; } #nav-left .column .separator-cat { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border-bottom: 1px solid; border-radius: 0; font-size: 14px; margin: 5px auto; padding-bottom: 0; text-align: center; text-transform: uppercase; width: 90%; } #nav-left li.level1.active.current:not(.parent) { display:none; margin: 0; padding: 0; height: 0; } /** Fin Temp **/ /** Nav left page compte **/ .customer-account .block-account { background-color: white; margin-bottom: 10px; } .customer-account .onglets_account li { background:none !important; } .customer-account .onglets_account { display: none; } .customer-account .page-title { cursor: pointer; } .customer-account .page-title h1 { color:#e95a7b !important; } .customer-account .page-title h1 > span:before, .customer-account .page-title h1 > span:after { display: inline-block; content: '.'; color: transparent; width: 30px; background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/nav-cat/arrow-cat-rose.png') no-repeat right 2px transparent; } .customer-account .page-title h1 > span:before { background-position: left 2px; } .customer-account .l-sidebar .block-account .page-title { height: 35px; margin: 0; padding: 5px 0; } } @media only screen and (max-device-width: 767px) and (orientation:portrait) { #nav-left .column { display: block; border:none; width:100%; } } @media only screen and (max-width: 767px){ #nav-left li.level1.parent > a:first-child span, #nav-left li.level0.current > a:first-child span { background-image: none; } } @media only screen and (max-width:1200px){ .l-main { width:720px!important; } } @media (max-width: 980px), (max-width: 1024px) and (orientation: landscape){ .customer-account-login .market-popup .forgotpassword-popup-container { width: 100%; height: auto; margin: 0 auto; padding: 15px; } .customer-account-login .market-popup .forgotpassword-popup .sub-section h3 { width: 90%; padding-left:0; margin-bottom:10px } .customer-account-login .market-popup .forgotpassword-popup .content-forgotpassword label, .customer-account-login .market-popup .forgotpassword-popup .content-forgotpassword .input-zone input, .customer-account-login .market-popup .forgotpassword-popup .content-forgotpassword .input-zone{ width:100% } .customer-account-login .market-popup .forgotpassword-popup .sub-section .title, .customer-account-login .market-popup .forgotpassword-popup .content-forgotpassword{ margin: 0; } .customer-account-login .market-popup .forgotpassword-popup .buttons-set, .page-cms-inscription .market-popup .forgotpassword-popup .buttons-set{ padding-left:inherit; padding-right: inherit!important; } .customer-account-login .market-popup .forgotpassword-popup .sub-section .underline { display: none; } } @media (max-width: 768px) { .customer-account-login .market-popup .forgotpassword-popup-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 90%; } .customer-account-login .forgotpassword-popup .back-link a, .page-cms-inscription .forgotpassword-popup .back-link a { top: inherit !important; left: 0 !important; width: auto !important; bottom: 0; } } /** DEBUT FICHE PRODUIT *********************************************************************************************/ /** Bulle responsives **/ .reassurance-footer-category ul li { cursor: pointer; display: inline-block; float: none; margin: 0; text-align: left; width: 103px; vertical-align: top; } .catalog-category-view .reassurance-footer-category ul { left: 0 !important; text-align:center; width:100%; margin-top:30px; } .catalog-category-view .reassurance-footer-category.carteunique > ul{ padding-left: 0; } /** FIN FICHE PRODUIT *********************************************************************************************/ /** DEBUT Picto Communauté Footer **************************************************************************/ .footer-flat-wrapper .picto-footer-communaute { display: inline-block; margin: 0 5px; } @media only screen and (min-width:1024px) and (max-width:1200px) { .footer-flat-wrapper .picto-footer-communaute { margin: 10px 3px; } } @media only screen and (max-width:1024px) and (orientation:landscape) { .footer-flat-wrapper .picto-footer-communaute { margin: 0 4%; } } @media only screen and (max-width:992px) { .footer-flat-wrapper .picto-footer-communaute { margin: 0 4%; } } .footer-flat-wrapper .picto-footer-communaute a { width: 24px; height: 23px; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/picto-communaute-footer-v2.png"); display: inline-block; background-repeat: no-repeat; background-position: 7px 0; -webkit-transition:background-position .1s ease-in; -moz-transition:background-position .1s ease-in; -o-transition:background-position .1s ease-in; transition:background-position .1s ease-in; } .footer-flat-wrapper .picto-footer-communaute a.facebook:hover { background-position: 7px -23px; } .footer-flat-wrapper .picto-footer-communaute a.instagram { background-position: -30px 0; } .footer-flat-wrapper .picto-footer-communaute a.instagram:hover { background-position: -30px -23px; } .footer-flat-wrapper .picto-footer-communaute a.twitter { background-position: -69px 0; } .footer-flat-wrapper .picto-footer-communaute a.twitter:hover { background-position: -69px -23px; } .footer-flat-wrapper .picto-footer-communaute a.pintit { background-position: -108px 0; } .footer-flat-wrapper .picto-footer-communaute a.pintit:hover { background-position: -108px -23px; } .footer-flat-wrapper .picto-footer-communaute a.youtube { background-position: -144px 0; } .footer-flat-wrapper .picto-footer-communaute a.youtube:hover { background-position: -144px -23px; } .footer-flat-wrapper .picto-footer-communaute a.hellocoton { background-position: -186px 0; } .footer-flat-wrapper .picto-footer-communaute a.hellocoton:hover { background-position: -186px -23px; } .footer-flat-wrapper .communaute a{ color:#FFFFFF; vertical-align: middle; } @media only screen and (max-width:1024px){ .footer-flat-wrapper .communaute a{ margin: 0 4%; } } .footer-flat-wrapper .communaute span > a:hover { opacity: 0.7; transition: all 0.2s ease 0s; } /** FIN Picto Communauté Footer *********************--*****************************************************/ /* DEBUT * Picto App + catalogue - NTR -PLNPHO-2768 */ .footer-flat-wrapper .appli { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/footer-flat/btn-app.jpg"); width:135px; height:40px; display:block; } .footer-flat-wrapper .catalogues .picto { display: inline-block; float: none; padding:0; text-align: center; max-width: 65px; width: auto; height: auto; margin-right: 25px; margin-top:5px; } .footer-flat-wrapper .infos-supp a { color: white; } .footer-flat-wrapper .sur2 { display: block; float: left; width: 50%; background-color: #292929; border-left:1px solid #707070; } .footer-flat-wrapper .sur2-wrapper { margin-left: -1px; } .footer-flat-wrapper .encart-appli img { margin-right:10px; margin-top:-6px; } @media only screen and (max-width: 1024px) { .footer-flat-wrapper .content-inner li.title.width100 { width: 100%; } } /* FIN * Picto App + catalogue - NTR -PLNPHO-2768 */ /*******/ .btn-flat-cancel, .btn-flat-validate { color: #ffffff; font-size: 15px; padding: 18px 30px 18px 25px; line-height: 18px; -moz-transition: all 300ms ease-in; -webkit-transition: all 300ms ease-in; -o-transition: all 300ms ease-in; transition: all 300ms ease-in; } @media (max-width: 568px) { .btn-flat-cancel, .btn-flat-validate { padding: 7px 10px; line-height: 17px; font-size: 12px; } .btn-flat-cancel i, .btn-flat-validate i { display: none; } } .btn-flat-cancel { background-color: #ea6645; } .btn-flat-validate { background-color: #7db161; } .btn-flat-cancel:hover, .btn-flat-validate:hover { opacity: 0.7; color: #ffffff; } .btn-popin-sprite { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/popin/picto-btn-popin.png"); background-repeat: no-repeat; display: block; } .btn-popin-sprite-picto-btn-cancel { width: 18px; height: 18px; background-position: -5px -5px; padding: 0 25px 0 0; } .btn-popin-sprite-picto-btn-validate { width: 21px; height: 18px; background-position: -33px -5px; padding: 0 25px 0 0; } /*******/ /* Popup ng */ .ngpopup { visibility: hidden; position: fixed; width: 814px; left:50%; margin-left:-407px; top: 40%; z-index: 2000; text-align: center; } @media (max-width: 991px) { .ngpopup.opened, .quickview-avisverifies.opened { position: absolute; } } .ngpopup .content { border: 1px solid black; background: white; margin: 0 auto; font-family: "open_sanssemibold"; } .ngpopup-overlay, .ngpopup-overlay-avisverifies { visibility: hidden; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #888; opacity: 0.3; z-index: 2000; } .ngpopup.opened, .ngpopup-overlay-avisverifies.opened { visibility: visible; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .ngpopup.opened, .ngpopup-overlay-avisverifies.opened { position: fixed; top: 0!important; left: 0!important; margin: 0!important; width: 100%!important; overflow: scroll; } } .ngpopup-overlay.opened, .ngpopup-overlay-avisverifies.opened { visibility: visible; } .ngpopup .content { width: 100%; border-radius: 5px; display: inline-block; border: 1px solid #eaebed; } .ngpopup .content li { margin: 6px 0; } .ngpopup .content li.form-group { margin: 0 0 15px; } .ngpopup .content .price-matrix li { margin: 0; } .ngpopup .content li > p { font-size: 15px; } .ngpopup .content span.bold { font-family: "opensans-bold"; } .ngpopup .content .screenshot { position: relative; display: inline-block; } @media (max-width: 767px) { .ngpopup .content .screenshot img { width: 62%; } } .ngpopup .head { padding: 15px 15px 15px 18px; display: table; background-color: #eeeeee; border-bottom: 1px solid #e7e7e8; border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .ngpopup .head:hover { background-color: #f5f5f5; } .ngpopup .head > span, .ngpopup .head > a { display: table-cell; vertical-align: middle; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .ngpopup .head > span { font-family: "OpenSans"; text-transform: uppercase; font-size: 16px; color: #616161; } .ngpopup .head > span .js-name { font-family: "OpenSans-bold"; } .ngpopup .head > span .js-sku { font-family: "OpenSans"; } .ngpopup .head .close-popup:hover { opacity: 0.7; } .ngpopup .connect-address-book{ padding: 35px 15px; font-size: 16px; } .ngpopup .text-popup { padding-top: 20px; padding-bottom: 20px; } .ngpopup .text-popup, .ngpopup .text-popup p { font-size: 15px; font-family: "OpenSans"; color: #616161; } .ngpopup .text-popup a { font-family: "OpenSans-bold"; color:#4ca0b3; } .ngpopup .text-popup ul{ display: inline-block; margin-bottom: 30px; margin-top: 12px; } .quickview-nextgen .text-popup ul li ul { margin-left: 20px; } .ngpopup .text-popup ul li ul{ display:block; } .ngpopup .text-popup > p { display: table; } .ngpopup .text-popup > p.green-text { color: #1eb580; } .ngpopup .text-popup > p.titre-astuces { font-weight: bold; margin-bottom: 10px; } .ngpopup .text-popup img { margin: 20px 0; } .ngpopup-sprite { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cart/popup/spritesheet.png"); background-repeat: no-repeat; display: block; font-style: inherit; color: #ffffff; font-size: 14px; margin-right: 5px; } .ngpopup-sprite-ampoule { width: 13px; height: 20px; background-position: -5px -5px; display: table-cell; vertical-align: middle; padding-right: 24px; } .ngpopup-sprite-btn_fermer { width: 31px; height: 30px; background-position: 0px -35px; margin-right: 0; } .ngpopup-sprite-puce-ronde { width: 21px; height: 22px; background-position: -5px -134px; line-height: 22px; font-weight: bold; margin-top: 4px; } .ngpopup-sprite-puce_app_photo { width: 31px; height: 31px; background-position: -5px -166px; } .ngpopup-sprite-check-valid { width: 21px; height: 18px; background-position: -5px -75px; } .ngpopup-sprite-picto-info { width: 21px; height: 21px; background-position: -5px -103px; } .quickview-nextgen.uistyle-calendrier .text-popup .description .content-details { max-height: 120px; overflow-y: auto; display: block; } @media (min-width: 992px) { .wrapper.ngpopup-opened, .ngpopup-opened-avisverifies { -webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px); } .ngpopup .content { -webkit-transform: translateY(-5%); -moz-transform: translateY(-5%); -ms-transform: translateY(-5%); transform: translateY(-5%); opacity: 0; } .wrapper.ngpopup-opened, .wrapper.ngpopup-opened-avisverifies, .ngpopup .content { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .ngpopup.opened .content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } @media (max-width: 991px) { .ngpopup { height: 100%; top: 0; left: 0; } .ngpopup .content { height: 100%; transition: all 0.2s; transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; } .ngpopup.opened .content { transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); } } @media (max-width: 767px) { .ngpopup .content { height: auto; border-radius: 0; border: none; } } .quickview-nextgen .text-popup p.option-finition-brillante { margin-top: 25px; } .quickview-nextgen .text-popup p.option-finition-brillante, .quickview-nextgen .text-popup p.option-double-page { font-size: 15px; } .quickview-nextgen .text-popup p.option-finition-brillante .js-finition-brillante-price, .quickview-nextgen .text-popup p.option-double-page .js-double-page-price { font-weight: bold; } .quickview-nextgen .text-popup p .title-block-descr { font-family: "opensans-bold"; } .ngpopup .withoverflow{ max-height: 570px; overflow-y: auto; } .ngpopup .footerwithoverflow{ margin-top:20px; } /*** Class "Bootstrap maison" qui n'existe pas (PZA)***/ /* -- Permet de jouer sur l'alignement des textes avec ces nouvelles classe.*/ .text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg { text-align: left; } .text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg { text-align: center; } .text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg { text-align: right; } .text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg { text-align: justify; } @media (max-width: 767px) { .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs { text-align: inherit; } .text-left-xs { text-align: left; } .text-center-xs { text-align: center; } .text-right-xs { text-align: right; } .text-justify-xs { text-align: justify; } } @media (min-width: 768px) and (max-width: 991px) { .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm { text-align: inherit; } .text-left-sm { text-align: left; } .text-center-sm { text-align: center; } .text-right-sm { text-align: right; } .text-justify-sm { text-align: justify; } } @media (min-width: 992px) and (max-width: 1199px) { .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md { text-align: inherit; } .text-left-md { text-align: left; } .text-center-md { text-align: center; } .text-right-md { text-align: right; } .text-justify-md { text-align: justify; } } @media (min-width: 1200px) { .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg { text-align: inherit; } .text-left-lg { text-align: left; } .text-center-lg { text-align: center; } .text-right-lg { text-align: right; } .text-justify-lg { text-align: justify; } } .float-none { float: none! important; } @media screen and (max-width: 768px) { .visible-xs-inline { display: inline-block !important; } } @media screen and (min-width: 768px) { .visible-xs-inline { display: none !important; } } .table-cell { display: table-cell; } .v-middle { vertical-align: middle; } /* pull-right on x-small devices */ @media (max-width: 768px) { .pull-right-xs { float: right; } .pull-left-xs { float: left; } } /* pull-right on small devices */ @media (min-width: 768px) { .pull-right-sm { float: right; } .pull-left-sm { float: left; } } /* pull-right on medium devices */ @media (min-width: 992px) { .pull-right-md { float: right; } .pull-left-md { float: left; } } /* pull-right on large devices */ @media (min-width: 1200px) { .pull-right-lg { float: right; } .pull-left-lg { float: left; } } /*** FIN : En complement de Bootstrap (PZA) ***//* -- */ /* Btn radio rond (ex: selection couleur enveloppe page panier) */ .round-radio { display:inline-block; margin: 0 5px; width: 35px; height: 35px; text-align: center; vertical-align: middle; } .round-radio a { display:inline-block; } .round-radio span { height: 22px; width: 22px; display: block; box-shadow: 1px 0 2px 0 #000 inset; border-radius: 50px; transition: all 150ms ease-in 0s; } .round-radio .selected span { border: 3px solid #343639; box-shadow: 1px 0 1px 0 #000000 inset; height: 35px; width: 35px; } .round-radio:hover span { height: 35px; width: 35px; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; } /* -- */ /** EU Cookie Bar **/ #eucookiebar-outer { background-color: #3b3b3b; } .eucookiebar-inner { padding: 10px 20px; min-height: 25px; } .eucookiebar-text{ font-family: "opensans"; text-align:justify; color: #fff; padding: 3px 0; } .eucookiebar-text a, .eucookiebar-learnmore{ text-decoration:underline; color:#58B0C3; } .eucookiebar-text a:hover, .eucookiebar-learnmore:hover{ text-decoration:none; color:#58B0C3; } .eucookiebar-btn-con { margin-top: 15px; } .eucookiebar-btn-accept { margin-right: 10px; cursor: pointer; } .eucookiebar-learnmore { cursor: pointer; } .eucookiebar-btn-con button{ background-color:#4ca0b3; border:1px solid #438FA0; } .eucookiebar-btn-close { position: absolute; right: 10px; top: 0px; color: #4ca0b3; text-decoration: none; font-weight: bold; } /* Home */ @media (max-width: 767px) { .cms-index-index #ban-home-default .no-padding{ padding-left:15px!important; padding-right:15px!important; } .cms-index-index .mise-en-avant-categorie-home > a { padding:10px 15px !important; } } .h1-home{ color: #616060; font:21px 'museo-sans-500-italic'; line-height: 26px; text-align: center; margin-top:10px; margin-bottom:10px; border:none; } /* List circles */ .list-circle{ margin:20px auto; } .list-circle li{ color:#5d7e8d; font-size:22px; font-family: 'opensans'; text-align:center; } .list-circle .pastille{ display:inline-block; border-radius:50px; padding:5px 15px 5px 15px; font-size:25px; margin-right:20px; } /* Green */ .list-circle.color-circle-green .pastille{ background:#79c7b7; color:#fff; } /* Blue */ .list-circle.color-circle-blue .pastille{ background:#4ca0b3; color:#fff; } /* fin home */ @media (max-width: 992px) { .checkout-cart-nextgen .footer-flat-wrapper .reass ul > li { min-height: 85px; line-height: 55px; } .checkout-cart-nextgen .footer-flat-website .capital, .checkout-cart-nextgen .footer-flat-website .footer-copyright { display: inline-block; } } @media (max-width: 767px) { .checkout-cart-nextgen .footer-flat-wrapper .reass ul > li { min-height: 50px; line-height: inherit; } } .checkout-cart-nextgen .footer-flat-wrapper .client-satisfaits, .onestepcheckout-index-index .footer-flat-wrapper .client-satisfaits { color: #4ca0b3; font-family: "OpenSans-bold"; } .sprite-footer-top-cart-nextgen { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cart/spritesheet-footer-top-cart-nextgen.png"); background-repeat: no-repeat; display: block; } .sprite-footer-top-cart-nextgen-cadenas { width: 16px; height: 23px; background-position: -5px -5px; } .sprite-footer-top-cart-nextgen-hdd { width: 20px; height: 20px; background-position: -5px -38px; } .sprite-footer-top-cart-nextgen-plus { width: 13px; height: 13px; background-position: -5px -68px; } /*************/ /** DEBUT UI-KIT ****/ .input-qty-plus-moins, .select2-container { margin-bottom: 0; display: inline-block; } @media (max-width: 767px) { .input-qty-plus-moins, .select2-container, .main-line .product-qty select { width: 130px !important; } } @media (min-width: 768px) and (max-width: 991px){ .input-qty-plus-moins, .select2-container, .main-line .product-qty select { width: 165px !important; } } body .main-line .product-qty select { background: transparent url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto_down_select.png") no-repeat scroll right 5px center; height: 45px; border-color: #eaebed; color: #616161; padding-left: 5px; border-radius: 5px !important; } .input-qty-plus-moins, .input-rounded-corner { border:1px solid #eaebed; border-radius: 5px; } .input-qty-plus-moins .minus, .input-qty-plus-moins .plus { background: transparent url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cart/picto_plus_moins.png") no-repeat scroll left top; border: medium none; height: 35px; margin: 4px; width: 35px; } .input-qty-plus-moins .plus { background-position: left bottom; } .input-qty-plus-moins .input-text, .input-rounded-corner .input-text { border: none; text-align: center; color: #616161; font-size: 14px; font-family: "OpenSans"; line-height: normal; } .input-rounded-corner .input-text { text-align: left; } .input-rounded-corner .input-text.coupon{ padding-left:4px; } @media (max-width: 767px) { .input-qty-plus-moins .minus, .input-qty-plus-moins .plus { margin: 3%; } .input-qty-plus-moins .input-text { width: 27%; } } @media (min-width: 768px) and (max-width: 991px){ .input-qty-plus-moins .input-text { width: 69px; } } @media (min-width: 992px) { .input-qty-plus-moins .input-text { width: 56px; } } .input-rounded-corner .input-text { width: 115px; color: #616161; } @media (max-width: 568px) { .input-rounded-corner .input-text::-webkit-input-placeholder { color: #616161; font: 14px "opensans-bold"; } .input-rounded-corner .input-text::-moz-placeholder { color: #616161; font: 14px "opensans-bold"; } } .input-rounded-corner .btn-square { display: inline-block; cursor: pointer; vertical-align: middle; text-align: center; height: 100%; margin: 4px; width: 35px; border-radius: 3px; font:12px/35px "opensans-bold"; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .input-rounded-corner .btn-square:hover { opacity: 0.7; } .input-rounded-corner .btn-square.lightblue { background-color: #4ca0b3; color: white; } .input-rounded-corner .btn-square.darkorange { background-color: #ef4822; color: white; } .input-rounded-corner .btn-square.error span { background: transparent url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cart/picto-arrow-error.png") no-repeat scroll left top; display: inline-block; height: 15px; width: 16px; position: relative; top: 3px; } /** FIN UI-KIT ****/ .select2-results__option strong { color:#4ca0b3; } .select2-results__option--highlighted .price { color:black; } .select2-results__option { clear: both; display: block; height: 45px; line-height: 45px; padding: 0 10px; border-bottom:1px solid #e3e4e5; } .select2-results__option:last-child { border:none; } .select2-container--default .select2-results > .select2-results__options { max-height: 225px; } .select2-results__option .puce-couleur { margin-top: 16px; } .select2-container--open .select2-dropdown { border: 0 none !important; border-radius: 5px !important; top: 5px; box-shadow: 0 0 5px #333333; } .select2-container--default .select2-selection--single { border: none; height:45px; border-radius:5px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 45px; padding-right: 50px; } .select2-selection__rendered .price, .select2-results .select2-results__option .price { float:right; } .select2-container--default .select2-selection__arrow b { background: transparent url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto_down_select.png") repeat-y scroll left top; border: medium none; height: 35px; left: -19px; margin: 0; top: 4px; width: 35px; } .select2-container--open .select2-selection__arrow b { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .select2-container--default:hover .select2-selection__arrow b { opacity: 0.5; } body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 45px; padding-right: 50px; } body .select2-container--default .select2-selection--single .select2-selection__rendered { font-family:"OpenSans-bold"; color:#616161; } body .select2-container--default .select2-selection--single { height:45px; border-radius:5px !important; border-color: #eaebed; outline:0; } body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; -webkit-backface-visibility: hidden; /* fix chrome px left */ } body .select2-container--default .select2-selection--single .select2-selection__arrow b { background: transparent url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto_down_select.png") repeat-y scroll left top; border: medium none; height: 35px; left: -19px; margin: 0; top: 4px; width: 35px; } body .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #e3e4e5; color: #616161; } body .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #fdd13c; } body .select2-results__option { color: #616161; font-family: "opensans-bold"; padding: 0 10px; } body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 45px; padding-right: 50px; font-family: "opensans"; color: #616161; font-size: 14px; } body .select2-container--open { z-index: 2000; } @media (min-width: 992px){ .input-qty-plus-moins, .select2-container, .cart-nextgen .main-line .product-qty select { width: 152px !important; } } /*************/ /* Template 2columns left @media (max-width: 980px), (max-width: 1024px) and (orientation: landscape){ body .l-main { float: none !important; width: 100% !important; display: block; margin: 0 auto; } } .col-lg-3.l-sidebar{ max-width:inherit; padding:inherit; padding-right: 15px; padding-left: 15px; } .col-lg-3.l-sidebar #nav-left{ margin-top:0 } .col-lg-9 .ban300{ height:271px!important; } keep */ /* Listing sous cat nextgen */ .category-listing-nextgen a { color: #616161; border: 1px solid #DCDBDB; border-radius: 3px; padding: 7px 10px; display: inline-block; margin: 5px 0; transition: all 0.2s ease-in-out; } .category-listing-nextgen a:hover { opacity: 0.7; } .category-listing-nextgen li.active a { color:white; background-color:#616161; border-color:#616161; font-family:"open_sanssemibold"; } .category-listing-nextgen li.active a:hover { opacity: 1; } .category-listing-nextgen .product-count strong { font:14px "opensans-bold"; color:#616161; } /****/ /* Quickview-nextgen */ .quickview-nextgen, .quickview-avisverifies { width: 1000px; margin-left:inherit; top: 50%; left: 50%; position: fixed; transform: translate3d(-50%, -50%, 0) scale(1.0, 1.0); /* NE PAS UTILISER LE BLUR, MASQUE LE BTN PERSO DANS LA QUICKVIEW SUR CHROME ANDROID */ /*filter : blur(0);*/ /*-webkit-filter: blur(0);*/ /*-moz-filter: blur(0);*/ /*-ms-filter: blur(0);*/ /*-o-filter: blur(0);*/ } .quickview-nextgen .content { margin:0 auto; text-align: left; } .ngpopup.quickview-nextgen .content .loading, .quickview-avisverifies .content .loading { display: none; position: absolute; left: 0; top: 0; width:100%; height:100%; text-align:center; z-index: 1000; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/catalog/ajax-loading.gif"); background-repeat: no-repeat; background-position: center center; } .quickview-avisverifies .content .loading { position: relative; height: 150px; } .quickview-nextgen ul.price-matrix { max-height:170px; overflow: auto; padding:0; margin-bottom:15px; } .quickview-nextgen .descr-echantillon, .quickview-nextgen .descr-pao { margin: 15px 0; } .quickview-nextgen li { padding:7px 10px; font:14px "opensans-bold"; margin:0; } .quickview-nextgen li.odd { background-color:#f8f8f8; position: relative; color:#616161; } .quickview-nextgen li.even { background-color:#fdfdfd; position: relative; color:#8e8e8e; } .quickview-nextgen li span.price { float:right; font-family:"open_sanssemibold"; } .quickview-nextgen ul.flags { padding:0; margin-top:5px; /*margin-bottom:15px;*/ margin-bottom:5px; } .quickview-nextgen .actions { margin-top:25px; } @media (max-width:568px) { .quickview-nextgen ul.flags { margin-bottom:5px; } .quickview-nextgen .actions { margin-top:5px; } } .quickview-nextgen .flags li { height:29px; line-height: 29px; padding:0; } @media (max-width:568px) and (orientation:portrait) { .quickview-nextgen .flags span.crosssell { font-size: 13px; } } .quickview-nextgen .flags span::before { content:""; height:28px; width:29px; display:inline-block; margin-right:5px; vertical-align: middle; } .quickview-nextgen .flags span.fond_perso::before { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cat-nextgen/pictos-product.png') no-repeat -29px top; } .quickview-nextgen .flags span.livraison_offerte::before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-reassurance-ppfr.png") no-repeat -10px -131px; width:32px; } .quickview-nextgen .flags span.fppochette-coul::before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-enveloppes-produits-pochette.png") no-repeat top left; width:22px; margin-top: 4px; } .quickview-nextgen .flags span.fppochette-pcomp::before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-produit-complementaire.png") no-repeat top left; width:30px; } .quickview-nextgen .flags span.crosssell::before { background-image: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-crosssell.png'); width: 30px; height: 27px; background-repeat: no-repeat; background-position: center; } .quickview-nextgen .format { /*margin:30px 0;*/ margin:15px 0; } @media (max-width:568px) { .quickview-nextgen .format { margin:10px 0; } } .quickview-nextgen .slick-slider, .quickview-nextgen .slick-slider img { margin: 0 auto; } .quickview-nextgen .slick-slider img { display: inline-block; } .quickview-nextgen .slideshow-images .slick-slide { text-align: center; line-height: 400px; /*scodix*/ } .quickview-nextgen .slideshow-images img { max-height:450px; max-width:540px; display: inline-block; cursor: pointer; } .quickview-nextgen .visuels { border-right:1px solid #dcdbdb; } .quickview-nextgen .info-txt { padding-left:30px; border-left: 1px solid #DCDBDB; margin-left: -1px; } @media (max-width: 990px) { .quickview-nextgen .info-txt, .quickview-nextgen .visuels { padding:15px 0; } } .quickview-nextgen a.bouton-flat { font-weight:normal; margin:0; } @media (max-width: 990px) { .quickview-nextgen input.bouton-flat, .quickview-nextgen a.bouton-flat { padding-left: 70px !important; padding-right: 70px !important; } .quickview-nextgen .cadre-fond-blanc { bottom:0; position: fixed; z-index: 17000000; width: 100%; background-color: #ffffff; padding: 15px 15px 5px; } } @media (max-width: 568px) { .quickview-nextgen input.bouton-flat, .quickview-nextgen a.bouton-flat { padding-left: 15px !important; padding-right: 15px !important; margin: 10px auto; /*display: block !important;*/ float: none !important; text-align: center; } .quickview-nextgen .cadre-fond-blanc { padding: 0; } .quickview-nextgen input.bouton-flat { right:15px; left:15px; width: 100%; margin: 0; } .quickview-nextgen a.bouton-flat { width: 100%; } .quickview-nextgen .big a.bouton-flat, .quickview-nextgen .big input.bouton-flat { margin: 0; } } .quickview-nextgen .btn-personalise { float:right; width: auto; } .quickview-nextgen .slideshow-thumbnails { text-align:center; } .quickview-nextgen .slideshow-thumbnails .slick-list .slick-track { margin: 0 auto; } .quickview-nextgen .slideshow-thumbnails .slick-slide { border: 1px solid #ffffff; margin: 10px; padding:5px; border-radius: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; min-height: 80px; /*Pour scodix */ line-height: 60px; opacity:0.7; } .quickview-nextgen .slideshow-thumbnails .slick-slide.slick-current { border: 1px solid rgb(205,205,205); opacity: 1; } .quickview-nextgen .slideshow-thumbnails .slick-slide:hover { opacity: 1; } .quickview-nextgen .info-txt strong { font-weight:normal; font-family:"opensans-bold"; } .quickview-nextgen .price-ppv .strong, .quickview-nextgen .price-ppv > span { display:block; } .quickview-nextgen .price-ppv .strong { font: 14px "opensans-bold"; } .quickview-nextgen .price-ppv .js-price-ppv-ttc { font: 30px "open_sanssemibold"; } .quickview-nextgen .price-ppv > span { font: 14px "open_sanssemibold"; color:#909091; margin: 5px 0 30px; } .quickview-nextgen .descr-echantillon strong { display:block; } @media (max-width: 992px) { .quickview-nextgen .actions { margin-bottom:25px; } } .quickview-nextgen .js-price-unity-ttc { font-family: open_sanssemibold; font-size: 30px; } .quickview-nextgen .js-price-unity-ttc exp { font-size: 13px; vertical-align: super; } .quickview-nextgen .js-price-unity { font-family: opensans-bold !important; font-size: 14px !important; } .quickview-nextgen .js-description { font-size: 15px; font-family: opensans; } .quickview-nextgen .js-option-album label, .quickview-nextgen .js-product-id-title, .quickview-nextgen .js-description-title, .quickview-nextgen .js-product-options-title { font-family: opensans-bold; text-transform: uppercase; margin: 0; display:block; } .quickview-nextgen .js-description ul { margin: 0; } .quickview-nextgen .js-description li { font-family: opensans; margin: 0; padding: 2px; font-size: 15px; } .quickview-nextgen .js-product-options, .quickview-nextgen .js-option-album, .quickview-nextgen .js-description, .quickview-nextgen .js-product { margin-top: 25px; } .quickview-nextgen .js-description li:before { width: 10px; display: inline-block; content: "-"; } .quickview-nextgen .info-txt { padding-bottom: 90px; } @media (max-width: 767px) { .quickview-nextgen .info-txt { padding-bottom: 40px; } } .quickview-nextgen .select2-container { z-index: 15000; margin-top:6px; } .ngpopup.ppv-addresses .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b:hover, .ngpopup.ppv-addresses .select2-selection__arrow b:hover, .ngpopup.ppv-addresses .expdate .dropdown:hover, .cart-nextgen .main-line .product-qty g.selection:hover .select2-selection__rendered, .cart-nextgen .main-line .product-qty .selection:hover .select2-selection__arrow b { opacity: 0.5; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; } @media (min-width: 992px) { .quickview-nextgen .actions { position: absolute; bottom: 30px; right: 30px; width: 360px; } } .quickview-nextgen label.selected::before{ background-color: #616161; border: 3px solid #dcdbdb; box-shadow: none; } .boutique-noel-2015 .quickview-nextgen label.selected:hover::before, .quickview-nextgen label.selected:hover::before{ border:3px solid #dcdbdb!important; } /* Ajouts pour lightbox produits */ .quickview-nextgen label { text-align: left; display:block; } .quickview-nextgen .text-popup p { line-height: 28px; } .quickview-nextgen input[type=radio] { display: none; } .quickview-nextgen .mradio label::before { background-image: none; width: 16px; height: 16px; background-color: #dcdbdb; border-radius: 50px; box-shadow: 1px 1px 1px #b7b6b6 inset; content: ""; display: inline-block; margin-right: 6px; vertical-align: sub; } .quickview-nextgen .mradio label:hover::before { border: 1px solid #616161; } .quickview-nextgen .mradio label.selected::before { background-color: #616161 !important; border: 3px solid #dcdbdb !important; box-shadow: none; } .quickview-nextgen select{ height: 45px; border-radius: 5px !important; border-color: #eaebed; border: 1px solid #aaa; box-sizing: border-box; cursor: pointer; display: block; user-select: none; -webkit-user-select: none; } /* Tab/Mobile */ @media (max-width: 990px) { .quickview-nextgen, .quickview-avisverifies { position: fixed !important; top:0; left: 0; margin-left: 0; overflow: scroll; background: white; transform:none; -webkit-transform:none; -o-transform:none; -moz-transform:none; -ms-transform:none; width: 100%; z-index: 16000003; /*Pour passer par dessus le tchat*/ } .quickview-nextgen .slideshow-thumbnails { display: none!important; } .quickview-nextgen .info-txt { border:none; } } /***************/ /*** Breadcrumbs nextgen ****/ .breadcrumbs-nextgen { text-align: right; } .breadcrumbs-nextgen li, .breadcrumbs-nextgen li a { font: 14px "open_sanssemibold" !important; float: none; display: inline-block; vertical-align: middle; } .breadcrumbs-nextgen li { font: 14px "opensans-bold" !important; } .breadcrumbs-nextgen li > span { background: none; float: none; display: inline-block; margin:0; font-size: inherit; height: inherit; width: inherit; } .breadcrumbs-nextgen li > span::after { content: "/"; display: inline-block; vertical-align: top; margin:0 1px 0 4px; } .breadcrumbs-nextgen li a:hover { text-decoration: none !important; opacity: 0.7; } .breadcrumbs-nextgen li.home a { height: auto; width: auto; background: none; } /* Tab */ @media (max-width:768px) { .quickview-nextgen .body { background: white; } .quickview-nextgen .visuels { border-right: none; border-bottom:1px solid #DCDBDB; } .quickview-nextgen .slideshow-images img { max-height: 370px; max-width: 100%; } .quickview-nextgen .slideshow-images .slick-slide { line-height: 250px; } } /****************************/ /*** Picto reassurance ***************************************************************/ .cat-reass { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cat-nextgen/sprite-reass.png"); background-repeat: no-repeat; display: block; margin:0 auto 15px; } .reass-catalogue { width: 50px; height: 41px; background-position: -20px -20px; } .reass-date { width: 37px; height: 39px; background-position: -20px -101px; } .reass-devis { width: 41px; height: 39px; background-position: -20px -180px; } .reass-echantillon { width: 57px; height: 41px; background-position: -20px -259px; } .reass-enveloppe { width: 45px; height: 34px; background-position: -20px -340px; } .reass-fabFR { width: 39px; height: 43px; background-position: -20px -414px; } .reass-fabrication { width: 39px; height: 39px; background-position: -20px -497px; } .reass-finition { width: 41px; height: 41px; background-position: -20px -576px; } .reass-livraison { width: 66px; height: 41px; background-position: -20px -657px; } .reass-papier { width: 23px; height: 36px; background-position: -20px -738px; } .reass-verif { width: 37px; height: 37px; background-position: -20px -814px; } /*****************************************/ /* Menu cat tab/mobile */ @media (max-width:991px) { .category-listing-nextgen.container { padding:15px 0; margin:0; width:100%; background:white; border-top:1px solid #e1e0e0; border-bottom:1px solid #e1e0e0; text-align:center; } .category-listing-nextgen select { background: transparent url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto_down_select.png") no-repeat scroll right 5px center; height: 45px; border:1px solid #eaebed; color: #616161; padding-left: 5px; padding-right:45px; border-radius: 5px !important; -webkit-appearance: none; width: 220px; font:14px "opensans-bold"; } .category-listing-nextgen > .wrapper-list, .category-listing-nextgen > .product-count { display:inline-block; } .category-listing-nextgen ul.grid-actions { height: 45px; border: 1px solid rgb(234, 235, 237); width: 100px; display: inline-block !important; vertical-align: middle; border-radius: 5px; margin: -2px 0 0 10px; line-height:50px; } .category-listing-nextgen ul.grid-actions li { padding:0 10px; } .category-listing-nextgen .product-count strong, .cat-nextgen .product-count.visible-xs strong { font:14px "open_sanssemibold_italic"; color:#898989; margin-left:20px; } .cat-nextgen .product-count.visible-xs { text-align: right; margin:10px 15px 5px 0; } .category-listing-nextgen > span { font:14px "opensans-bold"; color:#898989; text-transform:uppercase; margin-right: 20px; } .category-listing-nextgen .grid-actions i { background: transparent url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cat-nextgen/17x17-icons-nav.png") no-repeat scroll top left; height:17px; width:17px; display:inline-block; } .category-listing-nextgen .grid-actions i.grid3 { background-position:-34px top; } .category-listing-nextgen .grid-actions i.grid2 { background-position:right top; } .category-listing-nextgen .grid-actions i.bars { background-position:-17px top; } .category-listing-nextgen .grid-actions i.square { background-position:left top; } /*active*/ .category-listing-nextgen .grid-actions .active i.grid3 { background-position:-34px bottom; } .category-listing-nextgen .grid-actions .active i.grid2 { background-position:right bottom; } .category-listing-nextgen .grid-actions .active i.bars { background-position:-17px bottom; } .category-listing-nextgen .grid-actions .active i.square { background-position:left bottom; } } /* Page Presse */ #presse-contact{ background:#f4f4f4; padding:25px 25px 16px 25px; margin-bottom:30px; } #presse-contact p, #presse-contact address{ font-family: 'opensans'; font-size:17px; color:#606060; } #presse-contact p span, #presse-contact address strong{ font-family: 'open_sansextrabold'; } #presse-contact address{ margin-top: 5px; line-height: 24px; margin-bottom:0; } @media only screen and (max-width:768px) { #presse-contact{ margin-top:25px; } } #page-presse h1{ font-family: 'open_sanssemibold'; font-size: 20px; line-height: 26px; color:#606060; margin-bottom:20px; } #page-presse #top-article p{ font-family: 'open_sanslight'; font-size:16px; line-height:22px; } @media only screen and (min-width:1024px) and (max-width:1200px) { #header-page-presse .col-ld-7{ margin-top:52px; } } @media only screen and (max-width:767px) { #page-presse{ margin-top:25px; } } /* Nav boutons */ #boutons-presse nav li{ display:inline-block; } @media only screen and (max-width:767px) { #boutons-presse nav li{ display:block; } #boutons-presse nav li a{ min-width:230px; margin-bottom:25px; } } @media only screen and (min-width:768px) { #boutons-presse #center-btn{ margin:0 50px; } } #boutons-presse .gris{ background:#818080; border-color:#818080; } #boutons-presse .bouton-flat.picto-arrow-right span:after{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/page-presse/fleche-btn-header.png"); width:8px; height:13px; } /* Fin Nav Boutons */ /* Hn */ #page-presse .hn-full-bg{ padding:10px 20px; margin-bottom:40px; } #page-presse .hn-full-bg h2{ font-family: "novecento-demibold"; font-size: 18px; color:#fff; margin:0; } .hn-full-bg.green{ background:#45bcb8; } #page-presse .left, #page-presse .right{ padding:0; } #page-presse #articles-presse .bouton-flat{ margin-right:15px; } #page-presse .inner-bio { text-align: center; font-size: 13px; margin-top:15px; } /* Fin Hn */ #articles-presse .date-article{ font-family: 'open_sanssemibold'; font-size: 22px; color:#606060; margin-right:6px; } @media only screen and (max-width:767px) { #articles-presse .date-article{ display:block; } } #articles-presse h3{ display:inline; font-family: 'open_sanslight'; font-size:22px; color:#606060; } #articles-presse li{ margin-bottom:40px; } #articles-presse li p, #logos-presse p{ margin:20px 0; font-family: 'open_sanslight'; font-size:15px; } #articles-presse button{ font-family: "novecento-demibold"; border:none; background-color:#fff; background-image:url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/page-presse/fleche-btn.png"); background-repeat:no-repeat; background-position:right center; text-transform:uppercase; text-decoration:underline; padding-right: 22px; } #articles-presse button:hover{ text-decoration:none; } /* Logos presse */ #logos-presse #ancres-flottantes a{ font-family: "novecento-demibold"; font-size:13px; color:#fff; text-decoration:underline; } #logos-presse #margin-aflottantes{ margin:0 25px; } #logos-presse .title-hn{ font-family: 'open_sanslight'; font-size:22px; color:#000; margin-bottom:30px; } @media only screen and (min-width:992px) { #logos-presse .title-hn{ margin-left:90px; } } #logos-presse .container-fluid .dpi-box{ display:table; } #logos-presse figure{ height:163px; } #logos-presse figure .helper{ display: inline-block; height: 100%; vertical-align: middle; } #logos-presse figure img{ vertical-align:middle; } #logos-presse .dpi-box{ padding: 10px; display: inline-block; margin: auto; } .content-dpi-box{ position:absolute; bottom:15px; left:0; width: 100%; display:none; } .content-box:hover > .content-dpi-box, .content-box:hover > div .content-dpi-box { display:block; } .dpi-box.white-box{ border:1px solid #a1a0a0; } .dpi-box a{ font-family: "opensans"; font-size:14px; } .dpi-box a:hover span{ text-decoration:none; } .dpi-box a span{ text-decoration:underline; } .dpi-box a:first-child{ margin-right:20px; } @media only screen and (max-width:767px) { .padding-xs-15{ padding: 0 15px; } } /* Bg white */ .dpi-box.white-box a{ color:#a1a0a0; } .dpi-box.white-box:hover{ background:#9a9999; } .dpi-box.white-box:hover a{ color:#fff; } /* Bg grey */ .dpi-box.grey-box a{ color:#fff; } .dpi-box.grey-box{ background:#818080; } .dpi-box.white-box:hover a{ color:#fff; } /***/ #page-presse .bouton-flat.white span:after, .dpi-box.white-box a span:after, .dpi-box.grey-box a span:after, .list-pdf li a span:after{ content: " "; width: 9px; height: 12px; margin-left: 10px; display: inline-block; vertical-align: middle; background:url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/page-presse/dpi-bow-arrow-dark.png"); background-repeat:no-repeat; } #page-presse .bouton-flat.white:hover span:after, .dpi-box.white-box:hover a span:after, .dpi-box.grey-box a span:after{ background-position:0 -12px; } /* Fin Logo presse */ /* Magazine Presse */ #magazines-presse .list-pdf li, #magazines-presse .list-pdf li a{ font-family: 'opensans'; font-size:14px; color:#606060; } .list-pdf{ margin-top:30px; } .list-pdf li a{ font-family: 'OpenSans-italic'; text-decoration:underline; } .list-pdf li a:hover{ text-decoration:none; } #magazines-presse table{ width:100%; } #magazines-presse table td{ padding-bottom:40px } /* Fin Magazine Presse */ /* Bouton flat blanc / bordure grise */ #page-presse .bouton-flat.white { background-color: #fff; border: 1px solid #a1a0a0; font-family: 'OpenSans-italic'!important; font-size:12px!important; } #page-presse .bouton-flat.white span{ text-decoration:underline!important; } #page-presse .bouton-flat.white:hover{ background:#333333; } #page-presse .bouton-flat.white:hover span{ color:#fff; } /* Inner bio */ #page-presse .inner-bio { padding: 15px; font-family: "OpenSans"; } /* Fin page Presse */ /** Univers Calendrier PPFR **/ .univers-calendrier-ppfr.category-folded .promos .products-wrapper .promo { text-align: center; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .etabs li.tab-promo a { color: #f00101; padding-left: 65px; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/picto-promo.png") no-repeat 30px 50%; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .col-left { display: block; float: left; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .col-right { display: block; float: right; } .univers-calendrier-ppfr .boutique-noel-button { text-align: right; } .univers-calendrier-ppfr .btn-red.btn-noel { background-color: #cb0303 !important; color: white; padding:0 18px; height: 50px; line-height: 50px; font-weight: bold; font-size: 15px; display: inline-block; } .univers-calendrier-ppfr .btn-red.btn-noel span { white-space: nowrap; } .univers-calendrier-ppfr .tab-content .tab-boutique-noel { font-family: "OpenSans"; color: #616060; text-align: center; } .univers-calendrier-ppfr .tab-content .boutique-noel-title { font-size: 22px; font-family: 'open_sanssemibold'; } .univers-calendrier-ppfr .tab-content .boutique-noel-title2 { font-size: 22px; font-weight: bold; } .univers-calendrier-ppfr .tab-content .boutique-noel-title2 span { color: #f80000; font-size: 24px; } .univers-calendrier-ppfr .tab-content .boutique-noel-desc { margin: 20px 0 30px; font-size: 14px; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda p.col-right { color: #616161; font-family: "OpenSans"; font-size: 15px; margin-bottom: 10px; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda p.col-right span { color: #4ca0b3; font-size: 24px; font-weight: bold; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda h2 { color: #616161; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .col-left p { display: inline-block; width: 100%; } .univers-calendrier-ppfr .pricematrix-tab li.head span{ color: #616060; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .col-left p span, .univers-calendrier-ppfr .category-products.folding .pricematrix-wrapper .price-right, .univers-calendrier-ppfr .category-products.folding .pricematrix-wrapper .price-unitary, .univers-calendrier-ppfr .pricematrix-tab .price-right, .univers-calendrier-ppfr .pricematrix-tab .price-unitary, .univers-calendrier-ppfr .category-products.folding .options-inner .title.main, .univers-calendrier-ppfr .pricematrix-tab .pricematrix > p span { color: #4ca0b3; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .col-left p, .univers-calendrier-ppfr .wrapper-desc-cal-agenda .tab-content, .univers-calendrier-ppfr .wrapper-desc-cal-agenda .tab-content p, .univers-calendrier-ppfr .category-products.folding .product-inner { font-family: OpenSans!important; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .col-left p span { font-family: OpenSans-bold; } .univers-calendrier-ppfr .btn-blue { background-color: #4ca0b3!important; border-color : #4ca0b3!important; } .univers-calendrier-ppfr .btn-blue-right-arrow > span, .univers-calendrier-ppfr .btn-blue.right-arrow > span { background-image: url(https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-arrow2.png)!important; } .univers-calendrier-ppfr.category-folded .btn-flat.blue.current, .univers-calendrier-ppfr.category-folded .btn-flat.btn-blue.current { background-color: #4ca0b3!important; border-color: #4ca0b3!important; } .univers-calendrier-ppfr.category-folded .btn-flat.blue.current > span, .univers-calendrier-ppfr.category-folded .btn-flat.btn-blue.current >span { background-image: url(https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-arrow2.png)!important; color: white!important; } @media (max-width: 991px) { /* popup */ .univers-calendrier-ppfr .boutique-noel-2014 .ban-popup-wrapper { width: 90%; max-width: 810px; } .univers-calendrier-ppfr .boutique-noel-2014 .contenu-design-details { max-width: 810px; width: 100%; } .univers-calendrier-ppfr .boutique-noel-2014 .img-produits-wrapper { height: 100%; } .univers-calendrier-ppfr .boutique-noel-2014 .img-produits-wrapper, .univers-calendrier-ppfr .boutique-noel-2014 .ban-popup-wrapper, .univers-calendrier-ppfr .boutique-noel-2014 .ban-popup-wrapper img{ max-width: 100%; } .univers-calendrier-ppfr .boutique-noel-2014 .ban-popup-wrapper ul { margin-right: 25px; } /* fin popup */ .univers-calendrier-ppfr .wrapper-desc-cal-agenda .col-left { margin:0 5% 15px; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .col-right { width: 40%; margin: 0 8%; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .etabs li { font-size: 15px; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda h2.col-right { margin-top: 7%; margin-bottom: 3%; font-size: 24px; } .univers-calendrier-ppfr h1 { font-family: "novecento-demibold"; margin: 30px 0 0; } .univers-calendrier-ppfr .footer-menu-title { font-family: "OpenSans"; margin: 30px 0 30px 15px; } .univers-calendrier-ppfr h1, .univers-calendrier-ppfr .footer-menu-title { font-size: 28px; color: #616161; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda { margin-top: 30px !important; margin-bottom: 0px!important; border: 1px solid #dcdbdb; margin: 15px; padding: 15px 0 0; width: auto!important } .univers-calendrier-ppfr .container { width: auto!important } .univers-calendrier-ppfr .js-tabs { width: 100%!important; margin-left: 0!important; margin-right: 0!important; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .etabs { border-bottom: 0; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .etabs .tab { width: 100%; border-left: 0!important; border-right: 0!important; margin-left:0; background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/plus.gif') right no-repeat #f8f8f8; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .etabs .tab.active { border-bottom: 1px solid #dcdbdb; background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/moins.gif') right no-repeat #f8f8f8; } .univers-calendrier-ppfr .show-all-models { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/plus-blanc.gif') right no-repeat #4ca0b3; color: white; height: 50px; display: block; line-height: 50px; padding: 0 30px; font-size: 15px; font-weight: bold; } .univers-calendrier-ppfr .show-all-models.current { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/moins-blanc.gif') right no-repeat #4ca0b3; } .univers-calendrier-ppfr .show-all-models.no-collapse { background-image: none!important; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .infos { width: 100%; } .univers-calendrier-ppfr.category-folded .promos .products-wrapper { margin-bottom: 0!important; } .univers-calendrier-ppfr.category-folded .promos .products-wrapper, .univers-calendrier-ppfr.category-folded .promos .products-wrapper .products, .univers-calendrier-ppfr.category-folded .promos .products-wrapper .promo { width: 100%!important; height: auto!important; } .univers-calendrier-ppfr.category-folded .promos .products { position: relative; text-align: center; } .univers-calendrier-ppfr.category-folded .promos .products-wrapper .promo { width: 49%!important; display: inline-block; min-width: 250px; } .univers-calendrier-ppfr.category-folded .promos .btn-buy { position: relative; bottom: auto; left: auto; } .univers-calendrier-ppfr.category-folded .promos .promo .btn-buy { margin: 10px 0 20px; } .univers-calendrier-ppfr .pricematrix-tab .pricematrix > p { margin-top: 20px; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda .tab-content .left, .univers-calendrier-ppfr .wrapper-desc-cal-agenda .tab-content .right { width: 100%; display:block; } .univers-calendrier-ppfr .tab-content { border: 0!important; } /* footer */ .univers-calendrier-ppfr .footer-flat-wrapper .reass { margin-top: 0; } .univers-calendrier-ppfr.category-calendrier-photo-mural .li-cal-mural, .univers-calendrier-ppfr.category-calendrier-photo-mural-simple .li-cal-mural, .univers-calendrier-ppfr.category-calendrier-photo-mural-double .li-cal-mural, .univers-calendrier-ppfr.category-calendrier-photo-mural-design .li-cal-mural, .univers-calendrier-ppfr.category-calendrier-photo-mural-long .li-cal-mural, .univers-calendrier-ppfr.category-calendrier-photo-a-poser .li-cal-ap, .univers-calendrier-ppfr.category-calendrier-photo-a-poser-pele-mele .li-cal-ap, .univers-calendrier-ppfr.category-calendrier-photo-a-poser-luxe .li-cal-ap, .univers-calendrier-ppfr.category-calendrier-poster .li-cal-poster, .univers-calendrier-ppfr.category-calendrier-poster-pele-mele .li-cal-poster, .univers-calendrier-ppfr.category-calendrier-magnet .li-cal-poster, .univers-calendrier-ppfr.category-calendrier-bancaire .li-cal-bancaire, .univers-calendrier-ppfr.category-agenda-photo .li-cal-agenda { display: none; } .univers-calendrier-ppfr .wrapper-menu-cal-agenda.footer-menu { margin: 0; border-top: 1px solid #dcdbdb; } /** product list **/ .univers-calendrier-ppfr .product-list-container, .univers-calendrier-ppfr .product-list-container-level1-cat { margin: 0 15px; border-top: 0; border-left: 1px solid #dcdbdb; border-right: 1px solid #dcdbdb; border-bottom: 1px solid #dcdbdb; } .univers-calendrier-ppfr .product-list-container-level1-cat .loader, .univers-calendrier-ppfr .product-list-container .loader { margin: 0; padding: 30px 0; } .univers-calendrier-ppfr .product-list-container-level1-cat .category-products.folding, .univers-calendrier-ppfr .product-list-container .category-products.folding { border: 0!important; background-color: white; min-height: 10px; } .univers-calendrier-ppfr .category-products.folding .product-inner .desc-txt { display: none!important; } .univers-calendrier-ppfr .category-products.folding .more-products { background-color: white; } .univers-calendrier-ppfr .product-overlay { position: fixed; top: 0; left: 0; width: 100vw; background: black; opacity: 0.8; z-index: 1000; min-height: 100%; } .univers-calendrier-ppfr .product-popin { position: fixed; top: 0; left: 0; width: 100vw; background: transparent; z-index: 1100; padding: 15px; min-height: 100vh; max-height: 100vh; overflow-y: auto; } .univers-calendrier-ppfr .product-inner { background: white; opacity: 1; width: 100%!important; padding: 30px 15px; } .univers-calendrier-ppfr .category-products.folding .product { margin:0; width: 33%; } .univers-calendrier-ppfr .product-inner .main-image { text-align: center; } /** fin product list **/ } @media (max-width: 767px) { .univers-calendrier-ppfr .wrapper-menu-cal-agenda.footer-menu li{ width: 50%; margin: 0; padding: 0 0 17px; float: left; background-color: #f8f8f8; border: solid #dcdbdb; border-width: 0 1px 1px 0; } .univers-calendrier-ppfr .category-products.folding .product { margin:0; width: 50%; } .univers-calendrier-ppfr .category-products.folding .more-products { width: 100%; } } @media (max-width: 500px) { .univers-calendrier-ppfr .wrapper-desc-cal-agenda h2.col-right { font-size: 18px; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda p.col-right span { font-size: 22px; } } @media (max-width: 400px) { .univers-calendrier-ppfr h1 { font-size: 20px; } .univers-calendrier-ppfr .wrapper-desc-cal-agenda h2.col-right { margin-top: 3%; font-size: 15px; } .univers-calendrier-ppfr .btn-red.btn-noel { font-size: 13px; } } /*** DEBUT Menu Pages Calendrier ***/ .univers-calendrier-ppfr .cal-mural > img { margin-left: -25px;} .univers-calendrier-ppfr .cal-ap > img { margin-left: 10px;} .univers-calendrier-ppfr .cal-bancaire > img { margin-top:20px !important;} .univers-calendrier-ppfr .agenda > img { margin-top: 20px !important;} .univers-calendrier-ppfr .category-folded [role="main"]{ width: 100%; padding: 0;} .univers-calendrier-ppfr .wrapper-menu-cal-agenda{ margin-top: 15px; text-align: center; background-color: #f8f8f8; margin-top: 0; border-bottom: 1px solid #dcdbdb; margin-bottom: 25px; } .univers-calendrier-ppfr .wrapper-menu-cal-agenda.mural .cal-mural strong, .univers-calendrier-ppfr .wrapper-menu-cal-agenda.poser .cal-ap strong, .univers-calendrier-ppfr .wrapper-menu-cal-agenda.poster .cal-poster strong, .univers-calendrier-ppfr .wrapper-menu-cal-agenda.bancaire .cal-bancaire strong, .univers-calendrier-ppfr .wrapper-menu-cal-agenda.agenda .agenda strong { color: #4ca0b3; } .univers-calendrier-ppfr .wrapper-menu-cal-agenda li a strong{ min-height:40px; color: #616161; display: block; font-family: "open_sanssemibold"; font-size: 14px; font-weight: normal; text-transform: capitalize; } .univers-calendrier-ppfr .wrapper-menu-cal-agenda li a:hover strong{ opacity: 0.7; } .univers-calendrier-ppfr .wrapper-menu-cal-agenda li{ display: inline-block; margin: 0 3% 17px; vertical-align: top; } @media (max-width: 1200px) { .univers-calendrier-ppfr .wrapper-menu-cal-agenda li{ margin: 0 2% 17px; } } .univers-calendrier-ppfr .wrapper-menu-cal-agenda a img{ margin-top: 23px; vertical-align: bottom; } .univers-calendrier-ppfr .wrapper-menu-cal-agenda li a span{ display: block; height: 120px; } @media(min-width:768px) and (max-width:1200px){ .univers-calendrier-ppfr .wrapper-desc-cal-agenda .etabs li{ font-size:16px; } } /*** FIN Menu Pages Calendrier ***/ /* Produit indisponible */ .product-unavailable-overlay, .product-unavailable-overlay:hover { opacity: 0.6 !important; } .product-unavailable-overlay a:hover img { opacity: 1 !important; } .product-unavailable { position: absolute; width: 100% !important; height: auto; z-index: 7; top: 39%; left: 0; text-align: center; } .product-unavailable p { background: #616161 none repeat scroll top left; color: #FFF !important; padding: 7px 15px; border-radius: 5px; font: 14px "opensans-bold" !important; display:inline-block; } @media (max-width:568px) { .cart-nextgen .product-unavailable p { padding: 5px 12px; font-size:12px !important; } .cart-nextgen .product-unavailable { left: 6px; } } /* PLNPHO-2940 - No SEO tab/mobile */ @media (max-width:768px) { .cat-nextgen .footer-seo { display:none; } } /* Bouton Flat Design */ .btn-flat { display: inline-block !important; font-family: "Novecento-demibold"!important; color:#FFFFFF!important; font-size: 15px!important; text-decoration: none!important; margin: 0 auto!important; text-align:center!important; background-image: none!important; box-shadow: none!important; border-radius: 0!important; border: none!important; opacity: 1!important; transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; } .btn-flat:hover { opacity: 0.8 !important; filter: alpha(opacity=80); } .btn-flat > span { display: inline-block; height: 45px !important; line-height: 43px !important; padding: 0 30px 0 0 !important; background-image: none !important; text-shadow: none !important; } .btn-flat:active { opacity: 1 !important; } .btn-flat.height50, .btn-flat.medium { font-size:18px !important; padding: 0 20px !important; } .btn-flat.btn-slide span { padding-right: 35px !important; height: 50px !important; line-height: 47px !important; } .btn-flat.height50 > span, .btn-flat.medium > span { padding-right: 35px !important; height: 50px !important; line-height: 48px !important; } .btn-flat.font15 { font-size: 15px !important; line-height: 43px !important; } .btn-flat.font18 { font-size:18px !important; line-height: 40px !important; } .btn-flat-height45, .btn-flat.height45, .btn-flat.small { padding: 0 16px !important; } .btn-flat-height45 > span, .btn-flat.height45 > span, .btn-flat.small > span { height: 41px !important; } .btn-flat-large { width:260px !important; } .btn-flat.margin-top-bottom-17 { margin: 17px auto !important; } #lightbox-detail.btn-flat > span { font-size: 15px !important; } .btn-flat.add-promo-to-cart > span { display: block; text-decoration: none; color: #FFFFFF; } .bouton-flat.yellow { background-color: #ffcf08; border-color:#ffcf08; } .bouton-flat.bordeau { background-color:#c31640; border-color:#c31640; } .bouton-flat.gray { background-color: #616161; border-color:#616161; } .bouton-flat.graylight { background-color: #e3e4e5; border-color:#e3e4e5; color: #616161; } .bouton-flat.graylight span { color: #616161; } .promos .btn-buy .btn-flat.btn-green { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/icon-basket.png") no-repeat scroll 188px 10px #1eb580 !important; border: 2px solid #1eb580 !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .js-adding-product .btn-buy .btn-flat.btn-green, .promos.js-adding-product .btn-buy .btn-flat.btn-green { background-position: 188px -119px !important; background-color: #FFFFFF !important; border: 2px solid #dcdcdc !important; color: #616161; } .js-adding-product .btn-buy .btn-flat.btn-green .add-to, .promos.js-adding-product .btn-buy .btn-flat.btn-green .add-to { display:none; } .js-adding-product .btn-buy .btn-flat.btn-green .added-to, .promos.js-adding-product .btn-buy .btn-flat.btn-green .added-to { display:block !important; margin-right: 10px; background-color: transparent !important; color: #616161; } .promos .add-promo-to-cart span { height:41px !important; } .btn-flat.right-arrow > span { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-arrow.png") !important; background-repeat: no-repeat !important; background-position: right -45px !important; } /*** Bouton fond vert ***/ .btn-green, .btn-flat.green { background-color: #1eb580 !important; } .btn-green:active, .btn-flat.green:active { background-color: #1a9c6e !important; } .btn-green-right-arrow > span, .btn-green.right-arrow > span { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-arrow.png") !important; background-repeat: no-repeat !important; background-position: right -45px !important; } input.btn-flat.medium{ padding:0 51px 0 16px !important; } input.btn-flat.right-arrow{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-arrow.png") !important; background-repeat: no-repeat !important; background-position: 93% -45px !important; font-size: 18px !important; padding-bottom: 2px !important; } .btn-green-cart > span{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-cart.png") !important; background-repeat: no-repeat !important; background-position: right 10px!important; } /*** Bouton fond bleu ***/ .btn-blue { background-color: #1d82b0 !important; border: 2px solid #1d82b0 !important; } .btn-blue:active { background-color: #186b91 !important; } .btn-blue.btn-blue-bottom-arrow > span, .btn-blue.bottom-arrow > span{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-arrow.png") !important; background-repeat: no-repeat !important; background-position: right 12px !important; } .btn-blue-right-arrow > span, .btn-blue.right-arrow > span{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-arrow.png") !important; background-repeat: no-repeat !important; background-position: right -48px !important; } /*** Bouton fond rouge ***/ .btn-flat.red { background-color: #c8081d !important; } .ban-popup-wrapper .close { display: block; } /*** Bouton fond white ***/ .btn-white { background-color: #ffffff !important; border: 2px solid #dcdbdb !important; } .btn-white:active { background-color: #ffffff !important; } .btn-flat.btn-white > span { padding-right: 0 !important; } .btn-flat.btn-white.small span { font-size: 12px !important; height: 36px !important; line-height: 34px !important; } .btn-flat.btn-white{ color:#616060!important; } /*** Pour eviter un souci d'intégration dans les pages "calendrier-photo-mural" ***/ /*.btn-flat.blue.btn-blue { border:2px solid #1d82b0 !important; }*/ .category-folded .btn-flat.blue.current, .category-folded .btn-flat.btn-blue.current { background: none !important; padding: 0 16px !important; border: 2px solid #d0d0d0!important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .category-folded .btn-flat.blue.current > span, .category-folded .btn-flat.btn-blue.current >span { color: #616161 !important; height:41px !important; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/btn-blue-flat-down.png") no-repeat scroll right 10px transparent !important; } .btn-flat.btn-taille-2 { width: auto !important; display: table !important; margin-left: auto !important; margin-right: auto !important; } .btn-flat.btn-taille-2 > span { padding: 0 35px 0 0 !important; width: auto !important; font-size: 18px !important; } .btn-flat.big { font-size:22px !important; padding: 0 38px; } .btn-flat.big > span { padding-right: 35px !important; height: 62px !important; line-height: 58px !important; background-position: right -39px !important; } #bt-perso-content { clear:both; text-align: center; } #lightbox-actions .green { margin: 15px 0!important; } .btn-flat.small > span, .btn-flat.small > span > span{ background-position: right -48px !important; font-size:15px !important; } .btn-flat.medium > span, .btn-flat.medium > span > span { font-size:18px !important; } .btn-flat.big > span, .btn-flat.big > span > span { font-size:22px !important; } .atelier-mariage-souscat .btn-flat.big > span{ line-height: 64px !important; } .button.btn-flat { margin: 0 !important; } .button.btn-flat.small { height: 45px !important; } .button.btn-flat.small > span { height: 43px !important; line-height: 41px !important; } .button.btn-flat.btn-proceed-checkout > span { width: inherit !important; } .checkout-cart-index .page-content > .buttons-set > .btn-checkout{ margin: 0 112px 15px 0; } .btn-flat.picto-cart span { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/icon-basket.png") no-repeat scroll right 10px transparent !important; } .btn-flat.btn-blue.medium.right-arrow span { background-position: right -45px !important; } /** tharukaButton **/ .tharukaButton{ display:inline-block; font-family: 'Novecento-demibold' !important; color: white !important; border:2px solid black; text-decoration: none !important; line-height: 1 !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; background-color: #1d82b0; border-color: #1d82b0; font-size: 15px !important; padding: 6px 20px 7px; /* keep ancienne hauteur */ } .tharukaButton span { display:inline-block; vertical-align: middle; } .tharukaButton:hover { opacity:0.85; } .tharukaButton:active { background-color: #05618a; border-color:#05618a; } .tharukaAd { width: 99% !important; } /** Style flat v2 **/ .bouton-flat { display:inline-block; font-family: 'Novecento-demibold' !important; color: white !important; border:2px solid black; text-decoration: none !important; line-height: 1 !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; border-radius: 0 !important; } .bouton-flat span { display:inline-block; vertical-align: middle; } .bouton-flat:hover { opacity:0.85; } .bouton-flat.extrasmall { font-size:14px !important; padding: 6px 10px 6px!important; } .bouton-flat.small { font-size:15px !important; padding: 10px 20px 9px; } .bouton-flat.small.sans-picto { padding: 12px 20px 13px; } .bouton-flat.medium { font-size:18px !important; padding: 11px 20px 12px; } .bouton-flat.large { font-size:22px !important; padding: 16px 38px 17px; } .bouton-flat.blue { background-color: #1d82b0; border-color:#1d82b0; } .bouton-flat.blue:active { background-color: #05618a; border-color:#05618a; } .bouton-flat.white { background-color: #ffffff; border-color:#eee; color:#616161 !important; } .bouton-flat.white:active { background-color: #ffffff; border-color:#ffffff; } .bouton-flat.green { background-color: #1eb580; border-color:#1eb580; } .bouton-flat.green:active { background-color: #1a9c6e; border-color:#1a9c6e; } .bouton-flat.gris { background-color: #616161; border-color:#616161; } .bouton-flat.gris:active { background-color: #333333; border-color:#333333; } .bouton-flat.pink { background-color: #e53360; border-color:#e53360; } .bouton-flat.pink:active { background-color: #d82d58; border-color:#d82d58; } .bouton-flat.yellow { background-color: #ffcf08; border-color:#ffcf08; } .bouton-flat.gris-clair { background-color:#b7b8ba; border-color:#b7b8ba; } .bouton-flat.gris-clair span { color:#555353; } .bouton-flat.turquoise { background-color:#4ca0b3; border-color:#4ca0b3; } .bouton-flat.lightgreen { background-color:#7db161; border-color:#7db161; } .bouton-flat.lightpink { background-color:#febfcc; border-color:#febfcc; } .bouton-flat.lightgray { background-color:#e3e4e5; border-color:#e3e4e5; } .bouton-flat.orange { background-color:#ea6645; border-color:#ea6645; } .bouton-flat.verylight-grey { background-color:#e3e4e5; border-color:#e3e4e5; } .bouton-flat.black { background-color:black; border-color:black; } .bouton-flat.red { background-color:#d01609; border-color:#d01609; } .bouton-flat.picto-arrow-right span:after { content: " "; height:20px; width:10px; margin-left: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/arrow-white.png") no-repeat scroll 0 center transparent; } .bouton-flat.picto-light-arrow-right span:after { content: " "; height:12px; width:19px; margin-left: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-arrow-white-right.png") no-repeat scroll 0 top transparent; } .bouton-flat.no-picto span:after { content: " "; height:20px; display:inline-block; vertical-align: middle; background-image: none; } .bouton-flat.picto-arrow-down span:after { content: " "; height:20px; width:20px; margin-left: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-flat-arrow.png") no-repeat scroll -20px top transparent; } .bouton-flat.picto-arrow-1px span:after { content: " "; height:20px; width:20px; margin-left: 5px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto-arrow-1px.png") no-repeat scroll top left transparent; } .bouton-flat.picto-arrow-1px.picto-arrow-1px.picto-right { padding-left:10px; } .bouton-flat.picto-arrow-1px.picto-right span:before { content: " "; height:20px; width:20px; margin-right: 5px; display:inline-block; vertical-align: middle; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto-arrow-1px.png") no-repeat scroll top left transparent; } .bouton-flat.picto-valid-left span:before { content: " "; height:18px; width:21px; margin-right: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto-valid.png") no-repeat scroll top left transparent; } .bouton-flat.picto-valid-left-white span:before { content: " "; height:18px; width:21px; margin-right: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto-check.png") no-repeat scroll top left transparent; } .bouton-flat.picto-cancel span:before { content: " "; height:18px; width:21px; margin-right: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto-close-white.png") no-repeat scroll top left transparent; } .bouton-flat.picto-arrow-1px.picto-grey-variant span:after { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto-arrow-1px.png") no-repeat scroll bottom left transparent; } .bouton-flat.picto-arrow-1px.picto-grey-variant.picto-right span:before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cardsopts/picto-arrow-1px.png") no-repeat scroll bottom left transparent; } .bouton-flat.white.picto-arrow-down span:after { background-position: -80px top; } .bouton-flat.white.picto-arrow-right span:after { background-position: -100px top; } .bouton-flat.large.picto-arrow-down span:after, .bouton-flat.large.picto-arrow-right span:after, .bouton-flat.large.picto-cart span:after, .bouton-flat.large.deployed span:after { margin-left:15px !important; } .bouton-flat.picto-cart span:after { content: " "; height:21px; width:21px; margin-left: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/icon-basket.png") no-repeat scroll 94% top transparent; } /** Btn deployment **/ .bouton-flat.deployed { border-color: #dfdddd; color: #616161 !important; background-color: white !important; } .bouton-flat.deployed.blue span:after { content: " "; height:20px; width:20px; margin-left: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-flat-arrow.png") no-repeat scroll -40px top transparent !important; } .bouton-flat.deployed.green span:after { content: " "; height:20px; width:20px; margin-left: 10px; display:inline-block; vertical-align: middle; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/sprite-flat-arrow.png") no-repeat scroll -60px top transparent !important; } /* + et - quantity select */ .qty-select-flat { border: medium none; display: inline-block; height: 23px; width: 23px; cursor: pointer; vertical-align: middle; text-align:center; } .qty-select-flat:hover { opacity: 0.8; } .qty-select-flat.round { border-radius: 11px; } .qty-select-flat.gold { background-color: #dcc468; } .qty-select-flat.gold:active { background-color:#c1a848; } .qty-select-flat.blue { background-color:#2c78a1; } .qty-select-flat.blue:active { background-color:#05618a; } .qty-select-flat.green { background-color:#1eb580; } .qty-select-flat.green:active { background-color:#1a9c6e; } .qty-select-flat.input-text { background: none repeat scroll 0 0 transparent; border: 1px solid #dcdbdb; border-radius: 2px; height: 27px; margin: 0 5px; padding: 0; text-align: center; width: 50px; vertical-align:middle; } /* Btn radio */ .btn-flat-radio-wrapper input { display: none; } .btn-flat-radio-wrapper li { list-style: none; background: none !important; padding:0 !important; margin:5px 0 !important; } .btn-flat-radio-wrapper label { cursor: pointer; } .btn-flat-radio-wrapper div { display: inline-block; } .btn-flat-radio-wrapper div:before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/btnradio_grey.jpg") no-repeat scroll left bottom transparent; content: ""; cursor: pointer; display: inline-block; height: 15px; margin-right: 6px; vertical-align: sub; width: 15px; } .btn-flat-radio-wrapper li:hover div:before { background-position:top left; } .btn-flat-radio-wrapper li.selected div:before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/btnradio_grey.jpg") no-repeat scroll left -22px transparent !important; } .btn-flat-radio-wrapper.blue li.selected div:before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/btnradio_blue.jpg") no-repeat scroll left -22px transparent !important; } /* BTN RADIO Rose */ .btn-radio::before { background-color: #DCDBDB; /*border: 3px solid lightgrey;*/ box-shadow: 1px 1px 1px #B7B6B6 inset; border-radius: 50px; content: ""; display: inline-block; height: 22px; margin-right: 6px; vertical-align: top; width: 22px; } .checked .btn-radio.pink::before { background-color: #EF83B2 !important; border: 3px solid #FFF !important; } /* Scroll to top */ #btn-flat-scroll-top { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/category-folded/btn-scroll-top.png") no-repeat scroll center 15px #1d82b0; height: 50px; width: 50px; cursor: pointer; display:inline-block; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #btn-flat-scroll-top:hover { opacity:0.7; } /*** Fin Bouton Flat Design ***/ /*------------------------------------*\ $LAYOUT PAGE CMS \*------------------------------------*/ .cms-page-view .l-main h1, .cms-page-view .col-main h1, .cms-page-view .col-md-9 h1{ padding: 10px 0; font: 28px museo-sans-500; margin: 0 0 30px; } .cms-page-view .l-main h2, .cms-page-view .l-main h3, .cms-page-view .col-md-9 h2, .cms-page-view .col-md-9 h3, .cms-page-view .col-main h2 { margin-top:25px; margin-bottom:10px; } .cms-page-view .l-main h1, .cms-page-view .col-main h1, .cms-page-view .l-main h2, .cms-page-view .l-main h3, .cms-page-view .col-md-9 h1, .cms-page-view .col-md-9 h2, .cms-page-view .col-md-9 h3{ color: #1e82b0; } .cms-page-view .l-main address, .cms-page-view .l-main p, .cms-page-view .l-main li, .cms-page-view .col-main li, .cms-page-view .col-md-9 address, .cms-page-view .col-md-9 p, .cms-page-view .col-md-9 li, .cms-page-view .col-main p { font: 14px/18px OpenSans; color: #616060; } .cms-page-view .col-main .span-img { margin: 5px 0; } .cms-page-view .l-main .mentions-small{ font-size: 12px; color:#616060; font-style:italic; } .cms-page-view .std ul.m-left{ margin-left:30px; } .chevron-list{ margin-left: 30px; } .chevron-list li{ margin: 5px 0; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/breadcrumbs.png") no-repeat 0 -15px; padding-left: 10px; font: 14px/18px OpenSans; color: #616060; } .cms-page-view .l-main ol, .cms-page-view .col-md-9 ol { list-style: decimal; color: #1e82b0; margin-left: 30px; font-size: 14px; } .cms-page-view .l-main h2 a, .cms-page-view .col-md-9 h2 a { font: 22px museo-sans-500; } .cms-page-view .l-main a, .cms-page-view .col-md-9 a { font: 14px/18px OpenSans; color: #1e82b0; text-decoration: none; } .cms-page-view .l-main a:hover .cms-page-view .col-md-9 a:hover { text-decoration: underline; } #cms-grouplist ul ul.cms-level1 li.cms-level1{ margin: 12px 0; } /* page contact */ .contacts-index-index .form-list label{ font: 15px museo-sans-500; color: #1e82b0; } .contacts-index-index .form-list .input-box, .contacts-index-index .form-list select{ font-size: 16px !important; margin-bottom:5px; } .contacts-index-index .form-list select{ height:34px; } .contacts-index-index .form-list label, .contacts-index-index .buttons-set{ text-align: right; } .contacts-index-index.cms-page-view span.required, .contacts-index-index.cms-page-view p.required { padding-top: 13px; color: red; } .contacts-index-index .form-list .form-comment{ color:#616060; font: 12px OpenSans; } .contacts-index-index .with-padding{ padding-top:4px; } .contacts-index-index .validation-advice { margin-top:3px; background: #F10202; color: #ffffff; font: 12px museo-sans-500; text-align: center; } .contacts-index-index .catalog-request-info-legale { padding: 30px 0; text-align: justify; color: #616060; font: 13px OpenSans; } .contacts-index-index .form-list .input-box textarea { height: 100px; width: 100%; } @media only screen and (max-width:767px) { .contacts-index-index .form-list .comment .input-box { width: 100%; } .contacts-index-index .fieldset .form-list { width:100%; } .contacts-index-index .form-list .input-box, .contacts-index-index .form-list .input-box select { width: 100%; max-width:100%; } .contacts-index-index .form-list .input-box input, .contacts-index-index textarea { width: 100%; } .contacts-index-index .form-horizontal .form-group{ margin-right:0; margin-left:0;/* on annule le 'row" en attendant un template OK */ } .contacts-index-index .buttons-set, .contacts-index-index .wide.comment{ padding:0 15px; } } .form-group input[type="radio"], .form-group input[type="checkbox"]{ margin:9px 10px 0; } .disabled{ background-color: #eceeef!important; cursor: not-allowed; } /* TABLES */ .cms-page-view .table-simple { margin:10px 0;border: 3px solid #f1f1f1; -webkit-border-radius: 10px; border-radius: 10px; } .cms-page-view .table-simple { width:100%; } .cms-page-view .table-simple thead tr{ height:30px; } .cms-page-view .table-simple th{ background:url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/checkout/cart/border-dotted-thead.png") right center no-repeat #fcfbf5;font:16px museo-sans-500; color:#616060; text-align:center; vertical-align:middle;} .cms-page-view .table-simple th.a-right{ background-image:none;-webkit-border-top-right-radius: 5px; border-top-right-radius: 5px;} .cms-page-view .table-simple td { height:40px;border-bottom:1px dotted #d2d2d2; border-right:1px dotted #d2d2d2; text-align:center; vertical-align:middle;font:13px museo-sans-500; color:#616060;} .cms-page-view .table-simple .last{border-right:none;} .cms-page-view .table-simple a{ color:#1e82b0; } .cms-page-view .table-simple a:hover{ text-decoration:none; } /* "Home SlideShow" */ .carousel-inner .left, .carousel-inner .right { padding: 0; float: none; } .carousel-fade .carousel-inner .item { transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0px; transform: translate3d(0px, 0px, 0px); } .carousel-control.left:hover::before { background-position: right -97px !important; } .carousel-control.right:hover::before { background-position: left -97px !important; } .carousel .carousel-indicators li { width: 16px; height: 16px; cursor: pointer; background-color: #aeaeae; border: 0; margin: 3px; border-radius: 16px; } .carousel .carousel-indicators .active { background-color: #1e82b0; } .carousel .carousel-control:before { content: " "; height: 97px !important; width: 50px !important; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/home/slide-nav.png") !important; background-repeat: no-repeat !important; display: block; margin-top: -100%; position: absolute; top: 50%; } .carousel .carousel-control { height: inherit !important; background-image: none !important; width: 50px !important; padding:0; display: table-cell; } .carousel-control.left:before { background-position: right 0; } .carousel-control.right:before { background-position: left 0; } .carousel-indicators { bottom: 5px !important; } /* FIN CSS pour le "Home SlideShow" */ /** Popup au click sur ban slideshow **/ .ban-popup { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/1pxsemiblack.png") top left repeat transparent; height: 100%; left: 0; position: fixed; text-align: center; top: 0; width: 100%; z-index: 99999; } .ban-popup-wrapper { background: none repeat scroll 0 0 white; border: 2px solid #eaeaea; box-shadow: 0 0 10px black; color: #616060; font-family: Museo-sans-500; margin: 10% auto 0; padding: 20px; width: 930px; font-size: 13px; position:relative; text-align: left; } .ban-popup-wrapper .close { position: absolute; right: 10px; top: 5px; cursor: pointer; font-size:inherit; } .ban-popup-wrapper p { font-size: 13px !important; line-height: 160% !important; } .ban-popup-wrapper .vert { color:#7ec6ba !important; } #echantillons-popup .entete { font-size:15px !important; margin:15px 0; } .ban-popup-wrapper .encart-mea { border: 2px solid #9c9c9c; border-radius: 10px; margin-top: 20px; padding: 20px; } #papiers-popup .ban-popup-wrapper { margin:5% auto 0; } #echantillons-popup .encart-mea .titre { float: left; display: block; height: 80px; margin-right: 10px; color:#7ec6ba; font-weight:bold; } #papiers-popup .encart-papier{ border: 2px solid #7ec6ba; border-radius: 5px; padding: 10px; position: relative; height: 105px; margin: 10px 0; } #papiers-popup .encart-papier img { left: -3px; position: absolute; top: -2px; } #papiers-popup .encart-papier .inline-right{ display: inline-block; margin-left: 189px; } #papiers-popup .titre-papier { color: #7ec6ba; font-size: 15px !important; font-weight: bold !important; } /* Step slider */ .step-slider { text-align: center; background-color: #f8f8f8; } .step-slider > div { font-size: 20px; font-family: 'museo-sans-500'; } .step-slider > div .num_step { float: left; height: 30px; margin-right: 10px; text-align: center; width: 30px; } .step-slider > div .lib_step { color: #e53360; } .step-slider .col-sm-4{ padding:15px 0; } /* $BLOCKS TEXT */ .block-text h2, .block-text p{ margin: 0 0 10px 0; } .block-text p{ font: 14px 'opensans'; color: #616060; } .block-text p{ text-align: justify; } /* Accroche sous menu - block avec texte */ .accroche-sous-menu .block-text { padding: 10px 10px 0; border: 2px solid #eaeaea; background-color: #fefcf7; margin-bottom: 10px; } /* Mea boutiques */ .mea-boutiques { position: fixed; right: 0px; top: 175px; z-index: 100; } /* Reasscat */ .cat-nextgen .reasscat { position: relative; } .cat-nextgen .inner-reasscat { position: relative; } .cat-nextgen .reasscat .wrapper .visuel { position: absolute; bottom:0; right: 0; } .cat-nextgen .reasscat .wrapper > div > div { min-height: 200px; } .cat-nextgen .reasscat h4, .cat-nextgen .footer_description_category h2 { text-align:center; } .cat-nextgen .footer_description_category h2 { padding:25px 0 40px; } .cat-nextgen .footer_description_category h3 { font:22px "open_sanslight"; color:#616161; padding-top:20px; } .cat-nextgen .reasscat h5, .cat-nextgen .footer_description_category h4 { text-transform:uppercase; padding:20px 0 5px; display:inline-block; } .cat-nextgen .reasscat p { font:14px "opensans"; color:#616161; } /* fin reasscat */ /* Noel 2015 */ @media only screen and (min-width:992px) { .cms-home div[role="main"] { background-color: #FFF; } } /** Message d'info concernant les packs crédits **/ .notice-link { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-info.png") no-repeat scroll 8px 7px transparent; border: 1px solid #E95A7B; border-radius: 10px; height: inherit; line-height: 35px !important; margin-bottom: 5px !important; margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; display:inline-block; padding: 0 40px; font: 14px/17px OpenSans; } .notice-link a { color:#E95A7B; } .checkout-onepage-success .page-content p.notice-link { display: table; } /* PAGE 404 */ .page-404 h1 { color: #1e82b0; font: 31px museo-sans-500; margin: 80px auto; } .page-404 p { color: #616060; font: 17px museo-sans-500; } .page-404 a { color: #1e82b0; font: 18px/19px museo-sans-500; } .page-404 .liens-categories { margin-top: 25px; } .page-404 .liens-categories a { border-right: 1px solid #cbcaca; color: #1e82b0; font: 18px/19px museo-sans-500; padding: 0 10px; } .page-404 .contact { display:inline-block; margin: 50px auto; } .page-404 .contact .contact-telephone { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/telephone.svg") no-repeat scroll 0 center rgba(0, 0, 0, 0); color: #616060; float: left; font: 17px Novecento-demibold; margin: 10px 0 0 105px; padding: 0 10px 0 20px; } .page-404 .contact .contact-mail { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/email.svg") no-repeat scroll 10px 5px rgba(0, 0, 0, 0); border-left: 1px solid #cac9c7; color: #616060; float: left; font: 17px Novecento-demibold; margin-top: 10px; padding-left: 38px; } .page-404 .contact .contact-mail a { color: #616060; font: 17px Novecento-demibold; } .page-404 .contact .contact-heure { font: italic 13px museo-sans-500; margin-top:15px; clear: both; } @media only screen and (max-width:767px) { .page-404 .contact { width: 100%; } .page-404 .contact .contact-telephone { margin-left: 15px; } } .noroute-page #main-footer { margin-top: 0; } .noroute-page .reassurance-header { display: none; } .checkout-cart-empty .footer-flat-wrapper .reass, .cms-index-noroute .footer-flat-wrapper .reass{ margin-top: 0; } /*** Page Teasing Packs ***/ .packs-teasing #onglets-univers a.carterie { background-color:#CECDCD; margin-top:-10px; } .block-actions { display: table; } .block-actions .col-left, .block-actions .col-right { float: none; vertical-align: middle; display: table-cell; } .block-actions .col-left { text-align: center; width: 100%; } .packs-teasing .reassurance-header { display:none; height:0; width:0; } .packs-teasing .entete-page-category.teasing-pack { border-bottom: 0 none !important; border-top: 1px dotted #B2B2B2 !important; height: 125px !important; margin-left: 0 !important; margin-top: 30px; padding:0 7%; width: 100% !important; } .packs-teasing .entete-page-category.teasing-pack h1 { background-color: #EA6E8D; color: #FFFFFF; font-family: "museo-sans-500"; font-size: 22px; height: 47px; line-height: 47px; margin: 30px auto 0; text-align: center; width: 60%; } .packs-teasing .entete-page-category.teasing-pack h1 .left { display:block; height:47px; width: 100%; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/packs-teasing/ruban_left.png") no-repeat transparent; padding: 0; } .packs-teasing .entete-page-category.teasing-pack h1 .right { display:block; height:47px; padding: 0; width: 100%; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/packs-teasing/ruban_right.png") no-repeat top right transparent; } .packs-teasing h1 .soustitre { color:#ea6e8d; font-size:22px; line-height: 24px; } .packs-teasing .block-actions {clear: both;width:100%;float:none;} .packs-teasing .encart-produit { min-height:340px; float:left; position:relative; margin-top: 30px; padding:0; } .packs-teasing .encart-produit .product {margin-right:10%;} .packs-teasing .encart-produit .title-product { color: #1E82B0; display: block; font-family: "museo-sans-500"; font-size: 24px; padding-left: 115px; position: absolute; text-align: center; line-height: 25px; } .packs-teasing .encart-produit .visuel-produit { float:left; margin-top:25px; margin-right:10px; } .packs-teasing .encart-produit .economie { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/packs-teasing/bg_reduc.png") no-repeat scroll left top transparent; color: #EA6E8D; display: block; height: 99px; left: 0; line-height: 17px; padding-left: 11px; padding-top: 25px; position: absolute; top: 0; width: 109px; } .packs-teasing .encart-produit .economie span { font-size:38px; font-weight:bold; } .packs-teasing .encart-produit .economie span span { font-size:25px; } .packs-teasing .encart-produit .description-produit { padding-top:60px; font-size:12px; } .packs-teasing .encart-produit .validite-produit { margin:20px 0; font-size:12px; } .packs-teasing .encart-produit .price-produit .tarifs p { float:left; font-size:24px; line-height:inherit; color:#1e82b0; } .packs-teasing .encart-produit .price-produit .tarifs { bottom: 25px; left: 20px; position: absolute; text-align: center; width: 40%; } .packs-teasing .encart-produit .price-produit .tarifs .priceold { margin-left:5px; font-size:16px; color:#ea6e8d; line-height: 39px; } .packs-teasing .encart-produit .price-produit .tarifs .price {font-weight:bold;} .packs-teasing .encart-produit .price-produit .tarifs .priceold .price {font-weight:normal;} .packs-teasing .encart-produit .price-produit .tarifs .price small {font-size:18px;} .packs-teasing .encart-produit .price-produit .tarifs .priceold .price small {font-size:13px;} .packs-teasing .encart-produit .btn-ajouter { right: 90px; position: absolute; top: 260px; } .packs-teasing .btn-valid-commande {border-top:1px dotted #B2B2B2;text-align:center;} .packs-teasing .btn-valid-commande button { margin: 30px 0; } .packs-teasing .btn-valid-commande button:hover { background-color:#1E82B0; } .packs-teasing .btn-valid-commande button span { background:none; } .packs-teasing .block-actions-top .col-right button { height:40px; margin-top:60px; } .packs-teasing .footer_description_category { color:#616060; clear:both; background:none !important; display: block; font-family: 'OpenSans'; font-size: 14px; line-height: 18px; margin-bottom: 25px; margin-top: 3px !important; text-align: justify; } .packs-teasing .menu-carterie{ display:none; } @media only screen and (max-width:1200px) { .packs-teasing .entete-page-category.teasing-pack h1 {font-size:18px;} .packs-teasing .encart-produit .product {margin-right: 5%;} .packs-teasing .encart-produit {min-height: 360px;} .packs-teasing .encart-produit .btn-ajouter {top: 280px;right:10px;} } /* .livraison-garantie-noel { white-space:nowrap; margin-left: -1em; padding-left: 1em; } .livraison-garantie-noel div { background-color: #a38d45; color: #ffffff; font-family: OpenSans-bold; font-size: 14px; padding: 0 18px 0 48px; height: 37px; line-height: 36px; display: inline-block; border-radius: 20px; border: 1px solid #f0f0f0; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-livraison-noel.png"); background-repeat: no-repeat; background-position: 17px center; width:100%; overflow:hidden; -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; } */ /*.livraison-garantie-noel div::before { content:"Livraison Garantie pour Noël"; } .livraison-garantie-noel:hover div::before { content: ""; }*/ /* .livraison-garantie-noel:hover div { width:0%; }*/ @media only screen and (max-width:1024px) { #livraison-noel { position: absolute; top: -14px; right: 200px; } } .livraison-garantie-noel { white-space:nowrap; margin-left: -1em; padding-left: 1em; } .livraison-garantie-noel { position: relative; top: 33px; } .livraison-garantie-noel.hover { cursor: pointer; } .livraison-garantie-noel .text-noel-plus-dinfo { opacity: 0; position: absolute; -webkit-transition: min-width 1s ease-in-out; -moz-transition: min-width 1s ease-in-out; -o-transition: min-width 1s ease-in-out; transition: min-width 1s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition:opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .livraison-garantie-noel.hover div { width:0% !important; min-width:150px; } .livraison-garantie-noel.hover .text-noel { opacity: 0; } .livraison-garantie-noel.hover .text-noel-plus-dinfo { width:0% !important; opacity: 1; } .livraison-garantie-noel div { opacity: 1; position: absolute; background-color: #a38d45; color: #ffffff; font-family: OpenSans-bold; font-size: 14px; height: 37px; line-height: 36px; display: inline-block; border-radius: 20px; border: 1px solid #f0f0f0; width:0%; min-width:280px; overflow:hidden; right: 0; -webkit-transition: min-width 1s ease-in-out; -moz-transition: min-width 1s ease-in-out; -o-transition: min-width 1s ease-in-out; transition: min-width 1s ease-in-out; } .livraison-garantie-noel div .text-noel { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-livraison-noel.png"); background-repeat: no-repeat; background-position: 17px center; padding: 0 18px 0 48px; line-height: 36px; display: block; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition:opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .livraison-garantie-noel.hover .text-noel-plus-dinfo { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/arrow-right-noel.png"); background-repeat: no-repeat; background-position: right center; padding: 0 48px 0 10px; line-height: 36px; display: block; top:0; width: 100% !important; } .bandeau-livraison-garantie-noel { text-align: center; margin-top: 20px; } .bandeau-livraison-garantie-noel > div { background-color: #d21100; color: #ffffff; font-family: OpenSans-bold; font-size: 14px; display: inline-block; border-radius: 20px; padding: 10px 15px 10px 45px; min-width:280px; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-livraison-noel.png"); background-repeat: no-repeat; background-position: 17px center; text-transform: uppercase; } .slide-mea-tirage-photo .bandeau-livraison-garantie-noel { position: relative; margin: 0 auto; top: 45px; z-index: 10; width: 586px; } @media only screen and (max-width:767px) { .slide-mea-tirage-photo .bandeau-livraison-garantie-noel { width: 100%; top: 25px; } } @media only screen and (max-width:350px) { .slide-mea-tirage-photo .bandeau-livraison-garantie-noel { top: 15px; } } .ngpopup.livraison-garantie { width: 420px; left: 50%; margin-left: -210px; } @media only screen and (max-width:767px) { .ngpopup.livraison-garantie { width: 100%; left: 0; margin: 0; position: fixed; overflow: auto; } } .ngpopup.livraison-garantie .express, .ngpopup.livraison-garantie .date { font-family: opensans-bold; } .livraison-garantie-noel.visible-xs { position: fixed; width: 56px; height: 56px; right: 10px; bottom: 80px; z-index: 110; top: auto; padding: 0; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/pitco-calendar-mobile.png"); background-repeat: no-repeat; background-position: center center; } .bandeau-livraison-garantie-noel.calendriers { background-color: #d21100; } .bandeau-livraison-garantie-noel.calendriers > div { width: 100%; border-radius: 0; background-image: none; text-transform: inherit; font-family: arial; font-size: 18px; } .bandeau-livraison-garantie-noel.calendriers .date-limite-calendier { background-color: #ffffff; color: #303030; font-size: 16px; font-family: arial; font-weight: bold; } .bandeau-livraison-garantie-noel.calendriers .text-regular { font-family: arial; font-size: 24px; } .bandeau-livraison-garantie-noel.calendriers .text-uppercase { font-family: arial; font-size: 21px; } .bandeau-livraison-garantie-noel.calendriers .codepromo { font-family: arial; font-size: 22px; } .bandeau-livraison-garantie-noel.calendriers .picto-calendrier-bandeau-promo-calendrier { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-calendrier-bandeau-promo-calendrier.png"); background-repeat: no-repeat; background-position: center center; width: 20px; height: 20px; display: inline-block; margin-right: 10px; vertical-align: sub; } @media only screen and (max-width:767px) { .bandeau-livraison-garantie-noel.calendriers > div { font-size: 16px; } .bandeau-livraison-garantie-noel.calendriers .text-regular { font-size: 20px; } .bandeau-livraison-garantie-noel.calendriers .text-uppercase { font-size: 16px; } .bandeau-livraison-garantie-noel.calendriers .codepromo { font-size: 16px; } .bandeau-livraison-garantie-noel.calendriers .date-limite-calendier { font-size: 16px; } } /* Page 404 */ .page-404-v2 [role="main"] { width: 100% !important; padding: 0 !important; overflow: hidden; max-width: 100% !important; } .page-404-v2 .footer-flat-wrapper .reass { margin-top:0; } .page-404-v2 .wrapper-para { position: relative; height:660px; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/404/bg.png") no-repeat top right #3f5970; } .page-404-v2 .mouse-bg { position: absolute; z-index: 0 !important; height: 100%; width: 100%; top:0; left: 0; } .page-404-v2 .mouse-bg.lune { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/404/front-lune.png") no-repeat bottom right transparent; z-index: 5 !important; } .page-404-v2 .mouse-bg.planetes { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/404/planetes.png") no-repeat top center transparent; } .page-404-v2 .mouse-bg.stars { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/404/etoiles.png") no-repeat top center transparent; } .page-404-v2 #txt.mouse-bg { padding-top: 12%; position: relative; display: inline-block; width: auto; height: auto; padding-left: 10%; } .page-404-v2 .wrapper-para p { color:white !important; font: 22px "open_sanssemibold" !important; } .page-404-v2 .wrapper-para .big { font: 100px "opensans-bold"; color:white; } @media (max-width:768px) { .page-404-v2 .mouse-bg.planetes, .page-404-v2 .mouse-bg.stars { background-size:100% !important; } .page-404-v2 #txt.mouse-bg { padding-top: 20%; padding-left: 6%; } } @media (max-width:375px) { .page-404-v2 .mouse-bg { display:none; } .page-404-v2 .wrapper-para { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/404/bg-mobile.jpg") no-repeat top center #3f5970; background-size:100%; height: 389px; } .page-404-v2 .wrapper-para .big { font: 52px "opensans-bold"; } .page-404-v2 .wrapper-para p { font: 18px "open_sanssemibold" !important; } .page-404-v2 #txt.mouse-bg { padding-top: 31%; padding-left: 6%; } } /** Close btn flat design **/ .bouton-flat.close { border-radius:20px; box-shadow:-1px -1px 1px #616161; } .bouton-flat.close.small { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-close.png") no-repeat scroll center center transparent !important; border: medium none; height: 33px; padding: 0; width: 33px; } .bouton-flat.close.red { background-color:#c8081d !important; } .bouton-flat.close.red:hover { background-color:#ea2439 !important; opacity:1 !important; } .bouton-flat.close.red:active { background-color:#aa0719 !important; } /* Scroll top category & recherche */ .scroll-top-wrapper{ clear: both; position: relative; } #scroll-top { display: block; left: -160px; position: absolute; top: -100px; } #scroll-top:hover { background-position: 0 bottom; } /* Order Print Pages (déplacé de general.css au cas où) JCY */ .page-print .print-head { display: inline-block; width: 100%; margin-bottom: 20px; } .page-print .print-head img { float:left; background:none; width: auto; } .page-print .print-head address { float:left; width: 100%; } /* Price Rewrites */ .sales-order-print {background:#ffffff;} .page-print .gift-message-link { display:none } .page-print .price-excl-tax, .page-print .price-incl-tax { display:block; white-space:nowrap } .page-print .cart-price, .page-print .price-excl-tax .label, .page-print .price-incl-tax .label, .page-print .price-excl-tax .price, .page-print .price-incl-tax .price { display:inline } .sales-order-print { line-height: 1.5;font: 14px/16px museo-sans-500;color: #616060; } .sales-order-print h1, .sales-order-print h2{color: #1E82B0; font: 28px/30px museo-sans-500;display: inline-block;width:100%; margin:0;} .sales-order-print h3 { font: 20px/23px museo-sans-500; color: #E95A7B; } .sales-order-print p{margin:5px 0;} .sales-order-print .col2-set {clear:both;} .sales-order-print .col2-set .col-1 { float: left; } .sales-order-print .col2-set .col-2 { float: right;} .sales-order-print .col2-set .col-1, .sales-order-print .col2-set .col-2 { width: 46%; margin: 10px 2%; } .sales-order-print .buttons-set { display: none; } .sales-order-print #my-orders-table { width:100%; border: 3px solid #f1f1f1; -webkit-border-radius: 10px; border-radius: 10px; } .sales-order-print #my-orders-table thead tr{ height:30px; } .sales-order-print #my-orders-table th{ background:url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/checkout/cart/border-dotted-thead.png") right center no-repeat #fcfbf5;font:16px museo-sans-500; color:#616060; text-align:center; vertical-align:middle;} .sales-order-print #my-orders-table th.a-right{ background-image:none;-webkit-border-top-right-radius: 5px; border-top-right-radius: 5px;} .sales-order-print #my-orders-table .my-orders-table-col1{ width:115px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; } .sales-order-print #my-orders-table .my-orders-table-col2{ width:95px; } .sales-order-print #my-orders-table .my-orders-table-col3{ width:220px;} .sales-order-print #my-orders-table .my-orders-table-col4{width:80px;} .sales-order-print #my-orders-table .my-orders-table-col5{ width:170px; } .sales-order-print #my-orders-table .my-orders-table-col6{ width:175px; } .sales-order-print #my-orders-table td { height:40px;border-bottom:1px dotted #d2d2d2; border-right:1px dotted #d2d2d2; text-align:center; vertical-align:middle;font:13px museo-sans-500; color:#616060;} .sales-order-print #my-orders-table .sales-order-item-product-subtotal, .sales-order-print #my-orders-table .last{border-right:none;} .sales-order-print #my-orders-table tr.even{ background-color:#fbfeff; } .sales-order-print #my-orders-table .grand_total .a-right{border-bottom:none;} .sales-order-print #my-orders-table .name-shipping{text-transform:capitalize;} .sales-order-print #my-orders-table a{ color:#1e82b0; } .sales-order-print #my-orders-table a:hover{ text-decoration:none; } /** Inté page detection language **/ .detect-language .wrapper { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/detect-lang/bg-wrapper.png") repeat scroll 0 0 transparent; position:absolute; width:100%; height:100%; min-height:1430px; top:0; left:0; z-index: 9999; text-align: center; } .detect-language .popup p { text-align: center; font-family: 'OpenSans'; font-size:17px; color:#626264; margin:0; line-height: 50px; } .detect-language .popup { background: none repeat scroll 0 0 white; border-radius: 25px; margin: 300px auto 0; min-height: 350px; width: 800px; position:relative; } .detect-language .title-wrapper { border: 2px solid #4b9bc0; border-bottom:0; height:70px; border-radius: 25px 25px 0 0; background:#f9f9f9; position: absolute; top: -70px; width: 100%; line-height: 70px; font-family: 'OpenSans'; font-size:20px; color:#626264; text-transform: uppercase; } .detect-language .popup .content { border: 2px solid #4b9bc0; border-top:none; border-radius: 0 0 25px 25px; background:white; } .detect-language .popup img { vertical-align:top; margin:0 10px; } .detect-language .title-wrapper img { vertical-align:middle; } .detect-language .others-flag p { display:inline-block; width:33%; } .detect-language p a { font-family:'OpenSans' !important; color:#626264 !important; font-size:17px !important; } .detect-language .others-flag a { opacity: 0.5; -moz-transition: all 200ms ease-in; -webkit-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in; } .detect-language .others-flag a:hover { opacity: 1; -moz-transition: all 200ms ease-in; -webkit-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in; } .detect-language .popup .pcfr, .detect-language .popup .pcfr a { font-size: 19px !important; line-height: 55px; } @media (max-width:800px) { .detect-language .popup { width:100%; } .detect-language .others-flag a { font-size:0 !important; } .detect-language .others-flag p { width:auto; } } @media (max-width:500px) { .detect-language .title-wrapper { font-size:14px; } .detect-language .popup p { font-size: 12px; line-height: 20px; vertical-align:middle; } .detect-language .content p:nth-child(2) { margin:20px 0; line-height: 50px; } } /*------------------------------------*\ $ADVANTAGES (Pourquoi choisir Planet) \*------------------------------------*/ .block-adv-pc-list .block{ overflow:hidden; } .block-adv-pc-list li { margin-bottom: 18px; max-width: 555px; } .block-adv-pc-list h4 { color: #606060; font-size: 14px; font-weight: bold; margin-left: 10px; } .block-adv-pc-list .block-text p { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/shadow-adv-pc-list.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); color: #606060; font-size: 14px; padding-left: 10px; text-align: justify; min-height:58px; } .block-adv-pc-list .small-block .block-text p { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); } .block-adv-pc-list .small-block .block-text { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/shadow-adv-pc-list.png") no-repeat scroll 0 5px rgba(0, 0, 0, 0); } .block-adv-pc-list .small-block .picto { margin-top: 20px; } .block-adv-pc-list .picto { background-position: 15px 0; } .block-adv-pc-list .gi { padding: 0; } .block-adv-pc-list .picto { margin-top: 33px; width: 68px; } /* pictos img */ .picto{ display: block; float: left; margin-right: 5px; background-repeat: no-repeat; width: 23px; height: 23px; } .picto-pen{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-pen-green.png"); background-position: 0 0; width:32px; height:32px; } .picto-pieces-small{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-pieces-green-small.png"); background-position: center center!important; width: 21px; height: 22px; } .picto-pieces{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-pieces-green.png"); background-position: center center!important; width: 34px; height: 36px; } .picto-chrono{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-chrono-green.png"); background-position: center center!important; width: 26px; height: 32px; } .picto-cup{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-cup-green.png"); background-position: 0 0; width: 33px; height:30px; } .picto-contract{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-contract-green.png"); background-position: 0 0; width:32px; height:32px; } .picto-envelope{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-envelop-green.png"); background-position: 0 0; width: 68px; height:32px; } .picto-truck{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-truck-green.png"); background-position: 0 0; width:41px; height:29px; } .picto-magic{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-magic-green.jpg"); background-position: 0 0; width:34px; height:33px; } .picto-star{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-star-green.jpg"); background-position: 0 0; width:34px; height:33px; } .picto-blue{ width: 39px; } .blue-color .picto-truck{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-truck-blue-zero-euro.png"); } .blue-color .picto-contract{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-contract-blue.png"); } .blue-color .picto-cadenas{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-cadenas-blue.png"); height:31px; } .blue-color .picto-star{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto-star-blue.png"); height:37px; } /* SWIPER Planet*/ .swiper-planet.swiper-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; width: 100%; height: 100%; } .swiper-planet .swiper-slide{ height: 100%; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; } .swiper-planet.swiper-container-android .swiper-slide, .swiper-planet.swiper-wrapper { -webkit-transform: translate3d(0px,0,0); -moz-transform: translate3d(0px,0,0); -o-transform: translate(0px,0px); -ms-transform: translate3d(0px,0,0); transform: translate3d(0px,0,0); } .swiper-planet .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-planet .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; } .swiper-planet .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-planet .swiper-pagination-bullet { display: inline-block; width:16px; height:16px; border-radius: 100%; background: #000; opacity: 0.2; } .swiper-planet .swiper-pagination-bullet-active { opacity: 1; background:#1e82b0; } .swiper-planet .swiper-pagination{ position:relative; } .swiper-planet.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { margin: 25px 6px 0; } /* fin SWIPER */ /** STYLE LOADER NOUVELLE PAGE TIRAGE **/ .showbox { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 5%; } .showbox.ie-fallback .loader { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/loader-iefallback.gif') no-repeat center center; } .showbox.ie-fallback .circular { display: none; } .showbox .loader { width: 100px; position: fixed; top:50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } .showbox .loader:before { content: ''; display: block; padding-top: 100%; } .showbox .circular { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; height: 100%; -webkit-transform-origin: center center; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .showbox .path { stroke-dasharray: 1,200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes dash { 0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89,200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89,200; stroke-dashoffset: -124px; } } @keyframes dash { 0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89,200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89,200; stroke-dashoffset: -124px; } } @-webkit-keyframes color { 100%, 0% { stroke: #7db161; } 40% { stroke: #7db161; } 66% { stroke: #7db161; } 80%, 90% { stroke: #7db161; } } @keyframes color { 100%, 0% { stroke: #7db161; } 40% { stroke: #7db161; } 66% { stroke: #7db161; } 80%, 90% { stroke: #7db161; } } /** **/ /* page déconnexion */ .customer-account-logoutsuccess .col-main{ min-height:400px; padding-top:25px; } .customer-account-logoutsuccess .page-title h1, .customer-account-logoutsuccess .page-content p{ text-align:center; color: #616060; font: 14px/17px OpenSans; } /* Datepicker */ .altics.market-datepicker { background: none repeat scroll 0 0 white; border: 2px solid #bfb9b3; font: 11px/1 Arial,Helvetica,sans-serif; position: absolute; top: 20px; z-index: 2000; } .altics.market-datepicker table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: 100%; } .altics.market-datepicker table tbody { text-align: center; } .altics.market-datepicker .head { background-color: #f5f5f5; padding: 5px 8px; } .altics.market-datepicker .nav a { display: block; float: left; text-decoration: none; } .altics.market-datepicker .head .years a.prev { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/calendrier/bt-calendar-prev-year.gif") no-repeat scroll 0 0 transparent; font-size: 0; height: 15px; width: 13px; } .altics.market-datepicker .head .years .year { color: #797979; font-size: 14px; font-weight: bold; line-height: 16px; margin: 0 11px; } .altics.market-datepicker .head .years .year.current { color: #1e82b0; } .altics.market-datepicker .head .years a.next { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/calendrier/bt-calendar-next-year.gif") no-repeat scroll 0 0 transparent; font-size: 0; height: 15px; width: 13px; } .altics.market-datepicker .head .months { margin-top: 5px; } .altics.market-datepicker .head .months a.current { color: #1e82b0; font-size: 14px; font-weight: bold; line-height: 16px; text-align: center; width: 136px; } .altics.market-datepicker .head .months a.prev { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/calendrier/bt-calendar-prev-month.gif") no-repeat scroll 0 0 transparent; font-size: 0; height: 15px; width: 25px; } .altics.market-datepicker .head .months a.next { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/calendrier/bt-calendar-next-month.gif") no-repeat scroll 0 0 transparent; font-size: 0; height: 15px; width: 25px; } .altics.market-datepicker .month-page { margin: 10px; } .altics.market-datepicker .month-page table.days { width: 183px; } .altics.market-datepicker .month-page table.days tr { height: 23px; } .altics.market-datepicker .days td { border: 1px solid #cccccc; } .altics.market-datepicker .days td.selectable { cursor: pointer; } .altics.market-datepicker .month-page table.days td { color: #1e82b0; font-weight: bold; line-height: 22px; } .altics.market-datepicker .month-page table.days td.prev-month, .altics.market-datepicker .month-page table.days td.next-month { background-color: #cccccc; color: #a6a6a6; } .altics.market-datepicker .month-page table.days td.unselectable { color: #a6a6a6; } .altics.market-datepicker .clear { clear: both; } .checkout-cart-index .altics.market-datepicker { margin: -186px 0 0 75px; } .altics.market-datepicker .month-page table.days td.selectable.selected { color: #1ebc81; } @media (max-width: 980px), (max-width: 1024px) and (orientation: landscape){ body .l-main, #nav-left{ width: 100%; } } .blue-tooltip .tooltipster-arrow-bottom span { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/top-arrow-tooltip.png"); width: 17px !important; height: 7px !important; border: 0 !important; } .blue-tooltip .tooltipster-arrow-top span { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/bottom-arrow-tooltip.png"); width: 17px !important; height: 7px !important; border: 0 !important; } .not-fixed-top { position: fixed !important; z-index: 100; top:-70px; transition: top 0.2s ease-in-out; } .fixed-top { position: fixed !important; z-index: 100; top:0; transition: top 0.1s ease-in-out; } .cat-livre-photo .select2-container { width: 200px !important; } .cadre-table-simple { border: 3px solid #f1f1f1; } .header-colonne { background-color: #fcfbf5; padding: 5px 10px; font:16px museo-sans-500; color:#616060; } .cadre-table-simple ul li { padding: 3px 5px; } .colonne-de-tableau { margin: 5px 0; /* display: table-cell; float: none !important;*/ padding: 0 !important; } /*** Début Avis vérifiés ***/ .logo-avis-verifes > span { display: table-cell; vertical-align: middle; } .logo-avis-verifes::before { content: ""; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/avis_verifies/logo-avis-verifies.png"); background-position: left top; background-repeat: no-repeat; width: 58px; height: 58px; display: table-cell; vertical-align: middle; } .lien-avis-verifies { display: inline-block; margin-top: 15px; } .note-avis-verifies { position: absolute; left: 58px; top: 45px; } .footer-flat-wrapper .lien-avis-verifies .logo-avis-verifes > span { display: table-cell; padding-left: 5px; font-size: 16px; } .quickview-nextgen .avis-verifies-avg, .quickview-nextgen .js-avis-viewall { display: table-cell; vertical-align: middle; } .banniere-livre-photo .avis-verifies-view-all-listing { margin-bottom: 25px; } /*** Fin Avis vérifiés ***/ .row-centered { text-align: center; } .col-centered { display: inline-block; float: none; text-align: left; margin-right: -4px; } /** Début Upsell Packs - Nextgen - NTR **/ .packs-teasing-nextgen .wrapper { background-color:#f8f8f8; } .packs-teasing-nextgen .entete-page-category { height: auto !important; width: 100% !important; margin: 0 !important; padding-top:55px; border:none !important; } .packs-teasing-nextgen .product, .cart-mini-nextgen{ border:1px solid #ebebed; border-radius: 3px; margin: 15px 0; background-color: white; position: relative; } .packs-teasing-nextgen .product{ height:265px; } @media (min-width: 321px) and (max-width: 767px){ .packs-teasing-nextgen .product{ height:230px; } } .packs-teasing-nextgen h1, .packs-teasing-nextgen h2 { font-family: "open_sanslight"; font-size: 28px; color: #616161; display: inline-block; } .packs-teasing-nextgen h2 { width: 100%; text-align: left; padding: 15px 0; } .packs-teasing-nextgen h2::before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cart/pictos-panier-2015.png") no-repeat left -370px transparent; content: ""; display: inline-block; width: 34px; height: 37px; margin-bottom: -2px; margin-right: 7px; } .packs-teasing-nextgen .entete-page-category.credit-pack h1 { float:left; } .packs-teasing-nextgen .entete-page-category.credit-pack .block-actions { float: right; display: inline-block; width: auto; } .packs-teasing-nextgen h1::before { content: ""; width: 29px; height: 32px; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-ampoule.png") no-repeat top left transparent; display: inline-block; margin-right: 3px; } .packs-teasing-nextgen .accroche .product { background-color: #02a4bd; border: none; color:white; border-radius:0; font:35px "Novecento-demibold"; padding: 40px; } .packs-teasing-nextgen .accroche .product span { font-size:25px; line-height: 37px; display: block; } .packs-teasing-nextgen .product .inner { position: relative; height:100%; font:24px 'Novecento-demibold'; color:#616161; } .packs-teasing-nextgen .product .inner .price-produit, .packs-teasing-nextgen .product .inner p { font:inherit; color:inherit; } .packs-teasing-nextgen .product .title-product { display:block; padding-top:15px; text-align:right; width: 50%; } .packs-teasing-nextgen .product .price-produit { display:block; text-align:right; } .packs-teasing-nextgen .product .economie { background-color: #b2c9d7; text-align: left; width: 80%; float: right; height: 65px; line-height: 61px !important; color: white !important; padding-left: 10px; font:46px "Novecento-widebold" !important; } .packs-teasing-nextgen .product .tarifs { width: 50%; line-height: 25px; margin-bottom: 13px; font: 34px 'opensans-bold'; } .packs-teasing-nextgen .price small { font-size: 20px; } .packs-teasing-nextgen .product .btn-ajouter { position: absolute; bottom: 25px; left:35px; } .packs-teasing-nextgen .product .btn-ajouter a span { font:14px "opensans-bold"; } .packs-teasing-nextgen .product .tarifs p, .packs-teasing-nextgen .product .tarifs .priceold { display:inline-block; } .packs-teasing-nextgen .product del .price, .packs-teasing-nextgen .product del small { font-size:16px; } .packs-teasing-nextgen .product .inner img { position:absolute; top:0; right:0; margin-top: 7px; } .packs-teasing-nextgen .block-actions { text-align: right; width:100%; } .packs-teasing-nextgen .learn-more { position: absolute; bottom: 10px; right: 20px; font: 14px "OpenSans-bold" !important; } .packs-teasing-nextgen .learn-more::before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-more-white-blue.png") no-repeat top left transparent; height:20px; width:20px; content:""; display: inline-block; vertical-align: middle; margin-right:5px; } .packs-teasing-nextgen .learn-more:hover { opacity: 0.7; } .packs-teasing-nextgen .accroche a { color: white; } @media (max-width: 1200px) { .packs-teasing-nextgen .product .inner img { max-width: 180px; max-height: 180px; margin: 0; top: 20%; } } @media (max-width: 990px) { .packs-teasing-nextgen .product .title-product { width: 100%; float: right; padding-right: 30px; margin-bottom: -10px; } .packs-teasing-nextgen .product .price-produit { padding-right: 30px; } .packs-teasing-nextgen .product .tarifs { width: 100%; margin-bottom: 30px; } .packs-teasing-nextgen .product .economie { width: 103%; padding-left: 25px; margin-right: -30px; } .packs-teasing-nextgen .product .inner img { top: 30%; right: 5px; max-width:140px; max-height:128px; } .packs-teasing-nextgen .accroche .product { padding: 15px; } .packs-teasing-nextgen .product .btn-ajouter { position: absolute; bottom: 10px; width: 100%; text-align: center; left: 0; } } @media (max-width:568px) { .packs-teasing-nextgen .wrapper .container { padding:0; } .packs-teasing-nextgen .encart-produit.accroche, .packs-teasing-nextgen .encart-produit.accroche .product { padding:0; } .packs-teasing-nextgen .accroche .product span, .packs-teasing-nextgen .accroche .product { font-size: 27px; } .packs-teasing-nextgen .encart-produit.accroche .product { padding:20px; } .packs-teasing-nextgen .encart-produit { padding:0; } .packs-teasing-nextgen .btn-valid-commande { padding-right: 0; } .packs-teasing-nextgen .entete-page-category.credit-pack .block-actions { float: none; } .packs-teasing-nextgen .btn-valid-commande { text-align: center; } .packs-teasing-nextgen .product .inner img { top: 35%; right: 0; } .packs-teasing-nextgen .entete-page-category { padding: 25px 0 0 !important; } } /** Fin Upsell Packs - Nextgen - NTR **/ .foot-2016.content-products-1200 #pre-header, .foot-2016.content-products-1200 #pre-header .user-toolbox .cart, .lp-category-2016.content-products-1200 #pre-header, .lp-category-2016.content-products-1200 #pre-header .user-toolbox .cart { height: 40px !important; line-height: 40px !important; } .foot-2016.content-products-1200 #category-footer, .lp-category-2016.content-products-1200 #category-footer { display: none; } /** Compteur produits panier Header **/ #cart_item_counter.cart-item-counter-zero, #cart_item_counter_mobile.cart-item-counter-zero { display: none !important; } /** Fil arianne **/ .breadcrumbs li a { color: #616060; float: left; font-family: "Museo-sans-500"; font-size: 14px; text-decoration: none; } /* Bloc reasscat */ .cat-nextgen .reasscat { padding:60px 0 0; } .cat-nextgen .reasscat h4 { padding-bottom:70px; } .cat-nextgen .reasscat{ background:white; border-top:1px solid #dcdbdb; border-bottom:1px solid #dcdbdb; } .cat-nextgen .reasscat h4, .cat-nextgen .footer_description_category h2 { font:25px "novecento-demibold"; color:#616161; } .cat-nextgen .reasscat h5, .cat-nextgen .footer_description_category h4 { font:14px "opensans-bold"; color:#616161; } .cat-nextgen .reasscat .wrapper > div > div { min-height: 200px; } .cat-nextgen .reasscat .wrapper .txt { padding-bottom:60px !important; } /* fin Bloc reasscat */ /*** refonte temporaire des livres photos (PPFR-419 / PPFR-454) ***/ .wrapper-photobook { background-color: #ffffff; border-bottom: 1px solid #dcdbdb; } .banniere-livre-photo { padding-top: 30px; padding-bottom: 30px; } .livraison-livre { display: inline-block !important; } .livraison-objet { display:none !important; } #mini-visuel-selection img{ display: block; position: absolute; left:0; top:0; } #mini-visuel-selection > div { position: relative; width: 95px; height: 90px; display: block; padding: 0 !important; margin: 0 0 15px; } #mini-visuel-selection > div > .masque-hover-img, #mini-visuel-selection > div > .masque-border-img { position: absolute; top:0; left: 0; /*-webkit-transition: opacity 100ms ease-in;*/ /*-moz-transition: opacity 100ms ease-in;*/ /*-o-transition: opacity 100ms ease-in;*/ /*transition: opacity 100ms ease-in;*/ } #mini-visuel-selection > .thumb-active > .masque-hover-img { opacity: 1; } #mini-visuel-selection > div > .masque-border-img{ opacity: 1; } #mini-visuel-selection > div > .masque-hover-img, #mini-visuel-selection > .thumb-active > .masque-border-img { opacity: 0; } .cat-livre-photo .livre-titre { position: static !important; top: inherit !important; left: inherit !important; } h1.photobook-h1 .libelle{ font-size: 14px; font-family: "open_sanssemibold"; text-decoration: underline; text-transform: uppercase; } h1.photobook-h1 .format-livre { text-decoration: none; display: inline-block; font-family: "OpenSans"; font-size: 25px; color: #8d8d8d; } h1.photobook-h1 > span { display: block; } h1.photobook-h1 .format-livre > span { font-size: 35px; color: #616161; } .col-description { padding-left: 73px; } ul.photobook-details { list-style: inside; color: #616161; margin: 25px 0 8px; font-family: "open_sanssemibold"; line-height: 22px; } .cat-livrephotos .link-big-pkg, .tiers-prices .btn-tiers-prices { background-image: none; display: table !important; width: auto !important; color: #4ca0b3; font-size: 14px; font-family: "OpenSans-bold"; margin: 2px 0; } .cat-livrephotos .link-big-pkg:hover, .tiers-prices .btn-tiers-prices:hover { opacity: 0.8; } .tiers-prices .btn-tiers-prices img { margin-right: 6px; } .cat-livrephotos .link-big-pkg img, .tiers-prices .btn-tiers-prices img, .cat-livrephotos .link-big-pkg span, .tiers-prices .btn-tiers-prices span { display: table-cell; } .price-photobook { color: #ea6f8e; } .price-photobook .a-partir-de{ font-family: "open_sanssemibold"; font-size: 18px; } .price-photobook .price { font-size: 43px; font-family: "Novecento-widebold"; } .price-photobook .a-partir-de{ font-family: "open_sanssemibold"; font-size: 18px; display: inline-block; } .price-photobook .price small{ font-size: 35px; } #grands-visuels { height: 410px; margin-top: 7px; } @media (max-width: 767px) and (orientation:portrait){ #grands-visuels { height: 160px; } } @media (max-width: 767px) and (orientation:landscape){ #grands-visuels { height: 310px; } } #grands-visuels #visuel-2, #grands-visuels #visuel-3, #grands-visuels #visuel-4 { margin-top: 0; margin-left: 0; } body.cat-livre-photo .pinfos-name { color: #616161 !important; } .cat-livre-photo .filters { background-color: inherit !important; margin-top: 0 !important; } .cat-livre-photo .filters .select2-selection__rendered { font-family: opensans-bold !important; } .cat-livre-photo .category-listing-nextgen { margin-top: 40px; } .cat-livre-photo .category-products-nextgen { padding-top:22px !important; } .cat-livre-photo .category-listing-nextgen > span { line-height: 50px; font-size: 15px; font-family: opensans-bold; text-transform: uppercase; color: #616161; margin-right: 15px; } .cat-livre-photo #separator-promotions { display: none !important; } .cat-livrephotos { position: relative; } .cat-livrephotos .btn-scroll-to-products { border-radius: 23px; content: ''; display: inline-block; height: 46px; width: 46px; left: 50%; margin-left: -23px; margin-bottom: -15px; position: absolute; bottom: 0; vertical-align: top; background-color: #616161; text-align: center; -webkit-transition: opacity 100ms ease-in; -moz-transition: opacity 100ms ease-in; -o-transition: opacity 100ms ease-in; transition: opacity 100ms ease-in; } .cat-livrephotos .btn-scroll-to-products::after { content: ''; display: inline-block; height: 14px; width: 22px; margin-top: 18px; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/chevron-btn-scroll-product.png"); } .cat-livrephotos .btn-scroll-to-products:hover::before { content: 'VOIR LES MODÈLES'; display: inline-block; width: 150px; left: 50%; margin-left: -75px; position: absolute; top: -30px; color: #616161; } .cat-livrephotos .btn-scroll-to-products:hover { opacity: 0.7; } #scrollIndicator { left: 50%; margin-left: -33px; z-index: 100; position: fixed; bottom: 15px; width: 66px; height: 66px; } #scrollIndicator:after { content: ""; background-color: #616161; width: 66px; height: 66px; left: 50%; margin-left: -33px; top: 50%; margin-top: -33px; border-radius: 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; opacity: 0; animation: jumper 1.8s 0.66666s ease-out infinite; } #scrollIndicator:before { content: ""; background-color: #616161; width: 66px; height: 66px; left: 50%; margin-left: -33px; top: 50%; margin-top: -33px; border-radius: 100%; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; opacity: 0; animation: jumper 1.8s 0.33333s ease-out infinite; } #scrollIndicator > p { width: 150px; position: absolute; left: 50%; margin-left: -75px; text-align: center; bottom: 65px; color: #616161; opacity: 0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; -o-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; } #scrollIndicator:hover > p { opacity: 1; } #scrollIndicator span { width: 46px; height: 46px; display: block; background-color: #616161; /*background-size: 12px;*/ border-radius: 100%; position: absolute; left: 10px; top: 10px; z-index: 100; } #scrollIndicator span img { position: absolute; left: 50%; top: 50%; margin: -7px auto auto -11px; } @-webkit-keyframes jumper{ 0%{opacity:0;transform:scale(0);transform:scale(0)} 5%{opacity:1} 100%{transform:scale(1);transform:scale(1);opacity:0} } @keyframes jumper{ 0%{opacity:0;transform:scale(0);transform:scale(0)} 5%{opacity:1} 100%{opacity:0} } @media (min-width: 1025px) { .wrapper-photobook .col-description { padding-left: 65px; } } @media (max-width: 992px) { .wrapper-photobook { border-bottom: 0; } .col-description { padding:0 !important; } .cat-livrephotos .link-big-pkg, .tiers-prices .btn-tiers-prices { font-size: 14px; padding: 0; } .price-photobook .price { font-size: 35px; } .price-photobook .price small { font-size: 25px; } .cat-livrephotos .livre-titre { display: inline-block; } h1.photobook-h1 { color: #565656; } h1.photobook-h1 .libelle { font-size: 15px; } h1.photobook-h1 .format-livre > span { font-size: 29px; } h1.photobook-h1 .format-livre{ font-size: 22px; } .banniere-livre-photo { padding-top: 24px; } .cat-livrephotos .link-big-pkg img, .cat-livrephotos .link-small-pkg img { margin-right: 4px !important; } .cat-livre-photo .category-listing-nextgen { margin-top: 0; } .cat-livre-photo .category-listing-nextgen > span { padding-left: 15px; } .cat-livre-photo .category-listing-nextgen .wrapper-list, .cat-livre-photo .category-listing-nextgen .grid-actions { float: left; } .cat-livre-photo .category-listing-nextgen .grid-actions, .cat-livre-photo .category-listing-nextgen .wrapper-list { margin: 0 0 0 5px; } } .lib-livre.main::after { border-style: solid; border-width: 0 0 1px 1px; content: ''; display: inline-block; height: 10px; left: 0; margin-left: 10px; position: relative; top: 23px; transform: rotate(-45deg); vertical-align: top; width: 10px; -webkit-transition: transform 100ms ease-in; -moz-transition: transform 100ms ease-in; -o-transition: transform 100ms ease-in; transition: transform 100ms ease-in; } .wrapper-menu-photobook { font-family: "open_sanssemibold"; border-bottom: 1px solid #dcdbdb; height: 60px; line-height: 60px; background-color: #f8f8f8; display: table; width: 100%; } .wrapper-menu-photobook > ol { margin-bottom:0; } .wrapper-menu-photobook > ol .lib-livre { color: #616161; padding: 0 10px; display: block; } .wrapper-menu-photobook > ol .lib-livre:hover { background-color: #f1f1f1; } .wrapper-menu-photobook > ol .lib-livre.active-link { color: #4ca0b3; } .wrapper-menu-photobook > ol .lib-livre.active-link::after { transform: rotate(-225deg); top: 29px; } .wrapper-menu-photobook li ol.active .lib-livre { color: #4ca0b3; } .wrapper-menu-photobook li { display: inline-block; margin: 0 20px 0 0; position:relative; } .wrapper-menu-photobook li ol { border-left: 1px solid #dcdbdb; border-bottom: 1px solid #dcdbdb; border-right: 1px solid #dcdbdb; background-color: #f8f8f8; border-radius: 0 0 4px 4px; position: absolute; top: 60px; left: 50%; width: 100%; z-index: 100; opacity: 0; visibility: hidden; -webkit-transition: opacity 150ms ease-in; -moz-transition: opacity 150ms ease-in; -o-transition: opacity 150ms ease-in; transition: opacity 150ms ease-in; } .wrapper-menu-photobook li ol li, .wrapper-menu-photobook li ol li a{ width: 100%; height: 40px; line-height: 40px; display: block; color: #616161; -webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; } .wrapper-menu-photobook li ol li a:hover { background-color: #eeeeee !important; color: #4ca0b3; } .wrapper-menu-photobook li ol.active { visibility: visible; opacity: 1; } .wrapper-menu-photobook li#lib-menu-livre-paysage ol { width: 160px; margin-left: -80px; } .wrapper-menu-photobook li#lib-menu-livre-portrait ol { width: 180px; margin-left: -90px; } .wrapper-menu-photobook li#lib-menu-livre-carre ol { width: 170px; margin-left: -85px; } .wrapper-menu-photobook li.last-li { margin-right:0; } /*** DEBUT avis verifies ***/ .avis-verifies .avis_product { padding-top: 35px; padding-bottom: 40px; position: relative; } @media only screen and (min-width:768px) { .avis-verifies .picto-avis { padding-left: 32px !important; } } .avis-verifies .avis-block { display: inline-block; width: 100%; } .avis-verifies .avis-block:first-child { margin-top: 10px; } .block-listing-avis-product .avis-verifies .avis-block { display: inline-block; } .avis-verifies .avis-block:not(.last) { margin-bottom: 35px; } .block-listing-avis-product .avis-block { display: block; } .avis-verifies .avis_customer { font-family: "OpenSans-bold"; font-size: 16px; color: #616161; text-transform: uppercase; padding-top: 2px; } .avis-verifies .avis_customer span { font-family: "OpenSans"; text-transform: lowercase; } .avis-verifies .avis_review { font-family: "OpenSans-italic"; font-size: 16px; color: #616161; } .avis-verifies .avis_review:first-letter { text-transform: uppercase; } @media only screen and (max-width:992px) { .avis-verifies .text-avis { padding: 0 !important; display: table-cell; } .avis-verifies .avis_customer { padding-top: 4px; } .avis-verifies .avis_customer, .avis-verifies .avis_review { line-height: 18px; font-size: 14px; } .avis-verifies .avis_review { margin-top: 10px; } .avis-verifies .rateit { height: 26px; display: table-cell; margin-right: 5px; } .block-listing-avis-product .avis-verifies .rateit { line-height: 30px; } } .avis-verifies .rateit .rateit-range { vertical-align: middle; } @media only screen and (min-width:992px) { .avis-verifies .btn-flat { position: absolute; top: -15px; right: 20px; } } @media only screen and (max-width:992px) { .block-listing-avis-product .button-read-all-reviews, .avis-verifies-calendrier .button-read-all-reviews { margin-top: 30px; } } .avis-verifies-calendrier .btn-flat { position: relative; top: 0; right: 0; } .link-avis-verifies { font-family: "open_sanssemibold"; font-size: 14px; color: #4ca0b3; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .link-avis-verifies:hover { color: #4ca0b3; cursor: pointer; filter: alpha(opacity=70); opacity: 0.7; } .avis-verifies-avg { clear:both; margin-bottom: 50px; font-size: 13px; font-family: 'Museo-sans-500'; } .avis-verifies-avg > a, .ngpopup .text-popup .link-read-verify-reviews .js-avisverifies-viewall, .js-avisverifies-viewall { color: #4ca0b3; cursor: pointer; font-family: 'open_sanssemibold'; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .avis-verifies-avg > a:hover, .js-avisverifies-viewall:hover { filter: alpha(opacity=70); opacity: 0.7; } .avis-verifies-avg .rateit .rateit-range, .avis-verifies-avg .rateit .rateit-preset, .avis-verifies-view-all-listing .rateit .rateit-range, .avis-verifies-view-all-listing .rateit .rateit-preset { background: url(https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/rateit/small-stars.png); } .avis-verifies-avg .rateit .rateit-preset, .avis-verifies-view-all-listing .rateit .rateit-preset { background-position: left 19px; } .avis-verifies-avg .rateit { margin-right: 6px; } .avis-verifies .echange { margin: 28px 0 0; font-size: 16px; } .avis-verifies .echange > div { font-family: "OpenSans-italic"; border-radius: 3px; } .avis-verifies .echange > .client { padding: 20px 0 25px; } .avis-verifies .echange > .planet { border: 1px solid #e4e3e3; background-color: #f8f8f8; padding: 21px 26px; } .avis-verifies .echange > div .comment:before { font-family: 'OpenSans-bold'; display: block; margin-bottom: 5px; } .mCS-gray-bg-white.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail { background-color: #d9d7d7; } .mCS-gray-bg-white.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #616161; } .quickview-avisverifies { width: 1000px !important; margin-left: inherit !important; z-index: 16000004; /*Pour passer par dessus le tchat*/ } .quickview-avisverifies.opened .content { min-height: 200px; } .avisverifies-avg-rate.opened .content { max-height: 657px; } @media only screen and (max-width:768px) { .avisverifies-avg-rate.opened .content { max-height: 99%; } } .avisverifies-avg-rate.opened .content > .body, .quickview-avisverifies.opened .content > .body { padding-top: 35px; padding-bottom: 40px; } .avisverifies-avg-rate .mCSB_scrollTools .mCSB_draggerRail, .quickview-avisverifies .mCSB_scrollTools .mCSB_draggerRail, .avisverifies-avg-rate .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .quickview-avisverifies .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 5px; } @media only screen and (max-width:992px) { .avis-verifies .echange { font-size: 14px; } .quickview-avisverifies .avis-verifies .rateit .rateit-range, .avis-verifies .rateit .rateit-range, .avis-verifies-calendrier .rateit .rateit-range { width: 60px !important; } .quickview-avisverifies .rateit .rateit-range, .quickview-avisverifies .rateit .rateit-preset, .block-listing-avis-product .rateit .rateit-range, .block-listing-avis-product .rateit .rateit-preset, .avis-verifies-calendrier .rateit .rateit-range, .avis-verifies-calendrier .rateit .rateit-preset { background-image: url(https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/rateit/small-stars.png); height: 9px !important; } .quickview-avisverifies .rateit .rateit-preset, .block-listing-avis-product .rateit .rateit-preset, .avis-verifies-calendrier .rateit .rateit-preset { background-position: left 58px; } .quickview-avisverifies .rateit[data-rateit-value="5"] .rateit-preset, .block-listing-avis-product .rateit[data-rateit-value="5"] .rateit-preset, .avis-verifies-calendrier .rateit[data-rateit-value="5"] .rateit-preset { width: 60px !important; } .quickview-avisverifies .rateit[data-rateit-value="4"] .rateit-preset, .block-listing-avis-product .rateit[data-rateit-value="4"] .rateit-preset, .avis-verifies-calendrier .rateit[data-rateit-value="4"] .rateit-preset { width: 48px !important; } .quickview-avisverifies .rateit[data-rateit-value="3"] .rateit-preset, .block-listing-avis-product .rateit[data-rateit-value="3"] .rateit-preset, .avis-verifies-calendrier .rateit[data-rateit-value="3"] .rateit-preset { width: 36px !important; } .quickview-avisverifies .rateit[data-rateit-value="2"] .rateit-preset, .block-listing-avis-product .rateit[data-rateit-value="2"] .rateit-preset, .avis-verifies-calendrier .rateit[data-rateit-value="2"] .rateit-preset { width: 24px !important; } .quickview-avisverifies .rateit[data-rateit-value="1"] .rateit-preset, .block-listing-avis-product .rateit[data-rateit-value="1"] .rateit-preset, .avis-verifies-calendrier .rateit[data-rateit-value="1"] .rateit-preset { width: 12px !important; } .quickview-avisverifies .rateit[data-rateit-value="0"] .rateit-preset, .block-listing-avis-product .rateit[data-rateit-value="0"] .rateit-preset, .avis-verifies-calendrier .rateit[data-rateit-value="0"] .rateit-preset { width: 0px !important; } .avis-verifies-calendrier .link-view-all-verify-reviews { margin-top: 30px; } .avisverifies-avg-rate.opened .content > .body, .quickview-avisverifies.opened .content > .body { padding: 35px 0 40px; } } .uistyle-calendrier .js-product-options, .uistyle-calendrier .js-option-album, .uistyle-calendrier .js-description, .uistyle-calendrier .js-product, .uistyle-calendrier .text-popup p.option-finition-brillante { margin-top: 10px; } .uistyle-calendrier .link-read-verify-reviews { position: absolute; z-index: 10; } .avis-block .js-read-more-less { margin-top: 10px } .avis-block .js-read-more-less > a { font-family: 'open_sanssemibold' !important; } .avis-block .down-arrow:after { content: ""; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/arrow-down-blue.png"); background-repeat: no-repeat; width: 8px; height: 14px; display: inline-block; margin-left: 5px; } .avis-block .up-arrow:after { content: ""; background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/arrow-up-blue.png"); background-repeat: no-repeat; width: 8px; height: 14px; display: inline-block; margin-left: 5px; } /*** FIN avis verifies ***/ /*** Debut Gestion "Offre terminée" ***/ .offre-terminee div[role=main] { position: relative; } .offre-terminee .col-main { opacity: 0.5; } .content-store-closed { /*position: relative;*/ width: 100%; z-index: 5; } .offre-terminee #overlay-store-closed { display: block; background-color: #d9d9d8; position: absolute; top: 0; height: 100%; width: 100%; opacity: 0.5; z-index: 100; } .texte-boutique-fermee { position: relative; z-index: 200; border: 1px solid #dcdbdb; border-radius: 4px; } .texte-boutique-fermee .title-store-closed { font-family: 'open_sanslight'; color: #616161; font-size: 28px; height: 70px; border-bottom: 1px solid #dcdbdb; line-height: 70px; } .texte-boutique-fermee .text-content { font-family: 'OpenSans'; color: #616161; font-size: 20px; padding-top: 35px; padding-bottom: 40px; } .texte-boutique-fermee .link-inscription-news { font-family: 'open_sanssemibold'; color: #4ca0b3; font-size: 16px; border-top: 1px solid #dcdbdb; height: 70px; line-height: 70px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: #f8f8f8; } .offre-terminee .texte-boutique-fermee { display: block; position: absolute; top: 15px; width: 33.33333333%; left: 33.33333333%; background-color: #fff; z-index: 100; -moz-box-shadow: 0px 0px 10px 0px #c6c4bf; -webkit-box-shadow: 0px 0px 10px 0px #c6c4bf; -o-box-shadow: 0px 0px 10px 0px #c6c4bf; box-shadow: 0px 0px 10px 0px #c6c4bf; } .content-store-online { display: block; position: absolute; width: 100%; height: 260px; z-index: 100; border-top: 1px solid #f9f9f9; background-color: #ffffff; } .store-online{ border-radius: 4px; border: 1px solid #dddcdc; } @media only screen and (max-width:992px) { .offre-terminee .texte-boutique-fermee { width: 50%; left: 25%; } } @media only screen and (max-width:767px) { .offre-terminee .texte-boutique-fermee { width: 100%; left: 0; top: 80px; } } /*** Fin "Offre Terminée" ***/ /*** Ajout du champ "Newsletter" dans le footer [PCUK-659] ***/ @media only screen and (min-width:1024px) { .block-subscribe { margin-bottom: 50px; } } @media only screen and (max-width:1024px) { .block-subscribe { margin-bottom: 25px; } } .block-subscribe .validation-advice { position: absolute; color: #e65968; } @media only screen and (max-width:767px) { .block-subscribe .validation-advice { position: relative; color: #c8081d; } } .block-subscribe label { font-family: 'sourcesanspro-regular'; font-size: 22px; } @media only screen and (max-width:768px) { .block-subscribe label { font-size: 18px; } } .block-subscribe label .bold { font-family: 'sourcesanspro-bold'; } .block-subscribe label .italic { font-family: 'opensans-italic'; } .block-subscribe .input-box input { font-family: 'open_sanslight'; } .title-newsletter { display: inline-block; vertical-align: middle; color:#ffffff; } @media only screen and (min-width:992px) { .title-newsletter { margin-right: 30px; } } @media only screen and (max-width:768px) { .title-newsletter { width: 100%; margin: 20px 0 10px; } } .title-newsletter label { margin: 0; } .fond-champ-newsletter { display: inline-block; vertical-align: middle; } @media only screen and (min-width:768px) { .fond-champ-newsletter { background-color: #f4f2f3; padding: 1px; } .fond-champ-newsletter .actions { float: left; } .fond-champ-newsletter .input-box { float: left; width: 360px; } } @media only screen and (max-width:767px) { .fond-champ-newsletter { width: 100%; } .fond-champ-newsletter .input-box { width: 100%; background-color: #f4f2f3; } .fond-champ-newsletter .actions { margin-top:10px; } } .fond-champ-newsletter .input-box input { border:none; height: 46px; background-color: transparent; font-size:22px; } .button-subscribe-newsletter { background-color: #5a5a5a; border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; height: 46px; display: inline-block; text-transform: uppercase; padding-left: 34px; padding-right: 28px; transition: all 0.2s; } .button-subscribe-newsletter:after { content:""; width: 0; height: 0; margin-left: 12px; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #ffffff; display: inline-block; vertical-align: middle; } .button-subscribe-newsletter:hover { opacity: 0.7; } @media only screen and (max-width:767px) { .button-subscribe-newsletter { border: 1px solid white; font-size: 14px; } } /*** FIN - Ajout du champ "Newsletter" dans le footer [PCUK-659] ***/ /*------------------------------------*\ $SLIDESHOW \*------------------------------------*/ .market-slideshow { overflow: hidden; } .market-slider-dot { position: absolute; } .market-slideshow{ position:relative; } /* Hauteur des slideshows */ .market-slideshow, .market-slideshow > ul:first-child { width:100%; height:100%; } .market-slideshow > ul { position: absolute; } .market-slider-nav{ top:38%; } .market-slider-next > a { right: 0; } .market-slider-dot{ width:auto; bottom:10px; left: 50%; transform: translate(-50%, 0); } /* SLIDESHOW - NAVIGATION */ .market-slideshow .market-slider-nav { display: none; } .market-slideshow:hover .market-slider-nav { display: block; width:100%; position:absolute; } .market-slider-nav a { position: absolute; display: inline-block; width: 50px; height: 97px; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/home/slide-nav.png") no-repeat; cursor: pointer; } .market-slider-previous a { background-position: right 0; } .market-slider-previous a:hover { background-position: right -97px; } .market-slider-next a:hover { background-position: 0 -97px; } .market-slider-nav span { display: none; } /* refacto slider (slider responsive - jcy) */ .slider-planet li, .slider-planet li a{ display:block; height:100% } .slider-planet /* dots */ .market-slider-dot { position: absolute; } .market-slider-dot li { float: left; margin-right: 7px; } .market-slider-dot li:last-child { margin-right: 0; } .market-slider-dot a { display: inline-block; width: 16px; height: 16px; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/home/slide-nav.png") 0 bottom no-repeat; cursor: pointer; } .market-slider-dot .active a { background-position: right bottom; } .market-slider-dot span { display: none; } /* SLIDESHOW - NAVIGATION */ .market-slideshow .market-slider-nav { display: none; } .market-slideshow:hover .market-slider-nav { display: block; width:100%; position:absolute; } .market-slider-nav a { position: absolute; display: inline-block; width: 50px; height: 97px; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/home/slide-nav.png") no-repeat; cursor: pointer; } .market-slider-previous a { background-position: right 0; } .market-slider-previous a:hover { background-position: right -97px; } .market-slider-next a:hover { background-position: 0 -97px; } .market-slider-nav span { display: none; } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(https://www.planet-cards.com/skin/frontend/planetbootstrap/default/css/mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/css/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/css/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "flat-blue" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-flat-blue.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-flat-blue.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-flat-blue.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-flat-blue.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-flat-blue.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-flat-blue.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-flat-blue.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-flat-blue.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "flat-blue" */ .mCS-flat-blue.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #1e82b0; background-color: rgba(30,130,176,1); } .mCS-flat-blue.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #1e82b0; background-color: rgba(30,130,176,0.85); } .mCS-flat-blue.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-flat-blue.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #1e82b0; background-color: rgba(30,130,176,1); } .mCS-flat-blue.mCSB_scrollTools .mCSB_draggerRail{ background-color: #1e82b0; background-color: rgba(0,0,0,0.1); } .mCS-flat-blue.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-flat-blue.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-flat-blue.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-flat-blue.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ /* pre header */ #pre-header .website-choice a { font-family: 'opensans'; font-size:14px; color:#616161; margin-right:15px; position:relative; height:40px; display: inline-block; } #pre-header .website-choice a.current { font-family: 'open_sanssemibold'; } #pre-header .website-choice a.current::after { /*background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/arrow-website-choice.png") no-repeat scroll center bottom transparent;*/ border-top: 2px solid #f5c011; content: ""; display: block; height: 5px; left: 0; position: absolute; width: 100%; } /* deco Noel */ /*#pre-header .website-choice a.noel15.current::after { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/arrow-website-choice-noel15.png") no-repeat scroll center bottom transparent; border-color:#A38D45; }*/ #pre-header { height:40px; line-height: 40px; } #pre-header .website-choice { height:40px; } #pre-header .user-toolbox > div { margin: 0 10px; min-height:24px; /* fix rapide utile pour tooltip */ cursor: pointer; position: relative; } #pre-header .user-toolbox .cart *, #pre-header .user-toolbox > div { display: inline-block; vertical-align: middle; } #header-wrapper .user-toolbox > div, #header-wrapper .user-toolbox > a, #header-wrapper .user-toolbox .cart i { display:inline-block!important; vertical-align: middle; } #header-wrapper .user-toolbox.pull-right{ padding-top: 5px; } #header-wrapper .user-toolbox .openmenu{ margin-top:2px } #header-wrapper .user-toolbox .cart{ margin-right:15px; } .header-wrapper-desktop { background-color: #ffffff; } .header-flat-loupe { width: 22px; height: 23px; background-position: -10px -444px; } .header-flat { background-image: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/header-sprites-pcfr-nextgen.png'); background-repeat: no-repeat; display: block; } .header-flat-menu-mobile { width: 19px; height: 12px; background-position: -10px -529px; display: inline-block; } @media only screen and (min-width: 768px) { .user-toolbox .lib-menu { display: inline-block !important; font-family: 'opensans-bold'; color:#616161; font-size:14px; margin-right:8px; } } .header-flat-cart-mobile { width: 30px; height: 31px; background-position: -6px -43px; } .user-toolbox .title::before, .website-choice > div > div::before { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/arrow-preheader.png") no-repeat scroll center bottom transparent; width:13px; height:7px; display: block; content: " "; position: absolute; top:-20px; left:47%; } .website-choice > div > div::before { top: -7px; } .user-toolbox .show-my-account .deconnection { background-color: #f8f8f8; border-top: 1px solid #dcdbdb; display: block; padding: 15px 0; width: 100%; } .user-toolbox .show-contact-us p > span { font-family: open_sanssemibold; font-size:16px; } #pre-header .user-toolbox > div > div.active { display:block; } #pre-header .user-toolbox > div.active i.header-flat, #pre-header .user-toolbox > div.current i.header-flat { opacity: 0.6; } #pre-header .user-toolbox > div > div, .website-choice > div > div { background: none repeat scroll 0 0 white; border: 1px solid #dcdcdc; border-radius: 5px; color: #616161; display: none; font-family: "opensans"; left: -110px; line-height: normal; min-width: 250px; padding-top: 15px; position: absolute; text-align: center; top: 40px; width: auto; z-index: 99999; } .website-choice > div > div { top: 55px; left: -90px; padding: 15px; } .header-flat-contact-mobile { width: 25px; height: 24px; background-position: -10px -281px; } .user-toolbox .title { border-bottom: 1px solid #dcdcdc; display: block; font-size: 16px; margin-top: -2px; padding-bottom: 13px; position: relative; } .user-toolbox .show-contact-us p { margin-top:25px; } .user-toolbox > div > div p { padding: 0 25px; text-align: left; font-size:14px; } .user-toolbox .bouton-flat { margin:25px 0; } .header-flat-compte { width: 26px; height: 24px; background-position: -10px -195px; } #pre-header .user-toolbox .cart { line-height: 38px; vertical-align: top !important; margin-right:0; } #pre-header .user-toolbox div, .website-choice > div { display:inline-block; position: relative; } #pre-header .cart a { font-family: 'open_sanssemibold'; color:#4ca0b3; font-size:14px; display: block !important; } #pre-header .user-toolbox .cart i { margin-right:6px; } .header-flat-carte { width: 30px; height: 27px; background-position: -7px -93px; } #pre-header .user-toolbox .cart span { margin-right:5px; display: none; } .user-toolbox .cart.active { opacity: 0.6; } #header-wrapper .user-toolbox .circle { margin: 0 7px; padding: 1px 6px !important; } .user-toolbox .cart .circle { background-color: #efeeee; border-radius: 7px; color: #908f90; height: auto; line-height: 19px; margin: 0; padding: 3px 7px; width: auto; font-family: 'opensans-bold'; font-size:14px; display:inline-block; } /* message preheader */ .mea-top-header .blue { background-color: #4ca0b3; color: white; display: block; height: 40px; position: absolute; width: 100%; z-index: 10; font-family: 'opensans'; font-size:14px; line-height: 40px; cursor: pointer; } .mea-top-header .blue p{ display:inline-block; } .mea-top-header .blue p > a{ display: inline-block; font-size: 14px; margin-left:119px; color: white; } .mea-top-header .blue p > a { margin-left: 15px; } @media (max-width: 1200px) { .mea-top-header .blue p > a{ font-size: 12px; } } .mea-top-header .blue p > a span { font-size:14px; } .mea-top-header .blue a.btn-cta{ background-color: #357986; color: white; display: inline-block; font-family: 'opensans-bold'; height: 100%; margin: 0 10px; padding: 0 35px 0 10px; text-transform: uppercase; position: relative; } .mea-top-header .blue a.btn-cta span::after{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/arrow-webistechoice.png"); content: ""; height: 12px; position: absolute; right: 10px; top: 13px; width: 17px; } /* reassurances sous menu */ .sm-reass i { display: inline-block; margin-right: 5px; vertical-align: middle; } .sm-reass .inner { border: 1px solid #dddcdc; font-family: "opensans"; padding: 11px 0; text-align: center; font-size: 14px; } .sm-reass .inner.free-shipping{ padding: 4px 0; } .sm-reass .inner > p { display: inline-block; text-align: left; vertical-align: middle; font-size: 12px; } .sm-reass .inner > p > span { font-size: 14px; } /** Sous Menu de mise en avant PCFR sur site PPFR **/ #navigation-sous-menu .carterie-sous-menu::after, #navigation-sous-menu .objets-sous-menu::after{ background: none !important; /*reset gradient */ background-color: #7db161 !important; } #navigation-sous-menu .carterie-sous-menu, #navigation-sous-menu .objets-sous-menu { min-height:480px; background:none!important; /* reset gradient */ background-color: #f8f5f5 !important; } #navigation-sous-menu .carterie-sous-menu .bg-left, #navigation-sous-menu .carterie-sous-menu .bg-right, #navigation-sous-menu .objets-sous-menu .bg-left, #navigation-sous-menu .objets-sous-menu .bg-right{ display: block; height: 100%; position: absolute; width: 100%; } .carterie-sous-menu .encart-links, .objets-sous-menu .encart-links { background-color: white; border-bottom: 1px solid #eeeaea; border-right: 1px solid #eeeaea; padding: 35px; } .carterie-sous-menu .encart-links ul, .objets-sous-menu .encart-links ul { margin: 0 0 30px 0 !important; padding: 0; } .carterie-sous-menu .encart-links ul:nth-child(2), .objets-sous-menu .encart-links ul:nth-child(2) { padding-left: 20px; } .carterie-sous-menu .col-sm-6 .bouton-flat, .objets-sous-menu .col-sm-6 .bouton-flat { display: inline-block !important; margin-top: 250px !important; } #navigation-sous-menu .carterie-sous-menu h2, #navigation-sous-menu .objets-sous-menu h2 { color: #616264; margin-bottom: 40px; margin-left: 20px; margin-top: 15px; } .carterie-sous-menu ul li, .objets-sous-menu ul li { margin-bottom:20px; } .carterie-sous-menu .block-bottom, .objets-sous-menu .block-bottom { border: 1px solid #dcdbdb; text-align: center; } .carterie-sous-menu .block-bottom a, .objets-sous-menu .block-bottom a { font-family: 'novecento-demibold' !important; } .carterie-sous-menu .block-bottom a:hover, .objets-sous-menu .block-bottom a:hover { color: #616161 !important; opacity: 0.8; } .carterie-sous-menu .block-bottom a span, .objets-sous-menu .block-bottom a span { color: #f4a204; display: block; } /** Fin Sous Menu de mise en avant PCFR sur site PPFR **/ /* onglet carterie/objets */ #nav-desktop .objets > a, #nav-desktop .carterie > a { background: none repeat scroll 0 0 #f4f4f4; border: 1px solid #efeeee; border-radius: 4px; padding: 8px 12px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #nav-desktop .objets > a:hover, #nav-desktop .objets > a.hover, #nav-desktop .carterie > a:hover, #nav-desktop .carterie > a.hover { color:white; background: none repeat scroll 0 0 #616161; border:1px solid #4b4b4b; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* couleur carte de voeux */ #navigation-top li a.cartevoeux { color:#a38d45; position: relative; padding: 10px 20px 0 0; } #navigation-top li a.cartevoeux:after { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/stars.png') no-repeat top left transparent; width: 28px; height: 18px; content: ""; display: inline-block; position: absolute; top: 0; right: 0; } #navigation-top li a.cartevoeux:hover { opacity: 0.8; color:#a38d45; } #nav-desktop .gold a { background-color: #a38d45; color: white; border: 1px solid #a38d45; } #nav-desktop .gold a:hover { opacity: 0.8; background-color: #a38d45 !important; border: 1px solid #a38d45 !important; } /* header-wrapper */ #header-wrapper { border-bottom: 1px solid #dcdbdb; background-color: white; } @media (min-width:1200px){ #header-wrapper { border-top: 1px solid #dcdbdb; } } .header-inner .logo a { display:block; height:100%; width:100%; cursor: pointer; } #header-wrapper #navigation-top { position: relative; display:none; } #navigation-top { z-index: 30; } #navigation-top li.blue a { color:#3b98ac; text-transform: none !important; padding-left:13px !important; } #navigation-top li a, #navigation-top.mm-menu li span { font-family: 'open_sanssemibold'; text-transform:uppercase; font-size:14px; color:#616161; cursor: pointer; } @media only screen and (min-width:980px) { #header-wrapper #navigation-top { display:block !important; } .header-wrapper-desktop #navigation-top { text-align: right; } .header-wrapper-desktop #navigation-top ul li { display: inline-block; margin: 0 10px; position:relative; } .header-wrapper-desktop #navigation-top ul li:last-child{ margin-right:0!important; } #navigation-top ul li .arrow { background-image: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/arrow-menu-top-item.png'); bottom: -9px; content: ""; display: none; height: 9px; left: 40%; position: absolute; width: 21px; z-index: 99999; } #navigation-sous-menu { position: relative; } #navigation-sous-menu > div { background: white; display: none; padding: 40px 20px 20px; position: absolute; width: 100%; z-index: 20; background: #f8f8f8; /* Old browsers */ background: -moz-linear-gradient(top, #f8f8f8 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f8f8f8 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f8f8f8 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f8f8f8 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #f8f8f8 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } #navigation-sous-menu > div:after { content:''; height:2px; width:100%; display:block; position:absolute; bottom:0; left:0; background: rgba(77,160,179,1); background: -moz-linear-gradient(left, rgba(77,160,179,1) 0%, rgba(120,197,191,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(77,160,179,1)), color-stop(100%, rgba(120,197,191,1))); background: -webkit-linear-gradient(left, rgba(77,160,179,1) 0%, rgba(120,197,191,1) 100%); background: -o-linear-gradient(left, rgba(77,160,179,1) 0%, rgba(120,197,191,1) 100%); background: -ms-linear-gradient(left, rgba(77,160,179,1) 0%, rgba(120,197,191,1) 100%); background: linear-gradient(to right, rgba(77,160,179,1) 0%, rgba(120,197,191,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4da0b3', endColorstr='#78c5bf', GradientType=1 ); } #navigation-sous-menu .carterie-sous-menu { background: #EAEBED; /* Old browsers */ } #navigation-sous-menu, #navigation-sous-menu a { font-family:'open_sanssemibold'; color:#616161; font-size:16px; display:block; } #navigation-sous-menu ul { margin-bottom:40px; } #navigation-sous-menu a { margin: 15px 0; } #navigation-sous-menu a:hover, #navigation-top li a:hover { color:#6aa14c; } #navigation-top li.objets a:hover { color: white; } #navigation-sous-menu ul a { margin: 2px 0; } #navigation-sous-menu .col-md-4 > a:first-child, #navigation-sous-menu .col-md-5 > a:first-child { margin-top:0; } #navigation-sous-menu ul li > ul li { display: block; float:none; margin-bottom: 0; width: auto; } #navigation-sous-menu h2, #navigation-sous-menu .apercu { font-family:'OpenSans-bold'; font-size:20px; color:#6aa14c; margin-bottom:20px; display: block; } #navigation-sous-menu li ul li a { font-family: 'opensans'; font-size:14px; padding-left: 20px; } #navigation-sous-menu li ul li a:before { content: "- "; display:inline-block; padding-right:5px; } #navigation-sous-menu .break { clear:both; } #navigation-sous-menu .solo { display:inline-block; float:none; } } #navigation-sous-menu .visuels-wrapper { background:#e5e4e4; text-align: center; padding: 15px; margin-bottom:50px; font-family: 'opensans'; min-height:285px; } #navigation-sous-menu .visuel { display:none; } #navigation-sous-menu .visuel.default { display: block; } #navigation-sous-menu .visuel img { margin-bottom:20px; } .header-cart-wrapper { border-bottom:1px solid #eaebed; background-color:white; } .header-cart-wrapper #header-wrapper{ border-bottom:1px solid transparent; } .header-cart-wrapper .container { font-family: 'opensans'; font-size: 14px; color: #616161; } .header-cart-wrapper .container > div { position: relative; text-align: center; } .header-cart-wrapper .container a { color: #616161; } .header-cart-wrapper .container .back { position: absolute; top:25px; left:0; } .header-cart-wrapper .container .back a { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .header-cart-wrapper .container .back a:hover{ opacity: 0.7; filter: alpha(opacity=70); } .header-cart-wrapper .container .contact { position: absolute; top:25px; right:0; } .header-cart-wrapper .container .logo-desktop a { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cart/logo_desktop-charte_2015.png") no-repeat center transparent; width:158px; height:66px; display: inline-block; margin: 30px 0 20px; } .header-cart-wrapper .picto-bulle { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/header-sprites-pcfr.png") no-repeat transparent; display: inline-block; width: 25px; height: 24px; background-position: -10px -281px; vertical-align: middle; margin-right:3px; } .header-cart-wrapper .picto-fleche-gauche { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cart/picto-fleche-gauche.png") no-repeat transparent; display: inline-block; width: 19px; height: 12px; vertical-align: middle; margin-right:3px; margin-top:-3px; } @media (max-width:991px) { .header-cart-wrapper { border: none; } #header-wrapper .header-inner .logo { background: transparent url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/pcfr-logo-xs-sm_charte2015.png") no-repeat scroll left center; width:116px; height:39px; } .header-cart-wrapper .container > div { text-align: right; } } @media (max-width:1024px) { #header-wrapper.resp .header-inner .logo { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/pcfr-logo-xs-sm_charte2015.png") no-repeat; width:116px; height:39px; } #header-wrapper{ padding-top:15px; padding-bottom:15px; } } @media (min-width:1025px) { #header-wrapper .header-inner, #header-wrapper .logo { height: 100px; line-height: 100px; } } @media only screen and (max-width: 1024px) and (orientation:landscape) { /** Pour forcer les tablettes paysage à utiliser le menu mobile **/ .header-wrapper-desktop.hidden-sm { display: none !important; } #header-wrapper.resp { display: block !important; } } /** Champ search **/ .clic-show-search.active, .clic-show-search .fond-bt_search, .clic-show-search .close-search { display: inline-block; } .clic-show-search { background: none repeat scroll 0 0 #dcdbdb; display: none; height: 102px; position: absolute; top: 40px; width: 100%; z-index: 999; -moz-box-shadow: inset 0 3px 3px -3px #696868; -webkit-box-shadow: inset 0 3px 3px -3px #696868; box-shadow: inset 0 3px 3px -3px #696868; } .clic-show-search .fake-search, .clic-show-search .form-search input { background: none repeat scroll 0 0 transparent; border: medium none; font-family: 'opensans'; font-size:30px; color:#616161; display: inline-block; width:100%; outline: none; } .clic-show-search .form-search input.fake-search { position: absolute; width: auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .clic-show-search .fond-bt_search { display: inline-block; } .clic-show-search .wrapper-input { border-bottom: 1px solid #cac9c9; display: inline-block; height: auto; margin-right: 5px; padding-bottom: 5px; width: 88%; } .clic-show-search .wrapper-btn { display: inline-block; } .clic-show-search .wrapper-input, .clic-show-search .wrapper-btn { vertical-align: middle; margin-top:25px; } .clic-show-search .fond-bt_search, .clic-show-search .close-search { height:42px; vertical-align: top; } .clic-show-search .btn-valid, .clic-show-search .btn-close-search { background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/btn-search.png") no-repeat scroll top left transparent; border:none; height:42px; width:43px; } .clic-show-search .btn-close-search { background-position: top right; margin-left: 8px; } .clic-show-search .btn-close-search:hover, .clic-show-search .btn-close-search:active { background-position: bottom right; } .clic-show-search .btn-valid:hover, .clic-show-search .btn-valid:active { background-position: bottom left; } #pre-header .search.current .arrow { background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/arrow-menu-top-item.png"); bottom: -16px; display: block !important; height: 9px; left: 3px; position: absolute; width: 21px; z-index: 999; } /*********************/ /*Breadcrumbs*/ .breadcrumbs-wrapper.nextgen { height:160px; text-align: center; font-family: 'open_sanssemibold'; font-size:14px; color:#616161; } .breadcrumbs-wrapper.nextgen > div { position: relative; width:665px; } .breadcrumbs-wrapper.nextgen > div:not(.resp)::before { content: ""; height: 3px; width: 92%; background-color: #B7B8BA; position: absolute; left: 22px; top: 66px; } .breadcrumbs-wrapper.nextgen .un, .breadcrumbs-wrapper.nextgen .deux, .breadcrumbs-wrapper.nextgen .trois { position: absolute; color:white; z-index: 10; top:50px; min-width: 70px; } .breadcrumbs-wrapper.nextgen .bulle { height: 35px; width: 35px; background-color: #b7b8ba; border-radius: 50px; line-height: 34px; display: inline-block; } .onestepcheckout-index-index .breadcrumbs-wrapper.nextgen .un .bulle { color:white; } .breadcrumbs-wrapper.nextgen .bulle .breadcrumbs-wrapper.nextgen .un { left:0; } .breadcrumbs-wrapper.nextgen .deux { display:inline-block; position: relative; } .breadcrumbs-wrapper.nextgen .trois { right:0; } .breadcrumbs-wrapper.nextgen .txt { color:#616161; display: block; padding-top:10px; } .checkout-cart-nextgen .breadcrumbs-wrapper.nextgen a { cursor: inherit; } .onestepcheckout-index-index .breadcrumbs-wrapper.nextgen a:hover .txt { opacity: 0.7; } .checkout-cart-nextgen .breadcrumbs-wrapper.nextgen .un .bulle, .onestepcheckout-index-index .breadcrumbs-wrapper.nextgen .deux .bulle, .market-payment-sherlocks-request .breadcrumbs-wrapper.nextgen .trois .bulle { background-color: #fdd13c; color:#515151; } .checkout-cart-nextgen .breadcrumbs-wrapper.nextgen .un .txt, .onestepcheckout-index-index .breadcrumbs-wrapper.nextgen .deux .txt, .market-payment-sherlocks-request .breadcrumbs-wrapper.nextgen .trois .txt { font-family: "opensans-bold"; } @media (max-width:991px) { .breadcrumbs-wrapper.nextgen { height: 50px; margin-bottom:35px; } .breadcrumbs-wrapper.nextgen .resp { width: 100%; } .breadcrumbs-wrapper.nextgen .resp > div { height:50px; line-height: 50px; font-family: "opensans-bold"; font-size:17px; color:white; background-color:#b7b8ba; text-transform: uppercase; } .checkout-cart-nextgen .breadcrumbs-wrapper.nextgen .resp > div:nth-child(1), .onestepcheckout-index-index .breadcrumbs-wrapper.nextgen .resp > div:nth-child(2), .market-payment-sherlocks-request .breadcrumbs-wrapper.nextgen .resp > div:nth-child(3) { background-color:#fdd13c; color:#515151; } .breadcrumbs-wrapper.nextgen .resp > div:nth-child(2) { border-left:1px solid #a8a9a9; border-right:1px solid #a8a9a9; } .breadcrumbs { display: block; } } @media (max-width:460px) { .breadcrumbs-wrapper.nextgen .resp > div { font-size:14px; padding:0; } } .checkout-cart-nextgen, .checkout-cart-nextgen .wrapper, .onestepcheckout-index-index .wrapper { background-color: #f8f8f8; } .onestepcheckout-index-index .onestepcheckout-threecolumns { background-image: none; background-color: #ffffff; padding: 15px; border-radius: 5px; border: 1px solid #eaebed; } @media (max-width:767px) { .onestepcheckout-index-index .onestepcheckout-threecolumns { padding: 15px 0; } .market-payment-sherlocks-request .header-inner{ padding:0 !important; } } #header-wrapper #navigation-top ul li > ul { display:none; position:absolute } @media (max-width: 1200px) { #nav-desktop li a, #nav-desktop li span { font-size:12px; } } /** Mobile **/ #navigation-top.mm-menu li { text-transform: uppercase; } #mm-1 .mm-subopen, .mm-highest .mm-subopen { /*display:none;*/ } #mm-1.mm-list a.mm-subopen + a, #mm-1.mm-list a.mm-subopen + span { margin-right: 0; } .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after { margin-left:0 !important; } html.mm-opened.mm-white .mm-page { box-shadow: none !important; } html.mm-opened.mm-white .mm-page:before { content: ""; position: fixed; height:100%; width:100%; background-color:black; z-index: 99999999; opacity: 0.7; } .mm-header [href].mm-prev:before { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-arrow-prev-mobile.jpg') no-repeat top left transparent; width:38px !important; height:36px !important; transform: rotate(0) !important; -webkit-transform: rotate(0deg) !important; border:none !important; } .mm-header .mm-title, .mm-header .mm-prev, .mm-header .mm-next, .mm-header .mm-close { padding-top: 14px !important; padding-left: 10px; } .mm-header { background-color:#eeeeee !important; color:#616161; display: block !important; } .mm-header .mm-title { color:#616161; font-family: 'OpenSans-bold'; font-size:14px; text-transform: uppercase; padding-top:23px !important; } .mm-menu.mm-hasheader li.mm-subtitle { display: none !important; } li.ppfr { background-color:#3f5970; } li.ppfr a, li.ppfr span { color:white !important; } li.ppfr .inner { border: 1px solid; border-radius: 5px; padding: 25px 15px; } li.ppfr .inner span:first-child { font-style: italic; text-transform: none; } li.ppfr .ppfr-title { color:#f4bc04 !important; } .mm-header .closemenu { position: absolute; top: 14px; right: 12px; } .mm-menu.mm-white .mm-list > li.mm-selected > a:not(.mm-subopen), .mm-menu.mm-white .mm-list > li.mm-selected > span { background:#616161 !important; color:white !important; } .mm-header .mm-title, .mm-header .mm-prev, .mm-header .mm-next, .mm-header .mm-close { padding-top: 20px; } /** Menu top - (anciennement dans tablet-fr.css - Se retrouve ici suite à demande de même fonctionnement sur les petites résolution desktop) *****/ #navigation-top.mm-menu li { margin: 0 !important; } .mm-menu.resp .form-search > label, .mm-menu.resp .form-search .fond-bt_search, .mm-menu.resp .form-search .text-example-search { display:none; } .mm-menu.resp .form-search .input-text { border: none; background-color: #4ca0b3; padding: 12px 50px 12px 20px; color: white; font-size: 15px; font-family: 'open_sansbold_italic'; border-radius: 0; } #header-wrapper .user-toolbox .cart i { margin-top:-5px; } .mm-list > li > a, .mm-list > li > span { padding: 15px 10px 15px 20px !important; } @media only screen and (max-width: 767px) and (orientation:portrait) { .mm-menu { width: 90%; } } @media only screen and (min-width: 980px) { #header-wrapper.resp #navigation-top ul li { display: block; margin: 0; } #header-wrapper.resp #navigation-top { text-align: left; } } /** Fin menu top **/ .mm-menu .mm-list i { display: inline-block; vertical-align:middle; margin-right:12px; } /* sprites */ /*AVANT NOEL15 .header-flat {*/ /*background-image: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/header-sprites-pcfr.png');*/ /*background-repeat: no-repeat;*/ /*display: block;*/ /*}*/ .mm-menu .form-search .input-text { background-image: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/header-sprites.png'); background-repeat: no-repeat; background-position: 105% -475px; } .header-flat-arrow-grey-nav-mobile { width: 10px; height: 17px; background-position: -10px -10px; } .mm-list a.mm-subopen:after, .mm-list a.mm-subclose:before { background-image: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/header-sprites.png'); background-repeat: no-repeat; background-position: -10px -10px; width: 10px !important; height: 17px !important; border: none !important; transform: rotate(0) !important; -webkit-transform: rotate(0deg) !important; top: 16px; right:20px; } .header-flat-close-btn-mobile { width: 38px; height: 35px; background-position: -10px -140px; } .logged-in .header-flat-compte { background: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/user-co.png') no-repeat top left transparent !important; height:24px; width:28px; vertical-align: top !important; } .header-flat-contact { width: 22px; height: 22px; background-position: -10px -239px; } .header-flat-enveloppe { width: 22px; height: 17px; background-position: -10px -325px; } .header-flat-fabrication { width: 22px; height: 21px; background-position: -10px -362px; } .header-flat-livraison { width: 33px; height: 21px; background-position: -10px -403px; } .header-flat-loupe-mobile { width: 22px; height: 22px; background-position: -10px -487px; } .header-flat-tarif { width: 18px; height: 19px; background-position: -10px -561px; } /* Fin sprites */ /* pictos voir tous */ .see-all{ background-image: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/picto_voir_toutes_thematiques.png"); padding: 0 0 0 15px; background-position: left center; background-repeat: no-repeat; } @media only screen and (min-width: 980px){ #navigation-sous-menu li ul li.see-all a:before{ content:""; padding-right:inherit; } #navigation-sous-menu li ul li.see-all a{ padding-left:0; } } /* fin pictos voir tous */ /* Menu Mobile N1 inter */ #desk-menu-mobile-n1{ border-bottom:none; } /* jQuery.mmenu CSS */ /* jQuery.mmenu panels CSS */ .mm-menu.mm-horizontal > .mm-panel { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } .mm-menu .mm-hidden { display: none; } .mm-wrapper { overflow-x: hidden; position: relative; } .mm-menu, .mm-menu > .mm-panel { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .mm-menu { background: inherit; display: block; overflow: hidden; padding: 0; } .mm-menu > .mm-panel { background: inherit; -webkit-overflow-scrolling: touch; overflow: scroll; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 20px; -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } .mm-menu > .mm-panel.mm-opened { -webkit-transform: translate(0%, 0); -moz-transform: translate(0%, 0); -ms-transform: translate(0%, 0); -o-transform: translate(0%, 0); transform: translate(0%, 0); } .mm-menu > .mm-panel.mm-subopened { -webkit-transform: translate(-30%, 0); -moz-transform: translate(-30%, 0); -ms-transform: translate(-30%, 0); -o-transform: translate(-30%, 0); transform: translate(-30%, 0); } .mm-menu > .mm-panel.mm-highest { z-index: 1; } .mm-menu .mm-list { padding: 20px 0; } .mm-menu > .mm-list { padding-bottom: 0; } .mm-menu > .mm-list:after { content: ''; display: block; height: 40px; } .mm-panel > .mm-list { margin-left: -20px; margin-right: -20px; } .mm-panel > .mm-list:first-child { padding-top: 0; } .mm-list, .mm-list > li { list-style: none; display: block; padding: 0; margin: 0; } .mm-list { font: inherit; font-size: 14px; } .mm-list a, .mm-list a:hover { text-decoration: none; } .mm-list > li { position: relative; } .mm-list > li > a, .mm-list > li > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: inherit; line-height: 20px; display: block; padding: 10px 10px 10px 20px; margin: 0; } .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after { content: ''; border-bottom-width: 1px; border-bottom-style: solid; display: block; width: 100%; position: absolute; bottom: 0; left: 0; } .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after { width: auto; margin-left: 20px; position: relative; left: auto; } .mm-list a.mm-subopen { background: rgba(3, 2, 1, 0); width: 40px; height: 100%; padding: 0; position: absolute; right: 0; top: 0; z-index: 2; } .mm-list a.mm-subopen:before { content: ''; border-left-width: 1px; border-left-style: solid; display: block; height: 100%; position: absolute; left: 0; top: 0; } .mm-list a.mm-subopen.mm-fullsubopen { width: 100%; } .mm-list a.mm-subopen.mm-fullsubopen:before { border-left: none; } .mm-list a.mm-subopen + a, .mm-list a.mm-subopen + span { padding-right: 5px; margin-right: 40px; } .mm-list > li.mm-selected > a.mm-subopen { background: transparent; } .mm-list > li.mm-selected > a.mm-fullsubopen + a, .mm-list > li.mm-selected > a.mm-fullsubopen + span { padding-right: 45px; margin-right: 0; } .mm-list a.mm-subclose { text-indent: 20px; padding-top: 30px; margin-top: -20px; } .mm-list > li.mm-label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 10px; text-transform: uppercase; text-indent: 20px; line-height: 25px; padding-right: 5px; } .mm-list > li.mm-spacer { padding-top: 40px; } .mm-list > li.mm-spacer.mm-label { padding-top: 25px; } .mm-list a.mm-subopen:after, .mm-list a.mm-subclose:before { content: ''; border: 2px solid transparent; display: inline-block; width: 7px; height: 7px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin-bottom: -5px; position: absolute; bottom: 50%; } .mm-list a.mm-subopen:after { border-top: none; border-left: none; right: 18px; } .mm-list a.mm-subclose:before { border-right: none; border-bottom: none; margin-bottom: -15px; left: 22px; } .mm-menu.mm-vertical .mm-list .mm-panel { display: none; padding: 10px 0 10px 10px; } .mm-menu.mm-vertical .mm-list .mm-panel li:last-child:after { border-color: transparent; } .mm-menu.mm-vertical .mm-list li.mm-opened > .mm-panel { display: block; } .mm-menu.mm-vertical .mm-list > li > a.mm-subopen { height: 40px; } .mm-menu.mm-vertical .mm-list > li > a.mm-subopen:after { top: 16px; bottom: auto; } .mm-menu.mm-vertical .mm-list > li.mm-opened > a.mm-subopen:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .mm-menu.mm-vertical .mm-list > li.mm-label > a.mm-subopen { height: 25px; } html.mm-opened .mm-page { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .mm-menu { background: #333333; color: rgba(255, 255, 255, 0.6); } .mm-menu .mm-list > li:after { border-color: rgba(0, 0, 0, 0.15); } .mm-menu .mm-list > li > a.mm-subclose { background: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-list > li > a.mm-subopen:after, .mm-menu .mm-list > li > a.mm-subclose:before { border-color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-list > li > a.mm-subopen:before { border-color: rgba(0, 0, 0, 0.15); } .mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen), .mm-menu .mm-list > li.mm-selected > span { background: rgba(0, 0, 0, 0.1); } .mm-menu .mm-list > li.mm-label { background: rgba(255, 255, 255, 0.05); } .mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen, .mm-menu.mm-vertical .mm-list li.mm-opened > ul { background: rgba(255, 255, 255, 0.05); } /* jQuery.mmenu offcanvas addon CSS */ .mm-page { box-sizing: border-box; position: relative; } .mm-slideout { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-opened { overflow: hidden; position: relative; } html.mm-opened body { overflow: hidden; } html.mm-background .mm-page { background: inherit; } #mm-blocker { background: rgba(3, 2, 1, 0); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; } html.mm-opened #mm-blocker, html.mm-blocking #mm-blocker { display: block; } .mm-menu.mm-offcanvas { display: none; position: fixed; } .mm-menu.mm-current { display: block; } .mm-menu { width: 80%; min-width: 140px; max-width: 440px; } html.mm-opening .mm-slideout { -webkit-transform: translate(80%, 0); -moz-transform: translate(80%, 0); -ms-transform: translate(80%, 0); -o-transform: translate(80%, 0); transform: translate(80%, 0); } @media all and (max-width: 175px) { html.mm-opening .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 550px) { html.mm-opening .mm-slideout { -webkit-transform: translate(440px, 0); -moz-transform: translate(440px, 0); -ms-transform: translate(440px, 0); -o-transform: translate(440px, 0); transform: translate(440px, 0); } } /* jQuery.mmenu buttonbars addon CSS */ .mm-buttonbar { border: 1px solid transparent; border-radius: 5px; text-align: center; line-height: 20px; overflow: hidden; display: block; padding: 0; margin: 0; position: relative; } .mm-buttonbar:after { content: ''; display: block; clear: both; } .mm-buttonbar > * { border-left: 1px solid transparent; box-sizing: border-box; display: block; width: 100%; height: 100%; float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .mm-buttonbar > a { text-decoration: none; } .mm-buttonbar > input { position: absolute; left: -1000px; top: -1000px; } .mm-buttonbar > input:checked + label { border-color: transparent !important; } .mm-buttonbar > *:first-child, .mm-buttonbar > input:first-child + * { border-left: none; } .mm-buttonbar.mm-buttonbar-2 > * { width: 50%; } .mm-buttonbar.mm-buttonbar-3 > * { width: 33.33%; } .mm-buttonbar.mm-buttonbar-4 > * { width: 25%; } .mm-buttonbar.mm-buttonbar-5 > * { width: 20%; } .mm-header .mm-buttonbar { margin-top: 20px; margin-left: -30px; margin-right: -30px; } .mm-footer .mm-buttonbar { border: none; border-radius: none; line-height: 40px; margin: -10px -10px 0 -20px; } .mm-footer .mm-buttonbar > * { border-left: none; } .mm-list > li > .mm-buttonbar { margin: 10px 20px; } .mm-menu .mm-buttonbar { border-color: rgba(255, 255, 255, 0.6); background: #333333; } .mm-menu .mm-buttonbar > * { border-color: rgba(255, 255, 255, 0.6); } .mm-menu .mm-buttonbar > input:checked + label { background: rgba(255, 255, 255, 0.6); color: #333333; } /* jQuery.mmenu counters addon CSS */ em.mm-counter { font: inherit; font-size: 14px; font-style: normal; text-indent: 0; line-height: 20px; display: block; margin-top: -10px; position: absolute; right: 40px; top: 50%; } em.mm-counter + a.mm-subopen { padding-left: 40px; } em.mm-counter + a.mm-subopen + a, em.mm-counter + a.mm-subopen + span { margin-right: 80px; } em.mm-counter + a.mm-fullsubopen { padding-left: 0; } .mm-vertical em.mm-counter { top: 12px; margin-top: 0; } .mm-nosubresults > em.mm-counter { display: none; } .mm-menu em.mm-counter { color: rgba(255, 255, 255, 0.3); } /* jQuery.mmenu dragOpen addon CSS */ html.mm-opened.mm-dragging .mm-menu, html.mm-opened.mm-dragging .mm-page, html.mm-opened.mm-dragging .mm-fixed-top, html.mm-opened.mm-dragging .mm-fixed-bottom, html.mm-opened.mm-dragging #mm-blocker { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* jQuery.mmenu footer addon CSS */ .mm-footer { background: inherit; border-top: 1px solid transparent; text-align: center; line-height: 20px; box-sizing: border-box; width: 100%; height: 40px; padding: 10px 10px 0 20px; position: absolute; z-index: 2; bottom: 0; left: 0; } .mm-menu.mm-hasfooter > .mm-panel:after { height: 80px; } .mm-menu .mm-footer { border-color: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.3); } /* jQuery.mmenu header addon CSS */ .mm-header { background: inherit; border-bottom: 1px solid transparent; text-align: center; line-height: 20px; box-sizing: border-box; width: 100%; height: 60px; padding: 0 50px; position: absolute; z-index: 2; top: 0; left: 0; } .mm-header .mm-title, .mm-header .mm-prev, .mm-header .mm-next, .mm-header .mm-close { padding-top: 30px; } .mm-header .mm-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; width: 100%; position: relative; } .mm-header .mm-prev, .mm-header .mm-next, .mm-header .mm-close { text-decoration: none; display: block; box-sizing: border-box; min-width: 10px; height: 100%; position: absolute; top: 0; z-index: 1; } .mm-header .mm-prev { padding-left: 20px; padding-right: 10px; left: 0; } .mm-header .mm-next, .mm-header .mm-close { padding-left: 10px; padding-right: 20px; right: 0; } .mm-header [href].mm-prev:before, .mm-header [href].mm-next:after { content: ''; border: 2px solid transparent; display: inline-block; width: 7px; height: 7px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .mm-header [href].mm-prev:before { border-right: none; border-bottom: none; margin-left: 2px; margin-right: 5px; } .mm-header [href].mm-next:after, .mm-header [href].mm-close:after { margin-left: 5px; margin-right: -2px; } .mm-header [href].mm-next:after { border-top: none; border-left: none; } .mm-header [href].mm-close:after { content: 'x'; } .mm-menu.mm-hassearch .mm-header { height: 50px; top: 50px; } .mm-menu.mm-hassearch .mm-header .mm-title, .mm-menu.mm-hassearch .mm-header .mm-prev, .mm-menu.mm-hassearch .mm-header .mm-next, .mm-menu.mm-hassearch .mm-header .mm-close { padding-top: 20px; } .mm-menu.mm-hasheader li.mm-subtitle { display: none; } .mm-menu.mm-hasheader > .mm-panel { padding-top: 80px; } .mm-menu.mm-hasheader > .mm-panel.mm-list { padding-top: 60px; } .mm-menu.mm-hasheader > .mm-panel > .mm-list:first-child { margin-top: -20px; } .mm-menu.mm-hasheader.mm-hassearch > .mm-panel { padding-top: 120px; } .mm-menu.mm-hasheader.mm-hassearch > .mm-panel.mm-list { padding-top: 100px; } .mm-menu .mm-header { border-color: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.3); } .mm-menu .mm-header .mm-prev:before, .mm-menu .mm-header .mm-next:after, .mm-menu .mm-header .mm-close:after { border-color: rgba(255, 255, 255, 0.3); } /* jQuery.mmenu labels addon CSS */ .mm-list li.mm-label > span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0; line-height: 25px; } .mm-list li.mm-label.mm-opened a.mm-subopen:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .mm-list li.mm-collapsed:not(.mm-uncollapsed) { display: none; } .mm-menu.mm-vertical .mm-list > li.mm-label > a.mm-subopen:after { top: 8.5px; } .mm-menu .mm-list li.mm-label > div > div { background: rgba(255, 255, 255, 0.05); } /* jQuery.mmenu searchfield addon CSS */ .mm-search, .mm-search input { box-sizing: border-box; } .mm-list > li.mm-search { padding: 10px; margin-top: -20px; } .mm-list > li.mm-subtitle + li.mm-search { margin-top: 0; } div.mm-panel > div.mm-search { padding: 0 0 10px 0; } .mm-menu.mm-hasheader .mm-list > li.mm-search { margin-top: 0; } .mm-menu > .mm-search { background: inherit; width: 100%; position: absolute; top: 0; left: 0; z-index: 2; } .mm-search { padding: 10px; } .mm-search input { border: none; border-radius: 30px; font: inherit; font-size: 14px; line-height: 30px; outline: none; display: block; width: 100%; height: 30px; margin: 0; padding: 0 10px; } .mm-search input::-ms-clear { display: none; } .mm-menu .mm-noresultsmsg { text-align: center; font-size: 21px; display: none; padding: 60px 0; } .mm-menu .mm-noresultsmsg:after { border: none !important; } .mm-noresults .mm-noresultsmsg { display: block; } .mm-menu li.mm-nosubresults > a.mm-subopen { display: none; } .mm-menu li.mm-nosubresults > a.mm-subopen + a, .mm-menu li.mm-nosubresults > a.mm-subopen + span { padding-right: 10px; } .mm-menu.mm-hassearch > .mm-panel { padding-top: 70px; } .mm-menu.mm-hassearch > .mm-panel > .mm-list:first-child { margin-top: -20px; } .mm-menu.mm-hasheader > .mm-panel > div.mm-search:first-child { margin-top: -10px; } .mm-menu.mm-hasheader > .mm-panel > div.mm-search:first-child + .mm-list { padding-top: 0; } .mm-menu .mm-search input { background: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6); } .mm-menu .mm-noresultsmsg { color: rgba(255, 255, 255, 0.3); } /* jQuery.mmenu toggles addon CSS */ input.mm-toggle, input.mm-check { position: absolute; left: -10000px; } label.mm-toggle, label.mm-check { margin: 0; position: absolute; bottom: 50%; z-index: 2; } label.mm-toggle:before, label.mm-check:before { content: ''; display: block; } label.mm-toggle { border-radius: 30px; width: 50px; height: 30px; margin-bottom: -15px; } label.mm-toggle:before { border-radius: 30px; width: 28px; height: 28px; margin: 1px; } input.mm-toggle:checked ~ label.mm-toggle:before { float: right; } label.mm-check { width: 30px; height: 30px; margin-bottom: -15px; } label.mm-check:before { border-left: 3px solid; border-bottom: 3px solid; width: 40%; height: 20%; margin: 25% 0 0 20%; opacity: 0.1; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } input.mm-check:checked ~ label.mm-check:before { opacity: 1; } .mm-menu.mm-vertical .mm-list > li label.mm-toggle, .mm-menu.mm-vertical .mm-list > li label.mm-check { bottom: auto; margin-bottom: 0; } .mm-menu.mm-vertical .mm-list > li label.mm-toggle { top: 5px; } .mm-menu.mm-vertical .mm-list > li label.mm-check { top: 5px; } label.mm-toggle, label.mm-check { right: 20px; } label.mm-toggle + a, label.mm-toggle + span { margin-right: 70px; } label.mm-check + a, label.mm-check + span { margin-right: 50px; } a.mm-subopen + label.mm-toggle, a.mm-subopen + label.mm-check { right: 50px; } a.mm-subopen + label.mm-toggle + a, a.mm-subopen + label.mm-toggle + span { margin-right: 100px; } a.mm-subopen + label.mm-check + a, a.mm-subopen + label.mm-check + span { margin-right: 80px; } em.mm-counter + a.mm-subopen + label.mm-toggle, em.mm-counter + a.mm-subopen + label.mm-check { right: 90px; } em.mm-counter + a.mm-subopen + label.mm-toggle + a, em.mm-counter + a.mm-subopen + label.mm-toggle + span { margin-right: 140px; } em.mm-counter + a.mm-subopen + label.mm-check + a, em.mm-counter + a.mm-subopen + label.mm-check + span { margin-right: 120px; } .mm-menu label.mm-toggle { background: rgba(0, 0, 0, 0.15); } .mm-menu label.mm-toggle:before { background: #333333; } .mm-menu input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963; } .mm-menu label.mm-check:before { border-color: rgba(255, 255, 255, 0.6); } /* jQuery.mmenu effects extension CSS */ html.mm-slide .mm-menu { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-slide.mm-opened .mm-menu { -webkit-transform: translateX(-30%); -moz-transform: translateX(-30%); -ms-transform: translateX(-30%); -o-transform: translateX(-30%); transform: translateX(-30%); } html.mm-slide.mm-opening .mm-menu { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } html.mm-slide.mm-right.mm-opened .mm-menu { -webkit-transform: translateX(30%); -moz-transform: translateX(30%); -ms-transform: translateX(30%); -o-transform: translateX(30%); transform: translateX(30%); } html.mm-slide.mm-right.mm-opening .mm-menu { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } html.mm-slide.mm-top.mm-opened .mm-menu { -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); -ms-transform: translateY(-30%); -o-transform: translateY(-30%); transform: translateY(-30%); } html.mm-slide.mm-top.mm-opening .mm-menu { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } html.mm-slide.mm-bottom.mm-opened .mm-menu { -webkit-transform: translateY(30%); -moz-transform: translateY(30%); -ms-transform: translateY(30%); -o-transform: translateY(30%); transform: translateY(30%); } html.mm-slide.mm-bottom.mm-opening .mm-menu { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } html.mm-zoom-menu .mm-menu { -webkit-transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; } html.mm-zoom-menu.mm-opened .mm-menu { -webkit-transform: scale(0.7, 0.7) translateX(-30%); -moz-transform: scale(0.7, 0.7) translateX(-30%); -ms-transform: scale(0.7, 0.7) translateX(-30%); -o-transform: scale(0.7, 0.7) translateX(-30%); transform: scale(0.7, 0.7) translateX(-30%); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } html.mm-zoom-menu.mm-opening .mm-menu { -webkit-transform: scale(1, 1) translateX(0%); -moz-transform: scale(1, 1) translateX(0%); -ms-transform: scale(1, 1) translateX(0%); -o-transform: scale(1, 1) translateX(0%); transform: scale(1, 1) translateX(0%); } html.mm-zoom-menu.mm-right.mm-opened .mm-menu { -webkit-transform: scale(0.7, 0.7) translateX(30%); -moz-transform: scale(0.7, 0.7) translateX(30%); -ms-transform: scale(0.7, 0.7) translateX(30%); -o-transform: scale(0.7, 0.7) translateX(30%); transform: scale(0.7, 0.7) translateX(30%); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } html.mm-zoom-menu.mm-right.mm-opening .mm-menu { -webkit-transform: scale(1, 1) translateX(0%); -moz-transform: scale(1, 1) translateX(0%); -ms-transform: scale(1, 1) translateX(0%); -o-transform: scale(1, 1) translateX(0%); transform: scale(1, 1) translateX(0%); } html.mm-zoom-menu.mm-top.mm-opened .mm-menu { -webkit-transform: scale(0.7, 0.7) translateY(-30%); -moz-transform: scale(0.7, 0.7) translateY(-30%); -ms-transform: scale(0.7, 0.7) translateY(-30%); -o-transform: scale(0.7, 0.7) translateY(-30%); transform: scale(0.7, 0.7) translateY(-30%); -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } html.mm-zoom-menu.mm-top.mm-opening .mm-menu { -webkit-transform: scale(1, 1) translateY(0%); -moz-transform: scale(1, 1) translateY(0%); -ms-transform: scale(1, 1) translateY(0%); -o-transform: scale(1, 1) translateY(0%); transform: scale(1, 1) translateY(0%); } html.mm-zoom-menu.mm-bottom.mm-opened .mm-menu { -webkit-transform: scale(0.7, 0.7) translateY(30%); -moz-transform: scale(0.7, 0.7) translateY(30%); -ms-transform: scale(0.7, 0.7) translateY(30%); -o-transform: scale(0.7, 0.7) translateY(30%); transform: scale(0.7, 0.7) translateY(30%); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } html.mm-zoom-menu.mm-bottom.mm-opening .mm-menu { -webkit-transform: scale(1, 1) translateY(0%); -moz-transform: scale(1, 1) translateY(0%); -ms-transform: scale(1, 1) translateY(0%); -o-transform: scale(1, 1) translateY(0%); transform: scale(1, 1) translateY(0%); } html.mm-zoom-panels .mm-menu.mm-horizontal > .mm-panel { -webkit-transform: scale(1.5, 1.5) translateX(100%); -moz-transform: scale(1.5, 1.5) translateX(100%); -ms-transform: scale(1.5, 1.5) translateX(100%); -o-transform: scale(1.5, 1.5) translateX(100%); transform: scale(1.5, 1.5) translateX(100%); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transition-property: -webkit-transform, left; transition-property: transform, left; } html.mm-zoom-panels .mm-menu.mm-horizontal > .mm-panel.mm-opened { -webkit-transform: scale(1, 1) translateX(0%); -moz-transform: scale(1, 1) translateX(0%); -ms-transform: scale(1, 1) translateX(0%); -o-transform: scale(1, 1) translateX(0%); transform: scale(1, 1) translateX(0%); } html.mm-zoom-panels .mm-menu.mm-horizontal > .mm-panel.mm-opened.mm-subopened { -webkit-transform: scale(0.7, 0.7) translateX(-30%); -moz-transform: scale(0.7, 0.7) translateX(-30%); -ms-transform: scale(0.7, 0.7) translateX(-30%); -o-transform: scale(0.7, 0.7) translateX(-30%); transform: scale(0.7, 0.7) translateX(-30%); } /* jQuery.mmenu fullscreen extension CSS */ .mm-menu.mm-fullscreen { width: 100%; min-width: 140px; max-width: 10000px; } html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } @media all and (max-width: 140px) { html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(140px, 0); -moz-transform: translate(140px, 0); -ms-transform: translate(140px, 0); -o-transform: translate(140px, 0); transform: translate(140px, 0); } } @media all and (min-width: 10000px) { html.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(10000px, 0); -moz-transform: translate(10000px, 0); -ms-transform: translate(10000px, 0); -o-transform: translate(10000px, 0); transform: translate(10000px, 0); } } html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } @media all and (max-width: 140px) { html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-140px, 0); -moz-transform: translate(-140px, 0); -ms-transform: translate(-140px, 0); -o-transform: translate(-140px, 0); transform: translate(-140px, 0); } } @media all and (min-width: 10000px) { html.mm-right.mm-opening.mm-fullscreen .mm-slideout { -webkit-transform: translate(-10000px, 0); -moz-transform: translate(-10000px, 0); -ms-transform: translate(-10000px, 0); -o-transform: translate(-10000px, 0); transform: translate(-10000px, 0); } } .mm-menu.mm-front.mm-fullscreen.mm-top, .mm-menu.mm-front.mm-fullscreen.mm-bottom { height: 100%; min-height: 140px; max-height: 10000px; } html.mm-opened.mm-fullscreen .mm-page { box-shadow: none !important; } /* jQuery.mmenu position extension CSS */ .mm-menu.mm-top, .mm-menu.mm-bottom { width: 100%; min-width: 100%; max-width: 100%; } .mm-menu.mm-right { left: auto; right: 0; } .mm-menu.mm-bottom { top: auto; bottom: 0; } html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-80%, 0); -moz-transform: translate(-80%, 0); -ms-transform: translate(-80%, 0); -o-transform: translate(-80%, 0); transform: translate(-80%, 0); } @media all and (max-width: 175px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-140px, 0); -moz-transform: translate(-140px, 0); -ms-transform: translate(-140px, 0); -o-transform: translate(-140px, 0); transform: translate(-140px, 0); } } @media all and (min-width: 550px) { html.mm-right.mm-opening .mm-slideout { -webkit-transform: translate(-440px, 0); -moz-transform: translate(-440px, 0); -ms-transform: translate(-440px, 0); -o-transform: translate(-440px, 0); transform: translate(-440px, 0); } } /* jQuery.mmenu z-position extension CSS */ html.mm-front .mm-slideout { -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; z-index: 0 !important; } .mm-menu.mm-front { z-index: 1; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } html.mm-opened.mm-next .mm-page { box-shadow: none; } .mm-menu.mm-front, .mm-menu.mm-next { -webkit-transition: -webkit-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); } .mm-menu.mm-front.mm-right, .mm-menu.mm-next.mm-right { -webkit-transform: translate(100%, 0); -moz-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); } .mm-menu.mm-front.mm-top { -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%); } .mm-menu.mm-front.mm-bottom { -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); } html.mm-opening .mm-menu.mm-front, html.mm-opening .mm-menu.mm-next { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .mm-menu.mm-front.mm-top, .mm-menu.mm-front.mm-bottom { height: 80%; min-height: 140px; max-height: 880px; } /* jQuery.mmenu themes extension CSS */ html.mm-opened.mm-light .mm-page { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .mm-menu.mm-light { background: #f3f3f3; color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-light .mm-list > li:after { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-light .mm-list > li > a.mm-subclose { background: rgba(255, 255, 255, 0.6); color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-light .mm-list > li > a.mm-subopen:after, .mm-menu.mm-light .mm-list > li > a.mm-subclose:before { border-color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-light .mm-list > li > a.mm-subopen:before { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-light .mm-list > li.mm-selected > a:not(.mm-subopen), .mm-menu.mm-light .mm-list > li.mm-selected > span { background: rgba(255, 255, 255, 0.6); } .mm-menu.mm-light .mm-list > li.mm-label { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-light.mm-vertical .mm-list li.mm-opened > a.mm-subopen, .mm-menu.mm-light.mm-vertical .mm-list li.mm-opened > ul { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-light .mm-buttonbar { border-color: rgba(0, 0, 0, 0.6); background: #f3f3f3; } .mm-menu.mm-light .mm-buttonbar > * { border-color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-light .mm-buttonbar > input:checked + label { background: rgba(0, 0, 0, 0.6); color: #f3f3f3; } .mm-menu.mm-light label.mm-check:before { border-color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-light em.mm-counter { color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-light .mm-footer { border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-light .mm-header { border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-light .mm-header .mm-prev:before, .mm-menu.mm-light .mm-header .mm-next:after, .mm-menu.mm-light .mm-header .mm-close:after { border-color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-light .mm-list li.mm-label > div > div { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-light .mm-search input { background: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-light .mm-noresultsmsg { color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-light label.mm-toggle { background: rgba(0, 0, 0, 0.1); } .mm-menu.mm-light label.mm-toggle:before { background: #f3f3f3; } .mm-menu.mm-light input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963; } html.mm-opened.mm-white .mm-page { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .mm-menu.mm-white { background: white; color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-white .mm-list > li:after { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-white .mm-list > li > a.mm-subclose { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-white .mm-list > li > a.mm-subopen:after, .mm-menu.mm-white .mm-list > li > a.mm-subclose:before { border-color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-white .mm-list > li > a.mm-subopen:before { border-color: rgba(0, 0, 0, 0.1); } .mm-menu.mm-white .mm-list > li.mm-selected > a:not(.mm-subopen), .mm-menu.mm-white .mm-list > li.mm-selected > span { background: rgba(0, 0, 0, 0.06); } .mm-menu.mm-white .mm-list > li.mm-label { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-white.mm-vertical .mm-list li.mm-opened > a.mm-subopen, .mm-menu.mm-white.mm-vertical .mm-list li.mm-opened > ul { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-white .mm-buttonbar { border-color: rgba(0, 0, 0, 0.6); background: white; } .mm-menu.mm-white .mm-buttonbar > * { border-color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-white .mm-buttonbar > input:checked + label { background: rgba(0, 0, 0, 0.6); color: white; } .mm-menu.mm-white label.mm-check:before { border-color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-white em.mm-counter { color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-white .mm-footer { border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-white .mm-header { border-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-white .mm-header .mm-prev:before, .mm-menu.mm-white .mm-header .mm-next:after, .mm-menu.mm-white .mm-header .mm-close:after { border-color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-white .mm-list li.mm-label > div > div { background: rgba(0, 0, 0, 0.03); } .mm-menu.mm-white .mm-search input { background: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); } .mm-menu.mm-white .mm-noresultsmsg { color: rgba(0, 0, 0, 0.3); } .mm-menu.mm-white label.mm-toggle { background: rgba(0, 0, 0, 0.1); } .mm-menu.mm-white label.mm-toggle:before { background: white; } .mm-menu.mm-white input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963; } html.mm-opened.mm-black .mm-page { box-shadow: none; } .mm-menu.mm-black { background: black; color: rgba(255, 255, 255, 0.6); } .mm-menu.mm-black .mm-list > li:after { border-color: rgba(255, 255, 255, 0.2); } .mm-menu.mm-black .mm-list > li > a.mm-subclose { background: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.3); } .mm-menu.mm-black .mm-list > li > a.mm-subopen:after, .mm-menu.mm-black .mm-list > li > a.mm-subclose:before { border-color: rgba(255, 255, 255, 0.3); } .mm-menu.mm-black .mm-list > li > a.mm-subopen:before { border-color: rgba(255, 255, 255, 0.2); } .mm-menu.mm-black .mm-list > li.mm-selected > a:not(.mm-subopen), .mm-menu.mm-black .mm-list > li.mm-selected > span { background: rgba(255, 255, 255, 0.25); } .mm-menu.mm-black .mm-list > li.mm-label { background: rgba(255, 255, 255, 0.15); } .mm-menu.mm-black.mm-vertical .mm-list li.mm-opened > a.mm-subopen, .mm-menu.mm-black.mm-vertical .mm-list li.mm-opened > ul { background: rgba(255, 255, 255, 0.15); } .mm-menu.mm-black .mm-buttonbar { border-color: rgba(255, 255, 255, 0.6); background: black; } .mm-menu.mm-black .mm-buttonbar > * { border-color: rgba(255, 255, 255, 0.6); } .mm-menu.mm-black .mm-buttonbar > input:checked + label { background: rgba(255, 255, 255, 0.6); color: black; } .mm-menu.mm-black label.mm-check:before { border-color: rgba(255, 255, 255, 0.6); } .mm-menu.mm-black em.mm-counter { color: rgba(255, 255, 255, 0.3); } .mm-menu.mm-black .mm-footer { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.3); } .mm-menu.mm-black .mm-header { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.3); } .mm-menu.mm-black .mm-header .mm-prev:before, .mm-menu.mm-black .mm-header .mm-next:after, .mm-menu.mm-black .mm-header .mm-close:after { border-color: rgba(255, 255, 255, 0.3); } .mm-menu.mm-black .mm-list li.mm-label > div > div { background: rgba(255, 255, 255, 0.15); } .mm-menu.mm-black .mm-search input { background: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.6); } .mm-menu.mm-black .mm-noresultsmsg { color: rgba(255, 255, 255, 0.3); } .mm-menu.mm-black label.mm-toggle { background: rgba(255, 255, 255, 0.2); } .mm-menu.mm-black label.mm-toggle:before { background: black; } .mm-menu.mm-black input.mm-toggle:checked ~ label.mm-toggle { background: #4bd963; } /* * jquery.selectBoxIt.css 3.8.0 * Author: @gregfranko */ /* Common CSS Properties --------------------- These properties will be applied to any themes that you use */ /* SelectBoxIt container */ .selectboxit-container { position: relative; display: inline-block; vertical-align: top; } /* Styles that apply to all SelectBoxIt elements */ .selectboxit-container * { font: 15px 'opensans' !important; /* Prevents text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; -o-user-select: none; user-select: none; outline: none; white-space: nowrap; } /* Button */ .selectboxit-container .selectboxit { width: 220px; /* Width of the dropdown button */ cursor: pointer; margin: 0; padding: 0; border-radius: 6px; overflow: hidden; display: block; position: relative; } /* Height and Vertical Alignment of Text */ .selectboxit-container span, .selectboxit-container .selectboxit-options a { height: 30px; /* Height of the drop down */ line-height: 30px; /* Vertically positions the drop down text */ display: block; } /* Focus pseudo selector */ .selectboxit-container .selectboxit:focus { outline: 0; } /* Disabled Mouse Interaction */ .selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled { opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; cursor: default; } /* Button Text */ .selectboxit-text { text-indent: 5px; overflow: hidden; text-overflow: ellipsis; float: left; } .selectboxit .selectboxit-option-icon-container { margin-left: 5px; } /* Options List */ .selectboxit-container .selectboxit-options { -moz-box-sizing: border-box; box-sizing: border-box; min-width: 100%; /* Minimum Width of the dropdown list box options */ *width: 100%; margin: 0; padding: 0; list-style: none; position: absolute; overflow-x: hidden; overflow-y: auto; cursor: pointer; display: none; z-index: 9999999999999; border-radius: 6px; text-align: left; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Individual options */ .selectboxit-option .selectboxit-option-anchor{ padding: 0 2px; } /* Individual Option Hover Action */ .selectboxit-option .selectboxit-option-anchor:hover { text-decoration: none; } /* Individual Option Optgroup Header */ .selectboxit-option, .selectboxit-optgroup-header { text-indent: 5px; /* Horizontal Positioning of the select box option text */ margin: 0; list-style-type: none; } /* The first Drop Down option */ .selectboxit-option-first { border-top-right-radius: 6px; border-top-left-radius: 6px; } /* The first Drop Down option optgroup */ .selectboxit-optgroup-header + .selectboxit-option-first { border-top-right-radius: 0px; border-top-left-radius: 0px; } /* The last Drop Down option */ .selectboxit-option-last { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } /* Drop Down optgroup headers */ .selectboxit-optgroup-header { font-weight: bold; } /* Drop Down optgroup header hover psuedo class */ .selectboxit-optgroup-header:hover { cursor: default; } /* Drop Down down arrow container */ .selectboxit-arrow-container { /* Positions the down arrow */ width: 30px; position: absolute; right: 0; } /* Drop Down down arrow */ .selectboxit .selectboxit-arrow-container .selectboxit-arrow { /* Horizontally centers the down arrow */ margin: 0 auto; position: absolute; top: 50%; right: 0; left: 0; } /* Drop Down down arrow for jQueryUI and jQuery Mobile */ .selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon { top: 30%; } /* Drop Down individual option icon positioning */ .selectboxit-option-icon-container { float: left; } .selectboxit-container .selectboxit-option-icon { margin: 0; padding: 0; vertical-align: middle; } /* Drop Down individual option icon positioning */ .selectboxit-option-icon-url { width: 18px; background-size: 18px 18px; background-repeat: no-repeat; height: 100%; background-position: center; float: left; } .selectboxit-rendering { display: inline-block !important; *display: inline !important; zoom: 1 !important; visibility: visible !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } /* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */ .jqueryui .ui-icon { background-color: inherit; } /* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */ .jqueryui .ui-icon-triangle-1-s { background-position: -64px -16px; } /**/ /*Default Theme*/ /*-------------*/ /*Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme*/ /**/ /*.selectboxit-btn {*/ /*background-color: #f5f5f5;*/ /*background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);*/ /*background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));*/ /*background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);*/ /*background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);*/ /*background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);*/ /*background-repeat: repeat-x;*/ /*border: 1px solid #cccccc;*/ /*border-color: #e6e6e6 #e6e6e6 #bfbfbf;*/ /*border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*/ /*border-bottom-color: #b3b3b3;*/ /*}*/ /*.selectboxit-btn.selectboxit-enabled:hover,*/ /*.selectboxit-btn.selectboxit-enabled:focus,*/ /*.selectboxit-btn.selectboxit-enabled:active {*/ /*color: #333333;*/ /*background-color: #e6e6e6;*/ /*}*/ /*.selectboxit-btn.selectboxit-enabled:hover,*/ /*.selectboxit-btn.selectboxit-enabled:focus {*/ /*color: #333333;*/ /*text-decoration: none;*/ /*background-position: 0 -15px;*/ /*}*/ /*.selectboxit-default-arrow {*/ /*width: 0;*/ /*height: 0;*/ /*border-top: 4px solid #000000;*/ /*border-right: 4px solid transparent;*/ /*border-left: 4px solid transparent;*/ /*}*/ /*.selectboxit-list {*/ /*background-color: #ffffff;*/ /*border: 1px solid #ccc;*/ /*border: 1px solid rgba(0, 0, 0, 0.2);*/ /*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/ /*-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/ /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/ /*}*/ /*.selectboxit-list .selectboxit-option-anchor {*/ /*color: #333333;*/ /*}*/ /*.selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor {*/ /*color: #ffffff;*/ /*background-color: #0081c2;*/ /*background-image: -moz-linear-gradient(top, #0088cc, #0077b3);*/ /*background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));*/ /*background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);*/ /*background-image: -o-linear-gradient(top, #0088cc, #0077b3);*/ /*background-image: linear-gradient(to bottom, #0088cc, #0077b3);*/ /*background-repeat: repeat-x;*/ /*}*/ /*.selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor {*/ /*color: #999999;*/ /*}*/ /*csslint important: false, adjoining-classes: false, known-properties: false, box-sizing: false, box-model: false, overqualified-elements: false, display-property-grouping: false, bulletproof-font-face: false, compatible-vendor-prefixes: false, regex-selectors: false, errors: true, duplicate-background-images: false, duplicate-properties: false, empty-rules: false, selector-max-approaching: false, gradients: false, fallback-colors: false, font-sizes: false, font-faces: false, floats: false, star-property-hack: false, outline-none: false, import: false, ids: false, underscore-property-hack: false, rules-count: false, qualified-headings: false, selector-max: false, shorthand: false, text-indent: false, unique-headings: false, universal-selector: false, unqualified-attributes: false, vendor-prefix: false, zero-units: false */ ol.checkout-agreements { margin-top: 10px; } .onestepcheckout-extraproducts { margin-top: 10px; margin-bottom: 10px; } .onestepcheckout-extraproducts span { font-weight: bold; } .onestepcheckout-extraproducts li { padding: 2px 0; } /* Button CSS */ .onestepcheckout-button, .onestepcheckout-button:visited { background: #222 url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/button-background.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border: none; border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; } .onestepcheckout-button:hover { background-color: #111; color: #fff; } .onestepcheckout-button:active { top: 1px; } .small.onestepcheckout-button, .small.onestepcheckout-button:visited { font-size: 11px; } .onestepcheckout-button, .onestepcheckout-button:visited, .medium.onestepcheckout-button, .medium.onestepcheckout-button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .large.onestepcheckout-button, .large.onestepcheckout-button:visited { font-size: 16px; padding: 8px 30px 9px; } .green.onestepcheckout-button, .green.onestepcheckout-button:visited { background-color: #91bd09; } .green.onestepcheckout-button:hover { background-color: #749a02; } .blue.onestepcheckout-button, .blue.onestepcheckout-button:visited { background-color: #2daebf; } .blue.onestepcheckout-button:hover { background-color: #007d9a; } .red.onestepcheckout-button, .red.onestepcheckout-button:visited { background-color: #e33100; } .red.onestepcheckout-button:hover { background-color: #872300; } .magenta.onestepcheckout-button, .magenta.onestepcheckout-button:visited { background-color: #a9014b; } .magenta.onestepcheckout-button:hover { background-color: #630030; } .orange.onestepcheckout-button, .orange.onestepcheckout-button:visited { background-color: #ff5c00; } .orange.onestepcheckout-button:hover { background-color: #d45500; } .yellow.onestepcheckout-button, .yellow.onestepcheckout-button:visited { background-color: #ffb515; } .yellow.onestepcheckout-button:hover { background-color: #fc9200; } .grey.onestepcheckout-button, .grey.onestepcheckout-button:visited { background-color: #cccccc; } .grey.onestepcheckout-button:hover { background-color: #cccccc; } .onestepcheckout-place-order-loading { text-align: right; margin-top: 10px; font-style: italic; } select.address-select { margin-top: 3px; margin-bottom: 3px; width: 95% !important; } .onestepcheckout-enterprise { } .onestepcheckout-enterprise span.validation-error,.onestepcheckout-enterprise div.validation-error { padding-right: 0; } ul.onestepcheckout-custom-options { margin: 0; padding: 0; margin-left: 20px; list-style-type: disc; } .onestepcheckout-coupons input#id_couponcode { margin-bottom: 5px; width: 200px; } .onestepcheckout-giftcards input#id_giftcardcode { margin-bottom: 5px; width: 200px; } #onestepcheckout-form label { font-weight: normal !important; } .onestepcheckout-summary,.onestepcheckout-totals { border-collapse: collapse; } .onestepcheckout-totals { } .onestepcheckout-summary th,.onestepcheckout-summary,.onestepcheckout-summary td,.onestepcheckout-totals td { padding: 3px 0; } .onestepcheckout-summary th { border-bottom: 1px solid #BEBCB7; border-top: 1px solid #BEBCB7; } .onestepcheckout-totals td,.onestepcheckout-summary td { border-bottom: 1px solid #BEBCB7; } h1.onestepcheckout-title { font-size: 20px; text-transform: uppercase; } p.onestepcheckout-description { font-size: 18px; } #onestepcheckout-form .group-select { padding: 20px !important; } div.onestepcheckout-threecolumns { margin-top: 10px; } div.onestepcheckout-threecolumns h1 { font-family: Arial; font-size: 18px; font-weight: bold; } div.onestepcheckout-threecolumns div.onestepcheckout-column-left { width: 33%; float: left; margin-right: 15px; background: transparent url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/line-gradient.gif) no-repeat scroll right top; padding-top: 15px; } div.onestepcheckout-threecolumns div.onestepcheckout-column-middle { width: 29%; float: left; margin-right: 15px; padding-right: 15px; background: transparent url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/line-gradient.gif) no-repeat scroll right top; padding-top: 15px; } div.onestepcheckout-threecolumns div.onestepcheckout-column-right { width: 32%; float: left; padding-top: 15px; } p.onestepcheckout-login-link { padding-top: 5px; } #onestepcheckout-email-error { width: 245px; clear: both; padding-top: 3px; } div.onestepcheckout-error { background-color: #FAEBE7; color: #DF280A; border: 1px solid #DF280A; margin-top: 5px; margin-bottom: 5px; text-align: left; padding-top: 3px; padding-bottom: 3px; padding-left: 25px; background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/onestepcheckout-error.jpg); background-repeat: no-repeat; background-position: 5px 5px; } .onestepcheckout-column-left .onestepcheckout-error { width: 85% !important; } div.onestepcheckout-enable-newsletter { margin-bottom: 10px; /*text-align: right;*/ } div.onestepcheckout-enable-newsletter-bottom { margin-top: 20px; text-align: right; } div.onestepcheckout-enable-terms { /*text-align: right;*/ margin-top: 10px; } table.onestepcheckout-summary { width: 100%; } table.onestepcheckout-summary td.name { width: 55%; } table.onestepcheckout-summary td.qty,table.onestepcheckout-summary th.qty { width: 10%; text-align: center; } table.onestepcheckout-summary td.total,table.onestepcheckout-summary th.total { width: 35%; text-align: right; } table.onestepcheckout-totals { width: 100%; margin-bottom: 20px; } table.onestepcheckout-totals tr.grand-total td { font-weight: bold; } table.onestepcheckout-totals td.title { width: 65%; text-align: right; } table.onestepcheckout-totals td.value { width: 35%; text-align: right; } div.onestepcheckout-place-order-wrapper { text-align: right; margin-top: 20px; } div.checkoutcontainer { border-top: 1px solid #D8D2C7; min-height: 33em; overflow: hidden; } div.checkoutcontainer .checkout-error-message { font-size: 14px; margin-left: 10px; color: red; } div.checkoutcontainer .payment-methods .form-list label { text-align: left !important; } div.checkoutcontainer div.input-error label { color: red !important; } div.checkoutcontainer div.input-error input,div.checkoutcontainer div.input-error select { border: 1px solid red !important; } div.checkoutcontainer div.input-different-shipping { margin-top: 10px; } div.checkoutcontainer div.input-address-short,div.checkoutcontainer div.input-firstname,div.checkoutcontainer div.input-lastname,div.checkoutcontainer div.input-email,div.checkoutcontainer div.input-telephone,div.checkoutcontainer div.input-company,div.checkoutcontainer div.input-fax,div.checkoutcontainer div.input-password { width: 49%; float: left; } div.checkoutcontainer li.taxvat .input-text { width: 83% !important; } div.checkoutcontainer div.input-address-short .input-text, div.checkoutcontainer div.input-firstname .input-text,div.checkoutcontainer div.input-lastname .input-text,div.checkoutcontainer div.input-email .input-text,div.checkoutcontainer div.input-telephone .input-text,div.checkoutcontainer div.input-company .input-text,div.checkoutcontainer div.input-fax .input-text,div.checkoutcontainer div.input-password .input-text { width: 70%; } div.checkoutcontainer div.input-address,div.checkoutcontainer div.input-city,div.checkoutcontainer li.taxvat div.input-box { width: 100% !important; } div.checkoutcontainer div.input-address .input-text,div.checkoutcontainer div.input-city .input-text { width: 83%; } div.checkoutcontainer div.input-postcode { width: 39%; float: left; } div.checkoutcontainer div.input-postcode .input-text { width: 70%; } div.checkoutcontainer div.input-region { width: 60%; float: left; } div.checkoutcontainer div.input-region .input-text { width: 77%; } div.checkoutcontainer div.input-country { width: 100%; } div.checkoutcontainer div.input-country select { width: 85%; } div.checkoutcontainer div.input-region select { width: 77% !important; } fieldset.group-select { padding: 10px 10px; } .group-select li { padding: 4px 0; } .shipment-methods dd { font-weight: bold; margin: 0 !important; margin-bottom: 3px; margin-top: 7px; } p.checkout-choose-payment-method,p.checkout-choose-shipping-method { margin-top: 1em; font-size: 14px; font-weight: bold; margin-bottom: 5px; } p.checkout-choose-payment-method { margin-top: 2em !important; } .payment-methods dd { padding: 0; padding-left: 20px; } .payment-methods dd li { padding: 0; } div.onestepcheckout-shipping-method { margin-bottom: 20px; } p.onestepcheckout-numbers { background-repeat: no-repeat; height: 35px; color: #404040; text-transform: uppercase; padding-top: 6px; padding-left: 38px; font-size: 15px; font-weight: bold; } p.onestepcheckout-numbers-1 { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/onestepcheckout-numbers-1.png); } p.onestepcheckout-numbers-2 { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/onestepcheckout-numbers-2.png); } p.onestepcheckout-numbers-3 { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/onestepcheckout-numbers-3.png); } p.onestepcheckout-numbers-4 { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/onestepcheckout-numbers-4.png); } div.onestepcheckout-skin-magento .onestepcheckout-numbers { padding-top: 0px !important; padding-left: 28px !important; height: 25px !important; text-transform: capitalize !important; color: #F18200 !important; font-size: 13px !important; } div.onestepcheckout-skin-magento p.onestepcheckout-numbers-1 { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/skin-magento/onestepcheckout-numbers-1.png) !important; } div.onestepcheckout-skin-magento p.onestepcheckout-numbers-2 { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/skin-magento/onestepcheckout-numbers-2.png) !important; } div.onestepcheckout-skin-magento p.onestepcheckout-numbers-3 { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/skin-magento/onestepcheckout-numbers-3.png) !important; } div.onestepcheckout-skin-magento p.onestepcheckout-numbers-4 { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/skin-magento/onestepcheckout-numbers-4.png) !important; } /* Popup CSS */ #onestepcheckout_popup_overlay_iframe { z-index: 100000; background-color: black; opacity: 0.8; filter: alpha(opacity = 80); position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; } #onestepcheckout_popup_overlay { z-index: 1000000; background-color: black; opacity: 0.8; filter: alpha(opacity = 80); position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; cursor: pointer; } #onestepcheckout-toc-popup { width: 482px; height: 530px; position: absolute; z-index: 1000001; } #onestepcheckout-toc-popup .onestepcheckout-popup-wrapper { height: 515px !important; } #onestepcheckout-toc-popup div.onestepcheckout-popup-contents { overflow: auto; height: 450px; } #onestepcheckout-toc-popup h1 { margin-left: 20px; } #onestepcheckout-toc-popup .onestepcheckout-toc-terms { margin: 20px; margin-top: 0 !important; height: 440px !important; overflow: auto; padding-right: 10px; } #onestepcheckout-login-popup,#onestepcheckout-toc-popup { text-align: left !important; } .onestepcheckout-popup-footer { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/onestepcheckout-popup-footer.png); background-repeat: no-repeat; height: 13px; } .onestepcheckout-popup-wrapper { background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/onestepcheckout-popup-header.png); *background-image: url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/onestepcheckout-popup-header.png) !important; background-repeat: no-repeat; } .onestepcheckout-popup-wrapper h1 { font-size: 18px !important; padding-bottom: 10px !important; padding-top: 15px !important; } .onestepcheckout-popup-contents { margin-left: 20px; margin-right: 20px; margin-bottom: 0; padding-bottom: 1px; } .onestepcheckout-popup-wrapper label { font-weight: normal; } .onestepcheckout-popup-wrapper .input-text { width: 190px !important; } #onestepcheckout-forgot-table td { vertical-align: middle !important; } /* Popup CSS (login link) */ #onestepcheckout-login-popup { width: 482px; position: absolute; z-index: 1000001; /*position: fixed;*/ } #onestepcheckout-login-popup table { width: 99%; } #onestepcheckout-login-popup table td { padding-top: 3px; padding-bottom: 3px; } #onestepcheckout-login-popup button { padding: 3px 10px; } #onestepcheckout-login-popup div.onestepcheckout-popup-contents { } #onestepcheckout-login-popup p.close,#onestepcheckout-toc-popup p.close { font-size: 15px; text-transform: uppercase; font-weight: bold; position: absolute; right: 10px; bottom: -5px; } #onestepcheckout-login-popup p.close a,#onestepcheckout-login-popup p.close a:link,#onestepcheckout-login-popup p.close a:visited,#onestepcheckout-toc-popup p.close a,#onestepcheckout-toc-popup p.close a:link,#onestepcheckout-toc-popup p.close a:visited { text-decoration: none; color: black; } #onestepcheckout-login-popup p.close a:hover,#onestepcheckout-toc-popup p.close a:hover { text-decoration: underline; } #onestepcheckout-login-error,#onestepcheckout-forgot-error { color: red; margin-bottom: 10px; } div.onestepcheckout-comments { margin-top: 5px; margin-bottom: 20px; } div.onestepcheckout-comments textarea { margin-top: 5px; width: 95%; } /* onestepcheckout-twocolumns */ .onestepcheckout-two-columns .onestepcheckout-column-left { width: 47%; float: left; margin-right: 30px; background: transparent url(https://www.planet-cards.com/skin/frontend/base/market/images/onestepcheckout/line-gradient.gif) no-repeat scroll right top; } .onestepcheckout-two-columns .onestepcheckout-column-right { width: 43%; float: left; } .onestepcheckout-two-columns p.onestepcheckout-numbers { margin-top: 20px !important; } .onestepcheckout-two-columns div.onestepcheckout-enable-terms { text-align: center !important; } .onestepcheckout-two-columns div.onestepcheckout-place-order-wrapper { text-align: center !important; margin-top: 10px !important; } .onestepcheckout-two-columns div.onestepcheckout-enable-newsletter { text-align: center !important; } .checkoutcontainer .payment-methods .input-box { width: 100% !important; } .checkoutcontainer .payment-methods .input-box .input-text,.checkoutcontainer .payment-methods .input-box textarea,.checkoutcontainer .payment-methods .input-box select { width: 95% !important; } .checkoutcontainer .payment-methods .input-box select.year,.checkoutcontainer .payment-methods .input-box select#protxDirect_expiration_yr,.checkoutcontainer .payment-methods .input-box select#protxDirect_start_yr { width: 75px !important; } .checkoutcontainer .payment-methods .input-box select.month,.checkoutcontainer .payment-methods .input-box select#protxDirect_start,.checkoutcontainer .payment-methods .input-box select#protxDirect_expiration { width: 140px !important; } .checkoutcontainer li.shipping-address-title { font-family: Arial; font-size: 16px; text-transform: uppercase; color: #404040; font-weight: bold; padding-top: 5px; } .onestepcheckout-giftmessagecontainer { margin-bottom: 10px; } .onestepcheckout-giftmessagecontainer .input-checkbox { /*text-align: right;*/ } #onestepcheckout-giftmessages .onestepcheckout-giftmessages fieldset.group-select { padding: 0 !important; border: 0 !important; margin: 0 !important; } .onestepcheckout-giftmessages .group-select li .input-box-last { margin-right: 0 !important; } .onestepcheckout-giftmessages .group-select li .input-box { width: 125px; margin-right: 20px; } .onestepcheckout-giftmessages .group-select li .input-box .input-text { width: 120px; } .onestepcheckout-giftmessages .group-select li textarea { width: 267px; } .onestepcheckout-address-line { margin-bottom: 10px; } .onestepcheckout-column-left .customer-dob .dob-month,.onestepcheckout-column-left .customer-dob .dob-day,.onestepcheckout-column-left .customer-dob .dob-year { float: left; } .onestepcheckout-column-left .customer-dob input.input-text { display: block; width: 74px; } .onestepcheckout-column-left .customer-dob label { font-size: 10px; font-weight: normal; color: #888; } .onestepcheckout-column-left .customer-dob .dob-day,.onestepcheckout-column-left .customer-dob .dob-month { width: 60px; } .onestepcheckout-column-left .customer-dob .dob-day input.input-text,.onestepcheckout-column-left .customer-dob .dob-month input.input-text { width: 46px; } .onestepcheckout-column-left .customer-dob .dob-year { width: 110px; } .onestepcheckout-column-left .customer-dob .dob-year input.input-text { width: 115px; } .onestepcheckout-feedback, .onestepcheckout-feedback-freetext { padding-top: 10px; } .onestepcheckout-feedback select { width:95%; } .onestepcheckout-feedback-freetext textarea{ width:95%; } .onestepcheckout-coupon-code-notice { } #control_overlay { background-color:#000; } .modal { background-color:#fff; padding:10px; border:1px solid #333; } #addressreview { width: 750px; min-height: 430px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #E9EAEE; border: 2px solid white; padding: 15px 40px 20px 40px; margin: 0 auto; text-align: left; box-shadow: 1px 2px 6px rgba(0,0,0, 0.5); -moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5); -webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5); position:relative; } #addressreview .leftcol{ float: left; width: 200px; } #addressreview .rightcol{ float: left; width: 540px; } #addressreview h4 { padding-top: 15px; padding-bottom: 3px; font-size: 16px; } #addressreview #buttons { position: absolute; right: 40px; bottom: 20px; } #addressreview #buttons div { float: left; zoom: 1; margin: 0px 10px 0px 10px; } .checkout-agreements li { margin: 0; } .checkout-agreements .agree { margin: 0; padding: 0; } .agreement-content { overflow: auto; text-align:left; } /* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */ .tooltipster-default { border-radius: 5px; border: 2px solid #000; background: #4c4c4c; color: #fff; } /* Use this next selector to style things like font-size and line-height: */ .tooltipster-default .tooltipster-content { font-family: Arial, sans-serif; font-size: 14px; line-height: 16px; padding: 8px 10px; overflow: hidden; } /* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */ .tooltipster-default .tooltipster-arrow .tooltipster-arrow-border { /* border-color: ... !important; */ } /* If you're using the icon option, use this next selector to style them */ .tooltipster-icon { cursor: help; margin-left: 4px; } /* This is the base styling required to make all Tooltipsters work */ .tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; z-index: 9999999; pointer-events: none; width: auto; overflow: visible; } .tooltipster-base .tooltipster-content { overflow: hidden; } /* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */ .tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .tooltipster-arrow span, .tooltipster-arrow-border { display: block; width: 0; height: 0; position: absolute; } .tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-top: 8px solid; bottom: -7px; } .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid; bottom: -7px; } .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 8px solid; top: -7px; } .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-bottom: 9px solid; top: -7px; } .tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { left: 0; right: 0; margin: 0 auto; } .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { left: 6px; } .tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { left: 5px; } .tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { right: 6px; } .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { right: 5px; } .tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -7px; right: -7px; } .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 9px solid; margin-top: -8px; } .tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-right: 8px solid; top: 50%; margin-top: -7px; left: -7px; } .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-right: 9px solid; margin-top: -8px; } /* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */ .tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } .tooltipster-fade-show { opacity: 1; } .tooltipster-grow { -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -o-transform: scale(0,0); -ms-transform: scale(0,0); transform: scale(0,0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-backface-visibility: hidden; } .tooltipster-grow-show { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-swing { opacity: 0; -webkit-transform: rotateZ(4deg); -moz-transform: rotateZ(4deg); -o-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; } .tooltipster-swing-show { opacity: 1; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1); -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); } .tooltipster-fall { top: 0; -webkit-transition-property: top; -moz-transition-property: top; -o-transition-property: top; -ms-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-fall-show { } .tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; top: 0px !important; opacity: 0; } .tooltipster-slide { left: -40px; -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; -ms-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); } .tooltipster-slide.tooltipster-slide-show { } .tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; left: 0px !important; opacity: 0; } /* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */ .tooltipster-content-changing { opacity: 0.5; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } /* Bannière top *************************/ #home-nextgen .top-ban > div { padding: 0; } #home-nextgen .top-ban .zone-left > div { text-align: center; position: relative; } #home-nextgen .mea-categories .inner-content, #home-nextgen .univers-ppfr .inner-txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); /* IE 9 */ -webkit-transform: translate(-50%,-50%); /* Safari */ } #home-nextgen .ban-visuel { display: inline-block; width: 100%; } #home-nextgen .top-ban .zone-left > div .inner, #home-nextgen .ban-visuel .txt { width: 90%; line-height: normal; vertical-align: middle; display: inline-block; } #home-nextgen .ban-visuel { text-align: center; position: relative; color: #616161; } #home-nextgen .ban-visuel .txt .title { font: 20px "novecento-widebold"; } #home-nextgen .ban-visuel .txt .accroche { font: 35px "open_sanslight"; padding-top: 10px; padding-bottom: 25px; } #home-nextgen .zone-left .reass-ban-top { font: 14px "open_sanssemibold"; color: white; display: inline-block; margin: 0 15px; padding: 10px 0; } #home-nextgen .zone-left .reass-ban-top.env:before, #home-nextgen .zone-left .reass-ban-top.fab:before, #home-nextgen .zone-left .reass-ban-top.liv:before { content: ""; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-h1-home-white.png") no-repeat top left; display: inline-block; vertical-align: middle; width: 21px; height: 15px; margin-right: 8px; margin-top: -2px; } #home-nextgen .zone-left .reass-ban-top.liv.main:before { display: none; } #home-nextgen .zone-left .reass-ban-top.liv.main { font-size: 19px; color:#fed015; } #home-nextgen .zone-left .reass-ban-top.fab:before { background-position: left -15px; height: 21px; } #home-nextgen .zone-left .reass-ban-top.liv:before { background-position: bottom left; height: 20px; width: 32px; } #home-nextgen .zone-left .ban-txt-bottom { color: #5d5e60; } #home-nextgen .zone-left .ban-txt-bottom .promo { font: 38px "novecento-widebold"; } #home-nextgen .zone-left .ban-txt-bottom .sstitre-promo { font: 18px "open_sanssemibold"; } #home-nextgen .zone-left .ban-txt-bottom .promo-code { font:15px "novecento-demibold"; color: #818181; display: inline-block; border: 2px solid #d7d8da; border-radius: 50px; padding: 10px 40px; margin-top: 20px; } #home-nextgen .zone-left .ban-txt-bottom .promo-code strong { font-weight: normal; font-family: "Novecento-widebold"; } #home-nextgen .top-ban .under-slide { margin-top: 65px; } #home-nextgen .top-ban .gray-text { color: #606060; } /* Mise en avant des catégories *************************/ #home-nextgen .univers-ppfr h2, #home-nextgen .mea-pre-footer h2, #home-nextgen .big-mea h2 { padding-bottom: 50px; font: 25px "Novecento-demibold"; color: #ffffff; } #home-nextgen .mea-categories { clear: both; text-align: center; padding-top: 45px; } #home-nextgen .mea-categories.h1-under-slide { padding-top: 0; } #home-nextgen .mea-categories .listing-mea > div { padding: 15px; height: 292px; } #home-nextgen .mea-categories .listing-mea .inner { background-color: lightgray; height: 100%; border-radius: 3px; border: 1px solid #eaebed; } #home-nextgen .mea-categories .listing-mea.right .big-mea-container { height: 415px; } #home-nextgen .mea-categories .listing-mea.right .big-mea-container .inner { height: 385px; } #home-nextgen .height-auto { height: auto !important; } #home-nextgen .mea-categories .txt-seo .inner { width: 90%; display: inline-block; text-align: left; } #home-nextgen .mea-categories .txt-seo p { text-align: left; font: 14px "OPEN_SANSLIGHT"; color: #616161; line-height: 23px; } #home-nextgen .mea-categories .txt-seo strong { font-family: open_sanssemibold; } #home-nextgen .mea-categories .inner-content .title { font: 28px "opensans-bold"; text-transform: none; } #home-nextgen .mea-categories .encart-4 { color: #ffffff; text-align: left; font: 14px "opensans-bold"; text-transform: uppercase; } #home-nextgen .mea-categories .encart-4 .inner-content { color: #ffffff; } #home-nextgen .mea-categories .encart-4 .inner-content, #home-nextgen .mea-categories .encart-rond .inner-content { width: 80%; } #home-nextgen .mea-categories .encart-4 .inner-content .title { line-height: 30px; margin-bottom: 30px; margin-top: 10px; } #home-nextgen .mea-categories .encart-4 ol { line-height: 27px; } #home-nextgen .mea-categories .encart-rond { border-radius: 150px !important; border: none !important; } #home-nextgen .mea-categories .encart-rond .title { line-height: 33px; } #home-nextgen .mea-categories .big-mea h2 { color: #616161; padding: 30px 0 15px; } #home-nextgen .mea-categories .big-mea { width: 92%; color: #616161; } #home-nextgen .mea-categories .big-mea h2, #home-nextgen .mea-categories .big-mea p, #home-nextgen .mea-categories .big-mea span { text-align: left; display: block; } #home-nextgen .mea-categories .big-mea p { font: 19px "open_sanslight"; } #home-nextgen .mea-categories .big-mea span { font: 16px "open_sanssemibold"; margin-top: 5px; } #home-nextgen .mea-categories .inner { position: relative; -webkit-background-size: cover !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: top center !important; -webkit-transition: margin-top 0.3s ease-in-out; -moz-transition: margin-top 0.3s ease-in-out; -o-transition: margin-top 0.3s ease-in-out; } #home-nextgen .mea-categories .inner-content.link { font: 14px "opensans-bold"; text-transform: uppercase; color: #616161; top: inherit; bottom: 20px; width: 100%; } #home-nextgen .mea-categories .overlay, #home-nextgen .mea-categories .overlay-txt { position: absolute; bottom: 0; left: 0; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } #home-nextgen .mea-categories .overlay { height: 100%; width: 100%; background:#7db161; z-index: 0; border-radius: 3px; } #home-nextgen .mea-categories a:hover .overlay { opacity: 0.95 !important; } #home-nextgen .mea-categories .overlay-txt { font: 25px "opensans-bold"; color: #ffffff; text-align: left; left: 15px; bottom: 15px; } #home-nextgen .mea-categories .overlay-txt:after { content: ""; background: url("https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/picto-arrow-mea-cat.png") no-repeat bottom right; width: 27px; height: 18px; display: inline-block; margin-left: 5px; } #home-nextgen .mea-categories a:hover .overlay-txt { opacity: 1 !important; z-index: 10; } #home-nextgen .mea-categories a:hover .link { display: none; } /* effet survol */ #home-nextgen .mea-categories .listing-mea a .inner:hover { /*box-shadow: 0 19px 38px rgba(0,0,0,0.12), 0 15px 12px rgba(0,0,0,0.12);*/ box-shadow: 0 14px 28px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.12); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border: none; margin-top: -5px; } /* Univers PPFR *************************/ #home-nextgen .univers-ppfr { padding: 80px 0; text-align: center; } #home-nextgen .univers-ppfr .bloc .inner { height:450px; background-color: #ffffff; } #home-nextgen .univers-ppfr .left-top, #home-nextgen .univers-ppfr .left-bottom { font: 18px "open_sanssemibold_italic"; line-height: 33px; height: 50%; position: relative; } #home-nextgen .univers-ppfr .left-top a { color: white; text-decoration: underline; } #home-nextgen .univers-ppfr .inner-txt { width: 75%; } #home-nextgen .univers-ppfr .inner-txt .title, #home-nextgen .univers-ppfr .right .title { display: block; font: 20px 'opensans-bold'; text-transform: uppercase; } #home-nextgen .univers-ppfr .right { color: #616161; font: 18px 'opensans-bold'; padding-left: 50px; } #home-nextgen .univers-ppfr .left { padding-right: 50px; } #home-nextgen .univers-ppfr .right .title { display: block; padding-top: 40px; } #home-nextgen .univers-ppfr .right del { font : 14px 'open_sanssemibold'; } #home-nextgen .univers-ppfr .right .price { padding: 0 5px; } #home-nextgen .univers-ppfr .right del, #home-nextgen .univers-ppfr .right .price, #home-nextgen .univers-ppfr .right .promo { vertical-align: middle; display: inline-block; } #home-nextgen .univers-ppfr .right .price, #home-nextgen .univers-ppfr .right .promo { font-size: 22px; } #home-nextgen .univers-ppfr .right .promo { color: #e26b82; } #home-nextgen .univers-ppfr .right .bouton-flat { margin-top: 15px; } #home-nextgen .univers-ppfr .sep-planet { position: absolute; bottom: -34px; margin-left: -28px; background-color: white; border-radius: 100px; height: 60px; width: 62px; line-height: 56px; } #home-nextgen .univers-ppfr .sep-planet img { margin-right: -1px; } #home-nextgen .promo-event { border: 2px solid; height: 100%; } #home-nextgen .univers-ppfr .right .promo-event img, #home-nextgen .univers-ppfr .right .promo-event .promo { display: block; margin: 0 auto; } #home-nextgen .univers-ppfr .right .promo-event .promo { font: 100px 'open_sanssemibold'; color: #94d2c5; } #home-nextgen .univers-ppfr .right .promo-event { font: 16px 'open_sanssemibold'; } /* Pourquoi choisir Planet Cards *************************/ #home-nextgen .why { background-color: #ffffff; border-bottom: 1px solid #dcdbdb; } #home-nextgen .why .reasscat { border: none; } .reasscat-sprite { background-image: url('https://www.planet-cards.com/skin/frontend/planetbootstrap/default/images/flat-design/cat-nextgen/reasscat-sprite.png'); background-repeat: no-repeat; display: block; } .reasscat-sprite-delais { width: 33px; height: 33px; background-position: -10px -10px; } .reasscat-sprite-livraison { width: 55px; height: 34px; background-position: -10px -63px; } .reasscat-sprite-qualite { width: 36px; height: 38px; background-position: -10px -117px; } .reasscat-sprite-tarif { width: 33px; height: 34px; background-position: -10px -175px; } /* Mise en avant pre footer ***/ #home-nextgen .mea-pre-footer { background-color: #fbfbfb; display: inline-block; clear: both; width: 100%; } #home-nextgen .mea-pre-footer h2 { color: #616161; text-align: center; padding-top: 60px; padding-bottom: 60px; } #home-nextgen .mea-pre-footer .img { margin-bottom: 65px; } #home-nextgen .mea-pre-footer .txt { padding: 30px 80px 0 50px; } #home-nextgen .mea-pre-footer .txt p { font: 14px "opensans"; color: #616161; } #home-nextgen .mea-pre-footer .txt h3 { font: 14px "opensans-bold"; margin: 3px 0; color: #616161; } #home-nextgen .mea-pre-footer .txt p { margin-bottom: 40px; } /** Responsive **/ /* Tablette horizontale */ @media (min-width: 990px) and (max-width: 1200px) { #home-nextgen .mea-categories { width: 990px; } #home-nextgen .mea-categories .listing-mea > div { height: 250px; } #home-nextgen .mea-categories .inner-content.link { bottom: 5px; } #home-nextgen .univers-ppfr { margin-top: 35px; } #home-nextgen .mea-pre-footer .txt { padding: 30px 0; margin-left: 80px; } #home-nextgen .zone-left .reass-ban-top.fab::before { margin-left: 0; } } /* Tablette */ @media (max-width: 991px) { #home-nextgen .top-ban .zone-left > div { min-height: 265px; } #home-nextgen .top-ban .zone-left > div { line-height: 265px; } #home-nextgen .top-ban .zone-left > div .inner { width: 100%; } #home-nextgen .zone-left .reass-ban-top.fab { padding-top: 16px; } #home-nextgen .zone-left .reass-ban-top.fab::before { margin-left: 0; } #home-nextgen .mea-categories .listing-mea > div { height: 315px; width: 315px; display: inline-block; float: none; } #home-nextgen .mea-categories .listing-mea > div.col-sm-12 { width: 635px; max-width: 100%; } #home-nextgen .mea-categories { padding: 45px 70px 0; text-align: center; } #home-nextgen .mea-categories .txt-seo .inner { width: 100%; } #home-nextgen .univers-ppfr { margin-top: 40px; padding-top: 55px; } #home-nextgen .univers-ppfr h2 { width: 70%; margin: 0 auto; } #home-nextgen .univers-ppfr .container { padding: 0; } #home-nextgen .univers-ppfr .bloc.left, #home-nextgen .univers-ppfr .bloc.right { vertical-align: top; } #home-nextgen .mea-pre-footer h2 { padding-top: 50px; padding-bottom: 20px; } #home-nextgen .univers-ppfr .right { padding-left: 15px; } #home-nextgen .univers-ppfr .left { padding-right: 15px; } } /* Tél */ @media (max-width: 767px) { #home-nextgen .mea-categories { padding: 25px; } #home-nextgen .mea-categories .listing-mea > div { height: 290px; width: 265px; display: inline-block; padding:7px 0; } #home-nextgen .mea-categories .listing-mea > div.col-sm-12 { max-width: 265px; height: auto !important; } #home-nextgen .mea-categories .listing-mea.right .big-mea-container .inner { height: auto; } #home-nextgen .mea-categories .big-mea h2 { font-size: 20px; padding: 10px 0; } #home-nextgen .mea-categories .big-mea p { font-size: 15px; } #home-nextgen .mea-categories .big-mea span { font-size: 14px; } #home-nextgen .mea-categories .big-mea { width: 100%; padding: 20px; } #home-nextgen .mea-categories .listing-mea.right > div:first-child > div, #home-nextgen .top-ban .zone-left > div, #home-nextgen .ban-visuel { height: auto; min-height: inherit; line-height: inherit; } #home-nextgen .mea-categories .listing-mea.right .inner-content.big-mea, #home-nextgen .ban-visuel .txt, #home-nextgen .top-ban .zone-left > div .inner { position: relative; top: inherit; left: inherit; transform: none; display: inline-block; -ms-transform: none; /* IE 9 */ -webkit-transform: none; /* Safari */ } #home-nextgen .univers-ppfr { margin-top: 0; padding: 20px 0; } #home-nextgen .mea-categories { padding-bottom: 10px; } #home-nextgen .ban-visuel { min-height: inherit; padding: 50px 0 40px; } #home-nextgen .ban-visuel .txt .title { width: 80%; display: inline-block; } #home-nextgen .ban-visuel .txt .accroche { font-size: 30px; } #home-nextgen .mea-pre-footer h2, #home-nextgen .univers-ppfr h2 { font-size: 22px; width: 100%; } #home-nextgen .mea-pre-footer .txt { padding: 20px 30px; text-align: left; } #home-nextgen .zone-left .reass-ban-top { display: block; } #home-nextgen .top-ban .zone-left > div .inner { padding: 30px 0 40px; } }