.gridHolder {
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:999999998;
pointer-events:none;
}
.gridActivator {
position:fixed;
top:10px;
left:10px;
cursor:pointer;
z-index:2;
pointer-events:initial;
display:flex;
align-items:center;
}
.gridMeasures {
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:10px;
line-height:16px;
color:#000000;
margin-left:10px;
opacity:0;
pointer-events:none;
-webkit-transition:all 200ms ease-in-out;
-moz-transition:all 200ms ease-in-out;
-ms-transition:all 200ms ease-in-out;
-o-transition:all 200ms ease-in-out;
transition:all 200ms ease-in-out;
}
.showGrid .gridMeasures {
opacity:1;
}
.gridActivator svg {
width:20px;
height:auto;
}
.gridWrapper {
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;
z-index:1;
opacity:0;
-webkit-transition:all 200ms ease-in-out;
-moz-transition:all 200ms ease-in-out;
-ms-transition:all 200ms ease-in-out;
-o-transition:all 200ms ease-in-out;
transition:all 200ms ease-in-out;
display:flex;
justify-content:space-between;
}
.showGrid .gridWrapper {
opacity:1;
}
.gridColumn {
position:relative;
background-color:rgba(0,255,255,0.25);
width:calc((100vw - (15 * 16 / 1920 * 100vw)) / 16);
display:block;
}
.gridColumn_text {
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:10px;
line-height:16px;
width:100%;
text-align:center;
margin-top:30px;
color:#000000;
}