.exo-form textarea,
.exo-form input[type="text"] {
  display: block;
  border: none;
  font-size: 16px;
  padding-left: 0px;
  color: #000;
  font-weight: bold;
}

.exo-form--dark textarea,
.exo-form--dark input[type="text"] {
  color: #fff;
}

.exo-form textarea:focus,
.exo-form input:focus {
  outline: 0;
}
/* Question */

.exo-form input.question,
.exo-form textarea.question, 
.exo-form select.question {
  font-size: 16px;
  font-weight: 300;
  border-radius: 0px;
  margin: 20px 0 0 0;
  padding-top: 15px;
  padding-bottom: 15px;
  border: none;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  transition: padding-top 0.2s ease, margin-top 0.2s ease;
  overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */

  z-index: 2000;
  position: relative;
}
/* Underline and Placeholder */

.exo-form input.question + label,
.exo-form textarea.question + label,
.exo-form select.question + label {
  display: block;
  position: relative;
  white-space: nowrap;
  padding: 0;
  margin: 0 0 20px 0;
  width: 100%;
  border-top: 3px solid #e2e2e2;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
  height: 0px;
}

.exo-form--dark input.question + label,
.exo-form--dark textarea.question + label,
.exo-form--dark select.question + label {
  border-color: #fff;
}


.exo-form input.question:focus + label,
.exo-form textarea.question:focus + label,
.exo-form select.question:focus + label {
  width: 100%;
}

.exo-form input.question:focus,
.exo-form input.question:valid {
  /*padding-top: 35px;*/
}

.exo-form select.question:focus,
.exo-form select.question:valid {
  /*padding-top: 35px;*/
}

.exo-form textarea.question:valid,
.exo-form textarea.question:focus {
  margin-top: 35px;
}

.exo-form input.question:focus + label > span,
.exo-form input.question:valid + label > span {
  top: -70px;
  font-size: 12px;
  color: #AFAFAF;
}

.exo-form select.question:focus + label > span,
.exo-form select.question:valid + label > span {
  top: -70px;
  font-size: 12px;
  color: #AFAFAF;
}

.exo-form textarea.question:focus + label > span,
.exo-form textarea.question:valid + label > span {
  top: -150px;
  font-size: 22px;
  color: #AFAFAF;
}

.exo-form input.question:valid + label,
.exo-form textarea.question:valid + label,
.exo-form select.question:valid + label {
  /*border-color: #0AA586;*/
}

.exo-form input.question:invalid,
.exo-form textarea.question:invalid,
.exo-form select.question:invalid {
  box-shadow: none;
  border-color: #AFAFAF;
}

.exo-form--dark input.question:invalid,
.exo-form--dark  textarea.question:invalid,
.exo-form--dark  select.question:invalid {
  border-color: #ff0000;
}

.exo-form input.question + label > span,
.exo-form textarea.question + label > span,
.exo-form select.question + label > span {
  font-weight: 300;
  margin: 0;
  position: absolute;
  color: #000;
  font-size: 16px;
  top: -40px;
  left: 0px;
  /*z-index: -1;*/
  -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.exo-form--dark input.question + label > span,
.exo-form--dark textarea.question + label > span,
.exo-form--dark select.question + label > span {
  color: #AFAFAF;
}

.exo-form input[type="submit"], 
.exo-form button,
a.exo-button {
  -webkit-transition: opacity 0.2s ease, background 0.2s ease;
  transition: opacity 0.2s ease, background 0.2s ease;
  display: block;
 /* opacity: 0; */
  margin: 10px 0 0 0;
  padding: 22px 34px 18px;
  cursor: pointer;
  background-color: #B94065;
  text-transform: uppercase;
  width: 100%;
  border-radius: 0;
  font-size: 13px;
  font-weight: bold;
  margin-top: 40px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.exo-form button i {
  float: left;
  margin-top: -6px;
  margin-bottom: -2px;
}
.exo-form button svg {
    float: left;
    margin-top: -4px;
    height: 20px;
}

.exo-form input[type="submit"]:hover,
.exo-form button:hover,
a.exo-button:hover {
  background: #EEE;
  color: #B94065;
}

.exo-form input[type="submit"]:active,
.exo-form button:active,
a.exo-button:active {
  background: #999;
}
/*
input.question:valid ~ input[type="submit"], textarea.question:valid ~ input[type="submit"] {
  -webkit-animation: appear 1s forwards;
  animation: appear 1s forwards;
}

input.question:invalid ~ input[type="submit"], textarea.question:invalid ~ input[type="submit"] {
  display: none;
}*/

@-webkit-keyframes appear {
  100% {
    opacity: 1;
  }
}

@keyframes appear {
  100% {
    opacity: 1;
  }
}

.exo-form div.ou {
  margin-top: 40px;
  text-align: center;
  font-size: 18px;
}

.exo-form textarea.commentaires {
  width: 100%;
  height: 290px;
  border-radius: 8px;
  margin-top: 40px;
  padding: 20px 15px;
}

.exo-form select {
  border:0;
  border-bottom: 3px solid #e2e2e2;
  padding-bottom: 13px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
}

.exo-form label.label-select {
  position:relative;
  width: 100%;
  margin-bottom: 20px;
}

.exo-form label.label-select:after {
    content:'\f107';
    font-family:"Font Awesome\ 5 Free", monospace;
    font-size:20px;
    right:0px; top:0px;
    padding:0 0 2px;
    position:absolute;
    pointer-events:none;
}
.exo-form label.label-select:before {
    content:'';
    right:0px; top:0px;
    width:25px; height:40px;
    background:#ffffff;
    position:absolute;
    pointer-events:none;
    display:block;
}


.exo-form label.checkbox {
  display: inline;
}

.regular-checkbox {
  display: none;
}

.regular-checkbox + label.checkbox {
  background-color: #fff;
  border: 4px solid #000;
  font-size: 0;
  line-height: 0;
  padding: 10px;
  border-radius: 8px;
  display: inline-block;
  position: relative;
  margin-bottom: -8px;
  cursor: pointer;
}

.regular-checkbox:checked + label.checkbox {
  background-color: #1F96A4;
  border-color: #1F96A4;
}

.regular-checkbox:checked + label.checkbox:after {
  content: '\2714';
  font-size: 16px;
  position: absolute;
  top: 10px;
  left: 3px;;
  color: #fff;
}

label.for-checkbox {
  font-size: 14px;
  font-weight: 500;
  margin-left: 15px;
  margin-right: 25px;
  margin-bottom: 0px;
  height: 28px;
  display: inline-block;
}