body{
font-family:"Ubuntu", sans-serif;
font-size:18px;
margin:0;
padding:0;
line-height:1.7em;
background:#FFF;
letter-spacing:1px;
}

a{
text-decoration:none;
color:#000;
}

header,p,nav,section,footer{
margin:0;
padding:0;
overflow:hidden;
}
img{border:none;}
.clear{
	clear:both;
}
.content{
	width:80%;
	margin:0 auto;
	padding:0px 0 0px 0;
	clear:both;
}
@keyframes breath {
  0%   { background-size: 100% auto; }
  50% { background-size: 150% auto; }
  100% { background-size: 100% auto; }
}
.backgroundlogin{
width:100% !important;
	background:rgba(0,0,0,0) url(../images/backlogin.jpg) center left no-repeat;
	background-size:cover;
	padding-top:0px !important; 
	margin:0 !important;
    height:100vh;	
	animation: breath 90s linear infinite;
}


#login{
	width:540px;
	height:auto;
	margin:auto;
	box-shadow:0px 0px 18px rgba(0,0,0,0.5);
	padding:25px 0px 25px 0;
	background:#FFF;
	border-radius:25px;
	position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#login h1{
	text-align:center;
	margin-bottom:25px;
}
#login .profileformicone{
display:flex;
justify-content:center;
align-items:center;
}
.profileformicone{
	width:150px;
	height:150px;
	border-radius:50%;
	background:#d8bf8a;
	margin:25px auto;
}
.loginform{
	width:80%;
	margin:0 auto;
}
.erreur{
	color:red;
	text-align:center;
}
.loginform .authenFormulaire div{
	width:100%;
	margin:0 auto;
	margin-bottom:25px;
	position:relative;
}
.loginform .authenFormulaire input{
	width:100%;
	height:50px;
	border:none;
	border-bottom:2px solid rgba(0,0,0);
	text-indent:45px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:16px;

}
.loginform .authenFormulaire input:focus{
	outline:none;
}
.loginform .authenFormulaire .iconechamp{
	position:absolute;
	top:20px;
	left:5px;

}
.loginform .authenFormulaire .bouton{
	background:#d8bf8a;
	text-indent:0px;
	color:#FFF;
	border:none;
	transition:background 1s ease;
	border-radius:15px;
	margin-top:45px;
	text-align:center;
	height:75px;
	font-size:bold !important;
}
.loginform .bouton:hover{
background:#4f4529;	
transition:background 1s ease;
}
.fa-eye{
	position:absolute;
	right:15px;
	top:25px;
	cursor:pointer;
}


.inputvide{
	color:red;
	font-size:12px;
}
.goodpass{
	color:green;
	text-align:right;
	display:block;
	position:relative;
	top:-35px;
	font-size:22px;
}

.alreadyconnected{
	background:#FFF;
	border-radius:15px;
	padding:8px;
	font-size:16px;
	font-weight:bold;
}
.alreadyconnected a {
color:green;	
}

@media all and ( max-width: 480px ) {
		#login{
	width:300px;
	height:auto;
	
}
.profileformicone{
	width:150px;
	height:150px;
	border-radius:50%;
	background:#d8bf8a;
	margin:25px auto;
}
.backgroundlogin{
width:100% !important;
	background:rgba(0,0,0,0) url(../images/backlogin.jpg) top left no-repeat;
	background-size:cover;
	padding-top:0px !important; 
	margin:0 !important;
    height:100vh;	
	animation:none;
}
}
@media all and ( min-width: 481px ) and ( max-width: 979px ){
	#login{
	width:340px;
	height:auto;
	
}
.profileformicone{
	width:75px;
	height:75px;
	border-radius:50%;
	background:#d8bf8a;
	margin:25px auto;
}
.backgroundlogin{
width:100% !important;
	background:rgba(0,0,0,0) url(../images/backlogin.jpg) top left no-repeat;
	background-size:cover;
	padding-top:0px !important; 
	margin:0 !important;
    height:100vh;	
	animation:none;
}
}
@media all and (min-width:980px) and ( max-width: 1255px ) {
	#login{
	width:340px;
}
.backgroundlogin{
width:100% !important;
animation:none;
}
	
}