/* layout */ * { margin: 0; padding: 0; border: 0; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } body { font-family: 'Roboto Condensed'; font-size: 14px; color:#333333; background-color:#F8F8F8; } .headerMenu { display: flex; flex-direction: column; @media (min-width: 767px) { flex-direction: initial; } } #mainNav .headerMenu > div:first-child { display: flex; } #mainNav .headerMenu div { margin: 0; } #mainNav .headerMenu div.vide { margin-bottom: 20px; line-height: 20px; } #mainNav .headerMenu > div:first-child > div:first-child { margin-right: 5em; } .needHelp { margin: 2em; } .elt-73 img { height: 450px; object-fit: cover; } a, a:active, a:visited, a:hover { color:#333; text-decoration:none; } a:hover { text-decoration:underline; } p { Font-size:1.2em; line-height: 1.5em; Color:#333333; margin-bottom:10px; } ul { padding: 0; margin:0 } li { list-style:none } .puceList { padding-left: 20px; } .puceList li { list-style-type:disc; padding:0 } hr { margin-top: 5px; margin-bottom: 5px; border: 0; border-top: 1px solid #888888; } img { max-width:100%; height: auto; } .strikethrough { text-decoration:line-through; } #mainImgProd { width: 100%; margin-top: 3em; } header,footer { font-weight:400; font-size:16px; } sup { vertical-align:super; top:0 } /* titles */ h1, .title1 { color:#333; font-weight: 300; font-size: 48px; line-height: 52px; } h2, .title2 { color:#333; font-weight: 300; font-size: 36px; line-height: 40px; } h3, .title3 { color:#333; font-weight: 300; font-size: 30px; line-height: 40px; } h3.border, .flex.border, .margin.border, .title4.border { border-bottom: solid 1px #dadada; padding-bottom: 10px; } .border { border-bottom: 1px solid #dadada; padding-bottom: 15px; } h5, .title5 { color:#333333; font-weight: 400; font-size: 1.3em; line-height: 22px; } .title5 .htva, .price .htva, .text-right .htva{ font-size: 14px; } h6, .title6 { color:#333333;font-weight: 400; font-size: 16px; line-height: 20px; } /* CROSSSELLING */ .title-main { position: relative; color: #004b75; } .title-main{ text-align: center; padding: 0; font-size: 1.7em; margin: 1em 0; text-transform: initial; font-weight: 400; } .title-main:after{ content: ""; border-bottom: 1px solid #004b75; display: block; width: 10%; margin: 10px auto 0; } .bold { color:#333; font-weight:700 } .color1 { color:#d92231; } .color2, .color2:hover { color:#124e8a; } .no-padding { padding:0; margin-bottom: 5px; } .no-padding .btn1{ height: 40px; } .regular { font-weight:400 } .text-underline { text-decoration:underline } .flex_auto, .flex_center, .flex_left, .flex_right { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .flex_center, .flex_left, .flex_right { justify-content: center; } .flex_left, .flex_right { justify-content: space-between; } .flex_right { justify-content: flex-end; } .flex_acenter { align-items: center; } .flex_abottom { align-self: flex-end; } .flex_atop { align-self: flex-start; } .flex { display: flex; justify-content: space-between; } /* link */ a.link1, a.link1:hover, a.link1:active, a.link, a.link:hover, a.link:active, .product_offer .color2:hover, .modal[id*='product_offer_detail'] a { color:#d92231; background-color: white; text-decoration: none; } a.link1.no-bg { background: none; } a.link { color: #8f327f; } a.link1.quote { color: #8f327f; font-weight: 700; } .link2 { font-weight:700; text-decoration:underline; text-transform:uppercase; } .img { position: relative; } .img .product_offer_img { display: inline-block; font-family: 'Roboto'; width: 10em; padding: 1em; color: white; background: rgba(0,0,0,.8); position: absolute; z-index: 10; top: 0; right: 0; font-size: .8em; /* fix link click */ pointer-events: none; } @media (min-width: 767px) { .img .product_offer_img { left: 0; bottom: 0; top: auto; } } @media (max-width: 767px) { .img .product_offer_img { height: fit-content; left: auto; } } .hoverState .mask { height:0; position:absolute; top: 0; left: 15px; right: 15px; bottom: 0; text-align: center; background-color: rgba(0, 0, 0, 0.1); cursor: pointer; z-index:10; opacity: 0; transition: .2s opacity ease; } .hoverState:hover .mask { opacity: 1; height: 100%; } .swiper-slide { height: unset; } .blocContentImgTextLink { height: 100%; display: flex; flex-direction: column; } .blocContentImgTextLink_content { display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; } #grd_7179 .blocContentImgTextLink_content { margin-bottom: 2em; } #grd_7170 .btn1, #grd_7179 .btn1, #grd_7183 .btn1 { margin-top: auto; } .hoverState:hover .btn1, .hoverState:hover .btn2, .hoverState:hover > p { position: relative; z-index: 100; cursor: pointer; } .hoverState p a:hover { text-decoration: underline; } /* buttons */ .btn { padding: 7px 10px; display: inline-block; font-size: 14px; line-height:16px; font-weight:700; text-transform:uppercase; } .btn1, .btn1:active, .btn1:visited{ background-color:#d92231; color:#fff !important; font-size: 14px; line-height:16px; font-weight:700; text-transform:uppercase; display: inline-block; text-decoration:none !important; position:relative; padding: 15px; vertical-align: top; height: 44px; } .hoverState:hover .btn1, .btn1:hover { background-color:#fff; color:#d92231 !important; border:1px solid #c1c1c1; padding: 15px; text-decoration:none; } /* .btn1:after { content: " "; background-image:url('../ximg/btnIcons.png'); background-position:7px 0; display: inline-block; height: 11px; width: 7px; margin-left: 10px; } .hoverState:hover .btn1:after, .btn1:hover:after { background-position:0 0; }*/ .btn2, .btn2:active, .btn2:visited { border:1px solid #989898; padding: 15px; display: inline-block; font-size: 14px; line-height:16px; font-weight:700; text-transform:uppercase; color:#333 !important; text-decoration:none; background-color:#fff; position:relative; height: 44px; } .btn2.shopping { border: 0px; width: 100%; text-align: center; margin: 10px 0; } .hoverState:hover .btn2, .btn2:hover { background-color:#d92231; color:#fff !important; text-decoration:none } /* .btn2:after { content: " "; background-image:url('../ximg/btnIcons.png'); background-position:0 0; display: inline-block; height: 11px; width: 7px; margin-left: 10px; } .hoverState:hover .btn2:after, .btn2:hover:after { background-position:7px 0; }*/ .btn-block { text-align:center; } .btn-block span.fa { float:none } /* box */ .box.no-bg { background-color: transparent; padding: 0; } .box { background-color:#ebebeb; padding:15px; } .box.white { background-color: #fff; border: 1px solid #dadada ; } .box.white.middle { width: 70%; } @media screen and (max-width: 767px) { .box.white.middle { width: 100%; } } .box .title2 { margin-top:0 } .box .pull-right { margin-right: -15px; width: 40px; text-align: center; } .box .pull-right.btn1 span { margin-left:0px } .box .pull-left { max-width: 90%; } .box .desc { clear:left; } .box2 { border:1px solid #dadada; margin-top:15px } .box2.specs{ position: relative; } .box2.specs .boxTitle{ padding:10px 50px; } .box2.specs .boxTitle:before { top: -3px; position: relative; left: -20px; content: "\f0dd"; font-family: "Font Awesome 5 Free"; } .box2.specs .boxTitle.arrow:before, .panel-heading h4.panel-title.arrow:before { content: "\f0d8"; top: 0px; } .box2 .boxTitle { background-color:#fff; cursor: pointer; padding:10px 15px; margin: 0; color: #333333; font-weight: 600; text-transform: uppercase; font-size: 18px; line-height: 22px; } .box2 .boxTitle.panier { background-color: #EBEBEB; } .box2 .boxTitle.panier h4 { text-transform: initial; } .box2 .boxTitle .row { margin-top:0; margin-bottom:0; } .box2 .boxContent { padding: 15px; background-color:#fff; } .global-box { display: flex; flex-direction: column; width: 40%; } .global-box .box3 { border: 1px solid #dadada; background-color: #fff; padding: 20px; } .global-box .box5 { border: 1px solid #dadada; background-color: #fff; padding: 20px; margin-top: 40px; } .global-box .box5 .shippingAddr{ border-bottom: 0; margin-bottom: 0; padding: 10px 0; } .flex .box4 { width: 55%; padding: 20px; border: 1px solid #dadada; background-color: #fff; } @media (max-width: 767px) { .flex { flex-direction: column; } .flex .box4{ width: 100%; } .global-box { width: 100%; margin-top: 40px; } .flex .box4 .submit{ position: fixed; bottom: 0; z-index: 999; width: 100%; left: 0; right: 0; margin: 0; } } .tunnel-step { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 20px auto; position: relative; height: 100px; background-color: #fff; } .current .step::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: #8f327f; display: inline-block; margin-bottom: 5px; z-index: 2; } .step { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 200px; text-align: center; position: relative; } .step::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: lightgray; display: inline-block; margin-bottom: 5px; z-index: 1; } .step1, .step2 { position: relative; } .line { content: ''; position: absolute; top: 50%; left: 100%; width: 280px; height: 2px; background-color: lightgray; z-index: 0; } .tunnel-paiement::before { background-color: lightgray; } .tunnel-confirmation::before { background-color: lightgray; } @media screen and (max-width: 767px) { .tunnel-step { height: auto; padding: 20px; } .step { width: 100%; } .line { display: none; } .step::before { margin-bottom: 10px; } .current .step::before { margin-bottom: 10px; } } /* collapse */ .collapse1.panel-group{ margin-bottom:0 } #accordion_paymentTgl.collapse1.panel-group{ margin-bottom:20px } .collapse1 .panel-heading.open { border:1px solid #d92231 ; background-color:#d92231 ; color:#fff; } #accordion_paymentTgl.collapse1 .panel-heading.open { border:1px solid #c1c1c1 ; background-color:#fff ; color:#333; } .collapse1.niv2 .panel-heading.open { border:1px solid #c1c1c1; border-top:0 none; background-color:#fff; color:#333; } .collapse1.niv2 .panel-heading.open .panel-title{ font-weight: 700; } .panel-heading.open .panel-title .fa:before { transform: rotate(180deg); position: absolute; right: 4px; top: 4px; } .collapse1 .panel-heading { border:1px solid #c1c1c1; background-color: #fff; color: #333; font-size: 20px; font-weight:300; margin-top: 20px; overflow: hidden; border-radius: 0; } .adyen-checkout__button { background: #3fa642 !important; } #compte_perso_page ul.account_act.text-center { display: flex; justify-content: space-between; margin-top: 5px; margin-bottom: 5px; } #compte_perso_page ul.account_act.text-center li { background-color: #d92231; width: 48%; height: 40px; display: flex; align-items: center; } #compte_perso_page ul.account_act.text-center li a{ color: #fff; } @media screen and (max-width: 640px){ #compte_perso_page ul.account_act.text-center { flex-direction: column; } #compte_perso_page ul.account_act.text-center li { width: 100%; } #compte_perso_page ul.account_act.text-center li:first-child { margin-bottom: 5px; } } .collapse1 .panel-title { font-size:20px; display: flex; height: 60px; } .collapse1 .panel-title a:hover, .collapse1 .panel-title a:visited{ color:#333; text-decoration:none; } .collapse1.niv2 .panel-title { font-size:18px } .collapse1 .panel-title a::after { content: " "; background-image:url('../ximg/collapseIcons.png'); background-position:0 0; display: inline-block; vertical-align: middle; height: 15px; width:15px; position: absolute; right: 0; top: 15%; } .collapse1 .panel-title > a { display: inline-block; vertical-align: middle; width: 100%; text-decoration: none; position: relative; padding-right: 20px; min-height: 44px; min-width: 44px; display: flex; align-items: center; } .collapse1 .open .panel-title a::after { background-position:15px 15px; } .collapse1.niv2 .open .panel-title a::after { background-position:15px 0; } #accordion_paymentTgl.collapse1 .panel-title a::after { display: none; } .collapse1.niv1 > .open > .panel-title > a:hover, .collapse1.niv1 > .open > .panel-title > a:visited { color:#fff !important; text-decoration:none !important } .collapse1.panel-group .panel-heading+.panel-collapse>.panel-body, .collapse1.panel-group .panel-heading+.panel-collapse>.list-group { background-color: #fff; border:1px solid #c1c1c1; border-top:0 none } .collapse1.panel-group .panel-heading+.panel-collapse>.panel-body.no-border, .collapse1.panel-group .panel-heading+.panel-collapse>.list-group.no-border { border:0 none; } .collapse1.panel-group .panel-heading+.panel-collapse>.panel-body.no-padding, .collapse1.panel-group .panel-heading+.panel-collapse>.list-group .no-padding{ padding: 0; } .panel-body .collapse1 .panel-heading { margin-top:0; border-top:0 } .panel-body li { font-size:16px; padding:10px 0 10px 30px } .panel-default.light { border:1px solid #ebebeb; border-radius:0; } .panel-default.light >.panel-heading { background-color:#fff; border:0 none } .panel-default.light >.panel-heading .panel-title>a { font-size:16px; font-weight:700; line-height:20px; text-transform:uppercase; display: flex; align-items: center; width:100%; height: 44px; } .panel-default.light > .panel-heading .panel-title > .fa, .panel-default.light > .panel-heading .panel-title > a > .fa { height: 20px; width: 20px; border: 1px solid #c1c1c1; text-align: center; border-radius: 100%; vertical-align: middle; position:absolute; right:25px; font-size:15px; transition: .3s transform ease; line-height: 14px; } .panel-default.light > .panel-collapse { background-color:rgb(235 235 235 / 30%); border:0 none; padding: 10px 15px; } .panel-default.light > .panel-heading.open .panel-title > .fa { transform: rotate(180deg); transition: .3s transform ease; } .panel-heading > .panel-title .check { height: 23px; width: 23px; border-radius: 23px; border: 1px solid #c1c1c1; position: relative; text-align: center; line-height: 23px; } .panel-heading > .panel-title .check:after { display: inline-block; content: ""; height: 15px; width: 15px; border-radius: 15px; border: 1px solid #c1c1c1; position: relative; transition: .2s background-color ease; } .panel-heading.open > .panel-title .check:after { background-color: #d92231; } /* form */ input:focus, input:checked { outline: 0 none; } input, select { -webkit-appearance:none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-user-modify: read-write-plaintext-only; } input[type="text"], input[type="password"], select, textarea, .dropdown-toggle { border:1px solid #c1c1c1; font-size:16px; height:44px; padding-left:10px; margin-bottom:20px; background-color:#fff; border-radius:0; color: #000; } textarea { height:auto } input[type="radio"], input[type="checkbox"] { position:absolute; } .radioLine .custom, .cboxLine .custom{ vertical-align: middle; width:16px; height:16px; margin: 0; display:inline-block; position: relative; } .radioLine .custom:before, .cboxLine .custom:before{ content: " "; background-image:url('../ximg/radio.png'); display: block; width:16px; height:16px; background-position:0 0; } .cboxLine .custom:before{ background-image:url('../ximg/checkbox.png'); } input[type=radio]:checked + .custom:before, input[type="checkbox"]:checked + .custom:before { background-position:0px 16px; } .custom + label { margin: 0 0 0 10px; display: inline-block; vertical-align:top; max-width: -moz-calc(100% - 30px); max-width: -webkit-calc(100% - 30px); max-width: calc(100% - 30px); } input::-webkit-input-placeholder{ color: #ccc; } input::-moz-placeholder{ color: #ccc; } input:-ms-input-placeholder{ color: #ccc; } input::-ms-input-placeholder{ color: #ccc; } input::placeholder { color: #ccc; } input.large, select.large, textarea.large, .btn-group.large, .large .dropdown-toggle, .large .dropdown-menu { width:100%; } input.medium { width:76%; } input.small { width:60%; font-size: 16px; } input.x-small { width:11%; margin-left: 5px; } .browseFile { position: relative; } .browseFile label.input-group-addon { font-size:18px } .browseFile .input-group { z-index: 5; margin-bottom: 20px; } .browseFile input[type="file"] { position: absolute; top: 4px; z-index: 0; height: 32px; width: 90%; left: 20px; } label, .label { display:block; Font-weight:300; Font-size:18px } .mandatory { color:#d92231; margin-right:5px } .radioLine { margin-bottom:20px } .radioLine > .row > div { padding-right:0; } .row.flex { display: flex; flex-direction: column; } .radioLine > .row > div, .cboxLine > .row > div { position:relative; } .cboxLine { margin-bottom:10px } .cboxLine.margin { margin-top:10px; } .margin { margin: 10px auto; } .cboxLine label { display:inline-block; vertical-align:top; font-size:14px; font-family:'Roboto'; } select, .dropdown-toggle{ min-width: 60px; margin-bottom:0; z-index:5; text-align:left; } .btn-group{ position:relative; margin-bottom:20px; display:inline-block; vertical-align:top } .btn-group.qtyGroup { margin-bottom:0px; } .dropdown-toggle .fa-chevron-down { position:absolute; bottom: 8px; right: 17px; background-color: #fff; text-align: center; z-index:1; margin:5px } .dropdown-toggle .fa-sort-down { position:absolute; bottom: 11px; right: 5px; background-color: #fff; text-align: center; z-index:1; margin:5px } .no-padding .dropdown-toggle .fa-chevron-down { right: 2px; } .dropdown-menu { min-width:60px; /*max-height:100px; overflow:auto*/ } .dropdown-menu li { padding:5px 10px; cursor:pointer } .dropdown-menu li.selected { background-color:#eee } .error { position:relative } .errorMsg { display:none; font-size:12px; color:#d92231; position:absolute; bottom:-10px } .errorPage { text-align: center; font-size: 16px; } .error input[type="text"], .error input[type="password"], input[type="text"].error, input[type="password"].error, .error textarea, .error .custom:before { border-color: #a94442 !important; color: #a94442; background-color: rgba(169, 68, 66, .3); } .error .errorMsg { display:block; } /* Carousel */ .sliderContainer { position: relative; padding: 0 45px; margin: 1em 0; } .carousel-indicators, .swiper-pagination { /*top: inherit; position: relative; margin: 0 auto 10px; left: inherit; top:20px;*/ bottom: inherit; } .swiper-pagination { position: relative; } .carousel-indicators li, .swiper-pagination .swiper-pagination-bullet { background-color: #f8f8f8; border: 1px solid #000; width: 10px; height: 10px; margin:0 2%; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; } .carousel-indicators li.active, .swiper-pagination .swiper-pagination-bullet-active { background-color:#d92231; border-color:#d92231; width:10px; height:10px; margin:0 2%; } .carousel-control { background-image: inherit !important; width: 10%; } .carousel-caption { text-shadow:none; position: relative; left: inherit; text-align:left; color:#333; bottom:inherit; padding-bottom:0 } .carousel-control .glyphicon { height: 60px; width: 30px; display: inline-block; top: 45%; position: absolute; } .carousel-control .glyphicon-chevron-left { background: url('../ximg/gray-arrows.png') no-repeat left transparent; left: 35%; } .carousel-control .glyphicon-chevron-right { background: url('../ximg/gray-arrows.png') no-repeat right transparent; right: 35%; } .carousel-control .glyphicon:before { content:""; } .carousel-inner, .class-box .swiper-wrapper { margin: 40px auto 0; } .carousel-inner .item > .video iframe, .class-box .swiper-slide > .video iframe { max-width:100% } .swiper-container {position:relative;} .swiper-button-prev, .swiper-button-next { background-image: none; font-size: 14px; width: 35px; height: 35px; text-align: center; background-color: #d92231; color:#fff; line-height: 35px; position:absolute; top:50% } .swiper-button-prev[data-icon], .swiper-button-next[data-icon] { background-color: transparent; } .swiper-button-prev[data-icon] { transform: rotate(180deg); } .swiper-button-prev {left:0} .swiper-button-next {right:0} .slick-slide,.slick-slide:focus, .swiper-button-next, .swiper-button-prev {outline: none !important;} .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {pointer-events: initial;} .swiper-container[data-slide_dtp="4"] .swiper-slide { width: 25%; } .swiper-container[data-space="20"] .swiper-slide { margin-right: 20px; } .elt-104 .product-slider-title { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; margin: 25px 0; } .elt-104 .ttlLine { border-top: 1px solid #E0E0E0; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; padding: 28px 25px; font-size: 14px; font-weight: 400; text-transform: uppercase; text-align: center; position: relative; } .elt-104 .ttlLine:nth-child(1) { border-left: 1px solid #E0E0E0; } .elt-104 .ttlLine.active { color: #d92231; } .elt-104 .ttlLine.active .ttlBorder:after { content: ""; display: block; width: 100%; height: 3px; background-color: #d92231; position: absolute; left: 0; bottom: -1px; right: 0; } .elt-104 {position:relative} .elt-104 .sliderContainer.active { position: relative; z-index: 1; opacity: 1 !important; top: 0; left: 0; } .elt-104 .sliderContainer { width: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: .5s opacity ease; transform-origin: 50% 100%; } .elt-105 .techSpecs { position:relative; } .elt-105 .techSpecs .title { padding:10px 0; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; cursor:pointer; } .elt-105 .techSpecs .title .text { font-size: 12px; font-weight: 700; line-height: 20px; text-transform: uppercase; } .elt-105 .techSpecs .title .fa { height: 18px; width: 18px; border: 1px solid #c1c1c1; text-align: center; padding: 5px 0 0 0; border-radius: 100%; vertical-align: middle; float: right; line-height: 12px; } .elt-105 .prod .bullets { display:none; position: absolute; bottom: 40px; left: -15px; padding: 10px; z-index: 5; right: -14px; background-color: #fff; box-shadow: 0px -10px 8px -8px #ccc; transition: .3s display ease; } .elt-105 .techSpecs.open .bullets { display: block; transition: .3s display ease; } .elt-105 .techSpecs.open .title .fa { transform: rotate(180deg); transition: .3s transform ease; } .elt-105 .prod .bullets li span { display:inline-block; max-width: 95%; vertical-align: top; } .elt-105 .prod > div { padding:15px 15px 10em 15px } .sliderContainer .prod .infos { padding-bottom: 8.5em; } .sku { font-weight: bold; font-size: 1.5em; margin-block: 1em; line-height: 1.5em; } h2.hidden-xs { color: #333; font-weight: 300; font-size: 24px; line-height: 28px; } .hoverState .btn1 { pointer-events: none; } /* Main */ .main > section { padding:10px 0 } .clear { clear:both } #splash_page > .box2 > .boxContent { overflow: hidden; } .oldPrice { text-decoration:line-through } /* header */ header > div, header > nav, footer, .main { padding:10px 10px 0; } header { border-bottom:1px solid #d1d1d1; background-color:#fff } header ul { display:inline-block; } header ul li { display:inline-block; color:#333; height: 44px; } header ul li a{ display:inline-block; height: 44px; min-width: 44px; } header ul li span{ display:inline-block; height: 44px; } header a, header a:hover, header a:active { color:#333; text-decoration:none !important } header #dtpNav a:hover { text-decoration:underline !important; color:#333 !important; } header li+li:before { content:"|"; color:#d9d9d9; margin:0 10px; } header #login:before { content: ""; } header .subCatg li+li:before { content:none; } header form.search { display: inline-block; width: 48%; } header form.search input{ width:100%; margin-bottom: 0; } nav { clear:both; margin-top:20px; } header .fa { color:#989898; font-size:20px } header .fa:hover, header .fa:active { color:#989898; } .selectedLanguage > .fa { margin-right: 10px } .languageSelector { display:none } header.main { position: relative; } .red-banner > div { background-color: #d92231; padding: 10px 0; text-align: center; color: #fff; } .red-banner a { color: #fff; float: right; margin-right: 40px; } header.main .mainNav nav.navbar { display: block; margin: 0; z-index: 8000; position: initial; } header.main .mainNav nav.navbar .mainNavLayer.open { border-top:1px solid #d9d9d9 } body.header_block_open header.main .mainNav nav.navbar, body.quick_search_open header.main .mainNav nav.navbar { z-index: 1000; } header.main .mainNav nav.navbar .contentMenu { margin-top: 0; height: auto; overflow: hidden; } header.main .mainNav nav.navbar .contentMenu > div { line-height: 40px; height: 44px; } header.main .mainNav nav.navbar .contentMenu > div+div:before { content: "|"; color: #d9d9d9; margin: 0 15px; } header.main .mainNav nav.navbar .contentMenu > div a { transition: border 0.2s ease 0s, color 0.2s ease 0s; font-weight: 400; font-size: 14px; height: 44px; display: inline-block; position: relative; text-transform: uppercase; } header.main .mainNav nav.navbar .contentMenu > div a:after { content: ""; width: 100%; height: 2px; background-color: #d92231; opacity: 0; position: absolute; left: 0; bottom: 11px; transition: 0.3s opacity ease, 0.3s bottom ease; } header.main .mainNav nav.navbar .contentMenu > div.selected a:after, header.main .mainNav nav.navbar .contentMenu > div:hover a:after { opacity: 1; bottom: 0px; } header.main .mainNav nav.navbar .mainNavLayer { z-index: 8000; background-color: #fff; } header.main .mainNav nav.navbar .mainNavLayer { left: 0; position: absolute; right: auto; top: 100%; margin: 0 auto; width: 100%; font-size: 14px; opacity: 0; height: 0; overflow: hidden; } header.main .mainNav nav.navbar .mainNavLayer:after { content: ""; width: 100%; display: block; height: 1px; border-bottom: 1px solid #e2e2e2; position: absolute; bottom: 0; left: 0; } header.main .mainNav nav.navbar .mainNavLayer > div { max-width: 1230px; margin: 0 auto; padding: 20px 0; text-align: left; overflow-y: auto; overscroll-behavior-y: contain; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .col-sm-3:nth-child(5n+1) { clear:both } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .sousCat a { font-size: 14px; color: #000; display: block; transition: color 0.2s ease 0s; line-height: 20px; margin-bottom:20px } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .sousCat a .libelle { display: inline-block; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .sousCat a .libelle:hover { text-decoration:underline; font-weight:700 } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .sousCat a.lvl-2:not(.other) { font-weight: 700; text-transform:uppercase; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .sousCat + .sousCat { margin-top: 20px; } .ico { display:inline-block; vertical-align: middle; } .ico.ico-cart { background:url('../ximg/shopping-cart-grey-30x24.png'); width:30px; height:24px; position:relative; margin-left: 5px; } .ico.ico-globe{ background:url('../ximg/Globe-Glyph.svg'); width:20px; height:20px; margin-right:10px; background-size: cover; } .cart-count { position: absolute; width: 26px; text-align: center; top: -13px; right: 4px; color: #000; font-weight: 700; font-size: 18px; } .logo img { width: 100%; display: inline; max-width: 115px; height: 44px; } a.logo { line-height: 36px; } .logo h1 { height: 44px; margin-top: 0; display: inline-block; font-size: 22px; vertical-align: middle; margin-bottom: 0; line-height:46px; margin-left:10px; } .logo h1 a { height: 44px; display: inline-block; margin-top: 0; font-size: 22px; } .breadcrumb { padding:8px 0; background-color:transparent; font-weight: 400; font-size: 12px; line-height: 22px; font-family:'Roboto'; } .breadcrumb li > a { color:#000; } .breadcrumb li > span { color:#333; } .breadcrumb>li+li:before { font-weight:bold; color:#333 } #payments { text-align: center; } #payments > a{ min-height: 44px; min-width: 44px; } /* ico */ .icoPaiement, [class*="paiement_"] { background:url('../ximg/paymentCards.png') no-repeat top left transparent; width:30px; height:18px; display: inline-block; } .amex, .paiement_amex { background-position:0px 0; } .cb, .paiement_cb { background-position:-30px 0; } .visa, .paiement_visa { background-position:-59px 0; } .paypal, .paiement_paypal { background-position:-87px 0; } .virement, .paiement_virement { background-position:-116px 0px; } .ideal, .paiement_ideal { background-position:0px -21px; } .sofort, .paiement_sofort { background-position:-30px -21px; } .bancontact, .paiement_bancontact { background-position:-59px -20px; } /* Block mailing */ .newsletter { background-color:#8f327f; color:#fff; padding:40px 0 25px 0; margin-top:15px; } .newsletter p { color:#fff; line-height: 1.5; font-size: 1.2em; } .newsletter form { max-width:1170px; margin:0 auto } /* footer */ footer .title { font-weight:bold; margin: 1em; } footer .sousThemes { margin: 1em; } footer .sousThemes li, footer .sousThemes li a { min-height: 44px; min-width: 44px; } #footer-nav { display: flex; } #footer-nav > div { flex-basis: 25%; } .otherLinks { margin-top:20px } .otherLinks ul li { display:inline-block; color:#333; font-size: 14px; } .otherLinks li:after { content:"|"; color:#d9d9d9; margin:0 10px; font-size: 15px; vertical-align: top; } .otherLinks li:last-child:after { content:""; } .payment > p { Font-size:14px; Color:#333333; margin-top:10px; line-height: 1.5em; } .legal > p, .copy { font-size:0.9em; color:#333333; margin-top:10px; line-height: 1.5em; } .copy { } .security { width: 2em; } .payment { padding-right:0 } #truste-show-consent { height: 44px; } /* Lightbox */ .modal.in .modal-dialog { margin-top:20% } .modal-content > .close { margin: 10px; } .modal-body { overflow:hidden; padding: 30px; } .modal-body li { padding:inherit; font-size:inherit } /*lbx Newsletter*/ #lbxNewsletter .offer { margin-top:10px } #lbxNewsletter .dropdown-menu { height: 95px; overflow: auto; } .subscribe { margin-top: 1em; } /* Ajout au panier */ .img-title { display: flex; align-items: center; justify-content: center; width: 100%; margin: 20px auto; } .close-btn img { position: absolute; height: 30px; width: 30px; right: 25px; top: 60px; cursor: pointer; } .row.column { display: flex; flex-direction: column; max-width: 700px; margin: auto; } .row.column .or { margin: 30px; text-align: center; } .row.column .or p { margin-bottom: 0; } .row-global { display: flex; width: 100%; align-items: center; justify-content: space-between; } @media screen and (max-width: 767px) { .row-global { flex-direction: column; } .row-left { width: 100% !important; } .row-right { width: 100% !important; } } .row-left { display: flex; width: 60%; align-items: flex-start; flex-wrap: wrap; } .row-right { width: 40%; } .row-left .colonne { width: 70% !important; padding-right: 20px; } .row-left img { height: auto; width: 30%; padding: 20px 20px 0px 0px; } #productAdded .addedIcon { vertical-align: middle; margin-right: 2%; max-width:30px } #productAdded h2 { vertical-align: middle; display:inline-block; width: auto; font-weight:300; font-size: 24px; line-height: 28px; margin-top: 12px; } #productAdded .product h2 { margin-top: 5px; font-weight: 300; font-size: 24px; line-height: 28px; } #productAdded .product { margin:10px 0 } #productAdded .product > img, #productAdded .product > p { vertical-align:middle } #productAdded .product > img { max-width: 90%; } #productAdded .product > p { margin-top: 15px; font-size: 14px; margin-top: 15px; line-height: 22px; font-family:'Roboto'; } #productAdded .product > p.price { font-weight: 300; font-size: 24px; line-height: 22px; } #productAdded .product > h2 > span { display: block; font-size: 14px; margin-top: 15px; line-height: 22px; font-family:'Roboto'; color:#737373 } #productAdded a.half { width:100%; text-align:center; margin: 5px; } #productAdded .half.btn1 { margin-right:2% } #productAdded a.link1 { margin-top:10px } #productAdded .infos_liv { margin-bottom: 20px; padding: 10px; background: #1c69bc2e; border: solid 1px #1c69bcba; } .infos_liv_orange { margin-bottom: 20px; padding: 10px; margin-top: 10px; background: #FFF3E6; border: #ff8500 solid 1px; border-radius: 5px; } .alert-warning { background: #1c69bc2e; border: solid 1px #1c69bcba; color: #000; } /* Products list */ .prod { height:auto; margin: 15px 0; } .prod > div { background-color: #fff; color: #333; border: 1px solid #ebebeb; padding: 15px; height:100%; position:relative; } .prod h3.desc { font-size:14px; line-height:22px; font-weight:400; color:#737373; font-family:'Roboto'; } .prod h2.name { font-size:18px; line-height:22px; font-weight:400; overflow:hidden; } .prod .price { padding: 15px 0; line-height: 22px; color: #333; font-size: 18px; position: absolute; bottom: 5em; } .prod .actions { position: absolute; bottom: 5px; left: 15px; right: 15px; } .prod .btn2.btn-block { width: 100%; } /* DTP */ @media (min-width: 992px) { header.main .mainNav { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } header > div, header > nav, section.main, footer > div { max-width:1170px; margin:0 auto; } section.main .headerTitle{ display: flex; justify-content: space-between; align-items: center; } section.main .headerTitle h4 { margin-bottom: 0; } section#index_page.main { max-width:100%; padding:0; } form.search { position:relative; margin-right:20px } form.search .fa { position:absolute; right: 10px; top: 7px; font-size: 24px; } header { border-bottom: 1px solid #d9d9d9; padding-bottom: 0; } ul#secondNav { font-size: 14px; height: 44px; } .firstNav .logo { width: auto; display: flex; align-items: center; min-width: 44px; height: 44px; } #dtpNav { width: 76%; width: calc(100% - 250px); width: -moz-calc(100% - 250px); width: -webkit-calc(100% - 250px); } /* sticky*/ header.sticky { position: fixed; width: 100%; top:0; background-color: #fff; z-index:16; border-bottom:0 none; box-shadow: 0px 4px 5px rgba(102,102,102,0.8); } .sticky .firstNav { /*display:none*/ } header.sticky ul , header.sticky .logo > img{ vertical-align: middle; } header.sticky ul.catg { margin-left:15px } .sticky #mainNav { /*padding:20px 10px 10px*/ } header.sticky .logo > img { min-width: 44px; min-height: 44px; } header.sticky .pull-right { margin-top:2px; } .sticky #stickySearch{ display:inline-block!important } /*lbx Newsletter*/ #lbxPromo { width:705px } #lbxNewsletter { width:970px } div#productAdded { width: 1000px; } } /* DTP + TAB */ @media (min-width: 768px) { .carousel-inner, .class-box .swiper-wrapper { width: 80%; } .carousel-inner .item > img, .carousel-inner .item > .video, .class-box .swiper-slide img, .class-box .swiper-slide > .video{ width: 65%; margin-right: 1%; display: inline-block; vertical-align: middle; height:auto; } .carousel-inner .carousel-caption, .class-box .swiper-slide .carousel-caption { width: 33%; display: inline-block; vertical-align: middle; } } /* TAB */ @media (min-width: 768px) and (max-width: 991px) { header, section.main, footer { max-width:991px; margin:0 auto; } input.large { width:100%; } input.medium { width:70%; } input.small { width:46%; } input.x-small { width:15%; margin-left: 5px; } #dtpNav { max-width: 768px; } } /* TAB + MOB */ @media (max-width: 991px) { body.menu_mob_open { overflow: hidden; position: fixed; top: 0; left: 0; bottom: 0; width: 100%; } nav#secondNav { display: none; } header nav { position: absolute; left:100%; right: 0; margin: 20px 0px 0; z-index: 20; height: 100%; padding:0 } header.nav-active { position: fixed; height: 100%; z-index: 20; background-color: #fff; width:100%; } header.nav-active nav { background-color: #fff; } header { border-bottom:0 none } header .actions a { margin:0 5px } header .fa { color:#989898; font-size:30px } .menu { position: relative; width: 30px; height: 20px; overflow: hidden; text-indent: 101%; white-space: nowrap; display:inline-block } .menu:before, .menu:after, .menu span { position: absolute; top:50%; left: 0; right: 0; margin-top: -2px; background: #989898; height: 15%; -webkit-transition: all .2s linear; transition: all .2s linear; } .menu:before, .menu:after { content: ""; top: 10%; } .menu:after { top: 90%; } .nav-active .menu span { opacity: 0; } .nav-active .menu:after, .nav-active .menu:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 50%; left: 0; right: 0; background-color:#d92231 } .nav-active .menu:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .ico.ico-cart { margin-top: -10px; } .cart-count { top: -7px; } /* recherche mobile */ .firstNav { position: relative; padding-bottom: 10px; } #dtpNav { position: absolute; display:none; width: 100%; top: 50px; background-color: #ebebeb; padding: 30px 15px; left: 0; z-index: 15; margin:0; } #dtpNav form.search { width: 100%; } #dtpNav form.search input { width: 100%; margin-bottom: 0; } #dtpNav form.search .fa-search { position: absolute; right: 20px; top: 35px; } .cfdebug { display:none } .ico.ico-cart { background-image: url('../ximg/shopping-cart-grey-x2.png'); background-size: 30px 24px; -moz-background-size: 30px 24px; -o-background-size: 30px 24px; -webkit-background-size: 30px 24px; } body.menu_mob_open header.main .mainNav, header.main .headerContainer .subLayer.open>section { transform: translateY(0); overflow: auto; } header.main .mainNav { height: calc(100% - 50px); z-index: 9999; } header.main .headerContainer .subLayer>section, header.main .mainNav { position: fixed; top: 100px; left: 0; right: 0; transform: translateY(100vh); transition: .3s transform ease; } header.main .mainNav .mainNav-content { height: calc(100% - 106px); overflow-x: hidden; overflow-y: auto; } nav.navbar { margin: 0; height: auto; float: none !important; } nav.navbar:last-child { border-bottom: 1px solid #e2e2e2; } header.main .mainNav nav.navbar .contentMenu { margin: 0; padding: 0; } header.main .mainNav nav.navbar .contentMenu > div a:after { display:none } #secondNav { width: 100%; } header.main .mainNav nav.navbar .contentMenu > div, #secondNav li { position: relative; display: block; text-align: left; top: auto; padding: 0; line-height: inherit; width: 100%; } header.main .mainNav nav.navbar .contentMenu > div + div:before, #secondNav li + li:before { display:none } header.main .mainNav nav.navbar .contentMenu > div> a, #secondNav li a, #secondNav .collec a { text-transform: uppercase; font-size: 16px; padding: 15px 0 15px 15px; display: block; transition: none; border-top: 1px solid #e2e2e2; margin-bottom:0 } header.main .mainNav nav.navbar .mainNavLayer { z-index: 8000; position: relative; top:0; width: 100%; opacity: 1; height: 0; transition: .3s height ease; } header.main .mainNav nav.navbar .mainNavLayer.open { height:auto } header.main .mainNav nav.navbar .mainNavLayer > div { padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog { padding:0 } .plusMinus { margin: 0; } .clicked .plusMinus { border-right: 1px solid #e8e8e8; } .clicked .goTo { display: block !important; width: 2.55em; text-align: center; } .plusMinus > div { position: relative; width: 2.55em; height: 1.65em; } .plusMinus > div .horizontal { position: absolute; background-color: #989898; width: 25px; height: 2px; left: 50%; margin-left: -14px; top: 50%; margin-top: -2.5px; } .clicked .horizontal { transition: all 0.5s ease-in-out; transform: rotate(90deg); opacity: 0; } .horizontal { transition: all 0.5s ease-in-out; transform: rotate(-90deg); opacity: 1; } .plusMinus > div .vertical { position: absolute; background-color: #989898; width: 2px; height: 25px; left: 50%; margin-left: -2.5px; top: 50%; margin-top: -14px; } .clicked .vertical { transition: all 0.5s ease-in-out; transform: rotate(90deg); } .vertical { transition: all 0.5s ease-in-out; transform: rotate(-90deg); } .goTo::before { border-style: solid; border-width: 0.15em 0.15em 0 0; content: ''; display: inline-block; height: 0.8em; position: relative; top: 0.35em; vertical-align: top; width: 0.8em; border-color: #989898; left: 0; transform: rotate(45deg); } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .header_cat .back .fas { float: right; margin-top: 4px; line-height:26px } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .header_cat [class*="libelle-lvl"] { display: block; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .header_cat [class*="libelle-lvl"] a { display: block; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .header_cat [class*="libelle-lvl"] a .libelle { display: block; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .header_cat [class*="libelle-lvl"] a > div { display: none !important; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog [class*="col-"] { position: initial; } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .sousCat + .sousCat { margin-top:0 } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .sousCat a.lvl-2:not(.other) .libelle { font-weight:700; font-size:16px; text-transform:uppercase } header.main .mainNav nav.navbar .mainNavLayer > div .catalog .sousCat a, header.main .mainNav nav.navbar .mainNavLayer > div .catalog .selections a { /*border-bottom: 1px solid #ccc;*/ display: block; font-size: 18px; padding: 10px 0px 0px; font-weight: 300; line-height: 20px; margin-bottom:0 } .mainNavLayer > div .catalog .sousCat .libelle, .mainNavLayer > div .catalog .selections .libelle { font-weight: 400; font-size:16px; text-transform:initial } .mainNavLayer > div .catalog .sousCat .tp, .mainNavLayer > div .catalog .selections .tp { padding: 0; z-index: 115; margin: 0; background-color: #fff } .mainNavLayer > div .grid-template { text-align: center; margin-top: 20px; } /* Ajout au panier */ .modal.in div#productAdded { transform: translateY(0); } #productAdded { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; transform: translateY(25%); max-height:100%; overflow:auto; width: 100%; } #productAdded .modal-content { border-radius: 0; border: 0; } .row-center { padding: 15px; } .row-center h2 { font-size: 22px !important; width: 100% !important; } #productAdded a.half { width: 100%; margin: 0; } .btn-group { margin-bottom: 10px; } #productAdded a.half.btn2 { margin-top: 10px; } #productAdded p.title2 { font-size:20px } .panel-default.light { border: 0 none; } #mask { position: absolute; display: none; top: 0; bottom: 0; left: 0; right: 0; background-color: #666; opacity: 0.5; z-index: 5; } .filtersOpen #mask { display: block; } .sliderContainer { padding: 0; } .swiper-container { padding: 0 45px 0 0; } .swiper-button-prev, .swiper-button-next { display: none; } } /* MOB */ @media (max-width: 767px) { /* titles */ h1, .title1 { font-size:35px; color:#333; font-weight: 300; line-height: 45px; } h2, .title2 { font-size: 30px; line-height: 38px; } h3, .title3 { color:#333; font-weight: 300; font-size: 25px; line-height: 35px; } h4, .title4 { color:#333; font-weight: 300; font-size: 22px; line-height: 28px; margin-top: 20px; margin-bottom: 10px; } h5, .title5 { color:#333333; font-weight: 400; font-size: 1.3em; line-height: 1.5em; padding: 10px 15px; } .text-left.productInfos .title5 { padding: 0; } .prix .prix-elt .title5 { padding: 10px 0; } .prix .prix-elt .lighter { margin-bottom: 5px; } h6, .title6 { color:#333333; font-weight: 400; font-size: 16px; line-height: 20px; } #footer-nav { flex-direction: column; } .logo h2 { display: none; } .btn1 span.fa { margin-left: 0px; } header > nav, header > div, section.main, footer { max-width: 767px; margin: 0 auto; } section.main .headerTitle{ display: flex; justify-content: space-between; align-items: center; } section.main .headerTitle h4 { margin-bottom: 0; } input.medium { width: 53%; } input.small { width: 34%; font-size: 14px; } input.x-small { width: 16%; margin-left: 5px; } input.xs-w100 { width:100% } input[type="radio"] + label { max-width: 75%; } input[type="checkbox"] + label { max-width: 85%; } .carousel-control { display: none; } #dtpNav { max-width: 480px; } .hoverState .mask { left:0; right:0 } /* Carousel */ .box .swiper-wrapper { padding: 0; } .carousel-inner .item > .video, .swiper-slide > .video { min-height:280px } .box .swiper-slide .carousel-caption { right:auto } .prod h2.name { font-size: 16px; line-height: 20px; } } @media screen and (max-width: 390px) { .logo h1 { display: none; } }