html,body {margin:0; padding:0;}
body {font-family:truenoregular,Arial; font-size:17px; color:#555; background:#fff;}
.s {margin:auto;width:1470px;}
.smax {margin:auto;width:1500px; font-size:0;}
.zero {font-size:0;}
.tleft {float:left;}
.tright {float:right;margin-top:-2px;}
.right {float:right;text-align:right;}
.center {text-align:center;}
.clear {clear:both;}
.big {font-size:200px; line-height:200px; margin-right:30px; color:#ddd;}
.yes {display:none;}
.left{float:left;}
hr {height:1px; color:#777; border:0; background:#777; margin:3px;}
#chat, #openchat {position:fixed; z-index:99; bottom:10px; right:10px;}
a {outline:none;}
a:link{color: #555; text-decoration: none}
a:visited{color: #555; text-decoration: none}
a:hover{color: #555; text-decoration: none}
a.b:link {color: #fff; text-decoration: none}
a.b:visited{color: #fff; text-decoration: none}
a.b:hover{color: #fff; text-decoration: none}

ul {margin:5px 0 10px 0; padding-left:20px;}
img {vertical-align:top; border:0; border-radius:2px;}

/*ENTETE*/
#abstop {position:relative; width:100%; padding:5px 0; text-align:center; background:#ff3300; color:#fff;}
#top {position:relative; width:100%; padding:5px 0; height:100px;}
#logo {display:inline-block; vertical-align:middle; width:360px; font-size:17px; color:#aaa; line-height:25px;}
#recherche {display:inline-block; vertical-align:middle; width:calc(100% - 855px); text-align:left;}
#recherche .text {width:auto; margin-right:5px; max-width:300px;}
#mrecherche {display:none;}
.btext{display:inline-block; vertical-align:middle; font-family:Arial; font-size:16px; color:#111; border:1px solid #ddd; padding:5px; font-style:Italic; margin:0 5px 0 0; width:calc(100% - 75px);}
#minis {display:inline-block; vertical-align:middle; width:495px; text-align:right;}
.mini {display:inline-block; margin-left:15px; width:136px; height:76px; padding:5px; font-size:14px; text-align:center;overflow:hidden; border-radius:6px; border:2px solid #eee; letter-spacing:-0.5px; transition:0.3s;}
.mini:hover {border:2px solid #72e600;}
.bk {background:#72e600 !important;border:2px solid #72e600; color:#fff;}
.pt {font-size:15px; font-family:'truenoregular',Arial;}
.mini img {filter:brightness(0); height:20px;}
#jqac {position:absolute; z-index:99; width:500px; background:#ddd; font-size:16px;}

/*NAVIGATION*/
#menu {display:none;}
#nav {width:100%; background:#ddd; text-align:center; font-size:0; z-index:99;}
.fixnav {position:fixed; top:0; z-index:98;}
.i {display:inline-block; vertical-align:top; font-size:18px; font-family:'truenoregular',Arial; letter-spacing:-1px; color:#fff; margin:0; padding:0 15px; line-height:44px; background:#555; transition:0.3s; cursor:pointer; text-transform:uppercase; border-radius:6px; overflow:hidden;}
.e {display:inline-block; vertical-align:top; margin:0; width:3px; height:44px; background:#ddd;}
.i:hover, .ni:hover, .nsi:hover {background:#72e600;}
.ni, .nsi {text-transform:none; width:190px;display:block; font-size:16px; font-family:truenoregular,Arial; background:#555; padding:7px 20px 7px 10px; line-height:16px; transition: 0.3s; text-align:left; margin-top:2px; border-radius:4px; letter-spacing:-0.5px;}
.i a:link, .i a:hover, .i a:visited, .ni a:link, .ni a:hover, .ni a:visited, .nsi a:link, .nsi a:hover, .nsi a:visited {color:#fff; display:block;}
.list {position:absolute;display:none; z-index:99; margin-left:-15px;}
.flr {position:absolute; margin:-2px 0 0 185px; width:15px; height:20px; background:url('/ima/flr.png');}
.slist {display:none; position:absolute; margin:-9px 0 0 212px; z-index:99;}
.goleft {display:none; position:absolute; margin:-9px 0 0 -232px !important; z-index:99;}
.sslist {display:none; position:absolute; margin:-9px 0 0 212px; z-index:99;}
a:link .ni, a:visited .ni {color:#fff;}
a:hover .ni, a:hover .nsi {background:#72e600;}
.on {background:#111;}

/*DIAPORAMA*/
.diaporama {position:relative;width:100%; min-height:600px;}
.fixmargin {margin-top:44px;}
h1,h2,h3{margin:0;padding:0;font-weight:normal;font-style:normal;}

/*PROMO ACCUEIL*/
.promo {position:relative; width:100%; padding:15px 0; font-size:0;}
.promo-img {display:inline-block; margin:15px;}
.promo-img img {width:100%;}

/*HOT*/
#hot {position:relative; width:100%; color:#555; background:#fff; text-align:center; font-size:18px; padding:50px 0;}
.titre {color:#fff; font-size:50px;}
.introrub {margin-bottom:25px;}

/*PRINCIPAL*/
.page, .intro {position:relative; width:100%; padding:50px 0;}
.intro {background:#555; color:#fff;}
.ariane {position:relative; padding:10px 15px; background:#111; display:block; margin:0 15px 30px 15px; color:#fff; font-size:18px; border-radius:8px; text-transform:uppercase; letter-spacing:-1px;}
.ariane a {color:#fff;}
.ariane a:hover {text-decoration:underline;}
.ariane h1 {font-size:22px;}
.tri {font-family:truenoregular,Arial; font-size:14px; color:#555; padding:4px 5px; border:0;display:inline-block; vertical-align:middle; border-radius:4px;}
.contact {position:relative; padding:10px 15px; background:#257a0e; display:block; margin:15px 15px 0 15px; color:#fff; font-size:16px; border-radius:8px;}
.descrub {position:relative; padding:10px 15px; background:#555; display:block; margin:15px; color:#fff; font-size:16px; border-radius:8px;}

/*FICHE ARTICLE*/
#fiche, #kws {position:relative; display:block; margin:0 15px 15px 15px; font-size:16px;}
#article {font-size: 40px;font-weight: bold;}
#kws {margin-top:15px;}
#gauche{display:inline-block; vertical-align:top; width:615px; font-size:0; margin-right:30px; position:relative;}
#droite{display:inline-block; vertical-align:top; width:calc(100% - 655px); font-size:16px;}
.artremise {position:absolute;width:60px;height:60px;margin-left:calc(100% - 75px); background:#111; font-size:20px; font-weight:bold;color:#fff; border-radius:50%; line-height:60px; text-align:center; z-index:90;}
#vue img {width:600px;}
.thumb, .pdf {display:inline-block; vertical-align:top; margin:15px 15px 15px 0; cursor:pointer; font-size:16px; text-align:center;}
.thumb img {border:1px solid #f5f5f5;}
.pdf img {margin-bottom:5px;}
.iframe iframe {width:calc(100% - 15px); height:360px; border:0; border-radius:2px; margin:15px 0;}
#fiche h1 {font-size:30px; font-weight:bold; color:#111;}
#fiche h2, #fiche h3 {font-size:16px;}
.bigprix {color:#72e600;font-weight:Bold;font-size:36px;}
.comment {display:inline-block; background:#3c5da2; padding:5px; color:#fff;}
#attrs {border:1px solid #ddd; padding:5px; margin:10px 0;}
#attrs2 {display:block; border:1px solid #ddd; padding:5px; margin:10px 0; font-size:0;}
.attr {font-size:12px; display:inline-block; vertical-align:middle; width:calc(16.6666% - 5px); margin-right:5px;}
.attr2 {font-size:14px; display:inline-block; vertical-align:middle; width:50%;}
.kw {font-size:16px; border:0; background:#ccc; padding:2px 4px; color:#fff; margin:0 4px 4px 0; display:inline-block; border-radius:2px;}

/*TABLES*/
.t {border:1px solid #dddddd; width:100%; border-collapse:collapse; background:#fff;}
.t td {padding:7px;}
td:first-child {min-width:200px;}
.t .thead {background:#f5f5f5; font-weight:bold; min-height:20px; text-align:center; color:#222; border-bottom:1px solid #ddd; font-size:20px;}
.half {width:720px;}
.third {width:400px;}
.tiers {width:33.33%;}
.t .cent {width:100px; text-align:left;}
#tb_contact td {padding:5px 0;}

/*FORMS*/
.tritext {display:inline-block; vertical-align:middle; border:0; background:#fff; font-family:truenoregular,Arial; font-size:14px;padding:5px;color:#555;margin-top:3px;}
.text {display:inline-block; vertical-align:middle; border:1px solid #ddd; background:#fff; font-family:truenoregular,Arial; font-size:16px; padding:5px; color:#333; width:260px; border-radius:4px;}
.r {border:1px solid #c70105; box-shadow:0px 0px 2px 2px #c70105;}
.bouton, .mbouton {display:inline-block; vertical-align:middle; font-family:'truenoregular',Arial; font-size:24px; color:#fff; border:0; background:#36b414; padding:8px 16px;cursor:pointer; transition:0.2s;outline:none; border-radius:4px;}
.mbouton {font-size:16px; line-height:16px;}
.bouton:hover, .mbouton:hover{background:#257a0e;}
.bouton a, .mbouton a {color:#ffffff; }
.erreur{display:inline-block;vertical-align:middle;background:#c70105;color:#fff;padding:5px 10px; border-radius:4px;}
.erreur a {color:#ffff;}
.textarea{border:1px solid #ddd;background:#fff;font-family:truenoregular,Arial;font-size:16px;padding:5px; width:260px;}
.msg{display:inline-block;background:#c70105;color:#fff;padding:5px;}
.msgv{display:inline-block;background:#257a0e;color:#fff;padding:5px;}
.bouton2{display:inline-block; vertical-align:middle;font-family:'truenoregular',Arial;font-size:24px;color:#fff;border:0px;background:#ff6600;padding:8px 16px;cursor:pointer; border-radius:4px;}
.mbouton2{display:inline-block; vertical-align:middle; font-family:'truenoregular',Arial;font-size:18px;line-height:18px;color:#fff;border:0px;background:#ff6600;padding:5px 10px;cursor:pointer;}
.stext{display:inline-block; vertical-align:middle; font-family:truenoregular,Arial; font-size:16px; color:#111; border:0; padding:5px; font-style:Italic; width:220px; margin-right:5px; border-radius:4px;}
.sbouton {display:inline-block; vertical-align:middle; font-family:'truenoregular',Arial; font-size:16px; color:#fff; border:0; background:#36b414; padding:5px 8px;cursor:pointer; transition:0.2s;outline:none; border-radius:4px;margin-right:5px;}
#Zone_Widget, .MR-Widget MR-Widget-Responsive fr-FR {min-height:300px;}
.vert {color:#257a0e;}

/*ARTICLES*/
.art {display:inline-block; vertical-align:top; position:relative; cursor:pointer; font-size:14px; width:256px; border:2px solid #eee; padding:5px; margin:15px; text-align:left; background:#fff; z-index:60; border-radius:8px; overflow:hidden;transition:0.3s;}
.art:hover {border:2px solid #72e600;}
.art-img {overflow:hidden;}
.art-img img {width:100%;}
.art-marque {font-size:16px; display:block; padding-top:10px; font-weight:bold;}
.art-modele {height:40px; overflow:hidden;}
.art-prix {height:20px;}
.art .tright {margin-top:5px;}
.euro {font-weight:bold; color:#72e600; font-size:20px;}
.apartir{color:#72e600; font-size:14px; font-weight:bold;}
.remise {position:absolute;width:50px;height:50px; margin-left:calc(100% - 60px); background:#72e600; font-size:16px; font-weight:bold;color:#fff; border-radius:50%; line-height:50px;text-align:center; z-index:90; transition:0.3s;}
.black {background:#111;}
.art:hover .remise {background:#111;}
.dispo {position:absolute; width:30px; height:30px; margin-left:calc(100% - 40px); margin-top:40px; z-index:91; background:#36b414; font-size:16px; font-weight:bold;color:#fff; border-radius:50%; line-height:30px;text-align:center;}

.mart {display:inline-block; vertical-align:top; position:relative; cursor:pointer; font-size:15px; width:176px; border:1px solid #f5f5f5; padding:5px; margin:0 15px 15px 0; text-align:left; background:#fff; z-index:60; border-radius:2px;overflow:hidden;transition:0.3s;}

.listepr {float:left;display: inline-block;}
.lignepr {background-color: #fff; color: #424143;min-height:70px;}
.lignepr:hover { cursor: pointer;}
#dpdrelais_logo img {height: 45px;float: left;width: 45px;}
.dpdrelais_info {float: left; margin: 4px 10px;text-transform: uppercase; text-align:left;}
.dpdrelais_popup {   margin: 16px 10px;   float: right;  text-align: right;}
div.dpdrelais_popup a { color: #424143;text-decoration: none;}
div.dpdrelais_popup a:hover{  color: #dc0032;text-decoration: underline;}
.dpdrelais_distance {  margin: 10px 10px;  float: right;  text-align: right;}
.dpdrelais_radio { margin: 12px 20px;  float: right;  text-align: right;}
#dpdfrance_pickup {  font-weight: normal; font-size: 14px;}
div.lignepr {border-color: #ddd;border-style: solid;border-width: 0px 0px 1px 0px;   margin: 5px 0px;}
div.lignepr:nth-child(9){	border:none;}

/*BAS*/
#menubas {position:relative; width:100%; background:#428400; text-align:center; font-size:18px; padding:5px 0; color:#fff; letter-spacing:-0.5px;}
#footer {position:relative; width:100%; color:#fff; background:#1f3e00; text-align:center; font-size:14px; padding:20px 0;}
.hidden {display:none;}
#footkw {position:relative; width:100%; color:#fff; background:#111; text-align:center; font-size:13px; padding:10px 0;}

/*NOTE*/
.color {width:125px; height:25px; background:#cccccc; text-align:left; display:block;}
.bstars {position:absolute; width:125px; height:25px; background:url('/ima/bstars.png'); display:block;}
.stars {position:absolute; width:125px; height:25px; background:url('/ima/stars.png'); display:block;}
.avis {display:inline-block; margin-left:15px;}
.rep {padding:5px; border-radius:2px; color:#fff; background:#3c5da2; display:inline-block;}
#glob {display:inline-block; overflow:hidden;}

/* AUTOCOMPLETE */
.ui-menu {list-style:none; padding:0; margin:0; outline:0; position:absolute; z-index:100; border:1px solid #ddd; background:#fff; max-width:500px;}
.ui-menu-item {cursor:pointer; font-size:14px; line-height:16px; display:block;}
.ui-menu-item-wrapper {position:relative; display:block;padding:5px 5px 10px 5px;}
.ui-menu-item a:hover {background:#eee;}
.icon {float:left; height:60px; margin-right:5px;}
.ui-menu-item:after {content: ''; display: block; clear: both;}

.highslide-dimming{background:white;}

/*DIAPORAMA*/
.diaporama .sl-slider-wrapper{width:100%;height:600px;overflow:hidden;position:relative;color:#fff;text-align:right;}
.diaporama .sl-slider h1 {padding:100px 0px 20px 0px;font-size:90px; letter-spacing:-2px;}
.diaporama .sl-slider h2 {display:inline-block; font-size:30px; padding:5px 10px;background:url('/ima/tspb.png'); color:#111; border-radius:6px;}
.diaporama .sl-slider h3 {padding-top:20px;font-size:20px;font-style:normal;text-transform:uppercase;letter-spacing:3px;}
.sl-trans-elems h1{-webkit-animation:moveleft 0.5s ease-out both, fadeIn 0.5s ease-out both;-moz-animation:moveleft 0.5s ease-out both, fadeIn 0.5s ease-out both;-o-animation:moveleft 0.5s ease-out both, fadeIn 0.5s ease-out both;-ms-animation:moveleft 0.5s ease-out both, fadeIn 0.5s ease-out both;animation:moveleft 0.5s ease-out both, fadeIn 0.5s ease-out both;}
.sl-trans-elems h2{-webkit-animation:moveUp 0.5s ease-in-out both;-moz-animation:moveUp 0.5s ease-in-out both;-o-animation:moveUp 0.5s ease-in-out both;-ms-animation:moveUp 0.5s ease-in-out both;animation:moveUp 0.5s ease-in-out both;}
.sl-trans-elems h3{-webkit-animation:fadeIn 0.5s linear 0.5s both;-moz-animation:fadeIn 0.5s linear 0.5s both;-o-animation:fadeIn 0.5s linear 0.5s both;-ms-animation:fadeIn 0.5s linear 0.5s both;animation:fadeIn 0.5s linear 0.5s both;}
@-webkit-keyframes moveleft{0%{-webkit-transform:translateX(-300px);}
100%{-webkit-transform:translateX(0px);}
}
@-moz-keyframes moveleft{0%{-moz-transform:translateX(-300px);}
100%{-moz-transform:translateX(0px);}
}
@-o-keyframes moveleft{0%{-o-transform:translateX(-300px);}
100%{-o-transform:translateX(0px);}
}
@-ms-keyframes moveleft{0%{-ms-transform:translateX(-300px);}
100%{-ms-transform:translateX(0px);}
}
@keyframes moveleft{0%{transform:translateX(-300px);}
100%{transform:translateX(0px);}
}
@-webkit-keyframes moveUp{0%{-webkit-transform:translateY(100px);}
100%{-webkit-transform:translateY(0px);}
}
@-moz-keyframes moveUp{0%{-moz-transform:translateY(100px);}
100%{-moz-transform:translateY(0px);}
}
@-o-keyframes moveUp{0%{-o-transform:translateY(100px);}
100%{-o-transform:translateY(0px);}
}
@-ms-keyframes moveUp{0%{-ms-transform:translateY(100px);}
100%{-ms-transform:translateY(0px);}
}
@keyframes moveUp{0%{transform:translateY(100px);}
100%{transform:translateY(0px);}
}
@-webkit-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-o-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
.sl-slider{position:absolute;top:0;left:0;}
.sl-slide,.sl-slides-wrapper, .sl-slide-inner{position:absolute;width:100%;height:100%;top:0;left:0;}
.sl-slide{z-index:1}
.sl-content-slice{overflow:hidden;position:absolute;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;opacity:1;}
.sl-slide-horizontal .sl-content-slice{width:100%;height:50%;left:-200px;-webkit-transform:translateY(0%) scale(1);-moz-transform:translateY(0%) scale(1);-o-transform:translateY(0%) scale(1);-ms-transform:translateY(0%) scale(1);transform:translateY(0%) scale(1);}
.sl-slide-horizontal .sl-content-slice:first-child{top:-200px;padding:200px 200px 0px 200px;}
.sl-slide-horizontal .sl-content-slice:nth-child(2){top:50%;padding:0px 200px 200px 200px;}
.sl-content-wrapper{position:absolute;}
.sl-content{width:100%;height:100%;}
.nav-dots {text-align:center; position:absolute; bottom:2%; width:100%; ;z-index:90;}
.nav-dot-current, .nav-dots span:hover {background:#fff !important;}
.nav-dots span {display:inline-block; position:relative; width:16px; height:16px; border-radius:50%; margin:3px; background:#777; cursor:pointer; transition:0.3s;}
.code {display:inline-block; vertical-align:middle; border:1px solid #ddd; background:#fff; font-family:robotoregular,Arial; font-size:18px; padding:5px; color:#333; text-transform:uppercase; width:60px; text-align:center;}
#cfgplaque {position:relative; width:600px; border:1px solid #ddd;}
#cfgimmat {position:absolute; width:100%; margin-top:30px; z-index:90; font-family:Arial; color:#000; font-size:150px; text-transform:uppercase; font-weight:bold; text-align:center;}
#cfgdept {position:absolute; right:10px; top:10px;}
#cfgdept img {width:92px; height:197px;}
#cfgmsg {position:absolute; bottom:10px; width:100%; text-align:center;z-index:90; font-family:"Arial Narrow",Arial; color:#000; font-size:15px; font-weight:bold;}


/*FONTS*/
@font-face {
    font-family: 'truenoregular';
    src: url('/fonts/truenorg-webfont.woff2') format('woff2'),
         url('/fonts/truenorg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media screen and (min-width: 868px) and (max-width: 1530px)
  {
  .s {margin:auto; width:calc(100% - 20px); padding:0 10px;}
  .promo-img {width:calc(50% - 30px);}
  .smax {width:100%;}
  .i {font-size:21px;}
  .ni, .nsi {width:150px; font-size:14px; padding:7px 20px 7px 10px; }
  .flr {margin-left:145px;}
  .slist, .sslist {margin-left:172px;}
  }
@media screen and (min-width:1200px) and (max-width: 1530px)
  {
  .art {width:calc(20% - 44px);}
  }
@media screen and (min-width: 1000px) and (max-width: 1199px)
  {
  .art {width:calc(25% - 44px);}
  .e {display:none;}
  }
@media screen and (min-width: 868px) and (max-width: 999px)
  {
  .art {width:calc(33.33% - 44px);}
  .e {display:none;}
  #logo {width:260px; font-size:0;line-height:100%;}
  #logo img {width:250px;}
  #recherche {width:calc(100% - 755px);} 
  }
@media screen and (max-width: 867px)
  {
  .bouton, .mbouton, .bouton2, .mbouton2, .sbouton {-webkit-appearance:none;}
  .s, #menubas {margin:auto; width:calc(100% - 20px); padding-left:10px; padding-right:10px;}
  .smax {text-align:center;width:100%;}
  #top, #logo img {height:60px;}
  #recherche, #minis {display:none; width:0;}
  #nav {min-height:34px; text-align:left; padding:5px 0;}
  .e, .flr {display:none;}
  #menu {display:inline-block;}
  #menu .ir {display:inline-block; margin:0 10px; vertical-align:middle;}
  .br {position:absolute; margin: -30px 0 0 20px; z-index: 99; font-size:11px; color: #fff; background: #ff0006; width: 18px; height: 18px; border-radius: 9px; text-align: center; line-height: 16px;}
  .btext {border:0; padding:3px; width:100px;}
  .mbouton {padding:4px 8px;}
  #items {display:none; position:absolute; margin-top:5px; z-index:99; width:100%; background:#ccc;}
  .i {display:block; margin:2px 0; padding:3px 10px;}
  .ni {display:block; margin:2px 0; width:calc(100% - 5px); padding:5px 0 5px 10px; border-radius:0;}
  .list {position:relative; left:5px;}
  .diaporama .sl-slider h1 {font-size:40px;}
  .tri {margin:2px 0;}
.ui-menu {position:fixed; width:calc(100% - 40px);left:0;}
  .page, .intro {padding:10px 0;}
  .page img {max-width:100%;}
  .ariane, #fiche, .contact {margin-left:10px; margin-right:10px; text-align:left;}
  .ariane {padding:10px;}
  #gauche, #droite {width:100%; margin:0; text-align:left;}
  #vue img {width:100%;}
  #cfgplaque {width:300px;}
  #cfgimmat {font-size:64px;}
  #cfgdept {right:5px; top:5px;}
  #cfgdept img {height:98px; width:46px;}
  #cfgmsg {font-size:12px; bottom:5px;}
  .attr {vertical-align:top; margin:5px;}
  .contact {text-align:left; padding:10px;}
  .right {float:none; text-align:left;}
  #footer img {margin:2px;}
  #mpan {display:none;}
  .half, .third, .tiers {width:100%;}
  .t {margin-bottom:10px;}
  td {display:block; text-align:center;}
  .t .cent {display:block;width:auto; text-align:center;}
  .yes {display:inline-block;}
  .no {display:none;}
  .bouton2 {font-size:20px; margin-top:2px;}
  #mrecherche {display:block; margin:8px 10px 10px 10px;}
  #mrecherche .text {width:100%; border:0; margin-top:2px; -webkit-appearance:none;}
  #mrecherche #rechr {width:calc(100% - 60px); border-radius:0; margin-right:5px;-webkit-appearance:none;}
  #mrecherche .mbouton {padding: 8px; vertical-align: top; margin-top: 2px;}
  }