diff options
Diffstat (limited to 'assets')
40 files changed, 7092 insertions, 5472 deletions
diff --git a/assets/css/font-awesome.min.css b/assets/css/font-awesome.min.css index 9b27f8e..9b27f8e 100755..100644 --- a/assets/css/font-awesome.min.css +++ b/assets/css/font-awesome.min.css diff --git a/assets/css/ie8.css b/assets/css/ie8.css deleted file mode 100755 index d62f812..0000000 --- a/assets/css/ie8.css +++ /dev/null @@ -1,60 +0,0 @@ -/* - Read Only by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Basic */ - - code, - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea, - .box, - .image, - .image img, - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - position: relative; - -ms-behavior: url("assets/js/ie/PIE.htc"); - } - -/* Form */ - - input[type="text"], - input[type="password"], - input[type="email"], - select { - line-height: 2.75em; - } - - input[type="checkbox"], - input[type="radio"] { - -moz-appearance: normal; - -webkit-appearance: normal; - -ms-appearance: normal; - appearance: normal; - } - - input[type="checkbox"] + label, - input[type="radio"] + label { - padding: 0 0 0 1.5em; - } - - input[type="checkbox"] + label:before, - input[type="radio"] + label:before { - display: none; - } - -/* Button */ - - input[type="submit"].alt, - input[type="reset"].alt, - input[type="button"].alt, - .button.alt { - border: solid 2px #e4e4e4; - }
\ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index 85f64d0..76e3d58 100755..100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,8 +1,8 @@ -@import url("font-awesome.min.css"); -@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Source+Code+Pro:400"); +@import url(font-awesome.min.css); +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i"); /* - Read Only by HTML5 UP + Ethereal by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ @@ -56,1530 +56,249 @@ box-sizing: border-box; } -/* Containers */ +/* Page */ - .container { - margin-left: auto; - margin-right: auto; - } - - .container.\31 25\25 { - width: 100%; - max-width: 56.25em; - min-width: 45em; - } - - .container.\37 5\25 { - width: 33.75em; - } - - .container.\35 0\25 { - width: 22.5em; - } - - .container.\32 5\25 { - width: 11.25em; - } - - .container { - width: 45em; - } - - @media screen and (max-width: 1680px) { - - .container.\31 25\25 { - width: 100%; - max-width: 56.25em; - min-width: 45em; + @-moz-keyframes load-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .container.\37 5\25 { - width: 33.75em; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } - - .container.\35 0\25 { - width: 22.5em; - } - - .container.\32 5\25 { - width: 11.25em; - } - - .container { - width: 45em; - } - } - @media screen and (max-width: 1280px) { - - .container.\31 25\25 { - width: 100%; - max-width: 52.5em; - min-width: 42em; - } - - .container.\37 5\25 { - width: 31.5em; + @-webkit-keyframes load-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .container.\35 0\25 { - width: 21em; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } - - .container.\32 5\25 { - width: 10.5em; - } - - .container { - width: 42em; - } - - } - - @media screen and (max-width: 1024px) { - - .container.\31 25\25 { - width: 100%; - max-width: 106.25%; - min-width: 85%; - } - - .container.\37 5\25 { - width: 63.75%; - } - - .container.\35 0\25 { - width: 42.5%; - } - - .container.\32 5\25 { - width: 21.25%; - } - - .container { - width: 85% !important; - } - } - @media screen and (max-width: 736px) { - - .container.\31 25\25 { - width: 100%; - max-width: 112.5%; - min-width: 90%; - } - - .container.\37 5\25 { - width: 67.5%; - } - - .container.\35 0\25 { - width: 45%; - } - - .container.\32 5\25 { - width: 22.5%; + @-ms-keyframes load-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .container { - width: 90% !important; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } - } - @media screen and (max-width: 480px) { - - .container.\31 25\25 { - width: 100%; - max-width: 112.5%; - min-width: 90%; + @keyframes load-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .container.\37 5\25 { - width: 67.5%; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } - - .container.\35 0\25 { - width: 45%; - } - - .container.\32 5\25 { - width: 22.5%; - } - - .container { - width: 90% !important; - } - - } - -/* Grid */ - - .row { - border-bottom: solid 1px transparent; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - .row > * { - float: left; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - .row:after, .row:before { - content: ''; - display: block; - clear: both; - height: 0; - } - - .row.uniform > * > :first-child { - margin-top: 0; - } - - .row.uniform > * > :last-child { - margin-bottom: 0; - } - - .row.\30 \25 > * { - padding: 0 0 0 0em; - } - - .row.\30 \25 { - margin: 0 0 -1px 0em; - } - - .row.uniform.\30 \25 > * { - padding: 0em 0 0 0em; - } - - .row.uniform.\30 \25 { - margin: 0em 0 -1px 0em; - } - - .row > * { - padding: 0 0 0 2em; - } - - .row { - margin: 0 0 -1px -2em; - } - - .row.uniform > * { - padding: 2em 0 0 2em; - } - - .row.uniform { - margin: -2em 0 -1px -2em; - } - - .row.\32 00\25 > * { - padding: 0 0 0 4em; - } - - .row.\32 00\25 { - margin: 0 0 -1px -4em; - } - - .row.uniform.\32 00\25 > * { - padding: 4em 0 0 4em; } - .row.uniform.\32 00\25 { - margin: -4em 0 -1px -4em; + @-ms-viewport { + width: device-width; } - .row.\31 50\25 > * { - padding: 0 0 0 3em; - } - - .row.\31 50\25 { - margin: 0 0 -1px -3em; - } - - .row.uniform.\31 50\25 > * { - padding: 3em 0 0 3em; - } - - .row.uniform.\31 50\25 { - margin: -3em 0 -1px -3em; - } - - .row.\35 0\25 > * { - padding: 0 0 0 1em; - } - - .row.\35 0\25 { - margin: 0 0 -1px -1em; - } - - .row.uniform.\35 0\25 > * { - padding: 1em 0 0 1em; - } - - .row.uniform.\35 0\25 { - margin: -1em 0 -1px -1em; - } - - .row.\32 5\25 > * { - padding: 0 0 0 0.5em; - } - - .row.\32 5\25 { - margin: 0 0 -1px -0.5em; - } - - .row.uniform.\32 5\25 > * { - padding: 0.5em 0 0 0.5em; - } - - .row.uniform.\32 5\25 { - margin: -0.5em 0 -1px -0.5em; - } - - .\31 2u, .\31 2u\24 { + html { width: 100%; - clear: none; - margin-left: 0; - } - - .\31 1u, .\31 1u\24 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 0u, .\31 0u\24 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } - - .\39 u, .\39 u\24 { - width: 75%; - clear: none; - margin-left: 0; - } - - .\38 u, .\38 u\24 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } - - .\37 u, .\37 u\24 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } - - .\36 u, .\36 u\24 { - width: 50%; - clear: none; - margin-left: 0; - } - - .\35 u, .\35 u\24 { - width: 41.6666666667%; - clear: none; - margin-left: 0; - } - - .\34 u, .\34 u\24 { - width: 33.3333333333%; - clear: none; - margin-left: 0; - } - - .\33 u, .\33 u\24 { - width: 25%; - clear: none; - margin-left: 0; - } - - .\32 u, .\32 u\24 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 u, .\31 u\24 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } - - .\31 2u\24 + *, - .\31 1u\24 + *, - .\31 0u\24 + *, - .\39 u\24 + *, - .\38 u\24 + *, - .\37 u\24 + *, - .\36 u\24 + *, - .\35 u\24 + *, - .\34 u\24 + *, - .\33 u\24 + *, - .\32 u\24 + *, - .\31 u\24 + * { - clear: left; - } - - .\-11u { - margin-left: 91.66667%; - } - - .\-10u { - margin-left: 83.33333%; - } - - .\-9u { - margin-left: 75%; - } - - .\-8u { - margin-left: 66.66667%; - } - - .\-7u { - margin-left: 58.33333%; - } - - .\-6u { - margin-left: 50%; - } - - .\-5u { - margin-left: 41.66667%; - } - - .\-4u { - margin-left: 33.33333%; - } - - .\-3u { - margin-left: 25%; - } - - .\-2u { - margin-left: 16.66667%; - } - - .\-1u { - margin-left: 8.33333%; - } - - @media screen and (max-width: 1680px) { - - .row > * { - padding: 0 0 0 2em; - } - - .row { - margin: 0 0 -1px -2em; - } - - .row.uniform > * { - padding: 2em 0 0 2em; - } - - .row.uniform { - margin: -2em 0 -1px -2em; - } - - .row.\32 00\25 > * { - padding: 0 0 0 4em; - } - - .row.\32 00\25 { - margin: 0 0 -1px -4em; - } - - .row.uniform.\32 00\25 > * { - padding: 4em 0 0 4em; - } - - .row.uniform.\32 00\25 { - margin: -4em 0 -1px -4em; - } - - .row.\31 50\25 > * { - padding: 0 0 0 3em; - } - - .row.\31 50\25 { - margin: 0 0 -1px -3em; - } - - .row.uniform.\31 50\25 > * { - padding: 3em 0 0 3em; - } - - .row.uniform.\31 50\25 { - margin: -3em 0 -1px -3em; - } - - .row.\35 0\25 > * { - padding: 0 0 0 1em; - } - - .row.\35 0\25 { - margin: 0 0 -1px -1em; - } - - .row.uniform.\35 0\25 > * { - padding: 1em 0 0 1em; - } - - .row.uniform.\35 0\25 { - margin: -1em 0 -1px -1em; - } - - .row.\32 5\25 > * { - padding: 0 0 0 0.5em; - } - - .row.\32 5\25 { - margin: 0 0 -1px -0.5em; - } - - .row.uniform.\32 5\25 > * { - padding: 0.5em 0 0 0.5em; - } - - .row.uniform.\32 5\25 { - margin: -0.5em 0 -1px -0.5em; - } - - .\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 { - width: 100%; - clear: none; - margin-left: 0; - } - - .\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } - - .\39 u\28xlarge\29, .\39 u\24\28xlarge\29 { - width: 75%; - clear: none; - margin-left: 0; - } - - .\38 u\28xlarge\29, .\38 u\24\28xlarge\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } - - .\37 u\28xlarge\29, .\37 u\24\28xlarge\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } - - .\36 u\28xlarge\29, .\36 u\24\28xlarge\29 { - width: 50%; - clear: none; - margin-left: 0; - } - - .\35 u\28xlarge\29, .\35 u\24\28xlarge\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; - } - - .\34 u\28xlarge\29, .\34 u\24\28xlarge\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; - } - - .\33 u\28xlarge\29, .\33 u\24\28xlarge\29 { - width: 25%; - clear: none; - margin-left: 0; - } - - .\32 u\28xlarge\29, .\32 u\24\28xlarge\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 u\28xlarge\29, .\31 u\24\28xlarge\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } - - .\31 2u\24\28xlarge\29 + *, - .\31 1u\24\28xlarge\29 + *, - .\31 0u\24\28xlarge\29 + *, - .\39 u\24\28xlarge\29 + *, - .\38 u\24\28xlarge\29 + *, - .\37 u\24\28xlarge\29 + *, - .\36 u\24\28xlarge\29 + *, - .\35 u\24\28xlarge\29 + *, - .\34 u\24\28xlarge\29 + *, - .\33 u\24\28xlarge\29 + *, - .\32 u\24\28xlarge\29 + *, - .\31 u\24\28xlarge\29 + * { - clear: left; - } - - .\-11u\28xlarge\29 { - margin-left: 91.66667%; - } - - .\-10u\28xlarge\29 { - margin-left: 83.33333%; - } - - .\-9u\28xlarge\29 { - margin-left: 75%; - } - - .\-8u\28xlarge\29 { - margin-left: 66.66667%; - } - - .\-7u\28xlarge\29 { - margin-left: 58.33333%; - } - - .\-6u\28xlarge\29 { - margin-left: 50%; - } - - .\-5u\28xlarge\29 { - margin-left: 41.66667%; - } - - .\-4u\28xlarge\29 { - margin-left: 33.33333%; - } - - .\-3u\28xlarge\29 { - margin-left: 25%; - } - - .\-2u\28xlarge\29 { - margin-left: 16.66667%; - } - - .\-1u\28xlarge\29 { - margin-left: 8.33333%; - } - + height: 100%; } - @media screen and (max-width: 1280px) { - - .row > * { - padding: 0 0 0 1.5em; - } - - .row { - margin: 0 0 -1px -1.5em; - } - - .row.uniform > * { - padding: 1.5em 0 0 1.5em; - } - - .row.uniform { - margin: -1.5em 0 -1px -1.5em; - } - - .row.\32 00\25 > * { - padding: 0 0 0 3em; - } - - .row.\32 00\25 { - margin: 0 0 -1px -3em; - } - - .row.uniform.\32 00\25 > * { - padding: 3em 0 0 3em; - } - - .row.uniform.\32 00\25 { - margin: -3em 0 -1px -3em; - } - - .row.\31 50\25 > * { - padding: 0 0 0 2.25em; - } - - .row.\31 50\25 { - margin: 0 0 -1px -2.25em; - } - - .row.uniform.\31 50\25 > * { - padding: 2.25em 0 0 2.25em; - } - - .row.uniform.\31 50\25 { - margin: -2.25em 0 -1px -2.25em; - } - - .row.\35 0\25 > * { - padding: 0 0 0 0.75em; - } - - .row.\35 0\25 { - margin: 0 0 -1px -0.75em; - } - - .row.uniform.\35 0\25 > * { - padding: 0.75em 0 0 0.75em; - } - - .row.uniform.\35 0\25 { - margin: -0.75em 0 -1px -0.75em; - } - - .row.\32 5\25 > * { - padding: 0 0 0 0.375em; - } - - .row.\32 5\25 { - margin: 0 0 -1px -0.375em; - } - - .row.uniform.\32 5\25 > * { - padding: 0.375em 0 0 0.375em; - } - - .row.uniform.\32 5\25 { - margin: -0.375em 0 -1px -0.375em; - } - - .\31 2u\28large\29, .\31 2u\24\28large\29 { - width: 100%; - clear: none; - margin-left: 0; - } - - .\31 1u\28large\29, .\31 1u\24\28large\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 0u\28large\29, .\31 0u\24\28large\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } - - .\39 u\28large\29, .\39 u\24\28large\29 { - width: 75%; - clear: none; - margin-left: 0; - } - - .\38 u\28large\29, .\38 u\24\28large\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } - - .\37 u\28large\29, .\37 u\24\28large\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } - - .\36 u\28large\29, .\36 u\24\28large\29 { - width: 50%; - clear: none; - margin-left: 0; - } - - .\35 u\28large\29, .\35 u\24\28large\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; - } - - .\34 u\28large\29, .\34 u\24\28large\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; - } - - .\33 u\28large\29, .\33 u\24\28large\29 { - width: 25%; - clear: none; - margin-left: 0; - } - - .\32 u\28large\29, .\32 u\24\28large\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 u\28large\29, .\31 u\24\28large\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } - - .\31 2u\24\28large\29 + *, - .\31 1u\24\28large\29 + *, - .\31 0u\24\28large\29 + *, - .\39 u\24\28large\29 + *, - .\38 u\24\28large\29 + *, - .\37 u\24\28large\29 + *, - .\36 u\24\28large\29 + *, - .\35 u\24\28large\29 + *, - .\34 u\24\28large\29 + *, - .\33 u\24\28large\29 + *, - .\32 u\24\28large\29 + *, - .\31 u\24\28large\29 + * { - clear: left; - } - - .\-11u\28large\29 { - margin-left: 91.66667%; - } - - .\-10u\28large\29 { - margin-left: 83.33333%; - } - - .\-9u\28large\29 { - margin-left: 75%; - } - - .\-8u\28large\29 { - margin-left: 66.66667%; - } - - .\-7u\28large\29 { - margin-left: 58.33333%; - } - - .\-6u\28large\29 { - margin-left: 50%; - } - - .\-5u\28large\29 { - margin-left: 41.66667%; - } - - .\-4u\28large\29 { - margin-left: 33.33333%; - } - - .\-3u\28large\29 { - margin-left: 25%; - } - - .\-2u\28large\29 { - margin-left: 16.66667%; - } - - .\-1u\28large\29 { - margin-left: 8.33333%; - } - + body { + 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: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + -ms-overflow-style: scrollbar; + width: 100%; + height: 100%; + min-height: 30rem; + overflow: hidden; } - @media screen and (max-width: 1024px) { - - .row > * { - padding: 0 0 0 1.5em; - } - - .row { - margin: 0 0 -1px -1.5em; - } - - .row.uniform > * { - padding: 1.5em 0 0 1.5em; - } - - .row.uniform { - margin: -1.5em 0 -1px -1.5em; - } - - .row.\32 00\25 > * { - padding: 0 0 0 3em; - } - - .row.\32 00\25 { - margin: 0 0 -1px -3em; - } - - .row.uniform.\32 00\25 > * { - padding: 3em 0 0 3em; - } - - .row.uniform.\32 00\25 { - margin: -3em 0 -1px -3em; - } - - .row.\31 50\25 > * { - padding: 0 0 0 2.25em; - } - - .row.\31 50\25 { - margin: 0 0 -1px -2.25em; - } - - .row.uniform.\31 50\25 > * { - padding: 2.25em 0 0 2.25em; - } - - .row.uniform.\31 50\25 { - margin: -2.25em 0 -1px -2.25em; - } - - .row.\35 0\25 > * { - padding: 0 0 0 0.75em; - } - - .row.\35 0\25 { - margin: 0 0 -1px -0.75em; - } - - .row.uniform.\35 0\25 > * { - padding: 0.75em 0 0 0.75em; - } - - .row.uniform.\35 0\25 { - margin: -0.75em 0 -1px -0.75em; - } - - .row.\32 5\25 > * { - padding: 0 0 0 0.375em; - } - - .row.\32 5\25 { - margin: 0 0 -1px -0.375em; - } - - .row.uniform.\32 5\25 > * { - padding: 0.375em 0 0 0.375em; - } - - .row.uniform.\32 5\25 { - margin: -0.375em 0 -1px -0.375em; - } - - .\31 2u\28medium\29, .\31 2u\24\28medium\29 { + body:before { + -moz-animation: load-spinner 1s infinite linear; + -webkit-animation: load-spinner 1s infinite linear; + -ms-animation: load-spinner 1s infinite linear; + animation: load-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: 0s; + -webkit-transition-delay: 0s; + -ms-transition-delay: 0s; + transition-delay: 0s; + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + 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: %232e2b37%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; + } + + body:after { + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; width: 100%; - clear: none; - margin-left: 0; - } - - .\31 1u\28medium\29, .\31 1u\24\28medium\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 0u\28medium\29, .\31 0u\24\28medium\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } - - .\39 u\28medium\29, .\39 u\24\28medium\29 { - width: 75%; - clear: none; - margin-left: 0; - } - - .\38 u\28medium\29, .\38 u\24\28medium\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } - - .\37 u\28medium\29, .\37 u\24\28medium\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } - - .\36 u\28medium\29, .\36 u\24\28medium\29 { - width: 50%; - clear: none; - margin-left: 0; - } - - .\35 u\28medium\29, .\35 u\24\28medium\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; - } - - .\34 u\28medium\29, .\34 u\24\28medium\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; - } - - .\33 u\28medium\29, .\33 u\24\28medium\29 { - width: 25%; - clear: none; - margin-left: 0; - } - - .\32 u\28medium\29, .\32 u\24\28medium\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 u\28medium\29, .\31 u\24\28medium\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } - - .\31 2u\24\28medium\29 + *, - .\31 1u\24\28medium\29 + *, - .\31 0u\24\28medium\29 + *, - .\39 u\24\28medium\29 + *, - .\38 u\24\28medium\29 + *, - .\37 u\24\28medium\29 + *, - .\36 u\24\28medium\29 + *, - .\35 u\24\28medium\29 + *, - .\34 u\24\28medium\29 + *, - .\33 u\24\28medium\29 + *, - .\32 u\24\28medium\29 + *, - .\31 u\24\28medium\29 + * { - clear: left; - } - - .\-11u\28medium\29 { - margin-left: 91.66667%; - } - - .\-10u\28medium\29 { - margin-left: 83.33333%; - } - - .\-9u\28medium\29 { - margin-left: 75%; - } - - .\-8u\28medium\29 { - margin-left: 66.66667%; - } - - .\-7u\28medium\29 { - margin-left: 58.33333%; - } - - .\-6u\28medium\29 { - margin-left: 50%; - } - - .\-5u\28medium\29 { - margin-left: 41.66667%; - } - - .\-4u\28medium\29 { - margin-left: 33.33333%; - } - - .\-3u\28medium\29 { - margin-left: 25%; - } - - .\-2u\28medium\29 { - margin-left: 16.66667%; - } - - .\-1u\28medium\29 { - margin-left: 8.33333%; + height: 100%; + z-index: -1; + background-attachment: fixed; + background-color: #e1e6e1; + background-image: url("../../images/overlay.png"), url("../../images/bg.jpg"); + background-repeat: repeat, repeat-x; + background-size: 128px 128px, cover; + } + + body.is-loading *, body.is-loading *:before, body.is-loading *:after { + -moz-animation: none !important; + -webkit-animation: none !important; + -ms-animation: none !important; + animation: none !important; + -moz-transition: none !important; + -webkit-transition: none !important; + -ms-transition: none !important; + transition: none !important; + } + + body.is-loading:before { + -moz-transition: opacity 1s ease; + -webkit-transition: opacity 1s ease; + -ms-transition: opacity 1s ease; + transition: opacity 1s ease; + -moz-transition-delay: 0.75s; + -webkit-transition-delay: 0.75s; + -ms-transition-delay: 0.75s; + transition-delay: 0.75s; + opacity: 0.25; } - } - @media screen and (max-width: 736px) { - .row > * { - padding: 0 0 0 1.25em; - } - - .row { - margin: 0 0 -1px -1.25em; - } - - .row.uniform > * { - padding: 1.25em 0 0 1.25em; - } - - .row.uniform { - margin: -1.25em 0 -1px -1.25em; - } - - .row.\32 00\25 > * { - padding: 0 0 0 2.5em; - } - - .row.\32 00\25 { - margin: 0 0 -1px -2.5em; - } - - .row.uniform.\32 00\25 > * { - padding: 2.5em 0 0 2.5em; - } - - .row.uniform.\32 00\25 { - margin: -2.5em 0 -1px -2.5em; - } - - .row.\31 50\25 > * { - padding: 0 0 0 1.875em; - } - - .row.\31 50\25 { - margin: 0 0 -1px -1.875em; - } - - .row.uniform.\31 50\25 > * { - padding: 1.875em 0 0 1.875em; - } - - .row.uniform.\31 50\25 { - margin: -1.875em 0 -1px -1.875em; - } - - .row.\35 0\25 > * { - padding: 0 0 0 0.625em; - } - - .row.\35 0\25 { - margin: 0 0 -1px -0.625em; - } - - .row.uniform.\35 0\25 > * { - padding: 0.625em 0 0 0.625em; - } - - .row.uniform.\35 0\25 { - margin: -0.625em 0 -1px -0.625em; + html { + height: auto; } - .row.\32 5\25 > * { - padding: 0 0 0 0.3125em; - } - - .row.\32 5\25 { - margin: 0 0 -1px -0.3125em; - } - - .row.uniform.\32 5\25 > * { - padding: 0.3125em 0 0 0.3125em; - } - - .row.uniform.\32 5\25 { - margin: -0.3125em 0 -1px -0.3125em; - } - - .\31 2u\28small\29, .\31 2u\24\28small\29 { - width: 100%; - clear: none; - margin-left: 0; - } - - .\31 1u\28small\29, .\31 1u\24\28small\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 0u\28small\29, .\31 0u\24\28small\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } - - .\39 u\28small\29, .\39 u\24\28small\29 { - width: 75%; - clear: none; - margin-left: 0; - } - - .\38 u\28small\29, .\38 u\24\28small\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } - - .\37 u\28small\29, .\37 u\24\28small\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } - - .\36 u\28small\29, .\36 u\24\28small\29 { - width: 50%; - clear: none; - margin-left: 0; - } - - .\35 u\28small\29, .\35 u\24\28small\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; - } - - .\34 u\28small\29, .\34 u\24\28small\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; - } - - .\33 u\28small\29, .\33 u\24\28small\29 { - width: 25%; - clear: none; - margin-left: 0; - } - - .\32 u\28small\29, .\32 u\24\28small\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 u\28small\29, .\31 u\24\28small\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } - - .\31 2u\24\28small\29 + *, - .\31 1u\24\28small\29 + *, - .\31 0u\24\28small\29 + *, - .\39 u\24\28small\29 + *, - .\38 u\24\28small\29 + *, - .\37 u\24\28small\29 + *, - .\36 u\24\28small\29 + *, - .\35 u\24\28small\29 + *, - .\34 u\24\28small\29 + *, - .\33 u\24\28small\29 + *, - .\32 u\24\28small\29 + *, - .\31 u\24\28small\29 + * { - clear: left; - } - - .\-11u\28small\29 { - margin-left: 91.66667%; - } - - .\-10u\28small\29 { - margin-left: 83.33333%; - } - - .\-9u\28small\29 { - margin-left: 75%; - } - - .\-8u\28small\29 { - margin-left: 66.66667%; - } - - .\-7u\28small\29 { - margin-left: 58.33333%; - } - - .\-6u\28small\29 { - margin-left: 50%; - } - - .\-5u\28small\29 { - margin-left: 41.66667%; - } - - .\-4u\28small\29 { - margin-left: 33.33333%; - } - - .\-3u\28small\29 { - margin-left: 25%; - } - - .\-2u\28small\29 { - margin-left: 16.66667%; - } - - .\-1u\28small\29 { - margin-left: 8.33333%; + body { + height: auto; + overflow-x: hidden; + overflow-y: auto; } } @media screen and (max-width: 480px) { - .row > * { - padding: 0 0 0 1.25em; - } - - .row { - margin: 0 0 -1px -1.25em; - } - - .row.uniform > * { - padding: 1.25em 0 0 1.25em; - } - - .row.uniform { - margin: -1.25em 0 -1px -1.25em; - } - - .row.\32 00\25 > * { - padding: 0 0 0 2.5em; - } - - .row.\32 00\25 { - margin: 0 0 -1px -2.5em; - } - - .row.uniform.\32 00\25 > * { - padding: 2.5em 0 0 2.5em; - } - - .row.uniform.\32 00\25 { - margin: -2.5em 0 -1px -2.5em; - } - - .row.\31 50\25 > * { - padding: 0 0 0 1.875em; - } - - .row.\31 50\25 { - margin: 0 0 -1px -1.875em; - } - - .row.uniform.\31 50\25 > * { - padding: 1.875em 0 0 1.875em; - } - - .row.uniform.\31 50\25 { - margin: -1.875em 0 -1px -1.875em; - } - - .row.\35 0\25 > * { - padding: 0 0 0 0.625em; - } - - .row.\35 0\25 { - margin: 0 0 -1px -0.625em; - } - - .row.uniform.\35 0\25 > * { - padding: 0.625em 0 0 0.625em; + html, body { + min-width: 320px; } - .row.uniform.\35 0\25 { - margin: -0.625em 0 -1px -0.625em; - } - - .row.\32 5\25 > * { - padding: 0 0 0 0.3125em; - } - - .row.\32 5\25 { - margin: 0 0 -1px -0.3125em; - } - - .row.uniform.\32 5\25 > * { - padding: 0.3125em 0 0 0.3125em; - } - - .row.uniform.\32 5\25 { - margin: -0.3125em 0 -1px -0.3125em; - } - - .\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 { - width: 100%; - clear: none; - margin-left: 0; - } - - .\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 { - width: 91.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 { - width: 83.3333333333%; - clear: none; - margin-left: 0; - } - - .\39 u\28xsmall\29, .\39 u\24\28xsmall\29 { - width: 75%; - clear: none; - margin-left: 0; - } - - .\38 u\28xsmall\29, .\38 u\24\28xsmall\29 { - width: 66.6666666667%; - clear: none; - margin-left: 0; - } - - .\37 u\28xsmall\29, .\37 u\24\28xsmall\29 { - width: 58.3333333333%; - clear: none; - margin-left: 0; - } - - .\36 u\28xsmall\29, .\36 u\24\28xsmall\29 { - width: 50%; - clear: none; - margin-left: 0; - } - - .\35 u\28xsmall\29, .\35 u\24\28xsmall\29 { - width: 41.6666666667%; - clear: none; - margin-left: 0; - } - - .\34 u\28xsmall\29, .\34 u\24\28xsmall\29 { - width: 33.3333333333%; - clear: none; - margin-left: 0; - } - - .\33 u\28xsmall\29, .\33 u\24\28xsmall\29 { - width: 25%; - clear: none; - margin-left: 0; - } - - .\32 u\28xsmall\29, .\32 u\24\28xsmall\29 { - width: 16.6666666667%; - clear: none; - margin-left: 0; - } - - .\31 u\28xsmall\29, .\31 u\24\28xsmall\29 { - width: 8.3333333333%; - clear: none; - margin-left: 0; - } - - .\31 2u\24\28xsmall\29 + *, - .\31 1u\24\28xsmall\29 + *, - .\31 0u\24\28xsmall\29 + *, - .\39 u\24\28xsmall\29 + *, - .\38 u\24\28xsmall\29 + *, - .\37 u\24\28xsmall\29 + *, - .\36 u\24\28xsmall\29 + *, - .\35 u\24\28xsmall\29 + *, - .\34 u\24\28xsmall\29 + *, - .\33 u\24\28xsmall\29 + *, - .\32 u\24\28xsmall\29 + *, - .\31 u\24\28xsmall\29 + * { - clear: left; - } - - .\-11u\28xsmall\29 { - margin-left: 91.66667%; - } - - .\-10u\28xsmall\29 { - margin-left: 83.33333%; - } + } - .\-9u\28xsmall\29 { - margin-left: 75%; - } +/* Typography */ - .\-8u\28xsmall\29 { - margin-left: 66.66667%; - } - - .\-7u\28xsmall\29 { - margin-left: 58.33333%; - } + html { + font-size: 18pt; + font-size: 1vmax; + } - .\-6u\28xsmall\29 { - margin-left: 50%; - } + @media screen and (max-width: 1680px) { - .\-5u\28xsmall\29 { - margin-left: 41.66667%; - } + html { + font-size: 12pt; + font-size: 1.1vmax; + } - .\-4u\28xsmall\29 { - margin-left: 33.33333%; } - .\-3u\28xsmall\29 { - margin-left: 25%; - } + @media screen and (max-width: 1280px) { - .\-2u\28xsmall\29 { - margin-left: 16.66667%; - } + html { + font-size: 11pt; + font-size: 1.5vmax; + } - .\-1u\28xsmall\29 { - margin-left: 8.33333%; } - } - -/* Basic */ - - body { - background: #fff; - } - body, input, select, textarea { - color: #888; - font-family: "Lato", sans-serif; - font-size: 16pt; - font-weight: 400; - line-height: 1.75em; + color: rgba(255, 255, 255, 0.75); + 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, border-color 0.2s ease-in-out; - -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; - border-bottom: solid 1px #e4e4e4; + -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; + transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; color: inherit; + border-bottom: dotted 1px; text-decoration: none; } a:hover { border-bottom-color: transparent; - color: #5AC8FA !important; + color: #ffe4b4; } strong, b { - color: #777; - font-weight: 700; + color: rgba(255, 255, 255, 0.875); + font-weight: 400; } em, i { @@ -1587,100 +306,140 @@ } p { - margin: 0 0 2.25em 0; + margin: 0 0 1.5rem 0; } + body.is-ie p { + width: 100%; + } + h1, h2, h3, h4, h5, h6 { - color: #777; + color: rgba(255, 255, 255, 0.875); + font-family: Arial, Helvetica, sans-serif; font-weight: 700; - line-height: 1em; - margin: 0 0 0.5625em 0; + line-height: 1.3; + margin: 0 0 0.75rem 0; + letter-spacing: -0.05em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - border: 0; color: inherit; text-decoration: none; } + h1.major, h2.major, h3.major { + position: relative; + } + + h1.major:after, h2.major:after, h3.major:after { + content: ''; + position: absolute; + left: 0; + width: 3.5rem; + height: 0.1rem; + background-color: rgba(255, 255, 255, 0.25); + } + + h1 { + font-size: 3rem; + line-height: 1.2; + } + + h1.major { + margin: 0 0 2.625rem 0; + } + + h1.major:after { + bottom: -1.325rem; + } + h2 { - font-size: 2em; - line-height: 1.5em; + font-size: 1.75rem; + line-height: 1.2; } + h2.major { + margin: 0 0 1.9875rem 0; + } + + h2.major:after { + bottom: -1.2rem; + } + h3 { - font-size: 1.75em; - line-height: 1.5em; + font-size: 1.325rem; } + h3.major { + margin: 0 0 1.875rem 0; + } + + h3.major:after { + bottom: -0.75rem; + } + h4 { - font-size: 1.25em; - line-height: 1.5em; + font-size: 1rem; } h5 { - font-size: 0.9em; - line-height: 1.5em; + font-size: 0.9rem; } h6 { - font-size: 0.7em; - line-height: 1.5em; + font-size: 0.7rem; } sub { - font-size: 0.8em; + font-size: 0.8rem; position: relative; - top: 0.5em; + top: 0.5rem; } sup { - font-size: 0.8em; + font-size: 0.8rem; position: relative; - top: -0.5em; + top: -0.5rem; } - hr { - border: 0; - border-bottom: solid 2px #f4f4f4; - margin: 2.25em 0; - } - - hr.major { - margin: 3.375em 0; - } - blockquote { - border-left: solid 8px #e4e4e4; + border-left: solid 0.25rem rgba(255, 255, 255, 0.25); font-style: italic; - margin: 0 0 2.25em 0; - padding: 0.5em 0 0.5em 2em; + margin: 0 0 1.5rem 0; + padding: 0.375rem 0 0.375rem 1.5rem; } code { - background: #555; - border-radius: 5px; - color: #fff; - font-family: "Source Code Pro", monospace; - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; + background: rgba(255, 255, 255, 0.075); + border-radius: 0.25rem; + font-family: "Courier New", monospace; + font-size: 0.8rem; + margin: 0 0.25rem; + padding: 0.25rem 0.65rem; } pre { - font-family: "Source Code Pro", monospace; - font-size: 0.9em; - margin: 0 0 2.25em 0; + -webkit-overflow-scrolling: touch; + font-family: "Courier New", monospace; + font-size: 0.8rem; + margin: 0 0 1.5rem 0; + white-space: pre-wrap; } pre code { - -webkit-overflow-scrolling: touch; display: block; - line-height: 1.5em; + line-height: 1.625; + padding: 1rem 1.5rem; overflow-x: auto; - padding: 1em 1.5em; + margin: 0; } + hr { + border: 0; + border-bottom: solid 2px rgba(255, 255, 255, 0.25); + margin: 1.875rem 0; + } + .align-left { text-align: left; } @@ -1693,85 +452,154 @@ text-align: right; } -/* Section/Article */ + @media screen and (max-width: 736px) { - section.special, article.special { - text-align: center; - } + html { + font-size: 12pt; + } - header p { - color: #aaa; - position: relative; - margin: 0 0 1.6875em 0; - } + h1 { + font-size: 2.25rem; + line-height: 1.2; + } - header h2 + p { - font-size: 1.25em; - margin-top: -0.5em; - line-height: 1.5em; - } + h1.major { + margin: 0 0 2.625rem 0; + } - header h3 + p { - font-size: 1.1em; - margin-top: -0.35em; - line-height: 1.5em; - } + h1.major:after { + bottom: -1.325rem; + } - header h4 + p, - header h5 + p, - header h6 + p { - font-size: 0.9em; - margin-top: -0.25em; - line-height: 1.5em; - } + h2 { + font-size: 1.5rem; + line-height: 1.2; + } + + h2.major { + margin: 0 0 1.9875rem 0; + } + + h2.major:after { + bottom: -1.2rem; + } + + h3 { + font-size: 1rem; + } + + h3.major { + margin: 0 0 1.875rem 0; + } + + h3.major:after { + bottom: -0.75rem; + } + + h4 { + font-size: 1rem; + } + + h5 { + font-size: 0.9rem; + } + + h6 { + font-size: 0.7rem; + } + + h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { + display: none; + } - header.major h2 { - color: #5AC8FA; - font-size: 3.5em; } - header.major h2 + p { - color: #777; - font-size: 1.75em; - font-weight: 700; - margin-top: -0.75em; + @media screen and (max-width: 360px) { + + html { + font-size: 11pt; } + } + /* Form */ form { - margin: 0 0 2.25em 0; - } + 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 1.5rem -1.5rem; + } + + form > .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 > .field.half { + width: calc(50% - 0.75rem); + } + + form > .field.third { + width: calc(100%/3 - 0.5rem); + } + + form > .field.quarter { + width: calc(25% - 0.375rem); + } + + form > .actions { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + margin: 1.5rem 0 0 1.5rem; + } label { - color: #777; + color: rgba(255, 255, 255, 0.875); display: block; - font-size: 0.9em; + font-family: Arial, Helvetica, sans-serif; + font-size: 0.8rem; font-weight: 700; - margin: 0 0 1.125em 0; - } - - input::-moz-focus-inner { - border: 0; - padding: 0; + margin: 0 0 0.4875rem 0; } input[type="text"], input[type="password"], input[type="email"], + input[type="tel"], select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; - border-radius: 5px; - border: none; - border: solid 2px #e4e4e4; + background: transparent; + border: solid 2px rgba(255, 255, 255, 0.25); + border-radius: 0.25rem; color: inherit; display: block; outline: 0; - padding: 0 1em; + padding: 0 0.75rem; text-decoration: none; width: 100%; } @@ -1779,6 +607,7 @@ input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, + input[type="tel"]:invalid, select:invalid, textarea:invalid { box-shadow: none; @@ -1787,11 +616,17 @@ input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, + input[type="tel"]:focus, select:focus, textarea:focus { - border-color: #5AC8FA; + border-color: #ffe4b4; } + option { + background-color: rgba(255, 255, 255, 0.875); + color: #2e2b37; + } + .select-wrapper { text-decoration: none; display: block; @@ -1808,19 +643,23 @@ } .select-wrapper:before { - color: #e4e4e4; - content: '\f078'; display: block; - height: 2.75em; - line-height: 2.75em; - pointer-events: none; + content: '\f107'; position: absolute; + top: 0; right: 0; + width: 2.5rem; + height: 2.5rem; + line-height: 2.5rem; + color: rgba(255, 255, 255, 0.75); + pointer-events: none; text-align: center; - top: 0; - width: 2.75em; } + body.is-ie .select-wrapper:before { + line-height: 2.5; + } + .select-wrapper select::-ms-expand { display: none; } @@ -1829,11 +668,11 @@ input[type="password"], input[type="email"], select { - height: 2.75em; + height: 2.5rem; } textarea { - padding: 0.75em 1em; + padding: 0.75rem 1rem; } input[type="checkbox"], @@ -1844,23 +683,24 @@ appearance: none; display: block; float: left; - margin-right: -2em; + margin-right: -2rem; opacity: 0; - width: 1em; + width: 1rem; z-index: -1; } input[type="checkbox"] + label, input[type="radio"] + label { text-decoration: none; - color: #888; + position: relative; + color: rgba(255, 255, 255, 0.75); cursor: pointer; display: inline-block; - font-size: 1em; - font-weight: 400; - padding-left: 2.4em; - padding-right: 0.75em; - position: relative; + font-size: 1rem; + font-weight: 300; + margin-bottom: 0; + padding-left: 2.5rem; + padding-right: 1rem; } input[type="checkbox"] + label:before, @@ -1875,35 +715,66 @@ input[type="checkbox"] + label:before, input[type="radio"] + label:before { - background: #fafafa; - border-radius: 5px; - border: solid 2px #e4e4e4; content: ''; display: inline-block; - height: 1.65em; - left: 0; - line-height: 1.58125em; position: absolute; - text-align: center; top: 0; - width: 1.65em; + left: 0; + width: 1.5rem; + height: 1.5rem; + line-height: 1.4375rem; + background: rgba(255, 255, 255, 0.075); + border: solid 1px rgba(255, 255, 255, 0.25); + border-radius: 0.25rem; + color: #2e2b37; + text-align: center; } + body.is-ie input[type="checkbox"] + label:before, body.is-ie + input[type="radio"] + label:before { + line-height: 1.5; + } + input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before { - background: #989898; - border-color: #989898; - color: #ffffff; content: '\f00c'; + background: rgba(255, 255, 255, 0.875); + border-color: rgba(255, 255, 255, 0.875); } input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before { - border-color: #5AC8FA; + border-color: #ffe4b4; + box-shadow: 0 0 0 1px #ffe4b4; + } + + input[type="checkbox"]:focus:checked + label:before, + input[type="radio"]:focus:checked + label:before { + background: #ffe4b4; + } + + input[type="checkbox"].color1 + label:before, + input[type="radio"].color1 + label:before { + color: #726193; + } + + input[type="checkbox"].color2 + label:before, + input[type="radio"].color2 + label:before { + color: #e37b7c; + } + + input[type="checkbox"].color3 + label:before, + input[type="radio"].color3 + label:before { + color: #ffe4b4; + } + + input[type="checkbox"].color4 + label:before, + input[type="radio"].color4 + label:before { + color: #353865; } input[type="checkbox"] + label:before { - border-radius: 5px; + border-radius: 0.25rem; } input[type="radio"] + label:before { @@ -1911,62 +782,54 @@ } ::-webkit-input-placeholder { - color: #aaa !important; - font-style: italic; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } :-moz-placeholder { - color: #aaa !important; - font-style: italic; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } ::-moz-placeholder { - color: #aaa !important; - font-style: italic; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } :-ms-input-placeholder { - color: #aaa !important; - font-style: italic; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } .formerize-placeholder { - color: #aaa !important; - font-style: italic; + color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } -/* Box */ - - .box { - border-radius: 5px; - border: solid 2px #e4e4e4; - margin-bottom: 2.25em; - padding: 1.5em; - } + @media screen and (max-width: 736px) { - .box > :last-child, - .box > :last-child > :last-child, - .box > :last-child > :last-child > :last-child { - margin-bottom: 0; + form { + margin: -1.5rem 0 1.5rem 0; + width: 100%; } - .box.alt { - border: 0; - border-radius: 0; - padding: 0; - } + form > .field { + padding: 1.5rem 0 0 0; + width: 100% !important; + } + + form > .actions { + margin: 1.5rem 0 0 0; + } + + } /* Icon */ .icon { text-decoration: none; - border-bottom: none; position: relative; + border-bottom: none; } .icon:before { @@ -1985,48 +848,178 @@ /* Image */ .image { - border-radius: 5px; - border: 0; display: inline-block; position: relative; + border: 0; } + .image.filtered:after { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1; + z-index: 1; + } + + .image.filtered.tinted:after { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)), linear-gradient(0deg, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); + background-size: 128px 128px, auto, auto; + } + + .image[data-position] img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + .image[data-position="top left"] img { + -moz-object-position: top left; + -webkit-object-position: top left; + -ms-object-position: top left; + object-position: top left; + } + + .image[data-position="top"] img { + -moz-object-position: top; + -webkit-object-position: top; + -ms-object-position: top; + object-position: top; + } + + .image[data-position="top right"] img { + -moz-object-position: top right; + -webkit-object-position: top right; + -ms-object-position: top right; + object-position: top right; + } + + .image[data-position="right"] img { + -moz-object-position: right; + -webkit-object-position: right; + -ms-object-position: right; + object-position: right; + } + + .image[data-position="bottom right"] img { + -moz-object-position: bottom right; + -webkit-object-position: bottom right; + -ms-object-position: bottom right; + object-position: bottom right; + } + + .image[data-position="bottom"] img { + -moz-object-position: bottom; + -webkit-object-position: bottom; + -ms-object-position: bottom; + object-position: bottom; + } + + .image[data-position="bottom left"] img { + -moz-object-position: bottom left; + -webkit-object-position: bottom left; + -ms-object-position: bottom left; + object-position: bottom left; + } + + .image[data-position="left"] img { + -moz-object-position: left; + -webkit-object-position: left; + -ms-object-position: left; + object-position: left; + } + + .image[data-position="center"] img { + -moz-object-position: center; + -webkit-object-position: center; + -ms-object-position: center; + object-position: center; + } + + .image[data-position="25% 25%"] img { + -moz-object-position: 25% 25%; + -webkit-object-position: 25% 25%; + -ms-object-position: 25% 25%; + object-position: 25% 25%; + } + + .image[data-position="75% 25%"] img { + -moz-object-position: 75% 25%; + -webkit-object-position: 75% 25%; + -ms-object-position: 75% 25%; + object-position: 75% 25%; + } + + .image[data-position="75% 75%"] img { + -moz-object-position: 75% 75%; + -webkit-object-position: 75% 75%; + -ms-object-position: 75% 75%; + object-position: 75% 75%; + } + + .image[data-position="25% 75%"] img { + -moz-object-position: 25% 75%; + -webkit-object-position: 25% 75%; + -ms-object-position: 25% 75%; + object-position: 25% 75%; + } + .image img { - border-radius: 5px; display: block; } + .image.left, .image.right { + max-width: 40%; + } + + .image.left img, .image.right img { + width: 100%; + } + .image.left { float: left; - margin: 0 2.5em 2em 0; - top: 0.25em; + padding: 0 1.5rem 1rem 0; + top: 0.25rem; } .image.right { float: right; - margin: 0 0 2em 2.5em; - top: 0.25em; + padding: 0 0 1rem 1.5rem; + top: 0.25rem; } .image.fit { display: block; - margin: 0 0 2.25em 0; + margin: 0 0 1.5rem 0; width: 100%; } .image.fit img { - display: block; width: 100%; } - .image.avatar { - border-radius: 100%; - overflow: hidden; + .image.main { + display: block; + margin: 0 0 2.25rem 0; + width: 100%; } - .image.avatar img { - border-radius: 100%; - display: block; + .image.main img { width: 100%; } @@ -2034,22 +1027,22 @@ ol { list-style: decimal; - margin: 0 0 2.25em 0; - padding-left: 1.25em; + margin: 0 0 1.5rem 0; + padding-left: 1.25rem; } ol li { - padding-left: 0.25em; + padding-left: 0.25rem; } ul { list-style: disc; - margin: 0 0 2.25em 0; - padding-left: 1em; + margin: 0 0 1.5rem 0; + padding-left: 1rem; } ul li { - padding-left: 0.5em; + padding-left: 0.5rem; } ul.alt { @@ -2058,8 +1051,8 @@ } ul.alt li { - border-top: solid 2px #f4f4f4; - padding: 0.5em 0; + border-top: solid 1px rgba(255, 255, 255, 0.25); + padding: 0.5rem 0; } ul.alt li:first-child { @@ -2067,44 +1060,6 @@ padding-top: 0; } - ul.feature-icons { - list-style: none; - padding-left: 0; - } - - ul.feature-icons li { - text-decoration: none; - display: inline-block; - margin: 0 0 1.6875em 0; - padding: 0.35em 0 0 3.5em; - position: relative; - vertical-align: top; - width: 48%; - } - - ul.feature-icons li:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } - - ul.feature-icons li:before { - background: #5AC8FA; - border-radius: 100%; - color: #ffffff; - display: block; - height: 2.5em; - left: 0; - line-height: 2.5em; - position: absolute; - text-align: center; - top: 0; - width: 2.5em; - } - ul.icons { cursor: default; list-style: none; @@ -2113,11 +1068,11 @@ ul.icons li { display: inline-block; - padding: 0 1em 0 0; + padding: 0 1rem 0 0; } ul.icons li:last-child { - padding-right: 0 !important; + padding-right: 0; } ul.icons li .icon:before { @@ -2132,7 +1087,7 @@ ul.actions li { display: inline-block; - padding: 0 1.125em 0 0; + padding: 0 0.75rem 0 0; vertical-align: middle; } @@ -2141,12 +1096,12 @@ } ul.actions.small li { - padding: 0 0.5625em 0 0; + padding: 0 0.375rem 0 0; } ul.actions.vertical li { display: block; - padding: 1.125em 0 0 0; + padding: 0.75rem 0 0 0; } ul.actions.vertical li:first-child { @@ -2158,7 +1113,7 @@ } ul.actions.vertical.small li { - padding: 0.5625em 0 0 0; + padding: 0.375rem 0 0 0; } ul.actions.vertical.small li:first-child { @@ -2167,15 +1122,15 @@ ul.actions.fit { display: table; - margin-left: -1.125em; + margin-left: -0.75rem; padding: 0; table-layout: fixed; - width: calc(100% + 1.125em); + width: calc(100% + 0.75rem); } ul.actions.fit li { display: table-cell; - padding: 0 0 0 1.125em; + padding: 0 0 0 0.75rem; } ul.actions.fit li > * { @@ -2183,16 +1138,244 @@ } ul.actions.fit.small { - margin-left: -0.5625em; - width: calc(100% + 0.5625em); + margin-left: -0.375rem; + width: calc(100% + 0.375rem); } ul.actions.fit.small li { - padding: 0 0 0 0.5625em; + padding: 0 0 0 0.375rem; + } + + ul.contact-icons { + list-style: none; + padding-left: 0; + } + + ul.contact-icons > li { + margin: 1.25rem 0 0 0; + padding-left: 0; + } + + ul.contact-icons > li:before { + display: inline-block; + width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; + border-radius: 2.25rem; + background-color: white; + color: #2e2b37; + cursor: default; + font-size: 1.125rem; + margin-right: 1rem; + text-align: center; + vertical-align: middle; + } + + body.is-ie ul.contact-icons > li:before { + line-height: 2.125; + } + + ul.contact-icons > li a { + border-bottom: 0; + } + + ul.contact-icons.color1 > li:before { + color: #726193; + } + + ul.contact-icons.color2 > li:before { + color: #e37b7c; + } + + ul.contact-icons.color3 > li:before { + color: #ffe4b4; + } + + ul.contact-icons.color4 > li:before { + color: #353865; + } + + ul.grid-icons { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + list-style: none; + margin: 0 0 1.5rem 0; + padding-left: 0; + } + + ul.grid-icons .icon { + display: block; + position: relative; + width: 100%; + text-align: center; + } + + ul.grid-icons .icon:before { + display: block; + width: 6rem; + height: 6rem; + line-height: 6rem; + border-radius: 6rem; + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); + font-size: 2.5rem; + margin: 0 auto; + text-align: center; + } + + body.is-ie ul.grid-icons .icon:before { + line-height: 2.375; + } + + ul.grid-icons > li { + -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: relative; + margin: 1.5rem 0 0 1.5rem; + padding-left: 0; + } + + ul.grid-icons.connected > li:before { + content: ''; + display: block; + position: absolute; + width: 1.5rem; + height: 2px; + top: 50%; + left: -1.5rem; + background-color: rgba(255, 255, 255, 0.25); + } + + ul.grid-icons.connected > li:after { + content: ''; + display: block; + position: absolute; + width: 2px; + height: 1.5rem; + top: -1.5rem; + left: 50%; + background-color: rgba(255, 255, 255, 0.25); + } + + ul.grid-icons.two { + width: 14rem; + } + + ul.grid-icons.two > li:nth-child(-n + 2) { + margin-top: 0; + } + + ul.grid-icons.two > li:nth-child(-n + 2):after { + display: none; + } + + ul.grid-icons.two > li:nth-child(2n - 1) { + margin-left: 0; + } + + ul.grid-icons.two > li:nth-child(2n - 1):before { + display: none; + } + + ul.grid-icons.three { + width: 21.5rem; + } + + ul.grid-icons.three > li:nth-child(-n + 3) { + margin-top: 0; + } + + ul.grid-icons.three > li:nth-child(-n + 3):after { + display: none; + } + + ul.grid-icons.three > li:nth-child(3n - 2) { + margin-left: 0; + } + + ul.grid-icons.three > li:nth-child(3n - 2):before { + display: none; + } + + ul.grid-icons.four { + width: 29rem; + } + + ul.grid-icons.four > li:nth-child(-n + 4) { + margin-top: 0; + } + + ul.grid-icons.four > li:nth-child(-n + 4):after { + display: none; + } + + ul.grid-icons.four > li:nth-child(4n - 3) { + margin-left: 0; + } + + ul.grid-icons.four > li:nth-child(4n - 3):before { + display: none; } dl { - margin: 0 0 2.25em 0; + margin: 0 0 1.5rem 0; + } + + dl dt { + display: block; + font-weight: 400; + margin: 0 0 0.75rem 0; + } + + dl dd { + margin-left: 1.5rem; + } + + @media screen and (max-width: 736px) { + + ul.grid-icons { + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + width: 100% !important; + margin: -1rem 0 1.5rem -1rem; + } + + ul.grid-icons .icon:before { + width: 4.5rem; + height: 4.5rem; + line-height: 4.5rem; + font-size: 1.75rem; + } + + ul.grid-icons > li { + margin: 1rem 0 0 1rem !important; + } + + ul.grid-icons > li:before { + display: none !important; + } + + ul.grid-icons > li:after { + display: none !important; + } + } /* Table */ @@ -2203,38 +1386,38 @@ } table { - margin: 0 0 2.25em 0; + margin: 0 0 1.5rem 0; width: 100%; } table tbody tr { - border: solid 2px #f4f4f4; + border: solid 1px rgba(255, 255, 255, 0.25); border-left: 0; border-right: 0; } table tbody tr:nth-child(2n + 1) { - background-color: #fafafa; + background-color: rgba(255, 255, 255, 0.075); } table td { - padding: 0.75em 0.75em; + padding: 0.75rem 0.75rem; } table th { - color: #777; - font-size: 0.9em; - font-weight: 700; - padding: 0 0.75em 0.75em 0.75em; + color: rgba(255, 255, 255, 0.875); + font-size: 0.9rem; + font-weight: 400; + padding: 0 0.75rem 0.75rem 0.75rem; text-align: left; } table thead { - border-bottom: solid 4px #e4e4e4; + border-bottom: solid 2px rgba(255, 255, 255, 0.25); } table tfoot { - border-top: solid 4px #e4e4e4; + border-top: solid 2px rgba(255, 255, 255, 0.25); } table.alt { @@ -2242,17 +1425,17 @@ } table.alt tbody tr td { - border: solid 2px #e4e4e4; + border: solid 1px rgba(255, 255, 255, 0.25); border-left-width: 0; border-top-width: 0; } table.alt tbody tr td:first-child { - border-left-width: 2px; + border-left-width: 1px; } table.alt tbody tr:first-child td { - border-top-width: 2px; + border-top-width: 1px; } table.alt thead { @@ -2268,133 +1451,207 @@ input[type="submit"], input[type="reset"], input[type="button"], + button, .button { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; - -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; - background-color: #989898; - border-radius: 5px; + -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; + background-color: transparent; border: 0; - color: #ffffff !important; + border-radius: 0.25rem; + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); + color: rgba(255, 255, 255, 0.875) !important; cursor: pointer; display: inline-block; + font-family: Arial, Helvetica, sans-serif; + font-size: 0.6rem; font-weight: 700; - height: 2.75em; - line-height: 2.75em; - padding: 0 1.5em; + height: 2.75rem; + letter-spacing: 0.15rem; + line-height: 2.75rem; + padding: 0 1.5rem 0 1.65rem; text-align: center; text-decoration: none; + text-transform: uppercase; white-space: nowrap; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, + button:hover, .button:hover { - background-color: #a5a5a5; - color: #ffffff !important; + box-shadow: inset 0 0 0 2px #ffe4b4; + color: #ffe4b4 !important; } input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, + button:active, .button:active { - background-color: #8b8b8b; + background-color: rgba(255, 228, 180, 0.125); } - input[type="submit"].icon, - input[type="reset"].icon, - input[type="button"].icon, - .button.icon { - padding-left: 1.35em; + input[type="submit"].icon:before, + input[type="reset"].icon:before, + input[type="button"].icon:before, + button.icon:before, + .button.icon:before { + display: inline-block; + position: relative; + top: -0.075rem; + vertical-align: middle; + font-size: 0.8rem; + margin: 0 0.375rem 0 -0.325rem; } - input[type="submit"].icon:before, - input[type="reset"].icon:before, - input[type="button"].icon:before, - .button.icon:before { - margin-right: 0.5em; + input[type="submit"].icon.circle, + input[type="reset"].icon.circle, + input[type="button"].icon.circle, + button.icon.circle, + .button.icon.circle { + position: relative; + width: 3.125rem; + height: 3.125rem; + line-height: 3.125rem; + text-indent: 3.125rem; + border-radius: 100%; + overflow: hidden; + padding: 0; + letter-spacing: 0; + } + + input[type="submit"].icon.circle:before, + input[type="reset"].icon.circle:before, + input[type="button"].icon.circle:before, + button.icon.circle:before, + .button.icon.circle:before { + display: block; + position: absolute; + top: 0; + left: 0; + width: inherit; + height: inherit; + font-size: 1.25rem; + line-height: inherit; + margin: 0; + text-indent: 0; + } + + input[type="submit"].icon.circle.fa-angle-left:before, + input[type="reset"].icon.circle.fa-angle-left:before, + input[type="button"].icon.circle.fa-angle-left:before, + button.icon.circle.fa-angle-left:before, + .button.icon.circle.fa-angle-left:before { + position: relative; + left: -0.1rem; + font-size: 1.75rem; + } + + input[type="submit"].icon.circle.fa-angle-right:before, + input[type="reset"].icon.circle.fa-angle-right:before, + input[type="button"].icon.circle.fa-angle-right:before, + button.icon.circle.fa-angle-right:before, + .button.icon.circle.fa-angle-right:before { + position: relative; + left: 0.1rem; + font-size: 1.75rem; } input[type="submit"].fit, input[type="reset"].fit, input[type="button"].fit, + button.fit, .button.fit { display: block; - margin: 0 0 1.125em 0; + margin: 0 0 0.75rem 0; width: 100%; } input[type="submit"].small, input[type="reset"].small, input[type="button"].small, + button.small, .button.small { - font-size: 0.8em; + font-size: 0.4rem; + height: 1.875rem; + line-height: 1.875rem; + padding: 0 1.25rem 0 1.4rem; } - input[type="submit"].big, - input[type="reset"].big, - input[type="button"].big, - .button.big { - font-size: 1.35em; + input[type="submit"].large, + input[type="reset"].large, + input[type="button"].large, + button.large, + .button.large { + font-size: 0.8rem; + height: 3.3125rem; + line-height: 3.3125rem; + padding: 0 2rem 0 2.15rem; } - input[type="submit"].alt, - input[type="reset"].alt, - input[type="button"].alt, - .button.alt { - background-color: transparent; - box-shadow: inset 0 0 0 2px #e4e4e4; - color: #777 !important; + input[type="submit"].special, + input[type="reset"].special, + input[type="button"].special, + button.special, + .button.special { + background-color: white; + box-shadow: none; + color: #2e2b37 !important; } - input[type="submit"].alt:hover, - input[type="reset"].alt:hover, - input[type="button"].alt:hover, - .button.alt:hover { - background-color: #f4f4f4; - color: #777 !important; + input[type="submit"].special.color1, + input[type="reset"].special.color1, + input[type="button"].special.color1, + button.special.color1, + .button.special.color1 { + color: #726193 !important; } - input[type="submit"].alt:active, - input[type="reset"].alt:active, - input[type="button"].alt:active, - .button.alt:active { - background-color: #eaeaea; + input[type="submit"].special.color2, + input[type="reset"].special.color2, + input[type="button"].special.color2, + button.special.color2, + .button.special.color2 { + color: #e37b7c !important; } - input[type="submit"].alt.icon:before, - input[type="reset"].alt.icon:before, - input[type="button"].alt.icon:before, - .button.alt.icon:before { - color: #aaa; + input[type="submit"].special.color3, + input[type="reset"].special.color3, + input[type="button"].special.color3, + button.special.color3, + .button.special.color3 { + color: #ffe4b4 !important; } - input[type="submit"].special, - input[type="reset"].special, - input[type="button"].special, - .button.special { - background-color: #5AC8FA; - color: #ffffff !important; - } + input[type="submit"].special.color4, + input[type="reset"].special.color4, + input[type="button"].special.color4, + button.special.color4, + .button.special.color4 { + color: #353865 !important; + } input[type="submit"].special:hover, input[type="reset"].special:hover, input[type="button"].special:hover, + button.special:hover, .button.special:hover { - background-color: #5ed0b1; + background-color: #ffe4b4; } input[type="submit"].special:active, input[type="reset"].special:active, input[type="button"].special:active, + button.special:active, .button.special:active { - background-color: #39c29d; + background-color: #fdd997; } input[type="submit"].disabled, input[type="submit"]:disabled, @@ -2402,689 +1659,2014 @@ input[type="reset"]:disabled, input[type="button"].disabled, input[type="button"]:disabled, + button.disabled, + button:disabled, .button.disabled, .button:disabled { - background-color: #888 !important; - box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15); - color: #fff !important; + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; cursor: default; - opacity: 0.25; + opacity: 0.5; } -/* Features */ +/* Gallery */ + + @-moz-keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } - .features article { - border-top: solid 3px #f4f4f4; - margin-bottom: 2.25em; - padding-top: 2.25em; + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } } - .features article:first-child { - border-top: 0; - padding-top: 0; + @-webkit-keyframes gallery-modal-spinner { + 0% { + -moz-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } - .features article .image { - display: inline-block; - padding-right: 2.5em; - vertical-align: middle; - width: 48%; + 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); } - .features article .image img { + 100% { + -moz-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + .gallery { + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + height: 100%; + } + + .gallery > * { + width: 20rem; + height: 100%; + } + + .gallery .image { + display: block; + position: relative; + border-bottom: 0; + overflow: hidden; + } + + .gallery .image img { + -moz-transition: -moz-transform 0.2s ease-in-out; + -webkit-transition: -webkit-transform 0.2s ease-in-out; + -ms-transition: -ms-transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out; + } + + .gallery .image:after { + -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; + } + + .gallery .image:hover img { + -moz-transform: scale(1.025); + -webkit-transform: scale(1.025); + -ms-transform: scale(1.025); + transform: scale(1.025); + } + + .gallery .image:hover:after { + opacity: 0; + } + + .gallery .group { + 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; + } + + .gallery .group > * { + height: 50%; + } + + .gallery .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; + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + 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: transparent; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(46, 43, 55, 0.875); + opacity: 0; + outline: 0; + visibility: none; + z-index: 0; + } + + .gallery .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; - width: 100%; + 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: rgba(255, 255, 255, 0.875)%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 .modal:after { + content: ''; + display: block; + position: absolute; + top: 0.5rem; + right: 0.5rem; + width: 4rem; + height: 4rem; + 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: rgba(255, 255, 255, 0.875)%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; + cursor: pointer; + } + + .gallery .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 .modal .inner img { + display: block; + max-width: 90vw; + max-height: 85vh; + box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35); + } + + .gallery .modal.visible { + -moz-pointer-events: auto; + -webkit-pointer-events: auto; + -ms-pointer-events: auto; + pointer-events: auto; + opacity: 1; + visibility: visible; + z-index: 11000; } - .features article .inner { - display: inline-block; - vertical-align: middle; - width: 50%; + .gallery .modal.visible:before { + opacity: 1; + } + + .gallery .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 .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 .modal .inner img { + max-width: 100vw; } - .features article .inner > :last-child { - margin-bottom: 0; + } + + @media screen and (max-width: 736px) { + + .gallery { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + } + + .gallery > * { + height: auto; + width: 100%; + } + + .gallery .image { + width: 100%; + height: 40rem; + } + + .gallery .group .span-0-25 { + width: 8.33333%; + } + + .gallery .group .span-0-5 { + width: 16.66666%; + } + + .gallery .group .span-0-75 { + width: 25%; + } + + .gallery .group .span-1 { + width: 33.33333%; + } + + .gallery .group .span-1-25 { + width: 41.66666%; + } + + .gallery .group .span-1-5 { + width: 50%; + } + + .gallery .group .span-1-75 { + width: 58.33333%; + } + + .gallery .group .span-2 { + width: 66.66666%; + } + + .gallery .group .span-2-25 { + width: 74.99999%; + } + + .gallery .group .span-2-5 { + width: 83.33332%; + } + + .gallery .group .span-2-75 { + width: 91.66666%; + } + + .gallery .group .span-3 { + width: 99.99999%; + } + + .gallery .group .span-3-25 { + width: 108.33332%; + } + + .gallery .group .span-3-5 { + width: 116.66666%; + } + + .gallery .group .span-3-75 { + width: 124.99999%; + } + + .gallery .group .span-4 { + width: 133.33332%; + } + + .gallery .group .span-4-25 { + width: 141.66665%; + } + + .gallery .group .span-4-5 { + width: 149.99998%; + } + + .gallery .group .span-4-75 { + width: 158.33332%; + } + + .gallery .group .span-5 { + width: 166.66665%; + } + + .gallery .group .span-5-25 { + width: 174.99998%; + } + + .gallery .group .span-5-5 { + width: 183.33331%; + } + + .gallery .group .span-5-75 { + width: 191.66665%; + } + + .gallery .group .span-6 { + width: 199.99998%; + } + + .gallery .group .span-6-25 { + width: 208.33331%; } -/* Header */ + .gallery .group .span-6-5 { + width: 216.66665%; + } + + .gallery .group .span-6-75 { + width: 224.99998%; + } + + .gallery .group .span-7 { + width: 233.33331%; + } + + .gallery .group .span-7-25 { + width: 241.66664%; + } + + .gallery .group .span-7-5 { + width: 249.99997%; + } + + .gallery .group .span-7-75 { + width: 258.33331%; + } + + .gallery .group .span-8 { + width: 266.66664%; + } + + .gallery .group .span-8-25 { + width: 274.99997%; + } + + .gallery .group .span-8-5 { + width: 283.33331%; + } + + .gallery .group .span-8-75 { + width: 291.66664%; + } + + .gallery .group .span-9 { + width: 299.99997%; + } + + .gallery .group .span-9-25 { + width: 308.3333%; + } + + .gallery .group .span-9-5 { + width: 316.66664%; + } + + .gallery .group .span-9-75 { + width: 324.99997%; + } + + .gallery .group .span-10 { + width: 333.3333%; + } - #header { + .gallery .group .image { + height: 20rem; + } + + } + + @media screen and (max-width: 480px) { + + .gallery .image { + height: 30rem; + } + + .gallery .group .image { + height: 12.5rem; + } + + } + +/* Panel */ + + .panel { 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: space-between; - -webkit-justify-content: space-between; - -ms-justify-content: space-between; - justify-content: space-between; - background: #5AC8FA; - color: #d1f1e9; + -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; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; height: 100%; + overflow-x: hidden; overflow-y: auto; - position: fixed; - text-align: center; - top: 0; - width: 23em; - right: 0; } - #header h1, #header h2, #header h3, #header h4, #header h5, #header h6 { - color: #ffffff; + .panel > * { + position: relative; + min-width: 10rem; } - #header h1 a, #header h2 a, #header h3 a, #header h4 a, #header h5 a, #header h6 a { - color: #ffffff; + .panel > *.color0 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, #726193 20%, #e37b7c 60%, #ffe4b4); + background-size: 128px 128px, auto; } - #header header p { - color: #b6e9dc; - } + .panel > *.color1 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #726193; + } - #header a { - color: #d1f1e9; - } + .panel > *.color2 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #e37b7c; + } - #header a:hover { - color: #ffffff !important; + .panel > *.color3 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #ffe4b4; } - #header > header { - -moz-flex-shrink: 0; - -webkit-flex-shrink: 0; - -ms-flex-shrink: 0; - flex-shrink: 0; - padding: 3em; - } + .panel > *.color4 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #353865; + } - #header > header .avatar { - display: block; - margin: 0 auto 2.25em auto; - width: 8em; + .panel > *.color1-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #6c5e86; } - #header > header h1 { - font-size: 1.75em; - margin: 0; + .panel > *.color2-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #de7172; + } + + .panel > *.color3-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #fedea6; } - #header > header p { - color: #d1f1e9; - font-style: italic; - margin: 1em 0 0 0; + .panel > *.color4-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #323459; } - #header > footer { + .panel > .intro { + padding: 3.5rem 3.5rem 2rem 3.5rem ; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -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; - bottom: 0; - left: 0; - padding: 2em; - width: 100%; - } - - #header > footer .icons { - margin: 0; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 22rem; + } + + .panel > .intro.joined { + width: 18.5rem; + padding-right: 0; } - #header > footer .icons li a { - color: #b6e9dc; + .panel > .intro.joined + .inner { + padding-left: 2.625rem; } - #header > nav { + .panel > .inner { + padding: 3.5rem 3.5rem 2rem 3.5rem ; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; -moz-flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + width: 100%; } - #header > nav ul { - list-style: none; - margin: 0; - padding: 0; - } + .panel > .inner.columns { + 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; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + + .panel > .inner.columns > * { + -moz-flex-grow: 0; + -webkit-flex-grow: 0; + -ms-flex-grow: 0; + flex-grow: 0; + -moz-flex-shrink: 0; + -webkit-flex-shrink: 0; + -ms-flex-shrink: 0; + flex-shrink: 0; + margin-left: 3.5rem; + } - #header > nav ul li { - border-top: solid 2px #5ccfb0; - display: block; - padding: 0; - } - - #header > nav ul li a { - -moz-transition: none; - -webkit-transition: none; - -ms-transition: none; - transition: none; - border: 0; - color: #ffffff !important; - display: block; - padding: 0.85em 0; - text-decoration: none; + .panel > .inner.columns > :first-child { + margin-left: 0; + } + + .panel > .inner.columns.divided > * { + margin-left: 7rem; + } + + .panel > .inner.columns.divided > *:before { + content: ''; + position: absolute; + top: 3.5rem; + width: 2px; + height: calc(100% - 7rem); + margin-left: -3.5rem; + background-color: rgba(255, 255, 255, 0.25); } - #header > nav ul li a.active { - background: #fff; - color: #5AC8FA !important; - } + .panel > .inner.columns.divided > :first-child { + margin-left: 0; + } - #header > nav ul li:first-child { - border-top: 0; + .panel > .inner.columns.divided > :first-child:before { + display: none; } -/* Wrapper */ + .panel > .inner.columns.aligned { + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } - #wrapper { - background: #fff; - padding-right: 23em; - } + .panel .span-0-25 { + width: 2.5rem; + } -/* Main */ + .panel .span-0-5 { + width: 5rem; + } - #main > section { - border-top: solid 6px #f4f4f4; - } + .panel .span-0-75 { + width: 7.5rem; + } - #main > section > .container { - padding: 6em 0 4em 0; + .panel .span-1 { + width: 10rem; } - #main > section:first-child { - border-top: 0; + .panel .span-1-25 { + width: 12.5rem; } -/* One */ + .panel .span-1-5 { + width: 15rem; + } - #one:before { - background-image: url("../../images/banner.jpg"); - background-position: top right; - background-repeat: no-repeat; - background-size: cover; - content: ''; - display: block; - height: 15em; - width: 100%; - } + .panel .span-1-75 { + width: 17.5rem; + } -/* Footer */ + .panel .span-2 { + width: 20rem; + } - #footer { - background: #fafafa; - border-top: 0; - color: #c0c0c0; - overflow: hidden; - padding: 4em 0 2em 0; - } + .panel .span-2-25 { + width: 22.5rem; + } - #footer .copyright { - line-height: 1em; - list-style: none; - padding: 0; + .panel .span-2-5 { + width: 25rem; } - #footer .copyright li { - border-left: solid 1px #d4d4d4; - display: inline-block; - font-size: 0.8em; - margin-left: 1em; - padding-left: 1em; + .panel .span-2-75 { + width: 27.5rem; + } + + .panel .span-3 { + width: 30rem; + } + + .panel .span-3-25 { + width: 32.5rem; + } + + .panel .span-3-5 { + width: 35rem; + } + + .panel .span-3-75 { + width: 37.5rem; + } + + .panel .span-4 { + width: 40rem; + } + + .panel .span-4-25 { + width: 42.5rem; + } + + .panel .span-4-5 { + width: 45rem; + } + + .panel .span-4-75 { + width: 47.5rem; + } + + .panel .span-5 { + width: 50rem; + } + + .panel .span-5-25 { + width: 52.5rem; + } + + .panel .span-5-5 { + width: 55rem; + } + + .panel .span-5-75 { + width: 57.5rem; + } + + .panel .span-6 { + width: 60rem; + } + + .panel .span-6-25 { + width: 62.5rem; + } + + .panel .span-6-5 { + width: 65rem; + } + + .panel .span-6-75 { + width: 67.5rem; + } + + .panel .span-7 { + width: 70rem; + } + + .panel .span-7-25 { + width: 72.5rem; + } + + .panel .span-7-5 { + width: 75rem; + } + + .panel .span-7-75 { + width: 77.5rem; + } + + .panel .span-8 { + width: 80rem; + } + + .panel .span-8-25 { + width: 82.5rem; + } + + .panel .span-8-5 { + width: 85rem; + } + + .panel .span-8-75 { + width: 87.5rem; + } + + .panel .span-9 { + width: 90rem; + } + + .panel .span-9-25 { + width: 92.5rem; + } + + .panel .span-9-5 { + width: 95rem; + } + + .panel .span-9-75 { + width: 97.5rem; + } + + .panel .span-10 { + width: 100rem; + } + + .panel.small { + width: 35rem; + } + + .panel.medium { + width: 50rem; + } + + .panel.large { + width: 65rem; + } + + .panel.small .span-0-25, .panel.medium .span-0-25, .panel.large .span-0-25 { + width: 2.5%; + } + + .panel.small .span-0-5, .panel.medium .span-0-5, .panel.large .span-0-5 { + width: 5%; + } + + .panel.small .span-0-75, .panel.medium .span-0-75, .panel.large .span-0-75 { + width: 7.5%; + } + + .panel.small .span-1, .panel.medium .span-1, .panel.large .span-1 { + width: 10%; + } + + .panel.small .span-1-25, .panel.medium .span-1-25, .panel.large .span-1-25 { + width: 12.5%; + } + + .panel.small .span-1-5, .panel.medium .span-1-5, .panel.large .span-1-5 { + width: 15%; + } + + .panel.small .span-1-75, .panel.medium .span-1-75, .panel.large .span-1-75 { + width: 17.5%; + } + + .panel.small .span-2, .panel.medium .span-2, .panel.large .span-2 { + width: 20%; + } + + .panel.small .span-2-25, .panel.medium .span-2-25, .panel.large .span-2-25 { + width: 22.5%; + } + + .panel.small .span-2-5, .panel.medium .span-2-5, .panel.large .span-2-5 { + width: 25%; + } + + .panel.small .span-2-75, .panel.medium .span-2-75, .panel.large .span-2-75 { + width: 27.5%; + } + + .panel.small .span-3, .panel.medium .span-3, .panel.large .span-3 { + width: 30%; + } + + .panel.small .span-3-25, .panel.medium .span-3-25, .panel.large .span-3-25 { + width: 32.5%; + } + + .panel.small .span-3-5, .panel.medium .span-3-5, .panel.large .span-3-5 { + width: 35%; + } + + .panel.small .span-3-75, .panel.medium .span-3-75, .panel.large .span-3-75 { + width: 37.5%; + } + + .panel.small .span-4, .panel.medium .span-4, .panel.large .span-4 { + width: 40%; + } + + .panel.small .span-4-25, .panel.medium .span-4-25, .panel.large .span-4-25 { + width: 42.5%; + } + + .panel.small .span-4-5, .panel.medium .span-4-5, .panel.large .span-4-5 { + width: 45%; + } + + .panel.small .span-4-75, .panel.medium .span-4-75, .panel.large .span-4-75 { + width: 47.5%; + } + + .panel.small .span-5, .panel.medium .span-5, .panel.large .span-5 { + width: 50%; + } + + .panel.small .span-5-25, .panel.medium .span-5-25, .panel.large .span-5-25 { + width: 52.5%; + } + + .panel.small .span-5-5, .panel.medium .span-5-5, .panel.large .span-5-5 { + width: 55%; + } + + .panel.small .span-5-75, .panel.medium .span-5-75, .panel.large .span-5-75 { + width: 57.5%; + } + + .panel.small .span-6, .panel.medium .span-6, .panel.large .span-6 { + width: 60%; + } + + .panel.small .span-6-25, .panel.medium .span-6-25, .panel.large .span-6-25 { + width: 62.5%; + } + + .panel.small .span-6-5, .panel.medium .span-6-5, .panel.large .span-6-5 { + width: 65%; + } + + .panel.small .span-6-75, .panel.medium .span-6-75, .panel.large .span-6-75 { + width: 67.5%; + } + + .panel.small .span-7, .panel.medium .span-7, .panel.large .span-7 { + width: 70%; + } + + .panel.small .span-7-25, .panel.medium .span-7-25, .panel.large .span-7-25 { + width: 72.5%; + } + + .panel.small .span-7-5, .panel.medium .span-7-5, .panel.large .span-7-5 { + width: 75%; + } + + .panel.small .span-7-75, .panel.medium .span-7-75, .panel.large .span-7-75 { + width: 77.5%; + } + + .panel.small .span-8, .panel.medium .span-8, .panel.large .span-8 { + width: 80%; + } + + .panel.small .span-8-25, .panel.medium .span-8-25, .panel.large .span-8-25 { + width: 82.5%; + } + + .panel.small .span-8-5, .panel.medium .span-8-5, .panel.large .span-8-5 { + width: 85%; + } + + .panel.small .span-8-75, .panel.medium .span-8-75, .panel.large .span-8-75 { + width: 87.5%; + } + + .panel.small .span-9, .panel.medium .span-9, .panel.large .span-9 { + width: 90%; + } + + .panel.small .span-9-25, .panel.medium .span-9-25, .panel.large .span-9-25 { + width: 92.5%; + } + + .panel.small .span-9-5, .panel.medium .span-9-5, .panel.large .span-9-5 { + width: 95%; + } + + .panel.small .span-9-75, .panel.medium .span-9-75, .panel.large .span-9-75 { + width: 97.5%; + } + + .panel.small .span-10, .panel.medium .span-10, .panel.large .span-10 { + width: 100%; + } + + .panel.color0 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, #726193 20%, #e37b7c 60%, #ffe4b4); + background-size: 128px 128px, auto; + } + + .panel.color1 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #726193; + } + + .panel.color2 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #e37b7c; + } + + .panel.color3 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #ffe4b4; + } + + .panel.color4 { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #353865; + } + + .panel.color1-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #6c5e86; + } + + .panel.color2-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #de7172; + } + + .panel.color3-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #fedea6; + } + + .panel.color4-alt { + background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #323459; + } + + @media screen and (max-width: 736px) { + + .panel { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + } + + .panel > *.color1 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #726193; } - #footer .copyright li:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; - } + .panel > *.color2 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #e37b7c; + } - #footer .copyright li a { - color: inherit; - } + .panel > *.color3 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #ffe4b4; + } -/* XLarge */ + .panel > *.color4 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #353865; + } - @media screen and (max-width: 1680px) { + .panel > *.color1-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #6c5e86; + } - /* Basic */ + .panel > *.color2-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #de7172; + } - body, input, select, textarea { - font-size: 13pt; + .panel > *.color3-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #fedea6; } - /* Header */ + .panel > *.color4-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #323459; + } - #header { - width: 21em; + .panel > .intro { + padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ; + width: 100% !important; } - #header > header { - padding: 2em; + .panel > .intro.joined { + padding-bottom: 0; + padding-right: 1.75rem; } - #header > footer { - padding: 1.5em; + .panel > .intro.joined + .inner { + padding-top: 0; + padding-left: 1.75rem; + } + + .panel > .inner { + padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ; + } + + .panel > .inner.columns { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } - /* Wrapper */ + .panel > .inner.columns > * { + margin-left: 0; + margin-top: 0; + } - #wrapper { - padding-right: 21em; - } + .panel > .inner.columns > :first-child { + margin-top: 0; + } - /* Main */ + .panel > .inner.columns.divided > * { + margin-left: 0; + margin-top: 3.5rem; + } - #main > section > .container { - padding: 4em 0 2em 0; - } + .panel > .inner.columns.divided > *:before { + content: ''; + position: absolute; + top: auto; + left: 1.75rem; + width: calc(100% - 3.5rem); + height: 2px; + margin-left: 0; + margin-top: -1.75rem; + } - } + .panel > .inner.columns.divided > :first-child { + margin-top: 0; + } -/* Large */ + .panel .span-0-25 { + width: 100%; + } - @media screen and (max-width: 1280px) { + .panel .span-0-5 { + width: 100%; + } - /* Basic */ + .panel .span-0-75 { + width: 100%; + } - body, input, select, textarea { - font-size: 11pt; + .panel .span-1 { + width: 100%; } - /* Header */ + .panel .span-1-25 { + width: 100%; + } - #header { - width: 20em; + .panel .span-1-5 { + width: 100%; } - /* Wrapper */ + .panel .span-1-75 { + width: 100%; + } - #wrapper { - padding-right: 20em; + .panel .span-2 { + width: 100%; } - } + .panel .span-2-25 { + width: 100%; + } -/* Medium */ + .panel .span-2-5 { + width: 100%; + } - #titleBar { - display: none; - } + .panel .span-2-75 { + width: 100%; + } - @media screen and (max-width: 1024px) { + .panel .span-3 { + width: 100%; + } - /* Basic */ + .panel .span-3-25 { + width: 100%; + } - html, body { - overflow-x: hidden; + .panel .span-3-5 { + width: 100%; } - body, input, select, textarea { - font-size: 12pt; + .panel .span-3-75 { + width: 100%; } - /* Image */ + .panel .span-4 { + width: 100%; + } - .image.left, .image.right { - max-width: 40%; + .panel .span-4-25 { + width: 100%; } - .image.left img, .image.right img { - width: 100%; - } + .panel .span-4-5 { + width: 100%; + } - /* Header */ + .panel .span-4-75 { + width: 100%; + } - #header { - -moz-backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - -moz-transition: -moz-transform 0.5s ease; - -webkit-transition: -webkit-transform 0.5s ease; - -ms-transition: -ms-transform 0.5s ease; - transition: transform 0.5s ease; - display: block; - height: 100%; - overflow-y: auto; - position: fixed; - top: 0; - width: 23em; - z-index: 10002; - -moz-transform: translateX(23em); - -webkit-transform: translateX(23em); - -ms-transform: translateX(23em); - transform: translateX(23em); - right: 0; + .panel .span-5 { + width: 100%; } - #header > footer { - bottom: auto; - left: auto; - margin: 0.5em 0 0 0; - position: relative; - right: auto; - top: auto; - } + .panel .span-5-25 { + width: 100%; + } - /* Wrapper */ + .panel .span-5-5 { + width: 100%; + } - #wrapper { - -moz-backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - -moz-transition: -moz-transform 0.5s ease; - -webkit-transition: -webkit-transform 0.5s ease; - -ms-transition: -ms-transform 0.5s ease; - transition: transform 0.5s ease; - padding: 44px 0 1px 0; + .panel .span-5-75 { + width: 100%; } - /* One */ + .panel .span-6 { + width: 100%; + } - #one:before { - height: 10em; + .panel .span-6-25 { + width: 100%; } - /* Off-Canvas Navigation */ + .panel .span-6-5 { + width: 100%; + } - #titleBar { - -moz-backface-visibility: hidden; - -webkit-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - -moz-transition: -moz-transform 0.5s ease; - -webkit-transition: -webkit-transform 0.5s ease; - -ms-transition: -ms-transform 0.5s ease; - transition: transform 0.5s ease; - display: block; - height: 44px; - left: 0; - position: fixed; - top: 0; + .panel .span-6-75 { width: 100%; - z-index: 10001; - background: #222; - color: #fff; - min-width: 320px; } - #titleBar .title { - color: #fff; - display: block; - font-weight: 700; - height: 44px; - line-height: 44px; - padding: 0 1em; - width: 100%; - text-align: left; - } + .panel .span-7 { + width: 100%; + } - #titleBar .title a { - border: 0; - text-decoration: none; - } + .panel .span-7-25 { + width: 100%; + } - #titleBar .toggle { - text-decoration: none; - height: 4em; - position: absolute; - top: 0; - width: 6em; - border: 0; - outline: 0; - right: 0; - } - - #titleBar .toggle:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - } + .panel .span-7-5 { + width: 100%; + } - #titleBar .toggle:before { - background: #5AC8FA; - color: #ffffff; - content: '\f0c9'; - display: block; - font-size: 18px; - height: 44px; - line-height: 44px; - position: absolute; - text-align: center; - top: 0; - width: 64px; - right: 0; - } + .panel .span-7-75 { + width: 100%; + } - body.header-visible #wrapper, body.header-visible #titleBar { - -moz-transform: translateX(-23em); - -webkit-transform: translateX(-23em); - -ms-transform: translateX(-23em); - transform: translateX(-23em); + .panel .span-8 { + width: 100%; } - body.header-visible #header { - -moz-transform: translateX(0); - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + .panel .span-8-25 { + width: 100%; } - } + .panel .span-8-5 { + width: 100%; + } -/* Small */ + .panel .span-8-75 { + width: 100%; + } - @media screen and (max-width: 736px) { + .panel .span-9 { + width: 100%; + } - /* Basic */ + .panel .span-9-25 { + width: 100%; + } - body, input, select, textarea { - font-size: 12pt; + .panel .span-9-5 { + width: 100%; } - h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { - display: none; + .panel .span-9-75 { + width: 100%; } - h2 { - font-size: 1.75em; + .panel .span-10 { + width: 100%; } - h3 { - font-size: 1.5em; + .panel.small, .panel.medium, .panel.large { + width: 100% !important; } - h4 { - font-size: 1em; + .panel.small .span-0-25, .panel.medium .span-0-25, .panel.large .span-0-25 { + width: 100%; + } + + .panel.small .span-0-5, .panel.medium .span-0-5, .panel.large .span-0-5 { + width: 100%; + } + + .panel.small .span-0-75, .panel.medium .span-0-75, .panel.large .span-0-75 { + width: 100%; + } + + .panel.small .span-1, .panel.medium .span-1, .panel.large .span-1 { + width: 100%; + } + + .panel.small .span-1-25, .panel.medium .span-1-25, .panel.large .span-1-25 { + width: 100%; + } + + .panel.small .span-1-5, .panel.medium .span-1-5, .panel.large .span-1-5 { + width: 100%; + } + + .panel.small .span-1-75, .panel.medium .span-1-75, .panel.large .span-1-75 { + width: 100%; + } + + .panel.small .span-2, .panel.medium .span-2, .panel.large .span-2 { + width: 100%; + } + + .panel.small .span-2-25, .panel.medium .span-2-25, .panel.large .span-2-25 { + width: 100%; + } + + .panel.small .span-2-5, .panel.medium .span-2-5, .panel.large .span-2-5 { + width: 100%; + } + + .panel.small .span-2-75, .panel.medium .span-2-75, .panel.large .span-2-75 { + width: 100%; + } + + .panel.small .span-3, .panel.medium .span-3, .panel.large .span-3 { + width: 100%; + } + + .panel.small .span-3-25, .panel.medium .span-3-25, .panel.large .span-3-25 { + width: 100%; + } + + .panel.small .span-3-5, .panel.medium .span-3-5, .panel.large .span-3-5 { + width: 100%; + } + + .panel.small .span-3-75, .panel.medium .span-3-75, .panel.large .span-3-75 { + width: 100%; + } + + .panel.small .span-4, .panel.medium .span-4, .panel.large .span-4 { + width: 100%; + } + + .panel.small .span-4-25, .panel.medium .span-4-25, .panel.large .span-4-25 { + width: 100%; + } + + .panel.small .span-4-5, .panel.medium .span-4-5, .panel.large .span-4-5 { + width: 100%; + } + + .panel.small .span-4-75, .panel.medium .span-4-75, .panel.large .span-4-75 { + width: 100%; + } + + .panel.small .span-5, .panel.medium .span-5, .panel.large .span-5 { + width: 100%; + } + + .panel.small .span-5-25, .panel.medium .span-5-25, .panel.large .span-5-25 { + width: 100%; + } + + .panel.small .span-5-5, .panel.medium .span-5-5, .panel.large .span-5-5 { + width: 100%; + } + + .panel.small .span-5-75, .panel.medium .span-5-75, .panel.large .span-5-75 { + width: 100%; + } + + .panel.small .span-6, .panel.medium .span-6, .panel.large .span-6 { + width: 100%; + } + + .panel.small .span-6-25, .panel.medium .span-6-25, .panel.large .span-6-25 { + width: 100%; + } + + .panel.small .span-6-5, .panel.medium .span-6-5, .panel.large .span-6-5 { + width: 100%; + } + + .panel.small .span-6-75, .panel.medium .span-6-75, .panel.large .span-6-75 { + width: 100%; + } + + .panel.small .span-7, .panel.medium .span-7, .panel.large .span-7 { + width: 100%; + } + + .panel.small .span-7-25, .panel.medium .span-7-25, .panel.large .span-7-25 { + width: 100%; + } + + .panel.small .span-7-5, .panel.medium .span-7-5, .panel.large .span-7-5 { + width: 100%; + } + + .panel.small .span-7-75, .panel.medium .span-7-75, .panel.large .span-7-75 { + width: 100%; + } + + .panel.small .span-8, .panel.medium .span-8, .panel.large .span-8 { + width: 100%; + } + + .panel.small .span-8-25, .panel.medium .span-8-25, .panel.large .span-8-25 { + width: 100%; + } + + .panel.small .span-8-5, .panel.medium .span-8-5, .panel.large .span-8-5 { + width: 100%; + } + + .panel.small .span-8-75, .panel.medium .span-8-75, .panel.large .span-8-75 { + width: 100%; + } + + .panel.small .span-9, .panel.medium .span-9, .panel.large .span-9 { + width: 100%; + } + + .panel.small .span-9-25, .panel.medium .span-9-25, .panel.large .span-9-25 { + width: 100%; + } + + .panel.small .span-9-5, .panel.medium .span-9-5, .panel.large .span-9-5 { + width: 100%; + } + + .panel.small .span-9-75, .panel.medium .span-9-75, .panel.large .span-9-75 { + width: 100%; + } + + .panel.small .span-10, .panel.medium .span-10, .panel.large .span-10 { + width: 100%; + } + + .panel.color1 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #726193; } - /* Image */ + .panel.color2 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #e37b7c; + } - .image.left { - margin: 0 1.5em 1em 0; + .panel.color3 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #ffe4b4; } - .image.right { - margin: 0 0 1em 1.5em; + .panel.color4 { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.25) 25%, rgba(227, 123, 124, 0.25) 50%, rgba(255, 228, 180, 0.25)); + background-size: 128px 128px, auto; + background-color: #353865; } - /* Section/Article */ + .panel.color1-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #6c5e86; + } - header br { - display: none; + .panel.color2-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #de7172; } - header.major h2 { - font-size: 2.5em; + .panel.color3-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #fedea6; } - header.major h2 + p { - font-size: 1.5em; - } + .panel.color4-alt { + background-image: url("../../images/overlay.png"), linear-gradient(135deg, rgba(114, 97, 147, 0.175) 25%, rgba(227, 123, 124, 0.175) 50%, rgba(255, 228, 180, 0.175)); + background-size: 128px 128px, auto; + background-color: #323459; + } - /* Features */ + } - .features article .image { - display: block; - margin: 0 0 2.25em 0; - padding-right: 0; - width: 100%; +/* Panel (Banner) */ + + .panel.banner { + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + } + + .panel.banner .content { + padding: 3.5rem 3.5rem 2rem 3.5rem ; + 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; + -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; + } + + .panel.banner .content > .actions:last-child { + margin-bottom: 0; } - .features article .inner { + .panel.banner .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: relative; + } + + .panel.banner .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; display: block; + position: absolute; + top: 0; + left: 0; width: 100%; + height: 100%; } - /* Header */ + .panel.banner.left { + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } - #header { - width: 17em; - -moz-transform: translateX(17em); - -webkit-transform: translateX(17em); - -ms-transform: translateX(17em); - transform: translateX(17em); - right: 0; + .panel.banner.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) { + + .panel.banner .content { + padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ; + -moz-flex-basis: 60%; + -webkit-flex-basis: 60%; + -ms-flex-basis: 60%; + flex-basis: 60%; + } + + .panel.banner .content > .actions:last-child { + margin-bottom: 1.5rem; } - #header > header { - padding: 2em; - } + .panel.banner .image { + -moz-flex-basis: 40%; + -webkit-flex-basis: 40%; + -ms-flex-basis: 40%; + flex-basis: 40%; + } - #header > header .avatar { - margin: 0 auto 1.6875em auto; - width: 6em; - } + } - #header > header h1 { - font-size: 1.5em; - } + @media screen and (max-width: 736px) and (orientation: portrait) { - #header > header p { - margin: 1em 0 0 0; - } + .panel.banner .content { + -moz-flex-basis: auto; + -webkit-flex-basis: auto; + -ms-flex-basis: auto; + flex-basis: auto; + } - #header > footer { - padding: 1.5em; - } + .panel.banner .image { + -moz-flex-basis: auto; + -webkit-flex-basis: auto; + -ms-flex-basis: auto; + flex-basis: auto; + height: 18rem; + } + + .panel.banner.left { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .panel.banner.right { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + } + +/* Panel (Spotlight) */ + + .panel.spotlight { + -moz-align-items: stretch; + -webkit-align-items: stretch; + -ms-align-items: stretch; + align-items: stretch; + position: relative; + } + + .panel.spotlight > * { + z-index: 1; + } - /* Main */ + .panel.spotlight .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; + padding: 3.5rem 3.5rem 2rem 3.5rem ; + } - #main > section > .container { - padding: 2em 0 0 0; + .panel.spotlight .image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + } + + .panel.spotlight .image img { + -moz-object-fit: cover; + -webkit-object-fit: cover; + -ms-object-fit: cover; + object-fit: cover; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } - /* One */ + .panel.spotlight.left { + -moz-justify-content: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + } - #one:before { - height: 7em; + .panel.spotlight.left .content { + background-image: linear-gradient(-90deg, transparent 0%, rgba(0, 0, 0, 0.125) 30%, rgba(0, 0, 0, 0.175) 50%); } - /* Footer */ + .panel.spotlight.right { + -moz-justify-content: -moz-flex-end; + -webkit-justify-content: -webkit-flex-end; + -ms-justify-content: -ms-flex-end; + justify-content: flex-end; + } - #footer { - text-align: center; + .panel.spotlight.right .content { + background-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.125) 30%, rgba(0, 0, 0, 0.175) 50%); } - #footer .copyright li { - border-left: 0; - display: block; - line-height: 1.75em; - margin: 0.75em 0 0 0; - padding-left: 0; - } + @media screen and (max-width: 736px) { - #footer .copyright li:first-child { - margin-top: 0; - } + .panel.spotlight .content { + padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ; + -moz-flex-direction: column !important; + -webkit-flex-direction: column !important; + -ms-flex-direction: column !important; + flex-direction: column !important; + background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0.175)) !important; + min-height: 25rem; + } - /* Off-Canvas Navigation */ + } - #titleBar .toggle { - height: 4em; - width: 6em; + @media screen and (max-width: 480px) { + + .panel.spotlight .content { + min-height: 30rem; + } + + } + +/* Page Wrapper */ + + #page-wrapper { + 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: -moz-flex-start; + -webkit-justify-content: -webkit-flex-start; + -ms-justify-content: -ms-flex-start; + justify-content: flex-start; + -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; + height: 100%; + padding: 5rem; + } + + @media screen and (orientation: portrait) { + + #page-wrapper { + padding-left: 2rem; + padding-right: 2rem; } - #titleBar .toggle:before { - font-size: 14px; - width: 44px; - } + } - body.header-visible #wrapper, body.header-visible #titleBar { - -moz-transform: translateX(-17em); - -webkit-transform: translateX(-17em); - -ms-transform: translateX(-17em); - transform: translateX(-17em); + @media screen and (min-aspect-ratio: 16 / 7) { + + #page-wrapper { + padding: 6vh; } - } + } + + @media screen and (min-aspect-ratio: 16 / 6) { + + #page-wrapper { + padding: 0; + } -/* XSmall */ + } + + @media screen and (max-width: 736px) { + + #page-wrapper { + height: auto; + padding: 1rem; + } + + } @media screen and (max-width: 480px) { - /* Basic */ + #page-wrapper { + padding: 0; + } + + } + +/* Wrapper */ + + #wrapper { + 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-transition: opacity 1s ease-out, -moz-transform 0.75s ease-out; + -webkit-transition: opacity 1s ease-out, -webkit-transform 0.75s ease-out; + -ms-transition: opacity 1s ease-out, -ms-transform 0.75s ease-out; + transition: opacity 1s ease-out, transform 0.75s ease-out; + -moz-transition-delay: 0.25s; + -webkit-transition-delay: 0.25s; + -ms-transition-delay: 0.25s; + transition-delay: 0.25s; + cursor: default; + position: relative; + height: 32rem; + box-shadow: 0 2rem 4rem 0.25rem rgba(46, 43, 55, 0.575); + } - html, body { - min-width: 320px; + #wrapper > .scrollZone { + position: fixed; + width: 6rem; + height: inherit; + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + z-index: 10100; + } + + #wrapper > .scrollZone.left { + left: 0; } - body, input, select, textarea { - font-size: 12pt; + #wrapper > .scrollZone.right { + right: 0; } - /* List */ + #wrapper > .copyright { + position: absolute; + bottom: -3rem; + right: 0; + font-size: 0.8rem; + color: rgba(46, 43, 55, 0.375); + margin-bottom: 0; + } - ul.actions { - margin: 0 0 2.25em 0; + #wrapper > .copyright a:hover { + color: inherit; } - ul.actions li { - display: block; - padding: 1.125em 0 0 0; - text-align: center; - width: 100%; - } + #wrapper.is-dragging { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + } - ul.actions li:first-child { - padding-top: 0; - } + #wrapper.is-dragging * { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + } - ul.actions li > * { - width: 100%; - margin: 0 !important; - } + #wrapper.is-dragging *:not(a, .image) { + cursor: -moz-grab; + cursor: -webkit-grab; + cursor: -ms-grab; + cursor: grab; + } - ul.actions li > *.icon:before { - margin-left: -2em; - } + #wrapper.is-dragged * { + -moz-pointer-events: none; + -webkit-pointer-events: none; + -ms-pointer-events: none; + pointer-events: none; + } - ul.actions.small li { - padding: 0.5625em 0 0 0; - } + body.is-loading #wrapper { + -moz-transform: translateX(2rem); + -webkit-transform: translateX(2rem); + -ms-transform: translateX(2rem); + transform: translateX(2rem); + opacity: 0; + } - ul.actions.small li:first-child { - padding-top: 0; - } + @media screen and (max-width: 736px) { + + #wrapper { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + margin: 0 0 5rem 0; + box-shadow: 0 0.25rem 1.5rem 0.25rem rgba(46, 43, 55, 0.5); + } + + #wrapper > .scrollZone { + display: none; + } - ul.feature-icons li { + #wrapper > .copyright { display: block; width: 100%; + text-align: center; } - /* Button */ + body.is-loading #wrapper { + -moz-transform: translateY(1rem); + -webkit-transform: translateY(1rem); + -ms-transform: translateY(1rem); + transform: translateY(1rem); + } - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - padding: 0; + } + + @media screen and (max-width: 480px) { + + #wrapper { + box-shadow: none; + } + + body.is-loading #wrapper { + -moz-transform: none; + -webkit-transform: none; + -ms-transform: none; + transform: none; } }
\ No newline at end of file diff --git a/assets/css/noscript.css b/assets/css/noscript.css new file mode 100644 index 0000000..0f127ac --- /dev/null +++ b/assets/css/noscript.css @@ -0,0 +1,11 @@ +/* + Ethereal by HTML5 UP + html5up.net | @ajlkn + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/* Page */ + + body { + overflow-x: scroll; + }
\ No newline at end of file diff --git a/assets/fonts/FontAwesome.otf b/assets/fonts/FontAwesome.otf Binary files differindex d4de13e..d4de13e 100755..100644 --- a/assets/fonts/FontAwesome.otf +++ b/assets/fonts/FontAwesome.otf diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot Binary files differindex c7b00d2..c7b00d2 100755..100644 --- a/assets/fonts/fontawesome-webfont.eot +++ b/assets/fonts/fontawesome-webfont.eot diff --git a/assets/fonts/fontawesome-webfont.svg b/assets/fonts/fontawesome-webfont.svg index 8b66187..8b66187 100755..100644 --- a/assets/fonts/fontawesome-webfont.svg +++ b/assets/fonts/fontawesome-webfont.svg diff --git a/assets/fonts/fontawesome-webfont.ttf b/assets/fonts/fontawesome-webfont.ttf Binary files differindex f221e50..f221e50 100755..100644 --- a/assets/fonts/fontawesome-webfont.ttf +++ b/assets/fonts/fontawesome-webfont.ttf diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff Binary files differindex 6e7483c..6e7483c 100755..100644 --- a/assets/fonts/fontawesome-webfont.woff +++ b/assets/fonts/fontawesome-webfont.woff diff --git a/assets/fonts/fontawesome-webfont.woff2 b/assets/fonts/fontawesome-webfont.woff2 Binary files differindex 7eb74fd..7eb74fd 100755..100644 --- a/assets/fonts/fontawesome-webfont.woff2 +++ b/assets/fonts/fontawesome-webfont.woff2 diff --git a/assets/js/ie/PIE.htc b/assets/js/ie/PIE.htc deleted file mode 100755 index ca3b547..0000000 --- a/assets/js/ie/PIE.htc +++ /dev/null @@ -1,96 +0,0 @@ -<!-- -PIE: CSS3 rendering for IE -Version 1.0.0 -http://css3pie.com -Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2. ---> -<PUBLIC:COMPONENT lightWeight="true"> -<!-- saved from url=(0014)about:internet --> -<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" /> -<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="init()" /> -<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" /> - -<script type="text/javascript"> -var doc = element.document;var f=window.PIE; -if(!f){f=window.PIE={F:"-pie-",nb:"Pie",La:"pie_",Ac:{TD:1,TH:1},cc:{TABLE:1,THEAD:1,TBODY:1,TFOOT:1,TR:1,INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,IMG:1,HR:1},fc:{A:1,INPUT:1,TEXTAREA:1,SELECT:1,BUTTON:1},Gd:{submit:1,button:1,reset:1},aa:function(){}};try{doc.execCommand("BackgroundImageCache",false,true)}catch(aa){}for(var ba=4,Z=doc.createElement("div"),ca=Z.getElementsByTagName("i"),ga;Z.innerHTML="<!--[if gt IE "+ ++ba+"]><i></i><![endif]--\>",ca[0];);f.O=ba;if(ba===6)f.F=f.F.replace(/^-/,"");f.ja= -doc.documentMode||f.O;Z.innerHTML='<v:shape adj="1"/>';ga=Z.firstChild;ga.style.behavior="url(#default#VML)";f.zc=typeof ga.adj==="object";(function(){var a,b=0,c={};f.p={Za:function(d){if(!a){a=doc.createDocumentFragment();a.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return a.createElement("css3vml:"+d)},Ba:function(d){return d&&d._pieId||(d._pieId="_"+ ++b)},Eb:function(d){var e,g,j,i,h=arguments;e=1;for(g=h.length;e<g;e++){i=h[e];for(j in i)if(i.hasOwnProperty(j))d[j]=i[j]}return d}, -Rb:function(d,e,g){var j=c[d],i,h;if(j)Object.prototype.toString.call(j)==="[object Array]"?j.push([e,g]):e.call(g,j);else{h=c[d]=[[e,g]];i=new Image;i.onload=function(){j=c[d]={h:i.width,f:i.height};for(var k=0,n=h.length;k<n;k++)h[k][0].call(h[k][1],j);i.onload=null};i.src=d}}}})();f.Na={gc:function(a,b,c,d){function e(){k=j>=90&&j<270?b:0;n=j<180?c:0;m=b-k;p=c-n}function g(){for(;j<0;)j+=360;j%=360}var j=d.sa;d=d.zb;var i,h,k,n,m,p,r,t;if(d){d=d.coords(a,b,c);i=d.x;h=d.y}if(j){j=j.jd();g();e(); -if(!d){i=k;h=n}d=f.Na.tc(i,h,j,m,p);a=d[0];d=d[1]}else if(d){a=b-i;d=c-h}else{i=h=a=0;d=c}r=a-i;t=d-h;if(j===void 0){j=!r?t<0?90:270:!t?r<0?180:0:-Math.atan2(t,r)/Math.PI*180;g();e()}return{sa:j,xc:i,yc:h,td:a,ud:d,Wd:k,Xd:n,rd:m,sd:p,kd:r,ld:t,rc:f.Na.dc(i,h,a,d)}},tc:function(a,b,c,d,e){if(c===0||c===180)return[d,b];else if(c===90||c===270)return[a,e];else{c=Math.tan(-c*Math.PI/180);a=c*a-b;b=-1/c;d=b*d-e;e=b-c;return[(d-a)/e,(c*d-b*a)/e]}},dc:function(a,b,c,d){a=c-a;b=d-b;return Math.abs(a===0? -b:b===0?a:Math.sqrt(a*a+b*b))}};f.ea=function(){this.Gb=[];this.oc={}};f.ea.prototype={ba:function(a){var b=f.p.Ba(a),c=this.oc,d=this.Gb;if(!(b in c)){c[b]=d.length;d.push(a)}},Ha:function(a){a=f.p.Ba(a);var b=this.oc;if(a&&a in b){delete this.Gb[b[a]];delete b[a]}},xa:function(){for(var a=this.Gb,b=a.length;b--;)a[b]&&a[b]()}};f.Oa=new f.ea;f.Oa.Rd=function(){var a=this,b;if(!a.Sd){b=doc.documentElement.currentStyle.getAttribute(f.F+"poll-interval")||250;(function c(){a.xa();setTimeout(c,b)})(); -a.Sd=1}};(function(){function a(){f.L.xa();window.detachEvent("onunload",a);window.PIE=null}f.L=new f.ea;window.attachEvent("onunload",a);f.L.ta=function(b,c,d){b.attachEvent(c,d);this.ba(function(){b.detachEvent(c,d)})}})();f.Qa=new f.ea;f.L.ta(window,"onresize",function(){f.Qa.xa()});(function(){function a(){f.mb.xa()}f.mb=new f.ea;f.L.ta(window,"onscroll",a);f.Qa.ba(a)})();(function(){function a(){c=f.kb.md()}function b(){if(c){for(var d=0,e=c.length;d<e;d++)f.attach(c[d]);c=0}}var c;if(f.ja<9){f.L.ta(window, -"onbeforeprint",a);f.L.ta(window,"onafterprint",b)}})();f.lb=new f.ea;f.L.ta(doc,"onmouseup",function(){f.lb.xa()});f.he=function(){function a(h){this.Y=h}var b=doc.createElement("length-calc"),c=doc.body||doc.documentElement,d=b.style,e={},g=["mm","cm","in","pt","pc"],j=g.length,i={};d.position="absolute";d.top=d.left="-9999px";for(c.appendChild(b);j--;){d.width="100"+g[j];e[g[j]]=b.offsetWidth/100}c.removeChild(b);d.width="1em";a.prototype={Kb:/(px|em|ex|mm|cm|in|pt|pc|%)$/,ic:function(){var h= -this.Jd;if(h===void 0)h=this.Jd=parseFloat(this.Y);return h},yb:function(){var h=this.ae;if(!h)h=this.ae=(h=this.Y.match(this.Kb))&&h[0]||"px";return h},a:function(h,k){var n=this.ic(),m=this.yb();switch(m){case "px":return n;case "%":return n*(typeof k==="function"?k():k)/100;case "em":return n*this.xb(h);case "ex":return n*this.xb(h)/2;default:return n*e[m]}},xb:function(h){var k=h.currentStyle.fontSize,n,m;if(k.indexOf("px")>0)return parseFloat(k);else if(h.tagName in f.cc){m=this;n=h.parentNode; -return f.n(k).a(n,function(){return m.xb(n)})}else{h.appendChild(b);k=b.offsetWidth;b.parentNode===h&&h.removeChild(b);return k}}};f.n=function(h){return i[h]||(i[h]=new a(h))};return a}();f.Ja=function(){function a(e){this.X=e}var b=f.n("50%"),c={top:1,center:1,bottom:1},d={left:1,center:1,right:1};a.prototype={zd:function(){if(!this.ac){var e=this.X,g=e.length,j=f.v,i=j.qa,h=f.n("0");i=i.na;h=["left",h,"top",h];if(g===1){e.push(new j.ob(i,"center"));g++}if(g===2){i&(e[0].k|e[1].k)&&e[0].d in c&& -e[1].d in d&&e.push(e.shift());if(e[0].k&i)if(e[0].d==="center")h[1]=b;else h[0]=e[0].d;else if(e[0].W())h[1]=f.n(e[0].d);if(e[1].k&i)if(e[1].d==="center")h[3]=b;else h[2]=e[1].d;else if(e[1].W())h[3]=f.n(e[1].d)}this.ac=h}return this.ac},coords:function(e,g,j){var i=this.zd(),h=i[1].a(e,g);e=i[3].a(e,j);return{x:i[0]==="right"?g-h:h,y:i[2]==="bottom"?j-e:e}}};return a}();f.Ka=function(){function a(b,c){this.h=b;this.f=c}a.prototype={a:function(b,c,d,e,g){var j=this.h,i=this.f,h=c/d;e=e/g;if(j=== -"contain"){j=e>h?c:d*e;i=e>h?c/e:d}else if(j==="cover"){j=e<h?c:d*e;i=e<h?c/e:d}else if(j==="auto"){i=i==="auto"?g:i.a(b,d);j=i*e}else{j=j.a(b,c);i=i==="auto"?j/e:i.a(b,d)}return{h:j,f:i}}};a.Kc=new a("auto","auto");return a}();f.Ec=function(){function a(b){this.Y=b}a.prototype={Kb:/[a-z]+$/i,yb:function(){return this.ad||(this.ad=this.Y.match(this.Kb)[0].toLowerCase())},jd:function(){var b=this.Vc,c;if(b===undefined){b=this.yb();c=parseFloat(this.Y,10);b=this.Vc=b==="deg"?c:b==="rad"?c/Math.PI*180: -b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};return a}();f.Jc=function(){function a(c){this.Y=c}var b={};a.Qd=/\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;a.Fb={aliceblue:"F0F8FF",antiquewhite:"FAEBD7",aqua:"0FF",aquamarine:"7FFFD4",azure:"F0FFFF",beige:"F5F5DC",bisque:"FFE4C4",black:"000",blanchedalmond:"FFEBCD",blue:"00F",blueviolet:"8A2BE2",brown:"A52A2A",burlywood:"DEB887",cadetblue:"5F9EA0",chartreuse:"7FFF00",chocolate:"D2691E",coral:"FF7F50",cornflowerblue:"6495ED", -cornsilk:"FFF8DC",crimson:"DC143C",cyan:"0FF",darkblue:"00008B",darkcyan:"008B8B",darkgoldenrod:"B8860B",darkgray:"A9A9A9",darkgreen:"006400",darkkhaki:"BDB76B",darkmagenta:"8B008B",darkolivegreen:"556B2F",darkorange:"FF8C00",darkorchid:"9932CC",darkred:"8B0000",darksalmon:"E9967A",darkseagreen:"8FBC8F",darkslateblue:"483D8B",darkslategray:"2F4F4F",darkturquoise:"00CED1",darkviolet:"9400D3",deeppink:"FF1493",deepskyblue:"00BFFF",dimgray:"696969",dodgerblue:"1E90FF",firebrick:"B22222",floralwhite:"FFFAF0", -forestgreen:"228B22",fuchsia:"F0F",gainsboro:"DCDCDC",ghostwhite:"F8F8FF",gold:"FFD700",goldenrod:"DAA520",gray:"808080",green:"008000",greenyellow:"ADFF2F",honeydew:"F0FFF0",hotpink:"FF69B4",indianred:"CD5C5C",indigo:"4B0082",ivory:"FFFFF0",khaki:"F0E68C",lavender:"E6E6FA",lavenderblush:"FFF0F5",lawngreen:"7CFC00",lemonchiffon:"FFFACD",lightblue:"ADD8E6",lightcoral:"F08080",lightcyan:"E0FFFF",lightgoldenrodyellow:"FAFAD2",lightgreen:"90EE90",lightgrey:"D3D3D3",lightpink:"FFB6C1",lightsalmon:"FFA07A", -lightseagreen:"20B2AA",lightskyblue:"87CEFA",lightslategray:"789",lightsteelblue:"B0C4DE",lightyellow:"FFFFE0",lime:"0F0",limegreen:"32CD32",linen:"FAF0E6",magenta:"F0F",maroon:"800000",mediumauqamarine:"66CDAA",mediumblue:"0000CD",mediumorchid:"BA55D3",mediumpurple:"9370D8",mediumseagreen:"3CB371",mediumslateblue:"7B68EE",mediumspringgreen:"00FA9A",mediumturquoise:"48D1CC",mediumvioletred:"C71585",midnightblue:"191970",mintcream:"F5FFFA",mistyrose:"FFE4E1",moccasin:"FFE4B5",navajowhite:"FFDEAD", -navy:"000080",oldlace:"FDF5E6",olive:"808000",olivedrab:"688E23",orange:"FFA500",orangered:"FF4500",orchid:"DA70D6",palegoldenrod:"EEE8AA",palegreen:"98FB98",paleturquoise:"AFEEEE",palevioletred:"D87093",papayawhip:"FFEFD5",peachpuff:"FFDAB9",peru:"CD853F",pink:"FFC0CB",plum:"DDA0DD",powderblue:"B0E0E6",purple:"800080",red:"F00",rosybrown:"BC8F8F",royalblue:"4169E1",saddlebrown:"8B4513",salmon:"FA8072",sandybrown:"F4A460",seagreen:"2E8B57",seashell:"FFF5EE",sienna:"A0522D",silver:"C0C0C0",skyblue:"87CEEB", -slateblue:"6A5ACD",slategray:"708090",snow:"FFFAFA",springgreen:"00FF7F",steelblue:"4682B4",tan:"D2B48C",teal:"008080",thistle:"D8BFD8",tomato:"FF6347",turquoise:"40E0D0",violet:"EE82EE",wheat:"F5DEB3",white:"FFF",whitesmoke:"F5F5F5",yellow:"FF0",yellowgreen:"9ACD32"};a.prototype={parse:function(){if(!this.Ua){var c=this.Y,d;if(d=c.match(a.Qd)){this.Ua="rgb("+d[1]+","+d[2]+","+d[3]+")";this.Yb=parseFloat(d[4])}else{if((d=c.toLowerCase())in a.Fb)c="#"+a.Fb[d];this.Ua=c;this.Yb=c==="transparent"?0: -1}}},U:function(c){this.parse();return this.Ua==="currentColor"?c.currentStyle.color:this.Ua},fa:function(){this.parse();return this.Yb}};f.ha=function(c){return b[c]||(b[c]=new a(c))};return a}();f.v=function(){function a(c){this.$a=c;this.ch=0;this.X=[];this.Ga=0}var b=a.qa={Ia:1,Wb:2,z:4,Lc:8,Xb:16,na:32,K:64,oa:128,pa:256,Ra:512,Tc:1024,URL:2048};a.ob=function(c,d){this.k=c;this.d=d};a.ob.prototype={Ca:function(){return this.k&b.K||this.k&b.oa&&this.d==="0"},W:function(){return this.Ca()||this.k& -b.Ra}};a.prototype={de:/\s/,Kd:/^[\+\-]?(\d*\.)?\d+/,url:/^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,nc:/^\-?[_a-z][\w-]*/i,Yd:/^("([^"]*)"|'([^']*)')/,Bd:/^#([\da-f]{6}|[\da-f]{3})/i,be:{px:b.K,em:b.K,ex:b.K,mm:b.K,cm:b.K,"in":b.K,pt:b.K,pc:b.K,deg:b.Ia,rad:b.Ia,grad:b.Ia},fd:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){function d(p,r){p=new a.ob(p,r);if(!c){k.X.push(p);k.Ga++}return p}function e(){k.Ga++;return null}var g,j,i,h,k=this;if(this.Ga<this.X.length)return this.X[this.Ga++];for(;this.de.test(this.$a.charAt(this.ch));)this.ch++; -if(this.ch>=this.$a.length)return e();j=this.ch;g=this.$a.substring(this.ch);i=g.charAt(0);switch(i){case "#":if(h=g.match(this.Bd)){this.ch+=h[0].length;return d(b.z,h[0])}break;case '"':case "'":if(h=g.match(this.Yd)){this.ch+=h[0].length;return d(b.Tc,h[2]||h[3]||"")}break;case "/":case ",":this.ch++;return d(b.pa,i);case "u":if(h=g.match(this.url)){this.ch+=h[0].length;return d(b.URL,h[2]||h[3]||h[4]||"")}}if(h=g.match(this.Kd)){i=h[0];this.ch+=i.length;if(g.charAt(i.length)==="%"){this.ch++; -return d(b.Ra,i+"%")}if(h=g.substring(i.length).match(this.nc)){i+=h[0];this.ch+=h[0].length;return d(this.be[h[0].toLowerCase()]||b.Lc,i)}return d(b.oa,i)}if(h=g.match(this.nc)){i=h[0];this.ch+=i.length;if(i.toLowerCase()in f.Jc.Fb||i==="currentColor"||i==="transparent")return d(b.z,i);if(g.charAt(i.length)==="("){this.ch++;if(i.toLowerCase()in this.fd){g=function(p){return p&&p.k&b.oa};h=function(p){return p&&p.k&(b.oa|b.Ra)};var n=function(p,r){return p&&p.d===r},m=function(){return k.next(1)}; -if((i.charAt(0)==="r"?h(m()):g(m()))&&n(m(),",")&&h(m())&&n(m(),",")&&h(m())&&(i==="rgb"||i==="hsa"||n(m(),",")&&g(m()))&&n(m(),")"))return d(b.z,this.$a.substring(j,this.ch));return e()}return d(b.Xb,i)}return d(b.na,i)}this.ch++;return d(b.Wb,i)},D:function(){return this.X[this.Ga-- -2]},all:function(){for(;this.next(););return this.X},ma:function(c,d){for(var e=[],g,j;g=this.next();){if(c(g)){j=true;this.D();break}e.push(g)}return d&&!j?null:e}};return a}();var ha=function(a){this.e=a};ha.prototype= -{Z:0,Od:function(){var a=this.qb,b;return!a||(b=this.o())&&(a.x!==b.x||a.y!==b.y)},Td:function(){var a=this.qb,b;return!a||(b=this.o())&&(a.h!==b.h||a.f!==b.f)},hc:function(){var a=this.e,b=a.getBoundingClientRect(),c=f.ja===9,d=f.O===7,e=b.right-b.left;return{x:b.left,y:b.top,h:c||d?a.offsetWidth:e,f:c||d?a.offsetHeight:b.bottom-b.top,Hd:d&&e?a.offsetWidth/e:1}},o:function(){return this.Z?this.Va||(this.Va=this.hc()):this.hc()},Ad:function(){return!!this.qb},cb:function(){++this.Z},hb:function(){if(!--this.Z){if(this.Va)this.qb= -this.Va;this.Va=null}}};(function(){function a(b){var c=f.p.Ba(b);return function(){if(this.Z){var d=this.$b||(this.$b={});return c in d?d[c]:(d[c]=b.call(this))}else return b.call(this)}}f.B={Z:0,ka:function(b){function c(d){this.e=d;this.Zb=this.ia()}f.p.Eb(c.prototype,f.B,b);c.$c={};return c},j:function(){var b=this.ia(),c=this.constructor.$c;return b?b in c?c[b]:(c[b]=this.la(b)):null},ia:a(function(){var b=this.e,c=this.constructor,d=b.style;b=b.currentStyle;var e=this.wa,g=this.Fa,j=c.Yc||(c.Yc= -f.F+e);c=c.Zc||(c.Zc=f.nb+g.charAt(0).toUpperCase()+g.substring(1));return d[c]||b.getAttribute(j)||d[g]||b.getAttribute(e)}),i:a(function(){return!!this.j()}),H:a(function(){var b=this.ia(),c=b!==this.Zb;this.Zb=b;return c}),va:a,cb:function(){++this.Z},hb:function(){--this.Z||delete this.$b}}})();f.Sb=f.B.ka({wa:f.F+"background",Fa:f.nb+"Background",cd:{scroll:1,fixed:1,local:1},fb:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},sc:{"padding-box":1,"border-box":1,"content-box":1},Pd:{top:1,right:1, -bottom:1,left:1,center:1},Ud:{contain:1,cover:1},eb:{Ma:"backgroundClip",z:"backgroundColor",da:"backgroundImage",Pa:"backgroundOrigin",S:"backgroundPosition",T:"backgroundRepeat",Sa:"backgroundSize"},la:function(a){function b(s){return s&&s.W()||s.k&k&&s.d in t}function c(s){return s&&(s.W()&&f.n(s.d)||s.d==="auto"&&"auto")}var d=this.e.currentStyle,e,g,j,i=f.v.qa,h=i.pa,k=i.na,n=i.z,m,p,r=0,t=this.Pd,v,l,q={M:[]};if(this.wb()){e=new f.v(a);for(j={};g=e.next();){m=g.k;p=g.d;if(!j.P&&m&i.Xb&&p=== -"linear-gradient"){v={ca:[],P:p};for(l={};g=e.next();){m=g.k;p=g.d;if(m&i.Wb&&p===")"){l.color&&v.ca.push(l);v.ca.length>1&&f.p.Eb(j,v);break}if(m&n){if(v.sa||v.zb){g=e.D();if(g.k!==h)break;e.next()}l={color:f.ha(p)};g=e.next();if(g.W())l.db=f.n(g.d);else e.D()}else if(m&i.Ia&&!v.sa&&!l.color&&!v.ca.length)v.sa=new f.Ec(g.d);else if(b(g)&&!v.zb&&!l.color&&!v.ca.length){e.D();v.zb=new f.Ja(e.ma(function(s){return!b(s)},false))}else if(m&h&&p===","){if(l.color){v.ca.push(l);l={}}}else break}}else if(!j.P&& -m&i.URL){j.Ab=p;j.P="image"}else if(b(g)&&!j.$){e.D();j.$=new f.Ja(e.ma(function(s){return!b(s)},false))}else if(m&k)if(p in this.fb&&!j.bb)j.bb=p;else if(p in this.sc&&!j.Wa){j.Wa=p;if((g=e.next())&&g.k&k&&g.d in this.sc)j.ub=g.d;else{j.ub=p;e.D()}}else if(p in this.cd&&!j.bc)j.bc=p;else return null;else if(m&n&&!q.color)q.color=f.ha(p);else if(m&h&&p==="/"&&!j.Xa&&j.$){g=e.next();if(g.k&k&&g.d in this.Ud)j.Xa=new f.Ka(g.d);else if(g=c(g)){m=c(e.next());if(!m){m=g;e.D()}j.Xa=new f.Ka(g,m)}else return null}else if(m& -h&&p===","&&j.P){j.Hb=a.substring(r,e.ch-1);r=e.ch;q.M.push(j);j={}}else return null}if(j.P){j.Hb=a.substring(r);q.M.push(j)}}else this.Bc(f.ja<9?function(){var s=this.eb,o=d[s.S+"X"],u=d[s.S+"Y"],x=d[s.da],y=d[s.z];if(y!=="transparent")q.color=f.ha(y);if(x!=="none")q.M=[{P:"image",Ab:(new f.v(x)).next().d,bb:d[s.T],$:new f.Ja((new f.v(o+" "+u)).all())}]}:function(){var s=this.eb,o=/\s*,\s*/,u=d[s.da].split(o),x=d[s.z],y,z,B,E,D,C;if(x!=="transparent")q.color=f.ha(x);if((E=u.length)&&u[0]!=="none"){x= -d[s.T].split(o);y=d[s.S].split(o);z=d[s.Pa].split(o);B=d[s.Ma].split(o);s=d[s.Sa].split(o);q.M=[];for(o=0;o<E;o++)if((D=u[o])&&D!=="none"){C=s[o].split(" ");q.M.push({Hb:D+" "+x[o]+" "+y[o]+" / "+s[o]+" "+z[o]+" "+B[o],P:"image",Ab:(new f.v(D)).next().d,bb:x[o],$:new f.Ja((new f.v(y[o])).all()),Wa:z[o],ub:B[o],Xa:new f.Ka(C[0],C[1])})}}});return q.color||q.M[0]?q:null},Bc:function(a){var b=f.ja>8,c=this.eb,d=this.e.runtimeStyle,e=d[c.da],g=d[c.z],j=d[c.T],i,h,k,n;if(e)d[c.da]="";if(g)d[c.z]="";if(j)d[c.T]= -"";if(b){i=d[c.Ma];h=d[c.Pa];n=d[c.S];k=d[c.Sa];if(i)d[c.Ma]="";if(h)d[c.Pa]="";if(n)d[c.S]="";if(k)d[c.Sa]=""}a=a.call(this);if(e)d[c.da]=e;if(g)d[c.z]=g;if(j)d[c.T]=j;if(b){if(i)d[c.Ma]=i;if(h)d[c.Pa]=h;if(n)d[c.S]=n;if(k)d[c.Sa]=k}return a},ia:f.B.va(function(){return this.wb()||this.Bc(function(){var a=this.e.currentStyle,b=this.eb;return a[b.z]+" "+a[b.da]+" "+a[b.T]+" "+a[b.S+"X"]+" "+a[b.S+"Y"]})}),wb:f.B.va(function(){var a=this.e;return a.style[this.Fa]||a.currentStyle.getAttribute(this.wa)}), -qc:function(){var a=0;if(f.O<7){a=this.e;a=""+(a.style[f.nb+"PngFix"]||a.currentStyle.getAttribute(f.F+"png-fix"))==="true"}return a},i:f.B.va(function(){return(this.wb()||this.qc())&&!!this.j()})});f.Vb=f.B.ka({wc:["Top","Right","Bottom","Left"],Id:{thin:"1px",medium:"3px",thick:"5px"},la:function(){var a={},b={},c={},d=false,e=true,g=true,j=true;this.Cc(function(){for(var i=this.e.currentStyle,h=0,k,n,m,p,r,t,v;h<4;h++){m=this.wc[h];v=m.charAt(0).toLowerCase();k=b[v]=i["border"+m+"Style"];n=i["border"+ -m+"Color"];m=i["border"+m+"Width"];if(h>0){if(k!==p)g=false;if(n!==r)e=false;if(m!==t)j=false}p=k;r=n;t=m;c[v]=f.ha(n);m=a[v]=f.n(b[v]==="none"?"0":this.Id[m]||m);if(m.a(this.e)>0)d=true}});return d?{J:a,Zd:b,gd:c,ee:j,hd:e,$d:g}:null},ia:f.B.va(function(){var a=this.e,b=a.currentStyle,c;a.tagName in f.Ac&&a.offsetParent.currentStyle.borderCollapse==="collapse"||this.Cc(function(){c=b.borderWidth+"|"+b.borderStyle+"|"+b.borderColor});return c}),Cc:function(a){var b=this.e.runtimeStyle,c=b.borderWidth, -d=b.borderColor;if(c)b.borderWidth="";if(d)b.borderColor="";a=a.call(this);if(c)b.borderWidth=c;if(d)b.borderColor=d;return a}});(function(){f.jb=f.B.ka({wa:"border-radius",Fa:"borderRadius",la:function(b){var c=null,d,e,g,j,i=false;if(b){e=new f.v(b);var h=function(){for(var k=[],n;(g=e.next())&&g.W();){j=f.n(g.d);n=j.ic();if(n<0)return null;if(n>0)i=true;k.push(j)}return k.length>0&&k.length<5?{tl:k[0],tr:k[1]||k[0],br:k[2]||k[0],bl:k[3]||k[1]||k[0]}:null};if(b=h()){if(g){if(g.k&f.v.qa.pa&&g.d=== -"/")d=h()}else d=b;if(i&&b&&d)c={x:b,y:d}}}return c}});var a=f.n("0");a={tl:a,tr:a,br:a,bl:a};f.jb.Dc={x:a,y:a}})();f.Ub=f.B.ka({wa:"border-image",Fa:"borderImage",fb:{stretch:1,round:1,repeat:1,space:1},la:function(a){var b=null,c,d,e,g,j,i,h=0,k=f.v.qa,n=k.na,m=k.oa,p=k.Ra;if(a){c=new f.v(a);b={};for(var r=function(l){return l&&l.k&k.pa&&l.d==="/"},t=function(l){return l&&l.k&n&&l.d==="fill"},v=function(){g=c.ma(function(l){return!(l.k&(m|p))});if(t(c.next())&&!b.fill)b.fill=true;else c.D();if(r(c.next())){h++; -j=c.ma(function(l){return!l.W()&&!(l.k&n&&l.d==="auto")});if(r(c.next())){h++;i=c.ma(function(l){return!l.Ca()})}}else c.D()};a=c.next();){d=a.k;e=a.d;if(d&(m|p)&&!g){c.D();v()}else if(t(a)&&!b.fill){b.fill=true;v()}else if(d&n&&this.fb[e]&&!b.repeat){b.repeat={f:e};if(a=c.next())if(a.k&n&&this.fb[a.d])b.repeat.Ob=a.d;else c.D()}else if(d&k.URL&&!b.src)b.src=e;else return null}if(!b.src||!g||g.length<1||g.length>4||j&&j.length>4||h===1&&j.length<1||i&&i.length>4||h===2&&i.length<1)return null;if(!b.repeat)b.repeat= -{f:"stretch"};if(!b.repeat.Ob)b.repeat.Ob=b.repeat.f;a=function(l,q){return{t:q(l[0]),r:q(l[1]||l[0]),b:q(l[2]||l[0]),l:q(l[3]||l[1]||l[0])}};b.slice=a(g,function(l){return f.n(l.k&m?l.d+"px":l.d)});if(j&&j[0])b.J=a(j,function(l){return l.W()?f.n(l.d):l.d});if(i&&i[0])b.Da=a(i,function(l){return l.Ca()?f.n(l.d):l.d})}return b}});f.Ic=f.B.ka({wa:"box-shadow",Fa:"boxShadow",la:function(a){var b,c=f.n,d=f.v.qa,e;if(a){e=new f.v(a);b={Da:[],Bb:[]};for(a=function(){for(var g,j,i,h,k,n;g=e.next();){i=g.d; -j=g.k;if(j&d.pa&&i===",")break;else if(g.Ca()&&!k){e.D();k=e.ma(function(m){return!m.Ca()})}else if(j&d.z&&!h)h=i;else if(j&d.na&&i==="inset"&&!n)n=true;else return false}g=k&&k.length;if(g>1&&g<5){(n?b.Bb:b.Da).push({fe:c(k[0].d),ge:c(k[1].d),blur:c(k[2]?k[2].d:"0"),Vd:c(k[3]?k[3].d:"0"),color:f.ha(h||"currentColor")});return true}return false};a(););}return b&&(b.Bb.length||b.Da.length)?b:null}});f.Uc=f.B.ka({ia:f.B.va(function(){var a=this.e.currentStyle;return a.visibility+"|"+a.display}),la:function(){var a= -this.e,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,d;b.visibility="";d=a.visibility;b.visibility=c;return{ce:d!=="hidden",nd:a.display!=="none"}},i:function(){return false}});f.u={R:function(a){function b(c,d,e,g){this.e=c;this.s=d;this.g=e;this.parent=g}f.p.Eb(b.prototype,f.u,a);return b},Cb:false,Q:function(){return false},Ea:f.aa,Lb:function(){this.m();this.i()&&this.V()},ib:function(){this.Cb=true},Mb:function(){this.i()?this.V():this.m()},sb:function(a,b){this.vc(a);for(var c=this.ra|| -(this.ra=[]),d=a+1,e=c.length,g;d<e;d++)if(g=c[d])break;c[a]=b;this.I().insertBefore(b,g||null)},za:function(a){var b=this.ra;return b&&b[a]||null},vc:function(a){var b=this.za(a),c=this.Ta;if(b&&c){c.removeChild(b);this.ra[a]=null}},Aa:function(a,b,c,d){var e=this.rb||(this.rb={}),g=e[a];if(!g){g=e[a]=f.p.Za("shape");if(b)g.appendChild(g[b]=f.p.Za(b));if(d){c=this.za(d);if(!c){this.sb(d,doc.createElement("group"+d));c=this.za(d)}}c.appendChild(g);a=g.style;a.position="absolute";a.left=a.top=0;a.behavior= -"url(#default#VML)"}return g},vb:function(a){var b=this.rb,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},kc:function(a){var b=this.e,c=this.s.o(),d=c.h,e=c.f,g,j,i,h,k,n;c=a.x.tl.a(b,d);g=a.y.tl.a(b,e);j=a.x.tr.a(b,d);i=a.y.tr.a(b,e);h=a.x.br.a(b,d);k=a.y.br.a(b,e);n=a.x.bl.a(b,d);a=a.y.bl.a(b,e);d=Math.min(d/(c+j),e/(i+k),d/(n+h),e/(g+a));if(d<1){c*=d;g*=d;j*=d;i*=d;h*=d;k*=d;n*=d;a*=d}return{x:{tl:c,tr:j,br:h,bl:n},y:{tl:g,tr:i,br:k,bl:a}}},ya:function(a,b,c){b=b||1;var d,e, -g=this.s.o();e=g.h*b;g=g.f*b;var j=this.g.G,i=Math.floor,h=Math.ceil,k=a?a.Jb*b:0,n=a?a.Ib*b:0,m=a?a.tb*b:0;a=a?a.Db*b:0;var p,r,t,v,l;if(c||j.i()){d=this.kc(c||j.j());c=d.x.tl*b;j=d.y.tl*b;p=d.x.tr*b;r=d.y.tr*b;t=d.x.br*b;v=d.y.br*b;l=d.x.bl*b;b=d.y.bl*b;e="m"+i(a)+","+i(j)+"qy"+i(c)+","+i(k)+"l"+h(e-p)+","+i(k)+"qx"+h(e-n)+","+i(r)+"l"+h(e-n)+","+h(g-v)+"qy"+h(e-t)+","+h(g-m)+"l"+i(l)+","+h(g-m)+"qx"+i(a)+","+h(g-b)+" x e"}else e="m"+i(a)+","+i(k)+"l"+h(e-n)+","+i(k)+"l"+h(e-n)+","+h(g-m)+"l"+i(a)+ -","+h(g-m)+"xe";return e},I:function(){var a=this.parent.za(this.N),b;if(!a){a=doc.createElement(this.Ya);b=a.style;b.position="absolute";b.top=b.left=0;this.parent.sb(this.N,a)}return a},mc:function(){var a=this.e,b=a.currentStyle,c=a.runtimeStyle,d=a.tagName,e=f.O===6,g;if(e&&(d in f.cc||d==="FIELDSET")||d==="BUTTON"||d==="INPUT"&&a.type in f.Gd){c.borderWidth="";d=this.g.w.wc;for(g=d.length;g--;){e=d[g];c["padding"+e]="";c["padding"+e]=f.n(b["padding"+e]).a(a)+f.n(b["border"+e+"Width"]).a(a)+(f.O!== -8&&g%2?1:0)}c.borderWidth=0}else if(e){if(a.childNodes.length!==1||a.firstChild.tagName!=="ie6-mask"){b=doc.createElement("ie6-mask");d=b.style;d.visibility="visible";for(d.zoom=1;d=a.firstChild;)b.appendChild(d);a.appendChild(b);c.visibility="hidden"}}else c.borderColor="transparent"},ie:function(){},m:function(){this.parent.vc(this.N);delete this.rb;delete this.ra}};f.Rc=f.u.R({i:function(){var a=this.ed;for(var b in a)if(a.hasOwnProperty(b)&&a[b].i())return true;return false},Q:function(){return this.g.Pb.H()}, -ib:function(){if(this.i()){var a=this.jc(),b=a,c;a=a.currentStyle;var d=a.position,e=this.I().style,g=0,j=0;j=this.s.o();var i=j.Hd;if(d==="fixed"&&f.O>6){g=j.x*i;j=j.y*i;b=d}else{do b=b.offsetParent;while(b&&b.currentStyle.position==="static");if(b){c=b.getBoundingClientRect();b=b.currentStyle;g=(j.x-c.left)*i-(parseFloat(b.borderLeftWidth)||0);j=(j.y-c.top)*i-(parseFloat(b.borderTopWidth)||0)}else{b=doc.documentElement;g=(j.x+b.scrollLeft-b.clientLeft)*i;j=(j.y+b.scrollTop-b.clientTop)*i}b="absolute"}e.position= -b;e.left=g;e.top=j;e.zIndex=d==="static"?-1:a.zIndex;this.Cb=true}},Mb:f.aa,Nb:function(){var a=this.g.Pb.j();this.I().style.display=a.ce&&a.nd?"":"none"},Lb:function(){this.i()?this.Nb():this.m()},jc:function(){var a=this.e;return a.tagName in f.Ac?a.offsetParent:a},I:function(){var a=this.Ta,b;if(!a){b=this.jc();a=this.Ta=doc.createElement("css3-container");a.style.direction="ltr";this.Nb();b.parentNode.insertBefore(a,b)}return a},ab:f.aa,m:function(){var a=this.Ta,b;if(a&&(b=a.parentNode))b.removeChild(a); -delete this.Ta;delete this.ra}});f.Fc=f.u.R({N:2,Ya:"background",Q:function(){var a=this.g;return a.C.H()||a.G.H()},i:function(){var a=this.g;return a.q.i()||a.G.i()||a.C.i()||a.ga.i()&&a.ga.j().Bb},V:function(){var a=this.s.o();if(a.h&&a.f){this.od();this.pd()}},od:function(){var a=this.g.C.j(),b=this.s.o(),c=this.e,d=a&&a.color,e,g;if(d&&d.fa()>0){this.lc();a=this.Aa("bgColor","fill",this.I(),1);e=b.h;b=b.f;a.stroked=false;a.coordsize=e*2+","+b*2;a.coordorigin="1,1";a.path=this.ya(null,2);g=a.style; -g.width=e;g.height=b;a.fill.color=d.U(c);c=d.fa();if(c<1)a.fill.opacity=c}else this.vb("bgColor")},pd:function(){var a=this.g.C.j(),b=this.s.o();a=a&&a.M;var c,d,e,g,j;if(a){this.lc();d=b.h;e=b.f;for(j=a.length;j--;){b=a[j];c=this.Aa("bgImage"+j,"fill",this.I(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=d*2+","+e*2;c.coordorigin="1,1";c.path=this.ya(0,2);g=c.style;g.width=d;g.height=e;if(b.P==="linear-gradient")this.bd(c,b);else{c.fill.src=b.Ab;this.Nd(c,j)}}}for(j=a?a.length: -0;this.vb("bgImage"+j++););},Nd:function(a,b){var c=this;f.p.Rb(a.fill.src,function(d){var e=c.e,g=c.s.o(),j=g.h;g=g.f;if(j&&g){var i=a.fill,h=c.g,k=h.w.j(),n=k&&k.J;k=n?n.t.a(e):0;var m=n?n.r.a(e):0,p=n?n.b.a(e):0;n=n?n.l.a(e):0;h=h.C.j().M[b];e=h.$?h.$.coords(e,j-d.h-n-m,g-d.f-k-p):{x:0,y:0};h=h.bb;p=m=0;var r=j+1,t=g+1,v=f.O===8?0:1;n=Math.round(e.x)+n+0.5;k=Math.round(e.y)+k+0.5;i.position=n/j+","+k/g;i.size.x=1;i.size=d.h+"px,"+d.f+"px";if(h&&h!=="repeat"){if(h==="repeat-x"||h==="no-repeat"){m= -k+1;t=k+d.f+v}if(h==="repeat-y"||h==="no-repeat"){p=n+1;r=n+d.h+v}a.style.clip="rect("+m+"px,"+r+"px,"+t+"px,"+p+"px)"}}})},bd:function(a,b){var c=this.e,d=this.s.o(),e=d.h,g=d.f;a=a.fill;d=b.ca;var j=d.length,i=Math.PI,h=f.Na,k=h.tc,n=h.dc;b=h.gc(c,e,g,b);h=b.sa;var m=b.xc,p=b.yc,r=b.Wd,t=b.Xd,v=b.rd,l=b.sd,q=b.kd,s=b.ld;b=b.rc;e=h%90?Math.atan2(q*e/g,s)/i*180:h+90;e+=180;e%=360;v=k(r,t,h,v,l);g=n(r,t,v[0],v[1]);i=[];v=k(m,p,h,r,t);n=n(m,p,v[0],v[1])/g*100;k=[];for(h=0;h<j;h++)k.push(d[h].db?d[h].db.a(c, -b):h===0?0:h===j-1?b:null);for(h=1;h<j;h++){if(k[h]===null){m=k[h-1];b=h;do p=k[++b];while(p===null);k[h]=m+(p-m)/(b-h+1)}k[h]=Math.max(k[h],k[h-1])}for(h=0;h<j;h++)i.push(n+k[h]/g*100+"% "+d[h].color.U(c));a.angle=e;a.type="gradient";a.method="sigma";a.color=d[0].color.U(c);a.color2=d[j-1].color.U(c);if(a.colors)a.colors.value=i.join(",");else a.colors=i.join(",")},lc:function(){var a=this.e.runtimeStyle;a.backgroundImage="url(about:blank)";a.backgroundColor="transparent"},m:function(){f.u.m.call(this); -var a=this.e.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});f.Gc=f.u.R({N:4,Ya:"border",Q:function(){var a=this.g;return a.w.H()||a.G.H()},i:function(){var a=this.g;return a.G.i()&&!a.q.i()&&a.w.i()},V:function(){var a=this.e,b=this.g.w.j(),c=this.s.o(),d=c.h;c=c.f;var e,g,j,i,h;if(b){this.mc();b=this.wd(2);i=0;for(h=b.length;i<h;i++){j=b[i];e=this.Aa("borderPiece"+i,j.stroke?"stroke":"fill",this.I());e.coordsize=d*2+","+c*2;e.coordorigin="1,1";e.path=j.path;g=e.style;g.width=d;g.height=c; -e.filled=!!j.fill;e.stroked=!!j.stroke;if(j.stroke){e=e.stroke;e.weight=j.Qb+"px";e.color=j.color.U(a);e.dashstyle=j.stroke==="dashed"?"2 2":j.stroke==="dotted"?"1 1":"solid";e.linestyle=j.stroke==="double"&&j.Qb>2?"ThinThin":"Single"}else e.fill.color=j.fill.U(a)}for(;this.vb("borderPiece"+i++););}},wd:function(a){var b=this.e,c,d,e,g=this.g.w,j=[],i,h,k,n,m=Math.round,p,r,t;if(g.i()){c=g.j();g=c.J;r=c.Zd;t=c.gd;if(c.ee&&c.$d&&c.hd){if(t.t.fa()>0){c=g.t.a(b);k=c/2;j.push({path:this.ya({Jb:k,Ib:k, -tb:k,Db:k},a),stroke:r.t,color:t.t,Qb:c})}}else{a=a||1;c=this.s.o();d=c.h;e=c.f;c=m(g.t.a(b));k=m(g.r.a(b));n=m(g.b.a(b));b=m(g.l.a(b));var v={t:c,r:k,b:n,l:b};b=this.g.G;if(b.i())p=this.kc(b.j());i=Math.floor;h=Math.ceil;var l=function(o,u){return p?p[o][u]:0},q=function(o,u,x,y,z,B){var E=l("x",o),D=l("y",o),C=o.charAt(1)==="r";o=o.charAt(0)==="b";return E>0&&D>0?(B?"al":"ae")+(C?h(d-E):i(E))*a+","+(o?h(e-D):i(D))*a+","+(i(E)-u)*a+","+(i(D)-x)*a+","+y*65535+","+2949075*(z?1:-1):(B?"m":"l")+(C?d- -u:u)*a+","+(o?e-x:x)*a},s=function(o,u,x,y){var z=o==="t"?i(l("x","tl"))*a+","+h(u)*a:o==="r"?h(d-u)*a+","+i(l("y","tr"))*a:o==="b"?h(d-l("x","br"))*a+","+i(e-u)*a:i(u)*a+","+h(e-l("y","bl"))*a;o=o==="t"?h(d-l("x","tr"))*a+","+h(u)*a:o==="r"?h(d-u)*a+","+h(e-l("y","br"))*a:o==="b"?i(l("x","bl"))*a+","+i(e-u)*a:i(u)*a+","+i(l("y","tl"))*a;return x?(y?"m"+o:"")+"l"+z:(y?"m"+z:"")+"l"+o};b=function(o,u,x,y,z,B){var E=o==="l"||o==="r",D=v[o],C,F;if(D>0&&r[o]!=="none"&&t[o].fa()>0){C=v[E?o:u];u=v[E?u: -o];F=v[E?o:x];x=v[E?x:o];if(r[o]==="dashed"||r[o]==="dotted"){j.push({path:q(y,C,u,B+45,0,1)+q(y,0,0,B,1,0),fill:t[o]});j.push({path:s(o,D/2,0,1),stroke:r[o],Qb:D,color:t[o]});j.push({path:q(z,F,x,B,0,1)+q(z,0,0,B-45,1,0),fill:t[o]})}else j.push({path:q(y,C,u,B+45,0,1)+s(o,D,0,0)+q(z,F,x,B,0,0)+(r[o]==="double"&&D>2?q(z,F-i(F/3),x-i(x/3),B-45,1,0)+s(o,h(D/3*2),1,0)+q(y,C-i(C/3),u-i(u/3),B,1,0)+"x "+q(y,i(C/3),i(u/3),B+45,0,1)+s(o,i(D/3),1,0)+q(z,i(F/3),i(x/3),B,0,0):"")+q(z,0,0,B-45,1,0)+s(o,0,1, -0)+q(y,0,0,B,1,0),fill:t[o]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l","b","t","bl","tl",-180)}}return j},m:function(){if(this.ec||!this.g.q.i())this.e.runtimeStyle.borderColor="";f.u.m.call(this)}});f.Tb=f.u.R({N:5,Md:["t","tr","r","br","b","bl","l","tl","c"],Q:function(){return this.g.q.H()},i:function(){return this.g.q.i()},V:function(){this.I();var a=this.g.q.j(),b=this.g.w.j(),c=this.s.o(),d=this.e,e=this.uc;f.p.Rb(a.src,function(g){function j(s, -o,u,x,y){s=e[s].style;var z=Math.max;s.width=z(o,0);s.height=z(u,0);s.left=x;s.top=y}function i(s,o,u){for(var x=0,y=s.length;x<y;x++)e[s[x]].imagedata[o]=u}var h=c.h,k=c.f,n=f.n("0"),m=a.J||(b?b.J:{t:n,r:n,b:n,l:n});n=m.t.a(d);var p=m.r.a(d),r=m.b.a(d);m=m.l.a(d);var t=a.slice,v=t.t.a(d),l=t.r.a(d),q=t.b.a(d);t=t.l.a(d);j("tl",m,n,0,0);j("t",h-m-p,n,m,0);j("tr",p,n,h-p,0);j("r",p,k-n-r,h-p,n);j("br",p,r,h-p,k-r);j("b",h-m-p,r,m,k-r);j("bl",m,r,0,k-r);j("l",m,k-n-r,0,n);j("c",h-m-p,k-n-r,m,n);i(["tl", -"t","tr"],"cropBottom",(g.f-v)/g.f);i(["tl","l","bl"],"cropRight",(g.h-t)/g.h);i(["bl","b","br"],"cropTop",(g.f-q)/g.f);i(["tr","r","br"],"cropLeft",(g.h-l)/g.h);i(["l","r","c"],"cropTop",v/g.f);i(["l","r","c"],"cropBottom",q/g.f);i(["t","b","c"],"cropLeft",t/g.h);i(["t","b","c"],"cropRight",l/g.h);e.c.style.display=a.fill?"":"none"},this)},I:function(){var a=this.parent.za(this.N),b,c,d,e=this.Md,g=e.length;if(!a){a=doc.createElement("border-image");b=a.style;b.position="absolute";this.uc={};for(d= -0;d<g;d++){c=this.uc[e[d]]=f.p.Za("rect");c.appendChild(f.p.Za("imagedata"));b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.g.q.j().src;c.stroked=false;c.filled=false;a.appendChild(c)}this.parent.sb(this.N,a)}return a},Ea:function(){if(this.i()){var a=this.e,b=a.runtimeStyle,c=this.g.q.j().J;b.borderStyle="solid";if(c){b.borderTopWidth=c.t.a(a)+"px";b.borderRightWidth=c.r.a(a)+"px";b.borderBottomWidth=c.b.a(a)+"px";b.borderLeftWidth=c.l.a(a)+"px"}this.mc()}}, -m:function(){var a=this.e.runtimeStyle;a.borderStyle="";if(this.ec||!this.g.w.i())a.borderColor=a.borderWidth="";f.u.m.call(this)}});f.Hc=f.u.R({N:1,Ya:"outset-box-shadow",Q:function(){var a=this.g;return a.ga.H()||a.G.H()},i:function(){var a=this.g.ga;return a.i()&&a.j().Da[0]},V:function(){function a(C,F,O,H,M,P,I){C=b.Aa("shadow"+C+F,"fill",d,j-C);F=C.fill;C.coordsize=n*2+","+m*2;C.coordorigin="1,1";C.stroked=false;C.filled=true;F.color=M.U(c);if(P){F.type="gradienttitle";F.color2=F.color;F.opacity= -0}C.path=I;l=C.style;l.left=O;l.top=H;l.width=n;l.height=m;return C}var b=this,c=this.e,d=this.I(),e=this.g,g=e.ga.j().Da;e=e.G.j();var j=g.length,i=j,h,k=this.s.o(),n=k.h,m=k.f;k=f.O===8?1:0;for(var p=["tl","tr","br","bl"],r,t,v,l,q,s,o,u,x,y,z,B,E,D;i--;){t=g[i];q=t.fe.a(c);s=t.ge.a(c);h=t.Vd.a(c);o=t.blur.a(c);t=t.color;u=-h-o;if(!e&&o)e=f.jb.Dc;u=this.ya({Jb:u,Ib:u,tb:u,Db:u},2,e);if(o){x=(h+o)*2+n;y=(h+o)*2+m;z=x?o*2/x:0;B=y?o*2/y:0;if(o-h>n/2||o-h>m/2)for(h=4;h--;){r=p[h];E=r.charAt(0)==="b"; -D=r.charAt(1)==="r";r=a(i,r,q,s,t,o,u);v=r.fill;v.focusposition=(D?1-z:z)+","+(E?1-B:B);v.focussize="0,0";r.style.clip="rect("+((E?y/2:0)+k)+"px,"+(D?x:x/2)+"px,"+(E?y:y/2)+"px,"+((D?x/2:0)+k)+"px)"}else{r=a(i,"",q,s,t,o,u);v=r.fill;v.focusposition=z+","+B;v.focussize=1-z*2+","+(1-B*2)}}else{r=a(i,"",q,s,t,o,u);q=t.fa();if(q<1)r.fill.opacity=q}}}});f.Pc=f.u.R({N:6,Ya:"imgEl",Q:function(){var a=this.g;return this.e.src!==this.Xc||a.G.H()},i:function(){var a=this.g;return a.G.i()||a.C.qc()},V:function(){this.Xc= -j;this.Cd();var a=this.Aa("img","fill",this.I()),b=a.fill,c=this.s.o(),d=c.h;c=c.f;var e=this.g.w.j(),g=e&&e.J;e=this.e;var j=e.src,i=Math.round,h=e.currentStyle,k=f.n;if(!g||f.O<7){g=f.n("0");g={t:g,r:g,b:g,l:g}}a.stroked=false;b.type="frame";b.src=j;b.position=(d?0.5/d:0)+","+(c?0.5/c:0);a.coordsize=d*2+","+c*2;a.coordorigin="1,1";a.path=this.ya({Jb:i(g.t.a(e)+k(h.paddingTop).a(e)),Ib:i(g.r.a(e)+k(h.paddingRight).a(e)),tb:i(g.b.a(e)+k(h.paddingBottom).a(e)),Db:i(g.l.a(e)+k(h.paddingLeft).a(e))}, -2);a=a.style;a.width=d;a.height=c},Cd:function(){this.e.runtimeStyle.filter="alpha(opacity=0)"},m:function(){f.u.m.call(this);this.e.runtimeStyle.filter=""}});f.Oc=f.u.R({ib:f.aa,Mb:f.aa,Nb:f.aa,Lb:f.aa,Ld:/^,+|,+$/g,Fd:/,+/g,gb:function(a,b){(this.pb||(this.pb=[]))[a]=b||void 0},ab:function(){var a=this.pb,b;if(a&&(b=a.join(",").replace(this.Ld,"").replace(this.Fd,","))!==this.Wc)this.Wc=this.e.runtimeStyle.background=b},m:function(){this.e.runtimeStyle.background="";delete this.pb}});f.Mc=f.u.R({ua:1, -Q:function(){return this.g.C.H()},i:function(){var a=this.g;return a.C.i()||a.q.i()},V:function(){var a=this.g.C.j(),b,c,d=0,e,g;if(a){b=[];if(c=a.M)for(;e=c[d++];)if(e.P==="linear-gradient"){g=this.vd(e.Wa);g=(e.Xa||f.Ka.Kc).a(this.e,g.h,g.f,g.h,g.f);b.push("url(data:image/svg+xml,"+escape(this.xd(e,g.h,g.f))+") "+this.dd(e.$)+" / "+g.h+"px "+g.f+"px "+(e.bc||"")+" "+(e.Wa||"")+" "+(e.ub||""))}else b.push(e.Hb);a.color&&b.push(a.color.Y);this.parent.gb(this.ua,b.join(","))}},dd:function(a){return a? -a.X.map(function(b){return b.d}).join(" "):"0 0"},vd:function(a){var b=this.e,c=this.s.o(),d=c.h;c=c.f;var e;if(a!=="border-box")if((e=this.g.w.j())&&(e=e.J)){d-=e.l.a(b)+e.l.a(b);c-=e.t.a(b)+e.b.a(b)}if(a==="content-box"){a=f.n;e=b.currentStyle;d-=a(e.paddingLeft).a(b)+a(e.paddingRight).a(b);c-=a(e.paddingTop).a(b)+a(e.paddingBottom).a(b)}return{h:d,f:c}},xd:function(a,b,c){var d=this.e,e=a.ca,g=e.length,j=f.Na.gc(d,b,c,a);a=j.xc;var i=j.yc,h=j.td,k=j.ud;j=j.rc;var n,m,p,r,t;n=[];for(m=0;m<g;m++)n.push(e[m].db? -e[m].db.a(d,j):m===0?0:m===g-1?j:null);for(m=1;m<g;m++)if(n[m]===null){r=n[m-1];p=m;do t=n[++p];while(t===null);n[m]=r+(t-r)/(p-m+1)}b=['<svg width="'+b+'" height="'+c+'" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="'+a/b*100+'%" y1="'+i/c*100+'%" x2="'+h/b*100+'%" y2="'+k/c*100+'%">'];for(m=0;m<g;m++)b.push('<stop offset="'+n[m]/j+'" stop-color="'+e[m].color.U(d)+'" stop-opacity="'+e[m].color.fa()+'"/>');b.push('</linearGradient></defs><rect width="100%" height="100%" fill="url(#g)"/></svg>'); -return b.join("")},m:function(){this.parent.gb(this.ua)}});f.Nc=f.u.R({T:"repeat",Sc:"stretch",Qc:"round",ua:0,Q:function(){return this.g.q.H()},i:function(){return this.g.q.i()},V:function(){var a=this,b=a.g.q.j(),c=a.g.w.j(),d=a.s.o(),e=b.repeat,g=e.f,j=e.Ob,i=a.e,h=0;f.p.Rb(b.src,function(k){function n(Q,R,U,V,W,Y,X,S,w,A){K.push('<pattern patternUnits="userSpaceOnUse" id="pattern'+G+'" x="'+(g===l?Q+U/2-w/2:Q)+'" y="'+(j===l?R+V/2-A/2:R)+'" width="'+w+'" height="'+A+'"><svg width="'+w+'" height="'+ -A+'" viewBox="'+W+" "+Y+" "+X+" "+S+'" preserveAspectRatio="none"><image xlink:href="'+v+'" x="0" y="0" width="'+r+'" height="'+t+'" /></svg></pattern>');J.push('<rect x="'+Q+'" y="'+R+'" width="'+U+'" height="'+V+'" fill="url(#pattern'+G+')" />');G++}var m=d.h,p=d.f,r=k.h,t=k.f,v=a.Dd(b.src,r,t),l=a.T,q=a.Sc;k=a.Qc;var s=Math.ceil,o=f.n("0"),u=b.J||(c?c.J:{t:o,r:o,b:o,l:o});o=u.t.a(i);var x=u.r.a(i),y=u.b.a(i);u=u.l.a(i);var z=b.slice,B=z.t.a(i),E=z.r.a(i),D=z.b.a(i);z=z.l.a(i);var C=m-u-x,F=p-o- -y,O=r-z-E,H=t-B-D,M=g===q?C:O*o/B,P=j===q?F:H*x/E,I=g===q?C:O*y/D;q=j===q?F:H*u/z;var K=[],J=[],G=0;if(g===k){M-=(M-(C%M||M))/s(C/M);I-=(I-(C%I||I))/s(C/I)}if(j===k){P-=(P-(F%P||P))/s(F/P);q-=(q-(F%q||q))/s(F/q)}k=['<svg width="'+m+'" height="'+p+'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'];n(0,0,u,o,0,0,z,B,u,o);n(u,0,C,o,z,0,O,B,M,o);n(m-x,0,x,o,r-E,0,E,B,x,o);n(0,o,u,F,0,B,z,H,u,q);if(b.fill)n(u,o,C,F,z,B,O,H,M||I||O,q||P||H);n(m-x,o,x,F,r-E,B,E,H,x,P);n(0, -p-y,u,y,0,t-D,z,D,u,y);n(u,p-y,C,y,z,t-D,O,D,I,y);n(m-x,p-y,x,y,r-E,t-D,E,D,x,y);k.push("<defs>"+K.join("\n")+"</defs>"+J.join("\n")+"</svg>");a.parent.gb(a.ua,"url(data:image/svg+xml,"+escape(k.join(""))+") no-repeat border-box border-box");h&&a.parent.ab()},a);h=1},Dd:function(){var a={};return function(b,c,d){var e=a[b],g;if(!e){e=new Image;g=doc.createElement("canvas");e.src=b;g.width=c;g.height=d;g.getContext("2d").drawImage(e,0,0);e=a[b]=g.toDataURL()}return e}}(),Ea:f.Tb.prototype.Ea,m:function(){var a= -this.e.runtimeStyle;this.parent.gb(this.ua);a.borderColor=a.borderStyle=a.borderWidth=""}});f.kb=function(){function a(l,q){l.className+=" "+q}function b(l){var q=v.slice.call(arguments,1),s=q.length;setTimeout(function(){if(l)for(;s--;)a(l,q[s])},0)}function c(l){var q=v.slice.call(arguments,1),s=q.length;setTimeout(function(){if(l)for(;s--;){var o=q[s];o=t[o]||(t[o]=new RegExp("\\b"+o+"\\b","g"));l.className=l.className.replace(o,"")}},0)}function d(l){function q(){if(!U){var w,A,L=f.ja,T=l.currentStyle, -N=T.getAttribute(g)==="true",da=T.getAttribute(i)!=="false",ea=T.getAttribute(h)!=="false";S=T.getAttribute(j);S=L>7?S!=="false":S==="true";if(!R){R=1;l.runtimeStyle.zoom=1;T=l;for(var fa=1;T=T.previousSibling;)if(T.nodeType===1){fa=0;break}fa&&a(l,p)}J.cb();if(N&&(A=J.o())&&(w=doc.documentElement||doc.body)&&(A.y>w.clientHeight||A.x>w.clientWidth||A.y+A.f<0||A.x+A.h<0)){if(!Y){Y=1;f.mb.ba(q)}}else{U=1;Y=R=0;f.mb.Ha(q);if(L===9){G={C:new f.Sb(l),q:new f.Ub(l),w:new f.Vb(l)};Q=[G.C,G.q];K=new f.Oc(l, -J,G);w=[new f.Mc(l,J,G,K),new f.Nc(l,J,G,K)]}else{G={C:new f.Sb(l),w:new f.Vb(l),q:new f.Ub(l),G:new f.jb(l),ga:new f.Ic(l),Pb:new f.Uc(l)};Q=[G.C,G.w,G.q,G.G,G.ga,G.Pb];K=new f.Rc(l,J,G);w=[new f.Hc(l,J,G,K),new f.Fc(l,J,G,K),new f.Gc(l,J,G,K),new f.Tb(l,J,G,K)];l.tagName==="IMG"&&w.push(new f.Pc(l,J,G,K));K.ed=w}I=[K].concat(w);if(w=l.currentStyle.getAttribute(f.F+"watch-ancestors")){w=parseInt(w,10);A=0;for(N=l.parentNode;N&&(w==="NaN"||A++<w);){H(N,"onpropertychange",C);H(N,"onmouseenter",x); -H(N,"onmouseleave",y);H(N,"onmousedown",z);if(N.tagName in f.fc){H(N,"onfocus",E);H(N,"onblur",D)}N=N.parentNode}}if(S){f.Oa.ba(o);f.Oa.Rd()}o(1)}if(!V){V=1;L<9&&H(l,"onmove",s);H(l,"onresize",s);H(l,"onpropertychange",u);ea&&H(l,"onmouseenter",x);if(ea||da)H(l,"onmouseleave",y);da&&H(l,"onmousedown",z);if(l.tagName in f.fc){H(l,"onfocus",E);H(l,"onblur",D)}f.Qa.ba(s);f.L.ba(M)}J.hb()}}function s(){J&&J.Ad()&&o()}function o(w){if(!X)if(U){var A,L=I.length;F();for(A=0;A<L;A++)I[A].Ea();if(w||J.Od())for(A= -0;A<L;A++)I[A].ib();if(w||J.Td())for(A=0;A<L;A++)I[A].Mb();K.ab();O()}else R||q()}function u(){var w,A=I.length,L;w=event;if(!X&&!(w&&w.propertyName in r))if(U){F();for(w=0;w<A;w++)I[w].Ea();for(w=0;w<A;w++){L=I[w];L.Cb||L.ib();L.Q()&&L.Lb()}K.ab();O()}else R||q()}function x(){b(l,k)}function y(){c(l,k,n)}function z(){b(l,n);f.lb.ba(B)}function B(){c(l,n);f.lb.Ha(B)}function E(){b(l,m)}function D(){c(l,m)}function C(){var w=event.propertyName;if(w==="className"||w==="id")u()}function F(){J.cb();for(var w= -Q.length;w--;)Q[w].cb()}function O(){for(var w=Q.length;w--;)Q[w].hb();J.hb()}function H(w,A,L){w.attachEvent(A,L);W.push([w,A,L])}function M(){if(V){for(var w=W.length,A;w--;){A=W[w];A[0].detachEvent(A[1],A[2])}f.L.Ha(M);V=0;W=[]}}function P(){if(!X){var w,A;M();X=1;if(I){w=0;for(A=I.length;w<A;w++){I[w].ec=1;I[w].m()}}S&&f.Oa.Ha(o);f.Qa.Ha(o);I=J=G=Q=l=null}}var I,K,J=new ha(l),G,Q,R,U,V,W=[],Y,X,S;this.Ed=q;this.update=o;this.m=P;this.qd=l}var e={},g=f.F+"lazy-init",j=f.F+"poll",i=f.F+"track-active", -h=f.F+"track-hover",k=f.La+"hover",n=f.La+"active",m=f.La+"focus",p=f.La+"first-child",r={background:1,bgColor:1,display:1},t={},v=[];d.yd=function(l){var q=f.p.Ba(l);return e[q]||(e[q]=new d(l))};d.m=function(l){l=f.p.Ba(l);var q=e[l];if(q){q.m();delete e[l]}};d.md=function(){var l=[],q;if(e){for(var s in e)if(e.hasOwnProperty(s)){q=e[s];l.push(q.qd);q.m()}e={}}return l};return d}();f.supportsVML=f.zc;f.attach=function(a){f.ja<10&&f.zc&&f.kb.yd(a).Ed()};f.detach=function(a){f.kb.m(a)}}; -var $=element;function init(){if(doc.media!=="print"){var a=window.PIE;a&&a.attach($)}}function cleanup(){if(doc.media!=="print"){var a=window.PIE;if(a){a.detach($);$=0}}}$.readyState==="complete"&&init(); -</script> -</PUBLIC:COMPONENT> diff --git a/assets/js/ie/html5shiv.js b/assets/js/ie/html5shiv.js deleted file mode 100755 index dcf351c..0000000 --- a/assets/js/ie/html5shiv.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed -*/ -(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); -a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>"; -c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| -"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); -for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document); diff --git a/assets/js/ie/respond.min.js b/assets/js/ie/respond.min.js deleted file mode 100755 index e8d6207..0000000 --- a/assets/js/ie/respond.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/*! Respond.js v1.4.2: min/max-width media query polyfill - * Copyright 2014 Scott Jehl - * Licensed under MIT - * http://j.mp/respondjs */ - -!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b<t.length;b++){var c=t[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!p[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(w(c.styleSheet.rawCssText,e,f),p[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!s||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}x()};y(),c.update=y,c.getEmValue=u,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
\ No newline at end of file diff --git a/assets/js/jquery.min.js b/assets/js/jquery.min.js index 0f60b7b..0f60b7b 100755..100644 --- a/assets/js/jquery.min.js +++ b/assets/js/jquery.min.js diff --git a/assets/js/jquery.scrolly.min.js b/assets/js/jquery.scrolly.min.js deleted file mode 100755 index 5d08850..0000000 --- a/assets/js/jquery.scrolly.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/* jquery.scrolly v1.0.0-dev | (c) @ajlkn | MIT licensed */ -(function(e){function u(s,o){var u,a,f;if((u=e(s))[t]==0)return n;a=u[i]()[r];switch(o.anchor){case"middle":f=a-(e(window).height()-u.outerHeight())/2;break;default:case r:f=Math.max(a,0)}return typeof o[i]=="function"?f-=o[i]():f-=o[i],f}var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);e.fn.scrolly=function(i){var o,a,f,l,c=e(this);if(this[t]==0)return c;if(this[t]>1){for(o=0;o<this[t];o++)e(this[o]).scrolly(i);return c}l=n,f=c.attr("href");if(f.charAt(0)!="#"||f[t]<2)return c;a=jQuery.extend({anchor:r,easing:"swing",offset:0,parent:e("body,html"),pollOnce:!1,speed:1e3},i),a.pollOnce&&(l=u(f,a)),c.off(s).on(s,function(e){var t=l!==n?l:u(f,a);t!==n&&(e.preventDefault(),a.parent.stop().animate({scrollTop:t},a.speed,a.easing))})}})(jQuery);
\ No newline at end of file diff --git a/assets/js/jquery.scrollzer.min.js b/assets/js/jquery.scrollzer.min.js deleted file mode 100755 index 1472d5f..0000000 --- a/assets/js/jquery.scrollzer.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/* jquery.scrollzer v0.2 | (c) @ajlkn | MIT licensed */ -jQuery.scrollzer=function(e,t){var r=jQuery(window),a=jQuery(document);r.load(function(){var i,o,s,l,n,c,u=jQuery.extend({activeClassName:"active",suffix:"-link",pad:50,firstHack:!1,lastHack:!1},t),d=[],f=jQuery();for(i in e)s=jQuery("#"+e[i]),l=jQuery("#"+e[i]+u.suffix),s.length<1||l.length<1||(o={},o.link=l,o.object=s,d[e[i]]=o,f=f.add(l));var v,h=function(){var e;for(i in d)e=d[i],e.start=Math.ceil(e.object.offset().top)-u.pad,e.end=e.start+Math.ceil(e.object.innerHeight());r.trigger("scroll")};r.resize(function(){window.clearTimeout(v),v=window.setTimeout(h,250)});var j,m=function(){f.removeClass("scrollzer-locked")};r.scroll(function(e){var t=0,o=!1;n=r.scrollTop(),window.clearTimeout(j),j=window.setTimeout(m,250);for(i in d)i!=c&&n>=d[i].start&&n<=d[i].end&&(c=i,o=!0),t++;u.lastHack&&n+r.height()>=a.height()&&(c=i,o=!0),o&&!f.hasClass("scrollzer-locked")&&(f.removeClass(u.activeClassName),d[c].link.addClass(u.activeClassName))}),r.trigger("resize")})}; diff --git a/assets/js/main.js b/assets/js/main.js index 3601ce3..d13cd05 100755..100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,113 +1,766 @@ -/* - Read Only by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -(function($) { - - skel.breakpoints({ - xlarge: '(max-width: 1680px)', - large: '(max-width: 1280px)', - medium: '(max-width: 1024px)', - small: '(max-width: 736px)', - xsmall: '(max-width: 480px)' - }); - - $(function() { - - var $body = $('body'), - $header = $('#header'), - $nav = $('#nav'), $nav_a = $nav.find('a'), - $wrapper = $('#wrapper'); - - // Fix: Placeholder polyfill. - $('form').placeholder(); - - // Prioritize "important" elements on medium. - skel.on('+medium -medium', function() { - $.prioritize( - '.important\\28 medium\\29', - skel.breakpoint('medium').active - ); - }); - - // Header. - var ids = []; - - // Set up nav items. - $nav_a - .scrolly({ offset: 44 }) - .on('click', function(event) { - - var $this = $(this), - href = $this.attr('href'); - - // Not an internal link? Bail. - if (href.charAt(0) != '#') - return; - - // Prevent default behavior. - event.preventDefault(); - - // Remove active class from all links and mark them as locked (so scrollzer leaves them alone). - $nav_a - .removeClass('active') - .addClass('scrollzer-locked'); - - // Set active class on this link. - $this.addClass('active'); - - }) - .each(function() { - - var $this = $(this), - href = $this.attr('href'), - id; - - // Not an internal link? Bail. - if (href.charAt(0) != '#') - return; - - // Add to scrollzer ID list. - id = href.substring(1); - $this.attr('id', id + '-link'); - ids.push(id); - - }); - - // Initialize scrollzer. - $.scrollzer(ids, { pad: 300, lastHack: true }); - - // Off-Canvas Navigation. - - // Title Bar. - $( - '<div id="titleBar">' + - '<a href="#header" class="toggle"></a>' + - '<span class="title">' + $('#logo').html() + '</span>' + - '</div>' - ) - .appendTo($body); - - // Header. - $('#header') - .panel({ - delay: 500, - hideOnClick: true, - hideOnSwipe: true, - resetScroll: true, - resetForms: true, - side: 'right', - target: $body, - visibleClass: 'header-visible' - }); - - // Fix: Remove navPanel transitions on WP<10 (poor/buggy performance). - if (skel.vars.os == 'wp' && skel.vars.osVersion < 10) - $('#titleBar, #header, #wrapper') - .css('transition', 'none'); - - }); - +/*
+ Ethereal by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+(function($) {
+
+ // Settings.
+ var settings = {
+
+ // Keyboard shortcuts.
+ keyboardShortcuts: {
+
+ // If true, enables scrolling via keyboard shortcuts.
+ enabled: true,
+
+ // Sets the distance to scroll when using the left/right arrow keys.
+ distance: 50
+
+ },
+
+ // Scroll wheel.
+ scrollWheel: {
+
+ // If true, enables scrolling via the scroll wheel.
+ enabled: true,
+
+ // Sets the scroll wheel factor. (Ideally) a value between 0 and 1 (lower = slower scroll, higher = faster scroll).
+ factor: 1
+
+ },
+
+ // Scroll zones.
+ scrollZones: {
+
+ // If true, enables scrolling via scroll zones on the left/right edges of the scren.
+ enabled: true,
+
+ // Sets the speed at which the page scrolls when a scroll zone is active (higher = faster scroll, lower = slower scroll).
+ speed: 15
+
+ },
+
+ // Dragging.
+ dragging: {
+
+ // If true, enables scrolling by dragging the main wrapper with the mouse.
+ enabled: true,
+
+ // Sets the momentum factor. Must be a value between 0 and 1 (lower = less momentum, higher = more momentum, 0 = disable momentum scrolling).
+ momentum: 0.875,
+
+ // Sets the drag threshold (in pixels).
+ threshold: 10
+
+ },
+
+ // If set to a valid selector , prevents key/mouse events from bubbling from these elements.
+ excludeSelector: 'input:focus, select:focus, textarea:focus, audio, video, iframe',
+
+ // Link scroll speed.
+ linkScrollSpeed: 1000
+
+ };
+
+ // Skel.
+ skel.breakpoints({
+ xlarge: '(max-width: 1680px)',
+ large: '(max-width: 1280px)',
+ medium: '(max-width: 980px)',
+ small: '(max-width: 736px)',
+ xsmall: '(max-width: 480px)',
+ xxsmall: '(max-width: 360px)',
+ short: '(min-aspect-ratio: 16/7)',
+ xshort: '(min-aspect-ratio: 16/6)'
+ });
+
+ // Ready event.
+ $(function() {
+
+ // Vars.
+ var $window = $(window),
+ $document = $(document),
+ $body = $('body'),
+ $html = $('html'),
+ $bodyHtml = $('body,html'),
+ $wrapper = $('#wrapper');
+
+ // Disable animations/transitions until the page has loaded.
+ $body.addClass('is-loading');
+
+ $window.on('load', function() {
+ window.setTimeout(function() {
+ $body.removeClass('is-loading');
+ }, 100);
+ });
+
+ // Tweaks/fixes.
+
+ // Mobile: Revert to native scrolling.
+ if (skel.vars.mobile) {
+
+ // Disable all scroll-assist features.
+ settings.keyboardShortcuts.enabled = false;
+ settings.scrollWheel.enabled = false;
+ settings.scrollZones.enabled = false;
+ settings.dragging.enabled = false;
+
+ // Re-enable overflow on body.
+ $body.css('overflow-x', 'auto');
+
+ }
+
+ // IE: Various fixes.
+ if (skel.vars.browser == 'ie') {
+
+ // Enable IE mode.
+ $body.addClass('is-ie');
+
+ // Page widths.
+ $window
+ .on('load resize', function() {
+
+ // Calculate wrapper width.
+ var w = 0;
+
+ $wrapper.children().each(function() {
+ w += $(this).width();
+ });
+
+ // Apply to page.
+ $html.css('width', w + 'px');
+
+ });
+
+ }
+
+ // Polyfill: Object fit.
+ if (!skel.canUse('object-fit')) {
+
+ $('.image[data-position]').each(function() {
+
+ var $this = $(this),
+ $img = $this.children('img');
+
+ // Apply img as background.
+ $this
+ .css('background-image', 'url("' + $img.attr('src') + '")')
+ .css('background-position', $this.data('position'))
+ .css('background-size', 'cover')
+ .css('background-repeat', 'no-repeat');
+
+ // Hide img.
+ $img
+ .css('opacity', '0');
+
+ });
+
+ }
+
+ // Keyboard shortcuts.
+ if (settings.keyboardShortcuts.enabled)
+ (function() {
+
+ $wrapper
+
+ // Prevent keystrokes inside excluded elements from bubbling.
+ .on('keypress keyup keydown', settings.excludeSelector, function(event) {
+
+ // Stop propagation.
+ event.stopPropagation();
+
+ });
+
+ $window
+
+ // Keypress event.
+ .on('keydown', function(event) {
+
+ var scrolled = false;
+
+ switch (event.keyCode) {
+
+ // Left arrow.
+ case 37:
+ $document.scrollLeft($document.scrollLeft() - settings.keyboardShortcuts.distance);
+ scrolled = true;
+ break;
+
+ // Right arrow.
+ case 39:
+ $document.scrollLeft($document.scrollLeft() + settings.keyboardShortcuts.distance);
+ scrolled = true;
+ break;
+
+ // Page Up.
+ case 33:
+ $document.scrollLeft($document.scrollLeft() - $window.width() + 100);
+ scrolled = true;
+ break;
+
+ // Page Down, Space.
+ case 34:
+ case 32:
+ $document.scrollLeft($document.scrollLeft() + $window.width() - 100);
+ scrolled = true;
+ break;
+
+ // Home.
+ case 36:
+ $document.scrollLeft(0);
+ scrolled = true;
+ break;
+
+ // End.
+ case 35:
+ $document.scrollLeft($document.width());
+ scrolled = true;
+ break;
+
+ }
+
+ // Scrolled?
+ if (scrolled) {
+
+ // Prevent default.
+ event.preventDefault();
+ event.stopPropagation();
+
+ // Stop link scroll.
+ $bodyHtml.stop();
+
+ }
+
+ });
+
+ })();
+
+ // Scroll wheel.
+ if (settings.scrollWheel.enabled)
+ (function() {
+
+ // Based on code by @miorel + @pieterv of Facebook (thanks guys :)
+ // github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
+ var normalizeWheel = function(event) {
+
+ var pixelStep = 10,
+ lineHeight = 40,
+ pageHeight = 800,
+ sX = 0,
+ sY = 0,
+ pX = 0,
+ pY = 0;
+
+ // Legacy.
+ if ('detail' in event)
+ sY = event.detail;
+ else if ('wheelDelta' in event)
+ sY = event.wheelDelta / -120;
+ else if ('wheelDeltaY' in event)
+ sY = event.wheelDeltaY / -120;
+
+ if ('wheelDeltaX' in event)
+ sX = event.wheelDeltaX / -120;
+
+ // Side scrolling on FF with DOMMouseScroll.
+ if ('axis' in event
+ && event.axis === event.HORIZONTAL_AXIS) {
+ sX = sY;
+ sY = 0;
+ }
+
+ // Calculate.
+ pX = sX * pixelStep;
+ pY = sY * pixelStep;
+
+ if ('deltaY' in event)
+ pY = event.deltaY;
+
+ if ('deltaX' in event)
+ pX = event.deltaX;
+
+ if ((pX || pY)
+ && event.deltaMode) {
+
+ if (event.deltaMode == 1) {
+ pX *= lineHeight;
+ pY *= lineHeight;
+ }
+ else {
+ pX *= pageHeight;
+ pY *= pageHeight;
+ }
+
+ }
+
+ // Fallback if spin cannot be determined.
+ if (pX && !sX)
+ sX = (pX < 1) ? -1 : 1;
+
+ if (pY && !sY)
+ sY = (pY < 1) ? -1 : 1;
+
+ // Return.
+ return {
+ spinX: sX,
+ spinY: sY,
+ pixelX: pX,
+ pixelY: pY
+ };
+
+ };
+
+ // Wheel event.
+ $body.on('wheel', function(event) {
+
+ // Disable on <=small.
+ if (skel.breakpoint('small').active)
+ return;
+
+ // Prevent default.
+ event.preventDefault();
+ event.stopPropagation();
+
+ // Stop link scroll.
+ $bodyHtml.stop();
+
+ // Calculate delta, direction.
+ var n = normalizeWheel(event.originalEvent),
+ x = (n.pixelX != 0 ? n.pixelX : n.pixelY),
+ delta = Math.min(Math.abs(x), 150) * settings.scrollWheel.factor,
+ direction = x > 0 ? 1 : -1;
+
+ // Scroll page.
+ $document.scrollLeft($document.scrollLeft() + (delta * direction));
+
+ });
+
+ })();
+
+ // Scroll zones.
+ if (settings.scrollZones.enabled)
+ (function() {
+
+ var $left = $('<div class="scrollZone left"></div>'),
+ $right = $('<div class="scrollZone right"></div>'),
+ $zones = $left.add($right),
+ paused = false,
+ intervalId = null,
+ direction,
+ activate = function(d) {
+
+ // Disable on <=small.
+ if (skel.breakpoint('small').active)
+ return;
+
+ // Paused? Bail.
+ if (paused)
+ return;
+
+ // Stop link scroll.
+ $bodyHtml.stop();
+
+ // Set direction.
+ direction = d;
+
+ // Initialize interval.
+ clearInterval(intervalId);
+
+ intervalId = setInterval(function() {
+ $document.scrollLeft($document.scrollLeft() + (settings.scrollZones.speed * direction));
+ }, 25);
+
+ },
+ deactivate = function() {
+
+ // Unpause.
+ paused = false;
+
+ // Clear interval.
+ clearInterval(intervalId);
+
+ };
+
+ $zones
+ .appendTo($wrapper)
+ .on('mouseleave mousedown', function(event) {
+ deactivate();
+ });
+
+ $left
+ .css('left', '0')
+ .on('mouseenter', function(event) {
+ activate(-1);
+ });
+
+ $right
+ .css('right', '0')
+ .on('mouseenter', function(event) {
+ activate(1);
+ });
+
+ $wrapper
+ .on('---pauseScrollZone', function(event) {
+
+ // Pause.
+ paused = true;
+
+ // Unpause after delay.
+ setTimeout(function() {
+ paused = false;
+ }, 500);
+
+ });
+
+ })();
+
+ // Dragging.
+ if (settings.dragging.enabled)
+ (function() {
+
+ var dragging = false,
+ dragged = false,
+ distance = 0,
+ startScroll,
+ momentumIntervalId, velocityIntervalId,
+ startX, currentX, previousX,
+ velocity, direction;
+
+ $wrapper
+
+ // Prevent image drag and drop.
+ .on('mouseup mousemove mousedown', '.image, img', function(event) {
+ event.preventDefault();
+ })
+
+ // Prevent mouse events inside excluded elements from bubbling.
+ .on('mouseup mousemove mousedown', settings.excludeSelector, function(event) {
+
+ // Prevent event from bubbling.
+ event.stopPropagation();
+
+ // End drag.
+ dragging = false;
+ $wrapper.removeClass('is-dragging');
+ clearInterval(velocityIntervalId);
+ clearInterval(momentumIntervalId);
+
+ // Pause scroll zone.
+ $wrapper.triggerHandler('---pauseScrollZone');
+
+ })
+
+ // Mousedown event.
+ .on('mousedown', function(event) {
+
+ // Disable on <=small.
+ if (skel.breakpoint('small').active)
+ return;
+
+ // Clear momentum interval.
+ clearInterval(momentumIntervalId);
+
+ // Stop link scroll.
+ $bodyHtml.stop();
+
+ // Start drag.
+ dragging = true;
+ $wrapper.addClass('is-dragging');
+
+ // Initialize and reset vars.
+ startScroll = $document.scrollLeft();
+ startX = event.clientX;
+ previousX = startX;
+ currentX = startX;
+ distance = 0;
+ direction = 0;
+
+ // Initialize velocity interval.
+ clearInterval(velocityIntervalId);
+
+ velocityIntervalId = setInterval(function() {
+
+ // Calculate velocity, direction.
+ velocity = Math.abs(currentX - previousX);
+ direction = (currentX > previousX ? -1 : 1);
+
+ // Update previous X.
+ previousX = currentX;
+
+ }, 50);
+
+ })
+
+ // Mousemove event.
+ .on('mousemove', function(event) {
+
+ // Not dragging? Bail.
+ if (!dragging)
+ return;
+
+ // Velocity.
+ currentX = event.clientX;
+
+ // Scroll page.
+ $document.scrollLeft(startScroll + (startX - currentX));
+
+ // Update distance.
+ distance = Math.abs(startScroll - $document.scrollLeft());
+
+ // Distance exceeds threshold? Disable pointer events on all descendents.
+ if (!dragged
+ && distance > settings.dragging.threshold) {
+
+ $wrapper.addClass('is-dragged');
+
+ dragged = true;
+
+ }
+
+ })
+
+ // Mouseup/mouseleave event.
+ .on('mouseup mouseleave', function(event) {
+
+ var m;
+
+ // Not dragging? Bail.
+ if (!dragging)
+ return;
+
+ // Dragged? Re-enable pointer events on all descendents.
+ if (dragged) {
+
+ setTimeout(function() {
+ $wrapper.removeClass('is-dragged');
+ }, 100);
+
+ dragged = false;
+
+ }
+
+ // Distance exceeds threshold? Prevent default.
+ if (distance > settings.dragging.threshold)
+ event.preventDefault();
+
+ // End drag.
+ dragging = false;
+ $wrapper.removeClass('is-dragging');
+ clearInterval(velocityIntervalId);
+ clearInterval(momentumIntervalId);
+
+ // Pause scroll zone.
+ $wrapper.triggerHandler('---pauseScrollZone');
+
+ // Initialize momentum interval.
+ if (settings.dragging.momentum > 0) {
+
+ m = velocity;
+
+ momentumIntervalId = setInterval(function() {
+
+ // Momentum is NaN? Bail.
+ if (isNaN(m)) {
+
+ clearInterval(momentumIntervalId);
+ return;
+
+ }
+
+ // Scroll page.
+ $document.scrollLeft($document.scrollLeft() + (m * direction));
+
+ // Decrease momentum.
+ m = m * settings.dragging.momentum;
+
+ // Negligible momentum? Clear interval and end.
+ if (Math.abs(m) < 1)
+ clearInterval(momentumIntervalId);
+
+ }, 15);
+
+ }
+
+ });
+
+ })();
+
+ // Link scroll.
+ $wrapper
+ .on('mousedown mouseup', 'a[href^="#"]', function(event) {
+
+ // Stop propagation.
+ event.stopPropagation();
+
+ })
+ .on('click', 'a[href^="#"]', function(event) {
+
+ var $this = $(this),
+ href = $this.attr('href'),
+ $target, x, y;
+
+ // Get target.
+ if (href == '#'
+ || ($target = $(href)).length == 0)
+ return;
+
+ // Prevent default.
+ event.preventDefault();
+ event.stopPropagation();
+
+ // Calculate x, y.
+ if (skel.breakpoint('small').active) {
+
+ x = $target.offset().top - (Math.max(0, $window.height() - $target.outerHeight()) / 2);
+ y = { scrollTop: x };
+
+ }
+ else {
+
+ x = $target.offset().left - (Math.max(0, $window.width() - $target.outerWidth()) / 2);
+ y = { scrollLeft: x };
+
+ }
+
+ // Scroll.
+ $bodyHtml
+ .stop()
+ .animate(
+ y,
+ settings.linkScrollSpeed,
+ 'swing'
+ );
+
+ });
+
+ // Gallery.
+ $('.gallery')
+ .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;
+
+ // Stop propagation.
+ event.stopPropagation();
+
+ // Lock.
+ $modal[0]._locked = true;
+
+ // Clear visible, loaded.
+ $modal
+ .removeClass('loaded')
+
+ // Delay.
+ setTimeout(function() {
+
+ $modal
+ .removeClass('visible')
+
+ // Pause scroll zone.
+ $wrapper.triggerHandler('---pauseScrollZone');
+
+ 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');
+
+ })
+ .on('mouseup mousedown mousemove', '.modal', function(event) {
+
+ // Stop propagation.
+ event.stopPropagation();
+
+ })
+ .prepend('<div class="modal" tabIndex="-1"><div class="inner"><img src="" /></div></div>')
+ .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/skel.min.js b/assets/js/skel.min.js index 6ca4bf1..0e7633a 100755..100644 --- a/assets/js/skel.min.js +++ b/assets/js/skel.min.js @@ -1,2 +1,2 @@ -/* skel.js v3.0.1 | (c) skel.io | MIT licensed */ +/* skel.js v3.0.1 | (c) skel.io | MIT licensed */
var skel=function(){"use strict";var t={breakpointIds:null,events:{},isInit:!1,obj:{attachments:{},breakpoints:{},head:null,states:{}},sd:"/",state:null,stateHandlers:{},stateId:"",vars:{},DOMReady:null,indexOf:null,isArray:null,iterate:null,matchesMedia:null,extend:function(e,n){t.iterate(n,function(i){t.isArray(n[i])?(t.isArray(e[i])||(e[i]=[]),t.extend(e[i],n[i])):"object"==typeof n[i]?("object"!=typeof e[i]&&(e[i]={}),t.extend(e[i],n[i])):e[i]=n[i]})},newStyle:function(t){var e=document.createElement("style");return e.type="text/css",e.innerHTML=t,e},_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,i=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+i in n||"Webkit"+i in n||"O"+i in n||"ms"+i in n},on:function(e,n){var i=e.split(/[\s]+/);return t.iterate(i,function(e){var a=i[e];if(t.isInit){if("init"==a)return void n();if("change"==a)n();else{var r=a.charAt(0);if("+"==r||"!"==r){var o=a.substring(1);if(o in t.obj.breakpoints)if("+"==r&&t.obj.breakpoints[o].active)n();else if("!"==r&&!t.obj.breakpoints[o].active)return void n()}}}t.events[a]||(t.events[a]=[]),t.events[a].push(n)}),t},trigger:function(e){return t.events[e]&&0!=t.events[e].length?(t.iterate(t.events[e],function(n){t.events[e][n]()}),t):void 0},breakpoint:function(e){return t.obj.breakpoints[e]},breakpoints:function(e){function n(t,e){this.name=this.id=t,this.media=e,this.active=!1,this.wasActive=!1}return n.prototype.matches=function(){return t.matchesMedia(this.media)},n.prototype.sync=function(){this.wasActive=this.active,this.active=this.matches()},t.iterate(e,function(i){t.obj.breakpoints[i]=new n(i,e[i])}),window.setTimeout(function(){t.poll()},0),t},addStateHandler:function(e,n){t.stateHandlers[e]=n},callStateHandler:function(e){var n=t.stateHandlers[e]();t.iterate(n,function(e){t.state.attachments.push(n[e])})},changeState:function(e){t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].sync()}),t.vars.lastStateId=t.stateId,t.stateId=e,t.breakpointIds=t.stateId===t.sd?[]:t.stateId.substring(1).split(t.sd),t.obj.states[t.stateId]?t.state=t.obj.states[t.stateId]:(t.obj.states[t.stateId]={attachments:[]},t.state=t.obj.states[t.stateId],t.iterate(t.stateHandlers,t.callStateHandler)),t.detachAll(t.state.attachments),t.attachAll(t.state.attachments),t.vars.stateId=t.stateId,t.vars.state=t.state,t.trigger("change"),t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].active?t.obj.breakpoints[e].wasActive||t.trigger("+"+e):t.obj.breakpoints[e].wasActive&&t.trigger("-"+e)})},generateStateConfig:function(e,n){var i={};return t.extend(i,e),t.iterate(t.breakpointIds,function(e){t.extend(i,n[t.breakpointIds[e]])}),i},getStateId:function(){var e="";return t.iterate(t.obj.breakpoints,function(n){var i=t.obj.breakpoints[n];i.matches()&&(e+=t.sd+i.id)}),e},poll:function(){var e="";e=t.getStateId(),""===e&&(e=t.sd),e!==t.stateId&&t.changeState(e)},_attach:null,attach:function(e){var n=t.obj.head,i=e.element;return i.parentNode&&i.parentNode.tagName?!1:(t._attach||(t._attach=n.firstChild),n.insertBefore(i,t._attach.nextSibling),e.permanent&&(t._attach=i),!0)},attachAll:function(e){var n=[];t.iterate(e,function(t){n[e[t].priority]||(n[e[t].priority]=[]),n[e[t].priority].push(e[t])}),n.reverse(),t.iterate(n,function(e){t.iterate(n[e],function(i){t.attach(n[e][i])})})},detach:function(t){var e=t.element;return t.permanent||!e.parentNode||e.parentNode&&!e.parentNode.tagName?!1:(e.parentNode.removeChild(e),!0)},detachAll:function(e){var n={};t.iterate(e,function(t){n[e[t].id]=!0}),t.iterate(t.obj.attachments,function(e){e in n||t.detach(t.obj.attachments[e])})},attachment:function(e){return e in t.obj.attachments?t.obj.attachments[e]:null},newAttachment:function(e,n,i,a){return t.obj.attachments[e]={id:e,element:n,priority:i,permanent:a}},init:function(){t.initMethods(),t.initVars(),t.initEvents(),t.obj.head=document.getElementsByTagName("head")[0],t.isInit=!0,t.trigger("init")},initEvents:function(){t.on("resize",function(){t.poll()}),t.on("orientationChange",function(){t.poll()}),t.DOMReady(function(){t.trigger("ready")}),window.onload&&t.on("load",window.onload),window.onload=function(){t.trigger("load")},window.onresize&&t.on("resize",window.onresize),window.onresize=function(){t.trigger("resize")},window.onorientationchange&&t.on("orientationChange",window.onorientationchange),window.onorientationchange=function(){t.trigger("orientationChange")}},initMethods:function(){document.addEventListener?!function(e,n){t.DOMReady=n()}("domready",function(){function t(t){for(r=1;t=n.shift();)t()}var e,n=[],i=document,a="DOMContentLoaded",r=/^loaded|^c/.test(i.readyState);return i.addEventListener(a,e=function(){i.removeEventListener(a,e),t()}),function(t){r?t():n.push(t)}}):!function(e,n){t.DOMReady=n()}("domready",function(t){function e(t){for(h=1;t=i.shift();)t()}var n,i=[],a=!1,r=document,o=r.documentElement,s=o.doScroll,c="DOMContentLoaded",d="addEventListener",u="onreadystatechange",l="readyState",f=s?/^loaded|^c/:/^loaded|c/,h=f.test(r[l]);return r[d]&&r[d](c,n=function(){r.removeEventListener(c,n,a),e()},a),s&&r.attachEvent(u,n=function(){/^c/.test(r[l])&&(r.detachEvent(u,n),e())}),t=s?function(e){self!=top?h?e():i.push(e):function(){try{o.doScroll("left")}catch(n){return setTimeout(function(){t(e)},50)}e()}()}:function(t){h?t():i.push(t)}}),Array.prototype.indexOf?t.indexOf=function(t,e){return t.indexOf(e)}:t.indexOf=function(t,e){if("string"==typeof t)return t.indexOf(e);var n,i,a=e?e:0;if(!this)throw new TypeError;if(i=this.length,0===i||a>=i)return-1;for(0>a&&(a=i-Math.abs(a)),n=a;i>n;n++)if(this[n]===t)return n;return-1},Array.isArray?t.isArray=function(t){return Array.isArray(t)}:t.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)},Object.keys?t.iterate=function(t,e){if(!t)return[];var n,i=Object.keys(t);for(n=0;i[n]&&e(i[n],t[i[n]])!==!1;n++);}:t.iterate=function(t,e){if(!t)return[];var n;for(n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(n,t[n])===!1)break},window.matchMedia?t.matchesMedia=function(t){return""==t?!0:window.matchMedia(t).matches}:window.styleMedia||window.media?t.matchesMedia=function(t){if(""==t)return!0;var e=window.styleMedia||window.media;return e.matchMedium(t||"all")}:window.getComputedStyle?t.matchesMedia=function(t){if(""==t)return!0;var e=document.createElement("style"),n=document.getElementsByTagName("script")[0],i=null;e.type="text/css",e.id="matchmediajs-test",n.parentNode.insertBefore(e,n),i="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle;var a="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=a:e.textContent=a,"1px"===i.width}:t.matchesMedia=function(t){if(""==t)return!0;var e,n,i,a,r={"min-width":null,"max-width":null},o=!1;for(i=t.split(/\s+and\s+/),e=0;e<i.length;e++)n=i[e],"("==n.charAt(0)&&(n=n.substring(1,n.length-1),a=n.split(/:\s+/),2==a.length&&(r[a[0].replace(/^\s+|\s+$/g,"")]=parseInt(a[1]),o=!0));if(!o)return!1;var s=document.documentElement.clientWidth,c=document.documentElement.clientHeight;return null!==r["min-width"]&&s<r["min-width"]||null!==r["max-width"]&&s>r["max-width"]||null!==r["min-height"]&&c<r["min-height"]||null!==r["max-height"]&&c>r["max-height"]?!1:!0},navigator.userAgent.match(/MSIE ([0-9]+)/)&&RegExp.$1<9&&(t.newStyle=function(t){var e=document.createElement("span");return e.innerHTML=' <style type="text/css">'+t+"</style>",e})},initVars:function(){var e,n,i,a=navigator.userAgent;e="other",n=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(RegExp.$1),!1):void 0}),t.vars.browser=e,t.vars.browserVersion=n,e="other",n=0,i=[["ios",/([0-9_]+) like Mac OS X/,function(t){return t.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(t){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(t){return t.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(i[2]?i[2](RegExp.$1):RegExp.$1),!1):void 0}),t.vars.os=e,t.vars.osVersion=n,t.vars.IEVersion="ie"==t.vars.browser?t.vars.browserVersion:99,t.vars.touch="wp"==t.vars.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),t.vars.mobile="wp"==t.vars.os||"android"==t.vars.os||"ios"==t.vars.os||"bb"==t.vars.os}};return t.init(),t}();!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.skel=e()}(this,function(){return skel}); diff --git a/assets/js/util.js b/assets/js/util.js deleted file mode 100755 index ecf7b37..0000000 --- a/assets/js/util.js +++ /dev/null @@ -1,587 +0,0 @@ -(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( - '<a ' + - 'class="link depth-' + indent + '"' + - ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') + - ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') + - '>' + - '<span class="indent-' + indent + '"></span>' + - $this.text() + - '</a>' - ); - - }); - - 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 = $( - $('<div>') - .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..7c3e5c1 --- /dev/null +++ b/assets/sass/base/_page.scss @@ -0,0 +1,105 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Page */
+
+ @include keyframes('load-spinner') {
+ 0% {
+ @include vendor('transform', 'rotate(0deg)');
+ }
+
+ 100% {
+ @include vendor('transform', 'rotate(360deg)');
+ }
+ }
+
+ @-ms-viewport {
+ width: device-width;
+ }
+
+ html {
+ width: 100%;
+ height: 100%;
+ }
+
+ body {
+ @include vendor('display', 'flex');
+ @include vendor('align-items', 'center');
+ @include vendor('justify-content', 'flex-start');
+ -ms-overflow-style: scrollbar;
+ width: 100%;
+ height: 100%;
+ min-height: 30rem;
+ overflow: hidden;
+
+ &:before {
+ @include vendor('animation', 'load-spinner 1s infinite linear');
+ @include vendor('transition', 'opacity 0.25s ease');
+ @include vendor('transition-delay', '0s');
+ @include vendor('pointer-events', 'none');
+ content: '';
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 4rem;
+ height: 4rem;
+ margin: -2rem 0 0 -2rem;
+ background-image: svg-url('<svg 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"><style>circle {fill: transparent; stroke: #{_palette(bg)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 4rem;
+ opacity: 0;
+ }
+
+ &:after {
+ @include vendor('pointer-events', 'none');
+ content: '';
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ background-attachment: fixed;
+ background-color: _palette(bg-alt);
+ background-image: url('../../images/overlay.png'), url('../../images/bg.jpg');
+ background-repeat: repeat, repeat-x;
+ background-size: 128px 128px, cover;
+ }
+
+ &.is-loading {
+ *, *:before, *:after {
+ @include vendor('animation', 'none !important');
+ @include vendor('transition', 'none !important');
+ }
+
+ &:before {
+ @include vendor('transition', 'opacity 1s ease');
+ @include vendor('transition-delay', '0.75s');
+ opacity: 0.25;
+ }
+ }
+ }
+
+ @include breakpoint(small) {
+ html {
+ height: auto;
+ }
+
+ body {
+ height: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ }
+
+ @include breakpoint(xsmall) {
+ html, body {
+ min-width: 320px;
+ }
+ }
\ 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..37635ff --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,271 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Typography */
+
+ html {
+ font-size: 18pt;
+ font-size: 1vmax;
+
+ @include breakpoint(xlarge) {
+ font-size: 12pt;
+ font-size: 1.1vmax;
+ }
+
+ @include breakpoint(large) {
+ font-size: 11pt;
+ font-size: 1.5vmax;
+ }
+ }
+
+ body, input, select, textarea {
+ color: _palette(fg);
+ 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',
+ 'border-bottom-color #{_duration(transition)} ease-in-out'
+ ));
+ color: inherit;
+ border-bottom: dotted 1px;
+ text-decoration: none;
+
+ &:hover {
+ border-bottom-color: transparent;
+ color: _palette(accent3);
+ }
+ }
+
+ strong, b {
+ color: _palette(fg-bold);
+ font-weight: _font(weight-bold);
+ }
+
+ em, i {
+ font-style: italic;
+ }
+
+ p {
+ margin: 0 0 _size(element-margin) 0;
+
+ body.is-ie & {
+ width: 100%;
+ }
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ color: _palette(fg-bold);
+ font-family: _font(family-heading);
+ font-weight: _font(weight-heading);
+ line-height: 1.3;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ letter-spacing: -0.05em;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+
+ h1, h2, h3 {
+ &.major {
+ position: relative;
+
+ &:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ width: 3.5rem;
+ height: 0.1rem;
+ background-color: _palette(border);
+ }
+ }
+ }
+
+ h1 {
+ font-size: 3rem;
+ line-height: 1.2;
+
+ &.major {
+ margin: 0 0 (_size(element-margin) * 1.75) 0;
+
+ &:after {
+ bottom: -1.325rem;
+ }
+ }
+ }
+
+ h2 {
+ font-size: 1.75rem;
+ line-height: 1.2;
+
+ &.major {
+ margin: 0 0 (_size(element-margin) * 1.325) 0;
+
+ &:after {
+ bottom: -1.2rem;
+ }
+ }
+ }
+
+ h3 {
+ font-size: 1.325rem;
+
+ &.major {
+ margin: 0 0 (_size(element-margin) * 1.25) 0;
+
+ &:after {
+ bottom: -0.75rem;
+ }
+ }
+ }
+
+ h4 {
+ font-size: 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 0.25rem _palette(border);
+ font-style: italic;
+ margin: 0 0 _size(element-margin) 0;
+ padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+ }
+
+ code {
+ background: _palette(border-bg);
+ border-radius: _size(border-radius);
+ font-family: _font(family-fixed);
+ font-size: 0.8rem;
+ margin: 0 0.25rem;
+ padding: 0.25rem 0.65rem;
+ }
+
+ pre {
+ -webkit-overflow-scrolling: touch;
+ font-family: _font(family-fixed);
+ font-size: 0.8rem;
+ margin: 0 0 _size(element-margin) 0;
+ white-space: pre-wrap;
+
+ code {
+ display: block;
+ line-height: 1.625;
+ padding: 1rem 1.5rem;
+ overflow-x: auto;
+ margin: 0;
+ }
+ }
+
+ hr {
+ border: 0;
+ border-bottom: solid 2px _palette(border);
+ margin: (_size(element-margin) * 1.25) 0;
+ }
+
+ .align-left {
+ text-align: left;
+ }
+
+ .align-center {
+ text-align: center;
+ }
+
+ .align-right {
+ text-align: right;
+ }
+
+ @include breakpoint(small) {
+ html {
+ font-size: 12pt;
+ }
+
+ h1 {
+ font-size: 2.25rem;
+ line-height: 1.2;
+
+ &.major {
+ margin: 0 0 (_size(element-margin) * 1.75) 0;
+
+ &:after {
+ bottom: -1.325rem;
+ }
+ }
+ }
+
+ h2 {
+ font-size: 1.5rem;
+ line-height: 1.2;
+
+ &.major {
+ margin: 0 0 (_size(element-margin) * 1.325) 0;
+
+ &:after {
+ bottom: -1.2rem;
+ }
+ }
+ }
+
+ h3 {
+ font-size: 1rem;
+
+ &.major {
+ margin: 0 0 (_size(element-margin) * 1.25) 0;
+
+ &:after {
+ bottom: -0.75rem;
+ }
+ }
+ }
+
+ h4 {
+ font-size: 1rem;
+ }
+
+ h5 {
+ font-size: 0.9rem;
+ }
+
+ h6 {
+ font-size: 0.7rem;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ br {
+ display: none;
+ }
+ }
+ }
+
+ @include breakpoint(xxsmall) {
+ html {
+ font-size: 11pt;
+ }
+ }
\ 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..9ce38c2 --- /dev/null +++ b/assets/sass/components/_button.scss @@ -0,0 +1,156 @@ +///
+/// Ethereal 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'
+ ));
+ background-color: transparent;
+ border: 0;
+ border-radius: _size(border-radius);
+ box-shadow: inset 0 0 0 2px _palette(border);
+ color: _palette(fg-bold) !important;
+ cursor: pointer;
+ display: inline-block;
+ font-family: _font(family-heading);
+ font-size: 0.6rem;
+ font-weight: _font(weight-heading);
+ height: _size(element-height) * 1.1;
+ letter-spacing: 0.15rem;
+ line-height: _size(element-height) * 1.1;
+ padding: 0 1.5rem 0 (1.5rem + 0.15rem);
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ white-space: nowrap;
+
+ &:hover {
+ box-shadow: inset 0 0 0 2px _palette(accent3);
+ color: _palette(accent3) !important;
+ }
+
+ &:active {
+ background-color: transparentize(_palette(accent3), 0.875);
+ }
+
+ &.icon {
+ &:before {
+ display: inline-block;
+ position: relative;
+ top: -0.075rem;
+ vertical-align: middle;
+ font-size: 0.8rem;
+ margin: 0 0.375rem 0 -0.325rem;
+ }
+
+ &.circle {
+ position: relative;
+ width: _size(element-height) * 1.25;
+ height: _size(element-height) * 1.25;
+ line-height: _size(element-height) * 1.25;
+ text-indent: _size(element-height) * 1.25;
+ border-radius: 100%;
+ overflow: hidden;
+ padding: 0;
+ letter-spacing: 0;
+
+ &:before {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: inherit;
+ height: inherit;
+ font-size: 1.25rem;
+ line-height: inherit;
+ margin: 0;
+ text-indent: 0;
+ }
+
+ &.fa-angle-left {
+ &:before {
+ position: relative;
+ left: -0.1rem;
+ font-size: 1.75rem;
+ }
+ }
+
+ &.fa-angle-right {
+ &:before {
+ position: relative;
+ left: 0.1rem;
+ font-size: 1.75rem;
+ }
+ }
+ }
+ }
+
+ &.fit {
+ display: block;
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+ width: 100%;
+ }
+
+ &.small {
+ font-size: 0.4rem;
+ height: _size(element-height) * 0.75;
+ line-height: _size(element-height) * 0.75;
+ padding: 0 1.25rem 0 (1.25rem + 0.15rem);
+ }
+
+ &.large {
+ font-size: 0.8rem;
+ height: _size(element-height) * 1.325;
+ line-height: _size(element-height) * 1.325;
+ padding: 0 2rem 0 (2rem + 0.15rem);
+ }
+
+ &.special {
+ background-color: rgba(_palette(fg-bold), 1);
+ box-shadow: none;
+ color: _palette(bg) !important;
+
+ &.color1 {
+ color: _palette(accent1) !important;
+ }
+
+ &.color2 {
+ color: _palette(accent2) !important;
+ }
+
+ &.color3 {
+ color: _palette(accent3) !important;
+ }
+
+ &.color4 {
+ color: _palette(accent4) !important;
+ }
+
+ &:hover {
+ background-color: _palette(accent3);
+ }
+
+ &:active {
+ background-color: desaturate(darken(_palette(accent3), 6), 3);
+ }
+ }
+
+ &.disabled,
+ &:disabled {
+ @include vendor('pointer-events', 'none');
+ cursor: default;
+ opacity: 0.5;
+ }
+ }
\ 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..9ff5ab2 --- /dev/null +++ b/assets/sass/components/_form.scss @@ -0,0 +1,275 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+ $gutter: (_size(element-margin) * 1);
+
+ form {
+
+ @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});
+ }
+ }
+
+ > .actions {
+ @include vendor('flex-grow', '0');
+ @include vendor('flex-shrink', '1');
+ margin: $gutter 0 0 $gutter;
+ }
+ }
+
+ label {
+ color: _palette(fg-bold);
+ display: block;
+ font-family: _font(family-heading);
+ font-size: 0.8rem;
+ font-weight: _font(weight-heading);
+ margin: 0 0 (_size(element-margin) * 0.325) 0;
+ }
+
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ input[type="tel"],
+ select,
+ textarea {
+ @include vendor('appearance', 'none');
+ background: transparent;
+ border: solid 2px _palette(border);
+ border-radius: _size(border-radius);
+ color: inherit;
+ display: block;
+ outline: 0;
+ padding: 0 0.75rem;
+ text-decoration: none;
+ width: 100%;
+
+ &:invalid {
+ box-shadow: none;
+ }
+
+ &:focus {
+ border-color: _palette(accent3);
+ }
+ }
+
+ option {
+ background-color: _palette(fg-bold);
+ color: _palette(bg);
+ }
+
+ .select-wrapper {
+ @include icon;
+ display: block;
+ position: relative;
+
+ &:before {
+ display: block;
+ content: '\f107';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: _size(element-height);
+ height: _size(element-height);
+ line-height: _size(element-height);
+ color: _palette(fg);
+ pointer-events: none;
+ text-align: center;
+
+ body.is-ie & {
+ line-height: 2.5;
+ }
+ }
+
+ select::-ms-expand {
+ display: none;
+ }
+ }
+
+ input[type="text"],
+ input[type="password"],
+ input[type="email"],
+ 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;
+ position: relative;
+ color: _palette(fg);
+ cursor: pointer;
+ display: inline-block;
+ font-size: 1rem;
+ font-weight: _font(weight);
+ margin-bottom: 0;
+ padding-left: (_size(element-height) * 0.6) + 1rem;
+ padding-right: 1rem;
+
+ &:before {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: (_size(element-height) * 0.6);
+ height: (_size(element-height) * 0.6);
+ line-height: (_size(element-height) * 0.575);
+ background: _palette(border-bg);
+ border: solid 1px _palette(border);
+ border-radius: _size(border-radius);
+ color: _palette(bg);
+ text-align: center;
+
+ body.is-ie & {
+ line-height: 1.5;
+ }
+ }
+ }
+
+ &:checked + label {
+ &:before {
+ content: '\f00c';
+ background: _palette(fg-bold);
+ border-color: _palette(fg-bold);
+ }
+ }
+
+ &:focus + label {
+ &:before {
+ border-color: _palette(accent3);
+ box-shadow: 0 0 0 1px _palette(accent3);
+ }
+ }
+
+ &:focus:checked + label {
+ &:before {
+ background: _palette(accent3);
+ }
+ }
+
+ &.color1 {
+ & + label {
+ &:before {
+ color: _palette(accent1);
+ }
+ }
+ }
+
+ &.color2 {
+ & + label {
+ &:before {
+ color: _palette(accent2);
+ }
+ }
+ }
+
+ &.color3 {
+ & + label {
+ &:before {
+ color: _palette(accent3);
+ }
+ }
+ }
+
+ &.color4 {
+ & + label {
+ &:before {
+ color: _palette(accent4);
+ }
+ }
+ }
+ }
+
+ input[type="checkbox"] {
+ & + label {
+ &:before {
+ border-radius: _size(border-radius);
+ }
+ }
+ }
+
+ input[type="radio"] {
+ & + label {
+ &:before {
+ border-radius: 100%;
+ }
+ }
+ }
+
+ ::-webkit-input-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+ }
+
+ :-moz-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+ }
+
+ ::-moz-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+ }
+
+ :-ms-input-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+ }
+
+ .formerize-placeholder {
+ color: _palette(fg-light) !important;
+ opacity: 1.0;
+ }
+
+ @include breakpoint(small) {
+ form {
+ margin: ($gutter * -1) 0 _size(element-margin) 0;
+ width: 100%;
+
+ > .field {
+ padding: $gutter 0 0 0;
+ width: 100% !important;
+ }
+
+ > .actions {
+ margin: $gutter 0 0 0;
+ }
+ }
+ }
\ 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..f54b0de --- /dev/null +++ b/assets/sass/components/_gallery.scss @@ -0,0 +1,218 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Gallery */
+
+ $pad: _size(pad);
+ $pad-small-tb: _size(pad-small-tb);
+ $pad-small-lr: _size(pad-small-lr);
+
+ @include keyframes('gallery-modal-spinner') {
+ 0% {
+ @include vendor('transform', 'rotate(0deg)');
+ }
+
+ 100% {
+ @include vendor('transform', 'rotate(360deg)');
+ }
+ }
+
+ .gallery {
+ @include vendor('align-items', 'stretch');
+ @include vendor('display', 'flex');
+ height: 100%;
+
+ > * {
+ width: 20rem;
+ height: 100%;
+ }
+
+ .image {
+ display: block;
+ position: relative;
+ border-bottom: 0;
+ overflow: hidden;
+
+ img {
+ @include vendor('transition', 'transform #{_duration(transition)} ease-in-out');
+ }
+
+ &:after {
+ @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
+ }
+
+ &:hover {
+ img {
+ @include vendor('transform', 'scale(1.025)');
+ }
+
+ &:after {
+ opacity: 0;
+ }
+ }
+ }
+
+ .group {
+ @include vendor('display', 'flex');
+ @include vendor('flex-wrap', 'wrap');
+
+ > * {
+ height: 50%;
+ }
+ }
+
+ .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-fadein)} ease',
+ 'visibility #{_duration(gallery-lightbox-fadein)}',
+ 'z-index #{_duration(gallery-lightbox-fadein)}'
+ ));
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity));
+ opacity: 0;
+ outline: 0;
+ visibility: none;
+ z-index: 0;
+
+ &:before {
+ @include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
+ @include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease');
+ @include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}');
+ content: '';
+ display: block;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 4rem;
+ height: 4rem;
+ margin: -2rem 0 0 -2rem;
+ background-image: svg-url('<svg 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"><style>circle {fill: transparent; stroke: #{_palette(fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
+ 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;
+ background-image: svg-url('<svg 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"><style>line {stroke: #{_palette(fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 3rem;
+ cursor: pointer;
+ }
+
+ .inner {
+ @include vendor('transform', 'translateY(0.75rem)');
+ @include vendor('transition', (
+ 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease',
+ 'transform #{_duration(gallery-lightbox-fadein) * 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');
+ opacity: 1;
+ visibility: visible;
+ z-index: _misc(z-index-base) + 1000;
+
+ &:before {
+ opacity: 1;
+ }
+ }
+
+ &.loaded {
+ .inner {
+ @include vendor('transform', 'translateY(0)');
+ @include vendor('transition', (
+ 'opacity #{_duration(gallery-lightbox-fadein)} ease',
+ 'transform #{_duration(gallery-lightbox-fadein)} ease'
+ ));
+ opacity: 1;
+ }
+
+ &:before {
+ @include vendor('transition-delay', '0s');
+ opacity: 0;
+ }
+ }
+ }
+ }
+
+ @include breakpoint(medium) {
+ .gallery {
+ .modal {
+ .inner {
+ img {
+ max-width: 100vw;
+ }
+ }
+ }
+ }
+ }
+
+ @include breakpoint(small) {
+ .gallery {
+ @include vendor('flex-direction', 'column');
+ height: auto;
+
+ > * {
+ height: auto;
+ width: 100%;
+ }
+
+ .image {
+ width: 100%;
+ height: 40rem;
+ }
+
+ .group {
+ @include spans(33.33333%);
+
+ .image {
+ height: 20rem;
+ }
+ }
+ }
+ }
+
+ @include breakpoint(xsmall) {
+ .gallery {
+ .image {
+ height: 30rem;
+ }
+
+ .group {
+ .image {
+ height: 12.5rem;
+ }
+ }
+ }
+ }
\ 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..ce4e37c --- /dev/null +++ b/assets/sass/components/_icon.scss @@ -0,0 +1,17 @@ +///
+/// Ethereal 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;
+ position: relative;
+ border-bottom: none;
+
+ > .label {
+ display: none;
+ }
+ }
\ 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..b428fb3 --- /dev/null +++ b/assets/sass/components/_image.scss @@ -0,0 +1,169 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Image */
+
+ .image {
+ display: inline-block;
+ position: relative;
+ border: 0;
+
+ &.filtered {
+ &:after {
+ @include gradient-background;
+ @include vendor('pointer-events', 'none');
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ z-index: 1;
+ }
+
+ &.tinted {
+ &:after {
+ @include gradient-background(true);
+ }
+ }
+ }
+
+ &[data-position] {
+ img {
+ @include vendor('object-fit', 'cover');
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &[data-position="top left"] {
+ img {
+ @include vendor('object-position', 'top left');
+ }
+ }
+
+ &[data-position="top"] {
+ img {
+ @include vendor('object-position', 'top');
+ }
+ }
+
+ &[data-position="top right"] {
+ img {
+ @include vendor('object-position', 'top right');
+ }
+ }
+
+ &[data-position="right"] {
+ img {
+ @include vendor('object-position', 'right');
+ }
+ }
+
+ &[data-position="bottom right"] {
+ img {
+ @include vendor('object-position', 'bottom right');
+ }
+ }
+
+ &[data-position="bottom"] {
+ img {
+ @include vendor('object-position', 'bottom');
+ }
+ }
+
+ &[data-position="bottom left"] {
+ img {
+ @include vendor('object-position', 'bottom left');
+ }
+ }
+
+ &[data-position="left"] {
+ img {
+ @include vendor('object-position', 'left');
+ }
+ }
+
+ &[data-position="center"] {
+ img {
+ @include vendor('object-position', 'center');
+ }
+ }
+
+ &[data-position="25% 25%"] {
+ img {
+ @include vendor('object-position', '25% 25%');
+ }
+ }
+
+ &[data-position="75% 25%"] {
+ img {
+ @include vendor('object-position', '75% 25%');
+ }
+ }
+
+ &[data-position="75% 75%"] {
+ img {
+ @include vendor('object-position', '75% 75%');
+ }
+ }
+
+ &[data-position="25% 75%"] {
+ img {
+ @include vendor('object-position', '25% 75%');
+ }
+ }
+
+ img {
+ display: block;
+ }
+
+ &.left,
+ &.right {
+ max-width: 40%;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ &.left {
+ float: left;
+ padding: 0 1.5rem 1rem 0;
+ top: 0.25rem;
+ }
+
+ &.right {
+ float: right;
+ padding: 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/_list.scss b/assets/sass/components/_list.scss new file mode 100644 index 0000000..7744695 --- /dev/null +++ b/assets/sass/components/_list.scss @@ -0,0 +1,380 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// skel-baseline v3.0.1 | (c) n33 | skel.io | MIT licensed
+
+/* 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 1px _palette(border);
+ padding: 0.5rem 0;
+
+ &:first-child {
+ border-top: 0;
+ padding-top: 0;
+ }
+ }
+ }
+
+ &.icons {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
+
+ li {
+ display: inline-block;
+ padding: 0 1rem 0 0;
+
+ &:last-child {
+ padding-right: 0;
+ }
+
+ .icon {
+ &:before {
+ font-size: 1.25em;
+ }
+ }
+ }
+ }
+
+ &.actions {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
+
+ li {
+ display: inline-block;
+ padding: 0 (_size(element-margin) * 0.5) 0 0;
+ vertical-align: middle;
+
+ &:last-child {
+ padding-right: 0;
+ }
+ }
+
+ &.small {
+ li {
+ padding: 0 (_size(element-margin) * 0.25) 0 0;
+ }
+ }
+
+ &.vertical {
+ li {
+ display: block;
+ padding: (_size(element-margin) * 0.5) 0 0 0;
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ > * {
+ margin-bottom: 0;
+ }
+ }
+
+ &.small {
+ li {
+ padding: (_size(element-margin) * 0.25) 0 0 0;
+
+ &:first-child {
+ padding-top: 0;
+ }
+ }
+ }
+ }
+
+ &.fit {
+ display: table;
+ margin-left: (_size(element-margin) * -0.5);
+ padding: 0;
+ table-layout: fixed;
+ width: calc(100% + #{(_size(element-margin) * 0.5)});
+
+ li {
+ display: table-cell;
+ padding: 0 0 0 (_size(element-margin) * 0.5);
+
+ > * {
+ margin-bottom: 0;
+ }
+ }
+
+ &.small {
+ margin-left: (_size(element-margin) * -0.25);
+ width: calc(100% + #{(_size(element-margin) * 0.25)});
+
+ li {
+ padding: 0 0 0 (_size(element-margin) * 0.25);
+ }
+ }
+ }
+ }
+
+ &.contact-icons {
+ list-style: none;
+ padding-left: 0;
+
+ > li {
+ margin: 1.25rem 0 0 0;
+ padding-left: 0;
+
+ &:before {
+ display: inline-block;
+ width: 2.25rem;
+ height: 2.25rem;
+ line-height: 2.25rem;
+ border-radius: 2.25rem;
+ background-color: rgba(_palette(fg-bold), 1);
+ color: _palette(bg);
+ cursor: default;
+ font-size: 1.125rem;
+ margin-right: 1rem;
+ text-align: center;
+ vertical-align: middle;
+
+ body.is-ie & {
+ line-height: 2.125;
+ }
+ }
+
+ a {
+ border-bottom: 0;
+ }
+ }
+
+ &.color1 {
+ > li {
+ &:before {
+ color: _palette(accent1);
+ }
+ }
+ }
+
+ &.color2 {
+ > li {
+ &:before {
+ color: _palette(accent2);
+ }
+ }
+ }
+
+ &.color3 {
+ > li {
+ &:before {
+ color: _palette(accent3);
+ }
+ }
+ }
+
+ &.color4 {
+ > li {
+ &:before {
+ color: _palette(accent4);
+ }
+ }
+ }
+ }
+
+ &.grid-icons {
+ @include vendor('display', 'flex');
+ @include vendor('flex-wrap', 'wrap');
+ @include vendor('justify-content', 'center');
+ list-style: none;
+ margin: 0 0 _size(element-margin) 0;
+ padding-left: 0;
+
+ .icon {
+ display: block;
+ position: relative;
+ width: 100%;
+ text-align: center;
+
+ &:before {
+ display: block;
+ width: 6rem;
+ height: 6rem;
+ line-height: 6rem;
+ border-radius: 6rem;
+ box-shadow: inset 0 0 0 2px _palette(border);
+ font-size: 2.5rem;
+ margin: 0 auto;
+ text-align: center;
+
+ body.is-ie & {
+ line-height: 2.375;
+ }
+ }
+ }
+
+ > li {
+ @include vendor('flex-grow', '0');
+ @include vendor('flex-shrink', '0');
+ position: relative;
+ margin: 1.5rem 0 0 1.5rem;
+ padding-left: 0;
+ }
+
+ &.connected {
+ > li {
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 1.5rem;
+ height: 2px;
+ top: 50%;
+ left: -1.5rem;
+ background-color: _palette(border);
+ }
+
+ &:after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 2px;
+ height: 1.5rem;
+ top: -1.5rem;
+ left: 50%;
+ background-color: _palette(border);
+ }
+ }
+ }
+
+ &.two {
+ width: 14rem;
+
+ > li {
+ &:nth-child(-n + 2) {
+ margin-top: 0;
+
+ &:after {
+ display: none;
+ }
+ }
+
+ &:nth-child(2n - 1) {
+ margin-left: 0;
+
+ &:before {
+ display: none;
+ }
+ }
+ }
+ }
+
+ &.three {
+ width: 21.5rem;
+
+ > li {
+ &:nth-child(-n + 3) {
+ margin-top: 0;
+
+ &:after {
+ display: none;
+ }
+ }
+
+ &:nth-child(3n - 2) {
+ margin-left: 0;
+
+ &:before {
+ display: none;
+ }
+ }
+ }
+ }
+
+ &.four {
+ width: 29rem;
+
+ > li {
+ &:nth-child(-n + 4) {
+ margin-top: 0;
+
+ &:after {
+ display: none;
+ }
+ }
+
+ &:nth-child(4n - 3) {
+ margin-left: 0;
+
+ &:before {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ 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);
+ }
+ }
+
+ @include breakpoint(small) {
+ ul {
+ &.grid-icons {
+ @include vendor('justify-content', 'flex-start');
+ width: 100% !important;
+ margin: -1rem 0 _size(element-margin) -1rem;
+
+ .icon {
+ &:before {
+ width: 4.5rem;
+ height: 4.5rem;
+ line-height: 4.5rem;
+ font-size: 1.75rem;
+ }
+ }
+
+ > li {
+ margin: 1rem 0 0 1rem !important;
+
+ &:before {
+ display: none !important;
+ }
+
+ &:after {
+ display: none !important;
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file diff --git a/assets/sass/components/_panel-banner.scss b/assets/sass/components/_panel-banner.scss new file mode 100644 index 0000000..983ad32 --- /dev/null +++ b/assets/sass/components/_panel-banner.scss @@ -0,0 +1,90 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Panel (Banner) */
+
+ $pad: _size(pad);
+ $pad-small-tb: _size(pad-small-tb);
+ $pad-small-lr: _size(pad-small-lr);
+
+ .panel.banner {
+ @include vendor('align-items', 'stretch');
+
+ .content {
+ @include padding($pad, $pad);
+ @include vendor('display', 'flex');
+ @include vendor('flex-direction', 'column');
+ @include vendor('justify-content', 'center');
+ @include vendor('flex-grow', '0');
+ @include vendor('flex-shrink', '0');
+
+ > .actions:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .image {
+ @include vendor('flex-grow', '0');
+ @include vendor('flex-shrink', '0');
+ position: relative;
+
+ img {
+ @include vendor('object-fit', 'cover');
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &.left {
+ @include vendor('flex-direction', 'row');
+ }
+
+ &.right {
+ @include vendor('flex-direction', 'row-reverse');
+ }
+ }
+
+ @include breakpoint(small) {
+ .panel.banner {
+ .content {
+ @include padding($pad-small-tb, $pad-small-lr);
+ @include vendor('flex-basis', '60%');
+
+ > .actions:last-child {
+ margin-bottom: _size(element-margin);
+ }
+ }
+
+ .image {
+ @include vendor('flex-basis', '40%');
+ }
+ }
+
+ @include orientation(portrait) {
+ .panel.banner {
+ .content {
+ @include vendor('flex-basis', 'auto');
+ }
+
+ .image {
+ @include vendor('flex-basis', 'auto');
+ height: 18rem;
+ }
+
+ &.left {
+ @include vendor('flex-direction', 'column');
+ }
+
+ &.right {
+ @include vendor('flex-direction', 'column-reverse');
+ }
+ }
+ }
+ }
\ No newline at end of file diff --git a/assets/sass/components/_panel-spotlight.scss b/assets/sass/components/_panel-spotlight.scss new file mode 100644 index 0000000..e84a3fd --- /dev/null +++ b/assets/sass/components/_panel-spotlight.scss @@ -0,0 +1,81 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Panel (Spotlight) */
+
+ $pad: _size(pad);
+ $pad-small-tb: _size(pad-small-tb);
+ $pad-small-lr: _size(pad-small-lr);
+
+ .panel.spotlight {
+ @include vendor('align-items', 'stretch');
+ position: relative;
+
+ > * {
+ z-index: 1;
+ }
+
+ .content {
+ @include vendor('display', 'flex');
+ @include vendor('flex-direction', 'column');
+ @include vendor('justify-content', 'center');
+ @include padding($pad, $pad);
+ }
+
+ .image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+
+ img {
+ @include vendor('object-fit', 'cover');
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &.left {
+ @include vendor('justify-content', 'flex-start');
+
+ .content {
+ background-image: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
+ }
+ }
+
+ &.right {
+ @include vendor('justify-content', 'flex-end');
+
+ .content {
+ background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
+ }
+ }
+ }
+
+ @include breakpoint(small) {
+ .panel.spotlight {
+ .content {
+ @include padding($pad-small-tb, $pad-small-lr);
+ @include vendor('flex-direction', 'column !important');
+ background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.175)) !important;
+ min-height: 25rem;
+ }
+ }
+ }
+
+ @include breakpoint(xsmall) {
+ .panel.spotlight {
+ .content {
+ min-height: 30rem;
+ }
+ }
+ }
\ No newline at end of file diff --git a/assets/sass/components/_panel.scss b/assets/sass/components/_panel.scss new file mode 100644 index 0000000..2771c31 --- /dev/null +++ b/assets/sass/components/_panel.scss @@ -0,0 +1,300 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Panel */
+
+ $pad: _size(pad);
+ $pad-small-tb: _size(pad-small-tb);
+ $pad-small-lr: _size(pad-small-lr);
+
+ @mixin panel-colors {
+ $opacity: 0.175;
+ $darken: 3;
+ $desaturate: 3;
+
+ &.color0 {
+ @include gradient-background(false, 1, 20%, 60%);
+ }
+
+ &.color1 {
+ @include gradient-background;
+ background-color: _palette(accent1);
+ }
+
+ &.color2 {
+ @include gradient-background;
+ background-color: _palette(accent2);
+ }
+
+ &.color3 {
+ @include gradient-background;
+ background-color: _palette(accent3);
+ }
+
+ &.color4 {
+ @include gradient-background;
+ background-color: _palette(accent4);
+ }
+
+ &.color1-alt {
+ @include gradient-background(false, $opacity);
+ background-color: desaturate(darken(_palette(accent1), $darken), $desaturate);
+ }
+
+ &.color2-alt {
+ @include gradient-background(false, $opacity);
+ background-color: desaturate(darken(_palette(accent2), $darken), $desaturate);
+ }
+
+ &.color3-alt {
+ @include gradient-background(false, $opacity);
+ background-color: desaturate(darken(_palette(accent3), $darken), $desaturate);
+ }
+
+ &.color4-alt {
+ @include gradient-background(false, $opacity);
+ background-color: desaturate(darken(_palette(accent4), $darken), $desaturate);
+ }
+ }
+
+ .panel {
+ @include vendor('display', 'flex');
+ @include vendor('flex-grow', '0');
+ @include vendor('flex-shrink', '0');
+ @include vendor('justify-content', 'center');
+ @include vendor('align-items', 'stretch');
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ > * {
+ position: relative;
+ min-width: 10rem;
+
+ @include panel-colors;
+ }
+
+ > .intro {
+ @include padding($pad, $pad);
+ @include vendor('display', 'flex');
+ @include vendor('flex-grow', '0');
+ @include vendor('flex-shrink', '0');
+ @include vendor('justify-content', 'center');
+ @include vendor('align-items', 'flex-start');
+ @include vendor('flex-direction', 'column');
+ width: 22rem;
+
+ &.joined {
+ width: (22rem - $pad);
+ padding-right: 0;
+
+ & + .inner {
+ padding-left: ($pad * 0.75);
+ }
+ }
+ }
+
+ > .inner {
+ @include padding($pad, $pad);
+ @include vendor('display', 'flex');
+ @include vendor('flex-grow', '1');
+ @include vendor('flex-shrink', '1');
+ @include vendor('justify-content', 'center');
+ @include vendor('align-items', 'flex-start');
+ @include vendor('flex-direction', 'column');
+ position: relative;
+ width: 100%;
+
+ &.columns {
+ @include vendor('display', 'flex');
+ @include vendor('justify-content', 'center');
+ @include vendor('align-items', 'center');
+ @include vendor('flex-direction', 'row');
+
+ > * {
+ @include vendor('flex-grow', '0');
+ @include vendor('flex-shrink', '0');
+ margin-left: $pad;
+ }
+
+ > :first-child {
+ margin-left: 0;
+ }
+
+ &.divided {
+ > * {
+ margin-left: ($pad * 2);
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: $pad;
+ width: 2px;
+ height: calc(100% - #{$pad * 2});
+ margin-left: ($pad * -1);
+ background-color: _palette(border);
+ }
+ }
+
+ > :first-child {
+ margin-left: 0;
+
+ &:before {
+ display: none;
+ }
+ }
+ }
+
+ &.aligned {
+ @include vendor('align-items', 'flex-start');
+ }
+ }
+ }
+
+ @include spans(_size(span-fixed));
+
+ &.small {
+ width: 35rem;
+ }
+
+ &.medium {
+ width: 50rem;
+ }
+
+ &.large {
+ width: 65rem;
+ }
+
+ &.small,
+ &.medium,
+ &.large {
+ @include spans(_size(span-variable));
+ }
+
+ @include panel-colors;
+ }
+
+ @mixin panel-colors-small {
+ $opacity: 0.175;
+ $darken: 3;
+ $desaturate: 3;
+
+ &.color1 {
+ @include gradient-background-small;
+ background-color: _palette(accent1);
+ }
+
+ &.color2 {
+ @include gradient-background-small;
+ background-color: _palette(accent2);
+ }
+
+ &.color3 {
+ @include gradient-background-small;
+ background-color: _palette(accent3);
+ }
+
+ &.color4 {
+ @include gradient-background-small;
+ background-color: _palette(accent4);
+ }
+
+ &.color1-alt {
+ @include gradient-background-small(false, $opacity);
+ background-color: desaturate(darken(_palette(accent1), $darken), $desaturate);
+ }
+
+ &.color2-alt {
+ @include gradient-background-small(false, $opacity);
+ background-color: desaturate(darken(_palette(accent2), $darken), $desaturate);
+ }
+
+ &.color3-alt {
+ @include gradient-background-small(false, $opacity);
+ background-color: desaturate(darken(_palette(accent3), $darken), $desaturate);
+ }
+
+ &.color4-alt {
+ @include gradient-background-small(false, $opacity);
+ background-color: desaturate(darken(_palette(accent4), $darken), $desaturate);
+ }
+ }
+
+ @include breakpoint(small) {
+ .panel {
+ @include vendor('flex-direction', 'column');
+ height: auto;
+
+ > * {
+ @include panel-colors-small;
+ }
+
+ > .intro {
+ @include padding($pad-small-tb, $pad-small-lr);
+ width: 100% !important;
+
+ &.joined {
+ padding-bottom: 0;
+ padding-right: $pad-small-lr;
+
+ & + .inner {
+ padding-top: 0;
+ padding-left: $pad-small-lr;
+ }
+ }
+ }
+
+ > .inner {
+ @include padding($pad-small-tb, $pad-small-lr);
+
+ &.columns {
+ @include vendor('flex-direction', 'column');
+
+ > * {
+ margin-left: 0;
+ margin-top: 0;
+ }
+
+ > :first-child {
+ margin-top: 0;
+ }
+
+ &.divided {
+ > * {
+ margin-left: 0;
+ margin-top: ($pad-small-lr * 2);
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: auto;
+ left: $pad-small-lr;
+ width: calc(100% - #{$pad-small-lr * 2});
+ height: 2px;
+ margin-left: 0;
+ margin-top: ($pad-small-lr * -1);
+ }
+ }
+
+ > :first-child {
+ margin-top: 0;
+ }
+ }
+ }
+ }
+
+ @include spans-small(_size(span-fixed));
+
+ &.small,
+ &.medium,
+ &.large {
+ @include spans-small(_size(span-variable));
+ width: 100% !important;
+ }
+
+ @include panel-colors-small;
+ }
+ }
\ 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..212bee0 --- /dev/null +++ b/assets/sass/components/_table.scss @@ -0,0 +1,81 @@ +///
+/// Ethereal 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;
+ overflow-x: auto;
+ }
+
+ table {
+ margin: 0 0 _size(element-margin) 0;
+ width: 100%;
+
+ tbody {
+ tr {
+ border: solid 1px _palette(border);
+ border-left: 0;
+ border-right: 0;
+
+ &:nth-child(2n + 1) {
+ background-color: _palette(border-bg);
+ }
+ }
+ }
+
+ td {
+ padding: 0.75rem 0.75rem;
+ }
+
+ th {
+ color: _palette(fg-bold);
+ font-size: 0.9rem;
+ font-weight: _font(weight-bold);
+ padding: 0 0.75rem 0.75rem 0.75rem;
+ text-align: left;
+ }
+
+ thead {
+ border-bottom: solid 2px _palette(border);
+ }
+
+ tfoot {
+ border-top: solid 2px _palette(border);
+ }
+
+ &.alt {
+ border-collapse: separate;
+
+ tbody {
+ tr {
+ td {
+ border: solid 1px _palette(border);
+ border-left-width: 0;
+ border-top-width: 0;
+
+ &:first-child {
+ border-left-width: 1px;
+ }
+ }
+
+ &:first-child {
+ td {
+ border-top-width: 1px;
+ }
+ }
+ }
+ }
+
+ thead {
+ border-bottom: 0;
+ }
+
+ tfoot {
+ border-top: 0;
+ }
+ }
+ }
\ No newline at end of file diff --git a/assets/sass/ie8.scss b/assets/sass/ie8.scss deleted file mode 100755 index c6d416a..0000000 --- a/assets/sass/ie8.scss +++ /dev/null @@ -1,62 +0,0 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@import 'libs/skel'; - -/* - Read Only by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - -/* Basic */ - - code, - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea, - .box, - .image, - .image img, - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - position: relative; - -ms-behavior: url('assets/js/ie/PIE.htc'); - } - -/* Form */ - - input[type="text"], - input[type="password"], - input[type="email"], - select { - line-height: _size(element-height); - } - - input[type="checkbox"], - input[type="radio"] { - @include vendor('appearance', 'normal'); - - & + label { - padding: 0 0 0 1.5em; - - &:before { - display: none; - } - } - } - -/* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - &.alt { - border: solid _size(border-width) _palette(border2); - } - }
\ No newline at end of file diff --git a/assets/sass/layout/_page-wrapper.scss b/assets/sass/layout/_page-wrapper.scss new file mode 100644 index 0000000..b63a3aa --- /dev/null +++ b/assets/sass/layout/_page-wrapper.scss @@ -0,0 +1,43 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Page Wrapper */
+
+ #page-wrapper {
+ @include vendor('display', 'flex');
+ @include vendor('align-items', 'center');
+ @include vendor('justify-content', 'flex-start');
+ @include vendor('flex-grow', '1');
+ @include vendor('flex-shrink', '1');
+ height: 100%;
+ padding: 5rem;
+
+ @include orientation(portrait) {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+
+ @include breakpoint(short) {
+ padding: 6vh;
+ }
+
+ @include breakpoint(xshort) {
+ padding: 0;
+ }
+ }
+
+ @include breakpoint(small) {
+ #page-wrapper {
+ height: auto;
+ padding: 1rem;
+ }
+ }
+
+ @include breakpoint(xsmall) {
+ #page-wrapper {
+ padding: 0;
+ }
+ }
\ 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..21ed225 --- /dev/null +++ b/assets/sass/layout/_wrapper.scss @@ -0,0 +1,118 @@ +///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper */
+
+ #wrapper {
+ @include vendor('display', 'flex');
+ @include vendor('flex-direction', 'row');
+ @include vendor('transition', (
+ 'opacity 1s ease-out',
+ 'transform 0.75s ease-out'
+ ));
+ @include vendor('transition-delay', '0.25s');
+ cursor: default;
+ position: relative;
+ height: 32rem;
+ box-shadow: 0 2rem 4rem 0.25rem transparentize(_palette(bg), 0.425);
+
+ > .scrollZone {
+ position: fixed;
+ width: 6rem;
+ height: inherit;
+ cursor: -moz-grab;
+ cursor: -webkit-grab;
+ cursor: -ms-grab;
+ cursor: grab;
+ z-index: _misc(z-index-base) + 100;
+
+ &.left {
+ left: 0;
+ }
+
+ &.right {
+ right: 0;
+ }
+ }
+
+ > .copyright {
+ position: absolute;
+ bottom: -3rem;
+ right: 0;
+ font-size: 0.8rem;
+ color: transparentize(_palette(bg), 0.625);
+ margin-bottom: 0;
+
+ a {
+ &:hover {
+ color: inherit;
+ }
+ }
+ }
+
+ &.is-dragging {
+ @include vendor('user-select', 'none');
+ cursor: -moz-grab;
+ cursor: -webkit-grab;
+ cursor: -ms-grab;
+ cursor: grab;
+
+ * {
+ @include vendor('user-select', 'none');
+ }
+
+ *:not(a, .image) {
+ cursor: -moz-grab;
+ cursor: -webkit-grab;
+ cursor: -ms-grab;
+ cursor: grab;
+ }
+ }
+
+ &.is-dragged {
+ * {
+ @include vendor('pointer-events', 'none');
+ }
+ }
+
+ body.is-loading & {
+ @include vendor('transform', 'translateX(2rem)');
+ opacity: 0;
+ }
+ }
+
+ @include breakpoint(small) {
+ #wrapper {
+ @include vendor('flex-direction', 'column');
+ height: auto;
+ margin: 0 0 5rem 0;
+ box-shadow: 0 0.25rem 1.5rem 0.25rem transparentize(_palette(bg), 0.5);
+
+ > .scrollZone {
+ display: none;
+ }
+
+ > .copyright {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+
+ body.is-loading & {
+ @include vendor('transform', 'translateY(1rem)');
+ }
+ }
+ }
+
+ @include breakpoint(xsmall) {
+ #wrapper {
+ box-shadow: none;
+
+ body.is-loading & {
+ @include vendor('transform', 'none');
+ }
+ }
+ }
\ No newline at end of file diff --git a/assets/sass/libs/_functions.scss b/assets/sass/libs/_functions.scss index 3b834f5..0e08c1a 100755..100644 --- a/assets/sass/libs/_functions.scss +++ b/assets/sass/libs/_functions.scss @@ -1,34 +1,34 @@ -/// 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...); +/// 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/_mixins.scss b/assets/sass/libs/_mixins.scss index 204ba05..d4bf3c8 100755..100644 --- a/assets/sass/libs/_mixins.scss +++ b/assets/sass/libs/_mixins.scss @@ -1,56 +1,398 @@ -/// Makes an element's :before pseudoelement a FontAwesome icon. -/// @param {string} $content Optional content value to use. -/// @param {string} $where Optional pseudoelement to target (before or after). -@mixin icon($content: false, $where: before) { - - text-decoration: none; - - &:#{$where} { - - @if $content { - content: $content; - } - - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - text-transform: none !important; - - } - -} - -/// 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'; - } - - padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $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, '<', '%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}"); - +/// Makes an element's :before pseudoelement a FontAwesome icon.
+/// @param {string} $content Optional content value to use.
+/// @param {string} $where Optional pseudoelement to target (before or after).
+@mixin icon($content: false, $where: before) {
+
+ text-decoration: none;
+
+ &:#{$where} {
+
+ @if $content {
+ content: $content;
+ }
+
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ text-transform: none !important;
+
+ }
+
+}
+
+/// 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}");
+
+}
+
+/// Initializes base flexgrid classes.
+/// @param {string} $vertical-align Vertical alignment of cells.
+/// @param {string} $horizontal-align Horizontal alignment of cells.
+@mixin flexgrid-base($vertical-align: null, $horizontal-align: null) {
+
+ // Grid.
+ @include vendor('display', 'flex');
+ @include vendor('flex-wrap', 'wrap');
+
+ // Vertical alignment.
+ @if ($vertical-align == top) {
+ @include vendor('align-items', 'flex-start');
+ }
+ @else if ($vertical-align == bottom) {
+ @include vendor('align-items', 'flex-end');
+ }
+ @else if ($vertical-align == center) {
+ @include vendor('align-items', 'center');
+ }
+ @else {
+ @include vendor('align-items', 'stretch');
+ }
+
+ // Horizontal alignment.
+ @if ($horizontal-align != null) {
+ text-align: $horizontal-align;
+ }
+
+ // Cells.
+ > * {
+ @include vendor('flex-shrink', '1');
+ @include vendor('flex-grow', '0');
+ }
+
+}
+
+/// Sets up flexgrid columns.
+/// @param {integer} $columns Columns.
+@mixin flexgrid-columns($columns) {
+
+ > * {
+ $cell-width: 100% / $columns;
+ width: #{$cell-width};
+ }
+
+}
+
+/// Sets up flexgrid gutters.
+/// @param {integer} $columns Columns.
+/// @param {number} $gutters Gutters.
+@mixin flexgrid-gutters($columns, $gutters) {
+
+ // Apply padding.
+ > * {
+ $cell-width: 100% / $columns;
+
+ padding: ($gutters * 0.5);
+ width: $cell-width;
+ }
+
+}
+
+/// Sets up flexgrid gutters (flush).
+/// @param {integer} $columns Columns.
+/// @param {number} $gutters Gutters.
+@mixin flexgrid-gutters-flush($columns, $gutters) {
+
+ // Apply padding.
+ > * {
+ $cell-width: 100% / $columns;
+ $cell-width-pad: $gutters / $columns;
+
+ padding: ($gutters * 0.5);
+ width: calc(#{$cell-width} + #{$cell-width-pad});
+ }
+
+ // Clear top/bottom gutters.
+ > :nth-child(-n + #{$columns}) {
+ padding-top: 0;
+ }
+
+ > :nth-last-child(-n + #{$columns}) {
+ padding-bottom: 0;
+ }
+
+ // Clear left/right gutters.
+ > :nth-child(#{$columns}n + 1) {
+ padding-left: 0;
+ }
+
+ > :nth-child(#{$columns}n) {
+ padding-right: 0;
+ }
+
+ // Adjust widths of leftmost and rightmost cells.
+ > :nth-child(#{$columns}n + 1),
+ > :nth-child(#{$columns}n) {
+ $cell-width: 100% / $columns;
+ $cell-width-pad: ($gutters / $columns) - ($gutters / 2);
+
+ width: calc(#{$cell-width} + #{$cell-width-pad});
+ }
+
+}
+
+/// Reset flexgrid gutters (flush only).
+/// Used to override a previous set of flexgrid gutter classes.
+/// @param {integer} $columns Columns.
+/// @param {number} $gutters Gutters.
+/// @param {integer} $prev-columns Previous columns.
+@mixin flexgrid-gutters-flush-reset($columns, $gutters, $prev-columns) {
+
+ // Apply padding.
+ > * {
+ $cell-width: 100% / $prev-columns;
+ $cell-width-pad: $gutters / $prev-columns;
+
+ padding: ($gutters * 0.5);
+ width: calc(#{$cell-width} + #{$cell-width-pad});
+ }
+
+ // Clear top/bottom gutters.
+ > :nth-child(-n + #{$prev-columns}) {
+ padding-top: ($gutters * 0.5);
+ }
+
+ > :nth-last-child(-n + #{$prev-columns}) {
+ padding-bottom: ($gutters * 0.5);
+ }
+
+ // Clear left/right gutters.
+ > :nth-child(#{$prev-columns}n + 1) {
+ padding-left: ($gutters * 0.5);
+ }
+
+ > :nth-child(#{$prev-columns}n) {
+ padding-right: ($gutters * 0.5);
+ }
+
+ // Adjust widths of leftmost and rightmost cells.
+ > :nth-child(#{$prev-columns}n + 1),
+ > :nth-child(#{$prev-columns}n) {
+ $cell-width: 100% / $columns;
+ $cell-width-pad: $gutters / $columns;
+
+ padding: ($gutters * 0.5);
+ width: calc(#{$cell-width} + #{$cell-width-pad});
+ }
+
+}
+
+/// Adds debug styles to current flexgrid element.
+@mixin flexgrid-debug() {
+
+ box-shadow: 0 0 0 1px red;
+
+ > * {
+ box-shadow: inset 0 0 0 1px blue;
+ position: relative;
+
+ > * {
+ position: relative;
+ box-shadow: inset 0 0 0 1px green;
+ }
+ }
+
+}
+
+/// Initializes the current element as a flexgrid.
+/// @param {integer} $columns Columns (optional).
+/// @param {number} $gutters Gutters (optional).
+/// @param {bool} $flush If true, clears padding around the very edge of the grid.
+@mixin flexgrid($settings: ()) {
+
+ // Settings.
+
+ // Debug.
+ $debug: false;
+
+ @if (map-has-key($settings, 'debug')) {
+ $debug: map-get($settings, 'debug');
+ }
+
+ // Vertical align.
+ $vertical-align: null;
+
+ @if (map-has-key($settings, 'vertical-align')) {
+ $vertical-align: map-get($settings, 'vertical-align');
+ }
+
+ // Horizontal align.
+ $horizontal-align: null;
+
+ @if (map-has-key($settings, 'horizontal-align')) {
+ $horizontal-align: map-get($settings, 'horizontal-align');
+ }
+
+ // Columns.
+ $columns: null;
+
+ @if (map-has-key($settings, 'columns')) {
+ $columns: map-get($settings, 'columns');
+ }
+
+ // Gutters.
+ $gutters: 0;
+
+ @if (map-has-key($settings, 'gutters')) {
+ $gutters: map-get($settings, 'gutters');
+ }
+
+ // Flush.
+ $flush: true;
+
+ @if (map-has-key($settings, 'flush')) {
+ $flush: map-get($settings, 'flush');
+ }
+
+ // Initialize base grid.
+ @include flexgrid-base($vertical-align, $horizontal-align);
+
+ // Debug?
+ @if ($debug) {
+ @include flexgrid-debug;
+ }
+
+ // Columns specified?
+ @if ($columns != null) {
+
+ // Initialize columns.
+ @include flexgrid-columns($columns);
+
+ // Gutters specified?
+ @if ($gutters > 0) {
+
+ // Flush gutters?
+ @if ($flush) {
+
+ // Initialize gutters (flush).
+ @include flexgrid-gutters-flush($columns, $gutters);
+
+ }
+
+ // Otherwise ...
+ @else {
+
+ // Initialize gutters.
+ @include flexgrid-gutters($columns, $gutters);
+
+ }
+
+ }
+
+ }
+
+}
+
+/// Resizes a previously-initialized grid.
+/// @param {integer} $columns Columns.
+/// @param {number} $gutters Gutters (optional).
+/// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true).
+/// @param {bool} $flush If true, clears padding around the very edge of the grid.
+@mixin flexgrid-resize($settings: ()) {
+
+ // Settings.
+
+ // Columns.
+ $columns: 1;
+
+ @if (map-has-key($settings, 'columns')) {
+ $columns: map-get($settings, 'columns');
+ }
+
+ // Gutters.
+ $gutters: 0;
+
+ @if (map-has-key($settings, 'gutters')) {
+ $gutters: map-get($settings, 'gutters');
+ }
+
+ // Previous columns.
+ $prev-columns: false;
+
+ @if (map-has-key($settings, 'prev-columns')) {
+ $prev-columns: map-get($settings, 'prev-columns');
+ }
+
+ // Flush.
+ $flush: true;
+
+ @if (map-has-key($settings, 'flush')) {
+ $flush: map-get($settings, 'flush');
+ }
+
+ // Resize columns.
+ @include flexgrid-columns($columns);
+
+ // Gutters specified?
+ @if ($gutters > 0) {
+
+ // Flush gutters?
+ @if ($flush) {
+
+ // Previous columns specified?
+ @if ($prev-columns) {
+
+ // Convert to list if it isn't one already.
+ @if (type-of($prev-columns) != list) {
+ $prev-columns: ($prev-columns);
+ }
+
+ // Step through list of previous columns and reset them.
+ @each $x in $prev-columns {
+ @include flexgrid-gutters-flush-reset($columns, $gutters, $x);
+ }
+
+ }
+
+ // Resize gutters (flush).
+ @include flexgrid-gutters-flush($columns, $gutters);
+
+ }
+
+ // Otherwise ...
+ @else {
+
+ // Resize gutters.
+ @include flexgrid-gutters($columns, $gutters);
+
+ }
+
+ }
+
}
\ No newline at end of file diff --git a/assets/sass/libs/_skel.scss b/assets/sass/libs/_skel.scss index ba5b506..f5e0dcd 100755..100644 --- a/assets/sass/libs/_skel.scss +++ b/assets/sass/libs/_skel.scss @@ -1,585 +1,587 @@ -// skel.scss v3.0.1 | (c) skel.io | MIT licensed */ - -// Vars. - - /// Breakpoints. - /// @var {list} - $breakpoints: () !global; - - /// Vendor prefixes. - /// @var {list} - $vendor-prefixes: ( - '-moz-', - '-webkit-', - '-ms-', - '' - ); - - /// Properties that should be vendorized. - /// @var {list} - $vendor-properties: ( - 'align-content', - 'align-items', - 'align-self', - 'animation', - 'animation-delay', - 'animation-direction', - 'animation-duration', - 'animation-fill-mode', - 'animation-iteration-count', - 'animation-name', - 'animation-play-state', - 'animation-timing-function', - 'appearance', - 'backface-visibility', - 'box-sizing', - 'filter', - 'flex', - 'flex-basis', - 'flex-direction', - 'flex-flow', - 'flex-grow', - 'flex-shrink', - 'flex-wrap', - 'justify-content', - 'order', - 'perspective', - 'pointer-events', - 'transform', - 'transform-origin', - 'transform-style', - 'transition', - 'transition-delay', - 'transition-duration', - 'transition-property', - 'transition-timing-function', - 'user-select' - ); - - /// Values that should be vendorized. - /// @var {list} - $vendor-values: ( - 'filter', - 'flex', - 'linear-gradient', - 'radial-gradient', - 'transform' - ); - -// 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; - - } - - /// 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; - - } - -// Mixins. - - /// Sets the global box model. - /// @param {string} $model Model (default is content). - @mixin boxModel($model: 'content') { - - $x: $model + '-box'; - - *, *:before, *:after { - -moz-box-sizing: #{$x}; - -webkit-box-sizing: #{$x}; - box-sizing: #{$x}; - } - - } - - /// Wraps @content in a @media block using a given breakpoint. - /// @param {string} $breakpoint Breakpoint. - /// @param {map} $queries Additional queries. - @mixin breakpoint($breakpoint: null, $queries: null) { - - $query: 'screen'; - - // Breakpoint. - @if $breakpoint and map-has-key($breakpoints, $breakpoint) { - $query: $query + ' and ' + map-get($breakpoints, $breakpoint); - } - - // Queries. - @if $queries { - @each $k, $v in $queries { - $query: $query + ' and (' + $k + ':' + $v + ')'; - } - } - - @media #{$query} { - @content; - } - - } - - /// Wraps @content in a @media block targeting a specific orientation. - /// @param {string} $orientation Orientation. - @mixin orientation($orientation) { - @media screen and (orientation: #{$orientation}) { - @content; - } - } - - /// Utility mixin for containers. - /// @param {mixed} $width Width. - @mixin containers($width) { - - // Locked? - $lock: false; - - @if length($width) == 2 { - $width: nth($width, 1); - $lock: true; - } - - // Modifiers. - .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; } - .container.\37 5\25 { width: $width * 0.75; } - .container.\35 0\25 { width: $width * 0.5; } - .container.\32 5\25 { width: $width * 0.25; } - - // Main class. - .container { - @if $lock { - width: $width !important; - } - @else { - width: $width; - } - } - - } - - /// Utility mixin for grid. - /// @param {list} $gutters Column and row gutters (default is 40px). - /// @param {string} $breakpointName Optional breakpoint name. - @mixin grid($gutters: 40px, $breakpointName: null) { - - // Gutters. - @include grid-gutters($gutters); - @include grid-gutters($gutters, \32 00\25, 2); - @include grid-gutters($gutters, \31 50\25, 1.5); - @include grid-gutters($gutters, \35 0\25, 0.5); - @include grid-gutters($gutters, \32 5\25, 0.25); - - // Cells. - $x: ''; - - @if $breakpointName { - $x: '\\28' + $breakpointName + '\\29'; - } - - .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; } - .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; } - .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; } - .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; } - .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; } - .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; } - .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; } - .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; } - .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; } - .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; } - .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; } - .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; } - - .\31 2u\24#{$x} + *, - .\31 1u\24#{$x} + *, - .\31 0u\24#{$x} + *, - .\39 u\24#{$x} + *, - .\38 u\24#{$x} + *, - .\37 u\24#{$x} + *, - .\36 u\24#{$x} + *, - .\35 u\24#{$x} + *, - .\34 u\24#{$x} + *, - .\33 u\24#{$x} + *, - .\32 u\24#{$x} + *, - .\31 u\24#{$x} + * { - clear: left; - } - - .\-11u#{$x} { margin-left: 91.6666666667% } - .\-10u#{$x} { margin-left: 83.3333333333% } - .\-9u#{$x} { margin-left: 75% } - .\-8u#{$x} { margin-left: 66.6666666667% } - .\-7u#{$x} { margin-left: 58.3333333333% } - .\-6u#{$x} { margin-left: 50% } - .\-5u#{$x} { margin-left: 41.6666666667% } - .\-4u#{$x} { margin-left: 33.3333333333% } - .\-3u#{$x} { margin-left: 25% } - .\-2u#{$x} { margin-left: 16.6666666667% } - .\-1u#{$x} { margin-left: 8.3333333333% } - - } - - /// Utility mixin for grid. - /// @param {list} $gutters Gutters. - /// @param {string} $class Optional class name. - /// @param {integer} $multiplier Multiplier (default is 1). - @mixin grid-gutters($gutters, $class: null, $multiplier: 1) { - - // Expand gutters if it's not a list. - @if length($gutters) == 1 { - $gutters: ($gutters, 0); - } - - // Get column and row gutter values. - $c: nth($gutters, 1); - $r: nth($gutters, 2); - - // Get class (if provided). - $x: ''; - - @if $class { - $x: '.' + $class; - } - - // Default. - .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); } - .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } - - // Uniform. - .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); } - .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } - - } - - /// 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; } - - } - - /// - /// Sets breakpoints. - /// @param {map} $x Breakpoints. - /// - @mixin skel-breakpoints($x: ()) { - $breakpoints: $x !global; - } - - /// - /// Initializes layout module. - /// @param {map} config Config. - /// - @mixin skel-layout($config: ()) { - - // Config. - $configPerBreakpoint: (); - - $z: map-get($config, 'breakpoints'); - - @if $z { - $configPerBreakpoint: $z; - } - - // Reset. - $x: map-get($config, 'reset'); - - @if $x { - - /* Reset */ - - @include reset($x); - - } - - // Box model. - $x: map-get($config, 'boxModel'); - - @if $x { - - /* Box Model */ - - @include boxModel($x); - - } - - // Containers. - $containers: map-get($config, 'containers'); - - @if $containers { - - /* Containers */ - - .container { - margin-left: auto; - margin-right: auto; - } - - // Use default is $containers is just "true". - @if $containers == true { - $containers: 960px; - } - - // Apply base. - @include containers($containers); - - // Apply per-breakpoint. - @each $name in map-keys($breakpoints) { - - // Get/use breakpoint setting if it exists. - $x: map-get($configPerBreakpoint, $name); - - // Per-breakpoint config exists? - @if $x { - $y: map-get($x, 'containers'); - - // Setting exists? Use it. - @if $y { - $containers: $y; - } - - } - - // Create @media block. - @media screen and #{map-get($breakpoints, $name)} { - @include containers($containers); - } - - } - - } - - // Grid. - $grid: map-get($config, 'grid'); - - @if $grid { - - /* Grid */ - - // Use defaults if $grid is just "true". - @if $grid == true { - $grid: (); - } - - // Sub-setting: Gutters. - $grid-gutters: 40px; - $x: map-get($grid, 'gutters'); - - @if $x { - $grid-gutters: $x; - } - - // Rows. - .row { - border-bottom: solid 1px transparent; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - .row > * { - float: left; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - .row:after, .row:before { - content: ''; - display: block; - clear: both; - height: 0; - } - - .row.uniform > * > :first-child { - margin-top: 0; - } - - .row.uniform > * > :last-child { - margin-bottom: 0; - } - - // Gutters (0%). - @include grid-gutters($grid-gutters, \30 \25, 0); - - // Apply base. - @include grid($grid-gutters); - - // Apply per-breakpoint. - @each $name in map-keys($breakpoints) { - - // Get/use breakpoint setting if it exists. - $x: map-get($configPerBreakpoint, $name); - - // Per-breakpoint config exists? - @if $x { - $y: map-get($x, 'grid'); - - // Setting exists? - @if $y { - - // Sub-setting: Gutters. - $x: map-get($y, 'gutters'); - - @if $x { - $grid-gutters: $x; - } - - } - - } - - // Create @media block. - @media screen and #{map-get($breakpoints, $name)} { - @include grid($grid-gutters, $name); - } - - } - - } - - } - - /// Resets browser styles. - /// @param {string} $mode Mode (default is 'normalize'). - @mixin reset($mode: 'normalize') { - - @if $mode == 'normalize' { - - // normalize.css v3.0.2 | MIT License | git.io/normalize - html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} - - } - @else if $mode == 'full' { - - // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (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;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} - - } - - } - - /// 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}; - } - +// skel.scss v3.0.2-dev | (c) skel.io | MIT licensed */
+
+// Vars.
+
+ /// Breakpoints.
+ /// @var {list}
+ $breakpoints: () !global;
+
+ /// Vendor prefixes.
+ /// @var {list}
+ $vendor-prefixes: (
+ '-moz-',
+ '-webkit-',
+ '-ms-',
+ ''
+ );
+
+ /// Properties that should be vendorized.
+ /// @var {list}
+ $vendor-properties: (
+ 'align-content',
+ 'align-items',
+ 'align-self',
+ 'animation',
+ 'animation-delay',
+ 'animation-direction',
+ 'animation-duration',
+ 'animation-fill-mode',
+ 'animation-iteration-count',
+ 'animation-name',
+ 'animation-play-state',
+ 'animation-timing-function',
+ 'appearance',
+ 'backface-visibility',
+ 'box-sizing',
+ 'filter',
+ 'flex',
+ 'flex-basis',
+ 'flex-direction',
+ 'flex-flow',
+ 'flex-grow',
+ 'flex-shrink',
+ 'flex-wrap',
+ 'justify-content',
+ 'object-fit',
+ 'object-position',
+ 'order',
+ 'perspective',
+ 'pointer-events',
+ 'transform',
+ 'transform-origin',
+ 'transform-style',
+ 'transition',
+ 'transition-delay',
+ 'transition-duration',
+ 'transition-property',
+ 'transition-timing-function',
+ 'user-select'
+ );
+
+ /// Values that should be vendorized.
+ /// @var {list}
+ $vendor-values: (
+ 'filter',
+ 'flex',
+ 'linear-gradient',
+ 'radial-gradient',
+ 'transform'
+ );
+
+// 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;
+
+ }
+
+ /// 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;
+
+ }
+
+// Mixins.
+
+ /// Sets the global box model.
+ /// @param {string} $model Model (default is content).
+ @mixin boxModel($model: 'content') {
+
+ $x: $model + '-box';
+
+ *, *:before, *:after {
+ -moz-box-sizing: #{$x};
+ -webkit-box-sizing: #{$x};
+ box-sizing: #{$x};
+ }
+
+ }
+
+ /// Wraps @content in a @media block using a given breakpoint.
+ /// @param {string} $breakpoint Breakpoint.
+ /// @param {map} $queries Additional queries.
+ @mixin breakpoint($breakpoint: null, $queries: null) {
+
+ $query: 'screen';
+
+ // Breakpoint.
+ @if $breakpoint and map-has-key($breakpoints, $breakpoint) {
+ $query: $query + ' and ' + map-get($breakpoints, $breakpoint);
+ }
+
+ // Queries.
+ @if $queries {
+ @each $k, $v in $queries {
+ $query: $query + ' and (' + $k + ':' + $v + ')';
+ }
+ }
+
+ @media #{$query} {
+ @content;
+ }
+
+ }
+
+ /// Wraps @content in a @media block targeting a specific orientation.
+ /// @param {string} $orientation Orientation.
+ @mixin orientation($orientation) {
+ @media screen and (orientation: #{$orientation}) {
+ @content;
+ }
+ }
+
+ /// Utility mixin for containers.
+ /// @param {mixed} $width Width.
+ @mixin containers($width) {
+
+ // Locked?
+ $lock: false;
+
+ @if length($width) == 2 {
+ $width: nth($width, 1);
+ $lock: true;
+ }
+
+ // Modifiers.
+ .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; }
+ .container.\37 5\25 { width: $width * 0.75; }
+ .container.\35 0\25 { width: $width * 0.5; }
+ .container.\32 5\25 { width: $width * 0.25; }
+
+ // Main class.
+ .container {
+ @if $lock {
+ width: $width !important;
+ }
+ @else {
+ width: $width;
+ }
+ }
+
+ }
+
+ /// Utility mixin for grid.
+ /// @param {list} $gutters Column and row gutters (default is 40px).
+ /// @param {string} $breakpointName Optional breakpoint name.
+ @mixin grid($gutters: 40px, $breakpointName: null) {
+
+ // Gutters.
+ @include grid-gutters($gutters);
+ @include grid-gutters($gutters, \32 00\25, 2);
+ @include grid-gutters($gutters, \31 50\25, 1.5);
+ @include grid-gutters($gutters, \35 0\25, 0.5);
+ @include grid-gutters($gutters, \32 5\25, 0.25);
+
+ // Cells.
+ $x: '';
+
+ @if $breakpointName {
+ $x: '\\28' + $breakpointName + '\\29';
+ }
+
+ .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; }
+ .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; }
+ .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; }
+ .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; }
+ .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; }
+ .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; }
+ .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; }
+ .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; }
+ .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; }
+ .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; }
+ .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; }
+ .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; }
+
+ .\31 2u\24#{$x} + *,
+ .\31 1u\24#{$x} + *,
+ .\31 0u\24#{$x} + *,
+ .\39 u\24#{$x} + *,
+ .\38 u\24#{$x} + *,
+ .\37 u\24#{$x} + *,
+ .\36 u\24#{$x} + *,
+ .\35 u\24#{$x} + *,
+ .\34 u\24#{$x} + *,
+ .\33 u\24#{$x} + *,
+ .\32 u\24#{$x} + *,
+ .\31 u\24#{$x} + * {
+ clear: left;
+ }
+
+ .\-11u#{$x} { margin-left: 91.6666666667% }
+ .\-10u#{$x} { margin-left: 83.3333333333% }
+ .\-9u#{$x} { margin-left: 75% }
+ .\-8u#{$x} { margin-left: 66.6666666667% }
+ .\-7u#{$x} { margin-left: 58.3333333333% }
+ .\-6u#{$x} { margin-left: 50% }
+ .\-5u#{$x} { margin-left: 41.6666666667% }
+ .\-4u#{$x} { margin-left: 33.3333333333% }
+ .\-3u#{$x} { margin-left: 25% }
+ .\-2u#{$x} { margin-left: 16.6666666667% }
+ .\-1u#{$x} { margin-left: 8.3333333333% }
+
+ }
+
+ /// Utility mixin for grid.
+ /// @param {list} $gutters Gutters.
+ /// @param {string} $class Optional class name.
+ /// @param {integer} $multiplier Multiplier (default is 1).
+ @mixin grid-gutters($gutters, $class: null, $multiplier: 1) {
+
+ // Expand gutters if it's not a list.
+ @if length($gutters) == 1 {
+ $gutters: ($gutters, 0);
+ }
+
+ // Get column and row gutter values.
+ $c: nth($gutters, 1);
+ $r: nth($gutters, 2);
+
+ // Get class (if provided).
+ $x: '';
+
+ @if $class {
+ $x: '.' + $class;
+ }
+
+ // Default.
+ .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); }
+ .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); }
+
+ // Uniform.
+ .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); }
+ .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); }
+
+ }
+
+ /// 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; }
+
+ }
+
+ ///
+ /// Sets breakpoints.
+ /// @param {map} $x Breakpoints.
+ ///
+ @mixin skel-breakpoints($x: ()) {
+ $breakpoints: $x !global;
+ }
+
+ ///
+ /// Initializes layout module.
+ /// @param {map} config Config.
+ ///
+ @mixin skel-layout($config: ()) {
+
+ // Config.
+ $configPerBreakpoint: ();
+
+ $z: map-get($config, 'breakpoints');
+
+ @if $z {
+ $configPerBreakpoint: $z;
+ }
+
+ // Reset.
+ $x: map-get($config, 'reset');
+
+ @if $x {
+
+ /* Reset */
+
+ @include reset($x);
+
+ }
+
+ // Box model.
+ $x: map-get($config, 'boxModel');
+
+ @if $x {
+
+ /* Box Model */
+
+ @include boxModel($x);
+
+ }
+
+ // Containers.
+ $containers: map-get($config, 'containers');
+
+ @if $containers {
+
+ /* Containers */
+
+ .container {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ // Use default is $containers is just "true".
+ @if $containers == true {
+ $containers: 960px;
+ }
+
+ // Apply base.
+ @include containers($containers);
+
+ // Apply per-breakpoint.
+ @each $name in map-keys($breakpoints) {
+
+ // Get/use breakpoint setting if it exists.
+ $x: map-get($configPerBreakpoint, $name);
+
+ // Per-breakpoint config exists?
+ @if $x {
+ $y: map-get($x, 'containers');
+
+ // Setting exists? Use it.
+ @if $y {
+ $containers: $y;
+ }
+
+ }
+
+ // Create @media block.
+ @media screen and #{map-get($breakpoints, $name)} {
+ @include containers($containers);
+ }
+
+ }
+
+ }
+
+ // Grid.
+ $grid: map-get($config, 'grid');
+
+ @if $grid {
+
+ /* Grid */
+
+ // Use defaults if $grid is just "true".
+ @if $grid == true {
+ $grid: ();
+ }
+
+ // Sub-setting: Gutters.
+ $grid-gutters: 40px;
+ $x: map-get($grid, 'gutters');
+
+ @if $x {
+ $grid-gutters: $x;
+ }
+
+ // Rows.
+ .row {
+ border-bottom: solid 1px transparent;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ .row > * {
+ float: left;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ .row:after, .row:before {
+ content: '';
+ display: block;
+ clear: both;
+ height: 0;
+ }
+
+ .row.uniform > * > :first-child {
+ margin-top: 0;
+ }
+
+ .row.uniform > * > :last-child {
+ margin-bottom: 0;
+ }
+
+ // Gutters (0%).
+ @include grid-gutters($grid-gutters, \30 \25, 0);
+
+ // Apply base.
+ @include grid($grid-gutters);
+
+ // Apply per-breakpoint.
+ @each $name in map-keys($breakpoints) {
+
+ // Get/use breakpoint setting if it exists.
+ $x: map-get($configPerBreakpoint, $name);
+
+ // Per-breakpoint config exists?
+ @if $x {
+ $y: map-get($x, 'grid');
+
+ // Setting exists?
+ @if $y {
+
+ // Sub-setting: Gutters.
+ $x: map-get($y, 'gutters');
+
+ @if $x {
+ $grid-gutters: $x;
+ }
+
+ }
+
+ }
+
+ // Create @media block.
+ @media screen and #{map-get($breakpoints, $name)} {
+ @include grid($grid-gutters, $name);
+ }
+
+ }
+
+ }
+
+ }
+
+ /// Resets browser styles.
+ /// @param {string} $mode Mode (default is 'normalize').
+ @mixin reset($mode: 'normalize') {
+
+ @if $mode == 'normalize' {
+
+ // normalize.css v3.0.2 | MIT License | git.io/normalize
+ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
+
+ }
+ @else if $mode == 'full' {
+
+ // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (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;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}
+
+ }
+
+ }
+
+ /// 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/libs/_vars.scss b/assets/sass/libs/_vars.scss index 4ef40fb..436780c 100755..100644 --- a/assets/sass/libs/_vars.scss +++ b/assets/sass/libs/_vars.scss @@ -1,63 +1,49 @@ -// Misc. - $misc: ( - z-index-base: 10000, - header-side: 'right' - ); - -// Duration. - $duration: ( - header: 0.5s, - transition: 0.2s - ); - -// Size. - $size: ( - border-radius: 5px, - border-width: 2px, - element-height: 2.75em, - element-margin: 2.25em - ); - -// Font. - $font: ( - family: ('Lato', sans-serif), - family-fixed: ('Source Code Pro', monospace), - weight: 400, - weight-bold: 700 - ); - -// Palette. - $palette: ( - bg: #fff, - fg: #888, - fg-bold: #777, - fg-light: #aaa, - border: #f4f4f4, - border-bg: #fafafa, - border2: #e4e4e4, - border2-bg: #f4f4f4, - border3: #e0e0e0, - border3-bg: #eaeaea, - - accent1: ( - bg: #4acaa8, - fg-bold: #ffffff, - fg: mix(#4acaa8, #ffffff, 25%), - fg-light: mix(#4acaa8, #ffffff, 40%) - ), - - accent2: ( - bg: #989898, - fg-bold: #ffffff, - fg: mix(#989898, #ffffff, 25%), - fg-light: mix(#989898, #ffffff, 40%) - ), - - header: ( - bg: #4acaa8, - fg-bold: #ffffff, - fg: mix(#4acaa8, #ffffff, 25%), - fg-light: mix(#4acaa8, #ffffff, 40%), - border: mix(#4acaa8, #ffffff, 90%) - ) +// Misc.
+ $misc: (
+ z-index-base: 10000,
+ gallery-lightbox-opacity: 0.875
+ );
+
+// Duration.
+ $duration: (
+ transition: 0.2s,
+ gallery-lightbox-fadein: 0.5s
+ );
+
+// Size.
+ $size: (
+ border-radius: 0.25rem,
+ element-height: 2.5rem,
+ element-margin: 1.5rem,
+ pad: 3.5rem,
+ pad-small-tb: 3.5rem * 0.825,
+ pad-small-lr: 3.5rem * 0.5,
+ span-fixed: 10rem,
+ span-variable: 10%
+ );
+
+// Font.
+ $font: (
+ family: ('Source Sans Pro', Helvetica, sans-serif),
+ family-heading: (Arial, Helvetica, sans-serif),
+ family-fixed: ('Courier New', monospace),
+ weight: 300,
+ weight-bold: 400,
+ weight-heading: 700
+ );
+
+// Palette.
+ $palette: (
+ bg: #2e2b37,
+ bg-alt: #e1e6e1,
+ fg: rgba(255,255,255,0.75),
+ fg-bold: rgba(255,255,255,0.875),
+ fg-light: rgba(255,255,255,0.5),
+ border: rgba(255,255,255,0.25),
+ border-bg: rgba(255,255,255,0.075),
+ border-bg-alt: rgba(255,255,255,0.125),
+ accent1: #726193,
+ accent2: #e37b7c,
+ accent3: #ffe4b4,
+ accent4: #353865
);
\ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index d8ab11c..1e590e5 100755..100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,1582 +1,129 @@ -@import 'libs/vars'; -@import 'libs/functions'; -@import 'libs/mixins'; -@charset "UTF-8"; -@import url('font-awesome.min.css'); -@import url("https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Source+Code+Pro:400"); - -/* - Read Only by HTML5 UP - html5up.net | @ajlkn - Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) -*/ - - @import "libs/skel"; - - @include skel-breakpoints(( - xlarge: '(max-width: 1680px)', - large: '(max-width: 1280px)', - medium: '(max-width: 1024px)', - small: '(max-width: 736px)', - xsmall: '(max-width: 480px)' - )); - - @include skel-layout(( - reset: 'full', - boxModel: 'border', - grid: ( gutters: 2em ), - conditionals: true, - containers: 45em, - breakpoints: ( - large: ( - containers: 42em, - grid: ( - gutters: 1.5em - ) - ), - medium: ( - containers: (85%, true), - ), - small: ( - containers: (90%, true), - grid: ( - gutters: 1.25em - ) - ) - ) - )); - - $size-header: 23em; - -/* Basic */ - - body { - background: _palette(bg); - } - - body, input, select, textarea { - color: _palette(fg); - font-family: _font(family); - font-size: 16pt; - font-weight: _font(weight); - line-height: 1.75em; - } - - a { - @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-color #{_duration(transition)} ease-in-out')); - border-bottom: solid 1px _palette(border2); - color: inherit; - text-decoration: none; - - &:hover { - border-bottom-color: transparent; - color: _palette(accent1, bg) !important; - } - } - - strong, b { - color: _palette(fg-bold); - font-weight: _font(weight-bold); - } - - em, i { - font-style: italic; - } - - p { - margin: 0 0 _size(element-margin) 0; - } - - h1, h2, h3, h4, h5, h6 { - color: _palette(fg-bold); - font-weight: _font(weight-bold); - line-height: 1em; - margin: 0 0 (_size(element-margin) * 0.25) 0; - - a { - border: 0; - color: inherit; - text-decoration: none; - } - } - - h2 { - font-size: 2em; - line-height: 1.5em; - } - - h3 { - font-size: 1.75em; - line-height: 1.5em; - } - - h4 { - font-size: 1.25em; - line-height: 1.5em; - } - - h5 { - font-size: 0.9em; - line-height: 1.5em; - } - - h6 { - font-size: 0.7em; - line-height: 1.5em; - } - - sub { - font-size: 0.8em; - position: relative; - top: 0.5em; - } - - sup { - font-size: 0.8em; - position: relative; - top: -0.5em; - } - - hr { - border: 0; - border-bottom: solid _size(border-width) _palette(border); - margin: _size(element-margin) 0; - - &.major { - margin: (_size(element-margin) * 1.5) 0; - } - } - - blockquote { - border-left: solid (_size(border-width) * 4) _palette(border2); - font-style: italic; - margin: 0 0 _size(element-margin) 0; - padding: 0.5em 0 0.5em 2em; - } - - code { - background: #555; - border-radius: _size(border-radius); - color: #fff; - font-family: _font(family-fixed); - font-size: 0.9em; - margin: 0 0.25em; - padding: 0.25em 0.65em; - } - - pre { - font-family: _font(family-fixed); - font-size: 0.9em; - margin: 0 0 _size(element-margin) 0; - - code { - -webkit-overflow-scrolling: touch; - display: block; - line-height: 1.5em; - overflow-x: auto; - padding: 1em 1.5em; - } - } - - .align-left { - text-align: left; - } - - .align-center { - text-align: center; - } - - .align-right { - text-align: right; - } - -/* Section/Article */ - - section, article { - &.special { - text-align: center; - } - } - - header { - p { - color: _palette(fg-light); - position: relative; - margin: 0 0 (_size(element-margin) * 0.75) 0; - } - - h2 + p { - font-size: 1.25em; - margin-top: -0.5em; - line-height: 1.5em; - } - - h3 + p { - font-size: 1.1em; - margin-top: -0.35em; - line-height: 1.5em; - } - - h4 + p, - h5 + p, - h6 + p { - font-size: 0.9em; - margin-top: -0.25em; - line-height: 1.5em; - } - - &.major { - h2 { - color: _palette(accent1, bg); - font-size: 3.5em; - - & + p { - color: _palette(fg-bold); - font-size: 1.75em; - font-weight: _font(weight-bold); - margin-top: -0.75em; - } - } - } - } - - footer { - } - -/* Form */ - - form { - margin: 0 0 _size(element-margin) 0; - } - - label { - color: _palette(fg-bold); - display: block; - font-size: 0.9em; - font-weight: _font(weight-bold); - margin: 0 0 (_size(element-margin) * 0.5) 0; - } - - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea { - @include vendor('appearance', 'none'); - border-radius: _size(border-radius); - border: none; - border: solid _size(border-width) _palette(border2); - color: inherit; - display: block; - outline: 0; - padding: 0 1em; - text-decoration: none; - width: 100%; - - &:invalid { - box-shadow: none; - } - - &:focus { - border-color: _palette(accent1, bg); - } - } - - .select-wrapper { - @include icon; - display: block; - position: relative; - - &:before { - color: _palette(border2); - content: '\f078'; - display: block; - height: _size(element-height); - line-height: _size(element-height); - pointer-events: none; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: _size(element-height); - } - - select::-ms-expand { - display: none; - } - } - - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: _size(element-height); - } - - textarea { - padding: 0.75em 1em; - } - - input[type="checkbox"], - input[type="radio"] { - @include vendor('appearance', 'none'); - display: block; - float: left; - margin-right: -2em; - opacity: 0; - width: 1em; - z-index: -1; - - & + label { - @include icon; - color: _palette(fg); - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: _font(weight); - padding-left: (_size(element-height) * 0.6) + 0.75em; - padding-right: 0.75em; - position: relative; - - &:before { - background: _palette(border-bg); - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border2); - content: ''; - display: inline-block; - height: (_size(element-height) * 0.6); - left: 0; - line-height: (_size(element-height) * 0.575); - position: absolute; - text-align: center; - top: 0; - width: (_size(element-height) * 0.6); - } - } - - &:checked + label { - &:before { - background: _palette(accent2, bg); - border-color: _palette(accent2, bg); - color: _palette(accent2, fg-bold); - content: '\f00c'; - } - } - - &:focus + label { - &:before { - border-color: _palette(accent1, bg); - } - } - } - - input[type="checkbox"] { - & + label { - &:before { - border-radius: _size(border-radius); - } - } - } - - input[type="radio"] { - & + label { - &:before { - border-radius: 100%; - } - } - } - - ::-webkit-input-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - - :-moz-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - - ::-moz-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - - :-ms-input-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - - .formerize-placeholder { - color: _palette(fg-light) !important; - font-style: italic; - opacity: 1.0; - } - -/* Box */ - - .box { - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border2); - margin-bottom: _size(element-margin); - padding: 1.5em; - - > :last-child, - > :last-child > :last-child, - > :last-child > :last-child > :last-child { - margin-bottom: 0; - } - - &.alt { - border: 0; - border-radius: 0; - padding: 0; - } - } - -/* Icon */ - - .icon { - @include icon; - border-bottom: none; - position: relative; - - > .label { - display: none; - } - } - -/* Image */ - - .image { - border-radius: _size(border-radius); - border: 0; - display: inline-block; - position: relative; - - img { - border-radius: _size(border-radius); - display: block; - } - - &.left { - float: left; - margin: 0 2.5em 2em 0; - top: 0.25em; - } - - &.right { - float: right; - margin: 0 0 2em 2.5em; - top: 0.25em; - } - - &.fit { - display: block; - margin: 0 0 _size(element-margin) 0; - width: 100%; - - img { - display: block; - width: 100%; - } - } - - &.avatar { - border-radius: 100%; - overflow: hidden; - - img { - border-radius: 100%; - display: block; - width: 100%; - } - } - } - -/* List */ - - ol { - list-style: decimal; - margin: 0 0 _size(element-margin) 0; - padding-left: 1.25em; - - li { - padding-left: 0.25em; - } - } - - ul { - list-style: disc; - margin: 0 0 _size(element-margin) 0; - padding-left: 1em; - - li { - padding-left: 0.5em; - } - - &.alt { - list-style: none; - padding-left: 0; - - li { - border-top: solid _size(border-width) _palette(border); - padding: 0.5em 0; - - &:first-child { - border-top: 0; - padding-top: 0; - } - } - } - - &.feature-icons { - list-style: none; - padding-left: 0; - - li { - @include icon; - display: inline-block; - margin: 0 0 (_size(element-margin) * 0.75) 0; - padding: 0.35em 0 0 3.5em; - position: relative; - vertical-align: top; - width: 48%; - - &:before { - background: _palette(accent1, bg); - border-radius: 100%; - color: _palette(accent1, fg-bold); - display: block; - height: 2.5em; - left: 0; - line-height: 2.5em; - position: absolute; - text-align: center; - top: 0; - width: 2.5em; - } - } - } - - &.icons { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding: 0 1em 0 0; - - &:last-child { - padding-right: 0 !important; - } - - .icon { - &:before { - font-size: 1.25em; - } - } - } - } - - &.actions { - cursor: default; - list-style: none; - padding-left: 0; - - li { - display: inline-block; - padding: 0 (_size(element-margin) * 0.5) 0 0; - vertical-align: middle; - - &:last-child { - padding-right: 0; - } - } - - &.small { - li { - padding: 0 (_size(element-margin) * 0.25) 0 0; - } - } - - &.vertical { - li { - display: block; - padding: (_size(element-margin) * 0.5) 0 0 0; - - &:first-child { - padding-top: 0; - } - - > * { - margin-bottom: 0; - } - } - - &.small { - li { - padding: (_size(element-margin) * 0.25) 0 0 0; - - &:first-child { - padding-top: 0; - } - } - } - } - - &.fit { - display: table; - margin-left: (_size(element-margin) * -0.5); - padding: 0; - table-layout: fixed; - width: calc(100% + #{(_size(element-margin) * 0.5)}); - - li { - display: table-cell; - padding: 0 0 0 (_size(element-margin) * 0.5); - - > * { - margin-bottom: 0; - } - } - - &.small { - margin-left: (_size(element-margin) * -0.25); - width: calc(100% + #{(_size(element-margin) * 0.25)}); - - li { - padding: 0 0 0 (_size(element-margin) * 0.25); - } - } - } - } - } - - dl { - margin: 0 0 _size(element-margin) 0; - } - -/* Table */ - - .table-wrapper { - -webkit-overflow-scrolling: touch; - overflow-x: auto; - } - - table { - margin: 0 0 _size(element-margin) 0; - width: 100%; - - tbody { - tr { - border: solid _size(border-width) _palette(border); - border-left: 0; - border-right: 0; - - &:nth-child(2n + 1) { - background-color: _palette(border-bg); - } - } - } - - td { - padding: 0.75em 0.75em; - } - - th { - color: _palette(fg-bold); - font-size: 0.9em; - font-weight: _font(weight-bold); - padding: 0 0.75em 0.75em 0.75em; - text-align: left; - } - - thead { - border-bottom: solid (_size(border-width) * 2) _palette(border2); - } - - tfoot { - border-top: solid (_size(border-width) * 2) _palette(border2); - } - - &.alt { - border-collapse: separate; - - tbody { - tr { - td { - border: solid _size(border-width) _palette(border2); - 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; - } - } - } - -/* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - @include vendor('appearance', 'none'); - @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out')); - background-color: _palette(accent2, bg); - border-radius: _size(border-radius); - border: 0; - color: _palette(accent2, fg-bold) !important; - cursor: pointer; - display: inline-block; - font-weight: _font(weight-bold); - height: _size(element-height); - line-height: _size(element-height); - padding: 0 1.5em; - text-align: center; - text-decoration: none; - white-space: nowrap; - - &:hover { - background-color: lighten(_palette(accent2, bg), 5); - color: _palette(accent2, fg-bold) !important; - } - - &:active { - background-color: darken(_palette(accent2, bg), 5); - } - - &.icon { - padding-left: 1.35em; - - &:before { - margin-right: 0.5em; - } - } - - &.fit { - display: block; - margin: 0 0 (_size(element-margin) * 0.5) 0; - width: 100%; - } - - &.small { - font-size: 0.8em; - } - - &.big { - font-size: 1.35em; - } - - &.alt { - background-color: transparent; - box-shadow: inset 0 0 0 _size(border-width) _palette(border2); - color: _palette(fg-bold) !important; - - &:hover { - background-color: _palette(border2-bg); - color: _palette(fg-bold) !important; - } - - &:active { - background-color: _palette(border3-bg); - } - - &.icon { - &:before { - color: _palette(fg-light); - } - } - } - - &.special { - background-color: _palette(accent1, bg); - color: _palette(accent1, fg-bold) !important; - - &:hover { - background-color: lighten(_palette(accent1, bg), 5); - } - - &:active { - background-color: darken(_palette(accent1, bg), 5); - } - } - - &.disabled, - &:disabled { - background-color: _palette(fg) !important; - box-shadow: inset 0 -0.15em 0 0 rgba(0,0,0,0.15); - color: _palette(bg) !important; - cursor: default; - opacity: 0.25; - } - } - -/* Features */ - - .features { - article { - border-top: solid (_size(border-width) * 1.5) _palette(border); - margin-bottom: _size(element-margin); - padding-top: _size(element-margin); - - &:first-child { - border-top: 0; - padding-top: 0; - } - - .image { - display: inline-block; - padding-right: 2.5em; - vertical-align: middle; - width: 48%; - - img { - display: block; - width: 100%; - } - } - - .inner { - display: inline-block; - vertical-align: middle; - width: 50%; - - > :last-child { - margin-bottom: 0; - } - } - } - } - -/* Header */ - - #header { - @include vendor('display', 'flex'); - @include vendor('flex-direction', 'column'); - @include vendor('justify-content', 'space-between'); - background: _palette(header, bg); - color: _palette(header, fg); - height: 100%; - overflow-y: auto; - position: fixed; - text-align: center; - top: 0; - width: $size-header; - - @if _misc(header-side) == 'right' { - right: 0; - } - @else { - left: 0; - } - - h1, h2, h3, h4, h5, h6 { - color: _palette(header, fg-bold); - - a { - color: _palette(header, fg-bold); - } - } - - header { - p { - color: _palette(header, fg-light); - } - } - - a { - color: _palette(header, fg); - - &:hover { - color: _palette(header, fg-bold) !important; - } - } - - > header { - @include vendor('flex-shrink', '0'); - padding: 3em; - - .avatar { - display: block; - margin: 0 auto _size(element-margin) auto; - width: 8em; - } - - h1 { - font-size: 1.75em; - margin: 0; - } - - p { - color: _palette(header, fg); - font-style: italic; - margin: 1em 0 0 0; - } - } - - > footer { - @include vendor('flex-shrink', '0'); - bottom: 0; - left: 0; - padding: 2em; - width: 100%; - - .icons { - margin: 0; - - li { - a { - color: _palette(header, fg-light); - } - } - } - } - - > nav { - @include vendor('flex-grow', '1'); - - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - border-top: solid _size(border-width) _palette(header, border); - display: block; - padding: 0; - - a { - @include vendor('transition', 'none'); - border: 0; - color: _palette(header, fg-bold) !important; - display: block; - padding: 0.85em 0; - text-decoration: none; - - &.active { - background: _palette(bg); - color: _palette(header, bg) !important; - } - } - - &:first-child { - border-top: 0; - } - } - } - } - } - -/* Wrapper */ - - #wrapper { - background: _palette(bg); - - @if _misc(header-side) == 'right' { - padding-right: $size-header; - } - @else { - padding-left: $size-header; - } - } - -/* Main */ - - #main { - > section { - border-top: solid (_size(border-width) * 3) _palette(border); - - > .container { - padding: 6em 0 4em 0; - } - - &:first-child { - border-top: 0; - } - } - } - -/* One */ - - #one { - &:before { - background-image: url('../../images/banner.jpg'); - background-position: top right; - background-repeat: no-repeat; - background-size: cover; - content: ''; - display: block; - height: 15em; - width: 100%; - } - } - -/* Footer */ - - #footer { - background: #fafafa; - border-top: 0; - color: #c0c0c0; - overflow: hidden; - padding: 4em 0 2em 0; - - .copyright { - line-height: 1em; - list-style: none; - padding: 0; - - li { - border-left: solid 1px #d4d4d4; - display: inline-block; - font-size: 0.8em; - margin-left: 1em; - padding-left: 1em; - - &:first-child { - border-left: 0; - margin-left: 0; - padding-left: 0; - } - - a { - color: inherit; - } - } - } - } - -/* XLarge */ - - @include breakpoint(xlarge) { - - $size-header: 21em; - - /* Basic */ - - body, input, select, textarea { - font-size: 13pt; - } - - /* Header */ - - #header { - width: $size-header; - - > header { - padding: 2em; - } - - > footer { - padding: 1.5em; - } - } - - /* Wrapper */ - - #wrapper { - @if _misc(header-side) == 'right' { - padding-right: $size-header; - } - @else { - padding-left: $size-header; - } - } - - /* Main */ - - #main { - > section { - > .container { - padding: 4em 0 2em 0; - } - } - } - - } - -/* Large */ - - @include breakpoint(large) { - - $size-header: 20em; - - /* Basic */ - - body, input, select, textarea { - font-size: 11pt; - } - - /* Header */ - - #header { - width: $size-header; - } - - /* Wrapper */ - - #wrapper { - @if _misc(header-side) == 'right' { - padding-right: $size-header; - } - @else { - padding-left: $size-header; - } - } - - } - -/* Medium */ - - #titleBar { - display: none; - } - - @include breakpoint(medium) { - - /* Basic */ - - html, body { - overflow-x: hidden; - } - - body, input, select, textarea { - font-size: 12pt; - } - - /* Image */ - - .image { - &.left, - &.right { - max-width: 40%; - - img { - width: 100%; - } - } - } - - /* Header */ - - #header { - @include vendor('backface-visibility', 'hidden'); - @include vendor('transition', ('transform #{_duration(header)} ease')); - display: block; - height: 100%; - overflow-y: auto; - position: fixed; - top: 0; - width: $size-header; - z-index: _misc(z-index-base) + 2; - - @if _misc(header-side) == 'right' { - @include vendor('transform', 'translateX(#{$size-header})'); - right: 0; - } - @else { - @include vendor('transform', 'translateX(#{$size-header * -1})'); - left: 0; - } - - > footer { - bottom: auto; - left: auto; - margin: 0.5em 0 0 0; - position: relative; - right: auto; - top: auto; - } - } - - /* Wrapper */ - - #wrapper { - @include vendor('backface-visibility', 'hidden'); - @include vendor('transition', 'transform #{_duration(header)} ease'); - padding: 44px 0 1px 0; - } - - /* One */ - - #one { - &:before { - height: 10em; - } - } - - /* Off-Canvas Navigation */ - - #titleBar { - @include vendor('backface-visibility', 'hidden'); - @include vendor('transition', 'transform #{_duration(header)} ease'); - display: block; - height: 44px; - left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: _misc(z-index-base) + 1; - background: #222; - color: #fff; - min-width: 320px; - - .title { - color: #fff; - display: block; - font-weight: _font(weight-bold); - height: 44px; - line-height: 44px; - padding: 0 1em; - width: 100%; - - @if _misc(header-side) == 'right' { - text-align: left; - } - @else { - text-align: right; - } - - a { - border: 0; - text-decoration: none; - } - } - - .toggle { - @include icon; - height: 4em; - position: absolute; - top: 0; - width: 6em; - border: 0; - outline: 0; - - @if _misc(header-side) == 'right' { - right: 0; - } - @else { - left: 0; - } - - &:before { - background: _palette(accent1, bg); - color: _palette(accent1, fg-bold); - content: '\f0c9'; - display: block; - font-size: 18px; - height: 44px; - line-height: 44px; - position: absolute; - text-align: center; - top: 0; - width: 64px; - - @if _misc(header-side) == 'right' { - right: 0; - } - @else { - left: 0; - } - } - } - } - - body { - &.header-visible { - #wrapper, #titleBar { - @if _misc(header-side) == 'right' { - @include vendor('transform', 'translateX(#{$size-header * -1})'); - } - @else { - @include vendor('transform', 'translateX(#{$size-header})'); - } - } - - #header { - @include vendor('transform', 'translateX(0)'); - } - } - } - - } - -/* Small */ - - @include breakpoint(small) { - - $size-header: 17em; - - /* Basic */ - - body, input, select, textarea { - font-size: 12pt; - } - - h1, h2, h3, h4, h5, h6 { - br { - display: none; - } - } - - h2 { - font-size: 1.75em; - } - - h3 { - font-size: 1.5em; - } - - h4 { - font-size: 1em; - } - - /* Image */ - - .image { - &.left { - margin: 0 1.5em 1em 0; - } - - &.right { - margin: 0 0 1em 1.5em; - } - } - - /* Section/Article */ - - header { - br { - display: none; - } - - &.major { - h2 { - font-size: 2.5em; - - & + p { - font-size: 1.5em; - } - } - } - } - - /* Features */ - - .features { - article { - .image { - display: block; - margin: 0 0 _size(element-margin) 0; - padding-right: 0; - width: 100%; - } - - .inner { - display: block; - width: 100%; - } - } - } - - /* Header */ - - #header { - width: $size-header; - - @if _misc(header-side) == 'right' { - @include vendor('transform', 'translateX(#{$size-header})'); - right: 0; - } - @else { - @include vendor('transform', 'translateX(#{$size-header * -1})'); - left: 0; - } - - > header { - padding: 2em; - - .avatar { - margin: 0 auto (_size(element-margin) * 0.75) auto; - width: 6em; - } - - h1 { - font-size: 1.5em; - } - - p { - margin: 1em 0 0 0; - } - } - - > footer { - padding: 1.5em; - } - } - - /* Main */ - - #main { - > section { - > .container { - padding: 2em 0 0 0; - } - } - } - - /* One */ - - #one { - &:before { - height: 7em; - } - } - - /* Footer */ - - #footer { - text-align: center; - - .copyright { - li { - border-left: 0; - display: block; - line-height: 1.75em; - margin: 0.75em 0 0 0; - padding-left: 0; - - &:first-child { - margin-top: 0; - } - } - } - } - - /* Off-Canvas Navigation */ - - #titleBar { - .toggle { - height: 4em; - width: 6em; - - &:before { - font-size: 14px; - width: 44px; - } - } - } - - body { - &.header-visible { - #wrapper, #titleBar { - @if _misc(header-side) == 'right' { - @include vendor('transform', 'translateX(#{$size-header * -1})'); - } - @else { - @include vendor('transform', 'translateX(#{$size-header})'); - } - } - } - } - - } - -/* XSmall */ - - @include breakpoint(xsmall) { - - /* Basic */ - - html, body { - min-width: 320px; - } - - body, input, select, textarea { - font-size: 12pt; - } - - /* List */ - - ul { - &.actions { - margin: 0 0 _size(element-margin) 0; - - li { - display: block; - padding: (_size(element-margin) * 0.5) 0 0 0; - text-align: center; - width: 100%; - - &:first-child { - padding-top: 0; - } - - > * { - width: 100%; - margin: 0 !important; - - &.icon { - &:before { - margin-left: -2em; - } - } - } - } - - &.small { - li { - padding: (_size(element-margin) * 0.25) 0 0 0; - - &:first-child { - padding-top: 0; - } - } - } - } - - &.feature-icons { - li { - display: block; - width: 100%; - } - } - } - - /* Button */ - - input[type="submit"], - input[type="reset"], - input[type="button"], - .button { - padding: 0; - } - - }
\ No newline at end of file +@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/skel';
+@import 'font-awesome.min.css';
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i");
+
+/*
+ Ethereal by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+ @include skel-breakpoints((
+ xlarge: '(max-width: 1680px)',
+ large: '(max-width: 1280px)',
+ medium: '(max-width: 980px)',
+ small: '(max-width: 736px)',
+ xsmall: '(max-width: 480px)',
+ xxsmall: '(max-width: 360px)',
+ short: '(min-aspect-ratio: 16/7)',
+ xshort: '(min-aspect-ratio: 16/6)'
+ ));
+
+ @include skel-layout((
+ reset: 'full',
+ boxModel: 'border'
+ ));
+
+// Mixins.
+
+ @mixin gradient-background($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%, $angle: 45deg) {
+ $background-image: (
+ url('../../images/overlay.png'),
+ linear-gradient($angle, transparentize(_palette(accent1), (1 - $opacity)) $stop1, transparentize(_palette(accent2), (1 - $opacity)) $stop2, transparentize(_palette(accent3), (1 - $opacity)))
+ );
+
+ $background-size: (
+ 128px 128px,
+ auto
+ );
+
+ @if ($tint) {
+ $x: linear-gradient(0deg, rgba(0,0,0,0.125), rgba(0,0,0,0.125));
+ $y: auto;
+ $background-image: append($background-image, $x);
+ $background-size: append($background-size, $y);
+ }
+
+ background-image: $background-image;
+ background-size: $background-size;
+ }
+
+ @mixin gradient-background-small($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%) {
+ @include gradient-background($tint, $opacity, $stop1, $stop2, 135deg);
+ }
+
+ @mixin spans($x) {
+ @for $i from 0 through 10 {
+
+ @if ($i > 0) {
+ .span-#{$i} {
+ width: ($x * $i);
+ }
+ }
+
+ @if ($i < 10) {
+ .span-#{$i}-25 {
+ width: ($x * $i) + ($x * 0.25);
+ }
+
+ .span-#{$i}-5 {
+ width: ($x * $i) + ($x * 0.5);
+ }
+
+ .span-#{$i}-75 {
+ width: ($x * $i) + ($x * 0.75);
+ }
+ }
+ }
+ }
+
+ @mixin spans-small($x) {
+ @for $i from 0 through 10 {
+
+ @if ($i > 0) {
+ .span-#{$i} {
+ width: 100%;
+ }
+ }
+
+ @if ($i < 10) {
+ .span-#{$i}-25 {
+ width: 100%;
+ }
+
+ .span-#{$i}-5 {
+ width: 100%;
+ }
+
+ .span-#{$i}-75 {
+ width: 100%;
+ }
+ }
+ }
+ }
+
+// Base.
+
+ @import 'base/page';
+ @import 'base/typography';
+
+// Component.
+
+ @import 'components/form';
+ @import 'components/icon';
+ @import 'components/image';
+ @import 'components/list';
+ @import 'components/table';
+ @import 'components/button';
+ @import 'components/gallery';
+ @import 'components/panel';
+ @import 'components/panel-banner';
+ @import 'components/panel-spotlight';
+
+// Layout.
+
+ @import 'layout/page-wrapper';
+ @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..aefc645 --- /dev/null +++ b/assets/sass/noscript.scss @@ -0,0 +1,16 @@ +@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/skel';
+
+/*
+ Ethereal by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Page */
+
+ body {
+ overflow-x: scroll;
+ }
\ No newline at end of file |
