@font-face {
    font-family: 'Commune_Nuit_Debout';
    src:    url('../polices/NuitDebout/Commune-Nuit_Debout_web.eot');
    src:    url('../polices/NuitDebout/Commune-Nuit_Debout_web.eot?#iefix') format('embedded-opentype'),
            url('../polices/NuitDebout/Commune-Nuit_Debout_web.woff') format('woff'),
            url('../polices/NuitDebout/Commune-Nuit_Debout_web.woff2') format('woff2'),
            url('../polices/NuitDebout/Commune-Nuit_Debout_web.ttf') format('truetype'),
            url('../polices/NuitDebout/Commune-Nuit_Debout_web.svg#svgFontName') format('svg');
    font-weight: normal;
}


*{
	box-sizing: border-box;
}	

body{
	padding: 20px;
	font-family: "Palatino Linotype", serif;
}

.main{
	width: 80%;
	margin: auto;
	display: block;
	margin-bottom:20vh;
}
.contenu{
	visibility: hidden;
}
strong{
	font-weight: normal;
}
em{
	font-style: normal;
}
cite{
	font-style: italic;
}
h1 {
	display:none;
}
.projet{
	width: 100%;
	height:auto;
	margin:2rem;
	display:flex;
}
.column {
  float: left;
  width: 50%;
}
.vignette{
	width:100%;
	/* display:flex; */
	justify-content: right;
	align-items: center;
}
.vignette img{
	width:100%;
	box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.212);
}
.video{
	position: relative;
  	overflow: hidden;
	width: 100%; /*!important*/
  	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
/* iframe{
	vertical-align:middle;
	display: table-cell;
	margin-top:auto;
}*/

.one-column{
	width: 70%;
	margin: auto;
	margin-top: 5rem;
	text-align: center;
}

.one-column.full > img,
.one-column.full > a > img{
	width: 100%;
}
.one-column.half > img,
.one-column.half > a > img{
	width: 50%;
}
@media (orientation: portrait) {
	.one-column{
		width: 90%;
		margin-left: 10%;
		margin-top: 5rem;
	}
	.one-column.half > img,
	.one-column.half > a > img{
		width: 100%;
	}
 }
 .flex-container{
	display: flex;
	justify-content: left;
	gap: 10%;
	margin:2rem;
	margin-top: 10vh;
 }
 @media (orientation: portrait) {
	.flex-container img{
		width: 30vw;
		height: auto;
	}
 }
 @media (orientation: landscape) {
	.flex-container img{
		width: auto;
		height: 60vh;
	}
 }
 
.asterisque{
	padding-top: 7rem;
	text-align: center;
	margin: auto;
}

.container-iframe {
	margin-top: 5vmax;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }
  
  /* Then style the iframe to fit in the container div with full height and width */
iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
  }


video{
	width:100%;
}
.texte{
	width:55%;
	padding:10%;
	height:100%;
	display: table;
	color:black;
	visibility: hidden;
}
.texte span{
	vertical-align:middle;
	display: table-cell;
	color:black;
}
.opacity-on{
	opacity:1 !important;
	transition:3s ease-out;
}
a{
	text-decoration:none;
	color:black;
}

span a:hover{
	text-decoration:underline;
}

.spacer{
	margin-bottom:80vh;
}

nav{
	position: fixed;
	top:0;
	left:0;
	font-family: "Commune_Nuit_Debout";
	font-size:30px;
	z-index:3;
}
nav a{
	color:#404245;
	text-decoration:none;
	transition-delay: 2s;
	background-color:white;
}
nav ul{
	padding:0px;
	margin:20px;
}
nav li{
	list-style: none;
	margin:20px;
	opacity: 0;
}

.link-visible:hover{
	color: rgb(176, 106, 1);
}

/*responsive */
@media screen and (max-width: 1160px) {
	.vignette img{
		width:80%;
	}
}
@media screen and (max-width: 960px) {
	.vignette img{
		width:90%;
	}
}
@media screen and (max-width: 860px) {
	.vignette img{
		width:100%;
	}
}
@media screen and (max-width: 660px) {
	.projet{
		display:block;
	}
	.column {
	  float: none;
	  width: 100%;
	}

	.vignette{
		width:80%;
	}
	.texte{
		width:80%;
		display: block;
		padding: 0%;
		padding-top: 2rem;
		padding-bottom:6rem;
	}
	.texte span{
		text-align:left;
		display: block;
		color:black;
	}
}
@media screen and (max-width: 560px) {
	.main{
		margin-left:15%;
	}
	.vignette{
		width:90%;
	}
	.texte{
		width:90%;
	}
}