.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

body {
  margin:20px 0px 0px 0px;
  text-align: center;
  font-family: sans-serif;
  background:#4053FF;
}
.sounds {
  margin:0px auto;
  position:absolute;
  top:190px;
  left:50px;
  right:50px;
  padding-bottom:15px;
  margin-bottom:50px;
  background-color:rgba(255,255,255,0.2);
  border-radius: 6px;
}


.sound {
  display:inline-block;
  width:250px;
  overflow:hidden;
  height:30px;
  margin-left:25px;
  margin-top:25px;
  background-color:#2149D9;
  color:#FFFFFF;
  text-align: center;
  line-height: 30px;
  border-radius: 6px;
  cursor: pointer;
}
.sound:hover {
  background-color:#3D5FD9;
}
.sound.active {
  background-image: url(marko.png);
  background-repeat: no-repeat;
  background-position-x:0%;
}
audio {
  display:none;
}