@font-face {
  	font-family: 'GeneralSans';
  	src: url('../../static/fonts/GeneralSans-Regular.woff2') format('woff2'),
       url('../../static/fonts/GeneralSans-Regular.woff') format('woff');
  	font-weight: 400;
  	font-style: normal;
  	letter-spacing:0.02rem; /*sergej*/
  	font-display: swap;
}

@font-face {
  	font-family: 'GeneralSans';
  	src: url('../../static/fonts/GeneralSans-Medium.woff2') format('woff2'),
       url('../../static/fonts/GeneralSans-MediumItalic.woff2') format('woff2');
  	font-weight: 500;
  	font-style: normal;
	letter-spacing:0.02rem; /*sergej*/
  	font-display: swap;
}

@font-face {
  	font-family: 'GeneralSans';
  	src: url('../../static/fonts/GeneralSans-Semibold.woff2') format('woff2'),
       url('../../static/fonts/GeneralSans-SemiboldItalic.woff2') format('woff2');
  	font-weight: 600;
  	font-style: normal;
	 letter-spacing:0.02rem; /*sergej*/
  	font-display: swap;
}

@font-face {
  	font-family: 'GeneralSans';
  	src: url('../../static/fonts/GeneralSans-Bold.woff2') format('woff2'),
       url('../../static/fonts/GeneralSans-BoldItalic.woff2') format('woff2');
  	font-weight: 700;
  	font-style: normal;
  	letter-spacing:0.02rem; /*sergej*/
  	font-display: swap;
}

@font-face {
  	font-family: 'GeneralSans';
  	src: url('../../static/fonts/GeneralSans-Italic.woff2') format('woff2');
  	font-weight: 400;
	letter-spacing:0.02rem; /*sergej*/
  	font-style: italic;
  	font-display: swap;
}


:root {
    --color1: black;
	--color2: white;
    --color3: #fe4708;
	--color4: #d7ff00;
	--color5: #9bf000;
	--color6: #020381;
/*	--color5: #fe4708;*/
  	--grey: #808080;
      --footer-background: #fe4708; 
    --font--sans: 'GeneralSans', sans-serif;
	--cursor-size: 24px;          
    --font-weight: 400;
  	--clr-black: #141211;
  	--clr-white: #fefefe;
  	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  	--footer-bg: var(--color3);
   --bg-light: var(--clr-white);
  	--bg-dark: var(--clr-black);
  	--current-background: var(--clr-white);
  	--font-size-xs: 0.8rem;
  	--font-size-base: 1.1rem;
  	--font-size-lg: 2rem;
   	--font-size-xl: 4rem;
	/*--font-size-xs: 0.4rem;
  	--font-size-base: 0.6rem;
  	--font-size-lg: 1rem;
   	--font-size-xl: 2rem;*/

	--current-text-color: #000000;
	--margin-left: 25%;
  	--icon-fill: --clr-black;
  	--icon-fill-hover: white; 
	--margin-pastille: 0.6rem;
} 


html, body {
	letter-spacing:0.02rem; /*sergej*/
	font-size: var(--font-size-base);
	font-weight: var(--font-weight);
  	margin: 0;
    padding: 0;
   	font-family: var(--font--sans);
    color: black;
    box-sizing: border-box;
  	/* cursor: none !important; */
  	min-height: 100vh;
	color: var(--current-text-color, #000);
    margin: 0; 
	overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
	    overflow: visible !important;
	background: var(--current-background);
  	transition: background 0.8s ease, color 0.3s ease;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    cursor: none !important;
}

*, a:hover, button:hover {
    cursor: none !important;
}

nav.main_nav.mobile {
    margin-top: calc(env(safe-area-inset-top) * -1);
}
body.footer-active {
  --current-background: var(--footer-bg);
  --current-text-color: var(--clr-white);
}

body.footer-active .pastille, body.footer-active .pastille-orange {
  	border: 1px solid var(--clr-white) !important;
	background: none;
}

body.footer-active .pastille:hover {
  	border: 1px solid var(--clr-white) !important;
	background: var(--clr-white) !important;
}

body.footer-active .pastille:hover a {
    color: var(--color3) !important;
}

body[light] {
  	--current-background: var(--bg-light);
  	--current-text-color: var(--clr-black);
}

body[dark] {
  	--current-background: var(--bg-dark);
  	--current-text-color: var(--clr-white);
}

body[dark] .nav__brand video, body.footer-active .about-network li img {
  	filter: invert(1);
}

body[dark] .nav__brand img, body[dark] .main_nav mobile span{
  	filter: invert(1)
}
.single-project-page section {
  border-bottom: none;
}

.single-project-page main section:last-of-type {
  border-bottom: 1px solid grey;
}

body[dark] .pastille-projects a, body[dark] .pastille-projects-title, body.footer-active section, body.footer-active .single-project-page section:last-of-type {
  	border-bottom: 1px solid var(--clr-white);
}

body[dark] .main_nav {
	 background: rgba(72, 72, 72, 0.46);
} 

body[dark] .about-network li img  {
    filter: invert(1);
}

::selection {
  	background-color: #a0bdf8;
}

body[dark] ::selection {
  	background-color: #5031fe
}

body[dark] .item-main-title::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88.31 50'><path fill='white' d='M63.31 49.99h-12.47l20.58-20.58H0v-8.83h71.42L50.84 0h12.47l25 25-25 25h0Z'/></svg>");
}

body.footer-active .item-main-title::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88.31 50'><path fill='white' d='M63.31 49.99h-12.47l20.58-20.58H0v-8.83h71.42L50.84 0h12.47l25 25-25 25h0Z'/></svg>");
}
body[dark] .drop::after, body.footer-active .drop::after {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 88.31'><path fill='white' d='M50 25v12.47L29.42 16.89v71.42h-8.83V16.89L0 37.47V25L25 0l25 25z'/></svg>");
}

body[dark] .tag-btn.active, body[dark] .pastille.active {
  background-color: var(--clr-white) !important;
  color: var(--clr-black) !important;
}


body.footer-active[light] #hamburger-menu span {
    background-color: white !important;
}
body.footer-active .pastille {
  color: white !important;
}
body[dark] button,
body[dark] .pastille,
body[dark] a,
body[dark] .project-list.list-view .grid_item_footer,
body[dark] .project-list.list-view .grid_item_title,
body.footer-active .pastille-orange.empty-orange{
  color: var(--clr-white);
}

body[dark] .btn-pastille{
/*border: 1px solid var(--clr-white);*/
}

body[dark] .pastille, body[dark] .filter-btn {
  color: var(--clr-white);
  border: 1px solid var(--clr-white);
}

.big_title{
    font-size: var(--font-size-xl);
	 margin-bottom: 1rem;
	line-height: 1em;
}

body.footer-active {
    background: var(--footer-bg) !important;
    color: var(--clr-white) !important;
}


button {
  	background: none;
  	border: none;
}



.about-team, .about-section, .contact, .projects, .quote, .project-container, .section-quote, .related-projects, .quote_footer {
    padding-right: 4rem;
    padding-left: 4rem;
    padding-top: 2rem;
  	padding-bottom: 3rem;
}
.hover_orange:hover {
  background-color: var(--color3);
  color: var(--clr-white);
  border: 1px solid var(--color3) !important;
}

.tag-btn:hover, .filter-btn:hover,
.filter-btn.active, .pastille.active {
    background: var(--clr-black);
    color: white !important;
  	transition: 0.2s ease-in-out;
} 

.has-dropdown.open > .dropdown-toggle:hover, .has-dropdown.open > a:hover {
  	color: white;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.pastille {
  	padding: 0.4rem 0.8rem;
  	border-radius: 999px;
  	text-decoration: none;
 	display: inline-block;
  	color: var(--current-text-color)!important;
  	border: 1px solid var(--current-text-color) !important;
	font-size: var(--font-size-base);
	transition: 0.3s;
	max-width: fit-content;
	/*mix-blend-mode:normal !important;*/
}

.pastille:hover {
	background: var(--clr-black) !important;;
	color: var(--clr-white) !important;
}

body[dark] .pastille:hover {
  	background-color: var(--clr-white) !important;
	color: var(--clr-black) !important;
}

.pastille-orange {
  	padding: 0.4rem 0.8rem;
  	border-radius: 999px;
  	text-decoration: none;
 	display: inline-block;
  	color: var(--clr-white);
	background: var(--color3);  
	 max-width: fit-content;
	   cursor: pointer;
	margin-bottom: var(--margin-pastille);
}

main,
.single-project,
.section-quote,
.section-gallery {
  overflow: visible !important;
  height: auto !important;
}

nav ul {
    list-style: none;
    padding: 0;
    gap: 20px;
}

nav ul li a {
    text-decoration: none;
    color: var(--color1);

}

h1 {
	font-weight: 400;
}

h2, h3, h4, p {
	padding: 0;
	font-weight: 400;
}

section {
 	 margin-bottom: 2rem;
	padding-bottom: 2rem;
}
.project-hero, .single-project .project-hero, .hero, .section-quote.no-border, .hero-graphic, .quote_footer {
	border: none;
}



p { 
	margin:0;
}

h1 {
	font-size: var(--font-size-lg);
  	margin-bottom: 0.5em;
}

h2 {
    font-size: var(--font-size-base);
	margin-bottom: 0.5em;
}


h3 {
	margin: 0;
  	margin-bottom: 1rem;
}

h4 {
    font-size: var(--font-size-base);
	color:grey;
	margin-bottom: 2em;
}

h4 a{
	color:grey !important;
}

a {
  color: var(--color1);
  text-decoration: underline;
  transition: color 0.4s ease-in-out, transform 0.3s ease;
}

#cursor {
	position: fixed;
  	top: 0;
  	left: 0;
  	width: 40px;
  	height: 40px;
  	pointer-events: none;
  	z-index: 99999;
  	transform: translate(-50%, -50%);
  	mix-blend-mode: normal;
  	transition: transform 0.15s ease-out;
}

#cursor-ring {
	fill: none;
  	stroke: var(--current-cursor-color);
	transition: all 0.2s ease;
 	stroke-width: 2;
 	vector-effect: non-scaling-stroke;
	 transition: transform 0.15s ease-out;

}

#cursor.cursor--link #cursor-ring {
	fill: var(--current-cursor-color);
}


#cursor.is-big {
}

#cursor.is-click #cursor-ring {
}

:target {
    scroll-margin-top: 120px; 
}

.project-item img,
.team-card img,
.project-thumb img {
  	border-radius: 0;
}

.project-item img,
.team-card img,
.project-thumb img {
	transition: 0.3s;
}
/*.project-list.grid-view .project-item img {
    transition: none !important;
}/*

.project-item img:hover,
.team-card img:hover,
.project-thumb img:hover,
.grid_item_image img:hover {
  	border-radius: 50px;
 	/* box-shadow: 0 8px 20px rgba(0,0,0,0.2); */
	transition: 0.3s;
}

 /* day night */

   :root {
  --icon-fill: var(--color3);        /* messed around with this*/ /*sergej*/
  --icon-fill-hover: var(--color3);
}

body.footer-active .sun-and-moon > :is(.moon, .sun),
body.footer-active .sun-and-moon > .sun-beams {
  fill: var(--clr-white) !important;
  stroke: var(--clr-white) !important;
}

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
  transform-origin: center;
}

.sun-and-moon > :is(.moon, .sun) {
  fill: var(--current-text-color);
}

.sun-and-moon > .sun-beams {
  stroke: var(--current-text-color);
  stroke-width: 2px;
}
/*
.theme-toggle:is(:hover, :focus-visible)
  > .sun-and-moon > :is(.moon, .sun) {
  fill: var(--icon-fill-hover);
}

.theme-toggle:is(:hover, :focus-visible)
  .sun-and-moon > .sun-beams {
  stroke: var(--icon-fill-hover);
}
*/


.sun-and-moon > .sun {
  transform: scale(1.75);
}

.sun-and-moon > .sun-beams {
  opacity: 0;
}

.sun-and-moon > .moon > circle {
  transform: translateX(-7px);
}

@supports (cx: 1) {
  .sun-and-moon > .moon > circle {
    cx: 17;
    transform: translateX(0);
  }
}


body[dark] .sun-and-moon > .sun {
  transform: scale(1);
}

body[dark] .sun-and-moon > .sun-beams {
  opacity: 1;
}

body[dark] .sun-and-moon > .moon > circle {
  transform: translateX(0);
}

@supports (cx: 1) {
  body[dark] .sun-and-moon > .moon > circle {
    cx: 24;
  }
}


@media (prefers-reduced-motion: no-preference) {

  .sun-and-moon > .sun {
    transition: transform .5s var(--ease-elastic-3);
  }

  .sun-and-moon > .sun-beams {
    transition:
      transform .5s var(--ease-elastic-4),
      opacity .5s var(--ease-3);
  }

  .sun-and-moon .moon > circle {
    transition: transform .25s var(--ease-out-5);
  }

  @supports (cx: 1) {
    .sun-and-moon .moon > circle {
      transition: cx .25s var(--ease-out-5);
    }
  }

  body[dark] .sun-and-moon > .sun {
    transition-timing-function: var(--ease-3);
    transition-duration: .25s;
    transform: scale(1);
  }

  body[dark] .sun-and-moon > .sun-beams {
    transition-duration: .15s;
    transform: rotateZ(-25deg);
  }

  body[dark] .sun-and-moon > .moon > circle {
    transition-duration: .5s;
    transition-delay: .25s;
  }
}


	[id] {
    scroll-margin-top: 220px;
}
/* CURSEUR*/
.project-thumb {
  position: relative;
  overflow: hidden;
}


.project-thumb:hover .eye-overlay {
  opacity: 1;
}

.project-thumb:hover .eye-icon {
  transform: scale(1);
}

body[dark] .eye-icon {
  fill: var(--clr-white);
}
#eye circle {
    fill: var(--color5) !important;
}
#eye path {
    stroke: var(--color5) !important;
}
#cursor {
    mix-blend-mode: normal;
}

#cursor.is-eye {
    mix-blend-mode: difference;
}

.pastille,
.pastille.empty-orange,
.pastille-orange {
    mix-blend-mode: normal !important;
}
.services__content.quote_large h1 {
  margin-bottom: 1em;
}


.filter-btn.pastille {
  height: auto;
  width: auto;
  border-radius: 999px;
}
.pastille-group-content, .tags-content-wrapper {
  margin-left: 2rem;
}
.text-left {
  width: 75%;
}



body.footer-active .quote_footer{
	border-bottom: none;
}
body.footer-active .hover-video {
  filter: invert(1);
}
/* CHECK CIRCLE */

.check-circle {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid var(--clr-black);
    background: transparent;
    transition: 0.25s ease;
    flex-shrink: 0;
    margin-right: 8px; 
  	flex-shrink: 0;
}

.active .check-circle,
.filter-btn.active .check-circle,
.tag-btn.active .check-circle {
    background: var(--clr-black);
}


body[dark] .check-circle, body.footer-active .check-circle {
    border-color: var(--clr-white);
}

body[dark] .active .check-circle,
body[dark] .filter-btn.active .check-circle,
body[dark] .tag-btn.active .check-circle {
    background: var(--clr-black);
}

body[dark] .filter-btn:hover .check-circle,
body[dark] .tag-btn:hover .check-circle {
	 border: 1px solid var(--clr-black);
}

.tag-btn:hover .check-circle,
.filter-btn:hover .check-circle{
	border-color: var(--clr-white);
}

.tag-btn.active .check-circle,
.filter-btn.active .check-circle{
    background: #fff;
    border: none;
}

.filter-btn,
.tag-btn {
    display: inline-flex;
    align-items: center;
}
/**/
.column {
  display: flex;
  flex-direction: column;
}

.pastille-group-content,
.tags-content-wrapper {
    overflow: hidden;
    transition:
        height .85s cubic-bezier(.25,.8,.25,1),
        opacity .85s ease,
        transform .85s cubic-bezier(.25,.8,.25,1);
    transform-origin: top;
}

.accordion-open {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.accordion-closing {
    opacity: 0.4;
    transform: translateY(-6px);
}

.text-grey {
    color: var(--grey);
    font-size: var(--font-size-base);
}

.projects_metadata {
  	display: flex;
  	margin-top: 4rem;
	justify-content: space-between;
}

.project-taxonomies {
 	display: flex;
 	align-items: center; 
  	gap: 10px;
	flex-wrap: wrap;
	margin-top: 3rem;
}

.project-taxonomies .a-right {
  margin-left: auto;  
}
.quote_footer a, body.footer-active .quote_footer a {
		text-decoration: underline;

}
body.footer-active a {
	color: var(--clr-white) !important;
    transition: none !important;
}
.project-item img:hover,
.team-card img:hover,
.project-thumb img:hover,
.grid_item_image img:hover {
    border-radius: 50px;
    transition: 0.3s;
}