html,
body {
	background-color: #121212;

	-webkit-overflow-scrolling: touch;
};

.wrapper {
	width: 100%;
	text-align: center
};
	.content {
		width: 100%;
		margin: auto;
	}
	.content .fa	 {
		color: white;
	}
	header {
		position: relative;

		width: 100%;
		height: 100vh;
		
		background-color: #121212;
		background-image: url('../images/creepy-mansion.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-blend-mode: soft-light;
	}
		header .title {
			position: absolute;
			top: 50%;
			left: 50%;
			
			font-family: 'Pirata One', cursive;
			font-size: 52px;
			color: #dedede;

			letter-spacing: 1.5px;

			line-height: 1.2;

			text-align: center;

			transform: translate3d(-50%, -50%, 0);
		}
		header .title span {
			display: block;
			
			font-size: 16px;
			letter-spacing: 1px;
		}
		@media only screen and (min-width: 768px) {
			header .title {
				font-size: 96px;
			}
			header .title span {
				font-size: 36px;
				
				margin-top: 10px;
			}
		}

			@media only screen and (min-width: 1024px) {
				header .title {
					width: 100%;
					
					font-size: 142px;
				}
				header .title span {
					font-size: 48px;
					
					margin-top: 10px;
				}
		} 

		header .page-down {
			display: block;
			justify-content: center;

			width: 100%;

			margin-top: 48px;
		}
		header .page-down span {
			display: block;

			font-size: 24px;
			letter-spacing: 1px;

			margin-top: 8px;
		}
		header .page-down i
		{
			width: 56px;
			height: 56px;
			
			padding-top: 16px;
			
			color: #fff;
			font-size: 24px;
			
			border-radius: 100%;
			background-color: rgba(255,0,0,1);
			
			transition: all .125s ease;
		}
		@media only screen and (min-width: 768px) {
			header .page-down  {
				margin-top: 68px;
			}
			header .page-down i {
				width: 86px;
				height: 86px;

				font-size: 36px;

				padding-top: 26px;
			}
		}
		@media only screen and (min-width: 1024px) {
			
			header .page-down i:hover {
				color: red;
				background-color: white;
				cursor: pointer;
			}
		}
		
		.player-section {
			display: flex;
			justify-content: center;
			
			width: 100%;
			text-align: center;

			padding-bottom: 110px;
			
			border-top: 8px solid red;
			
			background-color: rgba(10,10,10,0.5);
			background-image: url('../images/susan_mobile.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: top center;
			background-blend-mode: luminosity;
		}
		.player-section:before {
			content: '';
			padding-top: 63.88%;
		}
		.player-section .player-wrapper {
			width: 100%;

			overflow: hidden;
		}
		@media only screen and (min-width: 768px) {
			.player-section .player-wrapper {
				padding: 0 24px;
				
			}
		}
		@media only screen and (min-width: 1024px) {
			.player-section .player-wrapper {
				width: 100%;
				margin: 0 24px;
			}	
		}
		
		
		.player-wrapper .volume-wrapper {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			width: 100%;
			
			padding: 24px 16px;
		}
		.player-section .play-list {
			font-family: Arial, Helvetica, sans-serif;
			color: white;
			font-size: 18px;
			
		}
		@media only screen and (min-width: 768px) {
			.player-section .play-list {
				border-radius: 8px;
				overflow: hidden;
				
			}			
		}
		@media only screen and (min-width: 1024px) {
			.player-section .player-wrapper {
				max-width: 1024px;

				padding: 48px 24px; 0
				margin: auto;

				box-sizing: border-box;
			}
		}
		.player-section .play-list li {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			height: 56px;

			padding: 0 16px;
			
			background-color: rgba(255,255,255,0.1);

			border-bottom: solid 1px black;

			transition: all .125s ease;
		}
		.player-section .play-list li.active {
			background-color: rgba(255,0,0,0.8);
			font-weight: 600;
		}
		@media only screen and (min-width: 1024px) {
			.player-section .play-list li {
				height: 64px;
			}
			}
			.player-section .play-list li:not(.active):hover
			{
				background-color: rgba(255,255,255,0.2);
			}
			.player-section .play-list li.active:hover {
				background-color: rgba(255,0,0,1.0);
			}
		
		}
		.player-section .play-list li:last-child {
			border-bottom: none;
		}
		.player-section .play-list .controls {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			width: 104px;
			height: 100%;
			
			font-size: 28px;
			
			padding-right: 16px;
			margin-right: 16px;
			
			border-right: solid 1px black;
		}
		.player-section .play-list .controls > div {
			width: 48px;
			cursor: ponter;
		}
		.player-section .play-list .song-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			height: 100%;
			width: 100%;

			cursor: pointer;
		}
		.player-section .play-list .song-title span:first-child {
			display: flex;
			justify-content: flex-start;

			flex: 1 1 10%;
			flex-wrap: nowrap;
			white-space: nowrap;
		}
		.player-section .play-list .tracker.ui-slider {
			position: relative;
			flex: 1 1 90%;

			height: 14px;

			background-color: #ec0000; 

			margin-left: 12px;
			border-radius: 7px;
		}
		.volume-wrapper .volume {
			position: relative;
			width: 100px;
			height: 20px;
			
			margin-left: 16px;
			
			background: rgba(255,255,255,0.2);
			
			border-radius: 10px;
		}
		.volume-wrapper .ui-slider-range {
			background-color: #bd0101;
			height: 100%;
			border-radius: 10px;
		}
		.volume-wrapper  .ui-slider-handle {
			position: absolute;
			top: 50%;
			
			width: 22px;
			height: 26px;

			border-radius: 100%;

			background: white;

			border: solid 2px #bd0101;
			outline: none;

			transform: translate3d(-50%, -50%, 0);
		}
		.play-list .ui-slider-range {
			background-color: #bd0101;
			min-height: 100%;
			border-radius: 7px;
		}
		.play-list .ui-slider-handle {
			position: absolute;
			top: 50%;
			
			width: 18px;
			height: 22px;

			border-radius: 100%;

			background: white;

			border: solid 2px #bd0101;
			outline: none;

			transform: translate3d(-50%, -50%, 0);
		}
		
		footer {
			position: fixed;
			left: 0;
			bottom: 0;

			width: 100%;
			text-align: center;

			padding: 16px;

			background-color: black;

			border-top: solid 1px rgba(255,0,0,1);
			border-bottom: solid 1px rgba(255,0,0,1);
		}
		footer nav {
			width: 100%;
			opacity: 1;

			margin: 8px 0 12px;
		}
		footer nav ul {
			display: flex;
			justify-content: center;
			align-items: center;

		}
		footer nav .link {
			display: flex;
			justify-content: center;
			align-items: center;

			min-width: 40px;
			min-height: 40px;

			font-size: 24px;
			color: #dedede;

			text-align: center;
			
			padding: 0;
			margin-right: 16px;
		}
		footer nav .link.reverb-nation a img
		{
			width: 30px;
		}
		footer nav .link a,
		footer nav .link.reverb-nation a,
		footer nav .link a:visited,
		footer nav .link.reverb-nation a:visited {
			display: block;
			min-width: 100%;
			color: white;
		}
		footer nav .link:last-of-type {
			margin-right: 0;
		}
		@media only screen and (min-width: 768px) {
			
			footer nav .link
			{
				font-size: 32px;

				margin-right: 54px;
			}
			footer nav .link.reverb-nation {
				background-size: 100%;
			}
		}
		footer small {
			color: gray;
			width: 100%;

			font-family: Arial, Helvetica, sans-serif;
			font-size: 10px;
			
			text-align: center;
		}