body {
	margin: 0;
	padding: 0;
	font-family: lato, calibri, "Josefin Sans", sans-serif;
	font-size: 16px;
	line-height: 150%;
	color: rgb(33,33,33);  /*  #28527a; */
	background-color: #fff;
}

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

li { list-style: none; }



/*****************************************************/
/*                    CONTAINERS                     */
/*****************************************************/

.siteContainer, .sitePusher { height: 100%; }

.siteContainer { overflow: hidden; }

.sitePusher { transition-duration: 300ms; transform: translateX(0); }

.withSidebar .sitePusher { transform: translateX(252px); }

.withSidebar .siteCache {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.75);
}


/*****************************************************/
/*                        ENTETE                     */
/*****************************************************/

header {
	position: static;
	top: 0;
	left: 0;
	right: 0;
	height : 60px;
	background-color: #000;
	color: #fff;
	z-index: 1000;
}
	.headerServices { 
		background-color: #fff; 
		color: #000; 
		box-shadow: 0 0 15px -1px rgba(33,33,33,0.7);
	}

.headerIcon {
	position: relative;
	float: right;
	display: block;
	width: 35px;
	height: 30px;
	padding: 15px 0 15px 15px;
	cursor: pointer;
}
	.headerIcon::after {
		position: absolute;
		display: block;
		content: '';
		width: 22px;
		height: 0;
		box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
	}
		.headerIconServices::after {
			box-shadow: 0 10px 0 1px #212121, 0 16px 0 1px #212121, 0 22px 0 1px #212121;
		}

.logo {
	float: left;
	width: 150px;
	margin: 5px 30px;
}

.menu {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 250px;
	transform: translateX(-252px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: #70908f;   
	border-right: 2px solid #70908f;
}
	.menu ul { margin-top: 32vh; padding: 0; }
	.menu a {
		display: block;
		height: 40px;
		padding: 0 10px;
		line-height: 40px;
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.8;
		color: rgba(6,29,29,0.95);        
	}
	.menu .pageOn { color: #e0eded; } 

.headerStyle { 
	position: relative;
	bottom: 5px;
	width: 70px;
	height: 7px;
	background-color: #287a79;
	margin-left: 10px;
	transform: rotateZ(173deg); 
	z-index: 1000; 
}

.titre {
	width: 100px;
	font-family: "Poiret One";
	color: #fff;
}
	.titreServices { color: #000; font-weight: bold; }


/*****************************************************/
/*                    ANIMATIONS                    */
/*****************************************************/
@keyframes tournerOne { 
	0% { transform: rotateZ(0); transform-origin: 50%, 50%; } 
	33% { transform: rotateZ(60deg); transform-origin: 50%, 50%; }
	66% { transform: rotateZ(-132deg); transform-origin: 50%, 50%; }
	100% { transform: rotateZ(72deg); transform-origin: 50%, 50%; }
}
@keyframes tournerTwo { 
	0% { transform: rotateZ(0); transform-origin: 50%, 50%; } 
	33% { transform: rotateZ(30deg); transform-origin: 50%, 50%; }
	66% { transform: rotateZ(90deg); transform-origin: 50%, 50%; }
	100% { transform: rotateZ(-120deg); transform-origin: 50%, 50%; }
}
@keyframes tournerThree { 
	0% { transform: rotateZ(0); transform-origin: 50%, 50%; } 
	33% { transform: rotateZ(-30deg); transform-origin: 50%, 50%; }
	66% { transform: rotateZ(90deg); transform-origin: 50%, 50%; }
	100% { transform: rotateZ(-60deg); transform-origin: 50%, 50%; }
}
@keyframes tournerFour { 
	0% { transform: rotateZ(0); transform-origin: 50%, 50%; } 
	33% { transform: rotateZ(-60deg); transform-origin: 50%, 50%; }
	100% { transform: rotateZ(60deg); transform-origin: 50%, 50%; }
}
@keyframes comeout { from { opacity: 0; } to { opacity: 1; } }
@keyframes comeoutBis {
	0% { opacity: 0; transform: translate(50%,50%); }
	25% { opacity: 0.9; transform: translate(0,0) scale(1.3); }
	100% { opacity: 1; transform: scale(0.5); }
}
@keyframes comeoutTer {
	0% { opacity: 0; transform: scale(0); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes moveOne {
	0% { transform: translate(0,0); }
	33% { transform: translateX(30px); }
	66% { transform: translateX(-10px); }
	100% { transform: translateX(0); }
}
@keyframes moveTwo {
	0% { transform: translate(0,0); }
	33% { transform: translate(35px,35px); }
	66% { transform: translate(35px,0); }
	100% { transform: translate(0,0); }
}
@keyframes moveThree {
	0% { transform: translate(0,0); }
	20% { transform: translate(-10px,20px); }
	70% { transform: translate(30px,20px); }
	100% { transform: translate(0,0); }
}
@keyframes moveFour {
	0% { transform: translate(0,0); }
	33% { transform: translateX(-25px); }
	66% { transform: translate(-10px,30px); }
	100% { transform: translate(0,0); }
}



/*****************************************************/
/*                ANIMATIONS BIS                     */
/*****************************************************/
@keyframes tournerOneBis { 
	0% { opacity: 0; }
	31% { opacity: 0; }
	33% { opacity: 1; }
	64% { opacity: 1; }
	66% { opacity: 0; }
	100% { opacity: 0; }
}

/*****************************************************/
/*                   SITE CONTENTS                   */
/*****************************************************/
.siteContent {
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
}
	.siteContentAccueil { background-color: #000; }
	.siteContentApropos { filter: sepia(34%); }
	.siteContentContact { padding-bottom: 40px; filter: sepia(36%); }

.leContainer { height: 100vh; margin-top: -60px; }
.mainSection { position: relative; }


		/*------------------------ACCUEIL-----------------------------*/
		/*------------------------ACCUEIL-----------------------------*/
		.containerIntro { padding: 7vh 0 5vh; }
		.introBlock { position: fixed; float: left; background-color: #287a79; }
		.introBlack { 
			width: 71vw; 		
			height: 25vh;
			margin-top: 76.5vh;
		}
			.introBlack p {
				position: absolute; 
				top: 4vh;
				left: 10px;
				width: 80px;
				font-family: Pacifico;
				font-size: 18px;
				font-weight: bold;
				color: rgba(0,0,0,0.87); 
			}
		.introWhite { 
			display: grid;
			align-self: stretch;
			align-content: stretch;
			justify-content: stretch;
			width: 30vw;       
			height: 70vh;
			margin-top: 7vh;
			margin-left: 65vw;  
			padding-top: 5px; 
			padding-left: 5px; 
			grid-template-areas:
		    "a a b b c c"
		    "a a b b c c"
		    "d d b b h h"
		    "d d b b h h"
		    "f f i i h h"
		    "f f i i h h";
		    background-color: #000;
		}
		.illustrationMetier { display: none; }
		.illustrationMetierMini { 
		    width: 30vw; 
		    height: 45vw;
		    border: 1px solid #000; 
		    background-color: #434343;
		}

		.illustrationMetierFour, .illustrationMetierFourBis,
		.illustrationMetierFourTer { grid-area: d; }
		.illustrationMetierFour {
			animation: tournerOneBis 15000ms 0 both ease-in-out infinite;
		}
		.illustrationMetierFourBis {
			animation: tournerOneBis 15000ms 6250ms both ease-in-out infinite;
		}
		.illustrationMetierFourTer {
			animation: tournerOneBis 15000ms 11250ms both ease-in-out infinite;
		}

		.gridIntro {
			display: grid;
			align-self: stretch;
			align-content: stretch;
			justify-content: stretch;
		}
		.introIllustration {
			grid-column-start: 1;
			grid-column-end: 1;
			grid-row-start: 1;
			grid-row-end: 1; 
			margin-right: 120px;
			padding: 0 20px;
		}
		.introTitre {
			margin-bottom: 15px;
			font-weight: bold;
			font-size: 38px;
			letter-spacing: 0.2;
			line-height: 40px;
			color: #000;
		}
			.containerIntro .introTitre { 
				margin-top: 10px;
				padding-right: 25px;
				font-size: 10.5vw;
				text-transform: uppercase; 
				line-height: 13vw;
				color: #fff; 
			}
		.introSeparation {
			width: 20px;
			height: 5px;
			margin-top: 10px;
			background-color: #fff;
		}
		.introTexte { margin: 30px 10px; }
			.introIllustration .introTexte { 
				width: 31vw;
				margin-top: 18vw;
				margin-left: 0;
				padding: 3px 5px 5px 10px;
				font-variant: small-caps; 
				font-size: 5vw;
				font-weight: bold;
				letter-spacing: 0.3px;
				color: rgba(255,255,255,0.87);
				background-color: #28527a;   
			}
			.introTexteDescription { 
				padding-left: 2px;
				font-family: Pacifico; 
				font-size: 6.2vw;
				color: rgba(255,255,255,0.87); 
			}
		.introTof { display: none; }


		/*--------------------------APROPOS-----------------------------*/
		/*--------------------------APROPOS-----------------------------*/
		.containerApropos {
			position: relative;
			margin: 0;
			padding: 6vh 0;
			max-width: 100vw;
			background-color: #53afd8;
			border: 1px solid #3782b1;
			border-top: 5px solid #28527a;
			border-bottom: 5px solid #28527a;
		}
		.gridApropos {
			display: grid;
			align-self: stretch;
			align-content: stretch;
			justify-content: stretch;
		}
		.aPropos {
			grid-column-start: 1;
			grid-column-end: 1; 
			grid-row-start: 1;
			grid-row-end: 1; 
			position: relative;
			margin: 0 10px;
			padding: 20px;      
			background-color: white;
			border: 1px solid #3782b1; 
			border-top: 5px solid black;
			box-shadow: 0 0 8px 2px #3782b1;
		}
			.aProposStyleOne {
				width: 60px;
				height: 67px;
				position: absolute;
				top: -1;
				right: -1;
				background-color: #212121;
				border-top: 20px solid #7a2852; 
				border-right: 20px solid #7a2852; 
				border-top-left-radius: 60%;
				border-bottom-left-radius: 60%;
			}
		.paragrafApropos {
			margin: 30px auto 20px;
			letter-spacing: 0.4px;
			line-height: 140%;
		}
		.introTitreTwo { margin-bottom: 40px; }
		.articleTwo {
			grid-column-start: 1;
			grid-column-end: 1;
			grid-row-start: 2;
			grid-row-end: 2; 
			position: relative;
			margin: 0 10px;
			padding: 13vh 20px 10vh;
			background-color: #212121;
		}
		.introTofPrincipal, .introTofPrincipalBack { display: none; }
		.introTitreThree { 
			margin: 0 auto 60px; 
			padding-left: 20px;
			padding-bottom: 6px;
			color : rgba(255, 255, 255, 0.45);
			font-size: 30px;
			border: 2px solid #46a2d2;
		}
		.introTexteTwo {
			margin-bottom: 30px;
			color: rgba(255, 255, 255, 0.87);
			letter-spacing: 0.75;
			line-height: 150%;
		}
		.imageApropos {
			display: block;
			width: 75vw;
			margin: 50px auto;
		}


		/*--------------------------SERVICES-----------------------------*/
		/*--------------------------SERVICES-----------------------------*/
	.containerServices { 
		min-height: 75vh;
		margin: 0;
		padding-top: 20px;
		font-weight: bold;
		color: rgba(33,33,33,0.8);
		background-color: #FFF;
	}
	.introTitreServices { 
		margin: 50px auto 0; 
		padding: 3px 10px 5px; 
		font-size: 32px;
		text-align: center; 
		color: #fff;
		background-color: #28527a; 
		border-bottom: 10px solid  #cb93c2;
	}
		.introTitreServicesTwo { border-bottom-color: #e0e0e0; }
		.introTitreServicesThree { border-bottom-color: #8bcfe8; }	
		
	.divT { padding: 0 30px 100px; }
		.divTTer { padding-top: 30px; padding-bottom: 70px; background-color: #e0e0e0; }
	.divO { margin: 25px 0; font-weight: 500; }
	.divText {
		display: grid;
		align-self: stretch;
		align-content: stretch;
		justify-content: stretch;
		grid-template-areas:
		    "a a"
		    "b c";
	}
		.divText h2 {
			grid-area: a; 
			margin-top: 45px;
			padding-right: 60px;
			font-family: Pacifico;
			font-size: 24px; 
			font-weight: normal;
			line-height: 1.4;
			color: #1d0b30;
		}
		.divTextOne { 
			background: url("images/backWebResponsiveFour.png"); 
			background-repeat: no-repeat;
		}
		.divTextTwo { 
			background: url("images/backWebResponsiveBis.png"); 
			background-repeat: no-repeat;
		}
			.divTextThree h2 { padding-right: 0; }
			h2 span {
				font-family: "Poiret One";
				font-size: 20px;
			 	color: #287a79; 
			}

		.imageServices { 
			grid-area: b; 
			display: block; 
			width: 30vw; 
			margin-top: 10px;
		}
			.imageServiceFour { 
				width: 27vw; 
				border: 4px solid #212121; 
				border-radius: 10px; 
			}

		.separateurTwo { 
			grid-area: b;
			width: 3px; 
			height: 120px; 
			margin-left: 35vw;
			background-color: #28527a; 
		}
		.divTextServices { 
			grid-area: c;
			width: 45vw;
			padding-left: 20px;
		}
		.divTextServices li { 
			margin-bottom: 10px; 
			list-style-type: "- ";
		}
		

		/*--------------------------CONTACT-----------------------------*/
		/*--------------------------CONTACT-----------------------------*/
		.containerContact { position: relative; max-width: 100vw; }
		.contactBloc { margin: 5vh auto 0; padding: 0 20px; }
		.introTitreContact { 
			width: 80vw;
			margin: 45px 0 20px 9vw;
			text-align: right;
		}
		.contactSeparation {
			float: right;
			width: 120px;
			height: 5px;
			margin-top: 0;
			margin-bottom: 30px;
			background-color: #212121;
		}
		.paragrafContact { clear: both; }
		.lesContacts {
			position: relative;
			padding-left: 50px;
			font-family: "Josefin Sans", calibri, sans-serif;
			font-weight: bold;
		}
		.phoneContact { 
			position: absolute;
			top: -2px;
			left: 5px;
			width: 25px; 
			height: auto;
		}
		.mailContact { 
			position: absolute;
			top: -2px;
			left: 5px;
			width: 40px; 
			height: auto; 
		}
		.styleContact {
			position: absolute;
			top: -20.3vh;
			left: -22vh;
			width: 30vh;
			height: 30vh;
			background-color: rgba(33,33,33,0.99);
			transform: rotateZ(45deg);
		}
		.styleContactTwo {
			position: absolute;
			top: -20.3vh;
			left: -10vh;
			width: 20vh;
			height: 20vh;
			background-image: linear-gradient(135deg, transparent 60%, #7a2852 40%);
			transform: rotateZ(-45deg);
			opacity: 0.87;
		}



@media only screen and (min-width : 768px){	
		/*------------------------ACCUEIL-----------------------------*/
		/*------------------------ACCUEIL-----------------------------*/
		.containerIntro { width: 768px; margin: 0 auto; padding: 10vh 0; }
		.introBlack { width: 77vw; }
		.introBlack p { top: 8vh; left: 40px; font-size: 26px; }
		.introWhite { width: 23vw; }
		.gridIntro { grid-template-columns: 0.8fr 1fr; }
		.introIllustration { margin-right: 70px; margin-left: 50px; }
		.introTitre { font-size: 54px; line-height: 50px; }
			.containerIntro .introTitre { font-size: 68px; line-height: 82px; }
			.introIllustration .introTexte { 
				width: 190px;
				margin-top: 80px;
				margin-bottom: 50px;
				padding: 10px 10px 15px 20px; 
				font-size: 32px;  
			}
			.introSeparation { width: 30px; }
			.introTexteDescription { padding-left: 5px; font-size: 36px; }


		/*--------------------------APROPOS-----------------------------*/
		/*--------------------------APROPOS-----------------------------*/
		.containerApropos { margin: 0 auto; padding: 5px; }
		.gridApropos { grid-template-columns: 1fr 1fr; }
		.aPropos {
			margin: 0;
			padding: 13vh 20px 7vh 30px;
			box-shadow: none;
		}
			.aProposStyleOne { width: 120px; height: 130px; }
		.introTitreTwo { margin-bottom: 50px; }
		.articleTwo {
			grid-column-start: 2;
			grid-column-end: 2;
			grid-row-start: 1;
			grid-row-end: 1; 
			margin: 0;
			padding: 13vh 30px 10vh;
		}
		.introTitreThree { 
			margin: 0 auto 50px; 
			padding: 10px 20px 18px 60px;
			padding-left: 60px;
			padding-right: 20px;
			font-size: 38px;
			text-align: right;
		}
		.introTexteTwo { margin: 20px auto; line-height: 160%; }
		.imageApropos { width: 420px; }


		/*--------------------------SERVICES-----------------------------*/
		/*--------------------------SERVICES-----------------------------*/	
		.divT > div { width: 70vw; margin: 40px auto 30px; padding: 0 10px; }
		.divTOne { padding-bottom: 70px; }
		.divTTer { padding-top: 70px; }

		.introTitreServices { 
			margin-top: 40px; 
			padding: 0; 
			font-size: 22px;
			border-bottom-width: 5px;
		}
		.imageServices { width: 16vw; margin-left: 5vw; }
			.imageServiceTwo { width: 20vw; margin-left: 0; }
		.divText h2 { margin-top: 5px; margin-right: 20vw; font-size: 24px; }
			.divTextThree h2 { margin-top: 50px; margin-bottom: 20px; }
		.divTextOne, .divTextTwo { background-size: 50%; }
		.separateurTwo { margin-left: 26vw; }
		.divTextServices { width: 35vw; padding-right: 5vw; padding-left: 40px; }		


		/*--------------------------CONTACT-----------------------------*/
		/*--------------------------CONTACT-----------------------------*/
		.contactBloc { 
			width: 720px;
			margin: 40px auto 20px; 
			padding: 10vh 0; 
		}
		.introTitreContact { margin-top: 0; line-height: 65px; }
		.contactSeparation { margin: 10px 40px 20px 0; }
		.paragrafContact {
			width: 70%;
			margin: 40px 15% 20px;
			padding: 30px 0 0;
		}
			.paragrafContactTwo { padding-top: 0; }
		.lesContacts { width: 70%; margin: 10px 15%; }
		.styleContact {
			top: -100px;
			left: -150px;
			width: 300px;
			height: 300px;
		}
		.styleContactTwo {
			top: -120px;
			left: -35px;
			width: 200px;
			height: 200px;
		}
}


@media only screen and (min-width : 992px){	

	/*****************************************************/
	/*                        ENTETE                     */
	/*****************************************************/
	.logo { margin-left: 4.5vw; }
	.headerIcon { display: none; }
	.menu {
		position: relative;
		float: right;
		width: 600px;
		height: 60px;
		transform: none;
		overflow-y: hidden;
		background-color: transparent;
		border: none;
	}
		.menu ul { margin: 0; padding: 0; }
		.menu li {
			display: inline-block;
			width: 115px;
			margin: 5px 10px;
			text-align: right;
		}
		.menu a {
			display: inline-block;
			height: 10px;
			margin: 20px 0;
			padding: 0;
			line-height: 10px;
			font-size: 14px;
			color: #7b7b7b;
			letter-spacing: 0.7;
			transition-duration: 300ms;
		}
		.menu a:hover { color: #f5f5f5; transition-duration: 300ms; opacity: 0.87; }
			.menuServices a:hover { color: #000; }
		.menu .liOne, .menu .liThree { width: 80px; }
		.menu .pageOn { 
			padding-bottom: 5px;
			color: #f5f5f5;
			border-bottom: 5px solid #f5f5f5; 
		}
			.menuServices .pageOn { color: #000; border-bottom-color: #000; }
		.menu .liTwo { width: 150px; }


	/*****************************************************/
	/*                    SITE CONTENTS                  */
	/*****************************************************/
	.siteContent { top: 0; padding-top: 60px; z-index: -1; }

	.siteContentAccueil, .sectionintro { overflow: hidden; }
	.siteContentApropos { padding-bottom: 0; }
	.siteContentContact { padding-bottom: 0; }
	.siteContentServices { margin-top: 2px; }

	.titre { font-size: 18px; }
	.headerStyle { width: 100px; }

	.containerIntro, .containerServices { width: 960px; }
		.containerServices { margin: 30px auto 0; }

	.introBlack { width: 44vw; margin-top: 85vh; }
		.introBlack p { top: -8px; left: 5vw; font-size: 24px; }
	.introWhite { 
		width: 52vw; 
		margin-left: 44vw; 
		margin-top: 10vh; 
		padding-top: 10px; 
	}

	.illustrationMetier { 
		display: block; 
		border: 5px solid #E9E9E9; 
	}
	.illustrationMetierMini { display: none; }
	
	.illustrationMetierOne, .illustrationMetierOneBis, .illustrationMetierOneTer { grid-area: a; }
	.illustrationMetierTwo, .illustrationMetierTwoBis, .illustrationMetierTwoTer { grid-area: b; }
	.illustrationMetierThree, .illustrationMetierThreeBis, .illustrationMetierThreeTer { grid-area: c; }
	.illustrationMetierFive, .illustrationMetierFiveBis, .illustrationMetierFiveTer { grid-area: f; }
	.illustrationMetierSix, .illustrationMetierSixBis, .illustrationMetierSixTer { grid-area: h; }
	.illustrationMetierSeven, .illustrationMetierSevenBis, .illustrationMetierSevenTer { grid-area: i; }
	
    	.illustrationMetierOne, .illustrationMetierOneBis, .illustrationMetierOneTer,
    	.illustrationMetierThree, .illustrationMetierThreeBis, .illustrationMetierThreeTer,
    	.illustrationMetierFour, .illustrationMetierFourBis, .illustrationMetierFourTer,
    	.illustrationMetierFive, .illustrationMetierFiveBis, .illustrationMetierFiveTer,
    	.illustrationMetierSeven, .illustrationMetierSevenBis, .illustrationMetierSevenTer { 
		    width: 220px;
		    height: 150px;
		    background-color: #000;
		}
		
		.illustrationMetierTwo, .illustrationMetierTwoBis, .illustrationMetierTwoTer,
		.illustrationMetierSix, .illustrationMetierSixBis, .illustrationMetierSixTer {
		    width: 220px;
		    height: 310px;
		    background-color: #000;
		}

    	.illustrationMetierOne, .illustrationMetierSix {
    		animation: tournerOneBis 18000ms 0 both ease-in-out infinite;
    	}
    	.illustrationMetierOneBis, .illustrationMetierSixBis {
    		animation: tournerOneBis 18000ms 4500ms both ease-in-out infinite;
    	}
    	.illustrationMetierOneTer, .illustrationMetierSixTer {
    		animation: tournerOneBis 18000ms 10500ms both ease-in-out infinite;
    	}
    
    	.illustrationMetierFour, .illustrationMetierThree, 
    	.illustrationMetierSeven {
    		animation: tournerOneBis 18000ms 0 both ease-in-out infinite;
    	}
    	.illustrationMetierFourBis, .illustrationMetierThreeBis, 
    	.illustrationMetierSevenBis {
    		animation: tournerOneBis 18000ms 7500ms both ease-in-out infinite;
    	}
    	.illustrationMetierFourTer, .illustrationMetierThreeTer, 
    	.illustrationMetierSevenTer {
    		animation: tournerOneBis 18000ms 13500ms both ease-in-out infinite;
    	}
    
    	.illustrationMetierFive, .illustrationMetierTwo {
    		animation: tournerOneBis 13500ms 0 both ease-in-out infinite;
    	}
    	.illustrationMetierFiveBis, .illustrationMetierTwoBis {
    		animation: tournerOneBis 13500ms 4500ms both ease-in-out infinite;
    	}
    	.illustrationMetierFiveTer, .illustrationMetierTwoTer {
    		animation: tournerOneBis 13500ms 9000ms both ease-in-out infinite;
    	}

	.introIllustration { margin: 0; }

	.introTitre { margin-top: 5px; }
		.containerIntro .introTitre { 
			width: 300px;
			margin-top: 20px; 
			font-size: 62px; 
			line-height: 70px; 
		}
		.introIllustration .introTexte { 
			width: 180px;
			margin-top: 50px;
			margin-bottom: 35px; 
			padding-left: 0;
			font-size: 26px; 
			text-align: center; 
		}
		.introTexteDescription { font-size: 24px; }
	
	.containerApropos { padding: 4vh 0; }

	.gridApropos { width: 960px; margin: 20px auto 0; }
	.aPropos { 
		padding-right: 25px;
		border-left-width: 2px; 
		border-bottom-width: 2px; 
	} 
	.introTitreThree { margin-bottom: 100px; }


		/*--------------------------SERVICES-----------------------------*/
		/*--------------------------SERVICES-----------------------------*/	
		.mainSectionServices {
			display: grid;
			align-self: stretch;
			align-content: stretch;
			justify-content: stretch;
			grid-template-areas:
			    "a b"
			    "c c";
		}
		.divT { padding: 50px 20px; }
			.divT > div { 
				width: auto; 
				margin: 10px auto 0; 
				padding: 10px; 
			}
		.divTOne, .divTTwo { 
			width: 424px; 
			padding-bottom: 70px; 
			border: 1px solid #E0E0E0; 
			box-shadow: 0 0 10px 0 rgba(33,33,33,0.2);
		}
			.divTOne { grid-area: a; margin-left: 30px; }
			.divTTwo { grid-area: b; }
			.divTTer { 
				position: relative;
				width: 908px;
				grid-area: c; 
				display: grid;
				align-self: stretch;
				align-content: stretch;
				justify-content: stretch;
				grid-template-areas: 
					"e f f"
					"e g h";
				margin-top: 120px;
				margin-bottom: 60px;
				margin-left: 30px;
				padding-bottom: 80px;
			}

		.introTitreServices { font-size: 22px; }
			.introTitreServicesThree { padding: 50px 20px 0; }

			.divTTer .divO { 
				width: 400px; 
				margin-bottom: 15px; 
				padding: 20px 25px 25px;
				background-color: #fff; 
			}

		.imageServices { width: 120px; margin-left: 20px; }
			.imageServiceTwo { width: 150px; }

		.divText h2 { margin-top: 15px; margin-right: 100px; }
			.divTextThree h2 { margin-top: 30px; margin-bottom: 20px; }

		.divTextOne, .divTextTwo { background-size: 250px; }
		.separateurOne { 
			width: 100px; 
			height: 1px; 
			margin: 30px 0 10px;
			background-color: #9E9E9E; 
		}
			.divTTer .separateurOne { 
				position: absolute; 
				top: 130px;
				left: 90px;
				width: 40px; 
				height: 4px;
			}
		.separateurTwo { margin-left: 180px; }
			.divTTer .separateurTwo { margin-left: 210px; }

		.separateurThree { 
			width: 450px; 
			height: 1px; 
			margin: 0 auto 50px; 
			background-color: #1d0b30; 
	 	}
		.separateurTer { width: 50px; margin: 30px 0 0 200px; }
			.pOne, .pTwo, .pThree {
				display: inline-block;
				width: 5px;
				height: 50px;
				border-radius: 50%;
				background-color: #1d0b30;
			}

		.divTextServices { width: 180px; padding-right: 20px; padding-left: 30px; }

	.contactBloc { width: 960px; margin: 0 auto; padding: 9vh 0 0; }
	.introTitreContact { width: 500px; margin-left: 450px; }
	.paragrafContact { width: 50%; margin: 0 auto 20px 40%; }
	.lesContacts { width: 50%; margin: 10px auto 10px 40%; }
	.styleContact {
		top: 0;
		left: -250px;
		width: 500px;
		height: 500px;
	}
	.styleContactTwo {
		top: 0;
		left: 0;
		width: 300px;
		height: 300px;
	}
}


@media only screen and (min-width : 1200px){
	.containerIntro { width: 1100px; } 
	.containerServices { width: 1060px; }
	.introIllustration { margin-left: -50px; }
	.introBlack p { left: 8vw; }
	.paragrafContact { margin-left: auto; }
	.lesContacts { margin-left: auto; }

	.introTof {
		display: block;
		position: sticky;
		top: 25vh;
		margin: 8vh 0 0 20px;
		padding: 0;
	}
		.introTofPrincipal { 
			display: block;
			position: absolute;
			right: -10vw;
			top: 100px;
			width: 200px; 
			margin: 0; 
			border-bottom-right-radius: 10%;
			z-index: 1;
			animation: comeoutTer 100ms 0ms both ease;
		}
		.introTofPrincipalBack {
			display: block;
			position: absolute;
			right: -12vw;
			top: 150px;
			width: 300px; 
		}
		.ideeEnv {
			position: absolute;
			top: -10px;
			left: 0;
			width: 90px;
			height: 90px;
			margin: -15px 0 20px 0;
			border-radius: 50%;
			animation: comeout 400ms 300ms both ease, moveOne 16000ms 2500ms both ease infinite;
		}
			.imageIdee {
				width: 90px; 
				height: auto;
				background-color: transparent;
				border : 1px solid #fff2df;
				border-radius: 50%;
			}
			.lesRondsIdee {
				position: absolute;
				top: 0;
				left: 0;
				width: 90px;
				height: 90px;
				animation: tournerOne 16000ms 2500ms both ease infinite;
			}
		.conceptionEnv {
			position: absolute;
			top: 35px;
			left: 1vw;
			width: 114px;
			height: 114px;
			margin: 15px 0 0 -20px;
			border : 1px solid #263238;
			border-radius: 50%;
			z-index: 2;
			animation: comeout 400ms 800ms both ease, moveTwo 20000ms 2500ms both ease infinite;
		}
			.introTofConception {
				width: 114px;
				height: 114px;
				border-radius: 50%;
			}
			.imageConception {
				position: absolute;
				top: 10px;
				left: -10px;
				width: 140px;
			}
			.lesRondsConception {
				position: absolute;
				top: 8px;
				left: 8px;
				width: 97px;
				height: 97px;
				transform: rotateZ(45deg);
				transform-origin: 50% 50%;
				animation: tournerTwo 20000ms 2500ms both ease infinite;
			}
		.realisationEnv {
			position: absolute;
			top: -110px;
			left: 6.5vw;
			width: 135px;
			height: 135px;
			margin-top: -15px;
			margin-left: -25px;
			border : 1px solid #5300e8;
			border-radius: 50%;
			animation: comeout 400ms 1000ms both ease, moveThree 20000ms 2500ms both ease infinite;
		}
			.introTofRealisation {
				width: 135px;
				height: 135px;
				background-color: transparent; 
				border-radius: 50%;
			}
			.realisation {
				position: absolute;
				top: 25px;
				left: 15px;
				width: 85px;
				height: 55px;
				margin: 10px 0 0 5px;
				background-color: rgba(33,33,33,0.45); 
				border: 5px solid #fff;
				box-shadow: 0 0 5px 1px rgba(33,33,33,0.45);
			}
			.imageRealisation { width: 85px; height: 55px; }
			.lesRondsRealisation {
				position: absolute;
				top: 12px;
				left: 12px;
				width: 110px;
				height: 110px;
				margin-left: 0px;
				margin-top: 0px;
				transform: rotateZ(45deg);
				transform-origin: 50% 50%;
				animation: tournerThree 20000ms 3500ms both ease infinite;
			}
		.introProjetEnv {
			position: absolute;
			top: 0;
			left: 6vw;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			z-index: 2;
			animation: comeout 400ms 1400ms both ease, moveFour 16000ms 2500ms both ease infinite;
		}
			.introProjet {
				position: absolute;
				width: 200px;
				height: 200px;
				border: 1px solid #000; 
				border-radius: 50%;
			}
			.projet {
				width: 200px;
				max-width: 100%;
				margin-top: 35px;
			}
			.lesRondsProjet {
				position: absolute;
				width: 160px;
				height: 160px;
				margin-left: 20px;
				margin-top: 20px;
				animation: tournerFour 16000ms 4000ms both ease infinite;
			}
		.rond { width: 10px; height: 10px; border-radius: 50%; }
			.rondOne { position: absolute; top: 2px; left: 2px; }
			.rondTwo { position: absolute; top: 2px; right: 2px; }
			.rondThree { position: absolute; bottom: 2px; left: 2px; }
			.rondFour { position: absolute; bottom: 2px; right: 2px; }
			.rond.rondIdee { 
				background-color: #f57f17; 
				border : 1px solid #f57f17; 
				animation: comeoutBis 600ms 100ms both ease-in-out;
			}
			.rond.rondConception { 
				background-color: #6d4c41; 
				border : 1px solid #4e342e;
				animation: comeoutBis 600ms 700ms both ease-in-out; 
			}
				.rondConception.rondOne { top: 0; left: 0; }
				.rondConception.rondTwo { top: 0; right: 0; }
				.rondConception.rondThree { bottom: 0; left: 0; }
				.rondConception.rondFour { bottom: 0; right: 0; }
			.rond.rondRealisation { 
				background-color: #bf360c; 
				border : 1px solid #9941a5; 
				animation: comeoutBis 600ms 1300ms both ease-in-out; 
			}
				.rondRealisation.rondOne { top: 0; left: 0; }
				.rondRealisation.rondTwo { top: 0; right: 0; }
				.rondRealisation.rondThree { bottom: 0; left: 0; }
				.rondRealisation.rondFour { bottom: 0; right: 0; }
			.rond.rondProjet { 
				background-color: #33719d; 
				border : 1px solid #33719d; 
				animation: comeoutBis 600ms 1900ms both ease-in-out;
			}


		.divTOne, .divTTwo { width: 454px; padding: 50px 20px; }
		.divTTer { width: 970px; }
			.divTTer .separateurOne { left: 100px; }

	.divTextServices { width: 190px; padding-left: 35px; padding-right: 10px; }

}