html {
	scroll-behavior: smooth;
  }
body {
	font-family : "Trebuchet MS", Helvetica, sans-serif;
	overflow-y: hidden;
	background-color : whitesmoke;
	-webkit-transition: background-color 500ms ease-in-out;
    -moz-transition: background-color 500ms ease-in-out;
    -o-transition: background-color 500ms ease-in-out;
    transition: background-color 500ms ease-in-out;
	
}
/* page elements classes */
#main {
	position: fixed;
	top: 80px;
	left: 35px;
	bottom: 35px;
	right: 35px;
	/*background: grey;  /* Just to visualize the extent */
	z-index : 0;
	transition-property: opacity;
	transition : opacity 3s;

}
#fly {
	position: fixed;
	top: 0px;
	left: 35px;
	bottom: 0px;
	right: 35px;
	background: whitesmoke;  /* Just to visualize the extent */
	z-index : 1;
	transition-property: opacity;
	transition : opacity 3s;

}
#fly_title {
	position : absolute;
	top : 0px;
	height : 80px;
	padding-top : 15px;
	width : 100%;
	z-index : 2;
	text-align: center;
	font-weight: bold;

}
.hide {
	opacity : 0%;
	transition-property: opacity;
	visibility : hidden;
}

#videoplyr, #video_thumbnail {
	opacity : 100%;
	visibility : visible;
}
#videoplyr.hide, #video_thumbnail.hide {
	opacity : 0%;
	visibility : hidden;
}


/* MENU main element */
#menu {
	position : absolute;
	margin-left : auto;
	margin-right : auto;
	margin-top : calc(50vh - 100px);
	margin-bottom : auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding:0;
	width : 200px;
	height : 200px;

	z-index : 0;

	list-style-type: none;

	text-align: justify;
	text-align-last: justify;
	letter-spacing: -0.1em;

    display: flex;
    flex-direction: column;

	transition : all 1s ease-in-out;
}

/* LOGO BACKGROUND FOR MENU */
#menu:before {
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background : url("_images/MES_ident_alpha.gif") 0 0 no-repeat;
	background-size:cover;
	opacity:1;
	z-index:-1;
    transition: opacity 500ms linear;
}
#menu.noBG:before {
	opacity:0;
}

/* MENU main element positionning */
#menu.top {
	height : 45px;
	margin-top : 5px;
}
#menu.bottom {
	height : 45px;
	margin-top : calc(100vh - 45px);
}

/* MENU chlidren elements */
#menu li {
	flex: 1 1 auto;
	padding : 10px;
    overflow-y : hidden;
	visibility : visible;
	opacity : 1;

	color : rgb(21, 21, 21);
	transition-property: opacity, visibility;
	transition : opacity 800ms ease-in-out, visibility 500ms;

	cursor: pointer;
}
#menu li.active {
	font-weight: bold;
	color:rgb(21, 21, 21); /*#C5C6C6;*/
	background-color : none;
	padding : 10px;
}
#menu li.collapsed {
	flex: 1 1 auto;
	opacity : 0;
	visibility: collapse;
}
#menu li.noGrow {
	flex: 0 1 auto;
}
#menu li:hover{
    background-color:rgba(255,0,0,.2);
	color: white; /*#C5C6C6;*/
}
#menu li:after {
	/* needed for horizontal justification of letters */
	content: "";
	width: 100%;
	display: inline-block;
}
/* creation page */
#catmenu {
	position : fixed;
	width : 90%;
	height : 2.5em;
	margin-top : 1em;
	margin-left : 5%;
	margin-right : 5%;
	background-color : whitesmoke;
	/*border-bottom : 1px dashed red;*/
}
.categories-menu {
	list-style-type: none;
    display: flex;
    flex-direction: row;
	font-size : 1em;
	margin : 0 0 1.5em 0;
	padding : 0;
	align-items: center;
}
.categories-menu-item {
	list-style-type: none;
	flex: 1 1 left;
	padding : .2em 2em;
	vertical-align:middle;
	cursor: pointer;
	color : rgb(142, 142, 142);
}

.categories-menu-item:hover {
	color : rgb(21,21,21);
}

.categories-menu li.active {
    background-color:rgba(255,0,0,.2);
	color: white; /*#C5C6C6;*/
	
}

#cut {
	position : fixed;
	margin-top : 3.3em;
	width : 90%;
	height : .5em;
	margin-left : 5%;
	margin-right: 5%;
	border-top : 1px dashed red;
}
#projects {
	position : fixed;
	width : 100%;
	margin-top : 4em;
	margin-left : 5%;
	margin-right: 5%;
	margin-bottom : 50px;
	height : 90%;

    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
.projects-list {
	position : relative;
	width : 90%;
	height : 100%;
	font-size : 1em;
}
/* list elements */
.project-item:not(:last-child) {
	border-bottom : 1px dashed red;
	scroll-snap-align: start;
}
.project-item {
	margin-bottom : 10px;
	padding-bottom : 20px;
	width : 100%;
	display: flex;
	flex-direction : row;
	-ms-flex-direction : row;
	/* scroll-snap-stop: always; */
}
.project-item:last-child{
	scroll-snap-align: start;
	margin-bottom : 100px;

}
hr {
	width : 1em;
    border-style: none none dashed;
	left : 0;
	margin-left : 0;
	margin-top : .6rem;
	margin-bottom : .2rem;
	line-height : 0px;
	/*border-top : 1px dashed rgb(142, 142, 142);*/
}
/* positionning */
.left {
	flex: 1 1 15%;
	margin-bottom : 15px;
	/*background-color : rgba(255,0,0,.5);*/
}
.middle {
	flex: 1 2 50%;
	margin-bottom : 15px;
	/*background-color : rgba(255,0,0,.5);*/
}
.right {
	flex: 1 1 35%;
	margin-bottom : 15px;
	/*background-color : rgba(0,0,255,.5);*/
}
/* */
.project-title {
	margin : 0px;
}
.project-title h4, .project-title p {
	display : inline;
	color : rgb(142,142,142);
	font-size : .6rem;
	line-height : .8rem;
	margin : 0;
}
.project-cat {
	cursor: pointer;
	font-style : italic;
}
.project-cat:not(:last-child):after {
	content: ", ";
}
.project-cat:hover {
	color : rgb(21,21,21);
}
.project-desc {
	margin-top : 0px;
	margin-left : 2em;
	margin-right : 2em;
	text-align: justify;
	text-justify: inter-word;
}
.project-images {
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));
}
figure {
	position : relative;
	margin : 0;
	width: 100%;
	min-height : 50px;
	max-height : 100px;
	background-color : rgb(21,21,21,0);
	display : inline;
  }

figure img {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	justify-content:center;
	overflow:hidden;
}

.playIcon {
	position : absolute;
	bottom: 0;
	right: 0;
	opacity : 75%;
	width:100%; height:100%; object-fit:cover; justify-content:center; overflow:hidden;
}

/* content */
h1 {
	margin-top : 0;
	margin-bottom : 0;
	font-size : 1rem;
	font-weight: bold;
}
h2 {
	margin-top : 0px;
	font-size : 1rem;
	font-weight:normal;
}
h3 {
	margin-top : 0px;
	font-size : .9rem;
	font-weight: normal;
}
h4 {
	margin-top : 0px;
	font-size : .8rem;
	font-weight: normal;
}
.project-desc p {
	margin-top : 0px;
}
/* project slideshow */
#project_slideshow {
	position : fixed;
	display : flex;
	flex-direction: row;
	-ms-flex-direction : row;

	background: whitesmoke;  /* Just to visualize the extent */

	width : 90%;
	height : 100%;
	margin-top : 4em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	overflow-x : scroll;
    scroll-snap-type: x mandatory;
}
#project_slideshow::before {
	content: "";
	width : 1em;
  }
#project_slideshow::after {
	content: "";
	width : 1em;
  }
#project_slideshow section {
	flex : 0 0 auto;
	width : 100%;
	height : 80%;
	scroll-snap-align: start;
	background-color : whitesmoke;
	background-size : cover;
	/* center image */
	display : flex;
	justify-content: center;
	align-items: center;
	
}

#project_slideshow section img {
	position : relative;
	height : 100%;
}

.dots {
	position: absolute;
	bottom: 50px;
	margin-left : auto;
	margin-right : auto;
	display: flex;
	justify-content: center;
	width: 100%;
  }
  
.dot {
	width: 8px;
	height: 8px;
	background: gray;
	border-radius: 50%;
	margin: 0 3px;
	cursor: pointer;
  }
  
.active-dot {
	background: #3f3f3f;
	cursor: default;
  }

#closeFly {
	position : fixed;
	top : 15px;
	right : 15px;
	text-decoration: none;
	font-size : 1em;
	color : black;
  }
  
  @keyframes leftNext {
	from { left: 100%; }
	to { left: 0; }
  }
  
  @keyframes leftCurr {
	from { left: 0; }
	to { left: -100%; }
  }
  
  @keyframes rightNext {
	from { left: -100%; }
	to { left: 0; }
  }
  
  @keyframes rightCurr {
	from { left: 0; }
	to { left: 100%; }
  }

/* global classes */
.darkmode {
	background-color: rgb(22, 26, 31); 
}
#menu.darkmode  li.active {
	color : white;
}
.fullscreen_video {
	width : 100%;
	height : 100%;
}


@media only screen and (max-width: 760px) {
 /* mobile css */ 
}