#masthead{
  position:relative;
  width: 100%;
  height:70vh;
  padding-bottom: 10%;
}


#top_contact{
  position: relative;
  height:8vh;
  width: 100%;
}
#medium_contact{
  height:fit-content;
  width: 100%;
  display: flex;
  padding-left: 2%;
  padding-top: 2%;
}

#right_medium{
  width: 30%;
  height:100%;
}
#left_medium{
  width: 70%;
  height:100%;
  padding-left: 10%;
}
.container_inputs{
  display: flex;
  width: 100%;
}
.container_inputs:not(:first-child){
  margin-top: 5%;
}
.field{
  width: 25%;
  opacity: 0;
  transition: transform 0.5s ease,
  opacity 0.5s ease;
  transform: translateX(-50%);
}
.appear_field{
  opacity: 1;
  transform: translateX(0%);
}
#btn_validation{
  border: 1px solid rgb(66, 66, 66);
  background-color: transparent;
  margin-left:auto;
  cursor: pointer;
  padding: 0.5%;
  overflow: hidden;
  width: fit-content;
  position: relative;
}


.input_text{
  width: 70%;
  height: 5vh;
  margin-left: 5%;
}
#message{
  width: 70%;
  height:30vh;
  margin-left: 5%;
}

#titre_top{
  height:100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 2%;
}
#sep_contact{
  background-color: #DA6416;
  width: 16%;
  margin-left: 2%;
  height:2px;
  margin-bottom: 1%;
  margin-top: -0.5%;
}




#contact{
  position: relative;
  width: 70%;
  height:80vh;
  margin-top: 10%;
  margin-left: 15%;
}


#titre_top_resp{
  display: none;
  height: fit-content;
  width: 100%;
  padding-left: 2%;
}

@media (max-width: 768px) {
  #masthead{
    margin-top: 20%;
    padding-bottom: 15%;
    height:100%;
  }
  #titre_top{
    display: none;
  }
  #contact{
    width: 100%;
  }
  #titre_top_resp{
    display: block;
  }
  #sep_contact{
    width: 29%;
  }
  #medium_contact{
    display: block;
  }
  #right_medium{
    width: 100%;
  }
  #left_medium{
    width: 100%;
    padding-left: 0;
    margin-top: 10%;
  }
  #contact{
    margin-left: 5%;
    height:100%;
  }
  .container_inputs{
    flex-direction: column;
  }
  .field{
    width: 100%;
    padding-bottom: 2%;
  }
  .input_text{
    margin-left: 0;
    width: 85%;
    margin-top: 1%;
  }
  #message{
    margin-left: 0;
    width: 85%;
    margin-top: 2%;
  }
  #btn_validation{
    margin-right: 15%;
  }
}



@media (orientation: landscape) and (max-width: 768px) {

  #masthead{
    margin-top: 5%!important;
    height:100%;
  }
  #sep_contact{
    width: 22%!important;
  }
  #right_medium{
    margin-top: 3%!important;
  }
  #contact{
    width: 90%!important;
  }
  .input_text{
    height:35px!important;
  }
}