@import url('https://fonts.googleapis.com/css2?family=Volkhov:ital@1&display=swap');
*{margin: 0;padding: 0;font-family: 'Roboto',sans-serif;}
li{list-style: none;}a{}

/*Header style*/
header{width: 100%;margin: 0;padding: 0;background:  #f19cbb;display: none;}
header ul {height: 15px;display: inline-flex;}
header ul li{list-style: none;padding-left: 12px;font-size: 15px;
	margin-top: 4px;font-weight: bold;}
   /*btn Devis*/
   /*#btn-devis{font-size: 10px;margin: 5px}*/

/*Navigation Bar style*/
/*.navbar{position: fixed;top: 0;z-index: 99999999;width: 100%}
*/nav{background:#E2E4E7;height: 90px;}
nav ul li{padding-left: 15px}
nav ul li a{font-family: 'Oswald',cursive;font-size: 18px}
.navbar-brand img{width: 90px}
.cherche{width: 25%}
.btn-outline-danger{border:solid 1px #ff0800}
.btn-danger{background: #ff0800}
.signUp{border-radius: 30px;width: 80px;font-size: 12px;margin: 5px}
.devis{border-radius: 35px;;font-size: 16px;margin: 5px}

/*.btn-secondary{background: #E2E4E7;color: black}*/
.btn-secondary:hover{background: #E2E4E7;color: black}
.btn-outline-danger{transition: .9s}
.btn-outline-danger:hover{background: #ff0800;font-weight: bold;transition: .9s}
.modal-body{background: #D3CCE3;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #E9E4F0, #D3CCE3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.get{display: none;}


/*---------- Container Style --> Slider Images---------- */
.redy{background-color: #ff0800 !important;}
/*.gris{background-image: url('../../img/background.png');background-repeat: no-repeat;}
*//*---------- Container Style --> Produits---------- */
.produit img{width: 100%}
.title{font-family: 'Oswald',cursive;}
.title1{font-family: 'Oswald',cursive;font-size: 30px;color: red}
.title2{font-family: 'Oswald',cursive;font-size: 30px;}
.separator{width: 15%;margin: 5px 42.5%;height: 5px;background: #ff0800}
.separatorLeft{width: 15%;margin-right: 85%;height: 5px;background: red}
/*---------- Container Style --> Counter---------- */
.counter{background: #ff0800;}



.shadowx{transition: .9s;box-shadow: 10px 5px 15px gray}
.shadowx:hover{;transition: .9s;background: tomato;color:white}
.gray{background:#E2E4E7;}
.gris{background:#E2E4E7;}
.white{background: white}
.redCol{color: red}
.div{background: white;width: 90%;margin: 10px 5%;padding: 25px 10px;transition: .9s }
.div:hover{box-shadow: 10px 5px 15px gray;transition: .9s}
.red{background: #ff0800;transition: .9s}
.red:hover{background: #E2E4E7;transition: .9s}
.gray img{width: 40%;margin:5px 30%;}
.pkNous:hover{background:white;transition: .9s;box-shadow: 5px 5px 15px gray}
.pkNous{background:none;transition: .9s}
.present{text-align: justify;font-size: 18px}
.width{width: 100%;}
.size{width: 50%;margin: auto 25%}
.sizeX{width: 90%;margin-left:  5%}
.news .card{background: white;transition: .9s;color: black}
.news .card:hover{background: tomato;transition: .9s;color: white;box-shadow: 10px 5px 15px gray}
.modal-dialog{width: 100% !important;}
.customer-logos h6{font-family: 'Oswald',cursive;font-size: 20px}
.partenaire img{width: 80%;margin: auto 10%}
.part:hover{box-shadow: 10px 10px 20px gray;transition: .9s;background: #E2E4E7;z-index: 99999999}
.part{transition: .9s; }




/* --------- Service style ------------ */
.services{;transition: .9s;}
.services:hover{;transition: .9s;background: #E2E4E7;}

/* ------------ A Propos Style ------------- */
.redCol{color: red;}
.presentation{width: 90%;margin: 0 5% }

/* --------------- Contact style - ------------- */
.titleX{font-size: 25px;font-family: 'Oswald'}
.titles{color: red;font-size: 20px;font-family: 'Oswald';text-align: center;}
.paragraph{color: black;font-size: 15px;;text-align: center;}
.face{width: 40%;margin: 10px 30%}

/* ------------- Catalog Style -------------- */
.titleCat{color: #ff0800;font-family: 'Oswald';font-size: 22px}
.sloganCat{color:black;font-size: 15px;text-align: justify;}
.separatorCat{width: 15%;margin-right:84%;margin-left: 1%;height: 5px;background: gray;margin-bottom: 10px}
.titleCatalogue{color: tomato;margin: 5px 1%;font-family: 'Volkhov';font-size: 25px}
.separatorCatalogue{width: 15%;margin: 5px 42.5%;height: 5px;background: gray}
.linkCat{width: 70%;margin: 10px 15%;}
.CatShow{width: 100%;height: 100%;background: #E2E4E7;position: absolute;top: 3%;left:0%;margin: 7% 0;padding: 0;
  display: none;overflow: hidden;}
.CatShow .x{position: relative;top: 0;right: 0;width: 5%;height: 5%;font-size: 15px;font-weight: bold;}
.height{height: 100%;width: 98%;margin: 5px 1%}

/* ------------------- Login -------------- */
.formLogin{position: relative;top: -90px;background: white;width: 90%;margin: 5px 5%;padding: 19px 0;transition: .9s;box-shadow: 8px 5px 10px gray}
.formLogin:hover{;transition: .9s;}
.register{display: none;}
.passwordBack, #code, #btn{display: none;}
/*#registerUrl{cursor: pointer;}
#GetPassword{cursor: pointer;}
#loginUrl{cursor: pointer;}*/
#registerLink, #loginLink, #GetPassword, #registerUrl, #loginUrl{cursor: pointer;}

/* --------------- Produit ------------------ */
.product{transition: .9s}
.product:hover{transition: .9s;background: #E2E4E7;box-shadow: 10px 5px 10px gray}
.cat{width: 90%;margin: 0 auto;background: #E2E4E7;transition: .9s;}
.catScroll{position: fixed;top: 0;transition: .9s;width: 95%;margin: 0 2.5%;box-shadow: 10px 5px 10px gray}

.categories{font-family: 'Lato';color: black;;font-size: 16px;text-align: center;transition: .9s;border: none;text-decoration:none;}
.categories:hover{transition: .9s;color: red;font-weight: bold;}
.categorie{font-family: 'Oswald';color: black;;font-size: 16px}

.catParam i {text-align: center;color: red;font-size: 20px;width: 10%;margin: 5px 45%;cursor: pointer;}
.titleProd{font-family: 'Oswald',cursive;font-size: 20px}
.title_slogan{color: red;font-size: 15px;font-weight: bold;}

#show{color: red;cursor: pointer;}
.panier span{border-radius: 25px}

#quantite{display: inline-flex;}
#search{display: none;}
#sub_cats{display: inline-flex;}
#sub_cats a {cursor: pointer;text-decoration: none;color:black;font-weight: bold}
.catLink{text-decoration: none;color: black;transition: .9s}
.catLink:hover{color: red;transition: .9s}
.products i{cursor: pointer;transition: .9s}
.products i:hover{color: red;transition: .9s}

.trier{cursor: pointer;}
#msgCart{display: none;}
#msgDemande{display: none;}

#demander{cursor: pointer;}

.news{width: 96%;margin: 10px 2%;padding: 10px 10px;background: white}
.news:hover{transition: .9s;box-shadow: 10px 5px 10px gray}
.shad{box-shadow: 10px 5px 20px gray}



.news_lien{text-decoration: none;}
.news_lien p{color: black}

#sell_link{cursor: pointer;}


/*---------------------------- Profile  ------------------------------ */
#btn_change{font-size: 12px;width: 90%;margin: 10px 5%}
.image_upload{color: red;background: green;}
.image_upload::placeholder{color: pink}





/*-------------- Responsive design-------------- */
/*header*/
@media only screen and (max-width: 750px) {
  .presentation{width: 100%;margin: 0}
  header{position: absolute;top: 0}
  header ul {display: block;}
  header ul li{font-size: 10px;margin-top: 0}
  /*#btn-devis{font-size: 10px;margin-left: 30%}*/
  nav{height: auto;}
  nav ul li{padding: auto;}
  nav ul li a{font-size: 16px}
  .cherche{width: auto;}
  .CatShow{margin: 30% 2.5%;}
  .CatShow .x{width: 10%}
  /*------ Produit --------*/
  .catScroll{position: relative;top: auto;}
}

/*============================Slider Brands=========================*/
.slick-slide {margin: 0px 20px;}
.slick-slide img {width: 100%;height:auto;}
.slick-slider
{position: relative;display: block;box-sizing: border-box;-webkit-user-select: none;-moz-user-select: none;
-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;
-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;}
.slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
.slick-list:focus{outline: none;}
.slick-list.dragging{cursor: pointer;cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.slick-track{position: relative;top: 0;left: 0;display: block;}
.slick-track:before,
.slick-track:after{display: table;content: '';}
.slick-track:after{clear: both;}
.slick-loading .slick-track{visibility: hidden;}
.slick-slide{display: none;float: left;height: 100%;min-height: 1px;}
[dir='rtl'] .slick-slide{float: right;}
.slick-slide img{display: block}
.slick-slide.slick-loading img{display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{display: block;}
.slick-loading .slick-slide{visibility: hidden;}
.slick-vertical .slick-slide{display: block;height: auto;border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}
.prodSlide:hover{box-shadow: 5px 5px 15px gray;transition: .9s}
.prodSlide{transition: .9s}
/*================================End Brands=====================*/

/*Footer Styles*/
.social h3{font-family: 'Oswald',cursive;font-size: 32px;color: #ff0800;margin-left: -20px}
.social ul {margin-left: -30px}
.social ul li {list-style: none;margin-left: -10px}
.social ul li a {color: black;font-family:'Roboto';text-decoration: 
none}
.social ul li a:hover{padding-bottom: 2px;border-bottom: 2px solid gray}
.social img{width: 50px;display: inline-flex;fill: blue}
.social .sos ul{display: inline-flex;margin-left: -30px}
.social .sos ul li {padding: 13px}
/*End footer style*/