.headline{
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url("/home.jpg") no-repeat center center;
  background-size: cover;
  z-index:-1000;
  /*background-attachment: fixed;*/
}

#content{
  padding: 2rem 0;
}

.warning{
  background-color:yellow;
  color:black;
  position:fixed;
  width: 100%;
  padding: 3px 10px;
  text-align: center;
  z-index:1000;
  font-weight:bold;
}


#adhesion_container{
  position:relative;
  max-width:45rem;
  border:1px solid #999;
  border-radius: 10px;
  box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.5);
  background-color: #fafafa;
  padding:0;
  overflow-x:hidden;
}


#adhesion_container section{
  padding: 0 1.5rem 0 1.5rem;
  margin: O;
}


#adhesion_container h2{
  text-align: center;
}

#adhesion_container h3{
  margin-top:2rem;
}
#adhesion_container h4{
  margin-top:1.5rem;
}
#adhesion_container h5{
  margin-top:1rem;
  color:royalblue;
}


#adhesion_type h3{
  margin-top:0;
}

#adhesion_type input[type="radio"] {
  position:absolute;
  left:-9999px;
}

#adhesion_type label {
  position:relative;
  line-height:1.2em;
  height: 100%;
  display: block;
  background: #f0f0f0;
  padding: 20px 10px 15px 10px;
  border: 2px solid #078600;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  margin: 0 1rem 0 1rem;
  max-width: 13rem;
}

#adhesion_type label svg{
  vertical-align:middle;
}

/*Le choix du type d'adhésion*/
#adhesion_type input[type="radio"]:focus + label, #adhesion_type input[type="radio"] + label:hover{
  box-shadow: 0px 0px 3px 2px rgba(7,134,0, 1);
}

/*La bordure accentuée du type choisi*/
#adhesion_type input[type="radio"]:checked + label{
  /*background: #6EE768;*/
  border-color: #2D9B27;
  box-shadow: 0px 0px 5px 3px rgba(45, 155, 39, 1);
  transition: box-shadow 200ms ease-in-out;
  background:#fff;
}

/*Le check entouré dans un cercle pour l'élément choisi*/
#adhesion_type input[type="radio"] + label:before {
  color: #3d3f43;
  border: 2px solid #2D9B27;
  content: "\2713";
  font-size: 32px;
  font-weight : bold;
  position: absolute;
  height: 50px;
  width: 50px;
  top: -25px;
  left: 50%;
  line-height: 50px;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transform: translate(-50%,-80px);
  transition: transform 300ms ease-out, opacity 400ms, visibility 400ms;
}

#adhesion_type input[type="radio"]:checked + label .label_box{
  transform: translateY(12px);
  transition: transform 300ms ease-in-out;
}

#adhesion_type input[type="radio"]:checked + label:before {
  visibility: visible;
  opacity: 100;
  transform: translate(-50%,0px);
  transition: transform 300ms ease-in, visibility 0s, opacity 200ms;
}

#adhesion_type.invalid{
  border: 2px solid #ee3333;
}
#adhesion_type.invalid + .invalid-feedback{
  display:block;
}

#childCheck label:before, #childCheck label:after{
  height: 1.3rem;
  width: 1.3rem;
}
#childCheck label:before{
  border: 2px solid #007bff;
}

#adh2_container{
  background-color: #d0d0df;
}

.i {
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: top;
  width: 1em;
  height: 1em;
}

#child_rows > .form-row{
  padding: .2rem .3rem 0 .3rem;
}
#child_rows > .form-row:nth-child(even){
  background-color: #ccc;
}


#i-close {
  stroke-linecap: butt;
  stroke-width: 5;
}

#adhesion_container .footer{
  background-color: #ddd;
}

.jsShow{
  display:none;
}

.form-group.required label:after, .input-group.required label:after {
  content:"*";
  color:red;
}

.form-check.big{
  padding-left:1.7em;
}

.form-check.big label{
  margin:0.5rem 0 0 0;
  font-size:1.2em;
  line-height:normal;
}

.form-check.big .form-check-input{
  margin-top:0.8rem;
  width:1.25rem;
  height:1.25rem;
  margin-left:-1.6rem;
}

.form-check.big .form-text{
  margin:0 0 0.25rem 0
}


.form-check.big .i{
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
}

.form-check.gauses{
  visibility:hidden;
  position:absolute;
}

.btn svg.i{
  vertical-align: baseline;
}

svg.i, svg.i symbol {
  overflow: visible;
}

svg.i.ifas{
    fill: currentColor;
    overflow: visible;
    width: 1.125em;
    display: inline-block;
    font-size: inherit;
    height: 1em;
    vertical-align: -.125em;
}

.tabnav{
  padding: 0 1.5em 1.5em 1.5em;
}

#email_update ~ .form-group{
  display: none;
}

#email_update:checked ~ .form-group{
  display:block
}