@charset "UTF-8";


@font-face {
	font-family: 'PROGRAMME';
	src: url('../font/Programme-Bold.eot');
	src: local('☺'), url('../Programme-Bold.woff') format('woff'),
		url('../Programme-Bold.ttf') format('truetype'),
		url('../Programme-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


* {
  box-sizing: border-box
}

body {
  font-family: Programme;
	display: flex;
	flex-direction: column;
}


.menu__contentabout :hover{
	color: red
}

.menu__contentarchives :hover{
	color: rgb(131, 175, 255)
}

.menu__content :hover{
	color: rgb(245, 181, 211)
}

.menu__contentcontact :hover{
	color: rgb(203, 184, 18)
}

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

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
	overflow: auto;
}

.wrapper-100 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  perspective: 1000px;

}

.wrapper-mqb {
  width: 100%;
  height: auto !important;
  display: flex;
  flex-direction: column;
  perspective: 1000px;
	background-image: linear-gradient(to bottom,rgb(203, 184, 18),red);

}

.wrapper-contact {
  width: 100%;
  height: auto !important;
  display: flex;
  flex-direction: column;
  perspective: 1000px;
	background-image: linear-gradient(to bottom,red, rgb(203, 184, 18));

}

.wrapper-about {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  perspective: 1000px;
	background-image: linear-gradient(to bottom, rgb(131, 175, 255),red);
}

.wrapper-archives {
  width: 100%;
  display: flex;
  flex-direction: column;
  perspective: 1000px;
	background-image: linear-gradient(to bottom,rgb(203, 184, 18),rgb(131, 175, 255));
	height: auto;
}


.menu {
  font-weight: bold;
  font-size: 60px;
	background-image: linear-gradient(to bottom,rgb(245, 181, 211),red);
  width: 100%;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10000;
}

.menu__logo {
	height: 20vh;
	padding: 10px;
	z-index: 100;
	position: relative;
	background-image: linear-gradient(to bottom,rgb(245, 181, 211),red);
}

.menu__logo img {
	height: 100%;
}

.menu__content {
	display:flex;
	padding: 10px;
	padding-top: 3vh;
	padding-bottom: 4vh;
	position: absolute;
	width: 100vw;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom,rgb(245, 181, 211),red);
	flex: 0 0 auto;
	justify-content: space-between;
	transition: transform 0.3s ease-in-out;

}

.menu--open .menu__content {
	transform: translate(0, 100%);
}

.menuarchives {
  font-weight: bold;
  font-size: 60px;
	background-image: linear-gradient(to bottom,rgb(203, 184, 18),rgb(131, 175, 255));
  width: 100%;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10000;
}

.menu__logoarchives {
	height: 20vh;
	padding: 10px;
	z-index: 100;
	position: relative;
	background-image: linear-gradient(to bottom,rgb(203, 184, 18),rgb(131, 175, 255));
}

.menu__logoarchives img {
	height: 100%;
}

.menu__contentarchives {
	display:flex;
	padding: 10px;
	padding-top: 3vh;
	padding-bottom: 4vh;
	position: absolute;
	width: 100vw;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom,rgb(203, 184, 18),rgb(131, 175, 255));
	flex: 0 0 auto;
	justify-content: space-between;
	transition: transform 0.3s ease-in-out;

}

.menu--openarchives .menu__contentarchives {
	transform: translate(0, 100%);
}

.menucontact {
  font-weight: bold;
  font-size: 60px;
	background-image: linear-gradient(to bottom,red, rgb(203, 184, 18));
  width: 100%;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10000;
}

.menu__logocontact {
	height: 20vh;
	padding: 10px;
	z-index: 100;
	position: relative;
	background-image: linear-gradient(to bottom,red, rgb(203, 184, 18));
}

.menu__logocontact img {
	height: 100%;
}

.menu__contentcontact{
	display:flex;
	padding: 10px;
	padding-top: 3vh;
	padding-bottom: 4vh;
	position: absolute;
	width: 100vw;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom,red, rgb(203, 184, 18));
	flex: 0 0 auto;
	justify-content: space-between;
	transition: transform 0.3s ease-in-out;

}

.menu--opencontact .menu__contentcontact {
	transform: translate(0, 100%);
}

.menuabout {
  font-weight: bold;
  font-size: 60px;
	background-image: linear-gradient(to bottom, rgb(131, 175, 255),red);
  width: 100%;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10000;
}

.menu__logoabout {
	height: 20vh;
	padding: 10px;
	z-index: 100;
	position: relative;
	background-image: linear-gradient(to bottom, rgb(131, 175, 255),red);
}

.menu__logoabout img {
	height: 100%;
}

.menu__contentabout {
	display:flex;
	padding: 10px;
	padding-top: 3vh;
	padding-bottom: 4vh;
	position: absolute;
	width: 100vw;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, rgb(131, 175, 255),red);
	flex: 0 0 auto;
	justify-content: space-between;
	transition: transform 0.3s ease-in-out;

}

.menu--openabout .menu__contentabout {
	transform: translate(0, 100%);
}

.menu-item{
	font-weight: bold;
	font-size: 40px;
	text-decoration: none;

}

.menu-item-100{
	height:100%;
	width: 100%;
	margin-left: 6vh;
	margin-right: 1vh;
	font-weight: bold;
	font-size: 40px;
	text-decoration: none;
	justify-content: space-between;
}

.menu__logo_large {
	display: flex;
	height: 10vh;
	padding: 10px;
	z-index: 100;
	position: relative;
	background-color: red;
}

.menu__logo_large img {
	height: 100%;
}

.content {
  justify-content: space-between;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

.grid-container {
	width: 300%;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  background-image: linear-gradient(to bottom, red, rgb(245, 181, 211));
  padding: 0px;
}
.grid-item {
  background-color: rgb(245, 181, 211);
  border: none;
	border-radius: 20px;
  padding: 20px;
  font-size: 30px;

}
.grid-item2 {
  background-image: linear-gradient(to bottom, red, rgb(245, 181, 211));
	padding-left: 2px;
	padding-bottom: 2px;
  border: none;
	border-radius: 60px;
  padding: 20px;
  font-size: 30px;

}

.titre{
	padding: 0px;
	color: black;
	font-size: 4vw;
}

.datelibre{
	padding: 0px;
	color: rgb(245, 181, 211);
	font-size: 8vw;
}


.date{
	padding: 20px;
	color: red;
	font-size: 3vw;
}

.evenement{
	padding: 0px;
	color: black;
	font-size: 2vw;
}

.marquee_home{
	width: 300%;
}


/* .container {
  display: flex;
  flex-wrap: wrap;
  width: 400%;
  border: none;
  transform-origin: 0% 0%;
	background-image: linear-gradient(to bottom,rgb(245, 181, 211), red)!important;

}

.jour {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  border: none;
  width: calc(300%/7);
} */

.informations2 {
	border-radius: 30px;
	padding: 1.5%;
	background-image: linear-gradient(to bottom, rgb(203, 184, 18), red);
	width:96%;
	margin-top:0%;
	margin-left:2%;
	margin-bottom:0%;
}

.informations3 {
	display: flex;
	border-radius: 60px;
	padding: 2%;
	background-image: linear-gradient(to bottom,red, rgb(131, 175, 255));
	width:96%;
	margin-top:0%;
	margin-left:2%;
	margin-bottom:0%;
}

.informations3B {
	border-radius: 120px;
	padding: 1.5%;
	background-image: linear-gradient(to bottom,red, rgb(131, 175, 255));
	width:96%;
	margin-top:0%;
	margin-left:2%;
	margin-bottom:0%;
}

.informations {
	border-radius: 30px;
		background-image: linear-gradient(to bottom, rgb(131, 175, 255), rgb(203, 184, 18));
	width:96%;
	margin-top:0%;
	margin-left:2%;
	margin-bottom:0%;
}

.textabout .informations {
	padding: 6px;
	margin: 6px;
	width: 100%;
}

.textabout {
	padding: 6px;
	font-size: 7vw !important;
	margin: 6px;
	width: 100%;
}

.textaboutS {
	margin: 10px;
	width: 100%;
	font-size: 6vw;
	text-decoration:underline;
}

.textaboutB {
	padding: 20px;
	margin: 20px;
	width: 100%;
}

.textabout, a {
	padding: 2px;
	margin-top:5px;
	width: 100%;
	font-size: 60px;
}

.textcontact .informations {
	padding: 6px;
	margin: 6px;
	width: 100%;
}

.textcontact {
	padding: 6px;
	margin: 6px;
	width: 100%;
}

.textcontact, a {
	padding: 2px;
	margin-top:5px;
	width: 100%;
	font-size: 60px;
}

.texteecranabout{
	font-size: 3vw;
	color: black;
}

.texteecranabout_titre{
	font-size: 6vw;
	color: black;
}

.imagesarchives .informations {
	padding: 6px;
	margin: 6px;
	width: 100%;
	background-blend-mode: multiply;
}

.imagesarchives{
	border-radius: 120px;
	background-image: url('../img/archive1.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;
}

.imagesarchives2{
	border-radius: 30px;
	background-image: url('../img/archive2.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;
}

.imagesarchives3{
	border-radius: 30px;
	background-image: url('../img/archive3.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;
}

.imagesarchives4{
	border-radius: 120px;
	background-image: url('../img/archive4.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;
}

.imagesarchives5{
	border-radius: 120px;
	background-image: url('../img/archive5.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;
}

.imagesarchives6{
	border-radius: 30px;
	background-image: url('../img/archive6.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives7{
	border-radius: 30px;
	background-image: url('../img/archive7.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives8{
	border-radius: 120px;
	background-image: url('../img/archive8.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives9{
	border-radius: 120px;
	background-image: url('../img/archive9.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives10{
	border-radius: 30px;
	background-image: url('../img/archive10.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives11{
	border-radius: 120px;
	background-image: url('../img/archive11.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives12{
	border-radius: 30px;
	background-image: url('../img/archive12.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives13{
	border-radius: 120px;
	background-image: url('../img/archive13.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives14{
	border-radius: 30px;
	background-image: url('../img/archive14.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives15{
	border-radius: 30px;
	background-image: url('../img/archive15.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives16{
	border-radius: 120px;
	background-image: url('../img/archive16.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}

.imagesarchives17{
	border-radius: 30px;
	background-image: url('../img/archive17.png');
	mix-blend-mode: multiply;
	background-size: 100%;
	height: 50vw;
	width:96vw;

}



.informationsR {
	border-radius: 120px;
		background-image: linear-gradient(to bottom, rgb(131, 175, 255), rgb(203, 184, 18));
	width:96%;
	margin-top:0%;
	margin-left:2%;
	margin-bottom:0%;
}

.title{
	font-size: 2vw;
	padding: 0px;
	margin: 0px;
	width: 100%;
}


/* texte calendar */
.text{
	font-size: 1.5vw;
	padding: 3px;
	margin: 1px;
	margin-right: 3px;
	width: 100%;
	color: red;
}

/* dates calendar */
h1{
font-size: 1.5vw;
color: red;
}

/* titres caldendar */
h2{
font-size: 3vw;
color: Red;
}

/* date free */
h5{
font-size: 1.5vw;
color: red;
}


/* texte autres */
h6{
	font-size: 7vw;
	color: rgb(245, 181, 211);
}

/* horaires */
h8{
	font-size: 7vw;
	color: black;
}


/* texte autres grand */
h7{
	font-size: 3vw;
	color: black;
}


h3{
font-size: 10vw;
}

h4{
font-size: 200px;
}

/* .marquee2 {
  width: 100vw;
  max-width: 100vw;
  height: 9%;
  margin-top: 0.2vh;
	margin-bottom: 0.2vh;
	float: right;
}

.track2 {
  position: relative;
  white-space:  nowrap;
  will-change: transform;
  animation: marquee2 10s reverse linear infinite;

}


@keyframes marquee2 {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}

.deroulement {
	font-size: 70px;
} */

marquee {
    font-size: 6vw;
		font-family: Programme;
    color: black;
    line-height: 7vw;

    position: relative;
}


@keyframes marquee {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}


/* Set the background color of body to tan */
body {

}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
	.menu-100 {
	  display: block ;
		  font-size: 15vw;
			  padding:  2%;
				    margin-right: 5vh;
	}
	marquee {
	    font-size: 12vw;
	    line-height: 14vw;
		}
		.menu__content {
			display:block;
			padding: 0;
		}

		.menu__contentarchives {
			display:block;
			padding: 0;
		}

		.menu__contentabout {
			display:block;
			padding: 0;
		}

		.menu__contentcontact {
			display:block;
			padding: 0;
		}

		.menu-item{
			margin-right: 600px;
		}

		.grid-container {
		 grid-template-columns: auto auto auto;
		 width: 100%;

		}

		.marquee_home{
			width: 101%;
		}

		.evenement{
			font-size: 6vw;
		}

		.titre{
			font-size: 10vw;
		}

		.datelibre{
			font-size: 20vw;
		}

		.date{
			font-size: 6vw;
		}

		.texteecranabout{
			font-size: 6vw;
			padding: 2vh;
		}

		.texteecranabout_titre{
			font-size: 10vw;
			padding-left: 2vh;
			padding-right: 2vh;
		}

}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
	marquee {
	    font-size: 12vw;
	    line-height: 14vw;
		}

		.grid-container {
			grid-template-columns:  auto;

		}

}

.about{
	width: 100vw;
	max-width: 100% !important;

}
@keyframes svgMove1 {
  0% { top: 5%;
	 			left: 5%;}

	50% { top: 20%;
							left: 5%;}

  100% { top: 5%;
	 			left: 5%;}
}

@keyframes svgMove2 {
  0% { top: 150%;
	 			left: 20%;}

	50% { top: 200%;
							left: 5%;}

  100% { top: 150%;
	 			left: 20%;}
}

@keyframes svgMove3 {
  0% { top: 300%;
	 			left: 20%;}

	50% { top: 400%;
							left: 20%;}

  100% { top: 300%;
	 			left: 20%;}
}

@keyframes svgMove4 {
  0% { top: 400%;
	 			left: 10%;}

	50% { top: 600%;
							left: 20%;}

  100% { top: 400%;
	 			left: 10%;}
}

@keyframes svgMove45 {
  0% { top: 650%;
	 			left: 5%;}

	50% { top: 800%;
							left: 10%;}

  100% { top: 650%;
	 			left: 5%;}
}

@keyframes svgMove5 {
  0% { top: 900%;
	 			left: 40%;}

	50% { top: 950%;
							left: 60%;}

  100% { top: 900%;
	 			left: 40%;}
}

@keyframes svgMove6 {
  0% { top: 1200%;
	 			left: 5%;}

	50% { top: 1000%;
							left: 5%;}

  100% { top: 1200%;
	 			left: 5%;}
}

@keyframes svgMove7 {
  0% { top: 1400%;
	 			left: 10%;}

	50% { top: 1200%;
							left: 20%;}

  100% { top: 1400%;
	 			left: 10%;}
}

@keyframes svgMove8 {
  0% { top: 1500%;
	 			left: 20%;}

	50% { top: 1600%;
							left: 20%;}

  100% { top: 1500%;
	 			left: 20%;}
}

@keyframes svgMove9 {
  0% { top: 1800%;
	 			left: 10%;}

	50% { top: 2000%;
							left: 50%;}

  100% { top: 1800%;
	 			left: 10%;}
}

@keyframes svgMove10 {
  0% { top: 2000%;
	 			left: 20%;}

	50% { top: 2200%;
							left: 20%;}

  100% { top: 2000%;
	 			left: 20%;}
}

@keyframes svgMoveMQB1 {
  0% { top: 5%;
	 			left: 5%;}

	50% { top: 65%;
							left: 5%;}

  100% { top: 5%;
	 			left: 5%;}
}

@keyframes svgMoveMQB2 {
  0% { top: 0%;
	 			left: 0%;}

	50% { top: 22%;
							left: 0%;}

  100% { top: 0%;
	 			left: 0%;}
}

@keyframes svgMoveMQB3 {
  0% { top: 5%;
	 			left: 40%;}

	50% { top: 5%;
							left: 5%;}

  100% { top: 5%;
	 			left: 40%;}
}

@keyframes svgMoveMQB4 {
  0% { top: 30%;
	 			left: 10%;}

	50% { top: 60%;
							left: 20%;}

  100% { top: 30%;
	 			left: 10%;}
}

@keyframes svgMoveMQB5 {
  0% { top: 50%;
	 			left: 30%;}

	50% { top: 40%;
							left: 5%;}

  100% { top: 50%;
	 			left: 30%;}
}


#svgFloat1{
	mix-blend-mode: multiply;
	position: absolute;
	width:50%;
	z-index:100000000;
	pointer-events: none;
	animation: svgMove1 4s ease infinite;
}



#svgFloat2{
	mix-blend-mode: multiply;
	position: absolute;
	width:60%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMove2 4s ease infinite;
}

#svgFloat3{
mix-blend-mode: multiply;
	position: absolute;
	width:70%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMove3 6s ease infinite;
}

#svgFloat4{
	mix-blend-mode: multiply;
	position: absolute;
	width:80%;
	z-index:100000000;
	pointer-events: none;
	animation: svgMove4 10s ease infinite;

}

#svgFloat45{
	mix-blend-mode: multiply;
	position: absolute;
	width:80%;
	z-index:100000000;
	pointer-events: none;
	animation: svgMove45 10s ease infinite;

}

#svgFloat5{
	mix-blend-mode: multiply;
	position: absolute;
	width:40%;
	z-index:100000000;
	pointer-events: none;
	animation: svgMove5 4s ease infinite;

}

#svgFloat6{
	mix-blend-mode: multiply;
	position: absolute;
	width:110%;
	z-index:100000000;
	pointer-events: none;
	animation: svgMove6 10s ease infinite;

}

#svgFloat7{
	mix-blend-mode:  multiply;
	position: absolute;
	width:60%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMove7 8s ease infinite;
}

#svgFloat8{
	mix-blend-mode:  multiply;
	position: absolute;
	width:40%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMove8 4s ease infinite;
}

#svgFloat9{
	mix-blend-mode:  multiply;
	position: absolute;
	width:40%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMove9 4s ease infinite;
}

#svgFloat10{
	mix-blend-mode:  multiply;
	position: absolute;
	width:60%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMove10 4s ease infinite;
}

#svgFloatMQB1{
	mix-blend-mode:  multiply;
	position: absolute;
	width:60%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMoveMQB1 6s ease infinite;
}

#svgFloatMQB2{
	mix-blend-mode:  multiply;
	position: absolute;
	width:100%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMoveMQB2 8s ease infinite;
}

#svgFloatMQB3{
	mix-blend-mode:  multiply;
	position: absolute;
	width:60%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMoveMQB3 6s ease infinite;
}
#svgFloatMQB4{
	mix-blend-mode:  multiply;
	position: absolute;
	width:70%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMoveMQB4 4s ease infinite;
}

#svgFloatMQB5{
	mix-blend-mode:  multiply;
	position: absolute;
	width:75%;
	z-index:10000000;
	pointer-events: none;
	animation: svgMoveMQB5 4s ease infinite;
}


.body100{
	max-width: 100% !important;
	width: 100% !important;
	overflow: hidden;
}