@font-face {
    font-family: 'Satoshi';
    src: url(https://static.igem.wiki/teams/4580/wiki/fonts/satoshi-regular.ttf);
}

@font-face {
    font-family: 'Satoshi Bold';
    src: url(https://static.igem.wiki/teams/4580/wiki/fonts/satoshi-bold.ttf);
}

@font-face {
    font-family: 'Poppins';
    src: url(https://static.igem.wiki/teams/4580/wiki/fonts/poppins-regular.ttf);
}

@font-face {
    font-family: 'Poppins Bold';
    src: url(https://static.igem.wiki/teams/4580/wiki/fonts/poppins-bold.ttf);
}

@font-face {
    font-family: 'NanumGothic';
    src: url(https://static.igem.wiki/teams/4580/wiki/fonts/nanumgothic-regular.ttf);
}

@font-face {
    font-family: 'NanumGothic Bold';
    src: url(https://static.igem.wiki/teams/4580/wiki/fonts/nanumgothic-bold.ttf);
}

@font-face {
    font-family: 'NanumGothic Extrabold';
    src: url(https://static.igem.wiki/teams/4580/wiki/fonts/nanumgothic-extrabold.ttf);
}

/* home */
header img{
    width: 100%;
    height: auto;
}
/* home end */


/* headers */
.py-5{
    padding-top: 3rem!important;
    padding-bottom: 4rem!important;
    margin-bottom: 1rem;
}
.hd1{
    text-align: center;
    font-family: 'Poppins Bold';
    font-size: 2.7rem;
    font-weight: 4rem;
    letter-spacing: 0.75px;
    color: #191E2F;
}

.header_bg_1 {
    background-image: url(https://static.igem.wiki/teams/4580/wiki/page-header.png);
    background-size: 120%;
}

.header_bg_2 {
    background-image: url(https://static.igem.wiki/teams/4580/wiki/page-header-6.png);
    background-size: 120%;
}

.header_bg_3 {
    background-image: url(https://static.igem.wiki/teams/4580/wiki/page-header-3.png);
    background-size: 120%;
}

.header_bg_4 {
    background-image: url(https://static.igem.wiki/teams/4580/wiki/page-header-4.png);
    background-size: 130%;
}

/* headers end */

/*body organization*/
body { 
    padding-top: 56px; 
    font-family: 'Satoshi', sans-serif;
    font-size: 1rem;
    overflow-x: hidden;
}

h1 {
    font-family: 'Poppins Bold';
    color: #9AAADF;
    font-size: 2rem;
}

h2 {
    font-family: 'Satoshi Bold';
    color: #9AC7C2;
    font-size: 1.5rem;
}

h3 {
    font-family: 'Satoshi Bold';
    font-size: 1rem;
}

h4 {
  font-family: 'Satoshi';
  font-size: 1rem;
  text-decoration: underline;
}

b {
    font-family: 'Satoshi Bold';
}

ol, ul {
    margin-top: -0.5rem;
}

ol ol {
    margin-top: 0;
}

ul ul {
    margin-top: 0;
}
/*body organization end*/

/* centered figure */
.figure-img-ctr {
    padding: 0 2rem 0 2rem;
    text-align: center;
}

.figure-img-ctr img {
    max-width: 60%;
    vertical-align: middle;
    height: auto;
}

.figure-img-ctr figcaption {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    position: relative;
    padding-top: 0.5rem;
    bottom: 0;
    right: 0;
    color: #747474;
    text-align: center;
}
/* figure end */

/* The side navigation menu */
.sidenav {
  position: fixed;
  height: 100%;
  width: 0;
  z-index: 1;
  top: 0; 
  left: 0;
  background-color: #F2F4FC;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 55px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  padding-bottom: 50px;
}

/* The navigation menu links */
.sidenav a {
  padding: 10px 50px 0px 30px;
  text-decoration: none;
  font-size: 1rem;
  color: #9AAADF;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #191E2F;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: sticky;
  top: 0;
  font-size: 33px;
  margin-left: 200px;
  z-index: 1;
  margin-bottom: -40px;
}

.openbtn {
    color: #9AAADF;
    font-family: 'Satoshi';
    font-size: 25px;
    float: left;
    top: 75px;
    left: 30px;
    margin-top: 25px;
    position: sticky;
    overflow: hidden;
}

.openbtn:hover {
    color: #F2F4FC;
    cursor: pointer;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.anchor {
    padding-top: 5rem;
    margin-top: -4.5rem;
}
/* Side NAV */

.left-aligned { margin-left: auto; }
.bg-dark { background-color: #9AAADF !important; }
.bg-hero { background-color: #F2F4FC; }

/* TOP NAV */
.navbar ul {
  margin-top: 0;
}

.dropdown-menu[data-bs-popper] {
    margin-top: 0.5rem;
}

.dropdown-menu {
    border-color: #F2F4FC;
    border-width: 0px 1px 1px 1px;
    border-radius: 0rem 0rem 0.25rem 0.25rem;
}

.dropdown-item {
    color: #9AAADF;
}

a.dropdown-item:hover{
    background-color: #F2F4FC;
    color: #191E2F;
}
/* TOP NAV END */

/* 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 }
.bd-callout-card .extra-img img {
    width: 18vw;
    height: 18vw;
    border-radius: 0px;
    box-shadow: 0 0 0 0px #FFF;
    float: right;
    margin-left: 1rem;
    object-fit: contain;
}


/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


/*team page*/

.accordion {
    max-width: 100%;
    height: 250px;
    display: flex;
    overflow: hidden;
    margin: 50px auto;
    border-radius: 10px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.tab {
    width: 50%;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    transition: all .5s ease;
    position: relative;
}

.tab img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caption {
    position: absolute;
    z-index: 2;
    white-space: nowrap;
    top: 150px;
    opacity: 0;
    padding-left: 10px;
}

.caption h2 {
    margin-bottom: 2px;
    text-overflow: clip;
    font-size: 24px;
    color: white;
    text-transform: uppercase;
}


/* --- Hover Effects --- */

.tab:hover img {
    opacity: .4;
}

.tab:hover {
    flex-shrink: 0;
}

.tab:hover .caption {
    transition: all .5s ease;
    opacity: 1;
}


/* --- Periodic Table --- */
.membertable {
    border-collapse: separate;
    border-spacing: 0.4rem;
    margin-left: auto;
    margin-right: auto;
}

.bio {
    display: none;
}

.membertable td {
    width: 3.5rem;
    height: 3.75rem;
    vertical-align: top;
    line-height: 50%;
    border: 0.05rem solid white;
    padding: 2px;
}

.membertable .blankspace {
    border: 0.05rem solid white
}

.membertable .leads {
      border: 0.05rem solid #9AAADF
    }


.membertable td:not(.blankspace):hover {
    border: 0.05rem solid #F2F4FC;
    cursor: default;
}

.membertable td:not(.blankspace):not(.leads):hover {
    border: 0.05rem solid #959CA5;
    cursor: default
}

.wl {
    background-color: #FFD0D0
}

.pd {
    background-color: #F9F7C0
}

.pnp {
    background-color: #C9EDCE
}

.buis {
    background-color: #FFDDCA
}

.wiki {
    background-color: #D2F0FC
}

.advisors {
    background-color: #E9C7F9;
}

.card {
    text-align: center;
    background: rgba(0, 0, 0, 0);
    border: rgba(0, 0, 0, 0);
    margin-top: -0.2rem;
}

num {
    font-size: 8px;
    padding-left: 5px;
}

inital {
    font-size: 25px;
    font-weight: bold;
    line-height: 2rem;
}

name {
    font-size: 8px;
    line-height: 10%;
}

.bd-callout-card {
    padding: 1.5rem 1rem;
    border-radius: 5px;
    background-color: #EFF2F9;
    max-width: 80%;
    margin: 0.5rem;
    transform-style: preserve-3d;
    overflow: hidden;
    display: flex;

    margin-left: auto;
    margin-right: auto;
}

.bd-callout-card img {
    width: 10vw;
    height: auto;
    overflow: hidden;
    min-width: 100px;
    object-fit: cover;
    align-content: center;
}

.infos {
    margin-left: 1.5rem;
}

.name {
    margin-bottom: 0.5rem;
}

.name h2 {
    font-size: 1.3rem;
}

.name h3 {
    font-family: 'Poppins Bold';
    font-size: 1.3rem;
    color: #9AAADF;
}

.name h4 {
    font-size: 1rem;
    font-family: 'Satoshi';
    color: #747474;
}

.name h5 {
    font-size: 1.1rem;
    font-family: 'Poppins';
    color: #9AC7C2;
}

.text {
    font-size: 1rem;
    margin-bottom: 1rem;
    line-height: 1.2rem;
}
/* team page end */

/* education page*/
.dates {

    color: #777777;
  
}



/* image slider */
.slide-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative; 
  }
  
  .mySlides {
    width: 100%;
    height: auto;
    margin: 20px;
  }
  
  .slider-btn {
    margin-top: 10px;
    background-color: #9AAADF;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    position: absolute; 
    top: 50%;
  }
  
  .left {
    transform: translateY(-50%);
    margin-left: -70vh;
  }
  
  .right {
    transform: translateY(-50%);
    margin-right: -70vh;
  }
  

  /* end of image slider*/  

  .all-stats{
    display: flex;
    flex-direction: row;
  }

  .stats {
    display: flex;
    flex-direction: column;
    margin-right: 100px;

}



/* view plan button */

.rounded-button {
    display: inline-block;
    padding: 10px 40px;
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 20px;
    width: fit-content;
    border: 1px solid #9AAADF;
    color: white;
    background-color: #9AAADF;
  }

  .rounded-button:hover {
    color: #9AAADF;
    background-color: white;
  }
/* end of rounded button*/
/* education page end*/

/*ihp dropdown content taken from last year wiki */
.q-a-content {
  width: 80%;
  /* padding: 20px;*/
  margin: 0 auto;
  padding: 0 60px 0 0;
}

.toggle-list-content {
  width: 100%;
  /*padding: 20px;*/
  margin: 0 auto;
  /*padding: 0 0 0 20px;*/
  /*padding-top: 10px;*/
}

.centerplease {
  margin: 0 auto;
  max-width: 270px;
  font-size: 40px;
}

.question {
  position: relative;
  background: #CEE4E1;
  margin: 0;
  padding: 10px 10px 10px 50px;
  display: block;
  width:100%;
  cursor: pointer;
  border-radius:4px;
}

.answers {
  background: #fff;
  padding: 0px 15px;
  margin: 5px 0;
  max-height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  transition: .7s ease;
}

.questions:checked ~ .answers{
  max-height: 1500px;
  opacity: 1;
  padding: 15px;
}

.plus {
  position: absolute;
  margin-left: 10px;
  margin-top:5px;
  z-index: 5;
  font-size: 2em;
  line-height: 100%;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}

.questions:checked ~ .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.questions {
  display: none;
} 
/*ihp page end */

/* notebook */
.notebook-date {
    border: 1px solid #9AAADF;
    color: #9AAADF;
    padding: 10px 20px;
    width: fit-content;
    border-radius: 10px;
    margin-top: 10px;
}
/* notebook end */

/* change link color */
a {
  color: #9AAADF;
}

.bmodel a {
  color:#24367c;
}

h2 a {
  color:#9AC7C2;
}

/* description */
.base-table{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    border-color: #ccc;
    border-spacing: 0;
    border: 1px solid #ccc;

    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    padding: 10px 5px;
}

.base-table th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
  padding: 5px;
}

.base-table th{
    background-color: #F2F2F2;
}

/* TIMELINE */


.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #24367c;
  margin-bottom: 5px;
}

.timeline ul li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
  z-index: 1;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 60vh;
  padding: 15px;
  background: #F2F4FC;
  margin-bottom: -75px;
}

.timeline ul li div::before {
  content: "";
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 5vh;
  position: relative;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F2F4FC transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -65vh;
  position: relative;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F2F4FC;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background 0.5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #F2F4FC;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }

  .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }

  .timeline ul li div {
    width: calc(100vw - 91px);
  }

  .timeline ul li:nth-child(even) div {
    left: 45px;
  }

  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F2F4FC transparent transparent;
  }
}

/* EXTRA/CLIP PATH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline-clippy ul li::after {
  width: 40px;
  height: 40px;
  border-radius: 0;
}

.timeline-rhombus ul li::after {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.timeline-rhombus ul li div::before {
  bottom: 12px;
}

.timeline-star ul li::after {
  clip-path: polygon(50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%);
}

.timeline-heptagon ul li::after {
  clip-path: polygon(50% 0%,
      90% 20%,
      100% 60%,
      75% 100%,
      25% 100%,
      0% 60%,
      10% 20%);
}

.timeline-infinite ul li::after {
  animation: scaleAnimation 2s infinite;
}

@keyframes scaleAnimation {
  0% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.25);
  }

  100% {
    transform: translateX(-50%) scale(1);
  }
}
/*Timeline End*/

/* Home Page */
.section {
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sect6 {
  min-height: 70vh;
  margin-top: 25vh;
}

.sect1 {
  min-height: 15vh;
  align-items: normal;
  margin-top: 10vh;
}

.sect2{
  background: linear-gradient(180deg, #9AAADF 10%, white 70%);
}

.sect3{
  background: white;
  padding-top: 5vh;
}

.sect4{
  background: linear-gradient(180deg, white 10%, #FAFBFE 80%);
}

.sect7{
  background: linear-gradient(180deg, #FAFBFE 10%, #F2F4FC 80%);
  min-height: 80vh;
}

.sect5{
  background: linear-gradient(180deg, #F2F4FC 10%, #9AAADF 80%);
  min-height: 70vh;
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
  text-align: center;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

.land-left{
  position: relative;
  transform: translateX(-150px);
  opacity: 0;
  transition: 1s all ease;
  float: left;
  margin-left: 5%;
  width: 60%;
}

.land-left.active{
  transform: translateX(0);
  opacity: 1;
}

.land-right{
  position: relative;
  transform: translateX(150px);
  opacity: 0;
  transition: 1s all ease;
  float: right;
  margin-right: 5%;
  margin-top: -5vh;
}

.land-right.active{
  transform: translateX(0);
  opacity: 1;
}