@charset "iso-8859-1";
/* CSS Document */
  * {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
	box-sizing:border-box;
	
  }

  body, html {
/*    background-color: #6bbcf3;*/
	    background-color: #000;
    font-family:Montserat, Arial, helvetica, sans-serif;
    text-align: center;
  }

.backimage {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-image: url(fond-ete.jpg);
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;	
	top:0;
	}

@media only screen and (max-width: 1024px) {
	
body { 	}
  
  div.boxCnx {width:90% !important; margin:5% auto; background-color:#FFFFFF; position:relative; box-shadow: 1px 1px 10px rgba(0,0,0, 0.3);  }  
    input.Saisie { font-size:2em !important;  }
}

@media only screen and (min-width: 1024px) {
body { 	}
  
  div.boxCnx {width:500px; margin:25px auto; background-color:#FFFFFF; position:relative; box-shadow: 1px 1px 10px rgba(0,0,0, 0.3);  }  	
    input.Saisie { font-size:1em !important;  }
}


  div.boxTitre {
	color: #fff;
	font-size: 1.4rem;
	letter-spacing: -0.5px;
}

.version {
    padding-top: 10px;
    color: rgba(0, 0, 0, 0.8);
}

#entete {
    padding: 15px;
    background-color: #16B5E0;
	background-image: url(e-entete.png);
background-position: center left;
background-repeat: no-repeat;	
}


#pied {
font-size: 0.67rem;
color: #888;
padding: 10px;
text-align: center;
background-color: #eee;
line-height: 170%;
border-top: 1px solid #ccc;
	}

#pied a {
    text-decoration: none;
    color: #888;
}

#pied a:hover {
    color: #444;
}

	
  div.boxCorp {background-color:#FFFFFF; color:#444;padding:20px}
  
  form.formCnx {padding:20px;font-family:'Open Sans', Arial, helvetica, sans-serif; text-align: left;}
  

/* Change Autocomplete styles in Chrome*/
input:autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 30px #fff inset;
  transition: background-color 1s ease-in-out 0s;
}



  input.Saisie { 
	  background-color:#fff;
	  border-top: none;
	  border-bottom: 1px solid #ccc;
	  border-left: none;
	  border-right: none;
	  padding:10px;
	  margin:10px 0;
	  width:100%;

  }
  
	input.Saisie:focus { 
		background-color:#fff;
		border-top: none;
		border-bottom: 1px solid #000000;
		border-left: none;
		border-right: none;
		margin:10px 0;
		width:100%;
	}
  
  select.Saisie { 
	  background-color:#fff;
	  border : 1px solid #ccc;
	  padding:5px;
	  margin:10px 0;
	  width:100%;
  }
  
	  select.Saisie:focus { 
		  background-color:#fff;
		  border : 1px solid #000000;
		  padding:5px;
		  margin:10px 0;
		  width:100%;
	  }


#voirpass {cursor: pointer;
opacity: 0.7;
display: inline-block;
padding: 7px 7px;
margin-left: -4px;
border-bottom: 1px solid #aaa;
vertical-align: middle;}

#voirpass:hover {
background-color: #444;
color:#fff;
}
  
  .boxCorp a { font-size:0.8em; text-decoration:none; display:block; color:#456; margin:20px 0}
  .boxCorp a:hover { text-decoration:underline; }
  
  a.oublie {  }
  a.creer {  font-size: 1em; }
  a.lien {
	  text-decoration: none;
		color: rgba(255, 255, 255, 0.5);
		display: inline-block;
		margin: 5px;
		border-bottom: 2px transparent;
}
  a.lien:hover {border-bottom:2px solid #f70; color:#fff;}
  
  .btnCnx {padding: 8px 50px;
margin: 35px 0 0 0;
background-color: #f90;
border: none;
color: #fff;
border-radius: 4px;
cursor:pointer;}

  .btnCnx:hover {
background-color: #b8d200;
border-radius: 0px;
}
/* class validation form */
.champkO {
  border-bottom: 2px solid #f60 !important;
  color:#f60;
  background-color:#f60;
}

.champOK {
  border-bottom: 1px solid #ccc !important;
  color:#444;
  background-color:#6f0;
}

#monmsg {
	background-color:#9CF;
	color:#FFF;
	font-size : 0.8em;
	display:block;
	padding:5px;
}


/* anim logo */
@keyframes animCercle {
	0% { transform:rotateY(0deg);}
	
	99% { 
		 transform: rotate3d(0,1,0,180deg); 
		  fill:#000; 
		  opacity:0.7;
		/*transform:rotateY(180deg)*/
		
	}
	
	100%{  
	transform: rotate3d(0); 
	/* fill:#fff; */
	stroke:rgba(255,255,255, 0.35);;
	}
	
}

@keyframes animClicLogo {
	0% { transform:translateY(0px); }
	
	100% { transform:translateX(3000px)}
}


#Calque_1 {
    width: 100%;
	margin-top: 50px;
}

#circle4535 {
	transform-origin:center;
	}

.logoHover { 
transform-style: preserve-3d;
	animation: animCercle 0.6s linear forwards ;
	 fill:#fff;
	 cursor:pointer;
	 
	}

.logoClick {
	position:absolute;
	z-index:10;
	width:100%;
	animation: animClicLogo 5s ease};