html {
	background: #4D412A no-repeat center center;
	width:100%;
	height:100%;
	min-height:100%;
	background-size: cover;
}

body {
  color: #5D571C;
  background: none;
}

main {
  display: none;
}

.hide {display: none;}

.buku-border {border-top: 18px solid #ffffff; margin-bottom: 2.2em; opacity: .65; width: 10%;}
header {padding-top: 8%;}
header h1 {margin: 0 auto;}
header h1 img {margin-bottom: 0.74em; width: 100%;}

h2 {font-size: 1.618em; letter-spacing: -1px; color: #5D571C; margin: 0 0 0.618em 0; padding: 0 0 0.618em 0; border-bottom: 6px solid #C3B000;}

.nav ul {list-style: none; margin: 0;}
.nav ul.last {margin-bottom: 0;}
.nav ul li {margin-bottom: 0.618rem;}
.nav ul li.last {margin-bottom: 0;}
.nav ul li a {color: #ffffff; font-weight: bold; letter-spacing: -0.05rem; font-size: 2.618em; display: block; padding: 0.301em 0.618em; background: #ddc700;}
.nav ul li a:hover {color: #ffffff;}
.nav ul li a span {position: relative; top: -4px;}
.nav ul li a.open {color: #ffffff; background-color: #9D8E00; opacity: 1;}

.bio, .booking-column {padding: 1.25rem}
.bio-content, .booking-content {margin-top: 0.618rem; display: none; background: url('../img/sprinkles.png');}
.bio p {font-size: 1.273em; line-height: 1.6; margin-bottom: 1.25em;}
.dropcap-wrap p:first-child:first-letter { float: left; font-size: 64px; line-height: 47px; padding-top: 8px; padding-right: 10px; padding-left: 0; font-weight: bold; margin-left: -4px; color: #ddc700;}
.bio p.no-margin {margin: 0;}
.buku {margin-bottom: 2.5rem;}
#close-bio {font-weight: bold; color: #c51f49; border-top: 6px solid #1a1a1a; padding-top: 1.4em; display: block;}
#close-bio:hover {color: #1a1a1a;}

.booking-content {margin-bottom: 1em;}
.booking-column {font-size: 1.273em; line-height: 1.6;}
.booking-column ul {list-style: none; margin: 0;}
.booking-column ul li {margin-bottom: 0;}
.booking-column a {color: #9D8E00; text-decoration: underline;}
.booking-column a:hover {color: #ab9b00; text-decoration: none;}
.company {font-weight: bold; font-size: 1.273em;}

.social {margin-top: 1rem;}
.social a {display: block; background: #ddc700; color: #ffffff; font-weight: bold; font-size: 1.333em; padding: 1em; line-height: 1.1; margin-bottom: 1em;}
.social a:hover {background: #d0bb00;}
.social a i {margin-right: 0.3125rem; position: relative;}
.social a i.fa-soundcloud {top: -1px;}

footer {padding: .6em 0 6.854em 0; color: #ffffff; font-size: 16px; font-weight: bold; text-align: right;}
footer .copyright {font-size: 14px;}

#first-background, #second-background, #third-background, #fourth-background {height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: -999999;}
#second-background {z-index: -1000000; opacity: 0;}
#third-background {z-index: -1000001;}
#fourth-background {z-index: -1000002;}

@media only screen and (min-width : 320px) and (max-width : 480px) {
	.buku-border {border-top: 12px solid #ffffff; margin-bottom: 1.618em; opacity: .65; width: 10%;}
	.social a {margin-bottom: 0.618rem;}
	.social a span {display: inline;}
	.buku {margin-bottom: 1.618em;}

	footer span {display: block; line-height: 1.4;}
}

@media only screen and (min-width : 1024px) {
	header {padding-top: 9%;}
	footer {padding-bottom: 0;}
  .bio-content, .booking-column {margin-top: 1.618rem; padding: 2.5rem;}
  .social {margin-top: 1.618rem;}
}

@media only screen and (min-width : 1280px) {
	header {padding-top: 10%;}
	footer {padding-bottom: 6.854em;}
}

@media only screen and (min-width : 1440px) {
	header {padding-top: 11%;}
	footer {padding-bottom: 6.854em;}
}

@media only screen and (min-width : 1600px) {
	header {padding-top: 22%;}
	footer {padding-bottom: 6.854em;}
}