html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background: #f1f2f1;
	scroll-behavior: smooth;
}



@font-face {
	    font-family: "gilroy";
	    src: url('../css/MyFontsWebfontsKit/webfonts/3A8573_0_0.eot');
	    src: url('../css/MyFontsWebfontsKit/webfonts/3A8573_0_0.woff') format('woff'),
	         url('../css/MyFontsWebfontsKit/webfonts/3A8573_0_0.woff2') format('woff2'),
	         url('../css/MyFontsWebfontsKit/webfonts/3A8573_0_0.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; 
}

@font-face {
	font-family: "Gilroy-ExtraBold";
	src: url('../css/MyFontsWebfontsKit/webfonts/3A8547_0_0.eot');
	src: url('../css/MyFontsWebfontsKit/webfonts/3A8547_0_0.woff') format('woff'), 
		 url('../css/MyFontsWebfontsKit/webfonts/3A8547_0_0.woff2') format('woff2'),
	 	 url('../css/MyFontsWebfontsKit/webfonts/3A8547_0_0.ttf') format('truetype');
 	font-weight: normal;
	font-style: normal; 
}

@font-face {
    font-family: "GoboldExtra2";
	src: url('../css/MyFontsWebfontsKit/webfonts/GoboldExtra2.woff') format('woff'), 
		 url('../css/MyFontsWebfontsKit/webfonts/GoboldExtra2.woff2') format('woff2'), 
		 url('../css/MyFontsWebfontsKit/webfonts/GoboldExtra2.otf') format('opentype');
	font-style: normal;
    font-weight: normal;
}

.container {
	display: block;
	position: relative;
	width: 100%;
	height: auto;

}

/* HEADER SECTION */

header {
	display: block;
	position: relative;
	background: #f1f2f1;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: #212121;	
	width: 100%;
	height: 120px;
}

	.cdv-box-svg {
		flex: 1;
		position: relative;
		width: 60px;
		height: auto;
		padding-top: 30px;
		padding-left: 100px;
	}

	nav {
		display: block;
		float: right;
		padding-right: 100px;
		font-family: Gilroy-ExtraBold;
		font-weight: normal;
		font-size: 0.8em;
		letter-spacing: 5px;
	}

		.mobile-view {
			display: none;
			width: 30px;
			padding-top: 47px;
			padding-right: 40px;
			cursor: pointer;
		}

		.desktop-view {
			display: block;
		}

		.desktop-view > ul > li {
			display: inline-block;
			padding-top: 40px;
			padding-right: 30px;
			list-style-type: none;

		}


		.desktop-view > ul > li > a {
			text-decoration: none;
			color: #212121;
		}

		.desktop-view > ul > li > a:hover {
			color: #10e88a;
		}




/* MAIN SECTION */

main {
	display: block;
	margin: 0;
    padding: 0;
}

	.hero-img {
	    display: grid;
	    height: 100%;
	    margin: 100px auto auto auto;
	}
		.hero-logo {
		    max-width: 50%;
		    max-height: auto;
		    margin: auto;
		}



/* ABOUT SECTION */			

	.about-container {
		display: block;
		position: relative;
		max-width: 100%;
		height: auto;
		margin: 80px auto auto auto;
		padding-top: 100px;
		padding-left: 30px;
		padding-bottom: 100px;
		padding-right: 30px;
		background-image: url('../img/dust-color.png');
	}	

		.cdv {
			display: block;
			position: relative;
			max-width: 600px;
			height: auto;
			font-family: GoboldExtra2;
			font-weight: normal;
			font-style: normal;
			color: #212121;
			font-size: 3em;
			letter-spacing: 10px;
			text-align: center;
			margin: 20px auto auto auto;
		}

		#bio {
			display: block;
			position: relative;
			max-width: 800px;
			height: auto;
			margin: 0px auto auto auto;
			font-family: gilroy;
			font-weight: normal;
			font-style: normal;
			color: #212121;
			text-align: justify;
			letter-spacing: 1px;
		}



/* PLAYER SECTION */

	section {
		margin: 0px;
		padding: 0px;
	}

			.image-1 {
			    display: grid;
			    height: 100%;
			    margin: 20px auto auto auto;
			}

				.tws-banner {
				    max-width: 100%;
				    max-height: auto;
				    margin: auto;
				}


/* AUDIO SECTION */		

		.player-container {
			display: grid;
			position: relative;
			width: 100%;
			height: auto;
			/*background-image: url(../img/dust-color.png);*/
			margin: 20px auto auto auto;
			padding-top: 0px;
			padding-bottom: 0px;
		}

				/*h1, #song-1 {
					display: block;
					position: relative;
					max-width: 600px;
					height: auto;
					font-family: gilroy;
					font-weight: normal;
					font-style: normal;
					color: #f1f2f1;
					background-color: #212121;
					opacity: 100%;
					padding-top: 12px;
					padding-bottom: 10px;
					font-size: 1em;
					letter-spacing: 10px;
					text-align: center;
					margin: 50px auto 50px auto;
				}*/		

				#player {
				  	display: block;
				  	position: sticky;
				  	background-image: url(../img/dust-color.png);
				  	margin: 0px;
				  	max-width: 100%;
				  	height: auto;
				  	text-align:right;
				  	border: 5px;  
					border-style: solid;
					border-color: #212121;
					padding-top: 20px;
					padding-right: 20px;
					padding-bottom: 20px;
					padding-left: 20px;
				}

				#play {
				  	display: block;
				  	position: relative;
				  	width: 50px;
				  	margin: 20px auto auto auto;
				  	cursor: pointer;
				}

				#pause {
				  	display: block;
				  	position: relative;
				  	width: 50px;
				  	margin: 20px auto auto auto;
				  	cursor: pointer;
				}

				#progressbar {
				  	display: block;
				  	position: relative;
				  	max-width: 100%;
				  	border:none; 
				  	height:2px;
				  	margin: 30px auto auto auto;
				  	background: none;
				  	cursor: pointer;
				}

				#time {
				  	display: block;
				  	position: relative;
				  	margin: 40px auto auto auto;
				  	width: 50px;
				  	color:#212121;
				  	font-family: gilroy;
				  	font-weight: 600;
				  	font-size:0.8em;
				  	outline-style: none;
				}

				.ui-slider-handle {
				  	display: block !important;
				  	position: relative !important;
				  	border-radius: 50% !important;
				  	border: none !important;
				  	outline-style: none;
				  	background: #10e88a !important;
				  	top: -5px !important;
				  	width: 20px !important;
				  	height: 20px !important;
				  	margin-left: -5px !important;
				  	cursor: pointer !important;
				}

			#player-bot-banner {
				width: 100%;
				height: 100px;
				background: #212121;
			}		



		/*.img-grid {
			display: grid;
			height: 100%;
			margin: 0px auto auto auto;
		}

			#paris {
				max-width: 100%;
				max-height: auto;
				margin: auto;
			}*/



/* GET IN TOUCH SECTION */

	.git-wrapper {
		display: block;
		width: 100%;
		margin: 100px auto auto auto;
		padding-bottom: 20px;
	}

		.git-button {
			display: block;
			position: relative;
			margin: 100px auto auto auto;
			width: 300px;
			padding-top:5px;
			padding-bottom: 3px;
			border-width: 5px;
			border-style: solid;
			border-color: #212121;
			background-color: #f1f2f1;
			outline-width: 0px;
			cursor: pointer;
		}

		.git-button:hover {
			background-color: #10e88a;
		}

		h2, #git-text {
			display: block;
			position: relative;
			max-width: 600px;
			height: auto;
			font-family: GoboldExtra2;
			font-weight: normal;
			font-style: normal;
			color: #212121;
			font-size: 2em;
			text-align: center;
		}

		.social-link-wrapper {
			display: block;
			position: relative;
			max-width: 600px;
			margin: 20px auto auto auto;
			padding-bottom: 100px;
		}

			#getintouchsocial {
				display: block;
				position: relative;
				font-family: GoboldExtra2;
				font-weight: normal;
				font-size: 1em;
				color: #212121;
				text-align: center;
				max-width: 600px;
				margin: 50px auto auto auto;
				padding-bottom: 20px;
			}

			#spotify-link, #insta-link, #youtube-link, #fb-link, #soundcloud-link {
				display: block;
				position: relative;
				font-family: GoboldExtra2;
				font-weight: normal;
				font-size: 1.5em;
				color: #212121;
				text-align: center;
				text-decoration: none;
				width: auto;
				margin: 5px auto auto auto;
				padding-bottom: 5px;
			}

			#spotify-link:hover {
				color: #10e88a;
			}

			#insta-link:hover {
				color: #10e88a;
			}

			#youtube-link:hover {
				color: #10e88a;
			}

			#fb-link:hover {
				color: #10e88a;
			}

			#soundcloud-link:hover {
				color: #10e88a;
			}

		




/* GO BACK TO TOP */

#backup {
	display: block;
	position: relative;
	float: right;
	width: 50px;
	height: auto;
	padding-right: 100px;
	padding-bottom: 50px;
}

	#backup > path:hover {
		fill: #ff4080;
	}
	



/* FOOTER SECTION */

footer {
	display: block;
	width: 100%;
	height: 100px;
	background: #f1f2f1;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: #212121;
	overflow: hidden;
}
	
	#copyright {
		display: block;
		position: relative;
		float: left;
		padding-top: 35px;
		padding-left: 100px;
		font-family: Gilroy-ExtraBold;
		font-weight: normal;
		font-size: 0.6em;
		letter-spacing: 5px;
		color: #212121;
	}

	#deus-deus {
		text-decoration: none;
		color: #212121;
	}

	.mobile-view-footer {
			display: none;
			width: 30px;
			padding-top: 37px;
			padding-right: 40px;
			cursor: pointer;
		}

	.desktop-view-footer {
		display: inline-block;
		float: right;
	}

	.desktop-view-footer > ul > li {
		display: inline-block;
		text-decoration: none;
		list-style-type: none;
	}

	#spotify {
		display: inline-block;
		width: 20px;
		height: auto;
		padding-top: 20px;
		padding-right: 20px;
	}

	#instagram {
		display: inline-block;
		width: 20px;
		height: auto;
		padding-top: 20px;
		padding-right: 20px;
	}

	#youtube {
		display: inline-block;
		width: 25px;
		height: auto;
		padding-top: 20px;
		padding-right: 20px;
	}

	#facebook {
		display: inline-block;
		width: 20px;
		height: auto;
		padding-top: 20px;
		padding-right: 20px;
	}

	#soundcloud {
		display: inline-block;
		width: 25px;
		height: auto;
		padding-top: 20px;
		padding-right: 20px;
	}

	#email {
		display: inline-block;
		width: 25px;
		height: auto;
		padding-top: 20px;
		padding-right: 100px;
	}







/* SCREEN FIT */

/* DESKTOP */
@media only screen and (min-width: 1280px) {

}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 1279px) {

	.about-container {
		margin: 0px auto auto auto;
		padding: 1em;
	}

	.cdv-box-svg {
		padding-left: 40px;
	}

	.mobile-view {
		display: block;
		float: right;
	}
	.desktop-view {
			display: none;
	}

	.expand {
			display: block;
			color: #f1f2f1;
	}

	.desktop-view > ul > li {
			display: block;
			padding-top: 7px;
	}

	.mobile-view-footer {
		display: block;
		float: right;
	}

	.desktop-view-footer {
		display: none;
	}

	.expand-footer {
		display: block;
	}

	.desktop-view-footer > ul > li {
		display: inline-block;
		padding-right: 0px;
	}

	#copyright {
		font-size: 0.4em;
		padding-top: 40px;
		padding-left: 40px;
	}

	#email {
		padding-right: 40px;
	}

	.cdv {
		font-size: 2em;
		text-align: center;
		margin: 10px auto auto auto;
		letter-spacing: 10px;
	}

	/*h1, #song-1 {
		text-align: center;
		margin: 60px auto auto auto;
		max-width: 400px;
	}*/

	.git-wrapper {
		margin-top: 50px;
	}				
	
}

/* MOBILE */
@media only screen and (min-width: 320px) and (max-width: 767px) {

	.about-container {
		margin: 0px auto auto auto;
		padding: 1em;
	}

	.cdv-box-svg {
		padding-left: 40px;
	}

	.mobile-view {
		display: block;
		float: right;
	}
	.desktop-view {
			display: none;
	}
	.expand {
			display: block;
			color: #f1f2f1;
	}

	nav {
		padding-right: 40px;
	}

	.desktop-view > ul > li {
			display: block;
			padding-top: 7px;
			padding-right: 0px;
	}

	.mobile-view-footer {
		display: block;
		float: right;
	}

	.desktop-view-footer {
		display: none;
	}

	.expand-footer {
		display: block;
	}

	.desktop-view-footer > ul > li {
			display: inline-block;
			padding-right: 0px;
	}

	#copyright {
		display: none;
	}

	#email {
		padding-right: 40px;
	}

	.cdv {
		font-size: 1.5em;
		text-align: center;
		margin: 10px auto auto auto;
		letter-spacing: 10px;
	}

	.git-wrapper {
		margin-top: 20px;
	}

	h2, #git-text {
		font-size: 1.8em;
	}

}