﻿
 

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,700;0,800;1,200;1,300;1,500;1,600;1,700&family=Titillium+Web:ital,wght@0,200;0,400;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap'); 


				/*
				@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,700;0,900;1,200;1,300;0,400;1,550;1,700&display=swap');
				 */
				 
				 
html {
	font-size: 16px;

}
body    {
  		font-family: 'Exo 2', sans-serif;
  	
					/*
					font-family: 'Titillium Web', sans-serif;
					*/	
					
	background-color: #000;
	margin: 0 auto;
	line-height: 24px;
    color: #B3ADB6;
}


img {
	max-width: 100%;
	height: auto;
	border: 0;
}


#container {
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	border: medium solid #333333;
	background-color: #000;
	width: 80%;
    margin: 0 auto;

}



#wst_logo {
	width: 55%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

#wstlogo {
	width: 55%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}


#pcentral_logo {
	width: 50%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

#rama-logo {
	width: 70%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 9px;
}




#follow_wst {
	width: auto;
	margin: 5px;

/*	padding-top: 20px; */
 	float: right;
}

h1 {
	font-size: 1.5rem;
	text-align: center;
	line-height: normal;
}


img {
	max-width: 100%;
	height: auto;
	border: 0;
}


#logo2012 {
	width: 50%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.center-con {
	text-align: center;
}
 
.centercon  {
	text-align: center;
}

#nav {
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	text-align: center;
}
#nav ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	width: 100%;
}
#nav li {
	display: inline;
}
#nav a {
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-size: .85rem;
	color: #FFFFFF;
	text-decoration: none;
	display: inline-block;
	border: 1px solid #252525;
	padding-right: 5px;
	padding-left: 5px;
	margin-right: 2px;
	background-color: #000000;
	margin-top: 15px;
	margin-bottom: 15px; 
	margin-left: 4px;
}

#nav a:hover {
	font-size: .85rem;
	color: #FF0000;
	background-color: #660066;
}


h2 {
    font-size: 1.25rem;
    font-weight: normal; 
    color: #b6b6b6; 
    font-family: Book Antiqua;
}



a:link {
	color: #009999;
}

a:visited.tabtext {
	text-decoration-color: #5b5615;	
}

a:active {
	color: #800000;
}

 
a:hover {
	color: #669999;
	text-decoration: none;
}
 

a:link.tabtext {
	color: #FFFFCC;
	text-decoration-color: #5b5615;	
}

a:hover.tabtext {
	text-decoration: none;
	color: #669999;
}

#content {
	border: 1px solid #0000FF; 
	padding: 10px; 
	background-color: #000000;
	width: 80%;
	border-radius: 10px; 
	color: #b3b3b3; 
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom: 0;
    font-size: 1.1rem;
}
  
#content .text {
	text-align: justify;
		
}

#credits {
	font-size: .75rem;
	color: #808080;
	width: 100%;
	height: auto;
	text-align: right;
	line-height: normal;
}

.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%;
}

#video_performance-lg1 {
	width: 85%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;

}


#video_performance1 {
	width: 66%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

#video_performance2 {
	width: 66%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

#video_performance3 {
	width: 66%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
 
 
.champs {
	font-size: .9rem;
	color: #FFCC00;
	line-height: 100%;
}

 
#picture {
	padding: 5px;
	border: thin solid #FFCC00;
	width: 60%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
} 

p {
	font-size: 1.4rem;
	color: #C0C0C0;
	line-height: 175%;
}

.text {
	text-align: justify;
}


.singlespc   { 
	line-height: 100%;
 } 


#logo2 {
	width: 25%;
	height: auto;
	float: left;
	margin: 35px 15px 0 0;
}

.hr-left {
	width: 25%;
	height: 1px;
	margin-left: 10%;
}

 
  
.hr-center {
	color: #333399;
	width: 33%;
	height: 2px;
	margin-right: auto;
	margin-left: auto;
}

 
.moreon {
	font-family: "Bookman Old Style";
	font-size: 1rem;
	line-height: 100%;
}

#yrlogo  {
	width: auto;
	float: right;
	margin: 20px 0 0 15px;
}

.yellow-lnk {
	color: #FFFF00;
}

.r-align {
	text-align: right;
}


#name {
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	color: #008080;
	text-decoration: blink;
	text-align: center;
}
#info {
	color: #CC6600;
	margin-top: 5px;
	margin-right: 25px;
	margin-left: 25px;
	width: 85%;
    font-size: 1.05rem;
    line-height: 1.5;
}
 
.band {
	color: #FF0000;
}

.pgtext {
    text-align: justify;
    color: #9BA9B5;
    font-size: 1.2rem;
}


.bio-style {
	color: #FF0000;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	font-size: large;
}

.bio {
	text-align: justify;
	color: #9BA9B5;
	font-size: 1.2rem;
}


#bio {
    padding: 3px;    
    background-color: #1a1e15;
    width: 98%;
    margin: 0 auto;
    font-size: 1.15rem;

}

#bio p {
    color: #B3ADB6;
   font-size: 1.17rem;
   line-height: 1.5;

}

.heading {
	height: auto;
	width: 100%;
	background-color: #000000;
}


.content {
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	width: 100%;
	list-style-type: square;
}	


 

#bio .source {
	font-family: Verdana; 
	font-size: .7rem;
	font-style: italic;
 
}

.comment {
	text-align: right;
	font-size: 1rem;
}


#wst-listens  {
	margin: 0 auto;
	width: auto;
	text-align: center;
}


#facebook {
	width: 80%;
	margin: 0 auto;
} 	

@media screen and (min-width: 1281px) /* Expanse */ {
  body {
	width: 75%;
  }
  
p {
	font-size: 1.3rem;
	line-height: 175%;

} 
#video_performance1 {
	width: 70%;
}

#video_performance2 {
	width: 70%;
}

#video_performance3 {
	width: 70%;
}

.comment {
	font-size: 1.05rem;
}

#wst-listens  {
	width: 40%;
}

}


@media screen and (max-width: 1280px) /* Desktop */ {
  body {
	width: 80%;
}

h1 {
	font-size: 1.45rem;
}

.bio {
    font-size: 1.15rem;
}

#bio p {
   font-size: 1.15rem;
}


#video_performance1 {
	width: 75%;
}

#video_performance2 {
	width: 75%;
}
#video_performance3 {
	width: 75%;
}

#wst-listens  {
	width: 50%;
}

}

@media screen  and (max-width: 979px) /* Tablet */ {

body {
	width: 97%;
 }
  
h1 {
	font-size: 1.4rem;
}
h2 {
	font-size: 1.15rem;
}
 
#logo2012 {
    width: 40%;
}


#wst_logo {
    width: 50%;
} 

#nav {
    width: 90%; 
}

#nav a {
	margin-top: 6px;
    margin-bottom: 1px;
}

.bio {
    font-size: 1.1rem;
}

#bio p {
   font-size: 1.1rem;
}

#picture {
	width: 50%;
}

.pgtext {
    font-size: 1.1rem;
}

/*
#credits {
    text-align: center;
}
*/
 
p {
	font-size: 1.25rem;

} 
 
#panoramalogo {
	width: 30%;
}

#logo2 {
	width: 25%;
}

#video_performance-lg1 {
	width: 100%;
}

#video_performance1 {
	width: 75%;
}

#video_performance2 {
	width: 75%;
}
#video_performance3 {
	width: 75%;
}

.comment {
    font-size: .9rem;
}
  

#wst-listens  {
	width: 60%;
}

 
#facebook {
	width: 80%;
} 	

}

@media screen and (max-width: 500px) /* Mobile */ {

body {
    width: 100%;
} 
#wstlogo {
    width: 75%;
}

#wst_logo {
    width: 75%;
}

#logo2012 {
    width: 50%;
}


h1 {
	font-size: 1.3rem;
}
h2 {
	font-size: 1.03rem;
}
 
 
#nav a {
	margin-top: 6px;
    margin-bottom: 1px;
}
 
#picture {
	width: 85%;
}


#credits {
    text-align: center;
}


#pcentral_logo {
	width: 80%;

}

h1 {
    font-size: 1.2rem;
}

#info {
    font-size: .95rem;    
}

#bio p {
   font-size: 1rem;
}

#bio li {
    font-size: 1rem;
    line-height: 1.3;
}

#video_performance-lg1 {
	width: 100%;
}

#video_performance1 {
	width: 95%;
}

#video_performance2 {
	width: 95%;
}
#video_performance3 {
	width: 95%;
}

.comment {
    font-size: .8rem;
}
 

#wst-listens  {
	width: 75%;
}

#facebook {
	width: 100%;
} 

#tee_shirt {
    font-size: 1.05rem;
}

}