@import url("general.css");


h1{
    color: #05050c;
    text-align: center;
    font-size: 35px;
    letter-spacing: 8px;
    font-family: 'Metal', cursive;
}

.container{
    margin:0 auto;
    width: 50%;
    text-align: center;

}

form{
  position: relative;
  background-color: rgb(28, 28, 22);
  color:#f8f1f1c4;
  font-weight:bold;
  border:3px solid rgb(9, 61, 235);
  border-radius: 10px;

  /* CHANGÉ */
  width: 100%;
  max-width: 500px;

  margin: 50px auto 25px auto;
  padding: 15px;
}


input[type="text"],
 input[type="email"]{
    width:85%; 
    height: 30px;
    background-color: #d5d5d5;
    border: 0;
    border-radius: 25px;
    margin: 10px;
   }

   input[type="text"]:hover{
    background-color: #2a82f6;
   }

   input[type="email"]:hover{
    background-color: #2a82f6;
   }


   input[type="submit"]{
    padding:12px;
    background-color:#989a87 ;
    border: 0;
    border-radius: 50px;
     }

 input[type="submit"]:hover{
    background-color: #333;
    color:#d5d5d5;
    box-shadow: -webkit-box-shadow -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
    box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);;}
  
  
  select{
    width: 80%;
    height:30px;
    border-radius: 25px;
    border:0;
    background-color: #d5d5d5;
    margin: 10px auto;
    display: block;
  }

  .imagesite{
    width:100%;
    height:550px;
  }

  .imageride{
    width: 1520px;
    height:500px;
    
}

.legend{
  margin-left:auto;
  margin-right:auto;
}


.textInput:focus {
  outline: none;
}

.erreur {
  color: #ff0000;
}

.invalide {
  border: 2px solid #ff0000 !important;
  background-color: #ffc0cb !important;
}
.valide {
  border: 2px solid #00ff00 !important;
  background-color: #ffffff !important;
}
.label {
  color: #ff0000;
}
.labelOk {
  color: #00ff00 !important;
}

.fieldset{
  width: 100%;          
  position: relative;
  border: none;
  padding: 10px;
  box-sizing: border-box;
}

.input-container{
  position: relative;
  width: 100%;
  text-align: center;
  margin-left: 0;
}

.texte{
  width: 95%;
  margin: 10px auto;
  display: block;
}

.reponse2{
  position:relative;
  margin-left:80%;
  margin-right:auto;
  font-size:14px;
  color:#ffffffd1;

  width:15%;
  height: 10%;
  margin-top: 5%;
  
}

.reponse{
  position:relative;
 font-weight:900;
 font-size:28px;
  box-sizing: border-box;
  text-align: center;
  text-decoration:none;
}


.reponse4{
  display:flex;
  width:100%;
  margin-top: 6%;
  margin-left:0%;
 justify-content: center;
 border:1px solid #08afac;
 padding: 15px;
 color: #fff;
 cursor:pointer;
 font-size:16px;
 text-transform: uppercase;
 font-weight: 700;
 line-height:1;

 
 transition: all .2s ease;
 text-decoration:none;
 background-color:#000;
 box-sizing:border-box;
 font-family: proxima-nova,sans-serif;
 
}

.reponse4:hover{
  border:1px solid #000;
  position:relative;
  transition: all .2s ease;
  background-color:#fff;
  color:#000;
  text-decoration:underline;
}

.reponse6{
  background-color: rgb(43, 42, 42);
  margin-top: -25px;
  color: #fff;
  box-shadow: 0 0 10px 0 #08afac;
}


  @media screen and (max-width: 768px){
  
  form{
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    padding: 15px;
  }

  input[type="text"],
  input[type="email"]{
    width: 95%;
  }

  .reponse2{
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .reponse{
    font-size: 20px;
  }

  .reponse4{
    font-size: 14px;
    padding: 10px;
  }

  textarea{
    width: 95%;
  }
  }