#container{
	perspective: 1px;
	-webkit-perspective: 1px;
/*	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;*/
	overflow: auto;
	overflow-x: hidden;
	width:100%;
	height:100%;
	-webkit-overflow-scrolling:touch;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:auto;
	height:auto;
}

.flecheScroll{
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 200px;
	height: 100px;
	margin-left: -100px;
}

	.flecheScroll h4,
	#presentation.presentationContact .flecheScroll h4{
		font-size: 14px;
	}
    
    .flecheScroll:hover {
		cursor:pointer;
		cursor: url(../images/main_hover.png) 7.5 1.5, auto;
    }

/**
 * GLOBAL!
 */

nav#mainMenu{
	position: absolute;
	top:0;
	left:0;
	max-width:100%;
	width:100%;
}

	ul#listeMenu{
		background-color: rgba(0, 0, 0, 0.5);
	}

	/** White logos **/

	.logoImg{
		color:transparent;
		font-size: 1px;
		width:100%;
		height:auto;
		display: block;
		background-size: 70% auto !important;
	}

	footer .logoImg{
		background-size: 100% auto !important;
	}

	span.logoImg.logo1{
		background:url(../images/logos/circologo1.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo1.png') 1x, url('../images/logos/circologo12x.png') 2x);
	}

	span.logoImg.logo2{
		background:url(../images/logos/circologo2.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo2.png') 1x, url('../images/logos/circologo22x.png') 2x);
	}

	span.logoImg.logo3{
		background:url(../images/logos/circologo3.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo3.png') 1x, url('../images/logos/circologo32x.png') 2x);
	}

	span.logoImg.logo4{
		background:url(../images/logos/circologo4.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo4.png') 1x, url('../images/logos/circologo42x.png') 2x);
	}

	span.logoImg.logo5{
		background:url(../images/logos/circologo5.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo5.png') 1x, url('../images/logos/circologo52x.png') 2x);
	}

	span.logoImg.logo6{
		background:url(../images/logos/circologo6.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo6.png') 1x, url('../images/logos/circologo62x.png') 2x);
	}

	span.logoImg.logo7{
		background:url(../images/logos/circologo7.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo7.png') 1x, url('../images/logos/circologo72x.png') 2x);
	}

	span.logoImg.logo8{
		background:url(../images/logos/circologo8.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo8.png') 1x, url('../images/logos/circologo82x.png') 2x);
	}

	span.logoImg.logo9{
		background:url(../images/logos/circologo9.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos/circologo9.png') 1x, url('../images/logos/circologo92x.png') 2x);
	}

	/** Black logos **/
	.black span.logoImg.logo1{
		background:url(../images/logos_black/circologo1.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo1.png') 1x, url('../images/logos_black/circologo12x.png') 2x);
	}

	.black span.logoImg.logo2{
		background:url(../images/logos_black/circologo2.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo2.png') 1x, url('../images/logos_black/circologo22x.png') 2x);
	}

	.black span.logoImg.logo3{
		background:url(../images/logos_black/circologo3.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo3.png') 1x, url('../images/logos_black/circologo32x.png') 2x);
	}

	.black span.logoImg.logo4{
		background:url(../images/logos_black/circologo4.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo4.png') 1x, url('../images/logos_black/circologo42x.png') 2x);
	}

	.black span.logoImg.logo5{
		background:url(../images/logos_black/circologo5.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo5.png') 1x, url('../images/logos_black/circologo52x.png') 2x);
	}

	.black span.logoImg.logo6{
		background:url(../images/logos_black/circologo6.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo6.png') 1x, url('../images/logos_black/circologo62x.png') 2x);
	}

	.black span.logoImg.logo7{
		background:url(../images/logos_black/circologo7.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo7.png') 1x, url('../images/logos_black/circologo72x.png') 2x);
	}

	.black span.logoImg.logo8{
		background:url(../images/logos_black/circologo8.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo8.png') 1x, url('../images/logos_black/circologo82x.png') 2x);
	}

	.black span.logoImg.logo9{
		background:url(../images/logos_black/circologo9.png) top left no-repeat;
		background-image: -webkit-image-set( url('../images/logos_black/circologo9.png') 1x, url('../images/logos_black/circologo92x.png') 2x);
	}

	@media (max-width: 1275px){
		footer .logo-footer{
			/*display: none;*/
		}
	}

	/** mute black/white **/

	nav#mainMenu ul#listeMenu li.mute,
	nav#mainMenu ul#listeMenu li.mute.muted:hover{
		width:32px;
		height:32px;
		margin:0;
		padding:3px 0 0 14px;
		background:url(../images/UI/muteoffwhite.png) bottom right no-repeat;
		background-image: -webkit-image-set( url('../images/UI/muteoffwhite.png') 1x, url('../images/UI/muteoffwhite2x.png') 2x);
	}

	nav#mainMenu ul#listeMenu li.mute.muted,
	nav#mainMenu ul#listeMenu li.mute:hover{
		background:url(../images/UI/muteonwhite.png) bottom right no-repeat;
		background-image: -webkit-image-set( url('../images/UI/muteonwhite.png') 1x, url('../images/UI/muteonwhite2x.png') 2x);
	}

	nav#mainMenu.black ul#listeMenu li.mute,
	nav#mainMenu.black ul#listeMenu li.mute.muted:hover{
		background:url(../images/UI/muteoffblack.png) bottom right no-repeat;
		background-image: -webkit-image-set( url('../images/UI/muteoffblack.png') 1x, url('../images/UI/muteoffblack2x.png') 2x);
	}

	nav#mainMenu.black ul#listeMenu li.mute.muted,
	nav#mainMenu.black ul#listeMenu li.mute:hover{
		background:url(../images/UI/muteonblack.png) bottom right no-repeat;
		background-image: -webkit-image-set( url('../images/UI/muteonblack.png') 1x, url('../images/UI/muteonblack2x.png') 2x);
	}



nav#mainMenu.black,
nav#mainMenu.black ul#listeMenu li a,
nav#mainMenu.black ul#listeMenu li{
	color:#000;
}

nav#mainMenu.black span.logoImg{
/*	background-color:#000;*/
}

#container #mainMenu.menuPushContent{
	position: relative;
}

#presentation{
	/*top: -106px;*/
	overflow: hidden;
	position: relative;
}

	#presentation h1,
	#presentation.presentationAgency h1,
	#presentation.presentationContact h1{
/*		width: 100%;*/
		width: auto;
		padding: 0 20px;
		font-size:5.4vw;
	}

@media (max-width: 767px){
	#presentation{
		top:0;
	}
}
.nContacter{
	background-image:url(../images/gif/contact.gif);
	background-size:auto 100%;
	background-size: cover;
	color:#FFF;
}
/*	.nContacter h3{
		color:transparent;
	}*/

	.nContacter a{
		color:inherit;
	}

#subMenu{
	display: none;
	width: 100%;
	height: 100%;
	background: black;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
	z-index: 998;

	background:url(../images/gif/menu.gif);
	background-size:100% 100%;
	background-size: cover;

/*	padding:20% 100px;
	box-sizing: border-box;*/
}

#subMenu.visible{
	display: table;
}

#subMenuBack{
	color:#FFF;
	position: absolute;
	font-family: 'Infini', sans-serif;
	top:48px;
	right:56px;
	z-index: 9999;
	font-size: 14px;
}

	#subMenuBack:hover{
		text-decoration: line-through;
		font-weight: bold;
	}

	#subMenuSub{
		display: table-cell;
		vertical-align: middle;
		width: 700px;
		/* max-width: 700px; */
		/* margin: 0 auto; */
		position: relative;
		top: 0;
		right: 20%;
		right: calc(50% - 350px);
	}


/**
 * agency
 */

#troisImage .pt1,
#troisImage .pt2,
#troisImage .pt3{
	background:transparent;
}

#troisImage .pt1 img,
#troisImage .pt2 img,
#troisImage .pt3 img{
	display: block;
	width: 100%;
}

/**
 * ligatures
 */

.glitchit span.style1,
.magicText span.style1{
	font-feature-settings: 'clig' 0;
}

.glitchit span.style2,
.magicText span.style2{
	font-feature-settings: 'clig' 0, 'titl' 1;
}

.glitchit span.style3,
.magicText span.style3{
	font-feature-settings: 'clig' 0, 'cswh' 1;
}

.glitchit span.style4,
.magicText span.style4{
	font-feature-settings: 'clig' 0, 'titl' 1, 'cswh' 1;
}

/*#detailProjet .partageProjet.fixed{
	position: fixed;
}

#detailProjet .retourProjet.fixed{
	position: fixed;
}*/

/*footer img{
	display: none;
}*/

/*
	PROJECT
 */

#zonePortfolio{
	width:90%;
	width:calc(100% - 190px);
	/*height: 100%;*/
}
@media (max-width: 810px){
	#zonePortfolio{
		width:90%;
	}
}
#zonePortfolio>div{
/*	opacity: 0;*/
}

/*Fix height?*/
#zonePortfolio>div,
#zonePortfolio>div.imgPortfolio/*,
#zonePortfolio>div.imgGrande*/{
	height:auto;
	position: relative;
} 

	#zonePortfolio>div.imgPortfolio::before{
		display: block;
		content:"";
		position: static;
		width:100%;
		padding-bottom:56%;
	}

/*#zonePortfolio>div.imgGrande{
	height: 56%;
	float:left;
}*/
	/*#zonePortfolio>div.imgGrande::before{
		display: block;
		content:"";
		position: static;
		width:100%;

	}*/
#zonePortfolio.visible>div{
	opacity: 1;
}

.animationSuported #zonePortfolio.visible>div.fadeInRight,
.animationSuported #zonePortfolio.visible>div.fadeInLeft,
.animationSuported #zonePortfolio.visible>div.fadeInDownReal{
	opacity:0;
}


#zonePortfolio .imgPortfolio.even{
	float:right;
	margin-right: 0px;
}

#zonePortfolio .imgPortfolio.odd{
	float:left;
	margin-left: 0px;
}

#detailProjet .retourProjet a{
	display: block;
}

.partageProjet{
	position: relative;
	height:70px;
	overflow: hidden;
	transition: height 0.4s 0.1s;
}

	.partageProjet:hover{
		/*height:376px;  71 x nbIcone */
		height: 426px;
		transition: height 0.4s;
	}

#detailProjet .partageProjet i{
	width:94px;
	height:70px;
	text-align: center;
	line-height: 70px;
	margin:0;
	padding:0;
}

.partageProjet ul{
	display: block;
	background:#fff;
	list-style: none;
	margin:0;
	padding:0;
}

.partageProjet ul>li{
	position: relative;
	display: block;
	width:94px;
	height:35px;
	border-top:1px solid #000;
	border-top:1px solid rgba(0,0,0,0.2);
}

.partageProjet ul>li:last-of-type{
	border-bottom:1px solid rgba(0,0,0,0.2);
}

	.partageProjet ul>li:hover{
		/*background:rgba(0,0,0,0.1);*/
		cursor:pointer;
		cursor: url(../images/main_hover.png) 7.5 1.5, auto;
	}

	.partageProjet ul>li:hover div{
		font-weight: 700;
		text-decoration: line-through;
		letter-spacing: 1px;
	}


	.partageProjet ul>li>div{
		width:100%;
		height:100%;
		height:20px;
		line-height: 10px;
		padding-top:12.5px;
		text-align: center;
		font-family: 'Infini', sans-serif;
		font-size: 14px;
	}

	#detailProjet .partageProjet ul>li>i{
		position: absolute;
		top:15px;
		width:30px;
		height:30px;
		left:32px;
		border-radius: 100%;
		color:#000;
		text-align: center;
		line-height: 30px;
		font-size: 30px;
		padding:0;
	}


/*	.partageProjet ul>li>div::before{
		content:"";
		display: block;
		position: absolute;
		width:30px;
		height:30px;
		top:15px;
		left:32px;
		border-radius: 100%;
		background:#000;
	}*/



/**
 * Services
 */

.serviceDroite{
	
}

.serviceDroite .eventImg,
.serviceGauche .brandImg{
	background-image:none;
	height:auto;
}

.serviceDroite .eventImg img,
.serviceGauche .brandImg img{
	width:100%;
	height:auto;
}

.serviceDroite .eventImg{
	float:right;
}

.serviceGauche .brandImg{
	float:left;
}

.serviceGauche a{
	position: static;
	/*margin-left: 4.5%;*/
}




/*
	WORK PAGE
 */

#workflow .workEvent{
	height:auto;
	position: relative;
	width:calc(50% - 5px);
} 

	#workflow .workEvent::before{
		display: block;
		content:"";
		position: static;
		width:100%;
		padding-bottom:56%;
	}


#workflow{
	display: none;
}

#workflow.visible{
	display: block;
}


	#workflow .workEvent.hidden{
		display: none;
	}

/*#workflow .workEvent:nth-child(even){*/
#workflow .workEvent.even{
	float: right;
}

/*#workflow .workEvent:nth-child(odd){*/
#workflow .workEvent.odd{
	float: left;
}

/*
	WHO
 */


/**
 * CONTACT PAGE
 */

.contactPage{
	width:95%;
	width:calc(100% - 70px);
	max-width:1336px;
	margin:0 auto;
	padding:35px 0 10px;
}
	
	.contactPage .locations h4{
		position: relative;
		float:left;
		width:33.4%;
		overflow: hidden;
		margin:0;
		padding:0;
	}

		.contactPage .locations h4:after{
			width:100%;
		}

		.contactPage .locations h4:before{
			position: absolute;
			top:0;
			right:0;
			width:20px;
			height:100%;
			background:#FFF;
			content:"";
			display: block;
			z-index:2;
		}


	.contactPage .deuxieme{
		width:66.6%;
		margin-top:60px;
		padding-top:60px;
		padding-bottom:80px;
	}


	.contactPage .locations .adresse{
		margin:0;
		padding:0;
		float:left;
		width:33.3%;
		text-align: left;
	}

	.contactPage .deuxieme .elem{
		float:left;
		width:50%;
		text-align: left;
	}


	.contactPage .locations .adresse h3,
	.contactPage .locations .adresse h5,
	.contactPage .locations .adresse a,
	.contactPage .deuxieme .elem h3,
	.contactPage .deuxieme .elem h5,
	.contactPage .deuxieme .elem a{
		text-align: inherit;
	}

	.contactPage .deuxieme .elem h5{
		margin-bottom: 0;
		padding-bottom: 0.3em;
		margin-top:1.0em;
		padding-top:0;
	}

	.contactPage .locations .adresse h5.tel{
		margin-top:1.3em;
		padding-top:0;
	}

#contactFollow{
	position: relative;
	width:66.6%;
	overflow: hidden;
	padding:30px 0 30px 33.4%;
}

	#contactFollow h4{
		margin:0;
		width:auto;
		padding-right:20px;
		background:#FFF;
		z-index: 1;
		position: relative;
	}

	#contactFollow div.reseauSociaux{
		width:auto;
		padding-left:20px;
		background:#FFF;
		z-index:1;
		position: relative;
		width:50%;
	}

		#contactFollow div.reseauSociaux h5{
			text-transform: none;
			text-align:left;
		}



/**
 * fullscreenCarrousel
 */

#fullscreenCarrousel{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 8;
	background: transparent;
	transition: background 0.4s
}

#fullscreenCarrousel.hidden{
	display: none;
}

	#fullscreenCarrouselClose{
		position: absolute;
		top:-100px;
		right:0;
		width:100px;
		height:100px;

/*		background: url(../images/fleche_gauche.png) 50% 50% no-repeat;*/
		z-index: 11;

		text-align: center;
		line-height: 100px;

		transition:background 0.4s, top 0.4s;
	}


	#fullscreenCarrouselPrev{
		position: absolute;
		top:0;
		left:-100px;
		width:100px;
		height:100%;

		background: url(../images/fleche_gauche.png) 50% 50% no-repeat;
		z-index: 10;

		transition:background 0.4s, left 0.4s;
	}

	#fullscreenCarrouselNext{
		position: absolute;
		top:0;
		right:-100px;
		width:100px;
		height:100%;

		background: url(../images/fleche_droite.png) 50% 50% no-repeat;
		z-index: 10;

		transition:background 0.4s, right 0.4s;
	}

	#fullscreenCarrouselPrev:hover,
	#fullscreenCarrouselNext:hover,
	#fullscreenCarrouselClose:hover{
		background-color:#FFF;
		/*background-color:rgba(255,255,255,0.8);*/
		cursor:pointer;
		cursor: url(../images/main_hover.png) 7.5 1.5, auto;
	}

	#fullscreenCarrouselClose:hover{
		text-decoration: line-through;
		font-weight: 700;
	}


	#fullscreenCarrouselImage{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index: 9;
		overflow: hidden;
	}

		#fullscreenCarrouselImage .img{
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size:80% auto;
			background-size: calc(100% - 200px) auto;
			display: block;
			position: absolute;
			width:100%;
			height:100%;
			left:100%;
			top:-100%;

			transition:top 0.5s, left 0.4s;
		}

		#fullscreenCarrouselImage .img.next{
			left:100%;
		}

		#fullscreenCarrouselImage .img.cur{
			left:0;
		}

		#fullscreenCarrouselImage .img.prev{
			left:-100%;
		}

			#fullscreenCarrouselImage.height .img{
				background-size:auto 80%;
			}


@media (min-width: 1450px, min-height: 812px){
	#fullscreenCarrouselImage .img,
	#fullscreenCarrouselImage.height .img{
		background-size:1160px 650px;
	}
}

#fullscreenCarrousel.animate{
	background: #FFF;
	background:rgba(255,255,255,0.9);
}

	#fullscreenCarrousel.animate #fullscreenCarrouselPrev{
		left:0;
	}

	#fullscreenCarrousel.animate #fullscreenCarrouselNext{
		right:0;
	}

	#fullscreenCarrousel.animate #fullscreenCarrouselImage .img{
		top:0;
	} 

	#fullscreenCarrousel.animate #fullscreenCarrouselClose{
		top:0;
	}




/**
 * fix line-height everywhere
 */

#who .whoRanger a{
	margin-top: 40px;
} 

.propos .descriptionAgence p,
#detailProjet #texteProjet .colDroitProjet{
	line-height: 1.6em;
}

.resume h5,
#presentation.presentationAgency h6,
#who .whoRanger h4,
#approach .hautApproach h4,
#approach .basApproach .basApproachColGauche h4{
	line-height: 1.5em;
}

#who h3,
#approach h3,
#careerDescription h3,
#careerDescription .descCourriel h4,
#careerDescription .descEmploi h4,
.careerCity .poste .posteDetail h4{
	line-height: 1.5em;
}

.serviceDroite h4,
.serviceGauche h4{
	line-height: 1.5em;
}

#detailProjet #texteProjet .colGaucheProjet{
	line-height: 1.1em;
}







@media (max-width: 767px){
	.contactPage .locations h4,
	.contactPage .locations .adresse,
	.contactPage .deuxieme,
	.contactPage .deuxieme .elem{
		width:100%;
		float:none;
	}

	.contactPage .locations .adresse,
	.contactPage .deuxieme .elem{
		padding-top:30px;
	}

	.contactPage .deuxieme{
		padding-top:0;
		margin-top:30px;
		margin-bottom:30px;
		padding-bottom:0;
	}

	#contactFollow{
		width:100%;
		border-top:1px solid black;
		padding-left:0;
	}

		#contactFollow::before{
			width:100%;
		}

		#contactFollow h4{
			/*float:left;*/
			width: 100%;
			float: none;
			text-align: left;
			font-size: 16px;
			padding-bottom:30px;
		}

		#contactFollow div.reseauSociaux{
			width:100%;
			margin:0;
			padding:0;
			text-align: center;
		}

		#contactFollow div.reseauSociaux h5{
			text-align: center;
		}


/*		#contactFollow div.reseauSociaux{
			float:right;
			width:auto;
			margin-top:0;
			padding-top:0;
		}*/
}



@media (min-width: 475px){

}

@media (max-width: 768px){
	.partageProjet{
		display: none;
	}

	#zonePortfolio{
		width:100%;
	}

	#zonePortfolio .imgGrande{
		width:100%;
	}
	#zonePortfolio .imgPortfolio.even,
	#zonePortfolio .imgPortfolio.odd{
		width:calc(50% - 5px);
	}
}
@media (max-width: 620px){
	#zonePortfolio .imgPortfolio.even
	,#zonePortfolio .imgPortfolio.odd
	,#zonePortfolio .imgGrande {
		width: 100%;
		margin:5px 0;
	}
}
@media (min-width: 1024px){

}

@media (min-width: 1366px){

}

@media (min-width: 1600px){

}



#presentation, #presentation *{
	transform: translateZ(0) scale(1);
}