*::after, *::before {
    content: "";
}

.tg-list:before, .tg-list:after, .tg-list > *::after,.tg-list > *::before,.grid > *::after, .grid > *::before { content:unset; }

ul{padding:0;margin:0;}

.members-content {  
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

.members-content article p { max-width:750px;}

.career { max-width: 750px; display:inline-block; }
.career h2 { border-bottom: 1px solid #ffffff1f;  }

.career .job-advert { 
  padding: 24px;
  border: 5px solid;
  border-color: inherit;
  font-size: 1.3rem;
  width: 100%;
  margin-bottom: 14px;
}

.career .job-advert { transition:300ms all; float: right;}
.career .job-advert:hover { color:var(--primary-color-orange); border-color:var(--primary-color-orange);}
.career .job-advert span { float:right; }


.member-group {  
  height: unset;
  padding: 14px 0;
  transition: 300ms all;
  cursor: pointer;
  display:inline-block;
  margin-right: 7px;
  font-size:1.2rem;
}
   
.member-group.active { color: var(--primary-color); }
.member-group:hover { color: var(--primary-color-orange); }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    grid-auto-rows: 1fr;
    padding: 0;
    margin: 24px 0 0 0;
}

@media (max-width: calc(22rem * 2 + 1rem)) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

}
.grid::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.grid > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.member {   
  text-align: center;
  display: none;
  align-items: center; 
  overflow:hidden;
  position: relative;
  cursor: pointer;
  float:left;
  filter:saturate(1);
  transition:300ms all;
  pointer-events: auto;
  cursor: pointer;
  border-bottom: 8px solid var(--primary-color-light);
}

.member * {
 pointer-events: none;
}

.member img { position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  height: 100%;  
  width: auto;     
  filter: saturate(0);
  transition: 300ms all;
  filter: saturate(0) contrast(1.3) brightness(1.1);
}

.member.active { pointer-events:none;}
.member.active, .member:hover { filter:saturate(1); }

.member h3, .member p { padding:0; margin:0 0 7px 0; line-height:1; }
.member h3 { font-size: 1.5rem;}

.member:before {
  content:"";
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:inline-block;
  background-color:var(--primary-color);
  opacity:0;
  transition:300ms all;
  z-index:0;
}

.member div { align-content: end; height: 100%; opacity:0; transition:300ms all; z-index:1; padding: 10px 20px; transform: translate(0px, 10px); background: linear-gradient(to bottom, #002f4b00 40%, var(--primary-color));}
.member:hover div, .member:hover:before  { opacity:1; transform: translate(0px, 0px); }
.member:hover img{ filter:saturate(1) contrast(1.1) brightness(1.2)!important; transform: translate(-50%, -50%) scale(1.2); }

.bio { background: var(--primary-color); color:var(--primary-color-light); padding: 1.315vw;}
.bio h2 { margin-top:0; color:inherit;}
.bio h2 strong { font-size: 1rem;
  font-weight: 100; }
.bio p {
  width: 100%;
  text-align: justify; color:inherit; color:inherit; margin:0;}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;      
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;  
  display: grid;    
}

.dialog.toBack { z-index:-1;}

.dialog:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: -1; 
}

.dialog.active {
  opacity: 1;
  z-index: 100; 
}

.dialog a { 
  color: var(--main-color);
  font-weight: 700;
  text-decoration: none; 
  margin:12px 0; 
  display:inline-block;
  width:100%;
}

.dialog-content {    
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  width: 410px;
  height: auto;
  margin: 0 auto;       
  display: inline-block;    
  transition:300ms all;
  padding: 0 0 24px 0;
  background: #1a1c23;
}

.dialog button { 
  display: inline-block;
  background: var(--main-color);
  color: white;
  border: 0 none;
  cursor: pointer;
  padding: 10px 5px;
  font-size:1rem;  
  border-radius: 4px;
  transition: 300ms all;
  width: 80%;
  margin:12px 0;
  float: unset; 
}

.dialog .material-symbols-outlined { 
  vertical-align: middle;
  margin-left: 2px;
  font-size: 1rem;
  font-weight: 600;
}

.dialog #statusCode { 
  display:inline-block; width:100%; background: #22242c;
  padding: 38px 40px;
  margin-bottom: 14px;
  color: var(--main-light-bg-color);     
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.dialog p { color:var(--main-background-color);}

.dialog #responseMsg { width:80%; display:inline-block; margin:12px 0; }

.dialog input { 
  text-align: center;
  width: 100%;
  margin:12px 0; 
}

.slide-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  transition: visibility 0s 0.6s;
  z-index:5;
  z-index: 10000;
}
.slide-panel::after {  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: background 0.3s 0.3s;
}
.slide-panel.is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}
.slide-panel.is-visible::after {
  background: rgba(0, 88, 148, 0.6);
  background: rgba(37, 40, 42, 0.6);  
  transition: background 0.3s 0s;
}
.slide-panel.is-visible .panel-close::before {
  -webkit-animation: panel-close-1 0.6s 0.3s;
  animation: panel-close-1 0.6s 0.3s;
}
.slide-panel.is-visible .panel-close::after {
  -webkit-animation: panel-close-2 0.6s 0.3s;
  animation: panel-close-2 0.6s 0.3s;
}

@-webkit-keyframes panel-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@keyframes panel-close-1 {
  0%, 50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(45deg);
  }
}
@-webkit-keyframes panel-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-45deg);
  }
}
@keyframes panel-close-2 {
  0%, 50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-45deg);
  }
}
.panel-header {
  position: fixed;
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: var(--primary-color);
  z-index: 2;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  transition: top 0.3s 0s;
}
.panel-header h3 {  
  margin:0;
  color: var(--primary-color-light);
  padding-left: 5%;  
}
.from-right .panel-header, .from-left .panel-header {
  top: -50px;
}
.from-right .panel-header {
  right: 0;
}
.from-left .panel-header {
  left: 0;
}
.is-visible .panel-header {
  top: 0;
  transition: top 0.3s 0.3s;
}
@media only screen and (min-width: 768px) {
  .panel-header {
    width: 70%;
  }
}
@media only screen and (min-width: 1170px) {
  .panel-header {
    width: 40%;
  }
}

.panel-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.panel-close::before, .panel-close::after {
  position: absolute;
  top: 22px;
  left: 20px;
  height: 3px;
  width: 20px;
  background-color: var(--primary-color-light);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.panel-close::before {
  transform: rotate(45deg);
}
.panel-close::after {
  transform: rotate(-45deg);
}

.no-touch .panel-close:hover::before, .no-touch .panel-close:hover::after {
  background-color: #ffffff;
  transition-property: transform;
  transition-duration: 0.3s;
}
.no-touch .panel-close:hover::before {
  transform: rotate(220deg);
}
.no-touch .panel-close:hover::after {
  transform: rotate(135deg);
}

.panel-container {
  position: fixed;
  width: 90%;
  height: 100%;
  top: 0;
  background: var(--primary-color-light);
  z-index: 1;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-delay: 0.3s;
}

.panel-container h1 { 
  color: var(--primary-color-light); 
  margin: 24px 0 0;
  line-height:1;
  font-size:2.25rem;
}

.panel-container strong { 
  color: var(--primary-color-light);    
  display:inline-block;
  font-size: 1.2rem;
  font-weight: 100;
  margin-bottom:1rem;
}

.from-right .panel-container {
  right: 0;
  transform: translate3d(100%, 0, 0);
}
.from-left .panel-container {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}
.is-visible .panel-container {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
@media only screen and (min-width: 768px) {
  .panel-container {
    width: 70%;
  }
}
@media only screen and (min-width: 1170px) {
  .panel-container {
    width: 40%;
  }
}

.panel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  padding: 49px 0;
  overflow: auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  transition: 300ms all;
  transform: translate(0px, 50px);
  opacity: 0;
}

body.v2 .panel-content {
    padding:10px 0 0 0;
}

body.v2 .panel-header { background:none; box-shadow:none; }
body.v2 .panel-content article p, body.v2 .panel-content article h1, body.v2 .panel-content article strong { padding: 0 5%;}
body.v2 .panel-header h3 { display:none; }
body.v2 .no-touch .panel-close:hover::before, body.v2 .no-touch .panel-close:hover::after, body.v2 .panel-close::before, body.v2 .panel-close::after { background-color:var(--primary-color-dark); }

.is-visible .panel-content { 
    transition-delay: 300ms;
    transform: translate(0px, 0px);
    opacity: 1;
}

.panel-content article { padding:0; margin:0;display: inline;}

.panel-content article img {

    width: 300px;
    margin: 40px 0 0;

}

.panel-content article p {
  font-size: 14px;
  font-size: 0.875rem;
  color: var(--primary-color-dark);
  line-height: 1.4;
  margin: 2em 0;
}

.panel-content article p:first-of-type {
  margin-top: 0;
  text-align: justify;
}

@media only screen and (min-width: 768px) {
  .panel-content article p {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6;
  }
}

.tg-list {     
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  grid-auto-rows: 1fr; 
}

.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-light + .tgl-btn {
  background: #999;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
}
.tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: var(--primary-color-light);
  transition: all 0.2s ease;
}
.tgl-light:checked + .tgl-btn {
  background: var(--primary-color);
}

.tg-list { color:var(--primary-color-dark); }

.social-btns {padding:0; margin:0; }
.social-btns li {
    margin: 8px;
    display: inline-block;
    vertical-align: top;
}

.social-btn-part {
    width: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: 300ms all;
}

.social-btns :after { content:unset; }

.social-btn-part:after {
    top: 0;
    bottom: 50%;
}

.social-btn-part:before {
    top: 50%;
    bottom: 0;
}

.social-btn-part:hover {
    color: #fff;
}

.social-btn-part:hover { color:var(--primary-color-light);
    border-color:var(--primary-color-light); }
.social-btn-part.twitter:hover {
    background: #4cc4f2;    
}

.social-btn-part.facebook:hover {
    background: #3b5998;
}

.social-btn-part.linkedin:hover {
    background: #0a66c2;
}

.social-btn-part.google:hover {
    background: #dd4b39;
}

.social-btn-part.pinterest:hover {
    background: #cb2027;
}

.social-btn-part.instagram:hover {
    background: #9b6954;
}

.social-btn-part.tumblr:hover {
    background: #32506d;
}

#team .panel-content header figure {
  margin: 0;
  width: 100%;
  background: linear-gradient(to top, #002f4b, var(--primary-color));
  padding: 0;
  border: 0;                      
  position: relative;
  display: flex;
  align-items: flex-end;
}

#team .panel-content header figure img {
  height: auto;
}                               

#team .panel-content article figure img { 
  filter: brightness(1.2) contrast(1.1) saturate(1.2);
  width: 300px;
  margin: auto;
  border: 0;                      
  padding: 0;                     
  display: inline-block;                     
  height: auto;
}
                   
#team .panel-content section {     
  display: inline-block;
  padding: 5%;
  max-width:750px;
}
                   
#team .panel-content article section p {
  padding: 1rem 0 0 0;
}

#team .panel-content article section h2 {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #80808038;
  padding-bottom: 14px;
}

#team .panel-content .social-btns { 
  color: var(--primary-color);
  position: absolute;
  bottom: 0;
  left: 5%; 
}

#team .linkedin {
  display: none;
  flex-direction: column;
  margin-top: auto;                   
}

#team .linkedin.visible { display:flex; }
#team .linkedin svg{ color:var(--primary-color-light); fill:currentColor; transition:300ms all;}
#team .linkedin a:hover { background:var(--primary-color-light); }
#team .linkedin a:hover svg{ fill:#0077b5;}

#team figcaption { 
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 5% 5% 0;
}

#team figcaption .info {
  display: flex;
  flex-direction: column; 
  width:100%;
}

#team figcaption .linkedin a {
  cursor: pointer;
  height: 50px;
  width: 50px;                     
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1); 
  transition: 300ms all;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff00;                    
  border-radius: 4px;
  border:1px solid;
  color:var(--primary-color-light);
}

@media (max-width: 600px) {
  figcaption {
    flex-direction: column;
    align-items: flex-start;
  }
  figcaption img { width:200px; }
  .linkedin {
    margin-top: 1rem; /* separate it from .info on mobile */
    align-self: flex-start; /* or flex-start if you want it left-aligned */
  }
}


#team input[type="radio"] {
  position: absolute;
  left: -9999px;
}

#team .filters {
  padding:0 54px 0 0;
  text-align:right;
}

#team .filters * {
  display: inline-block;
}

#team .filters label {
  width:100%;
}

*:has([value="All"]:checked) .filters [for="All"],
*:has([value="member"]:checked) .filters [for="member"],
*:has([value="board"]:checked) .filters [for="board"],
*:has([value="founders"]:checked) .filters [for="_founders"]{ 
  color: var(--primary-color-light);
  text-transform: uppercase;
}

*:has([value="All"]:checked) .member[data-member-of], :has([value="member"]:checked) .member[data-member-of~="member"], :has([value="board"]:checked) .member[data-member-of~="board"], *:has([value="founders"]:checked) .member[data-member-of~="founders"]{
  display:grid;
}

.members .member {
  opacity: 1; 
  transition: opacity 0.3s ease-in-out; 
}

@media screen and (max-width: 60em) {
  #team .panel-content header figure{
    flex-direction:column;
  }
  #team figcaption {
    text-align: center;
    padding: 0;
    background: var(--primary-color);
  }
  #team .linkedin { 
    margin: 1rem;
    align-self: flex-start;
  }
}