body{
  text-align: center;
}

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

#bouton{
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin: 0 auto;
  margin-top: 2%;
}

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

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

#nom_chien, 
#race_chien,
#date_naissance_chien,
#sexe,
#sterilisation,
#poids,
#comportement,
#depense,
#infos_proprio,
#mail_mdp
{
  text-align: center;
  margin-top: 2%;
  display: none;
}

#nom_chien h4, #race_chien h4, #date_naissance_chien h4, #sterilisation h4, #poids h4, #sexe h4, #infos_proprio h4, #mail_mdp h4{
  color: #777;
  margin-bottom: 3%;
}

#nom_chien p,
#champs_nom_chien,
#race_nom_chien,
#champs_race_chien1,
#champs_race_chien2,
#nom_date_naissance_chien,
#champs_date_naissance_chien,
#sexe,
#sterilisation_text,
#poids_text,
#poids_chien {
  font-weight: bold;
  font-size: 35px;
  text-align: center;
}

#champs_nom_chien, #champs_race_chien1, #champs_race_chien2, #champs_date_naissance_chien, #poids_chien{
  width: 20%;
  margin: 0 auto;
}

.btn_choix{
 background-color: #212B33 !important;
 color: white !important;
 margin-bottom: 1%;
 font-size: 33px !important;
 min-width: 210px;
 font-weight: bold;
 border-radius: 15px;
}

hr{
  width: 100%;
}

.info{
  width: 40%;
  text-align: justify;
  margin: 0 auto;
}

#champs_race_chien2{
  margin-top: 2%;
}

#demande_deuxieme_race{
  font-weight: bold;
  font-style: italic;
  color: #ddba77;
  border: 1px solid #ddba77;
  margin: 2%;
}

#noKnow{
  font-weight: bold;
  margin-top: 1%;
}

.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;
}

.retour, .retour:hover{
  font-weight: bold;
  color: #ccc;
  text-decoration: none;
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 15px;
}

form{
  width: 60%;
  margin: 0 auto;
  padding: 50px;
  margin-top: 3%;
  border-radius: 25px;
  background-color: #212b33;
  box-shadow: 16px 16px 0px 2px #ccc, 32px 32px 0px 2px rgba(0, 0, 0, 0.1);
}

#nom, #prenom, #adresse, #cp, #ville{
  width: 50%;
  margin: 2%;
  font-weight: bold;
}

#adresse{
  width: 45% !important;
}

label{
  color: #fff;
  margin: 5px;
  text-align: left;
  width: 100%;
}


/*Formulaire*/
#container{
  background-color: white;
  display: flex;
  justify-content: space-around;
  width: 60%;
  margin: 0 auto;
  margin-top: 5%;
  margin-bottom: 5%;
  padding:50px;
  border-radius: 15px;
  border: 2px solid #11460e;
}

#indication{
  padding: 25px;
  text-align: left;
  margin-left: 8%;
  width: 50%;
} 
#indication p {
  color :#3b3b3b;
}

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

form{
  margin: 0 auto;
}

.form-control{
  width: 75%;
}

input{
  width: 30%;
}

label i{
  color: #ddba77;
  font-size: 20px;
}


button[type=submit]{
  border: 1px solid #ddba77;
  color: #ddba77;
}

button[type=submit]:hover{
  background-color: #ddba77;
  color: white;
  border: 1px solid #ddba77;
}

.group_input{
  display: flex;
  justify-content: space-around;
}



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

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

  #logo{
    margin-top: 20%;
  }

  h4{
    font-size: 18px;
  }

  #nom_chien p,
  #race_nom_chien,
  #nom_date_naissance_chien,
  #sexe,
  #sterilisation_text,
  #poids_text {
    font-size: 22px;
    margin-top: 10% !important;  
  }  


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

  #poids_chien {
    width: 30% !important;
  }

  #suivant, #suivant2, #suivant3, #suivant4, #suivant5{
    position: fixed;
    bottom: 5%;
    left: 25%;
  } 

  #infos_proprio form{
    width: 80%;
  }

  .group_input, #container{
    flex-direction: column;
  } 

  .group_input input, #adresse {
    width: 95% !important;
    margin-top: 50px;
  }


  #container{
    width: 100%;
    border: none;
  }

  #container form {
    width: 100%;
  }

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

  .info{
   font-size: 12px;
  }

  .form-control{
    margin-bottom: 20px !important;
  }

  .final{
    width: 100% !important;
  }
}