/*---------------------*/
/*------- GENERAL -------*/
/*---------------------*/

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

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

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

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

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

#fullscreenLink {
    width: 25px !important;
    margin: 8px 8px 0 0 !important;
}

/* Correction overlay slide */
.overlay-image .hover {
    bottom: 0px !important;
}

* {
    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: #d6d6d6;
background-color: #f1eeec;
}

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

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

.color-overlay {
	background-color: rgba(89, 174, 150, 0.8);
	background-color: rgba(207, 176, 124, 0.7);
	background-color: rgba(227, 175, 114, 0.6);
	background-color: rgba(7, 61, 85, 0.5);
	/* background-color: rgba(174, 133, 87, 0.7); */

	/* background-color: rgba(255, 255, 255, 0.4); */


	padding: 1em;
	/* display: flex;
	flex-direction: column; */
	min-height: calc(100vh - (2em + 120px));
	min-height: calc(100vh - 2em);
}

.content {
	width: 100%;
	max-width: 1200px;
	margin: auto;
}

/* .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: 170px;
	margin: auto;
}

.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 {
	min-height: calc(100vh - (4em + 120px));
} */


.container-attente {
	margin: auto;
}

.title {
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	text-align: center;
	/* text-transform: uppercase; */
	color: #fff;
	font-size: 1.2em;
}

.pipe {
	/* color: #55676e; */
	color: #fff;
}

.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: 'Helvetica Light', Arial, Helvetica, sans-serif;
	text-align: center;
	/* text-transform: uppercase; */
	color: #fff;
	font-size: 1.4em;
}

.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: 1em;
	margin-top: 0;
}

.speaker-title span {
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	font-size: 0.9em;
}

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

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

.date {
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	text-align: center;
	/* text-transform: uppercase; */
	color: #fff;
	font-size: 1.2em;
}

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

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

.bloc-video-form {
	width: 100%;
}

.bloc-video-and-warning,
.bloc-video-transcript,
.bloc-slides {
	max-width: 650px;
	margin: 0 auto 30px auto;
}

.bloc-video {
	width: 100%;
	
	background-color: rgba(120, 102, 88, 0.7);
	background-color: rgba(120, 102, 88, 0.8);
    padding: 1em;
}

.bloc-video-transcript {
	width: 100%;
	/* max-width: 650px; */
	margin: auto;
	background-color: rgba(120, 102, 88, 0.7);
	background-color: rgba(120, 102, 88, 0.8);
    padding: 1em;
	margin-bottom: 30px;
}

.bloc-login,
.bloc-form-modules {
	width: 100%;
	max-width: 440px;
	margin: 30px auto 10px auto;
	background-color: rgba(120, 102, 88, 0.7);
	background-color: rgba(120, 102, 88, 0.8);
    padding: 1em;
}

.bloc-form-modules {
	max-width: 500px;
}

.txt-form-heading {
	color: #fff;
	text-align: center;
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin-bottom: 5px;
}

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

.bloc-form-and-error {
	padding: 1em;
    	background-color: rgba(120, 102, 88, 0.7);
		background-color: rgba(120, 102, 88, 0.8);
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	margin: auto;
}

.quiz-to-come {
	padding: 2em;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 5px;
	color: #635246;
	font-family: 'Helvetica Medium', Arial, Helvetica, sans-serif;
}

#pollingContainerOnPage #formPolls {
	padding: 1em;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 5px;
}

#pollingContainerOnPage legend {
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	border-bottom: 3px solid #635246;
	display: block;
	width: 100%;
	padding-bottom: 1em;
}

#pollingContainerOnPage input {
	transform: scale(0.9);
	margin-right: 10px;
	cursor: pointer;
}

#pollingContainerOnPage label {
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	cursor: pointer;
	font-size: 0.9em;
}

#pollingContainerOnPage #sendPollingButton {
	float: right;
	font-family: 'Helvetica Medium', Arial, Helvetica, sans-serif;
	color: #fff;
	background-color: #635246;
	border-radius: 5px;
	padding: 0.5em 1.5em;
}

.txt-form-heading-login {
	color: #fff;
	text-align: center;
	font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin-top: 0;
	text-transform: uppercase;
}

/* .container-fin {
	min-height: calc(100vh - 4em);
} */

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

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

.advice-video-fullscreen {
	font-family: 'Helvetica Regular', Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 0.8em;
	margin-bottom: 0;
}

.advice-video-fullscreen span {
	font-family: 'Helvetica Bold', Arial, Helvetica, sans-serif;
	color: #ffffff !important;
}

.quiz-to-come {
	text-align: center;
}

/*----------------------------*/
/*------- 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: 'Helvetica Bold', Arial, Helvetica, sans-serif;
}

.bloc-jours,
.bloc-heures,
.bloc-minutes,
.bloc-secondes {
    text-align: center;
    font-family: 'Helvetica Bold', 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: #ffffff;
}

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

.letter {
    position: relative;
    font-family: 'Helvetica Light', Arial, Helvetica, sans-serif;
    color: #786658;
}

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


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


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



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


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



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


.bloc-form input,
.bloc-form textarea,
.bloc-form-login input {
    border: none;
    padding: 0.8em;
    width: 100%;
    background-color: #f0f0f0;
    margin: 5px 0;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
	border-radius: 5px;
	font-size: 1em;
}

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

.bloc-form-modules textarea {
	margin-bottom: 7px;
}

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

.bloc-form-login button {
	margin: 10px auto 0 auto;
	/* 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: #40342b;
}



/*---------------------*/
/*------- 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: #2a2c30; */
	/* padding: 1em; */
	/* height: 10px; */
}

/* footer .logos-footer {
	height: 70px;
	text-align: center;
	margin: 10px auto;
} */

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

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

.error-success-message-chat {
	margin: 5px auto 0 auto;
}

span.error {
    color: rgb(255, 255, 255);
    text-align: center;
	font-weight:700;
  
}

span.success  {
    color: rgb(255, 255, 255);
	font-weight:700;
    text-align: center;

}

p.error {
    color: rgb(255, 255, 255);
    text-align: center;
  
}

p.success  {
    color: rgb(255, 255, 255);
    text-align: center;

}

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

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

	.txt-intro,
	.date {
		font-size: 1.6em;
	}

	.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;
	}

	.speakers {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

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

	/* .bloc-speaker {
		margin: 0 30px;
	} */

	.bloc-speaker {
		margin: 0px 30px;
	}

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

	.container-chat header {
		margin-bottom: 30px;
	}

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

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

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


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

	.bloc-speaker {
		display: flex;
		flex-direction: column;
	}

	.speaker-photo {
		margin: auto;
		width: 130px;
	}

	.container-chat .bloc-speaker {
		display: flex;
		flex-direction: row;
	}

	.container-chat .speaker-photo {
		margin: auto 10px auto auto;
		width: 90px;
	}

	.container-chat .speaker-name-and-title {
		display: flex;
		flex-direction: column;
		/* justify-content: flex-end;
		align-items: flex-end; */
		justify-content: flex-end;
	}

	.container-chat .speaker-name,
	.container-chat .speaker-title {
		margin: 0;
	}

	.flex-center {
		max-width: 1000px;
		margin: auto;
	}

	.bloc-video-form {
		/* display: flex;
		flex-direction: row; */
		padding: 1em;
		background-color: rgba(120, 102, 88, 0.7);
		background-color: rgba(120, 102, 88, 0.8);
	}

	.bloc-video-and-slides {
		display: flex;
		flex-direction: row;
		/* margin-bottom: 20px; */
	}

	.bloc-video-and-warning {
		max-width: inherit;
		width: 50%;
		margin: 0;
		padding-right: 0.5em;
	}

	.bloc-video {
		background-color: inherit;
		padding: 0;
	}

	.bloc-slides {
		max-width: inherit;
		width: 50%;
		margin: 0;
		padding-left: 0.5em;
	}

	.bloc-form-and-polling {
		display: flex;
		flex-direction: row;
		margin-top: 10px;
	}

	.bloc-form-and-error {
		/* width: 30%; */
		/* padding-left: 0.5em; */
		max-width: 450px;
		margin: 20px auto 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}

	.bloc-form-chat {
		margin: 0 auto;
	}

	/* .bloc-form-chat {
		
	} */

	.bloc-polling-current-questions {
		width: 50%;
		padding-left: 0.5em;
	}

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

	.txt-form-heading {
		margin-top: 0;
	}
	
	.quiz-to-come {
		margin: 0;
	}

	#pollingContainerOnPage #formPolls {
		min-height: 267.95px;
	}

	.bloc-video-transcript {
		width: 50%;
		padding: 0 0.5em 0 0;
		background-color: transparent;
		margin: 0;
	}
}


@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;
	} */

}