body{
  overflow: hidden;
  background:rgb(230, 230, 230);
}

#page{
  height: 100%;
  .navbar{
    width: 100%;
    height: 50px;
  }


  #start{
    width: 100%;
    height: calc(100% - 50px);
    position: relative;
    .handler{
      width: 50px;
      height: 50px;
      border-radius: 25px;
      position: absolute;
      top: 50%;
      z-index: 999;
      cursor: grab;
    }
    .hand1{
      left : calc((100%/3));
      margin-left: -26px;
      margin-top: -24px;
    }
    .hand2{
      left: calc((100%/3) * 2);
      margin-left: -25px;
      margin-top: -24px;
      img{
        margin-left: 1px;
      }
    }
    .mouseDown{
      cursor: grabbing;
    }

    .blocs{
      position: absolute;
      overflow-y: auto;
      margin: 0;
      width: $W33;
      min-width: 200px;
      height: $H50-25;
      &:nth-child(3n+2){
        left: -2px;
      }
      &:nth-of-type(2){
        background: rgb(150, 150, 150);
      }
      &:nth-child(-n+3){
        padding: 0px 20px;
      }
      &:nth-child(3n+3){
        background: white;
        left: $L33;
      }
      &:nth-child(3n+4){
        background: white;
        right: -2px;
      }
      &:nth-child(n+5){
        top: $T50-25;
        margin-top: 2px;
      }
      &:nth-of-type(-n+3){
        & > div:nth-child(n+1){
            margin-bottom: 25px;
          }
      }
    }

    #links{
      canvas[resize] {
          width: 100vw;
          height: 100vh;
      }
    }
    #images{
      img{
        filter: grayscale(100%) contrast(1);
        transition: filter 0.5s;
        &:hover{
          filter: grayscale(0%);
          transition: filter 0.5s;
        }
      }
    }
    #reseaux-sociaux{
      svg{
        // width: 100vw;
        // height: 100vh;
      }
    }
    #streetmap{
      & > div:nth-of-type(1){
        height: 100%;
      }
      #mapid {
        width: 100vw;
        height: 100vh;
        .leaflet-marker-pane{
          img{
            transform: translate(-25px, -25px);
          }
        }
      }
    }
  }
}