/*---------------------*/
/*------- GENERAL -------*/
/*---------------------*/
/*#f5f5f5*/
/*#007d57*/
@font-face {
	font-family: "Arial Regular";
	src:
	  url("/common/fonts/Arial-Regular.ttf") format("truetype"),
	  url("/common/fonts/Arial-Regular.woff") format("woff"),
	  url("/common/fonts/Arial-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Arial Bold";
	src:
	  url("/common/fonts/Arial-BoldMT.ttf") format("truetype"),
	  url("/common/fonts/Arial-BoldMT.woff") format("woff"),
	  url("/common/fonts/Arial-BoldMT.woff2") format("woff2");
}

@font-face {
	font-family: "Arial Black";
	src:
	  url("/common/fonts/Arial-Black.ttf") format("truetype"),
	  url("/common/fonts/Arial-Black.woff") format("woff"),
	  url("/common/fonts/Arial-Black.woff2") format("woff2");
}

/* Masquer l'Iframe */
iframe {
    position: absolute;
    bottom: 0;
    left: -10px;
}

* {
    box-sizing: border-box;
}

.clear {
    clear: both;
}

img {
    max-width: 100%;
	max-height: 100%;
}

.uppercase {
    text-transform: uppercase;
}

/* .bold {
	font-family: 'Helvetica Medium', Arial, Helvetica, sans-serif;
} */

.smaller {
	font-size: 0.9em;
}

html {
	
}



.container {
    /* background-image: url("../../img/backgroundd.jpg"); */
    /* background-repeat: no-repeat;
	background-size: cover;
    background-color: #12295b; */
	padding: 1em;
	min-height: 100vh;

/* background-color: #008365;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #008365 17px ), repeating-linear-gradient( #00927155, #009271 ); */

/* background-color: #ffffff;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 16px ), repeating-linear-gradient( #dbc17e55, #dbc17e ); */

/* background-color: #fff; */
}

/* .container {
	height: 100%;
} */

.center-div {
	
	/* background-color: #091839; */
	/* background-color: rgba(11, 50, 0); */
	/* background-image: url("../../img/backcacib.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100%; */
	/* min-height: 100vh; */
	/* height: calc(); */
	/* padding: 1em; */
	/* min-height: calc(100vh - 2em); */
}

/* .color-overlay {
	background-color: rgba(89, 174, 150, 0.8);
	min-height: calc(100vh - 2em);
	padding: 1em;
} */

/* .test {
	width: 200px;
	height: 200px;
	background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #12295b 11px ), repeating-linear-gradient( #09183955, #091839 );
	background-repeat: no-repeat;
	border: 2px solid #fff;
} */

/*---------------------*/
/*------- HEADER -------*/
/*---------------------*/

.logo {
	display: block;
	max-width: 150px;
	margin: 10px auto 20px auto;
	/* background-color: #fff; */
	/* padding: 0.7em; */
	/* border-radius: 5px; */
}

.languages {
	color: #fff;
	text-align: center;
	font-family: 'Helvetica Bold', Arial, Helvetica, sans-serif;
	margin-bottom: 20px;
}

.languages a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1em;
}

/*-----------------------*/
/*------- CONTENT -------*/
/*-----------------------*/

/* .flex-center {
	display: flex;
	min-height: calc(100vh - 4em);
} */

/* .flex-center-chat {
	min-height: calc(100vh - 4em);
} */

.container-attente {
	margin: auto;
}

.center-container {
	max-width: 500px;
	margin: auto;
}

.title {
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	text-align: center;
	text-transform: uppercase;
	color: #000000;
	font-size: 2.4em;
	margin: 0 auto;
}

.date {
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	text-align: center;
	text-transform: uppercase;
	color: #000000;
	font-size: 1em;
	margin-top: 0;
}

.date sup {
	text-transform: lowercase;
}

.pipe {
	color: #3f4a4f;
}

.txt-intro {
	font-family: 'Helvetica Bold', Arial, Helvetica, sans-serif;
	text-align: center;
	/* text-transform: uppercase; */
	color: #fff;
	font-size: 1.7em;
}

.txt-fin {
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	text-align: center;
	/* text-transform: uppercase; */
	color: #007071;
	font-size: 1.4em;
	margin-top: 50px;
}

.txt-intro span {
	font-family: 'Helvetica Bold', Arial, Helvetica, sans-serif;
}

/* .container-chat .txt-intro {
	font-family: 'Helvetica Bold', Arial, Helvetica, sans-serif;
} */

.bloc-speaker {
	display: flex;
	flex-direction: row;
	max-width: 300px;
	margin: auto;
}

.bloc-speaker:nth-child(1) {
	margin-bottom: 20px;
}

.container-chat .bloc-speaker:nth-child(2) {
	margin-bottom: 30px;
}

.speaker-photo {
	display: block;
	width: 90px;
}

.container-chat .speaker-photo {
	margin-right: 10px;
}

.speaker-name {
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	font-size: 1.2em;
	margin: 10px 0 0 0;
}

.speaker-title {
	font-family: 'Helvetica Bold', Arial, Helvetica, sans-serif;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	font-size: 0.8em;
	margin-top: 0;
}

.container-chat .speaker-name {
	text-align: left;
}

.container-chat .speaker-title {
	text-align: left;
}




header {
	width: 100%;
	max-width: 820px;
	margin: auto;
}

.bloc-video-form {
	width: 100%;
	max-width: 700px;
	margin: auto;
	background-color: #f5f5f5;
    padding: 1em;
}

.bloc-video-transcript {
	width: 100%;
	max-width: 850px;
	margin: auto;
	background-color: rgba(44, 80, 69, 0.7);
    padding: 1em;
}

.bloc-login {
	width: 100%;
	max-width: 440px;
	margin: auto;
	margin-top: 30px;
}

.txt-form-heading {
	color: #777c7f;
	text-align: center;
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
/*	text-transform: uppercase;*/
}

.txt-form-heading-login {
	color: #ffffff;
	text-align: center;
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	text-transform: uppercase;
	padding: 0.8em;
	margin: 0;
	background-color: #007071;
}

.txt-form-heading-signatures {
	color: #00C3C8;
	text-align: center;
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	margin: 10px auto;
	font-size: 1.2em;
/*	text-transform: uppercase;*/
}


.mandatory-fields {
	color: #fff;
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 5px auto;
}

/* .container-fin .txt-intro {
	font-size: 1.8em;
	font-family: 'Helvetica Bold', Arial, Helvetica, sans-serif;
	max-width: 550px;
	margin: 30px auto;
} */

.txt-attente {
	text-align: center;
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
	/* text-transform: uppercase; */
	color: #007071;
	font-size: 1.5em;
	margin-top: 150px;
}

/*----------------------------*/
/*------- COUNTDOWN -------*/
/*----------------------------*/

.bloc-video-countdown {
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.elements-countdown {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
}

.bloc-jours,
.bloc-heures,
.bloc-minutes,
.bloc-secondes {
    text-align: center;
    font-family: 'Arial Black', Arial, Helvetica, sans-serif;
}

/* .bloc-jours div,
.bloc-heures div,
.bloc-minutes div {
    border-right: 2px solid #ffffff;
} */

.bloc-jours div,
.bloc-heures div,
.bloc-minutes div,
.bloc-secondes div {
    font-size: 2.3em;
    font-weight: 700;
    padding: 0 0.2em;
    /* height: 54px;
	margin-top: 10px; */
}

.bloc-jours p,
.bloc-heures p,
.bloc-minutes p,
.bloc-secondes p {
    margin: 0;
    color: #007071;
}

/* .bloc-jours div p,
.bloc-heures div p,
.bloc-minutes div p,
.bloc-secondes div p {
    width: 55px;
} */

.letter {
    /* position: relative; */
    font-family: 'Arial Regular', Arial, Helvetica, sans-serif;
    /* color: #3f4a4f; */
}

/*--------------------------------*/
/*------- PRESENTATION TXT -------*/
/*--------------------------------*/


/*-------------------------------------*/
/*------- PRESENTATION TXTS LOGIN -------*/
/*-------------------------------------*/


/*-------------------------------------*/
/*------- PRESENTATION TXTS CHAT-------*/
/*-------------------------------------*/



/*---------------------*/
/*------- PHOTO -------*/
/*---------------------*/


/*----------------------------*/
/*------- VIDEO (chat) -------*/
/*----------------------------*/



/*--------------------*/
/*------- FORM -------*/
/*--------------------*/




.bloc-form input,
.bloc-form textarea,
.bloc-form-login input {
    border: solid 1.5px #007071;
	border-top: 0;
    padding: 0.8em;
    width: 100%;
    background-color: #ffffff;
    margin: 0;
    font-family: 'Arial Regular', Arial, Helvetica, sans-serif;
	font-size: 1em;
}

.bloc-form-chat textarea {
    border: none;
	border-top: 0;
    padding: 0.8em;
    width: 100%;
    background-color: #C2C2C2;
    margin: 0;
    font-family: 'Arial Regular', Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000000;
}

.bloc-form textarea {
    height: 90px;
	resize: none;
	margin-bottom: 15px;
}

.bloc-form button,
.bloc-form-login button {
    border: none;
    width: 100%;
    color: #ffffff;
    padding: 0.65em;
/*	border: 2px solid #6bcea8;*/
  	background-color: #007071;
    cursor: pointer;
    font-weight: 400;
    font-size: 1em;
    transition: all ease 0.5s;
	text-transform: uppercase;
	font-family: 'Arial Black', Arial, Helvetica, sans-serif;
    /* box-shadow: 5px 13px 22px -7px rgba(0,0,0,0.5); */
}

.bloc-form-login button {
	margin: 0;
	/* width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content; */
	/* padding: 0.6em 2em; */
	display: block;
}

.bloc-form button:hover,
.bloc-form-login button:hover {
    background-color: #00C3C8;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: #007071;
}

input::-moz-placeholder, textarea::-moz-placeholder {
	color: #007071;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	color: #007071;
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
	color: #007071;
}

input::placeholder,
textarea::placeholder {
	color: #007071;
}

.bloc-form-chat textarea::-webkit-input-placeholder {
	color: #5f5f5f;
}

.bloc-form-chat textarea::-moz-placeholder {
	color: #5f5f5f;
}

.bloc-form-chat textarea:-ms-input-placeholder {
	color: #5f5f5f;
}

.bloc-form-chat textarea::-ms-input-placeholder {
	color: #5f5f5f;
}

.bloc-form-chat textarea::placeholder {
	color: #5f5f5f;
}


/*---------------------*/
/*------- SELECT -------*/
/*---------------------*/

/* class applies to select element itself, not a wrapper element */
.select-css {
    display: block;
    margin: 10px 0;
	/* font-size: 16px; */
	font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 300;
    font-style: italic;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	border: 1px solid #aaa;
	/* box-shadow: 0 1px 0 1px rgba(0,0,0,.04); */
	/* border-radius: .5em; */
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
	
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}


/*---------------------*/
/*------- FOOTER -------*/
/*---------------------*/

footer {
	width: 100%;
	/* background-color: #fff; */
	/* padding: 1em; */
}

footer .logos-footer {
	height: 30px;
	text-align: center;
	margin: 20px auto;
}

/*-----------------------------*/
/*--- ERROR/SUCCESS MESSAGES ---*/
/*-----------------------------*/

.error-success-message {
	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    text-align: center;
	height: 20px;
}

p.error {
    color: red;
    text-align: center;
  
}

p.success  {
    color: #0a7a5c;
    text-align: center;

}

/*----------------------------*/
/*------- MEDIA QUERIES -------*/
/*----------------------------*/

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



	.bloc-jours div,
	.bloc-heures div,
	.bloc-minutes div,
	.bloc-secondes div {
		font-size: 3.5em;
	}

	.txt-form-heading {
		font-size: 1.3em;
	}

}

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

	.title {
		/* font-size: 1.4em; */
	}

	/* .bloc-jours div,
	.bloc-heures div,
	.bloc-minutes div,
	.bloc-secondes div {
		font-size: 4.5em;
	} */

	.bloc-form-chat {
		max-width: 500px;
		margin: auto;
	}



	.languages {
		position: absolute;
		top: 2em;
		right: 2em;
	}

	footer {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
}


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

	/* body {
		background-image: url("../../img/background.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	} */

	header {
		margin: 40px auto 90px auto;
	}

	.logo {
		position: absolute;
		top: 2em;
		left: 2em;
	}

	.title {
		font-size: 3em;
	}



	.bloc-video-form {
		display: flex;
		flex-direction: row;
		max-width: 900px;
		position: relative;
		background: none;
	}

	.bloc-video-form::before {
		content: "";
		position: absolute;
		top: 1.5px;
		left: -351px;
		width: 353px;
		/* transform: translateX(-50%); */
		height: 100%;
		background-image: url("../../img/background-left.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.bloc-video-form::after {
		content: "";
		position: absolute;
		top: 1.5px;
		right: -351px;
		width: 353px;
		/* transform: translateX(-50%); */
		height: 100%;
		background-image: url("../../img/background-right.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.bloc-video-replay {
		/* display: flex;
		flex-direction: row; */
		max-width: 750px;
		margin: auto;
		position: relative;
		background: none;
	}

	.bloc-video-replay::before {
		content: "";
		position: absolute;
		top: 1.5px;
		left: -371px;
		width: 353px;
		/* transform: translateX(-50%); */
		height: 100%;
		background-image: url("../../img/background-left.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.bloc-video-replay::after {
		content: "";
		position: absolute;
		top: 1.5px;
		right: -371px;
		width: 353px;
		/* transform: translateX(-50%); */
		height: 100%;
		background-image: url("../../img/background-right.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.content-container-login {
		position: relative;
	}

	.content-container-login::before {
		content: "";
		position: absolute;
		top: 1.5px;
		left: -351px;
		width: 353px;
		/* transform: translateX(-50%); */
		height: 100%;
		background-image: url("../../img/background-left.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.content-container-login::after {
		content: "";
		position: absolute;
		top: 1.5px;
		right: -351px;
		width: 353px;
		/* transform: translateX(-50%); */
		height: 100%;
		background-image: url("../../img/background-right.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.center-container {
		position: relative;
		height: 172px;
	}

	.center-container::before {
		content: "";
		position: absolute;
		top: -57.5px;
		left: -351px;
		width: 353px;
		/* transform: translateX(-50%); */
		height: 150%;
		background-image: url("../../img/background-left.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.center-container::after {
		content: "";
		position: absolute;
		top: -57.5px;
		right: -351px;
		width: 353px;
		/* transform: translateX(-50%); */
		height: 150%;
		background-image: url("../../img/background-right.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}

	.bloc-video {
		width: 70%;
	}

	.bloc-form-chat {
		width: 30%;
		padding-left: 1em;
	}

	.bloc-form-chat textarea {
		height: 130px;
	}

	
	
}


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

}

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

	/* .container-chat {
		max-width: 1250px;
		margin: auto;
	}

	.container-chat header {
		margin: auto;
	}

	.container-chat .speakers {
		flex-direction: column;
		margin: 20px auto;
	}

	.container-chat .txt-intro {
		font-size: 1.1em;
		max-width: 300px;
		margin: auto;
	}

	.container-chat .speaker-photo {
		width: 150px;
	} */

}