/* /////////////////////////////////////////////
 *
 * APOTAMOX V3 - COMMON
 *
 * ////////////////////////////////////////// */
/* =============================================
 * WEBFONTS
 * ========================================== */ 
/* ---------------------------------------------
 * 5x5dots
 * ------------------------------------------ */
@font-face{
	font-family:'5x5dots';
	font-weight:normal;
	font-style:normal;
	src: url('../../../../include/webfonts/5x5dots/regular.woff2') format('woff2'),
         url('../../../../include/webfonts/5x5dots/regular.woff') format('woff');	
}
/* =============================================
 * SURCHARGE
 * ========================================== */
.obj_canvas-background.is-hidden{
	display:block;
	}
/* =============================================
 * BUTTONS
 * ========================================== */
/* ---------------------------------------------
 * bloc
 * ------------------------------------------ */ 
.b_bloc{
	color:#1f181f;
	display:inline-block;
	font-family:'Raleway';
	font-size:10px;
	font-weight:900;
	letter-spacing:.15em;
	line-height:2.769230em;
	min-height:2.769230em;
	padding:.769230em 2.307692em;
	position:relative;
	text-transform:uppercase;
	transition:color .25s;
	}
.b_bloc::before{
	border:2px solid #e7343f;
	bottom:0;
	content:"";
	left:0;
	position:absolute;
	right:0;
	top:0;
	z-index:2;
	}	
.b_bloc .bg{
	left:0;
	height:100%;
	overflow:hidden;
	position:absolute;
	top:0;
	width:100%;
	z-index:1;
	}
.b_bloc .bg::before{
	background:#e7343f;
	content:"";
	height:100%;
	left:-40%;
	position:absolute;
	top:0;
	-webkit-transform:skewX(-60deg);
		-ms-transform:skewX(-60deg);
			transform:skewX(-60deg);
	transition-duration:.25s;
	transition-property:-webkit-transform;
	transition-property: 		transform;
	transition-timing-function: ease-in-out;
	width:180%;
	}
.b_bloc .label{
	display:inline-block;
	line-height:1em;
	position:relative;
	z-index:3;
	}
/* hover */
.b_bloc:hover{
	color:#e7343f;
	}
.b_bloc:hover .bg::before{
	-webkit-transform:skewX(-60deg) translateX(100%);
		-ms-transform:skewX(-60deg) translateX(100%);
			transform:skewX(-60deg) translateX(100%);
	}
/* ----
 * white
 * ---- */
.b_bloc.white{
	color:#e7343f;
	}
.b_bloc.white::before{
	border-color:#fff;
	}	
.b_bloc.white .bg::before{
	background:#fff;
	}	
.b_bloc.white:hover{
	color:#fff;
	}	
/* ---------------------------------------------
 * b_close
 * ------------------------------------------ */	
.b_close{
	height:50px;
	position:absolute;
	right:0;
	text-indent:-10000px;
	top:0;
	width:50px;
	}
.b_close::before,
.b_close::after{
	background:#1f181f;
	content:"";
	height:2px;
	left:50%;
	margin:-1px 0 0 -12px;
	position:absolute;
	top:50%;
	width:24px;
	}	
.b_close::before{
	-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
			transform:rotate(45deg);
	}
.b_close::after{
	-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
			transform:rotate(-45deg);
	}		
/* ---------------------------------------------
 * b_txt
 * ------------------------------------------ */
.b_txt{
	color:#fff;
	font-size:11px;
	text-transform:uppercase;
	}	
.b_txt.small{
	color:rgba(31,23,29,.5);
	font-size:10px;
	line-height:1.538461em;
	text-transform:none;
	}
/* =============================================
 * POPIN
 * ========================================== */	
.popin-container{
	box-sizing:border-box;
	display:none;
	left:0;
	min-height:100%;
	/*padding:0 25px;*/
	position:absolute;
	text-align:center;
	top:0;
	width:100%;
	z-index:100;
	}
.popin{	
	/*margin:100px auto 65px;*/
	margin:0 auto;
	min-height:100%
	}
/* ---------------------------------------------
 * popin-form
 * ------------------------------------------ */	
.popin-form{
	background:#fff;
	color:#1f181f;
	max-width:660px;
	}
.popin-form > div{
	padding:50px 25px 35px;
	}	
.popin-form .intro{
	line-height:1.5em;
	margin:0 auto 1.4em;
	max-width:380px;
	}	
.popin-form input{
	background:transparent;
	border-bottom:1px solid #e8e7e8;
	font-size:14px;
	margin:0 0 21px;
	padding:8px 0;
	}		
.popin-form input.error {
	color:#e7343f;
	border-bottom:1px solid #e7343f;
}
.popin-form .cta-container{
	margin-top:31px;
	}	
.popin-form .b_bloc:not(:hover){
	color:#fff;
	}
.popin-form .ctn_error{
	color:#e7343f;
	font-size:12px;
	margin-top:25px;
	}	
.popin-form .b_txt{
	margin-top:25px;
	max-width:340px;
	}
/* =============================================
 * OBJECTS
 * ========================================== */
/* ---------------------------------------------
 * constellation-info
 * note nla : firefox bug on text translate + background transparent, use at least an alpha pix to avoid it
 * ------------------------------------------ */
.obj_constellation-info{
	background:url('../images/alpha-pix.gif');
	bottom:57.024793%;
	color:#e7343f;
	margin-left:14vh;
	opacity:0;
	overflow:hidden;
	position:absolute;
	left:50%;
	text-align:left;
	-webkit-transform:translateX(-100%);
		-ms-transform:translateX(-100%);
			transform:translateX(-100%);
	transition-duration:.25s;
	transition-property:-webkit-transform, opacity;		
	transition-property: 		transform, opacity;
	}
.obj_constellation-info > div{
	background:url('../images/alpha-pix.gif');
	min-height:118px;
	padding:0 0 0 78px;
	position:relative;
	-webkit-transform:translateX(100%);
		-ms-transform:translateX(100%);
			transform:translateX(100%);
	transition-duration:.25s;		
	transition-property:-webkit-transform;
	transition-property: 		transform;
	}	
.obj_constellation-info .name{
	font-family:'5x5dots';
	font-size:3.703703vh;
	margin:0 0 10px;
	padding:0 0 7px;
	position:relative;
	}	
.obj_constellation-info .name::before{
	background:currentColor;
	bottom:0;
	content:"";
	height:1px;
	left:0;
	position:absolute;
	width:34px;
	}	
.obj_constellation-info .name::after{
	background:currentColor;
	bottom:0;
	content:"";
	height:1px;
	position:absolute;
	right:100%;
	-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
			transform:rotate(-45deg);
	-webkit-transform-origin:right bottom;
		-ms-transform-origin:right bottom;
			transform-origin:right bottom;
	width:110px;
	}	
.obj_constellation-info p{
	line-height:1.1em;
	}	
/* is-visible */
.obj_constellation-info.is-visible,
.obj_constellation-info.is-visible > div{
	opacity:1;
	-webkit-transform:translate(0, 0);
		-ms-transform:translate(0, 0);
			transform:translate(0, 0);
	}
/* ---------------------------------------------
 * logo
 * ------------------------------------------ */
/* ----
 * Apotamox
 * ---- */
.main-content .obj_logo.apotamox{
	background:url('../images/logo-apotamox.png') center center no-repeat;
	background-size:100% auto;
	bottom:2.777777vh;
	height:5.925925vh;
	left:50%;
	max-height:64px;
	max-width:192px;
	position:absolute;
	text-indent:-10000px;
	-webkit-transform:translateX(-50%);
		-ms-transform:translateX(-50%);
			transform:translateX(-50%);
	width:17.777777vh;
	}
/* ----
 * Momox
 * ---- */
.obj_logo.momox{
	background:url('../images/logo-momox.png') center center no-repeat;
	background-size:0% auto;
	height:23.703703vh;
	left:50%;
	margin-left:0;
	max-height:256px;
	max-width:256px;
	position:absolute;
	text-indent:-10000px;
	top:50%;
	-webkit-transform:translate(-50%, -50%);
		-ms-transform:translate(-50%, -50%);
			transform:translate(-50%, -50%);
	transition-duration:.75s;
	transition-property:-webkit-transform, top;
	transition-property: 		transform, top;
	transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1);/* cubic-bezier(0.86, 0, 0.07, 1);*/
	width:23.703703vh;
	z-index:10;
	}
.obj_logo.momox img{
	left:0;
	height:100%;
	position:absolute;
	top:0;
	width:100%;
	}
/* states */
.obj_logo.momox.top{
	background-size:100% auto;
	top:2.777777%;
	-webkit-transform:translate(-50%, 0%);
		-ms-transform:translate(-50%, 0%);
			transform:translate(-50%, 0%);
	}
.obj_logo.momox.top img{
	display:none;
	}

.obj_logo.momox.small{
	-webkit-transform:translate(-50%, -10%) scale(.675675);
		-ms-transform:translate(-50%, -10%) scale(.675675);
			transform:translate(-50%, -10%) scale(.675675);
	-webkit-transform-origin:center top;
		-ms-transform-origin:center top;
			transform-origin:center top;
	transition-duration:8s;		
	transition-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1);
	}	
/* ---------------------------------------------
 * push
 * ------------------------------------------ */

/* ----
 * site
 * ---- */
.obj_push.site{
	bottom:-30px;
	color:#fff;
	left:0;
	position:absolute;
	text-align:center;
	-webkit-transform:translateY(100%);
		-ms-transform:translateY(100%);
			transform:translateY(100%);
	transition-duration:.75s;
	transition-property:-webkit-transform;
	transition-property: 		transform;
	transition-timing-function:cubic-bezier(.19,1.85,.56,.89);/*cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
	width:100%;
	} 
.obj_push.site > div{
	background:#e7343f;
	display:inline-block;
	padding:13px 13px 43px;
	}	
.obj_push.site > div::after{
	clear:both;
	content:"";
	display:block;
	}	
.obj_push.site p{
	float:left;
	}	
.obj_push.site p:first-child{
	font-size:14px;
	line-height:43px;
	margin:0 20px 0 0;
	min-height:43px;
	max-width:140px;
	text-align:left;
	}	
.obj_push.site p:first-child span{
	display:inline-block;
	line-height:16px;
	vertical-align:middle;
	}		
.obj_push.site .b_bloc{
	font-size:10px;
	}	
/* is-visible */
.obj_push.site.is-visible{
	-webkit-transform:translateY(0);
		-ms-transform:translateY(0);
			transform:translateY(0);
	}
/* ---------------------------------------------
 * voeux-2018
 * ------------------------------------------ */
.obj_voeux2018{
	background:#1f181f;
	color:#fff;
	height:100%;
	overflow:hidden;
	position:relative;
	text-align:center;
	-webkit-user-select:none;
		-ms-user-select:none;
			user-select:none;
	}	
.obj_voeux2018.is-ready{
	background:transparent;
	}
.obj_voeux2018.hide-cursor{
	cursor:none;
	}			
/* ----
 * screen
 * ---- */
.obj_voeux2018 .screen{
	display:none;
	left:10%;
	position:absolute;
	top:50%;
	-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
			transform:translateY(-50%);
	width:80%;
	}
.obj_voeux2018 .screen .center{
	margin:0 auto;
	max-width:35.1851851vh;
	}	
/* ----
 * screen-1
 * ---- */
.obj_voeux2018 .screen-1 figure{
	margin:0 auto 6px;
	max-width:128px;
	width:11.851851vh;
	}	
.obj_voeux2018 .screen-1 figure img{
	width:100%;
	}	


.obj_voeux2018 .screen-1 .figure{
	margin:0 auto 6px;
	height:11.851851vh;
	max-height:128px;
	position:relative;
	max-width:128px;
	width:11.851851vh;
	}
.obj_voeux2018 .screen-1 .figure canvas{
	height:200%;
	left:50%;
	position:absolute;
	top:50%;
	-webkit-transform:translate(-50%, -50%);
		-ms-transform:translate(-50%, -50%);
			transform:translate(-50%, -50%);
	width:200%;
	}	

.obj_voeux2018 .screen-1 .txt{
	color:#e7343f;
	line-height:1.333em;
	margin-bottom:.766666em;
	}	
.obj_voeux2018 .screen-1 .txt strong{
	font-weight:900;
	}	
/* ----
 * screen-2
 * ---- */
.obj_voeux2018 .screen-2 .txt{
	color:#e7343f;
	font-size:32px;
	font-weight:900;
	}	
/* ----
 * screen-2-bis
 * ---- */
.obj_voeux2018 .screen-2-bis .txt{
	color:#e7343f;
	font-size:2.1296296vh;
	line-height:1.086956em;
	text-shadow:0 0 15px rgba(31, 23, 29, 1);
	}		
/* ----
 * screen-3
 * ---- */
.obj_voeux2018 .screen-3{
	height:100%;
	left:0;
	width:100%;
	}
/* ----
 * screen-4
 * ---- */
.obj_voeux2018 .screen-4{
	top:53%;
	-webkit-transform:none;
		-ms-transform:none;
			transform:none;
	}		
.obj_voeux2018 .screen-4 .txt strong{
	font-size:32px;
	font-weight:900;
	}
/* ----
 * screen-5
 * ---- */
.obj_voeux2018 .screen-5{
	top:55%;
	-webkit-transform:none;
		-ms-transform:none;
			transform:none;
	}
.obj_voeux2018 .screen-5 p{
	margin:0 auto;
	max-width:500px;
	} 
.obj_voeux2018 .screen-5 .txt{
	line-height:1.416666em;
	margin-bottom:1.25em;
	}			
.obj_voeux2018 .screen-5 .b_bloc{
	margin-bottom:1.9230769em;
	}	
/* ----
 * screen-6
 * ---- */	
.obj_voeux2018 .screen-6 .message{
	display:none;
	}
.obj_voeux2018 .screen-6 .message .txt{
	font-size:1.851851vh;
	line-height:1.5em;
	margin-bottom:1.1em;
	}
/* message-1 */	
.obj_voeux2018 .screen-6[data-show-message="1"] .message-1{
	display:block;
	}
/* message-2 */	
.obj_voeux2018 .screen-6[data-show-message="2"] .message-2{
	display:block;
	margin:5.555555vh 0 28px;
	}		
.obj_voeux2018 .screen-6 .message-2 .b_txt{
	opacity:.5;
	transition: opacity .25s;
	}
.obj_voeux2018 .screen-6 .message-2 .b_txt:hover{
	opacity:1
	}	

.obj_voeux2018 .screen-6 .center > .txt{
	color:#e7343f;
	font-size:4.6296296vh;
	font-weight:900;
	line-height:1em;
	} 
/* =============================================
 * MEDIA QUERIES
 * ========================================== */
/* ---------------------------------------------
 * orientation portrait
 * ------------------------------------------ */
@media screen and (orientation:portrait){

	.obj_constellation-info{
		bottom:auto;
		left:0;
		margin:0;
		text-align:center;
		top:68.247422%;
		-webkit-transform:translateY(-100%);
			-ms-transform:translateY(-100%);
				transform:translateY(-100%);
		width:100%;
		}
	.obj_constellation-info > div{
		padding:0;
		-webkit-transform:translateY(100%);
			-ms-transform:translateY(100%);
				transform:translateY(100%);
		}	
	
	.obj_constellation-info .name{margin:0 0 10px;padding:29px 0 0 0}
	.obj_constellation-info .name::before{bottom:auto;height:20px;left:50%;top:0;width:1px;}
	.obj_constellation-info .name::after{display:none;}

}
/* ---------------------------------------------
 * max width 
 * ------------------------------------------ */
@media screen and (max-width:661px){
	html.popin-open, 
	html.popin-open body{
		overflow:auto;
		}
}
/* ---------------------------------------------
 * min width 
 * ------------------------------------------ */
@media screen and (min-width:360px){
	.obj_push.site > div{padding-left:30px;padding-right:30px;}
}

@media screen and (min-width:660px){
	.popin-container{height:100%;line-height:100vh;min-height:0;overflow:auto}
	.popin{display:inline-block;line-height:normal;margin-bottom:100px;margin-top:100px;min-height:0;vertical-align:middle;width:660px}
	.popin-form > div{padding:58px 14.2424242% 35px;}
	.popin-form .double::after{clear:both;content:"";display:block;}	
	.popin-form .double input{float:left;}
	.popin-form .double input + input{float:right;}	
	.popin-form .id input{width:46.218487%;}
	.popin-form .address input:first-child{width:112px;}
	.popin-form .address input:last-child{width:calc((100% - 112px) * .890109);}
}

@media screen and (min-width:768px) and (orientation:portrait), screen and (min-width:1025px){
	.b_bloc{font-size:13px;}
	.b_txt{font-size:14px;}
	.b_txt.small{font-size:13px;}

	

	.obj_voeux2018 .screen-1 .txt{font-size:30px}
	.obj_voeux2018 .screen-2 .txt{font-size:50px}

	.obj_voeux2018 .screen-4 .txt{font-size:24px;}		
	.obj_voeux2018 .screen-4 .txt strong{font-size:50px;}

	.obj_voeux2018 .screen-5 .txt{font-size:24px;}
}

@media screen and (min-width:1025px){
	.obj_push.site{left:auto;right:8.541666%;width:auto}
}

@media screen and (min-width:1366px){

	.popin-form .intro{font-size:20px;}
	.popin-form input{font-size:18px;}

	.obj_voeux2018 .screen-2 .txt{font-size:100px}
	.obj_voeux2018 .screen-4 .txt strong{font-size:100px;}
	.obj_voeux2018 .screen-6 .message .txt{font-size:20px;}
}

/* ---------------------------------------------
 * min height
 * ------------------------------------------ */
@media screen and (min-height:890px){
	.obj_logo.momox.top{top:9.259259%;}

}



/* ABL 20180130 BUG BTN TO WEBSITE 
body.pg_voeux2018 .obj_loading-screen { z-index : 0; }
*/