@media only screen and (max-width: 888px) {
/*
	html, body {
	  overflow-x: hidden;
	}
	
	body {
	  position: relative
	}
*/
	/* tmp */
	
	img {
		width: 100%;
		height: auto;
	}


	#page {
		padding-top: var(--page-padding-top) ;
	}

	main > h1:first-of-type {
		display: none;
		}

	#hero {
		display: flex; 
		padding: 0 1rem ;
		position: relative;
		color: #D3D3D3;
		width: 100%;
		background: linear-gradient(
			#040707 0% 90%,
			#181818 90% 100%
			);
	  }

	#hero .logo-alpha {
		background-image: var(--home-hero-bg);
		background-position: center bottom;
		background-size: contain;
		background-repeat: no-repeat;
		height: calc(130vw * 0.5);
		width: 100%;
		min-height: 300px;
		max-height: 425px;
			
	  }
	  
	#hero .tag h2 {
		font-size: 1rem;
		text-transform: uppercase;
		font-weight: 400;
		font-stretch: 110%;
		letter-spacing: 0.06rem;
		max-width: 600px;
		}

	#about {
		width: 100%;
		padding: 4rem 1rem 2rem 1rem;
		color: #D3D3D3;
		background: linear-gradient(
			#181818 0% 90%,
			#D3D3D3 90% 100%
			);		
		}

	#about article {
		background-color: unset;
		} 

	#about article.intro h3 {
		display: none;
		}

	#about article.intro>div>a {
		color: #D3D3D3;
		} 

	#about h2 {
		font-size: 2rem;
		line-height: 1em;
		font-weight: 250;
		color: #FAE700;
		text-transform: uppercase ;
		margin-bottom: 1rem;
		}

	#about h2::after {
		content: ' c\'est...' ;
		white-space: pre-wrap;
		}

	#about h2 span::after {
		content: '\A' ;
		white-space: pre-wrap;
		}

	#about h3 {
		font-size: 1.3rem;
		line-height: 1.4em;
		font-weight: 200;
		margin-bottom: 0.8rem;
		}

	#about h3::before {
		content: '... '; 
		}

	#about h3 span {
		display: none; 
		}

	#about article.intro {
		font-size: 1.1rem;
		line-height: 1.3em;
		font-weight: 300;
	}

	#about article.intro>div>a:first-of-type {
		display: block;
		margin-bottom: 2rem;
	}

	#about article.intro>div>a div.btn_b_l span {
		color: #040707;
	}

	#about article.intro > p:not(:last-child) {
		margin-bottom: 1rem; 
	}

	#about p.caa {
		display: flex;
		align-items: center;
		margin: 0;
		background-image: var(--home-toc-caa);
		background-position: right center;
		background-size: contain;
		background-repeat: no-repeat;
		height: 12vw;
		font-size: 0.6rem;
		font-family: Arial, sans-serif;
		line-height: 0.7rem;
		text-transform: uppercase;
		padding-right: 7rem;
		}


/* TOC */


	nav#toc {
	  padding: 0.5rem 1rem;
	  background: var(--home-toc-bg-i), var(--home-toc-bg-ap), var(--home-toc-bg-img), #D3D3D3;
	  background-position: -10% 20%, 0 25%, 0 bottom ;
	  background-repeat: repeat-x, repeat-x, no-repeat ;
	  background-size:  auto 3%, auto 3%, 100% auto ;
	  }

	nav#toc>div>div {
		position: relative;
		overflow: hidden;
		padding: 0.5rem 0.5rem 1rem 0.5rem;
		border-radius: 0.7rem;
		color: #FAE700; 
		background-color: #040707; 
		}

	nav#toc>div>div:first-child {
		color: #040707; 
		background-color: #FAE700; 
		}

	nav#toc>div>div:first-child a {
		color: #040707; 
		}

	nav#toc>div>div.res>div>a {
		margin-top: 1rem;
		display: block;
		}

	nav#toc>div>div h2 {
		padding: 0 0 0 1.5rem ;
		font-size: 2rem;
		line-height: 1em;
		font-weight: 200;
		color: #FAE700;
		text-transform: uppercase;
		}

	nav#toc>div>div h2 a {
		color: #FAE700 ;
		}

	nav#toc>div>div p {
		padding: 0.5rem 1.5rem 0.5rem 1.5rem; 
		font-size: 1rem;
		font-weight: 300;
		line-height: 1.4em;
		}

	nav#toc>div>div>p:last-of-type {
		padding: 0.5rem 1.5rem 1.5rem 1.5rem; 
		}

	nav#toc>div>div h2 span::after {
		content: '\A' ;
		white-space: pre-wrap;
		}

	nav#toc>div>div>picture {
		position: relative ; 
		top: -2rem;
		right: -2rem;
		width: 100%;
		height: auto;
		}

	nav#toc>div>div>picture img {
		width: 100%;
		height: auto;
		border-radius: 0.7rem;
		}

	nav#toc>div>div .btn_b_l {
		width: 7rem;
		}

	nav#toc>div>div .btn_b_l, nav#toc>div>div .btn_b_l a {
		color: #FAE700;
		background-color: #040707;
		}

	nav#toc>div:nth-child(2)>div .btn_b_l, nav#toc>div:nth-child(2)>div .btn_b_l a {
		color: #040707;
		background-color:#FAE700 ;
		}

	nav#toc>div:nth-child(2)>div {
		margin-top: 3rem;
		color:#FAE700; 
		background-color: #040707 ; 
		}

	nav#toc>div:nth-child(2)>div a {
		color: #FAE700;
		}

	nav#toc>div:nth-child(2)>div:first-child .btn_b_l, nav#toc>div:nth-child(2)>div:first-child .btn_b_l a {
		color: #040707;
		}

	nav#toc>div>div>div {
		display: flex;
		flex-flow: column wrap;
		padding: 0 0 1.5rem 1.5rem;
		}
	
	nav#toc div>a>p.subventions {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 1rem 8rem 1rem 0;
		margin: 0 0 1rem 0;
		background: var(--home-toc-rc);
		background-position: 95% 30%;
		background-size: auto 70%;
		background-repeat: no-repeat;
		height: 3rem ;
		font-size: 0.8rem;
		font-family: Arial, sans-serif;
		line-height: 0.9rem;
		text-transform: uppercase;
		}

	nav#toc>div:last-of-type {
		height: 35vw;
		min-height: 150px;
		max-height: 300px;
		}

	nav#case-studies {
		background-color: #FAE700 ;
	}

	nav#case-studies h2 {
	  font-size: 1.5rem;
	  font-weight: 200;
	  color: #040707;
	  text-transform: uppercase;
	}

	nav#case-studies>div {
		display: flex;
		justify-content: space-between;
		padding: 1.5rem ;
	}

	nav#case-studies .btn_b_l {
		align-self: baseline;
	}
	
	nav#case-studies .btn_b_l, nav#case-studies .btn_b_l a {
		color: #FAE700;
  		background-color: #040707;
	}

	nav#whitepapers-and-tools {
		position: relative;
		padding: 1rem 0 0 0 ;
	}

	nav#whitepapers-and-tools>div:first-of-type {
		padding: 0 1rem ;
	}

	nav#whitepapers-and-tools h2 {
	  color: #FAE700;
	  margin-top: 2rem;
	  font-size: 2rem;
	  line-height: 1em;
	  font-weight: 200;
	  text-transform: uppercase;
	}

	nav#whitepapers-and-tools p {
		color: #D3D3D3;
		margin: 0.75rem 0 1rem 0;
		width: 75%;
		font-size: 0.9rem;
		font-weight: 400;
		line-height: 1.2rem;
		}


	nav#whitepapers-and-tools>div:last-of-type {
		position: relative;
		width: 100%;
		height: 80vw;
		overflow: hidden;
		}

	nav#whitepapers-and-tools img {
		position: absolute;
		top: -5%; 
		right: -15%; 
		width: 100%;
		height: auto;
		}

}

@media only screen and (min-width: 889px) {

	main > h1:first-of-type {
		display: none;
		}

	#hero {
		position: relative;
		color: #D3D3D3;
		width: 100%;
		height: 20rem;
		background: linear-gradient(
			#040707 0% 75%,
			#181818 75% 100%
			);
		padding: 0 2rem ;
	  }

	#hero .tag {
		float: left;
		margin-top: 12vh;
		width: 30%;
		}

	#hero .logo-alpha {
		background-image: var(--home-hero-bg);
		background-position: right 2rem bottom;
		background-size: 70% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
	  }

	#hero .tag h2 {
		font-size: 0.8rem;
		text-transform: uppercase;
		font-weight: 300;
		font-stretch: 111%;
		letter-spacing: 0.05rem;
		}

	#about {
	  padding: 2rem 2rem 0 2rem;
	  display: grid;
	  grid-template-columns: 50% 1fr ;
	  grid-template-rows: auto 7rem 7rem;
	  grid-template-areas: 
			"a b"
			"d c"
			"d .";
		grid-gap: 2rem;
		color: #D3D3D3;
		width: 100%;
		background: linear-gradient(
			#181818 0% 95%,
			#D3D3D3 95% 100%
			);
	}

	#about article {
		background-color: unset;
		} 

	#about article.intro>div>a {
		color: #D3D3D3;
		} 

	#about article.intro>div>a:first-of-type span {
		color: #040707;
		}

	#about article.intro>div>a:last-of-type {
		margin-right: 1.5rem ;
		}

	#about h2 {
		grid-area: a;
		font-size: 3rem;
		line-height: 1em;
		font-weight: 250;
		color: #FAE700;
		text-transform: uppercase ;
		}

	#about h2::after {
		content: ' c\'est...' ;
		white-space: pre-wrap;
		}

	#about h2 span::after {
		content: '\A' ;
		white-space: pre-wrap;
		}

	#about div:first-of-type {
		grid-area: b;
		display: flex;	
		align-items: flex-end;
		}

	#about h3 {
		font-size: 1.5rem;
		line-height: 1.2em;
		font-weight: 200;
	}

	#about h3::before {
		display: inline;
		content: '... '; 
		}
		
	#about h3 span {
		display: none; 
		}

	#about article.intro {
	 grid-area: c;
	 font-size: 0.8rem;
	 line-height: 1.3em;
	 font-weight: 300;
	}

	#about article.intro > p:not(:last-child) {
		margin-bottom: 1rem; 
	}

	#about div.media {
	 grid-area: d;
	 display:flex;
	 align-items: end;
	 justify-content: center;
	}

	#about p.caa {
		display: flex;
		align-items: center;
		padding: 0 3rem 0 0;
		margin: 0;
		background-image: var(--home-toc-caa);
		background-position: right center;
		background-size: contain;
		background-repeat: no-repeat;
		height: 1.5rem;
		font-size: 0.45rem;
		font-family: Arial, sans-serif;
		line-height: 0.7rem;
		text-transform: uppercase;	
		}

	#about article.intro h3 {
		display: none;
		}

	#about > article.intro > div {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: center;
		}

	nav#toc {
	  display: grid;
	  grid-template-columns: 50% 1fr ;
	  grid-template-rows: auto ;
	  grid-template-areas: 
			"a b"
			"c c";
	  grid-gap: 2rem;
	  padding: 5rem 2rem 2rem 2rem;
	  background: var(--home-toc-bg-i), var(--home-toc-bg-ap), var(--home-toc-bg-img), #D3D3D3;
	  background-position: -10% 20%, 0 25%, 0 bottom ;
	  background-repeat: repeat-x, repeat-x, no-repeat ;
	  background-size:  auto 3%, auto 3%, 100% auto ;
	  }

	nav#toc>div>div {
		position: relative;
		overflow: hidden;
		padding: 1rem 1rem 2rem 1rem;
		border-radius: 0.7rem;
		color: #FAE700; 
		background-color: #040707; 
		}

	nav#toc>div>div:first-child {
		color: #040707; 
		background-color: #FAE700; 
		}

	nav#toc>div>div:first-child a {
		color: #040707; 
		}

	nav#toc>div>div h2 {
		padding: 0 0 0 2rem ;
		font-size: 2rem;
		line-height: 1em;
		font-weight: 200;
		color: #FAE700;
		text-transform: uppercase;
		}

	nav#toc>div>div h2 a {
		color: #FAE700 ;
		}

	nav#toc>div>div p {
		padding: 0.5rem 1rem 0.5rem 2rem; 
		font-size: 0.9rem;
		font-weight: 300;
		line-height: 1.4em;
		}

	nav#toc>div>div>p>a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
		}

	nav#toc>div>div>p:last-of-type {
		padding: 0.5rem 1rem 1rem 2rem; 
		}

	nav#toc>div>div h2 span::after {
		content: '\A' ;
		white-space: pre-wrap;
		}

	nav#toc>div>div>picture {
		position: relative ; 
		top: -2rem;
		right: -2rem;
		width: 100%;
		height: auto;
		}

	nav#toc>div>div>picture img {
		width: 100%;
		height: auto;
		border-radius: 0.7rem;
		}

	nav#toc>div>div .btn_b_l, nav#toc>div>div .btn_b_l a {
		color: #FAE700;
		background-color: #040707;
		}

	nav#toc>div:nth-child(2)>div .btn_b_l, nav#toc>div:nth-child(2)>div .btn_b_l a {
		color: #040707;
		background-color:#FAE700 ;
		}

	nav#toc>div:nth-child(2)>div {
		margin-top: 5rem;
		color:#FAE700; 
		background-color: #040707 ; 
		}

	nav#toc>div:nth-child(2)>div a {
		color: #FAE700;
		}

	nav#toc>div:nth-child(2)>div:first-child .btn_b_l, nav#toc>div:nth-child(2)>div:first-child .btn_b_l a {
		color: #040707;
		}

	nav#toc>div>div>div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 2.25rem;
		}
	
	nav#toc div>a>p.subventions {
		display: flex;
		align-items: center;
		padding: 0 6rem 0 1rem;
		margin: 0;
		background: var(--home-toc-rc);
		background-position: 85% 30%;
		background-size: auto 70%;
		background-repeat: no-repeat;
		width: 100%;
		height: 3vw;
		font-size: 0.45rem;
		font-family: Arial, sans-serif;
		line-height: 0.7rem;
		text-transform: uppercase;	
		}

	nav#toc>div:last-of-type {
		height: 35vw;
		min-height: 150px;
		max-height: 300px;
		}

	nav#case-studies {
		background-color: #181818; 
		}

	nav#case-studies>div {
		display: flex;
		align-items: center;
		justify-content: space-between;	
		position: relative ; 
		top: -65px;
		margin: 0 1.5rem;
		border-radius: 0.7rem;
		background-color: #FAE700;
		height: 6vw;
		min-height: 100px;
		padding: 1.5rem;
		}

	nav#case-studies h2 {
		color: #040707;
		margin-top: 0.8rem;
		font-size: 2rem;
		line-height: 1em;
		font-weight: 200;
		text-transform: uppercase;
		}

	nav#case-studies div.btn_b_l {
		color: #FAE700;
		background-color: #040707;
		}

	nav#case-studies div.btn_b_l a {
		color:  #FAE700;
		}

	nav#whitepapers-and-tools {
		display: grid;
		grid-template-columns: 50% 1fr ;
		grid-template-rows: auto ;
		grid-template-areas: 
				"a b";
		grid-gap: 0.25rem;
		background-color: #181818;
		}

	nav#whitepapers-and-tools {
		color: #D3D3D3;
		}

	nav#whitepapers-and-tools>div:first-of-type {
		grid-area: a;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		text-align: right;
		}

	nav#whitepapers-and-tools>div:last-of-type {
		grid-area: b;
		display: flex;
		align-items: flex-start;
		}

	nav#whitepapers-and-tools h2 {
		color: #FAE700;
		margin-top: 2rem;
		font-size: 2rem;
		line-height: 1em;
		font-weight: 200;
		text-transform: uppercase;
		}
	
	nav#whitepapers-and-tools h2 span::after {
		content: '\A' ;
		white-space: pre-wrap;
		}

	nav#whitepapers-and-tools img {
		width: 80%;
		height: auto;
		}

	nav#whitepapers-and-tools p {
		margin: 0.75rem 0 1rem 0 ;
		width: 75%;
		font-size: 0.8rem;
		font-weight: 400;
		line-height: 1rem;	
		}

}
	
	#about .youtube {
		width: 100%;
		aspect-ratio: 16 / 9;
		background-image: 	 var(--page-asset-yt-play),  var(--page-asset-yt-background)  ;
		background-size:     15% auto, 110% auto ;
   		background-repeat:   no-repeat, no-repeat;
    	background-position: center center, center center;
    	border-radius: 0.7rem;
    	cursor: pointer;
    	margin-top: 2rem;
		}
		
	#about .youtube span {
		display: none; }