/*****************************************************************/
/***** WTTR - Mobile Styles / (c) 2025 shields web services *****/
/*****************************************************************/


/******** Global Styles ********/

html, body {
  width:100%;
  height:100% important!;
  margin:0;
  padding:0;
  background:#708090;
  font-size:16px;
  box-sizing:border-box;
  overflow-x:hidden
}

::-webkit-scrollbar-track {background:#FFF}
::-webkit-scrollbar-thumb {background:#666}
::-webkit-scrollbar-thumb:hover {background:#000}
::-webkit-scrollbar {width:7px}

a {color:#FFF; text-decoration:none}
a:hover {color:#7DF9FF}
a.gigs {color:#F00; text-decoration:none}
a.selected {color:#F00}

.emoji {font-size:110%}

h2.formHeading {
  padding:0 35px;
  font-family:"Scope One", serif; 
  font-size:1.50em; 
  font-weight:bold; 
  text-align:center;
}
input[type=text], textarea {
  width:90%;
  padding:12px;
  border:1px solid #666;
  border-radius:5px;
  resize:vertical;
}

/******** Class Styles ********/

.address {
  font-family:"Scope One", serif;   
  font-size:1.35em; 
  color:#FFF;
  text-align:center;
  line-height:1.5;
}
.cancelled {
  font-family:"Scope One", serif; 
  font-size:1.00em;
  font-weight:bold;
  color:red;
}
.gig {
  width:100%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  background:#FFF;
  padding:7px 0;
  box-shadow:3px 3px 4px #000;
}
.noGigs {
  width:100%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  background:#708090;
  color:#FFF;
  padding:7px 0;
}
.gigHeading {
  padding:0 35px;
  font-family:"Scope One", serif; 
  font-size:1.30em; 
  font-weight:bold; 
  text-align:center;
}
.gigInfo {
  font-family:"Scope One", serif; 
  font-size:1.00em; 
  text-align:center;
  line-height:1.2;
}
.noGigInfo {
  font-family:"Scope One", serif; 
  font-size:1.20em; 
  text-align:center;
  line-height:1.2;
}
.iconSize {height:85%}
.iconSpace {width:50px}
.leftPad {padding-left:90px}
.mapLink {color:#F00; font-size:0.90em; font-weight:bold}
.myPara_1 {
  padding:0 35px;
  font-family:"Scope One", serif; 
  font-size:1.80em; 
  font-weight:bold; 
  text-align:center;
}
.myPara_2 {
  padding:0 35px; 
  font-family:"Scope One", serif;
  font-size:1.25em; 
  font-weight:bold; 
  text-align:center;
  color:#7DF9FF;
  text-shadow:3px 3px 2px #000;
  line-height:1.5;
}
.myPara_3 {  
  text-align:justify; 
  padding:0 35px;
  font-family:"Scope One", serif; 
  font-size:1.10em;
  color:#FFF;    
  line-height:1.2;
}
.hr50 {
  width:50%;
  overflow:visible; /* For IE */
  padding:0;
  border:none;
  border-top:medium double #333;
  color:#333;
  text-align:center;
}
.hr50:after {
  content:")|(";
  display:inline-block;
  position:relative;
  top:-0.6em;
  font-size:1.25em;
  font-weight:bold;
  padding:0 0.25em;
}
.hrMusicPage {
  width:90%;
  color:#000;
  border:1px solid #000;
}
.photoPixPhotos {
  display:inline-block; 
  width:11.50em; 
  height:10.00em; 
  margin-top:0.50em; 
  margin-right:0.75em; 
  text-align:center;
}
.photoText {
  width:100%; 
  text-align:left; 
  color:#000; 
  font-family:"Constantina", "Georgia", "Times New Roman", serif; 
  font-size:0.80em; 
  line-height:110%;
}
.pixBorder {border:solid 2px black}
.social {width:100%; margin-top:25px; margin-bottom:50px}
.songCredit {display:none}
.spWidth {width:100%; max-width:450px; position:relative; left:0}
.spWidth_OO {width:100%; max-width:325px; position:relative; left:0}
.sws {
  font-family:"Scope One", serif; 
  font-size:0.75em; 
  color:#7DF9FF;
  text-shadow:3px 3px 2px #000;
  text-align:center;
  line-height:1.8;
}
.tgoo {font-size:0.95em}
.vertAlign {vertical-align:middle}

/******** ID Styles ********/

#centerWrap {
  width:100%;
  min-height:100%; 
  position:relative;
  margin-left:auto;
  margin-right:auto;
}
#footer {
  position:relative;
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
#formCont {
  position:relative;
  top:-20px;
  width:100%;
  max-width:465px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
  padding:15px 0;
}
#indexIcons {
  display:flex;
  flex-direction:row;
  justify-content:center;
  gap:10px;
  width:80%;
  height:85px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:25px;
}
#logoCont {
  display:block;
  width:90%;
  text-align:center;
  margin-top:30px;
  margin-left:auto;
  margin-right:auto;
}
#pageHeading {
  position:relative;
  top:20px;
  width:80%;
  color:#FFF;
  font-family:"Scope One", serif;
  font-weight:bold;
  font-size:1.30em;
  text-align:center;
  margin-left:auto;
  margin-right:auto; 
  margin-bottom:35px;
  line-height:1.3;
}
#pixCont {display:inline-block; margin-left:10%}
#theMusic {
  display:flex;
  flex-direction:column;
  position:relative;
  width:90%;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:45px;
} 
#wttr {
  display:flex;
  flex-direction:column;
  position:relative;
  width:90%;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:45px;
}
#oo {
  display:flex;
  flex-direction:column;
  position:relative;
  width:90%;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:45px;
}

/******** Band Member & Video Display Styles ********/

.pageElement {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  width:80%;   					
  height:75px;
  margin:15px auto;
}
.iconSpace {
  display:flex;
  align-items:center;
  justify-content:center;
  width:75px;
  height:65px;
  padding-right:5%;  
}
.theInfo {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  width:80%;
  padding-left:5%;
}
.theInfoWide {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  width:600px;
}
.theMember {
  display:flex;
  flex-direction:column;
  width:400px;
}
.name {
  display:flex;
  align-items:center;
  justify-content:flex-start;   
  width:100%;
  height:65px;
  line-height:1.35;
}
.role {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:30px;
}
.bandMember {
  font-family:"Scope One", serif; 
  font-size:1.20em;
  font-weight:normal;
  color:#7DF9FF;
  text-shadow:3px 3px 2px #000;
}
.musicText {
  display:block;
  width:320px;
  font-family:"Scope One", serif; 
  font-size:1.10em;
  font-weight:normal;
  color:#7DF9FF;
  text-shadow:3px 3px 2px #000;
  line-height:1.35;
}

/******** Display Table Styles ********/

#displayContent {
     position:relative;
	 top:15px;
     display:table;
     width:80%;
     border-spacing:5px;
	 text-align:center;
     margin-left:auto;
     margin-right:auto;
	 margin-bottom:75px;
}
.displayRow {
     display:table-row;
	 width:100%;
}
.displayCell_1 {
     display:table-cell;
	 width:25%;
	 height:100%;
	 vertcal-align:middle;
	 text-align:center;
}
.displayCell_YT {
     display:table-cell;
	 width:25%;
	 height:100%;
	 vertcal-align:middle;
	 text-align:center;
}
.displayCell_2 {
     display:table-cell;
	 width:75%;
	 height:100%;
	 vertcal-align:middle;
	 text-align:center;
	 margin-left:auto;
     margin-right:auto;
	 color:#FFF;
     font-family:"Scope One", serif;
     font-size:1.00em;
	 line-height:1.5;
}
.displayCell_Band {
     display:table-cell;
	 width:75%;
	 height:100%;
	 vertcal-align:middle;
	 text-align:center;
	 margin-left:auto;
     margin-right:auto;
	 color:#FFF;
     font-family:"Scope One", serif;
     font-size:1.00em;
	 line-height:1.5;
}

/********** Menu Styles **********/

.menuText {
  color:#FFF; 
  font-family:"Scope One", serif; 
  font-size:1.60em;
  font-weight:normal; 
  text-shadow:1px 1px #000;
  line-height:1.7;  /*  I Love You, Line-height !!! */
}
.triggerDisplay {color:#FFF; font-size:1.75em; padding-bottom:12px}
.tp {padding-top:11px}

#menuArea.hide 
{                             
  position:absolute;
  top:-223px;   /*-225*/ 
  left:0;
  width:100%;
  height:268px;  /*268*/
  text-align:center;
  background:#000;
  box-shadow:0px 2px 3px #666;
  margin-left:auto; 
  margin-right:auto; 
  transition:1.25s;	
  overflow-y:auto;   		
  z-index:2000;	
}
#menuArea.show {text-align:center; margin-top:223px} 
#menuArea ul {
  display:block;
  height:265px; /*268*/
  list-style-type:none;
  margin-block-start:0;
  margin-block-end:0;
  padding-inline-start:0;
}
#menuArea ul li
{
  display:block;
  padding-block-end:0; 
  width:100%;
  height:43px;    
  text-align:center;
  list-style:none;
  border-bottom-style:groove;
  border-bottom-color:white;
  border-bottom-width:2px;      
  margin-block-start:0;
  margin-block-end:0;
  margin-left:auto;
  margin-right:auto;
  padding:0;
  cursor:pointer;
}
#menuArea ul li.trigger {display:block; padding-top:0}
#menuArea ul li:last-of-type {
  height:43px; 
  border-bottom:0;
} 

#nav-toggle {             /*** hides hamburger in full-view ***/
  display:block;
  padding-top:13px;
  margin-left:auto;
  margin-right:auto;
  background:#000;
  cursor:pointer;
  width:100%;
}
#nav-toggle > a {            /*** where hamburger sits in mobile-view ***/
  display:block;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  color:#000;
  width:26px;
}
#nav-toggle > a > span {         /***  one line of hamburger  ***/
  width:26px;
  height:3px;
  background-color:#FFF;
  display:block;
}
#nav-toggle > a > span + span {margin-top:5px}  /*** 5px between lines of hamburger ***/