html, body {
  cursor: url("../../img/cursor/pointer.png"), auto;
}

a,
#temoignages-container a,
#facebook,
#youtube,
#std ,
#hcl,
alert span.close,
input#progressBar,
#audio #decollapse,
#audio #collapse,
#audio-config #play,
#audio-config #next,
#audio-config #prev,
#audio-config #silence,
#plus,
#moins,
#normal,
#Quit_fullscreen,
#Enter_fullscreen,
#fermer{
  cursor: url("../../img/cursor/pointer-clic.png"), auto;
}
#facebook{
bottom:25%;
left:0;
height:50px;
width:50px;
display:block;
z-index: 9999;
float:right;
position: fixed;
transition: all 0.2s ease;
}

#facebook a{
background: url("../../img/facebook-survol.png") no-repeat center center;
text-decoration:none;
background-size: contain;
min-height:50px;
min-width:50px;
display:block;
width:50px;
height:50px;
z-index: 9999;
float:left;
transition: all 0.2s ease;
}
#facebook a:hover{
background: url("../../img/facebook.png") no-repeat center center;
background-size: contain;
min-height:50px;
min-width:50px;
display:block;
width:50px;
height:50px;
z-index: 9999;
transition: all 0.2s ease;
}
#youtube{
bottom:33%;
left:0;
height:50px;
width:50px;
display:block;
float:left;
position: fixed;
z-index: 9999;
background-color: rgb(255,255,255);
transition: all 0.2s ease;
}
#youtube a{
background: url("../../img/YT-survol.png") no-repeat center center;
text-decoration:none;
background-size: contain;
min-height:50px;
min-width:50px;
display:block;
width:50px;
height:50px;
z-index: 9999;
float:left;
transition: all 0.2s ease;
}
#youtube a:hover{
background: url("../../img/YT.png") no-repeat center center;
background-size: contain;
min-height:50px;
min-width:50px;
display:block;
width:50px;
height:50px;
z-index: 9999;
transition: all 0.2s ease;
}
html body div#fullscreen-config{
width: 50px;
height: 50px;
position: fixed;
z-index: 10;
top: 9.5%;
right: 0;
display: block;
min-height: 50px;
min-width:50px;
z-index: 9999;
transition : all ease 0.5s;
} 
html body div#css-config{
width: 100px;
height: 50px;
position: fixed;
z-index: 10;
top: 40%;
right: 0;
display: block;
z-index: 9999;
transition : all ease 0.5s;
min-height:50px;
}
html body div#font-config{
width: 50px;
height: 150px;
position: fixed;
z-index: 10;
top: 30%;
right: 0;
display: block;
transition : all ease 0.5s;
}
html body div#css-config div,
html body div#font-config div,
html body div#fullscreen-config div{
min-width:50px;
min-height:50px;
width:50px;
height:50px;
display:block;
float: right;
transition: all 0.6s ease;
}

html body #font-config div#plus{
background: url("../img/font-plus-std.svg") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#moins{
background: url("../img/font-moins-std.svg") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#moins:hover{
background: url("../img/font-moins-std.svg") -50px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#plus:hover{
background: url("../img/font-plus-std.svg") -50px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#normal{
background: url("../img/font-normal-std.svg") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#normal:hover{
background: url("../img/font-normal-std.svg") -50px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
} 
html body div#font-config{
width: 50px;
height: 100px;
position: fixed;
z-index: 10;
top: 15%;
right: 0;
display: block;
z-index: 9999;
transition : all ease 0.5s;
}
html body div#audio div#audio-config{
width: 250px;
height: 50px;
bottom:50px;
text-align: center;
display: block;
transition : all ease 0.5s;
font-size:25px;
text-align:center;
line-height: 50px;
}
html body div#fullscreen-config div#Enter_fullscreen{
background-image: url("../img/std/fullscreen-std.png");
background-position: 0px 0px;
background-repeat: no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body div#fullscreen-config div#Enter_fullscreen:hover{
background-image: url("../img/std/fullscreen-std.png");
background-position: -50px 0px;
background-repeat: no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body div#fullscreen-config div#Quit_fullscreen{
background-image: url("../img/std/quit_fullscreen-std.png");
transition: all 0.6s ease;
background-position: 0px 0px;
background-repeat: no-repeat;
margin-right:-150px;
background-size:cover;
}
html body div#fullscreen-config div#Quit_fullscreen:hover{
background-image: url("../img/std/quit_fullscreen-std.png");
background-position: -50px 0px;
background-repeat: no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body div#audio  div#infos-audio{
width:250px;
display:block;
background-color:rgba(255,255,255,0.81);
height:250px;
clear:both;
transition : all ease 0.5s;
font-size:13px;
}
html body div#audio{
min-height:180px;
min-width:150px;
display:block;
bottom:0;
right:0;
z-index:9999;
position: fixed;
transition: all 1s ease;
}
html body div#audio div#decollapse{
display:none;
}
html body div#audio div#decollapse,
html body div#audio div#collapse{
top: 0;
left: 0;
min-height: 50px;
width: 50px;
height: 50px;
margin-left: 0px;
line-height: 50px;
float: left;
z-index:9999;
transition: all 0.6s ease;
clear: both;
}
html body div#audio div#audio-config #play,
html body div#audio div#audio-config #prev,
html body div#audio div#audio-config #next,
html body div#audio div#audio-config #silence{
min-width:50px;
min-height:50px;
width:50px;
height:50px;
z-index:9999;
line-height: 50px;
text-align:center;
float:right;
transition: all 0.2s ease;
}
html body #css-config div#hcl{
background: url("../img/hcl/deficients-visuels-hcl.png") 0px 0px no-repeat;
transition: all 0.2s ease;
display:none;
background-size:cover	;
}
html body #audio div#collapse{
background: url("../img/std/collapse-std.png") 0px -50px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio div#decollapse{
background: url("../img/std/decollapse-std.png") 0px -50px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #css-config div#std{
background: url("../img/std/deficients-visuels-std.png") 0px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #css-config div#hcl:hover{
background: url("../img/std/deficients-visuels-hcl.png") 0px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio div#collapse:hover{
background: url("../img/std/collapse-std.png") 0px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio div#decollapse:hover{
background: url("../img/std/decollapse-std.png") 0px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #css-config div#std:hover{
background: url("../img/std/deficients-visuels-std.png") -50px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio-config div#play{
background: url("../img/std/ambient-play-std.png") -50px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio-config div#next{
background: url("../img/std/ambient-next-std.png") 0px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio-config div#prev{
background: url("../img/std/ambient-prev-std.png") 0px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio-config div#silence{
background: url("../img/std/ambient-stop-std.png") 0px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio-config div#silence:hover{
background: url("../img/std/ambient-stop-std.png") -50px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio-config div#play:hover{
background: url("../img/std/ambient-play-std.png") 0px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio-config div#next:hover{
background: url("../img/std/ambient-next-std.png") -50px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body #audio-config div#prev:hover{
background: url("../img/std/ambient-prev-std.png") -50px 0px no-repeat;
transition: all 0.2s ease;
background-size:cover;
}
html body  div.infos{
disply:block;
width:100%;
float:left;
transition: all 0.6s ease;
}
p#titre{
font-family: "Rubik", sans-serif;
font-size:11px;
font-weight:300;
line-height: 48px;
height: 48px;
width: auto;
margin: 4%;
border-bottom:1px solid rgb(153,141,89);
text-align: center;
transition: all 0.6s ease;
color: rgb(255,108,0);
}
p#dureeRestante{
font-family: "Assistant", sans-serif;
color: rgb(255,108,0);
line-height:50px;
float:left;
height:50px;
display:block;
width:50px;
text-align:center;
transition: all 0.6s ease;
}
p#dureeJouer{
font-family: "Assistant", sans-serif;
color: rgb(87,190,230);
line-height: 50px;
margin-left: 35%;
height: 50px;
float:left;
width: auto;
text-align: center;
transition: all 0.6s ease;
}
p#auteur{
font-family: "Rubik", sans-serif;
color: rgb(44,142,198);
line-height: 50px;
margin-left: 5%;
height: 50px;
float:left;
width: auto;
text-align: center;
transition: all 0.6s ease;
}
p.time{
color: rgb(87,190,230);
float:left;
display:block;
width:45px;
height:50px;
line-height:50px;
text-align:center;
font-size:1em;
transition:all 0.8s ease;
}
div.pistes{
width:100%;
float:lef;
height:50px;
line-height:50px;
transition:all 0.8s ease;
}
p#tracks{
width: 54px;
color: rgb(44,142,198);
float: left;
height: 32px;
line-height: 50px;
height: 50px;
text-align: right;
margin-left: 27%;
transition:all 0.8s ease;
}
p#pistes{
float: left;
width:70px;
text-align: center;
color: rgb(255,108,0);
transition:all 0.8s ease;
}
p.separateur{
float: left;
dispaly: block;
line-height: 35px;
margin: 0 5px;
width: auto;
height: 35px;
color: rgb(87,190,230);
text-align: center;
transition:all 0.8s ease;
}
div.infos-title input{
color:rgb(96,152,142);
}
div.infos-title{
font-size: 18px;
display: block;
float: left;
width: 100%;
color: rgb(87,190,230);
transition:all 0.8s ease;
}
input#progressBar {
width: 200px;
float: left;
display: block;
margin: 25px;
border: 0 !important;
transition: all 0.8s ease;
}
p.separateur{
float: left;
dispaly: block;
line-height: 50px;
margin: 0 5px;
width: auto;
height: 50px;
text-align: center;
transition:all 0.8s ease;
}
.progress-bar-container {
webkit-appearance: none;
appearance: none;
height: 6px;
background: rgb(230, 230, 217);
border-radius: 3px;
cursor: pointer;
transition: all 0.8s ease;
}
#progressBar {
-webkit-appearance: none; 
appearance: none;
width: 100%;
height: 6px; 
background: rgb(230,230,217); 
border-radius: 3px; 
cursor: pointer; 
transition:all 0.8s ease;
}
#progressBar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px; 
height: 12px;
background: rgb(255,255,255); 
border-radius: 50%; 
cursor: pointer;
transition: background-color 0.2s ease-in-out;
transition:all 0.8s ease;
}
#progressBar::-webkit-slider-thumb:hover {
background: rgba(255,255,255,0.55);
transition:all 0.8s ease;
}
#progressBar::-moz-range-thumb {
width: 12px;
height: 12px;
background: rgba(255,255,255,0.55);
border-radius: 50%;
cursor: pointer;
border: none
transition: background-color 0.2s ease-in-out;
transition:all 0.8s ease;
}
#progressBar::-moz-range-thumb:hover {
background: rgba(255,255,255,0.55);
}
#progressBar::-moz-range-track {
background: #e0e0e0;
height: 6px;
border-radius: 3px;
border: none; 
transition:all 0.8s ease;
}
#progressBar {
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
}
#progressBar:focus {
outline: none;
}
html body  div.infos-title input#progressBar {
width: 470px;
float: left;
display: block;
height: 15px;
margin: 15px;
padding: 0;
border: 0 !important;
color: rgb(255,255,255) !important;
transition:all 0.8s ease;
}
@media screen and (min-width:220px) and (max-width:1023px) and (orientation:landscape){
html body div#audio div#audio-config,
html body div#audio  div#infos-audio,
html body div#audio,
html body div#audio div#decollapse,
html body div#audio div#decollapse,
html body div#audio div#collapse,
html body div#audio div#audio-config div,
html body #audio div#collapse,
html body #audio div#decollapse,
html body #css-config div#hcl,
html body #font-config div#plus,
html body #font-config div#moins,
html body #audio-config div#play,
html body #audio-config div#next,
html body #audio-config div#prev,
html body #audio-config div#silence,
#overlayDidacticiel,
p#titre,
p#dureeRestante,
p#dureeJouer,
p#auteur,
p.time,
div.pistes,
p#tracks,
p#pistes,
p.separateur,
div.infos-title input,
div.infos-title,
input#progressBar,
p.separateur,
.progress-bar-container,
#progressBar,
html body  div.infos-title input#progressBar,
#info-auxiliaire,
#info-auxiliaire a{
display:none !important;
}
}
@media screen and (min-width:220px) and (max-width:1023px) and (orientation:portrait){
html body div#audio div#audio-config,
html body div#audio  div#infos-audio,
html body div#audio,
html body div#audio div#decollapse,
html body div#audio div#decollapse,
html body div#audio div#collapse,
html body div#audio div#audio-config div,
html body #audio div#collapse,
html body #audio div#decollapse,
html body #audio-config div#play,
html body #audio-config div#next,
html body #audio-config div#prev,
html body #audio-config div#silence,
html body div#font-config,
html body div#fullscreen-config,
p#titre,
p#dureeRestante,
p#dureeJouer,
p#auteur,
p.time,
div.pistes,
p#tracks,
p#pistes,
p.separateur,
div.infos-title input,
div.infos-title,
input#progressBar,
p.separateur,
.progress-bar-container,
#progressBar,
html body  div.infos-title input#progressBar,
#info-auxiliaire,
#info-auxiliaire a{
display:none;
}
}
@media screen and (min-width:2049px){

html body div#fullscreen-config{
width: 100px;
height: 100px;
position: fixed;
z-index: 10;
top: 10%;
right: 0;
display: block;
min-height: 100px;
min-width:100px;
float:left;
transition : all ease 0.5s;
}	
html body div#css-config{
width:200px;
height: 100px;
min-width:200px;
max-height: 100px;
position: fixed;
z-index: 10;
top: 25%;
right:-100px;
display: block;
transition : all ease 0.5s;
min-height:100px;
}
html body div#css-config div#std{
display:none;
}
html body div#font-config{
width: 100px;
height: 200px;
position: fixed;
z-index: 10;
top: 40%;
right: 0;
display: block;
transition : all ease 0.5s;
}
html body div#css-config div,
html body div#font-config div,
html body div#fullscreen-config div{
min-width:100px;
min-height:100px;
width:100px;
height:100px;
display:block;
float: left;
transition: all 0.6s ease;
}
html body div#audio div#audio-config{
width: 500px;
height: 100px;
bottom:100px;
text-align: center;
display: block;
transition : all ease 0.5s;
font-size:50px;
text-align:center;
line-height: 100px;
}
html body div#audio  div#infos-audio{
width:500px;
display:block;
background-color:rgba(255,255,255,0.81);
height:500px;
clear:both;
transition : all ease 0.5s;
font-size:26px;
}
html body div#audio{
min-height:360px;
min-width:300px;
display:block;
bottom:0;
right:0;
z-index:10;
position: fixed;
transition: all 1s ease;
}
html body div#audio div#decollapse{
display:none;
}
html body div#audio div#decollapse,
html body div#audio div#collapse{
top: 0;
left: 0;
min-height: 100px;
width: 100px;
height: 100px;
margin-left: 0px;
line-height:100px;
float: left;
transition: all 0.6s ease;
cursor: pointer;
clear: both;
}
html body div#audio div#audio-config div{
min-width:00px;
min-height:00px;
width:100px;
height:100px;
line-height: 100px;
text-align:center;
float:right;
transition: all 0.6s ease;
cursor: pointer;
}

html body #css-config div#std{
background: url("../img/deficients-visuels-std.png") 0px 0px no-repeat;
margin-right:-50px;
transition: all 1s ease;
background-size:cover;
}
html body #audio div#collapse{
background: url("../img/collapse-std.png") 0px -100px no-repeat;
transition: all 1s ease;
background-size:cover;
}
html body #audio div#decollapse{
background: url("../img/decollapse-std.png") 0px -100px no-repeat;
transition: all 1s ease;
background-size:cover;
}
html body #css-config div#hcl{
background: url("../img/deficients-visuels-hcl.png") 0px 0px no-repeat;
transition: all 1s ease;
background-size:cover;
}
html body #css-config div#std:hover{
background: url("../img/deficients-visuels-std.png") -100px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio div#collapse:hover{
background: url("../img/collapse-std.png") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio div#decollapse:hover{
background: url("../img/decollapse-std.png") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #css-config div#hcl:hover{
background: url("../img/deficients-visuels-hcl.png") -100px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#plus{
background: url("../img/font-plus-std.png") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#moins{
background: url("../img/font-moins-std.png") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#moins:hover{
background: url("../img/font-moins-std.png") -100px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #font-config div#plus:hover{
background: url("../img/font-plus-std.png") -100px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio-config div#play{
background: url("../img/ambient-play-std.png") -100px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio-config div#next{
background: url("../img/ambient-next-std.png") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio-config div#prev{
background: url("../img/ambient-prev-std.png") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio-config div#silence{
background: url("../img/ambient-stop-std.png") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio-config div#silence:hover{
background: url("../img/ambient-stop-std.png") -100px 0px no-repeat;
transition: all 0.8s ease;
background-size:cover;
}
html body #audio-config div#play:hover{
background: url("../img/ambient-play-std.png") 0px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio-config div#next:hover{
background: url("../img/ambient-next-std.png") -100px 0px no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body #audio-config div#prev:hover{
background: url("../img/ambient-prev-std.png") -100px 0px no-repeat;
transition: all 0.6s ease;
background-size:contain;
}
html body div#fullscreen-config div#Enter_fullscreen{
background-image: url("../img/fullscreen-std.png");
background-position: 0px 0px;
background-repeat: no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body div#fullscreen-config div#Enter_fullscreen:hover{
background-image: url("../img/fullscreen-std.png");
background-position: -100px 0px;
background-repeat: no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body div#fullscreen-config div#Quit_fullscreen{
background-image: url("../img/quit_fullscreen-std.png");
transition: all 0.6s ease;
background-position: 0px 0px;
background-repeat: no-repeat;
margin-right:-700px;
background-size:cover;
}
html body div#fullscreen-config div#Quit_fullscreen:hover{
background-image: url("../img/quit_fullscreen-std.png");
background-position: -100px 0px;
background-repeat: no-repeat;
transition: all 0.6s ease;
background-size:cover;
}
html body  div.infos{
disply:block;
width:100%;
float:left;
transition: all 0.6s ease;
}
p#titre{
font-family: "Rubik", sans-serif;
font-size:22px;
font-weight:300;
line-height: 96px;
height: 96px;
width: auto;
margin: 4%;
border-bottom:2px solid rgb(153,141,89);
text-align: center;
transition: all 0.6s ease;
color: rgb(255,108,0);
}
p#dureeRestante{
font-family: "Assistant", sans-serif;
color: rgb(255,108,0);
line-height:100px;
float:left;
height:100px;
display:block;
width:100px;
text-align:center;
transition: all 0.6s ease;
}
p#dureeJouer{
font-family: "Assistant", sans-serif;
color: rgb(87,190,230);
line-height: 100px;
margin-left: 35%;
height: 100px;
float:left;
width: auto;
text-align: center;
transition: all 0.6s ease;
}
p#auteur{
font-family: "Rubik", sans-serif;
color: rgb(44,142,198);
line-height: 100px;
margin-left: 5%;
height: 100px;
float:left;
width: auto;
text-align: center;
transition: all 0.6s ease;
}
p.time{
color: rgb(87,190,230);
float:left;
display:block;
width:90px;
height:100px;
line-height:100px;
text-align:center;
font-size:2em;
transition:all 0.8s ease;
}
div.pistes{
width:100%;
float:lef;
height:100px;
line-height:100px;
transition:all 0.8s ease;
}
p#tracks{
width: 108px;
color: rgb(44,142,198);
float: left;
height: 64px;
line-height: 100px;
height: 100px;
text-align: right;
margin-left: 27%;
transition:all 0.8s ease;
}
p#pistes{
float: left;
width:140px;
text-align: center;
color: rgb(255,108,0);
transition:all 0.8s ease;
}
p.separateur{
float: left;
dispaly: block;
line-height: 70px;
margin: 0 10px;
width: auto;
height: 70px;
color: rgb(87,190,230);
text-align: center;
transition:all 0.8s ease;
}
div.infos-title input{
color:rgb(96,152,142);
}
div.infos-title{
font-size: 36px;
display: block;
float: left;
width: 100%;
color: rgb(87,190,230);
transition:all 0.8s ease;
}
input#progressBar {
width:400px;
float: left;
display: block;
margin: 50px;
border: 0 !important;
transition: all 0.8s ease;
}
p.separateur{
float: left;
dispaly: block;
line-height: 100px;
margin: 0 10px;
width: auto;
height: 100px;
text-align: center;
transition:all 0.8s ease;
}
.progress-bar-container {
webkit-appearance: none;
appearance: none;
height: 12px;
background: rgb(230, 230, 217);
border-radius:6px;
cursor: pointer;
transition: all 0.8s ease;
}
#progressBar {
-webkit-appearance: none; 
appearance: none;
width: 100%;
height: 12px; 
background: rgb(230,230,217); 
border-radius: 6px; 
cursor: pointer; 
transition:all 0.8s ease;
}
#progressBar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px; 
height: 24px;
background: rgb(255,255,255); 
border-radius: 50%; 
cursor: pointer;
transition: background-color 0.2s ease-in-out;
transition:all 0.8s ease;
}
#progressBar::-webkit-slider-thumb:hover {
background: rgba(255,255,255,0.55);
transition:all 0.8s ease;
}
#progressBar::-moz-range-thumb {
width: 24px;
height: 24px;
background: rgba(255,255,255,0.55);
border-radius: 50%;
cursor: pointer;
border: none;
transition: background-color 0.2s ease-in-out;
transition:all 0.8s ease;
}
#progressBar::-moz-range-thumb:hover {
background: rgba(255,255,255,0.55);
}
#progressBar::-moz-range-track {
background: #e0e0e0;
height: 12px;
border-radius: 6px;
border: none; 
transition:all 0.8s ease;
}
#progressBar {
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
}
#progressBar:focus {
outline: none;
}
html body  div.infos-title input#progressBar {
width: 470px;
float: left;
display: block;
height: 30px;
margin: 30px;
padding: 0;
border: 0 !important;
color: rgb(255,255,255) !important;
transition:all 0.8s ease;
}

}