@font-face {
 font-family: "Writer";
 src: url("CSS/font/Writer-Bold.woff") format("woff");
}

@font-face {
 font-family: "Writer";
 src: url("CSS/font/Writer-Regular.woff") format("woff");
}


@font-face {
    font-family: 'Montserrat';
    src: url('CSS/Montserrat-Regular.woff') format('woff');
}

#conteneur{

position: absolute;
top:100px;
left:0px;
z-index:1;

}

#conteneur_haut{

	position: absolute;
	top:0px;
	left:0px;
	z-index:2;
}


#conteneur_bas{

position: absolute;
top:1000px;
left:0px;
z-index:3;

}


body{
	background-color:none;
  margin-top: 50px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 100px;
	cursor:crosshair;
}

.p1 {
font-size: 10px;
color: #000000;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
}

p {
color: #000000;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Montserrat", Helvetica, sans-serif ;
text-justify: inter-word;
line-height: 120%;
}

a{
font-size:30px;
color: #000000;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}

a:hover{
font-size:30px;
color: #000000;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}

h5{
font-size:30px;
color: #000000;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}
h5:hover{
font-size:60px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

h6{
font-size:50px;
color: #000000;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}

h6:hover{
font-size:10px;
color: none;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

#textebarré {
color: #000000;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

#citation {
	background: none;
padding: 10px;
overflow: hidden;
width:1300px;
height: 250px;
display: inline-block;
border: none;
font-size:50px;
color: #000000;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

#citation:hover{
	background: none;

padding: 10px;
overflow: hidden;
width:1300px;
height: 250px;
display: inline-block;
border: none;
font-size:50px;
color: #000000;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}

#disperse{
	background: none;
padding: 10px;
overflow: hidden;
width:1300px;
height: 250px;
display: inline-block;
border: none;
font-size:10px;
color: #000000;
line-height: 10% ;
letter-spacing: 1px;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}

#disperse:hover{
	background: none;
padding: 10px;
overflow: hidden;
width:1300px;
height: 250px;
display: inline-block;
border: none;
font-size:10px;
color: #000000;
line-height: 250% ;
letter-spacing: 30px;
font-style: bold;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}

h1 {
font-size:40px;
color: #000000;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
}



h2 {
font-size:400%;
color: black;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
float: right;
}

h3 {
height:50px;
width:100px;
font-size:50px;
color: #000000;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
}

h4 {
height:20px;
width:100px;
font-size:40px;
color: #ff005a;
font-style: normal;
font-weight: bold;
font-family: "Writer", Helvetica, sans-serif ;
}

.contenu-un{
	background-color:none;
	width:100px;
	margin:0;
	display:inline-block;
	font-size:18px;
	transition-duration:1s;
  transform: rotate(0deg);
  transition-delay: 1s;
 border-radius: 0 0;
 height:50px;
 transform: scale(1);
 text-align:center;

}
.contenu-un:hover{
	background-color:yellow;
	width:100px;
	display:inline-block;
	font-size:32px;
	transition-duration:0s;
	box-shadow: 1px 0px 42px 36px rgba(0,0,0,0.75);
	-webkit-box-shadow: 1px 0px 42px 36px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 0px 42px 36px rgba(0,0,0,0.75);
   transform: rotate(180deg);
   transition-delay: 0s;
  border-radius: 50% 50%;
  transform: scale(1.5);
  }

.contenu-deux{
	  background-color: none;
	  width: 100px;
	  height: 100px;
	  margin: 0;
	  display: inline-block;
	  font-size:18px;
	  transition-duration: 1s;
	}

	.contenu-deux : hover{
	  background-color: blue;
	  width: 200px;
	  height: 200px;
	  margin: 0;
	  display: inline-block;
	  font-size:18px;
	  transition-duration: 1s;
	}

  #titre{
		padding: 10px;
	  overflow: hidden;
	  width:500px;
		height: 200px;
	  display: inline-block;
		border: none;
	}
	#titre1{
		padding: 0px;
		overflow: hidden;
		width:1355px;
		height: 200px;
		display: inline-block;
		border:none;
	}



	#soustitre{
	  overflow: hidden;
	  width:800px;
		height: 100px;
	  display: inline-block;
		border: none;
	}

	#soustitre1{
		overflow: hidden;
		width:1000px;
		height: 100px;
		display: inline-block;
		border: dashed;
	}
.blocimage{
	padding: 10px;
	overflow: hidden;
	width:500px;
	height: 600px;
	display: inline-block;
	border: dashed;
}
.blocimage img{
width: 100%;
display:block;
}

	#content{
		padding: 10px;
	  overflow: hidden;
	  width:500px;
		height: 700px;
	  display: inline-block;
		border: none;
		background: none;

	}
	#content2{
		padding: 10px;
		overflow: hidden;
		width:600px;
		height: 600px;
		display: inline-block;
		border: none;
		float: right;
		background: none;

	}

	#blanc{
		overflow: hidden;
		width:600px;
		height: 600px;
		display: inline-block;
		border: none;
	}

	#blanc1{
		overflow: hidden;
		width:600px;
		height: 700px;
		display: inline-block;
		border: none;
	}

	#content3{
		padding: 10px;
		overflow: hidden;
		width:600px;
		height: 600px;
		display: inline-block;
		border: dashed;
		float: right;
		background: none;

	}

	#content4{
		padding: 10px;
	  overflow: hidden;
	  width:500px;
		height: 700px;
	  display: inline-block;
		border: dashed;
		background: none;

	}
	#content5{
		overflow: hidden;
		width:1400px;
		height: 400px;
		display: inline-block;
	}
	#content6{
		overflow: hidden;
		width:100px;
		height: 900px;
		display: inline-block;
	}
	#content7{
		overflow: hidden;
		width:500px;
		height: 500px;
		display: inline-block;
		float: right;
	}

#citation1{overflow: hidden;
width:1500px;
height: 100px;
display: inline-block;
}

#citation2{overflow: hidden;
width:1000px;
height: 150px;
display: inline-block;
}

#citation3{
padding: 10px;
overflow: hidden;
width:1400px;
height: 550px;
display: inline-block;
border: none;
font-size:50px;
color: #ff005a;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: line-through;
}

#citation3:hover{
padding: 10px;
overflow: hidden;
width:1400px;
height: 550px;
display: inline-block;
border: none;
font-size:50px;
color: #000000;
line-height: 90% ;
font-style: normal;
font-weight: normal;
font-family: "Writer", Helvetica, sans-serif ;
text-decoration: none;
}


#image{
	overflow: hidden;
	width:400px;
	height: 300px;
	display: inline-block;
}

.img1{
	overflow: hidden;
	width:350px;
	height: 300px;
	display: inline-block;
	opacity: 0;
}

.img1:hover{
	overflow: hidden;
	width:350px;
	height: 300px;
	display: inline-block;
	opacity: 1;
}

.img2{
	overflow: hidden;
	width:400px;
	height: 300px;
	display: inline-block;
	opacity: 0.5;
}
.img2:hover{
	overflow: hidden;
	width:350px;
	height: 300px;
	display: inline-block;
	opacity: 0;
}
.img3{
	overflow: hidden;
	width:500px;
	height: 250px;
	display: inline-block;
	opacity: 0;
}
.img3:hover{
	overflow: hidden;
	width:500px;
	height: 250px;
	display: inline-block;
	opacity: 1;
}
.img4{
	overflow: hidden;
	width:800px;
	height: 250px;
	display: inline-block;
	opacity: 0;
}
.img4:hover{
	overflow: hidden;
	width:700px;
	height: 250px;
	display: inline-block;
	opacity: 1;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


textflicker{ background: none;
	       padding: 1em;
	       font-family: "Writer";
	       color: none;
	       font-size: 1em;
	       line-height: 1;
	       text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
	       letter-spacing: 0.125em;
	       animation-duration: 0.01s;
	       animation-name: textflicker;
	       animation-iteration-count: infinite;
	       animation-direction: alternate;
	}
	h1 { font-size: 7em; }

	@keyframes textflicker {
	  from {
	    text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
	  }
	  to {
	    text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
	  }
	}


	#textflicker1{ background: none;
		       padding: 1em;
		       font-family: "Montserrat";
		       color: blue;
		       font-size: 1em;
		       line-height: 1;
		       text-shadow: 0.06rem 0 0.06rem #a4e5f1, -0.125rem 0 0.06rem #ff0000;
		       letter-spacing: 0.125em;
		       animation-duration: 0.05s;
		       animation-name: textflicker1;
		       animation-iteration-count: infinite;
		       animation-direction: alternate;
		}
	}
	h2 { font-size: 7em; }

	@keyframes textflicker1 {
		from {
			text-shadow: 3px 0 0 #a4e5f1, -3px 0 0 #ff0000;
		}
		to {
			text-shadow: 3px 0.5px 2px #a4e5f1, -1px -0.5px 3px #ff0000;
		}
	}



	.disperselettre{
		padding: 10px;
		overflow: hidden;
		width:800px;
		height: 100px;
		display: inline-block;
		border: none;
		font-size:10px;
		color: black;
		opacity: 100%;
		line-height: 250% ;
		letter-spacing: 1px;
		font-family: "Writer", Helvetica, sans-serif ;
		text-decoration: none;
		transition-duration: 0.1s;
		}

	.disperselettre:hover{
		text-align: bottom;
		padding: 10px;
		overflow: hidden;
		width:800px;
		height: 500px;
		display: inline-block;
		border: none;
		font-size:10px;
		color: black;
		opacity: 100%;
		line-height: 10% ;
		letter-spacing: 30px;
		font-style: bold;
		font-family: "Writer", Helvetica, sans-serif ;
		text-decoration: none;
		transition-duration: 0.1s;
		}

		.disperse2{
		 overflow: hidden;
		 width:820px;
		 height: 25px;
		 display: inline-block;
		 border: ;
		 font-size:10px;
		 color: white;
		 line-height: 250% ;
		 letter-spacing: -7px;
		 font-family: "Writer", Helvetica, sans-serif ;
		 text-decoration: none;
			 transition-duration: 0.1s;
		 }

		 .disperse2:hover{
		 padding: 0px;
		 overflow: hidden;
		 width:820px;
		 height: 25px;
		 display: inline-block;
		 border: none;
		 font-size:10px;
		 color: white;
		 line-height: 100% ;
		 letter-spacing: 30px;
		 font-style: bold;
		 font-family: "Writer", Helvetica, sans-serif ;
		 text-decoration: line-through;
		 transition-duration: 0.1s;
		 }

		 .disperse3{
 		 overflow: hidden;
 		 width:820px;
 		 height: 25px;
 		 display: inline-block;
 		 border: ;
 		 font-size:10px;
 		 color: black;
 		 line-height: 250% ;
 		 letter-spacing: -7px;
 		 font-family: "Writer", Helvetica, sans-serif ;
 		 text-decoration: none;
 			 transition-duration: 0.1s;
 		 }

 		 .disperse3:hover{
 		 padding: 0px;
 		 overflow: hidden;
 		 width:820px;
 		 height: 25px;
 		 display: inline-block;
 		 border: none;
 		 font-size:10px;
 		 color: black;
 		 line-height: 100% ;
 		 letter-spacing: 30px;
 		 font-style: bold;
 		 font-family: "Writer", Helvetica, sans-serif ;
 		 text-decoration: line-through;
 		 transition-duration: 0.1s;
 		 }
		 #crédit2{
	 		background-color: none;
	 		padding: none;
	 		overflow: hidden;
	 		width:850px;
	 		height: 700px;
	 		display: inline-block;
	 		border: none;
	 		font-size:800px;
	 		color: #ff005a;
	 		font-style: normal;
	 		font-weight: bold;
	 		font-family: "Writer", Helvetica, sans-serif ;
	 	}

		#crédit3{
		 background-color: none;
		 padding: none;
		 overflow: hidden;
		 width:850px;
		 height: 700px;
		 display: inline-block;
		 border: none;
		 font-size:800px;
		 color:black;
		 font-style: normal;
		 font-weight: bold;
		 font-family: "Writer", Helvetica, sans-serif ;
	 }




	 	#disperse{
	 	padding: 10px;
	 	overflow: hidden;
	 	width:1300px;
	 	height: 250px;
	 	display: inline-block;
	 	border: none;
	 	font-size:10px;
	 	color: black;
	 	line-height: 10% ;
	 	letter-spacing: 1px;
	 	font-family: "Writer", Helvetica, sans-serif ;
	 	text-decoration: none;
	 	}

	 	#disperse:hover{
	 	padding: 10px;
	 	overflow: hidden;
	 	width:1300px;
	 	height: 250px;
	 	display: inline-block;
	 	border: none;
	 	font-size:10px;
	 	color: black;
	 	line-height: 250% ;
	 	letter-spacing: 30px;
	 	font-style: bold;
	 	font-family: "Writer", Helvetica, sans-serif ;
	 	text-decoration: none;
	 	transition-duration: 1s;
	 	}


	 	#disperse2{
	 	padding: 10px;
	 	overflow: hidden;
	 	width:1300px;
	 	height: 250px;
	 	display: inline-block;
	 	border: none;
	 	font-size:10px;
	 	color: black;
	 	line-height: 250% ;
	 	letter-spacing: 1px;
	 	font-family: "Writer", Helvetica, sans-serif ;
	 	text-decoration: none;
	 	}

	 	#disperse2:hover{
	 	padding: 10px;
	 	overflow: hidden;
	 	width:1300px;
	 	height: 250px;
	 	display: inline-block;
	 	border: none;
	 	font-size:10px;
	 	color: black;
	 	line-height: 10% ;
	 	letter-spacing: 30px;
	 	font-style: bold;
	 	font-family: "Writer", Helvetica, sans-serif ;
	 	text-decoration: none;
	 	transition-duration: 0.1s;
	 	}


	 		#disperse3{
	 		padding: 10px;
	 		overflow: hidden;
	 		width:1300px;
	 		height: 250px;
	 		display: inline-block;
	 		border: none;
	 		font-size:10px;
	 		color: black;
	 		line-height: 20% ;
	 		letter-spacing: 1px;
	 		font-family: "Writer", Helvetica, sans-serif ;
	 		text-decoration: none;
	 		transition-duration: 0.5s;
	 		}

	 		#disperse3:hover{
	 		padding: 10px;
	 		overflow: hidden;
	 		width:1300px;
	 		height: 250px;
	 		display: inline-block;
	 		border: none;
	 		font-size:10px;
	 		color: black;
	 		line-height: 700% ;
	 		letter-spacing: 30px;
	 		font-style: bold;
	 		font-family: "Writer", Helvetica, sans-serif ;
	 		text-decoration: none;
	 		transition-duration: 1s;
	 		}