#artist #narrative{width: 100%;padding-bottom:40px;}
#coverImageOuter{position: relative;}
#coverImageOptionsContainer{position:absolute;top:10px;right:10px;background-color:#444;padding:8px;color:#fff;}
#coverImageOptionsContainer i{color:#357AE8;width:30px}
.menuOptionContainer{cursor:pointer;padding:4px 8px 0px;z-index: 1000;position:relative}
.menuOptionContainer:hover{background-color:#555}
.menuOptionContainer:last-child{margin-bottom:0px}

.menuOptionContainer span{vertical-align:top}

#coverImageOptions{display:none}

#coverImageContainer{overflow:hidden;width:100%;height:400px;object-fit: cover;border-radius: 6px}
#coverImageContainer img{width:100%;height:100%;object-fit:cover;}


#editCoverImagePopup{height: auto;width: 40%;display: none;z-index: 1000;background-color: #F8F8F8}
.showPopup{display: block!important;position: absolute;}
#uploadCoverImage{display:none}
#imgEditButtons{margin:10px 0 0 10px;}
#artistUserImageContainer{height:208px;width:208px;background-color: #e0e0e0;text-align:center;position:relative;border:4px solid white;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.28);overflow:hidden;}

#noUserImgSilhoutte{color: #357AE8;font-size: 155px;margin-top:20px;}
#userSillhoutteCamera{position:absolute;top:12px;right:12px;font-size:22px;}
#addTrackPopup, #addVideoPopup, #renameTrackPopup, #privateMessagePopup{display:none;width:40%;min-width:320px;max-width:600px;height:auto;z-index: 1000;background-color: #F8F8F8;padding:20px;}
#track{display:none}
#selectedTrack{display:none}
.popupClose{position: absolute;right: 7px;top: 7px;cursor: pointer;padding: 8px;font-size: 20px;}
#playlist{width:100%}
audio{width:100%!important;display:none}
.track{font-size:130%}
.showTrackOptions, .showVideoOptions {color:#555;position:absolute;top:0px;right:0px;}
#showBioOptions{color:#555;position:absolute;top:15px;right:15px;}
#addNewTrack, #addVideo{margin-top:8px!important;}
#saveBio{display:none}

.trackOptions, .videoOptions, .bioOptions, .commentOptions{display:none;padding: 4px 8px 0px;}

.trackOption:hover, .videoOptions:hover{background-color:#bbb;cursor:pointer}
#privateMessageContainerPostSend{display:none;}
.featuredAdHRClass{border:2px solid yellow}
.featuredAdDescriptionClass{font-weight:bold}
hr {border: none;height: 1px;background-color: #aaa;}
.artistCommentImage{height:42px;margin-right:15px;float:left;overflow:auto}
.artistName{vertical-align:top}
.userCommentSilhouette{font-size: 42px;float: left;margin-right: 5px;color:#357AE8}
.profileComment{background-color: #f0f4f8;padding: 10px 14px;border-radius: 0 4px 4px 0;border-left:3px solid #357AE8;}

#newProfileComment{
    background-color: #fff;
    border: 1px solid #ccc;
    border-left: 3px solid #357AE8;
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    min-height: 70px;
    cursor: text;
    color: #333;
    outline: none;
}

#newProfileComment:focus{
    border-color: #357AE8;
    box-shadow: 0 0 0 3px rgba(53,122,232,0.12);
}

#newProfileComment:empty::before{
    content: 'Write a comment...';
    color: #aaa;
    pointer-events: none;
}

#addProfileComment{margin-top:10px!important;overflow:scroll}
.artistName{color:#000}
.profileCommentHR{margin:15px 0}
.showCommentOptions{color:#555;position:absolute;top:-10px;right:0px;}
.commentOption{cursor:pointer}
.commentOptions{position:absolute;right:0px;top:15px;background-color:#555;padding:10px;color:white;}

.playPauseBtn{height:65px!important;width:65px;border-radius:50%!important;font-size:30px!important;}
.trackContainer{margin-bottom:40px;}

.currentTime, .wavesurferRender, .totalTime{display:inline-block;vertical-align:top}
.currentTime, .totalTime{width:40px;margin-top:51px}
.wavesurferRender{width:calc(100% - 90px)}
.field{width:100%!important}
.videoDivider{margin-top:16px}
#bioTextarea{display:none;width:100%;height: 200px;resize: none}
#bioErrorNoText{display:none}

#mainContent{width:65%;float:left;padding-right:22px;}
#artistSidebar{float:right;width:32.674847%;position:relative;margin-right:8px;}
#userImageOuterContainer{position:relative;top:-100px;width:100%}
#userDetailsVerticalPositioner{position:absolute;top:113px;width:100%;}
#userDetailsContainer{margin-left:262px;}
#userImg{max-width:100%;max-height:100%}
#fanCount  {margin-bottom:0px!important;}
#mobFanCount{display:none}
.fanCount{font-weight:bold;color:#357AE8}
#mobOpenPrivateMessagePopup{display:none}
#notAFan{position:static;right:0px;top:50px;margin-right:0px!important;}
#becomeAFan{position:static;right:0px;top:0px;margin-right:0px!important;}
#mobNotAFan{display:none;}
#mobBecomeAFan{display:none;}
#fanDetailsContainer{display: inline-block;}
.volumeContainer{display: table-cell; vertical-align: middle;padding:0 0 0 20px;}
.noVideoOrTracksContainer{display:table}
.noVideoOrTracksIcon{color:#357AE8;font-size:35px;padding-right:15px;}
.noVideoOrTracksCell{display: table-cell; vertical-align: middle;}
#bioTextarea{background-color:#cfcfcf;border:1px solid #888}
#privateMessage{height:200px!important;resize: none}
#privateMessageError{display: none;}
#addTrackError{display: none;}
#userTracksContainer{width:100%;background-color:#f8f8f8;padding:20px;display:inline-block;vertical-align:top;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,0.1);}
#videosContainer{width:100%;background-color:#f8f8f8;padding:20px;display:inline-block;vertical-align:top;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,0.1);}
#bioContainer{width:100%;background-color:#f8f8f8;padding:20px;display:inline-block;vertical-align:top;border-radius:8px;}
#comments{margin-top:16px;background-color:#f8f8f8;padding:20px;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,0.1);}
#activePosts{margin-top:16px;background-color:#f8f8f8;padding:20px;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,0.1);}

h2#artistsName{font-size:1.55em;line-height:1.2;margin-bottom:5px;color:#1a1a1a;}
#bioContainer > h2, #comments > h2, #activePosts > h2, #videosContainer > h2{font-size:0.78em;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#555;padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid #357AE8;}
#bioPlaceholder{color:#999;font-style:italic;margin:4px 0;}

#trackProgressBar {
  box-sizing: content-box!important;height: 40px;position: relative;background: #fff;display: none;margin-bottom: 10px;
}
#trackProgressBar *{
  box-sizing: content-box!important;
}
#trackProgressBar > span {
  text-align: center;line-height:40px;color:#fff;width:0px;display: block;height: 100%;background-color:#2F5BB7;
  background-image: linear-gradient(to bottom,#4d90fe,#357ae8)!important;overflow: hidden;
}
.volumeContainer i{position:relative;top:-2px;}

@media screen and (max-width: 700px){

	#mainContent, #artistSidebar{float:none;width:100%}
	#mainContent{padding-right:0}
	#artistSidebar{margin-top:16px;margin-right:0}
	#bioContainer{margin-top:0}
	#coverImageContainer{height:200px;}
	#artistUserImageContainer{height:150px;width:150px;}
	#noUserImgSilhoutte{font-size: 100px}
	#userImageOuterContainer{top:-60px;}
	#userDetailsContainer{margin-left:202px}
	#userDetailsVerticalPositioner{position:absolute;top:60px;width:100%;}

}


@media screen and (max-width: 500px){
	
	#fanCount{display:none}
	#mobFanCount{display:block}
	#mobOpenPrivateMessagePopup{display:block}
	#isFanSpan{position:absolute;right:0px;top:0px;margin-right:0px!important;}
	#mobNotAFan{display:block;}
	#mobBecomeAFan{display:block;}
	#openPrivateMessagePopup{display:none}
	#fanDetailsContainer{display:none}
	.volumeContainer{display:none}

}