landing page

* { margin: 0; padding: 0; outline: 0; } body, html { height: 100%; width: 100%; } body { font-size: 14px; line-height: 18px; font-family: 'Open Sans', sans-serif; color: #aeaeae; overflow: hidden; /* needed to eliminate scroll bars caused by the background image */ padding: 0; margin: 0; /* necessary for the raster to fill the screen */ height: 100%; width: 100%; } a { color: #0252aa; text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; } a img { border: 0; } /* ---------- FUll WIDTH BACKGROUND ---------- */ #bgimg { position: absolute; z-index: -1; } .content-box { width: 570px; z-index: 2; position: relative; left: 53%; top: 0; padding: 34px 0; } .content-box.type2 { padding-top: 108px; } .content-box.type2 .blackbox form { padding-top: 6px; } #logo { display: block; margin: 0 auto; text-align: center; } #logo img { margin: 0 auto; max-height: 100px; max-width: 300px; } .blackbox { background: #233d53; border-radius: 7px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .blackbox { text-align: center; padding-bottom: 17px; padding-top: 17px; margin-bottom: 11px; } .blackbox h3, .blackbox h2 { font-size: 28px; line-height: 28px; color: #fefefe; font-weight: normal; padding: 20px 30px; overflow: hidden; } .blackbox h3 { font-size: 28px; font-weight: 600; line-height: 30px; padding: 12px 50px; overflow: hidden; } .blackbox p { font-size: 16px; font-weight: 400; padding: 10px 30px; overflow: hidden; color: #a4d9ff; } .blackbox #subtext { font-size: 14px; line-height: 20px; } .blackbox form { padding: 10px 0 16px; } .blackbox .field { background-color: #fff; font-size: 14px; padding: 6px 10px; border: 0; width: 256px; margin-bottom: 16px; } .blackbox .field { box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .blackbox #optin-button { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; display: block; background: #ffc600; color: #fcfcfc; font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 600; width: 395px; height: 50px; cursor: pointer; -webkit-appearance: none; line-height: 49px; margin: 0 auto; padding: 5px 5px; text-decoration: none; overflow: hidden; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } .blackbox #optin-button:hover { background-color: #059edd; } .footer { color: #073051; font-size: 14px; text-align: center; } .footer a { color: #fafafa; } @media only screen and (max-width: 1300px) { .content-box { left: 45%; } } @media only screen and (max-width: 1100px) { .content-box { left: 35%; } } @media only screen and (max-width: 1000px) { .content-box { left: 28%; } } @media only screen and (max-width: 850px) { .content-box { left: 22%; } } @media only screen and (max-width: 768px) { .content-box { margin: 0 auto; position: static; max-width: 85%; } } @media only screen and (max-width: 650px) { .content-box.type2 { padding-top: 60px; } .blackbox h3 { font-size: 18px; line-height: 22px; } .blackbox .field { width: 85%; } .blackbox #optin-button { font-size: 20px; width: 85%; } } @media only screen and (max-width: 340px) { body { font-size: 12px; } .content-box.type2 { padding-top: 30px; } #logo img { max-width: 210px; } .blackbox h3 { font-size: 16px; line-height: 21px; padding: 12px 15px; } .blackbox .field { width: 80%; } .blackbox #optin-button { width: 80%; font-size: 18px; } .blackbox p { font-size: 12px; line-height: 14px; padding: 8px 15px; } .blackbox #subtext { font-size: 12px; line-height: 14px; } }