.header{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin-bottom: 8vh;
	-ms-align-items: flex-end;
	align-items: flex-end;
}
.header .title{
	background-color: var(--color1);
	padding: 12vh 5vw;
	flex-basis: 75%;
	text-align: right;
	position: relative;
}
.header .inner_nav{
	flex-basis: 25%;
}
.header .inner_nav ul{
	margin: 0;
	padding: 0 2vw;
	list-style: none;
}
.header .inner_nav ul a{
	font-size: calc(10px + 0.8vw);
	text-decoration: underline;
	color:#000;
	margin-top: 1vh;
	display: inline-block;
}
@media screen and (min-width:1920px){
	.header .inner_nav ul a{
		font-size: 30px;
	}
}
.header .title h1{
    color: white;
	z-index: 1;
	position: relative;
	font-weight: 500;
}
.header .title img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: center;
}

#intro .part-one, #intro .part-two{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-align-items:flex-start;
	align-items:flex-start ;
	margin: 20vh 0;
}
#intro .part-one .content, #intro .part-two .content{
	flex-basis: 30%;
	padding: 0 4vw;
}
#intro .part-one .img, #intro .part-two .img{
	flex-basis: 70%;
	max-height: 800px;
    overflow: hidden;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: center;
	align-items: center;
}
#mission{
	padding:0 8vw;
	position: relative;
}
#mission > h1{
	margin-bottom: 6vh;
	font-size: calc(20px + 6vw);
	text-transform: none;
}
#mission > div{
	position: relative;
	padding: 8vh 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-align-items: center;
	align-items: center;
}
#mission > div:last-of-type{
	padding-bottom: 0;
}
#mission > div:nth-of-type(2) > div, #mission > div:nth-of-type(1) > div{
	flex-basis: 50%;
}
#mission span.overlay-text{
	text-transform: uppercase;
	font-weight: 900;
	position: absolute;
	right: 0;
	top: 0;
	font-size: calc(20px + 7vw);
	color: rgba(0,0,0,0.1);
    text-shadow:
	   -1px -1px 0 rgba(0,0,0,0.1),
		1px -1px 0 rgba(0,0,0,0.1),
		-1px 1px 0 rgba(0,0,0,0.1),
		 1px 1px 0 rgba(0,0,0,0.1),
}
#mission > div:nth-of-type(1) blockquote{
	font-weight: 300;
	margin-right: 6vw;
}
#mission > div:nth-of-type(2) blockquote{
	font-weight: 300;
	margin-left: 6vw;
}
/* Real outline for modern browsers */
@supports((text-stroke: 2px black) or (-webkit-text-stroke: 2px black)) {
	#mission span.overlay-text{
		color: transparent;
		-webkit-text-stroke: 2px rgba(0,0,0,0.1);
		text-stroke: 2px rgba(0,0,0,0.1);
		text-shadow: none;
	}
}
#mission ul{
	column-count: 2;
	column-gap: 4vw;
}
#mission ul li{
	margin-bottom: 2vh;
}
.outro{
	text-align: center;
	max-width: 1350px;
	padding: 0 10vw;
	margin: 0 auto 8vh auto;
}
.outro h5{
	text-transform: none;
}
.outro:before{
	content:"";
	display: block;
	height: 50px;
	width: 1px;
	background-color: #000;
	margin-left:50%;
	margin-bottom: 40px;
}
.pictures{
	position: relative;
	width: 100%;
	padding-bottom: 25vw;
}
.pictures img:nth-of-type(1){
	position: absolute;
	width: 50%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: cover;
	object-position: center center;
}
.pictures img:nth-of-type(2){
	position: absolute;
	width: 50%;
	height: 100%;
	right: 0;
	top: 0;
	object-fit: cover;
	object-position: center center;
}
.team{
	background-color: var(--grispale);
	padding:14vh 4vw 8vh 4vw;
}
.team > p{
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}
.team a.more{
	margin-top: 20px;
}
.team h1{
	text-align: center;
	font-size: calc(20px + 6vw);
}
.team h4{
	font-size: calc(18px + 2.1vw);
	text-align: center;
    font-weight: 400;
	text-decoration: underline;
}
@media screen and (min-width: 1920px){
	.team h4{
		font-size: 65px;
	}
}
.team .members{
	max-width:1400px;
	margin :7vh auto 0 auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-ms-align-items: flex-start;
	align-items: flex-start;
	justify-content: center;
	gap: 5%;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.team .members .member{
	display: block;
	flex-basis: 30%;
	margin-bottom: 10vh;
}
.team .members .member .img{
	display: none;
	width: 100%;
	padding-bottom: 120%;
	position: relative;
	margin-bottom: 3vh;
}
.team .members .member .img img{
	object-fit: cover;
	object-position: center;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	filter: saturate(0);
}
.team .members .member h2{
	color:var(--grisfonce);
	font-weight: bold;
	margin-bottom: 0;
	font-size: 25px
}
.team .members .member h2 small{
	font-size: 70%;
    display: block;
    font-weight: 200;
}
.team .members .member h5, .advisors .members > div h2{
	color:var(--grisfonce);
	font-weight: 200;
	font-size: 18px
}
.team .members .member h5:before, .advisors .members > div h2:before{
	/*content:"— ";*/
}
.advisors .members > div h5{
	color:var(--grisfonce);
	font-weight: bold;
	font-size: 20px
}
.advisors .members > div h2{
	margin-bottom: 0;
}
.advisors .members .advisor .content,
.team .members .member .content{
	color:var(--grisfonce);
	display: none;
}

.advisor.popup,
.member.popup{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	top: 0;
	background-color: var(--blanc);
	z-index: 50;
	color: var(--grisfonce);
}
.advisor.popup > div:not(.img),
.member.popup > div:not(.img){
	position: relative;
	order: 1;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	justify-content: center;
	max-width: 680px;
    margin: 0 auto;
	padding: 40px;
	width: 60%;
	align-items: baseline;
}

.member.popup > div.img{
	max-width:40%;
	width: 40%;
	order: 2;
}
.advisor.popup > div.img{
		max-width:40%;
	width: 40%;
	order: 2;
	padding: initial;
	margin: 0;
}


.member.popup > div.img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.advisor.popup > div.img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    object-position: top;
    left: auto;
    top: auto;
    filter: none;
}

.advisor > div.img{
	width: 100%;
    padding-bottom: 120%;
    position: relative;
    margin-bottom: 3vh;
}

div.members{
	padding-bottom: 5vw;
}

.advisors > div.members > div:first-child div.img img{
	object-position: top;
}

.advisor > div.img img{
object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    filter: saturate(0);
}

.advisor.popup .close,
.member.popup .close{
	position: absolute;
	display: block;
	left: 40px;
	top: 10%;
	width: 51px;
	height: 51px;
	cursor:pointer;
}

.advisor.popup .close:after,
.member.popup .close:after{
	content:"";
	display: block;
	position: relative;
	top: 50%;
	width: 100%;
	height: 1px;
	background-color: var(--grisfonce);
	transform:rotate(45deg);
}
.advisor.popup .close:before,
.member.popup .close:before{
	content:"";
	display: block;
	position: relative;
	top: 50%;
	width: 100%;
	height: 1px;
	background-color: var(--grisfonce);
	transform:rotate(-45deg);
}
.advisor.popup .more,
.member.popup .more{
	display: none;
}
.member .social, .advisors .social {
	display: inline-block;
	margin-top: 20px;
}
.member .social a, .advisors .social a{
	width: 30px;
	height:30px;
	border: 1px solid #000;
	border-radius: 20px;
	display: block;
	position: relative;
}
.member .social span, .advisors .social span{
	color:#000;
	text-align: center;
	margin-top: 4px;
    display: block;
}
.member .social img, .advisors .social img{
	position: absolute;
	width: 15px;
	height: 15px;
	left: 7.5px;
	top: 5.5px;
	object-fit: contain;
	object-position: center;
	filter: brightness(0.3);
}
.advisors{
	padding:8vh 4vw;
}
.advisors h4{
	text-align: center;
    font-weight: bold;
    font-size: calc(14px + 1.4vw);
    color: var(--grisfonce);
	max-width:1400px;
	margin :0 auto 12vh auto;
}
.advisors .members{
	max-width:1400px;
	margin :0 auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
/*
display: grid;
    grid-template-columns: 1fr 1fr 1fr;
*/
	-ms-align-items: flex-start;
	align-items: flex-start;
	justify-content: center;
	gap: 5%;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-bottom: 0;
}

.advisors .members > div{
	display: block;
	flex-basis: 30%;
	margin-bottom: 10vh;
}

.advisors .members > div{
	display: block;
	flex-basis: 30%;
	margin-bottom: 10vh;
}

div.member.popup > div:nth-child(2) > h2{
	font-size: calc(18px + 2vw);
	margin: 65px 0 20px 0;
}
div.member.popup > div:nth-child(2) > h2 small{
	font-size: 50%;
	display: block;
}

@media screen and (max-width:1450px){
	.advisors .members .advisor h2,
	.team .members .member h2{
		font-size: calc(12px + 0.8vw);
	}

	.team .members .member h5{
		font-size: calc(12px + 0.8vw);
	}
	
	.advisors .members .advisor h5{
		font-size: calc(10px + 0.5vw);
	}
}
@media screen and (max-width:1200px){
	.advisor.popup > div.img,
	.member.popup > div.img{
		max-width:60%;
		order: 2;
	}
}

@media screen and (max-width:1024px){
	.advisor.popup .close, .member.popup .close{
		right: 40px;
		left: auto;
	}
	#intro .part-one, #intro .part-two{
		position: relative;
	}
	#intro .part-one .content, #intro .part-two .content{
		z-index: 1;
		width: 50%;
		position: absolute;
		top: 0;
		background-color: #fff;
	}
	#intro .part-one .content{
		left:0;
	}
	#intro .part-two .content{
		right:0;
	}
	#intro .part-one .img, #intro .part-two .img{
		flex-basis: 100%;
		height: 120vh;
		position: relative;
		overflow: hidden;
	}
	#intro .part-one .img img, #intro .part-two .img img{
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}
}
@media screen and (max-width:764px){
	.header{
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.header .title {
		background-color: var(--color1);
		padding: 25vh 5vw;
		flex-basis: 100%;
		text-align: center;
	}
	.header .inner_nav {
		flex-basis: 100%;
	}
	.header .inner_nav ul{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 5vh;
	}
	.header .inner_nav li{
		display: inline-block;
	}
	#mission ul {
		column-count: 1;
		column-gap: 0;
	}
}
@media screen and (max-width:750px){
	#mission > div:nth-of-type(2) > div, #mission > div:nth-of-type(1) > div {
		flex-basis: 100%;
	}
	#mission > div:nth-of-type(1) blockquote, #mission > div:nth-of-type(2) blockquote {
		margin: 8vh 0;
	}
	body div.popup{
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		display: initial!important;
	}
	
	div.popup > div:nth-child(2) > h2{
		margin-top: 50px;
	}
	
	.advisor.popup .close, .member.popup .close{
		right: auto;
		top: 2%;
		left: 40px;
	}
	
	.advisors .members{
		gap: 0%;
    	grid-template-columns: 1fr;
		padding-bottom: 0vw;
	}
	
	.advisors > div.members > div:first-child{
		    grid-column: auto;
    max-width: initial;
    margin: 0 0 6vh 0;
	}
	
	.advisors > .members > .advisor > div:nth-child(2){
		text-align: center;    
	}
	
	.advisor.popup > div:not(.img),
	.member.popup > div:not(.img){
		width: 100%;

	}
	.advisor.popup > div.img,
	.member.popup > div.img{
		display: none;
	}
	.team .members .member, .advisors .members > div{
		display: block;
		flex-basis: 100%;
		margin-bottom: 6vh;
	}
	.advisor > div.img,
	.team .members .member .img{
		max-width: 100%;
		width:300px;
		padding-bottom:360px;
		margin:0 auto 3vh auto;
	}
	.team .members .member:nth-of-type(3n+2){
		margin-top: 0px;
	}
	.team .members .member{
		text-align: center;
	}
}