@charset "utf-8";
/* CSS Document */

body {
	background-color: #000;
	font-family: 'Slabo 27px', serif;
	color: #e8e8e8;
}
a {
	color: #e8e8e8;
	text-decoration: none;
}
p {
	display: block;
	font-size: 16px;
}
#bgcolor {
	position: fixed;
	height: 100%;
	width: 60%;
	left: 20%;
	right: 50%;
	top: 0;
	background-color: #000;
	opacity: .5;
}




/* Navigation */
#navLogo {
	position: fixed;
	top: 4%;
	right: 4%;
	opacity: .8;
    transition: .3s;
}
#navLogo:hover {
	opacity: .2;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: .5s;
    padding-top: 10%;
}
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	color: #414141;
    display: block;
    transition: .3s;
}
.sidenav a:hover {
    color: #e8e8e8;
}
.sidenav .closeBtn {
    position: absolute;
    top: -.5%;	
    font-size: 75px;
    margin-left: 5%;
}

@media screen and (max-width: 1080px) {
  .sidenav {padding-top: 20%;}
}
@media screen and (max-width: 720px) {
  .sidenav {padding-top: 25%;}
}
@media screen and (max-width: 480px) {
  .sidenav {padding-top: 40%;}
}

#menu {
	position: fixed;
	top: 4%;
	left: 3%;
	opacity: .8;
	font-size: 30px; 
	z-index: 200px;
	color: #e8e8e8;
}
#currentPage {
	color: #e8e8e8;
}
/* Navigation */




/* Home */
#btnHome {
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
    z-index: 100;
}
#btnEnter {	
	font-size: 18px;
	top: 70%;
	right: 45%;
	position: absolute;
	width: 120px;
	height: 25px;
	border-radius: 5px;
	-webkit-transition: all .8s;
	text-decoration: none;
	color: #e8e8e8;
	opacity: .8;
}
#btnEnter:hover {
	color: #646464;
	opacity: 1;
	background-color: #e8e8e8;
	box-shadow: 0px 0px 5px 5px #e8e8e8;
}
#btnEnter:active {
	color: #646464;
	opacity: .8;
	background-color: #e8e8e8;
	box-shadow: 0px 0px 0px 0px #e8e8e8;
}
/* Home */




/*  Music */
#albumWrapper {
	left: 20%;
	width: 60%;
	height: 100%;
	position: relative;
	text-align: center;
}
#albumCover {
	width: 50%;
	padding-top: 8%;
	opacity: 1;
	-webkit-transition: all .7s;
}
#albumList {
	padding-top: 2%;
	padding-bottom: 10%;
	width: 50%;
	left: 25%;
	position: relative;
	-webkit-transition: all .7s;
}
#itunesLink {
	font-size: 100%;
	text-align: center;
	-webkit-transition: all .7s;
}
.musicList {
	opacity: 1;
	transition: all .5s;
}
.musicList:hover {
	opacity: .3;
}

@media only screen and (max-width: 480px) {
	#albumCover {padding-top: 45%;}
	#itunesLink {font-size: 70%;}
}
/*  Music */




/*  Gallery*/
.imgInfo {
	font-size: 16px;
}
#musicWrapper{
	position: relative;
	display: block;
	padding-top: 8%;
	-webkit-transition: all .7s;
}
#galleryWrapper{
	position: relative;
	display: block;
	left: 1.5%;
	top: 40%;
	font-size: 12px;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.youtubeEmbed {
	width: 90%;
	height: 90%;
	left: 20%;
	padding: 5%;
}

@media only screen and (max-width: 480px) {
	.col {margin: 1% .5% 1% 0%;}
	.span_1_of_4 {width: 114%;}
	.span_4_of_4 { width: 80%;}
	#musicWrapper {padding-top: 45%;}
}
/*  Gallery*/




/* About */
#bioWrapper {
	left: 22.5%;
	width: 60%;
	height: 100%;
	position: relative;
    z-index: 99;
	-webkit-transition: all .7s;
}
#picBio {
	top: 12.5%;
	width: 50%;
	left: 20%;
	position: absolute;
	-webkit-transition: all .6s;
}
#picBio:hover {
	opacity: .4;
}
#contentBio {
	font-size: 16px;
	top: 65%;
	width: 90%;
	position: absolute;
	z-index: 100;
	-webkit-transition: all .7s;
	color: #e8e8e8;
}

@media only screen and (max-width: 1200px) {
	#contentBio {top: 55%; font-size: 15px;}
}
@media only screen and (max-width: 960px) {
	#contentBio {top: 47.5%; font-size: 14px;}
}
@media only screen and (max-width: 800px) {
	#contentBio {top: 42.5%; font-size: 13px;}
}
@media only screen and (max-width: 650px) {
	#contentBio {top: 35%; font-size: 12px;}
}
@media only screen and (max-width: 500px) {
	#contentBio {top: 30%; font-size: 11px;}
}
@media only screen and (max-width: 380px) {
	#contentBio {top: 25%; font-size: 10px;}
}
@media only screen and (max-height: 600px) {
	#contentBio {top: 75%; font-size: 14px;}
}
@media only screen and (max-height: 500px) {
	#contentBio {top: 77.5%; font-size: 12px;}
}
/* About */




/* Event */
#eventWrapper {
	margin-top: 0%;
	left: 20%;
	width: 60%;
	height: 100%;
	position: relative;
    z-index: 99;
	-webkit-transition: all .7s;
}
#tableWrapper {
	left: 22.5%;
	width: 60%;
	height: 100%;
	position: relative;
	opacity: 1;
	-webkit-transition: all .7s;
}
#eventTable {
	width: 90%;
	position: relative;
	left: 1%;
	opacity: 1;
    z-index: 100;
	color: #e8e8e8;
}
table, th, td {
    border: 1px solid #e8e8e8;
    border-collapse: collapse;
	text-align: center;
}
th, td {
	padding: 16px;
	font-size: 16px;
	color: #e8e8e8;
	-webkit-transition: all .6s;
}
#upcoming {
	padding-top: 8%;
    position: relative;
	color: #414141;
	font-size: 36px;
	text-align: center;
    -webkit-animation: colorChange 6s infinite; 
	-webkit-animation-timing-function: linear;
	-webkit-transition: all .6s;
}
@-webkit-keyframes colorChange {
    0% {color: #252525;}
    50% {color: #e8e8e8;}
    100% {color: #252525;}
}
@media only screen and (max-width: 700px) {
	#upcoming {font-size: 20px; padding-top: 11%;}
	th, td {padding: 10px; font-size: 14px;}
}
@media only screen and (max-width: 480px) {
	#upcoming {font-size: 16px; padding-top: 15%;}
	th, td {padding: 3px; font-size: 10px;}
}

.ticket {
	color: #e8e8e8; 
	text-decoration: underline;
	opacity: 1;
	-webkit-transition: all .6s;
}
.ticket:hover {
	opacity: .2;	
}
/* Event */




/* Contact */
#formWrapper {
	left: 20%;
	width: 60%;
	height: 100%;
	position: relative;
    z-index: 99;
	-webkit-transition: all .7s;
}
.inputContent {
	padding: 10px;
	text-align: center;
}
#ContactTitle {
	opacity: 1;
	padding-top: 8%;
    position: relative;
	color: #e8e8e8;
	font-size: 36px;
	text-align: center;
}

@media only screen and (max-width: 700px) {
	#ContactTitle {font-size: 20px; padding-top: 11%;}
}
@media only screen and (max-width: 480px) {
	#ContactTitle {font-size: 16px; padding-top: 15%;}
}
/* Contact */



/* Background Video Loop */
#pageBgImg1, #pageBgImg2 {
    visibility: hidden;
}
.pageBg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.pageBgVideo {
    visibility: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
}
video {
	position: fixed; 
	right: 0; 
	bottom: 0;  
	z-index: -100px; 
	display:flex;
}
/* Background Video Loop */




/* Footer */
footer {
	position: fixed;
	bottom: 2.5%;
	right: 2.5%;
}
#socialIcon {
	position: relative;
	display: inline-flex;
}
.icons {
	padding: 8px;
	opacity: .2;
	-webkit-transition: all .3s;
}
.icons:hover {
	opacity: 1;
}
/* Footer */