/* * Base Styles / Reset */ html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } fieldset, img { border: 0; } li { list-style: none; } * { box-sizing: border-box; } *:before, *:after { box-sizing: inherit; } /** * HTML */ html { width: 100%; height: 100%; color: #fff; background: #323232; font-family: 'jaf-facitweb', Helvetica, Arial, sans-serif; } body { font-weight: 300; color: #222; width: 100%; height: 100%; color: #fff; background: #323232; } p { margin: 0; } /** * Headers */ h1, h2, h3, h4, h5, h6 { letter-spacing: 0.1em; text-transform: uppercase; margin: 0; } /** * Images - Responsive to their wrapper. */ img { max-width: 100%; /* Part 1: Set a maxium relative to the parent */ width: auto\9; /* IE7-8 need help adjusting responsive images */ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; } /** * Links */ a, a:visited { color: #00a2dc; font-weight: 500; text-decoration: none; cursor: pointer; } a:hover { color: #0063be; } /* Skeleton Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .column, .columns { width: 100%; float: left; box-sizing: border-box; } /* For devices larger than 550px */ @media (min-width: 550px) { .column, .columns { margin-left: 1.6%; height: auto; } .column:first-child, .columns:first-child { margin-left: 0; } .two.columns { width: 15%; } .three.columns { width: 23.8%; } .four.columns { width: 32.26%; } .six.columns { width: 49.2%; } .eight.columns { width: 66.14%; } .nine.columns { width: 74.6%; } .twelve.columns { width: 100%; margin-left: 0; } } /* Self Clearing Goodness */ .row:after { content: ''; display: table; clear: both; } .clearfix { clear: both; } /** * BUTTONS */ .btn, a.btn { display: inline-block; padding-left: 15px; padding-right: 15px; background: #b83430; border: 0 none; color: #fff; transition: background 0.5s, opacity 0.5s; font-weight: 500; cursor: pointer; height: 38px; text-align: center; font-size: 11px; line-height: 38px; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-radius: 4px; box-sizing: border-box; letter-spacing: 0.1em; } .btn:hover, a.btn:hover { background: #de2721; color: #fff; font-weight: 500; } .btn-small { line-height: 30px; height: 30px; padding: 0 10px; text-transform: none; letter-spacing: 0; } .btn-secondary { background: #00a2dc; } .btn-secondary:hover { background: #0063be; } /** * Marketing Site Specific */ .marketing-header-wrapper { background-color: #5b5b5b; overflow: hidden; position: relative; } .marketing-header-background { width: 120%; margin-left: -10%; padding: 0 10%; background-color: #5b5b5b; -webkit-box-shadow: inset 0px -48px 80px 30px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0px -48px 80px 30px rgba(0, 0, 0, 0.5); box-shadow: inset 0px -48px 80px 30px rgba(0, 0, 0, 0.5); } .marketing-header-content { margin: 0 auto; max-width: 1400px; position: relative; background-image: url('/static/assets/marketing/world.png'); background-size: 100% auto; background-position: center top; } .marketing-logo { background-image: url('/static/assets/marketing/logo.png'); background-size: 171px 49px; width: 171px; height: 49px; position: absolute; left: 50px; top: 25px; } .marketing-nav-links { position: absolute; right: 50px; top: 25px; font-size: 14px; } a.marketing-nav-link { color: #fff; display: inline-block; padding: 5px 10px; transition: background 1s; border-radius: 4px; } a.marketing-nav-link:hover { background: #323232; color: #4cc8f5; } a.marketing-nav-link-account { color: #4cc8f5; } .marketing-home-hero-wrapper { display: table; padding: 130px 110px 0; width: 100%; } .marketing-home-hero-content { display: table-row; } .marketing-home-hero-copy { display: table-cell; clear: both; position: static; padding: 0 20px 0 0; width: 45%; } .marketing-home-hero-image-wrapper { display: table-cell; vertical-align: bottom; width: 50%; position: relative; padding-top: 20px; } .marketing-home-hero-image { display: block; vertical-align: bottom; margin-bottom: 1px; box-shadow: 0 0 100px 40px rgba(0, 0, 0, 0.5); max-width: 700px; width: 100%; } .marketing-home-bottom-wrapper { position: relative; } h1.marketing-home-hero-title { font-size: 11px; color: #a2a2a2; text-transform: none; letter-spacing: 0; margin-bottom: 10px; font-weight: 300; } h2.marketing-home-hero-title { font-size: 18px; margin-bottom: 10px; font-weight: 500; letter-spacing: 0.2em; } .marketing-home-hero-title span { display: inline-block; white-space: nowrap; } .marketing-home-hero-text { font-size: 13px; font-weight: 300; letter-spacing: 0.05em; line-height: 2.5em; max-width: 360px; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 15px; margin: 15px 0 20px; } a.marketing-home-hero-btn { width: 200px; height: 45px; line-height: 45px; margin-bottom: 40px; } .marketing-home-logoBar { background: #fff; height: 120px; border-bottom: 1px solid #ddd; padding: 0 40px; white-space: nowrap; text-align: center; } .marketing-home-logoBar-image1 { width: 100%; max-width: 1130px; display: inline-block; height: 120px; background-image: url('/static/assets/marketing/customer_logos_5-all.gif'); background-size: 95% auto; background-position: center center; background-repeat: no-repeat; } .marketing-home-content-section-wrapper { background-color: #fff; color: #000; } .marketing-home-content-section { margin: 0 auto; max-width: 1400px; padding: 50px 110px 80px; } h2.marketing-home-content-title { font-size: 18px; margin-bottom: 30px; font-weight: 500; letter-spacing: 0.2em; text-transform: none; } .marketing-home-content-title-highlight { color: #0063be; } .marketing-home-promo-boxes-wrapper { display: table; border-collapse: separate; border-spacing: 30px 0; width: calc(100% + 60px); margin: 0 -30px; } .marketing-home-promo-boxes { display: table-row; } .marketing-home-promo-box { display: table-cell; background: #0063be; color: #fff; padding: 20px; font-size: 12px; line-height: 2.4em; width: 25%; } .marketing-home-promo-box-icon { padding-right: 10px; font-size: 20px; margin-top: -3px; vertical-align: middle; } .marketing-home-promo-box-header { opacity: 0.8; font-size: 16px; padding-bottom: 15px; } .marketing-footer { background-image: url('/static/assets/marketing/world.png'); background-size: 100% auto; background-position: center bottom; background-color: #444; } .marketing-footer-content { max-width: 1300px; margin: 0 auto; padding: 50px; font-size: 12px; font-weight: 300; line-height: 2.5em; } .marketing-footer-content a { color: #2c93b7; line-height: 1.5em; } .marketing-footer-content a:hover { color: #fff; } .marketing-footer-links-news a { line-height: 1.5em; display: block; } .marketing-footer-logo { max-width: 223px; height: 163px; background-size: 223px 163px; background-image: url('/static/assets/marketing/logo_footer.png'); background-repeat: no-repeat; background-size: 100% auto; } .marketing-footer-title { color: #a9a9a9; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 20px; } .marketing-footer-list-item { display: block; padding-bottom: 15px; } .marketing-footer-list-item-label { font-size: 10px; width: 60px; text-transform: uppercase; color: #aaa; display: inline-block; } .marketing-nav-collapse { display: none; } .marketing-footer-copyright { background: #000; clear: both; font-weight: 300; line-height: 2.5em; padding: 2px 15px; font-size: 10px; } .marketing-footer-copyright-links { padding: 0 10px; } .newsLink-item { line-height: 1.5em; padding-bottom: 15px; display: block; color: rgba(255, 255, 255, 0.5); } /* For devices larger than 800px */ @media (max-width: 1000px) { .marketing-home-hero-wrapper, .marketing-home-hero-content, .marketing-home-hero-copy, .marketing-home-hero-image-wrapper { display: block; width: auto; } .marketing-home-hero-text { width: auto; max-width: 100%; } } /* For devices larger than 800px */ @media only screen and (max-width: 800px) { .marketing-logo { position: static; float: left; margin: 20px; } .marketing-nav-collapse { display: block; float: right; margin: 25px; font-size: 20px; background: rgba(0, 0, 0, 0.5); background-image: url("data:image/svg+xml,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 width=%2727%27 height=%2732%27 viewBox=%270 0 27 32%27%3E%3Cg fill=%27%23FFFFFF%27%3E%3Ctitle%3Emenu%3C/title%3E%3Cpath d=%27M27.424 24v2.272q0 .48-.32.8t-.832.352H1.152q-.48 0-.8-.352t-.352-.8V24q0-.48.352-.8t.8-.352h25.12q.48 0 .832.352t.32.8zm0-9.152v2.304q0 .448-.32.8t-.832.32H1.152q-.48 0-.8-.32t-.352-.8v-2.304q0-.448.352-.8t.8-.32h25.12q.48 0 .832.32t.32.8zm0-9.12V8q0 .448-.32.8t-.832.352H1.152q-.48 0-.8-.352T0 8V5.728q0-.48.352-.832t.8-.32h25.12q.48 0 .832.32t.32.832z%27/%3E%3C/g%3E%3C/svg%3E"); background-size: 20px 25px; background-position: center center; background-repeat: no-repeat; color: #fff; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 2px; } .marketing-nav-links { max-height: 0; overflow: hidden; position: static; background: rgba(0, 0, 0, 0.5); clear: both; transition: max-height 0.5s; } a.marketing-nav-link { display: block; text-align: left; padding: 20px 80px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .marketing-nav-open .marketing-nav-links { max-height: 1000px; margin-bottom: 20px; } .marketing-header-wrapper, .marketing-header-background, .marketing-header-content { height: auto; } .marketing-home-hero-wrapper { padding: 10px 30px 0; } .marketing-home-content-section { padding: 50px 30px 60px; } .marketing-home-promo-boxes-wrapper, .marketing-home-promo-boxes { width: 100%; display: block; margin: 0; } .marketing-home-promo-box { min-height: 0; height: auto; display: inline-block; width: 48%; vertical-align: top; margin-bottom: 20px; margin-right: 1%; } .marketing-footer-logo { display: none; } .marketing-footer-section.four.columns, .marketing-footer-section.three.columns, .marketing-footer-section.two.columns, .marketing-footer .nine.columns { float: none; display: block; width: auto; margin: 0 10px 40px; } .marketing-footer-list-item { font-size: 13px; } .marketing-footer-content { padding: 30px; } } /* For smaller than 600px */ @media only screen and (max-width: 600px) { .three.columns { float: none; display: block; width: auto; margin: 0 0 10px; height: auto; } .marketing-home-promo-box { display: block; width: auto; } .marketing-footer-copyright { text-align: center; } .marketing-footer-copyright-links:before { content: ' '; display: block; } } /*# sourceMappingURL=landing.css.map*/