@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
.mhn-player .play-list .songs-info .song-title,.songs {
 font-size:16px
}
body {
 margin:0;
 color:#444;
 background-color:#ededed;
 font:300 18px/18px Roboto,sans-serif
}
*,
:after,
:before {
 -webkit-box-sizing:border-box;
 box-sizing:border-box
}
.blocage {
 display:none
}
.songs {
 background:#ededed;
 position:absolute;
 top:50%;
 right:2%;
 -webkit-transform:translate(0,-50%);
 -ms-transform:translate(0,-50%);
 transform:translate(0,-50%);
 width:360px;
 height:80vh;
 overflow:scroll;
 font-family:Open Sans;
 padding:20px;
 border-radius:2em;
 -webkit-box-shadow:rgba(0,0,0,.08) 0 4px 12px;
 box-shadow:rgba(0,0,0,.08) 0 4px 12px;
 scrollbar-width:none
}
.songs::-webkit-scrollbar {
 display:none
}
.pull-left {
 float:left
}
.pull-right {
 float:right
}
.clearfix:after,
.clearfix:before {
 content:'';
 display:table
}
.clearfix:after {
 clear:both;
 display:block
}
.hide {
 display:none
}
.cd-1 {
 background:url('../img/audio/volatils/volatils.jpg')
}
.cd-2 {
 background:url('../img/audio/hardcordes/hardcordes.jpg')
}
.cd-3 {
 background:url('../img/audio/hotel/hotel.jpg')
}
.cd-4 {
 background:url('../img/audio/tetes/tetes.jpg')
}
.cd-5 {
 background:url('../img/audio/homme/homme.jpg')
}
.cd-6 {
 background:url('../img/audio/attaque/attaque.jpg')
}
.image-fond {
 position:fixed;
 left:50%;
 -webkit-transform:translateX(-70%) translateY(-50%);
 -ms-transform:translateX(-70%) translateY(-50%);
 transform:translateX(-70%) translateY(-50%);
 top:50%;
 width:900px
}
.image-fond img {
 width:100%
}
.track {
 width:2px;
 margin-right:5px;
 background:rgba(0,0,0,0);
 -webkit-transition:background 250ms linear;
 -o-transition:background 250ms linear;
 transition:background 250ms linear
}
.handle,
.mhn-player .play-list a:hover {
 background:rgba(255,255,255,.2)
}
.fermer {
 position:fixed;
 z-index:10;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -ms-flex-direction:column;
 flex-direction:column;
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-box-align:end;
 -ms-flex-align:end;
 align-items:end;
 width:100%;
 /*! padding: 5px 5px 0 0; */height:60px;
 right:10px;
 top:10px
}
.fermer img {
 height:100%/*! position: absolute; */
}
.fermer img:hover {
 color:#00f;
 cursor:pointer;
 -webkit-animation:4s linear infinite spin;
 animation:4s linear infinite spin
}
@-webkit-keyframes spin {
 100% {
  -webkit-transform:rotate(360deg) scale(.7);
  opacity:.3
 }
}
@keyframes spin {
 100% {
  -webkit-transform:rotate(360deg) scale(.7);
  transform:rotate(360deg) scale(.7);
  opacity:.3
 }
}
.track.dragging,
.track:hover {
 background:rgba(0,0,0,.15)
}
.handle {
 right:0;
 width:2px;
 -webkit-transition:width 250ms;
 -o-transition:width 250ms;
 transition:width 250ms
}
.mhn-player {
 position:absolute;
 top:50%;
 right:331px;
 -webkit-transform:translate(-23%,-60%);
 -ms-transform:translate(-23%,-60%);
 transform:translate(-23%,-60%);
 width:360px;
 height:500px;
 padding:15px;
 margin:25px auto 0;
 background:rgba(0,0,0,.9);
 -webkit-box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
 box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
 border-radius:2em
}
.mhn-player .album-art,
.mhn-player .album-thumb {
 background-size:contain;
 background-repeat:no-repeat;
 border-radius:2rem 2rem 0 0
}
.mhn-player .album-art {
 width:330px;
 height:330px;
 overflow:hidden;
 position:relative;
 border:1px solid #000;
 background-color:transparent
}
.mhn-player .album-art:before {
 top:30px;
 left:50%;
 width:200px;
 content:'';
 font-size:72px;
 font-weight:600;
 position:absolute;
 margin-left:-100px;
 color:rgba(255,255,255,.3)
}
.mhn-player .album-art:after {
 top:0;
 left:0;
 content:'';
 width:inherit;
 height:inherit;
 position:absolute;
 background:-o-linear-gradient(top,rgba(0,0,0,.1),#000);
 background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.1)),to(#000));
 background:linear-gradient(to bottom,rgba(0,0,0,.1),#000)
}
.mhn-player .album-art img {
 width:100%;
 position:relative;
 border-radius:2rem 2rem 0 0;
 display:block;
 background-position:center
}
.mhn-player .album-art.blur img {
 -moz-filter:blur(3px);
 -webkit-filter:blur(3px);
 filter:blur(3px)
}
.mhn-player a {
 color:inherit;
 text-decoration:none
}
.play-list::-webkit-scrollbar {
 display:none
}
.mhn-player .play-list {
 top:16px;
 left:15px;
 right:15px;
 display:none;
 bottom:190px;
 overflow-y:auto;
 position:absolute;
 width:auto!important;
 background:rgba(0,0,0,.8);
 padding-right:1px!important;
 border-radius:2rem 2rem 0 0;
 -ms-overflow-style:none;
 scrollbar-width:none
}
.mhn-player .play-list a {
 color:#ccc;
 display:block;
 overflow:hidden;
 padding:6px 10px;
 white-space:nowrap;
 -o-text-overflow:ellipsis;
 text-overflow:ellipsis;
 -webkit-transition:.4s ease-in-out;
 -o-transition:.4s ease-in-out;
 transition:.4s ease-in-out
}
.mhn-player .play-list a.active {
 color:#f2a30c
}
.mhn-player .play-list .album-thumb {
 width:35px;
 height:35px;
 overflow:hidden;
 margin-right:10px;
 border:1px solid #666
}
.mhn-player .play-list .album-thumb img {
 width:100%;
 display:block
}
.mhn-player .play-list .songs-info {
 max-width:240px;
 text-shadow:0 2px 2px #000
}
.mhn-player .play-list .songs-info .songs-detail {
 font-size:13px;
 overflow:hidden;
 -o-text-overflow:ellipsis;
 text-overflow:ellipsis
}
.mhn-player .current-info {
 left:30px;
 right:30px;
 color:#d2baba;
 bottom:160px;
 margin-left:-15px;
 margin-right:-15px;
 position:absolute/*! text-shadow:0 2px 4px #000; */
}
.mhn-player .current-info>div {
 margin-top:10px
}
.mhn-player .current-info .song-title {
 font-size:20px;
 margin-top:10px;
 font-weight:400
}
.mhn-player .current-info .fa {
 min-width:30px;
 font-size:18px;
 text-align:center;
 font-weight:400
}
.mhn-player .controls {
 margin-top:30px;
 position:relative
}
.mhn-player .controls .toggle-play-list {
 right:5px;
 width:40px;
 color:#dc143c;
 height:40px;
 bottom:100px;
 border-radius:50%;
 line-height:40px;
 text-align:center;
 position:absolute;
 background-color:#ccc
}
.mhn-player .controls .fa-pp:before {
 content:'\f04b'
}
.mhn-player .controls .active .fa-pp:before {
 content:'\f04c'
}
.mhn-player .controls .progress {
 height:1px;
 margin:15px 0;
 position:relative;
 background:#262626
}
.mhn-player .controls .duration {
 color:#ccc;
 font-size:14px
}
.mhn-player .controls .progress .bar {
 width:0;
 display:block;
 height:inherit;
 background:#bc3958;
 -webkit-box-shadow:0 0 5px 0 #bc3958;
 box-shadow:0 0 5px 0 #bc3958
}
.mhn-player .controls .action-button a {
 width:40px;
 height:40px;
 font-size:16px;
 margin-right:5px;
 border:2px solid;
 line-height:35px;
 border-radius:50%;
 text-align:center;
 display:inline-block
}
.mhn-player .controls .action-button a.active,
.mhn-player .controls .action-button a:hover {
 color:#ccc
}
.mhn-player .controls .action-button a .fa {
 font-size:inherit
}
.volume {
 height:10px;
 width:100px;
 margin:0 10px;
 font-size:14px;
 cursor:pointer;
 display:inline-block;
 -webkit-appearance:none;
 background:0 0
}
.volume::-webkit-slider-runnable-track {
 height:.5em;
 background:#d8d8d8;
 border-radius:.25em;
 -webkit-appearance:none
}
.volume::-moz-range-track {
 border:none;
 height:.5em;
 background:#d8d8d8;
 border-radius:.25em
}
.volume::-ms-track {
 border:none;
 height:.5em;
 color:transparent;
 background:#d8d8d8;
 border-radius:.25em
}
.volume::-webkit-slider-thumb {
 -webkit-appearance:none;
 position:relative;
 margin:-.25em;
 border:none;
 width:1em;
 height:1em;
 border-radius:.5em
}
.volume::-moz-range-thumb {
 border:none;
 width:1em;
 height:1em;
 cursor:ew-resize;
 border-radius:.5em
}
.volume::-ms-thumb {
 border:none;
 width:1em;
 height:1em;
 border-radius:.5em
}
.volume::-ms-fill-lower,
.volume::-ms-fill-upper {
 border-radius:5em;
 background:0 0
}
.volume::-ms-tooltip {
 display:none
}
.volume::-ms-fill-lower {
 background:#f05e7b
}
.volume::-webkit-slider-thumb {
 background:#dc143c
}
.volume::-moz-range-thumb {
 background:#dc143c
}
.volume::-ms-thumb {
 background:#dc143c
}
.volume::-webkit-slider-runnable-track {
 background-size:50% 100%;
 background-repeat:no-repeat;
 background-image:-webkit-gradient(linear,left top,left bottom,from(#f05e7b),to(#f05e7b));
 background-image:linear-gradient(#f05e7b,#f05e7b)
}
.volume::-moz-range-track {
 background-size:50% 100%;
 background-repeat:no-repeat;
 background-image:linear-gradient(#bc3958,#dc143c)
}
.volume[data-css="0"]::-webkit-slider-runnable-track {
 background-size:0 100%
}
.volume[data-css="0"]::-moz-range-track {
 background-size:0 100%
}
.volume[data-css="0.1"]::-webkit-slider-runnable-track {
 background-size:10% 100%
}
.volume[data-css="0.1"]::-moz-range-track {
 background-size:10% 100%
}
.volume[data-css="0.2"]::-webkit-slider-runnable-track {
 background-size:20% 100%
}
.volume[data-css="0.2"]::-moz-range-track {
 background-size:20% 100%
}
.volume[data-css="0.3"]::-webkit-slider-runnable-track {
 background-size:30% 100%
}
.volume[data-css="0.3"]::-moz-range-track {
 background-size:30% 100%
}
.volume[data-css="0.4"]::-webkit-slider-runnable-track {
 background-size:40% 100%
}
.volume[data-css="0.4"]::-moz-range-track {
 background-size:40% 100%
}
.volume[data-css="0.5"]::-webkit-slider-runnable-track {
 background-size:50% 100%
}
.volume[data-css="0.5"]::-moz-range-track {
 background-size:50% 100%
}
.volume[data-css="0.6"]::-webkit-slider-runnable-track {
 background-size:60% 100%
}
.volume[data-css="0.6"]::-moz-range-track {
 background-size:60% 100%
}
.volume[data-css="0.7"]::-webkit-slider-runnable-track {
 background-size:70% 100%
}
.volume[data-css="0.7"]::-moz-range-track {
 background-size:70% 100%
}
.volume[data-css="0.8"]::-webkit-slider-runnable-track {
 background-size:80% 100%
}
.volume[data-css="0.8"]::-moz-range-track {
 background-size:80% 100%
}
.volume[data-css="0.9"]::-webkit-slider-runnable-track {
 background-size:90% 100%
}
.volume[data-css="0.9"]::-moz-range-track {
 background-size:90% 100%
}
.volume[data-css="1"]::-webkit-slider-runnable-track {
 background-size:100% 100%
}
.volume[data-css="1"]::-moz-range-track {
 background-size:100% 100%
}
@media screen and (max-height:400px) {
 .blocage {
  height:100vh;
  width:100vw;
  background-color:#000;
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  display:block
 }
 .blocage p {
  position:fixed;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  max-width:75%;
  font-size:1.5em;
  line-height:1em;
  color:wheat
 }
}
@media screen and (max-width:779px) {
 .image-fond,
 .mhn-player {
  position:fixed;
  top:50%;
  left:50%
 }
 #songs_aussi {
  display:none
 }
 .image-fond {
  -webkit-transform:translateX(-70%) translateY(-50%);
  -ms-transform:translateX(-70%) translateY(-50%);
  transform:translateX(-50%) translateY(-54%);
  width:80vh
 }
 .mhn-player {
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%)
 }
}
@media screen and (max-width:525px) {
 .mhn-player {
  position:fixed;
  top:50%;
  left:50%;
  width:300px;
  height:420px;
  padding:15px;
  margin:25px auto 0;
  background:rgba(0,0,0,.9);
  -webkit-box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
  box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
  border-radius:2em;
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%)
 }
 .mhn-player .album-art {
  width:270px;
  height:260px;
  overflow:hidden;
  position:relative;
  border:1px solid #000;
  background-color:transparent
 }
 .mhn-player .controls .toggle-play-list {
  right:5px;
  width:40px;
  color:#dc143c;
  height:40px;
  bottom:100px;
  border-radius:50%;
  line-height:40px;
  text-align:center;
  position:absolute;
  background-color:#ccc
 }
 .volume {
  height:10px;
  width:52px;
  margin:0 10px;
  font-size:14px;
  cursor:pointer;
  display:inline-block;
  -webkit-appearance:none;
  background:0 0
 }
 .mhn-player .current-info .song-title {
  font-size:16px;
  margin-top:10px;
  font-weight:400
 }
}