.is-ui .is-lightbox { display: none; z-index: 100000; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; box-sizing: border-box; background-color: black; opacity: 0; align-items: center; justify-content: center; opacity: 0; transform: scale(0.7) translateZ(150px); transition: all 450ms ease-in-out; } .is-ui .is-lightbox.light { background-color: rgba(255, 255, 255, 0.97); } .is-ui .is-lightbox > div { width: 100%; height: 100%; } .is-ui .is-lightbox.lightbox-externalvideo { padding: 40px; /* & > div { margin:40px; } */ } .is-ui .is-lightbox.lightbox-video > div.lightbox-content, .is-ui .is-lightbox.lightbox-image > div.lightbox-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box; } .is-ui .is-lightbox.active { opacity: 1; transform: scale(1) translateZ(150px); } .is-ui .is-lightbox iframe { opacity: 0; filter: blur(30px); transition: all 600ms ease-in-out; } .is-ui .is-lightbox.active iframe { filter: blur(0); opacity: 1; } .is-ui .is-lightbox video { outline: none; width: 100%; height: 100%; } .is-ui .is-lightbox img { max-width: 100%; max-height: 100%; } .is-ui .is-lightbox .cmd-lightbox-close { position: absolute !important; top: 3px !important; right: 3px !important; width: 50px !important; height: 50px !important; color: #fff !important; background: none; border: none; cursor: pointer; outline: none; box-shadow: none; } .is-ui .is-lightbox .cmd-lightbox-close svg { width: 30px; height: 30px; fill: #000 !important; position: absolute; top: 10px; right: 10px; } .is-ui .is-lightbox.light .cmd-lightbox-close { color: #000 !important; } .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; margin-top: 1.4em; margin-bottom: 1em; } .embed-responsive.embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive.embed-responsive-4by3 { padding-bottom: 75%; } .embed-responsive iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }