*,
*::before,
*::after{
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul,
ol,
li{
list-style: none;
}
img{
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6{
font-weight: inherit;
font-size: inherit;
}
html,
body{
height: 100%;
line-height: 1;
font-size: 14px;
background-image: url("/images/icons/body_background.svg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
/* ------------------------------------------------------------ */
/* .wrapper{
justify-content: center;
align-items: center;
} */

.form{
max-width: 550px;
margin: 0px auto;
color: #ffffff;
padding: 30px 0;
}

@media screen and (max-width: 768px) {
  .form{
  max-width: 360px;
  margin: 0px auto;
  color: #ffffff;
  padding: 30px 0;
  }
}

.form * {
outline: none;
}
.form__body{
position: relative;
justify-content: center;
align-items: center;
}
.form__body::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: scale(10);
  background: rgba(51, 51, 51, 0.9) url("../images/loading.gif") center / 50px no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease 0s;
}
.form__body._sending::after{
  opacity: 1;
  visibility: visible;
}
.form__title{
font-size: 40px;
font-weight: 700;
margin: 0px 0px 30px 0px;
}
.form__item{
margin: 0px 0px 20px 0px;
}
.form__label{
font-style: 18px;
display: block;
margin-bottom: 10px;
}
.form__input{
height: 50px;
padding: 0px 20px;
border-radius: 5px;
width: 100%;
font-style: 18px;
transition: all 0.2s ease 0s;
}
.form__input:focus{
box-shadow: 0 0 15px #31a74b;
}
.form__input._error{
box-shadow: 0 0 15px #f10202;
}
textarea.form__input{
min-height: 120px;
resize: vertical;
padding: 20px;
}
.options{
padding: 10px 0px 0px 0px;
}
.options__item{
margin: 0px 0px 10px 0px;
}
.options__input{
display: none;
}
.options__input:checked + .options__label::after{
  transform: scale(1);
}
.options__label{
  display: flex;
  font-style: 16px;
  line-height: 140%;
  align-items: center;
  position: relative;
}
.options__label::before{
  content: "";
  align-self: flex-start;
  flex: 0 0 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0px 10px 0px 0px;
}
.options__label::after{
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background-color: #31a74b;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s ease 0s;
}
.checkbox{

}
.checkbox._error .checkbox__label::before{
box-shadow: 0 0 15px #f10202;
}
.checkbox__input:checked + .checkbox__label::after{
  transform: scale(1);
}
.checkbox__input{
  display: none;
}
.checkbox__label{
  font-style: 16px;
  line-height: 140%;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.checkbox__label::before{
  content: "";
  align-self: flex-start;
  flex: 0 0 24px;
  height: 24px;
  background-color:  #fff;
  border-radius: 4px;
  margin: 0px 10px 0px 0px ;
}
.checkbox__label::after{
  transition: transform 0.5s ease 0s;
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background-color: #31a74b;
  border-radius: 4px;
  transform: scale(0);
}
.checkbox__label a{
  color:  #069139;
}
.form__button{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  background-color: #069139;
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0 5px 0 #00220d;
  transition: background-color 0.5s ease 0s;
  position: relative;
  top: 0px;
}

.form__button._annuler {
  background-color: #d2ba18;
}
.form__button._annuler:hover {
  background-color: #9a880f;
}
.form__button._annuler:active {
  top: 3px;
  box-shadow: 0 2px 0 #6b5f0b;
}


.form__button:hover {
  background-color: #02782f;
}
.form__button:active {
  top: 3px;
  box-shadow: 0 2px 0 #015521;
}