html {
  width: 100%;
  height: 100%;  
  overflow: hidden;
  padding: 0;
  margin: 0;
  outline: 0;
}

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #bb71f3;
  background: -moz-linear-gradient(-45deg, #bb71f3 0%, #3d4d91 100%);
  background: -webkit-linear-gradient(-45deg, #bb71f3 0%, #3d4d91 100%);
  background: linear-gradient(135deg, #bb71f3 0%, #3d4d91 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb71f3', endColorstr='#3d4d91', GradientType=1);
  font-family: "Helvetica Neue", "Futura", "Trebuchet MS", Arial;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/* Top Info */
#title {
  position: absolute;
  width: 100%;
  top: 3%;
  line-height: 34px;
  height: 34px;
  text-align: center;
  font-size: 32px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#timer {
  position: absolute;
  top: 0;
  left: 3%;
  text-align: left;
  font-size: 18px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#duration {
  position: absolute;
  top: 0;
  right: 3%;
  text-align: right;
  font-size: 18px;
  opacity: 0.5;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

/* Controls */
.controlsOuter {
  position: absolute;
  width: 100%;
  height: 90px;
  bottom: 2%;
  z-index: 2;
}

.controlsInner {
  position: absolute;
  width: 340px;
  height: 90px;
  left: 50%;
  margin: 0 -170px;
}

.btn {
  position: absolute;
  cursor: pointer;
  opacity: 0.7;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover {
  opacity: 1;
}
#playBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABGCAYAAACaGVmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QThERThENUFDNkJEMTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QThERThENUJDNkJEMTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOERFOEQ1OEM2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBOERFOEQ1OUM2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnFM7yIAAAFWSURBVHja7NRJDoMwDEDRcPL2ZoVeLEUtCyoCZPBsf8mS10+Wp5zzK6X0XGdJ0bdpRcnbPgfOESUFzjmKe5wrFLc4NSjucFpQ3OD0oJjHGUExiwOBYg4HEsUMDgaKehxMFLU4FCjqcChR1OBwoIjH4UQRiyMBRRyOJBQxOBJR2HEko7DhaEAhx9GEQoajEQUdRzMKGo4FFHAcSyhgOBZRhnEso3TjeEBpxvGEUo3jEeUWxzPKKU6gFHACpYATKMfegbLDWOcRl/Jr2X7JHI+2gOEZ5RTDI8othieUagwPKM0YllG6MSyiDGNYQgHDsIACjqEZBQ1DIwo6hiYUMgwNKOQYklHYMCSisGNIQhGDIQFFHAYnilgMDhTxGJQoajAoUNRhYKKoxcBAUY8BiWIGAwLFHMYIilmMHhTzGC0objBqUNxhXKG4xSihuMfYo8yB8d9HgAEATyefBJWpw70AAAAASUVORK5CYII=');
  width: 69px;
  height: 70px;
  left: 50%;
  margin: auto -34.5px;
}
#pauseBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABGCAYAAACaGVmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRjNDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRjRDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOERFOEQ1Q0M2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGMkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pne5d1AAAAB8SURBVHja7NCxCQAwAALBuP/QZoEUlinua0G4tD1j83Asv/4GChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFCpRXV4ABAOgpXYTDYwEwAAAAAElFTkSuQmCC');
  width: 69px;
  height: 70px;
  left: 50%;
  margin: auto -34.5px;
  display: none;
}
#prevBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRkJDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRkNDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgyOTNGOUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGQUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PndeAH8AAACtSURBVHja7NXJCcAgEAVQEevK0lk6M1aW6CGQQBBn+ephBv7F0wNn8Vd7OWCWnOjd2FpzYk7K2cJAxFEA78cwA6I3porohWlCoDEkBArDQmhjRAgtjApCilFFcDEQBAcTUYinKLcJCqFinGEMYxjDgDFpJkzZwDsSRf2mE4ni9gwEJW1gVZTWNKmgtEdbhELtGRYKvfRIqF4buAnV+xxUUaNu0y9q9KH8oG4BBgDjdpk0jMoz1gAAAABJRU5ErkJggg==');
  width: 35px;
  height: 35px;
  left: 0;
  top: 50%;
  margin: -17.5px auto;
}
#nextBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRjdDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRjhDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgyOTNGNUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGNkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiFbkXsAAACvSURBVHja7NZBDoAgDARA9GPiz/yZ8DKsxgMHY1rYBQ5sshdCwiQcWpdSOqWb1BGrSn6RiTJjmKhiDANVjUGiYBgECo6pQdEwJSg6xoJqhtGgVFkeETZBekhjdqZ6g4H5QnXH5Cg/CkadiZmYiZkYdtYGb8QRMDdi144C1jfFd0AG69RG7jNB6nsvV3+IZhgNgo6xIGiYEgQcU4OAYRCIagwSUYxhIMwYJsKEuQQYABTs+qTMuF1rAAAAAElFTkSuQmCC');
  width: 35px;
  height: 35px;
  right: 0;
  top: 50%;
  margin: -17.5px auto;
}
#playlistBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUVBQzMwNzRDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUVBQzMwNzVDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRUFDMzA3MkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRUFDMzA3M0M3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnWBPa0AAADGSURBVHjaYvz//z/DYAFMDIMIjDpm1DHDwjH/0fDugXAMCxK7AojPAnEHmpo0IFaisTsqIEECLPT+Q4ALlL0bihmQ+LQGYLsYoSXwf2iovAdiYyjbdaCiaQ+S2FkopjtgHK2bCESTC5r4+4GIKuQEjAz2DGQCHhTlDAtaLtoDjSJkoATN7iMzmjrRxO+NljODsZzpwBJNs0bLGShwhToCvWHVQYes7YruGJiFgljKmpEbTa5YKsrRcmbUMaOOGXUMNQBAgAEAm2XFJrn+jrsAAAAASUVORK5CYII=');
  width: 35px;
  height: 35px;
  top: 50%;
  left: 3%;
  margin: -17.5px auto;
}
#volumeBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUVBQzMwNzBDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUVBQzMwNzFDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRUFDMzA2RUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRUFDMzA2RkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtAZ+FgAAAHRSURBVHja7FjRbYMwEIWqC7CCO4IzgjMCHYEV6AjuCHSEMAKMkIwAI5ARXFt9rox1phDA5KMnPSGwOZ4fx/mOVCmVPIu9JE9ke5GRGpejyeQanUapkXlj5lzEIMM1GqjRAyG1eNCLCeAVyDQq9WOdRoHrDeDP7YCM8reGiNQYQER6D6DIGHDc02xFJsfqjF00GDEnRCaBegp+RmMp8oyYERcmAAvMvWl8aLSBuQ2O58D4Ff7eqJiZa4MTF1OYUsZAwF9BKaOw0tsf6pjx+wwVXWU41Pwk1DF2opQRK7+skDIyECMlrv8GfoztwMaW9K7XTqKMujeZV8SQma31eO0iNpkW8L/a3t02Yu7aITL8CDL2S2VE/jqsnnHJ3I8urnpKldhkOEFmdB6TTO7kFveVRScjoExLqBWVTIbsax765RFh7n74GoFMiQefCLXcbWFEhs/MFfeFZGon9fsx1I78PVDPyA3qmXyqnhEzV1lgRT124/rBSq+Dj/Pa7sDUPVesrEGRvUSZMlQ/rSmgCqc7qBZ0B7aQ37RVsb2QJOIp1DcNUDXbg4wFw2qV06j5ZCqQYSE/yYZ1LxVPvjJ86v50p/8ztr96X3JT+v+zKGDfAgwAZkMcn0x+AsMAAAAASUVORK5CYII=');
  width: 35px;
  height: 35px;
  top: 50%;
  right: 5%;
  margin: -17.5px auto;
}

#topControls {
  position: absolute;
  width: 100%;
  height: 45px;
  top: 100px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
/* map / cue / related links */
#mapBtn {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAABBlJREFUeF7tXVFSJCEMhZvoSVxPsu5J1JOsnmTdk+iehJ1MgcX00pBAIO3s6yrLH5qE95JHQCfjHR5TBLypdRh3IMA4CEAACDBGwNg8MgAEGCNgbB4ZAAKMETA2jwwAAcYIGJtHBoAA50IIN8657865h4jHi3Pu1Xv/YYzPdPNmGbABnQgoPUTAi/f+eToSAgMhhEfn3Lf4Qz6+OeeeewJmKQFM0PeIoIVSVlB2LH8y358qwXIvJWE6AZnjKWJGwUsR93s2GR0B8+a9v5cscAoBE0DfW1MigzKDZEDlif6TzKQ9iTvvh/f+ljuYxqkRsBD0KWQwJIaF62m/EmEqGrz14ACg18igvYJkqpoZcUOlIkAa7UXbywiIju9tSKxoWTToXEnlZa1WtJf8n05AdP5nLMEWYahmJp0r9sreYUMrCCDwVdL1NA8BMg2MYTQ7JlhBwPsgaEkS/lAZeZKy0FgnVRVUwt4pEt8B7fmVZsCsIKAFWGlxF6DnA1oE5AuK8kdk0LUF/V71fJ7IJf5ynBNXQS0HMqO7oPcSsHmPpGsmGf9s3mS/tf4jZABVRmd54USAxoKUy+FUvhb91/A3x0U9A6QRoL2gjuuDpO2sSz9tf6+OgIJMUdFQe24lF2gggKNr2RhtwLTnu+oMmLFpggBkQP3gZL0Jb/nRjljt+SBBwutjEAAJggTVYkAqwZAgSJBuRmETNo4oEAACRLIuGvwVTpbIAGSAKKhFg5EBX+APMtI6WPtkCQmCBIlURTQYEgQJEt4E6QOmLZnIAGPJBAEgAHdBIl3V1kDt+VCGGqc0CAABon1VNBjnAP2yFgQYZywIAAEoQ1GGChDQLpshQZAgSJAgAfXLMO2UxkHMOKVBAAgQ7auiwTgJ60swCDDOWBAAAlCGogwVIKBdNkOC/mcJip9qb32QmjoRdveD045Y7fmWZ8BIKwFOCzIcxHZSeqAT4RbTYheTPRnXitgQQupZVG3TJv3f2KkZMLM3WwS82Vl3hAAu6Dn55gScmuNRh6vUUGlVUyUiothZV0pAD+hHI0BQ1E0ZetFZl0PAKOggYJ/HZo835RCgnkM/JHOq7wES44WxSUpWSdeguxevk+/zm3e3UrpjRbXGqloNvzvcEr3y1Nti3zIDmhVMvP7Ov9zhSD1GWf63aFxNgKiGLxyqEhlWLZNVQL/YtFsMFUDoadxa7UTY4QMRsf3aE+k03PHqoI8S8IvZNHWq42kRWTNXzc66S3ynNfRIEEUekVDS4yGJ4YZk5dphpJnrMtCHMiDbGNM3TKSO5Ky+m6Mgc99ntjk2DZiuDOACcKRxm866lCWH+ZossQQdCdhr8AUEGLMIAkCAMQLG5pEBIMAYAWPzyAAQYIyAsXlkAAgwRsDYPDIABBgjYGz+L2gtJZ0HK0IkAAAAAElFTkSuQmCC);
    width: 35px;
    height: 35px;
    left: 20px;
    top: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px auto;
}
#cueBtn {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAA1pJREFUeF7tnI1t3DAMRsVN2knaTNJmkiaTNJ2k2aTZhD0CdnooapPSRx9P7mcgSICY4vm9I3U/sqTxKCUgpdmZvFFA8ZOAAiigmEBxelYABRQTKE7PCqCAYgLF6VkBFFBMoDg9K4ACigkUp2cFUEAxgeL0rIDZBKjqh9bal9ba5+Wn+BLK07+11tafZxGxv8NHVwWo6rfLyE/h0f+/Ew3+i4g8Ry89LEBVf/IZH8XaXkXkIXJ2SICqfm2tfY8MyHPeCTxFKsEVsPT8XwTbTcDa0aOIvO5FRgSw73ezj1dBRIC1HmtBPPoJuHNBRIC1H3vpyaOfwJuIfERbkO4OIOJK7H/c80RcXppDfFx4aIJ5UI49UpQPBYxxf4+iABAgGk4BKEEwngJAgGg4BaAEwXgKAAGi4RSAEgTjKQAEiIZTAEoQjKcAECAaTgEoQTCeAkCAaDgFoATBeAoAAaLhFIASBOMpAASIhlMAShCMpwAQIBpOAQ5BVbU1rJ8ii6RGZFDADrWrRWWhRVIUMEJgX8D1elZ3ichIelbABrWNxcS2cvlxBPRWzKkEZPXrZRx79v/rCC2ajUo6jYCsfh1YTJw6H5xJQEq/Dt7HkDYfnEJAVr8Owl+7S8p8ML2ArH7tjLPV0uH5YGoBWf06MM6WAHg+mF1A5L4zt193tp6/Zbjj770imlZAJ7TNft05zhbL4flgSgFZ/XpwnNT5YDoBWf0aGCd1PphRQKTvb0Jab/lJaj3wfDCVgCRoL8s9a/Yx8xFH13wwjYDkfn0E+Osxw+8PphBwQL8+WkD4/cEsApC+fzRsd76Z+n1AUt+vkuDOB1NUQBW9W+SlgFtQ3slBARTArQr2ngOX5TC7N8PzTnmwgtiCQIBoOAWgBMF4CgABouG3EMANmwBLGZPwjB8jAMhSQ9130pFXQdy0b9yJ+6lqRIDtF8dtK8ckPMDbVlpebtw6RN/2DLUvj3YPtwLWaFXl9pUezT//d7erXE8NC1gqgfOBL8Ht+9dDdAlYJNicYCLs91Hfy/qXeT9nrFvX2xbFPw7dvv5+rvk8j6S7As5z6fdxJRRQ7IECKKCYQHF6VgAFFBMoTs8KoIBiAsXpWQEUUEygOD0rgAKKCRSnZwVQQDGB4vSsgGIBvwEWinl/v1fngwAAAABJRU5ErkJggg==);
  width: 35px;
  height: 35px;
  top: 5px;
  left: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0px auto;
}
#linkBtn {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAABBZJREFUeF7tm9Fx2zAQRIFO4koSV5K4ktiVxKkkdiVxJ4jOQ8wwGkp7B4BcUlrNePwhEQfsu70DISonvagKZGp0BU8CQE4CARAAsgLk8HKAAJAVIIeXAwSArAA5vBwgAGQFyOHlAAEgK0AOLwcIAFkBcng5QADICpDDywECQFaAHF4OEACyAuTwcoAAkBUgh5cDBICsADm8HCAAZAXI4eWAWwVQSvmSUvqeUrL/87+uJeecryZNKaV0BUjpY7re/te/95zzW+e4i5cPdcBM9Oc1JmtjbgDg0tQNhkF4yTlXSN3LHAJgC+HrSokA6hRM/NeU0u8RILoBlFK+pZT+dKeCc4AdAPgPxGk+L86pjy9Bp3r78zTqauVmacY7AlCn99wDodkBpRTLesv+TV87BGDrf805P7UI0QSAJT65CSN9myCEATDKznzlO3VAczkKAWhouHXrZv9X20uj1Iy8P+3o6n3L1+keJlJqQz0hCiBykxOaSESkLT/bsMW2ZHv0blHdAEopv053hj8ci7cJPK115+iIv8pHJhC28TB3oJe7H7gATMH/oqg9uwHH2PSPBNzgTkIvAE/2v+WcH+kqrTyBCYLpgfqCywVeAJb9yHpW91Y5sFpZ0/DwzorwkXN+QINDAM6dz000XCTW/P1SivVDc8K1F0xKDwAYCO3NIws7ymedpQgmpgcAqv+uWndJ2AHn913MepLHcSIA+6IHADrzsS2nHc82vQ4OAB1GDgGAGvA9A0BH8bARexyA7n4fvHd9SxY5uANsZ3jt/kgAUF3s6QE2NkogNL7HAagEwa3WNRHQApCAve8jgcDc0Q5xiANQE4ZbrRsGsEkTRgBgp79hAN1bdE8JQpShzXrLxF6vL6Wg8gx3iB4AqNObPl1laK8CA+eixLTL4Q4RApg6PSpD7uPXI4p9Pmfn+Rh8iMzG9QLw0L6bUuQ4gjBtXUc0XgCeMnQXpSjwzSAsP24HTGUIdfzq1NB3okcpSc7Tz7ocV/ZHAXhdYON+Pj/Z88TYnsBEH8WJ3Ny5SlAVw/klxFy7+ljKu0E5wjdms8dS6iMpngcR5msOnQyEAEylyNOQV0tglF3ko43wdjwMINgPhoPYMYCmE4FWAPXXL5s+Gf3ZtNb/hUxL0jSJH2rCS7OKNqeWlZ1fs0MA4bIzX1OTA+YDbA1hRwCG3P13A5h6wmYlaScAurJ+qAPO3FBB2NYNPcjVVJGIAIb+NqwufogDLvSHW/qZ6pAf5C3ptBqApvS+w4sEgAxdAASArAA5vBwgAGQFyOHlAAEgK0AOLwcIAFkBcng5QADICpDDywECQFaAHF4OEACyAuTwcoAAkBUgh5cDBICsADm8HCAAZAXI4eUAASArQA4vBwgAWQFyeDlAAMgKkMP/A14GuHD7s7qMAAAAAElFTkSuQmCC);
  width: 35px;
  height: 35px;
  left: 575px;
  top: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0px auto;
  visibility: hidden;
}
#waveBtn {
  background-image: url(data:image/png;base64,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);
  width: 35px;
  height: 35px;
  left: 200px;
  top: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0px auto;
}

/* Progress */
#waveform {
  width: 100%;
  height: 30%;
  position: absolute;
  left: 0;
  top: 50%;
  margin: -15% auto;
  display: none;
  cursor: pointer;
  opacity: 0.8;
  -webkit-user-select: none;
  user-select: none;
}
#waveform:hover {
  opacity: 1;
}
#bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  opacity: 0.9;
}
#progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: -1;
}

/* Loading */
#loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  display: none;
}
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Plylist */
#playlist {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
#list {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  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: center;
  -ms-flex-align: center;
  align-items: center;
  z-index:310
}
.list-song {
  width: 100%;
  height: 40px;
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  z-index:3
}
.list-song:hover {
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
/* Volume */
#volume {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.33);
  touch-action: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: none;
}
.bar {
  position: absolute;
  top: 50%;
  left: 5%;
  margin: -5px auto;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  z-index: 9;
}
#barEmpty {
  width: 90%;
  opacity: 0.5;
  box-shadow: none;
  cursor: pointer;
}
#barFull {
  width: 90%;
}
#sliderBtn {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 93.25%;
  margin: -25px auto;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
  border-radius: 25px;
  z-index:10;
  cursor: pointer;
}
/* Related Links Area */
#relatedLinks {
  width: 33%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 67%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
  cursor: pointer;
  margin: 0px auto;
  visibility: hidden;
}
/* Viewport for video, map, and related links */
#viewport {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0px;
  top: 95px;
  display:grid;
  justify-content: center;
  place-items:center;
}
/* Main Text Cue Container */
#cueContainer {
  width: 100%;
  height: 90px;
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 32px;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  color:rgba(255, 255, 255, 0.875);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  padding: 10px;
  margin: 5px auto;
  background-color: rgba(0, 0, 0, 0.33);
  z-index:5;
}
/* Map Canvas Area */
#mapArea {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0px;
  min-width:500px;
  justify-content: center;
  z-index: 1;
  align-items: center;
  text-align: center  ;
  display:inline-block;
}
#mapImage{
  height: 100%;
  width: 100%;
  position: relative;
  top: 0px;
  margin: 0px auto;
}
.mapSuggested {
  fill: rgb(216, 216, 216); 
  stroke: rgb(0, 0, 0);
  stroke-width: 0;
  fill-opacity: 0;
  opacity: .8;
  cursor: pointer;
}
.mapTrack {
  fill: rgb(0, 0, 0); 
  stroke: rgb(0, 0, 0);
  stroke-width: 0;
  fill-opacity: 0;
  opacity: 1;
  cursor: pointer;
}

/* Tooltip */
#tooltip {
  background: cornsilk;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
  z-index: 100;
}
/* Tracktip */
#tracktip {
  background: SteelBlue;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
  z-index: 100;
}
/* Fade-In */
.fadeout {
  webkit-animation: fadeout 0.5s;
  -ms-animation: fadeout 0.5s;
  animation: fadeout 0.5s;
}
.fadein {
  webkit-animation: fadein 0.5s;
  -ms-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-ms-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* Landscape / Portrait */
/* Portrait orientation styles */ 
@media only screen and (orientation: portrait) { 
  /* Controls */
    .controlsOuter {
      position: absolute;
      width: 100%;
      height: 70px;
      bottom: 3%;
      z-index: 2;
    }
    /* Viewport for video, map, and related links */
    #viewport {
      width: 100%;
      top: 100px;
      height: calc(100% - 500px);
      position: absolute;
      left: 0px;
    }
    #waveform {
      width: 100%;
      top: 25%;
      z-index:-2;
    }
    /* Main Text Cue Container */
    #cueContainer {
      width: 100%;
      position: absolute;
      left: 0px;
      top: 250px;
      margin: 10px auto;
      z-index:0;
      font-size: 48px;
      line-height: 60px;
      background-color: transparent;
    }
    /* Map Canvas Area */
    #mapArea {
      width: 100%;
      height: 50%;
      position: absolute;
      margin: 10px auto;
      top: 750px;
      min-width:500px;
      z-index: 1;
    }

  }
  
  /* Landscape orientation styles */ 
  @media only screen and (orientation: landscape) { 
  
    #topControls {
      top:55px;
    }
    /* Controls */
    .controlsOuter {
      position: absolute;
      width: 100%;
      height: 70px;
      bottom: 2%;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      padding: 5px;
    }
    #relatedLinks {
      width: 33%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 67%;
      margin: 0px auto;
      visibility: hidden;
    }
    /* Viewport for video, map, and related links */
    #viewport {
      width: 100%;
      top: 95px;
      height: calc(100% - 110px);
      position: absolute;
      left: 0px;
    }
    /* Main Text Cue Container */
    #cueContainer {
      width: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
      margin: 10px auto;
      z-index:5;
    }
    /* Map Canvas Area */
    #mapArea {
      width: 100%;
      height: 50%;
      position: absolute;
      margin: 10px auto;
      top: 0px;
      min-width:500px;
      max-width:800px;
      z-index: 1;
    }
    .list-song {
      width: 100%;
      height: 36px;
      font-size: 32px;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
      z-index:3
    }
  }