* 
	{
	margin:0%;
	padding: 0%;
	text-decoration:none;
	}
	

@keyframes colors {
	0% {color: #0004b3;}
	100% {color: #f7f7f8;}
}

@-webkit-keyframes colors {
	0% {text-color: #0004b3;}
	100% {text-color: #f7f7f8;}
}

@-moz-keyframes colors {
	0% {text-color: #0004b3;}
	100% {text-color: #f7f7f8;}
}

	
	
	
/* Default Content */

body 
	{
	font-size:100%;
	Background-image: url("bandimages/bw3.png");
	background-repeat:no-repeat;
	background-size:100% auto;
	overflow:scroll;
	}
	
nav 
	{	
	position:fixed;
	width:100%;
	height:8%;
	top:3%;
	left:0%;
	text-align: center;
	background-color:rgba(29, 28, 32, 0.71);
	letter-spacing: .1em;
	border-style: ridge;
	border-color: rgba(243, 238, 238, 0.89);
	border:8%;
	}


li
	{
	display:inline;
	font-size:2em;
	font-family:'Roboto';
	word-spacing:12em;
	text-decoration:none;
	font-color: white;
	top:50%;
	}
	
	
ul
	{
	margin-top: 1em;
	}
	
h1
	{
	font-family:'Meie Script';
	font-weight: 100;
	font-size: 12em;
	text-align: center;
	color:rgba(0, 0, 0, 0.62);
	position:static;
	left:20%;
	margin-top:8%;
	}
	
	
h2
	{
	font-family:'Roboto';
	}
	
h3
	{
	font-size:2em;
	position:absolute;
	color:black;
	font-family: 'Roboto';
	}
	
a
	{
	color:#d9d9f4;
	}

a:hover
	{
	color:#4b40a5;
	animation: colors 1s;
	}

body 
	{
	font-size:100%;
	}

h1.subheader
	{
	position:static;
	margin-top:3%;
	font-size: 10em;
	left:27%;
	top:15%;
	}

	


	

	 
	 
	
/* MUSIC PAGE */


body.music
	{
	background-image:url("bandimages/keys_2.png");
	background-size:130%;
	background-image:no-repeat;
	background-color:rgba(169, 166, 166, 0.9);
	}

	
iframe
	{
	position:absolute;
	padding:0%;
	margin-bottom:20%;
	
	}
iframe.vid1
	{
	top:90%;
	left:35%;
	z-index: 100;
	
	}
	
iframe.vid2
	{
	top:50%;
	left:35%;
	
	}

	
h3.song1
	{
	top:84%;
	left:35%;
	color:white;
	
	}
	
h3.song2
	{
	top: 44%;
	left:35%;
	color:white;
	}
 
 p.comp1
 	{
	 position:absolute;
	 top: 45%;
	 left: 45%;
 	}
 	
 p.comp2
 	{
	 position:absolute;
	 top:85%;
	 left:42%;
	 
 	}
 
 
 
/* ABOUT PAGE */
	
body.about
	{
	Background-image: url("bandimages/bw_1.png");
	background-repeat:no-repeat;
	background-size:117%;
	}
	
p
	{
	position:absolute;
	height: 20%;
	width: 30%;
	color:black;
	left:33%;
	top:55%;
	font-size:150%;
	font-family: 'Roboto';
	letter-spacing: .05em;
	line-height: 1.2em;
	}
	
p.two
	{
	top: 77%;
	margin-bottom:15%;
	line-height: 1.2em;
	}
	

div.box
	{
	height: 45%;
	width: 35%;
	background-color: rgba(232, 228, 228, 0.76);
	position:absolute;
	left: 30%;
	top:50%;
	
	}	


/* Tour Page */


body.tour
	{
	Background-image: url("bandimages/purple_1.jpg");
	background-repeat:no-repeat;
	background-size:100%;
	}

div.box1
	{
	height:8em;
	width:52%;
	background-color: rgba(232, 228, 228, 0.7);
	position:absolute;
	left: 22%;
	top:63%;
	}



div.box2
	{
	height:8em;
	width:52%;
	background-color: rgba(232, 228, 228, 0.7);
	position: absolute;
	left:22%;
	top:95%;
	}


a.dates
	{
	color:#9595b1;
	font-size:3em;
	
	}
	
a.dates:hover
	{
	animation:colors 1s;
	}
	
	
h2.date1
	{
	position:absolute;
	left:26%;
	top:65%;
	z-index:100;
	
	}
	
	
	
h2.date2
	{
	color:#040404;
	position:absolute;
	top: 96.5%;
	left:26%;
	color:white;
	z-index:100; 
	}

h3.tour1
	{
	position:absolute;
	top:65%;
	left:40%;
	}

h3.tour2
	{
	position:absolute;
	top: 98%;
	left:40%;
	}

p.venue1
	{
	top:70%;
	left:40%;
	}
	
p.venue2
	{
	top:103%;
	left:40%;
	}


/* RESPONSIVE */


/* MEDIUM */

@media screen and (min-width: 1101px) and (max-width: 1700px) {
	
h1
	{
	font-size:8em;
	}
	
h1.subheader
	{
	font-size:7em;
	margin-top:1em;
	}
	
li
	{
	font-size: 1.5em;
	}

p
	{
	font-size: 110%;
	}

/* responsive music page */


iframe.vid1
	{
	
	left:30%;
	
	}

iframe.vid2
	{
	left:30%;
	top:40%;
	}	
	
h3.song1
	{
	left:30%;
	font-size:1.5em;
	top:86%;
	}


h3.song2
	{
	left:30%;
	font-size:1.5em;
	top:36%;
	}

p.comp1
	{
	font-size:1em;
	top:37%;
	left:41%;
	
	}

p.comp2
	{
	top:87%;
	font-size:1em;
	left:38%;
	}

/* responsive tour page */

/* Tour Page */


div.box1
	{
	height:8em;
	width:50%;
	background-color: rgba(232, 228, 228, 0.7);
	position:absolute;
	left: 23%;
	top:53%;
	}



div.box2
	{
	height:8em;
	width:50%;
	background-color: rgba(232, 228, 228, 0.7);
	position: absolute;
	left:23%;
	top:84%;
	}


a.dates
	{
	font-size:2.5em;
	}
	
a.chatt
	{
	color:#030303;
	}	
	

h2.date1
	{
	position:absolute;
	left:26%;
	top:55.5%;
	z-index:100;
	
	}
	
	
	
h2.date2
	{
	position:absolute;
	top: 86.5%;
	left:26%;
	}

h3.tour1
	{
	position:absolute;
	top:55%;
	left:42%;
	font-size:1.9em;
	}

h3.tour2
	{
	position:absolute;
	top: 88%;
	left:42%;
	font-size:1.9em;
	}

p.venue1
	{
	top:60%;
	left:42%;
	font-size: 1.5em;
	
	}
	
p.venue2
	{
	top:93%;
	left:42%;
	font-size:1.5em;
	}


/* Responsive About Page */

p.two
	{
	top: 77%;
	margin-bottom:15%;
	}
	

div.box
	{

	background-color: rgba(232, 228, 228, 0.76);
	
	left: 34%;
	top:50%;
	
	}	

p
	{
	left:37%;
	}

}


/* TABLET */
@media screen and (min-width: 751px) and (max-width: 1100px) {
	
	
body
	{
	background-size:180%;
	}	
	
h1
	{
	position:static;
	font-size:9em;
	top:20%;
	left:10%;
	}
	
nav
	{
	height:4em;
	}
	
h1.subheader
	{
	font-size:7em;
	left:20%;
	margin-top:1em;
	
	
	}
	
li
	{
	font-size: 2em;
	word-spacing: 2em;
	
	}

p
	{
	font-size: 110%;
	}

/* responsive tablet music page */

body.music
	{
	background-size:200%;
	}

iframe.vid1
	{
	
	left:25%;
	margin-bottom:5%;
	padding-bottom:10%;
	margin-top:5%;
	
	}

iframe.vid2
	{
	left:25%;
	top:40%;
	margin-top:5%;
	}	
	
h3.song1
	{
	left:25%;
	font-size:1.5em;
	top:92%;
	}


h3.song2
	{
	left:25%;
	font-size:1.5em;
	top:42%;
	}

p.comp1
	{
	font-size:1em;
	top:39%;
	left:40%;
	
	}

p.comp2
	{
	top:88.5%;
	font-size:1em;
	left:36%;
	}

/* responsive tablet tour page */

/* Tour Page */


body.tour
	{
	background-size: 180%;
	}
	
div.box1
	{
	height:9em;
	width:65%;
	background-color: rgba(232, 228, 228, 0.7);
	position:absolute;
	left: 23%;
	top:51%;
	}

div.box2
	{
	height:9em;
	width:65%;
	background-color: rgba(232, 228, 228, 0.7);
	position: absolute;
	left:23%;
	top:84%;
	}
	
a.dates
	{
	font-size:2.5em;
	
	}

a.chatt
	{
	color:#030303;
	}	
	
	
h2.date1
	{
	left:26%;
	top:57%;
	}
	
h2.date2
	{
	top: 88%;
	left:26%;
	}

h3.tour1
	{
	top:55%;
	left:48%;
	font-size:1.9em;
	}

h3.tour2
	{
	top: 88%;
	left:48%;
	font-size:1.9em;
	}

p.venue1
	{
	top:60%;
	left:48%;
	font-size: 1.5em;
	}
	
p.venue2
	{
	top:93%;
	left:48%;
	font-size:1.5em;
	}


/* Responsive tablet About Page */

body.about
	{
	background-size:180%;
	}
	
p.two
	{
	top: 77%;
	margin-bottom:15%;
	}
	

div.box
	{
	width:80%;
	height:50%;
	left: 12%;
	top:40%;
	margin-top:3%;
	}	

p
	{
	left:22%;
	width:65%;
	font-size:1.3em;
	top:45%;
	margin-top:3%;
	}


p.two
	{
	top:67%;
	margin-bottom:20%;
	}


 }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
/* SMALL  */

@media screen and (max-width: 750px) 

{
	
	
body
	{
	background-size:200%;
	}	
	
h1
	{
	font-size:4em;
	top:40%;
	margin-top:3em;
	}
	
nav
	{
	height:4em;
	top:5%;
	}
	
h1.subheader
	{
	font-size:3em;
	left:20%;
	margin-top:2em;
	}
	
li
	{
	font-size: 1.5em;
	word-spacing: 2em;
	}



/* responsive small music page */

body.music
	{
	background-size:300%;
	}

iframe.vid1
	{
	width:15em;
	height:10em;
	left:22%;
	top: 80%;
	}

iframe.vid2
	{
	width:15em;
	height:10em;
	left:22%;
	top:40%;
	}	
	
h3.song1
	{
	left:22%;
	font-size:1.2em;
	top:75%;
	}


h3.song2
	{
	left:22%;
	font-size:1.2em;
	top:35%;
	}

p.comp1
	{
	font-size:1em;
	top:33.5%;
	left:55%;
	}

p.comp2
	{
	top:73.5%;
	font-size:1em;
	left:45%;
	}

/* responsive small tour page */



body.tour
	{
	background-size: 230%;
	}
	
div.box1
	{
	height:8em;
	width:22em;
	top:35%;
	left:4%;
	}

div.box2
	{
	height:8em;
	width:22em;
	left:4%;
	top:68%;
	}
	
a.dates
	{
	font-size:2em;
	}
	
a.chatt
	{
	color:#030303;
	}	
	
h2.date1
	{
	left:28%;
	top:35%;
	}
	
h2.date2
	{
	top: 68%;
	left:30%;
	}

h3.tour1
	{
	top:45%;
	left:26%;
	font-size:1.4em;
	}

h3.tour2
	{
	top: 77%;
	left:26%;
	font-size:1.4em;
	}

p.venue1
	{
	top:50%;
	left:16%;
	font-size: 1.1em;
	width:17em;
	}
	
p.venue2
	{
	top:82%;
	left:14%;
	font-size:1.1em;
	width:17em;
	}


/* Responsive small About Page */

body.about
	{
	background-size:200%;
	}
	

div.box
	{
	width:80%;
	height:62%;
	left: 12%;
	top:40%;
	}	


p
	{
	left:22%;
	width:65%;
	font-size:1em;
	top:45%;
	}


p.two
	{
	top:74%;
	}

}