/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
*{ margin: 0; padding: 0; }

html { overflow-x: hidden;overflow-y: scroll;}

body {font-family:Century Gothic;width:100%;background-image:url('images/background.jpg');background-attachment:fixed;background-size:100% 100%;}	


/* Static on Every Page */

#wrapper {
	width:75vw;
	min-height:100%;
	margin-left:auto;
	margin-right:auto;
	background:lightgray;
	border:.25vw solid white;
	overflow:hidden;}

header {
	float:left;
	width:100%;
	height:10vw;
	background-image:url('images/header.png');
	background-size: 100% 100%;
	border-bottom:.25vw solid white;}

header a.left img {
	float:left;
	width:7%;
	margin-top:3.5%;
	margin-left:4.125%;
	border:0;}

header a.right img {
	float:right;
	width:7%;
	margin-top:3.5%;
	margin-right:4.125%;
	border:0;}

nav {width:100%;background-color:#ffa731;}
nav ul {display:block;line-height:2vw;font-size: 1.125vw;font-weight:bold;list-style: none;}
nav ul li {display:inline;float:left;background-color:#ffa731;text-align:center;position:relative;width:16.6666%;}
nav li ul {display:none;}
nav ul li a {display:block;text-decoration: none;color:#ffffff;background:#ffa731;white-space:nowrap;border-bottom:.25vw solid white;}
nav ul li a:hover {background:#000000;}
nav li:hover ul {border:.125vw solid #FFFFFF;display:block;position:absolute;z-index:3000;}
nav li:hover li {float:none;font-size:1vw;}
nav li:hover a {background: #ffa731;}
nav li:hover li a:hover {background: #000000;}



#menuicon {
	width:100%;
	border-top:.25vw solid white;
	border-bottom:.25vw solid white;
	text-align:center;
	background:#ffa731;}

#menuicon input[type="checkbox"] {
    	position: absolute;
	width:100%;
    	display: block;
    	top:-99999px;
    	left:-99999px;}

#menuicon label {
	display:block;
	width:100%;
	color:white;
    	text-align:center;
    	background: #ffa731;}

#menuicon label img{
	width:60%;}

#menuicon input[type="checkbox"]:checked ~ #mobilenav {
    	display: block;}

#mobilenav {
	display:none;
	width: 100%;
	float: left;
	padding: 0;
	list-style: none;
	background-color: white;}
	
#mobilenav li { 
	display:flex-block;
	float:left;
	list-style:none;
	line-height:250%;
	width:100%;
	margin-top:.333%;
	text-align:center;
	background-color: darkgray;}

#mobilenav li a {
	font-weight: bold;
	font-size:5vw;
	line-height:7.5vw;
	color:#ffffff;
	margin-left:auto;
	margin-right:auto;
	text-decoration:none;}

#mobilenav li a:hover {
	color: #fff;
	background-color: #000;
	text-decoration:none;} 



/* Home Page */

	

#stage1 {
	float:left;
	background:lightgray;
	width:100%;
	margin-top:3vw;}

#slider {
	float:left;
	position: relative;
	width:60%;
	height:22.5vw;
	background:#000000;
	margin:0% 4% 3vw 4%;
	overflow: hidden;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;}


slide {width:100%;}

img.slider {
	width:100%;
	height:100vh;}
	
* {box-sizing:border-box;}

.mySlides {display:none;}

.slideshow-container {
	width: 100%;
	position: relative;}

.prev, .next {
	cursor:pointer;
	position:absolute;
	top:50%;
	width:auto;
	padding:1.5vw;
	margin-top:-3vw;
	color:white;
	font-weight:bold;
	font-size:2vw;
	transition:0.6s ease;
	border-radius:0 .5vw .5vw 0;}

.next {
	right: 0;
	border-radius: .5vw 0vw 0vw .5vw;}

.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);}

dots {text-align:center;width:34%;margin-left:33%;border-radius:.5vw;position:absolute;bottom:.75vw;background:none;}

.dot {
	cursor: pointer;
	height: .6vw;
	width: .6vw;
	margin: .25vw;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;}

.active, .dot:hover {
	background-color: #cb0000;}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 2s;
	animation-name: fade;
	animation-duration: 2s;}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}}


@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}}


#featuredvideo {
	float:left;
	width:28%;
	height:22.5vw;
	line-height:19.5vw;
	margin-bottom:3vw;
	background-size: 100% 100%;
	list-style:none;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;
	overflow:hidden;}

#featuredvideo a img {
	float:left;
	width:100%;
	border:0;}

iframe.featured {
	width:100%;
	height:91%;
	vertical-align:middle;}

iframe.music {
	float:left;
	width:100%;
	height:47.5vw;}

#heading1 {
	float:left;
	width:100%;
	background:teal;
	line-height:2vw;
	font-size:1.25vw;
	color:white;
	text-align:left;}

#heading1.orange {
	background:#ffa731;
	color:black;}

#heading1.purple {
	background:#4B0082;
	color:white;}

#heading2 {
	float:left;
	width:100%;
	background:#000000;
	line-height:5vw;
	font-size:3vw;
	color:#ffffff;
	text-align:center;
	font-family:Impact, Century Gothic;
	font-weight:lighter;
	margin-bottom:5%;
	border-top: .5vw solid green;
	border-bottom: .5vw solid green;}

#stage2 {
	float:left;
	background:lightgray;
	width:100%;}

#columncontainer {
	float:left;
	background:lightgray;
	width:60%;
	margin-bottom:4vw;
	margin-right:4%;}

#leftcolumn {
	float:left;
	width:28%;
	margin-left:4%;
	margin-right:4%;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;}

#centercolumn {
	float:left;
	width:46.66666%;}

#rightcolumn {
	float:right;
	width:46.66666%;}

#social {
	float:left;
	width:100%;
	background:#ffffff;
	height:47.5vw;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
	overflow: scroll-y;}

.twitter-timeline {
	width:100%;
	height:50vw;}

#mailer {
	float:left;
	width:100%;
	height:22.5vw;
	background:black;
	margin-bottom:3vw;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;}

form {
	width:100%;
	font-size:1.125vw;}

form p {
	margin:0% 0% 0% 10%;
	color:white;}

form h1 {
	color:#ff0000;
	font-size:1.5vw;
	margin-top:3vw;
	margin-bottom:10%;
	text-align:center;}

/* Mail Chimp Coding Start */

form label {
	margin:0% 0% 0% 10%;
	color:white;}

form input[type=email]{
    	border:0;
	width:80%;
	height:1.75vw;
	font-size:1vw; 
	margin-bottom:10%;
	margin-left:10%;}

/* Mail Chimp Coding End */

form input[type=text]{
    	border:0;
	width:80%;
	height:1.75vw;
	font-size:1vw; 
	margin-bottom:10%;
	margin-left:10%;}

form input[type=submit]{
	border:0;
	padding:3%;
	background:#0000ff;
	color:white;
	font-size:1vw;
	margin-left:10%;}

#newrelease {
	float:left;
	width:100%;
	height:22.5vw;
	margin-bottom:3vw;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;}

#newrelease img {
	float:left;
	width:100%;
	height:20vw;}

#gunghoapp {
	float:left;
	width:100%;
	height:24.5vw;
	background:#ffffff;
	margin:0;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;}
	
#gunghoapp a img{
	float:left;
	width:100%;
	height:24vw;
	margin:0;
	border:0;}

/* Bio Page */

#bio {
	float:left;
	width:92%;
	margin:0vw 3vw 3vw 3vw;
	height:27.5vw;
	background:#424242;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;}

#biopic {
	float:left;
	width:40%;
	margin-bottom:4%;}
	
#biopic img {
	float:left;
	width:90%;
	margin:5%;}

#bioinfo {
	float:left;
	width:56%;
	margin-left:2%;}

#bioinfo p {
	float:left;
	width:97%;
	font-size:2.20vw;
	color:white;
	text-align:justify;
	margin-top:3vw;}

/* Contact Page */

#contact {
	float:left;
	width:92%;
	margin:0vw 3vw 10vw 3vw;
	height:27.5vw;
	background:#ffffff;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;}

#contactpic {
	float:left;
	width:60%;
	margin:6% 20% 0% 20%;}
	
#contactpic img {
	float:left;
	width:100%;}

#contactinfo {
	float:left;
	width:100%;}

#contactinfo p {
	float:left;
	width:100%;
	font-size:1.75vw;
	color:#000000;
	text-align:center;
	margin-bottom:2vw;}

#contactinfo h1 {
	float:left;
	width:100%;
	font-family:arial;
	font-size:2vw;
	font-weight:bold;
	color:#yellow;
	text-align:center;
	margin-top:2.75vw;}

#contactlinks {
	float:left;
	width:100%;}

#contactlinks a img {
	float:left;
	width:8.5%;
	margin-top:6%;
	margin-left:7%;
	border:0;}

/* Music Page */

#music {
	float:left;
	width:92%;
	margin:3vw;
	background:black;
	border:.25vw solid white;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
	box-shadow: 1vw 1vw .5vw #888888;}

#musiccover {
	float:left;
	width:50%;}

#musiccover img {
	float:left;
	width:100%;}

#musicplayer {
	float:left;
	width:50%;
	height:34.5vw;
	border-left:.25vw solid white;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
	overflow-y:scroll;
	overflow-x:hidden;}

#musicplayer audio {
	float:left;
	width:100%;}

#musicplayer h1 {
	float:left;
	width:100%;
	margin-left:3%;
	color:#09aba7;
	font-family:Arial;
	font-size:1.5vw;
	line-height:3vw;
	font-weight:lighter;
	margin-top:3%;}

#musicplayer h2 {
	float:left;
	width:100%;
	background:yellow;	
	color:#000000;
	font-family:Arial;
	font-size:2.5vw;
	line-height:4.5vw;
	text-align:center;}

#donate {
	float:left;
	width:89.5%;
	margin:0vw 3vw 3vw 3vw;
	background:white;
	border:1vw solid teal;}

#donatetext {
	float:left;
	width:47.5%;
	margin:2.5%;}
	
#donatetext p {
	float:left;
	text-align:justify;
	color:#000000;
	font-family:Arial;
	font-size:1vw;
	line-height:2vw;}

#donatebutton {
	float:left;
	width:47.5%;}

#donatebutton form {
	float:left;
	width:100%;
	margin:0;}

#musiccollection {
	float:left;
	width:75vw;
	margin:0vw 0vw 4vw 0vw;
	background:#969696;}

#playerdiv {
	float:left;
	width:28%;
	margin:4% 0% 4% 4%;}

#playerdiv iframe {
	float:left;
	width:100%;
	height:40vw;}

/* Videos Page */


#video {
	float:left;
	width:92%;
	margin:0vw 3vw 3vw 3vw;
	height:38vw;
	background:#000000;
	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	border:.25vw solid white;
	box-shadow: 1vw 1vw .5vw #888888;}


/* Footer */


footer {
	float:left;
	background:#2E2E2E;
	width:100%;
	border-top:.25vw solid white;}

#leftfoot {
	float:left;
	width:35%;
	background:#000000;}

#leftfoot img {
	float:left;
	width:80%;
	margin:10%;}

#centerfoot {
	float:left;
	width:40%;}

#centerfoot li {
	float:left;
	width:50%;
	list-style:none;}

#centerfoot li h1{
	float:left;
	width:100%;
	margin-top:20%;
	margin-bottom:5%;
	text-align:center;
	color:teal;
	font-size:1.75vw;
	font-weight:bold;}
	
#centerfoot li a{
	float:left;
	width:100%;
	text-align:center;
	color:#ffffff;
	font-size:1.25vw;
	padding-top:3%;
	padding-bottom:3%;
	text-decoration:none;}

#rightfoot {
	float:left;
	width:25%;}

#rightfoot img {
	float:left;
	width:70%;
	margin:20% 15% 0% 15%;}

#rightfoot p {
	float:left;
	width:90%;
	margin:5%;
	color:yellow;
	font-size:1vw;
	font-weight:bold;
	text-align:center;
	text-decoration:none;}


/* Mobile Browsers - 1 column */

@media all and (min-width: 0px) and (max-width: 760px){
	#wrapper {width:100%;}
	header {height:13.3333vw;}
	nav {display:none;}
	#stage1 {margin-top:4vw;}
	#slider {width:92%;height:44.5vw;margin:0vw 4vw 0vw 4vw;}
	.prev, .next {padding:2.3vw;margin-top:-4.6vw;font-size:3vw;border-radius:0 .75vw .75vw 0;}
	.next {border-radius: .75vw 0vw 0vw .75vw;}
	dots {text-align:center;width:34%;margin-left:33%;border-radius:.5vw;position:absolute;bottom:.75vw;background:none;}
	.dot {cursor: pointer;height:.92vw;width:.92vw;margin: 0vw .25vw 0vw .25vw;background-color:#bbb;border-radius:50%;display:inline-block;}
	.active, .dot:hover {background-color: #cb0000;}
	#featuredvideo {width:92%;height:auto;margin:4vw;}
	iframe.featured {height:50vw;}
	#heading1 {line-height:6vw;font-size:4vw;}
	#heading2 {line-height:6.6666vw;font-size:4vw;margin-top:3vw;}
	#leftcolumn {display:none;}
	
	#social {height:150vw;width:92vw;}	
	
	.twitter-timeline {height:150vw;width:92vw;}
	
	#columncontainer {width:100%;margin:0vw;}
	
	#centercolumn {width:92%;margin:0;}
	
	#mailer {height:60vw;margin:0vw 4vw 4vw 4vw;}

	form {font-size:3.75vw;}
	form h1 {font-size:5vw;margin:7.5% 5% 5% 5%;}
	form input[type=text]{height:5.75vw;font-size:3.25vw;margin-bottom:5%;}
	form input[type=email]{height:5.75vw;font-size:3.25vw;margin-bottom:5%;}
	form input[type=submit]{font-size:3.25vw;}
	#rightcolumn {float:left;width:92%;margin:4vw;}
	#newrelease {width:100%;height:98.5vw;}
	#newrelease img {height:92vw;}
	#gunghoapp {height:55vw;margin-bottom:4vw;}
	#gunghoapp a img {height:55vw;}
	#bio {height:110vw;margin-bottom:4vw;}
	#biopic {width:92%;margin:0vw 4vw 0vw 3.5vw;}
	#biopic img {width:100%;margin:4vw 0vw 0vw 0vw;}
	#bioinfo {width:92%;margin:1vw 3.5vw 0vw 3.5vw;}
	#bioinfo p {width:100%;font-size:3vw;}
	#contactpic {width:26%;margin:3% 37% 0% 37%;}
	#contactlinks a img {width:7.3333%;margin-top:3%;margin-left:8%;}
	#music {margin:4vw;}
	#musiccover {width:100%;}
	#musicplayer {width:100%;height:60vw;}
	#music h1 {font-size:3vw;line-height:6vw;}
	#donate {width:90%;margin:2vw 4vw 6vw 4vw;}
	#donatetext {width:90%;margin:5%;}
	#donatetext p {font-size:2.5vw;line-height:5vw;}
	#donatebutton {width:100%;margin:0;background:green;padding-bottom:4vw;}
	#donatebutton form {width:100%;}
	#musiccollection {width:100vw;margin:0vw 0vw 4vw 0vw;}
	#playerdiv {width:90vw;margin:5vw 0vw 0vw 4vw;}
	#playerdiv iframe {width:100%;height:100vw;}
	#playerdiv iframe.end {margin-bottom:5vw;}
	#video {height:50.5vw;margin:0vw 4vw 4vw 4vw;}
	#centerfoot li h1 {font-size:2.3333vw;}
	#centerfoot li a {font-size:1.6666vw;}
	#rightfoot p {font-size:1.6666vw;}
}


/* Tablet/Desktop Browsers - 3 columns */


@media all and (min-width: 761px) and (max-width: 1000px) {
	#menuicon {display:none;}
	#mobilenav {display:none;}
	#wrapper {width:100%;}
	header {height:13.3333vw;}
	nav ul {line-height:2.6666vw;font-size: 1.5vw;}
	#stage1 {margin-top:4vw;}
	#slider {height:29.5vw;margin-bottom:4vw;}
	dots {text-align:center;width:34%;margin-left:33%;border-radius:.5vw;position:absolute;bottom:.75vw;background:none;}
	#featuredvideo {height:29.5vw;margin-bottom:4vw;}
	#heading1 {line-height:2.6666vw;font-size: 1.5vw;}
	#heading2 {line-height:6.6666vw;font-size:4vw;}
	#columncontainer {margin-bottom:4vw;}
	#social {height:63.5vw;}	
	.twitter-timeline {height:66.6666vw;}
	#mailer {height:30vw;margin-bottom:4vw;}
	#newrelease {height:30vw;margin-bottom:4vw;}
	#newrelease img {height:26.8888vw;}
	#gunghoapp {height:32.6666vw;margin-bottom:4vw;}
	#gunghoapp a img {height:32.1666vw;}
	#bio {height:36.6666vw;margin:0vw 4vw 4vw 4vw;}
	#bioinfo p {font-size:3vw;margin-top:3.75vw;}
	#contactpic {width:26%;margin:3% 37% 0% 37%;}
	#contactlinks a img {width:7.3333%;margin-top:3%;margin-left:8%;}
	#music {margin:4vw;}
	#musicplayer {height:45vw;}
	#music h1 {font-size:2vw;line-height:4vw;}
	#musiccollection {width:100vw;margin:0vw 0vw 4vw 0vw;}
	#donate {width:90%;margin:2vw 4vw 6vw 4vw;}
	#donatetext p {font-size:1.25vw;line-height:2.5vw;}
	#playerdiv {width:27.5%;margin:4% 0% 4% 4%;}
	#playerdiv iframe {width:100%;height:60vw;}
	#video {height:50.5vw;margin:0vw 4vw 4vw 4vw;}
	#centerfoot li h1 {font-size:2.3333vw;}
	#centerfoot li a {font-size:1.6666vw;}
	#rightfoot p {font-size:1.6666vw;}
}

/* Desktop Browsers - 3 columns with background image */ 

@media all and (min-width: 1001px) {
	#menuicon {display:none;}
	#mobilenav {display:none;}
}