@font-face {
	font-family: 'Fugaz One Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Fugaz One'), url('../../font/FugazOne-Regular.ttf')at('ttf');
}
@font-face {
	font-family: 'Courgette Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Courgette Regular'), url('../../font/Courgette Regular.woff')at('woff');
}


section.inscriptionSection {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
}

/*Nav > NavLeft > logo*/
section.inscriptionSection .logo,
section.inscriptionSection .logo a {
	position: absolute;
	top: 5px;
	left: 30px;
	color: #fff;
	font-size: 32px;
	height: 69px;
	line-height: 69px;
	float: left;
	font-weight: 300;
	text-decoration: none;
	font-family: 'Courgette';
}
section.inscriptionSection .logo a img  {
	position: relative;
	max-height: 70px;
	max-width: 130px;
	float: left;
}

section.inscriptionSection .groupLeft {
	position: relative;
	width: 50%;
	height: calc(100% - 80px);
	top: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
section.inscriptionSection .groupLeft .profilGroup {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 60px 0 0 0;
	padding: 20px 30px;
	background: #212122;
	border-radius: 20px;
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1),
				0px 2px 0px 0px rgba(255, 255, 255, 0.1),
				0px 3px 0px 0px rgba(255, 255, 255, 0.1),
				0px -1px 0px 0px rgba(255, 255, 255, 0.1),
				0px -2px 0px 0px rgba(255, 255, 255, 0.1),
				0px -3px 0px 0px rgba(255, 255, 255, 0.1),
				2px 2px 20px 2px rgba(0, 0, 0, 0.8);
	box-sizing: border-box;
}

section.inscriptionSection .groupLeft .profilGroup h3 {
	font-size: 26px;
	font-weight: 100;
	line-height: 40px;
	font-family: "Fugaz One Regular";
}

section.inscriptionSection .groupLeft .profilGroup .table {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}
section.inscriptionSection .groupLeft .profilGroup .table .row {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 15px 0;
}
section.inscriptionSection .groupLeft .profilGroup .table .row:last-child {
	margin-bottom: 10px;
}
section.inscriptionSection .groupLeft .profilGroup .table .row.rowErreur {
	margin: 0;
	display: none;
}
section.inscriptionSection .groupLeft .profilGroup .table .row h5.title {
	font-size: 18px;
	line-height: 30px;
	letter-spacing: 0.5px;
}
section.inscriptionSection .groupLeft .profilGroup .table .row .input-field {
	position: relative;
	width: 400px;
	margin-left: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
}
section.inscriptionSection .groupLeft .profilGroup .table .row .input-field input {
	width: 100%;
	padding: 5px 10px;
	box-sizing: border-box;
	background: transparent;
	border: none;
	outline: none;
	font-size: 18px;
	color: #fff;
	font-weight: 100;
	resize: none;
	letter-spacing: 1px;
	line-height: 20px;
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1),
				0px 2px 0px 0px rgba(255, 255, 255, 0.1),
				0px 3px 0px 0px rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	transition: all 0.5s;
}

section.inscriptionSection .groupLeft .profilGroup .table .row .input-field input#pass1,
section.inscriptionSection .groupLeft .profilGroup .table .row .input-field input#pass2,
section.inscriptionSection .groupLeft .profilGroup .table .row .input-field input#pass1:focus,
section.inscriptionSection .groupLeft .profilGroup .table .row .input-field input#pass2:focus {
	padding: 5px 35px 5px 10px;
}
section.inscriptionSection .groupLeft .profilGroup .table .row .input-field input:focus {
	padding: 6px 20px;
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1),
				0px 2px 0px 0px rgba(255, 255, 255, 0.1),
				0px 3px 0px 0px rgba(255, 255, 255, 0.1),
				5px 5px 15px 5px rgba(0, 0, 0, 0.3);
}

section.inscriptionSection .groupLeft .profilGroup .table .row .input-field .icon#iconEye1,
section.inscriptionSection .groupLeft .profilGroup .table .row .input-field .icon#iconEye2 {
	position: absolute;
	right: 10px;
	top: 5px;
	height: 18px;
	width: 16px;
	fill: rgba(255, 255, 255, 0.6);
	cursor: pointer;
}

section.inscriptionSection .groupLeft .profilGroup .table .row .password-strength-meter {
	margin-top: 0;
}

section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck label,
section.inscriptionSection .groupLeft .profilGroup .table .row.rowConnect label {
	display: flex;
	flex-direction: row;
	cursor: pointer;
	margin: 0 20px;
}

section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck span,
section.inscriptionSection .groupLeft .profilGroup .table .row.rowConnect span {
	color: #fff;
	font-size: 18px;
	line-height: 24px;
}
section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck span a,
section.inscriptionSection .groupLeft .profilGroup .table .row.rowConnect span a {
	color: #73a839;
	font-weight: 900;
	cursor: pointer;
	text-decoration: underline;
	font-style: italic;
	transition: all 0.5s;
}
section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck span a:hover,
section.inscriptionSection .groupLeft .profilGroup .table .row.rowConnect span a:hover {
	text-decoration: none;
}

section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck .check {
	margin-right: 20px;
}
section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck .check input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	border-radius: 4px;
	width: 24px;
	height: 24px;
	border: 2px solid #999;
	transition: all 0.25s linear;
}
section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck .check input[type="checkbox"]:checked {
	border: 2px solid #73a839;
}
section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck .check input[type="checkbox"]::before {
	z-index: 1;
	position: absolute;
	top: -10px;
	left: 2px;
	content: url("/img/svg/icon-check.svg");
	height: 16px;
	width: 16px;
	opacity: 0;
	transition: all 0.25s linear;
}
section.inscriptionSection .groupLeft .profilGroup .table .row.rowCheck .check input[type="checkbox"]:checked::before {
	top: 3px;
	opacity: 1;
}

section.inscriptionSection .groupLeft .profilGroup .table .btn {
	font-size: 16px;
	padding: 8px 16px;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.2);
	background-color: #212122;
	border-radius: 20px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.5s;
}
section.inscriptionSection .groupLeft .profilGroup .table .btn:hover {
	color: #212122;
	border: 2px solid rgba(0, 0, 0, 0.4);
	background-color: rgba(204, 204, 204, 1);
	font-weight: 600;
}
section.inscriptionSection .groupLeft .profilGroup .table .btn.btnModif {
	position: absolute;
	right: 50px;
	bottom: -20px;
}
section.inscriptionSection .groupLeft .profilGroup .table .btnGris {
	color: #fff;
	border: 2px solid rgba(0, 0, 0, 1);
	background-color: #434343;
}
section.inscriptionSection .groupLeft .profilGroup .table .btnGris:hover {
	color: #434343;
	border: 2px solid rgba(0, 0, 0, 1);
	background-color: rgba(204, 204, 204, 1);
}

section.inscriptionSection .backgroundGroup {
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 30px 30px 0 0;
}
section.inscriptionSection .backgroundGroup .backgroundImg {
	z-index: -1;
	position: fixed;
	top: 0;
	right: 0;
	background-size: cover;
	background-position: right;
	width: 50%;
	height: 100%;
	-webkit-filter: opacity(50%);
	filter: opacity(50%);
}
section.inscriptionSection .backgroundGroup .backgroundImg::before {
	z-index: 1;
	position: fixed;
	content: '';
	width: 50%;
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	transition: 2.5s;
	background-image: linear-gradient(to left,
						rgba(32,32,30,0) 0%,
						rgba(32,32,30,.0) 5%,
						rgba(32,32,30,.1) 10%,
						rgba(32,32,30,.2) 20%,
						rgba(32,32,30,.3) 30%,
						rgba(32,32,30,.4) 40%,
						rgba(32,32,30,.5) 50%,
						rgba(32,32,30,.7) 60%,
						rgba(32,32,30,.8) 70%,
						rgba(32,32,30,.85) 80%,
						rgba(32,32,30,.9) 90%,
						rgba(32,32,30,1) 100%
					);
}
section.inscriptionSection .backgroundGroup .boxInfo {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	width: 100%;
}
section.inscriptionSection .backgroundGroup .boxInfo .title {
	width: 100%;
	margin-bottom: 20px;    
}
section.inscriptionSection .backgroundGroup .boxInfo .title span {
	font-size: 30px;
	font-weight: 300;
	line-height: 40px;
	font-family: "Courgette Regular";
	text-shadow: -2px 2px 5px #000, -3px 3px 5px #000, -4px 4px 5px #000;
}
section.inscriptionSection .backgroundGroup .boxInfo .synopsis {
	width: 50%;
}
section.inscriptionSection .backgroundGroup .boxInfo .synopsis span {
	font-size: 18px;
	font-weight: 300;
	line-height: 24px;  
}