body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #f2d2a9 !important; }
.bg-hero {background-color: white;}

/* background-color: #459cb0 */

/* 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 */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

.head {
  display: flex;
  margin-top: 10vh;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  font-size: 8vw;
  margin-bottom: 7.5vh;
}

.overlines{
  height: 2.5vh !important;
  opacity: 1;
  background-color: #44cae5;
  border: none;
  margin-bottom: -1vh;
}
.underlines{
  height: 2.5vh !important;
  opacity: 1;
  background-color: #44cae5;
  border: none;
  margin-top: -1vh;
}
 
.title {
  background-image: url(https://static.igem.wiki/teams/4728/wiki/water-background.png);
  background-repeat: repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 7.5vw;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Steelfish Rg', 'helvetica neue',
           helvetica, arial, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  line-height: 1.15em;
}

.title2 {
  font-size: 2em;
  letter-spacing: 1px;
  font-family: 'catamaran', sans-serif;
}

.transparent{
  mix-blend-mode: multiply;
}

.img1{
  margin-right: 5vw;
  margin-bottom: 5%;
  height: auto;
  width: 15vw;
}

.img_large{
  width: 100%;
  height: auto;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 50px;
  margin-bottom: 50px;
}


.photo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 25px;
}

.photo {
  margin-bottom: 15px;
  margin-right: 15px;
  box-sizing: border-box;
}

.photo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.size_1{
  max-width: 500px;
  height: auto;
}

.size_2{
  max-width: 400px;
  height: auto;
}

.size_3{
  width: auto;
  height: 250px!important;
}

.size_4{
  width: auto;
  height: 350px!important;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.image {
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.figure-container {
  text-align: center;
}

.figure-caption {
  font-size: 10px;
}

ul{
  margin-left: 1%;
}

.button-container {
  text-align: left;
}
.button {
  display: inline-block;
  margin: 5px;
  margin-left: 0px;
  padding: 10px 20px;
  background-color: #47acec;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}