@feat-onboard-wrapper-width: 750px; @feat-onboard-max-text-width: 700px; .feat-onboard { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; 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 { } .feat-onboard-title { color: #FFF; margin-bottom: 40px; } .feat-onboard-title-name { font-weight: bold; } .feat-onboard-description { max-width: @feat-onboard-max-text-width; margin: 0 auto 5px; padding: 0 80px; } .feat-onboard-highlight { font-weight: bold; white-space: nowrap; } .feat-onboard-adv-wrapper { text-align: left; } .feat-onboard-adv-title { font-weight: bold; white-space: nowrap; color: #FFF; font-size: 23px; margin-top: 0; } .feat-onboard-btn-wrapper { margin-top: 30px; margin-bottom: 10px; > .btn { box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3); } } .feat-onboard-tutorial-wrapper { display: flex; align-items: center; padding: 30px 0; } .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; &[disabled] { opacity: 0.2; } }