/*General */
@keyframes fondu {
	0% {
		opacity : 0;
	}
	100% {
		opacity: 1;
	}
}

.alert{
	position: absolute;
	top: 0;
	left: 1%;
	animation: fondu 1s 0s;
}

body{
	background: rgb(255,255,255);
	height: 100vh;
	position: relative;
	text-align: center;
}

 #container,  #logo, #myProgress, h4 {
    animation: fondu 3s 0s;
  }

#logo {
	width: 150px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5%;
}

#myProgress {
	width: 50%;
	background-color: #ccc;
	margin: 0 auto;
	margin-top: 3%;
	border-radius: 25px;
}

#myBar {
	width: 1%;
	height: 5px;
	background-color: #ddba77;
	border-radius: 25px;
}

h4{
	color: #777;
  	margin-bottom: 3%;
  	margin-top: 15px;
}

/*Formulaire*/
#container{
	background-color: white;
	width: 60%;
	margin: 0 auto;
}

form{
	width: 100%;
	margin: 0 auto;
}

.form-control{
	width: 75%;
}

input{
	width: 30%;
}

.form-group p, #champs_adresse_mail, #champs_password{
  font-weight: bold;
  font-size: 35px;
  text-align: center;
}

#champs_adresse_mail, #champs_password{
  width: 40%;
  margin: 0 auto;
  margin-bottom: 60px;
  color: #ddba77;
}

.suivant{
  background-color: #212B33 !important;
  color: #fff!important;
  font-weight: bold;
  padding: 15px;
  width: 200px;
  border-radius: 150px;
  border: 2px solid #000;
  font-size: 20px;
}

#indication{
	padding: 25px;
} 

#indication a {
	color :#ddba77;
	font-weight: bold;
	font-size: 15px;
}

/*Format téléphone */
@media(max-width: 768px){
	@keyframes fondu{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}

	#myProgress {
		width: 50%;
	}

	#logo{
		margin-top: 20%;
	}

	h4{
		font-size: 18px;
	}

	.form-group p
	{
		font-size: 22px;
	}  


	input{
		width: 80% !important;
		margin-bottom: 150px;
	}

	#suivant{
		margin-bottom: 5%;
	} 

	#container{
		width: 100%;
		border: none;
		margin-top: 10%;
	}

	#container form {
		width: 100%;
	}

	#indication{
		padding: 50px;
		margin-left: 0;
		width: 100%;
	} 
}