@font-face {
	font-family: HelveticaNeue;
	src: url("./fonts/HelveticaNeueLTCom Roman.TTF") format("truetype");
	text-rendering: optimizeLegibility;
	font-style: normal;
	font-weight: normal;
}

.login-img1 {
	background-image: url("images/login-img1.jpg");
}

.login-img2 {
	background-image: url("images/login-img2.jpg");
}

.login2-img1 {
	background-image: url("images/login2-img1.jpg");
}

.login3-img1 {
	background-image: url("images/login3-img1.jpg");
}

.login-fond1 {
	background-image: url("images/fond-1.jpg");
}

.login-fond2 {
	background-image: url("images/fond-2.jpg");
}

.login-fond3 {
	background-image: url("images/fond-3.jpg");
}

.login-fond4 {
	background-image: url("images/fond-4.jpg");
}

.login-fond5 {
	background-image: url("images/fond-5.jpg");
}

.login-img1, .login-img2, .login2-img1, .login3-img1, .login-fond1, .login-fond2, .login-fond3, .login-fond4, .login-fond5 {
	background-repeat: no-repeat;
	background-size: cover;
}

.login-header {
	height: 100px;
	width: 1200px;
	padding-left: 15px;
	padding-right: 15px;
	/*top: 10px;
	position: absolute;*/
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 15px;
}

.login-header .container {
	height: 100px;
	width: 1170px;
}

.login-header .container .left {
	background-image: -moz-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	opacity: 0.902;
	width: 284px;
	height: 106px;
	float: left;
    border-radius: 5px;
}

.login-header .container .separator {
	height: 106px;
	width: 2px;
	float: left;
}

.login-header .container .left .logo {
	height: 100px;
	width: 100%;
	background-image: url("images/logo.png");
	background-repeat: no-repeat;
	background-size: 250px auto;
	background-position: center center;
}

.login-header .container .right {
	background-image: -moz-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	opacity: 0.902;
	width: 884px;
	height: 106px;
	float: left;
    border-radius: 5px;
}

.login-header .text {
	color: rgb(76, 75, 75);
	line-height: 100px;
	vertical-align: middle;
	margin-left: 20px;
	text-decoration: none;
	font-size: 25px;
}

.login-footer {
	height: 62px;
	width: 1200px;
	/*bottom: 0;
	position: absolute;*/
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.login-footer .container {
	background-image: -moz-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	opacity: 0.902;
	height: 62px;
	width: 1170px;
    border-radius: 5px;
}

.login-footer .website-url {
	color: rgb(193, 8, 43);
	line-height: 62px;
	vertical-align: middle;
	margin-left: 20px;
	margin-right: 215px;
	text-decoration: none;
}

.login-footer .link {
	font-size: 17px;
	color: rgb(76, 75, 75);
	line-height: 62px;
	-moz-transform: matrix(1.14347941423248, 0, 0, 1.14347941423248, 0, 0);
	-webkit-transform: matrix(1.14347941423248, 0, 0, 1.14347941423248, 0, 0);
	-ms-transform: matrix(1.14347941423248, 0, 0, 1.14347941423248, 0, 0);
	text-decoration: none;
	vertical-align: middle;
	margin-left: 20px;
	margin-right: 20px;
}

.login-footer .separator {
	width: 1px;
	height: 21px;
	background-color: rgb(76, 75, 75);
	line-height: 62px;
	text-decoration: none;
	vertical-align: middle;
}

.login-box {
	position: relative;
	padding-top: 30px;
	background-image: -moz-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%);
	opacity: 0.949;
	box-shadow: 2.5px 4.33px 5px 0px rgba(1, 1, 1, 0.133);
	width: 370px;
	height: 186px;
	/*top:200px;
	left:500px;*/
	margin-top: 135px;
	margin-bottom: 155px;
	margin-left: auto;
	margin-right: auto;
    border-radius: 5px;
}

.login-box.login2 {
	height: 260px;
}

.login-box.login3 {
	height: 288px;
}

.login-box .input-field {
	border-width: 2px;
	border-color: rgb(181, 181, 181);
	border-style: solid;
	border-radius: 9px;
	background-color: rgb(255, 255, 255);
	width: 324px;
	height: 41px;
	padding: 8px
}

.login-box .input-field:disabled{
	background-color: transparent;
}

.login-box .button-field {
	border-width: 2px;
	border-color: rgb(226, 12, 53);
	border-style: solid;
	border-radius: 9px;
	background-image: -moz-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	width: 126px;
	height: 40px;
	font-size: 14px;	
	font-family: "HelveticaNeue";
	color: rgb(255, 255, 255);
	text-transform: uppercase;
	line-height: 40px;
	position: relative;
	margin-top: 20px;
	margin-right: 20px;
	text-align: left;
}

.button-valider {
	border-width: 2px;
	border-color: rgb(226, 12, 53);
	border-style: solid;
	border-radius: 9px;
	background-image: -moz-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	width: 126px;
	height: 40px;
	font-size: 14px;	
	font-family: "HelveticaNeue";
	color: rgb(255, 255, 255);
	text-transform: uppercase;
	line-height: 40px;
	position: relative;
	margin-top: 20px;
	margin-right: 20px;
	text-align: left;
	margin-left: 20px;
	margin-bottom: 20px;
	text-indent: 40px;
}

.button-red-center {
	border-width: 2px;
	border-color: rgb(226, 12, 53);
	border-style: solid;
	border-radius: 9px;
	background-image: -moz-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(227, 14, 54) 0%, rgb(186, 7, 41) 100%);
	width: 335px;
	height: 40px;
	font-size: 14px;
	font-family: "HelveticaNeue";
	color: rgb(255, 255, 255);
	text-transform: uppercase;
	line-height: 40px;
	position: relative;
	margin-top: 20px;
	margin-right: 20px;
	text-align: left;
	margin-left: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.button-valider .head {
	background-image: url("images/head.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 32px;
	height: 33px;
	margin-left: 0px;
	position: absolute;
	left: 5px;
	top: 2px;
}

.button-retour {
	border-width: 2px;
	border-color: transparent;
	border-style: solid;
	border-radius: 9px;
	width: 126px;
	height: 40px;
	font-size: 15px;
	font-family: "HelveticaNeue";
	color: rgb(227, 14, 54);
	text-transform: uppercase;
	line-height: 40px;
	position: relative;
	margin-top: 20px;
	margin-right: 20px;
	text-align: left;
	margin-left: 20px;
	margin-bottom: 20px;
	text-indent: 40px;
}

.button-retour .arrow {
	background-image: url("images/triangle-left-red.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 10px;
	height: 15px;
	margin-left: 0px;
	position: absolute;
	left: 25px;
	top: 13px;
}

.login-box .button-field  .triangle-right {
	background-image: url("images/triangle-right.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 9px;
	height: 14px;
	margin-left: 20px;
	position: absolute;
	left: 80px;
	top: 13px;
}

.login-box .text {
	font-size: 14px;
	font-family: "HelveticaNeue";
	color: rgb(76, 75, 75);
	line-height: 40px;
	margin-left: 30px;
}

.login-box .text2 {
	font-size: 27px;
	font-family: "HelveticaNeue";
	color: rgb(76, 75, 75);
	line-height: 40px;
}

.button-headset {
	border-width: 2px;
	border-color: rgb(226, 12, 53);
	border-style: solid;
	border-radius: 9px;
	background-color: rgba(255, 255, 255, 0.8);
	width: 160px;
	height: 40px;
	font-size: 15px;
	font-family: "HelveticaNeue";
	color: rgb(226, 13, 53);
	text-transform: uppercase;
	line-height: 36px;
	position: relative;
	margin-top: 25px;
	text-indent: 15px;
	float: left;
	cursor: pointer;
}

.button-headset  .headset {
	background-image: url("images/headset.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	margin-left: 20px;
	position: absolute;
	top: 10px;
	left: -10px;
}

.button-demo {
	border-width: 2px;
	border-color: rgb(226, 12, 53);
	border-style: solid;
	border-radius: 9px;
	background-color: rgba(255, 255, 255, 0.8);
	width: 126px;
	height: 40px;
	font-size: 15px;
	font-family: "HelveticaNeue";
	color: rgb(226, 13, 53);
	text-transform: uppercase;
	line-height: 36px;
	position: relative;
	margin-top: 25px;
	text-indent: 10px;
	float: right;
	cursor: pointer;
}

.exclamation-mark {
	background-image: url("images/exclamation-mark.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 100px;
	height: 101px;
	margin-left: auto;
	margin-right: auto;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}