@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-bold-webfont.woff2') format('woff2'); font-weight: bold; }
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-bold-webfont.woff') format('woff'); font-weight: bold;}
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-italic-webfont.woff2') format('woff2'); font-style: italic; }
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-italic-webfont.woff2') format('woff2'); font-style: italic; }
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-roman-webfont.woff') format('woff');}
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-roman-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-semibold-webfont.woff2') format('woff2'); font-weight: 300; }
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-semibold-webfont.woff') format('woff'); font-weight: 300; }
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-semibolditalic-webfont.woff2') format('woff2'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Crimson';
             src: url('Fonts/crimson-semibolditalic-webfont.woff') format('woff'); font-weight: 300; font-style: italic; }


@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-bold-webfont.woff2') format('woff2'); font-weight: bold; }
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-bold-webfont.woff') format('woff'); font-weight: bold; }
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-extrabold-webfont.woff2') format('woff2'); font-weight: 800; }
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-extrabold-webfont.woff') format('woff'); font-weight: 800; }
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-italic-webfont.woff2') format('woff2'); font-style: italic; }
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-italic-webfont.woff') format('woff'); font-style: italic; }
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-light-webfont.woff2') format('woff2'); }
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-light-webfont.woff') format('woff'); }
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-semibold-webfont.woff2') format('woff2'); font-weight: 300}
@font-face { font-family: 'opensans';
             src: url('Fonts/opensans-semibold-webfont.woff') format('woff'); font-weight: 300}




html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

html, body {
  font-family: "crimson", serif !important;
  width: 100%;
  margin: 0;
  padding: 0;
/*    background: black;*/
}


html .card, body .card {
  height: 48em;
  position: relative;
  width: 25em;
  margin: 0 auto;
/*  border-radius: 10px; */
  margin-top: 1em;
  background: #a588db;
  box-shadow: 0px 0px 20px 5px rgb(0 0 0 / 0.2);
  font-family: "futura-pt", serif !important;
    font-variant: small-caps;
    overflow: hidden;
}

html {
background-image: url("../images/background.png"); 
      /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-repeat: no-repeat;
  background-size: cover;
}


@media (max-width: 600px) {
html .card, body .card {
      background: #f47227;
      width: 22em;
    }
}


html .card .apple-stuff .date, body .card .apple-stuff .date {
  display: inline;
  position: absolute;
  font-family: Crimson;
  left: 50%;
  font-weight: 300;
  font-size: 0.8em;
  margin-top: -0.8em;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

html .card .picture-section h3, body .card .picture-section h3 {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9em;
  letter-spacing: 0.1em;
  margin-top: 0.3em;
  font-weight: 300;
}
html .card .picture-section .band, body .card .picture-section .band {
  background: url("../images/player.jpg") no-repeat top center;
  background-size: cover;
  width: 100%;
  height: 24em;
  -webkit-filter: brightness(100%) opacity(100%);
  filter: brightness(100%) opacity(100%);
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  transition: 0.4s;
}
html .card .picture-section .band:hover, body .card .picture-section .band:hover {
  -webkit-filter: brightness(70%) opacity(100%) blur(1px);
  filter: brightness(70%) opacity(100%) blur(1px);
}
html .card .picture-section .band .overlay, body .card .picture-section .band .overlay {
  background-color: rgba(255, 255, 255, 0.4);
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.4) 70%, #292c35);
  background-image: linear-gradient(rgba(255, 255, 255, 0.4) 70%, #292c35);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  height: 48%;
  width: 100%;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  transition: 0.7s;
}
html .card .picture-section .band .overlay.active, body .card .picture-section .band .overlay.active {
  opacity: 1;
  -webkit-transition: 1.3s;
  -moz-transition: 1.3s;
  transition: 1.3s;
}
html .card .slider, body .card .slider {
  position: relative;
  z-index: 100;
  background: black;
  border: none;
  border-radius: 0px;
  height: 5px;
  width: 100%;
  cursor: pointer;
}
html .card .slider .ui-slider-range, body .card .slider .ui-slider-range {
  background: #769778;
	height: 100%;
}
html .card .slider .ui-slider-handle, body .card .slider .ui-slider-handle {
  width: 3px;
  margin-left: 0px;
  height: 15px !important;
  top: 1px;
}
html .card .slider .ui-slider-handle:focus, body .card .slider .ui-slider-handle:focus {
  outline: none;
  background: white;
}
html .card .time, body .card .time {
  position: relative;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8em;
  font-weight: 300;
  padding: 2%;
}
html .card .time .start, body .card .time .start {
  display: inline-block;
}
html .card .time .end, body .card .time .end {
  display: inline-block;
  margin-left: 25.5em;
}
html .card .song-title, body .card .song-title {
  text-align: center;
  margin-top: -0.4em;
}
html .card .song-title .artist, body .card .song-title .artist {
  color: rgba(255, 255, 255, 0.8);
}
html .card .song-title .song, body .card .song-title .song {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  font-size: 0.9em;
  margin-top: 0.1em;
}
html .card .playlist-controls, body .card .playlist-controls {
  text-align: center;
  margin-top: 1.8em;
  -webkit-transition: 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.1);
  -moz-transition: 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.1);
  transition: 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.1);
}
html .card .playlist-controls.active, body .card .playlist-controls.active {
  margin-top: -13em;
  -webkit-transition: 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.1);
  -moz-transition: 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.1);
  transition: 0.7s cubic-bezier(0.87, -0.41, 0.19, 1.1);
}
html .card .playlist-controls.active .circle, body .card .playlist-controls.active .circle {
  top: 13.5em;
  background: rgba(255, 255, 255, 0.03);
}

html .card .playlist-controls #backward, body .card .playlist-controls #backward {
  margin-left: 2em;
  margin-right: 2em;
  color: #8e8f93;
  font-size: 1.5em;
  position: relative;
  z-index: 5;
  cursor: pointer;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
}
html .card .playlist-controls #backward:hover, body .card .playlist-controls #backward:hover {
  color: rgba(255, 255, 255, 0.8);
}
html .card .playlist-controls .play-song, body .card .playlist-controls .play-song {
  display: inline-block;
}
html .card .playlist-controls .play-song #play, body .card .playlist-controls .play-song #play {
  font-size: 2em;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 5;
  left: 0px;
  top: 2px;
  cursor: pointer;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
}
html .card .playlist-controls .play-song #play:hover, body .card .playlist-controls .play-song #play:hover {
  color: black;
}
html .card .playlist-controls #forward, body .card .playlist-controls #forward {
  margin-left: 2em;
  margin-right: 2em;
  color: #8e8f93;
  font-size: 1.5em;
  cursor: pointer;
  position: relative;
  z-index: 5;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
}
html .card .playlist-controls #forward:hover, body .card .playlist-controls #forward:hover {
  color: rgba(255, 255, 255, 0.8);
}
html .card .song-list, body .card .song-list {
  width: 100%;
  position: absolute;
  height: 30em;
  bottom: -63%;
  z-index: 100;
  background: #f47227;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  transition: 0.7s;
}

@media (max-width: 600px) {
html .card .song-list, body .card .song-list {
  background: #f47227;
}
}



html .card .song-list.active, body .card .song-list.active {
  bottom: 0%;
}
html .card .song-list .line, body .card .song-list .line {
  width: 95%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: 2.2em;
}
html .card .song-list .line.two, body .card .song-list .line.two {
  margin-top: 4em;
}
html .card .song-list .line.three, body .card .song-list .line.three {
  margin-top: 5.8em;
}
html .card .song-list .line.four, body .card .song-list .line.four {
  margin-top: 7.6em;
}
html .card .song-list .line.two, body .card .song-list .line.five {
  margin-top: 9.4em;
}
html .card .song-list .line.three, body .card .song-list .line.six {
  margin-top: 11.2em;
}
html .card .song-list .line.four, body .card .song-list .line.seven {
  margin-top: 13em;
}
html .card .song-list .line.three, body .card .song-list .line.eight {
  margin-top: 14.8em;
}
html .card .song-list .line.four, body .card .song-list .line.nine {
  margin-top: 16.6em;
}
html .card .song-list .line.two, body .card .song-list .line.ten {
  margin-top: 18.4em;
}
html .card .song-list .line.three, body .card .song-list .line.eleven {
  margin-top: 20.2em;
}
html .card .song-list .line.four, body .card .song-list .line.twelve {
  margin-top: 22em;
}

html .card .song-list table, body .card .song-list table {
  color: rgba(255, 255, 255, 0.55);
  padding: 0 2%;
  position: relative;
}
html .card .song-list table .line, body .card .song-list table .line {
  width: 80%;
  height: 5px;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 10000;
}
html .card .song-list table tr, body .card .song-list table tr {
  cursor: pointer;
}
html .card .song-list table tr:hover td, body .card .song-list table tr:hover td {
  color: black;
}
html .card .song-list table tr td, body .card .song-list table tr td {
  padding-top: 0.5em;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
}
html .card .song-list table tr .num, body .card .song-list table tr .num {
  font-size: 0.7em;
  position: relative;
  top: 3px;
  font-weight: 300;
}
html .card .song-list table tr .title, body .card .song-list table tr .title {
  padding-left: 3em;
  display: inline-block;
  color: rgba(255, 255, 255, 0.8);
  width: 300px;
  font-weight: 300;
}
html .card .song-list table tr .length, body .card .song-list table tr .length {
  padding-left: 4em;
  font-size: 0.7em;
  position: relative;
  top: 5px;
  font-weight: 300;
}
html .card .volume i, body .card .volume i {
  display: inline-block;
  position: absolute;
  color: rgba(255, 255, 255, 0.3);
  margin-top: -0.5em;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}
html .card .volume i:hover, body .card .volume i:hover {
  color: rgba(255, 255, 255, 0.8);
}
html .card .volume i#volume-off, body .card .volume i#volume-off {
  margin-left: 6.5em;

}
html .card .volume i#volume-up, body .card .volume i#volume-up {
  margin-left: 17.7em;
}

@media (max-width: 600px) {
html .card .volume i#volume-up, body .card .volume i#volume-up {
  margin-left: 16.1em;
}
}

@media (max-width: 600px) {
html .card .volume i#volume-off, body .card .volume i#volume-off {
  margin-left: 5.5em;
}
}


html .card .volume .slider-volume, body .card .volume .slider-volume {
  position: relative;
  z-index: 10;
  background: white;
  border: none;
  border-radius: 0px;
  height: 3px;
  width: 35%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: 2em;
}
html .card .volume .slider-volume .ui-slider-range, body .card .volume .slider-volume .ui-slider-range {
  background: white;
	height: 100%;
} 


html .card .volume .slider-volume .ui-slider-handle, body .card .volume .slider-volume .ui-slider-handle {
  display: none;
}
html .card .volume .slider-volume .ui-slider-handle:focus, body .card .volume .slider-volume .ui-slider-handle:focus {
  outline: none;
  background: white;
}
html .card .slide-up, body .card .slide-up {
  position: absolute;
  bottom: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 1000;
}
html .card .slide-up i, body .card .slide-up i {
  margin-left: 50%;
  font-size: 1.3em;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
html .card .slide-up i:hover, body .card .slide-up i:hover {
  color: black;
}

.social {
  text-align: center;
  margin-top: 3em;
}
.social i {
  color: rgba(255, 255, 255, 0.8);
  margin-left: 1em;
  margin-right: 1em;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
}
.social i:hover {
  color: black;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}

.social img {width: 100px;
padding: 15px 5px;}
.container {
    background-color: black;
}
.social img:hover {opacity: 0.6;
}

.social img {
	max-width: 15% !important;
}

@media (min-width: 800px) {
	.mobile {display: none;}
}