body {
  padding-top: 0;
  font-family: "Montserrat";
  background-color: black;
}
.left-aligned {
  margin-left: auto;
}
.bg-light {
  background-color: white;
}
.bg-transparent {
  background-color: transparent;
  padding-top: 0;
}
.bg-dark {
  background-color: black !important;
}
.bg-hero {
  background-color: #20b476;
}
.bg-team {
  background-image: url("https://static.igem.wiki/teams/4317/wiki/group-4.png");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-proof {
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-sdg {
  background-image: url("https://static.igem.wiki/teams/4317/wiki/sdgback.jpg");
  background-size: cover;
  height: 100vh;
  width: 100vw;
  
}
.bg-ent {
  background-image: url("https://static.igem.wiki/teams/4317/wiki/entback1.png");
  background-size: cover;
  height: 100vh;
  width: 100vw;
  
}
.bg-improve {
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
  
}
.bg-coll{
  background-image: url("https://static.igem.wiki/teams/4317/wiki/coll11.png");
  background-size: cover;
  height: 100vh;
  width: 100vw;
  
}
.bg-att {
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
  
}
.bg-ex {
  background-image: url("https://static.igem.wiki/teams/4317/wiki/ex1.png");
  background-size: cover;
  height: 100vh;
  width: 100vw;
  
}
.bg-human {
  background-image: url("https://static.igem.wiki/teams/4317/wiki/hp-background.jpg");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

.bg-commun{
  background-image: url("https://static.igem.wiki/teams/4317/wiki/comback1.png");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-part{
  background-image: url("https://static.igem.wiki/teams/4317/wiki/part10.png");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-hard{
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-model{
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-safe{
  background-image: url("https://static.igem.wiki/teams/4317/wiki/safe8.png");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-edu{
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-inclu{
  background-image: url("https://static.igem.wiki/teams/4317/wiki/incluback.png");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-imp{
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-eng{
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-con{
  background-image: url("");
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-description{
  background-image: url(https://static.igem.wiki/teams/4317/wiki/desback.png);
  background-size: cover;
  height: 100vh;
  width: 100vw;
}
.bg-black {
  background-color: black;
}
.navbar-brand {
  font-weight: 600;
  margin-left: 4px;
  font-size: 24px;
}
.team-container {
  display: grid;
  grid-template-columns: auto;
}
@media screen and (max-width: 768px) {
  .team-container {
    display: grid;
    grid-template-columns: auto;
  }
}
/* CALLOUT */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
}
.bd-callout h4 {
  margin-bottom: 0.25rem;
}
.bd-callout p:last-child {
  margin-bottom: 0;
}
.bd-callout code {
  border-radius: 0.25rem;
}
.bd-callout + .bd-callout {
  margin-top: -0.25rem;
}
.bd-callout-info {
  border-left-color: #5bc0de;
}
.bd-callout-warning {
  border-left-color: #f0ad4e;
}
.bd-callout-danger {
  border-left-color: #d9534f;
}

/* footer */
footer a {
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

.footer {
  margin-top: 0 !important;
  padding-top: 30px !important;
  color: white;
}
.footer-images {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer-images img {
  height: 70px;
  margin: 0 10px;
  object-fit: contain;
  margin: 10px 0;
}
.nav-container {
  flex-direction: row;
  width: fit-content;
  margin-right: inherit;
  padding-right: 0;
}
/* CUSTOMIZED BELOW */
.navbar-toggler {
  margin-left: -60px;
  width: fit-content;
  top: 0px;
  right: 35vw;
  position: sticky;
  border: 6px solid rgb(126, 217, 87) !important;
  padding: 14px;
  border-radius: 50%;
}
/* change hamburger menu icon color */

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(116,177, 87)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.dropbtn {
  /* background-color: #04AA6d; */
  background-color: white; /* needs to be same as .bg-dark */
  color: black;
  padding: 8px;
  font-size: 18px;
  border: none;
}

/* container <div> needed to position the dropdown content */
.dropdown {
  display: inline-block;
  text-align: center;
  position: relative;
}

.dropdown-content {
  display: none;
  position: static;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgb(0, 0, 0, 0.2);
  /* z-index: 1; */
}

.dropdown-content a {
  color: black;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
}

/* change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: white;
  color: black;
}

/* show dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  background-color: white;
  color: black;
}

/* change background color of dropdown button when dropdown is shown */
.dropdown:hover .dropbtn {
  background-color: white;
  color: black;
}

/* do media stuff - support phone */

.dropdown-content {
  position: static;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.vjs-control-bar {
  display: none !important;
  visibility: hidden !important;
}
.vjs-control-bar::after {
  display: none !important;
  visibility: hidden !important;
}
.vjs-control-bar:hover {
  display: none !important;
  visibility: hidden !important;
}
.vjs-has-started.vjs-playing .vjs-control-bar {
  visibility: hidden !important;
}
.bg-home {
  height: fit-content;
}
.display-4 {
  font-weight: 700;
}
.team-page {
  background-color: lightblue;
}
.con-page {
  background-color: lightcoral
}
.improve-page {
  background-color: lightgrey;
}
.practices-container {
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 30px !important;
  margin: auto;

}
.practices-page {
  background-color: lightsalmon;

}
.proof-page {
  background-color: lightsalmon;

}
.ent-page {
  background-color:  lightgreen;
}
.communication-page {
  background-color: lightgreen;
}
.coll-page {
  background-color: lightcyan;
}
.att-page {
  background-color: lightyellow;
}
.eng-page {
  background-color: lightskyblue;
}
.hard-page {
  background-color: lightpink;
}
.model-page {
  background-color: lightgoldenrodyellow;
}
.edu-page {
  background-color: lightgoldenrodyellow;
}
.ex-page {
  background-color: lightslategray;
}
.inclu-page{
  background-color: lightgray;
}
.sdg-page{
  background-color: lightcoral;
}
.part-page{
  background-color: lightseagreen;
}
.description-page {
  background-color: lightyellow;
}
.imp-page {
background-color: lightsteelblue;
}
.safe-page {
  background-color: lightcyan;
  }
.human-practices-images {
  display: grid;
  grid-template-columns: auto auto;
}
.human-practices-images img {
  width: 30vw;
}
.navbar-collapse {
  background-color: white;
  width: 300px;
  height: 100vh;
  position: relative;
  bottom: 74px;
  transition: all 0.1s ease-in;
}
.navbar-nav {
  width: 300px;
  padding-top: 28px;
  justify-content: center;
}
.hamburger {
  position: relative;
  top: 30px;
  right: 20px;
}
.human-practices-images img {
  width: 100%;
}
#spinner {
  animation: spin 3s linear infinite;
  color: rgb(126, 217, 87);
  width: fit-content;
  margin: auto;
  height: fit-content;
  padding: 0;
}
.spinner-container {
  /* height: 100vh; */
  position: absolute;
  /* top: 50%; */
  bottom: 35%;
  left: 0;
  right: 0;
}
@keyframes spin {
  /* 100% {
    transform: rotate(360deg);
  } */
}
.loader-video {
  height: 400px;
  width: 400px;
  overflow: hidden;
}
.loader-container {
  object-fit: contain;

  width: 500px;
  overflow: hidden;
}
.loader-para {
  text-align: center;
  font-size: 22px;
  color: white;
  margin: auto;
  visibility: visible;
}
figcaption {
  text-align: center;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}