@font-face {
  font-family: "Prequel-lightitalic";
  src: url("../fonts/Prequel-lightitalic.woff");
}

body {
  margin:0;
  font-family: "Montserrat", "Arial";
}

.container {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction: column;
  width: 100vw;
  max-width: 100%;
  min-height: 100vh
}

h1 {
  margin-bottom: 0;
  text-align: center;
  font-weight: 900;
  width: 90%;
}

.container .form-title {
  font-size: 16px;
  line-height: 100%;
  width: 100%;
  font: 600 16px/1.5 Prequel-lightitalic,Montserrat,Helvetica,Arial,sans-serif!important;
  margin-top: 20px;
  color: #212121;
}

h2 {
  margin-bottom: 5px;
}

p {
  margin-top: 0;
}

.formulaire img {
  margin-top: 50px;
  width: 90%;
  max-width: 352px;
}

.logo {
  margin-bottom: 30px;
  max-width: 80vw;
}

.container .formulaire {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction: column;
  width: 75%;
  max-width: 400px;
  background-color: #fff;
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

.container .formulaire form {
  width: 100%;
}


.container input:focus {
  outline: none;
}

.container input:focus + .barre .barre-mover {
  width: 100%;
}


.container .an-input {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  position:relative;
  min-height:50px;
  width:100%;
  margin-top: 20px;
  z-index: 1;
}

.container .an-input input, .an-input select {
  width: 100%;
  height: 35px;
  font-size: 14px;
  font-family: "Montserrat";
  font-weight: 400;
  border:none;
  outline: none;
}

.container .an-input input {
  background-color: transparent;
}

.container .an-input select {
  height: 50px;
  margin-top: 10px;
}

.container .an-input .label-input {
  position:absolute;
  bottom:0%;
  left: 0%;
  width: 100%;
  height: 100%;
  font-size:16px;
  font-weight:600;
  font: 600 16px/1 Montserrat,Helvetica,Arial,sans-serif!important;
  font-style: italic;
  z-index: -1;
}

.container .an-input .label-input span {
  position:absolute;
  transform: translateY(130%);
  width:100%;
  transition: all 0.3s;
}

.container .an-input .label-input:before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1px;
  background-color:#dadada;
}

.container .an-input .label-input:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0%;
  height:3px;
  background-color:#dadada;
  transition:all 0.3s;
}

.container .submit-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-top: 40px;
}

.container input[type="submit"] {
  background-color: #5dd35d;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 15px 30px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 2px;
  cursor: pointer;
  font: 600 16px/1 Prequel-lightitalic,Montserrat,Helvetica,Arial,sans-serif!important;
}

.container .an-input.checkbox {
  justify-content: flex-start;
  align-items: flex-start;
  margin:10px 0;
}

.container .one-column.checkbox {
  margin-top: 30px;
}

.container .an-input.checkbox .label-input {
  left: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  position: initial;
  font: 400 12px/1 Montserrat,Helvetica,Arial,sans-serif!important;
}

.container .an-input.checkbox .label-input span {
  position: initial;
  transform: translateY(10px)!important;
}

.container .an-input.checkbox input {
  width: 25px;
}

.container .an-input.checkbox .label-input:before {
  display: none;
}

.container .an-input.checkbox .label-input:after {
  display: none;
}

.container .line-checkbox {
  position:relative;
  display:flex;
  font-family:"Montserrat";
  margin-top: 30px;
}

.container .line-checkbox .input-checkbox {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.container .line-checkbox .checkbox-label {
  display:flex;
  cursor:pointer;
  width: 100%;
}

.container .line-checkbox .checkbox-label span {
  font-size: 12px;
  line-height: 100%;
  width: 90%;
  font: 400 12px/1 Montserrat,Helvetica,Arial,sans-serif!important;
  cursor:pointer;
  color:#212121;
  padding-top: 10px;
}

.container .line-checkbox .checkbox-label .checkbox-prequel {
  font: 400 12px/1 Prequel-lightitalic,Montserrat,Helvetica,Arial,sans-serif!important;
}


.grey-link {
  font: 400 12px/1.5 Montserrat,Helvetica,Arial,sans-serif!important;
  color: #616161;
}

.container .response {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  min-width: 350px;
  text-align: center;
  margin-top: 20px;
  background-color: #e82c2d;
  color: #fff;
  font: 600 18px/1.5 Prequel-lightitalic,Montserrat,Helvetica,Arial,sans-serif!important;
  padding: 10px 0;
}

.container .line-checkbox .checkbox-label .stylized-checkbox {
  position: relative;
  width: 60px;
  height: 30px;
  margin-left: 15px;
  cursor: pointer;
  border-radius: 25px;
  background-color: #fff;
  border: 1px solid #dadada;
  transition: all 0.5s;
}

.container .line-checkbox .input-checkbox:checked + .checkbox-label .stylized-checkbox {
  background-color: #4CD864;
  border: 1px solid #4CD864;
}

.checkbox-label .round {
  position: absolute;
  left: 4%;
  top: 3px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
  transition: all 0.5s
}

.container .line-checkbox .input-checkbox:checked + .checkbox-label .round {
  position: absolute;
  left: 52%;
  top: 3px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 100%;
}

.button {
  background-color: #5dd35d;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 15px 30px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 2px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
  margin-bottom: 15px;
  font: 600 16px/1 Prequel-lightitalic,Montserrat,Helvetica,Arial,sans-serif!important;
  text-align: center;
}

.popup-validate-inscription {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  z-index: 100001;
}

.popup-validate-inscription .popup-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

.popup-validate-inscription .container-popup {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%;
  max-width: 400px;
  background-color: #fff;
}

.popup-validate-inscription .container-popup .award {
  width: 90%;
  font: 600 36px/1.5 Prequel-lightitalic,Montserrat,Helvetica,Arial,sans-serif!important;
  text-align: center;
  margin-top: 20px;
  color: #5dd35d;
}

.popup-validate-inscription .container-popup .title {
  width: 90%;
  font: 600 20px/1.5 Prequel-lightitalic,Montserrat,Helvetica,Arial,sans-serif!important;
  text-align: center;
  margin-bottom: 10px;
  color: #212121;
}

.popup-validate-inscription .container-popup .button {
  background-color: #414141;
  border: 1px solid #414141;
  color: #fff;
  padding: 10px 20px;
  font: 600 18px/1.5 Prequel-lightitalic,Montserrat,Helvetica,Arial,sans-serif!important;
  text-transform: uppercase;
  transition: all 0.5s;
  margin: 20px 0;
}

.popup-validate-inscription .container-popup .button:hover, .popup-validate-inscription .container-popup .button:focus {
  background-color: #fff;
  color: #414141;
}

.popup-validate-inscription .container-popup .grey-link {
  margin-top: 10px;
  margin-bottom: 10px;
  font: 400 16px/1.5 Montserrat,Helvetica,Arial,sans-serif!important;
  color: #616161;
}

.container .an-input {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  position:relative;
  min-height:50px;
  width:100%;
  margin-top: 20px;
  z-index: 1;
}

.container .an-input input, .an-input select {
  width: 100%;
  height: 35px;
  font-size: 14px;
  font-family: "Montserrat";
  font-weight: 400;
  border:none;
  outline: none;
}

.container .an-input input {
  background-color: transparent;
}

.container .an-input select {
  height: 50px;
  margin-top: 10px;
}

.container .an-input .label-input {
  position:absolute;
  bottom:0%;
  left: 0%;
  width: 100%;
  height: 100%;
  font-size:16px;
  font-weight:600;
  font: 600 16px/1 Montserrat,Helvetica,Arial,sans-serif!important;
  font-style: italic;
  z-index: -1;
}

.container .an-input .label-input span {
  position:absolute;
  transform: translateY(130%);
  width:100%;
  transition: all 0.3s;
}

.container .an-input .label-input:before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1px;
  background-color:#dadada;
}

.container .an-input .label-input:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0%;
  height:3px;
  background-color:#dadada;
  transition:all 0.3s;
}

.container .an-input input:focus ~ .label-input span{
  transform: translateY(50%);
  font-size: 12px;
}

.container .an-input input:focus ~ .label-input:after{
  width:100%;
}

.container .an-input input:not(:placeholder-shown) ~ .label-input span, .an-input input[aria-invalid="false"] ~ .label-input span, .an-input input[aria-invalid="true"] ~ .label-input span {
  transform: translateY(50%);
  font-size: 12px;
}

.container .an-input input:not(:placeholder-shown) ~ .label-input:after{
  width:100%;
}

.container .an-input input[aria-invalid="false"]:focus ~ .label-input span {
  color:#5dd35d;
}

.container .an-input input[aria-invalid="false"]:focus ~ .label-input:after {
  background-color:#5dd35d;
}

.container .an-input input[aria-invalid="true"] ~ .label-input span {
  color:#ed494d;
}

.container .an-input input[aria-invalid="true"] ~ .label-input:after {
  background-color:#ed494d;
}

.container label.error {
  position: absolute;
  left: 0;
  top: 100%;
  font-size: 12px;
  font-weight: 600;
  transform: translateY(40%);
  color: #ed494d;
}

.container .submit-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
}