/*---------------------------------------------------------------------MISE EN PAGE ELEMENTS---------------------------------------------------------------------*/

body{
	margin: 0px;
	margin-top: 12px;
	margin-bottom: 60px;
	background: linear-gradient(#6572F2, 35%, #4A9134);
}


.div-images{
	display: flex; 
	margin-top: 20px; 
	margin-left: 50px;
}


.imagesGauche{
	width: 26%;
	height: 25%;
	margin-right: 50px;
	transition-duration: 0.5s;
}


.imagesGauche:hover{
-ms-transform: scale(4); /* IE 9 */
-webkit-transform: scale(4); /* Safari 3-8 */
transform: scale(4) translate(50px);;
}


.imagesDroit{
	width: 26%;
	height: 25%;
	margin-right: 50px;
	transition-duration: 0.5s;
}


.imagesDroit:hover{
-ms-transform: scale(4); /* IE 9 */
-webkit-transform: scale(4); /* Safari 3-8 */
transform: scale(4) translate(-50px);;
}


.outils{
	font-weight: bold;
	font-style: italic;
	color: red;
}


/*---------------------------------------------------------------------BOUTONS PROJETS---------------------------------------------------------------------*/

#etage1{
	display: flex;
	justify-content: center;
	margin-top: 90px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#etage2{
	display: flex;
	justify-content: center;
	margin-top: 90px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#etage3{
	display: flex;
	justify-content: center;
	margin-top: 90px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#boutons .bouton{
	border: solid 3px black;
	border-radius: 25px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 50px;
	margin-right: 50px;
	text-decoration: none;
	font-size: 26px;
	color: white;
	transition-duration: 0.2s;
	background-color: black;
}


#boutons .bouton:hover{
	opacity: 0.8;
	transition-duration: 0.2s;
	color: yellow;
	background-color: grey;
}


/*---------------------------------------------------------------------SEPARATION---------------------------------------------------------------------*/

#projet-web{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-web h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-python{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-python h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-r{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-r h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-vba{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-vba h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-dataviz{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-dataviz h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-rapports{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-rapports h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-video{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-video h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-talend{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-talend h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-sas{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-sas h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


#projet-divers{
	margin-bottom: 200px;
	margin-bottom: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#projet-divers h1{
	text-align: left;
	margin-top: 150px;
	font-size: 48px;
	margin-left: 5px;
	color: orange;
}


.separation{
	background-color: white;
	margin-bottom: 25px;
	height: 2px;
	width: 100%;
}


/*---------------------------------------------------------------------MISE EN FORME TITRE ET TEXTE---------------------------------------------------------------------*/

main h1{
	text-align: right;
	font-weight: bold;
	color: red;
	font-size: 36px;
}


main .h1-gauche{
	text-align: left;
	font-weight: bold;
	color: red;
	font-size: 36px;
}


main h2{
	text-align: center;
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	text-decoration: underline;
	color: black;
}


main h3{
	text-align: center;
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	text-decoration: underline;
	color: black;
}


main h4{
	text-align: left;
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	text-decoration: underline;
	color: yellow;
}


main p{
	text-align: center;
	margin-left: 20px;
	font-size: 20px;
	color: white;
}


main .competences{
	text-align: left;
	margin-left: 20px;
	font-size: 20px;
	color: white;
}


/*---------------------------------------------------------------------PROJETS WEB---------------------------------------------------------------------*/

/*MCSOFT*/
#mcsoft{
	float: right;
	width: 45%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#mcsoft .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#mcsoft .mcsoft{
	width: 125px;
	height: 125px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#mcsoft .mcsoft:hover{
	opacity: 0.5;
}


/*COLOR PUN*/
#colorpun{
	width: 45%;
	margin-top: 700px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#colorpun .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#colorpun .colorpun{
	width: 175px;
	height: 75px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 10px;
}


#colorpun .colorpun:hover{
	opacity: 0.5;
}


/*SHARE AND POST*/
#shareandpost{
	float: right;
	width: 45%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#shareandpost .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#shareandpost .shareandpost{
	width: 75px;
	height: 75px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#shareandpost .shareandpost:hover{
	opacity: 0.5;
}


/*SHARESHOPPING*/
#shareshopping{
	width: 45%;
	margin-top: 600px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#shareshopping .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#shareshopping .shareshopping{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#shareshopping .shareshopping:hover{
	opacity: 0.5;
}


/*LULUBULL.NET*/
#lulubull{
	float: right;
	width: 45%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#lulubull .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#lulubull .lulubull{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#lulubull .lulubull:hover{
	opacity: 0.5;
}


/*ECWEESCO*/
#ecweesco{
	width: 45%;
	margin-top: 600px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#ecweesco .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#ecweesco .ecweesco{
	width: 75px;
	height: 75px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#ecweesco .ecweesco:hover{
	opacity: 0.5;
}


/*---------------------------------------------------------------------PROJETS PYTHON---------------------------------------------------------------------*/

/*MONGO DB*/
#mongoDb{
	float: right;
	width: 60%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#mongoDb .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#mongoDb .mongoDb{
	width: 200px;
	height: 80px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#mongoDb .mongoDb:hover{
	opacity: 0.5;
}


/*API REST*/
#apiRest{
	margin-top: 850px;
	width: 60%;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#apiRest .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#apiRest .apiRest{
	width: 150px;
	height: 75px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 5px;
}


#apiRest .apiRest:hover{
	opacity: 0.5;
}


/*WEB SCRAPING*/
#webScraping{
	float: right;
	width: 60%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#webScraping .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#webScraping .webScraping{
	width: 90px;
	height: 80px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#webScraping .webScraping:hover{
	opacity: 0.5;
}


/*POTAGER*/
#potager{
	width: 60%;
	margin-top: 750px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#potager .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#potager .potager{
	width: 200px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 5px;
}


#potager .potager:hover{
	opacity: 0.5;
}


/*SAE BDR*/
#saeBdr{
	float: right;
	width: 60%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#saeBdr .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#saeBdr .saeBdr{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#saeBdr .saeBdr:hover{
	opacity: 0.5;
}


/*JSONTOCSV*/
#jsonToCsv{
	width: 45%;
	margin-top: 900px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#jsonToCsv .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#jsonToCsv .jsonToCsv{
	width: 200px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 5px;
}


#jsonToCsv .jsonToCsv:hover{
	opacity: 0.5;
}


/*---------------------------------------------------------------------PROJETS R---------------------------------------------------------------------*/

/*ESTIMATION BELGIQUE*/
#belgique{
	float: right;
	width: 45%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#belgique .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#belgique .belgique{
	width: 150px;
	height: 80px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#belgique .belgique:hover{
	opacity: 0.5;
}


/*PREDICTION DENG (REGRESSION)*/
#regression{
	width: 45%;
	margin-top: 600px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#regression .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#regression .regression{
	width: 100px;
	height: 80px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#regression .regression:hover{
	opacity: 0.5;
}


/*---------------------------------------------------------------------PROJETS VBA---------------------------------------------------------------------*/

/*TERRASTID*/
#terrastid{
	width: 40%;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#terrastid .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#terrastid .terrastid{
	width: 150px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#terrastid .terrastid:hover{
	opacity: 0.5;
}

/*CALCULOSTID*/
#calculostid{
	float: right;
	width: 45%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#calculostid .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#calculostid .calculostid{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#calculostid .calculostid:hover{
	opacity: 0.5;
}


/*MINESTID*/
#minestid{
	width: 45%;
	margin-top: 700px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#minestid .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#minestid .minestid{
	width: 200px;
	height: 50px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#minestid .minestid:hover{
	opacity: 0.5;
}


/*---------------------------------------------------------------------PROJETS DATAVIZ---------------------------------------------------------------------*/

/*DENTISTE*/
#dentiste{
	float: right;
	width: 45%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#dentiste .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#dentiste .dentiste{
	width: 80px;
	height: 80px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#dentiste .dentiste:hover{
	opacity: 0.5;
}


/*QLIKSENSE*/
#qliksense{
	margin-top: 750px;
	width: 45%;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#qliksense .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#qliksense .qliksense{
	width: 250px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 30px;
}


#qliksense .qliksense:hover{
	opacity: 0.5;
}


/*DATAVIZ 2022*/
#dataviz-2022{
	float: right;
	width: 45%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#dataviz-2022 .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#dataviz-2022 .dataviz-2022{
	width: 150px;
	height: 80px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#dataviz-2022 .dataviz-2022:hover{
	opacity: 0.5;
}


/*DATAVIZ 2021*/
#dataviz{
	margin-top: 750px;
	width: 45%;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#dataviz .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#dataviz .dataviz{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 30px;
}


#dataviz .dataviz:hover{
	opacity: 0.5;
}


/*---------------------------------------------------------------------RAPPORTS D'ETUDES---------------------------------------------------------------------*/

/*DONNEES TEMPORELLES*/
#donneesTemporelles{
	width: 60%;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#donneesTemporelles .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#donneesTemporelles .donneesTemporelles{
	width: 100px;
	height: 75px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#donneesTemporelles .donneesTemporelles:hover{
	opacity: 0.5;
}


/*RGPD*/
#rgpd{
	float: right;
	width: 60%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#rgpd .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#rgpd .rgpd{
	width: 80px;
	height: 80px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#rgpd .rgpd:hover{
	opacity: 0.5;
}


/*POUJOULAT*/
#indicateurs-perf{
	width: 60%;
	margin-top: 700px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#indicateurs-perf .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#indicateurs-perf .indicateurs-perf{
	width: 150px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#indicateurs-perf .indicateurs-perf:hover{
	opacity: 0.5;
}


/*PROTECTION SOCIALE USA*/
#psUSA{
	float: right;
	width: 60%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#psUSA .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#psUSA .psUSA{
	width: 150px;
	height: 80px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#psUSA .psUSA:hover{
	opacity: 0.5;
}


/*ENQUETE ALIMENTAIRE*/
#enqueteAlimentaire{
	width: 60%;
	margin-top: 600px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#enqueteAlimentaire .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#enqueteAlimentaire .enqueteAlimentaire{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#enqueteAlimentaire .enqueteAlimentaire:hover{
	opacity: 0.5;
}


/*ETUDE PARIS*/
#etudeParis{
	float: right;
	width: 60%;
	margin-top: 75px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#etudeParis .separation{
	float: right;
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#etudeParis .etudeParis{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#etudeParis .etudeParis:hover{
	opacity: 0.5;
}

/*ENQUETE TELEPHONE*/
#enqueteTelephone{
	width: 45%;
	margin-top: 600px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#enqueteTelephone .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#enqueteTelephone .enqueteTelephone{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 30px;
}


#enqueteTelephone .enqueteTelephone:hover{
	opacity: 0.5;
}


/*---------------------------------------------------------------------PROJETS VIDEO---------------------------------------------------------------------*/

/*C'EST PAS SOURCE*/
#ppp{
	width: 45%;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#ppp .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#ppp .ppp{
	width: 100px;
	height: 100px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 20px;
}


#ppp .ppp:hover{
	opacity: 0.5;
}


#ppp .video{
	margin-top: 40px;
	margin-left: 50px;
}


/*---------------------------------------------------------------------PROJETS TALEND---------------------------------------------------------------------*/

/*DATAWAREHOUSE*/
#datawarehouse{
	width: 45%;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#datawarehouse .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#datawarehouse .datawarehouse{
	width: 75px;
	height: 75px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 10px;
}


#datawarehouse .datawarehouse:hover{
	opacity: 0.5;
}


/*---------------------------------------------------------------------PROJETS SAS---------------------------------------------------------------------*/

/*ANALYSE MULTIVARIEE*/
#analyseMultivariee{
	width: 45%;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#analyseMultivariee .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#analyseMultivariee .analyseMultivariee{
	width: 75px;
	height: 75px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
	border-radius: 10px;
}


#analyseMultivariee .analyseMultivariee:hover{
	opacity: 0.5;
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------PROJETS DIVERS---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*MAP GARRY'S MOD*/
#gmod{
	width: 60%;
	margin-bottom: 200px;
	animation: fadeIn ease 0.5s;
	-webkit-animation: fadeIn ease 0.5s;
	-moz-animation: fadeIn ease 0.5s;
	-o-animation: fadeIn ease 0.5s;
	-ms-animation: fadeIn ease 0.5s;
}


#gmod .separation{
	background-color: white;
	margin-bottom: 25px;
	height: 5px;
	width: 100%;
}


#gmod .gmod{
	width: 75px;
	height: 75px;
	margin-left: 15px;
	margin-right: 15px;
	transition-duration: 0.2s;
}


#gmod .gmod:hover{
	opacity: 0.5;
}