@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy|Lobster|Anton|Black+Han+Sans|Modak|El+Messiri|Fira+Sans+Extra+Condensed&display=swap');
		
:root {
    /* theme 1
      --main-color-background:rgb(0, 151, 19);
    --main-color: black;
    
     --main-color-background:rgb(0,119,181);
    --main-color: white;
    #3498db
    */
       
   --main-color-background: white;
    --main-color: black;  
}

* {
	box-sizing: border-box;
	font-family: 'Fira Sans Extra Condensed', sans-serif;
	margin: 0;
	
}


#mainContent{
	
		display: flex;
	  	flex-direction: column;
	  	min-height: 100vh;
	 }



body,html{
	
	 
	  	  background-color: #f1f1f1;	
	  
}


.mini-logo {
	width: 40px;
	height: 40px;
}



.barniere {
	position: absolute;	
	width: 100%;
	height: 100%;	
	  background: black;
	background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
   
  }
  
    .maroc-que-jaime .barniere{
  	background: inherit;
  }
  
   .barniere-fils {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	  		background: radial-gradient(rgb(0,0,0,0.2),rgb(0,0,0,0.3),rgb(0,0,0,0.4),rgb(0,0,0,0.5));

  }
  
   .barniere-fils-blanc {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	  		background: radial-gradient(rgb(255,255,255,0.3),rgb(255,255,255,0.8), rgb(255,255,255,1), rgb(255,255,255,1));
  }
  
   .barniere-fils-blanc-light {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	 background: linear-gradient(rgb(255,255,255,0.1),rgb(255,255,255,0.5), rgb(255,255,255,0.8), rgb(255,255,255,1));
  }
  
   .barniere-fils-black-light-top {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	  		background: linear-gradient(rgb(0,0,0,0.5),rgb(0,0,0,0.7),rgb(0,0,0,0.8),rgb(0,0,0,9));
  }
  
  
   .barniere-fils-gris {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	  		background: radial-gradient(rgb(255, 255, 255,0.4), rgb(249, 249, 249,0.8),#f9f9f9, #f9f9f9);
	  		


  }
  
  
  .barniere.hidden{
	visibility: hidden;
}

  
  
 .barniere-parent{
 	position: relative;
				margin:0;
				width: 100%;
	height: 100vh;
	min-height: 500px;
	background: white;
	display: flex;
	flex-direction: column;
 } 
 
 .barniere-parent.titre, .barniere-parent.titre2 {
    height: auto;
    max-height: auto;
        min-height: auto;
      
       
    
}


.barniere-parent.titre3{
 	height: 500px;
 	max-height: 500px;
 }
 
 
 .barniere-parent.titre2 .barniere:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url('fond/sky.jpg') no-repeat bottom center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.barniere-parent.titre .barniere{
	  background: url('fond/sky.jpg') fixed bottom center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


 
 .barniere-parent .maroc-que-jaime-titre{
 	position :absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%,-50%);
 
 }
 
 
 .maroc-que-jaime.centre.titre{
	padding: 100px 10px 60px 10px;
	margin-top: 45px;
	background: url('images/filet.svg');
				background-repeat: no-repeat;
  background-position: center center;
 background-color: white;
 

}

.titre-societe{
		font-size: 4em;
	color: red;
	font-family: 'Lobster';
	
}

.titre-societe.telechargement {
	color: #00e600;
	margin-bottom: 25px;
		font-family: 'Lobster';
		
	
	
}

.telechargement-form{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
	background: rgb(0,0,0,0.5);
	padding: 10px;
	border-radius: 5px;
	height: auto;
	width: 100%;
	width: 200px;
	border: 1px solid white;
	 text-align: center;
}


.telechargement-form  > div{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	 text-align: center;
}

.telechargement-form  select {
	position: relative;
	background: none;
	color: white;
	font-size: 1.1em;
	flex-grow: 1;
	
    scroll-behavior: smooth;
    margin-right: 10px;
    width: 100%;
     border: none;
    outline: none;
    text-align: center;
     
}


.telechargement-form  select optgroup{
	background: #202020;
	color: yellow;
	  border: none;
    outline: none;
    padding: 10px;
     text-align: center;
     
}


.telechargement-form select option {
    background: black !important;
    font-size: 1.1em;
    color: white;
     border: none;
    outline: none;
     text-align: center;
}


.telechargement-form .btn-table{
	
	background: none;
	color: white;
	   font-size: 1.5em;
	   width: 60px;
	   padding: 0px;
}

.telechargement-form .btn-table:hover{
	background: none;
	color: white;
	font-size: 1.8em;
}


.barniere-parent.barniere-titre{
height: 120px; 
min-height: auto;

} 


.maroc-que-jaime.environnement{
		flex-direction: column;
		padding: 0;
				padding-bottom: 50px;
								  background-image: linear-gradient(white,white, #7FFF00);
								text-align:center;
							
						
}

.maroc-que-jaime.environnement > .div-image{
	justify-content: flex-start;
	align-items: flex-start;
	max-width: 100%;
	width: 100%;
	height: 200px;
	min-height: 200px;
	margin-top: 15px
	
}


.maroc-que-jaime.environnement .div-image-icone{
	width: 180px;
		height: 85px;
	
}

.maroc-que-jaime.environnement h1,.maroc-que-jaime.environnement h3{
	margin-left: 20px;
	margin-right: 20px;
	text-align: center;
	display: block;
	width: 100%;
	
}

.maroc-que-jaime.qui-sommes-nous > .div-image{
	
	
	min-height: 170px;
						
	max-height:200px;
						margin-bottom: 20px;
		
}

.maroc-que-jaime.qui-sommes-nous   .div-text{
	max-width: 550px;
	margin-left: 20px;
	padding-top: 0;		
}

.maroc-que-jaime.qui-sommes-nous{
	background-image: linear-gradient(#fafaf9,white, white);
				background-repeat: no-repeat;
  background-position: left center;
				padding-bottom: 20px; 
	padding-top: 20px; 
								 
				
}

.maroc-que-jaime.qui-sommes-nous.centre > .div-image{
	max-height: 200px;
}

.maroc-que-jaime.qui-sommes-nous.centre{
	justify-content: center;
	text-align: center;
}

.maroc-que-jaime.qui-sommes-nous.centre .div-text{
	align-items: center;
	
}

.maroc-que-jaime.centre > .div-image{
	width: 850px;
	max-width: calc(100% - 50px);
		height: 400px;
	
	max-height: 500px;
	margin-top: 50px;
}

.maroc-que-jaime.centre.partenaire > .div-image{
	width: 850px;
	max-width: calc(100% - 50px);
		height: 400px;
	
	max-height: 500px;
	margin-top: 0px;
	margin-bottom: 30px;
}

.maroc-que-jaime.centre .div-image-icone{
	width: auto;
	max-width: 300px;
		height: 85px;
	
}

.maroc-que-jaime.centre.partenaire .div-image-icone{
	width: auto;
	max-width: 200px;
		height: 50px;
	
}

.maroc-que-jaime.centre{
	justify-content: center;
		flex-direction: column;
		align-items: center;
		
		padding-bottom: 50px;
		background: white;
}

.maroc-que-jaime.qui-sommes-nous.service
{
	padding: 0px; 
	margin: 0px;
	
	}



.message-publicite{
	position: absolute;
	left: 50%;
	top: 150px;
	transform: translate(-50%,0%);
	
	display: flex;
	flex-direction: column;
	padding: 20px 10px 20px 10px;
		z-index: 1;
		align-items: center;
		width: 850px;
	max-width: calc(100%);
	color: white;
		text-shadow:0px 5px 10px black;
	 border-radius: 2px;
	
 animation: fadeEffect 3s; /* Fading effect takes 1 second */
}



.carte{
	position: absolute;
	margin: 20px;
	max-height: 700px;
	z-index:-1;
		
}


.message-publicite h1{
			font-weight: bold;
		font-size: 2.2em;
	
}

.message-publicite.pays{
		top:auto;	
	bottom: 5px;
			margin: 0;
			color: white;
				
		text-shadow:none;
		width: 100%;
		background: rgb(0,0,0,0.2);
		
}

.message-publicite.pays h1{
	color: red;
				text-shadow:2px 2px 2px green;
					font-family: 'Luckiest Guy', sans-serif;
				

}

.message-publicite.pays p{
	
					font-family: 'Anton', sans-serif;
						font-size: 1em;
				

}

.message-publicite p{
		text-align: center;
		font-size: 1.1em;
	 
}

.message-publicite button{
	
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	justify-content: center; 
	 
	
	 background-color: 	#ff6666;
	color: white;
  border: none;
  cursor: pointer;
  margin:2px;
  outline: none;
  padding: 5px 10px 5px 10px;
  border-radius: 4px;
  font-size: 1.2em;
  z-index: 1;
  opacity: 0.9;
  text-align: center;
  margin: 10px;
}


.message-publicite button:hover{
	opacity: 1;
}

 
.barniere-parent > h1{
	padding: 10px;

	font-size: 2.5em;
	color: white;
	text-shadow:0px 5px 10px black;
		z-index: 1;
	
	margin: 20px;
	
}

.barniere-parent .voiture-publicite > .left-paddle{
		top: 20px;
	
	left: 50%;
}

.barniere-parent .voiture-publicite > .right-paddle{
		top: 20px;
	
	left: calc(50% + 20px);
	
}


 
 .barniere-parent .paddle{
  color: white;
}  
 .barniere-parent .voiture-publicite-child{
 		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;
		
	
 }
  
.barniere-parent table{
	width: 150px;
}  


.barniere-parent .voiture-publicite{
	        position: relative;
        display: flex;
		flex-direction: row;
		
       height: calc(100% - 155px);

		margin: 20px 0px 20px 0px;
        background: none;
      	padding: 0;
      	
        border-radius: 3px;
        color: white;
        background: none;
        border-radius: 5px;
        
       border: none;
       overflow: auto;
    }
    
    @media only screen and (max-width: 600px) {
 .barniere-parent {
 	
 	height: 600px;
 
 }
}

  

    
    
    .test .barniere-parent .voiture-publicite:before, .barniere-parent .voiture-publicite:after 
    {
      z-index: -1; 
      position: absolute; 
      content: "";
      bottom: 15px;
      left: 10px;
      width: 50%; 
      top: 80%;
      max-width:300px;
      background: rgba(0, 0, 0, 0.7); 
      -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
      -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      -webkit-transform: rotate(-3deg);    
      -moz-transform: rotate(-3deg);   
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg);
    }
 
   .test .barniere-parent .voiture-publicite:after 
    {
      -webkit-transform: rotate(3deg);
      -moz-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      transform: rotate(3deg);
      right: 10px;
      left: auto;
    }




.barniere-parent .voiture-publicite .titre-marque{
	display: flex;
	
	font-size: 1.2em;
	background: #f1f1f1;
	color: black;
	 align-items: center; 
	padding: 5px 10px 5px 10px;
	border-bottom: 1px solid #ccc;
	
}

.barniere-parent .voiture-publicite .titre-marque h1{
	margin: 0;
}

.barniere-parent .voiture-publicite .titre-marque img{
	max-width: 50px;
	max-height: 50px;
		margin: 0px 10px 0 0px;
}


.barniere-parent .voiture-publicite .voiture-publicite-child .image-fiche-div-publicite{
	
	position: relative;
	flex-grow: 1;		
	margin: 0px 10px 10px 10px;
	
			
}
.barniere-parent .voiture-publicite .voiture-publicite-child .image-fiche-div-publicite.png{
	padding: 20px;
	border-radius: 3px;
	border: 1px solid #ccc;
}

.barniere-parent .voiture-publicite .voiture-publicite-child .image-fiche-div-publicite .image-principale{
		border: 1px solid #ccc;
		border-radius: 3px;
	
}
.barniere-parent .voiture-publicite .voiture-publicite-child .image-fiche-div-publicite.png .image-principale{
		border: none;
	
}

.barniere-parent .voiture-publicite .voiture-publicite-child .div-logo{
	display: flex;
	position: absolute;
	left: 5px;
	bottom: 5px;
	height: 40px;
	width: 120px;
	max-height: 40px;
	max-width: 120px;
	border-radius: 5px;
	background: none;
	padding: 2px 5px 2px 5px;
}
.barniere-parent .voiture-publicite .voiture-publicite-child .logo{
	
	width: auto;
	height: auto;
	max-height: 100%;
	max-width:  100%;
	align-self: flex-end;
	
}


.barniere-parent .voiture-publicite .voiture-publicite-child .image-fiche-div-publicite .image-principale{
	
		transition: 1s ease-in-out;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%,0%);
	
	max-width: 100%;
	max-height: 100%;

}
.barniere-parent .voiture-publicite .voiture-publicite-child .image-fiche-div-publicite.png .image-principale{
	bottom:auto;
	top: 50%;
	transform: translate(-50%,-50%);
}


.barniere-parent .voiture-publicite .image-fiche-div-publicite .image-secondaire{
	position: absolute;
	top: 50%;
	right: -95px;
	transform: translate(0%,-50%);
	width: auto;
	height: auto;
	max-width: 100px;
	max-height: 100%;
}

.barniere-parent .voiture-publicite .image-fiche-div-publicite .image-secondaire:first-child{
	position: absolute;
	top: 50%;
	left: -95px;
	transform: translate(0%,-50%);
	width: auto;
	height: auto;
	max-width: 100px;
	max-height: 100%;
}


.barniere-parent .voiture-publicite .contact{
	width: 95px;
	top: -25px; 
	right: 10px;
	background: #f9f9f9;
	color: black;
	border: 1px solid #ccc;
	     text-shadow: 0 1px 0 #fff;
	
}

.barniere-text-parent{
	display: flex; 
	flex-direction: row; 
		align-items: stretch;
		justify-content: center;
		padding: 25px 10px 20px 10px;
		position: relative;	
		 -webkit-transition: width 1.0s ease, margin 1.0s ease;
    -moz-transition: width 1.0s ease, margin 1.0s ease;
    -o-transition: width 1.0s ease, margin 1.0s ease;
    transition: width 1.0s ease, margin 1.0s ease; 
}



@media all and (max-width: 1100px)
{
.barniere-text-parent{
	flex-direction: column; 
}

.barniere-text-parent .barniere-text{
	width: calc(100% - 20px);
}

	}

.barniere-text{
	position: relative; 
	display: flex;
	flex-direction: column;
	margin: 0px 10px 20px 10px;
	border-radius: 5px;
	width: 400px;
			background: #00c6f0;
		cursor: pointer;
		
	
}


.barniere-text  *{
			cursor: pointer;
	
}



.barniere-text.contrat{
	background: none;
	margin: 10px;
	border: none;
	margin: 0;
	flex-direction: row;
	border-radius: 0;
	border: none;
	width: 100%;
	max-width: 100%;
}

.barniere-text.ville{
	background: none;
	margin: 10px;
	border: none;
	margin: 0;
	flex-direction: row;
	border-radius: 0;
	border: none;
	width: 100%;
	max-width: 100%;
}

.barniere-text.ville h3{
	width: 100%;
	margin-bottom: 10px;
	color: #2a4045;
	font-size: 1.6em;
	
}

.barniere-text.ville h1{
	width: 100%;
	color: #2a4045;
	font-size: 2.3em;
}

.barniere-text.ville h2{
	width: 100%;
	color: grey;
}


.barniere-text.ville .div-image{
	max-width: 100%;
	max-height: 700px;
	margin: 30px 5px 20px 5px;
	
}

.barniere-text.ville .div-image img{
	
	max-width: 100%;
	max-height: 100%;
}

.barniere-text.ville p{
	width: 100%;
	font-size: 0.9em;
	
}




.barniere-text p{
	text-align: justify;
	text-justify: inter-word;
	font-size: 1.1em;
	
}


.barniere-text.contrat p:before{
	content: '*';
	position: relative;
	left: -5px;
}

.barniere-text.contrat.ar p:before{
	content: '*';
	position: relative;
	left: none;
	right: -5px;
}

.barniere-text .text-div{
	display: flex; 
	flex-direction: column;
			  padding: 10px 20px 20px 20px; /* Fading effect takes 1 second */ 
}

.barniere-text-div-image{
	display: block;
	position: relative;
				max-height: 200px;
				height: 200px;
					min-height: 200px;
			 padding: 40px 10px 40px 10px;
								
}

.barniere-text.contrat .barniere-text-div-image{
	height: auto;
    max-height: 100%;    
	width: 250px;
	min-width: 250px;
	max-width: 250px;
	display: block;
}

.barniere-text-div-image img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
		transition: 1s ease-in-out;
	
	width: auto;
	height: auto;
	max-width: calc(100% - 30px);
	max-height: calc(100% - 30px);
	
	}
 

.barniere-text h1{
	font-size: 1.5em;
}

.barniere-text h2{
	font-size: 1em;
	color: #ff6666;
}

.barniere-text h3{
	margin-top: 25px;
		font-size: 1em;		
}


.contact{
	dislay: flex;
	padding: 5px;
	   border: none;
	    max-width: 200px;
  	outline: none;	 
    border-radius: 4px;
    background: #fafafa;
  	margin: 0px 0px 10px 5px;
}

.bean .adresse{
	display: block;
		outline: none;	 
    border-radius: 4px;
    background: #fafafa;
  	margin: 10px 0px 10px 5px;
  	padding: 5px;
  		    max-width: 200px;
  			height: 50px;
  			font-weight: bold;
  			font-size: 14px;
  			overflow: hidden;
  			color: black;
}

tr.noir,.bean.noir {
	background: black;	
	color: white;
}

tr.noir:nth-child(even){
		background: black;	
	color: white;
}

tr.noir{	
	border-style: solid;
	border-width: 3px 0 3px 0;
	border-color: red;	
}

.bean.noir .image-fiche-div{
	border-color: black;
	
}



tr.noir:hover{
	background: #1E1E1E;
	color: white;
}


.bean.noir .contact,.bean.noir .adresse{
	background: #1E1E1E;
	color: white;
	
}

.bean .adresse.email{
  			height: auto;
	
}

.bean .adresse label{
	word-break: break-all;
}



footer {
	display: flex;
	flex-direction: column;
	background-color: none;
	
	color: white;
	height: auto;
	position: relative;
	bottom: 0;
	 margin: 0;
	 align-items: center; 
	 justify-content: center;
	 padding-top: 20px;	  
	  		  
}

.map-contact-div{
	position: relative; 
	min-height: 400px; 
	width: 100%;
	border-radius: 5px; 
	padding: 10px 5px 30px 5px; 
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;	
}

.map-div{
		margin: 10px;
	
	position: relative;
	flex-grow: 1;
	min-width: 300px;
	min-height: 250px;
}

.contacter-nous-div{
	display: flex;
	flex-direction: column;
			margin: 10px;
			border-radius: 5px;
			padding: 10px 10px 10px 10px;
			background: inherit;	
 background-repeat: no-repeat;
  background-size: cover;
  background-position:  center center;
			align-items: stretch;
			border: 1px dashed grey;
			border-radius: 2px;
	
}
.contacter-nous-div .btn{
	margin-bottom: 0;
	
}
.contacter-nous-div .form-container{
	align-items: stretch;
	
}

.contacter-nous-div .form-container textarea,.contacter-nous-div .form-container input{
	background: rgb(0,0,0,.5);
	color: white;
	width: 250px;
}

.contacter-nous-div .form-container textarea:focus,.contacter-nous-div .form-container input:focus{
	background: rgb(0,0,0,.8);
}

.contacter-nous-div .form-container textarea{
	
	height: 100%;
		width: 250px;
	
}

.condition-contrat{
	display: flex;
	flex-direction: column;
	background: rgb(0,0,0,.5);
	color: white;
	padding: 10px;
	flex-grow: 1;
	margin: 10px 20px 10px 20px;
	border-radius: 5px;
}

.ville-monument{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: white;
	color: black;
	padding: 20px;
	flex-grow: 1;
	margin: 20px 40px 20px 40px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

footer .btn-icone{
	color: white;
		text-shadow:1px 1px 1px black;
	
}

.copyright{
				text-shadow: none;
	position: relative;
	background: none;
	color: white;
	font-weight: bold;
	font-size: 16px;
	width: 100%;
	height: auto;
	padding: 20px 5px 2px 5px;
	text-align: center;
	z-index:0;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 60px;
	margin-bottom: 20px;
	
}

.copyright label {
	font-size: 1.2em;
				text-shadow:1px 1px 1px black;
				cursor: pointer;
				
	
}
.copyright label:hover{
	color: grey;
	
}

.copyright img{
	
	width: 40px;
	height: 40px;
	
	margin-bottom: 10px;
}




.dropbtn,.accueilbtn{
	
	cursor: pointer;
	font-size: 16px;
	border: none;
	outline: none;
	background: none;
	 
	
	font-family: inherit;
	display: block;
		padding: 2px 10px 2px 10px;
	
	font-weight: bold;
	  border-radius: 5px;
  height: 25px;
  margin: 10px 5px 10px 5px;
  display: flex;
  flex-direction: row;
  	align-items: center;
  	color: white;
}

.menu-publicite-div.sticked .dropbtn,.menu-publicite-div.sticked  .accueilbtn{
	color: black;
}

.menu-publicite-div .dropbtn.selected,.menu-publicite-div  .accueilbtn.selected{
	color: white;
}

.menu-publicite-div.sticked .contacter-menu .accueilbtn{
	font-size: 1.1em;
	font-weight: bold;
	color: black;
		cursor: inherit;
	
}


.marque-liste .dropbtn,.marque-liste .accueilbtn{
	background: #f1f1f1;
	color: #1E1E1E;
}



.dropbtn:after,.dropbtn3:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: relative;
  right: -5px;
  float: right;
  flex-grow: 1;
  text-align: right;
 

}



.dropbtn2,.dropbtn3 {
	cursor: pointer;
	font-size: 16px;
	border: none;
	outline: none;
	  color: white;
	padding: 12px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
	font-family: inherit;
	font-weight: bold;	
}


.dropdown-content, .dropdown2-content,.dropdown3-content{
	display: none;
	position: absolute;
	margin: auto;
	background-color: #1E1E1E;
	color: black;
	min-width: 110px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	font-weight: bold;

}

.dropdown2-content{
	margin-top: 7px;
}

.marque-liste .dropbtn,.marque-liste .accueilbtn{
	width: calc(100% - 30px);
	text-align: left;
	
}

.accueilbtn.selected,.dropbtn.selected{
	
	background: #ff6666;
	color: white;
}

.marque-liste a.selected{
		color: #ff6666;
	
}

 .marque-liste{
 	display: block;
		position: relative;
		margin: 0 auto;
	min-width: 180px;
		max-width: 300px;
	font-weight: bold;
	margin: 10px;
	border-radius: 5px;
	overflow: auto;
	margin: 10px 0px 10px 0px;
}

.sous-liste{
	display: none;
}

.marque-liste img{
	width: 	20px;
	height: 20px;
	margin-right: 10px;
}

.arrow-button-div{
	display: flex;
	flex-direction: row;
	width: 100%;
	position: absolute;
	top: 0;
	
}

.arrow-button{
	padding: 2px 5px 2px 5px;
	align-text: center;
	 background-color: inherit;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;   
  outline: none;
  opacity: 0.6;
  	width: 50%;
  
}

.arrow-button:hover{
	opacity: 1;
}

.arrow-button i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  border-color: black;
  
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}



.dropdown-content,.dropdown3-content{
	overflow: hidden;
}



.dropdown2-content,.dropdown3-content {
	right: 10px;	
}

.dropbtn:not(.selected):hover,.accueilbtn:not(.selected):hover {
	
	color: grey;
}




.dropbtn2:hover,.dropbtn3:hover{
	color: grey;
}


.dropdown-content a,.dropdown2-content a,.dropdown3-content a{
	float: none;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
	position: relative;
	color: white;
}

.marque-liste a {
	float: none;
	color: var(--main-color);
	padding: 5px 16px;
	margin: 0px 10px;
	text-decoration: none;
	display: block;
	text-align: left;
	position: relative;
		color: white;	
		border-width: 0px 0px 1px 0px;
		border-style: solid;
		border-color: #ccc;
}

.dropdown-content a:hover,.dropdown2-content a:hover,.dropdown3-content a:hover {
	color: grey;
}

.marque-liste a:hover {
	color: grey;
}


.show {
	display: flex;
	flex-direction: column;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-weight: bold;
	
}

nav {
	background-color: #1E1E1E;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	z-index: 3;
	
	margin:0;
	padding: 0;
	height: auto;
	
	
}
li {
	float: left;
	
}




.chercher-form input,.chercher-form  select:not(.range-type-select)
,.chercher-template input,.chercher-template  select:not(.range-type-select){
	width: 160px;
	height: 35px;
	margin-right: 5px;
  padding: 5px;
  background: white;
  color: black;
  outline: none;
}

.chercher-form .div-label-range{
	position: absolute; 
	top: 5px; left: 50%; 
	transform: translateX(-50%); 
	width: 120px; 
	color: grey; 
	font-weight: bold
	
}



.chercher-form  .range-type-select{
		height: 35px;
		position: relative;
		top: -10px;	
}


.chercher-form  input[type=date],.chercher-form select:not(.range-type-select)
,.chercher-template  input[type=date],.chercher-template select:not(.range-type-select){
		width: 120px;
		 border: 1px solid #d5d5d5;
	
}
.chercher-form  input[type=range]
,.chercher-template  input[type=range]{
		width: 160px;	
}



/* Style the submit button */
.chercher-button {
	border-radius: 4px;
	border: none;
	outline: none;
	padding: 10px;
	cursor: pointer;
	background-color: inherit;
	color: black;
}

.chercher-button:hover {
	color: #0b7dda;
}


.form-popup .titre{
	display: block;
	text-align: justify;
		font-weight: bold;	
	}
	
	.form-popup .titre{
	display: block;
	text-align: justify;
		font-weight: bold;	
	}
		



.form-popup > .image-ronde{
	position: absolute; 
	top: 0; 
	right: 0; 
	transform: translate(-50%, -20%);
	width: 100px;
	height: 100px;
  border: 5px solid white;
}


table {
	
	width: 100%;
	overflow-y: auto;
	table-layout: fixed;
	border-collapse: collapse;
}



td {
	overflow: hidden;
	text-overflow: ellipsis;
	border-top: 1px solid #ccc ;	
	padding: 8px;
	text-align: left;
}





tr{
		background-color: white;
	
}



tr:nth-child(even) {
	background-color: #f7f7f7;
}

tr:hover {
	background-color: #dfe3ee;
}

tr.selected{
	background-color: #383838;
	color: white;
	
}

th {
	text-align: left;
	 background-color: white;
  color: black;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	margin: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	 cursor: pointer;
    -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

 	border-top: 1px solid #ccc ;	
 
	padding: 8px 8px 8px 8px;
		 text-align: left;
}


.headerSortDown:after {
  content: " ▾";
  font-family: Arial, sans-serif;
  
}

.headerSortDown:hover::after,.headerSortUp:hover::after {
	 color: #990000;
}

.headerSortUp:after {
  content: " ▴";
  font-family: Arial, sans-serif;
}
.bean-lister{
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	align-items: center;
    justify-content: center;
}


.div-table {
	display: table;
	border: none;
	outline: none;
	box-sizing: border-box;
	background-color: white;
	width: 900px;
	height: calc(100vh - 65px);
	margin: 10px 10px 10px 10px;
	flex-grow: 1;
	horizontal-align: middle;
	
	 	 
}




.entete{
	position: relative;
	display: flex;
	height: 50px;
		align-items: center;
		border-radius: 5px;
		margin: 60px 15px 10px 15px ;	
		background: black;	
		z-index: 1;
		width: calc(100% - 30px);
}



.slider-wrapper .entete{
		position: absolute;
	
}


.image-table{
	max-width: 300px;
	max-height: 50px;
}

.entete .image-ronde{
	cursor: pointer;
	float: left;
	width: auto;
	height: auto;
	max-width: 300px;
	max-height: 60px;
	position: absolute; 
	top: 50%;
	left: 50%; 
	transform: translate(-50%,-50%)
}

.entete-child{
	
	display: flex;
	flex-direction: row;
	flex-grow:1;
		align-items: center;
	
}

.entete-child-parent{
	display: flex;
	flex-direction: column;
	flex-grow:1;
			padding: 5px 10px 5px 10px;
				
}




.entete-child-parent-parent-child{
	display: flex;
	flex-direction: row;	
	flex-grow:1;
	position: relative;
	align-items: center;
	height: 100%;
}

.entete .div-logo{
		background: inherit;
	
		max-width: 180px;
		height: 100%;
		display: flex;
	flex-direction: row;
				align-items: center;
				position: relative;
				padding: 5px 5px 5px 20px;
				

}


@-moz-keyframes spin { 
	0% { -moz-transform: rotate(0deg); }
	10% { -moz-transform: rotate(360deg); }
	100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 
	
	0% { -webkit-transform: rotate(0deg); }
	10% { -webkit-transform: rotate(360deg); }
	100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 
	
		0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 
		10% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
	100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 
	}



.entete .image-logo{
	
	
	width: auto;
	height: auto;
	max-height: 100%; 
	
	max-width: 100%;
}

.entete .titre-div {
	display:flex; 
	flex-grow: 1;
	flex-direction: column;
	position: relative; 	
}

.entete .titre-div h1{
}

nav .titre-div {
	display:flex; 
	flex-direction: column;
	margin-left: 10px;	
	position: relative; 
	transform: translateY(25%);	
}

nav .titre-div h1{
		
		color: white;
}

.entete .utilisateur {
	display: inline-block;
	color: black;
	float: right;
	background-color: yellow;
	margin: 10px;
}

.div-table .chercher-form {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    justify-content: center;
    padding: 10px 35px 10px 35px;
	position: -webkit-sticky;
	position: sticky;
	color: white;
	top: 44px;
	orverflow: auto;
	width: 100%;
	background: #f9f9f9;	
		z-index: 1;
}

.div-chercher-form{
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
    justify-content: center;
	margin: 5px;
	border-radius: 5px;
	background: white;
	padding: 4px 10px 4px 10px;
	
}

.div-chercher-form .num-page{
		flex-direction: column;
	font-weight: bold;
	font-size: 35px;
	color: black;
	min-width: 50px;
	margin: 5px;	
}

.div-chercher-form .num-designation{
	
	font-size: 12px;
	color: grey;
	font-weight: bold;
}

.div-chercher-form.num{
	background: #b3ffb3;
}

.notification {
	display:block;
	position: relative;
		width: 160px;
	height: 170px;
	padding: 10px;
	overflow: hidden;
	background-color: white;
	border-radius: 4px;
	margin: 5px 5px 2px 5px;
}

.notification-aside{
	margin: 10px 2px 0 10px;
	display: flex;
  flex-direction: column;
  overflow: hidden;
}


.notification-div {
	border: none;
	outline: none;
	overflow-y: hidden;
	width: 180px;
	height:auto;
}

.contacter-nav{
	font-size: 1.2em;
	border-radius: 4px;
	background: #f1f1f1;
		color: black;
	
	padding: 5px 10px 5px 10px;
	font-weight: bold;
	
}

#contacter-nav{
	z-index:2;
}

section{
	display: flex;
	flex-direction: row; 
	flex-grow: 1; 
}

@media all and (max-width: 900px)
{
.barniere-text.contrat .barniere-text-div-image{
	display: none;
}
	}




@media all and (max-width: 700px)
{
.marque-liste{
	display: none;
}
	}


	
	@media all and (max-width: 1200px)
{
.entete .image-ronde{
	display: none;
}
	}

	@media all and (max-width: 1000px)
{
.entete #contacter-nav label:nth-of-type(1){
	display: none;
}

}

	@media all and (max-width: 700px) and (min-width: 300px)
{
.entete .itineraire{
	display: flex;
}

}
	

@media all and (max-width: 1100px)
{
.notification
{
	display:inline-block;
}

.notification-div {
	 overflow-x:hidden;
 	 white-space:nowrap;
	 height: 200px;
	 width: auto;	
}


.notification-div:hover {
	overflow-x: auto;
	
}

section{
	  	flex-direction: column-reverse;
}

.div-table{
	width: calc(100% - 20px);	
}

}


.fond-blur{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	background: inherit; 
	
}

.ecran-veille{
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 10;
	
	display: none;
	flex-direction: column;
	align-items: center; 
	justify-content: center; 
	 
	padding: 20px;
}

.ecran-veille h1{
	
	color: black;
	text-shadow:10px 5px 10px white;
	
	
}

.ecran-veille p{

	color: #1E1E1E;
	font-weight: bold;
		text-shadow:0px 5px 10px white;
	
	
}
.ecran-veille img{
	margin: 5px;
	max-width: 100px;
	max-height: 100px;
}

.barniere .fond-blur{
	
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
	
}





.contacter-footer-div{
	display: flex;
	flex-direction: row;
	justify-content: center;
			flex-wrap: wrap;
			
				color: white;	
					text-shadow:1px 1px 1px black;
				
}

body *:not(.story-div):not(.tab-content):not(.liste-marque)::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.9);
}

body *:not(.story-div):not(.tab-content)::-webkit-scrollbar {
	width: .4em;
		height: .4em;
	
}



body *:not(.story-div):not(.tab-content):not(.liste-marque)::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8);
}



.notification-div:hover {
	overflow-y: auto;
	
}


.notification:hover {
	background-color: #fafafa;
}



.notification div, .notification h1, .notification p,
	.notification-entite {
	background-color: inherit;
	display: flex;
align-items: center;
	
}

.location-entite {
	background-color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;	
}

.location-entite > *{
		cursor: pointer;
}

.location-entite:hover {
	color:  grey;
}



.notification p {
	margin-top: 0px;
	padding: 0px;
}

.notification > label {
	margin: 0;
	padding: 0px;
	font-weight: bold;
	font-size: 0.8em;
}

.page-header {
	margin: 0 !important;
	padding: 0 !important;
}

.image-ronde {
	height: 40px;
	width: 40px;
	min-width: 40px;
		min-height: 40px;
	border-radius: 50%;
	cursor: pointer;
		margin: 0 4px 0 4px;
	
}

.image-rectangle {
	height: 90px;
	width: 80px;
	min-width: 80px;
		max-width: 80px;
		min-height: 90px;
	max-height: 90px;
	cursor: pointer;
	
}



@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
.animated-background {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	background: #f6f7f8;
    background: linear-gradient(to right, var(--main-color) 8%, white 18%, var(--main-color) 33%);
	background-size: 800px 104px;
	height: 96px;
	position: relative;
}

.background-masker {
	background: #fff;
	position: absolute;
}

/* Every thing below this is just positioning */
.background-masker.header-top, .background-masker.header-bottom,
	.background-masker.subheader-bottom {
	top: 0;
	left: 40px;
	right: 0;
	height: 10px;
}

.background-masker.header-left, .background-masker.subheader-left,
	.background-masker.header-right, .background-masker.subheader-right {
	top: 10px;
	left: 40px;
	height: 8px;
	width: 10px;
}

.background-masker.header-bottom {
	top: 18px;
	height: 6px;
}

.background-masker.subheader-left, .background-masker.subheader-right {
	top: 24px;
	height: 6px;
}

.background-masker.header-right, .background-masker.subheader-right {
	width: auto;
	left: 300px;
	right: 0;
}

.background-masker.subheader-right {
	left: 230px;
}

.background-masker.subheader-bottom {
	top: 30px;
	height: 10px;
}

.background-masker.content-top, .background-masker.content-second-line,
	.background-masker.content-third-line, .background-masker.content-second-end,
	.background-masker.content-third-end, .background-masker.content-first-end
	{
	top: 40px;
	left: 0;
	right: 0;
	height: 6px;
}

.background-masker.content-top {
	height: 20px;
}

.background-masker.content-first-end, .background-masker.content-second-end,
	.background-masker.content-third-end {
	width: auto;
	left: 380px;
	right: 0;
	top: 60px;
	height: 8px;
}

.background-masker.content-second-line {
	top: 68px;
}

.background-masker.content-second-end {
	left: 420px;
	top: 74px;
}

.background-masker.content-third-line {
	top: 82px;
}

.background-masker.content-third-end {
	left: 300px;
	top: 88px;
}

.blur {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
 background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);  
  
}


.form-popup {
	  background-color: white;
	  border-radius:4px;
	 display: inline-flex;
  	flex-flow: column;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  	padding: 10px;
	height: auto;	
	width: auto;
	max-height: calc(100vh - 40px);
	max-width: calc(100vw - 40px);
}

/* Add styles to the form container */
.form-container {
		 display: inline-flex;
		 flex-direction: column;
	flex-grow: 1;	
	overflow-y:auto;
	 justify-content: stretch;	 
	 	min-width: 200px;
	 	border-radius: 3px;
	 
}

.form-container > div{
	
	display: flex;
	position: relative;
	flex-direction: column;
		 justify-content: stretch;	 
	
}

#cheque-div > div{
		position: relative;
	
}

.parametre-location{
	padding: 10px; 
	border-radius: 5px; 
	background: white; 
	margin: 5px auto; 
	width: auto; 
	height: auto;
	
}

.parametre-location .location{
	border: none;
	
}

.valider-parametre{
	display: flex;
	flex-direction: column;
	padding: 30px; 
	border-radius: 10px; 
	background: white; 
	margin: 5px auto; 
	width: 560px; 
	height: 250px;
		text-align: center;	
}

.valider-parametre h1 {
	color: black;
	position: relative;
	font-weight: bold;
}

.rubrique h3{
	background: #990000;
	padding: 5px;
	color: white;
}

.rubrique .bean{
	position: relative;
	margin: 0 auto;
	top: 50%;
	transform: translateY(-50%);
	
}

.parametre-location h1{
	margin: 5px 5px 10px 5px;
}

.parametre-location-inner{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: stretch;
	
	
}

.form-popup p{
	display: block;
	text-align: justify;
	text-justify: inter-word;
	border-radius: 3px;
	background: #f1f1f1;
	padding: 5px;
	margin: 5px 5px 0px 5px;
	max-width: 210px;
}

.rubrique{
	display: flex;
	flex-direction: column;
	margin-right: 20px;
			 	
}

.parametre-location .form-container{
	
	padding: 10px 10px 10px 10px;
		background: #f9f9f9;
		
		flex-grow: 1;	
		 
			
}



/* Full-width input fields */
.form-container input,.form-container textarea,.form-container select
 {
  display: block;
  padding: 10px;
  margin: 5px 0px 10px 0px;
  background: white;
  box-sizing:content-box;
    font-size: 13px;
  width: 160px;
    outline:none;
  border: 1px solid #d5d5d5;
  
}

.form-container input[type="date"],.form-container input[type="time"],.form-container input[type="datetime-local"]{
	padding: 8px;
}

.image-boite{
	
	max-width: 160px; 
	max-height: 100px;
}




.form-container input[type='file']{
	display: none;
}



.inputWithIcon {
  position: relative;
  
}




.inputWithIcon i {
  position: absolute;
  right: 2px;
    top: 16px;
  
  color: #aaa;
  transition: 0.3s;
}

.form-container img{
	  display: block;
	  margin: 5px 0px 10px 0px;
	
}




.form-container.lieu-paiement input{
	
	  margin: 0px 20px 0px 5px;
}

.form-container.lieu-paiement input:last-child{
	
	  margin: 0px 5px 0px 5px;
}

.chercher-template input, .chercher-template .select-input
 {
   display: block;
 
}

.chercher-template input:not([type=range]),.chercher-form input:not([type=range]){
		   border: 1px solid #ccc;
}



.connexion-span{
	position: absolute; 
	right: 10px; 
	top: 10px; 
	background:  white; 
	padding: 10px; 
	height: auto; 
	width: auto;
	border-style: solid;
	border-width: 4px 0px 0px 0px;
	border-color:   #990000;
}



.div-horizontal{
	display: flex;
	flex-direction: row;
	
}





.info-incorrecte{
	font-weight: bold;
	color: red;
	margin-top: 10px; 
	text-align: center; 
	width: 100%;
}

.info-incorrecte.hidden {
	display: none;
}






.range-type-select{
	display: inline-block;
	border: none;
	outline: none;
	font-weight: bold;
	background: inherit;
}

.tab-content .chercher-form{
	display: block;
	position: relative;
	margin: 10px; 
	border-radius: 5px; 
	height: 45px; 
	padding: 5px 15px 5px 15px; 
	background: white;
}

.tab-content .chercher-form .nombre-resultat{
	font-weight: bold;
	font-size: 20px;
	color: black;
	margin: 5px;	
	top: 13px;
	padding: 4px;
	background: #b3ffb3;
	border-radius: 5px;
	min-width: 50px;
	float: right;
}

.tab-content .chercher-form .ignorer{
		position: relative;
		float: right;
}	


.tab-content .chercher-form .range-type-select{
	display: inline-block;
	position: relative;
	top: 50%;
	transform: translate(0,-50%);
	float: right;
	font-size: 15px;
	font-weight: bold;
}

.tab-content .chercher-form *{
	position: relative;
	top: 50%;
	transform: translate(0,-50%);
}

.chercher-template label{
	color: black;
	font-weight: bold;	
}




input[type="range"].multirange.original {
		position: absolute;
	}

input[type="range"]::-webkit-slider-thumb {
			position: relative;
			z-index: 2;	
  			cursor: pointer;
		}

		


				
	input[type=range]{
	position: relative;
    -webkit-appearance: none;
    	--track-background: linear-gradient(to right,
				#ddd var(--low), #990000 0,
				#990000 var(--high), #ddd 0
			) no-repeat 0 45% / 100% 40%;
		--range-color: black;
		background: inherit;
		width: 200px;
}

input[type="range"]::-webkit-slider-runnable-track {
			background: var(--track-background);
			border: none;
			    border-radius: 3px;	
		}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #990000;
    
}

input[type=range]:focus {
    outline: none;
    background: inherit;
}

.form-container label{
	
	display: inline-block;
}
/* When the inputs get focus, do something */
input:not([type='range']):focus {
 border-color: #03a9f5;
}

/* Set a style for the submit/login button */
 .btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
    margin-bottom:10px;
  opacity: 0.9;
    border-radius: 3px;
  
}


.btn-petit {
 background-color: #4CAF50;
  color: white;
  padding: 8px 20px;
  border: none;
  cursor: pointer;
  width: 160px;
    margin-bottom:10px;
  opacity: 0.8;
    border-radius: 3px;
  
}


.form-popup .btn,.form-popup .btn-petit {
  margin-left: auto;
    margin: 5px 10px 0px 10px; 
}


.btn-table{
   background-color: #ffffff;
	color: black;
  border: none;
  cursor: pointer;
  margin:2px;
  outline: none;
  padding: 5px 10px 5px 10px;
  border-radius: 4px;
}

.reserver{
	
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #ff6666;
    color: white;
    border: none;
    cursor: pointer;
    margin: 2px;
    outline: none;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
    font-size: 1.2em;
    z-index: 1;
    opacity: 0.9;
    text-align: center;
    margin: 5px;
    
    position: absolute;
	bottom: 0px;
	right:0px;
}

.maroc-que-jaime .reserver{
	
	position: relative;
	top:0;
	right: 0;
	
}



.reserver:hover{
	opacity: 1;
}

.itineraire{
	
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	justify-content: center; 
	 
	
	 background-color: 	#ff6666;
	color: white;
  border: none;
  cursor: pointer;
  margin:5px 10px 5px 5px;
  outline: none;
  padding: 5px 10px 5px 10px;
  border-radius: 4px;
  font-size: 1.2em;
  opacity: 0.9;
  text-align: center;
}


.itineraire:hover{
	opacity: 1;
}

.whatsapp-bouton{
	position: fixed;
	bottom: 10px;
	right:10px;
	border: none;
	outline: none;
	border-radius: 4px;
	z-index:10;
	  cursor: pointer;
	background: none;
	
}

.whatsapp-image {
    width: 50px;
    height: 50px;
    -webkit-animation: animation-whatsapp 1000ms infinite;
  -moz-animation: animation-whatsapp 1000ms infinite;
  -o-animation: animation-whatsapp 1000ms infinite;
  animation: animation-whatsapp 1000ms infinite;
}

.barniere .btn-table:hover{
	
	color: white;
	font-weight: normal;
	 -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}

@-webkit-keyframes glowing {
  0% { background-color: #ff4d94; -webkit-box-shadow: 0 0 3px #ff4d94; }
  50% { background-color: #ff0066; -webkit-box-shadow: 0 0 40px #ff0066; }
  100% { background-color: #800033; -webkit-box-shadow: 0 0 3px #800033; }
}

@-moz-keyframes glowing {
  0% { background-color: #ff4d94; -moz-box-shadow: 0 0 3px #ff4d94; }
  50% { background-color: #ff0066; -moz-box-shadow: 0 0 40px #ff0066; }
  100% { background-color: #800033; -moz-box-shadow: 0 0 3px #800033; }
}

@-o-keyframes glowing {
  0% { background-color: #ff4d94; box-shadow: 0 0 3px #ff4d94; }
  50% { background-color: #ff0066; box-shadow: 0 0 40px #ff0066; }
  100% { background-color: #800033; box-shadow: 0 0 3px #800033; }
}

@keyframes glowing {
  0% { background-color: #ff4d94; box-shadow: 0 0 3px #ff4d94; }
  50% { background-color: #ff0066; box-shadow: 0 0 40px #ff0066; }
  100% { background-color: #800033; box-shadow: 0 0 3px #800033; }
}


@-webkit-keyframes animation-whatsapp {
  0% { transform: scale(1); }
  25% { transform: scale(1.05); }
   50% { transform: scale(1.1); }
   75% { transform: scale(1.05); }
  100% {transform: scale(1); }
}

@-moz-keyframes animation-whatsapp {
  0% { transform: scale(1); }
  25% { transform: scale(1.05); }
   50% { transform: scale(1.1); }
   75% { transform: scale(1.05); }
  100% {transform: scale(1); }
}

@-o-keyframes animation-whatsapp {
  0% { transform: scale(1); }
  25% { transform: scale(1.05); }
   50% { transform: scale(1.1); }
   75% { transform: scale(1.05); }
  100% {transform: scale(1); }
}

@keyframes animation-whatsapp {
  0% { transform: scale(1); }
  25% { transform: scale(1.05); }
   50% { transform: scale(1.1); }
   75% { transform: scale(1.05); }
  100% {transform: scale(1); }
}

.notification .btn-table{
	position: absolute;
	bottom: 5px;
	right:5px;
}

.bean .fiche-bouton{
	position: absolute;
	bottom: 5px;
	right:5px;
}

.div-table .chercher-form .btn-table > i{
	margin-right: 5px;
}

.chercher-form .btn-table{
	padding: 7px 10px 7px 10px;
	font-weight: bold;
	font-size: 13px;
}


.btn-table.excel{
		color: green;
}

.btn-table.ajouter{
		color: #00e600;
}


table .btn-table,.bean .bouton-div .btn-table{
	  border-radius: 50%;
	  width: 30px;
	  height: 30px;
	    padding: 5px;
}


.bouton-div{
	display: flex;
	flex-direction: row;
}

.bean .bouton-div{
	position: absolute;
	top: -45px;
	right:5px;
}

.bean .bouton-div.left{
		left:5px;
		right: auto;	
}

.bean .bouton-div:not(.left) .btn-table:last-child{
		display: none;	
}


.bean .btn-reserver{
	 background-color: #f9f9f9;
  border: none;
  cursor: pointer;
  margin:2px;
  outline: none;
  padding: 5px 10px 5px 10px;
  border-radius: 4px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  
  
}

.bean .btn-reserver:hover {
	background: #414854;
   color: white; 
   font-weight: bold;
}


/* Add a #990000 background color to the cancel button */
 .cancel {
  background-color: #990000;
}

/* Add some hover effects to buttons */
 .btn:hover,.btn-petit:hover {
  opacity: 1;
}

.btn-table:hover {
	background: #414854;
   color: white; 
   font-weight: bold;
}

button:disabled {
  background: #dddddd;
  opacity: 1;
}



/* Customize the label (the container) */
.container {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.div-radio{
  margin: 5px 0 22px 0;
	text-align: center;
}
/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: var(--main-color-background);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--main-color);
}


.btn-icone{
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 2px;
  border-radius: 30%;
  border: none;
  outline: none;
  color: var(--main-color);
  overflow: hidden;
  position: relative;
  text-align: center;
}
.btn-icone i{
  line-height: 30px;
  font-size: 20px;
  transition: 0.2s linear;
}
.btn-icone:hover i{
  transform: scale(1.3);
  color: #990000;
}


@keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
}

.spinner-background{
		display: none;
	  position: fixed; 
	  top: 0;
	  left: 0;
	  width: 100%;
  height: 100%;
}

.lds-spinner {
  position: absolute; 
  width: 64px;
  height: 64px;
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%);
  z-index: 2;
}


.lds-spinner div {	
	position: relative;
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;

}
.lds-spinner div:after {
  content: " ";
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: black;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;  
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.bean {	
			position: relative;
	  background-color: white;
	  border-radius:4px;
	 display: flex;
  	flex-flow: column;
	  	padding: 10px;
	border-style: solid;
	border-width: 0px 0px 4px 0px;
	border-color:   black;
	margin: 10px 12px 10px 12px;
}

.voiture{
	height: 340px;
	width: 220px;
	min-height: 340px;
	min-width: 220px;
}


.client{
	width: 220px;
		min-width: 220px;
		height: 380px;
	min-height: 380px;
	
}

.fournisseur{
	width: 220px;
		min-width: 220px;
		height: 280px;
	min-height: 280px;
	
}


.bean.disponible{
		border-color:   green;
	
}

.bean.indisponible{
		border-color:   #990000;
	
}

.bean.rentrant{
		border-color:   #ff6666;
	
}

.bean p{
	font-weight: bold;
	color:   black;	
}



.bean.disponible p{
		color:   green;
	
}

.bean.indisponible p{
		color:   #990000;
	
}

.bean.rentrant p{
		color:   #ff6666;
	
}






.location h1,.location h2{
	margin:0;
	font-size: 1em;
}
  
.bean  .contact,.location  .contact{
	text-align: center;
	width: 75px;
	font-size: 14px;
	color: black;
}

.client  .contact{
	width: 170px;
	position: relative;
	margin: auto;
}

.bean .bean-detail{
	position: relative;
	top: 50px;
}

.client .bean-detail{
	position: relative;
	top: 75px;
}

.voiture .bean-detail h1{
	font-size: 20px;
}

.voiture .bean-detail h2{
	font-size: 15px;
}

.client .bean-detail h1{
	font-size: 15px;
}
  
.bean  .contact{
	position: absolute;
	top: 20px;
	right: 10px;
	background: #f1f1f1;
	
}
    
 .client  .contact{
	top: 50px;
		right: 0;
			left: 0;
	
}   
  
.voiture  .contact:before{
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    height: calc(20px + 9px);
	width: 4px;
    border-radius: 3px;
    background: linear-gradient(white, black);
    border: solid 1px white;
	position: absolute;
	left: calc(15%);
	right: auto;
	top:-26px;
	border-radius: 3px;
}



.voiture  .contact:after{
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    height: calc(20px + 9px);
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(white, black);
	border: solid 1px white;
	position: absolute;
	left: auto;
	right: calc(15%);
	top:-26px;
	border-radius: 3px;
}

.bean.disponible  .contact:before, .bean.disponible  .contact:after{
	    background: linear-gradient(white, green);
	
}
.bean.indisponible  .contact:before, .bean.indisponible  .contact:after{
	    background: linear-gradient(white, #990000);
	
}
.bean.rentrant  .contact:before, .bean.rentrant  .contact:after{
	    background: linear-gradient(white, #ff6666);
	
}

aside > .bean{
 position: -webkit-sticky;
	position: sticky;
	transform: translateY(50px);
		top: 60px;
}


.update-image-btn{ 
	display: none;
}

.image-fiche-div button{
		position: absolute;
		border: none;
		outline: none;
		background: none;
		right: 20px;
		top: 20px;		
	}
	
.image-fiche-div button:hover i{
  		transform: scale(1.3);
  		color: white;
}


  .bean .image-fiche-div{
	position: absolute; 
	top: 0; 
	left: 10px; 
	transform: translateY(-50%);
	width: 100px;
	height: 100px;
  border: 5px solid white;
  background: inherit;
  border-radius: 50%;
}

.client .image-fiche-div{
	left: 50%;
	transform: translate(-50%,-50%);
	
}
.image-fiche-div .image-ronde{
	margin: auto;
	width: 100%;
	height: 100%;
}  



.chercher-template{	
	position: relative;
 background-repeat: no-repeat;
  background-size: cover;
  background-position:  center center;
  width: calc(100% - 20px);
	max-width: 728px;
	height: auto;
	margin-top: 20px;
	display: flex;
	flex-direcrtion: row;
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 3px;
}



 /* Style the tab */
.tab {
  background-color: #990000;
  position: -webkit-sticky;
	position: sticky;
	top: 125px;
	z-index: 2;
  	margin: 0px 0px 25px 0px;
  	padding: 5px;
  	display: flex;
  	
}	


/* Style the buttons that are used to open the tab content */
.tab button {
	display: block;
	position: relative;
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 10px 4px 10px;
  margin: 0 5px 0 5px;
  transition: 0.3s;
  border-radius: 3px;
  width: 80px;
  color: white;
  font-weight: bold;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #414854;
}

.tab button.active {
  background-color: white;
    	box-shadow: 2px 15px 10px 2px rgba(0, 0, 0, 0.3);	
  	color: black;
}

/* Create an active/current tablink class */
.tab button.active:after {
  	content: '';
    height: 0;
    width: 0;
        border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 15px solid white;
    
    left: 50%;
   	transform: translateX(-50%);
   	top: 100%;
    position: absolute;
    display: block;
      	z-index: 10;
}


.tabcontent {	
	
	  display: none;  
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}






/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
} 

.tabcontent .div-table-tab {
	display: table;
	border: none;
	outline: none;
	box-sizing: border-box;
	background-color: white;
	width: 100%;
	horizontal-align: middle;
	 text-align: center;
}

.location{	
	position: relative;
	flex-direction: row;
		width: 330px;		
	height: 280px;	
		max-height: 280px;	
		min-height: 280px;	
		max-width: 330px;
				min-width: 330px;
	padding: 0 10px 10px 10px ;
	border: 1px solid #ddd;
	border-radius: 5px;
	margin: 10px 5px 10px 5px;
	text-align: left;
}

.facture{	
	position: -webkit-sticky;
	position: sticky;
	top: 60px;
		width: 370px;		
	height: auto;	
		max-height: calc(100vh - 75px);	
		min-height: 300px;	
		max-width: 370px;
				min-width: 370px;
	padding: 0 0px 0px 0px ;
	border: 1px solid #ddd;
	border-radius: 5px;
	margin: 10px 10px 10px 5px;
}

.facture #div-introuvable > *{
   visibility: hidden;
}

.facture.cache  *{
   visibility: hidden;
}

.facture.cache  #div-introuvable > *{
   visibility: visible;
}

.facture h1{
	margin: 10px 5px 0px 5px;
	font-size: 2.5em;
	background: #990000;
	color: white;
	border-radius: 5px;
	padding: 5px 10px 5px 10px;
}




.facture .etape-info{
	font-weight: bold;
	color: #383838;
	float: right;
	display: inline-flex;
	flex-direction: column;
	padding: 3px 5px 3px 5px;
		margin: 10px;
	border-radius: 4px;
	cursor: pointer;
}

.bean .option-div{
	margin: 10px;
	border-radius: 5px;
}


.voiture-publicite .option-div i{
	margin: 0 5px 0 10px;
	color: #ff6666;
}

.bean .option-div label{
	background: inherit;
	color: black;
	border-radius: 3px;
	border: 1px solid #ccc;
	padding: 2px 5px 2px 5px;
}


.etape-info > * {
		cursor: pointer;
	
}

.etape-info:hover{
	color: black;
	background: #ccc;
}

.separator:before {
    content: '';
    display: block;
    margin: auto;
    left: 50%;
    height: 4px;
    position: absoulute;
    width: 150px;
    background: #990000;
    transition: width .8s ease, background-color .8s ease;
    -webkit-transition: width .8s ease, background-color .8s ease;
    -o-transition: width .8s ease, background-color .8s ease;
    -ms-transition: width .8s ease, background-color .8s ease;
    -moz-transition: width .8s ease, background-color .8s ease;
    margin-bottom: 5px;
}

.separator:after {
    width: 210px;
    display: block;
    margin: auto;
    content: "";
    height: 4px;
    background: #990000;
        position: absoulute;
    
    left: 50%;
    transition: width .8s ease, background-color .8s ease;
    -webkit-transition: width .8s ease, background-color .8s ease;
    -o-transition: width .8s ease, background-color .8s ease;
    -ms-transition: width .8s ease, background-color .8s ease;
    -moz-transition: width .8s ease, background-color .8s ease;
    margin-bottom: 10px;

}



.div-gauche-location{
	//background-color: black;
	color: black;
	padding: 5px;
	width: 185px;
		min-width: 185px;		
	
}

.div-gauche-location > label{
	font-weight: bold;
}

.div-droite-location{
	position: relative;
	padding: 10px;
	flex-grow: 1;
}

.div-liste-champs{
	display: flex;
	position: relative;
	margin: 6px 10px 6px 10px;
	font-weight: bold;	
	font-size: 14px;
	
}

.div-liste-champs:before {
    content: '';
    display: block;
    position: absolute;
    margin: auto;
    height: 18px;
    border-radius: 3px;
    width: 3px;
    left: -10px;
    top: 50%;
    transform: translate(0%,-50%);
    background: linear-gradient(black, white 90%, black);
}


.bean.disponible .div-liste-champs:before{
	    background: linear-gradient(green, black 90%, green);	
}

.bean.indisponible .div-liste-champs:before{
	    background: linear-gradient(#990000, black 90%, #990000);	
}

.bean.rentrant .div-liste-champs:before{
	    background: linear-gradient(#ff6666, black 90%, #ff6666);	
}


td.disponible{
	color: green;
	
}

td.indisponible{
	color: red;
}


td.rentrant{
	color: #ff6666;
}


.bean-div {
	display: flex;
  flex-direction: row;
  align-content: flex-start;
	flex-wrap: wrap;
	justify-content: center;
	overflow-x: hidden;
	border: none;
	outline: none;
		width: 100%;
		height:auto;
}

.situation-bean{
	display: block;
	position: absolute;
	left: 20px;
	bottom: 5px; 
		margin: 5px 5px 0px 0px;
	
	font-weight: bold;
	   border: none;
  	outline: none;	 
    border-radius: 4px;
    background: #f9f9f9;
  	text-align: center;
  	color: #990000;
	font-size: 26px;
	width:auto;
}


.champs-justifie {
	width: 90px;
		max-width: 90px;
		min-width: 90px;
	
	text-align: justify;
	text-justify: inter-word;
	text-align-last: justify;
	margin-right: 5px;
		color: grey;
		
	
}

.location .champs-justifie{
		width: 60px;
	max-width: 60px;
		min-width: 60px;
}

.client .champs-justifie{
		width: 80px;
	max-width: 80px;
		min-width: 80px;
}

.voiture .champs-justifie{
		width: 72px;
	max-width: 72px;
		min-width: 72px;
}


.timeline{
  margin-top:20px;
  position:relative;
}

.timeline:before{
  position:absolute;
  content:'';
  width:4px;
  height:calc(100% - 5px);
background: var(--main-color-background);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a9196', endColorstr='#62696d',GradientType=1 );
  left:14px;
  top:5px;
  border-radius:4px;
}



.timeline-month{
  position:relative;
  padding:4px 15px 4px 35px;
  background-color:#444950;
  color: white;
  display:inline-block;
  width:auto;
  border-radius:40px;
  border:1px solid #17191B;
  border-right-color:black;
  margin-bottom:30px;
}

.timeline-month span{
  position:absolute;
  top:-1px;
  left:calc(100% - 10px);
  z-index:-1;
  white-space:nowrap;
  display:inline-block;
  background-color:#111;
  padding:4px 10px 4px 20px;
  border-top-right-radius:40px;
  border-bottom-right-radius:40px;
  border:1px solid black;
  box-sizing:border-box;
}

.timeline-month:before{
  position:absolute;
  content:'';
  width:20px;
  height:20px;
background: black;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a9196', endColorstr='#70787d',GradientType=0 );
  border-radius:100%;
  border:1px solid #17191B;
  left:5px;
  top: 0;
  bottom:0;
}

.timeline-section{
  padding-left:35px;
  display:block;
  position:relative;
  margin-bottom:30px;
}

.timeline-date{
  margin-bottom:15px;
  padding:2px 15px;
  background:linear-gradient(#74cae3, #5bc0de 60%, #4ab9db);
  position:relative;
  display:inline-block;
  border-radius:20px;
  border:1px solid #17191B;
  color:#fff;
text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
.timeline-section:before{
  content:'';
  position:absolute;
  width:30px;
  height:2px;
  background-color:#444950;
  top:12px;
  left:20px;
}

.timeline-section:after{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:linear-gradient(to bottom, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
  top:7px;
  left:11px;
  border:1px solid #17191B;
  border-radius:100%;
}


.menu-wrapper {
	position: relative;
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	background: white;
	background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;	
  padding: 10px 10px 0px 10px;
	transition: all 300ms;	
	
	}
	
.menu-wrapper.publicite-wrapper{
	border-width: 1px 0px 1px 0px;
	border-style: solid;
	border-color: grey; 
	
}	
	
.menu-wrapper.voiture-wrapper {
	height: 410px;
}	

.menu-wrapper.voiture-wrapper.publicite-wrapper {
	height: 400px;
}	

.menu-wrapper.client-wrapper {
	height: 455px;
}

.menu-wrapper.location-wrapper {
	height: 290px;
}	
	



.menu-wrapper.disponible::before{
	
	background:green;
}

.menu-wrapper.indisponible::before{
	
	background:#990000;
}

.menu-wrapper.rentrant::before{
	
	background:#ff6666;
}

	

.story-div .bean.active {
		transform: scale(1.1) translateY(20px);
		  transition: all 300ms;	
		  	
}

.story-div .bean.active.disponible .btn-table{
	display: inline-block;
}


.menu-wrapper.voiture-wrapper.active{
		height: 455px;
	transition: all 100ms;
	
}	

.menu-wrapper.client-wrapper.active{
		height: 495px;
	transition: all 100ms;
	
}	

.story-div.selectionner{
	height: calc(100% + 20px);
		transition: all 100ms;
	
}	

.story-div .bean {
  
    box-sizing: border-box;
	border: 1px solid #ddd;
	top: 45px;	
	transition: all 300ms;
	 -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    	 overflow-wrap: break-word;
	 word-wrap: break-word;
	 hyphens: auto;
	
}

.story-div .location {
  
    box-sizing: border-box;
	box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.2);	
	transition: all 300ms;
	 -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
}

		.avantage-entreprise-div-parent{
	display: flex;
	flex-direction: row;
	align-items: stretch;
    justify-content: center;
    	padding: 35px 20px 35px 20px;
    	background: #fafaf9;
	text-align: center;

	}
.avantage-entreprise-div{
	position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 330px;
		min-width: 280px;		
	overflow: hidden;
	padding: 10px;
	margin: 20px;
	border-radius: 5px;
	  transition: background-color 0.5s;
	  background: #f0f0f0;
	
	
	}


	.avantage-entreprise-div:hover{
	    background: #00c6f0;
	
	}
	
	



.avantage-entreprise-div p{
	display: block;
	flex-grow: 1;
	color: black;
	padding: 5px 5px 5px 5px;
  	animation: hautEffect .5s;
  	font-size: 1.1em; 
  	text-align: justify;
	text-justify: inter-word;
}

.avantage-entreprise-div h3{
	display: block;
	color: #2a4045;
	margin: 10px 0px 10px 0px;
  	animation: hautEffect .5s;
  	font-size: 1.5em;
  			text-align: center;
  			height: 58px;
  	
  	 /* Fading effect takes 1 second */ 
}


.avantage-entreprise-div-image{
	position: relative;
	margin-bottom: 10px;
	width: 180px;
	height: 160px;
	text-align: center; 
}	

	@media all and (max-width: 1100px)
{
.avantage-entreprise-div-parent{
	flex-direction: column;
	justify-content: stretch;
	align-items: center;
}

	}

	
	@keyframes hautEffect {
  from {bottom: -100%;}
  to {bottom: 0;}
} 


	

.marque-logo-parent{
	 height: 120px; 
	 width: 450px;
	 overflow: hidden;
	 padding-top: 10px;
}
.marque-logo{
	position: absolute;
	background: white; 
	 padding: 3px 10px 3px 10px; 
	 display: block; 
	 text-align: center; 
	 bottom:0;
	 right: 0;
	 margin: 5px;
	 border-radius: 3px;
	 max-height: 120px;
	  	 overflow: hidden;
	  

}

.marque-logo img{
	max-width: 48px;
	max-height: 48px;
	margin: 0 2px 0 2px;
}

.avantage-entreprise-div-image img{
	
		position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
		transition: 1s ease-in-out;
	
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
		
	}

.story-div .bean *, .story-div .location *{
    cursor: pointer;
}


.story-div.pub .bean *:not(button), .story-div .location *:not(button){
    cursor: inherit;
}



.story-div	{
	height: calc(100% + 20px);
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	
	white-space: nowrap;
		overflow-y: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
   		transition: all 300ms;
   
}

.story-div.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
  }

.paddles {
}
.paddle {
	position: absolute;
	top: 50%;
	transform: translate(0%,-50%);		
	color: black;
	padding: 10px;
	border-radius: 50%;
	background: none;
	opacity: 0.3;
	outline: none;
	border: none;
	font-size: 50px;
	font-weight: bold;
    text-shadow:0px 5px 10px rgba(0, 0, 0, 0.8);
    z-index: 1;
	
}



.paddle:hover{
	opacity: 1;	
}
.left-paddle {
	left: 5px;
}
.right-paddle {
	right: 5px;
}
.hidden {
	display: none;
}



blockquote {
  background: white;
  border-left: 10px solid #990000;
  padding: 0.5em 10px;
  margin-left: 10px;
  quotes: "\201C""\201D""\2018""\2019";
  		max-width: 600px;
  		  		mix-width: 300px;
  		padding-top: 5px;
  		text-align: left; 
  		flex-grow: 1; 
  		border-radius: 5px;	
}
blockquote:before {
  color: #990000;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}



.wizard {
	display: flex;
	flex-direction: column;
    overflow: hidden;
    flex-grow:1;
    background: white;
    	background: url('fond/car-back2.jpg') fixed;
	background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.tab-content th{
	top: 0;
}


.wizard-inner .nav-tabs {
	position: relative;
	display: flex;
	flex-direction: row;
	
	left: 50%;
	transform: translate(-50%);
      width: calc(100% - 20px);
      max-width: 600px;
      height: auto; 
      background: white;
      border-radius: 5px;
      padding: 5px 15px 5px 15px;
}
.wizard .wizard-inner {
	
	display: flex;
	flex-direction: row;
    width: 100%;
    height: 80px; 
    padding: 10px;
    }



.tab-content{
	   flex-grow: 1;
	 
}


.disabled a{
	cursor:  not-allowed;
}


.connecting-line{
    height:10px;
    background: #e0e0e0;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    z-index: 1;
    
}

.active .connecting-line{
    background-color: #990000;
    
}
.connecting-line.border-right{
    border-radius: 0px 15px 15px 0px;
}
.connecting-line.border-left{
    border-radius: 15px 0px 0px 15px;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    cursor: default;
    border: 0;
    color:#990000;
    border-bottom-color: transparent;
}


.prev-step:hover, .next-step:hover{
	opacity: 1;
}


span.round-tab {
    width: 50px;
    height: 50px;
    line-height: 30px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index:1;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: 25px;
    background: white;
    background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.wizard li.active span.round-tab{
    color:white;
    border: 2px solid #990000;
}
span.round-tab:hover{
    color: black;
}
.wizard .nav-tabs > li {
    width: 20%;
    position: relative;
    top: 50%;
    transform: translate(-0%,-50%);
}
.wizard .nav-tabs > li a{
    width: 50px;
    height: 50px;
    margin: 20px auto;
    border-radius: 100%;
    padding: 0;
    color: black;
}



.tab-content .tab-pane {
    position: relative;
    display: none;    
    flex-grow: 1;
}

.tab-content .tab-pane.active {
		display: block;
	}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}


.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 300;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
  position: relative;
}

.autocomplete-items .image-ronde{
	margin: 0;
}

.autocomplete-items label:nth-child(even){
	
	margin-left: 10px;
}

.autocomplete-items label:nth-child(odd){
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 auto;

}

.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

.table-div-child{
	overflow: auto; 
	flex-grow: 1;
}

.table-div-child h2,.tabcontent > h2{
	color: grey;
	margin: 10px;
	
}

.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}


.chart-template{
		display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: calc(100% - 40px);
	 border-radius: 4px;
    margin: 20px auto;
    background: white;
    border-radius: 5px;
    border: 1px solid #ccc;
    align-items: center; 
}





.toolip{
	
	background: white;
	color: black;
	font-weight: bold;
	font-size: 16px;
	padding: 2px 5px 2px 5px;
	
	width: 150px;
	margin: 0;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes sonar {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/*----------------page-wrapper----------------*/

.page-wrapper {
  height: 100vh;
}

.page-wrapper .theme {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 4px;
  margin: 2px;
}

.page-wrapper .theme.chiller-theme {
  background: #1e2229;
}

/*----------------toggeled sidebar----------------*/

.page-wrapper.toggled .sidebar-wrapper {
  left: 0px;
}

@media screen and (min-width: 768px) {
  .page-wrapper.toggled .page-content {
    padding-left: 260px;
  }
}




 .contacter-menu{
	
	display: none;
	
	border-radius: 5px;
	
}

@media  (max-width: 890px)


{

	.entete h1{
	display: none;
}

.menu-publicite-div li:not(#hidden-menu):not(.contacter-menu){
	display: none;
}

.contacter-menu{
	
	display: block;
}

.entete #contacter-nav{
	display: none;
}

}



.menu-publicite-div{
	position:absolute;
	top: 0;
	z-index: 4;
	height: 45px;
	background: none;
	color: white;
	transition: 0.3s ease-in-out;
}



.slider-wrapper .menu-publicite-div{
			position: absolute;
	top: 0px;
}

.menu-publicite-div.sticked
{
	
	position: fixed;
	background: white;
		box-shadow: 0 1px 6px 0 rgba(32,33,36,.28);
		color: black;
}


.menu-publicite-div  a img{
	max-width: 16px;
	max-height: 30px;
	
}

.menu-publicite-div .sidenav a img{
	margin-right: 5px;
	margin-left: 5px;
	max-width: 30px;
	max-height: 16px;
	
}


/*----------------show sidebar button----------------*/
#show-sidebar {
  position: fixed;
  left: 0;
  top: 10px;
  border-radius: 0 4px 4px 0px;
  width: 35px;
  transition-delay: 0.3s;
}
.page-wrapper.toggled #show-sidebar {
  left: -40px;
}
/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
  width: 260px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: -300px;
  z-index: 999;
}

.sidebar-wrapper ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-wrapper a {
  text-decoration: none;
}

/*----------------sidebar-content----------------*/

.sidebar-content {
  max-height: calc(100% - 30px);
  height: calc(100% - 30px);
  overflow-y: auto;
  position: relative;
}

.sidebar-content.desktop {
  overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/

.sidebar-wrapper .sidebar-brand {
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.sidebar-wrapper .sidebar-brand > a {
  text-transform: uppercase;
  font-weight: bold;
  flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
  cursor: pointer;
  font-size: 20px;
}
/*--------------------sidebar-header----------------------*/

.sidebar-wrapper .sidebar-header {
  padding: 20px;
  overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic {
  float: left;
  width: 60px;
  padding: 2px;
  border-radius: 12px;
  margin-right: 15px;
  overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
  float: left;
}

.sidebar-wrapper .sidebar-header .user-info > span {
  display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-role {
  font-size: 12px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status {
  font-size: 11px;
  margin-top: 4px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status i {
  font-size: 8px;
  margin-right: 4px;
  color: #5cb85c;
}

/*-----------------------sidebar-search------------------------*/

.sidebar-wrapper .sidebar-search > div {
  padding: 10px 20px;
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
  padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu .header-menu span {
  font-weight: bold;
  font-size: 14px;
  padding: 15px 20px 5px 20px;
  display: block;
 
}

.sidebar-wrapper .sidebar-menu ul li a {
  display: block;
  width: 100%;
  text-decoration: none;
  position: relative;
  padding: 8px 30px 8px 20px;
}

.sidebar-wrapper .sidebar-menu ul li a i {
  margin-right: 10px;
  font-size: 12px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
}

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
  display: inline-block;
  animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  right: 15px;
  top: 14px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 5px 0;
}



.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
  padding-left: 25px;
  font-size: 13px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 10px;
  font-size: 8px;
}

.sidebar-submenu li a.active:before {
 content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 1000;
  font-style: normal;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 10px;
  font-size: 20px;
  color: red;
  transform:scale(1.5);
}


.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
  float: right;
  margin-top: 8px;
  margin-left: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
  float: right;
  margin-top: 0px;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
  display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  right: 17px;
}

/*--------------------------side-footer------------------------------*/

.sidebar-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
}

.sidebar-footer > a {
  flex-grow: 1;
  text-align: center;
  height: 30px;
  line-height: 30px;
  position: relative;
}

.sidebar-footer > a .notification {
  position: absolute;
  top: 0;
}

.badge-sonar {
  display: inline-block;
  background: #980303;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  position: absolute;
  top: 0;
}

.badge-sonar:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid #980303;
  opacity: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: sonar 1.5s infinite;
}

/*--------------------------page-content-----------------------------*/

.page-wrapper .page-content {
  display: block;
  width: 100%;
  min-height: 100vh;
   max-height: 100vh;
  
}

.btn-statut{
	 background-color: #f9f9f9;
  border: none;
  cursor: pointer;
  margin:2px;
  outline: none;
  padding: 5px 10px 5px 10px;
  border-radius: 4px;
  	color: white;
  	width: 72px;
  
}

.attente{
	background-color:orange;
}

.indesirable{
	background-color:black;
}

.traite{
	background-color:green;
}

.annule{
	background-color:red;
}



.page-wrapper .page-content {
  overflow-x: hidden;
}

/*------scroll bar---------------------*/

.chiller-theme .sidebar-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 7px;
}
.chiller-theme .sidebar-wrapper::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
.chiller-theme .sidebar-wrapper::-webkit-scrollbar-thumb {
  background: #525965;
  border: 0px none #ffffff;
  border-radius: 0px;
}
.chiller-theme .sidebar-wrapper::-webkit-scrollbar-thumb:hover {
  background: #525965;
}
.chiller-theme .sidebar-wrapper::-webkit-scrollbar-thumb:active {
  background: #525965;
}
.chiller-theme .sidebar-wrapper::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none #ffffff;
  border-radius: 50px;
}
.chiller-theme .sidebar-wrapper::-webkit-scrollbar-track:hover {
  background: transparent;
}
.chiller-theme .sidebar-wrapper::-webkit-scrollbar-track:active {
  background: transparent;
}
.chiller-theme .sidebar-wrapper::-webkit-scrollbar-corner {
  background: transparent;
}


/*-----------------------------chiller-theme-------------------------------------------------*/

.chiller-theme .sidebar-wrapper {
    background: #31353D;
}

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
    border-top: 1px solid #3a3f48;
}

.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    border-color: transparent;
    box-shadow: none;
}

.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand>a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer>a {
    color: #818896;
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand>a:hover,
.chiller-theme .sidebar-footer>a:hover i {
    color: #b8bfce;
}

.page-wrapper.chiller-theme.toggled #close-sidebar {
    color: #bdbdbd;
}

.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
    color: #ffffff;
}

.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
    color: #16c7ff;
    text-shadow:0px 0px 10px rgba(22, 199, 255, 0.5);
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    background: #3a3f48;
}

.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
    color: #6c7b88;
    
}

.header-menu{
	display: block;
}

.chiller-theme .sidebar-footer {
    background: #3a3f48;
    box-shadow: 0px -1px 5px #282c33;
    border-top: 1px solid #464a52;
}

.chiller-theme .sidebar-footer>a:first-child {
    border-left: none;
}

.chiller-theme .sidebar-footer>a:last-child {
    border-right: none;
}

.btn-sm{
	z-index:100;
	position: absolute;
	transform: translateY(100px);
}

.badge {
  position: absolute;
  top: 0px;
  right: -5px;
  width: 25px;
    height: 25px;
  text-align: center;
  maring:0 auto;
  border-radius: 50%;
  background: red;
  color: white;
  z-index: 2;
  vertical-align: middle;
  line-height: 25px;
}

.div-nav-notification-parent{
	overflow: auto;
}




.nav-notification{
	background:white;
	max-height: calc(100vh - 65px); 
	width: 260px;
		min-width: 260px;
		max-width: 260px;
}



.nav-notification:after {
  	content: '';
    height: 0;
    width: 0;
        border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #dfe1ee;
    right: 43px;
   	top: -15px;
    position: absolute;
    display: block;
     z-index: 10;
}

.nav-notification a{
	margin:0;
	padding: 0;
	color: #ff6666;
	font-size: 0.9em;
	text-decoration: underline;
	position: relative;
	transform: translateY(11px);
	
}

.nav-notification a:hover{
	color: #ff6666;
	background: inherit;
}

.div-nav-notification-parent{
	flex-grow:1;
	overflow: auto;
	width: 100%;
}


.div-nav-notification{
		cursor: pointer;
	display: flex;
	flex-direction: row;
	position: relative;
	align-items: center;
	padding: 5px 15px 0px 5px;
	border-width: 1px 0 0px 0;
	border-style: solid;
	border-color: #ccc;
		min-height: 60px;
		width: 100%;
		overflow: hidden;
	background-color: white;
}

.div-nav-notification > div{
	flex-grow: 1;
}

.div-nav-notification  * {
	cursor: inherit;
}

.div-nav-notification .titre-notification{
			color: black;
	
	font-weight: bold;
	font-size: 15px;
	display: block;
}

.div-nav-notification .sous-titre-notification{
	font-weight: bold;	
	font-size: 12px;
			color: #484848;
	display: block;
}

.div-nav-notification .date-notification{
	font-weight: bold;	
	font-size: 12px;
			color: #990000;
	display: block;
	float: right;
	margin-top: 5px;
}

.div-nav-notification:nth-child(even) {
	background-color: #fafafa;
}

.div-nav-notification:hover {
	background-color: #dfe3ee;
}

.nav-notification-entete button{
	border: none;
	outline: none;
	background: white;	
	border-radius: 3px;	
	cursor: pointer;
}

.nav-notification-entete button:not(last-child){
		margin-right: 5px;
	}

.nav-notification-entete button.active{
	background: #990000;	
	color: white;
	font-weight: bold;

	}
	
.nav-notification-entete{
	
	color: black; 
	padding: 10px 15px 10px 15px; 
	width: 100%; 
	
}	

nav .nav-notification-entete{
	background: #dfe1ee; 	
}

.nav-notification-entete button:not(.active):hover{
	
	background: #ccc;	
	color: black;	
}



.accueilspan{
	cursor: pointer;
	font-size: 25px;
	border: none;
	outline: none;
	
	font-family: inherit;
	display: block;
		padding: 2px 10px 2px 10px;
	
	font-weight: bold;
	  border-radius: 5px;
  height: 25px;
  margin: 10px 10px 10px 10px;
  display: flex;
  flex-direction: row;
  	align-items: center;
  
  
}

.menu-publicite-div .accueilspan{
	 -webkit-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
    font-size: 3em;
}

.sidenav {
  height: calc(100vh - 45px);
  width: 100%;
  
  position: fixed;
  z-index: 20;
  top: 45px;
  right: -100%;
		background: linear-gradient(black 50%,rgb(0,0,0,0.9),rgb(0,0,0,0.8),rgb(0,0,0,0.7),rgb(0,0,0,0.6));
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
    	color: white;
  padding-left: 20px;
  			transition: 0.3s ease-in-out;
  	  	border-top: 1px solid grey; 
  
}


.menu-publicite-div.sided{
	background: black;
}

.menu-publicite-div.sticked.sided{
	background: white;
}

.menu-publicite-div.sticked .sidenav{
		background: linear-gradient(white 50%,rgb(255,255,255,0.9),rgb(255,255,255,0.8),rgb(255,255,255,0.7),rgb(255,255,255,0.6));
	  	border-top: 1px solid grey; 
	  	color: black;
	  	
	
}

.sidenav h1{
	display: block;
	margin-bottom: 20px;
	padding: 20px;
	
}

.menu-publicite-div ul .titre-societe{
	
	font-size: 1.5em;
	display: block;
	height: 45px;
	line-height: 45px;
}

.menu-publicite-div
 .sidenav .titre-societe{
	display: block;
	text-align: left;
	padding: 0px 0px 2px 5px;
	
	font-size: 2.8em;
		
	
}


.div-sidenav{
	
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	overflow: auto;
	width: 100%;
	align-items: flex-start;
	justify-content: flex-start;
	
}
.sidenav a {
  padding: 8px 32px 8px 32px;
  text-decoration: none;
  width: auto;
  transition: 0.3s;
  color: white;
}

.menu-publicite-div.sticked .sidenav a {
	  color: black;
	
}

.menu-publicite-div.sticked .sidenav a:hover {
	  color: grey;
	
}

.sidenav a:hover {
  
  	  color: #f1f1f1;
  
}

.sidenav .closebtn {
	  padding: 0;
	
  position: absolute;
  top: 0px;
  right: 30px;
  
  font-size: 80px;
}

.sidenav .closebtn-ar {
	  padding: 0;
	
  position: absolute;
  top: 0px;
  left: 30px;
  
  font-size: 80px;
}


.temoignage-div-parent{
	width: 100%;
	display: flex;
	flex-direction: row;
		justify-content: center;
		
	position: relative;
	padding: 30px;
	background: none; 
}





.temoignage-div{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(33.33333% - 60px);
	max-width: 300px;
 background-repeat: no-repeat;
  background-size: cover;
  background-position:  center center;
	padding: 20px 20px 20px 20px;
	margin: 20px 10px 20px 10px;
	color: white;
	border: 1px solid #484848;
	border-radius: 3px;
	background: rgb(0,0,0,0.2);
	
}


.temoignage-div:hover{
		box-shadow: 0px 6px 16px 0px rgba(255, 255, 255, 0.2);
	
}

.temoignage-div > h1{
	font-size: 1.5em;
	
}

.temoignage-div > h2{
	font-size: 0.9em;
	color: 	#ff6666;
	
}

.temoignage-div > p{
	text-align: justify;
	text-justify: inter-word;
	padding: 30px 0 30px 0;
	flex-grow: 1;
}



.temoignage-div-image{
	width: 120px;
	height: 120px;
	border-radius: 50%;
 	overflow: hidden;
}
.temoignage-div-image img{
	width: auto;
	height: auto;
	max-height: 100%;
	max-width: 100%;
}
.titre-section{
	background: #1E1E1E;
	padding: 10px;
}

.titre-section h1{
	color: white;
	font-size: 1.1em;
}



@media all and (max-width: 1000px){
.temoignage-div{
	width: calc(100% - 20px);
}
.temoignage-div-parent{
	flex-direction: column;
	align-items: center;
}
	}
	
.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}

.contacter-nav i{
	margin-left: 2px; 
	margin-right: 2px;
	color: #ff6666;
}

.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}

 

.maroc-que-jaime{
	position: relative;
	background-repeat: no-repeat;
 
	min-height: 200px;
	background: #00c6f0;
	display: flex;
	flex-direction: row;
	position: relative;
		align-items: flex-end;
}


.maroc-que-jaime.city{
	
	min-height: 500px;
	background: linear-gradient(#f9f9f9,#f9f9f9, white);
	cursor: pointer;
	
}


  


.maroc-que-jaime .div-text{
	
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: stretch;
}

.maroc-que-jaime .div-image{

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.maroc-que-jaime  .div-image{
	max-width:650px;
	max-height:500px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.maroc-que-jaime.city  .div-image{
	max-width:615px;
	max-height:400px;
}

.maroc-que-jaime  .div-image img{
	max-width: 100%;
	max-height: 100%;
	
}

.maroc-que-jaime .div-text h1{
	display: block;
	text-align: center;
	color: #2a4045;
	padding: 10px;
	margin-top: 30px;
	font-size: 2.5em;
	z-index:1;
}

.maroc-que-jaime.city .div-text h1{
		margin-top: 0px;
		margin-bottom: 30px;
	
}

.maroc-que-jaime .div-text p{
	display: block;
	color: #2a4045;
	padding: 10px;
		font-size: 1.2em;
	
	margin-top: 20px;
		z-index:1;
	
}

.maroc-que-jaime.city .div-text p{
	
	
	
	margin-top: 0px;
		margin-bottom: 15px;
	
}

.maroc-que-jaime .div-text .gps{
	max-height: 200px;
	max-width: 200px;
}

@media only screen and (max-width: 1200px) {
 .maroc-que-jaime {
 	
 	flex-direction: column;
 				align-items: center;

 	
 
 }
 
 .maroc-que-jaime > img{
	width:calc(100% - 20px);
	height:auto;
}
}




  @media only screen and (max-width: 1000px) {
 .maroc-que-jaime.city {
 	
 	flex-direction: column;
 		
 				align-items: center;
 }
 
 .maroc-que-jaime.city > img{
	width:calc(100% - 20px);
	height:auto;
}
}


.posez-question{
	background:#0e56ab;
	padding: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	color: white;
	justify-content: center;
	align-items: center;
	z-index:1;
}

.barniere-parent.titre2  .posez-question,.barniere-parent.titre  .posez-question{
	
	border-radius: 5px;
	
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 30px;
	}

.posez-question h1{
	margin: 10px;
}
.posez-question h2{
	margin: 10px;
}

       @media only screen and (max-width: 600px) {
 .message-publicite h1{
		font-size: 1.6em;
	
}



.condition-contrat{

	margin: 10px 5px 10px 5px;
}

.ville-monument{
	margin: 20px 5px 20px 5px;
}

.titre-societe {
	
	font-size: 2.8em;
}

.titre-separator{
	font-size: 1.4em;
}

.maroc-que-jaime.service .div-image-icone{
	width: 42px;
	height: 42px;	
}

.maroc-que-jaime.centre.service .div-image-icone-parent-child {
    max-width: 90px;
}

.posez-question {
	
	padding-top: 2px;
	padding-bottom: 2px;
}

.barniere-parent.titre2 .posez-question,.barniere-parent.titre .posez-question {
	margin-left: 10px;
	margin-right: 10px;
}

.posez-question h1{
		font-size: 1.1em;
}
.posez-question h2{
		font-size: 1.3em;
}

.maroc-que-jaime.centre.module > .div-image{
	max-height: 150px;
	min-height: 150px;
}



}


.titre-separator{
	position: relative;
}

.titre-separator:before{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
   	left: calc(-40vw + 50% - 10px);
   	
    width: calc(40vw - 50% - 10px);
    height: 1px;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(50%, rgba(215, 215, 215, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}


.titre-separator:after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
   	left: calc(100% + 10px);
   	
    width: calc(40vw - 50% - 10px);
    height: 1px;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(50%, rgba(215, 215, 215, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(215, 215, 215, 1) 50%, rgba(255, 255, 255, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}