html, body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

#container {
  width: 100%;
  position:absolute;
}


   #petit_cont{
    width:100%;
    height:auto;
    position:relative;
   }

    label{
      display:block;
      width:96%;
      margin-top: 2%;
      margin-left: 2%;
      font-weight:bold;
      text-align:center;
    }

    select{
      display:block;
      width:50%;
      margin-left: 25%;
      text-align: center;
    }

     #legende{
       display:block;
      width: 96%;
      margin-top:5%;
      text-align:center;
      margin-left: 2%;
      position: relative;
     }

   #grand_cont{
    width:100%;
    position: relative;
   }


   #carte{
     margin-top:3%;
      width: 100%;
      position: relative;
  }

    #contexte{
      position:absolute;
      width:30%;
      text-align:left;
      margin-left:68%;
      margin-top:100%;
    }

    .deps{
        fill:none;
        stroke:#000;
        stroke-width:.05%;
    }


    .rivieres{
        fill:none;
    }

    .rivieres:hover,
    .rivieres.rivieres--hover {
        cursor: pointer;
    }

    .ville {
      fill: #000;
      font-family: Arial;
      fill-opacity: 1;
      letter-spacing: 0em;
      text-anchor: middle;
      pointer-events: none;
    }

    .d3-tip {
        width: 50%;
        position: absolute;
        margin: 2%;
        padding: 2%;
        background: rgba(255, 255, 255, 0.9);
        color: black;
        font-family: Arial;
        pointer-events: none;
    }

#cont_source{
  width:100%;
  position:relative;
}

  #source{
    position: absolute;
    margin-left: 4%;
  }

@media screen and (min-width: 1600px) {

  label{
    font-size:1.5em;
    margin-bottom: -1%;
  }

  select{
    font-size: 1.4em;
  }

  #legende{
    margin-top: 3%;
    font-size: 1.35em;
  }

  #contexte{
    font-size:1.5em;
  }

  .ville{
    font-size:1.5em;
  }

  #source{
    font-size: 1.4em;
  }

}

@media screen and (min-width: 1400px)  and (max-width: 1599px) {

  label{
    font-size:1.5em;
    margin-bottom: -1%;
  }

  select{
    font-size: 1.4em;
  }

  #legende{
    margin-top: 3%;
    font-size: 1.35em;
  }

  #contexte{
    font-size:1.5em;
  }

  .ville{
    font-size:1.5em;
  }

  #source{
    font-size: 1.4em;
  }

}

@media screen and (min-width: 1200px)  and (max-width: 1399px) {

  label{
    font-size:1.4em;
    margin-bottom: -1%;
  }

  select{
    font-size: 1.3em;
  }

  #legende{
    margin-top: 3%;
    font-size: 1.25em;
  }

  #contexte{
    font-size:1.4em;
  }

  .ville{
    font-size:1.4em;
  }

  #source{
    font-size: 1.3em;
  }

}

@media screen and (min-width: 1000px)  and (max-width: 1199px) {

  label{
    font-size:1.35em;
    margin-bottom: -1%;
  }

  select{
    font-size: 1.2em;
  }

  #legende{
    margin-top: 3%;
    font-size: 1.15em;
  }

  #contexte{
    font-size:1.3em;
  }

  .ville{
    font-size:1.3em;
  }

  #source{
    font-size: 1.2em;
  }

}

@media screen and (min-width: 800px)  and (max-width: 999px) {

  label{
    font-size:1.3em;
    margin-bottom: -1%;
  }

  select{
    font-size: 1.1em;
  }

  #legende{
    margin-top: 3%;
    font-size: 1em;
  }

  #contexte{
    font-size:1.25em;
  }

  .ville{
    font-size:1.25em;
  }

  #source{
    font-size: 1.1em;
  }

}

@media screen and (min-width: 600px)  and (max-width: 799px) {


    label{
      font-size:1.2em;
      margin-bottom: -1%;
    }

    select{
      font-size: 1em;
    }

    #legende{
      margin-top: 3%;
      font-size: .9em;
    }

    #contexte{
      font-size:1em;
    }

    .ville{
      font-size:1.1em;
    }

    #source{
      font-size: .9em;
    }

}

@media screen and (max-width: 599px) {


      #legende{
        margin-top: 4%;
        font-size: 1em;
      }

      #contexte{
        font-size:1em;
      }

      .ville{
        font-size:1.2em;
      }

      #source{
        font-size: 1em;
      }

}