.ember-modal-overlay {
  height: 100vh;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50; }

.ember-modal-dialog {
  z-index: 50;
  position: fixed; }
  .ember-modal-dialog.ember-modal-dialog-in-place {
    position: relative; }

.ember-modal-dialog {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px #222;
  padding: 10px; }

.ember-modal-overlay.translucent {
  background-color: rgba(128, 128, 128, 0.77); }

/*
    Color Definitions
    Color wheel
*/
/*
    Sizing Definitions
*/
/*
    Functions
*/
/*
    Mixins
*/
/*
    Font Include
*/
.number-font {
  font-family: Numbers, courier, serif;
  font-weight: 300; }

/* ------------------------------------------------------------------------------
    animations
  ------------------------------------------------------------------------------ */
/*
    Color Definitions
    Color wheel
*/
/*
    Sizing Definitions
*/
/*
    Functions
*/
/*
    Mixins
*/
/*
    Font Include
*/
.number-font {
  font-family: Numbers, courier, serif;
  font-weight: 300; }

/* ------------------------------------------------------------------------------
    animations
  ------------------------------------------------------------------------------ */
.tabs {
  background: #FFF;
  color: #827d79;
  border-bottom: #827d79 1px solid; }
  .tabs dd {
    top: 0px; }

.tabs-content {
  width: 100%; }
  .tabs-content > .content {
    display: none;
    width: 100%; }
    .tabs-content > .content.active {
      display: block;
      float: none; }

#revealModal .tabs,
.full-page .tabs {
  box-shadow: none; }

.row {
  max-width: 87rem;
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0; }

@media only screen and (max-width: 1392px) {
  .row {
    margin: 0; } }

.row .row {
  margin-left: -6px;
  margin-right: -6px;
  width: auto; }

.column,
.columns {
  padding-left: 6px;
  padding-right: 6px; }

.row.menunails > .column,
.row.menunails > .columns {
  padding-left: 0;
  padding-right: 0; }

/*
.row:before, .row:after{
  content: none;
}*/
.mercury .row .row {
  margin-left: -0.24rem;
  margin-right: -0.24rem; }

.mercury .column {
  padding-left: 0.24rem;
  padding-right: 0.24rem; }

@media only screen and (max-width: 800px) {
  .tabs dd > a, .tabs .track-slider dd > a, .tabs .layout-box.grid dd > a, .layout-box.grid .tabs dd > a, .tabs .social-title dd > a, .tabs #footer dd > a, #footer .tabs dd > a {
    padding-left: 1rem;
    padding-right: 1rem; } }

.breadcrumbs > *:before {
  content: url("data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAANCAYAAACUwi84AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH9JREFUeNpiYCAAGB89eigApAuAeIOcnPwFdAVMUMl6IN4PVOyATcECIP4AxAJQRQkoCoDGPgDSjlBFIDAfWREjjAEUNACZADUJBBKBmhcwIhuHRVEgE7ICqC8KkYTy8ZkAcpMjIz5JkImM+CRhIakApM9jk4QFVAIuSRAACDAAvXg5urY6cfkAAAAASUVORK5CYII="); }

body, html {
  min-height: 100vh;
  height: 100%; }

html {
  height: 100%;
  overflow-y: scroll; }

body {
  font-family: "Roboto", arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  background-color: #cac8c6;
  text-rendering: optimizeSpeed; }

img {
  display: inline-block;
  vertical-align: middle;
  border: 0;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic; }

main {
  display: block; }
  main.animate {
    -webkit-transition: min-height 2.5s ease-out;
    transition: min-height 2.5s ease-out; }

::-moz-selection {
  background: #3C85D6;
  color: #FFF;
  text-shadow: none; }

::selection {
  background: #3C85D6;
  color: #FFF;
  text-shadow: none; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #e2e1e0;
  margin: .5rem 0;
  padding: 0; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical; }

ul {
  list-style: none;
  margin: 0 !important;
  padding: 0; }

a, .track-slider a, .layout-box.grid a, .social-title a, #footer a, a:focus, .layout-box.grid a:focus, #footer a:focus, a:hover, .layout-box.grid a:hover, #footer a:hover {
  display: inline-block;
  color: #276cb8;
  text-decoration: none;
  cursor: pointer; }
  a.dark-link, .layout-box.grid a.dark-link, .layout-box.grid .social-title a, .social-title .layout-box.grid a, .social-title a, .social-title #footer a, #footer .social-title a, #footer a.dark-link, a:focus.dark-link, .social-title a:focus, .social-title #footer a:focus, #footer .social-title a:focus, #footer a:focus.dark-link, a:hover.dark-link, .social-title a:hover, .social-title #footer a:hover, #footer .social-title a:hover, #footer a:hover.dark-link {
    color: #333230; }
  a.no-line, .track-slider a, .layout-box.grid a, #footer a, a:focus.no-line, .track-slider a:focus, .layout-box.grid a:focus, #footer a:focus, a:hover.no-line, .track-slider a:hover, .layout-box.grid a:hover, #footer a:hover {
    border: none; }
  a.highlighted, .layout-box.grid a.highlighted, #footer a.highlighted, a:focus.highlighted, #footer a:focus.highlighted, a:hover.highlighted, #footer a:hover.highlighted {
    border-bottom: dotted 1px #9a9692;
    padding: 0 2px; }

.left-menu {
  border-right: solid 1px #e2e1e0; }

.left-menu-item {
  width: 100%;
  border-bottom: solid 1px #e2e1e0;
  display: block;
  padding: 10px;
  border-right: transparent solid 4px;
  font-size: 16px;
  font-weight: 300;
  box-sizing: border-box; }
  .left-menu-item:first-child {
    border-top: solid 1px #e2e1e0; }
  .left-menu-item.active {
    border-right-color: #90bae8;
    background: #FFF; }

.left-menu-header {
  color: #1b1a19;
  font-weight: 500;
  border-top-color: transparent !important;
  border-bottom-color: #686561; }

article, section, header, div, aside {
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

h1 {
  font-size: 2.125rem; }

h2 {
  font-size: 1.6875rem; }

h3 {
  font-size: 1.375rem; }

h4 {
  font-size: 1.125rem; }

h5 {
  font-size: 1.125rem; }

h6 {
  font-size: 1rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", sans-serif;
  margin: 0.2em 0 0.4em; }

h1, h2, h3 {
  font-weight: 300; }

h4, h5, h6 {
  font-weight: 400; }

@media only screen and (max-width: 640px) {
  html {
    font-size: 0.95em; } }

.line1 {
  display: block;
  font-size: 14px;
  color: #333230; }
  .line1 a, .line1 .layout-box.grid a, .layout-box.grid .line1 a, .line1 #footer a, #footer .line1 a {
    color: inherit; }

.line2 {
  display: block;
  font-size: 13px;
  color: #4f4c49; }
  .line2 a, .line2 .layout-box.grid a, .layout-box.grid .line2 a, .line2 #footer a, #footer .line2 a {
    color: inherit; }

.line3 {
  display: block;
  font-size: 11px;
  color: #686561; }
  .line3 a, .line3 .layout-box.grid a, .layout-box.grid .line3 a, .line3 #footer a, #footer .line3 a {
    color: inherit; }

.white {
  color: #FFF; }

.invisible {
  opacity: 0; }

.head, .big-head, .header-head {
  display: block;
  font-weight: 500; }
  .head a, .head .layout-box.grid a, .layout-box.grid .head a, .head #footer a, #footer .head a, .big-head a, .big-head .layout-box.grid a, .layout-box.grid .big-head a, .big-head #footer a, #footer .big-head a, .header-head a, .header-head .layout-box.grid a, .layout-box.grid .header-head a, .header-head #footer a, #footer .header-head a {
    color: inherit; }

.big-head {
  font-size: 120%; }

.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-center {
  text-align: center !important; }

.text-justify {
  text-align: justify !important; }

.right {
  float: right;
  text-align: right; }

.left {
  float: left;
  text-align: left; }

small {
  font-size: 80%; }

.center {
  margin: 0 auto;
  text-align: center; }

.disable-hover {
  pointer-events: none; }

.stretch-img {
  width: 100%;
  max-height: initial; }

.stretch-img-v {
  height: 100%;
  max-width: initial; }

.nofit {
  height: auto !important;
  width: auto !important;
  min-height: 0 !important;
  min-width: 0 !important; }

html.touch,
.noselect,
.button__content {
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none; }

.clickable {
  cursor: pointer !important; }

.moveable {
  cursor: move; }

.ellipsis-break, .social-action__content .line1 > a, .social-action__content .track-slider .line1 > a, .social-action__content .layout-box.grid .line1 > a, .social-action__content .social-title .line1 > a, .social-action__content #footer .line1 > a, #footer .social-action__content .line1 > a, .social-action__content .line2 > a, .social-action__content .track-slider .line2 > a, .social-action__content .layout-box.grid .line2 > a, .social-action__content .social-title .line2 > a, .social-action__content #footer .line2 > a, #footer .social-action__content .line2 > a {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px  !important; }

.display-hidden {
  display: none; }

.display-block {
  display: block; }

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden; }

dialog .close-reveal-modal,
.close-reveal-modal,
.close-list {
  font-size: 1.6rem !important;
  line-height: 1;
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  color: #cac8c6;
  font-weight: 400 !important;
  cursor: pointer; }
  dialog .close-reveal-modal:hover,
  .close-reveal-modal:hover,
  .close-list:hover {
    text-decoration: none !important;
    color: #827d79; }

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: "Numbers";
  src: url("/fonts/hatchet_numbers.eot?") format("eot"), url("/fonts/hatchet_numbers.woff") format("woff"), url("/fonts/hatchet_numbers.ttf") format("truetype"), url("/fonts/hatchet_numbers.svg#HatchetCounts") format("svg");
  font-weight: 400;
  font-style: normal; }

/* ------------------------------------------------------------------------------
      pickbox list
  ------------------------------------------------------------------------------ */
.resolver-hover {
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 60px;
  width: 100%;
  height: 100%;
  background: #FFF;
  opacity: 0;
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
  font-size: 12px;
  white-space: nowrap;
  font-weight: 400; }
  .resolver-hover > .resolver-icon > img {
    margin-right: 3px; }

.listNumber.resolved {
  color: #827d79 !important; }

.list-action.resolved {
  background-color: #827d79; }
  .list-action.resolved.red {
    background-color: #DE4F35; }

.resolver-icon {
  text-align: center;
  border-radius: 50%;
  padding: 4px;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  margin: 0;
  position: relative; }
  .resolver-icon.large {
    width: 2.8rem;
    height: 2.8rem; }

.ghost .resolver-hover {
  background: #fafafa;
  color: #333230; }

.pickbox-wrapper {
  display: none; }

#pickbox-wrapper {
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  position: absolute;
  z-index: 1000; }
  #pickbox-wrapper.animate {
    -webkit-transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out; }

#pickbox-wrapper .pointer {
  -webkit-transition: right 0.4s ease-out;
  transition: right 0.4s ease-out;
  width: 20px;
  height: 20px;
  background: #3C85D6;
  position: absolute;
  right: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 5px 0; }

.pickbox-frame {
  background: #FFF;
  width: 300px; }
  .pickbox-frame dl {
    margin: 0; }
    .pickbox-frame dl .nav_button {
      margin: 0 -0.3em 0 0; }
  .pickbox-frame dt {
    display: inline-block;
    font-weight: 300; }

.pickbox {
  background: #FFF;
  padding: 0;
  width: 300px;
  max-height: 300px; }
  .pickbox a, .pickbox .layout-box.grid a, .layout-box.grid .pickbox a, .pickbox #footer a, #footer .pickbox a {
    color: #333230; }
  .pickbox span, .pickbox del {
    padding: 0; }
  .pickbox img {
    margin: 0 0 0 -2rem !important;
    position: absolute; }
  .pickbox .source-error .number {
    background: #fafafa;
    color: #e2e1e0; }
  .pickbox .source-error .head, .pickbox .source-error .line1 {
    color: #cac8c6; }
  .pickbox .source-error .nav_button {
    margin: 0 0 0 -2.5rem !important; }
  .pickbox .head, .pickbox .line1, .pickbox .line2 {
    width: -webkit-calc(100% - 3.5rem);
    width: calc(100% - 3.5rem);
    margin: 0 0 0 3.5rem; }
  .pickbox .head, .pickbox .line2 {
    padding: 0 0 0 2rem; }
  .pickbox .line2 {
    color: #827d79; }
  .pickbox ul {
    position: relative;
    display: block; }
  .pickbox li:hover {
    padding: 0.5rem 0.48em 0.5rem 1rem;
    background: #e2e1e0; }
  .pickbox li.selected {
    background: #fafafa; }
    .pickbox li.selected a, .pickbox li.selected #footer a, #footer .pickbox li.selected a {
      color: #FFF; }
    .pickbox li.selected .number {
      background: #669fdf;
      color: #FFF; }

.pickbox-frame h5, .slideout-list h5 {
  color: #1b1a19;
  padding: 1rem 2.5rem 1rem 1rem;
  margin: 0; }

.pickbox, .slideout-list {
  overflow: hidden; }
  .pickbox .number, .slideout-list .number {
    font-family: Numbers, courier, serif;
    font-weight: 300;
    position: absolute;
    width: 3.5rem;
    top: 0;
    left: 0;
    bottom: 0;
    font-size: 1.1rem;
    background: #fafafa;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #b2afac;
    text-align: right; }
  .pickbox li, .slideout-list li {
    -webkit-transition: background 0.4s ease-out;
    transition: background 0.4s ease-out;
    padding: 0.5rem 1rem 0.5rem 0.48em;
    border-top: solid 1px #e2e1e0;
    font-size: 0.9rem;
    margin: 0 !important;
    min-height: 50px;
    position: relative; }
    .pickbox li:hover, .slideout-list li:hover {
      background: #cac8c6; }
  .pickbox .head, .pickbox .line1, .pickbox .line2, .slideout-list .head, .slideout-list .line1, .slideout-list .line2 {
    line-height: 1.6; }
  .pickbox .line1, .slideout-list .line1 {
    color: #686561;
    font-weight: 300; }
  .pickbox .head, .slideout-list .head {
    color: #333230;
    font-weight: 400; }

/* ------------------------------------------------------------------------------
      source icon
  ------------------------------------------------------------------------------ */
.source-image {
  width: 100%; }
  .source-image.large {
    width: 2.8rem;
    height: 2.8rem;
    margin: 0; }
  .source-image.medium {
    width: 2rem;
    height: 2rem;
    margin: 0; }
  .source-image.small {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0; }
  .source-image.mini {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0; }

/* ------------------------------------------------------------------------------
      playlists
  ------------------------------------------------------------------------------ */
.hatchet-playlist {
  height: 0; }

#hatchet-fast-playlist {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  top: 0;
  position: absolute;
  width: 100%;
  box-sizing: content-box;
  overflow: hidden;
  padding: 0 0 0 30px;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px); }
  #hatchet-fast-playlist > .distinct-row {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, content; }

.song__title {
  font-size: 15px; }

.artist-thumb {
  border-radius: 50%;
  opacity: 0; }
  .artist-thumb.content {
    opacity: 1; }
  .artist-thumb.animate {
    -webkit-transition: opacity 0.75s ease-out;
    transition: opacity 0.75s ease-out; }

.chart-result__wrapper {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0; }

.track-love {
  float: left;
  margin: 0 0.24rem 0 -0.36rem !important; }

.list-page-wrapper {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column; }
  .list-page-wrapper.isSettled {
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }

.track-slider {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  min-height: 50px;
  background: #FFF; }
  .track-slider.weight__70 {
    min-height: 70px; }
  .track-slider.weight__150 {
    min-height: 150px; }

.playlist-cell {
  padding: 3px 6px;
  color: #b2afac;
  overflow: hidden; }
  .playlist-cell > h6 {
    margin: 0; }
  .playlist-cell.listNumber {
    width: 52px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    font-family: Numbers, courier, serif;
    font-weight: 300;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    font-size: 16px;
    background: #FFF;
    box-sizing: border-box; }
  .playlist-cell.list-action {
    width: 52px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-align-self: start;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    text-align: center;
    overflow: hidden;
    height: 60px; }
    .playlist-cell.list-action .nav_button.stopped, .playlist-cell.list-action .nav_button.waiting {
      opacity: .5; }
  .playlist-cell.resolver {
    width: 3.5rem;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    border-left: solid 1px #e2e1e0; }

.playlist-cell.topped > span {
  -ms-align-self: start;
  -webkit-align-self: flex-start;
  align-self: flex-start; }

.playlist-cell.song, .playlist-cell.artist {
  width: 50px;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 40px; }

.playlist-cell.song {
  font-size: 14px; }

.playlist-cell.artist {
  font-size: 13px; }

.playlist-cell.song.timestamped {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-around;
  justify-content: space-around; }
  .playlist-cell.song.timestamped > small {
    color: #b2afac;
    padding: 0 0 3px; }
  .playlist-cell.song.timestamped > small.resolved {
    color: #827d79; }

.distinct-row {
  -webkit-order: 2;
  order: 2; }

.orderup {
  -webkit-order: 1;
  order: 1; }

.orderdown {
  -webkit-order: 3;
  order: 3; }

.listend {
  -webkit-order: 10;
  order: 10; }

.distinct-row.double:hover .track-slider > .list-action .stopped, .distinct-row.double:hover .track-slider > .list-action .waiting,
.track-slider:hover > .list-action .stopped,
.track-slider:hover > .list-action .waiting {
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1 !important; }

.distinct-row.double:hover .track-slider > .listNumber,
.track-slider:hover > .listNumber {
  background: #e2e1e0; }

.cell, .playlist-cell {
  font-size: 0.9rem;
  vertical-align: middle !important;
  position: relative; }

.playlist-cell {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }
  .playlist-cell a, .playlist-cell .layout-box.grid a, .layout-box.grid .playlist-cell a, .playlist-cell #footer a, #footer .playlist-cell a {
    color: #9a9692; }

.slide-out {
  -ms-align-self: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
  background: #FFF; }

.cell.list-action, .list-action.playlist-cell {
  padding: 3px 6px !important; }

.cell.trackAction, .trackAction.playlist-cell {
  width: 3rem !important;
  -webkit-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0;
  text-align: right; }

.trackAction-4 {
  width: auto !important;
  -webkit-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  width: 14rem;
  padding: 0 1rem !important;
  background: #e2e1e0;
  z-index: 0; }

.trackAction-column {
  width: 3.5rem;
  background: #e2e1e0;
  position: absolute; }

.distinct-row {
  height: 60px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  display: block;
  position: relative;
  /*    -webkit-transform: translateZ(0);
    transform: translateZ(0); */ }
  .distinct-row.chart {
    height: 60px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0; }
    .distinct-row.chart > .track-slider > .playlist-cell {
      height: 60px; }
  .distinct-row.double {
    height: 160px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 0 5px 0;
    border-bottom: solid 1px #b2afac; }
    .distinct-row.double.large {
      height: 170px;
      -webkit-flex: 0 0 auto;
      flex: 0 0 auto; }
      .distinct-row.double.large > .track-slider > .playlist-cell {
        height: 80px; }
    .distinct-row.double > .track-slider > .playlist-cell {
      height: 70px; }
    .distinct-row.double > .track-slider + .track-slider > .playlist-cell {
      height: 90px; }
  .distinct-row > .playing.track-slider > .listNumber,
  .distinct-row > .paused.track-slider > .listNumber {
    background: #cac8c6 !important;
    color: #FFF !important; }
  .distinct-row.listNumber {
    background: #FFF;
    color: #e2e1e0;
    border-right: solid 1px #9a9692; }
  .distinct-row span[data-link-text]:after {
    content: attr(data-link-text); }
  .distinct-row:hover > .trackSlider {
    background: #fafafa; }
  .distinct-row > .playing {
    background: #e2e1e0; }
  .distinct-row.open {
    margin: 6px 0;
    border-top: solid 2px #333230;
    border-bottom: solid 1px #686561; }
    .distinct-row.open + .distinct-row {
      border-top: solid 1px #333230; }
  .distinct-row.deleted {
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    height: 0;
    overflow: hidden;
    min-height: initial; }

.track-slider {
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  z-index: 0; }
  .track-slider.noanimate {
    -webkit-transition: none;
    transition: none; }
  .track-slider.slide {
    -webkit-transform: translate3d(-28px, 0, 0);
    transform: translate3d(-28px, 0, 0); }
  .track-slider.extra {
    position: absolute;
    right: 0;
    top: 50%;
    background: #80BBDA !important;
    width: 0;
    -webkit-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
    width: 262px; }
    .track-slider.extra.slide {
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%); }

.playlist-cell.resolved {
  color: #333230; }
  .playlist-cell.resolved a, .playlist-cell.resolved #footer a, #footer .playlist-cell.resolved a {
    color: #1b1a19; }
  .playlist-cell.resolved.artist > a, .track-slider .playlist-cell.resolved.artist > a, .layout-box.grid .playlist-cell.resolved.artist > a, .social-title .playlist-cell.resolved.artist > a, #footer .playlist-cell.resolved.artist > a {
    color: #686561; }

.playbutton {
  background: #DE4F35; }

.sharebutton {
  background: #279D79; }

.header__button {
  width: 52px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 10px 7px 5px 7px; }
  .header__button.small {
    width: 42px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .header__button > .nav_button {
    margin: -6px 0 0 -6px; }

.bubble {
  color: #333230;
  border-radius: 8px;
  font-weight: 500;
  position: absolute;
  padding: 0 .5rem;
  font-size: .7rem;
  left: -8px;
  top: 8px;
  min-width: 30px;
  height: 18px;
  text-align: center;
  line-height: 1.4; }

.row_hidden, .row_hidden > .track-slider {
  border: 0;
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px; }

.distinct-row.normal + .row_hidden {
  background-color: #FFF;
  height: 10px !important;
  width: 100%; }

/* ------------------------------------------------------------------------------
      sidemodals
  ------------------------------------------------------------------------------ */
.side-modal {
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  background: #FFF;
  width: 400px;
  padding: 107px 0 0;
  z-index: 4;
  border-left: solid 2px #4f4c49;
  -webkit-transform: translate(100%, 0) translateX(5rem);
  transform: translate(100%, 0) translateX(5rem); }
  .side-modal.in {
    -webkit-transition: -webkit-transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  .side-modal > nav {
    color: #686561;
    font-size: 1.8rem;
    background: #FFF;
    height: 3rem;
    width: 3rem;
    position: absolute;
    right: 0;
    top: 0;
    background: #4f4c49;
    height: 100%; }

.float-arrows {
  padding: 7.2rem 0 5rem; }
  .float-arrows > .close-list {
    line-height: 0.3rem;
    margin: 1rem 0 1rem 0rem;
    position: relative;
    top: 0;
    right: 0;
    display: block;
    padding: 0 0 1.5rem 0;
    border-bottom: solid 1px #9a9692; }
    .float-arrows > .close-list > .nav_button {
      margin: 0 !important; }

.side-modal__sublist {
  max-height: 300px;
  overflow: hidden;
  margin: 20px 25px; }

.side-modal__droplist {
  overflow: hidden;
  /*    @include flex-box();
    @include flex-direction(column);*/ }
  .side-modal__droplist > .no-draghover {
    text-align: center;
    padding: .24rem; }
    .side-modal__droplist > .no-draghover > div {
      width: 100%;
      padding: .5rem;
      color: #686561;
      font-size: .9rem; }

.droplist__entry {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start; }
  .droplist__entry.over-before, .droplist__entry.over-after {
    background: #e2e1e0; }
    .droplist__entry.over-before > header > .info-panel, .droplist__entry.over-after > header > .info-panel {
      background: #e2e1e0; }
  .droplist__entry.minilist {
    height: 37px; }
    .droplist__entry.minilist.dragged {
      opacity: 0;
      max-height: 0; }
    .droplist__entry.minilist.over-before, .droplist__entry.minilist.over-after, .droplist__entry.minilist.space-after {
      background: #e2e1e0;
      height: 74px; }
      .droplist__entry.minilist.over-before > .minlist__content, .droplist__entry.minilist.over-after > .minlist__content, .droplist__entry.minilist.space-after > .minlist__content {
        background: #FFF; }
    .droplist__entry.minilist.over-before {
      -ms-flex-align: end;
      -webkit-align-items: flex-end;
      align-items: flex-end; }
    .droplist__entry.minilist:last-child {
      height: 74px; }

.no-draghover {
  color: #9a9692;
  background: #fafafa;
  line-height: 4rem;
  border: solid #cac8c6 1px;
  height: auto !important;
  display: block; }

/* ------------------------------------------------------------------------------
      ui
  ------------------------------------------------------------------------------ */
.ui-slider {
  background-color: #e2e1e0;
  width: 100%;
  overflow: hidden;
  height: 20px; }
  .ui-slider.bobbled {
    background-color: rgba(255, 255, 255, 0);
    overflow: visible;
    top: -10px;
    height: 30px;
    padding: 10px 0 0; }
    .ui-slider.bobbled:before {
      content: '';
      width: 100%;
      height: 2px;
      background: #e2e1e0;
      position: absolute;
      top: 20px;
      right: 0; }
  .ui-slider.has-controls {
    padding: 0px 20px; }
  .ui-slider > .ui-slider__plus,
  .ui-slider > .ui-slider__minus {
    background: #FFF;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0; }
    .ui-slider > .ui-slider__plus > .nav_button,
    .ui-slider > .ui-slider__minus > .nav_button {
      margin: -6px 0 0 -2px; }
  .ui-slider > .ui-slider__plus {
    right: 0; }
  .ui-slider > .ui-slider__minus {
    left: 0; }
  .ui-slider > .ui-slider__container > .ui-slider__scrubber {
    background-color: #DE4F35;
    height: 20px; }
  .ui-slider.bobbled > .ui-slider__container > .ui-slider__scrubber {
    background-color: #DE4F35;
    height: 2px;
    border-right: none;
    margin-top: 10px; }
    .ui-slider.bobbled > .ui-slider__container > .ui-slider__scrubber:before, .ui-slider.bobbled > .ui-slider__container > .ui-slider__scrubber:after {
      content: '';
      width: 11px;
      height: 11px;
      background: #DE4F35;
      position: absolute;
      border-radius: 50%;
      top: -4px;
      right: -4px; }
    .ui-slider.bobbled > .ui-slider__container > .ui-slider__scrubber:after {
      -webkit-transition: 0.2s ease-out;
      transition: 0.2s ease-out; }
  .ui-slider.bobbled:hover > .ui-slider__container > .ui-slider__scrubber:after {
    width: 21px;
    height: 21px;
    background: rgba(222, 79, 53, 0.5);
    top: -9px;
    right: -9px; }

/*
    Color Definitions
    Color wheel
*/
/*
    Sizing Definitions
*/
/*
    Functions
*/
/*
    Mixins
*/
/*
    Font Include
*/
.number-font {
  font-family: Numbers, courier, serif;
  font-weight: 300; }

/* ------------------------------------------------------------------------------
    animations
  ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------
        general element layouts
     ------------------------------------------------------------------------------ */
body {
  margin: 0 10px; }

@media only screen and (max-width: 640px) {
  body {
    margin: 0; } }

h1 > small, h2 > small, h3 > small, h4 > small, h5 > small, h6 > small {
  color: inherit; }

.padded {
  padding: 1rem; }

.nopad {
  padding: 0 !important; }

.noback {
  background-color: transparent !important; }

.inset {
  margin: 1rem; }

.flush {
  margin: 0; }

.inline-block {
  display: inline-block;
  vertical-align: middle; }

strong, b {
  font-weight: 500; }

.bg-smoke {
  background: rgba(10, 10, 15, 0.5);
  color: #FFF; }
  .bg-smoke h1, .bg-smoke h2, .bg-smoke h3, .bg-smoke h4, .bg-smoke h5, .bg-smoke h6 {
    color: #FFF; }

.cultured-box {
  width: 100%;
  max-width: 800px;
  margin: 20px auto !important; }

.disambiguation {
  font-size: 11px;
  font-color: #cac8c6; }

.mosaic {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start; }

.pre-wrap {
  white-space: pre-wrap; }

.baseline {
  position: absolute;
  bottom: 0;
  margin: 0; }

kbd {
  border: solid 3px #1b1a19;
  padding: 5px 15px;
  margin: 2px 10px;
  display: inline-block;
  border-top-color: #686561;
  border-left-color: #686561;
  background: #333230;
  border-radius: 5px;
  color: #e2e1e0;
  font-family: roboto, arial, helvetica, sans-serif;
  font-weight: 500;
  min-width: 60px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 1px 1px 4px 0px #827d79; }

@-webkit-keyframes modal-in {
  0% {
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
  100% {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0); } }

@keyframes modal-in {
  0% {
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
  100% {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0); } }

.ember-modal-dialog {
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  -webkit-animation: modal-in 0.25s forwards;
  animation: modal-in 0.25s forwards;
  padding: 1rem;
  width: 100%;
  max-width: 1392px;
  bottom: 0;
  left: 50% !important;
  top: initial !important;
  margin: 0 !important;
  position: fixed !important;
  border-radius: 0; }

.content-title {
  border-bottom: solid 1px #4f4c49;
  margin-bottom: 2rem;
  margin-top: 2rem;
  padding: 1rem 0;
  font-size: 16px; }
  .content-title.padded {
    margin: 2rem 1rem; }

.liquid-container {
  -webkit-transform: none;
  -moz-transform: none;
  transform: none; }
  .liquid-container .liquid-animating {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0); }

#tooltip {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  font-weight: 500;
  z-index: 5; }

.htc-tooltip-animator {
  -webkit-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
  opacity: 0;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
  line-height: 24px;
  height: 24px;
  display: block; }
  .htc-tooltip-animator.in {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

.htc-tooltip {
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  display: block;
  position: absolute;
  white-space: nowrap;
  height: 24px;
  line-height: 24px;
  padding: 3px 7px;
  background: #1b1a19;
  color: #fafafa;
  left: 50%;
  top: -24px;
  padding: 0 10px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 4px;
  height: auto;
  width: auto;
  font-size: 0.8rem; }
  .htc-tooltip:before {
    content: '\00a0';
    height: 0;
    width: 0;
    z-index: 1;
    position: absolute;
    border: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1b1a19; }
  .htc-tooltip:before {
    left: -webkit-calc(50% - 4px);
    left: calc(50% - 4px);
    bottom: -5px; }
  .htc-tooltip:after {
    content: attr(data-tip);
    display: block; }

.htc-tooltip.noShow {
  display: none !important; }

.htc-tooltip.leftEdge {
  -webkit-transform: translateX(-90%) !important;
  transform: translateX(-90%) !important; }
  .htc-tooltip.leftEdge:before {
    right: 10px;
    left: initial !important; }

.htc-tooltip.rightEdge {
  top: 34px !important;
  left: -webkit-calc(-100% + 10px) !important;
  left: calc(-100% + 10px) !important; }
  .htc-tooltip.rightEdge:before {
    left: -webkit-calc(100% - 14px) !important;
    left: calc(100% - 14px) !important;
    top: -5px; }

.htc-tooltip.bottomEdge {
  bottom: -34px !important;
  top: initial !important; }
  .htc-tooltip.bottomEdge:before {
    content: '\00a0';
    height: 0;
    width: 0;
    z-index: 1;
    position: absolute;
    border: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1b1a19; }
  .htc-tooltip.bottomEdge:before {
    top: -5px;
    bottom: initial !important; }

.modal-box {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 30px 20px; }
  .modal-box > .modal__buttons {
    margin: 20px 0 0; }
    .modal-box > .modal__buttons > button {
      margin: 0 5px;
      display: inline-block; }

.settings_break {
  border-top: 1px solid #e2e1e0;
  margin: 2rem 0; }

.img-centered {
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  max-width: inherit; }

#hatchet-yt {
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: fixed;
  top: 108px;
  left: 300px;
  -webkit-transform: translate(0, 5px);
  transform: translate(0, 5px);
  background: #4f4c49;
  height: 200px;
  width: 267px;
  overflow: hidden;
  z-index: 4;
  -webkit-transition: height .1s ease-out, -webkit-transform .2s ease-out;
  transition: height .1s ease-out, transform .2s ease-out; }
  #hatchet-yt.closed {
    height: 0;
    -webkit-transform: translate(0, 30px);
    transform: translate(0, 30px);
    border: 0;
    box-shadow: none; }

#fb-root,
#dz-root,
#rhapsodyIframe,
iframe[src^="rdio"],
.rdio_xdm {
  clip: rect(0 0 0 0);
  pointer-events: none;
  display: none;
  width: 1px !important;
  height: 1px !important;
  position: absolute;
  top: -8000px;
  left: 0;
  z-index: -1;
  overflow: hidden; }

#yt-ghost {
  position: absolute; }

#yt-clickcover {
  z-index: 3;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }

#video-gripper {
  width: 1.5rem;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  height: 100%;
  background: #276cb8; }

.faded {
  opacity: .4; }

.fade-in {
  opacity: 1;
  -webkit-transition: opacity .6s ease-out;
  transition: opacity .6s ease-out; }

.scrollcontrol {
  min-height: 2rem; }

.scrollerarea {
  -webkit-transition: width 0.2s ease-out;
  transition: width 0.2s ease-out;
  width: 100%; }

.scrollbar {
  -webkit-transition: width 0.2s ease-out;
  transition: width 0.2s ease-out;
  width: 0; }

.scrollable .scrollerarea {
  width: -webkit-calc(100% - 13px);
  width: calc(100% - 13px); }

.scrollable .scrollbar {
  width: 12px;
  height: 100%;
  background: #fafafa;
  position: absolute;
  right: 0;
  top: 0;
  padding: 1px; }

.scrollable .grip {
  background: #827d79;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  min-height: 20px; }

/*  a:hover{
    text-decoration: underline;
  }*/
.full-page {
  padding: 1rem;
  background: #FFF;
  width: 100%;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

.full-article {
  width: -webkit-calc(100% - 250px);
  width: calc(100% - 250px);
  display: inline-block;
  vertical-align: top;
  border-left: solid 1px #e2e1e0;
  padding: 0 1rem;
  margin: 0 0 0 -4px; }

.full-lead {
  display: inline-block;
  width: 230px;
  vertical-align: top;
  margin: 0 20px 0 0; }
  .full-lead h3 {
    margin: 0; }

.merge {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

[draggable] {
  user-select: none; }

@media only screen and (max-width: 640px) {
  .small-break-flow {
    clear: left; } }

@media only screen and (max-width: 800px) {
  .full-lead {
    width: 100%;
    display: block;
    margin: 1rem 0;
    padding: 0 0 1rem 0;
    border-bottom: solid 1px #b2afac; }
  .full-article {
    width: 100%;
    display: block;
    padding: 0;
    border: none; } }

.page-alert {
  background: #F27F10;
  color: #FFF;
  width: 100%;
  padding: 0.6rem; }
  .page-alert > h4, .page-alert h5, .page-alert h6 {
    color: #FFF; }
  .page-alert a, .page-alert .layout-box.grid a, .layout-box.grid .page-alert a, .page-alert #footer a, #footer .page-alert a {
    color: #fafafa;
    text-decoration: underline; }

.footer-alert {
  position: fixed;
  bottom: 0;
  z-index: 3;
  width: 500px;
  margin: 0 0 0 -250px !important;
  left: 50%; }

.full-row {
  background-repeat: no-repeat;
  background-size: auto 100%;
  padding: 0 1rem 2.5rem;
  overflow: hidden; }

/*  .full-row>.row{
    width : 98%;
    margin: 0 auto;
  }*/
main .full-row {
  width: 100%; }

.layer-down {
  z-index: 0; }

.pad-down {
  padding-top: 1rem !important; }

.pad-up {
  padding-bottom: 1rem !important; }

.pad-up-down {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important; }

.pad-right {
  padding-right: 1rem !important; }

.pad-left-right {
  padding-left: 1rem !important;
  padding-right: 1rem !important; }

.h-spaced {
  margin-right: 5px; }

.v-spaced {
  margin-bottom: 5px; }

.v-stretch {
  -ms-align-self: stretch !important;
  -webkit-align-self: stretch !important;
  align-self: stretch !important;
  height: 100% !important; }

.frame {
  border: 1px solid #b2afac; }

.break {
  width: 100%;
  clear: both;
  border-bottom: 1px dashed #9a9692;
  height: 1px; }

.table {
  display: table; }

.table-row {
  display: table-row; }

#scrollcover {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
  background: rgba(255, 255, 255, 0.001); }

#mobilecover {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 0; }

#mobilecover {
  z-index: 9;
  top: 108px; }

.overview-backing {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  width: 100%;
  height: 100%;
  z-index: 5;
  top: 0;
  left: 0;
  padding: 10px 50px 10px 10px;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  background: rgba(10, 10, 15, 0.8);
  position: fixed;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  overflow: hidden; }
  .overview-backing > .titlebar {
    height: auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    color: #FFF;
    padding: 10px; }
    .overview-backing > .titlebar > h3 {
      color: #FFF; }
    .overview-backing > .titlebar > .nav_button {
      position: fixed;
      right: 10px;
      top: 10px; }
  .overview-backing.show {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

#searchcover {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  z-index: 5; }
  #searchcover.search {
    height: 100%; }

#search__research {
  width: 100% !important;
  line-height: 23px; }

#searchbox__wrapper {
  margin: 0 10rem; }

#searchbox__box {
  border: 0;
  box-shadow: none;
  background: none;
  font-size: 3em;
  height: 5rem;
  color: #1b1a19;
  padding-left: 0;
  font-weight: 300; }

@media only screen and (max-width: 640px) {
  #searchbox__wrapper {
    margin: 0 1rem; } }

@media only screen and (max-width: 800px) {
  #mobilecover.smoked {
    height: 100%;
    background: rgba(0, 0, 0, 0.6); } }

.image-fader {
  -webkit-filter: contrast(75%) sepia(15%) grayscale(40%);
  filter: contrast(75%) sepia(15%) grayscale(40%);
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out; }

.panel-box:hover .image-fader {
  -webkit-filter: none;
  filter: none;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px); }

.crop {
  display: block;
  overflow: hidden; }

.round {
  border-radius: 50%; }

.crop .column-list-wrapper {
  background: url(/img/hatched_back.png);
  padding-bottom: 0.5rem; }

.number {
  padding: 0.5rem 0.5rem 0 0 !important;
  vertical-align: middle !important;
  text-align: right; }

.date {
  font-size: 12px;
  margin: 0;
  color: #4f4c49;
  display: inline-block;
  position: relative;
  padding: 0 0 0 1.3rem;
  margin: 0.5rem 0 0 0; }

.drop {
  margin-top: 0.5rem; }

.button-bar {
  margin: 0 !important;
  background: #cac8c6; }

.message-box {
  width: 75%;
  left: 50%;
  margin: 3rem 0 4rem -37.5% !important;
  background: #FFF;
  padding: 3rem 4rem;
  border: #827d79 1px solid; }
  .message-box blockquote {
    font-size: 0.95rem; }

.header__image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: initial; }

.inline-row {
  display: inline-block;
  margin: 0 -4px 0 0;
  vertical-align: middle; }
  .inline-row > .nav_button {
    display: inline-block;
    margin: 0 -4px 0 0;
    vertical-align: middle; }

.normal {
  background: #FFF; }

.gray {
  background: #b2afac; }

.light-backing {
  background: #e2e1e0; }

.dark-backing {
  background: #686561; }

.circle-backing {
  background-image: url(/img/dummy_files/disc.jpg); }

.ghost {
  background: #fafafa; }

main .ember-text-field, main form .input.error .error {
  width: 300px !important; }

.ember-text-field {
  border: none;
  border-bottom: solid 1px #9a9692;
  height: 30px;
  padding: 1px 2px; }

/* ------------------------------------------------------------------------------
      page standards
     ------------------------------------------------------------------------------ */
.settings-button {
  margin: 1rem 0 !important; }

.settings-ta > textarea {
  min-height: 6rem; }

#sm2-container {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px  !important;
  display: none; }

#drag-ghost {
  position: fixed !important;
  top: -1000px;
  left: 0;
  width: 500px;
  background: #e2e1e0;
  height: 40px;
  border: solid 1px #b2afac;
  padding: 0.2rem; }
  #drag-ghost > span {
    display: inline-block;
    font-size: 0.8rem;
    vertical-align: middle;
    line-height: 1.3; }
  #drag-ghost > .ghost-title {
    width: 50%; }

/* ------------------------------------------------------------------------------
        user page
   ------------------------------------------------------------------------------ */
#avatarEdit {
  display: block;
  position: absolute;
  top: 0; }

#avatarEdit input[type="file"],
#bannerEdit input[type="file"] {
  padding: 0 0 0 100%;
  cursor: pointer;
  height: 100%; }

#avatarEdit .input-wrapper,
#bannerEdit .input-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  margin: 0;
  overflow: hidden; }

#bannerEdit .edit-tag {
  top: 16px;
  right: 16px; }

#bannerEdit input[type="range"] {
  width: 200px !important; }

#banner__canvas {
  position: absolute;
  top: 0;
  left: 0; }

#bannerControls {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  height: 0;
  overflow: hidden;
  background: #fafafa; }
  #bannerControls > .bannerControls__instructions {
    width: 300px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
    #bannerControls > .bannerControls__instructions > h5 {
      margin: 0;
      line-height: 1; }
  #bannerControls > .bannerControls__slider {
    width: 300px;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto; }
    #bannerControls > .bannerControls__slider > .ui-slider {
      height: 20px;
      width: 300px;
      display: inline-block; }
  #bannerControls > .button-array {
    width: 300px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  #bannerControls.show-controls {
    min-height: 4rem;
    padding: .25rem 1rem; }

#avatarEdit .edit-tag {
  top: -130px;
  left: 170px; }

#avatar-drop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: 50%; }

.edit-tag {
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  background: #FFF;
  border-radius: 23px 23px 23px 0;
  width: 46px;
  height: 46px;
  position: absolute;
  z-index: 1;
  padding: 4px 20px 4px 4px;
  white-space: nowrap;
  font-size: 0;
  color: #4f4c49;
  opacity: 0;
  overflow: hidden; }
  .edit-tag.clickable {
    opacity: 1; }

.expanded .edit-tag {
  width: 200px;
  font-size: .9rem; }

/* ------------------------------------------------------------------------------
        modal panel
     ------------------------------------------------------------------------------ */
#revealModal {
  width: 400px;
  padding: 3rem 1rem 1rem 1rem; }
  #revealModal .ember-text-field {
    width: 330px; }

.modal__image {
  width: 440px;
  height: 150px;
  margin: 10px -20px;
  overflow: hidden; }

@media only screen and (max-width: 640px) {
  .reveal-modal {
    width: -webkit-calc(100% - 2rem) !important;
    width: calc(100% - 2rem) !important;
    height: -webkit-calc(100% - 2rem) !important;
    height: calc(100% - 2rem) !important;
    min-height: initial;
    margin: 1rem !important; } }

/* ------------------------------------------------------------------------------
        search
     ------------------------------------------------------------------------------ */
[role="search"] {
  padding: 0 0 0; }
  [role="search"] input {
    height: 100%;
    width: -webkit-calc(100% - 2.7rem);
    width: calc(100% - 2.7rem);
    font-size: 1rem;
    line-height: 1.5;
    border: 0;
    background: none; }
    [role="search"] input:-moz-placeholder {
      color: #827d79; }
    [role="search"] input::-moz-placeholder {
      color: #827d79; }
    [role="search"] input:-ms-input-placeholder {
      color: #827d79; }
    [role="search"] input::-webkit-input-placeholder {
      color: #827d79; }
  [role="search"] img {
    float: right;
    margin: 1px 3px 0 0; }
  [role="search"] ::-webkit-input-placeholder {
    color: #b2afac !important; }
  [role="search"] ::-moz-input-placeholder {
    color: #b2afac !important; }
  [role="search"] ::-ms-input-placeholder {
    color: #b2afac !important; }

.rolling-list {
  padding: 20px; }
  .rolling-list .inset {
    padding: 0 5%; }
  .rolling-list ul {
    list-style: none outside none;
    display: block; }
  .rolling-list dt {
    font-size: 0.9rem;
    line-height: 1.3;
    margin: .24rem 0;
    display: block;
    position: relative; }
    .rolling-list dt a, .rolling-list dt .layout-box.grid a, .layout-box.grid .rolling-list dt a, .rolling-list dt #footer a, #footer .rolling-list dt a {
      color: #686561;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      font-weight: 400;
      padding: 1px; }
  .rolling-list dt:first-child a, .rolling-list dt:first-child #footer a, #footer .rolling-list dt:first-child a {
    height: 0;
    padding: 0 0 100% 0;
    display: block;
    position: relative;
    margin: .24rem 0 .5rem;
    overflow: visible; }
  .rolling-list dd {
    line-height: 1.3;
    font-size: 0.9rem; }
    .rolling-list dd a, .rolling-list dd .layout-box.grid a, .layout-box.grid .rolling-list dd a, .rolling-list dd #footer a, #footer .rolling-list dd a {
      color: #827d79; }
  .rolling-list li.w-image {
    display: inline-block;
    vertical-align: top;
    width: 10%;
    margin: 0 0 0 -4px;
    padding: 0 1rem; }
    .rolling-list li.w-image .line2 {
      color: #9a9692;
      font-size: 0.8rem;
      line-height: 1.8rem; }
    .rolling-list li.w-image img {
      /*        width: 100%;
        height: 100%;*/
      border: solid 1px #827d79;
      background: #999;
      position: absolute;
      left: 1px;
      top: 1px;
      bottom: 1px;
      right: 1px; }

@media only screen and (max-width: 1024px) {
  li.w-image {
    width: 12.5% !important; } }

@media only screen and (max-width: 800px) {
  li.w-image {
    width: 16.6666% !important; } }

@media only screen and (max-width: 640px) {
  li.w-image {
    width: 25% !important; } }

@media only screen and (max-width: 480px) {
  li.w-image {
    width: 33% !important; } }

@media only screen and (min-width: 800px) {
  .cultured-box li.w-image {
    width: 16.6666% !important; } }

/* ------------------------------------------------------------------------------
        artist page layouts
     ------------------------------------------------------------------------------ */
.expanded-bubble {
  background: #276cb8;
  width: 320px;
  height: 320px;
  position: absolute;
  top: -160px;
  left: -160px;
  padding: 75px 0 0 0;
  text-align: center; }
  .expanded-bubble > h1 {
    font-size: 40px;
    color: #FFF;
    margin: 0; }
  .expanded-bubble > h2 {
    color: white; }
  .expanded-bubble .line1 {
    color: #FFF; }

.artist__link {
  display: none; }

#hatchet-backtub-img {
  max-width: initial;
  min-width: 100%; }

#hatchet-backtub {
  height: 0;
  width: 100%;
  max-width: 87rem;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  top: 108px;
  left: 0;
  margin: 0 0 0 -webkit-calc((100% - 87rem) * 0.5);
  margin: 0 0 0 calc((100% - 87rem) * 0.5);
  overflow: hidden; }
  #hatchet-backtub > .crop.full {
    background: #333230;
    height: 100%; }

#hatchet-backtub.backing {
  height: -webkit-calc(100% + 300px);
  height: calc(100% + 300px); }

@media only screen and (max-width: 1392px) {
  #hatchet-backtub {
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    margin: 0 10px; } }

@media only screen and (max-width: 640px) {
  #hatchet-backtub {
    width: 100%;
    margin: 0; } }

.layout-box {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #FFF; }
  .layout-box.no-drop {
    padding-top: 0;
    border-top: solid 1px #e2e1e0; }
  .layout-box .minimize {
    font-size: 1.375rem;
    line-height: 1.2;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    color: #827d79;
    font-weight: 500;
    cursor: pointer; }
  .layout-box.grid {
    width: 12.5%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 10px;
    vertical-align: top; }
    .layout-box.grid a, .layout-box.grid #footer a, #footer .layout-box.grid a {
      color: #686561; }
  .layout-box.expanded {
    width: 100%;
    padding-right: 1.28rem; }
  .layout-box .areal {
    position: relative;
    background: #e2e1e0;
    overflow: hidden;
    height: 220px;
    border-bottom: solid 1px #b2afac;
    margin: 0 0 -1px; }
    .layout-box .areal.square {
      padding-top: 100%;
      height: 0;
      border-bottom: solid 2px #e2e1e0; }
    .layout-box .areal.visuallyhidden {
      padding: 0; }
    .layout-box .areal img {
      width: 100%;
      position: absolute;
      top: 0; }

@media only screen and (max-width: 1024px) {
  .layout-box.grid {
    width: 16.6666%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

@media only screen and (max-width: 800px) {
  .layout-box.grid {
    width: 25%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

@media only screen and (max-width: 640px) {
  .layout-box.grid {
    width: 33.3333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

@media only screen and (max-width: 480px) {
  .layout-box.grid {
    width: 100%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

.sticky-menu__text {
  max-height: 44px;
  overflow: hidden; }

.htc-sticky {
  position: fixed;
  top: 108px;
  height: 33px;
  background: #FFF;
  overflow: hidden;
  width: -webkit-calc(100% - 20px);
  width: calc(100% - 20px);
  z-index: 4;
  max-width: 1392px; }
  .htc-sticky .sticky-menu__text {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .htc-sticky > .menu__wrapper {
    width: 100%;
    max-width: 1392px; }
    .htc-sticky > .menu__wrapper > .self-center {
      width: 50px;
      -webkit-flex: 0 0 auto;
      flex: 0 0 auto; }
    .htc-sticky > .menu__wrapper > .social-title {
      padding-left: 55px;
      height: 32px;
      min-height: initial; }
      .htc-sticky > .menu__wrapper > .social-title > h3 {
        font-size: 18px;
        line-height: 31px;
        margin: 0;
        font-weight: 400; }
  .htc-sticky .user-cover.page {
    -webkit-transform: translate(14px, -145px) scale(0.15);
    transform: translate(14px, -145px) scale(0.15);
    border-width: 1px; }

@media screen and (max-width: 640px) {
  .htc-sticky {
    top: 102px;
    width: 100%; } }

.alone {
  border-bottom: solid 1px #b2afac; }

.call-to-action__button {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  background: #FFF;
  border: 13px solid #fafafa;
  color: #FFF;
  position: absolute;
  top: 240px;
  left: 20px;
  height: 90px;
  width: 90px; }
  .call-to-action__button.yellow {
    background: #FCC108;
    border-color: #fdce3a; }
  .call-to-action__button.red {
    background: #DE4F35;
    border-color: #e57561; }
  .call-to-action__button:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  .call-to-action__button > .nav_button {
    margin: 0; }

.call-to-action__data {
  position: absolute;
  height: 50px;
  left: 130px;
  top: 240px;
  color: #FFF;
  font-weight: 500;
  font-size: 14px; }

.track-details {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  background: #FFF;
  margin: 5px 0;
  padding: 0 !important; }
  .track-details > .track-details__data {
    width: 100%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 40px; }
  .track-details > .track-details__buttons {
    width: 230px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    border-left: solid 1px #e2e1e0;
    padding: 10px 20px; }

/* ------------------------------------------------------------------------------
       artist toolbar
     ------------------------------------------------------------------------------ */
.artist-pages {
  padding: 350px 0 0; }

.album-pages {
  padding: 0; }

.htc-sticky .artist-bar {
  width: 100%;
  height: 2rem; }
  .htc-sticky .artist-bar > .info-panel__right.main > a:first-child, .htc-sticky .track-slider .artist-bar > .info-panel__right.main > a:first-child, .htc-sticky .layout-box.grid .artist-bar > .info-panel__right.main > a:first-child, .htc-sticky .social-title .artist-bar > .info-panel__right.main > a:first-child, .htc-sticky #footer .artist-bar > .info-panel__right.main > a:first-child, #footer .htc-sticky .artist-bar > .info-panel__right.main > a:first-child {
    display: none; }

.artist-bar,
.playlist-bar {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition: height 0.2s ease-out;
  transition: height 0.2s ease-out;
  margin: 0;
  height: 3.5rem;
  width: 100%; }
  .artist-bar > .info-panel > h6, .artist-bar > .info-panel h5, .artist-bar > .info-panel .head, .artist-bar > .info-panel .line1, .artist-bar > .info-panel .line2,
  .artist-bar > .info-panel__right > h6,
  .artist-bar > .info-panel__right h5,
  .artist-bar > .info-panel__right .head,
  .artist-bar > .info-panel__right .line1,
  .artist-bar > .info-panel__right .line2,
  .artist-bar > .info-panel__left > h6,
  .artist-bar > .info-panel__left h5,
  .artist-bar > .info-panel__left .head,
  .artist-bar > .info-panel__left .line1,
  .artist-bar > .info-panel__left .line2,
  .playlist-bar > .info-panel > h6,
  .playlist-bar > .info-panel h5,
  .playlist-bar > .info-panel .head,
  .playlist-bar > .info-panel .line1,
  .playlist-bar > .info-panel .line2,
  .playlist-bar > .info-panel__right > h6,
  .playlist-bar > .info-panel__right h5,
  .playlist-bar > .info-panel__right .head,
  .playlist-bar > .info-panel__right .line1,
  .playlist-bar > .info-panel__right .line2,
  .playlist-bar > .info-panel__left > h6,
  .playlist-bar > .info-panel__left h5,
  .playlist-bar > .info-panel__left .head,
  .playlist-bar > .info-panel__left .line1,
  .playlist-bar > .info-panel__left .line2 {
    line-height: 1.2;
    position: absolute;
    bottom: 0; }
  .artist-bar > .info-panel > h5,
  .artist-bar > .info-panel__right > h5,
  .artist-bar > .info-panel__left > h5,
  .playlist-bar > .info-panel > h5,
  .playlist-bar > .info-panel__right > h5,
  .playlist-bar > .info-panel__left > h5 {
    padding: 0 24px; }
  .artist-bar > .info-panel > h6, .artist-bar > .info-panel .head, .artist-bar > .info-panel .line1, .artist-bar > .info-panel .line2,
  .artist-bar > .info-panel__right > h6,
  .artist-bar > .info-panel__right .head,
  .artist-bar > .info-panel__right .line1,
  .artist-bar > .info-panel__right .line2,
  .artist-bar > .info-panel__left > h6,
  .artist-bar > .info-panel__left .head,
  .artist-bar > .info-panel__left .line1,
  .artist-bar > .info-panel__left .line2,
  .playlist-bar > .info-panel > h6,
  .playlist-bar > .info-panel .head,
  .playlist-bar > .info-panel .line1,
  .playlist-bar > .info-panel .line2,
  .playlist-bar > .info-panel__right > h6,
  .playlist-bar > .info-panel__right .head,
  .playlist-bar > .info-panel__right .line1,
  .playlist-bar > .info-panel__right .line2,
  .playlist-bar > .info-panel__left > h6,
  .playlist-bar > .info-panel__left .head,
  .playlist-bar > .info-panel__left .line1,
  .playlist-bar > .info-panel__left .line2 {
    padding: 0 18px; }
  .artist-bar > .info-panel,
  .playlist-bar > .info-panel {
    width: 100%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; }
    .artist-bar > .info-panel > h6, .artist-bar > .info-panel h5, .artist-bar > .info-panel .head, .artist-bar > .info-panel .line1,
    .playlist-bar > .info-panel > h6,
    .playlist-bar > .info-panel h5,
    .playlist-bar > .info-panel .head,
    .playlist-bar > .info-panel .line1 {
      left: 0;
      bottom: 10px; }
    .artist-bar > .info-panel > .line2,
    .playlist-bar > .info-panel > .line2 {
      left: 0;
      bottom: 12px; }
  .artist-bar > .info-panel__left,
  .playlist-bar > .info-panel__left {
    width: 33.333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
    .artist-bar > .info-panel__left > h6, .artist-bar > .info-panel__left h5,
    .playlist-bar > .info-panel__left > h6,
    .playlist-bar > .info-panel__left h5 {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      text-align: right; }
  .artist-bar > .info-panel__right,
  .playlist-bar > .info-panel__right {
    width: auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 8px 24px;
    font-size: 0.85rem; }
    .artist-bar > .info-panel__right > h6, .artist-bar > .info-panel__right h5,
    .playlist-bar > .info-panel__right > h6,
    .playlist-bar > .info-panel__right h5 {
      left: 0; }
  .artist-bar > .sub,
  .playlist-bar > .sub {
    background: #827d79; }
    .artist-bar > .sub > h6, .artist-bar > .sub h5,
    .playlist-bar > .sub > h6,
    .playlist-bar > .sub h5 {
      color: #FFF; }
      .artist-bar > .sub > h6 > a, .track-slider .artist-bar > .sub > h6 > a, .layout-box.grid .artist-bar > .sub > h6 > a, .social-title .artist-bar > .sub > h6 > a, #footer .artist-bar > .sub > h6 > a, .artist-bar > .sub h5 > a, .artist-bar > .sub .track-slider h5 > a, .track-slider .artist-bar > .sub h5 > a, .artist-bar > .sub .layout-box.grid h5 > a, .layout-box.grid .artist-bar > .sub h5 > a, .artist-bar > .sub .social-title h5 > a, .social-title .artist-bar > .sub h5 > a, .artist-bar > .sub #footer h5 > a, #footer .artist-bar > .sub h5 > a,
      .playlist-bar > .sub > h6 > a, .track-slider
      .playlist-bar > .sub > h6 > a, .layout-box.grid
      .playlist-bar > .sub > h6 > a, .social-title
      .playlist-bar > .sub > h6 > a, #footer
      .playlist-bar > .sub > h6 > a,
      .playlist-bar > .sub h5 > a,
      .playlist-bar > .sub .track-slider h5 > a, .track-slider
      .playlist-bar > .sub h5 > a,
      .playlist-bar > .sub .layout-box.grid h5 > a, .layout-box.grid
      .playlist-bar > .sub h5 > a,
      .playlist-bar > .sub .social-title h5 > a, .social-title
      .playlist-bar > .sub h5 > a,
      .playlist-bar > .sub #footer h5 > a, #footer
      .playlist-bar > .sub h5 > a {
        color: #FFF; }
  .artist-bar > .main,
  .playlist-bar > .main {
    background: #FFF; }
    .artist-bar > .main > h6, .artist-bar > .main h5,
    .playlist-bar > .main > h6,
    .playlist-bar > .main h5 {
      color: #333230; }
      .artist-bar > .main > h6 > a, .track-slider .artist-bar > .main > h6 > a, .layout-box.grid .artist-bar > .main > h6 > a, .social-title .artist-bar > .main > h6 > a, #footer .artist-bar > .main > h6 > a, .artist-bar > .main h5 > a, .artist-bar > .main .track-slider h5 > a, .track-slider .artist-bar > .main h5 > a, .artist-bar > .main .layout-box.grid h5 > a, .layout-box.grid .artist-bar > .main h5 > a, .artist-bar > .main .social-title h5 > a, .social-title .artist-bar > .main h5 > a, .artist-bar > .main #footer h5 > a, #footer .artist-bar > .main h5 > a,
      .playlist-bar > .main > h6 > a, .track-slider
      .playlist-bar > .main > h6 > a, .layout-box.grid
      .playlist-bar > .main > h6 > a, .social-title
      .playlist-bar > .main > h6 > a, #footer
      .playlist-bar > .main > h6 > a,
      .playlist-bar > .main h5 > a,
      .playlist-bar > .main .track-slider h5 > a, .track-slider
      .playlist-bar > .main h5 > a,
      .playlist-bar > .main .layout-box.grid h5 > a, .layout-box.grid
      .playlist-bar > .main h5 > a,
      .playlist-bar > .main .social-title h5 > a, .social-title
      .playlist-bar > .main h5 > a,
      .playlist-bar > .main #footer h5 > a, #footer
      .playlist-bar > .main h5 > a {
        color: #333230; }

.playlist-bar:not(.small) {
  border-bottom: solid 1px #b2afac; }

.playlist-bar.small {
  height: 48px; }
  .playlist-bar.small > .header__button {
    width: 45px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 48px; }
  .playlist-bar.small > .info-panel > h6 {
    bottom: 5px; }

.droplist__entry > .playlist-bar.small > .header__button.playbutton {
  border-bottom: solid 2px #e57561; }

.playlist-bar > .info-panel .line1 {
  bottom: 17px; }

.playlist-bar.interactive:hover > .info-panel, .playlist-bar.interactive:hover > .header__button:not(.playbutton) {
  background: #fafafa; }

.playlist-bar.interactive:hover:after {
  background: #fafafa !important; }

@media only screen and (max-width: 1024px) {
  .artist-bar .info-panel {
    width: -webkit-calc(50% - 7rem);
    width: calc(50% - 7rem); }
  .artist-bar .breadcrumbs {
    width: 50%; } }

@media only screen and (max-width: 480px) {
  .artist-bar .info-panel {
    width: -webkit-calc(100% - 7rem);
    width: calc(100% - 7rem); } }

/* ------------------------------------------------------------------------------
        social page layouts
     ------------------------------------------------------------------------------ */
.header__social-data {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  color: #FFF;
  position: absolute;
  right: 0;
  top: 240px;
  padding: 0 22px;
  font-weight: 500;
  font-size: 14px;
  overflow: hidden; }

.header__social-data > div,
.call-to-action__data > div {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  padding: 0 10px;
  line-height: 1.8; }
  .header__social-data > div.border,
  .call-to-action__data > div.border {
    border: solid 1px rgba(255, 255, 255, 0.8);
    background: rgba(10, 10, 15, 0.3);
    padding: 5px;
    margin: 0 5px; }
  .header__social-data > div .number-box,
  .call-to-action__data > div .number-box {
    padding: 0 10px;
    position: absolute;
    top: 42px;
    color: #FFF;
    left: 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box; }
  .header__social-data > div > a, .track-slider .header__social-data > div > a, .layout-box.grid .header__social-data > div > a, .social-title .header__social-data > div > a, #footer .header__social-data > div > a, .header__social-data > div title,
  .call-to-action__data > div > a, .track-slider
  .call-to-action__data > div > a, .layout-box.grid
  .call-to-action__data > div > a, .social-title
  .call-to-action__data > div > a, #footer
  .call-to-action__data > div > a,
  .call-to-action__data > div title {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    background-color: #FFF;
    line-height: 1.8;
    padding: 2px 15px;
    color: #333230;
    min-width: 60px;
    text-align: center;
    margin-bottom: 40px;
    display: block;
    width: 100%; }

@media screen and (max-width: 800px) {
  .call-to-action__data {
    top: 150px;
    left: 15px; }
  .header__social-data > div.border, .call-to-action__data > div.border {
    padding: 2px; }
  .header__social-data > div > a, .track-slider .header__social-data > div > a, .layout-box.grid .header__social-data > div > a, .social-title .header__social-data > div > a, #footer .header__social-data > div > a, .header__social-data > div title, .call-to-action__data > div > a, .track-slider .call-to-action__data > div > a, .layout-box.grid .call-to-action__data > div > a, .social-title .call-to-action__data > div > a, #footer .call-to-action__data > div > a, .call-to-action__data > div title {
    padding: 2px 8px; }
  .header__social-data {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: end;
    -webkit-align-content: flex-end;
    align-content: flex-end;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    padding: 0 10px;
    top: 70px;
    right: 10px; }
    .header__social-data > div {
      width: auto;
      -webkit-flex: 0 0 auto;
      flex: 0 0 auto;
      -ms-flex-pack: end;
      -webkit-justify-content: flex-end;
      justify-content: flex-end;
      padding: 8px 0; }
      .header__social-data > div.border {
        margin: 2px 0; }
      .header__social-data > div .number-box {
        -webkit-order: 1;
        order: 1; } }

.number-box {
  font-family: Numbers, courier, serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  margin: 0 5px 0 0;
  display: inline-block; }
  .number-box > .liquid-container {
    top: 8px;
    width: 110%; }
    .number-box > .liquid-container > .liquid-child {
      width: 110%; }

/* ------------------------------------------------------------------------------
        feedbox
     ------------------------------------------------------------------------------ */
.feed-image {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: right; }
  .feed-image img {
    background-color: #e2e1e0;
    width: 100%; }

.feed-box {
  background: #FFF;
  border-top: solid 1px #e2e1e0;
  min-height: 90px;
  overflow: hidden; }
  .feed-box .date {
    position: absolute;
    margin: 0; }
  .feed-box .merge {
    height: 100%; }
  .feed-box .button-container {
    width: 4.5rem; }
  .feed-box .data-container {
    width: -webkit-calc(100% - 9rem);
    width: calc(100% - 9rem); }
  .feed-box .track-tools {
    position: absolute;
    right: 0.5rem;
    bottom: 0;
    z-index: 1;
    background: #FFF;
    padding: 0 0.24rem; }
  .feed-box .action-bar {
    -webkit-transition: top 0.3s ease-out;
    transition: top 0.3s ease-out;
    position: absolute;
    white-space: nowrap;
    width: 15rem;
    top: 3rem;
    text-align: right;
    right: 0.24rem;
    bottom: 0;
    background: #FFF; }
  .feed-box .nav_button.plus {
    background-color: #FFF;
    border-radius: 50%; }

.feed-box.full {
  height: 140px; }

.action-bar.slide {
  top: -.5rem; }

.fade, .fade a, .fade .layout-box.grid a, .layout-box.grid .fade a, .fade #footer a, #footer .fade a {
  color: #b2afac !important; }

/* /feedbox ----------------- */
.comment-block {
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  background: #FFF; }
  .comment-block textarea {
    min-height: 4rem;
    margin: 0;
    width: -webkit-calc(100% - 120px);
    width: calc(100% - 120px); }
  .comment-block button {
    position: absolute;
    margin: 0;
    bottom: 10px;
    right: 10px; }

.commentbox {
  -webkit-transition: 0.8s ease-out;
  transition: 0.8s ease-out;
  opacity: 0;
  border-top: solid 1px #cac8c6; }
  .commentbox.blend {
    opacity: 1; }

.dashboard-page {
  min-height: 800px; }

#dashboard {
  min-height: 600px; }

.h-row {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out; }

.feed-list__row {
  background: #FFF; }

.track__result {
  background: #e2e1e0;
  border-right: solid 5px #1b1a19;
  height: 70px;
  position: absolute;
  bottom: 0px;
  left: 0;
  padding: 50px 0 0 8px;
  font-size: 11px;
  color: #827d79; }

.mini-chart__result,
.chart__result {
  border-right: solid 1px #1b1a19;
  font-size: 11px;
  color: #827d79;
  text-align: right;
  height: 60px;
  position: absolute;
  bottom: 0; }
  .mini-chart__result > div,
  .chart__result > div {
    position: absolute;
    left: 0;
    bottom: 0;
    right: -2px;
    padding: 2px 8px;
    height: 20px;
    border-right: solid 4px #cac8c6;
    border-bottom: solid 1px #b2afac;
    border-top: solid 1px #b2afac;
    color: #FFF; }

.chart-result__meta {
  width: 100%;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: -40px 0 0;
  height: 60px;
  z-index: -1; }

.track__result.skin-0 {
  border-color: #de4f35; }

.mini-chart__result.skin-0 {
  border-color: rgba(222, 79, 53, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-0 > div {
  border-right-color: #de4f35;
  border-bottom-color: #de4f35;
  border-top-color: rgba(222, 79, 53, 0.1);
  background-color: #de4f35; }

.track__result.skin-1 {
  border-color: #d75046; }

.mini-chart__result.skin-1 {
  border-color: rgba(215, 80, 70, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-1 > div {
  border-right-color: #d75046;
  border-bottom-color: #d75046;
  border-top-color: rgba(215, 80, 70, 0.1);
  background-color: #d75046; }

.track__result.skin-2 {
  border-color: #d05056; }

.mini-chart__result.skin-2 {
  border-color: rgba(208, 80, 86, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-2 > div {
  border-right-color: #d05056;
  border-bottom-color: #d05056;
  border-top-color: rgba(208, 80, 86, 0.1);
  background-color: #d05056; }

.track__result.skin-3 {
  border-color: #c95167; }

.mini-chart__result.skin-3 {
  border-color: rgba(201, 81, 103, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-3 > div {
  border-right-color: #c95167;
  border-bottom-color: #c95167;
  border-top-color: rgba(201, 81, 103, 0.1);
  background-color: #c95167; }

.track__result.skin-4 {
  border-color: #c25278; }

.mini-chart__result.skin-4 {
  border-color: rgba(194, 82, 120, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-4 > div {
  border-right-color: #c25278;
  border-bottom-color: #c25278;
  border-top-color: rgba(194, 82, 120, 0.1);
  background-color: #c25278; }

.track__result.skin-5 {
  border-color: #bb5288; }

.mini-chart__result.skin-5 {
  border-color: rgba(187, 82, 136, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-5 > div {
  border-right-color: #bb5288;
  border-bottom-color: #bb5288;
  border-top-color: rgba(187, 82, 136, 0.1);
  background-color: #bb5288; }

.track__result.skin-6 {
  border-color: #b45399; }

.mini-chart__result.skin-6 {
  border-color: rgba(180, 83, 153, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-6 > div {
  border-right-color: #b45399;
  border-bottom-color: #b45399;
  border-top-color: rgba(180, 83, 153, 0.1);
  background-color: #b45399; }

.track__result.skin-7 {
  border-color: #ad53a9; }

.mini-chart__result.skin-7 {
  border-color: rgba(173, 83, 169, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-7 > div {
  border-right-color: #ad53a9;
  border-bottom-color: #ad53a9;
  border-top-color: rgba(173, 83, 169, 0.1);
  background-color: #ad53a9; }

.track__result.skin-8 {
  border-color: #a654ba; }

.mini-chart__result.skin-8 {
  border-color: rgba(166, 84, 186, 0.1);
  background-color: rgba(104, 101, 97, 0.03); }

.mini-chart__result.skin-8 > div {
  border-right-color: #a654ba;
  border-bottom-color: #a654ba;
  border-top-color: rgba(166, 84, 186, 0.1);
  background-color: #a654ba; }

.chart__result.skin-0 {
  border-color: rgba(237, 158, 144, 0.15);
  background-color: rgba(237, 158, 144, 0.05); }

.chart__result.skin-0 > div {
  border-right-color: #ed9e90;
  border-bottom-color: #ed9e90;
  border-top-color: rgba(237, 158, 144, 0.1);
  background-color: rgba(237, 158, 144, 0.05); }

.chart__result.skin-1 {
  border-color: rgba(237, 159, 143, 0.15);
  background-color: rgba(237, 159, 143, 0.05); }

.chart__result.skin-1 > div {
  border-right-color: #ed9f8f;
  border-bottom-color: #ed9f8f;
  border-top-color: rgba(237, 159, 143, 0.1);
  background-color: rgba(237, 159, 143, 0.05); }

.chart__result.skin-2 {
  border-color: rgba(237, 161, 143, 0.15);
  background-color: rgba(237, 161, 143, 0.05); }

.chart__result.skin-2 > div {
  border-right-color: #eda18f;
  border-bottom-color: #eda18f;
  border-top-color: rgba(237, 161, 143, 0.1);
  background-color: rgba(237, 161, 143, 0.05); }

.chart__result.skin-3 {
  border-color: rgba(238, 162, 142, 0.15);
  background-color: rgba(238, 162, 142, 0.05); }

.chart__result.skin-3 > div {
  border-right-color: #eea28e;
  border-bottom-color: #eea28e;
  border-top-color: rgba(238, 162, 142, 0.1);
  background-color: rgba(238, 162, 142, 0.05); }

.chart__result.skin-4 {
  border-color: rgba(238, 163, 142, 0.15);
  background-color: rgba(238, 163, 142, 0.05); }

.chart__result.skin-4 > div {
  border-right-color: #eea38e;
  border-bottom-color: #eea38e;
  border-top-color: rgba(238, 163, 142, 0.1);
  background-color: rgba(238, 163, 142, 0.05); }

.chart__result.skin-5 {
  border-color: rgba(239, 164, 142, 0.15);
  background-color: rgba(239, 164, 142, 0.05); }

.chart__result.skin-5 > div {
  border-right-color: #efa48e;
  border-bottom-color: #efa48e;
  border-top-color: rgba(239, 164, 142, 0.1);
  background-color: rgba(239, 164, 142, 0.05); }

.chart__result.skin-6 {
  border-color: rgba(239, 166, 141, 0.15);
  background-color: rgba(239, 166, 141, 0.05); }

.chart__result.skin-6 > div {
  border-right-color: #efa68d;
  border-bottom-color: #efa68d;
  border-top-color: rgba(239, 166, 141, 0.1);
  background-color: rgba(239, 166, 141, 0.05); }

.chart__result.skin-7 {
  border-color: rgba(239, 167, 141, 0.15);
  background-color: rgba(239, 167, 141, 0.05); }

.chart__result.skin-7 > div {
  border-right-color: #efa78d;
  border-bottom-color: #efa78d;
  border-top-color: rgba(239, 167, 141, 0.1);
  background-color: rgba(239, 167, 141, 0.05); }

.chart__result.skin-8 {
  border-color: rgba(240, 168, 140, 0.15);
  background-color: rgba(240, 168, 140, 0.05); }

.chart__result.skin-8 > div {
  border-right-color: #f0a88c;
  border-bottom-color: #f0a88c;
  border-top-color: rgba(240, 168, 140, 0.1);
  background-color: rgba(240, 168, 140, 0.05); }

.chart__result.skin-9 {
  border-color: rgba(240, 170, 140, 0.15);
  background-color: rgba(240, 170, 140, 0.05); }

.chart__result.skin-9 > div {
  border-right-color: #f0aa8c;
  border-bottom-color: #f0aa8c;
  border-top-color: rgba(240, 170, 140, 0.1);
  background-color: rgba(240, 170, 140, 0.05); }

.chart__result.skin-10 {
  border-color: rgba(240, 171, 139, 0.15);
  background-color: rgba(240, 171, 139, 0.05); }

.chart__result.skin-10 > div {
  border-right-color: #f0ab8b;
  border-bottom-color: #f0ab8b;
  border-top-color: rgba(240, 171, 139, 0.1);
  background-color: rgba(240, 171, 139, 0.05); }

.chart__result.skin-11 {
  border-color: rgba(241, 172, 138, 0.15);
  background-color: rgba(241, 172, 138, 0.05); }

.chart__result.skin-11 > div {
  border-right-color: #f1ac8a;
  border-bottom-color: #f1ac8a;
  border-top-color: rgba(241, 172, 138, 0.1);
  background-color: rgba(241, 172, 138, 0.05); }

.chart__result.skin-12 {
  border-color: rgba(241, 173, 138, 0.15);
  background-color: rgba(241, 173, 138, 0.05); }

.chart__result.skin-12 > div {
  border-right-color: #f1ad8a;
  border-bottom-color: #f1ad8a;
  border-top-color: rgba(241, 173, 138, 0.1);
  background-color: rgba(241, 173, 138, 0.05); }

.chart__result.skin-13 {
  border-color: rgba(241, 175, 137, 0.15);
  background-color: rgba(241, 175, 137, 0.05); }

.chart__result.skin-13 > div {
  border-right-color: #f1af89;
  border-bottom-color: #f1af89;
  border-top-color: rgba(241, 175, 137, 0.1);
  background-color: rgba(241, 175, 137, 0.05); }

.chart__result.skin-14 {
  border-color: rgba(241, 176, 137, 0.15);
  background-color: rgba(241, 176, 137, 0.05); }

.chart__result.skin-14 > div {
  border-right-color: #f1b089;
  border-bottom-color: #f1b089;
  border-top-color: rgba(241, 176, 137, 0.1);
  background-color: rgba(241, 176, 137, 0.05); }

.chart__result.skin-15 {
  border-color: rgba(242, 177, 137, 0.15);
  background-color: rgba(242, 177, 137, 0.05); }

.chart__result.skin-15 > div {
  border-right-color: #f2b189;
  border-bottom-color: #f2b189;
  border-top-color: rgba(242, 177, 137, 0.1);
  background-color: rgba(242, 177, 137, 0.05); }

.chart__result.skin-16 {
  border-color: rgba(242, 178, 136, 0.15);
  background-color: rgba(242, 178, 136, 0.05); }

.chart__result.skin-16 > div {
  border-right-color: #f2b288;
  border-bottom-color: #f2b288;
  border-top-color: rgba(242, 178, 136, 0.1);
  background-color: rgba(242, 178, 136, 0.05); }

.chart__result.skin-17 {
  border-color: rgba(242, 180, 136, 0.15);
  background-color: rgba(242, 180, 136, 0.05); }

.chart__result.skin-17 > div {
  border-right-color: #f2b488;
  border-bottom-color: #f2b488;
  border-top-color: rgba(242, 180, 136, 0.1);
  background-color: rgba(242, 180, 136, 0.05); }

.chart__result.skin-18 {
  border-color: rgba(243, 181, 135, 0.15);
  background-color: rgba(243, 181, 135, 0.05); }

.chart__result.skin-18 > div {
  border-right-color: #f3b587;
  border-bottom-color: #f3b587;
  border-top-color: rgba(243, 181, 135, 0.1);
  background-color: rgba(243, 181, 135, 0.05); }

.chart__result.skin-19 {
  border-color: rgba(243, 182, 135, 0.15);
  background-color: rgba(243, 182, 135, 0.05); }

.chart__result.skin-19 > div {
  border-right-color: #f3b687;
  border-bottom-color: #f3b687;
  border-top-color: rgba(243, 182, 135, 0.1);
  background-color: rgba(243, 182, 135, 0.05); }

.chart__result.skin-20 {
  border-color: rgba(243, 184, 134, 0.15);
  background-color: rgba(243, 184, 134, 0.05); }

.chart__result.skin-20 > div {
  border-right-color: #f3b886;
  border-bottom-color: #f3b886;
  border-top-color: rgba(243, 184, 134, 0.1);
  background-color: rgba(243, 184, 134, 0.05); }

.chart__result.skin-21 {
  border-color: rgba(244, 185, 133, 0.15);
  background-color: rgba(244, 185, 133, 0.05); }

.chart__result.skin-21 > div {
  border-right-color: #f4b985;
  border-bottom-color: #f4b985;
  border-top-color: rgba(244, 185, 133, 0.1);
  background-color: rgba(244, 185, 133, 0.05); }

.chart__result.skin-22 {
  border-color: rgba(244, 186, 133, 0.15);
  background-color: rgba(244, 186, 133, 0.05); }

.chart__result.skin-22 > div {
  border-right-color: #f4ba85;
  border-bottom-color: #f4ba85;
  border-top-color: rgba(244, 186, 133, 0.1);
  background-color: rgba(244, 186, 133, 0.05); }

.chart__result.skin-23 {
  border-color: rgba(245, 187, 132, 0.15);
  background-color: rgba(245, 187, 132, 0.05); }

.chart__result.skin-23 > div {
  border-right-color: #f5bb84;
  border-bottom-color: #f5bb84;
  border-top-color: rgba(245, 187, 132, 0.1);
  background-color: rgba(245, 187, 132, 0.05); }

.chart__result.skin-24 {
  border-color: rgba(245, 188, 132, 0.15);
  background-color: rgba(245, 188, 132, 0.05); }

.chart__result.skin-24 > div {
  border-right-color: #f5bc84;
  border-bottom-color: #f5bc84;
  border-top-color: rgba(245, 188, 132, 0.1);
  background-color: rgba(245, 188, 132, 0.05); }

.chart__result.skin-25 {
  border-color: rgba(245, 190, 132, 0.15);
  background-color: rgba(245, 190, 132, 0.05); }

.chart__result.skin-25 > div {
  border-right-color: #f5be84;
  border-bottom-color: #f5be84;
  border-top-color: rgba(245, 190, 132, 0.1);
  background-color: rgba(245, 190, 132, 0.05); }

.chart__result.skin-26 {
  border-color: rgba(246, 191, 131, 0.15);
  background-color: rgba(246, 191, 131, 0.05); }

.chart__result.skin-26 > div {
  border-right-color: #f6bf83;
  border-bottom-color: #f6bf83;
  border-top-color: rgba(246, 191, 131, 0.1);
  background-color: rgba(246, 191, 131, 0.05); }

.chart__result.skin-27 {
  border-color: rgba(246, 192, 131, 0.15);
  background-color: rgba(246, 192, 131, 0.05); }

.chart__result.skin-27 > div {
  border-right-color: #f6c083;
  border-bottom-color: #f6c083;
  border-top-color: rgba(246, 192, 131, 0.1);
  background-color: rgba(246, 192, 131, 0.05); }

.chart__result.skin-28 {
  border-color: rgba(246, 193, 130, 0.15);
  background-color: rgba(246, 193, 130, 0.05); }

.chart__result.skin-28 > div {
  border-right-color: #f6c182;
  border-bottom-color: #f6c182;
  border-top-color: rgba(246, 193, 130, 0.1);
  background-color: rgba(246, 193, 130, 0.05); }

.chart__result.skin-29 {
  border-color: rgba(246, 195, 130, 0.15);
  background-color: rgba(246, 195, 130, 0.05); }

.chart__result.skin-29 > div {
  border-right-color: #f6c382;
  border-bottom-color: #f6c382;
  border-top-color: rgba(246, 195, 130, 0.1);
  background-color: rgba(246, 195, 130, 0.05); }

.chart__result.skin-30 {
  border-color: rgba(247, 196, 129, 0.15);
  background-color: rgba(247, 196, 129, 0.05); }

.chart__result.skin-30 > div {
  border-right-color: #f7c481;
  border-bottom-color: #f7c481;
  border-top-color: rgba(247, 196, 129, 0.1);
  background-color: rgba(247, 196, 129, 0.05); }

.chart__result.skin-31 {
  border-color: rgba(247, 197, 129, 0.15);
  background-color: rgba(247, 197, 129, 0.05); }

.chart__result.skin-31 > div {
  border-right-color: #f7c581;
  border-bottom-color: #f7c581;
  border-top-color: rgba(247, 197, 129, 0.1);
  background-color: rgba(247, 197, 129, 0.05); }

.chart__result.skin-32 {
  border-color: rgba(247, 198, 128, 0.15);
  background-color: rgba(247, 198, 128, 0.05); }

.chart__result.skin-32 > div {
  border-right-color: #f7c680;
  border-bottom-color: #f7c680;
  border-top-color: rgba(247, 198, 128, 0.1);
  background-color: rgba(247, 198, 128, 0.05); }

.chart__result.skin-33 {
  border-color: rgba(248, 199, 127, 0.15);
  background-color: rgba(248, 199, 127, 0.05); }

.chart__result.skin-33 > div {
  border-right-color: #f8c77f;
  border-bottom-color: #f8c77f;
  border-top-color: rgba(248, 199, 127, 0.1);
  background-color: rgba(248, 199, 127, 0.05); }

.chart__result.skin-34 {
  border-color: rgba(248, 201, 127, 0.15);
  background-color: rgba(248, 201, 127, 0.05); }

.chart__result.skin-34 > div {
  border-right-color: #f8c97f;
  border-bottom-color: #f8c97f;
  border-top-color: rgba(248, 201, 127, 0.1);
  background-color: rgba(248, 201, 127, 0.05); }

.chart__result.skin-35 {
  border-color: rgba(248, 202, 127, 0.15);
  background-color: rgba(248, 202, 127, 0.05); }

.chart__result.skin-35 > div {
  border-right-color: #f8ca7f;
  border-bottom-color: #f8ca7f;
  border-top-color: rgba(248, 202, 127, 0.1);
  background-color: rgba(248, 202, 127, 0.05); }

.chart__result.skin-36 {
  border-color: rgba(249, 203, 126, 0.15);
  background-color: rgba(249, 203, 126, 0.05); }

.chart__result.skin-36 > div {
  border-right-color: #f9cb7e;
  border-bottom-color: #f9cb7e;
  border-top-color: rgba(249, 203, 126, 0.1);
  background-color: rgba(249, 203, 126, 0.05); }

.chart__result.skin-37 {
  border-color: rgba(249, 204, 126, 0.15);
  background-color: rgba(249, 204, 126, 0.05); }

.chart__result.skin-37 > div {
  border-right-color: #f9cc7e;
  border-bottom-color: #f9cc7e;
  border-top-color: rgba(249, 204, 126, 0.1);
  background-color: rgba(249, 204, 126, 0.05); }

.chart__result.skin-38 {
  border-color: rgba(250, 206, 125, 0.15);
  background-color: rgba(250, 206, 125, 0.05); }

.chart__result.skin-38 > div {
  border-right-color: #face7d;
  border-bottom-color: #face7d;
  border-top-color: rgba(250, 206, 125, 0.1);
  background-color: rgba(250, 206, 125, 0.05); }

.chart__result.skin-39 {
  border-color: rgba(250, 207, 125, 0.15);
  background-color: rgba(250, 207, 125, 0.05); }

.chart__result.skin-39 > div {
  border-right-color: #facf7d;
  border-bottom-color: #facf7d;
  border-top-color: rgba(250, 207, 125, 0.1);
  background-color: rgba(250, 207, 125, 0.05); }

.chart__result.skin-40 {
  border-color: rgba(250, 208, 124, 0.15);
  background-color: rgba(250, 208, 124, 0.05); }

.chart__result.skin-40 > div {
  border-right-color: #fad07c;
  border-bottom-color: #fad07c;
  border-top-color: rgba(250, 208, 124, 0.1);
  background-color: rgba(250, 208, 124, 0.05); }

.chart__result.skin-41 {
  border-color: rgba(251, 209, 124, 0.15);
  background-color: rgba(251, 209, 124, 0.05); }

.chart__result.skin-41 > div {
  border-right-color: #fbd17c;
  border-bottom-color: #fbd17c;
  border-top-color: rgba(251, 209, 124, 0.1);
  background-color: rgba(251, 209, 124, 0.05); }

.chart__result.skin-42 {
  border-color: rgba(251, 211, 123, 0.15);
  background-color: rgba(251, 211, 123, 0.05); }

.chart__result.skin-42 > div {
  border-right-color: #fbd37b;
  border-bottom-color: #fbd37b;
  border-top-color: rgba(251, 211, 123, 0.1);
  background-color: rgba(251, 211, 123, 0.05); }

.chart__result.skin-43 {
  border-color: rgba(251, 212, 122, 0.15);
  background-color: rgba(251, 212, 122, 0.05); }

.chart__result.skin-43 > div {
  border-right-color: #fbd47a;
  border-bottom-color: #fbd47a;
  border-top-color: rgba(251, 212, 122, 0.1);
  background-color: rgba(251, 212, 122, 0.05); }

.chart__result.skin-44 {
  border-color: rgba(251, 213, 122, 0.15);
  background-color: rgba(251, 213, 122, 0.05); }

.chart__result.skin-44 > div {
  border-right-color: #fbd57a;
  border-bottom-color: #fbd57a;
  border-top-color: rgba(251, 213, 122, 0.1);
  background-color: rgba(251, 213, 122, 0.05); }

.chart__result.skin-45 {
  border-color: rgba(252, 215, 122, 0.15);
  background-color: rgba(252, 215, 122, 0.05); }

.chart__result.skin-45 > div {
  border-right-color: #fcd77a;
  border-bottom-color: #fcd77a;
  border-top-color: rgba(252, 215, 122, 0.1);
  background-color: rgba(252, 215, 122, 0.05); }

.chart__result.skin-46 {
  border-color: rgba(252, 216, 121, 0.15);
  background-color: rgba(252, 216, 121, 0.05); }

.chart__result.skin-46 > div {
  border-right-color: #fcd879;
  border-bottom-color: #fcd879;
  border-top-color: rgba(252, 216, 121, 0.1);
  background-color: rgba(252, 216, 121, 0.05); }

.chart__result.skin-47 {
  border-color: rgba(252, 217, 121, 0.15);
  background-color: rgba(252, 217, 121, 0.05); }

.chart__result.skin-47 > div {
  border-right-color: #fcd979;
  border-bottom-color: #fcd979;
  border-top-color: rgba(252, 217, 121, 0.1);
  background-color: rgba(252, 217, 121, 0.05); }

.chart__result.skin-48 {
  border-color: rgba(253, 218, 120, 0.15);
  background-color: rgba(253, 218, 120, 0.05); }

.chart__result.skin-48 > div {
  border-right-color: #fdda78;
  border-bottom-color: #fdda78;
  border-top-color: rgba(253, 218, 120, 0.1);
  background-color: rgba(253, 218, 120, 0.05); }

.chart__result.skin-49 {
  border-color: rgba(253, 220, 120, 0.15);
  background-color: rgba(253, 220, 120, 0.05); }

.chart__result.skin-49 > div {
  border-right-color: #fddc78;
  border-bottom-color: #fddc78;
  border-top-color: rgba(253, 220, 120, 0.1);
  background-color: rgba(253, 220, 120, 0.05); }

.chart__result.skin-50 {
  border-color: rgba(253, 221, 119, 0.15);
  background-color: rgba(253, 221, 119, 0.05); }

.chart__result.skin-50 > div {
  border-right-color: #fddd77;
  border-bottom-color: #fddd77;
  border-top-color: rgba(253, 221, 119, 0.1);
  background-color: rgba(253, 221, 119, 0.05); }

.track-slider:hover .list__play-button.resolved {
  background: #F27F10; }

.distinct-row.double:hover .track-slider,
.track-slider:hover {
  background: #fafafa; }
  .distinct-row.double:hover .track-slider > .list-action.resolved,
  .track-slider:hover > .list-action.resolved {
    background: #F27F10; }
  .distinct-row.double:hover .track-slider > .side-panel.comment,
  .track-slider:hover > .side-panel.comment {
    background: #e2e1e0; }
  .distinct-row.double:hover .track-slider > .image-panel > .front,
  .track-slider:hover > .image-panel > .front {
    opacity: 1; }
  .distinct-row.double:hover .track-slider > .main-panel,
  .distinct-row.double:hover .track-slider > .content-panel,
  .distinct-row.double:hover .track-slider > .slide-out,
  .track-slider:hover > .main-panel,
  .track-slider:hover > .content-panel,
  .track-slider:hover > .slide-out {
    background: #fafafa; }
  .distinct-row.double:hover .track-slider > .list-action,
  .track-slider:hover > .list-action {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  .distinct-row.double:hover .track-slider > .gripper-panel,
  .track-slider:hover > .gripper-panel {
    background: #fafafa; }
    .distinct-row.double:hover .track-slider > .gripper-panel > .nav_button,
    .distinct-row.double:hover .track-slider > .gripper-panel > .crop > .nav_button,
    .track-slider:hover > .gripper-panel > .nav_button,
    .track-slider:hover > .gripper-panel > .crop > .nav_button {
      -webkit-transition: 0.2s ease-out;
      transition: 0.2s ease-out;
      opacity: 1; }

.social-action__content {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }
  .social-action__content > section {
    width: 33.3333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }

.gripper-panel {
  width: 14px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  -ms-align-self: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
  padding: 0 1px; }
  .gripper-panel > .nav_button, .gripper-panel > .crop > .nav_button {
    opacity: 0;
    margin: 2px 0 -5px !important;
    display: block; }

.listNumber + .gripper-panel > .crop {
  width: 14px;
  height: 46px; }

.image-panel {
  -ms-align-self: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
  width: 202px;
  background-color: #b2afac; }
  .image-panel.clear {
    background-color: transparent; }
  .image-panel.chart, .image-panel.ps {
    width: 50px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-align-self: center;
    -webkit-align-self: center;
    align-self: center;
    margin: 0 2px 0 6px; }
  .image-panel.medium {
    width: 65px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-align-self: center;
    -webkit-align-self: center;
    align-self: center;
    margin: 0 2px 0 6px; }
  .image-panel.large {
    width: 70px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-align-self: center;
    -webkit-align-self: center;
    align-self: center;
    margin: 0 2px 0 6px; }
  .image-panel.chart {
    height: 52px; }
    .image-panel.chart img {
      object-fit: cover;
      height: -moz-available;
      height: -webkit-fill-available;
      height: available; }
  .image-panel.ps {
    height: 42px; }
  .image-panel.round {
    width: initial;
    max-width: 70px; }
  .image-panel > .back {
    opacity: .5; }
  .image-panel > .front {
    -webkit-transition: 0.35s ease-out;
    transition: 0.35s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    background-color: #b2afac; }
  .image-panel > .type {
    color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px; }
  .image-panel > div {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }

.h-row > .side-panel {
  width: 202px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: .9rem 1rem; }
  .h-row > .side-panel > p.date {
    color: #827d79;
    margin: 0;
    margin: -2px 0 0 49px;
    display: block; }
  .h-row > .side-panel > a, .track-slider .h-row > .side-panel > a, .layout-box.grid .h-row > .side-panel > a, .social-title .h-row > .side-panel > a, #footer .h-row > .side-panel > a {
    color: #686561; }
  .h-row > .side-panel.comment {
    -ms-align-self: stretch;
    -webkit-align-self: stretch;
    align-self: stretch;
    background: #fafafa;
    color: #1b1a19; }

.h-row > .content-panel,
.h-row > .main-panel {
  width: 0px;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 14px;
  padding: 0 0 0 2rem;
  background: #FFF;
  color: #4f4c49;
  padding: 0.5rem 2rem 0.5rem 0.5rem; }

.h-row > .content-panel {
  min-height: 40px; }
  .h-row > .content-panel.h-pad {
    padding: 0 0.5rem; }

.h-row > .main-panel {
  min-height: 80px; }

.h-row .user-cover {
  margin: 0 .5rem 0 0; }
  .h-row .user-cover.no-float {
    float: none;
    margin: 1px;
    display: inline-block; }

.float-block {
  float: left;
  display: block; }

.user-to-user {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 0.5rem;
  margin: 0 0 0.5rem;
  background: #fafafa; }
  .user-to-user > section {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0 1rem;
    margin: 0 0 2rem 0; }
    .user-to-user > section > ul {
      width: auto;
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
      padding: 0 1rem; }
      .user-to-user > section > ul > li {
        display: block;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        border-bottom: solid 1px #cac8c6;
        font-size: .9rem; }
        .user-to-user > section > ul > li > a > h3, .track-slider .user-to-user > section > ul > li > a > h3, .layout-box.grid .user-to-user > section > ul > li > a > h3, .social-title .user-to-user > section > ul > li > a > h3, #footer .user-to-user > section > ul > li > a > h3 {
          width: 100%;
          -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
          margin: 0; }
        .user-to-user > section > ul > li > div {
          width: 50%;
          -webkit-flex: 1 1 auto;
          flex: 1 1 auto; }

.feed-image-fit {
  width: auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  display: block; }

#hatchet_areal {
  width: 100%;
  height: 350px;
  position: relative;
  overflow: hidden; }
  #hatchet_areal img {
    min-width: 100%;
    max-width: none;
    position: absolute;
    height: 350px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }

.system-box {
  background: #efefe9;
  min-height: 15rem; }

.social-title {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-height: 3.5rem;
  background: #FFF;
  border-top: solid 1px #e2e1e0;
  overflow: hidden;
  max-height: 5.6rem;
  padding-left: 13rem;
  z-index: 0; }
  .social-title > .nav_button {
    width: 50px;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .social-title > h3 {
    width: 100%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    line-height: 1.4;
    margin: 0.5rem 0 0; }
  .social-title > .nowplaying {
    width: 25%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 0 1rem;
    text-overflow: ellipsis;
    overflow: hidden; }
    .social-title > .nowplaying > h5 {
      margin: 6px 0 -6px; }

.album-cover {
  width: 100%; }

.user-cover.page {
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  width: 11rem;
  height: 11rem;
  border: #e2e1e0 solid 2px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(16px, -120px);
  transform: translate(16px, -120px);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%; }
  .user-cover.page > .round {
    width: 100%;
    height: 100%; }

@media screen and (max-width: 640px) {
  .htc-sticky .user-cover.page {
    -webkit-transform: translate(14px, -138px) scale(0.15);
    transform: translate(14px, -138px) scale(0.15); }
  .user-cover.page {
    -webkit-transform: translate(10px, -180px);
    transform: translate(10px, -180px); } }

.user-cover {
  background: #b2afac;
  border-radius: 50%;
  overflow: hidden; }
  .user-cover .clipper {
    border-radius: 12rem;
    overflow: hidden; }
  .user-cover.x-small {
    width: 4rem;
    height: 4rem;
    border: none;
    left: 0;
    top: 0;
    margin: 0 0 .5rem;
    position: relative; }
  .user-cover.small {
    width: 5rem;
    height: 5rem;
    border: none;
    left: 0;
    top: 0;
    margin: 0 0 .5rem;
    position: relative; }
  .user-cover.mini {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    border: none; }
  .user-cover.tiny {
    width: 35px;
    height: 35px;
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    border: none; }

.feedface {
  margin: 1rem 0 0; }

@media only screen and (max-width: 1392px) {
  #hatchet_areal img {
    top: 0;
    bottom: 0;
    width: initial; } }

@media only screen and (max-width: 640px) {
  .social-title {
    padding-left: 1em; } }

/* ------------------------------------------------------------------------------
        miniplaylist layouts (feed / sidebar)
     ------------------------------------------------------------------------------ */
.playlist__topartists {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  background: #fafafa;
  min-height: 83px; }
  .playlist__topartists > img, .playlist__topartists a, .playlist__topartists .layout-box.grid a, .layout-box.grid .playlist__topartists a, .playlist__topartists #footer a, #footer .playlist__topartists a {
    width: 33.3333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block; }

.playlist__header {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100px;
  margin: 0 0 1rem 0; }
  .playlist__header > img {
    width: 33.3333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }

.feed-playlist {
  width: 100%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  color: #333230;
  padding: 0 0rem; }
  .feed-playlist > span {
    margin: 0 1rem 0 0; }
  .feed-playlist > h5 {
    display: inline-block; }

.feed-playlist__ul {
  font-size: 14px;
  line-height: 26px;
  display: block;
  position: relative; }

/* ------------------------------------------------------------------------------
        playlist layouts
     ------------------------------------------------------------------------------ */
.list-loader {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 100%;
  background: #FFF;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center; }

.playlist {
  width: 100%; }
  .playlist a, .playlist .layout-box.grid a, .layout-box.grid .playlist a, .playlist #footer a, #footer .playlist a {
    max-height: 2.4rem;
    display: block;
    overflow: hidden; }

@media only screen and (max-width: 1024px) {
  .resolver {
    width: 28%; } }

.track-slider > .list-action > .nav_button.hatchet-error {
  display: none; }

@media only screen and (max-width: 480px) {
  .listNumber {
    display: none !important; } }

.drag-gripper {
  width: 1.2rem !important;
  -webkit-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  background: #fafafa;
  padding: 13px 0 0 3px !important;
  display: block !important; }

.list-container {
  background: #FFF;
  min-height: 20rem; }
  .list-container table {
    margin: 0;
    border: 0; }

.column-list-wrapper {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }
  .column-list-wrapper.with-content {
    background: #FFF; }

article.small-gutter {
  padding: 0.25rem; }

article.min-gutter {
  padding: 0.12rem; }

article.no-gutter {
  padding: 0; }

p {
  font-size: 0.9rem;
  color: #333230; }

/* ------------------------------------------------------------------------------
        chart blocks
     ------------------------------------------------------------------------------ */
.line-chart {
  width: 100% !important;
  height: auto !important;
  max-width: 800px; }

/* ------------------------------------------------------------------------------
        list charts
     ------------------------------------------------------------------------------ */
.chart-entry {
  border: solid 1px #e2e1e0;
  margin: 0 0 0.3rem 0;
  background: #FFF; }
  .chart-entry a, .chart-entry .layout-box.grid a, .layout-box.grid .chart-entry a, .chart-entry #footer a, #footer .chart-entry a {
    color: #333230; }
  .chart-entry .detailbox header {
    background: #b2afac;
    color: #333230;
    background: -webkit-linear-gradient(top, #cac8c6 0%, #cac8c6 4em, #b2afac 4em, #b2afac 100%);
    background: linear-gradient(to bottom, #cac8c6 0%, #cac8c6 4em, #b2afac 4em, #b2afac 100%); }
  .chart-entry .number {
    font-family: Numbers, courier, serif;
    font-weight: 300;
    background: #e2e1e0;
    color: #9a9692;
    text-align: right;
    min-width: 4rem;
    min-height: 4rem;
    font-size: 1.5rem; }
  .chart-entry .percentage {
    font-family: Numbers, courier, serif;
    font-weight: 300;
    width: 6rem;
    height: 5rem;
    border-radius: 50%;
    background: #cac8c6;
    color: #FFF;
    font-size: 1.6rem;
    text-align: center;
    padding: 1.4rem 0;
    margin: .5rem 0 0; }
  .chart-entry .image {
    width: 200px; }
  .chart-entry .artist-data .copy:after {
    content: '';
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF);
    height: 40px;
    position: absolute;
    width: 100%;
    left: 0; }
  .chart-entry .artist-data {
    width: -webkit-calc(100% - 200px - 15rem);
    width: calc(100% - 200px - 15rem); }
    .chart-entry .artist-data .copy {
      overflow: hidden;
      max-height: 180px;
      display: block;
      position: relative;
      font-size: 13px; }
      .chart-entry .artist-data .copy:after {
        top: 140px; }
  .chart-entry .chart-dropped.artist-data {
    width: -webkit-calc(100% - 200px - 5rem);
    width: calc(100% - 200px - 5rem); }
    .chart-entry .chart-dropped.artist-data > .copy {
      max-height: 140px; }
      .chart-entry .chart-dropped.artist-data > .copy:after {
        top: 100px; }
  .chart-entry dd {
    margin: 0 2rem 0 0;
    vertical-align: top; }
  .chart-entry .big-head {
    margin: .3rem 0 0; }

/* ------------------------------------------------------------------------------
        footer
     ------------------------------------------------------------------------------ */
body > .ember-view {
  min-height: 100vh;
  top: -70px; }

#rhapsodyIframe {
  position: absolute; }

#wrap, #main {
  position: static;
  overflow: hidden; }

#wrap {
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  min-height: 100vh; }

#main {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  padding: 108px 0 215px;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 1392px; }

@media screen and (max-width: 1392px) {
  #main {
    max-width: 100vw; } }

#footer {
  padding: 1rem 0;
  background-color: #fafafa;
  position: relative;
  margin-top: -185px;
  height: 185px;
  color: #1b1a19;
  z-index: 1;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: inset 0 2px 3px #b2afac;
  width: -webkit-calc(100% + 30px);
  width: calc(100% + 30px);
  margin-left: -20px;
  /*-webkit-transform: translateZ(-1px);
    transform: translateZ(-1px);*/ }
  #footer .flexgrid > div {
    padding: 0 2rem; }
    #footer .flexgrid > div > h5 {
      border-bottom: solid 1px #cac8c6; }
  #footer li {
    font-size: .9rem;
    padding: 4px 0; }
  #footer a {
    color: #686561; }

@media screen and (max-width: 800px) {
  #footer {
    margin-top: -326px;
    height: 326px;
    width: -webkit-calc(100% + 10px);
    width: calc(100% + 20px);
    margin-left: -10px; }
  #main {
    padding-bottom: 346px; } }

@media screen and (max-width: 640px) {
  #main {
    padding-bottom: 336px; } }

@media screen and (max-width: 480px) {
  #footer {
    margin-top: -585px;
    height: 585px; }
  #main {
    padding-bottom: 595px; } }

/* geography */
.geography-stats-map {
  height: 600px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto; }
  .geography-stats-map > svg {
    margin: -120px 0 0; }

.datamaps-legend {
  top: 220px;
  z-index: 0; }
  .datamaps-legend > h2 {
    font-size: 1.5rem; }
  .datamaps-legend dd {
    clear: right;
    border-radius: 0;
    width: 30px; }
  .datamaps-legend dt {
    font-family: Numbers, courier, serif !important;
    clear: both;
    width: 50px;
    text-align: right;
    color: #686561;
    margin: 0 1rem 0 0; }

.banner-pad-in-adj {
  padding-left: 20px !important; }

.banner-pad-in {
  padding-left: 40px !important; }

#home-banner {
  background: url(/img/banner_home.jpg);
  background-size: cover;
  width: 100%;
  height: 400px;
  border-top: 4px solid #276cb8; }

#home-top-line {
  position: absolute;
  top: 30px;
  color: #FFF; }

#home-subline {
  position: absolute;
  bottom: 0px; }

.banner-sources {
  padding: 10px 0 5px; }

@media only screen and (max-width: 640px) {
  .chart-result__wrapper {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden; }
    .chart-result__wrapper > .playlist-cell.song, .chart-result__wrapper > .playlist-cell.artist {
      width: 100%;
      min-height: 10px;
      max-height: 22px; }
    .chart-result__wrapper > .playlist-cell.song > .song__title {
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      overflow: hidden; }
    .chart-result__wrapper > .playlist-cell.artist {
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
      overflow: hidden; }
  .playlist-cell.resolver {
    width: 3rem; }
  .playlist-cell.trackAction {
    width: 2.5rem !important; } }

.isSaving {
  opacity: 0.5; }

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s; }

.pace-inactive {
  display: none; }

/*
    Color Definitions
    Color wheel
*/
/*
    Sizing Definitions
*/
/*
    Functions
*/
/*
    Mixins
*/
/*
    Font Include
*/
.number-font {
  font-family: Numbers, courier, serif;
  font-weight: 300; }

/* ------------------------------------------------------------------------------
    animations
  ------------------------------------------------------------------------------ */
#page-header {
  width: 100%;
  z-index: 5;
  border-bottom: solid 1px #e2e1e0;
  position: fixed;
  top: 0;
  left: 0; }

#logo__wrapper {
  font-weight: 500; }

#page-header > .topline {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  background: #3C85D6;
  width: 100%;
  height: 44px;
  line-height: 44px;
  position: relative;
  z-index: 4; }
  #page-header > .topline > div {
    width: auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; }
  #page-header > .topline a, .track-slider #page-header > .topline a, .layout-box.grid #page-header > .topline a, .social-title #page-header > .topline a, #footer #page-header > .topline a {
    color: #FFF; }
  #page-header > .topline .logo {
    height: 100%;
    width: 3rem;
    margin: -4px 1rem 0 0;
    background: #3C85D6; }

#bottomline_sticky {
  background: #FFF;
  width: 100%; }

/* ------------------------------------------------------------------------------
    player
   ------------------------------------------------------------------------------ */
#hatchet_volume_control {
  position: absolute;
  z-index: 4;
  left: 50%;
  width: 1.5rem;
  height: 0;
  top: 4.2rem;
  background: #FFF;
  transition: 0.2s ease-out;
  -webkit-transition: 0.2s ease-out; }
  #hatchet_volume_control .nav_button {
    z-index: 1;
    top: 0;
    position: absolute;
    max-width: inherit;
    margin: -.1rem 0.3rem 0 0.8rem !important; }
    #hatchet_volume_control .nav_button.volume {
      display: none; }
    #hatchet_volume_control .nav_button.mute {
      display: none; }
  #hatchet_volume_control.show {
    top: 4.2rem;
    height: 2.4rem;
    width: 100%;
    left: 0;
    padding: .3rem;
    border: solid 1px #e2e1e0; }
    #hatchet_volume_control.show .nav_button {
      display: block;
      margin: -0.1rem .5rem 0 0.2rem !important; }
      #hatchet_volume_control.show .nav_button.mute {
        display: block; }
      #hatchet_volume_control.show .nav_button.volume {
        display: block;
        right: 0; }

#hatchet_volume_bar {
  width: 100%;
  height: 100%;
  background: #e2e1e0;
  position: relative;
  z-index: 2;
  display: inline-block; }

#hatchet_volume_container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }

#hatchet_volume_control.show #hatchet_volume_container {
  padding: .2rem 3rem .2rem 3rem; }

#hatchet_player_controls {
  width: 248px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: center;
  position: relative;
  padding-left: 2rem;
  background: #FFF;
  height: 4rem; }
  #hatchet_player_controls > .small {
    position: absolute;
    left: 1rem;
    margin: .8rem 0 0 !important;
    z-index: 3; }

#hatchet_player_bar {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

#hatchet_queue_list {
  width: auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  padding: 6px; }
  #hatchet_queue_list > div {
    height: 52px; }
    #hatchet_queue_list > div > .queue-item {
      display: inline-block; }
      #hatchet_queue_list > div > .queue-item > aside {
        opacity: 0;
        position: absolute;
        top: -3px;
        right: -3px;
        background: #333230;
        -webkit-transition: 0.2s ease-out;
        transition: 0.2s ease-out;
        padding: 0 4px 0 0; }
      #hatchet_queue_list > div > .queue-item:hover > aside {
        opacity: 1; }
        #hatchet_queue_list > div > .queue-item:hover > aside:hover {
          background: #686561; }

#hatchet_player_data {
  width: 50%;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  overflow: hidden;
  border-left: solid 1px #e2e1e0;
  border-right: solid 1px #e2e1e0;
  padding: 0;
  height: 4em;
  background: #FFF; }

#hatchet_player_title {
  line-height: 0;
  width: auto;
  padding: 0.2rem 0.5rem 0;
  overflow: hidden;
  white-space: pre-line; }

#hatchet_player_slider {
  height: 12px;
  background: #FFF; }

#hatchet_player_progress,
#hatchet_player_duration {
  font-size: 0.8rem;
  text-align: center;
  min-width: 4rem;
  line-height: 1.8;
  padding: 0.2rem 0; }
  #hatchet_player_progress .nav_button,
  #hatchet_player_duration .nav_button {
    margin: -0.5rem 0 0 0; }

#hatchet_player_progress {
  float: left;
  color: #276cb8; }

#hatchet_player_duration {
  float: right;
  color: #b2afac;
  display: none; }

#hatchet_player_source {
  width: 52px;
  height: 2.9rem;
  float: right;
  display: none;
  padding: 0.2rem 0.4rem; }

#hatchet_player_queueinfo {
  text-align: left; }
  #hatchet_player_queueinfo .bubble {
    left: 30px;
    top: -2px; }

.playing #hatchet_player_source {
  display: block; }

.playing #hatchet_player_progress,
.playing #hatchet_player_duration {
  display: block; }

#hatchet_player_title .line1 {
  line-height: 1.6;
  font-size: 0.9rem;
  display: inline-block; }
  #hatchet_player_title .line1 a {
    color: #333230; }

#hatchet_player_title .line2 {
  font-size: .8rem;
  line-height: 1.2;
  display: inline-block; }
  #hatchet_player_title .line2 a {
    color: #827d79; }

#bottomline_sticky.playing #hatchet_player_scrubber {
  display: block; }

#hatchet_player_controls .nav_button {
  margin: 0.12rem -4px 0;
  vertical-align: middle; }

@media only screen and (max-width: 640px) {
  #hatchet_player_controls {
    height: 4rem;
    padding: 0 0 0 1rem; }
  #hatchet_volume_control {
    transition: 0.3s ease-out;
    -webkit-transition: 0.3s ease-out; }
    #hatchet_volume_control.show {
      border-top: none; } }

/*
    Color Definitions
    Color wheel
*/
/*
    Sizing Definitions
*/
/*
    Functions
*/
/*
    Mixins
*/
/*
    Font Include
*/
.number-font {
  font-family: Numbers, courier, serif;
  font-weight: 300; }

/* ------------------------------------------------------------------------------
    animations
  ------------------------------------------------------------------------------ */
contentarea {
  display: block;
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 640px) {
  contentarea {
    padding: 0; } }

.menunails.row {
  margin: 0; }
  .menunails.row .message-box {
    width: 100%;
    margin: .5rem 0 .5rem -50% !important; }
  .menunails.row img, .menunails.row .data {
    border: 1px solid #FFF;
    background-color: #e2e1e0; }
  .menunails.row .data {
    width: 100%; }
  .menunails.row img {
    width: 120px;
    height: 168px; }
  .menunails.row .data {
    padding: 0.5rem;
    font-size: 0.9;
    color: #827d79; }
  .menunails.row a, .menunails.row #footer a, #footer .menunails.row a {
    display: block;
    color: #4f4c49; }
  .menunails.row header {
    font-size: .8rem;
    background: #cac8c6;
    border-left: solid 1px #FFF;
    border-right: solid 1px #FFF;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0.35rem;
    margin: 0 !important;
    min-height: 0;
    max-height: 3rem;
    height: 3rem;
    line-height: 1.5;
    overflow: hidden; }

.menu-cover {
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 20px;
  left: 50px;
  border: solid 1px #FFF;
  width: 240px;
  height: 240px; }
  .menu-cover > img {
    position: absolute;
    top: 0;
    left: 0; }

#activity:before {
  background-position: 0 62.5%; }

#favorites:before {
  background-position: 62.5% 62.5%; }

#charts:before {
  background-position: 62.5% 75%; }

#u-playlists:before {
  background-position: 37.5% 62.5%; }

#wall:before {
  background-position: 50% 62.5%; }

.menu_uplevel:before {
  background-position: 0 75%; }

.menu_share {
  background: #276cb8 !important;
  border-color: #276cb8 !important; }
  .menu_share:before {
    background-position: 50% 25%; }

#vitals:before {
  background-position: 0 75%; }

#trends:before {
  background-position: 12.5% 75%; }

#f-playlist:before {
  background-position: 37.5% 62.5%; }

#tours:before {
  background-position: 37.5% 75%; }

#fans:before {
  background-position: 50% 62.5%; }

.top-header header {
  background: #FFF; }
  .top-header header h5, .top-header header a, .top-header header .layout-box.grid a, .layout-box.grid .top-header header a, .top-header header #footer a, #footer .top-header header a {
    color: #333230; }

.sub-menu {
  display: inline-block;
  margin: 0;
  top: 0;
  position: relative;
  vertical-align: middle;
  height: 52px;
  background: #686561;
  z-index: 3; }
  .sub-menu > nav {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition: width 0.2s ease-out;
    transition: width 0.2s ease-out;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    height: 52px;
    background: #669fdf; }
    .sub-menu > nav:before {
      content: '\00a0';
      height: 0;
      width: 0;
      z-index: 1;
      position: absolute;
      border: none;
      border-top: 26px solid transparent;
      border-bottom: 26px solid transparent;
      border-left: 12px solid #669fdf;
      right: -12px; }
    .sub-menu > nav:before {
      top: 0;
      -webkit-transition: 0.2s ease-out;
      transition: 0.2s ease-out; }
    .sub-menu > nav > a, .track-slider .sub-menu > nav > a, .layout-box.grid .sub-menu > nav > a, .social-title .sub-menu > nav > a, #footer .sub-menu > nav > a {
      width: 52px;
      -webkit-flex: 0 0 auto;
      flex: 0 0 auto;
      -webkit-transition: width 0.2s ease-out;
      transition: width 0.2s ease-out;
      margin: 0;
      position: relative;
      height: 52px;
      background: #3C85D6;
      overflow: hidden;
      font-weight: 500;
      border-left: solid 2px #3C85D6;
      box-sizing: border-box;
      margin: 0 -2px 0 0;
      color: #FFF;
      line-height: 1.5;
      display: block;
      vertical-align: middle;
      -mox-box-sizing: content-box;
      box-sizing: content-box; }
      .sub-menu > nav > a.active, .track-slider .sub-menu > nav > a.active, .layout-box.grid .sub-menu > nav > a.active, .social-title .sub-menu > nav > a.active, #footer .sub-menu > nav > a.active {
        margin: 0;
        background: #669fdf !important;
        font-weight: 400 !important;
        color: #FFF !important;
        -webkit-order: 1;
        order: 1; }
    .sub-menu > nav a, .track-slider .sub-menu > nav a, .sub-menu > nav .layout-box.grid a, .layout-box.grid .sub-menu > nav a, .social-title .sub-menu > nav a, .sub-menu > nav #footer a, #footer .sub-menu > nav a {
      display: block;
      font-size: 0.9rem !important;
      padding: 0;
      border: none; }

.sub-menu > nav > a:before, .track-slider .sub-menu > nav > a:before, .layout-box.grid .sub-menu > nav > a:before, .social-title .sub-menu > nav > a:before, #footer .sub-menu > nav > a:before,
.menu_uplevel:before,
.menu_share:before {
  content: '\00a0';
  background-image: url(/img/buttonsprite_color.svg);
  background-size: 450px;
  width: 46px;
  height: 46px;
  vertical-align: middle;
  margin: 3px 10px 3px 3px;
  padding: 0;
  display: inline-block; }

.sub-menu > nav > a.menu, .track-slider .sub-menu > nav > a.menu, .layout-box.grid .sub-menu > nav > a.menu, .social-title .sub-menu > nav > a.menu, #footer .sub-menu > nav > a.menu {
  padding: 7px 5px;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .sub-menu > nav > a.menu:before, .track-slider .sub-menu > nav > a.menu:before, .layout-box.grid .sub-menu > nav > a.menu:before, .social-title .sub-menu > nav > a.menu:before, #footer .sub-menu > nav > a.menu:before {
    content: none; }

.sub-menu > nav.menuclosed > a.menu ~ a:not(.active), .track-slider .sub-menu > nav.menuclosed > a.menu ~ a:not(.active), .layout-box.grid .sub-menu > nav.menuclosed > a.menu ~ a:not(.active), .social-title .sub-menu > nav.menuclosed > a.menu ~ a:not(.active), #footer .track-slider .sub-menu > nav.menuclosed > a.menu ~ a:not(.active), #footer .layout-box.grid .sub-menu > nav.menuclosed > a.menu ~ a:not(.active), #footer .social-title .sub-menu > nav.menuclosed > a.menu ~ a:not(.active), #footer .sub-menu > nav.menuclosed > a.menu ~ a:not(.active) {
  width: 0; }

.sub-menu.expanded > nav > a, .track-slider .sub-menu.expanded > nav > a, .layout-box.grid .sub-menu.expanded > nav > a, .social-title .sub-menu.expanded > nav > a, #footer .sub-menu.expanded > nav > a {
  width: 52px; }
  .sub-menu.expanded > nav > a.connected:hover, .track-slider .sub-menu.expanded > nav > a.connected:hover, .layout-box.grid .sub-menu.expanded > nav > a.connected:hover, .social-title .sub-menu.expanded > nav > a.connected:hover, #footer .sub-menu.expanded > nav > a.connected:hover, .sub-menu.expanded > nav > a.grow, .track-slider .sub-menu.expanded > nav > a.grow, .layout-box.grid .sub-menu.expanded > nav > a.grow, .social-title .sub-menu.expanded > nav > a.grow, #footer .sub-menu.expanded > nav > a.grow {
    width: 204px;
    background: #276cb8;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .sub-menu.expanded > nav > a.connected:hover, .track-slider .sub-menu.expanded > nav > a.connected:hover, .layout-box.grid .sub-menu.expanded > nav > a.connected:hover, .social-title .sub-menu.expanded > nav > a.connected:hover, #footer .sub-menu.expanded > nav > a.connected:hover {
    border-left-color: #276cb8; }

.sub-menu-1 {
  width: 52px; }
  .sub-menu-1 > nav {
    width: 52px; }
  .sub-menu-1.expanded > nav {
    width: 204px; }
  .sub-menu-1 + .menu__bar {
    width: calc( 100% - 52px);
    width: -webkit-calc( 100% - 52px);
    left: 1px; }

.original-sub-menu-1 > .menuopen:before {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px); }

.sub-menu-2 {
  width: 104px; }
  .sub-menu-2 > nav {
    width: 104px; }
  .sub-menu-2.expanded > nav {
    width: 256px; }
  .sub-menu-2 + .menu__bar {
    width: calc( 100% - 104px);
    width: -webkit-calc( 100% - 104px);
    left: 1px; }

.original-sub-menu-2 > .menuopen:before {
  -webkit-transform: translateX(0px);
  transform: translateX(0px); }

.sub-menu-4 {
  width: 208px; }
  .sub-menu-4 > nav {
    width: 208px; }
  .sub-menu-4.expanded > nav {
    width: 360px; }
  .sub-menu-4 + .menu__bar {
    width: calc( 100% - 208px);
    width: -webkit-calc( 100% - 208px);
    left: 1px; }

.original-sub-menu-4 > .menuopen:before {
  -webkit-transform: translateX(10px);
  transform: translateX(10px); }

.sub-menu-5 {
  width: 260px; }
  .sub-menu-5 > nav {
    width: 260px; }
  .sub-menu-5.expanded > nav {
    width: 412px; }
  .sub-menu-5 + .menu__bar {
    width: calc( 100% - 260px);
    width: -webkit-calc( 100% - 260px);
    left: 1px; }

.original-sub-menu-5 > .menuopen:before {
  -webkit-transform: translateX(15px);
  transform: translateX(15px); }

.sub-menu-6 {
  width: 312px; }
  .sub-menu-6 > nav {
    width: 312px; }
  .sub-menu-6.expanded > nav {
    width: 464px; }
  .sub-menu-6 + .menu__bar {
    width: calc( 100% - 312px);
    width: -webkit-calc( 100% - 312px);
    left: 1px; }

.original-sub-menu-6 > .menuopen:before {
  -webkit-transform: translateX(20px);
  transform: translateX(20px); }

.sub-menu.fixed, .menu__bar.fixed {
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  position: fixed;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0); }

.tab__bar > dl {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0; }

.tab__bar {
  background: #fafafa;
  position: relative;
  height: 52px;
  top: 0;
  overflow: hidden;
  vertical-align: middle;
  border-bottom: solid 1px #e2e1e0; }
  .tab__bar.fixed {
    position: fixed; }
  .tab__bar.full {
    width: 100%;
    margin: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  .tab__bar > dl > dd:not(.menu_uplevel) > a, .track-slider .tab__bar > dl > dd:not(.menu_uplevel) > a, .layout-box.grid .tab__bar > dl > dd:not(.menu_uplevel) > a, .social-title .tab__bar > dl > dd:not(.menu_uplevel) > a, #footer .tab__bar > dl > dd:not(.menu_uplevel) > a, .tab__bar > dl > dd:not(.menu_uplevel).subnav {
    line-height: 52px; }
  .tab__bar > dl > dd {
    height: 52px;
    margin: 0;
    position: relative;
    font-weight: 500; }
    .tab__bar > dl > dd > a:hover, .track-slider .tab__bar > dl > dd > a:hover, .layout-box.grid .tab__bar > dl > dd > a:hover, .social-title .tab__bar > dl > dd > a:hover, #footer .tab__bar > dl > dd > a:hover {
      background: #e2e1e0; }
    .tab__bar > dl > dd > a, .track-slider .tab__bar > dl > dd > a, .layout-box.grid .tab__bar > dl > dd > a, .social-title .tab__bar > dl > dd > a, #footer .tab__bar > dl > dd > a, .tab__bar > dl > dd.subnav {
      display: block;
      text-align: center;
      font-size: .9rem; }
      .tab__bar > dl > dd > a.active, .track-slider .tab__bar > dl > dd > a.active, .layout-box.grid .tab__bar > dl > dd > a.active, .social-title .tab__bar > dl > dd > a.active, #footer .tab__bar > dl > dd > a.active, .tab__bar > dl > dd > a.active:hover, .track-slider .tab__bar > dl > dd > a.active:hover, .layout-box.grid .tab__bar > dl > dd > a.active:hover, .social-title .tab__bar > dl > dd > a.active:hover, #footer .tab__bar > dl > dd > a.active:hover, .tab__bar > dl > dd.subnav.active, .tab__bar > dl > dd.subnav.active:hover {
        background: #FFF;
        color: #4f4c49;
        border-top: solid 4px #90bae8;
        line-height: 48px; }
    .tab__bar > dl > dd > a, .track-slider .tab__bar > dl > dd > a, .layout-box.grid .tab__bar > dl > dd > a, .social-title .tab__bar > dl > dd > a, #footer .tab__bar > dl > dd > a {
      color: #9a9692;
      padding: 0 2rem;
      white-space: nowrap;
      -moz-user-select: none;
      -webkit-user-drag: none;
      user-drag: none; }

.menu__bar {
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  background: #fafafa;
  width: 100%;
  border: none;
  margin: 0 -.5px 0 -5px;
  -webkit-transform: translateX(1px);
  transform: translateX(1px);
  z-index: 2; }

.sub__bar {
  width: 100%; }

dd.subnav {
  position: relative;
  padding: 0 2rem 0 1rem;
  color: #FFF;
  background: #669fdf; }
  dd.subnav:before {
    content: '\00a0';
    height: 0;
    width: 0;
    z-index: 1;
    position: absolute;
    border: none;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 12px solid #669fdf;
    right: -12px; }
  dd.subnav:before {
    top: 0; }

dd.subnav.single {
  padding: 0 2rem; }

.htc-sticky > .menu__wrapper > .social-title > .nowplaying > h5 {
  font-size: 16px;
  margin: 4px 0 10px; }

.htc-sticky + .fixed.persist {
  -webkit-transform: translate(0, 140px);
  transform: translate(0, 140px); }

@media only screen and (max-width: 640px) {
  .htc-sticky + .fixed.persist {
    -webkit-transform: translate(0, 132px);
    transform: translate(0, 132px); } }

.sub-menu-1 ~ .menu__bar.fixed {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translate(52px, 0);
  transform: translate(52px, 0); }

.sub-menu-1 ~ .menu__bar.fixed.persist {
  -webkit-transform: translate(52px, 140px);
  transform: translate(52px, 140px); }

.sub-menu-1 ~ .menu__bar.fixed {
  max-width: 1344px; }

/*.user-content>.sub-menu-1 ~ .menu__bar.fixed{
        max-width: 1356px - $menuwidth;
      }*/
.sub-menu-2 ~ .menu__bar.fixed {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translate(104px, 0);
  transform: translate(104px, 0); }

.sub-menu-2 ~ .menu__bar.fixed.persist {
  -webkit-transform: translate(104px, 140px);
  transform: translate(104px, 140px); }

.sub-menu-2 ~ .menu__bar.fixed {
  max-width: 1292px; }

/*.user-content>.sub-menu-2 ~ .menu__bar.fixed{
        max-width: 1356px - $menuwidth;
      }*/
.sub-menu-3 ~ .menu__bar.fixed {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translate(156px, 0);
  transform: translate(156px, 0); }

.sub-menu-3 ~ .menu__bar.fixed.persist {
  -webkit-transform: translate(156px, 140px);
  transform: translate(156px, 140px); }

.sub-menu-3 ~ .menu__bar.fixed {
  max-width: 1240px; }

/*.user-content>.sub-menu-3 ~ .menu__bar.fixed{
        max-width: 1356px - $menuwidth;
      }*/
.sub-menu-4 ~ .menu__bar.fixed {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translate(208px, 0);
  transform: translate(208px, 0); }

.sub-menu-4 ~ .menu__bar.fixed.persist {
  -webkit-transform: translate(208px, 140px);
  transform: translate(208px, 140px); }

.sub-menu-4 ~ .menu__bar.fixed {
  max-width: 1188px; }

/*.user-content>.sub-menu-4 ~ .menu__bar.fixed{
        max-width: 1356px - $menuwidth;
      }*/
.sub-menu-5 ~ .menu__bar.fixed {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translate(260px, 0);
  transform: translate(260px, 0); }

.sub-menu-5 ~ .menu__bar.fixed.persist {
  -webkit-transform: translate(260px, 140px);
  transform: translate(260px, 140px); }

.sub-menu-5 ~ .menu__bar.fixed {
  max-width: 1136px; }

/*.user-content>.sub-menu-5 ~ .menu__bar.fixed{
        max-width: 1356px - $menuwidth;
      }*/
.sub-menu-6 ~ .menu__bar.fixed {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translate(312px, 0);
  transform: translate(312px, 0); }

.sub-menu-6 ~ .menu__bar.fixed.persist {
  -webkit-transform: translate(312px, 140px);
  transform: translate(312px, 140px); }

.sub-menu-6 ~ .menu__bar.fixed {
  max-width: 1084px; }

/*.user-content>.sub-menu-6 ~ .menu__bar.fixed{
        max-width: 1356px - $menuwidth;
      }*/
.menu__bar.full.fixed {
  max-width: 1392px; }

@media only screen and (max-width: 1392px) {
  .sub-menu-1 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 68px);
    max-width: calc(100% - 68px); }
  /*
      .user-content>.sub-menu-1 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 68px);
        max-width: calc(100% - 68px);
      }*/
  .sub-menu-2 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 120px);
    max-width: calc(100% - 120px); }
  /*
      .user-content>.sub-menu-2 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 120px);
        max-width: calc(100% - 120px);
      }*/
  .sub-menu-3 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 172px);
    max-width: calc(100% - 172px); }
  /*
      .user-content>.sub-menu-3 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 172px);
        max-width: calc(100% - 172px);
      }*/
  .sub-menu-4 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 224px);
    max-width: calc(100% - 224px); }
  /*
      .user-content>.sub-menu-4 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 224px);
        max-width: calc(100% - 224px);
      }*/
  .sub-menu-5 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 276px);
    max-width: calc(100% - 276px); }
  /*
      .user-content>.sub-menu-5 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 276px);
        max-width: calc(100% - 276px);
      }*/
  .sub-menu-6 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 328px);
    max-width: calc(100% - 328px); }
  /*
      .user-content>.sub-menu-6 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 328px);
        max-width: calc(100% - 328px);
      }*/
  .menu__bar.full.fixed {
    max-width: -webkit-calc(100% - 20px);
    max-width: calc(100% - 20px); }
  .user-content > .menu__bar.full.fixed {
    max-width: -webkit-calc(100% - 20px);
    max-width: calc(100% - 20px); } }

@media only screen and (max-width: 800px) {
  .sub-menu-1 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 68px);
    max-width: calc(100% - 68px); }
  /*
      .user-content>.sub-menu-1 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 68px);
        max-width: calc(100% - 68px);
      }*/
  .sub-menu-2 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 120px);
    max-width: calc(100% - 120px); }
  /*
      .user-content>.sub-menu-2 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 120px);
        max-width: calc(100% - 120px);
      }*/
  .sub-menu-3 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 172px);
    max-width: calc(100% - 172px); }
  /*
      .user-content>.sub-menu-3 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 172px);
        max-width: calc(100% - 172px);
      }*/
  .sub-menu-4 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 224px);
    max-width: calc(100% - 224px); }
  /*
      .user-content>.sub-menu-4 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 224px);
        max-width: calc(100% - 224px);
      }*/
  .sub-menu-5 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 276px);
    max-width: calc(100% - 276px); }
  /*
      .user-content>.sub-menu-5 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 276px);
        max-width: calc(100% - 276px);
      }*/
  .sub-menu-6 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 328px);
    max-width: calc(100% - 328px); }
  /*
      .user-content>.sub-menu-6 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 328px);
        max-width: calc(100% - 328px);
      }*/
  .menu__bar.full.fixed {
    max-width: -webkit-calc(100% - 20px);
    max-width: calc(100% - 20px); }
  .user-content > .menu__bar.full.fixed {
    max-width: 100%; } }

@media only screen and (max-width: 640px) {
  .sub-menu-1 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 68px);
    max-width: calc(100% - 68px); }
  /*
      .user-content>.sub-menu-1 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 68px);
        max-width: calc(100% - 68px);
      }*/
  .sub-menu-2 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 120px);
    max-width: calc(100% - 120px); }
  /*
      .user-content>.sub-menu-2 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 120px);
        max-width: calc(100% - 120px);
      }*/
  .sub-menu-3 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 172px);
    max-width: calc(100% - 172px); }
  /*
      .user-content>.sub-menu-3 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 172px);
        max-width: calc(100% - 172px);
      }*/
  .sub-menu-4 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 224px);
    max-width: calc(100% - 224px); }
  /*
      .user-content>.sub-menu-4 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 224px);
        max-width: calc(100% - 224px);
      }*/
  .sub-menu-5 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 276px);
    max-width: calc(100% - 276px); }
  /*
      .user-content>.sub-menu-5 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 276px);
        max-width: calc(100% - 276px);
      }*/
  .sub-menu-6 ~ .menu__bar.fixed {
    max-width: -webkit-calc(100% - 328px);
    max-width: calc(100% - 328px); }
  /*
      .user-content>.sub-menu-6 ~ .menu__bar.fixed{
        max-width: -webkit-calc(100% - 328px);
        max-width: calc(100% - 328px);
      }*/
  .menu__bar.full.fixed,
  .user-content > .menu__bar.full.fixed {
    max-width: 100%; } }

@media only screen and (max-width: 640px) {
  .sub-menu-1 ~ .menu__bar.fixed {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transform: translate(52px, 0);
    transform: translate(52px, 0); }
  .sub-menu-1 ~ .menu__bar.fixed.persist {
    -webkit-transform: translate(52px, 132px);
    transform: translate(52px, 132px); }
  .sub-menu-2 ~ .menu__bar.fixed {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transform: translate(104px, 0);
    transform: translate(104px, 0); }
  .sub-menu-2 ~ .menu__bar.fixed.persist {
    -webkit-transform: translate(104px, 132px);
    transform: translate(104px, 132px); }
  .sub-menu-3 ~ .menu__bar.fixed {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transform: translate(156px, 0);
    transform: translate(156px, 0); }
  .sub-menu-3 ~ .menu__bar.fixed.persist {
    -webkit-transform: translate(156px, 132px);
    transform: translate(156px, 132px); }
  .sub-menu-4 ~ .menu__bar.fixed {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transform: translate(208px, 0);
    transform: translate(208px, 0); }
  .sub-menu-4 ~ .menu__bar.fixed.persist {
    -webkit-transform: translate(208px, 132px);
    transform: translate(208px, 132px); }
  .sub-menu-5 ~ .menu__bar.fixed {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transform: translate(260px, 0);
    transform: translate(260px, 0); }
  .sub-menu-5 ~ .menu__bar.fixed.persist {
    -webkit-transform: translate(260px, 132px);
    transform: translate(260px, 132px); }
  .sub-menu-6 ~ .menu__bar.fixed {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transform: translate(312px, 0);
    transform: translate(312px, 0); }
  .sub-menu-6 ~ .menu__bar.fixed.persist {
    -webkit-transform: translate(312px, 132px);
    transform: translate(312px, 132px); } }

dd.menu_uplevel {
  -webkit-transition: width 0.2s ease-out;
  transition: width 0.2s ease-out;
  width: 52px;
  overflow: hidden; }
  dd.menu_uplevel:hover {
    width: 256px;
    background: #276cb8; }
  dd.menu_uplevel > a, .track-slider dd.menu_uplevel > a, .layout-box.grid dd.menu_uplevel > a, .social-title dd.menu_uplevel > a, #footer dd.menu_uplevel > a, dd.menu_uplevel > a:hover, .track-slider dd.menu_uplevel > a:hover, .layout-box.grid dd.menu_uplevel > a:hover, .social-title dd.menu_uplevel > a:hover, #footer dd.menu_uplevel > a:hover {
    background: none !important;
    display: block;
    padding: 5px 0 0 64px !important;
    color: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    width: 240px; }
    dd.menu_uplevel > a > .line1, .track-slider dd.menu_uplevel > a > .line1, .layout-box.grid dd.menu_uplevel > a > .line1, .social-title dd.menu_uplevel > a > .line1, #footer dd.menu_uplevel > a > .line1, dd.menu_uplevel > a:hover > .line1, .track-slider dd.menu_uplevel > a:hover > .line1, .layout-box.grid dd.menu_uplevel > a:hover > .line1, .social-title dd.menu_uplevel > a:hover > .line1, #footer dd.menu_uplevel > a:hover > .line1 {
      padding: 2px 0; }
    dd.menu_uplevel > a > .line1, .track-slider dd.menu_uplevel > a > .line1, .layout-box.grid dd.menu_uplevel > a > .line1, .social-title dd.menu_uplevel > a > .line1, #footer dd.menu_uplevel > a > .line1, dd.menu_uplevel > a > .line2, .track-slider dd.menu_uplevel > a > .line2, .layout-box.grid dd.menu_uplevel > a > .line2, .social-title dd.menu_uplevel > a > .line2, #footer dd.menu_uplevel > a > .line2, dd.menu_uplevel > a:hover > .line1, .track-slider dd.menu_uplevel > a:hover > .line1, .layout-box.grid dd.menu_uplevel > a:hover > .line1, .social-title dd.menu_uplevel > a:hover > .line1, #footer dd.menu_uplevel > a:hover > .line1, dd.menu_uplevel > a:hover > .line2, .track-slider dd.menu_uplevel > a:hover > .line2, .layout-box.grid dd.menu_uplevel > a:hover > .line2, .social-title dd.menu_uplevel > a:hover > .line2, #footer dd.menu_uplevel > a:hover > .line2 {
      color: #FFF; }

dd.menu_uplevel {
  background: #3C85D6; }
  dd.menu_uplevel:before {
    background-position: 87.5% 50%; }

dd.menu_uplevel.level2:before {
  background-position: 87.5% 75%; }

/* ------------------------------------------------------------------------------
      tab menu
  ------------------------------------------------------------------------------ */
/*
  .tabs {
    a{
      @include transition(background .4s ease-out);
    }

    dd{
      position : relative;
      display : block;
      overflow: hidden;
      > a{
        color : $gray06;
        background : none;
        font-size : 0.95rem;
        font-family : inherit;
        display : block;
        padding: 0.75rem 2rem;
        border-right: 1px solid $gray09;
        font-weight: 300;

        &:hover{
          background : $gray08;
          color : $gray04;
        }
      }

      > a.active{
        background: $white;
        font-weight: 400;
        color: $gray02;
        &:before{
          content: '';
          position: absolute;
          bottom: 0;
          height: 4px;
          width: 100%;
          background: $gray05;
          left: 0;
        }

        &:hover{
          color : $gray03;
        }
      }
    }
  }*/
.minlist__content {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 0;
  height: 37px; }
  .minlist__content:hover {
    background: #fafafa; }
  .minlist__content.isPlaying {
    background: #e2e1e0; }
  .minlist__content > .list__button {
    width: 2rem;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .minlist__content > .playbutton {
    background: #b2afac;
    padding: 2px; }
  .minlist__content > .list__text {
    width: 50%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -ms-align-self: center;
    -webkit-align-self: center;
    align-self: center;
    padding: 0 10px;
    font-size: 13px; }
    .minlist__content > .list__text > a, .track-slider .minlist__content > .list__text > a, .layout-box.grid .minlist__content > .list__text > a, .social-title .minlist__content > .list__text > a, #footer .minlist__content > .list__text > a {
      color: #333230; }

.side-modal__list {
  overflow: hidden;
  height: 100%;
  width: -webkit-calc(100% - 3rem);
  width: calc(100% - 3rem);
  background: #FFF; }

.side-modal__page {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column; }
  .side-modal__page > .page-alert {
    margin: 10px 0 17px; }
    .side-modal__page > .page-alert:before {
      content: '\00a0';
      height: 0;
      width: 0;
      z-index: 1;
      position: absolute;
      border: none;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 8px solid #F27F10; }
    .side-modal__page > .page-alert:before {
      bottom: -6px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%); }
  .side-modal__page > h5, .side-modal__page > .page-title, .side-modal__page > .page-input {
    height: auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    border-bottom: 1px solid #e2e1e0; }
  .side-modal__page > h5, .side-modal__page > .page-title {
    padding: 12px;
    margin: 0;
    color: #9a9692; }
  .side-modal__page > .page-input {
    padding: 12px;
    margin: 0;
    color: #9a9692; }
    .side-modal__page > .page-input input {
      margin: 0; }
  .side-modal__page > header, .side-modal__page > div, .side-modal__page > aside, .side-modal__page > article {
    height: auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .side-modal__page > .scroller {
    height: 0;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden; }

.side-modal.wide {
  width: 600px; }

/* ------------------------------------------------------------------------------
      playlists
  ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------
      friends
  ------------------------------------------------------------------------------ */
#float-friends .number-font {
  display: block;
  width: 100%;
  text-align: center;
  color: #276cb8; }

#float-friends .friend-thumb {
  -webkit-transition: height 0.2s ease-out;
  transition: height 0.2s ease-out;
  width: 100%;
  height: 5.24rem;
  margin: 0;
  border-top: 1px solid #e2e1e0;
  background: #FFF; }
  #float-friends .friend-thumb img {
    height: 100%; }
  #float-friends .friend-thumb.new-item {
    height: 0; }
  #float-friends .friend-thumb.changed article {
    -webkit-animation: friend-changed 2s;
    animation: friend-changed 2s; }
  #float-friends .friend-thumb .head, #float-friends .friend-thumb .line1, #float-friends .friend-thumb .line2 {
    width: -webkit-calc(100% - 3rem);
    width: calc(100% - 3rem);
    text-overflow: ellipsis;
    white-space: nowrap; }
  #float-friends .friend-thumb .head {
    color: #4f4c49; }
  #float-friends .friend-thumb .line1 {
    color: #827d79;
    font-size: 0.85rem; }
  #float-friends .friend-thumb .line2 {
    color: #9a9692;
    font-size: 0.8rem; }
  #float-friends .friend-thumb .thumb {
    background: #b2afac;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 .5rem; }
  #float-friends .friend-thumb article {
    width: -webkit-calc(100% - 4.5rem);
    width: calc(100% - 4.5rem);
    min-height: 81px;
    display: inline-block;
    padding: 0.24rem 0.5rem 0.5rem;
    vertical-align: middle; }
    #float-friends .friend-thumb article .nav_button {
      float: right;
      z-index: 1;
      margin: 18px 0 0; }
  #float-friends .friend-thumb article:hover {
    background: #fafafa; }

@media only screen and (max-width: 480px) {
  #float-friends {
    width: 100%; } }

@-webkit-keyframes friend-changed {
  0% {
    background: #fafafa; }
  50% {
    background: #90bae8; }
  100% {
    background: #fafafa; } }

@keyframes friend-changed {
  0% {
    background: #fafafa; }
  50% {
    background: #90bae8; }
  100% {
    background: #fafafa; } }

.tabbed-button {
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  width: 3rem;
  height: 70px;
  position: absolute;
  color: #333230;
  background: #fafafa;
  border: solid 1px #e2e1e0;
  font-size: 1.4rem;
  line-height: 1.8; }
  .tabbed-button:hover {
    text-decoration: none; }

#friend-button {
  display: inline-block;
  height: 43px; }
  #friend-button.flash {
    -webkit-animation: button_flash 2s infinite;
    -webkit-animation-timing-function: linear;
    animation: button_flash 2s infinite;
    animation-timing-function: linear; }

@-webkit-keyframes button_flash {
  0% {
    background: #686561; }
  50% {
    background: #9a9692; }
  100% {
    background: #686561; } }

@keyframes button_flash {
  0% {
    background: #686561; }
  50% {
    background: #9a9692; }
  100% {
    background: #686561; } }

/* ------------------------------------------------------------------------------
      resolver float
  ------------------------------------------------------------------------------ */
.resolver-color {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 22px;
  left: 23px;
  border: solid 3px #e2e1e0; }

#float-resolver {
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 600px;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0); }

#resolver-button {
  -webkit-transform: translate(-3rem, 19rem);
  transform: translate(-3rem, 19rem);
  background: #3C85D6; }

/* ------------------------------------------------------------------------------
      profile menu
  ------------------------------------------------------------------------------ */
#profile-menu {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: auto !important;
  -webkit-flex: 0 1 auto !important;
  flex: 0 1 auto !important; }
  #profile-menu > a, .track-slider #profile-menu > a, .layout-box.grid #profile-menu > a, .social-title #profile-menu > a, #footer #profile-menu > a {
    margin: 0 1rem; }

.float-box {
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  background: #FFF;
  position: fixed;
  width: 300px;
  text-align: left;
  right: 10px;
  top: 60px;
  z-index: 11;
  border: solid 1px #827d79;
  left: -1000px;
  -webkit-transform: translate3d(-260px, 0px, 1px) !important;
  transform: translate3d(-260px, 0px, 1px) !important;
  display: none; }
  .float-box.in {
    -webkit-transform: translate3d(-260px, 44px, 1px) !important;
    transform: translate3d(-260px, 44px, 1px) !important;
    display: block; }
    .float-box.in > aside.pointer {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
  .float-box > aside.pointer {
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    width: 20px;
    height: 20px;
    background: #669fdf;
    position: absolute;
    right: 15px;
    -webkit-transform: translateY(5px) rotate(45deg);
    transform: translateY(5px) rotate(45deg);
    margin: -10px 0;
    border: solid 1px #827d79; }
  .float-box > article {
    background: #FFF; }
    .float-box > article > h5 {
      background: #669fdf;
      margin: 0;
      padding: 1rem;
      color: #FFF;
      font-size: 13px;
      font-weight: 600; }
      .float-box > article > h5 > a, .track-slider .float-box > article > h5 > a, .layout-box.grid .float-box > article > h5 > a, .social-title .float-box > article > h5 > a, #footer .float-box > article > h5 > a {
        color: #FFF !important; }
    .float-box > article > footer {
      background: #fafafa;
      border-top: #e2e1e0 solid 1px;
      margin: 0; }
      .float-box > article > footer > a, .track-slider .float-box > article > footer > a, .layout-box.grid .float-box > article > footer > a, .social-title .float-box > article > footer > a, #footer .float-box > article > footer > a {
        display: block;
        color: #333230 !important;
        padding: 1.2rem 1rem;
        cursor: pointer; }
        .float-box > article > footer > a:hover, .track-slider .float-box > article > footer > a:hover, .layout-box.grid .float-box > article > footer > a:hover, .social-title .float-box > article > footer > a:hover, #footer .float-box > article > footer > a:hover {
          background-color: #e2e1e0; }
    .float-box > article > ul > li {
      -webkit-transition: 0.2s ease-out;
      transition: 0.2s ease-out;
      display: block;
      padding: 0.5rem 1rem;
      font-size: 15px; }
      .float-box > article > ul > li:hover {
        background: #e2e1e0;
        padding: 0.5rem 1rem .5rem 1.5rem; }
      .float-box > article > ul > li > a, .track-slider .float-box > article > ul > li > a, .layout-box.grid .float-box > article > ul > li > a, .social-title .float-box > article > ul > li > a, #footer .float-box > article > ul > li > a {
        padding: 0.5rem 0;
        display: block;
        color: #4f4c49 !important; }

#friendCount {
  font-family: Numbers, courier, serif;
  font-weight: 300;
  color: #FFF;
  position: absolute;
  top: -5px;
  left: 38px; }

.distinct-row:hover .resolver-hover {
  background: #fafafa; }

.distinct-row.playing .resolver-hover {
  background: #e2e1e0; }

.resolver-wrapper:hover > .resolver-hover,
.resolver-hover.static {
  opacity: 1;
  -webkit-transform: translateX(3px);
  transform: translateX(3px); }

#hatchet_player_source .resolver-wrapper > .resolver-hover {
  -webkit-transform: translateX(-13px);
  transform: translateX(-13px); }

.skin-blue0 {
  background-color: #556597; }

.skin-green0 {
  background-color: #50ab64; }

.skin-blue1 {
  background-color: #825d77; }

.skin-green1 {
  background-color: #79ba4e; }

.skin-blue2 {
  background-color: #b05656; }

.skin-green2 {
  background-color: #a2c839; }

.skin-blue3 {
  background-color: #de4f35; }

.skin-green3 {
  background-color: #cbd623; }

.skin-blue4 {
  background-color: #276cb8; }

.skin-green4 {
  background-color: #279d79; }

.skin-blue5 {
  background-color: #556597; }

.skin-green5 {
  background-color: #50ab64; }

.skin-blue6 {
  background-color: #825d77; }

.skin-green6 {
  background-color: #79ba4e; }

.skin-blue7 {
  background-color: #b05656; }

.skin-green7 {
  background-color: #a2c839; }

/*
    Color Definitions
    Color wheel
*/
/*
    Sizing Definitions
*/
/*
    Functions
*/
/*
    Mixins
*/
/*
    Font Include
*/
.number-font {
  font-family: Numbers, courier, serif;
  font-weight: 300; }

/* ------------------------------------------------------------------------------
    animations
  ------------------------------------------------------------------------------ */
label {
  font-size: 14px;
  color: #1b1a19;
  cursor: pointer;
  display: block;
  line-height: 1.5;
  margin-bottom: 8px; }

input,
select,
textarea {
  color: #1b1a19; }

input,
textarea {
  border: solid 1px #9a9692;
  width: 100%;
  font-size: 14px;
  line-height: 18px;
  outline: none;
  padding: 6px;
  margin: 0 0 1rem;
  display: block;
  line-height: 1.3;
  box-sizing: border-box; }

input:focus {
  border-color: #276cb8;
  border-bottom-width: 2px; }

input.embedded {
  border: none;
  padding: 20px; }

.input-nolabel > label {
  width: 0;
  display: none; }

input[type="checkbox"] {
  width: auto;
  display: inline-block; }
  input[type="checkbox"]:focus {
    box-shadow: none; }
  input[type="checkbox"] + .error {
    border-top: solid 2px #DE4F35; }

input.long {
  width: 400px;
  margin: 0; }

.form-slim .alert-box,
.form-slim .help-block,
.form-slim small.error,
.form-slim span.error {
  width: 200px; }

.form-medium .alert-box,
.form-medium .help-block,
.form-medium small.error,
.form-medium span.error {
  width: 300px; }

.input-float {
  display: inline-block; }

.error input {
  margin: 0;
  border: solid 2px #DE4F35;
  border-bottom: inherit; }

.alert-box,
.help-block,
small.error,
span.error {
  display: block;
  position: relative;
  padding: 0;
  margin: 0 0 2rem 0;
  font-size: .75rem;
  -webkit-animation: form-error-animation .3s;
  animation: form-error-animation .3s; }

.alert-box,
.help-block,
small.error,
span.error {
  background-color: #DE4F35;
  padding: 0.5rem;
  color: #FFF; }

.alert-box.success {
  border: solid 2px #279D79;
  color: #279D79; }

@-webkit-keyframes form-error-animation {
  0% {
    margin-top: -18px; }
  90% {
    margin-top: 0; } }

@keyframes form-error-animation {
  0% {
    margin-top: -18px; }
  90% {
    margin-top: 0; } }

select {
  margin: 0;
  max-width: -webkit-calc(100% - 4rem);
  max-width: calc(100% - 4rem);
  background-color: #fafafa;
  height: 100%;
  border: none; }
  select:after {
    content: ' ';
    width: 2rem;
    background: #276cb8;
    height: 100%; }

.button__content {
  outline: none; }

/* ------------------------------------------------------------------------------
      buttons
  ------------------------------------------------------------------------------ */
main header nav {
  position: absolute;
  top: 4.1rem;
  width: 100%;
  text-align: center;
  margin: 0 -0.72rem; }

.nav_button {
  width: 58px;
  height: 58px;
  vertical-align: middle;
  padding: 0;
  margin: 0 -4px 0 0;
  display: inline-block;
  border: 0;
  position: relative; }
  .nav_button > .button__content {
    -webkit-transform: scale(0.58, 0.58);
    transform: scale(0.58, 0.58);
    bottom: -72.41379%;
    right: -72.41379%;
    overflow: hidden; }

.nav_button > .button__content {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0; }

.nav_button > .button__content:after {
  content: url(/img/buttonsprite_color.svg);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 900px;
  height: 900px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0; }
  .nav_button > .button__content:after > .button__content:after {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    clip: rect(0px, 100px, 100px, 0px);
    -moz-clip-path: inset(0px 800px 800px 0px);
    -webkit-clip-path: inset(0px 800px 800px 0px);
    clip-path: inset(0px 800px 800px 0px);
    overflow: hidden; }

.nav_button.mini {
  width: 17px !important;
  height: 17px !important; }
  .nav_button.mini > .button__content {
    -webkit-transform: scale(0.17, 0.17);
    transform: scale(0.17, 0.17);
    bottom: -488.23529%;
    right: -488.23529%;
    overflow: hidden; }

.nav_button.x-small {
  width: 27px !important;
  height: 27px !important; }
  .nav_button.x-small > .button__content {
    -webkit-transform: scale(0.27, 0.27);
    transform: scale(0.27, 0.27);
    bottom: -270.37037%;
    right: -270.37037%;
    overflow: hidden; }

.nav_button.small {
  width: 38px;
  height: 38px; }
  .nav_button.small > .button__content {
    -webkit-transform: scale(0.38, 0.38);
    transform: scale(0.38, 0.38);
    bottom: -163.15789%;
    right: -163.15789%;
    overflow: hidden; }

.nav_button.medium {
  width: 48px;
  height: 48px; }
  .nav_button.medium > .button__content {
    -webkit-transform: scale(0.48, 0.48);
    transform: scale(0.48, 0.48);
    bottom: -108.33333%;
    right: -108.33333%;
    overflow: hidden; }

.nav_button.big {
  width: 95px;
  height: 95px; }
  .nav_button.big > .button__content {
    -webkit-transform: scale(0.95, 0.95);
    transform: scale(0.95, 0.95);
    bottom: -5.26316%;
    right: -5.26316%;
    overflow: hidden; }

.nav_button.disabled {
  opacity: 0.4; }

.nav_button.encased {
  -webkit-transform: none;
  transform: none; }
  .nav_button.encased:before {
    content: '';
    border-radius: 50%;
    background: #F9F9F8;
    position: absolute;
    z-index: -1;
    left: 0;
    width: 4.1rem;
    height: 4.1rem;
    margin: -.25rem 0 0 -.25rem; }
  .nav_button.encased.dark:before {
    background: rgba(10, 10, 0, 0.1); }
  .nav_button.encased.play-dark:before {
    background: rgba(10, 10, 0, 0.05);
    border: solid 1px rgba(10, 10, 0, 0.1);
    border-radius: 0; }
  .nav_button.encased.small {
    margin: 0 6px !important;
    width: 32px;
    height: 32px; }
    .nav_button.encased.small > .button__content {
      -webkit-transform: scale(0.32, 0.32);
      transform: scale(0.32, 0.32);
      bottom: -212.5%;
      right: -212.5%;
      overflow: hidden; }
    .nav_button.encased.small:before {
      width: 2.5rem;
      height: 2.5rem;
      margin: -.25rem 0 0 -.25rem; }
  .nav_button.encased.x-small {
    margin: 0 .24rem !important;
    width: 28px;
    height: 28px; }
    .nav_button.encased.x-small > .button__content {
      -webkit-transform: scale(0.28, 0.28);
      transform: scale(0.28, 0.28);
      bottom: -257.14286%;
      right: -257.14286%;
      overflow: hidden; }
    .nav_button.encased.x-small:before {
      width: 2rem;
      height: 2rem;
      margin: -0.13rem 0 0 -0.13rem; }
  .nav_button.encased.clickable:hover:before {
    background-color: #FFF; }
  .nav_button.encased.clickable.dark:hover:before {
    background-color: rgba(10, 10, 15, 0.3); }
  .nav_button.encased.clickable.play-dark:hover:before {
    background-color: rgba(10, 10, 15, 0.3); }

.animate-click {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: #276cb8;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transform-origin: 50%;
  transform-origin: 50%; }

.nav_button > .button-click {
  -webkit-animation: button-fade 0.4s;
  animation: button-fade 0.4s; }

@-webkit-keyframes button-fade {
  0% {
    width: 20%;
    height: 20%;
    opacity: .9; }
  40% {
    width: 40%;
    height: 40%;
    opacity: .7; }
  90% {
    width: 110%;
    height: 110%;
    opacity: 0; } }

@keyframes button-fade {
  0% {
    width: 20%;
    height: 20%;
    opacity: .9; }
  40% {
    width: 40%;
    height: 40%;
    opacity: .7; }
  90% {
    width: 110%;
    height: 110%;
    opacity: 0; } }

.nav_button.mini > .button-click {
  -webkit-animation: button-fade-mini 0.4s;
  animation: button-fade-mini 0.4s; }

@-webkit-keyframes button-fade-mini {
  0% {
    width: 50%;
    height: 50%;
    opacity: .9; }
  40% {
    width: 110%;
    height: 110%;
    opacity: .7; }
  90% {
    width: 190%;
    height: 190%;
    opacity: 0; } }

@keyframes button-fade-mini {
  0% {
    width: 50%;
    height: 50%;
    opacity: .9; }
  40% {
    width: 110%;
    height: 110%;
    opacity: .7; }
  90% {
    width: 190%;
    height: 190%;
    opacity: 0; } }

.nav_button.small > .button-click {
  -webkit-animation: button-fade-small 0.4s;
  animation: button-fade-small 0.4s; }

@-webkit-keyframes button-fade-small {
  0% {
    width: 50%;
    height: 50%;
    opacity: .9; }
  40% {
    width: 110%;
    height: 110%;
    opacity: .7; }
  90% {
    width: 190%;
    height: 190%;
    opacity: 0; } }

@keyframes button-fade-small {
  0% {
    width: 50%;
    height: 50%;
    opacity: .9; }
  40% {
    width: 110%;
    height: 110%;
    opacity: .7; }
  90% {
    width: 190%;
    height: 190%;
    opacity: 0; } }

.nav_button.medium > .button-click {
  -webkit-animation: button-fade-medium 0.4s;
  animation: button-fade-medium 0.4s; }

@-webkit-keyframes button-fade-medium {
  0% {
    width: 40%;
    height: 40%;
    opacity: .9; }
  40% {
    width: 80%;
    height: 80%;
    opacity: .7; }
  90% {
    width: 120%;
    height: 120%;
    opacity: 0; } }

@keyframes button-fade-medium {
  0% {
    width: 40%;
    height: 40%;
    opacity: .9; }
  40% {
    width: 80%;
    height: 80%;
    opacity: .7; }
  90% {
    width: 120%;
    height: 120%;
    opacity: 0; } }

button .nav_button {
  width: 1.5rem;
  vertical-align: middle;
  padding: 0 0 1.5rem; }

.nav_button + .nav_button {
  margin: 0 -0.06rem; }

.nav_button.page {
  float: right;
  display: none; }

.nav_button.activity > .button__content:after {
  -webkit-transform: translate(0px, -500px);
  transform: translate(0px, -500px);
  clip: rect(500px, 100px, 600px, 0px);
  -moz-clip-path: inset(500px 800px 300px 0px);
  -webkit-clip-path: inset(500px 800px 300px 0px);
  clip-path: inset(500px 800px 300px 0px);
  overflow: hidden; }

.nav_button.add > .button__content:after {
  -webkit-transform: translate(-800px, -200px);
  transform: translate(-800px, -200px);
  clip: rect(200px, 900px, 300px, 800px);
  -moz-clip-path: inset(200px 0px 600px 800px);
  -webkit-clip-path: inset(200px 0px 600px 800px);
  clip-path: inset(200px 0px 600px 800px);
  overflow: hidden; }

.nav_button.album > .button__content:after {
  -webkit-transform: translate(-800px, -400px);
  transform: translate(-800px, -400px);
  clip: rect(400px, 900px, 500px, 800px);
  -moz-clip-path: inset(400px 0px 400px 800px);
  -webkit-clip-path: inset(400px 0px 400px 800px);
  clip-path: inset(400px 0px 400px 800px);
  overflow: hidden; }

.nav_button.blank > .button__content:after {
  -webkit-transform: translate(0px, 0px) !important;
  transform: translate(0px, 0px) !important;
  clip: rect(0px, 100px, 100px, 0px);
  -moz-clip-path: inset(0px 800px 800px 0px);
  -webkit-clip-path: inset(0px 800px 800px 0px);
  clip-path: inset(0px 800px 800px 0px);
  overflow: hidden; }

.nav_button.camera > .button__content:after {
  -webkit-transform: translate(-700px, -500px);
  transform: translate(-700px, -500px);
  clip: rect(500px, 800px, 600px, 700px);
  -moz-clip-path: inset(500px 100px 300px 700px);
  -webkit-clip-path: inset(500px 100px 300px 700px);
  clip-path: inset(500px 100px 300px 700px);
  overflow: hidden; }

.nav_button.clipboard > .button__content:after {
  -webkit-transform: translate(-800px, -500px);
  transform: translate(-800px, -500px);
  clip: rect(500px, 900px, 600px, 800px);
  -moz-clip-path: inset(500px 0px 300px 800px);
  -webkit-clip-path: inset(500px 0px 300px 800px);
  clip-path: inset(500px 0px 300px 800px);
  overflow: hidden; }

.nav_button.collection > .button__content:after {
  -webkit-transform: translate(-200px, -500px);
  transform: translate(-200px, -500px);
  clip: rect(500px, 300px, 600px, 200px);
  -moz-clip-path: inset(500px 600px 300px 200px);
  -webkit-clip-path: inset(500px 600px 300px 200px);
  clip-path: inset(500px 600px 300px 200px);
  overflow: hidden; }

.nav_button.comments > .button__content:after {
  -webkit-transform: translate(-400px, -500px);
  transform: translate(-400px, -500px);
  clip: rect(500px, 500px, 600px, 400px);
  -moz-clip-path: inset(500px 400px 300px 400px);
  -webkit-clip-path: inset(500px 400px 300px 400px);
  clip-path: inset(500px 400px 300px 400px);
  overflow: hidden; }

.nav_button.contract > .button__content:after {
  -webkit-transform: translate(-600px, -400px);
  transform: translate(-600px, -400px);
  clip: rect(400px, 700px, 500px, 600px);
  -moz-clip-path: inset(400px 200px 400px 600px);
  -webkit-clip-path: inset(400px 200px 400px 600px);
  clip-path: inset(400px 200px 400px 600px);
  overflow: hidden; }

.nav_button.delete > .button__content:after {
  -webkit-transform: translate(-700px, 0px);
  transform: translate(-700px, 0px);
  clip: rect(0px, 800px, 100px, 700px);
  -moz-clip-path: inset(0px 100px 800px 700px);
  -webkit-clip-path: inset(0px 100px 800px 700px);
  clip-path: inset(0px 100px 800px 700px);
  overflow: hidden; }

.nav_button.down > .button__content:after {
  -webkit-transform: translate(-500px, 0px);
  transform: translate(-500px, 0px);
  clip: rect(0px, 600px, 100px, 500px);
  -moz-clip-path: inset(0px 300px 800px 500px);
  -webkit-clip-path: inset(0px 300px 800px 500px);
  clip-path: inset(0px 300px 800px 500px);
  overflow: hidden; }

.nav_button.edit > .button__content:after {
  -webkit-transform: translate(-600px, -500px);
  transform: translate(-600px, -500px);
  clip: rect(500px, 700px, 600px, 600px);
  -moz-clip-path: inset(500px 200px 300px 600px);
  -webkit-clip-path: inset(500px 200px 300px 600px);
  clip-path: inset(500px 200px 300px 600px);
  overflow: hidden; }

.nav_button.expand > .button__content:after {
  -webkit-transform: translate(-700px, -400px);
  transform: translate(-700px, -400px);
  clip: rect(400px, 800px, 500px, 700px);
  -moz-clip-path: inset(400px 100px 400px 700px);
  -webkit-clip-path: inset(400px 100px 400px 700px);
  clip-path: inset(400px 100px 400px 700px);
  overflow: hidden; }

.nav_button.friends > .button__content:after {
  -webkit-transform: translate(-700px, -100px);
  transform: translate(-700px, -100px);
  clip: rect(100px, 800px, 200px, 700px);
  -moz-clip-path: inset(100px 100px 700px 700px);
  -webkit-clip-path: inset(100px 100px 700px 700px);
  clip-path: inset(100px 100px 700px 700px);
  overflow: hidden; }

.nav_button.forward > .button__content:after {
  -webkit-transform: translate(-200px, -300px);
  transform: translate(-200px, -300px);
  clip: rect(300px, 300px, 400px, 200px);
  -moz-clip-path: inset(300px 600px 500px 200px);
  -webkit-clip-path: inset(300px 600px 500px 200px);
  clip-path: inset(300px 600px 500px 200px);
  overflow: hidden; }

.nav_button.gripper > .button__content:after {
  -webkit-transform: translate(-500px, -300px);
  transform: translate(-500px, -300px);
  clip: rect(300px, 600px, 400px, 500px);
  -moz-clip-path: inset(300px 300px 500px 500px);
  -webkit-clip-path: inset(300px 300px 500px 500px);
  clip-path: inset(300px 300px 500px 500px);
  overflow: hidden; }

.nav_button.hatchet-error > .button__content:after {
  -webkit-transform: translate(-600px, -600px);
  transform: translate(-600px, -600px);
  clip: rect(600px, 700px, 700px, 600px);
  -moz-clip-path: inset(600px 200px 200px 600px);
  -webkit-clip-path: inset(600px 200px 200px 600px);
  clip-path: inset(600px 200px 200px 600px);
  overflow: hidden; }

.nav_button.jump > .button__content:after {
  -webkit-transform: translate(-400px, -700px);
  transform: translate(-400px, -700px);
  clip: rect(700px, 500px, 800px, 400px);
  -moz-clip-path: inset(700px 400px 100px 400px);
  -webkit-clip-path: inset(700px 400px 100px 400px);
  clip-path: inset(700px 400px 100px 400px);
  overflow: hidden; }

.nav_button.kingpin > .button__content:after {
  -webkit-transform: translate(-800px, -600px);
  transform: translate(-800px, -600px);
  clip: rect(600px, 900px, 700px, 800px);
  -moz-clip-path: inset(600px 0px 200px 800px);
  -webkit-clip-path: inset(600px 0px 200px 800px);
  clip-path: inset(600px 0px 200px 800px);
  overflow: hidden; }

.nav_button.listen > .button__content:after {
  -webkit-transform: translate(-500px, -200px);
  transform: translate(-500px, -200px);
  clip: rect(200px, 600px, 300px, 500px);
  -moz-clip-path: inset(200px 300px 600px 500px);
  -webkit-clip-path: inset(200px 300px 600px 500px);
  clip-path: inset(200px 300px 600px 500px);
  overflow: hidden; }

.nav_button.listeners > .button__content:after {
  -webkit-transform: translate(-500px, -100px);
  transform: translate(-500px, -100px);
  clip: rect(100px, 600px, 200px, 500px);
  -moz-clip-path: inset(100px 300px 700px 500px);
  -webkit-clip-path: inset(100px 300px 700px 500px);
  clip-path: inset(100px 300px 700px 500px);
  overflow: hidden; }

.nav_button.loved > .button__content:after {
  -webkit-transform: translate(-100px, -500px);
  transform: translate(-100px, -500px);
  clip: rect(500px, 200px, 600px, 100px);
  -moz-clip-path: inset(500px 700px 300px 100px);
  -webkit-clip-path: inset(500px 700px 300px 100px);
  clip-path: inset(500px 700px 300px 100px);
  overflow: hidden; }

.nav_button.menu > .button__content:after {
  -webkit-transform: translate(-100px, -200px);
  transform: translate(-100px, -200px);
  clip: rect(200px, 200px, 300px, 100px);
  -moz-clip-path: inset(200px 700px 600px 100px);
  -webkit-clip-path: inset(200px 700px 600px 100px);
  clip-path: inset(200px 700px 600px 100px);
  overflow: hidden; }

.nav_button.minus > .button__content:after {
  -webkit-transform: translate(-100px, -100px);
  transform: translate(-100px, -100px);
  clip: rect(100px, 200px, 200px, 100px);
  -moz-clip-path: inset(100px 700px 700px 100px);
  -webkit-clip-path: inset(100px 700px 700px 100px);
  clip-path: inset(100px 700px 700px 100px);
  overflow: hidden; }

.nav_button.mute > .button__content:after {
  -webkit-transform: translate(-300px, -800px);
  transform: translate(-300px, -800px);
  clip: rect(800px, 400px, 900px, 300px);
  -moz-clip-path: inset(800px 500px 0px 300px);
  -webkit-clip-path: inset(800px 500px 0px 300px);
  clip-path: inset(800px 500px 0px 300px);
  overflow: hidden; }

.nav_button.pause > .button__content:after {
  -webkit-transform: translate(-100px, -300px);
  transform: translate(-100px, -300px);
  clip: rect(300px, 200px, 400px, 100px);
  -moz-clip-path: inset(300px 700px 500px 100px);
  -webkit-clip-path: inset(300px 700px 500px 100px);
  clip-path: inset(300px 700px 500px 100px);
  overflow: hidden; }

.nav_button.pin > .button__content:after {
  -webkit-transform: translate(-600px, -200px);
  transform: translate(-600px, -200px);
  clip: rect(200px, 700px, 300px, 600px);
  -moz-clip-path: inset(200px 200px 600px 600px);
  -webkit-clip-path: inset(200px 200px 600px 600px);
  clip-path: inset(200px 200px 600px 600px);
  overflow: hidden; }

.nav_button.playlist-menu > .button__content:after {
  -webkit-transform: translate(-300px, -500px);
  transform: translate(-300px, -500px);
  clip: rect(500px, 400px, 600px, 300px);
  -moz-clip-path: inset(500px 500px 300px 300px);
  -webkit-clip-path: inset(500px 500px 300px 300px);
  clip-path: inset(500px 500px 300px 300px);
  overflow: hidden; }

.nav_button.playlist-add > .button__content:after {
  -webkit-transform: translate(-100px, -700px);
  transform: translate(-100px, -700px);
  clip: rect(700px, 200px, 800px, 100px);
  -moz-clip-path: inset(700px 700px 100px 100px);
  -webkit-clip-path: inset(700px 700px 100px 100px);
  clip-path: inset(700px 700px 100px 100px);
  overflow: hidden; }

.nav_button.plays > .button__content:after {
  -webkit-transform: translate(-400px, -100px);
  transform: translate(-400px, -100px);
  clip: rect(100px, 500px, 200px, 400px);
  -moz-clip-path: inset(100px 400px 700px 400px);
  -webkit-clip-path: inset(100px 400px 700px 400px);
  clip-path: inset(100px 400px 700px 400px);
  overflow: hidden; }

.nav_button.plus > .button__content:after {
  -webkit-transform: translate(-200px, -100px);
  transform: translate(-200px, -100px);
  clip: rect(100px, 300px, 200px, 200px);
  -moz-clip-path: inset(100px 600px 700px 200px);
  -webkit-clip-path: inset(100px 600px 700px 200px);
  clip-path: inset(100px 600px 700px 200px);
  overflow: hidden; }

.nav_button.resolver > .button__content:after {
  -webkit-transform: translate(-500px, -700px);
  transform: translate(-500px, -700px);
  clip: rect(700px, 600px, 800px, 500px);
  -moz-clip-path: inset(700px 300px 100px 500px);
  -webkit-clip-path: inset(700px 300px 100px 500px);
  clip-path: inset(700px 300px 100px 500px);
  overflow: hidden; }

.nav_button.queue > .button__content:after {
  -webkit-transform: translate(-100px, -800px);
  transform: translate(-100px, -800px);
  clip: rect(800px, 200px, 900px, 100px);
  -moz-clip-path: inset(800px 700px 0px 100px);
  -webkit-clip-path: inset(800px 700px 0px 100px);
  clip-path: inset(800px 700px 0px 100px);
  overflow: hidden; }

.nav_button.queue-add > .button__content:after {
  -webkit-transform: translate(0px, -800px);
  transform: translate(0px, -800px);
  clip: rect(800px, 100px, 900px, 0px);
  -moz-clip-path: inset(800px 800px 0px 0px);
  -webkit-clip-path: inset(800px 800px 0px 0px);
  clip-path: inset(800px 800px 0px 0px);
  overflow: hidden; }

.nav_button.rewind > .button__content:after {
  -webkit-transform: translate(-300px, -300px);
  transform: translate(-300px, -300px);
  clip: rect(300px, 400px, 400px, 300px);
  -moz-clip-path: inset(300px 500px 500px 300px);
  -webkit-clip-path: inset(300px 500px 500px 300px);
  clip-path: inset(300px 500px 500px 300px);
  overflow: hidden; }

.nav_button.search > .button__content:after {
  -webkit-transform: translate(-200px, -200px);
  transform: translate(-200px, -200px);
  clip: rect(200px, 300px, 300px, 200px);
  -moz-clip-path: inset(200px 600px 600px 200px);
  -webkit-clip-path: inset(200px 600px 600px 200px);
  clip-path: inset(200px 600px 600px 200px);
  overflow: hidden; }

.nav_button.share > .button__content:after {
  -webkit-transform: translate(-400px, -200px);
  transform: translate(-400px, -200px);
  clip: rect(200px, 500px, 300px, 400px);
  -moz-clip-path: inset(200px 400px 600px 400px);
  -webkit-clip-path: inset(200px 400px 600px 400px);
  clip-path: inset(200px 400px 600px 400px);
  overflow: hidden; }

.nav_button.star > .button__content:after {
  -webkit-transform: translate(-200px, -400px);
  transform: translate(-200px, -400px);
  clip: rect(400px, 300px, 500px, 200px);
  -moz-clip-path: inset(400px 600px 400px 200px);
  -webkit-clip-path: inset(400px 600px 400px 200px);
  clip-path: inset(400px 600px 400px 200px);
  overflow: hidden; }

.nav_button.star-full > .button__content:after {
  -webkit-transform: translate(-300px, -400px);
  transform: translate(-300px, -400px);
  clip: rect(400px, 400px, 500px, 300px);
  -moz-clip-path: inset(400px 500px 400px 300px);
  -webkit-clip-path: inset(400px 500px 400px 300px);
  clip-path: inset(400px 500px 400px 300px);
  overflow: hidden; }

.nav_button.stopped > .button__content:after {
  -webkit-transform: translate(-100px, 0px);
  transform: translate(-100px, 0px);
  clip: rect(0px, 200px, 100px, 100px);
  -moz-clip-path: inset(0px 700px 800px 100px);
  -webkit-clip-path: inset(0px 700px 800px 100px);
  clip-path: inset(0px 700px 800px 100px);
  overflow: hidden; }

.nav_button.time > .button__content:after {
  -webkit-transform: translate(-400px, -600px);
  transform: translate(-400px, -600px);
  clip: rect(600px, 500px, 700px, 400px);
  -moz-clip-path: inset(600px 400px 200px 400px);
  -webkit-clip-path: inset(600px 400px 200px 400px);
  clip-path: inset(600px 400px 200px 400px);
  overflow: hidden; }

.nav_button.track > .button__content:after {
  -webkit-transform: translate(-300px, 0px);
  transform: translate(-300px, 0px);
  clip: rect(0px, 400px, 100px, 300px);
  -moz-clip-path: inset(0px 500px 800px 300px);
  -webkit-clip-path: inset(0px 500px 800px 300px);
  clip-path: inset(0px 500px 800px 300px);
  overflow: hidden; }

.nav_button.unloved > .button__content:after {
  -webkit-transform: translate(-500px, -500px);
  transform: translate(-500px, -500px);
  clip: rect(500px, 600px, 600px, 500px);
  -moz-clip-path: inset(500px 300px 300px 500px);
  -webkit-clip-path: inset(500px 300px 300px 500px);
  clip-path: inset(500px 300px 300px 500px);
  overflow: hidden; }

.nav_button.up > .button__content:after {
  -webkit-transform: translate(-600px, 0px);
  transform: translate(-600px, 0px);
  clip: rect(0px, 700px, 100px, 600px);
  -moz-clip-path: inset(0px 200px 800px 600px);
  -webkit-clip-path: inset(0px 200px 800px 600px);
  clip-path: inset(0px 200px 800px 600px);
  overflow: hidden; }

.nav_button.user > .button__content:after {
  -webkit-transform: translate(-300px, -100px);
  transform: translate(-300px, -100px);
  clip: rect(100px, 400px, 200px, 300px);
  -moz-clip-path: inset(100px 500px 700px 300px);
  -webkit-clip-path: inset(100px 500px 700px 300px);
  clip-path: inset(100px 500px 700px 300px);
  overflow: hidden; }

.nav_button.view > .button__content:after {
  -webkit-transform: translate(-400px, -100px);
  transform: translate(-400px, -100px);
  clip: rect(100px, 500px, 200px, 400px);
  -moz-clip-path: inset(100px 400px 700px 400px);
  -webkit-clip-path: inset(100px 400px 700px 400px);
  clip-path: inset(100px 400px 700px 400px);
  overflow: hidden; }

.nav_button.volume1 > .button__content:after {
  -webkit-transform: translate(-400px, -800px);
  transform: translate(-400px, -800px);
  clip: rect(800px, 500px, 900px, 400px);
  -moz-clip-path: inset(800px 400px 0px 400px);
  -webkit-clip-path: inset(800px 400px 0px 400px);
  clip-path: inset(800px 400px 0px 400px);
  overflow: hidden; }

.nav_button.volume2 > .button__content:after {
  -webkit-transform: translate(-500px, -800px);
  transform: translate(-500px, -800px);
  clip: rect(800px, 600px, 900px, 500px);
  -moz-clip-path: inset(800px 300px 0px 500px);
  -webkit-clip-path: inset(800px 300px 0px 500px);
  clip-path: inset(800px 300px 0px 500px);
  overflow: hidden; }

.nav_button.volume3 > .button__content:after {
  -webkit-transform: translate(-600px, -800px);
  transform: translate(-600px, -800px);
  clip: rect(800px, 700px, 900px, 600px);
  -moz-clip-path: inset(800px 200px 0px 600px);
  -webkit-clip-path: inset(800px 200px 0px 600px);
  clip-path: inset(800px 200px 0px 600px);
  overflow: hidden; }

.nav_button.wayfinder > .button__content:after {
  -webkit-transform: translate(-200px, -700px);
  transform: translate(-200px, -700px);
  clip: rect(700px, 300px, 800px, 200px);
  -moz-clip-path: inset(700px 600px 100px 200px);
  -webkit-clip-path: inset(700px 600px 100px 200px);
  clip-path: inset(700px 600px 100px 200px);
  overflow: hidden; }

.nav_button.time {
  display: inline-block !important;
  margin: 0 -1px 0 -25px !important;
  position: relative !important;
  right: initial !important;
  top: 0 !important;
  left: 0; }

.ghost .nav_button.resolver {
  background-color: #fafafa; }

.nav_button.waiting {
  overflow: hidden; }
  .nav_button.waiting > .button__content:after {
    -webkit-transform: translate(-400px, -300px);
    transform: translate(-400px, -300px);
    clip: rect(300px, 500px, 400px, 400px);
    -moz-clip-path: inset(300px 400px 500px 400px);
    -webkit-clip-path: inset(300px 400px 500px 400px);
    clip-path: inset(300px 400px 500px 400px);
    overflow: hidden; }
  .nav_button.waiting > .button__content:after {
    -webkit-animation: infinite-waiting 2.5s infinite;
    animation: infinite-waiting 2.5s infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    overflow: visible; }

.nav_button.playing > .button__content:after {
  width: 100px;
  height: 100px; }

.nav_button.playing > .button__content:after {
  content: url(/img/play_sprite.svg);
  -webkit-animation: infinite-spinning 1.3333s infinite;
  animation: infinite-spinning 1.3333s infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-transform-origin: 51%;
  transform-origin: 51%; }
  .nav_button.playing > .button__content:after.medium {
    -webkit-transform-origin: 1.53rem;
    transform-origin: 1.53rem; }
  .nav_button.playing > .button__content:after.small {
    -webkit-transform-origin: 1.2rem;
    transform-origin: 1.2rem; }

.htc-sticky .artist-bar > .header__button > .nav_button {
  width: 28px;
  height: 28px;
  margin: -13px 0 0 3px; }
  .htc-sticky .artist-bar > .header__button > .nav_button > .button__content {
    -webkit-transform: scale(0.28, 0.28);
    transform: scale(0.28, 0.28);
    bottom: -257.14286%;
    right: -257.14286%;
    overflow: hidden; }

@keyframes infinite-waiting {
  from {
    transform: rotateZ(0deg) translate(-400px, -300px); }
  to {
    transform: rotateZ(360deg) translate(-400px, -300px); } }

@-webkit-keyframes infinite-waiting {
  from {
    -webkit-transform: rotateZ(0deg) translate(-400px, -300px); }
  to {
    -webkit-transform: rotateZ(360deg) translate(-400px, -300px); } }

@keyframes infinite-spinning {
  from {
    transform: rotateZ(0deg); }
  to {
    transform: rotateZ(360deg); } }

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotateZ(0deg); }
  to {
    -webkit-transform: rotateZ(360deg); } }

.inline-playbutton > .bubble {
  position: absolute;
  bottom: -4px;
  right: -15px;
  left: initial;
  top: initial;
  color: #FFF; }

.transition > .button__content {
  background: url(/img/play_animation_sprite.svg);
  width: 100px;
  height: 100px;
  overflow: hidden; }
  .transition > .button__content:after {
    content: ''; }

/* ------------------------------------------------------------------------------
      transition animations
  ------------------------------------------------------------------------------ */
.nav_button.pause-play > .button__content {
  -webkit-animation: pause-play 0.15s steps(19) 1 forwards;
  animation: pause-play 0.15s steps(19) 1 forwards; }

.nav_button.play-pause > .button__content {
  -webkit-animation: pause-play 0.15s steps(19) 1 forwards reverse;
  animation: pause-play 0.15s steps(19) 1 forwards reverse; }

.nav_button.stopped-playing > .button__content {
  -webkit-animation: stopped-playing 0.2s steps(19) 1 forwards;
  animation: stopped-playing 0.2s steps(19) 1 forwards; }

.nav_button.playing-stopped > .button__content {
  -webkit-animation: stopped-playing 0.2s steps(19) 1 forwards reverse;
  animation: stopped-playing 0.2s steps(19) 1 forwards reverse; }

@-webkit-keyframes pause-play {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1900px 0; } }

@keyframes pause-play {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1900px 0; } }

@-webkit-keyframes stopped-playing {
  0% {
    background-position: 0 100px; }
  100% {
    background-position: -1900px 100px; } }

@keyframes stopped-playing {
  0% {
    background-position: 0 100px; }
  100% {
    background-position: -1900px 100px; } }

/* ------------------------------------------------------------------------------
      top menu
  ------------------------------------------------------------------------------ */
.h-menu-entry {
  width: auto !important;
  -webkit-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  padding: 0 .25rem;
  text-align: center; }
  .h-menu-entry > .nav_button {
    margin: 2px 0 0 0; }
  .h-menu-entry > span {
    display: block;
    margin: -2px 1rem 0 2rem; }

@media only screen and (max-width: 480px) {
  #hatchet_player_controls {
    padding: 0;
    text-align: left !important;
    height: 3.4rem;
    width: 120px; }
  .nav_button.volume {
    display: none; }
  #hatchet_player_controls .nav_button {
    width: 3rem;
    padding-bottom: 3rem; } }

button, .button {
  -webkit-transition: background-color 0.1s ease-out;
  transition: background-color 0.1s ease-out;
  font-size: 13px;
  position: relative;
  background: transparent;
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 2px;
  background-color: #3C85D6;
  padding: 0.75rem 2rem !important;
  color: #FFF;
  min-width: 70px;
  cursor: pointer;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.2);
  width: auto;
  border: none; }

button:hover:not([disabled]), .button:hover:not([disabled]) {
  background-color: #669fdf; }

button.small, .button.small {
  font-size: 11px; }

button.disabled, button[disabled],
.button.disabled, .button[disabled] {
  background-color: #b2afac;
  color: #FFF; }

button.smoked, .button.smoked {
  border: solid 1px #FFF;
  border-color: #FFF;
  color: #FFF;
  background-color: rgba(10, 10, 15, 0.3);
  margin: 0;
  border-bottom-width: 1px; }

button.smoked:hover, .button.smoked:hover {
  background-color: #FFF;
  color: #333230; }

.list__play-button {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background: #FFF;
  height: 100%; }
  .list__play-button.resolved {
    background: #827d79; }
  .list__play-button > .nav_button {
    margin: 0 0 0 -2px; }

/*
    Color Definitions
    Color wheel
*/
/*
    Sizing Definitions
*/
/*
    Functions
*/
/*
    Mixins
*/
/*
    Font Include
*/
.number-font {
  font-family: Numbers, courier, serif;
  font-weight: 300; }

/* ------------------------------------------------------------------------------
    animations
  ------------------------------------------------------------------------------ */
/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid #FFF;
  background-color: #276cb8;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */
.progress-radial > .overlay {
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  position: absolute;
  width: 54px;
  height: 54px;
  background-color: #FFF;
  border-radius: 50%;
  margin: 4px 0 0 4px;
  text-align: center;
  line-height: 60px;
  font-size: 16px; }

.progress-radial-0 {
  transform: rotateX(90deg); }

.progress-radial > .overlay > .pulse {
  width: 40px;
  height: 40px;
  margin: 7px 0 0 7px;
  overflow: hidden; }
  .progress-radial > .overlay > .pulse > img {
    top: 0;
    left: 0;
    margin: 0;
    position: absolute;
    display: block;
    width: 1280px;
    height: 40px;
    max-width: initial;
    -webkit-animation: load-spinner 1.8s steps(32) infinite forwards;
    animation: load-spinner 1.8s steps(32) infinite forwards; }

@-webkit-keyframes load-spinner {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateX(-1280px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-1280px, 0, 0);
    transform: translateX(-1280px, 0, 0); } }

@keyframes load-spinner {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateX(-1280px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-1280px, 0, 0);
    transform: translateX(-1280px, 0, 0); } }

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */
.progress-0 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(90deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-5 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(108deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-10 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(126deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-15 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(144deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-20 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(162deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-25 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(180deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-30 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(198deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-35 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(216deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-40 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(234deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-45 {
  background-image: linear-gradient(90deg, #cac8c6 50%, transparent 50%, transparent), linear-gradient(252deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-50 {
  background-image: linear-gradient(-90deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-55 {
  background-image: linear-gradient(-72deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-60 {
  background-image: linear-gradient(-54deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-65 {
  background-image: linear-gradient(-36deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-70 {
  background-image: linear-gradient(-18deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-75 {
  background-image: linear-gradient(0deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-80 {
  background-image: linear-gradient(18deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-85 {
  background-image: linear-gradient(36deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-90 {
  background-image: linear-gradient(54deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-95 {
  background-image: linear-gradient(72deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

.progress-100 {
  background-image: linear-gradient(90deg, #276cb8 50%, transparent 50%, transparent), linear-gradient(270deg, #276cb8 50%, #cac8c6 50%, #cac8c6); }

/* ------------------------------------------------------------------------------
        loader
     ------------------------------------------------------------------------------ */
#loader {
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 0;
  width: 0;
  padding: 5px;
  overflow: hidden;
  z-index: 10000;
  left: 50%;
  top: 50%;
  opacity: 0;
  pointer-events: none;
  display: none; }

#loader.show {
  height: 100%;
  width: 100%;
  opacity: 1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  display: block; }

/* ------------------------------------------------------------------------------
     pan widget
   ------------------------------------------------------------------------------ */
.disc {
  border-radius: 50%;
  perspective: 1000px;
  position: absolute;
  left: 20px;
  top: 60px;
  background: rgba(0, 0, 0, 0.05); }

.disc__panel {
  -webkit-transition: -webkit-transform 0.1s ease-out;
  transition: transform 0.1s ease-out;
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  background: #FFF;
  width: 70px;
  height: 70px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; }
  .disc__panel.plus {
    transform: rotateY(20deg);
    background: linear-gradient(to left, #fafafa 0%, #FFF 60%);
    border-left: solid 2px #e2e1e0; }
  .disc__panel.minus {
    transform: rotateY(-20deg);
    background: linear-gradient(to right, #fafafa 0%, #FFF 60%);
    border-right: solid 2px #e2e1e0; }
  .disc__panel.up {
    transform: rotateX(20deg);
    background: linear-gradient(to bottom, #fafafa 0%, #FFF 60%);
    border-bottom: solid 2px #e2e1e0; }
  .disc__panel.down {
    transform: rotateX(-20deg);
    background: linear-gradient(to top, #fafafa 0%, #FFF 60%);
    border-top: solid 2px #e2e1e0; }
  .disc__panel > .nav_button {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0; }
    .disc__panel > .nav_button.plus {
      right: -12px;
      top: 50%; }
    .disc__panel > .nav_button.minus {
      left: 15px;
      top: 50%; }
    .disc__panel > .nav_button.down {
      left: 50%;
      bottom: -12px; }
    .disc__panel > .nav_button.up {
      left: 50%;
      top: 15px; }

.image-loader {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  width: 0;
  height: 0;
  overflow: hidden;
  display: none; }
  .image-loader.show {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%; }

/* -------------------------------------
 * Notification List
 * ------------------------------------- */
#notification-list {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 3; }

.notification-list__element {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  width: 300px;
  min-height: 80px;
  background: rgba(10, 10, 15, 0.8);
  border: solid 1px #FFF;
  color: #FFF;
  padding: 10px;
  margin: 10px 0;
  font-size: 13px;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1; }
  .notification-list__element.in {
    -webkit-animation: notification-in 0.25s;
    animation: notification-in 0.25s; }
  .notification-list__element.out {
    -webkit-animation: notification-out 0.3s;
    animation: notification-out 0.3s; }

@-webkit-keyframes notification-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) translateX(-50px);
    transform: translateX(-100%) translateX(-50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes notification-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) translateX(-50px);
    transform: translateX(-100%) translateX(-50px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@-webkit-keyframes notification-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    opacity: .2; }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-100%) translateX(-50px);
    transform: translateX(-100%) translateX(-50px); } }

@keyframes notification-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    opacity: .2; }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-100%) translateX(-50px);
    transform: translateX(-100%) translateX(-50px); } }

/* panel-box */
.panel-box {
  width: 100%;
  height: 0;
  background: #827d79;
  padding: 0 0 84.6% 0 !important; }
  .panel-box.square {
    padding: 0 0 100% 0 !important; }
  .panel-box.thin {
    padding: 0 0 42% 0 !important; }
  .panel-box.long {
    padding: 0 0 140% 0 !important; }
  .panel-box > aside {
    position: absolute;
    width: 100%;
    height: 33.3333%;
    left: 0;
    top: 66.6666%; }
    .panel-box > aside .line1, .panel-box > aside .line2, .panel-box > aside .line3 {
      padding: 0;
      color: #FFF; }
    .panel-box > aside a, .track-slider .panel-box > aside a, .panel-box > aside .layout-box.grid a, .layout-box.grid .panel-box > aside a, .social-title .panel-box > aside a, .panel-box > aside #footer a, #footer .panel-box > aside a {
      display: block;
      margin: 5px 0; }
  .panel-box.extralong {
    padding: 0 0 277% 0 !important; }
    .panel-box.extralong > aside {
      height: 16.6667%;
      left: 0;
      top: 83.3333%; }
  .panel-box .playbutton__container {
    left: 0px;
    bottom: 33.3333%;
    height: 52px;
    width: 52px;
    overflow: hidden;
    position: absolute; }
    .panel-box .playbutton__container > .playbutton {
      -webkit-transition: 0.2s ease-out;
      transition: 0.2s ease-out;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      height: 52px;
      opacity: 0; }
  .panel-box:hover .playbutton__container > .playbutton {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
    opacity: 1; }

.panel-box__info {
  padding: 1rem;
  color: #FFF; }
  .panel-box__info > div {
    position: absolute;
    top: 0; }
    .panel-box__info > div > h4, .panel-box__info > div h5 {
      margin: 0;
      color: #FFF; }

/* multicolumn sliders */
.drawer {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  height: 100%; }
  .drawer.aligntop {
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start; }
  .drawer > section {
    width: 100%; }
  .drawer.speed1 {
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out; }
  .drawer.speed2 {
    -webkit-transition: -webkit-transform 0.6s ease-out;
    transition: transform 0.6s ease-out; }
  .drawer.speed3 {
    -webkit-transition: -webkit-transform 0.8s ease-out;
    transition: transform 0.8s ease-out; }

.drawer.faded-slide > section {
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  -webkit-transform: translateX(15%) translateZ(0);
  transform: translateX(15%) translateZ(0);
  opacity: 0; }

.drawer.faded-slide.page1 > section:nth-child(1) {
  opacity: 1;
  z-index: 1;
  -webkit-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0); }
  .drawer.faded-slide.page1 > section:nth-child(1) ~ section {
    -webkit-transform: translateX(-15%) translateZ(0);
    transform: translateX(-15%) translateZ(0); }

.drawer.faded-slide.page2 > section:nth-child(2) {
  opacity: 1;
  z-index: 1;
  -webkit-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0); }
  .drawer.faded-slide.page2 > section:nth-child(2) ~ section {
    -webkit-transform: translateX(-15%) translateZ(0);
    transform: translateX(-15%) translateZ(0); }

.drawer.faded-slide.page3 > section:nth-child(3) {
  opacity: 1;
  z-index: 1;
  -webkit-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0); }
  .drawer.faded-slide.page3 > section:nth-child(3) ~ section {
    -webkit-transform: translateX(-15%) translateZ(0);
    transform: translateX(-15%) translateZ(0); }

.drawer.faded-slide.page4 > section:nth-child(4) {
  opacity: 1;
  z-index: 1;
  -webkit-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0); }
  .drawer.faded-slide.page4 > section:nth-child(4) ~ section {
    -webkit-transform: translateX(-15%) translateZ(0);
    transform: translateX(-15%) translateZ(0); }

.drawer.column2 {
  width: 200%; }
  .drawer.column2.page1 {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  .drawer.column2.page2 {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  .drawer.column2 > section {
    width: 50%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }

.drawer.column3 {
  width: 300%; }
  .drawer.column3.page1 {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  .drawer.column3.page2 {
    -webkit-transform: translateX(-33.33333%);
    transform: translateX(-33.33333%); }
  .drawer.column3.page3 {
    -webkit-transform: translateX(-66.66667%);
    transform: translateX(-66.66667%); }
  .drawer.column3 > section {
    width: 33.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }

.drawer.column4 {
  width: 400%; }
  .drawer.column4.page1 {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  .drawer.column4.page2 {
    -webkit-transform: translateX(-25%);
    transform: translateX(-25%); }
  .drawer.column4.page3 {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  .drawer.column4.page4 {
    -webkit-transform: translateX(-75%);
    transform: translateX(-75%); }
  .drawer.column4 > section {
    width: 25%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }

.drawer__pager {
  position: absolute;
  top: -80px;
  right: 0; }
  .drawer__pager > .big-head, .drawer__pager > .line2 {
    font-family: Numbers, courier, serif;
    font-weight: 300;
    vertical-align: middle;
    display: inline; }

#dashboard {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  background: #FFF; }

.dashboard__recommendations {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 280px;
  background: #1b1a19;
  overflow: auto;
  padding: 10px; }

.recommend__asset {
  width: 170px;
  margin: 0 5px; }

.list {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }
  .list > .feed-list, .list.feed-list {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 66.66667%;
    -webkit-flex: 5 0 auto;
    flex: 5 0 auto;
    background: #FFF;
    padding: 4px; }

.dashboard__detail {
  width: 10%;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  background: #F80;
  padding: 10px; }

.sticky-date {
  position: fixed;
  background: #FFF;
  top: 108px;
  padding: 0 20px;
  z-index: 1;
  -webkit-transform: translate(-4px, -100%);
  transform: translate(-4px, -100%); }
  .sticky-date.affix {
    -webkit-transform: translateX(-4px);
    transform: translateX(-4px); }
    .sticky-date.affix > h6 {
      margin: 0.5rem 0; }

#userfeed > .sticky-date {
  top: 140px; }

.sticky-date > h6 {
  margin: 0; }

.feed-date {
  height: 50px;
  flex: 0 0 auto;
  padding: 10px; }

.social-action__user {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

.social-action__content {
  height: 47px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 63px 0 0;
  padding: 0 10px 0 0; }
  .social-action__content .line1, .social-action__content .line2 {
    line-height: 1.2; }
    .social-action__content .line1 > a, .social-action__content .track-slider .line1 > a, .social-action__content .layout-box.grid .line1 > a, .social-action__content .social-title .line1 > a, .social-action__content #footer .line1 > a, #footer .social-action__content .line1 > a, .social-action__content .line2 > a, .social-action__content .track-slider .line2 > a, .social-action__content .layout-box.grid .line2 > a, .social-action__content .social-title .line2 > a, .social-action__content #footer .line2 > a, #footer .social-action__content .line2 > a {
      color: #FFF; }

.social-action__box {
  width: 20%;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  background: #FFF;
  height: 350px;
  margin: 5px;
  overflow: hidden; }
  .social-action__box > div {
    display: block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%; }
  .social-action__box.filler {
    background: transparent;
    height: 0;
    margin: 0 5px; }

@media only screen and (max-width: 1200px) {
  .social-action__box {
    width: 30%;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; } }

.social-action__box.loved-track {
  background: #DE4F35; }
  .social-action__box.loved-track .social-action__cover {
    background: #e57561; }
    .social-action__box.loved-track .social-action__cover .line1 {
      color: #1b1a19; }
    .social-action__box.loved-track .social-action__cover .line2 {
      line-height: 1.2;
      color: #333230; }

.social-action__box.loved-artist {
  background: #A654BA; }
  .social-action__box.loved-artist .social-action__cover {
    background: #b978c9; }
    .social-action__box.loved-artist .social-action__cover .line1 {
      color: #1b1a19; }
    .social-action__box.loved-artist .social-action__cover .line2 {
      line-height: 1.2;
      color: #333230; }

.social-action__box.loved-album {
  background: #279D79; }
  .social-action__box.loved-album .social-action__cover {
    background: #31c698; }
    .social-action__box.loved-album .social-action__cover .line1 {
      color: #1b1a19; }
    .social-action__box.loved-album .social-action__cover .line2 {
      line-height: 1.2;
      color: #333230; }

.social-action__box.follow-user {
  background: #CBD623; }
  .social-action__box.follow-user .social-action__cover {
    background: #d8e14b; }
    .social-action__box.follow-user .social-action__cover .line1 {
      color: #1b1a19; }
    .social-action__box.follow-user .social-action__cover .line2 {
      line-height: 1.2;
      color: #333230; }

.social-action__box.create-playlist {
  background: #FCC108; }
  .social-action__box.create-playlist .social-action__cover {
    background: #fdce3a; }
    .social-action__box.create-playlist .social-action__cover .line1 {
      color: #1b1a19; }
    .social-action__box.create-playlist .social-action__cover .line2 {
      line-height: 1.2;
      color: #333230; }

.social-action__img-c {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 200px; }

.social-action__cover {
  top: 0;
  right: 0;
  padding: 5px 10px;
  color: #FFF;
  width: 100%;
  height: 40px; }
  .social-action__cover > img {
    height: 55px;
    width: 55px;
    margin: 0 0 2px; }

.social-action__image {
  max-width: initial;
  min-width: 100%;
  max-height: 100%; }

.blurred .social-action__image {
  filter: blur(10px); }

.flexgrid {
  width: 100%; }
  .flexgrid > li, .flexgrid > div {
    display: block;
    width: 100%;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    padding: 5px;
    box-sizing: -moz-border-box;
    box-sizing: border-box;
    margin: 0; }
  .flexgrid > div.padded {
    margin: 2rem 1rem; }
  .flexgrid > .fitted {
    width: auto; }
  .flexgrid > .fitted-flexible {
    width: 1px;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; }
  .flexgrid > .min-gutter, .flexgrid.min-gutter {
    padding: 2px; }
  .flexgrid > .gutter, .flexgrid.gutter {
    padding: 4px; }

.flexgrid, .flexgrid > .flexgrid {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative; }
  .flexgrid.centered, .flexgrid > .flexgrid.centered {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; }
  .flexgrid.baseline, .flexgrid > .flexgrid.baseline {
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end; }

.self-center {
  -ms-align-self: center !important;
  -webkit-align-self: center !important;
  align-self: center !important; }

.blockcontent > a:first-child, .track-slider .blockcontent > a:first-child, .layout-box.grid .blockcontent > a:first-child, .social-title .blockcontent > a:first-child, #footer .blockcontent > a:first-child,
.blockcontent > li:first-child,
.blockcontent > div:first-child,
.blockcontent > section:first-child {
  height: 0;
  width: 100%;
  padding: 0 0 100% 0;
  display: block;
  position: relative; }

.flexgrid > .htc-xsmall-1 {
  width: 8.33333%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-2 {
  width: 16.66667%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-3 {
  width: 25.0%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-4 {
  width: 33.33333%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-5 {
  width: 41.66667%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-6 {
  width: 50.0%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-7 {
  width: 58.33333%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-8 {
  width: 66.66667%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-9 {
  width: 75.0%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-10 {
  width: 83.33333%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-11 {
  width: 91.66667%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

.flexgrid > .htc-xsmall-12 {
  width: 100.0%;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto; }

@media screen and (max-width: 480px) {
  .hide-xsmall {
    display: none; } }

@media screen and (min-width: 481px) {
  .flexgrid > .htc-small-1 {
    width: 8.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-2 {
    width: 16.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-3 {
    width: 25.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-4 {
    width: 33.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-5 {
    width: 41.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-6 {
    width: 50.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-7 {
    width: 58.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-8 {
    width: 66.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-9 {
    width: 75.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-10 {
    width: 83.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-11 {
    width: 91.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-small-12 {
    width: 100.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

@media screen and (min-width: 481px) and (max-width: 640px) {
  .hide-small {
    display: none; } }

@media screen and (min-width: 641px) {
  .flexgrid > .htc-medium-1 {
    width: 8.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-2 {
    width: 16.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-3 {
    width: 25.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-4 {
    width: 33.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-5 {
    width: 41.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-6 {
    width: 50.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-7 {
    width: 58.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-8 {
    width: 66.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-9 {
    width: 75.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-10 {
    width: 83.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-11 {
    width: 91.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-medium-12 {
    width: 100.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

@media screen and (min-width: 641px) and (max-width: 800px) {
  .hide-medium {
    display: none; } }

@media screen and (min-width: 801px) {
  .flexgrid > .htc-large-1 {
    width: 8.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-2 {
    width: 16.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-3 {
    width: 25.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-4 {
    width: 33.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-5 {
    width: 41.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-6 {
    width: 50.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-7 {
    width: 58.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-8 {
    width: 66.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-9 {
    width: 75.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-10 {
    width: 83.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-11 {
    width: 91.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-large-12 {
    width: 100.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

@media screen and (min-width: 801px) and (max-width: 1024px) {
  .hide-large {
    display: none; } }

@media screen and (min-width: 1025px) {
  .flexgrid > .htc-xlarge-1 {
    width: 8.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-2 {
    width: 16.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-3 {
    width: 25.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-4 {
    width: 33.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-5 {
    width: 41.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-6 {
    width: 50.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-7 {
    width: 58.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-8 {
    width: 66.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-9 {
    width: 75.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-10 {
    width: 83.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-11 {
    width: 91.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xlarge-12 {
    width: 100.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .hide-xlarge {
    display: none; } }

@media screen and (min-width: 1201px) {
  .flexgrid > .htc-xxlarge-1 {
    width: 8.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-2 {
    width: 16.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-3 {
    width: 25.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-4 {
    width: 33.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-5 {
    width: 41.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-6 {
    width: 50.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-7 {
    width: 58.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-8 {
    width: 66.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-9 {
    width: 75.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-10 {
    width: 83.33333%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-11 {
    width: 91.66667%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; }
  .flexgrid > .htc-xxlarge-12 {
    width: 100.0%;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto; } }

@media screen and (min-width: 1201px) {
  .hide-xxlarge {
    display: none; } }

/*# sourceMappingURL=hatchet.css.map */