/*=========SMALLER DESKTOP STYLES============*/

@media screen and (min-width: 1050px) {	


/*START AUDIO SCREEN STYLES*/

	/*START AUDIO SCREEN STYLES*/
		.audio-screen {
			position: fixed;
			width: 100vw;
			height: 0;
			bottom: 0;
			z-index: 500;
			overflow: hidden;
			transform-origin: center;
			transition: all 0.2s ease-out;
		}

		.audio-screen.expanded {
			width: 100vw;
			height: 85px;
			bottom: 0;
			box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2);
			transition: all 0.2s ease-out;
		}

		.audio-bar {
			position: relative;
			width: 100%;
			height: 85px;
			margin: 0;
			background: #9AEEDB;
			opacity: 1;
			z-index: 100;
		}

		.screen-close {
			position: absolute;
			width: 20px;
			height: 20px;
			z-index: 400;
			right: 25px;
			top: 25px;
			cursor: pointer;
			z-index: 500;
		}
	/*END AUDIO SCREEN STYLES*/

	/*START ALBUM COVER STYLES*/
		.audio-cover {
			width: 65px;
			height: 65px;
			overflow: hidden;
			margin-top: 15px;
			margin-left: 10px;
			position: relative;
			z-index: 100;
			float: left;
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
		}

		.audio-cover-img {
			width: 65px;
			height: 65px;
			transition: all 0.4s ease-out;
		}
	/*END ALBUM COVER STYLES*/

	/*START AUDIO SCREEN BARS*/
		.minimize-player-bars {
			display: inline-block;
			position: absolute;
			margin-top: 60px;
			left: 0;
			margin-left: 12px;
			width: 60px;
			height: 20px;
			padding-left: 0;
			overflow: hidden;
			z-index: 800;
			transition: all 0.3s ease-out;
		}

		.minimize-player-bars-img {
			width: 20px;
			height: 20px;
			margin-top: 21px;
			opacity: 0.65;
			float: left;
			display: inline-block;
			-webkit-filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.45));
			filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.45));
			transition: all 0.4s ease-out;
		}

		.minimize-player-bars-img.active {
			margin-top: 0;
			transition: all 0.4s ease-out;
		}
	/*END AUDIO SCREEN BARS*/

	.audio-controls {
		position: absolute;
		width: 100vw;
		height: 85px;
	}

	/*START AUDIO PLAYER BUTTONS*/
		.player-controls {
			position: absolute;
			margin: 0 auto;
			left: 0;
			right: 0;
			margin-top: 50px;
			z-index: 200;
			opacity: 0.85;
			transform: translateY(-50%);
		}

		.play-pause-button {
			width: 25px;
			height: auto;
			cursor: pointer;
		}

		.previous-button {
			width: 20px;
			margin-right: 20px;
			cursor: pointer;
		}

		.next-button {
			width: 20px;
			margin-left: 20px;
			cursor: pointer;
		}
	/*END AUDIO PLAYER BUTTONS*/

	/*START AUDIO INFO TEXT STYLES*/
		.audio-info {
			position: relative;
			float: left;
			margin-top: 50px;
			margin-bottom: 5px;
			margin-left: 95px;
			text-align: left;
			color: #333;
			transform: translateY(-50%);
		}

		.song-title {
			text-transform: capitalize;
			font-weight: 700;
			font-size: 1.2em;
			letter-spacing: -1px;
		}

		.song-artist {
			font-weight: 300;
			font-size: 0.85em;
			font-style: italic;
		}
	/*END AUDIO INFO TEXT STYLES*/

	/*START AUDIO VOLUME STYLES*/
		.volume-container {
			position: absolute;
			right: 170px;
			width: 135px;
			height: 20px;
			overflow: hidden;
			margin-top: 50px;
			z-index: 500;
			transform: translateY(-50%);
			transition: all 0.2s ease-out;
		}

		.volume-icon {
			position: absolute;
			left: 0;
			width: 20px;
			height: auto;
			cursor: pointer;
			transform: translateY(3px);
		}

		.volume-slider-container {
			position: absolute;
			width: 100px;
			height: 4px;
			margin-left: 35px;
			background: rgba(85,85,85,0.25);
			transform: translateY(9px);
		}

		.volume-fill {
			position: absolute;
			width: 0;
			height: 4px;
			background: #555;
			opacity: 0.65;
			z-index: 503;

		}

		#volume-slider {
			position: absolute;
			display: block;
			width: 100px;
			height: 10px;
			-webkit-appearance: none !important;
			-moz-appearance: none;
			appearance: none;
			opacity: 0;
			z-index: 1000;
		}

	/*END AUDIO VOLUME STYLES*/	

	/*START AUDIO DURATION STYLES*/
		.duration-container {
			position: absolute;
			right: 80px;
			width: 70px;
			margin-top: 50px;
			font-size: 0.85em;
			font-weight: 300;
			color: #555;
			transform: translateY(-50%);
		}

		.elapsed {
			width: 30px;
			float: left;
		}

		.remaining {
			width: 30px;
			float: right;
		}

		.duration-slash {
			position: absolute;
			display: inline-block;
			width: 5px;
			margin: 0 auto;
			left: 0;
			right: 0;
		}
	/*END AUDIO DURATION STYLES*/

	/*START AUDIO PROGRESS BAR STYLES*/
		.progress-bar-container {
			position: absolute;
			display: block;
			width: 100vw;
			height: 10px;
			margin-top: 0;
			z-index: 5000;
			cursor: pointer;
		} 


		#progress-bar-fill {
			position: absolute;
			width: 0;
			height: 10px;
			background: #555;
			opacity: 0.65;
			margin-top: 0;
			z-index: 600;
		}

		input[type="range"]#progress-bar {
			-webkit-appearance: none !important;
			-moz-appearance: none !important;
			appearance: none !important;
			width: 100vw;
			position: absolute;
			z-index: 200;
			margin: 0;
			padding: 0;
			background: rgba(154,238,219,0.65);
			height: 10px;
			border: none;
			cursor: pointer !important;
		}

		input[type='range']#progress-bar::-ms-fill-lower {
			background: rgba(154,238,219,0.65);
		}

		input[type='range']#progress-bar::-ms-fill-upper {
			background: rgba(154,238,219,0.65);
		}

		input[type='range']#progress-bar::-moz-range-track {
			border: none;
			background: rgba(154,238,219,0.65);
		}

		input[type='range']#progress-bar::-webkit-slider-thumb {
			-webkit-appearance: none !important;
			-moz-appearance: none !important;
			appearance: none !important;
			background: transparent;
			height: 11px;
			width: 11px;
			border-radius: 0;
			cursor: pointer;
		}

		input[type='range']#progress-bar::slider-thumb {
			-webkit-appearance: none !important;
			-moz-appearance: none !important;
			appearance: none !important;
			background: transparent;
			height: 11px;
			width: 11px;
			border-radius: 0;
			cursor: pointer;
		}

		input[type='range']#progress-bar::-moz-range-thumb {
			-moz-appearance: none !important;
			background: transparent;
			height: 11px;
			width: 11px;
			border-radius: 0;
			cursor: pointer;
		}

		input[type='range']#progress-bar::-ms-thumb {
			-webkit-appearance: none !important;
			background: transparent;
			height: 11px;
			width: 11px;
			border-radius: 0;
			cursor: pointer;
		}

		#progress-bar {
			position: absolute;
			margin-top: 0;
			width: 100vw;
			height: 10px;
			background: rgba(154,238,219,0.65);
			-webkit-filter: brightness(0.85);
			filter: brightness(0.85);
			z-index: 1000;
			cursor: pointer !important;
		}
	/*END AUDIO PROGRESS BAR STYLES*/
/*END AUDIO SCREEN STYLES*/


/*START VIDEO SCREEN STYLES*/
	.video-screen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		/*overflow: hidden !important;*/
		opacity: 0.2;
		z-index: 2000;
		transform: scale(0);
		transform-origin: center middle;
		transition: all 0.2s ease-out;
		animation: blur 250ms;
	}

	.video-screen.expanded {
		top: 0;
		height: 100vh;
		opacity: 1;
		transform: scale(1);
		transform-origin: center middle;
		transition: all 0.2s ease-out;
		animation: blur 250ms;
	}

	.video-screen.minimized {
		top: 60px;
		height: 80px;
		opacity: 1;
		transform: scale(1);
		transform-origin: center top;
		transition: all 0.2s ease-out;
		animation: blur 250ms;
	}

	@keyframes blur {
		0% { -webkit-filter: blur(0px); }
		50% { -webkit-filter: blur(20px); }
		95% { -webkit-filter: blur(15px); }
		100% { -webkit-filter: blur(0px); }
	}

	.video-screen-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden !important;
		z-index: 1000;
		background: rgba(0,0,0,0.9);
	}

	.close-video-screen {
		width: 20px;
		height: auto;
		position: absolute;
		right: 25px;
		top: 20px;
		z-index: 1500;
		opacity: 0.65;
		cursor: pointer;
		transition: all 0.2s ease-out;
	}

	.close-video-screen:hover {
		opacity: 1;
		transition: all 0.2s ease-out;
	}

	.resize-video-screen {
		width: 20px;
		height: auto;
		position: absolute;
		right: 25px;
		bottom: 20px;
		z-index: 1500;
		opacity: 0.65;
		cursor: pointer;
		transition: all 0.2s ease-out;
	}

	.resize-video-screen:hover {
		opacity: 1;
		transition: all 0.2s ease-out;
	}

	.video-iframe {
		position: absolute;
		display: block;
		width: 960px;
		height: 540px;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		margin-top: calc((100vh - 540px)/2);
		z-index: 1250;
		box-shadow: 
			0px 8px 32px 0px rgba(0, 0, 0, 0.85),
			0px 8px 32px 4px rgba(255, 255, 255, 0.05);
		transform: scale(1);
		transition: all 0.2s ease-out;
		animation: blur 250ms;
	}

	.video-screen.minimized > .video-iframe {
		transform: scale(0.167);
		margin-top: -240px;
		left: -420px;
		right: 100vw;
		transition: all 0.2s ease-out;
		animation: blur 250ms;
	}

/*END VIDEO SCREEN STYLES*/

}