.top-bar {
    height: min-content;
    width: 100%;
    position: fixed;
    background-color: white;
    z-index: 10;
    border-bottom: 1px solid black;
}

.menu-page-description {
    float: right;
    font-weight: 300;
    margin-right: 0;
    cursor: default;
}



.project-page {
    z-index: 1;
    
    position: relative;
    width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        margin-top: 115px;
        
        padding-bottom: 30px;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px;
    gap: 30px;


}

.wrapper {
    view-timeline-name: --logo-size;
}

.logotype-container {
    animation: size-change linear both 1s ;
	animation-timeline: scroll();
    width: 250px;
}


@keyframes size-change {
	0%  { width: 250px; }
    
    80% { width: 150px; }
    100% { width: 150px; }
}


.menu-1 {
    
    animation: menu-font-change linear both 1s ;
    animation-timeline: scroll();
    
}

@keyframes menu-font-change {
	0%{ color: var(--primary-color); height: auto; margin-top: 20px; }
    15% { color: var(--primary-color); height: auto; margin-top: 20px; }
	25% { margin-top: 10px;}
	50% {  height: 10px; margin-top: 5px; pointer-events: none; color: white; }
	75% {  height: 5px; margin-top: 0px; color: white; }
    90% { height: 0px; margin-top: 0px; color: white;}
    100% { height: 0px; margin-top: 0px; color: white;}
}


.menu-link a {
    
    animation: menu-link-change linear both 1s ;
    animation-timeline: scroll();
    
}



@keyframes menu-link-change {
	0%{ pointer-events: all; color: var(--primary-color);}
    15% { pointer-events: all; color: var(--primary-color); }
	25% { pointer-events: all; }
	50% { pointer-events: none; color: white;}
	75% { pointer-events: none; color: white;}
    100% { pointer-events: none;color: white;}
}

.menu-1  .menu-link:hover a {
    color: blue;
}

.menu-link:hover a {
    
    animation: menu-link-change-hover linear both 1s ;
    animation-timeline: scroll();
    
}


@keyframes menu-link-change-hover {
	0%{ pointer-events: all; color: blue;}
    15% { pointer-events: all; color: blue; }
	25% { pointer-events: all; }
	50% { pointer-events: none; color: white;}
	75% { pointer-events: none; color: white;}
    100% { pointer-events: none;color: white;}
}




/* WRAPPER
.wrapper {
    animation: background-colour-change linear both 1s ;
    animation-timeline: scroll();
    

    }
  


@keyframes background-colour-change {
	
    0% { background-color: white;}
    75% { background-color: black;}
    100% { background-color: black;}

}

body {
    color: white;
}


body {
    animation: body-colour-change linear both 1s ;
    animation-timeline: scroll();
    

    }
 WRAPPER end */





.bypass-logotype path,
.bypass-logotype polygon   {
    animation: bypass-colour-change linear both 1s ;
    animation-timeline: --logo-size;
}

svg  {
    animation: bypass-colour-change linear both 1s ;
    animation-timeline: --logo-size;
}

@keyframes bypass-colour-change {
	-15%{ pointer-events: all; }
    15% { pointer-events: all;  }
	25% { pointer-events: all; }
	50% {  pointer-events: none;}
	75% { pointer-events: none; }
    99% { pointer-events: none; }
}




@media only screen and (max-width: 900px) {
   .menu-page-description {
    visibility: hidden;
   }

   .project-page {
    margin-top: 150px;
    display: flex;
    flex-direction: column;
   }
}



.newsletter-horizontal-scroll {

    grid-column: 1 / span 6; 
    grid-row: 1 / span 1; 
    height: fit-content;

    
}



.project-header {
    font-family: var(--menu-font-family);
    font-weight: 300;
    font-size: var(--font-size-medium);
    color: var(--primary-color);
}

.project-details {
    font-family: var(--menu-font-family);
    font-weight: 300;
    font-size: var(--font-size-medium);
    color: var(--primary-color);
}