/* banner nav links */
.class1 a {font-family:gill sans, sans-serif; color:#ffffff; font-size: calc(.5em + .55vw); display:inline-block; font-weight: bold; padding: 14px 20px 14px 20px;
	-webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease; }
.class1 a:link {text-decoration:none;}
.class1 a:hover {color:#ffffff; background: #937c0f;
	-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; }
.class1 a:visited {text-decoration:none; }
.class1 a:active {text-decoration:none; }


/* footer nav2 links */
.class2 a {font-family:gill sans, sans-serif; color:#bababc; font-size: calc(.4em + .45vw); line-height: 150%; padding: 4px 10px 4px 10px;
	-webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease; }
.class2 a:link {text-decoration:none;}
.class2 a:hover {background: #505050; color: #937c0f; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1;}
.class2 a:visited {text-decoration:none;}
.class2 a:active {text-decoration:none;}


/* text links */
.class3 a {font-family:gill sans, sans-serif; color:#937c0f; font-size: calc(.45em + .55vw); padding: 4px 10px 4px 10px;}
.class3 a:link {text-decoration:none;}
.class3 a:hover {background:#505050;
 	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.class3 a:visited {text-decoration:none;}
.class3 a:active {text-decoration:none;}




.bodytext {font-family:gill sans, sans-serif; color:#cfcece; font-size: calc(.45em + .55vw);   line-height:130%; }

.bodytextlg {font-family:gill sans, sans-serif; color:#cfcece; font-size: calc(.5em + .6vw);   line-height:140%; }

.titletextgd {font-family:gill sans, sans-serif; color:#937c0f; font-size: calc(.45em + .6vw); font-weight: bold; line-height:140%; }

.tabletext {font-family:gill sans, sans-serif; color:#cfcece; font-size: calc(.35em + .45vw);   line-height:130%; }

.copytext {font-family:gill sans,sans-serif; color:#bababc; font-size: calc(.4em + .45vw); line-height: 150%; }




a img { border: none; }



.wide90 { width: 90%;}



html,body { 
margin: 0px;
padding: 0px;
background: #000000;
}




#container {
width: 70%;
margin: 0px auto 0px auto;
}


		#title {
		position: relative;
		margin: -80px 0 0 60px;
		width: 100%;
		z-index: 100;
		text-align: center;
		clear: both;
		}


			/* for MOVING IMAGE BEHIND TEXT */
			h1 {font-family:arial black; font-weight:900; font-size: calc(3em + 3.5vw); text-transform:uppercase; line-height: 100%; }


			.bgClip {background-image:url("../images/sub_textback_guitarsbw_long.jpg");
			background-position:0 35%;
			color:transparent;
			padding:20px 40px;
			-webkit-background-clip:text;
				-moz-background-clip:text;
				background-clip:text;
				-webkit-text-fill-color:transparent;
			 -webkit-animation:BackgroundAnimated 25s linear infinite alternate;
				-moz-animation:BackgroundAnimated 25s linear infinite alternate;
				-ms-animation:BackgroundAnimated 25s linear infinite alternate;
				-o-animation:BackgroundAnimated 25s linear infinite alternate;
				animation:BackgroundAnimated 25s linear infinite alternate;
			}

			@keyframe BackgroundAnimated {
			  from {
				background-position:0 0
			  }
			  to {
				background-position:100% 0
			  }
			}

			@-webkit-keyframes BackgroundAnimated {
				from {
					background-position:0 0
				}
				to {
					background-position:100% 0
				}
			}
				@-ms-keyframes BackgroundAnimated {<     from {
					background-position:0 0
				}
				to {
					background-position:100% 0
				}
			}
				@-moz-keyframes BackgroundAnimated {
				from {
					background-position:0 0
				}
				to {
					background-position:100% 0
				}
			}



		#drums {
		position: relative;
		margin: -70px 0 0 0;
		width: 39%;
		float: left;
		}


		#nav1{
		position: relative;
		float: left;
		text-align: right;
		margin: -40px 25px 0 0;
		width: 28%;
		background: #000000;
		z-index: 100;
		}
	

		#hoffner {
		position: relative;
		margin: -70px 0 0 0;
		width: 30%;
		float: left;
		z-index: 1;
		}



		#keys {
		position: relative;
		float: left;
		margin: -200px 0 0 80px;
		width: 60%;
		z-index: 100;
		}


	
	

#footer {
position: relative;
float: left;
width: 100%;
margin: 30px auto 100px auto;
}


		#nav2 {
		text-align:center;	
		}







	
/* DESKTOP MEDIUM CODE 1301 to 1600*/


	@media (max-width: 1600px) {


		/* banner nav links */
		.class1 a {padding: 10px 18px 10px 18px; }


		/* for MOVING IMAGE BEHIND TEXT */
		h1 {font-family:arial black; font-weight:900; font-size: calc(3em + 3vw); text-transform:uppercase;}

		#drums {
		margin: -40px 0 0 0;
		}


		#hoffner {
		margin: -40px 0 0 0;
		}


		#keys {
		margin: -120px 0 0 80px;
		}










/* DESKTOP SMALL CODE 701 to 1300*/

	
	@media (max-width: 1300px) {



		/* banner nav links */
		.class1 a {padding: 6px 10px 6px 10px; }


		/* for MOVING IMAGE BEHIND TEXT */
		h1 {font-family:arial black; font-weight:900; font-size: calc(2em + 2.5vw); text-transform:uppercase;}


		.wide90 { width: 80%;}


		#container {
		width: 80%;
		}


		#title {
		margin: -40px 0 0 40px;
		}


		#drums {
		margin: -40px 0 0 0;
		}


		#nav1{
		margin: -40px 20px 0 0;
		width: 26%;
		}


		#hoffner {
		margin: -40px 0 0 0;
		}


		#keys {
		margin: -40px 0 -20px 35px;
		}







/* CELLPHONE and SMALL TABLET CODE 768 and smaller*/
	

	@media (max-width: 700px) {


		/* banner nav links */
		.class1 a {padding: 6px 10px 6px 10px; }


		/* footer nav2 links *//* footer nav2 links */
		.class2 a {font-size: calc(.5em + .3vw);
		 padding: 3px 6px 3px 6px;}


		/* for MOVING IMAGE BEHIND TEXT */
		h1 {font-family:arial black; font-weight:900; font-size: calc(2em + 3.5vw); text-transform:uppercase;}


		.wide90 { width: 90%;}


		#title {
		margin: -25px 0 0 0;
		}


		#drums {
		margin: -10px 0 0 0;
		width: 50%;
		}


		#nav1{
		margin: -10px 0 0 0;
		width: 50%;
		}


		#hoffner {
		margin: -30px 0 0 10px;
		}


		#keys {
		margin: 20px 0 0 20px;
		width: 55%;
		}