/*
	Theme Name: Vg-lista topp 20
	Author: Cecce
	Author URI: http://perhoj.no/
	Description: Ny vg-lista toppliste
	Version: 1.0
 */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain) */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,400i,600,700");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

*, p, a, h1, h2, h3, h4, h5, h6 {
  font-family: 'Open sans', 'helvetica', arial, sans-serif;
  text-align: left; }

* {
  font-family: 'Open sans', 'helvetica', arial, sans-serif;
  text-align: left; }

body {
  font-family: 'Open sans', 'helvetica', arial, sans-serif;
  text-align: left;
  font-size: 16px;
  color: #393939; }

h1 {
  font-weight: 400;
  color: #393939;
  margin-bottom: 0;
  line-height: 1.1em;
  font-size: 2rem; }
  @media only screen and (max-width: 600px) {
    h1 {
      font-size: 1.5rem; } }

h3 {
  font-size: 1.25rem;
  font-weight: 700; }

h2 {
  font-size: 2rem;
  text-align: center;
  font-weight: 400;
  line-height: 1.2em; }

h4 {
  font-weight: 500;
  font-size: 1.25rem; }

* a {
  color: inherit;
  text-decoration: none;
  cursor: pointer; }

h5 {
  font-size: 1em;
  font-weight: 600;
  color: #64676d; }

h6 {
  color: #989898;
  font-weight: 500; }

small {
  font-size: 0.75em;
  max-width: 600px;
  display: block;
  line-height: 1.4em; }

em {
  font-style: italic; }

b,
strong {
  font-weight: 500; }

p {
  line-height: 1.5em;
  color: inherit;
  font-weight: 400;
  font-size: 1.25rem;
  font-family: 'Open sans', 'helvetica', arial, sans-serif;
  text-align: left; }

p a {
  text-decoration: underline;
  font-weight: 400;
  margin: 1em 0 0em;
  cursor: pointer; }

a {
  text-decoration: none;
  cursor: pointer; }

.fornebu_icon {
  color: #fff;
  font-size: 2.9rem;
  line-height: 0.2em; }

::-webkit-input-placeholder {
  color: #7F85B2; }

::-moz-placeholder {
  color: #7F85B2; }

*:-ms-input-placeholder {
  color: #7F85B2; }

*:-moz-placeholder {
  color: #7F85B2; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased; }
  *:focus {
    outline: none; }

.screen-reader-text {
  position: absolute !important;
  left: -999em; }

html,
body {
  width: 100%;
  overflow-x: hidden; }
  html.modal_open,
  body.modal_open {
    overflow: hidden; }
  @media only screen and (min-width: 1025px) {
    html .mobile,
    body .mobile {
      display: none !important; } }
  @media only screen and (max-width: 1024px) {
    html .desktop,
    body .desktop {
      display: none !important; } }

.chart_section {
  max-width: 960px;
  width: 95%;
  margin: 8rem auto 5rem; }
  @media only screen and (max-width: 1024px) {
    .chart_section {
      margin: 4rem auto 3rem; } }
  .chart_section h1 {
    margin-bottom: 3rem; }
  .chart_section #chart_wrap {
    height: 400px; }
    .chart_section #chart_wrap .canvas_wrap {
      width: 100%;
      height: 100%;
      overflow: hidden; }
    @media only screen and (max-width: 700px) {
      .chart_section #chart_wrap {
        height: 350px; } }
    @media only screen and (max-width: 600px) {
      .chart_section #chart_wrap {
        height: 300px; } }
    @media only screen and (max-width: 500px) {
      .chart_section #chart_wrap {
        height: 250px; } }

button,
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none; }

.search_overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(10, 11, 35, 0.53);
  width: 100%;
  height: 100%;
  z-index: 9;
  display: none; }
  .search_overlay .search_overlay_wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    height: 100%;
    width: 100%; }
  .search_overlay form {
    width: 90%;
    max-width: 600px; }
    .search_overlay form .close_wrap {
      width: 100%;
      text-align: right; }
      .search_overlay form .close_wrap .close {
        color: #fff;
        font-size: 32px;
        position: relative;
        right: -20px;
        cursor: pointer; }

.search_field_wrap {
  background: #fff;
  width: 100%;
  display: block;
  border-radius: 50px;
  padding: 1rem 4.5rem 1rem 2.3rem;
  position: relative; }
  .search_field_wrap .search-field {
    font-size: 2rem;
    width: 100%;
    display: block;
    color: #615861; }
  .search_field_wrap .submit_wrap {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: initial;
    -moz-justify-content: initial;
    -ms-justify-content: initial;
    -o-justify-content: initial;
    justify-content: initial;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 0 2.3rem 0 0; }
    .search_field_wrap .submit_wrap button {
      padding: 0;
      margin: 0;
      cursor: pointer; }
    .search_field_wrap .submit_wrap i {
      font-size: 32px;
      color: #7f85b2;
      display: block;
      margin-top: 5px; }
  @media only screen and (max-width: 500px) {
    .search_field_wrap {
      padding: 0.6rem 3.5rem 0.6rem 1.5rem; }
      .search_field_wrap .search-field {
        font-size: 1.1rem; }
      .search_field_wrap .submit_wrap {
        padding: 0 1.5rem 0 0; }
        .search_field_wrap .submit_wrap i {
          font-size: 28px; } }

.search_results {
  margin: 0 auto 6rem;
  max-width: 960px; }
  .search_results .close_wrap {
    display: none; }
  .search_results .search-form {
    max-width: 630px;
    margin: 4rem auto; }
    .search_results .search-form .search_field_wrap {
      border: 2px solid #d4d4d4; }
  .search_results .result_box {
    border-bottom: 1px solid #e6e6e6;
    padding: 1rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    color: #393939;
    cursor: pointer; }
    .search_results .result_box p {
      font-size: 0.8rem;
      text-transform: uppercase;
      font-weight: 600;
      color: #505050; }
    .search_results .result_box .title {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: initial;
      -moz-justify-content: initial;
      -ms-justify-content: initial;
      -o-justify-content: initial;
      justify-content: initial;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap; }
      .search_results .result_box .title i {
        margin-right: 19px;
        color: #7F7E7E; }
      .search_results .result_box .title h1 {
        font-size: 18px;
        color: inherit; }
      .search_results .result_box .title h4 {
        font-size: 14px;
        margin-top: 0.3rem; }
    .search_results .result_box:hover {
      box-shadow: 0 0 23px rgba(0, 0, 0, 0.07);
      color: #ef2f3b; }
      .search_results .result_box:hover i,
      .search_results .result_box:hover p {
        color: #ef2f3b; }

.single-sanger .music {
  visibility: hidden;
  height: 0;
  position: absolute;
  left: -999px;
  top: -9999px; }

.cta_link {
  color: #ef2f3b;
  font-weight: 600;
  margin: 2rem 1rem;
  display: block;
  padding-left: 1.8rem;
  text-decoration: underline; }

.toppliste_header {
  background: #000;
  height: 700px;
  width: 100%;
  display: block;
  position: relative;
  /* ----------- iPad 3, 4 and Pro 9.7" ----------- */
  /* Portrait */
  /* Landscape */
  /* ----------- iPhone 6+, 7+ and 8+ ----------- */
  /* Portrait */
  /* ----------- iPhone 6, 6S, 7 and 8 ----------- */
  /* Portrait */
  /* ----------- Android (motorola test phone) ----------- */
  /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ }
  .toppliste_header.empty {
    height: 200px; }
  .toppliste_header .spotify_link.mobile {
    display: none; }
  .toppliste_header .menu_icon {
    display: none;
    position: fixed;
    top: 7px;
    left: 10px;
    z-index: 999;
    color: #fff;
    font-size: 41px;
    cursor: pointer; }
    @media only screen and (max-width: 1100px) {
      .toppliste_header .menu_icon {
        display: block; } }
  .toppliste_header .menu_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    pointer-events: none; }
    .toppliste_header .menu_bar a {
      pointer-events: initial;
      margin: 0 auto;
      display: block;
      width: 80px; }
    .toppliste_header .menu_bar img {
      width: 100%;
      height: auto; }
  .toppliste_header nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    padding: 1.2rem 7rem; }
    .toppliste_header nav .items .wrap {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -webkit-align-items: initial;
      -moz-align-items: initial;
      -ms-align-items: initial;
      -o-align-items: initial;
      align-items: initial;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap; }
      .toppliste_header nav .items .wrap ul {
        -webkit-flex: 0 40%;
        -moz-flex: 0 40%;
        -ms-flex: 0 40%;
        -o-flex: 0 40%;
        flex: 0 40%;
        -webkit-order: 0;
        -moz-order: 0;
        -ms-order: 0;
        -o-order: 0;
        order: 0;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: initial;
        -moz-justify-content: initial;
        -ms-justify-content: initial;
        -o-justify-content: initial;
        justify-content: initial;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;
        -webkit-flex-flow: initial;
        -moz-flex-flow: initial;
        -ms-flex-flow: initial;
        -o-flex-flow: initial;
        flex-flow: initial;
        max-width: 420px; }
        .toppliste_header nav .items .wrap ul:last-child {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-justify-content: flex-end;
          -moz-justify-content: flex-end;
          -ms-justify-content: flex-end;
          -o-justify-content: flex-end;
          justify-content: flex-end;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -webkit-flex-flow: initial;
          -moz-flex-flow: initial;
          -ms-flex-flow: initial;
          -o-flex-flow: initial;
          flex-flow: initial; }
        .toppliste_header nav .items .wrap ul li {
          list-style: none;
          cursor: pointer; }
          .toppliste_header nav .items .wrap ul li p {
            white-space: nowrap;
            color: #fff;
            font-size: 14px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.3px; }
          .toppliste_header nav .items .wrap ul li i {
            color: #fff; }
        .toppliste_header nav .items .wrap ul:first-child li {
          margin-right: 2.5rem; }
        .toppliste_header nav .items .wrap ul:last-child li {
          margin-left: 2.5rem; }
    @media only screen and (max-width: 1100px) {
      .toppliste_header nav {
        background: rebeccapurple;
        z-index: 99;
        position: fixed;
        padding: 3em;
        height: 100%;
        width: 100%;
        display: none; }
        .toppliste_header nav .items {
          height: 100%;
          width: 100%;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -webkit-flex-flow: row wrap;
          -moz-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
          -o-flex-flow: row wrap;
          flex-flow: row wrap; }
          .toppliste_header nav .items.hide {
            display: none; }
          .toppliste_header nav .items .wrap {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            -o-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -webkit-flex-flow: row wrap;
            -moz-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
            -o-flex-flow: row wrap;
            flex-flow: row wrap; }
            .toppliste_header nav .items .wrap ul {
              display: block;
              -webkit-flex: 1 1 50%;
              -moz-flex: 1 1 50%;
              -ms-flex: 1 1 50%;
              -o-flex: 1 1 50%;
              flex: 1 1 50%;
              -webkit-order: 0;
              -moz-order: 0;
              -ms-order: 0;
              -o-order: 0;
              order: 0;
              min-width: 320px; }
              .toppliste_header nav .items .wrap ul:last-child li {
                margin: 0; }
              .toppliste_header nav .items .wrap ul li {
                margin: 0;
                border-bottom: 1px solid #fff;
                padding-bottom: 0.4em;
                margin: 0 1em 1.5em !important; }
                .toppliste_header nav .items .wrap ul li p {
                  font-size: 1.2em; } }
  .toppliste_header .bg_wrap {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .toppliste_header .bg_wrap .bg {
      position: absolute;
      background-position: center;
      top: -15%;
      background-size: cover;
      left: -15%;
      width: 130%;
      height: 130%;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -ms-filter: blur(15px);
      -o-filter: blur(15px);
      filter: blur(15px);
      z-index: 0; }
  .toppliste_header .content_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 4rem; }
  .toppliste_header .content {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 960px;
    padding: 0 45px;
    width: 100%;
    z-index: 4; }
    .toppliste_header .content .information {
      position: relative; }
      .toppliste_header .content .information h1, .toppliste_header .content .information h4, .toppliste_header .content .information p {
        color: #fff; }
      .toppliste_header .content .information h1 {
        font-size: 38px;
        max-width: 90%; }
      .toppliste_header .content .information h4 {
        font-size: 19px;
        font-weight: 700;
        margin-top: 0.4rem; }
      .toppliste_header .content .information p {
        font-weight: 600;
        font-size: 16px;
        max-width: 450px;
        margin-top: 1rem; }
      .toppliste_header .content .information a:hover {
        text-decoration: underline; }
      .toppliste_header .content .information .play_wrapper {
        position: absolute;
        right: 0;
        bottom: 0; }
        .toppliste_header .content .information .play_wrapper .round_button {
          cursor: pointer;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: #ef2f3b;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.37);
          background-size: 110% 110%;
          background-position: center; }
          .toppliste_header .content .information .play_wrapper .round_button i {
            font-size: 45px; }
          .toppliste_header .content .information .play_wrapper .round_button .spotify_icon {
            width: 45%;
            height: auto; }
    .toppliste_header .content .album_wrapper {
      text-align: center;
      margin-bottom: 1rem;
      position: relative; }
      .toppliste_header .content .album_wrapper .spotify_icon {
        position: absolute;
        bottom: -13px;
        left: 0;
        opacity: 0.8; }
      .toppliste_header .content .album_wrapper span {
        display: inline-block;
        position: relative; }
        .toppliste_header .content .album_wrapper span .album_img {
          background: #000;
          margin: 0 auto;
          display: block;
          height: 345px;
          width: 345px;
          border-radius: 50%;
          border: 6px solid #fff;
          background-size: cover;
          background-position: center; }
          .toppliste_header .content .album_wrapper span .album_img img {
            width: 100%;
            height: auto; }
        .toppliste_header .content .album_wrapper span small {
          display: block;
          position: absolute;
          bottom: 0;
          right: 15px;
          font-size: 20px;
          font-weight: 600;
          color: #fff;
          font-family: 'Open sans', 'helvetica', arial, sans-serif;
          text-align: left; }
  .toppliste_header::before {
    content: ' ';
    display: block;
    background: #f1f1f1;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 9px;
    z-index: 2; }
  .toppliste_header .progress_bar {
    display: block;
    background: #ef2f3b;
    width: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 9px;
    z-index: 3; }
  .toppliste_header .overlay {
    display: block;
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0; }
  .toppliste_header.no_bg {
    height: 70px;
    background: none; }
    .toppliste_header.no_bg .menu_icon,
    .toppliste_header.no_bg nav .items .wrap ul li p,
    .toppliste_header.no_bg nav .items .wrap ul li i {
      color: #393939; }
    .toppliste_header.no_bg::before {
      content: none; }
  @media only screen and (max-width: 900px) {
    .toppliste_header::before {
      background-color: #e0e0e0; }
    .toppliste_header .spotify_link {
      display: none; }
    .toppliste_header .spotify_link.mobile {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: initial;
      -moz-justify-content: initial;
      -ms-justify-content: initial;
      -o-justify-content: initial;
      justify-content: initial;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap;
      position: absolute;
      top: 13px;
      right: 17px;
      z-index: 2;
      cursor: pointer; }
      .toppliste_header .spotify_link.mobile p {
        color: #fff;
        font-size: 12px;
        margin-right: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        opacity: 0.8; }
      .toppliste_header .spotify_link.mobile img {
        opacity: 0.8;
        width: 31px; }
    .toppliste_header .content .information {
      position: static; }
      .toppliste_header .content .information h1, .toppliste_header .content .information h4, .toppliste_header .content .information p {
        text-align: center; }
      .toppliste_header .content .information h1 {
        max-width: initial;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 95%;
        width: 100%;
        line-height: 1.4em; }
      .toppliste_header .content .information h4 {
        margin-top: 0.8rem; }
      .toppliste_header .content .information p {
        margin: 1rem auto 0; }
      .toppliste_header .content .information .play_wrapper {
        right: 0;
        bottom: -5.4rem; }
        .toppliste_header .content .information .play_wrapper .round_button {
          width: 60px;
          height: 60px; }
          .toppliste_header .content .information .play_wrapper .round_button i {
            font-size: 35px; } }
  @media only screen and (max-width: 700px) {
    .toppliste_header {
      height: 650px; }
      .toppliste_header .content_wrapper {
        padding: 4rem 0; }
      .toppliste_header .content {
        padding: 0; }
        .toppliste_header .content .album_wrapper {
          margin-bottom: 2.5rem; }
          .toppliste_header .content .album_wrapper span .album_img {
            height: 300px;
            width: 300px; }
        .toppliste_header .content .information .play_wrapper {
          bottom: -5.4rem;
          right: 2rem; }
      .toppliste_header .menu_bar img {
        display: none; } }
  @media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    .toppliste_header .content .album_wrapper {
      margin-bottom: 2rem; }
    .toppliste_header .content .information h4 {
      margin-top: 0.4rem; }
    .toppliste_header .content .information .play_wrapper {
      bottom: -6.2rem; }
      .toppliste_header .content .information .play_wrapper .round_button {
        width: 90px;
        height: 90px; }
        .toppliste_header .content .information .play_wrapper .round_button i {
          font-size: 45px; } }
  @media only screen and (max-device-width: 1024px) and (orientation: landscape) {
    .toppliste_header {
      max-height: 90vh; } }
  @media only screen and (max-device-width: 736px) and (orientation: portrait) {
    .toppliste_header {
      height: 85vh; }
      .toppliste_header .content_wrapper {
        padding: 3rem 0 4rem; }
      .toppliste_header .content .album_wrapper {
        margin-bottom: 1.5rem; }
        .toppliste_header .content .album_wrapper span .album_img {
          height: 270px;
          width: 270px; }
      .toppliste_header .content .information .play_wrapper {
        bottom: -6rem;
        right: 2rem; }
        .toppliste_header .content .information .play_wrapper .round_button {
          width: 70px;
          height: 70px; } }
  @media only screen and (max-device-width: 736px) and (orientation: landscape) {
    .toppliste_header {
      max-height: initial; } }
  @media only screen and (max-device-width: 736px) and (orientation: portrait) {
    .toppliste_header {
      height: initial; }
      .toppliste_header .content_wrapper {
        position: relative;
        padding: 5rem 0 3.5rem; }
      .toppliste_header .content .album_wrapper span .album_img {
        width: 240px;
        height: 240px; }
      .toppliste_header .content .album_wrapper span small {
        bottom: 0;
        right: 0px;
        font-size: 16px; }
      .toppliste_header .content .information {
        padding: 0 10px; }
        .toppliste_header .content .information .play_wrapper {
          bottom: -5.5rem; }
        .toppliste_header .content .information h1 {
          font-size: 34px; }
        .toppliste_header .content .information h4 {
          font-size: 18px; } }
  @media only screen and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
    .toppliste_header .content .information .play_wrapper {
      bottom: -5rem; }
    .toppliste_header .content .information h1 {
      font-size: 28px; }
    .toppliste_header .content .information h4 {
      font-size: 18px; } }
  @media only screen and (max-device-width: 568px) and (orientation: portrait) {
    .toppliste_header .content_wrapper {
      padding: 4.5rem 0 3rem; }
    .toppliste_header .content .album_wrapper {
      margin-bottom: 1rem; }
      .toppliste_header .content .album_wrapper span .album_img {
        width: 200px;
        height: 200px;
        border-width: 4px; }
    .toppliste_header .content .information .play_wrapper {
      bottom: -5.5rem; }
    .toppliste_header .content .information h1 {
      font-size: 30px; }
    .toppliste_header .content .information h4 {
      font-size: 16px; }
    .toppliste_header .content .information p {
      font-size: 14px; } }

.select_wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -o-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -webkit-flex-flow: initial;
  -moz-flex-flow: initial;
  -ms-flex-flow: initial;
  -o-flex-flow: initial;
  flex-flow: initial;
  color: #A3A3A3;
  cursor: pointer;
  position: relative; }
  .select_wrap select {
    color: #A3A3A3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    font-family: 'Open sans', 'helvetica', arial, sans-serif;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    width: 100%;
    cursor: pointer;
    padding-right: 40px; }
  .select_wrap i {
    margin-left: 10px;
    margin-top: -1px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
    pointer-events: none; }
  .select_wrap.pink {
    color: #131212; }
    .select_wrap.pink select {
      color: #131212; }

.select {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: initial;
  -moz-justify-content: initial;
  -ms-justify-content: initial;
  -o-justify-content: initial;
  justify-content: initial;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -webkit-flex-flow: initial;
  -moz-flex-flow: initial;
  -ms-flex-flow: initial;
  -o-flex-flow: initial;
  flex-flow: initial;
  color: #A3A3A3;
  cursor: pointer; }
  .select i {
    margin: 0 10px;
    color: inherit; }
  .select p {
    font-family: 'Open sans', 'helvetica', arial, sans-serif;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase; }
  .select.pink {
    color: #131212; }

.music_list_filter {
  margin: 50px auto 0;
  /* ----------- iPhone 6, 6S, 7 and 8 ----------- */
  /* Portrait */ }
  .music_list_filter .wrap {
    margin: 0 auto;
    max-width: 960px;
    padding: 0 45px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap; }
    .music_list_filter .wrap .field_card h3,
    .music_list_filter .wrap .field_card .close {
      display: none; }
    .music_list_filter .wrap .field_card .msg {
      color: red;
      font-style: italic; }
    .music_list_filter .wrap .fields {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap; }
    .music_list_filter .wrap button {
      font-family: 'Open sans', 'helvetica', arial, sans-serif;
      text-align: left;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-weight: 600;
      font-size: 16px;
      padding: 0;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      text-transform: uppercase;
      cursor: pointer;
      background: none;
      color: #ef2f3b;
      border: 2px solid #ef2f3b;
      position: relative;
      left: 30px;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: initial;
      -moz-flex-flow: initial;
      -ms-flex-flow: initial;
      -o-flex-flow: initial;
      flex-flow: initial; }
      .music_list_filter .wrap button:hover {
        color: #ffffff;
        background: #ef2f3b; }
      .music_list_filter .wrap button#get_list {
        visibility: hidden; }
        .music_list_filter .wrap button#get_list p {
          display: none; }
        .music_list_filter .wrap button#get_list.show {
          visibility: visible; }
    .music_list_filter .wrap .row {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: initial;
      -moz-justify-content: initial;
      -ms-justify-content: initial;
      -o-justify-content: initial;
      justify-content: initial;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap; }
      .music_list_filter .wrap .row.left .select_wrap,
      .music_list_filter .wrap .row.left .select {
        margin-right: 40px; }
      .music_list_filter .wrap .row.right .select_wrap,
      .music_list_filter .wrap .row.right .select {
        margin-left: 40px; }
  @media only screen and (max-width: 1024px) {
    .music_list_filter {
      background: #f1f1f1;
      margin: 0; }
      .music_list_filter .wrap {
        padding: 0.6em 45px 1em; }
        .music_list_filter .wrap .row.left .field_card {
          position: fixed;
          top: 0;
          left: 0;
          background: rgba(35, 34, 41, 0.87);
          width: 100%;
          height: 100%;
          z-index: 999;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -webkit-flex-flow: row wrap;
          -moz-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
          -o-flex-flow: row wrap;
          flex-flow: row wrap;
          -webkit-transition: all 0.4s ease-in-out;
          -moz-transition: all 0.4s ease-in-out;
          -ms-transition: all 0.4s ease-in-out;
          -o-transition: all 0.4s ease-in-out;
          transition: all 0.4s ease-in-out; }
          .music_list_filter .wrap .row.left .field_card.hide {
            display: none; }
          .music_list_filter .wrap .row.left .field_card .close {
            display: block;
            position: absolute;
            top: 2.3rem;
            right: 2.3rem;
            cursor: pointer; }
          .music_list_filter .wrap .row.left .field_card h3 {
            display: block;
            margin-bottom: 3em;
            text-transform: uppercase;
            font-size: 1rem;
            color: #c1c1c1; }
          .music_list_filter .wrap .row.left .field_card .fields {
            background: #fff;
            width: 90%;
            padding: 2.5rem;
            display: block;
            max-width: 550px;
            position: relative; }
            .music_list_filter .wrap .row.left .field_card .fields .select_wrap,
            .music_list_filter .wrap .row.left .field_card .fields .select {
              margin-right: 0;
              border-bottom: 2px solid #e6e6e6;
              padding-bottom: 0.5em;
              margin-bottom: 1.5em; }
              .music_list_filter .wrap .row.left .field_card .fields .select_wrap select,
              .music_list_filter .wrap .row.left .field_card .fields .select_wrap i,
              .music_list_filter .wrap .row.left .field_card .fields .select select,
              .music_list_filter .wrap .row.left .field_card .fields .select i {
                color: #444444; }
        .music_list_filter .wrap button#get_list {
          visibility: visible;
          width: initial;
          height: initial;
          border-radius: 0;
          background: #ef2f3b;
          border: none;
          color: #fff;
          font-size: 14px;
          position: static;
          padding: 0.5em 1.5em;
          margin-top: 3em; }
          .music_list_filter .wrap button#get_list p {
            display: block;
            font-size: 1.2em;
            font-weight: 600; }
          .music_list_filter .wrap button#get_list i {
            display: none; } }
  @media only screen and (max-width: 900px) {
    .music_list_filter {
      background: #fff; }
      .music_list_filter .wrap {
        padding: 1.6em 45px 1em; } }
  @media only screen and (max-width: 500px) {
    .music_list_filter .wrap {
      padding: 1.6em 8px 1em; } }
  @media only screen and (max-device-width: 736px) and (orientation: portrait) {
    .music_list_filter .wrap {
      padding: 3em 8px 0em; } }

.select_field_week {
  position: relative;
  color: #A3A3A3;
  font-family: 'Open sans', 'helvetica', arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer; }
  .select_field_week label {
    cursor: pointer;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-flex-flow: initial;
    -moz-flex-flow: initial;
    -ms-flex-flow: initial;
    -o-flex-flow: initial;
    flex-flow: initial; }
    .select_field_week label .arrow {
      margin-left: 14px; }
  .select_field_week .bottom_bar,
  .select_field_week .top_bar {
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center; }
  .select_field_week .top_bar {
    bottom: initial;
    top: 0; }
  .select_field_week .items {
    position: absolute;
    bottom: 0;
    left: -1em;
    z-index: 4;
    transform: translateY(102%);
    box-shadow: 1px 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #ececec;
    display: none; }
    .select_field_week .items.at_bottom .bottom_bar {
      display: none; }
    .select_field_week .items.at_top .top_bar {
      display: none; }
  .select_field_week ul {
    background: #fff;
    max-height: 500px;
    overflow-y: scroll; }
    .select_field_week ul li {
      white-space: nowrap;
      padding: 0.9em 1em;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: initial;
      -moz-justify-content: initial;
      -ms-justify-content: initial;
      -o-justify-content: initial;
      justify-content: initial;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: initial;
      -moz-flex-flow: initial;
      -ms-flex-flow: initial;
      -o-flex-flow: initial;
      flex-flow: initial;
      border-bottom: 1px solid #ececec;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out; }
      .select_field_week ul li:last-child {
        border-bottom: none; }
      .select_field_week ul li span {
        text-transform: none;
        font-weight: normal;
        margin-left: 20px;
        font-size: 14px; }
      .select_field_week ul li:hover {
        background: #ebe4ec;
        color: #9b79a0; }
      .select_field_week ul li.selected {
        background: #131212;
        color: #fff; }

.music_table {
  max-width: 960px;
  margin: 90px auto;
  width: 95%;
  /* ----------- iPhone 6, 6S, 7 and 8 ----------- */
  /* Portrait */ }
  .music_table p a {
    text-decoration: none; }
  .music_table a:hover,
  .music_table p a:hover {
    text-decoration: underline; }
  .music_table .row,
  .music_table tr {
    border-bottom: 1px solid #F1F1F1;
    background: #fff;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 0; }
    .music_table .row th,
    .music_table tr th {
      color: #6c6c73;
      font-size: 14px;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 0.5px; }
      .music_table .row th.weeks, .music_table .row th.year, .music_table .row th.best,
      .music_table tr th.weeks,
      .music_table tr th.year,
      .music_table tr th.best {
        white-space: nowrap; }
      .music_table .row th.song,
      .music_table tr th.song {
        width: 100%; }
    .music_table .row th,
    .music_table .row td,
    .music_table tr th,
    .music_table tr td {
      padding: 18px 0;
      vertical-align: middle; }
      .music_table .row th.weeks, .music_table .row th.year, .music_table .row th.best,
      .music_table .row td.weeks,
      .music_table .row td.year,
      .music_table .row td.best,
      .music_table tr th.weeks,
      .music_table tr th.year,
      .music_table tr th.best,
      .music_table tr td.weeks,
      .music_table tr td.year,
      .music_table tr td.best {
        white-space: nowrap;
        text-align: right;
        padding-right: 3rem; }
      .music_table .row th:first-child,
      .music_table .row td:first-child,
      .music_table tr th:first-child,
      .music_table tr td:first-child {
        padding-left: 45px;
        max-width: 0;
        width: 100%; }
      .music_table .row th:last-child,
      .music_table .row td:last-child,
      .music_table tr th:last-child,
      .music_table tr td:last-child {
        padding-right: 45px; }
    .music_table .row .content,
    .music_table tr .content {
      padding-right: 20px; }
    .music_table .row h2,
    .music_table tr h2 {
      font-size: 1.125rem;
      color: #393939;
      font-family: 'Open sans', 'helvetica', arial, sans-serif;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 95%; }
    .music_table .row p,
    .music_table tr p {
      color: #656565;
      font-family: 'Open sans', 'helvetica', arial, sans-serif;
      text-align: left;
      font-size: 0.875rem; }
    .music_table .row .progress,
    .music_table tr .progress {
      margin-left: 20px;
      width: 30px; }
      .music_table .row .progress .plus,
      .music_table tr .progress .plus {
        color: #8beeb7; }
      .music_table .row .progress .minus,
      .music_table tr .progress .minus {
        color: #d5a5a8; }
      .music_table .row .progress .none,
      .music_table tr .progress .none {
        opacity: 0; }
      .music_table .row .progress .new,
      .music_table tr .progress .new {
        min-width: 24px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 13px;
        color: #949494; }
  @media only screen and (max-width: 800px) {
    .music_table tr th .extra {
      display: none; } }
  @media only screen and (max-width: 620px) {
    .music_table tr .best {
      display: none; } }
  @media only screen and (max-width: 500px) {
    .music_table tr .best {
      display: none; }
    .music_table tr td {
      padding: 15px 0; }
      .music_table tr td h1 {
        font-size: 1rem; }
      .music_table tr td:first-child {
        padding-left: 25px; }
      .music_table tr td.weeks {
        padding-right: 25px; }
    .music_table tr .year {
      padding-right: 2rem;
      display: none; }
    .music_table tr th:first-child {
      padding-left: 22px; }
      .music_table tr th:first-child h1 {
        font-size: 1.5rem; }
    .music_table tr th.weeks {
      padding-right: 22px; } }
  .music_table tbody tr:hover {
    z-index: 1;
    box-shadow: 0 0 23px rgba(0, 0, 0, 0.07); }
    .music_table tbody tr:hover h2, .music_table tbody tr:hover p, .music_table tbody tr:hover td {
      color: #ef2f3b; }
    .music_table tbody tr:hover h2, .music_table tbody tr:hover td {
      font-weight: 600; }
  .music_table .row {
    padding: 18px 45px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-flex-flow: initial;
    -moz-flex-flow: initial;
    -ms-flex-flow: initial;
    -o-flex-flow: initial;
    flex-flow: initial; }
    .music_table .row .main_part {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: initial;
      -moz-flex-flow: initial;
      -ms-flex-flow: initial;
      -o-flex-flow: initial;
      flex-flow: initial;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      -o-flex: 1;
      flex: 1;
      -webkit-order: 0;
      -moz-order: 0;
      -ms-order: 0;
      -o-order: 0;
      order: 0;
      overflow-x: hidden; }
      .music_table .row .main_part .info {
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        -o-flex: 1;
        flex: 1;
        -webkit-order: 0;
        -moz-order: 0;
        -ms-order: 0;
        -o-order: 0;
        order: 0;
        min-width: 0; }
        .music_table .row .main_part .info .wrap {
          margin-left: 3rem;
          padding-right: 3rem; }
    .music_table .row .play_btn {
      border: 1px solid #E6E7E8;
      height: 45px;
      width: 45px;
      min-height: 45px;
      min-width: 45px;
      border-radius: 50%;
      color: #7F7E7E;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      flex-flow: row wrap;
      position: relative; }
      .music_table .row .play_btn.trans {
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out; }
      .music_table .row .play_btn i {
        font-size: 1.2rem; }
        .music_table .row .play_btn i.pause, .music_table .row .play_btn i.replay {
          display: none; }
      .music_table .row .play_btn #bars {
        display: none; }
    .music_table .row .music {
      visibility: hidden;
      position: absolute;
      left: -9999px;
      top: -9999px; }
    .music_table .row.pause i.play {
      display: none; }
    .music_table .row.pause i.pause {
      display: block; }
    .music_table .row.replay i.play {
      display: none; }
    .music_table .row.replay i.replay {
      display: block; }
    .music_table .row.selected, .music_table .row.found:hover {
      box-shadow: 0 0 23px rgba(0, 0, 0, 0.07);
      z-index: 3; }
    .music_table .row.selected {
      z-index: 1; }
      .music_table .row.selected h2, .music_table .row.selected p, .music_table .row.selected a {
        color: #ef2f3b; }
      .music_table .row.selected h2 {
        font-weight: 600; }
      .music_table .row.selected:not(.playing) .play_btn {
        color: #ef2f3b;
        border-color: #ef2f3b; }
      .music_table .row.selected::before {
        content: ' ';
        display: block;
        background: #F1F1F1;
        width: 100%;
        position: absolute;
        top: -1px;
        left: 0;
        height: 1px; }
    .music_table .row.playing .play_btn {
      border-color: transparent; }
      .music_table .row.playing .play_btn i {
        display: none; }
      .music_table .row.playing .play_btn #bars {
        display: block;
        height: 30px;
        width: 24px;
        position: relative; }
      .music_table .row.playing .play_btn .bar {
        background: #ef2f3b;
        bottom: 1px;
        height: 3px;
        position: absolute;
        width: 5px;
        animation: sound 2ms -800ms linear infinite alternate; }
        .music_table .row.playing .play_btn .bar:nth-child(1) {
          left: 0px;
          animation-duration: 300ms; }
        .music_table .row.playing .play_btn .bar:nth-child(2) {
          left: 6px;
          animation-duration: 433ms; }
        .music_table .row.playing .play_btn .bar:nth-child(3) {
          left: 12px;
          animation-duration: 480ms; }
        .music_table .row.playing .play_btn .bar:nth-child(4) {
          left: 18px;
          animation-duration: 389ms; }

@keyframes sound {
  0% {
    height: 3px; }
  100% {
    height: 28px; } }
    .music_table .row:not(.found) {
      cursor: initial; }
      .music_table .row:not(.found) .play_btn i {
        color: #e9eaeb; }
  @media only screen and (max-width: 1024px) {
    .music_table {
      margin: 3rem auto; } }
  @media only screen and (max-width: 700px) {
    .music_table {
      width: 100%; } }
  @media only screen and (max-width: 500px) {
    .music_table {
      margin: 2rem auto; }
      .music_table .row {
        padding: 14px 8px; }
        .music_table .row h2 {
          font-size: 1rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden; }
        .music_table .row .play_btn {
          height: 35px;
          width: 35px;
          min-height: 35px;
          min-width: 35px; }
          .music_table .row .play_btn i {
            font-size: 1.1rem; }
        .music_table .row .main_part .info .wrap {
          margin-left: 1rem;
          padding-right: 1rem; }
          .music_table .row .main_part .info .wrap .artist {
            font-size: 14px;
            margin-top: 0.3em;
            display: block;
            line-height: 1.5em; } }
  @media only screen and (max-device-width: 736px) and (orientation: portrait) {
    .music_table {
      margin: 1rem auto; } }

.multiple_songs {
  max-width: 960px;
  margin: 0 auto 5rem;
  width: 95%; }
  .multiple_songs .music_table {
    max-width: 960px;
    margin: 5rem auto 0;
    width: 100%; }
    .multiple_songs .music_table h1 {
      font-size: 1rem; }
    @media only screen and (max-width: 1024px) {
      .multiple_songs .music_table {
        margin: 2rem auto 0; } }

.album_display {
  overflow: hidden;
  background: #2d2c2c; }
  .album_display h1 {
    max-width: 960px;
    color: #fff;
    width: 95%;
    padding: 0 10px;
    margin: 5rem auto 1rem; }
  .album_display .wrap {
    max-width: 960px;
    width: 95%;
    margin: 1rem auto 4rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: initial;
    -moz-align-items: initial;
    -ms-align-items: initial;
    -o-align-items: initial;
    align-items: initial;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap; }
    .album_display .wrap .album {
      -webkit-flex: 1 1 31%;
      -moz-flex: 1 1 31%;
      -ms-flex: 1 1 31%;
      -o-flex: 1 1 31%;
      flex: 1 1 31%;
      -webkit-order: 0;
      -moz-order: 0;
      -ms-order: 0;
      -o-order: 0;
      order: 0;
      margin: 10px;
      margin-bottom: 2rem;
      cursor: pointer;
      min-width: 230px; }
      .album_display .wrap .album.empty {
        height: 0;
        margin-bottom: 0; }
      .album_display .wrap .album .album_img {
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        position: relative; }
        .album_display .wrap .album .album_img img {
          display: block;
          width: 100%;
          height: auto;
          box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
          border: 1px solid rgba(0, 0, 0, 0.26); }
        .album_display .wrap .album .album_img .circle_wrap {
          position: absolute;
          width: 100%;
          height: 100%;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -webkit-flex-flow: row wrap;
          -moz-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
          -o-flex-flow: row wrap;
          flex-flow: row wrap;
          -webkit-transition: all 0.4s ease-in-out;
          -moz-transition: all 0.4s ease-in-out;
          -ms-transition: all 0.4s ease-in-out;
          -o-transition: all 0.4s ease-in-out;
          transition: all 0.4s ease-in-out;
          opacity: 0; }
          .album_display .wrap .album .album_img .circle_wrap .circle_btn {
            cursor: pointer;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 2px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-size: 110% 110%;
            background-position: center; }
            .album_display .wrap .album .album_img .circle_wrap .circle_btn i {
              font-size: 35px; }
      .album_display .wrap .album .album_txt h2, .album_display .wrap .album .album_txt p {
        text-align: center; }
      .album_display .wrap .album .album_txt h2 {
        font-size: 1.125rem;
        color: #393939;
        margin-top: 0.5rem;
        font-weight: 600;
        color: #fff; }
      .album_display .wrap .album .album_txt p {
        color: #A3A3A3;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase; }
      .album_display .wrap .album:hover .album_img {
        box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.15);
        transform: scale(1.03); }
        .album_display .wrap .album:hover .album_img .circle_wrap {
          opacity: 0.8; }
  @media only screen and (max-width: 900px) {
    .album_display h1 {
      margin: 4rem auto 1rem; } }
  @media only screen and (max-width: 600px) {
    .album_display h1 {
      margin: 3rem auto 1rem; }
    .album_display .wrap {
      margin: 1rem auto; } }

footer {
  background: #2b2929;
  color: #fff; }
  footer p,
  footer li,
  footer h3 {
    font-family: 'Open sans', 'helvetica', arial, sans-serif;
    text-align: left;
    font-size: 1rem; }
  footer h3 {
    font-size: 1rem;
    margin-bottom: 1em;
    text-transform: uppercase; }
  footer .wrap {
    padding: 0 2rem; }
  footer .content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: initial;
    -moz-align-items: initial;
    -ms-align-items: initial;
    -o-align-items: initial;
    align-items: initial;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -o-flex-flow: row wrap;
    flex-flow: row wrap;
    max-width: 960px;
    margin: 0 auto;
    padding: 4rem 0 1rem; }
    footer .content .copyright {
      -webkit-flex: 0 100%;
      -moz-flex: 0 100%;
      -ms-flex: 0 100%;
      -o-flex: 0 100%;
      flex: 0 100%;
      -webkit-order: 0;
      -moz-order: 0;
      -ms-order: 0;
      -o-order: 0;
      order: 0;
      margin-top: 7rem;
      font-size: 12px;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: initial;
      -moz-justify-content: initial;
      -ms-justify-content: initial;
      -o-justify-content: initial;
      justify-content: initial;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -webkit-flex-flow: initial;
      -moz-flex-flow: initial;
      -ms-flex-flow: initial;
      -o-flex-flow: initial;
      flex-flow: initial; }
      footer .content .copyright img {
        width: 70px;
        margin-right: 2rem; }
    footer .content .box ul li {
      cursor: pointer;
      padding: 0.4em 0;
      border-bottom: 1px solid #4e4d4d;
      margin-top: 0.5em;
      min-width: 160px; }
    footer .content .box p {
      font-size: 14px;
      margin-top: 1.5em; }
      footer .content .box p a {
        display: block;
        margin-top: 1em; }
    footer .content .box:first-child {
      -webkit-flex: 0 0 25%;
      -moz-flex: 0 0 25%;
      -ms-flex: 0 0 25%;
      -o-flex: 0 0 25%;
      flex: 0 0 25%;
      -webkit-order: 0;
      -moz-order: 0;
      -ms-order: 0;
      -o-order: 0;
      order: 0; }
      footer .content .box:first-child .social_media {
        display: none; }
    footer .content .box:last-of-type ul li {
      border-bottom: none; }
    footer .content .box:last-of-type div {
      margin-top: 1rem; }
    footer .content .box:last-of-type i {
      margin-right: 10px;
      cursor: pointer; }
  @media only screen and (max-width: 900px) {
    footer .content .box {
      -webkit-flex: 0 47%;
      -moz-flex: 0 47%;
      -ms-flex: 0 47%;
      -o-flex: 0 47%;
      flex: 0 47%;
      -webkit-order: 0;
      -moz-order: 0;
      -ms-order: 0;
      -o-order: 0;
      order: 0; }
      footer .content .box:last-of-type {
        display: none; }
      footer .content .box:first-child {
        -webkit-flex: 0 100%;
        -moz-flex: 0 100%;
        -ms-flex: 0 100%;
        -o-flex: 0 100%;
        flex: 0 100%;
        -webkit-order: 0;
        -moz-order: 0;
        -ms-order: 0;
        -o-order: 0;
        order: 0;
        margin-bottom: 4rem; }
        footer .content .box:first-child .social_media {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -webkit-flex-flow: row wrap;
          -moz-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
          -o-flex-flow: row wrap;
          flex-flow: row wrap;
          margin-top: 2rem; }
        footer .content .box:first-child h3,
        footer .content .box:first-child p {
          text-align: center;
          max-width: 430px;
          margin: 0 auto; }
          footer .content .box:first-child h3 a,
          footer .content .box:first-child p a {
            display: inline-block;
            margin-top: 0em; }
    footer .content .copyright {
      font-size: 11px;
      text-align: center;
      margin-top: 4rem;
      line-height: 1.4em; } }
  @media only screen and (max-width: 600px) {
    footer .wrap {
      padding: 0 1rem; }
    footer .content {
      padding: 2rem 0 1rem; }
      footer .content .box {
        -webkit-flex: 0 100%;
        -moz-flex: 0 100%;
        -ms-flex: 0 100%;
        -o-flex: 0 100%;
        flex: 0 100%;
        -webkit-order: 0;
        -moz-order: 0;
        -ms-order: 0;
        -o-order: 0;
        order: 0;
        margin-top: 2rem; }
        footer .content .box:first-child {
          margin-bottom: 2rem; } }

.icon_round {
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-block;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin: 0 8px;
  cursor: pointer;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  -o-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; }
  .icon_round i {
    font-size: 1.1rem; }
  .icon_round.facebook:hover {
    background: #3b5998; }
  .icon_round.twitter:hover {
    background: #55acee; }
  .icon_round.instagram:hover {
    background: #d72c8a; }