/* /////////////////// T O P  B A N N E R //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
	
	/* Dans header */
	.banner-display{top: 40px;}
	.banner-display-home{margin-top: 159px;}
	.promo_top-banner {
		width: 100%;
		top: 0;
		z-index: 1000;
		background: #291f1d;
		font-size: 0.99em;
		font-family: "ClanOTExtdThin", Verdana, sans-serif;
		color:#fff;
		padding: 11px 0;
		text-align: center;
		letter-spacing: 4px;
		font-weight: bold;
		text-transform: uppercase;
	}
	.promo_top-banner a {
		text-decoration: none;
		display: block;
		text-align: center;
		font-size: 12px;
	}
	.header-container.active-top-banner-promo {
		top: 36px !important;
	}
	@media screen and (max-width:680px) {
		.header-container.active-top-banner-promo {
			top: 0 !important;
		}
	}
	.main-container.active-top-banner-promo {
		margin-top: 156px !important;
	}
	@media screen and (max-width: 1024px){
		.main-container.active-top-banner-promo {
			margin-top: 121px !important;
		}
	}
	@media screen and (max-width:780px) {
		.main-container.active-top-banner-promo {
			margin-top: 121px !important;
		}
	}
	@media screen and (max-width: 680px) {
		.main-container.active-top-banner-promo {
			margin-top: 0 !important;
		}
	}

	/* .ban-cont { display: inline-block; }	 */

	/*#promo_top-container h3{
		width: 100%;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
		text-transform: inherit;
	}*/
	.promo_top-banner .ban { font-size: 0.99em; font-weight: normal; font-family: "ClanOTBook",Verdana,sans-serif; color:#fff; }
	.promo_top-banner strong { color: #ae8736; }
	.promo_top-banner .respons { display: inherit; }
	.promo_top-banner .cta { font-size: 1.5em; font-family: "ClanOTBook",Verdana,sans-serif; color: #fff; vertical-align: middle; }

	/* #promo_top-container sup { font-size: 50%; top: -4px; } */
	/*  #promo_top-container strong em { font-style: normal; font-size: 160%; top: 2px; position: relative; } */	
	
	/* St-Valentin */
	/* #promo_top-container .heart { color:white; font-family: verdana; font-size: 80% !important; position: relative; top: 1px; } */	
	
	
	/* /////////////////// T O P  B A N N E R  R E S P O N S I V E ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

	/*----------------------------------------------------------------------------------------*/	
	@media screen and (max-width:980px) {
		.page .header-container:after{width: 100%;}
		.ban-close{background-color: #F3F0E9;height: 48px;width: 48px;}
		.ban-close span{cursor: pointer;width: 25px;height: 25px;}
	}
	@media screen and (max-width:1024px) {
		.banner-display-home{margin-top: 124px;}
		/*#promo_top-container h3 { top:45%; line-height: 0px; }	*/
	}
	/* -------------- Disparition menu ---------------------------------------------- */		
	@media screen and (max-width:940px) {
		.banner-display-home{margin-top: 124px;}
		/*#promo_top-container h3 { top:45%; line-height: 0px; }	*/
	}
	
	/* -------------- 768px = 40% des ouvertures sur mobiles - Break Main home à 780px */			
	@media screen and (max-width:780px) {	
	}		

	/* -------------- Chgt HP + search -------------------------------------------- */		
	@media screen and (max-width:680px) {
		.promo_top-banner{position: relative;}
		.banner-display{top: 0px;}
		.banner-display-home{margin-top: 0px;}
	}
	
	/*----------------------------------------------------------------------------------------*/		
	@media screen and (max-width:450px) {	
		#top-pop{top: 5%; right: 0%; left: 50%; height: auto; width: 90%; margin-left: -45%;max-width: inherit;}	
		/* #promo_top-container .ban { font-size: 44% !important; } */
		/*#promo_top-container h3 { line-height: 0px; }		*/

		.promo_top-banner.de .respons{ display: none;}
		.ban-close {
			top: -16px !important;
			right: -12px !important;
		}
	}	
	
		
	/*----------------------------------------------------------------------------------------*/		
	@media screen and (max-width:400px) {
		#promo_top-container .smart { display: none; }
		.promo_top-banner .respons{ display: none;}

	}
		
	/*----------------------------------------------------------------------------------------*/		
	@media screen and (max-width:380px) {

	}
	/* -------------- 20% des ouvertures sur mobiles ---------------------------- */
	@media screen and (max-width:320px) {					
	}	
	
	
	
/* /////////////////// T O P  B A N N E R  P O P - U P  P R O M O T I O N ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
	
	#top-overlay{background:black;}
	
	a#promo-open { cursor: pointer; }
	#top-pop { position: fixed; display: none; top: 15%; right: 0%; left: 50%; z-index: 2201; max-width: 400px; margin-left: -200px; border: 1px solid #dad9d7; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
	#top-pop img { width: 100%; }
	#top-pop .ban-close{ position: absolute; top: 0px; right: 0px; display: inline-block; float: right; height: 50px; width: 50px; background-color: transparent; }
	#top-pop .ban-close span{
		transform: translate(-50%,-50%) rotateZ(45deg);
			-webkit-transform: translateX(-50%) rotateZ(45deg) ;
			-o-transform: translateX(-50%) rotateZ(45deg) ;
			-ms-transform: translateX(-50%) rotateZ(45deg) ;
			-moz-transform: translateX(-50%) rotateZ(45deg) ;
	}
	#top-pop:hover .ban-close span{
		transform: translate(-50%,-50%) rotateZ(45deg) scale(1.25);
			-webkit-transform: translateX(-50%) rotateZ(45deg) scale(1.25);
			-o-transform: translateX(-50%) rotateZ(45deg) scale(1.25);
			-ms-transform: translateX(-50%) rotateZ(45deg) scale(1.25);
			-moz-transform: translateX(-50%) rotateZ(45deg) scale(1.25);
	}	
	
	
	/* ------------------- P O P  U P ------------------- */	
	
	.ban-close{
		position: relative;
		display: inline-block;
		float: right;
		height: 50px;
		width: 50px;
		background-color: #EEE9E6;
		border: 0px;
	}
	
	.ban-close span{
		width: 35px;
		height: 35px;
		border-radius: 50%;

		background-color: white;
		display: block;
		position: absolute;

		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);		
		transform-origin: 50% 50%;
			-webkit-transition: all 0.2s ease-out;
			-moz-transition: all 0.2s ease-out;
			-o-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;

		cursor: pointer;
	}

	.ban-close span em{
		display: block;
		position: absolute;
		width: 1px;
		height: 14px;
		background-color: #ae8736;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);	
	}

	.ban-close span em:after{
		content: "";
		display: block;
		position: absolute;
		width: 14px;
		height: 1px;
		background-color: #ae8736;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
	}

	#promo_top-container:hover .ban-close span{
		transform: translate(-50%,-50%) scale(1.25);
			-webkit-transform: translate(-50%, -50%) scale(1.25);
			-o-transform: translate(-50%, -50%) scale(1.25);
			-ms-transform: translate(-50%, -50%) scale(1.25);
			-moz-transform: translate(-50%, -50%) scale(1.25);
	}	

	
	#top-pop .ban-close span {
		transform: translate(-50%,-50%) rotateZ(45deg) ;
			-webkit-transform: translateX(-50%) rotateZ(45deg) ;
			-o-transform: translateX(-50%) rotateZ(45deg) ;
			-ms-transform: translateX(-50%) rotateZ(45deg) ;
			-moz-transform: translateX(-50%) rotateZ(45deg) ;
	}
	#top-pop:hover .ban-close span {
		transform: translate(-50%,-50%) rotateZ(45deg) scale(1.25);
			-webkit-transform: translateX(-50%) rotateZ(45deg) scale(1.25);
			-o-transform: translateX(-50%) rotateZ(45deg) scale(1.25);
			-ms-transform: translateX(-50%) rotateZ(45deg) scale(1.25);
			-moz-transform: translateX(-50%) rotateZ(45deg) scale(1.25);		
	}