@charset "UTF-8";
/* CSS Document */


.loading-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 1;
  display: block;
  animation: fadeBlur .5s ease-in-out forwards; /* Adjust the duration as needed */
}

@keyframes fadeBlur {
  0% {
    backdrop-filter: blur(10vmax);
    -webkit-backdrop-filter: blur(10vmax);
    opacity: 1;
  }
  100% {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    opacity: 1;
    display: none;
	z-index: -1;
  }
}



body {
  	font-family: "Avenir Next Bold", "Avenir Next Bold Italic", "Avenir Next Demi Bold", "Avenir Next Demi Bold Italic", "Avenir Next Heavy", "Avenir Next Heavy Italic", "Avenir Next Italic", "Avenir Next Medium", "Avenir Next Medium Italic", "Avenir Next Regular", "Avenir Next Ultra Light", "Avenir Next Ultra Light Italic", "Avenir Oblique";
	font-weight: 300;
	text-transform: lowercase;
  height: 100%;
  margin: 0;
  overflow: auto; 
	padding: 0;
	font-size: 16px;
	color: rgba(255,240,230,1);
	line-height: 1.5;
	
}

.subtitle-box {
	margin-left: 10px;
	font-weight: 100; 
	font-size: 13px;
	padding:0px;
	
}

.arrow-subtitle {
	display: inline-block;
	transform: scaleX(-1);
	margin-top: -40px;
	font-weight: 100; 
}

.subtitle-text {
	display: inline-block;
	margin-top: -40px;
	font-weight: 100; 
	margin-left: 5px;

}

a.allprojects{
	cursor: pointer;
	font-weight: 500; 
	font-size: 15px;
	color: rgba(255,255,231,1);
	padding: 5px;
}

a.allprojects:hover{
	cursor: pointer;
	font-weight: 500; 
	font-size: 15px;
	color:rgba(255,255,231,1);
	background-color: rgba(0,0,0,1);
	padding: 5px;
	text-decoration: underline;
}


.icon {
	font-family: "Avenir Next";
	font-weight: 500;
}


 .black-div {
      display: none;
      background-color: rgba(30,30,60,1);
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      opacity: 1;
		z-index: -3;
    }
    
    button {
      position: fixed;
	  right: 100px;
	  
		border: 1px solid rgba(255,240,230,1);
      color: rgba(255,240,230,1);
      background-color: transparent;
      padding: 7px 12px;
      font-size: 16px;
		cursor: pointer;
    }

    button .icon {
      margin-right: 0px;
    }
    
    button.active {
      background-color: none;
      color: rgba(255,240,230,1);
		cursor: pointer;
    }



@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  50% {
    transform: scale(1, 1.5) rotate(180deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

#blob {
  height: 40vh;
  aspect-ratio: 1;
  position: fixed;
  left: 25%;
  top: 25%;
  margin-left: -12.5vmax; /* half the width of the blob */
  margin-top: -12.5vmax; /* half the height of the blob */
  border-radius: 50%;
  transform: translate(-0%, -0%);
  background: linear-gradient(to right, red, mediumpurple);
  opacity: .8;
  animation: rotate 5s infinite;
  z-index: -6;
}


#blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(4vmax);
  -webkit-backdrop-filter: blur(4vmax);
	z-index: -5;
}

	.fas
	{
		margin-right: 10px;
	}


@media screen and (max-width: 767px) {
  /* On mobile */

	
	#blob {
		left: 0%;
    	top: 20%;
		height: 75vh;
		
	}
	  button {
		position: absolute;
		right: 20px;
		top: 20px;
		padding: 5px 10px;
    }
	
	.fas
	{
		margin-right: 0;
	}
	  .button-text {
    display: none;
  }
}

@media screen and (min-width: 768px) {
	
	button{bottom: 50px;}
}

h1 {
	font-weight: 500;
}

h1.index {
	padding:0;
	margin:0;
}

h2 {
      font-size: 18px;
	  font-family: 'Avenir Next', sans-serif;
	  font-weight: normal;
    }
    

h2.index {
	padding:0;
	margin:0 0 10px 0;
    }

p {
    margin: 30 0 0 30px;
	padding:0;
	font-family: 'Avenir Next', sans-serif;
	font-weight: normal;
    }

li {
	
	list-style: none;
	padding:0;
}

a {
	color: rgba(30,30,60,1);
	list-style: none;
	text-decoration: none;
	font-family: 'Avenir Next', sans-serif;
	font-weight: 500;
	margin: 0px;
	padding:0;
}

a:hover {
	color: rgba(10,10,20,1);
	text-decoration: none;
	padding:0;
	cursor: pointer;
	overflow: visible;
	
}



#cookieConsentContainer {
    
  align-items: center; /* Vertically align items in the center */
  justify-content: center; /* Horizontally center items */
  padding: 0px 0 40px 2%;
  position: fixed;
  top: 50px;
  right: 50px;
  color: rgba(255,255,231,1);
  background-color: rgba(30,30,60,1);
  border-bottom: 1px solid rgb(0, 0, 0);
  z-index: 100;
  width: 400px;
  filter: drop-shadow(0px 0px 5px rgba(30,30,60,.3));
  border-radius: 10px;

}


#acceptCookieConsent {
  /* Style for the 'Got it!' button */
}

#cookie-text {
  margin-right: 20px; /* Space between the text and the button */
  margin-bottom: 20px;
  
}

#cookie-text a {
color: rgba(255,231,231,1);
font-weight: 700;
}

.cookie-consent-btn {
  display: inline;
  border: 1px solid rgba(255,255,231,1);
  color: rgba(255,255,231,1);
  background-color: transparent;
  padding: 7px 12px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #cookieConsentContainer {
      top: 20vw;
      left:5vw;
      right: 5vw;
      width: auto;
      padding: 10px 10px 30px 20px;
  }

  #cookie-text {
      width: 100%; /* Full width for both text and button */
      text-align: left; /* Center the text */
      margin-right: 20px; /* Remove right margin from text */
      margin-bottom: 20px; 
      margin-top: 10px;
}
  #cookie-consent-btn {
      margin-right: 0; /* Remove right margin from text */
      margin-bottom: 10px; /* Space below the text before the button */
  }
}