/* Album V2 >> Preview */

.main_container  { padding-top: 20px; }

.preview_page { width: 100%;}

h2.preview_heading { color: white;}
.albumBG { width:360px;}

h1.artist {
     color: #eae9e7; 
}

h2.album a {
    color: #eae9e7;
}

.preview_title {
    color:white;
}

.album_banner {
    position: relative;
    background-size: cover;
    overflow: hidden;
    clear: both;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: 0;
}

.centered-preview-content {
    width: 750px;
    margin: auto;
}

.album_preview_container {
    /*width:360px;*/
    text-align:left;
}

.album_background {
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}

.album-img-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.button_download  {
    margin: 0;
    width: 100%;
}

.button_tip {
    margin:0;
}

.album-details{
    background-color: white;
    float: right;
    z-index: 1;
    opacity: 0.97;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.8;
    border-radius: 4px;
    width: 100%;
    height:250px;
}

.album-details.color_tomato > div {
    padding: 40px 20px;
}

.album-details.color_tomato > div > * {
    margin-bottom:20px;
}

.album-details.color_tomato > div > h3 > a {
    color: #c64500;
    font-weight: 400;
    font-family: 'Merriweather Sans', sans-serif;
    font-style: normal;
    margin-bottom: 5px;
    line-height: 120%;
}

.similar-artists a {
    display:block;
    color: #c64500;
    display: inline;
    text-decoration: none;
}

.album_preview_cover {
    -webkit-box-shadow: 0 2px 5px .3px rgba(0,0,0,.10),0 6px 6px 0 rgba(0,0,0,.10) !important;
    box-shadow: 0 2px 5px .3px rgba(0,0,0,.10),0 6px 6px 0 rgba(0,0,0,.10) !important;
    width: 360px;
}


.album-player-active, .album-player-hover { opacity: 0.1 }

/*.album-img-container div.jp-controls {
    display:none;
}

.album-img-container:hover div.jp-controls {
    display:inline-block;
}*/


.album-img-container .jp-container {
    text-align:center;
}

.album-img-container .jp-container .jp-controls {
    opacity: 1; 
    z-index: 500;
    top: 50%;
    left:0;
    right:0;
    position: absolute;
    transform: translateY(-50%);
}

.album-img-container .jp-container .jp-controls button {
  overflow: hidden;
  text-indent: -9999px;
  border: none;
  cursor: pointer; }

.col_album_social { margin-top: 10px; margin-bottom: 0px;}

/* Album Page */

h1.artist { font-size: 1.5em; float:left;margin-bottom: 0px;}
h2.album { font-size: 1em; float:left;}
h2.preview_title { font-size: 1.5em; }

.col_album_stream {
    margin-top: 20px !important;
    font-size:.9em;
    display:inline-block;
    margin-bottom:0%; 
}

.col_stream_album_name { 
    margin-top:0px;
    margin-bottom:0px; 
}

.col_stream_album_name h1, 
.col_stream_album_name  h2 a {
    color: #eae9e7;
}

.col_meta { 
    width:auto; 
    border-top: 1px solid #c64500;
    padding: 20px;
    background-color: white;
    margin: 10px 0px;
    border-radius: 4px;
}

.col_meta h3,
.col_meta h3 a { 
    color: #c64500 !important;
    font-size: 1.1em;
    font-weight: 400; 
    font-family: 'Oswald', sans-serif; 
    font-style: normal; 
    margin: 0px 0 8px 0; 
    line-height: 110%; 
    text-transform: uppercase; 
}

.col_meta h3.divider {
    border-top: 1px solid #c64500;
}

.col_meta p { 
    line-height: 22px; 
    font-size: 12px; 
    width: 90%;
    color: #5a5856;
}

.col_meta ul.similar-artists a {
    line-height: 22px;
    font-size: 12px;
    width: 90%;
    color: #5a5856;
    display: inline;
    text-decoration: none;
}

ul.connect li a, ul.buy li a {
    color: #5a5856 !important;
    text-decoration:underline;
}

/* Album V2 >> Social*/

.album_social a {
    content: "";
    display:inline;
    margin:5px;
    background: url('/images/sprite3.png') no-repeat;
    background-size: 160px 700px;
    float: left;
    height: 20px;
}

.album_social a.fb {
    background: url('/images/facebook-stream.png') no-repeat;
    width: 28px;
    height: 28px;
    background-size: 28px;
}
.album_social a.tw {
    background: url(/images/twitter-stream.png) no-repeat;
    width: 28px;
    height: 28px;
    background-size: 28px;
    position: relative;
    top: 3px;
}
.album_social a.fv {
    background-image: url('/images/unfavorited-stream.png');
    width: 28px;
    height: 28px;
    background-size: 28px;
    position: relative;
}

.album_social a.ig {
    background: url('/images/instagram-stream.png') no-repeat;
    width: 28px;
    height: 28px;
    background-size: 28px;
}

.album_social a.favorite {
    background-image: url('/images/favorite-stream.png');
}

.album_social a.unfavorite {
    background-image: url('/images/unfavorited-stream.png');
}

.col_album_playlist { 
    display:block; 
    width:auto; 
    border-top: 1px solid #c64500;
    /*padding: 20px;*/
    background-color: white;
    margin: 10px 0px;
    border-radius: 4px;
}
.col_mobile_album_playlist { display:none; }

.main_album_controls {
    width: 110px;
    float: left;
    height: 40px;
}

.main_album_controls.jp-controls button {
  overflow: hidden;
  text-indent: -9999px;
  border: none;
  cursor: pointer; 
}

.jp-progress-holder { 
    width:100%;
    position:relative;     
    width: calc(100% - 110px);
    float: right;
    height: 40px;
}

.jp-progress { 
    background-color: white;
    width: 100%;
    height: 37px;
    padding: 0;
    margin: 0 0 0 0; 
    overflow:hidden; 
    position:absolute; 
    z-index:1; 
    border:0px solid #000; 
    display: block;
}

.jp-play-bar {
    background-color: #c64500;
    width: 0px;
    height: 3px;
}

.jp-status {
    width: 100%;
    position: relative;
    left: 110px;
    font-size: .8em;
    line-height: 0px;
}

.jp-status-preview {
    z-index: 500;
    top: 70%;
    left: 0;
    right: 0;
    position: absolute;
    transform: translateY(-50%);
    color: #c64500;
    font-size: 1.2em;
    font-weight: bold;
    display:none;
}

/*#preview_title {
    padding-top: 25px;
}*/

.jp-playlist { position:relative;z-index:2; }
.jp-playlist ul { font-weight:400; list-style-type:none; margin:0; padding:0; }
.jp-playlist li { border-top:0px solid #c8c8c8; border-bottom:1px solid #dadada; font-size: .9em; display:block; height:36px;overflow:hidden;line-height:250%; padding-left:10px; }
.jplayer-num { float:left; width:22px; text-align:center; margin-left:0px;margin:0 10px 0 8px;font-weight:400;color:#928e88; }

div.jp-type-playlist div.jp-playlist li:first-child { border-top:1px solid #dadada; }
div.jp-type-playlist div.jp-playlist a { font-weight:400; text-decoration:none; color: #444; display:block; padding:3px 0; outline:none; }
div.jp-type-playlist div.jp-playlist a:hover { color: #c64500; }
div.jp-type-playlist div.jp-playlist li.jp-playlist-current { }
div.jp-type-playlist div.jp-playlist li.jp-playlist-current a{ color: #c64500; }



.album_info_panel { 
    width:auto; 
    border-top: 1px solid #c64500;
    padding: 20px;
    background-color: white;
    margin: 10px 0px;
    border-radius: 4px;
    min-height: 250px;

}

.album_text_color {
    color: #5a5856;
}

.panel_connect_info {
    width: 49%;
    float:left;
}

.album_info_panel p {
    line-height: 22px;
    font-size: 14px;
    width: 90%;
    color: #5a5856;
}

.album_info_panels h3 a { cursor: pointer; }

.video_wrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    margin-bottom: 20px;
    height: 0;
    width: auto;
    border-top: 1px solid #c64500;
    background-color: white;
    margin: 10px 0px;
    border-radius:4px;
}

ul.connect {
     border-bottom: none; 
     padding-bottom: 20px;
     width: 100%; 
}

.col.col_album_sidebar {
    margin-top: 72px;
}


a.pledge_button span {
    margin:0px 0 1px -110px;
}

.col_trending {
    width: 280px;
    border-top: 1px solid #c64500;
    padding: 10px;
    background-color: white;
    margin: 10px 0px;
    border-radius: 4px;
}

.col_trending_preview {
    border-top: 1px solid #c64500;
    padding: 10px;
    background-color: white;
    border-radius: 4px;
    margin-bottom:20px;
}

#vertical-ticker {
    height:525px;
}

@media only screen and (max-width: 500px) and (min-width: 0px) {  

	.col_trending { width:auto;}
	.col_trending_preview { width:auto;}

}

/* =============== AlbumStream > JPLAYER =============== */
.jp-controls button {
  overflow: hidden;
  text-indent: -9999px;
  border: none;
  cursor: pointer; }

.jp-play, .jp-pause {
  width: 40px;
  height: 40px; }

.jp-play {
  background: url("../../images/noisetrade.player.icons.png") -41px 0 no-repeat; 
  background-size: 200px;
}

.jp-play:focus {
  background: url("../../images/noisetrade.player.icons.png") 0 0 no-repeat;
      background-size: 200px;
}


.jp-pause {
      background: url(../../images/noisetrade.player.icons.png) -41px -42px no-repeat;
    background-size: 200px;
}

.jp-pause:focus {
  background: url("../../images/noisetrade.player.icons.png") 0px -42px no-repeat; 
  background-size: 200px;
}

.jp-stop, .jp-previous, .jp-next {
  width: 28px;
  height: 28px;
  margin-top: 6px; 
  background-size: 400px;
}

.jp-stop {
  background: url("../../images/noisetrade.player.icons.png") -29px -83px no-repeat;
  margin-left: 10px; }

.jp-stop:focus {
  background: url("../../images/noisetrade.player.icons.png") 0px -83px no-repeat; }

.jp-previous {
  background: url("../../images/noisetrade.player.icons.png") -29px -112px no-repeat; 
  background-size: 200px;
}

.jp-previous:focus {
  background: url("../../images/noisetrade.player.icons.png") 0px -112px no-repeat; 
  background-size: 200px;
}

.jp-next {
  background: url("../../images/noisetrade.player.icons.png") -29px -141px no-repeat; 
  background-size: 200px;
}

.jp-next:focus {
  background: url("../../images/noisetrade.player.icons.png") 0px -141px no-repeat; 
  background-size: 200px;
}

.jp-progress-holder > .jp-custom.jp-progress {
    top: 14px;
    height: 10px;
    overflow: hidden;
    background-color: #ddd;
}

.jp-progress-holder > .jp-custom > .jp-seek-bar {
    background: url(../../images/noisetrade.player.icons.png) 0 -404px repeat-x;
    width: 0;
    height: 100%;
    cursor: pointer;
}

.jp-progress-holder > .jp-custom > .jp-seek-bar > .jp-play-bar {
  background: url("../../images/noisetrade.player.icons.png") 0 -436px repeat-x;
  width: 0px;
  height: 100%; 
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .jp-play {
        background: url("../../images/noisetrade.player.icons.2x.png") -41px 0 no-repeat; 
        background-size: 200px;
    }

    .jp-play:focus {
        background: url("../../images/noisetrade.player.icons.2x.png") 0 0 no-repeat; 
        background-size: 200px;}


    .album-hover-class  .jp-play:focus {
        background: url("../../images/noisetrade.player.icons.2x.png") 0 0 no-repeat; 
        background-size: 400px;}

    .jp-pause {
        background: url("../../images/noisetrade.player.icons.2x.png") -41px -42px no-repeat; 
        background-size: 200px;}

    .jp-pause:focus {
        background: url("../../images/noisetrade.player.icons.2x.png") 0 -42px no-repeat; 
        background-size: 200px;}

    .jp-stop {
      background: url("../../images/noisetrade.player.icons.2x.png") -29px -83px no-repeat; 
        background-size: 200px;}

    .jp-stop:focus {
      background: url("../../images/noisetrade.player.icons.2x.png") 0 -83px no-repeat; 
        background-size: 200px;}

    .jp-previous {
      background: url("../../images/noisetrade.player.icons.2x.png") -29px -112px no-repeat; 
        background-size: 200px;}

    .jp-previous:focus {
      background: url("../../images/noisetrade.player.icons.2x.png") 0 -112px no-repeat; 
        background-size: 200px;}

    .jp-next {
      background: url("../../images/noisetrade.player.icons.2x.png") -29px -141px no-repeat; 
        background-size: 200px;}

    .jp-next:focus {
      background: url("../../images/noisetrade.player.icons.2x.png") 0 -141px no-repeat; 
        background-size: 200px;}

    .jp-progress-holder > .jp-custom > .jp-seek-bar {
        background: url(../../images/noisetrade.player.icons.2x.png) 0 -202px repeat-x;
        background-size: 200px;
    }

    .jp-progress-holder > .jp-custom > .jp-seek-bar > .jp-play-bar {
      background: url("../../images/noisetrade.player.icons.2x.png") 0 -218px repeat-x;
        background-size: 200px;
    }

}


/*Artist CSS*/

.artist_center {
    width: 70%;
    margin: 0 0 1% 2%;
    text-align:left;
}


/*Preview Rework*/

.preview-left-column{
    float: left;
    width: 360px;
}

.preview-right-column{
    float: right;
    width: 360px;
    margin-left: 30px;
}

.preview_btn_container{
    text-align:center; 
    margin: 0px 100px;
}

/* Preview/Artist media queries */

@media only screen and (max-width: 750px) and (min-width: 0px) {  

	.artist_center { width:auto;}

    .centered-preview-content {
        width: 360px;
    }

    .preview-right-column {
         margin: 20px 0px 0px 0px
    }

    .preview_btn_container {
        margin: 0px 0px;
    }

}