/* Constants */
:root {
    --igem-light-green: #D6DEB0;
    --igem-green: #668f55;
    --igem-white: #FFFADF;
    --igem-black: #2A2C2A;
    --igem-lila: rgb(170, 154, 171);
    --igem-orange: #F0BB54;
    --igem-font-vollkorn: "Vollkorn";
    --igem-font-atkinson: "Atkinson Hyperlegible";
    --igem-menu-height: calc(114px + 0.3rem);
    --igem-spacing-0: 4px;
    --igem-spacing-1: 8px;
    --igem-spacing-2: 16px;
    --igem-spacing-3: 32px;
    --igem-spacing-4: 64px;
    --igem-width-4-12-columns: 33.3333%;
    --igem-width-6-12-columns: 50%;
    --igem-width-9-12-columns: 75%;
  }

body { padding-top: var(--igem-menu-height); }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: var(--igem-light-green) !important; }
.bg-hero { background-color: #45b06cff; }

/* Navbar */
.uncollapsed .bar1 { -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); }
.uncollapsed .bar2 { opacity: 0; }
.uncollapsed .bar3 { -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); }
.bar1, .bar2, .bar3 { display: block; width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: var(--igem-black); }
.progress-container { position: fixed; top: var(--igem-menu-height); width: 100%; height: 0.3rem; background: var(--igem-white); z-index: 999; }
.progress-bar { height: 0.3rem; background: var(--igem-green); width: 0%; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
.social-icons { display: flex; margin-bottom: 1.2rem; justify-content: center; column-gap: 1.5rem; }
.social-icon { width: 1.5rem; height: 1.5rem; margin: auto; }
.social-icon-wrapper:hover { background-color: var(--igem-green); border: none; }
.social-icon-wrapper:hover > .social-icon { fill: var(--igem-white); }
.social-icon-wrapper { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background-color: var(--igem-light-green); border: var(--igem-black) 1px solid; border-radius: 9999px; }
.footer-column { display: grid; align-content: center; text-align: center; }
footer img { width: 200px; height: auto; }

a.igem {
  transition: 0.3s ease-out;
  box-shadow: inset 0 -0.3em 0 -1px var(--igem-lila);
}

a.igem:hover {
  text-decoration: none;
  box-shadow: inset 0 -1.4em 0 -1px var(--igem-lila);
  color: var(--igem-white);
}

section {
  margin-bottom: var(--igem-spacing-3);
}

details summary { 
  cursor: pointer;
}

table {
  width: 100%;
  margin-bottom: 1.5rem;
}

details summary > * {
  display: inline;
  vertical-align: middle;
  padding-top: 3px;
}

img {
  width: 100%;
  height: auto;
  border-radius: var(--igem-spacing-1);
}

header img {
  border-radius: 0;
}

.container-menu-footer img {
  box-shadow: none;
}

q {
  color: var(--igem-green);
  font-style: italic;
}

blockquote { 
  margin: 0;
  color: var(--igem-green);
  font-style: italic;
  margin-bottom: 1.5rem;
  border: var(--igem-black) solid 1px;
  padding: var(--igem-spacing-2);
  border-radius: var(--igem-spacing-1);
}

blockquote p { 
  margin-bottom: 0;
}

blockquote p:before { 
  content: open-quote;
  color: var(--igem-green);
}

blockquote p:after { 
  content: close-quote;
  color: var(--igem-green);
}

cite {
  display: block;	
  text-align: right;
  color: var(--igem-black);
  font-style: normal;
  font-weight: bold;
}

.team-header {
  text-align: center;
  margin-top: 1.5em;
}

figure {
  margin: 0 !important;
  margin-bottom: 1.5rem !important;
}

.img-inline {
  margin-bottom: 1.5rem;
}

.video-inline {
  margin-bottom: 1.5rem;
  width: 100%;
}

.team-member {
  position: relative;
}

.team-member:hover>.member-descr {
  z-index: 10;
  opacity: .85;
  top: 0%;
  padding: var(--igem-spacing-2);
  background: rgba(170, 154, 171, 0.9);
  height: 100%;
  color: black;
}

.team {
  margin-bottom: calc(var(--bs-gutter-x));
}

.member-descr {
  position: absolute;
  top: 100%;
  width: 100%;
  height: fit-content;
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  border-radius: var(--igem-spacing-1);
}

.member-descr p {
  display: none;
}

.team-member:hover>.member-descr p {
  display: block;
}

.accordion {
  background: none;
  color: var(--igem-black);
  cursor: pointer;
  padding: var(--igem-spacing-0) var(--igem-spacing-2);
  width: 100%;
  border: none;
  box-shadow: inset 0 -0.5em 0 -1px var(--igem-lila);
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
}

.active, .accordion:hover {
  box-shadow: inset 0 -5em 0 -1px var(--igem-lila);
  color: var(--igem-white);
}

.panel {
  padding: var(--igem-spacing-2);
  padding-top: 0;
}

.opened {
  display: block;
}

.closed {
  display: none;
}

.simple-language {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  padding: var(--igem-spacing-2);
  margin-bottom: var(--igem-spacing-3);
  color: var(--igem-white);
  background-color: var(--igem-orange);
  border-radius: var(--igem-spacing-1);
}