diff --git a/README.txt b/README.txt index aba558f..60fcd6e 100644 --- a/README.txt +++ b/README.txt @@ -1,32 +1,4 @@ -Massively by HTML5 UP -html5up.net | @ajlkn -Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +ameen-webpage-htmls +great side quest result +~Spectral by HTML5 UP~ - -This is Massively, a text-heavy, article-oriented design built around a huge background -image (with a new parallax implementation I'm testing) and scroll effects (powered by -Scrollex). A *slight* departure from all the one-pagers I've been doing lately, but one -that fulfills a few user requests and makes use of some new techniques I've been wanting -to try out. Enjoy it :) - -Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images -you can use for pretty much whatever. - -(* = not included) - -AJ -aj@lkn.io | @ajlkn - - -Credits: - - Demo Images: - Unsplash (unsplash.com) - - Icons: - Font Awesome (fontawesome.io) - - Other: - jQuery (jquery.com) - Scrollex (github.com/ajlkn/jquery.scrollex) - Responsive Tools (github.com/ajlkn/responsive-tools) \ No newline at end of file diff --git a/assets/ameen_ahsen_curriculum_vitae_.pdf b/assets/ameen_ahsen_curriculum_vitae_.pdf new file mode 100644 index 0000000..a10cf21 Binary files /dev/null and b/assets/ameen_ahsen_curriculum_vitae_.pdf differ diff --git a/assets/css/images/arrow.svg b/assets/css/images/arrow.svg new file mode 100644 index 0000000..49ee37c --- /dev/null +++ b/assets/css/images/arrow.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/css/images/bars.svg b/assets/css/images/bars.svg new file mode 100644 index 0000000..50e4e41 --- /dev/null +++ b/assets/css/images/bars.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/css/images/close.svg b/assets/css/images/close.svg new file mode 100644 index 0000000..3ad8786 --- /dev/null +++ b/assets/css/images/close.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index a392c9b..ba0eb7d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,4689 +1,4190 @@ -@import url(fontawesome-all.min.css); -@import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900"); - +@import url(fontawesome-all.min.css); +@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic"); + /* - Massively by HTML5 UP + Spectral by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -html, body, div, span, applet, object, -iframe, h1, h2, h3, h4, h5, h6, p, blockquote, -pre, a, abbr, acronym, address, big, cite, -code, del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, b, -u, i, center, dl, dt, dd, ol, ul, li, fieldset, -form, label, legend, table, caption, tbody, -tfoot, thead, tr, th, td, article, aside, -canvas, details, embed, figure, figcaption, -footer, header, hgroup, menu, nav, output, ruby, -section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline;} - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block;} - -body { - line-height: 1; -} - -ol, ul { - list-style: none; -} - -blockquote, q { - quotes: none; -} - - blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; - } - -table { - border-collapse: collapse; - border-spacing: 0; -} - -body { - -webkit-text-size-adjust: none; -} - -mark { - background-color: transparent; - color: inherit; -} - -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -input, select, textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; -} - -/* Basic */ - - @-ms-viewport { - width: device-width; - } - - body { - -ms-overflow-style: scrollbar; - } - - @media screen and (max-width: 480px) { - - html, body { - min-width: 320px; - } - - } - - html { - box-sizing: border-box; - } - - *, *:before, *:after { - box-sizing: inherit; - } - - body { - background-color: #1e252d; - } - - body.is-preload *, body.is-preload *:before, body.is-preload *:after { - -moz-animation: none !important; - -webkit-animation: none !important; - -ms-animation: none !important; - animation: none !important; - -moz-transition: none !important; - -webkit-transition: none !important; - -ms-transition: none !important; - transition: none !important; - } - -/* Type */ - - html { - font-size: 16pt; - } - - @media screen and (max-width: 1680px) { - - html { - font-size: 12pt; - } - - } - - @media screen and (max-width: 1280px) { - - html { - font-size: 11pt; - } - - } - - @media screen and (max-width: 360px) { - - html { - font-size: 10pt; - } - - } - - body { - color: #212931; - } - - body, input, select, textarea { - font-family: "Merriweather", Georgia, serif; - font-weight: 300; - font-size: 1rem; - line-height: 2.375; - } - - a { - -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - border-bottom: dotted 1px; - text-decoration: none; - } - - a:hover { - border-bottom-color: transparent; - } - - strong, b { - font-weight: 600; - } - - em, i { - font-style: italic; - } - - p { - text-align: justify; - margin: 0 0 2rem 0; - } - - h1, h2, h3, h4, h5, h6 { - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-weight: 900; - line-height: 1.5; - letter-spacing: 0.075em; - text-transform: uppercase; - margin: 0 0 1rem 0; - } - - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - border-bottom: 0; - color: inherit; - text-decoration: none; - } - - h1 { - font-size: 4rem; - line-height: 1.1; - margin: 0 0 2rem 0; - } - - h2 { - font-size: 1.75rem; - line-height: 1.3; - margin: 0 0 1.5rem 0; - } - - h3 { - font-size: 1.25rem; - margin: 0 0 1.5rem 0; - } - - h4 { - font-size: 1rem; - } - - h5 { - font-size: 0.9rem; - } - - h6 { - font-size: 0.8rem; - } - - sub { - font-size: 0.8rem; - position: relative; - top: 0.5rem; - } - - sup { - font-size: 0.8rem; - position: relative; - top: -0.5rem; - } - - blockquote { - border-left: solid 4px; - font-style: italic; - margin: 0 0 2rem 0; - padding: 0.5rem 0 0.5rem 2rem; - } - - code { - border: solid 2px; - font-family: "Courier New", monospace; - font-size: 0.9rem; - margin: 0 0.25rem; - padding: 0.25rem 0.65rem; - } - - pre { - -webkit-overflow-scrolling: touch; - font-family: "Courier New", monospace; - font-size: 0.9rem; - margin: 0 0 2rem 0; - } - - pre code { - display: block; - line-height: 1.75; - padding: 1rem 1.5rem; - overflow-x: auto; - } - - hr { - border: 0; - border-bottom: solid 2px; - margin: 3rem 0; - } - - hr.major { - margin: 5rem 0; - } - - .align-left { - text-align: left; - } - - .align-center { - text-align: center; - } - - .align-right { - text-align: right; - } - - input, select, textarea { - color: #212931; - } - - a { - color: #212931; - border-bottom-color: rgba(33, 41, 49, 0.5); - } - - a:hover { - border-bottom-color: transparent; - color: #18bfef !important; - } - - strong, b { - color: #212931; - } - - h1, h2, h3, h4, h5, h6 { - color: #212931; - } - - blockquote { - border-left-color: #eeeeee; - } - - code { - background: rgba(220, 220, 220, 0.25); - border-color: #eeeeee; - } - - hr { - border-bottom-color: #eeeeee; - } - -/* Row */ - - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - - .row > * { - box-sizing: border-box; - } - - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - - .row.aln-left { - justify-content: flex-start; - } - - .row.aln-center { - justify-content: center; - } - - .row.aln-right { - justify-content: flex-end; - } - - .row.aln-top { - align-items: flex-start; - } - - .row.aln-middle { - align-items: center; - } - - .row.aln-bottom { - align-items: flex-end; - } - - .row > .imp { - order: -1; - } - - .row > .col-1 { - width: 8.33333%; - } - - .row > .off-1 { - margin-left: 8.33333%; - } - - .row > .col-2 { - width: 16.66667%; - } - - .row > .off-2 { - margin-left: 16.66667%; - } - - .row > .col-3 { - width: 25%; - } - - .row > .off-3 { - margin-left: 25%; - } - - .row > .col-4 { - width: 33.33333%; - } - - .row > .off-4 { - margin-left: 33.33333%; - } - - .row > .col-5 { - width: 41.66667%; - } - - .row > .off-5 { - margin-left: 41.66667%; - } - - .row > .col-6 { - width: 50%; - } - - .row > .off-6 { - margin-left: 50%; - } - - .row > .col-7 { - width: 58.33333%; - } - - .row > .off-7 { - margin-left: 58.33333%; - } - - .row > .col-8 { - width: 66.66667%; - } - - .row > .off-8 { - margin-left: 66.66667%; - } - - .row > .col-9 { - width: 75%; - } - - .row > .off-9 { - margin-left: 75%; - } - - .row > .col-10 { - width: 83.33333%; - } - - .row > .off-10 { - margin-left: 83.33333%; - } - - .row > .col-11 { - width: 91.66667%; - } - - .row > .off-11 { - margin-left: 91.66667%; - } - - .row > .col-12 { - width: 100%; - } - - .row > .off-12 { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0; - margin-left: 0rem; - } - - .row.gtr-0 > * { - padding: 0 0 0 0rem; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0rem; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0rem; - } - - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375rem; - } - - .row.gtr-25 > * { - padding: 0 0 0 0.375rem; - } - - .row.gtr-25.gtr-uniform { - margin-top: -0.375rem; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375rem; - } - - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75rem; - } - - .row.gtr-50 > * { - padding: 0 0 0 0.75rem; - } - - .row.gtr-50.gtr-uniform { - margin-top: -0.75rem; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75rem; - } - - .row { - margin-top: 0; - margin-left: -1.5rem; - } - - .row > * { - padding: 0 0 0 1.5rem; - } - - .row.gtr-uniform { - margin-top: -1.5rem; - } - - .row.gtr-uniform > * { - padding-top: 1.5rem; - } - - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25rem; - } - - .row.gtr-150 > * { - padding: 0 0 0 2.25rem; - } - - .row.gtr-150.gtr-uniform { - margin-top: -2.25rem; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25rem; - } - - .row.gtr-200 { - margin-top: 0; - margin-left: -3rem; - } - - .row.gtr-200 > * { - padding: 0 0 0 3rem; - } - - .row.gtr-200.gtr-uniform { - margin-top: -3rem; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 3rem; - } - - @media screen and (max-width: 1680px) { - - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - - .row > * { - box-sizing: border-box; - } - - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - - .row.aln-left { - justify-content: flex-start; - } - - .row.aln-center { - justify-content: center; - } - - .row.aln-right { - justify-content: flex-end; - } - - .row.aln-top { - align-items: flex-start; - } - - .row.aln-middle { - align-items: center; - } - - .row.aln-bottom { - align-items: flex-end; - } - - .row > .imp-xlarge { - order: -1; - } - - .row > .col-1-xlarge { - width: 8.33333%; - } - - .row > .off-1-xlarge { - margin-left: 8.33333%; - } - - .row > .col-2-xlarge { - width: 16.66667%; - } - - .row > .off-2-xlarge { - margin-left: 16.66667%; - } - - .row > .col-3-xlarge { - width: 25%; - } - - .row > .off-3-xlarge { - margin-left: 25%; - } - - .row > .col-4-xlarge { - width: 33.33333%; - } - - .row > .off-4-xlarge { - margin-left: 33.33333%; - } - - .row > .col-5-xlarge { - width: 41.66667%; - } - - .row > .off-5-xlarge { - margin-left: 41.66667%; - } - - .row > .col-6-xlarge { - width: 50%; - } - - .row > .off-6-xlarge { - margin-left: 50%; - } - - .row > .col-7-xlarge { - width: 58.33333%; - } - - .row > .off-7-xlarge { - margin-left: 58.33333%; - } - - .row > .col-8-xlarge { - width: 66.66667%; - } - - .row > .off-8-xlarge { - margin-left: 66.66667%; - } - - .row > .col-9-xlarge { - width: 75%; - } - - .row > .off-9-xlarge { - margin-left: 75%; - } - - .row > .col-10-xlarge { - width: 83.33333%; - } - - .row > .off-10-xlarge { - margin-left: 83.33333%; - } - - .row > .col-11-xlarge { - width: 91.66667%; - } - - .row > .off-11-xlarge { - margin-left: 91.66667%; - } - - .row > .col-12-xlarge { - width: 100%; - } - - .row > .off-12-xlarge { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0; - margin-left: 0rem; - } - - .row.gtr-0 > * { - padding: 0 0 0 0rem; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0rem; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0rem; - } - - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375rem; - } - - .row.gtr-25 > * { - padding: 0 0 0 0.375rem; - } - - .row.gtr-25.gtr-uniform { - margin-top: -0.375rem; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375rem; - } - - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75rem; - } - - .row.gtr-50 > * { - padding: 0 0 0 0.75rem; - } - - .row.gtr-50.gtr-uniform { - margin-top: -0.75rem; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75rem; - } - - .row { - margin-top: 0; - margin-left: -1.5rem; - } - - .row > * { - padding: 0 0 0 1.5rem; - } - - .row.gtr-uniform { - margin-top: -1.5rem; - } - - .row.gtr-uniform > * { - padding-top: 1.5rem; - } - - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25rem; - } - - .row.gtr-150 > * { - padding: 0 0 0 2.25rem; - } - - .row.gtr-150.gtr-uniform { - margin-top: -2.25rem; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25rem; - } - - .row.gtr-200 { - margin-top: 0; - margin-left: -3rem; - } - - .row.gtr-200 > * { - padding: 0 0 0 3rem; - } - - .row.gtr-200.gtr-uniform { - margin-top: -3rem; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 3rem; - } - - } - - @media screen and (max-width: 1280px) { - - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - - .row > * { - box-sizing: border-box; - } - - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - - .row.aln-left { - justify-content: flex-start; - } - - .row.aln-center { - justify-content: center; - } - - .row.aln-right { - justify-content: flex-end; - } - - .row.aln-top { - align-items: flex-start; - } - - .row.aln-middle { - align-items: center; - } - - .row.aln-bottom { - align-items: flex-end; - } - - .row > .imp-large { - order: -1; - } - - .row > .col-1-large { - width: 8.33333%; - } - - .row > .off-1-large { - margin-left: 8.33333%; - } - - .row > .col-2-large { - width: 16.66667%; - } - - .row > .off-2-large { - margin-left: 16.66667%; - } - - .row > .col-3-large { - width: 25%; - } - - .row > .off-3-large { - margin-left: 25%; - } - - .row > .col-4-large { - width: 33.33333%; - } - - .row > .off-4-large { - margin-left: 33.33333%; - } - - .row > .col-5-large { - width: 41.66667%; - } - - .row > .off-5-large { - margin-left: 41.66667%; - } - - .row > .col-6-large { - width: 50%; - } - - .row > .off-6-large { - margin-left: 50%; - } - - .row > .col-7-large { - width: 58.33333%; - } - - .row > .off-7-large { - margin-left: 58.33333%; - } - - .row > .col-8-large { - width: 66.66667%; - } - - .row > .off-8-large { - margin-left: 66.66667%; - } - - .row > .col-9-large { - width: 75%; - } - - .row > .off-9-large { - margin-left: 75%; - } - - .row > .col-10-large { - width: 83.33333%; - } - - .row > .off-10-large { - margin-left: 83.33333%; - } - - .row > .col-11-large { - width: 91.66667%; - } - - .row > .off-11-large { - margin-left: 91.66667%; - } - - .row > .col-12-large { - width: 100%; - } - - .row > .off-12-large { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0; - margin-left: 0rem; - } - - .row.gtr-0 > * { - padding: 0 0 0 0rem; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0rem; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0rem; - } - - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375rem; - } - - .row.gtr-25 > * { - padding: 0 0 0 0.375rem; - } - - .row.gtr-25.gtr-uniform { - margin-top: -0.375rem; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375rem; - } - - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75rem; - } - - .row.gtr-50 > * { - padding: 0 0 0 0.75rem; - } - - .row.gtr-50.gtr-uniform { - margin-top: -0.75rem; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75rem; - } - - .row { - margin-top: 0; - margin-left: -1.5rem; - } - - .row > * { - padding: 0 0 0 1.5rem; - } - - .row.gtr-uniform { - margin-top: -1.5rem; - } - - .row.gtr-uniform > * { - padding-top: 1.5rem; - } - - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25rem; - } - - .row.gtr-150 > * { - padding: 0 0 0 2.25rem; - } - - .row.gtr-150.gtr-uniform { - margin-top: -2.25rem; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25rem; - } - - .row.gtr-200 { - margin-top: 0; - margin-left: -3rem; - } - - .row.gtr-200 > * { - padding: 0 0 0 3rem; - } - - .row.gtr-200.gtr-uniform { - margin-top: -3rem; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 3rem; - } - - } - - @media screen and (max-width: 980px) { - - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - - .row > * { - box-sizing: border-box; - } - - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - - .row.aln-left { - justify-content: flex-start; - } - - .row.aln-center { - justify-content: center; - } - - .row.aln-right { - justify-content: flex-end; - } - - .row.aln-top { - align-items: flex-start; - } - - .row.aln-middle { - align-items: center; - } - - .row.aln-bottom { - align-items: flex-end; - } - - .row > .imp-medium { - order: -1; - } - - .row > .col-1-medium { - width: 8.33333%; - } - - .row > .off-1-medium { - margin-left: 8.33333%; - } - - .row > .col-2-medium { - width: 16.66667%; - } - - .row > .off-2-medium { - margin-left: 16.66667%; - } - - .row > .col-3-medium { - width: 25%; - } - - .row > .off-3-medium { - margin-left: 25%; - } - - .row > .col-4-medium { - width: 33.33333%; - } - - .row > .off-4-medium { - margin-left: 33.33333%; - } - - .row > .col-5-medium { - width: 41.66667%; - } - - .row > .off-5-medium { - margin-left: 41.66667%; - } - - .row > .col-6-medium { - width: 50%; - } - - .row > .off-6-medium { - margin-left: 50%; - } - - .row > .col-7-medium { - width: 58.33333%; - } - - .row > .off-7-medium { - margin-left: 58.33333%; - } - - .row > .col-8-medium { - width: 66.66667%; - } - - .row > .off-8-medium { - margin-left: 66.66667%; - } - - .row > .col-9-medium { - width: 75%; - } - - .row > .off-9-medium { - margin-left: 75%; - } - - .row > .col-10-medium { - width: 83.33333%; - } - - .row > .off-10-medium { - margin-left: 83.33333%; - } - - .row > .col-11-medium { - width: 91.66667%; - } - - .row > .off-11-medium { - margin-left: 91.66667%; - } - - .row > .col-12-medium { - width: 100%; - } - - .row > .off-12-medium { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0; - margin-left: 0rem; - } - - .row.gtr-0 > * { - padding: 0 0 0 0rem; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0rem; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0rem; - } - - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375rem; - } - - .row.gtr-25 > * { - padding: 0 0 0 0.375rem; - } - - .row.gtr-25.gtr-uniform { - margin-top: -0.375rem; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375rem; - } - - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75rem; - } - - .row.gtr-50 > * { - padding: 0 0 0 0.75rem; - } - - .row.gtr-50.gtr-uniform { - margin-top: -0.75rem; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75rem; - } - - .row { - margin-top: 0; - margin-left: -1.5rem; - } - - .row > * { - padding: 0 0 0 1.5rem; - } - - .row.gtr-uniform { - margin-top: -1.5rem; - } - - .row.gtr-uniform > * { - padding-top: 1.5rem; - } - - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25rem; - } - - .row.gtr-150 > * { - padding: 0 0 0 2.25rem; - } - - .row.gtr-150.gtr-uniform { - margin-top: -2.25rem; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25rem; - } - - .row.gtr-200 { - margin-top: 0; - margin-left: -3rem; - } - - .row.gtr-200 > * { - padding: 0 0 0 3rem; - } - - .row.gtr-200.gtr-uniform { - margin-top: -3rem; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 3rem; - } - - } - - @media screen and (max-width: 736px) { - - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - - .row > * { - box-sizing: border-box; - } - - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - - .row.aln-left { - justify-content: flex-start; - } - - .row.aln-center { - justify-content: center; - } - - .row.aln-right { - justify-content: flex-end; - } - - .row.aln-top { - align-items: flex-start; - } - - .row.aln-middle { - align-items: center; - } - - .row.aln-bottom { - align-items: flex-end; - } - - .row > .imp-small { - order: -1; - } - - .row > .col-1-small { - width: 8.33333%; - } - - .row > .off-1-small { - margin-left: 8.33333%; - } - - .row > .col-2-small { - width: 16.66667%; - } - - .row > .off-2-small { - margin-left: 16.66667%; - } - - .row > .col-3-small { - width: 25%; - } - - .row > .off-3-small { - margin-left: 25%; - } - - .row > .col-4-small { - width: 33.33333%; - } - - .row > .off-4-small { - margin-left: 33.33333%; - } - - .row > .col-5-small { - width: 41.66667%; - } - - .row > .off-5-small { - margin-left: 41.66667%; - } - - .row > .col-6-small { - width: 50%; - } - - .row > .off-6-small { - margin-left: 50%; - } - - .row > .col-7-small { - width: 58.33333%; - } - - .row > .off-7-small { - margin-left: 58.33333%; - } - - .row > .col-8-small { - width: 66.66667%; - } - - .row > .off-8-small { - margin-left: 66.66667%; - } - - .row > .col-9-small { - width: 75%; - } - - .row > .off-9-small { - margin-left: 75%; - } - - .row > .col-10-small { - width: 83.33333%; - } - - .row > .off-10-small { - margin-left: 83.33333%; - } - - .row > .col-11-small { - width: 91.66667%; - } - - .row > .off-11-small { - margin-left: 91.66667%; - } - - .row > .col-12-small { - width: 100%; - } - - .row > .off-12-small { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0; - margin-left: 0rem; - } - - .row.gtr-0 > * { - padding: 0 0 0 0rem; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0rem; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0rem; - } - - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375rem; - } - - .row.gtr-25 > * { - padding: 0 0 0 0.375rem; - } - - .row.gtr-25.gtr-uniform { - margin-top: -0.375rem; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375rem; - } - - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75rem; - } - - .row.gtr-50 > * { - padding: 0 0 0 0.75rem; - } - - .row.gtr-50.gtr-uniform { - margin-top: -0.75rem; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75rem; - } - - .row { - margin-top: 0; - margin-left: -1.5rem; - } - - .row > * { - padding: 0 0 0 1.5rem; - } - - .row.gtr-uniform { - margin-top: -1.5rem; - } - - .row.gtr-uniform > * { - padding-top: 1.5rem; - } - - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25rem; - } - - .row.gtr-150 > * { - padding: 0 0 0 2.25rem; - } - - .row.gtr-150.gtr-uniform { - margin-top: -2.25rem; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25rem; - } - - .row.gtr-200 { - margin-top: 0; - margin-left: -3rem; - } - - .row.gtr-200 > * { - padding: 0 0 0 3rem; - } - - .row.gtr-200.gtr-uniform { - margin-top: -3rem; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 3rem; - } - - } - - @media screen and (max-width: 480px) { - - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - - .row > * { - box-sizing: border-box; - } - - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - - .row.aln-left { - justify-content: flex-start; - } - - .row.aln-center { - justify-content: center; - } - - .row.aln-right { - justify-content: flex-end; - } - - .row.aln-top { - align-items: flex-start; - } - - .row.aln-middle { - align-items: center; - } - - .row.aln-bottom { - align-items: flex-end; - } - - .row > .imp-xsmall { - order: -1; - } - - .row > .col-1-xsmall { - width: 8.33333%; - } - - .row > .off-1-xsmall { - margin-left: 8.33333%; - } - - .row > .col-2-xsmall { - width: 16.66667%; - } - - .row > .off-2-xsmall { - margin-left: 16.66667%; - } - - .row > .col-3-xsmall { - width: 25%; - } - - .row > .off-3-xsmall { - margin-left: 25%; - } - - .row > .col-4-xsmall { - width: 33.33333%; - } - - .row > .off-4-xsmall { - margin-left: 33.33333%; - } - - .row > .col-5-xsmall { - width: 41.66667%; - } - - .row > .off-5-xsmall { - margin-left: 41.66667%; - } - - .row > .col-6-xsmall { - width: 50%; - } - - .row > .off-6-xsmall { - margin-left: 50%; - } - - .row > .col-7-xsmall { - width: 58.33333%; - } - - .row > .off-7-xsmall { - margin-left: 58.33333%; - } - - .row > .col-8-xsmall { - width: 66.66667%; - } - - .row > .off-8-xsmall { - margin-left: 66.66667%; - } - - .row > .col-9-xsmall { - width: 75%; - } - - .row > .off-9-xsmall { - margin-left: 75%; - } - - .row > .col-10-xsmall { - width: 83.33333%; - } - - .row > .off-10-xsmall { - margin-left: 83.33333%; - } - - .row > .col-11-xsmall { - width: 91.66667%; - } - - .row > .off-11-xsmall { - margin-left: 91.66667%; - } - - .row > .col-12-xsmall { - width: 100%; - } - - .row > .off-12-xsmall { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0; - margin-left: 0rem; - } - - .row.gtr-0 > * { - padding: 0 0 0 0rem; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0rem; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0rem; - } - - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375rem; - } - - .row.gtr-25 > * { - padding: 0 0 0 0.375rem; - } - - .row.gtr-25.gtr-uniform { - margin-top: -0.375rem; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375rem; - } - - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75rem; - } - - .row.gtr-50 > * { - padding: 0 0 0 0.75rem; - } - - .row.gtr-50.gtr-uniform { - margin-top: -0.75rem; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75rem; - } - - .row { - margin-top: 0; - margin-left: -1.5rem; - } - - .row > * { - padding: 0 0 0 1.5rem; - } - - .row.gtr-uniform { - margin-top: -1.5rem; - } - - .row.gtr-uniform > * { - padding-top: 1.5rem; - } - - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25rem; - } - - .row.gtr-150 > * { - padding: 0 0 0 2.25rem; - } - - .row.gtr-150.gtr-uniform { - margin-top: -2.25rem; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25rem; - } - - .row.gtr-200 { - margin-top: 0; - margin-left: -3rem; - } - - .row.gtr-200 > * { - padding: 0 0 0 3rem; - } - - .row.gtr-200.gtr-uniform { - margin-top: -3rem; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 3rem; - } - - } - - @media screen and (max-width: 360px) { - - .row { - display: flex; - flex-wrap: wrap; - box-sizing: border-box; - align-items: stretch; - } - - .row > * { - box-sizing: border-box; - } - - .row.gtr-uniform > * > :last-child { - margin-bottom: 0; - } - - .row.aln-left { - justify-content: flex-start; - } - - .row.aln-center { - justify-content: center; - } - - .row.aln-right { - justify-content: flex-end; - } - - .row.aln-top { - align-items: flex-start; - } - - .row.aln-middle { - align-items: center; - } - - .row.aln-bottom { - align-items: flex-end; - } - - .row > .imp-xxsmall { - order: -1; - } - - .row > .col-1-xxsmall { - width: 8.33333%; - } - - .row > .off-1-xxsmall { - margin-left: 8.33333%; - } - - .row > .col-2-xxsmall { - width: 16.66667%; - } - - .row > .off-2-xxsmall { - margin-left: 16.66667%; - } - - .row > .col-3-xxsmall { - width: 25%; - } - - .row > .off-3-xxsmall { - margin-left: 25%; - } - - .row > .col-4-xxsmall { - width: 33.33333%; - } - - .row > .off-4-xxsmall { - margin-left: 33.33333%; - } - - .row > .col-5-xxsmall { - width: 41.66667%; - } - - .row > .off-5-xxsmall { - margin-left: 41.66667%; - } - - .row > .col-6-xxsmall { - width: 50%; - } - - .row > .off-6-xxsmall { - margin-left: 50%; - } - - .row > .col-7-xxsmall { - width: 58.33333%; - } - - .row > .off-7-xxsmall { - margin-left: 58.33333%; - } - - .row > .col-8-xxsmall { - width: 66.66667%; - } - - .row > .off-8-xxsmall { - margin-left: 66.66667%; - } - - .row > .col-9-xxsmall { - width: 75%; - } - - .row > .off-9-xxsmall { - margin-left: 75%; - } - - .row > .col-10-xxsmall { - width: 83.33333%; - } - - .row > .off-10-xxsmall { - margin-left: 83.33333%; - } - - .row > .col-11-xxsmall { - width: 91.66667%; - } - - .row > .off-11-xxsmall { - margin-left: 91.66667%; - } - - .row > .col-12-xxsmall { - width: 100%; - } - - .row > .off-12-xxsmall { - margin-left: 100%; - } - - .row.gtr-0 { - margin-top: 0; - margin-left: 0rem; - } - - .row.gtr-0 > * { - padding: 0 0 0 0rem; - } - - .row.gtr-0.gtr-uniform { - margin-top: 0rem; - } - - .row.gtr-0.gtr-uniform > * { - padding-top: 0rem; - } - - .row.gtr-25 { - margin-top: 0; - margin-left: -0.375rem; - } - - .row.gtr-25 > * { - padding: 0 0 0 0.375rem; - } - - .row.gtr-25.gtr-uniform { - margin-top: -0.375rem; - } - - .row.gtr-25.gtr-uniform > * { - padding-top: 0.375rem; - } - - .row.gtr-50 { - margin-top: 0; - margin-left: -0.75rem; - } - - .row.gtr-50 > * { - padding: 0 0 0 0.75rem; - } - - .row.gtr-50.gtr-uniform { - margin-top: -0.75rem; - } - - .row.gtr-50.gtr-uniform > * { - padding-top: 0.75rem; - } - - .row { - margin-top: 0; - margin-left: -1.5rem; - } - - .row > * { - padding: 0 0 0 1.5rem; - } - - .row.gtr-uniform { - margin-top: -1.5rem; - } - - .row.gtr-uniform > * { - padding-top: 1.5rem; - } - - .row.gtr-150 { - margin-top: 0; - margin-left: -2.25rem; - } - - .row.gtr-150 > * { - padding: 0 0 0 2.25rem; - } - - .row.gtr-150.gtr-uniform { - margin-top: -2.25rem; - } - - .row.gtr-150.gtr-uniform > * { - padding-top: 2.25rem; - } - - .row.gtr-200 { - margin-top: 0; - margin-left: -3rem; - } - - .row.gtr-200 > * { - padding: 0 0 0 3rem; - } - - .row.gtr-200.gtr-uniform { - margin-top: -3rem; - } - - .row.gtr-200.gtr-uniform > * { - padding-top: 3rem; - } - - } - -/* Box */ - - .box { - border: solid 2px; - margin-bottom: 2rem; - padding: 1.5rem; - } - - .box > :last-child, - .box > :last-child > :last-child, - .box > :last-child > :last-child > :last-child { - margin-bottom: 0; - } - - .box.alt { - border: 0; - border-radius: 0; - padding: 0; - } - - .box { - border-color: #eeeeee; - } - -/* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - button, - .button { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - -moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; - border: 0; - border-radius: 0; - cursor: pointer; - display: inline-block; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 0.8rem; - font-weight: 900; - letter-spacing: 0.075em; - height: 3rem; - line-height: 3rem; - padding: 0 2rem; - text-align: center; - text-decoration: none; - text-transform: uppercase; - white-space: nowrap; - } - - input[type="submit"].icon:before, - input[type="reset"].icon:before, - input[type="button"].icon:before, - button.icon:before, - .button.icon:before { - margin-right: 0.5rem; - } - - input[type="submit"].icon.solo, - input[type="reset"].icon.solo, - input[type="button"].icon.solo, - button.icon.solo, - .button.icon.solo { - position: relative; - width: 4rem; - height: 4rem; - line-height: 4rem; - border-radius: 4rem; - text-indent: 4rem; - overflow: hidden; - padding: 0; - white-space: nowrap; - } - - input[type="submit"].icon.solo:before, - input[type="reset"].icon.solo:before, - input[type="button"].icon.solo:before, - button.icon.solo:before, - .button.icon.solo:before { - position: absolute; - display: block; - top: 0; - left: 0; - width: inherit; - height: inherit; - line-height: inherit; - font-size: 1.25rem; - margin-right: 0; - text-align: center; - text-indent: 0; - } - - input[type="submit"].fit, - input[type="reset"].fit, - input[type="button"].fit, - button.fit, - .button.fit { - width: 100%; - } - - input[type="submit"].small, - input[type="reset"].small, - input[type="button"].small, - button.small, - .button.small { - font-size: 0.7rem; - height: 2.5rem; - line-height: 2.5rem; - padding: 0 1.5rem; - } - - input[type="submit"].large, - input[type="reset"].large, - input[type="button"].large, - button.large, - .button.large { - font-size: 0.9rem; - height: 3.5rem; - line-height: 3.5rem; - padding: 0 2.75rem; - } - - @media screen and (max-width: 980px) { - - input[type="submit"], - input[type="reset"], - input[type="button"], - button, - .button { - font-size: 0.9rem; - height: 3.25rem; - line-height: 3.25rem; - } - - input[type="submit"].large, - input[type="reset"].large, - input[type="button"].large, - button.large, - .button.large { - font-size: 1rem; - height: 3.75rem; - line-height: 3.75rem; - } - - } - - input[type="submit"].disabled, input[type="submit"]:disabled, - input[type="reset"].disabled, - input[type="reset"]:disabled, - input[type="button"].disabled, - input[type="button"]:disabled, - button.disabled, - button:disabled, - .button.disabled, - .button:disabled { - pointer-events: none; - opacity: 0.25; - } - - input[type="submit"], - input[type="reset"], - input[type="button"], - button, - .button { - background-color: transparent; - box-shadow: inset 0 0 0 2px #212931; - color: #212931 !important; - } - - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover, - button:hover, - .button:hover { - box-shadow: inset 0 0 0 2px #18bfef; - color: #18bfef !important; - } - - input[type="submit"].primary, - input[type="reset"].primary, - input[type="button"].primary, - button.primary, - .button.primary { - background-color: #212931; - box-shadow: none; - color: #ffffff !important; - } - - input[type="submit"].primary:hover, - input[type="reset"].primary:hover, - input[type="button"].primary:hover, - button.primary:hover, - .button.primary:hover { - background-color: #18bfef; - } - -/* Form */ - - form { - margin: 0 0 2rem 0; - } - - form > :last-child { - margin-bottom: 0; - } - - form > .fields { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - width: calc(100% + 3rem); - margin: -1.5rem 0 2rem -1.5rem; - } - - form > .fields > .field { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - padding: 1.5rem 0 0 1.5rem; - width: calc(100% - 1.5rem); - } - - form > .fields > .field.half { - width: calc(50% - 0.75rem); - } - - form > .fields > .field.third { - width: calc(100%/3 - 0.5rem); - } - - form > .fields > .field.quarter { - width: calc(25% - 0.375rem); - } - - @media screen and (max-width: 480px) { - - form > .fields { - width: calc(100% + 3rem); - margin: -1.5rem 0 2rem -1.5rem; - } - - form > .fields > .field { - padding: 1.5rem 0 0 1.5rem; - width: calc(100% - 1.5rem); - } - - form > .fields > .field.half { - width: calc(100% - 1.5rem); - } - - form > .fields > .field.third { - width: calc(100% - 1.5rem); - } - - form > .fields > .field.quarter { - width: calc(100% - 1.5rem); - } - - } - - label { - display: block; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-weight: 900; - line-height: 1.5; - letter-spacing: 0.075em; - font-size: 0.8rem; - text-transform: uppercase; - margin: 0 0 0.75rem 0; - } - - @media screen and (max-width: 980px) { - - label { - font-size: 0.9rem; - } - - } - - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - background: transparent; - border-radius: 0; - border: solid 2px; - color: inherit; - display: block; - outline: 0; - padding: 0 1rem; - text-decoration: none; - width: 100%; - } - - input[type="text"]:invalid, - input[type="password"]:invalid, - input[type="email"]:invalid, - select:invalid, - textarea:invalid { - box-shadow: none; - } - - select { - background-size: 1.25rem; - background-repeat: no-repeat; - background-position: calc(100% - 1rem) center; - height: 3rem; - padding-right: 3rem; - text-overflow: ellipsis; - } - - select:focus::-ms-value { - background-color: transparent; - } - - select::-ms-expand { - display: none; - } - - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: 3rem; - } - - textarea { - padding: 0.75rem 1rem; - } - - input[type="checkbox"], - input[type="radio"] { - -moz-appearance: none; - -webkit-appearance: none; - -ms-appearance: none; - appearance: none; - display: block; - float: left; - margin-right: -2rem; - opacity: 0; - width: 1rem; - z-index: -1; - } - - input[type="checkbox"] + label, - input[type="radio"] + label { - text-decoration: none; - cursor: pointer; - display: inline-block; - font-size: 1rem; - letter-spacing: 0; - font-family: "Merriweather", Georgia, serif; - text-transform: none; - font-weight: 300; - padding-left: 2.8rem; - padding-right: 1rem; - position: relative; - } - - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - } - - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - border-radius: 0; - border: solid 2px; - content: ''; - display: inline-block; - font-size: 0.8rem; - height: 1.8rem; - left: 0; - line-height: 1.65rem; - position: absolute; - text-align: center; - top: -0.125rem; - width: 1.8rem; - } - - input[type="checkbox"]:checked + label:before, - input[type="radio"]:checked + label:before { - content: '\f00c'; - } - - input[type="checkbox"] + label:before { - border-radius: 0; - } - - input[type="radio"] + label:before { - border-radius: 100%; - } - - ::-webkit-input-placeholder { - opacity: 1.0; - } - - :-moz-placeholder { - opacity: 1.0; - } - - ::-moz-placeholder { - opacity: 1.0; - } - - :-ms-input-placeholder { - opacity: 1.0; - } - - label { - color: #212931; - } - - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea { - border-color: #eeeeee; - } - - input[type="text"]:focus, - input[type="password"]:focus, - input[type="email"]:focus, - select:focus, - textarea:focus { - border-color: #18bfef; - } - - select { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23eeeeee' /%3E%3C/svg%3E"); - } - - select option { - background-color: #ffffff; - color: #212931; - } - - .select-wrapper:before { - color: #eeeeee; - } - - input[type="checkbox"] + label, - input[type="radio"] + label { - color: #212931; - } - - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - border-color: #eeeeee; - } - - input[type="checkbox"]:checked + label:before, - input[type="radio"]:checked + label:before { - background-color: #212931; - border-color: #212931; - color: #ffffff; - } - - input[type="checkbox"]:focus + label:before, - input[type="radio"]:focus + label:before { - border-color: #18bfef; - } - - ::-webkit-input-placeholder { - color: #909498 !important; - } - - :-moz-placeholder { - color: #909498 !important; - } - - ::-moz-placeholder { - color: #909498 !important; - } - - :-ms-input-placeholder { - color: #909498 !important; - } - - .formerize-placeholder { - color: #909498 !important; - } - -/* Icon */ - - .icon { - text-decoration: none; - border-bottom: none; - position: relative; - } - - .icon:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 400; - } - - .icon > .label { - display: none; - } - - .icon:before { - line-height: inherit; - } - - .icon.solid:before { - font-weight: 900; - } - - .icon.brands:before { - font-family: 'Font Awesome 5 Brands'; - } - -/* Image */ - - .image { - border: 0; - display: inline-block; - position: relative; - } - - .image img { - display: block; - } - - .image.left, .image.right { - max-width: 40%; - } - - .image.left img, .image.right img { - width: 100%; - } - - .image.left { - float: left; - margin: 0 2rem 2rem 0; - top: 0.75rem; - } - - .image.right { - float: right; - margin: 0 0 2rem 2rem; - top: 0.75rem; - } - - .image.fit { - display: block; - margin: 2.5rem 0; - width: 100%; - } - - .image.fit:first-child { - margin-top: 0; - } - - .image.fit img { - width: 100%; - } - - .image.main { - display: block; - margin: 4rem 0; - width: 100%; - } - - .image.main:first-child { - margin-top: 0; - } - - .image.main img { - width: 100%; - } - - @media screen and (max-width: 736px) { - - .image.fit { - margin: 2rem 0; - } - - .image.main { - margin: 2rem 0; - } - - } - - a.image { - overflow: hidden; - } - - a.image img { - -moz-transition: -moz-transform 0.2s ease-out; - -webkit-transition: -webkit-transform 0.2s ease-out; - -ms-transition: -ms-transform 0.2s ease-out; - transition: transform 0.2s ease-out; - } - - a.image:hover img { - -moz-transform: scale(1.05); - -webkit-transform: scale(1.05); - -ms-transform: scale(1.05); - transform: scale(1.05); - } - -/* Actions */ - - ul.actions { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - cursor: default; - list-style: none; - margin-left: -1rem; - padding-left: 0; - } - - ul.actions li { - padding: 0 0 0 1rem; - vertical-align: middle; - } - - ul.actions.special { - -moz-justify-content: center; - -webkit-justify-content: center; - -ms-justify-content: center; - justify-content: center; - width: 100%; - margin-left: 0; - } - - ul.actions.special li:first-child { - padding-left: 0; - } - - ul.actions.stacked { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: 0; - } - - ul.actions.stacked li { - padding: 1.3rem 0 0 0; - } - - ul.actions.stacked li:first-child { - padding-top: 0; - } - - ul.actions.fit { - width: calc(100% + 1rem); - } - - ul.actions.fit li { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - width: 100%; - } - - ul.actions.fit li > * { - width: 100%; - } - - ul.actions.fit.stacked { - width: 100%; - } - - @media screen and (max-width: 480px) { - - ul.actions:not(.fixed) { - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: 0; - width: 100% !important; - } - - ul.actions:not(.fixed) li { - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - padding: 1rem 0 0 0; - text-align: center; - width: 100%; - } - - ul.actions:not(.fixed) li > * { - width: 100%; - } - - ul.actions:not(.fixed) li:first-child { - padding-top: 0; - } - - ul.actions:not(.fixed) li input[type="submit"], - ul.actions:not(.fixed) li input[type="reset"], - ul.actions:not(.fixed) li input[type="button"], - ul.actions:not(.fixed) li button, - ul.actions:not(.fixed) li .button { - width: 100%; - } - - ul.actions:not(.fixed) li input[type="submit"].icon:before, - ul.actions:not(.fixed) li input[type="reset"].icon:before, - ul.actions:not(.fixed) li input[type="button"].icon:before, - ul.actions:not(.fixed) li button.icon:before, - ul.actions:not(.fixed) li .button.icon:before { - margin-left: -0.5rem; - } - - } - -/* Icons */ - - ul.icons { - cursor: default; - list-style: none; - padding-left: 0; - } - - ul.icons li { - display: inline-block; - padding: 0 0.5rem 0 0; - vertical-align: middle; - } - - ul.icons li:last-child { - padding-right: 0; - } - - ul.icons li .icon:before { - width: 2.25rem; - height: 2.25rem; - line-height: 2.25rem; - display: inline-block; - text-align: center; - border-radius: 100%; - font-size: 1.25rem; - } - - ul.icons.alt li .icon:before { - -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - font-size: 1rem; - } - -/* List */ - - ol { - list-style: decimal; - margin: 0 0 2rem 0; - padding-left: 1.25rem; - } - - ol li { - padding-left: 0.25rem; - } - - ul { - list-style: disc; - margin: 0 0 2rem 0; - padding-left: 1rem; - } - - ul li { - padding-left: 0.5rem; - } - - ul.divided { - list-style: none; - padding-left: 0; - } - - ul.divided li { - border-top: solid 1px; - padding: 0.5rem 0; - } - - ul.divided li:first-child { - border-top: 0; - padding-top: 0; - } - - dl { - margin: 0 0 2rem 0; - } - - dl dt { - display: block; - font-weight: 600; - margin: 0 0 1rem 0; - } - - dl dd { - margin-left: 2rem; - } - - ul.divided li { - border-top-color: #eeeeee; - } - - ul.icons li a.icon:hover:before { - color: #18bfef; - } - - ul.icons.alt li .icon:before { - box-shadow: inset 0 0 0 2px #eeeeee; - } - - ul.icons.alt li a.icon:hover:before { - box-shadow: inset 0 0 0 2px #18bfef; - } - -/* Section/Article */ - - section.special, article.special { - text-align: center; - } - - header { - cursor: default; - } - - header > .date { - display: block; - font-size: 0.8rem; - height: 1; - margin: 0 0 1rem 0; - position: relative; - } - - header > p { - font-style: italic; - } - - header > h1 + p { - font-size: 1.1rem; - margin-top: -0.5rem; - line-height: 2; - } - - header > h2 + p { - font-size: 1rem; - margin-top: -0.75rem; - } - - header > h3 + p { - font-size: 0.9rem; - margin-top: -0.75rem; - } - - header > h4 + p { - font-size: 0.8rem; - margin-top: -0.75rem; - } - - header.major { - margin: 0 0 4rem 0; - text-align: center; - } - - header.major > :last-child { - margin-bottom: 0; - } - - header.major > p { - margin-top: 0; - text-align: center; - } - - header.major > .date { - font-size: 1rem; - margin: 0 0 4rem 0; - } - - header.major > .date:before, header.major > .date:after { - content: ''; - display: block; - position: absolute; - top: 50%; - width: calc(50% - 6rem); - border-top: solid 2px; - } - - header.major > .date:before { - left: 0; - } - - header.major > .date:after { - right: 0; - } - - @media screen and (max-width: 980px) { - - header br { - display: none; - } - - } - - @media screen and (max-width: 736px) { - - header.major { - margin: 0 0 2rem 0; - } - - } - - header.major .date:before, header.major .date:after { - border-top-color: #eeeeee; - } - -/* Table */ - - .table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; - } - - table { - margin: 0 0 2rem 0; - width: 100%; - } - - table tbody tr { - border: solid 1px; - border-left: 0; - border-right: 0; - } - - table td { - padding: 0.75rem 0.75rem; - } - - table th { - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 0.8rem; - font-weight: 900; - letter-spacing: 0.075em; - line-height: 1.5; - padding: 0 0.75rem 0.75rem 0.75rem; - text-align: left; - text-transform: uppercase; - } - - @media screen and (max-width: 980px) { - - table th { - font-size: 0.9rem; - } - - } - - table thead { - border-bottom: solid 2px; - } - - table tfoot { - border-top: solid 2px; - } - - table.alt { - border-collapse: separate; - } - - table.alt tbody tr td { - border: solid 1px; - border-left-width: 0; - border-top-width: 0; - } - - table.alt tbody tr td:first-child { - border-left-width: 1px; - } - - table.alt tbody tr:first-child td { - border-top-width: 1px; - } - - table.alt thead { - border-bottom: 0; - } - - table.alt tfoot { - border-top: 0; - } - - table tbody tr { - border-color: #eeeeee; - } - - table tbody tr:nth-child(2n + 1) { - background-color: rgba(220, 220, 220, 0.25); - } - - table th { - color: #212931; - } - - table thead { - border-bottom-color: #eeeeee; - } - - table tfoot { - border-top-color: #eeeeee; - } - - table.alt tbody tr td { - border-color: #eeeeee; - } - -/* Pagination */ - - .pagination { - display: -moz-inline-flex; - display: -webkit-inline-flex; - display: -ms-inline-flex; - display: inline-flex; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default; - list-style: none; - margin: 0 0 2rem 2px; - padding: 0; - } - - .pagination a, .pagination span { - -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out; - border: solid 2px; - display: inline-block; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 0.8rem; - font-weight: 900; - height: 3rem; - letter-spacing: 0.075em; - line-height: calc(3rem - 4px); - margin-left: -2px; - min-width: 3rem; - position: relative; - text-align: center; - text-decoration: none; - text-transform: uppercase; - } - - .pagination .next, .pagination .previous { - text-decoration: none; - padding: 0 1.75rem; - } - - .pagination .next:before, .pagination .previous:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - } - - .pagination .next:before, .pagination .previous:before { - display: inline-block; - color: inherit !important; - line-height: inherit; - } - - .pagination .previous:before { - content: '\f104'; - margin-right: 0.9375em; - } - - .pagination .next:before { - content: '\f105'; - float: right; - margin-left: 0.9375em; - } - - @media screen and (max-width: 980px) { - - .pagination a, .pagination span { - font-size: 0.9rem; - } - - } - - @media screen and (max-width: 480px) { - - .pagination .page, .pagination .extra { - display: none; - } - - } - - .pagination a, .pagination span { - border-color: #eeeeee; - } - - .pagination a { - color: #212931 !important; - } - - .pagination a:hover { - color: #18bfef !important; - border-color: #18bfef; - z-index: 1; - } - - .pagination a:hover + a, - .pagination a:hover + span { - border-left-color: #18bfef; - } - - .pagination a.active { - background-color: #eeeeee; - } - - .pagination span { - color: #eeeeee; - } - -/* Wrapper */ - - #wrapper { - -moz-transition: opacity 0.5s ease; - -webkit-transition: opacity 0.5s ease; - -ms-transition: opacity 0.5s ease; - transition: opacity 0.5s ease; - position: relative; - z-index: 1; - overflow: hidden; - } - - #wrapper > .bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #212931; - background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg"); - background-size: auto, auto, 100% auto; - background-position: center, center, top center; - background-repeat: repeat, no-repeat, no-repeat; - background-attachment: scroll, scroll, scroll; - z-index: -1; - } - - #wrapper > .bg.fixed { - position: fixed; - width: 100vw; - height: 100vh; - } - - #wrapper.fade-in:before { - pointer-events: none; - -moz-transition: opacity 1s ease-in-out; - -webkit-transition: opacity 1s ease-in-out; - -ms-transition: opacity 1s ease-in-out; - transition: opacity 1s ease-in-out; - -moz-transition-delay: 0.75s; - -webkit-transition-delay: 0.75s; - -ms-transition-delay: 0.75s; - transition-delay: 0.75s; - background: #1e252d; - content: ''; - display: block; - height: 100%; - left: 0; - opacity: 0; - position: fixed; - top: 0; - width: 100%; - } - - body.is-preload #wrapper.fade-in:before { - opacity: 1; - } - - @media screen and (orientation: portrait) { - - #wrapper > .bg { - background-size: auto, auto, auto 175%; - } - - } - -/* Intro */ - - #intro { - color: #ffffff; - padding: 8rem 4rem 6rem 4rem ; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-justify-content: -moz-flex-end; - -webkit-justify-content: -webkit-flex-end; - -ms-justify-content: -ms-flex-end; - justify-content: flex-end; - -moz-transition: opacity 1s ease, -moz-transform 1s ease; - -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; - -ms-transition: opacity 1s ease, -ms-transform 1s ease; - transition: opacity 1s ease, transform 1s ease; - position: relative; - cursor: default; - text-align: center; - z-index: 1; - min-height: 100vh; - } - - #intro input, #intro select, #intro textarea { - color: #ffffff; - } - - #intro a { - color: #ffffff; - border-bottom-color: rgba(255, 255, 255, 0.5); - } - - #intro a:hover { - border-bottom-color: transparent; - color: #18bfef !important; - } - - #intro strong, #intro b { - color: #ffffff; - } - - #intro h1, #intro h2, #intro h3, #intro h4, #intro h5, #intro h6 { - color: #ffffff; - } - - #intro blockquote { - border-left-color: #ffffff; - } - - #intro code { - background: rgba(255, 255, 255, 0.075); - border-color: #ffffff; - } - - #intro hr { - border-bottom-color: #ffffff; - } - - #intro input[type="submit"], - #intro input[type="reset"], - #intro input[type="button"], - #intro button, - #intro .button { - background-color: transparent; - box-shadow: inset 0 0 0 2px #ffffff; - color: #ffffff !important; - } - - #intro input[type="submit"]:hover, - #intro input[type="reset"]:hover, - #intro input[type="button"]:hover, - #intro button:hover, - #intro .button:hover { - box-shadow: inset 0 0 0 2px #18bfef; - color: #18bfef !important; - } - - #intro input[type="submit"].primary, - #intro input[type="reset"].primary, - #intro input[type="button"].primary, - #intro button.primary, - #intro .button.primary { - background-color: #ffffff; - box-shadow: none; - color: #1e252d !important; - } - - #intro input[type="submit"].primary:hover, - #intro input[type="reset"].primary:hover, - #intro input[type="button"].primary:hover, - #intro button.primary:hover, - #intro .button.primary:hover { - background-color: #18bfef; - } - - #intro h1 { - font-size: 5rem; - line-height: 1; - } - - #intro p { - font-size: 1.25rem; - font-style: italic; - margin-top: -0.25rem; - text-align: center; - } - - #intro + #header { - margin-top: -20rem; - } - - #intro + #header .logo { - -moz-transform: translateY(2rem); - -webkit-transform: translateY(2rem); - -ms-transform: translateY(2rem); - transform: translateY(2rem); - opacity: 0; - visibility: hidden; - } - - #intro.hidden { - pointer-events: none; - -moz-transform: translateY(2rem); - -webkit-transform: translateY(2rem); - -ms-transform: translateY(2rem); - transform: translateY(2rem); - -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease, visibility 0.5s; - -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease, visibility 0.5s; - -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease, visibility 0.5s; - transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; - opacity: 0; - visibility: hidden; - } - - #intro.hidden + #header .logo { - -moz-transform: translateY(0); - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - transform: translateY(0); - opacity: 1; - visibility: visible; - } - - body.is-preload #intro { - -moz-transform: translateY(2rem); - -webkit-transform: translateY(2rem); - -ms-transform: translateY(2rem); - transform: translateY(2rem); - opacity: 0; - } - - body.is-preload #intro:not(.hidden) + #header + #nav { - -moz-transform: translateY(4rem); - -webkit-transform: translateY(4rem); - -ms-transform: translateY(4rem); - transform: translateY(4rem); - opacity: 0; - } - - @media screen and (max-width: 980px) { - - #intro { - padding: 4rem 4rem 2rem 4rem ; - min-height: 90vh; - } - - #intro p br { - display: none; - } - - #intro + #header { - margin-top: -14rem; - } - - } - - @media screen and (max-width: 736px) { - - #intro { - padding: 3rem 2rem 1rem 2rem ; - min-height: 80vh; - } - - #intro h1 { - font-size: 3.25rem; - line-height: 1.1; - margin-bottom: 1rem; - } - - #intro p { - font-size: 1rem; - margin-top: 0rem; - } - - #intro .actions { - display: none; - } - - } - -/* Header */ - - #header { - color: #ffffff; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -moz-justify-content: -moz-flex-end; - -webkit-justify-content: -webkit-flex-end; - -ms-justify-content: -ms-flex-end; - justify-content: flex-end; - pointer-events: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - height: 20rem; - padding-bottom: 8rem; - position: relative; - text-align: center; - z-index: 2; - } - - #header input, #header select, #header textarea { - color: #ffffff; - } - - #header a { - color: #ffffff; - border-bottom-color: rgba(255, 255, 255, 0.5); - } - - #header a:hover { - border-bottom-color: transparent; - color: #18bfef !important; - } - - #header strong, #header b { - color: #ffffff; - } - - #header h1, #header h2, #header h3, #header h4, #header h5, #header h6 { - color: #ffffff; - } - - #header blockquote { - border-left-color: #ffffff; - } - - #header code { - background: rgba(255, 255, 255, 0.075); - border-color: #ffffff; - } - - #header hr { - border-bottom-color: #ffffff; - } - - #header .logo { - -moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -moz-transform 0.5s ease, visibility 0.5s; - -webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -webkit-transform 0.5s ease, visibility 0.5s; - -ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -ms-transform 0.5s ease, visibility 0.5s; - transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; - pointer-events: auto; - border-style: solid; - border-color: #ffffff; - border-width: 5px !important; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 2.25rem; - font-weight: 900; - letter-spacing: 0.075em; - line-height: 1; - padding: 1rem 1.75rem; - text-transform: uppercase; - visibility: visible; - } - - #header .logo:hover { - border-color: #18bfef !important; - color: #18bfef !important; - } - - @media screen and (max-width: 980px) { - - #header { - height: 14rem; - padding-bottom: 4rem; - } - - } - - @media screen and (max-width: 736px) { - - #header { - padding-bottom: 3rem; - } - - #header .logo { - font-size: 1.75rem; - border-width: 3px !important; - } - - } - -/* Nav */ - - #nav { - color: #ffffff; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-transition: -moz-transform 1s ease, opacity 1s ease; - -webkit-transition: -webkit-transform 1s ease, opacity 1s ease; - -ms-transition: -ms-transform 1s ease, opacity 1s ease; - transition: transform 1s ease, opacity 1s ease; - background: rgba(255, 255, 255, 0.175); - height: 4rem; - line-height: 4rem; - margin: -4rem auto 0 auto; - overflow: hidden; - padding: 0 2rem 0 0; - position: relative; - width: calc(100% - 4rem); - max-width: 72rem; - z-index: 2; - } - - #nav ul.divided li { - border-top-color: #ffffff; - } - - #nav ul.icons li a.icon:hover:before { - color: #18bfef; - } - - #nav ul.icons.alt li .icon:before { - box-shadow: inset 0 0 0 2px #ffffff; - } - - #nav ul.icons.alt li a.icon:hover:before { - box-shadow: inset 0 0 0 2px #18bfef; - } - - #nav input, #nav select, #nav textarea { - color: #ffffff; - } - - #nav a { - color: #ffffff; - border-bottom-color: rgba(255, 255, 255, 0.5); - } - - #nav a:hover { - border-bottom-color: transparent; - color: #18bfef !important; - } - - #nav strong, #nav b { - color: #ffffff; - } - - #nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 { - color: #ffffff; - } - - #nav blockquote { - border-left-color: #ffffff; - } - - #nav code { - background: rgba(255, 255, 255, 0.075); - border-color: #ffffff; - } - - #nav hr { - border-bottom-color: #ffffff; - } - - #nav ul.links { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-weight: 900; - letter-spacing: 0.075em; - list-style: none; - margin-bottom: 0; - padding-left: 0; - text-transform: uppercase; - } - - #nav ul.links li { - display: block; - padding-left: 0; - } - - #nav ul.links li a { - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - display: block; - font-size: 0.8rem; - outline: none; - padding: 0 2rem; - } - - #nav ul.links li a:hover { - color: inherit !important; - background-color: rgba(255, 255, 255, 0.1); - } - - #nav ul.links li.active { - background-color: #ffffff; - } - - #nav ul.links li.active a { - color: #1e252d; - } - - #nav ul.links li.active a:hover { - color: #18bfef !important; - } - - #nav ul.icons { - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - margin-bottom: 0; - } - - @media screen and (max-width: 980px) { - - #nav { - display: none; - } - - } - -/* Main */ - - #main { - background-color: #ffffff; - position: relative; - margin: 0 auto; - width: calc(100% - 4rem); - max-width: 72rem; - z-index: 2; - } - - #main > * { - padding: 4rem 4rem 2rem 4rem ; - border-top: solid 2px #eeeeee; - margin: 0; - } - - #main > *:first-child { - border-top: 0; - } - - #main > footer { - text-align: center; - } - - #main > .post { - padding: 8rem 8rem 6rem 8rem ; - } - - #main > .post header.major > .date { - margin-top: -2rem; - } - - #main > .post header.major > h1, #main > .post header.major h2 { - font-size: 4rem; - line-height: 1.1; - margin: 0 0 2rem 0; - } - - #main > .post.featured { - text-align: center; - } - - @media screen and (max-width: 1280px) { - - #main > .post { - padding: 6rem 4rem 4rem 4rem ; - } - - } - - @media screen and (max-width: 736px) { - - #main > .post { - padding: 4rem 2rem 2rem 2rem ; - } - - #main > .post header.major > .date { - margin-top: -1rem; - margin-bottom: 2rem; - } - - #main > .post header.major > h1, #main > .post header.major h2 { - font-size: 2.5rem; - line-height: 1.2; - margin: 0 0 1.5rem 0; - } - - } - - #main > .posts { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -moz-align-items: -moz-stretch; - -webkit-align-items: -webkit-stretch; - -ms-align-items: -ms-stretch; - align-items: stretch; - text-align: center; - width: 100%; - padding: 0; - } - - #main > .posts > * { - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - } - - #main > .posts > * { - width: 50%; - } - - #main > .posts > * { - padding: 4rem; - width: 50%; - } - - #main > .posts > article { - border-color: #eeeeee; - border-left-width: 2px; - border-style: solid; - border-top-width: 2px; - text-align: center; - } - - #main > .posts > article > :last-child { - margin-bottom: 0; - } - - #main > .posts > article:nth-child(2n - 1) { - border-left-width: 0; - } - - #main > .posts > article:nth-child(-n + 2) { - border-top-width: 0; - } - - @media screen and (max-width: 980px) { - - #main > .posts > * { - width: 50%; - } - - #main > .posts > * { - padding: 2.5rem; - width: 50%; - } - - } - - @media screen and (max-width: 736px) { - - #main > .posts > * { - width: 100%; - } - - #main > .posts > * { - padding: 2rem; - width: 100%; - } - - #main > .posts > article:nth-child(2n - 1) { - border-left-width: 2px; - } - - #main > .posts > article:nth-child(-n + 2) { - border-top-width: 2px; - } - - #main > .posts > article:nth-child(n) { - border-left-width: 0; - } - - #main > .posts > article:nth-child(-n + 1) { - border-top-width: 0; - } - - #main > .posts > article .image { - max-width: 25rem; - margin-left: auto; - margin-right: auto; - } - - } - - @media screen and (max-width: 736px) { - - #main > * { - padding: 2rem 2rem 0.1rem 2rem ; - } - - } - - @media screen and (max-width: 480px) { - - #main { - width: 100%; - } - - } - -/* Footer */ - - #footer { - color: #717981; - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - background-color: #f5f5f5; - color: #909498; - cursor: default; - position: relative; - margin: 0 auto; - width: calc(100% - 4rem); - max-width: 72rem; - z-index: 2; - } - - #footer input, #footer select, #footer textarea { - color: #717981; - } - - #footer a { - color: #717981; - border-bottom-color: rgba(113, 121, 129, 0.5); - } - - #footer a:hover { - border-bottom-color: transparent; - color: #18bfef !important; - } - - #footer strong, #footer b { - color: #717981; - } - - #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { - color: #717981; - } - - #footer blockquote { - border-left-color: #e2e2e2; - } - - #footer code { - background: rgba(220, 220, 220, 0.5); - border-color: #e2e2e2; - } - - #footer hr { - border-bottom-color: #e2e2e2; - } - - #footer .box { - border-color: #e2e2e2; - } - - #footer input[type="submit"], - #footer input[type="reset"], - #footer input[type="button"], - #footer button, - #footer .button { - background-color: transparent; - box-shadow: inset 0 0 0 2px #717981; - color: #717981 !important; - } - - #footer input[type="submit"]:hover, - #footer input[type="reset"]:hover, - #footer input[type="button"]:hover, - #footer button:hover, - #footer .button:hover { - box-shadow: inset 0 0 0 2px #18bfef; - color: #18bfef !important; - } - - #footer input[type="submit"].primary, - #footer input[type="reset"].primary, - #footer input[type="button"].primary, - #footer button.primary, - #footer .button.primary { - background-color: #717981; - box-shadow: none; - color: #f5f5f5 !important; - } - - #footer input[type="submit"].primary:hover, - #footer input[type="reset"].primary:hover, - #footer input[type="button"].primary:hover, - #footer button.primary:hover, - #footer .button.primary:hover { - background-color: #18bfef; - } - - #footer label { - color: #717981; - } - - #footer input[type="text"], - #footer input[type="password"], - #footer input[type="email"], - #footer select, - #footer textarea { - border-color: #e2e2e2; - } - - #footer input[type="text"]:focus, - #footer input[type="password"]:focus, - #footer input[type="email"]:focus, - #footer select:focus, - #footer textarea:focus { - border-color: #18bfef; - } - - #footer select { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e2e2e2' /%3E%3C/svg%3E"); - } - - #footer select option { - background-color: #f5f5f5; - color: #717981; - } - - #footer .select-wrapper:before { - color: #e2e2e2; - } - - #footer input[type="checkbox"] + label, - #footer input[type="radio"] + label { - color: #717981; - } - - #footer input[type="checkbox"] + label:before, - #footer input[type="radio"] + label:before { - border-color: #e2e2e2; - } - - #footer input[type="checkbox"]:checked + label:before, - #footer input[type="radio"]:checked + label:before { - background-color: #717981; - border-color: #717981; - color: #f5f5f5; - } - - #footer input[type="checkbox"]:focus + label:before, - #footer input[type="radio"]:focus + label:before { - border-color: #18bfef; - } - - #footer ::-webkit-input-placeholder { - color: #b3b7bb !important; - } - - #footer :-moz-placeholder { - color: #b3b7bb !important; - } - - #footer ::-moz-placeholder { - color: #b3b7bb !important; - } - - #footer :-ms-input-placeholder { - color: #b3b7bb !important; - } - - #footer .formerize-placeholder { - color: #b3b7bb !important; - } - - #footer ul.divided li { - border-top-color: #e2e2e2; - } - - #footer ul.icons li a.icon:hover:before { - color: #18bfef; - } - - #footer ul.icons.alt li .icon:before { - box-shadow: inset 0 0 0 2px #e2e2e2; - } - - #footer ul.icons.alt li a.icon:hover:before { - box-shadow: inset 0 0 0 2px #18bfef; - } - - #footer header.major .date:before, #footer header.major .date:after { - border-top-color: #e2e2e2; - } - - #footer table tbody tr { - border-color: #e2e2e2; - } - - #footer table tbody tr:nth-child(2n + 1) { - background-color: rgba(220, 220, 220, 0.5); - } - - #footer table th { - color: #717981; - } - - #footer table thead { - border-bottom-color: #e2e2e2; - } - - #footer table tfoot { - border-top-color: #e2e2e2; - } - - #footer table.alt tbody tr td { - border-color: #e2e2e2; - } - - #footer .pagination a, #footer .pagination span { - border-color: #e2e2e2; - } - - #footer .pagination a { - color: #717981 !important; - } - - #footer .pagination a:hover { - color: #18bfef !important; - border-color: #18bfef; - z-index: 1; - } - - #footer .pagination a:hover + a, - #footer .pagination a:hover + span { - border-left-color: #18bfef; - } - - #footer .pagination a.active { - background-color: #e2e2e2; - } - - #footer .pagination span { - color: #e2e2e2; - } - - #footer > section { - -moz-flex-basis: 50%; - -webkit-flex-basis: 50%; - -ms-flex-basis: 50%; - flex-basis: 50%; - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - padding: 4rem 4rem 2rem 4rem ; - border-left: solid 2px #e2e2e2; - } - - #footer > section:first-child { - border-left: 0; - } - - #footer > section.split { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - padding: 0; - } - - #footer > section.split > section { - padding: 3rem 4rem 1rem 4rem ; - border-top: solid 2px #e2e2e2; - } - - #footer > section.split > section:first-child { - padding: 5rem 4rem 1rem 4rem ; - border-top: 0; - } - - #footer > section.split > section:last-child { - padding: 3rem 4rem 3rem 4rem ; - } - - #footer > section.split.contact > section { - display: -moz-flex; - display: -webkit-flex; - display: -ms-flex; - display: flex; - -moz-align-items: center; - -webkit-align-items: center; - -ms-align-items: center; - align-items: center; - padding: 3.15rem 4rem; - } - - #footer > section.split.contact > section > * { - margin-bottom: 0; - } - - #footer > section.split.contact > section > :first-child { - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - -moz-flex-grow: 0; - -webkit-flex-grow: 0; - -ms-flex-grow: 0; - flex-grow: 0; - width: 6rem; - } - - #footer > section.split.contact > section > :last-child { - -moz-flex-shrink: 1; - -webkit-flex-shrink: 1; - -ms-flex-shrink: 1; - flex-shrink: 1; - -moz-flex-grow: 1; - -webkit-flex-grow: 1; - -ms-flex-grow: 1; - flex-grow: 1; - } - - #footer > section.split.contact > section:first-child { - padding: 4rem 4rem 3rem 4rem; - } - - #footer > section.split.contact > section:last-child { - padding: 3rem 4rem 4rem 4rem; - } - - #footer > section.split.contact > section.alt { - -moz-align-items: -moz-flex-start; - -webkit-align-items: -webkit-flex-start; - -ms-align-items: -ms-flex-start; - align-items: flex-start; - } - - #footer > section.split.contact > section.alt > :last-child { - margin-top: -0.325rem; - } - - #footer form label, - #footer h3, - #footer p { - font-size: 0.8rem; - } - - @media screen and (max-width: 980px) { - - #footer { - display: block; - } - - #footer > section { - border-top: solid 2px #e2e2e2; - } - - #footer > section:first-child { - border-top: 0; - } - - #footer > section.split > section { - padding: 4rem 4rem 2rem 4rem ; - } - - #footer > section.split > section:first-child { - padding: 4rem 4rem 2rem 4rem ; - } - - #footer > section.split > section:last-child { - padding: 4rem 4rem 2rem 4rem ; - } - - #footer > section.split.contact > section { - padding: 4rem; - } - - #footer > section.split.contact > section:first-child { - padding: 4rem; - } - - #footer > section.split.contact > section:last-child { - padding: 4rem; - } - - #footer form label, - #footer h3, - #footer p { - font-size: 0.9rem; - } - - } - - @media screen and (max-width: 736px) { - - #footer > section { - padding: 2rem 2rem 0.1rem 2rem ; - } - - #footer > section.split > section { - padding: 2rem 2rem 0.1rem 2rem ; - } - - #footer > section.split > section:first-child { - padding: 2rem 2rem 0.1rem 2rem ; - } - - #footer > section.split > section:last-child { - padding: 2rem 2rem 0.1rem 2rem ; - } - - #footer > section.split.contact > section { - padding: 2rem; - } - - #footer > section.split.contact > section:first-child { - padding: 2rem; - } - - #footer > section.split.contact > section:last-child { - padding: 2rem; - } - - } - - @media screen and (max-width: 480px) { - - #footer { - width: 100%; - } - - } - - #copyright { - color: #ffffff; - position: relative; - color: rgba(255, 255, 255, 0.25); - cursor: default; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 0.8rem; - font-weight: 900; - letter-spacing: 0.075em; - line-height: 1.5; - text-align: center; - text-transform: uppercase; - margin: 4rem auto 8rem auto; - width: calc(100% - 4rem); - max-width: 72rem; - z-index: 2; - } - - #copyright input, #copyright select, #copyright textarea { - color: #ffffff; - } - - #copyright a { - color: #ffffff; - border-bottom-color: rgba(255, 255, 255, 0.5); - } - - #copyright a:hover { - border-bottom-color: transparent; - color: #18bfef !important; - } - - #copyright strong, #copyright b { - color: #ffffff; - } - - #copyright h1, #copyright h2, #copyright h3, #copyright h4, #copyright h5, #copyright h6 { - color: #ffffff; - } - - #copyright blockquote { - border-left-color: #ffffff; - } - - #copyright code { - background: rgba(255, 255, 255, 0.075); - border-color: #ffffff; - } - - #copyright hr { - border-bottom-color: #ffffff; - } - - #copyright a { - color: inherit; - border-bottom-color: inherit; - } - - #copyright ul { - list-style: none; - margin: 0; - padding-left: 0; - } - - #copyright ul li { - border-left: solid 2px; - display: inline-block; - line-height: 1; - margin-left: 1rem; - padding-left: 1rem; - } - - #copyright ul li:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; - } - - @media screen and (max-width: 1280px) { - - #copyright { - margin: 4rem auto; - } - - } - - @media screen and (max-width: 480px) { - - #copyright ul li { - border-left: 0; - margin: 1rem 0 0 0; - padding-left: 0; - display: block; - } - - #copyright ul li:first-child { - margin-top: 0; - } - - } - -/* Nav Panel */ - - #navPanelToggle { - text-decoration: none; - -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - display: none; - position: fixed; - top: 0.75rem; - right: 0.75rem; - border: 0; - color: #ffffff; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 0.9rem; - font-weight: 900; - letter-spacing: 0.075em; - padding: 0.375rem 1.25rem; - text-transform: uppercase; - z-index: 10001; - } - - #navPanelToggle:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - } - - #navPanelToggle:before { - content: '\f0c9'; - margin-right: 0.5rem; - } - - #navPanelToggle.alt { - background-color: rgba(255, 255, 255, 0.875); - box-shadow: 0 0.125rem 0.75rem 0 rgba(30, 37, 45, 0.25); - color: #212931; - } - - #navPanelToggle.alt:hover { - background-color: #ffffff; - } - - @media screen and (max-width: 980px) { - - #navPanelToggle { - display: block; - } - - } - - @media screen and (max-width: 736px) { - - #navPanelToggle { - font-size: 0.8rem; - padding: 0.25rem 1rem; - } - - } - - #navPanel { - -moz-transform: translateX(20rem); - -webkit-transform: translateX(20rem); - -ms-transform: translateX(20rem); - transform: translateX(20rem); - -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; - -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; - -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; - transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; - display: none; - -webkit-overflow-scrolling: touch; - background: #ffffff; - box-shadow: none; - color: #212931; - height: 100%; - max-width: 80%; - overflow-y: auto; - padding: 3rem 2rem; - position: fixed; - right: 0; - top: 0; - visibility: hidden; - width: 20rem; - z-index: 10002; - } - - #navPanel .links { - list-style: none; - padding-left: 0; - } - - #navPanel .links li { - border-top: solid 2px #eeeeee; - } - - #navPanel .links li a { - border-bottom: 0; - display: block; - font-family: "Source Sans Pro", Helvetica, sans-serif; - font-size: 0.9rem; - font-size: 0.9rem; - font-weight: 900; - letter-spacing: 0.075em; - padding: 0.75rem 0; - text-transform: uppercase; - } - - #navPanel .links li:first-child { - border-top: 0; - } - - #navPanel .close { - text-decoration: none; - -moz-transition: color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out; - transition: color 0.2s ease-in-out; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - border: 0; - color: #909498; - cursor: pointer; - display: block; - height: 3.25rem; - line-height: 3.25rem; - padding-right: 1.25rem; - position: absolute; - right: 0; - text-align: right; - top: 0; - vertical-align: middle; - width: 7rem; - } - - #navPanel .close:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; - text-transform: none !important; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - } - - #navPanel .close:before { - content: '\f00d'; - font-size: 1.25rem; - } - - #navPanel .close:hover { - color: #212931; - } - - @media screen and (max-width: 736px) { - - #navPanel .close { - height: 4rem; - line-height: 4rem; - } - - } - - @media screen and (max-width: 980px) { - - #navPanel { - display: block; - } - - } - - @media screen and (max-width: 736px) { - - #navPanel { - padding: 2.5rem 1.75rem; - } - - } - - @media screen and (max-width: 980px) { - - body.is-navPanel-visible #wrapper { - opacity: 0.5; - } - - body.is-navPanel-visible #navPanel { - -moz-transform: translateX(0); - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2); - visibility: visible; - } - - } \ No newline at end of file +*/ + +html, body, div, span, applet, object, +iframe, h1, h2, h3, h4, h5, h6, p, blockquote, +pre, a, abbr, acronym, address, big, cite, +code, del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, b, +u, i, center, dl, dt, dd, ol, ul, li, fieldset, +form, label, legend, table, caption, tbody, +tfoot, thead, tr, th, td, article, aside, +canvas, details, embed, figure, figcaption, +footer, header, hgroup, menu, nav, output, ruby, +section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline;} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block;} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + + blockquote:before, blockquote:after, q:before, q:after { + content: ''; + content: none; + } + +table { + border-collapse: collapse; + border-spacing: 0; +} + +body { + -webkit-text-size-adjust: none; +} + +mark { + background-color: transparent; + color: inherit; +} + +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; +} + +/* Basic */ + + @-ms-viewport { + width: device-width; + } + + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body { + background: #2e3842; + } + + body.is-preload *, body.is-preload *:before, body.is-preload *:after { + -moz-animation: none !important; + -webkit-animation: none !important; + -ms-animation: none !important; + animation: none !important; + -moz-transition: none !important; + -webkit-transition: none !important; + -ms-transition: none !important; + transition: none !important; + } + + body, input, select, textarea { + color: #fff; + font-family: "Open Sans", Helvetica, sans-serif; + font-size: 15pt; + font-weight: 400; + letter-spacing: 0.075em; + line-height: 1.65em; + } + + @media screen and (max-width: 1680px) { + + body, input, select, textarea { + font-size: 13pt; + } + + } + + @media screen and (max-width: 1280px) { + + body, input, select, textarea { + font-size: 12pt; + } + + } + + @media screen and (max-width: 736px) { + + body, input, select, textarea { + font-size: 11pt; + letter-spacing: 0.0375em; + } + + } + + a { + -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease; + -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease; + -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease; + transition: color 0.2s ease, border-bottom-color 0.2s ease; + border-bottom: dotted 1px; + color: inherit; + text-decoration: none; + } + + a:hover { + border-bottom-color: transparent; + } + + strong, b { + color: #fff; + font-weight: 600; + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 2em 0; + } + + h1, h2, h3, h4, h5, h6 { + color: #fff; + font-weight: 800; + letter-spacing: 0.225em; + line-height: 1em; + margin: 0 0 1em 0; + text-transform: uppercase; + } + + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: inherit; + text-decoration: none; + } + + h2 { + font-size: 1.35em; + line-height: 1.75em; + } + + @media screen and (max-width: 736px) { + + h2 { + font-size: 1.1em; + line-height: 1.65em; + } + + } + + h3 { + font-size: 1.15em; + line-height: 1.75em; + } + + @media screen and (max-width: 736px) { + + h3 { + font-size: 1em; + line-height: 1.65em; + } + + } + + h4 { + font-size: 1em; + line-height: 1.5em; + } + + h5 { + font-size: 0.8em; + line-height: 1.5em; + } + + h6 { + font-size: 0.7em; + line-height: 1.5em; + } + + sub { + font-size: 0.8em; + position: relative; + top: 0.5em; + } + + sup { + font-size: 0.8em; + position: relative; + top: -0.5em; + } + + hr { + border: 0; + border-bottom: solid 2px #fff; + margin: 3em 0; + } + + hr.major { + margin: 4.5em 0; + } + + blockquote { + border-left: solid 4px #fff; + font-style: italic; + margin: 0 0 2em 0; + padding: 0.5em 0 0.5em 2em; + } + + code { + background: rgba(144, 144, 144, 0.25); + border-radius: 3px; + font-family: "Courier New", monospace; + font-size: 0.9em; + letter-spacing: 0; + margin: 0 0.25em; + padding: 0.25em 0.65em; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0 2em 0; + } + + pre code { + display: block; + line-height: 1.75em; + padding: 1em 1.5em; + overflow-x: auto; + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + +/* Row */ + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp { + order: -1; + } + + .row > .col-1 { + width: 8.33333%; + } + + .row > .off-1 { + margin-left: 8.33333%; + } + + .row > .col-2 { + width: 16.66667%; + } + + .row > .off-2 { + margin-left: 16.66667%; + } + + .row > .col-3 { + width: 25%; + } + + .row > .off-3 { + margin-left: 25%; + } + + .row > .col-4 { + width: 33.33333%; + } + + .row > .off-4 { + margin-left: 33.33333%; + } + + .row > .col-5 { + width: 41.66667%; + } + + .row > .off-5 { + margin-left: 41.66667%; + } + + .row > .col-6 { + width: 50%; + } + + .row > .off-6 { + margin-left: 50%; + } + + .row > .col-7 { + width: 58.33333%; + } + + .row > .off-7 { + margin-left: 58.33333%; + } + + .row > .col-8 { + width: 66.66667%; + } + + .row > .off-8 { + margin-left: 66.66667%; + } + + .row > .col-9 { + width: 75%; + } + + .row > .off-9 { + margin-left: 75%; + } + + .row > .col-10 { + width: 83.33333%; + } + + .row > .off-10 { + margin-left: 83.33333%; + } + + .row > .col-11 { + width: 91.66667%; + } + + .row > .off-11 { + margin-left: 91.66667%; + } + + .row > .col-12 { + width: 100%; + } + + .row > .off-12 { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + @media screen and (max-width: 1680px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-xlarge { + order: -1; + } + + .row > .col-1-xlarge { + width: 8.33333%; + } + + .row > .off-1-xlarge { + margin-left: 8.33333%; + } + + .row > .col-2-xlarge { + width: 16.66667%; + } + + .row > .off-2-xlarge { + margin-left: 16.66667%; + } + + .row > .col-3-xlarge { + width: 25%; + } + + .row > .off-3-xlarge { + margin-left: 25%; + } + + .row > .col-4-xlarge { + width: 33.33333%; + } + + .row > .off-4-xlarge { + margin-left: 33.33333%; + } + + .row > .col-5-xlarge { + width: 41.66667%; + } + + .row > .off-5-xlarge { + margin-left: 41.66667%; + } + + .row > .col-6-xlarge { + width: 50%; + } + + .row > .off-6-xlarge { + margin-left: 50%; + } + + .row > .col-7-xlarge { + width: 58.33333%; + } + + .row > .off-7-xlarge { + margin-left: 58.33333%; + } + + .row > .col-8-xlarge { + width: 66.66667%; + } + + .row > .off-8-xlarge { + margin-left: 66.66667%; + } + + .row > .col-9-xlarge { + width: 75%; + } + + .row > .off-9-xlarge { + margin-left: 75%; + } + + .row > .col-10-xlarge { + width: 83.33333%; + } + + .row > .off-10-xlarge { + margin-left: 83.33333%; + } + + .row > .col-11-xlarge { + width: 91.66667%; + } + + .row > .off-11-xlarge { + margin-left: 91.66667%; + } + + .row > .col-12-xlarge { + width: 100%; + } + + .row > .off-12-xlarge { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } + + @media screen and (max-width: 1280px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-large { + order: -1; + } + + .row > .col-1-large { + width: 8.33333%; + } + + .row > .off-1-large { + margin-left: 8.33333%; + } + + .row > .col-2-large { + width: 16.66667%; + } + + .row > .off-2-large { + margin-left: 16.66667%; + } + + .row > .col-3-large { + width: 25%; + } + + .row > .off-3-large { + margin-left: 25%; + } + + .row > .col-4-large { + width: 33.33333%; + } + + .row > .off-4-large { + margin-left: 33.33333%; + } + + .row > .col-5-large { + width: 41.66667%; + } + + .row > .off-5-large { + margin-left: 41.66667%; + } + + .row > .col-6-large { + width: 50%; + } + + .row > .off-6-large { + margin-left: 50%; + } + + .row > .col-7-large { + width: 58.33333%; + } + + .row > .off-7-large { + margin-left: 58.33333%; + } + + .row > .col-8-large { + width: 66.66667%; + } + + .row > .off-8-large { + margin-left: 66.66667%; + } + + .row > .col-9-large { + width: 75%; + } + + .row > .off-9-large { + margin-left: 75%; + } + + .row > .col-10-large { + width: 83.33333%; + } + + .row > .off-10-large { + margin-left: 83.33333%; + } + + .row > .col-11-large { + width: 91.66667%; + } + + .row > .off-11-large { + margin-left: 91.66667%; + } + + .row > .col-12-large { + width: 100%; + } + + .row > .off-12-large { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } + + @media screen and (max-width: 980px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-medium { + order: -1; + } + + .row > .col-1-medium { + width: 8.33333%; + } + + .row > .off-1-medium { + margin-left: 8.33333%; + } + + .row > .col-2-medium { + width: 16.66667%; + } + + .row > .off-2-medium { + margin-left: 16.66667%; + } + + .row > .col-3-medium { + width: 25%; + } + + .row > .off-3-medium { + margin-left: 25%; + } + + .row > .col-4-medium { + width: 33.33333%; + } + + .row > .off-4-medium { + margin-left: 33.33333%; + } + + .row > .col-5-medium { + width: 41.66667%; + } + + .row > .off-5-medium { + margin-left: 41.66667%; + } + + .row > .col-6-medium { + width: 50%; + } + + .row > .off-6-medium { + margin-left: 50%; + } + + .row > .col-7-medium { + width: 58.33333%; + } + + .row > .off-7-medium { + margin-left: 58.33333%; + } + + .row > .col-8-medium { + width: 66.66667%; + } + + .row > .off-8-medium { + margin-left: 66.66667%; + } + + .row > .col-9-medium { + width: 75%; + } + + .row > .off-9-medium { + margin-left: 75%; + } + + .row > .col-10-medium { + width: 83.33333%; + } + + .row > .off-10-medium { + margin-left: 83.33333%; + } + + .row > .col-11-medium { + width: 91.66667%; + } + + .row > .off-11-medium { + margin-left: 91.66667%; + } + + .row > .col-12-medium { + width: 100%; + } + + .row > .off-12-medium { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } + + @media screen and (max-width: 736px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-small { + order: -1; + } + + .row > .col-1-small { + width: 8.33333%; + } + + .row > .off-1-small { + margin-left: 8.33333%; + } + + .row > .col-2-small { + width: 16.66667%; + } + + .row > .off-2-small { + margin-left: 16.66667%; + } + + .row > .col-3-small { + width: 25%; + } + + .row > .off-3-small { + margin-left: 25%; + } + + .row > .col-4-small { + width: 33.33333%; + } + + .row > .off-4-small { + margin-left: 33.33333%; + } + + .row > .col-5-small { + width: 41.66667%; + } + + .row > .off-5-small { + margin-left: 41.66667%; + } + + .row > .col-6-small { + width: 50%; + } + + .row > .off-6-small { + margin-left: 50%; + } + + .row > .col-7-small { + width: 58.33333%; + } + + .row > .off-7-small { + margin-left: 58.33333%; + } + + .row > .col-8-small { + width: 66.66667%; + } + + .row > .off-8-small { + margin-left: 66.66667%; + } + + .row > .col-9-small { + width: 75%; + } + + .row > .off-9-small { + margin-left: 75%; + } + + .row > .col-10-small { + width: 83.33333%; + } + + .row > .off-10-small { + margin-left: 83.33333%; + } + + .row > .col-11-small { + width: 91.66667%; + } + + .row > .off-11-small { + margin-left: 91.66667%; + } + + .row > .col-12-small { + width: 100%; + } + + .row > .off-12-small { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } + + @media screen and (max-width: 480px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-xsmall { + order: -1; + } + + .row > .col-1-xsmall { + width: 8.33333%; + } + + .row > .off-1-xsmall { + margin-left: 8.33333%; + } + + .row > .col-2-xsmall { + width: 16.66667%; + } + + .row > .off-2-xsmall { + margin-left: 16.66667%; + } + + .row > .col-3-xsmall { + width: 25%; + } + + .row > .off-3-xsmall { + margin-left: 25%; + } + + .row > .col-4-xsmall { + width: 33.33333%; + } + + .row > .off-4-xsmall { + margin-left: 33.33333%; + } + + .row > .col-5-xsmall { + width: 41.66667%; + } + + .row > .off-5-xsmall { + margin-left: 41.66667%; + } + + .row > .col-6-xsmall { + width: 50%; + } + + .row > .off-6-xsmall { + margin-left: 50%; + } + + .row > .col-7-xsmall { + width: 58.33333%; + } + + .row > .off-7-xsmall { + margin-left: 58.33333%; + } + + .row > .col-8-xsmall { + width: 66.66667%; + } + + .row > .off-8-xsmall { + margin-left: 66.66667%; + } + + .row > .col-9-xsmall { + width: 75%; + } + + .row > .off-9-xsmall { + margin-left: 75%; + } + + .row > .col-10-xsmall { + width: 83.33333%; + } + + .row > .off-10-xsmall { + margin-left: 83.33333%; + } + + .row > .col-11-xsmall { + width: 91.66667%; + } + + .row > .off-11-xsmall { + margin-left: 91.66667%; + } + + .row > .col-12-xsmall { + width: 100%; + } + + .row > .off-12-xsmall { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } + +/* Section/Article */ + + section.special, article.special { + text-align: center; + } + + header p { + color: rgba(255, 255, 255, 0.5); + position: relative; + top: -0.25em; + } + + header h3 + p { + font-size: 1.1em; + } + + header h4 + p, + header h5 + p, + header h6 + p { + font-size: 0.9em; + } + + header.major { + margin: 0 0 3.5em 0; + } + + header.major h2, header.major h3, header.major h4, header.major h5, header.major h6 { + border-bottom: solid 2px #fff; + display: inline-block; + padding-bottom: 1em; + position: relative; + } + + header.major h2:after, header.major h3:after, header.major h4:after, header.major h5:after, header.major h6:after { + content: ''; + display: block; + height: 1px; + } + + header.major p { + color: #fff; + top: 0; + } + + @media screen and (max-width: 736px) { + + header.major { + margin: 0 0 2em 0; + } + + } + + @media screen and (max-width: 980px) { + + header br { + display: none; + } + + } + +/* Form */ + + form { + margin: 0 0 2em 0; + } + + label { + color: #fff; + display: block; + font-size: 0.9em; + font-weight: 600; + margin: 0 0 1em 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: rgba(144, 144, 144, 0.25); + border-radius: 3px; + border: none; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; + } + + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; + } + + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + select:focus, + textarea:focus { + box-shadow: 0 0 0 2px #21b2a6; + } + + select { + background-size: 1.25em; + background-repeat: no-repeat; + background-position: calc(100% - 1em) center; + height: 2.75em; + padding-right: 2.75em; + text-overflow: ellipsis; + } + + select:focus::-ms-value { + background-color: transparent; + } + + select::-ms-expand { + display: none; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: 2.75em; + } + + textarea { + padding: 0.75em 1em; + } + + input[type="checkbox"], + input[type="radio"] { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + } + + input[type="checkbox"] + label, + input[type="radio"] + label { + text-decoration: none; + color: #fff; + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: 400; + padding-left: 2.4em; + padding-right: 0.75em; + position: relative; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + background: rgba(144, 144, 144, 0.25); + border-radius: 3px; + content: ''; + display: inline-block; + font-size: 0.8em; + height: 2.0625em; + left: 0; + line-height: 2.0625em; + position: absolute; + text-align: center; + top: 0; + width: 2.0625em; + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + background: #2e3842; + color: #fff; + content: '\f00c'; + } + + input[type="checkbox"]:focus + label:before, + input[type="radio"]:focus + label:before { + box-shadow: 0 0 0 2px #21b2a6; + } + + input[type="checkbox"] + label:before { + border-radius: 3px; + } + + input[type="radio"] + label:before { + border-radius: 100%; + } + + ::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5) !important; + opacity: 1.0; + } + +/* Box */ + + .box { + border-radius: 3px; + border: solid 2px #fff; + margin-bottom: 2em; + padding: 1.5em; + } + + .box > :last-child, + .box > :last-child > :last-child, + .box > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + .box.alt { + border: 0; + border-radius: 0; + padding: 0; + } + +/* Icon */ + + .icon { + text-decoration: none; + border-bottom: none; + position: relative; + } + + .icon:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 400; + } + + .icon > .label { + display: none; + } + + .icon:before { + line-height: inherit; + } + + .icon.solid:before { + font-weight: 900; + } + + .icon.brands:before { + font-family: 'Font Awesome 5 Brands'; + } + + .icon.major { + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + border-radius: 3px; + border: solid 2px #fff; + display: inline-block; + font-size: 1.35em; + height: calc(3em + 2px); + line-height: 3em; + text-align: center; + width: calc(3em + 2px); + } + + .icon.major:before { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + display: inline-block; + font-size: 1.5em; + } + + @media screen and (max-width: 736px) { + + .icon.major { + font-size: 1em; + } + + } + + .icon.style1 { + color: #00ffcc; + } + + .icon.style2 { + color: #00f0ff; + } + + .icon.style3 { + color: #76ddff; + } + +/* Image */ + + .image { + border-radius: 3px; + border: 0; + display: inline-block; + position: relative; + } + + .image img { + border-radius: 3px; + display: block; + } + + .image.left { + float: left; + margin: 0 2em 2em 0; + top: 0.25em; + } + + .image.right { + float: right; + margin: 0 0 2em 2em; + top: 0.25em; + } + + .image.left, .image.right { + max-width: 40%; + } + + .image.left img, .image.right img { + width: 100%; + } + + .image.fit { + display: block; + margin: 0 0 2em 0; + width: 100%; + } + + .image.fit img { + width: 100%; + } + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 2em 0; + padding-left: 1.25em; + } + + ol li { + padding-left: 0.25em; + } + + ul { + list-style: disc; + margin: 0 0 2em 0; + padding-left: 1em; + } + + ul li { + padding-left: 0.5em; + } + + ul.alt { + list-style: none; + padding-left: 0; + } + + ul.alt li { + border-top: solid 1px #fff; + padding: 0.5em 0; + } + + ul.alt li:first-child { + border-top: 0; + padding-top: 0; + } + + dl { + margin: 0 0 2em 0; + } + +/* Actions */ + + ul.actions { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + cursor: default; + list-style: none; + margin-left: -1em; + padding-left: 0; + } + + ul.actions li { + padding: 0 0 0 1em; + vertical-align: middle; + } + + ul.actions.special { + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + width: 100%; + margin-left: 0; + } + + ul.actions.special li:first-child { + padding-left: 0; + } + + ul.actions.stacked { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + } + + ul.actions.stacked li { + padding: 1em 0 0 0; + } + + ul.actions.stacked li:first-child { + padding-top: 0; + } + + ul.actions.fit { + width: calc(100% + 1em); + } + + ul.actions.fit li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + width: 100%; + } + + ul.actions.fit li > * { + width: 100%; + } + + ul.actions.fit.stacked { + width: 100%; + } + + @media screen and (max-width: 480px) { + + ul.actions:not(.fixed) { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + width: 100% !important; + } + + ul.actions:not(.fixed) li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + padding: 1em 0 0 0; + text-align: center; + width: 100%; + } + + ul.actions:not(.fixed) li > * { + width: 100%; + } + + ul.actions:not(.fixed) li:first-child { + padding-top: 0; + } + + ul.actions:not(.fixed) li input[type="submit"], + ul.actions:not(.fixed) li input[type="reset"], + ul.actions:not(.fixed) li input[type="button"], + ul.actions:not(.fixed) li button, + ul.actions:not(.fixed) li .button { + width: 100%; + } + + ul.actions:not(.fixed) li input[type="submit"].icon:before, + ul.actions:not(.fixed) li input[type="reset"].icon:before, + ul.actions:not(.fixed) li input[type="button"].icon:before, + ul.actions:not(.fixed) li button.icon:before, + ul.actions:not(.fixed) li .button.icon:before { + margin-left: -0.5em; + } + + } + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + } + + ul.icons li { + display: inline-block; + padding: 0 1em 0 0; + } + + ul.icons li:last-child { + padding-right: 0 !important; + } + + ul.icons.major { + padding: 1em 0; + } + + ul.icons.major li { + padding-right: 3.5em; + } + + @media screen and (max-width: 736px) { + + ul.icons.major li { + padding: 0 1em !important; + } + + } + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 2em 0; + width: 100%; + } + + table tbody tr { + border: solid 1px #fff; + border-left: 0; + border-right: 0; + } + + table tbody tr:nth-child(2n + 1) { + background-color: rgba(144, 144, 144, 0.25); + } + + table td { + padding: 0.75em 0.75em; + } + + table th { + color: #fff; + font-size: 0.9em; + font-weight: 600; + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + table thead { + border-bottom: solid 2px #fff; + } + + table tfoot { + border-top: solid 2px #fff; + } + + table.alt { + border-collapse: separate; + } + + table.alt tbody tr td { + border: solid 1px #fff; + border-left-width: 0; + border-top-width: 0; + } + + table.alt tbody tr td:first-child { + border-left-width: 1px; + } + + table.alt tbody tr:first-child td { + border-top-width: 1px; + } + + table.alt thead { + border-bottom: 0; + } + + table.alt tfoot { + border-top: 0; + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + background-color: transparent; + border-radius: 3px; + border: 0; + box-shadow: inset 0 0 0 2px #fff; + color: #fff; + cursor: pointer; + display: inline-block; + font-size: 0.8em; + font-weight: 600; + height: 3.125em; + letter-spacing: 0.225em; + line-height: 3.125em; + max-width: 30em; + padding: 0 2.75em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + button:hover, + .button:hover { + background-color: rgba(144, 144, 144, 0.25); + } + + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active, + button:active, + .button:active { + background-color: rgba(144, 144, 144, 0.5); + } + + input[type="submit"].icon:before, + input[type="reset"].icon:before, + input[type="button"].icon:before, + button.icon:before, + .button.icon:before { + margin-right: 0.5em; + } + + input[type="submit"].fit, + input[type="reset"].fit, + input[type="button"].fit, + button.fit, + .button.fit { + width: 100%; + } + + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + button.small, + .button.small { + font-size: 0.8em; + } + + input[type="submit"].large, + input[type="reset"].large, + input[type="button"].large, + button.large, + .button.large { + font-size: 1.35em; + } + + input[type="submit"].primary, + input[type="reset"].primary, + input[type="button"].primary, + button.primary, + .button.primary { + background-color: #ed4933; + box-shadow: none !important; + color: #ffffff !important; + } + + input[type="submit"].primary:hover, + input[type="reset"].primary:hover, + input[type="button"].primary:hover, + button.primary:hover, + .button.primary:hover { + background-color: #ef5e4a !important; + } + + input[type="submit"].primary:active, + input[type="reset"].primary:active, + input[type="button"].primary:active, + button.primary:active, + .button.primary:active { + background-color: #eb341c !important; + } + + input[type="submit"].disabled, input[type="submit"]:disabled, + input[type="reset"].disabled, + input[type="reset"]:disabled, + input[type="button"].disabled, + input[type="button"]:disabled, + button.disabled, + button:disabled, + .button.disabled, + .button:disabled { + pointer-events: none; + opacity: 0.25; + } + + @media screen and (max-width: 736px) { + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + height: 3.75em; + line-height: 3.75em; + } + + } + +/* Tiles */ + + .tiles { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + border-top: 0 !important; + } + + .tiles + * { + border-top: 0 !important; + } + + .tiles article { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-transition: -moz-transform 0.25s ease, opacity 0.25s ease, -moz-filter 1s ease, -webkit-filter 1s ease; + -webkit-transition: -webkit-transform 0.25s ease, opacity 0.25s ease, -webkit-filter 1s ease, -webkit-filter 1s ease; + -ms-transition: -ms-transform 0.25s ease, opacity 0.25s ease, -ms-filter 1s ease, -webkit-filter 1s ease; + transition: transform 0.25s ease, opacity 0.25s ease, filter 1s ease, -webkit-filter 1s ease; + padding: 4em 4em 2em 4em ; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + cursor: default; + height: 40vh; + max-height: 40em; + min-height: 23em; + overflow: hidden; + position: relative; + width: 40%; + } + + .tiles article .image { + display: none; + } + + .tiles article header { + position: relative; + z-index: 3; + } + + .tiles article h3 { + font-size: 1.75em; + } + + .tiles article h3 a:hover { + color: inherit !important; + } + + .tiles article .link.primary { + border: 0; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 4; + } + + .tiles article:before { + -moz-transition: opacity 0.5s ease; + -webkit-transition: opacity 0.5s ease; + -ms-transition: opacity 0.5s ease; + transition: opacity 0.5s ease; + bottom: 0; + content: ''; + display: block; + height: 100%; + left: 0; + opacity: 0.85; + position: absolute; + width: 100%; + z-index: 2; + } + + .tiles article:after { + background-color: rgba(36, 41, 67, 0.25); + content: ''; + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } + + .tiles article:hover:before { + opacity: 0; + } + + .tiles article.is-transitioning { + -moz-transform: scale(0.95); + -webkit-transform: scale(0.95); + -ms-transform: scale(0.95); + transform: scale(0.95); + -moz-filter: blur(0.5em); + -webkit-filter: blur(0.5em); + -ms-filter: blur(0.5em); + filter: blur(0.5em); + opacity: 0; + } + + .tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) { + width: 60%; + } + + .tiles article:nth-child(6n - 5):before { + background-color: #6fc3df; + } + + .tiles article:nth-child(6n - 4):before { + background-color: #8d82c4; + } + + .tiles article:nth-child(6n - 3):before { + background-color: #ec8d81; + } + + .tiles article:nth-child(6n - 2):before { + background-color: #e7b788; + } + + .tiles article:nth-child(6n - 1):before { + background-color: #8ea9e8; + } + + .tiles article:nth-child(6n):before { + background-color: #87c5a4; + } + + @media screen and (max-width: 1280px) { + + .tiles article { + padding: 4em 3em 2em 3em ; + height: 30vh; + max-height: 30em; + min-height: 20em; + } + + } + + @media screen and (max-width: 980px) { + + .tiles article { + width: 50% !important; + } + + } + + @media screen and (max-width: 736px) { + + .tiles article { + padding: 3em 1.5em 1em 1.5em ; + height: 16em; + max-height: none; + min-height: 0; + } + + .tiles article h3 { + font-size: 1.5em; + } + + } + + @media screen and (max-width: 480px) { + + .tiles { + display: block; + } + + .tiles article { + height: 20em; + width: 100% !important; + } + + } + + +/* Features */ + + .features { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + list-style: none; + padding: 0; + width: 100%; + } + + .features li { + padding: 4em 4em 2em 6em ; + display: block; + position: relative; + text-align: left; + width: 50%; + } + + .features li:nth-child(1) { + background-color: rgba(0, 0, 0, 0.035); + } + + .features li:nth-child(2) { + background-color: rgba(0, 0, 0, 0.07); + } + + .features li:nth-child(3) { + background-color: rgba(0, 0, 0, 0.105); + } + + .features li:nth-child(4) { + background-color: rgba(0, 0, 0, 0.14); + } + + .features li:nth-child(5) { + background-color: rgba(0, 0, 0, 0.175); + } + + .features li:nth-child(6) { + background-color: rgba(0, 0, 0, 0.21); + } + + .features li:nth-child(7) { + background-color: rgba(0, 0, 0, 0.245); + } + + .features li:nth-child(8) { + background-color: rgba(0, 0, 0, 0.28); + } + + .features li:nth-child(9) { + background-color: rgba(0, 0, 0, 0.315); + } + + .features li:nth-child(10) { + background-color: rgba(0, 0, 0, 0.35); + } + + .features li:before { + display: block; + color: #00ffcc; + position: absolute; + left: 1.75em; + top: 2.75em; + font-size: 1.5em; + } + + .features li:nth-child(1) { + border-top-left-radius: 3px; + } + + .features li:nth-child(2) { + border-top-right-radius: 3px; + } + + .features li:nth-last-child(1) { + border-bottom-right-radius: 3px; + } + + .features li:nth-last-child(2) { + border-bottom-left-radius: 3px; + } + + @media screen and (max-width: 980px) { + + .features li { + padding: 3em 2em 1em 2em ; + text-align: center; + } + + .features li:before { + left: 0; + margin: 0 0 1em 0; + position: relative; + top: 0; + } + + } + + @media screen and (max-width: 736px) { + + .features li { + padding: 3em 0 1em 0 ; + background-color: transparent !important; + border-top: solid 2px #fff; + width: 100%; + } + + .features li:first-child { + border-top: 0; + } + + } + +/* Spotlight */ + + .spotlight { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + } + + .spotlight .image { + -moz-order: 1; + -webkit-order: 1; + -ms-order: 1; + order: 1; + border-radius: 0; + width: 40%; + } + + .spotlight .image img { + border-radius: 0; + width: 100%; + } + + .spotlight .content { + padding: 2em 4em 0.1em 4em ; + -moz-order: 2; + -webkit-order: 2; + -ms-order: 2; + order: 2; + max-width: 48em; + width: 60%; + } + + .spotlight:nth-child(2n) { + -moz-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + .spotlight:nth-child(1) { + background-color: rgba(0, 0, 0, 0.075); + } + + .spotlight:nth-child(2) { + background-color: rgba(0, 0, 0, 0.15); + } + + .spotlight:nth-child(3) { + background-color: rgba(0, 0, 0, 0.225); + } + + .spotlight:nth-child(4) { + background-color: rgba(0, 0, 0, 0.3); + } + + .spotlight:nth-child(5) { + background-color: rgba(0, 0, 0, 0.375); + } + + .spotlight:nth-child(6) { + background-color: rgba(0, 0, 0, 0.45); + } + + .spotlight:nth-child(7) { + background-color: rgba(0, 0, 0, 0.525); + } + + .spotlight:nth-child(8) { + background-color: rgba(0, 0, 0, 0.6); + } + + .spotlight:nth-child(9) { + background-color: rgba(0, 0, 0, 0.675); + } + + .spotlight:nth-child(10) { + background-color: rgba(0, 0, 0, 0.75); + } + + @media screen and (max-width: 1280px) { + + .spotlight .image { + width: 45%; + } + + .spotlight .content { + width: 55%; + } + + } + + @media screen and (max-width: 980px) { + + .spotlight { + display: block; + } + + .spotlight br { + display: none; + } + + .spotlight .image { + width: 100%; + } + + .spotlight .content { + padding: 4em 3em 2em 3em ; + max-width: none; + text-align: center; + width: 100%; + } + + } + + @media screen and (max-width: 736px) { + + .spotlight .content { + padding: 3em 2em 1em 2em ; + } + + } + +/* Wrapper */ + + .wrapper { + padding: 6em 0 4em 0 ; + } + + .wrapper > .inner { + width: 60em; + margin: 0 auto; + } + + @media screen and (max-width: 1280px) { + + .wrapper > .inner { + width: 90%; + } + + } + + @media screen and (max-width: 980px) { + + .wrapper > .inner { + width: 100%; + } + + } + + .wrapper.alt { + padding: 0; + } + + .wrapper.style1 { + background-color: #21b2a6; + color: #c8ece9; + } + + .wrapper.style1 strong, .wrapper.style1 b { + color: #ffffff; + } + + .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 { + color: #ffffff; + } + + .wrapper.style1 hr { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 blockquote { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 code { + background: rgba(255, 255, 255, 0.075); + } + + .wrapper.style1 header p { + color: #a6e0db; + } + + .wrapper.style1 header.major h2, .wrapper.style1 header.major h3, .wrapper.style1 header.major h4, .wrapper.style1 header.major h5, .wrapper.style1 header.major h6 { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 header.major p { + color: #c8ece9; + } + + .wrapper.style1 label { + color: #ffffff; + } + + .wrapper.style1 input[type="text"], + .wrapper.style1 input[type="password"], + .wrapper.style1 input[type="email"], + .wrapper.style1 select, + .wrapper.style1 textarea { + background-color: rgba(255, 255, 255, 0.075); + } + + .wrapper.style1 select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E"); + } + + .wrapper.style1 select option { + color: #ffffff; + background: #21b2a6; + } + + .wrapper.style1 input[type="checkbox"] + label, + .wrapper.style1 input[type="radio"] + label { + color: #c8ece9; + } + + .wrapper.style1 input[type="checkbox"] + label:before, + .wrapper.style1 input[type="radio"] + label:before { + background: rgba(255, 255, 255, 0.075); + } + + .wrapper.style1 input[type="checkbox"]:checked + label:before, + .wrapper.style1 input[type="radio"]:checked + label:before { + background: #ffffff; + color: #21b2a6; + } + + .wrapper.style1 ::-webkit-input-placeholder { + color: #a6e0db !important; + } + + .wrapper.style1 :-moz-placeholder { + color: #a6e0db !important; + } + + .wrapper.style1 ::-moz-placeholder { + color: #a6e0db !important; + } + + .wrapper.style1 :-ms-input-placeholder { + color: #a6e0db !important; + } + + .wrapper.style1 .formerize-placeholder { + color: #a6e0db !important; + } + + .wrapper.style1 .icon.major { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 ul.alt li { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 table tbody tr { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 table tbody tr:nth-child(2n + 1) { + background-color: rgba(255, 255, 255, 0.075); + } + + .wrapper.style1 table th { + color: #ffffff; + } + + .wrapper.style1 table thead { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 table tfoot { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 table.alt tbody tr td { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style1 input[type="submit"], + .wrapper.style1 input[type="reset"], + .wrapper.style1 input[type="button"], + .wrapper.style1 button, + .wrapper.style1 .button { + box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125); + color: #ffffff; + } + + .wrapper.style1 input[type="submit"]:hover, + .wrapper.style1 input[type="reset"]:hover, + .wrapper.style1 input[type="button"]:hover, + .wrapper.style1 button:hover, + .wrapper.style1 .button:hover { + background-color: rgba(255, 255, 255, 0.075); + } + + .wrapper.style1 input[type="submit"]:active, + .wrapper.style1 input[type="reset"]:active, + .wrapper.style1 input[type="button"]:active, + .wrapper.style1 button:active, + .wrapper.style1 .button:active { + background-color: rgba(255, 255, 255, 0.2); + } + + @media screen and (max-width: 736px) { + + .wrapper.style1 .features li { + border-top-color: rgba(0, 0, 0, 0.125); + } + + } + + .wrapper.style2 { + background-color: #2e3842; + } + + .wrapper.style3 { + background-color: #505393; + color: #d3d4e4; + } + + .wrapper.style3 strong, .wrapper.style3 b { + color: #ffffff; + } + + .wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 h4, .wrapper.style3 h5, .wrapper.style3 h6 { + color: #ffffff; + } + + .wrapper.style3 hr { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 blockquote { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 code { + background: rgba(255, 255, 255, 0.075); + } + + .wrapper.style3 header p { + color: #b9bad4; + } + + .wrapper.style3 header.major h2, .wrapper.style3 header.major h3, .wrapper.style3 header.major h4, .wrapper.style3 header.major h5, .wrapper.style3 header.major h6 { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 header.major p { + color: #d3d4e4; + } + + .wrapper.style3 label { + color: #ffffff; + } + + .wrapper.style3 input[type="text"], + .wrapper.style3 input[type="password"], + .wrapper.style3 input[type="email"], + .wrapper.style3 select, + .wrapper.style3 textarea { + background-color: rgba(255, 255, 255, 0.075); + } + + .wrapper.style3 select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E"); + } + + .wrapper.style3 select option { + color: #ffffff; + background: #505393; + } + + .wrapper.style3 input[type="checkbox"] + label, + .wrapper.style3 input[type="radio"] + label { + color: #d3d4e4; + } + + .wrapper.style3 input[type="checkbox"] + label:before, + .wrapper.style3 input[type="radio"] + label:before { + background: rgba(255, 255, 255, 0.075); + } + + .wrapper.style3 input[type="checkbox"]:checked + label:before, + .wrapper.style3 input[type="radio"]:checked + label:before { + background: #ffffff; + color: #505393; + } + + .wrapper.style3 ::-webkit-input-placeholder { + color: #b9bad4 !important; + } + + .wrapper.style3 :-moz-placeholder { + color: #b9bad4 !important; + } + + .wrapper.style3 ::-moz-placeholder { + color: #b9bad4 !important; + } + + .wrapper.style3 :-ms-input-placeholder { + color: #b9bad4 !important; + } + + .wrapper.style3 .formerize-placeholder { + color: #b9bad4 !important; + } + + .wrapper.style3 .icon.major { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 ul.alt li { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 table tbody tr { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 table tbody tr:nth-child(2n + 1) { + background-color: rgba(255, 255, 255, 0.075); + } + + .wrapper.style3 table th { + color: #ffffff; + } + + .wrapper.style3 table thead { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 table tfoot { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 table.alt tbody tr td { + border-color: rgba(0, 0, 0, 0.125); + } + + .wrapper.style3 input[type="submit"], + .wrapper.style3 input[type="reset"], + .wrapper.style3 input[type="button"], + .wrapper.style3 button, + .wrapper.style3 .button { + box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125); + color: #ffffff; + } + + .wrapper.style3 input[type="submit"]:hover, + .wrapper.style3 input[type="reset"]:hover, + .wrapper.style3 input[type="button"]:hover, + .wrapper.style3 button:hover, + .wrapper.style3 .button:hover { + background-color: rgba(255, 255, 255, 0.075); + } + + .wrapper.style3 input[type="submit"]:active, + .wrapper.style3 input[type="reset"]:active, + .wrapper.style3 input[type="button"]:active, + .wrapper.style3 button:active, + .wrapper.style3 .button:active { + background-color: rgba(255, 255, 255, 0.2); + } + + @media screen and (max-width: 736px) { + + .wrapper.style3 .features li { + border-top-color: rgba(0, 0, 0, 0.125); + } + + } + + .wrapper.style4 { + background-color: transparent; + } + + .wrapper.style5 { + background-color: #ffffff; + color: #4E4852; + } + + .wrapper.style5 strong, .wrapper.style5 b { + color: #2E3842; + } + + .wrapper.style5 h2, .wrapper.style5 h3, .wrapper.style5 h4, .wrapper.style5 h5, .wrapper.style5 h6 { + color: #2E3842; + } + + .wrapper.style5 hr { + border-color: #dfdfdf; + } + + .wrapper.style5 blockquote { + border-color: #dfdfdf; + } + + .wrapper.style5 code { + background: rgba(0, 0, 0, 0.0375); + } + + .wrapper.style5 header p { + color: #8E8892; + } + + .wrapper.style5 header.major h2, .wrapper.style5 header.major h3, .wrapper.style5 header.major h4, .wrapper.style5 header.major h5, .wrapper.style5 header.major h6 { + border-color: #dfdfdf; + } + + .wrapper.style5 header.major p { + color: #4E4852; + } + + .wrapper.style5 label { + color: #2E3842; + } + + .wrapper.style5 input[type="text"], + .wrapper.style5 input[type="password"], + .wrapper.style5 input[type="email"], + .wrapper.style5 select, + .wrapper.style5 textarea { + background-color: rgba(0, 0, 0, 0.0375); + } + + .wrapper.style5 select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23dfdfdf' /%3E%3C/svg%3E"); + } + + .wrapper.style5 select option { + color: #2E3842; + background: #ffffff; + } + + .wrapper.style5 input[type="checkbox"] + label, + .wrapper.style5 input[type="radio"] + label { + color: #4E4852; + } + + .wrapper.style5 input[type="checkbox"] + label:before, + .wrapper.style5 input[type="radio"] + label:before { + background: rgba(0, 0, 0, 0.0375); + } + + .wrapper.style5 input[type="checkbox"]:checked + label:before, + .wrapper.style5 input[type="radio"]:checked + label:before { + background: #2E3842; + color: #ffffff; + } + + .wrapper.style5 ::-webkit-input-placeholder { + color: #8E8892 !important; + } + + .wrapper.style5 :-moz-placeholder { + color: #8E8892 !important; + } + + .wrapper.style5 ::-moz-placeholder { + color: #8E8892 !important; + } + + .wrapper.style5 :-ms-input-placeholder { + color: #8E8892 !important; + } + + .wrapper.style5 .formerize-placeholder { + color: #8E8892 !important; + } + + .wrapper.style5 .icon.major { + border-color: #dfdfdf; + } + + .wrapper.style5 ul.alt li { + border-color: #dfdfdf; + } + + .wrapper.style5 table tbody tr { + border-color: #dfdfdf; + } + + .wrapper.style5 table tbody tr:nth-child(2n + 1) { + background-color: rgba(0, 0, 0, 0.0375); + } + + .wrapper.style5 table th { + color: #2E3842; + } + + .wrapper.style5 table thead { + border-color: #dfdfdf; + } + + .wrapper.style5 table tfoot { + border-color: #dfdfdf; + } + + .wrapper.style5 table.alt tbody tr td { + border-color: #dfdfdf; + } + + .wrapper.style5 input[type="submit"], + .wrapper.style5 input[type="reset"], + .wrapper.style5 input[type="button"], + .wrapper.style5 button, + .wrapper.style5 .button { + box-shadow: inset 0 0 0 2px #dfdfdf; + color: #2E3842; + } + + .wrapper.style5 input[type="submit"]:hover, + .wrapper.style5 input[type="reset"]:hover, + .wrapper.style5 input[type="button"]:hover, + .wrapper.style5 button:hover, + .wrapper.style5 .button:hover { + background-color: rgba(0, 0, 0, 0.0375); + } + + .wrapper.style5 input[type="submit"]:active, + .wrapper.style5 input[type="reset"]:active, + .wrapper.style5 input[type="button"]:active, + .wrapper.style5 button:active, + .wrapper.style5 .button:active { + background-color: rgba(0, 0, 0, 0.1); + } + + @media screen and (max-width: 736px) { + + .wrapper.style5 .features li { + border-top-color: #dfdfdf; + } + + } + + @media screen and (max-width: 980px) { + + .wrapper { + padding: 4em 3em 2em 3em ; + } + + } + + @media screen and (max-width: 736px) { + + .wrapper { + padding: 3em 2em 1em 2em ; + } + + } + +/* Page Wrapper + Menu */ + + #page-wrapper { + -moz-transition: opacity 0.5s ease; + -webkit-transition: opacity 0.5s ease; + -ms-transition: opacity 0.5s ease; + transition: opacity 0.5s ease; + opacity: 1; + padding-top: 3em; + } + + #page-wrapper:before { + background: rgba(0, 0, 0, 0); + content: ''; + display: block; + display: none; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 10001; + } + + #menu { + -moz-transform: translateX(20em); + -webkit-transform: translateX(20em); + -ms-transform: translateX(20em); + transform: translateX(20em); + -moz-transition: -moz-transform 0.5s ease; + -webkit-transition: -webkit-transform 0.5s ease; + -ms-transition: -ms-transform 0.5s ease; + transition: transform 0.5s ease; + -webkit-overflow-scrolling: touch; + background: #21b2a6; + color: #ffffff; + height: 100%; + max-width: 80%; + overflow-y: auto; + padding: 3em 2em; + position: fixed; + right: 0; + top: 0; + width: 20em; + z-index: 10002; + } + + #menu ul { + list-style: none; + padding: 0; + } + + #menu ul > li { + border-top: solid 1px rgba(0, 0, 0, 0.125); + margin: 0.5em 0 0 0; + padding: 0.5em 0 0 0; + } + + #menu ul > li:first-child { + border-top: 0 !important; + margin-top: 0 !important; + padding-top: 0 !important; + } + + #menu ul > li > a { + border: 0; + color: inherit; + display: block; + font-size: 0.8em; + letter-spacing: 0.225em; + outline: 0; + text-decoration: none; + text-transform: uppercase; + } + + @media screen and (max-width: 736px) { + + #menu ul > li > a { + line-height: 3em; + } + + } + + #menu .close { + background-image: url("images/close.svg"); + background-position: 4.85em 1em; + background-repeat: no-repeat; + border: 0; + cursor: pointer; + display: block; + height: 3em; + position: absolute; + right: 0; + top: 0; + vertical-align: middle; + width: 7em; + } + + @media screen and (max-width: 736px) { + + #menu { + padding: 3em 1.5em; + } + + } + + body.is-menu-visible #page-wrapper { + opacity: 0.35; + } + + body.is-menu-visible #page-wrapper:before { + display: block; + } + + body.is-menu-visible #menu { + -moz-transform: translateX(0); + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + +/* Header */ + + #header { + -moz-transition: background-color 0.2s ease; + -webkit-transition: background-color 0.2s ease; + -ms-transition: background-color 0.2s ease; + transition: background-color 0.2s ease; + background: #2e3842; + height: 3em; + left: 0; + line-height: 3em; + position: fixed; + top: 0; + width: 100%; + z-index: 10000; + } + + #header h1 { + -moz-transition: opacity 0.2s ease; + -webkit-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + height: inherit; + left: 1.25em; + line-height: inherit; + position: absolute; + top: 0; + } + + #header h1 a { + border: 0; + display: block; + height: inherit; + line-height: inherit; + } + + @media screen and (max-width: 736px) { + + #header h1 a { + font-size: 0.8em; + } + + } + + #header nav { + height: inherit; + line-height: inherit; + position: absolute; + right: 0; + top: 0; + } + + #header nav > ul { + list-style: none; + margin: 0; + padding: 0; + white-space: nowrap; + } + + #header nav > ul > li { + display: inline-block; + padding: 0; + } + + #header nav > ul > li > a { + border: 0; + color: #fff; + display: block; + font-size: 0.8em; + letter-spacing: 0.225em; + padding: 0 1.5em; + text-transform: uppercase; + } + + #header nav > ul > li > a.menuToggle { + outline: 0; + position: relative; + } + + #header nav > ul > li > a.menuToggle:after { + background-image: url("images/bars.svg"); + background-position: right center; + background-repeat: no-repeat; + content: ''; + display: inline-block; + height: 3.75em; + vertical-align: top; + width: 2em; + } + + @media screen and (max-width: 736px) { + + #header nav > ul > li > a.menuToggle { + padding: 0 1.5em; + } + + #header nav > ul > li > a.menuToggle span { + display: none; + } + + } + + @media screen and (max-width: 736px) { + + #header nav > ul > li > a { + padding: 0 0 0 1.5em; + } + + } + + #header nav > ul > li:first-child { + margin-left: 0; + } + + #header.alt { + background: transparent; + } + + #header.alt h1 { + pointer-events: none; + opacity: 0; + } + +/* Banner */ + + #banner { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + cursor: default; + height: 100vh; + min-height: 35em; + overflow: hidden; + position: relative; + text-align: center; + } + + #banner h2 { + -moz-transform: scale(1); + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease; + -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; + -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease; + transition: transform 0.5s ease, opacity 0.5s ease; + display: inline-block; + font-size: 1.75em; + opacity: 1; + padding: 0.35em 1em; + position: relative; + z-index: 1; + } + + #banner h2:before, #banner h2:after { + -moz-transition: width 0.85s ease; + -webkit-transition: width 0.85s ease; + -ms-transition: width 0.85s ease; + transition: width 0.85s ease; + -moz-transition-delay: 0.25s; + -webkit-transition-delay: 0.25s; + -ms-transition-delay: 0.25s; + transition-delay: 0.25s; + background: #fff; + content: ''; + display: block; + height: 2px; + position: absolute; + width: 100%; + } + + #banner h2:before { + top: 0; + left: 0; + } + + #banner h2:after { + bottom: 0; + right: 0; + } + + #banner p { + letter-spacing: 0.225em; + text-transform: uppercase; + } + + #banner p a { + color: inherit; + } + + #banner .more { + -moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease; + -webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease; + -ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease; + transition: transform 0.75s ease, opacity 0.75s ease; + -moz-transition-delay: 3.5s; + -webkit-transition-delay: 3.5s; + -ms-transition-delay: 3.5s; + transition-delay: 3.5s; + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + border: none; + bottom: 0; + color: inherit; + font-size: 0.8em; + height: 8.5em; + left: 50%; + letter-spacing: 0.225em; + margin-left: -8.5em; + opacity: 1; + outline: 0; + padding-left: 0.225em; + position: absolute; + text-align: center; + text-transform: uppercase; + width: 16em; + z-index: 1; + } + + #banner .more:after { + background-image: url("images/arrow.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + bottom: 4em; + content: ''; + display: block; + height: 1.5em; + left: 50%; + margin: 0 0 0 -0.75em; + position: absolute; + width: 1.5em; + } + + #banner:after { + pointer-events: none; + -moz-transition: opacity 3s ease-in-out; + -webkit-transition: opacity 3s ease-in-out; + -ms-transition: opacity 3s ease-in-out; + transition: opacity 3s ease-in-out; + -moz-transition-delay: 1.25s; + -webkit-transition-delay: 1.25s; + -ms-transition-delay: 1.25s; + transition-delay: 1.25s; + content: ''; + background: #2e3842; + display: block; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + opacity: 0; + } + + @media screen and (max-width: 736px) { + + #banner { + padding: 7em 3em 5em 3em ; + height: auto; + min-height: 0; + } + + #banner h2 { + font-size: 1.25em; + } + + #banner br { + display: none; + } + + #banner .more { + display: none; + } + + } + + body.is-preload #banner h2 { + -moz-transform: scale(0.95); + -webkit-transform: scale(0.95); + -ms-transform: scale(0.95); + transform: scale(0.95); + opacity: 0; + } + + body.is-preload #banner h2:before, body.is-preload #banner h2:after { + width: 0; + } + + body.is-preload #banner .more { + -moz-transform: translateY(8.5em); + -webkit-transform: translateY(8.5em); + -ms-transform: translateY(8.5em); + transform: translateY(8.5em); + opacity: 0; + } + + body.is-preload #banner:after { + opacity: 1; + } + +/* CTA */ + + #cta .inner { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + max-width: 45em; + } + + #cta .inner header { + -moz-order: 1; + -webkit-order: 1; + -ms-order: 1; + order: 1; + padding-right: 3em; + width: 70%; + } + + #cta .inner header p { + color: inherit; + } + + #cta .inner .actions { + -moz-order: 2; + -webkit-order: 2; + -ms-order: 2; + order: 2; + width: 30%; + } + + @media screen and (max-width: 980px) { + + #cta .inner { + display: block; + text-align: center; + } + + #cta .inner header { + padding-right: 0; + width: 100%; + } + + #cta .inner .actions { + margin-left: auto; + margin-right: auto; + max-width: 20em; + width: 100%; + } + + } + + @media screen and (max-width: 736px) { + + #cta .inner .actions { + max-width: none; + } + + } + +/* Main */ + + #main > header { + padding: 12em 0 10em 0 ; + background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-attachment: fixed; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + text-align: center; + } + + #main > header h2 { + font-size: 1.75em; + margin: 0 0 0.5em 0; + } + + #main > header p { + color: inherit; + letter-spacing: 0.225em; + text-transform: uppercase; + top: 0; + } + + #main > header p a { + color: inherit; + } + + @media screen and (max-width: 1680px) { + + #main > header { + padding: 10em 0 8em 0 ; + } + + } + + @media screen and (max-width: 1280px) { + + #main > header { + padding: 8em 3em 6em 3em ; + } + + } + + @media screen and (max-width: 980px) { + + #main > header { + padding: 10em 3em 8em 3em ; + } + + } + + @media screen and (max-width: 736px) { + + #main > header { + padding: 5em 3em 3em 3em ; + } + + #main > header h2 { + font-size: 1.25em; + margin: 0 0 1em 0; + } + + } + + body.is-mobile #main > header { + background-attachment: scroll; + } + +/* Footer */ + + #footer { + padding: 6em 0 4em 0 ; + background-color: #1d242a; + text-align: center; + } + + #footer .icons { + font-size: 1.25em; + } + + #footer .icons a { + color: rgba(255, 255, 255, 0.5); + } + + #footer .icons a:hover { + color: #fff; + } + + #footer .copyright { + color: rgba(255, 255, 255, 0.5); + font-size: 0.8em; + letter-spacing: 0.225em; + list-style: none; + padding: 0; + text-transform: uppercase; + } + + #footer .copyright li { + border-left: solid 1px rgba(255, 255, 255, 0.5); + display: inline-block; + line-height: 1em; + margin-left: 1em; + padding-left: 1em; + } + + #footer .copyright li:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + #footer .copyright li a { + color: inherit; + } + + #footer .copyright li a:hover { + color: #fff; + } + + @media screen and (max-width: 480px) { + + #footer .copyright li { + border: 0; + display: block; + line-height: 1.65em; + margin: 0; + padding: 0.5em 0; + } + + } + + @media screen and (max-width: 980px) { + + #footer { + padding: 4em 3em 2em 3em ; + } + + } + + @media screen and (max-width: 736px) { + + #footer { + padding: 3em 2em 1em 2em ; + } + + } + +/* Landing */ + + body.landing #page-wrapper { + background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-attachment: fixed; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + padding-top: 0; + } + + body.landing #footer { + background-color: rgba(29, 36, 42, 0.9); + } + + body.is-mobile.landing #page-wrapper { + background: none; + } + + body.is-mobile.landing #banner, + body.is-mobile.landing .wrapper.style4 { + background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/nasaimage.jpg"); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + } + + body.is-mobile.landing #footer { + background-color: #1d242a; + } diff --git a/assets/css/noscript.css b/assets/css/noscript.css index 55e3dc8..c9a111f 100644 --- a/assets/css/noscript.css +++ b/assets/css/noscript.css @@ -1,36 +1,31 @@ -@import url(font-awesome.min.css); - /* - Massively by HTML5 UP + Spectral by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* Wrapper */ +/* Banner */ - #wrapper { - background-color: #212931; - background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg"); - background-size: auto, auto, 100% auto; - background-position: center, center, top center; - background-repeat: repeat, no-repeat, no-repeat; - background-attachment: fixed, fixed, fixed; + body.is-preload #banner h2 { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; } - #wrapper.fade-in:before { - display: none; + body.is-preload #banner h2:before, body.is-preload #banner h2:after { + width: 100%; } -/* Intro */ - - body.is-preload #intro { + body.is-preload #banner .more { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; opacity: 1; } - body.is-preload #intro:not(.hidden) + #header + #nav { - -moz-transform: none; - -webkit-transform: none; - -ms-transform: none; - transform: none; - opacity: 1; - } \ No newline at end of file + body.is-preload #banner:after { + opacity: 0; + } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index fe372ee..23d04f7 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,5 +1,5 @@ /* - Massively by HTML5 UP + Spectral by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -8,108 +8,19 @@ var $window = $(window), $body = $('body'), - $wrapper = $('#wrapper'), - $header = $('#header'), - $nav = $('#nav'), - $main = $('#main'), - $navPanelToggle, $navPanel, $navPanelInner; + $wrapper = $('#page-wrapper'), + $banner = $('#banner'), + $header = $('#header'); // Breakpoints. breakpoints({ - default: ['1681px', null ], - xlarge: ['1281px', '1680px' ], - large: ['981px', '1280px' ], - medium: ['737px', '980px' ], - small: ['481px', '736px' ], - xsmall: ['361px', '480px' ], - xxsmall: [null, '360px' ] + xlarge: [ '1281px', '1680px' ], + large: [ '981px', '1280px' ], + medium: [ '737px', '980px' ], + small: [ '481px', '736px' ], + xsmall: [ null, '480px' ] }); - /** - * Applies parallax scrolling to an element's background image. - * @return {jQuery} jQuery object. - */ - $.fn._parallax = function(intensity) { - - var $window = $(window), - $this = $(this); - - if (this.length == 0 || intensity === 0) - return $this; - - if (this.length > 1) { - - for (var i=0; i < this.length; i++) - $(this[i])._parallax(intensity); - - return $this; - - } - - if (!intensity) - intensity = 0.25; - - $this.each(function() { - - var $t = $(this), - $bg = $('
').appendTo($t), - on, off; - - on = function() { - - $bg - .removeClass('fixed') - .css('transform', 'matrix(1,0,0,1,0,0)'); - - $window - .on('scroll._parallax', function() { - - var pos = parseInt($window.scrollTop()) - parseInt($t.position().top); - - $bg.css('transform', 'matrix(1,0,0,1,0,' + (pos * intensity) + ')'); - - }); - - }; - - off = function() { - - $bg - .addClass('fixed') - .css('transform', 'none'); - - $window - .off('scroll._parallax'); - - }; - - // Disable parallax on .. - if (browser.name == 'ie' // IE - || browser.name == 'edge' // Edge - || window.devicePixelRatio > 1 // Retina/HiDPI (= poor performance) - || browser.mobile) // Mobile devices - off(); - - // Enable everywhere else. - else { - - breakpoints.on('>large', on); - breakpoints.on('<=large', off); - - } - - }); - - $window - .off('load._parallax resize._parallax') - .on('load._parallax resize._parallax', function() { - $window.trigger('scroll'); - }); - - return $(this); - - }; - // Play initial animations on page load. $window.on('load', function() { window.setTimeout(function() { @@ -117,140 +28,54 @@ }, 100); }); - // Scrolly. - $('.scrolly').scrolly(); - - // Background. - $wrapper._parallax(0.925); - - // Nav Panel. - - // Toggle. - $navPanelToggle = $( - 'Menu' - ) - .appendTo($wrapper); - - // Change toggle styling once we've scrolled past the header. - $header.scrollex({ - bottom: '5vh', - enter: function() { - $navPanelToggle.removeClass('alt'); - }, - leave: function() { - $navPanelToggle.addClass('alt'); - } - }); - - // Panel. - $navPanel = $( - '' - ) - .appendTo($body) - .panel({ - delay: 500, - hideOnClick: true, - hideOnSwipe: true, - resetScroll: true, - resetForms: true, - side: 'right', - target: $body, - visibleClass: 'is-navPanel-visible' - }); - - // Get inner. - $navPanelInner = $navPanel.children('nav'); - - // Move nav content on breakpoint change. - var $navContent = $nav.children(); - - breakpoints.on('>medium', function() { - - // NavPanel -> Nav. - $navContent.appendTo($nav); - - // Flip icon classes. - $nav.find('.icons, .icon') - .removeClass('alt'); - - }); - - breakpoints.on('<=medium', function() { - - // Nav -> NavPanel. - $navContent.appendTo($navPanelInner); + // Mobile? + if (browser.mobile) + $body.addClass('is-mobile'); + else { - // Flip icon classes. - $navPanelInner.find('.icons, .icon') - .addClass('alt'); - - }); - - // Hack: Disable transitions on WP. - if (browser.os == 'wp' - && browser.osVersion < 10) - $navPanel - .css('transition', 'none'); - - // Intro. - var $intro = $('#intro'); - - if ($intro.length > 0) { - - // Hack: Fix flex min-height on IE. - if (browser.name == 'ie') { - $window.on('resize.ie-intro-fix', function() { - - var h = $intro.height(); - - if (h > $window.height()) - $intro.css('height', 'auto'); - else - $intro.css('height', h); - - }).trigger('resize.ie-intro-fix'); - } - - // Hide intro on scroll (> small). - breakpoints.on('>small', function() { + breakpoints.on('>medium', function() { + $body.removeClass('is-mobile'); + }); - $main.unscrollex(); + breakpoints.on('<=medium', function() { + $body.addClass('is-mobile'); + }); - $main.scrollex({ - mode: 'bottom', - top: '25vh', - bottom: '-50vh', - enter: function() { - $intro.addClass('hidden'); - }, - leave: function() { - $intro.removeClass('hidden'); - } - }); + } - }); + // Scrolly. + $('.scrolly') + .scrolly({ + speed: 1500, + offset: $header.outerHeight() + }); - // Hide intro on scroll (<= small). - breakpoints.on('<=small', function() { + // Menu. + $('#menu') + .append('') + .appendTo($body) + .panel({ + delay: 500, + hideOnClick: true, + hideOnSwipe: true, + resetScroll: true, + resetForms: true, + side: 'right', + target: $body, + visibleClass: 'is-menu-visible' + }); - $main.unscrollex(); + // Header. + if ($banner.length > 0 + && $header.hasClass('alt')) { - $main.scrollex({ - mode: 'middle', - top: '15vh', - bottom: '-15vh', - enter: function() { - $intro.addClass('hidden'); - }, - leave: function() { - $intro.removeClass('hidden'); - } - }); + $window.on('resize', function() { $window.trigger('scroll'); }); + $banner.scrollex({ + bottom: $header.outerHeight() + 1, + terminate: function() { $header.removeClass('alt'); }, + enter: function() { $header.addClass('alt'); }, + leave: function() { $header.removeClass('alt'); } }); } diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss index 9347e2c..83b0e14 100644 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,62 +1,119 @@ // Misc. $misc: ( + max-spotlights: 10, + max-features: 10, z-index-base: 10000 ); // Duration. $duration: ( + transitions: 0.2s, menu: 0.5s, - transition: 0.2s + fadein: 3s ); // Size. $size: ( - element-height: 3rem, - element-margin: 2rem, - padding: 2rem, - wrapper: 72rem + element-height: 2.75em, + element-margin: 2em, + letter-spacing: 0.075em, + letter-spacing-alt: 0.225em ); // Font. $font: ( - family: ('Merriweather', Georgia, serif), - family-heading: ('Source Sans Pro', Helvetica, sans-serif), + family: ('Open Sans', Helvetica, sans-serif), family-fixed: ('Courier New', monospace), - weight: 300, + weight: 400, weight-bold: 600, - weight-heading: 900 + weight-extrabold: 800 ); // Palette. $palette: ( - wrapper-bg: #212931, - - bg: #ffffff, - fg: #212931, - fg-bold: #212931, - fg-light: mix(#212931, #ffffff, 50%), - border: mix(#dcdcdc, #ffffff, 50%), - border-bg: rgba(#dcdcdc, 0.25), - accent: #18bfef, - - alt: ( - bg: #f5f5f5, - fg: #717981, - fg-bold: #717981, - fg-light: mix(#717981, #f5f5f5, 50%), - border: mix(#dcdcdc, #f5f5f5, 75%), - border-bg: rgba(#dcdcdc, 0.5), - accent: #18bfef, + bg: #2e3842, + fg: #fff, + fg-bold: #fff, + fg-light: rgba(255,255,255,0.5), + border: #fff, + border-bg: rgba(144,144,144,0.25), + border2: #fff, + border2-bg: rgba(144,144,144,0.5), + + accent1: ( + bg: #21b2a6, + fg-bold: #ffffff, + fg: mix(#21b2a6, #ffffff, 25%), + fg-light: mix(#21b2a6, #ffffff, 40%), + border: rgba(0,0,0,0.125), + border-bg: rgba(255,255,255,0.075), + border2: rgba(0,0,0,0.25), + border2-bg: rgba(255,255,255,0.2) + ), + + accent2: ( + bg: #00ffcc, + fg-bold: #ffffff, + fg: mix(#00ffcc, #ffffff, 25%), + fg-light: mix(#00ffcc, #ffffff, 40%), + border: rgba(0,0,0,0.125), + border-bg: rgba(255,255,255,0.075), + border2: rgba(0,0,0,0.25), + border2-bg: rgba(255,255,255,0.2) + ), + + accent3: ( + bg: #00f0ff, + fg-bold: #ffffff, + fg: mix(#00f0ff, #ffffff, 25%), + fg-light: mix(#00f0ff, #ffffff, 40%), + border: rgba(0,0,0,0.125), + border-bg: rgba(255,255,255,0.075), + border2: rgba(0,0,0,0.25), + border2-bg: rgba(255,255,255,0.2) ), - invert: ( - bg: #1e252d, - bg-alt: #1e252d, - fg: #ffffff, + accent4: ( + bg: #76ddff, fg-bold: #ffffff, - fg-light: rgba(#ffffff, 0.5), - border: #ffffff, - border-bg: rgba(#ffffff,0.075), - accent: #18bfef, + fg: mix(#76ddff, #ffffff, 25%), + fg-light: mix(#76ddff, #ffffff, 40%), + border: rgba(0,0,0,0.125), + border-bg: rgba(255,255,255,0.075), + border2: rgba(0,0,0,0.25), + border2-bg: rgba(255,255,255,0.2) ), + + accent5: ( + bg: #505393, + fg-bold: #ffffff, + fg: mix(#505393, #ffffff, 25%), + fg-light: mix(#505393, #ffffff, 40%), + border: rgba(0,0,0,0.125), + border-bg: rgba(255,255,255,0.075), + border2: rgba(0,0,0,0.25), + border2-bg: rgba(255,255,255,0.2) + ), + + accent6: ( + bg: #ed4933, + fg-bold: #ffffff, + fg: mix(#ed4933, #ffffff, 25%), + fg-light: mix(#ed4933, #ffffff, 40%), + border: rgba(0,0,0,0.125), + border-bg: rgba(255,255,255,0.075), + border2: rgba(0,0,0,0.25), + border2-bg: rgba(255,255,255,0.2) + ), + + accent7: ( + bg: #ffffff, + fg-bold: #2E3842, + fg: #4E4852, + fg-light: #8E8892, + border: #dfdfdf, + border-bg: rgba(0,0,0,0.0375), + border2: #bfbfbf, + border2-bg: rgba(0,0,0,0.1) + ) ); \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 58e1096..ba0ad83 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -4,12 +4,11 @@ @import 'libs/vendor'; @import 'libs/breakpoints'; @import 'libs/html-grid'; -@import 'libs/fixed-grid'; @import 'fontawesome-all.min.css'; -@import url('https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900'); +@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic'); /* - Massively by HTML5 UP + Spectral by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -17,55 +16,1918 @@ // Breakpoints. @include breakpoints(( - default: (1681px, null ), - xlarge: (1281px, 1680px ), - large: (981px, 1280px ), - medium: (737px, 980px ), - small: (481px, 736px ), - xsmall: (361px, 480px ), - xxsmall: (null, 360px ) + xlarge: ( 1281px, 1680px ), + large: ( 981px, 1280px ), + medium: ( 737px, 980px ), + small: ( 481px, 736px ), + xsmall: ( null, 480px ), )); -// Mixins. - - @mixin color($p) { - @include color-typography($p); - @include color-box($p); - @include color-button($p); - @include color-form($p); - @include color-list($p); - @include color-section($p); - @include color-table($p); - @include color-pagination($p); - } - -// Base. - - @import 'base/reset'; - @import 'base/page'; - @import 'base/typography'; - -// Component. - - @import 'components/row'; - @import 'components/box'; - @import 'components/button'; - @import 'components/form'; - @import 'components/icon'; - @import 'components/image'; - @import 'components/actions'; - @import 'components/icons'; - @import 'components/list'; - @import 'components/section'; - @import 'components/table'; - @import 'components/pagination'; - -// Layout. - - @import 'layout/wrapper'; - @import 'layout/intro'; - @import 'layout/header'; - @import 'layout/nav'; - @import 'layout/main'; - @import 'layout/footer'; - @import 'layout/navPanel'; \ No newline at end of file +// Reset. +// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) + + html, body, div, span, applet, object, + iframe, h1, h2, h3, h4, h5, h6, p, blockquote, + pre, a, abbr, acronym, address, big, cite, + code, del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, b, + u, i, center, dl, dt, dd, ol, ul, li, fieldset, + form, label, legend, table, caption, tbody, + tfoot, thead, tr, th, td, article, aside, + canvas, details, embed, figure, figcaption, + footer, header, hgroup, menu, nav, output, ruby, + section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + + body { + line-height: 1; + } + + ol, ul { + list-style:none; + } + + blockquote, q { + quotes: none; + + &:before, + &:after { + content: ''; + content: none; + } + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + body { + -webkit-text-size-adjust: none; + } + + mark { + background-color: transparent; + color: inherit; + } + + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + } + +/* Basic */ + + @-ms-viewport { + width: device-width; + } + + // Set box model to border-box. + // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body { + background: _palette(bg); + + // Stops initial animations until page loads. + &.is-preload { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + } + + } + + body, input, select, textarea { + color: _palette(fg); + font-family: _font(family); + font-size: 15pt; + font-weight: _font(weight); + letter-spacing: _size(letter-spacing); + line-height: 1.65em; + + @include breakpoint('<=xlarge') { + font-size: 13pt; + } + + @include breakpoint('<=large') { + font-size: 12pt; + } + + @include breakpoint('<=small') { + font-size: 11pt; + letter-spacing: _size(letter-spacing) * 0.5; + } + } + + a { + @include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease')); + border-bottom: dotted 1px; + color: inherit; + text-decoration: none; + + &:hover { + border-bottom-color: transparent; + } + } + + strong, b { + color: _palette(fg-bold); + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + } + + h1, h2, h3, h4, h5, h6 { + color: _palette(fg-bold); + font-weight: _font(weight-extrabold); + letter-spacing: _size(letter-spacing-alt); + line-height: 1em; + margin: 0 0 (_size(element-margin) * 0.5) 0; + text-transform: uppercase; + + a { + color: inherit; + text-decoration: none; + } + } + + h2 { + font-size: 1.35em; + line-height: 1.75em; + + @include breakpoint('<=small') { + font-size: 1.1em; + line-height: 1.65em; + } + } + + h3 { + font-size: 1.15em; + line-height: 1.75em; + + @include breakpoint('<=small') { + font-size: 1em; + line-height: 1.65em; + } + } + + h4 { + font-size: 1em; + line-height: 1.5em; + } + + h5 { + font-size: 0.8em; + line-height: 1.5em; + } + + h6 { + font-size: 0.7em; + line-height: 1.5em; + } + + sub { + font-size: 0.8em; + position: relative; + top: 0.5em; + } + + sup { + font-size: 0.8em; + position: relative; + top: -0.5em; + } + + hr { + border: 0; + border-bottom: solid 2px _palette(border); + margin: (_size(element-margin) * 1.5) 0; + + &.major { + margin: (_size(element-margin) * 2.25) 0; + } + } + + blockquote { + border-left: solid 4px _palette(border); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: 0.5em 0 0.5em 2em; + } + + code { + background: _palette(border-bg); + border-radius: 3px; + font-family: _font(family-fixed); + font-size: 0.9em; + letter-spacing: 0; + margin: 0 0.25em; + padding: 0.25em 0.65em; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0 _size(element-margin) 0; + + code { + display: block; + line-height: 1.75em; + padding: 1em 1.5em; + overflow-x: auto; + } + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + +/* Row */ + + .row { + @include html-grid(1.5em); + + @include breakpoint('<=xlarge') { + @include html-grid(1.5em, 'xlarge'); + } + + @include breakpoint('<=large') { + @include html-grid(1.5em, 'large'); + } + + @include breakpoint('<=medium') { + @include html-grid(1.5em, 'medium'); + } + + @include breakpoint('<=small') { + @include html-grid(1.5em, 'small'); + } + + @include breakpoint('<=xsmall') { + @include html-grid(1.5em, 'xsmall'); + } + } + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + p { + color: _palette(fg-light); + position: relative; + top: -0.25em; + } + + h2 + p { + } + + h3 + p { + font-size: 1.1em; + } + + h4 + p, + h5 + p, + h6 + p { + font-size: 0.9em; + } + + &.major { + margin: 0 0 (_size(element-margin) * 1.75) 0; + + h2, h3, h4, h5, h6 { + border-bottom: solid 2px _palette(border); + display: inline-block; + padding-bottom: 1em; + position: relative; + + &:after { + content: ''; + display: block; + height: 1px; + } + } + + p { + color: _palette(fg); + top: 0; + } + + @include breakpoint('<=small') { + margin: 0 0 _size(element-margin) 0; + } + } + + @include breakpoint('<=medium') { + br { + display: none; + } + } + } + +/* Form */ + + form { + margin: 0 0 _size(element-margin) 0; + } + + label { + color: _palette(fg-bold); + display: block; + font-size: 0.9em; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + @include vendor('appearance', 'none'); + background-color: _palette(border-bg); + border-radius: 3px; + border: none; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + + &:focus { + box-shadow: 0 0 0 2px _palette(accent1, bg); + } + } + + select { + background-size: 1.25em; + background-repeat: no-repeat; + background-position: calc(100% - 1em) center; + height: _size(element-height); + padding-right: _size(element-height); + text-overflow: ellipsis; + + &:focus { + &::-ms-value { + background-color: transparent; + } + } + + &::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75em 1em; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + + & + label { + @include icon(false, solid); + color: _palette(fg); + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: _font(weight); + padding-left: (_size(element-height) * 0.6) + 0.75em; + padding-right: 0.75em; + position: relative; + + &:before { + background: _palette(border-bg); + border-radius: 3px; + content: ''; + display: inline-block; + font-size: 0.8em; + height: (_size(element-height) * 0.75); + left: 0; + line-height: (_size(element-height) * 0.75); + position: absolute; + text-align: center; + top: 0; + width: (_size(element-height) * 0.75); + } + } + + &:checked + label { + &:before { + background: _palette(bg); + color: _palette(fg-bold); + content: '\f00c'; + } + } + + &:focus + label { + &:before { + box-shadow: 0 0 0 2px _palette(accent1, bg); + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: 3px; + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-webkit-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + ::-moz-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + + :-ms-input-placeholder { + color: _palette(fg-light) !important; + opacity: 1.0; + } + +/* Box */ + + .box { + border-radius: 3px; + border: solid 2px _palette(border); + margin-bottom: _size(element-margin); + padding: 1.5em; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + } + +/* Icon */ + + .icon { + @include icon; + border-bottom: none; + position: relative; + + > .label { + display: none; + } + + &:before{ + line-height: inherit; + } + + &.solid { + &:before { + font-weight: 900; + } + } + + &.brands { + &:before { + font-family: 'Font Awesome 5 Brands'; + } + } + + &.major { + @include vendor('transform', 'rotate(-45deg)'); + border-radius: 3px; + border: solid 2px _palette(border); + display: inline-block; + font-size: 1.35em; + height: calc(3em + 2px); + line-height: 3em; + text-align: center; + width: calc(3em + 2px); + + &:before { + @include vendor('transform', 'rotate(45deg)'); + display: inline-block; + font-size: 1.5em; + } + + @include breakpoint('<=small') { + font-size: 1em; + } + } + + &.style1 { + color: _palette(accent2, bg); + } + + &.style2 { + color: _palette(accent3, bg); + } + + &.style3 { + color: _palette(accent4, bg); + } + } + +/* Image */ + + .image { + border-radius: 3px; + border: 0; + display: inline-block; + position: relative; + + img { + border-radius: 3px; + display: block; + } + + &.left { + float: left; + margin: 0 2em 2em 0; + top: 0.25em; + } + + &.right { + float: right; + margin: 0 0 2em 2em; + top: 0.25em; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + } + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25em; + + li { + padding-left: 0.25em; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1em; + + li { + padding-left: 0.5em; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid 1px _palette(border); + padding: 0.5em 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + } + +/* Actions */ + + ul.actions { + @include vendor('display', 'flex'); + cursor: default; + list-style: none; + margin-left: (_size(element-margin) * -0.5); + padding-left: 0; + + li { + padding: 0 0 0 (_size(element-margin) * 0.5); + vertical-align: middle; + } + + &.special { + @include vendor('justify-content', 'center'); + width: 100%; + margin-left: 0; + + li { + &:first-child { + padding-left: 0; + } + } + } + + &.stacked { + @include vendor('flex-direction', 'column'); + margin-left: 0; + + li { + padding: (_size(element-margin) * 0.5) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + + &.fit { + width: calc(100% + #{_size(element-margin) * 0.5}); + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 100%; + + > * { + width: 100%; + } + } + + &.stacked { + width: 100%; + } + } + + @include breakpoint('<=xsmall') { + &:not(.fixed) { + @include vendor('flex-direction', 'column'); + margin-left: 0; + width: 100% !important; + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + padding: (_size(element-margin) * 0.5) 0 0 0; + text-align: center; + width: 100%; + + > * { + width: 100%; + } + + &:first-child { + padding-top: 0; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + width: 100%; + + &.icon { + &:before { + margin-left: -0.5em; + } + } + } + } + } + } + } + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1em 0 0; + + &:last-child { + padding-right: 0 !important; + } + } + + &.major { + padding: 1em 0; + + li { + padding-right: 3.5em; + + @include breakpoint('<=small') { + padding: 0 1em !important; + } + } + } + } + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid 1px _palette(border); + border-left: 0; + border-right: 0; + + &:nth-child(2n + 1) { + background-color: _palette(border-bg); + } + } + } + + td { + padding: 0.75em 0.75em; + } + + th { + color: _palette(fg-bold); + font-size: 0.9em; + font-weight: _font(weight-bold); + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + thead { + border-bottom: solid 2px _palette(border); + } + + tfoot { + border-top: solid 2px _palette(border); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid 1px _palette(border); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: 1px; + } + } + + &:first-child { + td { + border-top-width: 1px; + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out')); + background-color: transparent; + border-radius: 3px; + border: 0; + box-shadow: inset 0 0 0 2px _palette(border); + color: _palette(fg-bold); + cursor: pointer; + display: inline-block; + font-size: 0.8em; + font-weight: _font(weight-bold); + height: 3.125em; + letter-spacing: _size(letter-spacing-alt); + line-height: 3.125em; + max-width: 30em; + padding: 0 2.75em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &:hover { + background-color: _palette(border-bg); + } + + &:active { + background-color: _palette(border2-bg); + } + + &.icon { + &:before { + margin-right: 0.5em; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.8em; + } + + &.large { + font-size: 1.35em; + } + + &.primary { + background-color: _palette(accent6, bg); + box-shadow: none !important; + color: _palette(accent6, fg-bold) !important; + + &:hover { + background-color: lighten(_palette(accent6, bg), 5) !important; + } + + &:active { + background-color: darken(_palette(accent6, bg), 5) !important; + } + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + opacity: 0.25; + } + + @include breakpoint('<=small') { + height: 3.75em; + line-height: 3.75em; + } + } + +/* Features */ + + .features { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('justify-content', 'center'); + list-style: none; + padding: 0; + width: 100%; + + li { + @include padding(4em, 4em, (0,0,0,2em)); + display: block; + position: relative; + text-align: left; + width: 50%; + + @for $i from 1 through _misc(max-features) { + $j: 0.035 * $i; + + &:nth-child(#{$i}) { + background-color: rgba(0,0,0, $j); + } + } + + &:before { + display: block; + color: _palette(accent2, bg); + position: absolute; + left: 1.75em; + top: 2.75em; + font-size: 1.5em; + } + + &:nth-child(1) { + border-top-left-radius: 3px; + } + + &:nth-child(2) { + border-top-right-radius: 3px; + } + + &:nth-last-child(1) { + border-bottom-right-radius: 3px; + } + + &:nth-last-child(2) { + border-bottom-left-radius: 3px; + } + + @include breakpoint('<=medium') { + @include padding(3em, 2em); + text-align: center; + + &:before { + left: 0; + margin: 0 0 (_size(element-margin) * 0.5) 0; + position: relative; + top: 0; + } + } + + @include breakpoint('<=small') { + @include padding(3em, 0); + background-color: transparent !important; + border-top: solid 2px _palette(border); + width: 100%; + + &:first-child { + border-top: 0; + } + } + } + } + +/* Spotlight */ + + .spotlight { + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + + .image { + @include vendor('order', '1'); + border-radius: 0; + width: 40%; + + img { + border-radius: 0; + width: 100%; + } + } + + .content { + @include padding(2em, 4em); + @include vendor('order', '2'); + max-width: 48em; + width: 60%; + } + + &:nth-child(2n) { + @include vendor('flex-direction', 'row-reverse'); + } + + @for $i from 1 through _misc(max-spotlights) { + $j: 0.075 * $i; + + &:nth-child(#{$i}) { + background-color: rgba(0,0,0, $j); + } + } + + @include breakpoint('<=large') { + .image { + width: 45%; + } + + .content { + width: 55%; + } + } + + @include breakpoint('<=medium') { + display: block; + + br { + display: none; + } + + .image { + width: 100%; + } + + .content { + @include padding(4em, 3em); + max-width: none; + text-align: center; + width: 100%; + } + } + + @include breakpoint('<=small') { + .content { + @include padding(3em, 2em); + } + } + } + +/* Wrapper */ + + @mixin wrapper($p) { + background-color: _palette($p, bg); + color: _palette($p, fg); + + // Basic + + strong, b { + color: _palette($p, fg-bold); + } + + h2, h3, h4, h5, h6 { + color: _palette($p, fg-bold); + } + + hr { + border-color: _palette($p, border); + } + + blockquote { + border-color: _palette($p, border); + } + + code { + background: _palette($p, border-bg); + } + + // Section/Article + + header { + p { + color: _palette($p, fg-light); + } + + &.major { + h2, h3, h4, h5, h6 { + border-color: _palette($p, border); + } + + p { + color: _palette($p, fg); + } + } + } + + // Form + + label { + color: _palette($p, fg-bold); + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + background-color: _palette($p, border-bg); + } + + select { + background-image: svg-url(""); + + option { + color: _palette($p, fg-bold); + background: _palette($p, bg); + } + } + + input[type="checkbox"], + input[type="radio"], { + & + label { + color: _palette($p, fg); + + &:before { + background: _palette($p, border-bg); + } + } + + &:checked + label { + &:before { + background: _palette($p, fg-bold); + color: _palette($p, bg); + } + } + } + + ::-webkit-input-placeholder { + color: _palette($p, fg-light) !important; + } + + :-moz-placeholder { + color: _palette($p, fg-light) !important; + } + + ::-moz-placeholder { + color: _palette($p, fg-light) !important; + } + + :-ms-input-placeholder { + color: _palette($p, fg-light) !important; + } + + .formerize-placeholder { + color: _palette($p, fg-light) !important; + } + + // Icon + + .icon { + &.major { + border-color: _palette($p, border); + } + } + + // List + + ul { + &.alt { + li { + border-color: _palette($p, border); + } + } + } + + // Table + + table { + tbody { + tr { + border-color: _palette($p, border); + + &:nth-child(2n + 1) { + background-color: _palette($p, border-bg); + } + } + } + + th { + color: _palette($p, fg-bold); + } + + thead { + border-color: _palette($p, border); + } + + tfoot { + border-color: _palette($p, border); + } + + &.alt { + tbody { + tr { + td { + border-color: _palette($p, border); + } + } + } + } + } + + // Button + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + box-shadow: inset 0 0 0 2px _palette($p, border); + color: _palette($p, fg-bold); + + &:hover { + background-color: _palette($p, border-bg); + } + + &:active { + background-color: _palette($p, border2-bg); + } + } + + // Features + + .features { + li { + @include breakpoint('<=small') { + border-top-color: _palette($p, border); + } + } + } + + } + + .wrapper { + @include padding(6em, 0); + + > .inner { + width: 60em; + margin: 0 auto; + + @include breakpoint('<=large') { + width: 90%; + } + + @include breakpoint('<=medium') { + width: 100%; + } + } + + &.alt { + padding: 0; + } + + &.style1 { + @include wrapper(accent1); + } + + &.style2 { + background-color: _palette(bg); + } + + &.style3 { + @include wrapper(accent5); + } + + &.style4 { + background-color: transparent; + } + + &.style5 { + @include wrapper(accent7); + } + + @include breakpoint('<=medium') { + @include padding(4em, 3em); + } + + @include breakpoint('<=small') { + @include padding(3em, 2em); + } + } + +/* Page Wrapper + Menu */ + + #page-wrapper { + @include vendor('transition', 'opacity #{_duration(menu)} ease'); + opacity: 1; + padding-top: 3em; + + &:before { + background: rgba(0,0,0,0); + content: ''; + display: block; + display: none; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: _misc(z-index-base) + 1; + } + } + + #menu { + @include vendor('transform', 'translateX(20em)'); + @include vendor('transition', 'transform #{_duration(menu)} ease'); + -webkit-overflow-scrolling: touch; + background: _palette(accent1, bg); + color: _palette(accent1, fg-bold); + height: 100%; + max-width: 80%; + overflow-y: auto; + padding: 3em 2em; + position: fixed; + right: 0; + top: 0; + width: 20em; + z-index: _misc(z-index-base) + 2; + + ul { + list-style: none; + padding: 0; + + > li { + border-top: solid 1px _palette(accent1, border); + margin: 0.5em 0 0 0; + padding: 0.5em 0 0 0; + + &:first-child { + border-top: 0 !important; + margin-top: 0 !important; + padding-top: 0 !important; + } + + > a { + border: 0; + color: inherit; + display: block; + font-size: 0.8em; + letter-spacing: _size(letter-spacing-alt); + outline: 0; + text-decoration: none; + text-transform: uppercase; + + @include breakpoint('<=small') { + line-height: 3em; + } + } + } + } + + .close { + background-image: url('images/close.svg'); + background-position: 4.85em 1em; + background-repeat: no-repeat; + border: 0; + cursor: pointer; + display: block; + height: 3em; + position: absolute; + right: 0; + top: 0; + vertical-align: middle; + width: 7em; + } + + @include breakpoint('<=small') { + padding: 3em 1.5em; + } + } + + body.is-menu-visible { + #page-wrapper { + opacity: 0.35; + + &:before { + display: block; + } + } + + #menu { + @include vendor('transform', 'translateX(0)'); + } + } + +/* Header */ + + #header { + @include vendor('transition', 'background-color #{_duration(transitions)} ease'); + background: _palette(bg); + height: 3em; + left: 0; + line-height: 3em; + position: fixed; + top: 0; + width: 100%; + z-index: _misc(z-index-base); + + h1 { + @include vendor('transition', 'opacity #{_duration(transitions)} ease'); + height: inherit; + left: 1.25em; + line-height: inherit; + position: absolute; + top: 0; + + a { + border: 0; + display: block; + height: inherit; + line-height: inherit; + + @include breakpoint('<=small') { + font-size: 0.8em; + } + } + } + + nav { + height: inherit; + line-height: inherit; + position: absolute; + right: 0; + top: 0; + + > ul { + list-style: none; + margin: 0; + padding: 0; + white-space: nowrap; + + > li { + display: inline-block; + padding: 0; + + > a { + border: 0; + color: _palette(fg-bold); + display: block; + font-size: 0.8em; + letter-spacing: _size(letter-spacing-alt); + padding: 0 1.5em; + text-transform: uppercase; + + &.menuToggle { + outline: 0; + position: relative; + + &:after { + background-image: url('images/bars.svg'); + background-position: right center; + background-repeat: no-repeat; + content: ''; + display: inline-block; + height: 3.75em; + vertical-align: top; + width: 2em; + } + + @include breakpoint('<=small') { + padding: 0 1.5em; + + span { + display: none; + } + } + } + + @include breakpoint('<=small') { + padding: 0 0 0 1.5em; + } + } + + &:first-child { + margin-left: 0; + } + } + } + } + + &.alt { + background: transparent; + + h1 { + @include vendor('pointer-events', 'none'); + opacity: 0; + } + } + } + +/* Banner */ + + #banner { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + cursor: default; + height: 100vh; + min-height: 35em; + overflow: hidden; + position: relative; + text-align: center; + + h2 { + @include vendor('transform', 'scale(1)'); + @include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease')); + display: inline-block; + font-size: 1.75em; + opacity: 1; + padding: 0.35em 1em; + position: relative; + z-index: 1; + + &:before, &:after { + @include vendor('transition', 'width 0.85s ease'); + @include vendor('transition-delay', '0.25s'); + background: _palette(fg-bold); + content: ''; + display: block; + height: 2px; + position: absolute; + width: 100%; + } + + &:before { + top: 0; + left: 0; + } + + &:after { + bottom: 0; + right: 0; + } + } + + p { + letter-spacing: _size(letter-spacing-alt); + text-transform: uppercase; + + a { + color: inherit; + } + } + + .more { + @include vendor('transition', ('transform 0.75s ease', 'opacity 0.75s ease')); + @include vendor('transition-delay', '3.5s'); + @include vendor('transform', 'translateY(0)'); + border: none; + bottom: 0; + color: inherit; + font-size: 0.8em; + height: 8.5em; + left: 50%; + letter-spacing: _size(letter-spacing-alt); + margin-left: -8.5em; + opacity: 1; + outline: 0; + padding-left: _size(letter-spacing-alt); + position: absolute; + text-align: center; + text-transform: uppercase; + width: 16em; + z-index: 1; + + &:after { + background-image: url('images/arrow.svg'); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + bottom: 4em; + content: ''; + display: block; + height: 1.5em; + left: 50%; + margin: 0 0 0 -0.75em; + position: absolute; + width: 1.5em; + } + } + + &:after { + @include vendor('pointer-events', 'none'); + @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out'); + @include vendor('transition-delay', '1.25s'); + content: ''; + background: _palette(bg); + display: block; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + opacity: 0; + } + + @include breakpoint('<=small') { + @include padding(7em, 3em); + height: auto; + min-height: 0; + + h2 { + font-size: 1.25em; + } + + br { + display: none; + } + + .more { + display: none; + } + } + } + + body.is-preload { + #banner { + h2 { + @include vendor('transform', 'scale(0.95)'); + opacity: 0; + + &:before, &:after { + width: 0; + } + } + + .more { + @include vendor('transform', 'translateY(8.5em)'); + opacity: 0; + } + + &:after { + opacity: 1; + } + } + } + +/* CTA */ + + #cta { + .inner { + @include vendor('display', 'flex'); + max-width: 45em; + + header { + @include vendor('order', '1'); + padding-right: 3em; + width: 70%; + + p { + color: inherit; + } + } + + .actions { + @include vendor('order', '2'); + width: 30%; + } + + @include breakpoint('<=medium') { + display: block; + text-align: center; + + header { + padding-right: 0; + width: 100%; + } + + .actions { + margin-left: auto; + margin-right: auto; + max-width: 20em; + width: 100%; + } + } + + @include breakpoint('<=small') { + .actions { + max-width: none; + } + } + } + } + +/* Main */ + + #main { + > header { + @include padding(12em, 0); + @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")')); + background-attachment: fixed; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + text-align: center; + + h2 { + font-size: 1.75em; + margin: 0 0 (_size(element-margin) * 0.25) 0; + } + + p { + color: inherit; + letter-spacing: _size(letter-spacing-alt); + text-transform: uppercase; + top: 0; + + a { + color: inherit; + } + } + + @include breakpoint('<=xlarge') { + @include padding(10em, 0); + } + + @include breakpoint('<=large') { + @include padding(8em, 3em); + } + + @include breakpoint('<=medium') { + @include padding(10em, 3em); + } + + @include breakpoint('<=small') { + @include padding(5em, 3em); + + h2 { + font-size: 1.25em; + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + } + } + } + + body.is-mobile { + #main { + > header { + background-attachment: scroll; + } + } + } + +/* Footer */ + + #footer { + @include padding(6em, 0); + background-color: darken(_palette(bg), 8); + text-align: center; + + .icons { + font-size: 1.25em; + + a { + color: _palette(fg-light); + + &:hover { + color: _palette(fg); + } + } + } + + .copyright { + color: _palette(fg-light); + font-size: 0.8em; + letter-spacing: _size(letter-spacing-alt); + list-style: none; + padding: 0; + text-transform: uppercase; + + li { + border-left: solid 1px _palette(fg-light); + display: inline-block; + line-height: 1em; + margin-left: 1em; + padding-left: 1em; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + a { + color: inherit; + + &:hover { + color: _palette(fg); + } + } + + @include breakpoint('<=xsmall') { + border: 0; + display: block; + line-height: 1.65em; + margin: 0; + padding: 0.5em 0; + } + } + } + + @include breakpoint('<=medium') { + @include padding(4em, 3em); + } + + @include breakpoint('<=small') { + @include padding(3em, 2em); + } + } + +/* Landing */ + + body.landing { + #page-wrapper { + @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")')); + background-attachment: fixed; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + padding-top: 0; + } + + #footer { + background-color: darken(transparentize(_palette(bg), 0.1), 8); + } + } + + body.is-mobile { + &.landing { + #page-wrapper { + background: none; + } + + #banner, + .wrapper.style4 { + @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")')); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + } + + #footer { + background-color: darken(_palette(bg), 8); + } + } + } diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss index 90ce257..770de19 100644 --- a/assets/sass/noscript.scss +++ b/assets/sass/noscript.scss @@ -4,43 +4,33 @@ @import 'libs/vendor'; @import 'libs/breakpoints'; @import 'libs/html-grid'; -@import 'libs/fixed-grid'; -@import 'font-awesome.min.css'; /* - Massively by HTML5 UP + Spectral by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ -/* Wrapper */ +/* Banner */ - #wrapper { - background-color: _palette(wrapper-bg); - background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('../../images/bg.jpg'); - background-size: auto, auto, 100% auto; - background-position: center, center, top center; - background-repeat: repeat, no-repeat, no-repeat; - background-attachment: fixed, fixed, fixed; + body.is-preload { + #banner { + h2 { + @include vendor('transform', 'none'); + opacity: 1; - &.fade-in { - &:before { - display: none; + &:before, &:after { + width: 100%; + } } - } - } - -/* Intro */ - #intro { - body.is-preload & { - opacity: 1; + .more { + @include vendor('transform', 'none'); + opacity: 1; + } - &:not(.hidden) { - & + #header + #nav { - @include vendor('transform', 'none'); - opacity: 1; - } + &:after { + opacity: 0; } } } \ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..cdb93da --- /dev/null +++ b/blog.html @@ -0,0 +1,267 @@ + + + + + Blog — Ameen Ahsen + + + + + + + + + +
+ + + + + + +
+
+

Blog

+

Thoughts on physics, space, mathematics & beyond

+
+ + +
+
+ +

Latest Posts

+

A growing collection of articles on topics I find fascinating — from stellar evolution to + mathematical curiosities. New posts added as ideas take shape.

+ +
+ + +
+ + +
+ Star Formation +
+
+ Astronomy + Astrophysics +
+

Jun 13, 2023  ·  2 min read

+

+ The Formation and Evolution of Stars: A Celestial Journey +

+

+ Stars hold within them a fascinating tale of birth, life, and eventual demise. + From molecular cloud to supernova — a journey through stellar physics. +

+ Read Article → +
+
+ + +
+ Coming soon +
+
+ Mathematics +
+

Coming soon  ·  — min read

+

+ [Next post title goes here] +

+

+ A placeholder card. Replace this entire <article class="blog-card"> block + with your next article's details and link. +

+ Coming soon +
+
+ + +
+ Coming soon +
+
+ Physics +
+

Coming soon  ·  — min read

+

+ [Next post title goes here] +

+

+ Another placeholder. Each new blog post you write gets its own HTML file, + and a new card added here pointing to it. +

+ Coming soon +
+
+ +
+ +
+ + + + +
+
+
+ + + + +
+ + + + + + + + + + + + diff --git a/elements.html b/elements.html index 6c6b54c..a62736a 100644 --- a/elements.html +++ b/elements.html @@ -1,200 +1,214 @@ - Elements Reference - Massively by HTML5 UP + About-Ameen Ahsen - +

This is bold and this is strong. This is italic and this is emphasized. + This is superscript text and this is subscript text. + This is - -

+ +
- - - -
- - -
-
-

Elements
- Reference

-
+
+
+

About Me

+

I'm Ameen Ahsen Bin Sathar

+
+
+
+ +
+
+

⟹

+
+

I am a third-year Physics major with a minor in Mathematics from one of the leading science institute, Indian Institute of Science Education and Research, Thiruvananthapuram (IISER TVM).

+
- -

Text

-

This is bold and this is strong. This is italic and this is emphasized. + +

+

Curriculum Vitae

+ + + + + + + +
+ Open in new tab + Open CV in new tab + + + + + Optional: link to a plain HTML CV if you prefer + View HTML CV +
+
+ + +
Scribbles
+
It's ultimately mesmerizing how ideas make life prettier and at the same time terrible (2021)
+
Most of the innocent souls are unable to notice the minute turners in their life which actually affect their time-to-time events and becomes their fate (2021)
+
Do you know how the world runs for everyone? Well , it takes timed memories to witness that it just flows as of an ultra-streamline current soothing yourself and absorbs, adsorps, dissolves and exorbs elements in you which in turn expressed, express and will express you in your flow (2022)
+ +
+
+ + + +
+

⟹

+ +
+

I am a third-year Physics major with a minor in Mathematics from one of the leading science institute, Indian Institute of Science Education and Research, Thiruvananthapuram (IISER TVM).

+
-

Heading Level 2

+ +
Scribbles
+
It's ultimately mesmerizing how ideas make life prettier and at the same time terrible (2021)
+
Most of the innocent souls are unable to notice the minute turners in their life which actually affect their time-to-time events and becomes their fate (2021)
+
Do you know how the world runs for everyone? Well , it takes timed memories to witness that it just flows as of an ultra-streamline current soothing yourself and absorbs, adsorps, dissolves and exorbs elements in you which in turn expressed, express and will express you in your flow (2022)
+ -

Lists

-
-
+print 'It took ' + i + ' iterations to sort the deck.'; --> +
-

Unordered

+ -

Blockquote

-
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.
- -
- - -

Table

- -

Default

+
+ --> +
+

Education

+
@@ -206,27 +220,27 @@

Default

- + - + - + - + - + @@ -239,8 +253,8 @@

Default

Item 1Item One Ante turpis integer aliquet porttitor. 29.99
Item 2Item Two Vis ac commodo adipiscing arcu aliquet. 19.99
Item 3Item Three Morbi faucibus arcu accumsan lorem. 29.99
Item 4Item Four Vitae integer tempus condimentum. 19.99
Item 5Item Five Ante turpis integer aliquet porttitor. 29.99
- -

Alternate

+ -

Buttons

+
+

Buttons

    -
  • Primary
    • -
  • Default
    • +
  • Disabled
    • +
  • Disabled
+
-
- - -

Form

- +
+

Form

@@ -329,7 +342,6 @@

Form

-
-
@@ -352,20 +363,17 @@

Form

-
- +
-
-
    • @@ -374,115 +382,48 @@

    Form

+
--> -
- - -

Image

- -

Fit

- +
+ -
-
-
-
-
+
+
+
+
-
- -

Left & Right

-

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.

-

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.

- -
- - -

Box

-
-

Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor.

-
+
--> +
Left & Right
+

Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.

+

Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.

+ -
- - -

Preformatted

- 
i = 0;
-
-while (!deck.isInOrder()) {
-    print 'Iteration ' + i;
-    deck.shuffle();
-    i++;
-}
-
-print 'It took ' + i + ' iterations to sort the deck.';
-
- - - - + + + - - - @@ -495,4 +436,11 @@

Social

- \ No newline at end of file + + + + + + + + diff --git a/generic.html b/generic.html index d1b899c..e7b13ca 100644 --- a/generic.html +++ b/generic.html @@ -1,126 +1,291 @@ - Generic Page - Massively by HTML5 UP + The Formation and Evolution of Stars — Ameen Ahsen + - -
- - - - - - - - -
- - -
-
- April 25, 2017 -

This is a
- Generic Page

-

Aenean ornare velit lacus varius enim ullamcorper proin aliquam
- facilisis ante sed etiam magna interdum congue. Lorem ipsum dolor
- amet nullam sed etiam veroeros.

-
-
-

Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien risus, commodo eget turpis at, elementum convallis enim turpis, lorem ipsum dolor sit amet nullam.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus. Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum.

-
- -
+ +
- - +
+ + + + + + +
+
+ +

The Formation and Evolution of Stars

+

A Celestial Journey through stellar birth, life, and death

+
+ + +
+
+ + + ← Back to Blog + + +
+ Astronomy + Astrophysics + Star Formation +
+

Jun 13, 2023  ·  2 min read  ·  Ameen Ahsen

+ + + Stellar nursery — a vast cloud of gas and dust where new stars are born + + + + +

Stars, those captivating beacons of light, hold within them a fascinating tale of birth, + life, and eventual demise. Here we delve into the awe-inspiring process of star formation + and evolution — an astronomical adventure like no other.

+ +

Birth of a Star: A Stellar Nursery

+

Deep within vast interstellar clouds of gas and dust, the magic of star formation begins. + These colossal stellar nurseries, often called molecular clouds, are the birthplaces + of new stars. Gravity — the cosmic sculptor — pulls together gas and dust particles, causing + them to collapse under their own weight. As the cloud contracts, it fragments into smaller + clumps, forming dense cores that become the stellar embryos of future stars.

+ +

Protostar: The Infant Luminary

+

From the dense core emerges a protostar — a young celestial object in its + infancy. This stellar embryo is enveloped in a cocoon of gas and dust, obscuring its + brilliance from our view. As the protostar continues to gather matter, it heats up, igniting + the nuclear fusion process at its core. With each fusion reaction, the protostar grows + stronger, gradually shedding its cocoon and revealing its luminous nature to the universe.

+ +
+ "The protostar's journey from obscurity to brilliance mirrors something deeply human — + the idea that the most luminous futures can begin in the most hidden of places." +
+ +

Main Sequence: The Radiant Prime of Life

+

The main sequence is the phase where the vast majority of stars spend most of + their lives. As a star settles into this stable state, a delicate balance is struck between + the inward pull of gravity and the outward pressure of nuclear fusion occurring in its core. + This equilibrium allows stars to shine brightly and steadfastly for billions of years, + radiating energy into the cosmos.

+ +

Stellar Evolution: Diversity in the Celestial Family

+

Just as no two humans are alike, stars come in a dazzling array of sizes, colours, and + lifetimes. Stellar evolution is a grand showcase of this cosmic diversity. Stars range from + dim, cool red dwarfs to massive, scorching blue giants. Their lifespans vary from millions + to billions of years — some burning out quickly in spectacular supernova explosions, others + quietly fading away.

+ +

The Fate of Stars: Going Out with a Bang or a Whimper

+

In the grand cosmic tapestry, stars too have their final acts. The outcome depends almost + entirely on initial mass. Lower-mass stars like our Sun undergo a graceful transformation — + shedding their outer layers to form colourful planetary nebulae, while the remaining core + collapses into a white dwarf: an eternal ember of their former brilliance.

+ +

Massive stars, on the other hand, put on a dazzling final show. In a cataclysmic display, + these giants explode as a supernova, scattering heavy elements forged in their cores + across the cosmos. Some supernovae give birth to neutron stars or black holes + — mysterious remnants that continue to captivate physicists and astronomers alike.

+ + +
+ + +

More Posts

+
+ + + Related post +
Coming soon: [Next post title]
+ + + + Related post +
Coming soon: [Next post title]
+ + +
+ +
+ ← Back to all posts - - +
+
+ + + -
+ - - - - - - - - + + + + + + + + - \ No newline at end of file + diff --git a/images/Ameen.JPG b/images/Ameen.JPG new file mode 100644 index 0000000..5015541 Binary files /dev/null and b/images/Ameen.JPG differ diff --git a/images/banner.jpg b/images/banner.jpg new file mode 100644 index 0000000..d5423e2 Binary files /dev/null and b/images/banner.jpg differ diff --git a/images/nasaimage.jpg b/images/nasaimage.jpg new file mode 100644 index 0000000..83dd631 Binary files /dev/null and b/images/nasaimage.jpg differ diff --git a/images/pic01.jpg b/images/pic01.jpg index b8c5e1e..a14ad04 100644 Binary files a/images/pic01.jpg and b/images/pic01.jpg differ diff --git a/images/pic02.jpg b/images/pic02.jpg index fe3be4f..57a2a83 100644 Binary files a/images/pic02.jpg and b/images/pic02.jpg differ diff --git a/images/pic03.jpg b/images/pic03.jpg index 282e4f5..cab2c29 100644 Binary files a/images/pic03.jpg and b/images/pic03.jpg differ diff --git a/images/pic04.jpg b/images/pic04.jpg index b0206cb..86b93fc 100644 Binary files a/images/pic04.jpg and b/images/pic04.jpg differ diff --git a/images/pic05.jpg b/images/pic05.jpg index 3731316..f2fc227 100644 Binary files a/images/pic05.jpg and b/images/pic05.jpg differ diff --git a/index.html b/index.html index b86c737..b860488 100644 --- a/index.html +++ b/index.html @@ -1,222 +1,258 @@ - Massively by HTML5 UP + Ameen Ahsen Bin Sathar - + - -
- - -
-

Ameen Ahsen
- Bin Sathar

-

A kidilan chengay - - and hehehe Creative Commons license.

- -
+ +
-
+ +
+
+
+ + +
+ +
+
+ + + +
+ +
+
+

Location

+ +
+
+ +
+
+
+
+ @@ -228,3 +264,5 @@

Social

+ + diff --git a/landing.html b/landing.html new file mode 100644 index 0000000..152aeef --- /dev/null +++ b/landing.html @@ -0,0 +1,221 @@ + + + + + Landing - Forty by HTML5 UP + + + + + + + + +
+ + + + + + + + + + + + + +
+ + +
+
+
+

Sed amet aliquam

+
+

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna.

+
+
+ + +
+
+ + + +
+
+
+

Orci maecenas

+
+

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa sed magna lacinia magna pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis tempus.

+ +
+
+
+
+ + + +
+
+
+

Rhoncus magna

+
+

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa sed magna lacinia magna pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis tempus.

+ +
+
+
+
+ + + +
+
+
+

Sed nunc ligula

+
+

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa sed magna lacinia magna pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis tempus.

+ +
+
+
+
+ + +
+
+
+

Massa libero

+
+

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet pharetra et feugiat tempus.

+ +
+
+ +
+ + +
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
    +
    • +
    • +
+
+
+
+
+
+ +

Email

+ information@untitled.tld +
+
+
+
+ +

Phone

+ (000) 000-0000 x12387 +
+
+
+
+ +

Address

+ 1234 Somewhere Road #5432
+ Nashville, TN 00000
+ United States of America +
+
+
+
+
+ + + + +
+ + + + + + + + + + + + \ No newline at end of file