body{ overflow: hidden; background:rgb(230, 230, 230); } #page{ height: 100%; margin: 0 20px; .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: hidden; margin: 0; width: $W33; // min-width: 200px; height: $H50-25; z-index: 998; &: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){ overflow: hidden; } .mCSB_container > div:last-child{ margin-bottom: 25px; } } } #reseaux-sociaux{ canvas[resize] { width: 100vw; height: 100vh; } } #images{ img{ } } #links{ z-index: 997!important; display: flex; #mCSB_5{ width: 100%; #mCSB_5_container{ width: 100%; height: 100%; position: fixed!important; top: 50px!important; } } svg{ position: absolute; // top: 50px; left: 0; } } #streetmap{ #mCSB_4_container{ width: 100%; height: 100%; } & > div:nth-of-type(1){ height: 100%; } #mapid { width: 100%; height: 100%; filter: grayscale(100%) contrast(1); } } } }