html{
  font-family:'Verdana';
  font-size: 18px;
  text-align: justify;
  hyphens: auto;
  color: #01161E;
  line-height: 1.6;
  }
  h1  {
      font-family: 'Verdana';
      font-size: 30px;
      }
  h2  {
      font-family: 'Verdana';
      font-size: 28px;
      }
  h3  {
      font-family: 'Verdana';
      font-size: 26px;
      }


    main {
  border-width: 0 4px;
  max-width: 1200px;
  /* margin: 0em 5em 0em 14em;*/
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0em;
  padding: .6em 1em .4em 1em;
}

.link{
font-family:'Verdana';
font-size: 18px;
}

.link-fig{
font-family:'Verdana';
font-size: 13px;
color: #526D82;;
}

.link:hover{
font-family:'Verdana';
font-size: 18px;
color: #526D82;;
}

.link-fig:hover{
font-family:'Verdana';
font-size: 13px;
color: #526D82;;
}

.link-w{
font-family:'Verdana';
font-size: 18px;
color: #fff;
}

.link-w:hover{
font-family:'Verdana';
font-size: 18px;
color: #000000;
}

.link-par{
font-family:'Verdana';
font-size: 18px;
}

.link-par:hover{
font-family:'Verdana';
font-size: 18px;
color: #fff;
}
/*header papereffect*/
.sp_header{
  height: 30vh;
  background-image: url('https://static.igem.wiki/teams/4604/wiki/bannerkomp.png');
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 5em;
}

.sp_header_txt{
  width: 100%;
  position: absolute;
  top: 15vh;
  text-align: center;
  z-index: 1;
  margin-top: 5em;
}

.logo{
    min-width: 200px;
    max-height: 0.5;
    max-width: 25%;
    /* margin: 10px 60px 10px 30px;*/
    margin: 14px;
}
/*Responsive*/
.icons img{
  width: 30px;
  height: 30px;
}
  

#check {
  display: none;
}
.icons{
  position: absolute;
  right: 5%;
  font-size: 2.8rem;
  color: #fff;
  cursor: pointer;
  display: none;
}

@media (max-width: 1410px) {
  .icons{
      display: inline-flex;
  }

  #check:checked~.icons #menu-icon{
      display: none;
  }
  .icons #close-icon{
      display: none;
  }

  #check:checked~.icons #close-icon{
      display: block;
  }
  .navbar{
      position: absolute;
      top:100%;
      left:0;
      height: 0;
      width: 100%;
      background: #ebf1f5;
      backdrop-filter: blur(50px);
      overflow: hidden;
      transition: .3s ease;
      
  }

  .nav_links {
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  #check:checked~.navbar{
      height: 20em;
  }
  .navbar a{
      display: block;
      font-size: 1.6em;
      text-align: center;
      transform: translateY(-50px);
      opacity: 0;
      transition: .3s ease;
  }
  #check:checked~.navbar a{
      transform: translateY(0);
      opacity: 1;
      transition-delay: calc(.15s * var(--i));
  }
  .dropdown-content{
    width: 20px;
  }
  .dropdown-content a{
    font-size: 12px
  }
}



/*Header and navbar layout*/
header{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: #EBF1F5;
  display: flex;
  justify-content: space-between;
  align-items: center;  
}

li, a, button{
  font-family: 'Verdana';
  font-weight: 500;
  font-size: 16px;
  color: #01161E;
  text-decoration: none;
}

ul {
  list-style: none;
}

.nav_links{
  display: flex;
}

.nav_links li {
  padding: 0px 20px;
}

.nav_links li a {
  transition: all 0.3s ease 0s;
}

.nav_links li a:hover {
  color: #526D82;
}

button{
  padding: 9px 25px;
  background-color: #9DB2BF; 
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

button:hover {
  background-color: #526D82;
}

/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}

.pic_con {
    width: 50%; 
    justify-content: center;
}

/* Dropdown button */
.dropdown .dropbtn {
  padding: 9px 25px;
  background-color: #9DB2BF;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #526D82;
border-radius: 50px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #9DB2BF;
min-width: 160px;
z-index: 1;
}


.dropdown-content a {
float: none;
color: #01161E;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #D9D9D9;
border-bottom-left-radius: 8%; 
border-bottom-right-radius: 8%;
border-top-left-radius: 8%;
border-top-right-radius: 8%;
  
}

.dropdown:hover .dropdown-content {
display: block;
border-bottom-left-radius: 5%; 
border-bottom-right-radius: 5%;
border-top-left-radius: 5%;
border-top-right-radius: 5%;
}


/* text left and right */
.left{
  text-align: left;
}
.right{
  text-align: end;
}
.center{
  text-align: center;
}

/* standard image layout*/
.my-image{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  justify-content: center; 
  align-items: center;
  object-fit:cover;
  object-position: 40% 40%;
  display: block;
}

/*figure caption for all images*/
figcaption{
  font-size: 13px;
  padding-top: 12px;
  align-items: center;
}

/*education page layout*/
.ed-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.ed-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}

.education-image{
height: auto;
width: 55%;
border: 10px solid #9DB2BF;
border-radius: 15px;
margin-left: 22.5%;
}


/*Design page layout*/
.design-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.design-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}

/*Modeling Page layout*/
.model-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.model-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}
.model-middle{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
.model-justify{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: justify;
}
/*Safety layout*/
.safe-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.safe-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}
 
  
.safety-image {     
  width: 100%;     
  height: auto;     
  border-radius: 10px; 
  border: 10px solid #9DB2BF; 
  margin-left: 90%;
  margin-top: 5%;
  
  }  

.safety-img-position {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* CSS for the Hp-Layout */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%; /* Anpassen Sie die maximale Breite nach Bedarf */
  padding: 1em;
  border: 0;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);

  & > * {
    margin: 0 0 0.5rem 0;
  }
}
.hp-quote{
  background-color: #526D82;
  color: #ffffff;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 20px;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #01161E;
}

.hp-ul-list li{
  list-style: circle;
  color: #fff
}

.hp-line{
  border-bottom: 2px solid #ccc;
  text-align: center
}


.modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.hp-dropdown {
  margin-bottom: 10px;
  width: 100%;
  border-radius: 25em;
  background-color: #526D82;
  opacity: 50%;
  
}
.hp-dropdown:hover {
  margin-bottom: 10px;
  width: 100%;
  border-radius: 25em;
  background-color: #526D82;
  opacity: 100%;
  
}
.hp-pp{
  display: block;
  width: 100%;
  height: 55%;
  margin: 0 auto 30px;
  border-radius: 10%;
  background-color: #ffffff50;
  object-fit: cover;
  border: 1px solid #fff;
}
.hidden-hp-1{
  opacity: 0;
  filter: blur(5px);
  transition: all 1s;
}
.hidden-hp-2{
  opacity: 0;
  filter: blur(5px);
  transition: all 1s;
}
.show-hp{
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
  }

  .li-re1:nth-child(1) {
    transition-delay: 200ms ;
  
  }
  .li-re2:nth-child(2) {
    transition-delay: 400ms ;
    
  }

  .re-li2:nth-child(1) {
    transition-delay: 200ms ;
  
  }

  .re-li1:nth-child(1) {
    transition-delay: 200ms ;
  
  }
.hp-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px 10px; 
  margin-top: 80px;
  margin-left: 50px;
  margin-bottom: 50px;
  margin-right: 20px
}

.hp-container2:nth-child(even) {
  grid-gap:  200px; 
}

.hp-box-small {
  width: 320px;
  height: 380px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: #9DB2BF;
  margin-top: 70px;
  margin-left: 75px;
  margin-right: 75px;
  overflow-y: auto;
  color: #fff;
  text-align: justify;

}

.hp-box-big {
  width: 450px;
  height: 500px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: #9DB2BF;
  overflow-y: auto;
  color: #fff;
 
  text-align: justify;

}

.hp-date {
  font-weight: bold;
  text-align: center;
}


.more-info {
  display: none;
  margin-top: 10px;
}




.dropdown-references {
          margin: 10px 0px 10px 0px;
          width: 100%;
          border-radius: 25em;
          background-color: #9DB2BF;
         
      }
      
.more-info {
        max-width: 100%; 
        display: none;
          box-sizing: border-box;
          background: #EBF1F5;
          border-radius: 1em;
          margin: 0px 15px 15px 15px;
          padding: 15px 20px 15px 20px;

      }

.box_container {
display: flex;
flex-direction: row;
justify-content: space-between;
   
}

.card1{
    box-sizing: border-box;
  background: #9DB2BF;
  opacity: 50%;
  border-radius: 1em;
  font-size: 14px;
}

.card2{
    box-sizing: border-box;
  background: #9DB2BF;
  opacity: 50%;
  border-radius: 1em;
  font-size: 14px;
}


.item {
  background-color: #9DB2BF;
  margin-left: 15em;
  padding: 1.25em;
  text-align: left;
  border-radius: 25%;
  }



/*eng. cycle slider*/
 .slider-container {
          position: relative;
          width: 100%; 
          overflow: hidden;
          margin-bottom: 30px;
      }

      .slider{
          display: flex;
          transition: transform 0.3s ease-in-out;
      }

     
      .slide{
          flex: 0 0 100%;
          max-width: 100%;
          display: none; 
          }

       .engcycle{
        width: 39.5%;
        height: auto;
        margin-left: 30.25%;
        }

  
      .slider-button {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          font-size: 24px;
          background: rgba(255, 255, 255, 0.5);
          padding: 5px 10px;
          border: none;
          border-radius: 5px;
          outline: none;
      }

      .prev-button {
          left: 10px;
      }

      .next-button {
          right: 10px;
      }

/*parts layout*/
.table{
  border-collapse: collapse;
  width: 100%;
  align-items: center;
}

.table td, .table th {
  border: 1px solid #01161E;
  padding: 8px;
}

.table tr:nth-child{background-color: #526D82;}


.table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  color: #01161E;
}

  
.grid-results {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  grid-gap: 10px; 
}

.grid-results-item {
  padding: 10px;
  max-width: 100%;
}
/*Contribution layout*/
.con-item-puzzle{
    background-color: #9DB2BF;
    align-items: center;
    padding: 15px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    width: 50%;
    height: 450px;
    margin-top:3%;
    margin-left:25%;
}


.con-pp {
  display: block;
  width: 100%;
  height: 380px;
  margin: 0 auto 30px;
  border-radius: 10%;
  object-fit: cover;
  }
.con-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.con-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}
.con-item {
  background-color: #9DB2BF;
  align-items: center;
  padding: 15px;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  }

/*plasmids and cloning page*/
.pl-box{
  margin-bottom: 50px;
}
.pl-left{
  overflow-wrap: anywhere;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.pl-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}
.pl-item-blue {
  display: flex;     
  justify-content: center;     
  align-items: center; 
  background-color: #FFF;
  border: 3px solid #9DB2BF;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  height: 470px;
  width: 50%;
  margin-left: 25%;
  margin-top: 20px;
  margin-bottom: 20px;
  }
.pl-item-dark {
  display: flex;     
  justify-content: center;     
  align-items: center; 
  background-color: #FFF;
  border: 3px solid #526D82;
  align-items: center;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  height: 470px;
  width: 50%;
  margin-left: 25%;
  margin-top: 20px;
  margin-bottom: 20px;
  }
  .pl-item-green {
  display: flex;     
  justify-content: center;     
  align-items: center; 
  background-color: #FFF;
  border: 3px solid #9EB384;
  align-items: center;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  height: 470px;
  width: 50%;
  margin-left: 25%;
  margin-top: 20px;
  margin-bottom: 20px;
  }
.plasmids-img{
  width: 95%;
   margin-right: auto;
  margin-top: -10%
} 
.pl-img-position {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes rotateImage {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.rotate {
  animation: rotateImage 5s linear infinite; 
}
/*Projec description layout*/

.des-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.des-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}
.des-center{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}


.des-ul-list li{
 list-style: circle;
  list-style: circle;
  font-weight: bold;
  font-size: 18px;
  color:  #526D82;
  margin-bottom: 20px;
  margin-top: 30px;
}

.des-list li{
  list-style-type: decimal;
   font-size: 18px;
}



/*Project description flipcards*/
.carddes1 {
--level-one: translateZ(3rem);
--level-two: translateZ(6rem);
--level-three: translateZ(9rem);


--clr: #526D82;
}

.carddes2 {
--level-one: translateZ(3rem);
--level-two: translateZ(6rem);
--level-three: translateZ(9rem);


--clr:  #9DB2BF;
}

.carddes3 {
--level-one: translateZ(3rem);
--level-two: translateZ(6rem);
--level-three: translateZ(9rem);


--clr: #9EB384;
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}

.card__contentdes {
width: 100%;
height: 100%;
}

.pp1des {
display: block;
width: 240px;
height: 240px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: #ffffff50;
object-fit: cover;
}

.pp2des {
display: block;
width: 128px;
height: 128px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: #ffffff50;
object-fit: cover;
}


.carddes {
width: 380px;
margin: 0 10px;


}

.card__contdes {
text-align: center;
position: relative;
padding: 15em 5em;
transition: transform 3s;
transform-style: preserve-3d;
border-radius: 16px;
}

.carddes:hover .card__contdes {
transform: rotateY(.5turn);
}



.card__frontdes,
.card__backdespro,
.card__backdesrib,
.card__backdestox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 5em 3em;
backface-visibility: hidden;
transform-style: preserve-3d;
display: grid;
align-content: center;
border-radius: 16px;
}


.card__frontdes {
background-color: var(--clr);
background-size: cover;
background-blend-mode: overlay;
color: #01161E;
}

.card__frontdes::before {
content: '';
position: absolute;
--spacer: 1em;
top: var(--spacer);
bottom: var(--spacer);
left: var(--spacer);
right: var(--spacer);
border: 3px solid currentColor;
transform: var(--level-one);
}

.card__titledes {
font-size: 3.5rem;
transform: var(--level-three);
order: 2;
text-transform: uppercase;
}

.card__subtitledes {
transform: var(--level-two);
text-transform: uppercase;
letter-spacing: 4px;
font-weight: var(--fw-bold);
opacity: .7;
}

.card__bodydes {
transform: var(--level-two);
font-weight: var(--fw-normal);
color:#01161E;
font-size: 18px;
line-height: 1.6;
}


.card__backdespro {
transform: rotateY(.5turn);
color: var(--clr);
background:  #526D82;
}

.card__backdesrib {
transform: rotateY(.5turn);
color: var(--clr);
background: #9DB2BF;
}

.card__backdestox {
transform: rotateY(.5turn);
color: var(--clr);
background: #9EB384;
}

.pd-grid-container {
  display: flex;
  margin: 15px 5px 15px 5px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

}

@media (max-width: 768px){
    .pd-grid-container {
      flex-direction: column;
      gap: 3em;
    }
}

@media (max-width: 1130px){
    .pd-grid-container {
      flex-direction: column;
      gap: 3em;
    }
}

@media (min-width: 769px) and (max-width: 1024px)){
    .pd-grid-container {
      flex-direction: column;
      gap: 3em;
    }
}
    
.grid-item {
padding: 20px;
text-align: justify;
}

.hidden_card{
opacity: 0;
transition: all 2s;
}

.show_card{
opacity: 1;
}



/*Parallax and Home Page*/

:root{
  --index: calc(1vw + 1vh);
  --text: #000000;

}

@font-face {
  font-family:'Verdana';
  
}

@font-face {
  font-family:'Verdana';
  font-weight: 900;
}


.parallax-header{
position: relative;
}

.parallax-header::after{
  content: '';
  position: absolute;
  z-index: 100;
  width: 100%;
  height: calc(var(--index)*100);
  background-image: url(transition.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  bottom: calc(var(--index)*-35);
  
}

.layers{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.layer {
  height: 100%;
  width: 100%;
  position: absolute;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 2;
}


.layer_parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}



#home-content{
margin-top: 100px;
}



.home-main-article2{
margin-top: 30px;
background-size: cover;
background-position: center;
color: var(--text);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}



.home-colorcard1 {
--primary: #526D82;
--secondary: #485f71;
--dark: #212121;
--light: #F3F3F3;
}

.home-colorcard2 {
--primary: #9DB2BF;
--secondary: #889aa4;
--dark: #212121;
--light: #F3F3F3;
}

.home-colorcard3 {
--primary:  #9EB384;
--secondary:#8c9e75;
--dark: #212121;
--light: #F3F3F3;
}
.home-card1:hover{
  --primary: #2c3d48;
--secondary: #394c59;
--dark: #212121;
--light: #F3F3F3;
}
.home-card2:hover{
--primary: #626f78;
--secondary: #717f87;
--dark: #212121;
--light: #F3F3F3;
}

.home-card3:hover{
--primary:  #5c694d;
--secondary:#8ea077;
--dark: #212121;
--light: #F3F3F3;
}



.home-card {
width: 25em;
height: 25em;
perspective: 1em;
}


.home-card__face {
position: absolute;
width: 100%;
height:100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}

.home-card__face--front {
background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
}

.home-card__face--front h2 {
color: #FFF;
font-size: 52px;
}

.home-pp1 {
display: block;
width: 240px;
height: 240px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: #ffffff50;
object-fit: cover;
}

.home-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr));
gap: 5px; 
 }

.home-grid-item {
padding: 20px;
text-align: center;
}

.home-flips{
  display: flex;
  margin: 5% 5% 5% 5%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
}
@media (max-width: 768px) {
.home-flips {
  flex-direction: column;
}
}
.comic{
max-width: 70%;
height: auto;
border: 1.5px solid black;
}


/* Home der große Kasten */

.home-center-big{
display: flex;
justify-content: center; /* Horizontal zentrieren */
align-items: center; /* Vertikal zentrieren */
height: 100vh; /* Vertikal zentrieren */
}

.home-card-big{
  width: 1280px;
  height: 600px;
  perspective: 1000px;
}

.home-colorcard-big {
  --primary:  #526D82;
  --secondary:#9DB2BF;
  --dark: #212121;
  --light: #F3F3F3;
  }


  .home-abstract-borderbox {
      max-height: 100%;
      max-width: 100%;
      overflow: auto; 
      position: relative;
    }

.home-container-box {
  height: 100%;
  overflow: auto; 
}
.home-container-box::-webkit-scrollbar {
  width: 12px;
}

.home-card-big__face {
  position: absolute;
  width: 100%;
  height:100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
  }
.home-card-big__face--front {
  background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  }

.home-abstract-borderbox{
    box-sizing: border-box;
    align-items: center;
    }

.home-abstract-col,
.home-container-box {
      border:1px  #000000;
      text-align: justify;
      margin: 10px;
      margin-bottom: 10px;
    }
.home-abstract-row1 {
      display:flex;
      margin-right: 20px;
    }
  
.home-abstract-row2 {
      display:flex;
      margin-right: 20px;
      margin-left: 20px;
    }
.home-abstract-col {
      flex:1;
      
    } 

.home-h2-abstract{
      line-height: 52px; 
      text-align: center;
      border-bottom: 1px solid #ccc;
      color: #FFF;
      font-size: 52px;
    }
.home-h3-abstract{
      text-align: center;
      border-bottom: 3px solid #ccc;
      color: #FFF;
      font-size: 20px;
}


.home-text-abstract{
      color: #FFF;
      font-size: 20px;
    }
  .home-pp1-big {
      display: block;
      width: 700px;
      height: 300px;
      border-radius: 16px;
      background-color: #ffffff50;
      object-fit: cover;
      }
    @media (max-width: 1150px) {
      .home-card-big{
        width: 60%; 
      }
     
      .home-container-box {
        display: flex;
        flex-direction: column;
      }
      .home-abstract-row1 { 
        flex-direction: column;
      }
      .home-abstract-row2 { 
        flex-direction: column;
        margin-left: 3px;
      }
      .home-abstract-col {
        width: calc(100% - 20px); 
    
      }
     
    .home-abstract-col video {
    width: 100%; 
    }
    .home-abstract-col .home-h2-abstract {
    text-align: left;
    margin: 10px 0; 
    }
  }


 /*Footer*/


footer {
  min-height: 200px;
  width: 100%;
  color: #01161E;
  background-color: #9DB2BF;
  padding: 50px;
  text-align: center;
}
.footer-about {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 2px solid #fff;
}
.footer-about h3 {
  font-size: 28px;
  letter-spacing: 2px;
  font-weight: 600;
}
.footer-about p {
  max-width: 1600px;
  color: #01161E;
}
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 20px;
}
.social-links a {
  transition: all 0.3s ease-in-out;
}
.social-links a:hover {
  transform: translateY(-7px);
}
.social-links img {
  width: 35px;
  height: 35px;
}
.footer-contact {
  display: flex;
  justify-content: space-around;
}

.footer-contact-box p {
  font-size: 1em;
  line-height: 1.6;
  color: #01161E;
}
.footer-copyright {
  margin-top: 50px;
  color: #01161E;
}


#my-footer {
min-height: 45vh; 
display: grid;
place-items: center;
margin: 0;
width: 100%;

}

.slider-footer {
height: 250px;
width: 90%;
overflow: hidden;
position: relative;
}

.slider-track {
display: flex;
width: calc(250px * 36); 
animation: scroll 40s linear infinite;
}

@keyframes scroll {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(calc(-250px * 18));
}
}

.slide-footer {
height: 200px;
width: 250px;
display: flex;
align-items: center;
padding: 15px;
perspective: 100px;
transition: transform 0.3s ease, z-index 0s 0.3s; 
position: relative; 
z-index: 1; 
overflow: hidden; 
}

#slide-picture {
width: 100%;
height: auto;
transition: transform 0.3s ease; 
}
#slide-picture2 {
width: 80%;
height: auto;
transition: transform 0.3s ease; 
}

.slide-footer:hover {
transform: scale(1.1); 
z-index: 2; 
}


.slider-footer::before,
.slider-footer::after {
background: linear-gradient(to right, #9DB2BF 10%, rgba(255, 255, 255, 0) 100%);
content: '';
height: 100%;
position: absolute;
width: 15%;
z-index: 2;
}

.slider-footer::before {
left: 0;
top: 0;
}

.slider-footer::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}

/* sidebar */
.sidebar-wrapper {
    display: flex;
}

.sidebar {
    flex: 0 0 25%;
    background: #ebf1f5;
    border: 2px solid #9DB2BF;
    padding: 30px 0px;
    margin-right: 20px;
    position: sticky;
    top: 30%;
    left: 20px;
    border-radius: 25px;
    overflow-y: auto;
    margin-top: 70px;
    height: calc(100% - 20%);
}

.sidebar h1 {
    text-align: justify;
    margin-bottom: 30px;
}

.sidebar ul li {
    padding: 10px;
    list-style: none;
    font-weight: bold;
}

.sidebar ul li a {
    color: #01161E;
    display: block;
    font-weight: bold;
    text-align: left;
}
.sidebar ul li:hover {
    text-decoration: underline;
    
    
}

.sidebar ul li:hover a {
    color: #01161E;
}

.sidebar ul li:last-child {
    border-bottom: none;
}

.sidebar-main-content {
    padding: 20px;
    color: #01161E;
    border-width: 0 4px;
    border-left: solid;
    border-right: solid;
  border-image-source: linear-gradient(to bottom, #9EB384, #9DB2BF, #526D82);
  border-image-slice: 1;
    z-index: 1;
}

.sidebar-info {
    scroll-behavior: smooth;
}

.sidebar-main-content {
    flex: 0 0 75%;
    padding: 20px;
}

/*Making Sidebar responsive*/

@media only screen and (max-width: 768px) {
  

  .sidebar {
    display: none;
  }

  .sidebar-main-content {
    flex: 1; 
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    flex: 0 0 20%;
  }

  .sidebar-main-content {
    flex: 0 0 80%; 
  }
}

@media only screen and (min-width: 1025px) {
  .sidebar {
    flex: 0 0 25%; 
  }

  .sidebar-main-content {
    flex: 0 0 75%; 
  }
}


/*Header and nav*/
#sticky-header {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
transition: top 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

#bottom {
text-align: center; 
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 30px; 
background: #f9f9f9;
color: #494949;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 6px; 
padding: 1em 0; 
margin: 0;
}

/*Team Page*/

.amelie:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/amelied-wiki.png');
}
.anna:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/anna.png');
}
.benjamin:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/benjamind-wiki.png');
}
.hannah:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/hannahd-wiki.png');
}
.jonathan:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/jonathand-wiki.png');
}
.kevin:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/kevind-wiki.png');
}
.konstantin:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/konstantind-wiki.png');
}
.melita:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/melitad-wiki.png');
}
.amelie:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/amelied-wiki.png');
}
.miriam:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/mirid-wiki.png');
}
.yara:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/yarad-wiki.png');
}
.nicole:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/nicoled-wiki.png');
}
.anne:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/anned-wiki.png');
}
.andi:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/andid-wiki.png');
}
.leon:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/leond-wiki.png');
}
.michi:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/michid-wiki.png');
}
.nikita:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/nikitad-wiki.png');
}
.Jeremy:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/jeremyd-wiki.png');
}
.jonas:hover .pp1-team {
  content: url('https://static.igem.wiki/teams/4604/wiki/team/jonasd-wiki.png');
}
.group-picture{
  height: 30vh;
  background-image: url('https://static.igem.wiki/teams/4604/wiki/team/img-0656.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 10em;
}
:root {
--primary: #9DB2BF;
--secondary: #526D82;
--dark: #01161E;
--light: #F3F3F3;
}
.team-dropdown {
  margin-bottom: 10px;
  width: 250px;
  border-radius: 25em;
  background-color: #526D82;
  opacity: 50%;
  
}

.team-dropdown:hover {
  margin-bottom: 10px;
  width: 250px;
  border-radius: 25em;
  background-color: #526D82;
  opacity: 100%;
  
}
.team-card {
width: 250px;
height: 250px;
perspective: 1000px;
position: relative;
transform-style: preserve-3d;
}
.card__inner-team {
width: 100%;
height: 100%;
transform-style: preserve-3d;
cursor: pointer;
perspective: 1000px;
transition: transform 1s;
}

/*.card__inner-team.is-flipped {
transform: rotateY(180deg) scale(1.7);
position: absolute;
}
*/ /*removed flipping effect*/


.card__face-team {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);

}

.card__face--front-team {
background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}

.card__face--front-team {

font-size: 52px;
z-index: 1;
}

.card__face--front-team::before {
content: '';
position: absolute;
--spacer: 1;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
border: 2px solid #01161E;
transform: var(--level-one);
border-radius: 16px;
}

.card__face--back-team {
background-color: #9DB2BF;
display: flex;
transform: rotateY(180deg);
z-index: 2;
height: 280px; 
width: 200px;

}

.card__content-team {
width: 100%;
height: 100%;
}

.pp1-team {
display: block;
width: 230px;
height: 230px;
margin: 0 auto 30px;
margin-top: 10px;
object-fit: cover;
border-radius: 16px;
}


.card__body-team {
padding: 20px;
}

.card__body-team {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}


.card__body-team p {
font-size: 11px;
line-height: 1.3;
justify-content: center;
padding-top: 25%;
text-align: center;

}


.card__face--front-team:hover {
transform: scale(1.2); 
transition: transform 0.3s ease; 
}

.grid-container-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: repeat(1, 1fr); 
  justify-content: center;
  flex-wrap: wrap;
  margin: 10%;
  }

  .grid-container-team-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(1, 1fr); 
    justify-content: center;
    flex-wrap: wrap;
    margin: 10%;
    }

.grid-item-team {
flex: 1;
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%; 
object-fit: cover;
overflow: visible;
text-align: justify;
}



.text-inbetween-team{
align-items: center;
   text-align: justify;
  
}

.column-layout {
flex-direction: column;
}

@media screen and (max-width: 768px) {
.grid-container-team {
  flex-direction: column;
}
    .card__face--back-team {
  flex-direction: column;
}
    
       @media (max-width: 1150px) {
      .grid-container-team {
        width: 60%; 
      }
     
      .grid-container-team {
        display: flex;
        flex-direction: column;
      }

          .grid-container-team-2 {
        width: 60%; 
      }
     
      .grid-container-team-2 {
        display: flex;
        flex-direction: column;
      }
      .grid-item-team { 
        flex-direction: column;
      }
      .text-inbetween-team{
        flex-direction: column;
        margin-left: 3px;
      }
    
    
      }

.grid-item-team {
  width: 100%;
}
}

/*layout on all results pages */
.key-finding{
    width: 100%;
  height: auto;
  justify-content: center; 
  align-items: center;
  object-fit:cover;
  object-position: 40% 40%;
  display: block;
}

.my-image-results{
  width: 100%;
  height: auto;
  justify-content: center; 
  align-items: center;
  object-fit:cover;
  object-position: 40% 40%;
  display: block;
}
/*Toxin results Page*/

.tox-workflow{
    width: 100%;
  height: auto;
  justify-content: center; 
  align-items: center;
  object-fit:cover;
  object-position: 40% 40%;
  display: block;
}

.tox-item {
  width: 100%;
  background-color: #9EB384;
  justify-content: center; 
  align-items: center;
  padding: 15px;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #01161E;
  margin-top: 3%;
  }

.tox-setup1{
    width: 100%;
    height: auto;
    justify-content: center; 
    align-items: center;
    object-fit:cover;
    object-position: 40% 40%;
    display: block;
    }

.tox-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.tox-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}

/*b12 Production layout*/

.b12-item {
  background-color: #526D82;
  justify-content: center; 
  align-items: center;
  padding: 15px;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #01161E;
  margin-top: 3%;
  }

.b12-setup1{
    width: 80%;
    height: auto;
    justify-content: center; 
    align-items: center;
    object-fit:cover;
    object-position: 40% 40%;
    display: block;
    }
.b12-setup2{
    width: 60%;
    height: auto;
    justify-content: center; 
    align-items: center;
    object-fit:cover;
    display: block;
    margin-left: 20%;
    }

.b12-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.b12-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}
  
/*gen-res layout*/

.gen-res-item {
  background-color: #526D82;
  justify-content: center; 
  align-items: center;
  padding: 15px;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  }

.gen-res-setup1{
    width: 500px;
    height: auto;
    justify-content: center; 
    align-items: center;
    object-fit:cover;
    object-position: 40% 40%;
    display: block;
    }

.gen-res-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.gen-res-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}

/*riboswitch results layout*/

.ribo-item {
  background-color: #9DB2BF;
  justify-content: center; 
  align-items: center;
  padding: 15px;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
   border: 2px solid #01161E;
   margin-top: 3%;
  }

.ribo-setup1{
    width: 100%;
    height: auto;
    justify-content: center; 
    align-items: center;
    object-fit:cover;
    object-position: 40% 40%;
    display: block;
    }

.ribo-left{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
.ribo-right{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: end;
}

/*Notebook page*/

 .notebook-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr); 
        align-items: center;
        justify-content: center;
        margin-right: 10%;

     }
    .notebook-timetable{
  width: 300px;
  height: 425px;
 margin-left: 20%;
 justify-content: center; 
  align-items: center;
}

/*aligns all figures to the center; überschreibt alle anderen centers*/
figure{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*engeneering-cycle box*/
.es-box-item {
  max-width: 100%;
  box-sizing: border-box;
  border: solid #526D82;
  justify-content: center;
  align-items: center;
  padding: 15px;
  text-align: justify;
  margin: 1%;
  border-radius: 10px 10px 10px 10px;
}

.es-box-item ul li {
  overflow-wrap: anywhere;
}

/*modelling page*/
.mol-dyn-iframe{
  align-items: center;
  justify-content: center;
}

.model-card {
width: 20em;
height: 25em;
perspective: 1em;
}

/*iframe centered*/
.iframe-container {
  margin-top: 20px;
  display: flex;
  justify-content: center; 
  align-items: center; 
  margin-bottom: 20px;
}


/*attribution form layout */
 .row{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12em;
}

/*Caption for things that dont have a caption */
.fig-cap-fake{
  font-size: 13px;
  padding-top: 12px;
  align-items: center;
}

.hp-ul-list-2{
   list-style: circle;
  color: #01161E;

}


/*Awards Page*/
.awards-container {
      display: flex;
      align-items: center;
    justify-content: center;
    }

      .awards-item-img {
      max-width: 100%;
        padding: 2%;
    }
    
    .awards-item-p {
      text-align: justify;
      padding: 2%;
    }
  
      
  .awards-box {
  background-color: #EBF1F5;
  justify-content: center; 
  align-items: center;
  padding: 2%;
  margin-left: 3%;
  margin-right: 3%;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #9DB2BF;
  min-width:600px;
  }
      
.awards-overview{
    width: 50%;
    height: auto;
    justify-content: center; 
    align-items: center;
   margin: 10% 25% 10% 25%;
    }