.wrapper.row3 {
	background-color: #FAFAFA;
}

.songTitle.selected {
	color: blue;
}

.songTitle {
	color: #666666;
}

.albumHeader {
	cursor: pointer;
	color: orange;
}

.backToAlbumList {
	cursor: pointer;
	color: orange;
}

.play-full {
	cursor: pointer;
}

.play-full:hover {
	color: orange;
}

.download {
	cursor: pointer;
	color: #666666;
}

.download:hover {
	color: orange;
}

.songInfo {
	cursor: pointer;
	color: #666666;
}

.songInfo:hover {
	color: orange;
}

.front_album_cover {
	cursor: pointer;
}

h1 a.download {
	float: right;
	font-size: .8em;
}

#songInfoSection {
	display: block;
	margin-top: 40px;
}

#albumHeader {
	margin-bottom: 20px;
	vertical-align: top;
}

#albumHeader #albumCover {
	display: inline-block;
	vertical-align: top;
}
#albumHeader #albumCover img {
	object-fit: contain;
}

#albumHeaderRight {
	position: relative;
	display: inline-block;
	padding-left: 20px;
	height: 200px;
}

#albumInfo {
	display: block;
	margin-top: 30px;
}

#albumInfo #albumTitle {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 20px;
}

#albumInfo #albumData {
	font-size: 16px;
}

#albumControls {
	position: absolute;
	display: block;
	text-align: left;
	bottom: 0;
}

#albumSongs p {
	border-bottom: solid 1px #666666;
	margin-top: 11px;
	padding-bottom: 11px;
}

#albumSongs p:first-child {
	border-top: solid 1px #666666;
	padding-top: 11px;
	margin-top: 0;
}

#albumSongs .songLength {
	margin-right: 10px;
}

#albumSongs .icon-download {
	margin-left: 10px;
}

#albumPlay {
	display: inline-block;
	background-color: #666666;
	border-radius: 30px;
	padding: 8px 0px 8px 0px;
	margin: 2px 2px 2px 2px;
	color: white;
	font-weight: bold;
	cursor: pointer;
	width: 120px;
	text-align: center;
	vertical-align: bottom;
}

#albumPlay:hover {
	background-color: #555555;
	padding: 10px 0px 10px 0px;
	width: 124px;
	margin: 0px 0px 0px 0px;
}

#loadTimeout {
    position: fixed;
    left: 0;
    bottom: 100px;
    width: 100%;
    padding: 10px 0;
    z-index: 3000000;
    display: none;
    
    color: white;
    background-color: #FF4444;
    border-top: solid 1px #666666;
    
    text-align: center;
}

#loadTimeout a {
    cursor: pointer;
    
}

#current-song {
	background-color: lightgrey;
	height: 100px;
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 3000000;
	border-top: solid 1px #666666;
}

#seekbar_container {
	position: fixed;
	left: 35%;
	bottom: 18px;
	height: 20px;
	width: 30%;
	z-index: 3000000;
}

#seekbar_background {
	position: relative;
	bottom: -6px;
	background-color: grey;
	z-index: 3000000;
	width: 100%;
	height: 6px;
	border-radius: 3px;
}

#seekbar_background.loading {
    background-image: url("../../images/loading_bar.png");
        
    animation: scroll 2s linear infinite;
}

@keyframes scroll {
    0% { background-position: 0px; }
    100% { background-position: 60px; }
}

#seekbar {
	background-color: #222222;
	width: 0%;
	height: 6px;
	border-radius: 3px;
}

#seekbar_container:hover #seekbar {
	background-color: orange;
}

#current_time {
	position: fixed;
	right: 65%;
	bottom: 18px;
	width: auto;
	margin-right: 10px;
	z-index: 3000000;
}

#total_time {
	position: fixed;
	left: 65%;
	bottom: 18px;
	width: auto;
	margin-left: 10px;
	z-index: 3000000;
}

#current_song_cover{
	position: fixed;
	left: 15px;
	bottom: 15px;
	height: 70px;
	width: 70px;
	object-fit: contain;
	z-index: 3000000;
}

#current_song_title {
	position: fixed;
	left: 95px;
	bottom: 53px;
	color: #222222;
	font-size: 15px;
	margin-left: 10px;
	margin-top: 10px;
	z-index: 3000000;
	width: 15%;
	height: 20px;
	overflow: hidden;
}

#current_song_title:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background:linear-gradient(to right, transparent, transparent 80%, lightgrey);
}

#current_song_album {
	position: fixed;
	left: 95px;
	bottom: 27px;
	color: #222222;
	font-size: 12px;
	margin-left: 10px;
	margin-top: 10px;
	z-index: 3000000;
	width: 15%;
	height: 20px;
	overflow: hidden;
}

#current_song_album:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background:linear-gradient(to right, transparent, transparent 80%, lightgrey);
}

#controls {
	width: 100;
	position: fixed;
	left: 50%;
	margin-left: -50px;
	bottom: 50px;
	z-index: 3000000;
}

#controls span {
	color: #444444;
	cursor: pointer;
	margin-right: 15px;
}

#controls .disabled {
	color: grey;
	cursor: default;
}

#volume_icon_container {
	position: fixed;
	right: 130px;
	bottom: 37px;
	z-index: 3000000;
	font-size: 18px;
	cursor: pointer;
	padding: 3px 3px 3px 3px;
	width: 25px;
}

#volume_icon.icon-volume-off {
	right: 149px;
}

#volume_icon_container:hover #volume_icon {
	color: orange;
}

#volume_container {
	position: fixed;
	right: 30px;
	bottom: 38px;
	height: 20px;
	width: 100px;
	z-index: 3000000;
}

#volume_background {
	position: relative;
	bottom: -6px;
	background-color: grey;
	z-index: 3000000;
	width: 100%;
	height: 6px;
	border-radius: 3px;
}

#volume {
	background-color: #222222;
	width: 100%;
	height: 6px;
	border-radius: 3px;
}

#volume_container:hover #volume {
	background-color: orange;
}

video {
	width: 100%;
	height: 100%;
}

@media screen and (max-width:800px) {
	#current-song {
		height: 150px;
	}
        
        #loadTimeout {
            bottom: 150px;
        }
	
	#seekbar_container {
		bottom: 65px;
		width: 70%;
		left: 15%;
	}
	
	#controls {
		bottom: 20px;
	}
	
	#current_time, #total_time {
		bottom: 65px;
	}
	
	#current_time {
		right: 85%;
	}
	
	#total_time {
		left: 85%;
	}
	
	#current_song_cover, #volume_container, #volume_icon_container {
		display: none;
	}
	
	#current_song_title {
		bottom: 120px;
		left: 0;
		width: 100%;
		text-align: center;
		margin: 0;
	}
	
	#current_song_album {
		bottom: 100px;
		left: 0;
		width: 100%;
		text-align: center;
		margin: 0;
	}
	
	#albumHeader #albumCover {
		display: block;
		text-align: center;
	}
	
	#albumHeaderRight {
		display: block;
		height: auto;
		padding-left: 0;
	}
	
	#albumControls {
		position: relative;
		text-align: center;
		margin-top: 20px;
	}
	
	#albumInfo {
		line-height: 2em;
		text-align: center;
	}
	
	.download {
		display: none;
	}
	
	.play-full {
		margin-left: 10px;
	}
}

@media screen and (max-width:615px) {
	.front_album_cover {
		text-align: center;
	}
	
	.album_cover {
		max-width: 255px;
	}
	
	.albumHeader {
		text-align: center;
	}
	
	.front_album_description {
		text-align: center;
	}
	
	#albumHeaderRight {
		text-align: center;
	}
	
	#viewAllAlbums>h1 {
		text-align: center;
	}
}