#grid {
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
height:calc(var(--vh, 1vh) * 100);
z-index:999999998;
pointer-events:none;
}
#gridActivator {
position:fixed;
top:10px;
left:10px;
cursor:pointer;
z-index:2;
pointer-events:initial;
}
#gridActivator svg {
width:20px;
height:auto;
}
#gridHolder {
position:absolute;
top:0;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
width:100vw;
height:100vh;
height:calc(var(--vh, 1vh) * 100);
z-index:1;
opacity:0;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
display:flex;
justify-content:space-between;
}
.showGrid #gridHolder {
opacity:1;
}
.gridColumn {
position:relative;
background-color:#00FFFF;
opacity:0.25;
width:calc((100% - (8 * 50 / 1920 * 100vw)) / 9);
display:block;
}