r2c/user/themes/r2c/scss/template/_section.scss

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

#page{
  height: 100%;
  .navbar{
    width: 100%;
    height: 50px;
  }
  .handler{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    z-index: 999;
    cursor: grab;
  }
  .hand1{
    background: green;
    opacity: 0.5;
    left : calc((100%/3) - 25px);
  }

  .hand2{
    background: red;
    opacity: 0.5;
    right: calc((100%/3) - 25px);
  }

  .mouseDown{
    cursor: grabbing;
  }

  #start{
    width: 100%;
    height: calc(100% - 50px);
    .top, .bottom{
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
    }
    img{
      filter: grayscale(100%) contrast(4);
      transition: filter 0.5s;
      &:hover{
        filter: grayscale(0%);
        transition: filter 0.5s;
      }
    }
    .top{
      position: relative;
      height: $H50;
      & > div{
        &:nth-child(-n+2){
          padding: 0px 20px;
        }
        &:nth-child(1){
          background: rgb(150, 150, 150);
        }
      }
    }
    .bottom{
      position: absolute;
      height: auto;
      top: $H50-25;
      bottom: 0;
    }
    .blocs{
      // position: relative;
      overflow-y: auto;
      margin: 2px;
      width: $W33;
      min-width: 200px;
      &:nth-child(2){
        background: white;
        left: $L33;
      }
      &:nth-child(3){
        background: white;
      }
    }
    
    #links{
      canvas{
        top: 0;
        left: 0;
      }
      canvas[resize] {
          width: 100vw;
          height: 100vh;
      }
    }
    #reseaux-sociaux{
      svg{
        // width: 100vw;
        // height: 100vh;
      }
    }
    #streetmap{
      & > div:nth-of-type(1){
        height: 100%;
      }
      #mapid {
        width: 100%;
        height: 100%;
      }
    }
  }
}