* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.intro {
	width: 100%;
	height: 100vh;

	background-image: url(https://codetheweb.blog/assets/img/posts/css-advanced-background-images/cover.jpg);
	background-size: cover;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.right_intro {
	color: white;
}

.music_name {
	font-size: 75px;
	font-family: monospace;
}

.music_author {
	font-size: 50px;
	font-family: monospace;
}

.music_next {
	font-size: 25px;
	font-family: monospace;
}

.left_intro {
	display: flex;

	margin-right: 100px;
}

.input_range {
	width: 175px;
	height: 40px;

	background-color: whitesmoke;
	border-radius: 25px;
	border: 1px solid black;

	margin-top: 25px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.circule_pause {
	width: 100px;
	height: 100px;

	border-radius: 50%;
	background-color: whitesmoke;
	border: 3px solid black;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
	transition: .1s linear;
}

.circule_pause:hover {
	background-color: darkgrey;
}

.partners {
	width: 100%;
	height: 100vh;

	background-color: white;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.partners_title {
	font-size: 50px;
	font-family: monospace;
	font-weight: 900;

	margin-top: 100px;
}

.partners_row {
	display: flex;
}

.row_top {
	position: relative;
	bottom: 150px;
}

.row_bottom {
	position: relative;
	bottom: 100px;
}

.partners_item {
	width: 250px;
	height: 150px;

	margin: 15px;

    filter: grayscale(100%);
    transition: .1s linear;
}

.partners_item:hover {
	filter: inherit;
}

.radio_luks {
	width: 350px;
	height: 350px;

	position: relative;
	bottom: 90px;
}

.place {
	width: 100%;
	height: 35vh;

	background-color: #333;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.place_item {
	font-size: 25px;
	font-family: monospace;
	font-weight: 900;
	color: whitesmoke;

	margin-top: 15px;

	position: relative;
}

.place_icon {
	width: 30px;
	height: 30px;

	margin-bottom: -7px;
	margin-right: 10px;

	color: white;
}

.social_networks {
	width: 100%;
	height: 100vh;
}

.social_networks_row {
	display: flex;
	justify-content: space-between;
}

.social_networks_item {
	width: 50%;
	height: 300px;

	display: flex;
	justify-content: center;
	align-items: center;

	text-transform: uppercase;

	cursor: pointer;
}

.social_networks_item_bottom {
	width: 100%;
	height: 200px;

	display: flex;
	justify-content: center;
	align-items: center;

	text-transform: uppercase;
}

.social_networks_icon {
	width: 75px;
	height: 75px;

	margin-right: 25px;
}

.twitter {
	background-color: #25a1ba;
	box-shadow: 0 5px 5px #333;

	color: white;
	font-size: 50px;
	font-family: monospace;

	transition: .1s linear;
}

.twitter:hover {
	background-color: #0099ff;
}

.facebook {
	background-color: #2c1f91;
	box-shadow: 0 5px 5px #333;

	color: white;
	font-size: 50px;
	font-family: monospace;

	transition: .1s linear;
}

.facebook:hover {
	background-color: #0059ff;
}

.soundcloud {
	background-color: #f57207;
	box-shadow: 0 5px 20px #333;

	color: white;
	font-size: 50px;
	font-family: monospace;

	transition: .1s linear;
}

.soundcloud:hover {
	background-color: #ff5500;
}

.instagram {
	background-color: #ff9500;
	box-shadow: 0 5px 20px #333;

	color: white;
	font-size: 50px;
	font-family: monospace;

	transition: .1s linear;
}

.instagram:hover {
	background-color: #ff4000;
}

.youtube {
	background-color: #e61515;
	box-shadow: 0 5px 5px #333;

	color: white;
	font-size: 50px;
	font-family: monospace;

	transition: .1s linear;
}

.youtube:hover {
	background-color: #ff4000;
}

.pause_icon {
	width: 50px;
	height: 50px;
}

.play_icon {
	width: 50px;
	height: 50px;

	margin-left: 5px;
}

.input_btn {
	background-color: lightgrey;
	border-radius: 25px;
	border: 1px solid #000;
	box-shadow: 0 0 5px #111;

	padding: 15px;

	font-weight: 900;

	cursor: pointer;
	transition: .1s linear;
}

.input_btn:hover {
	background-color: darkgrey;
	color: #fff;
}

.intro_position {
	/*width: 500px;
	height: auto;*/

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	/*background-color: whitesmoke;
	border-radius: 5px;
	box-shadow: 0 0 5px #111;*/
}

.input_btn_position {
	margin-top: 25px;
}

.intro_position_text {
	font-size: 75px;
	color: whitesmoke;

	/*padding: 5px;*/
}

.intro_position_text_span {
	font-weight: 900;
	color: black;
}

.audio {
	width: 750px;

	position: relative;
	top: 100px;
}

.audio_info {
	width: auto;

	background-color: whitesmoke;
	border-radius: 5px;
	box-shadow: 0 0 5px #111;

	display: flex;
	justify-content: flex-start;
	flex-direction: column;
}

.audio_text {
	font-size: 30px;
	font-weight: 900;

	padding: 10px;
}

.audio_now {
	font-size: 25px;

	padding: 5px;
}

.audio_info_flex {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.way {
	font-size: 65px;
	color: white;

	cursor: pointer;
	transition: .1s linear;
}

.left {
	position: relative;
	right: 725px;
	top: 90px;
}

.left:hover {
	color: darkgrey;
}

.right {
	position: relative;
	left: 725px;
	bottom: 90px;
}

.right:hover {
	color: darkgrey;
}
