#vis {
  display: inline-block;
  width: 84%;
  display: inline-block;
  position: fixed;
  left: 8%;
  bottom: 0;
  /* background-color: rgba(255, 255, 255, 0.5); */

  background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.9) 80%, rgba(255,255,255,0));
  /* background-color: #fff; */

    /* -webkit-backdrop-filter: blur(2px); */
    z-index: -10;
}
/*
main>nav {
  z-index: -15;
  background-color: #fff;
} */

@media screen and (min-width: 768px) {
  #vis {
    position: fixed;
    left: 47.25%; /* (1-0.25)*(100 - 25 - 2*8*0.75) wtf 47.25 */
    width: 47.25%; /* ? */
    top: 0; /*à changer par null si avant (en haut) mais aussi changer position*/
    bottom:50px;
  }
}
.svg-content-responsive {
    display: inline-block;
    top: 0px;
    left: 0;
    top: 30px;

    /*background-color: red;
    opacity: 30%;*/
    /* border: black 1px solid; */
}

.container {
  width: 100%;
  padding: 0;
}

#graphic {
  position: relative;
  /*padding-top: 60px;*/
  /*widh: 63% = 100 - 25 - 2*8*0.75 %
  left: 31% = 25 + 8*0.75*/
}


#sections {
  position: relative;
  display: inline-block;
  /*width: 250px;*/
  width: 25%;
  top: 0px;
 /* z-index: -3;*/
  padding-bottom: 200px;


  /*position: absolute;*/
  width: 84%;
  top: 0px;
  opacity: 1;


/*
  overflow: scroll;
  height: 300px;
  */
}
@media screen and (min-width: 768px) {
  #sections {
    position: relative;
    width: 25%;
    top: 0px;
  }
}






.step {
  margin-bottom: 100px; /*todo*/
 /* font-size: 16px;
  line-height: 23px;*/
  /*color: #767678;*/
}

.step p {
   color: #767678;
}

#sections .title {
/*
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #262626;
  line-height: 1.2em;
  z-index: 1;
  opacity: 1;*/
}

#extra-space {
  height: 300px;
}


#vis .title {
  font-size:120px;
  text-anchor: middle;
}

#vis .sub-title {
  font-size:20px;
  text-anchor: middle;
}