.feat-onboard { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: baseline; background-color: rgba(0, 0, 0, .85); background-repeat: no-repeat; background-position-x: 0; color: #FFF; text-align: center; z-index: 102; overflow: auto; } .feat-onboard-wrapper { padding-top: 30px; } .feat-onboard-title { color: #FFF; margin-bottom: 30px; } .feat-onboard-description { max-width: 35em; margin: 0 auto 5px; } .feat-onboard-highlight { font-weight: bold; white-space: nowrap; } .feat-onboard-adv-title { font-weight: bold; white-space: nowrap; color: #FFF; font-size: 23px; margin-top: 0; } .feat-onboard-tutorial-wrapper { display: flex; align-items: center; padding: 30px 0 15px; } .feat-onboard-video { width: 616px; margin: 0 30px; box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); } .feat-onboard-nav-btn { border-radius: 1em; width: 2em; height: 2em; text-align: center; padding: 0; font-size: 1.3em; line-height: 1em; box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); &[disabled] { opacity: 0.2; } &:focus, &:active:focus { outline: 0; box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); } } a.feat-onboard-dismiss { position: absolute; top: 10px; right: 10px; width: 1em; height: 1em; line-height: 1em; font-size: 2.5em; color: #FFF; background-color: rgba(0,0,0, .25); opacity: 0.7; border-radius: 0.5em; transition: opacity .15s ease-in-out; &:hover, &:focus { text-decoration: none; color: #FFF; opacity: 1; } }