html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, code, em, img, ins, kbd, q, samp, small, strong, var, a, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button, input, select, textarea { margin: 0; padding: 0; border: 0; outline: none; font-size: 100%; vertical-align: baseline; background: transparent; } html { overflow-y: scroll; background-color: #FFFFFF; } body { background-color: #FFFFFF; font: 14px 'Open Sans', 'Lucida Grande', Geneva, Arial, sans-serif; margin: 0px; padding: 0px; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; width: 100%; height: 100%; overflow: hidden; } section#login { width: 462px; margin: 100px auto 100px auto; } section#loginbox { width: 300px; background: #F6F6F6; border: 1px solid #dddddd; padding: 60px 80px 30px 80px; border-radius: 4px; } section#loginbox h1 { display: block; width: 100%; height: 75px; margin-bottom: 40px; background: url("images/uslogo.svg") no-repeat center; background-size: 220px 25px; text-indent: -99999px; } section#login div.usfield.one { width: 300px; margin-right: 0 !important; } section#login div.usform-wrap input { border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } a.button.blue { width: calc( 100% - 2px); font-size: 18px; letter-spacing: inherit; text-transform: none; font-weight: 700; padding: 8px 0 8px 0 !important; text-align: center; cursor: pointer; margin: 10px 0 20px 0 !important; } #forgotpw { font-size: 10px; color: #666666; cursor: pointer; } footer { display: block; font-size: 10px; padding: 30px 0 0 0; color: #666666; text-align: center; } footer a { color: #666666; text-decoration: none; } section#login footer .login-copy { display: block; color: #999999; padding-top: 15px; } section#login footer .login-copy a { color: #999999; text-decoration: none; } @media only screen and (max-width: 736px) { section#login { width: 100%; margin: 0 0 30px 0 !important; } section#loginbox { width: 100%; border: 0; border-bottom: 1px solid #dddddd; padding: 20px 0 20px 0; border-radius: 0; background: #F6F6F6; background: -moz-linear-gradient(left, rgba(246, 246, 246, 0.5) 0%, #f6f6f6 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(246, 246, 246, 0.5)), color-stop(100%, #f6f6f6)); background: -webkit-linear-gradient(left, rgba(246, 246, 246, 0.5) 0%, #f6f6f6 100%); background: -o-linear-gradient(left, rgba(246, 246, 246, 0.5) 0%, #f6f6f6 100%); background: -ms-linear-gradient(left, rgba(246, 246, 246, 0.5) 0%, #f6f6f6 100%); background: linear-gradient(to right, rgba(246, 246, 246, 0.5) 0%, #f6f6f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80f6f6f6', endColorstr='#f6f6f6',GradientType=1 ); } section#loginbox h1 { margin-bottom: 10px; } #loginform { padding: 0 20px 0 20px; } section#login div.usfield.one { width: 100% !important; } section#login div.usform-wrap input { width: 92%; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); } a.button { width: 98%; width: -webkit-calc(100% - 2px); width: -moz-calc(100% - 2px); width: calc(100% - 2px); } } html.uscomposite { background: #1a283b; overflow-y: hidden; height: 100%; } html.uscomposite body { background-image: url(images/atomic.svg); background-color: #1a283b; background-size: calc(100% + 10px) calc(100% + 58px); background-position: -5px -53px; } html.uscomposite section#loginbox { width: 300px; background: rgba(255, 255, 255, 0.7); border: 0px; padding: 60px 80px 30px 80px; border-radius: 0px; position: relative; } @keyframes lightup { from { -webkit-filter: blur(0px); background-color: rgba(255, 255, 255, 0); } to { -webkit-filter: blur(20px); background-color: rgba(255, 255, 255, 0.3); } } html.uscomposite section#login:before { content: ""; width: 459px; height: 403px; display: block; background-image: url(images/atomic.svg); position: absolute; left: calc(50% - 230px); background-size: 1600px 758px; top: 100px; background-position: calc(50% + 1px) -153px; animation-name: lightup; animation-duration: 4s; animation-delay: 2s; animation-fill-mode: forwards; }