/* Minification failed. Returning unminified contents. (3567,18): run-time error CSS1030: Expected identifier, found '.' (3567,34): run-time error CSS1031: Expected selector, found ')' (3567,34): run-time error CSS1025: Expected comma or open brace, found ')' (3750,11): run-time error CSS1030: Expected identifier, found '>' (3750,33): run-time error CSS1031: Expected selector, found ')' (3750,33): run-time error CSS1025: Expected comma or open brace, found ')' (3757,13): run-time error CSS1030: Expected identifier, found '>' (3757,35): run-time error CSS1031: Expected selector, found ')' (3757,35): run-time error CSS1025: Expected comma or open brace, found ')' (3787,11): run-time error CSS1030: Expected identifier, found '>' (3787,25): run-time error CSS1031: Expected selector, found ')' (3787,25): run-time error CSS1025: Expected comma or open brace, found ')' (3791,13): run-time error CSS1030: Expected identifier, found '>' (3791,27): run-time error CSS1031: Expected selector, found ')' (3791,27): run-time error CSS1025: Expected comma or open brace, found ')' (6387,26): run-time error CSS1030: Expected identifier, found '>' (6387,35): run-time error CSS1031: Expected selector, found ')' (6387,35): run-time error CSS1025: Expected comma or open brace, found ')' (6390,40): run-time error CSS1030: Expected identifier, found '>' (6390,49): run-time error CSS1031: Expected selector, found ')' (6390,49): run-time error CSS1025: Expected comma or open brace, found ')' (7735,28): run-time error CSS1030: Expected identifier, found '#btnDelFavori' (7735,64): run-time error CSS1031: Expected selector, found ')' (7735,64): run-time error CSS1025: Expected comma or open brace, found ')' (8534,9): run-time error CSS1030: Expected identifier, found '.' (8534,33): run-time error CSS1031: Expected selector, found ')' (8534,33): run-time error CSS1025: Expected comma or open brace, found ')' (9150,45): run-time error CSS1030: Expected identifier, found '.' (9150,66): run-time error CSS1031: Expected selector, found ')' (9150,66): run-time error CSS1025: Expected comma or open brace, found ')' */ /* Magic Zoom Plus v5.3.7 Copyright 2021 Magic Toolbox Buy a license: https://www.magictoolbox.com/magiczoomplus/ License agreement: https://www.magictoolbox.com/license/ */ /** * Core styles */ .MagicZoom, .mz-figure, .mz-lens, .mz-zoom-window, .mz-loading, .mz-hint, .mz-expand .mz-expand-stage, .mz-expand .mz-expand-stage .mz-image-stage, .mz-expand .mz-expand-stage .mz-image-stage .mz-caption, .mz-thumb img, .mz-expand-thumbnails, .mz-expand-controls, .mz-button { -webkit-box-sizing: border-box; box-sizing: border-box; } .MagicZoom, .mz-figure { display: inline-block; outline: 0 !important; font-size: 0 !important; line-height: 100% !important; direction: ltr !important; position: relative; z-index: 1; margin: 0 auto; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .MagicZoom { -webkit-transform: translate3d(0,0,0); -ms-touch-action: pan-y; touch-action: pan-y; } figure.mz-figure { overflow: hidden; margin: 0 !important; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .MagicZoom img, .mz-figure img { border: 0 !important; margin: 0 !important; outline: 0 !important; padding: 0 !important; } .MagicZoom > img, .mz-figure > img { width: 100%; height: auto; } .ie8-magic .MagicZoom > img, .ie8-magic .mz-figure > img { width: 100%; max-width: none !important; } .mz-figure.mz-no-zoom.mz-no-expand, .mz-expand .mz-figure.mz-no-zoom { cursor: default !important; } .mz-figure.mz-active, .mz-expand { -ms-touch-action: none; touch-action: none; } .mz-lens, .mz-zoom-window { position: absolute !important; overflow: hidden !important; pointer-events: none !important; } .mz-lens img, .mz-zoom-window img { position: absolute !important; max-width: none !important; max-height: none !important; } .mz-lens img { -webkit-transition: none !important; transition: none !important; } .mz-zoom-window { z-index: 2000000000; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .mz-zoom-window.mz-magnifier { -webkit-mask-image: -webkit-radial-gradient(circle, white, black); -webkit-mask-clip: content; cursor: none; } .mz-figure.mz-active .mz-zoom-window.mz-magnifier { pointer-events: auto !important; cursor: inherit !important; } .mz-zoom-window.mz-magnifier.mz-expanded { z-index: 2147483647; } .mz-zoom-window img { width: auto; height: auto; left: -1000%; right: -1000%; top: -1000%; bottom: -1000%; margin: auto !important; -webkit-transition: none !important; transition: none !important; -webkit-transform-origin: 50% 50% !important; -ms-transform-origin: 50% 50% !important; transform-origin: 50% 50% !important; } .mz-zoom-window.mz-preview img { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; width: 100% !important; height: auto !important; -webkit-transform: none !important; transform: none !important; } .lt-ie9-magic .mz-zoom-window img { margin: 0 !important; } .mz-expand-controls { z-index: 2147483647; } .mz-fade { -webkit-transition: opacity .25s; transition: opacity .25s; } .mz-hidden { opacity: 0; } .mz-visible { opacity: 1; } .mobile-magic .mz-expand .mz-expand-bg { -webkit-transform-style: flat !important; transform-style: flat !important; } .mobile-magic .mz-expand-controls.mz-fade { transition: none !important; } .mobile-magic .mz-expand > .mz-zoom-window { top: 0 !important; left: 0 !important; } @media not screen and (max-device-width: 767px) { .mz-expanded-view-open, .mz-expanded-view-open body { overflow: hidden !important; } .mz-expanded-view-open body { height: auto !important; } } @media screen and (max-device-width: 767px) { :root.mz-expanded-view-open:not(.ios-magic):not([data-magic-ua=safari]), :root.mz-expanded-view-open:not(.ios-magic):not([data-magic-ua=safari]) body { overflow: hidden !important; } :root.mz-expanded-view-open:not(.ios-magic):not([data-magic-ua=safari]) body { height: auto !important; } } /** * Main figure */ .mz-figure.mz-active { background: #fff; } .mz-figure.mz-no-zoom, .mz-figure.mz-click-zoom, .mz-figure.mz-active { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mz-figure.mz-active.mz-no-expand { cursor: crosshair; } .mz-figure.mz-active.mz-click-zoom.mz-no-expand { cursor: crosshair; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } .mz-figure.mz-active.mz-magnifier-zoom.mz-hover-zoom.mz-no-expand { cursor: none; } .mz-figure.mz-magnifier-zoom.mz-active { overflow: visible !important; } .mz-figure.mz-active > img { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(80%) opacity(60%); filter: grayscale(80%) opacity(60%); } .no-cssfilters-magic .mz-figure.mz-active > img { opacity: 0.6; } .lt-ie10-magic .mz-figure.mz-active > img { opacity: 1; filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1,opacity=0.6); } .mz-expand .mz-figure.mz-active.mz-inner-zoom, :not(.mz-expand) .mz-figure.mz-active.mz-inner-zoom > img { opacity: 0; } .lt-ie10-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom, .lt-ie10-magic .mz-figure.mz-active.mz-inner-zoom > img { filter: alpha(opacity=0); } .ie9-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom { background: transparent; } /** * Zoom lens */ .mz-lens { border: 1px solid #aaa; border-color: rgba(170,170,170,0.7); box-shadow: 0 0 5px rgba(0,0,0,.3); cursor: none; z-index: 10; opacity: 0; } .mz-figure.mz-active .mz-lens { opacity: 1; -webkit-transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s; transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s; } .mz-figure.mz-active.mz-magnifier-zoom .mz-lens { border-radius: 50%; opacity: 0; cursor: none; } /** * Zoom window */ .mz-zoom-window { background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .2); } .mz-zoom-window.mz-magnifier { border-radius: 100%; border: 0; background: rgba(255,255,255,.3); } .mz-zoom-window.mz-magnifier:before { content: ""; display: block; position: absolute; top: 0;bottom: 0; left: 0; right: 0; border-radius: 100%; border: 1px solid rgba(170,170,170,0.7); box-shadow: inset 0 0 20px 1px rgba(0,0,0,.3); background: transparent; z-index: 1; } .mz-zoom-window.mz-magnifier.mz-square, .mz-zoom-window.mz-magnifier.mz-square:before { border-radius: 0 !important; } .lt-ie9-magic .mz-zoom-window { border: 1px solid #e5e5e5; } .mz-zoom-window.mz-inner { border: none; box-shadow: none; } .mz-zoom-window.mz-inner:not(.mz-expanded) { z-index: 80; } /* Caption in zoom window */ .mz-zoom-window .mz-caption { background: #777; color: #fff; font-size: 10pt; opacity: 0.8; position: absolute; top: 0; z-index: 150; padding: 3px; width: 100%; line-height: normal !important; text-align: center !important; } .lt-ie9-magic .mz-zoom-window .mz-caption { filter: alpha(opacity=80); } .mz-zoom-window.caption-bottom .mz-caption { top: auto; bottom: 0; } .mz-zoom-window.mz-expanded > .mz-caption { display: none; } /* Zoom window animations */ .mz-zoom-window.mz-deactivating, .mz-zoom-window.mz-activating { -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } .mz-zoom-window.mz-deactivating { -webkit-transition-duration: .25s, .25s, .25s; transition-duration: .25s, .25s, .25s; } .mz-zoom-window.mz-p-right, .mz-zoom-window.mz-p-left, .mz-zoom-window.mz-p-top, .mz-zoom-window.mz-p-bottom { opacity: 0; z-index: -100; } .mz-zoom-window.mz-p-right { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } .mz-zoom-window.mz-p-left { -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } .mz-zoom-window.mz-p-top { -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } .mz-zoom-window.mz-p-bottom { -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0); } /* Inner mode animation */ .mz-zoom-window > img { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mz-zoom-window.mz-p-inner.mz-deactivating > img, .mz-zoom-window.mz-p-inner.mz-activating > img { -webkit-transition: -webkit-transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9) !important; transition: transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9) !important; } /* Magnifier mode animation */ .mz-zoom-window.mz-p-magnifier { -webkit-transform: scale(.1); transform: scale(.1); } /* Preview mode animation */ .mz-zoom-window.mz-preview.mz-deactivating, .mz-zoom-window.mz-preview.mz-activating, .mz-zoom-window.mz-custom.mz-deactivating, .mz-zoom-window.mz-custom.mz-activating { -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } .mz-zoom-window.mz-preview.mz-deactivating, .mz-zoom-window.mz-custom.mz-deactivating { -webkit-transition-duration: .2s; transition-duration: .2s; } .mz-zoom-window.mz-p-preview, .mz-zoom-window.mz-p-custom { opacity: 0; } /** * Hint & Loading */ .mz-hint, .mz-loading { color: #eee; background: rgba(49,51,61,0.7); font: normal 12px/1.2em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif; text-decoration: none; text-align: center; direction: ltr; display: inline-block; margin: 0; position: absolute; z-index: 1000; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .mz-hint { bottom: 8px; left: 0; right: 0; padding: 0 10%; background-color: transparent; -webkit-transition: opacity 0.4s ease, z-index 0.4s ease; transition: opacity 0.4s ease, z-index 0.4s ease; } .mz-hint-message { display: inline-block; background: rgba(49,51,61,0.7); border-radius: 2em; padding: .7em 1.1em; } .mz-hint-message:before { content: '\02295'; font-family: serif; font-size: 1.5em; speak: none; text-align: center; vertical-align: -2px; margin-right: 6px; } .mobile-magic .mz-hint-message:before { display: none; } .mz-hint-hidden { opacity: 0; z-index: -1; -webkit-transition-delay: .6s; transition-delay: .6s; } /* Hint in the expanded view on mobile */ .mz-expand .mz-hint { font-size: 18px; line-height: 1.1em; top: 50%; bottom: auto; margin: 0; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); } .mz-expand .mz-hint-message { padding: 1.1em; } .mz-expand .mz-hint-message:before { display: none; } .mz-expand .mz-hint-hidden { opacity: 0; -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } /* Loading indicator */ .mz-loading { font-size: 0; border-radius: 100%; opacity: 0; padding: 0; width: 36px; height: 36px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .mz-loading:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 24px; height: 24px; margin: auto; text-indent: -9999em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 1); border-top-color: transparent; box-sizing: border-box; } .mz-loading.shown { opacity: 1; z-index: 1; -webkit-transition: opacity 0s; transition: opacity 0s; } .mz-loading.shown:after { -webkit-animation: spin-loading .9s infinite linear; animation: spin-loading .9s infinite linear; } @-webkit-keyframes spin-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .lt-ie10-magic .mz-loading { border-radius: 2em; font-size: 12px; padding: .7em 1.1em; width: auto; height: auto; } .lt-ie10-magic .mz-loading:after { content: 'Loading...'; text-indent: 0; border: none; position: relative; } .lt-ie9-magic .mz-loading { filter: alpha(opacity=0); right: 0; left: 0; width: 126px; margin: auto; } .lt-ie9-magic .mz-hint-message, .lt-ie9-magic .mz-loading.shown { background: transparent !important; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c31333D', EndColorStr='#7c31333D'); } .lt-ie9-magic .mz-hint-hidden { filter: alpha(opacity=0); } /** * Expanded view */ .mz-expand, .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > img, .mz-expand .mz-expand-bg > svg, .mz-expand .mz-expand-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > img, .mz-expand .mz-expand-bg > svg { width: auto !important; height: auto !important; } .mz-expand .mz-expand-bg, .mz-expand .mz-expand-bg > svg { min-width: 100% !important; min-height: 100% !important; } .mz-expand { background-color: rgba(0, 0, 0, 1); text-align: center; vertical-align: middle; display: block; overflow: hidden; z-index: 2100000000; position: fixed; width: auto; height: auto; -webkit-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-overflow-style: none; } /* Expanded view background */ .mz-expand .mz-expand-bg { display: inline-block; max-width: none !important; max-height: none !important; margin: auto; vertical-align: middle; z-index: -100; background-repeat: no-repeat; background-size: cover; -webkit-perspective: 600px; perspective: 600px; -webkit-transform: translate3d(0, 0, 0) scale(7) rotate(0.01deg); transform: translate3d(0, 0 ,0) scale(7) rotate(0.01deg); } .mz-expand .mz-expand-bg > img { margin: auto; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mz-expand .mz-expand-bg > img { filter: url("data:image/svg+xml;utf8,#blur"); -webkit-filter: blur(20px) brightness(60%); filter: blur(20px) brightness(60%); } .mz-expand .mz-expand-bg > svg { margin: auto; opacity: .6; } [data-magic-ua=edge] .mz-expand .mz-expand-bg, .lt-ie10-magic .mz-expand .mz-expand-bg { display: none !important; } .lt-ie9-magic .mz-expand { background: #1f1f1f; } [data-magic-ua=edge] .mz-expand { background-color: rgba(31, 31, 31, .96); } /** Plain backgrounds: dark-bg, white-bg **/ .mz-expand.plain-bg .mz-expand-bg, .mz-expand.dark-bg .mz-expand-bg, .mz-expand.white-bg .mz-expand-bg { display: none !important; } .mz-expand.dark-bg { background-color: #1f1f1f; background-color: rgba(31, 31, 31, .96); } .mz-expand.white-bg { background-color: #fff; } /* Expanded view stage */ .mz-expand .mz-expand-stage { display: flex; flex-direction: column; padding: 0; z-index: 2100000000; } .mz-expand .mz-expand-stage .mz-image-stage { display: flex; flex-direction: column; flex: 1 1; position: relative; margin: 0; padding: 20px 0; overflow: hidden; text-align: center; vertical-align: middle; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage { padding: 0 !important; left: 0; right: 0; } .mz-expand .mz-image-stage > figure { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1 1; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; font-size: 0; overflow: hidden; } .mz-expand .mz-figure { max-width: 100% !important; overflow: visible; } .mz-expand .mz-figure > img { max-width: 100%; width: auto; height: auto; } .mz-expand .mz-zoom-in .mz-image-stage > figure, .mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-activating, .mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active { flex: 1 0; width: 100%; height: 100%; } .mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active > img { pointer-events: none; } .mz-expand .mz-figure { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mz-expand .mz-figure.mz-active { cursor: crosshair; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } /* When inner zoom is always shown */ .mz-expand .mz-expand-stage.mz-zoom-in.mz-always-zoom .mz-image-stage > figure > figure > img { z-index: 1; position: absolute !important; top: -5000px !important; bottom: -5000px !important; left: -5000px !important; right: -5000px !important; margin: auto !important; } .lt-ie10-magic .mz-zoom-window.mz-expanded img { filter: alpha(opacity=100); } .lt-ie10-magic .mz-expand .mz-figure.mz-magnifier-zoom { overflow: hidden; filter: alpha(opacity=100); } /* Caption in expanded view */ .mz-expand .mz-caption { flex: 0 0; color: #fff; text-shadow: 0px 0px 46px #000; padding: 10px 30px; font: normal 10pt/1.25 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: center; width: 100%; opacity: 0; } .mz-expand .mz-caption.mz-show { -webkit-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; opacity: 1; } .mz-expand .mz-zoom-in .mz-image-stage .mz-caption { display: none; } .mz-expand .mz-caption a { color: inherit; cursor: pointer; } .mz-expand.white-bg .mz-caption { color: #555; text-shadow: none; } .lt-ie9-magic .mz-expand .mz-caption { top: 100%; } .mz-expand .mz-zoom-window { box-shadow: none; background: transparent; } .lt-ie9-magic .mz-expand .mz-zoom-window { border: 0; } /* Expanded view on mobile */ @media screen and (max-device-width: 767px) { .mobile-magic .mz-expand .mz-image-stage .mz-caption { display: none !important; } } /** * Buttons & Arrows */ .mz-nav-controls, .mz-expand-controls, button.mz-button { margin: 0 !important; padding: 0 !important; outline: 0 !important; } .mz-nav-controls { z-index: 2100000000; } button.mz-button { color: rgba(180, 180, 180, .6) !important; font-size: 0; cursor: pointer; z-index: 2100000000 !important; background-color: transparent !important; border: 0 solid transparent !important; border-radius: 100% !important; box-shadow: none !important; position: absolute !important; text-transform: none !important; text-align: center; speak: none; width: 60px !important; height: 60px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; -webkit-transition: color .25s, background-color .25s !important; transition: color .25s, background-color .25s !important; } button.mz-button:before { display: block; position: static; height: 100%; transform: scale(.9); -webkit-transition: -webkit-transform .25s !important; transition: transform .25s !important; } :root:not(.mobile-magic) button.mz-button:hover, button.mz-button:active { color: rgba(180, 180, 180, 1) !important; } button.mz-button:active:before { -webkit-transform: scale(.7) !important; transform: scale(.7) !important; } .mobile-magic .mz-expand button.mz-button:active { background-color: rgba(49, 51, 61, .7) !important; } button.mz-button.mz-button-prev, button.mz-button.mz-button-next { margin: auto 10px !important; top: 0 !important; bottom: 0 !important; overflow: hidden !important; } button.mz-button.mz-button-prev { left: 0 !important; transform: rotateZ(180deg) !important; } button.mz-button.mz-button-next { right: 0 !important; } button.mz-button.mz-button-close { margin: 10px !important; top: 0 !important; right: 0 !important; z-index: 95 !important; } button.mz-button.mz-button-close:before { content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNS4zODQxIDI0LjcyNDFDMjQuOTkzNyAyNC4zMzM0IDI0Ljk5MzkgMjMuNzAwMiAyNS4zODQ3IDIzLjMwOThMMzcgMTEuNzA1MUwzNi4yOTQzIDExTDI0LjY3OTMgMjIuNjA0NEMyNC4yODg2IDIyLjk5NDcgMjMuNjU1NiAyMi45OTQ0IDIzLjI2NTIgMjIuNjAzOEwxMS43MDUyIDExLjAzNjZMMTEgMTEuNzQyMkwyMi41NTkzIDIzLjMwODdDMjIuOTQ5NyAyMy42OTk0IDIyLjk0OTUgMjQuMzMyNiAyMi41NTg4IDI0LjcyM0wxMS4wMzcgMzYuMjM0MkwxMS43NDI3IDM2LjkzOTNMMjMuMjY0MSAyNS40Mjg0QzIzLjY1NDggMjUuMDM4MSAyNC4yODc5IDI1LjAzODMgMjQuNjc4MiAyNS40Mjg5TDM2LjI0MjEgMzdMMzYuOTQ3MiAzNi4yOTQ0TDI1LjM4NDEgMjQuNzI0MVoiIGZpbGw9IiM5OTk5OTkiLz4KPHBhdGggZD0iTTI1LjM4NDEgMjQuNzI0MUMyNC45OTM3IDI0LjMzMzQgMjQuOTkzOSAyMy43MDAyIDI1LjM4NDcgMjMuMzA5OEwzNyAxMS43MDUxTDM2LjI5NDMgMTFMMjQuNjc5MyAyMi42MDQ0QzI0LjI4ODYgMjIuOTk0NyAyMy42NTU2IDIyLjk5NDQgMjMuMjY1MiAyMi42MDM4TDExLjcwNTIgMTEuMDM2NkwxMSAxMS43NDIyTDIyLjU1OTMgMjMuMzA4N0MyMi45NDk3IDIzLjY5OTQgMjIuOTQ5NSAyNC4zMzI2IDIyLjU1ODggMjQuNzIzTDExLjAzNyAzNi4yMzQyTDExLjc0MjcgMzYuOTM5M0wyMy4yNjQxIDI1LjQyODRDMjMuNjU0OCAyNS4wMzgxIDI0LjI4NzkgMjUuMDM4MyAyNC42NzgyIDI1LjQyODlMMzYuMjQyMSAzN0wzNi45NDcyIDM2LjI5NDRMMjUuMzg0MSAyNC43MjQxWiIgc3Ryb2tlPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); } button.mz-button.mz-button-prev:before, button.mz-button.mz-button-next:before { content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); } @supports( ((-webkit-mask-image:url()) or (mask-image:url())) and ((-webkit-mask-repeat:no-repeat) or (mask-repeat:no-repeat)) and ((-webkit-mask-position:center) or (mask-position:center)) and ((-webkit-mask-size:cover) or (mask-size:cover)) ) { button.mz-button:before { content: "" !important; background-color: currentColor; background-image: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; } button.mz-button.mz-button-close:before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNS4zODQxIDI0LjcyNDFDMjQuOTkzNyAyNC4zMzM0IDI0Ljk5MzkgMjMuNzAwMiAyNS4zODQ3IDIzLjMwOThMMzcgMTEuNzA1MUwzNi4yOTQzIDExTDI0LjY3OTMgMjIuNjA0NEMyNC4yODg2IDIyLjk5NDcgMjMuNjU1NiAyMi45OTQ0IDIzLjI2NTIgMjIuNjAzOEwxMS43MDUyIDExLjAzNjZMMTEgMTEuNzQyMkwyMi41NTkzIDIzLjMwODdDMjIuOTQ5NyAyMy42OTk0IDIyLjk0OTUgMjQuMzMyNiAyMi41NTg4IDI0LjcyM0wxMS4wMzcgMzYuMjM0MkwxMS43NDI3IDM2LjkzOTNMMjMuMjY0MSAyNS40Mjg0QzIzLjY1NDggMjUuMDM4MSAyNC4yODc5IDI1LjAzODMgMjQuNjc4MiAyNS40Mjg5TDM2LjI0MjEgMzdMMzYuOTQ3MiAzNi4yOTQ0TDI1LjM4NDEgMjQuNzI0MVoiIGZpbGw9IiM5OTk5OTkiLz4KPHBhdGggZD0iTTI1LjM4NDEgMjQuNzI0MUMyNC45OTM3IDI0LjMzMzQgMjQuOTkzOSAyMy43MDAyIDI1LjM4NDcgMjMuMzA5OEwzNyAxMS43MDUxTDM2LjI5NDMgMTFMMjQuNjc5MyAyMi42MDQ0QzI0LjI4ODYgMjIuOTk0NyAyMy42NTU2IDIyLjk5NDQgMjMuMjY1MiAyMi42MDM4TDExLjcwNTIgMTEuMDM2NkwxMSAxMS43NDIyTDIyLjU1OTMgMjMuMzA4N0MyMi45NDk3IDIzLjY5OTQgMjIuOTQ5NSAyNC4zMzI2IDIyLjU1ODggMjQuNzIzTDExLjAzNyAzNi4yMzQyTDExLjc0MjcgMzYuOTM5M0wyMy4yNjQxIDI1LjQyODRDMjMuNjU0OCAyNS4wMzgxIDI0LjI4NzkgMjUuMDM4MyAyNC42NzgyIDI1LjQyODlMMzYuMjQyMSAzN0wzNi45NDcyIDM2LjI5NDRMMjUuMzg0MSAyNC43MjQxWiIgc3Ryb2tlPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNS4zODQxIDI0LjcyNDFDMjQuOTkzNyAyNC4zMzM0IDI0Ljk5MzkgMjMuNzAwMiAyNS4zODQ3IDIzLjMwOThMMzcgMTEuNzA1MUwzNi4yOTQzIDExTDI0LjY3OTMgMjIuNjA0NEMyNC4yODg2IDIyLjk5NDcgMjMuNjU1NiAyMi45OTQ0IDIzLjI2NTIgMjIuNjAzOEwxMS43MDUyIDExLjAzNjZMMTEgMTEuNzQyMkwyMi41NTkzIDIzLjMwODdDMjIuOTQ5NyAyMy42OTk0IDIyLjk0OTUgMjQuMzMyNiAyMi41NTg4IDI0LjcyM0wxMS4wMzcgMzYuMjM0MkwxMS43NDI3IDM2LjkzOTNMMjMuMjY0MSAyNS40Mjg0QzIzLjY1NDggMjUuMDM4MSAyNC4yODc5IDI1LjAzODMgMjQuNjc4MiAyNS40Mjg5TDM2LjI0MjEgMzdMMzYuOTQ3MiAzNi4yOTQ0TDI1LjM4NDEgMjQuNzI0MVoiIGZpbGw9IiM5OTk5OTkiLz4KPHBhdGggZD0iTTI1LjM4NDEgMjQuNzI0MUMyNC45OTM3IDI0LjMzMzQgMjQuOTkzOSAyMy43MDAyIDI1LjM4NDcgMjMuMzA5OEwzNyAxMS43MDUxTDM2LjI5NDMgMTFMMjQuNjc5MyAyMi42MDQ0QzI0LjI4ODYgMjIuOTk0NyAyMy42NTU2IDIyLjk5NDQgMjMuMjY1MiAyMi42MDM4TDExLjcwNTIgMTEuMDM2NkwxMSAxMS43NDIyTDIyLjU1OTMgMjMuMzA4N0MyMi45NDk3IDIzLjY5OTQgMjIuOTQ5NSAyNC4zMzI2IDIyLjU1ODggMjQuNzIzTDExLjAzNyAzNi4yMzQyTDExLjc0MjcgMzYuOTM5M0wyMy4yNjQxIDI1LjQyODRDMjMuNjU0OCAyNS4wMzgxIDI0LjI4NzkgMjUuMDM4MyAyNC42NzgyIDI1LjQyODlMMzYuMjQyMSAzN0wzNi45NDcyIDM2LjI5NDRMMjUuMzg0MSAyNC43MjQxWiIgc3Ryb2tlPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); } button.mz-button.mz-button-prev:before, button.mz-button.mz-button-next:before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); } } @media screen and (max-device-width: 767px) { button.mz-button-prev, button.mz-button-next { display: none !important; } .mobile-magic .mz-expand button.mz-button.mz-button-close { width: 50px !important; height: 50px !important; color: rgb(180, 180, 180) !important; } .mobile-magic .mz-expand button.mz-button:before { transform: scale(.8); } } .lt-ie9-magic button.mz-button { border: 0; filter: alpha(opacity=75); } .lt-ie9-magic button.mz-button:hover { filter: alpha(opacity=100); } /* Arrows on the main image on the page */ .mz-figure .mz-nav-controls button.mz-button { display: none; width: 32px !important; height: 56px !important; margin: auto 0 !important; padding: 0 !important; border: 0 !important; } .mz-figure.mz-show-arrows .mz-nav-controls button.mz-button { display: block; } /** * Thumbnails */ /** Thumbnails on the page **/ a[data-zoom-id], .mz-thumb, .mz-thumb:focus { display: inline-block; line-height: 0; outline: none; } a[data-zoom-id] img, .mz-thumb img { padding-bottom: 4px; border: 0; border-bottom: 2px solid transparent; box-sizing: border-box; } .mz-thumb:not(.mz-thumb-selected):hover img { border-bottom-color: rgba(180, 180, 180, .3); } .mz-thumb.mz-thumb-selected img { border-bottom-color: rgb(180, 180, 180); } /** Thumbnails in expanded view **/ .mz-expand-thumbnails { flex: 0 0 80px; position: relative; width: 100%; height: 100%; margin: 0 auto; padding: 10px 0; z-index: 50; overflow: hidden; } .ios-magic[data-magic-engine=webkit][data-magic-engine-ver="603.1"] .mz-expand-thumbnails, :root[data-magic-ua=firefox] .mz-expand-thumbnails { height: 80px; } .mz-expand-thumbnails .magic-thumb > img { cursor: pointer; padding-bottom: 4px; border: 0; border-bottom: 2px solid transparent; } .mz-expand-thumbnails .magic-thumb:not(.magic-thumb-selected):hover img { border-bottom-color: rgba(180, 180, 180, .3); } .mz-expand-thumbnails .magic-thumb.magic-thumb-selected img { border-bottom-color: rgb(180, 180, 180); } .mz-expand-thumbnails .magic-thumbs .magic-thumbs-button { box-shadow: none; } /** Thumbnails on the left in expanded view with .expand-thumbnails-left class **/ @media not screen and (max-device-width: 767px) and (orientation: portrait) { .mz-expand.expand-thumbnails-left .mz-expand-stage { flex-direction: row-reverse; } .mz-expand.expand-thumbnails-left .mz-expand-thumbnails { padding: 0 10px; height: 100%; overflow: hidden; } .ios-magic[data-magic-engine=webkit][data-magic-engine-ver="603.1"] .mz-expand.expand-thumbnails-left .mz-expand-thumbnails, :root[data-magic-ua=firefox] .mz-expand.expand-thumbnails-left .mz-expand-thumbnails { width: 80px; height: 100%; } @media not screen and (max-device-width: 767px) { .mz-expand-thumbnails .magic-thumbs.magic-thumbs-vertical { height: calc(100% - 40px); margin-top: 20px; margin-bottom: 20px; } } @media screen and (max-device-width: 767px) { .mz-expand-thumbnails .magic-thumbs.magic-thumbs-vertical.no-buttons { height: calc(100% - 40px); margin-top: 20px; margin-bottom: 20px; } } } /** Hide thumbnails in expanded view with .no-expand-thumbnails class **/ .mz-expand.no-expand-thumbnails .mz-expand-thumbnails { display: none; } /** Thumbnails shaded style (improved previous one) **/ .thumbnails-style-shaded.mz-thumb img { border: 0 !important; padding-bottom: 0; box-shadow: 0 0 1px 0px rgba(0, 0, 0, .3); } .thumbnails-style-shaded.mz-thumb:hover:not(.mz-thumb-selected) img { -webkit-filter: brightness(.7); filter: brightness(.7); } .thumbnails-style-shaded.mz-thumb-selected img { -webkit-filter: brightness(.7) opacity(.7); filter: brightness(.7) opacity(.7); } .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb > img { border: 0 ; padding-bottom: 0; box-shadow:0 0 5px 1px rgba(0, 0, 0, .3); } .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb:not(.magic-thumb-selected) > img:hover { -webkit-filter: brightness(.75); filter: brightness(.75); } .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb-selected img { -webkit-filter: brightness(.7) opacity(.7); filter: brightness(.7) opacity(.7); } .no-cssfilters-magic .thumbnails-style-shaded.mz-thumb:hover, .no-cssfilters-magic .thumbnails-style-shaded.mz-thumb.mz-thumb-selected, .no-cssfilters-magic .thumbnails-style-shaded .magic-thumb:hover, .no-cssfilters-magic .thumbnails-style-shaded .magic-thumb.magic-thumb-selected { background: #000; } .no-cssfilters-magic .thumbnails-style-shaded.mz-thumb:hover:not(.mz-thumb-selected) img { opacity: .75; filter: alpha(opacity=75); } .no-cssfilters-magic .thumbnails-style-shaded.mz-thumb-selected img { opacity: .7; filter: alpha(opacity=70); } .no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb { position: relative; } .no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; z-index: 100; pointer-events: none; background-color: rgba(0, 0, 0, 0); } .no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb:hover:not(.magic-thumb-selected):after { background-color: rgba(0, 0, 0, 0.2); } .no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb.magic-thumb-selected:after { background-color: rgba(0, 0, 0, 0.3); } .no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb img { position: relative; z-index: 1; } .ie9-magic .thumbnails-style-shaded.mz-thumb img { box-shadow: 0 0 4px 0px rgba(0, 0, 0, .3); } .magic-thumbs, .magic-thumbs .magic-thumbs-wrapper, .magic-thumbs ul, .magic-thumbs li, .magic-thumbs li:before, .magic-thumbs li:after, .magic-thumbs li img, .magic-thumbs .magic-thumbs-button { margin: 0; padding: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .magic-thumbs { direction: ltr; overflow: visible; z-index: 100; position: relative; left: 0; top: 0; padding: 0 40px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -ms-touch-action: none; touch-action: none; } .magic-thumbs { width: 100%; height: 100%; white-space: nowrap; } .magic-thumbs.no-buttons { padding: 0 !important; } .magic-thumbs-wrapper { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; } .magic-thumbs ul { list-style: none; font-size: 0; display: inline-block; vertical-align: middle; height: 100%; position: relative; white-space: nowrap; } .magic-thumbs.no-buttons ul { left: 0 !important; padding: 0 !important; -webkit-transition: none !important; transition: none !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .magic-thumbs ul li { margin: 0 4px; height: 100%; width: auto; vertical-align: top; line-height: 0; display: inline-block; } .magic-thumbs ul li:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; } .magic-thumbs ul li > img { width: auto; height: auto; max-width: none !important; max-height: 100% !important; vertical-align: middle; } .ie8-magic .magic-thumbs ul li > img { max-width: none !important; max-height: none !important; } /* vertical */ .magic-thumbs.magic-thumbs-vertical { height: 100%; } .magic-thumbs-vertical { padding: 40px 0; } .magic-thumbs-vertical ul { height: auto; width: 100%; white-space: normal; } .magic-thumbs-vertical ul li { width: 100%; height: auto; } .magic-thumbs-vertical ul li { margin: 4px 0; } .magic-thumbs-vertical ul li > img { max-width: 100% !important; max-height: none !important; } .ie8-magic .magic-thumbs-vertical ul li > img { width: 100%; } /** * Buttons */ .magic-thumbs button.magic-thumbs-button { color: rgba(180, 180, 180, .6) !important; font-size: 0; cursor: pointer; z-index: 90 !important; background-repeat: no-repeat; background-color: transparent !important; background-image: none; border: 0; border-radius: 100%; box-shadow: none !important; overflow: hidden; position: absolute; text-transform: none !important; speak: none; text-align: center; width: 33px; height: 33px; top: 0; bottom: 0; margin: auto 3px; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; -webkit-transition: color .25s, background-color .25s !important; transition: color .25s, background-color .25s !important; } .magic-thumbs button.magic-thumbs-button:before { display: block; position: static; height: 100%; transform: scale(1); -webkit-transition: -webkit-transform .25s !important; transition: transform .25s !important; } .mobile-magic .magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled), :root:not(.mobile-magic) .magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled):hover, .magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled):active { color: rgba(180, 180, 180, 1) !important; } .magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled):active:before { -webkit-transform: scale(.7) !important; transform: scale(.7) !important; } .mobile-magic .mz-expand .magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled):active { background-color: rgba(49, 51, 61, .7) !important; } .magic-thumbs .magic-thumbs-button-prev { left: 0; transform: rotateZ(180deg) !important; } .magic-thumbs .magic-thumbs-button-next { right: 0; } .magic-thumbs-vertical button.magic-thumbs-button { top: auto; right: 0; bottom: auto; left: 0; margin: 3px auto; } .magic-thumbs-vertical button.magic-thumbs-button-prev { top: 0; transform: rotateZ(-90deg) !important; } .magic-thumbs-vertical button.magic-thumbs-button-next { bottom: 0; transform: rotateZ(90deg) !important; } .magic-thumbs .magic-thumbs-button-prev:before, .magic-thumbs .magic-thumbs-button-next:before { content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); } @supports( ((-webkit-mask-image:url()) or (mask-image:url())) and ((-webkit-mask-repeat:no-repeat) or (mask-repeat:no-repeat)) and ((-webkit-mask-position:center) or (mask-position:center)) and ((-webkit-mask-size:cover) or (mask-size:cover)) ) { .magic-thumbs button.magic-thumbs-button:before { content: "" !important; background-color: currentColor; background-image: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; } .magic-thumbs .magic-thumbs-button-prev:before, .magic-thumbs .magic-thumbs-button-next:before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo="); } } .magic-thumbs.no-buttons .magic-thumbs-button { display: none !important; } .magic-thumbs-button-disabled { opacity: 0.2; filter: alpha(opacity = 20); } @charset "UTF-8"; /* SELECTRIC Personnalisation des listes déroulantes */ .selectric-wrapper { position: relative; cursor: pointer; } .selectric { border: 1px solid #ededed; border-radius: 0; background-color: #fdfdfd; position: relative; overflow: hidden; } .selectric-select_small_white .selectric { border-color: #e5e5e5; border-radius: 5px; } .selectric-product__selectchoice .selectric { border-color: rgba(109, 121, 124, 0.4); border-radius: 5px; } .selectric-select_criteria .selectric { border-color: #ccc; border-radius: 5px; } .selectric-select_classic .selectric { border-color: #c1c1c1; background-color: #ffffff; } .selectric-select_big .selectric, .selectric-select_small .selectric { background-color: #f9f9f9; border-radius: 5px; border: 0; } .selectric-select_big_white .selectric { background-color: #ffffff; border-radius: 5px; border: 0; } .selectric-hasError .selectric { background: rgba(249, 0, 40, 0.3); } .selectric-focus .selectric { border-color: #bababa; } .selectric-hover .selectric { border-color: #d4d4d4; } .selectric-label { display: block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; margin: 0 38px 0 1em; font-size: 12px; line-height: 38px; color: #2f2f2f; height: 38px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-select_small .selectric-label, .selectric-select_small_white .selectric-label, .selectric-product__selectchoice .selectric-label { line-height: 25px; height: 25px; } .selectric-select_criteria .selectric-label { line-height: 26px; height: 26px; } .selectric-select_small .selectric-label { font-size: 1.4rem; } .selectric-product__selectchoice .selectric-label, .selectric-select_criteria .selectric-label { margin: 0 30px 0 10px; font-size: 1.4rem; } .selectric-select_classic .selectric-label { font-weight: 700; font-size: 1.6rem; color: #333; } .selectric-select_big .selectric-label, .selectric-select_big_white .selectric-label { font-weight: 700; font-size: 1.5rem; color: #333; } .selectric-button { display: block; position: absolute; right: 0; top: 0; width: 38px; height: 38px; line-height: 38px; background-color: transparent; color: #b0b0b0; text-align: center; border: none; padding: 0; font: 0/0 a; *font: 20px/38px Lucida Sans Unicode, Arial Unicode MS, Arial; } .selectric-select_small .selectric-button, .selectric-select_small_white .selectric-button, .selectric-product__selectchoice .selectric-button, .selectric-select_criteria .selectric-button { width: 25px; height: 25px; line-height: 25px; } .selectric-button:after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 0; height: 0; border: 4px solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .selectric-hover .selectric-button { color: #979797; } .selectric-open { z-index: 9999; } .selectric-open .selectric { border-color: #d4d4d4; } .selectric-open .selectric-items { display: block; } .selectric-disabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-hide-select { position: relative; overflow: hidden; width: 0; height: 0; } .selectric-hide-select select { position: absolute; left: -100%; } .selectric-hide-select.selectric-is-native { position: absolute; width: 100%; height: 100%; z-index: 10; } .selectric-hide-select.selectric-is-native select { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; border: none; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; } .selectric-input { position: absolute !important; top: 0 !important; left: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; margin: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; outline: none !important; border: none !important; *font: 0/0 a !important; background: none !important; } .selectric-temp-show { position: absolute !important; visibility: hidden !important; display: block !important; } /* Items box */ .selectric-items { display: none; position: absolute; z-index: -1; top: 100%; left: 0; background: #fdfdfd; border: 1px solid #ddd; -webkit-box-shadow: 0 0 10px -6px; box-shadow: 0 0 10px -6px; font-size: 12px; text-align: left; } .selectric-select_small .selectric-items, .selectric-select_small_white .selectric-items, .selectric-select_big .selectric-items, .selectric-select_big_white .selectric-items, .selectric-product__selectchoice .selectric-items, .selectric-select_criteria .selectric-items { border-radius: 5px; } .selectric-product__selectchoice .selectric-items, .selectric-select_criteria .selectric-items { font-size: 1.4rem; } .selectric-items .selectric-scroll { height: 100%; overflow: auto; } .selectric-above .selectric-items { top: auto; bottom: 100%; } .selectric-items ul, .selectric-items li { list-style: none; padding: 0; margin: 0; } .selectric-items li { display: block; padding: 10px; color: #2f2f2f; cursor: pointer; -webkit-transition: 0.2s all ease; -o-transition: 0.2s all ease; transition: 0.2s all ease; } .selectric-select_small .selectric-items li:first-child, .selectric-select_small_white .selectric-items li:first-child, .selectric-select_big .selectric-items li:first-child, .selectric-select_big_white .selectric-items li:first-child, .selectric-product__selectchoice .selectric-items li:first-child, .selectric-select_criteria .selectric-items li:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .selectric-select_small .selectric-items li.last, .selectric-select_small_white .selectric-items li.last, .selectric-select_big .selectric-items li.last, .selectric-select_big_white .selectric-items li.last, .selectric-product__selectchoice .selectric-items li.last, .selectric-select_criteria .selectric-items li.last { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .selectric-select_small .selectric-items li, .selectric-select_small_white .selectric-items li { padding: 5px 8px; line-height: 1.1; } .selectric-product__selectchoice .selectric-items li, .selectric-select_criteria .selectric-items li { padding: 6px 10px; line-height: 1.1; } .selectric-items li.selected { background: #f0f0f0; color: #222222; } .selectric-items li.highlighted { background: #e4e4e4; color: #222222; } .selectric-items li:hover { background: #75c5d7; color: #ffffff; } .selectric-items .disabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default !important; background: none !important; color: #2f2f2f !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-items .selectric-group .selectric-group-label { font-weight: bold; padding-left: 10px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: none; color: #161616; } .selectric-items .selectric-group.disabled li { filter: alpha(opacity=100); opacity: 1; } .selectric-items .selectric-group li { padding-left: 25px; } /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } @charset "UTF-8"; /* SLICK Plugin pour les diaporamas et carousels */ /* Styles de base */ /* Slider */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 50px; width: 40px; line-height: 0px; font-size: 0px; cursor: pointer; background: url(/Images/slide-nav.svg) no-repeat center center; color: transparent; top: calc(50% - 25px); padding: 0; border: none; outline: none; z-index: 2; -webkit-transition: 0.2s ease opacity; transition: 0.2s ease opacity; opacity: 0.7; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; color: transparent; } .slick-prev:hover, .slick-next:hover { opacity: 1; } .slick-prev { left: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .carousel-single .slick-prev { left: 5px; } .slick-next { right: 0; } .carousel-single .slick-next { right: 5px; } /* Dots */ .slick-dots { list-style: none; display: block; text-align: center; padding: 10px 0 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: Arial; font-size: 30px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } /* FONTS */ /* --- Web fonts --- */ @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400; src: local('Exo 2 Regular'), local('Exo2-Regular'), url('/Css/fonts/exo-2-v7-latin-regular.woff2') format('woff2'), url('/Css/fonts/exo-2-v7-latin-regular.woff') format('woff'); } @font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 400; src: local('Exo 2 Italic'), local('Exo2-Italic'), url('/Css/fonts/exo-2-v7-latin-italic.woff2') format('woff2'), url('/Css/fonts/exo-2-v7-latin-italic.woff') format('woff'); } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 500; src: local('Exo 2 Medium'), local('Exo2-Medium'), url('/Css/fonts/exo-2-v7-latin-500.woff2') format('woff2'), url('/Css/fonts/exo-2-v7-latin-500.woff') format('woff'); } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; src: local('Exo 2 SemiBold'), local('Exo2-SemiBold'), url('/Css/fonts/exo-2-v7-latin-600.woff2') format('woff2'), url('/Css/fonts/exo-2-v7-latin-600.woff') format('woff'); } @font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; src: local('Exo 2 Bold'), local('Exo2-Bold'), url('/Css/fonts/exo-2-v7-latin-700.woff2') format('woff2'), url('/Css/fonts/exo-2-v7-latin-700.woff') format('woff'); } /* --- Icons --- */ @font-face { font-family: 'icomoon'; src: url('/Css/fonts/icomoon.eot?rh6pkm'); src: url('/Css/fonts/icomoon.eot?rh6pkm#iefix') format('embedded-opentype'), url('/Css/fonts/icomoon.ttf?rh6pkm') format('truetype'), url('/Css/fonts/icomoon.woff?rh6pkm') format('woff'), url('/Css/fonts/icomoon.svg?rh6pkm#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"], [class^="table-picto-"], [class*=" table-picto-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-facebook:before { content: "\e92e"; } .icon-plus:before { content: "\e92f"; } .icon-youtube:before { content: "\e930"; } .icon-menu:before { content: "\e928"; } .icon-arrow-2:before { content: "\e927"; } .icon-pen:before { content: "\e926"; } .icon-reload:before { content: "\e923"; } .icon-document-2:before { content: "\e924"; } .icon-pdf:before { content: "\e925"; } .icon-delete-2:before { content: "\e922"; } .icon-info:before { content: "\e921"; } .icon-check-3:before { content: "\e920"; } .icon-home:before { content: "\e91f"; } .icon-car:before { content: "\e916"; } .icon-back:before { content: "\e917"; } .icon-cb:before { content: "\e918"; } .icon-talk:before { content: "\e919"; } .icon-book:before { content: "\e91a"; } .icon-cogs:before { content: "\e91b"; } .icon-print:before { content: "\e91c"; } .icon-star:before { content: "\e91d"; } .icon-document:before { content: "\e91e"; } .icon-delete:before { content: "\e915"; } .icon-arrow:before { content: "\e914"; } .icon-check-2:before { content: "\e913"; } .icon-down:before { content: "\e90f"; } .icon-close:before { content: "\e910"; } .icon-check:before { content: "\e911"; } .icon-arrow-circle:before { content: "\e90d"; } .icon-menu-arrow:before { content: "\e90b"; } .icon-slide-next:before { content: "\e903"; } .icon-slide-prev:before { content: "\e904"; } .icon-cart:before { content: "\e905"; } .icon-search:before { content: "\e906"; } .icon-plus-circle:before { content: "\e907"; } .icon-user:before { content: "\e908"; } .icon-phone:before { content: "\e909"; } .icon-question:before { content: "\e90a"; } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #000; opacity: 0.5; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid transparent; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid transparent; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } @charset "UTF-8"; /* SITE */ /* Styles de base */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type=search] { -webkit-appearance: textfield; /* 1 */ -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ /* GLOBAL */ /*----------------------------------------------------------------------- == Colors ----------------------------------------------------------------------- */ /*----------------------------------------------------------------------- == Typography ----------------------------------------------------------------------- */ html { font-size: 62.5%; } body { font-size: 1.4rem; line-height: 1.4; font-family: "Exo 2", sans-serif; background: #fafafa; color: black; position: relative; } @media (max-width: 1199px) { body.menu-open, body.search-active { height: 100%; overflow: hidden; } } @media (min-width: 1200px) { body.overlay-active { overflow: hidden; } } html, body { scrollbar-gutter: stable; } /* Titles ------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; text-rendering: optimizeLegibility; font-weight: normal; } p, ul, ol { margin: 0; padding: 0; } .title-secondary, .page-title { font-size: 3rem; font-size: clamp(2.4rem, calc(2.1818rem + 0.6818vw), 3rem); margin: 0 0 0.5em; padding-left: 10px; position: relative; color: #75c5d7; line-height: 1.2; font-weight: 700; } .title-secondary:before, .page-title:before { content: ""; position: absolute; top: 0; left: -50px; display: block; width: 52px; height: 55px; background: url(/Images/tag-blue.svg) no-repeat 0 0; } @media (max-width: 575px) { .title-secondary:before, .page-title:before { top: 2px; width: 34px; height: 36px; background-size: 34px 36px; left: -32px; } } .page-title { font-size: 3.6rem; font-size: clamp(2.4rem, calc(1.9636rem + 1.3636vw), 3.6rem); margin: 0 0 30px; text-transform: uppercase; } @media (max-width: 575px) { .page-title { margin: 0 0 15px; } } .title-secondary--cart { font-size: 2.6rem; font-size: clamp(2.4rem, calc(2.3273rem + 0.2273vw), 2.6rem); margin-bottom: 0.8em; text-transform: uppercase; } .section-title { font-size: 2.4rem; font-size: clamp(2rem, calc(1.8545rem + 0.4545vw), 2.4rem); margin: 30px 0; font-weight: 700; } .title-step { position: relative; margin: 30px -20px 0; padding: 10px 0 10px 85px; background: #000; color: #fff; text-transform: uppercase; font-size: 2.4rem; font-weight: 700; line-height: 1; } @media (max-width: 575px) { .title-step { margin: 20px -20px 0; padding: 8px 10px; font-size: 1.8rem; font-weight: 400; } .title-step strong { padding-right: 5px; font-weight: 700; font-size: 2rem; } } @media (min-width: 576px) { .title-step strong { position: absolute; top: -25px; left: -1px; display: block; width: 82px; height: 94px; padding: 30px 0 0 8px; background: url(../../../Images/tag-white.png) no-repeat 0 0; color: #000; font-weight: 700; font-size: 3rem; line-height: 1; } } /* Links & Buttons ------------------------- */ a { text-decoration: none; color: #000; } a:hover, a:focus { text-decoration: none; } .js_nav { cursor: pointer; } .btn { color: #fff; } .univers-1 .btn { background: #599387 !important; } .univers-2 .btn { background: #eaa2a2 !important; } .univers-3 .btn { background: #948a88 !important; } .univers-4 .btn { background: #7db3b8 !important; } .univers-5 .btn { background: #f3da90 !important; } .univers-6 .btn { background: #a55632 !important; } .univers-7 .btn { background: #948a88 !important; } .univers-1 .btn-alt { border-color: #599387 !important; color: #599387 !important; } .univers-2 .btn-alt { border-color: #eaa2a2 !important; color: #eaa2a2 !important; } .univers-3 .btn-alt { border-color: #948a88 !important; color: #948a88 !important; } .univers-4 .btn-alt { border-color: #7db3b8 !important; color: #7db3b8 !important; } .univers-5 .btn-alt { border-color: #f3da90 !important; color: #f3da90 !important; } .univers-6 .btn-alt { border-color: #a55632 !important; color: #a55632 !important; } .univers-7 .btn-alt { border-color: #948a88 !important; color: #948a88 !important; } .btn--toggle { -webkit-transition: 0.3s ease all; transition: 0.3s ease all; } .btn--toggle::after { content: ""; width: 14px; height: 8px; margin-left: 8px; background: url(/Images/arrow-btn.svg) no-repeat 0 0; background-size: 14px 8px; -webkit-transition: 0.3s ease all; transition: 0.3s ease all; } .btn--toggle.is-open::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .btn--toggle.is-loading { opacity: 0.5; cursor: wait; } .btn-plain { display: inline-block; vertical-align: middle; padding: 15px 20px; background: black; color: white; border-radius: 5px; font-size: 1.6rem; line-height: 1; border: 0; text-align: center; cursor: pointer; } .btn-doc { padding-left: 50px; background-image: url(/Images/download-doc.svg); background-repeat: no-repeat; background-position: 20px center; } .btn-light { display: inline-block; vertical-align: middle; padding: 15px 20px; background: #E6E6E6; color: #000; border-radius: 5px; font-size: 1.6rem; line-height: 1; border: 0; text-align: center; } .btn-outline { display: inline-block; vertical-align: middle; padding: 13px 18px; background: transparent; color: #000; border-radius: 5px; border: 2px solid #000; font-size: 1.6rem; line-height: 1; text-align: center; cursor: pointer; } .btn-disabled { background-color: #888 !important; cursor: default !important; } .minibtn-plain { display: inline-block; vertical-align: middle; padding: 11px 15px; line-height: 1; border-radius: 5px; background: #000; color: #fff; text-decoration: none; border: 0; text-align: center; } .minibtn-outline { display: inline-block; vertical-align: middle; padding: 9px 15px; line-height: 1; border-radius: 5px; background: transparent; color: #383737 !important; text-decoration: none; border: 2px solid #c6ccd2; text-align: center; -webkit-transition: 0.15s ease border-color; transition: 0.15s ease border-color; } .minibtn-outline:hover { border-color: #b3bbc3; } .minibtn-outline--edit { padding-left: 32px; background: url(/Images/edit.svg) no-repeat 10px center; } .mediumbtn-outline { display: inline-block; vertical-align: middle; padding: 12px 16px; line-height: 1; border-radius: 5px; background: transparent; color: #383737 !important; text-decoration: none; font-size: 1.6rem; border: 2px solid #c6ccd2; text-align: center; -webkit-transition: 0.15s ease border-color; transition: 0.15s ease border-color; } .mediumbtn-outline:hover { border-color: #b3bbc3; } .mediumbtn-plain { display: inline-block; vertical-align: middle; padding: 14px 18px; line-height: 1; border-radius: 5px; background: #000; color: #fff; text-decoration: none; text-align: center; font-size: 1.6rem; border: 0; } .load-more { position: relative; z-index: 4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 50px 0; } .load-more:last-child { margin-bottom: 0; } .load-more:has(+ .is-display-none) { margin-bottom: 0; } .load-more .btn-plain { -webkit-transition: 0.2s ease all; transition: 0.2s ease all; } .load-more .btn-plain:hover { background: #75c5d7; -webkit-box-shadow: 0px 2px 10px 0px rgba(117, 197, 215, 0.3); box-shadow: 0px 2px 10px 0px rgba(117, 197, 215, 0.3); } /* Lists ------------------------- */ ul, ol { margin: 0; padding: 0; } ul li, ol li { list-style: none; } /* Inline tags ------------------------- */ em { font-style: italic; } strong { font-weight: bold; } del { text-decoration: line-through; } /* Adresses styling not present in Safari 5 & Chrome */ dfn { font-style: italic; } ins { background-color: #ff9; color: #000; text-decoration: none; } /* Normalize monospace sizing (cf. http://en.wikipedia.org/wiki/User:Davidgothberg/Test59) */ pre, code, kbd, samp { font-family: monospace, serif; font-size: 1em; } /* Prevents sub and sup affecting line-height in all browsers (cf. http://gist.github.com/413930) */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Remove active outline (cf. http://people.opera.com/patrickl/experiments/keyboard/test) */ a:hover, a:active { outline: 0; } /* Addresses `outline` inconsistency between Chrome and other browsers */ a:focus { outline: thin dotted; } abbr[title] { border-bottom: 1px dotted; cursor: help; } /* Addresses styling not present in IE */ mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } /* Improve readibility of quoted code */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /*----------------------------------------------------------------------- == Medias ----------------------------------------------------------------------- */ /* height auto only for non SVG images */ img:not([src$=".svg"]) { height: auto; } /* vidéos YouTube */ .youtube-embed { display: block; margin: 0 auto; max-width: 640px; } .youtube-embed__cover { padding-bottom: 56.25%; position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; } .youtube-embed__cover::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/Images/youtube-play.svg) no-repeat center center; } iframe[id^=videoFrame] { display: block; margin: 0 auto; } /*----------------------------------------------------------------------- == Layout ----------------------------------------------------------------------- */ /* Switching box model for all elements */ * { -webkit-box-sizing: border-box; box-sizing: border-box; } .wrap { margin: 0 auto; padding: 0 30px; max-width: 1000px; position: relative; } .wrap--lg { max-width: 1450px; } .global { position: relative; background: #fafafa; } @media (min-width: 1200px) { .global--with-sidebar { display: -ms-grid; display: grid; -ms-grid-columns: 310px calc(100% - 310px); grid-template-columns: 310px calc(100% - 310px); } } @media (min-width: 1600px) { .global--with-sidebar { -ms-grid-columns: 310px 1fr 310px; grid-template-columns: 310px 1fr 310px; } } .lead { padding-bottom: 45px; background: white; } .lead:has(> .heading:first-child) { padding-top: 30px; } @media (min-width: 1200px) { .lead { padding-top: 11px; } .lead:has(> .heading:first-child) { padding-top: 41px; } } .global--with-sidebar .lead { background: transparent; } @media (min-width: 1200px) { .global--with-sidebar .lead { padding-left: 30px; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/3; } } .global--with-sidebar .lead > .wrap { padding-bottom: 30px; background: white; } @media (max-width: 1199px) { .global--with-sidebar .lead > .wrap { padding-top: 20px; } } .main { padding-top: 45px; padding-bottom: 60px; background: white; } .main:has(> .breadcrumbs) { padding-top: 20px; } @media (min-width: 1200px) { .main:has(> .breadcrumbs) { padding-top: 11px; } } .main--pb0 { padding-bottom: 0; } .page-content { background: white; padding-top: 15px; padding-bottom: 45px; } /*----------------------------------------------------------------------- == Grid ----------------------------------------------------------------------- */ .fullGrid { display: block; margin: 0; font-size: 0; padding: 0; } *[class*=grid] { display: inline-block; vertical-align: top; margin: 0; padding: 0 10px; font-size: 1.4rem; } .fullGrid.no-space *[class*=grid] { padding: 0; } .grid-block { display: block; } .grid10 { width: 10%; } .grid16 { width: 16.66666%; } .grid20 { width: 20%; } .grid25 { width: 25%; } .grid33 { width: 33.33333%; } .grid40 { width: 40%; } .grid45 { width: 45%; } .grid50 { width: 50%; } .grid55 { width: 55%; } .grid60 { width: 60%; } .grid67 { width: 66.66666%; } .grid75 { width: 75%; } .grid100 { width: 100%; } /*----------------------------------------------------------------------- == Tables ----------------------------------------------------------------------- */ table { width: 100%; vertical-align: top; } th { font-weight: normal; text-align: left; } td { vertical-align: top; } /*----------------------------------------------------------------------- == Helpers ----------------------------------------------------------------------- */ /* Clearfix (cf. http://nicolasgallagher.com/micro-clearfix-hack) */ .cf { zoom: 1; } .cf:before, .cf:after { content: ""; display: block; } .cf:after { clear: both; } /* Size */ .bigger { font-size: 120%; } /* Reset margin/padding/border */ .no-mg { margin: 0; } .no-pd { padding: 0; } .no-bd { border: 0; } .no-list > li { display: inline-block; list-style: none; } /* Display */ .row { display: table; width: 100%; } .col { display: table-cell; vertical-align: top; } /* Position */ .p-stretch { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } /* Float */ .f-left { float: left; } .f-right { float: right; } .clear { clear: both; } /* Alignement */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-btm { vertical-align: bottom; } /* Text */ .t-uppercase { text-transform: uppercase !important; } .t-warning { color: #da4141 !important; } .t-larger { font-size: 2.2rem !important; } .t-success { color: #97cc59 !important; } .t-info { color: #75c5d7 !important; } /* Images */ .img-left { float: left; margin: 0 1em 1em 0; } .img-right { float: right; margin: 0 0 1em 1em; } .img-center { margin: 1em auto; display: block; } /* Hide content */ .is-hidden, #scrollUp span { clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; border: 0; } .is-display-none { display: none !important; } /* Image replacement */ .ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } .with-icon { font-family: "icomoon"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*----------------------------------------------------------------------- == Responsive ----------------------------------------------------------------------- */ /* Max values */ img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100%; } /*----------------------------------------------------------------------- == Print ----------------------------------------------------------------------- */ @media print { p, blockquote { orphans: 2; widows: 2; } blockquote, ul, ol { page-break-inside: avoid; } h1, h2, h3, caption { page-break-after: avoid; } } /* Éléments communs */ /* HEADER */ #InformationCoronavirus { text-align: center; background: #9FD066; color: white; } #InformationCoronavirus p { padding: 0.3em 30px; font-size: 1.4rem; line-height: 1.1; } #InformationCoronavirus a { font-weight: 700; color: white; } #InformationCoronavirus a:hover, #InformationCoronavirus a:focus { text-decoration: underline; } .top { position: relative; z-index: 50; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 40px; font-size: 1.6rem; background: #e1f2f6; } @media (max-width: 1199px) { .top { display: none; } } .top__slogan { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; margin-right: auto; padding-left: 30px; line-height: 1; color: #7dacb7; } .top__slogan figure { position: relative; margin: 0; padding: 0; } .top__slogan figure svg { display: block; } .top__slogan figure::after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 4px; background: rgba(0, 0, 0, 0.25); -webkit-filter: blur(5px); filter: blur(5px); } .top__slogan span { font-size: 1rem; } .top__phone { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 25px; font-weight: 700; color: #75c5d7; } .top__phone img { margin-right: 5px; } .top__directorder span.js_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; height: 100%; padding: 0 15px; font-weight: 700; line-height: 1; background: #75c5d7; color: white; cursor: pointer; -webkit-transition: 0.2s ease background-color; transition: 0.2s ease background-color; } .top__directorder span.js_nav svg { fill: white; } .top__directorder span.js_nav:hover { background: #4db4cc; } .top__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 0 15px; } .top__social li + li { margin-left: 5px; } .top__social a, .top__social span.js_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 26px; height: 26px; border-radius: 26px; border: 1px solid #75c5d7; cursor: pointer; -webkit-transition: 0.15s ease all; transition: 0.15s ease all; } .top__social a svg, .top__social span.js_nav svg { fill: #75c5d7; -webkit-transition: 0.15s ease all; transition: 0.15s ease all; } .top__social a:hover, .top__social span.js_nav:hover { background: #4db4cc; border-color: #4db4cc; } .top__social a:hover svg, .top__social span.js_nav:hover svg { fill: white; } .header { position: relative; top: 0; z-index: 99; min-height: 65px; } @media (max-width: 1199px) { body.search-open .header { padding-bottom: 130px; } } @media (min-width: 1200px) { .header { min-height: 160px; } } @media (max-width: 1199px) { .header__inside { position: fixed; top: 0; left: 0; right: 0; } } .header--fixed .header__inside { position: fixed; top: 0; left: 0; right: 0; } .header__layout { position: relative; z-index: 40; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 15px; background: #222; } @media (max-width: 1199px) { .header__layout { height: 65px; } } @media (min-width: 1200px) { .header__layout { height: 90px; padding: 0 30px; gap: 30px; background: white; } .header--fixed .header__layout { height: 60px; } } .header__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media (min-width: 1200px) { .header__left { display: none; } } .logo { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 10px; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; } .logo span { padding-bottom: 3px; font-size: 1.5rem; font-weight: 500; color: #75c5d7; } .header--fixed .logo span { display: none; } @media (max-width: 1599px) { .logo span { display: none; } } @media (max-width: 479px) { .logo__img { width: 85px; height: 42px; background: url(/Images/logo-mobile-compact.svg) no-repeat 0 0; } } @media (min-width: 480px) and (max-width: 1199px) { .logo__img { background: url(/Images/logo-mobile.svg) no-repeat 0 0; width: 188px; height: 29px; } } @media (min-width: 1200px) and (max-width: 1599px) { .logo__img { width: 188px; height: 29px; background: url(/Images/logo-fixed.svg) no-repeat 0 0; } } @media (min-width: 1600px) { .logo__img { width: 267px; height: 53px; background: url(/Images/logo.svg) no-repeat 0 0; } .header--fixed .logo__img { width: 188px; height: 29px; background: url(/Images/logo-fixed.svg) no-repeat 0 0; } } .header__toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; background: transparent; border: 0; } @media (min-width: 1200px) { .header__toggle { display: none; } } .header__toggle__burger { display: block; position: relative; width: 24px; height: 17px; -webkit-transition: all 0.4s; transition: all 0.4s; border-bottom: 3px solid #919395; } @media (min-width: 480px) { .header__toggle__burger { width: 28px; height: 21px; } } .header__toggle__burger::before, .header__toggle__burger::after { content: ""; position: absolute; background: #919395; width: 100%; left: 0; height: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; } .menu-open .header__toggle__burger::before, .menu-open .header__toggle__burger::after { top: 7px; } @media (min-width: 480px) { .menu-open .header__toggle__burger::before, .menu-open .header__toggle__burger::after { top: 10px; } } .header__toggle__burger::before { top: 7px; } @media (min-width: 480px) { .header__toggle__burger::before { top: 9px; } } .header__toggle__burger::after { top: 0; } .menu-open .header__toggle__burger { border-color: transparent; } .menu-open .header__toggle__burger::before { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .menu-open .header__toggle__burger::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .header__toggle__label { line-height: 1; font-weight: 500; font-size: 1.5rem; text-transform: uppercase; color: white; } @media (max-width: 1199px) { .header__toggle__label { display: none; } } .header__toggle-search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: transparent; margin-right: auto; padding: 0; border: 0; } @media (max-width: 479px) { .header__toggle-search svg { max-height: 22px; width: auto; } } .header__toggle-search svg { fill: #919395; } @media (min-width: 1200px) { .header__toggle-search { display: none; } } .header__middle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 1199px) { .header__middle { display: none; position: fixed; width: 100%; top: 65px; left: 0; right: 0; height: 60px; padding: 5px 20px 0; background: #222; } body.search-open .header__middle { display: -webkit-box; display: -ms-flexbox; display: flex; } } .header__search { position: relative; -ms-flex-preferred-size: 650px; flex-basis: 650px; } @media (min-width: 1200px) and (max-width: 1599px) { .header__search { -ms-flex-preferred-size: 440px; flex-basis: 440px; } } .header__search__form { display: -webkit-box; display: -ms-flexbox; display: flex; height: 46px; } .header__search__form input[type=search] { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 11px 49px 11px 19px; font-size: 1.6rem; border-radius: 10px; border: 1px solid #f2f2f2; background: #f2f2f2; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; } .header__search__form input[type=search]:focus { outline: none; border-color: rgba(117, 197, 215, 0.75); } .header__search__form ::-webkit-input-placeholder { color: rgba(55, 76, 81, 0.65); opacity: 1; } .header__search__form ::-moz-placeholder { color: rgba(55, 76, 81, 0.65); opacity: 1; } .header__search__form :-ms-input-placeholder { color: rgba(55, 76, 81, 0.65); opacity: 1; } .header__search__form ::-ms-input-placeholder { color: rgba(55, 76, 81, 0.65); opacity: 1; } .header__search__form ::placeholder { color: rgba(55, 76, 81, 0.65); opacity: 1; } .header__search__form :-ms-input-placeholder { color: rgba(55, 76, 81, 0.65); } .header__search__form ::-ms-input-placeholder { color: rgba(55, 76, 81, 0.65); } .header__search__submit { position: absolute; top: 6px; bottom: 6px; right: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 38px; padding: 0; background: #75c5d7; border: 0; border-radius: 8px; -webkit-transition: 0.2s ease background-color; transition: 0.2s ease background-color; } .header__search__submit svg { fill: white; } .header__search__submit:hover { background: #4db4cc; } .header__search__clear { position: absolute; top: calc(50% - 10px); right: 60px; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 20px; background: #bbb url(/Images/close-white.svg) no-repeat center; background-size: 8px 8px; border: 0; display: none; -webkit-transition: 0.2s ease background-color; transition: 0.2s ease background-color; } .header__search__clear:hover { background-color: #6d797c; } .header__search__results { -webkit-transform: translate3d(0, 0, 0); display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 10; overflow-y: auto; scrollbar-color: #c1c1c1 transparent; scrollbar-width: thin; max-height: calc(100vh - 140px); padding: 15px; -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25); border-radius: 10px; background: white; } @media (min-width: 1200px) { .header__search__results { max-height: calc(100vh - 160px); } .header--fixed .header__search__results { max-height: calc(100vh - 120px); } } @media (min-width: 1200px) and (max-width: 1599px) { .header__search__results { left: calc(50% - 300px); right: auto; width: 600px; } } .livesearch { margin-top: 3px; } .livesearch__loading { height: 30px; background: url(/Images/loader-dots.svg) no-repeat center center; background-size: 40px 10px; } .livesearch__warning { padding-top: 10px; text-align: center; color: #75c5d7; font-size: 1.3rem; } .livesearch__warning a { color: #75c5d7; font-weight: 700; text-decoration: underline; } .livesearch__warning a:hover { text-decoration: none; } .livesearch__results a { display: block; padding: 2px 10px; color: black; -webkit-transition: 0.1s ease background; transition: 0.1s ease background; } .livesearch__results a:hover { background: #f2f5f8; color: #374C51; } .livesearch__results a strong { font-weight: 700; } .livesearch__results a i { padding-left: 2px; font-size: 1.2rem; font-style: normal; color: #7c8689; } .livesearch__noresults { padding: 10px 0; font-size: 1.5rem; text-align: center; } .livesearch__title { margin: 10px 0; padding: 4px 10px; border-radius: 3px; background: #f2f5f8; color: #75c5d7; font-weight: 700; font-size: 1.7rem; } .livesearch__title:first-child { margin-top: 0; } .livesearch__more { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 20px; } .livesearch__more a, .livesearch__more span { padding: 15px 20px; line-height: 1; border-radius: 5px; text-decoration: none; text-align: center; font-size: 1.8rem; font-weight: 500; background: #222; color: white; -webkit-transition: 0.2s ease background-color; transition: 0.2s ease background-color; cursor: pointer; } .livesearch__more a:hover, .livesearch__more span:hover { background: #383737; } .nav-tools { position: relative; z-index: 1000; display: -webkit-box; display: -ms-flexbox; display: flex; } .nav-tools > li { position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 10px; } @media (min-width: 1200px) { .nav-tools > li { cursor: default; -webkit-transition: 0.2s ease background; transition: 0.2s ease background; } .nav-tools > li:hover, .nav-tools > li.is-focused { background: #f2f2f2; } .nav-tools > li:hover .nav-tools__content, .nav-tools > li.is-focused .nav-tools__content { opacity: 1; visibility: visible; } .nav-tools > li:hover .nav-tools__picto > svg, .nav-tools > li.is-focused .nav-tools__picto > svg { fill: #75c5d7; } } .nav-tools__picto { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; height: 46px; padding: 0 10px; } @media (min-width: 480px) { .nav-tools__picto { padding: 0 12px; } } .nav-tools__picto > svg { fill: #919395; -webkit-transition: 0.2s ease fill; transition: 0.2s ease fill; } @media (max-width: 479px) { .nav-tools__picto > svg { max-width: 28px; max-height: 26px; } } .nav-tools__picto > figcaption { font-size: 1.4rem; font-weight: 700; line-height: 1.15; color: #1E1E1C; } .nav-tools__picto > figcaption span { display: block; font-weight: 400; } @media (max-width: 1199px) { .nav-tools__picto > figcaption { display: none; } } .header--fixed .nav-tools__picto > figcaption { display: none; } .nav-tools__account .nav-tools__picto > figcaption span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1300px) { .nav-tools__account .nav-tools__picto > figcaption span { max-width: 150px; } } .nav-tools__account.is-loggedin .nav-tools__picto { position: relative; } .nav-tools__account.is-loggedin .nav-tools__picto > svg { margin-right: 4px; } .nav-tools__account.is-loggedin .nav-tools__picto::after { content: ""; position: absolute; bottom: 8px; left: 23px; width: 12px; height: 9px; background: url(/Images/check-loggedin.svg) no-repeat 0 0; } .nav-tools__num { position: absolute; display: -ms-grid; display: grid; place-items: center; top: 2px; right: 2px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 22px; font-size: 1.2rem; line-height: 0.8; font-family: "Exo 2", sans-serif; font-weight: 600; border: 2px solid transparent; background: #75c5d7; color: white; -webkit-transition: 0.2s ease border-color; transition: 0.2s ease border-color; } @media (max-width: 1199px) { .nav-tools__num { border-color: #222; } } @media (min-width: 1200px) { .nav-tools__num { border-color: white; } .nav-tools > li:hover .nav-tools__num { border-color: #f2f2f2; } } .nav-tools__content { opacity: 0; visibility: hidden; position: absolute; top: calc(100% + 10px); z-index: 3; padding: 15px; border-radius: 10px; -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25); background: white; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; } .nav-tools__content::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 10px; background: transparent; } @media (max-width: 1199px) { .nav-tools__content { display: none !important; } } .nav-tools__faq .nav-tools__content, .nav-tools__promos .nav-tools__content { left: calc(50% - 115px); width: 230px; } .nav-tools__cart .nav-tools__content { width: 350px; right: 0; text-align: center; } .nav-tools__account .nav-tools__content { right: 0; width: 650px; padding: 30px; } .nav-tools__account.is-loggedin .nav-tools__content { width: 230px; padding: 15px; } .header:not(.header--fixed) .nav-tools__account.is-loggedin .nav-tools__content { right: auto; left: calc(50% - 115px); } .nav-tools__title { margin: 0 0 20px; text-align: center; text-transform: uppercase; font-weight: 500; font-size: 1.8rem; } .nav-tools__links { margin: 0 -5px; } .nav-tools__links a, .nav-tools__links span.js_nav { display: block; padding: 6px 15px; border-radius: 3px; text-decoration: none; -webkit-transition: 0.2s ease background; transition: 0.2s ease background; cursor: pointer; } .nav-tools__links a:hover, .nav-tools__links a:focus, .nav-tools__links span.js_nav:hover, .nav-tools__links span.js_nav:focus { background: #f2f2f2; } .nav-tools__links__logout { padding-top: 10px; text-align: right; } .nav-tools__links__logout a, .nav-tools__links__logout span.js_nav { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; background: none !important; color: #919395; -webkit-transition: 0.2s ease color; transition: 0.2s ease color; } .nav-tools__links__logout a svg, .nav-tools__links__logout span.js_nav svg { fill: #919395; -webkit-transition: 0.2s ease fill; transition: 0.2s ease fill; } .nav-tools__links__logout a:hover, .nav-tools__links__logout span.js_nav:hover { color: #75c5d7; } .nav-tools__links__logout a:hover svg, .nav-tools__links__logout span.js_nav:hover svg { fill: #75c5d7; } @media (min-width: 1200px) { .nav-tools__search { display: none; } } @media (max-width: 1199px) { .nav-tools__faq, .nav-tools__promos { display: none !important; } } .nav-tools__account__layout { display: -webkit-box; display: -ms-flexbox; display: flex; } .nav-tools__account__layout > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 50%; } .nav-tools__account__layout > div:first-child { padding-right: 25px; border-right: 2px solid rgba(109, 121, 124, 0.2); } .nav-tools__account__layout > div:last-child { padding-left: 25px; } .nav-tools__account__layout > div .fields { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .nav-tools__account__layout > div .field--submit { padding-top: 10px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .nav-tools__cart__empty svg { display: block; margin: 0 auto 10px; fill: #919395; } .nav-tools__cart__total { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 15px 0; padding: 10px 0; background: #75c5d7; text-align: center; font-weight: 700; font-size: 1.6rem; line-height: 1; color: white; } .nav-tools__cart__total strong { padding-left: 5px; font-size: 2rem; } .nav-tools__cart__btn { text-align: center; } .minicart { overflow: hidden; width: 100%; margin: 15px 0; } .minicart__inner { max-height: 230px; overflow-y: scroll; width: 400px; } .minicart__items { width: 318px; text-align: left; cursor: url(/Images/cursor_scrollable.cur), default; cursor: url(/Images/cursor_scrollable.png) 9 0, default; } .minicart__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 15px; } .minicart__row:last-child { margin-bottom: 0; } .minicart__img { width: 70px; margin: 0; -ms-flex-negative: 0; flex-shrink: 0; } .minicart__img a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 70px; height: 70px; padding: 10px; border: 1px solid #e6e6e6; background: white; } .minicart__img a img { display: block; -o-object-fit: contain; object-fit: contain; } .minicart__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 10px 0 15px; } .minicart__item__name { display: block; margin-bottom: 5px; font-size: 1.4rem; line-height: 1.3; } .minicart__item__ref { display: block; margin-bottom: 5px; font-size: 1.3rem; line-height: 1; color: #6d797c; } .minicart__item__qty { display: block; font-size: 1.2rem; line-height: 1; color: #383737; } .minicart__delete { width: 15px; padding-top: 3px; } .minicart__delete a { display: block; cursor: pointer; } .minicart__delete a svg { display: block; fill: #374c51; -webkit-transition: 0.2s ease fill; transition: 0.2s ease fill; } .minicart__delete a:hover svg { fill: #75c5d7; } /* --- Menu principal --- */ .nav-main { position: relative; z-index: 30; background: #222; } @media (max-width: 1199px) { .nav-main { position: fixed; z-index: 99; top: 65px; width: 100%; height: calc(100% - 65px); right: 100%; -webkit-transition: 0.5s ease all; transition: 0.5s ease all; overflow: auto; scrollbar-width: thin; border-top: 1px solid rgba(255, 255, 255, 0.3); background: #222; } .menu-open .nav-main { -webkit-transform: translateX(100%); transform: translateX(100%); } .nav-main .wrap { padding: 0; } .nav-main li { position: relative; } .nav-main li > button { position: absolute; top: 15px; right: 20px; width: 30px; height: 30px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.3); background: url(/Images/submenu.svg) no-repeat center 12px; } .nav-main li.is-open > button { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .nav-main li > a, .nav-main li > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding-left: 20px; font-weight: 500; line-height: 1.3; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .nav-main .level-1 { background: #222; } .nav-main .level-1 > li > a { min-height: 60px; font-weight: 600; font-size: 1.6rem; color: white; } .nav-main .level-2 { background: #eee; } .nav-main .level-2 > li > a, .nav-main .level-2 > li > span { min-height: 50px; font-size: 1.6rem; font-weight: 600; border-color: #ccc; cursor: pointer; } .nav-main .level-2 > li > button { top: 10px; background-color: #bbb; border-color: #bbb; } .nav-main .level-3 { background: white; } .nav-main .level-3 > li > a, .nav-main .level-3 > li > span { padding: 12px 20px; color: black; border-color: #ccc; font-size: 1.4rem; cursor: pointer; } .menu-open .nav-main { display: block; } .menu-open .nav-main .level-1 ul { display: none; } .menu-open .nav-main .level-1 > li.is-open .level-2, .menu-open .nav-main .level-2 > li.is-open .level-3 { display: block; } } @media (min-width: 1200px) { .nav-main { /* Niveau 1 */ /* Niveau 2 */ /* Niveau 3 */ } .nav-main::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 5px; padding-bottom: 6px; background: url(/Images/gradient.png) repeat-x center bottom; } .header--fixed .nav-main::after, .overlay-active .nav-main::after { opacity: 0; visibility: hidden; } .nav-main a { text-decoration: none; } .nav-main li > button { display: none; } .nav-main .level-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 70px; } .nav-main .level-1 > li { display: -webkit-box; display: -ms-flexbox; display: flex; } .nav-main .level-1 > li > a { position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 14px 18px; text-align: center; font-weight: 600; font-size: 1.5rem; line-height: 1.25; -webkit-transition: color 0.1s ease; transition: color 0.1s ease; color: white; } .nav-main .level-1 > li:not(:last-child) > a::after { content: ""; position: absolute; top: calc(50% - 17px); right: -1px; width: 2px; height: 34px; background: #919395; } .nav-main .level-1 > li.univers-1:hover > a { color: #599387; } .nav-main .level-1 > li.univers-1:hover > a > svg { fill: #599387; } .nav-main .level-1 > li.univers-2:hover > a { color: #eaa2a2; } .nav-main .level-1 > li.univers-2:hover > a > svg { fill: #eaa2a2; } .nav-main .level-1 > li.univers-3:hover > a { color: #948a88; } .nav-main .level-1 > li.univers-3:hover > a > svg { fill: #948a88; } .nav-main .level-1 > li.univers-4:hover > a { color: #7db3b8; } .nav-main .level-1 > li.univers-4:hover > a > svg { fill: #7db3b8; } .nav-main .level-1 > li.univers-5:hover > a { color: #f3da90; } .nav-main .level-1 > li.univers-5:hover > a > svg { fill: #f3da90; } .nav-main .level-1 > li.univers-6:hover > a { color: #a55632; } .nav-main .level-1 > li.univers-6:hover > a > svg { fill: #a55632; } .nav-main .level-1 > li.univers-7:hover > a { color: #948a88; } .nav-main .level-1 > li.univers-7:hover > a > svg { fill: #948a88; } .nav-main .level-1 > li.hover .sub-menu { display: block; } .nav-main .level-1 > li.univers-3:last-child > a > svg { display: none; } .nav-main .sub-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1; text-align: left; background: white; -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.2); } .nav-main .sub-menu::after { content: ""; position: absolute; bottom: 0; left: 30px; right: 30px; height: 35px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); } .nav-main .sub-menu__container { overflow: auto; scrollbar-color: rgba(109, 121, 124, 0.35) #eee; scrollbar-width: thin; } .nav-main .sub-menu__nav { -webkit-columns: 4; -moz-columns: 4; columns: 4; -webkit-column-rule: 2px double rgba(109, 121, 124, 0.2); -moz-column-rule: 2px double rgba(109, 121, 124, 0.2); column-rule: 2px double rgba(109, 121, 124, 0.2); -webkit-column-gap: 32px; -moz-column-gap: 32px; column-gap: 32px; padding: 30px; } .nav-main .sub-menu__layout { max-height: calc(92vh - 200px); } .header--fixed .nav-main .sub-menu__layout { max-height: calc(92vh - 130px); } .nav-main .level-2 { display: block; } .nav-main .level-2 > li { margin-bottom: 10px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid-column; } .nav-main .level-2 > li > .js_nav { display: block; margin: 0 -6px; padding: 3px 6px; border-radius: 3px; position: relative; line-height: 1; font-weight: 700; font-size: 1.7rem; color: black; cursor: pointer; } .nav-main .level-2 > li > .js_nav:hover, .nav-main .level-2 > li > .js_nav:focus { background: #f1f1f1; } .nav-main .level-3 { padding: 3px 0 0 0; text-align: left; } .nav-main .level-3 li { position: relative; } .nav-main .level-3 .js_nav { display: block; margin: 0 -6px; padding: 3px 6px; border-radius: 3px; line-height: 1; font-size: 1.4rem; color: #1E1E1C; cursor: pointer; } .nav-main .level-3 .js_nav:hover, .nav-main .level-3 .js_nav:focus { background: #f1f1f1; } } @media (min-width: 1600px) { .nav-main .level-1 > li > a { padding: 14px 26px; font-size: 1.6rem; } } @media (min-width: 1600px) and (max-width: 1799px) { .nav-main .sub-menu__nav { -webkit-columns: 5; -moz-columns: 5; columns: 5; } } @media (min-width: 1800px) and (max-width: 2199px) { .nav-main .sub-menu__nav { -webkit-columns: 6; -moz-columns: 6; columns: 6; } } @media (min-width: 2200px) { .nav-main .sub-menu__nav { -webkit-columns: 7; -moz-columns: 7; columns: 7; max-width: 2100px; margin: 0 auto; } } /* FOOTER */ /* Pied de page */ .footer { background: #425359; color: white; } .footer > .wrap { padding-top: 60px; padding-bottom: 60px; } .footer__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; } .footer__col { width: 100%; padding: 0 10px; } @media (min-width: 480px) and (max-width: 991px) { .footer__col { width: 50%; } } @media (min-width: 992px) { .footer__col { width: 25%; } } .footer__menus { padding: 60px 0; } .footer__title { margin: 0 0 15px; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; } .footer__title a, .footer__title span { color: #fff; cursor: pointer; } .footer__links { margin: 0 0 15px; } @media (max-width: 991px) { .footer__links li { margin-bottom: 8px; } } .footer__links li > a, .footer__links li > span { display: inline-block; padding: 5px 0; color: #fff; opacity: 0.5; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; -webkit-transition: 0.1s ease all; transition: 0.1s ease all; cursor: pointer; } .footer__links li > a:hover, .footer__links li > a:focus, .footer__links li > span:hover, .footer__links li > span:focus { text-decoration-color: inherit; } .footer__links #eKomiGate_widget { opacity: 1; } .footer__avis { margin-bottom: 20px; text-align: center; } #PopAvisVerifies { height: 90vh; margin: 0 auto !important; padding: 0 !important; border-radius: 0; } #PopAvisVerifies iframe { height: 100%; border: 0; } #widget-av { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 180px; height: 180px; border-radius: 180px; margin: 0 auto; text-decoration: none; background: white; color: #0A0A13; cursor: pointer; } .widget-av__average { font-size: 3.8rem; font-family: Arial, sans-serif; line-height: 1; text-align: center; color: #75c5d7; } .widget-av__average > span { padding-right: 2px; font-weight: 700; } .widget-av__average small { font-size: 2.4rem; } .widget-av__average small span { padding-left: 2px; } .widget-av__stars { width: calc(100% - 50px); margin: 10px 0 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widget-av__stars__label { margin-bottom: 10px; font-size: 1.2rem; font-weight: 700; font-family: Arial, sans-serif; line-height: 1; text-transform: lowercase; color: #0A0A13; } .widget-av__stars__rating { position: relative; width: 137px; height: 25px; background: url(/Images/widget-stars-off.svg) no-repeat 0 0; } .widget-av__stars__rating span { position: absolute; top: 0; left: 0; height: 25px; background: url(/Images/widget-stars-on.svg) no-repeat 0 0; } .widget-av__stars__rating::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; background: url(/Images/widget-stars.svg) no-repeat center; } .footer__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .footer__social span.js_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; border-radius: 40px; background: white; cursor: pointer; } .footer__social span.js_nav svg { fill: #364b50; -webkit-transition: 0.2s ease fill; transition: 0.2s ease fill; } .footer__social span.js_nav:hover svg { fill: #75c5d7; } #scrollUp { bottom: 102px; right: 20px; width: 64px; height: 64px; background: url(/Images/back-top.svg) no-repeat; } body.menu-open #scrollUp, body.search-active #scrollUp, body.overlay-active #scrollUp { display: none !important; } @media (max-width: 767px) { #scrollUp { width: 40px; height: 40px; background: url(/Images/back-top.svg) no-repeat; background-size: 40px 40px; } } /* Bandeau Cookies */ #ctl00_BandeauCookies { position: fixed; bottom: 0; z-index: 105000; width: 100%; text-align: center; color: #ffffff; background-color: #364b50; padding: 10px; } #ctl00_BandeauCookies a { color: #fff; text-decoration: underline; } #ctl00_BandeauCookies a:hover { text-decoration: none; } #ctl00_BandeauCookies .listProduct-btn { background-color: #ff9b4a; color: #000000; padding: 7px 12px; } /* Message Voussert */ .voussert-ok { height: 0; font-size: 0; } .overlay { position: fixed; top: 0; z-index: 30; height: 100vh; width: 100%; background-color: rgba(34, 34, 34, 0.5); opacity: 0; overflow: hidden; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; visibility: hidden; } .overlay-active .overlay { opacity: 1; visibility: visible; } /* FENÊTRES MODALES */ .modal { position: relative; background: white; padding: 40px; width: auto; max-width: 800px; margin: 20px auto; -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2); border-radius: 3px; } @media (max-width: 479px) { .modal { padding: 20px; } } .modal#ModalShowDetail, .modal#ModalShowDetailSuivi { padding: 0 !important; } .modal#ModalShowDetail .mfp-close, .modal#ModalShowDetailSuivi .mfp-close { color: white !important; } .modal#PopUpPointRelais { max-width: 1200px; padding: 0 !important; } .modal#PopUpRechercheSociete, .modal#ModalShowDetail { max-width: 1000px; } .modal#ModalShowDetailSuivi { max-width: 500px; } @media (min-width: 768px) { .modal#ModalShowDetailSuivi { max-width: 1000px; } } .modal-title { font-size: 2.4rem; font-size: clamp(2rem, calc(1.8545rem + 0.4545vw), 2.4rem); margin-bottom: 15px; text-align: center; } .modal-title strong { font-weight: 700; } .modal-title-important { color: #ffa800; } .modal__intro { font-size: 1.6rem; font-size: clamp(1.5rem, calc(1.4636rem + 0.1136vw), 1.6rem); margin-bottom: 30px; } /* FORMULAIRES */ /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ .form__title { position: relative; margin: 30px -30px; padding: 10px 30px; background: #000; color: #fff; text-transform: uppercase; font-size: 2.4rem; font-weight: 700; line-height: 1; } @media (max-width: 575px) { .form__title { font-size: 1.8rem; } } .form__required { margin-top: -20px; text-align: right; font-style: italic; } .fields-title { margin: 30px 0 20px; font-size: 1.8rem; font-weight: 700; line-height: 1.2; } .fields-title .required { color: #f90028; } @media (min-width: 768px) { .fields-title { font-size: 2rem; } } .fields { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -20px; } @media (min-width: 992px) { .fields { padding: 0 100px; } } @media (min-width: 992px) { .fields--nopadding { padding: 0; } } .fields__row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; } .field { display: block; width: 100%; margin-bottom: 15px; padding: 0 20px; } .field label, .field .label { display: inline-block; margin-bottom: 5px; font-weight: 700; font-size: 1.6rem; line-height: 1.3; } .field .required { color: #f90028; } .field input[type=text], .field input[type=email], .field input[type=password], .field textarea { display: block; width: 100%; padding: 8px 10px; font-size: 1.8rem; border: 1px solid #c1c1c1; -webkit-transition: 0.3s ease all; transition: 0.3s ease all; } .field input[type=text]:focus, .field input[type=email]:focus, .field input[type=password]:focus, .field textarea:focus { border-color: #65bdd0; outline: none; } .field input[type=text].hasError, .field input[type=email].hasError, .field input[type=password].hasError, .field textarea.hasError { background: rgba(249, 0, 40, 0.3); } .field select { width: 100%; } .field .intl-tel-input { display: block; } .field--last { margin-bottom: 0; } .field--half { width: 100%; } @media (min-width: 768px) { .field--half { width: 50%; } } .field--submit { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 30px; } @media (max-width: 479px) { .field--submit { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .field--submit a:not(:first-child), .field--submit input[type=submit]:not(:first-child), .field--submit button:not(:first-child) { margin-top: 15px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media (min-width: 480px) { .field--submit { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .field--submit a, .field--submit input[type=submit], .field--submit button { margin-left: 20px; } } .field--radio table { table-layout: auto; width: auto; } .field--radio table label { margin: 0; padding-left: 8px; font-weight: 400; line-height: 1; } .field--radio table td { padding-top: 5px; } .field--radio-horizontal table { table-layout: auto; width: auto; margin-top: 3px; } .field--radio-horizontal table td:not(:last-child) { padding-right: 20px; } .field--radio-horizontal table label { margin: 0; padding-left: 5px; font-weight: 400; } @media (max-width: 767px) { .field--radio-horizontal table, .field--radio-horizontal table tbody, .field--radio-horizontal table tr, .field--radio-horizontal table td { display: block !important; } .field--radio-horizontal table td + td { padding-top: 3px; } } .field--checkbox { padding-top: 22px; } .field--checkbox label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } .field--checkbox input[type=checkbox] { margin-right: 8px; } .field--text { font-size: 1.5rem; } @media (min-width: 576px) { .field--text { font-size: 1.6rem; } } .field--text p:not(:last-child), .field--text ul:not(:last-child) { margin-bottom: 10px; } .field--text p small, .field--text ul small { font-size: 1.4rem; } .field--text ul li { position: relative; padding-left: 20px; } .field--text ul li::before { content: "-"; position: absolute; top: 0; left: 7px; } .field--text strong { font-weight: 600; } .field--text a { color: #75c5d7; } .field--text a:hover { text-decoration: underline; } .field--textsmall { font-size: 1.2rem; } .field--info { margin: 15px 0; font-size: 1.6rem; font-weight: 500; color: #333333; } .field--error, .field__error { padding: 0.7em 1em; font-weight: 700; font-size: 1.5rem; background: rgba(249, 0, 40, 0.1); color: #da4141; } .field--error ul li:not(:last-child), .field__error ul li:not(:last-child) { margin-bottom: 0.5em; } .field--error { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } .field--success { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; padding: 0.5em 1em; font-weight: 700; font-size: 1.5rem; background: #effbfd; color: #65bdd0; } .field__info { margin-top: 5px; font-size: 1.2rem; font-style: italic; line-height: 1.4; color: #888; } .field__error { display: block; margin: 1em 0; } .field__small-error { padding-top: 4px; color: #da4141; } .field__pwdlost { text-align: right; margin-top: 7px; } .field__pwdlost a, .field__pwdlost span.js_nav { font-size: 1.3rem; font-weight: 500; text-decoration: underline; -webkit-transition: 0.2s ease all; transition: 0.2s ease all; cursor: pointer; } .field__pwdlost a:hover, .field__pwdlost span.js_nav:hover { color: #75c5d7; } /* --- Champ d'upload Dropzone --- */ .field { /* Annulation des styles chargés par TargetFirst */ } .field #dZUpload { margin: 15px 0; padding: 25px; text-align: center; border: 2px dashed #c1c1c1; border-radius: 10px; cursor: pointer; } .field .dZUpload__msg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-style: italic; color: #999; } .field .dZUpload__msg img { margin-bottom: 15px; } .field .dz-preview { display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 28px; background: url(/Images/check.svg) no-repeat left center; background-size: 20px 14px; } .field .dz-preview + .dz-preview { margin-top: 3px; } .field .dz-details { display: -webkit-box; display: -ms-flexbox; display: flex; } .field .dz-filename { padding: 0 10px; } .field .dz-remove { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 0.3s ease color; transition: 0.3s ease color; } .field .dz-remove:hover { color: #999; } .field .dz-image, .field .dz-success-mark, .field .dz-error-mark { display: none; } .field #dZUpload .dz-message { position: static; top: auto; } .field .dropzone-previews .dz-progress { display: none !important; top: auto; } .field .dropzone-previews .dz-remove { width: auto; height: auto; position: static; top: auto; right: auto; background-color: transparent; border-radius: 0; } /* NOTATION PRODUIT */ .star-rating { position: relative; width: 99px; height: 18px; background: url(/Images/stars-off.svg) no-repeat 0 0; } .star-rating span { position: absolute; top: 0; left: 0; height: 18px; background: url(/Images/stars-on.svg) no-repeat 0 0; } .star-rating--orange span { background: url(/Images/stars-orange-on.svg) no-repeat 0 0; } .star-rating--small { width: 77px; height: 14px; background-size: 77px 14px; } .star-rating--small span { height: 14px; background-size: 77px 14px; } /* MENU GAUCHE */ /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ .nav-side { margin-top: 11px; padding: 20px 0 20px 15px; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; z-index: 20; } @media (max-width: 1199px) { .nav-side { display: none; } } .nav-side__inner { padding: 15px; background: white; border: 2px solid #f2f4f5; } .nav-side__title { margin-bottom: 10px; font-size: 1.8rem; font-weight: 700; line-height: 1.2; } .nav-side__menu > li:not(:first-child) { border-top: 1px solid #efefef; } .nav-side__menu > li:has(> a:hover) { border-color: transparent; } .nav-side__menu > li:not(.current):has(> a:hover) + li { border-color: transparent; } .nav-side__menu > li > a, .nav-side__menu > li > .js_nav { position: relative; display: block; padding: 5px 0 5px 20px; font-size: 1.4rem; color: black; border-radius: 3px; background: url(/Images/chevron-down.svg) no-repeat 5px 13px; cursor: pointer; } .nav-side__menu > li > a:hover, .nav-side__menu > li > a:focus, .nav-side__menu > li > .js_nav:hover, .nav-side__menu > li > .js_nav:focus { background-color: #f1f1f1; } .nav-side__menu > li.current > a, .nav-side__menu > li.current > .js_nav { font-weight: 700; } .nav-side__menu > li.current ul { display: block; } .nav-side__menu > li > ul { position: relative; display: none; margin: 5px 0 10px; padding-left: 30px; font-size: 1.4rem; } .nav-side__menu > li > ul a, .nav-side__menu > li > ul .js_nav { position: relative; display: block; padding: 3px 6px; line-height: 1.3; border-radius: 3px; cursor: pointer; color: #374c51; } .nav-side__menu > li > ul a:hover, .nav-side__menu > li > ul a:focus, .nav-side__menu > li > ul .js_nav:hover, .nav-side__menu > li > ul .js_nav:focus { background-color: #f1f1f1; } .nav-side__menu > li > ul li.current a, .nav-side__menu > li > ul li.current .js_nav { font-weight: 700; opacity: 1; } /* BREADCRUMBS */ /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ .breadcrumbs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 20px; color: #75c5d7; font-size: 1.3rem; line-height: 1.2; font-weight: 500; } @media (min-width: 1200px) { .breadcrumbs { padding-top: 20px; } } .breadcrumbs li:not(:first-child)::before { content: "/"; padding: 0 4px; } .breadcrumbs a { font-weight: 600; color: #75c5d7; text-decoration-line: underline; text-decoration-color: #75c5d7; text-underline-offset: 2px; text-decoration-thickness: 1px; -webkit-transition: 0.1s ease all; transition: 0.1s ease all; } .breadcrumbs a:hover, .breadcrumbs a:focus { text-decoration-color: transparent; } @media (max-width: 767px) { .breadcrumbs { display: none; } } /* EDITOR */ /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ .editor { font-size: 1.6rem; line-height: 1.5; } .editor > *:first-child { margin-top: 0 !important; } .editor.intro, .editor.outro { font-size: 1.5rem; line-height: 1.45; } .editor p, .editor ul, .editor iframe { margin-bottom: 1em; } .editor p:last-child, .editor ul:last-child, .editor iframe:last-child { margin-bottom: 0; } .editor.intro p, .editor.intro ul, .editor.intro iframe, .editor.outro p, .editor.outro ul, .editor.outro iframe { margin-bottom: 0.6em; } .editor.intro p:last-child, .editor.intro ul:last-child, .editor.intro iframe:last-child, .editor.outro p:last-child, .editor.outro ul:last-child, .editor.outro iframe:last-child { margin-bottom: 0; } .editor table { margin: 0; border-collapse: collapse; border: 1px solid #bbb !important; display: table; overflow-x: unset; width: 100%; min-width: 575px; font-size: 1.4rem; } .editor table td, .editor table th { border: 1px solid #bbb; border-width: 0 0 1px; padding: 4px 10px !important; word-wrap: break-word; } .editor table tr:first-child td { padding: 5px 10px !important; font-weight: 700 !important; font-size: 1.5rem; background: #f2f2f2 !important; color: #324449; } .editor table tr:first-child td strong { font-weight: 700 !important; } .editor table tr:nth-child(n+2) td { background: white !important; } .editor table td { white-space: normal; } .editor .table-responsive { display: block; width: 100%; overflow-x: auto; margin: 20px 0; } .editor .table-responsive:last-child { margin-bottom: 0; } .editor > figure { margin: 1.5em -30px; } .editor > figure img { display: block; } .editor img { display: block; max-width: 100%; margin: 0 auto; } .editor img:not([src$=".svg"]) { height: auto !important; } .editor a:not(.btn) { font-weight: 700; text-decoration: underline; color: #75c5d7; } .editor a:not(.btn):hover, .editor a:not(.btn):focus { text-decoration: none; } .editor ul:not(.fintecture-steps) { padding-left: 30px; } .editor ul:not(.fintecture-steps) li { position: relative; } .editor ul:not(.fintecture-steps) li:before { content: "-"; display: inline-block; width: 12px; margin-left: -12px; } .editor ul:not(.fintecture-steps) li + li { margin-top: 0.5em; } .editor ul.list-nostyle { padding-left: 0; } .editor ul.list-nostyle li::before { content: none; } .editor ul.list-bullets { padding-left: 15px; } .editor ul.list-bullets li { position: relative; padding-left: 16px; } .editor ul.list-bullets li + li { margin-top: 3px; } .editor ul.list-bullets li::before { content: ""; position: absolute; top: 8px; left: 0; width: 6px; height: 10px; margin: 0; background: url(/Images/arrow-li.svg) no-repeat 0 0; } .editor .btn:hover { text-decoration: none; } .editor strong { font-weight: 700; } .editor h2 { font-size: 2.4rem; font-size: clamp(2rem, calc(1.8545rem + 0.4545vw), 2.4rem); margin: 1.2em 0 0.6em; font-weight: 700; line-height: 1.4; } .editor.intro h2, .editor.outro h2 { margin: 0.6em 0 0.3em; color: #75c5d7; } .editor h3 { margin: 1.2em 0 0.6em; font-size: 1.8rem; font-weight: 700; color: #75c5d7; line-height: 1.3; } .editor.intro h3, .editor.outro h3 { margin: 0.6em 0 0.3em; } .editor h4 { margin: 0.8em 0 0.4em; font-size: 1.6rem; font-weight: 700; color: black; line-height: 1.4; } .editor.intro h4, .editor.outro h4 { margin: 0.6em 0 0.3em; } .editor .important { color: #75c5d7; font-weight: bold; } .editor address { margin-bottom: 20px; padding-left: 20px; border-left: 1px solid #75c5d7; } .editor address:last-child { margin-bottom: 0; } .editor blockquote { margin: 0 0 20px; padding-left: 30px; border-left: 3px solid #eee; font-style: italic; font-size: 90%; color: #7D7D7D; } .editor .nota-bene { font-size: 1.4rem; font-style: italic; } .editor .notice { padding: 5px 15px; font-weight: 700; font-size: 1.8rem; text-align: center; border-radius: 5px; background: rgba(159, 208, 102, 0.2); color: #9fd066; } .editor .info { margin: 30px 0; padding: 30px; background: #effbfd; border-radius: 5px; } .editor .info a { word-break: break-all; } .editor .info:last-child { margin-bottom: 0; } .editor .focus { position: relative; width: 100%; margin-bottom: 30px; padding: 30px; background: #f2f5f8; border-radius: 5px; } .editor .focus address { margin-bottom: 0; padding-left: 0; border: 0; font-style: normal; } .editor .focus .btn-plain { background: #75c5d7; } .editor .focus:last-child { margin-bottom: 0; } .editor .focus--withpicto { width: calc(100% - 45px); margin-left: 45px; padding-left: 45px; } .editor .focus--withpicto::before { content: ""; position: absolute; top: 10px; left: -45px; width: 60px; height: 60px; border-radius: 60px; background: white; border: 3px solid #75c5d7; } .editor .focus--callus::before { background: white url(Images/picto-experts.svg) no-repeat center; background-size: 40px 32px; } .editor .focus--opening-hours::before { background: white url(Images/clock.svg) no-repeat center; background-size: 32px 32px; } .editor .focus--email::before { background: white url(Images/arobase.svg) no-repeat center; background-size: 35px 35px; } .editor .focus--location::before { background: white url(Images/mail.svg) no-repeat center; background-size: 36px 27px; } .editor .bordered { margin-bottom: 1em; padding: 20px 25px; border: 1px solid black; } .editor .emphasis { margin-bottom: 1em; font-style: italic; } .editor .status-info { position: relative; padding: 20px 20px 20px 60px; border-radius: 5px; background: #f2f5f8; } .editor .status-info::before { content: ""; position: absolute; top: 20px; left: 20px; width: 25px; height: 25px; border-radius: 25px; background: #75c5d7 url(/Images/info.svg) no-repeat center; } .editor .img-shadow { -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15); } .editor .img-rib { display: block; margin: 20px auto; border: 2px solid black; } .editor .banner-facebook { display: block; max-width: 640px; margin: 30px auto 0; text-decoration: none !important; } .editor .banner-facebook figure { margin: 0; } .editor .banner-facebook figcaption { padding: 80px 20px 20px; font-size: 1.8rem; text-align: center; background: #9ad5e2 url(/Images/facebook-circle.svg) no-repeat center 20px; color: white; } @media (max-width: 479px) { .editor .banner-facebook figcaption { background-size: 40px 40px; } } @media (min-width: 480px) { .editor .banner-facebook figcaption { padding: 20px 90px 20px 20px; background-position: right 20px center; text-align: right; } } .section-alt { margin: 30px -30px; padding: 30px; background: #effbfd; background: #f2f5f8; } .row-columns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 30px -15px; } .row-columns:first-child { margin-top: 0; } .row-columns:last-child { margin-bottom: 0; } .row-columns > * { padding: 0 15px; } @media (max-width: 767px) { .row-columns > div + div { margin-top: 30px !important; } } .row-columns__half { width: 100%; } @media (min-width: 768px) { .row-columns__half { width: 50%; } } figure.row-columns__half { margin: 0; } @media (max-width: 767px) { figure.row-columns__half { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-top: 30px; } } figure.row-columns__half > img { display: block; } .row-columns__half--flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .row-columns__third { width: 100%; } @media (min-width: 768px) { .row-columns__third { width: 33.3333333333%; } } .row-img { margin: 30px 0; } .row-img img { display: block; } .row-gallery { margin: 30px 0; } @media (max-width: 575px) { .row-gallery figure + figure { margin-top: 30px; } } @media (min-width: 576px) { .row-gallery { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 20px 1fr 20px 1fr; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin: 30px -30px; } } .row-gallery > figure, .row-gallery > a { margin: 0; } .row-gallery > figure img, .row-gallery > a img { display: block; width: 100%; -webkit-transition: 0.3s ease opacity; transition: 0.3s ease opacity; } .row-gallery > a { background: black; position: relative; cursor: -webkit-zoom-in; cursor: zoom-in; } .row-gallery > a:hover img { opacity: 0.8; } .row-map { margin: 0 -30px; } .row-map iframe { display: block; } .brands-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 50px; } .brands-list li { position: relative; width: 100%; margin-bottom: 5px; padding-left: 16px; padding-right: 5px; line-height: 1.2; } @media (min-width: 400px) and (max-width: 575px) { .brands-list li { width: 50%; } } @media (min-width: 576px) and (max-width: 767px) { .brands-list li { width: 33.3333333333%; } } @media (min-width: 768px) { .brands-list li { width: 25%; } } .brands-list li::before { content: ""; position: absolute; top: 5px; left: 0; width: 6px; height: 6px; background: #75c5d7; } .brands-list a { font-weight: 700; color: #7D7D7D; } .brands-list a:hover { color: #75c5d7; } /* CAROUSEL */ .carousel { margin-bottom: 30px; } .carousel .slick-track { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .carousel .slick-slide { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: auto; } .carousel, .carousel-single { padding: 15px 40px; background: #f2f5f8; border-radius: 5px; } .carousel-single { padding-left: 20px; padding-right: 20px; } .carousel-item { position: relative; text-align: center; } .carousel-item-img { position: relative; display: block; background: #fff; margin: 0 15px 10px; padding: 0; height: 190px; border-radius: 5px; } .carousel-item-img img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .carousel-single .carousel-item-img { margin: 0 10px 10px; } .carousel-item-name { margin-bottom: 1.5rem; text-transform: uppercase; font-weight: 600; font-size: 1.5rem; } .carousel-item-head { margin-bottom: 10px; } .carousel-item-longname { padding: 0 10px; font-weight: 400; font-size: 1.35rem; line-height: 1.2; } .carousel-item-rating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 8px; } .carousel-item-rating div.js_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; cursor: pointer; } .carousel-item-rating--hidden { display: none; } .carousel-item-rating-num { font-size: 1.2rem; font-weight: 500; line-height: 1; color: #909b9d; -webkit-transition: 0.15s ease color; transition: 0.15s ease color; } div.js_nav:hover .carousel-item-rating-num { color: #374c51; } .carousel-item-price { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font-weight: 700; font-size: 1.6rem; color: #ff9b4a; } .carousel-item-price del { display: block; font-size: 1.3rem; line-height: 1; color: #b4bbc2; } .carousel-item-btn { padding-top: 10px; border-top: 2px solid #e7eaed; } .carousel-item-btn a { display: block; padding: 12px 15px; line-height: 1; border-radius: 5px; background: #aaa; color: #fff; text-decoration: none; } .carousel-reduc { position: absolute; top: 10px; left: 0; width: 80px; height: 47px; color: #fff; font-size: 2.4rem; line-height: 1; font-weight: 700; background: url(/Images/reduc-small-alt.svg) no-repeat; } .carousel-reduc > span { display: block; padding-top: 10px; text-align: center; -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } @charset "UTF-8"; /* PRODUIT AJOUTÉ AU PANIER */ /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ .recap__title { position: relative; margin-bottom: 20px; min-height: 51px; padding: 15px 20px 15px 55px; font-size: 2rem; line-height: 1.2; background: #a2d066; color: white; } @media (min-width: 480px) { .recap__title { font-size: 2.2rem; } } .recap__title strong { font-weight: 700; } .recap__title::before { content: ""; position: absolute; top: 17px; left: 15px; width: 25px; height: 25px; border-radius: 25px; background: white url(/Images/check.svg) no-repeat center; background-size: 15px 11px; margin-right: 10px; -ms-flex-negative: 0; flex-shrink: 0; } .recap__alert { position: relative; margin-bottom: 20px; padding: 15px 20px 15px 55px; background: #effbfd; } .recap__alert::before { content: ""; position: absolute; top: 17px; left: 15px; width: 25px; height: 25px; border-radius: 25px; background: #75c5d7 url(/Images/info.svg) no-repeat center; } .recap__alert__title { margin-bottom: 10px; font-weight: 700; font-size: 2rem; line-height: 1.3; color: #75c5d7; } @media (min-width: 480px) { .recap__alert__title { font-size: 2.2rem; } } .recap__alert__title br { display: none; } .recap__alert__text { font-size: 1.6rem; } .recap__alert__text p:not(:last-child) { margin-bottom: 15px; } .recap__alert__text p:not(:first-child) { padding-top: 15px; border-top: 1px solid rgba(117, 197, 215, 0.5); } .recap__product { margin-bottom: 20px; padding: 20px; background: #f9f9f9; } @media (min-width: 480px) { .recap__product { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .recap__product__img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; width: 100px; height: 100px; margin: 0 auto; padding: 10px; border: 1px solid #e6e6e6; background: white; overflow: hidden; } .recap__product__img img { display: block; max-height: 100%; } .recap__product__img img[src*="placeholder_noresult.svg"] { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } @media (max-width: 479px) { .recap__product__details { padding: 20px 0 0; text-align: center; } } @media (min-width: 480px) { .recap__product__details { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 0 0 20px; } } .recap__product__prices { width: 100%; } @media (max-width: 479px) { .recap__product__prices { padding-top: 10px; text-align: center; } } @media (min-width: 480px) and (max-width: 575px) { .recap__product__prices { padding-left: 120px; } } @media (min-width: 576px) { .recap__product__prices { width: 170px; text-align: right; } } .recap__product__title { margin-bottom: 5px; font-weight: 700; font-size: 1.6rem; } .recap__product__ref { display: block; margin-bottom: 5px; color: #6d797c; } .recap__product__price { color: #ff9b4a; font-weight: 700; font-size: 2.2rem; line-height: 1; } .recap__product__reduc { margin-top: 0.5em; font-weight: 700; font-size: 1.6rem; color: #ff9b4a; } .recap__product__reduc strong { display: block; font-size: 1.3rem; font-weight: 400; color: black; } .recap__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 479px) { .recap__actions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .recap__actions > * + * { margin-top: 20px; } } @media (min-width: 480px) { .recap__actions > * + * { margin-left: 20px; } } /* TOOLTIP */ /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ .tooltip { display: block; position: relative; width: 22px; } .tooltip::before { content: ""; display: block; width: 22px; height: 22px; border-radius: 22px; cursor: help; background: black url(/Images/info.svg) no-repeat center center; } .tooltip:hover .tooltip__content { opacity: 1; visibility: visible; top: calc(100% + 5px); pointer-events: auto; } .tooltip--small { width: 18px; } .tooltip--small::before { width: 18px; height: 18px; background-size: 4px 10px; } .tooltip__content { opacity: 0; visibility: hidden; pointer-events: none; position: absolute; top: calc(100% + 2px); z-index: 2; width: 200px; padding: 10px 12px; border-radius: 3px; text-align: left; font-size: 1.3rem; font-weight: normal; background: black; color: white; -webkit-transition: 0.2s ease-out all; transition: 0.2s ease-out all; } .tooltip__content::after { content: ""; position: absolute; bottom: 100%; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } @media (min-width: 480px) { .tooltip__content--larger { width: 300px; } } .tooltip__content--left { right: 0; } .tooltip__content--left::after { right: 11px; margin-right: -5px; } .tooltip--small .tooltip__content--left::after { right: 9px; } .tooltip__content--center { left: calc(50% - 100px); } .tooltip__content--center::after { left: calc(50% - 5px); } .tooltip__content--center.tooltip__content--larger { left: calc(50% - 150px); } /* PRODUCT */ /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ .product__back { margin-bottom: 10px; text-align: right; } .product__back a, .product__back span.js_nav { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 6px 8px; border-radius: 5px; border: 1px solid rgba(109, 121, 124, 0.4); color: #6d797c; font-weight: 700; line-height: 1; cursor: pointer; -webkit-transition: 0.3s ease all; transition: 0.3s ease all; } .product__back a:hover, .product__back span.js_nav:hover { border-color: #6d797c; } .product__back a::before, .product__back span.js_nav::before { content: ""; width: 5px; height: 8px; margin-right: 8px; background: url(/Images/arrow-back.svg) no-repeat 0 0; } .product__layout { margin-bottom: 40px; } @media (min-width: 768px) { .product__layout { display: -ms-grid; display: grid; -ms-grid-columns: 50% 50%; grid-template-columns: 50% 50%; -ms-grid-rows: auto 1fr; grid-template-rows: auto 1fr; } .product__layout > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .product__layout > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .product__layout > *:nth-child(3) { -ms-grid-row: 2; -ms-grid-column: 1; } .product__layout > *:nth-child(4) { -ms-grid-row: 2; -ms-grid-column: 2; } } @media (min-width: 768px) { .product__medias { -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1/span 2; padding-right: 30px; } } .product__logos { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 10px; } .product__logos img { display: block; } @media (max-width: 767px) { .product__logos { display: none; } } .product__brand img { max-width: 120px; max-height: 65px; } @media (max-width: 767px) { .product__gallery { max-width: 400px; margin: 0 auto; } } .product__slideshow { position: relative; aspect-ratio: 1/1; } .product__slideshow > a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .product__slideshow > a > figure > img { max-height: 100% !important; } .product__slideshow-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 10px -3px 0; } .product__slideshow-nav__item { width: 16.6666666667%; padding: 0 3px 6px; } @media (max-width: 479px), (min-width: 992px) and (max-width: 1199px) { .product__slideshow-nav__item { width: 20%; } } .product__slideshow-nav__item > div { position: relative; padding-bottom: 100%; } .product__slideshow-nav__item a.mz-thumb { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 1px; border: 1px solid #d7d7d7; } .product__slideshow-nav__item a.mz-thumb img { max-height: 100%; } .product__slideshow-nav__item a.mz-thumb:last-child { margin-right: 0; } .product__slideshow-nav__item a.mz-thumb-selected { padding: 0; border: 2px solid #75c5d7; } .product__slideshow-nav__item a[data-zoom-id] img, .product__slideshow-nav__item .mz-thumb img { margin: 0 auto; padding-bottom: 0; border-bottom: 0; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .product__slideshow-nav__item a.mz-thumb img { max-width: 64px; max-height: 64px; } } .product__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 15px; } .product__actions > li { position: relative; padding: 0 5px; } .product__actions > li > a, .product__actions > li > button { display: block; -webkit-transition: 0.15s ease-out all; transition: 0.15s ease-out all; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 36px; border: 2px solid #75c5d7; background: white; } .product__actions > li > a:hover, .product__actions > li > button:hover { opacity: 0.65; } .product__actions > li:has(#btnDelFavori[style="display:none;"]):has(#btnAddFavori[style="display:none;"]) { display: none; } .product__share__networks { opacity: 0; visibility: hidden; position: absolute; top: calc(100% + 12px); left: calc(50% - 115px); z-index: 11; width: 230px; padding: 15px 20px; background: white; border-radius: 3px; -webkit-box-shadow: 0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12); box-shadow: 0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12); -webkit-transition: 0.1s ease-out all; transition: 0.1s ease-out all; } .product__share__networks::before { content: ""; position: absolute; right: 109px; width: 0; height: 0; bottom: calc(100% - 6px); border-color: transparent transparent white white; border-style: solid; border-width: 6px; -webkit-box-shadow: -2px 2px 3px -1px rgba(0, 0, 0, 0.15); box-shadow: -2px 2px 3px -1px rgba(0, 0, 0, 0.15); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transform-origin: center; transform-origin: center; } .product__share.is-open .product__share__networks { opacity: 1; visibility: visible; } .product__share__networks > div { margin-bottom: 15px; font-weight: 700; font-size: 1.6rem; line-height: 1; } .product__share__networks ul { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 10px; } .product__share__networks ul button, .product__share__networks ul a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; line-height: 1; background: transparent; border: 0; -webkit-transition: 0.15s ease all; transition: 0.15s ease all; } .product__share__networks ul button svg, .product__share__networks ul a svg { fill: #75c5d7; -webkit-transition: 0.15s ease all; transition: 0.15s ease all; } .product__share__networks ul button.is-copied span, .product__share__networks ul a.is-copied span { font-weight: 700; color: #a2d066; } .product__share__networks ul button.is-copied svg, .product__share__networks ul a.is-copied svg { fill: #a2d066; } .product__share__networks ul button:hover, .product__share__networks ul a:hover { color: #75c5d7; } .product__share__networks ul figure { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; width: 16px; } .product__share__close { position: absolute; top: 15px; right: 15px; width: 12px; height: 12px; background: url(/Images/close.svg) no-repeat 0 0; background-size: 12px 12px; border: 0; opacity: 0.25; -webkit-transition: 0.2s ease opacity; transition: 0.2s ease opacity; } .product__share__close:hover { opacity: 1; } @media (min-width: 768px) { .product__head { -ms-grid-row: 1; grid-row: 1; -ms-grid-column: 2; grid-column: 2; } } .product__details { text-align: right; } @media (max-width: 767px) { .product__details { padding-top: 15px; } } @media (min-width: 768px) { .product__details { -ms-grid-row: 2; grid-row: 2; -ms-grid-column: 2; grid-column: 2; } } .product__title { font-size: 3rem; font-size: clamp(2.4rem, calc(2.1818rem + 0.6818vw), 3rem); margin-bottom: 10px; color: #75c5d7; font-weight: 700; line-height: 1.2; } .product__type { font-size: 2rem; font-size: clamp(1.8rem, calc(1.7273rem + 0.2273vw), 2rem); display: block; margin-bottom: 10px; color: #374c51; font-weight: 700; line-height: 1.2; } .product__ref { margin-bottom: 10px; font-size: 1.4rem; font-weight: 400; color: #6d797c; } .product__desc { margin-bottom: 10px; font-size: 1.6rem; line-height: 1.5; } .product__desc span[data-anchor] { display: inline-block; text-decoration-line: underline; text-decoration-color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; -webkit-transition: 0.15s ease all; transition: 0.15s ease all; font-weight: 600; font-size: 1.4rem; color: #374c51; cursor: pointer; } .product__desc span[data-anchor]:hover, .product__desc span[data-anchor]:focus { color: black; } .product__thematique:not(:empty) { margin-bottom: 15px; padding-bottom: 2px; text-align: right; font-size: 1.4rem; font-weight: 700; border-bottom: 1px solid #75c5d7; } .product__thematique:not(:empty) a { color: #75c5d7; } .product__thematique:not(:empty) a:hover { text-decoration: underline; } .product__packaging { margin-bottom: 10px; color: #6d797c; } .product__rating { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 5px; cursor: pointer; } .product__rating:hover .product__rating__label { text-decoration-color: inherit; } .product__rating__label { padding-left: 6px; font-weight: 700; font-size: 1.4rem; line-height: 1; color: #374c51; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; -webkit-transition: 0.15s ease all; transition: 0.15s ease all; } .product__stock { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; } .product__stock__alertbtn { display: inline-block; vertical-align: middle; margin: 5px 0; padding: 2px 10px; border-radius: 3px; font-size: 1.2rem; font-weight: 700; text-align: center; border: 1px solid #e5d021; background: #e5d021; color: #fff; -webkit-transition: 0.3s ease-out all; transition: 0.3s ease-out all; } .product__stock__alertbtn:hover { background: white; color: #e5d021; } .product__stock__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 5px 0 5px 15px; } .product__stock__text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-align: right; font-weight: 700; font-size: 1.8rem; line-height: 1.2; color: #a2d066; } .product__stock__text::before { content: ""; width: 20px; height: 14px; background: url(/Images/check.svg) no-repeat 0 0; background-size: 20px 14px; margin-right: 10px; } .product__stock--warning .product__stock__text { color: #e5d021; } .product__stock--warning .product__stock__text::before { content: none; } .product__stock__help { padding-left: 8px; } .product__stock__help .tooltip::before { background-color: #a2d066; } .product__stock--warning .product__stock__help .tooltip::before { background-color: #e5d021; } .product__stock__date { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 5px 0 5px 10px; padding: 3px 15px; border-radius: 15px; font-size: 1.4rem; background: #f3f3f3; } .product__stock__date::before { content: ""; width: 14px; height: 16px; margin-right: 8px; background: url(../Images/calendar.svg) no-repeat 0 0; } .product__stock__date span::first-letter { text-transform: uppercase; } .product__purchase { position: relative; margin-bottom: 15px; padding: 30px 20px 20px; background: #fafafa; border-radius: 5px; text-align: center; } @media (min-width: 1200px) { .product__purchase__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .product__purchase--noreduc { padding-top: 20px; } .product__price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1199px) { .product__price { padding-bottom: 20px; } } @media (min-width: 1200px) { .product__price { width: 50%; } } .product__price__HT { font-size: 3.4rem; font-size: clamp(3.1rem, calc(1.3rem + 1.5vw), 3.4rem); display: block; line-height: 1; color: #ff9b4a; font-weight: 700; } .product__price__HT sup { font-size: 50%; top: -1em; } .product__price__TTC { display: block; padding-top: 5px; font-size: 1.8rem; font-weight: 700; } .product__price__public { padding-top: 10px; color: #6d797c; } .product__price__public small { font-size: 1.2rem; } .product__reduc { position: absolute; top: -20px; left: -20px; z-index: 2; width: 80px; height: 56px; color: #fff; font-size: 2.4rem; font-weight: 700; background: url(/Images/reduc-small.svg) no-repeat; } .product__reduc > span { display: block; padding-top: 4px; text-align: center; -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } .product__price__freeshipping { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 10px; padding: 3px 15px; border-radius: 15px; font-weight: 700; font-size: 1.4rem; background: rgba(162, 208, 102, 0.25); color: #a2d066; } .product__price__freeshipping::before { content: ""; width: 20px; height: 16px; margin-right: 8px; background: url(../Images/shipping.svg) no-repeat 0 0; } @media (min-width: 1200px) { .product__criteria { width: 50%; } } .product__quantity { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border: 1px solid rgba(109, 121, 124, 0.4); border-radius: 5px; overflow: hidden; background: white; color: #757a7f; text-align: center; } .product__quantity input[type=text] { width: 50px; padding: 5px; border: 1px solid rgba(109, 121, 124, 0.4); border-width: 0 1px; background: white; color: #383737; text-align: center; font-size: 1.8rem; font-weight: 600; } .product__quantity input[type=text]:focus { outline: none; } .product__quantity button[class*=product__quantity] { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; padding: 0; border: 0; font-size: 2.2rem; font-weight: 400; background-color: transparent; background-repeat: no-repeat; background-position: center center; color: transparent; cursor: pointer; -webkit-transition: 0.1s ease-out all; transition: 0.1s ease-out all; } .product__quantity button[class*=product__quantity] svg { fill: #383737; -webkit-transition: 0.1s ease-out all; transition: 0.1s ease-out all; } .product__quantity button[class*=product__quantity]:hover { background: rgba(109, 121, 124, 0.4); } .product__quantity button[class*=product__quantity]:hover svg { fill: white; } .product__quantity button[class*=product__quantity]:focus { outline: none; } .product__selectchoice { display: block; max-width: 100%; } .selectric-product__selectchoice { margin: 15px auto 0; max-width: 220px; } .selectric-product__selectchoice .selectric-label { text-align: left; } .selectric-product__selectchoice .selectric-label span:nth-child(1):not(:only-child) { font-weight: 700; } .selectric-product__selectchoice .selectric-label span:nth-child(1):not(:only-child)::after { content: "-"; padding: 0 3px; font-weight: 400; } .selectric-product__selectchoice .selectric-items li { display: block; text-align: left; } .selectric-product__selectchoice .selectric-items li:nth-child(odd) { background: rgba(55, 76, 81, 0.05); } .selectric-product__selectchoice .selectric-items li:nth-child(odd):hover { background: #75c5d7; } .selectric-product__selectchoice .selectric-items li span:nth-child(1) { font-weight: 700; font-size: 1.5rem; } .selectric-product__selectchoice .selectric-items li span:nth-child(2) { display: block; font-size: 1.3rem; } .selectric-product__selectchoice .selectric-items li span:nth-child(3) { display: block; padding-top: 3px; font-size: 1.2rem; font-style: italic; color: rgba(109, 121, 124, 0.8); } .selectric-product__selectchoice .selectric-items li:not(.disabled):hover span { color: white; } .selectric-product__selectchoice .selectric-items li[data-index="0"] { display: block; background: rgba(55, 76, 81, 0.25); } .selectric-product__selectchoice .selectric-items li[data-index="0"] span { font-weight: 500; font-size: 1.4rem; } .product__selectchoice__error { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 10px 0 15px; font-weight: 700; color: #da4141; } .product__selectchoice__error::before { content: ""; width: 18px; height: 18px; border-radius: 18px; margin-right: 5px; background: #da4141 url(/Images/close-white.svg) no-repeat center center; background-size: 8px 8px; } .product__pricing { margin-bottom: 15px; text-align: center; } .product__pricing p { padding: 5px 0; border-radius: 5px 5px 0 0; color: #fff; background: #b1d982; font-weight: 700; font-size: 1.5rem; } .product__pricing ul { padding: 10px; background: #fafafa; } .product__pricing ul strong { font-size: 1.3rem; font-weight: 700; } .product__pricing ul small { font-size: 1.2rem; } .product__pricing__price { font-weight: 700; color: #ff9b4a; } .product__inventory { margin-bottom: 30px; } @media (max-width: 479px), (min-width: 768px) and (max-width: 1199px) { .product__inventory, .product__inventory tbody, .product__inventory tr { display: block !important; } .product__inventory thead { display: none !important; } .product__inventory td { display: -webkit-box; display: -ms-flexbox; display: flex; } .product__inventory td:not(:last-child) { border-bottom: 1px solid white; } .product__inventory td:first-child, .product__inventory td:first-child::before { border-top-left-radius: 5px; } .product__inventory td:last-child, .product__inventory td:last-child::before { border-bottom-left-radius: 5px; } .product__inventory td::before { content: attr(data-th); width: 120px; margin: -8px 8px -8px -8px; padding: 8px; font-weight: 700; font-size: 1.3rem; text-align: right; background: #75c5d7; color: white; } } .product__inventory th, .product__inventory td { padding: 5px; text-align: center; line-height: 1.1; } .product__inventory th { background: #75c5d7; border-right: 1px solid #fff; font-size: 1.4rem; font-weight: 700; color: #fff; } .product__inventory th:first-child { border-top-left-radius: 5px; } .product__inventory th:last-child { border: 0; border-top-right-radius: 5px; } .product__inventory td { padding: 8px 5px; background: #fafafa; } .product__inventory td:first-child { border-bottom-left-radius: 5px; } .product__inventory td:last-child { border-bottom-right-radius: 5px; } .product__inventory__appro { font-weight: 700; } .product__freeshipping { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; } .product__freeshipping::before { content: ""; width: 30px; height: 24px; margin-right: 10px; -ms-flex-negative: 0; flex-shrink: 0; background: url(../Images/truck.svg) no-repeat 0 0; background-size: 30px 24px; } .product__freeshipping strong { font-weight: 700; font-size: 1.5rem; color: #9fd066; } .product__addtocart { padding-top: 20px; } .product__addtocart__btn { display: block; margin: 0 auto; max-width: 350px; padding: 15px 20px; background: black; color: white; border-radius: 5px; border: 0; font-size: 2rem; line-height: 1; text-align: center; cursor: pointer; -webkit-transition: 0.2s ease-out background-color; transition: 0.2s ease-out background-color; } .product__addtocart__btn:hover { background: #6d797c; } .product__addtocart__btn[disabled=disabled] { background: #ccc; cursor: default; } .product__addtocart__btn[disabled=disabled]:hover { background: #ccc; } .product__knowall { font-size: 2.4rem; font-size: clamp(2rem, calc(1.8545rem + 0.4545vw), 2.4rem); margin: 30px 0; position: relative; font-weight: 700; color: #75c5d7; } .product__sections { position: relative; } .product__nav { position: sticky; top: 85px; z-index: 10; padding: 0; font-size: 1.6rem; } body:is(.menu-open, .search-open) .product__nav { position: static; } @media (max-width: 767px) { .product__nav { display: none; } } @media (min-width: 1200px) { .product__nav { top: 145px; font-size: 1.7rem; } } .product__nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding: 0 3px; background: #fafafa; border-radius: 5px; } .product__nav.is-sticky ul { -webkit-box-shadow: 0 3px 15px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 15px 5px rgba(0, 0, 0, 0.2); } .product__nav li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 12px; text-align: center; } .product__nav li > a, .product__nav li > span { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 12px 0 14px; font-weight: 500; line-height: 1; cursor: pointer; } .product__nav li > a::after, .product__nav li > span::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 5px; background: transparent; -webkit-transition: background 0.1s ease; transition: background 0.1s ease; } .product__nav li > a:focus, .product__nav li > span:focus { outline: none; } .product__nav li > a:hover::after, .product__nav li > span:hover::after { background: #75c5d7; } .product__nav .is-active > a, .product__nav .is-active > span { color: #75c5d7; font-weight: 700; } .product__nav .is-active > a::after, .product__nav .is-active > span::after { background: #75c5d7; } .product__nav ul::after { content: ""; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: #75c5d7; } .product__nav.is-sticky ul::after { background: transparent; } .product__section { margin: 10px 0 0; padding: 20px 0 0; } .product__section__title { font-size: 2.4rem; font-size: clamp(2rem, calc(1.8545rem + 0.4545vw), 2.4rem); margin: 0 0 15px; position: relative; font-weight: 700; color: #75c5d7; } @media (max-width: 575px) { .product__section__title { margin: 0 0 10px; padding-right: 26px; } } .product__section__title span { display: inline-block; border-bottom: 6px solid #75c5d7; } @media (max-width: 575px) { .product__section__title span { padding-bottom: 5px; } } .product__section__title small { font-size: 75%; } @media (max-width: 575px) { .product__section__title { cursor: pointer; } .product__section__title::before { content: ""; position: absolute; top: calc(50% - 5px); right: 0; background: url(/Images/toggle-product-section.svg) no-repeat 0 0; width: 16px; height: 10px; } .is-open .product__section__title::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } .product__section__title::after { content: ""; position: absolute; bottom: 3px; left: 0; right: 0; height: 1px; background: #75c5d7; } @media (max-width: 575px) { .product__section__content { display: none; } } .product__features { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.5rem; } @media (min-width: 576px) { .product__features { font-size: 1.6rem; } } .product__features dt:nth-child(4n+1), .product__features dt:nth-child(4n+1) + dd { background-color: #f3f3f3; } .product__features dt { width: 100%; padding: 10px 15px 3px; } @media (min-width: 576px) { .product__features dt { width: 30%; padding: 6px 0 6px 20px; text-align: right; } } .product__features dd { width: 100%; margin: 0; padding: 0 15px 10px; font-weight: 700; } @media (min-width: 576px) { .product__features dd { width: 70%; padding: 6px 0 6px 30px; } } .product__features a { color: #75c5d7; } .product__features a:hover, .product__features a:focus { text-decoration: underline; } .product__features__madein, .product__features__madein + span { display: inline-block; vertical-align: middle; } .product__features__madein + span { margin-left: 6px; } .product__features__pictosecu { display: inline-block; vertical-align: middle; } .product__features__pictosecu + .product__features__pictosecu { margin-left: 6px; } .product__dimension:not(:first-child)::before { content: ", "; } .product__video { margin-top: 30px; } .product__section__content:empty + .product__video { margin-top: 0; } .product__video__embed { position: relative; overflow: hidden; padding-bottom: 56.25%; } .product__video__embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product__video__cover { margin: 0; padding-bottom: 56.25%; position: relative; cursor: pointer; background: black; } .product__video__cover div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .product__video__cover div::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/Images/youtube-play.svg) no-repeat center center; } .product__video__cover img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product__video__cover img[src*=maxresdefault] { opacity: 0.95; } .product__video__cover img[src*=hqdefault] { opacity: 0.85; } .product__energyclass { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 60px; height: 34px; padding: 0 10px; font-family: "Arial", sans-serif; font-weight: 700; font-size: 2.2rem; line-height: 1; background: #555; color: white; cursor: pointer; } .product__energyclass::after { content: ""; position: absolute; top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-width: 17px 0 17px 20px; border-color: transparent transparent transparent #555; } .product__energyclass[data-eprel=""] { cursor: default; } .product__energyclass[data-range="A|G"][data-value=A], .product__energyclass[data-range="A++|E"][data-value="A++"], .product__energyclass[data-range="A++|G"][data-value="A++"], .product__energyclass[data-range="A+++|D"][data-value="A+++"] { background: #00a651; } .product__energyclass[data-range="A|G"][data-value=A]::after, .product__energyclass[data-range="A++|E"][data-value="A++"]::after, .product__energyclass[data-range="A++|G"][data-value="A++"]::after, .product__energyclass[data-range="A+++|D"][data-value="A+++"]::after { border-left-color: #00a651; } .product__energyclass[data-range="A|G"][data-value=B], .product__energyclass[data-range="A++|E"][data-value="A+"], .product__energyclass[data-range="A++|G"][data-value="A+"], .product__energyclass[data-range="A+++|D"][data-value="A++"] { background: #50b848; } .product__energyclass[data-range="A|G"][data-value=B]::after, .product__energyclass[data-range="A++|E"][data-value="A+"]::after, .product__energyclass[data-range="A++|G"][data-value="A+"]::after, .product__energyclass[data-range="A+++|D"][data-value="A++"]::after { border-left-color: #50b848; } .product__energyclass[data-range="A|G"][data-value=C], .product__energyclass[data-range="A++|E"][data-value=A], .product__energyclass[data-range="A++|G"][data-value=A], .product__energyclass[data-range="A+++|D"][data-value="A+"] { background: #bfd730; } .product__energyclass[data-range="A|G"][data-value=C]::after, .product__energyclass[data-range="A++|E"][data-value=A]::after, .product__energyclass[data-range="A++|G"][data-value=A]::after, .product__energyclass[data-range="A+++|D"][data-value="A+"]::after { border-left-color: #bfd730; } .product__energyclass[data-range="A|G"][data-value=D], .product__energyclass[data-range="A++|E"][data-value=B], .product__energyclass[data-range="A++|G"][data-value=B], .product__energyclass[data-range="A+++|D"][data-value=A] { background: #fff200; } .product__energyclass[data-range="A|G"][data-value=D]::after, .product__energyclass[data-range="A++|E"][data-value=B]::after, .product__energyclass[data-range="A++|G"][data-value=B]::after, .product__energyclass[data-range="A+++|D"][data-value=A]::after { border-left-color: #fff200; } .product__energyclass[data-range="A|G"][data-value=E], .product__energyclass[data-range="A++|E"][data-value=C], .product__energyclass[data-range="A++|G"][data-value=C], .product__energyclass[data-range="A+++|D"][data-value=B] { background: #fdb913; } .product__energyclass[data-range="A|G"][data-value=E]::after, .product__energyclass[data-range="A++|E"][data-value=C]::after, .product__energyclass[data-range="A++|G"][data-value=C]::after, .product__energyclass[data-range="A+++|D"][data-value=B]::after { border-left-color: #fdb913; } .product__energyclass[data-range="A|G"][data-value=F], .product__energyclass[data-range="A++|E"][data-value=D], .product__energyclass[data-range="A++|G"][data-value=D], .product__energyclass[data-range="A+++|D"][data-value=C] { background: #f37021; } .product__energyclass[data-range="A|G"][data-value=F]::after, .product__energyclass[data-range="A++|E"][data-value=D]::after, .product__energyclass[data-range="A++|G"][data-value=D]::after, .product__energyclass[data-range="A+++|D"][data-value=C]::after { border-left-color: #f37021; } .product__energyclass[data-range="A|G"][data-value=G], .product__energyclass[data-range="A++|E"][data-value=E], .product__energyclass[data-range="A++|G"][data-value=E], .product__energyclass[data-range="A++|G"][data-value=F], .product__energyclass[data-range="A++|G"][data-value=G], .product__energyclass[data-range="A+++|D"][data-value=D] { background: #ed1c24; } .product__energyclass[data-range="A|G"][data-value=G]::after, .product__energyclass[data-range="A++|E"][data-value=E]::after, .product__energyclass[data-range="A++|G"][data-value=E]::after, .product__energyclass[data-range="A++|G"][data-value=F]::after, .product__energyclass[data-range="A++|G"][data-value=G]::after, .product__energyclass[data-range="A+++|D"][data-value=D]::after { border-left-color: #ed1c24; } .product__energyclass-legend { display: block; padding-top: 5px; font-weight: 400; font-size: 1.3rem; color: #6d797c; } .product__globalrating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #dadada; } .product__globalrating__average { font-weight: 700; font-size: 3.6rem; line-height: 1; padding-bottom: 10px; } .product__globalrating__stars { position: relative; width: 121px; height: 22px; background: url(/Images/stars-off.svg) no-repeat 0 0; background-size: 121px 22px; } .product__globalrating__stars span { position: absolute; top: 0; left: 0; height: 22px; background: url(/Images/stars-on.svg) no-repeat 0 0; background-size: 121px 22px; } .product__globalrating__label { padding-top: 10px; font-weight: 700; font-size: 1.6rem; line-height: 1; } .product__reviews { margin: 0 0 30px; } .product__review { padding: 20px 0; } @media (min-width: 480px) { .product__review { display: -webkit-box; display: -ms-flexbox; display: flex; } } .product__review:not(:last-child) { border-bottom: 1px solid #dadada; } @media (min-width: 480px) { .product__review__metas { width: 150px; text-align: center; } } .product__review__comment { font-weight: normal; font-size: 1.4rem; line-height: 1.4; color: black; } @media (max-width: 479px) { .product__review__comment { padding-top: 3px; } } @media (min-width: 480px) { .product__review__comment { width: calc(100% - 150px); } } .product__review__stars { display: inline-block; position: relative; width: 77px; height: 15px; background: url(/Images/stars-off.svg) no-repeat 0 0; background-size: 77px 15px; } .product__review__stars span { position: absolute; top: 0; left: 0; height: 15px; background: url(/Images/stars-on.svg) no-repeat 0 0; background-size: 77px 15px; } .product__review__date { display: block; } .product__reviews-all { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product__footnotes { margin-top: 30px; padding-top: 15px; border-top: 1px solid #75c5d7; font-size: 1.3rem; color: #6d797c; } .product__footnotes li:not(:last-child) { margin-bottom: 2px; } /* BLOCS SEO */ /* MIXINS */ /* Variables de couleur */ /* Couleurs univers */ /* Breakpoints */ /* Gestion des breakpoints */ .seolinks { background: #f2f5f8; } .seolinks a { text-decoration: none; } .seolinks a:hover, .seolinks a:focus { text-decoration: underline; } @media (max-width: 767px) { .seolinks { padding: 30px 10px; } } .seolinks__layout { position: relative; z-index: 21; } @media (min-width: 768px) { .seolinks__layout { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .seolinks__col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (max-width: 767px) { .seolinks__col { max-width: 500px; margin: 0 auto; } } @media (min-width: 768px) { .seolinks__col { margin-bottom: 2px; width: 25%; } .seolinks__col.seolinks__brands { width: 50%; } .seolinks__col.seolinks__brands--full { width: 100%; } } .seolinks__content { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 20px 15px 0; } .seolinks__brands--full .seolinks__content { padding: 0; } @media (min-width: 768px) { .seolinks__brands--full .seolinks__content { padding-top: 30px; } } .seolinks__topsearch, .seolinks__themes { border-radius: 5px; position: relative; background: #9ad5e2; } @media (min-width: 768px) { .seolinks__topsearch, .seolinks__themes { border-radius: 0 0 5px 5px; } .seolinks__topsearch::before, .seolinks__themes::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 10px; border-radius: 5px 5px 0 0; background: #9ad5e2; } .seolinks__topsearch .seolinks__content, .seolinks__themes .seolinks__content { padding-top: 5px; } } .seolinks__themes { background: #374c51; } .seolinks__themes::before { background: #374c51; } .seolinks__list { overflow: hidden; height: 245px; width: 100%; position: relative; } .seolinks__brands .seolinks__list { height: 230px; } .seolinks__brands--full .seolinks__list:has(.seolinks__contextual) { height: auto; } .seolinks__contextual { font-size: 1.3rem !important; color: #374C51; } .seolinks__contextual a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 2px; color: #75c5d7; -webkit-transition: 0.1s ease all; transition: 0.1s ease all; } .seolinks__contextual a:hover { text-decoration-color: inherit; } .seolinks__contextual > p:not(:last-child), .seolinks__contextual > ul:not(:last-child) { margin-bottom: 0.8em; } .seolinks__contextual > ul { padding-left: 10px; } .seolinks__contextual > ul li::before { content: "-"; display: inline-block; margin-right: 5px; } .seolinks__contextual > br:last-child { display: none; } .seolinks__brands:not(.seolinks__brands--full) .seolinks__contextual { width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow: auto; cursor: url(/Images/cursor_scrollable.cur), default; cursor: url(/Images/cursor_scrollable.png) 9 0, default; } .seolinks__brands--full .seolinks__contextual { width: 100%; padding-right: 0; } @media (min-width: 768px) { .seolinks__brands--full .seolinks__contextual { margin-bottom: 30px; } } .seolinks__links { width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow: auto; font-size: 1.3rem; line-height: 1; cursor: url(/Images/cursor_scrollable.cur), default; cursor: url(/Images/cursor_scrollable.png) 9 0, default; } .seolinks__links li { display: block; cursor: url(/Images/cursor_scrollable.cur), default; cursor: url(/Images/cursor_scrollable.png) 9 0, default; } @media (max-width: 991px) { .seolinks__links li { margin-bottom: 3px; } } .seolinks__links a { display: inline-block; padding: 0.3em 0; color: white; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 2px; -webkit-transition: 0.1s ease-in-out all; transition: 0.1s ease-in-out all; } .seolinks__links a:hover, .seolinks__links a:focus { text-decoration-color: inherit; } @media (max-width: 991px) { .seolinks__links a { display: block; padding: 0.6em 0; } } .seolinks__brands .seolinks__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-height: 100%; height: auto; -ms-flex-wrap: wrap; flex-wrap: wrap; } .seolinks__brands .seolinks__links li { width: 33.3333333333%; } @media (max-width: 991px) { .seolinks__brands .seolinks__links li { width: 50%; } } .seolinks__brands .seolinks__links a { color: #374C51; } @media (min-width: 576px) and (max-width: 767px) { .seolinks__brands--full .seolinks__links li { width: 33.3333333333%; } } @media (min-width: 768px) and (max-width: 991px) { .seolinks__brands--full .seolinks__links li { width: 20%; } } @media (min-width: 992px) { .seolinks__brands--full .seolinks__links li { width: 16.6666666667%; } } .seolinks__title { font-size: 2.8rem; font-size: clamp(2.2rem, calc(1.9818rem + 0.6818vw), 2.8rem); margin: 0 0 15px; line-height: 1; font-weight: 700; color: white; } .seolinks__brands .seolinks__title { color: #75c5d7; } @media (min-width: 768px) { .seolinks__brands .seolinks__title { text-align: center; } } .seolinks__brands--full .seolinks__title { margin-bottom: 25px; } .seolinks__more { padding: 10px 15px 15px; text-align: right; font-size: 1.2rem; } .seolinks__more a, .seolinks__more span.js_nav { color: white; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 2px; -webkit-transition: 0.1s ease-in-out all; transition: 0.1s ease-in-out all; } .seolinks__more a:hover, .seolinks__more a:focus, .seolinks__more span.js_nav:hover, .seolinks__more span.js_nav:focus { text-decoration-color: inherit; } @media (max-width: 991px) { .seolinks__more a, .seolinks__more span.js_nav { display: block; padding: 0.5em 0; } } .seolinks__themes .seolinks__more a, .seolinks__brands .seolinks__more span.js_nav { color: #5b7e86; } .seolinks__brands .seolinks__more a, .seolinks__brands .seolinks__more span.js_nav { color: #75c5d7; } .seolinks__brands--full .seolinks__more { padding: 15px 0 0; } @media (min-width: 768px) { .seolinks__brands--full .seolinks__more { padding: 20px 0 30px; font-size: 1.3rem; text-align: center; } }