body, html {  margin: 0; padding: 0; width: 100%; height: 100%; }
	
	#header { background: #fff url('images/login-background-top.jpg') repeat-x bottom left; }
	.btn-primary { display: block; float: right; background: #0284C0; padding: 15px 20px; color: #F2F8FA; border-radius: 3px; font-family: Arial, Helvetica, sans-serif; margin-right: 20px; }
	.btn-primary:hover { background: #3F6B90; color: #fff; cursor: pointer; }
	

	#header .header { margin-top: 30px; }
	#header .header .pencarte-site-logo { position: absolute; top: 0; }
	#header .header .message { position: absolute; top: 180px; width: 640px; color: #fff; font-family: Arial, Helvetica, sans-serif; }
	
	.grid-page-login { max-width: 1024px; margin: 0 auto; }
	
	
	#content { background: #fff url('images/login-background-bottom.jpg') repeat-x top left; }

	#form-login label { display: block; padding-left: 60px; margin-top: 30px; font-family: century gothic; color: #0284c0; font-size: 18px; }
	#form-login-door { position: absolute; left: 50%; margin-left: -200px; top: -140px; width: 856px; height: 616px; background: transparent url('images/form-login-door.png') no-repeat top left; float: right; }
	
	.field-bloc .icon { width: 80px; height: 60px; float: left; }
	.field-bloc .icon-login { background: transparent url('images/form-login-icon-login.png') no-repeat top left; }
	.field-bloc .icon-password { background: transparent url('images/form-login-icon-password.png') no-repeat top left; }
	
	.field-bloc .field {  height: 60px; margin-left: 80px; margin-right: 250px; padding-top: 20px; background: transparent url('images/form-login-line.png') repeat-x top left; }
	.field-bloc .dead-line {  width: 250px; height: 60px; background: transparent url('images/form-login-deadline.png') no-repeat top left; float: right; }
	
	.field-bloc .field input { font-size: 22px; width: 100%; background: #ddd; border: none; }
	*::-ms-backdrop, .field-bloc .field input { position: relative; top: -35px; } /* IE 11 */
	
	.btn-primary { display: block; float: right; background: #0284C0; padding: 15px 20px; color: #F2F8FA; border-radius: 3px; font-family: Arial, Helvetica, sans-serif; margin-right: 20px; }
	.btn-primary:hover { background: #3F6B90; color: #fff; cursor: pointer; }
	
	.login-error { display: block; background: url('images/white-50.png') repeat top left; font-family:Arial, Helvetica, sans-serif; border-radius: 10px; text-align: center; color: #c00; padding: 20px; border-top: 3px #fff solid; box-shadow: 0 1px 6px #600; }
	.login-error i { float: left; }

	#content .password-oublie { font-family: Arial, Helvetica, sans-serif; list-style: none; }
	#content .password-oublie a { color: #356083; text-decoration: none; }
	#content .password-oublie a:hover { text-decoration: underline; }
	

	@media (min-width: 1050px) {

		body, html { overflow-x: hidden; }

		#login { height: 100%; overflow: hidden; }
		#header { height: 250px; overflow: hidden; }
		
		
		
	
	}
	
	#login_footer { position: fixed; width: 100%; height: 40px; left: 0; bottom: 0; right: 0; text-align: center; background: #f5f5f5; color: #356083; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
	#login_footer i { position: relative; font-size: 30px; top: 5px; margin-right: 5px; transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); }
	
	/** =============================================================================
	  * Tablette
	  * ============================================================================= */
	  
	@media (min-width: 480px) and (max-width: 1050px) { /* (max-width: 768px) */
		
		#header .header { margin: 0; text-align: center; height: 150px; overflow: visible; }
		#header .header .pencarte-site-logo { left: 10px; }
		#header .header .message { position: absolute; top: 0; right: 20px; width: 360px; color: #fff; font-family: Arial, Helvetica, sans-serif;  }
		#form-login-door { display: none; }

		#btn-form-login-valid {
			position: fixed;
			z-index: 9999;
			bottom: 58px;
			right: 50px;
		}
		
	}
	
	
	
	
	/**
	  * Version mobile
	  */
	@media (max-width: 480px) {
		
		#header .header { margin: 0; text-align: center; height: 230px; overflow: visible; }
		#header .header .pencarte-site-logo { left: 50%; margin-left: -109px; }
		#header .header .message { width: auto; padding: 0 10px; color: #fff; font-family: Arial, Helvetica, sans-serif; margin-top: -40px; }
		
		#content { background: #fff; }
		
		#form-login label { display: block; margin-top: 30px; padding-left: 10px; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; color: #0284c0; font-size: 18px; }
		#form-login-door { display: none; }

		.field-bloc { padding: 10px; margin: 10px; border: 1px #bbb solid; }
		.field-bloc .field {  height: auto; margin: 0; padding: 0; background: none; }
		.field-bloc .field input { width: 100%; font-size: 22px; border: none; background: none; }
		.field-bloc .dead-line { display: none; }
		.field-bloc .icon { display: none; }
		
		.btn-primary { display: block; float: none; background: #0284C0; text-align: center; padding: 15px 20px;  margin: 0 10px; }
		
	}