#popup                     { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: #F7F7F7; background-image: url("/images/popup_background_2.png"); background-repeat: repeat; opacity: 0.6; z-index: 100000; }
#box-wrap                  { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; justify-content: center; align-items: center; z-index: 100001; }
#box                       { width: 100%; max-width: 560px; height: auto; padding: 20px; background-image: url("/images/popup_image.jpg"); background-size: cover; background-position: left top; background-repeat: no-repeat; box-shadow: 0px 0px 2px #333333; }
#box .top                  { font-size: 24px; color: #FFFFFF; font-weight: bold; text-align: center; }
#box .text                 { font-size: 16px; color: #FFFFFF; text-align: center; padding: 0px 25px 0px 25px; }
#box .button-orange        { display: inline-block; background-color: #FC9A07; color: #FFFFFF; font-size: 16px; font-weight: bold; margin: 1px; padding: 12px 24px 12px 24px; border: none; border-radius: 2px; transition: all 300ms ease-out; outline: none; box-sizing: border-box; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); cursor: pointer; text-transform: uppercase; } /* OR #FF9900 (L-Soft Logo) */
#box .button-orange:hover  { background-color: #FCAB32; }
#box .button-orange:focus  { box-shadow: inset 0 0 0 1px #FC9A07, 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); }
#box .button-orange:active { background-color: #FCAB32; }