.lightbox { position: fixed; /* Stay in place */ z-index: 1100; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; display: flex; /* add */ justify-content: center; /* add to align horizontal */ align-items: center; /* add to align vertical */ cursor: pointer; transition: all 0.3s ease-in-out; } .sebm-google-map-container { width: 100%; height: 100%; } .blackCanvas { position: fixed; /* Stay in place */ z-index: 1099; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ background-color: black; transition: all 0.3s ease-in-out; } #controllers-container { z-index: 1100; right: 0; top: 0; position: fixed; } #controls { top: 0; height: initial; text-align: right; width: 100%; padding: 5px; font-size: large; } #controls span { margin-left: 6px; margin-right: 6px; color: black; cursor: pointer; } .highlight { opacity: 0.4; transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out; } .highlight:hover { opacity: 1.0; }