body{
    overflow-x: hidden;
    overflow-y : hidden;
    font-family:arial, sans-serif;
    position: static;
  }

 #logo {
    display: inline-block;
    padding-right: 15px;
 }

.text {
    position: relative;
    text-align: center;
    color: white;
}

#text1{
    display: inline-block;
    font-size: 2.3em;
    color: white;
}

#text4 {
    margin-top:100px;
    color: white;
}

.icons {
    position: relative;
    text-align: center;
}

.icon {
    margin:16.5px;
    cursor:pointer;
    pointer-events: auto;
}
.icon:hover{
    transform: scale(1.05);
}

#playpause { 
    display: inline-block;
    height:64px; width:64px; /* dimensions of the image */
    background-repeat:no-repeat;
    margin: 16.5px;
}

#playpause.play { 
   background-image:url("assets/play.png");
}

#playpause.stop { 
   background-image:url("assets/stop.png");
}

.slider {
    text-align: center;
    position: relative;
}

.ui-slider-vertical {
    background: rgba(255,255,255,1.0) !important;
    border: 2px solid rgba(0, 0, 0, 0.0) !important;
    width: 0px !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }

  .ui-slider-horizontal {
    background: rgba(255,255,255,1.0) !important;
    border: 2px solid rgba(0, 0, 0, 0.0) !important;
    height: 0px !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }

  #s0, #s1, #s2, #s3, #s4, #s5, #s6, #s7, #s8, #s9 {
    /*float: left;*/
    clear: none;
    height:240px;
    margin: 12px;
    display: inline-block;
    position: relative;
}

#sa0, #sa1, #sa2, #sa3, #sa4, #sa5, #sa6, #sa7, #sa8, #sa9, #sa10, #sa11 {
    /*float: left;*/
    clear: none;
    width:60px;
    position: relative;
    margin-left: 15px;
    margin-top: 5px;
    visibility: hidden;
}
#spa0, #spa1, #spa2, #spa3, #spa4, #spa5, #spa6, #spa7, #spa8, #spa9, #spa10, #spa11 {
    position:absolute;
    bottom:-4px;
}

.ui-slider-handle {
    background: #000 !important;
    border: 2px solid #FFF !important;
    width: 28px !important;
    height: 28px !important;
    /* outline: none; */
    /* left: -5px !important; */
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    cursor: pointer;
    margin-bottom: -12px;
    /* margin: 10px; */
    position: absolute;
    margin-left: -17px;
    pointer-events: auto;
}
#speed {
    display: inline-block;
    
}
#speed_text {
}
#sm {
    margin-bottom: 0px;
}

.container {
	margin: 0px;
	height: 64px;
    display: inline-block;
}

.container2 {
	margin: 0px;
	height: 128px;
    display: inline-block;
}

a.hoverbubble {
    position: relative;
    text-decoration: none;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
  }
  a.hoverbubble span {display: none;pointer-events: none;}
  a.hoverbubble:hover span {
      display: block;
      position: absolute;
      padding: .5em;
      content: attr(title);
      min-width: px;
      text-align: center;
      width: auto;
      height: auto;
      white-space: nowrap;
      top: -110px;
      background: rgba(0,0,0,.95);
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      color: #fff;
      font-size: 0.86em;
      font-family: Arial, Helvetica, sans-serif;
      -webkit-tap-highlight-color: transparent;
      pointer-events: none;
  }
  a.hoverbubble:hover span:after {
      position: absolute;
      display: block;
      content: "";
      border-color: rgba(0,0,0,.95) transparent transparent transparent;
      border-style: solid;
      border-width: 10px;
      height: 0;
      width: 0;
      position: absolute;
      bottom: -20px;
      left: 2.8em;
      -webkit-tap-highlight-color: transparent;
  }
  
  a.hoverbubbleslider {
    position: relative;
    text-decoration: none;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
  }
  a.hoverbubbleslider span {display: none;pointer-events: none;}
  a.hoverbubbleslider:hover span {
      display: block;
      position: absolute;
      padding: .5em;
      content: attr(title);
      min-width: px;
      text-align: center;
      width: auto;
      height: auto;
      white-space: nowrap;
      top: -295px;
      left: -35px;
      background: rgba(0,0,0,.95);
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      color: #fff;
      font-size: 0.86em;
      font-family: Arial, Helvetica, sans-serif;
      -webkit-tap-highlight-color: transparent;
      pointer-events: none;
  }
  a.hoverbubbleslider:hover span:after {
      position: absolute;
      display: block;
      content: "";
      border-color: rgba(0,0,0,.95) transparent transparent transparent;
      border-style: solid;
      border-width: 10px;
      height: 0;
      width: 0;
      position: absolute;
      bottom: -20px;
      left: 2.8em;
      -webkit-tap-highlight-color: transparent;
  }

  #sound {
  }

  .no_select {
    outline-width: 0;
  }
  .no_select:focus{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#play_begin {
    position: absolute;
    width: 100%;
    height: 150%;
    background: #000;
    top: 0px;
    left:0px;
    opacity: 0.8;
    cursor: pointer;
}

#play_begin_btn { 
    height:128px; width:128px; /* dimensions of the image */
    background-repeat:no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -64px; /* Half the height */
    margin-left: -64px; 
}

#play_begin_btn.play { 
   background-image:url("assets/bouton-jouer.png");
   cursor: pointer;
}