body {
  padding-top: 56px;
  background-image: url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/wiki-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* just for active outline */
}
header{
height: 46vh;
width: auto;
}
a {
color: var(--third);
text-decoration: none;
}
a:hover {
color: #DC582A;
}
table {
font-family: var(--body-font);
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(1) {
background-color: var(--primary);
}
.text-hr hr {
background-color: var(--third) !important;
width: 30%;
height: 3px !important;
border-radius: 5px;
opacity: 0.8;
margin: auto !important;
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: var(--primary) !important; }
.bg-hero { background-image: url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/bg.jpg'); }

.references-box {
  overflow-wrap: break-word;
}

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

/* -------------------- Global valiables -------------------- */
:root {
  /* colors */
  --primary: #392F5A;
  --secondary: #9DD9D2;
  --third: #ff8811;
  --fourth: #d2d2d2;
  --dark: #212121;
  --light: #f3f3f3;
  /* fonts */
  --logo-font: 'courier_primeregular';
  --title-font: 'work_sansregular';
  --body-font: 'figtreelight';
}
.gradient {
  background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
}
.italic {
font-style: italic;
}
.bold {
font-weight: 600;
}
.text-img img {
width: 100%;
height: auto;
padding-top: 1em;
padding-bottom: 1em;
}
.title-orange {
color: var(--third);
}
.text-img-caption {
font-size: 0.8em;
color: var(--fourth);
}

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/* -------------------- Redefining H & paragraph style -------------------- */
h1, h2{
  font-family: var(--title-font);
}
p,li, a {
  font-family: var(--body-font);
}
p, li {
  text-align: justify;
  text-justify: inter-word;
}

/* -------------------- Button -------------------- */
.btn-box {
position: relative;
box-sizing: content-box;
display: inline-block;
margin: 5px;
}
.btn-box img {
position: absolute;
left: 17px;
width: 20px;
height: auto;
z-index: 98;
}
.btn {
display: flex;
flex-direction: row;
padding-left: 60px;
padding-right: 10px;
align-items: center;
min-height: 38px;
font-family: var(--title-font);
border: none;
border-radius: 100px;
cursor: pointer;
font-weight: 400;
text-decoration: none;
transition: all 0.5s linear;
}
.btn span {
font-size: 1.1em;
font-weight: 700;
padding: 0;
color: var(--light);
transition-duration: 0.5s;
}
.yellow {
background: none;
color: black;
}
.yellow::before {
content: "";
display: block;
width: 38px;
height: 100%;
background-color: var(--third);
position: absolute;
border-radius: 100px;
left: 0.5em;
z-index: -1;
transition: all 600ms ease;
}
.yellow:hover::before {
width: 100%;
}
.yellow:hover span{
color: var(--primary);
font-weight: 700;
}

/* ----------------------------- Page headers ----------------------------- */
.awards {
  display: none;
}
@media (min-width: 768px) {
  .awards {
    display: block;
    position: absolute;
    max-width: 90vw;
    top: 120px;
    left: 50px;
  }
}
.awards p{
  margin-bottom: 0;
}
.awards-img {
  height: 3rem;
  width: 3rem;
}
.header-title-light {
font-size: calc(1.475rem + 2.7vw);
font-weight: 800;
letter-spacing: 0.1em;
font-family: var(--title-font);
color: white;
}
.header-title-dark {
font-size: calc(1.475rem + 2.7vw);
font-weight: 800;
letter-spacing: 0.1em;
font-family: var(--title-font);
color: var(--primary);
}
.header-description {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-project-description.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-problem {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-problem.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-design {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-actuator.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-results {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-results.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-experiments {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-experiments.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-notebook {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/notebook.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-engineering {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-engineering.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-model {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-model.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-contribution {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-contribution.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-integrated {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-integrated.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-education {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-education.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-safety {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-safety.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header-team {
background: linear-gradient(#392F5A, transparent, black), url('https://static.igem.wiki/teams/4727/wiki/wiki-imgs/header-team.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* ----------------------------- Menubar ----------------------------- */
.main-navbar{
  min-height: 80px;
}
.navbar-brand {
  font-family: var(--title-font);
  font-size: 1.5em;
}
.nav-link {
  font-family: var(--title-font);
  font-size: 1.2em;
}
.dropdown-menu {
  background-color: var(--primary);
}
.dropdown-item {
  font-family: var(--title-font);
  color: var(--light);
  transition: color 0.3s;
}
.dropdown-item:hover {
  background-color: var(--secondary);
  color: var(--primary); /* Replace 'var(--new-color)' with the desired color value for hover */
}
.presentation {
  height: 400px;
}

/* ----------------------------- Footer ----------------------------- */
.logo-footer {
  width: auto;
  max-width: 100%;
  max-height: 6rem;
}
.black-white {
  filter: invert(1);
}
#logo-mutans {
width: 50%;
height: auto;
}
@media (min-width: 768px) {
#logo-mutans {
  width: 120%;
  height: auto;
}
}
#logo-unipd {
width: 100%;
height: auto;
}
#unipd-address {
text-align: center;
}
@media (min-width: 768px) {
#unipd-address {
    text-align: left;
}
}
#logo-dibio {
width: 50%;
height: auto;
}
#logo-dmm {
width: 100%;
height: auto;
}
#logo-dei {
width: 100%;
height: auto;
}
#logo-cariparo {
width: 110%;
height: auto;
}
#logo-promega {
width: 80%;
height: auto;
}
#logo-qiagen {
width: 50%;
height: auto;
}
#logo-biocell {
  width: 50%;
  height: auto;
}
#logo-impact {
  width: 50%;
  height: auto;
}
.copyrigh {
  text-align: center;
}
@media (min-width: 768px) {
  .copyrigh {
      text-align: left;
  }
}
.social-box {
  text-align: center;
}
@media (min-width: 576px) {
  .social-box {
      text-align: right;
  }
}
.social-footer {
  width: auto;
  height: 30px;
}

/* ---------------------------- Homepage ---------------------------- */
/* Homepage | Phage */
.delay-header {
  opacity: 0;
  transition: opacity 0.8s ease;
  min-height: 700px;
}
.block-touch {
cursor: not-allowed;
pointer-events: none;
}
@media (min-width: 768px) {
  .block-touch {
    cursor: default;
    pointer-events: visible;
  }
}
.phage-link {
  text-align: center;
}
.phage-link h5 {
  display: none;
}
@media (min-width: 768px) {
  .phage-link h5 {
      display: block;
      font-family: var(--body-font);
      color: #6958bb;
      font-size: medium;
      font-weight: 700;
      animation: moveUpDown 1s infinite alternate ease-in-out;
  }
}
@keyframes moveUpDown {
  0% {
      transform: translateY(-10px);
  }
  100% {
      transform: translateY(10px);
  }
}
.h-titlebox {
  position: absolute;
  top: 12rem;
  left: 12vw;
}
@media (min-width: 576px) {
  .h-titlebox {
      left: 15vw;
  }
}
@media (min-width: 768px) {
  .h-titlebox {
      left: 20vw;
  }
}
.h-title {
  font-family: var(--logo-font);
  font-size: 4rem;
  letter-spacing: .5rem;
  text-transform: uppercase;
  color: var(--light);
}
@media (min-width: 576px) {
  .h-title {
      font-size: 5rem;
  }
}
.h-titledescritpion {
  font-size: 1.3em;
  font-family: var(--body-font);
  color: var(--light);
}

/* Homepage | Hospital img */
.hospital {
max-width: 600px;  
}


/* Homepage | Counter boxes */
.counter-box {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.counter-box h4 {
  color: var(--light);
  margin-top: 50px;
  max-width: 400px;
  font-family: var(--body-font);
}

.num {
  color: var(--light);
  font-family: var(--title-font);
  font-size: 3em;
}

/* Homepage | The problem in brief */
.h-antibiotics {
text-align: center;
}
.h-antibiotics img {
width: 100%;
height: auto;
}
.h-problem-desc-1 {
color: var(--light);
font-family: var(--body-font);
font-size: 1.4em;
}
.h-fight {
text-align: center;
}
.h-fight img {
padding: 0;
width: 50%;
height: auto;
}
@media (min-width: 576px) {
.h-fight img {
  padding: 10%;
  width: 90%;
}
}
.vs {
font-family: var(--logo-font);
color: var(--light);
font-size: 4rem;
}
@media (min-width: 576px) {
.vs {
  font-size: 5rem;
}
}
/* Homepage | Brief project description */
.h-brief-desc-1 {
color: var(--light);
font-family: var(--title-font);
font-size: 1.8rem;
max-width: 100%;
text-align: center !important;
}
@media (min-width: 576px) {
.h-brief-desc-1 {
  max-width: 80%;
}
}
.h-brief-desc-1 span {
font-weight: bold;
}
.h-brief-desc-2 {
color: var(--light);
font-family: var(--body-font);
font-size: 1.4rem;
max-width: 100%;
text-align: center !important;
}
@media (min-width: 576px) {
.h-brief-desc-2 {
  max-width: 80%;
}
}

/* Homepage | Principles */
.h-col-title {
  text-align: center;
  color: var(--light);
}
.h-col-title h1 {
  font-size: 3rem;
}
.h-col-img {
  text-align: center;
}
.h-body-img {
  max-width: 40%;
  height: auto;
}
.h-desc-box {
  margin: auto;
  color: var(--light);
  max-width: 400px;
}
.h-desc-box p {
  font-size: 1.2rem;
  text-align: left !important;
}
.h-desc-box span {
  font-weight: 700;
}

@media (min-width: 576px) {
  .h-body-img {
      max-width: 60%;
  }
  .h-desc-box p {
      font-size: 1.3rem;
  }
}

/* Homepage | Shortcuts */
.shortcut-card {
  position: relative;
  height: 250px;
  margin: 5px;
  border: 5px solid #4f29cd;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  border-radius: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
  transition-property: transform;
  transition-duration: 0.5s;
}
.shortcut{
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: transparent;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.shortcut h2 {
margin-top: 30px;
margin-bottom: 30px;
position: relative;
color: var(--light);
max-width: 200px;
transition-property: transform;
transition-duration: 0.5s;
background-color: rgba(57, 47, 90, 0.7);
border-radius: 15px;
padding: 0.2em;
}
.img-shortcut {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
@media (min-width: 576px) {
  .shortcut-card:hover {
      transform: translateY(-20px);
      cursor: pointer;
  }
  .shortcut-card:hover .shortcut h2 {
      transition: 0.5s;
      max-width: 200px;
      transform: scale(1.1);
  }
}

/* ---------------------------- Design ---------------------------- */
.plasmid-container {
  top: 150px;
}
.dsg-spacer-1 {
  height: 20px;
  width: auto;
}
.dsg-spacer-2 {
  height: 100px;
  width: auto;
}

/* ---------------------------- Notebook ---------------------------- */
.notebook-cover img {
width: 100%;
height: auto;
}

.team-container {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-card {
  position: relative;
  width: 250px;
  height: 250px;
  padding: 30px;
  border-radius: 50%;
  box-shadow: 0 0 22px #3336;
  transition: 0.6s;
}
.profile-card:hover { 
  border-radius: 10px;
  height: 300px;
  width: 250px;
}
.profile-card .profile-img {
  position: relative;
  width: 100%;
  height: 100%;
  transition: 0.6s;
  z-index: 1;
}
.profile-card:hover .profile-img img {
  border-radius: 10px;
}
.profile-img img {
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 0 22px #3336;
  transition: 0.6s;
}
.member-caption {
  text-align: center;
  opacity: 0;
  transition-duration: 0.6s;
}
.profile-card:hover .member-caption {
  opacity: 1;
}
.member-caption p {
  padding-top: 5px;
  margin-bottom: 6px;
  line-height: normal;
}
.member-social img {
  width: 1.6em;
  height: auto;
}

/* Texts & backgrounds */
.text-caption-dark {
  color: black;
}
.text-caption-light {
  color: var(--light)
}
.profile-bg-student {
  background-color: var(--primary);
}
.student p {
  text-align: center !important;
}
.student p span {
  color: var(--third);
}
.profile-bg-instructor {
  background-color: var(--secondary);
}
.instructor p {
  text-align: center !important;
}
.instructor p span {
  color: #DC582A;
}
.profile-bg-professor {
  background-color: var(--third);
}
.professor p {
  text-align: center !important;
}
.professor p span {
  color: var(--light);
}


/* Tommaso Varaschin */
.profile-card:hover .tommy {
  transform: translateY(-160px); 
}
.tommy-caption {
  transform: translateY(-200px);
}
/* Francesca Galiazzo */
.profile-card:hover .fra {
  transform: translateY(-160px); 
}
.fra-caption {
  transform: translateY(-180px);
}
/* Marco Costanzo */
.profile-card:hover .marco {
  transform: translateY(-160px); 
}
.marco-caption {
  transform: translateY(-200px);
}
/* Niccolò VDE */
.profile-card:hover .nicco {
  transform: translateY(-150px); 
}
.nicco-caption {
  transform: translateY(-190px);
}
/* Chiara Zanin */
.profile-card:hover .chiaraz {
  transform: translateY(-170px); 
}
.chiaraz-caption {
  transform: translateY(-200px);
}
/* Luca Guarnieri */
.profile-card:hover .luca {
  transform: translateY(-170px); 
}
.luca-caption {
  transform: translateY(-200px);
}
/* Asia Picchi */
.profile-card:hover .asia {
  transform: translateY(-140px); 
}
.asia-caption {
  transform: translateY(-180px);
}
/* Chiara Ravazzolo */
.profile-card:hover .chiarar {
  transform: translateY(-160px); 
}
.chiarar-caption {
  transform: translateY(-200px);
}
/* Alex Martini */
.profile-card:hover .alex {
  transform: translateY(-130px); 
}
.alex-caption {
  transform: translateY(-170px);
}
/* Valentina Del Giudice */
.profile-card:hover .vale {
  transform: translateY(-150px); 
}
.vale-caption {
  transform: translateY(-190px);
}
/* Giorgia D'Angelo */
.profile-card:hover .gio {
  transform: translateY(-180px); 
}
.gio-caption {
  transform: translateY(-215px);
}
/* Sara Letrari */
.profile-card:hover .sara {
  transform: translateY(-130px); 
}
.sara-caption {
  transform: translateY(-150px);
}
/* Professors */
.profile-card:hover .prof {
  transform: translateY(-160px); 
}
.prof-caption {
  transform: translateY(-180px);
}
/* Bacteria */
.profile-card:hover .bac {
  transform: translateY(-175px); 
}
.bac-caption {
  transform: translateY(-205px);
}

/* ---------------------------- Attribution ---------------------------- */
#attribution-box {
max-width: 85vw;
background-color: var(--secondary);
border: solid 1px var(--secondary);
border-radius: 10px;
}

/* -------------------- Loader -------------------- */
.loader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex; /* auto resize of child elements in width and height */
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: opacity 1s, visibility 1s;
}
.loader--hidden{
  opacity: 0;
  visibility: hidden;
}
.loader-content {
position: absolute;
display: flex;
flex-direction: column;
width: 60vw;
}
.loader-textbox {
  position: relative;
  display: flex;
  justify-content: center;
}
/* ---------------- Loader Welcome ---------------- */
.welcome-1, .welcome-2 {
  /* position: relative; */
  margin-left: auto;
  margin-right: auto;
  max-width: 100ch;
  line-height: 1.5rem;
  font-family: var(--body-font);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: .1rem;
  color: var(--light);
  text-align: center;
  transform: scale(0.94);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
.welcome-1 span,
.welcome-2 span {
display: inline-block;
opacity: 0;
filter: blur(4px);
}
@keyframes scale {
100% {
  transform: scale(1);
}
}
.welcome-1 span:nth-child(1) {
animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(2) {
animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(3) {
animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(4) {
animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(5) {
animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(6) {
animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(7) {
animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(8) {
animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(9) {
animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(10) {
animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(11) {
animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-1 span:nth-child(12) {
animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-2 span:nth-child(1) {
animation: fade-in 0.8s 2.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-2 span:nth-child(2) {
animation: fade-in 0.8s 2.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.welcome-2 span:nth-child(3) {
animation: fade-in 0.8s 2.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
@keyframes fade-in {
100% {
  opacity: 1;
  filter: blur(0);
}
}

/* ---------------- Loader Typewriter Title ---------------- */
:root {
--loader-title-delay: 5s;
}
.loader-title {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: 4rem;
  color: var(--light);
  font-family: var(--logo-font);
  text-transform: uppercase;
  position: relative;
}
.loader-title::before,
.loader-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.loader-title::before {
  background: #060402;
  animation: typewriter 1.25s steps(5) var(--loader-title-delay) forwards;
}
.loader-title::after {
  width: 0.500em;
  background: var(--light);
  opacity: 0;
  animation:
      typewriter 1.25s steps(5) var(--loader-title-delay) forwards,  /* 1.25s animation duration, 4s delay, forwards = stop how it is in the last step */
      blink 400ms steps(5) 4s infinite;
}
@keyframes typewriter {
  to {
      left: 100%;
  }
}
@keyframes blink {
49% {opacity: 0}
50% {opacity: 1}
100% {opacity: 1;}
}   
@media (max-width: 768px) {
.loader-title {
    font-size: 30px; /* Adjust the font size as per your needs */
}
}

/* ---------------- Loader Subtitle ---------------- */
.loader-subtitle {
text-align: center;
margin-top: 10px;
font-family: var(--body-font);
font-size: 16px;
letter-spacing: .1rem;
text-transform: uppercase;
color: var(--light);
transform: scale(0.94);
animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
.spacer {
margin: 0 10px 0 10px;
}

.loader-subtitle span,
.body-title span,
.body-subtitle span {
display: inline-block;
opacity: 0;
filter: blur(4px);
}
@keyframes scale {
100% {
  transform: scale(1);
}
}
.loader-subtitle span:nth-child(1) {
animation: fade-in 0.7s 7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.loader-subtitle span:nth-child(2) {
animation: fade-in 0.7s 7.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.loader-subtitle span:nth-child(3) {
animation: fade-in 0.7s 8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.loader-subtitle span:nth-child(4) {
animation: fade-in 0.7s 8.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.loader-subtitle span:nth-child(5) {
animation: fade-in 0.7s 9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.loader-subtitle span:nth-child(6) {
animation: fade-in 0.7s 9.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
@keyframes fade-in {
100% {
  opacity: 1;
  filter: blur(0);
}
}

/* ---------------- Outline & texts ---------------- */

.outline-container {
height: 100%;
}
.outline-positon {
position: sticky;
top: 100px;
}
.pd-text-margintop {
display: block; 
content: " "; 
height: 100px;      /* Give height of your fixed element */
  margin-top: -100px; /* Give negative margin of your fixed element */    
  visibility: hidden; 
}
@media only screen and (max-width: 820px) {
.outline-hide {
    display: none;
}
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: transparent;
border-bottom: solid;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-left: 0;
padding-left: 0;
margin-top: 5px;
padding-bottom: 2px;
}

.nav-link {
margin-left: 0;
padding-left: 0;
margin-top: 5px;
padding-bottom: 2px;
color: rgba(255, 255, 255, 0.55);
}
.nav-link:hover {
color: var(--third);
}

/* ---------------- Progress bar ---------------- */
.scroll-progress {
z-index: 99;
width: 0%;
height: 3px;
background-color: #5bc0de;
position: fixed;
top: 80px;
left: 0;
}