/*
	XENOPHONE
*/
.xenophone_content {
	position: absolute;
	display: block;
	bottom: -25%;
	/*width: 19.8125rem;*/
	/*height: 41.5625rem;*/
	width: 14.859375rem;
	height: 31.171875rem;
	transform-origin: 100% 40%;
	z-index: 2;
}
.xenophone {
	position: absolute;
	display: block;
	/*height: 75%;*/
	/*width: 75%;*/
	height: 100%;
	width: 100%;
	z-index: 10;
	border-radius: 3rem;
	background-color: rgba(255,255,255,1);
	box-shadow: 0 0 12px 8px rgba(30, 32, 34, 0.1);
}
.xenophone .mobile_micro {
	position: absolute;
	width: 40px;
	height: 5px;
	left: 50%;
	top: 34px;
	margin-left: -20px;
	border-radius: 3px;
	background-color: #f7f7f7;
}
.xenophone .mobile_screen {
	position: absolute;
	width: calc(100% - 30px);
	height: calc(100% - 124px);
	top: 60px;
	left: 15px;
	border: 1px solid #e6ecf5;
}
.xenophone .mobile_screen .xeno_chatbox {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 10;
	overflow: hidden;
}
.xenophone .mobile_screen .xeno_chatbox_button {
	position: absolute;
	display: block;
	height: 0px;
	width: 0px;
	right: 0px;
	bottom: 0px;
	padding: 0%;
	margin-right: 7.5%;
	margin-bottom: 6.5%;
	border-radius: 50%;
	background-color: #27c46900;
	box-shadow: 0 0 12px 8px rgba(30,32,34,0);
	z-index: 2;
}
.xenophone .mobile_screen .xeno_chatbox_button svg {
	position: absolute;
	height: 50%;
	width: 50%;
	left: 25%;
	top: 25%;
	color: #fff;
}

.xenophone .mobile_button {
	position: absolute;
	height: 38px;
	width: 38px;
	left: 50%;
	bottom: 15px;
	margin-left: -19px;
	border-radius: 50%;
	background-color: #f7f7f7;
}



/*
	HEADER
*/
.xenophone .mobile_screen .xeno_chatbox .header_mobile {
	position: absolute;
	height: 57px;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: #27c469;
    box-shadow: 0px 0px 8px rgba(0,0,0,.3);
    text-align: left;
    z-index: 10;
}
.xenophone .mobile_screen .header_mobile .arrow_back {
	position: absolute;
	height: 100%;
	width: 50px;
	left: 0px;
	top: 0px;
}
.xenophone .mobile_screen .header_mobile .arrow_back svg {
	width: 30%;
	height: 30%;
	margin: 35%;
	color: #fff;
}
.xenophone .mobile_screen .xeno_chatbox .header_mobile .header_text {
	position: absolute;
	height: calc(100% - 20px);
	width: calc(100% - 105px);
	left: 55px;
	top: 15px;
	color: #FFF;
	line-height: 12.5px;
	white-space: nowrap;
}
.xenophone .mobile_screen .xeno_chatbox .header_mobile .header_text div:first-child {
	font-size: 12.5px;
}
.xenophone .mobile_screen .xeno_chatbox .header_mobile .header_text div:last-child {
	font-size: 10px;
}
.xenophone .mobile_screen .xeno_chatbox .header_mobile .button_close {
	position: absolute;
	height: 100%;
	width: 50px;
	right: 0px;
	top: 0px;
}
.xenophone .mobile_screen .xeno_chatbox .header_mobile .button_close svg {
	width: 30%;
	height: 30%;
	margin: 35%;
	color: #fff;
}



/*
	CONTENT
*/
.xenophone .mobile_screen .xeno_chatbox .content_mobile {
	position: absolute;
	width: 100%;
	height: calc(100% - 128px);
	top: 57px;
	left: 0px;
	background-size: 150%;
	background-color: #fff;
	background-image: url(../img/xenophone/bg_chatbox.png);
	overflow: hidden;
	padding-bottom: 10px;
	box-sizing: border-box;
	scroll-behavior: smooth;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll {
	position: relative;
	width: calc(100% + 18px);
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
/* RECEIVED */
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_received {
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	text-align: left;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_received .avatar {
	position: absolute;
	width: 25px;
	height: 25px;
	bottom: 0px;
	border-radius: 50%;
	background-color: #f6f7f9;
	background-position: center;
	background-size: cover;
	background-image: url(../img/xenophone/avatar_default.svg);
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_received .messages_content {
	position: relative;
	display: block;
	width: calc(100% - 37px);
	height: auto;
	margin-left: 38px;
	font-size: 11px;
	margin-top: 22px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_received .messages_content div .message {
	position: relative;
	display: inline-block;
	height: auto;
	width: auto;
	box-sizing: border-box;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #f6f7f9;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	margin-bottom: 4px;
	line-height: 16px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_received .messages_content div:last-child .message {
	margin-bottom: 0px;
	border-bottom-left-radius: 15px;
	border-top-left-radius: 0px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_received .messages_content div:first-child .message {
	border-bottom-left-radius: 0px;
	border-top-left-radius: 15px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_received .messages_content .message .name {
	font-weight: bold;
	margin-bottom: 8px;
}


/* SEND */
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_send {
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 10px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_send .messages_content {
	position: relative;
	display: block;
	width: calc(100% - 37px);
	height: auto;
	margin-left: 38px;
	font-size: 11px;
	text-align: right;
	margin-top: 22px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_send .messages_content div .message {
	position: relative;
	display: inline-block;
	height: auto;
	width: auto;
	box-sizing: border-box;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #27C469;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	margin-bottom: 4px;
	color: #FFF;
	line-height: 16px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_send .messages_content div:last-child .message {
	margin-bottom: 0px;
	border-bottom-right-radius: 15px;
	border-top-right-radius: 0px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_send .messages_content div:first-child .message {
	border-bottom-right-radius: 0px;
	border-top-right-radius: 15px;
}
.xenophone .mobile_screen .xeno_chatbox .content_mobile .content_mobile_scroll .message_send .status {
	font-size: 10px;
	float: right;
	color: #c3c3c3;
	margin-top: 3px;
	margin-right: 4px;
}



/*
	FOOTER
*/
.xenophone .mobile_screen .xeno_chatbox .footer_mobile {
	position: absolute;
	height: auto;
	min-height: 71px;
	width: 100%;
	left: 0px;
	bottom: 0px;
	background-color: #f5f6fb;
}
.xenophone .mobile_screen .xeno_chatbox .footer_mobile .text_area {
	position: relative;
	width: calc(100% - 20px);
	height: auto;
	min-height: 28px;
	left: 10px;
	margin-top: 13px;
	border-radius: 14px;
	background-color: #fff;
	border: 1px solid #e6ecf5;
	transition: .1s;
	text-align: left;
}
.xenophone .mobile_screen .xeno_chatbox .footer_mobile .text_area .zone_text {
	position: relative;
	height: auto;
	min-height: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
	width: calc(100% - 60px);
	left: 10px;
	top: 0px;
	color: #999;
	font-size: 11px;
	line-height: 1.4em;
	transition: .1s;
}
.xenophone .mobile_screen .xeno_chatbox .footer_mobile .text_area .zone_text div {
	opacity: .4;
}
.xenophone .mobile_screen .xeno_chatbox .footer_mobile .text_area .button_file {
	position: absolute;
	height: 28px;
	width: 20px;
	right: 4px;
	top: 0px;
}
.xenophone .mobile_screen .xeno_chatbox .footer_mobile .text_area .button_emoji {
	position: absolute;
	height: 28px;
	width: 20px;
	right: 24px;
	top: 0px;
}
.xenophone .mobile_screen .xeno_chatbox .footer_mobile .text_area .button_file svg,
.xenophone .mobile_screen .xeno_chatbox .footer_mobile .text_area .button_emoji svg {
	width: 50%;
	height: 50%;
	margin: 25%;
	color: #999;
}
.xenophone .mobile_screen .xeno_chatbox .footer_mobile .white_label {
	position: relative;
	width: 100%;
	color: #aaa;
	font-size: 11px;
	text-align: center;
	margin-bottom: 7px;
	margin-top: 5px;
}
/* LABEL */
.label_mobile {
	position: relative;
	opacity: .3;
	z-index: 100;
	/*font-size: 2em;*/
	font-size: 1.5em;
	color: inherit;
}


/*
	XENO_TABLETTE
*/
.xenophone_content.tablette,
.xenophone_tablette:checked + .xenophone_content {
	position: absolute;
	display: block;
	/*height: 50.875rem;
	width: 34.375rem;*/
	height: 38.15625rem;
	width: 25.78125rem;
	left: 0px;
	bottom: -52%;
	/*transform-origin: 90% -20%;*/
	transform: rotate(15deg);
}
.xenophone_content.tablette .xenophone,
.xenophone_tablette:checked + .xenophone_content .xenophone {
	position: absolute;
	/*width: 75%;
	height: 75%;*/
	width: 100%;
	height: 100%;
	border-radius: 2rem;
	box-shadow: 0 0 12px 8px rgba(30,32,34,.1);
}
.xenophone_content.tablette .xenophone .mobile_micro,
.xenophone_tablette:checked + .xenophone_content .xenophone .mobile_micro {
	position: absolute;
	height: 8px;
	width: 8px;
	left: 50%;
	top: 25px;
	margin-left: -4px;
	border-radius: 50%;
}
.xenophone_content.tablette .xenophone .mobile_screen,
.xenophone_tablette:checked + .xenophone_content .xenophone .mobile_screen {
	position: absolute;
	width: calc(100% - 44px);
	height: calc(100% - 124px);
	left: 22px;
	top: 58px;
    background: -moz-linear-gradient(296deg, rgba(255,255,255,0) 0%, rgba(121,126,135,.9) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(121,126,135,.9)));
    background: -webkit-linear-gradient(296deg, rgba(255,255,255,0) 0%, rgba(121,126,135,.9) 100%);
    background: -o-linear-gradient(296deg, rgba(255,255,255,0) 0%, rgba(121,126,135,.9) 100%);
    background: -ms-linear-gradient(296deg, rgba(255,255,255,0) 0%, rgba(121,126,135,.9) 100%);
    background: linear-gradient(154deg, rgba(255,255,255,0) 0%, rgba(121,126,135,.9) 100%);
}
.xenophone_content.tablette .xenophone .mobile_screen .xeno_chatbox,
.xenophone_tablette:checked + .xenophone_content .xenophone .mobile_screen .xeno_chatbox {
	position: absolute;
	height: 79%;
	width: 69%;
	left: 27%;
	top: 6%;
	border-radius: 1rem;
	border: 1px solid #e6ecf5;
	overflow: hidden;
}
.xenophone_content.tablette .xenophone .mobile_screen .xeno_chatbox_button,
.xenophone_tablette:checked + .xenophone_content .xenophone .mobile_screen .xeno_chatbox_button {
	position: absolute;
	display: block;
	height: 0px;
	width: 0px;
	bottom: 0px;
	right: 0px;
	padding: 7%;
	margin-right: 4%;
	margin-bottom: 3%;
	border-radius: 50%;
	background-color: #27c469;
	box-shadow: 0 0 12px 8px rgba(30,32,34,.1);
}
.xenophone_content.tablette .xenophone .mobile_screen .xeno_chatbox_button svg,
.xenophone_tablette:checked + .xenophone_content .xenophone .mobile_screen .xeno_chatbox_button svg {
	position: absolute;
	height: 50%;
	width: 50%;
	left: 25%;
	top: 25%;
	color: #fff;
}
.xenophone_content.tablette .xenophone .mobile_button,
.xenophone_tablette:checked + .xenophone_content .xenophone .mobile_button {
	position: absolute;
	height: 34px;
	width: 34px;
	left: 50%;
	bottom: 14px;
	margin-left: -17px;
	border-radius: 50%;
}


/* ANIM PHONE/TABLETTE */
.xenophone_content, .xenophone, .mobile_micro, .mobile_screen,
.xeno_chatbox, .xeno_chatbox_button, .mobile_button { transition: 1s; }


/*
	EMOJI
*/
.xenophone_emoji {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 1.2em;
	height: 1.2em;
	margin-top: -.2em;
	margin-left: .02em;
	margin-right: .02em;
	margin-bottom: -.2em;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	opacity: 1;
}


@media (max-width: 920px) {
    .xenophone_content {
        display: none !important;
    }
}


/*
	Responsive
*/
/*@media (min-width: 900px) and (max-width: 951px) {
	.xenophone_content .xenophone { transform: scale(.7); }
	.xenophone_content.tablette .xenophone { transform: scale(.7) translateX(12px) translateY(50px); }
}
@media (min-width: 951px) and (max-width: 1050px) {
	.xenophone_content .xenophone { transform: scale(.8); }
	.xenophone_content.tablette .xenophone { transform: scale(.8) translateX(12px) translateY(50px); }
}*/
@media (min-width: 900px) and (max-width: 1224px) {
	/*.xenophone_content .xenophone { transform: scale(.8); }
	.xenophone_content.tablette .xenophone { transform: scale(.8) translateY(40px) translateX(-50px); }*/
	.xenophone_content:nth-child(2) .xenophone { transform: scale(.8) translateX(-140px) translateY(100px); }
	.xenophone_content:nth-child(6) .xenophone { transform: scale(.8) translateY(40px) translateX(50px); }
}
@media (min-width: 1224px) and (max-width: 1400px) {
	.xenophone_content .xenophone { transform: scale(1); }
}
@media (min-width: 1400px) and (max-width: 1600px) {
	.xenophone_content .xenophone { transform: scale(1.1); }
	.xenophone_content.tablette .xenophone { transform: scale(1.15) translateX(25px) translateY(29px); }
}
@media (min-width: 1824px) {
	.xenophone_content .xenophone { transform: scale(1.3); }
	.xenophone_content.tablette .xenophone { transform: scale(1.28) translateX(30px) translateY(20px); }
}



/*
	ADD
*/
/* LABEL CLIENT */
/*.label_mobile_client_suppr {
	position: relative;
	left: 0px;
	top: 75%;
	opacity: .6;
	margin-top: -180px;
	transform: rotate(90deg);
	transform-origin: top left;
	color: #27c469;
	z-index: 100;
}*/
.label_mobile_client {
	position: relative;
	left: 0px;
	top: 0px;
	width: 75%;
	opacity: .6;
	margin-top: -50px;
	text-align: center;
	color: #27c469;
	z-index: 100;
}
/* LABEL CUSTOMER */
.label_mobile_customer {
	position: relative;
	left: 0px;
	left: -24.5%;
	opacity: .6;
	margin-left: -10px;
	transform: rotate(-90deg);
	transform-origin: top right;
	color: #27c469;
	z-index: 100;
}


/* LABEL CLIENT */
.label_mobile_client_2 {
	position: relative;
	left: 10%;
	top: 0px;
	width: 80%;
	opacity: .6;
	margin-top: -35px;
	text-align: center;
	/*color: #b1b3bb;*/
	/*color: #c0c3d2;*/
	color: #878796;
	z-index: 100;
	transition: .1s;
}
/* LABEL CUSTOMER */
.label_mobile_customer_2 {
	position: relative;
	left: 5.5%;
	top: 50%;
	opacity: .6;
	margin-left: -50px;
	transform: rotate(-90deg);
	transform-origin: top right;
	/*color: #b1b3bb;*/
	/*color: #c0c3d2;*/
	color: #878796;
	z-index: 100;
	transition: .1s;
}

/**/
@media (min-width: 900px) and (max-width: 1224px) {
	.label_mobile_client_2 { margin-top: -35px; top: 17%; left: 30%; font-size: 1.5em; }
	.label_mobile_customer_2 { font-size: 1.5em; top: 50%; left: -52%; }
}
@media (min-width: 1224px) and (max-width: 1400px) {
	.label_mobile_client_2 { margin-top: -35px; }
	.label_mobile_customer_2 { left: 5%; }
}
@media (min-width: 1400px) and (max-width: 1600px) {
	.label_mobile_client_2 { margin-top: -60px; }
	.label_mobile_customer_2 { left: 10.5%; }
}
@media (min-width: 1824px) {
	.label_mobile_client_2 { transform: rotate(-90deg); left: -65%; top: 30%; }
	.label_mobile_customer_2 { left: 20%; top: 57%; }
}


/**/
@media (min-width: 900px) and (max-width: 1224px) {
	#footer { padding-top: 0px; }
	#cta_footer .cta_footer_ctn { transform: translateY(65px); }
}
@media (min-width: 1224px) and (max-width: 1400px) {
	#footer { padding-top: 90px; }
}
@media (min-width: 1400px) and (max-width: 1600px) {
	#footer { padding-top: 120px; }
}
@media (min-width: 1824px) {
	#footer { padding-top: 170px; }
}