@font-face {
	src: url("/fonts/sfuilight.ttf");
	font-family: "stuilight";
}

* {
	box-sizing: border-box;
}

.body {
	margin: 0;
	padding: 0;
	font-family: "stuilight";
}

.container {
	width: 1240px;
	margin: 0 auto;
}

.header {
	height: 50px;
	background-color: #1f1b1b;
	width: 100vw;
	position: fixed;
	z-index: 5;
	text-align: center;
}

.logo {
	float: left;
	margin: 15px 24px 0 0;
	cursor: pointer;
}

.header-btn {
	float: left;
	color: #757575;
	border-radius: 0;
	background: none;
	height: 50px;
	width: 130px;
	border: 0;
	margin: 0 0 0;
	font-size: 1em;
	padding: 13px 0 0;
	cursor: pointer;
}

.header-btn:hover {
	border-bottom: 2px inset #ff192e;
	background-color: #fff000, 0.9; 
	color: white;
}


.header-favourite {
	width: 145px;
	margin: 0 30px 0 0;
}

.header-favourite:after {
	content: "";
	display: block;
	width: 1px;
	height: 30px;
	background-color: grey;
	position: absolute;
	margin: -23px 139px 0;
}

.header-search {
	width: 180px;
	height: 30px;
	border: 1px solid grey;
	border-radius: 15px;
	text-align: left;
	padding-left: 15px;
	background: none;
	color: grey;
	margin: 10px 0 0;
	float: left;
}

.header-search:focus {
	outline: none;
}

.header-search:hover {
	color: white;
}

.header-search-icon {
	position: absolute;
	margin: 20px 0 0 -330px;
}

.header-login {
	width: 80px;
	height: 30px;
	border: 1px solid #404040;
	border-radius: 3px;
	background-color: #303030;
	float: right;
	margin: 10px 0 0;
	padding: 5px 0 0;
	color: grey;
	cursor: pointer;
}

.header-login:hover {
	color: white;
}

.header-about {
	float: right;
	width: 100px;
	padding: 15px 0 0;
}

.header-about:hover {
	color: white;
	border: 0px;
}

/* --------------------------content---------*/



.hero {
	background-color: #1f1b1b;
	background-image: url("/img/background.png");
	padding: 12vh 0 13vh;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	min-height: 100vh;
	text-align: center;
}

.hero-songblock {
	margin: 15px 10px;
	display: inline-block;
	width: 200px;
	height: 260px;
	box-sizing: border-box;
	text-align: center;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.hero-songblock-pic {
	width: 200px;
	height: 200px;
	z-index: 1;
}

.hero-songblock-underblock {
	width: 200px;
	height: 60px;
	background-color: #303030;
	margin: -15px 0 0;
}

.hero-songblock-jenre {
	font-size: 10px;
	color: white;
	padding: 15px 0 0;
}

.hero-songblock-play {
	width: 78px;
	height: 78px;
	border-radius: 78px;
	background-color: black;
	opacity: 0.95;
	border: 2px solid white;
	position: absolute;
	margin: -195px 0 0 61px;
	display: none;
	cursor: pointer;
	z-index: +1;
}

.hero-songblock-play:before {
	content: "";
	display: block;
	width: 21px;
	height: 24px;
	background: url("/img/ui/song-play.png");
	position: absolute;
	margin: 26px 0 0 30px;
}

.hero-songblock-pause {
	width: 70px;
	height: 70px;
	border-radius: 70px;
	background-color: white;
	position: absolute;
	margin: -191px 0 0 65px;
	display: none;
	cursor: pointer;
	z-index: +1;
}

.hero-songblock-pause:after {
	content: "";
	display: block;
	width: 14px;
	height: 20px;
	background: url("/img/ui/song-pause.png");
	position: absolute;
	margin: 26px 0 0 28px;
}

.hero-songblock-bitrate {
	width: 14px;
	height: 12px;
	background-image: url("/img/ui/song-bitrate.png");
	position: absolute;
	margin: -250px 0 0 10px;
	display: none;
	z-index: 1;
}

.hero-songblock-bitrate:before {
	content: "";
	display: block;
	width: 200px;
	height: 200px;
	background-color: #ff2a2a;
	position: absolute;
	margin: -9px 0 0 -10px;
	opacity: 0.7;
	z-index: 2;
}

.hero-songblock:hover .hero-songblock-play {
	display: block;
}

.is-playing .hero-songblock-play{
	display: block;
	z-index: 3;
}

.is-playing .hero-songblock-pause {
	display: block;
	z-index: 3;
}

.is-playing .hero-songblock-bitrate {
	display: block;
	z-index: 2;
	& .hero-songblock-bitrate:before {
		z-index: 1;
	}
}

.is-playing .hero-songblock-underblock {
	background-color: white;
}

.is-playing .hero-songblock-jenre {
	color: black;
	font-weight: bold;
}

.is-paused .hero-songblock-play{
	display: block;
	z-index: 2;
}

.is-paused .hero-songblock-pause {
	display: none;
}

.is-paused .hero-songblock-bitrate {
	display: block;
	z-index: 1;
}

.is-paused .hero-songblock-underblock {
	background-color: white;
}

.is-paused .hero-songblock-jenre {
	color: black;
	font-weight: bold;
}

/*- ----------------------------- -*/

.footer {
	height: 60px;
	background-color: #1f1b1b;
	position: fixed;
	z-index: 5;
	bottom: 0;
	right: 0;
	left: 0;
	text-align: center;
}

.footer-song-pic {
	width: 36px;
	height: 36px;
	float: left;
	margin: -2px 10px 0 0;
}

.footer-song-info {
	width: 410px;
	height: 32px;
	margin: 15px 0 0 10px;
	float: left;
}

.footer-bitrate {
	float: left;
	width: 14px;
	height: 12px;
	background-image: url("/img/ui/footer-bitrate.png");
}

.footer-song {
	color: #bfbebe;
	float: left;
	font-size: 12px;
	margin: 0 0 0 8px;
}

.footer-songname {
	text-overflow: ellipsis;
	max-width: 192px;
	text-align: left;
	white-space: nowrap;overflow: hidden;
}

.footer-controls {
	color: #757575;
	float: left;
	margin: -12px 10px 0 10px;
	font-size: 28px;
	letter-spacing: -5px;
	cursor: pointer;
	display: block;
}

.footer-songadress {
	color: #757575;
	font-size: 11px;
	position: absolute;
	margin: 17px 0 0 45px;
}

.footer-numlist {
	margin: 22px 0 0 -520px;
	cursor: pointer;
}

.footer-pause-btn {
	width: 37px;
	height: 37px;
	border-radius: 37px;
	background-color: black;
	border: 2px solid #757575;
	margin: -30px auto 0;
	cursor: pointer;
}

.footer-pause-btn:after {
	content: "";
	display: block;
	width: 11px;
	height: 15px;
	background-image: url("/img/ui/footer-pause-white.png");
	position: absolute;
	margin: 9px 0 0 11px;
}

.footer-btn-new {
	margin: -37px 0 0 720px;
	width: 37px;
	height: 37px;
	border-radius: 37px;
	background-color: red;
	border: 2px solid #757575;
	cursor: pointer;
}

.footer-soundicon {
	float: right;
	margin: -26px 140px; 0 0;
	cursor: pointer;
}

.volume-slider {
	width: 121px;
	height: 4px;
	background-color: #434343;
	border-radius: 2px;
	float: right;
	margin: -20px 0 0;
	box-shadow: 0 0 3px rgba(0,0,0,0.5); 
}

.volume-slider:focus {
	outline: none;
}

.ui-slider-handle {
	width: 14px;
	height: 14px;
	border-radius: 14px;
	background-color: #d1d1d1; 
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	float: right;
	margin: -5px 0 0;
	cursor: pointer;
}