/* banner nav HOME links */
.class1 a {font-family:gill sans, sans-serif; color:#ffffff; font-size:18px;    display:inline-block; letter-spacing:1px; padding-right:8px; padding-left:8px; padding-top:2px; padding-bottom:2px;
	-webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
}
.class1 a:link {text-decoration:none;}
.class1 a:hover {color:#900f42; -moz-border-radius: 15px; border-radius: 15px; background: #a5a0a2;}
.class1 a:visited {text-decoration:none; }
.class1 a:active {text-decoration:none; }


/* banner nav SUB links */
.class1sub a {font-family:gill sans, sans-serif; color:#ffffff; font-size:18px; display:inline-block; letter-spacing:1px; padding-right:7px; padding-left:7px; padding-top:1.5px; padding-bottom:1.5px;
	-webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5;
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
}
.class1sub a:link {text-decoration:none;}
.class1sub a:hover {color:#900f42; -moz-border-radius: 15px; border-radius: 15px; background: #a5a0a2;}
.class1sub a:visited {text-decoration:none; }
.class1sub a:active {text-decoration:none; }


/* nav2 links */
.class2 a {font-family:gill sans, sans-serif;
color:#a5a0a2; font-size:14px; padding-top:3px; padding-bottom:3px;  padding-right:8px; padding-left:8px; line-height: 150%; 
	-webkit-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	transition: all 1.5s ease;
}
.class2 a:link {text-decoration:none;}
.class2 a:hover {border:1px solid #505050; padding-right:8px; padding-left:8px; 
padding-right:7px; padding-left:7px; -moz-border-radius:6px; border-radius:6px; }
.class2 a:visited {text-decoration:none;}
.class2 a:active {text-decoration:none;}


/* text links */
.class3 a {font-family:gill sans, sans-serif; color:#b67890; font-size:18px; font-weight:normal;}
.class3 a:link {text-decoration:none;}
.class3 a:hover {background:#505050; padding-right:10px; padding-left:10px; padding-top:4px; padding-bottom:5px;
 -moz-border-radius: 10px; border-radius: 10px; 
 	-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;}


/* discography nav links */
.class4 a {font-family:gill sans, sans-serif; color:#ffffff; font-size:22px; display:inline-block; padding: 2px 10px 2px 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;
}
.class4 a:link {text-decoration:none;}
.class4 a:hover {color:#73032f; -moz-border-radius: 10px; border-radius: 10px; background: #a5a0a2; }
.class4 a:visited {text-decoration:none; }
.class4 a:active {text-decoration:none; }



/* image links */
.classnone a {text-decoration:none;}
.classnone a:link {text-decoration:none;}
.classnone a:hover {text-decoration:none;}
.classnone a:visited {text-decoration:none;}
.classnone a:active {text-decoration:none;}


.bodytext {font-family:gill sans,sans-serif; color:#e0d8d8; font-size:18px;  display:inline-block; line-height:130%; }

.bodytextbold {font-family:gill sans,sans-serif; color:#e0d8d8; font-size:18px; font-style:bold; display:inline-block; line-height:130%; }

.titletext {font-family:gill sans,sans-serif; color:#e0d8d8; font-size:18px;  font-style:bold; display:inline-block; line-height:130%; }

.copytext {font-family:gill sans,sans-serif; color:#e0d8d8; font-size:13px;  display:inline-block; line-height:130%; }

.newstext {font-family:arial,helvetica,sans serif;
color:#ffffff; font-size:14px; font-weight:normal; line-height:120%;}

.newstextyell {font-family:arial,helvetica,sans serif;
color:#fdfa07; font-size:15px; font-weight:normal; line-height:130%;}

.newstitletext {font-family:arial,helvetica,sans serif;
color:#ffffff; font-size:16px; font-weight:normal; line-height:120%;}

.newstitletextburg {font-family:arial,helvetica,sans serif;
color:#970746; font-size:16px; font-weight:bold; line-height:120%;}

.newstitletextyell {font-family:arial,helvetica,sans serif;
color:#fdfa07; font-size:16px; font-weight:bold; line-height:120%;}

.alphatext {font-family:arial,helvetica,sans serif;
color:#ffffff; font-size:14px; font-weight:normal; line-height:140%; }

.alphatextbold {font-family:arial,helvetica,sans serif;
color:#ffffff; font-size:14px; font-weight:bold; line-height:140%; }

.alphatextital {font-family:arial,helvetica,sans serif;
color:#ffffff; font-size:14px; font-style:italic; line-height:140%; }


/* IMPORTANT - for slideshow */
.slideshow { width: 750px; height: 250px; margin: 0; }

h1 {font-family:gill sans,sans-serif; color:#e0d8d8; font-size:24px;  font-style:bold; display:inline-block; line-height:130%; }

.rightalign  { float:right; padding-right:40px; }


/* IMPORTANT - for form fields */
input.short { height:18px; width: 110px; -moz-border-radius:6px; border-radius:6px; border:1px solid #052d7f; }
input.long { height:18px; width: 235px; -moz-border-radius:6px; border-radius:6px; border:1px solid #052d7f; }
textarea { width: 235px; -moz-border-radius:6px; border-radius:6px; border:1px solid #052d7f; }
.round {-moz-border-radius: 15px; border-radius: 15px; padding: 15px; border: 1px solid #ccc; }


/* GLOBAL TAGS */
a img { border: none; }

img.navrules { vertical-align: middle; margin-bottom: .25em }

img.levelspic {-webkit-opacity: 0.2; -moz-opacity: 0.2; opacity: 0.2;
	padding-left: 6px; width: 12%; }

img.rspace {
	margin: 0 2% 0 0;
	}

img.lspace {
	margin: 0 0 0 2%;
	}

img.bspace {
	margin: 0 0 2% 0;
	}

img.title {
	width: 35%;
	}

img.bannerpic {
	width: 100%;
	}

img.newspic  {
	width: 25%;
	}

img.rule {
	height: 1px;
	width: 300px;
	}
	
img.10per {
	width: 10%;
	}
	
iframe 	{
	width: 80%;
	}



/* SLIDESHOW from W3SCHOOLS URL https://www.w3schools.com/howto/howto_js_slideshow.asp*/


	/* Hide the images by default */
	.mySlides {
	  display: none;
	}


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

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

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

/* END OF SLIDESHOW CSS */





html,body { 
margin: 0px;
padding: 0px;
background-image: url(../images/home-background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}


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


/* This is to create a shield so the text scrolling up is hidden behind and doesn't show in logo background */
	#header	{
	position: fixed;
	padding-top: 20px;
	height: 210px;
	width: 800%;
	background-image: url(../images/home-background-banner.png);
	background-repeat: no-repeat;
	z-index: 100;
	}


	#header-rsp	{
	display: none;
	}


	#nav1 {
	position: fixed;
	text-align: right;
	padding-top: 0px;
	margin-left: 2%;
	width: 10%;
	float: left;
	z-index: 1000;
	}


		.toggle, [id=drop] {
		font-family:gill sans, sans-serif; 
		color:#ffffff; font-size:18px;   
		display:inline-block; 
		letter-spacing:1px; 
		padding-right:8px; padding-left:8px; padding-top:2px; padding-bottom:2px;
		-webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5;
		-webkit-transition: all 1.5s ease;
		-moz-transition: all 1.5s ease;
		-ms-transition: all 1.5s ease;
		-o-transition: all 1.5s ease;
		transition: all 1.5s ease;
		display: none;
		}

		ul {
		list-style: none;
		}

		ul li {
		display: inline-block;
		text-align: right;
		}



	#banner {
	position: fixed;
	width: 100%;
	height: 125px;
	margin-left: 13%;
	padding-top: 3%;
	padding-left: 4%;
	background-image: url(../images/home-banner.png);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 1000;
	}


	#banner-rsp {
	display: none;
	}



	#leftpic {
	position: fixed;
	margin-top: 230px;
	float:left;
	}


	#leftpic-rsp {
	display: none;
	}



	#slideshow {
	position: fixed;
	margin-top: 230px;
	margin-left:390px;
	width: 45%;
	height: 30%; 
	z-index: 1000;
	background-image: url(../images/home-slideshow-back.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	}


	#slideshow-rsp  {
	display: none;
	}


	/* FOR DISCOGRAPHY PAGE */	

		#disco-alpha{
		position: fixed;
		margin-top: 219px;
		width:47%;
		margin-left:400px;
		background-image: url(../images/home-background-disco.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		z-index: 10;
		}



	#text {
	position: relative;
	width:63%;
	margin-top: 40px;
	margin-left: 390px;
	padding-bottom: 30px;
	float:left;
	}
	
		

	/* FOR SUB PAGE */	
	#text-alpha {
	position: absolute;
	width:50%;
	margin: 350px 0 150px 400px;
	z-index: 1;
	}


	#textsub {
	position: relative;
	width:65%;
	margin-top: 260px;
	padding-left: 400px;
	padding-bottom: 200px;
	float:left;
	z-index: 1;
	}

	

#footer {
position: relative;
width: 90%;
text-align: right;
padding-bottom: 100px;
}


#footersub {
position: relative;
width: 95%;
text-align: right;
padding-bottom: 60px;
}








/* DESKTOP MEDIUM CODE 1301 to 1600*/
/* *********************************************************************************** */


	@media (max-width: 1600px) {

	.class1 a { 
	font-size:16px;
	}


	.class3 a { 
	font-size:16px;
	}


	img.levelspic {
	width: 25%;
	}



	#container {
	width: 80%;
	}


	#header	{
	height: 200px;
	}


	#banner {
	padding-left: 6%;
	width: 65%;
	}


	#leftpic {
	margin-top: 220px;
	width: 20%;
	height: 90%;
	}


	#slideshow {
	margin-top: 219px;
	width:57%;
	margin-left:300px;
	}


	#text {
	width:65%;
	margin-top: -20px;
	margin-left: 320px;
	}


	#textsub {
	margin-left: -80px;
	}



	/* FOR DISCOGRAPHY PAGE */	

	#disco-alpha {
	width: 55%;
	margin-left: 300px;
	}


	/* FOR SUB PAGE */	
	#text-alpha {
	position: absolute;
	width:50%;
	margin: 350px 0 150px 310px;
	}



}




/* DESKTOP SMALL CODE 769 to 1300*/
/* *********************************************************************************** */

	
	@media (max-width: 1300px) {

	.class1 a { font-size:12px; padding-right:5px; padding-left:5px; padding-top:1px; padding-bottom:1px;	}


	.class2 a {font-size:10px; padding-top:2px; padding-bottom:2px; padding-right:5px; padding-left:5px; }


	.class4 a {font-size:13px; }


	.bodytext {font-size:13px;}

	.newstext {font-size:11px; }

	.newstitletext {font-size:14px; }

	.newstitletextburg {font-size:14px;	}

	.newstitletextyell {font-size:14px;	}

	.alphatext {font-size:12px;}
	
	.alphatextbold {font-size:12px;}

	.alphatextital {font-size:12px;}

	.copytext {font-size:11px;}

	.titletext {font-size:12px; line-height: 170%;}

	h1 {font-size:18px; }

	.newstextyell {font-size:13px; }

	.newstitletext {font-size:14px; ;}




	img.levelspic {
	width: 32%;
	}


	img.newspic  {
	width: 30%;
	}


	img.bannerpic {
	width: 65%;
	}


	img.10per {
	width: 6%;
	}



	#nav1{
	margin-top: -15px;
	}


	#header	{
	position: fixed;
	padding-top: 10px;
	height: 140px;
	}


	#leftpic {
	margin-top: 150px;
	width: 22%;
	height: 95%;
	}


	#slideshow {
	width:60%;
	margin-top: 150px;
	margin-left:180px;
	}



	#text {
	width:70%;
	margin-top: -200px;
	margin-left: 200px;
	}


	#textsub {
	width:70%;
	margin-top: 170px;
	margin-left: -200px;
	padding-bottom: 200px;
	float:left;
	z-index: 100;
	}


	/* FOR DISCOGRAPHY PAGE */	

	#disco-alpha {
	margin-top:140px;
	width: 55%;
	margin-left: 200px;
	}


	/* FOR SUB PAGE */	
	#text-alpha {
	position: absolute;
	width:50%;
	margin: 230px 0 150px 210px;
	}


	#footer {
	width: 100%;
	}

}




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


	@media (max-width:768px) {


	.class1 a { 
	font-size:16px;
	padding-top:1px;
	padding-bottom:1px;
	-webkit-opacity: .8; -moz-opacity: .8; opacity: .8;
	}

	.newstitletext {
	 font-size:14px;
	 }
	 
	.alphatext {font-size:9px; line-height: 120%;}
	
	.alphatextbold {font-size:9px; line-height: 120%;}

	.alphatextital {font-size:9px; line-height: 120%;}


	img.rspace {
		margin: 0 5% 0 0;
		}

	img.lspace {
		margin: 0 0 0 5%;
		}

	img.bspace {
		margin: 0 0 5% 0;
		}

	img.title {
	width: 80%;
	}

	img.bannerpic {
		width: 100%;
		}

	img.levelspic {
		width: 65%;
		margin: 35% 0 0 15%;
		}

	img.newspic  {
		width: 60%;
		}
		
	img.rule {
		height: 1px;
		width: 60%;
		}



	#container {
	width: 80%;
	margin: 0 auto 0 auto;
	height: 100%;
	}

		
/* This is to create a shield so the text scrolling up is hidden behind and doesn't show in logo background */


		#header	{
		padding-top:10px;
		height: 210px;
		width: 120%;
		background-image: url(../images/home-background-banner-cell.png);
		background-repeat: no-repeat;
		background-size: cover;	
		}



		#nav1{
		margin-top: 45%;
		width: 83%;
		z-index: 1000;
		}


			label {
			text-align: center;
			width: 100%;
			padding-top: 150px;
			z-index: 1000;
			}


			ul {
			width: 100%;
			text-align: center;
			float: left;
			}


			ul li {
			padding: 2px 2px;
			width: 100%;
			text-align: center;
			background: #000000;
			-webkit-opacity: 0.7; -moz-opacity: 0.7; opacity: 0.7;
			}
		
			.toggle + a, .menu {
			display: none;
			margin-left: 0px;
			padding-left: 0px;
			}
		
		
			.toggle {
			display: block;
			-webkit-transition: all .5s ease;
			-moz-transition: all .5s ease;
			-ms-transition: all .5s ease;
			-o-transition: all .5s ease;
			transition: all .5s ease; 
			}
		

			[id^=drop]:checked + ul {
			display: block;
			margin: 0px;
			-webkit-transition: all .5s ease;
			-moz-transition: all .5s ease;
			-ms-transition: all .5s ease;
			-o-transition: all .5s ease;
			transition: all .5s ease; 
			}


	#banner {
	position: fixed;
	margin-left: -4%;
	width: 85%;
	background-image: url(../images/home-banner-right2.png);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 100;
	}



	#leftpic {
	display: block;
	position: fixed;
	margin-top: 220px;
	width: 85%;
	height: 110%;
	}



	#slideshow  {
	display: none;
	}


	#slideshow-rsp  {
	display: block;
	position: fixed;
	margin: 0 auto 0 auto;
	margin-top: 55%;
	width:85%;
	z-index: 2;
	}

	#text {
	position: relative;
	width:100%;
	margin-top: -160px;
	margin-left: 20px;
	}



	#textsub {
	position: relative;
	width:90%;
	margin-top: 230px;
	margin-left: -360px;
	z-index: 2;
	}


	/* FOR DISCOGRAPHY PAGE */	

	#disco-alpha {
	margin-top:215px;
	width: 90%;
	margin-left: 0px;
	}


	/* FOR SUB PAGE */	
	#text-alpha {
	position: absolute;
	width:90%;
	margin: 350px 0 150px 5px;
	}




}