@import '//fonts.googleapis.com/css?family=Alegreya+Sans+SC:800|Libre+Franklin';
.btn {
  cursor: pointer; }

.abs {
  position: absolute;
  display: block; }

.rel {
  position: relative;
  display: block; }

html, body {
  font-family: 'Libre Franklin';
  font-size: .9em; }

#header {
  position: relative;
  width: 100%;
  height: 115px;
  text-align: center;
  background-color: #000;
  z-index: 30; }
  #header .background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/blog/wp-content/themes/nargalzius/assets/images/header.jpg);
    background-size: cover;
    opacity: .7;
    z-index: 40; }
  #header .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/blog/wp-content/themes/nargalzius/assets/images/overlay.gif);
    z-index: 50; }
  #header .logo {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    position: relative;
    display: block;
    opacity: 1;
    top: 40%;
    z-index: 90; }
    #header .logo svg path {
      fill: #FFF; }
    #header .logo:hover {
      opacity: .7; }

.btn {
  cursor: pointer; }

#widget {
  margin-bottom: 20px; }

.startHidden {
  opacity: 0; }

.sInfo {
  color: #C15300; }

.sPlay {
  color: #236D33; }

.sDownload {
  color: #0071C1; }

.sInfo, .sPlay, .sDownload {
  position: relative;
  display: inline-block; }

#playList {
  margin-left: 20px;
  display: block;
  width: 280px;
  float: left; }
  #playList #toggleView {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: .9em;
    text-align: right;
    text-transform: uppercase;
    opacity: .6; }
    #playList #toggleView i {
      margin-left: 3px; }
    #playList #toggleView:hover {
      opacity: 1; }
  #playList .playlistDuration {
    top: 5px; }
  #playList .playlistBtn {
    font-family: 'Alegreya Sans SC', sans-serif;
    text-transform: lowercase;
    font-size: 1.5em;
    display: block;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #333; }
    #playList .playlistBtn:hover {
      color: #bd672d; }
  #playList .trackItem {
    font-size: 1em;
    display: block;
    line-height: 170%; }
  #playList .trackBtn {
    font-family: Helvetica, Arial;
    font-size: .9em;
    color: #333; }
    #playList .trackBtn:hover {
      color: #C15300; }
  #playList .playlistDuration,
  #playList .trackLength {
    position: relative;
    color: #999;
    display: block;
    font-size: .8em;
    float: right; }
  #playList .sInfo,
  #playList .sPlay,
  #playList .sDownload {
    margin-right: 3px;
    opacity: .5; }
    #playList .sInfo:hover,
    #playList .sPlay:hover,
    #playList .sDownload:hover {
      opacity: 1; }

#trackInfo {
  display: block;
  width: 60%;
  float: left;
  padding: 20px;
  margin-left: 20px;
  border-top: 1px dotted #CCC;
  border-left: 1px dotted #CCC;
  overflow: visible;
  min-height: 250px; }
  #trackInfo a:link {
    color: #0063C7;
    text-decoration: none; }
  #trackInfo a:visited {
    color: #0063C7;
    text-decoration: none; }
  #trackInfo a:hover {
    color: #000000;
    text-decoration: none; }
  #trackInfo #firstTime {
    font-size: 1.2em;
    line-height: 170%; }
    #trackInfo #firstTime i {
      text-align: center;
      width: 30px; }
    #trackInfo #firstTime p {
      margin: 20px; }
    #trackInfo #firstTime ul {
      margin: 20px; }
  #trackInfo #trackTitle {
    font-family: 'Alegreya Sans SC', sans-serif;
    display: block;
    font-size: 2.5em;
    margin-bottom: 10px; }
  #trackInfo #trackDate,
  #trackInfo #trackDesc {
    margin-left: 20px; }
  #trackInfo #trackDate {
    display: block;
    margin-bottom: 10px;
    color: #000; }
    #trackInfo #trackDate:hover {
      color: #000; }
  #trackInfo #trackDesc {
    color: #000;
    font-size: 1em;
    line-height: 150%; }

@media screen and (min-width: 20em) {
  #header {
    height: 54; }
    #header .logo {
      top: 30%; } }

@media screen and (min-width: 30em) {
  #header {
    height: 137px; }
    #header .logo {
      top: 40%; } }

@media screen and (min-width: 48em) {
  #header {
    height: 115px; }
    #header .logo {
      top: 40%; } }

/* VOLUME */
#volumeController {
  width: 150px;
  background-color: red;
  display: block;
  position: relative;
  left: -20px; }

#slider {
  border-width: 1px;
  border-style: solid;
  border-color: #333 #333 #777 #333;
  border-radius: 25px;
  width: 100px;
  position: absolute;
  height: 13px;
  background-color: #8e8d8d;
  box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, 0.5), 0 1px 0 0px rgba(250, 250, 250, 0.5);
  left: 20px; }

.tooltip {
  position: absolute;
  display: block;
  top: -25px;
  width: 35px;
  height: 20px;
  color: #fff;
  text-align: center;
  font: 10pt Tahoma, Arial, sans-serif;
  border-radius: 3px;
  border: 1px solid #333;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(69, 72, 77, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.5)));
  background: -webkit-linear-gradient(top, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  background: linear-gradient(top, rgba(69, 72, 77, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8045484d', endColorstr='#80000000',GradientType=0 ); }

volumeController {
  display: none; }

.volume {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  right: -5px;
  position: absolute;
  margin-top: -5px; }

.ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-weight: bold;
  color: #1C94C4;
  outline: none;
  top: -7px;
  margin-left: -12px; }

.ui-slider-range {
  position: absolute;
  border: 0;
  top: 0;
  height: 100%;
  border-radius: 25px; }