/** * This file should get overwritten if Method 1 is used. If Method 2 is chosen, * remove this comment and start adding your styles to this file. */ /* --------------------------------------------------------------------------------------------------------------------------------------------- FONTS //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ----------------------------------------------------------------------------------------------------------------------------------------------- */ /* @font-face { font-family: 'Conduit'; src: url('../fonts/Conduit.otf'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Conduit ITC Bold'; src: url('../fonts/Conduit-Bold.otf'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Conduit ITC Medium'; src: url('../fonts/Conduit-Medium.otf'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Conduit ITC Light'; src: url('../fonts/Conduit-Light.otf'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Bodoni Std Poster'; src: url('../fonts/BodoniStd-Poster.otf'); font-weight: 900; font-style: normal; } */ @font-face { font-family: '5yearsoldfontmedium'; src: url('../fonts/5yearsoldfont-webfont.eot'); src: url('../fonts/5yearsoldfont-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/5yearsoldfont-webfont.woff2') format('woff2'), url('../fonts/5yearsoldfont-webfont.woff') format('woff'), url('../fonts/5yearsoldfont-webfont.ttf') format('truetype'), url('../fonts/5yearsoldfont-webfont.svg#5yearsoldfontmedium') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'fontello'; src: url('../fonts/fontello.eot?30620550'); src: url('../fonts/fontello.eot?30620550#iefix') format('embedded-opentype'), url('../fonts/fontello.woff?30620550') format('woff'), url('../fonts/fontello.ttf?30620550') format('truetype'), url('../fonts/fontello.svg?30620550#fontello') format('svg'); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'fontello'; src: url('../fonts/fontello.svg?30620550#fontello') format('svg'); } } [class^="icon-"]:before, [class*=" icon-"]:before, #search-expander:before, #canvas-expander:before, #canvas-right #search-block-form button:before, #canvas-right .nav a.dropdown-toggle:after, #canvas-right #block-opinel-store-store .block-title:before, #canvas-right button.close:before, .content-bottom-before:after, section.advices:after, body.front section.videos:after, .icon-icon-fb:before, .icon-icon-goog:before, .icon-icon-twit:before, .icon-icon-insta:before, .icon-icon-pint:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-yout:before { content: '\e800'; } /* '' */ #canvas-right .nav a.dropdown-toggle:after, .icon-arrow-down:before { content: '\e801'; } /* '' */ .icon-arrow-left:before { content: '\e802'; } /* '' */ .icon-arrow-left-big:before { content: '\e803'; } /* '' */ .icon-arrow-right:before { content: '\e804'; } /* '' */ .icon-arrow-right-big:before { content: '\e805'; } /* '' */ #canvas-right .nav .open>a.dropdown-toggle:after, .icon-arrow-up:before { content: '\e806'; } /* '' */ .icon-comment:before { content: '\e807'; } /* '' */ .icon-date:before { content: '\e808'; } /* '' */ .icon-icon-fb:before, .icon-face:before { content: '\e809'; } /* '' */ body.front section.videos:after, .icon-glass:before { content: '\e80a'; } /* '' */ .icon-heart:before { content: '\e80b'; } /* '' */ .icon-icon-insta:before, .icon-inst:before { content: '\e80c'; } /* '' */ .icon-lock:before { content: '\e80d'; } /* '' */ .icon-losange:before { content: '\e80e'; } /* '' */ .icon-map:before { content: '\e80f'; } /* '' */ .content-bottom-before:after, .icon-medal:before { content: '\e810'; } /* '' */ section.advices:after, .icon-menu:before { content: '\e811'; } /* '' */ #canvas-expander:before, .icon-menu-bar:before { content: '\e812'; } /* '' */ .icon-icon-pint:before, .icon-pint:before { content: '\e813'; } /* '' */ .icon-pinterest:before { content: '\e814'; } /* '' */ .icon-plane:before { content: '\e815'; } /* '' */ .icon-search:before { content: '\e816'; } /* '' */ .icon-resize:before { content: '\e817'; } /* '' */ .icon-rss:before { content: '\e818'; } /* '' */ #search-expander:before, #canvas-right #search-block-form button:before, .icon-search-bold:before { content: '\e819'; } /* '' */ .icon-share:before { content: '\e81a'; } /* '' */ #canvas-right #block-opinel-store-store .block-title:before, .icon-store:before { content: '\e81b'; } /* '' */ .icon-icon-twit:before, .icon-twit:before { content: '\e81c'; } /* '' */ .icon-up:before { content: '\e81d'; } /* '' */ .icon-user:before { content: '\e81e'; } /* '' */ #canvas-right button.close:before, #search-expander.expanded:before, .icon-x:before { content: '\e81f'; } /* '' */ .icon-icon-goog:before, .icon-gplus:before { content: '\e820'; } /* '' */ /* --------------------------------------------------------------------------------------------------------------------------------------------- RESETS / ANIMATIONS //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ----------------------------------------------------------------------------------------------------------------------------------------------- */ table {border-collapse: collapse;border-spacing: 0;resize: vertical;} /* CESURES */ /*textarea, table, td, th, code, pre, samp, div, p {word-wrap: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;-o-hyphens: auto;hyphens: auto;} .nocut {word-wrap: normal;-webkit-hyphens: none;-moz-hyphens: none;-ms-hyphens: none;-o-hyphens: none;hyphens: none;}*/ /* BOX SIZING : http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ * { -moz-box-sizing : border-box; -webkit-box-sizing : border-box; box-sizing : border-box; /* *behavior:url(boxsizing.htc); for ie7 */} img, table, td, blockquote, code, pre, textarea, input {height: auto; max-width: 100%; } /* CSS ANIMATIC //////////////////////////////////////////////////////////////////////////////////////// */ .anim, a, input.submit {} .no-anim, header a.navbar-brand {-webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none;} /* --------------------------------------------------------------------------------------------------------------------------------------------- TYPOS //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ----------------------------------------------------------------------------------------------------------------------------------------------- */ html { font-size: 62.5%; } /* la base correspond à 10px */ body { font-size: 2.1em; /* taille de base équiv à 14px */ line-height: 145%; /* à corriger si besoin est */ font-family: 'Conduit', 'Conduit ITC W01 Regular', sans-serif; /* Déclarer la typo principale */ color: #010B14; /* Déclarer la couleur principale */ padding-top: 0; background: #fff; overflow-x: hidden; } body.modal-open {margin-right: 0px !important;} .modal-dialog, .modal-content {/*height: 100%;*/} /* CONDUIT Light */ .light, section.savoir-faire h2, div.gamme h2, div.black h2, div.black .btn, figure.vocabulary-gamme p, footer #block-menu-secondary-navigation .menu a, footer #block-opinel-tools-domain-nav-2 .menu a, footer #block-block-1 p, figure.node-couteau.coffret h2 span, footer #block-menu-menu-footer, #sliding-popup .popup-content #popup-text h2, #sliding-popup .popup-content #popup-text p, #sliding-popup .popup-content #popup-buttons button.find-more-button {font-family: 'Conduit ITC Light', 'Conduit ITC W01 Light', sans-serif;} /* CONDUIT Medium */ .medium, #header_top, section.advices figure h2, section.distinction h2 span, section.advices .btn, figure.node-couteau h2, div.gamme h2, div.gamme p, footer #block-opinel-social-newsletter h2, #sliding-popup .popup-content #popup-buttons button.agree-button {font-family: 'Conduit ITC Medium', 'Conduit ITC W01 Medium', sans-serif;} /* CONDUIT REGULAR */ .regular, #canvas-right .dropdown-menu a, figure.vocabulary-gamme h1, section.savoir-faire p .btn, section.advices figure p.label, section.collections h1, section.collections h2, section.advices h2, div.blue h2, #main-content article.story header h2, article#articles-publicitaires figure h2, #main-content article .entry header h2 {font-family: 'Conduit', 'Conduit ITC W01 Regular', sans-serif;} /* CONDUIT Bold */ .bold, strong, b, h1, h2, figure.node-couteau .coffret h2, article#articles-publicitaires figure h2 {font-family: 'Conduit ITC Bold', 'Conduit ITC W01 Bold', sans-serif;} /* CONDUIT Black */ .black {font-family: 'Conduit ITC Black', 'Conduit ITC W01 Black', sans-serif;} /* 5 YEARS OLD */ #canvas-right h2, #canvas-right .block-title, #canvas-right #block-menu-block-2 ul.nav, #slideshow .carousel-caption p, section.collections figure p, body.front section.history p, section.advices figure p, #fiches-pratiques p, body.taxo-usefull .main-container p, figure.node-experience figcaption, #opinel-store-boutiques-form, #opinel-store-boutiques-form label, a#social_list_top_display span, ul#social_list_top li span, .dropdown-menu > li > a, section.savoir-faire p, div.black p, footer #block-opinel-social-social-list a.share {font-family: '5yearsoldfontmedium', cursive;} /* BODONI POSTER */ .bodoni, figure.node-couteau h2:before, figure.node-couteau h2 span, #main-content article.story header h1, #main-content article .entry header h1 {font-family: 'Bodoni Std Poster','Bodoni W01 Poster', serif;} /* --------------------------------------------------------------------------------------------------------------------------------------------- GENERIC //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ----------------------------------------------------------------------------------------------------------------------------------------------- */ /* see http://pxtoem.com/ for px to em conversion */ h1, .h1 {font-size: /* 3.143em */ 2.9em;} /* equiv 66px */ .jumbotron {font-size: 2.667em; } /* equiv 54px */ h2, .h2 {font-size: 1.429em;} /* equiv 30px */ h3, .h3 {font-size: 1.143em;} /* equiv 16px */ h4, .h4 {font-size: 1.143em;} /* equiv 16px */ h5, .h5 {font-size: 1em;} /* equiv 14px */ h6, .h6 {font-size: 1em;} /* equiv 14px */ .small {font-size: .929em;} /* equiv 13px */ .xsmall {font-size: .857em;} /* equiv 12px */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, ul, ol, dl, p {margin: 0 0 1em;} h1, h2, .intro {color: #003567;} h1, .h1 {line-height: 90%;} h2, .h2 {line-height: 110%;} h1, h2:first-letter, h3:first-letter, h4:first-letter, h5:first-letter, h6:first-letter {text-transform: uppercase;} .page-header {margin: 0 0 1em; padding: 0; border: none;} /* List */ ul {list-style: none; padding: 0;} dd,dt {display: inline-block;} /* Img */ img {max-width: 100%;} img.responsive, .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {width: 100%; height: auto;} .lazy {display: none;} /* Links / buttons */ h1 a, h2 a/*, h3 a, h4 a*/ {display: block;} /*a {color: #003567;} */ a:hover, a:focus {color: #003567;text-decoration: none; outline: none;} a:hover {opacity: .8; filter: alpha(opacity=80);} a#youtube_preview:hover, a.navbar-brand:hover {opacity:1;filter: alpha(opacity=100);} a:active {outline: none;} /* Buttons */ .btn, .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { padding: .3em 1em; font-size: .857em; text-transform: uppercase; letter-spacing: .2em; line-height: 115%; white-space: normal; color: #003869; border-radius:0; box-shadow: none; border: 3px solid #003869; background: transparent; background-image: none; -ms-filter: none; filter: none;} .btn-primary:before {content: ""; display: block; float: left; margin: .35em .5em 0 0; width: 0px; height: 0px; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent transparent transparent #E5E7E7;} .btn:before {display: none;} .btn:hover {color: #fff; background: #003567;} .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {opacity: 1; filter: alpha(opacity=100); border-color: #003567;} /** Main title **/ h1.page-title {margin: 0.4em 0em;} #menu-container {position: relative;} #edit-tabs {position: absolute;right: -5px;top: -13px;} #contextual-tabs #contextual-dropdown {background: transparent url("/modules/contextual/images/gear-select.png") no-repeat 2px 0;border: 1px solid transparent;height: 18px;margin: 0;padding: 0 2px;outline: none;text-indent: 34px;width: 28px;overflow: hidden;-khtml-border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;} a.contextual-links-trigger {-webkit-transition: initial;-moz-transition: initial;-o-transition: initial;-ms-transition: initial;transition: initial;} ul.contextual-links li a {font-size: 18px;} /** Figure **/ figure {position: relative; margin-bottom: 30px !important; } figure figcaption {position: absolute; top: 0; height: 100%; padding: 2% 5%; width:100%} figure.experience figcaption {display: none; background-color: rgb(255,255,255); background-color: rgba(255,255,255,0.5);width:90%; padding: 10%;} figure.node figcaption, figure.gamme figcaption {width: 98%;} figure.experience:hover figcaption {display: block;} /* Carousels */ .carousel-control {color: #013668; background-image: none !important; background: transparent; text-shadow: none; filter: none !important; opacity: 1; filter: alpha(opacity=100);} .carousel-indicators {position: absolute; bottom: -4em; left: 50%; z-index: 15;} .carousel-indicators li {width: 14px; height: 14px; margin: 0 .25em; border: 4px solid #003567; border-radius: 0;background-color: #003567;} .carousel-indicators li:hover, .carousel-indicators .active {width: 14px; height: 14px; margin: 0 .25em; background-color: #fff;} /* Pagination */ .pagination {} .pagination>li>a, .pagination>li>span {color: #003869;background: transparent;border: none;} .pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span {border-radius: 0;} .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {color: #003869;background: transparent;border: none; text-decoration: underline;} .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {color: #003869;background: transparent;border: none; text-decoration: underline;} .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {color: #003869;background: transparent;} /* Forms */ input:focus {outline: none;} .control-group.error input, .control-group.error select, .control-group.error textarea, input.error, select.error, textarea.error {color: #B94A48; border-color: #ccc; background-color: #fddfe3; background-position: 95% -1150px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;} /* Forms ......................................................... */ form {} form fieldset {padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #003567;} form fieldset:last-child {border-bottom: none;} form legend {padding: 0; margin: 0; font-size: 1em; font-weight: 400; color: #4F494B; border: none;} form legend, form label {margin: 0 0 .7em;font-weight: 400;} form fieldset.radio label {font-size: .778em;} form p {margin: 0 0 .7em;} form p:last-child {margin: 0;} form input, form select, form textarea {width: 100%; padding: .6em; font-size: .833em; border: 1px solid #E9E9E9; background: #FCFCFC;} form select {color: #D7D7D7;} form select optgroup, form select optgroup option {color: #4F494B;} form textarea {min-height: 15em;} form input::-webkit-input-placeholder {color: #D7D7D7;} form input:-moz-placeholder {color: #D7D7D7;} form input::-moz-placeholder {color: #D7D7D7;} form input:-ms-input-placeholder {color: #D7D7D7;} form textarea::-webkit-input-placeholder {color: #D7D7D7;} form textarea:-moz-placeholder {color: #D7D7D7;} form textarea::-moz-placeholder {color: #D7D7D7;} form textarea:-ms-input-placeholder {color: #D7D7D7;} .placeholdersjs {color: #D7D7D7;} form .radio input[type="radio"], form input[type="checkbox"] {display: inline-block; float: none; width: auto; margin: .5em .5em 0 0; padding: 0;} form input[type="button"], form input[type="submit"], form input.submit {color: #E2001A; border-color: #E2001A; cursor: pointer;} body.page form input.btn, body.page form button.btn {padding: .25em 1.5em .25em 2em; /*font-size: 1em;*/ color: #E2001A; border-color: #E2001A;} form input[type="button"]:hover, form input[type="submit"]:hover, form input.submit:hover {/*opacity: 0.8;*/} /* Requireds / warnings /errors */ form .error {color: #E2001A;} .control-group.warning input, .control-group.warning select, .control-group.warning textarea {border-color: #E2001A;} .control-group.warning .control-label, .control-group.warning .help-block, .control-group.warning .help-inline {/* properties*/} form input.error, form select.error, form textarea.error, .control-group.error input, .control-group.error select, .control-group.error textarea, .control-group.error .control-label, .control-group.error .help-block, .control-group.error .help-inline {border-color: #E2001A;} /* focus */ input:focus {outline: none;} .form-control:focus {border: 1px solid #353535; -webkit-box-shadow: none; box-shadow: none;} /** Share **/ .social-share {position: absolute;top: 20px;right: 20px;} .social-share .sharrre {margin:0;} .sharrre .box {color : white;} .sharrre .box a:hover{text-decoration:none;} .sharrre .count {color:#000;display:block;font-size:0.85em;font-weight:bold;line-height:30px;height:30px;position:relative;text-align:center;width:40px;border:1px solid #CECECE;background-color: #FFF;float:left;margin-left: 8px;} .sharrre .count:before, .sharrre .count:after {content:'';display:block;position:absolute;left:49%;width:0;height:0;} .sharrre .count:before {border: solid 7px transparent;border-right-color: #b2c6cc;margin-left: -34px;bottom: 6px;} .sharrre .count:after {border: solid 6px transparent;margin-left: -31px;bottom: 8px;border-right-color: #fbfbfb;} .sharrre .share {color:#FFFFFF;display:block;font-size:12px;font-weight:bold;height:30px;line-height:30px;padding:0;text-align:center;text-decoration:none;width:30px;float:left;} .social-share .sharrre .share {font-size:18px;height:40px;line-height:40px;width:40px; margin-right: 0.5em;} .social-share-count .sharrre .count {margin-right: 1em;} #twitter .share, #twitter-wc .share {color: #00C3F9;} #facebook .share, #facebook-wc .share {color: #385B91;} #googleplus .share, #googleplus-wc .share {color: #D64A3B;} #pinterest .share, #pinterest-wc .share {color: #D64A3B;} #instagram .share, #instagram-wc .share {color: #D64A3B;} .sharrre .share i:before {position:inherit;} /*.icon-icon-fb:before { content: 'FB'; } .icon-icon-goog:before { content: 'G+'; } .icon-icon-twit:before { content: 'TW'; } .icon-icon-insta:before { content: 'IN'; } .icon-icon-pint:before { content: 'PI'; }*/ /* Helper classes */ .small {font-size: 85%;} .center {text-align: center;} .bg-primary {background-color: #003869;} p.small {margin-top: 1em;font-size: 65% !important;line-height: 180%;color: #AAA;} /* :before :after blocks */ .before, .after, #canvas-right .block-title:before, #canvas-right #block-opinel-store-store .block-title:after, #canvas-right #block-opinel-social-newsletter-canvas .block-title:before, #canvas-right #block-opinel-social-social-list-canvas .block-title:before, section.collections figure h2:after, body.front section.history h3:after, section.advices figure h2:after, section.savoir-faire h2:after, div.black h2:after, section.distinction h2 span:after, body.page-la-marque-fiches-pratiques #main-content article h2:after, div.gamme h2:after, .container .jumbotron:after, #main-content .btn-arrow:after, article#articles-publicitaires figure h2:after, footer #block-menu-secondary-navigation ul:after, figure.vocabulary-gamme h1:after {content: ""; display: block; width: 20px; height: 20px;} /* Paterns */ .zigwhiteshort, #canvas-right #block-domain-nav-default .block-title:before, #canvas-right #block-opinel-social-newsletter-canvas .block-title:before, #canvas-right #block-opinel-social-social-list-canvas .block-title:before, #canvas-right #block-menu-block-2:before, footer #block-menu-secondary-navigation ul:after, article#articles-publicitaires figure h2:after {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQYV2NkIAL8BwJGMAEEuNTD5MEKcClGFoebhK4YnY9iJUwSmw0YbsPlDJyeQPfcACoEAN6fKAePcmpNAAAAAElFTkSuQmCC) repeat;} .zigwhite, figure.vocabulary-gamme h1:after, section.savoir-faire h2:after, div.black h2:after, body.front section.history h3:after {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaSR+goB4dMoB52Eaw4AAAAASUVORK5CYII=) repeat;} .zigblue, section.distinction h2 span:after, section.collections figure h2:after, section.advices figure h2:after, figure.node-couteau.coffret h2 span:after, body .main-container .listing h2:after, #fiches-pratiques h2:after, div.gamme h2:after {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPUlEQVQYV2NkQAcWmf8ZTkxnRBdGFYApwqIYoRBdEo0PUYjDOmRxRpyKYI6EGoLhaAzPQW0kTiFQ8QAqBACIwhyr9HLi7AAAAABJRU5ErkJggg==) repeat;} .rayurebeige, figure.node-couteau.col-sm-6:before, #fiches-pratiques .row:before/*, body.page-taxonomy-term #main-content .row:before*/ {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQIW2N8ePfWf3llNUYGKAAzkAXhMjBBuABMJQAa7g+cVQWlBwAAAABJRU5ErkJggg==) repeat;} .crossbeige, figure.node-couteau.col-sm-6 + figure.node-couteau.col-sm-6:before, body.page-la-marque-fiches-pratiques #main-content article .row:before, body.taxo-usefull .main-container .row:after {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2N8fO/Wf1klNUYGKADxwRyYBIxGUQHTgV0lNjMBNR8jOi0R8l8AAAAASUVORK5CYII=) repeat;} .chevronbeige, figure.node-couteau.col-sm-6 + figure.node-couteau.col-sm-6 + figure.node-couteau.col-sm-6:before {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALUlEQVQYV2N8ePfWf3llNUYGHAAsgU8RXCcuRShGY1OEYTe6IuJNwOsGfL4AADmLIAn+78yjAAAAAElFTkSuQmCC) repeat;} /* Background-cover */ section.savoir-faire, .content-bottom-before { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* Rotate */ .losange:before, .carousel-indicators li, #main-content .btn-arrow:before, #main-content .btn-arrow:after, div.gamme:before, .content-bottom-before:before, section.advices:before, body.front section.videos:before, #main-content article.story header:before { -ms-transform: rotate(45deg) skew(0deg); -moz-transform: rotate(45deg) skew(0deg); -o-transform: rotate(45deg) skew(0deg); -webkit-transform: rotate(45deg) skew(0deg); transform: rotate(45deg) skew(0deg); } /* Parallelogram */ section.advices figure p.label { /*-ms-transform: skew(-20deg); -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);*/ } /* Css3 animation */ /*.anim, a, a img, a:after, input.submit, #search-expander, #canvas-expander, #canvas-right ul.menu .dropdown-menu, .carousel-indicators li, #product-carousel a.resize:before, #main-content .btn-arrow:before, #main-content .btn-arrow:after, footer #opinel-social-newsletter-form button.form-submit, figure.node-experience figcaption { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .no-anim{ -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; } /* --------------------------------------------------------------------------------------------------------------------------------------------- STRUCTURE //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ----------------------------------------------------------------------------------------------------------------------------------------------- */ body{position:relative; overflow-x: hidden;} /* Header ----------------------------------------------------------------------------------------------- */ #header_top {color: #47637E; font-size: .667em; text-transform: uppercase; background: #111E2F;} #header_top a {position: relative; padding: 0 2em; color: #47637E;} #header_top a:hover, body.domain-Opinelcom #header_top li.first a {color: #CCD9E1; background: transparent;} body.domain-Opinelcom #header_top li.first a {font-weight: 600;} body.domain-Opinelcom #header_top li.first a:after {content: ""; display: block; margin: -5px 0 0 40%; width: 0; height: 0; border-style: solid; border-width: 0 5px 5px 5px; border-color: transparent transparent #013668 transparent;} /** Search **/ #search-expander, #canvas-expander {font-size: 1em; float: left; color: white; border: none; padding: 1.25em .4em; background: transparent;z-index: 999;} #search-expander .glyphicon, #canvas-expander .icon-bar {display: none;} #search-expander:before {font-size: 140%;} #canvas-expander:before {} #search-expander:hover, #canvas-expander:hover {color: #CCD9E1; background: transparent;} #search-expander.expanded:before {color: #EA535C;} .tooltip {width: 30%; left: 0 !important; padding: 0; margin: 0 0 0 70% !important;} .tooltip.in {opacity:1; filter:alpha(opacity=100)} .tooltip-inner { max-width:100%; width:100%; padding: 1em; text-align: left; font-size: 180%; color: #282826; border-radius: 0; background: #FCF7F3;} .tooltip.bottom .tooltip-arrow {top:-10px; left:90%; right: 1em !important!; margin-left:-15px; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #FCF7F3;} #search-container {display: none; background: #fff;} #search-block-form {margin: -2.8em 0 .65em; background: #fff;} #search-block-form .input-group {width: 100%;} #search-block-form input.form-text {padding: 7px; color: #504A4C; border: none; box-shadow: none;text-transform: uppercase; font-size: .85em; background: transparent; height:46px;} #search-block-form input.form-text::-webkit-input-placeholder {color: #504A4C;} #search-block-form input.form-text:-moz-placeholder {color: #504A4C;} #search-block-form input.form-text::-moz-placeholder {color: #504A4C;} #search-block-form input.form-text:-ms-input-placeholder {color: #504A4C;} #search-block-form .input-group-btn {width: 20%; font-size: .85em;} #search-block-form button {padding: .4em .6em; color: #fff; letter-spacing: .1em; color: #013668; border-color: #013668; background: #fff;} #search-block-form button i {display :none;} #search-block-form button:hover {color: #fff; background: #013668;} .search-canvas {position: absolute; top: 2.5em; right: 0;} .apachesolr_autocomplete {font-size: 140%; color: #504A4C; text-transform: uppercase;} .apachesolr_autocomplete.message {font-size:100%; /*color:#504A4C;*/ font-style: italic;} .apachesolr_autocomplete.count {float:right;} div.apachesolr_autocomplete.suggestion {display:inline; float:left;} div.ac_results li {} /* Right Menu */ .navbar-toggle {display: block !important;} .search{ margin-top: 8px;} #canvas-right {display: block; height: 100%; overflow: hidden; position: fixed; z-index:99999; color: #FCF7F3; background: #003869; font-size: 1em; top: 0; right: -17em; width: 17em; padding: 20px; transition: right 0.3s ease-in-out 0s;-webkit-transition: right 0.3s ease-in-out 0s;-moz-transition: right 0.3s ease-in-out 0s;-o-transition: right 0.3s ease-in-out 0s; } #canvas-right section {padding: 0 0 1.5em;} #canvas-right h2, #canvas-right .block-title {color: #CCD9E1; font-size: 100%; text-align: center; text-transform: uppercase; letter-spacing: .1em;line-height: 110%; margin: 0 0 1em; font-weight: 500;} #canvas-right a, #canvas-right ul, #canvas-right p {color: #FCF7F3;} #canvas-right .btn {color: #FCF7F3; border-color: #FCF7F3;} #canvas-right #block-locale-language .block-title {} #canvas-right #block-locale-language .block-title:before {width: 127px; height: 167px; margin-left: 30%; background: url(../img/opinel-icone.png) no-repeat 0 0;} #canvas-right .language-switcher-locale-url li {display: block; width: 50%; float: left; font-size: 85%; text-transform: uppercase; letter-spacing: .1em; } #canvas-right .language-switcher-locale-url li a, #canvas-right .language-switcher-locale-url li span.language-link {display: block; padding: .25em .5em; width: 100%; text-align: center; border: 3px solid #fcf7f3;} #canvas-right .language-switcher-locale-url li.active a {color: #003869; background: #FCF7F3;} #canvas-right .language-switcher-locale-url li a:hover {opacity:1;} #canvas-right button.close {color: white; opacity:1;position: relative;z-index:9999;} #canvas-right button.close:before {} #canvas-right #search-block-form {margin: .5em 0 1em;} #canvas-right #search-block-form #edit-search-block-form--2 {margin: .4em 0 .2em; color: #003869;} #canvas-right #search-block-form #edit-search-block-form--2::-webkit-input-placeholder {color: #fff;} #canvas-right #search-block-form #edit-search-block-form--2:-moz-placeholder {color: #fff;} #canvas-right #search-block-form #edit-search-block-form--2::-moz-placeholder {color: #fff;} #canvas-right #search-block-form #edit-search-block-form--2:-ms-input-placeholder {color: #fff;} #canvas-right #search-block-form .input-group-btn {width: 5%; font-size: 1em;} #canvas-right #search-block-form button {content: ""; padding: 0; font-size: /*1.35em*/1px; color: /*#003869*/#fff;letter-spacing: 0;border: none;} #canvas-right #search-block-form button:before {margin: .1em .45em 0 0; font-size: 27em; color: #003869;} #canvas-right #search-block-form button:after {content: "";} #canvas-right #search-block-form button:hover {color: #003869; background: #fff;} #canvas-right #block-menu-block-1 .caret {display: none;} #canvas-right #block-menu-block-1 .dropdown.open {margin: 0;} #canvas-right ul.menu .dropdown-menu {position: relative; margin: .75em 0 1.25em; float: none; background: transparent; box-shadow: none; border-bottom: 1px dotted #fcf7f3;} #canvas-right ul.menu .dropdown-menu li {margin: 0 0 1.25em;} #canvas-right ul.menu .dropdown-menu a {padding: .25em .5em; font-size: 150%;} #canvas-right .nav .open>a, #canvas-right .nav .open>a:hover, #canvas-right .nav .open>a:focus {color: #003869; background-color: #FCF7F3;} #canvas-right .nav a.dropdown-toggle:after {float: right; margin: 1.1em 1.1em 0 0; font-size: 50%;} #canvas-right #block-domain-nav-default .block-title {text-transform: none; letter-spacing: .05em;} #canvas-right #block-domain-nav-default .block-title:before {display: none;} #canvas-right ul.menu li {display: block; width: 100%; margin: 0 0 1em; font-size: 85%; text-transform: uppercase; letter-spacing: .1em; } #canvas-right ul.menu a {display: block; padding: .1em .5em; width: 100%; border: 3px solid #fcf7f3;} #canvas-right ul.menu a:hover, #canvas-right ul.menu a:focus, #canvas-right #block-domain-nav-default ul.menu li a.active {color: #003869; background: #FCF7F3; opacity: 1;} #canvas-right #block-opinel-store-store .block-title {margin: 0 -1em; font-size: 70%;} #canvas-right #block-opinel-store-store .block-title span {display: block; margin: .4em 0 0; font-size: 140%;} #canvas-right #block-opinel-store-store .block-title:before {display: block; clear: both; margin: 0 0 1em 47%; font-size: 150%; } #canvas-right #block-opinel-store-store .block-title:after {width: 100%; height: 15em; background: url(../img/bg-store.png) no-repeat 50% 0;} #canvas-right #block-opinel-store-store .btn {width: 100%; font-size: 85%; padding: .25em .5em; letter-spacing: .1em;} #canvas-right #block-opinel-store-store .btn:hover {color: #003869; background: #FCF7F3; opacity: 1;} #canvas-right #block-opinel-social-newsletter-canvas .col-sm-6 {width: 100%; padding: 0;} #canvas-right #block-opinel-social-newsletter-canvas input.form-text {padding: 1.1em; color: #FCF7F3; border: 3px solid #FCF7F3; text-transform: uppercase; font-size: .85em; background: transparent;} #canvas-right #block-opinel-social-newsletter-canvas input.form-text::-webkit-input-placeholder {color: #FCF7F3;} #canvas-right #block-opinel-social-newsletter-canvas input.form-text:-moz-placeholder {color: #FCF7F3;} #canvas-right #block-opinel-social-newsletter-canvas input.form-text::-moz-placeholder {color: #FCF7F3;} #canvas-right #block-opinel-social-newsletter-canvas input.form-text:-ms-input-placeholder {color: #FCF7F3;} #canvas-right #block-opinel-social-newsletter-canvas .input-group-btn {width: 10%; font-size: .85em;} #canvas-right #block-opinel-social-newsletter-canvas button.form-submit {padding: .75em .6em; color: #003869; letter-spacing: .1em; background: #FCF7F3} #canvas-right #block-domain-nav-default .block-title:before, #canvas-right #block-opinel-social-newsletter-canvas .block-title:before, #canvas-right #block-opinel-social-social-list-canvas .block-title:before, #canvas-right #block-menu-block-2:before {width: 39px; height: 6px; margin: 0 0 1.25em 42%;} #canvas-right #block-opinel-social-social-list-canvas .block-title {font-size: 70%;} #canvas-right #block-opinel-social-social-list-canvas .block-title span {display: block; margin: .4em 0 0; font-size: 140%; line-height: 130%;} #canvas-right #social_list_canvas {text-align: center;} #canvas-right #social_list_canvas li a:hover {color: #CCD9E1; background: transparent;} #canvas-right #block-menu-block-2 .block-title {display: none;} #canvas-right #block-menu-block-2 ul.nav {text-align: center;} #canvas-right #block-menu-block-2 ul.nav li {margin: 0;} #canvas-right #block-menu-block-2 ul.nav li a {border: none;} .canvas-mask {display: none; z-index:0;} body.canvas-expanded {margin-left: 0em;transition: right 0.4s ease-in-out 0s;-webkit-transition: right 0.4s ease-in-out 0s;-moz-transition: right 0.4s ease-in-out 0s;-o-transition: right 0.4s ease-in-out 0s;} body.canvas-expanded #canvas-right {position: absolute; top: 0; right: 0;} body.canvas-expanded .canvas-mask {z-index:9999;display:block;position: absolute;top:0; left:0; background-color: white; height: 100%; width: 100%;opacity:0.5;} /** Menu **/ #toolbar {z-index: 999;} #navbar {top:0px !important; border-radius: 0;} .navbar {margin-bottom: 0 !important;} .navbar-default {background-color: #013668 !important;z-index: 99;width: 100%; border: none !important;} .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>li>a {color: #003869;} .navbar-default .navbar-toggle .icon-bar {background-color:white !important;} .menu.nav>li {display: inline-block;} section.menubar {background-color: white !important;} section.menubar #menu {/*margin: .6em 0 0;*/ font-size: 90%; text-transform: uppercase;} section.menubar #menu .caret {display: none;} .navbar-default .navbar-nav {margin: .6em 0;} .navbar-default .navbar-nav > li > a {padding: .3em 1.8em .4em; border-left: 1px solid #fff; line-height: inherit;} .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus, #menu li.active-trail > a {color: #fff; background: #003869; opacity: 1;} #menu .dropdown-menu {border: none; box-shadow: none;} #menu .open > .dropdown-menu {width: 100%; width: 690px; padding: .5em; border-radius: 0;} #menu .open > .dropdown-menu:before, #menu .open > .dropdown-menu:after {content: ""; position: absolute; top: 0; width: 450px; height: 461px; background: #fff;} #menu .open > .dropdown-menu:before {left: -450px;} #menu .open > .dropdown-menu:after {right: -450px;} /*#menu li:nth-child(3) .dropdown-menu:before, #menu li:nth-child(3) .dropdown-menu:after {height: 480px;}*/ #menu .dropdown-menu {width: 690px;} #menu li:nth-child(2) .dropdown-menu {left: -78px;} #menu li:nth-child(3) .dropdown-menu {left: -268px;} #menu .dropdown-menu > li {display: block; float: left; width: 25%;} #menu .dropdown-menu > li > a {min-height: 4em; margin: .5em; padding: 1em; font-size: 115%; line-height: 120%; text-align: center; color: #003869; white-space: normal;} #menu .dropdown-menu > li > a:hover, #menu .dropdown-menu > li > a:focus, #menu .dropdown-menu > li.active > a, #menu .dropdown-menu > li.active-trail > a {color: #003869; background: #fff; opacity: 1;} #menu .dropdown-menu > li > a span {display: inline-block; margin-top: 1em;} /* Responsive Menu Adjustments */ @media (min-width: 992px) { #menu .dropdown-menu, #menu .open > .dropdown-menu {width: 900px;} #menu .dropdown-menu > li {width: 16.4%; min-height: 250px;} #menu li:nth-child(2) .dropdown-menu {left: -110px;} #menu li:nth-child(3) .dropdown-menu {left: -354px;} #menu .dropdown-menu > li > a {min-height: 15.5em; letter-spacing: -.05em;} #menu .open > .dropdown-menu:before, #menu .open > .dropdown-menu:after {height: 280px;} /*#menu li:nth-child(3) .dropdown-menu:before, #menu li:nth-child(3) .dropdown-menu:after {height: 546px;}*/ } @media (min-width: 1200px) { #menu .dropdown-menu, #menu .open > .dropdown-menu{width: 1170px;} #menu .dropdown-menu > li {width: 16.65%; min-height: 250px;} #menu li:nth-child(2) .dropdown-menu {left: -148px;} #menu li:nth-child(3) .dropdown-menu {left: -429px;} #menu .open > .dropdown-menu:before, #menu .open > .dropdown-menu:after {height: 280px;} /*#menu li:nth-child(3) .dropdown-menu:before, #menu li:nth-child(3) .dropdown-menu:after {height: 546px;}*/ } #navbar.affix { transition: all 3s ease-in-out 1s; -webkit-transition: all 3s ease-in-out 1s; } #navbar.affix #header_top {display: none;} #navbar.affix #header_bottom {height: 90px;} #navbar.affix #header_bottom a {text-align: left; position: absolute; top: 8px; left: 0;} #navbar.affix #header_bottom a img {width: 190px; margin-left: .7em;} #navbar.affix #search-expander, #navbar.affix #canvas-expander {padding: .7em .4em;} #navbar.affix #search-block-form {margin: .65em 0 .65em 0;} #navbar.affix .search-canvas {top: 8px;} body.not-front #navbar.affix section.menubar #menu-container {display:none;} /* Breadcrumb */ #breadcrumb-container {display: none; position: absolute;} ol.breadcrumb, .menu-gamme, .menu-story {float: left; min-height: 36px; max-height: 36px;} .breadcrumb>li{display: inline;} ol.breadcrumb {margin: -4.5em 0 0 220px; font-size: 70%; color: #fff; text-transform: uppercase; background: transparent;} ol.breadcrumb a {color: #fff;} ol.breadcrumb .active {position: relative; color: #fff; font-weight: 600; border-bottom: 3px solid #fff;} ol.breadcrumb .active:after {content: ""; display: block; width: 1.3em; height: 3px; position: absolute; bottom: -3px; left: 0; background: #013668;} .menu-story .nav-tabs, .menu-gamme .nav-tabs {border-bottom: none; border-radius:0 !important;} .menu-story .nav-tabs>li>a, .menu-gamme .nav-tabs>li>a { background: none !important; border:none !important; color:#013668; display: initial !important; border-radius:0 !important;} .menu-story .nav-tabs>li.active>a { border-bottom: 3px solid #013668 !important; } .menu-gamme .nav-tabs>li.active>a { border-bottom: 3px solid /*#7894A9*/ #fff !important; } .menu-gamme {margin: -2.25em 0 0; display: none;} .menu-gamme ul.nav {/*margin: 0 0 0 225px;*/ font-size: 70%; color: #fff; text-transform: uppercase; background: transparent;} .menu-gamme ul.nav a {color: #7894A9;} .menu-gamme ul.nav a:hover, .menu-gamme .nav-tabs>li.active>a {color: #fff;} .menu-story {display: none;} /* CONTENTS ----------------------------------------------------------------------------------------------- */ section {padding: 1.2em 0;} section#block-nodule-slideshow-slideshow, section#block-opinel-tools-domain-nav, section.menubar{padding: 0;} section#header_bottom {padding: 1em 0;} #main-content {/*background: #FCF7F3;*/}694 #main-content article {width: 100%; margin: 0;} /* Visu ambiances */ figure.ambiance {position: relative; height: 420px; width: 100%; overflow: hidden;} figure.ambiance img {width: auto; max-width: 1920px;margin: auto; height: 100%;} body.taxo-gamme figure.ambiance:before {content: ""; width: 120%; height: 420px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.2);} /* Social List Top */ a#social_list_top_display {display: block; color: #013668;} a#social_list_top_display span {font-size: 85%;} a#social_list_top_display i {display: inline-block; width: 2.8em; height: 2.8em; font-size: 60%; color: #FCF7F3; text-align: center; border-radius: 10em; background: #013668;} a#social_list_top_display i:before {margin-top: .9em; margin-left: -.2em;} ul#social_list_top {width: 100%; margin: 0;} ul#social_list_top li {margin: 0 0 .5em;} ul#social_list_top li a {padding: 0;} ul#social_list_top li span {font-size: 85%;} ul#social_list_top li i {display: inline-block; margin: 0 .5em; width: 2.8em; height: 2.8em; font-size: 60%; color: #FCF7F3; text-align: center; border-radius: 10em; background: #013668;} ul#social_list_top li i:before {margin-top: .9em; margin-left: -.2em;} ul#social_list_top li.google i:before, ul#social_list_top li.pinterest i:before, ul#social_list_top li.instagram i:before {margin-left: .2em; margin-top: .6em; font-size: 120%;} ul#social_list_top li a:hover {background: transparent; opacity: 1;filter: alpha(opacity=100);} ul#social_list_top li a:hover i {color: #CCD9E1; background: #013668; opacity: 1;filter: alpha(opacity=100);} ul#social_list_top li.close, ul#social_list_top li a#social_list_top_close {opacity: 1;filter: alpha(opacity=100);} ul#social_list_top li a#social_list_top_close i {color: #F48067; border: 2px solid #013668; border-radius: 10em; background: #FCF7F3;} ul#social_list_top li a#social_list_top_close i:before {margin: .7em 0 0 .1em;} ul#social_list_top li a#social_list_top_close:hover i {border: 2px solid #F48067;} /* Losanges */ .losange {display: inline-block; width: 70px; height: 70px; left: 50%; margin-left: -35px; position: absolute; z-index: +1; text-align: center; color: #fff; background: transparent;} .losange i {display: block; margin: 22px 0 0 -5px; font-size: 50%;} .losange i.icon-arrow-down {margin: 22px 0 0 -5px; color: #fff;} .losange:before, div.gamme:before, .content-bottom-before:before, section.advices:before, body.front section.videos:before, #main-content article.story header:before {content:""; display: inline-block; color: #fff; background: #013668; width: 70px; height: 70px; position: absolute; top: 0; left:0; z-index: -1;} a.losange:hover {color: #fff; opacity: 1;} /* HOMEPAGE ................................................................................................................................................... */ /*#slideshow .carousel-inner { max-width: 1140px; margin: 0 auto; }*/ #slideshow .carousel-caption {min-height: 30%; width: 100%; left: 0; bottom: 0; z-index: 0; padding: 1em 1em 2em; text-shadow: none; background: rgba(250,250,250,.8);} #slideshow .carousel-caption h3 {margin: 0 0 .25em; font-size: 2.286em; text-transform: uppercase; color: #003567;} #slideshow .carousel-caption p {color: #003567;} #slideshow .carousel-control {display: none;} #slideshow + div.text-center {margin: -1.65em 0 4em;} @media (min-width: 768px) { #slideshow .carousel-inner > .active.left { left: -33.33%; } #slideshow .carousel-inner > .next { left: 33.33%; } #slideshow .carousel-inner > .prev { left: -33.33%; } #slideshow .carousel-inner > .next.left, #slideshow .carousel-inner > .prev.right {left: 0;} #slideshow .carousel-inner { width: auto; margin: 0 -75%; max-width: none;} #slideshow .carousel-control.left,#slideshow .carousel-control.right {background-image:none;} #slideshow .carousel {overflow:hidden;} #slideshow .carousel-inner .item .col-sm-4:first-child, #slideshow .carousel-inner .item .col-sm-4:last-child {/*opacity:0.3;*/} #slideshow .carousel-inner .item .col-sm-4:first-child .carousel-caption, #slideshow .carousel-inner .item .col-sm-4:last-child .carousel-caption {display: none;} #slideshow .carousel-inner .item .col-sm-4 {padding: 0 10px 0 0;} } /* Collections */ section.collections h3 {position: relative; display: inline-block; margin: 0 0 .5em; padding: .5em 1.25em; font-size: .952em; color: #013668; text-transform: uppercase; letter-spacing: .2em; border-top: 2px solid #013668; border-bottom: 2px solid #013668;} section.collections h3:before, section.collections h3:after {content:""; display: block; position: absolute; top: 1px; left: 0; width: 100%; height: 1px; margin: 1px 0; background: #013668;} section.collections h3:after {top: 90%;} section.collections h1, section.collections h2 {font-size: 2.286em; text-transform: uppercase; margin: .25em 0 .65em;} section.collections figure figcaption {position: relative; padding: 1em 0; text-align: center;} section.collections figure h2 {position: relative; margin: 0 0 .5em; padding: 0 0 .65em; font-size: 1.457em;} section.collections figure h2:after {width: 100px; height: 6px; position: absolute; bottom: 0; left: 50%; margin-left: -50px;} section.collections figure p {padding: 0 20%; font-size: 90%; line-height: 140%; color: #676763;} /* History */ body.front section.history {margin: 0 -1em; padding: 4em 0 1.2em; color: #fff; text-align: center; background: #CDB092 url(../img/bg-kraft2.jpg) repeat 50% 0;} body.front section.history h3 {position: relative; margin: 0 0 .5em; padding: 0 0 1em; font-size: .952em; color: #fff; text-transform: uppercase; letter-spacing: .2em} body.front section.history h3:after {width: 100px; height: 6px; position: absolute; bottom: 0; left: 50%; margin: 0 0 0 -50px;} body.front section.history h2 {color: #fff; font-size: 1.714em; line-height: 110%; margin: 0 0 .5em; } body.front section.history p {font-size: 1.095em; line-height: 130%;} body.front section.history .btn {padding: .4em 1.25em; font-size: 80%; color: #fff; letter-spacing: .2em; border-color: #fff;} body.front section.history .btn:hover {color: #013668; background: #fff;} /* Advices */ section.advices {position: relative; padding-top: 4em;} section.advices:before {z-index:0; left: 50%; margin: -1.7em 0 0 -35px;} section.advices:after {color: #fff; position: absolute; top: -.6em; left: 50%; margin: 0 0 0 -14px;} section.advices h3 {position: relative; display: inline-block; margin: 0 0 .5em; padding: .5em 1.25em; font-size: .952em; color: #013668; text-transform: uppercase; letter-spacing: .2em; border-top: 2px solid #013668; border-bottom: 2px solid #013668;} section.advices h3:before, section.advices h3:after {content:""; display: block; position: absolute; top: 1px; left: 0; width: 100%; height: 1px; margin: 1px 0; background: #013668;} section.advices h3:after {top: 90%;} section.advices h2 {margin: .25em 0 .65em; font-size: 2.286em; text-transform: uppercase;} section.advices .btn {margin: -1.5em 0 5em; padding: .4em 1.25em; font-size: .857em; letter-spacing: .1em;} section.advices .btn:hover {color: #fff; border-color: #013668; background: #013668; opacity: 1;} section.advices figure figcaption {position: relative; padding: 1em 0; text-align: center;} section.advices figure h2, section.advices figure h4 {position: relative; margin: .25em 0 .5em; padding: 0 0 .65em; font-size: 1.457em; line-height: 90%; text-transform: uppercase;} section.advices figure h2:after, section.advices figure h4:after {width: 100px; height: 6px; position: absolute; bottom: 0; left: 50%; margin-left: -50px;} section.advices figure p {font-size: .857em; line-height: 130%; color: #676763;} section.advices figure p.label {display: inline-block; padding: .35em 2.5em .25em; font-size: 65%; letter-spacing: .15em; font-weight: 400; color: #fff; text-transform: uppercase; border-radius: 0; background: #013668;} section.advices figure p span {font-size: 1em !important; line-height: auto: important;} /* Vidéos */ body.front section.videos {position: relative; padding: 4em 0 2.5em; background: #222 url(../img/bg-video.jpg) repeat 50% 0;} body.front section.videos:before {z-index:0; left: 50%; margin: -1.7em 0 0 -35px;} body.front section.videos:after {position: absolute; top: -.5em; left: 50%; margin: 0 0 0 -16px; font-size: 70%; color: #fff;} body.front section.videos h3 {margin: 0 0 2em; font-size: 90%; color: #fff; text-transform: uppercase; letter-spacing: .2em;} body.front section.videos .btn {color: #fff; border-color: #fff;} body.front section.videos .btn:hover {color: #222; background: #fff; opacity: 1;} #video-carousel {margin-bottom: 1.5em;} #video-carousel .item iframe {box-shadow: 0 0 30px #000;} #video-carousel .carousel-control { color: #fff; width: 116px; height: 36px; top: 50%; margin-top: -18px; background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAkBAMAAACqOgPjAAAAA3NCSVQICAjb4U/gAAAAMFBMVEX///////////////////////////////////////////////////////////////9Or7hAAAAAEHRSTlMAESIzRFVmd4iZqrvM3e7/dpUBFQAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDgvMjQvMTTG5phoAAACGUlEQVRIiZ2UTWgTQRTHZ5NY8JasSj1mskXUk7Z6UBBaYrSai8VS8aaV4K14Mx4KehKKHyBiY/26eFBBQVQqzRZvlZJNFvWk2dk9edB0Zu5xd56zlkBLoob3h4HZZX7vvZ33f0vIJiWyBCejfNPDsVteVMqzKHSXC817NQy5MwAAfg1B7nAVwI9hBDnoCglvswhyPIiC6GkaQRZBSPUGAZKTci1oX8CQu0HJ9jkMmZJ1FV7FkGTm56vwbqp0zDpeylNjaIT2TZ5QIrrCGkKwQHDm+D6buzxfGqaZf2OGNi5wKaoChFirad5nXDAR+6r2/PrFSZrXlRBi0vS2fGyXhF5mmkyeHr8xSrY2AeKjHem94Lzhx++U8jgI5iw5drXOeXOx8uhhtfLSW33ckPCaDCyDEs1vzxZsz16yfQBHL5B/wigtIZR+kLZSMuqEjwLt98+E3Nat+aJ9ZNBMOpMbKdDcVKH8wNFpNxbTkRLrUfnXfYRsPwvQOtV9DUNTB+6/r5YXbAYQNqC17EvwdEVRPZybXxxbP3UY/FBvezlYX7NhWkcnTIsmc1aBmlZh2qQbzhZ13LG+u7m5uFvw/WBfY9Pd7OSHdmb6/xl6ftNeWMn2k7WXZmAFM+ixki68249k9Q8xPI9kj4D4lcWhiSdKriLTpgIFd5DsgKuiUSQ7KP3WBJI9JMOPSJQUA3YJy+6BT1iUnOme+r/oN6LkPevjHtyyAAAAAElFTkSuQmCC) !important; } #video-carousel .carousel-control.right { -ms-transform: rotate(180deg) skew(0deg); -moz-transform: rotate(180deg) skew(0deg); -o-transform: rotate(180deg) skew(0deg); -webkit-transform: rotate(180deg) skew(0deg); transform: rotate(180deg) skew(0deg); } #video-carousel .carousel-control:hover {opacity: .5;} #video-carousel .carousel-inner>.active.left { left: -100%; } #video-carousel .carousel-inner>.next { left: 100%; } #video-carousel .carousel-inner>.prev { left: -100%; } #video-carousel .carousel-inner > .next.left, #video-carousel .carousel-inner > .prev.right {left: 0;} /* GAMES PAGES ................................................................................................................................................... */ figure.vocabulary-gamme {text-align: center; color: #fff;} figure.vocabulary-gamme figcaption {/*padding: 2% 5%;*/ padding: 5% 10%;} figure.vocabulary-gamme h1 {position: relative; margin: 0 0 .5em; padding: 0 0 .5em; font-size: .952em; letter-spacing: .2em; color: #fff;} figure.vocabulary-gamme h1:after {width: 180px; height: 6px; position: absolute; bottom: 0; left: 50%; margin-left: -95px;} figure.vocabulary-gamme h2 {margin: 0 0 .35em; font-size: 2.25em; line-height: 86%; text-transform: uppercase; color: #fff;} figure.vocabulary-gamme p {/*display: none;*/ padding: 0 2.5%; text-align: center; font-size: 100%; line-height: 120%;} figure.vocabulary-gamme p span {font-size: 1em !important;} figure.vocabulary-gamme p span a {color: #fff; font-weight: bold; border-bottom: 1px dotted #fff;} figure.vocabulary-gamme .btn {color: #fff; border-color: #fff;} figure.vocabulary-gamme .btn:hover {color: #242424; background: #fff;} div.gamme {margin: 1em 0 3em; padding: 2em 2em 1.5em; clear:both; background: #fbf7f3;} div.gamme:before {width: 44px; height: 44px; top: -22px; left: 50%; margin-left: -22px; z-index:0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsBAMAAADsqkcyAAAAA3NCSVQICAjb4U/gAAAAG1BMVEX///8AN2gAN2j///9Xe5w/aI01YYcwXYQAN2jq8txRAAAACXRSTlMAiJn///////958XqCAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzE2LzE01ApkygAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACwSURBVCiRddOxEYMwDAVQewuVWQIYgBHSpE+TPg21OEBjh8BZFvh/FxT/3tnYklLylR8JLVGUZjPExQzwHSMu/7jhB265nLFCfOdSYoX4yqXGCnHkEmOFuHK5xgpx4XKPFeKTN/jgBc/T/vk6L3jrzJbBue/x/Nj75bGfuHZLH86sfKw4/OA2BMyuwy5Pnoo9LCkDKxopMWsI0j6s2UhrskYmbc+GhIwUG0AyrikH/APKY/axS2D1WwAAAABJRU5ErkJggg==) no-repeat 0 0;-webkit-transform: none;transform: none;} div.gamme:after {content: ""; display: block; position: absolute; top: 0; left: -35%; width: 220%; min-height: 7.5em; z-index: -1; background: #fbf7f3;} div.gamme h2 {position: relative; margin: 0 0 1em; padding: 0 0 1em; color: #013668; font-size: 100%; letter-spacing: .1em; text-transform: uppercase;} div.gamme h2:after {width: 100px; height: 6px; position: absolute; bottom: 0; left: 50%; margin: 0 0 0 -50px;} div.gamme p {/*color: #003567; font-size: 1.143em;*/} div.gamme p:after {content: ""; display: block; position: absolute; bottom: 0; left: -35%; width: 220%; min-height: 7.5em; z-index: -1; background: #fbf7f3;} div.gamme:first-child {margin: -1.425em 0 3em; border: none;} div.gamme:first-child:before {outline: 0;} div.black {margin: 4px 4px 1em; margin: 0; padding: 1em; color: #fff; border: 1px solid #FCF7F3; outline: 4px solid #242424; background: #242424 url(../img/bg-video.jpg) repeat 50% 0;} div.black h2 {position: relative; margin: 0 0 1em; padding: 0 0 1.25em; font-size: 90%; letter-spacing: .1em; color: #fff; font-weight: 300; text-transform: uppercase;text-align: center;} div.black h2:after {width: 100px; height: 6px; position: absolute; bottom: 0; left: 50%; margin: 0 0 0 -50px;} div.black p {margin: 0 0 1em; font-size: 90%; line-height: 130%;} div.black .btn {margin: 0; padding: .25em 2em; font-size: 90%; letter-spacing: .1em; color: #fff; border-color: #fff;} div.black .btn:before {display: none;} div.black .btn:hover {color: #000; background-color: #fff;} #opinel-social-contact-form p.small {margin-top: 1em !important;} figure.node-couteau {border-right: 1px solid #E5E5E5; min-height: 284px;overflow: hidden;} article.node-couteau figure.node-couteau {min-height: 0;} figure.node-couteau figcaption {padding: 0;} figure.node-couteau h2 {position: absolute; bottom: 0; margin: 0 0 .5em; padding: 0 0 0 1em; font-size: 100%; text-align: center; text-transform: uppercase;} figure.node-couteau h2 span {position: relative; display: table; clear: both; margin: 0 0 .1em; padding: 0 0 .1em; line-height: 100% !important; font-size: 150%; line-height: 140%;} figure.node-couteau h2 span span {border-bottom: 2px solid #003567;} figure.node-couteau h2 span sup {/*position: absolute; top: -6em; left: -.8em;*/top: 1.3em; left: -2.1em; font-size: 60%;} figure.node-couteau h2 span span:after {content:""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; margin: 1px 0; background: #013668;} figure.node-couteau.coffret .img-responsive {/*width: 70%; float: left;*/} figure.node-couteau.coffret figcaption {/*position: relative; width: 50%; float: right;*/} figure.node-couteau.coffret h2 {/width: 50%; margin: 0 20px 0 50%; font-size: 200%; line-height: 86%; text-transform: none;} figure.node-couteau.coffret h2 span {margin: 0 0 .75em; padding: 0 2em 1em; line-height: 100%; font-size: 45%; line-height: 140%; text-transform: uppercase; letter-spacing: .2em; border-bottom: none; display: inline-block; width: 90%;} figure.node-couteau.coffret h2 span:after {content:""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; margin: 1px 0;} figure.node-couteau.coffret p {display: none;} figure.node-couteau.col-sm-6 {border: none;} figure.node-couteau.col-sm-6 img {} figure.node-couteau.col-sm-6:before {content:""; display: block; width: 100%; height: 1em;} figure.node-couteau.col-sm-6 h2 {} /* PRODUCT PAGES ................................................................................................................................................... */ body.node-type-couteau #main-content {padding-bottom: 4em;} body.node-type-couteau h1 {margin: 0 0 .4em;} body.node-type-couteau h2 {margin: 0 0 .4em;} body.node-type-couteau p {margin: 0 0 1.7em;} figure.node-couteau img {width: 100%;} figure.node-couteau + div.center {margin: -3.1em 0 6.1em;} /* Intro - Jumbotron */ .container .jumbotron, .container .well {margin: 0 0 .3em; padding: 0; color: #013668; background: none;} .container .well {margin: 0 0 1em; border: none; box-shadow: none;} .container .jumbotron {line-height: 95%;} .container .jumbotron:after {width: 30px; height: 10px; margin: .4em 0 0; background: #013668;} /* Arrow Button */ #main-content .btn-arrow { position: relative; display: inline-block; float: right; width: auto; height: 36px; margin: 0 16px 1em 0; padding: .3em 1em ; text-align: left; color: #013668; font-size: 80%; font-weight: 600; letter-spacing: .1em; border: 4px solid #013668; border-right: none; border-radius: 2px; box-shadow: none; background: #FCF7F3; cursor: pointer; } #main-content .btn-arrow:before, #main-content .btn-arrow:after {content:""; display: inline-block; position: absolute; color: #fff; border-radius: 3px; background: #FCF7F3; } #main-content .btn-arrow:before {width: 26px; height: 26px; top: 1px; right: -12px; border: 4px solid #013668; background: #FCF7F3; } #main-content .btn-arrow:after {width: 23px; height: 22px; position: absolute; top: 3px; right: -7px; /*background: url(../img/bg-arrow-btn.png) no-repeat 0 0;}*/} #main-content .btn-arrow:hover {color: #fff; background-color: #013668; opacity: 1;} #main-content .btn-arrow:hover:before, #main-content .btn-arrow:hover:after {background-color: #013668;} /* Product Carrousel */ #product-carousel {margin: 0 0 4em;} #product-carousel a.resize {position: absolute; top: 1em; right: 1em; color: #fff !important;} #product-carousel a.resize, #product-carousel a.resize:before {width: 33px; height: 33px;} #product-carousel a.resize:before {border: 3px solid #013668;} #product-carousel a.resize i {font-size: 70%; margin: 3px 0 0 4px;} #product-carousel a.resize:hover i {color: #013668;} #product-carousel a.resize:hover:before {background-color: #fff;} #product-carousel .carousel-control {height: 80px; margin-top: -40px; padding: 30px 0; top: 50%;} #product-carousel .carousel-control:hover {color: #013668; background: #fff; background: rgba(250,250,250,.5);} #product-carousel .carousel-inner > .active.left { left: -100%; } #product-carousel .carousel-inner > .next { left: 100%; } #product-carousel .carousel-inner > .prev { left: -100%; } #product-carousel .carousel-inner > .next.left, #product-carousel .carousel-inner > .prev.right {left: 0;} /* Savoir Faire */ section.savoir-faire {margin: 0 4px 1em; padding: 1em 3em; color: #fff; border: 3px solid #fff; outline: 5px solid #040404; background: url(../img/savoir-faire-opinel.jpg) no-repeat 50% 0;} section.savoir-faire h2 {position: relative; margin: 0 0 1.25em; padding: 0 0 1.25em; font-size: 90%; letter-spacing: .2em; color: #fff; font-weight: 300; text-transform: uppercase;} section.savoir-faire h2:after {width: 100px; height: 6px; position: absolute; bottom: 0; left: 50%; margin: 0 0 0 -50px;} section.savoir-faire p {margin: 0 0 2em;} section.savoir-faire .btn {margin: 0 0 -3em; padding: .25em 2em; font-size: 90%; letter-spacing: .1em; color: #fff; border-color: #fff;} section.savoir-faire .btn:before {display: none;} section.savoir-faire .btn:hover {color: #000; background-color: #fff;} /* HISTORY PAGES ................................................................................................................................................... */ #main-content article header figure {text-align: center; color: #fff;} #main-content article header figure figcaption {padding: 2% 5%;} #main-content article header figure h1 {position: relative; margin: 0 0 .5em; padding: 0 0 .5em; font-size: .952em; letter-spacing: .2em; color: #fff;} #main-content article header figure h1:after {width: 180px; height: 6px; position: absolute; bottom: 0; left: 50%; margin-left: -95px;} #main-content article header figure h2 {margin: 0 0 .35em; font-size: 2.25em; line-height: 86%; text-transform: uppercase; color: #fff;} #main-content article header figure p {display: none; padding: 0 2.5%; text-align: justify; font-size: 100%; line-height: 100%;} #main-content article header figure p span {font-size: 1em !important;} .node-story {float: none;} .node-story img {border: 3px solid #fff; outline: 5px solid #040404;} #main-content article.story header {margin: 2em 0; float: none;} #main-content article.story header h1 {position: relative; display: inline-block; margin: 0 0 .25em; padding: 0 0 .25em; font-size: 2.143em; border-bottom: 2px solid #013668;} #main-content article.story header h1:after {content:""; display: block; position: absolute; bottom: 1px; left: 0; width: 100%; height: 1px; margin: 1px 0; background: #013668;} #main-content article.story header h2 {margin: 0 0 .4em; font-size: 2.19em; line-height: 86%;} /* ADVICES PAGES ................................................................................................................................................... */ #fiches-pratiques .row{position: relative; padding: 4.5em 0 3.5em; text-align: center; /*border-bottom: 1px dotted #E5E5E5;*/} #fiches-pratiques .row:before {content:""; display: block; width: 100%; height: 1em; position: absolute; top: 0;} #fiches-pratiques h2 {position: relative; margin: 0 0 .5em; padding: 0 0 .75em; text-transform: uppercase;} #fiches-pratiques h2:after {display: block; content: ""; width: 100px; height: 6px; position: absolute; bottom: 0; left: 50%; margin-left: -50px;} #fiches-pratiques p {font-size: .857em; line-height: 130%; color: #676763;} #fiches-pratiques .img-responsive {border: 1px solid #FCF7F3; outline: 3px solid #013668;} body .main-container.with-ambiance #fiches-pratiques .row:first-child {padding-top: 0.5em;} body .main-container.with-ambiance #fiches-pratiques .row:first-child:before {content:none;} body .main-container .listing .row {position: relative; padding: 4.5em 0 3.5em; text-align: center;} body .main-container .listing .row:before {content:""; display: block; width: 100%; height: 1em; position: absolute; top: 0;} body .main-container .listing h2 {position: relative; margin: 0 0 .5em; padding: 0 0 .75em; text-transform: uppercase;} body .main-container .listing h2:after {content:""; display: block; width: 100px; height: 6px; position: absolute; bottom: 0; left: 50%; margin-left: -50px;} body .main-container .listing p {font-size: .857em; line-height: 130%; color: #676763;} body .main-container .listing .img-responsive {border: 1px solid #FCF7F3; outline: 3px solid #013668;} .node-advice .img-responsive, body.node-type-advice .img-responsive, .node-news .img-responsive, body.node-type-news .img-responsive, .node-savoir-faire .img-responsive, body.node-type-savoir-faire .img-responsive {border: 1px solid #FCF7F3; outline: 3px solid #013668;} body.node-type-advice ul.dropdown-menu .img-responsive, body.node-type-news ul.dropdown-menu .img-responsive, body.node-type-savoir-faire ul.dropdown-menu .img-responsive {outline: none; border: none;} body.node-type-news #menu .img-responsive {border: none; outline: none;} /* EXPERIENCES PAGES ................................................................................................................................................... */ figure.node-experience, figure.node-experience a {color: #fff;} figure.node-experience a:hover {opacity: 1;} figure.node-experience .img-responsive {border: 1px solid #FCF7F3; outline: 3px solid #013668;} figure.node-experience:hover .img-responsive {opacity: .2;} figure.node-experience figcaption {text-align: center; color: #013668; font-weight: 700; text-shadow: 1px 1px 0 #fff; /*background: rgba(255,255,255,.8);*/} /* MAP PAGES ................................................................................................................................................... */ #store_map {height: 520px; border: 1px solid #D2D0D1; box-shadow: 0 0 12px #ddd;} #store_map img {max-width: inherit;} .node-store address {margin-bottom: 0;} .node-store h3 {margin-bottom: 0;} .node-store em {font-size: 0.9em;} #opinel-store-boutiques-form {margin-bottom: 2em; text-align: center; font-size: 90%;} #opinel-store-boutiques-form label {font-size: 90%;} #opinel-store-boutiques-form .form-type-checkbox {text-align: left;} #opinel-store-boutiques-form p.cancel {margin-top: 0.5em; } #opinel-store-boutiques-form p.cancel a {color:#FFF;} div.blue {margin: 4px 4px 1em; margin: 0; padding: 1em; font-size: 90%; color: #fff; border: 1px solid #FCF7F3; outline: 4px solid #013668; background: #013668;} div.blue h2 {position: relative; margin: .5em 0; font-size: 90%; letter-spacing: .1em; color: #fff; font-weight: 300; text-transform: uppercase;text-align: center;} div.blue p {margin: 0 0 1em; font-size: 90%; line-height: 130%;} div.blue .btn {width: 100%; margin: 1em 0; padding: .25em 2em; font-size: 90%; letter-spacing: .1em; color: #fff; border-color: #fff;} div.blue .btn:before {display: none;} div.blue .btn:hover {color: #000; background-color: #fff;} /* ADVERTISING OBJECT PAGES ................................................................................................................................................... */ body.page-articles-publicitaires figure.ambiance {min-height: 17em; background: #222 url(../img/bg-video.jpg) repeat 50% 0;} body.page-articles-publicitaires figure.ambiance img {display: none;} article#articles-publicitaires .col-sm-6 {font-size: 115%;} article#articles-publicitaires .col-sm-6.text-center {margin: 4px 4px 1em; margin: 0; padding: 2em 3em; font-size: 90%; color: #fff; border: 1px solid #FCF7F3; outline: 4px solid #013668; background: #013668;} article#articles-publicitaires .col-sm-6.text-center .btn {width: 100%; margin: 1em 0; padding: .25em 2em; font-size: 90%; letter-spacing: .1em; color: #fff; border-color: #fff;} article#articles-publicitaires .col-sm-6.text-center .btn:before {display: none;} article#articles-publicitaires .col-sm-6.text-center .btn:hover {color: #000; background-color: #fff;} article#articles-publicitaires figure {border-right: 1px solid #e5e5e5;} article#articles-publicitaires figure:nth-child(3n+3) {border-right: none;} article#articles-publicitaires figure figcaption {position: relative;} article#articles-publicitaires figure h2 {position: relative; font-size: 1.5em; text-align: center; text-transform: uppercase; color: #013668;} article#articles-publicitaires figure h2:after {display: none;} #devis h2 {margin: 0 0 .5em; font-size: 180%; text-transform: uppercase;} #devis h3 {color: #013668;} /* SEARCH PAGES ................................................................................................................................................... */ body.page-search #main-content section {/*max-width: 1170px; margin: 0 auto;*/} body.page-search .categorie {padding: .25em .5em; font-size: 85%; background-color: #003869;} body.page-search .container .well {margin: 2em 0; padding: 0 0 .5em; font-style: italic; box-shadow: none; border-bottom: 1px solid #e5e5e5;} #search-form {margin: 0 0 .65em; background: #fff;} #search-form .input-group {width: 100%;} #search-form input.form-text {padding: 7px; color: #504A4C; border: none; box-shadow: none;text-transform: uppercase; font-size: .85em; background: transparent;} #search-form input.form-text::-webkit-input-placeholder {color: #504A4C;} #search-form input.form-text:-moz-placeholder {color: #504A4C;} #search-form input.form-text::-moz-placeholder {color: #504A4C;} #search-form input.form-text:-ms-input-placeholder {color: #504A4C;} #search-form .input-group-btn {width: 30%; font-size: .85em;} #search-form button {width: 100%; padding: .4em .6em; color: #fff; letter-spacing: .1em; color: #013668; border-color: #013668; background: #fff;} #search-form button i {display :none;} #search-form button:hover {color: #fff; background: #013668;} .search-result {margin: 0 0 2em; padding: 0 0 .5em; border-bottom: 1px solid #e5e5e5;} .search-result h3 {margin: 0 0 .5em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;} .search-result p a {display: block; font-weight: 600; letter-spacing: .05em;} /* OTHERS PAGES ................................................................................................................................................... */ figure.node-video figcaption {position: relative; width: 100%; padding: .5em 0; text-transform: uppercase;} #opinel-store-boutiques-form {margin-bottom: 2em; text-align: center; font-size: 90%;} #opinel-store-boutiques-form label {font-size: 90%;} #opinel-store-boutiques-form .form-type-checkbox {text-align: left;} div.blue {margin: 4px 4px 1em; margin: 0; padding: 1em; font-size: 90%; color: #fff; border: 1px solid #FCF7F3; outline: 4px solid #013668; background: #013668;} div.blue h2 {position: relative; margin: .5em 0; font-size: 90%; letter-spacing: .1em; color: #fff; font-weight: 300; text-transform: uppercase;text-align: center;} div.blue p {margin: 0 0 1em; font-size: 90%; line-height: 130%;} div.blue .btn {width: 100%; margin: 1em 0; padding: .25em 2em; font-size: 90%; letter-spacing: .1em; color: #fff; border-color: #fff;} div.blue .btn:before {display: none;} div.blue .btn:hover {color: #000; background-color: #fff;} .social-share-count {margin-top: 3.5em;} .social-share-count i {font-size: 140%;} /* 404 */ #node-3123 p.rtecenter {padding: 0 10%; font-size: 150%; font-style: italic; line-height: 160%; color: #013668;} #node-3123 p.rtecenter + p.rtecenter {font-size: 115%; font-style: normal;} #node-3123 p.rtecenter strong {font-size: 125%;} /** Corrections Drupal **/ html.js input.form-autocomplete {background-image: none;} .at4-share-title {display: none !important;} /* Bottom Contents ................................................................................................................................................... */ /* Block Edito */ .content-bottom-before {position: relative; padding: 2em 0; text-align: center; background-color: #FCF7F3; background-repeat: no-repeat; background-position: 50% 0;} .content-bottom-before:before {top: -1.6em; left: 50%; z-index: +1; margin: 0 0 0 -35px;} .content-bottom-before:after {position: absolute; top: -.5em; left: 50%; z-index: +2; margin: 0 0 0 -11px; color: #fff;} .content-bottom-before.distinction section {padding: 2em; background: #fff; background: rgba(255,255,255,.85);} .content-bottom-before.distinction section:before {content: ""; display: block; position: absolute; top: -5px; left: 10px; right: 10px; bottom: -5px; border: 3px solid #FCF7F3;} .content-bottom-before.distinction section .block-title {display: none;} .content-bottom-before.distinction section h2 {position: relative; padding: 0 0 .5em; font-size: 1.857em; line-height: 100%;} .content-bottom-before.distinction section h2 span {position: relative; display: inline-block; width: 100%; padding: 0 0 .75em; margin: 0 0 .75em; font-size: 50%; letter-spacing: .2em; text-transform: uppercase;} .content-bottom-before.distinction section h2 span:after {width: 179px; height: 6px; position: absolute; bottom: 0; left: 50%; margin: 0 0 0 -80px;} .content-bottom-before.distinction section p {font-size: 85%;} .content-bottom-before.distinction section p {position: relative;} .content-bottom-before.distinction section a {position: absolute; top: -1em; left: 0; width: 100%; text-align: center; z-index: +1;} .content-bottom-before.ducasse {background-image: url(../img/alain-ducasse.jpg);} /* Content-bottom */ .content-bottom {/*background-color: #FCF7F3;*/} .content-bottom .container {padding: 2.5em 0 3.5em;} .content-bottom .container .text-center {position: relative; height: .8em; border-bottom: 1px solid #E5E5E5;} .content-bottom .container .text-center:before {content:""; width: 160px; margin-left: -80px; height: 1px; position: absolute; bottom: -1px; left: 50%; background: #fff;} .content-bottom a.top, .content-bottom a.top:before {width: 35px; height: 35px; left: 50%; margin-left: -17px;} .content-bottom a.top i {font-size: 60%; margin: 3px 0 0 2px;} /* ASIDE ----------------------------------------------------------------------------------------------- */ aside {background-color: #DDD; } /* FOOTER ----------------------------------------------------------------------------------------------- */ footer .logo {background-color: #013668;} /* Footer Social : Newsletter */ footer .social {padding: 0;} footer #block-opinel-social-newsletter h2 {margin: 0; padding: .5em 1em; font-size: 105%; text-transform: uppercase; /*text-align: left;*/ letter-spacing: .2em; background: #F7F7F7;} footer #opinel-social-newsletter-form .input-group {width: 100%;} footer #opinel-social-newsletter-form input.form-text {padding: 1.175em; color: #003869; text-transform: uppercase; font-size: 80%; letter-spacing: .2em; border: 3px solid #003869; border-right: none; box-shadow: none; background: #F7F7F7;} footer #opinel-social-newsletter-form input.form-text::-webkit-input-placeholder {color: #003869; letter-spacing: .2em; } footer #opinel-social-newsletter-form input.form-text:-moz-placeholder {color: #003869; letter-spacing: .2em; } footer #opinel-social-newsletter-form input.form-text::-moz-placeholder {color: #003869; letter-spacing: .2em; } footer #opinel-social-newsletter-form input.form-text:-ms-input-placeholder {color: #003869; letter-spacing: .2em; } footer #opinel-social-newsletter-form .input-group-btn {width: 15%; font-size: .85em;} footer #opinel-social-newsletter-form button.form-submit {width: 100%; padding: .725em .6em; color: #fff; letter-spacing: .1em; background: #003869;} footer #opinel-social-newsletter-form button.form-submit:hover {color: #003869; border-color: #003869; background: #fff;} /* Footer Infos */ footer .infos {border-top: 4em solid #0F1724; background-color: #040B13; color: #FFF;} footer #block-opinel-social-social-list, footer #block-menu-secondary-navigation, footer #block-opinel-tools-domain-nav-2, footer #block-menu-menu-footer {padding: 0;} footer #block-opinel-social-social-list a, footer #block-menu-secondary-navigation .menu a, footer #block-opinel-tools-domain-nav-2 .menu a, footer #block-menu-menu-footer .menu a {color: #fff;} footer #block-opinel-social-social-list a:hover, footer #block-menu-secondary-navigation .menu a:hover, footer #block-opinel-tools-domain-nav-2 .menu a:hover, footer #block-menu-menu-footer .menu a:hover {color: #fff; background: transparent; opacity: .65;} /* Share */ footer #block-opinel-social-social-list {margin: -4.25em 0 2.5em;} footer #block-opinel-social-social-list .text-center {width: 50%; float: left;} #social_list {font-size: 80%; text-align: left;} #social_list li {margin: 0 0 0 2.25em;} #social_list li:first-child {margin: 0;} #social_list li a {padding: .5em .75em; border-radius: 10em; } footer #block-opinel-social-social-list a.share {display: block; margin-top: .25em;} footer #block-opinel-social-social-list a.share span {font-size: 120%;} /* Secondary Menu */ footer #block-menu-secondary-navigation ul {position: relative; margin: 0 0 1.5em; padding: 0 0 1.5em;} footer #block-menu-secondary-navigation ul:after {width: 39px; height: 6px; position: absolute; bottom: 0; left: 50%; margin-left: -20px;} footer #block-menu-secondary-navigation li:before {content:"\002F\0020\0020";} footer #block-menu-secondary-navigation li:first-child:before {content:"";} footer #block-menu-secondary-navigation .menu a {display: inline; padding: .25em; font-size: 110%;} /* Buttons Links to WebSites */ footer #block-opinel-tools-domain-nav-2 li {padding: 0 .5em; width: 33%;} footer #block-opinel-tools-domain-nav-2 .menu a {display: inline-block; width: 100%; padding: .5em 1em .4em; font-size: 90%; line-height: 100%; text-transform: uppercase; letter-spacing: .1em;border: 3px solid #fff;line-height: inherit;} footer #block-opinel-tools-domain-nav-2 .menu a:hover, body.domain-Opinelcom footer #block-opinel-tools-domain-nav-2 li a.active {color: #060A13; background: #fff; opacity: 1;} /* Address */ footer #block-block-1 {margin: .25em 0 0;} footer #block-block-1 h2 {color: #fff; font-size: 110%;} footer #block-block-1 p {margin: 0; font-size: 80%; line-height: 160%;} /* Mentions */ footer #block-menu-menu-footer {margin-top: -1em; font-size: 70%;} footer #block-menu-menu-footer li:before {content:"\007C\0020\0020";} footer #block-menu-menu-footer li:first-child:before {content:"";} footer #block-menu-menu-footer .menu a {display: inline; padding: .25em;} /* Popup Cookies */ #sliding-popup .popup-content #popup-buttons, #sliding-popup .popup-content #popup-text {margin: 1.25em 0;} #sliding-popup .popup-content #popup-text h2 {font-size: 1.2em; font-weight: 300;} #sliding-popup .popup-content #popup-text p {font-size: .9em; font-style: italic; font-weight: 300;} #sliding-popup .popup-content #popup-buttons button {color: #fff; letter-spacing: 0; background: transparent; box-shadow: none; text-shadow: none; border-radius: 0;} #sliding-popup .popup-content #popup-buttons button.agree-button {padding: .75em 2em; font-size: .65em; border: 3px solid #fff;} #sliding-popup .popup-content #popup-buttons button.find-more-button {padding: 0; text-decoration: underline; text-transform: none; font-weight: 300; border: none;} #sliding-popup .popup-content #popup-buttons button.find-more-button::nth-last-word(2) {font-weight: bold;} #sliding-popup .popup-content #popup-buttons button:hover {background: transparent;} #sliding-popup .popup-content #popup-buttons button.agree-button:hover {color: #111E2F; background: #fff;} #sliding-popup .popup-content #popup-buttons button.find-more-button:hover {font-weight: bold;} /*correctif breadcrumbs */ .menu-gamme {display: block; margin: -2.5em 0 0 215px;} .menu-gamme ul.nav li:first-child:before {content:""; display: block; width: 15px; height: 13px; position: absolute; top: .55em; left: 0.3em;} .menu-gamme ul.nav li:first-child a {margin-left: 30px;} .menu-gamme ul.nav li:first-child:before {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANBAMAAACEMClyAAAAA3NCSVQICAjb4U/gAAAAKlBMVEX////8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fRZ+OE+AAAADnRSTlMAESIzRFVmd4iqu8zd/5UCfuoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMDgvMTRQh38EAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAADxJREFUCJljYGBgYHFggACWpVAGg04AlME0DSak1QBlMM4QYLgLAQEwEZiaAqjAMqiAdQKEZl4C02wAJADwOwz9FU5segAAAABJRU5ErkJggg==) no-repeat 0 0;} .menu-gamme ul.nav li a {padding: 7px 8px;} .menu-gamme .breadcrumb>li+li:before {display: none;} /* --------------------------------------------------------------------------------------------------------------------------------------------- RESPONSIVE //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ----------------------------------------------------------------------------------------------------------------------------------------------- */ /* /// PHONES SMALL /// */ @media (max-width: 320px) { body {min-width: 320px; overflow-x: hidden;} figure.vocabulary-gamme h2, #main-content article header figure h2 {font-size: 1em;} } @media (min-width: 240px) and (max-width: 479px) { section#header_bottom .text-center img {width: 190px;} .search-canvas {top: 2em;} #canvas-right {width: 100%; right: -22em;} #main-content .btn-arrow {letter-spacing: 0;} figure.ambiance img {margin-left: -200%} #social_list li {margin: 0;} figure.vocabulary-gamme h2, #main-content article header figure h2 {font-size: 1.25em; /*display: none;*/} #main-content article header figure p {display: none;} footer #opinel-social-newsletter-form .input-group-btn {width: 25%;} } /* /// PHONES MEDIUM /// */ @media (min-width: 480px) and (max-width: 768px) { #social_list li {margin: 0 0 0 2em;} figure.vocabulary-gamme h2, #main-content article header figure h2 {font-size: 1.75em;} figure.ambiance img {margin-left: -100%} } /* /// PHONES ALL /// */ @media (max-width: 768px) { html {overflow-x: hidden; } #main-content {padding: 0 1em;} #header_top, #search-expander, .tooltip, .tooltip-inner {display: none !important;} #canvas-expander {margin: -1em 1em 0 0;} #navbar.affix #canvas-expander {margin: .5em .5em 0 0;} .tooltip {right: -50%; padding: 0; margin: 0 !important;} .tooltip-inner { max-width:300px;} #slideshow {margin: 0 -1em 0.2em;} #slideshow .carousel-inner .item .col-sm-4:first-child, #slideshow .carousel-inner .item .col-sm-4:last-child {display: none;} #slideshow .carousel-caption {position: relative; background: transparent;height:180px; overflow: hidden; margin-bottom: 40px; padding: 0.5em 0.5em 0 0.5em} #slideshow .carousel-caption p {font-size: 0.9em;line-height: 1.2;} #slideshow .carousel-caption h3 {font-size: 1.5em;} #slideshow .carousel-indicators {bottom: 215px;} body.front section.history {margin: 1em -1em; padding: 4em 0 1.2em;} body.front section.history .col-sm-6 {margin-bottom: 4em;} body.front section.videos {margin: 0 -1em;} #social_list_top_display {margin: -.5em 0 1em;} ul#social_list_top {margin: 0 0 1em;} .social-share-count {min-height: 5.5em;} .container {padding: 0;} figure.vocabulary-gamme {margin: 0 -1em 1em -1em; width: auto;} #main-content article header {margin: 0em 0 1em 0; width: 100%;} figure.vocabulary-gamme figcaption, #main-content article header figure figcaption {padding: 5% 5% 5% 5%;} div.black {margin-bottom: 2em;} figure.node-couteau {border: none; padding: 0;} figure.node-couteau.coffret figcaption {position: relative;} figure.node-couteau.coffret .img-responsive {width: 100%; float: none;} figure.node-couteau.coffret h2 {position: relative; margin: 0; padding: 0;} figure.node-couteau.coffret h2 span {width: 60%; margin: 0 20% .75em;} figure.node-couteau + div.center {display: none;} body.node-type-couteau h1 {font-size: 2.3em;} .conseil.col-sm-3 {width: 45%; float: left;margin: 4px 5% 1em 0;} figure.node-couteau.col-sm-3 {width: 50%; float: left;} figure.node-couteau.col-sm-6 {width: 100%; display: block; clear: both;} #main-content article.story header:before {display: none;} section.savoir-faire {margin: 0 4px 4em;} #fiches-pratiques h2 {margin: 1.25em;} #opinel-store-boutiques-form {margin-top: 2em;} .content-bottom-before {padding: 4em 0;} div.black .btn { padding: .25em 1em;} footer #block-opinel-social-newsletter .col-sm-6 {margin: .5em 0;} footer .infos {border-top: 7em solid #0F1724;} footer #block-opinel-social-social-list {margin: -7em 0 4em;} footer #block-opinel-social-social-list .text-center {width: 100%;} footer .infos {border-top: 6em solid #0F1724;} #social_list {text-align: center;} footer #block-opinel-tools-domain-nav-2 .menu li {margin-bottom: 1em; width: 100%;} } /* /// TABLETTES //////////////////////////////////////////////////////////////////////////////////////////////////// */ @media (min-width: 768px) and (max-width: 992px) { ol.breadcrumb {display: block; margin-left: 180px;} .conseil.col-sm-3 {width: 50%; height: 344px;} figure.node-couteau.col-sm-3 {width: 50%;} figure.node-couteau.col-sm-6 {width: 100%;} .navbar-default .navbar-nav > li > a {font-size: 82%; padding: .4em .4em .3em; display: inline-block;} section.savoir-faire {margin: 0 4px 4em;} .content-bottom-before {padding: 4em 0;} #stores .col-sm-9, #stores .col-sm-3 {width: 100%;} #store_map {margin: 0 0 1.75em;} figure.ambiance img {margin-left: -60%} figure.node-couteau.coffret h2 span {width: 90%; margin: 0 5% 0.75em;} footer #opinel-social-newsletter-form .input-group-btn {width: 30%;} footer .infos {border-top: 7em solid #0F1724;} footer #block-opinel-social-social-list {margin-top: -7em;} footer #block-opinel-social-social-list .text-center {width: 100%;} #social_list {text-align: center;} footer #block-opinel-tools-domain-nav-2 .menu li {width: 32.5%;} } @media (min-width: 768px) { #canvas-right #block-menu-block-1 {display: none;} #slideshow .carousel-control {display: block; z-index: +10; top: 50%; width: 2.25em; height: 2.5em; margin-top: -1.25em; font-size: 200%; color: #fff; background: rgba(250,250,250,.3);} #slideshow .carousel-control i {display: block; margin-top: .6em;} #slideshow .carousel-control.left i {} #slideshow .carousel-control.right i {margin-left: .1em;} #slideshow .carousel-indicators {display: none;} body.front section.history {min-height: 692px; margin: -7em 0 0; padding: 7em 0 1.2em; background: #CDB092 url(../img/bg-kraft3.jpg) repeat 50% 0;} /* Story */ .menu-story ul.nav li a {font-size: 70%; padding: .1em .3em } .menu-story ul.nav li:first-child a, .menu-story ul.nav li:last-child a {font-size: 85%;} .menu-story ul.nav li.active a {font-size: 100%;} #history .entry {position: relative;} #history .entry:before {content:""; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 50%;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAYAAACEhIafAAAAEklEQVQIW2NkME3/z8gABGgEACLsAaF2cneQAAAAAElFTkSuQmCC) repeat-y 0 0;} #main-content article.story {display: table; margin: 0 0 2.5em;} #main-content article.row:nth-child(odd) {} #main-content article.row:nth-child(even) {} .node-story {width: 50%; display: table-cell; padding: 0 8% 0 0; vertical-align: middle;} .node-story.col-sm-push-6 {padding: 0 0 0 8%;} #main-content article.story header {width: 50%; position: relative; display: table-cell; padding: 0 0 0 8%; vertical-align: middle;} #main-content article.story header.col-sm-pull-6 {padding: 0 8% 0 0; text-align: right;} #main-content article.story header:before {z-index:0; width: 20px; height: 20px; top: 50%; left: 0; margin: -10px 0 0 -10px;} #main-content article.story header.col-sm-pull-6:before {left: 98.25%; margin: -10px -10px 0 0;} /* /// Story */ a#social_list_top_display {margin-top: .5em; text-align: right;} ul#social_list_top {position: absolute; width: 200%; top: -.5em; left: -100%; padding: .5em 0 5.5em; text-align: right; background: /*#FCF7F3*/#fff; } figure.vocabulary-gamme {/*margin-top: -1.2em;*/} figure.vocabulary-gamme p, #main-content article header figure p {display: block;} } /* /// TABLETTES MEDIUM//////////////////////////////////////////////////////////////////////////////////////////////////// */ @media (min-width: 992px) { figure.vocabulary-gamme h1, #main-content article header figure h1 {margin: 0 0 1em; padding: 0 0 1em;} figure.vocabulary-gamme h2, #main-content article header figure h2 {font-size: 2.857em} figure.vocabulary-gamme p, #main-content article header figure p {padding: 0 10%; /*font-size: 115%;*/} .navbar-default .navbar-nav > li > a {padding: .4em .65em;} .menu-story ul.nav li a {font-size: 85%; padding: .2em .5em } .menu-story ul.nav li:first-child a, .menu-story ul.nav li:last-child a {font-size: 90%;} .menu-story ul.nav li.active a {font-size: 100%;} article#articles-publicitaires .col-sm-6.text-center {padding: 2em 6em;} #block-opinel-social-newsletter {padding-left: 20%; padding-right: 20%;} figure.ambiance img {margin-left: -20%} /*.menu-gamme {display: block; float: left; margin: -3.15em 0 0 560px;} .menu-gamme {display: block; float: right; margin: -3.15em -250px 0 0;}*/ /*.menu-gamme {display: block; margin: -2.5em 0 0 215px;}*/ .menu-gamme ul.nav {margin: 0;} .menu-gamme ul.nav li:first-child {position: relative;} /*.menu-gamme ul.nav li:first-child:before {content:""; display: block; width: 15px; height: 13px; position: absolute; top: .55em; left: 0.3em;}*/ .menu-gamme ul.nav li:first-child a {margin-left: 30px;} .menu-gamme ul.nav li:first-child:before {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANBAMAAACEMClyAAAAA3NCSVQICAjb4U/gAAAAKlBMVEX////8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fRZ+OE+AAAADnRSTlMAESIzRFVmd4iqu8zd/5UCfuoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMDgvMTRQh38EAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAADxJREFUCJljYGBgYHFggACWpVAGg04AlME0DSak1QBlMM4QYLgLAQEwEZiaAqjAMqiAdQKEZl4C02wAJADwOwz9FU5segAAAABJRU5ErkJggg==) no-repeat 0 0;} } body.taxo-gamme ol.breadcrumb {margin: -5.25em 0 0 220px;} body.taxo-gamme .breadcrumb .active {border: none;} #breadcrumb-container {width: 100%;} body.taxo-gamme #breadcrumb-container>.col-sm-12 {margin-top: -3.25em; padding-left: 200px;padding-right: 80px;} .menu-gamme {margin: 0;} body.taxo-gamme ol.breadcrumb {margin: 0;height: 27px;min-height: inherit;max-height: inherit;} /* /// DESKTOP ////////////////////////////////////////////////////////////////////////////////////////////////////// */ @media (min-width: 1200px) { .menu-gamme ul.nav li a {padding: 4px 15px 5px 15px;} .menu-gamme ul.nav li:first-child a {margin-left: 30px;} .menu-gamme ul.nav li:first-child:before {left: 0.3em;} .navbar-default .navbar-nav > li > a {padding: .4em 1.8em;} body.front section.history h2, body.front section.history p, body.page-la-marque-fiches-pratiques #main-content article p {padding: 0 15%;} section.advices figure p {padding: 0 5%;} /* Menu Story */ body.page-node-2787 .breadcrumb li {display: none;} body.page-node-2787 .breadcrumb li.last {display: inline-block; border: none;} body.page-node-2787 .breadcrumb li.last:before {display: none !important;} body.page-node-2787 .breadcrumb li.last:after {content:""; display: block; width: 15px; height: 13px; position: absolute; top: .6em; left: 110%;} .menu-story {display: block; position: relative; width: 630px; margin: -3.05em 0 0 400px} .menu-story:before {} .menu-story ul.nav {position: relative;float: left; margin: 0; font-size: 50%; color: #fff; text-align: center; text-transform: uppercase; background: transparent;} .menu-story ul.nav:after {content: ""; display: block; width: 100%; height: 1px; margin: -1.5em 0 0;} .menu-story ul.nav li {display: inline-block; float: none;} .menu-story ul.nav li:before {display: none;} .menu-story ul.nav li a {display: block !important; margin-top: -1em; padding: .4em; font-size: 70%;} .menu-story ul.nav li:first-child a, .menu-story ul.nav li:last-child a {margin: 0; font-weight: 700; font-size: 130%; color: #fff; background: #013668 !important;} .menu-story ul.nav li.active a {padding: .35em 1em; font-size: 130%; color: #fff !important; border: 1px solid #fff !important; background: #013668 !important;} .menu-story ul.nav li:first-child a:before, .menu-story ul.nav li:last-child a:after {content: ""; display: block; width: 12px; height: 12px; position: absolute; top: .7em; left: -1.25em;} .menu-story ul.nav li:last-child a:after {left: 120%;} body.page-node-2787 .breadcrumb li.last:after {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANBAMAAACEMClyAAAAA3NCSVQICAjb4U/gAAAAKlBMVEX////8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fT8+fRZ+OE+AAAADnRSTlMAESIzRFVmd4iqu8zd/5UCfuoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMDgvMTRQh38EAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAADxJREFUCJljYGBgYHFggACWpVAGg04AlME0DSak1QBlMM4QYLgLAQEwEZiaAqjAMqiAdQKEZl4C02wAJADwOwz9FU5segAAAABJRU5ErkJggg==) no-repeat 0 0;} .menu-story ul.nav:after {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAYAAAAW/mTzAAAAFElEQVQIW2P88/PLfxZ2HkYGJAAAScoEAgM3oA8AAAAASUVORK5CYII=) repeat-x 0 0;} .menu-story ul.nav li:first-child a:before, .menu-story ul.nav li:last-child a:after {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAAA3NCSVQICAjb4U/gAAAADFBMVEX////9+PL9+PL9+PKPt9X+AAAABHRSTlMAiJn/0TTyfAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8wOC8xNFCHfwQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAALElEQVQImWNgkGBgYKhjYGD838DA/v8Bg/z/Hwz1//+BMYgNEgPJgdQA1QIAlX8RHVFsPbQAAAAASUVORK5CYII=) no-repeat 0 0;} /* /// Menu Story */ #slideshow .carousel-inner {margin: 0 /*-88%*/ -55%;} #main-content .btn-arrow {padding: .3em 2em;} figure.vocabulary-gamme figcaption, #main-content article header figure figcaption {padding: 5% 10%;} figure.vocabulary-gamme h2, #main-content article header figure h2 {font-size: 3.381em} figure.vocabulary-gamme p, #main-content article header figure p {padding: 0 20%;} figure.node-couteau.coffret h2 span { /*margin: 0 15% .75em;*/ } #store_map {height: 472px;} #social_list li {margin: 0 0 0 3em;} } @media (min-width: 1200px) and (max-width: 1218px) { body {overflow-x: hidden;} } @media (max-width: 1280px) { figure {max-width: 1280px; overflow-x: hidden;} div.gamme:after, div.gamme p:after{display: none;} } @media (min-width: 1440px) { #slideshow .carousel-inner {margin: 0 /*-74%*/ -50%;} figure.ambiance img {margin-left: 0} } @media (min-width: 1600px) { #slideshow .carousel-inner {margin: 0 /*-55%*/-45%;} figure.vocabulary-gamme h2 {padding: 0 15%;} } /* --------------------------------------------------------------------------------------------------------------------------------------------- PRINT //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ----------------------------------------------------------------------------------------------------------------------------------------------- */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a,a:visited { text-decoration: underline;} a[href]:after {content: " (" attr(href) ")";} abbr[title]:after {content: " (" attr(title) ")";} .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content: "";} pre,blockquote {border: 1px solid #999;page-break-inside: avoid;} thead { display: table-header-group; /* h5bp.com/t */} tr,img {page-break-inside: avoid;} img {max-width: 100% !important;} @page {margin: 0.5cm;} p,h2,h3 {orphans: 3;widows: 3;} h2,h3 { page-break-after: avoid;} } /* --------------------------------------------------------------------------------------------------------------------------------------------- CROSS BROWSER AJUSTEMENTS FOR WEBKIT / MSIE 11 / 10 / 9 / 8 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ----------------------------------------------------------------------------------------------------------------------------------------------- */ /*WEBKIT (chrome + safari) */ @media screen and (-webkit-min-device-pixel-ratio:0) { } /* MSIE 10-11 */ @media all and (-ms-high-contrast:none) { /**::-ms-backdrop, h1 { color: red !important } /* IE11 */ #opinel-social-newsletter-form input.form-text {line-height: 30%; padding: 1.4em} } /* MSIE 10 */ /* MSIE 9 */ .ie9 {box-shadow: 0px 15px 20px #CCC\0;} #opinel-social-newsletter-form input.form-text {line-height: 30%\0; padding: 1.4em\0} /* MSIE 8 */ .lt-ie9 {} .placeholdersjs {color: #19171B;} /* WYSIWYG code Tableau mobile */ table#t-repr { border-top:1px solid #e5eff8; border-right:1px solid #e5eff8; margin:1em 2em; border-collapse:collapse; } table#t-repr tr { background-color: #fff; padding: 10px; } table#t-repr tr.odd { background:#f7fbff } table#t-repr th { border-bottom:1px solid #e5eff8; border-left:1px solid #e5eff8; padding:.3em 1em; text-align:left; font-weight: 100; } table#t-repr td { border-bottom:1px solid #e5eff8; border-left:1px solid #e5eff8; padding:.3em 1em; text-align:left; } .webks-responsive-table dl { margin: 10px 0 10px 0; } .webks-responsive-table dt { padding: 15px 10px; background-color:#F2F2F2; display: block; width: 100%; } .webks-responsive-table dd { margin: 0 0 10px 0; padding: 15px 10px; display: block; } /* WYSIWYG hover a */ .node-page .entry a{ color: #065aaa; position: relative; padding-bottom: 3px } .node-page .entry a:hover{ color:#044888; } .node-page .entry a::after{ border-bottom:1px solid #044888; position: absolute; bottom: 0px; left: 0px; width: 100%; content: ""; transform:scale(0, 1); transition:all 0.3s ease; } .node-page .entry a:hover::after{ transform:scale(1); }