body {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: normal;
  background: transparent;
}

#player_control {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#player_control .btn {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}


#player_control .pause {
  display: none;
  position: relative;
  overflow: hidden;
  cursor:pointer;
}

#player_control .pause:hover {
  -webkit-transform: scale(1.25);
      -ms-transform: scale(1.25);
          transform: scale(1.25);
}

#player_control .play {
  display: block;
  cursor:pointer;
}

#player_control .play:hover {
  -webkit-transform: scale(1.25);
      -ms-transform: scale(1.25);
          transform: scale(1.25);
}

#player_control .btn-bg {
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#player_control .btn-play {
  background-image: url(../imgs/gui/gui_play.png);
}

#player_control .btn-pause {
  background-image: url(../imgs/gui/gui_pause_black.png);
  position: absolute;
  top: 0;
  left: 0;
}

#player_control .btn-pause-bg {
  background-image: url(../imgs/gui/gui_pause_bg_black.png);
  -webkit-animation: spin 6s linear infinite;
          animation: spin 6s linear infinite;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

@keyframes spin {
	0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}


/* ==========================================================================
ICON
========================================================================== */


span.loading, span.loading:after {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-image:
  -webkit-gradient(radial,4 center,0,4 center,4,from(rgba(153,153,153,0.5)),color-stop(0.5,rgba(153,153,153,0.5)),color-stop(0.9,transparent),to(transparent)),
  -webkit-gradient(radial,center 4,0,center 4,4,from(rgba(153,153,153,0.5)),color-stop(0.5,rgba(153,153,153,0.5)),color-stop(0.9,transparent),to(transparent)),
  -webkit-gradient(radial,46 center,0,46 center,4,from(rgba(153,153,153,0.5)),color-stop(0.5,rgba(153,153,153,0.5)),color-stop(0.9,transparent),to(transparent)),
  -webkit-gradient(radial,center 46,0,center 46,4,from(rgba(153,153,153,0.5)),color-stop(0.5,rgba(153,153,153,0.5)),color-stop(0.9,transparent),to(transparent));
  background-image:
  -webkit-radial-gradient(10% 50%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent 95%, transparent),
  -webkit-radial-gradient(50% 10%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent 95%, transparent),
  -webkit-radial-gradient(90% 50%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent 95%, transparent),
  -webkit-radial-gradient(50% 90%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent 95%, transparent);
  background-image:
  -webkit-radial-gradient(10% 50%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  -webkit-radial-gradient(50% 10%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  -webkit-radial-gradient(90% 50%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  -webkit-radial-gradient(50% 90%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent);
  background-image:
  -o-radial-gradient(10% 50%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  -o-radial-gradient(50% 10%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  -o-radial-gradient(90% 50%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  -o-radial-gradient(50% 90%, 4px 4px, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent);
  background-image:
  radial-gradient(4px 4px at 10% 50%, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  radial-gradient(4px 4px at 50% 10%, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  radial-gradient(4px 4px at 90% 50%, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent),
  radial-gradient(4px 4px at 50% 90%, rgba(153,153,153,0.5), rgba(153,153,153,0.5) 95%, transparent);
}
span.loading {
  position: relative;
  vertical-align: middle;
  text-align: center;
}
span.loading:after {
  position: absolute;
  content: " ";
  z-index: -1;
  left: 0;
  top: 0;
  margin: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
}
span.loading span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-image: -webkit-gradient(radial,4 center,0,4 center,4,from(#999),color-stop(0.4,#999),color-stop(0.9,transparent),to(transparent));
  background-image: -webkit-radial-gradient(10% 50%, 4px 4px, #999, #999 95%, transparent 95%, transparent);
  background-image: -webkit-radial-gradient(10% 50%, 4px 4px, #999, #999 95%, transparent);
  background-image: -o-radial-gradient(10% 50%, 4px 4px, #999, #999 95%, transparent);
  background-image: radial-gradient(4px 4px at 10% 50%, #999, #999 95%, transparent);
  -webkit-animation: animation01 2s linear infinite;
  animation: animation01 2s linear infinite;
}

@-webkit-keyframes animation01 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  12.4% {
    -webkit-transform: rotate(0deg);
  }
  12.5% {
    -webkit-transform: rotate(45deg);
  }
  24.9% {
    -webkit-transform: rotate(45deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  37.4% {
    -webkit-transform: rotate(90deg);
  }
  37.5% {
    -webkit-transform: rotate(135deg);
  }
  49.9% {
    -webkit-transform: rotate(135deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  62.4% {
    -webkit-transform: rotate(180deg);
  }
  62.5% {
    -webkit-transform: rotate(225deg);
  }
  74.9% {
    -webkit-transform: rotate(225deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  87.4% {
    -webkit-transform: rotate(270deg);
  }
  87.5% {
    -webkit-transform: rotate(315deg);
  }
  99.9% {
    -webkit-transform: rotate(315deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes animation01 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  12.4% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  12.5% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  24.9% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  37.4% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  37.5% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  49.9% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  62.4% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  62.5% {
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  74.9% {
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  87.4% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  87.5% {
    -webkit-transform: rotate(315deg);
            transform: rotate(315deg);
  }
  99.9% {
    -webkit-transform: rotate(315deg);
            transform: rotate(315deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}