.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb} /* ------------------------------------------------------------------------------ Colors Hex code RGB code Opacity variations ====================== =========== =============== ======================================= White #fff 255,255,255 0.7 (Full header), 0.9 (small header) Background (dark) #2e2e2e 46,46,46 0.9 (top header desktop) :alternate #373737 :hover #252525 37,37,37 :border #555 Black (texts) #272727 39,39,39 :hover #717171 113,113,113 Grey (texts) #bebebe 190,190,190 :hover #fff 255,255,255 Gold #aa8667 170,134,103 pantone #827e78 130,126,120 -------------------------------------------------------------------------------- Media queries ====================== @media (max-width: 1024px) {} @media (max-width: 900px) {} @media (max-width: 768px) {} @media (max-width: 480px) {} -------------------------------------------------------------------------------- ------------------------------------------------------------------------------ */ @font-face { font-family: 'Vanitas Stencil'; src: url('../fonts/VanitasStencil/vanitasstencilregular-webfont.eot'); src: url('../fonts/VanitasStencil/vanitasstencilregular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/VanitasStencil/vanitasstencilregular-webfont.woff2') format('woff2'), url('../fonts/VanitasStencil/vanitasstencilregular-webfont.woff') format('woff'), url('../fonts/VanitasStencil/vanitasstencilregular-webfont.ttf') format('truetype'), url('../fonts/VanitasStencil/vanitasstencilregular-webfont.svg#vanitas_stencilregular') format('svg'); font-weight: normal; font-style: normal; } @font-face{ font-family: 'Gotham Light'; src: url('../fonts/Gotham/GothamLight.eot'); src: url('../fonts/Gotham/GothamLight.woff2') format('woff2'), url('../fonts/Gotham/GothamLight.woff') format('woff'), url('../fonts/Gotham/GothamLight.ttf') format('truetype'), url('../fonts/Gotham/GothamLight.svg#Gotham-Light') format('svg'); font-weight: normal; font-style: normal; } @font-face{ font-family: 'Gotham Light'; src: url('../fonts/Gotham/GothamMedium.eot'); src: url('../fonts/Gotham/GothamMedium.woff2') format('woff2'), url('../fonts/Gotham/GothamMedium.woff') format('woff'), url('../fonts/Gotham/GothamMedium.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face{ font-family: 'bettisregular'; src: url('../fonts/Bettis/bettihanone-webfont.eot'); src: url('../fonts/Bettis/bettihanone-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Bettis/bettihanone-webfont.woff') format('woff'), url('../fonts/Bettis/bettihanone-webfont.ttf') format('truetype'), url('../fonts/Bettis/bettihanone-webfont.svg#bettisregular') format('svg'); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html, body { position: static; overflow-x: hidden; word-break: keep-all; } html[lang="zh-CN"], html[lang="zh-CN"] body { word-break: normal; } body { background-color: #fff; } img { border: none; } .attachment-full, .size-full { width: 100%; height: auto; } ul, ol { list-style: none; } .two-columns { column-count: 2; } .three-columns { column-count: 3; } .four-columns { column-count: 4; } .five-columns { column-count: 5; } *.hidden { display: none; } a { position: relative; text-decoration: none; color: inherit; } /* Social networks colors */ a.rss:hover { background-color: #ffa133; } a.facebook:hover { background-color: #37589b; } a.twitter:hover { background-color: #46d4fe; } a.email:hover { background-color: #9fae37; } a.dribble:hover { background-color: #e44885; } a.linkedin:hover { background-color: #419cca; } a.search:hover { background-color: #222; } a.gplus:hover { background-color: #de5a49; } a.behance:hover { background-color: #008cfa; } a.flickr:hover { background-color: #ff0086; } a.forrst:hover { background-color: #234317; } a.myspace:hover { background-color: #000; } a.tumblr:hover { background-color: #345574; } a.vimeo:hover { background-color: #31baff; } a.youtube:hover { background-color: #a72b1d; } a.pinterest:hover { background-color: #cb2027; } a.skype:hover { background-color: #12a5f4; } a.instagram:hover { background-color: #a67658; } a.five100px:hover { background-color: #222; } a.soundcloud:hover { background-color: #f76700; } a.xing:hover { background-color: #006567; } a.vk:hover { background-color: #597ba5; } a.reddit:hover { background-color: #ff4500; } a > img, .a > img { position: relative; left: 50%; width: 100%; height: auto; display: block; transform: translate(-50%, 0) scale(1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } a:hover > img, .a:hover > img { transform: translate(-50%, 0) scale(1.05); } .hidden-overflow { overflow: hidden; } /* ------------------------------------------------------------------------------ Font ------------------------------------------------------------------------------ */ * { font-family: "Gotham Light", "Gotham"; } h1,h2, h3, h4,h5,h6, .h1, .h2, .h3, .h4 { font-family: "Vanitas Stencil"; font-weight: normal; letter-spacing: 2px; line-height: 1.3; } h1, .h1 { font-size: 56px; font-weight: normal; letter-spacing: 3px; padding: 10px 0; } h1.small, .h1.small { font-size: 38px; letter-spacing: 2px; padding: 0; } h2, .h2 { font-size: 38px; font-variant: small-caps; text-transform: lowercase; } h2.small, .h2.small { padding: 10px 10px 0; font-size: 24px; font-variant: normal; text-transform: none; } .fifty-fifty h2 { text-align: left; padding: 0 10px 20px; } h3, .h3 { font-size: 20px; padding: 10px; } .h3 { padding: 20px 0; margin: 0 auto; } h4, .h4 { padding: 0; font-size: 16px; } p, .p { font-size: 16px; line-height: 1.5; padding: 10px; } h2 + p, h2 + .p, .h2 + p, .h2 + .p { padding-top: 0; } .p1 { padding: 10px 0; text-align: left; font-size: 18px; line-height: 1.6; max-width: 750px; margin: 0 auto; } *.inherit { padding: 0; font-size: inherit; font-family: inherit; font-variant: inherit; text-transform: inherit; line-height: inherit; } *.strong { display: inline; font-weight: bold; } .border-top-wrapper { -ms-flex-align: center; align-items: center; } .border-top-wrapper .border { display: inline-block; border: none; height: 3px; margin: 0; text-align: left; max-width: 50%; background-color: #fff; -ms-flex: 1 1 auto; flex: 1 1 auto; } .border-top-wrapper .article-category { display: inline-block; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 5px 10px; margin: 0 5px; color: #272727; background-color: rgba(255, 255, 255, 0.9); font-family: "Helvetica neue", sans-serif; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing: 2px; text-transform: lowercase; } .border-top-wrapper + h2, .border-top-wrapper + h2.small, .border-top-wrapper + .h2.small, .border-top-wrapper + h3 { border-bottom: 1px solid; margin: 0; padding: 0 0 10px; } .borders { border-top: 3px solid; border-bottom: 1px solid; } .back-img { background-repeat: no-repeat; background-position: top center; background-size: cover; } /* ------------------------------------------------------------------------------ HEADER ------------------------------------------------------------------------------ */ body > header { position: fixed; z-index: 100; width: 100%; height: 130px; } body.scrolled > header { height: 90px; } body > header .inner, nav { max-width: 1280px; margin: 0 auto; padding: 0 50px; overflow: visible; transition: padding .4s linear; } /* ------------------------------ Top header ------------------------------ */ #topHeader { position: absolute; top: 0; width: 100%; height: 30px; background-color: #2e2e2e; z-index: 10; color: #fff; font-size: 0.85rem; } #topHeader ul { position: relative; display: inline-block; margin: 0; padding: 2px 0 0; } #topHeader .extra { float: right; right: 20px; } #topHeader ul li { display: inline-block; padding: 0; margin: 0; list-style: outside none; } #topHeader .social li { margin-right: 10px; } #topHeader .extra li { margin-left: 10px; } #topHeader ul li a { background-color: transparent; line-height: 25px; text-align: center; vertical-align: baseline; border-radius: 50%; transition: color .2s; } #topHeader ul li a:hover { color: #aa8667; } #topHeader .social li a { display: block; width: 25px; height: 100%; transition: all .2s; } #topHeader .social li a::before, #topHeader .extra li::before { line-height: 25px; font-size: 12px; } #topHeader .extra li a::before { margin-right: 5px; } /* ------------------------------ Language selector ------------------------------ */ #mainHeader .languages { position: absolute; top: -30px; right: calc((100% - 1260px) / 2); height: 30px; width: 50px; padding: 0; border-left: 1px solid rgba(255,255,255,.6); background-color: #2e2e2e; font-size: 12px; overflow-y: hidden; z-index: 10; cursor: pointer; } body.ios-support #mainHeader .languages.open, body.ios-7-support #mainHeader .languages.open, body:not(.ios-support) #mainHeader .languages:hover, body:not(.ios-7-support) #mainHeader .languages:hover { height: auto; } @media screen and (max-width: 1280px) { #topHeader .extra { right: 30px; } #mainHeader .languages { right: 20px; } } #mainHeader .languages::after { content: "\e259"; position: absolute; top: 1px; right: 5px; display: block; color: #fff; font-family: "Glyphicons Halflings"; font-size: 11px; line-height: 30px; cursor: pointer; } body.ios-support #mainHeader .languages.open::after, body.ios-7-support #mainHeader .languages.open::after, body:not(.ios-support) #mainHeader .languages:hover::after, body:not(.ios-7-support) #mainHeader .languages:hover::after { content: "\e260"; color: #000; } #mainHeader .languages li { position: relative; display: block; width: 100%; line-height: 30px; text-align: left; } #mainHeader .languages li.active { padding-left: 10px; } #mainHeader .languages.open li:hover, #mainHeader .languages:hover li:hover { color: #000; background-color: #fff; } #mainHeader .languages li a { display: block; padding: 0 20px 0 10px; } /* ------------------------------ Logo ------------------------------ */ #logo, #picto { position: absolute; left: 50%; display: block; top: 10px; height: 80px; width: auto; z-index: 10; transform: translate(-50%, 0); } .scrolled #logo, .scrolled #picto { top: 5px; height: 50px; overflow: visible; } #logo { top: 10px; opacity: 1; transition: height .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .scrolled #logo { opacity: 0; } #picto { height: 50px; opacity: 0; transition: opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s; } .scrolled #picto { opacity: 1; } #logo img, #picto img { height: 100%; width: auto; transition: none; transform: translate(-50%, 0); } .scrolled.picto #picto { transition: height .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .scrolled.picto #logo { transition: opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1) .3s; } /* ------------------------------ Main header ------------------------------ */ #mainHeader { position: absolute; top: 30px; width: 100%; height: 100px; background-color: #ffffff; color: #795548;; text-align: center; text-transform: lowercase; font-variant: small-caps; transition: height .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .scrolled #mainHeader { height: 60px; } #mainHeader .bg { position: absolute; top: -30px; width: 100%; height: calc(100% + 30px); background-color: #ffffff; } #mobileToggle span.open, #mobileToggle span.close { display: none; } /* -------------------------------- IE9 fix -------------------------------- */ .no-flexboxtweener.no-flexbox nav .first.level { display: block; width: 100%; } .no-flexboxtweener.no-flexbox nav .first.level > li { width: 13%; vertical-align: bottom; } .no-flexboxtweener.no-flexbox nav .flex-col-logo { display: inline-block; } .no-flexboxtweener.no-flexbox nav .second.level { padding: 0 50px; text-align: center; } .no-flexboxtweener.no-flexbox nav .second.level > li { display: inline-block; vertical-align: top; } .no-flexboxtweener.no-flexbox nav .third.level { display: none; } .no-flexboxtweener.no-flexbox #brandList > .inner { display: block; width: 100%; } /* ------------------------------------------------------------------------------ Main content ------------------------------------------------------------------------------ */ #content { position: relative; z-index: 0; display: block; padding-top: 130px; min-height: calc(100vh - 50px); /* browser viewport - footer height */ } .normal, .alternate { position: relative; width: 100vw; padding: 0; } .normal { color: #2e2e2e; background-color: #fff; } .alternate { color: #fff; background-color: #2e2e2e; } .normal:not(.no-arrow)::before, .alternate:not(.no-arrow)::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 10; display: block; width: 0; height: 0; border-top: 25px solid; border-left: 25px solid transparent; border-right: 25px solid transparent; transform: translate(-50%, 0); } .normal:first-child::before, .alternate:first-child::before { border: none; } .inner { position: relative; display: block; max-width: 1280px; margin: 0 auto; padding: 50px 50px 40px; overflow: hidden; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .inner > h2 { padding: 0 0 40px; text-align: center; } .full-width-image > img { width: 100%; height: auto; } .fifty-fifty div[class*=flex-cont] > .inner { padding: 50px 25px 40px; } /* -------------------------------- Closable content -------------------------------- */ .closable-content .open-btn { display: none; margin-bottom: 40px; } .closable-content.close::before, .closable-content.close::after { display: none; } .closable-content.close .open-btn { display: inline-block; } .closable-content.close > .inner { height: 0; padding: 0 50px; opacity: 0; } /* -------------------------------- Highlight Tag -------------------------------- */ i.highlight { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 5px; font-variant: small-caps; } .normal i.highlight { background-color: rgba(46,46,46,0.9); color: #fff; } .alternate i.highlight { background-color: rgba(255,255,255,0.9); color: #272727; } /* -------------------------------- Media lightbox -------------------------------- */ #mediaLightbox { position: fixed; top: 0; left: 0; z-index: -1000; width: 100%; height: 100%; background-color: rgba(46,46,46,0.9); cursor: pointer; visibility: hidden; opacity: 0; transition: visibility .3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1); } #mediaLightbox::before, #mediaLightbox::after { content: ""; position: absolute; top: 20px; right: 20px; width: 25px; height: 5px; background-color: #fff; z-index: 1; } #mediaLightbox::before { transform: rotate(-45deg); } #mediaLightbox::after { transform: rotate(45deg); } .media-lightbox-open #mediaLightbox { z-index: 1000; visibility: visible; opacity: 1; } #mediaLightbox .inner { position: absolute; top: 50%; left: 50%; max-width: none; margin: 0; padding: 0; transform: translate(-50%, -50%); transition: none; } #mediaLightbox img, #mediaLightbox iframe { position: relative; width: auto; height: auto; max-width: 90vw; max-height: 90vh; display: block; cursor: default; } #mediaLightbox img { background-color: #fff; } #mediaLightbox iframe { width: 90vw; height: calc(90vw * (9 / 16)); } /* ------------------------------------------------------------------------------ Footer ------------------------------------------------------------------------------ */ footer { position: absolute; width: 100%; height: 50px; color: white; background-color: #000; transition: transform .5s cubic-bezier(0.645, 0.045, 0.355, 1); } footer > .inner { max-width: 1280px; margin: 0 auto; padding: 0 50px; } footer p { font-size: 10px; line-height: 30px; margin: 0; vertical-align: middle; text-align: right; } @media (max-width: 1024px) { footer > .inner { padding: 0 30px; } } @media (max-width: 768px) { footer > .inner { padding: 0 20px; } } @media (max-width: 480px) { footer > .inner { padding: 0 10px; } } /* ------------------------------------------------------------------------------ Others ------------------------------------------------------------------------------ */ .alignleft { text-align: left; } .aligncenter { text-align: center; } .alignright { text-align: right; } .alignjustify { text-align: justify; } /* ------------------------------------ External-link ------------------------------------ */ .external-link { text-align: center; color: #aa8667; font-family: inherit; } .external-link.block { display: block; margin-top: 10px; } /* ------------------------------------ Page 404 ------------------------------------ */ .error-404 h1 { font-size: 46px; text-align: center; } .error-404 p.h2 { display: block; padding-bottom: 20px; text-align: center; } /* ------------------------------------ Buttons ------------------------------------ */ *[class*="btn-"] { position: relative; left: 50%; display: inline-block; margin-top: 50px; background-color: transparent; border: 1px solid; border-radius: 0; font-family: "Helvetica Neue", sans-serif; font-weight: bold; font-style: normal; letter-spacing: 1px; text-align: center; text-transform: uppercase; overflow: hidden; transform: translate(-50%, 0); transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1); } *[class*="btn-"]:hover { cursor: pointer; } .normal *[class*="btn-"] { border-color: #272727; color: #272727; } .normal *[class*="btn-"]:hover { background-color: #272727; color: #fff; } .alternate *[class*="btn-"], .pantone *[class*="btn-"] { border-color: #fff; color: #fff; } .alternate *[class*="btn-"]:hover { background-color: #fff; color: #000; } .pantone *[class*="btn-"]:hover { background-color: #fff; color: #827e78; } .btn-small { height: 40px; padding: 0 20px; font-size: 12px; line-height: 40px; margin-top: 20px; } .btn-medium { height: 55px; min-height: 55px; padding: 0 40px; font-size: 14px; line-height: 55px; min-width: 110px; } .btn-large { height: 62px; padding: 0 50px; font-size: 16px; line-height: 62px; } .multi-button { text-align: center; margin: 40px 0 10px; } .multi-button *[class*="btn-"] { left: 0; margin: 0; transform: none; } .multi-button *[class*="btn-"] { margin: 0 20px; } .normal *[class*="btn-"].loading, .normal *[class*="btn-"].loading:hover { cursor: default; color: #272727; background-color: rgba(0,0,0,.8); } .alternate *[class*="btn-"].loading, .alternate *[class*="btn-"].loading:hover { cursor: default; color: #fff; background-color: rgba(255,255,255,.8); } *[class*="btn-"].loading::after, .opm-product-finder-result.loading::after, .opm-article-list.loading::after { content: " "; position: absolute; top: calc(50% - 13px); left: calc(50% - 13px); display: inline-block; height: 26px; width: 26px; border-radius: 50%; border: 2px solid; background: 0 0; animation: rotate .75s linear infinite; } .normal *[class*="btn-"].loading::after { border-color: #fff #fff transparent; } .alternate *[class*="btn-"].loading::after, .opm-product-finder-result.loading::after, .opm-article-list.loading::after { border-color: #000 #000 transparent; } @keyframes rotate { 0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .btn-small.disabled, .btn-medium.disabled, .btn-large.disabled, .disabled[class*="btn-"] { opacity: .5; cursor: default; } .btn-small.disabled:hover, .btn-medium.disabled:hover, .btn-large.disabled:hover, .disabled[class*="btn-"]:hover { color: inherit !important; background-color: inherit !important; } /* ------------------------------------ Inputs ------------------------------------ */ input, select { border-radius: 0; } /* ------------------------------------------------------------------------------ Composant team grid ------------------------------------------------------------------------------ */ .opm-team figure { position: relative; overflow: hidden; width: auto; } .opm-team figure img { display: block; width: 100%; height: auto; } .opm-team figure figcaption { position: absolute; color: white; text-align: center; width: 100%; bottom: 0; background-color: rgba(0, 0, 0, 0.5); padding: 10px 0; } .opm-team figure figcaption .name { font-variant: small-caps; } .opm-team figure figcaption .desc { font-size: 14px; } .opm-team figure figcaption p { display: none; } .no-padding-top { padding-top: 0; } .no-padding-bottom { padding-bottom: 0; } .rock img { max-height: 350px; margin: 0 auto; display: block; } .rock .btn-small { margin-top: 20px; } /* ------------------------------------------------------------------------------ Liste de marques ------------------------------------------------------------------------------ */ .opm-brand-list li { padding: 10px 10px 50px; } .opm-brand-list li a { display: block; } .opm-brand-list li .caption { padding-top: 20px; } .opm-brand-list li.hidden { display: none; } /* ------------------------------------------------------------------------------ Small Desktop ------------------------------------------------------------------------------ */ @media screen and (max-width: 1024px) { /* ------------------------------------------------------------------------------ Header ------------------------------------------------------------------------------ */ body > header .inner, nav { padding: 0 30px; } #topHeader .extra { right: 50px; } /* ------------------------------------------------------------------------------ Main content ------------------------------------------------------------------------------ */ .inner { padding: 40px 30px 30px; } } /* ------------------------------------------------------------------------------ Hybrid ------------------------------------------------------------------------------ */ @media screen and (max-width: 900px) { /* ------------------------------------------------------------------------------ Header ------------------------------------------------------------------------------ */ body > header .inner, nav { padding: 0 20px; } #topHeader .extra { right: 60px; } #logo { height: 60px; top: 20px; } } /* ------------------------------------------------------------------------------ Tablet ------------------------------------------------------------------------------ */ @media screen and (max-width: 768px) { body.show-mobile-menu { overflow-y: hidden; } .three-columns { column-count: auto; } /* ------------------------------------------------------------------------------ Header ------------------------------------------------------------------------------ */ body > header { height: 100px; } body.scrolled > header { height: 60px; } /* ------------------------------ Top header ------------------------------ */ #topHeader { top: 60vh; left: -220px; display: block; width: 220px; height: 40vh; border-top: 1px solid #555; transition: left .2s cubic-bezier(0.645, 0.045, 0.355, 1); } .show-mobile-menu #topHeader { left: 0; } .ios-7-support #topHeader { top: 534px; height: 393px; } #topHeader .inner { display: block; height: 100%; margin: 0; } #topHeader ul { position: absolute; left: 0; display: -ms-flexbox; display: flex; width: 100%; padding: 0; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #topHeader .social li, #topHeader .extra li { display: inline-block; width: 100%; -ms-flex: 1 1 auto; flex: 1 1 auto; } #topHeader .social li a, #topHeader .extra li a, #topHeader .extra li span { width: 100%; } #topHeader .social { position: absolute; bottom: 0; z-index: 1; height: 50px; line-height: 50px; border-top: 1px solid #555; background-color: #2e2e2e; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; } #topHeader .social li { height: 100%; margin: auto; } #topHeader .social li a::before { line-height: 50px; font-size: 18px; } #topHeader .extra { top: 0; right: initial; float: none; height: calc(40vh - 50px); -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: stretch; align-content: stretch; } .ios-7-support #topHeader .extra { height: 343px; } #topHeader .extra li { position: relative; text-align: center; margin: 0; } #topHeader .extra li::before { position: absolute; top: 20px; left: 50%; line-height: normal; font-size: 18px; transform: translate(-50%, 0); } #topHeader .extra li > a, #topHeader .extra li > span { position: absolute; top: 60%; left: 0; display: inline-block; transform: translate(0, -50%); } #topHeader .extra li a::before { position: absolute; top: -25px; left: 50%; font-size: 18px; transform: translate(-50%, 0); } /* ------------------------------ Logo ------------------------------ */ #logo { height: 80px; top: 10px; } /* ------------------------------ Language ------------------------------ */ #mainHeader .languages { top: 10px; height: 25px; width: 50px; border: 1px solid; background-color: #827e78; } #mainHeader .languages::after { line-height: 24px; } #mainHeader .languages li { line-height: 24px; } /* ------------------------------ Main header ------------------------------ */ #mainHeader { top: 0; left: 0; background-color: #fff; color: #aa8667; transition: height .3s cubic-bezier(0.645, 0.045, 0.355, 1), left .2s cubic-bezier(0.645, 0.045, 0.355, 1); } .show-mobile-menu #mainHeader { left: 220px; } #mainHeader .bg { top: 0; height: 100px; color: white; } .scrolled #mainHeader .bg { height: 60px; } #mobileToggle { position: absolute; top: 50%; left: 30px; width: 25px; color: #fff; transform: translate(0, -50%); transition: color .2s cubic-bezier(0.645, 0.045, 0.355, 1); } #mobileToggle:hover { cursor: pointer; } #mobileToggle .top, #mobileToggle .middle, #mobileToggle .bottom { width: 100%; height: 3px; margin: 4px 0; background-color: #fff; transition: background .2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity .2s cubic-bezier(0.645, 0.045, 0.355, 1), transform .2s cubic-bezier(0.645, 0.045, 0.355, 1) .2s; } #mobileToggle span.open, #mobileToggle span.close { position: absolute; left: 50%; bottom: -15px; display: block; min-width: 30px; font-size: 14px; transform: translate(-50%, 0); } #mobileToggle span.close { display: none; } .scrolled #mobileToggle { top: 40%; } .show-mobile-menu #mobileToggle span.open { display: none; } .show-mobile-menu #mobileToggle span.close { display: block; } .show-mobile-menu #mobileToggle .top { transform: translate(0, 7px) rotate(-315deg); } .show-mobile-menu #mobileToggle .middle { opacity: 0; } .show-mobile-menu #mobileToggle .bottom { transform: translate(0, -7px) rotate(315deg); } /* ------------------------------------------------------------------------------ Main content ------------------------------------------------------------------------------ */ #content { top: 0; left: 0; width: 100%; padding-top: 100px; transition: left 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); } .scrolled-header #content { padding-top: 100px; } .show-mobile-menu #content { left: 220px; } .normal:not(.no-arrow)::before, .alternate:not(.no-arrow)::before { border-width: 20px; } .inner, .fifty-fifty div[class*=flex-cont] > .inner { padding: 30px 20px; } .inner > h2 { padding-bottom: 30px; } *[class*="btn-"] { margin-top: 30px; } .multi-button *[class*="btn-"] { margin: 5px 0; padding: 0 10px; } #videoPlayer .inner { width: 100%; padding-bottom: 56%; } } /* ------------------------------------------------------------------------------ -------------------------------------------------------------------------------- Phablet -------------------------------------------------------------------------------- ------------------------------------------------------------------------------ */ @media screen and (max-width: 600px) { /* ------------------------------ Liste des marques ------------------------------ */ .opm-brand-list li { padding: 20px; } } /* ------------------------------------------------------------------------------ -------------------------------------------------------------------------------- Mobile -------------------------------------------------------------------------------- ------------------------------------------------------------------------------ */ @media screen and (max-width: 480px) { h1,h2, h3, h4,h5,h6, .h1, .h2, .h3, .h4 { line-height: 1.2; } h1, .h1 { font-size: 38px; padding: 5px 0; } h1.small, .h1.small { font-size: 26px; } h2, .h2 { font-size: 26px; } h2.small, .h2.small { padding: 5px 5px 0; font-size: 18px; } h3, .h3 { font-size: 18px; } .h3 { padding: 10px 0; } .h4 { font-size: 14px; } p { font-size: 14px; } #productSearchResults .result .price { padding-left: 5px; font-size: 14px; } /* ------------------------------------------------------------------------------ Header ------------------------------------------------------------------------------ */ body > header { height: 70px; } body.scrolled > header { height: 50px; } /* ------------------------------ Top header ------------------------------ */ #topHeader { top: 65vh; left: -250px; height: 35vh; width: 250px; } .ios-7-support #topHeader { top: 358px; height: 178px; } #topHeader .social { height: 40px; line-height: 40px; } #topHeader .social li a::before { line-height: 40px; font-size: 16px; } #topHeader .extra { height: calc(35vh - 40px); -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-line-pack: stretch; align-content: stretch; } .ios-7-support #topHeader .extra { height: 138px; } #topHeader .extra li { position: relative; display: inline-block; -ms-flex: 1 1 50%; flex: 1 1 50%; } #topHeader .extra li a, #topHeader .extra li span { top: 60%; display: block; width: 100%; font-size: 10px; } #topHeader .extra li a::before { position: absolute; top: -20px; left: 50%; font-size: 16px; transform: translate(-50%, 0); } /* ------------------------------ Logo ------------------------------ */ #logo, #picto { height: 60px; top: 5px; } .scrolled #logo, .scrolled #picto { height: 40px; } /* ------------------------------ Main header ------------------------------ */ #mainHeader, #mainHeader .bg { height: 70px; } .show-mobile-menu #mainHeader { left: 250px; } #mobileToggle { left: 20px; } .scrolled #mainHeader, .scrolled #mainHeader .bg { height: 50px; } /* ---------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------ Main content ------------------------------------------------------------------------------ */ #content { padding-top: 70px; } .normal:not(.no-arrow)::before, .alternate:not(.no-arrow)::before { border-width: 15px; } .inner, .fifty-fifty div[class*=flex-cont] > .inner { padding: 30px 10px; } .inner > h2 { padding-bottom: 20px; } .fifty-fifty .inner[class*=flex-order]:nth-child(1n+2) { padding-top: 0; } /* ------------------------------------ Page 404 ------------------------------------ */ .error-404 h1 { font-size: 32px; } .error-404 p.h2 { padding-bottom: 5px; } /* ------------------------------------ Buttons ------------------------------------ */ *[class*="btn-"] { margin-top: 20px; } .btn-medium { height: 45px; min-height: 45px; min-width: 90px; padding: 0 10px; font-size: 12px; line-height: 45px; } .btn-large { height: 58px; padding: 0 20px; font-size: 14px; line-height: 58px; } .multi-button { text-align: center; margin: 20px 0 0; } /* ------------------------------ Liste des marques ------------------------------ */ .opm-brand-list li { padding: 10px; } } /* AMWS */ .debug-mode{ padding: 1rem; } .debug-mode legend{ margin: 0 1rem; padding: 1rem; } .lm-form .inside .debug-mode .btn-medium.email-test{ margin-top: 0; } .lm-form .inside .debug-mode .btn-medium.email-custom-btn{ left: 32%; } .xs-two-columns { column-count: 2; } .xs-three-columns { column-count: 3; } .xs-four-columns { column-count: 4; } .xs-five-columns { column-count: 5; } @media screen and (min-width: 481px) { .sm-two-columns { column-count: 2; } .sm-three-columns { column-count: 3; } .sm-four-columns { column-count: 4; } .sm-five-columns { column-count: 5; } } @media screen and (min-width: 860px) { .md-two-columns { column-count: 2; } .md-three-columns { column-count: 3; } .md-four-columns { column-count: 4; } .md-five-columns { column-count: 5; } } /* stylelint-disable declaration-block-single-line-max-declarations, declaration-block-semicolon-space-after */ .row { position: relative; display: block; } .clearfix { clear: both; } /* ---------------------------------------------------------------------------- COLUMNS ----------------------------------------------------------------------------- */ .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { position: relative; float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.6667%; } .col-xs-10 { width: 83.3333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.6667%; } .col-xs-7 { width: 58.3333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.6667%; } .col-xs-4 { width: 33.3333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.6667%; } .col-xs-1 { width: 8.3333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.6667%; } .col-xs-pull-10 { right: 83.3333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.6667%; } .col-xs-pull-7 { right: 58.3333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.6667%; } .col-xs-pull-4 { right: 33.3333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.6667%; } .col-xs-pull-1 { right: 8.3333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.6667%; } .col-xs-push-10 { left: 83.3333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.6667%; } .col-xs-push-7 { left: 58.3333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.6667%; } .col-xs-push-4 { left: 33.3333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.6667%; } .col-xs-push-1 { left: 8.3333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.6667%; } .col-xs-offset-10 { margin-left: 83.3333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.6667%; } .col-xs-offset-7 { margin-left: 58.3333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.6667%; } .col-xs-offset-4 { margin-left: 33.3333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.6667%; } .col-xs-offset-1 { margin-left: 8.3333%; } .col-xs-offset-0 { margin-left: 0; } /* ----------------------------------------------------------------------------- ROWS ----------------------------------------------------------------------------- */ .row-xs-1, .row-xs-2, .row-xs-3, .row-xs-4, .row-xs-5, .row-xs-6, .row-xs-7, .row-xs-8, .row-xs-9, .row-xs-10, .row-xs-11, .row-xs-12 { position: relative; float: left; } .row-xs-12 { height: 100%; } .row-xs-11 { height: 91.6667%; } .row-xs-10 { height: 83.3333%; } .row-xs-9 { height: 75%; } .row-xs-8 { height: 66.6667%; } .row-xs-7 { height: 58.3333%; } .row-xs-6 { height: 50%; } .row-xs-5 { height: 41.6667%; } .row-xs-4 { height: 33.3333%; } .row-xs-3 { height: 25%; } .row-xs-2 { height: 16.6667%; } .row-xs-1 { height: 8.3333%; } .row-xs-pull-12 { bottom: 100%; } .row-xs-pull-11 { bottom: 91.6667%; } .row-xs-pull-10 { bottom: 83.3333%; } .row-xs-pull-9 { bottom: 75%; } .row-xs-pull-8 { bottom: 66.6667%; } .row-xs-pull-7 { bottom: 58.3333%; } .row-xs-pull-6 { bottom: 50%; } .row-xs-pull-5 { bottom: 41.6667%; } .row-xs-pull-4 { bottom: 33.3333%; } .row-xs-pull-3 { bottom: 25%; } .row-xs-pull-2 { bottom: 16.6667%; } .row-xs-pull-1 { bottom: 8.3333%; } .row-xs-pull-0 { bottom: auto; } .row-xs-push-12 { top: 100%; } .row-xs-push-11 { top: 91.6667%; } .row-xs-push-10 { top: 83.3333%; } .row-xs-push-9 { top: 75%; } .row-xs-push-8 { top: 66.6667%; } .row-xs-push-7 { top: 58.3333%; } .row-xs-push-6 { top: 50%; } .row-xs-push-5 { top: 41.6667%; } .row-xs-push-4 { top: 33.3333%; } .row-xs-push-3 { top: 25%; } .row-xs-push-2 { top: 16.6667%; } .row-xs-push-1 { top: 8.3333%; } .row-xs-push-0 { top: auto; } .row-xs-offset-12 { margin-top: 100%; } .row-xs-offset-11 { margin-top: 91.6667%; } .row-xs-offset-10 { margin-top: 83.3333%; } .row-xs-offset-9 { margin-top: 75%; } .row-xs-offset-8 { margin-top: 66.6667%; } .row-xs-offset-7 { margin-top: 58.3333%; } .row-xs-offset-6 { margin-top: 50%; } .row-xs-offset-5 { margin-top: 41.6667%; } .row-xs-offset-4 { margin-top: 33.3333%; } .row-xs-offset-3 { margin-top: 25%; } .row-xs-offset-2 { margin-top: 16.6667%; } .row-xs-offset-1 { margin-top: 8.3333%; } .row-xs-offset-0 { margin-top: 0; } /* ----------------------------------------------------------------------------- FLEX ----------------------------------------------------------------------------- */ .flex-row, *[class*='flex-cont-xs'] { position: relative; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } .flex-align-center { -ms-flex-align: center; align-items: center; } *[class*="flex-col-xs"] { display: inline-block; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1; } .flex-cont-xs-col { -ms-flex-direction: column; flex-direction: column; } .flex-cont-xs-row { -ms-flex-direction: row; flex-direction: row; } .flex-xs-justify-center { -ms-flex-pack: center; justify-content: center; } .flex-xs-justify-left { -ms-flex-pack: left; justify-content: left; } .flex-col-xs-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .flex-col-xs-11 { -ms-flex-preferred-size: 91.6667%; flex-basis: 91.6667%; } .flex-col-xs-10 { -ms-flex-preferred-size: 83.3333%; flex-basis: 83.3333%; } .flex-col-xs-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; } .flex-col-xs-8 { -ms-flex-preferred-size: 66.6667%; flex-basis: 66.6667%; } .flex-col-xs-7 { -ms-flex-preferred-size: 58.3333%; flex-basis: 58.3333%; } .flex-col-xs-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .flex-col-xs-5 { -ms-flex-preferred-size: 41.6667%; flex-basis: 41.6667%; } .flex-col-xs-4 { -ms-flex-preferred-size: 33.3333%; flex-basis: 33.3333%; } .flex-col-xs-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; } .flex-col-xs-24 { -ms-flex-preferred-size: 20%; flex-basis: 20%; } .flex-col-xs-2 { -ms-flex-preferred-size: 16.6667%; flex-basis: 16.6667%; } .flex-col-xs-1 { -ms-flex-preferred-size: 8.3333%; flex-basis: 8.3333%; } .flex-order-xs-1 { -ms-flex-order: 1; order: 1; } .flex-order-xs-2 { -ms-flex-order: 2; order: 2; } .flex-order-xs-3 { -ms-flex-order: 3; order: 3; } .flex-order-xs-4 { -ms-flex-order: 4; order: 4; } .flex-order-1 { -ms-flex-order: 1; order: 1; } .flex-order-2 { -ms-flex-order: 2; order: 2; } .flex-order-3 { -ms-flex-order: 3; order: 3; } .flex-order-4 { -ms-flex-order: 4; order: 4; } .flex-order-5 { -ms-flex-order: 5; order: 5; } .flex-order-6 { -ms-flex-order: 6; order: 6; } .flex-order-7 { -ms-flex-order: 7; order: 7; } .flex-order-8 { -ms-flex-order: 8; order: 8; } .flex-order-9 { -ms-flex-order: 9; order: 9; } .flex-order-10 { -ms-flex-order: 10; order: 10; } .flex-order-11 { -ms-flex-order: 11; order: 11; } .flex-order-12 { -ms-flex-order: 12; order: 12; } /* -------------------------------- 2012 Flexbox syntax fix -------------------------------- */ .no-flexbox .flex-row, .no-flexbox *[class*='flex-cont-xs'] { display: -ms-flexbox; display: flex; } .no-flexbox .flex-align-center { flex-align: center; } .no-flexbox *[class*="flex-col-xs"] { flex-positive: 0; flex-negative: 1; } .no-flexbox .flex-grow { flex-positive: 1; } .no-flexbox .flex-xs-justify-center { flex-pack: center; } .no-flexbox .flex-xs-justify-left { flex-pack: left; } .no-flexbox .flex-col-xs-12 { flex-preferred-size: 100%; max-width: 100%; } .no-flexbox .flex-col-xs-11 { flex-preferred-size: 91.6667%; max-width: 91.6667%; } .no-flexbox .flex-col-xs-10 { flex-preferred-size: 83.3333%; max-width: 83.3333%; } .no-flexbox .flex-col-xs-9 { flex-preferred-size: 75%; max-width: 75%; } .no-flexbox .flex-col-xs-8 { flex-preferred-size: 66.6667%; max-width: 66.6667%; } .no-flexbox .flex-col-xs-7 { flex-preferred-size: 58.3333%; max-width: 58.3333%; } .no-flexbox .flex-col-xs-6 { flex-preferred-size: 50%; max-width: 50%; } .no-flexbox .flex-col-xs-5 { flex-preferred-size: 41.6667%; max-width: 41.6667%; } .no-flexbox .flex-col-xs-4 { flex-preferred-size: 33.3333%; max-width: 33.3333%; } .no-flexbox .flex-col-xs-3 { flex-preferred-size: 25%; max-width: 25%; } .no-flexbox .flex-col-xs-24 { flex-preferred-size: 20%; max-width: 20%; } .no-flexbox .flex-col-xs-2 { flex-preferred-size: 16.6667%; max-width: 16.6667%; } .no-flexbox .flex-col-xs-1 { flex-preferred-size: 8.3333%; max-width: 8.3333%; } .no-flexbox .flex-order-xs-1 { flex-order: 1; } .no-flexbox .flex-order-xs-2 { flex-order: 2; } .no-flexbox .flex-order-xs-3 { flex-order: 3; } .no-flexbox .flex-order-xs-4 { flex-order: 4; } .no-flexbox .flex-order-1 { flex-order: 1; } .no-flexbox .flex-order-2 { flex-order: 2; } .no-flexbox .flex-order-3 { flex-order: 3; } .no-flexbox .flex-order-4 { flex-order: 4; } .no-flexbox .flex-order-5 { flex-order: 5; } .no-flexbox .flex-order-6 { flex-order: 6; } .no-flexbox .flex-order-7 { flex-order: 7; } .no-flexbox .flex-order-8 { flex-order: 8; } .no-flexbox .flex-order-9 { flex-order: 9; } .no-flexbox .flex-order-10 { flex-order: 10; } .no-flexbox .flex-order-11 { flex-order: 11; } .no-flexbox .flex-order-12 { flex-order: 12; } /* -------------------------------- No flexbox support fix -------------------------------- */ .no-flexboxtweener.no-flexbox .flex-row, .no-flexboxtweener.no-flexbox *[class*='flex-cont-xs'] { display: block; } .no-flexboxtweener.no-flexbox .flex-align-center > * { vertical-align: middle; } .no-flexboxtweener.no-flexbox *[class*="flex-col-xs"] { display: inline-block; vertical-align: top; } .no-flexboxtweener.no-flexbox .flex-col-xs-12 { width: 100%; } .no-flexboxtweener.no-flexbox .flex-col-xs-11 { width: 92%; } .no-flexboxtweener.no-flexbox .flex-col-xs-10 { width: 82%; } .no-flexboxtweener.no-flexbox .flex-col-xs-9 { width: 74%; } .no-flexboxtweener.no-flexbox .flex-col-xs-8 { width: 65%; } .no-flexboxtweener.no-flexbox .flex-col-xs-7 { width: 57%; } .no-flexboxtweener.no-flexbox .flex-col-xs-6 { width: 49%; } .no-flexboxtweener.no-flexbox .flex-col-xs-5 { width: 40%; } .no-flexboxtweener.no-flexbox .flex-col-xs-4 { width: 32%; } .no-flexboxtweener.no-flexbox .flex-col-xs-3 { width: 24%; } .no-flexboxtweener.no-flexbox .flex-col-xs-24 { width: 19%; } .no-flexboxtweener.no-flexbox .flex-col-xs-2 { width: 15%; } .no-flexboxtweener.no-flexbox .flex-col-xs-1 { width: 7%; } /* ----------------------------------------------------------------------------- VISIBILITY ----------------------------------------------------------------------------- */ .visible-xs-block, .visible-sm-block, .visible-md-block, .visible-lg-block { display: none; } @media (min-width: 1025px) { .visible-lg-block { display: block; } } @media (min-width: 769px) and (max-width: 1024px) { .visible-md-block { display: block; } } @media (min-width: 481px) and (max-width: 768px) { .visible-sm-block { display: block; } } @media (max-width: 480px) { .visible-xs-block { display: block; } } /* ------------------------------------------------------------------------------ -------------------------------------------------------------------------------- TABLETS -------------------------------------------------------------------------------- ------------------------------------------------------------------------------ */ @media (min-width: 481px) { /* ---------------------------------- COLUMNS ---------------------------------- */ .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { position: relative; float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.6667%; } .col-sm-10 { width: 83.3333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.6667%; } .col-sm-7 { width: 58.3333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.6667%; } .col-sm-4 { width: 33.3333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.6667%; } .col-sm-1 { width: 8.3333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.6667%; } .col-sm-pull-10 { right: 83.3333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.6667%; } .col-sm-pull-7 { right: 58.3333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.6667%; } .col-sm-pull-4 { right: 33.3333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.6667%; } .col-sm-pull-1 { right: 8.3333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.6667%; } .col-sm-push-10 { left: 83.3333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.6667%; } .col-sm-push-7 { left: 58.3333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.6667%; } .col-sm-push-4 { left: 33.3333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.6667%; } .col-sm-push-1 { left: 8.3333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.6667%; } .col-sm-offset-10 { margin-left: 83.3333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.6667%; } .col-sm-offset-7 { margin-left: 58.3333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.6667%; } .col-sm-offset-4 { margin-left: 33.3333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.6667%; } .col-sm-offset-1 { margin-left: 8.3333%; } .col-sm-offset-0 { margin-left: 0; } /* ---------------------------------- ROWS ---------------------------------- */ .row-sm-1, .row-sm-2, .row-sm-3, .row-sm-4, .row-sm-5, .row-sm-6, .row-sm-7, .row-sm-8, .row-sm-9, .row-sm-10, .row-sm-11, .row-sm-12 { position: relative; float: left; } .row-sm-12 { height: 100%; } .row-sm-11 { height: 91.6667%; } .row-sm-10 { height: 83.3333%; } .row-sm-9 { height: 75%; } .row-sm-8 { height: 66.6667%; } .row-sm-7 { height: 58.3333%; } .row-sm-6 { height: 50%; } .row-sm-5 { height: 41.6667%; } .row-sm-4 { height: 33.3333%; } .row-sm-3 { height: 25%; } .row-sm-2 { height: 16.6667%; } .row-sm-1 { height: 8.3333%; } .row-sm-pull-12 { bottom: 100%; } .row-sm-pull-11 { bottom: 91.6667%; } .row-sm-pull-10 { bottom: 83.3333%; } .row-sm-pull-9 { bottom: 75%; } .row-sm-pull-8 { bottom: 66.6667%; } .row-sm-pull-7 { bottom: 58.3333%; } .row-sm-pull-6 { bottom: 50%; } .row-sm-pull-5 { bottom: 41.6667%; } .row-sm-pull-4 { bottom: 33.3333%; } .row-sm-pull-3 { bottom: 25%; } .row-sm-pull-2 { bottom: 16.6667%; } .row-sm-pull-1 { bottom: 8.3333%; } .row-sm-pull-0 { bottom: auto; } .row-sm-push-12 { top: 100%; } .row-sm-push-11 { top: 91.6667%; } .row-sm-push-10 { top: 83.3333%; } .row-sm-push-9 { top: 75%; } .row-sm-push-8 { top: 66.6667%; } .row-sm-push-7 { top: 58.3333%; } .row-sm-push-6 { top: 50%; } .row-sm-push-5 { top: 41.6667%; } .row-sm-push-4 { top: 33.3333%; } .row-sm-push-3 { top: 25%; } .row-sm-push-2 { top: 16.6667%; } .row-sm-push-1 { top: 8.3333%; } .row-sm-push-0 { top: auto; } .row-sm-offset-12 { margin-top: 100%; } .row-sm-offset-11 { margin-top: 91.6667%; } .row-sm-offset-10 { margin-top: 83.3333%; } .row-sm-offset-9 { margin-top: 75%; } .row-sm-offset-8 { margin-top: 66.6667%; } .row-sm-offset-7 { margin-top: 58.3333%; } .row-sm-offset-6 { margin-top: 50%; } .row-sm-offset-5 { margin-top: 41.6667%; } .row-sm-offset-4 { margin-top: 33.3333%; } .row-sm-offset-3 { margin-top: 25%; } .row-sm-offset-2 { margin-top: 16.6667%; } .row-sm-offset-1 { margin-top: 8.3333%; } .row-sm-offset-0 { margin-top: 0; } /* ---------------------------------- FLEX ---------------------------------- */ *[class*="flex-col-sm"] { display: inline-block; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1; } *[class*='flex-cont-sm'] { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-cont-sm-col { -ms-flex-direction: column; flex-direction: column; } .flex-cont-sm-row { -ms-flex-direction: row; flex-direction: row; } .flex-cont-sm-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-sm-justify-center { -ms-flex-pack: center; justify-content: center; } .flex-sm-justify-left { -ms-flex-pack: left; justify-content: left; } /* ******************************* */ .flex-col-sm-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .flex-col-sm-11 { -ms-flex-preferred-size: 91.6667%; flex-basis: 91.6667%; } .flex-col-sm-10 { -ms-flex-preferred-size: 83.3333%; flex-basis: 83.3333%; } .flex-col-sm-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; } .flex-col-sm-8 { -ms-flex-preferred-size: 66.6667%; flex-basis: 66.6667%; } .flex-col-sm-7 { -ms-flex-preferred-size: 58.3333%; flex-basis: 58.3333%; } .flex-col-sm-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .flex-col-sm-5 { -ms-flex-preferred-size: 41.6667%; flex-basis: 41.6667%; } .flex-col-sm-4 { -ms-flex-preferred-size: 33.3333%; flex-basis: 33.3333%; } .flex-col-sm-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; } .flex-col-sm-24 { -ms-flex-preferred-size: 20%; flex-basis: 20%; } .flex-col-sm-2 { -ms-flex-preferred-size: 16.6667%; flex-basis: 16.6667%; } .flex-col-sm-1 { -ms-flex-preferred-size: 8.3333%; flex-basis: 8.3333%; } .flex-order-sm-1 { -ms-flex-order: 1; order: 1; } .flex-order-sm-2 { -ms-flex-order: 2; order: 2; } .flex-order-sm-3 { -ms-flex-order: 3; order: 3; } .flex-order-sm-4 { -ms-flex-order: 4; order: 4; } /* -------------------------------- 2012 Flexbox syntax fix -------------------------------- */ .no-flexbox *[class*='flex-cont-sm'] { display: -ms-flexbox; display: flex; } .no-flexbox *[class*="flex-col-sm"] { flex-positive: 0; flex-negative: 1; } .no-flexbox .flex-sm-justify-center { flex-pack: center; } .no-flexbox .flex-sm-justify-left { flex-pack: left; } .no-flexbox .flex-col-sm-12 { flex-preferred-size: 100%; max-width: 100%; } .no-flexbox .flex-col-sm-11 { flex-preferred-size: 91.6667%; max-width: 91.6667%; } .no-flexbox .flex-col-sm-10 { flex-preferred-size: 83.3333%; max-width: 83.3333%; } .no-flexbox .flex-col-sm-9 { flex-preferred-size: 75%; max-width: 75%; } .no-flexbox .flex-col-sm-8 { flex-preferred-size: 66.6667%; max-width: 66.6667%; } .no-flexbox .flex-col-sm-7 { flex-preferred-size: 58.3333%; max-width: 58.3333%; } .no-flexbox .flex-col-sm-6 { flex-preferred-size: 50%; max-width: 50%; } .no-flexbox .flex-col-sm-5 { flex-preferred-size: 41.6667%; max-width: 41.6667%; } .no-flexbox .flex-col-sm-4 { flex-preferred-size: 33.3333%; max-width: 33.3333%; } .no-flexbox .flex-col-sm-3 { flex-preferred-size: 25%; max-width: 25%; } .no-flexbox .flex-col-sm-24 { flex-preferred-size: 20%; max-width: 20%; } .no-flexbox .flex-col-sm-2 { flex-preferred-size: 16.6667%; max-width: 16.6667%; } .no-flexbox .flex-col-sm-1 { flex-preferred-size: 8.3333%; max-width: 8.3333%; } .no-flexbox .flex-order-sm-1 { flex-order: 1; } .no-flexbox .flex-order-sm-2 { flex-order: 2; } .no-flexbox .flex-order-sm-3 { flex-order: 3; } .no-flexbox .flex-order-sm-4 { flex-order: 4; } /* -------------------------------- No flexbox support fix -------------------------------- */ .no-flexboxtweener.no-flexbox *[class*='flex-cont-sm'] { display: block; } .no-flexboxtweener.no-flexbox *[class*="flex-col-sm"] { display: inline-block; vertical-align: top; } .no-flexboxtweener.no-flexbox .flex-col-sm-12 { width: 100%; } .no-flexboxtweener.no-flexbox .flex-col-sm-11 { width: 90%; } .no-flexboxtweener.no-flexbox .flex-col-sm-10 { width: 82%; } .no-flexboxtweener.no-flexbox .flex-col-sm-9 { width: 74%; } .no-flexboxtweener.no-flexbox .flex-col-sm-8 { width: 65%; } .no-flexboxtweener.no-flexbox .flex-col-sm-7 { width: 57%; } .no-flexboxtweener.no-flexbox .flex-col-sm-6 { width: 49%; } .no-flexboxtweener.no-flexbox .flex-col-sm-5 { width: 40%; } .no-flexboxtweener.no-flexbox .flex-col-sm-4 { width: 32%; } .no-flexboxtweener.no-flexbox .flex-col-sm-3 { width: 24%; } .no-flexboxtweener.no-flexbox .flex-col-sm-24 { width: 19%; } .no-flexboxtweener.no-flexbox .flex-col-sm-2 { width: 15%; } .no-flexboxtweener.no-flexbox .flex-col-sm-1 { width: 7%; } } /* ------------------------------------------------------------------------------ -------------------------------------------------------------------------------- SMALL DESKTOP -------------------------------------------------------------------------------- ------------------------------------------------------------------------------ */ @media (min-width: 769px) { /* ---------------------------------- COLUMNS ---------------------------------- */ .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { position: relative; float: left; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.6667%; } .col-md-10 { width: 83.3333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.6667%; } .col-md-7 { width: 58.3333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.6667%; } .col-md-4 { width: 33.3333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.6667%; } .col-md-1 { width: 8.3333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.6667%; } .col-md-pull-10 { right: 83.3333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.6667%; } .col-md-pull-7 { right: 58.3333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.6667%; } .col-md-pull-4 { right: 33.3333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.6667%; } .col-md-pull-1 { right: 8.3333%; } .col-md-pull-0 { right: auto; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.6667%; } .col-md-push-10 { left: 83.3333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.6667%; } .col-md-push-7 { left: 58.3333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.6667%; } .col-md-push-4 { left: 33.3333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.6667%; } .col-md-push-1 { left: 8.3333%; } .col-md-push-0 { left: auto; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.6667%; } .col-md-offset-10 { margin-left: 83.3333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.6667%; } .col-md-offset-7 { margin-left: 58.3333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.6667%; } .col-md-offset-4 { margin-left: 33.3333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.6667%; } .col-md-offset-1 { margin-left: 8.3333%; } .col-md-offset-0 { margin-left: 0; } /* ---------------------------------- ROWS ---------------------------------- */ .row-md-1, .row-md-2, .row-md-3, .row-md-4, .row-md-5, .row-md-6, .row-md-7, .row-md-8, .row-md-9, .row-md-10, .row-md-11, .row-md-12 { position: relative; float: left; } .row-md-12 { height: 100%; } .row-md-11 { height: 91.6667%; } .row-md-10 { height: 83.3333%; } .row-md-9 { height: 75%; } .row-md-8 { height: 66.6667%; } .row-md-7 { height: 58.3333%; } .row-md-6 { height: 50%; } .row-md-5 { height: 41.6667%; } .row-md-4 { height: 33.3333%; } .row-md-3 { height: 25%; } .row-md-2 { height: 16.6667%; } .row-md-1 { height: 8.3333%; } .row-md-pull-12 { bottom: 100%; } .row-md-pull-11 { bottom: 91.6667%; } .row-md-pull-10 { bottom: 83.3333%; } .row-md-pull-9 { bottom: 75%; } .row-md-pull-8 { bottom: 66.6667%; } .row-md-pull-7 { bottom: 58.3333%; } .row-md-pull-6 { bottom: 50%; } .row-md-pull-5 { bottom: 41.6667%; } .row-md-pull-4 { bottom: 33.3333%; } .row-md-pull-3 { bottom: 25%; } .row-md-pull-2 { bottom: 16.6667%; } .row-md-pull-1 { bottom: 8.3333%; } .row-md-pull-0 { bottom: auto; } .row-md-push-12 { top: 100%; } .row-md-push-11 { top: 91.6667%; } .row-md-push-10 { top: 83.3333%; } .row-md-push-9 { top: 75%; } .row-md-push-8 { top: 66.6667%; } .row-md-push-7 { top: 58.3333%; } .row-md-push-6 { top: 50%; } .row-md-push-5 { top: 41.6667%; } .row-md-push-4 { top: 33.3333%; } .row-md-push-3 { top: 25%; } .row-md-push-2 { top: 16.6667%; } .row-md-push-1 { top: 8.3333%; } .row-md-push-0 { top: auto; } .row-md-offset-12 { margin-top: 100%; } .row-md-offset-11 { margin-top: 91.6667%; } .row-md-offset-10 { margin-top: 83.3333%; } .row-md-offset-9 { margin-top: 75%; } .row-md-offset-8 { margin-top: 66.6667%; } .row-md-offset-7 { margin-top: 58.3333%; } .row-md-offset-6 { margin-top: 50%; } .row-md-offset-5 { margin-top: 41.6667%; } .row-md-offset-4 { margin-top: 33.3333%; } .row-md-offset-3 { margin-top: 25%; } .row-md-offset-2 { margin-top: 16.6667%; } .row-md-offset-1 { margin-top: 8.3333%; } .row-md-offset-0 { margin-top: 0; } /* ---------------------------------- FLEX ---------------------------------- */ *[class*="flex-col-md"] { display: inline-block; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1; } *[class*='flex-cont-md'] { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-cont-md-col { -ms-flex-direction: column; flex-direction: column; } .flex-cont-md-row { -ms-flex-direction: row; flex-direction: row; } .flex-cont-md-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-md-justify-center { -ms-flex-pack: center; justify-content: center; } .flex-md-justify-left { -ms-flex-pack: left; justify-content: left; } /* ******************************* */ .flex-col-md-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .flex-col-md-11 { -ms-flex-preferred-size: 91.6667%; flex-basis: 91.6667%; } .flex-col-md-10 { -ms-flex-preferred-size: 83.3333%; flex-basis: 83.3333%; } .flex-col-md-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; } .flex-col-md-8 { -ms-flex-preferred-size: 66.6667%; flex-basis: 66.6667%; } .flex-col-md-7 { -ms-flex-preferred-size: 58.3333%; flex-basis: 58.3333%; } .flex-col-md-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .flex-col-md-5 { -ms-flex-preferred-size: 41.6667%; flex-basis: 41.6667%; } .flex-col-md-4 { -ms-flex-preferred-size: 33.3333%; flex-basis: 33.3333%; } .flex-col-md-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; } .flex-col-md-24 { -ms-flex-preferred-size: 20%; flex-basis: 20%; } .flex-col-md-2 { -ms-flex-preferred-size: 16.6667%; flex-basis: 16.6667%; } .flex-col-md-1 { -ms-flex-preferred-size: 8.3333%; flex-basis: 8.3333%; } .flex-order-md-1 { -ms-flex-order: 1; order: 1; } .flex-order-md-2 { -ms-flex-order: 2; order: 2; } .flex-order-md-3 { -ms-flex-order: 3; order: 3; } .flex-order-md-4 { -ms-flex-order: 4; order: 4; } /* -------------------------------- 2012 Flexbox syntax fix -------------------------------- */ .no-flexbox *[class*='flex-cont-md'] { display: -ms-flexbox; display: flex; } .no-flexbox *[class*="flex-col-md"] { flex-positive: 0; flex-negative: 1; } .no-flexbox .flex-md-justify-center { flex-pack: center; } .no-flexbox .flex-md-justify-left { flex-pack: left; } .no-flexbox .flex-col-md-12 { flex-preferred-size: 100%; max-width: 100%; } .no-flexbox .flex-col-md-11 { flex-preferred-size: 91.6667%; max-width: 91.6667%; } .no-flexbox .flex-col-md-10 { flex-preferred-size: 83.3333%; max-width: 83.3333%; } .no-flexbox .flex-col-md-9 { flex-preferred-size: 75%; max-width: 75%; } .no-flexbox .flex-col-md-8 { flex-preferred-size: 66.6667%; max-width: 66.6667%; } .no-flexbox .flex-col-md-7 { flex-preferred-size: 58.3333%; max-width: 58.3333%; } .no-flexbox .flex-col-md-6 { flex-preferred-size: 50%; max-width: 50%; } .no-flexbox .flex-col-md-5 { flex-preferred-size: 41.6667%; max-width: 41.6667%; } .no-flexbox .flex-col-md-4 { flex-preferred-size: 33.3333%; max-width: 33.3333%; } .no-flexbox .flex-col-md-3 { flex-preferred-size: 25%; max-width: 25%; } .no-flexbox .flex-col-md-24 { flex-preferred-size: 20%; max-width: 20%; } .no-flexbox .flex-col-md-2 { flex-preferred-size: 16.6667%; max-width: 16.6667%; } .no-flexbox .flex-col-md-1 { flex-preferred-size: 8.3333%; max-width: 8.3333%; } .no-flexbox .flex-order-md-1 { flex-order: 1; } .no-flexbox .flex-order-md-2 { flex-order: 2; } .no-flexbox .flex-order-md-3 { flex-order: 3; } .no-flexbox .flex-order-md-4 { flex-order: 4; } /* -------------------------------- No flexbox support fix -------------------------------- */ .no-flexboxtweener.no-flexbox *[class*='flex-cont-md'] { display: block; } .no-flexboxtweener.no-flexbox *[class*="flex-col-md"] { display: inline-block; vertical-align: top; } .no-flexboxtweener.no-flexbox .flex-col-md-12 { width: 100%; } .no-flexboxtweener.no-flexbox .flex-col-md-11 { width: 90%; } .no-flexboxtweener.no-flexbox .flex-col-md-10 { width: 82%; } .no-flexboxtweener.no-flexbox .flex-col-md-9 { width: 74%; } .no-flexboxtweener.no-flexbox .flex-col-md-8 { width: 65%; } .no-flexboxtweener.no-flexbox .flex-col-md-7 { width: 57%; } .no-flexboxtweener.no-flexbox .flex-col-md-6 { width: 49%; } .no-flexboxtweener.no-flexbox .flex-col-md-5 { width: 40%; } .no-flexboxtweener.no-flexbox .flex-col-md-4 { width: 32%; } .no-flexboxtweener.no-flexbox .flex-col-md-3 { width: 24%; } .no-flexboxtweener.no-flexbox .flex-col-md-24 { width: 19%; } .no-flexboxtweener.no-flexbox .flex-col-md-2 { width: 15%; } .no-flexboxtweener.no-flexbox .flex-col-md-1 { width: 7%; } } /* ------------------------------------------------------------------------------ -------------------------------------------------------------------------------- LARGE DESKTOP -------------------------------------------------------------------------------- ------------------------------------------------------------------------------ */ @media (min-width: 1025px) { /* ---------------------------------- COLUMNS ---------------------------------- */ .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { position: relative; float: left; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.6667%; } .col-lg-10 { width: 83.3333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.6667%; } .col-lg-7 { width: 58.3333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.6667%; } .col-lg-4 { width: 33.3333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.6667%; } .col-lg-1 { width: 8.3333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.6667%; } .col-lg-pull-10 { right: 83.3333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.6667%; } .col-lg-pull-7 { right: 58.3333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.6667%; } .col-lg-pull-4 { right: 33.3333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.6667%; } .col-lg-pull-1 { right: 8.3333%; } .col-lg-pull-0 { right: auto; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.6667%; } .col-lg-push-10 { left: 83.3333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.6667%; } .col-lg-push-7 { left: 58.3333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.6667%; } .col-lg-push-4 { left: 33.3333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.6667%; } .col-lg-push-1 { left: 8.3333%; } .col-lg-push-0 { left: auto; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.6667%; } .col-lg-offset-10 { margin-left: 83.3333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.6667%; } .col-lg-offset-7 { margin-left: 58.3333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.6667%; } .col-lg-offset-4 { margin-left: 33.3333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.6667%; } .col-lg-offset-1 { margin-left: 8.3333%; } .col-lg-offset-0 { margin-left: 0; } /* ---------------------------------- ROWS ---------------------------------- */ .row-lg-1, .row-lg-2, .row-lg-3, .row-lg-4, .row-lg-5, .row-lg-6, .row-lg-7, .row-lg-8, .row-lg-9, .row-lg-10, .row-lg-11, .row-lg-12 { position: relative; float: left; } .row-lg-12 { height: 100%; } .row-lg-11 { height: 91.6667%; } .row-lg-10 { height: 83.3333%; } .row-lg-9 { height: 75%; } .row-lg-8 { height: 66.6667%; } .row-lg-7 { height: 58.3333%; } .row-lg-6 { height: 50%; } .row-lg-5 { height: 41.6667%; } .row-lg-4 { height: 33.3333%; } .row-lg-3 { height: 25%; } .row-lg-2 { height: 16.6667%; } .row-lg-1 { height: 8.3333%; } .row-lg-pull-12 { bottom: 100%; } .row-lg-pull-11 { bottom: 91.6667%; } .row-lg-pull-10 { bottom: 83.3333%; } .row-lg-pull-9 { bottom: 75%; } .row-lg-pull-8 { bottom: 66.6667%; } .row-lg-pull-7 { bottom: 58.3333%; } .row-lg-pull-6 { bottom: 50%; } .row-lg-pull-5 { bottom: 41.6667%; } .row-lg-pull-4 { bottom: 33.3333%; } .row-lg-pull-3 { bottom: 25%; } .row-lg-pull-2 { bottom: 16.6667%; } .row-lg-pull-1 { bottom: 8.3333%; } .row-lg-pull-0 { bottom: auto; } .row-lg-push-12 { top: 100%; } .row-lg-push-11 { top: 91.6667%; } .row-lg-push-10 { top: 83.3333%; } .row-lg-push-9 { top: 75%; } .row-lg-push-8 { top: 66.6667%; } .row-lg-push-7 { top: 58.3333%; } .row-lg-push-6 { top: 50%; } .row-lg-push-5 { top: 41.6667%; } .row-lg-push-4 { top: 33.3333%; } .row-lg-push-3 { top: 25%; } .row-lg-push-2 { top: 16.6667%; } .row-lg-push-1 { top: 8.3333%; } .row-lg-push-0 { top: auto; } .row-lg-offset-12 { margin-top: 100%; } .row-lg-offset-11 { margin-top: 91.6667%; } .row-lg-offset-10 { margin-top: 83.3333%; } .row-lg-offset-9 { margin-top: 75%; } .row-lg-offset-8 { margin-top: 66.6667%; } .row-lg-offset-7 { margin-top: 58.3333%; } .row-lg-offset-6 { margin-top: 50%; } .row-lg-offset-5 { margin-top: 41.6667%; } .row-lg-offset-4 { margin-top: 33.3333%; } .row-lg-offset-3 { margin-top: 25%; } .row-lg-offset-2 { margin-top: 16.6667%; } .row-lg-offset-1 { margin-top: 8.3333%; } .row-lg-offset-0 { margin-top: 0; } /* ---------------------------------- FLEX ---------------------------------- */ *[class*="flex-col-lg"] { display: inline-block; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1; } .flex-col-lg-12 { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .flex-col-lg-11 { -ms-flex-preferred-size: 91.6667%; flex-basis: 91.6667%; } .flex-col-lg-10 { -ms-flex-preferred-size: 83.3333%; flex-basis: 83.3333%; } .flex-col-lg-9 { -ms-flex-preferred-size: 75%; flex-basis: 75%; } .flex-col-lg-8 { -ms-flex-preferred-size: 66.6667%; flex-basis: 66.6667%; } .flex-col-lg-7 { -ms-flex-preferred-size: 58.3333%; flex-basis: 58.3333%; } .flex-col-lg-6 { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .flex-col-lg-5 { -ms-flex-preferred-size: 41.6667%; flex-basis: 41.6667%; } .flex-col-lg-4 { -ms-flex-preferred-size: 33.3333%; flex-basis: 33.3333%; } .flex-col-lg-3 { -ms-flex-preferred-size: 25%; flex-basis: 25%; } .flex-col-lg-24 { -ms-flex-preferred-size: 20%; flex-basis: 20%; } .flex-col-lg-2 { -ms-flex-preferred-size: 16.6667%; flex-basis: 16.6667%; } .flex-col-lg-1 { -ms-flex-preferred-size: 8.3333%; flex-basis: 8.3333%; } /* -------------------------------- 2012 Flexbox syntax fix -------------------------------- */ .no-flexbox *[class*='flex-cont-lg'] { display: flex; display: -ms-flexbox; } .no-flexbox *[class*="flex-col-lg"] { -ms-flex-positive: 0; -ms-flex-negative: 1; } .no-flexbox .flex-col-lg-12 { flex-preferred-size: 100%; max-width: 100%; } .no-flexbox .flex-col-lg-11 { flex-preferred-size: 91.6667%; max-width: 91.6667%; } .no-flexbox .flex-col-lg-10 { flex-preferred-size: 83.3333%; max-width: 83.3333%; } .no-flexbox .flex-col-lg-9 { flex-preferred-size: 75%; max-width: 75%; } .no-flexbox .flex-col-lg-8 { flex-preferred-size: 66.6667%; max-width: 66.6667%; } .no-flexbox .flex-col-lg-7 { flex-preferred-size: 58.3333%; max-width: 58.3333%; } .no-flexbox .flex-col-lg-6 { flex-preferred-size: 50%; max-width: 50%; } .no-flexbox .flex-col-lg-5 { flex-preferred-size: 41.6667%; max-width: 41.6667%; } .no-flexbox .flex-col-lg-4 { flex-preferred-size: 33.3333%; max-width: 33.3333%; } .no-flexbox .flex-col-lg-3 { flex-preferred-size: 25%; max-width: 25%; } .no-flexbox .flex-col-lg-24 { flex-preferred-size: 20%; max-width: 20%; } .no-flexbox .flex-col-lg-2 { flex-preferred-size: 16.6667%; max-width: 16.6667%; } .no-flexbox .flex-col-lg-1 { flex-preferred-size: 8.3333%; max-width: 8.3333%; } /* -------------------------------- No flexbox support fix -------------------------------- */ .no-flexboxtweener.no-flexbox *[class*='flex-cont-lg'] { display: block; } .no-flexboxtweener.no-flexbox *[class*="flex-col-lg"] { display: inline-block; vertical-align: top; } .no-flexboxtweener.no-flexbox .flex-col-lg-12 { width: 100%; } .no-flexboxtweener.no-flexbox .flex-col-lg-11 { width: 90%; } .no-flexboxtweener.no-flexbox .flex-col-lg-10 { width: 82%; } .no-flexboxtweener.no-flexbox .flex-col-lg-9 { width: 74%; } .no-flexboxtweener.no-flexbox .flex-col-lg-8 { width: 65%; } .no-flexboxtweener.no-flexbox .flex-col-lg-7 { width: 57%; } .no-flexboxtweener.no-flexbox .flex-col-lg-6 { width: 49%; } .no-flexboxtweener.no-flexbox .flex-col-lg-5 { width: 40%; } .no-flexboxtweener.no-flexbox .flex-col-lg-4 { width: 32%; } .no-flexboxtweener.no-flexbox .flex-col-lg-3 { width: 24%; } .no-flexboxtweener.no-flexbox .flex-col-lg-24 { width: 19%; } .no-flexboxtweener.no-flexbox .flex-col-lg-2 { width: 15%; } .no-flexboxtweener.no-flexbox .flex-col-lg-1 { width: 7%; } } .flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex-grow { -ms-flex-positive: 1; flex-grow: 1; } .flex-col-lg-0, .flex-col-md-0, .flex-col-sm-0, .flex-col-xs-0 { display: none; } /**** GLOBAL ****/ .main-menu { position: relative; height: 100%; } .main-menu .back-btn { display: none; } .menu-item { height: 60px; transition: height .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .scrolled .menu-item { height: 42px; } .menu-item a { font-size: 18px; padding: 10px 0; display: block; cursor: pointer; transition: padding .3s cubic-bezier(0.645, 0.045, 0.355, 1), color .1s linear; } .scrolled .menu-item a { padding: 5px 0; } .menu-item.sub-items-3-cols .sub-menu { column-count: 3; } .main-menu .menu-item.logo { width: 200px; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: auto; flex-basis: auto; visibility: hidden; transition: width .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .scrolled .main-menu .menu-item.logo { width: 80px; } /**** FIRST LEVEL ****/ .menu-level-1 { position: relative; display: -ms-flexbox; display: flex; top: 40%; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center; justify-content: center; transition: top .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .scrolled .menu-level-1 { top: 30%; } .menu-level-1 > .menu-item { -ms-flex-preferred-size: 16.6667%; flex-basis: 16.6667%; } .menu-level-1 > .menu-item > a:hover { font-weight: bold; } /**** SECOND LEVEL ****/ .menu-level-2 { position: absolute; left: calc((100vw - 1280px) / 2 * -1 - 50px); bottom: 0; z-index: -1; display: -ms-flexbox; display: flex; width: 100vw; max-width: none; margin: 0 auto; padding: 0 50px; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center; justify-content: center; background-color: #ffffff; /* AMWS */ color: black; border-bottom: 1px solid lightgrey; text-align: left; transition: transform .4s cubic-bezier(0.645, 0.045, 0.355, 1), height .3s cubic-bezier(0.645, 0.045, 0.355, 1); } .menu-item-has-children.open .menu-level-2, .menu-item-has-children:hover .menu-level-2 { transform: translate(0,100%); } .menu-level-2 > .menu-item { height: auto; padding: 15px 50px; } .menu-level-2 > .menu-item:not(:first-child) { border-left: 1px solid lightgrey; /* AMWS */ } .menu-level-2 > .menu-item a { padding: 0; } /* Second & third level */ .menu-level-2 .menu-item > a:hover { color: #aa8667; } /**** THIRD LEVEL ****/ .menu-level-3 { width: 100%; padding-top: 15px; } .menu-level-3 .menu-item { height: auto; border: none; transition: none; } .menu-level-3 .menu-item a { padding: 0; color: grey; /* AMWS */ font-size: 14px; line-height: 1.3rem; } /**** PRODUCT FINDER ****/ .menu-level-2 .menu-item.product-finder { position: relative; display: inline-block; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-preferred-size: 83.3333%; flex-basis: 83.3333%; border: medium none; } .menu-item.product-finder a { padding-bottom: 10px; } .menu-item.product-finder .btn-search { color: #fff; } .menu-item.product-finder .btn-search:hover { color: #2e2e2e; background-color: #fff; } @media all and (max-width: 1280px) { .menu-level-2 { left: -50px; } } @media all and (max-width: 1024px) { .menu-level-2 { left: -30px; padding: 0 30px; } .menu-level-2 > .menu-item { padding: 15px 30px; } } @media all and (max-width: 900px) { .main-menu .menu-item.logo { top: 20px; width: 160px; } .menu-item a { font-size: 16px; } .menu-level-2 { left: -20px; padding: 0 20px; } .menu-level-2 > .menu-item { padding: 15px 20px; } } @media all and (max-width: 768px) { .main-menu { top: 0; } .menu-item.sub-items-3-cols .sub-menu { column-count: auto; } /*** Bouton retour ***/ /* .scrolled .main-menu .back-btn { */ .main-menu .back-btn { position: relative; display: block; margin-top: 100px; padding: 0 0 0 20px; background-color: #373737; border-top: 1px solid #555; border-bottom: 1px solid #555; font-size: 13px; font-style: normal; line-height: 32px; text-align: left; text-decoration: none; transition: margin-top .3s cubic-bezier(0.645, 0.045, 0.355, 1); } .main-menu .back-btn:hover { background-color: rgba(255,255,255,0.2); } .main-menu .back-btn::after { content: "\e072"; position: absolute; right: 15px; font-family: "Glyphicons Halflings"; font-size: 10px; } .scrolled .main-menu .back-btn { margin-top: 60px; } .main-menu, .sub-menu, .menu-level-1, .menu-level-2, .menu-level-3, .no-flexbox.no-flexboxtweener .main-menu, .no-flexbox.no-flexboxtweener .main-menu .menu-item { position: fixed; left: -220px; display: block; width: 220px; padding: 0; margin: 0; background-color: #2e2e2e; overflow-x: hidden; transition: left .2s cubic-bezier(0.645, 0.045, 0.355, 1), top .3s cubic-bezier(0.645, 0.045, 0.355, 1); } .show-mobile-menu .main-menu, .show-mobile-menu .menu-level-1, .sub-menu.sub-level-open, .scrolled .sub-menu.sub-level-open, .sub-level-open > .sub-menu, .scrolled .sub-level-open > .sub-menu { left: 0; } .menu-item, .scrolled .menu-item, .menu-level-3 .menu-item { display: block; height: auto; width: 100%; border-bottom: 1px solid #555; border-left: none; } .menu-item a, .scrolled .menu-item a { position: relative; display: block; width: 100%; padding: 10px 0 10px 20px; color: #fff; font-size: 18px; text-align: left; transition: height .3s cubic-bezier(0.645, 0.045, 0.355, 1), line-height .3s cubic-bezier(0.645, 0.045, 0.355, 1); } .menu-item:hover { background-color: rgba(255,255,255,0.2); color: #fff; } .menu-item a:not(:only-child)::before { content: "\e079"; position: absolute; top: 50%; left: 5px; display: block; font-family: "Glyphicons Halflings"; font-size: 8px; opacity: .8; transform: translate(0, -50%); } .main-menu .menu-item.logo { display: none; } .menu-level-1, .scrolled .menu-level-1, .menu-item.open .menu-level-2, body:not(.ios-support) .menu-item:hover .menu-level-2, body:not(.ios-7-support) .menu-item:hover .menu-level-2 { transform: none; } li.menu-item.sub-level-open > a, .scrolled li.menu-item.sub-level-open > a { position: fixed; top: 0; width: 220px; padding: 0; background-color: #2e2e2e; text-align: center; cursor: default; } li.menu-item.sub-level-open > a { height: 100px; line-height: 100px; } .scrolled li.menu-item.sub-level-open > a { height: 60px; line-height: 60px; } li.menu-item.sub-level-open > a:not(:only-child)::before { display: none; } .menu-level-1, .menu-level-2, .menu-level-3 { top: 134px; height: calc(60vh - 134px); overflow-y: scroll; } .ios-7-support .menu-level-1, .ios-7-support .menu-level-2, .ios-7-support .menu-level-3 { height: 400px; } .scrolled .menu-level-1, .scrolled .menu-level-3, .scrolled .menu-level-2 { top: 94px; height: calc(60vh - 94px); } .ios-7-support.scrolled .menu-level-1, .ios-7-support.scrolled .menu-level-2, .ios-7-support.scrolled .menu-level-3 { height: 440px; } .menu-level-1 { z-index: 1; } .menu-level-2 { z-index: 2; } .menu-level-3 { z-index: 3; } .menu-level-2 > .menu-item, .menu-level-2 > .menu-item:not(:first-child) { padding: 0; border-left: none; } .menu-level-2 .menu-item a { padding: 10px 0 10px 20px; } .menu-level-3 .menu-item a { color: inherit; font-size: inherit; } /*** Product finder ***/ .menu-level-2 .menu-item.product-finder > a::before { content: ""; } #menuProductFinder { display: none; } } @media all and (max-width: 480px) { .sub-menu, .menu-level-1, .menu-level-2, .menu-level-3 { left: -250px; width: 250px; height: 65vh; } .main-menu { left: -250px; width: 250px; } .show-mobile-menu .main-menu, .show-mobile-menu .menu-level-1, .sub-menu.sub-level-open, .scrolled .sub-menu.sub-level-open, .sub-level-open > .sub-menu, .scrolled .sub-level-open > .sub-menu { left: 0; } .menu-item a, .scrolled .menu-item a, .menu-level-2 .menu-item a { font-size: 16px; padding: 5px 0 5px 20px; } .main-menu .back-btn { margin-top: 70px; } .scrolled .main-menu .back-btn { margin-top: 50px; } li.menu-item.sub-level-open > a, .scrolled li.menu-item.sub-level-open > a { width: 250px; } li.menu-item.sub-level-open > a { height: 70px; line-height: 70px; } .scrolled li.menu-item.sub-level-open > a { height: 50px; line-height: 50px; } .menu-level-1, .menu-level-2, .menu-level-3 { top: 104px; height: calc(65vh - 104px); } .ios-7-support .menu-level-1, .ios-7-support .menu-level-2, .ios-7-support .menu-level-3 { height: 320px; } .scrolled .menu-level-1, .scrolled .menu-level-3, .scrolled .menu-level-2 { top: 84px; height: calc(65vh - 84px); } .ios-7-support.scrolled .menu-level-1, .ios-7-support.scrolled .menu-level-2, .ios-7-support.scrolled .menu-level-3 { height: 360px; } } /* ----------------------------------------------------------------------------- Composant liste d'actualités ----------------------------------------------------------------------------- */ .opm-article-list.loading::after { position: absolute; top: 100px; } .opm-article-list article { position: relative; display: block; margin-bottom: 15px; overflow: hidden; padding: 10px; background-position: center center; } .opm-article-list article:last-child { margin: 0; } .opm-article-list article .caption { position: relative; top: 0; left: 0; bottom: 0; display: block; height: 100%; width: 50%; text-align: center; padding: 20px 0; } .opm-article-list.normal article .caption { background-color: rgba(255, 255, 255, 0.8); } .opm-article-list.alternate article .caption { background-color: rgba(46,46,46, 0.8); } .opm-article-list article .caption .inner { position: relative; display: block; width: 100%; } .opm-article-list.normal .border-top-wrapper .border { background-color: #000; } .opm-article-list.normal .border-top-wrapper .article-category { background-color: #000; color: #fff; } .opm-article-list.alternate .border-top-wrapper .border { background-color: #fff; } .opm-article-list.alternate .border-top-wrapper .article-category { background-color: #fff; color: #000; } .opm-article-list article h2, .opm-article-list article h3 { margin: 15px 0; padding: 15px 0; } .opm-article-list article h2 span, .opm-article-list article h3 span { display: block; } .opm-article-list article .excerpt { margin: 10px 0; font-size: 16px; line-height: 1.3; } .opm-article-list article time { display: block; text-transform: capitalize; font-size: .9em; font-style: italic; margin-top: 20px; } .opm-article-list .caption *[class*="btn-"] { display: inline-block; left: 0; transform: none; margin-top: 15px; } .loaded-all-message { display: none; } .loaded-all ~ *[class*="btn-"] { visibility: hidden; } /* ----------------------------------------------------------------------------- Tablet ----------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { .opm-article-list article .caption { width: 60%; } } /* ----------------------------------------------------------------------------- Mobile ----------------------------------------------------------------------------- */ @media screen and (max-width: 480px) { .opm-article-list > .inner { padding: 30px 0; } .opm-article-list article .caption { width: 100%; padding: 10px; } } /* -------------------------------- Article header -------------------------------- */ article header.opm-hero-head .inner { padding-top: 40px; padding-bottom: 20px; } article header .border-top-wrapper .border { background-color: #000; } article header .border-top-wrapper .article-category { background-color: #000; color: #fff; } article header.opm-hero-head h1 { border-top: none; margin: 0; } article header .excerpt { max-width: 750px; padding: 30px 0 10px; margin: 0 auto; font-family: sans-serif; font-size: 24px; font-variant: normal; text-transform: none; font-weight: lighter; line-height: 1.5; } article header time { display: block; max-width: 600px; margin: 20px auto 0; text-align: right; text-transform: capitalize; } /* -------------------------------- Article Content -------------------------------- */ .article-content .inner { max-width: 600px; padding: 40px 0; overflow: visible; } .article-content h3, .article-content .h2, .article-content .h3 { padding: 10px 0; } .article-content strong { font-weight: bold; } .article-content p { text-align: justify; padding: 0; font-size: 20px; } .article-content p:not(:last-child) { margin-bottom: 20px; } .article-content p.drop-cap::first-letter { float: left; padding: 0; margin-right: 10px; font-family: "Vanitas Stencil"; font-size: 100px; text-align: left; line-height: 80px; } .article-content figure { position: relative; display: block; width: auto !important; margin-bottom: 20px; } .article-content img, .article-content iframe, .article-content .iframe-wrap, .article-content figure img { position: relative; left: 50%; display: block; max-width: 100vw; padding: 0; transform: translateX(-50%); } .article-content img, .article-content figure img { height: auto; } .article-content figure figcaption { padding-top: 3px; font-size: 1rem; } .article-content figure figcaption .copyright { font-size: 0.7rem; } .article-content .simplequote { font-style: italic; } .article-content .blkqte { padding: 10px 30px; max-width: 600px; margin: 0 auto 30px; background-color: rgba(46,46,46,.1); } .article-content .blkqte .quote { padding: 10px 0; font-family: bettis, bettisregular, cursive; font-size: 32px; color: #aa8667; } .article-content .blkqte .quote { padding: 10px 5px; font-family: bettis, bettisregular, cursive; font-size: 28px; color: #aa8667; } .article-content .simplequote::before, .article-content .blkqte .quote::before { content: "«"; padding-right: 5px; } .article-content .simplequote::after, .article-content .blkqte .quote::after { content: "»"; padding-left: 5px; } .article-content .blkqte .author { display: block; text-align: right; margin-right: 20px; font-size: 18px; } .article-content .blkqte .author::after { content: "—"; padding-left: 5px; } .article-content .contact-details { margin-top: 20px; font-size: 15px; } .article-content ul { list-style: disc outside; padding-left: 40px; padding-bottom: 20px; font-size: 18px; line-height: 1.5; } .article-content ul li { margin: 10px 0; } /* -------------------------------- Gallery -------------------------------- */ .gallery { position: relative; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } figure.gallery-item { margin: 0; } /* ------------------------------------------------------------------------------ Tablet ------------------------------------------------------------------------------ */ @media screen and (max-width: 768px) { article header .teaser { padding-bottom: 0; } figure.gallery-item { display: inline-block; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-preferred-size: 25%; flex-basis: 25%; } .article-content .inner { padding: 40px 20px; } } /* ------------------------------------------------------------------------------ Mobile ------------------------------------------------------------------------------ */ @media screen and (max-width: 480px) { article header.opm-hero-head .overlay > .inner { padding-top: 30px; } article header.opm-hero-head h1 { padding: 10px 0; } article header .excerpt { font-size: 20px; } .article-content .inner { padding: 20px; } .article-content p { font-size: 16px; } .article-content p.drop-cap::first-letter { font-size: 80px; line-height: 70px; } .article-content .blkqte { padding: 10px; } .article-content .blkqte .quote { font-size: 24px; } .article-content .blkqte .author { font-size: 16px; } .article-content .contact-details { padding: 0 30px 0 0; font-size: 14px; } figure.gallery-item { display: inline-block; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 1; flex-shrink: 1; -ms-flex-preferred-size: 33%; flex-basis: 33%; } } /* ----------------------------------------------------------------------------- Bootstrap Carousel ----------------------------------------------------------------------------- */ .carousel { position: relative; } .carousel-inner { position: relative; width: 100%; height: 100%; overflow: hidden; } .carousel-inner > .item { position: relative; display: none; height: 100%; min-height: 100%; transition: .6s ease-in-out left; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { line-height: 1; max-height: 100%; display: block; } @media all and (transform-3d) { .carousel-inner > .item { transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; perspective: 1000; } .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; transform: translate3d(100%, 0, 0); } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; transform: translate3d(-100%, 0, 0); } .carousel-inner > .item.next.left, .carousel-inner > .item.prev.right, .carousel-inner > .item.active { left: 0; transform: translate3d(0, 0, 0); } } .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: -ms-flexbox; display: flex; } .no-flexbox .carousel-inner > .active, .no-flexbox .carousel-inner > .next, .no-flexbox .carousel-inner > .prev { display: flexbox; } .no-flexbox.no-flexboxtweener .carousel-inner > .active, .no-flexbox.no-flexboxtweener .carousel-inner > .next, .no-flexbox.no-flexboxtweener .carousel-inner > .prev { display: block; } .carousel-inner > .active { left: 0; } .carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; } .carousel-inner > .next { left: 100%; } .carousel-inner > .prev { left: -100%; } .carousel-inner > .next.left, .carousel-inner > .prev.right { left: 0; } .carousel-inner > .active.left { left: -100%; } .carousel-inner > .active.right { left: 100%; } .carousel-inner .element { position: relative; } .carousel-control { position: absolute; top: 0; bottom: 0; z-index: 5; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); opacity: 0.5; } .carousel-control { color: #000; } .carousel-control.left { left: -100px; } .carousel-control.right { right: -100px; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev { position: absolute; top: 50%; left: 50%; display: inline-block; width: 30px; height: 30px; margin-top: -15px; font-size: 30px; transform: translate(-50%, -50%); } /* ----------------------------------------------------------------------------- OPM-carousel ----------------------------------------------------------------------------- */ .selected-brands, .selected-products { margin: 0 60px; } .selected-brands img { display: block; max-width: 220px; } .selected-brands h3 { padding: 5px 10px; font-weight: bold; } .selected-brands .caption { padding: 0 10px; font-size: 16px; line-height: 1.5; } .flex-align-center .carousel-inner img { height: 100%; } /* ----------------------------------------------------------------------------- Hybrid Desktop/Tablet ----------------------------------------------------------------------------- */ @media screen and (max-width: 900px) { .selected-brands, .selected-content { margin: 0 40px; } .carousel-control.left { left: -75px; } .carousel-control.right { right: -75px; } } /* ----------------------------------------------------------------------------- Tablet ----------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { .selected-brands, .selected-content { margin: 0 30px; } .carousel-control.left { left: -60px; } .carousel-control.right { right: -60px; } } /* ----------------------------------------------------------------------------- Tablet ----------------------------------------------------------------------------- */ @media screen and (max-width: 480px) { .carousel-inner > .item { width: 100%; } .carousel-inner .element { -ms-flex-positive: 1; flex-grow: 1; } .selected-brands, .selected-products { margin: 0 30px; } .selected-products > a { margin-top: 20px; } .carousel-control.left { left: -30px; } .carousel-control.right { right: -30px; } } .expand-details { font-size: .9em; height: 0; overflow: hidden; transition: height .3s ease-in-out; } .expand-details.expanded { height: auto; } .expand-details.enter-expanded, .expand-details.leave-expanded { height: 0; } .expand-details .wrap { padding-left: 10px; } /* ----------------------------------------------------------------------------- Composant Filtres ----------------------------------------------------------------------------- */ .opm-filters { position: relative; z-index: 10; display: block; height: 39px; overflow: hidden; background-color: #fff; } .opm-filters.open { height: auto; } .opm-filters .inner { padding: 0 50px; margin-top: 0; } .opm-filters .hr { border-top: 1px solid; } .opm-filters .title { position: relative; display: block; padding: 0 5px; line-height: 37px; cursor: pointer; border-bottom: 1px solid rgba(190,190,190,0.8); transition: background-color .2s cubic-bezier(0.645, 0.045, 0.355, 1); } .opm-filters.open .title { background-color: rgba(190,190,190,0.3); } body:not(.touch-device) .opm-filters:not(.open):hover .title { background-color: rgba(190,190,190,0.2); } .opm-filters .title::after { content: "\e259"; position: absolute; right: 10px; display: block; font-family: "Glyphicons Halflings"; font-size: 14px; top: 50%; transform: translate(0, -50%); } .opm-filters.open .title::after { content: "\e260"; } .opm-filters ul { position: relative; padding: 0; border-bottom: 1px solid; } .opm-filters.open ul { background-color: rgba(190,190,190,0.3); } .opm-filters ul li { line-height: 25px; } .opm-filters ul li a { position: relative; display: block; padding: 3px 8px; } body:not(.touch-device) .opm-filters ul li a { transition: color .2s cubic-bezier(0.645, 0.045, 0.355, 1); } body:not(.touch-device) .opm-filters ul li:not(.active) a:hover { color: rgba(0,0,0,.5); } .opm-filters ul li.active a { background-color: rgba(46, 46, 46, 0.8); border-color: #fff; color: #fff; padding-right: 30px; } .opm-filters ul li.active a::before { content: "x"; position: absolute; top: 0; right: 15px; display: block; font-size: 14px; } .opm-filters ul li a.no-filter { visibility: visible; } .opm-filters ul li.active a.no-filter { visibility: hidden; } /* ----------------------------------------------------------------------------- Small Desktop ----------------------------------------------------------------------------- */ @media screen and (max-width: 1024px) { .opm-filters .inner { padding: 0 30px; } } /* ----------------------------------------------------------------------------- Phablet ----------------------------------------------------------------------------- */ @media screen and (max-width: 600px) { .opm-filters .inner { padding: 0 20px; } .opm-filters .title { position: relative; display: block; border-bottom: 1px solid rgba(190,190,190,0.8); padding: 0 5px; } .opm-filters ul li { display: inline-block; -ms-flex: 1 1 50%; flex: 1 1 50%; max-width: 50%; line-height: 25px; } .opm-filters ul li a { padding: 5px 10px; display: block; } .opm-filters ul li.active a::before { line-height: 35px; } .opm-filters ul li a.no-filter { display: none; } } /* ----------------------------------------------------------------------------- Mobile ----------------------------------------------------------------------------- */ @media screen and (max-width: 480px) { .opm-filters .inner { padding: 0 10px; } .opm-filters ul{ display: block; } .opm-filters ul li { display: block; max-width: none; } } .lm-form { position: relative; padding-top: 20px; } .lm-form .hidden { visibility: hidden; } /* ------------------------------------ ALERT message ------------------------------------ */ .lm-form .alert { position: relative; display: none; width: 100%; padding: 10px; max-width: 600px; margin: 0 auto 10px; border: 1px solid; color: #000; font-size: 12px; } .lm-form.info .alert, .lm-form.error .alert, .lm-form.success .alert { display: block; } .lm-form.error .alert { color: #ce4844; background-color: #f2dede; border-color: #ebccd1; } .lm-form.success .alert { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .lm-form.info .alert { color: #1b809e; background-color: #d9edf7; border-color: #bce8f1; } .lm-form.info strong, .lm-form.error strong, .lm-form.success strong { display: block; margin: 0 0 5px; font-size: 1.1em; line-height: 1.1; } .lm-form .alert li { list-style: none inside; } .lm-form .inside { overflow: hidden; height: auto; max-width: 600px; margin: 10px auto 0; transition: height .3s ease-in-out; } .lm-form.success .inside, .lm-form.enter-success .inside { height: 0; } .lm-form label { margin-right: 10px; } .lm-form .form-control.textarea { padding: 0; position: relative; height: 250px; margin-top: 5px; } .lm-form textarea { position: absolute; height: 250px; width: 100%; padding: 10px; margin: 0; font-size: 18px; resize: none; } .lm-form .small textarea, .lm-form .form-control.textarea.small { height: 100px; } .lm-form input[type="text"].error, .lm-form input[type="email"].error, .lm-form input[type="tel"].error { border: 2px solid #ce4844; } .form-control input[required], .form-control select[required], .form-control select[required] + .select2 .select2-selection { background-image: url("../images/asterisk-red.svg"); background-repeat: no-repeat; background-size: auto 7px; background-position: 2px 2px; } .lm-form:not(.success) .btn-medium.close-panel { display: none; } .lm-form .inside > .form-group, .lm-form .inside > .form-control { padding: 0 2px; } .lm-form .inside .form-sep { margin-top: .5em; } .lm-form input[type="radio"] { display: inline-block; margin: 5px; } .lm-form select, .lm-form input[type="text"], .lm-form input[type="email"], .lm-form input[type="tel"] { font-size: 16px; padding: 0 10px; margin: 5px 5px 5px 0; height: 35px; border: none; width: 100%; } .lm-form .txt-object { min-width: 100%; } .lm-form .form-group .form-control.padding, .lm-form .form-group .form-control:not(:last-child) { padding-right: 10px; } .lm-form h4, .lm-form h5 { padding-top: 1em; margin-bottom: .5em; border-bottom: 1px solid; text-transform: uppercase; } .lm-form label { margin: 0; } .form-group.chk-list .chk:last-child, .form-group.radio-list .rdio:last-child, .form-group.select-list .slct:last-child { padding-right: 10px; } .form-control.chk, .form-control.rdio, .form-control.slct { position: relative; z-index: 0; min-height: 30px; padding-bottom: 5px; overflow: hidden; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .form-control.chk .chk-opts, .form-control.rdio label.rdio { -ms-flex-negative: 0; flex-shrink: 0; } .form-control.chk > label, .form-control.rdio > label, .form-control.slct > label { margin-left: 10px; display: inline-block; } .form-control.slct > label { -ms-flex-negative: 0; flex-shrink: 0; } .form-control.chk input, .form-control.rdio input { position: absolute; left: -100px; z-index: -100; } .form-control.rdio label.rdio { position: relative; display: block; background-color: #fff; width: 25px; height: 25px; border: 2px solid #fff; transition: color .3s ease-in-out; cursor: pointer; margin: 5px 0 0; } .form-control.rdio input:checked + label.rdio::after { content: " "; position: absolute; top: 1px; left: 1px; display: block; width: calc(100% - 2px); height: calc(100% - 2px); background-color: #2e2e2e; } .form-control.chk .chk-opts { position: relative; background-color: #fff; border: 2px solid #fff; } .form-control.chk .chk-opts label { position: absolute; top: 0; left: 0; z-index: 10; display: block; width: 50%; height: 100%; background-color: #2e2e2e; transition: left .3s ease-in-out; cursor: pointer; } .form-control.chk input:checked + .chk-opts label { left: 50%; } .form-control.chk .chk-opts span { z-index: 0; display: inline-block; min-width: 25px; line-height: 22px; margin: 0 5px; color: #000; font-size: 14px; font-weight: bold; font-family: Arial, sans-serif; text-align: center; font-variant: small-caps; text-transform: lowercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .form-control.chk .chk-opts .chk-opt-on { color: #aa8667; } .form-control.chk input:focus + .chk-opts, .form-control.rdio input:focus + label.rdio { border: 2px dotted #aa8667; } .form-control.chk input.error + .chk-opts, .form-control.rdio input.error + label.rdio { border-color: #ce4844; } .lm-form .inside .btn-medium { margin-top: 25px; } @media all and (max-width: 768px) { .lm-form .md-nopadding { padding-right: 0 !important;} } @media screen and (max-width: 480px) { .lm-form .form-group .form-control.padding, .lm-form .form-group .form-control:not(:last-child) { padding-right: 0; } .lm-form .form-control.textarea, .lm-form textarea { height: 112px; } .lm-form select, .lm-form input[type="text"], .lm-form input[type="email"], .lm-form input[type="tel"] { font-size: 14px; margin: 4px 4px 4px 0; height: 30px; } .form-group.chk-list .chk:last-child, .form-group.radio-list .rdio:last-child, .form-group.select-list .slct:last-child { padding-right: 0; } .form-control.slct { display: block; } .select-list .form-control.slct:not(:last-child) { margin-bottom: .5em; } .form-control.chk > label, .form-control.rdio > label, .form-control.slct > label { margin-left: 0; } .form-control.slct > label { margin-bottom: .3em; } } .opm-gallery { position: relative; display: block; width: 100%; height: 60vh; padding: 0; transition: height .3s cubic-bezier(0.645, 0.045, 0.355, 1); } .opm-item { position: absolute; display: block; overflow: hidden; color: #fff; padding: 10px; border: 5px solid; background-position: center center; } .normal .opm-item { border-color: #fff; } .alternate .opm-item { border-color: #2e2e2e; } .opm-item::before { content: ""; display: block; width: 100%; height: 100%; opacity: 0; background-color: #2e2e2e; transition: opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1); } .opm-item:hover::before, .ios-support .opm-item::before, .ios-7-support .opm-item::before { opacity: .7; } .opm-item .opm-inner { position: absolute; top: 50%; left: 50%; display: block; width: 70%; opacity: 0; text-align: center; transform: translate(-50%,-50%); transition: opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1); } .opm-item:hover .opm-inner, .ios-support .opm-item .opm-inner, .ios-7-support .opm-item .opm-inner { opacity: 1; } .opm-inner .excerpt { margin: 10px 0; font-size: 16px; font-style: italic; } .opm-inner *[class^=btn-] { left: 0; border-color: #fff; color: #fff; transform: none; } .opm-inner *[class^=btn-]:hover { color: #272727; background-color: #fff; } /* ----------------------------------------------------------------------------- Hybrid tablet/Desktop ----------------------------------------------------------------------------- */ @media screen and (min-width: 1024px) and (max-height: 1024px) { .opm-gallery { height: 70vh; } } /* ----------------------------------------------------------------------------- Tablet ----------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { .opm-gallery { height: 80vh; } .opm-item .opm-inner { width: 100%; padding: 0 20px; } .opm-inner *[class^=btn-] { padding: 0 10px; margin-top: 10px; } } /** iPad with portrait orientation. */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { .ios-7-support .opm-gallery { height: 780px; } } /** iPad with landscape orientation. */ @media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) { .ios-7-support .opm-gallery { height: 550px; } } /* ----------------------------------------------------------------------------- Mobile ----------------------------------------------------------------------------- */ @media screen and (max-width: 480px) { .opm-gallery { height: auto; } .opm-item { position: relative; min-height: calc(100vw * (9 / 16)); background-position: center 25%; padding: 30px 10px; } .opm-item::before { position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; display: block; height: auto; width: auto; } .opm-item .opm-inner { position: relative; top: 0; left: 0; width: 100%; padding: 10px; transform: none; } .opm-item .opm-inner .h2 { margin-top: 5px; padding-bottom: 15px; } } @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -moz-osx-font-smoothing: grayscale; } .glyphicon-asterisk::before { content: "\2a"; } .glyphicon-plus::before { content: "\2b"; } .glyphicon-euro::before, .glyphicon-eur::before { content: "\20ac"; } .glyphicon-minus::before { content: "\2212"; } .glyphicon-cloud::before { content: "\2601"; } .glyphicon-envelope::before { content: "\2709"; } .glyphicon-pencil::before { content: "\270f"; } .glyphicon-glass::before { content: "\e001"; } .glyphicon-music::before { content: "\e002"; } .glyphicon-search::before { content: "\e003"; } .glyphicon-heart::before { content: "\e005"; } .glyphicon-star::before { content: "\e006"; } .glyphicon-star-empty::before { content: "\e007"; } .glyphicon-user::before { content: "\e008"; } .glyphicon-film::before { content: "\e009"; } .glyphicon-th-large::before { content: "\e010"; } .glyphicon-th::before { content: "\e011"; } .glyphicon-th-list::before { content: "\e012"; } .glyphicon-ok::before { content: "\e013"; } .glyphicon-remove::before { content: "\e014"; } .glyphicon-zoom-in::before { content: "\e015"; } .glyphicon-zoom-out::before { content: "\e016"; } .glyphicon-off::before { content: "\e017"; } .glyphicon-signal::before { content: "\e018"; } .glyphicon-cog::before { content: "\e019"; } .glyphicon-trash::before { content: "\e020"; } .glyphicon-home::before { content: "\e021"; } .glyphicon-file::before { content: "\e022"; } .glyphicon-time::before { content: "\e023"; } .glyphicon-road::before { content: "\e024"; } .glyphicon-download-alt::before { content: "\e025"; } .glyphicon-download::before { content: "\e026"; } .glyphicon-upload::before { content: "\e027"; } .glyphicon-inbox::before { content: "\e028"; } .glyphicon-play-circle::before { content: "\e029"; } .glyphicon-repeat::before { content: "\e030"; } .glyphicon-refresh::before { content: "\e031"; } .glyphicon-list-alt::before { content: "\e032"; } .glyphicon-lock::before { content: "\e033"; } .glyphicon-flag::before { content: "\e034"; } .glyphicon-headphones::before { content: "\e035"; } .glyphicon-volume-off::before { content: "\e036"; } .glyphicon-volume-down::before { content: "\e037"; } .glyphicon-volume-up::before { content: "\e038"; } .glyphicon-qrcode::before { content: "\e039"; } .glyphicon-barcode::before { content: "\e040"; } .glyphicon-tag::before { content: "\e041"; } .glyphicon-tags::before { content: "\e042"; } .glyphicon-book::before { content: "\e043"; } .glyphicon-bookmark::before { content: "\e044"; } .glyphicon-print::before { content: "\e045"; } .glyphicon-camera::before { content: "\e046"; } .glyphicon-font::before { content: "\e047"; } .glyphicon-bold::before { content: "\e048"; } .glyphicon-italic::before { content: "\e049"; } .glyphicon-text-height::before { content: "\e050"; } .glyphicon-text-width::before { content: "\e051"; } .glyphicon-align-left::before { content: "\e052"; } .glyphicon-align-center::before { content: "\e053"; } .glyphicon-align-right::before { content: "\e054"; } .glyphicon-align-justify::before { content: "\e055"; } .glyphicon-list::before { content: "\e056"; } .glyphicon-indent-left::before { content: "\e057"; } .glyphicon-indent-right::before { content: "\e058"; } .glyphicon-facetime-video::before { content: "\e059"; } .glyphicon-picture::before { content: "\e060"; } .glyphicon-map-marker::before { content: "\e062"; } .glyphicon-adjust::before { content: "\e063"; } .glyphicon-tint::before { content: "\e064"; } .glyphicon-edit::before { content: "\e065"; } .glyphicon-share::before { content: "\e066"; } .glyphicon-check::before { content: "\e067"; } .glyphicon-move::before { content: "\e068"; } .glyphicon-step-backward::before { content: "\e069"; } .glyphicon-fast-backward::before { content: "\e070"; } .glyphicon-backward::before { content: "\e071"; } .glyphicon-play::before { content: "\e072"; } .glyphicon-pause::before { content: "\e073"; } .glyphicon-stop::before { content: "\e074"; } .glyphicon-forward::before { content: "\e075"; } .glyphicon-fast-forward::before { content: "\e076"; } .glyphicon-step-forward::before { content: "\e077"; } .glyphicon-eject::before { content: "\e078"; } .glyphicon-chevron-left::before { content: "\e079"; } .glyphicon-chevron-right::before { content: "\e080"; } .glyphicon-plus-sign::before { content: "\e081"; } .glyphicon-minus-sign::before { content: "\e082"; } .glyphicon-remove-sign::before { content: "\e083"; } .glyphicon-ok-sign::before { content: "\e084"; } .glyphicon-question-sign::before { content: "\e085"; } .glyphicon-info-sign::before { content: "\e086"; } .glyphicon-screenshot::before { content: "\e087"; } .glyphicon-remove-circle::before { content: "\e088"; } .glyphicon-ok-circle::before { content: "\e089"; } .glyphicon-ban-circle::before { content: "\e090"; } .glyphicon-arrow-left::before { content: "\e091"; } .glyphicon-arrow-right::before { content: "\e092"; } .glyphicon-arrow-up::before { content: "\e093"; } .glyphicon-arrow-down::before { content: "\e094"; } .glyphicon-share-alt::before { content: "\e095"; } .glyphicon-resize-full::before { content: "\e096"; } .glyphicon-resize-small::before { content: "\e097"; } .glyphicon-exclamation-sign::before { content: "\e101"; } .glyphicon-gift::before { content: "\e102"; } .glyphicon-leaf::before { content: "\e103"; } .glyphicon-fire::before { content: "\e104"; } .glyphicon-eye-open::before { content: "\e105"; } .glyphicon-eye-close::before { content: "\e106"; } .glyphicon-warning-sign::before { content: "\e107"; } .glyphicon-plane::before { content: "\e108"; } .glyphicon-calendar::before { content: "\e109"; } .glyphicon-random::before { content: "\e110"; } .glyphicon-comment::before { content: "\e111"; } .glyphicon-magnet::before { content: "\e112"; } .glyphicon-chevron-up::before { content: "\e113"; } .glyphicon-chevron-down::before { content: "\e114"; } .glyphicon-retweet::before { content: "\e115"; } .glyphicon-shopping-cart::before { content: "\e116"; } .glyphicon-folder-close::before { content: "\e117"; } .glyphicon-folder-open::before { content: "\e118"; } .glyphicon-resize-vertical::before { content: "\e119"; } .glyphicon-resize-horizontal::before { content: "\e120"; } .glyphicon-hdd::before { content: "\e121"; } .glyphicon-bullhorn::before { content: "\e122"; } .glyphicon-bell::before { content: "\e123"; } .glyphicon-certificate::before { content: "\e124"; } .glyphicon-thumbs-up::before { content: "\e125"; } .glyphicon-thumbs-down::before { content: "\e126"; } .glyphicon-hand-right::before { content: "\e127"; } .glyphicon-hand-left::before { content: "\e128"; } .glyphicon-hand-up::before { content: "\e129"; } .glyphicon-hand-down::before { content: "\e130"; } .glyphicon-circle-arrow-right::before { content: "\e131"; } .glyphicon-circle-arrow-left::before { content: "\e132"; } .glyphicon-circle-arrow-up::before { content: "\e133"; } .glyphicon-circle-arrow-down::before { content: "\e134"; } .glyphicon-globe::before { content: "\e135"; } .glyphicon-wrench::before { content: "\e136"; } .glyphicon-tasks::before { content: "\e137"; } .glyphicon-filter::before { content: "\e138"; } .glyphicon-briefcase::before { content: "\e139"; } .glyphicon-fullscreen::before { content: "\e140"; } .glyphicon-dashboard::before { content: "\e141"; } .glyphicon-paperclip::before { content: "\e142"; } .glyphicon-heart-empty::before { content: "\e143"; } .glyphicon-link::before { content: "\e144"; } .glyphicon-phone::before { content: "\e145"; } .glyphicon-pushpin::before { content: "\e146"; } .glyphicon-usd::before { content: "\e148"; } .glyphicon-gbp::before { content: "\e149"; } .glyphicon-sort::before { content: "\e150"; } .glyphicon-sort-by-alphabet::before { content: "\e151"; } .glyphicon-sort-by-alphabet-alt::before { content: "\e152"; } .glyphicon-sort-by-order::before { content: "\e153"; } .glyphicon-sort-by-order-alt::before { content: "\e154"; } .glyphicon-sort-by-attributes::before { content: "\e155"; } .glyphicon-sort-by-attributes-alt::before { content: "\e156"; } .glyphicon-unchecked::before { content: "\e157"; } .glyphicon-expand::before { content: "\e158"; } .glyphicon-collapse-down::before { content: "\e159"; } .glyphicon-collapse-up::before { content: "\e160"; } .glyphicon-log-in::before { content: "\e161"; } .glyphicon-flash::before { content: "\e162"; } .glyphicon-log-out::before { content: "\e163"; } .glyphicon-new-window::before { content: "\e164"; } .glyphicon-record::before { content: "\e165"; } .glyphicon-save::before { content: "\e166"; } .glyphicon-open::before { content: "\e167"; } .glyphicon-saved::before { content: "\e168"; } .glyphicon-import::before { content: "\e169"; } .glyphicon-export::before { content: "\e170"; } .glyphicon-send::before { content: "\e171"; } .glyphicon-floppy-disk::before { content: "\e172"; } .glyphicon-floppy-saved::before { content: "\e173"; } .glyphicon-floppy-remove::before { content: "\e174"; } .glyphicon-floppy-save::before { content: "\e175"; } .glyphicon-floppy-open::before { content: "\e176"; } .glyphicon-credit-card::before { content: "\e177"; } .glyphicon-transfer::before { content: "\e178"; } .glyphicon-cutlery::before { content: "\e179"; } .glyphicon-header::before { content: "\e180"; } .glyphicon-compressed::before { content: "\e181"; } .glyphicon-earphone::before { content: "\e182"; } .glyphicon-phone-alt::before { content: "\e183"; } .glyphicon-tower::before { content: "\e184"; } .glyphicon-stats::before { content: "\e185"; } .glyphicon-sd-video::before { content: "\e186"; } .glyphicon-hd-video::before { content: "\e187"; } .glyphicon-subtitles::before { content: "\e188"; } .glyphicon-sound-stereo::before { content: "\e189"; } .glyphicon-sound-dolby::before { content: "\e190"; } .glyphicon-sound-5-1::before { content: "\e191"; } .glyphicon-sound-6-1::before { content: "\e192"; } .glyphicon-sound-7-1::before { content: "\e193"; } .glyphicon-copyright-mark::before { content: "\e194"; } .glyphicon-registration-mark::before { content: "\e195"; } .glyphicon-cloud-download::before { content: "\e197"; } .glyphicon-cloud-upload::before { content: "\e198"; } .glyphicon-tree-conifer::before { content: "\e199"; } .glyphicon-tree-deciduous::before { content: "\e200"; } .glyphicon-cd::before { content: "\e201"; } .glyphicon-save-file::before { content: "\e202"; } .glyphicon-open-file::before { content: "\e203"; } .glyphicon-level-up::before { content: "\e204"; } .glyphicon-copy::before { content: "\e205"; } .glyphicon-paste::before { content: "\e206"; } .glyphicon-alert::before { content: "\e209"; } .glyphicon-equalizer::before { content: "\e210"; } .glyphicon-king::before { content: "\e211"; } .glyphicon-queen::before { content: "\e212"; } .glyphicon-pawn::before { content: "\e213"; } .glyphicon-bishop::before { content: "\e214"; } .glyphicon-knight::before { content: "\e215"; } .glyphicon-baby-formula::before { content: "\e216"; } .glyphicon-tent::before { content: "\26fa"; } .glyphicon-blackboard::before { content: "\e218"; } .glyphicon-bed::before { content: "\e219"; } .glyphicon-apple::before { content: "\f8ff"; } .glyphicon-erase::before { content: "\e221"; } .glyphicon-hourglass::before { content: "\231b"; } .glyphicon-lamp::before { content: "\e223"; } .glyphicon-duplicate::before { content: "\e224"; } .glyphicon-piggy-bank::before { content: "\e225"; } .glyphicon-scissors::before { content: "\e226"; } .glyphicon-bitcoin::before { content: "\e227"; } .glyphicon-btc::before { content: "\e227"; } .glyphicon-xbt::before { content: "\e227"; } .glyphicon-yen::before { content: "\00a5"; } .glyphicon-jpy::before { content: "\00a5"; } .glyphicon-ruble::before { content: "\20bd"; } .glyphicon-rub::before { content: "\20bd"; } .glyphicon-scale::before { content: "\e230"; } .glyphicon-ice-lolly::before { content: "\e231"; } .glyphicon-ice-lolly-tasted::before { content: "\e232"; } .glyphicon-education::before { content: "\e233"; } .glyphicon-option-horizontal::before { content: "\e234"; } .glyphicon-option-vertical::before { content: "\e235"; } .glyphicon-menu-hamburger::before { content: "\e236"; } .glyphicon-modal-window::before { content: "\e237"; } .glyphicon-oil::before { content: "\e238"; } .glyphicon-grain::before { content: "\e239"; } .glyphicon-sunglasses::before { content: "\e240"; } .glyphicon-text-size::before { content: "\e241"; } .glyphicon-text-color::before { content: "\e242"; } .glyphicon-text-background::before { content: "\e243"; } .glyphicon-object-align-top::before { content: "\e244"; } .glyphicon-object-align-bottom::before { content: "\e245"; } .glyphicon-object-align-horizontal::before { content: "\e246"; } .glyphicon-object-align-left::before { content: "\e247"; } .glyphicon-object-align-vertical::before { content: "\e248"; } .glyphicon-object-align-right::before { content: "\e249"; } .glyphicon-triangle-right::before { content: "\e250"; } .glyphicon-triangle-left::before { content: "\e251"; } .glyphicon-triangle-bottom::before { content: "\e252"; } .glyphicon-triangle-top::before { content: "\e253"; } .glyphicon-console::before { content: "\e254"; } .glyphicon-superscript::before { content: "\e255"; } .glyphicon-subscript::before { content: "\e256"; } .glyphicon-menu-left::before { content: "\e257"; } .glyphicon-menu-right::before { content: "\e258"; } .glyphicon-menu-down::before { content: "\e259"; } .glyphicon-menu-up::before { content: "\e260"; } .opm-hero-image { position: fixed; top: 90px; z-index: -100; width: 100%; } .opm-hero-image img { position: relative; left: 50%; width: auto; height: calc(100vh - 90px); transform: translate(-50%,0); } .opm-hero-image.wide img { left: auto; width: 100vw; height: auto; transform: none; } .opm-hero-head { padding-top: 60vh; } .no-css-vhunit { padding-top: 60%; } .opm-hero-head .overlay { position: relative; background-color: rgba(255, 255, 255, 0.6); } .opm-hero-head .inner { padding: 0 50px 40px; position: relative; bottom: 0; display: block; width: 100%; } .opm-hero-head h1 { text-align: center; max-width: 1180px; margin: 30px auto 20px; padding: 15px; border-top: 3px solid; border-bottom: 1px solid; } .opm-hero-head .content { max-width: 750px; margin: 0 auto; } .opm-hero-head .content p, .opm-hero-head .content.p { font-size: 18px; } .opm-hero-head .content iframe { max-width: 100%; } .opm-hero-head .content .wp-video { margin: 10px 0 30px; } .opm-hero-head .content .wp-video .mejs-container{ margin: 0 auto; } /* ----------------------------------------------------------------------------- Small Desktop ----------------------------------------------------------------------------- */ @media screen and (max-width: 1024px) { .opm-hero-head .inner { padding: 0 50px 20px; } } /* ----------------------------------------------------------------------------- Tablet ----------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { .opm-hero-image { position: relative; top: auto; background: none; } .opm-hero-image img { position: relative; left: auto; display: block; width: 100%; height: auto; transform: none; } .opm-hero-head { padding-top: 0; } .opm-hero-head .overlay { background-color: #fff; } } /* ----------------------------------------------------------------------------- Mobile ----------------------------------------------------------------------------- */ @media screen and (max-width: 480px) { .opm-hero-head .inner { padding: 0 20px 20px; } .opm-hero-head .content iframe { max-width: calc(100% + 40px); margin-left: -20px; } } .lm-highlight.light { color: #000; background-color: #fff; } .lm-highlight.dark { color: #fff; background-color: #000; } #content.light .alternate { color: #fff; background-color: #2e2e2e; } #content.light, #content.dark .alternate { color: #272727; background-color: #fff; } .lm-highlight > .inner { padding: 0 50px; margin: 0 auto; z-index: 0; } .lm-highlight .details { position: relative; overflow-x: hidden; z-index: 0; } .lm-highlight img { position: relative; height: auto; display: block; } /* -------------------------- Head -------------------------- */ .lm-highlight.light .border-top-wrapper .border { background-color: #272727; } .lm-highlight.light .border-top-wrapper .article-category { color: #fff; background-color: #272727; } .lm-highlight .text { position: absolute; top: 50px; z-index: 10; z-index: 1; display: block; width: 250px; padding-left: 10px; padding-right: 10px; border-left: 1px solid; border-right: 1px solid; } .lm-highlight .text.left { left: 50px; } .lm-highlight .text.right { right: 50px; } .lm-highlight .text .subHead { padding-bottom: 15px; border-bottom: 5px solid; font-family: Sans-Serif; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; } .lm-highlight h1, .lm-highlight h2, .lm-highlight h3, .lm-highlight .h1, .lm-highlight .h2, .lm-highlight .h3 { padding: 0; border: none; } .lm-highlight h1 { word-break: normal; } .lm-highlight h1, .lm-highlight h3 { padding-bottom: 10px; } .lm-highlight time { display: block; padding-bottom: 10px; border-bottom: 1px solid; font-size: .9em; font-style: italic; text-transform: capitalize; } .lm-highlight .content { padding-top: 20px; } .lm-highlight .text p { padding: 0; } .highlight-price, .highlight-sold-out { margin: 10px 0 0; padding: 10px 0; font-size: 1.2em; font-weight: bold; text-align: center; } .highlight-price { padding-bottom: 0; } .highlight-sold-out { color: #fff; text-transform: uppercase; background-color: rgb(153, 0, 0); } .highlight-sold-out + .content { padding-top: 10px; } /* ------------------------- Features ------------------------- */ #features, #features canvas { position: absolute; top: 0; width: 100%; max-width: 1180px; height: 100%; } #features .inner { position: relative; padding: 0; margin: 0; height: 100%; } #features .feature { position: absolute; display: block; width: 150px; font-family: Arial, sans-serif; font-size: 12px; font-weight: lighter; z-index: 10; } #features .feature .head { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-family: inherit; padding-bottom: 5px; } #features .feature .description { font-weight: lighter; letter-spacing: 1px; font-family: inherit; } #features .feature.image { width: auto; height: auto; } #features .feature.image:hover { cursor: pointer; } #features .feature.image::before { position: absolute; top: 50%; left: 50%; color: #fff; opacity: 0.7; content: "\e912"; font-family: lmicofont; font-size: 38px; z-index: 1; transform: translate(-50%, -50%); transition: all 0.2s; } #features .feature.image img { border-radius: 50%; width: 200px; height: auto; transform: scale(0.95); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } #features .feature.image:hover img { transform: scale(1); } #features .feature.image.fullSize { position: relative; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); } #features .feature.image.fullSize img.smallImg { opacity: 0; } #features .feature.image.fullSize img.bigImg { position: fixed; opacity: 1; width: 80%; height: 80%; } /* -------------------------- Highlight Extra info -------------------------- */ .lm-highlight .extra { display: none; position: absolute; bottom: 20px; width: 40%; min-width: 320px; z-index: 10; } .lm-highlight .extra.left { left: 50px; } .lm-highlight .extra.right { right: 0; } #watch-features { padding-top: 20px; text-align: center; } .lm-highlight .extra .exergue { font-family: bettisregular, cursive; font-size: 24px; text-align: center; } .lm-highlight.light .extra .exergue { color: #aa8667; } .lm-highlight.dark .extra .exergue { color: #fff; } .lm-highlight .extra .exergue.align-right { text-align: right; } #watch-features .icon { width: 50px; height: 50px; padding: 8px; border-radius: 50%; } .ie-support #watch-features, .edge-support #watch-features { display: none !important; } .lm-highlight.dark #watch-features svg.icon { background-color: #fff; fill: #2e2e2e; stroke: #2e2e2e; } .lm-highlight.light #watch-features svg.icon { background-color: #2e2e2e; fill: #fff; stroke: #fff; } /* -------------------------- highlight actions -------------------------- */ .hlt-actions { padding: 20px 0; text-align: center; } .hlt-actions.dark { color: #fff; background-color: #000; } .hlt-actions .btn-medium { left: initial; display: inline-block; margin: 0; padding-left: 20px; padding-right: 20px; transform: none; border-right: none; } /* -------------------------- Small Desktop -------------------------- */ @media (max-width: 1024px) { .lm-highlight > .inner { padding: 0 30px; } .lm-highlightimg { width: calc(1.25 * 100%); } /* -------------------------- Head -------------------------- */ .lm-highlight .text { position: initial; display: block; width: 100%; margin: auto; padding: 20px 10px 0; margin-bottom: 20px; border: none; z-index: 10; } .lm-highlight h1 { text-align: center; border-bottom: 1px solid; } .lm-highlight .hlt-texts { display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; max-width: 640px; margin: 0 auto; } .hlt-texts time { -ms-flex-order: 3; order: 3; border: none; } .lm-highlight .content { max-width: 640px; margin: 0 auto; } .lm-highlight .text p:last-child { padding-bottom: 10px; } /* -------------------------- Features -------------------------- */ .lm-highlight .highlight-details { position: relative; } #features .feature.image img { width: 150px; } /* -------------------------- Highlight Extra info -------------------------- */ .lm-highlight .extra { position: relative; top: auto; left: auto; bottom: auto; right: auto; width: 90%; margin: auto; padding-top: 4px; padding-bottom: 20px; border-top: 1px solid; margin-top: 20px; } .lm-highlight .extra .exergue.align-right { text-align: center; } } /* -------------------------- Tablet -------------------------- */ @media (max-width: 768px) { .lm-highlight > .inner { padding: 0 20px; } /* -------------------------- Head -------------------------- */ /* -------------------------- Features -------------------------- */ #features .feature { width: auto; } #features .feature:hover { cursor: pointer; } #features .feature .head::after { content: "+"; padding-left: 5px; } #features .feature.open .head::after { content: "-"; } #features .feature .description { display: none; } #features .feature.open .description { position: absolute; top: 20px; left: 0; display: block; width: 250px; padding: 20px; background-color: rgba(255,255,255,0.8); color: #2e2e2e; } #features .feature.alignright.open .description { left: auto; right: 0; } #features .feature.open .description::before { content: "x"; position: absolute; top: 3px; right: 5px; display: block; width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 20px; z-index: 10; } #features .feature.open .description::before:hover { cursor: pointer; } #features .feature.image img { width: 100px; } #features .feature.alignright { text-align: left; } } /* -------------------------- Mobile -------------------------- */ @media (max-width: 480px) { .lm-highlight > .inner { padding: 0 10px; } /* -------------------------- Head -------------------------- */ .lm-highlight .text { width: 100%; padding: 20px 0 0; } /* -------------------------- Features -------------------------- */ #features { position: relative; } #features canvas { display: none; } #features .feature, #features .feature.open { position: relative; width: 100%; padding: 10px 0; } #features .feature .head::before, #features .feature .head::after { display: none; } #features .feature.align-right { text-align: left; } #features .feature .description, #features .feature.open .description { position: relative; top: auto; left: auto; width: auto; display: block; padding: 0; } #features .feature.open .description::before { display: none; } #features .feature.image { width: 100px; margin: 0 auto; } /* -------------------------- Highlight Extra info -------------------------- */ .lm-highlight .extra { width: 100%; padding: 20px 0; margin: 0; } .lm-highlight .extra.right { right: initial; } } @font-face { font-family: "lmicofont"; src: url("../fonts/lmicofont/lmicofont.eot"); src: url("../fonts/lmicofont/lmicofont.eot#iefix") format("embedded-opentype"), url("../fonts/lmicofont/lmicofont.woff2") format("woff2"), url("../fonts/lmicofont/lmicofont.woff") format("woff"), url("../fonts/lmicofont/lmicofont.ttf") format("truetype"), url("../fonts/lmicofont/lmicofont.svg") format("svg"); font-weight: normal; font-style: normal; } [class^="ico-"]::before, [class*=" ico-"]::before, [class^="ico-"]::after, [class*=" ico-"]::after { font-family: 'lmicofont' !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; } .ico-arrow-right:before { content: "\e900"; } .ico-asterisk:before { content: "\e901"; } .ico-send:before { content: "\e902"; } .ico-phone:before { content: "\e903"; } .ico-magazine:before { content: "\e904"; } .ico-share:before { content: "\e905"; } .ico-facebook:before { content: "\e906"; } .ico-twitter:before { content: "\e907"; } .ico-gplus:before { content: "\e908"; } .ico-instagram:before { content: "\e909"; } .ico-pinterest:before { content: "\e90a"; } .ico-linkedin:before { content: "\e90b"; } .ico-mail:before { content: "\e90c"; } .ico-accessory:before { content: "\e90d"; } .ico-jewelry:before { content: "\e90e"; } .ico-watch:before { content: "\e90f"; } .ico-highlight:before { content: "\e910"; } .ico-secondhand:before { content: "\e911"; } .ico-zoom:before { content: "\e912"; } .page-template-page_panel #content { color: #fff; background-color: #2e2e2e; } .page-template-page_panel .close-panel { display: none; } .page-template-page_panel #content > .inner { padding-bottom: 50px; } .page-template-page_panel .lm-form .inside { height: auto !important; margin-top: 30px; } .page-template-page_panel .form-control.chk .chk-opts label, .page-template-page_panel .form-control.rdio input + label.rdio::after { background-color: #827e78; } .page-template-page_panel *[class*="btn-"] { color: #fff; border-color: #fff; } .page-template-page_panel *[class*="btn-"]:hover { color: #000; background-color: #fff; } #shadow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; opacity: 0; display: none; z-index: 900; transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1) .1s; } #shadow::after { content: ""; position: absolute; top: 50%; left: 50%; display: none; width: 50px; height: 50px; background-image: url('../images/ajax_loader_gray_256.gif'); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; transform: translate(-50%); } .loading #shadow, .panel-open #shadow { opacity: 0.5; display: block; } .loading #shadow::after { display: block; } #panel { position: fixed; top: 0; right: calc(0px - 50%); /* stylelint-disable-line length-zero-no-unit */ z-index: 1000; display: block; width: 50%; height: 100vh; padding-bottom: 20px; background-color: #fff; transform: translate(0, 0); transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } #panel.pantone { color: #fff; background-color: #827e78; } #panel.alternate { color: #fff; background-color: #2e2e2e; } #panel.normal .close::before, #panel.normal .close::after { background-color: #000; } #panel.pantone .close::before, #panel.pantone .close::after, #panel.alternate .close::before, #panel.alternate .close::after { background-color: #fff; } #panel.alternate input[type="submit"] { color: #fff; background-color: transparent; } #panel.alternate input[type="submit"]:hover { color: #2e2e2e; background-color: #fff; cursor: pointer; } body.panel-open { overflow-y: hidden; } .panel-open #panel { transform: translate(-100%, 0); overflow: scroll; } #panel .close { position: absolute; top: 15px; right: 25px; z-index: 1; display: block; width: 25px; height: 25px; } #panel .close::before, #panel .close::after { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 30px; height: 3px; } #panel .close::before { transform: translate(-50%, -50%) rotate(45deg); } #panel .close::after { transform: translate(-50%, -50%) rotate(-45deg); } #panel .close:hover, #panel .close:hover { cursor: pointer; } .contact-panel.inner { padding: 50px 30px 10px; } .contact-panel h2 { padding: 5px; } .contact-panel h3 { margin: 0 auto; max-width: 700px; text-align: center; } .contact-panel h3 .small { display: block; margin-top: 5px; font-size: .8em; font-style: italic; font-family: inherit; } #panel figure img{ width: auto; height: auto; max-height: 230px; display: block; } #panel .overlay { position: relative; } #panel .overlay::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #panel.pantone .overlay::before { background: linear-gradient(to bottom, rgba(130,126,120,0) 50%,rgba(130,126,120,1) 98%); } #panel .overlay img { width: 100%; height: auto; } #panel p { margin: 50px 50px 0; line-height: 1.6; font-size: 18px; } /* ----------------------------------------------------------------------------- Tablet ----------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { html.panel-open, .panel-open body { overflow-y: hidden; } #panel { right: calc(0px - 70%); /* stylelint-disable-line length-zero-no-unit */ width: 70%; transform: translate(0, 0); } .panel-open #content { transform: translate(-60%, 0); } } /* ----------------------------------------------------------------------------- Mobile ----------------------------------------------------------------------------- */ @media screen and (max-width: 480px) { #panel { right: calc(0px - 90%); /* stylelint-disable-line length-zero-no-unit */ width: 90%; transform: translate(0, 0); } #panel .close { top: 8px; right: 10px; } .contact-panel.inner { padding: 40px 20px 10px; } .contact-panel h2 { padding: 5px; } .panel-open #content { transform: translate(-90%, 0); } } .opm-parallax { position: relative; z-index: 0; overflow: hidden; } .opm-parallax .inner { visibility: hidden; max-width: 1024px; } .opm-parallax .wrapper { position: absolute; top: 50%; left: 50%; z-index: 10; visibility: visible; width: 100%; transform: translate(-50%, -50%); } .opm-parallax .text { text-align: center; } .opm-parallax h2 { margin-bottom: 40px; } .opm-parallax .cover { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; opacity: .5; background-color: #282828; } .opm-parallax img { position: absolute; } .no-js .opm-parallax img { top: 0; left: 0; z-index: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: translate3d(0,0,0); } .opm-product-finder {} .opm-product-finder.menu > .inner { padding: 0; } .opm-product-finder.brand > .inner { padding-bottom: 20px; } .opm-product-finder form { width: 100%; } .opm-product-finder h2 { padding: 0 0 40px; text-align: center; } .opm-product-finder.menu h2, .opm-product-finder.complete h2 { display: none; } .opm-product-finder .main-search { position: relative; z-index: 1; } .opm-product-finder.normal input[type="text"], .opm-product-finder.normal select { background-color: #fff; border: 1px solid; } .opm-product-finder.alternate input[type="text"], .opm-product-finder.alternate select { background-color: #fff; border: none; } .opm-product-finder input[type="text"], .opm-product-finder select { position: relative; display: inline-block; height: 55px; padding: 10px; font-size: 18px; border: none; border-radius: 0; text-transform: none; } input[type="text"] { width: calc(100% - 5px); margin-right: 5px; } select { width: calc(100% - 5px); margin-right: 5px; } select option.default { opacity: 0.5; } .opm-product-finder .btn-search { position: relative; display: block; margin-top: 0; width: 100%; text-align: center; padding: 0; } .opm-advanced-search-title { position: relative; display: block; padding: 10px; margin: 0; } .opm-advanced-search-title::after { content: "\e259"; position: relative; top: 4px; font-family: "Glyphicons Halflings"; font-size: 16px; } .opm-advanced-search-title:hover { cursor: pointer; color: #aa8667; } .open .opm-advanced-search-title::after { content: "\e260"; } .opm-advanced-search { position: relative; height: 50px; width: 100%; margin-top: 5px; border-bottom: 1px solid; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s; } .normal .opm-advanced-search { background-color: rgba(46,46,46, 0); } .alternate .opm-advanced-search { background-color: rgba(255, 255, 255, 0); } .opm-advanced-search.open { height: auto; } .normal .opm-advanced-search.open { background-color: rgba(46,46,46, 0.1); } .alternate .opm-advanced-search.open { background-color: rgba(255, 255, 255, 0.1); } .opm-advanced-search > .inner { padding: 0; } .opm-advanced-search .group { padding: 10px; } .opm-advanced-search .group .title { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid; font-variant: small-caps; text-transform: lowercase; } .normal .opm-advanced-search .group .title { border-color: rgba(46, 46, 46, 0.2); } .alternate .opm-advanced-search .group .title { border-color: rgba(255, 255, 255, 0.2); } .opm-advanced-search .chk { position: relative; font-size: 14px; padding-top: 3px; } .opm-advanced-search .chk input { position: absolute; } .opm-advanced-search .chk label { display: inline-block; margin-left: 20px; } /* ------------------------------ Small version (call to action) ------------------------------ */ .opm-product-finder.call2action > .inner { padding: 40px 50px; } .opm-product-finder.call2action form {} .opm-product-finder.call2action h2 { position: relative; padding: 0; margin-bottom: 30px; } .normal.opm-product-finder.call2action .btn-search { background-color: #272727; border-color: #272727; color: #fff; } .normal.opm-product-finder.call2action .btn-search:hover { background-color: #fff; color: #2e2e2e; } .call2action .opm-advanced-search { -ms-flex-preferred-size: 100%; flex-basis: 100%; } /*.opm-product-finder.call2action #advancedLink::before { display: inline; } .opm-product-finder.call2action #advancedLink::after { display: none; }*/ /* ------------------------------------------------------------------------------ Résultat de recherche product finder ------------------------------------------------------------------------------ */ .single-brand .opm-product-finder-result::before { display: none; } .single-brand .opm-product-finder-result .result-title { padding-top: 0; } .opm-product-finder-result { position: relative; } .opm-article-list.loading::before, .opm-product-finder-result.loading::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: block; width: 100%; height: 100%; border: none; background-color: rgba(255, 255, 255, 0.6); transform: none; } .opm-article-list.loading::after, .opm-product-finder-result.loading::after { position: fixed; top: 45%; left: calc(50% - 25px); z-index: 10; width: 50px; height: 50px; border-width: 4px; } .opm-product-finder-result.loading::after { position: absolute; top: 5%; } .opm-product-finder-result .result-title { padding-bottom: 0; } .opm-product-finder-result .result-title .filters { height: auto; border-bottom: 1px solid; } .opm-product-finder-result .result-title .filters.empty { height: 0; } .opm-product-finder-result .result-title .filters ul, .opm-product-finder-result .result-title .filters li { display: inline-block; } .opm-product-finder-result .result-title .filters li:not(:last-child)::after { content: ", "; margin-right: .2em; } .opm-product-finder-result .wrapper { padding-top: 20px; } .opm-product-finder-result .result { position: relative; margin: 10px 0; padding: 10px 0; border-bottom: 1px solid #ccc; } .opm-product-finder-result .result img { position: relative; width: 100%; height: auto; } .opm-product-finder-result.all-results a[class*="load-more"] { display: none; } .selected-products > a, .opm-product-finder-result .result { display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .opm-product-finder-result .result > .a { position: relative; } .selected-products h3, .opm-product-finder-result .result h2 { -ms-flex-positive: 1; flex-grow: 1; } .selected-products a .price, .opm-product-finder-result .result .price { font-weight: bold; margin-top: 5px; padding-left: 10px; } .opm-product-finder-result .available-on-demand, .opm-product-finder-result .sold-out { position: absolute; left: 0; bottom: 0; opacity: .9; z-index: 100; display: block; width: calc(100% - 10px); margin: 0 5px; padding: 5px 0px; background-color: lightpink; font-size: 1em; font-weight: bold; text-align: center; text-transform: uppercase; } /* AMWS */ .opm-product-finder-result .available-on-demand { background-color: bisque; } .opm-product-finder-result .infinite-scroll-wrap { padding-bottom: 40px; } /* -------------------------------- IE9 fix -------------------------------- */ .no-flexboxtweener.no-flexbox nav .opm-product-finder { width: auto; } .no-flexboxtweener.no-flexbox nav .opm-product-finder form { display: none; } @media screen and (max-width: 900px) { /* ------------------------------------------------------------------------------ Small version (call to action) ------------------------------------------------------------------------------ */ .opm-product-finder.call2action > .inner { padding: 30px 20px; } .opm-product-finder.call2action h2 { margin-bottom: 20px; } .opm-product-finder.call2action form .btn-medium { padding: 0 20px; } } @media screen and (max-width: 768px) { /* ------------------------------------------------------------------------------ Product Finder ------------------------------------------------------------------------------ */ .opm-advanced-search > .inner { display: block; } .opm-advanced-search .group { position: relative; display: block; overflow: hidden; height: 40px; padding-top: 0; } .opm-advanced-search .group.open { height: auto; } .opm-advanced-search .group .title { padding-top: 10px; position: relative; border-bottom: none; } .opm-advanced-search.open .group .title { border-top-width: 1px; border-top-style: solid; } .opm-advanced-search .group:hover .title { cursor: pointer; } .opm-advanced-search .group .title::after { content: "\e259"; position: absolute; right: 10px; display: block; font-family: "Glyphicons Halflings"; font-size: 14px; top: 50%; transform: translate(0, -50%); } .opm-advanced-search .group.open .title::after { content: "\e260"; } .opm-advanced-search .group ul{ max-height: 55vh; overflow-y: scroll; } .opm-advanced-search .chk { padding: 5px 0; } } @media screen and (max-width: 480px) { /* ------------------------------------------------------------------------------ Product Finder ------------------------------------------------------------------------------ */ /* ------------------------------ Global ------------------------------ */ .opm-product-finder input[type="text"], .opm-product-finder input[type="submit"], .opm-product-finder button, .opm-product-finder select { width: 100%; margin: 10px 0 0; } .opm-product-finder .btn-search { margin-top: 10px; padding: 0 40px; } /* ------------------------------ Small version (call to action) ------------------------------ */ .opm-product-finder.call2action form { padding: 0; } .opm-product-finder.call2action h2 { margin-bottom: 10px; } } /* ------------------------------------------------------------------------------ Product Header ------------------------------------------------------------------------------ */ .product-header .images { position: relative; overflow: hidden; margin: 40px 0 0; height: calc(100vh - 350px); min-height: 300px; max-height: 600px; } .product-header img.soldat { height: 100%; width: auto; left: 50%; transform: translateX(-50%); } .product-header img { position: relative; top: 0; left: 0; width: auto; transform: none; } .product-header .sold-out { position: absolute; left: 0; bottom: 10%; opacity: .6; z-index: 100; width: 100%; padding: 10px 0; background-color: lightpink; font-size: 1.4em; font-weight: bold; text-align: center; text-transform: uppercase; } /* -------------------------------- Alternative views -------------------------------- */ .product-alternatives { position: absolute; right: 0%; bottom: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; } .product-alternatives a { position: relative; display: block; width: 130px; height: 80px; margin-top: 10px; overflow: hidden; } .product-alternatives a img { position: absolute; top: 50%; display: block; width: 130px; height: auto; margin: 0; opacity: .5; transform: translate(0, -50%); transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .product-alternatives a:hover img { opacity: 1; } .product-alternatives a.video::after { content: "\e029"; position: absolute; left: 50%; top: 50%; font-family: "Glyphicons Halflings"; font-weight: normal; font-size: 38px; color: rgba(39,39,39, 0.9); transform: translate(-50%, -50%); } /* -------------------------------- Characteristics icons -------------------------------- */ .product-header .watch-features { position: absolute; top: 0; width: 60px; display: block; } .ie-support .product-header .watch-features, .edge-support .product-header .watch-features { display: none !important; } .product-header .watch-features .icon { position: relative; margin-right: 5px; display: block; } .product-header .watch-features .icon svg { width: 100%; max-height: 55px; padding: 8px; border-radius: 50%; background-color: #2e2e2e; fill: #fff; stroke: #fff; } /* ------------------------------------------------------------------------------ Product actions ------------------------------------------------------------------------------ */ .product-actions { padding: 0 0 20px; text-align: center; } .product-actions .btn-medium { left: initial; display: inline-block; margin: 0; padding-left: 20px; padding-right: 20px; transform: none; border-right: none; } /* ------------------------------------------------------------------------------ Product description ------------------------------------------------------------------------------ */ .product-desc .inner { padding-top: 0; } .product-desc h2 { padding: 20px 0; } .product-desc .content { max-width: 750px; margin: 0 auto; } .product-price, .product-content { padding: 0 50px; border-top: 1px solid; } .product-desc h2 { text-align: center; border-top: none; font-size: 28px; } .product-price h3 { text-align: center; font-family: 'Gotham Light', 'Gotham'; } .product-price .btn-large { min-width: 60%; margin-top: 20px; } /* ------------------------------------------------------------------------------ Characteristics ------------------------------------------------------------------------------ */ .product-specification *[class*='flex-col-'] { padding: 0 15px 10px 0; } .product-specification li { padding: 0 0 5px; font-family: arial, sans-serif; } .product-specification .functions { padding-bottom: 5px; } .product-specification .functions li { position: relative; padding: 5px 0 0 15px; font-size: 14px; } .product-specification .functions li:first-child { padding-top: 5px; } .product-specification .functions li::before { content: '-'; position: absolute; left: 0; } .product-specification h3 { padding: 5px 0; border-top: 1px dotted; font-size: 22px; } .product-specification h4 { padding: 0; font-size: 16px; font-family: inherit; display: inline-block; } .product-specification h4:not(:only-child)::after { content: ":"; padding-right: 5px; } .product-specification h5 { font-weight: bold; } .product-specification p { font-size: 14px; padding: 0 0 5px; display: inline; font-family: inherit; } .tooltip { font-size: 10px; font-family: inherit; padding: 0 3px; } /* ------------------------------------------------------------------------------ Tablet ------------------------------------------------------------------------------ */ @media screen and (max-width: 768px) { .product-desc .inner { padding-top: 0; } .product-price { padding-bottom: 20px; } } /* ------------------------------------------------------------------------------ Mobile ------------------------------------------------------------------------------ */ @media screen and (max-width: 480px) { .product-header .images { height: auto; max-height: none; min-height: none; } .product-header img.soldat { width: 100%; height: auto; } /* -------------------------------- Alternative views -------------------------------- */ .product-alternatives { position: relative; bottom: auto; } .product-alternatives a { display: inline-block; width: 32%; } .product-alternatives a img { width: 100%; } .product-price .btn-large { min-width: 80%; } /* -------------------------------- Characteristics icons -------------------------------- */ .product-header .watch-features { position: relative; width: auto; padding: 0; margin-top: 10px; text-align: center; display: -ms-flexbox; display: flex; } .product-header .watch-features .icon { padding: 5px; margin-right: 0; display: inline-block; } .product-header .watch-features .icon svg { max-width: 62px; max-height: 62px; } /* ------------------------------------------------------- Product actions ------------------------------------------------------- */ .product-actions .btn-medium { padding: 0 10px; } /* ------------------------------------------------------- Description ------------------------------------------------------- */ .product-desc h2 { padding: 10px 0; } .product-price, .product-content { padding: 0 10px; } .product-price { padding-bottom: 10px; } .product-content p { padding-top: 0; } /* ------------------------------------------------------- Characteristics ------------------------------------------------------- */ .product-specification [class*="flex-col-"] { padding-right: 0; } .product-specification h3 { text-align: center; } } .newsletter-form .select2-container--default { width: 100% !important; } .newsletter-form .select2-container .select2-selection--single { height: 35px; } .newsletter-form .select2-container .select2-selection----multiple { min-height: 35px; } .newsletter-form .select2-container .select2-selection--single, .newsletter-form .select2-container .select2-selection----multiple { margin: 5px 0; } .newsletter-form .select2-container .select2-selection--single, .newsletter-form .select2-container--default .select2-selection--multiple { border: none; border-radius: 0; } .newsletter-form .select2-container--default.select2-container--focus .select2-selection--multiple { border: none; } .newsletter-form .select2-container .select2-selection--single .select2-selection__rendered { line-height: 35px; } .newsletter-form .select2-container--default .select2-selection__arrow { height: 35px; top: 5px; right: 5px; } .newsletter-form .select2-container--default .select2-selection--multiple .select2-selection__choice { color: #000; font-size: 14px; border-radius: 2px; } .select2-container--open .select2-dropdown--below { margin-top: -5px; border-radius: 0; border-top: 1px solid #aaa; } .select2-search--dropdown { display: none; } .share-facebook:hover { color: #3b5998; background-color: rgba(59, 89, 152, .2); } .share-pinterest:hover { color: #cb2027; background-color: rgba(203, 32, 39, .2); } .share-instagram:hover { color: #125688; background-color: rgba(18, 86, 136, .2); } .share-linkedin:hover { color: #007bb5; background-color: rgba(0, 123, 181, .2); } .share-gplus:hover { color: #dd4b39; background-color: rgba(221, 75, 57, .2); } .share-twitter:hover { color: #00aced; background-color: rgba(0, 172, 237, .2); } .share-email:hover { color: #419cca; background-color: rgba(65, 156, 202, .2); } .lm-share { position: relative; z-index: 100; display: inline-block; width: 55px; height: 55px; border: 1px solid; cursor: pointer; vertical-align: top; } .lm-share .title { position: relative; z-index: 10; font-size: 0; line-height: 53px; text-align: center; background-color: #fff; } .share-btn::before, .lm-share .title::before { position: relative; font-size: 18px; line-height: 53px; vertical-align: middle; } .share-btns { position: absolute; left: -1px; bottom: 0; z-index: 1; width: calc(100% + 2px); height: 0; overflow: hidden; background-color: #fff; border: 1px solid; border-bottom-color: lightgrey; transition-duration: .2s; transition-property: height, margin; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .lm-share:hover .share-btns { height: 318px; margin-bottom: 53px; } .share-btn { position: relative; display: block; width: 100%; color: #000; font-size: 0; line-height: 53px; background-color: #fff; border-top: 1px solid lightgrey; transition-duration: .2s; transition-property: background-color, color; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .share-btn:first-child { border-top-color: transparent; } /* ----------------- Highlight ---------------- */ .dark .lm-share.highlight .title { background-color: #000; } .dark .lm-share.highlight .title::before { font-weight: bold; } /* ----------------- Article & Brand ---------------- */ .single-brand .opm-hero-head .overlay { padding-bottom: 30px; } .lm-share.brand, .lm-share.article { left: 50%; width: 180px; transform: translate(-50%,0); } .lm-share.article { margin-bottom: 30px; } .lm-share.brand .title, .lm-share.article .title { font-size: 1em; padding: 0 20px; color: #fff; background-color: #2e2e2e; } .lm-share.brand .title::before, .lm-share.article .title::before { padding-right: 15px; } .lm-share.brand .share-btn, .lm-share.article .share-btn { font-size: 1em; padding-left: 35px; } .lm-share.brand .share-btn::before, .lm-share.article .share-btn::before { padding-right: 10px; } @media screen and (max-width: 480px) { .lm-share { height: 45px; } .lm-share .title, .lm-share .share-btn { line-height: 43px; } .lm-share .title::before, .lm-share .share-btn::before { font-size: 16px; line-height: 43px; } .share-btns { height: 43px; } .lm-share:hover .share-btns { height: 260px; margin-bottom: 43px; } /* ----------------- Product ---------------- */ .lm-share.product { width: 45px; } } /* ------------------------------------------------------------------------------ Animations keyframes ------------------------------------------------------------------------------ */ @keyframes fadeInFadeOut { 0% { transform: translate(-50%,-20px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-50%,20px); opacity: 0; } } /* ------------------------------------------------------------------------------ Desktop ------------------------------------------------------------------------------ */ /* AMWS */ .opm-slider .slide-more{ right: -4.4rem; bottom: -1rem; position: absolute; } .opm-slider .slide-more button{ cursor: pointer; height: 30px; padding: 0 0.5rem; } .opm-slider .slide-description{ display:none; } /* End AMWS */ .opm-slider { position: relative; height: calc(100vh - 130px); width: 100%; } .opm-slider .wrapper { position: relative; display: block; height: 100%; width: 100%; overflow: hidden; list-style: outside none none; } .opm-slider .wrapper a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; background-size: cover; background-position: top center; background-attachment: scroll; } .opm-slider .wrapper a.active, .opm-slider .wrapper a:first-of-type { visibility: visible; } .opm-slider .wrapper a.highlight { background-position: center; } .opm-slider .wrapper a:hover::before, .ios-support .opm-slider .wrapper a::before, .ios-7-support .opm-slider .wrapper a::before { opacity: 0.8; } .opm-slider .wrapper .caption { position: relative; top: 50%; width: 90%; max-width: 1280px; padding: 40px; margin: 0 auto; opacity: 1; color: #fff; background-color: rgba(46,46,46,0.2); text-align: center; transform: translateY(-50%); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .opm-slider .wrapper a:hover .caption { opacity: 1; background-color: rgba(46,46,46,0.8); } .ios-support .opm-slider .wrapper a .caption, .ios-7-support .opm-slider .wrapper a .caption { opacity: 1; background-color: rgba(46,46,46,0.6); } .opm-slider .wrapper .caption h2 { margin-top: 0; padding: 0 0 10px; } .opm-slider .wrapper .caption p { font-size: 16px; line-height: 28px; margin: 10px 100px; } .opm-slider .arrows { display: none; position: absolute; top: 50%; left: 50%; z-index: 10; width: 100%; max-width: 1280px; margin: 0 auto; transform: translate(-50%, -50%); } .opm-slider .arrows .prev-slide, .opm-slider .arrows .next-slide { position: absolute; padding: 10px; border-radius: 5%; text-decoration: none; color: rgba(255,255,255,0.9); transition: all 0.2s; } .opm-slider .arrows .prev-slide { left: 40px; transform: rotate(180deg); } .opm-slider .arrows .next-slide { right: 40px; } .opm-slider .arrows .prev-slide:hover, .opm-slider .arrows .next-slide:hover { color: #272727; background-color: rgba(255,255,255,0.9); } .opm-slider .nav-dots { position: absolute; bottom: 5%; right: 50px; z-index: 10; transition: all 0.2s; } .opm-slider .nav-dots a { position: relative; display: inline-block; width: 15px; height: 15px; margin-left: 15px; border-radius: 50%; background-color: rgba(255,255,255,0.9); transition: all .2s; border: 1px solid #827e78; } .opm-slider .nav-dots a.active, .opm-slider .nav-dots a:not(.active):hover { background-color: #827e78; } .opm-slider .scroll-action { position: absolute; bottom: 10px; left: 50%; display: block; width: 30px; height: 30px; color: white; opacity: 1; z-index: 20; transform: translateX(-50%); animation: floating 2s infinite; } .opm-slider .scroll-action::before, .opm-slider .scroll-action::after { content: ""; position: absolute; bottom: 0; display: block; width: 100%; height: 3px; background-color: #fff; } .opm-slider .scroll-action::before { transform-origin: right center; transform: translateX(-48%) rotate(45deg); } .opm-slider .scroll-action::after { transform-origin: left center; transform: translateX(48%) rotate(-45deg); } @keyframes floating { 0% { transform: translate(-50%, 0%); } 50% { transform: translate(-50%, 30%); } 100% { transform: translate(-50%, 0); } } /* ------------------------------------------------------------------------------ Small desktop < 1024 ------------------------------------------------------------------------------ */ @media screen and (max-width: 1024px) { .opm-slider .arrows .prev-slide { left: 20px; } .opm-slider .arrows .next-slide { right: 20px; } .opm-slider .nav-dots { right: 30px; } } /* ------------------------------------------------------------------------------ Hybrid < 900 ------------------------------------------------------------------------------ */ @media screen and (max-width: 900px) { .opm-slider .wrapper .caption p { margin: 10px 50px; } } /* ------------------------------------------------------------------------------ Tablet ------------------------------------------------------------------------------ */ @media screen and (max-width: 768px) { .opm-slider { height: calc(100vh - 100px); } .opm-slider .wrapper .caption { padding: 30px; } .opm-slider .wrapper .caption p { margin: 10px 30px; } .opm-slider .arrows .prev-slide { left: 10px; } .opm-slider .arrows .next-slide { right: 10px; } } /** iPad with portrait orientation. */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait){ .ios-7-support .opm-slider { height: 828px; } } /** iPad with landscape orientation. */ @media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) { .ios-7-support .opm-slider { height: 541px; } } /* ------------------------------------------------------------------------------ Mobile ------------------------------------------------------------------------------ */ @media screen and (max-width: 480px) { .opm-slider { height: calc(100vh - 130px); } .opm-slider .wrapper .caption { padding: 20px 10px; } .opm-slider .wrapper .caption h2 { font-size: 32px; padding-bottom: 5px; } .opm-slider .wrapper .caption p { margin: 0 10px; } .opm-slider .arrows { display: none; } .opm-slider .nav-dots { bottom: 10px; right: 20px; } } /** iPhone with landscape orientation */ @media screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) { .ios-7-support .opm-slider { height: 250px; } } /** iPhone with portrait orientation */ @media screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) { .ios-7-support .opm-slider { height: 330px; } } /** MS Edge hacks */ @supports (-ms-accelerator:true) { .opm-hero-head { background-attachment: scroll; } } /* ------------------------------------------------------------------------------ OPM-visit-us ------------------------------------------------------------------------------ */ .opm-visit-us { width: 100vw; height: calc(100vh - 50px); padding: 0; } .opm-visit-us .back-img { position: absolute; width: 100%; height: 100%; z-index: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; } .opm-visit-us .back-img::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; width: 100%; height: 100%; opacity: .8; background-color: #2e2e2e; transition: opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1); } .opm-visit-us:hover .back-img::before { opacity: .3; } .opm-visit-us h2 { position: relative; top: 45%; width: 70%; margin: 0 auto; padding: 20px 0; border-top: 3px solid; border-bottom: 1px solid; transform: translateY(-50%); } .opm-visit-us a.btn-large { position: absolute; top: 50%; } .opm-visit-us h2, .opm-visit-us a.btn-large { color: #fff; border-color: #fff; } .opm-visit-us a.btn-large:hover { color: #2e2e2e; background-color: #fff; } /* ------------------------------------------------------------------------------ Mobile ------------------------------------------------------------------------------ */ @media screen and (max-width: 480px) { .opm-visit-us { height: 100vh; } .opm-visit-us h2 { width: calc(100% - 40px); margin: 0 20px; } .opm-visit-us a.btn-large { top: 60%; width: 70%; } } /** iPad with portrait orientation. */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait){ .opm-visit-us { height: 1024px; } } /** iPad with landscape orientation. */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape){ .opm-visit-us { height: 768px; } } /** iPhone with landscape orientation */ @media screen and (device-width: 320px) and (device-height: 480px) and (orientation: landscape) { .opm-visit-us { height: 320px; } } /** iPhone with portrait orientation */ @media screen and (device-width: 320px) and (device-height: 480px) and (orientation: portrait) { .opm-visit-us { height: 480px; } } /** * iPhone 5 You can also target devices with aspect ratio. */ @media screen and (device-aspect-ratio: 40/71) { .opm-visit-us { height: 500px; } } .customize-support header #topHeader { top: 0; } .customize-support header #mainHeader .languages { top: -30px; } .customize-support header.scrolled #mainHeader { margin-top: 62px; } .customize-support #content { min-height: calc(100vh - 82px); } /* browser viewport - admin bar + footer height */ .customize-support #panel { top: 32px; height: calc(100vh - 32px); } .customize-support .opm-slider { height: calc(100vh - 162px); } #mediaLightbox::before, #mediaLightbox::after { top: 52px; } @media screen and (max-width: 768px) { .customize-support header #topHeader { top: 60vh; } .customize-support header #mainHeader { margin-top: 0; } .customize-support header #mainHeader .languages { top: 10px; } .customize-support .main-menu { top: 46px; } .customize-support .menu-level-1, .customize-support .menu-level-2, .customize-support .menu-level-3 { top: 180px; } .customize-support.scrolled .menu-level-1, .customize-support.scrolled .menu-level-2, .customize-support.scrolled .menu-level-3 { top: 140px; } .customize-support li.menu-item.sub-level-open > a, .customize-support .scrolled li.menu-item.sub-level-open > a { top: 46px; } } @media screen and (max-width: 600px) { .customize-support.scrolled header #mainHeader { margin-top: -50px; } .customize-support #panel { top: 0; height: 100vh; } .customize-support.scrolled .main-menu, .customize-support.scrolled li.menu-item.sub-level-open > a { top: 0; } .customize-support.scrolled .main-menu { height: calc(60vh + 46px); } .customize-support.scrolled .menu-level-1, .customize-support.scrolled .menu-level-2, .customize-support.scrolled .menu-level-3 { top: 90px; } } @media screen and (max-width: 480px) { .customize-support .menu-level-1, .customize-support .menu-level-2, .customize-support .menu-level-3 { top: 150px; } }