/* >–––––––––––––––––––––––––––––––––––––– FORM ELEMENTS –––––––––< */

.formBox form {
	display: block;
	/*margin: 0 auto;*/
	width: 100%;
	/*text-align: center;*/
	}
	.formBox input, textarea, select { font-family: "HelveticaNeueETW01-45Lt", sans-serif; }

	.formBox label { 
		display: block;
		margin-bottom: 1rem;
		font-family: "HelveticaNeueETW01-45Lt", sans-serif; 
		font-size: 1.6rem; line-height: 1.6rem; letter-spacing: 0.1rem; 
		color: #54CFFD;
	}

	.formBox label.mssg { 
		display: none;
		margin-bottom: 1.5rem;
		font-family: "HelveticaNeueETW01-45Lt", sans-serif; 
		font-size: 1.8rem; line-height: 2rem; letter-spacing: 0.1rem; 
		color: #FF688B;
	}
	.formBox label.mssg a:hover { color: #000; }

	.formBox input {
		-webkit-appearance: none;
		display: block;
		box-sizing: border-box;
		margin: 0 auto;
		margin-bottom: 2rem; 
		padding: 1.2rem 2rem;
		width: 100%; 
		font-size: 1.6rem; line-height: 1.8rem; letter-spacing: 0.1rem; 
		color: #fff;
		background: #424242;
		border-radius: 0.6rem;
		border: none;
		/*border: 1px solid #424242;
		border-radius: 1rem;*/
	}
	.formBox input.err { border: 1px solid #FF688B; }
	.formBox input::-moz-placeholder { font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.6rem; color: #aaa; }
	.formBox input::-ms-input-placeholder { font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.rem; color: #aaa; }
	.formBox input::-webkit-placeholder { font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.6rem; color: #aaa; }
	.formBox input::placeholder { font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.6rem; color: #aaa; }

	.formBox input[type=submit] {
		border: none; background: none; border-radius: 0; outline: none;

		box-sizing: border-box;
		margin:0 auto;
		padding: 1.5rem 4rem;
		width: auto;
		height: auto;
		font-family: "Proxima Nova W01 Regular", sans-serif; 
		font-size: 2.5rem; line-height: 2.5rem; 
		letter-spacing: 0;
		color: #54CFFD;
		/*border-radius: 1rem;
		background-color: #5573D6;*/
	}
	.formBox input[type=submit]:hover { 
		cursor: pointer; 
		color: #FFD100;
	}

	.formBox textarea 
	{
		-moz-appearance: none;
		-webkit-appearance: none;
		box-sizing: border-box;
		display: block;
		margin-bottom: 2rem; 
		padding: 1rem 2rem;
		width: 100%; 
		height: 15rem;
		font-size: 1.6rem; line-height: 1.8rem; letter-spacing: 0.1rem; 
		color: #fff;
		background: #424242;
		border: none;
		border-radius: 0.6rem;
		overflow: hidden; /* IE */
	}
	.formBox textarea.err { border: 1px solid #f00; }
	
	.formBox input[type=checkbox] {
		-moz-appearance: none;
		-webkit-appearance: none;
		box-sizing: border-box;
		display: inline-block; vertical-align: middle;
		margin-right: 1rem; 
		margin-bottom: 0;
		padding: 0;
		width: 2.5rem; 
		height: 2.5rem;
		background: none;
		background-color: #424242;
		border: 1px solid #54CFFD;
		border-radius: 0.4rem;
		cursor: pointer;
	}
	.formBox input[type=checkbox]:checked { 
		/*border: none; */
		/*background: url("../../assets/images/check-mark.jpg") no-repeat center center;
		background-size: contain;*/
		background-color: #54CFDD;
	}
	.formBox input[type=checkbox]+label { 
		display: inline-block; vertical-align: top;
		margin-bottom: 0; 
		font-size: 1.6rem; line-height: 1.8rem; letter-spacing: 0.1rem; 
		color: #54CFFD;
	}
	.formBox input[type=checkbox]+label a { 
		font-family: "HelveticaNeueETW01-75Bd", sans-serif; 
		color: #54CFFD;
	}
	.formBox input[type=checkbox]+label a:hover { color: #5573D6; }

	.formBox div.checkbox { margin: 1rem 0 2rem 0; }
	.formBox div.terms input[type=checkbox]+label { margin-top: 0.5rem; font-size: 1.2rem; line-height: 1.4rem; }

	.formBox select {
		-moz-appearance: none;
		-webkit-appearance: none;
		box-sizing: border-box;
		margin-bottom: 2rem; padding: 0.8rem 1rem;
		margin: 0 auto;
		margin-bottom: 2rem; 
		padding: 1rem 2rem;
		width: 100%; 
		height: 5rem;
		font-size: 1.6rem; line-height: 1.8rem; letter-spacing: 0.1rem; 
		color: #fff;
		background: #424242 url('../../assets/images/select_arrow.png') no-repeat right;
		/*border: 1px solid #aaa;*/
		border: none;
		border-radius: 0.6rem;
		overflow: hidden;
	}
	.formBox select::-ms-expand { /* IE */
	    display: none;
	}
	.formBox select.err { border-color: #f00; }


/* >–––––––––––––––––––––––––––––––––––––– SECTION FORM –––––––––< */

.formBox { 
	display: flex; 
	flex-direction: column; 
	align-items: center;
	justify-content: center;
	}

	.formBox .maxwidth { width: 100%; }

	.formBox header {
		margin-top: 4rem;
		text-align: center;
	}
		#iViewport > section.formBox header h1 {
			margin-bottom: 2rem;
		    font-size: 6.8rem; line-height: 7rem;
		    text-align: center;
		    color: #FFFEF7;
		}

		.formBox header p { 
			text-align: center; 
			color: #424242;
		}
		.formBox.boss header p { color: #fff; }
		.formBox.cands header p { color: #B4D4FF; }
		.formBox.ri header p { color: #424242; }

	.formBox .box { 
		box-sizing: border-box;
		margin: 0 auto; 
		padding: 2rem;
		max-width: 60rem;
		/*border: 1px solid #D0E7FB;*/
		border-radius: 0.6rem;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
	}
	.formBox.short .box { max-width: 50rem; }

	.formBox .box nav {
		display: flex;
		align-items: center;
		margin-bottom: 3rem;
	}
		.formBox .box nav a {
			display: block;
			position: relative;
			box-sizing: border-box;
			padding: 1.5rem 0;
			font-family: "HelveticaNeueETW01-45Lt", sans-serif;
			font-size: 2rem; line-height: 2rem;
			color: #8A9EAD; color: #eee;
		}
		.formBox .box nav a:last-child { margin-left: auto; }
		.formBox .box nav a:hover { color: #fff; }

		.formBox .box nav a::before {
	            content: "";
	            position: absolute; left: 20%; bottom: 0.5rem;
	            width: 0; height: 1px;
	            background-color: #fff;
	            transition: width .5s;
	        }
	        .formBox .box nav a:hover::before,
	        .formBox .box nav a.current::before {
	            content: "";
	            position: absolute; left: 20%; bottom: 0.5rem;
	            width: 60%; height: 1px;
	            background-color: #fff;
	        } 
	        .formBox .box nav a.current,
	        .formBox .box nav a:hover.current { color: #ccc; cursor: default; }


	.formBox form .demi > div {
		display: inline-block; vertical-align: top;
		width: 48%;
	}
	.formBox form .demi > div:first-child { margin-right: 4%; }


	.formBox div.genre {
		margin-bottom: 2rem;
		text-align: center;
	}
		.formBox div.genre section {
			display: inline-block; vertical-align: top;
			width: 30%;
			text-align: center;
			cursor: pointer;
		}
			.formBox div.genre section label { color: #54CFFD; }

			.formBox div.genre section div {
				margin: 0 auto 2rem auto;
				position: relative;
				width: 12rem;
				border-radius: 2rem;
				border: 2px solid #424242;
			}
			.formBox div.genre section div::before {
				content: ''; display: block; padding-top: 100%;
			}
				.formBox div.genre img {
					position: absolute; left: 0; top: 0;
					width: 100%;
					height: auto;
					opacity: 0.6;
				}
		.formBox div.genre section:hover label,
		.formBox div.genre section.current label { color: #fff; }
		.formBox div.genre section:hover div,
		.formBox div.genre section.current div { border-color: #54CFFD; }
		.formBox div.genre section:hover img,
		.formBox div.genre section.current img { opacity: 1; }


	.formBox div.li li {
		display: inline-block; vertical-align: top;
		box-sizing: border-box;
		margin-right: 2rem;
		margin-bottom: 3rem;
		padding: 1.5rem 4rem;
		font-size: 1.6rem; line-height: 1.8rem;
		color: #fff;
		list-style: none;
		background: #424242;
		border-radius: 0.6rem;
		border: none;
		cursor: pointer;
	}
	.formBox div.li li:hover,
	.formBox div.li li.current { color: #000; background-color: #54CFDD; }

	
	.formBox #errs > .retour { 
		display: none; 
		box-sizing: border-box; 
		padding-right: 4rem; padding-top: 2rem; 
	}
		.formBox #errs > .retour h3 { 
			margin-bottom: 2rem;
			font-size: 4rem; line-height: 4.2rem; 
			color: #54CFFD; 
		}

		.formBox #errs > .retour p a { color: #fff; }
		.formBox #errs > .retour p a:hover { color: #000; }


/* >–––––––––––––––––––––––––––––––––––––– CANDS LOG-IN/SIGNUP –––––––––< */

.formBox.cands .inputbox {
	position: relative;
	}
	.formBox.cands .inputbox input {
		margin-bottom: 3rem; 
		padding: 2rem 4rem 2rem 6rem;
		/*border-radius: 4rem;*/
	}

	.formBox .inputbox .icon {
		position: absolute; left: 2rem; top: 2rem;
		width: 2rem;
	}
	.formBox .inputbox .icon::before { content: ''; display: block; padding-top: 100%; }
		.formBox .inputbox .icon svg {
			position: absolute;
			left: 0; top: 0;
			width: 100%;
			height: 100%;
			fill: #8A9EAD;
		}

.formBox.cands p.forgot { 
	margin: 2rem 0 0 0;
	width: 100%; 
	text-align: right;
}
.formBox.cands p.forgot a {
	font-family: "HelveticaNeueETW01-45Lt", sans-serif;
	font-size: 1.2rem; line-height: 1.2rem;
	text-align: right;
	color: #ccc;
}


.formBox form.two,
.formBox form.three { display: none; }

.formBox aside#back {
	margin-top: -2rem;
	margin-bottom: 1rem;
	text-align: right;
}
	.formBox aside#back div {
		display: inline-block;
		padding: 1rem;
		font-family: "HelveticaNeueETW01-45Lt", sans-serif;
		font-size: 1.4rem; line-height: 1.4rem;
		cursor: pointer;
	}
	.formBox aside#back div:hover { color: #fff; }

.formBox form .title { 
	display: flex; 
	align-items: center;
	margin-bottom: 3rem;
}

	#iViewport > section.formBox form .title h2 {
		margin-bottom: 1rem;
		font-family: "Proxima Nova W01 Thin", sans-serif;
		font-size: 3rem; line-height: 3.2rem;
		text-align: left;
		color: #FFFEF7;
	}
	.formBox form .title h2 span { font-family: "Proxima Nova W01 Regular", sans-serif; }

	.formBox form .title p {
		margin-bottom: 0;
		font-family: "Poppins-Light", sans-serif;
		color: #1D2329;
	}

	.formBox form .title section {
		display: none;
		position: relative;
		margin-right: 2rem;
		width: 12rem;
		border-radius: 2rem;
		border: 2px solid #424242;
	}
	.formBox form .title section::before {
		content: ''; display: block; padding-top: 100%;
	}
		.formBox form .title img {
			position: absolute; left: 0; top: 0;
			width: 100%;
			height: auto;
		}


.formBox header p.apply { color: #5573D6; }





/* >–––––––––––––––––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF ––––––––––––––––––––––– REACTIF –––––––––< */


@media all and (max-width: 1000px) {
	/* > SECTION FORM ––––––< */
	.formBox header { margin-top: 0; }
}

@media all and (max-width: 800px) {
	/* > HEADER BYPASS ––––––< */
	nav#iNBot { padding-top: 1.5rem; }
	.formBox .box nav a { font-size: 1.8rem; line-height: 1.8rem; }

	/* > FORM ––––––< */
	.formBox label { font-size: 1.4rem; line-height: 1.6rem; }
	.formBox input[type=submit] { padding: 1.2rem 3rem; /*font-size: 1.6rem; line-height: 1.6rem;*/ }
	.formBox div.terms { margin: 2rem 0; }
	.formBox input[type=checkbox] { margin-bottom: 0.5rem; }
	/*.formBox input::-moz-placeholder { font-size: 1.6rem; line-height: 1.6rem; }
	.formBox input::-ms-input-placeholder { font-size: 1.6rem; line-height: 1.rem; }
	.formBox input::-webkit-placeholder { font-size: 1.6rem; line-height: 1.6rem; }
	.formBox input::placeholder { font-size: 1.6rem; line-height: 1.6rem; }*/

	/* > SECTION FORM ––––––< */
	#iViewport > section.formBox header h1 { font-size: 5rem; line-height: 5.2rem; }

	/* > CANDS LOGINS/SIGNUP ––––––< */
	.formBox.cands .inputbox input { padding: 1.5rem 2.5rem 1.5rem 5rem; }
	.formBox .inputbox .icon { position: absolute; left: 1.5rem; top: 2rem; width: 2rem; }
	#iViewport > section.formBox form .title h2 { font-size: 2.4rem; line-height: 2.6rem; }
	.formBox form .title section { width: 8rem; }
}


@media all and (max-width: 600px) {
	/* > SECTION FORM ––––––< */
	.formBox form .demi > div { display: block; width: 100%; }
	.formBox form .demi > div:first-child { margin-right: 0; }
	.formBox div.genre section div { width: 8rem; }
	.formBox #errs > .retour h3 { font-size: 3rem; line-height: 3.2rem;  }
}