@font-face{
		font-family: "Geist";
		src: url('/fonts/geistvariablevf.woff2') format("woff2 supports variations"),
				url('/fonts/geistvariablevf.woff2') format("woff2-variations");
				font-size: 100 1000;
	}

	:root {
		--color-dominant: #000FFF;
		--color-primary: #FF6F6F;
		--color-accent: #FFF000;
		--color-base: #FFFFFF;
		--color-base-acc: #FFFFFA;
		--color-base-inv: #000333;
		--color-base-acc-rgb: 255,255,250;
		--color-accent-rgb: 255,240,0;
		--color-base-rgb: 255,255,255;
		--color-base-inv-rgb: 0,3,51;
		--color-dominant-rgb: 0,15,255;
		--color-primary-rgb: 255, 111, 111;
		--font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu","Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans;
		}

	*{
		margin:0;
		padding:0;
	}

	::selection {
		  background: var(--color-accent);
		  color:var(--color-base-inv);
		}

	[data-tooltip] {
	  position: relative;
	  border-bottom: 2px solid rgba(var(--color-dominant-rgb), 0.4);
	  cursor: help
	}

	[data-tooltip]::after {
	  position: absolute;
	  opacity: 0;
	  pointer-events: none;
	  content: attr(data-tooltip);
	  left: 0;
	  top: calc(100% + 10px);
	  border-radius: 8px;
	  box-shadow: 0 2px 8px 2px rgba(var(--color-dominant-rgb), 0.2);
	  background-color: var(--color-base);
	  z-index: 10;
	  padding: 12px;
	  width: 300px;
	  transform: translateY(-20px);
	  transition: all 150ms cubic-bezier(.25, .8, .25, 1);
	}

	[data-tooltip]:hover::after {
	  opacity: 1;
	  transform: translateY(0);
	  transition-duration: 300ms;
	}

	html {
	  scroll-behavior: smooth;
	  background-image: url(img/static.gif);
	  background-color: #f4f4f0;

	}

		body {
		    margin: 0;
		    font-family: 'Geist', Helvetica, Arial, sans-serif;
		    font-size: calc(20px + 0.208vw);
		    line-height: 1.6;
		    --webkit-font-smoothing: antialiased;
		    font-weight: 400;
		    color: var(--color-dominant);
		    letter-spacing: -0.2px;
		    background: rgba(var(--color-base-acc-rgb), 0.95);
		    margin: 0 auto;
		    overflow-x: hidden;
		    scroll-behavior: smooth;
		    cursor: url(img/hover.png), auto;
		}

		.hv-blk{
			cursor: url('img/hover-block.png'), pointer;
		}

		.hv-arrow{
			cursor: url(img/hov-label.png), pointer;
		}

		#loading {
		  position: fixed;
		  display: block;
		  width: 100%;
		  height: 100%;
		  top: 0;
		  left: 0;
		  text-align: center;
		  opacity: 0.7;
		  background-color: #fff;
		  z-index: 99;
		}

		#loading-image {
		  position: absolute;
		  top: 100px;
		  left: 240px;
		  z-index: 100;
		}

		.hide{
			display: none;
		}


		h1{
			font-size: 10vw;
			line-height: 1.1;
			font-family: Geist;
			text-transform: none;
			color:var(--color-dominant);
			padding-bottom: 8vw;
			font-weight: 400;
		}

		
		h1.title-link{
			cursor: pointer;
		}

		h1.title-link:hover{
			color:var(--color-base-inv);
			text-decoration: underline;
			text-decoration-thickness: 1vw;
			text-underline-offset: 1vw;
		}

		h1.title-link a{
			text-decoration: none;
			color: inherit;
		}

		a.a-h1 {
		    color: rgba(var(--color-dominant-rgb), 1);
		    transition: color 0.4s ease-in-out;
		}

		a.a-h1:hover {
		    color: rgba(var(--color-base-inv-rgb), 1);
		}

		a.a-h1:hover div.hide {
		    display: visible;
		    width: 200px;
		    position: relative;
		    background: red;
		}

		a.a-h1:hover:after{
			content: 'with +10 years of experience in digital products, covering roles in research, product and design (UI/UX, Visual & HTML/CSS).';
		    padding: 20px 24px;
		    background: rgba(var(--color-base-rgb), 0.98);
		    color: rgba(var(--color-base-inv-rgb), 1);
		    border-radius: 16px;
		    position: absolute;
		    width: 300px;
		    display: inline-flex;
		    margin-left: calc((-4.164vw) - 300px);
		    margin-top: 5vw;
		    font-size: 18px;
		    line-height: 1.4;
		    z-index: 4;
		    text-align: left;
		    box-shadow: 0 1px 8px 0px rgba(var(--color-base-inv-rgb), 0.4);
		    rotate: -2deg;
		    transition: all 1s ease-in-out;
		    border: 1px solid rgba(var(--color-base-inv-rgb), 0.8);
		}




		h1, h2, h3{
			hyphens: auto;
			-webkit-hyphens: auto;
			font-family: "Geist", var(--font-fallback);;
		}

		h2, h3{
			line-height: 1.1;
			font-family: Geist;
			text-transform: none;
			color:var(--color-dominant);
			padding-bottom: 40px;
			font-weight: 400;
		}

		h2{
			font-size: 4em;
			padding-bottom: 0;
		}

		h3{
			font-size: 2.166em;
			padding-bottom: 0;
		}

		h4{
		    font-size: 1.4em;
		    line-height: 1.2;
		    font-weight: 400;
		    padding-bottom: 0;
		}

		p{
			font-size: 0.8em;
			hyphens: manual;
			-webkit-hyphens: manual;
			line-height: 1.4;
		}

		p.paragraph{
			margin-bottom: 8vw;
		}

		ol {
		    counter-reset: foo;
		    display: flex;
		    flex-direction: column;
		    gap: 12px;
		}

		ol > li {
		    counter-increment: li;
		    display: inline-flex;
		    gap: 12px;
		}

		ol > li::before {
		    content: "→";
		    display: table-cell;
		    text-align: left;
		    padding-right: 0;
		    min-width: 20px;
		    opacity: 40%;
		}

		ol.li-out > li{
			list-style-position: inside;
		}

		.mt-m{
			margin-top: 40px !important;
		}
		.mt-l{
			margin-top: 80px !important;
		}
		.mt-xl{
			margin-top: 140px !important;
		}
		.mb-m{
			margin-bottom: 40px;
		}

		.pt-l{
			padding-top: 80px !important;
		}

		.mb-l{
			margin-bottom: 80px !important;
		}
		.mb-xl{
			margin-bottom: 140px !important;
		}

		.mb-xxl{
			margin-bottom: 280px;
		}
		.hy-manual{
			hyphens: manual !important;
			-webkit-hyphens: manual;
		}
		.mza{
			margin: 0 auto;

		}

		.opacity-6{
			opacity: 60% !important;
		}

		/** Filter Buttons **/


						.container {
						  overflow: hidden;
						}

						.filterDiv {
						  display: none; /* Hidden by default */
						}

						/* The "show" class is added to the filtered elements */
						.show {
						  display: block;
						}

						/* Style the buttons */
						.btn {
						 	cursor: pointer;
						 	padding: 8px 16px;
						    border: 1px solid rgba(var(--color-dominant-rgb), 0.4);
						    background: rgba(var(--color-base-rgb), 0.4);
						    border-radius: 16px;
						    font-size: 0.72em;
						    font-family: inherit;
						    line-height: 1.6;
						    transition: all 0.2s ease-in-out;
						    color: rgba(var(--color-dominant-rgb),1);
						}

						.btn span {
						    margin-left: 8px;
						    opacity: 72%;
						    font-weight: 400;
						}

						/* Add a light grey background on mouse-over */
						button.btn:hover, button.btn:active {
						  background: rgba(var(--color-dominant-rgb),0.8);
						}

						/* Add a dark background to the active button */
						.btn.active {
						  background: rgba(var(--color-dominant-rgb),0.8);
						  color: rgba(var(--color-base-rgb),1);
						}
					


		/** LIGHTBOX MARKUP **/

				.endorsement-card > .quote {
				    min-height: 100px;
				}

				a.btn-icon {
				    padding: 16px;
				    background: rgba(var(--color-base-inv-rgb),0);
				    height: 32px;
				    width: 32px;
				    margin: 0 auto;
				    line-height: 32px;
				    text-align: center;
				    align-self: center;
				    border-radius: 100%;
				    color: var(--color-base);
				    transition: all 0.1s ease-in-out;
				}
				a.btn-icon:hover{
					background: rgba(var(--color-base-rgb),0.2);
				}

				.cardfade{
					animation: 0.4s fadeIn;
				    animation-fill-mode: both;
				    visibility: hidden;
				}


				.lightbox {
				  /* Default to hidden */
				  display: none;
				  /* Overlay entire screen */
				  position: fixed;
				  z-index: 9999;
				  top: 0;
				  left: 0;
				  right: 0;
				  bottom: 0;
				  /* A bit of padding around image */
				  padding: 3em;
				  /* Translucent background */
				  background: rgba(var(--color-dominant-rgb),0.6);
				  backdrop-filter: blur(12px);
				  -webkit-backdrop-filter: blur(12px);
				  transition: all 0.2s ease-in-out;
				}

				/* Unhide the lightbox when it's the target */
				.lightbox:target {
				  display: flex;
				  align-items: center;
				  text-align: left;
				  padding: 0;
				}

				.lightbox-group{
					display: flex;
					flex-direction: row;
					height: fit-content;
					gap: 24px;
				}
				.lightbox span {
				  /* Full width and height */
				  display: flex;
				  margin: 0 auto;

				  /* Size and position background image */
				  background-position: center;
				  background-repeat: no-repeat;
				  background-size: contain;
				}

				div.light-description{
					    min-width: 200px;
					    color: var(--color-base) !important;
					    font-weight: 300;
					    display: flex;
					    font-size: 32px;
					    flex-direction: column;
					    justify-content: space-between;
					    max-width: 320px;
				}

				.light-description p{
					border-left:none !important;
				}

				div.light-description p, div.light-description ul li, div.light-description a{
					    font-size: calc(14px + 0.6vw) !important;
					    color: var(--color-base) !important;
					    padding: 0 !important;
					    line-height: 1.34;
				}

				.lightbox-group img {
				    max-width: 1400px;
				    max-height: 700px;
				    mix-blend-mode: normal !important;
				}

				.light-description img {
				    border-left: none;
				}

				div#ltb1, div#ltb1 .img-completa{
					width: 100%;
				}


				div#ltb1,#ltb2,#ltb3,#ltb4,#ltb5,#ltb6,#ltb7,#ltb8,#ltb9,#ltb10{
					display: flex;
					box-shadow: 0 0 0 0px rgba(var(--color-dominant-rgb),0);
					
				}
				div.ltb-hover:hover a.dpf{
				    transition: all 0.3s ease-in-out;
				    transform: scale(1.02);
				    mix-blend-mode: multiply;
				}

				.dpf{
					display:flex ;
				}

				a.close-lightbox {
    				position: absolute;
				    right: 16px;
				    color: rgba(var(--color-base-rgb),1);
				    top: 16px;
				    font-size: 20px;
				    font-weight: 200;
				    text-align: right;
				    padding: 24px;
				    line-height: 16px;
				    transition: all 0.3s ease-in-out;
				    background: rgba(var(--color-base-rgb),0.1);
				    border-radius: 100%;
				}
				a.close-lightbox:hover{
					color: rgba(var(--color-base-rgb),1);
					background: rgba(var(--color-base-rgb),0.2);
					text-decoration: none;
				}
				a.lightbox-btn{
					color: var(--color-base);
				    text-decoration: underline;
				    transition: none !important;
				    box-shadow: none !important;
				}

/** LIGHTBOX MARKUP ENDS**/

		div.body-container-light {
			background: var(--color-base);
			color: var(--color-base-inv);
		}

		div.body-container-dark {
			background: var(--color-base-inv);
			color: var(--color-base);
		}

		div.body-container-dominant {
			background: var(--color-dominant);
			color: var(--color-base);
		}

		a.inactive{
			cursor: default;
			opacity: 50%;
			text-decoration: line-through;
		}
		a.inactive:hover{
			color: inherit;
		}

		section#hero-ucd div p a{
			color: var(--color-base);
			text-decoration: none;
			border-bottom: 1px solid var(--color-base);
		}

		section#hero-ucd div p a:hover{
			color: var(--color-primary);
			border-bottom: 3px solid var(--color-primary);
		}


		.divider{
			padding-bottom: 12px;
			border-bottom: 2px solid;
		}
		.p-xl{
			padding: 40px 24px;
		}
		.bor-r-32{
			border-radius: 32px;
		}
		.bor-r-16{
			border-radius: 16px;
		}
		.bor-r-12{
			border-radius: 12px;
		}

		footer{
		    color: var(--color-dominant);
		    margin: auto;
		    display: block;
		    justify-content: space-between;
		    align-items: end;
		}
		footer div{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: center;
			gap: 20px;
		}

		footer h3 a {
			color: rgba(var(--color-dominant-rgb),0.4);
		}
		footer a{
			text-decoration: none;
			color: rgba(var(--color-dominant-rgb),1);
			cursor: pointer;
			transition: all 200ms ease-in-out;
		}

		.fcol{
			display: flex;
			flex-wrap: wrap;
			gap: 40px;
			line-height: 1;
			color: var(--color-dominant-rgb);
		}

		footer a:hover, footer a:hover span  {
			color: rgba(var(--color-base-inv-rgb),1);
		}
		footer a span{
			color: rgba(var(--color-dominant-rgb),1);
		}

		footer p{
			color:rgba(var(--color-dominant-rgb),0.8);
		}

		

		ul li{
			list-style: none;
		}

		div.thecontent {
		    width: 100%;
		    padding-bottom: 4vw;
		    
		    margin: 0 auto;
		}

		.mw{
			max-width: 1000px;
		}


		section#menu {
		    padding: 0 24px;
		    margin: 0 auto;
		    position: sticky;
		    top:0;
		    z-index: 8888;
		    background: rgba(var(--color-base-acc-rgb), 0.1);
		    backdrop-filter: blur(1.6px);
		    -webkit-backdrop-filter: blur(1.6px);
		    border-bottom: 1px solid rgba(var(--color-base-acc-rgb),0.4);
		}


			nav{
			width: 100%;
		    justify-content: space-between;
		    display: inline-flex;
		    padding-top: 12px;
			color: var(--color-base);
				}

				nav ul{
					list-style: none;
				    text-decoration: none;
				    text-align: right;
				    width: calc(100% - 137px);
				    display: flex;
				    line-height: 48px;
				    justify-content: flex-end;
				    gap: calc(2vw + 20px);
				}

				nav div#jalkh-logo{
					max-width: 300px;
					width: 100%;
					display: inline-flex;
				}

				nav div#jalkh-logo svg{
					height: 100%;
				}

				nav div#jalkh-logo svg path{
					fill: var(--color-base-inv);
					transition-timing-function: ease-in-out;
					transition: 0.2s;
				}

				nav a:hover div#jalkh-logo svg path{
					fill: var(--color-base-inv);	
				}


				nav ul li{
					display: flex;
				    line-height: 52px;
				    color: var(--color-dominant);
				}

				nav ul li i{
					font-size: 24px;
				}

				nav ul li:last-child {
				    margin-right: 0;
				}

				nav ul li:last-child::before{

				}

					nav ul li a{
						transition: color 0.25s ease-in-out;
						color: var(--color-base);
						text-decoration: none;
					}


					nav.light ul li a{
						color: rgba(var(--color-dominant-rgb),1);
					    width: 100%;
					    text-align: center;
					}

					nav.light div#jalkh-logo svg path{
					fill: var(--color-dominant);
				}

					nav ul li a:hover{
					color: var(--color-base-inv);
					}

					.dropdown {
					  position: relative;
					  display: inline-block;
					}

					.dropdown li span.drop-link{
						margin-right: 24px;
						cursor: pointer;
					}


					.dropdown-content p{
						padding: 12px 24px;
						line-height: 1.2;
					}

					.dropdown-content a:last-of-type p{
						margin-bottom: 0px;
					}

					nav.light ul div.dropdown-content a p{
		
						color: var(--color-dominant);
					    /* background: #fdfdf9; */
					    transition: all 0.2s ease-in-out;
					    font-size: 1em;
					    /* border: 1px solid rgba(var(--color-dominant-rgb), 0.6); */
					    border-radius: 12px;
					    /* box-shadow: 0 2px 8px -2px rgba(var(--color-dominant-rgb), 0.4); */
					    padding: 20px 40px;
					}

					nav ul div.dropdown-content a:hover p{
						color: var(--color-base);
					    background: rgba(var(--color-dominant-rgb), 0.86);
					    backdrop-filter: blur(5px);
					    border-color: var(--color-dominant);
					    -webkit-backdrop-filter: blur(5px);
					    box-shadow: 0 2px 8px -4px rgba(var(--color-dominant-rgb), 0.64);
					    text-align: center;
					}

					nav ul div.dropdown-content a p{
						color: var(--color-dominant);
					}



					.dropdown:hover .dropdown-content, .dropdown:active .dropdown-content {
					  padding: 32px;
					    display: flex;
					    flex-direction: column;
					    align-items: flex-end;
					    gap: 8px;
					    background: rgba(var(--color-base-rgb), 0.98);
					    border-radius: 24px;
					}
			
				.dropdown {
					  position: relative;
					  display: inline-block;
					}

					.dropdown li span.drop-link{
						margin-right: 0px;
					}

					span.icon{
						    width: 20px;
						    height: 20px;
						    margin-left: 2px;
						    transition: rotate 0.1s;
						    position: relative;
						    top: 15px;
						    line-height: 21px;
						    font-size: 20px;
						    text-align: center;
						    transition-timing-function: ease-in-out;
						    color: rgba(var(--color-dominant-rgb), 0.4);
					}

					.dropdown:hover li span.drop-link{
						color: var(--color-base-inv);
					}

					.dropdown:hover span.icon{
						rotate: 45deg;
					}


						.dropdown-content {
					        display: none;
						    position: absolute;
						    z-index: 9999;
						    width: max-content;
						    right: 0;
						    top: 48px;
						    text-align: right;
					}

					.dropdown-content a:last-of-type p{
						margin-bottom: 0px;
					}


section#title{
	position: relative;
	/*margin-bottom: 10vw;*/
}
	section#title h1 {
		    font-size: 10vw;
		    line-height: 1;
		    padding: 8vw 24px;
		    text-align: justify;
		    position: absolute;
		    z-index:1 ;
		    hyphens: manual;
		    -webkit-hyphens: manual;
		    color: rgba(var(--color-dominant-rgb), 0.6);
    		mix-blend-mode: multiply;
    		text-shadow: -3px 4px 10px rgba(var(--color-dominant-rgb),0.2);
			}

		section#title h1 span{
			 color: rgba(var(--color-dominant-rgb),1);
			 transition: color 0.4s ease-in-out;
		}

		section#title h1 span:hover{
			color: rgba(var(--color-base-inv-rgb),1);
		}

			.lines{
				    position: relative;
				    top: 11.64vw;
				    z-index: 0;
			}

			.lines div {
			    height: 4.92vw;
			    border-bottom: 1px solid rgba(var(--color-dominant-rgb),0.4);
			    margin-bottom: 4.82vw;
			    border-top: 1px solid rgba(var(--color-dominant-rgb),0.4);
			}

			.dp-n{
				display: none;
			}

	section#main {
	    width: calc(100% - 8.328vw);
	    margin: 0 auto;
	    padding: 10vw 0;
	    text-align: left;
	    z-index: 0;
	}

		section#context {
		    width: 100%;
		    margin: 0 auto;
		    padding: 0 0 4vw;
		    text-align: left;
		    z-index: 0;
		    display: flex;
		    gap: 40px;
		}
		.tag-group{
			display: flex;
			gap: 12px;
		}

		p.tags{
			color: rgba(var(--color-dominant-rgb),0.4);
		    display: inline-flex;
		    text-transform: uppercase;
		    letter-spacing: 2px;
		    border-radius: 8px;
		    font-size: 0.833em;
		    text-align: center;
		    transition: color 0.2s ease-in-out;
			width: max-content;
		}

		.space-l-btm {
		    padding-bottom: 120px;
		}

		div.img-full{
		}

		div.img-full p{
			font-size: calc(14px + 0.1vw);
		    line-height: 1.4;
		    margin-top: 16px;
		    padding-left: 16px;
		    color: rgb(var(--color-base-inv-rgb),0.4);
		    border-left: 2px solid rgba(var(--color-dominant-rgb),0.4);
		}

		div.img-full img{
			width: 100%;
			height: auto;
			overflow: hidden;
			mix-blend-mode: multiply;
		}

		p.headline{
			color: rgba(var(--color-dominant-rgb),0.8);
			font-size: 0.8em;
			padding-bottom: 4px;
		}
		.side-p-24{
			padding-right: 24px;
			padding-left: 24px;
		}

		p.headline span{
			font-weight: 500;
			margin-right: 8px;
		}

		ul.list-dot li{
			list-style: circle;
			margin-left: 20px;
			color:var(--color-dominant);
		}


		section#context div:last-child{
			width:calc(60% - 20px);
		}

		section#context div:first-child{
			width:calc(40% - 20px);
		}

		section#about p br {
		    height: 1.4em;
		    content: '';
		    display: block;
		}

		br{
			display:block !important;
		}

		section#context div ul{
			margin-bottom:32px;
		}

		section#project-details, section#results {
		    margin: 80px auto 0;
		    padding: 40px 0 20px 0;
		    text-align: left;
		}


/* Case Studies Section  */

		a.project-card {
		    display: flex;
		    flex-flow: column;
		    padding: 32px;
		    align-items: center;
		    text-decoration: none;
		    color: rgba(var(--color-primary-rgb),1);
		    transition: all 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
		    border-bottom: none;
		    background: rgba(var(--color-dominant-rgb), 0);
		    background-blend-mode: multiply;
		    border-radius: 32px;
		    gap: 32px;
		    overflow: hidden;
		    max-width: none;
		    margin: 0 auto;
		}

					a.project-card.card1{
						 background: rgba(var(--color-dominant-rgb), 0.1);
					}
					a.project-card.card1:hover{
						background: rgba(var(--color-dominant-rgb), 0.3);
					}

					a.project-card.card2{
						background: rgba(var(--color-primary-rgb), 0.1);
					}

					a.project-card.card2:hover{
						background: rgba(var(--color-primary-rgb), 0.3);
					}

					a.project-card.card3{
						 background: rgba(var(--color-accent-rgb), 0.1);
					}
					a.project-card.card3:hover{
						background: rgba(var(--color-accent-rgb), 0.3);
					}

					a.project-card.card4{
						 background: rgba(var(--color-dominant-rgb), 0.1);
					}
					a.project-card.card4:hover{
						background: rgba(var(--color-dominant-rgb), 0.3);
					}

			.cover-container {
			    margin: auto 0;
			    width: 100%;
			    text-align: left;
			    display: flex;
			    flex-direction: row;
			    gap: 48px;
			    /* max-width: 800px; */
			    padding: 0;
			    background: none;
			    border-radius: 32px;
			    margin-bottom: 0;
			    aspect-ratio: auto;
			    justify-content: space-between;
			    background-blend-mode: multiply;
			    color:rgba(var(--color-dominant-rgb),1);
			}
					a.project-card:hover .cover-container {
					    background: none;
					    color:rgba(var(--color-base-inv-rgb),0.8);
					}	
					a.project-card:hover > .flex-row p, a.project-card:hover > .cover-btm p{
						 color:rgba(var(--color-base-inv-rgb),0.8);
					}	

				.cover-summary {
				    display: flex;
				    flex-direction: column;
				    gap: 2px;
				}

				.cover-img-group {
				    width: 100%;
				    /* background: green; */
				    max-width: 1048px;
				    display: flex;
				    height: auto;
				    position: relative;
				    /* height: 40vh; */
				    margin: 0 auto;
				}

				.cover-btm{
					width: 100%;
				}
				.flex-row {
				    display: flex;
				    flex-direction: row;
				    justify-content: space-between;
				    width: 100%;
				    /* max-width: 784px; */
				}

				.row-linea {
					width: 100%;
			    	display: flex;
				}

				a.project-card:hover .cover-summary > h3, a.project-card:hover .cover-summary > p {
				    color: rgba(var(--color-base-inv-rgb),0.8);
				}

				.cover-summary p, .cover-summary h3 {
				    transition: all 0.8s;
				    padding-bottom: 0 !important;
				}

				/*Case Study Card 1*/

				.card1 .cover-img-group {
				    aspect-ratio: 1.6;
				    scale: 1;
				}

				.card1 img.cover-screen {
				    width: 100%;
				    position: absolute;
				    top: 0px;
				    /* height: fit-content; */
				    z-index: 1;
				    transition: all 0.3s ease-in-out;
				}
				.card1 img.cover-component {
				   position: absolute;
				    bottom: -5%;
				    z-index: 1;
				    scale: 0.64;
				    transition: all 0.4s ease-in-out;
				    max-width: 100%;
				}
				

				a.project-card.card1:hover .cover-container .cover-img-group img.cover-component {
				    position: absolute;
				    z-index: 2;
				    scale: 0.9;
				}

				a.project-card.card1:hover .cover-screen {
				    top: 8px;
				    scale: 0.64;
				    filter: blur(2.4px);
				}

				/*Case Study Card 2*/


				.card2 .cover-img-group {
				    aspect-ratio: 1.3;
				    scale: 0.9;
				    margin-top: -36px;
				}

				.card2 img.cover-screen {
				    width: 100%;
				    position: absolute;
				    top: 0px;
				    /* height: fit-content; */
				    z-index: 1;
				    transition: all 0.6s ease-in-out;
				    scale:0.8;
				}

				.card2 img.cover-component {
				   	position: absolute;
				    left: -10%;
				    top: 10%;
				    z-index: 1;
				    scale: 0.4;
				    transition: all 0.4s ease-in-out;
				    margin: 0 auto;
    				max-width: 100%;
    				width: 100%;
				}

				a.project-card.card2:hover .cover-container .cover-img-group img.cover-component {
				    position: absolute;
				    left: -4%;
				    top: -4%;
				    z-index: 2;
				    scale: 0.9;
				}

				a.project-card.card2:hover .cover-screen {
				    top: 8px;
				    scale: 0.6;
				    filter: blur(2px);
				    opacity: 80%;
				    mix-blend-mode: multiply;
				}

				/*Case Study Card 3*/

				.card3 .cover-img-group {
				    aspect-ratio: 1.6;
				    scale: 1;
				}

				.card3 img.cover-screen {
				    width: 100%;
				    position: absolute;
				    /* top: -50px; */
				    z-index: 1;
				    transition: all 0.3s ease-in-out;
				}
				.card3 img.cover-component {
				   	position: absolute;
				    z-index: 0;
				    transition: all 0.4s ease-in-out;
				    width: 100%;
				}

				a.project-card.card3:hover .cover-container .cover-img-group img.cover-component {
				    position: absolute;
				    scale: 0.7;
				    filter: blur(3px);
				    opacity: 40%;
				}

				a.project-card.card3:hover .cover-screen {
    				scale: 1.3;
    				margin-top: 30px;
				}

				/*Case Study Card 4*/

				.card4 .cover-img-group {
				    aspect-ratio: 1.6;
				    scale: 1;
				}

				.card4 img.cover-screen {
				    width: 100%;
				    position: absolute;
				    bottom: -6%;
				    z-index: 1;
				    transition: all 0.3s ease-in-out;
				}
				.card4 img.cover-component {
				   position: absolute;
				    bottom: -5%;
				    z-index: 1;
				    scale: 0.64;
				    transition: all 0.4s ease-in-out;
				}
				

				a.project-card.card4:hover .cover-container .cover-img-group img.cover-component {
				    position: absolute;
				    z-index: 2;
				    scale: 0.9;
				}

				a.project-card.card4:hover .cover-screen {
				        bottom: 3%;
   						scale: 1.2;
				}


/* Testimonials */

		.endorsements {
		    width: 160%;
		    display: flex;
		    gap: 20px;
		    height: 420px;
    		align-items: center;
		}

		.endorsements:first-child {
		    margin-left: 24px;
		}

		.endorsements:last-child {
		    margin-right: 24px;
		}

			a.endorsement-card {
			    color: var(--color-dominant);
			    line-height: 1.2;
			    background: rgba(var(--color-dominant-rgb), 0);
			    padding: 48px;
			    border-radius: 24px;
			    height: fit-content;
			    transition: all 0.3s ease-in-out;
			    border: 1px solid rgba(var(--color-dominant-rgb), 0.1);
			    max-width: 400px;
    			min-width: 360px;
			    width: 30vw;
			}

			a.endorsement-card:hover {
				transform: scale(1.04);
				background: rgba(var(--color-dominant-rgb), 0.16);
			}

			a.endorsement-card:hover .end-bottom {
				    transform: scale(1);
				}

			.end-bottom {
			    display: flex;
			    gap: 20px;
			    align-items: center;
			}

				.end-bottom img {
				    width: 80px;
				    transition: all 0.4s ease-in-out;
				}


		.lightbox-group .endorsement-card {
		    background: rgba(var(--color-base-rgb), 0.9);
		    max-width: 640px;
		    text-align: justify;
		    padding: 64px;
		    border-radius: 32px;
		}

		.endorsement-card p {
		    line-height: 1.3;
		}

		a.close-light {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    z-index: -1;
		}

		div#projects {
		    display: flex;
		    align-items: baseline;
		    padding-bottom: 12px;
		    gap: 20px;
		    justify-content: space-between;
		}

		div#projects p.headline {
		    min-width: 200px;
		}

		/* Loader styling */
		.loader {
			display: none;
		    border: 2px solid #f3f3f3;
		    border-top: 2px solid #000fff;
		    border-radius: 50%;
		    width: 16px;
		    height: 16px;
		    animation: spin 1s linear infinite;
		    margin: 0px auto;
		}

		/* Animation for spinning */
		@keyframes spin {
		    0% {
		        transform: rotate(0deg);
		    }
		    100% {
		        transform: rotate(360deg);
		    }
		}

		/* Message and loader container */
		.message-container {
		    align-items: center;
		    margin-bottom: 20px;
		    font-size: 0.64em;
		    /* width: 100%; */
		    padding: 8px 16px;
		    text-align: center;
		    margin: 0 auto -19px;
		    display: inline-flex;
		    background: rgba(var(--color-base-acc-rgb), 1);
		    border-radius: 12px;
		    box-shadow: 1px 1px 16px 0px rgb(0 15 255 / 20%);
		    gap: 12px;
		    z-index: 100;
		}

		/* Space between message and loader */
		.message-container #filterMessage {
		    margin-right: 0px;
		}

		.pill-group{
			gap:8px;
			flex-wrap: wrap;
			display: flex;
		}

		.pill-group a, .pill-group div{
	        padding: 8px 16px;
		    border: 1px solid rgba(var(--color-dominant-rgb), 0.4);
		    background: rgba(var(--color-base-rgb), 0.4);
		    border-radius: 16px;
		    font-size: 0.72em;
		}

		.pill-group a:hover{
			cursor: pointer;
			background: rgba(var(--color-dominant-rgb),0.2);

		}

		.project-summary{
			width: 100%;
		}


		a.summary-wrapper {
		    display: flex;
		    flex-flow: wrap;
		    gap: 40px;
		    padding: 64px 64px;
		    align-items: end;
		    text-decoration: none;
		    color: rgba(var(--color-dominant-rgb),1);
		    transition: all 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
		    cursor: url(img/hov-label.png), pointer;
		    border-bottom: 1px dashed rgba(var(--color-dominant-rgb), 0.4);
		}

		a.summary-wrapper:hover{
			background: rgba(var(--color-dominant-rgb),0.16);
			gap:48px;
			border-bottom: 1px dashed rgba(var(--color-dominant-rgb), 0.2);
		}

		a.summary-wrapper:hover h3, a.summary-wrapper:hover p{
			color: rgba(var(--color-dominant-rgb),1);
		}

		a.summary-wrapper:hover img{
			scale: 1.04;
			background: rgba(var(--color-base-rgb),1);
		}


			.summary-cover {
	            width: 100%;
			    max-width: 720px;
			    border-radius: 20px;
			    overflow: hidden;
			    display: flex;
			    align-items: center;
			    max-height: 600px;
			    min-height: 200px;
			}

				img.summary-img {
    			width: 101%;
    			margin-top: -1px;
    			transition: scale 0.6s ease-in-out;
    			background-attachment: normal;

			}

			.summary-content {
			    display: flex;
			    flex-direction: column;
			    margin: 32px 0 0 0;
			    max-width: 600px;
			    gap: 20px;
			    transition: all 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
			}

				.mb-s {
				    margin-bottom: 16px;
				}

			.summary-content-bottom {
			    justify-self: right;
			    display: flex;
			    gap: 20px;
			    width: 100%;
			    justify-content: space-between;
			    align-items: center;
			    padding: 20px 0;
			}

				.summary-tags {
				    row-gap: 0px;
				    display: flex;
				    flex-flow: wrap;
				    column-gap: 12px;
				    line-height: 32px;
				}
					.summary-tags > .headline {
						padding:0;
					}

				a.main-btn {
				    padding: 20px 40px;
				    background: rgba(var(--color-dominant-rgb), 0.1);
				    height: 40px;
				    height: fit-content;
				    color: var(--color-dominant);
				    text-align: center;
				    transition: all 0.3s ease-in-out;
				    border-radius: 16px;
				    line-height: 1.4;
				}

				a.main-btn:hover{
					background: rgba(var(--color-dominant-rgb),0.8);
					color: rgba(var(--color-base-rgb),0.9);
					transform:scale(1.05);
				}

				
		.linebreak {
		    width: 100%;
		    border-top: 2px solid rgba(var(--color-base-rgb),1);
		    padding-top: 80px;
		    margin-top: 40px;
		}

		div.next-cs {
		    transition: background 0.1s ease-in-out;
		    display: flex;
		    flex-direction: column;
		    gap:20px;
		    color: inherit;
		    align-self: center;
		    width:calc(50% - 20px);
		}


		section#other-cs{
			width: calc(100% - 48px);
			display: flex;
			flex-wrap:wrap;
			justify-content: space-between;
			margin: 0px 0 120px 0;
			border-top: solid 2px;
			gap:24px;
    		padding: 24px;
		}

		a.a-btn {
		    text-decoration: none;
		    padding: 40px;
		    width: calc(50% - 82px);
		    color: inherit;
		    display: flex;
		    border-bottom: 1px solid rgba(var(--color-dominant-rgb), 0.4);
		    font-weight: 400;
		    transition: background 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
		    gap: 40px;
		    flex-wrap: wrap;
		    text-align: left;
		}

		a.a-btn > img {
		    width: 100%;
		    max-width: 480px;
		    height: auto;
		}


		.full-w{
			width: 100% !important;
		}

		.calc-w{
			width: calc();
		}

		div.next-cs h3{
			padding: 0;
			color: var(--color-dominant);
			transition: color 0.4s ease-in-out;
		}

		div.next-cs > p{
			color: var(--color-dominant);
			transition: color 0.6s ease-in-out;
		}



		a:hover div.next-cs > h3,a:hover div.next-cs > p{
			color:var(--color-base);
		}



		a.a-btn:hover {
		    border-bottom: 1px solid rgba(var(--color-dominant-rgb), 1);
		    background: rgba(var(--color-dominant-rgb), 0.6);
		    background-blend-mode: multiply;
		}

		a.a-btn:hover .tags{
			color: rgba(var(--color-base-rgb),0.8);
		}


section#vnav {
    position: sticky;
    height: 0px;
    bottom: 0;
    z-index: 100;
}
section.ctr-cont{
	margin: 0 auto;
    padding: 40px 0 20px 0;
    text-align: left;
}


	section.index{
	}

			section.index div.index-comp {
			    display: inline-flex;
			    margin-top: -400px;
			    margin-left: 24px;
			    transition: margin-left 0.35s ease-in-out;
			}

			section.index div.index-comp:hover, section.index div.index-comp:active{
			margin-left: 24px;

			}

			section.index div.index-comp:hover ul.index-group, section.index div.index-comp:active ul.index-group{
			display: block;
			margin-top: 10px;
			}

			ul.index-group li{
			line-height: 30px;
			}

			section.index div.index-comp:hover ul.index-bars, section.index div.index-comp:active ul.index-bars{
				width: 30px;
			}

			section.index div.index-comp:hover ul.index-bars li.lev-2, section.index div.index-comp:active ul.index-bars li.lev-2{
			margin-left: 45%;
			margin-right: 0;
			}

			section.index div.index-comp ul.index-group li.level2{
			margin-left: 20px;
			}

			section.index div.index-comp:hover ul.index-group li.level2, section.index div.index-comp:active ul.index-group li.level2{
			margin-left: 0px;
			font-size: 16px;
			transition: margin-left 0.35s ease-in-out;
			}
			
			section.index div.index-comp ul{
				margin: 0 10px 0 0;
			}
				
				section.index div ul.index-bars{
					width: 15px;
					text-decoration: none;
					list-style: none;
					margin-top: 25px;
					transition: width 0.35s ease-in-out;
				}
					section.index div ul.index-bars li{
					height: 1.5px;
					background: var(--color-base);
					margin-bottom: 28.5px;
					border-radius: 0.5px;
				}


				section.index div ul.index-bars li.lev-1{
					width: 100%;
				}
				section.index div ul.index-bars li.lev-2{
					width: 55%;
					margin-right: 45%;
					transition: margin 0.35s ease-in-out;
				}


				section.index div ul {
				    text-decoration: none;
				    list-style: none;
				    padding: 0;
				    margin: 0;
				    font-size: 20px;
				    line-height: 1.1vw;
				    margin-left: 20px;
				    padding-bottom: 32px;
				}

				ul.index-group{
					display: none;
				}


				section.index div ul a.index-group:hover a li, section.index div ul a.index-group:active a li{
					display: none;
					color: rgba(var(--color-accent-rgb),1);
				}

				section.index div ul a li{
					list-style: none;
					color: rgba(var(--color-base-rgb),0);
					display: inline;
				}

				section.index div ul a{
					text-decoration: none;
					color: rgba(var(--color-base-rgb),1);
					display: block;
				}

				section.index div ul a:hover, section.index div.light-bg ul.index-group a:hover{
					color: var(--color-base-inv);
				}

					section.index div.light-bg ul.index-bars li{
					height: 1px;
					background: var(--color-dominant);
					margin-bottom: 28.5px;
					border-radius: 0.5px;
				}


					section.index div.light-bg ul.index-group a{
						color: var(--color-dominant);
					}

			section#about{
				padding: 120px 0;
			    line-height: 1.6;
			    width: 100%;
			    word-break: break-word;
			    text-align: justify;
			    hyphens: auto;
			    -webkit-hyphens: auto;
			    display: flex;
			    gap:80px;
			    align-items: center;
			    justify-content: space-between;
			}

			#about p{
				max-width: 37ch;
				margin-left: 9.4vw;
				padding-right: 56px;
				display: none;
			}

			#about p i{
				font-style: normal;
			}

			#about div{
				overflow: hidden;
			}


			#about div img{
				max-width: 1000px;
				height: auto;
				filter: invert(1);
				mix-blend-mode: multiply;
			}

			section#testimonials{
				display: flex;
				flex-direction: row;
				margin-bottom:64px;
				width: 100%;
				overflow-x: scroll;
				scroll-snap-type: x mandatory;
				border-top: 2px solid;
    			padding-top: 40px;
			}

			section#testimonials .section-container{
				display: flex;
			    flex-flow: row;
			    gap:20px;
			    overflow: visible;
			}

			.testimonial-box {
			    display: flex;
			    flex-direction: column;
			    justify-content: space-between;
			}

			a.card-link{
				padding: 80px 48px;
				width: 480px;
				display: flex;
				justify-content: space-between;
				border: 1px solid rgba(var(--color-dominant-rgb),0);
				transition: all 0.2s ease-in-out;
				background: rgba(var(--color-dominant-rgb),0.05);
			}
			div.hover-tag{
				display: none;
				width: 80px;
				height: 40px;
			}


			a.card-link h4.quote{
				text-overflow: ellipsis;
  				overflow: hidden;
  				line-height: 1.4;
  				text-wrap: balance;
  				text-align: justify;
			}

			div.author{
				margin-top: 40px;
				line-height: 1.1;
				font-weight: 600;
				letter-spacing: 2%;
			}

			div.author span{
				display: block;
				margin-top: 8px;
				font-weight: normal;
				letter-spacing: 0;

			}
a {
	text-decoration: none;
}
.str{
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

div.items-list{
	display: flex;
	flex-direction: column;
	width: calc(100% - 200px);
	gap:40px;
}

	div.item-li{
		display: flex;
		flex-wrap: wrap;
		gap:20px;
		line-height: 1.4;
		width: calc(50% - 20px);
	}
		div.icon-item{
			width: 52px;
		    height: 48px;
		    background: rgba(var(--color-dominant-rgb),0.2);
		    color: var(--color-base);
		    text-align: center;
		    line-height: 48px;
		    border-radius: 16px;
		}
		div.text-item{
			width: 100%;
			text-align: justify;
		}

#working h3 a{
	color: rgba(var(--color-dominant-rgb),0.4);
	transition: all 0;	
}

#working h3 a:hover{
	color: rgba(var(--color-base-inv-rgb),1);	
}

.bg-gif {
    background: rgba(var(--color-dominant-rgb),0.6);
    display: flex;
    overflow: hidden;
    mix-blend-mode: multiply;
}

.gif{
	mix-blend-mode: exclusion;
}



/*Chat*/
h2.color-clear{
	color:rgba(var(--color-dominant-rgb),0.4);
}

span.contact a{
	color:rgba(var(--color-dominant-rgb),0.4);
	transition: color 1s ease-in-out;
}

span.contact a:hover{
	color:rgba(var(--color-base-inv-rgb),1);
}


/*Gallery Playground*/
section#gallery {
					    width: 80%;
					    /* background: blue; */
					    /* height: 100vh; */
					    margin: 0 auto 80px auto;
					    display: flex;
					    flex-flow: column;
					    justify-content: space-between;
					    max-width: 1080px;
					}

						.gallery-desc {
						    width: 100%;
						    max-width: 480px;
						}

							.gallery-desc section#vnav{
								display: flex;
							}

								.gallery-desc section#vnav div.index-comp:hover, .gallery-desc section#vnav div.index-comp:active{
									background-color: inherit;
								}


								.gallery-desc section#vnav div.index-comp ul{
									margin-left: 0;
								}

							.gallery-group {
								    display: flex;
								    justify-content: flex-end;
								    flex-wrap: wrap;
							}

								.gall-col1, .gall-col2 {
								    display: flex;
								    flex-flow: column;
								    width: calc(50% - 12px);
								    /* background: blue; */
								    justify-content: normal;
								}

								.gall-col1 {
								    margin-right: 24px;
								}

									.item-g {
									    height: 100%;
									    margin: 0;
									    padding: 0;
									    margin-bottom: 22px;
									}

										.item-g > .img-thumb > img {
										    width: 100%;
										    margin: 0;
										    padding: 0;
										    border-radius: 16px;
										}

										.mxb-m {
										    mix-blend-mode: multiply;
										}

/*Highlights*/
.results-content ul {
    padding: 80px;
    background: rgba(var(--color-dominant-rgb),0.1);
}

.results-content ul li:last-child{
	margin-bottom: 0 !important;
}
ul.li-num li {
    display: list-item;
    list-style: lower-latin;
}

ul.li-num li h3 {
    hyphens: none;
    -webkit-hyphens: none;
    margin-left: 8px !important;
}



/* Case Studies Only */

.spotify-box{
	display: flex;
	padding: 40px;
    background: rgba(var(--color-dominant-rgb),0.05);
    gap: 20px;
    flex-wrap: wrap;
}

section#product {
    border-top: 1px solid;
    padding-top: 120px !important;
}

h2#projects{
	position: relative;
    animation: mymove 5s;
    animation-delay: -2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width: 80%;
    margin: 0 auto;
}

@keyframes mymove {
  from {left: -2vw;}
  to {left: 9vw;}
}

@keyframes infinito {
  from {left: 0%;}
  to {left: 90%;}
}

 #project-nav{
    margin-top: 40px;
    padding: 4px 6px 4px 6px;
	width: 99%;
	overflow: hidden;
	overscroll-behavior-x: none;
 }
 .infinito-cont{
 	display: flex;
    gap: 40px;
    flex-wrap: nowrap;
    position: relative;
    animation: infinito 20s cubic-bezier(0.35, 0.01, 0.54, 0.96);
    animation-delay: -8s;
    animation-iteration-count: 1;
    animation-direction: reverse;
    overflow: hidden;
 }

  #project-nav a:hover .tag-group .tags{
  	color: rgba(var(--color-dominant-rgb),1);
  }

  .tag-group.active .tags{
  	color: rgba(var(--color-dominant-rgb),1);
  }

  div.three-col{
  	background: rgba(var(--color-dominant-rgb),0.05);
  	padding:80px;
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-evenly;
  	gap:40px;
  }

  div.three-col div{
    width: calc(33% - 80px);
    min-width: 250px;
  }

  div.three-col div p{
    margin-bottom: 24px;
    line-height: 1.2;
  }



  section#videos {
    margin: 0 auto;
    padding: 40px 0;
    background: rgba(var(--color-dominant-rgb),0.2);
}

	  section#videos .thumb-group {
	    display: flex;
	    width: calc(100% - 80px);
	    gap: 20px;
	    margin: 0 auto;
	    flex-wrap: wrap;
	}

		section#videos p {
	    width: 100%;
	}

	 	.thumbnails {
		    width: calc(50% - 20px);
		    aspect-ratio: 2;
		    border-radius: 8px;
		    overflow: hidden;
		    margin: 0 auto;
		    min-width: 300px;
		}

		.thumbnails iframe {
		    width: 100%;
		    height: -webkit-fill-available;
		}

/*Results section*/
	li.item-icon {
		    display: flex;
		    gap: 20px;
		    margin-bottom: 40px;
		    align-items: center;
		}
			.item-icon div {
		    	width: 80%;
		    	max-width: 720px;
		    	line-height: 1.4;
		    	align-self: center;
			}
			li.item-icon p.tags{
				color:rgba(var(--color-dominant-rgb),0.8);
			}

		i.uil {
		    font-size: 40px;
		    line-height: calc(40px + 4.4vw);
		    height: calc(40px + 4.4vw);
		    width: calc(40px + 4.4vw);
		    text-align: center;
		    border-radius: 16px;
		    background: rgba(var(--color-dominant-rgb),0.2);
		}


/* Media Queries */

		@media screen and (-webkit-min-device-pixel-ratio:0) { 
			property: value;
		}

		@media (min-device-width: 1048px) and (orientation : landscape)  {
		  h1 {
		    font-size: 112px;
		  }

		  section#menu{
		  	padding: 0 4.164vw;
		  }

		  section#title h1{
		  	padding: 4vw 4.164vw;
		  	font-size: 8vw;
		  }

		  .lines{
		  	top:6.5vw;
		  }

		  .lines div {
		    height: 4.16vw;
        	margin-bottom: 3.74vw;
			}

			 .lines div:nth-child(n+5) {
		    	display: none;
			}

			.animate {
			  animation-duration: 0.6s;
			  animation-name: animate-fade;
			  animation-delay: 0.8s;
			  animation-fill-mode: ease-in-out;
			}

			div#projects.side-p-24{
				padding: 0 4.164vw 12px;
			}


		  section#other-cs {
				padding: 32px 0 0 0;
				gap:0;
				width: 100%;
			}

			/*Case Studies >1200*/

				  a.project-card{
						max-width: none;
						padding: 64px;
						border-bottom: none;
						border-radius: 32px;
						gap: 32px;
					}
					

					div.cover-container{
						flex-direction: row;
						width: 100%;
						aspect-ratio: auto;
						background: none;
						margin-bottom: 0;
						padding:0;
					}

					a.project-card h4{
						font-size: 3.2vw;
						text-align: left;
						align-self: flex-end;
						max-width: 600px;
					}

					a.project-card:hover div.cover-container{
						background: none;
					}

					.cover-btm{
						align-self: normal;
						flex-direction: row;
						display: flex;
						gap:20px;
					}

					.flex-row{
						width: auto;
						gap:20px;
					}

					.cover-img-group{
						height: fit-content;
						aspect-ratio: 1.6;
					}
					.project-summary{
						margin-bottom: 64px;
						padding: 0 4.164vw;
					}



					a.project-card.card1{
						 background: rgba(var(--color-dominant-rgb), 0.1) !important;
					}
					a.project-card.card1:hover{
						background: rgba(var(--color-dominant-rgb), 0.3) !important;
					}

					a.project-card.card2{
						background: rgba(var(--color-primary-rgb), 0.1)!important;
					}

					a.project-card.card2:hover{
						background: rgba(var(--color-primary-rgb), 0.3) !important;
					}

					a.project-card.card3{
						 background: rgba(var(--color-accent-rgb), 0.1) !important;
					}
					a.project-card.card3:hover{
						background: rgba(var(--color-accent-rgb), 0.3) !important;
					}

					a.project-card.card4{
						 background: rgba(var(--color-dominant-rgb), 0.1) !important;
					}
					a.project-card.card4:hover{
						background: rgba(var(--color-dominant-rgb), 0.3) !important;
					}


					.card2 img.cover-component{
					    top: 10%;
					    left: -10%;
					    scale: 0.5;
					}

					.card2 .cover-img-group {
		    		aspect-ratio: 1.5;
		    		}

					a.project-card.card2:hover .cover-container .cover-img-group img.cover-component {
					  	position: absolute;
					    left: -4%;
		    			top: 15%;
					    z-index: 2;
					    scale: 0.9;
					}

					.endorsements:last-child {
					    margin-right: 4.164vw;
					}
					.endorsements:first-child {
					    margin-left: 4.164vw;
					}

					footer div.p-xl{
						padding:40px 4.164vw;
					}

		 }

		 @media (width >= 1400px) {
		 	section#about {
    			padding: 8vw 0;
    		}
    		.lines div:nth-child(n+5) {
        		display: none;
        	}

		 }
		  @media (min-width: 701px) and (max-width: 1047px) {
		  	.summary-cover{
				max-width: none;
			}
			.summary-content{
				gap:0;
			}
			a.summary-wrapper{
				gap:32px;
			}
			a.summary-wrapper:hover{
				gap:32px;
			}

			a.summary-wrapper:hover .summary-content{
				margin-left: 20px;
			}

			.dp-n{
				display: block;
			}

		}
		 @media (min-width: 701px) and (max-width: 894px) {

			.lines div:nth-child(n+5) {
        	display: none;
    		}

		 }

		 @media (min-width: 895px) and (max-width: 1047px) {

			.lines div:nth-child(n+5) {
        	display: none;
    		}

		 }

		 @media (min-width: 547px) and (max-width: 700px) {
		 	.lines div:nth-child(n+5) {
        	display: none;
    		}
    		.lines{
		  		top:56px;
		 	}

			.lines div{
			  	height: 28px;
			  	margin-bottom: 34px;
			}
		 	
		 }

		 @media (width <= 546px) {
		 	.lines div:nth-child(n+5) {
        	display: none;
    		}
    		.lines{
		  		top:10.34vw;
		  		display: none;
		 	}

			.lines div{
			  	margin-bottom: 6.72vw;
			  	height: 5.06vw;
			}
			section#title{
				margin-bottom: 24em;
			}
		 	
		 }

		 @media (min-width: 701px) and (max-width: 1000px) {
		 	.lightbox-group img {
				    max-width: 900px;
				    max-height: 600px;
				}
		 }

		@media (min-width: 701px) and (max-width: 800px) {
		  section#title h1 {
		    font-size: 10.2vw !important;
		  }
		   footer h3, footer div div {
		  	word-break: auto-phrase;
		  }
		  section#vnav {
			    display: none;
			}
			.mb-xxl{
				margin-bottom: 80px !important;
			}
			.lightbox-group img {
				    max-width: 1200px;
				    max-height: 300px;
				}

			.lines div{
			  	margin-bottom: 5.02vw;
			}

		}

		@media (width <= 700px) {

			section#other-cs{
				padding: 0;
				width: 100%;
        		gap: 0;
			}
			a.project-card {
				border-radius: 0;
        		padding: 64px 32px;
			}
			.cover-container{
				flex-direction: column;
			}
			a.a-h1:hover:after{
				margin-left: calc((-4.164vw) - 180px);
				letter-spacing: 0;
			}

			a.endorsement-card{
				min-width: 300px;
			}
			p{
				font-size: 1em;
			}
			a.btn-icon{
				display:none;
			}


			.lightbox-group .endorsement-card {
				padding: 48px;
    			border-radius: 24px;
			}

			.lightbox-group img {
				max-width: 100%;
				}
			.lightbox-group {
				flex-direction: column;
				width: calc(100% - 40px);
   				margin: 0 auto;
			}
			lightbox{
				padding: 24px;
			}
			a.close-lightbox{
				top:auto;
				bottom:0;
				border-radius: 16px 0 0 0;
				position: absolute;
			    right: 0;
			}

			body{
				font-size: calc(16px + 0.2vw);
			}

			section.ctr-cont{
				width: calc(100% - 48px) !important;
			    padding-bottom: 4vw !important;
			    margin: 0 24px !important;
			}

			div#project-nav{
				display: none;
			}
			.mb-xxl{
				margin-bottom: 80px !important;
			}

			a.summary-wrapper{
				padding:48px 24px;
				gap:0px;
			}

			.summary-content{
				gap:0px;
			}
			section#videos {
				margin-bottom: 80px !important;
			}
			div.img-full p{
				padding-left: 8px;
			}

			section#videos .thumb-group {
		    width: calc(100% - 40px);
			}

			section#main div.img-full img{
				border-radius: 0 !important;
			}

			section#vnav {
			    display: none;
			}

			section#title {
				height: fit-content;
			}

			section#title h1 {
			    font-size: 56px;
			    line-height: 64px;
			    letter-spacing: -2px;
			    width:calc(100% - 24px);
  				padding: 32px 12px;
  				hyphens: manual;
  				-webkit-hyphens: manual;
		  	}

			
			.dp-n{
				display: block;
			}

			a.card-link{
			  	width: 260px;
			  	padding: 32px;
			}

		  a.a-btn{
		  	padding:40px 24px;
		  }

		  #about p{
		  	margin-left: 0;
		  	padding-right: 24px;
		  	padding-left: 24px;
		  	font-size: 1em;
		  }
		  div.author{
		  	font-size: 0.833em;
		  }

		  p.headline{
		  }

		  h2, h3{
		  	letter-spacing: -2px;
		  	word-break: auto-phrase;
		  }
		  div#projects{
		  	    gap:8px;
		  	    overflow: auto;
		  }

		  div#projects p.headline{
		  	min-width: 120px !important;
		  }

		  #myBtnContainer{
			    flex-direction: row;
			    display: flex;
			    gap: 4px;
			    align-items: center;
		  }
		  .summary-content-bottom{
		  	display: none;
		  }

		  a.summary-wrapper:hover{
				gap:0px;
			}

		  footer h3, footer div div {
		  	word-break: auto-phrase;
		  }
		  footer{
		  	padding:0px 20px 64px;
		  }

		  footer p {
		  	width:100%;
		  	text-align: center;
		  }

		  footer div{
		  	gap:64px;
		  }

		  .fcol{
		  	width: 100%;
		  	text-align: center;
		  }

		  p.m-h4 {
			    font-size: 1.333em;
			}

		  section#menu{
		  	padding: 0 12px;
		  }

		  nav ul{
		  	gap: 12px;
		  }

		  nav a.logo-link{
		  	width: 100px;
		  	height: auto;
		  	align-self: self-end;
		  }

		  nav{
		  	padding-top: 12px;
		  }

		  nav.light ul div.dropdown-content a p{
		  	font-size: 1em;
		  }


		div.next-cs{
			width: 100%;
		}
		h2{
			font-size: 2em;
		}

		h2,h3,h4{
			hyphens: auto;
			-webkit-hyphens: auto;
		}

			section#gallery{
				width: 80%;
    			flex-flow: column;
			}

			section#gallery div.gallery-desc {
				width: 100%;
				max-width: 480px;
			}

			section#gallery div.gallery-desc section#vnav{
				display: none;
			}

			section#gallery div.gallery-group{
				width: 100%;
				flex-flow: column;
			}

			section#gallery div .gall-col1, section#gallery div .gall-col2{
				width: 100%;
			}

			.spotify-box{
				padding: 20px;
			}
			.results-content ul{
				padding: 20px;
			}

			.results-content h3{
				font-size: 1.666em;
			}

			.results-content li{
				list-style-position:inside !important ;
			}

			.results-content li::marker{
				
			}

		}

		@keyframes fadeIn{
					 0% {
					    opacity: 0%;
					    visibility: visible;
					  }
					  100% {
					    opacity: 100%;
					    visibility: visible;
					  }
				}

				@keyframes animate-fade {
			  0% { color: rgba(var(--color-base-inv-rgb),1; }
			  100% { color: rgba(var(--color-dominant-rgb),1;}
			}