body{

	background-color: black;
	
	background-repeat: repeat;
}
p{
	display:inline-block;
	padding-left: 20px;
	padding-right:20px;
	padding-bottom: 0px;
	background-color: grey;
	color:white;

}
#myDIV{
	position:absolute;
	top:200px;
	text-align: center;
	margin-left: 25%;
	margin-right: 25%;
	padding-top:50px;
	padding-left: 50px;
	padding-bottom:50px;
	padding-right: 50px;
	background-color:white;
	opacity: .5;
}
#myDiv
#title{

	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}
#album{
  float:left;
  top:150px;
  padding-right: 100px;
  position:fixed;
	background-image: url("images/album1.jpg");
	height:500px;
	width:500px;
	filter: grayscale(100%);
	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}
#spotify{
  float:right;
  top:100px;
  left:50%;
  width:50%;

}
a{
	color:white;
	text-decoration: none;
}
p:hover{
	background-color:white;
	color:black;
}
#band{
	text-align: center;
}

#bandpic:hover{
	filter:grayscale(0%);
}


/* referenced from https://codepen.io/g13nn/pen/eHGEF */
header{
	width:100%; 
	background:#ffffff; 
	opacity: .5;
	height:60px; 
	line-height:60px;
	border-bottom:1px solid #dddddd;
}
.hamburger{
  background:none;
  position:absolute;
  top:0;
  right:0;
  line-height:60px;
  padding:5px 35px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:black;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top:0px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}
header{display:inline-block; font-size:12px;}
span{padding-left:20px;}
a{color:#336699;}

/*referenced https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load*/
@keyframes fadeins {
  from {
    opacity:0;
  }

  to {
    opacity:1;
  }
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout{
    from { opacity: 1; }
    to   { opacity: 0; }
}


@keyframes fadeout{
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout{
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout{
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout{
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout{
    from { opacity: 1; }
    to   { opacity: 0; }
}