:root{

 --body-bg-color: #002f5d;
 --fixed-social-bg-color: #41747f;  /* to contrast page background colors  */
 --text-color: rgb(217, 220, 219);
 
 --header-wrapper-bg-color: rgba(149, 79, 152, 1);
 --header-wrapper-bg-color: transparent;
 /*--header-wrapper-height: 3px;*/
 
 --nav-menu-bg-color: transparent; 
 --nav-menu-accent-color: #1C6EA4;
 --nav-menu-fonts: 'Parisienne', serif;
 --nav-menu-fonts: 'Tahoma', 'Verdana', sans-serif;
 --nav-menu-li-bg: transparent;
 --nav-menu-li-active-bg:#000000;
 
 --section-title-bg-color: #11a8b0;
 --section-accent-color: rgba(106,57,185, 0.7);
 --section-accent-color: white;
 --section-title-fonts: 'Parisienne', serif; 
 --footer-bg-color: #954f98;
 --scroll-header: fixed;
 --scroll-header: static;
 
}

 /* h1 .banner-h1 {color:#11a8b0;}
  h1 .banner-h1 {color:transparent;}            
 */ 
  
  /*h1 {display:none;}*/

  /*layout adjustments in layout.css */
  
  h1, h2, h3, h4{color:#4c96b3;}
  
  .parisienne-regular {
  font-family: "Parisienne", serif;
  font-weight: 400;
  font-style: normal;
}


iframe{border: none;}
.music_item:hover {background-color: peachpuff; border-radius: 15px;}
  


body {
  margin: 0;
  padding: 0;
  position:relative;
  z-index:-1;
  overflow-x: hidden;
  font-size: 1em;
  line-height: 1.5;
  font-family: 'Open Sans';
  background-color: var(--body-bg-color);
  min-width:320px;  
}


#slogan{
  color:white;
  text-align:center;
  width:390px;
  font-size: 1.2em;
  margin: 0 auto;
}
 
ul{
  list-style-type: none;
  padding-inline-start: 0;
}

p{font-size:1.2em;}

/*a {font-family: var(--nav-menu-fonts);}*/

a:link {color:var(--text-color);}
a:visited {color:var(--text-color);}
a:hover {color:silver;}
a:active {color:var(--text-color);}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}

main a {text-decoration: none; font-style: italic;}
main a:link {color:blue;}
main a:visited {color:black;}
main a:hover {color:red;}
main a:active {color:black;}


.sectiontitles a:link {color:var(--text-color);}
.sectiontitles a:visited {color:var(--text-color);}
.sectiontitles a:hover {color:silver;}
.sectiontitles a:active {color:var(--text-color);}
.sectiontitles a:link {text-decoration: none;}
.sectiontitles a:visited {text-decoration: none;}
.sectiontitles a:hover {text-decoration: underline;}
.sectiontitles a:active {text-decoration: underline;}



/************ Header and Nav ******************
see layout.css
************END Header and Nav ******************/

#slogan {font-family: 'Avenir Light', sans-serif;}
#panel-wrapper {font-family: 'Avenir Light', sans-serif;}

 
 
main {
      display:block; 
      background-color:var(--body-bg-color); 
      width:100%; 
      margin:auto; 
      min-width:320px;
     }


#panel-container {padding-top: 5vh; padding-bottom: 5vh;}

.main-artwork{width:70%; margin: 0 auto;}
#feature-prod {bottom:140px;}

.sectiontitles{
  /*margin-top: 0;*/
  background-color:var(--section-title-bg-color);
  font-family: var(--nav-menu-fonts); 
  font-size:1.8em;  
  border-radius: 8px;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  font-family: var(--section-title-fonts); 
  text-align: center; 
  color: var(--text-color);
  border-bottom: 5px outset var(--nav-menu-accent-color);
  border-left: 1px outset var(--nav-menu-accent-color);
  border-radius: 10px;
}
  
/* css for includes/recordings file and badges */ 
.badgetitle h2 {text-align: center;} 
.streamingbadges hr {width: 80%; margin:auto;} 
.streamingbadges:hover {background-color:  #36454F; border-radius: 25px;}    
.coverart{display: block; width: 250px; height:250px; margin: 15px auto; border-radius: 5px;}
.streamingbadges {display: table; width:70%; margin: 0 auto; padding-top:50px; text-align:center;}
.badgelist li {display: inline;}

 #footerwrapper{
   width:100%; 
   background-color: var(--footer-bg-color);
   /*padding-top:30px;*/
   padding-bottom:50px; 
   opacity:.6; 
   z-index:9999;
   border-top-color: var(--section-accent-color);
   border-top-width: medium;
   border-top-style: solid; 
 }
 
 li.foot_icon {
   display: inline; 
   width:32px;
   height:32px; 
   padding: 0 2px;
 }
 
 .foot_icon img{
   border-bottom: 5px outset transparent;
   border-left: 1px outset transparent;
   border-radius: 10px;
   width:32px;
   height:32px; 
 }
    
 .foot_icon img:hover{
   border-color: var(--nav-menu-accent-color);
   padding-bottom:7px;
 }

 .schCopyright{
   width:100%; 
   text-align:center; 
   /*color:white;*/
   color: var(--text-color); 
   font-size:.7em;
 }

/************ css for includes/video.php ******************/
  /*./public/video/video.php*/
  .title-wrapper hr { width:60%; 
                      margin:auto; 
                      padding-top: 140px; 
                      margin-top: -140px;}
   
  .vidcontainer{margin:auto; text-align:center;}
  #featurevid{width: 80%; margin: 0 auto;}
  .vidcontainer-group{width: 80%; margin:auto; display: flex; flex-wrap: wrap;}
  .vidcontainer-group li{width:33%; margin:auto; min-width:244px; padding:2px; display:inline;}

  @media screen and (max-width: 480px) {
   .main-artwork {width:100%;}
   .vidcontainer {width:100%; margin-left:0; padding-left:0;}
   .vidcontainer li {width:90%; padding:10px 0;}
   .vidcontainer-group {width:100%; margin-left:0; padding-left:0;}
   #slogan{display:none;}
  }