@charset "UTF-8";
/* CSS Document */
body{
	margin: 0px;
	padding: 0px;
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	color:#211f20;
	color:#000000;
}

.index_logo{
	width:90px;
	position:absolute;
	top:10px;
	left:10px;
}

.index_logo img{
	width:100%;
}

.relative
{
	position:relative;
}

.bg{
	background:url('../img/fond.jpg') -200px no-repeat;	
}


.clear{
	height:1px;
	clear: both;
}

.clear5{
	height:5px;
	clear: both;
}

.clear10{
	height:10px;
	clear: both;
}

.clear20{
	height:20px;
	clear: both;
}

.clear50{
	height:50px;
	clear: both;
}

.clear20{
	height:20px;
	clear: both;
}

a{
	text-decoration:none;
	color:#211f20;
}

.abtn{
	display: block;
    width: 150px;
	text-decoration:none;
}

.header{
	width:100%;
	height:90px;
	padding:7px;
	box-shadow: 0 4px 2px -2px #ebebeb;
	background:#211f20;
	background:#000000;
	box-sizing: border-box;
	padding-left:25px;
	padding-right: 25px;
	position: fixed;
	/*position: relative;*/
	z-index:100;
}

.header-fixed{
	position: fixed;
	z-index: 100;
}

.header .img{
	width:75px;
	height:75px;
	float:left;
	background:transparent;
	border-radius:5px;
}


.header .img img{
	width:100%;
}




.success-txt{
	color:#2EA200;
}

.error-txt{
	color:#B40003;
}

.wrap_champs{
	width:100%;
	max-width:450px;
	height:35px;
	 position: relative;
  display: inline-block;
  overflow: hidden;
	border-radius:3px;
	border:1px solid #e8e8e8;
}

.champs{
	width:100%;
	height:35px;
	border-radius:3px;
	outline: none;
	border:none;
}

.underline{
  transition: all 0.5s;
  display: inline-block;
  bottom: 0;
  left: -100%;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #d5baad;
  background-color: #f7ccb3;
}

.wrap_champs >  .champs:focus + .underline{
  left: 0;
}

.header_home
{
	height:90px;
	position:relative;
}

.home--main--container{
	width:100%;
	position:relative;
}


.home--main--container .home--container{
	width:100%;
	max-width:936px;
	margin: auto;
    padding: 48px;
	box-sizing:border-box;
}

.grid-layout-3 {
    display: grid;
    grid-gap: 24px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 3rem !important;
}


.main--container{
	width:100%;
	background: #d5baad;
	background: #f7ccb3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bkg_image{
	background-image: url("../img/extensionCil.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: top;
}


.login--container{
	width:90%;
	max-width:800px;
	max-width:396px;
	min-height:400px;
	height:auto;
	position:relative;
	top:-25px;
	opacity: 0;
	background:#FFFFFF;
}

.flex{
	min-height:400px;
	height:auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.img2{
	width:70%;	
	background:#FFFFFF;
}

.img2 img{
	width:100%;	
}

.image_section
{
	width:99.5%;
}

.image_section img
{
	width: 100%;
    max-width: 650px;
}

.col-50{
	width:49.5%;
	float: left;
}

.col-50:last-child{
	width:49.5%;
	float: right;
	transition:all 800ms;
}

.login--form, .signup--form, .payment-stripe-form, .forgot-password--form{
	width:100%;
	min-height:400px;
	height:auto;
	border-radius:4px;
	background:#211f20;
	background:#000000;
	box-sizing: border-box;
	padding:10px;
	color:#FFFFFF;
	transition:all 800ms;
}

select.fitb_sub_chapter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	outline:0;
	box-sizing: border-box;
	padding: 0px 10px;
    border: 1px solid #FFFFFF;
    border-bottom: 1px solid #000000;
}

.exercise_quizz_section
{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding:10px;
	box-sizing:border-box;
	background:#FFFFFF;
}

.exercise_fitb_section
{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	padding:10px;
	box-sizing:border-box;
	background:#FFFFFF;
}

.row{
	width:100%;	
}

.msg_alert{
	width:100%;
	margin-bottom:10px;
	
}

.success-txt{
	color:#2EA200;
}

.error-txt{
	color:#B40003;
}

.title{
	font-size:22px;
	font-weight: 100;
	padding-left:5px;
	border-left:4px solid #d5baad;
	border-left:4px solid #f7ccb3;
	text-transform: uppercase;
	color:#FFFFFF;
}


div.btn1, input.btn1{
	width:150px;
	height:35px;
	padding:5px;
	color:#FFFFFF;
	background:#d5baad;
	background:#c06d51;
	background: #bc7963;
	box-sizing:border-box;
	display:flex;
	justify-content: center;
	align-items: center;
	border-radius:3px;
	cursor: pointer;
	border: none;
	position: relative;
}

span.btn{
  display: block;
}

div.btn1::before, div.btn1::after,
input.btn1::before, input.btn::after{
  content:"";
  width: 0;
  height: 4px;
  position: absolute;
  transition: all 0.2s linear;
  background:#82726b;
  background: #bc7963;
  background:#f7ccb3;
}

.btn::before, .btn::after{
  content:"";
  width:4px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background: #82726b;
  background: #bc7963;
  background:#f7ccb3;
}

div.btn1:hover::before, div.btn1:hover::after,
input.btn1:hover::before, input.btn1:hover::after{
  width: 100%;
}

div.btn1:hover .btn::before, div.btn1:hover .btn::after{
  height: 100%;
}


/*Effect button*/
.btn-2::before, .btn-2::after{
  transition-delay: 0s;
}
.btn-2 span::before, .btn-2 span::after{
  transition-delay: 0.2s;
}
.btn-2::before{
  right: 0;
  top: 0;
}
.btn-2::after{
  left: 0;
  bottom: 0;
}
.btn-2 span::before{
  left: 0;
  top: 0;
}
.btn-2 span::after{
  right: 0;
  bottom: 0;
}
.btn-2:hover::before, .btn-2:hover::after{
  transition-delay: 0.2s;
}
.btn-2:hover span::before, .btn-2:hover span::after{
  transition-delay: 0s;
}
/*Effect button*/


.sep{
	width:100%;
	height:2px;
	border-bottom:1px solid #FFFFFF;
}


.creation--compte{
	width:100%;
	height:50px;
	box-sizing: border-box;
	color:#FFFFFF;	
	display: flex;
	align-items: center;
	justify-content: center;
	font-size:18px;
	font-weight: 100;
	transition:all 800ms;
	cursor:pointer;
}

.creation--compte:hover{
	color:#d5baad;	
}

.oublie--mdp{
	width: 100%;
    box-sizing: border-box;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 13px;
    font-weight: 100;
    transition: all 800ms;
    cursor: pointer;
}

.oublie--mdp:hover{
	color:#d5baad;	
}

.go_back{
	cursor:pointer;	
	transition:all 800ms;
}

.go_back:hover{
	color:#d5baad;
}



.col--nav{
	width:250px;
	width:350px;
	position: fixed;
	height:calc(100vh - 90px);
	background:#d5baad;
	background: #bc7963;
	top:90px;
	transition: all 300ms;
}


.col--nav_based{
	width:250px;
	width:350px;
	height:100vh;
	float:left;
}

.col--nav .navigation{
	width:200px;
	width:300px;
	height:calc(100vh);
	margin:auto;
	box-sizing: border-box;
	padding-top:50px;
}

.col--nav--resp{
	width:250px;
	width:350px;
	right:-25px;
	position: absolute;
	height:calc(100vh - 90px);
	background:#d5baad;
	background: #bc7963;
	top:83px;
	transition: all 300ms;
}

.col--nav--resp .resp_navigation{
	width:200px;
	width:300px;
	height:calc(100vh);
	margin:auto;
	box-sizing: border-box;
	padding-top:20px;
}

.main--center
{
	width:100%;
	max-width:950px;
	margin:auto;
}

/*
* Added
*/
.main--center img {
    max-width: 100% !important;
    height: auto !important;
}

.main--container2{
	width:calc(100% - 250px);
	width:calc(100% - 350px);
	height:auto;
	float:left;
	position: relative;
	top:90px;
	padding-top:35px;
	padding-left: 40px;
	padding-right: 30px;
    box-sizing: border-box;
	
}


.main--container2 .container{
	width:90%;
	max-width:900px;
	min-height:800px;
	height:auto;
	box-sizing: border-box;
	
}



.header_formation{
	width:90%;
	height:105px;
	background: #F1F1F1;
	box-sizing: border-box;
	padding:10px;
}

.btn_status,.resp_btn_section {
	width:185px;
	height:60px;
	padding:5px;
	float:right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color:#FFFFFF;
}

.chapitre{
	margin:0px;
	padding:0px;
	list-style: none;
	border-left:1px solid #FFFFFF;
	cursor: pointer;
	letter-spacing:2px;
}

.chapitre li{
	width:100%;
	min-height:30px;
	height:auto;
	font-weight:bold;
	padding-left:20px;
	position:relative;
}

li.first a
{
	color:#FFFFFF;
}


.chapitre li.first:before{
	content:'';
	position:absolute;
	width:15px;
	height:15px;
	border-radius:15px;
	background: #FFFFFF;
	left:-8px;
}


ul.subchapter{
	padding:0px;
	margin:0px;
		list-style: none;
	margin-top:20px;
}

ul.subchapter li{
	width:100%;
	width:95%;
	height:20px;
	padding-left:10px;
	margin-top:15px;
	margin-bottom:15px;
	font-weight:normal;
	letter-spacing:0px;
}

ul.subchapter li:last-child
{
	margin-bottom:20px;
}

li.chapitre_choisi.first:before {
    background: #000000;
}

/*
*/
.menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
}

.line {
  fill: none;
  stroke: white;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
/*
*/

.title2{
	font-size:24px;
	font-weight: 100;
	    border-left: 4px solid #d5baad;
	    border-left:4px solid #f7ccb3;
	padding-left: 5px;
}


.progression{
	/*width:50%;
	height:40px;
	max-width:250px;*/
	width:100%;
	height:40px;
	border-radius:3px;
	float:left;
}


.progression_bar_base{
	width:100%;
	height:10px;
	border-radius:3px;
	background:#FFFFFF;
	background:#F1F1F1;
}

.progression_bar_fill{
	width:0%;
	height:10px;
	border-radius:3px;
	background:#2D6000;
}

.response_container
{
	position:relative;
	width:500px;
	margin:auto;
}

.response_container img
{
	width:100%;
}

.response_container_titre
{
	font-size:20px;
	text-align:center;
}

.cartouche--document {
    width: 130px;
    height: 25px;
    padding: 5px;
    border: none;
    background: #d5baad;
    background:#bc7963;
    border-radius: 3px;
    font-size: 11px;
    color: #FFF;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    text-align: center;
    cursor: pointer;
    float: left;
	display:flex;
	align-items: center;
    align-content: center;
    justify-content: center;
}


input[type=submit].upload_submit
{
	 width: 140px;
    height: 30px;
    padding: 5px;
    border: none;
    background: #038204;
    border-radius: 3px;
    font-size: 11px;
    color: #FFF;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    text-align: center;
    cursor: pointer;
    float: left;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}


/* The container */
.checkcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
  background-color: #d5baad;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkcontainer:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*
	Youtube video
*/


.formation_thumbnail
{
	padding: 1rem !important;
	box-shadow: 0px 5px 27px 4px rgba(80,80,80,0.05);
	overflow-x:auto;
	border: 1px solid #F9F9F9;
	border-radius: 5px;
	display: flex !important;
	justify-content: space-between;
	flex-direction: column !important;
	
}

.formation_thumbnail_inner_details{
	display:flex;
	flex-direction: column;
}

.grid-layout-3B {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 24px;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 3rem !important;
}

.chapitre li.chapitre_termine.first:before
{
	background: #ffffff url(../img/check-solid.svg);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}

.upload_thumbnail
{
	padding: 1rem !important;
	overflow-x:auto;
	border: 1px solid #F9F9F9;
	background:#f5f5f5;
	border-radius: 5px;
	display: flex !important;
	align-items: center;
    align-content: center;
    justify-content: space-evenly;
	flex-direction: column !important;
	height:150px;
	
}

.resp_btn
{
	cursor:pointer;
}

.nav_resp, .col--nav--resp
{
	display:none;
}

.resp_index_image
{
	float:right;
	right:0px;
	width:70px;
	background:#FFFFFF;
	display:none;
}

.resp_index_image img
{
	width:100%;
}

.col-50-main2{
	width:100%;
}

.factures_modifier_profil{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

@media (max-width: 1250px)
{
	.grid-layout-3B {
		grid-template-columns: repeat(2, 1fr);
	}
}
/*
@media (max-width: 1100px)
{
	.col-50-main {
		width:100% !important;
		float:none;
	}
}
//*/
@media (max-width: 1000px)
{
	.grid-layout-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 980px)
{
	.grid-layout-3 {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 940px)
{
	.grid-layout-3B {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 900px)
{
	.video {
	  aspect-ratio: 16 / 9;
	  width: 100%;
	}
	
	.col-50-main
	{
		display:none;
	}
	
	.col-50.col-50-main2:last-child {
		width:100%;
		float:none;
		clear:both;
	}
	
	.wrap_champs {
		max-width: 100%;
	}
	
	.resp_index_image
	{
		display:block;
	}
	
	.col-50-main .img2
	{
		width:100%;
		display:flex;
		align-content:center;
		align-items:center;
		justify-content:center;
		flex-direction:row;
	}
	
	.col-50-main .img2 img
	{
		width:100px;
		display:flex;
		align-content:center;
		align-items:center;
		justify-content:center;
		flex-direction:row;
	}
}

@media (max-width: 800px)
{
	.nav_resp
	{
		display:block;
	}
	
	.non_nav_resp
	{
		display:none;
	}
	
	.non_resp_nav
	{
		display:none;
	}
	
	.main--container2
	{
		width: 100%;
		padding-left: 25px;
		padding-right: 40px !important;
	}
	
	
	
}