html {
  scroll-behavior: smooth;
}

body
{
  background-color:#0d101c;
  font-family: 'Open Sans', sans-serif;
  color: rgba(255, 255, 255, 0.7); /*#BDBDC2;*/
  text-align: justify;
}

#titre
{
  font-size: 30px;
  font-weight:300;
  margin:auto;
  text-align: center;
  margin-bottom: 50px;

}
#banniere{
   
    height: 500px;
    background-image: url(vampire.jpg);
    background-repeat: no-repeat;
    background-position: top;
}
#contexte{
	width: 800px;
    margin: 0 auto;
	
	
}

#demographie_pic
{
width: 100%;
height: auto;
background-image: url("Demographie.png");
}

.container{
			width: 800px;
			margin: 0 auto;
		}



		ul.tabs{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		ul.tabs li{
			background: none;
			color:  white ; /*#BDBDC2;*/
			opacity: 0.7;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
		}

		ul.tabs li.current{
			background: #191E33;
			color:  white ; /*#BDBDC2;*/
			opacity: 0.7;
		}

		.tab-content{
			display: none;
			background: #191E33;
			padding: 15px;
		}

		.tab-content.current{
			display: inherit;
		}
		
		
.jqp-fr-r4-c4-h4-s1-BC { 
    padding: 10px; 
    border: 4px double #333333; 
    background-color: #A9A17A; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-wrapper { 
    border-color: #333333; 
    background-color: #6F6A53; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-piece { 
    border-color: #333333; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-piece:hover { 
    border-color: #EEEEEE; 
    border-style: solid; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls a { 
    border-color: #555555; 
    background-color: #6F6A53; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls a:hover { 
    background-color: #4F411D; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span,  
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span.jqp-disabled { 
    padding: 1px 10px; 
    border: 1px dotted #555555; 
    color: #333333; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span:hover { 
    background-color: #C9C19A; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC.jqp-solved .jqp-controls span { 
    padding: 1px 10px; 
    border: 1px dotted #555555; 
    border-color: #0F8F08; 
    background-color: #C9C19A; 
    color: #0F8F08; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span input, 
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span.jqp-disabled input { 
    background-color: #A9A17A; 
    color: #444444; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC.jqp-solved .jqp-controls span input { 
    background-color: #C9C19A; 
    color: #0F8F08; 
} 
 
.jqp-fr-r4-c4-h4-s1-BC .jqp-controls span:hover input { 
    background-color: #C9C19A; 
} .titre_reco{			background: #151A2C;			color:  white ; /*#BDBDC2;*/			opacity: 0.7;			display: inline-block;    padding: 10px 15px;    cursor: pointer;}.suggestion {			width: 800px;   			margin: 0 auto;	}		.fond_reco {		  background: #191E33;		      padding: 15px;	}		.suggestion a:link {  color: white;     }	 	 	.suggestion a:visited {  color: #645558;     }	 	.suggestion  a:hover {  color: #A58C91;}/* selected link */.suggestion  a:active {  color:  #A58C91;}		.foot {Height : 50px;}