@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Signika:wght@300..700&display=swap');

:root {
  --kinto-font-heading: 'Comfortaa', sans-serif;
  --kinto-font-text: 'Signika', sans-serif;
  --kinto-font-ui: 'Lato', sans-serif;
  --kinto-font-mono: Menlo, 'Courier new', mono;
  --kinto-font-impact: 'Comfortaa', sans-serif;
}
:root {
	--kinto-nav-bar-opacity-speed: .7;
	--kinto-nav-logo-height-speed: .8;
	--kinto-nav-logo-max-height: 60px;
	--kinto-nav-container-max-height: 140px;
  
	nav[data-kinto-element=nav-bar] {
		height: auto;
		background-color: transparent;
		margin: 0;
		margin-bottom: 1em
	}
  
	nav[data-kinto-element=nav-bar] .kinto-ui {
		font-size: .8rem;
	}
  
	div[data-kinto-element=nav-bar-content] {
		--link: var(--black-blue);
		--current-bg-opacity: clamp(0%, calc(var(--kinto-nav-bar-opacity-speed) * var(--scroll-pos-pc)), 90%);
		gap: 0 1rem;
		height: fit-content;
		width: fit-content;
		min-height: var(--kinto-nav-container-min-height);
		max-height: var(--kinto-nav-container-max-height);
		padding: var(--xs);
		padding-top: 1em;
		backdrop-filter: blur(5px);
		background: linear-gradient(
			to top,
			hsl(var(--nav) / calc(0.6 * var(--current-bg-opacity))) 0%,
			hsl(var(--nav) / var(--current-bg-opacity)) 100%);
		border-radius: 0 0 var(--sm) var(--sm);
		/* border: 1px solid hsl(var(--border) / clamp(0%, var(--current-bg-opacity), 30%)); */
		border: 0;
		border-top: 0;
	}
  
	div[data-kinto-element=nav-spacer] {
		background-color: hsl(var(--light-blue));
	}
	
	div[data-kinto-block=nav-logo] > a {
		width: 235px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin-right: var(--lg);
	}
  
	/* div[data-kinto-block=nav-logo] > a > picture {
		height: clamp(0px, (-1 * (22px * var(--kinto-nav-logo-height-speed))) + (var(--kinto-nav-logo-height-speed) * var(--scroll-pos-px)), var(--kinto-nav-logo-max-height));
	} */
}
:root {
  .kinto-btn.xs {
    padding: var(--xxs) calc(var(--xxs) * 1.25);
    font-size: 0.8em;
  }

  .kinto-btn.sm {
	padding: var(--xs) calc(var(--xs) * 1.25);
    font-size: 0.8em;
  }

  .kinto-btn.md {
	padding: var(--sm) calc(var(--sm) * 1.25);
    font-size: 1em;
  }

  .kinto-btn.lg {
	padding: var(--sm) calc(var(--sm) * 1.25);
    font-size: 1.2em;
  }

  .kinto-btn.xl {
    padding: var(--md) calc(var(--md) * 1.25);
    font-size: 1.5em;
  }
}
:root {
	div[data-kinto-block=rich-text] {
		width: 100%;	
	}
	
	.prose span.kinto-accentuated-bg {
		padding: var(--xxs) calc(var(--xxs) / 2);
		display: inline;
	}
	
	.prose span.kinto-accentuated-decoration {
		text-decoration-thickness: .2em;
	}
	
	.prose :where(p,h2,h3,h4,h5,h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
		margin-top: 0;
	}
	
	.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))::before, .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
		content: '';
		background-color: hsl(var(--foreground));
		position: relative;
		display: inline-block;
		width: 2em;
		height: 2em;
	}
	.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)):before {
		mask: center / contain no-repeat url("/ornaments/icon-quote-open");
	}
	.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
		mask: center / contain no-repeat url("/ornaments/icon-quote-close");
		position: absolute;
		bottom: -.8em;
	}
	.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
		font-style: normal;
		font-weight: 300;
		border: 0;
		padding-right: 2em;
	}
}
:root {
	div[data-kinto-block=links-list] > ul {
		font-size: var(--font-size-ui);
		flex-wrap: wrap;
	}
}
:root {
	:is(td, th) :is(h1, h2, h3, h4, h5, h6) {
		margin: 0; 
	}
	
	th {
		padding: .5em 1em;
	}
	
	thead tr:last-child th {
		padding-bottom: 1em;
	}
	
	tbody td {
		padding: .3em 1em;
		border-bottom: 1px dotted;
	}
	
	tbody tr:last-child td {
		border: 0;
	}
	
	tfoot tr:first-child th {
		padding-top: 1em;
	}
	
	td span[data-kinto-element=inline-svg-icon] {
		margin-right: .7em;
	}
}
:root {
  --kinto-max-page-width: 1300px;
  
  /* css bugfix to be removed after next kinto release */
  .grid\:fit-content div[data-kinto-element="col-content"]{
     width: fit-content;
  }
  /* end of css bugfix */
  
  div[data-kinto-block] {
	max-width: var(--kinto-max-page-width);
	margin: 0 auto;
  }
  
  div[data-kinto-element=col] div[data-kinto-block] {
	margin: 0
  }
  
  div[data-kinto-layout] {
	padding: 2rem 0;
  }
  
  [data-kinto-layout=hero] {
	padding: 4em 0;
	background-color: hsl(var(--light-blue));
	color: hsl(var(--black-blue));
  }

  @media (max-width: 1043px) {
	[data-kinto-layout=hero] h1 {
		text-align: center !important;
		padding: 0 1rem;
	}
  }
  
  [data-kinto-layout=hero] h1 {
	font-weight: 300;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 1em;
  }
  
  div[data-kinto-element=row] {
	padding: 0 1em;
  }
  
  div[data-kinto-element=col] {
	padding: 1em;
	overflow: hidden;
  }
}


:root[data-theme='light'] {
   --light-blue: 169 40% 82%;
   --water-blue: 177 45% 64%;
   --green-blue: 175 100% 35%;
   --blue: 191 100% 30%;
   --dark-blue: 197 100% 25%;
   --black-blue: 195 100% 14%;
   --chick-yellow: 50 100% 50%;
   --white: 0 0% 100%;
   --background: var(--light-blue);
   --accent-3: var(--light-blue);
   --accent-4: var(--water-blue);
   --accent-1: var(--green-blue);
   --accent-5: var(--blue);
   --accent-6: var(--dark-blue);
   --foreground: var(--black-blue);
   --accent-8-foreground: var(--black-blue);
   --accent-2-foreground: var(--black-blue);
   --accent-3-foreground: var(--black-blue);
   --accent-4-foreground: var(--black-blue);
   --accent-7: var(--black-blue);
   --accent-2: var(--chick-yellow);
   --accent-1-foreground: var(--white);
   --accent-5-foreground: var(--white);
   --accent-6-foreground: var(--white);
   --accent-7-foreground: var(--white);
   --accent-8: var(--white);
}

:root {
	div[data-kinto-element=col].align-center div[data-kinto-element=col-content] {
		align-items: center  !important;
	}
}
:root {
	:is(div, footer, th, td).background-black-blue {
		--foreground: var(--white);
		background-color: hsl(var(--black-blue));
	}
	
	:is(div, footer).background-black-blue .prose {
		--prose-links: var(--light-blue);
	}
} 
:root {
	:is(div, footer, th, td).background-blue {
		--foreground: var(--white);
		background-color: hsl(var(--blue)); 
	}	
} 
:root {
	:is(div, footer).background-blue-to-white {
		--foreground: var(--black-blue);
		background: linear-gradient(
			to bottom,
			hsl(var(--blue)) 20%,
			hsl(var(--white)) 100%);
	}
	
	:is(div, footer).background-blue-to-white div[data-kinto-block=links-list] {
		--link: var(--dark-blue);
	}
} 
:root {
	:is(div, footer, th, td).background-chick-yellow {
		background-color: hsl(var(--chick-yellow));
	}	
}
:root {
	:is(div, footer, th, td).background-dark-blue {
		--foreground: var(--white);
		background-color: hsl(var(--dark-blue));
	}	
} 
:root {
	:is(div, footer)[data-kinto-layout].background-filigrane div.media-filter {
		background: linear-gradient( to bottom, hsla(var(--blue) / 1) 20%, hsla(var(--white) / .95) 100%) !important;
	}
}
:root {
	:is(div, footer, th, td).background-green-blue {
		--foreground: var(--white);
		background-color: hsl(var(--green-blue));
	}	
} 
:root {
	:is(div, footer, th, td).background-light-blue {
		background-color: hsl(var(--light-blue));
	}	
} 
:root {
	:is(div, footer, th, td).background-water-blue {
		background-color: hsl(var(--water-blue));
		--foreground: var(--black-blue);
	}	
}
:root {
	:is(div, footer, th, td).background-white {
		background-color: hsl(var(--white));
	}	
}
:root {
	[data-kinto-element=col].border-solid-right {
		border-right: 1px solid hsla(var(--border) / .5);
	}
}
:root {
	div[data-kinto-block=links-list].button-size-xxs a {
		padding: var(--xxs) calc(var(--xxs) * 1.25);
	}
}
:root {
	div.card-black-blue {
		--foreground: var(--white);
		background-color: hsl(var(--black-blue));
		border-radius: var(--md);
		padding: 1em;
	}	
}
:root {
	div.card-blue {
		--foreground: var(--white);
		background-color: hsl(var(--blue));
		border-radius: var(--md);
		padding: 1em;
	}
}
:root {
	div.card-chick-yellow {
		--foreground: var(--black-blue);
		background-color: hsl(var(--chick-yellow));
		border-radius: var(--md);
		padding: 1em;
	}	
}
:root {
	div.card-dark-blue {
		--foreground: var(--white);
		background-color: hsl(var(--dark-blue));
		border-radius: var(--md);
		padding: 1em;
	}
}
:root {
	div.card-green-blue {
		--foreground: var(--white);
		background-color: hsl(var(--green-blue));
		border-radius: var(--md);
		padding: 1em;
	}
}
:root {
	div.card-light-blue {
		--foreground: var(--black-blue);
		background-color: hsl(var(--light-blue));
		border-radius: var(--md);
		padding: 1em;
	}	
}
:root {
	div.card-water-blue {
		--foreground: var(--black-blue);
		background-color: hsl(var(--water-blue));
		border-radius: var(--md);
		padding: 1em;
	}	
}
:root {
	div.card-white {
		--foreground: var(--black-blue);
		background-color: hsl(var(--white));
		border-radius: var(--md);
		padding: 1em;
	}	
}
:root {
	div[data-kinto-element=col].card-with-shadow {
		box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.14);
	}
}
:root {
	td.cell-with-bottom-sep {
		border-bottom: 1px dashed hsl(var(--border));
	}
}
:root {
	[data-kinto-element=col-content].gap-content-sm {
		gap: var(--sm);
	}
}
:root {
	div[data-kinto-layout=free].gap-content-xl div.grid\:container {
		gap: var(--xl);
	}
}
:root {
	div.heading-as-quote :is(h1, h2, h3, h4, h5, h6)::before, div.heading-as-quote :is(h1, h2, h3, h4, h5, h6)::after {
		content: '';
		background-color: currentColor;
		position: relative;
		display: inline-block;
		width: 2em;
		height: 2em;
	}
	div.heading-as-quote :is(h1, h2, h3, h4, h5, h6):before {
		mask: center / contain no-repeat url("/ornaments/icon-quote-open");
	}
	div.heading-as-quote :is(h1, h2, h3, h4, h5, h6)::after {
		mask: center / contain no-repeat url("/ornaments/icon-quote-close");
		position: absolute;
		bottom: -.8em;
	}
}
:root {
	div.heading-margin-no-vertical h1, 
	div.heading-margin-no-vertical h2, 
	div.heading-margin-no-vertical h3,
	div.heading-margin-no-vertical h4,
	div.heading-margin-no-vertical h5,
	div.heading-margin-no-vertical h6 {
		margin-top: 0;
		margin-bottom: 0;
	}
}
:root {
	div[data-kinto-element=col].layout-horizontal div[data-kinto-element=col-content] {
		flex-direction: row !important;
    	align-items: center !important;
	}
	
	@media (max-width: 880px) {
			div[data-kinto-element=col].layout-horizontal div[data-kinto-element=col-content] {
			flex-direction: column !important;
			align-items: center !important;
		}
	}
}
:root {
	div[data-kinto-block].margin-bottom-lg {
		margin-bottom: var(--lg) !important;
	}
}
:root {
	div[data-kinto-block].margin-bottom-md {
		margin-bottom: var(--md) !important;
	}
}
:root {
	.margin-bottom-sm {
		margin-bottom: var(--sm) !important;
	}
}
:root {
	.margin-horizontal-md {
		margin-left: var(--md) !important;
		margin-right: var(--md) !important;
	}
}
:root {
	div[data-kinto-block].margin-top-lg{
		margin-top: var(--lg) !important;
	}
}
:root {
	div[data-kinto-block].margin-top-md{
		margin-top: var(--md) !important;
	}
}
:root {
	div[data-kinto-block].margin-top-sm{
		margin-top: var(--sm) !important;
	}
}
:root {
	div[data-kinto-block].margin-top-xs{
		margin-top: var(--xs) !important;
	}
}
:root {
	.margin-vertical-md {
		margin-top: var(--md) !important;
		margin-bottom: var(--md) !important;
	}
}
:root {
	div[data-kinto-block=media].media-as-card-badge-bottom {
		position: relative;
		bottom: -60px;
	}
}
:root {
	div[data-kinto-block=media].media-as-card-badge-top {
		position: relative;
		top: -60px;
		width: 3em;
		margin: 0 auto -2em auto !important;
	}
}
:root {
	:is(div, footer, th, td).next-icon-black-blue::before, 
	:is(div, footer, th, td).next-icon-black-blue::after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		z-index: 100;
		left: calc(50% - 1em);
		bottom: -1em;
	}
	
	:is(div, footer, th, td).next-icon-black-blue::before {
		background-color: hsl(var(--black-blue));
		border-radius: 2em;
	}
	
	:is(div, footer, th, td).next-icon-black-blue::after {
		mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		-webkit-mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		background-color: hsla(var(--white) / .5);
	}	
} 
:root {
	:is(div, footer, th, td).next-icon-blue::before, 
	:is(div, footer, th, td).next-icon-blue::after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		z-index: 100;
		left: calc(50% - 1em);
		bottom: -1em;
	}
	
	:is(div, footer, th, td).next-icon-blue::before {
		background-color: hsl(var(--blue));
		border-radius: 2em;
	}
	
	:is(div, footer, th, td).next-icon-blue::after {
		mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		-webkit-mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		background-color: hsla(var(--white) / .5);
	}	
} 
:root {
	:is(div, footer, th, td).next-icon-chick-yellow::before, 
	:is(div, footer, th, td).next-icon-chick-yellow::after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		z-index: 100;
		left: calc(50% - 1em);
		bottom: -1em;
	}
	
	:is(div, footer, th, td).next-icon-chick-yellow::before {
		background-color: hsl(var(--chick-yellow));
		border-radius: 2em;
	}
	
	:is(div, footer, th, td).next-icon-chick-yellow::after {
		mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		-webkit-mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		background-color: hsla(var(--black-blue) / .3);
	}	
} 
:root {
	:is(div, footer, th, td).next-icon-dark-blue::before, 
	:is(div, footer, th, td).next-icon-dark-blue::after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		z-index: 100;
		left: calc(50% - 1em);
		bottom: -1em;
	}
	
	:is(div, footer, th, td).next-icon-dark-blue::before {
		background-color: hsl(var(--dark-blue));
		border-radius: 2em;
	}
	
	:is(div, footer, th, td).next-icon-dark-blue::after {
		mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		-webkit-mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		background-color: hsla(var(--white) / .5);
	}	
} 
:root {
	:is(div, footer, th, td).next-icon-green-blue::before, 
	:is(div, footer, th, td).next-icon-green-blue::after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		z-index: 100;
		left: calc(50% - 1em);
		bottom: -1em;
	}
	
	:is(div, footer, th, td).next-icon-green-blue::before {
		background-color: hsl(var(--green-blue));
		border-radius: 2em;
	}
	
	:is(div, footer, th, td).next-icon-green-blue::after {
		mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		-webkit-mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		background-color: hsla(var(--white) / .5);
	}	
} 
:root {
	:is(div, footer, th, td).next-icon-light-blue::before, 
	:is(div, footer, th, td).next-icon-light-blue::after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		z-index: 100;
		left: calc(50% - 1em);
		bottom: -1em;
	}
	
	:is(div, footer, th, td).next-icon-light-blue::before {
		background-color: hsl(var(--light-blue));
		border-radius: 2em;
	}
	
	:is(div, footer, th, td).next-icon-light-blue::after {
		mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		-webkit-mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		background-color: hsla(var(--black-blue) / .3);
	}	
} 
:root {
	:is(div, footer, th, td).next-icon-water-blue::before, 
	:is(div, footer, th, td).next-icon-water-blue::after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		z-index: 100;
		left: calc(50% - 1em);
		bottom: -1em;
	}
	
	:is(div, footer, th, td).next-icon-water-blue::before {
		background-color: hsl(var(--water-blue));
		border-radius: 2em;
	}
	
	:is(div, footer, th, td).next-icon-water-blue::after {
		mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		-webkit-mask: url(/ornaments/fa-angles-down)  no-repeat center / contain;
		background-color: hsla(var(--black-blue) / .3);
	}	
} 
:root {
	div[data-kinto-element=col].overflow-visible {
		overflow: visible;
	}
}
:root {
	div[data-kinto-element=row].padding-horizontal-md {
		padding-left: var(--md);
		padding-right: var(--md);
	}
}
:root {
	div[data-kinto-element=col].padding-no-horizontal {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
:root {
	.padding-no-vertical {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}
:root {
	:is(div[data-kinto-element=col], td, th).padding-top-sm {
		padding-top: var(--sm);
	}
}
:root {
	:is(div[data-kinto-element=col], td, th).padding-vertical-sm {
		padding-top: var(--sm);
		padding-bottom: var(--sm);
	}
}
:root {
	div.paragraph-margin-no-vertical p {
		margin-top: 0;
		margin-bottom: 0;
	}
}
:root {
	.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
		font-family: var(--kinto-font-heading);
		font-size: 1.2em;
	}
}
:root {
	div.text-big {
		--font-size-body: 1.8rem;
	}
}
:root {
	:is(div, footer).text-font-ui, :is(div, footer).text-font-ui .prose {
		--kinto-font-text: var(--kinto-font-ui);
	}
	
	
}
:root {
	:is(div, footer).text-small, :is(div, footer).text-small .prose {
		--font-size-body: 0.9rem;
	}
}
:root {
	div[data-kinto-block=media].with-shadow {
		overflow: hidden;
		border-radius: var(--sm);
		box-shadow: 0px 0px 26px -3px #0006;
	}
}