/* BARRE haut => ------------------------------------------------------------------------------- */
/*body {
position:fixed;

}*/
.container
{
	font-size: 14px;
	font-family:Verdana, tahoma, arial;
	position:relative;
	background-color:#eee;
  border:1px #000 dashed;
  width:300px;
	height:350px;
	margin:0px;
	padding:0px;
}

#img-etape1, #img-etape2, #img-etape3
{
	font-size: 14px;
	font-family:Verdana, tahoma, arial;
	position:relative;
	background-color:#eee;
    border:1px #000 dashed;
    width:350px;
	height:350px;
	margin:0px;
	padding:0px;
}
#titre-img-etape2, #titre-img-etape3
{
	font-size: 12px;
	font-family:Verdana, tahoma, arial;
	color:#01B0F0;
	position:relative;
	height:20px;
    margin-bottom:20px;
}

#amis {
  height: 100vh;
  width: 250px;
  left: 0px;
  padding-top: 10px;
  background-color: #fff;
  position: absolute;
  z-index: 100;
  -webkit-transition: opacity 0.5s, left 0.5s;
  transition: opacity 0.5s, left 0.5s;
  border-right: 1px solid #999;
}

#open_window_friend {
  position: absolute;
  height: inherit;
  display: flex;
  right: 0;
  justify-content: center;
  top:100px;
}

#open_window_friend > div{
  width: 20px;
  height: 60px;
  color: #fff;
  font-size: 12px;
  padding: 10px;
  background: #EF6C00 ;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  position: absolute;
  left: 0;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  display: flex;
  justify-content: center;
  
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
  border-width: 2px 2px 2px 0;
  border-color: #333;
  border-style: solid;
  opacity:0.7;
}

#open_window_friend > div:hover{
  color: #333;
}

#btn_window_friend {
  cursor: pointer;
}


.amis::-webkit-scrollbar-track
{

  background-color: #ccc;
}


.amis::-webkit-scrollbar
{
  width: 7px;
  background-color: #ccc;
}

.amis::-webkit-scrollbar-thumb {

  border-radius: 15px;
  border-color: #999;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #ddd;

}