@font-face {
  font-family: "futura-book-font";
  src: url("https://static.igem.wiki/teams/4877/wiki/wiki-fonts/futura/futura-book-font.ttf") format("truetype");
}

@font-face {
  font-family: "ebgaramond-bold";
  src: url("https://static.igem.wiki/teams/4877/wiki/wiki-fonts/garamond/ebgaramond-bold.ttf") format("truetype");
}

html { /* this prevents the sticky header from covering parts of the text on anchor jumps */
  scroll-padding-top: 80px; /* height of sticky header */
}

body { 
padding-top: 56px; 
background-color: #dfe2cf;
font-family: "futura-book-font";
color: #191308;
}

span {
font-family: "futura-book-font";
text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
font-family: "ebgaramond-bold";
color: #191308;
}

a { 
text-decoration: none; 
font-family: "ebgaramond-bold";
color:#191308;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

.left-aligned { margin-left: auto; }
.bg-dark { background-color: #191308 !important; }
.bg-hero { background-color: #8d6a9f; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #191308; 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: 56px }
.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: #DFE2CF; font-weight: bold; text-decoration: none; }
footer a:hover { color: #DFE2CF; text-decoration: underline; }

.rotation {
overflow: hidden;
}

.rotation > img {
transition: transform 1.5s ease-in-out;
box-sizing: border-box;
max-width: 100%;
float: left;
}

.rotation > img:hover {
transform: rotate(360deg);
}

/* First the Grid */
.gallery-grid {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 1.5rem;
justify-items: center;
margin: 0;
padding: 0;
}

/* The Picture Frame */
.gallery-frame {
padding: .5rem;
font-size: 1.2rem;
text-align: center;
background-color: #333;
color: #d9d9d9;
}

/* The Images */
.gallery-img {
max-width: 100%;
height: auto;
object-fit: cover;
transition: transform .2s;
}

.gallery-img:hover .overlay-text {
transform: scale(1.5);
opacity: 0.25;
}

.overlay-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #dfe2cf;
}

/* Top left text for gallery-grid */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}

.sliderElements,
.sliderElements figure,
.sliderControls {
  margin: 0;
}

.sliderElements:after {
  content: ".";
  display: block;
  height: .1px;
  clear: both;
  visibility: hidden;
  font-size: 0;
  overflow: hidden;
}

.cssSlider {
  overflow-x: hidden;
}

.sliderElements {
  list-style: none;
  position: relative;
  left: 0;    
  width: 400%;
  margin-bottom: .8em;
  padding: 0;
  -webkit-transition: left .8s ease-in-out;
  -moz-transition: left .8s ease-in-out;
  -o-transition: left .8s ease-in-out;
  transition: left .8s ease-in-out;
}

.sliderElements > li {
  float: left;
  width: 25%;
  position: relative;
}

#slide02:checked ~ .sliderElements {
  left: -100%;
}

#slide03:checked ~ .sliderElements {
  left: -200%;
}

#slide04:checked ~ .sliderElements {
  left: -300%;
}

/* Bildunterschrift auf dem Bild positionieren */
.sliderElements figcaption {
  display: block;
  color: #ddd;
  position: absolute;
  left: 0;
  bottom: 1em;
  padding: .4em;
  background: rgba(0,0,0,.5);
}

/* Bilder responsive */
.sliderElements img {
  width: 100%;
  height: auto;
}


/* inputs aus dem Blickfeld schieben */
.cssSlider input {
  position: absolute;
  left: -99999px;
}

/* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */
.sliderControls {
  text-align: center;
}

/* Controls nebeneinander bringen */
.sliderControls li {
  display: inline-block;
}

/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  display: block;
  cursor: pointer;
  background: #4ecdc4;
  color: #4ecdc4;
}

/* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */
.sliderControls label:hover,
#slide01:checked ~ .sliderControls label[for="slide01"],
#slide02:checked ~ .sliderControls label[for="slide02"],
#slide03:checked ~ .sliderControls label[for="slide03"],
#slide04:checked ~ .sliderControls label[for="slide04"] {
  background: #8d6a9f;
  color: #8d6a9f;
}

.references {
    list-style-type: none;
}

.sidebar {
    border-left: 8px solid;
    border-color: #8D6A9F;
    list-style-type: none;
    line-height: 280%;
    margin: 0px 0px;
    padding: 0px 0px;
}
.sidebarEntry {
    font-family: ebgaramond-bold;
    font-size: 25px;
    color: #191308;
    background: linear-gradient(#8D6A9F 0 0) var(--p, 0) / var(--p, 0) no-repeat;
    transition: .2s, background-position 0s;
}
.sidebarEntry:hover {
    --p: 100%;
    color: #191308;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.reveal {
position: relative;
opacity: 0;
}

.reveal.active {
opacity: 1;
}
.active.fade {
animation: fade 0.75s ease-in;
}

@keyframes fade {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}