html {
	min-height: 100%;
}

body {
	color: #fff;
	margin: 0;
	padding: 0;
}

h2 {
	font-family: 'Amatic SC', cursive;
	font-weight: 300;
	text-align: center;
	font-size: 35pt;
	margin-top: 60px;
	margin-bottom: 80px;
}

a, img {
	border: none;
	outline: none;
	text-decoration: none;
}

#topbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,0.25);
	z-index: 9999;
}

#logo {
	float: left;
	font-size: 42pt;
	padding-left: 5%;
	width: 15%;
	margin-top: 8px;
	font-family: 'Amatic SC', cursive;
	font-weight: 300;
}

#main_nav {
	font-family: 'Oswald', sans-serif;
	font-size: 16pt;
	float: left;
	width: 50%;
	margin-left: 30%;
}

#main_nav ul {
	width: 100%;
	padding: 0;
	margin: 0;
}

#main_nav ul li {
	list-style: none;
	display: inline-block;
	width: 20%;
	text-align: center;
	padding: 30px 0 30px 0;
	cursor: pointer;
}

#main_nav ul li:hover {
	background: #d2781f;
}

.nav_active {
	background: #d2781f;
}

#mobile_icon, #mobile_checkbox {
	display: none;
}

#mobile_icon {
	width: 50px;
	height: 50px;
	margin-top: 20px;
	background: url(../img/burger.png);
	float: left;
	cursor: pointer;
}

#mobile_checkbox:checked ~ #main_nav {
	display: block;
}

@media screen and (max-width: 1000px) {
	body #main_nav {
		width: 65%;
		margin-left: 15%;
	}
}

/* Mobile navigation MQ */
@media screen and (max-width: 950px) {  
	html body #main_nav {
		display: none;
		float: none;
		margin-top: 90px;
		margin-left: 0;
		width: 100%;
	}
	body #main_nav li {
		display: block;
		width: 100%;
		border-top: solid 1px #1e1e1e;
		background: #141414;
	}
	body #mobile_icon {
		display: block;
	}
	body#logo {
		float: none;
	}
}

@media screen and (max-width: 1024px) {
	body #main_nav {
		width: 60%;
		margin-left: 20%;
	}
	body #title {
		font-size: 150pt;
	}
	
	body #dotbiz, body #home_text p {
		font-size: 10pt;
	}	
	body #about_content {
		padding: 25px 75px 100px 75px;
	}
	body #contact_container {
		width: 100%;
		padding: 0 25px 0 25px;
	}
	body #music_player {
		width: 100%;
		padding-top: 0px;
	}
	body #sounds_content {
		padding: 25px 100px 100px 100px;
	}
	body #duration {
		width: 75%; 
	}
}

@media screen and (max-width: 680px) {
	body #sounds_content {
		padding: 25px 15px 100px 15px;
	}
	body #music_top {
		padding: 40px 50px 50px 50px;
	}
}

@media screen and (max-width: 650px) {

	body #title {
		font-size: 120pt;
	}
	body #about_content {
		padding: 25px 15px 100px 15px;
	}
	
	body #about_content p {
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 550px) {
		body #title {
		font-size: 90pt;
	}
	body #home_text {
		top: 25%;
	}
}


	#home_page {
		position: relative;
		background: url(../img/home_bg2.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		-o-background-size: cover;
		height: 100vh;
		min-height: 500px;
	}
	
	#home_text {
		text-align: center;
		 position: absolute;
		  top: 20%;
		  left: 50%;
		  transform: translate(-50%, -20%);
	}
	
	#title {
		font-family: 'Amatic SC', cursive;
		font-weight: 300;
		font-size: 200pt;
		display: inline;
		line-height: 80%;
	}
	
	#home_text p {
		letter-spacing: 4px;
	}
	
	#dotbiz, #home_text p {
		font-family: 'Oswald', sans-serif;
		font-size: 11pt;
	}	
	
	#begin {
		width: 60px;
		height: 60px;
		padding-top: 15px;
		background: rgba(0,0,0,0.4);
		font-family: Arial, sans-serif;
		font-size: 14pt;
		border-radius: 30px;
		position: absolute;
		bottom: 50px;
		left: calc(50% - 30px);
		text-align: center;
		verticle-align: middle;
		display: inline-block;
		color: #fff;
		cursor: pointer;
	}
	
	#begin:hover {
		background: #d2781f;
	}
	
	#begin_text {
		text-align: center;
		color: #ffa246;
		position: absolute;
		bottom: 110px;
		left: calc(50% - 65px);
		font-family: 'Oswald', sans-serif;
		font-size: 10pt;
		letter-spacing: 2px;
	}
	
	#about_page {
		min-height: 350px;
		padding-top: 1px;
		background: url(../img/about_bg.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		-o-background-size: cover;
	}
	
	#about_content {
		padding: 25px 150px 100px 150px;
		font-family: 'Oswald', sans-serif;
		font-size: 13pt;
		letter-spacing: 2px;
	}
	
	#gallery_page {
		background: #141414;
	}
	
	.mfp-wrap {
		z-index: 10000;
	}
	
	#sounds_page {
		min-height: 350px;
		padding-top: 1px;
		background: url(../img/about_bg.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		-o-background-size: cover;
	}
	
	#sounds_content {
		padding: 25px 150px 100px 150px;
		font-family: 'Oswald', sans-serif;
		font-size: 13pt;
		letter-spacing: 2px;
	}
	
	#music_player {
		font-family: 'Open Sans', Arial, sans-serif;
		font-weight: 300;
		width: 620px;
		margin: 0 auto;
	}

	#music_top {
		background: url(../img/top_bg.jpg);
		background-repeat: repeat-x;
		width: 100%; /* 620px inc padding */
		height: 212px; /* 212px inc padding */
		padding: 50px 50px 50px 50px;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	/*#album_holder {
		width: 140px;
		height: 140px;
		background: #000;
		float: left;
	}*/

	#music_details {
		float: none;
		text-align: center;
	}

	#artist, #song {
		font-size: 16pt;
		font-weight: 400;
	}

	#artist {
		color: #f7ffff;
	}

	#song {
		color: #7f9caa;
	}

	#album {
		color: #acc4d0;
		font-size: 10pt;
		margin-bottom: 16px;
	}

	#controls {
		width: 130px;
		margin: 0 auto;
	}

	#prev {
		width: 33px;
		height: 33px;
		background: url(../img/prev.png);
		margin: 8px 8px 0 0;
	}

	#playpause {
		width: 48px;
		height: 48px;
		background: url(../img/play.png);
	}

	#next {
		width: 33px;
		height: 33px;
		background: url(../img/next.png);
		margin: 8px 0 0 8px
	}

	#prev, #next, #playpause {
		float: left;
		background-size: 100%;
		cursor: pointer;
	}

	#time {
		margin-top: 2px;
		color: #f7ffff;
		font-size: 9pt;
		text-align: right;
	}

	#duration {
		width: 350px;
		height: 10px;
		background: url(../img/bar_empty.jpg);
		background-repeat: repeat-x;
		margin: 0 auto;
	}

	#current_time {
		width: 0%;
		height: 10px;
		background: url(../img/bar_fill.jpg);
		background-repeat: repeat-x;
	}

	#album_image {
		width: 100%;
		height: auto;
	}

	#music_bottom {
		background: url(../img/bottom_bg.jpg);
		background-repeat: repeat-x;
		width: 100%; /* 620px incl padding */
		height: 248px; /* 248px incl padding */
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		padding: 25px 35px 25px 35px;
	}

	#music_playlist {
		background: #030a10;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.song {
		color: #b9cad1;
		padding: 10px;
		border-bottom: solid 1px #3f5259;
		font-size: 11pt;
		cursor: pointer;
	}

	.song:hover {
		background: #07131d;
	}

	.current_song {
		background: #07131d;
	}

	#song_duration {
		float: right;
	}
	
	.image {
		padding: 0;
		margin: 0;
	}
	
	.row {
		margin: 0;
		padding: 0;
	}
	
	#contact_page {
		background: url(../img/contact_bg.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		-o-background-size: cover;
	}
	
	#contact_page p {
		color: #535353;
	}
	
	#contact_page input, #contact_page textarea {
		background: rgba(0,0,0,0.5);
		outline: none;
		border: none;
		width: 100%;
		padding: 10px 25px 10px 25px;
		margin-bottom: 40px;
	}
	
	#contact_page h3 {
		font-size: 10pt;
		font-weight: normal;
		text-align: center;
		color: #cacaca;
	}
	
	#contact_feedback {
		width: 100%;
		padding: 8px 15px 8px 15px;
		background: #b11010;
		border-radius: 2px;
		-wekit-border-radius: 2px;
		-moz-border-radius: 2px;
		-o-border-radius: 2px;
		display: none;
		margin-bottom: 15px;
	}
	
	#contact_submit {
		background: #D2781F;
		color: #fff;
		outline: none;
		border: none;
		width: 100%;
		padding: 20px;
		cursor: pointer;
		font-weight: bold;
		font-size: 13pt;
	}
	
	#contact_processing {
		color: #cacaca;
		font-size: 10px;
		font-style: italic;
	}
	
	#contact_submit:hover {
		background: #f98d22;
	}
	
	#contact_page h2 {
		margin-top: 100px;
		margin-bottom: 40px;
	}
	
	#contact_container {
		width: 800px;
		margin: 0 auto;
		margin-bottom: 100px;
	}
	
.page {
	min-height: 100vh;
	padding-top: 1px;
	padding-bottom: 100px;
}

.white {
	color: #fff;
}

.clear {
	clear: both;
}