/* IMPORTS  */
@import 'reset.css';
@import 'fonts.css';
@import 'keyframes.css';

/* VARIABLES */
:root {
	--main-color: rgba(255,255,255,1);
	--main1-bg-color: rgba(240,240,240,1);
	--main-bg-color: rgba(210,210,210,1);
	--select-color: green;
	--font-family-titre: 'Hershey-Noailles-Futura-bold';
	--default-size: 18px;
	--font-family-text: 'adelphe';
	--film-install-pl: rgba(255,247,0,1);
	--film-install-bg-pl: rgba(255,247,0,0.00);
	--ateliers-pl: rgba(255,0,0,1);
	--ateliers-bg-pl: rgba(255,0,0,0.00);
	--sounds-pl: rgba(255,0,167,1);
	--sounds-bg-pl: rgba(255,0,167,0.00);
	--screenings-pl: rgba(24,0,255,1);
	--screenings-bg-pl: rgba(24,0,255,0.00);
	--peoples-pl: rgba(0,247,255,1);
	--peoples-bg-pl: rgba(0,247,255,0.00);
	--news-pl: rgba(205,0,255,1);
	--news-bg-pl: rgba(205,0,255,0.00);
	--articles-color: rgba(105,105,105,1);
	--articles-bg-color: rgba(105,105,105,0.00);
	--about-bg-color: darkblue;
}

:active, :visited  {
	border: 0px;
}
/* SCROLL BAR */

/* width */
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  background: grey; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: grey; 
}

/* GENERAL/STRUCTURE */

main {
	padding-top: 11em;
	width: 100%;
	bottom: 0px;
	height: calc(100% - 4.5em);
	z-index: 1;
	opacity: 0;
}
main.screenings,
main.goodies {
	padding-top: 4em;
}

main.home.visible {
	background-size: 400% 400%;
	padding-top: 4em;
}

body {
	background: var(--main-bg-color);
	color: rgba(0, 0, 0, 1);
	font-family: var(--font-family-text);
	font-size: var(--default-size);
	line-height: 1.32em;
	overflow-x: hidden;
	letter-spacing: 0.02em;
}

article.film_install .section {
	border: 1px solid var(--color-films-installations);
	padding: 3px;
}
article.atelier .section {
	border: 1px solid var(--color-ateliers);
	padding: 3px;
}
article.sound .section {
	border: 1px solid var(--color-sounds);
	padding: 3px;
}

h2{
	text-align: center;
}

h1{
	/* visibility: hidden; */
	position: absolute;
}

main.goodies h1{
	visibility: visible;
}

a {
	text-decoration: none;
	color: inherit;
}

.personne:hover,
.file_pdf,
.relation .nom:hover,
.places a:hover

{
	text-decoration: underline;
}

.film_install img {
	filter: grayscale(100%);
	margin-right: -5px
}

.film_install img:hover {
	filter: grayscale(0%);
}

.item a{
	/* border: 1px solid; */
	/* display: flex; */
	text-align: center;
}

.item a h1{
	display: block;
}

.home > #page > a {
	cursor: default;
}
.home > #page .item {
	cursor: pointer;
}

main section#about{
	background: black;
	box-shadow: 30px -10px 30px black;
	color: white;
	position: fixed;
	top: .0em;
	bottom: 0;
	padding: 0.5em;
	width: 50%;
	height: 100%;
	z-index: 4;
	margin-bottom: 0.2em;
	overflow: hidden;
	display: none;
}

main section#about p{
	font-size: 2rem;
	font-family: var(--font-family-titre);
	line-height: 1;
}

main section#about .logo{
	margin-bottom: 0.2em;
}

main section#about .cross{
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: 2em;
	cursor: pointer;
	z-index: 4
}
main section#about .content {
	display: block;
	height: 100vh;
	overflow-y: scroll;
	margin-right: 0px;
	padding-right: 40px;
	padding-bottom: 40px;
	position: absolute;
	z-index: 2;
}

main.home section#page{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0.5em;
}

.gallerie, .file_pdf, #moon-timeline{
	cursor: pointer;
}
.file_pdf .file_legende {
	opacity: 0.6;
}

/* NAV */

nav {
	width: 100%;
	position: relative;
	color: var(--nav-color);
	padding: 0.5em;
	padding-bottom: 1em;
	position: fixed;
	background: linear-gradient(var(--main-color) -10%, var(--main-bg-color) 100%);
	box-shadow: -15px 20px 20px var(--main-bg-color);
	z-index:4;
	line-height: 1.1;
	display: flex;
	justify-content: space-between;
}

.nav-part{
	cursor: pointer;
	font-family: var(--font-family-titre);
	font-size: 1.6em;
}

.nav-right {
	right: 120px;
	z-index: 4;
	position: absolute;
}

.nav-right .picto-goodies{
	height: 24px;
	width: auto;
	margin-top: -.3em;
}

nav .logo{
	padding-right: 0.5em;
	margin-right: 0.5em;
}

.logo {
	height: 33px;
	width: auto;
	margin-top: 0em;
}


nav ul {
	display: flex;
}

nav li {
	padding: 0px .5em;
	margin: 0px .5em;
}

nav #nav-list .part li.news,
nav #nav-list .part li.peoples { display: none }


/* ARTICLE */

.home_article_title {
	font-family: var(--font-family-titre);
	position: absolute;
	height: 100%;
	width: 100%;
	font-size: 3em;
	text-transform: uppercase;
	top: 9.8rem;
	left: 0em;
	z-index: 2;
}

main.home .home_article_title{
	position: fixed;
	top: 0em;
	pointer-events: none;
}

.home_article_title  div.title {
	line-height: 1em;
	position: sticky;
	margin-top: 1em !important;
	z-index: 1;
	margin-left: 0.1em;
}

.home_article_title div.small {
	transform: scale(1, 1);
	transition: all 0.5s ease-out;
}

main.home .home_article_title > div {
	color: white;
}

.home_article_title div.category {
	font-family: var(--font-family-titre);
	transform: scale(1, 3);
	transform-origin: 0 0;
	text-transform: lowercase;
	font-size: 0.5em;
	top: 0.6em;
}

.home_article_title > div .sticky {
	transform: scale(1, 2.66);
	transform-origin: 0 0;
	z-index: 2;
}

main:not(.home) .home_article_title {
	top: 2em;
	margin-left: 0.2em;
	position: -webkit-sticky;
  position: sticky;
	margin-bottom: 2em;
	display: flex;
}


.home_article_title div.films-installations {
	color: var(--color-films-installations);
}
main.home .home_article_title div.films-installations {
	-webkit-text-stroke: .2px var(--color-films-installations);
}

.home_article_title div.ateliers {
	color: var(--color-ateliers);
}
main.home .home_article_title div.ateliers {
	-webkit-text-stroke: .2px var(--color-ateliers);
}

main.home .home_article_title div.films-installations {
	-webkit-text-stroke: .2px var(--color-films-installations);
}

.home_article_title div.sounds {
	color: var(--color-sounds);
}

main.home .home_article_title div.sounds {
	-webkit-text-stroke: .2px var(--color-sounds);
}

.home_article_title div.screenings {
	color: var(--color-screenings);
}
main.home .home_article_title div.screenings {
	-webkit-text-stroke: .2px var(--color-screenings);
}
.home_article_title div.peoples {
	 color: var(--color-peoples);
}
main.home .home_article_title div.peoples {
	-webkit-text-stroke: .2px var(--color-peoples);
}

.home_article_title .filtered {
	width: auto;
	height: 50%;
	position: fixed;
	margin-top: 1em;
	text-align: center;
	filter: blur(1px);
}

.home_article_title .filtered.films-installations {
	background: var(--color-films-installations);
}
.home_article_title .filtered.ateliers {
	background: var(--color-ateliers);
}
.home_article_title .filtered.sounds {
	background: var(--color-sounds);
}
.home_article_title .filtered.screenings {
	background: var(--color-screenings);
}
.home_article_title .filtered.peoples {
	background: var(--color-peoples);
}

.home_article_title img {
	width: auto;
	height: 100%;
	mix-blend-mode: screen;
  -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(200%);
  opacity: 1;
}

article.item {
	font-family: var(--font-family-titre);
	padding: 0 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	/* white-space: nowrap; */
	transition: opacity .5s;
	opacity: 1;
	transform: scale(1);
	/* animation: gradient 15s ease infinite; */
}

.category {
	font-weight: normal;
	/* text-transform: capitalize; */
	/* margin-right: 5em; */
}

.visible {
	transition: opacity .5s !important;
	opacity: 1 !important;
}
.hiden {
	transition: opacity .5s !important;
	opacity: 0 !important;
}

.none {
	display: none !important;
}

.block {
	display: block !important;
}

.item.films-installations:hover,
.item.ateliers:hover,
.item.sounds:hover,
.item.screenings:hover,
.item.peoples:hover,
.item.news:hover{
	color: var(--articles-color);
}



.item.films-installations img{
	width: 300px;
	height: auto;
	mix-blend-mode: multiply;
	/* -webkit-filter: url(#monochrome); */
  /* filter:  url(#monochrome); */
}

.item.films-installations{
	width: 80%;
	height: 100px;
	margin-right: 8em;
	background: -webkit-radial-gradient(
			50% 50%,
			80% 80%,
			var(--color-films-installations) -50%,
			var(--film-install-bg-pl) 60%);
	);
	transform: scale(1);
}

.item.films-installations.anime{
	animation: film-install 30s ease infinite;
}

.item.ateliers{
	width: 6%;
	height: 400px;
	margin-right: 5em;
	background-image: -webkit-radial-gradient(
        50% 50%,
        80% 80%,
        var(--color-ateliers) -80%,
        var(--ateliers-bg-pl) 60%
	);
	position: relative;
	z-index: 2;
	opacity: 0 !important;
	transition: opacity .5s;
	transform: scale(1.5);
}

.item.ateliers.anime{
	animation: atelier 70s ease infinite;
	opacity: 1 !important;
}


.item.sounds{
	width: 1%;
	height: 300px;
	margin: 8em;
	background: -webkit-radial-gradient(
        50% 50%,
        80% 80%,
        var(--color-sounds) -50%,
        var(--sounds-bg-pl) 60%
	);
	/* transform-origin: 0 0; */
	top:-100%; right:-100%; left:-100%; bottom:-100%;
	margin:auto;
	opacity: 0 !important;
	transition: opacity .5s;
	transform: scale(2);
}

.item.sounds.anime{
	animation: sound 40s ease infinite;
	opacity: 1 !important;
}

.item.screenings{
	width: 40%;
	height: 80px;
	margin: 4em;
	background: -webkit-radial-gradient(
        50% 50%,
        80% 80%,
        var(--color-screenings) -50%,
        var(--screenings-bg-pl) 60%
	);
	position:relative;
	transform: scale(1.5);
	opacity: 0 !important;
	transition: opacity .5s;
}

.item.screenings.anime {
	animation: screening 0.5s ease infinite;
	opacity: 1 !important;
}

.item.peoples{
	width: 30px;
	height: 1em;
	background: -webkit-radial-gradient(
        50% 50%,
        80% 80%,
        var(--color-peoples) -50%,
        var(--peoples-bg-pl) 60%
	);
	transform: scale(1);
	position: relative;
	margin-top: 2em;
	z-index: 3;
	/* opacity: 0 !important; */
	transition: opacity .5s;
}

.item.peoples.anime {
	animation: people 35s ease infinite;
	opacity: 1 !important;
}

section#news {
	display: flex;
	left: 0;
	position: fixed;
	bottom: 0px;
	text-align: left;
	width: 100%;
	/* perspective: 150px; */
	padding: 0.5em;
	padding-top: 1em;
	/* background: linear-gradient(var(--main-bg-color), var(--main1-bg-color));
	box-shadow: 0px -20px 20px var(--main-bg-color); */
	z-index: 3;
}

section#news .marquee_news {
	display: flex;
	flex-wrap: wrap;
	overflow: visible;
	padding: 0.1em 0;
/* 	transform: rotateX(25deg) rotateY(20deg); */
/* transform-style: preserve-3d; */
}

.item.news{
	padding: .1em .5em;
	font-family: var(--font-family-titre);
	width:  auto;
	margin-right: 10em;
	font-size: 1.6em;
	margin-bottom: 1px;
	cursor: pointer;
}

.item.news .content{
	font-weight: bold;
}

/* TIMELINE */
.time-line-main {
	width: 2em;
	height: 100%;
	position: fixed;
	z-index: 2;
	pointer-events: none;
}

.time-line-main > div {
	width: 100%;
	height: 2.5%;
}

.time-line-main .films-installs {
	background: var(--color-films-installations);
	background: linear-gradient(90deg, var(--color-films-installations) 0%, rgba(0,0,0,0) 70%);
	box-shadow: -20px 0px 20px var(--color-films-installations);
}

.time-line-main .ateliers {
	background: var(--ateliers-bg);
	background: linear-gradient(90deg, var(--ateliers-bg) 0%, rgba(0,0,0,0) 70%);
	box-shadow: -20px 0px 20px var(--ateliers-bg);
}
.time-line-main .sons {
	background: var(--sounds-bg);
	background: linear-gradient(90deg, var(--sounds-bg) 0%, rgba(0,0,0,0) 70%);
	box-shadow: -20px -5px 20px var(--sounds-bg);
}
.time-line-main .personnes {
	background: var(--peoples-bg);
	background: linear-gradient(90deg, var(--peoples-bg) 0%, rgba(0,0,0,0) 70%);
	box-shadow: -20px 0px 20px var(--peoples-bg);
}

/* TEMPLATE GENERAL  */

.texte {
	font-weight: normal;
	font-size: 1.2em;
}

.content{
	/* padding-top: 8em; */
	margin-bottom: 3em;
	display: flex;
}

main.atelier .content{
	display: block;
	/* padding-top: 12em; */
}

main.film_installation .info_technique {
	color: var(--color-films-installations);
}

main.film_installation .info_technique-resp {
	color: var(--color-films-installations);
}

article .article-header{
	position: -webkit-sticky;
  position: sticky;
  top: 8em;
	/* background: var(--main-bg-color); */
	/* box-shadow: 0px 20px 20px var(--main-bg-color); */
	z-index: 2;
	/* padding-top: 1em; */
	padding-left: 0.5em;
}

 article .article-header h1{
	position: -webkit-sticky;
 	position: sticky;
	font-family: var(--font-family-titre);
	text-transform: uppercase;
	font-size: 1.2em;
	transform: scale(3, 6);
	transform-origin: 0 0;
	line-height: 1em;
	color: var(--color-screenings);
}

article .article-header h1 span {
	display: inline-block;
}

.texte {
	font-family: var(--font-family-texte);
	letter-spacing: -0.00em
}

.texte > * {
	padding: 0.5em;
}

u.subtitle, .subtitle{
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 2em;
}

main.film-installation .subtitle, main.film-installation .info_technique{
	color: var(--color-films-installations);
}

main.film-installation .subtitle, main.film-installation .info_technique-resp{
	color: var(--color-films-installations);
}

main.screening .subtitle, main.screening .info_technique{
	color: var(--color-screenings);
}

main.screening .subtitle, main.screening .info_technique-resp{
	color: var(--color-screenings);
}

main.people .subtitle, main.people .info_technique{
	color: var(--color-peoples);
}

main.people .subtitle, main.people .info_technique-resp{
	color: var(--color-peoples);
}

main.sound .subtitle, main.sound .info_technique{
	color: var(--color-sounds);
}

main.sound .subtitle, main.sound .info_technique-resp{
	color: var(--color-sounds);
}

main.atelier .subtitle, main.atelier .info_technique{
	color: var(--color-ateliers);
}

main.atelier .subtitle, main.atelier .info_technique-resp{
	color: var(--color-ateliers);
}

.credits {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid black;
	line-height: 1.2em;
}

.places, .places-resp, .credits, .credits-resp, .files, .relation, .relation-resp {
	/* margin-top: 2em; */
	margin-top: 0em;
	padding-top: 1em;
	border-top: 1px solid #AAA;
	padding-right: 1em;
}

.relation a:nth-of-type(1),
.files ul,
.places ul,
.credits .peoples
{
	margin-top: .5em;
}

span.subtitle, .places, .places-resp, .credits, .credits-resp, .files, .relation, .info_technique {
	font-size: 1rem;
}

.info_technique-resp{
	font-size: 1rem;
}

.intention {
	z-index: 1;
	font-family: var(--font-family-text);
}


.peoples .role {
	margin-top: .5em;
	text-decoration: underline;
	break-before: avoid;
}
.peoples .role:nth-of-type(1) {
	margin-top: 0em;
}

.peoples .personne {
	/* text-align: center; */
	padding: 0 0 0 1em;
	display: flex;
	/* width: 50%; */
}
.peoples .personne::before {
	content: '';
	width: 1em;
	height: 1em;
	margin-left: -1em;
	/* position: absolute; */
	background: -webkit-radial-gradient( 50% 50%, 80% 80%, var(--color-peoples) 0%, var(--ateliers-bg-pl) 60% );
}

.peoples .credits_libre {
	margin-top: 1em;
	/* border-top: 1px solid #AAA; */
}


.relation > a,
.relation-resp > a
{
	/* padding: 0 2em; */
	display: flex;
	padding: 0 0 0 1em;
	/* background: -webkit-radial-gradient( 50% 50%, 80% 80%, var(--color-films-installations) 0%, var(--ateliers-bg-pl) 60% ); */
}

.relation a::before, 
.relation-resp a::before {
	content: '';
	width: 1em;
	height: 1em;
	margin-left: -1em;
	position: absolute;
}

.relation a.films-installations::before,
.relation-resp a.films-installations::before {
	background: -webkit-radial-gradient( 50% 50%, 80% 80%, var(--color-films-installations) 0%, var(--ateliers-bg-pl) 60% );
}
.relation a.atelier::before, 
.relation-resp a.atelier::before {
	background: -webkit-radial-gradient( 50% 50%, 80% 80%, var(--color-ateliers) 0%, var(--ateliers-bg-pl) 60% );
}
.relation a.sound::before,
.relation-resp a.sound::before {
	background: -webkit-radial-gradient( 50% 50%, 80% 80%, var(--color-sounds) 0%, var(--ateliers-bg-pl) 60% );
}
.relation a.goodie::before, 
.relation-resp a.goodie::before {
	background: -webkit-radial-gradient( 50% 50%, 80% 80%, var(--color-goodies) 0%, var(--ateliers-bg-pl) 60% );
}

.list_peoples {
	width: 50%;
	display: flex;
	position: absolute;
	flex-wrap: wrap;
}


/* TEMPLATE FILM  */
.film_install {
	max-width: 1920px;
}

.film_install h1{
	-webkit-text-stroke: .2px var(--color-films-installations);
}

.film_install .texte {
	width: 40%;
}
.film_install .gallerie {
	width: 60%;
}

.film_install .peoples {
	columns: 2;
}

main.film_installation .content{
	margin-top: 4em;
}

/* TEMPLATE ATELIER  */

.info_technique,
.info_technique-resp{
	font-size: 1rem;
	padding: 0.7rem;
}

.info_technique p,
.info_technique-resp p{
	margin-top: 0.5rem;
}

.atelier .gallerie {
	display: flex;
}

article.atelier .content {
	max-width: 85%;
}
.atelier .texte {
	display: flex;
	/* width: 65%; */
}
.atelier .column_right > *{
	margin-left: -.75em;
}

.atelier h1 {
	-webkit-text-stroke: .2px var(--color-ateliers);
}
.atelier .credits {
	columns: 1;
	margin-top: -.75em;
	width: 400px;
	position: relative;
}

.atelier .peoples {
	columns: 1;
}

.film_install {
	max-width: 1920px;
}

/* TEMPLATE SOUND  */

article.sound {
	max-width: 1000px;
}
.sound h1 {
	-webkit-text-stroke: .2px var(--color-sounds);
}

article.sound .content {
	display: flex;

}
article.sound .col_right {
	padding-left: 1em;
	/* margin-top: -.5em; */
	min-width: 300px;
}

article.sound .credits {
	margin-top: 1em;
}
.sound .gallerie img {
	margin-right: -5px;
}

/* TEMPLATE SCREENINGS */
.goodies .intro,
article.screenings.archive {
	opacity: .5;
}
.screenings .intro {
	padding: 0.5em;
	font-size: 1.5em;
	line-height: 1.2em;

	max-width: 800px;
}

.screenings h1 {
	-webkit-text-stroke: .2px var(--color-screenings);
	visibility: visible;
}

.goodies .article-header,
.screenings .article-header {
	top: 4em;
}
article.goodies .content {

	padding-top: 1em;
}
 article.screenings .content {
	padding-top: 8em;
}
article.screenings {
	max-width: 1400px;
}

article.screenings .gallerie,
article.screenings .info_pratique{
	color: var(--color-screenings);
	padding-left: 0.5em;
}

article.screenings .coming_soon {
	background: var(--color-screenings);
	color: white;
	padding: .1em  .2em;
}

article.goodies .gallerie img,
article.screenings .gallerie img {
	margin-bottom: 1em;
}

article.goodies form table {
	font-size: 14.4px;
}
article.goodies form input {
	height: 24px;
	margin-top: 1em;
}
/* TEMPLATE PEOPLES  */

.people #page > article {
	max-width: 1200px;
	/* right: 0px !important; */
	/* position: absolute; */
	/* /* display: flex; */ */
	/* padding: 0em .5em; */
}
.people #page > article > .content {
	font-weight: normal;
}

.people h1 {
	-webkit-text-stroke: .2px var(--color-peoples);
}

.people .texte {
	width: 60%;
}

.people .col_right {
	width: 40%;
	color:var(--color-peoples);
	padding: .5em;
}

.people .relation {
	/* text-align: center; */
}
.people .relation a {
	/* text-align: center; */
	/* margin: 0 auto; */

}

.people .credits {
	min-width: 30%;
}

.peoples.credits {
	columns: 2;
}

/* TEMPLATE GOODIES */

.goodies {
	color: var(--color-goodies);
}



article.goodies {
	padding-top: 1em;
	width: 50%;
	max-width: 600px;
}

.goodies .mention,
.goodies .gallerie {
	padding: .5em;
	max-width: 300px;
}
.goodies .mention {
	line-height: 1.2em;
}

.goodies .article-header {
	position: relative;
	top: 0em;
}
.goodies .article-header h1 {
	font-size: 2em;
	transform: scale(1);
	color: var(--color-goodies);
	visibility: visible;
}

.goodies .goodies-list {
	display: flex;
}
.goodies .content {
	padding-top: 0em;
	font-size: .8em;
}
.goodies .texte {
	max-width: 300px;
}
.goodies .btn_paypal {
	border: 1px solid var(--color-goodies);
	color: var(--color-goodies) ;
	padding:.2em;
	font-family: var(--font-family-titre);
	letter-spacing: .1em;
	/* text-transform: uppercase; */
}

.goodies .btn_paypal:hover {
	color: white;
	background:var(--color-goodies) ;
}



/* GALERIE SCROLL */
.gallerie.scroll_h {
	width: 100vw; 
	left: 0px;
}

.gallerie.scroll_h .scroll_right,
.gallerie.scroll_h .scroll_left
{
	height: 300px;
	position: absolute;
	opacity: .5;
	/* pointer-events: none; */
}
.gallerie.scroll_h .scroll_right {
	width: 200px;
	right: 0px;
}
.gallerie.scroll_h .scroll_left {
	width: 150px;
	left: 0px;
}
.gallerie.scroll_h .images {
	display: flex;
	height: 300px;
}
/* .gallerie.scroll_h.scroll_anime .images { */
/* 	margin-left: -100%; */
/* } */



/* M  M */
/*  OO  */
/*  OO  */
/* N  N */


#moon-timeline {
	font-weight: normal;
	line-height: 1em;
	width: 100vh;
	position: fixed;
	height: 100px;
	right: calc(-100vh - 0px);
	top: 0px;
	z-index: 4;
	display: flex;
	transform: rotate(90deg);
	transform-origin: 0 0;
	filter: blur(4px);
	opacity: 0;
	-webkit-mask-image: -webkit-gradient(linear, left TOP, left 100%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
#moon-timeline.transition {
	opacity: 1;
	transition: opacity .5s ease-in-out;
}

#moon #moon-date {
	position: fixed;
	font-size: .8em;
	right: 100px;
	text-align: right;
	z-index: 4;
}
#moon #moon-date span{
	font-family: 'moon' !important;
	font-size: 2.2em;
	margin-top: 1em;
}



#moon-timeline div.nM {
	filter: saturate(100%) brightness(20%);
}
#moon-timeline div.wxCM {
	filter: saturate(100%) brightness(50%);
}
#moon-timeline div.qM {
	filter: saturate(100%) brightness(100%);
}
#moon-timeline div.wxGM {
	filter: saturate(70%) brightness(100%);
}
#moon-timeline div.fM {
	filter: saturate(40%) brightness(100%);
}
#moon-timeline div.wnGM {
	filter: saturate(70%) brightness(100%);
}
#moon-timeline div.lQM {
	filter: saturate(100%) brightness(100%);
}
#moon-timeline div.wnCM {
	filter: saturate(100%) brightness(50%);
}

#moon-timeline div {
	width: 100%;
}
#moon-timeline[data-cat="films-installations"]  div {
	background: var(--color-films-installations);
}
#moon-timeline[data-cat="ateliers"]  div {
	background: var(--color-ateliers);
}
#moon-timeline[data-cat="sounds"]  div {
	background: var(--color-sounds);
}
#moon-timeline[data-cat="screenings"]  div {
	background: var(--color-screenings);
}


/* SLIDER */

#slider {
	text-align: center;
	left: 0;
	top: 0;
	width: auto;
	max-width: 70%;
	height: auto;
	max-height: 80%;
	z-index: 5;
	position: fixed;
	background: black;
}

#viewer_pdf {
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	position: fixed;
	z-index: 5;
	background: black;

}

#slider #slider_box{
	outline: 2px solid;
	height: 80%;
	background: black;
}

#slider #slider_box #img_description{
	color: white;
	font-size: .75em;
	font-style: italic;
}

#slider img {
	filter: grayscale(0);
	/* height: 100%; */
	width: 100%;
	max-height: 700px;
}

#slider #slider_next,
#slider #slider_prev {
	width: 50%;
	height: 100%;
	z-index: 5;
	position: absolute;
	opacity: .5;
}

#slider #slider_next{
	cursor: e-resize;
	right: 0px;
}
#slider #slider_prev{
	cursor: w-resize;
	left: 0px;
}
#slider #slider_close,
#viewer_pdf #slider_close
{
	cursor: pointer;
	position: absolute;
	z-index: 6;
	top: 5px;
	color: white;
	right: 0;
	padding: .2em;
}
#slider #slider_close::hover{
	color: white;
}
#viewer_pdf iframe{
	margin: 1em;
	width: 500px;
	height: calc(100vh - 2em);
}

.btn_play {
	bottom: 0;
	background: var(--color-films-installations);
	border-radius: 50%;
	height: 35px;
	width: 35px;
	/* margin-top: 1.5em; */
	font-size: .7em;
	line-height: 100%;
	font-weight: normal;
	padding: .1em;
	text-align: center;
	color: white;
	transform: scale(.8)
}

/* PLAYER FILM */
.player-light {
	margin-left: .3em;
	position: relative;
}

.player-light .btn_play.pause:before {
	margin-top: -0.1em;
	position: absolute;
	margin-left: -0.3em;
	content: '';
	width: 100%;
	height: 100%;
	margin-left: -50%;
	margin-top: -10%;
	background-image: url('../images/play.svg');

	font-size: .8em;
}

.player-light .btn_play.play:before {
	margin-top: -0.1em;
	position: absolute;
	margin-left: -0.3em;
	content: '';
	width: 100%;
	height: 100%;
	margin-left: -50%;
	margin-top: -10%;
	background-image: url('../images/pause.svg');
}

.btn_play.pause:before {
	margin-top: -0.1em;
	position: absolute;
	margin-left: -0.3em;
	content: '▶';
	font-size: .8em;
}
.btn_play.play:before {
	margin-top: 0.1em;
	position: absolute;
	margin-left: -0.45em;
	content: '⏸';
}

/* PLAYER SOUND */

.player {
	position: fixed;
	bottom: 0px;
	color: var(--color-sounds);
}

.player #player_source {
  display: none;
}

.player .audio-player {
	height: 50px;
	width: 100vw;
	color: black;
	font-size: 0.75em;
	overflow: hidden;
	display: grid;
	grid-template-rows: 6px auto;
	top: 95vh;
	background: var(--main-bg-color);

}

.player .timeline {
	background: white;
	width: 100%;
	position: relative;
	cursor: pointer;
	z-index: 3;
}

.player .timeline .progress {
	background: var(--color-sounds);
	width: 0%;
	height: 100%;
	transition: 0.25s;
}

.player .controls {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 2em;
	margin-top: -0.1em;
	position: absolute;
	margin-left: -0.3em;
	content: '▶';
	font-size: .8em;;
	width: 90vw;
	color: var(--color-sounds);
}
.player .controls > * {
	display: flex;
	justify-content: center;
	align-items: center;
}

.player .toggle-play.play {
	cursor: pointer;
	position: relative;
	left: 0;
	height: 0;
	width: 0;
	border: 7px solid rgba(0, 0, 0, 0);
	border-left-color: rgba(0, 0, 0, 0);
	border-left-style: solid;
	border-left-width: 7px;
	border-left: 13px solid var(--color-sounds);
}


.player .controls .toggle-play.pause {
  height: 15px;
  width: 20px;
  cursor: pointer;
  position: relative;
}

.player .controls .toggle-play.pause::before {
	background: var(--color-sounds);
  position: absolute;
  top: 0;
  left: 0px;
  content: "";
  height: 15px;
  width: 3px;
}

.player .controls .toggle-play.pause::after {
	background: var(--color-sounds);
  position: absolute;
  top: 0;
  right: 8px;
  content: "";
  height: 15px;
  width: 3px;
}

.player #btn_prev_next > span {
	margin: 0em 1em;
	cursor: pointer;
}

/* A RANGER */

.part-resp, .news-resp{
	display: none;
}

.part{
	display: flex;
}

em {
	font-style: italic;
}

strong  {
	font-weight: bold;
}

article.film_install .gallerie-resp,
article.screenings .gallerie-resp,
article.atelier .gallerie-resp,
article.sound .gallerie-resp,
article.people .gallerie-resp,
article.atelier .info_technique-resp,
.places-resp,
.credits-resp,
.relation-resp,
#img_description-resp,
.img-resp,
.gallerie-resp,
.col_right-resp,
.foot-resp{
	display: none;
}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
/* @media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {} */



@media only screen and (max-width: 1040px) {

	:root {
	--default-size: 15px;
	}

	body{
		/* -webkit-overflow-scrolling: touch;
		overflow-scrolling: touch; */
	}

	.picto-goodies {
		height: 18px !important;
	}

	.content{
		padding-top: 5rem;
	}

	.part,
	article.atelier .info_technique,
	article.film_install .gallerie,
	article.people .gallerie,
	article.screenings .col_left,
	article.sound .gallerie,
	.col_right{
		display: none;
	}

	#slider{
		width: 100%;
		max-width: 100%;&
	}

	#slider #slider_close, #viewer_pdf #slider_close{
		color: black;
		padding: 0.5em;
	}

	article.atelier .info_technique-resp,
	article.atelier .gallerie-resp,
	article.sound .credits-resp,
	article.sound .relation-resp,
	article.screenings .gallerie-resp,
	article.sound .gallerie-resp,
	article.people .gallerie-resp,
	.places-resp,
	.col_right-resp{
		display: block !important;
	}

	main{
		overflow-x: hidden;
		width: 100vw;
		padding-top: 4rem;
	}

	.foot-resp {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		background: red;
		font-family: var(--font-family-titre);
		font-size: 1.2rem;
		line-height: 1.6em;
		z-index: 3;
		height: 30px;
		background: var(--main-color);
	}
	.foot-resp.visible { display: block; !important}

	.home_article_title{
		position: relative;
		top: 0 !important;
	}

	.part-resp, .nav-part, .nav-part-resp .nav-right, .news-resp summary{
		font-family: var(--font-family-titre);
		font-size: 1.2rem;
	}

	/* HOME */

	.logo{
		height: 1.2rem;
	}

	.part-resp{
		display: block;
		padding: 0px .2em;
		margin: 0px .2em;
	}

	.nav-part.goodies{
		color: black
	}

	.nav-right{
		right: 1rem;
	}
	nav li {
		padding: 0px 0em;
		margin: 0px .3em;
	}

	.item.news{
		font-size: 1.2rem;
	}


	main.home .item.peoples{
		display: none;
	}

	main.home.visible.home-peoples .item.peoples{
		display: block !important;
	}

	.nav-part-resp li:hover{
		text-decoration: underline;
	}

	summary::marker{
		content: "";
	}

	details > summary::-webkit-details-marker {
		display: none;
	}

	.nav-part-resp li{
		padding: 0;
		margin: 0;
		line-height: 1.7rem;
	}

	.nav-part-resp li.peoples{
		display: none;
	}

		section#news {
	  display: flex;
	  left: 0;
	  position: fixed;
	  bottom: 0px;
	  text-align: left;
		height: 3%;
		padding: 0;
	  z-index: 3;
	}

	main.home.visible section#page{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
	}

  h1{
		visibility: visible !important;
		font-size: 0.5rem;
		text-align: center;
		line-height:0.5rem;
		text-transform: uppercase;
		min-width: 55px;
	}

	article .article-header h1,
	.home_article_title,
	.home_article_title .sticky{
		text-align: left;
		line-height: 0.8;
	}

	article .article-header h1{
		font-size: 2rem;
		transform: scale(1, 2);
	}

	.home_article_title,
	.home_article_title .sticky,
	.home_article_title > div{
		font-size: 2rem;
		margin-left: 0.1rem;
		position: relative;
		top: 2rem;
	}

	.item.films-installations h1{
	-webkit-text-stroke: .2px var(--color-films-installations);
	}

	.item.sounds h1{
	-webkit-text-stroke: .2px var(--color-sounds);
	}

	.item.ateliers h1{
	-webkit-text-stroke: .2px var(--color-ateliers);
	}

	.item.screenings h1{
	-webkit-text-stroke: .2px var(--color-screenings);
	}

	.item.peoples h1{
	-webkit-text-stroke: .2px var(--color-peoples);
	}

	.item.ateliers,
	.item.sounds,
	.item.films-installations,
	.item.screenings,
	.item.peoples{
		animation: none;
		transform: scale(2);
		width: 0;
		height: 50px;
		margin: 3rem;
		color: black;
		opacity: 1 !important;
	}

	.item.ateliers.anime,
	.item.sounds.anime,
	.item.films-installations.anime,
	.item.screenings.anime,
	.item.peoples.anime{
		animation: none;
	}

	article.item{
		padding: 0;
	}

	.item.films-installations{
		width: 85px;
		height: 85px;
	}

	.item.ateliers{
		width: 25px;
		height: 175px;
	}

	.item.sounds{
		width: 40px;
		height: 150px;
	}

	.item.screenings{
		width: 70px;
	}

	.item.peoples{
		width: 60px;
		height: 12px;
	}

	main.home .home_article_title{
		display: none;
	}

	main section#about{
		width: 95%;
		height: auto;
		z-index: 5;
	}

	main section#about p{
		font-size: 1rem;
		line-height: 1.3;
	}

	section#about .content{
		display: block;
	}

	main section#about .cross{
		top: 1rem;
	}

	section#about .content{
		padding-top: 0;
		/* overflow-y: none; */
	}

	/* SECTION */

	article.goodies{
		width: 100%;
		max-width: none;
	}

	article.goodies .gallerie{
		max-width: none;
		padding-top: 0;
	}

	.screenings .content{
		padding-top: 2.5rem;
	}

	.atelier .credits {
		width: auto;
	}

	.texte,
	.atelier .texte,
	.goodies-list{
		flex-direction: column;
	}

	.film_install img{
		filter: grayscale(100);
	}

	.film-installation .texte {display: flex}
	.film-installation .texte .intention {order: 1 !important}
	.film-installation .texte .gallerie-resp {order: 2 !important}
	.film-installation .texte .credits {order: 3 !important}
	.film-installation .texte .places {order: 4 !important}
	.film-installation .texte .relation {order: 5 !important}
	.film-installation .texte .files {order: 6 !important}

	.people .intro-resp {
		font-size: 1.2em;
		line-height: 1em;
		padding-left: .5em;
		width: 100%;
		border-bottom: 1px solid var(--color-peoples);
	}
	.people .intro-resp p {
		max-width: 400px;

	}

	.people .home_article_title > div {
		top: 0rem;
	}

	.people .content {
		padding-top: 1rem;
	}

	.gallerie-resp,
	.credits-resp,
	.relation-resp{
		display: block;
	}
	
	img{
		width: 100%;
	}

	.film_install .gallerie-resp{
		width: 100%;
		display: block !important;
	}
	.film_install .gallerie-resp img {
		width: 50%;
		height: auto;

	}
	.atelier .gallerie img {
		width: auto;
		height: 200px;

	}
	.gallerie.scroll_h .images {
		height: 200px;
	}

	.gallerie.scroll_h .scroll_right,
	.gallerie.scroll_h .scroll_left {
		width: 70px;
		height: 200px;
	}

	#img_description-resp{
		font-size: .5em;
		font-style: italic;
		line-height: 1rem;
		display: block;
		text-align: center;
		background: black;
		color: white;
	}
	article.screenings .gallerie-resp {
		margin-bottom: 1em;
	}
	article.screenings .gallerie-resp #img_description-resp{
		margin: 0.8rem 0;
		line-height: 1rem;
	}

	.film_install .texte,
	.texte,
	.atelier .texte {
		width: 100%;
	}

	.info_technique{
		padding: 0.5rem;
	}

	.home_article_title{
		top: 6.4rem
	}

	.home_article_title p .sticky{
		top: 0;
	}

	.atelier .column_right > *{
		margin-left: 0;
	}

	/* PAGE */

	.atelier .content{
		max-width: 100%;
	}

	.people .texte{
		width: 100%;
	}

	.info_technique,
	.info_technique-resp{
		order: 1;
	}

	.intention{
		order: 2;
	}

	.gallerie-resp{
		order: 3;
	}

	.files{
		order: 4;
	}

	.credits,
	.column_right,
	.credits-resp{
		order: 5;
	}

	.places{
		order: 6;
	}

	.relation,
	.relation-resp{
		order: 7;
	}

	.col_right-resp{
		order: 8;
	}

	.col_right-resp {
		color:var(--color-peoples);
	}

	/* IMG */

	.img-resp.active {
		display: block;
	  position: fixed;
	  top: 4rem;
	  width: 100%;
	  z-index: 3;
	}

	#img-close{
		position: absolute;
		right: 0.5rem;
		top: 4.5rem;
		z-index: 5;
	}

	/* MOON */

	#moon-timeline{
		width: 100vh;
		height:  30px;
		pointer-events: none;
	}

	#moon-date{
		display: none;
		cursor: none;
	}

	.btn_play {
		font-size: 1.2em;
		margin-top: 1em;
		padding-top: 0.1em;
	}

	/* VIEWER */
	#viewer_pdf {
		width: 100%;
	}
	#viewer_pdf iframe {
		width: calc(100% - 4em);
		height: calc(100vh - 4em);
		margin: 2em;
	}
	#viewer_pdf #slider_close{
		color: white;
		font-size: 1.5em;
	}

	.player-light, 
	.player-light #btn_play
	{
		position: fixed !important;
	}

	.atelier .gallerie .images {overflow-y: scroll}

	.files {
		display: none;
	}

	#slider_close {
		color: white !important;
	}


}