body {
    background-color: black;
    color:white;
}

article {
    text-align: center;
}

article img {
    margin: 2rem 20% 2rem 20%;
    width: 40%;
    opacity: 50%;
}


*{margin:0;padding:0;}
ul,li{list-style:none;}
#slide{height:100%;position:relative;overflow:hidden;}
#slide ul{width:400%;height:100%;transition:1s;}
#slide ul:after{content:"";display:block;clear:both;}
#slide li{float:left;width:25%;height:100%;}
/* #slide li:nth-child(1){}
#slide li:nth-child(2){} */
#slide input{display:none;}
#slide label{display:inline-block;vertical-align:middle;width:10px;height:10px;border:2px solid #666;background:#fff;transition:0.3s;border-radius:50%;cursor:pointer;}
/* #slide .pos{text-align:center;position:absolute;bottom:10px;left:0;width:100%;text-align:center;} */
#pos1:checked~ul{margin-left:0%;}
#pos2:checked~ul{margin-left:-100%;}
#pos1:checked~.pos>label:nth-child(1){background:#666;}
#pos2:checked~.pos>label:nth-child(2){background:#666;}

body nav {
    border-top: whitesmoke;
    border-width: 1px;
    border-style: solid;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: black;
}

body nav #menu {
display: flex;
justify-content: space-between;
}

body nav #menu label{
    border-width: 1px;
    border-style: solid;
    flex-direction: column;
    text-align: center;
    width: 100%;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

body nav #menu .menu_box .block {
    display: block;
}

body nav #menu img{
    max-width: 3rem;
    border-width: 1px;
    border-style: solid;
}

body #columns #player {
    background-color: dimgray;
    width:98%;
    margin: 4px;
}

/*
  Black Player
*/
#player div#black-player {
    width: 100%;
    background-color: #333333;
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.12);
    font-family: "Lato", sans-serif;
    border-width: 1px;
    border-style: solid;
  }
  
   #player div#black-player-playlist {
    width: 100%;
    height: 250px;
    overflow-y: scroll; 
}

#player div#black-player-playlist::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

    #player div#black-player-controls {
    height: 130px; }
      #player div#black-player-controls div.black-player-controls-container {
      float: left;
      width: 100%;
      margin-top: 5px;
      margin-left: 20px;
      text-align: center; 
    }
      #player div#black-player-controls div.black-player-controls-container span.song-name {
        display: block;
        color: white;
        font-size: 14px;
        text-align: left; }
        #player div#black-player-controls div.black-player-controls-container span.song-album {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        text-align: left; }
        #player div#black-player-controls div.black-player-controls-container div#progress-container-black {
        margin-right: 40px;
        position: relative;
        height: 20px;
        cursor: pointer;
        margin-bottom: 6px;
        /*
          IE 11
        */ }
        #player div#black-player-controls div.black-player-controls-container div#progress-container-black:hover input[type=range].amplitude-song-slider::-webkit-slider-thumb {
          display: block; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black:hover input[type=range].amplitude-song-slider::-moz-range-thumb {
          visibility: visible; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-played-progress-black {
          width: 100%;
          position: absolute;
          left: 0;
          top: 8px;
          right: 0;
          width: 100%;
          z-index: 60;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          height: 3px;
          border-radius: 5px;
          background: transparent;
          border: none;
          /* Needed for Firefox */ }
        @media all and (-ms-high-contrast: none) {
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black *::-ms-backdrop, div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-played-progress-black {
            color: #FFFFFF;
            border: none;
            background-color: #E1E1E1; } }
        @supports (-ms-ime-align: auto) {
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-played-progress-black {
            color: #FFFFFF;
            border: none; } }
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-played-progress-black[value]::-webkit-progress-bar {
          background: none;
          border-radius: 5px; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-played-progress-black[value]::-webkit-progress-value {
          background-color: #8392ff;
          border-radius: 5px; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-played-progress-black::-moz-progress-bar {
          background: none;
          border-radius: 5px;
          background-color: #FFFFFF;
          height: 3px;
          margin-top: -2px; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-buffered-progress-black {
          position: absolute;
          left: 0;
          top: 8px;
          right: 0;
          width: 100%;
          z-index: 10;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          height: 3px;
          border-radius: 5px;
          background: transparent;
          border: none;
          background-color: #D7DEE3; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-buffered-progress-black[value]::-webkit-progress-bar {
          background-color: #E1E1E1;
          border-radius: 5px; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-buffered-progress-black[value]::-webkit-progress-value {
          background-color: #E1E1E1;
          border-radius: 5px;
          transition: width .1s ease; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-buffered-progress-black::-moz-progress-bar {
          background: none;
          border-radius: 5px;
          background-color: #E1E1E1;
          height: 3px;
          margin-top: -2px; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress::-ms-fill {
          border: none; }
  @-moz-document url-prefix() {
    #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-buffered-progress-black {
      top: 9px;
      border: none; } }
        @media all and (-ms-high-contrast: none) {
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black *::-ms-backdrop, div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-buffered-progress-black {
            color: #78909C;
            border: none; } }
        @supports (-ms-ime-align: auto) {
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black progress#song-buffered-progress-black {
            color: #78909C;
            border: none; } }
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range] {
          -webkit-appearance: none;
          width: 100%;
          margin: 7.5px 0;
          position: absolute;
          z-index: 9999;
          top: -7px;
          height: 20px;
          cursor: pointer;
          background-color: inherit;
          left: 0; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]:focus {
          outline: none; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]::-webkit-slider-runnable-track {
          width: 100%;
          height: 0px;
          cursor: pointer;
          box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
          background: #FFFFFF;
          border-radius: 0px;
          border: 0px solid #010101; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]::-webkit-slider-thumb {
          box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
          border: 1px solid #FFFFFF;
          height: 15px;
          width: 15px;
          border-radius: 16px;
          background: #FFFFFF;
          cursor: pointer;
          -webkit-appearance: none;
          margin-top: -7.5px; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]:focus::-webkit-slider-runnable-track {
          background: #FFFFFF; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]::-moz-range-track {
          width: 100%;
          height: 0px;
          cursor: pointer;
          box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
          background: #FFFFFF;
          border-radius: 0px;
          border: 0px solid #010101; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]::-moz-range-thumb {
          box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
          border: 1px solid #FFFFFF;
          height: 15px;
          width: 15px;
          border-radius: 16px;
          background: #FFFFFF;
          cursor: pointer; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]::-ms-track {
          width: 100%;
          height: 0px;
          cursor: pointer;
          background: transparent;
          border-color: transparent;
          color: transparent; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]::-ms-fill-lower {
          background: #003d57;
          border: 0px solid #010101;
          border-radius: 0px;
          box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]::-ms-fill-upper {
          background: #FFFFFF;
          border: 0px solid #010101;
          border-radius: 0px;
          box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]::-ms-thumb {
          box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
          border: 1px solid #FFFFFF;
          height: 15px;
          width: 15px;
          border-radius: 16px;
          background: #FFFFFF;
          cursor: pointer;
          height: 0px;
          display: none; }
        @media all and (-ms-high-contrast: none) {
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black *::-ms-backdrop, div#black-player-controls div.black-player-controls-container div#progress-container-black input[type="range"].amplitude-song-slider {
            padding: 0px; }
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black *::-ms-backdrop, div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range].amplitude-song-slider::-ms-thumb {
            height: 15px;
            width: 15px;
            border-radius: 10px;
            cursor: pointer;
            margin-top: -8px; }
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black *::-ms-backdrop, div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range].amplitude-song-slider::-ms-track {
            border-width: 15px 0;
            border-color: transparent; }
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black *::-ms-backdrop, div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range].amplitude-song-slider::-ms-fill-lower {
            background: #E1E1E1;
            border-radius: 10px; }
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black *::-ms-backdrop, div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range].amplitude-song-slider::-ms-fill-upper {
            background: #E1E1E1;
            border-radius: 10px; } }
        @supports (-ms-ime-align: auto) {
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range].amplitude-song-slider::-ms-thumb {
            height: 15px;
            width: 15px;
            margin-top: 3px; } }
            #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]:focus::-ms-fill-lower {
          background: #FFFFFF; }
          #player div#black-player-controls div.black-player-controls-container div#progress-container-black input[type=range]:focus::-ms-fill-upper {
          background: #FFFFFF; }
          #player div#black-player-controls div.black-player-controls-container div#shuffle-black {
        display: inline-block;
        width: 15px;
        height: 14px;
        cursor: pointer;
        vertical-align: middle;
        margin-right: 25px;
        margin-left: -16px; }
        #player div#black-player-controls div.black-player-controls-container div#shuffle-black.amplitude-shuffle-off {
          background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-playlists/black-shuffle-off.svg"); }
          #player div#black-player-controls div.black-player-controls-container div#shuffle-black.amplitude-shuffle-on {
          background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-playlists/black-shuffle-on.svg"); }
          #player div#black-player-controls div.black-player-controls-container div#previous-black {
        display: inline-block;
        height: 19px;
        width: 16px;
        cursor: pointer;
        background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-playlists/black-previous.svg");
        vertical-align: middle;
        margin-right: 10px; }
        #player div#black-player-controls div.black-player-controls-container div#play-pause-black {
        display: inline-block;
        width: 52px;
        height: 52px;
        cursor: pointer;
        vertical-align: middle;
        margin-right: 10px; }
        #player div#black-player-controls div.black-player-controls-container div#play-pause-black.amplitude-paused {
          background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-playlists/black-play.svg"); }
          #player div#black-player-controls div.black-player-controls-container div#play-pause-black.amplitude-playing {
          background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-playlists/black-pause.svg"); }
          #player div#black-player-controls div.black-player-controls-container div#next-black {
        display: inline-block;
        height: 19px;
        width: 16px;
        cursor: pointer;
        background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-playlists/black-next.svg");
        vertical-align: middle;
        margin-right: 25px; }
        #player div#black-player-controls div.black-player-controls-container div#repeat-black {
        display: inline-block;
        width: 15px;
        height: 16px;
        cursor: pointer;
        vertical-align: middle; }
        #player div#black-player-controls div.black-player-controls-container div#repeat-black.amplitude-repeat-off {
          background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-playlists/black-repeat-off.svg"); }
          #player div#black-player-controls div.black-player-controls-container div#repeat-black.amplitude-repeat-on {
          background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/multiple-playlists/black-repeat-on.svg"); }

          #player div.black-player-song {
    border-bottom: 1px solid #979797; }
    #player div.black-player-song img {
      height: 52px;
      width: 52px;
      float: left; }
      #player div.black-player-song div.song-meta-container {
      width: calc( 100% - 62px );
      float: left;
      padding-left: 10px; 
      margin-top: 5px;
    }
      #player div.black-player-song div.song-meta-container span.individual-song-name {
        display: block;
        color: white;
        font-size: 14px;
        font-weight: bold; }
        #player div.black-player-song div.song-meta-container span.individual-song-artist {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px; }
        #player div.black-player-song.amplitude-active-song-container div.song-meta-container span.individual-song-name {
      color: #c2c8f6; }
  
      #player div.black-player-song::after {
    content: "";
    display: table;
    clear: both; }
  
  /*
    3. Layout
  */
  
    body #player div.example-container {
      width: 100%;
      display: flex; }
      body div.example-container div.right {
        width: 100%;
        display: flex;
        flex-wrap: wrap; }
    body #player span.playlist-title {
      display: block;
      padding-top: 10px;
      padding-bottom: 10px;
      text-align: center;
      font-size: 30px;
      color: white;
      font-weight: bold;
      font-family: "Lato", sans-serif;
      width: 100%; }
  
  /* @media screen and (max-width: 39.9375em) {
    body #player div.example-container {
      flex-direction: column; }
      body #player div.example-container div.left {
        width: 100%; }
      body #player div.example-container div.right {
        width: 100%; } }
  @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    body #player div.right {
      padding-left: 20px; } } */

  /*
    4. Pages
  */
  /*
    5. Themes
  */
  /*
    6. Utils
  */
  /*
    7. Vendors
  */
  /*
    8. Animations
  */
  #player .slide-in-top {
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
  
  /* ----------------------------------------------
   * Generated by Animista on 2019-3-25 18:39:54
   * w: http://animista.net, t: @cssanimista
   * ---------------------------------------------- */
  /**
   * ----------------------------------------
   * animation slide-in-top
   * ----------------------------------------
   */
  @-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      opacity: 0; }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1; } }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      opacity: 0; }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1; } }
      #player .slide-out-top {
    -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; }
  
  /* ----------------------------------------------
   * Generated by Animista on 2019-3-25 18:45:17
   * w: http://animista.net, t: @cssanimista
   * ---------------------------------------------- */
  /**
   * ----------------------------------------
   * animation slide-out-top
   * ----------------------------------------
   */
  @-webkit-keyframes slide-out-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1; }
    100% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      opacity: 0; } }
  @keyframes slide-out-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1; }
    100% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      opacity: 0; } }
  


#columns{
    column-width:350px;
    column-gap: 10px;
    margin-bottom: 6rem;
  }
  #columns figure{
    display: inline-block;
    border:1px solid rgba(0,0,0,0.2);
    margin:0;
    margin-bottom: 15px;
    padding:2px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);;
    cursor: pointer;
  }
  #columns figure img{
    width:100%;
  }
  #columns figure figcaption{
    border-top:1px solid rgba(0,0,0,0.2);
    padding:10px;
  }