/*my colorsmmbackgrround -> #131313h1, p -> #e4e4e4a -> color:rgb(179, 205, 213);

/*TO DO

RESPONSIVE POST GRID

*/
/*==========GLOBAL==========*/
:root{
	/*default mode is night*/

	--title-color: #d2d1d1;
	--courant-color: #d2d2d2;
	--courant-lighter-color: #cdcdcd;
	--background-color:  #111;
	--bg-hl: #000;
	--highlight-color: #5929F0;

	--font-main: 'Clash Grotesk', sans-serif;
	--font-sec: 'Clash Grotesk', sans-serif;

	--courant-weight: 400;
	--bold-fontweight:500;
    --bolder-fontweight:500;

	--t1-size: 4rem;
	--t2-size: 2.2rem;
	--menu-fontsize:1.5rem;

	--menu-fontsize-mobile:2.3rem;

	--courant-size:1.8rem;
	--courant-mobile-size:1.5rem;

	--desktop-side-margin:2rem;
	--tablet-side-margin:1rem;
	--mobile-side-margin:.8rem;

	--max-site-width: 1600px; /* need to be chaged manually in media screen*/

	/*margins*/
	--side-margins-large: auto;
	--side-margins-medium:2rem;
	--side-margins-tablet:1rem;
	--side-margins-mobile: .75rem;

	/*transitions*/
	--main-time:.3s;
}

/*scroll up*/
#back-to-top-btn {
	font-family: 'Inter', sans-serif;
	font-size: 2rem;
	font-weight: 600;
	width: 48px;
	height: 48px;
	
	position: fixed;
	right: 1rem;
	bottom: 4rem;
  
	background-color: var(--background-color);
	border: solid;
	border-color: var(--title-color);
	border-radius: 100%;
	color: var(--title-color);
	border-width: 2px;
	padding: .3rem;
	cursor: pointer;
	z-index: 10000;
  }
  #back-to-top-btn{
	display: none;
  }
  /*#back-to-top-btn:hover {
	background: var(--highlight-color);
	
  }*/
  

.none{
	display:none;
}

/*masquer la scroll bar*/
body{
	overflow-x: hidden;
	/* needed because hiding the menu on the right side is not perfect, */
	scrollbar-width: none !important; /* Pour les navigateurs Firefox */

    -ms-overflow-style: none;  /* Pour les navigateurs Internet Explorer et Edge */
}
::-webkit-scrollbar-track{
	color: transparent;
	width:0px;
	height: 0px;
	visibility: hidden;
}
html{
	scrollbar-width: none;
  }
  .page-template-default{
	overflow-x: hidden;
  }


body::-webkit-scrollbar {
    display: none; /* Pour les navigateurs WebKit comme Chrome et Safari */
}

 /*cleaning*/
 h1,h2,h3,h4,h5,h6,p{
    margin:0;
 }
 .post-thumbnail,.entry-title {
	display: none;
  }

 html, body{
	background-color: var(--background-color);
	color: var(--courant-color);
	font-family: var(--font-main);
	line-height: 1.4;
 }



 /*margin*/
 .page-template-default, .archive, .post-template-default,.home, .error404	{
	margin:0 var(--side-margins-medium) 1.5rem var(--side-margins-medium);
	

   }

  /*text settings*/
h1,h2,h3,h4,h5,h6,
p,label{
	color: var(--courant-color);
}
h1,h2{
	line-height: 1.2;
}
  h1{
	font-size: var(--t1-size);
	font-weight: var(--bolder-fontweight);
	margin-bottom: 1rem;

  }
  h2{
	font-size: var(--t2-size);
	font-weight: var(--bolder-fontweight);
  }
  p,a,li,ul,label,input{
	font-size: var(--courant-size);
	font-weight: var(--courant-weight);
  }
  li,ul{
	list-style: none;
  }
  ul {
	margin: 0;
	padding: 0;
  }
  a, p a{
	text-decoration: none;
	font-variation-settings: "wght" var(--courant-weight), "ital" 1;
	transition: all ease-in-out var(--main-time);
	color: var(--highlight-color);
  }
  a:visited{
	text-decoration: none;
	color: var(--highlight-color);
}
a:active{
	text-decoration: none;
	color:red;
}
a:hover, a p:hover{
	opacity: 1;
	color: var(--highlight-color);
	transition:all .5s ease-in-out;
	
}

/*=============== HEADER ================*/

#masthead {
	display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color);
    position: sticky;
    top:0;
	z-index: 100;
}
.container-fluid-header{
	width: 100%;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.menu-menu-fr-container {
	margin-bottom: .2rem;
  }
.main-navigation{
    width: auto;
  }

  .site-description, .site-title {
    position: absolute;
    left: -10000px;

  }

  .site-logo-box svg {
	height: 4rem;
	transition: all ease-in-out .2s;
	padding-top: .8rem;
	margin-bottom: .5rem;

  }
  .site-logo-box #Calque_1 path{
	transition: all .3s ease-in-out;
	fill: var(--title-color);
  }

 a:hover > .site-logo-box #Calque_1 path {
	fill: var(--highlight-color);
	stroke:transparent;
  }
  a:hover > .site-logo-box{
	transform: rotate(25deg);
  }
  
  #primary-menu{
	display: flex;
	justify-content: space-between;
  }
  #primary-menu a{
	font-size: var(--menu-fontsize);
	color: var(--courant-color);
	
  }

 
  #primary-menu a:hover,
  #primary-menu a:focus,
  #primary-menu a:focus-within{
	  font-variation-settings: "wght" 500;
  }

  /*secondary menu*/
  .menu-item a {
	font-size: 1rem;
	color: var(--title-color);
  }

  #menu-subcategories {
	display: flex;
	margin: 1.5rem auto;
	flex-wrap: wrap;
	padding: 0;
	justify-content: flex-end;
	line-height: .2;
  }
  #menu-subcategories li {
	margin-left: 1.2rem;
	margin-bottom: 1rem;
  }

  #sec-menu-sidebar,.widget_nav_menu, #menu-subcategories{
	margin: 0;
  }

  /*current page*/
  #primary-menu .current_page_item a,#primary-menu .current-menu-item a,
 
.current_page_item a,  .current-menu-item a {
  
	font-variation-settings: "wght" 500;
	color: var(--highlight-color);
}
#menu .current_page_item a, #menu .current-menu-item a {
	color: var(--title-color);
	filter: none;  


}
#menu  a, #menu  a {
	color: var(--title-color);
	filter: none;  


}
/* ================== MOBILE-MENU ================ */

#menu a{
	font-size: var(--menu-fontsize-mobile);
	text-align: right;
  }
 
  #menuToggle
  {
	width: auto;
	height: auto;
	display: none;
	position: relative;
	top: 0;
	right: 0;
	z-index: 
	2;
	-webkit-user-select: none;
	user-select: none;
  }

  #menu .sub-menu {

	position: relative;
	top: 0;
	left: 0;
	z-index: 99999;
  }
  #menu .sub-menu li a {
	font-size: 1.4rem;
  }
  #menu .sub-menu li  {
	padding: .5rem 0;
  }

  #menuToggle p{
	font-size:2rem;
	
  }

  #menuToggle {
    position: absolute !important ;
    top: 1.5rem ;
	right: var(--mobile-side-margin);
  }
  
  #menuToggle input
  {
	display: block;
	width: 90px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0; /* hide this */
	z-index: 2; /* and place it over the hamburger */
	-webkit-touch-callout: none;
  }
  /*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
 /* display:none;*/
 width: 2rem;
 height: 3px;
  margin-bottom: 8px;
  position: relative;
  
  background: var(--text-color);
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 0px 0px;
  
  transition: all ease-in-out  .3s;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
 #menuToggle input:checked ~ span{
  /*transform: translate(10rem,10rem);*/
 }
 #menuToggle input:checked ~ span
{
  opacity: 1;
 /* transform: rotate(45deg) translate(-1px, -1px);*/
  background: var(--highlight-color);
  height: 4px;
  margin-bottom: 7px;

}


/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
 /* opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);*/
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  /*transform: rotate(-45deg) translate(0, -1px);*/
}
  
  /*
   * Make this absolute positioned
   * at the top left of the screen
   */
  #menu
  {
	
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */
	
	transform-origin: 0% 0%;
	
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	top: 0;
  	right: 0;
  /*display: none;*/
  	transform: translate(100%, 0);
  	overflow: hidden;
  	background-color: var(--background_color);

  }
  #menu
{
  position: fixed;
  margin:0;
  padding-top:0;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  top: 4.5rem;
right: 0;
/*display: none;*/
transform: translate(100%, 0);
overflow: hidden;
background-color: var(--background-color);
padding: 2rem;


}

  
  /*
   * And let's slide it in from the left
   */
  #menuToggle input:checked ~ div
  {
	transform: translate(3%, 0);
  }
  #menuToggle input:checked ~ p
  {
	font-variation-settings: 'wght' 500;
  }
  #menuToggle input:hover ~ p
  {
	font-variation-settings: 'wght' 500;
  }

  /*MOBILE-MENU-END*/




  /* ====================== ARCHIVE AND POST GRIDS ===================*/

  .page-title {

	width: fit-content;

  }
  .page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
  }
  .page-header h1 {
	display:none
  }
  .imagette img{
	width: 100%;
	border-radius: 1rem;
}
a:hover > .imagette img{
	transition:ease-in-out .2s;
	border-radius: 2rem;
	}
.archive-grid.grid{
	min-height:100vh;
}
article .archive-grid.grid{
	min-height:0;
}
/*grille projets*/
.archive-grid{
	margin: 0rem -0.5rem 1.5rem -0.5rem ;
}
.archive-grid-post{
	margin: -0.5rem -0.5rem -0.5rem -0.5rem ;
}

.archive-grid.grid.archive-grid-post-2 {
	margin: 0.5rem -1rem 0.5rem -1rem;
  }
.archive-grid img{
	display:block;
}
.archive-grid article, .archive-grid iframe{
	position:relative;
}
.archive-grid iframe{
	min-height: 40vh;
	width:100%;
	height:100%;
}
/*2-grid*/
.category-editorial .grid-sizer, .category-editorial .grid-item,
.category-web .grid-sizer, .category-web .grid-item,
.category-creative-coding .grid-sizer, .category-creative-coding .grid-item,
.category-scenographie .grid-sizer, .category-scenographie .grid-item,

.single-post .archive-grid-post-2 .grid-sizer-post-2, .single-post .archive-grid-post-2 .grid-item-post-2
{
	width: calc(100%/2);
}

 .category-editorial .grid-item,
 .category-web .grid-item,
 .category-creative-coding .grid-item,
 .category-scenographie .grid-item,
 
 .single-post .archive-grid-post-2 .grid-item-post-2{
	padding:1rem;
}

/*3-grid*/
.category-motion-design .grid-sizer, .category-motion-design .grid-item,
.category-design-graphique .grid-sizer, .category-design-graphique .grid-item,

.single-post .grid-sizer-post, 
.single-post .grid-item-post {
	width: calc(100%/3);

}

.category-motion-design .grid-item,
.category-design-graphique .grid-item,

.single-post .grid-item-post
{
	padding: .75rem;
}

/*4&+ grid*/

/*archive grid*/
.grid-sizer, .grid-item{
	width: calc(100%/4);
}

.single-post .grid-sizer-post-4, .single-post .grid-item-post-4{
	width: calc(100%/4);
}
.single-post .grid-item-post-4{
	padding: .5rem;
}

.grid-item-post img{
	max-width: 100%;
}


.grid-sizer-post-100, .grid-item-post-100{
	width: calc(100%);
}

.grid-sizer,.grid-item , .archive-grid-contenu{
	padding: 0.75rem;
}
.archive-grid video{
	width: 100%;
	height:auto;
}
.video-item{
	position: relative;
}
.video-item video{
	position:absolute;
	top: 0px;
}
.video-banner{
	margin-top: 1rem;
}
.video-banner video{
	max-width:100%;
	padding:0 0 0 0 ;
}
.video-banner iframe{
	position: relative;
}

/*grids end?*/

/*titre du projet (dans la grille masonry)*/
.grid-item a{
	opacity: 1 !important;
}
.archive-grid-contenu {
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
	z-index: 60;
	align-content: start;
	display: flex;
	justify-content: start;
	width: 100%;
	height:100;
	display: flex;
  align-items: flex-end;
}

.archive-grid-contenu h3{
	z-index:103;
	width:100%;
	line-height:1;
	font-weight:400;
	width:100%;
	padding: 0 8% 8px 12px;
	transition: all .2s ease-in-out;
	font-variation-settings: "wght" 450, "ital" 1;
	text-align: left;
	color: lightblue;
	font-family: var(--title-font);
	font-size: 2rem;
	text-shadow: 1px 1px 5px rgb(20, 20, 20);
	letter-spacing: 0;
	opacity:.5;
}

.archive-grid-contenu:hover > h3 , .grid-item a:hover > h3 {
	font-variation-settings: "wght" 500, "ital" 1;
	font-size: 2rem;
	opacity: 1;
	line-height:1;
	min-width:100%;
	color:#e4e4e4;
	text-shadow: 1px 1px 10px rgb(20, 20, 20);
	letter-spacing: 0;
}
a:hover > .archive-grid-contenu h3{
	font-variation-settings: "wght" 500, "ital" 1;
	font-size: 2rem;
	opacity: 1;
	line-height:1;
	min-width:100%;
	color:#e4e4e4;
	text-shadow: 1px 1px 10px rgb(20, 20, 20);
	letter-spacing: 0;}

.img-button{
	background-color: var(--background-color);
	position: absolute;
	top:1rem;
	right:1rem;
	top: 1.5rem;
  right: 1.5rem;
	border-radius: 50% ;
	text-align: center;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	opacity: .2;
	transition: ease-in-out 1s;
	padding:.2rem .3rem 0.3rem .3rem;
	border:solid;
	border-width: 2px;
	border-color:var(--title-color);
}
.img-button svg{
	stroke: var(--title-color);

}


.img-button:hover > svg{
	transition: ease-in-out .2s;
	stroke: var(--title-color);
}
.img-button:hover {
	opacity: 1 !important;
	transition: all ease-in-out .6s;
}


/*===========================FOOTER=========================*/
.site-footer{
	background-color: var(--background-color);


}
#colophon svg{
	display: flex;
	width: 1.2rem;
	height: 1.2rem;
	fill:lightgray;
	transition: all ease-in-out .2s;
}
#colophon svg:hover,#colophon svg:focus{
	fill:var(--highlight-color);
	transform: rotate(25deg);
}
.site-info.social-media {
	width: 5.2rem;
	justify-content: space-between;
	display: flex;
	margin-left: .5rem;
}
.entry-footer{
	display:none;
}
/*contact*/
.container-media-links {
	width: 26px;
  }
  .container-media-links path {
	fill: var(--title-color);
  }
.contact-infos {

  padding: 1rem;
  border-width: 2px;
  background-color: var(--bg-hl);
  border-radius: 1rem;
  padding: 1.5rem 1.5rem;
  width: fit-content;
  }

  .social-media a span {
	display: flex;
  }
  .social-media a span svg {
padding-right:.5rem;  
transition: all ease-in-out .2s;
}

.social-media a:hover > span svg{

transform: rotate(25deg);
}
.social-media a:hover > span svg path{
	fill: var(--highlight-color) !important;


}
/*signature footer*/

.site-footer p{
	font-family: var(--title-font);
	font-variation-settings: "wght" 400;
	font-size: 1rem;
	line-height: 1.2;
}
.site-info a:hover > p{
	font-variation-settings: "wght" 500;
}


  .sidebar-box #menu-subcategories {
	margin: 0;
	padding: 0;
	margin-left: 2rem;
	display: flex;
	flex-wrap: wrap;
 
  }
  .sidebar-box #menu-subcategories li {
	padding-left: 1rem;
	font-size: 1.2rem;
  }
  #colophon .container-fluid{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#colophon{
	display: flex;
	  justify-content: center;
	  margin-bottom: 1rem;
}

/*posts*/

/*post header*/
.post-info p {
	font-variation-settings: 'wght' 250;
  }
.post-container-flex{
	display: flex;
	justify-content: space-between;

	margin-bottom: 2rem;
	
}
.post-container.post-title {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: calc(100%/3);
  }
.post-description {
	
	margin-left:1rem;
  }
.post .archive-grid img, .post .archive-grid video {
	border-radius: 1rem;
  }


.random-posts-area ul {
	display: flex;
  }
  .random-img img{
	margin:0 0 1rem 0;
	border-radius: 1rem;
	transition: all ease-in-out .3s;
	}
	.random-posts-area li {
		width: 32%;
		width: calc((100%/3) - 1rem);
	  }
	
	a:hover > .random-img img {
		border-radius: 2rem;
	  }
	.left-arrow:before{
		content : "\2190";
		padding-right:.4rem;
	}

	.button-random h2:before{
		content:"\224B";
		padding-right:.4rem;
	}
	
	.my-widget.my-widget-top {
		display: flex;
		justify-content: space-between;
		margin: 1rem 0;
	  }



	.button h2{
		font-size: 1.5rem;
		margin:0;
		padding:0;
		transition:.6s ease-in-out;
	}
	.my-widget h4{
		padding: 0.7rem 1.5rem;
		padding:10px ;
		font-size: 1.5rem;
		/*text-shadow: 2px 2px 5px #000000;*/
		font-weight: var(--bold-fontweight);
		color: var(--courant-color)
	}

	.random-posts-area ul {
		display: flex;
		justify-content: space-between;
	  }
	  .random-img h4 {
		position: absolute;
	  }
	  .nav-links{
		display: none !important;
	  }

	  .button {
		background: var(--bg-hl);
		width: fit-content;
		border-radius: 5rem;
	  }


	  .p5js-embed-container {
		width: 100%;
		border-radius: 2rem;
		padding-bottom: 35vw !important;
		min-width: 35vw;
  width: 35vw;
  max-width: 700px !important;
	  }
	  canvas {
		display: block;
		border-radius: 2rem;
	  }
	  .flex-bloc .wp-block-group__inner-container {
		display: flex;
	  }
	  .flex-bloc .wp-block-group__inner-container p{
		padding-right: 2rem;
		min-width: 710px;
	  }

	  /*/
/MEDIA SCREEN MEDIA SCREEN MEDIA SCREEN/MEDIA SCREEN MEDIA SCREEN MEDIA SCREEN/*/

/*big screens*/
@media screen and (min-width: 1600px) {


/*	#primary{
		max-width: 1560px;
		margin: 0 auto 0 auto;
		padding-left: 0;
		padding-right: 0;
	}/*
	 /*margin*/
	 .page-template-default, .archive, .post-template-default,.home, .error404{
		margin:0 var(--side-margins-large) 1.5rem var(--side-margins-large);
		max-width: calc(var(--max-site-width) - var(--side-margins-medium));

	   }

	   #back-to-top-btn {
		right: var(--side-margins-medium);
	  }

  }

 /*medium*/ 

 @media screen and (max-width: 1200px) {
	
 
	.grid-sizer,.grid-item {
		width: calc(100%/3);
		}
	
		.single-post .grid-sizer-post-4, .single-post .grid-item-post-4{
			width: calc(100%/3);
		}
		.single-post .grid-item-post-4{
			padding: .5rem;
		}

		.flex-bloc .wp-block-group__inner-container {
			display: flex;
			flex-direction: column-reverse;
		  }
		  .flex-bloc .wp-block-group__inner-container p{
			padding-right: 0;
		  }
		  .p5js-embed-container {
			width: 100%;
			min-width: 50vw;
			border-radius: 2rem;
			padding-bottom: 100% !important;
			margin-bottom: 1.5rem;
			max-width: inherit !important;

		  }
		  .flex-bloc .wp-block-group__inner-container p {
			padding-right: 0;
			padding-bottom: 1.5rem;
			min-width: inherit;
			width: 100%;
		  }
	
}

/*tablet*/
@media screen and (max-width: 1080px) {
	.post-container-flex {
		display: block;
		
	  }
	  .post-description{
		margin-left: 0;
		max-width: 750px;
		width: 100%;
	  }
	  .post-info p {
		margin-bottom: 1.5rem;
	  }
	  .grid-sizer,.grid-item {
		width: calc(100%/2);
		}
	.grid-item {
		padding: .6rem;
	}

	.category-motion-design .grid-sizer, .category-motion-design .grid-item,
	.category-design-graphique .grid-sizer, .category-design-graphique .grid-item,
	
	.single-post .grid-sizer-post, 
	.single-post .grid-item-post,
	.single-post .grid-sizer-post-4, 
	.single-post .grid-item-post-4{
			width: calc(100%/2);
	}

	.category-motion-design .grid-item,
	.category-design-graphique .grid-item,

	.single-post .grid-item-post,
	.single-post .grid-item-post-4{
			padding: .75rem;
	}
}
@media screen and (max-width: 900px) {
	.page-template-default,  .archive, .post-template-default,.home, .error404{
        max-width: 100%;
        
        margin: 0 var(--side-margins-tablet);
        max-width: inherit;

    }




	#menuToggle{
		display: block;
		position:absolute;
		/*le menu reste en haut en desktop*/
		top: 20px;
		right:var(--tablet-side-margin);
		z-index: 2;
		-webkit-user-select: none;
		user-select: none;
		}
			/*making desktop-menu hidden*/
	#primary-menu {
		display: none;
	  }
	  #menu-subcategories{
		  display: none;
	  }
	  #menuToggle {
		position: absolute !important ;
		top: 1.5rem ;
		right: 0;
	  }

	
}



/*mobile*/

@media screen and (max-width: 37.5em){

	
	.page-template-default,  .archive, .post-template-default,.home, .error404{
        
        margin: 0 var(--side-margins-mobile);

    }
	p{
		font-size: var(--courant-mobile-size);
	}
	.archive-grid.grid.archive-grid-post-2{
		margin:-0.5rem;

	}
	.grid-sizer,.grid-item {
		width: calc(100%);
		
		}
		.grid-item{
			padding:.5rem;
		}
		.category-editorial .grid-sizer, .category-editorial .grid-item,
	.category-web .grid-sizer, .category-web .grid-item,
	.category-creative-coding .grid-sizer, .category-creative-coding .grid-item,
	.category-scenographie .grid-sizer, .category-scenographie .grid-item,
	
		.category-motion-design .grid-sizer, .category-motion-design .grid-item,
		.category-design-graphique .grid-sizer, .category-design-graphique .grid-item,
		
		.single-post .grid-sizer-post, 
		.single-post .grid-item-post,
		.single-post .grid-sizer-post-2, 
		.single-post .grid-item-post-2,
		.single-post .grid-sizer-post-4, 
		.single-post .grid-item-post-4{
				width: calc(100%);
		}
		.category-editorial .grid-item,
		.category-web .grid-item,
		.category-creative-coding .grid-item,
		.category-scenographie .grid-item,
	
		.category-motion-design .grid-item,
		.category-design-graphique .grid-item,
	
		.single-post .grid-item-post,
		.single-post .grid-item-post-2,
		.single-post .grid-item-post-4{
				padding: .5rem;
		}
		.single-post .archive-grid-post-2 .grid-sizer-post-2, .single-post .archive-grid-post-2 .grid-item-post-2
	{
		width: calc(100%);
	}
	.single-post .archive-grid-post-2 .grid-item-post-2{
		padding: .5rem;
	}
	
	
/*post-bottom widget*/
.random-posts-area ul{
	display: block;

}
.random-posts-area li {
	width: 100%;
  }

.random-img img {
	margin: 0 0 .5rem 0;
}
.button.button-back {
	margin-bottom: 1.5rem;
  }

.my-widget.my-widget-top{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#menu {
    padding-right: 1.4rem;
  }


}


#colophon{
	display: none;
}

.result-element {
	font-size: var(--courant-size);
  }
#results{
	padding-top: 1.5rem;
}