html,
body {
  background:#1D1637;
  font-family:helvetica, arial, sans-serif;
  padding:1em;margin:0;
  color:white;
  font-size:14px;
}
header,footer,div { box-sizing:border-box; }
img { max-width: 100%;height: auto;}
h1,h1 a  { color:white; text-decoration:none; margin:0; padding-top:0; }

.members {
    color:black;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    grid-template-columns: repeat(2, 1fr); /* mobile default */
}

@media (min-width: 600px) {
  .members {
    grid-template-columns: repeat(3, 1fr); /* tablets */
  }
}

@media (min-width: 1024px) {
  .members {
    grid-template-columns: repeat(5, 1fr); /* desktop */
  }
}


div.member {
    padding:10px;
    text-align:center;
    background:white;
    margin-bottom:0.6em;
    margin-top:0.6em;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.member       { transition: all .5s ease-in-out; }
.member:hover { background:#FAD5A5;transform: scale(1.05);}

.member .image { overflow:hidden; margin-bottom:0.4em; position:relative; }
.member .image img {  margin-bottom:0;}

.member .image .class { display: inline-block; font-size:0.8em; padding:0.4em 0.6em; color:white; position:absolute; top:20px; left:-6px; }

.name  { }
.fname { display: inline-block; font-size:1.12em; }
.lname { display: inline-block; font-size:1.12em; }

.group { font-size:0.8em; padding:0.4em 0.6em;color:white; text-decoration:none; }

.cdc                 { background: #A67C00;}
.all                 { background: #CFCFCF; color: black;}
.basse               { background: #E18B43}
.tenor               { background: #C92A35}
.alto1, .alto2       { background: #9ed8a8}
.soprane1, .soprane2 { background: #2F6EAC}

.f-thin { font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }
.f-bold { font-family: "Open Sans", sans-serif;font-optical-sizing: auto;font-weight: 800;font-style: normal; }
.f-arrow { font-family: "Badeen Display", system-ui; font-family: "Goblin One", serif; font-weight: 400;font-style: normal;}
.fl { display:flex; justify-content:space-between; align-items: center; }
.f16 { font-size:1.6em; }
.f14 { font-size:1.4em; }
.f12 { font-size:1.2em; }
.f8  { font-size:0.8em; }

.p10   { padding:10px; }
.plr10 { padding-left: 10px; padding-right:10px; }
.ptb0  { padding-top:0; padding-bottom:0; }
.m0    { margin:0; }
.m10   { margin:10px; }

.name        { }
.fname       { font-weight:bold; }
.lname       { }
.member .phone       { font-size:0.8em; display:none !important; }
.member .email       { font-size:0.8em; display:none !important; }
#modalSocials { max-height:40px; }
#modalSocials img { max-height:32px; }
.socials     { max-height:40px; }
.socials img { max-height:32px; }

.close { padding:0; margin:0; height:auto; color:white; text-decoration:none; z-index:10000;  }


.modal {
    display:none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100vh;
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}
.modal-background { width:100vw; height:100vh; position: absolute; left:0; top:0; z-index:100; }
.modal-card {
    position:relative;
    z-index:1000;
    background-color: #fefefe;
    margin: 4vh auto;
    padding: 0;
    width: 50%;
    color:black;
}

.modal-card-title  { color: white;}

.modal-card-body a { color: black; text-decoration:none; }

#modalDetails { display:flex; gap:1em; margin-top:0.6em; }
#modalDetails div { flex: 1; text-align:center; font-size:1.2em; }


.modal-card-foot a { color: black; text-decoration:none; }

.previous { background:#EFEFEF; padding:0.4em 0.6em; }
.next     { background:#EFEFEF; padding:0.4em 0.6em; }

.selected { border-bottom: 4px solid white; -webkit-filter: brightness(100%); filter: brightness(100%); }




#flash-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 1.5rem;
  padding: 1rem 2rem;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

body.flash-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 9998;
}

body.flash-overlay::before,
body.flash-overlay #flash-notice {
  opacity: 1;
}