/* ---------------------------------------------- DEFAULT STYLING */

a {
  color:var(--accent);
  text-decoration:none;
  transition:all .4s ease-in-out;
}

a:hover {
  color:var(--text);
  cursor:pointer;
}

i {
  opacity:.6;
}

.reblog-content h1,h2 {
  padding:10px;
  border-radius:var(--borderstyle);
  font-weight:normal;
  line-height:22px;
  font-size:14px;
  letter-spacing:1px;
}

.tippy-tooltip.custom-theme .tippy-svg-arrow {
  fill:rgba(0,0,0,.6);
}

.tippy-tooltip.custom-theme {
  display:block;
  z-index:999999999999999999999;
  word-wrap:break-word;
  overflow: hidden;
  padding:3px;
  background:rgba(0,0,0,.6);
  border-radius:5px;
  color:#ddd;
  font-size:12px;
  letter-spacing:2px;
  transition:.5s;
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
animation-duration:2s;
}

ul {
  list-style:none;
}

ul li:before {
  content:'—';
  margin-right:10px;
  width:auto!important;
  margin-top:0px!important;
  margin-left:0px!important;
  height:auto!important;
  position:relative!important;
  background:transparent!important;
  vertical-align:middle;
}

li {
  margin-left:-15px;
}

.read_more_container {
  padding-top:15px;
  padding-bottom:15px;
  text-align:center;
}

.read_more {
  padding:10px;
  border-radius:var(--borderstyle);
}

::selection {
  background:rgba(var(--rgbaccent),.5);
}


hr {
  border:none;
  position:relative;
  margin:8% auto 8% auto;
  width:40%;
  box-shadow:0px -1px 1px 0px rgba(0,0,0,0.1), 0px 1px 1px 0px rgba(255,255,255,0.1);
  border-top:1px solid rgba(0,0,0,.4);
}

blockquote {
  border-left:1px solid rgba(0,0,0,.5);
  margin-left:0;
  padding-left:15px;
  max-width:100%;
}

figcaption iframe {
  min-height:190px!important;
}

/* ---------------------------------------------- TUMBLR CONTROLS */

iframe.tmblr-iframe:hover {
  opacity:1!important;
  z-index:999999;
}

#controls {
  padding:10px;
  top:20px;
  right:20px;
  transition:all .4s ease-in-out;
  cursor:pointer;
  z-index:9999999999999999;
  position:fixed;
  width:12px;
  border-radius:100%;
  height:12px;
  cursor:default;
}

#controls svg,#credit svg,#close svg,.pagi svg,#scrolltop svg,#scrolldown svg {
  margin-left:1px;
  margin-top:1px;
}

#scrolltop,#scrolldown {
  padding:10px;
  top:80px;
  right:20px;
  transition:all .4s ease-in-out;
  cursor:pointer;
  z-index:9999999999999999;
  position:fixed;
  width:12px;
  border-radius:100%;
  height:12px;
  cursor:pointer;
}

/* ---------------------------------------------- POST STYLING */

#container {
  margin:0 auto;
  width:26%;
}

.post {
  margin-top:50px;
  margin-bottom:50px;
  max-width:700px;
}

.inner {
  border-radius:var(--borderstyle);
  width:100%;
  line-height:18px;
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.1);
}

.caption {
  padding:15px;
  padding-top:10px;
  width:calc(100% - 60px);
  margin-top:23px;
  margin-left:15px;
  margin-bottom:15px;
  border-radius:var(--borderstyle);
  line-height:25px;
  word-wrap:break-word;
}

.post img {
  max-width:100%;
  height:auto;
  border-radius:var(--borderstyle);
  display:initial;
  text-align:center;
  transition:all .4s ease-in-out;
  opacity:.9;
}

.post a,#description a {
  color:var(--text);
  border-bottom:1px solid rgba(var(--rgbaccent),.5);
}

.post a:hover,#description a:hover {
  border-bottom:1px solid var(--accent);
}

.post .media img {
  cursor:zoom-in;
  margin:0 auto;
  opacity:.9;
  transition:all .4s ease-in-out;
  display:block;
}

.post:hover img,.post:hover .media,.post:hover video,.post:hover img {
  opacity:1;
}

.title {
  font-size:15px;
  letter-spacing:2px;
  width:calc(100% - 60px);
  margin-left:15px;
  margin-top:25px;
  line-height:25px
}

.title .grad {
  padding:15px;
  border-radius:var(--borderstyle);
}

.tmblr-full img {
  display:block;
}

.tmblr-full {
  display:inline-block;
}

.tmblr-full a {
  border-bottom:0px;
}

.tmblr-full a:hover {
  border-bottom:0px;
}

.tmblr-attribution {
  padding:5px 10px 5px 10px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.025);
  border-radius:var(--borderstyle);
  font-size:10px;
  display:block;
}

.tmblr-attribution:after {
  content:'>';
  float:right;
  display:inline;
}

.gradient {
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(0,0,0,0.49) 51%, rgba(255,255,255,0) 100%);
  width:100%;
  height:30px;
  border-top-left-radius:var(--borderstyle);
  border-top-right-radius:var(--borderstyle);
  opacity:.15;
}

.buttons {
  position:absolute;
  margin-top:2px;
  right:10px;
}

.button {
  display:inline-block;
  margin-left:-5px;
}

.button img {
width:10px;
height:10px;
}

/* ---------------------------------------------- CAPTIONS */

.reblog-header {
  display:inline-block;
  padding:5px;
  border-radius:30px;
  padding-right:10px;
  font-size:13px;
  margin-bottom:5px;
  margin-top:10px;
  letter-spacing:1px;
}

.reblog-header:active {
  cursor:pointer;
  padding:6px 9px 4px 6px;
}

.reblog-header img {
  display:inline-block;
  vertical-align:middle;
  width:20px;
  height:20px;
  border-radius:100%;
  margin-right:5px;
  margin-top:-2px;
}

.reblog-header a {
  border-bottom:0px;
}

.reblog-header a:hover {
  color:var(--text);
  border-bottom:0px;
}

/* ---------------------------------------------- POST INFO */

.info-tags {
  font-size:11px;
  margin-top:10px;
}

.info-tags .feather {
  margin-right:10px;
  opacity:.75;
  width:10px;
}

.post:hover .info-tags .feather {
  opacity:1;
}

.info-tags span:after {
  content:'·';
  padding-left:5px;
  padding-right:5px;
  opacity:.3;
}

.info-tags span:last-of-type:after {
  content:'';
}

.info-tags a {
  opacity:.3;
}

.post:hover .info-tags a, .post:hover .info-tags span:last-of-type:after {
  opacity:.6;
}

.post .info-tags a:hover {
  color:var(--text);
  opacity:1;
}

.info-tags a {
  margin:5px;
}

.post-info {
  padding:15px;
  width:calc(100% - 30px);
  margin-top:10px;
  cursor:default;
}

.permalink-button {
  float:right;
}

.post-info.inner a {
  border-bottom:0px;
}

.post-info a:hover svg {
  color:var(--accent);
}

.post-info-inner {
  padding:10px;
}

.post-info .feather {
  width:13px;
  height:13px;
  color:var(--text);
  vertical-align:middle;
  display:inline-block;
  margin-right:5px;
  transition:all .4s ease-in-out;
  margin-left:8px;
}

.reblog-button {
  float:right;
  margin-left:8px;
  margin-right:5px;
}

.like-button {
  position:relative;
  vertical-align:middle;
  overflow:hidden;
  color:var(--text);
  display:inline-block;
  padding-top:2px;
  padding-left:1px;
  padding-right:1px;
  margin-top:-2px;
  float:right;
}

.like-button svg {
  width:13px;
  height:13px;
  color:var(--text);
  opacity:1;
  transition:all .4s ease-in-out;
  padding-right:5px;
  margin-bottom:-3px;
  transition:all .4s ease-in-out;
}

.like-button svg:hover,.like-button:hover svg {
  cursor:pointer;
  color:var(--accent);
}

a.like-button .liked + svg {
  fill:var(--accent);
  transition:all .4s ease-in-out;
}

.like-button .like_button iframe {
 position:absolute;
 margin-left:-5px;
 margin-top:-2px;
 z-index:2;
 opacity:0;
}

.like_button iframe {
  margin-left:2px;
  margin-bottom:2px;
  transform:scale(0.6,0.6);
}

.like-button:hover {
  cursor:pointer;
}

/* ---------------------------------------------- LIGHTBOX */

.vignette, #vignette {
  opacity:0;
}

.tmblr-lightbox, #tumblr_lightbox {
  -webkit-backdrop-filter:blur(4px)!important;
  backdrop-filter:blur(4px)!important;   
  z-index:99999999999999999!important 
}

.lightbox-image, #tumblr_lightbox img {
  border-radius:var(--borderstyle)!important;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  box-shadow:none !important;
  height:auto;
}

.lightbox-caption, #tumblr_lightbox_caption {
  visibility:hidden;
}

/* ---------------------------------------------- PHOTOSET POSTS */

[photoset-layout] {
  grid-gap:10px;
  overflow:hidden;
  border-radius:var(--borderstyle);
}

[photoset-layout] img:hover {
  cursor:zoom-in;
}

figure img {
  max-width:100%;
  border-radius:var(--borderstyle);
}

.npf_photoset {
  border-radius:var(--borderstyle);
  text-align:center;
  padding:15px;
  border-radius:var(--borderstyle);
}

.npf_photoset img {
  cursor:zoom-in;
}

.npf_row {
  max-width:100%;
  margin-left:0px!important;
  margin-right:0px!important;
}

/* ---------------------------------------------- VIDEO POSTS */

.videoWrapper {
  position:relative;
  padding-bottom:56.25%;
  height:0;
  border-radius:5px;
  overflow:hidden;
}

.videoWrapper iframe{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  border-radius:5px;
}

video {
  max-width:100%;
  height:auto!important;
  border-radius:5px;
}

.embed_iframe {
  max-width:100%;
}

/* ---------------------------------------------- AUDIO POSTS */

.audio {
  padding:10px;
  border-radius:var(--borderstyle);
  display:flex;
  max-height:147px;
}

@keyframes spin {
  from {
      transform:rotate(0deg);
  }
  to {
      transform:rotate(360deg);
  }
}

.audio-image {
  vertical-align:top;
  min-width:130px;
  max-width:130px;
  min-height:130px;
  max-height:130px;
  margin-right:5px;
  margin-top:5px;
  margin-bottom:5px;
  padding:5px;
  border-radius:var(--borderstyle);
  z-index:1;
}

.audio-image img {
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  border-radius:var(--borderstyle);
  box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.15);
}

.audio-info {
  vertical-align:middle;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  padding:10px;
  border-radius:var(--borderstyle);
  height:130px;
  margin-left:5px;
}

.error_icon svg {
stroke:var(--text);
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.audio_info {
  padding:10px;
}

.audio_player .seekbar_progress {
width:0;
height:100%;
  background:var(--accent);
  border-radius:var(--borderstyle);
  box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,.4),inset -2px -2px 0px 0px rgba(0,0,0,.1),inset -1px 0px 0px 0px rgba(0,0,0,0.3);
}

.current_time {
  float:left;
  padding-top:2px;
  padding-left:15px;
  letter-spacing:1px;
  opacity:.8;
  font-size:8px;
}

.time_left {
  float:right;
  opacity:.5;
  letter-spacing:1px;
  opacity:.8;
  font-size:8px;
  padding-top:2px;
  padding-right:15px;
}

.audio-artist {
  text-align:center;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  opacity:.8;
  text-transform:uppercase;
  letter-spacing:1px;
  text-overflow:ellipsis;
}

.audio-track {
  text-align:center;
  margin-top:5px;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.audio-buttons {
  margin-top:22px;
  text-align:center;
}

.audio-buttons .feather {
  width:12px;
  height:12px;
  transition:all .4s ease-in-out;
  margin-bottom:1px;
  opacity:.8;
}

.audio-button {
  cursor:pointer;
  vertical-align:top;
}

.audio-button:hover .feather {
  color:var(--accent);
}

.audio-buttons span {
  display:inline-block;
  margin-left:10px;
  padding:6px;
  border-radius:100%;
  width:12px;
  height:12px;
}

.audio-button:active {
  padding:7px 5px 5px 7px;
  width:12px;
  height:12px;
}

.audio-buttons span:first-of-type {
  display:inline-block;
  margin-left:0px;
}

.tumblr_audio_player {
  height:85px;
  width:100%;
  border-radius:var(--borderstyle);
}

.soundcloud_audio_player {
   width:100%;
}

.spotify_audio_player {
  width:100%;
}

/* ---------------------------------------------- LINK POSTS */

.link-post {
  padding:15px;
  border-radius:var(--borderstyle);
  padding-top:2px;
  margin-top:5px;
}

.link-post .title {
  display:inline-block;
  margin-bottom:10px;
  margin-left:0px;
}

.link-post svg {
  display:inline-block;
  width:15px;
  vertical-align:middle;
  margin-top:-3px;
}

/* ---------------------------------------------- CHAT POSTS */

.chat-line {
  margin-bottom:10px;
  padding:5px 10px 5px 10px;
}

.chat-line:last-of-type {
  margin-bottom:0px;
}

.chat-label {
  font-weight:bold;
  letter-spacing:1px;
  font-size:11px;
}

/* ---------------------------------------------- QUOTE POSTS */

.quote-post {
  padding:15px;
  border-radius:var(--borderstyle);
  font-size:16px;
  letter-spacing:1px;
}

.quote-source {
  margin-top:10px;
  opacity:.8;
  font-style:italic;
  letter-spacing:1px;
  font-size:11px;
}

/* ---------------------------------------------- ANSWER POSTS */

.ask-bubble {
  padding:15px;
  width:calc(100% - 60px);
  margin-left:15px;
  margin-top:22px;
  border-radius:var(--borderstyle);
}

.asker-port.inset {
  border-radius:100%;
}

.asker-port {
  border-radius:100%;
  display:inline-block;
  padding:5px;
  vertical-align:top;
}

.asker-port img {
  border-radius:100%;
  width:60px;
}

.ask-content {
  padding:15px;
  display:inline-block;
  width:calc(100% - 114px);
  line-height:22px;
  word-wrap:break-word;
}

.asker-label {
  padding:5px 10px 5px 10px;
  margin-top:10px;
  letter-spacing:2px;
  font-size:11px;
  opacity:.8;
  display:block;
  text-transform:lowercase;
  font-style:italic;
}

/* ---------------------------------------------- PERMALINK PAGE */

#notebox {
  max-height:300px;
  width:calc(100% - 30px);
  margin-top:20px;
  margin-bottom:10px;
  overflow:auto;
  padding:15px;
  border-radius:var(--borderstyle);
}

#notebox blockquote {
  border-left:0px transparent;
}

#notebox a {
  color:var(--text);
  border-bottom:0px;
}

#notebox a:hover {
  color:var(--text);
}

#notebox ol {
  margin-top:0;
  margin-bottom:0;
  margin-left:-40px;
}

#notebox ol li {
  list-style:none;
  padding:6px;
  word-wrap:break-word;
  border-radius:30px;
  font-size:8px;
  letter-spacing:1px;
  margin-left:0px;
  text-transform:uppercase;
  margin-top:10px;
}

#notebox ol li:first-of-type {
  margin-top:0px;
}

#notebox ol li:nth-child(odd) {
  font-weight:bold;
}

#notebox img {
  display:inline-block;
  vertical-align:middle;
  width:18px;
  height:18px;
  border-radius:100%;
  margin-right:10px;
}

.more_notes_link {
  text-align:center;
  font-size:9px;
  font-weight:bold;
  color:var(--text);
}

#permnav {
  padding-top:20px;
  padding-bottom:20px;
}

#permnav .feather {
  width:12px;
  height:12px;
  vertical-align:middle;
  margin-top:-2px;
}

#permnav a {
  padding:10px 15px 10px 15px;
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:all 0s ease-in-out;
  border-bottom:0px;
}

.permnav {
  border-radius:30px;
}

#perma {
  margin-top:-20px;
}

.permatag a {
  font-size:11px;
  margin-right:10px;
  text-align:center;
  margin-top:15px;
  border-radius:var(--borderstyle);
  line-height:30px;
  padding:5px 7px 5px 7px;
  border-bottom:;
}


/* ---------------------------------------------- LEFT SIDEBAR */

#sidebar {
  position:fixed;
  top:80px;
  z-index:1;
  margin-right:100%;
  width:220px;
  margin-left:-300px;
}

#notepad {
  padding:5px;
  padding-right:7px;
  border-radius:var(--borderstyle);
  margin-top:15px;
  width:100%;
  z-index:1;
  position:relative;
}

#notepad .inner {
  padding:15px;
  width:calc(100% - 30px);
  z-index:1;
  position:relative;
}

#spiral {
  width:100%;
  margin-top:-30px;
  text-align:center;
}

#notepad-footer {
  padding:5px;
  border-bottom-left-radius:var(--borderstyle);
  border-bottom-right-radius:var(--borderstyle);
  width:calc(100% - 10px);
  margin-top:-6px;
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.1),inset 0px 1px 0px 0px rgba(255,255,255,0.1);
  z-index:3;
  position:relative;
}

#notepad-footer svg {
  width:15px;
  height:15px;
  color:#989898;
  vertical-align:baseline;
}

.text {
  float:right;
}

#description {
  margin-top:10px;
  margin-bottom:10px;    
  max-height:200px;
  overflow:auto;
  border-radius:var(--borderstyle);
  overflow-x:hidden;
  padding:10px;
  width:calc(100% - 20px);
  line-height:22px;
  text-align:center;
}

#clock {
  width:220px;
  position:relative;
}

#clock .inner {
  background-size:cover;
  background-repeat: no-repeat;
  width:220px;
  height:150px;
}

#cal { 
  width:100%;
  height:20px;
  border-bottom-left-radius:var(--borderstyle);
  border-bottom-right-radius:var(--borderstyle);
  margin-top:-6px;
  padding-top:5px;
  font-size:10px;
  letter-spacing:1px;
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.1);
}

#cal .weekdays{
text-align:center;
}

#cal .weekdays span {
opacity:0.5;
margin:5px;
}

#cal .weekdays span.active {
opacity:1;
font-weight:bold;
}

/* ---------------------------------------------- RIGHT SIDEBAR */

#sidebar2 {
  position:fixed;
  top:80px;
  z-index:1;
  margin-left:calc(26% + 80px);
  width:320px;
}   

#playlist .inner {
  padding:10px;
  width:calc(100% - 20px);
  height:130px;
}

.playlist {
  width:100%;
  height:200px;
}

#album-art {
  height:calc(100% - 2px);
  width:calc(100% - 2px);
  border-radius:2px;
  -webkit-transition:all .5s ease 0s;
  transition:all .5s ease 0s;
  box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.15);
  overflow: hidden;
}

#album-art img {
  border-radius:2px;
  display:block;
  position:absolute;
  opacity:0;
  z-index:-1;
  width:86px;
  height:86px;
}

#album-art img.active {
  opacity:1;
  z-index:1;
}

#album-art.active img.active {
  z-index:1;
}

#buffer-box {
  position:absolute;
  top:50%;
  right:5px;
  left:5px;
  height:13px;
  color:#333;
  font-size:9px;
  text-align:center;
  font-weight:bold;
  line-height:1;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:5px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  margin:-12px auto 0 auto;
  background-color:rgba(255, 255, 255, 0.19);
  z-index:2;
  opacity:0;
  box-shadow:0px 3px 8px 2px rgba(0,0,0,0.1);
}

#album-art img, #buffer-box {
  transition:0.1s linear all;
}

#album-art.buffering img {
  opacity:0.5;
}

#album-art.buffering img.active {
  opacity:0.8;
  filter:blur(1px);
  -webkit-filter:blur(1px);
}

#album-art.buffering #buffer-box {
  opacity:1;
}

.ring {
  border:1px solid rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1);
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1);
  border-radius:100%;
  position:absolute;
}

.ring1 {
  width:72px;
  height:72px;
  margin-top:3px;
  margin-left:3px;
}

.ring2 {
  width:64px;
  height:64px;
  margin-top:3px;
  margin-left:3px;
}

.ring3 {
  width:56px;
  height:56px;
  margin-top:3px;
  margin-left:3px;
}

.ring4 {
  width:48px;
  height:48px;
  margin-top:3px;
  margin-left:3px;
}

.ring5 {
  width:40px;
  height:40px;
  margin-top:3px;
  margin-left:3px;
}

.playlist-info-container {
  width:140px;
  height:53px;
  z-index:1;
  position:absolute;
  display:inline-block;
  vertical-align:top;
  margin-left:33px;
  border-radius:var(--borderstyle);
  padding:10px;
}

.playlist-info-container svg {
  width:12px;
  height:12px;
  display:inline-block;
}

#album-name,#track-name {
  display:inline-block;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  margin-left:10px;
  padding-top:5px;
  width:118px;
  margin-bottom:-3px;
}

#equalizer {
  display:inline-block;
  position:absolute;
  margin-top:-25px;
  margin-left:180px;
  height:20px;
  display:-webkit-box;
  display:flex;
  -webkit-box-align:end;
  align-items:flex-end;
  transition:all .4s ease-in-out;
  
}

.bars.active:nth-child(0) {
  transition:all .4s ease-in-out;
  -webkit-animation: grow0 2101ms alternate infinite;
  animation: grow0 2101ms alternate infinite;
}

@-webkit-keyframes grow0 {
0% {
  height: 3px;
}
10% {
  height: 6px;
}
20% {
  height: 6px;
}
30% {
  height: 2px;
}
40% {
  height: 6px;
}
50% {
  height: 3px;
}
60% {
  height: 4px;
}
70% {
  height: 1px;
}
80% {
  height: 3px;
}
90% {
  height: 5px;
}
100% {
  height: 6px;
}
}

@keyframes grow0 {
0% {
  height: 3px;
}
10% {
  height: 6px;
}
20% {
  height: 6px;
}
30% {
  height: 2px;
}
40% {
  height: 6px;
}
50% {
  height: 3px;
}
60% {
  height: 4px;
}
70% {
  height: 1px;
}
80% {
  height: 3px;
}
90% {
  height: 5px;
}
100% {
  height: 6px;
}
}
.bars.active:nth-child(1) {
-webkit-animation: grow1 1665ms alternate infinite;
        animation: grow1 1665ms alternate infinite;
}

@-webkit-keyframes grow1 {
0% {
  height: 2px;
}
10% {
  height: 4px;
}
20% {
  height: 5px;
}
30% {
  height: 3px;
}
40% {
  height: 7px;
}
50% {
  height: 6px;
}
60% {
  height: 3px;
}
70% {
  height: 6px;
}
80% {
  height: 6px;
}
90% {
  height: 5px;
}
100% {
  height: 1px;
}
}

@keyframes grow1 {
0% {
  height: 2px;
}
10% {
  height: 4px;
}
20% {
  height: 5px;
}
30% {
  height: 3px;
}
40% {
  height: 7px;
}
50% {
  height: 6px;
}
60% {
  height: 3px;
}
70% {
  height: 6px;
}
80% {
  height: 6px;
}
90% {
  height: 5px;
}
100% {
  height: 1px;
}
}
.bars.active:nth-child(2) {
-webkit-animation: grow2 1722ms alternate infinite;
        animation: grow2 1722ms alternate infinite;
}

@-webkit-keyframes grow2 {
0% {
  height: 7px;
}
10% {
  height: 7px;
}
20% {
  height: 4px;
}
30% {
  height: 7px;
}
40% {
  height: 7px;
}
50% {
  height: 1px;
}
60% {
  height: 5px;
}
70% {
  height: 1px;
}
80% {
  height: 6px;
}
90% {
  height: 7px;
}
100% {
  height: 5px;
}
}

@keyframes grow2 {
0% {
  height: 7px;
}
10% {
  height: 7px;
}
20% {
  height: 4px;
}
30% {
  height: 7px;
}
40% {
  height: 7px;
}
50% {
  height: 1px;
}
60% {
  height: 5px;
}
70% {
  height: 1px;
}
80% {
  height: 6px;
}
90% {
  height: 7px;
}
100% {
  height: 5px;
}
}
.bars.active:nth-child(3) {
-webkit-animation: grow3 1564ms alternate infinite;
        animation: grow3 1564ms alternate infinite;
}

@-webkit-keyframes grow3 {
0% {
  height: 4px;
}
10% {
  height: 7px;
}
20% {
  height: 2px;
}
30% {
  height: 6px;
}
40% {
  height: 7px;
}
50% {
  height: 4px;
}
60% {
  height: 3px;
}
70% {
  height: 2px;
}
80% {
  height: 7px;
}
90% {
  height: 4px;
}
100% {
  height: 2px;
}
}

@keyframes grow3 {
0% {
  height: 4px;
}
10% {
  height: 7px;
}
20% {
  height: 2px;
}
30% {
  height: 6px;
}
40% {
  height: 7px;
}
50% {
  height: 4px;
}
60% {
  height: 3px;
}
70% {
  height: 2px;
}
80% {
  height: 7px;
}
90% {
  height: 4px;
}
100% {
  height: 2px;
}
}
.bars.active:nth-child(4) {
-webkit-animation: grow4 2069ms alternate infinite;
        animation: grow4 2069ms alternate infinite;
}

@-webkit-keyframes grow4 {
0% {
  height: 5px;
}
10% {
  height: 5px;
}
20% {
  height: 4px;
}
30% {
  height: 6px;
}
40% {
  height: 3px;
}
50% {
  height: 5px;
}
60% {
  height: 6px;
}
70% {
  height: 7px;
}
80% {
  height: 4px;
}
90% {
  height: 3px;
}
100% {
  height: 2px;
}
}

@keyframes grow4 {
0% {
  height: 5px;
}
10% {
  height: 5px;
}
20% {
  height: 4px;
}
30% {
  height: 6px;
}
40% {
  height: 3px;
}
50% {
  height: 5px;
}
60% {
  height: 6px;
}
70% {
  height: 7px;
}
80% {
  height: 4px;
}
90% {
  height: 3px;
}
100% {
  height: 2px;
}
}
.bars.active:nth-child(5) {
-webkit-animation: grow5 2093ms alternate infinite;
        animation: grow5 2093ms alternate infinite;
}

@-webkit-keyframes grow5 {
0% {
  height: 3px;
}
10% {
  height: 4px;
}
20% {
  height: 5px;
}
30% {
  height: 1px;
}
40% {
  height: 5px;
}
50% {
  height: 1px;
}
60% {
  height: 1px;
}
70% {
  height: 3px;
}
80% {
  height: 2px;
}
90% {
  height: 4px;
}
100% {
  height: 4px;
}
}

@keyframes grow5 {
0% {
  height: 3px;
}
10% {
  height: 4px;
}
20% {
  height: 5px;
}
30% {
  height: 1px;
}
40% {
  height: 5px;
}
50% {
  height: 1px;
}
60% {
  height: 1px;
}
70% {
  height: 3px;
}
80% {
  height: 2px;
}
90% {
  height: 4px;
}
100% {
  height: 4px;
}
}
.bars.active:nth-child(6) {
-webkit-animation: grow6 1851ms alternate infinite;
        animation: grow6 1851ms alternate infinite;
}

@-webkit-keyframes grow6 {
0% {
  height: 5px;
}
10% {
  height: 1px;
}
20% {
  height: 6px;
}
30% {
  height: 6px;
}
40% {
  height: 3px;
}
50% {
  height: 7px;
}
60% {
  height: 1px;
}
70% {
  height: 4px;
}
80% {
  height: 2px;
}
90% {
  height: 6px;
}
100% {
  height: 6px;
}
}

@keyframes grow6 {
0% {
  height: 5px;
}
10% {
  height: 1px;
}
20% {
  height: 6px;
}
30% {
  height: 6px;
}
40% {
  height: 3px;
}
50% {
  height: 7px;
}
60% {
  height: 1px;
}
70% {
  height: 4px;
}
80% {
  height: 2px;
}
90% {
  height: 6px;
}
100% {
  height: 6px;
}
}
.bars.active:nth-child(7) {
-webkit-animation: grow7 1515ms alternate infinite;
        animation: grow7 1515ms alternate infinite;
}

@-webkit-keyframes grow7 {
0% {
  height: 2px;
}
10% {
  height: 7px;
}
20% {
  height: 2px;
}
30% {
  height: 7px;
}
40% {
  height: 2px;
}
50% {
  height: 1px;
}
60% {
  height: 7px;
}
70% {
  height: 3px;
}
80% {
  height: 4px;
}
90% {
  height: 6px;
}
100% {
  height: 6px;
}
}

@keyframes grow7 {
0% {
  height: 2px;
}
10% {
  height: 7px;
}
20% {
  height: 2px;
}
30% {
  height: 7px;
}
40% {
  height: 2px;
}
50% {
  height: 1px;
}
60% {
  height: 7px;
}
70% {
  height: 3px;
}
80% {
  height: 4px;
}
90% {
  height: 6px;
}
100% {
  height: 6px;
}
}
.bars.active:nth-child(8) {
-webkit-animation: grow8 2169ms alternate infinite;
        animation: grow8 2169ms alternate infinite;
}

@-webkit-keyframes grow8 {
0% {
  height: 7px;
}
10% {
  height: 5px;
}
20% {
  height: 1px;
}
30% {
  height: 2px;
}
40% {
  height: 4px;
}
50% {
  height: 2px;
}
60% {
  height: 7px;
}
70% {
  height: 7px;
}
80% {
  height: 2px;
}
90% {
  height: 5px;
}
100% {
  height: 5px;
}
}

@keyframes grow8 {
0% {
  height: 7px;
}
10% {
  height: 5px;
}
20% {
  height: 1px;
}
30% {
  height: 2px;
}
40% {
  height: 4px;
}
50% {
  height: 2px;
}
60% {
  height: 7px;
}
70% {
  height: 7px;
}
80% {
  height: 2px;
}
90% {
  height: 5px;
}
100% {
  height: 5px;
}
}
.bars.active:nth-child(9) {
-webkit-animation: grow9 1868ms alternate infinite;
        animation: grow9 1868ms alternate infinite;
}

@-webkit-keyframes grow9 {
0% {
  height: 4px;
}
10% {
  height: 1px;
}
20% {
  height: 7px;
}
30% {
  height: 7px;
}
40% {
  height: 1px;
}
50% {
  height: 3px;
}
60% {
  height: 1px;
}
70% {
  height: 7px;
}
80% {
  height: 3px;
}
90% {
  height: 1px;
}
100% {
  height: 5px;
}
}

@keyframes grow9 {
0% {
  height: 4px;
}
10% {
  height: 1px;
}
20% {
  height: 7px;
}
30% {
  height: 7px;
}
40% {
  height: 1px;
}
50% {
  height: 3px;
}
60% {
  height: 1px;
}
70% {
  height: 7px;
}
80% {
  height: 3px;
}
90% {
  height: 1px;
}
100% {
  height: 5px;
}
}
.bars.active:nth-child(10) {
-webkit-animation: grow10 2129ms alternate infinite;
        animation: grow10 2129ms alternate infinite;
}

@-webkit-keyframes grow10 {
0% {
  height: 5px;
}
10% {
  height: 7px;
}
20% {
  height: 6px;
}
30% {
  height: 3px;
}
40% {
  height: 7px;
}
50% {
  height: 2px;
}
60% {
  height: 2px;
}
70% {
  height: 5px;
}
80% {
  height: 7px;
}
90% {
  height: 4px;
}
100% {
  height: 1px;
}
}

@keyframes grow10 {
0% {
  height: 5px;
}
10% {
  height: 7px;
}
20% {
  height: 6px;
}
30% {
  height: 3px;
}
40% {
  height: 7px;
}
50% {
  height: 2px;
}
60% {
  height: 2px;
}
70% {
  height: 5px;
}
80% {
  height: 7px;
}
90% {
  height: 4px;
}
100% {
  height: 1px;
}
}

#seek-bar {
  height:5px;
  opacity:.9;
  background:var(--accent);
  position:relative;
  border-radius:var(--borderstyle);
  box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,.4),inset -2px -2px 0px 0px rgba(0,0,0,.1),inset -1px 0px 0px 0px rgba(0,0,0,0.3);
}

.track-time * {
  width:100%;
  display:inline-block;
  float:left;
  font-size:8px;
  letter-spacing:1px;
}

#current-time {
  text-align:left;
  margin-top:5px;
}

#track-length {
  text-align:right;
  margin-top:-19px;
}

.playlist-controls {
  border-radius:var(--borderstyle);
  width:100%;
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.1);
  margin-top:5px;
  height:30px;
}

#controls-inner {
  width:100%;
  text-align:center;
  margin-top:-15px;
}

#play-btn i {
  width:12px;
  height:12px;
  color:var(--text);
  opacity:1;
  margin-top:18px;
  opacity:.85;
}

#play-pause-button {
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  border-radius:100%;
  border-top:1px solid rgba(0,0,0,.2);
  border-left:1px solid rgba(0,0,0,.2);
  border-right:1px solid rgba(0,0,0,.2);
  border-bottom:1px solid rgba(0,0,0,.25);
  cursor:pointer;
}

#play-previous i, #play-next i {
  width:12px;
  height:12px;
  color:var(--text);
  opacity:1;
  margin-top:12px;
  opacity:.6;
}

#play-previous {
  margin-left:-30px;
  border-top-left-radius:40%;
  border-bottom-left-radius:40%;
}

#play-previous i {
  margin-left:-2px;
}

#play-next {
  margin-left:-15px;
  border-top-right-radius:40%;
  border-bottom-right-radius:40%;
}

#play-next i {
  margin-left:7px;
}

#search {
  margin-top:15px;
  color:var(--text);
}

#search .innner {
  border-radius:var(--borderstyle);
  width:calc(100% - 59px);
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.1);
  margin-left:47px;
  padding:6px;
}

#search input {  
  border-radius:var(--borderstyle);
  overflow-x:hidden;
  padding:9px 15px 9px 15px;
  width:calc(100% - 30px);
  font-size:11px;
  letter-spacing:1px;
  font-family:roboto mono,consolas,Lucida Console,monospace!important;
  outline:0px;
  color:var(--text);
}

.search::placeholder {
  color:var(--text);
  opacity:.75;
  transition:all .4s ease-in-out;
}

.search:focus::placeholder {
  opacity:.5;
}

#search button {
  border-radius:var(--borderstyle);
  width:40px;
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.1);
  padding:10px;
  cursor:pointer;
  position:absolute;
  outline:0px;
  height:45px;
}

#search button svg {
  width:15px;
  height:15px;
  color:var(--text);
  margin-top:2px;
  opacity:.8;
  transition:all .4s ease-in-out;
}

#search button:hover svg {
  opacity:1;
}

#search-inner {
  width:15px;
  height:20px;
  padding:5px;
  margin-top:-4px;
  margin-left:-4px;
  border-radius:var(--borderstyle);
  border-top:1px solid rgba(0,0,0,.2);
  border-left:1px solid rgba(0,0,0,.2);
  border-right:1px solid rgba(0,0,0,.2);
  border-bottom:1px solid rgba(0,0,0,.25);
  box-shadow:0px 1px 0px 0px rgba(255,255,255,.1), inset 0px 1px 0px 0px rgba(0,0,0,0.05);
  cursor:pointer;
}

#menu {
  width:100%;
  text-align:center;
  white-space:nowrap;
  margin-top:30px;
}    

#menu svg,#controls svg,#close svg,#credit svg,.pagi svg,#scrolltop svg,#scrolldown svg {
  width:16px;
  height:16px;
  padding:10px;
  display:inline-block;
  color:var(--text);
  opacity:.8;
  transition:opacity .4s ease-in-out;
}

#menu .link:active svg {
  padding:11px 9px 9px 11px;
}

#menu .link,#controls .link,#close .link,#credit .link,.pagi .link,#scrolltop .link,#scrolldown .link {
  border-radius:100%;
}

#menu .link,#controls .link,#close .link,#credit .link,.pagi .link,#load-more .link,#scrolltop .link,#scrolldown .link  {
  height:calc(100% - 2px);
  width:calc(100% - 2px);
  line-height:18px;
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.1);
}

#menu .inner:hover svg {
  opacity:1;
}

/* ---------------------------------------------- CREDIT */

#credit {
  padding:10px;
  bottom:20px;
  left:20px;
  transition:all .4s ease-in-out;
  cursor:pointer;
  z-index:9999999999999999;
  position:fixed;
  width:12px;
  border-radius:100%;
  height:12px;
  cursor:pointer;
}

/* ---------------------------------------------- MENU */

#mfade {
  display:none;    
  z-index:9999999999999;
}

#overlay {
  width:100%;
  height:100%;
  top:0;
  left:0;
  position:fixed;
  z-index:9999999999999;
  animation-duration: 1s;
  animation-name: fade;
  -webkit-animation-fill-mode: forwards;
}

#close {
  padding:10px;
  top:20px;
  right:20px;
  transition:all .4s ease-in-out;
  cursor:pointer;
  z-index:9999999999999999;
  position:fixed;
  width:12px;
  border-radius:100%;
  height:12px;
  cursor:pointer;
}

#overlay .postt {
  width:65%;
  height:calc(100% - 120px);
  margin-left:calc(17.25% - 10px);
  position:fixed;
  z-index:99999999999999999999;
  display:none;
  -webkit-animation:menu 2s ease;
  -moz-animation:menu 2s ease;
  animation:menu 2s ease;
  -webkit-animation-fill-mode: forwards;
  animation-delay:.8s;
  opacity:0;
  margin-top:50px;
}

#overlay .inner {
  height:230px;
  display:flex;
}


@keyframes fade {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}


@keyframes scale {
  from {
      transform:scale(1, 1);
  }
  to {
      transform:scale(1.05, 1.05);
  }
}

@keyframes menu {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -20px, 0);
      -moz-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0)
  }
  to {
      opacity: 1;
      -webkit-transform: translate(0, 0, 0);
      -moz-transform: translate(0, 0, 0);
      -o-transform: translate(0, 0, 0);
      transform: translate(0, 0, 0)
  }
}

#header2 {
  width:100%;
  height:100%;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(0,0,0,0.49) 51%, rgba(255,255,255,0) 100%);
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2);
  opacity:.2;
  border-radius:var(--borderstyle);
}

#port {
  width:128px;
  height:128px;
  padding:5px;
  position:absolute;
  margin-top:-90px;
  margin-left:10px;
  border-radius:var(--borderstyle);
}

#port2 {
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(0,0,0,0.49) 51%, rgba(255,255,255,0) 100%);
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2);
  opacity:.1;
  z-index:9999999999;
  position:absolute;
  border-radius:var(--borderstyle);
}

#port img {
  width:calc(100% - 2px);
  border-radius:var(--borderstyle);
}

#handle {
  margin-left:170px;
  margin-top:10px;
  width:calc(100% - 200px);
  font-size:12px;
  font-style:italic;
  letter-spacing:4px;
  padding:10px 15px 10px 15px;
  border-radius:var(--borderstyle);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#info {
  max-height:95px;
  position:absolute;
  margin-left:170px;
  margin-top:-95px;  
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  white-space:nowrap;
  overflow:hidden;
}

#info .inner {
  width:auto;
  display:inline-block;
  padding:5px;
  height:20px;
  padding-bottom:11px;
}

#info .link {
  border-radius:var(--borderstyle);
  padding:5px;
  font-size:11px;
  text-transform:uppercase; 
  margin-top:-1px;
}

.info {
  padding:3px 10px 3px 10px;
  text-transform:none;
  letter-spacing:1px;
  border-radius:var(--borderstyle);
  vertical-align:top;
  margin-left:5px;
  display:inline-block;
}

.icon {
  border-radius:var(--borderstyle);
  display:inline-block;
  padding:6px;
  width:12px;
  height:12px;
}

.icon svg {
  width:12px;
  height:12px;
  vertical-align:center;
}

#biocont {
  margin-top:40px;
  height:calc(100% - 325px);
  display:flex;
}

#bio {
  display:inline-block;
  width:70%;
  margin-left:30%;
}

#bioquote .inner {
  padding:15px;
  width:calc(100% -  30px);
  height:100%!important;
}

#bio .inner {
  padding:15px;
  width:calc(170% - 30px);
  margin-left:-70%;
  height:calc(100% - 30px)!important;
}

#bio .bio {
  padding:15px;
  overflow:auto;
  line-height:30px!important;
  width:calc(100% - 30px);
}

#bioquote {
  margin-top:10px;
  height:20px;
  text-align:center;
  font-style:italic;
  font-size:14px;
  letter-spacing:1px;
}

#bioquotee {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}

#bionav {
  width:50%;
  display:inline-block;
}

#bionav .inner {
  height:calc(100% - 30px)!important;
  width:calc(100% - 30px)!important;
  padding:15px;
}

#navcont {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  opacity:.7;
  transition:all .4s ease-in-out;
}

.nlink {
  justify-content:center;
  align-items:center;
  padding:0px 15px 0px 15px;
  text-align:center;
  letter-spacing:1px;
  transition:all .4s ease-in-out;
  flex:1;
  display:flex;
  border-top:1px solid rgba(0,0,0,.35);
  box-shadow:0px -1px 0px 0px rgba(0,0,0,0.1),inset 0px 1px 0px 0px rgba(255,255,255,.1);
}

#navcont a {
  color:rgba(153,153,153,.5);
  letter-spacing:2px;
  font-size:13px;
}

.nlink:first-of-type {
  border-top:0px;
  box-shadow:0px 0px 0px 0px rgba(0,0,0,0),inset 0px 0px 0px 0px rgba(255,255,255,0);
}

#bionav:hover #navcont {
  opacity:1;
}

#navcont a:hover {
  color:rgba(153,153,153,1);
  letter-spacing:3px;
}

/* ---------------------------------------------- FOOTER */


#footer {
  height:50px;
  width:27%;
  padding-right:15px;
  margin:0 auto;
  padding-bottom:50px;
  text-align:center;
}

#pagination {
  text-align:center;
}

.pagi {
  padding:10px;
  transition:all .4s ease-in-out;
  cursor:pointer;
  width:12px;
  border-radius:100%;
  height:12px;
  display:inline-block;
  margin-left:15px;
  margin-right:15px;
}

#pagination-inner {
  display:inline-block;
  vertical-align:top;
}

#pagination .link span {
  width:20px;
  height:20px;
  margin-left:-20px;
  padding:10px;
  position:absolute;
  text-align:center;
}

#load-more-inner {
  padding:10px 22px 10px 22px;
  border-radius:30px;
  text-align:center;
  font-family:var(--accentfont);
  font-weight:bold;
  font-size:.75rem;
  display:inline;
}

#load-more {
  border-radius:var(--borderstyle);
  border-radius:30px;
  padding:15px 0px 16px 7px;
  display:inline;
  transition:all .4s ease-in-out;
}

#load-more:hover {
  cursor:pointer;
}

#load-more svg {
  width:14px;
  vertical-align:middle;
  margin-top:-1px;
  margin-left:5px;
  margin-right:-5px;
}