/* -----------
PAGE PRODUIT
--------------*/
/*Box filtre*/
.box-filtre{}
	.box-filtre .box-titre{
		padding: 0 15px;
		display: none;
	}

	.box-filtre .row{
		clear: none;
		float: left;
		padding: 0 15px;
		width: 33.33%;
	}

	/*.box-filtre fieldset .row::before{
		color: #e30613;
		display: block;
		width: 100%;
	}
	.box-filtre fieldset .row:nth-child(4)::before{
		content:"Ce que nous faisons : ";
	}

	.box-filtre fieldset .row:nth-child(5)::before{
		content:"Comment nous le faisons : ";
	}

	.box-filtre fieldset .row:nth-child(6)::before{
		content:"Pour qui : ";
	}*/


	.box-filtre .row select,
	.box-filtre .row label{
		width: 100%;
		background: #e6e6e6;
		border: none;
	}

	.box-filtre #reinitid,
	.box-filtre .row label{
		display: none;
	}

/*Références*/



	/*Filtre*/

	#wrapper .filter .filter-n1 ul li::before{
		display: none;
	}
	#wrapper .filter .filter-n1 ul li{
		padding: 0;
		display: inline-block;
		vertical-align: middle;
		width: 19.75%;
	}
	#wrapper .filter .filter-n1 ul li a{
		background: #e6e6e6;
		cursor: pointer;
		display: inline-block;
		font-size: 0.9rem;
		margin:  0 5px 0 0;
		height: 120px;
		padding: 8px 10px;
		width: 100%;
		text-align: center;
		line-height: 1;
	}
		#wrapper .filter .filter-n1 ul li a::before{
			background:url(/images/charte/sprite.png) no-repeat 0 -300px / 300px auto;
			display: block;
			content:"";
			height: 75px;
			margin:0 auto;
			width: 50px;
		}

			/*Batiment*/
			#wrapper .filter .filter-n1 ul li.batiment a::before{
				background-position: -125px -300px;
				width: 75px;
			}
			#wrapper .filter .filter-n1 ul li.batiment a.active::before,
			#wrapper .filter .filter-n1 ul li.batiment:hover a::before{
				background-position: -125px -375px;
				width: 75px;
			}

			/*Developpement immobilier*/
			#wrapper .filter .filter-n1 ul li.developpementimmobilier a::before{
				background-position: -250px -300px;
			}

			#wrapper .filter .filter-n1 ul li.developpementimmobilier a.active::before,
			#wrapper .filter .filter-n1 ul li.developpementimmobilier:hover a::before{
				background-position: -250px -375px;
			}

			/*Ouvrage d'art*/
			#wrapper .filter .filter-n1 ul li.ouvragesdeartetgeniecivil a::before{
				background-position: -50px -300px;
				width: 75px;
			}
			#wrapper .filter .filter-n1 ul li.ouvragesdeartetgeniecivil a.active::before,
			#wrapper .filter .filter-n1 ul li.ouvragesdeartetgeniecivil):hover a::before{
				background-position: -50px -375px;
			}

			/*Travaux maritimes*/
			#wrapper .filter .filter-n1 ul li.travauxmaritimesetfluviaux-travauxsous-marin a::before{
				background-position: 0 -300px;
			}
			#wrapper .filter .filter-n1 ul li.travauxmaritimesetfluviaux-travauxsous-marin a.active::before,
			#wrapper .filter .filter-n1 ul li.travauxmaritimesetfluviaux-travauxsous-marin:hover a::before{
				background-position: 0 -375px;
			}


			/*Travaux speciaux*/
			#wrapper .filter .filter-n1 ul li:nth-child(5) a::before{
				background-position: -200px -300px;
			}
			#wrapper .filter .filter-n1 ul li:nth-child(5) a.active::before,
			#wrapper .filter .filter-n1 ul li:nth-child(5):hover a::before{
				background-position: -200px -375px;
			}






		#wrapper .filter .filter-n1 ul li a.active,
		#wrapper .filter .filter-n1 ul li a:hover{
			background: #3d3939;
			color: #fff;
		}
	/*Résumé*/

	.shortProductReference{
		height: 190px;
		overflow: hidden;
		margin-bottom: 30px;
		position: relative;
	}
		.shortProductReference .short_product_container{
			background: #fff;
			position: relative;
		}
		.shortProductReference .pictureContainer{
			background: url(/images/charte/groupe-etpo-logo.png) no-repeat center center / 30% auto;
		}
		.shortProductReference .pictureContainer,
		.shortProductReference .pictureContainer .picture{
			height: 190px;
			width: 100%;
		}
		.shortProductReference .pictureContainer .picture img{
			height: 190px;
			font-family: 'object-fit: cover';
			object-fit: cover;
			width: 100%;
		}
		.shortProductReference a{
			text-decoration: none;
		}
		.shortProductReference .info{
			position: absolute;
			bottom:0;
			line-height: 100%;
			padding: 10px;
		    -webkit-transition: .6s ease-in;
		    -moz-transition: .6s ease-in;
		    -o-transition: .6s ease-in;
		    transition: .6s ease-in;
			width: 100%;
		}
		.shortProductReference:hover .info{
			bottom:-100px;
			opacity: 0;
		}
			.shortProductReference h2{
				font-size: 1em;
				font-family: 'exo2r', sans-serif;
				line-height: 100%;
				margin:0;
			}
			.shortProductReference .metier{
    			display: block;
				font-size: 0.9em;
				max-width: 80%;
    		}
			#wrapper .metier ul li::before{
				display: none;
			}	
			#wrapper #product .metier{
				padding-left: 20px !important;
				padding-right: 20px !important;
			}

			#wrapper #product .metier ul li,
			#wrapper #product .metier ul{
				display: inline-block;
				vertical-align:middle;
			}
			#wrapper  .metier ul li,
			#wrapper .metier ul{
				margin:0;
				padding: 0;
			}
	/*Détail*/
	#product.reference{}
		#product.reference .productPictures .zoom{
			background-color: rgba(0,0,0,0.5);
			font-family: 'exo2b', sans-serif;
			position: absolute;
			left: 0;
			height: 440px;
			line-height: 440px;
			text-transform: uppercase;
		    -webkit-transition: .6s ease-in;
		    -moz-transition: .6s ease-in;
		    -o-transition: .6s ease-in;
		    transition: .6s ease-in;
			top:0;
			width: 100%;
		}
		#product.reference .productPictures .zoom:hover{
			background-color: rgba(0,0,0,0);
			padding-top: 440px;
		}
			#product.reference .productPictures .zoom .ico{
				background-position: -117px -66px;
				display: block;
				height: 67px;
				margin:0 auto 20px;
				width: 67px;
			}
		#product.reference .productPictures,
		#product.reference #productPicture{
			height: 100%;
		}
		#product.reference #productPicture{
			display: block;
			height: 100%;
			width: 100%;
		}
			#product.reference #productPicture img{
				font-family: 'object-fit: cover';
				object-fit: cover;
				height: 100%;
				width: 100%;
			}
		#product.reference h2{
			margin: 0;
		}
		#product.reference .blanc h2{
			color:#fff;
		}


		#product.reference .metier h2{
			font-size: 1.4em;
		}
			#wrapper #product.reference .metier ul li{
				margin:0;
				padding: 0;
			}
			#wrapper #product.reference .metier ul li::before{
				display: none;
			}
		h2.little{
			font-size: 1.2em;
		}
		.Line1{
			margin-top: 30px;
		}
		.Line3,
		.Line2{
			margin-bottom:50px;
		}

		#product.reference .info{
			margin-bottom: 30px;
		}




		/*Savoir Faire*/
		#product.reference .savoirFaire{
/*			line-height: inherit;
			padding:50px 15px !important;
*/		}

		#product.reference .savoirFaire h2{
			margin-bottom: 20px;
		}
		#product.reference .savoirFaire li {
			font-size: 1.2em;
		}
		#product.reference .savoirFaire li::before{
			background-position: -80px -203px;
		}
		#product.reference .savoirFaire ul, 
		#product.reference .savoirFaire li{
			margin:0;
		}
		#product.reference .savoirFaire li ul {
			display: inline-block;
			vertical-align: middle;
			margin:0;
			line-height: 100%;
		}
		#product.reference .savoirFaire li ul li{
			background: none;
			display: inline;
			font-size:1em;
			line-height: 100%;
			margin:0;
			padding: 0;
			vertical-align: middle;
		}
		#product.reference .savoirFaire li ul li::before{
			background: none;
			display: inline;
			margin:0 2px;
			vertical-align: middle;
			content:"/";
		}
			#product.reference .savoirFaire li ul li:first-child::before{
				display: none;
			}

		/*Enjeux*/

		.enjeux .ico{
			background-position: -75px -450px;
			height: 50px;
			width: 50px
		}

		/*Lieu de construction*/
		.lieu{}
			.lieu .ico{
				background-position:0 -200px; 
				display: block;
				margin:0 auto 20px;
				height: 100px;	
				width: 75px;
			}

		/*Le chantier en chiffre*/
		#product.reference .chiffres ol{
			counter-reset: numList;
			margin:0;
		}
		#product.reference .chiffres ol li{
			list-style: none;
			margin-top: 20px;
		}
		#product.reference .chiffres ol li::before{
			counter-increment: numList;
		    content: counter(numList);
			background:#e2001a;
			color:#fff;
			display: block;
			margin-right: 10px;
			float: left;
			height: 20px;
			line-height: 20px;
			width: 20px;
		    text-align: center;
		}


		/*Visuels*/

		.visuels{
			clear: both;
			position: relative;
			overflow: hidden;
		}
		.visuels .slick-slide{
			position: relative;
			height: 440px !important;
		}
		.visuels img{
			font-family: 'object-fit: cover';
			object-fit: cover;
			height: 440px;
			width: 100%;
		}
		.visuels a::before{
			display: block;
			width: 100%;
			content:"VOIR LE DIAPORAMA";
			color:#fff;
			background-color: rgba(0,0,0,0.5);
			background-image: url(/images/charte/more.png);
			background-repeat: no-repeat;
			background-position: center 35%;
			background-size: 70px auto;
			font-family: 'exo2b', sans-serif;
			position: absolute;
			left: 0;
			height:100%;
			line-height: 440px;
			text-transform: uppercase;
		    -webkit-transition: .6s ease-in;
		    -moz-transition: .6s ease-in;
		    -o-transition: .6s ease-in;
		    transition: .6s ease-in;
			top:0;
			z-index: 10;
			width: 100%;

		}
		/*Pager*/
		#product .pager{
			margin: 50px 0;
		}
		.floatleft{
			float: left;
		}
		.floatright{
			float: right;
		}
		#product .pager .ico{
			display: inline-block;
			height: 20px;
			vertical-align: middle;
			width: 20px;

		}
		#product .pager .floatleft .ico{
			background-position: -215px -65px;
			margin-right: 20px;
		}
		#product .pager .floatright .ico{
			background-position: -265px -65px;
			margin-left: 20px;
		}

		#product.reference .description{
			margin: 30px;
		}
		#product.reference .h2{
			color:#292929;
			font-family: 'exo2b';
			font-size: 1.6rem;
			margin-bottom: 50px;
			margin-bottom: 15px;
			text-transform: uppercase;
			text-align: left;
		}
		#product.reference .h2::before,
		#product.reference .h2::after{
			display: none;
		}

		/*marché*/
		#wrapper #product.reference .marche ul{
			margin:0;
		}

		#wrapper #product.reference .marche ul li{
			margin:0;
			padding: 0;
		}
		#wrapper #product.reference .marche ul li::before{
			display: none;
		}





.link-pdf{
	margin-top: 60px;
}
.right-item{
	border: 1px solid #c0c0c0;
	text-align: center;
	padding-top: 0;
	background-color: #fff;
	margin-bottom: 5rem;
}
.right-item h3{
	background-color: #7F7F7F;
    color: #fff;
	padding: 1rem;
	margin-top: 0;
    text-align: center;
}
.right-item p{
	padding: 20px 20px;
}
.aside-charte-document-inner a{
    padding: 10px;
    text-align: center;
    display: block;
    background: #e2001a;
    color: #fff;
    display: inline-block;
    font-family: 'exo2b', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    -moz-transition: background 0.5s linear, color 0.5s linear;
    -webkit-transition: background 0.5s linear, color 0.5s linear;
    transition: background 0.5s linear, color 0.5s linear;
    -ms-transition: background 0.5s linear, color 0.5s linear;
	-o-transition: background 0.5s linear, color 0.5s linear;
	margin-bottom: 20px;
}
.aside-charte-document a{
    padding: 10px;
    text-align: center;
	display: block;
	background: #e2001a;
    color: #fff;
    display: inline-block;
    font-family: 'exo2b', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    -moz-transition: background 0.5s linear, color 0.5s linear;
    -webkit-transition: background 0.5s linear, color 0.5s linear;
    transition: background 0.5s linear, color 0.5s linear;
}
.aside-charte-document a:hover,
.aside-charte-document-inner a:hover{
	background: #3d3939;
    color: #fff;
}
.aside-charte-document p,
.aside-charte-document-inner p{
	margin: 0;
	/* display: inline; */
	font-size: 12px;
}