.transition {
  transition: all 0.3s ease-out;
}

/* SOUNDCLOUD PLAYER *
-----------------------------------------------*/
.sc-player {
  position: relative;
  *zoom: 1;
}

@media screen and (min-width: 38em) {
	.sc-player {
			width: 320px;
  		padding: 0;
  		float: right;
	}
}

@media (max-width: 768px) {
		.sc-player {
			margin-top: 70px;
		}
}


.sc-player a {
  text-decoration: none;
  color: #fff;
}
.sc-player ol,
.sc-player li {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
/* Artworks */
.sc-player .sc-artwork-list {
  display: none;
  float: left;
  width: 40%;
  margin-bottom: 3%;
  background-color: transparent;
  list-style-type: none;
  position: relative;
  height: 100%;
}
.sc-player .sc-artwork-list li {
  list-style-type: none;
  display: none;
}
.sc-player .sc-artwork-list li.active {
  list-style-type: none;
  display: block;
}
.sc-player .sc-artwork-list li img,
.sc-player .sc-artwork-list li div {
  list-style-type: none;
  width: 100%;
  height: auto;
}
/* controls */
.sc-player .sc-controls {
  display: block;
  float: left;
}
.sc-player .sc-controls a {
  text-indent: -9999px;
  content: '';
  display: block;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: relative;
  transition: all 0.3s ease-out;
}
@media screen and (min-width: 38em) {
  .sc-player .sc-controls a {
    width: 30px;
    height: 30px;
  }
}
.sc-player .sc-controls a:hover {
  background: #9c3538;
  background: rgba(19, 19, 19, 0.22);
}
.sc-player .sc-controls a:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -35px;
  z-index: 1;
  background: url('http://nicholaspetersen.is/wp-content/themes/v3/images/play.png');
  background-position: top;
  background-size: 50px auto;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
@media screen and (min-width: 38em) {
  .sc-player .sc-controls a:after {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    background-size: 30px auto;
  }
}
.sc-player .sc-controls a.sc-pause:after {
  background-position: bottom;
}
.sc-scrubber .sc-time-indicators {
  background: #9c3538;
  background: rgba(19, 19, 19, 0.22);
  color: #fff;
  border-radius: 4px;
  padding: 7px;
  text-align: right;
}
.sc-player .sc-controls a.sc-pause {
  display: none;
}
.sc-player.playing .sc-controls a.sc-play {
  display: none;
}
.sc-player.playing .sc-controls a.sc-pause {
  display: block;
}
/* scrubber */
.sc-scrubber {
  position: relative;
  float: right;
  width: 100%;
  margin: 0.5em 0;
  border-radius: 4px;
  display: none;	
}
.sc-scrubber .sc-time-span {
  height: 100px;
  position: relative;
}
.sc-scrubber .sc-buffer,
.sc-scrubber .sc-played {
  height: 100px;
  position: absolute;
  top: 0;
}
.sc-scrubber .sc-time-indicators {
  position: absolute;
  right: 0;
  top: -48px;
}
.sc-scrubber .sc-time-span {
  border-radius: 4px;
  overflow: hidden;
}
.sc-scrubber .sc-volume-slider {
  background-color: #bf3d3f;
  background-color: rgba(19, 19, 19, 0.12);
  border-radius: 2px;
}
.sc-scrubber .sc-volume-slider .sc-volume-status {
  background-color: #9c3538;
  background-color: rgba(19, 19, 19, 0.22);
  border-right: 1px solid #9c3538;
  border-right: 1px solid rgba(19, 19, 19, 0.22);
}
.sc-scrubber .sc-waveform-container {
  z-index: 800;
  width: 100%;
  position: absolute;
}
.sc-scrubber .sc-time-span img {
  height: 100px;
  width: 100%;
  border-radius: 4px;
}
.sc-scrubber .sc-buffer {
  background: #bf3d3f;
  background: rgba(19, 19, 19, 0.12);
  z-index: 1;
  position: absolute;
}
.sc-scrubber .sc-played {
  background: #9c3538;
  background: rgba(19, 19, 19, 0.22);
  z-index: 799;
}
/* volume control */
.sc-volume-slider {
  top: -35px;
  left: 0px;
  position: absolute;
  width: 150px;
  height: 20px;
  background-color: white;
}
.sc-volume-slider .sc-volume-status {
  position: absolute;
  width: 0%;
  height: 20px;
  top: 0;
  left: 0;
}
/* tracks */
/* Track listings*/
.sc-player ol.sc-trackslist {
  position: relative;
  width: 100%;
  overflow: auto;
  float: right;
  font-size: 12px;	
}
@media screen and (max-width: 610px) {
	.sc-player ol.sc-trackslist {
		margin-top: 30px;	
	}
}

@media screen and (max-width: 360px) {
	.sc-player ol.sc-trackslist {
		font-size: 	11px;
	}
}

.sc-player ol.sc-trackslist li {
  width: 100%;
  cursor: pointer;
  margin-bottom: 0.5em;
  padding: 10px;
  color: white;
  border-radius: 4px;
  transition: background 0.3s ease-in;
  text-align: left;
}

.sc-player ol.sc-trackslist li a {
	color: #fff;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 38em) {
	.sc-player ol.sc-trackslist {
		width: 85%;
	}

  .sc-player ol.sc-trackslist li {
    padding: 5px;
  }
}
.sc-player ol.sc-trackslist li:last-child {
  margin-bottom: 0;
}
.sc-player ol.sc-trackslist li a {
  font-size: 1.125em;
}
@media screen and (min-width: 38em) {
  .sc-player ol.sc-trackslist li a {
    font-size: 1em;
  }
}
.sc-player ol.sc-trackslist li:hover {
  background: #9c3538;
  background: rgba(19, 19, 19, 0.22);
}
.sc-player ol.sc-trackslist li.active {
  background: rgba(255,255,255, .2);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.sc-player ol.sc-trackslist li.active a {
  color: #fff;
}
.sc-track-duration {
  float: right;
}

/* Track info*/
.sc-player .sc-info {
  position: relative;
  margin-bottom: 2em;
  padding: 1% 3%;
  display: none;	
}
@media screen and (min-width: 38em) {
  .sc-player .sc-info {
    margin-top: 1em;
    margin-bottom: 3em;
  }
}
.sc-player .sc-info h3 {
  font-size: 2em;
  margin-bottom: 0.5em;
}
.sc-player .sc-info h4 {
  display: none;
}
.sc-player .sc-info .sc-info a {
  color: #fff;
}
.sc-player .sc-info-toggle,
.sc-player .sc-info-close {
  display: none;
}
/* utilities */
.sc-player-engine-container {
  width: 1px;
  height: 1px;
  position: fixed;
  top: 2px;
  left: 2px;
}
.sc-player .sc-info-toggle {
  background: #22B573;
  color: #fff;
  border-radius: 4px;
  padding: 4px;
}
.sc-player .sc-info-toggle:hover {
  background: #333;
  color: #fff;
}
.sc-player .sc-info-close {
  background: #22B573;
  border-radius: 4px;
  padding: 2px 4px;
  font-weight: bold;
}