/************************************************************************/
/***********************//* PAGE ACCUEIL *//****************************/
/*****************************  768px  ********************************/
/*************************  SECTION MENU  ****************************/
/********************************************************************/
html,body{
	height: 100%;
	min-height: 100%;
}
#container{
	height: 100%;
	-webkit-perspective: 1px;
	-moz-perspective: 1px;
	perspective: 1px;
/*	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;*/
	overflow-x: hidden; 
	overflow-y: auto;
}


	.langBarre{
		display: inline-block;
	}

	nav#mainMenu{
		height: 106px;
		background-color: transparent;
		margin: 0 auto;
	}

	nav#mainMenu span.logoImg{
		top: 40%;
		left: 15px;
	}


		nav#mainMenu .iconeMobile{
			display: none;
		}

		nav#mainMenu h4{
			position: absolute;
			top: 20%;
			right: 4%;
			color: #fff;
			font-size: 14px;
		}

		nav#mainMenu h4:hover{
			font-weight: 700;
			text-decoration: line-through;
			cursor:pointer;
			cursor: url(../images/main_hover.png) 7.5 1.5, auto;
		}

		nav#mainMenu ul#listeMenu{
			display: inline;
			width: initial;
			height: initial;
			background-color: transparent;
			position: initial;
			float: right;
			margin-top: 38px;
			margin-right: 15px;
		}

			nav#mainMenu ul#listeMenu li{
				padding: 10px 10px;
				margin-left: 0%;
				margin-top: 0%;
				float: left;
				color: #fff;
			}

		nav#mainMenu ul#listeMenu li:first-child{
			margin-top: 0%;
		}

			nav#mainMenu ul#listeMenu li a{
				font-size: 14px;
			}


/* À modifié en fonction de la video et de l'image */
	#presentation{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100vh;
	}

		#presentation h1{
			position: relative;
			top: 45%;
			font-size: 80px;
			width: 65%;
			margin: 0 auto;
		}

	#presentation h4{
		font-size: 14px;
	}

/* NAVIGATION SPÉCIALE DU MENU */
	#subMenu{
		display: none;
		width: 675px;
		margin: 0 auto;
		position: relative;
		top: 40%;
		opacity: 0;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
	}

		#subMenu h3{
			display: inline;
			color: #fff;
			font-size: 32px;
			font-family: 'Infini',sans-serif;
			text-align: left;
		}

		/*#subMenu .fleche{
			width: 203px;
			height: 9px;
			/*position: absolute;*/
			/*background-image: url(../images/flecheBlancheMenu.png);
			background-repeat: no-repeat;
			background-size: 203px 9px;
		}*/

		#subMenu h3::after{
			position: absolute;
			content: "";
			width: 203px;
			height: 9px;
			margin-top: 17px;
			margin-left: 12px;
			background-image: url(../images/flecheBlancheMenu.png);
			background-repeat: no-repeat;
			background-size: 203px 9px;
		}


		#subMenu #subMenuUl{
			display: inline-block;
			float: right;
			margin-top: -8px;
		}

			#subMenu #subMenuUl li{
				padding: 10px 20px;
			}

				#subMenu #subMenuUl li:hover a{
					text-decoration: line-through;
				}

				#subMenu #subMenuUl li a{
					font-size: 36px;
					font-family: 'zigzag-not-rounded', serif;
					/* w3C */
					text-rendering: optimizeLegibility;
					font-feature-settings: "liga" 1, "dlig" 1;
					/* prefixe */
					-ms-text-rendering: optimizeLegibility;
					-o-text-rendering: optimizeLegibility;
					-webkit-text-rendering: optimizeLegibility;
					-moz-text-rendering: optimizeLegibility;
					-webkit-font-feature-settings: "liga" 1, "dlig" 1;
					-moz-font-feature-settings: "liga=1, dlig=1";
					-ms-font-feature-settings: "liga" 1, "dlig" 1;
					-o-font-feature-settings: "liga" 1, "dlig" 1;
					font-variant-ligatures: common-ligatures;
					color: #fff;
				}

/* // PAGE ACCUEIL // Section a propos */

	.propos{
		width: 100%;
		padding: 80px 0px 40px 0px;
	}

		.propos .descriptionAgence h3{
			width: 70%;
			max-width: 775px;
			font-size: 40px;
			line-height: 1.3em;
		}

		.propos .descriptionAgence p{
			width: 52.5%;
			max-width: 475px;
			font-size: 20px;
			line-height: 1.4em;
			padding: 60px 0px;
		}

		.propos .descriptionAgence a{
			margin: 15px 0px 0 0;
		}

/* // PAGE ACCUEIL // Section d'événements */

	.sectionVedette{
		-moz-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		padding: 80px 0;
	}

	.sectionVedette::-webkit-scrollbar{
		display: none; 
	}

		.sectionVedette .fwork{
			width: 85%;
			z-index: 10;
		}

		.sectionVedette .fwork .fworkModif{
			font-size: 70px;
		}

			.sectionVedette .fwork h2{
				font-size: 70px;
				margin-left: -4px;
			}


		.sectionVedette .template1{
			position: relative;
			width: 100%;
			margin: 0;
  			height: 80vh;
  			-moz-transform-style: preserve-3d;
			-webkit-transform-style: preserve-3d;
  			transform-style: preserve-3d;
		}

		.sectionVedette .vitrine{
			height: 517px;
			padding: 50px 0;
		}

		.sectionVedette .vitrine .unEvent{
			padding-bottom: 0;
		}


			.sectionVedette .vitrine .unEvent{
				margin-bottom: 0px;
				max-width: none;
				position: absolute;
  				top: 0;
			}

			.sectionVedette .template1 .unEvent:nth-child(1){
				width: 70.6%;
				height: auto;
				max-width: initial;
				/*max-height: 663px;*/
				position: absolute;
				right: 7.4%;
				/*-moz-transform-style: translateZ(-0.13px) scale(1.13);
				-webkit-transform-style: translateZ(-0.13px) scale(1.13);*/
				-moz-transform: translateZ(-0.10px) scale(1.10);
				-webkit-transform: translateZ(-0.13px) scale(1.13);
				transform: translateZ(-0.13px) scale(1.13);
				background-size: cover;
				padding-bottom: 39.5%; 
			}

			.sectionVedette .vitrine .unEvent a.smallctn .div.topsub{
				bottom: auto;
				top: 0px;
			}

			.sectionVedette .template1 .unEvent:nth-child(2){
				width: 33.9%;
				height: auto;
				/*max-width: 638px;
				max-height: 365px;*/
				position: absolute;
				top: 42%;
				right: 10.2%;
				-moz-transform-style: translateZ(.15px) scale(0.85);
				-webkit-transform-style: translateZ(.15px) scale(0.85);
				transform: translateZ(.15px) scale(0.85);
				background-size: cover;
				padding-bottom: 19.35%;
			}

			.sectionVedette .template1 .unEvent:nth-child(3){
				width: 33.9%;
				height: auto;
				/*max-width: 638px;
				max-height: 365px;*/
				position: absolute;
				top: 42%;
				left: 14.8%;
				-webkit-transform: translateZ(.08px) scale(0.92);
				-moz-transform: translateZ(.08px) scale(0.92);
				transform: translateZ(.08px) scale(0.92);
				
				background-size: cover;
				padding-bottom: 19.35%; 
			}

		/* TEMPLATE #2 */

		.sectionVedette .template2{
			position: relative;
			width: 100%;
			padding: 35px 0 65px 0;
			margin: 0;
  			transform-style: preserve-3d;
		}

			.sectionVedette .template2 .unEvent:nth-child(1){
				width: 70.6%;
				height: auto;
				max-width: initial;
				/*max-height: 663px;*/
				position: absolute;
				top: 99px;
				right: 7.4%;
				-webkit-transform: translateZ(-0.08px) scale(1.08);
				-moz-transform: translateZ(-0.08px) scale(1.08);
				transform: translateZ(-0.08px) scale(1.08);
				
				background-size: cover;
				padding-bottom: 39.5%; 
			}

			.sectionVedette .template2 .unEvent:nth-child(2){
				width: 38.8%;
				height: auto;
				/*max-width: 696px;			
				max-height: 398px;*/
				position: absolute;
				top: 19.7px;
				left: 12.7%;
				-webkit-transform: translateZ(.12px) scale(0.88);
				-moz-transform: translateZ(.12px) scale(0.88);
				transform: translateZ(.12px) scale(0.88);
				
				background-size: cover;
				padding-bottom: 21.7%;
			}

			.sectionVedette .template2 .unEvent:nth-child(3){
				width: 33.9%;
				height: auto;
				/*max-width: 638px;
				max-height: 365px;*/
				position: absolute;
				top: 0;
				right: 10.2%;
				transform: translateZ(.16px) scale(0.84);
				-webkit-transform: translateZ(.16px) scale(0.84);
				-moz-transform: translateZ(.16px) scale(0.84);
				background-size: cover;
				padding-bottom: 19.35%; 
			}


		/* TEMPLATE #3 */

		.sectionVedette .template3{
			position: relative;
			width: 100%;
			margin: 0;
  			height: 80vh;
  			transform-style: preserve-3d;
  			padding: 50px 0 0px 0;
		}

			.sectionVedette .template3 .unEvent:nth-child(1){
				width: calc(100% - 29.4%);
				max-width: initial;
				height: auto;
				position: absolute;
				top: 25px;
				right: 7.4%;
				-webkit-transform: translateZ(-0.13px) scale(1.13);
				-moz-transform: translateZ(-0.13px) scale(1.13);
				transform: translateZ(-0.13px) scale(1.13);
				
				background-size: cover;
				padding-bottom: 39.5%;
			}
			/*
			.sectionVedette .template3 .unEvent:nth-child(2){
				width: 380px;
				max-width: initial;
				height: 213px;
				position: absolute;
				left: 55%;
				transform: translateZ(-0.05px) scale(1.05) translateY(0%);
			}

			.sectionVedette .template3 .unEvent:nth-child(3){
				width: 450px;
				max-width: initial;
				height: 253px;
				position: absolute;
				left: 12%;
				transform: translateZ(.4px) scale(0.6) translateY(-5%);
			}*/

				.sectionVedette .vitrine .unEvent .div .h3{
					font-size: 16px;
					color: #fff;
				}
	
				.sectionVedette .vitrine .unEvent .div .h5{
					font-size: 16px;
					color: #fff;
				}

				.sectionVedette .vitrine .unEvent a .div .h3{
					margin-left: 8%;
				}

					.sectionVedette .vitrine .unEvent a .div .h3 a{
						font-size: 20px;
						color: #fff;
					}
	
				.sectionVedette .vitrine .unEvent a .div .h5{
					margin-left: 8%;
				}

					.sectionVedette .vitrine .unEvent a .div .h5{
						color: #fff;
					}

					#workflow .workEvent .div .trait,
					.sectionVedette .vitrine .unEvent .div .trait{
						margin-left: 8%;
					}

					.sectionVedette .template1 .unEvent .div, 
					.sectionVedette .template2 .unEvent .div, 
					.sectionVedette .template3 .unEvent .div{
						opacity: 0;
						transition: opacity .6s;
					}
			

	/* // PAGE ACCUEIL // Section nous contacter */


	.nContacter h3{
		top: 40%;
		font-size: 60px;
	}

	.nContacter a:hover{
		font-weight: 700;
	}


	footer{
		width: 100%;
		padding: 40px 0px;
		display: inline-block;
	}
	
		div.adresse{
			margin: 0 auto;
			padding: 0 !important;
			float: left;
		}

		footer  div.adresse-container .adresse.left{
			/*margin-right: 60px !important;*/
		}

	
			div.adresse h5{
				font-size: 16px;
				margin-top: 5px;
			}

			div.adresse h5:last-of-type{
				margin-top: 12px;
			}

			footer div.adresse:nth-child(even){
				/*float: left;*/
			}


		div.reseauSociaux{
			width: 15%;
			text-transform: none;
			display: block;
			float: right;
		}

			div.reseauSociaux div{
				width: 100%;
				height: 30px;
				border: none;
				float: left;
			}

			div.reseauSociaux div:nth-child(odd){
				float: none;
			}
	
			div.reseauSociaux div:nth-child(even){
				float: none;
			}

				div.reseauSociaux div a{
					position: initial;
					top: 0%;
					text-align: left;
					color: #000;
				}


/************************************************************************/
/***********************//* PAGE CONTACT *//****************************/
/*****************************  768px  ********************************/
/***********************  SECTION LOCATION  **************************/
/********************************************************************/

		#presentation.presentationContact h1{
			position: relative;
			top: 45%;
			font-size: 80px;
			width: 100%;
			text-align: center;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			-ms-transition: all 0.5s ease;
		}

		/*#presentation.presentationContact h4{
		font-size: 24px;
	}*/

	.locations h4{
		width: 25%;
		text-align: left;
		margin-left: 8px;
	}

	.locations h4::after{
		position: absolute;
		width: 17.5%;
		content: "";
		border-bottom: 1px solid #000;
		margin-top: 8px;
		margin-left: 8px;
	}


	.locations div.adresse{
		width: 33%;
		padding: 0px 0px 20px 0px;
		float: right;
		margin-top: -15px;
	}

		.locations div.adresse h3{
			font-size: 16px;
		}

		.locations div.adresse h5{
			font-size: 15px;
			line-height: 1.3em;
		}

		.locations div.adresse a{
			font-size: 14px;
			margin-top: 20px;		
		}

		.locations div.adresse a:hover{
			font-weight: 700;
			text-decoration: line-through;
			letter-spacing: 1px;	
		}

/* // PAGE CONTACT // SECTION DEUXIEME RANGER  */

.deuxieme{
	width: 66%;
	float: right;
	margin-top: 20px; 
}

	.deuxieme .elem{
		width: 50%;
		float: left
	}

		.deuxieme .elem h3{
			text-align: center;
			font-size: 18px;
		}

		.deuxieme .elem h5{
			font-size: 16px;
			margin-bottom: 12px;
			font-weight: 700;
		}

	.courrielContact{
		font-family: 'Infini', sans-serif;
	}

/* // PAGE CONTACT // SECTION RESEAU SOCIAUX */
	
	#contactFollow{
		width: 100%;
		padding: 20px 0;
		border-top: 1px solid #000;
		float: right;
	}

		#contactFollow h4{
			display: inline-block;
			width: 25%;
			font-size: 12px;
			margin-left: 34%;
			float: left;
			text-align: left;
		}

		#contactFollow h4:after{
			width: 500%;
			position: absolute;
			content: "";
			border-bottom: 1px solid #000;
			margin-top: 6px;
			margin-left: 8px;
		}

		#contactFollow div.reseauSociaux{
			display: inline-block;
			width: 40%;
			font-size: 18px;
			text-transform: uppercase;
			float: right;
			text-align: right;
			margin-top: 0px; 
		}

			#contactFollow div.reseauSociaux h5{
				width: 100%;
				font-size: 12px;
				text-align: center;
			}

				#contactFollow div.reseauSociaux h5 a{
					position: initial;
					top: 0%;
					left: 0;
					right: 0;
					text-align: left;
					color: #000;
				}
	
				#contactFollow div.reseauSociaux h5 a:hover{
					text-decoration: line-through;
				}

/************************************************************************/
/***********************//* PAGE WORK *//*******************************/
/***************************  768px  **********************************/
/***********************  SECTION MENU  ******************************/
/********************************************************************/

.filterZone{
	width: 90%;
	max-width: 1366px;
	margin: 0 auto;
	
}

	.filterZone .filter{
		width: 90%;
		max-width: 1366px;
		display: inline-block;
		position: absolute;
		z-index: 5;
		background-color: #fff;
	}

		.filterZone .filter h3{
			border-bottom: none;
			font-size: 18px;
			float: left;
			text-transform: uppercase;
		}

		.filterZone .filter div{
			width: 25%;
			border-bottom: none;
			float: left;
		}

			.filterZone .filter div ul{
				margin-left: 72px;
				z-index: 8;
			}

			.filterZone .filter div #filterType{
				margin-left: 72px !important;
			}

				.filterZone .filter div ul li{
					border-top: none;
					padding: 10px 0px;
				}

				.filterZone .filter div ul li:hover{
					text-decoration: line-through;	
				}

			.filterZone .filter div h4{
				font-size: 18px;
			}

/* // WORK // SECTION WORKFLOW - BASE  */
	#workflow{
		max-width: 1366px;
		margin: 23px auto 0 auto;
		display: block;
	}

		#workflow .workEvent{
			width:calc(50% - 5px);
			height: 360px;
			cursor:pointer;
			cursor: url(../images/main_hover.png) 7.5 1.5, auto;
			margin-bottom: 10px;
		}

		#workflow .workEvent .div{
			visibility: hidden;
			opacity: 0;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			-ms-transition: all 0.5s ease;
		}

		#workflow .workEvent:hover .div{
			visibility: visible;
			opacity: 1;
		}

		#workflow .workEvent:nth-child(odd){
			float: right;
		}

		#workflow .workEvent:nth-child(even){
			float: left;
		}

				#workflow .workEvent div h3,
				#workflow .workEvent .div .h3{
					font-size: 20px;
					color: #fff;
					margin-left: 8%;
				}
			
				#workflow .workEvent div h5,
				#workflow .workEvent .div .h5{
					font-size: 14px;
					color: #fff;
					margin-left: 8%;
				}

		.returnTop i{
			cursor:pointer;
			cursor: url(../images/main_hover.png) 7.5 1.5, auto;
		}

		.returnTop h3{
			cursor:pointer;
			cursor: url(../images/main_hover.png) 7.5 1.5, auto;
		}

/************************************************************************/
/***********************//* PAGE PROJET *//*****************************/
/*****************************  BASE  *********************************/
/********************  SECTION DETAIL PROJET *************************/
/********************************************************************/

	#detailProjet .partageProjet{
		width: initial;
/*		background-color: #f2f2f2;*/
		position: absolute;
		top: 0;
		right: 0;
		cursor:pointer;
		cursor: url(../images/main_hover.png) 7.5 1.5, auto;
		margin: 0;
	}

		#detailProjet .partageProjet .shareIcon{
			width: 94px;
			height: 70px;
			background-image: url(../images/icone_principal.png);
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: 26px 28px;
		}

	#detailProjet .retourProjet{
		display: block;
		width: 84.3px;
		height: 70px;
		/*background-color: #f2f2f2;*/
		background-image: url(../images/fleche_gauche.png);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 39px 6px;
		position: absolute;
		top: 0;
		left: 0;
		cursor:pointer;
		cursor: url(../images/main_hover.png) 7.5 1.5, auto;
	}

		#detailProjet .retourProjet a{
			width: 100%;
			height: 100%;
		}

			#detailProjet a{
				color: #000;
			}

	#detailProjet .titreProjet{
		font-size: 16px;
		width: 100%;
		text-align: center;
		margin-top: 60px; 
	}

	#detailProjet h3{
		font-size: 24px;
		width: 100%;
		text-align: center;
		margin-top: 10px; 
	}

	#detailProjet h4{
		font-size: 24px;
		width: 100%;
		text-align: center;
		margin-top: 10px; 
	}

	#detailProjet #texteProjet{
		display: table;
		width: 80%;
		margin: 40px auto 0 auto;
	}

		#detailProjet #texteProjet .colGaucheProjet{
			width: 20%;
			float: left;
		}

			#detailProjet #texteProjet .colGaucheProjet p{
				color: #000;
				font-size: 14px;
				margin: 0;
			}

		#detailProjet .colGaucheProjet .tagProjet{
			width: 60%;
			margin: 20px 0 0 0; 
		}

			#detailProjet .colGaucheProjet .tagProjet a{
				color: #000;
				padding: 0;
				margin-left: 0%;
			}


		#detailProjet #texteProjet .colDroitProjet{
			width: 80%;
			float: left;
		}

		#detailProjet #texteProjet .colDroitProjet p{
			width: 90%;
			float: left;
		}

/* zonePortfolio */

#zonePortfolio{
	position: relative;
	width: 90%;
	max-width: 1160px;
	padding: 15px 0;
	margin: 23px auto 0 auto;
	display: block;
}

	#zonePortfolio .imgPortfolio{
		position: relative;
		width: calc(50% - 5px);
		height: 360px;
		margin: 0 0 10px 0;
	}

	#zonePortfolio  .imgGrande{
		position: relative;
		max-width: 1160px;
		height: 650px;
		margin: 0 0 10px 0;
	}


		#zonePortfolio .imgPortfolio:nth-child(odd){
			float: left;
		}

		#zonePortfolio .imgPortfolio:nth-child(even){
			float: right;
		}


/* NAVIGATION DES PROJETS */

.navProjet{
	display: table;
	width: 85%;
	margin: 0 auto;
}

	.navProjet .prevProjet{
		margin-left: 0%;
		z-index: 2;
	}

		.navProjet .prevProjet:hover{
			cursor:pointer;
			cursor: url(../images/main_hover.png) 7.5 1.5, auto;
		}

	.navProjet .nextProjet{
		margin-right: 0%;
	}

		.navProjet .nextProjet{
			cursor:pointer;
			cursor: url(../images/main_hover.png) 7.5 1.5, auto;
			z-index: 2;
		}

/* SECTIONS RELATED PROJECTS */

.relatedProject{
	width: 85%;
	margin: 0 auto;

}

	.relatedProject .troisProjet{
		max-width: 1200px;
		margin: 0 auto;
	}

		.relatedProject .unRelProject{
			display: inline-table;
			width: 30%;
			max-width: 360px;
			margin-left: 2.5%;
		}
	
			.relatedProject .unRelProject a{
				color: #000;
			}
	
			.relatedProject .unRelProject .image{
				width: 100%;
				height: 234px;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				background-size: cover;
			}


/************************************************************************/
/***********************//* PAGE AGENCY *//*****************************/
/*****************************  768px  ********************************/
/*********************  SECTION PRESENTATION  ************************/
/********************************************************************/


		#presentation.presentationAgency h1{
			top: 30%;
			font-size: 60px;
			-webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			-ms-transition: all 0.5s ease;
		}
        
        
		#presentation.presentationAgency h4{
			font-size: 25px;
			margin-bottom: 35px;
		}
    
		#presentation.presentationAgency h6{
			width: 75%;
			font-size: 25px;
			bottom: 5%;
		}
        

/* // SECTION WHO WE ARE // 768px */

#who{
	padding: 55px 0;
}

#who h2{
	margin-bottom:60px;
}

	#who h3{
		width: 75%;
		max-width: 970px;
		font-size: 25px;
	}

	#who h3:last-of-type{
		margin-bottom: 60px;
	}

	#who .whoRanger{
		display: block;
		margin: 0 auto;
		width: 90%;
	}


	#who .whoRanger .whoImg{
		display: inline-block;
		width: 55%;
		max-width: 560px;
		height: 180px;
		margin-left: 5%;
		padding-bottom: 0%;
		background-size: cover;
	}

	#who .whoRanger .whoGauche{
		width: 40%;
		float: left;
		margin-top: 0%;
	}

	#who .whoRanger h4{
		width: 100%;
		margin: 0;
		font-size: 16px;
		line-height: 1.15em;
	}

	#who .whoRanger a{
		font-size: 14px;
	}
/* // Trois image // */

#troisImage{
	display: block;
	width: 100%;
	max-width: 768px;
	height: 300px;
	padding: 80px 0;
	margin: 0 auto;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
   	-webkit-perspective: 1000;
	clear: both;
}

	#troisImage .imgLarge{
		width: 314px;
		height: 202px;
	}

	#troisImage .imgHaute{
		width: 204px;
		height: 316px;
	}

	#troisImage .pt1{
		position: absolute;
		top: 125px;
		left: 0px;
		background-image: url(../images/image1.jpg);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		/*-webkit-transform: translateZ(-0.07px) scale(1.07);
		-moz-transform: translateZ(-0.07px) scale(1.07);
		transform: translateZ(-0.07px) scale(1.07);*/
		-webkit-transform: translateZ(0.03px) scale(1.07);
		-moz-transform: translateZ(0.03px) scale(1.07);
		transform: translateZ(0.03px) scale(1.07);
		
	}

	#troisImage .pt2{
		position: absolute;
		top: 80px;
		left: 282px;
		background-image: url(../images/image5.jpg);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		/*-webkit-transform: translateZ(0.07px) scale(0.93);
		-moz-transform: translateZ(0.07px) scale(0.93);
		transform: translateZ(0.07px) scale(0.93);*/
		-webkit-transform: translateZ(0.17px) scale(0.93);
		-moz-transform: translateZ(0.17px) scale(0.93);
		transform: translateZ(0.17px) scale(0.93);
		
	}

	#troisImage .pt3{
		position: absolute;
		top: 162px;
		right: 0px;
		background-image: url(../images/image1.jpg);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		/*-webkit-transform: translateZ(-0.13px) scale(1.13);
		-moz-transform: translateZ(-0.13px) scale(1.13);
		transform: translateZ(-0.13px) scale(1.13);*/
		-webkit-transform: translateZ(0.01px) scale(1.13);
		-moz-transform: translateZ(0.01px) scale(1.13);
		transform: translateZ(0.01px) scale(1.13);
		
	}

/* // ZONE APPROACH // */

#approach{
	padding: 60px 0;
}

	#approach h3{
		width: 75%;
		max-width: 950px;
		font-size: 26px;
		padding-top: 40px;
	}

	/* HAUT APPROACH */

	#approach .hautApproach{
		width: 80%;
		max-width: 1366px;
		margin: 20px auto;
		padding: 120px 0;
	}

		#approach .hautApproach .approachImg{
			display: inline-block;
			width: 50%;
			max-width: 560px;
			height: auto;
			padding-bottom: 16.5%;
		}

		#approach .hautApproach h4{
			width: 45%;
			margin: 1% auto 0 auto;
			float: right;
		}


/* BAS APPROACH */

	#approach .basApproach{
		width: 85%;
		max-width: 1366px;
		margin: 40px auto;
		display: table;
	}

		#approach .basApproach .approachImg{
			display: inline-block;
			width: 50%;
			max-width: 560px;
			height: 128px;
			float: right
		}

		#approach .basApproach .basApproachColGauche{
			width: 45%;
			max-width: initial;
			height: auto;
			margin: 0 auto;
			float: left;
			position: relative;
		}

			#approach .basApproach .basApproachColGauche h4{
				text-align: center;
				height: auto;
				width: initial;
			}

			#approach .basApproach .basApproachColGauche h5{
				width: initial;
				font-size: 14px;
				margin-top: 0;
				
				-ms-transform: rotateZ(270deg);
				-moz-transform: rotateZ(270deg);
				-webkit-transform: rotateZ(270deg);
				transform: rotateZ(270deg);
				position: absolute;
				left: -65px;
				bottom: 25px;
				font-weight: 400;
				overflow: hidden;
			}

				#approach .basApproach .basApproachColGauche h5::after{
					position: absolute;
					width: 100%;
				}


			#approach .basApproach .basApproachColGauche a{
				color: #000;
				display: block;
				margin-top: 0;
				padding: 54px 10px 0;
				vertical-align: text-bottom;
			}


/* ZONE DIRECTOR */

	#director .directorImg{
		width: 80%;
		max-width: 800px;
	}

	#director .containerPhotos .imgDirect{
		width: 50%;
		max-width: 685px;
		max-height: 754px;
		padding-bottom: 55%;
		margin-left: 0.8px;
	}

		#director .prevProjet{
			left: 0%;
			width: 56px;
			height: 9px;
			background-size: 56px 9px;
			background-image: url(../images/fleche_gauche.png);
			background-image: -webkit-image-set(url(../images/fleche_gauche.png) 1x, url(../images/fleche_gauche2x.png) 2x);
			-ms-transform: rotateZ(0deg);
			-moz-transform: rotateZ(0deg);
			-webkit-transform: rotateZ(0deg);
			transform: rotateZ(0deg);
			-webkit-transition: all 0.35s ease;
			-moz-transition: all 0.35s ease;
			-o-transition: all 0.35s ease;
			-ms-transition: all 0.35s ease;
		}


		#director .nextProjet{
			right: 0%;
			width: 56px;
			height: 9px;
			background-size: 56px 9px;
			background-image: url(../images/fleche_gauche.png);
			background-image: -webkit-image-set(url(../images/fleche_gauche.png) 1x, url(../images/fleche_gauche2x.png) 2x);
			-ms-transform: rotateZ(180deg);
			-moz-transform: rotateZ(180deg);
			-webkit-transform: rotateZ(180deg);
			transform: rotateZ(180deg);
			-webkit-transition: all 0.35s ease;
			-moz-transition: all 0.35s ease;
			-o-transition: all 0.35s ease;
			-ms-transition: all 0.35s ease;
		}

		#director span.nom{
			/*font-size: 25px;*/
			margin: 10px auto;
			margin-top: 23%;
		}
		
		#director span.nom p strong{
			margin: 10px auto;
			margin-top: 23%;
		}

		#director span.position{
			font-size: 16px;
		}
		#director span.nom p{
			font-size: 16px;
		}

/* SELECTED CLIENTS */

#selClients{
	position: relative;
	display: inline-block;
	/*position: relative;
	display: block;*/
	padding: 115px 0;
}
	#selClients .laListe{
		position: relative;
		/*display: inline-block;*/
		width: 90%;
		max-width: 1366px;
		margin-left: 20%;
	}
	#selClients h5{
		width: initial;
		-ms-transform: rotateZ(270deg);
		-moz-transform: rotateZ(270deg);
		-webkit-transform: rotateZ(270deg);
		transform: rotateZ(270deg);
		position: absolute;
		left: 30px;
		bottom: 165px;
		font-weight: 400;
		overflow: hidden;
		margin-bottom: 0px;
		/*display: inline-block;*/
	}

		#selClients h5::after{
			width: 100%;
		}



	#selClients ul{
		width: 160px;
		padding: 0 20px;
		display: table;
		clear: none;
		float: left;
	}

		#selClients ul li{
			width: initial;
			text-align: left;
			font-size: 16px;
			margin-top: 12px;
		}

		#selClients ul li:nth-child(odd){
			float: none;
			text-align: left;
		}

		#selClients ul li:nth-child(even){
			float: none;
			text-align: left;
		}

/************************************************************************/
/***********************//* PAGE SERVICE *//****************************/
/****************************  768px  *********************************/
/*********************  SECTION PRESENTATION  ************************/
/********************************************************************/

/* // FOR ALL // */
.imgService{
	display: inline-block;
	width: 50%;
	max-width: 560px;
	height: 360px;
}
/* // END FOR ALL // */


/* // SECTION AVEC LA PHOTO A DROITE // */
/* SECTION SERVICE */
.serviceDroite{
	width: 90%;
	max-width: 1366px;
	margin: 0 auto;
	padding: 75px 0px;
	display: block;
}

	.serviceDroite h2{
		width: 86%;
		font-size: 70px;
	}

	.serviceDroite h4{
		font-size: 20px;
		width: 90%;
		max-width: 925px;
		margin: 60px 0 60px 7.5%;
		line-height: 1.05em;
	}

	.serviceDroite .sd_cd{
		position: relative;
		width: 35%;
		margin-left: 12.5%;
	}

		.serviceDroite .sd_cd h5{
			font-weight: 400;
			-ms-transform: rotateZ(270deg);
			-moz-transform: rotateZ(270deg);
			-webkit-transform: rotateZ(270deg);
			transform: rotateZ(270deg);
			position: absolute;
			left: -64.5%;
			top: 50px;
		}
	
			.serviceDroite .sd_cd h5::after{
				width: 53%;
				margin-top: 9px;
				margin-left: 12px;
			}
	
		.serviceDroite .sd_cd ul{
			width: 48%;
		}
	
			.serviceDroite .sd_cd ul:nth-child(even){
				margin-left: 0%;
			}
	
	
			.serviceDroite .sd_cd ul li{
				margin-top: 0px;
				margin-bottom: 12px;
				font-size: 14px;
			}

	.serviceDroite a{
		display: table;
		position: static;
		width: 100%;
		margin-bottom: 0;
		text-align: right;
		padding: 0;
	}

	.serviceDroite a:hover{
		/*letter-spacing: 1px;*/
	}


/* SECTION BRANDING */

.serviceGauche{
	width: 90%;
	max-width: 1366px;
	margin: 0 auto;
	padding: 75px 0px 0;
	display: block;
} 

	.serviceGauche h2{
		width: 93%;
		font-size: 70px;
	}

	.serviceGauche h4{
		font-size: 20px;
		width: 90%;
		max-width: 925px;
		margin: 50px 0 60px 4.3%;
		line-height: 1.2em;
	}

	.serviceGauche .sd_cg{
		position: relative;
		width: 35%;
		float: right;
		margin-right: 5.5%;
	}

		.serviceGauche .sd_cg h5{
			font-weight: 400;
			-ms-transform: rotateZ(270deg);
			-moz-transform: rotateZ(270deg);
			-webkit-transform: rotateZ(270deg);
			transform: rotateZ(270deg);
			position: absolute;
			right: -52%;
			top: 50px;
		}

		.serviceGauche .brandImg{
			margin-left: 4.5%;
		}
	
			.serviceGauche .sd_cg h5::after{;
				width: 53%;
			}
	
			.serviceGauche .sd_cg ul:nth-child(even){
				margin-left: 0%;
			}
	
			.serviceGauche .sd_cg ul li{
				margin-top: 0px;
				margin-bottom: 12px;
				font-size: 14px;
			}

	.serviceGauche a{
		text-align: left;
		margin: 0px 0 0 4.5%;
	}

	.serviceGauche a:hover{
		/*letter-spacing: 1px;*/
	}


/************************************************************************/
/**********************//* PAGE CAREERS *//*****************************/
/****************************  768px  *********************************/
/**********************  SECTION DESCRIPTION  ************************/
/********************************************************************/
#careerDescription{
	width: 85%;
	margin: 0 auto;
	padding: 60px 0px 100px 0;
}

	#careerDescription h3{
		width: 65%;
		max-width: 700px;
		font-size: 25px;
		margin: 0 auto 60px auto;
	}

	#careerDescription .descCourriel{
		border-right: 1px solid #000;
		margin: 0 auto;
	}

		#careerDescription .descCourriel h4{
			width: 80%;
			font-size: 16px;
			padding: 8px 0px;
			line-height: 1.6em;
		}

		#careerDescription .descCourriel a{
			font-size: 18px;
		}

		#careerDescription .descEmploi{
			margin: 0 auto;
		}

			#careerDescription .descEmploi h4{
				width: 80%;
				font-size: 16px;
				padding: 12px 0px;
				line-height: 1.6em;
			}

/* // SECTION CURRENT OPENINGS MONTREAL // */

.careerCity{
	padding: 30px 0px;
}

.careerCity:nth-child(even){
	border-bottom: 1px solid black;
	padding-bottom: 70px;
}

	.careerCity .poste{
		width: 80%;
		padding: 20px 0px;
		cursor:pointer;
		cursor: url(../images/main_hover.png) 7.5 1.5, auto; 
	}

	.careerCity .poste:hover h3{
		text-decoration: line-through;
	}

		.careerCity .poste h3{
			font-weight: bold;
		}

		.careerCity .poste h5{
			font-size: 14px;
			color: #000;
			margin-top: -15px;
			margin-left: 0px;
			float: right;
		}

			.careerCity .poste .posteDetail h4{
				font-size: 14px;
			}

			.careerCity .poste .posteDetail a:hover{
				font-weight: 700;
				text-decoration: line-through;
			}

/* New stuff */

#workflow .workEvent div h5 a,
#workflow .workEvent .div .h5 .softlink,
.sectionVedette .vitrine .unEvent .div .h5 .softlink{
	font-family: 'Infini', sans-serif;
	font-size: 14px;
	color: #fff;
}

.locations h4{
	font-size: 14px;
}


.nContacter{
	margin-top: 40px;
}


.serviceDroite h4 br{
	/*display: none;*/
}

.serviceGauche h4 br{
	/*display: none;*/
}


.careerCity h2{
	padding: 0px 0px 30px 0;
}

#careerDescription h2{
	margin-bottom: 40px;
}


#presentation .resume{
	padding-bottom: 35px;
}