.list-group-item {
  position: relative;
  display: block;
  padding: 0.2em 0.8em; /* padding: 10px 15px; */
  margin-bottom: -2px;
  background-color: transparent; /* background-color: #fff; to make page bkgrd clr come through */
  border: 2px solid #ddd;/* border: 1px solid #ddd; */
  color: #ddd;
  font-size: 1.2em;
}
.list-group-item:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.list-group-item:last-child {
  margin-bottom: 4px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

a.list-group-item,
button.list-group-item {
  border: 2px solid #ddd;
  color: #ddd;
  text-decoration: underline;
}
a.list-group-item .list-group-item-heading,
button.list-group-item .list-group-item-heading {
  color: #333;
}
a.list-group-item:hover,
button.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:focus {
  color: #800000;
  text-decoration: none;
  background-color: #ddd;
}

html { font-size: 1em; }
body { font-size: 1em; }

@font-face {
    font-family: 'CaviarDreams';
    src: url('/fonts/CaviarDreams.woff') format('woff2'),
         url('/fonts/CaviarDreams.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreams_Bold';
    src: url('/fonts/CaviarDreams_Bold.woff') format('woff2'),
         url('/fonts/CaviarDreams_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#original-songs {
  background-color:#c6b39e;
  opacity: 0.9;
  float: none;
  text-align: center;
}
#original-songs h1,
#original-songs h2,
#original-songs h1,
#original-songs h2 {
  font-family:'CaviarDreams_Bold','Allura',Verdana, Geneva, sans-serif;
}

.section-oss picture.cover-art_image, .section-oss picture.cover-art_image {
  border: 1px solid black;
}
.section-oss {
  background: none;
  border-top: 6px solid #715045;
  color: #444;
}

#original-songs {
    position: relative;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

#original-songs .list-group-item {
  border: 2px solid #444;
  color: #444;
}

li#strm.list-group-item { margin-left: 20px; }

a.list-group-item:hover,
button.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:focus {
  color: #800000;
  text-decoration: none;
  background-color: #ddd;
}

#original-songs .act-bar
a.list-group-item:hover,
button.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:focus {
  color: #800000;
  text-decoration: none;
  background-color: #ddd;
}

div.brand { padding: 15px; }
div.brand img { max-height: 90px !important; max-width: 100%; padding: 10px; }
#about { background-color: #eee; }
#about h1 { margin-top: 0px; font-size: 28px; }
#playlist { background-color: #eee; }
#playlist h1 { margin-top: 0px; font-size: 28px; }
.socials-large li {padding-left: 10px; padding-right: 10px;}

@media screen and (max-width: 1200px) {
  .custom-section .socials-large {padding-bottom: 25px;}
  
  div.brand { padding: 10px; }
  div.brand img { max-height: 70px !important; max-width: 100%; }
}

@media screen and (max-width: 992px) {
  .custom-section .socials-large {padding-bottom: 25px;}
  
  div.brand { padding: 5px; }
  div.brand img { max-height: 60px !important; max-width: 100%; }
  #about h1 { font-size: 28px; }
  #playlist h1 { font-size: 28px; }
}

@media screen and (max-width: 767px) {
  .custom-section .socials-large {padding-bottom: 25px;}
  
  div.brand { padding: 3px; }
  div.brand img { max-height: 55px !important; max-width: 100%; }
  #about h1 { font-size: 20px; }
  #playlist h1 { font-size: 20px; }
}

@media screen and (max-width: 576px) {
  .custom-section .socials-large {padding-bottom: 25px;}
  
  div.brand { padding: 0px; }
  div.brand img { max-height: 50px !important; max-width: 100%; }
  div#main-container.container-fluid { padding-right: 10px; padding-left: 10px;} 
  li#strm.list-group-item:hover { margin-left: 10px; }
}

#fanlist { text-align: center; vertical-align: middle;
  display: flex;
  flex-wrap: wrap; }

.no-js .prot { display: none;}
.no-js .prot-msg { display: block;}
.js .prot { display: block;}
.js .prot-msg { display: none;}
textarea { resize: none; }

.article-container.socials-large { margin:auto;}
.socials-large ul { padding-top: 20px; }
.socials, .socials-large li { display:inline-block; list-style:none; }
/*#fanlist .socials .fab {color: #333;}*/

#footer { color: #666; background-color: #313131;
  display: flex;
  flex-wrap: wrap; }

#footer a { color: #666; }
#footer a:hover { color: #fff; text-decoration: none;}
footer .socials .fab { color: #666; }
#fanlist .socials-large .fab {color: #333;}
.socials ul { padding-left: 0;}
.socials li, .socials-large li {
    height: 30px;
    display: inline-block;
    vertical-align: middle;
}
.socials a .socials-large a {
    color: #800000 !important;
}
#oss {
  background: url(/images/oss-backbround-1024x445.8473dc6c2a.jpg) no-repeat center center fixed;
  background-size: cover;
}
#cs {
  text-align: center;
  background: url(/images/mc-bkgnd-1024x356.jpg) no-repeat center center fixed;
  background-size: cover;
}
#bio { text-align: center; background-color: #aaa }
#oss h1, #oss h2, #oss h3 {
  font-family:'CaviarDreams_Bold','Allura',Verdana, Geneva, sans-serif;
}

.act-bar {padding-top:20px; padding-bottom:20px;}
.act-bar li.list-group-item {cursor: pointer;border-radius: 2px; vertical-align:top;}
.act-bar .list-group {
  display: none;
  margin:12px 0 0 0;
}
.act-bar li:hover > .list-group {
  display: block;
  border: 0;
  opacity: 1;
}
.act-bar .list-group a.list-group-item {border: 1px solid #ddd;}

#playlist { display: flex; }

input[type="submit"] {
    background-color: inherit;
    color: #444;
}

.btn {
  border-color: initial;
  margin-top: 15px;
}
.btn-primary {
    color: #444;
    background-color: transparent;
}

.alert { padding: 10px; }