.banana{height:1.5em;display : inline; object-fit: cover;	position: relative;
	-webkit-animation: logoAp 3s 1;
	-moz-animation: logoAp 3s 1;
	-ms-animation: logoAp 3s 1;
	-o-animation: logoAp 3s 1;
	animation: logoAp 3s 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
		margin-top: -30%;
}	
	.banana:hover
{
	margin-top: -30%;
	-webkit-transform: scale(3);
	-moz-transform: scale(3);
	-ms-transform: scale(3);
	-o-transform: scale(3);
	transform: scale(3);
}
	
	
	nav .mynavbar li ul { 
	display: none; 
		
/* Rend le menu déroulant caché par défaut */
		
} 

nav .mynavbar li:hover ul {
	/* Affiche le ul contenant le sous-menu au survol de la souris */
	/* Il ne faut pas d'espace entre le li qui déclenche l'affichage du sous-menu et ce ul */
	/* Sinon, quand on déplacera la souris du li vers le sous-menu, on perdra le hover */
	z-index: 99999;
	display: block;
	margin-left: 30px;
}
.mynavbar li a:hover {
	transform: scale(1.2);
	opacity: 0.5;

}
	

* {
  margin: 0;
  padding: 0;


}
		
.mynavbar li a{
        color: white;
	    text-decoration:none;
		font-family: 'helvetica_now_text_black','Raleway', sans-serif;
	
		}


.container {
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.mynavbar {
left: 0; right: 0;
  position: fixed;
  z-index: 999999999999999;
  margin-top: 0px;
  display: none;

}

.mynav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.mynavbar .menu-items {
  display: flex;
}

.mynavbar .nav-container li {
  list-style: none;
  list-style-type:none;
	  color: white;


}

.mynavbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
    		float: left;
	left: 0px;
		line-height: normal;



}

.mynavbar .nav-container a:hover{
    font-weight: bolder;
  text-decoration:none;
}

.mynav-container {
  display: block;
  position: relative;
  height: 60px;
  text-decoration:none;
}

.mynav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
  text-decoration:none;
}

.mynav-container .hamburger-lines {
  display: flex;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  flex-direction: column;
  justify-content: space-between;
  text-decoration:none;
	
}

.mynav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: white;
	}




nav .mynav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
border: solid;

}

nav .mynav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
    transition: transform 0.4s ease-in-out;
border: solid;
}

nav .mynav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
border: solid;}

nav .mynavbar .menu-items {
  padding-top: 120px;
background-color:  #0e2431;  opacity: 0.5; height: 100vh;
  width: 80%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: 10%;
  margin-right: 10%;
  transition: transform 0.5s ease-in-out;
  text-align: left;
  list-style-type:none;
  text-decoration:none;
  color: white;
  padding-left: 20px;
  line-height: 150%;
}

nav .mynavbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration:none;
text-align: left;
	margin-left: 10px;
	left: 0px;}


.mynav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.mynav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.mynav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.mynav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.mynav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}

.marge_haut{margin-top: -10px;}




@media all and (max-width: 991px)
{

    #menu 
    {
        display: none;
    }
 
  nav   .mynavbar
    {
      display: block;
    }
}

  #buttonne{
    margin: 30px;
  }


.logo_gauche
{
	margin-left: 10px;
	margin-top: 0px;
	list-style-type: none;
	z-index:999999;
	position: fixed;
	filter: drop-shadow(0 0 0.25rem black);
}

iframe {
  border: 0px ;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}


html
{
	height: 100%;
	margin-top: 0px;
	margin-left: 0px;
	padding-right: 0px;
}

a
{
	text-decoration: none;
}

img
{
	display:block;
}

#loader
{
	height: 100vh;
	width:100%;
	background-color:black;
	z-index: 50;
	position: absolute;
	top: 0px;
	left: 0;
}

.loader
{
	width: 50px;
	height: 50px;
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	margin-top: 50vh;
	margin-left: 50%;
}

body
{
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-weight: 300;
	font-size: 15px;
	position: absolute;
	overflow-x: hidden;
	overflow-y: visible;
	left: 0;
	right: 0;
	width:100%;
	background-size: cover;
	background-position: center;
	;
	background-repeat: no-repeat;
	background-color: black;
}

*
{
	box-sizing:border-box;
}

.containerbis
{
	clear: both;
	width: 100%;
	position: relative;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	top: 0px;
	left: 0px;
	right: 0px;
}

.clr
{
	clear: both;
	padding: 0;
	height: 0;
	margin: 0;
}

.main
{
	width: 90%;
	margin: 0 auto;
	position: relative;
}

.container > header,#section-1
{
	width: 100%;
	/* [disabled]max-width: 960px;
	*/
	height: auto;
	position: relative;
}

#menu
{
	width: 100%;
	left: 0px;
	right: 0px;
	/* [disabled]text-align: right;
	*/
	color: #FFFFFF;
	z-index: 99999;
	margin-top: 10px;
	background-color: transparent;
	position: relative;
}

#menu.fixed
{
	position:fixed;
}

.nav
{
	margin: 0;
	padding: 10px 10px 0 0;
	animation-duration: 1s;
	animation-name: slidein;
	text-align: right;
	position: fixed;
	list-style-type: none;
	width: 100%;
}
.nav
{
animation: slide-in 2s forwards;
  list-style: none;
}
@keyframes slide-in {
from {
left: -100%;
}
to {
left: calc(100% - 20px);
translate: -100%;}
}

.nav li
{
	display: inline;
	position: relative;
	list-style: none;
}

.nav li a
{
	display: inline-block;
	color: white;
	font-family: 'helvetica_now_text_black','Raleway', sans-serif;
	font-size: 24px;
	transition: all 0.3s;
	transform: scale(0.8);
	opacity: 1;
	-webkit-text-stroke: 0.8px black;
	white-space: nowrap;
	min-width: 3em;
	text-align:center;
}

.nav li a:hover
{
	color: white;
	transform: scale(1.2);
	opacity: 0.5;
}

.nav li ul
{
	display: none;
	/* Rend le menu déroulant caché par défaut */
}

.nav li:hover ul
{
	/* Affiche le ul contenant le sous-menu au survol de la souris */
	/* Il ne faut pas d'espace entre le li qui déclenche l'affichage du sous-menu et ce ul */
	/* Sinon, quand on déplacera la souris du li vers le sous-menu, on perdra le hover */
	z-index: 99999;
	display: block;
	position: absolute;
	top: 100%;
	right: 0;
}

.navbar-default
{
	background-color: transparent;
}

.navbar-brand, .navbar-default .navbar-nav > li > a
{
	color: #777;
}

.fa-arrow-circle-up
{
	color: #7a6d58;
}

.fa-arrow-circle-up:hover
{
	color: #aba69c;
}

.conteneur
{
	width: 100%;
	min-height: 100vh;
	color : black;
	background-color: white;
	position:absolute;
}

.jefferson
{
	width: 80%;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 1em;
}

.video-container
{
	position: relative;
	padding-bottom: 56.25%;
	margin-top: 1em;
	margin-bottom: 0em;
}

.video-container iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.kern
{
	width : 70%;
	margin: auto;
	height: 100%;
	position:relative;
	overflow: hidden;
	vertical-align: middle;
	border-style: none;
	display:block;
}

.haut
{
	margin-top:80px;
	margin-bottom: 80px;
}

.vimeo_slider
{
	width: 80%;
	min-height: 100vh;
	margin: 0 auto;
	display: flex;
}

.iframeContainer
{
	position: relative;
	flex: 1;
	padding: 56.25% 0 0 0;
	background: #cbb2a3;
}

#vimeo_slider
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.responsive
{
	height: auto;
	width:100%;
}
.space{
	margin-bottom: 10px;
}

/* Classe .youtube qui servira à définir les style de votre balise <iframe> et donc de gérer sa taille dynamiquement avec les unités vw */
.video-responsive
{
	overflow:hidden;
	position:relative;
	display: block;
	margin: auto;
	min-width: 60%;
}

.video-responsive iframe
{
	width: 100%;
	display: block;
	aspect-ratio: 16 /9;
}

.folks
{
	width:100%;
}

.vignettes
{
	width:100%;
}

.image1
{
	float:left;
	margin-left:-18vw;
	width:75%;
	margin-right: 30px;
	margin-bottom: 10px;
}

.image2
{
	float:right;
	margin-right:-18vw;
	margin-left: 30px;
	width:35%;
	height:auto;
	margin-bottom: 10px;
}

.image2b
{
	float:right;
	margin-right:-18vw;
	margin-left: 30px;
	width:50%;
	height:auto;
	margin-bottom: 10px;
}

.image2c
{
	float:right;
	margin-right:-18vw;
	margin-left: 30px;
	width:45%;
	height:auto;
	margin-bottom: 10px;
	;
}

.image3
{
	float:left;
	margin-left:-18vw;
	margin-right: 30px;
	width:40%;
	height:auto;
	margin-bottom: 10px;
}

.image3b
{
	float:left;
	margin-left:-18vw;
	margin-right: 30px;
	width:60%;
	height:auto;
	margin-bottom: 10px;
}

#fondnoirlast
{
	background-color: black;
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Slider No Smoking */
#content
{
	margin:0em auto;
	width:100%;
	overflow:hidden;
	position:relative;
	padding-top:0em;
	text-decoration: none;
	height: 100vh;
	background-color: #cab2a3;
}

#slide
{
	/* initialisé en javascript */
	/*position:relative;
	/**/
	/*width:400%;
	/* contient 4 éléments donc 4x100 = 400% */
		  vertical-align:middle; 
	  text-align: center;
  display: flex; /* On initialise flexbox */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
}

.article
{
	/* initialisé en javascript */
display: block;/*width:25%;
	/* il y a 4 éléments donc 100/4 = 25% */
	/*float:left;
	/**/
}

.fleche
{
	position:absolute;
	top:50%;
	font-size:8em;
	line-height:1em;
	color:white;
	cursor:pointer;
	z-index: 99999999;
}

.fleche:hover
{
	color:#7a6d58;
}

.droite
{
	right:0;
}

.gauche
{
	left:0;
}

#sliderNoSmoking
{
	max-height: 100vh;
	text-decoration: none;
	z-index : 9999;
}

/*Slider */
ul
{
	list-style:none;
}

#textasiat
{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	text-decoration: none;
	float: left;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;
}

#textasiat li a
{
	color:white;
	text-shadow: 2px 2px 4px #000000;
	text-decoration: none;
	z-index: 99;
}

#textasiat li a:hover
{
	color: #cecece;
}

#textasiat2
{
	padding: 0;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	z-index: 99999;
	font-size: 6vw;
	line-height: 6vw;
	margin-top: 50px;
}

#textasiat2 li
{
	font-size:8vw;
	line-height:6vw;
	color: white;
	text-shadow: 2px 2px 4px #000000;
}

#textasiat2 li a
{
	font-size:8vw;
	line-height:8vw;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	-webkit-transition: color 2s, font-size 2s;
	-moz-transition: color 2s, font-size 2s;
	-o-transition: color 2s, font-size 2s;
	transition: color 2s, font-size 2s;
}

#textasiat2 li a:hover
{
	font-size:20vw;
	color: #cecece;
}

#textasiat2 li.designer
{
	font-size: 4vw;
	color: white;
	-webkit-transition: color 2s, font-size 2s;
	-moz-transition: color 2s, font-size 2s;
	-o-transition: color 2s, font-size 2s;
	transition: color 2s, font-size 2s;
	line-height: 4vw;
}

#textasiat2 li.designer:hover
{
	font-size: 10vw;
	color: #cecece;
}

#textasiat3 li a
{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	float: left;
	color: white;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;
	text-decoration: none;
	text-shadow: 2px 2px 4px #000000;
}

#textasiat3 li a:hover
{
	color: #cecece;
}
.blackie{text-align:left; }

#imagasiat
{
	bottom: 0;
	position: absolute;
	z-index: 999;
	-webkit-transition: -moz-transform .3s ease-out;
	-moz-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
	vertical-align: middle;
}

.imagasiat
{
	max-height: 100vh;
	float: right;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	margin-right: 5em;
	-webkit-transition: -moz-transform .3s ease-out;
	-moz-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
}

.imagasiat2
{
	max-height: 100vh;
	text-align: center;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	vertical-align:middle!important;
	border: 1vw solid #000000;
	opacity: 0;
	transition: all 1.5s ease-in-out;
	margin-right: 5em;
}

.niveau1:hover + .niveau2
{
	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5);
}

.niveau1:hover + .niveau2
{
	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5);
}

.imagasiat2
{
	max-height: 100vh;
	float: right;
	top: 0px !important;
	max-width: 100%;
	bottom: 0px!important;
	position: relative;
	z-index: 9999;
	border: 1vw solid #000000;
	vertical-align:middle!important;
	opacity: 0;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 3s, visibility 0s 0.5s;
}

.niveau3:hover + .niveau4
{
	opacity: 1;
	transition: all 2s ease-in-out;
}

.animClass
{
	backface-visibility: hidden;
	margin-right: 0px;
	right: 0px;
	position: relative;
	top: 0px;
	left: auto;
	bottom: auto;
	float: right;
	margin-top: 0px;
}

.amber
{
	position: relative;
	top:0;
	left: 0;
	display: block;
}

.amber img
{
	max-width: 90vw;
	height: 100vh;
	object-fit: cover;
	box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
	display: block;
	transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
	margin-top: -100px;
	margin-left: 0px;
	border: 1vw solid #000000;
	margin-right: 0px;
	text-align: center;
}

.amber:hover img
{
	box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);
	margin-top: 20px;
	margin-left: 20%;
}

.amber h1
{
	position: absolute;
	transform: translate(10%, -600%);
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;
	margin: 20%;
	text-decoration: none;
	color:white;
	text-shadow: 2px 2px 4px #000000;
}

.amber h1:hover
{
	color: #cecece;
}

.a-img-txt
{
	display:grid;
}

/* les enfants se superposent */
.a-img-txt>*
{
	grid-area:1/1/-1/-1;
	/* raccourci pour grid-row et grid-column */
}

.a-img
{
	max-height: 100vh;
	top: 0px !important;
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 1vw solid #000000;
	z-index: 9999;
}

/* le texte */
.a-txt
{
	display:flex;
	justify-content:center;
	align-items:center;
	color:#fff;
	opacity:0;
	filter:invert(0);
	/* antibug si effet sur a-img */
	transition:opacity .8s;
	padding: 0;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	z-index: 99999;
	font-size: 8vw;
	line-height: 8vw;
}

/* les couleurs c1 et c2 */
.c1
{
	background:#ff6600cc;
	/* avec alpha */
}

.c2
{
	background:#6600ffcc;
	/* avec alpha */
}

/* le survol */
.a-txt:hover
{
	opacity:1;
	text-shadow: 2px 2px 4px #000000;
}

.a-img-txt:hover .a-img
{
	filter:invert(0);
}

#fondnoir
{
	background-color: black;
	padding-bottom : 80px;
}

.rotate-cadre
{
	position: relative;
	/* pour servir de référent */
	float: left;
	display: flex;
	/* juste pour centrage des éléments contenus */
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: auto;
	overflow: hidden;
	/* masque les débordement */
	margin-right: 30px;
	margin-bottom:2em;
}

.static-element
{
	margin-top: 0em;
	/* décalage vers le bas */
	margin-bottom: 0em;
	position: relative;
	/* obligatoire pour qu'il soit au dessus */
	text-align: center;
}

.rotate-img
{
	position: absolute;
	width: 300%;
	/* toute la largeur du parent */
	animation: rotate 4s linear infinite;
	transform: rotate(0deg);
}

@keyframes rotate
{
	100%
	{
		transform: rotate(360deg);
	}
}

figure
{
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin: 0;
}

figcaption
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0px;
	bottom: 1000px;
	width: 100%;
	height: 100%;
	text-align: center;
	color: white;
	background-color : rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease-in;
	padding-left: 1em;
	padding-right: 1em;
	font-family: 'ralewayblack', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size:1.5vw;
	line-height: 1.2em;
	pointer-events: none;
}

figure:hover figcaption
{
	opacity: 1;
}

*,*:after,*:before
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-bottom: 0;
	padding-left: 0;
	/* [disabled]padding-right: 0;
	*/
	padding-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after
{
	content: "";
	display: table;
	clear: both;
}

#green
{
	height: 100vh!important;
	background-color: #ff0590;
	overflow:hidden;
	text-align: center;
	width: 100vw;
}

#green p
{
	font-size: 80vw!important;
	color: #ffce21;
	transform: rotate(-90deg);
	margin-left: -0.18em;
	text-align: center;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

#rocknroll
{
	height: 100vh;
	background-color: red;
	overflow:hidden;
	text-align: center;
}

#rocknroll p
{
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 142vh;
	line-height: 103vh;
	font-weight: 600;
	color: black;
	transform: rotate(0deg);
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

#jaune
{
	height: 100vh;
	background-color: #cab2a3;
	overflow:hidden;
	text-align: center;
	margin-top: 10px;
}

#jaune p
{
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 142vh;
	line-height: 0vh;
	font-weight: 600;
	color: #cecece;
	transform: rotate(30deg);
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

/* déplacement vertical et horizontal */
*, ::after, ::before
{
	box-sizing: border-box;
}

.vertical
{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	height:100%;
}

.vertical>h2
{
	margin: 0;
	grid-column:1;
	overflow:hidden;
	transform: scale(-1);
	font-size:110vw;
	color:ivory;
	text-align:center;
	line-height: 95vw;
}

.vertical>h2> up-text
{
	display:block;
	margin:auto 0;
	padding:0 ;
	z-index:10;
	writing-mode: vertical-rl;
	animation: slide 10s linear infinite;
	/*or*/
	/*reverse*/
	height:100%;
}

@keyframes slide
{
	from
	{
		transform: translatey(16.5em);
	}

	to
	{
		transform: translatey(-16.5em);
	}
}

/* le block conteneur */
.marquee-rtl
{
	max-width: 100%;
	/* largeur de la fenêtre */
	overflow: hidden;
	/* masque tout ce qui dépasse */
height: 100%}

/* le bloc défilant */
.marquee-rtl> :first-child
{
	/* on ajoute la classe .animated */
	display: inline-block;
	/* modèle de boîte en ligne */
	padding-right: 0em;
	/* un peu d'espace pour la transition */
	padding-left: 100%;
	/* placement à droite du conteneur */
	white-space: nowrap;
	/* pas de passage à la ligne */
	animation-name: defilement-rtl;
	/* référence à la règle @keyframes mise en oeuvre */
	animation-duration: 3s;
	/* valeur à ajuster suivant la longueur du message */
	animation-iteration-count: infinite;
	/* boucle continue */
	animation-timing-function: linear;
	/* pas vraiment utile ici */
}

@keyframes defilement-rtl
{
	0%
	{
		transform: translate3d(0,0,0);
		/* position initiale à droite */
	}

	100%
	{
		transform: translate3d(-200%,0,0);
		/* position finale à gauche */
	}
}

/* ---------------- */
/* défilement vertical */
.marque-ver
{
	position:relative;
	max-width: 100%;
	height:50em;
	overflow: hidden;
	font-size: 14vw;
}

.marque-ver > div
{
	position:relative;
	padding: 2em;
	padding-top: 50em;
	/* meme que height du parent */
	animation: defilement-ver 10s infinite linear;
	cursor: pointer;
}

@keyframes defilement-ver
{
	0%
	{
		transform: translate3d(0,0,0);
	}

	100%
	{
		transform: translate3d(0,-100%,0);
	}
}

/* ---------------- */
/* ---------------- */
/* Back to top */
#scrollUp
{
	position: fixed;
	bottom : 10px;
	right: -100px;
	opacity: 1;
	z-index: 999999999999999;
}

/* Répétition des titres */
p
{
	width: max-content;
	text-shadow: calc(var(--offsetText) * 1px + 0.5em) 0,calc(var(--offsetText) * -1px - 0.5em) 0,calc(var(--offsetText) * 2 * 1px + 1em) 0,calc(var(--offsetText) * 2 * -1px - 1em) 0,calc(var(--offsetText) * 3 * 1px + 1.5em) 0,calc(var(--offsetText) * 3 * -1px - 1.5em) 0,calc(var(--offsetText) * 4 * 1px + 2em) 0,calc(var(--offsetText) * 4 * -1px - 2em) 0,calc(var(--offsetText) * 5 * 1px + 2.5em) 0,calc(var(--offsetText) * 5 * -1px - 2.5em) 0,calc(var(--offsetText) * 6 * 1px + 3em) 0,calc(var(--offsetText) * 6 * -1px - 3em) 0,calc(var(--offsetText) * 7 * 1px + 3.5em) 0,calc(var(--offsetText) * 7 * -1px - 3.5em) 0,calc(var(--offsetText) * 8 * 1px + 4em) 0,calc(var(--offsetText) * 8 * -1px - 4em) 0,calc(var(--offsetText) * 9 * 1px + 4.5em) 0,calc(var(--offsetText) * 9 * -1px - 4.5em) 0,calc(var(--offsetText) * 10 * 1px + 5em) 0,calc(var(--offsetText) * 10 * -1px - 5em) 0;
	min-width: calc(var(--offsetText) * 1px + 0.5em);
	animation: slide 20s infinite linear;
	position:relative;
}

p:nth-child(odd),p:nth-child(even):before
{
	animation-direction: reverse;
	color: lime;
	transform: rotate(-90deg);
	margin-left:-7% ;
	transform-origin:0% 0;
}

@keyframes slide
{
	to
	{
		text-indent: calc(var(--offsetText) * -10px - 0.5em);
	}
}

/*photo ROCK fullscreen et titre + audio*/
#musette
{
	min-height: 100vh;
}

.musette
{
	position: relative;
	overflow : hidden;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width:100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: top right;
	background-repeat: no-repeat;
	background-image: url("../images/musette.jpg");
	background-color: black;
}

.musette h1
{
	margin-left: 0.5em;
}

.presley
{
	color: red;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size: 6vw;
	line-height: 6.2vw;
	width: 50vw;
	margin-bottom:0.2em;
}

audio
{
	z-index: 999;
	position: relative;
	margin-top: 1.5em;
	margin-left: 5em;
}

.fb-video
{
	text-align:center;
	display: block;
	position: relative;
	min-width: 100%;
	padding-top: 15%;
	min-height: 100vh;
	z-index: 9999;
	background-size: 200%;
}

/*Media queries */
@media only screen and (max-width: 960px)
{
	figcaption
	{
		font-size: 1.2em;
	}
		.texte h1
{
	font-family: 'chunkfive', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-weight: lighter;
	letter-spacing: -3px;
	font-size: 20vw;
	line-height:10vw;
	text-align: center;
	color: blue;
}
	.texte h4
{
	font-family: 'ralewaybold', 'Impact', 'Haettenschweiler', "Franklin Gothic Bold", "Arial Black", sans-serif;
	margin-top:30px;
	margin-bottom: 20px;
	font-size:1em;
	line-height: 1em;
	text-align: center;
	text-transform: uppercase;
}
}

/* Lettrine */
.texte h2::first-letter
{
	float: left;
	font-size:6em;
	font-weight:bold;
	line-height:0.7em;
	font-family: 'chunkfive', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	margin-left: -10px;
	padding-left: 8px;
	margin-right: 10px;
}
	
@media only screen and (max-width: 960px)
{
.texte h2::first-letter
{

	font-size:4em;

}

}

.lettrine_beige:first-letter
{color: #cab2a3;}
.lettrine_rouge:first-letter
{color: red;}


/* textes */
.texte
{
	color: black;
	min-width: 100%;
	padding-left: 21vw;
	padding-right:21vw;
	padding-top:0vh;
	padding-bottom: 50px;
}

.contour
{
	background-image: url("../images/contour_rock.gif");
	object-fit: fill;
	background-attachment: fixed;
	background-size: 100% 100%;
	padding-bottom: 50px;
}

.texte_a
{
	width: 100vw;
	padding-top:10vh;
	padding-bottom: 10vh;
	background-image: url("../images/fond_psyche.gif");
	text-align: center;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

.texte h1
{
	font-family: 'chunkfive', Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-weight: lighter;
	letter-spacing: -3px;
	font-size: 12vw;
	line-height:10vw;
	text-align: center;
	color: #a98d7b;
}

.texte h2
{
	font-family: 'ralewayextralight', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	line-height: 1.5em;
	font-size: 1.5em;
}

.texte h2 span
{
	font-family: 'ralewaysemibold', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

.texte h2 strong
{
	font-family: 'ralewayblack', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

.texte_a h1
{
	font-family:"retro_coolregular";
	color: white;
	opacity: 0.7;
	text-shadow: 1px 1px 2px black;
	font-size: 15vw;
	line-height:12vw;
}

.texte_a h2
{
	font-family:"retro_coolregular";
	color: white;
	opacity: 1;
	text-shadow: 1px 1px 2px black;
	font-size: 8vw;
	line-height: 5vw;
	margin-bottom: 0.5em;
}

.blue
{
	font-size: 3.5vw;
	/* ou 5vw comme dans l'attribut "style" de votre balise <h3> */
	line-height:100% !important;
	color: yellow;
	/* ou white comme dans l'attribut "style" de votre balise <h3> */
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif !important;
	letter-spacing: 1px;
	text-align: center;
	text-shadow:0px 0px 10px black;
	margin-bottom: 0.5em;
	margin-top:1em;
	padding-left: 20vw;
	padding-right: 20vw;
}

.bluefr
{
	text-align: center;
	font-size:4.5vw;
	letter-spacing: 1px;
	color: white;
	line-height:110%;
	text-shadow:0px 0px 10px black;
	padding-left: 20vw;
	padding-right: 20vw;
}

.beige
{
	color: #cab2a3;
}

.texte h3
{
	font-family: 'ralewayextralight', 'Impact', 'Haettenschweiler', "Franklin Gothic Bold", "Arial Black", sans-serif;
	line-height: 1em;
	font-size: 1.7em;
}

.red
{
	color: red;
}

.strong
{
	font-family: 'ralewaybold', 'Impact', 'Haettenschweiler', "Franklin Gothic Bold", "Arial Black", sans-serif;
}

.texte h4
{
	font-family: 'ralewaybold', 'Impact', 'Haettenschweiler', "Franklin Gothic Bold", "Arial Black", sans-serif;
	margin-top:30px;
	margin-bottom: 10px;
	font-size:2em;
	line-height: 1.2em;
	text-align: center;
	text-transform: uppercase;
	color: black;
}

h5
{
	font-family: 'black_clouds_white_skyregular', 'Impact', 'Haettenschweiler', "Franklin Gothic Bold", "Arial Black", 'sans-serif';
	padding-right: 40px;
	background-color : black;
	color : #00BFFF;
	padding-top: 40px;
	margin-top:0px;
	font-size: 15vw;
	text-align: center;
	top: 0;
	padding-bottom : 50px;
}

/* Images dans textes */
/* FOOTER */
.reseaux
{
	display:flex;
	justify-content:center;
	align-items:center;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: #fff;
}

.reseaux a, .reseaux button
{
	font-size: 1em;
	display: inline-block;
	padding:0;
	margin: 0 0.5em;
}

.reseaux a .fab, fa-brands, .reseaux button .fa
{
	color: #7a6d58;
	/* BEIGE foncé */
}

.reseaux a:hover .fab, .reseaux button:hover .fa
{
	color: #aba69c;
	/* BEIGE clair */
}

.reseaux a, fa-brands, .fab
{
	color: #7a6d58;
	/* BEIGE foncé */
}

.reseaux a:hover, fa-brands a:hover, .fab
{
	color: #aba69c;
	/* BEIGE clair */
}

#credits
{
	text-align:center;
	background-color: #fff;
	font-size: 12px;
	height: auto;
	padding-bottom: 10px;
}
@media only screen and (max-width: 767px)
{
	


	.texte h2
	{
		font-family: 'ralewayextralight', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
		line-height: 1.5em !important;
		font-size: 1.3em !important;
	}

	.texte h4
	{
		font-size: 1.1em!important;
	}

	.musette
	{
		/* On stylise notre élément pour qu'il prenne toute la largeur et 100px de haut. On lui affecte une image de fond que l'on répète de gauche à droite */
		width: 100%;
		height: 100%;
		background-image: url('../images/musette.jpg');
		background-repeat: repeat-x;
		background-position-x: 0%;
		margin-top:0px;
		/* On définit les comportements de l'animation : sa durée (3 secondes), le nombre d’exécution (à l'infini), la fonction de "mouvement" (début et fin "amortis"), le sens du mouvement (en alternance), le nom de l'animation qui va être définit ci dessous */
		animation-duration: 10s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-direction: alternate;
		animation-name: musetteAnimation;
	}


	.texte_a .blue
	{
		font-size: 5.5vw;
		line-height:100% !important;
	}

	.texte_a .bluefr
	{
		font-size:7vw;
	}

	.image1
	{
		float:left;
		margin-left:0vw;
		width:100%;
		margin-right: 0px;
	}

	.image2
	{
		float:right;
		margin-right:0vw;
		margin-left: 0;
		width:100%;
		height:auto;
	}

	.image2b
	{
		float:right;
		margin-right:0vw;
		margin-left: 0px;
		width:100%;
		height:auto;
	}

	.image3
	{
		float:left;
		margin-left:0vw;
		margin-right: 0px;
		width:100%;
		height:auto;
	}

	.image3b
	{
		float:left;
		margin-left:0vw;
		margin-right: 0px;
		width:100%;
		height:auto;
	}

	.imagasiat
	{
		width:auto;
		height: 100%;
		margin-right: 0;
		display:block;
		margin:auto;
		text-align:center;
		float:none;
		clear:both;
	}

	.imagasiat2
	{
		width:auto;
		padding-right: 0;
		display:block;
		margin:auto;
		text-align:center;
		float:none;
		clear:both;
	}

	.fb-video
	{
		padding-top: 40%;
	}

	.lddc .sl-slider h3
	{
		bottom: 20px;
	}

	.musette h1
	{
		color: red;
		font-size: 8vw;
		line-height:8vw;
		margin-left:1em;
	}
	


}

.logo_gauche
{
	float:left;
}
	@keyframes musetteAnimation
	{
		from
		{
			background-position-x: 2048px;
		}

		to
		{
			background-position-x: 0px;
		}
}