commit 19861f376f0ddc4f2c67f8a6313605f99da5e6ef Author: bobmaster <32976627+hibobmaster@users.noreply.github.com> Date: Mon Jan 22 21:43:48 2024 +0800 Release the project diff --git a/android-icon-144x144.png b/android-icon-144x144.png new file mode 100644 index 0000000..6f01571 Binary files /dev/null and b/android-icon-144x144.png differ diff --git a/android-icon-192x192.png b/android-icon-192x192.png new file mode 100644 index 0000000..e726d55 Binary files /dev/null and b/android-icon-192x192.png differ diff --git a/android-icon-36x36.png b/android-icon-36x36.png new file mode 100644 index 0000000..8241ac2 Binary files /dev/null and b/android-icon-36x36.png differ diff --git a/android-icon-48x48.png b/android-icon-48x48.png new file mode 100644 index 0000000..efc97fa Binary files /dev/null and b/android-icon-48x48.png differ diff --git a/android-icon-72x72.png b/android-icon-72x72.png new file mode 100644 index 0000000..a725dea Binary files /dev/null and b/android-icon-72x72.png differ diff --git a/android-icon-96x96.png b/android-icon-96x96.png new file mode 100644 index 0000000..64b6df8 Binary files /dev/null and b/android-icon-96x96.png differ diff --git a/apple-icon-114x114.png b/apple-icon-114x114.png new file mode 100644 index 0000000..1a5e31b Binary files /dev/null and b/apple-icon-114x114.png differ diff --git a/apple-icon-120x120.png b/apple-icon-120x120.png new file mode 100644 index 0000000..0d2094c Binary files /dev/null and b/apple-icon-120x120.png differ diff --git a/apple-icon-144x144.png b/apple-icon-144x144.png new file mode 100644 index 0000000..6f01571 Binary files /dev/null and b/apple-icon-144x144.png differ diff --git a/apple-icon-152x152.png b/apple-icon-152x152.png new file mode 100644 index 0000000..d08974b Binary files /dev/null and b/apple-icon-152x152.png differ diff --git a/apple-icon-180x180.png b/apple-icon-180x180.png new file mode 100644 index 0000000..9274970 Binary files /dev/null and b/apple-icon-180x180.png differ diff --git a/apple-icon-57x57.png b/apple-icon-57x57.png new file mode 100644 index 0000000..3f2b14d Binary files /dev/null and b/apple-icon-57x57.png differ diff --git a/apple-icon-60x60.png b/apple-icon-60x60.png new file mode 100644 index 0000000..e1686e5 Binary files /dev/null and b/apple-icon-60x60.png differ diff --git a/apple-icon-72x72.png b/apple-icon-72x72.png new file mode 100644 index 0000000..a725dea Binary files /dev/null and b/apple-icon-72x72.png differ diff --git a/apple-icon-76x76.png b/apple-icon-76x76.png new file mode 100644 index 0000000..11d46f8 Binary files /dev/null and b/apple-icon-76x76.png differ diff --git a/apple-icon-precomposed.png b/apple-icon-precomposed.png new file mode 100644 index 0000000..c901722 Binary files /dev/null and b/apple-icon-precomposed.png differ diff --git a/apple-icon.png b/apple-icon.png new file mode 100644 index 0000000..c901722 Binary files /dev/null and b/apple-icon.png differ diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..9f43b19 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,8608 @@ +/* + Story by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + + +.gongangbeian-icon { + height: 1rem; + width: 1rem; + vertical-align: middle; + +} + +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: #ffffff; + } + + 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: 18pt; + } + + @media screen and (max-width: 1680px) { + + html { + font-size: 14pt; + } + + } + + @media screen and (max-width: 1280px) { + + html { + font-size: 12pt; + } + + } + + @media screen and (max-width: 736px) { + + html { + font-size: 11pt; + } + + } + + @media screen and (max-width: 360px) { + + html { + font-size: 10pt; + } + + } + + body { + background-color: #ffffff; + color: #000000; + } + + body, input, select, textarea { + font-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 1rem; + font-weight: 300; + line-height: 1.65; + } + + a { + -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; + text-decoration: underline; + } + + a:hover { + text-decoration: none; + } + + strong, b { + font-weight: 400; + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 2rem 0; + } + + p.major { + font-size: 1.25rem; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: 300; + line-height: 1.375; + letter-spacing: -0.05em; + margin: 0 0 1rem 0; + } + + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: inherit; + text-decoration: none; + } + + h1 { + font-size: 3.5rem; + line-height: 1.2; + } + + h2 { + font-size: 2.25rem; + } + + h3 { + font-size: 1.5rem; + } + + h4 { + font-size: 1.1rem; + } + + h5 { + font-size: 0.9rem; + } + + h6 { + font-size: 0.7rem; + } + + 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-radius: 4px; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0.25rem; + padding: 0.25rem 0.325rem; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0 2rem 0; + } + + pre code { + display: block; + line-height: 1.5; + padding: 0.75rem 1rem; + overflow-x: auto; + } + + hr { + border: 0; + border-bottom: solid 1px; + margin: 2.5rem 0; + } + + hr.major { + margin: 3.5rem 0; + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + @media screen and (max-width: 736px) { + + p.major { + font-size: 1.1rem; + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.25rem; + } + + h4 { + font-size: 1rem; + } + + } + + input, select, textarea { + color: #000000; + } + + a { + color: #000000; + } + + a:hover { + color: #47D3E5; + } + + strong, b { + color: #000000; + } + + h1, h2, h3, h4, h5, h6 { + color: #000000; + } + + blockquote { + border-left-color: rgba(0, 0, 0, 0.2); + } + + code { + background: rgba(0, 0, 0, 0.05); + border-color: rgba(0, 0, 0, 0.2); + } + + hr { + border-bottom-color: rgba(0, 0, 0, 0.2); + } + +/* 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.5rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 1rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1rem; + } + + .row { + margin-top: 0; + margin-left: -2rem; + } + + .row > * { + padding: 0 0 0 2rem; + } + + .row.gtr-uniform { + margin-top: -2rem; + } + + .row.gtr-uniform > * { + padding-top: 2rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 4rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4rem; + } + + @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.5rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 1rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1rem; + } + + .row { + margin-top: 0; + margin-left: -2rem; + } + + .row > * { + padding: 0 0 0 2rem; + } + + .row.gtr-uniform { + margin-top: -2rem; + } + + .row.gtr-uniform > * { + padding-top: 2rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 4rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4rem; + } + + } + + @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.5rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 1rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1rem; + } + + .row { + margin-top: 0; + margin-left: -2rem; + } + + .row > * { + padding: 0 0 0 2rem; + } + + .row.gtr-uniform { + margin-top: -2rem; + } + + .row.gtr-uniform > * { + padding-top: 2rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 4rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4rem; + } + + } + + @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.5rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 1rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1rem; + } + + .row { + margin-top: 0; + margin-left: -2rem; + } + + .row > * { + padding: 0 0 0 2rem; + } + + .row.gtr-uniform { + margin-top: -2rem; + } + + .row.gtr-uniform > * { + padding-top: 2rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 4rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4rem; + } + + } + + @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.5rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 1rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1rem; + } + + .row { + margin-top: 0; + margin-left: -2rem; + } + + .row > * { + padding: 0 0 0 2rem; + } + + .row.gtr-uniform { + margin-top: -2rem; + } + + .row.gtr-uniform > * { + padding-top: 2rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 4rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4rem; + } + + } + + @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.5rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 1rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1rem; + } + + .row { + margin-top: 0; + margin-left: -2rem; + } + + .row > * { + padding: 0 0 0 2rem; + } + + .row.gtr-uniform { + margin-top: -2rem; + } + + .row.gtr-uniform > * { + padding-top: 2rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 4rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4rem; + } + + } + + @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.5rem; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5rem; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5rem; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5rem; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1rem; + } + + .row.gtr-50 > * { + padding: 0 0 0 1rem; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1rem; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1rem; + } + + .row { + margin-top: 0; + margin-left: -2rem; + } + + .row > * { + padding: 0 0 0 2rem; + } + + .row.gtr-uniform { + margin-top: -2rem; + } + + .row.gtr-uniform > * { + padding-top: 2rem; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3rem; + } + + .row.gtr-150 > * { + padding: 0 0 0 3rem; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3rem; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3rem; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4rem; + } + + .row.gtr-200 > * { + padding: 0 0 0 4rem; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4rem; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4rem; + } + + } + +/* Box */ + + .box { + border-radius: 4px; + border: solid 1px; + 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: rgba(0, 0, 0, 0.2); + } + +/* 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; + cursor: pointer; + display: inline-block; + font-weight: 400; + letter-spacing: 0.125em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + font-size: 0.75rem; + max-width: 20rem; + height: 3.75em; + line-height: 3.75em; + border-radius: 3.75em; + padding: 0 2.5em; + text-overflow: ellipsis; + overflow: hidden; + } + + 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"].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.6rem; + height: 3.325em; + line-height: 3.325em; + border-radius: 3.325em; + padding: 0 2em; + } + + input[type="submit"].large, + input[type="reset"].large, + input[type="button"].large, + button.large, + .button.large { + font-size: 0.8rem; + height: 4em; + line-height: 4em; + border-radius: 4em; + padding: 0 3em; + } + + input[type="submit"].wide, + input[type="reset"].wide, + input[type="button"].wide, + button.wide, + .button.wide { + min-width: 14em; + } + + 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 1px rgba(0, 0, 0, 0.2); + color: #000000 !important; + } + + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + button:hover, + .button:hover { + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5 !important; + } + + input[type="submit"]:active, + input[type="reset"]:active, + input[type="button"]:active, + button:active, + .button:active { + background-color: rgba(71, 211, 229, 0.2); + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5 !important; + } + + input[type="submit"].primary, + input[type="reset"].primary, + input[type="button"].primary, + button.primary, + .button.primary { + background-color: #000000; + 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: #47D3E5; + } + + input[type="submit"].primary:active, + input[type="reset"].primary:active, + input[type="button"].primary:active, + button.primary:active, + .button.primary:active { + background-color: #1ebdd1; + } + +/* 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-size: 0.9rem; + font-weight: 400; + margin: 0 0 1rem 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + input[type="search"], + input[type="url"], + select, + textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-radius: 4px; + border: none; + border: solid 1px; + color: inherit; + display: block; + outline: 0; + padding: 0 0.825rem; + text-decoration: none; + width: 100%; + } + + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + input[type="tel"]:invalid, + input[type="search"]:invalid, + input[type="url"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; + } + + select { + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + height: 2.75rem; + padding-right: 2.75rem; + text-overflow: ellipsis; + } + + select:focus::-ms-value { + background-color: transparent; + } + + select::-ms-expand { + display: none; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + input[type="search"], + input[type="url"], + select { + height: 2.75rem; + } + + 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; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + display: inline-block; + font-size: 1rem; + font-weight: 300; + padding-left: 2.4rem; + padding-right: 0.75rem; + position: relative; + margin-bottom: 0; + } + + 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: 4px; + border: solid 1px; + content: ''; + display: inline-block; + font-size: 0.8rem; + height: 1.65rem; + left: 0; + line-height: 1.65rem; + position: absolute; + text-align: center; + top: 0; + width: 1.65rem; + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + content: '\f00c'; + } + + input[type="checkbox"] + label:before { + border-radius: 4px; + } + + 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: #000000; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + input[type="search"], + input[type="url"], + select, + textarea { + border-color: rgba(0, 0, 0, 0.2); + } + + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + input[type="tel"]:focus, + input[type="search"]:focus, + input[type="url"]:focus, + select:focus, + textarea:focus { + border-color: #47D3E5; + box-shadow: 0 0 0 1px #47D3E5; + } + + 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.2)' /%3E%3C/svg%3E"); + } + + select option { + color: #000000; + background: #ffffff; + } + + input[type="checkbox"] + label, + input[type="radio"] + label { + color: #000000; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + border-color: rgba(0, 0, 0, 0.2); + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + background-color: #000000; + border-color: #000000; + color: #ffffff; + } + + input[type="checkbox"]:focus + label:before, + input[type="radio"]:focus + label:before { + border-color: #47D3E5; + box-shadow: 0 0 0 1px #47D3E5; + } + + ::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.75) !important; + } + + :-moz-placeholder { + color: rgba(0, 0, 0, 0.75) !important; + } + + ::-moz-placeholder { + color: rgba(0, 0, 0, 0.75) !important; + } + + :-ms-input-placeholder { + color: rgba(0, 0, 0, 0.75) !important; + } + +/* Icon */ + + .icon { + text-decoration: none; + border-bottom: none; + position: relative; + text-align: center; + } + + .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.style2:before { + border-radius: 2.75em; + display: inline-block; + height: 2.75em; + line-height: 2.75em; + width: 2.75em; + } + + .icon.major { + display: block; + margin: 0 0 1rem 0; + } + + .icon.major:before { + font-size: 1.25rem; + } + + a.icon.style2:before { + -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; + } + + .icon.style2:before { + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + } + + a.icon.style2:hover:before { + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5; + } + + a.icon.style2:active:before { + background-color: rgba(71, 211, 229, 0.1); + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5; + } + +/* Image */ + + .image { + border: 0; + border-radius: 4px; + display: inline-block; + position: relative; + } + + .image img { + display: block; + border-radius: 4px; + } + + .image.left, .image.right { + width: 40%; + max-width: 10rem; + } + + .image.left img, .image.right img { + width: 100%; + } + + .image.left { + float: left; + margin: 0 1.5rem 1rem 0; + top: 0.25rem; + } + + .image.right { + float: right; + margin: 0 0 1rem 1.5rem; + top: 0.25rem; + } + + .image.fit { + display: block; + margin: 0 0 2rem 0; + width: 100%; + } + + .image.fit img { + width: 100%; + } + + .image.main { + display: block; + margin: 0 0 3rem 0; + width: 100%; + } + + .image.main img { + width: 100%; + } + +/* 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.alt { + list-style: none; + padding-left: 0; + } + + ul.alt li { + border-top: solid 1px; + padding: 0.5rem 0; + } + + ul.alt li:first-child { + border-top: 0; + padding-top: 0; + } + + dl { + margin: 0 0 2rem 0; + } + + dl dt { + display: block; + font-weight: 400; + margin: 0 0 1rem 0; + } + + dl dd { + margin-left: 2rem; + } + + dl.style2 dt { + width: 25%; + float: left; + } + + dl.style2 dd { + width: 70%; + float: left; + } + + dl.style2:after { + content: ''; + display: block; + clear: both; + } + + ul.alt li { + border-top-color: rgba(0, 0, 0, 0.2); + } + +/* 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.75rem 0 0; + } + + ul.icons li:last-child { + padding-right: 0; + } + +/* Section/Article */ + + section.special, article.special { + text-align: center; + } + + header p { + position: relative; + margin: -0.65rem 0 1.5rem 0; + font-style: italic; + } + + header h1 + p { + font-size: 1.375rem; + } + + header h2 + p { + font-size: 1.25rem; + } + + header h3 + p { + font-size: 1.1rem; + } + + header h4 + p, + header h5 + p, + header h6 + p { + font-size: 0.9rem; + } + + header p { + color: rgba(0, 0, 0, 0.75); + } + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + margin: 0 0 2rem 0; + overflow-x: auto; + } + + .table-wrapper > table { + margin-bottom: 0; + } + + 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-size: 0.9rem; + font-weight: 400; + padding: 0 0.75rem 0.75rem 0.75rem; + text-align: left; + } + + 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.fixed { + table-layout: fixed; + } + + table tbody tr { + border-color: rgba(0, 0, 0, 0.2); + } + + table tbody tr:nth-child(2n + 1) { + background-color: rgba(0, 0, 0, 0.05); + } + + table tbody tr.alt { + background-color: rgba(0, 0, 0, 0.05) !important; + } + + table th { + color: #000000; + } + + table thead { + border-bottom-color: rgba(0, 0, 0, 0.2); + } + + table tfoot { + border-top-color: rgba(0, 0, 0, 0.2); + } + + table.alt tbody tr td { + border-color: rgba(0, 0, 0, 0.2); + } + + table.uniform tbody tr:nth-child(2n + 1) { + background-color: transparent; + } + +/* Banner (transitions) */ + + .banner.onload-content-fade-up .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + body.is-preload .banner.onload-content-fade-up .content { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + opacity: 0; + } + + .banner.onload-content-fade-down .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + body.is-preload .banner.onload-content-fade-down .content { + -moz-transform: translateY(-1rem); + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + opacity: 0; + } + + .banner.onload-content-fade-left .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + body.is-preload .banner.onload-content-fade-left .content { + -moz-transform: translateX(1rem); + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + opacity: 0; + } + + .banner.onload-content-fade-right .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + body.is-preload .banner.onload-content-fade-right .content { + -moz-transform: translateX(-1rem); + -webkit-transform: translateX(-1rem); + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + opacity: 0; + } + + .banner.onload-content-fade-in .content { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + } + + body.is-preload .banner.onload-content-fade-in .content { + opacity: 0; + } + + .banner.onload-image-fade-up .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onload-image-fade-up .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + body.is-preload .banner.onload-image-fade-up .image { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + opacity: 0; + } + + body.is-preload .banner.onload-image-fade-up .image img { + opacity: 0; + } + + .banner.onload-image-fade-down .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onload-image-fade-down .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + body.is-preload .banner.onload-image-fade-down .image { + -moz-transform: translateY(-1rem); + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + opacity: 0; + } + + body.is-preload .banner.onload-image-fade-down .image img { + opacity: 0; + } + + .banner.onload-image-fade-left .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onload-image-fade-left .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + body.is-preload .banner.onload-image-fade-left .image { + -moz-transform: translateX(1rem); + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + opacity: 0; + } + + body.is-preload .banner.onload-image-fade-left .image img { + opacity: 0; + } + + .banner.onload-image-fade-right .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onload-image-fade-right .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + body.is-preload .banner.onload-image-fade-right .image { + -moz-transform: translateX(-1rem); + -webkit-transform: translateX(-1rem); + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + opacity: 0; + } + + body.is-preload .banner.onload-image-fade-right .image img { + opacity: 0; + } + + .banner.onload-image-fade-in .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + } + + body.is-preload .banner.onload-image-fade-in .image img { + opacity: 0; + } + + .banner.onscroll-content-fade-up .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onscroll-content-fade-up.is-inactive .content { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + opacity: 0; + } + + .banner.onscroll-content-fade-down .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onscroll-content-fade-down.is-inactive .content { + -moz-transform: translateY(-1rem); + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + opacity: 0; + } + + .banner.onscroll-content-fade-left .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onscroll-content-fade-left.is-inactive .content { + -moz-transform: translateX(1rem); + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + opacity: 0; + } + + .banner.onscroll-content-fade-right .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onscroll-content-fade-right.is-inactive .content { + -moz-transform: translateX(-1rem); + -webkit-transform: translateX(-1rem); + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + opacity: 0; + } + + .banner.onscroll-content-fade-in .content { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + } + + .banner.onscroll-content-fade-in.is-inactive .content { + opacity: 0; + } + + .banner.onscroll-image-fade-up .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onscroll-image-fade-up .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + .banner.onscroll-image-fade-up.is-inactive .image { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + opacity: 0; + } + + .banner.onscroll-image-fade-up.is-inactive .image img { + opacity: 0; + } + + .banner.onscroll-image-fade-down .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onscroll-image-fade-down .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + .banner.onscroll-image-fade-down.is-inactive .image { + -moz-transform: translateY(-1rem); + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + opacity: 0; + } + + .banner.onscroll-image-fade-down.is-inactive .image img { + opacity: 0; + } + + .banner.onscroll-image-fade-left .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onscroll-image-fade-left .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + .banner.onscroll-image-fade-left.is-inactive .image { + -moz-transform: translateX(1rem); + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + opacity: 0; + } + + .banner.onscroll-image-fade-left.is-inactive .image img { + opacity: 0; + } + + .banner.onscroll-image-fade-right .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .banner.onscroll-image-fade-right .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + .banner.onscroll-image-fade-right.is-inactive .image { + -moz-transform: translateX(-1rem); + -webkit-transform: translateX(-1rem); + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + opacity: 0; + } + + .banner.onscroll-image-fade-right.is-inactive .image img { + opacity: 0; + } + + .banner.onscroll-image-fade-in .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + } + + .banner.onscroll-image-fade-in.is-inactive .image img { + opacity: 0; + } + +/* Banner (style1) */ + + .banner.style1 { + -moz-align-items: -moz-stretch; + -webkit-align-items: -webkit-stretch; + -ms-align-items: -ms-stretch; + align-items: stretch; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + position: relative; + text-align: left; + overflow-x: hidden; + } + + .banner.style1 .content { + padding: 7rem 7rem 5rem 7rem ; + -moz-align-self: center; + -webkit-align-self: center; + -ms-align-self: center; + align-self: center; + -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: 50%; + max-width: 48rem; + margin: 0 auto; + } + + .banner.style1 .image { + -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; + border-radius: 0; + width: 50%; + } + + .banner.style1 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + + @media screen and (max-width: 1680px) { + + .banner.style1 .content { + padding: 5rem 5rem 3rem 5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .banner.style1 .content { + padding: 4rem 4rem 2rem 4rem ; + } + + } + + @media screen and (max-width: 980px) { + + .banner.style1 .content { + padding: 3.75rem 3rem 1.75rem 3rem ; + } + + } + + @media screen and (max-width: 736px) { + + .banner.style1 .content { + padding: 2.5rem 2rem 0.5rem 2rem ; + } + + } + + @media screen and (orientation: portrait) { + + .banner.style1 { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + text-align: center; + } + + .banner.style1 .content { + 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; + width: 100%; + max-width: 100%; + } + + .banner.style1 .image { + width: 100%; + max-width: 100%; + height: 45vh; + } + + } + + .banner.style1.fullscreen { + min-height: 100vh; + } + + @media screen and (orientation: portrait) { + + .banner.style1.fullscreen .content { + min-height: 50vh; + } + + .banner.style1.fullscreen .image { + height: 50vh; + } + + } + + .banner.style1.orient-right { + -moz-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + @media screen and (orientation: portrait) { + + .banner.style1.orient-right { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + } + + .banner.style1.content-align-center { + text-align: center; + } + + .banner.style1.content-align-right { + text-align: right; + } + + @media screen and (orientation: portrait) { + + .banner.style1.content-align-right { + text-align: center; + } + + } + + .banner.style1.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .banner.style1.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + +/* Banner (style2) */ + + .banner.style2 { + padding: 5.25rem 5.25rem 3.25rem 5.25rem ; + -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-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + background-color: inherit; + position: relative; + text-align: center; + overflow-x: hidden; + } + + .banner.style2 .content { + padding: 5.25rem 5.25rem 3.25rem 5.25rem ; + position: relative; + width: 40rem; + max-width: 100%; + background-color: inherit; + border-radius: 0.5rem; + margin-bottom: 2rem; + z-index: 1; + } + + .banner.style2 .image { + -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; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + } + + .banner.style2 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + + @media screen and (max-width: 1680px) { + + .banner.style2 { + padding: 3.75rem 3.75rem 1.75rem 3.75rem ; + } + + .banner.style2 .content { + padding: 3.75rem 3.75rem 1.75rem 3.75rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .banner.style2 { + padding: 4rem 3rem 2rem 3rem ; + } + + .banner.style2 .content { + padding: 4rem 3rem 2rem 3rem ; + } + + } + + @media screen and (max-width: 980px) { + + .banner.style2 { + padding: 3rem 3rem 1rem 3rem ; + } + + .banner.style2 .content { + padding: 3.75rem 2.25rem 1.75rem 2.25rem ; + } + + } + + @media screen and (max-width: 736px) { + + .banner.style2 { + padding: 2rem 2rem 0.1rem 2rem ; + } + + .banner.style2 .content { + padding: 2.5rem 1.5rem 0.5rem 1.5rem ; + } + + } + + .banner.style2.fullscreen { + min-height: 100vh; + } + + .banner.style2.orient-left { + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + padding-left: 0; + } + + .banner.style2.orient-left .content { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .banner.style2.orient-right { + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + padding-right: 0; + } + + .banner.style2.orient-right .content { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .banner.style2.content-align-left { + text-align: left; + } + + .banner.style2.content-align-right { + text-align: right; + } + + .banner.style2.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .banner.style2.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + +/* Banner (style3) */ + + .banner.style3 { + padding: 7rem 7rem 5rem 7rem ; + -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: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + position: relative; + text-align: left; + overflow-x: hidden; + } + + .banner.style3 .content { + width: 31.5rem; + max-width: 100%; + } + + .banner.style3 .image { + -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; + width: 21rem; + height: 21rem; + border-radius: 100%; + margin: 0 3.5rem 2rem 0; + } + + .banner.style3 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + width: 100%; + height: 100%; + border-radius: 100%; + } + + @media screen and (max-width: 1680px) { + + .banner.style3 { + padding: 5rem 5rem 3rem 5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .banner.style3 { + padding: 4rem 4rem 2rem 4rem ; + } + + } + + @media screen and (max-width: 980px) { + + .banner.style3 { + padding: 3.75rem 3rem 1.75rem 3rem ; + } + + .banner.style3 .image { + width: 18.375rem; + height: 18.375rem; + } + + } + + @media screen and (max-width: 736px) { + + .banner.style3 { + padding: 2.5rem 2rem 0.5rem 2rem ; + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } + + .banner.style3 .image { + width: 15.75rem; + height: 15.75rem; + margin: 0 2rem 2rem 0; + } + + } + + @media screen and (orientation: portrait) { + + .banner.style3 { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + text-align: center; + } + + .banner.style3 .content { + width: 34rem; + max-width: 100%; + } + + .banner.style3 .image { + margin-right: 0; + } + + } + + .banner.style3.fullscreen { + min-height: 100vh; + } + + .banner.style3.orient-left { + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + + .banner.style3.orient-left .image { + margin: 0 0 2rem 3.5rem; + } + + @media screen and (max-width: 736px) { + + .banner.style3.orient-left .image { + margin: 0 0 2rem 2rem; + } + + } + + @media screen and (orientation: portrait) { + + .banner.style3.orient-left { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .banner.style3.orient-left .image { + margin-left: 0; + } + + } + + .banner.style3.content-align-center { + text-align: center; + } + + .banner.style3.content-align-right { + text-align: right; + } + + .banner.style3.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .banner.style3.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + +/* Banner (style4) */ + + .banner.style4 { + padding: 7rem 7rem 5rem 7rem ; + -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: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + position: relative; + text-align: left; + overflow-x: hidden; + } + + .banner.style4 .content { + width: 31.5rem; + max-width: 100%; + } + + .banner.style4 .image { + -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; + border-radius: 0; + border: solid 1px; + width: 13rem; + height: 23.11111rem; + margin-top: 2.5rem; + margin-bottom: 5rem; + margin-right: 3.5rem; + } + + .banner.style4 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + width: 100%; + height: 100%; + border-radius: 0; + } + + .banner.style4 .image:before { + content: ''; + display: block; + background-position: center; + background-repeat: no-repeat; + border: solid 1px; + border-bottom: 0; + } + + .banner.style4 .image:after { + content: ''; + display: block; + background-position: center; + background-repeat: no-repeat; + border: solid 1px; + border-top: 0; + } + + .banner.style4 .image:before { + height: 2.5rem; + background-size: 64px 32px; + margin-top: -2.5rem; + border-radius: 1rem 1rem 0 0; + } + + .banner.style4 .image:after { + height: 3rem; + background-size: 64px 32px; + margin-bottom: -3rem; + border-radius: 0 0 1rem 1rem; + } + + @media screen and (max-width: 1680px) { + + .banner.style4 { + padding: 5rem 5rem 3rem 5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .banner.style4 { + padding: 4rem 4rem 2rem 4rem ; + } + + } + + @media screen and (max-width: 980px) { + + .banner.style4 { + padding: 3.75rem 3rem 1.75rem 3rem ; + } + + .banner.style4 .image { + width: 11.375rem; + height: 20.22222rem; + margin-top: 2.1875rem; + margin-bottom: 4.625rem; + } + + .banner.style4 .image:before { + height: 2.1875rem; + background-size: 56px 28px; + margin-top: -2.1875rem; + border-radius: 0.875rem 0.875rem 0 0; + } + + .banner.style4 .image:after { + height: 2.625rem; + background-size: 56px 28px; + margin-bottom: -2.625rem; + border-radius: 0 0 0.875rem 0.875rem; + } + + } + + @media screen and (max-width: 736px) { + + .banner.style4 { + padding: 2.5rem 2rem 0.5rem 2rem ; + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } + + .banner.style4 .image { + width: 8.125rem; + height: 14.44444rem; + margin-top: 1.5625rem; + margin-bottom: 3.875rem; + } + + .banner.style4 .image:before { + height: 1.5625rem; + background-size: 40px 20px; + margin-top: -1.5625rem; + border-radius: 0.625rem 0.625rem 0 0; + } + + .banner.style4 .image:after { + height: 1.875rem; + background-size: 40px 20px; + margin-bottom: -1.875rem; + border-radius: 0 0 0.625rem 0.625rem; + } + + } + + @media screen and (orientation: portrait) { + + .banner.style4 { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + text-align: center; + } + + .banner.style4 .content { + width: 34rem; + max-width: 100%; + } + + .banner.style4 .image { + margin-right: 0; + margin-left: 0; + } + + } + + .banner.style4.fullscreen { + min-height: 100vh; + } + + .banner.style4.orient-left { + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + + .banner.style4.orient-left .image { + margin-right: 0; + margin-left: 3.5rem; + } + + @media screen and (orientation: portrait) { + + .banner.style4.orient-left { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .banner.style4.orient-left .image { + margin-right: 0; + margin-left: 0; + } + + } + + .banner.style4.content-align-center { + text-align: center; + } + + .banner.style4.content-align-right { + text-align: right; + } + + .banner.style4.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .banner.style4.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + +/* Banner (style5) */ + + .banner.style5 { + padding: 7rem 7rem 5rem 7rem ; + -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-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + background-color: inherit; + position: relative; + text-align: center; + overflow-x: hidden; + } + + .banner.style5 .content { + position: relative; + width: 40rem; + max-width: 100%; + margin-bottom: 2rem; + z-index: 1; + } + + .banner.style5 .image { + -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; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + opacity: 0.5; + } + + .banner.style5 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + + @media screen and (max-width: 1680px) { + + .banner.style5 { + padding: 5rem 5rem 3rem 5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .banner.style5 { + padding: 4rem 4rem 2rem 4rem ; + } + + } + + @media screen and (max-width: 980px) { + + .banner.style5 { + padding: 3.75rem 3rem 1.75rem 3rem ; + } + + } + + @media screen and (max-width: 736px) { + + .banner.style5 { + padding: 2.5rem 2rem 0.5rem 2rem ; + } + + } + + .banner.style5.fullscreen { + min-height: 100vh; + } + + .banner.style5.content-align-left { + text-align: left; + } + + .banner.style5.content-align-right { + text-align: right; + } + + .banner.style5.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .banner.style5.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + + .banner .image { + background-color: rgba(0, 0, 0, 0.125); + } + + .banner.invert .image { + background-color: rgba(255, 255, 255, 0.125); + } + + .banner.style4 .image { + border-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0, 0, 0, 0.2); + border-width: 0; + } + + .banner.style4 .image:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: rgba(0, 0, 0, 0.2)%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='11' y='12' width='42' height='8' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: rgba(0, 0, 0, 0.2); + width: 100%; + } + + .banner.style4 .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: rgba(0, 0, 0, 0.2)%3B stroke-width: 1px%3B %7D%3C/style%3E%3Ccircle cx='32' cy='16' r='14' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: rgba(0, 0, 0, 0.2); + width: 100%; + } + + .banner.style4.android .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: rgba(0, 0, 0, 0.2)%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='6' y='4' width='52' height='24' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + } + + .banner.style4.invert .image { + border-color: white; + background-color: white; + border-width: 1px; + } + + .banner.style4.invert .image:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='11' y='12' width='42' height='8' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: white; + width: calc(100% + 2px); + margin-left: -1px; + } + + .banner.style4.invert .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Ccircle cx='32' cy='16' r='14' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: white; + width: calc(100% + 2px); + margin-left: -1px; + } + + .banner.style4.invert.android .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='6' y='4' width='52' height='24' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + } + +/* Spotlight (transitions) */ + + .spotlight.onload-content-fade-up .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + body.is-preload .spotlight.onload-content-fade-up .content { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + opacity: 0; + } + + .spotlight.onload-content-fade-down .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + body.is-preload .spotlight.onload-content-fade-down .content { + -moz-transform: translateY(-1rem); + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + opacity: 0; + } + + .spotlight.onload-content-fade-left .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + body.is-preload .spotlight.onload-content-fade-left .content { + -moz-transform: translateX(1rem); + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + opacity: 0; + } + + .spotlight.onload-content-fade-right .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + body.is-preload .spotlight.onload-content-fade-right .content { + -moz-transform: translateX(-1rem); + -webkit-transform: translateX(-1rem); + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + opacity: 0; + } + + .spotlight.onload-content-fade-in .content { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + } + + body.is-preload .spotlight.onload-content-fade-in .content { + opacity: 0; + } + + .spotlight.onload-image-fade-up .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onload-image-fade-up .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + body.is-preload .spotlight.onload-image-fade-up .image { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + opacity: 0; + } + + body.is-preload .spotlight.onload-image-fade-up .image img { + opacity: 0; + } + + .spotlight.onload-image-fade-down .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onload-image-fade-down .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + body.is-preload .spotlight.onload-image-fade-down .image { + -moz-transform: translateY(-1rem); + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + opacity: 0; + } + + body.is-preload .spotlight.onload-image-fade-down .image img { + opacity: 0; + } + + .spotlight.onload-image-fade-left .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onload-image-fade-left .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + body.is-preload .spotlight.onload-image-fade-left .image { + -moz-transform: translateX(1rem); + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + opacity: 0; + } + + body.is-preload .spotlight.onload-image-fade-left .image img { + opacity: 0; + } + + .spotlight.onload-image-fade-right .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onload-image-fade-right .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + body.is-preload .spotlight.onload-image-fade-right .image { + -moz-transform: translateX(-1rem); + -webkit-transform: translateX(-1rem); + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + opacity: 0; + } + + body.is-preload .spotlight.onload-image-fade-right .image img { + opacity: 0; + } + + .spotlight.onload-image-fade-in .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + } + + body.is-preload .spotlight.onload-image-fade-in .image img { + opacity: 0; + } + + .spotlight.onscroll-content-fade-up .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onscroll-content-fade-up.is-inactive .content { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + opacity: 0; + } + + .spotlight.onscroll-content-fade-down .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onscroll-content-fade-down.is-inactive .content { + -moz-transform: translateY(-1rem); + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + opacity: 0; + } + + .spotlight.onscroll-content-fade-left .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onscroll-content-fade-left.is-inactive .content { + -moz-transform: translateX(1rem); + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + opacity: 0; + } + + .spotlight.onscroll-content-fade-right .content { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onscroll-content-fade-right.is-inactive .content { + -moz-transform: translateX(-1rem); + -webkit-transform: translateX(-1rem); + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + opacity: 0; + } + + .spotlight.onscroll-content-fade-in .content { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + } + + .spotlight.onscroll-content-fade-in.is-inactive .content { + opacity: 0; + } + + .spotlight.onscroll-image-fade-up .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onscroll-image-fade-up .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + .spotlight.onscroll-image-fade-up.is-inactive .image { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + opacity: 0; + } + + .spotlight.onscroll-image-fade-up.is-inactive .image img { + opacity: 0; + } + + .spotlight.onscroll-image-fade-down .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onscroll-image-fade-down .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + .spotlight.onscroll-image-fade-down.is-inactive .image { + -moz-transform: translateY(-1rem); + -webkit-transform: translateY(-1rem); + -ms-transform: translateY(-1rem); + transform: translateY(-1rem); + opacity: 0; + } + + .spotlight.onscroll-image-fade-down.is-inactive .image img { + opacity: 0; + } + + .spotlight.onscroll-image-fade-left .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onscroll-image-fade-left .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + .spotlight.onscroll-image-fade-left.is-inactive .image { + -moz-transform: translateX(1rem); + -webkit-transform: translateX(1rem); + -ms-transform: translateX(1rem); + transform: translateX(1rem); + opacity: 0; + } + + .spotlight.onscroll-image-fade-left.is-inactive .image img { + opacity: 0; + } + + .spotlight.onscroll-image-fade-right .image { + -moz-transition: opacity 0.75s ease-in-out, -moz-transform 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out, -webkit-transform 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out, -ms-transform 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out; + } + + .spotlight.onscroll-image-fade-right .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 0.5625s; + -webkit-transition-delay: 0.5625s; + -ms-transition-delay: 0.5625s; + transition-delay: 0.5625s; + } + + .spotlight.onscroll-image-fade-right.is-inactive .image { + -moz-transform: translateX(-1rem); + -webkit-transform: translateX(-1rem); + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + opacity: 0; + } + + .spotlight.onscroll-image-fade-right.is-inactive .image img { + opacity: 0; + } + + .spotlight.onscroll-image-fade-in .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + } + + .spotlight.onscroll-image-fade-in.is-inactive .image img { + opacity: 0; + } + +/* Spotlight (style1) */ + + .spotlight.style1 { + -moz-align-items: -moz-stretch; + -webkit-align-items: -webkit-stretch; + -ms-align-items: -ms-stretch; + align-items: stretch; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + position: relative; + overflow-x: hidden; + text-align: left; + } + + .spotlight.style1 .content { + padding: 7rem 7rem 5rem 7rem ; + -moz-align-self: center; + -webkit-align-self: center; + -ms-align-self: center; + align-self: center; + -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: 65%; + max-width: 64rem; + margin: 0 auto; + } + + .spotlight.style1 .image { + -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; + width: 35%; + min-width: 25rem; + border-radius: 0; + } + + .spotlight.style1 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + + @media screen and (max-width: 1680px) { + + .spotlight.style1 .content { + padding: 5rem 5rem 3rem 5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .spotlight.style1 .content { + padding: 4rem 4rem 2rem 4rem ; + } + + } + + @media screen and (max-width: 980px) { + + .spotlight.style1 .content { + padding: 3.75rem 3rem 1.75rem 3rem ; + width: 50%; + min-width: 0; + } + + .spotlight.style1 .image { + width: 50%; + min-width: 0; + } + + } + + @media screen and (max-width: 736px) { + + .spotlight.style1 .content { + padding: 2.5rem 2rem 0.5rem 2rem ; + } + + } + + @media screen and (max-width: 736px) and (orientation: portrait) { + + .spotlight.style1 { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + text-align: center !important; + } + + .spotlight.style1 .content { + width: 100%; + } + + .spotlight.style1 .image { + width: 100%; + } + + .spotlight.style1 .image img { + position: relative; + } + + } + + .spotlight.style1.orient-right { + -moz-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + @media screen and (max-width: 736px) and (orientation: portrait) { + + .spotlight.style1.orient-right { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + } + + .spotlight.style1.content-align-center { + text-align: center; + } + + .spotlight.style1.content-align-right { + text-align: right; + } + + .spotlight.style1.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .spotlight.style1.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + +/* Spotlight (style2) */ + + .spotlight.style2 { + padding: 7rem 7rem 5rem 7rem ; + -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: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + position: relative; + overflow-x: hidden; + text-align: left; + } + + .spotlight.style2 .content { + width: 44.5rem; + max-width: 100%; + } + + .spotlight.style2 .image { + -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; + width: 21rem; + height: 21rem; + border-radius: 100%; + margin: 0 3.5rem 2rem 0; + } + + .spotlight.style2 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + width: 100%; + height: 100%; + border-radius: 100%; + } + + @media screen and (max-width: 1680px) { + + .spotlight.style2 { + padding: 5rem 5rem 3rem 5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .spotlight.style2 { + padding: 4rem 4rem 2rem 4rem ; + } + + } + + @media screen and (max-width: 980px) { + + .spotlight.style2 { + padding: 3.75rem 3rem 1.75rem 3rem ; + } + + .spotlight.style2 .image { + width: 18.375rem; + height: 18.375rem; + } + + } + + @media screen and (max-width: 736px) { + + .spotlight.style2 { + padding: 2.5rem 2rem 0.5rem 2rem ; + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } + + .spotlight.style2 .image { + width: 15.75rem; + height: 15.75rem; + margin: 0 2rem 2rem 0; + } + + } + + @media screen and (orientation: portrait) { + + .spotlight.style2 { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + text-align: center !important; + } + + .spotlight.style2 .content { + width: 34rem; + max-width: 100%; + } + + .spotlight.style2 .image { + margin-right: 0; + } + + } + + .spotlight.style2.orient-left { + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + + .spotlight.style2.orient-left .image { + margin: 0 0 2rem 3.5rem; + } + + @media screen and (max-width: 736px) { + + .spotlight.style2.orient-left .image { + margin: 0 0 2rem 2rem; + } + + } + + @media screen and (orientation: portrait) { + + .spotlight.style2.orient-left { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .spotlight.style2.orient-left .image { + margin-left: 0; + } + + } + + .spotlight.style2.content-align-center { + text-align: center; + } + + .spotlight.style2.content-align-right { + text-align: right; + } + + .spotlight.style2.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .spotlight.style2.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + +/* Spotlight (style3) */ + + .spotlight.style3 { + padding: 7rem 7rem 5rem 7rem ; + -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: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + position: relative; + overflow-x: hidden; + text-align: left; + } + + .spotlight.style3 .content { + width: 44.5rem; + max-width: 100%; + } + + .spotlight.style3 .image { + -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; + border-radius: 0; + border: solid 1px; + width: 13rem; + height: 23.11111rem; + margin-top: 2.5rem; + margin-bottom: 5rem; + margin-right: 3.5rem; + } + + .spotlight.style3 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + width: 100%; + height: 100%; + border-radius: 0; + } + + .spotlight.style3 .image:before { + content: ''; + display: block; + background-position: center; + background-repeat: no-repeat; + border: solid 1px; + border-bottom: 0; + } + + .spotlight.style3 .image:after { + content: ''; + display: block; + background-position: center; + background-repeat: no-repeat; + border: solid 1px; + border-top: 0; + } + + .spotlight.style3 .image:before { + height: 2.5rem; + background-size: 64px 32px; + margin-top: -2.5rem; + border-radius: 1rem 1rem 0 0; + } + + .spotlight.style3 .image:after { + height: 3rem; + background-size: 64px 32px; + margin-bottom: -3rem; + border-radius: 0 0 1rem 1rem; + } + + @media screen and (max-width: 1680px) { + + .spotlight.style3 { + padding: 5rem 5rem 3rem 5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .spotlight.style3 { + padding: 4rem 4rem 2rem 4rem ; + } + + } + + @media screen and (max-width: 980px) { + + .spotlight.style3 { + padding: 3.75rem 3rem 1.75rem 3rem ; + } + + .spotlight.style3 .image { + width: 11.375rem; + height: 20.22222rem; + margin-top: 2.1875rem; + margin-bottom: 4.625rem; + } + + .spotlight.style3 .image:before { + height: 2.1875rem; + background-size: 56px 28px; + margin-top: -2.1875rem; + border-radius: 0.875rem 0.875rem 0 0; + } + + .spotlight.style3 .image:after { + height: 2.625rem; + background-size: 56px 28px; + margin-bottom: -2.625rem; + border-radius: 0 0 0.875rem 0.875rem; + } + + } + + @media screen and (max-width: 736px) { + + .spotlight.style3 { + padding: 2.5rem 2rem 0.5rem 2rem ; + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } + + .spotlight.style3 .image { + width: 8.125rem; + height: 14.44444rem; + margin-top: 1.5625rem; + margin-bottom: 3.875rem; + } + + .spotlight.style3 .image:before { + height: 1.5625rem; + background-size: 40px 20px; + margin-top: -1.5625rem; + border-radius: 0.625rem 0.625rem 0 0; + } + + .spotlight.style3 .image:after { + height: 1.875rem; + background-size: 40px 20px; + margin-bottom: -1.875rem; + border-radius: 0 0 0.625rem 0.625rem; + } + + } + + @media screen and (orientation: portrait) { + + .spotlight.style3 { + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + text-align: center !important; + } + + .spotlight.style3 .content { + width: 34rem; + max-width: 100%; + } + + .spotlight.style3 .image { + margin-right: 0; + margin-left: 0; + } + + } + + .spotlight.style3.orient-left { + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + + .spotlight.style3.orient-left .image { + margin-right: 0; + margin-left: 3.5rem; + } + + @media screen and (orientation: portrait) { + + .spotlight.style3.orient-left { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .spotlight.style3.orient-left .image { + margin-right: 0; + margin-left: 0; + } + + } + + .spotlight.style3.content-align-center { + text-align: center; + } + + .spotlight.style3.content-align-right { + text-align: right; + } + + .spotlight.style3.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .spotlight.style3.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + +/* Spotlight (style4) */ + + .spotlight.style4 { + padding: 7rem 5.25rem 5rem 5.25rem ; + -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-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + background-color: inherit; + position: relative; + overflow-x: hidden; + text-align: center; + } + + .spotlight.style4 .content { + padding: 3.5rem 3.5rem 1.5rem 3.5rem ; + position: relative; + width: 40rem; + max-width: 50%; + background-color: inherit; + border-radius: 0.5rem; + margin-bottom: 2rem; + z-index: 1; + } + + .spotlight.style4 .image { + -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; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + } + + .spotlight.style4 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + + @media screen and (max-width: 1680px) { + + .spotlight.style4 { + padding: 5rem 3.75rem 3rem 3.75rem ; + } + + .spotlight.style4 .content { + padding: 2.5rem 2.5rem 0.5rem 2.5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .spotlight.style4 { + padding: 4rem 3rem 2rem 3rem ; + } + + .spotlight.style4 .content { + padding: 3rem 3rem 1rem 3rem ; + } + + } + + @media screen and (max-width: 980px) { + + .spotlight.style4 { + padding: 3rem 2.25rem 1rem 2.25rem ; + } + + .spotlight.style4 .content { + padding: 2.25rem 2.25rem 0.25rem 2.25rem ; + } + + } + + @media screen and (max-width: 736px) { + + .spotlight.style4 { + padding: 2rem 1.5rem 0.1rem 1.5rem ; + } + + .spotlight.style4 .content { + padding: 1.5rem 1.5rem 0.1rem 1.5rem ; + } + + } + + @media screen and (max-width: 480px) { + + .spotlight.style4 .content { + max-width: 80%; + } + + } + + .spotlight.style4.fullscreen { + min-height: 100vh; + } + + .spotlight.style4.halfscreen { + min-height: 50vh; + } + + .spotlight.style4.orient-left { + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + padding-left: 0; + } + + .spotlight.style4.orient-left .content { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .spotlight.style4.orient-right { + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + padding-right: 0; + } + + .spotlight.style4.orient-right .content { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .spotlight.style4.content-align-left { + text-align: left; + } + + .spotlight.style4.content-align-right { + text-align: right; + } + + .spotlight.style4.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .spotlight.style4.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + +/* Spotlight (style5) */ + + .spotlight.style5 { + padding: 7rem 5.25rem 5rem 5.25rem ; + -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-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + background-color: inherit; + position: relative; + overflow-x: hidden; + text-align: center; + } + + .spotlight.style5 .content { + padding: 3.5rem 3.5rem 1.5rem 3.5rem ; + position: relative; + width: 40rem; + max-width: 52.5%; + background-color: inherit; + border-radius: 0.5rem; + margin-bottom: 2rem; + z-index: 1; + } + + .spotlight.style5 .image { + -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; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + } + + .spotlight.style5 .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + + @media screen and (max-width: 1680px) { + + .spotlight.style5 { + padding: 5rem 3.75rem 3rem 3.75rem ; + } + + .spotlight.style5 .content { + padding: 2.5rem 2.5rem 0.5rem 2.5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .spotlight.style5 { + padding: 4rem 3rem 2rem 3rem ; + } + + .spotlight.style5 .content { + padding: 3rem 3rem 1rem 3rem ; + } + + } + + @media screen and (max-width: 980px) { + + .spotlight.style5 { + padding: 3rem 2.25rem 1rem 2.25rem ; + } + + .spotlight.style5 .content { + padding: 2.25rem 2.25rem 0.25rem 2.25rem ; + } + + } + + @media screen and (max-width: 736px) { + + .spotlight.style5 { + padding: 2rem 1.5rem 0.1rem 1.5rem ; + } + + .spotlight.style5 .content { + padding: 1.5rem 1.5rem 0.1rem 1.5rem ; + } + + } + + @media screen and (max-width: 480px) { + + .spotlight.style5 .content { + max-width: 80%; + } + + } + + .spotlight.style5.fullscreen { + min-height: 100vh; + } + + .spotlight.style5.halfscreen { + min-height: 50vh; + } + + .spotlight.style5.orient-left { + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + } + + .spotlight.style5.orient-right { + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + } + + .spotlight.style5.content-align-left { + text-align: left; + } + + .spotlight.style5.content-align-right { + text-align: right; + } + + .spotlight.style5.image-position-left .image img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .spotlight.style5.image-position-right .image img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + + .spotlight .image { + background-color: rgba(0, 0, 0, 0.125); + } + + .spotlight.invert .image { + background-color: rgba(255, 255, 255, 0.125); + } + + .spotlight.style3 .image { + border-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0, 0, 0, 0.2); + border-width: 0; + } + + .spotlight.style3 .image:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: rgba(0, 0, 0, 0.2)%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='11' y='12' width='42' height='8' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: rgba(0, 0, 0, 0.2); + width: 100%; + } + + .spotlight.style3 .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: rgba(0, 0, 0, 0.2)%3B stroke-width: 1px%3B %7D%3C/style%3E%3Ccircle cx='32' cy='16' r='14' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: rgba(0, 0, 0, 0.2); + width: 100%; + } + + .spotlight.style3.android .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: rgba(0, 0, 0, 0.2)%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='6' y='4' width='52' height='24' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + } + + .spotlight.style3.invert .image { + border-color: white; + background-color: white; + border-width: 1px; + } + + .spotlight.style3.invert .image:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='11' y='12' width='42' height='8' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: white; + width: calc(100% + 2px); + margin-left: -1px; + } + + .spotlight.style3.invert .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Ccircle cx='32' cy='16' r='14' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: white; + width: calc(100% + 2px); + margin-left: -1px; + } + + .spotlight.style3.invert.android .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='6' y='4' width='52' height='24' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + } + +/* Gallery (transitions) */ + + .gallery.onload-fade-in article .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 4.8s; + -webkit-transition-delay: 4.8s; + -ms-transition-delay: 4.8s; + transition-delay: 4.8s; + } + + .gallery.onload-fade-in article:nth-child(1) .image img { + -moz-transition-delay: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + } + + .gallery.onload-fade-in article:nth-child(2) .image img { + -moz-transition-delay: 0.15s; + -webkit-transition-delay: 0.15s; + -ms-transition-delay: 0.15s; + transition-delay: 0.15s; + } + + .gallery.onload-fade-in article:nth-child(3) .image img { + -moz-transition-delay: 0.3s; + -webkit-transition-delay: 0.3s; + -ms-transition-delay: 0.3s; + transition-delay: 0.3s; + } + + .gallery.onload-fade-in article:nth-child(4) .image img { + -moz-transition-delay: 0.45s; + -webkit-transition-delay: 0.45s; + -ms-transition-delay: 0.45s; + transition-delay: 0.45s; + } + + .gallery.onload-fade-in article:nth-child(5) .image img { + -moz-transition-delay: 0.6s; + -webkit-transition-delay: 0.6s; + -ms-transition-delay: 0.6s; + transition-delay: 0.6s; + } + + .gallery.onload-fade-in article:nth-child(6) .image img { + -moz-transition-delay: 0.75s; + -webkit-transition-delay: 0.75s; + -ms-transition-delay: 0.75s; + transition-delay: 0.75s; + } + + .gallery.onload-fade-in article:nth-child(7) .image img { + -moz-transition-delay: 0.9s; + -webkit-transition-delay: 0.9s; + -ms-transition-delay: 0.9s; + transition-delay: 0.9s; + } + + .gallery.onload-fade-in article:nth-child(8) .image img { + -moz-transition-delay: 1.05s; + -webkit-transition-delay: 1.05s; + -ms-transition-delay: 1.05s; + transition-delay: 1.05s; + } + + .gallery.onload-fade-in article:nth-child(9) .image img { + -moz-transition-delay: 1.2s; + -webkit-transition-delay: 1.2s; + -ms-transition-delay: 1.2s; + transition-delay: 1.2s; + } + + .gallery.onload-fade-in article:nth-child(10) .image img { + -moz-transition-delay: 1.35s; + -webkit-transition-delay: 1.35s; + -ms-transition-delay: 1.35s; + transition-delay: 1.35s; + } + + .gallery.onload-fade-in article:nth-child(11) .image img { + -moz-transition-delay: 1.5s; + -webkit-transition-delay: 1.5s; + -ms-transition-delay: 1.5s; + transition-delay: 1.5s; + } + + .gallery.onload-fade-in article:nth-child(12) .image img { + -moz-transition-delay: 1.65s; + -webkit-transition-delay: 1.65s; + -ms-transition-delay: 1.65s; + transition-delay: 1.65s; + } + + .gallery.onload-fade-in article:nth-child(13) .image img { + -moz-transition-delay: 1.8s; + -webkit-transition-delay: 1.8s; + -ms-transition-delay: 1.8s; + transition-delay: 1.8s; + } + + .gallery.onload-fade-in article:nth-child(14) .image img { + -moz-transition-delay: 1.95s; + -webkit-transition-delay: 1.95s; + -ms-transition-delay: 1.95s; + transition-delay: 1.95s; + } + + .gallery.onload-fade-in article:nth-child(15) .image img { + -moz-transition-delay: 2.1s; + -webkit-transition-delay: 2.1s; + -ms-transition-delay: 2.1s; + transition-delay: 2.1s; + } + + .gallery.onload-fade-in article:nth-child(16) .image img { + -moz-transition-delay: 2.25s; + -webkit-transition-delay: 2.25s; + -ms-transition-delay: 2.25s; + transition-delay: 2.25s; + } + + .gallery.onload-fade-in article:nth-child(17) .image img { + -moz-transition-delay: 2.4s; + -webkit-transition-delay: 2.4s; + -ms-transition-delay: 2.4s; + transition-delay: 2.4s; + } + + .gallery.onload-fade-in article:nth-child(18) .image img { + -moz-transition-delay: 2.55s; + -webkit-transition-delay: 2.55s; + -ms-transition-delay: 2.55s; + transition-delay: 2.55s; + } + + .gallery.onload-fade-in article:nth-child(19) .image img { + -moz-transition-delay: 2.7s; + -webkit-transition-delay: 2.7s; + -ms-transition-delay: 2.7s; + transition-delay: 2.7s; + } + + .gallery.onload-fade-in article:nth-child(20) .image img { + -moz-transition-delay: 2.85s; + -webkit-transition-delay: 2.85s; + -ms-transition-delay: 2.85s; + transition-delay: 2.85s; + } + + .gallery.onload-fade-in article:nth-child(21) .image img { + -moz-transition-delay: 3s; + -webkit-transition-delay: 3s; + -ms-transition-delay: 3s; + transition-delay: 3s; + } + + .gallery.onload-fade-in article:nth-child(22) .image img { + -moz-transition-delay: 3.15s; + -webkit-transition-delay: 3.15s; + -ms-transition-delay: 3.15s; + transition-delay: 3.15s; + } + + .gallery.onload-fade-in article:nth-child(23) .image img { + -moz-transition-delay: 3.3s; + -webkit-transition-delay: 3.3s; + -ms-transition-delay: 3.3s; + transition-delay: 3.3s; + } + + .gallery.onload-fade-in article:nth-child(24) .image img { + -moz-transition-delay: 3.45s; + -webkit-transition-delay: 3.45s; + -ms-transition-delay: 3.45s; + transition-delay: 3.45s; + } + + .gallery.onload-fade-in article:nth-child(25) .image img { + -moz-transition-delay: 3.6s; + -webkit-transition-delay: 3.6s; + -ms-transition-delay: 3.6s; + transition-delay: 3.6s; + } + + .gallery.onload-fade-in article:nth-child(26) .image img { + -moz-transition-delay: 3.75s; + -webkit-transition-delay: 3.75s; + -ms-transition-delay: 3.75s; + transition-delay: 3.75s; + } + + .gallery.onload-fade-in article:nth-child(27) .image img { + -moz-transition-delay: 3.9s; + -webkit-transition-delay: 3.9s; + -ms-transition-delay: 3.9s; + transition-delay: 3.9s; + } + + .gallery.onload-fade-in article:nth-child(28) .image img { + -moz-transition-delay: 4.05s; + -webkit-transition-delay: 4.05s; + -ms-transition-delay: 4.05s; + transition-delay: 4.05s; + } + + .gallery.onload-fade-in article:nth-child(29) .image img { + -moz-transition-delay: 4.2s; + -webkit-transition-delay: 4.2s; + -ms-transition-delay: 4.2s; + transition-delay: 4.2s; + } + + .gallery.onload-fade-in article:nth-child(30) .image img { + -moz-transition-delay: 4.35s; + -webkit-transition-delay: 4.35s; + -ms-transition-delay: 4.35s; + transition-delay: 4.35s; + } + + .gallery.onload-fade-in article:nth-child(31) .image img { + -moz-transition-delay: 4.5s; + -webkit-transition-delay: 4.5s; + -ms-transition-delay: 4.5s; + transition-delay: 4.5s; + } + + .gallery.onload-fade-in article:nth-child(32) .image img { + -moz-transition-delay: 4.65s; + -webkit-transition-delay: 4.65s; + -ms-transition-delay: 4.65s; + transition-delay: 4.65s; + } + + .gallery.onload-fade-in article:nth-child(33) .image img { + -moz-transition-delay: 4.8s; + -webkit-transition-delay: 4.8s; + -ms-transition-delay: 4.8s; + transition-delay: 4.8s; + } + + body.is-preload .gallery.onload-fade-in article .image img { + opacity: 0; + } + + .gallery.onscroll-fade-in article .image img { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 4.8s; + -webkit-transition-delay: 4.8s; + -ms-transition-delay: 4.8s; + transition-delay: 4.8s; + } + + .gallery.onscroll-fade-in article:nth-child(1) .image img { + -moz-transition-delay: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + } + + .gallery.onscroll-fade-in article:nth-child(2) .image img { + -moz-transition-delay: 0.15s; + -webkit-transition-delay: 0.15s; + -ms-transition-delay: 0.15s; + transition-delay: 0.15s; + } + + .gallery.onscroll-fade-in article:nth-child(3) .image img { + -moz-transition-delay: 0.3s; + -webkit-transition-delay: 0.3s; + -ms-transition-delay: 0.3s; + transition-delay: 0.3s; + } + + .gallery.onscroll-fade-in article:nth-child(4) .image img { + -moz-transition-delay: 0.45s; + -webkit-transition-delay: 0.45s; + -ms-transition-delay: 0.45s; + transition-delay: 0.45s; + } + + .gallery.onscroll-fade-in article:nth-child(5) .image img { + -moz-transition-delay: 0.6s; + -webkit-transition-delay: 0.6s; + -ms-transition-delay: 0.6s; + transition-delay: 0.6s; + } + + .gallery.onscroll-fade-in article:nth-child(6) .image img { + -moz-transition-delay: 0.75s; + -webkit-transition-delay: 0.75s; + -ms-transition-delay: 0.75s; + transition-delay: 0.75s; + } + + .gallery.onscroll-fade-in article:nth-child(7) .image img { + -moz-transition-delay: 0.9s; + -webkit-transition-delay: 0.9s; + -ms-transition-delay: 0.9s; + transition-delay: 0.9s; + } + + .gallery.onscroll-fade-in article:nth-child(8) .image img { + -moz-transition-delay: 1.05s; + -webkit-transition-delay: 1.05s; + -ms-transition-delay: 1.05s; + transition-delay: 1.05s; + } + + .gallery.onscroll-fade-in article:nth-child(9) .image img { + -moz-transition-delay: 1.2s; + -webkit-transition-delay: 1.2s; + -ms-transition-delay: 1.2s; + transition-delay: 1.2s; + } + + .gallery.onscroll-fade-in article:nth-child(10) .image img { + -moz-transition-delay: 1.35s; + -webkit-transition-delay: 1.35s; + -ms-transition-delay: 1.35s; + transition-delay: 1.35s; + } + + .gallery.onscroll-fade-in article:nth-child(11) .image img { + -moz-transition-delay: 1.5s; + -webkit-transition-delay: 1.5s; + -ms-transition-delay: 1.5s; + transition-delay: 1.5s; + } + + .gallery.onscroll-fade-in article:nth-child(12) .image img { + -moz-transition-delay: 1.65s; + -webkit-transition-delay: 1.65s; + -ms-transition-delay: 1.65s; + transition-delay: 1.65s; + } + + .gallery.onscroll-fade-in article:nth-child(13) .image img { + -moz-transition-delay: 1.8s; + -webkit-transition-delay: 1.8s; + -ms-transition-delay: 1.8s; + transition-delay: 1.8s; + } + + .gallery.onscroll-fade-in article:nth-child(14) .image img { + -moz-transition-delay: 1.95s; + -webkit-transition-delay: 1.95s; + -ms-transition-delay: 1.95s; + transition-delay: 1.95s; + } + + .gallery.onscroll-fade-in article:nth-child(15) .image img { + -moz-transition-delay: 2.1s; + -webkit-transition-delay: 2.1s; + -ms-transition-delay: 2.1s; + transition-delay: 2.1s; + } + + .gallery.onscroll-fade-in article:nth-child(16) .image img { + -moz-transition-delay: 2.25s; + -webkit-transition-delay: 2.25s; + -ms-transition-delay: 2.25s; + transition-delay: 2.25s; + } + + .gallery.onscroll-fade-in article:nth-child(17) .image img { + -moz-transition-delay: 2.4s; + -webkit-transition-delay: 2.4s; + -ms-transition-delay: 2.4s; + transition-delay: 2.4s; + } + + .gallery.onscroll-fade-in article:nth-child(18) .image img { + -moz-transition-delay: 2.55s; + -webkit-transition-delay: 2.55s; + -ms-transition-delay: 2.55s; + transition-delay: 2.55s; + } + + .gallery.onscroll-fade-in article:nth-child(19) .image img { + -moz-transition-delay: 2.7s; + -webkit-transition-delay: 2.7s; + -ms-transition-delay: 2.7s; + transition-delay: 2.7s; + } + + .gallery.onscroll-fade-in article:nth-child(20) .image img { + -moz-transition-delay: 2.85s; + -webkit-transition-delay: 2.85s; + -ms-transition-delay: 2.85s; + transition-delay: 2.85s; + } + + .gallery.onscroll-fade-in article:nth-child(21) .image img { + -moz-transition-delay: 3s; + -webkit-transition-delay: 3s; + -ms-transition-delay: 3s; + transition-delay: 3s; + } + + .gallery.onscroll-fade-in article:nth-child(22) .image img { + -moz-transition-delay: 3.15s; + -webkit-transition-delay: 3.15s; + -ms-transition-delay: 3.15s; + transition-delay: 3.15s; + } + + .gallery.onscroll-fade-in article:nth-child(23) .image img { + -moz-transition-delay: 3.3s; + -webkit-transition-delay: 3.3s; + -ms-transition-delay: 3.3s; + transition-delay: 3.3s; + } + + .gallery.onscroll-fade-in article:nth-child(24) .image img { + -moz-transition-delay: 3.45s; + -webkit-transition-delay: 3.45s; + -ms-transition-delay: 3.45s; + transition-delay: 3.45s; + } + + .gallery.onscroll-fade-in article:nth-child(25) .image img { + -moz-transition-delay: 3.6s; + -webkit-transition-delay: 3.6s; + -ms-transition-delay: 3.6s; + transition-delay: 3.6s; + } + + .gallery.onscroll-fade-in article:nth-child(26) .image img { + -moz-transition-delay: 3.75s; + -webkit-transition-delay: 3.75s; + -ms-transition-delay: 3.75s; + transition-delay: 3.75s; + } + + .gallery.onscroll-fade-in article:nth-child(27) .image img { + -moz-transition-delay: 3.9s; + -webkit-transition-delay: 3.9s; + -ms-transition-delay: 3.9s; + transition-delay: 3.9s; + } + + .gallery.onscroll-fade-in article:nth-child(28) .image img { + -moz-transition-delay: 4.05s; + -webkit-transition-delay: 4.05s; + -ms-transition-delay: 4.05s; + transition-delay: 4.05s; + } + + .gallery.onscroll-fade-in article:nth-child(29) .image img { + -moz-transition-delay: 4.2s; + -webkit-transition-delay: 4.2s; + -ms-transition-delay: 4.2s; + transition-delay: 4.2s; + } + + .gallery.onscroll-fade-in article:nth-child(30) .image img { + -moz-transition-delay: 4.35s; + -webkit-transition-delay: 4.35s; + -ms-transition-delay: 4.35s; + transition-delay: 4.35s; + } + + .gallery.onscroll-fade-in article:nth-child(31) .image img { + -moz-transition-delay: 4.5s; + -webkit-transition-delay: 4.5s; + -ms-transition-delay: 4.5s; + transition-delay: 4.5s; + } + + .gallery.onscroll-fade-in article:nth-child(32) .image img { + -moz-transition-delay: 4.65s; + -webkit-transition-delay: 4.65s; + -ms-transition-delay: 4.65s; + transition-delay: 4.65s; + } + + .gallery.onscroll-fade-in article:nth-child(33) .image img { + -moz-transition-delay: 4.8s; + -webkit-transition-delay: 4.8s; + -ms-transition-delay: 4.8s; + transition-delay: 4.8s; + } + + .gallery.onscroll-fade-in.is-inactive article .image img { + opacity: 0; + } + +/* Gallery (style1) */ + + .gallery.style1 { + background-color: #000000; + 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-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; + position: relative; + width: 100%; + background-color: transparent; + } + + .gallery.style1 input, .gallery.style1 select, .gallery.style1 textarea { + color: #ffffff; + } + + .gallery.style1 a { + color: #ffffff; + } + + .gallery.style1 a:hover { + color: #47D3E5; + } + + .gallery.style1 strong, .gallery.style1 b { + color: #ffffff; + } + + .gallery.style1 h1, .gallery.style1 h2, .gallery.style1 h3, .gallery.style1 h4, .gallery.style1 h5, .gallery.style1 h6 { + color: #ffffff; + } + + .gallery.style1 blockquote { + border-left-color: white; + } + + .gallery.style1 code { + background: rgba(255, 255, 255, 0.125); + border-color: white; + } + + .gallery.style1 hr { + border-bottom-color: white; + } + + .gallery.style1 input[type="submit"], + .gallery.style1 input[type="reset"], + .gallery.style1 input[type="button"], + .gallery.style1 button, + .gallery.style1 .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px white; + color: #ffffff !important; + } + + .gallery.style1 input[type="submit"]:hover, + .gallery.style1 input[type="reset"]:hover, + .gallery.style1 input[type="button"]:hover, + .gallery.style1 button:hover, + .gallery.style1 .button:hover { + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5 !important; + } + + .gallery.style1 input[type="submit"]:active, + .gallery.style1 input[type="reset"]:active, + .gallery.style1 input[type="button"]:active, + .gallery.style1 button:active, + .gallery.style1 .button:active { + background-color: rgba(71, 211, 229, 0.2); + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5 !important; + } + + .gallery.style1 input[type="submit"].primary, + .gallery.style1 input[type="reset"].primary, + .gallery.style1 input[type="button"].primary, + .gallery.style1 button.primary, + .gallery.style1 .button.primary { + background-color: #ffffff; + box-shadow: none; + color: #000000 !important; + } + + .gallery.style1 input[type="submit"].primary:hover, + .gallery.style1 input[type="reset"].primary:hover, + .gallery.style1 input[type="button"].primary:hover, + .gallery.style1 button.primary:hover, + .gallery.style1 .button.primary:hover { + background-color: #47D3E5; + } + + .gallery.style1 input[type="submit"].primary:active, + .gallery.style1 input[type="reset"].primary:active, + .gallery.style1 input[type="button"].primary:active, + .gallery.style1 button.primary:active, + .gallery.style1 .button.primary:active { + background-color: #1ebdd1; + } + + .gallery.style1 > .forward, .gallery.style1 > .backward { + display: none; + } + + .gallery.style1 > .inner { + -moz-align-items: inherit; + -webkit-align-items: inherit; + -ms-align-items: inherit; + align-items: inherit; + display: inherit; + -moz-flex-wrap: inherit; + -webkit-flex-wrap: inherit; + -ms-flex-wrap: inherit; + flex-wrap: inherit; + -moz-justify-content: inherit; + -webkit-justify-content: inherit; + -ms-justify-content: inherit; + justify-content: inherit; + } + + .gallery.style1 article { + overflow: hidden; + position: relative; + width: 25%; + } + + .gallery.style1 article .image { + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + display: block; + width: 100%; + border-radius: 0; + } + + .gallery.style1 article .image img { + display: block; + width: 100%; + border-radius: 0; + } + + .gallery.style1 article .caption { + -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: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + pointer-events: none; + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + padding: 2rem; + z-index: 1; + font-size: 0.8rem; + } + + .gallery.style1 article .caption a { + pointer-events: auto; + } + + .gallery.style1 article .caption h2, .gallery.style1 article .caption h3, .gallery.style1 article .caption h4, .gallery.style1 article .caption h5, .gallery.style1 article .caption h6 { + font-size: 1.25rem; + margin-bottom: 0.25rem; + } + + .gallery.style1 article .caption > * { + max-width: 100%; + margin-bottom: 1rem; + } + + .gallery.style1 article .caption > :last-child { + margin-bottom: 0; + } + + .gallery.style1 article:hover .caption { + opacity: 1; + } + + @media screen and (max-width: 1280px) { + + .gallery.style1 article { + width: 33.33333%; + } + + .gallery.style1 article .caption { + padding: 1rem; + } + + } + + @media screen and (max-width: 980px) { + + .gallery.style1 article { + width: 50%; + } + + .gallery.style1 article .caption { + padding: 1rem; + } + + } + + @media screen and (max-width: 480px) { + + .gallery.style1 article { + width: 100%; + } + + .gallery.style1 article .caption { + padding: 1rem; + } + + } + + .gallery.style1.small article { + width: 20%; + } + + .gallery.style1.small article .caption { + padding: 1rem; + } + + @media screen and (max-width: 1280px) { + + .gallery.style1.small article { + width: 25%; + } + + .gallery.style1.small article .caption { + padding: 1rem; + } + + } + + @media screen and (max-width: 980px) { + + .gallery.style1.small article { + width: 33.33333%; + } + + .gallery.style1.small article .caption { + padding: 1rem; + } + + } + + @media screen and (max-width: 480px) { + + .gallery.style1.small article { + width: 50%; + } + + .gallery.style1.small article .caption { + padding: 1rem; + } + + } + + .gallery.style1.big article { + width: 33.33333%; + } + + .gallery.style1.big article .caption { + padding: 3rem; + } + + @media screen and (max-width: 1280px) { + + .gallery.style1.big article { + width: 50%; + } + + .gallery.style1.big article .caption { + padding: 2rem; + } + + } + + @media screen and (max-width: 980px) { + + .gallery.style1.big article { + width: 50%; + } + + .gallery.style1.big article .caption { + padding: 2rem; + } + + } + + @media screen and (max-width: 480px) { + + .gallery.style1.big article { + width: 100%; + } + + .gallery.style1.big article .caption { + padding: 1rem; + } + + } + +/* Gallery (style2) */ + + .gallery.style2 { + background-color: #000000; + color: #ffffff; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -webkit-overflow-scrolling: touch; + position: relative; + background-color: transparent; + } + + .gallery.style2 input, .gallery.style2 select, .gallery.style2 textarea { + color: #ffffff; + } + + .gallery.style2 a { + color: #ffffff; + } + + .gallery.style2 a:hover { + color: #47D3E5; + } + + .gallery.style2 strong, .gallery.style2 b { + color: #ffffff; + } + + .gallery.style2 h1, .gallery.style2 h2, .gallery.style2 h3, .gallery.style2 h4, .gallery.style2 h5, .gallery.style2 h6 { + color: #ffffff; + } + + .gallery.style2 blockquote { + border-left-color: white; + } + + .gallery.style2 code { + background: rgba(255, 255, 255, 0.125); + border-color: white; + } + + .gallery.style2 hr { + border-bottom-color: white; + } + + .gallery.style2 input[type="submit"], + .gallery.style2 input[type="reset"], + .gallery.style2 input[type="button"], + .gallery.style2 button, + .gallery.style2 .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px white; + color: #ffffff !important; + } + + .gallery.style2 input[type="submit"]:hover, + .gallery.style2 input[type="reset"]:hover, + .gallery.style2 input[type="button"]:hover, + .gallery.style2 button:hover, + .gallery.style2 .button:hover { + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5 !important; + } + + .gallery.style2 input[type="submit"]:active, + .gallery.style2 input[type="reset"]:active, + .gallery.style2 input[type="button"]:active, + .gallery.style2 button:active, + .gallery.style2 .button:active { + background-color: rgba(71, 211, 229, 0.2); + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5 !important; + } + + .gallery.style2 input[type="submit"].primary, + .gallery.style2 input[type="reset"].primary, + .gallery.style2 input[type="button"].primary, + .gallery.style2 button.primary, + .gallery.style2 .button.primary { + background-color: #ffffff; + box-shadow: none; + color: #000000 !important; + } + + .gallery.style2 input[type="submit"].primary:hover, + .gallery.style2 input[type="reset"].primary:hover, + .gallery.style2 input[type="button"].primary:hover, + .gallery.style2 button.primary:hover, + .gallery.style2 .button.primary:hover { + background-color: #47D3E5; + } + + .gallery.style2 input[type="submit"].primary:active, + .gallery.style2 input[type="reset"].primary:active, + .gallery.style2 input[type="button"].primary:active, + .gallery.style2 button.primary:active, + .gallery.style2 .button.primary:active { + background-color: #1ebdd1; + } + + .gallery.style2 > .forward, .gallery.style2 > .backward { + text-decoration: none; + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + position: absolute; + top: 0; + width: 5rem; + height: 100%; + cursor: pointer; + opacity: 0; + z-index: 2; + } + + .gallery.style2 > .forward:before, .gallery.style2 > .backward: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; + } + + .gallery.style2 > .forward:before, .gallery.style2 > .backward:before { + display: block; + top: calc(50% - 1.5rem); + width: 4rem; + height: 3rem; + line-height: 1em; + font-size: 3rem; + position: absolute; + text-align: center; + } + + .gallery.style2:hover > .forward, .gallery.style2:hover > .backward { + opacity: 1; + } + + .gallery.style2 > .forward { + right: 0; + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.25) 15%, rgba(0, 0, 0, 0)); + } + + .gallery.style2 > .forward:before { + content: '\f105'; + right: 0; + } + + .gallery.style2 > .backward { + left: 0; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25) 15%, rgba(0, 0, 0, 0)); + } + + .gallery.style2 > .backward:before { + content: '\f104'; + left: 0; + } + + .gallery.style2 > .inner { + display: inherit; + overflow-x: auto; + overflow-y: hidden; + position: relative; + width: 100%; + } + + .gallery.style2 article { + -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; + display: block; + position: relative; + overflow: hidden; + width: 22.5rem; + max-width: 75vw; + } + + .gallery.style2 article .image { + display: block; + width: 100%; + border-radius: 0; + } + + .gallery.style2 article .image img { + display: block; + width: 100%; + border-radius: 0; + } + + .gallery.style2 article .caption { + -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: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + pointer-events: none; + -moz-transition: opacity 0.2s ease-in-out; + -webkit-transition: opacity 0.2s ease-in-out; + -ms-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + padding: 3rem; + z-index: 1; + font-size: 0.8rem; + } + + .gallery.style2 article .caption a { + pointer-events: auto; + } + + .gallery.style2 article .caption h2, .gallery.style2 article .caption h3, .gallery.style2 article .caption h4, .gallery.style2 article .caption h5, .gallery.style2 article .caption h6 { + font-size: 1.25rem; + margin-bottom: 0.25rem; + } + + .gallery.style2 article .caption > * { + max-width: 100%; + margin-bottom: 1rem; + } + + .gallery.style2 article .caption > :last-child { + margin-bottom: 0; + } + + .gallery.style2 article:hover .caption { + opacity: 1; + } + + @media screen and (max-width: 980px) { + + .gallery.style2 article .caption { + padding: 2rem; + } + + } + + @media screen and (max-width: 736px) { + + .gallery.style2 article .caption { + padding: 2rem; + } + + } + + .gallery.style2.small article { + width: 17.5rem; + } + + .gallery.style2.small article .caption { + padding: 2rem; + } + + @media screen and (max-width: 980px) { + + .gallery.style2.small article .caption { + padding: 2rem; + } + + } + + @media screen and (max-width: 736px) { + + .gallery.style2.small article .caption { + padding: 2rem; + } + + } + + .gallery.style2.big article { + width: 30rem; + } + + .gallery.style2.big article .caption { + padding: 4rem; + } + + @media screen and (max-width: 980px) { + + .gallery.style2.big article .caption { + padding: 3rem; + } + + } + + @media screen and (max-width: 736px) { + + .gallery.style2.big article .caption { + padding: 2rem; + } + + } + +/* Gallery (lightbox) */ + + @-moz-keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @-webkit-keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @-ms-keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + .gallery.lightbox .modal { + 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; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + pointer-events: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + -moz-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s; + -webkit-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s; + -ms-transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s; + transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + outline: 0; + background-color: rgba(0, 0, 0, 0.75); + visibility: none; + opacity: 0; + z-index: 0; + } + + .gallery.lightbox .modal:before { + -moz-animation: gallery-modal-spinner 1s infinite linear; + -webkit-animation: gallery-modal-spinner 1s infinite linear; + -ms-animation: gallery-modal-spinner 1s infinite linear; + animation: gallery-modal-spinner 1s infinite linear; + -moz-transition: opacity 0.25s ease; + -webkit-transition: opacity 0.25s ease; + -ms-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; + -moz-transition-delay: 0.5s; + -webkit-transition-delay: 0.5s; + -ms-transition-delay: 0.5s; + transition-delay: 0.5s; + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 4rem; + height: 4rem; + margin: -2rem 0 0 -2rem; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='96px' height='96px' viewBox='0 0 96 96' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: %23ffffff%3B stroke-width: 1.5px%3B %7D%3C/style%3E%3Cdefs%3E%3CclipPath id='corner'%3E%3Cpolygon points='0,0 48,0 48,48 96,48 96,96 0,96' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23corner)'%3E%3Ccircle cx='48' cy='48' r='32'/%3E%3C/g%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: 4rem; + opacity: 0; + } + + .gallery.lightbox .modal:after { + content: ''; + display: block; + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 4rem; + height: 4rem; + cursor: pointer; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='64px' viewBox='0 0 64 64' zoomAndPan='disable'%3E%3Cstyle%3Eline %7Bstroke: %23ffffff%3Bstroke-width: 1.5px%3B%7D%3C/style%3E%3Cline x1='20' y1='20' x2='44' y2='44' /%3E%3Cline x1='20' y1='44' x2='44' y2='20' /%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: 3rem; + } + + .gallery.lightbox .modal .inner { + -moz-transform: translateY(0.75rem); + -webkit-transform: translateY(0.75rem); + -ms-transform: translateY(0.75rem); + transform: translateY(0.75rem); + -moz-transition: opacity 0.25s ease, -moz-transform 0.25s ease; + -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease; + -ms-transition: opacity 0.25s ease, -ms-transform 0.25s ease; + transition: opacity 0.25s ease, transform 0.25s ease; + opacity: 0; + } + + .gallery.lightbox .modal .inner img { + display: block; + max-width: 90vw; + max-height: 85vh; + box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35); + } + + .gallery.lightbox .modal.visible { + pointer-events: auto; + visibility: visible; + opacity: 1; + z-index: 10001; + } + + .gallery.lightbox .modal.visible:before { + opacity: 1; + } + + .gallery.lightbox .modal.loaded .inner { + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease; + -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease; + -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease; + transition: opacity 0.5s ease, transform 0.5s ease; + opacity: 1; + } + + .gallery.lightbox .modal.loaded:before { + -moz-transition-delay: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + opacity: 0; + } + + @media screen and (max-width: 980px) { + + .gallery.lightbox .modal .inner img { + max-width: 100vw; + } + + } + + .gallery article .image { + background-color: rgba(0, 0, 0, 0.125); + } + +/* Wrapper (style1) */ + + .wrapper.style1 > .inner { + padding: 7rem 3.5rem 5rem 3.5rem ; + margin: 0 auto; + max-width: 100%; + width: 64rem; + } + + .wrapper.style1 > .inner.medium { + width: 48rem; + } + + .wrapper.style1 > .inner.small { + width: 32rem; + } + + @media screen and (max-width: 1680px) { + + .wrapper.style1 > .inner { + padding: 5rem 2.5rem 3rem 2.5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .wrapper.style1 > .inner { + padding: 4rem 4rem 2rem 4rem ; + } + + } + + @media screen and (max-width: 980px) { + + .wrapper.style1 > .inner { + padding: 4.5rem 3rem 2.5rem 3rem ; + } + + } + + @media screen and (max-width: 736px) { + + .wrapper.style1 > .inner { + padding: 3rem 2rem 1rem 2rem ; + } + + } + +/* Wrapper (style2) */ + + .wrapper.style2 { + padding: 7rem; + background-color: #eeeeee; + } + + .wrapper.style2 > .inner { + padding: 5.25rem 3.5rem 3.25rem 3.5rem ; + background-color: #ffffff; + border-radius: 0.5rem; + margin: 0 auto; + max-width: 100%; + position: relative; + width: 64rem; + z-index: 1; + } + + .wrapper.style2 > .inner.medium { + width: 48rem; + } + + .wrapper.style2 > .inner.small { + width: 32rem; + } + + @media screen and (max-width: 1680px) { + + .wrapper.style2 { + padding: 5rem; + } + + .wrapper.style2 > .inner { + padding: 3.75rem 2.5rem 1.75rem 2.5rem ; + } + + } + + @media screen and (max-width: 1280px) { + + .wrapper.style2 { + padding: 4rem; + } + + .wrapper.style2 > .inner { + padding: 3rem 2rem 1rem 2rem ; + } + + } + + @media screen and (max-width: 980px) { + + .wrapper.style2 { + padding: 2.25rem; + } + + .wrapper.style2 > .inner { + padding: 3rem 2.25rem 1rem 2.25rem ; + } + + } + + @media screen and (max-width: 736px) { + + .wrapper.style2 { + padding: 1.5rem; + } + + .wrapper.style2 > .inner { + padding: 2rem 1.5rem 0.1rem 1.5rem ; + } + + } + + #wrapper > .wrapper.style2.invert:not(.color1):not(.color2):not(.color3):not(.color4):not(.color5):not(.color6):not(.color7) { + background-color: #222222; + } + + #wrapper > .wrapper.style2.invert > .inner { + background-color: #000000; + } + +/* Items (transitions) */ + + .items.onload-fade-in > * > .inner { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 2.4s; + -webkit-transition-delay: 2.4s; + -ms-transition-delay: 2.4s; + transition-delay: 2.4s; + } + + .items.onload-fade-in > *:nth-child(1) > .inner { + -moz-transition-delay: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + } + + .items.onload-fade-in > *:nth-child(2) > .inner { + -moz-transition-delay: 0.15s; + -webkit-transition-delay: 0.15s; + -ms-transition-delay: 0.15s; + transition-delay: 0.15s; + } + + .items.onload-fade-in > *:nth-child(3) > .inner { + -moz-transition-delay: 0.3s; + -webkit-transition-delay: 0.3s; + -ms-transition-delay: 0.3s; + transition-delay: 0.3s; + } + + .items.onload-fade-in > *:nth-child(4) > .inner { + -moz-transition-delay: 0.45s; + -webkit-transition-delay: 0.45s; + -ms-transition-delay: 0.45s; + transition-delay: 0.45s; + } + + .items.onload-fade-in > *:nth-child(5) > .inner { + -moz-transition-delay: 0.6s; + -webkit-transition-delay: 0.6s; + -ms-transition-delay: 0.6s; + transition-delay: 0.6s; + } + + .items.onload-fade-in > *:nth-child(6) > .inner { + -moz-transition-delay: 0.75s; + -webkit-transition-delay: 0.75s; + -ms-transition-delay: 0.75s; + transition-delay: 0.75s; + } + + .items.onload-fade-in > *:nth-child(7) > .inner { + -moz-transition-delay: 0.9s; + -webkit-transition-delay: 0.9s; + -ms-transition-delay: 0.9s; + transition-delay: 0.9s; + } + + .items.onload-fade-in > *:nth-child(8) > .inner { + -moz-transition-delay: 1.05s; + -webkit-transition-delay: 1.05s; + -ms-transition-delay: 1.05s; + transition-delay: 1.05s; + } + + .items.onload-fade-in > *:nth-child(9) > .inner { + -moz-transition-delay: 1.2s; + -webkit-transition-delay: 1.2s; + -ms-transition-delay: 1.2s; + transition-delay: 1.2s; + } + + .items.onload-fade-in > *:nth-child(10) > .inner { + -moz-transition-delay: 1.35s; + -webkit-transition-delay: 1.35s; + -ms-transition-delay: 1.35s; + transition-delay: 1.35s; + } + + .items.onload-fade-in > *:nth-child(11) > .inner { + -moz-transition-delay: 1.5s; + -webkit-transition-delay: 1.5s; + -ms-transition-delay: 1.5s; + transition-delay: 1.5s; + } + + .items.onload-fade-in > *:nth-child(12) > .inner { + -moz-transition-delay: 1.65s; + -webkit-transition-delay: 1.65s; + -ms-transition-delay: 1.65s; + transition-delay: 1.65s; + } + + .items.onload-fade-in > *:nth-child(13) > .inner { + -moz-transition-delay: 1.8s; + -webkit-transition-delay: 1.8s; + -ms-transition-delay: 1.8s; + transition-delay: 1.8s; + } + + .items.onload-fade-in > *:nth-child(14) > .inner { + -moz-transition-delay: 1.95s; + -webkit-transition-delay: 1.95s; + -ms-transition-delay: 1.95s; + transition-delay: 1.95s; + } + + .items.onload-fade-in > *:nth-child(15) > .inner { + -moz-transition-delay: 2.1s; + -webkit-transition-delay: 2.1s; + -ms-transition-delay: 2.1s; + transition-delay: 2.1s; + } + + .items.onload-fade-in > *:nth-child(16) > .inner { + -moz-transition-delay: 2.25s; + -webkit-transition-delay: 2.25s; + -ms-transition-delay: 2.25s; + transition-delay: 2.25s; + } + + .items.onload-fade-in > *:nth-child(17) > .inner { + -moz-transition-delay: 2.4s; + -webkit-transition-delay: 2.4s; + -ms-transition-delay: 2.4s; + transition-delay: 2.4s; + } + + body.is-preload .items.onload-fade-in > * > .inner { + opacity: 0; + } + + .items.onscroll-fade-in > * > .inner { + -moz-transition: opacity 0.75s ease-in-out; + -webkit-transition: opacity 0.75s ease-in-out; + -ms-transition: opacity 0.75s ease-in-out; + transition: opacity 0.75s ease-in-out; + -moz-transition-delay: 2.4s; + -webkit-transition-delay: 2.4s; + -ms-transition-delay: 2.4s; + transition-delay: 2.4s; + } + + .items.onscroll-fade-in > *:nth-child(1) > .inner { + -moz-transition-delay: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + } + + .items.onscroll-fade-in > *:nth-child(2) > .inner { + -moz-transition-delay: 0.15s; + -webkit-transition-delay: 0.15s; + -ms-transition-delay: 0.15s; + transition-delay: 0.15s; + } + + .items.onscroll-fade-in > *:nth-child(3) > .inner { + -moz-transition-delay: 0.3s; + -webkit-transition-delay: 0.3s; + -ms-transition-delay: 0.3s; + transition-delay: 0.3s; + } + + .items.onscroll-fade-in > *:nth-child(4) > .inner { + -moz-transition-delay: 0.45s; + -webkit-transition-delay: 0.45s; + -ms-transition-delay: 0.45s; + transition-delay: 0.45s; + } + + .items.onscroll-fade-in > *:nth-child(5) > .inner { + -moz-transition-delay: 0.6s; + -webkit-transition-delay: 0.6s; + -ms-transition-delay: 0.6s; + transition-delay: 0.6s; + } + + .items.onscroll-fade-in > *:nth-child(6) > .inner { + -moz-transition-delay: 0.75s; + -webkit-transition-delay: 0.75s; + -ms-transition-delay: 0.75s; + transition-delay: 0.75s; + } + + .items.onscroll-fade-in > *:nth-child(7) > .inner { + -moz-transition-delay: 0.9s; + -webkit-transition-delay: 0.9s; + -ms-transition-delay: 0.9s; + transition-delay: 0.9s; + } + + .items.onscroll-fade-in > *:nth-child(8) > .inner { + -moz-transition-delay: 1.05s; + -webkit-transition-delay: 1.05s; + -ms-transition-delay: 1.05s; + transition-delay: 1.05s; + } + + .items.onscroll-fade-in > *:nth-child(9) > .inner { + -moz-transition-delay: 1.2s; + -webkit-transition-delay: 1.2s; + -ms-transition-delay: 1.2s; + transition-delay: 1.2s; + } + + .items.onscroll-fade-in > *:nth-child(10) > .inner { + -moz-transition-delay: 1.35s; + -webkit-transition-delay: 1.35s; + -ms-transition-delay: 1.35s; + transition-delay: 1.35s; + } + + .items.onscroll-fade-in > *:nth-child(11) > .inner { + -moz-transition-delay: 1.5s; + -webkit-transition-delay: 1.5s; + -ms-transition-delay: 1.5s; + transition-delay: 1.5s; + } + + .items.onscroll-fade-in > *:nth-child(12) > .inner { + -moz-transition-delay: 1.65s; + -webkit-transition-delay: 1.65s; + -ms-transition-delay: 1.65s; + transition-delay: 1.65s; + } + + .items.onscroll-fade-in > *:nth-child(13) > .inner { + -moz-transition-delay: 1.8s; + -webkit-transition-delay: 1.8s; + -ms-transition-delay: 1.8s; + transition-delay: 1.8s; + } + + .items.onscroll-fade-in > *:nth-child(14) > .inner { + -moz-transition-delay: 1.95s; + -webkit-transition-delay: 1.95s; + -ms-transition-delay: 1.95s; + transition-delay: 1.95s; + } + + .items.onscroll-fade-in > *:nth-child(15) > .inner { + -moz-transition-delay: 2.1s; + -webkit-transition-delay: 2.1s; + -ms-transition-delay: 2.1s; + transition-delay: 2.1s; + } + + .items.onscroll-fade-in > *:nth-child(16) > .inner { + -moz-transition-delay: 2.25s; + -webkit-transition-delay: 2.25s; + -ms-transition-delay: 2.25s; + transition-delay: 2.25s; + } + + .items.onscroll-fade-in > *:nth-child(17) > .inner { + -moz-transition-delay: 2.4s; + -webkit-transition-delay: 2.4s; + -ms-transition-delay: 2.4s; + transition-delay: 2.4s; + } + + .items.onscroll-fade-in.is-inactive > * > .inner { + opacity: 0; + } + +/* Items (style1) */ + + .items.style1 { + 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; + margin: 3rem 0; + position: relative; + } + + .items.style1 > * { + -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; + border-style: solid; + border-left-width: 1px; + border-top-width: 1px; + } + + .items.style1.big > * { + padding: 3.5rem 3.5rem 1.5rem 3.5rem ; + width: 50%; + } + + .items.style1.big > *:nth-child(-n + 2) { + border-top-width: 0; + } + + .items.style1.big > *:nth-child(2n + 1) { + border-left-width: 0; + } + + .items.style1.medium > * { + padding: 2.1875rem 2.1875rem 0.1875rem 2.1875rem ; + width: 33.33333%; + } + + .items.style1.medium > *:nth-child(-n + 3) { + border-top-width: 0; + } + + .items.style1.medium > *:nth-child(3n + 1) { + border-left-width: 0; + } + + .items.style1.small > * { + padding: 1.3125rem 1.3125rem 0.1rem 1.3125rem ; + width: 25%; + } + + .items.style1.small > *:nth-child(-n + 4) { + border-top-width: 0; + } + + .items.style1.small > *:nth-child(4n + 1) { + border-left-width: 0; + } + + @media screen and (max-width: 1280px) { + + .items.style1.small > *:nth-child(-n + 4) { + border-top-width: 1px; + } + + .items.style1.small > *:nth-child(4n + 1) { + border-left-width: 1px; + } + + .items.style1.small > * { + padding: 2.1875rem 2.1875rem 0.1875rem 2.1875rem ; + width: 33.33333%; + } + + .items.style1.small > *:nth-child(-n + 3) { + border-top-width: 0; + } + + .items.style1.small > *:nth-child(3n + 1) { + border-left-width: 0; + } + + } + + @media screen and (max-width: 980px) { + + .items.style1.medium > *:nth-child(-n + 3) { + border-top-width: 1px; + } + + .items.style1.medium > *:nth-child(3n + 1) { + border-left-width: 1px; + } + + .items.style1.medium > * { + padding: 3.5rem 3.5rem 1.5rem 3.5rem ; + width: 50%; + } + + .items.style1.medium > *:nth-child(-n + 2) { + border-top-width: 0; + } + + .items.style1.medium > *:nth-child(2n + 1) { + border-left-width: 0; + } + + .items.style1.small > *:nth-child(-n + 3) { + border-top-width: 1px; + } + + .items.style1.small > *:nth-child(3n + 1) { + border-left-width: 1px; + } + + .items.style1.small > * { + padding: 3.5rem 3.5rem 1.5rem 3.5rem ; + width: 50%; + } + + .items.style1.small > *:nth-child(-n + 2) { + border-top-width: 0; + } + + .items.style1.small > *:nth-child(2n + 1) { + border-left-width: 0; + } + + } + + @media screen and (max-width: 480px) { + + .items.style1.big > *:nth-child(-n + 2) { + border-top-width: 1px; + } + + .items.style1.big > *:nth-child(2n + 1) { + border-left-width: 1px; + } + + .items.style1.big > * { + padding: 2.625rem 2.625rem 0.625rem 2.625rem ; + width: 100%; + } + + .items.style1.big > *:nth-child(-n + 1) { + border-top-width: 0; + } + + .items.style1.big > *:nth-child(1n + 1) { + border-left-width: 0; + } + + .items.style1.medium > *:nth-child(-n + 2) { + border-top-width: 1px; + } + + .items.style1.medium > *:nth-child(2n + 1) { + border-left-width: 1px; + } + + .items.style1.medium > * { + padding: 2.625rem 2.625rem 0.625rem 2.625rem ; + width: 100%; + } + + .items.style1.medium > *:nth-child(-n + 1) { + border-top-width: 0; + } + + .items.style1.medium > *:nth-child(1n + 1) { + border-left-width: 0; + } + + .items.style1.small > *:nth-child(-n + 2) { + border-top-width: 1px; + } + + .items.style1.small > *:nth-child(2n + 1) { + border-left-width: 1px; + } + + .items.style1.small > * { + padding: 2.625rem 2.625rem 0.625rem 2.625rem ; + width: 100%; + } + + .items.style1.small > *:nth-child(-n + 1) { + border-top-width: 0; + } + + .items.style1.small > *:nth-child(1n + 1) { + border-left-width: 0; + } + + .items.style1.big > *, .items.style1.medium > *, .items.style1.small > * { + padding-left: 0; + padding-right: 0; + } + + .items.style1.big > :first-child, .items.style1.medium > :first-child, .items.style1.small > :first-child { + padding-top: 0; + } + + .items.style1.big > :last-child, .items.style1.medium > :last-child, .items.style1.small > :last-child { + padding-bottom: 0; + } + + .items.style1.big > :last-child > .inner > :last-child, .items.style1.medium > :last-child > .inner > :last-child, .items.style1.small > :last-child > .inner > :last-child { + margin-bottom: 0; + } + + } + +/* Items (style2) */ + + .items.style2 { + 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; + margin: 3rem 0; + position: relative; + border: solid 1px; + border-radius: 4px; + } + + .items.style2 > * { + -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; + border-style: solid; + border-left-width: 1px; + border-top-width: 1px; + } + + .items.style2.big > * { + padding: 3.5rem 3.5rem 1.5rem 3.5rem ; + width: 50%; + } + + .items.style2.big > *:nth-child(-n + 2) { + border-top-width: 0; + } + + .items.style2.big > *:nth-child(2n + 1) { + border-left-width: 0; + } + + .items.style2.medium > * { + padding: 2.1875rem 2.1875rem 0.1875rem 2.1875rem ; + width: 33.33333%; + } + + .items.style2.medium > *:nth-child(-n + 3) { + border-top-width: 0; + } + + .items.style2.medium > *:nth-child(3n + 1) { + border-left-width: 0; + } + + .items.style2.small > * { + padding: 1.3125rem 1.3125rem 0.1rem 1.3125rem ; + width: 25%; + } + + .items.style2.small > *:nth-child(-n + 4) { + border-top-width: 0; + } + + .items.style2.small > *:nth-child(4n + 1) { + border-left-width: 0; + } + + @media screen and (max-width: 1280px) { + + .items.style2.small > *:nth-child(-n + 4) { + border-top-width: 1px; + } + + .items.style2.small > *:nth-child(4n + 1) { + border-left-width: 1px; + } + + .items.style2.small > * { + padding: 2.1875rem 2.1875rem 0.1875rem 2.1875rem ; + width: 33.33333%; + } + + .items.style2.small > *:nth-child(-n + 3) { + border-top-width: 0; + } + + .items.style2.small > *:nth-child(3n + 1) { + border-left-width: 0; + } + + } + + @media screen and (max-width: 980px) { + + .items.style2.medium > *:nth-child(-n + 3) { + border-top-width: 1px; + } + + .items.style2.medium > *:nth-child(3n + 1) { + border-left-width: 1px; + } + + .items.style2.medium > * { + padding: 3.5rem 3.5rem 1.5rem 3.5rem ; + width: 50%; + } + + .items.style2.medium > *:nth-child(-n + 2) { + border-top-width: 0; + } + + .items.style2.medium > *:nth-child(2n + 1) { + border-left-width: 0; + } + + .items.style2.small > *:nth-child(-n + 3) { + border-top-width: 1px; + } + + .items.style2.small > *:nth-child(3n + 1) { + border-left-width: 1px; + } + + .items.style2.small > * { + padding: 3.5rem 3.5rem 1.5rem 3.5rem ; + width: 50%; + } + + .items.style2.small > *:nth-child(-n + 2) { + border-top-width: 0; + } + + .items.style2.small > *:nth-child(2n + 1) { + border-left-width: 0; + } + + } + + @media screen and (max-width: 480px) { + + .items.style2.big > *:nth-child(-n + 2) { + border-top-width: 1px; + } + + .items.style2.big > *:nth-child(2n + 1) { + border-left-width: 1px; + } + + .items.style2.big > * { + padding: 2.625rem 2.625rem 0.625rem 2.625rem ; + width: 100%; + } + + .items.style2.big > *:nth-child(-n + 1) { + border-top-width: 0; + } + + .items.style2.big > *:nth-child(1n + 1) { + border-left-width: 0; + } + + .items.style2.medium > *:nth-child(-n + 2) { + border-top-width: 1px; + } + + .items.style2.medium > *:nth-child(2n + 1) { + border-left-width: 1px; + } + + .items.style2.medium > * { + padding: 2.625rem 2.625rem 0.625rem 2.625rem ; + width: 100%; + } + + .items.style2.medium > *:nth-child(-n + 1) { + border-top-width: 0; + } + + .items.style2.medium > *:nth-child(1n + 1) { + border-left-width: 0; + } + + .items.style2.small > *:nth-child(-n + 2) { + border-top-width: 1px; + } + + .items.style2.small > *:nth-child(2n + 1) { + border-left-width: 1px; + } + + .items.style2.small > * { + padding: 2.625rem 2.625rem 0.625rem 2.625rem ; + width: 100%; + } + + .items.style2.small > *:nth-child(-n + 1) { + border-top-width: 0; + } + + .items.style2.small > *:nth-child(1n + 1) { + border-left-width: 0; + } + + } + +/* Items (style3) */ + + .items.style3 { + 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; + margin: 3rem 0; + position: relative; + } + + .items.style3 > * { + -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; + } + + .items.style3.big > * { + padding: 1.75rem 1.75rem 0.1rem 1.75rem ; + width: 50%; + } + + .items.style3.medium > * { + padding: 1.09375rem 1.09375rem 0.1rem 1.09375rem ; + width: 33.33333%; + } + + .items.style3.small > * { + padding: 0.65625rem 0.65625rem 0.1rem 0.65625rem ; + width: 25%; + } + + @media screen and (max-width: 1280px) { + + .items.style3.small > * { + padding: 1.09375rem 1.09375rem 0.1rem 1.09375rem ; + width: 33.33333%; + } + + } + + @media screen and (max-width: 980px) { + + .items.style3.medium > * { + padding: 1.75rem 1.75rem 0.1rem 1.75rem ; + width: 50%; + } + + .items.style3.small > * { + padding: 1.75rem 1.75rem 0.1rem 1.75rem ; + width: 50%; + } + + } + + @media screen and (max-width: 736px) { + + .items.style3 { + margin: 2rem 0; + } + + } + + @media screen and (max-width: 480px) { + + .items.style3.big > * { + padding: 1.3125rem 1.3125rem 0.1rem 1.3125rem ; + width: 100%; + } + + .items.style3.medium > * { + padding: 1.3125rem 1.3125rem 0.1rem 1.3125rem ; + width: 100%; + } + + .items.style3.small > * { + padding: 1.3125rem 1.3125rem 0.1rem 1.3125rem ; + width: 100%; + } + + .items.style3.big > *, .items.style3.medium > *, .items.style3.small > * { + padding-left: 0; + padding-right: 0; + } + + .items.style3.big > :first-child, .items.style3.medium > :first-child, .items.style3.small > :first-child { + padding-top: 0; + } + + .items.style3.big > :last-child, .items.style3.medium > :last-child, .items.style3.small > :last-child { + padding-bottom: 0; + } + + .items.style3.big > :last-child > .inner > :last-child, .items.style3.medium > :last-child > .inner > :last-child, .items.style3.small > :last-child > .inner > :last-child { + margin-bottom: 0; + } + + } + + .items.style1 > * { + border-color: rgba(0, 0, 0, 0.2); + } + + .items.style2 { + border-color: rgba(0, 0, 0, 0.2); + } + + .items.style2 > * { + border-color: rgba(0, 0, 0, 0.2); + } + +/* Index */ + + .index > * { + padding: 3rem 0 1rem 0 ; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + border-top: solid 1px; + } + + .index > * > header { + -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; + width: 15rem; + } + + .index > * > .content { + -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; + } + + .index > :first-child { + border-top: 0; + } + + @media screen and (max-width: 980px) { + + .index > * > header { + width: 11rem; + } + + } + + @media screen and (max-width: 736px) { + + .index > * > header { + width: 10rem; + } + + } + + @media screen and (max-width: 480px) { + + .index > * { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .index > * > header { + width: 100%; + } + + } + + .index > * { + border-top-color: rgba(0, 0, 0, 0.2); + } + +/* Wrapper */ + + #wrapper { + background-color: inherit; + width: 100%; + overflow-x: hidden; + } + + #wrapper > .invert { + background-color: #000000; + color: #ffffff; + } + + #wrapper > .invert input, #wrapper > .invert select, #wrapper > .invert textarea { + color: #ffffff; + } + + #wrapper > .invert a { + color: #ffffff; + } + + #wrapper > .invert a:hover { + color: #47D3E5; + } + + #wrapper > .invert strong, #wrapper > .invert b { + color: #ffffff; + } + + #wrapper > .invert h1, #wrapper > .invert h2, #wrapper > .invert h3, #wrapper > .invert h4, #wrapper > .invert h5, #wrapper > .invert h6 { + color: #ffffff; + } + + #wrapper > .invert blockquote { + border-left-color: white; + } + + #wrapper > .invert code { + background: rgba(255, 255, 255, 0.125); + border-color: white; + } + + #wrapper > .invert hr { + border-bottom-color: white; + } + + #wrapper > .invert .box { + border-color: white; + } + + #wrapper > .invert input[type="submit"], + #wrapper > .invert input[type="reset"], + #wrapper > .invert input[type="button"], + #wrapper > .invert button, + #wrapper > .invert .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px white; + color: #ffffff !important; + } + + #wrapper > .invert input[type="submit"]:hover, + #wrapper > .invert input[type="reset"]:hover, + #wrapper > .invert input[type="button"]:hover, + #wrapper > .invert button:hover, + #wrapper > .invert .button:hover { + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5 !important; + } + + #wrapper > .invert input[type="submit"]:active, + #wrapper > .invert input[type="reset"]:active, + #wrapper > .invert input[type="button"]:active, + #wrapper > .invert button:active, + #wrapper > .invert .button:active { + background-color: rgba(71, 211, 229, 0.2); + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5 !important; + } + + #wrapper > .invert input[type="submit"].primary, + #wrapper > .invert input[type="reset"].primary, + #wrapper > .invert input[type="button"].primary, + #wrapper > .invert button.primary, + #wrapper > .invert .button.primary { + background-color: #ffffff; + box-shadow: none; + color: #000000 !important; + } + + #wrapper > .invert input[type="submit"].primary:hover, + #wrapper > .invert input[type="reset"].primary:hover, + #wrapper > .invert input[type="button"].primary:hover, + #wrapper > .invert button.primary:hover, + #wrapper > .invert .button.primary:hover { + background-color: #47D3E5; + } + + #wrapper > .invert input[type="submit"].primary:active, + #wrapper > .invert input[type="reset"].primary:active, + #wrapper > .invert input[type="button"].primary:active, + #wrapper > .invert button.primary:active, + #wrapper > .invert .button.primary:active { + background-color: #1ebdd1; + } + + #wrapper > .invert label { + color: #ffffff; + } + + #wrapper > .invert input[type="text"], + #wrapper > .invert input[type="password"], + #wrapper > .invert input[type="email"], + #wrapper > .invert input[type="tel"], + #wrapper > .invert input[type="search"], + #wrapper > .invert input[type="url"], + #wrapper > .invert select, + #wrapper > .invert textarea { + border-color: white; + } + + #wrapper > .invert input[type="text"]:focus, + #wrapper > .invert input[type="password"]:focus, + #wrapper > .invert input[type="email"]:focus, + #wrapper > .invert input[type="tel"]:focus, + #wrapper > .invert input[type="search"]:focus, + #wrapper > .invert input[type="url"]:focus, + #wrapper > .invert select:focus, + #wrapper > .invert textarea:focus { + border-color: #47D3E5; + box-shadow: 0 0 0 1px #47D3E5; + } + + #wrapper > .invert 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.2)' /%3E%3C/svg%3E"); + } + + #wrapper > .invert select option { + color: #000000; + background: #ffffff; + } + + #wrapper > .invert input[type="checkbox"] + label, + #wrapper > .invert input[type="radio"] + label { + color: #ffffff; + } + + #wrapper > .invert input[type="checkbox"] + label:before, + #wrapper > .invert input[type="radio"] + label:before { + border-color: white; + } + + #wrapper > .invert input[type="checkbox"]:checked + label:before, + #wrapper > .invert input[type="radio"]:checked + label:before { + background-color: #ffffff; + border-color: #ffffff; + color: #000000; + } + + #wrapper > .invert input[type="checkbox"]:focus + label:before, + #wrapper > .invert input[type="radio"]:focus + label:before { + border-color: #47D3E5; + box-shadow: 0 0 0 1px #47D3E5; + } + + #wrapper > .invert ::-webkit-input-placeholder { + color: #ffffff !important; + } + + #wrapper > .invert :-moz-placeholder { + color: #ffffff !important; + } + + #wrapper > .invert ::-moz-placeholder { + color: #ffffff !important; + } + + #wrapper > .invert :-ms-input-placeholder { + color: #ffffff !important; + } + + #wrapper > .invert .icon.style2:before { + box-shadow: inset 0 0 0 1px white; + } + + #wrapper > .invert a.icon.style2:hover:before { + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5; + } + + #wrapper > .invert a.icon.style2:active:before { + background-color: rgba(71, 211, 229, 0.1); + box-shadow: inset 0 0 0 1px #47D3E5; + color: #47D3E5; + } + + #wrapper > .invert ul.alt li { + border-top-color: white; + } + + #wrapper > .invert header p { + color: #ffffff; + } + + #wrapper > .invert table tbody tr { + border-color: white; + } + + #wrapper > .invert table tbody tr:nth-child(2n + 1) { + background-color: rgba(255, 255, 255, 0.125); + } + + #wrapper > .invert table tbody tr.alt { + background-color: rgba(255, 255, 255, 0.125) !important; + } + + #wrapper > .invert table th { + color: #ffffff; + } + + #wrapper > .invert table thead { + border-bottom-color: white; + } + + #wrapper > .invert table tfoot { + border-top-color: white; + } + + #wrapper > .invert table.alt tbody tr td { + border-color: white; + } + + #wrapper > .invert table.uniform tbody tr:nth-child(2n + 1) { + background-color: transparent; + } + + #wrapper > .invert .banner .image { + background-color: rgba(255, 255, 255, 0.125); + } + + #wrapper > .invert .banner.style4 .image { + border-color: white; + background-color: white; + border-width: 1px; + } + + #wrapper > .invert .banner.style4 .image:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='11' y='12' width='42' height='8' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: white; + width: calc(100% + 2px); + margin-left: -1px; + } + + #wrapper > .invert .banner.style4 .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Ccircle cx='32' cy='16' r='14' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: white; + width: calc(100% + 2px); + margin-left: -1px; + } + + #wrapper > .invert .banner.style4.android .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='6' y='4' width='52' height='24' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + } + + #wrapper > .invert .spotlight .image { + background-color: rgba(255, 255, 255, 0.125); + } + + #wrapper > .invert .spotlight.style3 .image { + border-color: white; + background-color: white; + border-width: 1px; + } + + #wrapper > .invert .spotlight.style3 .image:before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='11' y='12' width='42' height='8' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: white; + width: calc(100% + 2px); + margin-left: -1px; + } + + #wrapper > .invert .spotlight.style3 .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Ccircle cx='32' cy='16' r='14' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + border-color: white; + width: calc(100% + 2px); + margin-left: -1px; + } + + #wrapper > .invert .spotlight.style3.android .image:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='32px' viewBox='0 0 64 32' zoomAndPan='disable'%3E%3Cstyle%3Erect %7Bfill: transparent%3B stroke: white%3B stroke-width: 1px%3B %7D%3C/style%3E%3Crect rx='4' ry='4' x='6' y='4' width='52' height='24' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E"); + } + + #wrapper > .invert .gallery article .image { + background-color: rgba(255, 255, 255, 0.125); + } + + #wrapper > .invert .items.style1 > * { + border-color: white; + } + + #wrapper > .invert .items.style2 { + border-color: white; + } + + #wrapper > .invert .items.style2 > * { + border-color: white; + } + + #wrapper > .invert .index > * { + border-top-color: white; + } + + #wrapper > .color1 { + background-color: #30363d; + } + + #wrapper > .color2 { + background-color: #db8992; + } + + #wrapper > .color3 { + background-color: #ab7aad; + } + + #wrapper > .color4 { + background-color: #897cad; + } + + #wrapper > .color5 { + background-color: #7794ce; + } + + #wrapper > .color6 { + background-color: #64abb4; + } + + #wrapper > .color7 { + background-color: #6ba78c; + } + + #wrapper.divided > * { + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.075); + } + + #wrapper.divided > *:first-child { + box-shadow: none !important; + } + + #wrapper.divided > .invert { + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.125); + } + + #wrapper.divided > .invert:first-child { + box-shadow: none !important; + } diff --git a/assets/css/noscript.css b/assets/css/noscript.css new file mode 100644 index 0000000..79a168f --- /dev/null +++ b/assets/css/noscript.css @@ -0,0 +1,387 @@ +/* + Story by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Banner (transitions) */ + + .banner.onload-content-fade-up .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-content-fade-up .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onload-content-fade-down .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-content-fade-down .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onload-content-fade-left .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-content-fade-left .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onload-content-fade-right .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-content-fade-right .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onload-content-fade-in .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-content-fade-in .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onload-image-fade-up .image { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onload-image-fade-up .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-image-fade-up .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + body.is-preload .banner.onload-image-fade-up .image img { + opacity: 1; + } + + .banner.onload-image-fade-down .image { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onload-image-fade-down .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-image-fade-down .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + body.is-preload .banner.onload-image-fade-down .image img { + opacity: 1; + } + + .banner.onload-image-fade-left .image { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onload-image-fade-left .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-image-fade-left .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + body.is-preload .banner.onload-image-fade-left .image img { + opacity: 1; + } + + .banner.onload-image-fade-right .image { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onload-image-fade-right .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-image-fade-right .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + body.is-preload .banner.onload-image-fade-right .image img { + opacity: 1; + } + + .banner.onload-image-fade-in .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + body.is-preload .banner.onload-image-fade-in .image img { + opacity: 1; + } + + .banner.onscroll-content-fade-up .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-content-fade-up.is-inactive .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-content-fade-down .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-content-fade-down.is-inactive .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-content-fade-left .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-content-fade-left.is-inactive .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-content-fade-right .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-content-fade-right.is-inactive .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-content-fade-in .content { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-content-fade-in.is-inactive .content { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-image-fade-up .image { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-up .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-up.is-inactive .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-image-fade-up.is-inactive .image img { + opacity: 1; + } + + .banner.onscroll-image-fade-down .image { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-down .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-down.is-inactive .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-image-fade-down.is-inactive .image img { + opacity: 1; + } + + .banner.onscroll-image-fade-left .image { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-left .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-left.is-inactive .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-image-fade-left.is-inactive .image img { + opacity: 1; + } + + .banner.onscroll-image-fade-right .image { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-right .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-right.is-inactive .image { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; + opacity: 1; + } + + .banner.onscroll-image-fade-right.is-inactive .image img { + opacity: 1; + } + + .banner.onscroll-image-fade-in .image img { + -moz-transition: none; + -webkit-transition: none; + -ms-transition: none; + transition: none; + } + + .banner.onscroll-image-fade-in.is-inactive .image img { + opacity: 1; + } \ No newline at end of file diff --git a/assets/js/breakpoints.min.js b/assets/js/breakpoints.min.js new file mode 100644 index 0000000..e20ae89 --- /dev/null +++ b/assets/js/breakpoints.min.js @@ -0,0 +1,2 @@ +/* breakpoints.js v1.0 | @ajlkn | MIT licensed */ +var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e' + + '.demo-animate-all:not(.gallery), .demo-animate-all:not(.gallery) *, .demo-animate-all:not(.gallery) *:before, .demo-animate-all:not(.gallery) *:after { transition: all 0.5s ease-in-out; }' + + '.demo-controls .property .classes { display: none; }' + + '.demo-controls .property[data-requires] { display: none; }' + + '.demo-controls .property[data-requires].active { display: inline; }' + + '.demo-controls .property .tooltip { position: relative; }' + + '.demo-controls .property .tooltip:before { content: \'Click to change!\'; font-size: 0.7rem; position: absolute; bottom: 100%; left: 0; background: #47D3E5; color: #ffffff; line-height: 1; white-space: nowrap; font-weight: bold; border-radius: 0.125rem; padding: 0.325rem 0.425rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' + + '.demo-controls .property .tooltip:after { content: \'\'; position: absolute; bottom: calc(100% - 0.25rem); left: 0.5rem; border-left: solid 0.5rem transparent; border-right: solid 0.5rem transparent; border-top: solid 0.5rem #47D3E5; width: 0.5rem; height: 0.5rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' + + '@keyframes demo-controls-tooltip {' + + '0% { opacity: 0; transform: translateY(0); }' + + '10% { opacity: 1; transform: translateY(0.125rem); }' + + '20% { opacity: 1; transform: translateY(-0.125rem); }' + + '30% { opacity: 1; transform: translateY(0.125rem); }' + + '40% { opacity: 1; transform: translateY(-0.125rem); }' + + '50% { opacity: 1; transform: translateY(0.125rem); }' + + '60% { opacity: 1; transform: translateY(0); }' + + '90% { opacity: 1; }' + + '100% { opacity: 0; }' + + '}' + + '' + ).appendTo($('head')); + + // Functions. + $.fn.demo_controls = function(styles, userOptions) { + + var $this = $(this), + $styleProperty, $stylePropertyClasses, + $controls, $x, $y, $z, + options, + current, i, j, k, s, n, count; + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).demo_controls(styles, userOptions); + + return $this; + + } + + // Options. + options = $.extend({ + target: null, + palette: true + }, userOptions); + + // Controls. + if (styles) { + + $controls = $( + '' + + '' + + 'style' + + '' + (options.palette ? ', ' : ' ') + + '' + + (options.palette ? + '' + + 'scheme' + + '' + + 'default' + + 'invert' + + ', ' + + '' + + '' + + 'color' + + '' + + 'default' + + 'color1' + + 'color2' + + 'color3' + + 'color4' + + 'color5' + + 'color6' + + 'color7' + + ', ' + + '' + : '') + + '' + ); + + } + else { + + $controls = $( + '' + + (options.palette ? + '' + + 'scheme' + + '' + + 'default' + + 'invert' + + ' and ' + + '' + + '' + + 'color' + + '' + + 'default' + + 'color1' + + 'color2' + + 'color3' + + 'color4' + + 'color5' + + 'color6' + + 'color7' + + '' + + '' + : '') + + '' + ); + + } + + // Target. + switch (options.target) { + + case 'previous': + $this.prev().find('.demo-controls').replaceWith($controls); + break; + + default: + $this.find('.demo-controls').replaceWith($controls); + break; + + } + + // Styles. + if (styles) { + + $styleProperty = $controls.find('.property[data-name="style"]'); + $stylePropertyClasses = $styleProperty.children('.classes'); + + for (i in styles) { + + current = false; + count = Object.keys(styles[i]).length; + n = 1; + + // Add to style property. + $x = $(', ' + i + '') + .appendTo($stylePropertyClasses); + + if ($this.hasClass(i)) { + + $x.addClass('active'); + current = true; + + } + + // Step through properties. + for (j in styles[i]) { + + $x = $( + '' + + (n == count ? 'and ' : '') + + '' + j + '' + + '' + + '' + (n < count ? ', ' : '') + + '' + ).appendTo($controls); + + $y = $x.children('.classes'); + + if (current) + $x.addClass('active'); + + for (k in styles[i][j]) { + + $z = $(', ' + styles[i][j][k].replace('*', '') + '') + .appendTo($y); + + if (styles[i][j][k].substr(-1, 1) == '*') + $z.addClass('default'); + + if (current + && $this.hasClass(k)) + $z.addClass('active'); + + } + + n++; + + } + + } + + } + + // Events. + $controls.on('click', 'a', function(event) { + event.preventDefault(); + }); + + $controls.on('click', '.property.active', function(event) { + + var $property = $(this); + var $classes = $property.find('.classes > *'); + var $current = $classes.filter('.active'); + var $next; + + // Determine next. + if ($current.length == 0 + || $current.index() == $classes.length - 1) + $next = $classes.first(); + else + $next = $current.next(); + + // Turn on animate all. + $this.addClass('demo-animate-all'); + + // Deactivate current. + $current.removeClass('active'); + $this.removeClass($current.data('class')); + + // Activate next. + $next.addClass('active'); + $this.addClass($next.data('class')); + + // Turn off animate all. + setTimeout(function() { + $this.removeClass('demo-animate-all'); + }, 500); + + }); + + $controls.on('click', '.property[data-name="style"]', function(event) { + + var $property = $(this); + var $classes = $property.find('.classes > *'); + var $current = $classes.filter('.active'); + var $next; + + // Determine next. + if ($current.length == 0 + || $current.index() == $classes.length - 1) + $next = $classes.first(); + else + $next = $current.next(); + + // Turn on animate all. + $this.addClass('demo-animate-all'); + + // Deactivate current. + $current.removeClass('active'); + $this.removeClass($current.data('class')); + + $controls.find('.property[data-requires="' + $current.data('class') + '"]') + .removeClass('active'); + + $controls.find('.property[data-requires="' + $current.data('class') + '"] > .classes > .active').each(function() { + + $(this).removeClass('active'); + + if ($(this).data('class') != '-') + $this.removeClass($(this).data('class')); + + }); + + // Activate next. + $next.addClass('active'); + $this.addClass($next.data('class')); + + $controls.find('.property[data-requires="' + $next.data('class') + '"]') + .addClass('active'); + + $controls.find('.property[data-requires="' + $next.data('class') + '"] > .classes > .default').each(function() { + + $(this).addClass('active'); + + if ($(this).data('class') != '-') + $this.addClass($(this).data('class')); + + }); + + // Turn off animate all. + setTimeout(function() { + $this.removeClass('demo-animate-all'); + }, 500); + + }); + + }; + + // Elements. + + // Wrappers. + $('.wrapper').demo_controls(null, { + palette: true + }); + + // Banner. + $('.banner').demo_controls({ + style1: { + 'size': { + '-': 'normal', + 'fullscreen': 'fullscreen*' + }, + 'orientation': { + 'orient-left': 'left*', + 'orient-right': 'right' + }, + 'content alignment': { + 'content-align-left': 'left*', + 'content-align-center': 'center', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + }, + style2: { + 'size': { + '-': 'normal', + 'fullscreen': 'fullscreen*' + }, + 'orientation': { + 'orient-left': 'left', + 'orient-center': 'center*', + 'orient-right': 'right' + }, + 'content alignment': { + 'content-align-left': 'left', + 'content-align-center': 'center*', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + }, + style3: { + 'size': { + '-': 'normal', + 'fullscreen': 'fullscreen*' + }, + 'orientation': { + 'orient-left': 'left', + 'orient-right': 'right*' + }, + 'content alignment': { + 'content-align-left': 'left*', + 'content-align-center': 'center', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + }, + style4: { + 'size': { + '-': 'normal', + 'fullscreen': 'fullscreen*' + }, + 'phone type': { + 'iphone': 'iphone*', + 'android': 'android' + }, + 'orientation': { + 'orient-left': 'left', + 'orient-right': 'right*' + }, + 'content alignment': { + 'content-align-left': 'left*', + 'content-align-center': 'center', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + }, + style5: { + 'size': { + '-': 'normal', + 'fullscreen': 'fullscreen*' + }, + 'content alignment': { + 'content-align-left': 'left', + 'content-align-center': 'center*', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + } + }); + + // Spotlight. + $('.spotlight').demo_controls({ + style1: { + 'orientation': { + 'orient-left': 'left', + 'orient-right': 'right*' + }, + 'content alignment': { + 'content-align-left': 'left*', + 'content-align-center': 'center', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left*', + 'image-position-center': 'center', + 'image-position-right': 'right' + } + }, + style2: { + 'orientation': { + 'orient-left': 'left', + 'orient-right': 'right*' + }, + 'content alignment': { + 'content-align-left': 'left*', + 'content-align-center': 'center', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + }, + style3: { + 'phone type': { + 'iphone': 'iphone*', + 'android': 'android' + }, + 'orientation': { + 'orient-left': 'left', + 'orient-right': 'right*' + }, + 'content alignment': { + 'content-align-left': 'left*', + 'content-align-center': 'center', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + }, + style4: { + 'size': { + '-size': 'normal', + 'fullscreen': 'fullscreen*', + 'halfscreen': 'halfscreen' + }, + 'orientation': { + 'orient-left': 'left*', + 'orient-center': 'center', + 'orient-right': 'right' + }, + 'content alignment': { + 'content-align-left': 'left*', + 'content-align-center': 'center', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + }, + style5: { + 'size': { + '-size': 'normal', + 'fullscreen': 'fullscreen*', + 'halfscreen': 'halfscreen' + }, + 'orientation': { + 'orient-left': 'left*', + 'orient-center': 'center', + 'orient-right': 'right' + }, + 'content alignment': { + 'content-align-left': 'left*', + 'content-align-center': 'center', + 'content-align-right': 'right' + }, + 'image position': { + 'image-position-left': 'left', + 'image-position-center': 'center*', + 'image-position-right': 'right' + } + }, + }); + + // Gallery. + $('.gallery').demo_controls({ + style1: { + 'size': { + 'small': 'small', + 'medium': 'medium*', + 'big': 'big' + } + }, + style2: { + 'size': { + 'small': 'small', + 'medium': 'medium*', + 'big': 'big' + } + }, + }, { + target: 'previous', + palette: false + }); + + // Items. + $('.items').demo_controls({ + style1: { + 'size': { + 'small': 'small', + 'medium': 'medium*', + 'big': 'big' + } + }, + style2: { + 'size': { + 'small': 'small', + 'medium': 'medium*', + 'big': 'big' + } + }, + style3: { + 'size': { + 'small': 'small', + 'medium': 'medium*', + 'big': 'big' + } + } + }, { + target: 'previous', + palette: false + }); + +})(jQuery); \ No newline at end of file diff --git a/assets/js/jquery.min.js b/assets/js/jquery.min.js new file mode 100644 index 0000000..c4c6022 --- /dev/null +++ b/assets/js/jquery.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 01){for(var r=0;r=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n1){for(o=0;o $window.height()) + $x.css('height', 'auto'); + else + $x.css('height', '100vh'); + + }, 250); + + }).triggerHandler('resize.flexbox-fix'); + + })(); + + // Object fit workaround. + if (!browser.canUse('object-fit')) + (function() { + + $('.banner .image, .spotlight .image').each(function() { + + var $this = $(this), + $img = $this.children('img'), + positionClass = $this.parent().attr('class').match(/image-position-([a-z]+)/); + + // Set image. + $this + .css('background-image', 'url("' + $img.attr('src') + '")') + .css('background-repeat', 'no-repeat') + .css('background-size', 'cover'); + + // Set position. + switch (positionClass.length > 1 ? positionClass[1] : '') { + + case 'left': + $this.css('background-position', 'left'); + break; + + case 'right': + $this.css('background-position', 'right'); + break; + + default: + case 'center': + $this.css('background-position', 'center'); + break; + + } + + // Hide original. + $img.css('opacity', '0'); + + }); + + })(); + + // Smooth scroll. + $('.smooth-scroll').scrolly(); + $('.smooth-scroll-middle').scrolly({ anchor: 'middle' }); + + // Wrapper. + $wrapper.children() + .scrollex({ + top: '30vh', + bottom: '30vh', + initialize: function() { + $(this).addClass('is-inactive'); + }, + terminate: function() { + $(this).removeClass('is-inactive'); + }, + enter: function() { + $(this).removeClass('is-inactive'); + }, + leave: function() { + + var $this = $(this); + + if ($this.hasClass('onscroll-bidirectional')) + $this.addClass('is-inactive'); + + } + }); + + // Items. + $('.items') + .scrollex({ + top: '30vh', + bottom: '30vh', + delay: 50, + initialize: function() { + $(this).addClass('is-inactive'); + }, + terminate: function() { + $(this).removeClass('is-inactive'); + }, + enter: function() { + $(this).removeClass('is-inactive'); + }, + leave: function() { + + var $this = $(this); + + if ($this.hasClass('onscroll-bidirectional')) + $this.addClass('is-inactive'); + + } + }) + .children() + .wrapInner('
'); + + // Gallery. + $('.gallery') + .wrapInner('
') + .prepend(browser.mobile ? '' : '
') + .scrollex({ + top: '30vh', + bottom: '30vh', + delay: 50, + initialize: function() { + $(this).addClass('is-inactive'); + }, + terminate: function() { + $(this).removeClass('is-inactive'); + }, + enter: function() { + $(this).removeClass('is-inactive'); + }, + leave: function() { + + var $this = $(this); + + if ($this.hasClass('onscroll-bidirectional')) + $this.addClass('is-inactive'); + + } + }) + .children('.inner') + //.css('overflow', 'hidden') + .css('overflow-y', browser.mobile ? 'visible' : 'hidden') + .css('overflow-x', browser.mobile ? 'scroll' : 'hidden') + .scrollLeft(0); + + // Style #1. + // ... + + // Style #2. + $('.gallery') + .on('wheel', '.inner', function(event) { + + var $this = $(this), + delta = (event.originalEvent.deltaX * 10); + + // Cap delta. + if (delta > 0) + delta = Math.min(25, delta); + else if (delta < 0) + delta = Math.max(-25, delta); + + // Scroll. + $this.scrollLeft( $this.scrollLeft() + delta ); + + }) + .on('mouseenter', '.forward, .backward', function(event) { + + var $this = $(this), + $inner = $this.siblings('.inner'), + direction = ($this.hasClass('forward') ? 1 : -1); + + // Clear move interval. + clearInterval(this._gallery_moveIntervalId); + + // Start interval. + this._gallery_moveIntervalId = setInterval(function() { + $inner.scrollLeft( $inner.scrollLeft() + (5 * direction) ); + }, 10); + + }) + .on('mouseleave', '.forward, .backward', function(event) { + + // Clear move interval. + clearInterval(this._gallery_moveIntervalId); + + }); + + // Lightbox. + $('.gallery.lightbox') + .on('click', 'a', function(event) { + + var $a = $(this), + $gallery = $a.parents('.gallery'), + $modal = $gallery.children('.modal'), + $modalImg = $modal.find('img'), + href = $a.attr('href'); + + // Not an image? Bail. + if (!href.match(/\.(jpg|gif|png|mp4)$/)) + return; + + // Prevent default. + event.preventDefault(); + event.stopPropagation(); + + // Locked? Bail. + if ($modal[0]._locked) + return; + + // Lock. + $modal[0]._locked = true; + + // Set src. + $modalImg.attr('src', href); + + // Set visible. + $modal.addClass('visible'); + + // Focus. + $modal.focus(); + + // Delay. + setTimeout(function() { + + // Unlock. + $modal[0]._locked = false; + + }, 600); + + }) + .on('click', '.modal', function(event) { + + var $modal = $(this), + $modalImg = $modal.find('img'); + + // Locked? Bail. + if ($modal[0]._locked) + return; + + // Already hidden? Bail. + if (!$modal.hasClass('visible')) + return; + + // Lock. + $modal[0]._locked = true; + + // Clear visible, loaded. + $modal + .removeClass('loaded') + + // Delay. + setTimeout(function() { + + $modal + .removeClass('visible') + + setTimeout(function() { + + // Clear src. + $modalImg.attr('src', ''); + + // Unlock. + $modal[0]._locked = false; + + // Focus. + $body.focus(); + + }, 475); + + }, 125); + + }) + .on('keypress', '.modal', function(event) { + + var $modal = $(this); + + // Escape? Hide modal. + if (event.keyCode == 27) + $modal.trigger('click'); + + }) + .prepend('') + .find('img') + .on('load', function(event) { + + var $modalImg = $(this), + $modal = $modalImg.parents('.modal'); + + setTimeout(function() { + + // No longer visible? Bail. + if (!$modal.hasClass('visible')) + return; + + // Set loaded. + $modal.addClass('loaded'); + + }, 275); + + }); + +})(jQuery); \ No newline at end of file diff --git a/assets/js/util.js b/assets/js/util.js new file mode 100644 index 0000000..ecf7b37 --- /dev/null +++ b/assets/js/util.js @@ -0,0 +1,587 @@ +(function($) { + + /** + * Generate an indented list of links from a nav. Meant for use with panel(). + * @return {jQuery} jQuery object. + */ + $.fn.navList = function() { + + var $this = $(this); + $a = $this.find('a'), + b = []; + + $a.each(function() { + + var $this = $(this), + indent = Math.max(0, $this.parents('li').length - 1), + href = $this.attr('href'), + target = $this.attr('target'); + + b.push( + '' + + '' + + $this.text() + + '' + ); + + }); + + return b.join(''); + + }; + + /** + * Panel-ify an element. + * @param {object} userConfig User config. + * @return {jQuery} jQuery object. + */ + $.fn.panel = function(userConfig) { + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).panel(userConfig); + + return $this; + + } + + // Vars. + var $this = $(this), + $body = $('body'), + $window = $(window), + id = $this.attr('id'), + config; + + // Config. + config = $.extend({ + + // Delay. + delay: 0, + + // Hide panel on link click. + hideOnClick: false, + + // Hide panel on escape keypress. + hideOnEscape: false, + + // Hide panel on swipe. + hideOnSwipe: false, + + // Reset scroll position on hide. + resetScroll: false, + + // Reset forms on hide. + resetForms: false, + + // Side of viewport the panel will appear. + side: null, + + // Target element for "class". + target: $this, + + // Class to toggle. + visibleClass: 'visible' + + }, userConfig); + + // Expand "target" if it's not a jQuery object already. + if (typeof config.target != 'jQuery') + config.target = $(config.target); + + // Panel. + + // Methods. + $this._hide = function(event) { + + // Already hidden? Bail. + if (!config.target.hasClass(config.visibleClass)) + return; + + // If an event was provided, cancel it. + if (event) { + + event.preventDefault(); + event.stopPropagation(); + + } + + // Hide. + config.target.removeClass(config.visibleClass); + + // Post-hide stuff. + window.setTimeout(function() { + + // Reset scroll position. + if (config.resetScroll) + $this.scrollTop(0); + + // Reset forms. + if (config.resetForms) + $this.find('form').each(function() { + this.reset(); + }); + + }, config.delay); + + }; + + // Vendor fixes. + $this + .css('-ms-overflow-style', '-ms-autohiding-scrollbar') + .css('-webkit-overflow-scrolling', 'touch'); + + // Hide on click. + if (config.hideOnClick) { + + $this.find('a') + .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); + + $this + .on('click', 'a', function(event) { + + var $a = $(this), + href = $a.attr('href'), + target = $a.attr('target'); + + if (!href || href == '#' || href == '' || href == '#' + id) + return; + + // Cancel original event. + event.preventDefault(); + event.stopPropagation(); + + // Hide panel. + $this._hide(); + + // Redirect to href. + window.setTimeout(function() { + + if (target == '_blank') + window.open(href); + else + window.location.href = href; + + }, config.delay + 10); + + }); + + } + + // Event: Touch stuff. + $this.on('touchstart', function(event) { + + $this.touchPosX = event.originalEvent.touches[0].pageX; + $this.touchPosY = event.originalEvent.touches[0].pageY; + + }) + + $this.on('touchmove', function(event) { + + if ($this.touchPosX === null + || $this.touchPosY === null) + return; + + var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, + diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, + th = $this.outerHeight(), + ts = ($this.get(0).scrollHeight - $this.scrollTop()); + + // Hide on swipe? + if (config.hideOnSwipe) { + + var result = false, + boundary = 20, + delta = 50; + + switch (config.side) { + + case 'left': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); + break; + + case 'right': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); + break; + + case 'top': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); + break; + + case 'bottom': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); + break; + + default: + break; + + } + + if (result) { + + $this.touchPosX = null; + $this.touchPosY = null; + $this._hide(); + + return false; + + } + + } + + // Prevent vertical scrolling past the top or bottom. + if (($this.scrollTop() < 0 && diffY < 0) + || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { + + event.preventDefault(); + event.stopPropagation(); + + } + + }); + + // Event: Prevent certain events inside the panel from bubbling. + $this.on('click touchend touchstart touchmove', function(event) { + event.stopPropagation(); + }); + + // Event: Hide panel if a child anchor tag pointing to its ID is clicked. + $this.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.removeClass(config.visibleClass); + + }); + + // Body. + + // Event: Hide panel on body click/tap. + $body.on('click touchend', function(event) { + $this._hide(event); + }); + + // Event: Toggle. + $body.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.toggleClass(config.visibleClass); + + }); + + // Window. + + // Event: Hide on ESC. + if (config.hideOnEscape) + $window.on('keydown', function(event) { + + if (event.keyCode == 27) + $this._hide(event); + + }); + + return $this; + + }; + + /** + * Apply "placeholder" attribute polyfill to one or more forms. + * @return {jQuery} jQuery object. + */ + $.fn.placeholder = function() { + + // Browser natively supports placeholders? Bail. + if (typeof (document.createElement('input')).placeholder != 'undefined') + return $(this); + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).placeholder(); + + return $this; + + } + + // Vars. + var $this = $(this); + + // Text, TextArea. + $this.find('input[type=text],textarea') + .each(function() { + + var i = $(this); + + if (i.val() == '' + || i.val() == i.attr('placeholder')) + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('blur', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == '') + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('focus', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == i.attr('placeholder')) + i + .removeClass('polyfill-placeholder') + .val(''); + + }); + + // Password. + $this.find('input[type=password]') + .each(function() { + + var i = $(this); + var x = $( + $('
') + .append(i.clone()) + .remove() + .html() + .replace(/type="password"/i, 'type="text"') + .replace(/type=password/i, 'type=text') + ); + + if (i.attr('id') != '') + x.attr('id', i.attr('id') + '-polyfill-field'); + + if (i.attr('name') != '') + x.attr('name', i.attr('name') + '-polyfill-field'); + + x.addClass('polyfill-placeholder') + .val(x.attr('placeholder')).insertAfter(i); + + if (i.val() == '') + i.hide(); + else + x.hide(); + + i + .on('blur', function(event) { + + event.preventDefault(); + + var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + + i.hide(); + x.show(); + + } + + }); + + x + .on('focus', function(event) { + + event.preventDefault(); + + var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); + + x.hide(); + + i + .show() + .focus(); + + }) + .on('keypress', function(event) { + + event.preventDefault(); + x.val(''); + + }); + + }); + + // Events. + $this + .on('submit', function() { + + $this.find('input[type=text],input[type=password],textarea') + .each(function(event) { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + i.attr('name', ''); + + if (i.val() == i.attr('placeholder')) { + + i.removeClass('polyfill-placeholder'); + i.val(''); + + } + + }); + + }) + .on('reset', function(event) { + + event.preventDefault(); + + $this.find('select') + .val($('option:first').val()); + + $this.find('input,textarea') + .each(function() { + + var i = $(this), + x; + + i.removeClass('polyfill-placeholder'); + + switch (this.type) { + + case 'submit': + case 'reset': + break; + + case 'password': + i.val(i.attr('defaultValue')); + + x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + i.hide(); + x.show(); + } + else { + i.show(); + x.hide(); + } + + break; + + case 'checkbox': + case 'radio': + i.attr('checked', i.attr('defaultValue')); + break; + + case 'text': + case 'textarea': + i.val(i.attr('defaultValue')); + + if (i.val() == '') { + i.addClass('polyfill-placeholder'); + i.val(i.attr('placeholder')); + } + + break; + + default: + i.val(i.attr('defaultValue')); + break; + + } + }); + + }); + + return $this; + + }; + + /** + * Moves elements to/from the first positions of their respective parents. + * @param {jQuery} $elements Elements (or selector) to move. + * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. + */ + $.prioritize = function($elements, condition) { + + var key = '__prioritize'; + + // Expand $elements if it's not already a jQuery object. + if (typeof $elements != 'jQuery') + $elements = $($elements); + + // Step through elements. + $elements.each(function() { + + var $e = $(this), $p, + $parent = $e.parent(); + + // No parent? Bail. + if ($parent.length == 0) + return; + + // Not moved? Move it. + if (!$e.data(key)) { + + // Condition is false? Bail. + if (!condition) + return; + + // Get placeholder (which will serve as our point of reference for when this element needs to move back). + $p = $e.prev(); + + // Couldn't find anything? Means this element's already at the top, so bail. + if ($p.length == 0) + return; + + // Move element to top of parent. + $e.prependTo($parent); + + // Mark element as moved. + $e.data(key, $p); + + } + + // Moved already? + else { + + // Condition is true? Bail. + if (condition) + return; + + $p = $e.data(key); + + // Move element back to its original location (using our placeholder). + $e.insertAfter($p); + + // Unmark element as moved. + $e.removeData(key); + + } + + }); + + }; + +})(jQuery); \ No newline at end of file diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss new file mode 100644 index 0000000..a0ba52f --- /dev/null +++ b/assets/sass/base/_page.scss @@ -0,0 +1,47 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Basic */ + + // MSIE: Required for IEMobile. + @-ms-viewport { + width: device-width; + } + + // MSIE: Prevents scrollbar from overlapping content. + body { + -ms-overflow-style: scrollbar; + } + + // Ensures page width is always >=320px. + @include breakpoint('<=xsmall') { + html, body { + min-width: 320px; + } + } + + // 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'); + } + } + + } \ No newline at end of file diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss new file mode 100644 index 0000000..9d21e12 --- /dev/null +++ b/assets/sass/base/_reset.scss @@ -0,0 +1,76 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +// 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; + } \ No newline at end of file diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 0000000..4b00f20 --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,231 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Type */ + + html { + font-size: 18pt; + + @include breakpoint('<=xlarge') { + font-size: 14pt; + } + + @include breakpoint('<=large') { + font-size: 12pt; + } + + @include breakpoint('<=small') { + font-size: 11pt; + } + + @include breakpoint('<=xxsmall') { + font-size: 10pt; + } + } + + body { + background-color: _palette(bg); + color: _palette(fg); + } + + body, input, select, textarea { + font-family: _font(family); + font-size: 1rem; + font-weight: _font(weight); + line-height: 1.65; + } + + a { + @include vendor('transition', 'color #{_duration(transition)} ease-in-out'); + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + strong, b { + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + + &.major { + font-size: 1.25rem; + } + } + + h1, h2, h3, h4, h5, h6 { + font-weight: _font(weight); + line-height: 1.375; + letter-spacing: _font(kerning); + margin: 0 0 (_size(element-margin) * 0.5) 0; + + a { + color: inherit; + text-decoration: none; + } + } + + h1 { + font-size: 3.5rem; + line-height: 1.2; + } + + h2 { + font-size: 2.25rem; + } + + h3 { + font-size: 1.5rem; + } + + h4 { + font-size: 1.1rem; + } + + h5 { + font-size: 0.9rem; + } + + h6 { + font-size: 0.7rem; + } + + sub { + font-size: 0.8rem; + position: relative; + top: 0.5rem; + } + + sup { + font-size: 0.8rem; + position: relative; + top: -0.5rem; + } + + blockquote { + border-left: solid (_size(border-width) * 4); + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); + } + + code { + border-radius: _size(border-radius); + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0.25rem; + padding: 0.25rem 0.325rem; + } + + 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.5; + padding: 0.75rem 1rem; + overflow-x: auto; + } + } + + hr { + border: 0; + border-bottom: solid _size(border-width); + margin: (_size(element-margin) * 1.25) 0; + + &.major { + margin: (_size(element-margin) * 1.75) 0; + } + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + @include breakpoint('<=small') { + p { + &.major { + font-size: 1.1rem; + } + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.25rem; + } + + h4 { + font-size: 1rem; + } + } + + @mixin color-typography($p: null) { + + @if $p != null { + background-color: _palette($p, bg); + color: _palette($p, fg); + } + + input, select, textarea { + color: _palette($p, fg-bold); + } + + a { + color: _palette($p, fg-bold); + + &:hover { + color: _palette($p, accent); + } + } + + strong, b { + color: _palette($p, fg-bold); + } + + h1, h2, h3, h4, h5, h6 { + color: _palette($p, fg-bold); + } + + blockquote { + border-left-color: _palette($p, border); + } + + code { + background: _palette($p, border-bg); + border-color: _palette($p, border); + } + + hr { + border-bottom-color: _palette($p, border); + } + } + + @include color-typography; \ No newline at end of file diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss new file mode 100644 index 0000000..0e63444 --- /dev/null +++ b/assets/sass/components/_actions.scss @@ -0,0 +1,101 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* 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.65) 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.5rem; + } + } + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_banner.scss b/assets/sass/components/_banner.scss new file mode 100644 index 0000000..20bd924 --- /dev/null +++ b/assets/sass/components/_banner.scss @@ -0,0 +1,990 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Banner (transitions) */ + + .banner { + + // Mixin. + @mixin transition-banner($event) { + $x: null; + $y: null; + + @if ($event == 'load') { + $x: 'body.is-preload &'; + $y: _duration(on-load); + } + @else if ($event == 'scroll') { + $x: '&.is-inactive'; + $y: _duration(on-scroll); + } + + // Content. + &.on#{$event}-content-fade-up { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateY(1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-down { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateY(-1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-left { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateX(1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-right { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateX(-1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-in { + .content { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + } + + #{$x} { + .content { + opacity: 0; + } + } + } + + // Image. + &.on#{$event}-image-fade-up { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateY(1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-down { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateY(-1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-left { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateX(1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-right { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateX(-1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-in { + .image { + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + } + } + + #{$x} { + .image { + img { + opacity: 0; + } + } + } + } + + } + + // On Load. + @include transition-banner('load'); + + // On Scroll. + @include transition-banner('scroll'); + + } + +/* Banner (style1) */ + + .banner.style1 { + @include vendor('align-items', 'stretch'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row'); + @include vendor('justify-content', 'flex-end'); + position: relative; + text-align: left; + overflow-x: hidden; + + .content { + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-self', 'center'); + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 50%; + max-width: (_size(inner) * 0.75); + margin: 0 auto; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + border-radius: 0; + width: 50%; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + .content { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + } + + @include breakpoint('<=large') { + .content { + @include padding(_size(padding, large), _size(padding, large)); + } + } + + @include breakpoint('<=medium') { + .content { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + } + } + + @include breakpoint('<=small') { + .content { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + } + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + text-align: center; + + .content { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + width: 100%; + max-width: 100%; + } + + .image { + width: 100%; + max-width: 100%; + height: 45vh; + } + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + + @include orientation(portrait) { + .content { + min-height: 50vh; + } + + .image { + height: 50vh; + } + } + } + + // Orientation. + &.orient-left { + // ... + } + + &.orient-right { + @include vendor('flex-direction', 'row-reverse'); + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + } + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + + @include orientation(portrait) { + text-align: center; + } + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + .image { + img { + // ... + } + } + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Banner (style2) */ + + .banner.style2 { + @include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + background-color: inherit; + position: relative; + text-align: center; + overflow-x: hidden; + + .content { + @include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75); + position: relative; + width: (_size(inner) * 0.625); + max-width: 100%; + background-color: inherit; + border-radius: _size(border-radius-alt); + margin-bottom: _size(element-margin); + z-index: 1; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75); + + .content { + @include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75); + } + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large) * 0.75); + + .content { + @include padding(_size(padding, large), _size(padding, large) * 0.75); + } + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium), _size(padding, medium)); + + .content { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium) * 0.75); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small), _size(padding, small)); + + .content { + @include padding(_size(padding, small) * 1.25, _size(padding, small) * 0.75); + } + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + } + + // Orientation. + &.orient-left { + @include vendor('justify-content', 'flex-start'); + padding-left: 0; + + .content { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + &.orient-center { + // ... + } + + &.orient-right { + @include vendor('justify-content', 'flex-end'); + padding-right: 0; + + .content { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + // Content Alignment. + &.content-align-left { + text-align: left; + } + + &.content-align-center { + // ... + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + .image { + img { + // ... + } + } + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Banner (style3) */ + + .banner.style3 { + $image-size: 21rem; + $content-size: (_size(inner) * 0.875) - $image-size - (_size(element-margin) * 1.75); + + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row-reverse'); + @include vendor('justify-content', 'center'); + position: relative; + text-align: left; + overflow-x: hidden; + + .content { + width: $content-size; + max-width: 100%; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + width: $image-size; + height: $image-size; + border-radius: 100%; + margin: 0 (_size(element-margin) * 1.75) _size(element-margin) 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + width: 100%; + height: 100%; + border-radius: 100%; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large)); + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + + .image { + width: ($image-size * 0.875); + height: ($image-size * 0.875); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + @include vendor('align-items', 'flex-start'); + + .image { + width: ($image-size * 0.75); + height: ($image-size * 0.75); + margin: 0 (_size(element-margin) * 1) _size(element-margin) 0; + } + } + + @include orientation(portrait) { + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'column-reverse'); + text-align: center; + + .content { + width: 34rem; + max-width: 100%; + } + + .image { + margin-right: 0; + } + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + } + + // Orientation. + &.orient-left { + @include vendor('flex-direction', 'row'); + + .image { + margin: 0 0 _size(element-margin) (_size(element-margin) * 1.75); + } + + @include breakpoint('<=small') { + .image { + margin: 0 0 _size(element-margin) (_size(element-margin) * 1); + } + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + + .image { + margin-left: 0; + } + } + } + + &.orient-right { + // ... + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Banner (style4) */ + + .banner.style4 { + $image-width: 13rem; + $content-size: (_size(inner) * 0.75) - $image-width - (_size(element-margin) * 1.75); + + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row-reverse'); + @include vendor('justify-content', 'center'); + position: relative; + text-align: left; + overflow-x: hidden; + + .content { + width: $content-size; + max-width: 100%; + } + + .image { + @include phone($image-width); + margin-right: (_size(element-margin) * 1.75); + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large)); + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + + .image { + @include resize-phone($image-width, 0.875); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + @include vendor('align-items', 'flex-start'); + + .image { + @include resize-phone($image-width, 0.625); + } + } + + @include orientation(portrait) { + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'column-reverse'); + text-align: center; + + .content { + width: 34rem; + max-width: 100%; + } + + .image { + margin-right: 0; + margin-left: 0; + } + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + } + + // Variant. + &.iphone { + // ... + } + + &.android { + // ... + } + + // Orientation. + &.orient-left { + @include vendor('flex-direction', 'row'); + + .image { + margin-right: 0; + margin-left: (_size(element-margin) * 1.75); + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + + .image { + margin-right: 0; + margin-left: 0; + } + } + } + + &.orient-right { + // ... + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Banner (style5) */ + + .banner.style5 { + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + background-color: inherit; + position: relative; + text-align: center; + overflow-x: hidden; + + .content { + position: relative; + width: (_size(inner) * 0.625); + max-width: 100%; + margin-bottom: _size(element-margin); + z-index: 1; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + opacity: _misc(overlay-opacity); + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large)); + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + } + + // Content Alignment. + &.content-align-left { + text-align: left; + } + + &.content-align-center { + // ... + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +// Mixin + + @mixin color-banner($p: null) { + .banner { + .image { + background-color: transparentize(_palette($p, fg-bold), 0.875); + } + + @if ($p != 'invert') { + &.invert { + .image { + background-color: transparentize(_palette(invert, fg-bold), 0.875); + } + } + } + } + + .banner.style4 { + .image { + @include color-phone($p); + } + + // Variant. + &.iphone { + .image { + @include color-phone-variant('iphone', $p); + } + } + + &.android { + .image { + @include color-phone-variant('android', $p); + } + } + + @if ($p != 'invert') { + &.invert { + .image { + @include color-phone(invert); + } + + // Variant. + &.iphone { + .image { + @include color-phone-variant('iphone', invert); + } + } + + &.android { + .image { + @include color-phone-variant('android', invert); + } + } + + } + } + } + } + + @include color-banner; \ No newline at end of file diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss new file mode 100644 index 0000000..3928256 --- /dev/null +++ b/assets/sass/components/_box.scss @@ -0,0 +1,34 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Box */ + + .box { + border-radius: _size(border-radius); + border: solid _size(border-width); + margin-bottom: _size(element-margin); + padding: 1.5rem; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + } + + @mixin color-box($p: null) { + .box { + border-color: _palette($p, border); + } + } + + @include color-box; \ No newline at end of file diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss new file mode 100644 index 0000000..375b306 --- /dev/null +++ b/assets/sass/components/_button.scss @@ -0,0 +1,112 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + border: 0; + cursor: pointer; + display: inline-block; + font-weight: _font(weight-bold); + letter-spacing: _font(kerning-alt); + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + font-size: 0.75rem; + max-width: 20rem; + height: 3.75em; + line-height: 3.75em; + border-radius: 3.75em; + padding: 0 2.5em; + text-overflow: ellipsis; + overflow: hidden; + + &.icon { + &:before { + margin-right: 0.5rem; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.6rem; + height: 3.325em; + line-height: 3.325em; + border-radius: 3.325em; + padding: 0 2em; + } + + &.large { + font-size: 0.8rem; + height: 4em; + line-height: 4em; + border-radius: 4em; + padding: 0 3em; + } + + &.wide { + min-width: 14em; + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + opacity: 0.25; + } + } + + @mixin color-button($p: null) { + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + background-color: transparent; + box-shadow: inset 0 0 0 _size(border-width) _palette($p, border); + color: _palette($p, fg-bold) !important; + + &:hover { + box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent); + color: _palette($p, accent) !important; + } + + &:active { + background-color: transparentize(_palette($p, accent), 0.8); + box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent); + color: _palette($p, accent) !important; + } + + &.primary { + background-color: _palette($p, fg-bold); + box-shadow: none; + color: _palette($p, bg) !important; + + &:hover { + background-color: _palette($p, accent); + } + + &:active { + background-color: darken(_palette($p, accent), 12); + } + } + } + } + + @include color-button; \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss new file mode 100644 index 0000000..123cca5 --- /dev/null +++ b/assets/sass/components/_form.scss @@ -0,0 +1,286 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Form */ + + form { + margin: 0 0 _size(element-margin) 0; + + > :last-child { + margin-bottom: 0; + } + + > .fields { + $gutter: (_size(element-margin) * 0.75); + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + width: calc(100% + #{$gutter * 2}); + margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); + + > .field { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + padding: $gutter 0 0 $gutter; + width: calc(100% - #{$gutter * 1}); + + &.half { + width: calc(50% - #{$gutter * 0.5}); + } + + &.third { + width: calc(#{100% / 3} - #{$gutter * (1 / 3)}); + } + + &.quarter { + width: calc(25% - #{$gutter * 0.25}); + } + } + } + + @include breakpoint('<=xsmall') { + > .fields { + $gutter: (_size(element-margin) * 0.75); + + width: calc(100% + #{$gutter * 2}); + margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1); + + > .field { + padding: $gutter 0 0 $gutter; + width: calc(100% - #{$gutter * 1}); + + &.half { + width: calc(100% - #{$gutter * 1}); + } + + &.third { + width: calc(100% - #{$gutter * 1}); + } + + &.quarter { + width: calc(100% - #{$gutter * 1}); + } + } + } + } + } + + label { + display: block; + font-size: 0.9rem; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + input[type="search"], + input[type="url"], + select, + textarea { + @include vendor('appearance', 'none'); + background-color: transparent; + border-radius: _size(border-radius); + border: none; + border: solid _size(border-width); + color: inherit; + display: block; + outline: 0; + padding: 0 0.825rem; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + } + + select { + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) 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"], + input[type="tel"], + input[type="search"], + input[type="url"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75rem 1rem; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2rem; + opacity: 0; + width: 1rem; + z-index: -1; + + & + label { + @include icon(false, solid); + @include vendor('user-select', 'none'); + cursor: pointer; + display: inline-block; + font-size: 1rem; + font-weight: _font(weight); + padding-left: (_size(element-height) * 0.6) + 0.75rem; + padding-right: 0.75rem; + position: relative; + margin-bottom: 0; + + &:before { + border-radius: _size(border-radius); + border: solid _size(border-width); + content: ''; + display: inline-block; + font-size: 0.8rem; + height: (_size(element-height) * 0.6); + left: 0; + line-height: (_size(element-height) * 0.6); + position: absolute; + text-align: center; + top: 0; + width: (_size(element-height) * 0.6); + } + } + + &:checked + label { + &:before { + content: '\f00c'; + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + 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; + } + + @mixin color-form($p: null) { + label { + color: _palette($p, fg-bold); + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + input[type="search"], + input[type="url"], + select, + textarea { + border-color: _palette($p, border); + + &:focus { + border-color: _palette($p, accent); + box-shadow: 0 0 0 _size(border-width) _palette($p, accent); + } + } + + select { + background-image: svg-url(""); + + option { + color: _palette(fg-bold); + background: _palette(bg); + } + } + + input[type="checkbox"], + input[type="radio"], { + & + label { + color: _palette($p, fg); + + &:before { + border-color: _palette($p, border); + } + } + + &:checked + label { + &:before { + background-color: _palette($p, fg-bold); + border-color: _palette($p, fg-bold); + color: _palette($p, bg); + } + } + + &:focus + label { + &:before { + border-color: _palette($p, accent); + box-shadow: 0 0 0 _size(border-width) _palette($p, accent); + } + } + } + + ::-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; + } + } + + @include color-form; \ No newline at end of file diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss new file mode 100644 index 0000000..7a5551d --- /dev/null +++ b/assets/sass/components/_gallery.scss @@ -0,0 +1,616 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Gallery (transitions) */ + + .gallery { + + // Mixin. + @mixin transition-gallery($event) { + $x: null; + $y: null; + + @if ($event == 'load') { + $x: 'body.is-preload &'; + $y: _duration(on-load); + } + @else if ($event == 'scroll') { + $x: '&.is-inactive'; + $y: _duration(on-scroll); + } + + &.on#{$event}-fade-in { + article { + .image { + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{_misc(gallery-limit) * _duration(gallery-delay)}'); + } + } + + @for $i from 0 through _misc(gallery-limit) { + &:nth-child(#{$i + 1}) { + .image { + img { + @include vendor('transition-delay', '#{$i * _duration(gallery-delay)}'); + } + } + } + } + } + + #{$x} { + article { + .image { + img { + opacity: 0; + } + } + } + } + } + } + + // On Load. + @include transition-gallery('load'); + + // On Scroll. + @include transition-gallery('scroll'); + + } + +/* Gallery (style1) */ + + .gallery.style1 { + @include color-typography(invert); + @include color-button(invert); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('justify-content', 'center'); + position: relative; + width: 100%; + background-color: transparent; + + > .forward, >.backward { + display: none; + } + + > .inner { + @include vendor('align-items', 'inherit'); + @include vendor('display', 'inherit'); + @include vendor('flex-wrap', 'inherit'); + @include vendor('justify-content', 'inherit'); + } + + article { + overflow: hidden; + position: relative; + width: 25%; + + .image { + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + display: block; + width: 100%; + border-radius: 0; + + img { + display: block; + width: 100%; + border-radius: 0; + } + } + + .caption { + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + @include vendor('pointer-events', 'none'); + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity)); + opacity: 0; + padding: 2rem; + z-index: 1; + font-size: 0.8rem; + + a { + @include vendor('pointer-events', 'auto'); + } + + h2, h3, h4, h5, h6 { + font-size: 1.25rem; + margin-bottom: 0.25rem; + } + + > * { + max-width: 100%; + margin-bottom: 1rem; + } + + > :last-child { + margin-bottom: 0; + } + } + + &:hover { + .caption { + opacity: 1; + } + } + } + + @include breakpoint('<=large') { + article { + width: (100% / 3); + + .caption { + padding: 1rem; + } + } + } + + @include breakpoint('<=medium') { + article { + width: 50%; + + .caption { + padding: 1rem; + } + } + } + + @include breakpoint('<=xsmall') { + article { + width: 100%; + + .caption { + padding: 1rem; + } + } + } + + // Modifiers. + + // size + &.small { + article { + width: 20%; + + .caption { + padding: 1rem; + } + } + + @include breakpoint('<=large') { + article { + width: 25%; + + .caption { + padding: 1rem; + } + } + } + + @include breakpoint('<=medium') { + article { + width: (100% / 3); + + .caption { + padding: 1rem; + } + } + } + + @include breakpoint('<=xsmall') { + article { + width: 50%; + + .caption { + padding: 1rem; + } + } + } + } + + &.medium { + // ... + } + + &.big { + article { + width: (100% / 3); + + .caption { + padding: 3rem; + } + } + + @include breakpoint('<=large') { + article { + width: 50%; + + .caption { + padding: 2rem; + } + } + } + + @include breakpoint('<=medium') { + article { + width: 50%; + + .caption { + padding: 2rem; + } + } + } + + @include breakpoint('<=xsmall') { + article { + width: 100%; + + .caption { + padding: 1rem; + } + } + } + } + + } + +/* Gallery (style2) */ + + .gallery.style2 { + @include color-typography(invert); + @include color-button(invert); + @include vendor('display', 'flex'); + -webkit-overflow-scrolling: touch; + position: relative; + background-color: transparent; + + > .forward, >.backward { + @include icon(false, solid); + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + position: absolute; + top: 0; + width: 5rem; + height: 100%; + cursor: pointer; + opacity: 0; + z-index: 2; + + &:before { + display: block; + top: calc(50% - 1.5rem); + width: 4rem; + height: 3rem; + line-height: 1em; + font-size: 3rem; + position: absolute; + text-align: center; + } + } + + &:hover { + > .forward, > .backward { + opacity: 1; + } + } + + > .forward { + right: 0; + background-image: linear-gradient(to left, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0)); + + &:before { + content: '\f105'; + right: 0; + } + } + + > .backward { + left: 0; + background-image: linear-gradient(to right, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0)); + + &:before { + content: '\f104'; + left: 0; + } + } + + > .inner { + @include vendor('display', 'inherit'); + overflow-x: auto; + overflow-y: hidden; + position: relative; + width: 100%; + } + + article { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + display: block; + position: relative; + overflow: hidden; + width: 22.5rem; + max-width: 75vw; + + .image { + display: block; + width: 100%; + border-radius: 0; + + img { + display: block; + width: 100%; + border-radius: 0; + } + } + + .caption { + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('justify-content', 'center'); + @include vendor('pointer-events', 'none'); + @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out'); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity)); + opacity: 0; + padding: 3rem; + z-index: 1; + font-size: 0.8rem; + + a { + @include vendor('pointer-events', 'auto'); + } + + h2, h3, h4, h5, h6 { + font-size: 1.25rem; + margin-bottom: 0.25rem; + } + + > * { + max-width: 100%; + margin-bottom: 1rem; + } + + > :last-child { + margin-bottom: 0; + } + } + + &:hover { + .caption { + opacity: 1; + } + } + } + + @include breakpoint('<=medium') { + article { + .caption { + padding: 2rem; + } + } + } + + @include breakpoint('<=small') { + article { + .caption { + padding: 2rem; + } + } + } + + // Modifiers. + + // size + &.small { + article { + width: 17.5rem; + + .caption { + padding: 2rem; + } + } + + @include breakpoint('<=medium') { + article { + .caption { + padding: 2rem; + } + } + } + + @include breakpoint('<=small') { + article { + .caption { + padding: 2rem; + } + } + } + } + + &.medium { + // ... + } + + &.big { + article { + width: 30rem; + + .caption { + padding: 4rem; + } + } + + @include breakpoint('<=medium') { + article { + .caption { + padding: 3rem; + } + } + } + + @include breakpoint('<=small') { + article { + .caption { + padding: 2rem; + } + } + } + } + + } + +/* Gallery (lightbox) */ + + @include keyframes('gallery-modal-spinner') { + 0% { + @include vendor('transform', 'rotate(0deg)'); + } + + 100% { + @include vendor('transform', 'rotate(360deg)'); + } + } + + .gallery.lightbox { + .modal { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + @include vendor('pointer-events', 'none'); + @include vendor('user-select', 'none'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox)} ease', + 'visibility #{_duration(gallery-lightbox)}', + 'z-index #{_duration(gallery-lightbox)}' + )); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + outline: 0; + background-color: transparentize(_palette(invert, bg), 1 - _misc(lightbox-opacity)); + visibility: none; + opacity: 0; + z-index: 0; + + &:before { + @include vendor('animation', 'gallery-modal-spinner 1s infinite linear'); + @include vendor('transition', 'opacity #{_duration(gallery-lightbox) * 0.5} ease'); + @include vendor('transition-delay', '#{_duration(gallery-lightbox)}'); + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + width: 4rem; + height: 4rem; + margin: -2rem 0 0 -2rem; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 4rem; + opacity: 0; + } + + &:after { + content: ''; + display: block; + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 4rem; + height: 4rem; + cursor: pointer; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 3rem; + } + + .inner { + @include vendor('transform', 'translateY(0.75rem)'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox) * 0.5} ease', + 'transform #{_duration(gallery-lightbox) * 0.5} ease' + )); + opacity: 0; + + img { + display: block; + max-width: 90vw; + max-height: 85vh; + box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35); + } + } + + &.visible { + @include vendor('pointer-events', 'auto'); + visibility: visible; + opacity: 1; + z-index: _misc(z-index-base) + 1; + + &:before { + opacity: 1; + } + } + + &.loaded { + .inner { + @include vendor('transform', 'translateY(0)'); + @include vendor('transition', ( + 'opacity #{_duration(gallery-lightbox)} ease', + 'transform #{_duration(gallery-lightbox)} ease' + )); + opacity: 1; + } + + &:before { + @include vendor('transition-delay', '0s'); + opacity: 0; + } + } + } + + @include breakpoint('<=medium') { + .modal { + .inner { + img { + max-width: 100vw; + } + } + } + } + } + +// Mixin + + @mixin color-gallery($p: null) { + .gallery { + article { + .image { + background-color: transparentize(_palette($p, fg-bold), 0.875); + } + } + } + } + + @include color-gallery; \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss new file mode 100644 index 0000000..9c95f56 --- /dev/null +++ b/assets/sass/components/_icon.scss @@ -0,0 +1,96 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icon */ + + .icon { + @include icon; + border-bottom: none; + position: relative; + text-align: center; + + > .label { + display: none; + } + + &:before { + line-height: inherit; + } + + &.solid { + &:before { + font-weight: 900; + } + } + + &.brands { + &:before { + font-family: 'Font Awesome 5 Brands'; + } + } + + &.style2 { + &:before { + border-radius: 2.75em; + display: inline-block; + height: 2.75em; + line-height: 2.75em; + width: 2.75em; + } + } + + &.major { + display: block; + margin: 0 0 (_size(element-margin) * 0.5) 0; + + &:before { + font-size: 1.25rem; + } + } + } + + a.icon { + &.style2 { + &:before { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out' + )); + } + } + } + + @mixin color-icon($p: null) { + .icon { + &.style2 { + &:before { + box-shadow: inset 0 0 0 _size(border-width) _palette($p, border); + } + } + } + + a.icon { + &.style2 { + &:hover { + &:before { + box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent); + color: _palette($p, accent); + } + } + + &:active { + &:before { + background-color: transparentize(_palette($p, accent), 0.9); + box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent); + color: _palette($p, accent); + } + } + } + } + } + + @include color-icon; \ No newline at end of file diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss new file mode 100644 index 0000000..240ad14 --- /dev/null +++ b/assets/sass/components/_icons.scss @@ -0,0 +1,22 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 0.75rem 0 0; + + &:last-child { + padding-right: 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss new file mode 100644 index 0000000..df6f879 --- /dev/null +++ b/assets/sass/components/_image.scss @@ -0,0 +1,61 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + border: 0; + border-radius: _size(border-radius); + display: inline-block; + position: relative; + + img { + display: block; + border-radius: _size(border-radius); + } + + &.left, + &.right { + width: 40%; + max-width: 10rem; + + img { + width: 100%; + } + } + + &.left { + float: left; + margin: 0 1.5rem 1rem 0; + top: 0.25rem; + } + + &.right { + float: right; + margin: 0 0 1rem 1.5rem; + top: 0.25rem; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: 0 0 (_size(element-margin) * 1.5) 0; + width: 100%; + + img { + width: 100%; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_index.scss b/assets/sass/components/_index.scss new file mode 100644 index 0000000..1ea7a28 --- /dev/null +++ b/assets/sass/components/_index.scss @@ -0,0 +1,66 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Index */ + + .index { + > * { + @include padding(3rem, 0); + @include vendor('display', 'flex'); + border-top: solid 1px; + + > header { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + width: 15rem; + } + + > .content { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + } + } + + > :first-child { + border-top: 0; + } + + @include breakpoint('<=medium') { + > * { + > header { + width: 11rem; + } + } + } + + @include breakpoint('<=small') { + > * { + > header { + width: 10rem; + } + } + } + + @include breakpoint('<=xsmall') { + > * { + @include vendor('flex-direction', 'column'); + + > header { + width: 100%; + } + } + } + } + + @mixin color-index($p: null) { + .index { + > * { + border-top-color: _palette($p, border); + } + } + } + + @include color-index; \ No newline at end of file diff --git a/assets/sass/components/_items.scss b/assets/sass/components/_items.scss new file mode 100644 index 0000000..1993ae3 --- /dev/null +++ b/assets/sass/components/_items.scss @@ -0,0 +1,338 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Items (transitions) */ + + .items { + + // Mixin. + @mixin transition-items($event) { + $x: null; + $y: null; + + @if ($event == 'load') { + $x: 'body.is-preload &'; + $y: _duration(on-load); + } + @else if ($event == 'scroll') { + $x: '&.is-inactive'; + $y: _duration(on-scroll); + } + + &.on#{$event}-fade-in { + > * { + > .inner { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{_misc(items-limit) * _duration(items-delay)}'); + } + + @for $i from 0 through _misc(items-limit) { + &:nth-child(#{$i + 1}) { + > .inner { + @include vendor('transition-delay', '#{$i * _duration(items-delay)}'); + } + } + } + } + + #{$x} { + > * { + > .inner { + opacity: 0; + } + } + } + } + } + + // On Load. + @include transition-items('load'); + + // On Scroll. + @include transition-items('scroll'); + + } + +/* Items (style1) */ + + @mixin items-style1-size($name, $size, $padding) { + &.#{$name} { + > * { + @include padding($padding, $padding); + width: #{100% / $size}; + + &:nth-child(-n + #{$size}) { + border-top-width: 0; + } + + &:nth-child(#{$size}n + 1) { + border-left-width: 0; + } + } + } + } + + @mixin items-style1-size-reset($name, $size) { + &.#{$name} { + > * { + &:nth-child(-n + #{$size}) { + border-top-width: _size(border-width); + } + + &:nth-child(#{$size}n + 1) { + border-left-width: _size(border-width); + } + } + } + } + + .items.style1 { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('justify-content', 'center'); + margin: (_size(element-margin) * 1.5) 0; + position: relative; + + > * { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + border-style: solid; + border-left-width: _size(border-width); + border-top-width: _size(border-width); + } + + // Modifiers. + + // Size. + @include items-style1-size(big, 2, _size(gutter)); + @include items-style1-size(medium, 3, _size(gutter) * 0.625); + @include items-style1-size(small, 4, _size(gutter) * 0.375); + + @include breakpoint('<=large') { + @include items-style1-size-reset(small, 4); + @include items-style1-size(small, 3, _size(gutter) * 0.625); + } + + @include breakpoint('<=medium') { + @include items-style1-size-reset(medium, 3); + @include items-style1-size(medium, 2, _size(gutter)); + + @include items-style1-size-reset(small, 3); + @include items-style1-size(small, 2, _size(gutter)); + } + + @include breakpoint('<=xsmall') { + @include items-style1-size-reset(big, 2); + @include items-style1-size(big, 1, _size(gutter) * 0.75); + + @include items-style1-size-reset(medium, 2); + @include items-style1-size(medium, 1, _size(gutter) * 0.75); + + @include items-style1-size-reset(small, 2); + @include items-style1-size(small, 1, _size(gutter) * 0.75); + + &.big, + &.medium, + &.small { + > * { + padding-left: 0; + padding-right: 0; + } + + > :first-child { + padding-top: 0; + } + + > :last-child { + padding-bottom: 0; + + > .inner { + > :last-child { + margin-bottom: 0; + } + } + } + } + } + + } + +/* Items (style2) */ + + @mixin items-style2-size($name, $size, $padding) { + &.#{$name} { + > * { + @include padding($padding, $padding); + width: #{100% / $size}; + + &:nth-child(-n + #{$size}) { + border-top-width: 0; + } + + &:nth-child(#{$size}n + 1) { + border-left-width: 0; + } + } + } + } + + @mixin items-style2-size-reset($name, $size) { + &.#{$name} { + > * { + &:nth-child(-n + #{$size}) { + border-top-width: _size(border-width); + } + + &:nth-child(#{$size}n + 1) { + border-left-width: _size(border-width); + } + } + } + } + + .items.style2 { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('justify-content', 'center'); + margin: (_size(element-margin) * 1.5) 0; + position: relative; + border: solid _size(border-width); + border-radius: _size(border-radius); + + > * { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + border-style: solid; + border-left-width: _size(border-width); + border-top-width: _size(border-width); + } + + // Modifiers. + + // Size. + @include items-style2-size(big, 2, _size(gutter)); + @include items-style2-size(medium, 3, _size(gutter) * 0.625); + @include items-style2-size(small, 4, _size(gutter) * 0.375); + + @include breakpoint('<=large') { + @include items-style2-size-reset(small, 4); + @include items-style2-size(small, 3, _size(gutter) * 0.625); + } + + @include breakpoint('<=medium') { + @include items-style2-size-reset(medium, 3); + @include items-style2-size(medium, 2, _size(gutter)); + + @include items-style2-size-reset(small, 3); + @include items-style2-size(small, 2, _size(gutter)); + } + + @include breakpoint('<=xsmall') { + @include items-style2-size-reset(big, 2); + @include items-style2-size(big, 1, _size(gutter) * 0.75); + + @include items-style2-size-reset(medium, 2); + @include items-style2-size(medium, 1, _size(gutter) * 0.75); + + @include items-style2-size-reset(small, 2); + @include items-style2-size(small, 1, _size(gutter) * 0.75); + } + + } + +/* Items (style3) */ + + @mixin items-style3-size($name, $size, $padding) { + &.#{$name} { + > * { + @include padding($padding, $padding); + width: #{100% / $size}; + } + } + } + + .items.style3 { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + @include vendor('justify-content', 'center'); + margin: (_size(element-margin) * 1.5) 0; + position: relative; + + > * { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + } + + // Modifiers. + + // Size. + @include items-style3-size(big, 2, _size(gutter) * 0.5); + @include items-style3-size(medium, 3, _size(gutter) * 0.5 * 0.625); + @include items-style3-size(small, 4, _size(gutter) * 0.5 * 0.375); + + @include breakpoint('<=large') { + @include items-style3-size(small, 3, _size(gutter) * 0.5 * 0.625); + } + + @include breakpoint('<=medium') { + @include items-style3-size(medium, 2, _size(gutter) * 0.5); + @include items-style3-size(small, 2, _size(gutter) * 0.5); + } + + @include breakpoint('<=small') { + margin: _size(element-margin) 0; + } + + @include breakpoint('<=xsmall') { + @include items-style3-size(big, 1, _size(gutter) * 0.5 * 0.75); + @include items-style3-size(medium, 1, _size(gutter) * 0.5 * 0.75); + @include items-style3-size(small, 1, _size(gutter) * 0.5 * 0.75); + + &.big, + &.medium, + &.small { + > * { + padding-left: 0; + padding-right: 0; + } + + > :first-child { + padding-top: 0; + } + + > :last-child { + padding-bottom: 0; + + > .inner { + > :last-child { + margin-bottom: 0; + } + } + } + } + } + + } + +// Mixin + + @mixin color-items($p: null) { + .items.style1 { + > * { + border-color: _palette($p, border); + } + } + + .items.style2 { + border-color: _palette($p, border); + + > * { + border-color: _palette($p, border); + } + } + } + + @include color-items; \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss new file mode 100644 index 0000000..8e7431a --- /dev/null +++ b/assets/sass/components/_list.scss @@ -0,0 +1,86 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25rem; + + li { + padding-left: 0.25rem; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1rem; + + li { + padding-left: 0.5rem; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid _size(border-width); + padding: 0.5rem 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + + dt { + display: block; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + dd { + margin-left: _size(element-margin); + } + + &.style2 { + dt { + width: 25%; + float: left; + } + + dd { + width: 70%; + float: left; + } + + &:after { + content: ''; + display: block; + clear: both; + } + } + } + + @mixin color-list($p: null) { + ul { + &.alt { + li { + border-top-color: _palette($p, border); + } + } + } + } + + @include color-list; \ No newline at end of file diff --git a/assets/sass/components/_row.scss b/assets/sass/components/_row.scss new file mode 100644 index 0000000..4ed0e9e --- /dev/null +++ b/assets/sass/components/_row.scss @@ -0,0 +1,35 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Row */ + + .row { + @include html-grid(2rem); + + @include breakpoint('<=xlarge') { + @include html-grid(2rem, 'xlarge'); + } + + @include breakpoint('<=large') { + @include html-grid(2rem, 'large'); + } + + @include breakpoint('<=medium') { + @include html-grid(2rem, 'medium'); + } + + @include breakpoint('<=small') { + @include html-grid(2rem, 'small'); + } + + @include breakpoint('<=xsmall') { + @include html-grid(2rem, 'xsmall'); + } + + @include breakpoint('<=xxsmall') { + @include html-grid(2rem, 'xxsmall'); + } + } \ No newline at end of file diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss new file mode 100644 index 0000000..9851efb --- /dev/null +++ b/assets/sass/components/_section.scss @@ -0,0 +1,49 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + p { + position: relative; + margin: (_size(element-margin) * -0.325) 0 (_size(element-margin) * 0.75) 0; + font-style: italic; + } + + h1 + p { + font-size: 1.375rem; + } + + h2 + p { + font-size: 1.25rem; + } + + h3 + p { + font-size: 1.1rem; + } + + h4 + p, + h5 + p, + h6 + p { + font-size: 0.9rem; + } + } + + @mixin color-section($p: null) { + header { + p { + color: _palette($p, fg-light); + } + } + } + + @include color-section; \ No newline at end of file diff --git a/assets/sass/components/_spotlight.scss b/assets/sass/components/_spotlight.scss new file mode 100644 index 0000000..23fd0bc --- /dev/null +++ b/assets/sass/components/_spotlight.scss @@ -0,0 +1,1012 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Spotlight (transitions) */ + + .spotlight { + + // Mixin. + @mixin transition-spotlight($event) { + $x: null; + $y: null; + + @if ($event == 'load') { + $x: 'body.is-preload &'; + $y: _duration(on-load); + } + @else if ($event == 'scroll') { + $x: '&.is-inactive'; + $y: _duration(on-scroll); + } + + // Content. + &.on#{$event}-content-fade-up { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateY(1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-down { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateY(-1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-left { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateX(1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-right { + .content { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + } + + #{$x} { + .content { + @include vendor('transform', 'translateX(-1rem)'); + opacity: 0; + } + } + } + + &.on#{$event}-content-fade-in { + .content { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + } + + #{$x} { + .content { + opacity: 0; + } + } + } + + // Image. + &.on#{$event}-image-fade-up { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateY(1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-down { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateY(-1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-left { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateX(1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-right { + .image { + @include vendor('transition', ( + 'opacity #{$y} ease-in-out', + 'transform #{$y} ease-in-out' + )); + + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + @include vendor('transition-delay', '#{$y * 0.75}'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'translateX(-1rem)'); + opacity: 0; + + img { + opacity: 0; + } + } + } + } + + &.on#{$event}-image-fade-in { + .image { + img { + @include vendor('transition', 'opacity #{$y} ease-in-out'); + } + } + + #{$x} { + .image { + img { + opacity: 0; + } + } + } + } + + } + + // On Load. + @include transition-spotlight('load'); + + // On Scroll. + @include transition-spotlight('scroll'); + + } + +/* Spotlight (style1) */ + + .spotlight.style1 { + @include vendor('align-items', 'stretch'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row'); + @include vendor('justify-content', 'flex-end'); + position: relative; + overflow-x: hidden; + text-align: left; + + .content { + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-self', 'center'); + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 65%; + max-width: _size(inner); + margin: 0 auto; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + width: 35%; + min-width: 25rem; + border-radius: 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + .content { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + } + + @include breakpoint('<=large') { + .content { + @include padding(_size(padding, large), _size(padding, large)); + } + } + + @include breakpoint('<=medium') { + .content { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + width: 50%; + min-width: 0; + } + + .image { + width: 50%; + min-width: 0; + } + } + + @include breakpoint('<=small') { + .content { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + text-align: center !important; + + .content { + width: 100%; + } + + .image { + width: 100%; + + img { + position: relative; + } + } + } + } + + // Modifiers. + + // Orientation. + &.orient-left { + // ... + } + + &.orient-right { + @include vendor('flex-direction', 'row-reverse'); + + @include breakpoint('<=small') { + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + } + } + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Spotlight (style2) */ + + .spotlight.style2 { + $image-size: 21rem; + $content-size: (_size(inner) * 0.75) - (_size(element-margin) * 1.75); + + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row-reverse'); + @include vendor('justify-content', 'center'); + position: relative; + overflow-x: hidden; + text-align: left; + + .content { + width: $content-size; + max-width: 100%; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + width: $image-size; + height: $image-size; + border-radius: 100%; + margin: 0 (_size(element-margin) * 1.75) _size(element-margin) 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + width: 100%; + height: 100%; + border-radius: 100%; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large)); + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + + .image { + width: ($image-size * 0.875); + height: ($image-size * 0.875); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + @include vendor('align-items', 'flex-start'); + + .image { + width: ($image-size * 0.75); + height: ($image-size * 0.75); + margin: 0 (_size(element-margin) * 1) _size(element-margin) 0; + } + } + + @include orientation(portrait) { + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'column-reverse'); + text-align: center !important; + + .content { + width: 34rem; + max-width: 100%; + } + + .image { + margin-right: 0; + } + } + + // Modifiers. + + // Orientation. + &.orient-left { + @include vendor('flex-direction', 'row'); + + .image { + margin: 0 0 _size(element-margin) (_size(element-margin) * 1.75); + } + + @include breakpoint('<=small') { + .image { + margin: 0 0 _size(element-margin) (_size(element-margin) * 1); + } + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + + .image { + margin-left: 0; + } + } + } + + &.orient-right { + // ... + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Spotlight (style3) */ + + .spotlight.style3 { + $image-width: 13rem; + $content-size: (_size(inner) * 0.75) - (_size(element-margin) * 1.75); + + @include padding(_size(padding, default), _size(padding, default)); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row-reverse'); + @include vendor('justify-content', 'center'); + position: relative; + overflow-x: hidden; + text-align: left; + + .content { + width: $content-size; + max-width: 100%; + } + + .image { + @include phone($image-width); + margin-right: (_size(element-margin) * 1.75); + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge)); + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large)); + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium) * 1.25, _size(padding, medium)); + + .image { + @include resize-phone($image-width, 0.875); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small) * 1.25, _size(padding, small)); + @include vendor('align-items', 'flex-start'); + + .image { + @include resize-phone($image-width, 0.625); + } + } + + @include orientation(portrait) { + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'column-reverse'); + text-align: center !important; + + .content { + width: 34rem; + max-width: 100%; + } + + .image { + margin-right: 0; + margin-left: 0; + } + } + + // Modifiers. + + // Variant. + &.iphone { + // ... + } + + &.android { + // ... + } + + // Orientation. + &.orient-left { + @include vendor('flex-direction', 'row'); + + .image { + margin-right: 0; + margin-left: (_size(element-margin) * 1.75); + } + + @include orientation(portrait) { + @include vendor('flex-direction', 'column-reverse'); + + .image { + margin-right: 0; + margin-left: 0; + } + } + } + + &.orient-right { + // ... + } + + // Content Alignment. + &.content-align-left { + // ... + } + + &.content-align-center { + text-align: center; + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Spotlight (style4) */ + + .spotlight.style4 { + @include padding(_size(padding, default), _size(padding, default) * 0.75); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + background-color: inherit; + position: relative; + overflow-x: hidden; + text-align: center; + + .content { + @include padding(_size(padding, default) * 0.5, _size(padding, default) * 0.5); + position: relative; + width: (_size(inner) * 0.625); + max-width: 50%; + background-color: inherit; + border-radius: _size(border-radius-alt); + margin-bottom: _size(element-margin); + z-index: 1; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.75); + + .content { + @include padding(_size(padding, xlarge) * 0.5, _size(padding, xlarge) * 0.5); + } + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large) * 0.75); + + .content { + @include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.75); + } + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium), _size(padding, medium) * 0.75); + + .content { + @include padding(_size(padding, medium) * 0.75, _size(padding, medium) * 0.75); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small), _size(padding, small) * 0.75); + + .content { + @include padding(_size(padding, small) * 0.75, _size(padding, small) * 0.75); + } + } + + @include breakpoint('<=xsmall') { + .content { + max-width: 80%; + } + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + } + + &.halfscreen { + min-height: 50vh; + } + + // Orientation. + &.orient-left { + @include vendor('justify-content', 'flex-start'); + padding-left: 0; + + .content { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + &.orient-center { + // ... + } + + &.orient-right { + @include vendor('justify-content', 'flex-end'); + padding-right: 0; + + .content { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + // Content Alignment. + &.content-align-left { + text-align: left; + } + + &.content-align-center { + // ... + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +/* Spotlight (style5) */ + + .spotlight.style5 { + @include padding(_size(padding, default), _size(padding, default) * 0.75); + @include vendor('align-items', 'center'); + @include vendor('display', 'flex'); + @include vendor('justify-content', 'center'); + background-color: inherit; + position: relative; + overflow-x: hidden; + text-align: center; + + .content { + @include padding(_size(padding, default) * 0.5, _size(padding, default) * 0.5); + position: relative; + width: (_size(inner) * 0.625); + max-width: 52.5%; + background-color: inherit; + border-radius: _size(border-radius-alt); + margin-bottom: _size(element-margin); + z-index: 1; + } + + .image { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 0; + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0; + } + } + + @include breakpoint('<=xlarge') { + @include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.75); + + .content { + @include padding(_size(padding, xlarge) * 0.5, _size(padding, xlarge) * 0.5); + } + } + + @include breakpoint('<=large') { + @include padding(_size(padding, large), _size(padding, large) * 0.75); + + .content { + @include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.75); + } + } + + @include breakpoint('<=medium') { + @include padding(_size(padding, medium), _size(padding, medium) * 0.75); + + .content { + @include padding(_size(padding, medium) * 0.75, _size(padding, medium) * 0.75); + } + } + + @include breakpoint('<=small') { + @include padding(_size(padding, small), _size(padding, small) * 0.75); + + .content { + @include padding(_size(padding, small) * 0.75, _size(padding, small) * 0.75); + } + } + + @include breakpoint('<=xsmall') { + .content { + max-width: 80%; + } + } + + // Modifiers. + + // Size. + &.fullscreen { + min-height: 100vh; + } + + &.halfscreen { + min-height: 50vh; + } + + // Orientation. + &.orient-left { + @include vendor('justify-content', 'flex-start'); + } + + &.orient-center { + // ... + } + + &.orient-right { + @include vendor('justify-content', 'flex-end'); + } + + // Content Alignment. + &.content-align-left { + text-align: left; + } + + &.content-align-center { + // ... + } + + &.content-align-right { + text-align: right; + } + + // Image Position. + &.image-position-left { + .image { + img { + @include vendor('object-position', 'left'); + } + } + } + + &.image-position-center { + // ... + } + + &.image-position-right { + .image { + img { + @include vendor('object-position', 'right'); + } + } + } + + } + +// Mixin + + @mixin color-spotlight($p: null) { + .spotlight { + .image { + background-color: transparentize(_palette($p, fg-bold), 0.875); + } + + @if ($p != 'invert') { + &.invert { + .image { + background-color: transparentize(_palette(invert, fg-bold), 0.875); + } + } + } + } + + .spotlight.style3 { + .image { + @include color-phone($p); + } + + // Variant. + &.iphone { + .image { + @include color-phone-variant('iphone', $p); + } + } + + &.android { + .image { + @include color-phone-variant('android', $p); + } + } + + @if ($p != 'invert') { + &.invert { + .image { + @include color-phone(invert); + } + + // Variant. + &.iphone { + .image { + @include color-phone-variant('iphone', invert); + } + } + + &.android { + .image { + @include color-phone-variant('android', invert); + } + } + + } + } + } + } + + @include color-spotlight; \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss new file mode 100644 index 0000000..a2c5d5f --- /dev/null +++ b/assets/sass/components/_table.scss @@ -0,0 +1,137 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + margin: 0 0 _size(element-margin) 0; + overflow-x: auto; + + > table { + margin-bottom: 0; + } + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid _size(border-width); + border-left: 0; + border-right: 0; + } + } + + td { + padding: 0.75rem 0.75rem; + } + + th { + font-size: 0.9rem; + font-weight: _font(weight-bold); + padding: 0 0.75rem 0.75rem 0.75rem; + text-align: left; + } + + thead { + border-bottom: solid (_size(border-width) * 2); + } + + tfoot { + border-top: solid (_size(border-width) * 2); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid _size(border-width); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: _size(border-width); + } + } + + &:first-child { + td { + border-top-width: _size(border-width); + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + + &.fixed { + table-layout: fixed; + } + } + + @mixin color-table($p: null) { + table { + tbody { + tr { + border-color: _palette($p, border); + + &:nth-child(2n + 1) { + background-color: _palette($p, border-bg); + } + + &.alt { + background-color: _palette($p, border-bg) !important; + } + } + } + + th { + color: _palette($p, fg-bold); + } + + thead { + border-bottom-color: _palette($p, border); + } + + tfoot { + border-top-color: _palette($p, border); + } + + &.alt { + tbody { + tr { + td { + border-color: _palette($p, border); + } + } + } + } + + &.uniform { + tbody { + tr { + &:nth-child(2n + 1) { + background-color: transparent; + } + } + } + } + } + } + + @include color-table; \ No newline at end of file diff --git a/assets/sass/components/_wrapper.scss b/assets/sass/components/_wrapper.scss new file mode 100644 index 0000000..6f3ee21 --- /dev/null +++ b/assets/sass/components/_wrapper.scss @@ -0,0 +1,120 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Wrapper (style1) */ + + .wrapper.style1 { + > .inner { + @include padding(_size(padding, default), _size(padding, default) * 0.5); + margin: 0 auto; + max-width: 100%; + width: _size(inner); + + &.medium { + width: _size(inner) * 0.75; + } + + &.small { + width: _size(inner) * 0.5; + } + } + + @include breakpoint('<=xlarge') { + > .inner { + @include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.5); + } + } + + @include breakpoint('<=large') { + > .inner { + @include padding(_size(padding, large), _size(padding, large)); + } + } + + @include breakpoint('<=medium') { + > .inner { + @include padding(_size(padding, medium) * 1.5, _size(padding, medium)); + } + } + + @include breakpoint('<=small') { + > .inner { + @include padding(_size(padding, small) * 1.5, _size(padding, small)); + } + } + } + +/* Wrapper (style2) */ + + .wrapper.style2 { + padding: _size(padding, default); + background-color: _palette(bg-alt); + + > .inner { + @include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.5); + background-color: _palette(bg); + border-radius: _size(border-radius-alt); + margin: 0 auto; + max-width: 100%; + position: relative; + width: _size(inner); + z-index: 1; + + &.medium { + width: _size(inner) * 0.75; + } + + &.small { + width: _size(inner) * 0.5; + } + } + + @include breakpoint('<=xlarge') { + padding: _size(padding, xlarge); + + > .inner { + @include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.5); + } + } + + @include breakpoint('<=large') { + padding: _size(padding, large); + + > .inner { + @include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.5); + } + } + + @include breakpoint('<=medium') { + padding: _size(padding, medium) * 0.75; + + > .inner { + @include padding(_size(padding, medium), _size(padding, medium) * 0.75); + } + } + + @include breakpoint('<=small') { + padding: _size(padding, small) * 0.75; + + > .inner { + @include padding(_size(padding, small), _size(padding, small) * 0.75); + } + } + } + + #wrapper { + > .wrapper.style2 { + &.invert { + &:not(.color1):not(.color2):not(.color3):not(.color4):not(.color5):not(.color6):not(.color7) { + background-color: _palette(invert, bg-alt); + } + + > .inner { + background-color: _palette(invert, bg); + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_wrapper.scss b/assets/sass/layout/_wrapper.scss new file mode 100644 index 0000000..4667fd9 --- /dev/null +++ b/assets/sass/layout/_wrapper.scss @@ -0,0 +1,49 @@ +/// +/// Story by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Wrapper */ + + @mixin wrapper-color($n) { + > .color#{$n} { + background-color: _palette(color#{$n}); + } + } + + #wrapper { + background-color: inherit; + width: 100%; + overflow-x: hidden; + + > .invert { + @include color(invert); + } + + @include wrapper-color(1); + @include wrapper-color(2); + @include wrapper-color(3); + @include wrapper-color(4); + @include wrapper-color(5); + @include wrapper-color(6); + @include wrapper-color(7); + + &.divided { + > * { + box-shadow: inset 0 1px 0 0 _palette(border-alt); + + &:first-child { + box-shadow: none !important; + } + } + + > .invert { + box-shadow: inset 0 1px 0 0 _palette(invert, border-alt); + + &:first-child { + box-shadow: none !important; + } + } + } + } \ No newline at end of file diff --git a/assets/sass/libs/_breakpoints.scss b/assets/sass/libs/_breakpoints.scss new file mode 100644 index 0000000..c5301d8 --- /dev/null +++ b/assets/sass/libs/_breakpoints.scss @@ -0,0 +1,223 @@ +// breakpoints.scss v1.0 | @ajlkn | MIT licensed */ + +// Vars. + + /// Breakpoints. + /// @var {list} + $breakpoints: () !global; + +// Mixins. + + /// Sets breakpoints. + /// @param {map} $x Breakpoints. + @mixin breakpoints($x: ()) { + $breakpoints: $x !global; + } + + /// Wraps @content in a @media block targeting a specific orientation. + /// @param {string} $orientation Orientation. + @mixin orientation($orientation) { + @media screen and (orientation: #{$orientation}) { + @content; + } + } + + /// Wraps @content in a @media block using a given query. + /// @param {string} $query Query. + @mixin breakpoint($query: null) { + + $breakpoint: null; + $op: null; + $media: null; + + // Determine operator, breakpoint. + + // Greater than or equal. + @if (str-slice($query, 0, 2) == '>=') { + + $op: 'gte'; + $breakpoint: str-slice($query, 3); + + } + + // Less than or equal. + @elseif (str-slice($query, 0, 2) == '<=') { + + $op: 'lte'; + $breakpoint: str-slice($query, 3); + + } + + // Greater than. + @elseif (str-slice($query, 0, 1) == '>') { + + $op: 'gt'; + $breakpoint: str-slice($query, 2); + + } + + // Less than. + @elseif (str-slice($query, 0, 1) == '<') { + + $op: 'lt'; + $breakpoint: str-slice($query, 2); + + } + + // Not. + @elseif (str-slice($query, 0, 1) == '!') { + + $op: 'not'; + $breakpoint: str-slice($query, 2); + + } + + // Equal. + @else { + + $op: 'eq'; + $breakpoint: $query; + + } + + // Build media. + @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { + + $a: map-get($breakpoints, $breakpoint); + + // Range. + @if (type-of($a) == 'list') { + + $x: nth($a, 1); + $y: nth($a, 2); + + // Max only. + @if ($x == null) { + + // Greater than or equal (>= 0 / anything) + @if ($op == 'gte') { + $media: 'screen'; + } + + // Less than or equal (<= y) + @elseif ($op == 'lte') { + $media: 'screen and (max-width: ' + $y + ')'; + } + + // Greater than (> y) + @elseif ($op == 'gt') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Less than (< 0 / invalid) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: -1px)'; + } + + // Not (> y) + @elseif ($op == 'not') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Equal (<= y) + @else { + $media: 'screen and (max-width: ' + $y + ')'; + } + + } + + // Min only. + @else if ($y == null) { + + // Greater than or equal (>= x) + @if ($op == 'gte') { + $media: 'screen and (min-width: ' + $x + ')'; + } + + // Less than or equal (<= inf / anything) + @elseif ($op == 'lte') { + $media: 'screen'; + } + + // Greater than (> inf / invalid) + @elseif ($op == 'gt') { + $media: 'screen and (max-width: -1px)'; + } + + // Less than (< x) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Not (< x) + @elseif ($op == 'not') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Equal (>= x) + @else { + $media: 'screen and (min-width: ' + $x + ')'; + } + + } + + // Min and max. + @else { + + // Greater than or equal (>= x) + @if ($op == 'gte') { + $media: 'screen and (min-width: ' + $x + ')'; + } + + // Less than or equal (<= y) + @elseif ($op == 'lte') { + $media: 'screen and (max-width: ' + $y + ')'; + } + + // Greater than (> y) + @elseif ($op == 'gt') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Less than (< x) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Not (< x and > y) + @elseif ($op == 'not') { + $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; + } + + // Equal (>= x and <= y) + @else { + $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; + } + + } + + } + + // String. + @else { + + // Missing a media type? Prefix with "screen". + @if (str-slice($a, 0, 1) == '(') { + $media: 'screen and ' + $a; + } + + // Otherwise, use as-is. + @else { + $media: $a; + } + + } + + } + + // Output. + @media #{$media} { + @content; + } + + } \ No newline at end of file diff --git a/assets/sass/libs/_functions.scss b/assets/sass/libs/_functions.scss new file mode 100644 index 0000000..b367524 --- /dev/null +++ b/assets/sass/libs/_functions.scss @@ -0,0 +1,90 @@ +/// Removes a specific item from a list. +/// @author Hugo Giraudel +/// @param {list} $list List. +/// @param {integer} $index Index. +/// @return {list} Updated list. +@function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + +} + +/// Gets a value from a map. +/// @author Hugo Giraudel +/// @param {map} $map Map. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function val($map, $keys...) { + + @if nth($keys, 1) == null { + $keys: remove-nth($keys, 1); + } + + @each $key in $keys { + $map: map-get($map, $key); + } + + @return $map; + +} + +/// Gets a duration value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _duration($keys...) { + @return val($duration, $keys...); +} + +/// Gets a font value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _font($keys...) { + @return val($font, $keys...); +} + +/// Gets a misc value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _misc($keys...) { + @return val($misc, $keys...); +} + +/// Gets a palette value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _palette($keys...) { + @return val($palette, $keys...); +} + +/// Gets a size value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _size($keys...) { + @return val($size, $keys...); +} \ No newline at end of file diff --git a/assets/sass/libs/_html-grid.scss b/assets/sass/libs/_html-grid.scss new file mode 100644 index 0000000..3c08069 --- /dev/null +++ b/assets/sass/libs/_html-grid.scss @@ -0,0 +1,149 @@ +// html-grid.scss v1.0 | @ajlkn | MIT licensed */ + +// Mixins. + + /// Initializes the current element as an HTML grid. + /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). + /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). + @mixin html-grid($gutters: 1.5em, $suffix: '') { + + // Initialize. + $cols: 12; + $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; + $unit: 100% / $cols; + + // Suffixes. + $suffixes: null; + + @if (type-of($suffix) == 'list') { + $suffixes: $suffix; + } + @else { + $suffixes: ($suffix); + } + + // Gutters. + $guttersCols: null; + $guttersRows: null; + + @if (type-of($gutters) == 'list') { + + $guttersCols: nth($gutters, 1); + $guttersRows: nth($gutters, 2); + + } + @else { + + $guttersCols: $gutters; + $guttersRows: 0; + + } + + // Row. + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + + // Columns. + > * { + box-sizing: border-box; + } + + // Gutters. + &.gtr-uniform { + > * { + > :last-child { + margin-bottom: 0; + } + } + } + + // Alignment. + &.aln-left { + justify-content: flex-start; + } + + &.aln-center { + justify-content: center; + } + + &.aln-right { + justify-content: flex-end; + } + + &.aln-top { + align-items: flex-start; + } + + &.aln-middle { + align-items: center; + } + + &.aln-bottom { + align-items: flex-end; + } + + // Step through suffixes. + @each $suffix in $suffixes { + + // Suffix. + @if ($suffix != '') { + $suffix: '-' + $suffix; + } + @else { + $suffix: ''; + } + + // Row. + + // Important. + > .imp#{$suffix} { + order: -1; + } + + // Columns, offsets. + @for $i from 1 through $cols { + > .col-#{$i}#{$suffix} { + width: $unit * $i; + } + + > .off-#{$i}#{$suffix} { + margin-left: $unit * $i; + } + } + + // Step through multipliers. + @each $multiplier in $multipliers { + + // Gutters. + $class: null; + + @if ($multiplier != 1) { + $class: '.gtr-' + ($multiplier * 100); + } + + &#{$class} { + margin-top: ($guttersRows * $multiplier * -1); + margin-left: ($guttersCols * $multiplier * -1); + + > * { + padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); + } + + // Uniform. + &.gtr-uniform { + margin-top: $guttersCols * $multiplier * -1; + + > * { + padding-top: $guttersCols * $multiplier; + } + } + + } + + } + + } + + } \ No newline at end of file diff --git a/assets/sass/libs/_mixins.scss b/assets/sass/libs/_mixins.scss new file mode 100644 index 0000000..8187463 --- /dev/null +++ b/assets/sass/libs/_mixins.scss @@ -0,0 +1,78 @@ +/// Makes an element's :before pseudoelement a FontAwesome icon. +/// @param {string} $content Optional content value to use. +/// @param {string} $category Optional category to use. +/// @param {string} $where Optional pseudoelement to target (before or after). +@mixin icon($content: false, $category: regular, $where: before) { + + text-decoration: none; + + &:#{$where} { + + @if $content { + content: $content; + } + + -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; + + @if ($category == brands) { + font-family: 'Font Awesome 5 Brands'; + } + @elseif ($category == solid) { + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + @else { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; + } + + } + +} + +/// Applies padding to an element, taking the current element-margin value into account. +/// @param {mixed} $tb Top/bottom padding. +/// @param {mixed} $lr Left/right padding. +/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) +/// @param {bool} $important If true, adds !important. +@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { + + @if $important { + $important: '!important'; + } + + $x: 0.1em; + + @if unit(_size(element-margin)) == 'rem' { + $x: 0.1rem; + } + + padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; + +} + +/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). +/// @param {string} $svg SVG data URL. +/// @return {string} Encoded SVG data URL. +@function svg-url($svg) { + + $svg: str-replace($svg, '"', '\''); + $svg: str-replace($svg, '%', '%25'); + $svg: str-replace($svg, '<', '%3C'); + $svg: str-replace($svg, '>', '%3E'); + $svg: str-replace($svg, '&', '%26'); + $svg: str-replace($svg, '#', '%23'); + $svg: str-replace($svg, '{', '%7B'); + $svg: str-replace($svg, '}', '%7D'); + $svg: str-replace($svg, ';', '%3B'); + + @return url("data:image/svg+xml;charset=utf8,#{$svg}"); + +} \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss new file mode 100644 index 0000000..24b41c3 --- /dev/null +++ b/assets/sass/libs/_vars.scss @@ -0,0 +1,80 @@ +// Misc. + $misc: ( + z-index-base: 10000, + overlay-opacity: 0.5, + lightbox-opacity: 0.75, + gallery-limit: 32, + items-limit: 16 + ); + +// Duration. + $duration: ( + menu: 0.5s, + transition: 0.2s, + gallery-lightbox: 0.5s, + gallery-delay: 0.15s, + items-delay: 0.15s, + on-load: 0.75s, + on-scroll: 0.75s + ); + +// Size. + $size: ( + border-radius: 4px, + border-radius-alt: 0.5rem, + border-width: 1px, + element-height: 2.75rem, + element-margin: 2rem, + gutter: 3.5rem, + inner: 64rem, + padding: ( + default: 7rem, + xlarge: 5rem, + large: 4rem, + medium: 3rem, + small: 2rem + ) + ); + +// Font. + $font: ( + family: ('Source Sans Pro', Helvetica, sans-serif), + family-fixed: ('Courier New', monospace), + weight: 300, + weight-bold: 400, + kerning: -0.05em, + kerning-alt: 0.125em + ); + +// Palette. + $palette: ( + color1: #30363d, + color2: #db8992, + color3: #ab7aad, + color4: #897cad, + color5: #7794ce, + color6: #64abb4, + color7: #6ba78c, + + bg: #ffffff, + bg-alt: #eeeeee, + fg: #000000, + fg-bold: #000000, + fg-light: rgba(0,0,0,0.75), + border: rgba(0,0,0,0.2), + border-alt: rgba(0,0,0,0.075), + border-bg: rgba(0,0,0,0.05), + accent: #47D3E5, + + invert: ( + bg: #000000, + bg-alt: #222222, + fg: #ffffff, + fg-bold: #ffffff, + fg-light: #ffffff, + border: rgba(255,255,255,1.0), + border-alt: rgba(255,255,255,0.125), + border-bg: rgba(255,255,255,0.125), + accent: #47D3E5 + ), + ); \ No newline at end of file diff --git a/assets/sass/libs/_vendor.scss b/assets/sass/libs/_vendor.scss new file mode 100644 index 0000000..6599a3f --- /dev/null +++ b/assets/sass/libs/_vendor.scss @@ -0,0 +1,376 @@ +// vendor.scss v1.0 | @ajlkn | MIT licensed */ + +// Vars. + + /// Vendor prefixes. + /// @var {list} + $vendor-prefixes: ( + '-moz-', + '-webkit-', + '-ms-', + '' + ); + + /// Properties that should be vendorized. + /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org + /// @var {list} + $vendor-properties: ( + + // Animation. + 'animation', + 'animation-delay', + 'animation-direction', + 'animation-duration', + 'animation-fill-mode', + 'animation-iteration-count', + 'animation-name', + 'animation-play-state', + 'animation-timing-function', + + // Appearance. + 'appearance', + + // Backdrop filter. + 'backdrop-filter', + + // Background image options. + 'background-clip', + 'background-origin', + 'background-size', + + // Box sizing. + 'box-sizing', + + // Clip path. + 'clip-path', + + // Filter effects. + 'filter', + + // Flexbox. + 'align-content', + 'align-items', + 'align-self', + 'flex', + 'flex-basis', + 'flex-direction', + 'flex-flow', + 'flex-grow', + 'flex-shrink', + 'flex-wrap', + 'justify-content', + 'order', + + // Font feature. + 'font-feature-settings', + 'font-language-override', + 'font-variant-ligatures', + + // Font kerning. + 'font-kerning', + + // Fragmented borders and backgrounds. + 'box-decoration-break', + + // Grid layout. + 'grid-column', + 'grid-column-align', + 'grid-column-end', + 'grid-column-start', + 'grid-row', + 'grid-row-align', + 'grid-row-end', + 'grid-row-start', + 'grid-template-columns', + 'grid-template-rows', + + // Hyphens. + 'hyphens', + 'word-break', + + // Masks. + 'mask', + 'mask-border', + 'mask-border-outset', + 'mask-border-repeat', + 'mask-border-slice', + 'mask-border-source', + 'mask-border-width', + 'mask-clip', + 'mask-composite', + 'mask-image', + 'mask-origin', + 'mask-position', + 'mask-repeat', + 'mask-size', + + // Multicolumn. + 'break-after', + 'break-before', + 'break-inside', + 'column-count', + 'column-fill', + 'column-gap', + 'column-rule', + 'column-rule-color', + 'column-rule-style', + 'column-rule-width', + 'column-span', + 'column-width', + 'columns', + + // Object fit. + 'object-fit', + 'object-position', + + // Regions. + 'flow-from', + 'flow-into', + 'region-fragment', + + // Scroll snap points. + 'scroll-snap-coordinate', + 'scroll-snap-destination', + 'scroll-snap-points-x', + 'scroll-snap-points-y', + 'scroll-snap-type', + + // Shapes. + 'shape-image-threshold', + 'shape-margin', + 'shape-outside', + + // Tab size. + 'tab-size', + + // Text align last. + 'text-align-last', + + // Text decoration. + 'text-decoration-color', + 'text-decoration-line', + 'text-decoration-skip', + 'text-decoration-style', + + // Text emphasis. + 'text-emphasis', + 'text-emphasis-color', + 'text-emphasis-position', + 'text-emphasis-style', + + // Text size adjust. + 'text-size-adjust', + + // Text spacing. + 'text-spacing', + + // Transform. + 'transform', + 'transform-origin', + + // Transform 3D. + 'backface-visibility', + 'perspective', + 'perspective-origin', + 'transform-style', + + // Transition. + 'transition', + 'transition-delay', + 'transition-duration', + 'transition-property', + 'transition-timing-function', + + // Unicode bidi. + 'unicode-bidi', + + // User select. + 'user-select', + + // Writing mode. + 'writing-mode', + + ); + + /// Values that should be vendorized. + /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org + /// @var {list} + $vendor-values: ( + + // Cross fade. + 'cross-fade', + + // Element function. + 'element', + + // Filter function. + 'filter', + + // Flexbox. + 'flex', + 'inline-flex', + + // Grab cursors. + 'grab', + 'grabbing', + + // Gradients. + 'linear-gradient', + 'repeating-linear-gradient', + 'radial-gradient', + 'repeating-radial-gradient', + + // Grid layout. + 'grid', + 'inline-grid', + + // Image set. + 'image-set', + + // Intrinsic width. + 'max-content', + 'min-content', + 'fit-content', + 'fill', + 'fill-available', + 'stretch', + + // Sticky position. + 'sticky', + + // Transform. + 'transform', + + // Zoom cursors. + 'zoom-in', + 'zoom-out', + + ); + +// Functions. + + /// Removes a specific item from a list. + /// @author Hugo Giraudel + /// @param {list} $list List. + /// @param {integer} $index Index. + /// @return {list} Updated list. + @function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + + } + + /// Replaces a substring within another string. + /// @author Hugo Giraudel + /// @param {string} $string String. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {string} Updated string. + @function str-replace($string, $search, $replace: '') { + + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; + + } + + /// Replaces a substring within each string in a list. + /// @param {list} $strings List of strings. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {list} Updated list of strings. + @function str-replace-all($strings, $search, $replace: '') { + + @each $string in $strings { + $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); + } + + @return $strings; + + } + +// Mixins. + + /// Wraps @content in vendorized keyframe blocks. + /// @param {string} $name Name. + @mixin keyframes($name) { + + @-moz-keyframes #{$name} { @content; } + @-webkit-keyframes #{$name} { @content; } + @-ms-keyframes #{$name} { @content; } + @keyframes #{$name} { @content; } + + } + + /// Vendorizes a declaration's property and/or value(s). + /// @param {string} $property Property. + /// @param {mixed} $value String/list of value(s). + @mixin vendor($property, $value) { + + // Determine if property should expand. + $expandProperty: index($vendor-properties, $property); + + // Determine if value should expand (and if so, add '-prefix-' placeholder). + $expandValue: false; + + @each $x in $value { + @each $y in $vendor-values { + @if $y == str-slice($x, 1, str-length($y)) { + + $value: set-nth($value, index($value, $x), '-prefix-' + $x); + $expandValue: true; + + } + } + } + + // Expand property? + @if $expandProperty { + @each $vendor in $vendor-prefixes { + #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Expand just the value? + @elseif $expandValue { + @each $vendor in $vendor-prefixes { + #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Neither? Treat them as a normal declaration. + @else { + #{$property}: #{$value}; + } + + } \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 0000000..0613810 --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,185 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'libs/html-grid'; +@import 'fontawesome-all.min.css'; +@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i'); + +/* + Story by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +// Breakpoints. + + @include breakpoints(( + xlarge: ( 1281px, 1680px ), + large: ( 981px, 1280px ), + medium: ( 737px, 980px ), + small: ( 481px, 736px ), + xsmall: ( 361px, 480px ), + xxsmall: ( null, 360px ) + )); + +// Mixins. + + @mixin color($p) { + @include color-typography($p); + @include color-box($p); + @include color-button($p); + @include color-form($p); + @include color-icon($p); + @include color-list($p); + @include color-section($p); + @include color-table($p); + @include color-banner($p); + @include color-spotlight($p); + @include color-gallery($p); + @include color-items($p); + @include color-index($p); + } + +// Phone. + + @mixin phone($image-width) { + @include vendor('flex-grow', '0'); + @include vendor('flex-shrink', '0'); + border-radius: 0; + border: solid _size(border-width); + + img { + @include vendor('object-fit', 'cover'); + @include vendor('object-position', 'center'); + display: block; + width: 100%; + height: 100%; + border-radius: 0; + } + + &:before { + content: ''; + display: block; + background-position: center; + background-repeat: no-repeat; + border: solid _size(border-width); + border-bottom: 0; + } + + &:after { + content: ''; + display: block; + background-position: center; + background-repeat: no-repeat; + border: solid _size(border-width); + border-top: 0; + } + + @include resize-phone($image-width, 1); + } + + @mixin resize-phone($image-width, $image-factor) { + $image-pad-top: 2.5rem; + $image-pad-bottom: 3rem; + $image-height: ($image-width * (1920 / 1080)); + + width: ($image-width * $image-factor); + height: (($image-width * $image-factor) * (1920 / 1080)); + margin-top: ($image-pad-top * $image-factor); + margin-bottom: (_size(element-margin) + ($image-pad-bottom * $image-factor)); + + &:before { + height: ($image-pad-top * $image-factor); + background-size: (64px * $image-factor) (32px * $image-factor); + margin-top: (($image-pad-top * $image-factor) * -1); + border-radius: (1rem * $image-factor) (1rem * $image-factor) 0 0; + } + + &:after { + height: ($image-pad-bottom * $image-factor); + background-size: (64px * $image-factor) (32px * $image-factor); + margin-bottom: (($image-pad-bottom * $image-factor) * -1); + border-radius: 0 0 (1rem * $image-factor) (1rem * $image-factor); + } + } + + @mixin color-phone($p) { + border-color: _palette($p, border); + background-color: _palette($p, border); + + @if ($p != 'invert') { + border-width: 0; + } + @else { + border-width: _size(border-width); + } + + &:before { + background-image: svg-url(''); + border-color: _palette($p, border); + + @if ($p == 'invert') { + width: calc(100% + #{_size(border-width) * 2}); + margin-left: (_size(border-width) * -1); + } + @else { + width: 100%; + } + } + + &:after { + background-image: svg-url(''); + border-color: _palette($p, border); + + @if ($p == 'invert') { + width: calc(100% + #{_size(border-width) * 2}); + margin-left: (_size(border-width) * -1); + } + @else { + width: 100%; + } + } + } + + @mixin color-phone-variant($v, $p) { + @if ($v == 'android') { + &:after { + background-image: svg-url(''); + } + } + @else if ($p == 'iphone') { + // ... + } + } + +// 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/list'; + @import 'components/actions'; + @import 'components/icons'; + @import 'components/section'; + @import 'components/table'; + @import 'components/banner'; + @import 'components/spotlight'; + @import 'components/gallery'; + @import 'components/wrapper'; + @import 'components/items'; + @import 'components/index'; + +// Layout. + + @import 'layout/wrapper'; \ No newline at end of file diff --git a/assets/sass/noscript.scss b/assets/sass/noscript.scss new file mode 100644 index 0000000..0f1e1c0 --- /dev/null +++ b/assets/sass/noscript.scss @@ -0,0 +1,207 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'libs/html-grid'; + +/* + Story by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Banner (transitions) */ + + .banner { + + // Mixin. + @mixin transition-banner($event) { + $x: null; + $y: null; + + @if ($event == 'load') { + $x: 'body.is-preload &'; + $y: _duration(on-load); + } + @else if ($event == 'scroll') { + $x: '&.is-inactive'; + $y: _duration(on-scroll); + } + + // Content. + &.on#{$event}-content-fade-up { + .content { + @include vendor('transition', 'none'); + } + + #{$x} { + .content { + @include vendor('transform', 'none'); + opacity: 1; + } + } + } + + &.on#{$event}-content-fade-down { + .content { + @include vendor('transition', 'none'); + } + + #{$x} { + .content { + @include vendor('transform', 'none'); + opacity: 1; + } + } + } + + &.on#{$event}-content-fade-left { + .content { + @include vendor('transition', 'none'); + } + + #{$x} { + .content { + @include vendor('transform', 'none'); + opacity: 1; + } + } + } + + &.on#{$event}-content-fade-right { + .content { + @include vendor('transition', 'none'); + } + + #{$x} { + .content { + @include vendor('transform', 'none'); + opacity: 1; + } + } + } + + &.on#{$event}-content-fade-in { + .content { + @include vendor('transition', 'none'); + } + + #{$x} { + .content { + @include vendor('transform', 'none'); + opacity: 1; + } + } + } + + // Image. + &.on#{$event}-image-fade-up { + .image { + @include vendor('transition', 'none'); + + img { + @include vendor('transition', 'none'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'none'); + opacity: 1; + + img { + opacity: 1; + } + } + } + } + + &.on#{$event}-image-fade-down { + .image { + @include vendor('transition', 'none'); + + img { + @include vendor('transition', 'none'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'none'); + opacity: 1; + + img { + opacity: 1; + } + } + } + } + + &.on#{$event}-image-fade-left { + .image { + @include vendor('transition', 'none'); + + img { + @include vendor('transition', 'none'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'none'); + opacity: 1; + + img { + opacity: 1; + } + } + } + } + + &.on#{$event}-image-fade-right { + .image { + @include vendor('transition', 'none'); + + img { + @include vendor('transition', 'none'); + } + } + + #{$x} { + .image { + @include vendor('transform', 'none'); + opacity: 1; + + img { + opacity: 1; + } + } + } + } + + &.on#{$event}-image-fade-in { + .image { + img { + @include vendor('transition', 'none'); + } + } + + #{$x} { + .image { + img { + opacity: 1; + } + } + } + } + + } + + // On Load. + @include transition-banner('load'); + + // On Scroll. + @include transition-banner('scroll'); + + } \ No newline at end of file diff --git a/assets/webfonts/fa-brands-400.eot b/assets/webfonts/fa-brands-400.eot new file mode 100644 index 0000000..cba6c6c Binary files /dev/null and b/assets/webfonts/fa-brands-400.eot differ diff --git a/assets/webfonts/fa-brands-400.svg b/assets/webfonts/fa-brands-400.svg new file mode 100644 index 0000000..b9881a4 --- /dev/null +++ b/assets/webfonts/fa-brands-400.svg @@ -0,0 +1,3717 @@ + + + + +Created by FontForge 20201107 at Wed Aug 4 12:25:29 2021 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/webfonts/fa-brands-400.ttf b/assets/webfonts/fa-brands-400.ttf new file mode 100644 index 0000000..8d75ded Binary files /dev/null and b/assets/webfonts/fa-brands-400.ttf differ diff --git a/assets/webfonts/fa-brands-400.woff b/assets/webfonts/fa-brands-400.woff new file mode 100644 index 0000000..3375bef Binary files /dev/null and b/assets/webfonts/fa-brands-400.woff differ diff --git a/assets/webfonts/fa-brands-400.woff2 b/assets/webfonts/fa-brands-400.woff2 new file mode 100644 index 0000000..402f81c Binary files /dev/null and b/assets/webfonts/fa-brands-400.woff2 differ diff --git a/assets/webfonts/fa-regular-400.eot b/assets/webfonts/fa-regular-400.eot new file mode 100644 index 0000000..a4e5989 Binary files /dev/null and b/assets/webfonts/fa-regular-400.eot differ diff --git a/assets/webfonts/fa-regular-400.svg b/assets/webfonts/fa-regular-400.svg new file mode 100644 index 0000000..463af27 --- /dev/null +++ b/assets/webfonts/fa-regular-400.svg @@ -0,0 +1,801 @@ + + + + +Created by FontForge 20201107 at Wed Aug 4 12:25:29 2021 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/webfonts/fa-regular-400.ttf b/assets/webfonts/fa-regular-400.ttf new file mode 100644 index 0000000..7157aaf Binary files /dev/null and b/assets/webfonts/fa-regular-400.ttf differ diff --git a/assets/webfonts/fa-regular-400.woff b/assets/webfonts/fa-regular-400.woff new file mode 100644 index 0000000..ad077c6 Binary files /dev/null and b/assets/webfonts/fa-regular-400.woff differ diff --git a/assets/webfonts/fa-regular-400.woff2 b/assets/webfonts/fa-regular-400.woff2 new file mode 100644 index 0000000..5632894 Binary files /dev/null and b/assets/webfonts/fa-regular-400.woff2 differ diff --git a/assets/webfonts/fa-solid-900.eot b/assets/webfonts/fa-solid-900.eot new file mode 100644 index 0000000..e994171 Binary files /dev/null and b/assets/webfonts/fa-solid-900.eot differ diff --git a/assets/webfonts/fa-solid-900.svg b/assets/webfonts/fa-solid-900.svg new file mode 100644 index 0000000..00296e9 --- /dev/null +++ b/assets/webfonts/fa-solid-900.svg @@ -0,0 +1,5034 @@ + + + + +Created by FontForge 20201107 at Wed Aug 4 12:25:29 2021 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/webfonts/fa-solid-900.ttf b/assets/webfonts/fa-solid-900.ttf new file mode 100644 index 0000000..25abf38 Binary files /dev/null and b/assets/webfonts/fa-solid-900.ttf differ diff --git a/assets/webfonts/fa-solid-900.woff b/assets/webfonts/fa-solid-900.woff new file mode 100644 index 0000000..23ee663 Binary files /dev/null and b/assets/webfonts/fa-solid-900.woff differ diff --git a/assets/webfonts/fa-solid-900.woff2 b/assets/webfonts/fa-solid-900.woff2 new file mode 100644 index 0000000..2217164 Binary files /dev/null and b/assets/webfonts/fa-solid-900.woff2 differ diff --git a/browserconfig.xml b/browserconfig.xml new file mode 100644 index 0000000..c554148 --- /dev/null +++ b/browserconfig.xml @@ -0,0 +1,2 @@ + +#ffffff \ No newline at end of file diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..4da2f97 Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..54df498 Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon-96x96.png b/favicon-96x96.png new file mode 100644 index 0000000..64b6df8 Binary files /dev/null and b/favicon-96x96.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..4d35821 Binary files /dev/null and b/favicon.ico differ diff --git a/images/2019.webp b/images/2019.webp new file mode 100644 index 0000000..c87c201 Binary files /dev/null and b/images/2019.webp differ diff --git a/images/2021.webp b/images/2021.webp new file mode 100644 index 0000000..d08d5b6 Binary files /dev/null and b/images/2021.webp differ diff --git a/images/2022.webp b/images/2022.webp new file mode 100644 index 0000000..4ba698d Binary files /dev/null and b/images/2022.webp differ diff --git a/images/2023.webp b/images/2023.webp new file mode 100644 index 0000000..3c4f57e Binary files /dev/null and b/images/2023.webp differ diff --git a/images/gongwangbeian.png b/images/gongwangbeian.png new file mode 100644 index 0000000..2a13ba2 Binary files /dev/null and b/images/gongwangbeian.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3590ea1 --- /dev/null +++ b/index.html @@ -0,0 +1,103 @@ + + + + + 网服-CSU的回忆 + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+
+

2022.11网服团建

+

网服人22年的记忆
你还记得吗😄

+ +
+
+ 2022.11网服团建 +
+
+ + +
+
+

2021.5.29毕业晚会

+

这挥舞的荧光棒镌刻着浓浓的不舍
不知我们新一届能否借到这样的大厅😛

+
+
+ 2021.5.29毕业晚会 +
+
+ + +
+
+

2019合照

+

队史筹备篇章开始之地
2023也是在这里( •̀ ω •́ )✌

+
+
+ 2019合照 +
+
+ + + + + +
+ + + + + + + + + + + diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..013d4a6 --- /dev/null +++ b/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "App", + "icons": [ + { + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +} \ No newline at end of file diff --git a/ms-icon-144x144.png b/ms-icon-144x144.png new file mode 100644 index 0000000..6f01571 Binary files /dev/null and b/ms-icon-144x144.png differ diff --git a/ms-icon-150x150.png b/ms-icon-150x150.png new file mode 100644 index 0000000..4284001 Binary files /dev/null and b/ms-icon-150x150.png differ diff --git a/ms-icon-310x310.png b/ms-icon-310x310.png new file mode 100644 index 0000000..af14220 Binary files /dev/null and b/ms-icon-310x310.png differ diff --git a/ms-icon-70x70.png b/ms-icon-70x70.png new file mode 100644 index 0000000..175290d Binary files /dev/null and b/ms-icon-70x70.png differ