/* 
- CSS GENERALISTE

- CONTAINERS GENERAUX

- HEADER CONTAINER
- TOP CONTAINER
- CENTRE CONTAINER
- FOOTER CONTAINER

- HEADER CONTENT
- TOP CONTENT
- CENTRE CONTENT
- FOOTER CONTENT

*/
/**
.col- Extra small < 576px
.col-sm- Small ≥576px
.col-md- Medium ≥768px
.col-lg- Large ≥992px
.col-xl- Extra large ≥1200px
*/

/**************************************
 CSS GENERALISTE
**************************************/
/** Fonts **/
@font-face {
    font-family: "Marvel";
    src: url("/kassets/css/font/marvel/Marvel-Bold.ttf");
}

@font-face {
    font-family: "Marvel-BoldItalic";
    src: url("/kassets/css/font/marvel/Marvel-BoldItalic.ttf");
}

@font-face {
    font-family: "Marvel-Regular";
    src: url("/kassets/css/font/marvel/Marvel-Regular.ttf");
}

@font-face {
    font-family: "Marvel-RegularItalic";
    src: url("/kassets/css/font/marvel/Marvel-RegularItalic.ttf");
}

@font-face {
    font-family: "FontAwesome";
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.eot");
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.of");
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.ttf");
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.woff");
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.svg");
}


@font-face {
	font-family: 'futura';
	src: url('/kassets/css/font/futura/futura.eot');
	src:
	url('/kassets/css/font/futura/futura.eot#iefix') format('embedded-opentype'),
	url('/kassets/css/font/futura/futura.woff') format('woff'), 
	url('/kassets/css/font/futura/futura.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'futura-bold';
	src: url('/kassets/css/font/futura-bold/futura-bold.eot');
	src:
	url('/kassets/css/font/futura-bold/futura-bold.eot#iefix') format('embedded-opentype'),
	url('/kassets/css/font/futura-bold/futura-bold.woff') format('woff'), 
	url('/kassets/css/font/futura-bold/futura-bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'icomoon';
	src: url('/kassets/css/font/icomoon/icomoon.eot');
	src:
	url('/kassets/css/font/icomoon/icomoon.eot#iefix') format('embedded-opentype'),
	url('/kassets/css/font/icomoon/icomoon.woff') format('woff'), 
	url('/kassets/css/font/icomoon/icomoon.ttf') format('truetype'),
	url('/kassets/css/font/icomoon/icomoon.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-customer:before {
  content: "\e900";
  color: #fff;
}
.icon-delivery-truck:before {
  content: "\e901";
  color: #fff;
}
.icon-headphone:before {
  content: "\e902";
  color: #fff;
}
.icon-arrow_right:before {
  content: "\e903";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-170:before {
  content: "\e904";
}
.icon-Groupe-178:before {
  content: "\e905";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-187:before {
  content: "\e906";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-192:before {
  content: "\e907";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-1196:before {
  content: "\e908";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-1222:before {
  content: "\e909";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-1225:before {
  content: "\e90a";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-1251 .path1:before {
  content: "\e90b";
  color: rgb(0, 51, 204);
}
.icon-Groupe-1251 .path2:before {
  content: "\e90c";
  margin-left: -1.400390625em;
  color: rgb(255, 255, 255);
}
.icon-Groupe-1251 .path3:before {
  content: "\e90d";
  margin-left: -1.400390625em;
  color: rgb(237, 28, 36);
}
.icon-Groupe-1259:before {
  content: "\e90e";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-133:before {
  content: "\e90f";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-136:before {
  content: "\e910";
  color: #fff;
}
.icon-Groupe-140:before {
  content: "\e911";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-142:before {
  content: "\e912";
}
.icon-Groupe-150:before {
  content: "\e913";
  color: var(--bleuclair-pfc);
}
.icon-Groupe-161 .path1:before {
  content: "\e914";
  color: none;
}
.icon-Groupe-161 .path2:before {
  content: "\e915";
  margin-left: -1.8564453125em;
  color: rgb(116, 196, 71);
}
.icon-Groupe-161 .path3:before {
  content: "\e916";
  margin-left: -1.8564453125em;
  color: rgb(116, 196, 71);
}
.icon-Groupe-161 .path4:before {
  content: "\e917";
  margin-left: -1.8564453125em;
  color: rgb(116, 196, 71);
}
.icon-Groupe-161 .path5:before {
  content: "\e918";
  margin-left: -1.8564453125em;
  color: rgb(116, 196, 71);
}
.icon-Groupe-161 .path6:before {
  content: "\e919";
  margin-left: -1.8564453125em;
  color: rgb(128, 186, 37);
}
.icon-Groupe-161 .path7:before {
  content: "\e91a";
  margin-left: -1.8564453125em;
  color: rgb(116, 196, 71);
}
.icon-Groupe-161 .path8:before {
  content: "\e91b";
  margin-left: -1.8564453125em;
  color: rgb(116, 196, 71);
}
.icon-Groupe-161 .path9:before {
  content: "\e91c";
  margin-left: -1.8564453125em;
  color: rgb(128, 186, 37);
}
.icon-Groupe-161 .path10:before {
  content: "\e91d";
  margin-left: -1.8564453125em;
  color: rgb(128, 186, 37);
}
.icon-love:before {
  content: "\e91e";
  color: #fff;
}
.icon-profile:before {
  content: "\e91f";
  color: #fff;
}
.icon-search_left:before {
  content: "\e920";
  color: #fff;
}
.icon-shopping_cart:before {
  content: "\e921";
  color: #fff;
}
.icon-shopping_cart_plus:before {
  content: "\e922";
  color: #fff;
}
.icon-Trac-1390:before {
  content: "\e923";
  color: var(--bleuclair-pfc);
}
.icon-Trac-2653:before {
  content: "\e924";
  color: #fff;
}

.icon-savoir-plus:before {
  content: "\e904";
  color: var(--bleuclair-pfc);
}

.icon-close:before {
  content: "\e912";
  color: #fff;
}

.icon-cart-check:before {
  content: "\e925";
  color: #fff;
}


.icon-Trac-2671:before {
  content: "\e926";
  color: #81ba24;
}
.icon-Trac-220:before {
  content: "\e927";
  color: var(--bleuclair-pfc);
}
.icon-Trac-2721:before {
  content: "\e928";
  color: var(--bleuclair-pfc);
}
.icon-duplicate:before {
  content: "\e929";
  color: #fff;
}
.icon-identity-card:before {
  content: "\e92a";
  color: #fff;
}
.icon-text-file:before {
  content: "\e92b";
  color: #fff;
}

.icon-Trac-218:before {
  content: "\e92c";
  color: var(--bleuclair-pfc);
}
.icon-Trac-217:before {
  content: "\e92d";
  color: var(--bleuclair-pfc);
}
.icon-Trac-215:before {
  content: "\e92e";
  color: var(--bleuclair-pfc);
}

.icon-shut_down:before {
  content: "\e92f";
  color: var(--bleuclair-pfc);
}
.icon-edit:before {
  content: "\e930";
  color: #fff;
}
.icon-lock_open:before {
  content: "\e931";
  color: #fff;
}

.icon-address:before {
  content: "\e932";
  color: #b9b29c;
}
.icon-love:before {
  content: "\e933";
  color: var(--bleuclair-pfc);
}
.icon-database_system:before {
  content: "\e934";
  color: #b9b29c;
}

.icon-trash:before {
  content: "\e935";
  color: #de465d;
}

.icon-save:before {
  content: "\e936";
  color: #fff;
}


.icon-CIRCLE---MINUS:before {
  content: "\e937";
  color: #fff;
}
.icon-CIRCLE---DELETE:before {
  content: "\e938";
  color: #fff;
}
.icon-CIRCLE---OK:before {
  content: "\e939";
  color: #fff;
}

.icon-enveloppe:before {
  content: "\e93a";
  color: #fff;
}

.container{max-width: 1218px; width: 100%; margin: auto}



body{ position:relative; font-family:"futura"; margin:0px; background:#fff; font-size:15px; }

html, body, button, input, select, textarea{ color:#000;}

hr{ display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

::-moz-selection{ background:#004372; color:#000; text-shadow:none; }
::selection{ background:#004372; color:#000; text-shadow:none; }

p{ font-size:1.2em; }

a { color:#004372; text-decoration:none; outline:none; /*vire le pointillé autour du lien */ }
a:hover		{ text-decoration:none; }
a:focus		{  }
a:active		{  }
a:visited	{  }

h1, h2, h3, h4, h5, h6 { font-weight:normal; }
h1{ }
h2{ }
h3{ }
h4{ }
h5{ }
h6{ }

ul{padding:0}

:root{
    --bleu-pfc:#038EC4;
    --bleuclair-pfc:#0795CA;
}

.bleuclair{color:var(--bleuclair-pfc);}



/**************************************
  L E S   C O N T E N T S
/**************************************
 HEADER CONTENT
**************************************/
.principale_container{padding-bottom: 80px;padding-top: 80px;}
/**************************************
 CENTRE CONTENT
**************************************/
/* NOM PAGE */
.row_header{background-color: var(--bleu-pfc); width: 100%; padding:0; position: fixed;z-index: 10;}
.row{margin-left:0px; margin-right:0px;}
.container-logo{
    background-color: #292F47;
    padding:15px 0px 15px 0px;
}
.input-group{
    margin-bottom:20px;
}
.kmodale {
    position: absolute;
    top: -100px;
    left: 20%;
    background-color: #fff;
    padding: 15px;
    box-shadow: 10px 7px 35px #888;
    z-index: 100;
    max-width: 70%;
}

.fadeur{
    -khtml-opacity:0.5; 
    -moz-opacity : 0.5; 
    -ms-filter: "alpha(opacity=5)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=5); 
    filter : alpha(opacity=5); 
    opacity : 0.5;
}
.noti_bubble {
    position: absolute;
    top: 15px;
    right: 5px;
    font-size: 10px;
    font-family: Arial, Verdana, Georgia, sans-serif;
    color: #ffffff;
    font-weight: bold;
    padding: 0px 2px;
    height: 17px;
    line-height: 17px;
    min-width: 16px;
    background-color: #d8000e;
    background: -webkit-gradient(linear, center top, center bottom, from(#fa3c45), to(#dc0d17));
    background: -webkit-linear-gradient(top, #fa3c45, #dc0d17);
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
}
.cartopen{z-index: 10;
width: 100%;
background: white;
position: fixed;
right: 0;
top: 0;
bottom:0;
height: 100%;
max-width: 570px;
box-shadow: 0px 0 20px rgba(0, 0, 0, 0.2);
transition: transform 500ms ease 0s;
	overflow-y: scroll;
/*	min-height: 100vh
*//*transform: translate3d(100.5%, 0, 0);*/
}
.pushed{
    transition: transform 500ms ease 0s;
    width: 100%;
}
.pushed:hover{cursor: pointer;}
.header-panier{text-transform: uppercase;text-align: center; color: var(--bleu-pfc); font: 24px 'futura-bold'; padding: 26px 15px; border-bottom: 1px solid #D0D0D0}
.baspage{padding-top:0; background-color: var(--bleu-pfc); padding: 0 !important}
.row_footer img{width:inherit;}
.row_righthead .col-lg-2 a{ padding:12px 23px; display: block}
.row_righthead .col-lg-2{ display: flex; align-items: center; justify-content: center; position:relative}
.row_righthead .col-lg-2 a:hover {   background: #006c9e;    color: #FFFFFF;}


.container{padding:0}

h1 {
    font-family: 'family';
    text-transform: uppercase;
    font-weight: 700;
    font-style: normal;
    color: #006c9e;
    text-rendering: optimizeLegibility;
    line-height: 1.1;
}

.theflags{ position:absolute; background: #f9f9f9; border: solid 1px #cccccc !important;width: auto; padding: 5px; top: 49px}


.theflags:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
        border-top-color: currentcolor;
        border-right-color: currentcolor;
        border-bottom-color: currentcolor;
        border-bottom-style: inset;
        border-left-color: currentcolor;
    border-color: transparent transparent white transparent;
    border-bottom-style: solid;
    position: absolute;
    top: -12px;
    left: 0;
    z-index: 99;
	right:0;
	margin:auto
}

.theflags a{ display: block}

select {
    -webkit-appearance: none !important;
    -webkit-border-radius: 0px;
    background-color: #fafafa;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
    background-position: 100% center;
    background-repeat: no-repeat;
    border: 1px solid #cccccc;
    padding: 0.5rem;
    font-size: 17px;
    color: rgba(0, 0, 0, 0.75);
    line-height: normal;
    border-radius: 0;
    height: auto;
}

ul.ul_sousmenucat{ padding-left:0; 
    margin: 0 0 0 5px;
    padding: 0 0 10px 0;
}

/*.miniature_image{min-height: 200px;}
*/
ul.ul_sousmenucat li { list-style: none; font-size: 13px;font-weight: bold; color:rgba(0, 0, 0, 0.8); margin: 0 0 5px 0}

ul.ul_sousmenucat li  a{color:rgba(0, 0, 0, 0.8)}

#footer2, #footer2 p{ text-align:left; font-size:14px; color:#fff}

#footer2 p a{ color: #fff}

#footer2 p{ margin-bottom:0}

#footer2{ padding: 15px 0;}

.row_footer{padding:  50px 0}

.row_footer img{ max-width: 150px}

.searchArea input{ height: 65px; color: rgba(0, 0, 0, 0.75); font-size: 0.875rem; padding: 0 0.5rem;}

#bx-pager a{ display:inline-block !important; vertical-align:middle; width: 75px}

#bx-pager a img{ width: 100%}

.row_footer .col-lg-7 a{ color: #000000}

.row_footer .col-lg-7 a:hover{ text-decoration: none}

.row_righthead{justify-content: flex-end; height: 100%}


form input, form select, input, select{
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
background-color:#fff;
background-clip: padding-box;
border: 1px solid #ced4da;
    border-radius: .25rem;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

::placeholder{ opacity: 1}


button.boutonsubmit{
    transition: all 0.5s;
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 25px;
    background-color: rgba(7, 149, 202,0.3);
    color: rgb(7, 149, 202);
}


.btn-success{ background-color: rgba(7, 149, 202,1); color: #fff; border: none}

.btn-success:hover{ background-color: rgba(7, 149, 202,0.7)}


form select option{
	color: #495057;
	font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}


.row_footer img{max-width: 100px; margin: auto}

.ribbon{display: none}

.row_nouveaute_liste .ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
	display: block
}
.row_nouveaute_liste .ribbon::before,
.row_nouveaute_liste .ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.row_nouveaute_liste .ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 0px 0;
    background-color: #3498db;
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color:  #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
}

/* top right*/
.row_nouveaute_liste .ribbon-top-right {
    top: 0;
    right: 0;
    position: absolute;
}
.row_nouveaute_liste .ribbon-top-right::before,
.row_nouveaute_liste .ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.row_nouveaute_liste .ribbon-top-right::before {
  top: 0;
  left: 0;
}
 .row_nouveaute_liste .ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.row_nouveaute_liste .ribbon-top-right span {
  left: 3px;
  top: 21px;
  transform: rotate(45deg);
}


.product_miniature{position: relative; overflow: hidden}


#menu-haut ul > li[class*="li0 idCat-"]:after{    
	content: "\e924";
    font-family: 'icomoon';
    right: -18px;
    top: 0;
    position: absolute;
    color: #FFFFFF;
    font-size: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 3px;
    justify-content: center;
	padding-right: 5px
}

#menu-haut ul li{position: relative}

.left-header{display: flex; align-items: center; justify-content: flex-start}

/*#menuZone{margin-top: 6px}
*/

.logo-link{display: inline-block; background-color: var(--bleuclair-pfc); padding:  27px 15px; width:  216px; text-align: center}

.left-header{padding: 0}

.row_righthead .col-bloc2{width: 70px; display: flex; justify-content: center;align-items: center; position: relative}

.col-bloc2 a:hover span:before{color: #fff}

.right-col .col{color:#fff; text-transform: uppercase}

#menuZone{margin-left: 120px}


/*css produit*/
.produit-item{ width: 226px; height: auto;/* border: 1px solid #E0E0E0;*/ border-radius: 5px; margin: 0 20px 0 0; background-color: #FFFFFF}
.product-name{color: #000000; max-width: 230px; height: 48px; margin-bottom: 23px; position:  relative; z-index: 5}
.product-name a{font: bold 16px/20px "arial"; color: #000000;}
.product_miniature{width: 120px; height:  120px}
.product-description{ font: 14px Arial," sans-serif"; color: #555555; max-width:  150px; margin: auto auto 13px auto }
.modeliste{margin: auto 0}
.price.subheader{font: bold 20px Arial, "sans-serif"; color: var(--bleuclair-pfc); margin: auto auto 22px auto}
.addto a{ background-color: var(--bleu-pfc); flex: 1 1 auto; color: #FFFFFF; padding:  10px 0; text-align: center; font-size: 18px}
.addto a:before{ color: #fff; position: relative; left: 5px}
.addto a span:before{color:#fff; position: relative; left: 5px;}
.addto a:hover{text-decoration: none}
.addto a:last-child{ background-color: var(--bleuclair-pfc)}
.principale_container h2{ color: var(--bleuclair-pfc); font: 21px "futura-bold"; max-width: 360px; margin: 0 0 33px 0; text-transform: uppercase}


/*categorie*/

.cat{ width: 386px; height: 160px; background-color: #F4F4EF; border-radius: 8px; padding: 35px; margin: 10px 15px; position: relative; overflow: hidden; flex: 0 1 386px}
.absolute-link{position: absolute; top: 0; left:0; right: 0; bottom: 0; z-index: 4}
.nom-cat{font: 18px 'futura-bold'; color: var(--bleuclair-pfc); webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out}
.cat span:before{ font-size: 32px; webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out}
.row_catgories{margin: 0 -15px; flex-wrap: wrap}
.element-in-cat{z-index: 3; position: relative}
.element-in-cat img{ width: 62px}
.absolute-img{position: absolute; top: 0; left:0; right: 0; bottom: 0; z-index: 1; opacity: 0; -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out}
.absolute-img:after{content:""; width: 386px; height: 160px; background: url('/kassets/cssimg/site/gradient2.png') no-repeat left center; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out}
.absolute-img img{ width: 100%; min-height: 100%}
.cat .absolute-link:hover ~ .absolute-img, .cat .absolute-link:hover ~ .absolute-img:after{ opacity: 1;  -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out}

.cat .absolute-link:hover ~ .element-in-cat span:before, .cat .absolute-link:hover ~ .element-in-cat .nom-cat{ color: #fff; -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out}

#kmodale{padding: 30px 15px; color: #555555; font: 16px Arial," sans-serif"}

#kmodale h2{color: var(--bleu-pfc); text-transform:  uppercase; font: 24px 'futura-bold'; margin: 0 0 30px 0}


/*footer*/
.element-foot .title-text-footer{ color:#fff; font: 18px "futura-bold"; margin-left: 10px}
.element-foot .title-text-footer span{font: 18px Arial," sans-serif"; color: #fff;}
.element-foot span:before{font-size: 48px}
#footer{ background-color: var(--bleuclair-pfc)}

.slick-arrow{position: absolute; right: 7px; bottom:-80px; width:  56px; height:  56px; z-index: 1; border-radius: 5px; border: 1px solid var(--bleuclair-pfc); background-color:  transparent; color: var(--bleuclair-pfc); -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out }

.slick-arrow:hover{ background-color: var(--bleuclair-pfc); -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out }

.slick-arrow:hover, .slick-arrow:focus{outline: none}

.slick-arrow:hover span:before{color: #fff}

.slick-prev.slick-arrow {right: 74px;}

.slick-arrow span:before{ color: var(--bleuclair-pfc);  font-size: 18px}

.slick-next.slick-arrow .icon-arrow_right:before{ transform: rotate(180deg); display:  block}

.menu-mobile{cursor: pointer; display: none;  position: absolute; left: 10px; top: 12px; z-index: 10; padding: 15px;}

.menu-mobile span:first-child{ display: block; width: 30px; background-color: #FFFFFF; height: 2px; margin-bottom: 5px}

.menu-mobile span:last-child{ display: block; width: 20px; background-color: #FFFFFF; height: 2px}

.breadcrumbs a, .breadcrumbs{font: 13px Arial," sans-serif"; color: #343434}
.breadcrumbs a:last-child{font-weight: bold}
.breadcrumbs{padding: 22px 0}

.banner{ width: 100%; height: 100px; background-size: cover !important; position: relative}

.banner:after{ content:""; position: absolute; left: 0; top: 0; 

background: rgba(7,149,202,1);
background: -moz-linear-gradient(left, rgba(7,149,202,1) 0%, rgba(7,149,202,0.97) 10%, rgba(95,136,27,0) 34%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(7,149,202,1)), color-stop(10%, rgba(7,149,202,0.97)), color-stop(34%, rgba(95,136,27,0)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(left, rgba(7,149,202,1) 0%, rgba(7,149,202,0.97) 10%, rgba(95,136,27,0) 34%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(7,149,202,1) 0%, rgba(7,149,202,0.97) 10%, rgba(95,136,27,0) 34%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(7,149,202,1) 0%, rgba(7,149,202,0.97) 10%, rgba(95,136,27,0) 34%, rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(7,149,202,1) 0%, rgba(7,149,202,0.97) 10%, rgba(95,136,27,0) 34%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81ba25', endColorstr='#000000', GradientType=1 );

width:  100%; height: 100%}

.banner-title{ text-transform: uppercase;  color: #FFFFFF; font: 30px "futura-bold"; position: relative; z-index: 1; height:  100%}

.banner .containercat{ height: 100%}

.title-cart p b{ text-transform: uppercase; color: var(--bleuclair-pfc); font: 21px 'futura-bold'}

.row_panier_item{justify-content: flex-start; align-items:  center}

.row_panier_item .price-col{font: bold 22px Arial," sans-serif"; color: var(--bleuclair-pfc)}

.panier-item_price{font: bold 14px Arial," sans-serif"; color: #969696}

.price-col{font: bold 26px Arial," sans-serif"; color: var(--bleuclair-pfc); margin-left: auto; padding: 0 15px}

.insidepanier .row:first-child{ border-top: none}

.insidepanier .row{border-top: 1px solid #D0D0D0; padding-top: 30px}

.img-panier{ width: 86px; margin-right: 15px}

.insidepanier .row.row_panier_item{border-top: none; margin: auto 0 auto 0; padding-bottom: 30px; padding-left: 15px; padding-right:  15px}

.trashcol a{ background-color: transparent !important}

.col-bloc{margin: auto 15px;}

.cartopen .panier-totalCommande{padding: 30px 60px}

.title-sum{ font-size: 15px; text-transform: uppercase; color: #000000}

.panier-totalCommande div:last-child{ font:20px "futura-bold";  color: #000000}

.title-cart{padding-left: 64px}

.panier_commander button { max-width: 342px; height: 42px; border-radius: 5px; color: #fff; text-transform:  uppercase; font:  16px; text-align: center; width: 100%; border: none; margin-bottom: 5px !important}

.command-button{ background-color:  var(--bleuclair-pfc) !important}

.panier-btn-goto{background-color: var(--bleu-pfc)}

.command-button span:before{ color:#fff}

.panier-btn-goto:hover{background-color: var(--bleuclair-pfc)}

.panier-totalCommande{ border-top: 1px solid #E0E0E0}

.panier-btn-goto span{margin-right: 15px}

.outer-site{height: 100%}

.cartopen ~ .outer-site{ filter: blur(8px)}

.close-btn {
    color: #FFFFFF;
    font-size: 25px;
}
.close-btn {
    position: absolute;
    right: -52px;
    color: #FFFFFF;
    background-color: transparent !important;
    top: -4px;
    border: none !important;
}

.close-btn span{font-size: 21px}

.close-btn span:before{text-shadow: 1px 1px 4px #000;}


a, button, input{-webkit-transition: all 350ms ease-in-out; 
	-moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out}


.table-hover tbody tr:hover{background-color: transparent}


.btn-danger:hover{ background-color: var(--bleuclair-pfc); border-color:var(--bleuclair-pfc); color: #fff}

.cartopen{max-width: 574px; padding: 15px 0; right: 0;} 

.searchArea{ position: absolute;
    z-index: 5;
    top: 32px;
	background-color: rgba(255,255,255,0.9)
}

.searchArea input{background-color: transparent; margin-bottom: 0 !important}

.searchreponses h2{ color: var(--bleu-pfc)}

.insidepanier{ max-height: inherit !important; overflow-y: inherit !important}

.panierClose .icon-close:before {
    content: "\e912";
    color: #fff;
	text-shadow: 1px 1px 4px #000;
	font-size: 25px;
}


#likeAlerte table tr:last-child{ background-color: var(--bleu-pfc) !important}

#likeAlerte table tr:first-child{ background-color: var(--bleuclair-pfc) !important}

#likeAlerte{ min-width: 320px; }

#likeAlerte table{ width: 100%}

.btn-up-down a{ width:  36px; height:  36px; border-radius: 5px; background-color: #F4F4EF; color: var(--bleuclair-pfc); line-height:  36px; margin:  0 5px; text-align: center}

.btn-up-down a:hover{background-color:  var(--bleu-pfc)}

.btn-up-down{display: flex; align-items:  center; justify-content: center}

.cartspace .col-bloc{max-width: 150px; width: 100%}

.cardempty{padding: 15px}

.table-search{background-color:#FFFFFF}

.cartopen ~ .outer-site{position: fixed; left: 0; right:0}

.btn-success:focus, .btn-success:hover{ outline: none}

.btn-success.focus, .btn-success:focus{box-shadow: 0 0 0 .2rem rgba(0,0,0,0) !important;}

.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
    background-color: transparent;
    border-color: transparent;
}




@media(max-width: 1500px){
	#menuZone{margin-left: 75px}
	.row_righthead .col-bloc2{ width: 45px}
}


@media(max-width: 1380px){
	#menuZone{margin-left:0; width:  100%}
	#menu-haut .ul0{display: flex; flex-wrap: wrap}
	#menu-haut .li0{ flex: 1 1 auto}
}




@media(max-width: 1280px){
	.banner-title{padding: 0 15px}
/*	.principale_container{padding-top:0}
*/
}


@media(max-width: 1218px){
	.breadcrumbs{padding: 22px 15px}
}

@media(max-width: 1200px){
  .row_header .col-lg-3 img{ margin-top: inherit}
  .row_header{ display: inherit}
  .row_header{ display: flex; justify-content: space-between; align-items:center; position:relative}
  .row_header .col-7{ display: none}
  .cartopen{ position:absolute; margin: 15px auto; width: 100%; z-index:9999}
}


@media(max-width: 1160px){
	#menu-haut .lien0{font-size: 12px}
}


@media(max-width: 1120px){
	.menu-mobile{display: block}
	#menu-haut, .right-col .col, #menu-haut .ul1::before , #menu-haut .ul1, #menu-haut .ul2{display: none}
	#menu-haut .ul1{padding-left: 10px}
	.logo-link img{margin-left: 53px}
	ul#debdrag li{display: block !important; width: 100% !important}
	#menu-haut{position: absolute; left:0; right: 0; top: 61px; background-color: var(--bleuclair-pfc)}
	#menu-haut .ul2{position: relative}
	#debdrag li ul li:nth-child(1) a{padding-left: 25px}
	#menu-haut .ul2{left: 2%}
	#menu-haut .ul1, #menu-haut .ul2, #menu-haut .lien1:hover, #menu-haut .lien2:hover, #menu-haut .ul2 li .lien2:hover, #menu-haut .ul2 li{background-color: transparent}
	#menu-haut ul > li[class*="li0 idCat-"]:after { right: 30px}
	#menu-haut ul > li[class*="li0 idCat-"]:after{height: auto; top: 37px}
	#menu-haut .lien1, #menu-haut .lien2, #menu-haut .lien1 span, #menu-haut .lien2 span{ color: #fff !important}
	#footer2{padding: 15px}
}

@media(max-width: 992px){
 .btn.btn-outline-danger.btn-sm{ margin: 15px auto}
  .row_righthead .col-lg-2 a:hover { background-color: transparent}
  .row_righthead .col-lg-2 a{ padding:inherit}
  .row-select .col-lg-8, .rowfollowcat{display: none}
  .logo-link{padding: 17px 15px}
  .element-foot{ flex-direction:  column}
  .element-foot span{ text-align: center}
  .row_footer .col-lg-4{margin-bottom: 15px; width: auto}
  .row_footer{justify-content: center}
  .row_footer .col-lg-4.justify-content-end, .row_footer .col-lg-4.justify-content-start{justify-content: center !important}
  .element-foot .title-text-footer, .element-foot .title-text-footer span{ font-size: 10px; margin-left: inherit}
  .slick-prev.slick-arrow{ right: 80px}
  .outer-selection{padding-bottom: 50px}
  .breadcrumbs { padding: 22px 15px !important;}
}

@media(max-width: 767px){
  .row_header .col-3.right-col{ flex: 0 0 50%; max-width: 50%;}
  .row_header .col-3.right-col .col-lg-2:first-child{ display: none}
  .row_header .col-3.right-col .col-lg-2{ padding: 12px 0; text-align:right}
  .row_header  img{ max-width: 160px}
  .element-foot span:before{ font-size: 33px}
  .row_righthead{position :absolute; top: -40px; right: 0}
  .row_catgories{margin: 0}
  .principale_container{padding-top: 0}
  #kmodale.kmodale{ max-width: 80% !important}
  .cartopen{max-width:90%; padding: 15px; left: 0; right: 0; margin: auto}
  .row-text-home{margin-top: 50px}
  .row_panier_item .col-bloc{width: 32%}
  .close-btn{right: -36px}
}

/*@media(max-width: 760px){
	.row_righthead{top:-40px; }
}
*/
@media(max-width: 576px){
	.row_header  img{ max-width: 120px}
}

@media(max-width : 414px){
	.logo-link{ width: 198px}
	
}