.sign
{
	text-align: right;
	color: #fff;
	font-size: 10px;
}
#img
{
	width:50%;
	height: 20%;
}
.Terminen
{
	background-color: rgba(255,255,255,0.5);
	width: 70%;
	margin-left: 40px;
	border: 1px solid black;
	box-shadow: 7px 7px 7px;
	font-size: 11px;
}
html{
	text-align: center;
}
#displayer_slider_block{
							width : 500px;
							height : 300px;
							top : 50px;

							}
#displayer_slider_block2
{
	width : 500px;
							height : 300px;
							top : 50px;
							margin-left: 40px;
}
#listes
{
	margin-top: -40px;
}
body
{
	-webkit-font-smoothing: antialiased;
	background-image: url('IMG_2382.JPG');
	background-size: 150%;
	background-repeat: no-repeat;
	background-attachment: fixed;

}
nav{
	text-align: center;
}
ul
{
/* On supprime les puces, on précise une largeur
et on centre la liste par rapport à la page. */
list-style: none;
width: 60%;
margin: auto;
}
.main
{
	background-color: rgb(55,55,255);
	color: #fff;
}
li
{
/* On fixe les dimensions
des éléments de notre liste. */
width: 150px;
height: 150px;
/* On met en forme le texte. */
text-align: center;
font-weight: bold;
/* On modifie l'affichage pour que
les éléments soient sur la même ligne. */
display: inline-block;
/* On ajoute une petite bordure
et on définit les marges. */
margin: 10px;
padding: 0px;
/* Quitte à faire du CSS3, autant
avoir des coins arrondis :p. */
border-radius: 10px;
/* On centre l'arrière-plan. */
background-position: center;
/* On modifie la position pour pouvoir ensuite
placer comme on le souhaite la description des liens. */
position: relative;
/* On n'affiche pas ce qui dépasse de nos éléments ! */
overflow: hidden;
}
#blockquot
{
	margin-top: 0px;
}
/* On indique les images à afficher
en arrière-plan pour chaque élément. */
li a
{
/* Pour fixer les dimensions d'un lien,
il est nécessaire de l'afficher en tant
qu'élément de type block. */
text-decoration: none;
}
a
{
	color: #fff;
	transition-duration: 1s;
}
a:hover
{
	color: blue;
}
em a
{
	display: block;
	font-size: 20px;
	margin-left: 50px;
	margin-top: 20px;
	margin-bottom: 20px;
}
li span
{
display: block;
height: 50px;
width: 100%;
color: #fff;
margin: 0px;
margin-right: -10px;
/* La taille des lignes est égale à
la hauteur de l'élément. Cela permet
de centrer verticalement le texte. */
line-height: 50px;
/* Abusons du CSS3 en affichant
un arrière-plan semi-transparent ! */
background-color: rgba(0,0,0,0.5);
/* shadow */
border: 2px solid;
/*Mettons les coins inférieurs arrondis
pour que ce soit plus propre
(merci à wibix pour la remarque)*/
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* Position absolue pour afficher
la description avec précision. */
position: absolute;
/* L'ordonnée de l'élément est égale
à la hauteur de son parent (150px) :
la description sera donc située sous
son parent. */
left: 0px;
top: 150px;
}
li span
{
text-align: center;
display: block;
height: 200px;
width: 100%;
color: #fff;
margin: 0px;
margin-right: -10px;
/* La taille des lignes est égale à
la hauteur de l'élément. Cela permet
de centrer verticalement le texte. */
line-height: 50px;
/* Abusons du CSS3 en affichant
un arrière-plan semi-transparent. */
background-color: rgba(0,0,0,0.3);
/* Position absolue pour afficher
la description avec précision. */
position: absolute;
/* L'ordonnée de l'élément est égale
à la hauteur de son parent (150px) :
la description sera donc située sous
son parent. */
left: 0px;
top: 100px;
/* N'oublions pas les transitions ! */
transition-property: top;
transition-duration: 0.5s;
}
/* On modifie l'ordonnée des descriptions contenues
dans un élément d'une liste survolée par la souris. */
li:hover span
{
 top: 0px;
 height: 100%;
}
#one, #two
{
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: Monotype Corsiva;
	padding-bottom: 20px;
}
#one
{
	text-align: left;
}
#two
{
	float: right;
	padding-right: 30px;
}
.main1
{
	font-family: fantasy;
	text-align: center;
	text-decoration: blink;
	height: 2000px;
	height: 150px;
	margin-top: -25px;
	padding-top: 100px;
}
#zero
{
	float: left;
	padding-top: 10px;
	padding-left: 10px;
	margin-right: -20px;
}
.tete
{
	margin-left: -20px;
	font-family: Lucida Handwriting;
	font-size: 50px;
	color: #fff;
}
#slider_conteneur
{
	width: 350px;
}
#un, #deux, #trois, #quatre
{
	display: inline-block;
	background-color: rgb(88,88,88);
	background-attachment: fixed;
	margin-top: 65px;
}
#deux, #trois, #quatre
{
	padding-right: 60px;
    border-right: 1px solid black;
    padding-left: 60px;
}
#un
{
	padding-right: 70px;
    border-right: 1px solid black;
    padding-left: 70px;
	border-left: 1px solid black
}
a
{
	text-decoration: none;
	color: rgb(202,228,255);
}
a:hover 
{
	color: red;
}
a:focus
{
	color: red;
}
footer
{
	background-color: rgb(35,35,35);
	border-radius: 20px 20px 0px 0px;
	color: #fff;
	font-family: arial;
	height: 200px;
}
#foot
{
	margin-left: -50px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 20px;
}
.asidefoot1,.asidefoot2,.asidefoot3,.asidefoot4,.asidefoot5,.asidefoot6
{
	display: inline-block;
	vertical-align: top;
}
.asidefoot5,.asidefoot6
{
	vertical-align: bottom;
}
.asidefoot4
{
	/* On fixe les dimensions
des éléments de notre liste. */
width: 150px;
height: 100px;
/* On met en forme le texte. */
text-align: center;
font-weight: bold;
/* On ajoute une petite bordure
et on définit les marges. */
border: 1px solid #000;
border-color: #fff;
margin: 10px;
padding: 0px;
/* Quitte à faire du CSS3, autant
avoir des coins arrondis :p. */
border-radius: 10px;
/* On centre l'arrière-plan. */
background-position: center;
/* On modifie la position pour pouvoir ensuite
placer comme on le souhaite la description des liens. */
position: relative;
/* On n'affiche pas ce qui dépasse de nos éléments ! */
overflow: hidden;
background-image: url('13OBSSNAKE.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.asidefoot3 .Animals1,.asidefoot4 .Animals2
{
display: block;
height: 50px;
width: 100%;
color: rgb(255,255,102);
margin: 0px;
/* La taille des lignes est égale à
la hauteur de l'élément. Cela permet
de centrer verticalement le texte. */
line-height: 20px;
/* Abusons du CSS3 en affichant
un arrière-plan semi-transparent. */
background-color: rgba(0,0,0,0.7);
/* Position absolue pour afficher
la description avec précision. */
position: absolute;
/* L'ordonnée de l'élément est égale
à la hauteur de son parent (150px) :
la description sera donc située sous
son parent. */
left: 0px;
top: 0px;
/* N'oublions pas les transitions ! */
transition-property: top;
transition-duration: 1s;
}
.asidefoot4:hover .Animals2
{
top: 50px;
}
.asidefoot5
{
	margin: 10px;
	margin-bottom: 30px;
}
.asidefoot6
{
	margin-left: -40px;
	margin-bottom: 20px;
	text-align: right;
	float: bottom-right;
}
.aside111
{
	border: solid 2px #fff;
	border-radius: 10px 10px 10px 10px;
	width: 300px;
	word-wrap: break-word;
	margin: 10px;
	background-color: rgba(255,255,255,0.5);
	font-family: arial;
	box-shadow: 10px 10px 10px;
	height: 800px;
	overflow: scroll;
}
.aside112
{
	border: solid 2px #fff;
	border-radius: 10px 10px 10px 10px;
	width: 300px;
	word-wrap: break-word;
	margin: 10px;
	background-color: rgba(0,0,0,0.5);
	font-family: Lucida Handwriting,Monotype Corsiva,Brush Script MT, sans-serif;
	box-shadow: 10px 10px 10px;
	margin-top: 20px;
}
.form
{
	margin: 7px;
	text-align: center;
	color: #fff;
}
blockquote #diapo
{
    max-height : 248px;
    height : 240px;
    overflow : hidden;
    position :  relative;
    display : flex;
    flex-direction : horizontal;
}
blockquote #diapo div
{
    display : flex;
    flex-direction : horizontal;
    min-width : 1000px;
    vertical-align : top;
}
blockquote #diapo div img
{
    display : block;
    width : 30%;
}
 
 
@media all and (min-width : 1024px)
{
     
    @media all and (max-width : 600px)
    {
        blockquote
        {
            text-align : center;
        }
        blockquote #diapo
        {
            display : none;
        }
    }
}
.aside1, .aside2, .aside3
{
	display: inline-block;
	vertical-align: top;
}
.aside2, .aside3
{
	box-shadow: 10px 10px 10px;
}
.aside2
{
	border: solid 2px #fff;
	border-radius: 10px 10px 10px 10px;
	width: 400px;
	word-wrap: break-word;
	margin: 10px;
	background-color: rgba(0,128,0,0.5);
	background-size: 100%;
	background-repeat: no-repeat;
	font-family: arial, sans-serif;
	opacity: 1;
}
.aside3
{
	border: solid 2px #fff;
	border-radius: 10px 10px 10px 10px;
	width: 400px;
	word-wrap: break-word;
	margin: 10px;
	background-color: rgba(255,255,255,0.5);
	background-size: 100%;
	background-repeat: no-repeat;
	font-family: arial, sans-serif;
	opacity: 1;
	line-height: 25px;
	font-size: 12px;
	height: 800px;
	overflow: scroll;
}
.aside21 
{
	margin: 15px;
	color: #fff;
}
.aside31
{
	margin: 15px;
	color: #000;	
}
.aside31,.aside32,.aside33,.aside34,.aside35
{
	display: block;
}
h3
{
	color: red;
}
#slider_conteneur
	{
		width: 300px;
	}
#Terminen
	{
		margin-left: 50px;
	}
@media all and (max-width: 1300px)
{
	#Terminen
	{
		margin-left: 50px;
	}
	#slider_conteneur
	{
		width: 300px;
	}
	#img
{
	width:50%;
	height: 20%;
}
body
{
	background-image: url('IMG_2382.jpg');
	background-size: 150%;
}
nav{
	text-align: center;
}
ul
{
/* On supprime les puces, on précise une largeur
et on centre la liste par rapport à la page. */
list-style: none;
width: 60%;
margin: auto;
}
.main
{
	background-color: rgb(55,55,255);
	color: #fff;
}
li
{
/* On fixe les dimensions
des éléments de notre liste. */
width: 150px;
height: 150px;
/* On met en forme le texte. */
text-align: center;
font-weight: bold;
/* On modifie l'affichage pour que
les éléments soient sur la même ligne. */
display: inline-block;
/* On ajoute une petite bordure
et on définit les marges. */
margin: 10px;
padding: 0px;
/* Quitte à faire du CSS3, autant
avoir des coins arrondis :p. */
border-radius: 10px;
/* On centre l'arrière-plan. */
background-position: center;
/* On modifie la position pour pouvoir ensuite
placer comme on le souhaite la description des liens. */
position: relative;
/* On n'affiche pas ce qui dépasse de nos éléments ! */
overflow: hidden;
}
#blockquot
{
	margin-top: 0px;
}
/* On indique les images à afficher
en arrière-plan pour chaque élément. */
li a
{
/* Pour fixer les dimensions d'un lien,
il est nécessaire de l'afficher en tant
qu'élément de type block. */
text-decoration: none;
}
a
{
	color: #fff;
	transition-duration: 1s;
}
a:hover
{
	color: blue;
}
em a
{
	display: block;
	font-size: 20px;
	margin-left: 50px;
	margin-top: 20px;
	margin-bottom: 20px;
}
li span
{
display: block;
height: 50px;
width: 100%;
color: #fff;
margin: 0px;
/* La taille des lignes est égale à
la hauteur de l'élément. Cela permet
de centrer verticalement le texte. */
line-height: 50px;
/* Abusons du CSS3 en affichant
un arrière-plan semi-transparent ! */
background-color: rgba(0,0,0,0.5);
/* shadow */
border: 2px solid;
/*Mettons les coins inférieurs arrondis
pour que ce soit plus propre
(merci à wibix pour la remarque)*/
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* Position absolue pour afficher
la description avec précision. */
position: absolute;
/* L'ordonnée de l'élément est égale
à la hauteur de son parent (150px) :
la description sera donc située sous
son parent. */
left: 0px;
top: 150px;
}
li span
{
text-align: center;
display: block;
height: 200px;
width: 100%;
color: #fff;
margin: 0px;
/* La taille des lignes est égale à
la hauteur de l'élément. Cela permet
de centrer verticalement le texte. */
line-height: 50px;
/* Abusons du CSS3 en affichant
un arrière-plan semi-transparent. */
background-color: rgba(0,0,0,0.3);
/* Position absolue pour afficher
la description avec précision. */
position: absolute;
/* L'ordonnée de l'élément est égale
à la hauteur de son parent (150px) :
la description sera donc située sous
son parent. */
left: 0px;
top: 100px;
/* N'oublions pas les transitions ! */
transition-property: top;
transition-duration: 0.5s;
}
/* On modifie l'ordonnée des descriptions contenues
dans un élément d'une liste survolée par la souris. */
li:hover span
{
 top: 0px;
 height: 100%;
}
#one, #two
{
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: Monotype Corsiva;
	padding-bottom: 20px;
}
#one
{
	text-align: left;
}
#two
{
	float: right;
	padding-right: 30px;
}
.main1
{
	font-family: fantasy;
	text-align: center;
	text-decoration: blink;
	height: 2000px;
	height: 150px;
	margin-top: -25px;
	padding-top: 100px;
}
#zero
{
	float: left;
	padding-top: 10px;
	padding-left: 10px;
	margin-right: -20px;
}
.tete
{
	margin-left: -20px;
	font-family: Lucida Handwriting;
	font-size: 50px;
	color: #fff;
}
#un, #deux, #trois, #quatre
{
	display: inline-block;
	background-color: rgb(88,88,88);
	background-attachment: fixed;
	margin-top: 65px;
}
#deux, #trois, #quatre
{
	padding-right: 60px;
    border-right: 1px solid black;
    padding-left: 60px;
}
#un
{
	padding-right: 70px;
    border-right: 1px solid black;
    padding-left: 70px;
	border-left: 1px solid black
}
a
{
	text-decoration: none;
	color: rgb(202,228,255);
}
a:hover 
{
	color: red;
}
a:focus
{
	color: red;
}
footer
{
	background-color: rgb(35,35,3);
	color: #fff;
	font-family: arial;
	height: 270px;
	margin-top: 50px;
}
#foot
{
	margin-left: -50px;
	margin-top: 0px;
	text-align: center;
	padding-top: 20px;
}
.asidefoot1,.asidefoot2,.asidefoot3,.asidefoot4,.asidefoot5
{
	display: inline-block;
	vertical-align: top;
}
.asidefoot5,.asidefoot6
{
	vertical-align: bottom;
}

.asidefoot4
{
	/* On fixe les dimensions
des éléments de notre liste. */
width: 150px;
height: 100px;
/* On met en forme le texte. */
text-align: center;
font-weight: bold;
/* On ajoute une petite bordure
et on définit les marges. */
border: 1px solid #000;
border-color: #fff;
margin: 10px;
padding: 0px;
/* Quitte à faire du CSS3, autant
avoir des coins arrondis :p. */
border-radius: 10px;
/* On centre l'arrière-plan. */
background-position: center;
/* On modifie la position pour pouvoir ensuite
placer comme on le souhaite la description des liens. */
position: relative;
/* On n'affiche pas ce qui dépasse de nos éléments ! */
overflow: hidden;
background-image: url('13OBSSNAKE.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.asidefoot3 .Animals1,.asidefoot4 .Animals2
{
display: block;
height: 50px;
width: 100%;
color: rgb(255,255,102);
margin: 0px;
/* La taille des lignes est égale à
la hauteur de l'élément. Cela permet
de centrer verticalement le texte. */
line-height: 20px;
/* Abusons du CSS3 en affichant
un arrière-plan semi-transparent. */
background-color: rgba(0,0,0,0.7);
/* Position absolue pour afficher
la description avec précision. */
position: absolute;
/* L'ordonnée de l'élément est égale
à la hauteur de son parent (150px) :
la description sera donc située sous
son parent. */
left: 0px;
top: 0px;
/* N'oublions pas les transitions ! */
transition-property: top;
transition-duration: 1s;
}
.asidefoot4:hover .Animals2
{
top: 50px;
}
.asidefoot5
{
	margin: 10px;
	margin-bottom: 30px;
}
.asidefoot6
{
	margin-left: -40px;
	margin-bottom: 20px;
	text-align: right;
	float: bottom-right;
}
.aside111
{
	border: solid 2px #fff;
	border-radius: 10px 10px 10px 10px;
	width: 300px;
	word-wrap: break-word;
	margin: 10px;
	background-color: rgba(255,255,255,0.5);
	font-family: arial;
	box-shadow: 10px 10px 10px;
}
.aside1111
{
	margin-left: 10px;
	margin-right: 10px;
}
.aside112
{
	border: solid 2px #fff;
	border-radius: 10px 10px 10px 10px;
	width: 300px;
	word-wrap: break-word;
	margin: 10px;
	background-color: rgba(0,0,0,0.5);
	font-family: Lucida Handwriting,Monotype Corsiva,Brush Script MT, sans-serif;
	box-shadow: 10px 10px 10px;
	margin-top: 20px;
}
.form
{
	margin: 7px;
	text-align: center;
	color: #fff;
}
blockquote #diapo
{
    max-height : 248px;
    height : 240px;
    overflow : hidden;
    position :  relative;
    display : flex;
    flex-direction : horizontal;
}
blockquote #diapo div
{
    display : flex;
    flex-direction : horizontal;
    min-width : 1000px;
    vertical-align : top;
}
blockquote #diapo div img
{
    display : block;
    width : 30%;
}
 
 
@media all and (max-width : 1024px)
{
     
    @media all and (max-width : 600px)
    {
        blockquote
        {
            text-align : center;
        }
        blockquote #diapo
        {
            display : none;
        }
    }
}
.aside1, .aside2, .aside3
{
	display: inline-block;
	vertical-align: top;
}
.aside2, .aside3
{
	box-shadow: 10px 10px 10px;
}
.aside1
{
	margin: 0px;
	margin-left: -20px;
}
.aside2
{
	border: solid 2px #fff;
	border-radius: 10px 10px 10px 10px;
	width: 400px;
	word-wrap: break-word;
	margin: 10px;
	background-color: rgba(0,128,0,0.3);
	background-size: 100%;
	background-repeat: no-repeat;
	font-family: arial, sans-serif;
	opacity: 1;
}
.aside3
{
	border: solid 2px #fff;
	border-radius: 10px 10px 10px 10px;
	width: 400px;
	word-wrap: break-word;
	margin: 10px;
	background-color: rgba(255,255,255,0.5);
	background-size: 100%;
	background-repeat: no-repeat;
	font-family: arial, sans-serif;
	opacity: 1;
	line-height: 25px;
}
.aside21 
{
	margin: 15px;
	color: #fff;
}
.aside31
{
	margin: 15px;
	color: #000;	
}
.aside31,.aside32,.aside33,.aside34,.aside35
{
	display: block;
}
h3
{
	color: red;
}
}
@media all and (max-width: 2560px)
{
	#menuDeroulant
	{
		width: 644px;
		margin-left: 900px;
	}
	.aside111
	{
		width: 500px;
	}
	.aside2
	{
		width: 700px;
	}
	.aside3
	{
		width: 600px;
	}
	#slider_conteneur
	{
		width: 600px;
	}
}
@media all and (max-width: 1440px)
{
	#menuDeroulant
	{
		width: 644px;
		margin-left: 400px;
	}
	.aside111
	{
		width: 250px;
	}
	.aside2
	{
		width: 500px;
	}
	.aside3
	{
		width: 250px;
	}
	#slider_conteneur
	{
		width: 400px;
	}
	body
{
	background-image: url('IMG_2382.jpg');
	background-size: 220%;
}
}
@media all and (max-width: 1024px)
{
	#menuDeroulant
	{
		width: 644px;
		margin-left: 200px;
	}
	.aside111
	{
		width: 250px;
		margin-left: -30px;
		font-size: 11px;
	}
	.aside2
	{
		width: 400px;
		margin-right: -5px;
		margin-left: -5px;
	}
	.aside3
	{
		width: 250px;
		margin-right: -5px;
		font-size: 11px;
	}
	#slider_conteneur
	{
		width: 300px;
	}
	body
{
	background-image: url('IMG_2382.jpg');
	background-size: 300%;
}
footer
{
	height: 300px;
}
}
@media all and (max-width: 898px)
{
	#menuDeroulant
	{
		width: 644px;
		margin-left: 100px;
	}
	.aside111
	{
		width: 200px;
		margin-left: -30px;
		font-size: 11px;
		height: 1200px;
		overflow: scroll;
	}
	.aside2
	{
		width: 300px;
		margin-right: -5px;
		margin-left: -5px;
	}
	.aside3
	{
		width: 200px;
		margin-right: -5px;
		font-size: 11px;
		height: 1200px;
		overflow: scroll;
	}
	#slider_conteneur
	{
		width: 200px;
	}
	body
{
	background-image: url('IMG_2382.jpg');
	background-size: 350%;
}
footer
{
	height: 500px;
}
#Terminen
{
	margin-left:20px;
}
}
@media all and (max-width: 768px)
{
	#menuDeroulant
	{
		width: 644px;
		margin-left: 10px;
		margin-right: -100px;
	}
	.aside111
	{
		width: 300px;
		margin-left: -30px;
		font-size: 11px;
		height: 1200px;
		overflow: scroll;
	}
	.aside2
	{
		width: 300px;
		margin-right: -5px;
		margin-left: -5px;
	}
	.aside3
	{
		width: 600px;
		margin-right: -10px;
		font-size: 11px;
		height: 800px;
		overflow: scroll;
	}
	#slider_conteneur
	{
		width: 200px;
	}
	.aside1,.aside2
	{
		display: inline-block;
	}
	body
{
	background-image: url('IMG_2382.jpg');
	background-size: 400%;
}
footer
{
	height: 500px;
	margin-right: 20px;
}
#Terminen
{
	margin-left:60px;
}
}
@media all and (max-width: 425px)
{
	#menuDeroulant
	{
		margin-left: 10px;
		margin-right: -100px;
		width: 200px;
	}
	.aside111
	{
		width: 500px;
		margin-left: 10px;
		font-size: 11px;
		height: 1200px;
		overflow: scroll;
	}
	.aside2
	{
		width: 500px;
		margin-right: -5px;
		margin-left: -5px;
	}
	.aside3
	{
		width: 500px;
		margin-right: -10px;
		font-size: 11px;
		height: 800px;
		overflow: scroll;
	}
	#slider_conteneur
	{
		width: 200px;
	}
	body
{
	background-image: url('IMG_2382.jpg');
	background-size: 800%;
}
footer
{
	height: 600px;
	margin-right: -100px;
}
#Terminen
{
	margin-left:60px;
}
}