body { padding-top: 0px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #000000 /*#343a40*/ !important; }

/* 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 }

/*my new color palette:*/
darkblue: #326789
lightblue: #78a6c8
white: #e9eef2
red: #e65c4f

/* footer */
footer p { /*color: text-light !important*/}
footer a {/* color: text-dark;*/ font-weight: bold; text-decoration: none; }
footer a:hover { color: #e65c4f !important; text-decoration: underline; }
/*footer style STOPS*/

/*START PERSONALIZED STYLE*/
@import url('https://static.igem.wiki/teams/4214/wiki/roboto-slab-v24-latin-regular.woff2');
@import url('https://static.igem.wiki/teams/4214/wiki/source-sans-pro-v21-latin-regular.woff2');

@font-face {
  font-family: "Roboto";
  src: url("https://static.igem.wiki/teams/4214/wiki/roboto-slab-v24-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("https://static.igem.wiki/teams/4214/wiki/source-sans-pro-v21-latin-regular.woff2") format("woff2");
}

* {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html {
   scroll-behavior: smooth;
}

nav {
   position:relative;
   top: 0 /*!important*/;
   z-index: 0;
}
nav li a {
   color:#326789;
   font-size: 500;
}

.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   /*width: 50%;*/
   text-align: center;
   align-items: center;
}

body{
  font-family: "Source Sans Pro", "Roboto", Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
  font-size: 112.5%;
   background: rgb(233,73,73);
   background: linear-gradient(90deg, rgba(233,73,73,0.15) 0%, rgba(255,255,255,0) 35%, rgba(42,127,147,0.26) 100%);
   color:#333;
  text-align: justify;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  line-height: 1.6;
  word-spacing: 1.15px;
}

header {
   font-weight: 700 !important;
   text-transform: uppercase;
   letter-spacing: 9px;
   height: 350px;
}

header h1 {
   padding-top: 170px !important;
   font-size: 200px;
}

h2, h3, h4 {
   letter-spacing: 6px;
   text-transform: uppercase;
   padding-bottom: 5PX;
   text-align:start !important;
}

h5, h6 {
   letter-spacing: 6px;
   text-transform: uppercase;
   text-align:start !important;
}

p {
   padding-top: 3px;
   padding-bottom: 5PX;
}

a {
   color:#326789;
   font-weight: bold;
   text-decoration: none;
}
a:hover{
   color: #e65c4f !important; 
} 

/* Switch dark-light*/
.form-check {
   padding: auto;
}

/* animation logo START */
.static-gif {
   position:absolute;
}

.static-gif:hover {
   opacity:0;
}

.active-gif:hover {
   opacity: 0;
}
/* animation logo STOP */

/* dropdown navbar START */
.screen_menu {
   display: block;
}
.phone_menu {
   display: none !important;
   
}

@media screen and (max-width: 600px) {
   .screen_menu {
     display: none !important;
   }
   .phone_menu {
      display: block !important;
   }
}

.dropdown:hover .dropdown-menu {
   display: block;
   margin-top: 0; /* remove the gap so it doesn't close*/
   opacity: 1 !important;
}

.dropdown-menu.show {
   -webkit-animation: fadeIn 0.3s alternate;
   /* Safari 4.0 - 8.0 */
   animation: fadeIn 0.3s alternate;
}
 
.nav-item.dropdown.dropdown-mega {
   position: static;
}

.nav-item.dropdown.dropdown-mega .dropdown-menu {
   width: 100%;
   top: auto;
   left: 0%;
}

.nav-link {
   color: black;
   font-size: 18px;
   text-decoration: none;
   display: block;
   transition: all ease-out 100ms;
   font-weight:400;
}

.nav-link:hover {
   color:#e65c4f !important;
   font-weight:400;
}

.navbar {
   position:relative;
   z-index:2
}

/* dropdown navbar STOP */

/*main content and section START*/
.main-content {
   margin-left: 0%;
   padding-top: 0%;
   padding-bottom: 3%;
   position: static;
   z-index: 0;
}

section {
   /*background-color: #f5d1cb;*/
   height: auto;
   margin-bottom:80px;
   padding-top: 0%;
   /*padding-bottom: 30px;*/
   /*padding:2.5rem 4rem;*/ /*try to egalize sidebar and maincontent*/
   position: relative;
   z-index: 0;
}

section:last-of-type {
   /*height: 60vh;*/
   height:auto;
}
  
.active { /*needed for the JS*/
   color: #e65c4f !important; 
   font-weight: 600 !important;
   font-size: 18px;
}

/* SIDE BAR START*/
.side-bar {
  flex-direction: column;
  justify-content: center;
  /*width: 25%;*/
  padding-top: 3%; /*to be same as main-content*/
  padding-left: 0%; /*to be aligned to title*/
  display: flex;
  float: left;
  position: sticky;
  z-index: 0;
}

.nav-ul-sidebar {
  padding: 0;
}

.nav-ul-li-sidebar {
  list-style: none;
}

.nav-ul-li-a-sidebar {
  text-align: left !important;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  font-weight: 500;
  transition: all ease-out 100ms;
  padding: 4px;
  color: #326789;
}

.nav-ul-li-a-sidebar:hover {
  color: #e65c4f;
  font-size: 20px;
}
/* SIDE BAR STOP*/

/*make the side bar disappear in function of the width*/
@media (max-width: 1000px) {
   .side-bar {
     position:static;
     display: none;
     background: transparent;
   }
}

.list-group-item {
   transition: all ease-out 100ms;
   font-size: 16px;
   font-weight: 100;
}
.list-group-item:hover {
   font-size: 18px;
   color:#e41b17
}

.light_sidebar {
   font-size: 16px !important;
   padding-left: 15px !important;
}
.light_sidebar:hover {
   font-size: 17px !important;
}
.light2_sidebar {
   font-size: 14px !important;
   padding-left: 25px !important;
}
.light2_sidebar:hover {
   font-size: 15px !important;
}
/* end of new code FOR SIDE BAR */


/*carousel*/
.carousel {
  position: relative;
  z-index: 0;
}

.carousel .item {
  height: 20px;
  margin: auto;
}

.item img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  /*min-height: 50px;*/
   max-width: 70% !important;}
/*end of carousel*/


/*reveal effect onscroll from bottom*/
.reveal{
   position: relative;
   transform: translateY(80px);
   opacity: 0;
   transition: all 0.8s ease-out !important;
}

.reveal.activeonscroll{
   transform: translateY(0px);
   opacity: 1;
}
/*end of reveal effect*/

/*reveal effect onscroll from top*/
.revealfromtop{
   position: relative;
   transform: translateY(-80px);
   opacity: 0;
   transition: all 0.8s ease-out !important;
}

.revealfromtop.activeonscrolltop{
   transform: translateY(0px);
   opacity: 1;
}
/*end of reveal effect*/

/*reveal effect onscroll from left*/
.revealfromleft{
   position: relative;
   transform: translateX(-80px);
   opacity: 0;
   transition: all 0.8s ease-out !important;
}

.revealfromleft.activeonscrolltop{
   transform: translateX(0px);
   opacity: 1;
}
/*end of reveal effect*/

/*reveal effect onscroll from right*/
.revealfromright{
   position: relative;
   transform: translateX(+80px);
   opacity: 0;
   transition: all 0.8s ease-out !important;
}

.revealfromright.activeonscrolltop{
   transform: translateX(0px);
   opacity: 1;
}
/*end of reveal effect*/

/*box*/
.box_page {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: baseline;
  margin-top: 50px; /*space top box*/
}

@media (max-width: 1000px) {
   .box_page {
      flex-direction: column;
      align-items: center;  
      margin-top: 10px !important;
   }
}
.box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 50px; /*space top box*/
}

@media (max-width: 1000px) {
   .box {
      flex-direction: column;
      align-items: center;  
      margin-top: 10px !important;
   }
}

.flashbox {
   width: 160px;
   height: 80px;
   background-color: #326789;
   color:white;
   /*transition: 0.3s;*/
   box-shadow: 5px 5px 5px 5px rgba(42,149,177,0.15);
   border-radius: 5px;
   font-size: 20px;
   text-align:center;
   line-height: 70px;
   /*align-items: center; 
   justify-content: center;*/
   text-decoration: none;
}

@media (max-width: 1000px) {
   .flashbox {
      flex-direction: column;
      align-items:center;  
      margin-top: 10px !important;
   }
}

.flashbox:hover {
   background-color: #326789;
}

.flashbox_pages {
   width: 265px;
   height: 80px;
   background-color: #326789;
   opacity: 0.8;
   /*transition: 0.3s;*/
   box-shadow: 5px 5px 5px 5px rgba(42,149,177,0.15);
   border-radius: 5px;
   font-size: 20px;
   text-align:center;
   line-height: 70px;
   /*align-items: baseline; 
   justify-content: center;*/
   text-decoration: none;
}
.flashbox_pages:hover {
   background-color: #326789;
}
.fa_pages {
   color: white !important;
}
/**/
.flashbox_pages:hover .fa_pages {
   color: #e65c4f !important;
}
.flashbox_pages:hover svg {
   fill: #e65c4f !important;
}

.p_pages, .a_pages {
   color:white;
   text-decoration: none;
}
/**/
.flashbox_pages:hover .p_pages, .a_pages {
   color: #e65c4f;
}
@media (max-width: 1000px) {
   .flashbox_pages {
      flex-direction: column;
      align-items:center;  
      margin-top: 10px !important;
   }
}
/*end of flashbox*/



/*TIMELINE*/
* {
   box-sizing: border-box;
 }
 
 /* The actual timeline (the vertical ruler) */
 .timeline {
   position: relative;
   max-width: auto;
   margin: 0 auto;
 }
 
 /* The actual timeline (the vertical ruler) */
 .timeline::after {
   content: '';
   position: absolute;
   width: 2px;
   background: rgb(233,73,73);
   background: linear-gradient(0deg, rgba(233,73,73,1) 0%, rgba(255,255,255,0) 50%, rgba(42,127,147,1) 100%);
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -1px;
 }
 
 /* Container around content */
 .container-timeline {
   padding: 10px 20px;
   position: relative;
   background-color: transparent/*lightgrey*/;
   width: 50%;
 }
 
 /* The circles on the timeline */
 .container-timeline::after {
   content: '';
   position: absolute;
   width: 30px;
   height: 30px;
   right: -15px;
   background-color: transparent /*green*/;
   border: transparent /*4px solid red*/;
   top: 15px;
   border-radius: 50%;
   z-index: 1;
 }
 
 /* Place the container to the left */
 .left {
   left: 0;
 }
 
 /* Place the container to the right */
 .right {
   left: 50%;
 }
 
 /* Add arrows to the left container (pointing right) */
 .left::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 22px;
   width: 0;
   z-index: 1;
   right: 10px;
   border: medium solid grey;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent grey;
 }
 
 /* Add arrows to the right container (pointing left) */
 .right::before {
   content: " ";
   height: 0;
   position: absolute;
   top: 22px;
   width: 0;
   z-index: 1;
   left: 10px;
   border: medium solid grey;
   border-width: 10px 10px 10px 0;
   border-color: transparent grey transparent transparent;
 }
 
 /* Fix the circle for containers on the right side */
 .right::after {
   left: -16px;
 }
 
 /* The actual content */
 .content-timeline {
   padding: 20px 30px;
   background-color: #78a6c8;
   position: relative;
   border-radius: 5px; /*round angles*/
 }
 
 /* Media queries - Responsive timeline on screens less than 600px wide */
 @media screen and (max-width: 600px) {
   /* Place the timelime to the left */
   .timeline::after {
   left: 31px;
   }
   
   /* Full-width containers */
   .container-timeline {
   width: 100%;
   padding-left: 70px;
   padding-right: 25px;
   }
   
   /* Make sure that all arrows are pointing leftwards */
   .container-timeline::before {
   left: 60px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
   }
 
   /* Make sure all circles are at the same spot */
   .left::after, .right::after {
   left: 15px;
   }
   
   /* Make all right containers behave like the left ones */
   .right {
   left: 0%;
   }
 }
 /*END TIMELINE*/


/*FLIPCARD*/
.scene {
  width:100%;
  perspective: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

@media screen and (max-width: 600px){
   .scene {
      padding-left: 25%;
      }
}

.flipcard {
   position: relative;
   width: 300px;
   height:300px; /*to check to have rectangles*/
   color:white;
   font-size:10;
   font-weight: lighter !important;
   background-color: #326789 !important;
   text-align: justify;
   line-height: 1; 
   cursor: pointer;
   transition: 1s ease-in-out;
   transform-style: preserve-3d;
}

.flipcard:hover {
   transform: rotateY(0.5turn);
}

.flipcard__face {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   transition: 1s ease-in-out;
   display: flex;
   align-items: center;
}

.flipcard-img {
   width: auto;
   /*height: 200px;*/
   object-fit: cover;
}

.flipcard__face--back {
   transform: rotateY(0.5turn);
}
/*end flip card*/

/*font awesome*/
.fa {
   color:#326789;
   transition: 0.3s;
}

.fa:hover{
   color:#e65c4f;
}
svg:hover {
  fill: #e65c4f !important;
}

.logo-svg {
  fill:#326789;
   transition: 0.3s;
}

.logo-svg:hover {
  fill:#e65c4f;
}

/*end font awesome*/

/*button to top*/
#btn-back-to-top {
  position: fixed;
  z-index: 22;
  bottom: 70px;
  right: 70px;
  display: none;
  transition: 0.3s;
  background-color: #326789; 
  color: white;
}
@media screen and (max-width: 600px){
   #btn-back-to-top {
      bottom: 30px;
      right: 30px;
      }
}

#btn-back-to-top:hover {
   color: #e65c4f;
}

/*Collapsible*/
/* General*/
input {
   position: absolute;
   opacity: 0;
   z-index: -1;
}
.row {
   display: flex;
}
.row .col {
   flex: 1;
}
.row .col:last-child {
   margin-left: 1em;
}
/* Accordion styles */
.tabs {
   border-radius: 5px;
   overflow: hidden;
   box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}
.tab {
   width: 100% !important;
   color: white;
   overflow: hidden;
}
.tab-label {
   display: flex;
   justify-content: space-between;
   padding: 1em;
   background: #326789;
   font-weight: bold;
   cursor: pointer;
  /* Icon */
}
.tab-label:hover {
   color: #e65c4f;
   background: #326789;
}
.tab-label::after {
   content: "\276F";
   width: 1em;
   height: 1em;
   text-align: center;
   transition: all 0.35s;
}
.tab-content {
   max-height: 0;
   padding: 0 1em;
   color: black;
   background: white;
   transition: all 0.35s;
}
.tab-close {
   display: flex;
   justify-content: flex-end;
   padding: 1em;
   background: #326789;
   cursor: pointer;
}
.tab-close:hover {
   background: #326789;
}
input:checked + .tab-label {
   background: #326789;
}
input:checked + .tab-label::after {
   transform: rotate(90deg);
}
input:checked ~ .tab-content {
   max-height: 600vh; /*!!! LENGTH OF REFERENCES !!!*/
   padding: 1em;
}
/*end collapsible*/


/*card for TEAM section*/
/*style CARDS start*/
.card-grid{
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
}

@media screen and (max-width: 600px){
   .card-grid {
      padding: 20%;
      }
}

.card{
   list-style: none;
   position: relative;
   z-index: 0;
   border: 0;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   max-width: 250px;
   border-radius: 24px;
   background-color: transparent;
}

.card:before{
   content: '';
   display: block;
   padding-bottom: 150%;
   width: 100%;
}

.card__background{
   background-size:cover;
   background-position: center;
   border-radius: 24px;
   bottom: 0;
   filter: brightness(0.95) saturate(1.2) contrast(0.9);
   left: 0;
   position: absolute;
   z-index: 1;
   right: 0;
   top: 0;
   transform-origin: center;
   transform: scale(1) translateZ(0);
   transition: 
     filter 200ms linear,
     transform 200ms linear;
}

.card:hover .card__background{
   transform: scale(1.05) translateZ(0);
   filter: brightness(0.7) saturate(1.2) contrast(0.85);
}

.card-grid:hover > .card:not(:hover) .card__background{
   filter: brightness(0.4) saturate(1.2) contrast(.7) blur(7px);
   border-radius: 24px;
}

.card__content{
   left: 0;
   padding: 20px;
   position: absolute;
   top: 58%;
   z-index: 3;
}

.card:hover .card__content{
   top: 3%;
   z-index: 1;
   transition: .4s;
}

.card__category{
   color: rgba(255,255,255,0.7);
   font-size: 1.3rem;
   margin-bottom: 3px;
   text-transform: uppercase;
}

.card__heading{
   color: rgba(255,255,255,0.9);
   font-size: 1.5rem;
   text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
   line-height: 0.8;
   word-spacing: 1vw;
}

.card__caption{
   color: transparent;
   font-size: 1.1rem;
   font-weight: lighter !important;
   line-height: 1;
   padding-top: 8px;
   hyphens: auto !important;
}

.card:hover .card__caption{
   color: rgba(255,255,255,0.9);
   text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.40);
   transition: 1.3s;
}
/*style CARDS end*/


/*iframe disappear*/
.box-pdf {
   display: none !important;
}
@media screen and (max-width: 600px){
   .iframe-pdf {
      display: none;
      }
   .box-pdf {
      display: flex !important;
   }
}
/*end iframe-button*/


/*table style*/
table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid white;
  padding: 8px;
}
/*tr:nth-child(even){background-color: transparent;}*/

tr:hover {
   background-color: #e65c4f;
   color: white;
   /*opacity: 0.1;*/
   }

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: black;
  color: white;
}
/*end table*/

/*button dyslexic*/
.dyslexic {
   background-color: #326789 !important;
   color: white;
}
.dyslexic:hover {
   background-color:  #e65c4f !important;
}

/*ProMutor*/
.sequence {
  font-family: 'Courier Prime', monospace;
  text-align: justify;
  text-align-last: justify;
  max-width: 600px;
}
.div_button {
  padding-top: 20px;
}

.video-big {
   width:1200px !important;
   height:auto;
}
@media screen and (max-width: 1000px){
   .video-big
   {
   width: 450px !important;
   height:auto;
   }
}

.video-medium {
   width:950px !important;
   height:auto;
}
@media screen and (max-width: 1000px){
   .video-medium
   {
   width: 450px !important;
   height:auto;
   }
}

.video-small {
   width:600px !important;
   height:auto;
}
@media screen and (max-width: 1000px){
   .video-small
   {
   width: 450px !important;
   height:auto;
   }
}

/* <code> */
code {
  font-family: monospace !important;
  font-size: 125%;
  color:black !important;
  opacity:0.75;
  background-color:whitesmoke;
}

/* Code in text */
p > code,
li > code,
dd > code,
td > code {
  background: whitesmoke !important;
  word-wrap: break-word;
  box-decoration-break: clone;
  padding: .1rem .3rem .2rem;
  border-radius: .2rem;
}