.img-fluid { height: auto; max-width: 100%; } .fade-leave { opacity: 1; } .fade-leave-active { transition: opacity 0.75s linear; } .fade-leave-to { opacity: 0; } .fade-enter { opacity: 0; } .fade-enter-active { transition: all 0.75s linear; position: absolute; top: 0; z-index: 2; } .fade-enter-to { opacity: 1; } /* style the elements with CSS */ #pleaserotate-graphic{ fill: #fff; } #pleaserotate-backdrop { color: #fff; background-color: #000; } html, body { margin: 0px; } .desktop-demo-wrapper { height: auto; max-height: 100vh; width: auto; max-width: 100vw; overflow: hidden; /*text-align: center;*/ display: flex; align-content: center; /*Vertical Center*/ /*align-items: center;*/ /*Horizontal Center*/ justify-content: center; } .desktop-demo-inner-wrapper { overflow: hidden; margin: 0px auto; background-size: cover; background-repeat: no-repeat; } .desktop-demo-contents { margin: 0px auto; border: 0px; width: 1920px; height: 1080px; position: relative; /*Vertical Center*/ /*transform-origin: center center;*/ /*Horizontal Center*/ /*transform-origin: top center;*/ /*Top Left*/ transform-origin: top left; } /* Pre-paint scale, so a page never flashes at full 1920x1080 before scripts.js runs. scripts.js lives at the end of , so the browser paints the unscaled canvas first and the demo appears giant for a frame. An inline