aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.txt383
-rw-r--r--[-rwxr-xr-x]assets/css/font-awesome.min.css0
-rwxr-xr-xassets/css/ie8.css60
-rw-r--r--[-rwxr-xr-x]assets/css/main.css5022
-rw-r--r--assets/css/noscript.css11
-rw-r--r--[-rwxr-xr-x]assets/fonts/FontAwesome.otfbin124988 -> 124988 bytes
-rw-r--r--[-rwxr-xr-x]assets/fonts/fontawesome-webfont.eotbin76518 -> 76518 bytes
-rw-r--r--[-rwxr-xr-x]assets/fonts/fontawesome-webfont.svg0
-rw-r--r--[-rwxr-xr-x]assets/fonts/fontawesome-webfont.ttfbin152796 -> 152796 bytes
-rw-r--r--[-rwxr-xr-x]assets/fonts/fontawesome-webfont.woffbin90412 -> 90412 bytes
-rw-r--r--[-rwxr-xr-x]assets/fonts/fontawesome-webfont.woff2bin71896 -> 71896 bytes
-rwxr-xr-xassets/js/ie/PIE.htc96
-rwxr-xr-xassets/js/ie/html5shiv.js8
-rwxr-xr-xassets/js/ie/respond.min.js6
-rw-r--r--[-rwxr-xr-x]assets/js/jquery.min.js0
-rwxr-xr-xassets/js/jquery.scrolly.min.js2
-rwxr-xr-xassets/js/jquery.scrollzer.min.js2
-rw-r--r--[-rwxr-xr-x]assets/js/main.js877
-rw-r--r--[-rwxr-xr-x]assets/js/skel.min.js2
-rwxr-xr-xassets/js/util.js587
-rw-r--r--assets/sass/base/_page.scss105
-rw-r--r--assets/sass/base/_typography.scss271
-rw-r--r--assets/sass/components/_button.scss156
-rw-r--r--assets/sass/components/_form.scss275
-rw-r--r--assets/sass/components/_gallery.scss218
-rw-r--r--assets/sass/components/_icon.scss17
-rw-r--r--assets/sass/components/_image.scss169
-rw-r--r--assets/sass/components/_list.scss380
-rw-r--r--assets/sass/components/_panel-banner.scss90
-rw-r--r--assets/sass/components/_panel-spotlight.scss81
-rw-r--r--assets/sass/components/_panel.scss300
-rw-r--r--assets/sass/components/_table.scss81
-rwxr-xr-xassets/sass/ie8.scss62
-rw-r--r--assets/sass/layout/_page-wrapper.scss43
-rw-r--r--assets/sass/layout/_wrapper.scss118
-rw-r--r--[-rwxr-xr-x]assets/sass/libs/_functions.scss66
-rw-r--r--[-rwxr-xr-x]assets/sass/libs/_mixins.scss452
-rw-r--r--[-rwxr-xr-x]assets/sass/libs/_skel.scss1170
-rw-r--r--[-rwxr-xr-x]assets/sass/libs/_vars.scss110
-rw-r--r--[-rwxr-xr-x]assets/sass/main.scss1711
-rw-r--r--assets/sass/noscript.scss16
-rwxr-xr-ximages/avatar.pngbin2104 -> 0 bytes
-rwxr-xr-ximages/banner.jpgbin351227 -> 0 bytes
-rw-r--r--images/bg.jpgbin0 -> 24832 bytes
-rw-r--r--images/gallery/fulls/01.jpgbin0 -> 31216 bytes
-rw-r--r--images/gallery/fulls/02.jpgbin0 -> 22129 bytes
-rw-r--r--images/gallery/fulls/03.jpgbin0 -> 24147 bytes
-rw-r--r--images/gallery/fulls/04.jpgbin0 -> 27427 bytes
-rw-r--r--images/gallery/fulls/05.jpgbin0 -> 28752 bytes
-rw-r--r--images/gallery/fulls/06.jpgbin0 -> 24666 bytes
-rw-r--r--images/gallery/fulls/07.jpgbin0 -> 23969 bytes
-rw-r--r--images/gallery/fulls/08.jpgbin0 -> 33641 bytes
-rw-r--r--images/gallery/fulls/09.jpgbin0 -> 26491 bytes
-rw-r--r--images/gallery/thumbs/01.jpgbin0 -> 13676 bytes
-rw-r--r--images/gallery/thumbs/02.jpgbin0 -> 5681 bytes
-rw-r--r--images/gallery/thumbs/03.jpgbin0 -> 5982 bytes
-rw-r--r--images/gallery/thumbs/04.jpgbin0 -> 16718 bytes
-rw-r--r--images/gallery/thumbs/05.jpgbin0 -> 12300 bytes
-rw-r--r--images/gallery/thumbs/06.jpgbin0 -> 5909 bytes
-rw-r--r--images/gallery/thumbs/07.jpgbin0 -> 6026 bytes
-rw-r--r--images/gallery/thumbs/08.jpgbin0 -> 14506 bytes
-rw-r--r--images/gallery/thumbs/09.jpgbin0 -> 15726 bytes
-rw-r--r--images/overlay.pngbin0 -> 25653 bytes
-rw-r--r--images/pic01.jpgbin0 -> 16901 bytes
-rwxr-xr-ximages/pic01.pngbin61979 -> 0 bytes
-rw-r--r--images/pic02.jpgbin0 -> 31996 bytes
-rwxr-xr-ximages/pic02.pngbin11658 -> 0 bytes
-rw-r--r--[-rwxr-xr-x]images/pic03.jpgbin17696 -> 39770 bytes
-rwxr-xr-ximages/twitter.pngbin3297 -> 0 bytes
-rw-r--r--[-rwxr-xr-x]index.html892
70 files changed, 7893 insertions, 5946 deletions
diff --git a/README.txt b/README.txt
new file mode 100644
index 0000000..5615888
--- /dev/null
+++ b/README.txt
@@ -0,0 +1,383 @@
+Ethereal by HTML5 UP
+html5up.net | @ajlkn
+Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
+
+This is Ethereal, my latest, greatest, and quite possibly most unique template for HTML5 UP.
+Since releasing Parallelism 3-4 years ago (!!!), I've been dying to do another side-scrolling
+template with more in the way of flexibility/customization potential. The result is this template,
+Ethereal, which combines a robust side-scrolling framework of my own creation (with various
+"scroll-assist" features like drag/momentum scrolling, keyboard shortcuts, etc.) with a unique
+look and feel, a lightbox gallery, tons of customization options, and, of course, full
+responsiveness. Hope you dig it :)
+
+Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
+you can use for pretty much whatever.
+
+(* = not included)
+
+AJ
+aj@lkn.io | @ajlkn
+
+
+Instructions:
+
+ Overview
+ ========
+
+ Browsers deal with side-scrolling pages differently to vertically-oriented ones in
+ that they require elements (or at the very least, the top-most wrapper element) to
+ have a defined (fixed) width. This leads to a number of limitations (eg. the page
+ won't automatically grow/shrink in the same way a vertically-oriented one will), so
+ Ethereal does two things to work around this:
+
+ - The entire page is made up of "panel" elements, each of which can be assigned an
+ optional "size" modifier (satisfying the fixed width requirement).
+
+ - For panels that don't use a size modifier, individual containing elements *inside*
+ them (eg. a column) can be assigned a "span" modifier to give those a fixed width
+ instead (also satisfying the fixed width requirement).
+
+ Another fun quirk of side-scrolling pages is how to actually implement horizontal
+ scrolling *without* resorting to using the (usually ugly) horizontal scrollbar.
+ Ethereal does this in FOUR (!) ways:
+
+ - Dragging: Users can simply click and drag the page left or right to scroll it around.
+ This works exactly as you'd expect, and even has a nice "post-scroll momentum" effect.
+
+ - Scroll Wheel: Ethereal modifies* the scroll wheel's behavior to translate vertical
+ scrolling into horizontal scrolling, allowing the user to use either the scroll wheel
+ or trackpad to scroll the page (the latter of which retains the ability to horziontally
+ scroll as normal, so nothing changes there).
+
+ * Special thanks to @miorel + @pieterv of Facebook for "normalizeWheel()" :)
+
+ - Scroll Zones: Users can hover the mouse cursor on the left or right edges of the page
+ to automatically scroll in either direction.
+
+ - Keyboard Shortcuts: Finally, users can simply use the left/right arrows, page up/down,
+ home/end, and the spacebar to scroll the page.
+
+ Note that any (or all) of these scroll-assist features can be turned off (and in some
+ cases customized). See the top of assets/js/main.js for more information.
+
+
+ Span Modifiers
+ ==============
+
+ Span modifiers are simply classes that give elements a fixed width, the size of which
+ is determined by the "unit value" associated with the modifier (eg. "span-3" means
+ "span 3 units"). These sizes are in "rem" units when used inside panels that don't
+ use a size modifier, and in percentage units when used inside panels that do.
+
+ Ethereal includes span modifiers ranging from 0.25 units ("span-0-25") to 10 units
+ ("span-10"). Here's a partial list:
+
+ span-0-25 Span 0.25 units.
+ span-0-5 Span 0.5 units.
+ span-0-75 Span 0.75 units.
+ span-1 Span 1 unit.
+ span-1-25 Span 1.25 units.
+ span-1-5 Span 1.5 units.
+ span-1-75 Span 1.75 units.
+ ...
+ span-9 Span 9 units.
+ span-9-25 Span 9.25 units.
+ span-9-5 Span 9.5 units.
+ span-9-75 Span 9.75 units.
+ span-10 Span 10 units.
+
+
+ Major Elements
+ ==============
+
+ Most of Ethereal's elements are pretty much what you'd expect, but there are a handful
+ of "major" ones that warrant a bit more explanation:
+
+
+ Panel
+ ------
+
+ The primary building block of Ethereal.
+
+ HTML
+
+ <section class="panel (size modifier) (color modifier)">
+ <div class="intro (color modifier)">
+ (intro content)
+ </div>
+ <div class="inner (inner modifiers) (color modifier)">
+ (inner content)
+ </div>
+ </section>
+
+ Note: The entire "intro" child element can be excluded.
+ Note: You can have as many "intro" and "inner" child elements as you like.
+
+ Modifiers
+
+ Size
+
+ small Use small size.
+ medium Use medium size.
+ large Use large size.
+
+ Color
+
+ color0 Use background color 0 (gradient).
+ color1 Use background color 1.
+ color2 Use background color 2.
+ color3 Use background color 3.
+ color4 Use background color 4.
+ color1-alt Use background color 1 (alt).
+ color2-alt Use background color 2 (alt).
+ color3-alt Use background color 3 (alt).
+ color4-alt Use background color 4 (alt).
+
+ Inner
+
+ columns Divides child elements into columns.
+ aligned When used with "columns", aligns content to top of panel.
+ divided When used with "columns", separates each column with a vertical line.
+
+ Examples
+
+ Here's a very basic example:
+
+ <section class="panel medium color0">
+ <div class="intro">
+ <h2 class="major">Panel</h2>
+ <p>Just a generic panel.</p>
+ </div>
+ <div class="inner">
+ <p>Lorem ipsum dolor sit amet.</p>
+ </div>
+ </section>
+
+ And here's a more advanced example using columns and *no* size modifier:
+
+ <section class="panel color2">
+ <div class="intro">
+ <h2 class="major">Panel</h2>
+ <p>Just a generic panel.</p>
+ </div>
+ <div class="inner columns">
+ <div class="span-4">
+ <p>This column is 4 units wide.</p>
+ </div>
+ <div class="span-3">
+ <p>This column is 3 units wide.</p>
+ </div>
+ <div class="span-2">
+ <p>This column is 2 units wide.</p>
+ </div>
+ </div>
+ </section>
+
+ Note: The "intro" child element already has a fixed width, so a span modifier
+ isn't required.
+
+
+ Panel (Banner)
+ --------------
+
+ The "Banner" variant of a regular panel.
+
+ HTML
+
+ <section class="panel banner (size modifier) (color modifier) (orientation modifier)">
+ <div class="content (color modifier)">
+ (content)
+ </div>
+ <div class="image (image modifiers)" data-position="(image position modifier)">
+ <img src="(image URL)" alt="" />
+ </div>
+ </section>
+
+ Modifiers
+
+ Orientation
+
+ left Content on the left, image on the right.
+ right Content on the right, image on the left.
+
+ Image
+
+ filtered Applies a gradient filter to the image.
+ tinted Applies a tint filter to the image.
+
+ Image Position (required)
+
+ top left Position image in the top-left corner.
+ top Position image along the top edge.
+ top right Position image in the top-right corner.
+ right Position image along the right edge.
+ bottom right Position image in the bottom-right corner.
+ bottom Position image along the bottom edge.
+ bottom left Position image in the bottom-left corner.
+ left Position image along the left edge.
+ center Position image in the center.
+
+ Example
+
+ <section class="panel banner medium right">
+ <div class="content color0">
+ <h1>Banner</h1>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </div>
+ <div class="image" data-position="center">
+ <img src="/path/to/image.jpg" alt="" />
+ </div>
+ </section>
+
+
+ Panel (Spotlight)
+ -----------------
+
+ The "Spotlight" variant of a regular panel.
+
+ HTML
+
+ <section class="panel spotlight (size modifier) (orientation modifier)">
+ <div class="content (span modifier)">
+ (content)
+ </div>
+ <div class="image (image modifiers)" data-position="(image position modifier)">
+ <img src="(image URL)" alt="" />
+ </div>
+ </section>
+
+ Modifiers
+
+ Orientation
+
+ left Content on the left.
+ right Content on the right.
+
+ Image
+
+ filtered Applies a gradient filter to the image.
+ tinted Applies a tint filter to the image.
+
+ Image Position (required)
+
+ top left Position image in the top-left corner.
+ top Position image along the top edge.
+ top right Position image in the top-right corner.
+ right Position image along the right edge.
+ bottom right Position image in the bottom-right corner.
+ bottom Position image along the bottom edge.
+ bottom left Position image in the bottom-left corner.
+ left Position image along the left edge.
+ center Position image in the center.
+
+ Example
+
+ <section class="panel spotlight large right">
+ <div class="content">
+ <h1>Spotlight</h1>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </div>
+ <div class="image" data-position="center">
+ <img src="/path/to/image.jpg" alt="" />
+ </div>
+ </section>
+
+
+ Gallery
+ -------
+
+ A lightbox-enabled gallery.
+
+ HTML
+
+ <div class="gallery">
+ <a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
+ <img src="(thumbnail image URL)" alt="" />
+ </a>
+ <a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
+ <img src="(thumbnail image URL)" alt="" />
+ </a>
+ <a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
+ <img src="(thumbnail image URL)" alt="" />
+ </a>
+ <div class="group (span modifier)">
+ <a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
+ <img src="(thumbnail image URL)" alt="" />
+ </a>
+ <a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
+ <img src="(thumbnail image URL)" alt="" />
+ </a>
+ <a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
+ <img src="(thumbnail image URL)" alt="" />
+ </a>
+ <a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
+ <img src="(thumbnail image URL)" alt="" />
+ </a>
+ ...
+ </div>
+ ...
+ </div>
+
+ Note: The "group" element creates a dual-row group of images. Images inside this group will
+ automatically wrap to the next row when they exceed its width (as defined by its span modifier).
+ You can have as many groups in a gallery as you like.
+
+ Modifiers
+
+ Image
+
+ filtered Applies a gradient filter to the image.
+ tinted Applies a tint filter to the image.
+
+ Image Position (required)
+
+ top left Position image in the top-left corner.
+ top Position image along the top edge.
+ top right Position image in the top-right corner.
+ right Position image along the right edge.
+ bottom right Position image in the bottom-right corner.
+ bottom Position image along the bottom edge.
+ bottom left Position image in the bottom-left corner.
+ left Position image along the left edge.
+ center Position image in the center.
+
+ Example
+
+ <div class="gallery">
+ <a href="/images/thumbnails/01.jpg" class="image filtered span-2" data-position="center">
+ <img src="/images/fulls/01.jpg" alt="" />
+ </a>
+ <a href="/images/thumbnails/02.jpg" class="image filtered span-4" data-position="center">
+ <img src="/images/fulls/02.jpg" alt="" />
+ </a>
+ <div class="group span-4">
+ <a href="/images/thumbnails/03.jpg" class="image filtered span-2" data-position="center">
+ <img src="/images/fulls/03.jpg" alt="" />
+ </a>
+ <a href="/images/thumbnails/04.jpg" class="image filtered span-2" data-position="center">
+ <img src="/images/fulls/04.jpg" alt="" />
+ </a>
+ <a href="/images/thumbnails/05.jpg" class="image filtered span-2" data-position="center">
+ <img src="/images/fulls/05.jpg" alt="" />
+ </a>
+ <a href="/images/thumbnails/06.jpg" class="image filtered span-2" data-position="center">
+ <img src="/images/fulls/06.jpg" alt="" />
+ </a>
+ </div>
+ </div>
+
+
+Credits:
+
+ Demo Images:
+ Unsplash (unsplash.com)
+
+ Icons:
+ Font Awesome (fortawesome.github.com/Font-Awesome)
+
+ Other:
+ jQuery (jquery.com)
+ Misc. Sass functions (@HugoGiraudel)
+ normalizeWheel (@miorel + @pieterv of Facebook)
+ Skel (skel.io) \ No newline at end of file
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
index d4de13e..d4de13e 100755..100644
--- a/assets/fonts/FontAwesome.otf
+++ b/assets/fonts/FontAwesome.otf
Binary files differ
diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot
index c7b00d2..c7b00d2 100755..100644
--- a/assets/fonts/fontawesome-webfont.eot
+++ b/assets/fonts/fontawesome-webfont.eot
Binary files differ
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
index f221e50..f221e50 100755..100644
--- a/assets/fonts/fontawesome-webfont.ttf
+++ b/assets/fonts/fontawesome-webfont.ttf
Binary files differ
diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff
index 6e7483c..6e7483c 100755..100644
--- a/assets/fonts/fontawesome-webfont.woff
+++ b/assets/fonts/fontawesome-webfont.woff
Binary files differ
diff --git a/assets/fonts/fontawesome-webfont.woff2 b/assets/fonts/fontawesome-webfont.woff2
index 7eb74fd..7eb74fd 100755..100644
--- a/assets/fonts/fontawesome-webfont.woff2
+++ b/assets/fonts/fontawesome-webfont.woff2
Binary files differ
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='&shy;<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='&nbsp;<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
diff --git a/images/avatar.png b/images/avatar.png
deleted file mode 100755
index 6e50f67..0000000
--- a/images/avatar.png
+++ /dev/null
Binary files differ
diff --git a/images/banner.jpg b/images/banner.jpg
deleted file mode 100755
index 3c7985a..0000000
--- a/images/banner.jpg
+++ /dev/null
Binary files differ
diff --git a/images/bg.jpg b/images/bg.jpg
new file mode 100644
index 0000000..b989e7e
--- /dev/null
+++ b/images/bg.jpg
Binary files differ
diff --git a/images/gallery/fulls/01.jpg b/images/gallery/fulls/01.jpg
new file mode 100644
index 0000000..922d93b
--- /dev/null
+++ b/images/gallery/fulls/01.jpg
Binary files differ
diff --git a/images/gallery/fulls/02.jpg b/images/gallery/fulls/02.jpg
new file mode 100644
index 0000000..8b76b52
--- /dev/null
+++ b/images/gallery/fulls/02.jpg
Binary files differ
diff --git a/images/gallery/fulls/03.jpg b/images/gallery/fulls/03.jpg
new file mode 100644
index 0000000..9a08b81
--- /dev/null
+++ b/images/gallery/fulls/03.jpg
Binary files differ
diff --git a/images/gallery/fulls/04.jpg b/images/gallery/fulls/04.jpg
new file mode 100644
index 0000000..f6f710d
--- /dev/null
+++ b/images/gallery/fulls/04.jpg
Binary files differ
diff --git a/images/gallery/fulls/05.jpg b/images/gallery/fulls/05.jpg
new file mode 100644
index 0000000..13ccb88
--- /dev/null
+++ b/images/gallery/fulls/05.jpg
Binary files differ
diff --git a/images/gallery/fulls/06.jpg b/images/gallery/fulls/06.jpg
new file mode 100644
index 0000000..e9340ad
--- /dev/null
+++ b/images/gallery/fulls/06.jpg
Binary files differ
diff --git a/images/gallery/fulls/07.jpg b/images/gallery/fulls/07.jpg
new file mode 100644
index 0000000..1f2a2eb
--- /dev/null
+++ b/images/gallery/fulls/07.jpg
Binary files differ
diff --git a/images/gallery/fulls/08.jpg b/images/gallery/fulls/08.jpg
new file mode 100644
index 0000000..c4f0edd
--- /dev/null
+++ b/images/gallery/fulls/08.jpg
Binary files differ
diff --git a/images/gallery/fulls/09.jpg b/images/gallery/fulls/09.jpg
new file mode 100644
index 0000000..2b64370
--- /dev/null
+++ b/images/gallery/fulls/09.jpg
Binary files differ
diff --git a/images/gallery/thumbs/01.jpg b/images/gallery/thumbs/01.jpg
new file mode 100644
index 0000000..e3c7260
--- /dev/null
+++ b/images/gallery/thumbs/01.jpg
Binary files differ
diff --git a/images/gallery/thumbs/02.jpg b/images/gallery/thumbs/02.jpg
new file mode 100644
index 0000000..7df4025
--- /dev/null
+++ b/images/gallery/thumbs/02.jpg
Binary files differ
diff --git a/images/gallery/thumbs/03.jpg b/images/gallery/thumbs/03.jpg
new file mode 100644
index 0000000..e1b31f4
--- /dev/null
+++ b/images/gallery/thumbs/03.jpg
Binary files differ
diff --git a/images/gallery/thumbs/04.jpg b/images/gallery/thumbs/04.jpg
new file mode 100644
index 0000000..1ed2909
--- /dev/null
+++ b/images/gallery/thumbs/04.jpg
Binary files differ
diff --git a/images/gallery/thumbs/05.jpg b/images/gallery/thumbs/05.jpg
new file mode 100644
index 0000000..f9b1527
--- /dev/null
+++ b/images/gallery/thumbs/05.jpg
Binary files differ
diff --git a/images/gallery/thumbs/06.jpg b/images/gallery/thumbs/06.jpg
new file mode 100644
index 0000000..f34f808
--- /dev/null
+++ b/images/gallery/thumbs/06.jpg
Binary files differ
diff --git a/images/gallery/thumbs/07.jpg b/images/gallery/thumbs/07.jpg
new file mode 100644
index 0000000..1b89e33
--- /dev/null
+++ b/images/gallery/thumbs/07.jpg
Binary files differ
diff --git a/images/gallery/thumbs/08.jpg b/images/gallery/thumbs/08.jpg
new file mode 100644
index 0000000..3f58c51
--- /dev/null
+++ b/images/gallery/thumbs/08.jpg
Binary files differ
diff --git a/images/gallery/thumbs/09.jpg b/images/gallery/thumbs/09.jpg
new file mode 100644
index 0000000..0f9b1dd
--- /dev/null
+++ b/images/gallery/thumbs/09.jpg
Binary files differ
diff --git a/images/overlay.png b/images/overlay.png
new file mode 100644
index 0000000..5352f66
--- /dev/null
+++ b/images/overlay.png
Binary files differ
diff --git a/images/pic01.jpg b/images/pic01.jpg
new file mode 100644
index 0000000..a5aa8de
--- /dev/null
+++ b/images/pic01.jpg
Binary files differ
diff --git a/images/pic01.png b/images/pic01.png
deleted file mode 100755
index 84794c8..0000000
--- a/images/pic01.png
+++ /dev/null
Binary files differ
diff --git a/images/pic02.jpg b/images/pic02.jpg
new file mode 100644
index 0000000..23e8a20
--- /dev/null
+++ b/images/pic02.jpg
Binary files differ
diff --git a/images/pic02.png b/images/pic02.png
deleted file mode 100755
index e8a17bc..0000000
--- a/images/pic02.png
+++ /dev/null
Binary files differ
diff --git a/images/pic03.jpg b/images/pic03.jpg
index 5bfc8f7..f7fdcd3 100755..100644
--- a/images/pic03.jpg
+++ b/images/pic03.jpg
Binary files differ
diff --git a/images/twitter.png b/images/twitter.png
deleted file mode 100755
index 251ebb1..0000000
--- a/images/twitter.png
+++ /dev/null
Binary files differ
diff --git a/index.html b/index.html
index 20a8f10..9c1c205 100755..100644
--- a/index.html
+++ b/index.html
@@ -1,475 +1,419 @@
-<!DOCTYPE HTML>
-<!--
- Read Only by HTML5 UP
- html5up.net | @ajlkn
- Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
--->
-<html>
- <head>
- <title>FivePixels' Cydia Repo</title>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
- <link rel="stylesheet" href="assets/css/main.css" />
- <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
- </head>
- <body>
-
- <!-- Header -->
- <section id="header">
- <header>
- <span class="image avatar"><img src="images/avatar.png" alt="" /></span>
- <h1 id="logo"><a href="#">FivePixels'</a></h1>
- <p>17 y/o iOS, macOS, and
- whatever else I can code developer.</p>
- </header>
- <nav id="nav">
- <ul>
- <li><a href="#one" class="active">About Me</a></li>
- <li><a href="#two">Skills</a></li>
- <li><a href="#three">Tweaks</a></li>
- </ul>
- </nav>
- <footer>
- <ul class="icons">
- <li><a href="https://twitter.com/o5pxels" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
- <li><a href="https://github.com/FivePixels" class="icon fa-github"><span class="label">Github</span></a></li>
- <li><a href="mailto:o5pxels@gmail.com class="icon fa-envelope"><span class="label">Email</span></a></li>
- </ul>
- </footer>
- </section>
-
- <!-- Wrapper -->
- <div id="wrapper">
-
- <!-- Main -->
- <div id="main">
-
- <!-- One -->
- <section id="one">
- <div class="container">
- <header class="major">
- <h2>FivePixels</h2>
- </header>
- <p>iOS App Developer and Tweak Developer</p>
- </div>
- </section>
-
- <!-- Two -->
- <section id="two">
- <div class="container">
- <h3>Skills</h3>
- <p>Here are a few things I'm good at.</p>
- <ul class="feature-icons">
- <li class="fa-coffee">Java Development</li>
- <li class="fa-cubes">Java 8 Structures (Lambdas, Streams, etc)</li>
- <li class="fa-book">Bukkit plugins with the Spigot and CraftBukkit APIs</li>
- <li class="fa-coffee">Guava Concurrency</li>
- <li class="fa-bolt">NMS level code with the Bukkit API</li>
- <li class="fa-users">Genetic Algorithms</li>
- </ul>
- </div>
- </section>
-
- <!-- Three -->
- <section id="three">
- <div class="container">
- <h3>Experience</h3>
- <p>I'm only 17, so I'm fairly new to the development scene, but I do have some experience working with some amazing organizations.</p>
- <div class="features">
- <article>
- <a href="http://www.vindexcraft.net/" class="image"><img src="images/pic01.png" alt="" /></a>
- <div class="inner">
- <h4>VindexCraft</h4>
- <p>VindexCraft is an immersive roleplay server with a wonderful community. I have developed many plugins for them, including Phones, a Prison system, and a Warfare minigame.</p>
- </div>
- </article>
- <article>
- <a href="https://github.com/Project-Coalesce" class="image"><img src="images/pic02.png" alt="" /></a>
- <div class="inner">
- <h4>Project Coalesce</h4>
- <p>Project Coalesce is a small development team I established with some fellow developers on the <a href="https://discord.gg/JvVdMk4">Coalesce Coding Discord</a> I started. Working with this group has allowed me to improve my development, teamwork and leadership skills.</p>
- </div>
- </article>
- <article>
- <a href="https://github.com/TheStilbruch" class="image"><img src="images/pic03.jpg" alt="" /></a>
- <div class="inner">
- <h4>Github Projects</h4>
- <p>I also have few projects on my Github, as well as many many more that I never uploaded. Feel free to check them out.</p>
- </div>
- </article>
- </div>
- </div>
- </section>
-
- <!-- Five -->
- <!--
- <section id="five">
- <div class="container">
- <h3>Elements</h3>
-
- <section>
- <h4>Text</h4>
- <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
- This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
- This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
- <hr />
- <header>
- <h4>Heading with a Subtitle</h4>
- <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
- </header>
- <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
- <header>
- <h5>Heading with a Subtitle</h5>
- <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
- </header>
- <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
- <hr />
- <h2>Heading Level 2</h2>
- <h3>Heading Level 3</h3>
- <h4>Heading Level 4</h4>
- <h5>Heading Level 5</h5>
- <h6>Heading Level 6</h6>
- <hr />
- <h5>Blockquote</h5>
- <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
- <h5>Preformatted</h5>
- <pre><code>i = 0;
-
- while (!deck.isInOrder()) {
- print 'Iteration ' + i;
- deck.shuffle();
- i++;
- }
-
- print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
- </section>
-
- <section>
- <h4>Lists</h4>
- <div class="row">
- <div class="6u 12u(xsmall)">
- <h5>Unordered</h5>
- <ul>
- <li>Dolor pulvinar etiam magna etiam.</li>
- <li>Sagittis adipiscing lorem eleifend.</li>
- <li>Felis enim feugiat dolore viverra.</li>
- </ul>
- <h5>Alternate</h5>
- <ul class="alt">
- <li>Dolor pulvinar etiam magna etiam.</li>
- <li>Sagittis adipiscing lorem eleifend.</li>
- <li>Felis enim feugiat dolore viverra.</li>
- </ul>
- </div>
- <div class="6u 12u(xsmall)">
- <h5>Ordered</h5>
- <ol>
- <li>Dolor pulvinar etiam magna etiam.</li>
- <li>Etiam vel felis at lorem sed viverra.</li>
- <li>Felis enim feugiat dolore viverra.</li>
- <li>Dolor pulvinar etiam magna etiam.</li>
- <li>Etiam vel felis at lorem sed viverra.</li>
- <li>Felis enim feugiat dolore viverra.</li>
- </ol>
- <h5>Icons</h5>
- <ul class="icons">
- <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
- <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
- <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
- <li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
- <li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
- <li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
- </ul>
- </div>
- </div>
- <h5>Actions</h5>
- <ul class="actions">
- <li><a href="#" class="button special">Default</a></li>
- <li><a href="#" class="button">Default</a></li>
- <li><a href="#" class="button alt">Default</a></li>
- </ul>
- <ul class="actions small">
- <li><a href="#" class="button special small">Small</a></li>
- <li><a href="#" class="button small">Small</a></li>
- <li><a href="#" class="button alt small">Small</a></li>
- </ul>
- <div class="row">
- <div class="3u 6u(medium) 12u$(xsmall)">
- <ul class="actions vertical">
- <li><a href="#" class="button special">Default</a></li>
- <li><a href="#" class="button">Default</a></li>
- <li><a href="#" class="button alt">Default</a></li>
- </ul>
- </div>
- <div class="3u 6u$(medium) 12u$(xsmall)">
- <ul class="actions vertical small">
- <li><a href="#" class="button special small">Small</a></li>
- <li><a href="#" class="button small">Small</a></li>
- <li><a href="#" class="button alt small">Small</a></li>
- </ul>
- </div>
- <div class="3u 6u(medium) 12u$(xsmall)">
- <ul class="actions vertical">
- <li><a href="#" class="button special fit">Default</a></li>
- <li><a href="#" class="button fit">Default</a></li>
- <li><a href="#" class="button alt fit">Default</a></li>
- </ul>
- </div>
- <div class="3u 6u$(medium) 12u$(xsmall)">
- <ul class="actions vertical small">
- <li><a href="#" class="button special small fit">Small</a></li>
- <li><a href="#" class="button small fit">Small</a></li>
- <li><a href="#" class="button alt small fit">Small</a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section>
- <h4>Table</h4>
- <h5>Default</h5>
- <div class="table-wrapper">
- <table>
- <thead>
- <tr>
- <th>Name</th>
- <th>Description</th>
- <th>Price</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Item One</td>
- <td>Ante turpis integer aliquet porttitor.</td>
- <td>29.99</td>
- </tr>
- <tr>
- <td>Item Two</td>
- <td>Vis ac commodo adipiscing arcu aliquet.</td>
- <td>19.99</td>
- </tr>
- <tr>
- <td>Item Three</td>
- <td> Morbi faucibus arcu accumsan lorem.</td>
- <td>29.99</td>
- </tr>
- <tr>
- <td>Item Four</td>
- <td>Vitae integer tempus condimentum.</td>
- <td>19.99</td>
- </tr>
- <tr>
- <td>Item Five</td>
- <td>Ante turpis integer aliquet porttitor.</td>
- <td>29.99</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="2"></td>
- <td>100.00</td>
- </tr>
- </tfoot>
- </table>
- </div>
-
- <h5>Alternate</h5>
- <div class="table-wrapper">
- <table class="alt">
- <thead>
- <tr>
- <th>Name</th>
- <th>Description</th>
- <th>Price</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Item One</td>
- <td>Ante turpis integer aliquet porttitor.</td>
- <td>29.99</td>
- </tr>
- <tr>
- <td>Item Two</td>
- <td>Vis ac commodo adipiscing arcu aliquet.</td>
- <td>19.99</td>
- </tr>
- <tr>
- <td>Item Three</td>
- <td> Morbi faucibus arcu accumsan lorem.</td>
- <td>29.99</td>
- </tr>
- <tr>
- <td>Item Four</td>
- <td>Vitae integer tempus condimentum.</td>
- <td>19.99</td>
- </tr>
- <tr>
- <td>Item Five</td>
- <td>Ante turpis integer aliquet porttitor.</td>
- <td>29.99</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="2"></td>
- <td>100.00</td>
- </tr>
- </tfoot>
- </table>
- </div>
- </section>
-
- <section>
- <h4>Buttons</h4>
- <ul class="actions">
- <li><a href="#" class="button special">Special</a></li>
- <li><a href="#" class="button">Default</a></li>
- <li><a href="#" class="button alt">Alternate</a></li>
- </ul>
- <ul class="actions">
- <li><a href="#" class="button special big">Big</a></li>
- <li><a href="#" class="button">Default</a></li>
- <li><a href="#" class="button alt small">Small</a></li>
- </ul>
- <ul class="actions fit">
- <li><a href="#" class="button special fit">Fit</a></li>
- <li><a href="#" class="button fit">Fit</a></li>
- <li><a href="#" class="button alt fit">Fit</a></li>
- </ul>
- <ul class="actions fit small">
- <li><a href="#" class="button special fit small">Fit + Small</a></li>
- <li><a href="#" class="button fit small">Fit + Small</a></li>
- <li><a href="#" class="button alt fit small">Fit + Small</a></li>
- </ul>
- <ul class="actions">
- <li><a href="#" class="button special icon fa-download">Icon</a></li>
- <li><a href="#" class="button icon fa-download">Icon</a></li>
- <li><a href="#" class="button alt icon fa-check">Icon</a></li>
- </ul>
- <ul class="actions">
- <li><span class="button special disabled">Special</span></li>
- <li><span class="button disabled">Default</span></li>
- <li><span class="button alt disabled">Alternate</span></li>
- </ul>
- </section>
-
- <section>
- <h4>Form</h4>
- <form method="post" action="#">
- <div class="row uniform">
- <div class="6u 12u(xsmall)">
- <input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
- </div>
- <div class="6u 12u(xsmall)">
- <input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
- </div>
- </div>
- <div class="row uniform">
- <div class="12u">
- <div class="select-wrapper">
- <select name="demo-category" id="demo-category">
- <option value="">- Category -</option>
- <option value="1">Manufacturing</option>
- <option value="1">Shipping</option>
- <option value="1">Administration</option>
- <option value="1">Human Resources</option>
- </select>
- </div>
- </div>
- </div>
- <div class="row uniform">
- <div class="4u 12u(medium)">
- <input type="radio" id="demo-priority-low" name="demo-priority" checked>
- <label for="demo-priority-low">Low Priority</label>
- </div>
- <div class="4u 12u(medium)">
- <input type="radio" id="demo-priority-normal" name="demo-priority">
- <label for="demo-priority-normal">Normal Priority</label>
- </div>
- <div class="4u 12u(medium)">
- <input type="radio" id="demo-priority-high" name="demo-priority">
- <label for="demo-priority-high">High Priority</label>
- </div>
- </div>
- <div class="row uniform">
- <div class="6u 12u(medium)">
- <input type="checkbox" id="demo-copy" name="demo-copy">
- <label for="demo-copy">Email me a copy of this message</label>
- </div>
- <div class="6u 12u(medium)">
- <input type="checkbox" id="demo-human" name="demo-human" checked>
- <label for="demo-human">I am a human and not a robot</label>
- </div>
- </div>
- <div class="row uniform">
- <div class="12u">
- <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
- </div>
- </div>
- <div class="row uniform">
- <div class="12u">
- <ul class="actions">
- <li><input type="submit" value="Send Message" /></li>
- <li><input type="reset" value="Reset" class="alt" /></li>
- </ul>
- </div>
- </div>
- </form>
- </section>
-
- <section>
- <h4>Image</h4>
- <h5>Fit</h5>
- <span class="image fit"><img src="images/banner.jpg" alt="" /></span>
- <div class="box alt">
- <div class="row 50% uniform">
- <div class="4u"><span class="image fit"><img src="images/pic01.png" alt="" /></span></div>
- <div class="4u"><span class="image fit"><img src="images/pic02.png" alt="" /></span></div>
- <div class="4u"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
- </div>
- <div class="row 50% uniform">
- <div class="4u"><span class="image fit"><img src="images/pic02.png" alt="" /></span></div>
- <div class="4u"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
- <div class="4u"><span class="image fit"><img src="images/pic01.png" alt="" /></span></div>
- </div>
- <div class="row 50% uniform">
- <div class="4u"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
- <div class="4u"><span class="image fit"><img src="images/pic01.png" alt="" /></span></div>
- <div class="4u"><span class="image fit"><img src="images/pic02.png" alt="" /></span></div>
- </div>
- </div>
- <h5>Left &amp; Right</h5>
- <p><span class="image left"><img src="images/avatar.png" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
- <p><span class="image right"><img src="images/avatar.png" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
- </section>
-
- </div>
- </section>
- -->
-
- </div>
-
- <!-- Footer -->
- <section id="footer">
- <div class="container">
- <ul class="copyright">
- <li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
- </ul>
- </div>
- </section>
-
- </div>
-
- <!-- Scripts -->
- <script src="assets/js/jquery.min.js"></script>
- <script src="assets/js/jquery.scrollzer.min.js"></script>
- <script src="assets/js/jquery.scrolly.min.js"></script>
- <script src="assets/js/skel.min.js"></script>
- <script src="assets/js/util.js"></script>
- <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
- <script src="assets/js/main.js"></script>
-
- </body>
+<!DOCTYPE HTML>
+<!--
+ Ethereal by HTML5 UP
+ html5up.net | @ajlkn
+ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+ <head>
+ <title>Ethereal by HTML5 UP</title>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+ <link rel="stylesheet" href="assets/css/main.css" />
+ <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
+ </head>
+ <body>
+
+ <!-- Page Wrapper -->
+ <div id="page-wrapper">
+
+ <!-- Wrapper -->
+ <div id="wrapper">
+
+ <!-- Panel (Banner) -->
+ <section class="panel banner right">
+ <div class="content color0 span-3-75">
+ <h1 class="major">Hello, my name<br />
+ is Ethereal</h1>
+ <p>This is <strong>Ethereal</strong>, a free site template by AJ for <a href="https://html5up.net">HTML5 UP</a>. It’s fully responsive, built on HTML5 and CSS3, and released entirely for free under the Creative Commons license. Hope you dig it :)</p>
+ <ul class="actions">
+ <li><a href="#first" class="button special color1 circle icon fa-angle-right">Next</a></li>
+ </ul>
+ </div>
+ <div class="image filtered span-1-75" data-position="25% 25%">
+ <img src="images/pic01.jpg" alt="" />
+ </div>
+ </section>
+
+ <!-- Panel (Spotlight) -->
+ <section class="panel spotlight medium right" id="first">
+ <div class="content span-7">
+ <h2 class="major">Sed etiam aenean</h2>
+ <p>Mauris et ligula arcu. Proin dapibus convallis accumsan. Lorem maximus hendrerit orci, sit amet elementum massa hendrerit sed. Donec et ullamcorper ligula. Suspendisse amet potenti. Ut pretium libero eleifend euismod sed tristique. Quisque dictum magna risus, id ultricies justo sagittis vitae. Sed id odio tempor, porttitor elit amet, gravida hendrerit fringilla lorem ipsum dolor.</p>
+ </div>
+ <div class="image filtered tinted" data-position="top left">
+ <img src="images/pic02.jpg" alt="" />
+ </div>
+ </section>
+
+ <!-- Panel -->
+ <section class="panel color1">
+ <div class="intro joined">
+ <h2 class="major">Amet lorem</h2>
+ <p>Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.</p>
+ </div>
+ <div class="inner">
+ <ul class="grid-icons three connected">
+ <li><span class="icon fa-diamond"><span class="label">Lorem</span></span></li>
+ <li><span class="icon fa-camera-retro"><span class="label">Ipsum</span></span></li>
+ <li><span class="icon fa-cog"><span class="label">Dolor</span></span></li>
+ <li><span class="icon fa-paper-plane"><span class="label">Sit</span></span></li>
+ <li><span class="icon fa-bar-chart"><span class="label">Amet</span></span></li>
+ <li><span class="icon fa-code"><span class="label">Nullam</span></span></li>
+ </ul>
+ </div>
+ </section>
+
+ <!-- Panel (Spotlight) -->
+ <section class="panel spotlight large left">
+ <div class="content span-5">
+ <h2 class="major">Magna amet tempus</h2>
+ <p>Mauris a cursus velit. Nunc lacinia sollicitudin egestas bibendum, magna dui bibendum ex, sagittis commodo enim risus sed magna nulla. Vestibulum ut consequat velit. Curabitur vitae libero lorem. Quisque iaculis porttitor blandit. Nullam quis sagittis maximus. Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar.</p>
+ </div>
+ <div class="image filtered tinted" data-position="top right">
+ <img src="images/pic03.jpg" alt="" />
+ </div>
+ </section>
+
+ <!-- Panel -->
+ <section class="panel">
+ <div class="intro color2">
+ <h2 class="major">Elit integer</h2>
+ <p>Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.</p>
+ </div>
+ <div class="gallery">
+ <div class="group span-3">
+ <a href="images/gallery/fulls/01.jpg" class="image filtered span-3" data-position="bottom"><img src="images/gallery/thumbs/01.jpg" alt="" /></a>
+ <a href="images/gallery/fulls/02.jpg" class="image filtered span-1-5" data-position="center"><img src="images/gallery/thumbs/02.jpg" alt="" /></a>
+ <a href="images/gallery/fulls/03.jpg" class="image filtered span-1-5" data-position="bottom"><img src="images/gallery/thumbs/03.jpg" alt="" /></a>
+ </div>
+ <a href="images/gallery/fulls/04.jpg" class="image filtered span-2-5" data-position="top"><img src="images/gallery/thumbs/04.jpg" alt="" /></a>
+ <div class="group span-4-5">
+ <a href="images/gallery/fulls/05.jpg" class="image filtered span-3" data-position="top"><img src="images/gallery/thumbs/05.jpg" alt="" /></a>
+ <a href="images/gallery/fulls/06.jpg" class="image filtered span-1-5" data-position="center"><img src="images/gallery/thumbs/06.jpg" alt="" /></a>
+ <a href="images/gallery/fulls/07.jpg" class="image filtered span-1-5" data-position="bottom"><img src="images/gallery/thumbs/07.jpg" alt="" /></a>
+ <a href="images/gallery/fulls/08.jpg" class="image filtered span-3" data-position="top"><img src="images/gallery/thumbs/08.jpg" alt="" /></a>
+ </div>
+ <a href="images/gallery/fulls/09.jpg" class="image filtered span-2-5" data-position="right"><img src="images/gallery/thumbs/09.jpg" alt="" /></a>
+ </div>
+ </section>
+
+ <!-- Panel -->
+ <section class="panel color4-alt">
+ <div class="intro color4">
+ <h2 class="major">Contact</h2>
+ <p>Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.</p>
+ </div>
+ <div class="inner columns divided">
+ <div class="span-3-25">
+ <form method="post" action="#">
+ <div class="field half">
+ <label for="name">Name</label>
+ <input type="text" name="name" id="name" />
+ </div>
+ <div class="field half">
+ <label for="email">Email</label>
+ <input type="email" name="email" id="email" />
+ </div>
+ <div class="field">
+ <label for="message">Message</label>
+ <textarea name="message" id="message" rows="4"></textarea>
+ </div>
+ <ul class="actions">
+ <li><input type="submit" value="Send Message" class="button special" /></li>
+ </ul>
+ </form>
+ </div>
+ <div class="span-1-5">
+ <ul class="contact-icons color1">
+ <li class="icon fa-twitter"><a href="#">@untitled-tld</a></li>
+ <li class="icon fa-facebook"><a href="#">facebook.com/untitled</a></li>
+ <li class="icon fa-snapchat-ghost"><a href="#">@untitled-tld</a></li>
+ <li class="icon fa-instagram"><a href="#">@untitled-tld</a></li>
+ <li class="icon fa-medium"><a href="#">medium.com/untitled</a></li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <!-- Panel -->
+ <section class="panel color2-alt">
+ <div class="intro color2">
+ <h2 class="major">Elements</h2>
+ <p>Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam. </p>
+ </div>
+ <div class="inner columns aligned">
+ <div class="span-2-75">
+
+ <h3 class="major">Text</h3>
+ <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
+ This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
+ This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
+
+ <h1>Heading Level 1</h1>
+ <h2>Heading Level 2</h2>
+ <h3>Heading Level 3</h3>
+ <h4>Heading Level 4</h4>
+ <h5>Heading Level 5</h5>
+ <h6>Heading Level 6</h6>
+
+ </div>
+ <div class="span-3">
+
+ <h4>Blockquote</h4>
+ <blockquote>Lorem ipsum dolor sit amet. Felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in vestibulum. Blandit adipiscing eu iaculis volutpat ac adipiscing volutpat ac adipiscing faucibus.</blockquote>
+
+ <h4>Preformatted</h4>
+ <pre><code>i = 0;
+
+while (!deck.isInOrder()) {
+ print 'Iteration ' + (i++);
+ deck.shuffle();
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
+
+ </div>
+ <div class="span-1-25">
+
+ <h3 class="major">Lists</h3>
+
+ <h4>Unordered</h4>
+ <ul>
+ <li>Lorem ipsum dolor sit.</li>
+ <li>Dolor pulvinar etiam.</li>
+ <li>Etiam vel felis viverra.</li>
+ </ul>
+
+ <h4>Alternate</h4>
+ <ul class="alt">
+ <li>Lorem ipsum dolor sit.</li>
+ <li>Dolor pulvinar etiam.</li>
+ <li>Etiam vel felis viverra.</li>
+ <li>Felis enim feugiat.</li>
+ </ul>
+
+ </div>
+ <div class="span-1-5">
+
+ <h4>Ordered</h4>
+ <ol>
+ <li>Lorem ipsum dolor sit.</li>
+ <li>Dolor pulvinar etiam.</li>
+ <li>Etiam vel felis viverra.</li>
+ <li>Felis enim feugiat.</li>
+ <li>Etiam vel felis lorem.</li>
+ </ol>
+
+ <h4>Actions</h4>
+ <ul class="actions">
+ <li><a href="#" class="button special color2">Default</a></li>
+ <li><a href="#" class="button">Default</a></li>
+ </ul>
+ <ul class="actions vertical">
+ <li><a href="#" class="button special color2">Default</a></li>
+ <li><a href="#" class="button">Default</a></li>
+ </ul>
+
+ </div>
+ <div class="span-1-25">
+
+ <h4>Icons</h4>
+ <ul class="icons">
+ <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
+ <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
+ <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
+ <li><a href="#" class="icon fa-github"><span class="label">GitHub</span></a></li>
+ <li><a href="#" class="icon fa-medium"><span class="label">Medium</span></a></li>
+ </ul>
+
+ <h4>Contact Icons</h4>
+ <ul class="contact-icons color2">
+ <li class="icon fa-twitter"><a href="#">Twitter</a></li>
+ <li class="icon fa-facebook"><a href="#">Facebook</a></li>
+ <li class="icon fa-instagram"><a href="#">Instagram</a></li>
+ <li class="icon fa-github"><a href="#">GitHub</a></li>
+ <li class="icon fa-medium"><a href="#">Medium</a></li>
+ </ul>
+
+ </div>
+ <div class="span-3">
+ <h3 class="major">Table</h3>
+ <h4>Default</h4>
+ <div class="table-wrapper">
+ <table>
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ <th>Price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Item One</td>
+ <td>Ante turpis integer aliquet porttitor.</td>
+ <td>29.99</td>
+ </tr>
+ <tr>
+ <td>Item Two</td>
+ <td>Vis ac commodo adipiscing arcu aliquet.</td>
+ <td>19.99</td>
+ </tr>
+ <tr>
+ <td>Item Three</td>
+ <td> Morbi faucibus arcu accumsan lorem.</td>
+ <td>29.99</td>
+ </tr>
+ <tr>
+ <td>Item Four</td>
+ <td>Vitae integer tempus condimentum.</td>
+ <td>19.99</td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr>
+ <td colspan="2"></td>
+ <td>100.00</td>
+ </tr>
+ </tfoot>
+ </table>
+ </div>
+ </div>
+ <div class="span-3">
+ <h4>Alternate</h4>
+ <div class="table-wrapper">
+ <table class="alt">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Description</th>
+ <th>Price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Item One</td>
+ <td>Ante turpis integer aliquet porttitor.</td>
+ <td>29.99</td>
+ </tr>
+ <tr>
+ <td>Item Two</td>
+ <td>Vis ac commodo adipiscing arcu aliquet.</td>
+ <td>19.99</td>
+ </tr>
+ <tr>
+ <td>Item Three</td>
+ <td> Morbi faucibus arcu accumsan lorem.</td>
+ <td>29.99</td>
+ </tr>
+ <tr>
+ <td>Item Four</td>
+ <td>Vitae integer tempus condimentum.</td>
+ <td>19.99</td>
+ </tr>
+ <tr>
+ <td>Item Five</td>
+ <td>Ante turpis integer aliquet porttitor.</td>
+ <td>29.99</td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr>
+ <td colspan="2"></td>
+ <td>100.00</td>
+ </tr>
+ </tfoot>
+ </table>
+ </div>
+ </div>
+ <div class="span-2-25">
+ <h3 class="major">Buttons</h3>
+ <ul class="actions">
+ <li><a href="#" class="button special color2">Special</a></li>
+ <li><a href="#" class="button">Default</a></li>
+ </ul>
+ <ul class="actions">
+ <li><a href="#" class="button">Default</a></li>
+ <li><a href="#" class="button large">Large</a></li>
+ <li><a href="#" class="button small">Small</a></li>
+ </ul>
+ <ul class="actions">
+ <li><a href="#" class="button special color2 icon fa-cog">Icon</a></li>
+ <li><a href="#" class="button icon fa-diamond">Icon</a></li>
+ </ul>
+ <ul class="actions">
+ <li><span class="button special color2 disabled">Disabled</span></li>
+ <li><span class="button disabled">Disabled</span></li>
+ </ul>
+ <ul class="actions">
+ <li><a href="#" class="button special color2 circle icon fa-cog">Icon</a></li>
+ <li><a href="#" class="button circle icon fa-diamond">Icon</a></li>
+ </ul>
+ </div>
+ <div class="span-4-5">
+ <h3 class="major">Form</h3>
+ <form method="post" action="#">
+ <div class="field third">
+ <label for="demo-name">Name</label>
+ <input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
+ </div>
+ <div class="field third">
+ <label for="demo-email">Email</label>
+ <input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
+ </div>
+ <div class="field third">
+ <label for="demo-category">Category</label>
+ <div class="select-wrapper">
+ <select name="demo-category" id="demo-category">
+ <option value="">-</option>
+ <option value="1">Manufacturing</option>
+ <option value="1">Shipping</option>
+ <option value="1">Administration</option>
+ <option value="1">Human Resources</option>
+ </select>
+ </div>
+ </div>
+ <div class="field quarter">
+ <input type="radio" id="demo-priority-low" name="demo-priority" class="color2" checked />
+ <label for="demo-priority-low">Low Priority</label>
+ </div>
+ <div class="field quarter">
+ <input type="radio" id="demo-priority-high" name="demo-priority" class="color2" />
+ <label for="demo-priority-high">High Priority</label>
+ </div>
+ <div class="field quarter">
+ <input type="checkbox" id="demo-copy" name="demo-copy" class="color2" />
+ <label for="demo-copy">Email a copy</label>
+ </div>
+ <div class="field quarter">
+ <input type="checkbox" id="demo-human" name="demo-human" class="color2" checked />
+ <label for="demo-human">Not a robot</label>
+ </div>
+ <div class="field">
+ <label for="demo-message">Message</label>
+ <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="2"></textarea>
+ </div>
+ <ul class="actions">
+ <li><input type="submit" value="Send Message" class="special color2" /></li>
+ <li><input type="reset" value="Reset" /></li>
+ </ul>
+ </form>
+ </div>
+ </div>
+ </section>
+
+ <!-- Copyright -->
+ <div class="copyright">&copy; Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</div>
+
+ </div>
+
+ </div>
+
+ <!-- Scripts -->
+ <script src="assets/js/jquery.min.js"></script>
+ <script src="assets/js/skel.min.js"></script>
+ <script src="assets/js/main.js"></script>
+
+ </body>
</html> \ No newline at end of file