/* FONTS */

@font-face { 
    font-family: 'Satoshi'; 
    src: 
        url('/assets/fonts/Satoshi-Regular.otf')  
        format('opentype'); 
}

@font-face { 
    font-family: 'SatoshiLight'; 
    src: 
        url('/assets/fonts/Satoshi-Light.otf')  
        format('opentype'); 
}

@font-face { 
    font-family: 'ZodiakLight'; 
    src: 
        url('/assets/fonts/Zodiak-Light.otf')  
        format('opentype'); 
}

/* ANIMATIONS 

/* https://stackoverflow.com/questions/27462306/css3-animate-elements-if-visible-in-viewport-page-scroll */

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade-rotate"] { 
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
  transform: rotate(180deg);
  opacity: 1;
}

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="slide-in"] { 
	transition: 0.7s;
	transform: translate(-10%);
	/*opacity: 0.5;*/
}
[data-inviewport="slide-in"].is-inViewport {
	transform: translate(0);
	/*opacity: 0.5;*/
}

/* GLOBAL VARIABLES */

:root {
	--background-color: rgb(13, 13, 11);
	--background-muted-color: #EAE7E0;
	--footer-background-color: #242422;
	--button-hover-color: #f9f9f9;
	--button-active-color: #f0f0f0;
	--text-color: white;
	--text-inverse-color: #F5F3EF;
	/* --text-muted-color: #969188; */
	--text-muted-color: #7bde8ce1;
	--line-color: #E1DED6;
	--line-inverse-color: rgba(245, 243, 239, 0.15);
	/* --text-muted-inverse-color: rgba(245, 243, 239, 0.4); */
	--text-muted-inverse-color: #7bde8c9d;
	--our-green: #7bde8b;
	--dark--card-bg: #1a1a19;
	--dark--card-hover: #2a2a29;
	--dark--grey: #383836;
	--content-text-color: rgba(255,255, 255, 0.88);
	--text-size-XLHeadline: max(9vw, 1.5rem);
	--text-size-LHeadline: max(6.5vw, 1.25rem);
	--text-size-MHeadline: max(5vw, 1.1rem);
	--text-size-SHeadline: max(3vw, 1.1rem);
	--text-size-XXLarge: max(2.25vw, 1rem);
	--text-size-XLarge: max(1.75vw, 1rem);
	--text-size-Large: max(1.375vw, 1rem);
	--text-size-Medium: max(1vw, 1rem);
	--text-size-Small: max(0.8vw, 0.8rem);
	--symbolic-font: "GFSNeohellenic";
	--menu-size: max(5vh, 2rem);
	--menu-bottom-padding: 15vh;
	--menu-height: calc(100vh - var(--menu-size) - var(--menu-bottom-padding));
	background-color: var(--background-color);
	color: var(--text-color);
	/*overflow-x: hidden;*/
}

@supports (height: 100dvh) { /* iOS 15.4 and higher */
  :root {
    --menu-height: calc(100dvh - var(--menu-size));
  }
}

p {
	font-family: "Satoshi";
	line-height: 150%;
}

.greek {
	font-family: var(--symbolic-font);
}

.muted-text {
	color: var(--text-muted-color);
}

.muted-section {
	background-color: var(--background-muted-color);
}

.inverse-muted-text {
	color: var(--text-muted-inverse-color);
}

/* Disable scrolling on the body when menu is active */
body.no-scroll {
    overflow: hidden;
}

html{
	overflow-x: hidden;
}

/* COOKIE CONSENT */

#cookie-consent-overlay-parent {
	display: flex;
	position: fixed;
	justify-content: center;
	box-sizing: border-box;
	align-items: center;
	top: 0;
	left: 0;
	z-index: 69;
	width: 100vw;
	height: 100vh;
	max-width: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

#cookie-notice {
	position: fixed;
	left: 50%; /* Position it in the horizontal center */
	top: 50%; /* Position it in the vertical center */
	transform: translate(-50%, -50%); /* Adjust the position to truly center it */
	justify-content: center;
	max-width: 90%;
	box-sizing: border-box;
	z-index: 70;
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: var(--text-size-Medium);
	padding: var(--text-size-Medium);
	border-radius: var(--text-size-Medium);
	text-align: center;
	/*width: var(--text-size-Medium)*24;*/
}

#cookie-button-holder {
	display: flex;
	justify-content: center;
	justify-content: space-evenly;
	gap: 1rem;
	max-width: 100%;
	margin-top: 1.5rem;
}

.cookie-button {
	background-color: var(--dark--card-hover);
	color: var(--text-color);
	/* border-color: var(--line-color);
	border: 1px solid; */
	font-size: var(--text-size-Medium);
	padding: var(--text-size-Medium);
	border-radius: var(--text-size-Medium);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: var(--text-size-Medium);
	margin: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	max-width: 30%;
	min-width: 6rem;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
	flex: 1;
	margin: 0 0.5rem;
}

.cookie-button:hover {
	background-color: var(--dark--grey);
}

.cookie-button:active {
	background-color: var(--button-active-color);
}

#cookie-approve-button {
	background-color: var(--text-color);
	color: var(--text-inverse-color);
	border-color: var(--text-color);
}

/* HEADER MENU */

#main-menu {
	position: fixed;
	top: 0;
	width: 100vw;
	height: var(--menu-size);
	border-bottom: 2px solid;
	border-color: var(--line-color);
	background-color: var(--background-color);
	color: var(--text-color);
	text-decoration: none;
	z-index: 1;
}

#main-menu-left-block {
	position: fixed;
	left: 5vw;
}

#main-menu-logo {
	display: inline-block;
	width: calc(var(--menu-size)*0.9);
	height: calc(var(--menu-size)*0.9);
}

#main-menu-title {
	position: absolute;
	display: inline-block;
	height: calc(var(--menu-size)*0.9);
	line-height: var(--menu-size);
	padding-left: calc(var(--menu-size) / 4);
	vertical-align: middle;
	font-family: "SatoshiLight";
	font-size: calc(var(--menu-size) * 0.7);
	color: var(--our-green);
	text-transform: uppercase;
}

/* https://www.w3schools.com/howto/howto_css_menu_icon.asp */

#main-menu-button {
	display: block;
	position: fixed;
	right: 5%;
	width: var(--menu-size);
	height: var(--menu-size);
	cursor: pointer;
}

#mbar1, #mbar2 {
  position: absolute;
  width: calc(var(--menu-size) * 0.75);
  height: 2px;
  background-color: white;
  transition: 0.4s;
}

#mbar1 {
  margin-top: calc(var(--menu-size) * 0.33);
}

#mbar2 {
  margin-top: calc(var(--menu-size) * 0.67);
}

/* Rotate first bar */
.change #mbar1 {
  transform: translate(0, calc(var(--menu-size) * 0.17)) rotate(-45deg);
  background-color: var(--our-green);
}

/* Rotate last bar */
.change #mbar2 {
  transform: translate(0, calc(var(--menu-size) * -0.17)) rotate(45deg);
  background-color: var(--our-green);
}

#main-menu-overlay-parent {
	top: var(--menu-size);
	left: 0;
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	/*transition: background-color 5000ms linear;
	opacity: 0.5;
	transition: opacity 5000ms linear;*/
}

/*
.panel-visible {
	opacity: 1 !important;
	background-color: pink !important;
}*/

#main-menu-panel {
	position: fixed;
	top: var(--menu-size);
	z-index: 2;
	background-color: var(--background-color);
	border-top: 2px solid;
	border-bottom: 2px solid;
	border-color: var(--line-color);
	width: 100%;
	max-height: var(--menu-height);
	overflow-y: scroll;
	font-family: "SatoshiLight";
	font-weight: 300;
	overflow-x: hidden;
	/*opacity: 0.1;
	transition: opacity 0.4s linear;*/
}

/*
.change #main-menu-panel {
	opacity: 1;
}*/

#header-top-panel {
	width: 88vw;
	padding-left: 4.5vw;
	padding-right: 5vw;
}

#header-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--text-size-Medium) * 10), calc(var(--text-size-Medium) * 15)));
	justify-content: space-evenly;
	padding-bottom: var(--text-size-Medium);
}

.header-menu-column {
	display: flex;
	flex-direction: column;
	max-width: max(100%, calc(var(--text-size-Medium) * 15));
	padding-left: calc(var(--text-size-Medium) * 1);
	margin-bottom: var(--text-size-Medium);
	border-left: 2px solid;
	border-color: var(--line-color);
}

.header-menu-column h3 {
	color: var(--text-muted-color);
	text-transform: uppercase;
}

.header-menu-column a {
	color: var(--text-color);
	text-decoration: none;
	padding: calc(var(--text-size-Medium) * 0.2);
}

.header-menu-column a:hover {
	color: var(--text-muted-color);
	text-decoration: underline;
}

#header-menu-contact-box {
	display: flex;
	justify-content: center;
	margin-bottom: var(--text-size-Large);
}

#header-menu-contact-button {
	font-family: "Satoshi";
	font-size: var(--text-size-Medium);
	text-decoration: none;
	text-transform: uppercase;
	padding-top: calc(var(--text-size-Medium) * 0.4);
	padding-bottom: calc(var(--text-size-Medium) * 0.4);
	padding-left: calc(var(--text-size-Medium) * 1.2);
	padding-right: calc(var(--text-size-Medium) * 1.2);
	border-radius: calc(var(--text-size-Medium) * 0.4);
	/* border: 1px solid; */
	background-color: var(--dark--card-hover);
	/* border-color: var(--line-color); */
	color: var(--text-color);
}

#header-menu-contact-button:hover {
	background-color: var(--dark--grey);
	color: var(--text-color);
	/* border-color: var(--text-color); */
}

/* MAIN */

main {
	margin-top: var(--menu-size);
}

/* FOOTER */

footer {
	position: static;
	width: 100%;
	background-color: var(--footer-background-color);
	color: var(--text-inverse-color);
	font-family: "SatoshiLight";
	font-weight: 300;
}

#footer-title {
	display: flex;
	justify-content: center;
	font-size: 12vw;
	text-transform: uppercase;
	margin: 0 0 0 0;
}

#footer-contact-cta {
	display: flex;
	justify-content: center;
	width: 40vw;
	margin-left: auto;
	margin-right: auto;
	font-size: 6vw;
	padding-left: 3vw;
	padding-right: 3vw;
	padding-top: 1.5vw;
	padding-bottom: 1.5vw;
	border-radius: 3vw;
	color: var(--text-inverse-color);
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid;
	border-color: var(--line-inverse-color);
}

#footer-contact-cta:hover {
	background-color: var(--text-inverse-color);
	color: black;
}

#footer-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--text-size-Small) * 10), calc(var(--text-size-Small) * 30)));
	justify-content: space-evenly;
	align-content: center;
	margin-left: 4%;
	margin-right: 4%;
	width: 92%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: calc(var(--text-size-Small) * 4);
}

.footer-menu-column {
	display: flex;
	flex-direction: column;
	/*max-width: calc(var(--text-size-Small) * 30);*/
}

.footer-menu-column h3 {
	color: var(--text-muted-inverse-color);
}

.footer-menu-column a {
	text-decoration: none;
	color: var(--text-inverse-color);
}

.footer-menu-column a:hover {
	text-decoration: underline;
}

#footer-end {
	margin-top: calc(var(--text-size-Small) * 4);
	padding-bottom: var(--text-size-Small);
	border-top: 1px solid;
	border-color: var(--line-inverse-color);
}

#footer-end p {
	display: flex;
	justify-content: center;
	width: auto;
	font-size: var(--text-size-Small);
}

#footer-end p a {
	color: var(--text-muted-inverse-color);
}

/* CONTENT BLOCK */

@media only screen and (min-width: 601px) {
	.content-box-info-outer-block {
		flex-basis: calc(30*var(--text-size-Small));
		/*max-width: calc(60*var(--text-size-Small));*/
		flex-grow: 1;
		flex-shrink: 0;
		display: grid;
		grid-template-columns: 4% auto;
		padding: 6% 6% 8% 4%;
		gap: 4%;
	}

	.faster-growth {
		flex-grow: 3;
	}

	.content-box-info-section-heading-block {
		writing-mode: vertical-rl;
		border-right: 2px solid;
		border-color: var(--line-color);
		color: var(--text-muted-color);
		text-transform: uppercase;

		font-family: "SatoshiLight";
		font-size: var(--text-size-Small);
		line-height: 120%;
		margin-right: 1%;
	}
}

@media only screen and (max-width: 600px) {
	.content-box-info-outer-block {
		padding: 6% 6% 5% 5%;
		gap: 4%;
		/*background-color: green;*/
	}

	.content-box-info-section-heading-block {
		border-bottom: 2px solid;
		border-color: #e1ded6;
		color: var(--text-muted-color);
		text-transform: uppercase;

		font-family: "SatoshiLight";
		font-size: var(--text-size-Small);
		line-height: 120%;
		margin-bottom: 1vw;
	}

	.content-box-info-section-heading-block  h2 {
		line-height: 120%;
	}
}

.content-box-info-section-inner-block {
	/*background-color: yellow;*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: stretch;
	gap: 5vw;
	max-width: 100%;
}

.content-box-info-title-block {
	/*background-color: pink;*/
	flex: 1 0 calc(30*var(--text-size-Small));
	max-width: 100%;
	overflow: hidden;
}

@media only screen and (min-width: 601px) {
	.site-section {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border-bottom: 2px solid;
		border-color: #e1ded6;
		box-sizing: border-box;
		max-width: 100%;
		overflow-x: hidden;
	}
}

@media only screen and (max-width: 600px) {
	.site-section {
		border-bottom: 2px solid;
		border-color: #e1ded6;
		box-sizing: border-box;
		max-width: 100%;
		overflow-x: hidden;
	}
}


.section-title-lead {
	font-size: var(--text-size-MHeadline);
	font-family: "SatoshiLight";
	font-weight: 300;
	text-transform: uppercase;
	margin: 0 0 0 0;
}

.section-title-main {
	font-size: var(--text-size-LHeadline);
	font-family: "ZodiakLight";
	font-weight: 300;
	text-transform: uppercase;
	margin: 0 0 0 0;
}

.section-title-sub {
	font-size: var(--text-size-XXLarge);
	font-family: "ZodiakLight";
	font-weight: 300;
	text-transform: uppercase;
	margin: 0 0 0 0;
}

.content-box-info-main-block {
	/*background-color: blue;*/
	font-family: "SatoshiLight";
	flex: 1 0 calc(25*var(--text-size-Small));
	max-width: calc(var(--text-size-XLarge) * 40);
	font-size: var(--text-size-XLarge);
	/*margin-top: -2rem;*/
}

.content-box-info-main-block a {
	font-family: "SatoshiLight";
	font-size: var(--text-size-XLarge);
	line-height: 200%;
	text-decoration: none;
	color: var(--text-color);
	/*color: var(--text-muted-color);*/
	font-style: italic;
}

.content-box-info-main-block a:hover {
	color: var(--text-muted-color);
	text-decoration: underline;
}

.image-section {
	border-bottom: 2px solid;
	border-color: #e1ded6;
}

/* LEAD */

.lead-box-outer-block {
	padding: 6vw 6vw 8vw 4vw;
	width: 90vw;
}

.lead-title {
	font-size: var(--text-size-XLHeadline);
	font-family: "SatoshiLight";
	font-weight: 300;
	text-transform: uppercase;
	margin: 0 0 0 0;
}

.lead-box-inner-block {
	font-size: var(--text-size-XXLarge);
	font-family: "SatoshiLight";
	max-width: calc(var(--text-size-XXLarge) * 40);
}

.lead-box-text-block {
	max-width: calc(var(--text-size-XXLarge) * 30);
}

.lead-box-cta-block {
	align-content: end;
	margin-left: auto;
	margin-right: 5vw;
	margin-bottom: 5vw;
	text-align: right;
	max-width: calc(var(--text-size-XXLarge) * 7);
}

.lead-box-cta-block a, .cta-block a {
	font-family: "ZodiakLight";
	font-style: italic;
	background-color: var(--dark--card-hover);
	color: var(--text-color);
	text-decoration: none;
	padding: calc(var(--text-size-XXLarge) * 0.4);
	border-radius: calc(var(--text-size-XXLarge) * 0.4);
}

.lead-box-cta-block a:hover {
	background-color: var(--dark--grey);
	color: var(--text-color);
	/* border: 1px solid;
	border-color: var(--text-color); */
}

/* HIGHLIGHT */

.highlight-box-outer-block {
	/*background-color: gray;*/
	padding: 6% 6% 8% 4%;
	width: 90%;
	max-width: 100%;
}

.highlight-box-outer-block-contacted {
	/*background-color: gray;*/
	padding: 6% 6% 0% 4%;
	width: 90%;
	max-width: 100%;
}

.highlight-title {
	font-size: var(--text-size-LHeadline);
	font-family: "SatoshiLight";
	font-weight: 300;
	text-transform: uppercase;
	margin: 0 0 0 0;
}

.smaller-highlight {
	font-size: var(--text-size-LHeadline);
}

.highlight-box-inner-block {
	/*background-color: pink;*/
	font-size: var(--text-size-XLarge);
	font-family: "SatoshiLight";
	max-width: calc(var(--text-size-XLarge) * 50);
}

.highlight-box-text-block {
	/*background-color: yellow;*/
	max-width: calc(var(--text-size-XLarge) * 40);
}
.highlight-box-text-block-contacted {
	/*background-color: yellow;*/
	max-width: calc(var(--text-size-XLarge) * 60);
}

.highlight-box-cta-block {
	align-content: end;
	margin-left: auto;
	margin-right: 5vw;
	margin-bottom: 5vw;
	text-align: right;
}

.cta-block {
	align-content: end;
	margin-left: auto;
	margin-top: 5vw;
	margin-bottom: 5vw;
	text-align: right;
}

.highlight-box-cta-block a, .cta-block a {
	font-family: "ZodiakLight";
	font-style: italic;
	background-color: var(--dark--card-hover);
	color: white;
	text-decoration: none;
	padding: calc(var(--text-size-XLarge) * 0.4);
	border-radius: calc(var(--text-size-XLarge) * 0.4);
}

.highlight-box-cta-block a:hover, .cta-block a:hover {
	background-color: var(--dark--grey);
	color: var(--text-color);
	/* border: 1px solid;
	border-color: var(--text-color); */
}


.image-section img {
	width: 100%;
}


.landing-usp-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, max(20vw, calc(var(--text-size-Medium)*18)));
	grid-gap: 2vw;
	justify-content: space-evenly;
	padding: 1vw 1vw 2vw 1vw;
}

.landing-usp-box {
	padding: var(--text-size-Medium);
	border-top: 1px solid;
	border-right: 2px solid;
	border-color: var(--line-color);

	font-family: "Zodiak";
	font-size: var(--text-size-Medium);

	margin-bottom: max(2vw, var(--text-size-Medium));
	max-width: 100%;
	box-sizing: border-box;
}

.landing-usp-img-box img {
	width: calc(var(--text-size-Medium)*22);
	height: calc(var(--text-size-Medium)*22);
	max-width: 100%;
	object-fit: cover;
}

.landing-usp-lead-box {
	font-family: "SatoshiLight";
	font-weight: bold;
}

.landing-usp-title {
	text-transform: uppercase;
}

.landing-usp-detail-box {
	/*display: none;*/
}


/* LEAD */

.lead-title {
	font-size: var(--text-size-XLHeadline);
	font-family: "SatoshiLight";
	font-weight: 300;
	text-transform: uppercase;
	margin: 0 0 0 0;

	margin-bottom: 5vw;
	text-align: right;
	max-width: calc(var(--text-size-XXLarge) * 7);
}

.cta-block {
	align-content: end;
	margin-left: auto;
	margin-right: 5vw;
	text-align: right;
}

.lead-box-cta-block a, .cta-block a {
	font-family: "ZodiakLight";
	font-style: italic;
	background-color: var(--dark--card-hover);
	color: var(--text-color);
	text-decoration: none;
	padding: calc(var(--text-size-XXLarge) * 0.4);
	border-radius: calc(var(--text-size-XXLarge) * 0.4);
}

.lead-box-cta-block a:hover, .cta-block a:hover {
	background-color: var(--dark--grey);
	color: var(--text-color);
	/* border: 1px solid;
	border-color: var(--text-color); */
}

/* TEAM */

.org-level {
	width: 100%;
}

.org-level-title-box {
	margin-left: 5vw;
}

.org-level-title-box h3 {
	font-family: "SatoshiLight";
	font-weight: bold;
	text-transform: uppercase;
	font-size: var(--text-size-Large);
}

.org-level-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, max(25vw, calc(var(--text-size-Medium)*22)));
	grid-gap: 2vw;
	justify-content: space-evenly;
	padding: 1vw 1vw 2vw 1vw;
}

.org-level-container-contacted {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, max(20vw, calc(var(--text-size-Medium)*22)));
	grid-gap: 1vw;
	justify-content: space-evenly;
}

.hr-box {
	padding: var(--text-size-Medium);
	border-top: 1px solid;
	border-right: 2px solid;
	border-color: var(--line-color);

	font-family: "Zodiak";
	font-size: var(--text-size-Medium);

	margin-bottom: max(2vw, var(--text-size-Medium));
	max-width: 100%;
	box-sizing: border-box;
}

.hr-img-box {
}

.hr-img-box img {
	width: calc(var(--text-size-Medium)*22);
	height: calc(var(--text-size-Medium)*22);
	max-width: 100%;
	object-fit: cover;
}

.hr-lead-box {
	font-family: "SatoshiLight";
	font-weight: bold;
}

.hr-name {
	text-transform: uppercase;
}

.hr-title {
}

.hr-bio-box {

	/*display: none;*/
}

/* BLOG COVER */

.blog-header {
	font-family: "SatoshiLight";
	font-weight: bold;
	padding-top: var(--text-size-XXLarge);
	font-size: var(--text-size-XXLarge);
	text-align: center;
	text-transform: uppercase;
	color: var(--text-muted-color);
}

.blog-cover-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: stretch;
}

.blog-cover-column {
}

.blog-cover-column h2 {
	font-family: "SatoshiLight";
	font-weight: bold;
	font-size: var(--text-size-XLarge);
	text-align: left;
	margin-top: calc(var(--text-size-XLarge)*1.5);
	margin-left: calc(var(--text-size-XLarge)*2);
	text-transform: uppercase;
}

.blog-cover-news-block {
	min-width: 20rem;
	flex-basis: 20rem;
	flex-grow: 2;
	background-color: var(--box-colour);
}

.blog-cover-articles-block {
	min-width: 20rem;
	flex-basis: 40rem;
	flex-grow: 4;
	background-color: var(--content-background-color);
}

.blog-cover-latest-posts-block {
	min-width: 15rem;
	flex-grow: 1;
	background-color: var(--box-colour);
}

/* BLOG */

.post-list-header {
	/*border-bottom: 2px solid;
	border-color: #e1ded6;*/
	color: var(--text-muted-color);
	text-transform: uppercase;

	font-family: "SatoshiLight";
	font-size: var(--text-size-XLarge);
	/*margin-left: 5vw;*/
	margin-top: 1%;
	margin-left: 1%;
}

.blog-posts {
	width: 100%;
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, max(20vw, calc(var(--text-size-Medium)*18)));
	grid-gap: 2vw;
	justify-content: space-evenly;
	padding: 1vw 1vw 2vw 1vw;
	overflow-x: hidden;
}

.brief-posts {
	grid-gap: calc(var(--text-size-Medium)*1);
}

.blog-preview-a {
	text-decoration: none;
	color: var(--text-color);
	max-width: 100%;
}

.blog-preview-container {
	max-width: 100%;
	height: calc(var(--text-size-Medium)*32);
	padding: 0px;
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	background-color: var(--dark--card-bg);
	border-radius: 8px;
	overflow: hidden;
}

.blog-preview-short {
	height: calc(var(--text-size-Medium)*16);
}

.blog-preview-text{
	padding-left: var(--text-size-Medium);
	padding-right: var(--text-size-Medium);
	padding-bottom: var(--text-size-Medium);
}

.blog-preview-container:hover {
	background-color: var(--dark--card-hover);
}

.blog-preview-container:hover .blog-preview-title{
	color: var(--our-green);
}

.blog-preview-container:hover img{
	transform: scale3d(1.1, 1.1, 1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}
.blog-preview-container{
	overflow: hidden;
}

.blog-preview-brief {
	height: calc(var(--text-size-Medium)*6);
	font-size: var(--text-size-Medium);
	padding-left: var(--text-size-Medium);
	padding-right: var(--text-size-Medium);
	padding-top: 0;
	padding-bottom: 0;
	border-right: 2px solid var(--line-color);
	border-left: 1px solid transparent;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}

.blog-preview-brief .blog-preview-title {
	font-size: var(--text-size-Medium);
}

.blog-preview-brief .blog-preview-date {
	margin-top: 0;
}

.blog-preview-brief:hover {
	border-color: var(--line-color);
}

.blog-preview-title {
	font-family: "SatoshiLight";
	font-weight: bold;
	font-size: var(--text-size-Large);
}

.blog-preview-container p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--text-size-Medium);
}

.blog-preview-container .blog-preview-img {
	width: calc(var(--text-size-Medium)*22);
	height: calc(var(--text-size-Medium)*14);
	max-width: 100%;
	overflow: hidden;

	/* object-fit: cover; */
}

.blog-preview-img img{
	transition: transform .5s ease;
	width: calc(var(--text-size-Medium)*22);
	height: calc(var(--text-size-Medium)*14);
	max-width: 100%;
	object-fit: cover; 
}

.blog-preview-date {
	color: var(--text-muted-color);
	font-family: "Zodiak";
	font-style: italic;
	font-size: var(--text-size-Medium);
	text-align: right;
}

/* BLOG POST */

pre{font-family:Consolas,"courier new";color:#fff;background-color:#3b3434;padding:1rem;max-width:45rem;overflow:auto;margin-left:auto;margin-right:auto}

.figure-image {
	background-color: var(--content-background-color);
	max-width: 80%;
	margin-top: calc(var(--text-size-Large)*2);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: calc(var(--text-size-Large)*2);
}

.figure-image img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	object-fit: contain;
}

.figure-image figcaption {
	text-align: center;
	margin-top: 1em;
	font-style: italic;
	font-size: var(--text-size-Large);
}

.post-content {
	display: block;
	/*background-color: pink;*/
	font-family: "SatoshiLight";
	line-height: 200%;
	max-width: calc(var(--text-size-XLarge) * 40);
	font-size: var(--text-size-XLarge);
}

.post-content p, .post-content p a {
	font-size: var(--text-size-Large);
	color: var(--content-text-color);
}

.post-content h4, .post-content h4 a {
	font-family: "SatoshiLight";
	font-size: var(--text-size-Large);
	text-transform: uppercase;
}

.post-content h3, .post-content h3 a {
	font-family: "SatoshiLight";
	font-size: var(--text-size-XLarge);
	text-transform: uppercase;
}

.post-content h2, .post-content h2 a {
	font-family: "SatoshiLight";
	font-size: var(--text-size-XXLarge);
	text-transform: uppercase;
}

.post-content li, .post-content li a {
	font-size: var(--text-size-Large);
	margin: calc(var(--text-size-Large)*0.5);
}

.post-content p a, .post-content h2 a, .post-content h3 a, .post-content li a {
	color: var(--text-muted-color);
	text-decoration: none;
}

.post-content p a:hover, .post-content h2 a:hover, .post-content h3 a:hover, .post-content li a:hover {
	text-decoration: underline;
}

/* BACKGROUND IMAGES, INDEX */

#index-software-referral {
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
	width: 100%;
	max-width: 100%
}

#index-software-referral p {
	font-size: var(--text-size-SHeadline);
	font-family: "ZodiakLight";
	font-weight: normal;
	text-transform: uppercase;
}

#index-software-referral .cta-block {
	font-size: var(--text-size-XXLarge);
	text-align: center;
}

.image-cover {
	background-color: var(--background-color);
	opacity: 0.90;
}

#index-lead-section {
	background-image: url("/assets/images/static/gen/2.jpg");
	background-size: cover;
}

#index-what-we-do-section {
	background-image: url("/assets/images/static/gen/3.webp");
	background-size: cover;
}

#index-grants-section {
	background-image: url("/assets/images/static/gen/5.webp");
	background-size: cover;
}

#index-responsible-section {
	background-image: url("/assets/images/static/gen/8.webp");
	background-size: cover;
	background-position: center;
}

#index-responsible-section .image-cover {
	opacity: 0.85;
}

#index-ip-section {
	background-image: url("/assets/images/static/gen/7.webp");
	background-size: cover;
	background-position: center;
}

#index-incremental-value-section {
	background-image: url("/assets/images/static/gen/4.webp");
	background-size: cover;
	background-position: center;
}

#blog-lead-section {
	background-size: cover;
	text-align: center;
}

#blog-lead-section p {
	font-family: "SatoshiLight";
	font-size: var(--text-size-XXLarge);
	/*font-weight: bold;*/
}

#blog-lead-section .image-cover {
	opacity: 0.80;
}

#services-lead-section {
	background-image: url("/assets/images/static/gen/32.webp");
	background-size: cover;
}

#services-lead-section .image-cover {
	opacity: 0.85;
}

#services-tba {
	background-image: url("/assets/images/static/gen/31.webp");
	background-size: cover;
}

#services-tba-section .image-cover {
	opacity: 0.875;
}

#services-custom-software {
	background-image: url("/assets/images/static/gen/33.webp");
	background-size: cover;
}

#services-custom-software-section .image-cover {
	opacity: 0.875;
}

#services-responsible-section {
	background-image: url("/assets/images/static/gen/42.webp");
	background-size: cover;
}

#services-ip-section {
	background-image: url("/assets/images/static/gen/43.webp");
	background-size: cover;
}

#services-incremental-value-section {
	background-image: url("/assets/images/static/gen/44.webp");
	background-size: cover;
}

#nlp-lead-section {
	background-image: url("/assets/images/static/gen/38.webp");
	background-size: cover;
}


#nlp-lead-section .image-cover {
	opacity: 0.875;
}

#nlp-industries-section {
	background-image: url("/assets/images/static/gen/39.webp");
	background-size: cover;
}

#ar-vr-lead-section {
	background-image: url("/assets/images/static/gen/42.webp");
	background-size: cover;
}

#ar-vr-industries-section {
	background-image: url("/assets/images/static/gen/41.webp");
	background-size: cover;
}

/*
#ar-vr-industries-section .image-cover {
	opacity: 0.875;
}*/

#cv-lead-section {
	background-image: url("/assets/images/static/gen/11.webp");
	background-size: cover;
}

#cv-lead-section .image-cover {
	opacity: 0.825;
}

#cv-case-studies-section {
	background-image: url("/assets/images/static/gen/19.webp");
	background-size: cover;
}

#cv-industries-section {
	background-image: url("/assets/images/static/gen/18.webp");
	background-size: cover;
}

#gen-ai-lead-section {
	background-image: url("/assets/images/static/gen/11.webp");
	background-size: cover;
}

#gen-ai-lead-section .image-cover {
	opacity: 0.85;
}

#gen-ai-benefits-section {
	background-image: url("/assets/images/static/gen/14.webp");
	background-size: cover;
}

#gen-ai-founder-section {
	background-image: url("/assets/images/static/gen/17.webp");
	background-size: cover;
}

#gen-ai-founder-section .image-cover {
	opacity: 0.85;
}

#gen-ai-industries-section {
	background-image: url("/assets/images/static/gen/12.webp");
	background-size: cover;
}

#hpc-lead-section {
	background-image: url("/assets/images/static/gen/34.webp");
	background-size: cover;
}

#hpc-lead-section .image-cover {
	opacity: 0.85;
}

#hpc-applications-section {
	background-image: url("/assets/images/static/gen/35.webp");
	background-size: cover;
}

#hpc-applications-section .image-cover {
	opacity: 0.875;
}

#hpc-founder-section {
	background-image: url("/assets/images/static/gen/36.webp");
	background-size: cover;
}

#iot-lead-section {
	background-image: url("/assets/images/static/gen/28.webp");
	background-size: cover;
}

#iot-edge-at-technolynx-section {
	background-image: url("/assets/images/static/gen/30.webp");
	background-size: cover;
}

#iot-industries-section {
	background-image: url("/assets/images/static/gen/29.webp");
	background-size: cover;
}

/*
#post-lead-section {
	background-image: url("/assets/images/static/gen/28.webp");
	background-size: cover;
}

#post-lead-section .image-cover {
	opacity: 0.95;
}*/

#demos-section {
	background-image: url("/assets/images/static/gen/46.webp");
	background-size: cover;
}

#collaboration-lead-section {
	background-image: url("/assets/images/static/gen/47.webp");
	background-size: cover;
}

#collaboration-grants-section {
	background-image: url("/assets/images/static/gen/40.webp");
	background-size: cover;
}

#careers-lead-section {
	background-image: url("/assets/images/static/gen/52.webp");
	background-size: cover;
}

#careers-lead-section .image-cover {
	opacity: 0.875;
}

#values-lead-section {
	background-image: url("/assets/images/static/gen/48.webp");
	background-size: cover;
}

#values-lynx-section {
	background-image: url("/assets/images/static/gen/49.webp");
	background-size: cover;
}

#values-math-section {
	background-image: url("/assets/images/static/gen/50.webp");
	background-size: cover;
}

#values-kompania-section {
	background-image: url("/assets/images/static/gen/51.webp");
	background-size: cover;
}