#player_sounds_DEUS_II{
	width:400px;
	margin: 0 auto;
}

.header_player{
	background: url("../imgs/player_header.png") 0 0 no-repeat;
	height: 71px;
	width: 400px;
	display: block;
}
.footer_player{
	background: url("../imgs/player_footer.png") 0 0 no-repeat;
	height: 71px;
	width: 400px;
	display: block;
	margin-top: 8px;
}


#zone_boutons_sounds{
	width:400px;
	padding: 8px 0;
}
#zone_boutons_change_type_sounds{
	background: url("../imgs/player_contenu.png") 0 0 no-repeat;
	width:400px;
	height: 137px;
	padding: 20px 50px;
}
#zone_liste_change_type_sound{
	border:1px solid #465863;
}
.scroller {
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #000 #FFF;
  scrollbar-width: thin;
  scrollbar-color: #000 #CCC;
}

.scroller::-webkit-scrollbar {
  width: 8px; /* width of the entire scrollbar */
}

.scroller::-webkit-scrollbar-track {
  background: black; /* color of the tracking area */
}

.scroller::-webkit-scrollbar-thumb {
  background-color: white; /* color of the scroll thumb */
  /*border-radius: 20px; /* roundness of the scroll thumb */
  /*border: 3px solid white; /* creates padding around scroll thumb */
}

.bouton_type_sound{
	color:#465863;
	font-size: 22px;
	margin:5px;
	cursor: pointer;
	text-align: center;
}
.bouton_type_sound:hover{
	color:#FFF;
}
.bouton_sound{
	width:30%;
	display:inline-block;
	height:100px;
	cursor: pointer;
	border: 1px solid #465863;
	margin-top:8px;
}
.legende_sound{
	font-size: 11px;
	color:#465863;
	text-align: center;
	line-height:11px;
}

.bouton_sound{
	margin-right: 5%;
}
.bouton_sound:last-child, .bouton_sound:nth-child(3){
	margin-right: 0% ;
}
.active_type_sounds{
	background: url("../imgs/player_roll_type.png") 0 0 no-repeat;
	color:#FFF;
}
.active_sound{
	border: 1px solid #FFF;
	color:#FFF;
}
.img_sound{
	animation: fade2 1s linear;
}


.active_sound .legende_sound{
	color:#FFFFFF;
}

#img_soundS0{
	background: url("../imgs/A0.png") 50% 50% no-repeat;
	display: block;
	width:100px;
	height: 100px;
	margin: 0 auto;
	opacity:0.5;
}
#img_soundS1{
	background: url("../imgs/A1.png") 50% 50% no-repeat;
	display: block;
	width:100px;
	height: 100px;
	margin: 0 auto;
	opacity:0.5;
}
#img_soundS2{
	background: url("../imgs/A2.png") 50% 50% no-repeat;
	display: block;
	width:100px;
	height: 100px;
	margin: 0 auto;
	opacity:0.5;
}
#img_soundS3{
	background: url("../imgs/A3.png") 50% 50% no-repeat;
	display: block;
	width:100px;
	height: 100px;
	margin: 0 auto;
	opacity:0.5;
}
#img_soundS4{
	background: url("../imgs/A4.png") 50% 50% no-repeat;
	display: block;
	width:100px;
	height: 100px;
	margin: 0 auto;
	opacity:0.5;
}


@keyframes fade2 {
  0%,100% { opacity: 0.5 }
  50% { opacity: 1;}
}

@media(max-width:600px){
.bouton_sound{
	vertical-align:top;
	margin-bottom:40px;
}
#player_sounds_DEUS_II{
	width:360px;
	margin: 0 auto;
}

.header_player{
	background: url("../imgs/player_header.png") 0 0 no-repeat;
	height: 71px;
	width: 360px;
	display: block;
	background-size:contain;
}
.footer_player{
	background: url("../imgs/player_footer.png") 0 0 no-repeat;
	height: 71px;
	width: 360px;
	display: block;
	margin-top: 8px;
	background-size:contain;
}
#zone_boutons_sounds{
	width:360px;
	padding: 8px 0;
}
#zone_boutons_change_type_sounds{
	background: url("../imgs/player_contenu.png") 0 0 no-repeat;
	width:360px;
	height: 137px;
	padding: 12px 50px;
	background-size:contain;
}
}