html {height: 100%; padding:2.5em;}
body{width:100%;font :100%/1.4 'Helvetica Neue',arial,helvetica,helve,sans-serif; background-color: #ffffff;}
section {min-height: 100%; clear: both; height: inherit; width: inherit;}
h1{ color:black;font-size: 2em;font-family:verdana,sans-serif;left:190px;top:160px;width:250px;display: block;position: relative;width: 500px;top: 25px;left: 10px;font-size: 1.0em;}
h2 {display: block;font-size: 1em;margin-left: 0px;margin-top: 0.83em;font-family:verdana,sans-serif;}
h3 {display: block;font-size: 1em;margin-left: 0px;margin-top: 10px;font-family:verdana,sans-serif;}
h4 {display: block;font-size: 0.8em;margin-left: 0px;margin-top: 10px;font-family:verdana,sans-serif;}
.header img {float: left;width: 50px;background: #555;}
.avid-screen{display:flex;flex-wrap: wrap;}
.first-column {flex: 1 1 425px; padding:5px; box-sizing: border-box;}
.camera {display: flex; display: flex; justify-content: center;  align-items: center;}
.col-container {display:flex;flex-wrap: wrap;}
.col {flex: 1 1 425px; padding:5px; box-sizing: border-box;}
.header img {float: left;width: 65px;background: #555;}
.header-title { display:block; color:black;font-size: 1em;font-family:tahoma;left:190px;top:200px;width:250px;display: block;position: relative;width: 500px;top: 25px;left: 10px;font-size: 1.0em;}
.header-subtitle {display: block;font-size: 0.6em;margin-left: 0px;margin-top: 0.83em;font-family:tahoma;margin-left:75px;}




.topnav {background-color: black;overflow: hidden;padding:2px; position: relative;}

.topnav a {background-color: #944f4f; width:150px;margin-right:2px; margin-bottom:2px;margin-top:2px; margin-left:2px; float: left;display: block;color: 
  rgb(255, 255, 255);text-align: center; padding: 10px 7.5px;text-decoration: none;font-family:verdana,sans-serif; text-transform:uppercase;font-size:9px; font-weight: bold;}

  .topnav a.active {background-color: #ff0000;color:  white ;width:150px;margin-right:2px; margin-bottom:2px;margin-top:2px; margin-left:2px; font-weight: bold;text-align: center;}
.topnav a:hover {background-color: #f18f8f;color: black;}
.topnav .icon {display: none;}
@media screen and (max-width: 425px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {float: left;display: block;} }
@media screen and (max-width: 425px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {position: absolute;right: 0;top: 0;}
.topnav.responsive a {float: none;display: block;text-align: left;}  }







.button {display: inline-block;margin: 0 5px;height: 30px;line-height: 8px;padding-right: 15px;padding-left: 25px;position:relative;background-color:rgb(66, 64, 64);color:rgb(255,255,255);text-decoration:none;text-transform: lowercase;letter-spacing: 1px;margin-bottom: 5px;transition: 0.5s;width:45px;border-color: #ff9b9b;}
a.button:hover {background-color: #807e7e; color: rgb(59, 172, 93);}
.button p{font-size: 10px;}
.button span {position: absolute;top:8px;left:5px;width:5px;text-transform:uppercase;font-size:10px;font-weight:400;border-top-left-radius:5px;border-bottom-left-radius:5px;border-right: 1px solid  rgba(0,0,0,0.15);text-decoration: none;}
.text-center{  text-align: center;}
.video2 {cursor: pointer;}
.button1 {background-color: black ;width:180px;border: none;color: white;padding: 10px 15px; text-align: center;text-decoration: none; display: inline-block;font-size: 12px;font-weight: bold;cursor: pointer; }
.featured { display:grid; grid-template-rows: 380px 1px 100px 75px;grid-template-columns:1em 1fr 1em 1fr 1em 1fr 1em; grid-template-areas: ".column1 . column2 . column4." ".column1 . column2 . column4." ".column1 . column3 . column4." ".column1 . colomn3 . column5."; }
.column1 {grid-area: column1;}
.column2 {grid-area: column2;}
.column3 {grid-area: column3;}
.column4 {grid-area: column4;}
.column5 {grid-area: column5;}
.imgBrd {box-shadow: 0 0 0 0 #ccc; }
.list-address{display:block;font-size:13px;text-align:center;}
.footer-basic {background-color:#f9f9f9;color:#4b4c4d;}
.footer-basic ul {padding:0;list-style:none;text-align:center;font-size:18px;line-height:1.6;margin-bottom:0;}
.footer-basic li {display:inline;padding:0 10px;}
.footer-basic ul a {color:inherit;text-decoration:none;opacity:0.8;}
.footer-basic ul a:hover {opacity:1;}
.footer-basic .social {width:100%;text-align:center;padding-bottom:20px;padding-top:20px;}
.social {text-align:center;}
.footer-basic .social > a {font-size:24px;width:40px;height:40px;line-height:40px;display:inline-block;text-align:center;border-radius:50%;border:1px solid #ccc;margin:0 8px;color:inherit;opacity:0.75;}
.footer-basic .social > a:hover {opacity:0.9;}
.footer-basic .copyright {margin-top:15px;text-align:right;font-size:13px;color:#aaa;padding-bottom:5px;margin-right:5px;}
@media (max-width: 425px) {
.contribute-btn {min-width: 100px !important;max-width: 100% !important;font-size: 1em !important;}  } 
.noselect {  -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.progress-bar-container {width: 100%; background-color: #ddd; border-radius: 5px; height: 16px; overflow: hidden;}
.progress-bar-fill {height: 100%; background-color: #4caf50; width: 0%; transition: width 0.6s ease-in-out;}
.progress-bar-fill { height: 100%; background-color: #4caf50; width: 0%; position: relative; transition: width 0.6s ease-in-out;}
.progress-label { position: absolute; right: 8px;top: 0;bottom: 0;display: flex;align-items: center;font-size: 12px; color: white; font-weight: bold;}
.container {display: flex; flex-direction: column; height: 200vh; }
.row {flex: 1; display: flex; border-bottom: 1px solid #ccc; }
.row:last-child { border-bottom: none; }
.column { flex: 1; padding: 20px; border-right: 1px solid #ccc; }
.column:last-child { border-right: none; }
.full-width {padding: 20px; background-color: #f5f5f5;}




.character-map {
  width: 100%;
  max-width: 900px;
  margin: 3em auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.character-row {
  display: flex;
  justify-content: center;
  margin: 2em 0;
  gap: 4em;
}

.character {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 150px;
}

.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #ccc;
  position: relative;
  margin-bottom: 0.8em;
}
.avatar::before, .avatar::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.avatar::before {
  width: 45px;
  height: 45px;
  background: #222;
  border-radius: 50%;
  top: 15px;
}
.avatar::after {
  width: 70px;
  height: 35px;
  background: #222;
  border-radius: 0 0 70px 70px / 0 0 35px 35px;
  top: 55px;
}

.name {
  text-align: center;
  margin-top: 0.5em;
  font-size: 1.2em;
}

@media (max-width: 800px) {
  .character-row {
    gap: 2em;
  }
  .avatar { width: 65px; height: 65px; }
}
@media (max-width: 600px) {
  .character-map { max-width: 99vw; }
  .character-row { flex-direction: column; gap: 1em; }
  .character { min-width: 100px; }
}