.nav-tooltip{
  position:fixed;
  pointer-events:none;
  transform:translate(-50%, -8px);
  white-space:nowrap;
  background:rgba(0,0,0,.85);
  color:#fff;
  padding:.4rem .7rem;
  border-radius:999px;
  font:12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  opacity:0;
  transition:opacity .18s ease, top .18s ease, left .18s ease;
  z-index:1000;
}
.nav-tooltip.show{ opacity:1; }
@media (max-width: 700px){
  .nav-tooltip{ display:none; } /* optional: hide on small screens */
}


.more-detail.plus {
  cursor: zoom-in;   /* looks like a + */
}

.more-detail.minus {
  cursor: zoom-out;  /* looks like a - */
}

.wrapperProjects {
    width: 75%;
    margin: auto;
}


.avatar-image {
    transition: 600ms ease;
}

.avatar-image:hover {
    opacity: 0.8;
}
.avatar-mobile {
    display: none;
}



.column-links {
    display: flex;
    flex-direction: row;
    grid-gap: 20px;
}
.column-inner {
    grid-gap: 20px !important;
}

.column-inner-box {
    display: flex;
    flex-direction: column;
}


.keywords {
    grid-gap: 14px !important;
}

.keywords small {
    border: 2px solid black;
    border-radius: 20px;
    width: fit-content;
    padding: 2px 8px
}

.avatar {
    display: flex;
    grid-gap: 10px;
    position: absolute;
    bottom: 40px;
    z-index: 999999999;
}

.avatar-image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
}


.avatar-text {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
}

.avatar-text-inner {
    position: relative; /* Positioning context for the pseudo-element */
    background: white;
    color: black;
    padding: 10px;
    opacity: 0.5;
    width: fit-content;
    text-align: left;
-webkit-border-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomleft: 0;
border-radius: 10px 10px 10px 0px;
}


.avatar-notification {
    position: absolute;
    border-radius: 50%;
    background: red;
    min-width: 20px;
    min-height: 20px;
    text-align: center;
    z-index: 999999999;
}
.hidden-notification {
   display: none !important;
   transition: 500ms ease;
}

#follow-text {
      position: fixed; /* Keep it fixed relative to the viewport */
      font-size: 20px;
      font-weight: bold;
      color: #333;
      pointer-events: none; /* Make sure the text doesn't interfere with cursor events */
      transition: transform 500ms ease; /* Optional smooth movement */
      z-index: 999999999;
      color: white;
      padding-left: 10px;
    padding-right: 10px;
    color: black;
    border-radius: 20px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

#follow-text small {
    font-size: 4vh;
}

.svg-wrapper {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: none !important;
}

.svg-wrapper svg {
    width: 40vh;
    height: auto;
}
.projects-overview-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}

.col-3 {
    display: flex;
    flex-direction: row;
    grid-gap: 20px;
}

.col-3 img {
    width: 10%;
    height: fit-content;
    border-radius: 10px; 
}


.projects-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    justify-content: space-between;
}


.box {
  border-radius: 5px;
  transition: 100ms;
}



footer {
  position: relative;
}


.projects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    transition: 500ms;
    padding-bottom: 20px;
    transition: 200ms !important;
}


.dossier {
    min-height: 20px;
    text-align: center;
    display: grid;
    align-items: center;
    padding-bottom: 0;
    cursor: default !important;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    z-index: -999;
    opacity: 0;
    width: 0 !important;
}

.full-height {
    min-height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0vh;
    cursor: default !important;
    flex-direction: column;
}

.end {
        min-height: auto !important;
        text-align: center;
        padding-top: 14vh;
}

.text-center {
    justify-content: center;
    z-index: -9999;
}




.boxProjects {
    width: 100%;
    height: min-content;
    border-radius: var(--padding) !important;
    background: white;
    transition: 600ms ease;
    margin: auto;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.chapter {
    background: black;
    padding: 10px 15px;
    border-radius: 10px;
}

.box-headline {
    grid-area: headline;
    display: none;
    grid-column: span 2;
    grid-row: 1;
}


.a {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    height: fit-content;
    grid-column: auto !important;
    width:fit-content;
    background: ;
    border-radius: 10px;
    align-items: baseline;
    position: fixed;
    left: 20px;
    bottom: 20px;
    grid-gap: 10px;
}

.b {
   display: none;
   height: 100%;
   flex-direction: row !important;
}

.c {
    display: none;
    height: 100%;
}


.b {
    display: none;
}

.show {
    display: flex;
    opacity: 1;
        flex-direction:column;
        grid-gap: 30px;
}

.info-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition:  1s;
        transition: all 0.5s ease;
    --size: 200px;
    opacity: 0.4;
    fill: white;

    border-radius: 50%;
    animation: floating 4s ease-in-out infinite;
}


.detailinfo {
    color: white;
    fill: white !important;
    cursor: pointer;
    margin-left: auto;
}

.detailinfo:hover {
    opacity: 0.8;
}

.grid-icon {
    color: white;
    fill: white !important;
    cursor: pointer;
    height: 15px;
    margin-left: auto;
}

.grid {

}

.box-double {
    display: flex;
    flex-direction: row;
    grid-gap: 20px;
}

.boxProjectsInfo {
        width: 80px;
    height: 80px;
    border-radius: 50%;
    position: fixed;
    left: -120px;
    bottom: 50%;
    transition:  1s;
        transition: all 0.5s ease;
    --size: 200px;
    background-color: black;
    border-radius: 50%;
    animation: floating 4s ease-in-out infinite;

    background-image: linear-gradient(
        to bottom,
        black 0%,
        grey 5%,
        black 10%,
        grey 36%,
        black 59%,
        grey 71%,
        black 84%,
        black 100%
    );
    border-radius: 50%;
    filter: drop-shadow(0 0 2rem black);
    animation: floating 4s ease-in-out infinite;
    z-index: 999999999999;
    display: none;
}

@keyframes floating {
    from {
        transform: translate(0, 0px);
    }
    65% {
        transform: translate(0, 10px);
    }
    to {
        transform: translate(0, -0px);
    }
}

#boxmedium {
    grid-column: span 2;
}

#boxbig {
    grid-column: span 3;
}

#boxsmall {
    grid-column: 1 / 1;
}

#boxempty {
}

.imageProjects {
  position: relative;
  transition: 2s;
}

.imageProjects img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0 !important;
  background: linear-gradient(to right, #444444, black, #989898);

}

.imageProjects img.active {
  opacity: 1 !important;
}



.active {
    opacity:1 !important;
}



/* Define the slideIn animation */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply a delay to each .dossier-link element */
.letters:nth-child(2) {
    animation-delay: 0.1s;
}
.letters:nth-child(7) {
    animation-delay: 0.3s;
}
.letters:nth-child(12) {
    animation-delay: 0.5s;
}
.letters:nth-child(17) {
    animation-delay: 0.7s;
}



.project-headline {
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
    justify-content: center;
    text-align: left;
    color: white !important;
    border-radius: 10px;
    width: fit-content;
    height: fit-content;
    padding: 5px 10px;
    background: #ff4314;
}


.project-headline-long {
    display: flex;
    flex-direction: row;
    padding: 5px 10px;
    grid-gap: 10px;
    justify-content: center;
    text-align: left;
    color: white !important;
    border-radius: 10px;
    width: max-content;
    height: fit-content;
    background: black;
}


.project-year {
    background: yellow;
    padding: 5px 10px;
    border-radius: 10px;
    color: black;
    width: fit-content;
}





.more-detail {
    cursor: pointer !important;
    align-items: center;
    justify-content: center;
    display: flex;
}

.pdfHeadline {
    display: flex;
    flex-direction: row;
    grid-gap: 10px;
}

.intro {
    height: 600px;
    background: red;
}


.links-wrapper {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
}


.fill-height {
    top: 0;
  height: -webkit-fill-available !important; /* Chrome, Safari */
  height: fill-available !important;         /* Firefox */
}


.links {
    width: fit-content;
    text-align: left;
    width: fit-content;
    text-align: left;
    text-decoration: underline !important;
    color: white !important;
}

.projects-info {
    display: none;
    position: fixed;
    bottom: 0px;
    left: 0;
    padding: 20px;
    border-radius: 20px;
    align-items: flex-end;
    justify-content: center;
    opacity: 1;
    transition:  opacity 100ms ease;
    flex-direction: column;
    width: -webkit-fill-available;
    width: -moz-available;
    grid-gap: 20px;
    transition: 1s;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr 1fr auto;
    z-index: 90000000;

}


.dossier-info  {
    background: none !important;
}
.projects-hashtags {
    display: flex;
    flex-direction: row;
    grid-gap: 20px;
}

.title-box {
    grid-area: title-box;
}

.facts-box {
  grid-area: facts-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}


.intro-text-box {
  grid-area: intro-text-box;
}



.call-to-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    padding-top: var(--padding);
}


.lazyload {
  background: transparent url('loading-spinner.gif') center center no-repeat;
}



#activeText {
    top: 16vh;
    left: 20px;
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    height: min-content;
    justify-content: space-around;
    transition: 2s;
    align-items: center;
    justify-content: center;
    margin: inherit;
    position: fixed;
    transition: 1s ease;
}


#projectNavWrapper {
    right: 0px;
    display: flex;
    flex-direction: column;
    text-align: left;
    grid-gap: 10px;
    display: flex;
    cursor: pointer;
    z-index: 9999;
    justify-content: center;
    border-radius: 20px;
    position: fixed;
    align-items: end;
    opacity: 0;
    transition: 0.4s;
    top: 20px;
    bottom: 20px;
    right: 20px;
}

#projectNav {
  display: flex;
  flex-direction: column;
    text-align: center;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    vertical-align: middle;
    align-items: end;
    height: 100vh;
}


#projectNav a {
    border: skyblue 1px solid;
    border-radius: 50%;
    transition: 200ms ease;
    min-width: 4px;
    height: 4px;
    margin-right: 4px;
    margin-left: 4px;
    line-height: 120%;
    font-size: 0.9vw;
}


#projectNav a:hover {
    transform: scale(1.3);
    background-color: #ff4314;
}


#projectNav .highlight {
  color: black; /* Change the color to your desired highlight color */
border: white 2px solid;
    border-radius: 50%;
    transform: scale(1.1);

}

.dossier-link {
    border: none !important;
    transition: 500ms;
    min-width: 20px !important;
    display: flex !important;
    justify-content: center;
    background: none !important;
}

.dossier-link .highlight {
  color: none !important; /* Change the color to your desired highlight color */
border: none;
    border-radius: 0%;
    color: red !important;

}




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



    .text-center {
        transform: rotate(95deg);
    }

    .text-center h1 {
                font-size: 14vh;
    }
    
    #projectNav a {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .avatar-mobile {
    display: flex;
    grid-gap: 10px;
    position: fixed;
    bottom: 60px;
    z-index: 999999999;
    flex-direction: column;
    width: fit-content;
        margin: 20px;
        filter: drop-shadow(11px 15px 22px #000000);
}



.avatar-text {
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}


    .avatar-image  {
    width: 60px;
    height: 60px;
}

    .avatar-image img {
    width: 60px;
    height: 60px;
}

.avatar {
    grid-gap: 10px;
    align-items: flex-start;
}



.a {
    grid-area: teaser;
    text-align: center;
    justify-content: center;
    grid-column: auto !important;
    position: unset !important;
    transform: none !important;
}

.c {
    grid-area: description;
    text-align: center;
    display: none;
}


.b {
    grid-area: keywords;

}


.end {
    padding-bottom: 14vh;
    height: 60vh;
    align-items: center;
    display: flex;
    padding: 0;
}

.wrapperProjects {
    padding-top: 18vh;
    width: auto !important;
}

.show {
    text-align: left !important;   
}



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


#follow-text {
opacity: 0 !important;
}

}