.hiddenElement{
	display:none;
	visibility: hidden;
	height:0;
}
/* fix for long titles in vignette pictures */
.sectionVedette .vitrine .unEvent div
,#workflow .workEvent div
,.sectionVedette .vitrine .unEvent .div
,#workflow .workEvent .div{
	height:auto;
	/*min-height:55px;*/
	padding:0px 0 4% 0px;
}
.filterZone .filter{
	position: relative;
}
/**
	* HOME PAGE 
*/
#presentation .flecheScroll i.flecheBas{
	display:block;
	background-color: #FFF;
	background:url('../images/flecheblancbas.png') 50% 50% no-repeat;
	background-image: -webkit-image-set( url('../images/flecheblancbas.png') 1x, url('../images/flecheblancbas2x.png') 2x);
	background-size: 9px 56px;
	height: 56px;
	width: 9px;
	margin:0 auto 10px auto;
}
	#presentation .flecheScroll h4 {
	    color:#fff;
	}
		#presentation .flecheScroll h4:hover{
	    	font-weight: 700;
	    	letter-spacing: 0.5px;
		}


/* ARRANGEMENT POUR LA SECTION DU PARALAX DE LA PAGE D'ACCUEIL */
/**
	!!!!!!!!!!!!!!!!!!
	toutes ces section sont recalculer en JS dans /resources/js/home.js
	!!!!!!!!!!!!!!!!
*/
.sectionVedette .template1
,.sectionVedette .template2
,.sectionVedette .template3{
	height: 1000px;
	height: 45vw;
}
	.sectionVedette .template1 .unEvent .div
	,.sectionVedette .template2 .unEvent .div
	,.sectionVedette .template3 .unEvent .div{
		/*visibility: hidden;*/
		/* Theoretically for IE 8 & 9 (more valid) */
		/* ...but not required as filter works too */
		/* should come BEFORE filter */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */

		/* This works in IE 8 & 9 too */
		/* ... but also 5, 6, 7 */
		filter: alpha(opacity=0); /* IE 5-7*/

		/* Modern Browsers */
		/*opacity: 0;*/
		/*transition: opacity .6s;*/
	}
	.sectionVedette .template1 .unEvent:hover
	,.sectionVedette .template2 .unEvent:hover
	,.sectionVedette .template3 .unEvent:hover{
		cursor:pointer;
		cursor: url(../images/main_hover.png) 7.5 1.5, auto;
	}
	.sectionVedette .template1 .unEvent:hover .div
	,.sectionVedette .template2 .unEvent:hover .div
	,.sectionVedette .template3 .unEvent:hover .div{
		/*visibility: visible;*/
		/* Theoretically for IE 8 & 9 (more valid) */
		/* ...but not required as filter works too */
		/* should come BEFORE filter */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */

		/* This works in IE 8 & 9 too */
		/* ... but also 5, 6, 7 */
		filter: alpha(opacity=100); /* IE 5-7*/

		/* Modern Browsers */
		opacity: 100;
	}
@media (max-width: 1600px){
	.sectionVedette .template1
	,.sectionVedette .template2
	,.sectionVedette .template3{
		height: 870px;
		height: 45vw;
	}
}
@media (max-width: 1366px){
	.sectionVedette .template1
	,.sectionVedette .template2
	,.sectionVedette .template3{
		height: 691px;
		height: 45vw;
	}
}
@media (max-width: 1024px){
	.sectionVedette .template1
	,.sectionVedette .template2
	,.sectionVedette .template3{
		height: 517px;
		height: 45vw;
	}
}
@media (max-width: 767px){
	.sectionVedette .template1
	,.sectionVedette .template2
	,.sectionVedette .template3{
		height: auto;
	}

}

/**
	* WORK 
*/
.filterZone{
	width:66%;
}
.filterZone .filter div{
	/*min-width: 10%;*/
	width: auto;
	/*max-width: 222px;*/
	margin-right: 15px;
}
	.filterZone .filter div h4 {
	    padding: 15px 0px;
	    /*display: inline-block;*/
	    text-align: left;
	}
		span.fleche-droite{
			/*position: relative;
		    left: 14px;
		    top: 4px;*/
		    display: inline-block;
			background-color: #FFF;
			background:url('../images/fleche_droite.png') left 50% no-repeat;
			background-image: -webkit-image-set( url('../images/fleche_droite.png') 1x, url('../images/fleche_droite2x.png') 2x);
			background-size: 56px 9px;
			height: 9px;
		    width: 56px;
		    /*float: left;*/
		    margin: 0 15px 1px 0px;
		}

		span.h4-txt{
		    display: inline-block;
		}

		.filterZone .filter div ul {
			margin-left:0;
			text-align: left;
			max-width:55px;
		}
		.filterZone .filter div ul#filterType {
			text-align: left;
		}
			.filterZone .filter div ul li {
				width: auto;
				min-width: 125px;
			}

.filter div .filterList#filterType .hidden{
	display: none;
	visibility: hidden;
	height: 0;
}

.category-header{
	position: relative;
	background: #FFF;
	max-width: 1366px;
	width: 66%;
	height: 612px;
    margin: 0 auto;
}

/*@media (min-width: 1600px){
	.category-header{
		
	}
}*/
@media (max-width: 1600px){
	.category-header
	,.filterZone{
		width: 75%;
	}
	.category-header{
		height: 664px;
	}
}
@media (max-width: 1366px){
	.category-header
	,.filterZone{
		width: 90%;
	}
	.category-header{
		height: 670px;
	}
}
@media (max-width: 1124px){
	.category-header{
		height: 534px;
	}
}
@media (max-width: 1024px){
	.category-header{
		height: 476px;
	}
}
@media (max-width: 767px){
	/* ARRANGER LE MENU */
	span.fleche-droite{
		display: none;
		visibility: hidden;
		height: 1px;
	}
	.filterZone .filter div ul {
		max-width:none;
		text-align: left;
		width:100%;
	}
	.category-header{
		height: 354px;
	}
}
@media (max-width: 600px){
	.category-header{
		height: 304px;
	}
}
@media (max-width: 420px){
	.category-header{
		height: 216px;
	}
}
@media (max-width: 360px){
	.category-header{
		height: 172px;
	}
}

#workflow {
    padding: 0;
    margin: 10px auto 0;
}
#workflow .workEvent:hover {
    cursor:pointer;
    cursor: url(../images/main_hover.png) 7.5 1.5, auto;
}

.returnTop .go-top-page{
	display: inline-block;
	background-color: #FFF;
	background:url('../images/fleche_haut.png') left 50% no-repeat;
	background-image: -webkit-image-set( url('../images/fleche_haut.png') 1x, url('../images/fleche_haut2x.png') 2x);
	background-size: 9px 56px;
	height: 56px;
    width: 9px;
    cursor:pointer;
    cursor: url(../images/main_hover.png) 7.5 1.5, auto;
}

/**
	* WORK DETAIL
*/
#detailProjet #texteProjet .colDroitProjet{
	float: right;
}
#detailProjet #texteProjet .colGaucheProjet{
	max-width: 15%;
	padding-right: 5%;
}
	#detailProjet #texteProjet .colGaucheProjet p{
		width: auto;
		font-size: 12px;
		color: #454545;

	}
	#detailProjet #texteProjet .colGaucheProjet .tagProjet{
		width:100%;
	}
		#detailProjet #texteProjet .colGaucheProjet .tagProjet a{
			display: block;
			width:100%;
			padding-bottom: 16px;
			font-size: 14px;
			text-transform: lowercase;
		}
			#detailProjet #texteProjet .colGaucheProjet .tagProjet a:hover{
				text-decoration: line-through;
				font-weight: 600;
				letter-spacing: 1px;
			}
#zonePortfolio>div.imgGrande{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	min-width: 100%;
    max-width: 100%;
	float:left;
}
	#zonePortfolio>div.imgGrande iframe{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		
	}
	.relatedProject .troisProjet .unRelProject .image a{
		display: block;
		height: 100%;
    	width: 100%;
	}

@media (max-width: 810px){
	#zonePortfolio{
		width: 100%;
	}
}
@media (max-width: 772px){
	#detailProjet #texteProjet .colDroitProjet{
		float: none;
		margin:15px 0 0 0;
	}
	#detailProjet #texteProjet .colGaucheProjet{
		width: 90%;
		margin: 0 auto;
		max-width: none;
		padding: 10px;
	}
		#detailProjet #texteProjet .colGaucheProjet p{
			width: 48%;
			margin: 10px 0 0 0;
			max-width: none;
			padding: 0px;
			float:right;
		}
	#detailProjet #texteProjet .colGaucheProjet .tagProjet{
		width: 50%;
		margin:0;
		padding:0;
		float:left;
	}
		#detailProjet #texteProjet .colGaucheProjet .tagProjet a{
			padding:10px 0 10px 0;
			margin:0;
			background-color: #FFF;
		}
.relatedProject .unRelProject{
	width: 33%;
	margin:15px 0 0 0;
	padding:0;
	float:left;
	text-align: center;
}
	/*#detailProjet #texteProjet .colDroitProjet p{
		width: 100%;
	}*/
}
/*@media (max-width: 620px){
	#zonePortfolio .imgPortfolio.even
	,#zonePortfolio .imgPortfolio.odd {
		width: 100%;
	}
}*/
@media (max-width: 620px){
	.navProjet h3{
		width:85px;
	}
	.relatedProject{
		width: 100%;
	}
		.relatedProject .unRelProject{
			width: 100%;
			margin:15px 0 25px 0 ;
			/*padding:0;*/
			float: none;
			max-width:none;
		}
}
@media (max-width: 420px){
	/*#zonePortfolio .imgPortfolio.even, #zonePortfolio .imgPortfolio.odd{
		width :100%;
	}*/
}
@media (max-width: 360px){
	/*#zonePortfolio .imgPortfolio.even, #zonePortfolio .imgPortfolio.odd{
		width :100%;
	}*/
}
.returnTop{
	border: none;
}
.relatedProject{
	border: none;
}
.navProjet{
	border-bottom: 1px solid #bfbfbf;
}
.unRelProject .image{
	cursor:pointer;
	cursor: url(../images/main_hover.png) 7.5 1.5, auto;
}
.clearBoth{
	clear: both;
}
/**
	* CAREER
*/

.careerCity:nth-child(even){
	border: none;
}
	.careerCity .poste i.fleche{
		display: inline-block;
		background-color: #FFF;
		background:url('../images/petite_fleche_droit.png') left 50% no-repeat;
		background-image: -webkit-image-set( url('../images/petite_fleche_droit.png') 1x, url('../images/petite_fleche_droit2x.png') 2x);
		background-size:29px 12px;
		height: 12px;
	    width: 43px;
	    cursor:pointer;
	    cursor: url(../images/main_hover.png) 7.5 1.5, auto;
	    transition: transform .6s;
	}
	.careerCity .poste .posteDetail{
		width: 60%;
	}
		.careerCity .poste .posteDetail h4
		,.careerCity .poste .posteDetail a{
			margin-left: 43px;
		}

@media (max-width: 768px){
	.careerCity .poste h5{
		margin-left: 43px;
	}
	.careerCity .poste .posteDetail{
		width: 90%;
	}
}

/**
	* AGENCY 
*/
#troisImage{
	position:static;
}
#approach .basApproach .basApproachColGauche h4{
	height: auto;
}


/**
	* FOOTER 
*/

footer .logo-footer a {
    display: block;
    color: transparent;
}

@media (min-width: 768px){

	.sectionVedette .vitrine .unEvent div
	,#workflow .workEvent div
	,.sectionVedette .vitrine .unEvent .div
	,#workflow .workEvent .div{
		padding:0px 0 8% 0px;
	}

	.sectionVedette .vitrine .unEvent .topsub{
		padding:8% 0 0 0px;
	}

	/*.footer-wrapper{
		width: 100%;
	}*/
	footer{
		width: 85%;
		border-top: #bfbfbf 1px solid;
		margin-left: 7.5%;
		padding: 70px 0px 90px;	
	}
	footer img{
		display:none;
		visibility: hidden;
		height:1px;
	}
	footer .logo-footer{
		display: block;
	    float: left;
	    height: 100%;
	    width: 16.5%;
	    font-size: 1.5em;
	    text-align: left;
	    line-height: 34px;
	    font-weight: 700;
	    /*margin-left:10px;*/
	}
	footer .adresse-container{
		display: block;
	    /*float: left;*/
	    height: 120px;
	    width: 404px;
	    margin: 0 auto;

	}
		footer .adresse-container .adresse.left{
		    float: left;
		    width: auto !important;
		    /*margin-right: 90px;*/
		}
			
		footer .adresse-container .adresse.right{
		    float: right;
		    width: auto !important;
		}
			footer .adresse-container .adresse.left h3
			,footer .adresse-container .adresse.left h5
			,footer .adresse-container .adresse.right h3
			,footer .adresse-container .adresse.right h5{
			    text-align: left;
			}

			footer .adresse-container .adresse.left h5
			,footer .adresse-container .adresse.right h5{
			    font-size: 0.7em;
			}
	footer div.reseauSociaux{
		display: block;
	    float: right;
	    height: 100%;
	    width: 60px;
	    text-align: left;
	    margin-right: 90px;
	    margin-top: 0;
	}
		footer div.reseauSociaux div{
			height:24px;
		}
			footer div.reseauSociaux div a{
				/*float: right;*/
				font-size: 14px;
			}
	/*div.adresse{
		width: 85%;
		margin: 0 auto;
		padding: 20px 0 40px 0;
	}*/
}
@media (max-width: 1000px){
	footer div.reseauSociaux{
	    margin-right: 10px;
	}
}
@media (max-width: 767px){
	footer .logo-footer{
		display:none;
		visibility: hidden;
		height:1px;
	}
	footer div.reseauSociaux div{
		display:inline-block;
		border:none;
		border-top: #bfbfbf 1px solid;
		border-bottom: #bfbfbf 1px solid;
		width:20%;
	}	
	footer div.reseauSociaux{
	    margin-right: 0;
	}
}
@media (max-width: 400px){
	footer div.reseauSociaux div{
		font-size: 10px;
    	line-height: 20px; 
	}	
}