/* From: https://github.com/forestryio/ubuild-blocks/blob/master/dist/css/ubuild.css, MIT license */ * { box-sizing: border-box; margin: 0; padding: 0 } h1 { font-size: 48px; font-size: 3rem; font-weight: 700; letter-spacing: -1.6px; letter-spacing: -.1rem; line-height: 1 } h1 span.light { font-weight: 300 } h2 { font-size: 32px; font-size: 2rem; font-weight: 700 } h2 span.light { font-weight: 300 } h3 { font-weight: 700; letter-spacing: 0 } h3, p { font-size: 16px; font-size: 1rem; line-height: 1.35 } p { font-weight: 400; color: #666 } @media screen and (min-width:700px) { h1 { font-size: 3.5rem } } @media screen and (min-width:1000px) { h1 { font-size: 4rem } } .container { width: 1200px; max-width: 100%; margin: 0 auto } .block { padding: 64px 32px; padding: 4rem 2rem } @media screen and (min-width:700px) { .block { padding: 6rem 4rem } } .button { outline: none; border: 0; padding: 12.8px 24px; padding: .8rem 1.5rem; border-radius: .3rem; font-size: 12.8px; font-size: .8rem; font-weight: 500; cursor: pointer; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none } .button:hover { opacity: .8 } .button.primary { background-color: #ffcb3c; color: #fff } .button.primary.inverted { background-color: #fff; color: #000 } .button.secondary { background-color: transparent; border: 1.5px solid #ffcb3c } .button.small { font-size: 9.6px; font-size: .6rem; padding: 8px 16px; padding: .5rem 1rem } input { border: none; border-bottom: 1px solid #000; font-size: 16px; font-size: 1rem; padding: 12.8px; padding: .8rem; background: none; color: #000 } input::-webkit-input-placeholder { color: #666 } input:-ms-input-placeholder { color: #666 } input::placeholder { color: #666 } input.inverted { border-bottom: 1px solid #fff; color: #000; background: #fff; border-radius: .3rem } input.inverted::-webkit-input-placeholder { color: #ddd } input.inverted:-ms-input-placeholder { color: #ddd } input.inverted::placeholder { color: #ddd } .block-header-1 { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; padding: 16px 32px; padding: 1rem 2rem } .block-header-1--logo img { max-height: 24px; max-height: 1.5rem } .block-header-1 .nav-item { display: inline-block; list-style: none; margin-right: 16px; margin-right: 1rem; font-size: 13.6px; font-size: .85rem } .block-header-1 .nav-item.active a { color: #ffcb3c } .block-header-1 .nav-item a { text-decoration: none; color: #2b2b2b } .block-header-1 .nav-item a:hover { color: #666 } .block-header-1 .nav-item.active a:hover { color: #ffcb3c } .block-header-1 .nav-item:last-of-type { margin: 0 } .block-header-2 { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; padding: 16px 32px; padding: 1rem 2rem } .block-header-2--logo img { max-height: 24px; max-height: 1.5rem } .block-header-2--nav { display: -ms-flexbox; display: flex; -ms-flex-align: baseline; align-items: baseline } .block-header-2 .nav-item { display: inline-block; list-style: none; margin-right: 16px; margin-right: 1rem; font-size: 13.6px; font-size: .85rem } .block-header-2 .nav-item.active a { color: #ffcb3c } .block-header-2 .nav-item a { text-decoration: none; color: #2b2b2b } .block-header-2 .nav-item a:hover { color: #666 } .block-header-2 .nav-item.active a:hover { color: #ffcb3c } .block-header-2 .nav-item:last-of-type { margin: 0 } .block-header-2--cta { margin-left: 32px; margin-left: 2rem } .block-header-3 { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; padding: 16px 32px; padding: 1rem 2rem; background-color: #fff } .block-header-3--logo img { max-height: 24px; max-height: 1.5rem } .block-hero-1 { --bg: #ffcb3c; --text: #fff; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; min-height: 400px; background-color: var(--bg); color: var(--text); text-align: center } @media screen and (min-width:700px) { .block-hero-1 { min-height: 500px } } .block-hero-2 { --bg: #ffcb3c; --text: #fff; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; background-color: var(--bg); color: var(--text); background-repeat: no-repeat; background-size: auto 100%; background-position: 100% } .block-hero-2, .block-hero-2 .columns { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .block-hero-2 .columns { -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between } .block-hero-2 .column.text { -ms-flex: 0 0 100%; flex: 0 0 100%; text-align: center } .block-hero-2 .column.media { -ms-flex: 0 0 100%; flex: 0 0 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; margin-top: 96px; margin-top: 6rem } .block-hero-2 .column.text p { margin: 16px 0 32px; margin: 1rem 0 2rem; color: #fff; font-size: 16px; font-size: 1rem } .block-hero-2 .column.media img { width: 100% } @media screen and (min-width:700px) { .block-hero-2 .column.text { -ms-flex: 0 0 45%; flex: 0 0 45%; text-align: left } .block-hero-2 .column.media { -ms-flex: 0 0 55%; flex: 0 0 55%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; margin-top: 0 } .block-hero-2 .column.media img { width: 45vw; max-width: 520px } } .block-one-column-1 .columns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -32px; margin: -2rem } .block-one-column-1 .column { -ms-flex: 0 0 calc(100% - 4rem); flex: 0 0 calc(100% - 4rem); margin: 32px; margin: 2rem; text-align: center } .block-one-column-1 .column h3 { margin-bottom: 16px; margin-bottom: 1rem } .block-two-column-1 .columns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -32px; margin: -2rem } .block-two-column-1 .column { -ms-flex: 0 0 calc(100% - 4rem); flex: 0 0 calc(100% - 4rem); margin: 32px; margin: 2rem; text-align: center } .block-two-column-1 .column h3 { margin-bottom: 16px; margin-bottom: 1rem } @media screen and (min-width:750px) { .block-two-column-1 .column { -ms-flex: 0 0 calc(50% - 4rem); flex: 0 0 calc(50% - 4rem) } } .block-three-column-1 .columns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -32px; margin: -2rem } .block-three-column-1 .column { -ms-flex: 0 0 calc(100% - 4rem); flex: 0 0 calc(100% - 4rem); margin: 32px; margin: 2rem; text-align: center } .block-three-column-1 .column h3 { margin-bottom: 16px; margin-bottom: 1rem } @media screen and (min-width:750px) { .block-three-column-1 .column { -ms-flex: 0 0 calc(33.33% - 4rem); flex: 0 0 calc(33.33% - 4rem) } } .block-cta-bar { padding: 32px; padding: 2rem; background: #ffcb3c; color: #fff } .block-cta-bar .columns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center } .block-cta-bar .text { -ms-flex: 0 0 100%; flex: 0 0 100%; padding-right: 64px; padding-right: 4rem; margin-bottom: 32px; margin-bottom: 2rem } .block-cta-bar .text h3 { margin-bottom: 16px; margin-bottom: 1rem } .block-cta-bar .text p { font-size: 20px; font-size: 1.25rem; color: #fff } .block-cta-bar .cta { -ms-flex: 0 0 100%; flex: 0 0 100% } .block-cta-bar .cta form { text-align: right; display: -ms-flexbox; display: flex; -ms-flex-align: stretch; align-items: stretch } .block-cta-bar .cta input { -ms-flex: auto; flex: auto; width: 100px; margin-right: 4px; margin-right: .25rem; border-radius: .3rem 0 0 .3rem } .block-cta-bar .cta .button { -ms-flex: 0 0 100px; flex: 0 0 100px; border-radius: 0 .3rem .3rem 0 } @media screen and (min-width:700px) { .block-cta-bar { padding: 2rem 4rem } .block-cta-bar .text { margin: 0 } .block-cta-bar .cta, .block-cta-bar .text { -ms-flex: 0 0 50%; flex: 0 0 50% } .block-cta-bar .cta input { -ms-flex: auto; flex: auto; width: 100px } } .block-footer-1 { font-size: 12.8px; font-size: .8rem; color: #666; text-align: center } .block-footer-2 .columns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 12.8px; font-size: .8rem; margin: -32px; margin: -2rem } .block-footer-2 .column { -ms-flex: 0 0 calc(50% - 4rem); flex: 0 0 calc(50% - 4rem); margin: 32px; margin: 2rem } .block-footer-2 img { max-width: 100% } @media screen and (min-width:700px) { .block-footer-2 .column { -ms-flex: 0 0 calc(25% - 4rem); flex: 0 0 calc(25% - 4rem) } } .block-text-1 .columns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 } .block-text-1 .column { margin: 0 } .block-text-1 .headline { -ms-flex: 0 0 100%; flex: 0 0 100% } .block-text-1 .headline h3 { margin-bottom: 16px; margin-bottom: 1rem } .block-text-1 .text { -ms-flex: 0 0 100%; flex: 0 0 100% } .block-text-1 .text p { margin: 16px 0; margin: 1rem 0 } .block-text-1 .text p:first-of-type { margin: 0 0 16px; margin: 0 0 1rem } .block-text-1 .text p:last-of-type { margin: 16px 0 0; margin: 1rem 0 0 } @media screen and (min-width:700px) { .block-text-1 .columns { margin: -2rem } .block-text-1 .column { margin: 2rem } .block-text-1 .headline { -ms-flex: 0 0 calc(35% - 4rem); flex: 0 0 calc(35% - 4rem) } .block-text-1 .text { -ms-flex: 0 0 calc(65% - 4rem); flex: 0 0 calc(65% - 4rem) } .block-text-1 .headline h3 { margin-bottom: 0 } } .block-feature-1 .columns { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: center } .block-feature-1 .column.text { margin-right: 0; margin-bottom: 32px; margin-bottom: 2rem } .block-feature-1 .column.media, .block-feature-1 .column.text { -ms-flex: 0 0 100%; flex: 0 0 100% } .block-feature-1 .column.text h2 { margin-bottom: 16px; margin-bottom: 1rem } .block-feature-1 .column.media img { max-width: 100% } @media screen and (min-width:700px) { .block-feature-1 .columns { text-align: left } .block-feature-1 .column.text { -ms-flex: 0 0 40%; flex: 0 0 40%; margin-right: 2rem; margin-bottom: 0 } .block-feature-1 .column.media { -ms-flex: 0 0 calc(60% - 2rem); flex: 0 0 calc(60% - 2rem) } } .block-feature-2 .columns { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: center } .block-feature-2 .column.text { -ms-flex: 0 0 100%; flex: 0 0 100%; -ms-flex-order: 1; order: 1; margin-bottom: 32px; margin-bottom: 2rem } .block-feature-2 .column.media { -ms-flex: 0 0 100%; flex: 0 0 100%; -ms-flex-order: 2; order: 2; margin-right: 0 } .block-feature-2 .column.text h2 { margin-bottom: 16px; margin-bottom: 1rem } .block-feature-2 .column.media img { max-width: 100% } @media screen and (min-width:700px) { .block-feature-2 .columns { text-align: left } .block-feature-2 .column.text { -ms-flex: 0 0 50%; flex: 0 0 50%; -ms-flex-order: 2; order: 2; margin-bottom: 0 } .block-feature-2 .column.media { -ms-flex: 0 0 calc(50% - 4rem); flex: 0 0 calc(50% - 4rem); margin-right: 4rem; -ms-flex-order: 1; order: 1 } } .block-media-1 img { max-width: 100% } .block-media-1 figcaption { font-size: 11.2px; font-size: .7rem; color: #666; text-align: center; margin-top: 8px; margin-top: .5rem } .block-media-2 .columns { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -16px; margin: -1rem } .block-media-2 .column { -ms-flex: 0 0 calc(100% - 2rem); flex: 0 0 calc(100% - 2rem); margin: 16px; margin: 1rem } .block-media-2 .column img { max-width: 100% } .block-media-2 figcaption { font-size: 11.2px; font-size: .7rem; color: #666; text-align: center; margin-top: 8px; margin-top: .5rem } @media screen and (min-width:700px) { .block-media-2 .columns { margin: -2rem } .block-media-2 .column { -ms-flex: 0 0 calc(50% - 4rem); flex: 0 0 calc(50% - 4rem); margin: 2rem } } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif; font-size: 16px } ::-moz-selection { background: #ffedbc; color: #333 } ::-webkit-selection { background: #ffedbc; color: #333 } ::selection { background: #ffedbc; color: #333 }