.bg-img-audition {
    background-image: url(../assets/images/4Girls_Stage_MilkyWay.png);
    background-position:center;
    background-repeat: no-repeat;
    background-attachment:local;
    background-size:contain;
    background-color: rgba(255, 255, 255, 0.5);
}
.bg-color-opaque-white4 {
    background-color: rgba(255, 255, 255, 0.4);
}
.bg-color-opaque-white9 {
    background-color: rgba(255, 255, 255, 0.9);
}


a.classfooter {
  text-decoration: none;
  color:white;
}
a.classfooter:link {
  text-decoration: none;
  color: white;
}
a.classfooter:visited {
  text-decoration: none;
  color: white;
}
a.classfooter:hover {
  text-decoration: underline;
  color: white;
}
a.classfooter:active {
  text-decoration: none;
  color: white;
}

a.classcredits {text-decoration: underline;}

a {
    text-decoration: none;
  }

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

  img.round {
    border-radius: 50%;
  }

  .bg_aqua {
    background-color: aqua;
  }

  .bg_blue_grey {
    background-color: rgba(155, 160, 190, 1);
  }
  
  .bg_light_blue_grey1 {
    background: repeating-linear-gradient(
      30deg,
      #9BA0BE,
      #606dbc 50px,
      #465298 50px,
      #465298 100px
      );
  }

  .bg_light_blue_grey3 {
    background: repeating-linear-gradient(
  60deg,
  #D2D0DD,
  #606dbc 50px,
  #465298 50px,
  #465298 100px
  );
  }
  .bg_light_blue_grey2 {
    background: repeating-linear-gradient(
  45deg,
  #D2D0DD,
  #606dbc 50px,
  #465298 50px,
  #465298 100px
  );
  }

  .bg_dark {
    background-color: rgba(48, 55, 74, 1);
  }

  html, body {width: auto!important; overflow-x: hidden!important} 
/*
Box-sizing 
For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box.
This ensures padding does not affect the final computed width of an element,
but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.
On the rare occasion you need to override it, use something like the following:
*/
.selector-for-some-widget {
    box-sizing: content-box;
  }
  
  
  /* (A) WRAPPER */
.hoverwrap {
  position: relative; /* required for (c2) */
  max-width: 100%;   /* optional */
}

/* (B) RESPONSIVE IMAGE */
.hoverwrap img { width: 100%; }

/* (C) CAPTION */
.hovercap {
  /* (C1) DIMENSIONS */
  box-sizing: border-box;
  width: 90%;
  padding: 10px;
 
  /* (C2) PLACE AT BOTTOM */
  position: absolute;
  top: 0; left: 0;
 
  /* (C3) COLORS */
  background-color: rgba(0, 0, 0, 0.65);
  color: white;
}

/* (D) SHOW/HIDE */
.hovercap {
  visibility: none; opacity: 0;
  transition: opacity 0.3s;
}
.hoverwrap:hover .hovercap {
  visibility: visible; opacity: 1;
}