@font-face {
  font-family: "handel";
  src: url(fonts/handel.ttf) format("truetype");
}

@font-face {
  font-family: "tahoma";
  src: url(fonts/tahoma.ttf) format("truetype");
}

@font-face {
  font-family: "roboto";
  src: url(https://mfmaterials.com/fonts/RobotoRegular-3m4L.ttf) format("truetype");
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  letter-spacing: 0.08rem;
  font-family: tahoma, verdana;
}

.logo {
  position: absolute;
  top: 10px;
  left: 10px;
  margin-top: 14px;
}

.topbanner {
  text-align: center;
  margin-top: 14px;
}

.menu {
  font-family: tahoma;
  margin-top: 0px;
  margin-bottom: 40px;
}

.stripe {
  background-color: #17e0c1;
  position: relative;
  margin: 6px 10px 6px 10px;
  padding: 0px;
  text-align: center;
}

.menu a {
  display: inline-block;
  float: none;
  color: #222;
  padding: 14px 20px 14px 20px;
  text-decoration: none;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.12rem;
  background: #17e0c1;
}

.menu a:hover {
  background: #54ecd5;
  color: #222;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  text-align: left;
  font-size: 16px;
  color: #222;
  font-weight: 100;
}

.members, .projects, .news, .gallery {
  text-align: justify;
  width: 1024px;
}

.biopic {
  float: left;
  width: 150px;
}

.mem_row {
  margin: 0 0 50px 0;
  display: flex;
  justify-content: space-between;
}

.member {
  float: left;
  padding: 50px 0px 50px 0px;
  width: 510px;
}

.member a {
  text-decoration: none;
}

.memcom {
  float: left;
  padding: 10px 0px 0px 30px;
}

.memname {
  font-size: 18px;
  color: #222;
}

.memtitle {
  font-size: 18px;
  color: #333;
}

.bio_memname {
  font-size: 20px;
  color: #222;
}

.bio_memtitle {
  font-size: 18px;
  color: #333;
}

.webmaster {
  font-family: handel;
  text-decoration: none;
  font-size: 18px;
  color: #555;
  margin: 83px 0px -100px 0px;
}
.memberswebmaster {
  font-family: handel;
  text-decoration: none;
  font-size: 18px;
  color: #555;
  margin: 9px 0px -100px 0px;
}

.bioarrow {
  padding-top: 50px;
}

.memberall {
  width: 1024px;
}

.bio {
  float: left;
  padding: 50px 500px 100px 0px;
}

.segment {
  float: left;
  text-align: justify;
  margin: 0px 0px 50px 0px;
}

.segment_name {
  font-size: 19px;
  color: #222;
  padding: 10px 0px 30px 0px;
}

.segment_entry {
  letter-spacing: 0.07rem;
  text-indent: 2em;
  font-size: 17px;
  color: #333;
  padding: 0px 0px 10px 0px;
}

.segment_entry:hover {
  background-color: #e8e8e8;
}

.pub {
  letter-spacing: 0.07rem;
  text-indent: 2em;
  text-align: justify;
  font-family: arial;
  font-size: 17px;
  color: #333;
  margin: 0px 0px 20px 0px;
}

.pub:hover {
  background-color: #e8e8e8;
}

.pub a, .project a, .new a, .caption a {
  color: #6e2f2f;
}

.pub a:hover, .project a:hover, .new a:hover, .caption a:hover {
  color: #6e2f2f;
  background-color: #b6eee0;
}

.bold {
  font-weight: 900;
  color: #555;
}

.segment_inline {
  float: left;
  padding: 0px 500px 50px 0px;
}

.segment_name_inline {
  float: left;
  font-size: 19px;
  color: #222;
}

.segment_entry_inline {
  float: left;
  text-indent: 1em;
  color: #333;
  font-size: 17px;
  margin: 2px 0px 0px 0px;
}

.segment_entry_inline:hover {
  background-color: #e8e8e8;
}

.segment .title, .gallery .title {
  letter-spacing: 0.1rem;
  font-size: 20px;
  color: #222;
  padding: 10px 0px 100px 0px;
}

.paragraph, .new, .project {
  letter-spacing: 0.09rem;
  line-height: 1.3;
  text-indent: 2em;
  font-family: arial;
  text-align: justify;
  font-size: 17px;
  color: #333;
  margin: 0px 0px 30px 0px;
}
.paragraph {
  text-indent: 0;
}

.paragraph li {
  list-style-type: none;
  text-indent: 2em;
}

.paragraph i {
  list-style-type: none;
  text-indent: 2em;
  font-family: tahoma;
  font-size: 19px;
}

/* .new {
  font-family: tahoma;
} */

.project:hover {
  background-color: #e8e8e8;
}

.portfolio {
  text-align: center;
  margin: 25% 0px 0px 0px;
}



.row {
  margin: 0 0 50px 0;
  display: flex;
  justify-content: space-between;
}
    
.galentry {
  float: left;
  width: 250px;
}

.galfig {
  width: 100%;
  cursor: zoom-in;
}

.caption {
  font-family: arial;
  text-align: justify;
  font-size: 18px;
  color: #333;
}

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.0);
  background: #fff;
  z-index: 5;
  /* max-width: 1200px; */ #disabling it (with diez message after) keeps the img centered, not sticking out of the box and not blurry
    /* can delete but gets blurry, exact values smaller than the render (700px) horizontally shift the content and
     mess the shadow up if smaller than the image| max-width: 1200px; */
  width: 100%;
    /* can delete but gets blurry, at 100% without max-width takes the entire screen horizontally | width: 100%; */
  opacity: 1;
  padding: 0px 1px 1px 1px;
    /* changes (including to delete) can make blurry | padding: 0px 5px 5px 5px; */
  box-shadow: 15px 15px 15px rgba(0,0,0,0.4);
  align-items: center;
  align-content: center;
  text-align: center;
  cursor: zoom-out;
}

.modalfig {
}

.modalfig img {
  max-height: 100vh;
  max-width: 100vw;
}
/* no more */
.closefig {
  color: #333;
  position: absolute;
  top: 10px;
  right: 120px;
  font-size: 35px;
  font-weight: bold;
}

.closefig:hover,
.closefig:focus {
  color: #777;
  text-decoration: none;
  cursor: pointer;
}
/* no more */

.shadow{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: none;
  background: rgba(0,0,0,0.0);
  cursor: zoom-out;
}
/* works fine; change 0.0 */